/*
 * Startouch Fiscal public website — the whole stylesheet.
 *
 * One local file. Two self-hosted variable fonts (Bricolage Grotesque for display, Instrument
 * Sans for everything else), Lucide line icons inlined as an SVG sprite, no CDN, no third-party
 * request of any kind. The site is a separate artefact on a separate host and must never
 * import anything from the fiscal application.
 *
 * Themes: light is the commercial default. `data-theme="dark"` / `"light"` on <html> is an
 * explicit visitor choice; with neither, prefers-color-scheme decides. Every token is defined
 * on bare :root first and redefined in the two dark blocks, never only in one of them.
 */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/assets/fonts/bricolage-grotesque-latin-variable.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/instrument-sans-latin-variable.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/instrument-sans-latin-variable-italic.woff2") format("woff2");
    font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ---- tokens ------------------------------------------------------------ */
:root {
    color-scheme: light;
    --bg: #f5f7f9;
    --surface: #ffffff;
    --surface-2: #eef2f5;
    --line: #d7dfe6;
    --line-soft: #e6ecf1;
    --ink: #0b1c2e;
    --ink-2: #3f4f60;
    --ink-3: #5f6e7c;
    --navy: #0b1c2e;
    --navy-2: #12283d;
    --navy-ink: #eef3f8;
    --navy-ink-2: #a9bccf;
    --teal: #0e7a68;
    --teal-deep: #0a5f52;
    --teal-wash: #e3f3ef;
    --gold: #b8912f;
    --gold-wash: #f9f3e3;
    --gold-ink: #6b5310;
    --ok-bg: #e2f5ec; --ok-ink: #0b6b48;
    --warn-bg: #fdf1d8; --warn-ink: #7a5310;
    --info-bg: #e7eefb; --info-ink: #1d4f91;
    --bad-bg: #fdeaea; --bad-ink: #9b1c1c;
    --brand-teal: #14a08a; --brand-teal-deep: #0a5f52; --brand-gold: #c9a24a;
    --btn: var(--navy); --btn-ink: #ffffff; --btn-hover: #17324a;
    --focus: #0e7a68;
    --shadow-1: 0 1px 2px #0b1c2e12;
    --shadow-2: 0 2px 6px #0b1c2e0f, 0 18px 40px -18px #0b1c2e33;
    --r-s: 6px; --r-m: 10px; --r-l: 16px;
    --display: "Bricolage Grotesque", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --body: "Instrument Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, monospace;
    --measure: 74rem;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b1420; --surface: #111e2c; --surface-2: #172636;
        --line: #26384a; --line-soft: #1c2b3b;
        --ink: #e9eff5; --ink-2: #b4c1cd; --ink-3: #8c9cac;
        --navy: #08111b; --navy-2: #0f1e2e; --navy-ink: #e9eff5; --navy-ink-2: #a3b6c8;
        --teal: #3ccdb0; --teal-deep: #8fe3d1; --teal-wash: #10312c;
        --gold: #d9b55e; --gold-wash: #2a2210; --gold-ink: #e8cd85;
        --ok-bg: #0e3629; --ok-ink: #7fe0b6; --warn-bg: #3a2c0d; --warn-ink: #f2ce78;
        --info-bg: #12294a; --info-ink: #a6c8f7; --bad-bg: #41171a; --bad-ink: #ffb0aa;
        --brand-teal: #3ed0b1; --brand-teal-deep: #8fe0cc; --brand-gold: #e0bd66;
        --btn: #3ccdb0; --btn-ink: #062119; --btn-hover: #5fdcc3;
        --focus: #e0bd66;
        --shadow-1: 0 1px 2px #0008; --shadow-2: 0 2px 6px #0006, 0 18px 40px -18px #000b;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1420; --surface: #111e2c; --surface-2: #172636;
    --line: #26384a; --line-soft: #1c2b3b;
    --ink: #e9eff5; --ink-2: #b4c1cd; --ink-3: #8c9cac;
    --navy: #08111b; --navy-2: #0f1e2e; --navy-ink: #e9eff5; --navy-ink-2: #a3b6c8;
    --teal: #3ccdb0; --teal-deep: #8fe3d1; --teal-wash: #10312c;
    --gold: #d9b55e; --gold-wash: #2a2210; --gold-ink: #e8cd85;
    --ok-bg: #0e3629; --ok-ink: #7fe0b6; --warn-bg: #3a2c0d; --warn-ink: #f2ce78;
    --info-bg: #12294a; --info-ink: #a6c8f7; --bad-bg: #41171a; --bad-ink: #ffb0aa;
    --brand-teal: #3ed0b1; --brand-teal-deep: #8fe0cc; --brand-gold: #e0bd66;
    --btn: #3ccdb0; --btn-ink: #062119; --btn-hover: #5fdcc3;
    --focus: #e0bd66;
    --shadow-1: 0 1px 2px #0008; --shadow-2: 0 2px 6px #0006, 0 18px 40px -18px #000b;
}

/* ---- base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
/* `hidden` always wins over a component's own display (a .notice is flex, a .plans list grid). */
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
    margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
    color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word; font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; height: auto }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: .16em }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px }
h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 .6em; text-wrap: balance }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.2rem); letter-spacing: -.035em; line-height: 1.02 }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem) }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.015em; line-height: 1.25 }
h4 { font-size: 1.02rem; font-family: var(--body); font-weight: 600; letter-spacing: 0 }
p, ul, ol, dl { margin: 0 0 1rem }
li { margin: .3rem 0 }
small { font-size: .875em }
strong { font-weight: 600 }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .05em .35em; border-radius: 4px }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0 }
button { font: inherit; color: inherit }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.3em; flex: none }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); width: 100% }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: .6rem; top: -10rem; z-index: 40; background: var(--gold); color: #26200a; font-weight: 600; padding: .6rem 1rem; border-radius: var(--r-s); text-decoration: none }
.skip:focus { top: .6rem }

/* ---- type helpers ------------------------------------------------------ */
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem }
.eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--gold); border-radius: 1px; flex: none }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 36em; text-wrap: pretty }
.muted { color: var(--ink-3) }
.prose { max-width: 42em; text-wrap: pretty }
.prose > :first-child { margin-top: 0 }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem }
.arrow-link .icon { transition: transform .2s var(--ease) }
.arrow-link:hover { text-decoration: underline }
.arrow-link:hover .icon { transform: translateX(3px) }

/* ---- buttons ----------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .72rem 1.25rem; border-radius: var(--r-s); font-weight: 600; font-size: .98rem;
    text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2;
    background: var(--btn); color: var(--btn-ink); transition: background .15s, transform .15s var(--ease), border-color .15s;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-ink) }
.btn:active { transform: translateY(1px) }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line) }
.btn.secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3) }
.btn.teal { background: var(--teal); color: #fff }
.btn.teal:hover { background: var(--teal-deep); color: #fff }
:root[data-theme="dark"] .btn.teal, :root[data-theme="dark"] .btn.teal:hover { color: #062119 }
.btn.quiet { background: transparent; color: var(--teal); padding-left: .4rem; padding-right: .4rem }
.btn.quiet:hover { background: var(--teal-wash); color: var(--teal-deep) }
.btn.lg { padding: .95rem 1.6rem; font-size: 1.05rem }
.btn.sm { padding: .5rem .85rem; font-size: .88rem }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0 0 }
.actions .aside { color: var(--ink-3); font-size: .95rem; margin: 0 }

/* ---- header ------------------------------------------------------------ */
header.site { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-soft) }
header.site .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 4.25rem; position: relative }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto }
.brand .mark { width: 2.1rem; height: 2.1rem; flex: none }
.wordmark { display: flex; flex-direction: column; line-height: 1 }
.wordmark .name { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.03em }
.wordmark .product { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); margin-top: .22rem; font-weight: 500 }

nav.site { display: flex; align-items: center; gap: .9rem; flex: 1 1 auto; justify-content: flex-end }
nav.site ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .1rem }
nav.site li { margin: 0 }
nav.site ul a { display: block; padding: .45rem .7rem; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap }
nav.site ul a:hover { color: var(--ink); background: var(--surface-2) }
nav.site ul a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold) }
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: .4rem }
.nav-actions a.signin { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .7rem; border-radius: var(--r-s); white-space: nowrap }
.nav-actions a.signin:hover { background: var(--surface-2) }
.nav-actions a.cta { display: inline-flex; align-items: center; padding: .55rem 1rem; border-radius: var(--r-s); background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap }
.nav-actions a.cta:hover { background: var(--btn-hover) }

/* theme control: three radios, one segmented control */
.theme { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin: 0; background: var(--surface) }
.theme label { position: relative; display: inline-flex }
.theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.theme span.k { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; color: var(--ink-3) }
.theme input:checked + span.k { background: var(--navy); color: var(--navy-ink) }
:root[data-theme="dark"] .theme input:checked + span.k { background: var(--teal); color: #062119 }
.theme input:focus-visible + span.k { outline: 3px solid var(--focus); outline-offset: 2px }
.theme .icon { width: 1rem; height: 1rem }

.nav-toggle { display: none; align-items: center; gap: .4rem; background: none; border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .7rem; font-weight: 600; font-size: .9rem; cursor: pointer }
.nav-toggle .icon.close { display: none }
.nav-toggle[aria-expanded="true"] .icon.open { display: none }
.nav-toggle[aria-expanded="true"] .icon.close { display: inline }

.referral { background: var(--teal-wash); color: var(--teal-deep); font-size: .92rem; border-bottom: 1px solid var(--line-soft) }
.referral .wrap { display: flex; gap: .6rem; align-items: center; padding-top: .55rem; padding-bottom: .55rem }
.referral[hidden] { display: none }

/* ---- sections ---------------------------------------------------------- */
main { display: block }
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0 }
.section.tight { padding: clamp(2rem, 4vw, 3.5rem) 0 }
.section.surface { background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) }
.section.ink { background: var(--navy); color: var(--navy-ink) }
.section.ink h2, .section.ink h3 { color: #fff }
.section.ink .lede, .section.ink p { color: var(--navy-ink-2) }
.section.ink .eyebrow { color: #7fe0cc }
.section.ink a { color: #9fe8d8 }
.section.ink .btn { background: #fff; color: var(--navy) }
.section.ink .btn:hover { background: #dfe8f0 }
.section.ink .btn.secondary { background: transparent; color: #fff; border-color: #ffffff55 }
.section.ink .btn.secondary:hover { border-color: #fff }
.section-head { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); align-items: start }
.section-head .lede { margin: 0 }
@media (min-width: 60rem) {
    .section-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
    .section-head.single { grid-template-columns: minmax(0, 40rem) }
}
.section-head h2 { margin: 0 }

/* ---- hero -------------------------------------------------------------- */
.hero { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); position: relative }
.hero .wrap { display: grid; gap: 2.5rem; align-items: center }
.hero .wrap > * { min-width: 0 }
@media (min-width: 64rem) { .hero .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3.5rem } }
.hero h1 { margin-bottom: 1.1rem; max-width: 12ch }
.hero .lede { margin-bottom: .6rem }
.hero .reassure { color: var(--ink-3); font-size: 1rem; margin: 0 }
.hero .actions { margin-top: 1.8rem }
.hero.page { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) }
.hero.page .wrap { display: block }
.hero.page h1 { max-width: 16ch }
.launch-strip { display: inline-flex; align-items: center; gap: .55rem; background: var(--gold-wash); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 999px; padding: .3rem .85rem .3rem .5rem; font-size: .86rem; font-weight: 500; margin: 0 0 1.2rem }
.launch-strip .icon { width: 1rem; height: 1rem; color: var(--gold) }

/* ---- product frame (HTML-rendered product UI, synthetic data) ---------- */
.frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); overflow: hidden; font-size: .78rem; line-height: 1.4; color: var(--ink); position: relative }
.frame .bar { display: flex; align-items: center; gap: .75rem; background: var(--navy); color: var(--navy-ink); padding: .6rem .9rem; font-size: .74rem }
:root[data-theme="dark"] .frame .bar, .section.ink .frame .bar { background: #06101a }
.frame .bar .dots { display: flex; gap: .3rem }
.frame .bar .dots i { width: .5rem; height: .5rem; border-radius: 50%; background: #ffffff33; display: block }
.frame .bar .title { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.frame .bar .product { text-transform: uppercase; letter-spacing: .12em; font-size: .6rem; opacity: .65; white-space: nowrap }
@media (max-width: 80rem) { .hero .frame .bar .product { display: none } }
.frame .bar nav { margin-left: auto; display: flex; gap: .2rem }
.frame .bar nav span { padding: .25rem .5rem; border-radius: 4px; color: var(--navy-ink-2) }
.frame .bar nav span[data-on] { background: #ffffff1a; color: #fff; box-shadow: inset 0 -2px 0 var(--gold) }
.frame .body { padding: .9rem 1rem 1rem; display: grid; gap: .8rem; background: var(--bg); overflow-x: auto }
.nw { white-space: nowrap }
.frame .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem }
.frame .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .6rem .75rem }
.frame .kpi b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1 }
.frame .kpi span { color: var(--ink-3); font-size: .7rem }
.frame table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; font-size: .74rem; min-width: 0 }
.frame th, .frame td { text-align: left; padding: .45rem .65rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.frame thead th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em }
.frame tbody tr:last-child td { border-bottom: 0 }
.frame .mono { font-family: var(--mono); font-size: .7rem; color: var(--ink-2) }
.frame .state { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 600; font-size: .68rem; background: var(--surface-2); color: var(--ink-2) }
.frame .state::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor }
.frame .state.ok { background: var(--ok-bg); color: var(--ok-ink) }
.frame .state.warn { background: var(--warn-bg); color: var(--warn-ink) }
.frame .state.info { background: var(--info-bg); color: var(--info-ink) }
.frame .side { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .8rem }
.frame .side nav { display: grid; gap: .15rem; align-content: start }
.frame .side nav span { padding: .35rem .6rem; border-radius: 6px; color: var(--ink-2) }
.frame .side nav span[data-on] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--teal) }
.frame .progress { height: .45rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line) }
.frame .progress i { display: block; height: 100%; background: var(--teal); border-radius: 999px }
.frame .checklist { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 0 }
.frame .checklist li { display: flex; gap: .5rem; align-items: center; margin: 0; background: var(--surface); border: 1px solid var(--line); padding: .45rem .6rem; border-radius: 6px }
.frame .checklist .icon { width: .95rem; height: .95rem }
.frame .checklist li.done .icon { color: var(--ok-ink) }
.frame .checklist li.next { border-color: var(--teal) }
.frame .checklist li.next .icon { color: var(--teal) }
.frame .checklist li .who { margin-left: auto; color: var(--ink-3); font-size: .68rem }
.frame .card-h { font-weight: 600; margin: 0 0 .45rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem }
.frame .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: .7rem .8rem; min-width: 0 }
.frame.phone { max-width: 17rem; border-radius: 1.6rem; border-width: 6px; border-color: var(--navy) }
.frame.phone .bar { justify-content: center; padding: .5rem }
.frame.phone .kpis { grid-template-columns: 1fr 1fr }
figure.shot { margin: 0 }
figure.shot figcaption { font-size: .85rem; color: var(--ink-3); margin-top: .7rem; display: flex; gap: .4rem; align-items: center }
figure.shot figcaption .icon { width: 1rem; height: 1rem }

/* the invoice card over the hero frame: what comes back from MRA */
.hero .visual { position: relative }
.hero .visual figcaption { margin-top: 2.6rem }
.returned { position: absolute; right: -.5rem; bottom: 1.4rem; width: 15.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2); padding: .8rem 3.4rem .8rem .9rem; font-size: .76rem; line-height: 1.35 }
.returned .h { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ok-ink); margin-bottom: .45rem }
.returned .h .icon { width: 1rem; height: 1rem }
.returned dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0 }
.returned dt { color: var(--ink-3) }
.returned dd { margin: 0; font-family: var(--mono); font-size: .68rem }
.returned .qr { position: absolute; right: .8rem; top: .8rem; width: 2.2rem; height: 2.2rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px }
.returned .qr i { background: var(--ink); display: block }
.returned .qr i:nth-child(3n+1), .returned .qr i:nth-child(7n+2) { background: transparent }
@media (max-width: 48rem) { .returned { position: relative; right: auto; bottom: auto; width: auto; margin-top: .8rem } }

/* ---- trust strip ------------------------------------------------------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0 }
.trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.5rem }
@media (min-width: 52rem) { .trust ul { grid-template-columns: repeat(4, 1fr) } }
.trust li { display: flex; gap: .6rem; align-items: center; margin: 0; font-weight: 500; font-size: .95rem }
.trust .icon { color: var(--teal) }
.trust small { display: block; color: var(--ink-3); font-weight: 400 }

/* ---- five stages ------------------------------------------------------- */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; display: grid; gap: .5rem }
@media (min-width: 56rem) { .stages { grid-template-columns: repeat(5, 1fr); gap: 0 } }
.stages > li { margin: 0; counter-increment: stage }
.stages details { border-top: 2px solid var(--line); padding: 1rem 0 .5rem; height: 100% }
.stages details[open] { border-top-color: var(--teal) }
.stages summary { list-style: none; cursor: pointer; display: grid; gap: .25rem; padding-right: 1.6rem; position: relative }
.stages summary::-webkit-details-marker { display: none }
.stages summary::before { content: counter(stage, decimal-leading-zero); font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--teal) }
.stages summary .t { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em }
.stages summary .icon { position: absolute; right: .2rem; top: 1.5rem; transition: transform .2s var(--ease); color: var(--ink-3) }
.stages details[open] summary .icon { transform: rotate(180deg) }
.stages .p { font-size: .93rem; color: var(--ink-2); margin: .6rem 1rem 0 0; text-wrap: pretty }
.stages .p small { display: block; color: var(--ink-3); margin-top: .4rem }
@media (min-width: 56rem) { .stages > li + li details { margin-left: 1.25rem } }

/* ---- editorial rows (no card grid) ------------------------------------- */
.rows { list-style: none; margin: 0; padding: 0 }
.rows > li { margin: 0; display: grid; gap: .4rem 2.5rem; padding: 1.6rem 0; border-top: 1px solid var(--line) }
.rows > li:last-child { border-bottom: 1px solid var(--line) }
@media (min-width: 52rem) { .rows > li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) } }
.rows h3 { margin: 0; display: flex; align-items: center; gap: .6rem }
.rows h3 .icon { color: var(--teal); width: 1.3rem; height: 1.3rem }
.rows p { margin: 0; color: var(--ink-2) }
.rows p + p { margin-top: .5rem }

/* ---- product experience gallery ---------------------------------------- */
.gallery { display: grid; gap: 2.5rem }
.gallery > * { min-width: 0 }
@media (min-width: 60rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) } .gallery .wide { grid-column: 1 / -1 } }
.gallery h3 { margin: 1rem 0 .2rem }
.gallery p { color: var(--ink-2); margin: 0 }

/* ---- feel: what a modern EBS should feel like -------------------------- */
.feel { display: grid; gap: 1.5rem 3rem }
@media (min-width: 52rem) { .feel { grid-template-columns: repeat(3, 1fr) } }
.feel div { border-left: 2px solid var(--gold); padding-left: 1rem }
.feel h3 { margin: 0 0 .3rem; font-size: 1.1rem }
.feel p { margin: 0; color: var(--ink-2); font-size: .98rem }

/* ---- integrations status ----------------------------------------------- */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor }
.status.available { background: var(--ok-bg); color: var(--ok-ink) }
.status.assisted { background: var(--info-bg); color: var(--info-ink) }
.status.dev { background: var(--warn-bg); color: var(--warn-ink) }
.integrations { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden }
.integrations li { margin: 0; background: var(--surface); padding: 1.1rem 1.25rem; display: grid; gap: .4rem 1.5rem; align-items: start }
@media (min-width: 52rem) { .integrations li { grid-template-columns: 12rem minmax(0, 1fr) auto } }
.integrations h3 { margin: 0; font-size: 1.05rem }
.integrations p { margin: 0; color: var(--ink-2); font-size: .95rem }

/* ---- pricing ----------------------------------------------------------- */
.billing { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); margin: 0 }
.billing label { position: relative; display: inline-flex }
.billing input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.billing span.k { padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--ink-2); display: inline-flex; gap: .45rem; align-items: center }
.billing span.k em { font-style: normal; font-size: .74rem; color: var(--teal); font-weight: 600 }
.billing input:checked + span.k { background: var(--navy); color: #fff }
.billing input:checked + span.k em { color: #9fe8d8 }
:root[data-theme="dark"] .billing input:checked + span.k { background: var(--teal); color: #062119 }
:root[data-theme="dark"] .billing input:checked + span.k em { color: #062119 }
.billing input:focus-visible + span.k { outline: 3px solid var(--focus); outline-offset: 2px }
.pricing-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 1.8rem }

.plans { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0 }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch } }
.plan { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; position: relative }
.plan.recommended { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow-2) }
.plan .flag { position: absolute; top: -.8rem; left: 1.4rem; background: var(--teal); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px }
:root[data-theme="dark"] .plan .flag { color: #062119 }
.plan h3 { margin: 0; font-size: 1.5rem }
.plan .tag { color: var(--ink-2); margin: 0; font-size: .95rem; min-height: 2.8em }
.price { display: grid; gap: .1rem; padding: .6rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) }
.price .ex { font-family: var(--display); font-size: 2rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.1 }
.price .ex small { font-family: var(--body); font-size: .95rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: .2rem }
.price .inc { font-size: .88rem; color: var(--ink-3) }
.price .saving { font-size: .86rem; color: var(--teal); font-weight: 600 }
.price .promo { font-size: .84rem; color: var(--gold-ink); background: var(--gold-wash); padding: .25rem .6rem; border-radius: var(--r-s); display: inline-block; margin-top: .3rem; width: fit-content }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .94rem }
.plan li { margin: 0; display: flex; gap: .5rem; align-items: flex-start }
.plan li .icon { color: var(--teal); width: 1.05rem; height: 1.05rem; margin-top: .2rem }
.plan li.no { color: var(--ink-3) }
.plan li.no .icon { color: var(--ink-3) }
.plan .actions { margin-top: auto; padding-top: .5rem }
.plan .actions .btn { flex: 1 1 auto }

.enterprise { margin-top: 2rem; background: var(--navy); color: var(--navy-ink); border-radius: var(--r-l); padding: clamp(1.6rem, 3vw, 2.5rem); display: grid; gap: 1.5rem 3rem; align-items: center; position: relative; overflow: hidden }
@media (min-width: 56rem) { .enterprise { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) } }
.enterprise::before { content: ""; position: absolute; inset: auto -6rem -8rem auto; width: 20rem; height: 20rem; border-radius: 50%; border: 1.5rem solid #ffffff08; pointer-events: none }
.enterprise h3 { color: #fff; font-size: 1.8rem; margin: 0 0 .3rem }
.enterprise .sub { color: var(--navy-ink-2); margin: 0 0 1rem }
.enterprise ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; font-size: .94rem; color: var(--navy-ink-2) }
.enterprise li { break-inside: avoid; display: flex; gap: .45rem; margin: .25rem 0 }
.enterprise li .icon { color: #7fe0cc; width: 1rem; height: 1rem; margin-top: .3rem }
.enterprise .side { display: grid; gap: .6rem; justify-items: start }
.enterprise .side .custom { font-family: var(--display); font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; color: #fff }
.enterprise .side p { margin: 0; font-size: .9rem; color: var(--navy-ink-2) }
.enterprise .btn { background: #fff; color: var(--navy) }
.enterprise .btn:hover { background: #dfe8f0; color: var(--navy) }

.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem }
@media (min-width: 56rem) { .addons { grid-template-columns: repeat(3, 1fr) } }
.addons li { margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); padding: 1.2rem 1.25rem; background: var(--surface); display: grid; gap: .4rem; align-content: start }
.addons h3 { margin: 0; font-size: 1.1rem }
.addons .p { font-family: var(--display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em }
.addons .p small { font-family: var(--body); font-size: .85rem; color: var(--ink-3); font-weight: 400 }
.addons p { margin: 0; font-size: .93rem; color: var(--ink-2) }

.compare summary { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 0 }
.compare summary .icon { transition: transform .2s var(--ease) }
.compare[open] summary .icon { transform: rotate(180deg) }
.scroll { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface) }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 38rem }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: top }
thead th { background: var(--surface-2); color: var(--ink); font-weight: 600 }
tbody th { font-weight: 500; color: var(--ink) }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0 }
td .icon { color: var(--teal) }
td.no { color: var(--ink-3) }

.legal-note { font-size: .86rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem }

/* ---- notices ----------------------------------------------------------- */
.notice { display: flex; gap: .75rem; padding: .95rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); margin: 1.2rem 0; font-size: .95rem }
.notice .icon { color: var(--teal); margin-top: .15rem }
.notice > div > :first-child { margin-top: 0 }
.notice > div > :last-child { margin-bottom: 0 }
.notice.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-ink) }
.notice.warn .icon { color: inherit }
.notice.info { background: var(--info-bg); border-color: transparent; color: var(--info-ink) }
.notice.info .icon { color: inherit }
.notice.gold { background: var(--gold-wash); border-color: transparent; color: var(--gold-ink) }
.notice.gold .icon { color: var(--gold) }
.notice.review { border-style: dashed; color: var(--ink-2) }
.review-mark { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--warn-ink); background: var(--warn-bg); padding: .15rem .5rem; border-radius: 4px; white-space: nowrap }

/* ---- chooser / wizard ------------------------------------------------- */
.wizard { display: grid; gap: 2.5rem; align-items: start }
@media (min-width: 60rem) { .wizard { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) } }
.q { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 1.4rem 1.5rem; margin: 0 0 1rem; min-width: 0 }
.q legend { font-weight: 600; font-size: 1.08rem; padding: 0; margin: 0 0 .2rem; float: left; width: 100%; letter-spacing: -.01em }
.q legend + * { clear: both }
.q .hint { color: var(--ink-3); font-size: .9rem; margin: 0 0 .9rem }
.q .n { font-family: var(--display); font-size: .78rem; letter-spacing: .1em; color: var(--teal); font-weight: 600; display: block; margin-bottom: .4rem }
.choices { display: grid; gap: .5rem; margin: 0 }
@media (min-width: 40rem) { .choices { grid-template-columns: repeat(2, 1fr) } .choices.one { grid-template-columns: 1fr } }
.choices label { position: relative; display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; background: var(--bg); font-size: .95rem; line-height: 1.35 }
.choices label:hover { border-color: var(--ink-3) }
.choices input { margin: .2rem 0 0; accent-color: var(--teal); flex: none }
.choices label:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); box-shadow: inset 0 0 0 1px var(--teal) }
.choices label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px }
.choices small { display: block; color: var(--ink-3) }

.result { position: sticky; top: 5.25rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 1.5rem; box-shadow: var(--shadow-1) }
.result .eyebrow { margin-bottom: .6rem }
.result h2 { font-size: 1.9rem; margin: 0 0 .2rem }
.result .alt { color: var(--ink-2); margin: 0 0 1rem }
.result .why summary { cursor: pointer; font-weight: 600; padding: .5rem 0 }
.result .why ul { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .93rem; color: var(--ink-2) }
.result .empty { color: var(--ink-3) }
.result .actions { margin-top: 1.2rem; flex-direction: column; align-items: stretch }

/* ---- configurator / order summary ------------------------------------- */
.config { display: grid; gap: 2rem; align-items: start }
@media (min-width: 60rem) { .config { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) } }
.config fieldset, .form fieldset { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 1.3rem 1.5rem; margin: 0 0 1rem; min-width: 0 }
.config legend, .form legend { font-weight: 600; padding: 0 .4rem; font-size: 1.05rem }
.field { display: grid; gap: .3rem; margin: .9rem 0 }
.field label { font-weight: 600; font-size: .93rem }
.field .hint { font-size: .86rem; color: var(--ink-3); margin: 0 }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; font: inherit; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg); color: var(--ink) }
.field textarea { min-height: 6rem; resize: vertical }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent }
.two { display: grid; gap: 0 1rem }
@media (min-width: 40rem) { .two { grid-template-columns: 1fr 1fr } }
.two { align-items: start }
.check { display: flex; gap: .65rem; align-items: flex-start; margin: .7rem 0; font-size: .95rem }
.check input { margin: .3rem 0 0; accent-color: var(--teal); flex: none; width: 1.05rem; height: 1.05rem }
.check label { font-weight: 400 }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--bg) }
.stepper button { width: 2.2rem; height: 2.2rem; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--ink-2) }
.stepper button:hover { background: var(--surface-2) }
.stepper input { width: 3.4rem; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); padding: .4rem 0; -moz-appearance: textfield }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.fieldrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line-soft) }
.fieldrow:first-of-type { border-top: 0 }
.fieldrow .l { display: grid; gap: .1rem }
.fieldrow .l b { font-weight: 600 }
.fieldrow .l span { font-size: .86rem; color: var(--ink-3) }
.fieldrow[aria-disabled="true"] { opacity: .5 }
.fieldrow .check { margin: 0 }

.summary { position: sticky; top: 5.25rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-1) }
.summary h2 { font-size: 1.2rem; margin: 0 0 .8rem; font-family: var(--body); font-weight: 600; letter-spacing: 0 }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; font-size: .95rem }
.summary dt { color: var(--ink-2) }
.summary dd { margin: 0; text-align: right; white-space: nowrap }
.summary dd.neg { color: var(--teal) }
.summary .sep { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: .35rem 0; height: 0 }
.summary .total dt, .summary .total dd { font-weight: 600; font-size: 1.05rem; color: var(--ink) }
.summary .due { grid-column: 1 / -1; background: var(--teal-wash); color: var(--teal-deep); border-radius: var(--r-m); padding: .8rem .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .4rem; flex-wrap: wrap }
.summary .due b { font-family: var(--display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em }
.summary .recur { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-3); margin-top: .4rem }
.summary .actions { margin-top: 1rem; flex-direction: column; align-items: stretch }
.summary .note { font-size: .84rem; color: var(--ink-3); margin: .8rem 0 0 }

.mini-summary { display: none }
@media (max-width: 60rem) {
    .mini-summary { display: flex; align-items: center; gap: .8rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 1px solid var(--line); padding: .6rem var(--gutter); box-shadow: 0 -8px 24px -12px #0b1c2e33; font-size: .9rem; color: var(--ink-2) }
    .mini-summary b { font-family: var(--display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-right: auto }
    [data-checkout] { padding-bottom: 4rem }
}

/* ---- checkout steps ---------------------------------------------------- */
.steps-nav { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; counter-reset: step }
.steps-nav li { margin: 0; counter-increment: step; border-top: 3px solid var(--line); padding-top: .6rem; font-size: .92rem; color: var(--ink-3); font-weight: 500 }
.steps-nav li::before { content: counter(step) ". "; font-family: var(--display); color: inherit }
.steps-nav li[aria-current="step"] { border-top-color: var(--teal); color: var(--ink) }
.steps-nav li.done { border-top-color: var(--teal-deep); color: var(--ink-2) }
.step[hidden] { display: none }
.step-actions { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem }
.review dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; font-size: .96rem; margin: 0 }
.review dt { color: var(--ink-2) }
.review dd { margin: 0; text-align: right }

/* ---- FAQ / details ----------------------------------------------------- */
.faq { border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 600; list-style: none; position: relative; font-size: 1.02rem }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font-family: var(--display); font-size: 1.3rem; color: var(--teal); font-weight: 300 }
.faq details[open] summary::after { content: "–" }
.faq .a { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 46em }
.faq .a > :last-child { margin-bottom: 0 }

/* ---- pillars (security) ----------------------------------------------- */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(2, 1fr) } }
.pillars li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; align-items: start }
.pillars .icon { width: 1.5rem; height: 1.5rem; color: var(--teal); margin-top: .15rem; grid-row: span 2 }
.pillars h3 { margin: 0; font-size: 1.12rem }
.pillars p { margin: 0; color: var(--ink-2); font-size: .97rem }
.section.ink .pillars .icon { color: #7fe0cc }
.section.ink .pillars h3 { color: #fff }
.section.ink .pillars p { color: var(--navy-ink-2) }

/* ---- accountant callout ------------------------------------------------ */
.callout { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.5rem 3rem; align-items: center }
@media (min-width: 56rem) { .callout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) } }
.callout h2 { margin: 0 0 .5rem }
.callout p { color: var(--ink-2); margin: 0 }
.callout .cob { border: 1px dashed var(--line); border-radius: var(--r-m); padding: 1rem 1.2rem; background: var(--bg); font-size: .92rem }
.callout .cob b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em }
.callout .cob span { color: var(--ink-3) }

/* ---- final CTA --------------------------------------------------------- */
.final .wrap { display: grid; gap: 1.5rem 3rem; align-items: center }
@media (min-width: 56rem) { .final .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) } }
.final h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 .5rem; max-width: 14ch }
.final .actions { margin: 0; justify-self: start }
@media (min-width: 56rem) { .final .actions { justify-self: end; flex-direction: column; align-items: stretch; min-width: 16rem } }

/* ---- timeline (how it works) ------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl }
.timeline > li { margin: 0; counter-increment: tl; display: grid; gap: 1rem 3rem; padding: 2.5rem 0; border-top: 1px solid var(--line) }
@media (min-width: 60rem) { .timeline > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start } }
.timeline .n { font-family: var(--display); font-size: 3rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--teal); display: block; margin-bottom: .6rem }
.timeline h3 { font-size: 1.5rem; margin: 0 0 .5rem }
.timeline p { color: var(--ink-2); margin: 0 0 .6rem; max-width: 40em }
.timeline .who { display: inline-flex; gap: .4rem; align-items: center; font-size: .86rem; color: var(--ink-3); background: var(--surface-2); padding: .25rem .6rem; border-radius: 999px; margin-right: .4rem }
.timeline .who .icon { width: .95rem; height: .95rem }
.timeline .est { font-size: .86rem; color: var(--ink-3); margin-top: .4rem }

/* ---- key/value meta --------------------------------------------------- */
dl.meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 1rem 0 }
dl.meta dt { font-weight: 600; color: var(--ink-2) }
dl.meta dd { margin: 0 }

/* ---- footer ------------------------------------------------------------ */
footer.site { background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-2); padding: 3.2rem 0 2rem; font-size: .92rem; margin-top: 3rem }
footer.site .cols { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 2rem }
@media (min-width: 52rem) { footer.site .cols { grid-template-columns: 1.6fr repeat(4, 1fr) } }
footer.site .colophon { grid-column: 1 / -1 }
@media (min-width: 52rem) { footer.site .colophon { grid-column: auto } }
footer.site .colophon p { margin: .9rem 0 0; max-width: 26em; color: var(--ink-3) }
footer.site h2 { font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; font-weight: 600 }
footer.site ul { list-style: none; padding: 0; margin: 0 }
footer.site li { margin: .3rem 0 }
footer.site a { color: var(--ink); text-decoration: none }
footer.site a:hover { text-decoration: underline }
footer.site .legal { border-top: 1px solid var(--line); padding-top: 1.2rem; display: grid; gap: .4rem; font-size: .85rem; color: var(--ink-3) }
footer.site .legal p { margin: 0 }
footer.site .legal nav ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem }
footer.site .legal nav li { margin: 0 0 .3rem }
footer.site .legal nav a { font-weight: 500 }

/* ---- legal documents (terms, privacy, subscription terms) -------------- */
.doc-toc { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); padding: 1.1rem 1.2rem; margin: 1.6rem 0 0; font-size: .93rem }
.doc-toc h2 { font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; font-weight: 600 }
.doc-toc ol { list-style: none; padding: 0; margin: 0 }
@media (min-width: 46rem) { .doc-toc ol { columns: 2; column-gap: 2.5rem } }
@media (min-width: 70rem) { .doc-toc ol { columns: 3 } }
.doc-toc li { margin: 0 0 .35rem; break-inside: avoid }
.doc-toc a { color: var(--ink-2); text-decoration: none }
.doc-toc a:hover { color: var(--ink); text-decoration: underline }
.doc { max-width: 44em }
.doc > :first-child { margin-top: 0 }
.doc h2 { margin: 2.6rem 0 .7rem; font-size: clamp(1.2rem, 2vw, 1.45rem); scroll-margin-top: 6rem }
.doc h3 { margin: 1.5rem 0 .4rem; font-size: 1.02rem; scroll-margin-top: 6rem }
.doc p { color: var(--ink-2); margin: 0 0 .8rem; max-width: 42em }
.doc ul, .doc ol { color: var(--ink-2); padding-left: 1.3rem; margin: 0 0 .9rem; max-width: 42em }
.doc li { margin: .35rem 0 }
.doc .notice { max-width: 42em }
.doc .review-mark { margin-right: .35rem }
.doc .legal-note { max-width: 42em }

/* ---- contact form and dialog ------------------------------------------ */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.field-error { color: var(--bad-ink); font-size: .86rem; margin: .1rem 0 0; font-weight: 500 }
.field-error::before { content: "! "; font-weight: 700 }
.field-error[hidden] { display: none }
.field [aria-invalid="true"] { border-color: var(--bad-ink) !important; box-shadow: 0 0 0 1px var(--bad-ink) }
.contact-form [data-contact-error] ul { margin: .4rem 0 0; padding-left: 1.2rem }
.contact-form [data-contact-error][hidden] { display: none }
.form-done { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--r-m); background: var(--surface); padding: 1.2rem 1.3rem }
.form-done h3 { margin: 0 0 .3rem }
.form-done p { margin: 0; color: var(--ink-2) }
.contact-dialog { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); color: var(--ink); padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--shadow-2) }
.contact-dialog::backdrop { background: #0b1c2e8c; backdrop-filter: blur(2px) }
.contact-dialog .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem }
.contact-dialog h2 { font-size: 1.6rem; margin: 0 0 .3rem }
.contact-dialog .dialog-lede { margin: 0 0 .6rem; font-size: .95rem }
.dialog-close { background: none; border: 1px solid var(--line); border-radius: var(--r-s); width: 2.3rem; height: 2.3rem; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none }
.dialog-close:hover { background: var(--surface-2); color: var(--ink) }
@media (max-width: 40rem) { .contact-dialog { padding: 1.1rem 1rem; max-height: calc(100vh - 1rem) } }

/* ---- responsive: navigation ------------------------------------------ */
@media (max-width: 68rem) {
    .nav-toggle { display: inline-flex }
    nav.site { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); padding: .8rem var(--gutter) 1.2rem; flex-direction: column; align-items: stretch; gap: .8rem }
    nav.site[data-open] { display: flex }
    nav.site ul { flex-direction: column; gap: 0 }
    nav.site ul a { padding: .7rem .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0 }
    nav.site ul a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); padding-left: .8rem }
    .nav-actions { margin: .4rem 0 0; flex-wrap: wrap; gap: .8rem }
    .nav-actions a.cta, .nav-actions a.signin { flex: 1 1 8rem; text-align: center; justify-content: center }
    .theme { order: 3; flex-basis: 100%; justify-content: center; width: fit-content }
}
@media (max-width: 40rem) {
    body { font-size: 1rem }
    .hero { padding-top: 2.2rem }
    .hero h1 { max-width: none }
    .actions .btn { flex: 1 1 100% }
    .frame .kpis { grid-template-columns: 1fr 1fr }
    .frame .side { grid-template-columns: 1fr }
    .frame .side nav { grid-auto-flow: column; overflow-x: auto }
    .frame .bar nav { display: none }
    .frame th, .frame td { white-space: normal }
    .frame .checklist li .who { display: none }
    .enterprise ul { columns: 1 }
    .result, .summary { position: static }
    .steps-nav { grid-template-columns: 1fr }
}

/* ---- live prices and commercial checkout ------------------------------- */
.prices-status { margin: 0 0 1.2rem }
.price .was { font-size: .84rem; color: var(--ink-3) }
.price .promo.cond { background: var(--surface-2); color: var(--ink-2) }
.tel { white-space: nowrap }
.steps-nav { grid-template-columns: repeat(4, 1fr) }
.fieldrow .included { font-size: .88rem; font-weight: 600; color: var(--teal-deep) }
.state-flag { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase }
.state-flag.pending { background: var(--warn-bg); color: var(--warn-ink) }
.state-flag .icon { width: 1rem; height: 1rem }
[data-step-pay] h2, [data-checkout-done] h2 { margin: 0 0 1rem }
.ref-block { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface) }
.ref-block dt { color: var(--ink-2) }
.ref-block dd { margin: 0 }
.ref { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; font-size: 1.05rem; word-break: break-all }
dl.bank { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .4rem 0 }
dl.bank dt { color: inherit; opacity: .85 }
dl.bank dd { margin: 0; font-weight: 600; word-break: break-word }
.next-steps { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .35rem }
.pay-methods label:has(input:disabled) { opacity: .65; cursor: not-allowed }
@media (max-width: 40rem) {
    .steps-nav { grid-template-columns: 1fr 1fr }
    .ref-block, dl.bank { grid-template-columns: 1fr }
}

/* ---- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *, *::before, *::after { transition: none !important; animation: none !important }
}

@media print {
    header.site nav, .actions, .nav-toggle, .theme, footer.site .cols { display: none }
    body { background: #fff; color: #000 }
    .section.ink { background: #fff; color: #000 }
}