:root {
    --shell: #16325c;
    --shell-dark: #102544;
    --ink: #1a2332;
    --cream: #fffcf7;
    --cream-deep: #f3f0e8;
    --title: #16325c;
    --title-2: #fffcf7;
    --select: #f3ead8;
    --line: #e3dccf;
    --bar: #16325c;
    --danger: #aa0808;
    --page: #f3f0e8;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    color: var(--ink);
    font-family: Outfit, "Source Sans 3", "Segoe UI", sans-serif;
    font-size: 15px;
}

body {
    background: var(--page);
}

button, input, select, textarea { font: inherit; color: inherit; }

#app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#top {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: #16325c;
    background: #fffcf7;
    border-bottom: 1px solid #e3dccf;
    min-height: 56px;
}

.brand {
    font-family: Newsreader, Georgia, serif;
    font-weight: 500;
    letter-spacing: -.02em;
    text-transform: none;
    font-size: 22px;
}

.company-name {
    text-align: center;
    font-family: Newsreader, Georgia, serif;
    font-size: 22px;
    font-weight: 400;
}

.today { font-variant-numeric: tabular-nums; display: flex; gap: 10px; align-items: center; }

.edu-chip, .gold-chip, .silver-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid transparent;
}

.edu-chip { color: #7a120c; background: #ffd0c8; border-color: #e0a098; border-radius: 4px; }
.gold-chip { color: #f7f4ee; background: #16325c; border-color: #16325c; border-radius: 999px; }
td.low-stock { color: var(--danger); font-weight: 700; }
.plant-chip {
    border: 1px solid #16325c;
    background: transparent;
    color: #16325c;
    border-radius: 999px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 13px;
}
.plant-chip:hover { background: #f3ead8; }
.silver-chip { color: #16325c; background: transparent; border-color: #16325c; border-radius: 999px; }

.edu-line {
    color: #8d1e1e;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 4px;
}

#stage {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 22px 16px 12px;
    overflow: auto;
}

.window {
    width: min(820px, 100%);
    background: var(--cream);
    border: 1px solid #e3dccf;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(22, 50, 92, .06);
    min-height: 420px;
    overflow: hidden;
}

.window.wide { width: min(1120px, 100%); }
.window.voucher-width { width: min(980px, 100%); }

.titlebar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 18px 20px 14px;
    color: #16325c;
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: 28px;
}

.gateway, .split {
    display: grid;
    grid-template-columns: 1.3fr .8fr;
    min-height: 460px;
}

.menu-list { padding: 8px 0 16px; max-height: min(560px, calc(100vh - 210px)); overflow: auto; }

.menu-item, .pick {
    padding: 7px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.menu-item.active, .pick.active, tr.active {
    background: var(--select);
    color: #16325c;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #16325c;
}

.menu-item em, .muted { color: #5d6b7a; font-style: normal; font-weight: 500; font-size: 12px; }
.period-open { color: #1d6b45; font-style: normal; letter-spacing: .04em; }
.period-closed { color: #8a3a32; font-style: normal; letter-spacing: .04em; }
.cost-head {
    margin: 18px 16px 6px;
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    color: #16325c;
}

.info-pane {
    margin: 18px 16px 18px 0;
    padding: 14px 14px 18px;
    background: rgba(255, 255, 255, .35);
    border: 1px solid #d5d0c0;
}

.info-label {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5a6d82;
}

.info-pane strong { display: block; margin-top: 4px; }

#calc { display: flex; justify-content: flex-end; padding: 0 10px 6px; }
#calc[hidden] { display: none; }

.calc-box {
    width: min(280px, 100%);
    background: var(--cream);
    border: 1px solid #16375c;
    box-shadow: 0 8px 18px rgba(8, 28, 52, .25);
}

.calc-box .titlebar { margin: 0; }
.calc-box input { width: calc(100% - 16px); margin: 8px; }
.calc-out {
    min-height: 22px;
    padding: 0 10px 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

#bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    padding: 8px 10px;
    background: #fffcf7;
    border-top: 1px solid var(--line);
    min-height: 52px;
}

#bar button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 78px;
    height: 36px;
    padding: 2px 8px 3px;
    background: #ffffff;
    border: 1px solid #bcc3ca;
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    line-height: 1.15;
}

#bar button:hover { background: #f3ead8; border-color: #16325c; }
#bar .fkey { color: #8a6a32; font-weight: 700; font-size: 11px; }
#bar .flabel { color: #1d2d3e; font-size: 12px; }
#bar .bar-empty { align-self: center; color: #243246; font-size: 12px; padding-left: 6px; }

#status {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 10px;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    background: #fffcf7;
    color: #5e6a78;
    border-top: 1px solid #e3dccf;
    font-size: 12px;
}

#status button {
    background: transparent;
    border: 0;
    color: #16325c;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
}

.pad { padding: 14px 16px 18px; }

.form-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 12px;
    align-items: center;
}

label.full {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
}
label.full span { min-height: 1em; }

.form-grid > p,
.form-grid > .note,
.form-grid > .hint { grid-column: 1 / -1; }

.account-form label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0 0 12px;
    font-weight: 700;
}
.account-form input {
    width: 100%;
    font-weight: 400;
    background: white;
    border: 1px solid #8ea0b3;
    padding: 6px 8px;
}
.account-form input::placeholder { color: #8aa0b3; font-weight: 400; }

input[type="text"], input[type="email"], input:not([type]), select, textarea {
    width: 100%;
    background: white;
    border: 1px solid #8ea0b3;
    padding: 5px 7px;
}

textarea { min-height: 64px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid #0070f2;
    outline-offset: 0;
    border-color: #0070f2;
}

.hint { margin: 8px 0 0; color: #526274; font-size: 12px; }

.search-line {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 12px 0;
}

.menu-list.tall { max-height: min(520px, calc(100vh - 250px)); overflow: auto; }

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a6a32;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid #e3dccf;
}

td { padding: 12px 16px; vertical-align: middle; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

tr.group td { font-weight: 700; }
tr.vch-start td { border-top: 1px solid #d5ccb6; }
tr.narration td { color: #4c6174; font-size: 12px; font-style: italic; padding-top: 0; }
tr.mark td { background: #fff4b8; }

tr.depth-1 td.name { padding-left: 22px; }
tr.depth-2 td.name { padding-left: 38px; }
tr.depth-3 td.name { padding-left: 54px; }

.sheet-scroll { max-height: calc(100vh - 230px); overflow: auto; }

.report-head { text-align: center; padding: 14px 12px 6px; }
.report-head .co { font-size: 20px; font-weight: 700; }
.report-head h2 { margin: 6px 0 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.report-head .period { color: #3e5670; margin-top: 2px; }

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid #c8c1ad;
}

.columns section { padding: 8px 10px 16px; }
.columns section + section { border-left: 1px solid #c8c1ad; }
.columns h3 {
    margin: 4px 0 8px;
    text-align: center;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.line, .total {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 3px 4px;
}

.total { font-weight: 700; border-top: 1px solid #1c2b3a; margin-top: 6px; padding-top: 6px; }
.indent { padding-left: 16px; }
.grand {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 12px 14px;
    padding-top: 8px;
    border-top: 2px solid #1c2b3a;
    font-weight: 700;
}

.voucher-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
}

.voucher-no { display: flex; align-items: center; gap: 6px; }
.voucher-no input { width: 80px; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    background: #16325c;
    color: white;
    font-weight: 700;
    border-radius: 4px;
    font-size: 12px;
}

.account-row, .narration-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

.vlines input.amount { text-align: right; }
.vlines td { border-bottom: 1px solid #e4dece; }
.totals-row td { font-weight: 700; border-top: 1px solid #1c2b3a; background: #efe8d4; }

.diff { color: var(--danger); font-weight: 700; }

#picker {
    position: fixed;
    z-index: 20;
    max-height: 240px;
    overflow: auto;
    background: white;
    border: 1px solid #234e86;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

#toast {
    position: fixed;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%) translateY(8px);
    background: #1c2b3a;
    color: white;
    padding: 8px 12px;
    opacity: 0;
    pointer-events: none;
    transition: .15s ease;
    max-width: min(560px, calc(100% - 24px));
    z-index: 30;
}

#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.modal-back {
    position: fixed;
    inset: 0;
    background: rgba(12, 28, 48, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    padding: 16px;
}

.modal {
    width: min(460px, 100%);
    background: var(--cream);
    border: 1px solid #16375c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    padding: 16px;
}

.modal h3 { margin: 0 0 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal-actions button, .text-button {
    background: #d5e3f2;
    border: 1px solid #6f8eaf;
    padding: 5px 10px;
    cursor: pointer;
}

.empty { padding: 16px; color: #526274; }

.company-table { width: 100%; }
.company-table td { border-bottom: 1px solid #efe8dc; cursor: pointer; }
.company-table tbody tr:hover td { background: #f7f4ee; }

.note { padding: 8px 0 0; line-height: 1.45; }

.ocr-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #234e86;
}

.ocr-box strong { color: #16375c; }
.ocr-box span { flex: 1 1 220px; color: #526274; font-size: 13px; line-height: 1.4; }
.ocr-pick input { margin-left: 8px; }
.ocr-box .hint { flex: 1 1 100%; margin: 0; }

@media (max-width: 800px) {
    #top { grid-template-columns: 1fr; text-align: left; }
    .today { justify-content: flex-start; }
    #bar { flex-wrap: nowrap; overflow-x: auto; }
    #status { grid-template-columns: 1fr; height: auto; padding: 4px 8px; }
    .company-name, .today { text-align: left; }
    .gateway, .split, .columns, .form-grid, .account-row, .narration-row,
    label.full {
        grid-template-columns: 1fr;
    }
    .info-pane { margin: 0 12px 16px; }
    .columns section + section { border-left: 0; border-top: 1px solid #c8c1ad; }
    .window, .window.wide, .window.voucher-width { min-height: 0; }
}

[hidden] { display: none !important; }

body.marketing {
    background:
        linear-gradient(180deg, #f7f4ee 0%, #efeae1 100%);
    color: #1a2332;
    font-family: Outfit, "Source Sans 3", sans-serif;
}
body.marketing #top,
body.marketing #bar,
body.marketing #status,
body.marketing #calc,
body.marketing #assistant { display: none; }

#assistant {
    position: fixed;
    top: 52px;
    right: 12px;
    bottom: 78px;
    width: min(420px, calc(100vw - 24px));
    z-index: 30;
}

.ask-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cream);
    border: 1px solid #16375c;
    box-shadow: 0 16px 36px rgba(8, 28, 52, .28);
}

.ask-panel .titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.ask-panel .titlebar button {
    background: transparent;
    border: 0;
    color: #0070f2;
    cursor: pointer;
    font-size: 12px;
}

.ask-note, .ask-empty {
    margin: 0;
    padding: 8px 12px 0;
    color: #526274;
    font-size: 12px;
    line-height: 1.4;
}

.ask-log {
    flex: 1;
    overflow: auto;
    padding: 8px 12px 4px;
}

.ask-turn { margin: 0 0 10px; }
.ask-turn span {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5a6d82;
}
.ask-turn p {
    margin: 2px 0 0;
    white-space: pre-wrap;
    line-height: 1.45;
}
.ask-turn.user p { color: #16375c; }

.ask-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
}

.ask-chips button {
    background: #fff;
    border: 1px solid #b7c3b0;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
}

.ask-chips button:hover { background: #fff6cc; }

.ask-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 0 12px 12px;
}

.ask-form textarea {
    resize: none;
    padding: 8px;
    border: 1px solid #8aa0b8;
    background: #fff;
}

.ask-form button {
    align-self: end;
    min-width: 72px;
    height: 36px;
    background: linear-gradient(#1d4e86, #163a66);
    color: #f7fbff;
    border: 1px solid #0d2746;
    cursor: pointer;
}

@media (max-width: 800px) {
    #assistant { top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: min(70vh, 560px); }
}
body.marketing #stage { display: block; padding: 0 0 64px; background: transparent; }
body.marketing .window.home-window {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    color: #1a2332;
}
.m-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 18px; }
body.marketing .m-nav { border-bottom: 1px solid #e3dccf; }
.brand { color: inherit; text-decoration: none; font-weight: 580; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.brand span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #0070f2; color: #ffffff; font-weight: 700; }
body.marketing .brand { color: #16325c; letter-spacing: .04em; }
body.marketing .brand span {
    background: #16325c;
    border: 0;
    color: #f7f4ee;
    border-radius: 50%;
    font-family: Newsreader, Georgia, serif;
    font-size: 16px;
}
.m-nav nav { display: flex; align-items: center; gap: 18px; }
.m-nav a { color: #1c3148; text-decoration: none; }
body.marketing .m-nav a { color: #3d4a5c; }
.text-link { background: transparent; color: #1c3148; border: 0; cursor: pointer; padding: 0; }
body.marketing .text-link { color: #16325c; }
.hero { padding: 48px 0 12px; }
body.marketing .hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: end;
    padding: 72px 0 36px;
}
.eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px; color: #0070f2; }
body.marketing .eyebrow, body.marketing .kicker { color: #8a6a32; }
.hero h1, .home-window h2 { font-weight: 700; letter-spacing: -.02em; }
body.marketing .hero h1, body.marketing .home-window h2 {
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    color: #16325c;
    letter-spacing: -.03em;
}
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; margin: 0 0 16px; max-width: 14ch; }
body.marketing .hero h1 { font-size: clamp(46px, 5.2vw, 72px); max-width: 16ch; line-height: 1.02; }
.lede { max-width: 58ch; line-height: 1.55; font-size: 18px; color: #3d5166; }
.desk-login h2 { font-size: 32px; margin: 0 0 8px; }
.desk-login div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e3dccf; }
.desk-login span { color: #8a6a32; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.desk-login .price-buy { margin-top: 16px; }
body.marketing .lede { color: #3d4a5c; }
.hero-actions, .login-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.stat-row { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 8px 0 0; margin: 0; }
.stat-row li { min-width: 140px; padding: 14px 16px; border-radius: 8px; background: #ffffff; border: 1px solid #d9d9d9; }
body.marketing .stat-row li {
    background: #fffcf7;
    border: 1px solid #e3dccf;
    border-radius: 12px;
    padding: 16px 18px;
    min-width: 140px;
}
.stat-row strong { display: block; font-size: 22px; color: #0070f2; }
body.marketing .stat-row strong {
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: 28px;
    color: #16325c;
}
.stat-row span { color: #5c6b7a; font-size: 13px; }
body.marketing .stat-row span { color: #5e6a78; }
.home-window h2 { font-size: clamp(32px, 4vw, 46px); margin: 8px 0 18px; }
body.marketing .home-window h2 { font-size: clamp(40px, 5vw, 64px); }
.bento, .price-grid { display: grid; gap: 14px; }
.bento { grid-template-columns: 1.3fr 1fr 1fr; }
.m-card, .price-card {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(29, 45, 62, .06);
}
body.marketing .m-card, body.marketing .price-card {
    background: #fffcf7;
    border: 1px solid #e3dccf;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(22, 50, 92, .05);
    color: #1a2332;
}
.m-card.featured { background: #f5faff; border-color: #0070f2; grid-row: span 2; }
body.marketing .m-card.featured {
    background: linear-gradient(180deg, rgba(196, 165, 116, .12), rgba(255, 255, 255, .03));
    border-color: rgba(196, 165, 116, .45);
}
.kicker { margin: 0 0 8px; color: #0070f2; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.m-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #1d2d3e; }
body.marketing .m-card h3, body.marketing .ledger-plate h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 32px;
    color: #16325c;
}
.m-card p:last-child { margin: 0; color: #3d5166; line-height: 1.5; }
body.marketing .m-card p:last-child { color: #3d4a5c; }
.ledger-plate {
    padding: 26px 26px 18px;
    border-radius: 18px;
    border: 1px solid rgba(196, 165, 116, .4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
}
.ledger-plate h3 { margin: 0 0 16px; }
.plate-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(244, 239, 230, .1);
    color: #d9d0c3;
}
.plate-line strong { color: #f7f1e8; font-weight: 500; }
.plate-foot { margin: 8px 0 0; color: #b7ad9f; font-size: 13px; line-height: 1.45; }
.price-grid { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.price-card { text-align: left; color: #1d2d3e; background: #ffffff; }
.price-card.gold { background: #0070f2; color: #ffffff; outline: none; }
body.marketing .price-card.gold {
    background: #16325c;
    color: #f7f4ee;
    border-color: #16325c;
    box-shadow: 0 18px 40px rgba(22, 50, 92, .18);
}
.plan-name { margin: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: #0070f2; }
body.marketing .plan-name { color: #8a6a32; }
.price-card.gold .plan-name { color: #d1e8ff; }
body.marketing .price-card.gold .plan-name { color: #e4d3a8; }
.plan-price { font-size: 36px; font-weight: 700; margin: 8px 0; }
body.marketing .plan-price { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 48px; letter-spacing: -.03em; }
.plan-price span, .plan-note, .price-card small, .fine { font-size: 13px; font-weight: 400; color: #5c564c; }
body.marketing .plan-price span, body.marketing .plan-note, body.marketing .fine { color: #5e6a78; }
.price-card.gold .plan-price span, .price-card.gold .plan-note { color: #d5deea; }
body.marketing .price-card.gold .plan-price span, body.marketing .price-card.gold .plan-note { color: #d5deea; }
.price-card ul { margin: 8px 0 12px; padding-left: 18px; line-height: 1.45; }
.price-buy, .login-switch button, #pay-box button {
    background: #0070f2;
    color: #ffffff;
    border: 0;
    border-radius: 4px;
    padding: 8px 14px;
    cursor: pointer;
}
body.marketing .price-buy {
    background: #16325c;
    color: #f7f4ee;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 600;
}
.price-card.gold .price-buy { background: #ffffff; color: #0070f2; }
body.marketing .price-card.gold .price-buy { background: #f7f4ee; color: #16325c; }
.price-ghost { background: transparent; color: #0070f2; border: 1px solid #0070f2; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
body.marketing .price-ghost {
    color: #16325c;
    border-color: #16325c;
    border-radius: 999px;
    padding: 12px 18px;
}
.price-grid.compact .price-card { cursor: pointer; }
.fine { max-width: 70ch; color: #5c6b7a; }
.qr { width: 180px; height: 180px; background: white; }
.gst-table { width: 100%; border-collapse: collapse; }
.gst-table th, .gst-table td { border-bottom: 1px solid #e3dcc8; padding: 6px 8px; text-align: left; }
.gst-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gst-table tr.low td { background: #fff4e5; color: #8a3b00; font-weight: 600; }
.gst-table tr.on td { background: #efe6d4; }
.pad .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pos-scan { font-size: 18px; padding: 8px; width: 100%; }
.item-row { display: grid; grid-template-columns: 1.4fr .7fr .5fr .5fr .7fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 800px) {
    .item-row { grid-template-columns: 1fr 1fr; }
}

.product-frame {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #f6f3ec;
    color: #1c1915;
    box-shadow: 0 24px 50px rgba(22, 50, 92, .12);
    border: 1px solid #e3dccf;
}
.pf-top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: #0b3f86;
    color: #fff;
    font-size: 13px;
}
.pf-top strong { font-weight: 500; }
.pf-top em {
    font-style: normal;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 4px;
    padding: 2px 8px;
}
.pf-body { display: grid; grid-template-columns: 148px 1fr; min-height: 230px; }
.pf-side { padding: 16px 0; border-right: 1px solid #e4dfd4; }
.pf-side p { margin: 0 16px 10px; font-family: Newsreader, Georgia, serif; font-size: 22px; }
.pf-side span { display: block; padding: 7px 16px; color: #5c564c; }
.pf-side span.on { background: #e7f0fb; color: #0b3f86; box-shadow: inset 3px 0 0 #0b3f86; }
.pf-main { padding: 18px 18px 8px; }
.pf-label { margin: 0 0 8px; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: #8a8175; }
.pf-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #e4dfd4;
    font-size: 14px;
}
.pf-row b { font-weight: 500; }
.practice { padding-top: 28px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pillars h3 {
    margin: 0 0 8px;
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    color: #16325c;
}
.pillars p:last-child { margin: 0; color: #3d4a5c; line-height: 1.55; }
.spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    list-style: none;
    margin: 28px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid #e3dccf;
}
.spec-list li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #e3dccf;
    color: #1a2332;
}
.spec-list span { width: 72px; color: #8a6a32; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.m-foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid #e3dccf;
    color: #5e6a78;
    font-size: 13px;
}
body.marketing .window.gate {
    width: min(980px, calc(100% - 40px));
    margin: 56px auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    overflow: visible;
}
.auth-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
.auth-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a8175;
    font-size: 13px;
    letter-spacing: .02em;
}
.auth-steps li + li::before {
    content: "";
    width: 56px;
    height: 1px;
    margin: 0 14px 0 6px;
    background: #d7d0c4;
}
.auth-steps li.is-done + li::before { background: #16325c; }
.auth-steps .step-index {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #d7d0c4;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #5e6a78;
    background: #fffcf7;
}
.auth-steps li.is-current { color: #16325c; font-weight: 600; }
.auth-steps li.is-current .step-index {
    background: #16325c;
    border-color: #16325c;
    color: #fffcf7;
}
.auth-steps li.is-done { color: #16325c; }
.auth-steps li.is-done .step-index {
    background: #f3ead8;
    border-color: #16325c;
    color: #16325c;
}
.verified-panel { text-align: center; padding: 18px 8px 8px; }
.verified-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #16325c;
    color: #f7f4ee;
    display: grid;
    place-items: center;
    font-size: 26px;
}
.verified-panel h2 {
    margin: 0 0 6px;
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    color: #16325c;
}
.verified-panel p { margin: 0; color: #5e6a78; }
.gate-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 36px; align-items: center; }
.gate-grid.gate-solo { grid-template-columns: minmax(280px, 420px); justify-content: center; padding-top: 64px; }
.gate-aside h1 {
    margin: 28px 0 12px;
    font-family: Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.02;
    color: #16325c;
    letter-spacing: -.03em;
}
.gate-aside p { margin: 0; max-width: 36ch; color: #3d4a5c; line-height: 1.55; font-size: 17px; }
.gate-card {
    background: #fffcf7;
    border: 1px solid #e3dccf;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 18px 40px rgba(22, 50, 92, .08);
}
.gate-tabs { display: flex; gap: 18px; margin: 0 0 18px; }
.gate-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 6px;
    color: #5e6a78;
    cursor: pointer;
}
.gate-tabs button[aria-current="true"] { color: #16325c; border-bottom-color: #16325c; }
.gate-card label { display: grid; gap: 6px; margin: 0 0 14px; color: #5e6a78; font-size: 13px; }
.gate-card input {
    width: 100%;
    background: #fff;
    border: 1px solid #d7d0c4;
    border-radius: 8px;
    padding: 11px 12px;
    color: #1a2332;
}
.gate-card .price-buy { width: 100%; margin-top: 4px; }
.otp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.otp-actions button {
    background: transparent;
    color: #16325c;
    border: 1px solid #16325c;
    border-radius: 999px;
    padding: 10px 12px;
    cursor: pointer;
}
.otp-actions button:hover { background: #16325c; color: #f7f4ee; }
#otp-step .text-link { display: inline-block; margin-top: 14px; }
.gate-card .note, .gate-card .hint { color: #5e6a78; }
@media (max-width: 900px) {
    .bento, .price-grid, .pillars, .spec-list, .pf-body, .gate-grid { grid-template-columns: 1fr; }
    .m-card.featured { grid-row: auto; }
    .m-nav, .m-foot { flex-wrap: wrap; }
    .m-nav nav { flex-wrap: wrap; }
    body.marketing .hero { grid-template-columns: 1fr; padding-top: 36px; }
    body.marketing .hero h1 { font-size: 48px; }
    .pf-side { display: none; }
    .otp-actions { grid-template-columns: 1fr; }
    .auth-steps { flex-wrap: wrap; row-gap: 10px; margin-bottom: 22px; }
    .auth-steps li + li::before { width: 28px; margin: 0 8px 0 2px; }
}

@media print {
    body { background: white; }
    #top, #bar, #status, #calc, #toast, #picker, #modal-root { display: none !important; }
    #stage { padding: 0; display: block; }
    .window { box-shadow: none; border: none; width: 100% !important; }
    .sheet-scroll { max-height: none; overflow: visible; }
}