/* site.css — the public website (views/site/, served on SITE_BASE_URL by src/site/).
   A logged-out marketing surface with its own look, deliberately NOT the operator
   app.css: Plus Jakarta Sans, wider type. Its COLOURS are the app's "Ink" palette
   (public/css/theme.css + app.css), so the website and the app read as one product:
   navy-tinted neutrals, the logo's blue → violet as the one accent in both themes,
   a white bar with a blue → violet hairline, the deep-navy side rail in the app
   pictures. In LIGHT mode amber is only a warning colour and the one orange is the
   hero's full stop (the owner kept it, 2026-10-09). DARK mode takes the logo's
   orange back as a warm accent (owner, 2026-10-11: dark "looks a bit cold … make
   more of the orange from the logo"): the slot-machine word runs the logo's full
   blue → violet → orange (--reel), section labels are orange (--warm-ink), and the
   bottom band, the "Most popular" ring and the bar's hairline end in orange.
   Buttons stay blue → violet, as in the app. Every colour is a token below, light by
   default, dark under html[data-theme="dark"] — which /js/boot.js sets before
   paint and /js/theme.js toggles. Change a value here together with theme.css. */

:root{
  color-scheme:light;
  --bg:#f2f5fa; --surface:#ffffff; --surface-2:#eef2f9; --surface-3:#dfe6f1;
  --border:#dde4ef; --text:#1b2742; --text-strong:#0b1530; --text-muted:#5b6987;
  /* the accent: Sellevry blue → violet (the logo's first leg), as on the app's primary buttons */
  --accent:#0350a6; --accent-end:#6337ad; --on-accent:#ffffff;
  --accent-grad:linear-gradient(135deg,var(--accent),var(--accent-end));
  --grad-a:#0350a6; --grad-b:#6337ad;
  --dot:#ec9a3a;
  --logo-ink:#0b1530; --tint:#e3ecf8;
  --logo-word:linear-gradient(90deg,var(--grad-a),var(--grad-b));   /* the wordmark: the logo's blue → violet */
  --reel:linear-gradient(90deg,var(--grad-a),var(--grad-b));          /* the slot-machine word */
  --warm-ink:var(--accent);                                           /* section labels: blue in light, orange in dark */
  /* the bar: white, closed by the app's blue → violet hairline */
  --bar-bg:#ffffff; --bar-line:linear-gradient(90deg,var(--accent),var(--accent-end));
  /* the app pictures' side rail: the app's deep-navy "night rail" */
  --rail-bg:#1a2550; --rail-fg:rgba(149,162,196,.28);
  --photo-warm:#d98a3a;   /* a stand-in photo's warm tone in the app pictures — never an accent */
  --ok:#1a7a4e; --ok-tint:#e3f3ec; --warn:#8a5a08; --warn-tint:#fdf0d6;
  --danger:#d23b2e; --danger-tint:rgba(210,59,46,.08);
  --shadow:0 1px 2px rgba(11,21,48,.06),0 16px 40px -12px rgba(3,40,110,.22);
  --ring:var(--accent-grad);
  /* the gradient CTA band: the deep blue → violet with its own white ink, the same in both themes */
  --band:linear-gradient(120deg,#0350a6 0%,#2a44a9 45%,#6337ad 100%);
  --on-grad:#ffffff; --on-grad-line:rgba(255,255,255,.4); --on-grad-hover:rgba(255,255,255,.12);
  --on-grad-btn:#ffffff; --on-grad-btn-ink:#0b1530;
  --display:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  /* ONE muted slate-navy family, as the app's dark mode — never graphite beside navy */
  --bg:#10141c; --surface:#171c26; --surface-2:#1c222d; --surface-3:#262d3a;
  --border:#2a3140; --text:#dce1ea; --text-strong:#f4f6fa; --text-muted:#98a1b3;
  /* the lifted blue → violet, with dark ink on its fills */
  --accent:#7fb2f6; --accent-end:#a688e8; --on-accent:#0b1530;
  --grad-a:#7fb2f6; --grad-b:#a688e8;
  --dot:#f0a040;
  --logo-ink:#f4f6fa; --tint:rgba(127,178,246,.14);
  --logo-word:var(--logo-ink);
  /* the logo's orange, back as dark mode's warm accent */
  --reel:linear-gradient(90deg,#7fb2f6 0%,#a688e8 48%,#f4ad4e 100%);
  --warm-ink:#f4ad4e;
  --ring:linear-gradient(135deg,#7fb2f6,#a688e8 55%,#f0a040);
  --band:linear-gradient(120deg,#0350a6 0%,#1446a8 30%,#6337ad 63%,#b65e66 85%,#ec9a3a 104%);   /* the se. tile's own ramp */
  --bar-bg:#131823; --bar-line:linear-gradient(90deg,#3d7fe0,#8a63d6 60%,#f0a040);
  --rail-bg:#12161f; --rail-fg:rgba(138,151,189,.24);
  --photo-warm:#d98a3a;
  --ok:#86e0a8; --ok-tint:rgba(63,180,107,.16); --warn:#f3c969; --warn-tint:rgba(230,163,46,.2);
  --danger:#f0746b; --danger-tint:rgba(240,116,107,.1);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 48px -16px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(78px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);color:var(--text-strong);letter-spacing:-.025em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:20px}
.wrap.narrow{max-width:760px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* Lucide swaps each <i> for an <svg> after load: size the placeholder in the same
   rule so nothing beside an icon shifts when it arrives. */
:where(i[data-lucide]){display:inline-block;width:24px;height:24px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-strong);font:600 14.5px var(--display);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent-grad);border-color:transparent;color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent-grad)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.block{width:100%}
.btn.icon{width:42px;padding:0}
.btn svg,.btn i[data-lucide]{width:17px;height:17px}
.btn[disabled]{opacity:.65;cursor:progress}
/* the light/dark switch shows the icon of the look it switches TO */
.theme-btn .when-dark,:root[data-theme="dark"] .theme-btn .when-light{display:none}
:root[data-theme="dark"] .theme-btn .when-dark{display:inline-block}

/* brand: the se. tile + the wordmark, painted in the surface's ink */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--logo-ink)}
.brand .tile{display:block;width:32px;height:32px;flex:none;border-radius:23.4%}
/* The wordmark's s and e are the tile's own letters; its x-height is 246/480 of
   its box (l top to y tail). Dropped 4.5% so its letters and the tile's share a
   middle line. Light mode paints it in the logo's blue → violet. */
.brand .word{display:block;flex:none;height:28px;aspect-ratio:1395/480;background:var(--logo-word,currentColor);
  -webkit-mask:url(/sellevry-wordmark.svg) center/contain no-repeat;mask:url(/sellevry-wordmark.svg) center/contain no-repeat;transform:translateY(4.5%)}

/* nav */
/* the app's top bar: white (dark: the bar's slate), closed by the blue → violet hairline */
.nav{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bar-bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--bar-line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{padding:8px 12px;border-radius:8px;text-decoration:none;font:500 14.5px var(--display);color:var(--text-muted)}
.nav-links a:hover{color:var(--text-strong);background:var(--surface-2)}
.nav-links a[aria-current]{color:var(--text-strong)}
.nav-cta{display:flex;gap:8px}
@media (max-width:880px){.nav-links{display:none}.nav .wrap{justify-content:space-between}.nav-cta .trial{display:none}}

/* hero */
.hero{position:relative;padding-block:72px 40px;text-align:center;overflow:hidden}
.slot{display:inline-flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;font:800 clamp(32px,9vw,104px)/1 var(--display);letter-spacing:-.045em;color:var(--text-strong);margin-bottom:12px;max-width:100%}
.slot .fixed{display:block;height:1.5em;line-height:1.5em;padding-right:.1em;color:var(--logo-ink)}
/* "sellevry" is the wordmark (sellevry-wordmark.svg), not typed: its x-height is
   the reel words' (Plus Jakarta Sans 800: .546em; the mark's is 246/480 of its
   box → 1.065em tall) and it stands on their baseline (the y's tail, 127/480 of
   the box, hangs below it). Same line box as the reel, so the same baseline. It
   keeps the page's ink: the reel word beside it carries the gradient. */
.slot-word{display:inline-block;height:1.065em;aspect-ratio:1395/480;vertical-align:-.282em;background:currentColor;
  -webkit-mask:url(/sellevry-wordmark.svg) center/contain no-repeat;mask:url(/sellevry-wordmark.svg) center/contain no-repeat}
.reel{position:relative;display:inline-block;height:1.5em;overflow:hidden;vertical-align:bottom;transition:width 1s cubic-bezier(.2,.72,.2,1);text-align:left;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.reel-strip{display:flex;flex-direction:column;will-change:transform}
.reel-strip span{display:block;height:1.5em;line-height:1.5em;white-space:nowrap;padding-right:.06em;
  background:var(--reel);-webkit-background-clip:text;background-clip:text;color:transparent}
.reel.spinning .reel-strip{filter:blur(.6px)}
/* the orange full stop at the end of the reel, standing on the reel word's
   baseline (the .375em lifts it from the line box's bottom to the baseline) */
.reel-dot{display:inline-block;flex:none;width:.15em;height:.15em;margin-left:.05em;margin-bottom:.375em;border-radius:50%;background:var(--dot);align-self:flex-end}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font:600 12.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--warm-ink);margin-bottom:14px}
.hero h1{font-size:clamp(28px,4.2vw,46px);line-height:1.12;max-width:760px;margin-inline:auto}
.hero .lede{max-width:620px;margin:16px auto 0;color:var(--text-muted);font-size:17.5px}

/* plans */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-block:28px 24px;align-items:stretch}
@media (max-width:920px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tier{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
.tier.pop{box-shadow:var(--shadow);border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--ring) border-box}
.badge{position:absolute;top:-12px;left:28px;padding:4px 11px;border-radius:999px;font:700 11.5px var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--ring);color:var(--on-accent)}   /* the pill wears its tier's ring */
.tier h3{font-size:22px}
.tier .for{color:var(--text-muted);font-size:14.5px;margin-top:4px;min-height:2.9em}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price .from{font:500 14px var(--display);color:var(--text-muted);width:100%}
.price .amt{font:700 44px/1 var(--display);letter-spacing:-.035em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.price .per{color:var(--text-muted);font-size:14px}
.price .note{width:100%;font-size:13px;color:var(--text-muted);min-height:1.4em}
/* an unpublished price (src/site/pricing.js null): the words take the amount's place */
.price .amt.tbd,.addon .pr .amt.tbd{font-size:30px;letter-spacing:-.02em;color:var(--text-strong)}
.calc-out .total strong.tbd{font-size:26px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0}
.facts div{padding:10px 12px;border-left:1px solid var(--border)}
.facts div:first-child{border-left:0}
.facts dt{font:600 11px var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.facts dd{margin:2px 0 0;font:600 15px var(--display);color:var(--text-strong)}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14.5px;flex:1}
.feat li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.feat svg,.feat i[data-lucide]{width:18px;height:18px;margin-top:2px;color:var(--ok)}
.feat .plus{font-weight:600;color:var(--text-strong)}
.tier .ctas{display:grid;gap:8px}

/* sections */
section.block{padding-block:72px}
.sec-head{max-width:680px;margin-bottom:36px}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15}
.sec-head p{color:var(--text-muted);margin-top:12px;font-size:17px}
.alt{background:var(--surface);border-block:1px solid var(--border)}

/* plan builder */
.calc{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc-in{padding:28px;display:grid;gap:22px}
.calc-row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.calc-label{font:600 15px var(--display);color:var(--text-strong)}
.calc-row .sub{grid-column:1/-1;font-size:13.5px;color:var(--text-muted);margin-top:-6px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.stepper button{width:38px;height:38px;border:0;background:var(--surface-2);color:var(--text-strong);cursor:pointer;font:600 18px var(--display)}
.stepper button:hover{background:var(--surface-3)}
.stepper output{min-width:48px;text-align:center;font:600 15px var(--mono)}
.calc-plan{display:flex;gap:6px;flex-wrap:wrap}
.calc-plan button{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:7px 12px;font:600 13.5px var(--display);color:var(--text-muted);cursor:pointer}
.calc-plan button[aria-pressed="true"]{border-color:var(--accent);color:var(--text-strong);background:var(--tint)}
.calc-out{padding:28px;background:var(--surface-2);display:flex;flex-direction:column;gap:14px}
.calc-out .lines{display:grid;gap:8px;font-size:14.5px}
.calc-out .lines div{display:flex;justify-content:space-between;gap:12px}
.calc-out .lines span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-strong)}
.calc-out .total{border-top:1px solid var(--border);padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc-out .total strong{font:700 34px var(--display);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.calc-out small{color:var(--text-muted);font-size:13px}

/* storefront add-on */
.addon{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:32px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
@media (max-width:760px){.addon{grid-template-columns:1fr}}
.addon h3{font-size:26px}
.addon p{color:var(--text-muted);margin-top:8px;max-width:560px}
.addon .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{font:500 13px var(--display);padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text)}
.addon .pr{text-align:right}
@media (max-width:760px){.addon .pr{text-align:left}}
.addon .pr .amt{font:700 36px var(--display);letter-spacing:-.03em;color:var(--text-strong)}
.addon .pr .per{color:var(--text-muted);font-size:14px}

/* modules */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
@media (max-width:900px){.mods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.mods{grid-template-columns:1fr}}
.mod{background:var(--surface);padding:20px;display:grid;grid-template-columns:36px 1fr;gap:4px 12px}
.mod .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--accent)}
.mod .ic svg,.mod .ic i[data-lucide]{width:18px;height:18px}
.mod b{font:600 15px var(--display);color:var(--text-strong)}
.mod span{font-size:13.5px;color:var(--text-muted);line-height:1.45}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
.why h3{font-size:17px;margin-bottom:6px}
.why p{color:var(--text-muted);font-size:14.5px}
.why .k{font:600 12px var(--mono);color:var(--warm-ink);margin-bottom:10px;display:block}

/* channels */
.chans{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chan{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:600 15px var(--display);color:var(--text-strong)}
.chan small{font:500 12px var(--display);color:var(--text-muted)}
.chan .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* faq */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.faq details{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:0 20px}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font:600 16px var(--display);color:var(--text-strong);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 22px var(--display);color:var(--text-muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:18px;color:var(--text-muted)}

/* ---------- home page ---------- */
.home-hero{padding-bottom:24px}
.who{list-style:none;padding:0;margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.who li{font:500 13.5px var(--display);padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text)}
.hero .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:16px;font-size:14px;color:var(--text-muted)}
.hero-note svg,.hero-note i[data-lucide]{width:16px;height:16px;color:var(--ok)}
.hero-note .sep{opacity:.5}
.hero .eyebrow{justify-content:center}

/* pictures of the app, drawn from the site's tokens (decorative: aria-hidden) */
.mock{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;text-align:left}
.mock-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{display:block;width:9px;height:9px;border-radius:50%;background:var(--surface-3)}
.mock-bar b{font:600 12.5px var(--mono);color:var(--text-muted)}
.mock-body{padding:16px;display:grid;gap:10px}
.mock-hero{max-width:980px;margin:44px auto 0}
.mock-app{display:grid;grid-template-columns:56px 1fr}
.mock-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0;background:var(--rail-bg)}
.mock-rail span{width:26px;height:26px;border-radius:8px;background:var(--rail-fg)}
.mock-rail span.on{background:var(--accent-grad)}
.mock-main{padding:20px;display:grid;gap:14px;min-width:0}
.mock-title{font:700 18px var(--display);color:var(--text-strong);letter-spacing:-.02em}
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.m-kpi{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}
.m-kpi span{display:block;font-size:12px;color:var(--text-muted)}
.m-kpi b{display:block;font:700 24px var(--display);color:var(--text-strong);letter-spacing:-.02em}
.m-list{display:grid;gap:8px}
.m-row,.m-head{display:flex;align-items:center;gap:10px;min-width:0}
.m-row{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.m-head{justify-content:space-between}
.m-main{flex:1;min-width:0;display:grid}
.m-title{font:600 13.5px var(--display);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sub{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-thumb{flex:none;width:34px;height:34px;border-radius:8px}
.m-thumb.lg{width:46px;height:46px;border-radius:10px}
.m-thumb.dim{opacity:.35}
.t1{background:linear-gradient(135deg,color-mix(in srgb,var(--grad-a) 45%,var(--surface-2)),color-mix(in srgb,var(--grad-b) 30%,var(--surface-2)))}
.t2{background:linear-gradient(135deg,color-mix(in srgb,var(--photo-warm) 45%,var(--surface-2)),color-mix(in srgb,var(--grad-b) 30%,var(--surface-2)))}
.t3{background:linear-gradient(135deg,color-mix(in srgb,var(--grad-b) 40%,var(--surface-2)),color-mix(in srgb,var(--grad-a) 25%,var(--surface-2)))}
.t4{background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 35%,var(--surface-2)),color-mix(in srgb,var(--grad-a) 25%,var(--surface-2)))}
.m-pill{flex:none;font:600 11.5px var(--display);padding:3px 9px;border-radius:999px;white-space:nowrap}
.m-pill.ok{background:var(--ok-tint);color:var(--ok)}
.m-pill.wait{background:var(--warn-tint);color:var(--warn)}
.m-pill.info{background:var(--tint);color:var(--accent)}
.m-tag{flex:none;font:600 11px var(--mono);padding:3px 7px;border-radius:6px;background:var(--surface-2);color:var(--text-muted);min-width:58px;text-align:center}
.m-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.m-progress{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.m-progress i{display:block;height:100%;border-radius:inherit;background:var(--accent-grad)}
.m-progress .w-70{width:70%}
.m-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.m-grid .m-thumb{width:100%;height:auto;aspect-ratio:1}
.m-sign{display:flex;align-items:center;gap:8px;padding:2px 2px 0}
.m-sign svg,.m-sign i[data-lucide]{width:16px;height:16px;color:var(--ok);flex:none}
.m-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--display);background:var(--tint);color:var(--accent)}
.m-ico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.m-ico svg,.m-ico i[data-lucide]{width:16px;height:16px}

/* the channels strip under the hero */
.chan-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;margin-top:36px;font:600 15px var(--display);color:var(--text-muted)}
.chan-strip .chan-cap{width:100%;text-align:center;font:600 12px var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}

/* one system: the steps an item takes */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;counter-reset:none}
.flow li{position:relative;display:grid;justify-items:center;gap:10px;text-align:center}
.flow li + li::before{content:"";position:absolute;top:24px;right:calc(50% + 30px);width:calc(100% - 50px);height:2px;background:var(--border)}
.flow .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--accent);position:relative}
.flow .ic svg,.flow .ic i[data-lucide]{width:22px;height:22px}
.flow b{font:600 14.5px var(--display);color:var(--text-strong)}

/* the five feature rows: words beside a picture, alternating sides */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature + .feature{margin-top:88px}
.feature.flip .feature-text{order:2}
.feature-text h2{font-size:clamp(24px,3vw,34px);line-height:1.15}
.feature-text > p{color:var(--text-muted);font-size:17px;margin:12px 0 20px}

/* the full toolbox */
.toolbox{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.toolbox > div{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:22px}
.toolbox h3{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:14px}
.toolbox h3 svg,.toolbox h3 i[data-lucide]{width:18px;height:18px;color:var(--accent);flex:none}
.toolbox ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14.5px;color:var(--text)}
.center-link{text-align:center;margin-top:28px}
.center-link > a:not(.btn){display:inline-flex;align-items:center;gap:6px;font:600 15px var(--display);color:var(--accent);text-decoration:none}
.center-link svg,.center-link i[data-lucide]{width:17px;height:17px}

/* built for resale: six cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.cards .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--accent);margin-bottom:14px}
.cards .ic svg,.cards .ic i[data-lucide]{width:20px;height:20px}
.cards h3{font-size:17px;margin-bottom:6px}
.cards p{color:var(--text-muted);font-size:14.5px}

/* getting started: three steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:24px}
.steps .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-grad);color:var(--on-accent);font:700 15px var(--display);margin-bottom:14px}
.steps h3{font-size:17px;margin-bottom:6px}
.steps p{color:var(--text-muted);font-size:14.5px}

@media (max-width:1000px){
  .toolbox{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .feature{grid-template-columns:1fr;gap:28px}
  .feature.flip .feature-text{order:0}
  /* stacked under its words, a picture keeps a desktop size instead of stretching */
  .feature > .mock{width:100%;max-width:560px;justify-self:center}
  .feature + .feature{margin-top:64px}
  .flow{grid-template-columns:repeat(4,1fr);row-gap:24px}
  .flow li + li::before{display:none}
  .steps{grid-template-columns:1fr}
  .mock-app{grid-template-columns:1fr}
  .mock-rail{display:none}
  .m-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .toolbox,.cards{grid-template-columns:1fr}
  .flow b{font-size:13px}
  .m-grid{grid-template-columns:repeat(4,1fr)}
  .mock-main{padding:14px}
  .mock-hero{margin-top:32px}
}

/* request form */
.req{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
@media (max-width:860px){.req{grid-template-columns:1fr;gap:24px}}
.req-intro h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15}
.req-intro > p{color:var(--text-muted);margin:12px 0 20px;font-size:17px}
.req-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.req-form{display:grid;gap:16px}
.seg{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0}
.seg legend{font:600 13px var(--display);color:var(--text-strong);margin-bottom:8px;padding:0}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1px solid var(--border);border-radius:9px;font:600 14px var(--display);color:var(--text-muted);background:var(--surface)}
.seg input:checked + span{border-color:var(--accent);color:var(--text-strong);background:var(--tint)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.req-grid{grid-template-columns:1fr}}
.lfield{display:grid;gap:6px}
.lfield > span:first-child{font:600 13px var(--display);color:var(--text-strong)}
.lfield em{font-style:normal;font-weight:500;color:var(--text-muted)}
.lfield input,.lfield select,.lfield textarea{width:100%;min-height:44px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-strong);padding:0 12px;font:16px var(--body)}
.lfield textarea{padding:10px 12px;resize:vertical;line-height:1.5}
.lfield input:focus,.lfield select:focus,.lfield textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.lfield [aria-invalid="true"]{border-color:var(--danger)}
.req-err{font-size:13px;color:var(--danger);min-height:0}
.req-err:empty{display:none}
.req-flash{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:14px;background:var(--danger-tint);color:var(--danger)}
.req-flash svg,.req-flash i[data-lucide]{width:16px;height:16px;flex:none;margin-top:3px}
.req-built{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text-muted);background:var(--surface-2);border-radius:10px;padding:10px 12px}
.req-built svg,.req-built i[data-lucide]{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent)}
.req-note{font-size:13px;color:var(--text-muted);text-align:center}
/* the human check (Cloudflare Turnstile): the box is reserved before the widget loads into it */
.req-human{min-height:65px}
.req-note a{color:var(--accent);font-weight:600}
/* the honeypot: real people never see or reach it */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.req-done{text-align:center;padding:24px 8px;display:grid;gap:10px;justify-items:center}
.req-done h3{font-size:22px}
.req-done p{color:var(--text-muted)}
.req-done-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--tint);color:var(--accent)}
.req-done-ic svg,.req-done-ic i[data-lucide]{width:24px;height:24px}

/* call to action */
/* it follows the request section, whose own bottom padding is the gap */
.cta-wrap{margin-top:0}
.cta{border-radius:22px;padding:56px 32px;text-align:center;background:var(--band);color:var(--on-grad)}
.cta h2{color:var(--on-grad);font-size:clamp(26px,3.6vw,40px)}
.cta p{opacity:.85;margin:12px auto 0;max-width:520px}
.cta .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta .btn{background:var(--on-grad-btn);color:var(--on-grad-btn-ink);border-color:transparent}
.cta .btn.ghost{background:transparent;color:var(--on-grad);border-color:var(--on-grad-line)}
.cta .btn.ghost:hover{background:var(--on-grad-hover)}

/* legal pages */
.legal-page{padding-block:56px 24px}
.legal-page h1{font-size:clamp(30px,4vw,42px);line-height:1.15}
.legal-page .updated{color:var(--text-muted);font-size:14px;margin:8px 0 28px}
.legal-page h2{font-size:21px;margin:32px 0 10px}
.legal-page p,.legal-page li{color:var(--text);font-size:16px}
.legal-page p + p{margin-top:12px}
.legal-page ul,.legal-page ol{padding-left:20px;margin:0;display:grid;gap:10px}
.legal-page h3{font-size:17px;margin:22px 0 8px}
.legal-page p + ul,.legal-page p + ol{margin-top:10px}
.legal-page ul + p,.legal-page ol + p{margin-top:12px}

/* footer */
.site-foot{padding-block:56px 40px;border-top:1px solid var(--border);margin-top:72px;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.4fr;grid-auto-columns:1fr;grid-auto-flow:column;gap:28px}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr;grid-auto-flow:row}.foot .about{grid-column:1/-1}}
.foot h4{font:600 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14.5px}
.foot a{text-decoration:none;color:var(--text)}
.foot a:hover{color:var(--accent)}
.foot .about p{color:var(--text-muted);font-size:14px;margin-top:12px;max-width:280px}
.foot .about .brand{color:var(--logo-ink)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--text-muted)}

/* a phone: touch-sized targets and no sideways scroll */
@media (max-width:480px){
  .hero{padding-block:48px 28px}
  section.block{padding-block:56px}
  .tier,.calc-in,.calc-out,.addon,.req-card{padding:22px}
  .cta{padding:40px 20px}
  .nav-cta{gap:4px}
}

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

/* topic pages (views/site/topic.ejs) */
.topic-feat{max-width:680px;font-size:16px}
.topic-table-wrap{max-width:900px;margin-inline:auto;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.topic-table{width:100%;border-collapse:collapse;font-size:15px}
.topic-table th,.topic-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.topic-table tbody tr:last-child > *{border-bottom:0}
.topic-table thead th{font:600 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.topic-table tbody th{font-weight:600;color:var(--text-strong);white-space:nowrap}
.topic-table td{color:var(--text-muted)}
.topic-note{max-width:900px;margin:12px auto 0;color:var(--text-muted);font-size:13.5px}
.topic-related{list-style:none;padding:0;margin:0 auto;max-width:820px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.topic-related a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);text-decoration:none;font-weight:500}
.topic-related a:hover{border-color:var(--accent);color:var(--accent)}
.topic-related svg,.topic-related i[data-lucide]{width:16px;height:16px}
/* on a phone each row is a card: the row's name, then each value under its column's name */
@media (max-width:640px){
  .topic-table thead{display:none}
  .topic-table tr{display:block;padding:14px 16px;border-bottom:1px solid var(--border)}
  .topic-table tbody tr:last-child{border-bottom:0}
  .topic-table th,.topic-table td{display:block;padding:0;border:0;white-space:normal}
  .topic-table tbody th{margin-bottom:6px}
  .topic-table td + td{margin-top:8px}
  .topic-table td::before{content:attr(data-label);display:block;font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);opacity:.8;margin-bottom:2px}
  .topic-table td:only-of-type::before{content:none}
}
.more-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-weight:600;font-size:14.5px}
.more-links a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none}
.more-links a:hover{text-decoration:underline}
.more-links svg,.more-links i[data-lucide]{width:15px;height:15px}