/* AirStaff marketing site — shared styles.
   Palette matches the product (frontend/src/styles.css). */
:root{
  --green:#1F6F54; --green-d:#155940; --green-l:#e8f3ee; --green-dk:#0f2b20;
  --ink:#17211d; --grey:#5b6a63; --line:#e3e9e6; --bg:#f6f9f7;
  --amber:#b57f22; --amber-l:#fdf6ec;
  --radius:12px; --wrap:1080px; --prose:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--green-d)}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,48px)}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:19px}
p+p{margin-top:.9em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:20}

/* chrome */
.site-head{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;padding:18px 24px;
}
.site-head nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.head-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site-head nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--green);text-decoration:underline}
.head-demo{color:var(--green-d);text-decoration:none;font-weight:600;font-size:15px}
.head-demo:hover{text-decoration:underline}
.head-login{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border:1.5px solid var(--line);border-radius:8px;padding:8px 14px}
.head-login:hover{border-color:var(--green);color:var(--green)}
.logo{font-size:23px;font-weight:800;letter-spacing:-.5px;color:var(--ink);text-decoration:none}
.logo b{color:var(--green)}

/* honest early-access status — stays until launch (README rule 7) */
.status-note{
  background:var(--amber-l);color:#6b5416;border-top:1px solid #f0e2c4;border-bottom:1px solid #f0e2c4;
  font-size:13.5px;line-height:1.5;text-align:center;padding:8px 24px;
}
.status-note strong{color:var(--amber)}

.btn{background:var(--green);color:#fff;padding:13px 26px;font-weight:600;border-radius:8px;text-decoration:none;display:inline-block;border:1.5px solid var(--green)}
.btn:hover{background:var(--green-d);border-color:var(--green-d)}
.btn-sm{padding:9px 16px;font-size:15px}
.btn-light{background:#fff;color:var(--green-d);border-color:#fff}
.btn-light:hover{background:var(--green-l);border-color:var(--green-l)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);padding:13px 26px;font-weight:600;border-radius:8px;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:#fff}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* layout blocks */
main>section{max-width:var(--wrap);margin:0 auto;padding:52px 24px}
main>section>p,main>section>h2+p,.prose{max-width:var(--prose)}
.lede{font-size:19px;color:var(--grey)}

.hero{background:linear-gradient(160deg,var(--green) 0%,#0e3d2c 100%);color:#fff;max-width:none;padding:64px 24px 68px}
.hero-in{max-width:var(--wrap);margin:0 auto}
.hero h1{max-width:16ch}
.hero p{max-width:60ch;opacity:.92;margin-top:18px;font-size:19px}
.hero .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;opacity:.8}
.hero .cta .btn{background:#fff;color:var(--green-d);border-color:#fff}
.hero .cta .btn:hover{background:var(--green-l);border-color:var(--green-l)}

/* home hero: copy + product illustration side by side */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero-grid h1{max-width:15ch;font-size:clamp(30px,4.2vw,44px)}
.hero-visual .mock{display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));border-radius:14px}
.trust{list-style:none;display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:20px;padding:0;font-size:14px}
.trust li{opacity:.92;position:relative;padding-left:20px}
.trust li::before{content:"\2713";position:absolute;left:0;color:#8fd3b8;font-weight:700}

/* the answer-first block: what an answer engine should quote */
.answer-box{background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:var(--radius);padding:26px 28px;max-width:var(--prose)}
.answer-box p{font-size:18px}

/* definition lists — stats and specs */
dl.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:26px;max-width:none}
dl.stats>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
dl.stats dt{font-size:27px;font-weight:800;color:var(--green);letter-spacing:-.02em}
dl.stats dd{font-size:15px;color:var(--grey);margin-top:4px}
dl.spec{margin-top:22px;max-width:var(--prose)}
dl.spec>div{display:grid;grid-template-columns:minmax(190px,32%) 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
dl.spec dt{font-weight:700}
dl.spec dd{color:var(--grey)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{margin-bottom:8px}
.card p{color:var(--grey);font-size:15px}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:28px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center;position:relative;display:flex;flex-direction:column}
.price.best{border:2px solid var(--green);box-shadow:0 10px 28px rgba(31,111,84,.14)}
.price .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 12px;border-radius:99px;white-space:nowrap}
.price h3{color:var(--green);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.price .amt{font-size:36px;font-weight:800;margin:10px 0 0}
.price .per{font-size:14px;color:var(--grey)}
.price ul{list-style:none;margin-top:14px;text-align:left;font-size:14px;color:var(--grey);flex:1}
.price li{padding:4px 0 4px 20px;position:relative}
.price li::before{content:"\2713";color:var(--green);font-weight:700;position:absolute;left:0}
.price .btn-buy{margin-top:16px;width:100%;padding:12px 10px;font-size:15px}
.price .guarantee{margin-top:8px;font-size:12px;color:var(--grey)}

/* tables */
.table-wrap{overflow-x:auto;margin-top:24px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px}
caption{text-align:left;color:var(--grey);font-size:14px;padding-bottom:10px}
th{background:var(--green-l);color:var(--green-d);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:12px 14px}
td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody th{background:#fff;color:var(--ink);text-transform:none;font-size:15px;letter-spacing:0}
.win{color:var(--green);font-weight:700}

/* steps */
ol.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:26px}
ol.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
ol.steps li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;margin-bottom:10px}
ol.steps h3{margin-bottom:6px}
ol.steps p{color:var(--grey);font-size:15px}

/* quote */
blockquote{background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:var(--radius);padding:28px;font-size:18px;max-width:var(--prose)}
blockquote footer{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:15px}
blockquote .av{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
blockquote .who span{display:block;color:var(--grey);font-size:14px}

/* prose lists */
.bullets{margin-top:18px;padding-left:22px;max-width:var(--prose)}
.bullets li{padding:5px 0}
.note{background:var(--green-l);border-radius:var(--radius);padding:18px 22px;margin-top:24px;font-size:15px;color:var(--green-d);max-width:var(--prose)}

/* legal documents rendered from markdown */
.legal{max-width:var(--prose)}
.legal h2{margin:34px 0 10px;font-size:24px}
.legal h3{margin:26px 0 8px;font-size:18px}
.legal p{margin-top:.8em}
.legal .bullets{margin-top:12px}
.legal code{background:var(--green-l);padding:1px 6px;border-radius:5px;font-size:.92em}

/* FAQ */
.faq{max-width:var(--prose);margin:0 auto;padding:52px 24px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-top:12px;padding:0 22px}
.faq summary{cursor:pointer;padding:18px 0;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--green);font-size:22px;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary h3{font-size:17px;font-weight:700}
.faq .answer{padding:0 0 20px;color:var(--grey)}

/* final CTA + footer — light, per the 7 Sep landing v2 decision (Geoff:
   "I'd rather the light background than the darker green"). The CTA sits in
   a mint panel on the paper ground; the footer is paper with a hairline. */
.final{position:relative;max-width:var(--wrap)!important;margin:0 auto;padding:56px 48px 64px;text-align:center}
.final::before{content:"";position:absolute;inset:0 24px;background:var(--green-l);border-radius:16px}
.final>*{position:relative}
.final h2{margin-bottom:10px;color:var(--green-d)}
.final p{color:var(--grey);max-width:56ch;margin:0 auto}
.final .cta{justify-content:center}
.final .btn-light{background:var(--green);color:#fff;border-color:var(--green)}
.final .btn-light:hover{background:var(--green-d);border-color:var(--green-d)}
.final .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.final .btn-ghost:hover{border-color:var(--green);color:var(--green)}
.site-foot{background:#fff;border-top:1px solid var(--line);color:var(--grey);padding:44px 24px 28px;font-size:15px}
.foot-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(260px,1.4fr) 1fr;gap:28px}
.foot-grid p{max-width:52ch}
.site-foot .logo{color:var(--ink)}
.site-foot .logo b{color:var(--green)}
.site-foot nav{display:flex;flex-direction:column;gap:9px}
.site-foot a{color:var(--grey);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.fine{max-width:var(--wrap);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:560px}
}
@media(max-width:760px){
  body{font-size:16px}
  .site-head{gap:12px 14px;padding:14px 20px}
  .site-head nav{width:100%;order:3;margin-left:0;gap:16px;font-size:15px}
  .head-cta{margin-left:auto;gap:12px}
  .status-note{text-align:left}
  dl.spec>div{grid-template-columns:1fr;gap:4px}
  .foot-grid{grid-template-columns:1fr}
  .final{padding:44px 20px 56px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home v2 (7 Sep 2026) — ported from 02-prototypes/AirStaff-Landing-v2.
   Every rule is scoped under .v2 so nothing here leaks into the other pages,
   and none of the legacy names above (.card, .btn, .win, .cta, .note, .fine,
   .steps, .price, .stats) are reused with a different meaning.
   Design-system tokens: 08-brand/airstaff-tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2{
  --as-green-700:#155940;--as-green-600:#1F6F54;--as-green-500:#2f9470;--as-green-400:#4fbf95;--as-green-100:#cfe0d8;
  --as-mint:#e8f3ee;--as-ink-900:#141c18;--as-ink-800:#17211d;--as-ink-700:#243029;--as-ink-500:#5b6a63;--as-ink-300:#8fae9f;
  --as-line:#e3e9e6;--as-mist:#f2f7f4;--as-paper:#f6f9f7;--as-surface:#fff;
  --as-amber-600:#B7791F;--as-amber-800:#7a5210;--as-amber-50:#fdf3e3;--as-clay-700:#8e2a1f;--as-clay-50:#fdeae7;--as-sky-600:#2E7DB2;--as-sky-50:#e6f1f8;
  --as-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-chip:4px;--r-input:6px;--r-btn:8px;--r-card:10px;--r-panel:14px;
  --sh-1:0 1px 2px rgba(20,28,24,.06);--sh-2:0 6px 20px -8px rgba(20,28,24,.18);--sh-3:0 20px 44px -18px rgba(20,28,24,.28);
  --surface:var(--as-surface);--surface-2:var(--as-mist);--ink-h:var(--as-ink-700);--ink-2:var(--as-ink-500);--ink-3:var(--as-ink-300);
  --accent:var(--as-green-600);--accent-press:var(--as-green-700);--accent-ink:#fff;--mint:var(--as-mint);--mint-ink:var(--as-green-700);
  --night:var(--as-ink-900);--night-mute:#9db3a9;--tile-a:#f0f7f3;--tile-b:#e2eee8;
  font-size:15px;line-height:1.55;font-weight:500;color:var(--ink);
}
main>section.v2{max-width:none;padding:0;margin:0}
.v2 .wrap{max-width:1120px;margin:0 auto;padding:80px 28px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.v2 p{margin:0}
.v2 a{color:inherit;text-decoration:none}
.v2 p a,.v2 .lede a,.v2 .lab a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* type scale — Display 800 −3% · H2 800 · H3 700 18 · body 500 15 · label 600 11 +8% caps */
.v2 .display{font-size:clamp(40px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink-h);margin:0;text-wrap:balance}
.v2 h2{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--ink-h);margin:0;text-wrap:balance}
.v2 h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink-h);margin:0}
.v2 .h2s{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-h);margin:0}
.v2 .lede{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:58ch}
.v2 .small{font-size:13px;line-height:1.4;color:var(--ink-2)}
.v2 .label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.v2 .label.green{color:var(--accent)}
.v2 .label.ink{color:var(--ink)}
.v2 h2.label{font-size:11px;font-weight:600;letter-spacing:.08em;margin-bottom:14px}
.v2 .num{font-variant-numeric:tabular-nums}
.v2 .sec-head{display:grid;gap:10px;max-width:62ch;margin-bottom:40px}

/* icons — 2px stroke, round caps, never filled */
.v2 .i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v2 .i.xs{width:16px;height:16px}
.v2 .tile-i{width:44px;height:44px;border-radius:11px;background:var(--mint);color:var(--mint-ink);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* buttons — 8px radius · 600 · verbs */
.v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;padding:10px 16px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;line-height:1.2;transition:background .15s}
.v2 .btn.lg{font-size:15px;padding:13px 20px}
.v2 .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.v2 .btn.primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
.v2 .btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.v2 .btn.secondary:hover{background:var(--surface-2);border-color:var(--line)}
.v2 .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2 .btn .i{width:18px;height:18px}

/* badges — colour + word, never colour alone */
.v2 .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.v2 .b-ok{background:var(--mint);color:var(--mint-ink)}
.v2 .b-warn{background:var(--as-amber-50);color:var(--as-amber-800)}
.v2 .b-info{background:var(--as-sky-50);color:var(--as-sky-600)}
.v2 .avatar{width:28px;height:28px;border-radius:50%;background:var(--as-green-100);color:var(--as-green-700);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:none}
.v2 .avatar.big{width:40px;height:40px;font-size:13px}
.v2 img.avatar{object-fit:cover;background:none}

/* surfaces — flat: tables · raised: cards · floating: menus */
.v2 .v2card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1)}
.v2 .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-2)}
.v2 .floating{box-shadow:var(--sh-3)}

/* ── hero: paper ground, mint stage ── */
.v2.hero2 .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 28px 72px}
.v2 .pill{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--mint-ink);border-radius:999px;padding:5px 12px 5px 8px;font-size:12.5px;font-weight:600;margin-bottom:20px}
.v2 .pill i{width:8px;height:8px;border-radius:50%;background:var(--as-green-500)}
.v2.hero2 .display{margin-bottom:18px}
.v2.hero2 .display .staff{color:var(--accent)}
.v2.hero2 .lede{margin-bottom:26px}
.v2 .actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.v2 .ticks{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink-2)}
.v2 .ticks span{display:inline-flex;align-items:center;gap:6px}
.v2 .ticks .i{color:var(--accent)}
.v2 .stage{position:relative;background:linear-gradient(180deg,var(--tile-a),var(--tile-b));border-radius:var(--r-panel);padding:40px 36px 56px 44px;min-height:460px}
.v2 .frame{background:var(--surface);color:var(--ink);border-radius:var(--r-card);border:1px solid var(--line);overflow:hidden}
.v2 .frame .bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.v2 .frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.v2 .pulse{display:grid;grid-template-columns:120px 1fr}
.v2 .pulse .side{background:var(--night);color:var(--night-mute);padding:14px 10px;font-size:11.5px;font-weight:600;display:grid;gap:6px;align-content:start}
.v2 .pulse .side span{padding:6px 8px;border-radius:var(--r-input)}
.v2 .pulse .side span.on{background:var(--as-green-600);color:#fff}
.v2 .pulse .side .wm{display:inline-flex;align-items:center;gap:0;font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap;font-size:13px;padding:0 0 8px 4px}
.v2 .pulse .side .wm span{padding:0}
.v2 .wm.on-night .air{color:#f6f9f7}
.v2 .wm.on-night .staff{color:var(--as-green-400)}
.v2 .pulse .main{padding:14px 16px;display:grid;gap:10px}
.v2 .pulse .ttl{font-size:13px;font-weight:700;color:var(--ink-h)}
.v2 .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v2 .kpi{background:var(--surface-2);border-radius:var(--r-card);padding:10px 12px}
.v2 .kpi .label{margin-bottom:4px}
.v2 .kpi b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink-h)}
.v2 .kpi small{font-size:12px;color:var(--ink-2);font-weight:600}
.v2 .row{display:grid;grid-template-columns:28px 96px 1fr auto;gap:10px;align-items:center;font-size:12px;min-height:36px}
.v2 .row .who b{display:block;font-weight:700;font-size:12.5px;color:var(--ink)}
.v2 .row .who small{color:var(--ink-2);font-size:11px}
.v2 .meter{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.v2 .meter i{display:block;height:100%;background:var(--as-green-600);border-radius:99px}
.v2 .meter i.warn{background:var(--as-amber-600)}
.v2 .tray{position:absolute;left:-16px;bottom:16px;width:224px;padding:14px;font-size:12px}
.v2 .tray .t{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin-bottom:10px}
.v2 .tray .dot{width:8px;height:8px;border-radius:50%;background:var(--as-green-500)}
.v2 .tray .big{font-family:var(--as-mono);font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink-h)}
.v2 .tray small{color:var(--ink-2);display:block;margin-top:4px}
.v2 .tray .btn{width:100%;margin-top:12px}
.v2 .shot{position:absolute;right:-12px;top:-18px;width:196px;overflow:hidden}
.v2 .shot .img{height:110px;position:relative;overflow:hidden;background:#dfe7e2}
.v2 .shot .img img{position:absolute;left:0;top:0;width:420px;max-width:none;height:auto;display:block}
.v2 .shot .cap{padding:8px 10px;font-size:11px;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between}
.v2 .shot .cap b{color:var(--accent)}

/* ── proof strip ── */
.v2.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.v2.proof .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between;padding:20px 28px}
.v2 .built{font-size:14px;color:var(--ink-2);max-width:48ch}
.v2 .built b{color:var(--ink)}
.v2 .chips{display:flex;gap:8px;flex-wrap:wrap}
.v2 .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 9px;font-size:12.5px;font-weight:600;background:var(--bg)}
.v2 .chip .i{width:16px;height:16px;color:var(--accent)}

/* ── cost ── */
.v2.cost .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.v2.cost h2{margin:10px 0 14px}
.v2.cost .small{margin-top:22px}
.v2 .chart{padding:22px}
.v2 .chart svg{width:100%;height:auto;display:block;font-family:inherit}
.v2 .leg{display:flex;gap:18px;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:6px;flex-wrap:wrap}
.v2 .leg span{display:inline-flex;align-items:center;gap:7px}
.v2 .leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.v2 dl.v2stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.v2 dl.v2stats>div{border-top:2px solid var(--as-green-100);padding-top:12px}
.v2 dl.v2stats dt{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1}
.v2 dl.v2stats dd{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.4}

/* ── how it works ── */
.v2.how{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v2 ol.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;padding:0;margin:0}
.v2 ol.steps3::before{content:"";position:absolute;left:16%;right:16%;top:84px;border-top:2px dashed var(--as-green-100)}
.v2 .step{display:grid;gap:12px;position:relative;align-content:start;grid-row:span 3;grid-template-rows:subgrid}
.v2 .step .art{min-height:170px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-card);display:grid;place-items:center;padding:24px 16px;position:relative}
.v2 .step .n{position:absolute;top:-12px;left:14px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.v2 .step p{color:var(--ink-2);font-size:14px}
.v2 .mini{width:100%;max-width:244px;font-size:11.5px;color:var(--ink);padding:12px 14px;display:grid;gap:7px}
.v2 .mini .from{display:flex;justify-content:space-between;color:var(--ink-2);font-size:10.5px;font-weight:600}
.v2 .mini .subj{font-weight:700;font-size:12.5px}
.v2 .mini code{display:block;background:var(--surface-2);border-radius:var(--r-input);padding:8px 10px;font-family:var(--as-mono);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--mint-ink)}
.v2 .mini .btn{padding:7px;font-size:11.5px}
.v2 .mini ul{margin:0;padding-left:16px;color:var(--ink-2);display:grid;gap:3px}
.v2 .mini .never{color:var(--mint-ink)}
.v2 .mini .kv{display:flex;justify-content:space-between;font-weight:600}
.v2 .mini .kv b{font-family:var(--as-mono);font-size:12px;font-weight:500;color:var(--mint-ink)}
.v2 .mini .kv b.amber{color:var(--as-amber-600)}
.v2 .def{margin-top:48px;padding:20px 24px;background:var(--surface-2);border-radius:var(--r-card);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;font-size:14.5px;color:var(--ink-2);max-width:900px}
.v2 .def strong{color:var(--ink)}

/* ── product tour: CSS-only tabs (radio + label, no script) ── */
.v2 .tour{position:relative}
.v2 .tour-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.v2 .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.v2 .tab{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;display:inline-flex;gap:8px;align-items:center;user-select:none}
.v2 .tab:hover{color:var(--ink)}
.v2 #tour-team:checked~.tabs label[for="tour-team"],
.v2 #tour-trends:checked~.tabs label[for="tour-trends"],
.v2 #tour-apps:checked~.tabs label[for="tour-apps"],
.v2 #tour-sheets:checked~.tabs label[for="tour-sheets"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.v2 #tour-team:focus-visible~.tabs label[for="tour-team"],
.v2 #tour-trends:focus-visible~.tabs label[for="tour-trends"],
.v2 #tour-apps:focus-visible~.tabs label[for="tour-apps"],
.v2 #tour-sheets:focus-visible~.tabs label[for="tour-sheets"]{outline:2px solid var(--accent);outline-offset:2px}
.v2 .tpanel{display:none;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.v2 #tour-team:checked~.tpanel-team,
.v2 #tour-trends:checked~.tpanel-trends,
.v2 #tour-apps:checked~.tpanel-apps,
.v2 #tour-sheets:checked~.tpanel-sheets{display:grid}
.v2 .tpanel .frame img{display:block;width:100%;height:auto}
.v2 .tpanel .side{display:grid;gap:12px;padding-top:6px}
.v2 .tpanel .side .h2s{font-size:22px}
.v2 .tpanel .side p{color:var(--ink-2);font-size:14.5px}
.v2 .tpanel .side ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.v2 .tpanel .side li{display:flex;gap:8px;align-items:flex-start}
.v2 .tpanel .side li .i{width:16px;height:16px;color:var(--accent);margin-top:3px}

/* ── what you get ── */
.v2.get{background:var(--surface);border-top:1px solid var(--line)}
.v2 .groups{display:grid;gap:36px}
.v2 .group{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding-top:36px;border-top:1px solid var(--line)}
.v2 .group:first-child{border-top:0;padding-top:0}
.v2 .group .lab{display:grid;gap:8px}
.v2 .group .lab p{color:var(--ink-2);font-size:14.5px}
.v2 .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v2 .feat{display:grid;gap:10px;align-content:start}
.v2 .feat p{color:var(--ink-2);font-size:14px}
.v2 .staffart{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.v2 .artcard{padding:16px;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.v2 .artcard .cap{font-size:13.5px;color:var(--ink-2)}
.v2 .artcard .cap b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.v2 .blur{height:100px;border-radius:var(--r-input);background:#dfe7e2;position:relative;overflow:hidden}
.v2 .blur div{position:absolute;filter:blur(5px);border-radius:3px}
.v2 .blur::after{content:"blurred at capture";position:absolute;left:8px;bottom:8px;background:var(--as-green-700);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:var(--r-chip)}
.v2 .counts{height:100px;border-radius:var(--r-input);background:var(--surface-2);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;align-content:center}
.v2 .counts div{background:var(--surface);border-radius:var(--r-input);padding:7px;text-align:center;border:1px solid var(--line)}
.v2 .counts b{display:block;font-family:var(--as-mono);font-size:16px;font-weight:500;color:var(--mint-ink)}
.v2 .counts small{font-size:10.5px;font-weight:600;color:var(--ink-2)}
.v2 .counts .no{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--as-clay-700);background:var(--as-clay-50);border-color:transparent}
.v2 .counts .no .i{width:15px;height:15px}

/* ── quote + five-year receipt · mint band ── */
.v2.quote{background:var(--mint)}
.v2.quote .wrap{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
.v2 blockquote.q2{background:none;border:0;border-radius:0;padding:0;margin:0;max-width:38ch;font-size:clamp(20px,2.1vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.35;text-wrap:pretty;color:var(--mint-ink)}
.v2 blockquote.q2 p::before{content:"\201C";color:var(--as-green-400);font-size:1.6em;line-height:0;vertical-align:-.2em;margin-right:4px}
.v2.quote .who{display:flex;gap:12px;align-items:center;margin-top:22px;font-size:14px;color:var(--ink-2)}
.v2.quote .who b{display:block;color:var(--ink)}
.v2 .receipt{padding:20px 22px;display:grid;gap:9px}
.v2 .receipt dl{display:grid;gap:9px}
.v2 .receipt .h{display:flex;justify-content:space-between;gap:12px}
.v2 .receipt .yr{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;font-size:13px;color:var(--ink-2)}
.v2 .receipt .yr dd{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.v2 .receipt .bar{display:block;height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.v2 .receipt .bar i{display:block;height:100%;background:var(--ink-3);border-radius:99px}
.v2 .receipt .yr b{font-family:var(--as-mono);font-size:13.5px;font-weight:500;color:var(--ink);min-width:60px;text-align:right}
.v2 .receipt .tot{border-top:1px dashed var(--line);margin-top:4px;padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline}
.v2 .receipt .tot dt{font-size:13px;color:var(--ink-2)}
.v2 .receipt .tot dd{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--ink-h)}
.v2 .receipt .vs{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:baseline;background:var(--mint);border-radius:var(--r-card);padding:12px 14px}
.v2 .receipt .vs dt{font-size:13px;font-weight:700;color:var(--mint-ink)}
.v2 .receipt .vs dd{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--mint-ink)}
.v2 .receipt .vs dd.sub{grid-column:1/-1;font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.v2 .receipt .fineprint{font-size:11.5px;color:var(--ink-3);line-height:1.4}

/* ── pricing ── */
.v2 .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.v2 .plan{padding:22px 20px;display:grid;gap:12px;align-content:start;position:relative}
.v2 .plan.pop{border-color:var(--accent);box-shadow:var(--sh-2)}
.v2 .plan .tag{position:absolute;top:-11px;left:20px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.v2 .plan h3.label{font-size:11px;font-weight:600;letter-spacing:.08em}
.v2 .price-v2{display:flex;align-items:baseline;gap:6px}
.v2 .price-v2 b{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink-h)}
.v2 .price-v2 small{font-size:13px;font-weight:600;color:var(--ink-2)}
.v2 .plan .seats{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700}
.v2 .plan .seats .i{width:18px;height:18px;color:var(--accent)}
.v2 .plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.v2 .plan li{display:flex;gap:8px;align-items:flex-start}
.v2 .plan li .i{width:16px;height:16px;color:var(--accent);margin-top:3px}
.v2 .plan .btn{margin-top:4px}
.v2 .plan .g{font-size:12px;color:var(--ink-2);text-align:center}
.v2 .plans-fine{margin-top:20px;font-size:13.5px;color:var(--ink-2);text-align:center;max-width:70ch;margin-inline:auto}

/* ── motion: the cost bars grow once; nothing moves for reduced-motion ── */
@media (prefers-reduced-motion:no-preference){
  .v2 .grow{transform-box:fill-box;transform-origin:bottom;animation:v2grow 1.1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes v2grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
}

/* ── responsive ── */
@media (max-width:1000px){.v2 .plans{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.v2.hero2 .wrap{grid-template-columns:1fr}.v2 .stage{margin-top:8px}.v2 .shot{right:0}.v2 .tray{left:0}}
@media (max-width:900px){
  .v2.cost .wrap{grid-template-columns:1fr}
  .v2 ol.steps3{grid-template-columns:1fr}.v2 ol.steps3::before{display:none}
  .v2 .tpanel{grid-template-columns:1fr}
  .v2 .group{grid-template-columns:1fr}.v2 .feats{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){.v2.quote .wrap{grid-template-columns:1fr}}
@media (max-width:760px){.v2 .wrap{padding:52px 20px}.v2.hero2 .wrap{padding:44px 20px 56px}}
@media (max-width:640px){.v2 .feats{grid-template-columns:1fr}.v2 .staffart{grid-template-columns:1fr}.v2 .artcard{grid-template-columns:1fr}}
@media (max-width:560px){
  .v2 .shot{display:none}.v2 .stage{padding:24px 20px 60px;min-height:0}
  /* 8 Sep: at 375 the hero mock's min-content (120px sidebar + four-column rows) forced
     the one-column grid to 415px and the whole page scrolled sideways. The grid item may
     now shrink below its content, and the mock loses its meter column and slims its sidebar. */
  .v2.hero2 .wrap>*{min-width:0}
  .v2 .pulse{grid-template-columns:92px 1fr}.v2 .pulse .side{padding:12px 8px}
  .v2 .row{grid-template-columns:28px 1fr auto}.v2 .row .meter{display:none}
  .v2 dl.v2stats{grid-template-columns:1fr}.v2 .plans{grid-template-columns:1fr}
}