/* AutoBiz AI. Plain CSS, mobile first.
   Concept: "Automation Flow". The hero is a working 5-node workflow; body sections carry numbered eyebrows,
   every section is a node that lights up as you reach it.
   Theme: pine ink + putty ground (ink at 70/45/22/10%). Hero and closer are ink bookends.
   Type: Bricolage Grotesque (English titles), Anek Bangla (Bangla), Instrument Sans (UI),
   JetBrains Mono (system labels), Bebas Neue (big numbers).
   Radius rule: controls 12px, cards 20-24px, panels 28-32px, chips full. */

:root {
    --ground: #E5DCC8;
    --ground-soft: #EDE6D6;
    --ground-hi: #F4EFE4;
    --ink: #27412F;
    --gold: #EBA83F;
    --ink-deep: #1E3326;
    --ink-70: rgb(39 65 47 / .72);
    --ink-45: rgb(39 65 47 / .45);
    --ink-22: rgb(39 65 47 / .22);
    --ink-10: rgb(39 65 47 / .08);
    --ground-80: rgb(229 220 200 / .82);
    --ground-45: rgb(229 220 200 / .45);
    --ground-22: rgb(229 220 200 / .2);
    --ground-10: rgb(229 220 200 / .08);

    --f-display: 'Bricolage Grotesque', 'Anek Bangla', system-ui, sans-serif;
    --f-bn: 'Anek Bangla', 'Instrument Sans', system-ui, sans-serif;
    --f-text: 'Instrument Sans', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-num: 'Bebas Neue', 'Instrument Sans', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --r-control: 12px;
    --r-card: 20px;
    --r-box: 24px;
    --r-panel: 32px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --shadow: 0 1px 2px rgb(30 51 38 / .06), 0 24px 48px -24px rgb(30 51 38 / .35);
    --wrap: 1280px;
    --gutter: 16px;
    --nav-h: 84px;
    --sec-y: clamp(104px, 13vw, 184px);
    color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }
@media (min-width: 1600px) { :root { --wrap: 1360px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.65 var(--f-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font-family: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph, .ph-fill { line-height: 1; }

/* ---------- Type ---------- */
.h-display { font: 800 clamp(2.4rem, 5.6vw, 4.6rem)/1 var(--f-display); font-variation-settings: 'opsz' 96; letter-spacing: -.04em; text-wrap: balance; }
.h-section { font: 700 clamp(1.8rem, 3.4vw, 2.7rem)/1.08 var(--f-display); font-variation-settings: 'opsz' 96; letter-spacing: -.03em; text-wrap: balance; }
.sec-head { display: grid; gap: 18px; max-width: 40rem; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-sub { font: 400 clamp(1.05rem, 1.8vw, 1.2rem)/1.65 var(--f-bn); color: var(--ink-70); }

.on-ink { background: var(--ink); color: var(--ground); }
.on-ink .sec-sub { color: var(--ground-80); }

/* ---------- Buttons, links ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; white-space: nowrap;
    border: 1.5px solid transparent; border-radius: var(--r-control);
    font: 600 17px/1.2 var(--f-text); cursor: pointer; text-decoration: none;
    transition: transform .3s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .3s var(--ease);
}
.btn .ph { font-size: 20px; transition: transform .3s var(--ease); }
.btn:hover .ph-arrow-right { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--ink); color: var(--ground); }
.btn-primary:hover { background: var(--ink-deep); box-shadow: 0 10px 24px -12px rgb(30 51 38 / .6); transform: translateY(-1px); }
.on-ink .btn-primary, .site-nav .btn-primary { background: var(--ground); color: var(--ink); }
.on-ink .btn-primary:hover, .site-nav .btn-primary:hover { background: var(--ground-hi); box-shadow: 0 10px 28px -12px rgb(0 0 0 / .45); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink-45); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink-10); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 18px; }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.btn-sm .ph { font-size: 16px; }
.btn-block { width: 100%; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ground); border-right-color: transparent; animation: spin .7s linear infinite; }
.on-ink .btn-primary.is-busy::after { border-color: var(--ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-link { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 600 15px var(--f-text); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-45); }
.btn-link:disabled { color: var(--ink-45); text-decoration: none; cursor: default; }
.link-quiet { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ground-45); color: var(--ground-80); transition: color .2s; }
.link-quiet:hover { color: var(--ground); text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .site-nav :focus-visible { outline-color: var(--ground); }

.notice-warn { display: flex; align-items: flex-start; gap: 10px; max-width: 32rem; padding: 14px 16px; border: 1.5px dashed var(--ink-45); border-radius: var(--r-control); font-weight: 500; }
.on-ink .notice-warn { border-color: var(--ground-45); }
.notice-warn .ph { font-size: 20px; margin-top: 2px; }

.flash { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: var(--r-control); background: var(--ground-10); border: 1px solid var(--ground-22); font-weight: 500; }
.flash .ph { font-size: 20px; flex: none; }
.flash-err { background: var(--ink-10); border-color: var(--ink-22); border-left: 4px solid var(--ink); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font: 600 13px/1.6 var(--f-text); background: var(--ground); color: var(--ink); }
.pill-muted { background: var(--ink-10); color: var(--ink-70); }
.pill-on-ink { background: var(--ground-10); color: var(--ground-80); border: 1px solid var(--ground-22); }

.demo-badge { position: fixed; left: 12px; bottom: 12px; z-index: 60; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--ground); border: 1.5px dashed var(--ground-45); font: 600 12px var(--f-mono); }
.demo-hint { margin-top: 14px; padding: 8px 12px; border: 1.5px dashed var(--ink-45); border-radius: var(--r-control); font-size: 14px; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark svg { display: block; transition: transform .45s var(--ease); }
.logo-mark { display: block; border-radius: 10px; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .08); }
.logo-rim { stroke: rgb(255 255 255 / .55); stroke-width: 1; }
/* Botu: ink body, cream face features, one gold accent (the antenna light) shared with the "AI" in the wordmark */
.bot-ink { fill: var(--ink); }
.bot-line { stroke: var(--ink); }
.bot-eye { fill: var(--ground-hi); transform-box: fill-box; transform-origin: center; }
.bot-smile { stroke: var(--ground-hi); }
.bot-light { fill: var(--gold); }
.bot-glow, .bot-light { transform-box: fill-box; transform-origin: center; }
.bot { transform-box: view-box; transform-origin: 16px 24px; transition: transform .5s var(--ease); }
.brand:hover .bot { transform: rotate(-8deg); }
.logo-word { font: 700 19.5px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.logo-ai {
    color: var(--gold); font-weight: 800;
    background: linear-gradient(135deg, #F7CF72 0%, #E9A23B 55%, #C97F1F 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    .bot-eye { animation: bot-blink 4.6s infinite; }
    .bot-glow { animation: bot-pulse 2.4s ease-in-out infinite; }
    .bot-light { animation: bot-light 2.4s ease-in-out infinite; }
}
@keyframes bot-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes bot-pulse { 50% { opacity: .25; transform: scale(.7); } }
@keyframes bot-light { 50% { transform: scale(.85); } }

/* ---------- Site navbar: a floating glass pill ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; padding: 12px 0; pointer-events: none; }
.site-nav + .hero { margin-top: calc(var(--nav-h) * -1); padding-top: var(--nav-h); }
.nav-pill {
    position: relative; pointer-events: auto; display: flex; align-items: center; gap: 16px;
    height: 60px; padding: 0 10px 0 14px; border-radius: 999px; color: var(--ground);
    background: rgb(30 51 38 / .62); border: 1px solid var(--ground-22);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -18px rgb(0 0 0 / .5);
    transition: background-color .35s, box-shadow .35s, border-color .35s;
}
.site-nav.is-scrolled .nav-pill { background: rgb(30 51 38 / .88); border-color: rgb(229 220 200 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 18px 40px -16px rgb(0 0 0 / .55); }
.site-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: grid; gap: 2px; padding: 10px;
    border-radius: 24px; background: var(--ink-deep); border: 1px solid var(--ground-22);
    box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.site-nav.is-open .site-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-links > a { padding: 12px 14px; border-radius: 14px; font: 600 17px var(--f-display); text-decoration: none; color: var(--ground-80); }
.site-links > a:hover, .site-links > a.is-current { background: var(--ground-10); color: var(--ground); }
.site-menu-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding: 12px 6px 4px 14px; border-top: 1px solid var(--ground-10); }
.nav-login { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--ground-80); transition: color .2s; }
.nav-login:hover { color: var(--ground); }
.nav-button { background: none; border: 0; cursor: pointer; padding: 8px 0; }
.nav-cta { border-radius: 999px; padding: 8px 16px 8px 18px; box-shadow: 0 0 0 4px rgb(229 220 200 / .08); }
.menu-toggle { margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ground-10); cursor: pointer; display: grid; place-content: center; gap: 5px; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ground); border-radius: 2px; transition: transform .3s var(--ease); }
.site-nav.is-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-nav.is-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 960px) {
    .menu-toggle { display: none; }
    .site-links {
        position: static; display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 0;
        background: none; border: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none;
    }
    .site-links > a { padding: 8px 14px; border-radius: 999px; font: 500 14.5px var(--f-text); transition: background-color .25s, color .25s; }
    .site-menu-actions { margin: 0 0 0 10px; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--ground-22); gap: 16px; }
}
.nav { position: relative; display: flex; align-items: center; gap: 24px; min-height: 72px; }
.nav-end { margin-left: auto; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 55% at 85% 10%, rgb(229 220 200 / .12), transparent 72%), radial-gradient(35% 45% at 5% 100%, rgb(229 220 200 / .07), transparent 70%); }
.hero-glow-low { background: radial-gradient(45% 60% at 15% 100%, rgb(229 220 200 / .1), transparent 70%); }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid var(--ground-22); background: var(--ground-10); font: 500 12.5px var(--f-mono); color: var(--ground-80); }
.hero-kicker .ph { font-size: 15px; color: var(--ground); }
.hero-sub { font: 400 clamp(1.05rem, 1.7vw, 1.2rem)/1.65 var(--f-bn); color: var(--ground-80); max-width: 32rem; }

/* Hero stage: the message on a phone, feature cards floating around it */
.hero-stage { position: relative; display: grid; place-items: center; padding-top: clamp(28px, 5vw, 64px); }
.phone { position: relative; z-index: 1; }
.phone-screen { display: grid; gap: 20px; align-content: start; }
.phone-status { display: none; }
.float { display: none; }

@media (min-width: 700px) {
    .phone {
        width: 340px; padding: 11px; border-radius: 50px; background: #15241A;
        box-shadow: 0 0 0 1px var(--ground-22), 0 0 0 9px rgb(229 220 200 / .05), 0 60px 120px -40px rgb(0 0 0 / .7);
    }
    .phone-screen {
        position: relative; overflow: hidden; min-height: 560px; padding: 14px 24px 40px; border-radius: 40px;
        background: radial-gradient(90% 60% at 80% 0%, rgb(229 220 200 / .14), transparent 70%), var(--ink);
    }
    .phone-screen::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 110px; height: 4px; margin-left: -55px; border-radius: 4px; background: var(--ground-45); }
    .phone-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font: 600 12px var(--f-mono); color: var(--ground-80); }
    .phone-status .ph-fill { font-size: 14px; }
    .phone-notch { width: 96px; height: 26px; border-radius: 999px; background: #0c150f; }
    .phone .h-display { font-size: 42px; line-height: 1.02; }
    .phone .hero-sub { font-size: 16.5px; }
    .phone .hero-kicker { font-size: 11px; gap: 6px; padding: 5px 11px 5px 8px; }
    .phone-screen { display: flex; flex-direction: column; gap: 20px; }
    .phone-notif { margin-top: auto; display: grid; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--ground); color: var(--ink); box-shadow: 0 16px 32px -16px rgb(0 0 0 / .5); }
    .notif-app { display: flex; align-items: center; gap: 6px; font: 600 12px var(--f-text); color: var(--ink-70); }
    .notif-app .ph-fill { font-size: 15px; color: var(--ink); }
    .notif-app span { margin-left: auto; font-weight: 400; font-family: var(--f-bn); }
    .notif-msg { font: 500 14px/1.4 var(--f-text); }
    .notif-auto { display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px dashed var(--ink-22); font: 600 12.5px/1.35 var(--f-bn); }
}
.phone-notif { display: none; }
@media (min-width: 700px) { .phone-notif { display: grid; } }
@media (min-width: 1100px) {
    .float {
        position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
        padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--ground); color: var(--ink);
        box-shadow: 0 30px 60px -28px rgb(0 0 0 / .6); white-space: nowrap;
    }
    .float div { display: grid; line-height: 1.3; }
    .float strong { font: 600 14.5px var(--f-bn); }
    .float div span { font: 400 12.5px var(--f-bn); color: var(--ink-70); }
    .float-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-10); font-size: 18px; }
    .float .score-chip { font-size: 15px; padding: 4px 9px 2px; margin-left: 6px; }
    .float-num { font: 30px/.9 var(--f-num); }
    .float-a { left: calc(50% - 470px); top: 20%; }
    .float-b { left: calc(50% - 420px); top: 60%; }
    .float-c { right: calc(50% - 480px); top: 30%; }
    .float-d { right: calc(50% - 450px); top: 68%; }
}

/* ---------- The workflow: 5 nodes joined by live wires ---------- */
.flow { position: relative; margin: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 128px); padding: 10px; border-radius: var(--r-panel); background: var(--ground-10); border: 1px solid var(--ground-22); }
.flow-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; padding: 4px 6px 14px; }
.flow-name { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--f-mono); color: var(--ground-80); white-space: nowrap; }
.flow-name .ph { font-size: 17px; color: var(--ground); }
.flow-controls { display: flex; align-items: center; gap: 10px; }
.flow-run { background: var(--ground); color: var(--ink); }
.flow-run:hover { background: var(--ground-hi); }

.run-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ground-10); font: 500 12px var(--f-mono); color: var(--ground-80); white-space: nowrap; }
.run-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ground-45); }
.run-state[data-state="running"]::before { background: var(--ground); animation: blink 1s steps(2, start) infinite; }
.run-state[data-state="done"] { background: var(--ground); color: var(--ink); }
.run-state[data-state="done"]::before { background: var(--ink); }
@keyframes blink { to { visibility: hidden; } }

.nodes { display: grid; }
.node {
    position: relative; background: var(--ground); color: var(--ink); border-radius: var(--r-card);
    padding: 14px; display: grid; gap: 9px; align-content: start;
    transition: opacity .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.node-type { display: flex; align-items: center; gap: 8px; font: 600 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.node-type .ph { font-size: 17px; color: var(--ink); }
.node-type::after { content: ''; margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 5px var(--ink); }
.node-input { width: 100%; resize: vertical; min-height: 118px; padding: 9px 11px; font: 500 13.5px/1.5 var(--f-text); color: var(--ink); background: var(--ground-hi); border: 1.5px solid var(--ink-22); border-radius: var(--r-control); transition: border-color .2s, box-shadow .2s; }
.node-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-10); }
.node-input.is-typing { caret-color: transparent; }
.node-foot { font: 400 12.5px var(--f-bn); color: var(--ink-70); }
.kv { display: grid; gap: 2px; }
.kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--ink-22); }
.kv div:last-child { border-bottom: 0; }
.kv dt { font: 500 12px var(--f-mono); color: var(--ink-70); }
.kv dd { font-weight: 600; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.kv dd.is-empty, .node-big.is-empty { color: var(--ink-45); font-weight: 500; }
.node-score { display: flex; align-items: center; gap: 12px; }
.score-chip { padding: 5px 12px 3px; border-radius: 999px; background: var(--ink); color: var(--ground); font: 20px/1 var(--f-num); letter-spacing: .06em; }
.score-chip[data-tier="WARM"] { background: var(--ink-70); }
.score-chip[data-tier="COLD"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-45); }
.score-num { font: 46px/.85 var(--f-num); font-variant-numeric: tabular-nums; min-width: 2ch; }
.node-note { font: 400 13px/1.45 var(--f-bn); color: var(--ink-70); }
.node-big { font: 700 19px/1.3 var(--f-bn); }
.node-draft { padding: 10px 12px; border-radius: var(--r-control); background: var(--ink-10); font: 400 14px/1.55 var(--f-bn); }

/* Run states: idle (waiting), active (working now), done */
.nodes.is-running .node.is-idle { opacity: .5; }
.node.is-idle [data-out], .node.is-active [data-out], .node.is-idle .node-note, .node.is-active .node-note { opacity: .12; }
.node.is-idle .node-type::after { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-45); }
.node.is-active { box-shadow: 0 0 0 2px var(--ground), 0 0 40px rgb(229 220 200 / .35); transform: translateY(-3px); }
.node.is-active .node-type::after { background: transparent; box-shadow: none; border: 2px solid var(--ink); border-right-color: transparent; animation: spin .6s linear infinite; }
.node.is-done { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: translateY(-3px); } }

/* Wires: vertical on small screens, horizontal on wide ones. A light pulse travels along each. */
.wire { position: relative; justify-self: center; width: 2px; height: 28px; background: var(--ground-45); overflow: hidden; }
.wire span { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--ground) 40%, transparent 60%); transform: translateY(-60%); }
@media (min-width: 1100px) {
    .nodes { grid-template-columns: minmax(0, 1.25fr) 24px minmax(0, 1fr) 24px minmax(0, .8fr) 24px minmax(0, .9fr) 24px minmax(0, 1.25fr); }
    .wire { width: auto; height: 2px; align-self: center; justify-self: stretch; }
    .wire span { background: linear-gradient(90deg, transparent 0%, var(--ground) 40%, transparent 60%); transform: translateX(-60%); }
}

/* ---------- Body sections: numbered eyebrow, big title, generous air ---------- */
.lp-body { position: relative; isolation: isolate; }
/* Fine paper grain + two soft light pools: depth without adding a colour. */
.lp-body::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 30% at 100% 8%, rgb(255 255 255 / .38), transparent 70%),
        radial-gradient(35% 25% at 0% 55%, rgb(255 255 255 / .3), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lp-sec { position: relative; padding-top: var(--sec-y); }
#faq { padding-bottom: var(--sec-y); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-70); }
.eyebrow b { display: grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--gold); font-weight: 600; letter-spacing: .04em; }
.eyebrow::after { content: ''; width: 48px; height: 1px; background: var(--ink-22); }
.eyebrow-light { color: var(--ground-80); }
.eyebrow-light b { background: var(--ground); color: var(--ink); }
.eyebrow-light::after { background: var(--ground-22); }
@media (min-width: 1024px) {
    .lp-sec .sec-head { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 64px; align-items: end; }
    .lp-sec .sec-head .eyebrow { grid-column: 1 / -1; }
    .lp-sec .sec-head .sec-sub { padding-bottom: 8px; max-width: 30rem; }
}

/* "Works with" band under the hero */
.works { border-bottom: 1px solid var(--ink-10); background: rgb(244 239 228 / .55); }
.works-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 22px; padding-bottom: 22px; }
.works-label { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.works-list { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.works-list li { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--f-display); letter-spacing: -.01em; color: var(--ink-70); }
.works-list .ph-fill { font-size: 20px; color: var(--ink); }

/* ---------- Sound familiar? Before → With AutoBiz AI ---------- */
.ps-head { display: none; }
.ps-list { display: grid; gap: 20px; }
.ps { display: grid; gap: 8px; }
.ps-pain { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--ink-10); background: rgb(244 239 228 / .6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); font: 400 16px/1.5 var(--f-bn); color: var(--ink-70); }
.ps-pain .ph { font-size: 22px; color: var(--ink-45); flex: none; }
.ps-arrow { display: grid; place-items: center; justify-self: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-10); font-size: 16px; color: var(--ink-70); transform: rotate(90deg); }
.ps-fix { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px 12px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(160deg, #2E4B37, var(--ink) 55%, var(--ink-deep)); color: var(--ground); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 18px 36px -24px rgb(30 51 38 / .55); }
.ps-fix .ph-fill { font-size: 22px; color: var(--gold); }
.ps-fix p { font: 500 16px/1.5 var(--f-bn); }
.ps-tag { grid-column: 2; justify-self: start; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ground-22); background: var(--ground-10); font: 500 11px/1.4 var(--f-mono); color: var(--ground-80); white-space: nowrap; }
@media (min-width: 900px) {
    .ps-head { display: grid; grid-template-columns: 1fr 48px 1.2fr; margin-bottom: 12px; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
    .ps-head span:last-child { grid-column: 3; }
    .ps { grid-template-columns: 1fr 48px 1.2fr; gap: 0; align-items: stretch; }
    .ps-arrow { align-self: center; transform: none; }
    .ps-fix { grid-template-columns: 22px 1fr auto; }
    .ps-tag { grid-column: auto; }
}

/* ---------- Features bento ---------- */
.bento { display: grid; gap: 24px; }
.tile { border-radius: var(--r-card); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 14px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile-title { font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.2 var(--f-display); letter-spacing: -.025em; }
.tile-sub { font-family: var(--f-bn); color: var(--ink-70); margin-top: -8px; }
.tile-ink { background: var(--ink); color: var(--ground); position: relative; overflow: hidden; }
.tile-ink::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 70% at 100% 0%, rgb(229 220 200 / .1), transparent 70%); }
.tile-ink .tile-sub { color: var(--ground-80); }
.tile-body { position: relative; display: grid; gap: 18px; }
.tile-ink { box-shadow: 0 30px 60px -36px rgb(30 51 38 / .6); }
.feat { display: grid; gap: 14px; margin-top: 2px; }
.feat li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.feat .ph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 19px; background: var(--ink-10); }
.tile-ink .feat .ph { background: var(--ground-10); }
.feat strong { display: block; font-weight: 600; font-size: 15.5px; }
.feat span { display: block; font: 400 14px/1.55 var(--f-bn); color: var(--ink-70); }
.tile-ink .feat span { color: var(--ground-80); }
.queue { position: relative; display: grid; gap: 10px; }
.queue li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-control); background: var(--ground-10); border: 1px solid var(--ground-10); }
.q-name { font-weight: 600; }
.q-svc { font: 500 13px var(--f-mono); color: var(--ground-80); }
.q-tag { font: 16px/1 var(--f-num); letter-spacing: .06em; padding: 5px 10px 3px; border-radius: 999px; text-transform: uppercase; }
.q-hot { background: var(--ground); color: var(--ink); }
.q-warm { background: var(--ground-45); color: var(--ink); }
.q-cold { box-shadow: inset 0 0 0 1.5px var(--ground-45); }
@media (min-width: 900px) {
    .bento { grid-template-columns: 1fr 1fr; gap: 32px; }
    .tile-wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: center; }
}

/* ---------- Automations panel ---------- */
.auto-panel { position: relative; overflow: hidden; border-radius: var(--r-box); padding: clamp(24px, 4vw, 52px); display: grid; gap: 36px; }
.auto-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 0% 0%, rgb(229 220 200 / .12), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgb(229 220 200 / .07), transparent 70%); }
.auto-head { position: relative; display: grid; gap: 14px; align-content: start; }
.rules { position: relative; display: grid; gap: 16px; }
.rule { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 16px; background: var(--ground-10); border: 1px solid var(--ground-10); transition: border-color .3s, background-color .3s; }
.rule:hover { border-color: var(--ground-22); background: rgb(229 220 200 / .11); }
.rule-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ground-10); font-size: 18px; align-self: start; }
.rule-body { display: grid; gap: 6px; min-width: 0; }
.rule-name { font: 600 15.5px/1.3 var(--f-display); letter-spacing: -.01em; margin-bottom: 2px; }
.rule-line { display: flex; align-items: baseline; gap: 10px; font: 400 14px/1.5 var(--f-bn); color: var(--ground-80); }
.mono-tag { flex: none; width: 46px; text-align: center; padding: 2px 0; border-radius: 6px; background: var(--ground-10); font: 600 10.5px/1.6 var(--f-mono); letter-spacing: .08em; color: var(--ground); }
.switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--ground); flex: none; transition: background-color .35s var(--ease); }
.switch span { position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: left .45s var(--ease), background-color .35s; }
.js .rule:not(.is-on) .switch { background: var(--ground-22); }
.js .rule:not(.is-on) .switch span { left: 3px; background: var(--ground-45); }
@media (min-width: 1100px) {
    .auto-panel { grid-template-columns: .8fr 1.2fr; gap: 56px; }
    .auto-head { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* ---------- Pricing ---------- */
.pricing { display: grid; border-radius: var(--r-box); overflow: hidden; background: var(--ground-hi); box-shadow: 0 0 0 1px var(--ink-10), 0 40px 80px -48px rgb(30 51 38 / .45); }
.pricing-main, .pricing-side { padding: clamp(22px, 3.6vw, 44px); }
.pricing-main { display: grid; gap: 22px; justify-items: start; align-content: center; }
.pricing-sub { font: 400 clamp(1.05rem, 1.8vw, 1.2rem)/1.65 var(--f-bn); color: var(--ink-70); max-width: 26rem; }

/* Three steps joined by a line, like the hero workflow */
.stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 440px; margin: 6px 0 10px; }
.stepper::before { content: ''; position: absolute; top: 14px; left: 14px; right: calc((100% - 24px) / 3 - 14px); height: 2px; background: var(--ink-22); }
.stepper li { position: relative; display: grid; gap: 8px; justify-items: start; font-weight: 600; font-size: 14px; line-height: 1.3; }
.stepper span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 15px/1 var(--f-num); padding-top: 2px; box-shadow: 0 0 0 5px var(--ground-hi); }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.text-link { font-weight: 600; text-underline-offset: 5px; text-decoration-color: var(--ink-45); }
.text-link:hover { text-decoration-color: currentColor; }

.pricing-side { position: relative; background: var(--ink); color: var(--ground); display: grid; gap: 4px; align-content: center; overflow: hidden; }
.pricing-side::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 95% 0%, rgb(229 220 200 / .14), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgb(229 220 200 / .06), transparent 70%); }
.fee-label { position: relative; font: 500 13px var(--f-mono); color: var(--ground-80); }
.price { position: relative; font: clamp(54px, 5.6vw, 72px)/.85 var(--f-num); display: flex; align-items: flex-start; margin-top: 8px; letter-spacing: 0; }
.price-cur { font: 700 .34em/1 var(--f-bn); margin: .12em 6px 0 0; color: var(--gold); }
.price-per { align-self: flex-end; margin: 0 0 .12em 8px; font: 500 .22em/1 var(--f-bn); color: var(--ground-80); }
.price-note { position: relative; justify-self: start; margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--ground); color: var(--ink); font: 600 12.5px var(--f-text); }
.price-facts { position: relative; display: grid; margin-top: 20px; padding: 2px 16px; border-radius: var(--r-card); background: var(--ground-10); border: 1px solid var(--ground-22); }
.price-facts div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--ground-22); }
.price-facts div:last-child { border-bottom: 0; }
.price-facts dt { font: 500 12.5px var(--f-mono); color: var(--ground-80); }
.price-facts dd { display: flex; gap: 6px; font: 600 15px var(--f-bn); text-align: right; }
.op { padding: 2px 10px; border-radius: 999px; background: var(--ground-10); border: 1px solid var(--ground-22); font: 600 13px var(--f-text); }
@media (min-width: 1100px) { .pricing { grid-template-columns: 1.15fr 1fr; } }

/* ---------- FAQ ---------- */
.qa { border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7); transition: background-color .3s, box-shadow .4s var(--ease), border-color .3s; }
.qa:hover { border-color: var(--ink-22); }
.qa.is-open { background: #fff9ee; box-shadow: var(--shadow); border-color: transparent; }
.qa-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); font: 600 clamp(1rem, 1.4vw, 1.08rem)/1.35 var(--f-display); letter-spacing: -.015em; }
.qa-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-10); flex: none; font-size: 16px; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.qa.is-open .qa-icon { transform: rotate(45deg); background: var(--ink); color: var(--ground); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 20px 18px; font: 400 15px/1.65 var(--f-bn); color: var(--ink-70); }

/* ---------- Closer, login, footer ---------- */
.closer { position: relative; overflow: hidden; padding-top: calc(var(--sec-y) * 1.1); }
.closer-grid { position: relative; display: grid; gap: 40px; align-items: center; }
.closer-copy { display: grid; gap: 20px; justify-items: start; align-content: center; }
.closer-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 13ch; }
.assure { display: grid; gap: 12px; margin-top: 12px; }
.assure li { display: flex; align-items: center; gap: 12px; font: 400 16px var(--f-bn); color: var(--ground-80); }
.assure .ph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ground-10); border: 1px solid var(--ground-22); font-size: 16px; color: var(--ground); flex: none; }

/* Access panel: Subscribe (new) and Log in (existing) as two paths in one card */
.access { display: grid; gap: 18px; padding: clamp(20px, 2.8vw, 30px); border-radius: var(--r-box); background: var(--ground-10); border: 1px solid var(--ground-22); }
.access-block { display: grid; gap: 8px; }
.access-title { font: 700 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; }
.access-sub { font: 400 15px/1.6 var(--f-bn); color: var(--ground-80); margin-bottom: 8px; }
.access-or { display: flex; align-items: center; gap: 14px; font: 500 12px var(--f-mono); color: var(--ground-45); text-transform: uppercase; letter-spacing: .1em; }
.access-or::before, .access-or::after { content: ''; flex: 1; height: 1px; background: var(--ground-22); }
.login-form { display: grid; gap: 8px; }
.login-row { display: flex; flex-wrap: wrap; gap: 10px; }
.login-row input { flex: 1 1 180px; }
.btn-outline-light { background: transparent; color: var(--ground); border-color: var(--ground-45); }
.btn-outline-light:hover { border-color: var(--ground); background: var(--ground-10); }
@media (min-width: 960px) { .closer-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }

/* Footer: brand + 3 columns, then a bottom bar. Rules sit inside the gutters. */
.footer { position: relative; margin-top: clamp(96px, 12vw, 152px); padding-top: 64px; padding-bottom: 40px; }
.footer::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--ground-22); }
.footer-grid { display: grid; gap: 32px 24px; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; max-width: 22rem; }
.footer-brand p { font: 400 15px/1.6 var(--f-bn); color: var(--ground-80); }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-head { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ground-45); margin-bottom: 4px; }
.footer-col a { font-size: 15px; font-weight: 500; color: var(--ground-80); text-decoration: none; justify-self: start; transition: color .2s; }
.footer-col a:hover { color: var(--ground); }
.footer-col p { font: 400 14px/1.5 var(--f-bn); color: var(--ground-80); }
.footer-col:last-child { grid-column: 1 / -1; }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; font-size: 13px; color: var(--ground-45); }
.footer-bottom::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ground-10); }
@media (min-width: 900px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; }
    .footer-brand, .footer-col:last-child { grid-column: auto; }
}

/* ---------- Forms (label above input) ---------- */
.field { display: grid; gap: 8px; margin: 20px 0 10px; }
.field-label { font-size: 14px; font-weight: 600; }
input[type="tel"], input[type="text"] { width: 100%; min-height: 52px; padding: 12px 16px; font: 500 18px var(--f-text); color: var(--ink); background: var(--ground-hi); border: 1.5px solid var(--ink-45); border-radius: var(--r-control); transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: var(--ink-45); }
input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-22); }
.on-ink input { border-color: transparent; }
.on-ink input:focus { box-shadow: 0 0 0 3px var(--ground-45); }
.otp-input { font: 40px/1 var(--f-num) !important; letter-spacing: .45em; text-align: center; padding-left: calc(16px + .22em) !important; }
.form-error { margin: 6px 0 10px; padding: 8px 12px; border-radius: var(--r-control); background: var(--ink-10); font-weight: 600; font-size: 15px; }
.form-error.is-ok { font-weight: 500; }
.on-ink .form-error { background: var(--ground); color: var(--ink); }
.fine { font-size: 13px; color: var(--ink-70); margin-top: 14px; }

/* ---------- Modal (bottom sheet on phones) ---------- */
.modal { width: min(460px, calc(100vw - 32px)); max-height: 92vh; border: 0; border-radius: var(--r-box); padding: 28px 24px 24px; background: var(--ground); color: var(--ink); }
.modal[open] { animation: modal-in .45s var(--ease); }
.modal::backdrop { background: rgb(20 34 25 / .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; color: var(--ink); background: var(--ink-10); border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s, transform .3s var(--ease); }
.modal-close:hover { background: var(--ink-22); transform: rotate(90deg); }
.steps-bar { display: flex; gap: 6px; width: 72px; margin-bottom: 16px; }
.steps-bar span { flex: 1; height: 4px; border-radius: 4px; background: var(--ink-10); }
.steps-bar span.is-on { background: var(--ink); }
.modal-title { font: 700 1.75rem/1.15 var(--f-display); letter-spacing: -.025em; padding-right: 44px; }
.modal-sub { font-family: var(--f-bn); color: var(--ink-70); margin-top: 8px; }
.modal-sub strong { color: var(--ink); font-family: var(--f-text); }
.modal-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (max-width: 599px) { .modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-box) var(--r-box) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* ---------- App shell (signed-in pages) ---------- */
.app-body { padding-bottom: 88px; }
.app-bar { position: sticky; top: 0; z-index: 40; box-shadow: 0 10px 30px -20px rgb(0 0 0 / .5); }
.app-bar-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.app-nav { display: none; gap: 4px; margin-left: 12px; }
.app-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ground-80); transition: background-color .2s, color .2s; }
.app-nav a:hover, .app-nav a.is-current { background: var(--ground-10); color: var(--ground); }
.app-nav .ph { font-size: 18px; }
.app-new { display: none; margin-left: auto; border-radius: 999px; }
.app-logout { margin-left: auto; }
.app-logout span { display: none; }
.app-logout .ph { font-size: 20px; }
.app-page { padding-top: 28px; padding-bottom: 64px; }
@media (min-width: 760px) {
    .app-body { padding-bottom: 0; }
    .app-nav, .app-new { display: inline-flex; }
    .app-logout { margin-left: 0; }
}
.tabbar { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgb(30 51 38 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -16px rgb(0 0 0 / .6); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px; font-size: 11.5px; font-weight: 600; color: var(--ground-45); text-decoration: none; }
.tabbar a .ph { font-size: 22px; }
.tabbar a.is-current { color: var(--ground); }
.tabbar .tab-new { width: 52px; height: 52px; place-content: center; border-radius: 50%; background: var(--ground); color: var(--ink); margin-top: -22px; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6); }
.tabbar .tab-new .ph { font-size: 24px; }
@media (min-width: 760px) { .tabbar { display: none; } }
@media (max-width: 759px) { .app-body .demo-badge { bottom: 84px; } }
.toast { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px 16px; border-radius: var(--r-control); background: var(--ink); color: var(--ground); font: 500 15px/1.5 var(--f-bn); }
.toast .ph { font-size: 20px; flex: none; }
.toast-err { background: var(--ground-hi); color: var(--ink); border-left: 4px solid var(--ink); }

/* Shared app pieces */
.card { background: var(--ground-hi); border: 1px solid var(--ink-10); border-radius: var(--r-card); padding: clamp(18px, 3vw, 28px); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.page-sub { font: 400 15.5px/1.6 var(--f-bn); color: var(--ink-70); margin-top: 6px; max-width: 36rem; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink-70); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.section-label { margin: 36px 0 12px; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.text-link { font-size: 14px; }
.avatar-sm, .avatar-lg { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--ink); color: var(--ground); font: 700 15px var(--f-display); }
.avatar-sm { width: 38px; height: 38px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.pill-ok { background: var(--ground); color: var(--ink); }
.empty-note { font: 400 15px/1.6 var(--f-bn); color: var(--ink-70); padding: 8px 0; }

/* Dashboard */
.hello { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.hello-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 14px var(--f-mono); color: var(--ink-70); }
.hello-meta .pill-ok { background: var(--ink); color: var(--ground); }
.dash-grid { display: grid; gap: 16px; }
.stat-card, .recent-card { background: var(--ground-hi); border: 1px solid var(--ink-10); border-radius: var(--r-card); padding: 20px; }
.stat-card { display: grid; gap: 4px; align-content: start; }
.stat-label, .card-title { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.stat-num { font: 72px/.9 var(--f-num); margin: 6px 0 8px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mini-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-control); text-decoration: none; transition: background-color .2s; }
.mini-row:hover { background: var(--ink-10); }
.mini-row-main { display: grid; line-height: 1.35; min-width: 0; }
.mini-row-main strong { font: 600 15px var(--f-bn); }
.mini-row-main span, .mini-row-time { font: 400 13px var(--f-bn); color: var(--ink-70); }
@media (min-width: 800px) { .dash-grid { grid-template-columns: 260px 1fr; } }
.modules { display: grid; gap: 12px; }
.module { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--ink-22); border-radius: var(--r-card); height: 100%; }
.module-live { text-decoration: none; background: var(--ink); color: var(--ground); border-color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.module-live:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.module-live .module-icon { background: var(--ground-10); }
.module-live .module-text { color: var(--ground-80); }
.module-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--ink-10); font-size: 22px; }
.module-name { font: 600 16.5px/1.3 var(--f-text); }
.module-text { font: 400 14px/1.5 var(--f-bn); color: var(--ink-70); }
@media (min-width: 768px) { .modules { grid-template-columns: 1fr 1fr; } }
.danger-zone { margin-top: 40px; padding: 20px 22px; border-radius: var(--r-card); background: var(--ground-soft); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.danger-title { font: 700 1.2rem/1.3 var(--f-display); letter-spacing: -.02em; }
/* Destructive action: red and bold, never confused with a normal button. */
.btn-danger { background: #B3261E; color: #fff; font-weight: 700; border-color: #B3261E; }
.btn-danger:hover { background: #8C1D18; border-color: #8C1D18; box-shadow: 0 10px 24px -12px rgb(140 29 24 / .6); transform: translateY(-1px); }
.btn-danger:focus-visible { outline: 2px solid #B3261E; outline-offset: 3px; }
.danger-zone p { font: 400 15px/1.6 var(--f-bn); color: var(--ink-70); }

/* Lead list */
.lead-filters { display: grid; gap: 12px; margin-bottom: 20px; }
.lead-filters .sort { justify-self: start; }
.search { position: relative; display: block; max-width: 420px; }
.search .ph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-70); }
.search input[type="search"] { padding-left: 42px; font-size: 16px; min-height: 46px; border-radius: 999px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ink-22); font: 500 14px var(--f-bn); text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.chip span { font: 500 12px var(--f-mono); color: var(--ink-70); }
.chip:hover { border-color: var(--ink-45); }
.chip.is-on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip.is-on span { color: var(--ground-80); }
.lead-list { display: grid; gap: 8px; }
.lead-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av main status" "av facts time"; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); text-decoration: none; transition: border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.lead-row:hover { border-color: var(--ink-22); transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgb(30 51 38 / .45); }
.lead-row .avatar-sm { grid-area: av; }
.lead-main { grid-area: main; display: grid; min-width: 0; line-height: 1.35; }
.lead-main strong { font: 600 16px var(--f-bn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-sub { font: 400 13.5px var(--f-bn); color: var(--ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-sep::before { content: "·"; margin: 0 6px; }
.lead-facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fact { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ink-10); font: 500 12.5px var(--f-bn); }
.fact-urgent { background: var(--ink); color: var(--ground); }
.status { grid-area: status; justify-self: end; padding: 3px 10px; border-radius: 999px; font: 600 12.5px var(--f-bn); white-space: nowrap; background: var(--ink-10); }
.status-won { background: var(--ink); color: var(--ground); }
.status-negotiating { background: var(--ink-22); }
.status-lost { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-22); color: var(--ink-70); }
.lead-time { grid-area: time; justify-self: end; font: 400 12.5px var(--f-bn); color: var(--ink-70); white-space: nowrap; }
@media (min-width: 900px) {
    .lead-row { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) 150px 110px; grid-template-areas: "av main facts status time"; }
}
.empty { display: grid; justify-items: center; gap: 10px; padding: clamp(40px, 8vw, 72px) 20px; text-align: center; border: 1.5px dashed var(--ink-22); border-radius: var(--r-box); }
.empty .ph { font-size: 44px; color: var(--ink-45); }
.empty h2 { font: 700 1.4rem/1.2 var(--f-display); letter-spacing: -.02em; }
.empty p { font: 400 15.5px/1.6 var(--f-bn); color: var(--ink-70); max-width: 30rem; margin-bottom: 8px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
.pager-info { font: 500 14px var(--f-mono); color: var(--ink-70); }
.btn.is-off { opacity: .4; pointer-events: none; }

/* Forms in the app */
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--ink-10); }
.seg button, .seg label span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-70); font: 600 14.5px var(--f-text); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg button[aria-selected="true"], .seg input:checked + span { background: var(--ground-hi); color: var(--ink); box-shadow: 0 2px 8px -3px rgb(30 51 38 / .35); }
.seg label { position: relative; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg-sm { margin: 0; }
.seg-sm label span { padding: 7px 12px; font-size: 13.5px; }
.capture { display: grid; gap: 18px; }
.field-grid { display: grid; gap: 14px 16px; }
@media (min-width: 700px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.capture .field, .card .field { margin: 0; }
.field-label small { font: 400 12.5px var(--f-bn); color: var(--ink-70); margin-left: 6px; }
input[type="number"], input[type="search"], select, textarea {
    width: 100%; min-height: 48px; padding: 11px 14px; font: 500 16px/1.5 var(--f-text); color: var(--ink);
    background: var(--ground-hi); border: 1.5px solid var(--ink-22); border-radius: var(--r-control); transition: border-color .2s, box-shadow .2s;
}
.card input[type="text"], .card input[type="tel"], .card input[type="number"] { font-size: 16px; min-height: 48px; border-color: var(--ink-22); background: #fbf8f1; }
textarea { resize: vertical; font-family: var(--f-text); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-10); }
input.is-filled, select.is-filled { border-color: var(--ink); background-color: #fbf8f1; }
.field-error { font: 600 13.5px var(--f-bn); color: #8a2c1d; }
.detected { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--ground-soft); border: 1px dashed var(--ink-22); }
.detected-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.detected-head small { font: 400 13px var(--f-bn); letter-spacing: 0; text-transform: none; color: var(--ink-70); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-actions .fine { margin: 0; }

/* Lead detail */
.lead-layout { display: grid; gap: 20px; align-items: start; }
.lead-card { display: grid; gap: 18px; }
.lead-id { display: flex; align-items: center; gap: 14px; }
.lead-name { font: 700 1.5rem/1.2 var(--f-bn); }
.lead-since { font: 400 13.5px var(--f-bn); color: var(--ink-70); }
.contact-row { display: flex; gap: 8px; }
.contact-row .btn { flex: 1; border-radius: 999px; }
.lead-dl { display: grid; margin: 0; }
.lead-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--ink-22); }
.lead-dl div:last-child { border-bottom: 0; }
.lead-dl dt { font: 500 12.5px var(--f-mono); color: var(--ink-70); }
.lead-dl dd { font: 600 15px var(--f-bn); text-align: right; }
.edit-box summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
.edit-box summary::-webkit-details-marker { display: none; }
.edit-box form { display: grid; gap: 14px; margin-top: 14px; }
.edit-box .field-grid { grid-template-columns: 1fr; }
.link-danger { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; background: none; border: 0; cursor: pointer; font: 600 14px var(--f-text); color: #8a2c1d; }
.add-event { display: grid; gap: 12px; }
.add-event .btn, .add-event .seg { justify-self: start; }
.timeline { position: relative; display: grid; gap: 14px; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--ink-10); }
.tl { position: relative; }
.tl-dot { position: absolute; left: -26px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 2px var(--ink-45); }
.tl-message .tl-dot { background: var(--ink); box-shadow: none; }
.tl-note .tl-dot { box-shadow: inset 0 0 0 5px var(--ink); }
.tl-body { padding: 12px 16px; border-radius: 16px; background: var(--ground-hi); border: 1px solid var(--ink-10); }
.tl-message .tl-body { border-left: 3px solid var(--ink); }
.tl-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13px; }
.tl-head strong { font: 600 13px var(--f-bn); }
.tl-head time { font: 400 12.5px var(--f-bn); color: var(--ink-70); }
.tl-text { font: 400 15px/1.6 var(--f-bn); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-pre { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 960px) {
    .lead-layout { grid-template-columns: 340px 1fr; gap: 28px; }
    .lead-card { position: sticky; top: 88px; }
}

/* ---------- Scoring + Today ---------- */
.tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font: 600 12.5px/1.2 var(--f-text); white-space: nowrap; }
.tier b { display: grid; place-items: center; min-width: 26px; padding: 2px 6px; border-radius: 999px; font: 13px/1 var(--f-num); letter-spacing: .03em; }
.tier-hot { background: var(--gold); color: #3b2506; }
.tier-hot b { background: #3b2506; color: var(--gold); }
.tier-warm { background: var(--ink-22); color: var(--ink); }
.tier-warm b { background: var(--ink); color: var(--ground); }
.tier-cold { background: transparent; color: var(--ink-70); box-shadow: inset 0 0 0 1px var(--ink-22); }
.tier-cold b { background: var(--ink-10); color: var(--ink-70); }

.sort { display: flex; align-items: center; gap: 4px; font-size: 13.5px; }
.sort span { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); margin-right: 6px; }
.sort a { padding: 4px 10px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink-70); }
.sort a.is-on { background: var(--ink-10); color: var(--ink); }

.today-date { font: 500 13px var(--f-bn); color: var(--ink-70); margin-bottom: 4px; }
.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.today-stats p { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--ground-hi); border: 1px solid var(--ink-10); }
.today-stats b { font: 40px/.9 var(--f-num); }
.today-stats span { font: 400 13px var(--f-bn); color: var(--ink-70); }
.today-stats .is-alert { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.today-stats .is-alert span { color: var(--ground-80); }

.due-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .due-list { grid-template-columns: 1fr 1fr; } }
.due { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); border-left: 4px solid var(--ink-22); }
.due-hot { border-left-color: var(--gold); }
.due-warm { border-left-color: var(--ink-45); }
.due.is-overdue .due-when { color: #8a2c1d; }
.due-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-decoration: none; }
.due-who { display: grid; min-width: 0; line-height: 1.35; }
.due-who strong { font: 600 16px var(--f-bn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-who span { font: 400 13.5px var(--f-bn); color: var(--ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-when { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--f-bn); color: var(--ink-70); }
.due-next { display: flex; gap: 8px; align-items: flex-start; font: 500 15px/1.5 var(--f-bn); }
.due-next .ph, .score-next .ph { font-size: 18px; margin-top: 3px; flex: none; }
.due-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.due-actions .btn { border-radius: 999px; }
@media (max-width: 420px) {
    .due-actions { gap: 6px; }
    .due-actions .btn-sm { padding: 7px 12px; font-size: 13px; gap: 6px; }
    .due-actions .icon-btn { width: 36px; height: 36px; }
}
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink-22); font-size: 18px; text-decoration: none; transition: border-color .2s, background-color .2s; }
.icon-btn:hover { border-color: var(--ink); background: var(--ink-10); }
.today-peek { display: grid; gap: 12px; margin-bottom: 24px; }
.upcoming { display: grid; gap: 2px; padding: 8px 16px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); }

/* Score panel on the lead page */
.score-panel { display: grid; gap: 14px; margin-bottom: 20px; padding: clamp(18px, 3vw, 26px); border-radius: var(--r-card); background: var(--ink); color: var(--ground); position: relative; overflow: hidden; }
.score-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgb(229 220 200 / .1), transparent 70%); }
.score-panel > * { position: relative; }
.score-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.score-kicker { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ground-80); }
.score-big { font: 64px/.85 var(--f-num); margin-top: 6px; }
.score-big span { font-size: 22px; color: var(--ground-45); margin-left: 2px; }
.score-panel .tier-warm { background: var(--ground-22); color: var(--ground); }
.score-panel .tier-warm b { background: var(--ground); color: var(--ink); }
.score-panel .tier-cold { color: var(--ground-80); box-shadow: inset 0 0 0 1px var(--ground-45); }
.score-panel .tier-cold b { background: var(--ground-10); color: var(--ground-80); }
.score-meter { height: 6px; border-radius: 6px; background: var(--ground-10); overflow: hidden; }
.score-meter span { display: block; height: 100%; border-radius: 6px; background: var(--ground); transition: width .8s var(--ease); }
.score-hot .score-meter span { background: var(--gold); }
.score-next { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--ground-10); font: 600 15.5px/1.5 var(--f-bn); }
.score-reasons { display: grid; gap: 2px; }
.score-reasons li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--ground-22); font: 400 14.5px var(--f-bn); color: var(--ground-80); }
.score-reasons li:last-child { border-bottom: 0; }
.score-reasons b { font: 600 13px var(--f-mono); color: var(--ground); }
.score-reasons .is-minus b { color: #f2a48f; }
.followup-box { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ground-22); }
.followup-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 14.5px var(--f-bn); }
.followup-count { color: var(--ground-80); font-size: 13px; }
.followup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.followup-actions .btn-primary { background: var(--ground); color: var(--ink); border-radius: 999px; }
.followup-date { display: flex; gap: 6px; }
.followup-date input[type="date"] { min-height: 38px; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--ground-22); background: var(--ground-10); color: var(--ground); font: 500 14px var(--f-text); color-scheme: dark; }
.followup-date .btn-outline { color: var(--ground); border-color: var(--ground-45); border-radius: 999px; }
.score-panel .field-error { color: #f2a48f; }

/* ---------- AI Section ---------- */
/* The one place with a gradient: the radiant input border (reference 02), tuned to pine / sage / gold / putty. */
@property --rotation { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ai-head { align-items: center; }
.ai-meter { display: grid; gap: 8px; min-width: 210px; padding: 12px 16px; border-radius: var(--r-card); background: var(--ink); color: var(--ground); }
.ai-meter-top { display: flex; align-items: center; gap: 8px; font: 500 13px var(--f-bn); color: var(--ground-80); }
.ai-meter-top b { font: 400 22px/1 var(--f-num); letter-spacing: .02em; color: var(--ground); }
.ai-meter-top .ph-sparkle { color: var(--gold); font-size: 16px; }
.ai-meter-bar { height: 4px; border-radius: 99px; background: var(--ground-10); overflow: hidden; }
.ai-meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .6s var(--ease); }
.ai-meter.is-off { background: transparent; color: var(--ink); border: 1.5px dashed var(--ink-45); }
.ai-meter.is-off .ai-meter-top { color: var(--ink); font-weight: 600; }
.ai-meter-note { font: 400 13px var(--f-bn); color: var(--ink-70); }

.ai-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .ai-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; } }
.ai-main { min-width: 0; }
.ai-form { display: grid; gap: 16px; }
.ai-form[hidden], .ai-results[hidden] { display: none; }
.ai-for { margin: 0; max-width: 460px; }
.ai-for small, .field-label small { font-weight: 400; color: var(--ink-70); margin-left: 6px; font-family: var(--f-bn); }

.radiant {
    --border: 2px;
    --gradient: conic-gradient(from var(--rotation) at 50% 50%, #EBA83F 0%, #7FA886 22%, #27412F 45%, #C9D8B6 62%, #EBA83F 80%, #F4EFE4 90%, #EBA83F 100%);
    position: relative; border-radius: var(--r-box); background: var(--ground-hi);
    transition: box-shadow .4s var(--ease);
}
.radiant::before { content: ""; position: absolute; inset: calc(var(--border) * -1); z-index: -1; border-radius: inherit; background: var(--gradient); filter: blur(10px); opacity: .35; transition: opacity .4s; }
.radiant-border { position: absolute; inset: 0; border-radius: inherit; padding: var(--border); background: var(--gradient); pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.radiant:focus-within::before { opacity: .6; }
.radiant textarea { display: block; width: 100%; min-height: 0; max-height: 50vh; padding: 20px 22px 8px; border: 0; background: transparent; resize: none; box-shadow: none; font: 400 17px/1.6 var(--f-bn); color: var(--ink); }
.radiant textarea:focus { outline: none; box-shadow: none; }
.radiant-slim textarea { padding-top: 16px; font-size: 16px; }
.radiant-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px 16px; }
.radiant-hint { margin-right: auto; font: 500 12px var(--f-mono); color: var(--ink-45); }
.radiant-hint kbd { font: inherit; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--ink-22); }
@media (hover: none) { .radiant-hint { visibility: hidden; } }
.radiant-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink-10); color: var(--ink); font-size: 20px; cursor: pointer; transition: background-color .2s, transform .2s; }
.radiant-icon:hover { background: var(--ink-22); }
.radiant-icon.is-on { background: var(--ink); color: var(--gold); }

/* Generate button (reference 04): ink pill, gold star, letters swap to "Generating" while busy. */
.gen-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ground); font: 600 15.5px var(--f-text); cursor: pointer; white-space: nowrap; transition: background-color .2s, transform .2s var(--ease), box-shadow .3s; }
.gen-btn:hover { background: var(--ink-deep); box-shadow: 0 12px 26px -12px rgb(30 51 38 / .7); transform: translateY(-1px); }
.gen-btn:active { transform: translateY(1px) scale(.98); }
.gen-btn:disabled { cursor: progress; }
.gen-star { color: var(--gold); font-size: 18px; }
.gen-text { display: inline-grid; overflow: hidden; line-height: 1.3; }
.gen-row { grid-area: 1 / 1; display: inline-flex; }
.gen-row span { display: inline-block; white-space: pre; transition: transform .45s var(--ease), opacity .3s; }
.gen-row-busy span { transform: translateY(110%); opacity: 0; }
.gen-btn.is-busy .gen-row-idle span { transform: translateY(-110%); opacity: 0; }
.gen-btn.is-busy .gen-row-busy span { transform: none; opacity: 1; }

.purpose { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ink-22); font: 500 14.5px var(--f-bn); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip-radio span:hover { border-color: var(--ink-45); }
.chip-radio input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.ai-results { margin-top: 12px; }
.results-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.results-head .section-label { margin: 0; }
.src { padding: 2px 10px; border-radius: 999px; font: 600 11.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.src-ai { background: var(--ink); color: var(--gold); }
.src-rules { background: var(--ink-10); color: var(--ink-70); }
.results-notice { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; font: 400 14.5px/1.55 var(--f-bn); color: var(--ink-70); }
.results-notice .ph { margin-top: 3px; }
.drafts { display: grid; gap: 12px; }
.draft { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); }
.draft-tone { font: 500 11.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.draft-text { min-height: 0; padding: 0; border: 0; background: transparent; resize: none; font: 400 16px/1.65 var(--f-bn); }
.draft-text:focus { box-shadow: none; outline: 2px dashed var(--ink-22); outline-offset: 6px; border-radius: 4px; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.draft-actions .btn { border-radius: 999px; }
.draft-skel { height: 138px; border-radius: var(--r-card); background: linear-gradient(100deg, var(--ink-10) 30%, var(--ground-hi) 50%, var(--ink-10) 70%) 0 0 / 300% 100%; }

.ai-side { display: grid; gap: 16px; }
.week-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 18px; }
.week-stats div { padding: 12px 14px; border-radius: var(--r-control); background: var(--ink-10); }
.week-stats dt { font: 400 13px var(--f-bn); color: var(--ink-70); }
.week-stats dd { font: 400 30px/1.1 var(--f-num); letter-spacing: .02em; }
.tip { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ink-10); }
.tip-head { display: flex; align-items: center; gap: 8px; font: 600 14px var(--f-text); }
.tip-head .ph-fill { color: var(--gold); font-size: 18px; }
.tip-text { font: 400 15px/1.6 var(--f-bn); }
.tip-btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: underline; }
.safe-list { display: grid; gap: 12px; margin-top: 14px; }
.safe-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 400 14.5px/1.55 var(--f-bn); color: var(--ink-70); }
.safe-list .ph { font-size: 20px; color: var(--ink); margin-top: 1px; }

/* Lead page: AI shortcuts and the AI check line in the score panel */
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-links .btn { flex: 1; border-radius: 999px; }
.ai-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-control); background: var(--ink-10); font: 400 14.5px/1.55 var(--f-bn); }
.ai-check .ph-fill { color: var(--gold); font-size: 18px; margin-top: 2px; flex: none; }
.ai-check b { font-family: var(--f-text); }

@media (prefers-reduced-motion: no-preference) {
    .radiant { animation: rotate-gradient 6s linear infinite; }
    .gen-btn.is-busy .gen-star { animation: twinkle 1s ease-in-out infinite; }
    .draft-skel { animation: shimmer 1.4s linear infinite; }
    .draft.is-new { animation: rise .6s var(--ease) both; }
    .draft.is-new:nth-child(2) { animation-delay: .08s; }
    .draft.is-new:nth-child(3) { animation-delay: .16s; }
}
@keyframes rotate-gradient { to { --rotation: 360deg; } }
@keyframes twinkle { 50% { transform: scale(.7) rotate(45deg); opacity: .6; } }
@keyframes shimmer { to { background-position: -300% 0; } }

/* Mid-width screens: the app nav shows icons only, so New lead and Log out still fit. */
@media (min-width: 760px) and (max-width: 1179px) {
    .app-nav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .app-nav a { padding: 9px 12px; }
    .app-nav .ph { font-size: 20px; }
}

/* ---------- Service & Price List ---------- */
.svc-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .svc-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; } .svc-add { position: sticky; top: 88px; } }
.svc-count { margin-top: 0; }
.svc { display: grid; gap: 12px; padding: 18px 20px; margin-bottom: 10px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.svc-title { font: 700 1.15rem/1.25 var(--f-display); letter-spacing: -.01em; }
.svc-price { margin-top: 2px; font: 600 17px var(--f-bn); }
.svc-leads { flex: none; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--ground); font: 600 12.5px var(--f-bn); text-decoration: none; }
.svc-facts { display: grid; gap: 6px; }
.svc-facts li { display: flex; gap: 8px; font: 400 14.5px/1.5 var(--f-bn); color: var(--ink-70); }
.svc-facts .ph { font-size: 17px; margin-top: 2px; color: var(--ink); flex: none; }
.svc .edit-box { padding-top: 10px; border-top: 1px dashed var(--ink-22); }
.svc-actions { display: flex; gap: 10px; }
.svc-delete { margin-top: 8px; }
.field-grid.svc-grid { grid-template-columns: 1fr 1fr; }
.svc-grid .field { margin: 0; min-width: 0; }
.svc-grid .svc-name, .svc-grid .svc-wide { grid-column: 1 / -1; }
@media (min-width: 700px) { .svc .field-grid.svc-grid { grid-template-columns: repeat(4, 1fr); } }
.svc-add { display: grid; gap: 16px; }
.svc-add form { display: grid; gap: 18px; }
.svc-add .btn { justify-self: start; }
.svc-suggest .chip { background: transparent; cursor: pointer; font-size: 13.5px; padding: 5px 12px; color: var(--ink); }
.svc-suggest .chip:hover { background: var(--ink-10); }

/* Lead page: does the budget fit the user's price? */
.fit-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-control); font: 500 14px/1.5 var(--f-bn); }
.fit-note .ph { font-size: 18px; margin-top: 1px; flex: none; }
.fit-fits { background: var(--ink-10); }
.fit-close { background: rgb(235 168 63 / .18); }
.fit-low { background: rgb(138 44 29 / .1); color: #8a2c1d; }

/* ---------- Payment Tracker ---------- */
.today-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .today-stats { grid-template-columns: repeat(4, 1fr); } .pay-stats { grid-template-columns: repeat(3, 1fr); } }
.pay-stats b { font-size: clamp(28px, 4vw, 40px); }
.pay-stats .is-alert { grid-column: 1 / -1; }
@media (min-width: 700px) { .pay-stats .is-alert { grid-column: auto; } }
.today-stats .is-warn { background: rgb(235 168 63 / .22); border-color: rgb(235 168 63 / .5); }

.pay-panel { display: grid; gap: 14px; margin-bottom: 16px; scroll-margin-top: 90px; }
.pay-panel.is-paid { background: var(--ground-soft); }
.pay-panel.is-overdue { box-shadow: inset 4px 0 0 var(--gold); }
.pay-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pay-state { padding: 3px 12px; border-radius: 999px; background: var(--ink-10); font: 600 13px var(--f-bn); }
.is-paid .pay-state { background: var(--ink); color: var(--ground); }
.is-overdue .pay-state { background: var(--gold); color: var(--ink); }
.pay-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-nums div { padding: 10px 12px; border-radius: var(--r-control); background: var(--ink-10); }
.pay-nums dt { font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.pay-nums dd { font: 600 clamp(15px, 2.4vw, 19px) var(--f-bn); }
.pay-nums .pay-balance { background: var(--ink); color: var(--ground); }
.pay-nums .pay-balance dt { color: var(--ground-80); }
.pay-bar, .deal-bar { display: block; height: 6px; border-radius: 99px; background: var(--ink-10); overflow: hidden; }
.pay-bar span, .deal-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .6s var(--ease); }
.pay-due { display: flex; align-items: center; gap: 8px; font: 400 15px var(--f-bn); }
.pay-due .ph { font-size: 18px; }
.pay-form, .pay-panel .edit-box form { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--ink-22); }
.pay-form .btn, .pay-panel .edit-box .btn { justify-self: start; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-panel .field { margin: 0; min-width: 0; }
.pay-panel input[type="date"] { width: 100%; min-height: 48px; padding: 10px 12px; font: 500 15px var(--f-text); color: var(--ink); background: #fbf8f1; border: 1.5px solid var(--ink-22); border-radius: var(--r-control); }
.pay-list { display: grid; }
.pay-list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--ink-22); }
.pay-list li:last-child { border-bottom: 0; }
.pay-method { padding: 2px 10px; border-radius: 999px; background: var(--ink-10); font: 600 12.5px var(--f-text); }
.pay-when { font: 400 13.5px var(--f-bn); color: var(--ink-70); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-list b { font: 600 15px var(--f-bn); }
.icon-btn-sm { width: 30px; height: 30px; font-size: 14px; background: none; cursor: pointer; color: var(--ink-70); }

/* Today / dashboard reminder card */
.due-pay { border-left-color: var(--gold); }
.due-pay .avatar-sm { background: var(--gold); color: var(--ink); font-size: 18px; }
.pay-owed { font: 700 17px var(--f-bn); white-space: nowrap; }

/* Payments list */
.pay-filter { margin-bottom: 16px; }
.pay-filter .chip:not(.is-on) { background: transparent; }
.deal-row .lead-facts { flex-wrap: nowrap; }
.deal-bar { width: 72px; flex: none; }
.deal-owed { background: var(--ink); color: var(--ground); }
.deal-row.is-overdue { border-left: 4px solid var(--gold); }

/* ---------- Proposal Generator ---------- */
.prop-form { display: grid; gap: 16px; max-width: 860px; }
.prop-sec { display: grid; gap: 4px; }
.prop-sec .field { margin: 10px 0 0; min-width: 0; }
.prop-wide { grid-column: 1 / -1; }
.prop-money { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .prop-money { grid-template-columns: repeat(4, 1fr); } }
.prop-words summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.prop-words summary::-webkit-details-marker { display: none; }
.prop-words summary small { font: 400 13px var(--f-bn); text-transform: none; letter-spacing: 0; }
.prop-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 8px; }
.ai-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 500 15px var(--f-bn); }
.ai-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); }
.ai-toggle .ph-fill { color: var(--gold); }
.ai-toggle small { display: block; font-size: 12.5px; color: var(--ink-70); }

.prop-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.prop-bar .back-link { margin: 0; }
.prop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prop-actions .btn { border-radius: 999px; }
.prop-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.prop-status-row .status { grid-area: auto; }
.prop-mark { display: flex; flex-wrap: wrap; gap: 6px; }
.prop-mark .chip { background: transparent; cursor: pointer; font-size: 13.5px; padding: 5px 12px; }
.prop-status { background: var(--ink-10); }
.prop-sent { background: var(--ink-22); }
.prop-accepted { background: var(--ink); color: var(--ground); }
.prop-declined { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-22); color: var(--ink-70); }
.prop-delete { max-width: 820px; margin: 16px auto 0; }

/* The paper: an A4-like sheet in the brand, prints clean on white. */
.paper { max-width: 820px; margin: 0 auto; padding: clamp(24px, 6vw, 64px); background: #FFFDF8; color: #1f2a22; border-radius: 6px; box-shadow: 0 1px 2px rgb(30 51 38 / .08), 0 30px 60px -30px rgb(30 51 38 / .4); font: 400 15.5px/1.75 var(--f-bn); }
.paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 3px solid var(--ink); }
.paper-from { font: 700 1.35rem/1.2 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.paper-contact { font: 400 13.5px var(--f-text); color: #55615a; margin-top: 4px; }
.paper-meta { text-align: right; font: 500 13px/1.6 var(--f-bn); color: #55615a; }
.paper-kind { font: 400 30px/1 var(--f-num); letter-spacing: .06em; color: var(--ink); }
.paper-to { margin-top: 28px; font: 500 15px var(--f-bn); }
.paper-to span { display: block; font: 500 11.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #6b766f; }
.paper-title { margin: 6px 0 18px; font: 700 clamp(1.5rem, 3.4vw, 2rem)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.paper-text { white-space: pre-line; }
.paper-h { margin: 26px 0 8px; padding-left: 10px; border-left: 3px solid var(--gold); font: 700 16px/1.3 var(--f-bn); color: var(--ink); }
.paper-scope { padding-left: 1.3em; list-style: decimal; display: grid; gap: 4px; }
.paper-scope li::marker { color: var(--gold); font-weight: 700; }
.paper-table { width: 100%; border-collapse: collapse; font: 500 15px var(--f-bn); }
.paper-table th { text-align: left; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #e3ddcd; }
.paper-table td { text-align: right; padding: 10px 0; border-bottom: 1px solid #e3ddcd; white-space: nowrap; }
.paper-table .is-sub th, .paper-table .is-sub td { color: #55615a; font-size: 14px; padding-left: 14px; }
.paper-table tfoot th, .paper-table tfoot td { padding-top: 14px; border-bottom: 0; font: 700 18px var(--f-bn); color: var(--ink); }
.paper-small { margin-top: 8px; font-size: 13.5px; color: #55615a; }
.paper-closing { margin-top: 26px; }
.paper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 48px; }
.paper-sign span { display: block; width: 200px; border-bottom: 1.5px solid #1f2a22; margin-bottom: 6px; height: 36px; }
.paper-sign p { font: 600 14px var(--f-bn); }
.paper-valid { font: 400 13px var(--f-bn); color: #55615a; }

@media print {
    @page { size: A4; margin: 14mm; }
    body, .app-body { background: #fff !important; padding: 0 !important; }
    .app-bar, .tabbar, .demo-badge, .toast, .no-print, .back-link { display: none !important; }
    .app-page { padding: 0 !important; max-width: none; }
    .paper { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; background: #fff; }
    .paper-head, .paper-table, .paper-scope li { break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Weekly Summary ---------- */
.week-head { align-items: flex-end; }
.week-nav { display: flex; align-items: center; gap: 10px; }
.week-label { display: grid; justify-items: center; min-width: 150px; font: 600 16px var(--f-bn); text-align: center; }
.week-label small { font: 500 12.5px var(--f-bn); color: var(--ink-70); }
.week-tip { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; padding: 18px 20px; border-radius: var(--r-card); background: var(--ink); color: var(--ground); }
.week-tip > .ph-fill { font-size: 26px; color: var(--gold); flex: none; }
.week-tip-text { font: 500 17px/1.6 var(--f-bn); }
.week-tip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.week-tip .src-rules { background: var(--ground-10); color: var(--ground-80); }
.week-tip .src-ai { background: var(--gold); color: var(--ink); }
.week-tip .tip-btn { color: var(--ground); }
.week-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 900px) { .week-tiles { grid-template-columns: repeat(4, 1fr); } }
.week-tile { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r-card); background: var(--ground-hi); border: 1px solid var(--ink-10); }
.week-tile-name { display: flex; align-items: center; gap: 8px; font: 500 14px var(--f-bn); color: var(--ink-70); }
.week-tile-name .ph { font-size: 18px; color: var(--ink); }
.week-tile-num { font: 600 clamp(22px, 3vw, 30px)/1.15 var(--f-bn); }
.week-delta { display: flex; gap: 6px; align-items: flex-start; font: 400 13px/1.45 var(--f-bn); color: var(--ink-70); }
.week-delta .ph { margin-top: 2px; }
.week-delta.is-up { color: var(--ink); font-weight: 600; }
.week-delta.is-down { color: #8a2c1d; }
.week-tile-ink { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.week-tile-ink .week-tile-name, .week-tile-ink .week-tile-name .ph, .week-tile-ink .week-delta { color: var(--ground-80); }
.week-chart { display: grid; gap: 14px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 170px; }
.bars li { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; }
.bar { position: relative; align-self: end; height: max(var(--h), 4px); border-radius: 8px 8px 3px 3px; background: var(--ink); transition: height .8s var(--ease); }
.bar b { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font: 600 13px var(--f-bn); }
.bar-day { text-align: center; font: 500 12.5px var(--f-bn); color: var(--ink-70); }
.week-services { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 14px var(--f-bn); color: var(--ink-70); }
.week-now { display: grid; gap: 12px; }
@media (min-width: 900px) { .week-now { grid-template-columns: 1fr 1fr 1.3fr; } }
.week-now .card { display: grid; gap: 8px; align-content: start; }
.week-big { font: 600 clamp(24px, 3vw, 32px)/1.15 var(--f-bn); }
.week-note { font: 400 14px/1.55 var(--f-bn); color: var(--ink-70); }
.week-cooling .mini-row { margin: 0; }

/* ---------- Settings, PWA ---------- */
.app-settings { margin-left: auto; padding: 8px; font-size: 20px; }
.app-settings.is-current { color: var(--ground); }
.app-settings + .app-logout { margin-left: 10px; }
@media (min-width: 760px) { .app-settings { margin-left: 0; } .app-settings + .app-logout { margin-left: 0; } }
.danger-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1400px) { .app-logout span { display: inline; } }
.app-bar .nav-login { white-space: nowrap; }

.set-grid { display: grid; gap: 14px; max-width: 900px; }
@media (min-width: 900px) { .set-grid { grid-template-columns: 1fr 1fr; } }
.set-card { display: grid; gap: 14px; align-content: start; }
.set-head { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.set-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--ink); color: var(--ground); font-size: 22px; }
.set-title { font: 700 1.1rem/1.3 var(--f-display); letter-spacing: -.01em; }
.set-sub { margin-top: 4px; font: 400 14.5px/1.6 var(--f-bn); color: var(--ink-70); }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-actions .btn, .set-card > .btn { border-radius: 999px; justify-self: start; }
.set-note { display: flex; gap: 8px; align-items: flex-start; font: 400 13.5px/1.55 var(--f-bn); color: var(--ink-70); }
.set-note .ph { margin-top: 3px; flex: none; }
.set-danger .set-icon { background: rgb(138 44 29 / .12); color: #8a2c1d; }
#wipe-data input[type="text"] { letter-spacing: .1em; }

.offline { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.offline p { font: 400 16px/1.6 var(--f-bn); color: var(--ink-70); max-width: 26rem; }

/* ---------- Landing polish: progress, marquee, stats, split titles, spotlight, shine ---------- */
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { scroll-behavior: auto; }

/* Gold hairline at the very top that fills as you read */
.scroll-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #F6CF7A); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgb(235 168 63 / .6); }

/* Bigger, tighter section titles on the landing page */
.lp-sec .h-section, .auto-head .h-section { font-size: clamp(2.1rem, 4.2vw, 3.35rem); line-height: 1.02; letter-spacing: -.038em; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
.split.is-up .w > span { transform: none; }
.no-js .split .w > span, html:not(.js) .split .w > span { transform: none; }

/* Works band: an endless, slow marquee with soft edges */
.works-inner { flex-wrap: nowrap; }
.works-label { flex: none; }
.works-track {
    display: flex; overflow: hidden; min-width: 0; flex: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.works-track .works-list { flex: none; flex-wrap: nowrap; gap: 44px; padding-right: 44px; white-space: nowrap; }
@media (max-width: 759px) {
    .works-inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .works-label { text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
    .works-track .works-list { animation: marquee 38s linear infinite; }
    .works-track:hover .works-list { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .works-track { -webkit-mask-image: none; mask-image: none; }
    .works-track .works-list { flex-wrap: wrap; white-space: normal; }
    .works-track .works-list[aria-hidden] { display: none; }
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* Stats band */
.stats-sec { padding-top: calc(var(--sec-y) * .6); }
.stats { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-box); overflow: hidden; background: var(--ink); color: var(--ground); box-shadow: 0 40px 80px -48px rgb(30 51 38 / .7); }
.stats > div { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(20px, 3vw, 34px); border-right: 1px solid var(--ground-10); border-bottom: 1px solid var(--ground-10); }
.stats dt { font: 400 14.5px/1.5 var(--f-bn); color: var(--ground-80); max-width: 16rem; }
.stats dd { display: flex; align-items: baseline; gap: 6px; font: 400 clamp(46px, 5.4vw, 72px)/.9 var(--f-num); letter-spacing: .01em; }
.stats dd small { font: 600 clamp(14px, 1.4vw, 17px)/1 var(--f-bn); color: var(--gold); letter-spacing: 0; }
.stats dd .stat-cur { font-size: .4em; align-self: flex-start; margin-top: .25em; }
@media (min-width: 900px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
    .stats > div { border-bottom: 0; }
    .stats > div:last-child { border-right: 0; }
}
@media (max-width: 899px) { .stats > div:nth-child(even) { border-right: 0; } .stats > div:nth-child(n+3) { border-bottom: 0; } }

/* Spotlight that follows the pointer (set by app.js) */
.spot { background-image: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), var(--spot, rgb(235 168 63 / .09)), transparent 45%); }
.tile-ink.spot, .pricing-side.spot, .rule.spot, .access.spot, .stats > div.spot { --spot: rgb(246 207 122 / .1); }

/* Primary buttons on the landing page: a light sweep on hover */
.landing .btn-primary {
    background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
    background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat;
    transition: background-position .9s var(--ease), background-color .2s, box-shadow .3s, transform .2s;
}
.landing .btn-primary:hover { background-position: -60% 0; }

/* Parallax layers move on the compositor */
[data-depth] { will-change: translate; }
.hero-glow { will-change: transform; }

/* ---------- Hero, premium layer: grid, halo, orbits, titanium phone, glass flow ---------- */
.hero { background: radial-gradient(120% 80% at 50% 0%, #2C4A35 0%, var(--ink) 45%, #1B2E21 100%); }
/* Fine dot grid that fades out toward the edges */
.hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgb(229 220 200 / .11) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
}
/* A warm light behind the phone, and a soft spotlight that follows the pointer */
.hero-halo {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(420px circle at var(--hx, 50%) var(--hy, 30%), rgb(235 168 63 / .07), transparent 60%),
        radial-gradient(30% 34% at 50% 34%, rgb(235 168 63 / .16), transparent 70%),
        radial-gradient(22% 26% at 50% 36%, rgb(201 216 182 / .12), transparent 70%);
}
@media (max-width: 699px) { .hero-halo { opacity: .45; } }
/* A gold hairline where the hero meets the page */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(235 168 63 / .55), transparent); }

/* Orbits */
.orbits { display: none; }
@media (min-width: 1100px) {
    .hero-stage { perspective: 1400px; }
    .orbits { display: block; position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
    .orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgb(229 220 200 / .12); transform: translate(-50%, -50%); }
    .orbit-1 { width: 560px; height: 560px; }
    .orbit-2 { width: 820px; height: 820px; border-style: dashed; border-color: rgb(229 220 200 / .1); }
    .orbit-3 { width: 1080px; height: 1080px; border-color: rgb(229 220 200 / .07); }
    .orbit i { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(235 168 63 / .15), 0 0 18px 2px rgb(235 168 63 / .6); }
    .orbit-2 i { background: #C9D8B6; box-shadow: 0 0 0 4px rgb(201 216 182 / .12), 0 0 16px rgb(201 216 182 / .5); }
    .orbit-3 i { width: 6px; height: 6px; margin-left: -3px; top: -3px; }
}

/* Headline accent */
.hero .hl { background: linear-gradient(100deg, #F6CF7A 0%, var(--gold) 45%, #D98F2B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Titanium phone: brushed edge, side buttons, glass glare that follows the pointer */
@media (min-width: 700px) {
    .phone {
        background: linear-gradient(145deg, #4A5A4E 0%, #16241A 22%, #0F1A12 50%, #213026 78%, #52625A 100%);
        box-shadow:
            0 0 0 1px rgb(229 220 200 / .18),
            inset 0 0 0 1.5px rgb(255 255 255 / .08),
            0 0 0 10px rgb(229 220 200 / .035),
            0 50px 100px -30px rgb(0 0 0 / .75),
            0 30px 80px -40px rgb(235 168 63 / .25);
        transition: rotate .5s var(--ease);
    }
    .phone-screen { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .06); }
    .phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #56675B, #1A271E); }
    .phone-btn-a { left: -3px; top: 150px; height: 56px; }
    .phone-btn-b { right: -3px; top: 190px; height: 84px; }
    .phone-glare {
        position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
        background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .07) 45%, rgb(255 255 255 / .02) 52%, transparent 60%);
        background-size: 250% 100%; background-position: var(--gx, 50%) 0; transition: background-position .6s var(--ease);
    }
    .phone-notif { box-shadow: 0 18px 36px -16px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .7); }
}

/* Floating cards: lighter glass edge, deeper soft shadow, a live HOT chip */
@media (min-width: 1100px) {
    .float {
        background: linear-gradient(160deg, #F4EFE4, var(--ground) 70%);
        border: 1px solid rgb(255 255 255 / .55);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 30px 60px -26px rgb(0 0 0 / .65), 0 0 0 6px rgb(229 220 200 / .06);
    }
    .float-ico { background: var(--ink); color: var(--gold); }
}
.score-chip.is-live { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .score-chip.is-live { animation: live 2.4s ease-in-out infinite; }
    .orbit-1 { animation: spin 26s linear infinite; }
    .orbit-2 { animation: spin 44s linear infinite reverse; }
    .orbit-3 { animation: spin 70s linear infinite; }
    .hero .hl { background-size: 200% 100%; animation: sheen 6s ease-in-out infinite alternate; }
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes live { 50% { box-shadow: 0 0 0 5px rgb(235 168 63 / .22), 0 0 18px rgb(235 168 63 / .45); } }
@keyframes sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* The automation flow: a glass console with a gradient edge */
.flow {
    background: linear-gradient(180deg, rgb(229 220 200 / .09), rgb(229 220 200 / .04));
    border-color: rgb(229 220 200 / .16);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 40px 90px -50px rgb(0 0 0 / .8);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- Features, premium: kicker numbers, product previews ("mocks"), gold edge on hover ---------- */
.tile-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.tile-kicker span { display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--gold); letter-spacing: .04em; font-weight: 600; }
.tile-ink .tile-kicker { color: var(--ground-80); }
.tile-ink .tile-kicker span { background: var(--gold); color: var(--ink); }
.bento .tile-title { font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.12; letter-spacing: -.03em; max-width: 20ch; }
.bento .tile-sub { margin-top: -4px; }
.feat-compact { gap: 12px; }
.feat-compact .ph { width: 32px; height: 32px; font-size: 17px; }
.feat-compact li { grid-template-columns: 32px 1fr; }

/* Light tiles: warm paper with a hairline; a gold edge lights up on hover */
.tile-light {
    position: relative; display: grid; gap: 26px; align-content: start;
    background-color: #F2ECDF; background-image: linear-gradient(180deg, #F6F1E6, #EFE8D8);
    border: 1px solid var(--ink-10);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 30px 60px -40px rgb(30 51 38 / .45);
}
.tile-light::after, .tile-ink::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgb(235 168 63 / .9), rgb(235 168 63 / 0) 40%, rgb(235 168 63 / 0) 60%, rgb(235 168 63 / .7));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .5s var(--ease);
}
.tile-light:hover::after, .tile-ink:hover::after { opacity: 1; }
.tile-light.spot { background-image: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgb(235 168 63 / .1), transparent 45%), linear-gradient(180deg, #F6F1E6, #EFE8D8); }
.tile-copy { display: grid; gap: 14px; }
@media (min-width: 900px) { .tile-light .mock { min-height: 212px; align-content: center; } }

/* Mock product UI */
.mock { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 20px; font-family: var(--f-bn); }
.mock-light { background: var(--ground-hi); border: 1px solid var(--ink-10); box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 24px 44px -30px rgb(30 51 38 / .5); }
.mock-dark { background: rgb(229 220 200 / .06); border: 1px solid var(--ground-10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.mock-head { display: flex; align-items: center; gap: 8px; font: 600 13px var(--f-text); color: var(--ink-70); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF6A; box-shadow: 0 0 0 4px rgb(76 175 106 / .18); }

.mock-chat { display: grid; gap: 6px; }
.mock-from { display: flex; align-items: center; gap: 6px; font: 600 12px var(--f-text); color: var(--ground-80); }
.mock-from span { margin-left: auto; font: 400 12px var(--f-bn); color: var(--ground-45); }
.mock-bubble { justify-self: start; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--ground); color: var(--ink); font: 500 14px/1.45 var(--f-text); }
.mock-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgb(235 168 63 / .14); border: 1px solid rgb(235 168 63 / .35); color: #F6CF7A; font: 600 12.5px var(--f-bn); }
.mock-chips .ph { font-size: 13px; }
.tile-wide .queue li { grid-template-columns: minmax(0, 1fr) 90px auto; }
.q-bar { height: 5px; border-radius: 99px; background: var(--ground-10); overflow: hidden; }
.q-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ground-45), var(--ground)); transition: width 1.2s var(--ease) .4s; }
.tile-wide.is-in .q-bar span { width: var(--w); }
.q-tag { font-size: 14px; }
.tile-wide .q-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) { .tile-wide .queue li { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 10px; } }

.mock-due { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fbf8f1; border: 1px solid var(--ink-10); border-left: 3px solid var(--gold); }
.mock-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 700 13px var(--f-display); }
.mock-who { display: grid; line-height: 1.35; min-width: 0; }
.mock-who strong { font: 600 14.5px var(--f-bn); }
.mock-who span { font: 400 12.5px var(--f-bn); color: var(--ink-70); }
.mock-pill { padding: 2px 10px; border-radius: 999px; background: var(--ink-10); font: 600 12px var(--f-text); }
.mock-pill-ink, .mock-row > .mock-pill-ink { background: var(--ink); color: var(--ground); font: 600 12px var(--f-text); }
.mock-ai { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--ground); }
.mock-ai-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mock-ai-text { font: 400 14px/1.55 var(--f-bn); color: var(--ground); }
.mock-actions { display: flex; gap: 6px; }
.mock-actions span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ground-22); font: 600 12px var(--f-text); color: var(--ground-80); }
.mock-actions .is-main { background: var(--ground); color: var(--ink); border-color: var(--ground); }

.mock-pay { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fbf8f1; border: 1px solid var(--ink-10); }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mock-row strong { font: 600 14.5px var(--f-display); }
.mock-row > span { font: 400 12.5px var(--f-bn); color: var(--ink-70); }
.mock-nums span { font: 500 13px var(--f-bn); color: var(--ink-70); }
.mock-nums b { font: 700 15px var(--f-bn); }
.mock-small { font-size: 12.5px; }
.mock-small > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #8a5a12; font-weight: 600; }
.mock-bar { display: block; height: 7px; border-radius: 99px; background: var(--ink-10); overflow: hidden; }
.mock-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ink), #3E6B4B); transition: width 1.3s var(--ease) .5s; }
.tile-light.is-in .mock-bar span { width: var(--w); }
.mock-paper { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #FFFDF8; border: 1px solid var(--ink-10); }
.mock-paper-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink-10); font-size: 17px; }
.mock-ok { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--f-text); color: #2F7A47; }

/* The mocks assemble when the tile scrolls in */
@media (prefers-reduced-motion: no-preference) {
    .js .mock > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
    .js .is-in .mock > * { opacity: 1; transform: none; }
    .js .is-in .mock > :nth-child(2) { transition-delay: .15s; }
    .js .is-in .mock > :nth-child(3) { transition-delay: .3s; }
    .js .mock-chips span { opacity: 0; transform: scale(.85); transition: opacity .4s, transform .5s var(--ease); }
    .js .is-in .mock-chips span { opacity: 1; transform: none; }
    .js .is-in .mock-chips span:nth-child(1) { transition-delay: .35s; }
    .js .is-in .mock-chips span:nth-child(2) { transition-delay: .45s; }
    .js .is-in .mock-chips span:nth-child(3) { transition-delay: .55s; }
    .js .is-in .mock-chips span:nth-child(4) { transition-delay: .65s; }
    .live-dot { animation: pulse-dot 2s ease-in-out infinite; }
    .bento > .tile-light:nth-child(3) { transition-delay: .12s; }
}
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgb(76 175 106 / .05); } }
@media (min-width: 900px) { .tile-wide { grid-template-columns: .95fr 1.05fr; } }

/* ---------- Automations, premium: grid backdrop, run log, numbered rules that glow when active ---------- */
.auto-panel {
    background: radial-gradient(120% 90% at 0% 0%, #2F4E39 0%, var(--ink) 45%, #1B2E21 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 50px 100px -50px rgb(30 51 38 / .75);
}
.auto-panel::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgb(235 168 63 / .55), rgb(235 168 63 / 0) 30%, rgb(235 168 63 / 0) 70%, rgb(235 168 63 / .35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.auto-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgb(229 220 200 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(229 220 200 / .05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(60% 70% at 80% 40%, #000, transparent 75%);
    mask-image: radial-gradient(60% 70% at 80% 40%, #000, transparent 75%);
}
.auto-head { z-index: 1; }
.auto-panel .h-section { color: var(--ground); }

/* Run log: a small terminal */
.autolog { margin-top: 18px; border-radius: 18px; background: rgb(12 22 15 / .55); border: 1px solid var(--ground-10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); overflow: hidden; }
.autolog-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ground-10); font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ground-80); }
.autolog-demo { margin-left: auto; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ground-22); font-size: 10.5px; color: var(--ground-45); }
.autolog-list { position: relative; display: grid; padding: 6px 0; height: 172px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.autolog-list li { display: grid; grid-template-columns: 44px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 14px; font: 400 13.5px var(--f-bn); color: var(--ground-80); }
.autolog-list time { font: 500 12px var(--f-bn); color: var(--ground-45); }
.autolog-list .ph { font-size: 16px; color: var(--gold); }
.autolog-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autolog-list b { padding: 1px 8px; border-radius: 999px; background: rgb(235 168 63 / .14); color: #F6CF7A; font: 600 11.5px var(--f-text); white-space: nowrap; }
.autolog-list li.is-new { animation: log-in .7s var(--ease); background: linear-gradient(90deg, rgb(235 168 63 / .1), transparent 70%); }
@keyframes log-in { from { opacity: 0; transform: translateY(-14px); } }

/* Status above the rules */
.rules-wrap { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; }
.rules-status { display: flex; align-items: center; gap: 10px; font: 500 14px var(--f-bn); color: var(--ground-80); }
.rules-status b { margin-left: auto; padding: 3px 12px; border-radius: 999px; background: var(--ground-10); border: 1px solid var(--ground-22); font: 600 12.5px var(--f-bn); color: var(--ground); }

/* Rules: numbered, gold icon, THEN highlighted; they light up when switched on */
.rule { grid-template-columns: 44px 1fr auto; gap: 16px; padding: 16px 18px; border-radius: 18px; background: rgb(229 220 200 / .05); border: 1px solid var(--ground-10); transition: border-color .5s var(--ease), background-color .5s, box-shadow .5s var(--ease), transform .4s var(--ease); }
.rule:hover { transform: translateX(4px); }
.rule-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ground-10); border: 1px solid var(--ground-10); font-size: 20px; color: var(--ground-80); transition: background-color .5s, color .5s, box-shadow .5s; }
.rule-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rule-num { font: 600 11.5px var(--f-mono); color: var(--ground-45); letter-spacing: .06em; }
.rule-name { margin: 0; font-size: 16.5px; }
.rule-then { color: var(--ground); }
.rule-then .mono-tag { background: rgb(235 168 63 / .16); color: #F6CF7A; }
.rule-state { display: grid; justify-items: center; gap: 6px; }
.rule-on { font: 600 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ground-45); transition: color .4s; }
.js .rule.is-on { border-color: rgb(235 168 63 / .28); background: linear-gradient(90deg, rgb(235 168 63 / .07), rgb(229 220 200 / .04) 60%); box-shadow: 0 16px 36px -24px rgb(0 0 0 / .6); }
.js .rule.is-on .rule-icon { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 4px rgb(235 168 63 / .14), 0 0 22px rgb(235 168 63 / .35); }
.js .rule.is-on .rule-on { color: #F6CF7A; }
.js .rule:not(.is-on) .rule-on { visibility: hidden; }
.js .rule.is-on .switch { background: var(--gold); }
@media (max-width: 599px) {
    .rule { grid-template-columns: 38px 1fr; }
    .rule-icon { width: 38px; height: 38px; font-size: 18px; }
    .rule-state { grid-column: 2; display: flex; align-items: center; gap: 10px; }
    .autolog-list li { grid-template-columns: 40px 18px minmax(0, 1fr); }
    .autolog-list b { display: none; }
}

/* ---------- Pricing, premium: gold edge, icon stepper that fills, value bars, trust row, live price card ---------- */
.pricing { position: relative; overflow: visible; border-radius: var(--r-box); box-shadow: 0 0 0 1px var(--ink-10), 0 60px 120px -60px rgb(30 51 38 / .6); }
.pricing > * { overflow: hidden; }
.pricing-main { border-radius: var(--r-box) var(--r-box) 0 0; background: linear-gradient(180deg, #F6F1E6, #EFE8D8); }
.pricing-side { border-radius: 0 0 var(--r-box) var(--r-box); }
@media (min-width: 1100px) {
    .pricing-main { border-radius: var(--r-box) 0 0 var(--r-box); }
    .pricing-side { border-radius: 0 var(--r-box) var(--r-box) 0; }
}
.pricing::after {
    content: ''; position: absolute; inset: -1px; border-radius: calc(var(--r-box) + 1px); padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgb(235 168 63 / .8), rgb(235 168 63 / 0) 35%, rgb(235 168 63 / 0) 65%, rgb(235 168 63 / .8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pricing-main.spot { background-image: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgb(235 168 63 / .1), transparent 45%), linear-gradient(180deg, #F6F1E6, #EFE8D8); }

/* Stepper with icons; the line fills gold when the card comes in */
.stepper span { width: 34px; height: 34px; padding: 0; font-size: 17px; background: var(--ink); color: var(--gold); box-shadow: 0 0 0 5px #F3EDE1; }
/* The track runs from the centre of the first icon to the centre of the last, behind the icons. */
.stepper::before, .stepper::after { top: 16px; left: 17px; right: auto; width: calc((100% - 24px) * 2 / 3 + 24px); height: 2px; z-index: 0; }
.stepper::after { content: ''; position: absolute; background: linear-gradient(90deg, var(--gold), #D98F2B); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .4s; }
.stepper li { z-index: 1; }
.stepper span { position: relative; z-index: 1; }
.pricing.is-in .stepper::after { transform: scaleX(1); }

/* Worth it? */
.worth { width: 100%; max-width: 460px; display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-card); background: #FBF8F1; border: 1px solid var(--ink-10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8); }
.worth-head { font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.worth-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.worth-name { font: 500 14px var(--f-bn); }
.worth-row b { font: 700 15px var(--f-bn); min-width: 64px; text-align: right; }
.worth-bar { height: 10px; border-radius: 99px; background: var(--ink-10); overflow: hidden; }
.worth-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink-45); transition: width 1.3s var(--ease) .6s; }
.worth-bar-us > span { background: linear-gradient(90deg, var(--gold), #D98F2B); min-width: 10px; }
.pricing.is-in .worth-bar > span { width: var(--w); }
.worth-note { font: 400 13px/1.5 var(--f-bn); color: var(--ink-70); }
@media (max-width: 499px) { .worth-row { grid-template-columns: 1fr auto; } .worth-bar { grid-column: 1 / -1; grid-row: 2; } }

.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--f-bn); color: var(--ink-70); }
.trust .ph { font-size: 16px; color: var(--ink); }

/* The dark plan card */
.pricing-side { gap: 8px; background: radial-gradient(120% 90% at 100% 0%, #2F4E39 0%, var(--ink) 50%, #1B2E21 100%); }
.pricing-side::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgb(229 220 200 / .08) 1px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 70%); mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 70%);
}
.plan-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #F6CF7A, var(--gold)); color: var(--ink); font: 700 12px var(--f-text); box-shadow: 0 8px 20px -8px rgb(235 168 63 / .7); }
.price { margin-top: 14px; }
.price-compare { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 14.5px var(--f-bn); color: var(--ground-80); }
.price-compare .ph { font-size: 18px; color: var(--gold); }
/* A light sweep across the plan card once it scrolls in */
.pricing-side .sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .09) 50%, transparent 65%); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) {
    .pricing.is-in .pricing-side .sweep { animation: sweep 1.6s var(--ease) .5s both; }
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- FAQ, premium: sticky intro + help card, numbered editorial list ---------- */
.faq-layout { display: grid; gap: 40px; align-items: start; }
.faq-side { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1000px) {
    .faq-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; }
    .faq-side { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.faq-help {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 44px 1fr; gap: 12px 14px; align-items: start;
    margin-top: 10px; padding: 20px; border-radius: var(--r-card); color: var(--ground);
    background: radial-gradient(120% 100% at 100% 0%, #2F4E39, var(--ink) 55%, #1B2E21);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -36px rgb(30 51 38 / .65);
}
.faq-help::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgb(235 168 63 / .6), transparent 40%, transparent 70%, rgb(235 168 63 / .4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.faq-help-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--gold); color: var(--ink); font-size: 22px; box-shadow: 0 0 22px rgb(235 168 63 / .35); }
.faq-help-title { font: 700 1.1rem/1.3 var(--f-display); letter-spacing: -.015em; }
.faq-help-text { margin-top: 4px; font: 400 14.5px/1.6 var(--f-bn); color: var(--ground-80); }
.faq-help .btn { grid-column: 2; justify-self: start; background: var(--ground); color: var(--ink); border-radius: 999px; }
.faq-help .btn:hover { background: var(--ground-hi); }

/* The list: one card, questions split by hairlines, the open one lifts with a gold edge */
.faq-list { display: grid; gap: 10px; }
.faq-list .qa { position: relative; border-radius: 18px; background: linear-gradient(180deg, #F6F1E6, #F0E9DA); border: 1px solid var(--ink-10); box-shadow: inset 0 1px 0 rgb(255 255 255 / .75); }
.faq-list .qa:hover { border-color: var(--ink-22); }
.faq-list .qa.is-open { background: #FFFBF2; border-color: rgb(235 168 63 / .45); box-shadow: inset 3px 0 0 var(--gold), 0 24px 48px -30px rgb(30 51 38 / .45); }
.faq-list .qa-q { align-items: center; gap: 14px; padding: 18px 20px; }
.qa-num { flex: none; width: 30px; font: 600 12.5px var(--f-mono); color: var(--ink-45); transition: color .3s; }
.qa.is-open .qa-num { color: #B57718; }
.qa-text { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.qa-tag { padding: 2px 9px; border-radius: 999px; background: var(--ink-10); font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.qa.is-open .qa-tag { background: rgb(235 168 63 / .18); color: #8a5a12; }
.faq-list .qa-a p { padding: 0 20px 20px 64px; font-size: 15.5px; }
@media (max-width: 599px) { .faq-list .qa-a p { padding-left: 20px; } .qa-num { width: 22px; } }
.faq-list .qa.spot { background-image: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgb(235 168 63 / .08), transparent 45%), linear-gradient(180deg, #F6F1E6, #F0E9DA); }
.faq-list .qa.is-open.spot { background-image: none; }
@media (prefers-reduced-motion: no-preference) {
    .faq-list > :nth-child(2) { transition-delay: .05s; }
    .faq-list > :nth-child(3) { transition-delay: .1s; }
    .faq-list > :nth-child(4) { transition-delay: .15s; }
    .faq-list > :nth-child(5) { transition-delay: .2s; }
    .faq-list > :nth-child(6) { transition-delay: .25s; }
    .faq-list > :nth-child(7) { transition-delay: .3s; }
    .faq-list > :nth-child(8) { transition-delay: .35s; }
}

/* ---------- Closer + footer, premium: halo & grid, gold headline, gold CTA, pill login, giant wordmark ---------- */
.closer { background: radial-gradient(110% 70% at 50% 0%, #2C4A35 0%, var(--ink) 45%, #16261B 100%); }
.closer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(235 168 63 / .55), transparent); }
.closer-grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgb(229 220 200 / .09) 1px, transparent 1.4px); background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(60% 45% at 30% 25%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 45% at 30% 25%, #000 10%, transparent 75%);
}
.closer-halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(28% 30% at 78% 22%, rgb(235 168 63 / .14), transparent 70%), radial-gradient(30% 34% at 18% 30%, rgb(201 216 182 / .08), transparent 70%); }
.closer .hl { background: linear-gradient(100deg, #F6CF7A 0%, var(--gold) 45%, #D98F2B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closer-title { max-width: 14ch; }

/* Assurances as a row of glass pills */
.assure { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.assure li { gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--ground-10); border: 1px solid var(--ground-22); font-size: 14.5px; color: var(--ground); }
.assure .ph { width: 28px; height: 28px; background: rgb(235 168 63 / .16); border-color: rgb(235 168 63 / .35); color: #F6CF7A; font-size: 15px; }

/* Access panel: glass card with a gold edge */
.access {
    position: relative; gap: 20px; padding: clamp(22px, 3vw, 32px);
    background: linear-gradient(180deg, rgb(229 220 200 / .1), rgb(229 220 200 / .04));
    border-color: rgb(229 220 200 / .16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 50px 100px -50px rgb(0 0 0 / .8);
}
.access::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgb(235 168 63 / .7), transparent 35%, transparent 70%, rgb(235 168 63 / .45));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.access-head { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.access-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #F6CF7A, var(--gold)); color: var(--ink); font-size: 21px; box-shadow: 0 0 24px rgb(235 168 63 / .35); }
.access-icon-soft { background: var(--ground-10); color: var(--ground); border: 1px solid var(--ground-22); box-shadow: none; }
.access-price { font: 400 30px/1 var(--f-num); letter-spacing: .02em; margin-top: 4px; }
.access-price span { margin-left: 6px; font: 500 13px var(--f-bn); letter-spacing: 0; color: var(--ground-80); }
.access-head .access-sub { margin: 4px 0 0; }
.access-block > .access-sub { margin: 0; }

/* Gold primary CTA for the dark closer */
.btn-gold, .on-ink .btn-primary.btn-gold {
    background-color: var(--gold); background-image: linear-gradient(135deg, #F6CF7A, var(--gold) 55%, #D98F2B);
    color: var(--ink); font-weight: 700; border-color: transparent; box-shadow: 0 16px 36px -14px rgb(235 168 63 / .6);
}
.btn-gold:hover, .on-ink .btn-primary.btn-gold:hover { background-color: #F0B24D; box-shadow: 0 20px 44px -14px rgb(235 168 63 / .75); transform: translateY(-1px); }
.landing .on-ink .btn-primary.btn-gold { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%), linear-gradient(135deg, #F6CF7A, var(--gold) 55%, #D98F2B); background-size: 250% 100%, 100% 100%; background-position: 150% 0, 0 0; }
.landing .on-ink .btn-primary.btn-gold:hover { background-position: -60% 0, 0 0; }

/* Log in: one pill with the number and the button inside */
.login-pill { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--ground-hi); border: 1.5px solid transparent; transition: border-color .2s, box-shadow .2s; }
.login-pill:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgb(235 168 63 / .2); }
.login-pill > .ph { font-size: 18px; color: var(--ink-70); }
.login-pill input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; font: 500 17px var(--f-text); color: var(--ink); }
.login-pill input:focus { outline: none; box-shadow: none; }
.login-pill .btn { min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; }
.login-pill .btn:hover { background: var(--ink-deep); }

/* Footer */
.footer::before { background: linear-gradient(90deg, transparent, var(--ground-22), transparent); }
.footer-col a { position: relative; }
.footer-col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.footer-col a:hover::after { transform: scaleX(1); }
.footer-made { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--f-text) !important; color: var(--ground-45) !important; }
.footer-made .ph-fill { color: var(--gold); }
.footer-mark {
    margin: clamp(40px, 6vw, 72px) 0 -0.12em; text-align: center; white-space: nowrap; overflow: hidden;
    font: 800 clamp(64px, 15.5vw, 230px)/.9 var(--f-display); font-variation-settings: 'opsz' 96; letter-spacing: -.055em;
    background: linear-gradient(180deg, rgb(229 220 200 / .16), rgb(229 220 200 / 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
    user-select: none;
}
.footer-mark span { background: linear-gradient(180deg, rgb(235 168 63 / .45), rgb(235 168 63 / 0) 85%); -webkit-background-clip: text; background-clip: text; }
.footer-bottom { align-items: center; margin-top: 0; }
.to-top { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ground-22); background: var(--ground-10); color: var(--ground-80); font: 600 13px var(--f-text); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.to-top:hover { border-color: var(--gold); color: var(--ground); }
.to-top .ph { transition: transform .3s var(--ease); }
.to-top:hover .ph { transform: translateY(-2px); }

/* ---------- Navbar topic popups ---------- */
.topic-modal { padding: 0; overflow: hidden; }
.topic-modal[open] { display: block; max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.topic-modal > section { padding: 30px 26px 26px; }
@media (min-width: 600px) { .topic-modal { width: min(720px, calc(100vw - 48px)); } .topic-modal > section { padding: 36px 40px 32px; } }
.topic-modal { scrollbar-width: thin; scrollbar-color: var(--ink-22) transparent; }
.topic-modal::-webkit-scrollbar { width: 8px; }
.topic-modal::-webkit-scrollbar-thumb { background: var(--ink-22); border-radius: 99px; }
.topic-modal::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--gold), #F6CF7A 50%, transparent); }
.topic-modal .modal-close { z-index: 2; }
.topic-modal .eyebrow { margin-bottom: 12px; }
.topic-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.08; max-width: 18ch; }
.topic-modal .modal-sub { margin-top: 10px; max-width: 34rem; }

/* Numbered/iconed list used by Workflow, Features and Automations */
.topic-steps, .topic-grid, .topic-rules { display: grid; gap: 10px; margin-top: 22px; }
.topic-steps li, .topic-grid li, .topic-rules li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: #F3EDE0; border: 1px solid var(--ink-10); }
.topic-step-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--ink); color: var(--gold); font-size: 20px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.topic-modal h3 { font: 700 15.5px/1.3 var(--f-display); letter-spacing: -.01em; }
.topic-modal li p { margin-top: 3px; font: 400 14.5px/1.6 var(--f-bn); color: var(--ink-70); }
.topic-rules li p { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; color: var(--ink); }
.topic-rules .mono-tag { background: var(--ink-10); color: var(--ink-70); }
.topic-rules .mono-tag-gold { background: rgb(235 168 63 / .22); color: #8a5a12; }
@media (min-width: 700px) { .topic-grid { grid-template-columns: 1fr 1fr; } }

/* Steps are joined by a hairline, like the hero flow */
.topic-steps { position: relative; }
.topic-steps li { position: relative; }
.topic-steps li:not(:last-child)::after { content: ''; position: absolute; left: 36px; bottom: -11px; width: 2px; height: 12px; background: var(--ink-22); }

/* Pricing */
.topic-price { margin-top: 22px; padding: 22px 24px; border-radius: 20px; color: var(--ground); background: radial-gradient(120% 100% at 100% 0%, #2F4E39, var(--ink) 55%, #1B2E21); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.topic-price-num { display: flex; align-items: baseline; gap: 6px; font: 400 clamp(54px, 9vw, 72px)/.9 var(--f-num); }
.topic-price-num span { font: 700 .34em/1 var(--f-bn); color: var(--gold); align-self: flex-start; margin-top: .12em; }
.topic-price-num small { font: 500 16px var(--f-bn); color: var(--ground-80); }
.topic-price-note { margin-top: 10px; font: 500 14px var(--f-bn); color: var(--ground-80); }
.topic-included { display: grid; gap: 10px; margin-top: 18px; }
.topic-included li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 400 15px/1.55 var(--f-bn); }
.topic-included .ph-fill { font-size: 20px; color: #2F7A47; margin-top: 1px; }

/* FAQ inside the popup */
.topic-faq { display: grid; gap: 8px; margin-top: 20px; }
.topic-faq details { border-radius: 14px; background: #F3EDE0; border: 1px solid var(--ink-10); transition: background-color .3s, border-color .3s; }
.topic-faq details[open] { background: #FFFBF2; border-color: rgb(235 168 63 / .45); }
.topic-faq summary { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 14px 16px; list-style: none; cursor: pointer; font: 600 15.5px/1.35 var(--f-display); }
.topic-faq summary::-webkit-details-marker { display: none; }
.topic-faq summary .ph { font-size: 16px; transition: transform .3s var(--ease); }
.topic-faq details[open] summary .ph { transform: rotate(45deg); }
.topic-faq .qa-num { width: auto; }
.topic-faq p { padding: 0 16px 16px 52px; font: 400 14.5px/1.65 var(--f-bn); color: var(--ink-70); }
@media (max-width: 599px) { .topic-faq p { padding-left: 16px; } }

.topic-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.topic-actions .btn { border-radius: 999px; }

/* Content settles in one piece after the dialog opens */
@media (prefers-reduced-motion: no-preference) {
    .topic-modal[open] section:not([hidden]) li, .topic-modal[open] section:not([hidden]) .topic-price, .topic-modal[open] section:not([hidden]) details { animation: topic-in .55s var(--ease) both; }
    .topic-modal[open] section:not([hidden]) li:nth-child(2), .topic-modal[open] section:not([hidden]) details:nth-child(2) { animation-delay: .05s; }
    .topic-modal[open] section:not([hidden]) li:nth-child(3), .topic-modal[open] section:not([hidden]) details:nth-child(3) { animation-delay: .1s; }
    .topic-modal[open] section:not([hidden]) li:nth-child(4), .topic-modal[open] section:not([hidden]) details:nth-child(4) { animation-delay: .15s; }
    .topic-modal[open] section:not([hidden]) li:nth-child(5), .topic-modal[open] section:not([hidden]) details:nth-child(5) { animation-delay: .2s; }
    .topic-modal[open] section:not([hidden]) li:nth-child(n+6), .topic-modal[open] section:not([hidden]) details:nth-child(n+6) { animation-delay: .25s; }
}
@keyframes topic-in { from { opacity: 0; transform: translateY(10px); } }

/* Nav links that open a popup show a small dot on the active one while it's open */
.site-links a[data-topic][aria-expanded="true"] { background: var(--ground-10); color: var(--ground); }

/* ---------- Log in popup ---------- */
.login-modal { padding: 34px 28px 26px; overflow: hidden; }
@media (min-width: 600px) { .login-modal { width: min(460px, calc(100vw - 48px)); padding: 40px 36px 30px; } }
.login-modal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), #F6CF7A 50%, transparent); }
.login-modal::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 100% 0%, rgb(235 168 63 / .12), transparent 70%); }
.login-modal > *:not(.modal-close) { position: relative; z-index: 1; }
.login-badge { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background: var(--ink); color: var(--gold); font-size: 26px; box-shadow: 0 14px 30px -14px rgb(30 51 38 / .7), inset 0 1px 0 rgb(255 255 255 / .12); }
.login-modal .modal-title { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.login-form-modal { margin-top: 22px; }
.login-modal .login-pill { background: #FBF8F1; border: 1.5px solid var(--ink-22); }
.login-modal .login-pill:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgb(235 168 63 / .22); }
.login-notes { display: grid; gap: 8px; margin-top: 18px; }
.login-notes li { display: flex; align-items: center; gap: 10px; font: 400 14px var(--f-bn); color: var(--ink-70); }
.login-notes .ph { font-size: 17px; color: var(--ink); }
.login-new { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ink-22); font: 400 14.5px var(--f-bn); color: var(--ink-70); }
.login-new .btn-link { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
    .login-modal[open] .login-badge { animation: pop-in .6s var(--ease) both; }
}
@keyframes pop-in { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }

/* ---------- Brand tagline ---------- */
.footer-tagline { font: 600 12.5px/1.4 var(--f-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) !important; }
.footer-mark-tag { margin: 6px 0 clamp(28px, 4vw, 44px); text-align: center; font: 600 clamp(11px, 1.3vw, 15px) var(--f-mono); letter-spacing: .4em; text-transform: uppercase; color: rgb(235 168 63 / .55); }
.footer-mark { margin-bottom: 0; }

/* ---------- Hero wordmark behind the phone ---------- */
.hero-mark { display: none; }
@media (min-width: 900px) {
    .hero-mark {
        display: block; position: absolute; z-index: 0; left: 50%; top: 44%; transform: translate(-50%, -50%) scaleX(1.12);
        margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
        font: 800 clamp(150px, 18.5vw, 330px)/.9 var(--f-display); font-variation-settings: 'opsz' 96; letter-spacing: -.01em;
        background: linear-gradient(180deg, rgb(229 220 200 / .22) 0%, rgb(229 220 200 / .11) 55%, rgb(229 220 200 / .02) 95%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero-mark span { background: linear-gradient(180deg, rgb(235 168 63 / .55) 0%, rgb(235 168 63 / .25) 55%, rgb(235 168 63 / .03) 95%); -webkit-background-clip: text; background-clip: text; }
}

/* ---------- Re-subscribe ---------- */
.resub { position: relative; overflow: hidden; min-height: 100dvh; }
.resub-body { position: relative; display: grid; gap: 22px; justify-items: start; padding-top: clamp(40px, 10vw, 120px); padding-bottom: 80px; }
.resub-body .hero-sub { max-width: 36rem; }

/* ---------- Motion (all off under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .phone { animation: rise 1s var(--ease) both; }
    .phone-screen > :not(.phone-status) { animation: rise .9s var(--ease) both; }
    .phone-screen > :nth-child(2) { animation-delay: .15s; }
    .phone-screen > :nth-child(3) { animation-delay: .22s; }
    .phone-screen > :nth-child(4) { animation-delay: .29s; }
    .phone-notif { animation: float-in .8s var(--ease) 1.2s both; }
    .float { animation: float-in .9s var(--ease) both, bob 6s ease-in-out infinite alternate; }
    .float-a { animation-delay: .5s, 1.4s; }
    .float-b { animation-delay: .65s, 0s; }
    .float-c { animation-delay: .8s, .7s; }
    .float-d { animation-delay: .95s, 2s; }
    .flow { animation: rise 1s var(--ease) .3s both; }
    .hero .hero-glow { animation: drift 18s ease-in-out infinite alternate; }
    .wire span { animation: pulse-y 2.4s linear infinite; }
    .wire:nth-of-type(4) span { animation-delay: .3s; }
    .wire:nth-of-type(6) span { animation-delay: .6s; }
    .wire:nth-of-type(8) span { animation-delay: .9s; }
    .wire.is-hot span { animation-duration: .7s; }

    .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
    .bento > :nth-child(2), .closer-grid > :nth-child(2) { transition-delay: .1s; }
    .bento > :nth-child(3) { transition-delay: .2s; }
    .ps:nth-child(2) { transition-delay: .08s; }
    .ps:nth-child(3) { transition-delay: .16s; }
    .ps:nth-child(4) { transition-delay: .24s; }
    .js .tile-wide .queue li { opacity: 0; transform: translateX(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .js .tile-wide.is-in .queue li { opacity: 1; transform: none; }
    .js .tile-wide.is-in .queue li:nth-child(1) { transition-delay: .35s; }
    .js .tile-wide.is-in .queue li:nth-child(2) { transition-delay: .5s; }
    .js .tile-wide.is-in .queue li:nth-child(3) { transition-delay: .65s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
    .wire span { animation-name: pulse-x; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes float-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes bob { to { transform: translateY(-10px); } }
@keyframes drift { to { transform: translate3d(-6%, 4%, 0) scale(1.08); } }
@keyframes pulse-y { from { transform: translateY(-60%); } to { transform: translateY(100%); } }
@keyframes pulse-x { from { transform: translateX(-60%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Today: a follow-up sent from the card */
.due.is-sent { opacity: .72; border-left-color: var(--ink); }
.due-sent { display: flex; align-items: center; gap: 8px; padding-top: 4px; font: 600 14px/1.5 var(--f-bn); color: var(--ink); }
.due-sent .ph { font-size: 20px; }
.tl-auto { color: var(--ink-70); font-size: 13px; }
.set-list { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; font: 500 14px/1.5 var(--f-bn); color: var(--ink-70); }
.set-list li { display: flex; gap: 8px; align-items: flex-start; }
.set-list .ph { font-size: 17px; margin-top: 2px; flex: none; color: var(--ink); }

/* Settings: connected Facebook Page / WhatsApp */
@media (min-width: 900px) { .set-wide { grid-column: 1 / -1; } }
.channel-row { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-control); border: 1px solid var(--ink-10); background: #fbf8f1; }
.channel-row.is-error { border-color: #d9a597; }
@media (min-width: 760px) { .channel-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.channel-main { display: flex; gap: 12px; align-items: flex-start; }
.channel-main > .ph { font-size: 28px; color: var(--ink); flex: none; }
.channel-main strong { display: block; font: 700 15.5px/1.4 var(--f-text); }
.channel-main span { display: block; font: 400 13.5px/1.5 var(--f-bn); color: var(--ink-70); }
.channel-auto { display: grid; gap: 8px; }
.channel-auto textarea { min-height: 64px; font: 400 14.5px/1.55 var(--f-bn); }
.check { display: flex; gap: 8px; align-items: center; font: 600 14px var(--f-bn); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }

/* Privacy policy */
.legal { max-width: 760px; padding-top: 32px; padding-bottom: 64px; font: 400 16px/1.7 var(--f-text); color: var(--ink); }
.legal-brand { display: inline-flex; margin-bottom: 28px; }
.legal-date { margin: 6px 0 22px; font-size: 14px; color: var(--ink-70); }
.legal h2 { margin: 30px 0 8px; font: 700 1.15rem/1.3 var(--f-display); }
.legal p, .legal li { margin-bottom: 8px; }
.legal ul { padding-left: 20px; }
.legal [lang="bn"] { font-family: var(--f-bn); }

/* Choose a Facebook Page */
.pick-pages { display: grid; gap: 8px; max-width: 620px; }
.pick-pages .mini-row { width: 100%; margin: 0; border: 1px solid var(--ink-10); background: #fbf8f1; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.footer-legal { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Lead page: reply through the connected Page / WhatsApp */
.reply-box { display: grid; gap: 10px; }
.reply-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reply-title { display: inline-flex; align-items: center; gap: 8px; font: 700 1.05rem/1.3 var(--f-display); }
.reply-title .ph { font-size: 22px; }
.reply-window { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--ink-10); font: 600 12.5px var(--f-bn); }
.reply-box textarea { width: 100%; min-height: 84px; font: 400 15px/1.55 var(--f-bn); margin-bottom: 8px; }
.tl-reply .tl-dot { background: var(--ink); }
#channels .field-grid .btn { justify-self: start; border-radius: 999px; }