/* =====================================================================================================================
   DashMage  -  the application pages

   Everything past the home page: the inner-page banners, pricing, the build wizard, the member area, forms and
   sign-in, tables, checkout and the tax invoice, support and the legal pages, toasts, dialogs and the theme showcase.
   Loaded after style.css, which holds the tokens, type, buttons, navigation and the home page.

   The look follows the site: deep navy (--navy / --panel) and one vivid orange (--accent), Syne for headings, labels
   and figures, Mulish for reading, square-cornered cards on a white or light-grey page, navy table heads and navy
   banners with a faint square grid. Every colour is a token, so [data-theme="dark"] follows.
   ===================================================================================================================== */

:root {
    /* The faint square grid laid over the navy surfaces. */
    --app-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px;
    --app-ease: cubic-bezier(.2, .7, .2, 1);
    /* A big outlined hexagon and a rising chart line, drawn faint on the right of every banner. */
    --app-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 440' fill='none'%3E%3Cpath d='M400 -30 L599 85 L599 315 L400 430 L201 315 L201 85 Z' stroke='rgba(255,255,255,0.06)' stroke-width='2'/%3E%3Cpath d='M400 60 L521 130 L521 270 L400 340 L279 270 L279 130 Z' stroke='rgba(254,89,36,0.16)' stroke-width='2'/%3E%3Cpolyline points='0,352 90,318 160,336 240,262 320,284 400,200 470,222 560,128 640,96' stroke='rgba(254,89,36,0.4)' stroke-width='3' stroke-linejoin='round'/%3E%3Cg fill='rgba(254,89,36,0.7)'%3E%3Ccircle cx='240' cy='262' r='5'/%3E%3Ccircle cx='400' cy='200' r='5'/%3E%3Ccircle cx='560' cy='128' r='5'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------------------------------------------------
   INNER-PAGE BANNERS  -  a full-bleed navy band under the navigation (.page-top in the markup, .page-banner added by
   js/action.js addBanners), crumbs on top, a big white title with an orange rule under it
   --------------------------------------------------------------------------------------------------------------------- */

.page:has(.page-top) { overflow-x: clip; }

.page-top, .section-head.page-top {
    position: relative; isolation: isolate; z-index: 0;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    max-width: none; padding: 92px 0 96px; margin: 0 0 84px; color: var(--panel-mute);
}
.page-top::before {
    content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
    transform: none; border-radius: 0; -webkit-mask: none; mask: none;
    background: var(--app-grid), var(--panel);
}
.page-top::after {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: auto; right: calc(50% - 50vw); width: min(46vw, 700px);
    transform: none; border-radius: 0; -webkit-mask: none; mask: none; pointer-events: none;
    background: var(--app-deco) right -60px center / auto 112% no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%);
}
.page-top .eyebrow { display: none; }
.page-top h1, .section-head.page-top > h1 {
    margin: 0; max-width: 920px; color: #fff; font: 700 clamp(40px, 5.2vw, 72px)/1.06 var(--display); letter-spacing: -0.015em; text-wrap: balance;
}
.page-top h1::after { content: ''; display: block; width: 60px; height: 4px; margin-top: 28px; background: var(--accent); }
.page-top h1 em, .page-top h1 .accent { font-style: normal; color: var(--accent); }
.page-top p, .section-head.page-top > p {
    align-self: flex-start; max-width: 680px; margin: 24px 0 0; padding: 0; font-size: 17.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.72);
}
.page-banner { padding: 80px 0 84px; margin-bottom: 60px; }
.page-banner h1 { font-size: clamp(38px, 4.6vw, 64px); }

/* The crumbs sit above the title, like a section label: Home ↘ Pricing. */
.crumbs {
    order: -1; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 22px; padding: 0;
    border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font: 500 15.5px/1.3 var(--display); color: #fff;
}
.crumbs a { color: rgba(255, 255, 255, 0.66); cursor: pointer; text-decoration: none; transition: color 0.2s ease; }
.crumbs a:hover { color: var(--accent); }
.crumbs a .fa-house { display: none; }
.crumbs > i { font-size: 12px; color: var(--accent); }
.crumbs > i::before { content: '\e093'; }
.crumbs span { font-weight: 600; color: #fff; }

/* Where a banner carries the title, the page's own heading steps aside. */
.has-banner .page-head > div > h1, .has-banner .create-head h1, .has-banner .checkout-summary > h1 { display: none; }
.has-banner .create-head { justify-content: center; }
.has-banner .create-wrap, .has-banner .checkout-wrap, .has-banner .invoice-wrap, .has-banner .member-layout { padding-top: 0; }


/* ---------------------------------------------------------------------------------------------------------------------
   PRICING  -  white square plans with a navy head, lifted over the bottom of the banner; the recommended plan wears an
   orange top bar and the orange button
   --------------------------------------------------------------------------------------------------------------------- */

.period-toggle { display: inline-flex; gap: 0; padding: 4px; margin-top: 34px; border-radius: var(--r); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); }
.period-toggle button { display: inline-flex; align-items: center; border: 0; background: transparent; padding: 0 22px; height: 44px; border-radius: var(--r-sm); font: 600 15px/1 var(--display); color: rgba(255, 255, 255, 0.78); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.period-toggle button:hover { color: #fff; }
.period-toggle button.active { background: var(--accent); color: #fff; }
.period-toggle em { font: normal 700 10.5px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: #fff; padding: 5px 7px; border-radius: var(--r-sm); margin-left: 10px; }

#page-pricing .page-top { padding-bottom: 196px; margin-bottom: 0; }
#page-pricing .pricing-grid { position: relative; z-index: 2; margin-top: -132px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; padding: 0; border-radius: 0; background: none; overflow: visible; }
.pricing-grid::after { content: none; }

.price-card {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr auto auto; align-content: start;
    padding: 0 0 32px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
    box-shadow: 0 30px 60px -40px rgba(27, 30, 49, 0.35); cursor: pointer; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: transform 0.35s var(--app-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.price-card:not([data-plan]) { cursor: default; }
/* The navy head: a grid item behind the name, tagline, price and note. */
.price-card::before {
    content: ''; grid-row: 1 / 5; grid-column: 1; z-index: 0; position: static; inset: auto; opacity: 1; border-radius: var(--r) var(--r) 0 0;
    background: var(--app-grid), var(--panel); pointer-events: none;
}
.price-card::after { content: none; }
.price-card > * { position: relative; z-index: 1; grid-column: 1; margin-left: 32px; margin-right: 32px; }
.price-card > h3 { grid-row: 1; }
.price-card > .tagline { grid-row: 2; }
.price-card > .price { grid-row: 3; }
.price-card > .price-note { grid-row: 4; }
.price-card > .pc-ai { grid-row: 5; }
.price-card > ul { grid-row: 6; }
.price-card > .btn { grid-row: 7; }
.price-card > .current { grid-row: 8; }

.price-card h3 { margin-top: 34px; font: 700 25px/1.2 var(--display); letter-spacing: -0.01em; color: #fff; }
.price-card .tagline { margin-top: 6px; margin-bottom: 26px; font-size: 15px; line-height: 1.55; color: var(--panel-mute); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.price strong { font: 700 58px/1 var(--display); letter-spacing: -0.03em; color: #fff; }
.price span { color: var(--panel-mute); font-size: 15px; }
.price-note { min-height: 22px; margin-bottom: 0; padding-bottom: 30px; border: 0; font-size: 14px; color: var(--panel-mute); }
.price-note .save { color: var(--accent); font-weight: 700; }
.price-card .pc-ai { margin-top: 28px; }
.price-card ul { list-style: none; margin-top: 26px; margin-bottom: 32px; display: grid; gap: 13px; align-content: start; }
.price-card li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.price-card li i { flex-shrink: 0; margin-top: 4px; font-size: 12px; color: var(--accent); }
.price-card .btn { align-self: end; width: auto; height: 54px; justify-content: center; }
.price-card .btn-secondary, .price-card .btn-ghost { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: inset 3px 0 0 var(--accent); }
.price-card .btn-secondary:hover, .price-card .btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.price-card .btn:disabled, .price-card .btn:disabled:hover { background: var(--bg-2); border-color: var(--line); color: var(--ink-3); box-shadow: none; }
.price-card .current { margin-top: 14px; text-align: center; font: 600 14px/1.4 var(--display); color: var(--good); }

.price-card.featured { border-color: transparent; box-shadow: 0 40px 80px -40px rgba(254, 89, 36, 0.45), 0 0 0 1px var(--line); }
.price-card.featured::after { content: ''; position: absolute; z-index: 2; top: -1px; left: -1px; right: -1px; height: 5px; border-radius: var(--r) var(--r) 0 0; background: var(--accent); pointer-events: none; }
.price-card .badge { position: absolute; z-index: 2; top: 30px; right: 0; margin: 0 28px 0 0; padding: 7px 10px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font: 700 11px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price-card.featured:hover { box-shadow: 0 44px 80px -36px rgba(254, 89, 36, 0.55), 0 0 0 1px var(--line); }
.price-card.selected { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.price-card.featured.selected { border-color: var(--accent); }

/* The chosen tier: a "Selected" tag over the top edge. */
.pc-picked {
    position: absolute; z-index: 3; top: -15px; left: 50%; margin: 0; transform: translate(-50%, 6px); opacity: 0;
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r-sm);
    background: var(--accent); color: #fff; font: 700 11.5px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: 0 10px 24px -10px rgba(254, 89, 36, 0.8); transition: opacity 0.3s ease, transform 0.3s var(--app-ease);
}
.price-card.selected .pc-picked { opacity: 1; transform: translate(-50%, 0); }
.price-card.featured .pc-picked { top: -19px; }

@media (hover: none) { .price-card:hover { transform: none; } }

/* The checkout, under the plans. */
.pricing-checkout { margin-top: 100px; scroll-margin-top: calc(var(--strip-h, 0px) + var(--nav-h, 80px) + 20px); animation: checkoutIn 0.5s var(--app-ease) both; }
@keyframes checkoutIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pricing-checkout .section-head.center p { margin: 14px auto 0; max-width: 560px; }
.pricing-checkout .checkout-summary > h1 { display: none; }
.pricing-checkout .order-card { margin-top: 0; }
.pricing-checkout .checkout-grid { gap: 30px; }
.pricing-guest { max-width: 760px; margin: 0 auto; }
.pricing-guest .panel { padding: 40px; }
.pricing-guest h3 { font: 700 26px/1.2 var(--display); color: var(--ink); margin: 24px 0 6px; }
.pricing-guest form { margin-top: 22px; }
.pricing-guest .form-footer { text-align: left; }
.pg-plan { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r); background: var(--app-grid), var(--panel); color: #fff; box-shadow: inset 4px 0 0 var(--accent); }
.pg-plan span { font: 600 15.5px/1.3 var(--display); }
.pg-plan strong { font: 700 26px/1 var(--display); color: var(--accent); }

/* Plan details: a navy head row and alternating grey rows. */
.compare { margin: 110px 0 130px; }
.compare .section-head h2 { margin-bottom: 0; }
.compare .table-scroll { padding: 0; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(27, 30, 49, 0.4); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 17px 20px; border: 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--ink); padding-left: 32px; }
.compare-table thead th { padding-top: 24px; padding-bottom: 24px; background: var(--panel); color: #fff; font: 600 19px/1.2 var(--display); letter-spacing: -0.01em; }
.compare-table thead th:nth-child(3) { box-shadow: inset 0 4px 0 var(--accent); }
.compare-table tbody tr:nth-child(odd) td { background: var(--bg-2); }
.compare-table tbody tr:hover td { background: var(--accent-soft); }
.compare-table td strong { color: var(--ink); font-weight: 700; }
.compare-table .yes { color: var(--accent); }
.compare-table .no { color: var(--muted); }

/* The value strip under the plans. */
.value-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 70px 0 10px; }
.value-strip div { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform 0.35s var(--app-ease), box-shadow 0.35s ease, border-color 0.35s ease; }
.value-strip div:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow); }
.value-strip i { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 22px; margin-bottom: 18px; background: var(--bg-2); }
.value-strip strong { font: 700 20px/1.25 var(--display); color: var(--ink); }
.value-strip span { font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* Live data connections on every plan (default.aspx #page-pricing .pc-live). */
.pc-live { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin: 30px 0 10px; padding: 52px; border-radius: var(--r); color: var(--panel-mute); background: var(--app-grid), var(--panel); }
.pc-live::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 5px; background: var(--accent); -webkit-mask: none; mask: none; }
.pc-live-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.4 var(--display); color: var(--panel-mute); }
.pc-live-kicker i { color: var(--accent); }
.pc-live h2 { margin: 12px 0 16px; color: #fff; font: 700 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -0.01em; }
.pc-live-copy > p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.pc-live-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.pc-live-plans div { display: grid; gap: 4px; padding: 16px 16px 15px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid rgba(255, 255, 255, 0.06); }
.pc-live-plans strong { font: 600 12px/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-mute); }
.pc-live-plans b { font: 700 32px/1 var(--display); color: #fff; }
.pc-live-plans span { font-size: 12.5px; line-height: 1.4; color: var(--panel-mute); }
.pc-live-plans .best { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.pc-live-plans .best strong, .pc-live-plans .best b { color: var(--accent); }
.pc-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pc-live-grid span { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 6px 14px; border-radius: var(--r-sm); text-align: center; font: 600 12.5px/1.25 var(--display); color: rgba(255, 255, 255, 0.86);
    background: var(--panel-2); border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.3s var(--app-ease), border-color 0.3s ease, background 0.3s ease; }
.pc-live-grid span:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 70%, #fff); background: var(--panel-3); }
.pc-live-grid i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); font-size: 16px; color: #fff; background: var(--c); }


/* ---------------------------------------------------------------------------------------------------------------------
   CREATE  -  the build wizard: a numbered stepper, the drop zone, the samples, review, theme and the build itself
   --------------------------------------------------------------------------------------------------------------------- */

.create-wrap { padding-top: 30px; padding-bottom: 110px; }
.create-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.create-head h1 { font: 700 clamp(38px, 4.6vw, 64px)/1.08 var(--display); letter-spacing: -0.015em; }

/* 01 Data — 02 Review — 03 Design — 04 Build, joined by a rule. */
.stepper { list-style: none; display: flex; align-items: center; gap: 0; padding: 0; border-radius: 0; background: none; counter-reset: none; }
.stepper li { position: relative; display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 0; background: none; font: 600 15px/1 var(--display); color: var(--ink-3); white-space: nowrap; }
.stepper li + li { margin-left: 64px; }
.stepper li + li::before { content: ''; position: absolute; right: calc(100% + 12px); top: 50%; width: 40px; height: 2px; background: var(--line-2); }
.stepper li span { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line-2); color: var(--ink-3); font: 700 14px/1 var(--display); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.stepper li span::before { content: '0'; }
.stepper li.active { color: var(--ink); background: none; }
.stepper li.active span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 12px 24px -12px rgba(254, 89, 36, 0.8); }
.stepper li.done { color: var(--ink); }
.stepper li.done span { background: var(--navy); border-color: var(--navy); color: transparent; font-size: 0; position: relative; }
.stepper li.done span::before { content: '\f00c'; font: 900 13px/1 'Font Awesome 6 Pro'; color: #fff; }
.stepper li.done + li::before, .stepper li.done + li.active::before { background: var(--accent); }
[data-theme="dark"] .stepper li.done span { background: var(--navy-3, #2D3250); border-color: var(--navy-3, #2D3250); }

.dropzone {
    position: relative; display: block; text-align: center; padding: 78px 24px 70px; border-radius: var(--r);
    border: 2px dashed var(--line-2); background: var(--card); cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
[data-theme="dark"] .dropzone:hover, [data-theme="dark"] .dropzone.drag { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dz-icon { width: 108px; height: 108px; margin: 0 auto 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; color: var(--accent); background: var(--bg-2); box-shadow: none; transition: transform 0.35s var(--app-ease), background 0.3s ease, color 0.3s ease; }
.dropzone:hover .dz-icon, .dropzone.drag .dz-icon { transform: translateY(-6px); background: var(--accent); color: #fff; }
.dropzone h2 { font: 700 clamp(28px, 3.2vw, 42px)/1.12 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.dropzone .link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dz-limit { font-size: 14px; color: var(--ink-3); margin-top: 12px; }
.dz-progress { display: none; max-width: 420px; margin: 24px auto 0; }
.dropzone.busy .dz-progress { display: block; }
.dz-bar { height: 6px; border-radius: 0; background: var(--bg-3); overflow: hidden; margin-bottom: 10px; }
.dz-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.dz-progress > span { font: 600 14px/1.3 var(--display); color: var(--ink-2); }

.samples { margin-top: 44px; }
.samples-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 500 16px/1.3 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.samples-label::before { content: ''; width: 18px; height: 2px; background: var(--accent); font: inherit; }
.sample-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sample-card {
    position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 4px; align-items: center; text-align: left;
    padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit; color: var(--ink);
    transition: transform 0.35s var(--app-ease), box-shadow 0.35s ease, border-color 0.3s ease;
}
.sample-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.sample-card i { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.3s ease, color 0.3s ease; }
.sample-card:hover i { background: var(--accent); color: #fff; }
.sample-card strong { align-self: end; font: 700 17px/1.3 var(--display); color: var(--ink); }
.sample-card span { align-self: start; font-size: 13.5px; color: var(--ink-3); }

.assurance { display: flex; justify-content: center; gap: 12px 32px; flex-wrap: wrap; margin-top: 36px; font-size: 14.5px; color: var(--ink-2); }
.assurance i { color: var(--accent); margin-right: 8px; }

.create-step > h2 { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -0.01em; margin-bottom: 8px; }

.review-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 26px; }
.review-head h2 { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -0.01em; margin-bottom: 6px; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-warnings .notice { margin-bottom: 10px; }
.review-joins { margin-bottom: 24px; }
.join-list { display: grid; gap: 10px; }
.join-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent); font-size: 15px; }
.join-item code { font: 500 12.5px/1.3 var(--mono); background: var(--bg-2); padding: 5px 8px; border-radius: var(--r-sm); color: var(--ink); }
.join-item .arrow { color: var(--accent); }
.join-item .cov { margin-left: auto; font: 600 13px/1.3 var(--display); color: var(--good); }
.join-item .cov.weak { color: var(--warn); }

.review-tables { display: grid; gap: 14px; }
.rt { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s ease; }
.rt.open { border-color: var(--line-2); }
.rt.excluded { opacity: 0.55; }
.rt-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; }
.rt-head:hover { background: var(--bg-2); }
.rt-head .rt-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.rt.open .rt-head .rt-icon { background: var(--accent); }
.rt-head h3 { font: 700 19px/1.25 var(--display); }
.rt-head .rt-meta { font-size: 13.5px; color: var(--ink-3); }
.rt-head .rt-toggle { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.rt-body { display: none; border-top: 1px solid var(--line); }
.rt.open .rt-body { display: block; }
.rt-notes { padding: 12px 22px; font-size: 14px; color: var(--ink-2); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.rt-notes i { color: var(--accent); margin-right: 6px; }
.col-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.col-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.col-chip .t { font: 700 9.5px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-sm); background: var(--bg-3); color: var(--ink-3); }
.col-chip .t.number, .col-chip .t.integer { background: var(--brand-tint); color: var(--brand-ink); }
.col-chip .t.date, .col-chip .t.datetime { background: rgba(27, 30, 49, 0.1); color: var(--navy); }
[data-theme="dark"] .col-chip .t.date, [data-theme="dark"] .col-chip .t.datetime { background: rgba(255, 255, 255, 0.1); color: #fff; }
.col-chip .t.string { background: var(--good-bg); color: var(--good); }
.col-chip .t.boolean { background: var(--warn-bg); color: var(--warn); }
.col-chip .k { color: var(--warn); font-size: 11px; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: 0.25s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: var(--r-sm); transition: 0.25s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }

.instructions-box { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: inset 3px 0 0 var(--accent); }
.instructions-box label { display: block; font: 600 16px/1.4 var(--display); color: var(--ink); margin-bottom: 12px; }
.instructions-box label i { color: var(--accent); margin-right: 8px; }
.instructions-box label .muted { font-family: var(--font); font-weight: 400; }
.build-bar { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.picker-grid { margin: 22px 0 30px; }

.build-stage { max-width: 620px; margin: 40px auto; text-align: center; }
.build-stage h2 { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -0.01em; }
.build-orb { position: relative; width: 128px; height: 128px; margin: 0 auto 38px; border-radius: 50%; background: var(--app-grid), var(--navy); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 40px; box-shadow: 0 30px 60px -24px rgba(27, 30, 49, 0.7), inset 0 0 0 4px rgba(254, 89, 36, 0.9); animation: orbPulse 2.4s ease-in-out infinite; }
.orb-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(254, 89, 36, 0.45); animation: orbRing 2.4s ease-out infinite; }
.orb-ring.r2 { animation-delay: 1.2s; }
@keyframes orbPulse { 50% { transform: scale(1.04); } }
@keyframes orbRing { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.build-status { font: 600 16.5px/1.5 var(--display); color: var(--ink-2); margin: 12px 0 22px; min-height: 26px; }
.build-meter { height: 6px; border-radius: 0; background: var(--bg-3); overflow: hidden; margin-bottom: 30px; }
.build-meter span { display: block; height: 100%; width: 3%; border-radius: 0; background: var(--accent); transition: width 0.8s ease; }
.build-checklist { list-style: none; text-align: left; display: grid; gap: 12px; max-width: 460px; margin: 0 auto 16px; }
.build-checklist li { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-3); font-size: 15.5px; transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.build-checklist li.done { color: var(--ink); }
.build-checklist li.done i { color: var(--good); }
.build-checklist li.now { color: var(--ink); font-weight: 600; border-color: transparent; box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--line-2); }
.build-checklist li.now i { color: var(--accent); }

/* The widget editor's "Other" switch (render.js openEditor). */
.ed-other { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.ed-other input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.ed-other b { color: var(--ink); font-weight: 700; }
.ed-other small { display: block; font-size: 12.5px; }


/* ---------------------------------------------------------------------------------------------------------------------
   MEMBER AREA  -  the account rail, page heads, panels, dashboard cards, chips, menus, the plan and its usage
   --------------------------------------------------------------------------------------------------------------------- */

.member-layout { max-width: 1320px; margin: 0 auto; padding: 20px 40px 110px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; }
.member-main { min-width: 0; }
.member-nav { position: sticky; top: calc(var(--strip-h, 0px) + var(--nav-h, 80px) + 24px); align-self: start; display: grid; gap: 0; padding: 0 0 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.member-nav .mn-plan { padding: 24px 22px 22px; border-radius: 0; background: var(--app-grid), var(--panel); color: var(--panel-mute); margin-bottom: 8px; box-shadow: inset 0 4px 0 var(--accent); }
.member-nav .mn-plan span { display: block; font: 500 13.5px/1.4 var(--display); color: var(--panel-mute); }
.member-nav .mn-plan strong { display: block; font: 700 28px/1.15 var(--display); color: #fff; margin: 4px 0 2px; }
.member-nav .mn-plan a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 14px/1 var(--display); color: var(--accent); }
.member-nav .mn-plan a::after { content: '\e093'; font: 900 11px/1 'Font Awesome 6 Pro'; transition: transform 0.25s ease; }
.member-nav .mn-plan a:hover { color: #fff; }
.member-nav .mn-plan a:hover::after { transform: translate(2px, 2px); }
.member-nav > a { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-radius: 0; color: var(--ink-2); font: 600 15px/1.2 var(--display); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.member-nav > a i { width: 18px; text-align: center; color: var(--ink-3); transition: color 0.2s ease; }
.member-nav > a:hover { background: var(--bg-2); color: var(--ink); }
.member-nav > a:hover i { color: var(--accent); }
.member-nav > a.active { background: var(--accent-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.member-nav > a.active i { color: var(--accent); }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.page-head h1 { font: 700 clamp(34px, 4vw, 54px)/1.08 var(--display); letter-spacing: -0.015em; }
.page-head h2 { font: 700 28px/1.2 var(--display); letter-spacing: -0.01em; }
.page-head p { margin-top: 6px; }
.has-banner .page-head { align-items: center; }
.has-banner .page-head p { margin-top: 0; font-size: 16px; }

.panel { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 36px; margin-bottom: 22px; }
.panel h2 { font: 700 24px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 24px; }
.panel h2::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 14px; background: var(--accent); }
.panel-danger { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); box-shadow: inset 3px 0 0 var(--bad); }
.panel-danger h2::after { background: var(--bad); }
.panel-danger p { margin-bottom: 18px; }
.sub-head { font: 700 18px/1.3 var(--display); margin: 28px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.sub-head .muted { font: 400 15px/1.4 var(--font); }

/* Dashboard cards: square, the thumbnail on top, an orange rule that runs along the top on hover. */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.dcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 0; overflow: hidden; cursor: pointer; transition: transform 0.35s var(--app-ease), box-shadow 0.35s ease, border-color 0.35s ease; }
.dcard::after { content: ''; position: absolute; z-index: 3; top: 0; left: 0; width: 0; height: 3px; background: var(--accent); transition: width 0.45s var(--app-ease); }
.dcard:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow); }
.dcard:hover::after { width: 100%; }
.dcard-thumb { height: 170px; position: relative; overflow: hidden; border-radius: 0; border-bottom: 1px solid var(--line); }
.dcard-body { padding: 20px 22px 6px; }
.dcard-body h3 { font: 700 18px/1.3 var(--display); color: var(--ink); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s ease; }
.dcard:hover .dcard-body h3 { color: var(--accent); }
.dcard-body p { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 22px 16px; border-top: 1px solid var(--line); margin-left: 0; margin-right: 0; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.dcard-body + .dcard-foot { margin-top: 14px; }
.dcard-foot i { margin-right: 3px; }
.dcard-menu { position: absolute; top: 12px; right: 12px; z-index: 4; }
.dcard-menu > button { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, 0.18); background: var(--navy); color: #fff; cursor: pointer; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background 0.2s ease; }
.dcard-menu > button:hover { background: var(--accent); }
.dcard-menu .menu { right: 0; top: 42px; }
.dcard-new { align-items: center; justify-content: center; gap: 16px; min-height: 300px; border: 2px dashed var(--line-2); background: transparent; color: var(--ink); font: 700 17px/1 var(--display); }
.dcard-new:hover { border-color: var(--accent); border-style: dashed; color: var(--accent); background: color-mix(in srgb, var(--accent) 3%, transparent); }
.dcard-new::after { content: none; }
.dcard-new i { width: 70px; height: 70px; border-radius: 50%; background: var(--bg-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background 0.3s ease, color 0.3s ease; }
.dcard-new:hover i { background: var(--accent); color: #fff; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 72px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.empty-state > i { font-size: 30px; color: var(--accent); margin-bottom: 24px; width: 92px; height: 92px; border-radius: 50%; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; }
.empty-state h2 { font: 700 clamp(26px, 3vw, 34px)/1.15 var(--display); letter-spacing: -0.01em; margin-bottom: 10px; }
.empty-state p { margin: 0 auto 26px; max-width: 520px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); }
.chip i { font-size: 10.5px; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.brand { background: var(--brand-tint); color: var(--brand-ink); }

.menu { position: absolute; min-width: 210px; padding: 6px 0; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-lg); border: 1px solid var(--line); border-top: 3px solid var(--accent); display: none; z-index: 30; }
.menu.open { display: block; }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 11px; padding: 11px 16px; border-radius: 0; border: 0; background: none; color: var(--ink-2); font: 600 14px/1.2 var(--display); cursor: pointer; text-align: left; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.menu a:hover, .menu button:hover { background: var(--bg-2); color: var(--ink); }
.menu a i, .menu button i { width: 16px; text-align: center; color: var(--accent); }
.menu .danger, .menu .danger i { color: var(--bad); }

.plan-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; padding: 42px 46px; border-radius: var(--r); color: var(--panel-mute); margin-bottom: 22px; background: var(--app-grid), var(--panel); box-shadow: inset 5px 0 0 var(--accent); }
.plan-hero::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: -60px; width: 460px; background: var(--app-deco) right center / auto 130% no-repeat; opacity: 0.8; pointer-events: none; }
.plan-hero span { font: 500 16px/1.4 var(--display); color: var(--panel-mute); }
.plan-hero h2 { color: #fff; font: 700 clamp(38px, 4.2vw, 60px)/1.05 var(--display); letter-spacing: -0.015em; margin: 8px 0 12px; }
.plan-hero p { color: rgba(255, 255, 255, 0.72); max-width: 620px; }
.plan-hero p strong { color: #fff; }
.plan-hero .btn { height: 54px; }
.usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.usage { padding: 26px 26px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.usage > span { display: block; font: 500 14px/1.4 var(--display); color: var(--ink-3); }
.usage strong { display: block; font: 700 40px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 14px; }
.usage strong small { font: 500 14px var(--font); color: var(--ink-3); letter-spacing: 0; }
.usage p.small { color: var(--ink-3); }
.meter { height: 6px; border-radius: 0; background: var(--bg-3); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 0; background: var(--accent); }
.meter.warn span { background: var(--amber); }
.meter.full span { background: var(--bad); }


/* ---------------------------------------------------------------------------------------------------------------------
   FORMS  -  52px fields on a light fill, Syne labels, an orange focus ring
   --------------------------------------------------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field label { display: block; font: 600 14px/1.4 var(--display); color: var(--ink); margin-bottom: 8px; }
.field label .muted { font: 400 13.5px/1.4 var(--font); }
.field input, .field select, .field textarea, textarea, .input {
    width: 100%; height: 52px; padding: 0 18px; border-radius: 3px; border: 1px solid var(--line); background: var(--input);
    color: var(--ink); font: 400 16px/1.4 var(--font); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; outline: none;
}
textarea, .field textarea { height: auto; padding: 14px 18px; resize: vertical; }
.field input::placeholder, textarea::placeholder, .input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, textarea:focus, .input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--focus); }
.field.has-error input { border-color: var(--bad); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.three { grid-template-columns: 2fr 1.3fr 1fr; }
.field-row { display: flex; justify-content: flex-end; margin: -6px 0 18px; font-size: 14px; }
.field-row a { font-weight: 600; }
.check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); margin: 8px 0 22px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Sign-in and its siblings: a split card on the light-grey page - the heading on a navy panel, the form beside it. */
.auth-wrap {
    position: relative; isolation: isolate; min-height: calc(100vh - var(--strip-h, 0px) - var(--nav-h, 80px)); margin: 0; border-radius: 0;
    display: flex; align-items: center; justify-content: center; padding: 70px 20px 90px; overflow: hidden; background: var(--bg-2);
}
.auth-wrap::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 0; -webkit-mask: none; mask: none; background: var(--app-deco) right -120px bottom -80px / 760px auto no-repeat; opacity: 0.55; filter: invert(1) hue-rotate(180deg) brightness(0.9); pointer-events: none; }
[data-theme="dark"] .auth-wrap::after { filter: none; opacity: 0.8; }
.form-card { width: 100%; max-width: 480px; padding: 44px 40px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); margin: 0 auto; }
.form-header { text-align: center; margin-bottom: 30px; }
.form-header h1, .form-header h2 { font: 700 34px/1.12 var(--display); letter-spacing: -0.015em; margin: 22px 0 10px; }
.form-icon { width: 72px; height: 72px; margin: 0 auto; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 16px 34px -16px rgba(254, 89, 36, 0.8); }
.form-icon .spinner { width: 32px; height: 32px; border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
.form-icon.ok { color: #fff; background: var(--good); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--good) 80%, transparent); }
.form-card .btn-block { height: 54px; margin-top: 6px; }
.form-footer { text-align: center; margin-top: 24px; font-size: 15px; color: var(--ink-3); }
.form-footer a { font-weight: 700; cursor: pointer; }

:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
    --split: 420px; max-width: 1000px; min-height: 560px; padding: 56px 56px 50px calc(var(--split) + 56px); overflow: hidden;
}
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header {
    position: absolute; top: 0; left: 0; bottom: 0; width: var(--split); overflow: hidden; isolation: isolate; margin: 0; padding: 56px 46px 60px;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
    background: var(--app-grid), var(--panel); color: var(--panel-mute);
}
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header::before {
    content: ''; position: absolute; z-index: -1; left: -60px; right: -120px; bottom: -70px; height: 220px; background: var(--app-deco) left bottom / 100% auto no-repeat; opacity: 0.45; pointer-events: none;
}
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header::after {
    content: 'DashMage.com'; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); align-self: stretch;
    font: 600 14px/1 var(--display); color: rgba(255, 255, 255, 0.5);
}
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h1, :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h2 { color: #fff; font-size: clamp(30px, 3vw, 40px); margin: 30px 0 0; }
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h1::after, :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h2::after { content: ''; display: block; width: 60px; height: 4px; margin-top: 22px; background: var(--accent); }
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header p { margin-top: 20px; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-icon { margin: 0; width: 64px; height: 64px; font-size: 23px; }
:is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-footer { text-align: left; padding-top: 20px; border-top: 1px solid var(--line); }
#LoginNotice:empty { display: none; }
#StepAccount { padding: 20px 0 10px; }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.55; border-left: 3px solid currentColor; }
.notice i { margin-top: 4px; }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; }
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.notice-info { background: var(--brand-tint); color: var(--brand-ink); }
.notice-good { background: var(--good-bg); color: var(--good); }
.notice-bad { background: var(--bad-bg); color: var(--bad); }


/* ---------------------------------------------------------------------------------------------------------------------
   TABLES  -  a navy head row, alternating grey rows
   --------------------------------------------------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th { text-align: left; font: 600 13.5px/1.2 var(--display); letter-spacing: 0; text-transform: none; color: #fff; background: var(--panel); padding: 15px 16px; border: 0; white-space: nowrap; }
.data-table th.num { text-align: right; }
.data-table td { padding: 15px 16px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.data-table tbody tr:nth-child(even) td { background: var(--bg-2); }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { font-weight: 600; cursor: pointer; }
.data-table .empty { text-align: center; color: var(--ink-3); padding: 36px 12px; background: none !important; }
.panel .table-scroll { border: 1px solid var(--line); border-radius: var(--r-sm); }


/* ---------------------------------------------------------------------------------------------------------------------
   CHECKOUT / INVOICE
   --------------------------------------------------------------------------------------------------------------------- */

.checkout-wrap { padding-top: 30px; padding-bottom: 110px; }
.checkout-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.checkout-summary h1 { font: 700 clamp(38px, 4.6vw, 64px)/1.08 var(--display); letter-spacing: -0.015em; }
.order-card { margin: 24px 0; padding: 0; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.order-card > * { margin-left: 28px; margin-right: 28px; }
.order-line { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 24px 28px; border-bottom: 0; background: var(--app-grid), var(--panel); color: var(--panel-mute); }
.order-line strong { display: block; font: 700 19px/1.3 var(--display); color: #fff; }
.order-line span { font-size: 14px; color: var(--panel-mute); }
.order-line > :last-child { font: 700 19px/1.3 var(--display); color: #fff; }
.order-total { display: flex; justify-content: space-between; padding-top: 20px; font: 700 24px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.order-total > :last-child { color: var(--accent); }
.order-tax { display: flex; justify-content: space-between; padding-top: 8px; font-size: 14px; color: var(--ink-3); }
.order-switch { display: flex; gap: 10px; margin-top: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.order-card > :last-child { margin-bottom: 24px; }
.checkout-assure { list-style: none; display: grid; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.checkout-assure i { color: var(--accent); width: 22px; }
.pay-card { padding: 38px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); box-shadow: var(--shadow); }
.pay-card h2 { font: 700 26px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 8px; }
#PayPalButtons { margin: 24px 0 16px; min-height: 60px; }

.success-card { max-width: 700px; margin: 40px auto; text-align: center; padding: 56px 46px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--good); box-shadow: var(--shadow-lg); }
.success-card h1 { font: 700 clamp(32px, 4vw, 46px)/1.1 var(--display); letter-spacing: -0.015em; margin-bottom: 12px; }
.success-card h1 span { color: var(--accent); }
.success-icon { width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--good); background: var(--good-bg); }
.receipt { display: grid; gap: 0; margin: 30px auto; max-width: 440px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.receipt div:nth-child(odd) { background: var(--bg-2); }
.receipt div:last-child { border-bottom: 0; }
.receipt span { color: var(--ink-3); }
.receipt strong { font-family: var(--display); color: var(--ink); }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.success-card .lede { margin: 0 auto; color: var(--ink-2); }

/* Buying without an account (js/action.js enterCheckout, guestSuccess, enterActivate). */
.checkout-account { margin: 18px 0 20px; padding: 20px; border-radius: var(--r-sm); background: var(--input); border: 1px solid var(--line); }
.checkout-account label { display: block; margin-bottom: 8px; font: 600 14.5px/1.3 var(--display); color: var(--ink); }
.checkout-account input { width: 100%; height: 50px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--card); font: 500 15px/1 var(--font); color: var(--ink); }
.checkout-account input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.checkout-account.has-error input { border-color: var(--bad); }
.ca-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); background: var(--brand-tint); border: 0; border-left: 3px solid var(--accent); }
.ca-note i { margin-top: 3px; color: var(--accent); }
.ca-note strong { font-weight: 700; color: var(--ink); }
.ca-signin { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
.ca-signin a { color: var(--accent); font-weight: 600; cursor: pointer; }

.activate-panel { margin: 26px auto 8px; max-width: 580px; padding: 24px 24px 20px; border-radius: var(--r); text-align: left; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-left: 4px solid var(--amber); }
.ap-head { display: flex; gap: 14px; align-items: flex-start; }
.act-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-sm); font-size: 18px; color: var(--navy); background: var(--amber); box-shadow: none; }
.act-ico.warn { color: #fff; background: var(--bad); }
.ap-head h3 { margin: 2px 0 4px; font: 700 18px/1.3 var(--display); color: var(--ink); }
.ap-head p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ap-steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: ap; display: grid; gap: 10px; }
.ap-steps li { position: relative; padding-left: 40px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); counter-increment: ap; }
.ap-steps li::before { content: '0' counter(ap); position: absolute; left: 0; top: -1px; width: 28px; height: 25px; display: grid; place-items: center; border-radius: var(--r-sm); font: 700 12px/1 var(--display); color: #fff; background: var(--accent); }
.ap-steps b { color: var(--ink); }
.ap-fine { margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--warn) 40%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ap-fine i { margin-right: 6px; color: var(--warn); }
.ap-fine a { color: var(--accent); font-weight: 600; cursor: pointer; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#page-activate .notice { margin-bottom: 18px; }
#LoginNotice .notice { margin-bottom: 18px; }
#LoginNotice a { font-weight: 700; cursor: pointer; text-decoration: underline; }

/* The tax invoice: always a white sheet of paper, navy and orange on it. */
.invoice-wrap { padding-top: 30px; padding-bottom: 110px; max-width: 920px; }
.invoice-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.invoice-doc { position: relative; background: #fff; color: #1B1E31; border-radius: 0; border: 1px solid #E8E8E8; border-top: 6px solid #1B1E31; box-shadow: var(--shadow); padding: 54px 58px; font-size: 14.5px; line-height: 1.6; }
.invoice-doc::before { content: ''; position: absolute; top: -6px; left: 0; width: 120px; height: 6px; background: #FE5924; }
.invoice-doc h1 { color: #1B1E31; font: 700 34px/1.1 var(--display); letter-spacing: -0.01em; }
.invoice-doc p, .invoice-doc td, .invoice-doc span, .invoice-doc div { color: #4A4C5A; }
.inv-top { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.inv-brand { display: flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); color: #1B1E31; margin-bottom: 16px; }
.inv-logo { display: block; height: 36px; width: auto; }
.inv-meta { text-align: right; }
.inv-meta div { margin-bottom: 4px; }
.inv-meta strong, .invoice-doc strong { color: #1B1E31; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; padding: 24px 0; border-top: 1px solid #E8E8E8; border-bottom: 1px solid #E8E8E8; }
.inv-parties h4 { font: 700 12px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #FE5924; margin-bottom: 12px; }
.inv-lines { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.inv-lines th { text-align: left; font: 600 12.5px/1 var(--display); letter-spacing: 0.04em; color: #fff; background: #1B1E31; padding: 13px 14px; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-lines td { padding: 15px 14px; border-bottom: 1px solid #EDEDED; }
.inv-lines tbody tr:nth-child(even) td { background: #F7F7F7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-lines .r { text-align: right; }
.inv-totals { margin-left: auto; width: 320px; }
.inv-totals div { display: flex; justify-content: space-between; padding: 7px 14px; }
.inv-totals .grand { border-top: 2px solid #1B1E31; margin-top: 6px; padding-top: 12px; font: 700 18px/1.3 var(--display); color: #1B1E31; }
.inv-totals .grand span, .inv-totals .grand div { color: #1B1E31; }
.inv-paid { display: inline-flex; gap: 8px; align-items: center; margin-top: 30px; padding: 11px 16px; border-radius: 2px; background: #E8F7EE; color: #17804A !important; font: 600 14px/1.3 var(--display); border-left: 3px solid #1E9E52; }
.inv-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid #E8E8E8; font-size: 12.5px; color: #6E6E6E !important; }


/* ---------------------------------------------------------------------------------------------------------------------
   SUPPORT / PROSE
   --------------------------------------------------------------------------------------------------------------------- */

.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 110px; }
.support-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 40px 28px 42px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.35s var(--app-ease), box-shadow 0.35s ease, border-color 0.35s ease; }
.support-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--accent); transition: width 0.45s var(--app-ease); }
.support-item:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow); }
.support-item:hover::after { width: 100%; }
.support-item i { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent); background: var(--bg-2); transition: background 0.3s ease, color 0.3s ease; }
.support-item:hover i { background: var(--accent); color: #fff; }
.support-item strong { display: block; font: 700 21px/1.3 var(--display); color: var(--ink); word-break: break-word; margin-bottom: 6px; }
.support-item span { font-size: 15.5px; color: var(--ink-2); }

.contact-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: stretch; margin-bottom: 110px; }
.contact-form { padding: 50px 50px 46px; margin: 0; }
.contact-form h2 { font: 700 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -0.01em; margin-bottom: 34px; }
.contact-form .field label { margin-bottom: 8px; }
.contact-form .form-row { gap: 20px; }
.contact-form .btn { margin-top: 12px; }
.contact-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 46px 42px; border-radius: var(--r); color: var(--panel-mute);
    background: linear-gradient(180deg, rgba(27, 30, 49, 0.55), rgba(27, 30, 49, 0.96) 68%), url(/images/banner-dashboards.jpg) 30% center / cover, var(--navy); box-shadow: inset 0 5px 0 var(--accent); }
.contact-cta .eyebrow { color: var(--panel-mute); }
.contact-cta h3 { color: #fff; font: 700 clamp(26px, 2.6vw, 36px)/1.14 var(--display); letter-spacing: -0.01em; }
.contact-cta p { color: rgba(255, 255, 255, 0.76); margin-bottom: 10px; }
.contact-cta .btn { align-self: flex-start; }

.prose-page { padding-bottom: 110px; }
.prose { font-size: 17px; line-height: 1.8; }
.prose h2 { font: 700 28px/1.2 var(--display); letter-spacing: -0.01em; margin: 50px 0 16px; padding-left: 18px; border-left: 4px solid var(--accent); }
.prose p, .prose li { color: var(--ink-2); margin-bottom: 16px; }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 22px; }
.prose li::marker { color: var(--accent); }


/* ---------------------------------------------------------------------------------------------------------------------
   OVERLAYS  -  toasts, dialogs, modals, loading
   --------------------------------------------------------------------------------------------------------------------- */

.loading-overlay { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--bg) 72%, transparent); display: flex; align-items: center; justify-content: center; }
.spinner { display: inline-block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; display: flex; gap: 12px; align-items: center;
    padding: 15px 22px 15px 20px; border-radius: 3px; background: var(--navy); color: #fff; font: 500 15px/1.45 var(--font);
    box-shadow: inset 4px 0 0 var(--accent), 0 24px 50px -16px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: opacity 0.3s ease, transform 0.35s var(--app-ease); max-width: calc(100vw - 32px);
}
[data-theme="dark"] .toast { background: var(--panel-3, #2D3250); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast i { font-size: 15px; color: var(--accent); }
.toast.success { box-shadow: inset 4px 0 0 var(--good), 0 24px 50px -16px rgba(0, 0, 0, 0.55); }
.toast.success i { color: #3DD68C; }
.toast.error { box-shadow: inset 4px 0 0 #FF5A76, 0 24px 50px -16px rgba(0, 0, 0, 0.55); }
.toast.error i { color: #FF5A76; }
.toast.warning { box-shadow: inset 4px 0 0 var(--amber), 0 24px 50px -16px rgba(0, 0, 0, 0.55); }
.toast.warning i { color: var(--amber); }
.toast.info i { color: var(--accent); }

.modal-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(20, 22, 39, 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; opacity: 0; transition: opacity 0.25s ease; }
.modal-overlay.show { opacity: 1; }
.modal { width: 100%; max-width: 580px; background: var(--card); color: var(--ink); border-radius: var(--r); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6); overflow: hidden; transform: translateY(14px); transition: transform 0.3s var(--app-ease); }
.modal-overlay.show .modal { transform: none; }
.modal.wide { max-width: 980px; }
.modal.xl { max-width: 1200px; }
.modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 18px 26px; border-bottom: 0; background: var(--app-grid), var(--panel); color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
.modal-head h2 { font: 700 21px/1.25 var(--display); letter-spacing: -0.01em; color: #fff; }
.modal-head .icon-btn { margin-left: auto; flex-shrink: 0; color: #fff; border-color: rgba(255, 255, 255, 0.2); background: transparent; }
.modal-head .icon-btn:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.modal-body { padding: 28px 28px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.dialog-message { color: var(--ink-2); margin-bottom: 18px; }
.dialog-icon { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.modal.danger .dialog-icon { background: var(--bad); color: #fff; }
.modal.danger .modal-head { box-shadow: inset 0 -3px 0 var(--bad); }


/* ---------------------------------------------------------------------------------------------------------------------
   THE THEMES PAGE  -  quick picks, the live showcase, every theme, and designing your own
   --------------------------------------------------------------------------------------------------------------------- */

.theme-filters.centered { justify-content: center; margin-bottom: 30px; }

.quick-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.quick-themes button { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 8px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--card);
    color: var(--ink); font: 600 15px/1 var(--display); cursor: pointer; transition: transform 0.3s var(--app-ease), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
.quick-themes button:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.quick-themes button.active { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent), 0 14px 30px -18px rgba(254, 89, 36, 0.7); }
.qt-swatch { width: 34px; height: 34px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(27, 30, 49, 0.14); flex-shrink: 0; }
.quick-themes em { font: 700 10px/1 var(--display); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-radius: 2px; background: var(--accent); color: #fff; }
.quick-themes .qt-all { padding: 0 22px; background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.quick-themes .qt-all:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .quick-themes .qt-all { background: var(--panel-3, #2D3250); border-color: var(--panel-3, #2D3250); }

.showcase-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.showcase-head > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.showcase-head strong { font: 700 34px/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.showcase-head span:not(.chip) { color: var(--ink-3); font-size: 15.5px; }
.showcase-head p { margin: 0; font-size: 14px; color: var(--ink-3); }
.template-live { padding: 10px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.showcase-grid { margin-top: 50px; }
.showcase-grid-head { margin-top: 110px; scroll-margin-top: calc(var(--strip-h, 0px) + var(--nav-h, 80px) + 20px); }
.showcase-grid-head .section-head { margin-bottom: 22px; }
.showcase-grid-head + .showcase-grid { margin-top: 10px; }

.own-theme-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 80px 0 110px; padding: 56px 58px; border-radius: var(--r); color: var(--panel-mute); background: var(--app-grid), var(--panel); box-shadow: inset 5px 0 0 var(--accent); }
.own-theme-band::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: -40px; width: 520px; background: var(--app-deco) right center / auto 140% no-repeat; opacity: 0.7; pointer-events: none; }
.own-theme-band h2 { font: 700 clamp(30px, 3.6vw, 50px)/1.1 var(--display); letter-spacing: -0.015em; margin: 0 0 14px; color: #fff; }
.own-theme-band h2 i { color: var(--accent); margin-right: 12px; font-size: 0.72em; }
.own-theme-band p { margin: 0; color: rgba(255, 255, 255, 0.72); max-width: 680px; }
.own-theme-band .btn { flex-shrink: 0; height: 56px; }


/* ---------------------------------------------------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; gap: 34px; }
    .pc-live { grid-template-columns: minmax(0, 1fr); padding: 40px 34px; gap: 32px; }
    .contact-split { grid-template-columns: minmax(0, 1fr); }
    .stepper li + li { margin-left: 44px; }
    .stepper li + li::before { width: 24px; right: calc(100% + 10px); }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card { --split: 360px; padding-right: 40px; padding-left: calc(var(--split) + 40px); }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header { padding: 48px 34px; }
}

@media (max-width: 900px) {
    .usage-grid, .support-grid { grid-template-columns: minmax(0, 1fr); }
    .member-layout { grid-template-columns: minmax(0, 1fr); padding-top: 10px; gap: 22px; }
    .member-nav { position: static; display: flex; overflow-x: auto; gap: 0; padding: 0; scrollbar-width: none; scroll-behavior: smooth;
        -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
    .member-nav > a:last-child { padding-right: 48px; }
    .member-nav::-webkit-scrollbar { display: none; }
    .member-nav .mn-plan { display: none; }
    .member-nav > a { white-space: nowrap; padding: 15px 18px; }
    .member-nav > a.active { box-shadow: inset 0 -3px 0 var(--accent); }
    .checkout-grid { grid-template-columns: minmax(0, 1fr); }
    .sample-cards { grid-template-columns: minmax(0, 1fr); }
    .inv-top, .inv-parties { grid-template-columns: 1fr; flex-direction: column; }
    .inv-meta { text-align: left; }
    .invoice-doc { padding: 32px 24px; }
    .own-theme-band { flex-direction: column; align-items: flex-start; padding: 42px 32px; }
    .plan-hero { padding: 34px 30px; }
    .create-head { justify-content: center; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card { max-width: 560px; min-height: 0; padding: 0 34px 36px; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header { position: relative; width: auto; margin: 0 -34px 32px; padding: 36px 34px 34px; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header::after { display: none; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h1, :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h2 { margin-top: 22px; }
}

@media (max-width: 720px) {
    .page-top, .section-head.page-top { padding: 54px 0 58px; margin-bottom: 50px; }
    .page-banner { padding: 48px 0 52px; margin-bottom: 36px; }
    .page-top h1, .section-head.page-top > h1 { font-size: clamp(34px, 9.6vw, 48px); }
    .page-banner h1 { font-size: clamp(32px, 9vw, 44px); }
    .page-top h1::after { margin-top: 20px; }
    .page-top p, .section-head.page-top > p { font-size: 16px; margin-top: 18px; }
    .page-top::after { width: 100vw; opacity: 0.45; background-position: right -120px bottom -30px; background-size: auto 90%; }
    .crumbs { font-size: 14px; margin-bottom: 16px; }

    #page-pricing .page-top { padding-bottom: 130px; }
    #page-pricing .pricing-grid { margin-top: -86px; }
    .period-toggle { margin-top: 26px; }
    .period-toggle button { padding: 0 14px; font-size: 14px; }
    .price-card > * { margin-left: 22px; margin-right: 22px; }
    .price-card h3 { margin-top: 28px; }
    .price strong { font-size: 48px; }
    .price-card .badge { top: 26px; margin-right: 20px; }
    .pricing-checkout { margin-top: 60px; }
    .pricing-guest .panel { padding: 26px 18px; }
    .compare { margin: 80px 0 90px; }
    .compare-table th, .compare-table td { padding: 12px 10px; font-size: 13.5px; }
    .compare-table th:first-child, .compare-table td:first-child { padding-left: 14px; }
    .compare-table thead th { font-size: 15px; padding-top: 16px; padding-bottom: 16px; }
    .pc-live { padding: 30px 20px 28px 24px; }
    .pc-live-plans { grid-template-columns: minmax(0, 1fr); }
    .pc-live-plans div { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
    .pc-live-plans b { font-size: 24px; }
    .pc-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .pc-live-grid span { font-size: 11.5px; padding: 14px 4px 11px; }
    .pc-live-grid i { width: 36px; height: 36px; font-size: 14px; }
    .value-strip { margin-top: 50px; gap: 16px; }
    .value-strip div { padding: 28px 24px; }

    .create-wrap, .checkout-wrap, .invoice-wrap { padding-left: 14px; padding-right: 14px; }
    .stepper li { gap: 0; font-size: 0; }
    .stepper li span { width: 38px; height: 38px; font-size: 13px; }
    .stepper li.active { gap: 10px; font-size: 14px; }
    .stepper li + li { margin-left: 30px; }
    .stepper li + li::before { width: 18px; right: calc(100% + 6px); }
    .stepper li.active + li { margin-left: 30px; }
    .dropzone { padding: 50px 18px 46px; }
    .dz-icon { width: 88px; height: 88px; font-size: 30px; margin-bottom: 20px; }
    .sample-card { padding: 18px; }
    .rt-head { padding: 16px; gap: 12px; flex-wrap: wrap; }
    .rt-head .rt-icon { width: 40px; height: 40px; }
    .col-chips { padding: 14px 16px; }
    .instructions-box { padding: 20px 18px; }

    .member-layout { padding-left: 14px; padding-right: 14px; }
    .panel { padding: 26px 18px; }
    .form-row, .form-row.three { grid-template-columns: 1fr; gap: 0; }
    .form-card { padding: 32px 22px; }
    .auth-wrap { padding: 28px 12px 56px; align-items: flex-start; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card { padding: 0 20px 30px; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card > .form-header { margin: 0 -20px 26px; padding: 30px 20px 28px; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h1, :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-header h2 { font-size: 30px; }
    :is(#page-login, #page-register, #page-forgot, #page-reset, #StepAccount) .form-card .form-icon { width: 54px; height: 54px; font-size: 20px; }

    .plan-hero { padding: 30px 22px; }
    .plan-hero .btn { width: 100%; }
    .usage strong { font-size: 34px; }
    .inv-totals { width: 100%; }
    .order-card > * { margin-left: 20px; margin-right: 20px; }
    .order-line { padding: 20px; }
    .pay-card { padding: 28px 20px; }
    .success-card { padding: 40px 20px; }
    .support-grid { margin-bottom: 70px; }
    .contact-form { padding: 30px 20px; }
    .contact-form .form-row { gap: 0; }
    .contact-cta { padding: 34px 24px; min-height: 340px; }
    .prose { font-size: 16.5px; }
    .prose h2 { font-size: 24px; margin-top: 40px; }
    .template-live { padding: 0; border: 0; }
    .showcase-head strong { font-size: 28px; }
    .quick-themes { gap: 8px; }
    .quick-themes button { height: 44px; font-size: 14px; padding-right: 14px; }
    .qt-swatch { width: 28px; height: 28px; }
    .own-theme-band { padding: 34px 22px; margin: 60px 0 80px; }
    .own-theme-band .btn { width: 100%; }
    .modal-head { padding: 16px 14px 16px 18px; }
    .modal-head h2 { font-size: 18px; }
    .modal-body { padding: 22px 18px; }
    .modal-foot { padding: 16px 18px; }
    .dash-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-checkout, .build-orb, .orb-ring { animation: none; }
    .price-card, .dcard, .sample-card, .support-item, .value-strip div { transition: none; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   PRINT  -  invoices and dashboards print clean
   --------------------------------------------------------------------------------------------------------------------- */

@media print {
    .toast, .modal-overlay, .loading-overlay { display: none !important; }
    .page-top::before, .page-top::after { display: none; }
    .page-top, .section-head.page-top { padding: 0 0 18px; margin-bottom: 18px; color: #000; }
    .page-top h1 { color: #000; }
    .page-top p { color: #333; }
    .invoice-doc { box-shadow: none; border: 0; padding: 0; }
    .invoice-doc::before { display: none; }
    .invoice-wrap { padding: 0; max-width: none; }
}

#MyThemesNote .notice { margin-bottom: 22px !important; }