/* levelupgrowth.io — the brand's own design system, ported from the original site (dark ground, violet→blue from the logo, glow). One stylesheet, no page-local CSS. */
:root{
  --bg:#0B0F19;--bg-2:#0E1320;--card:#121826;--card-2:#161D2E;--border:#1F2937;--border-2:#2D3748;
  --white:#FFFFFF;--text:#D1D5DB;--muted:#9CA3AF;--faint:#8B95A7;--dim:#5B6577;
  --purple:#7C3AED;--blue:#3B82F6;--violet:#A78BFA;--cyan:#38BDF8;--green:#00E5A8;--amber:#F59E0B;--red:#F87171;
  --grad:linear-gradient(135deg,var(--purple),var(--blue));
  --ff-h:"Manrope","Segoe UI",Helvetica,Arial,sans-serif;--ff-b:"Inter","Segoe UI",Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",Consolas,Menlo,monospace;
  --container:1180px;--gutter:24px;--r:16px;--r-lg:20px;
  --glow:0 0 40px rgba(124,58,237,.22);--shadow:0 20px 48px rgba(0,0,0,.35);
  --paper:var(--bg);--surface:var(--card);--ink:var(--white);--ink-2:var(--text);--ink-3:var(--muted);--rule:var(--border);--rule-2:rgba(255,255,255,.06);
  --accent:var(--purple);--accent-hover:#6D28D9;--accent-soft:rgba(124,58,237,.14);--accent-ink:var(--violet);--secondary:var(--blue);--secondary-soft:rgba(59,130,246,.14);
  --signal:var(--amber);--dark:var(--card);--dark-2:var(--bg-2);--on-dark:var(--white);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:15px;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--ff-h);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance;overflow-wrap:anywhere;color:var(--white)}
h1{font-size:clamp(1.886rem,3.772vw,3.198rem);font-weight:800}
h2{font-size:clamp(1.496rem,2.64vw,2.288rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700;line-height:1.3}
p{margin:0 0 1em;max-width:66ch;color:var(--text)}
.lede{font-size:1.04rem;color:var(--muted);max-width:56ch;line-height:1.7}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin:0 0 14px}
.eyebrow-badge{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.32);border-radius:100px;padding:6px 14px;text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600;color:var(--violet)}
.eyebrow-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.mono{font-family:var(--mono);font-size:.875rem}
.fine{font-size:.875rem;color:var(--faint)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}
.section{padding:116px 0;position:relative}
.section-tight{padding:78px 0;position:relative}
.section-alt{background:linear-gradient(180deg,rgba(18,24,38,.6),transparent)}
.section-dark{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.align-center{align-items:center}.align-start{align-items:start}
.mt{margin-top:28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:8px 12px;border-radius:6px}
.skip:focus{left:8px;z-index:100}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,15,25,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-row{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-h);font-weight:800;font-size:1.05rem;color:var(--white)}
.brand:hover{text-decoration:none}
.nav-primary{display:flex;gap:2px}
.nav-primary a{color:var(--muted);font-weight:500;padding:6px 11px;border-radius:7px;font-size:.9rem}
.nav-primary a:hover,.nav-primary a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.05);text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;background:none;border:1px solid var(--border-2);border-radius:8px;padding:6px;color:var(--white);cursor:pointer}
.nav-mobile{display:flex;flex-direction:column;gap:2px;padding:8px var(--gutter) 16px;border-top:1px solid var(--border);background:var(--bg)}
.nav-mobile[hidden]{display:none!important}
.nav-mobile a{padding:10px 8px;color:var(--white);font-weight:500;border-radius:8px}
@media (max-width:900px){.nav-primary,.nav-actions .btn-ghost{display:none}.nav-toggle{display:inline-flex}.nav-actions .btn-primary{padding:9px 14px}}
@media (min-width:901px){.nav-mobile{display:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-h);font-weight:700;font-size:.9rem;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 0 28px rgba(124,58,237,.3)}
.btn-primary:hover{box-shadow:0 4px 30px rgba(124,58,237,.45)}
.btn-secondary,.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--border-2);color:var(--text)}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--violet);color:var(--white)}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn .icon{width:18px;height:18px}

/* hero */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse,rgba(124,58,237,.16) 0%,transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;top:40%;right:-6%;width:520px;height:520px;background:radial-gradient(ellipse,rgba(59,130,246,.10) 0%,transparent 65%);pointer-events:none}
.hero .container{position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:56px 0 48px}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.hero-facts{display:flex;gap:18px;flex-wrap:wrap;font-size:.875rem;color:var(--faint)}
.hero-facts span{display:inline-flex;align-items:center;gap:6px}
.hero-facts .icon{color:var(--green)}

/* command center panel (illustrative, built from real names) */
.cc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite;position:relative}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cc-bar{display:flex;align-items:center;gap:5px;margin-bottom:16px}
.cc-dot{width:10px;height:10px;border-radius:50%}
.cc-url{flex:1;background:var(--bg);border-radius:6px;padding:5px 12px;margin-left:8px;color:var(--dim);font-size:.8125rem;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cc-head strong{font-family:var(--ff-h);font-size:.95rem;color:var(--white)}
.cc-tag{font-size:.8125rem;font-weight:600;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:100px;padding:3px 10px}
.cc-agents{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cc-agent{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 6px 10px;text-align:center;font-size:.8125rem;color:var(--muted)}
.orb{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;position:relative;display:block;background:radial-gradient(circle at 35% 30%,#fff 0,var(--o) 28%,color-mix(in srgb,var(--o),#000 45%) 100%);box-shadow:0 0 18px color-mix(in srgb,var(--o),transparent 40%),inset -6px -8px 14px rgba(0,0,0,.35)}
.orb.lead::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--o),transparent 50%);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.o-dmm{--o:#F59E0B}.o-seo{--o:#3B82F6}.o-content{--o:#8B5CF6}.o-social{--o:#38BDF8}.o-crm{--o:#00E5A8}
.cc-feed{background:var(--bg);border-radius:10px;padding:12px}
.cc-feed-label{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;font-weight:700}
.cc-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8125rem;color:var(--muted)}
.cc-row:last-child{border-bottom:0}
.cc-row .orb{width:22px;height:22px;margin:0;box-shadow:0 0 10px color-mix(in srgb,var(--o),transparent 50%)}
.cc-row .ok{margin-left:auto;color:var(--green);font-size:.8125rem;font-weight:600}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.cc-stat{background:var(--bg);border-radius:8px;padding:10px;text-align:center}
.cc-stat b{display:block;font-family:var(--ff-h);font-weight:800;font-size:1.3rem;color:var(--white)}
.cc-stat span{font-size:.8125rem;color:var(--dim)}
.cc-note{margin:10px 0 0;font-size:.8125rem;color:var(--dim);text-align:center}

/* product frame: interface schematic until the real screenshot exists */
.frame{margin:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--card-2)}
.frame-bar::before{content:"";width:34px;height:10px;background:radial-gradient(circle at 5px 5px,#F87171 4px,transparent 5px),radial-gradient(circle at 17px 5px,#FBBF24 4px,transparent 5px),radial-gradient(circle at 29px 5px,#34D399 4px,transparent 5px)}
.frame-url{font-family:var(--mono);font-size:.8125rem;color:var(--dim);background:var(--bg);border-radius:6px;padding:4px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-body{aspect-ratio:16/10;background:var(--bg);position:relative;display:block}
.frame-body img{width:100%;height:100%;object-fit:cover}
.frame-pending{position:absolute;inset:0;margin:0;border:0;padding:0;font-size:.8125rem;color:transparent;text-indent:-9999px;overflow:hidden}
.frame-pending::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--card-2);border-right:1px solid var(--border)}
.frame-pending::after{content:"";position:absolute;left:26%;right:4%;top:8%;height:84%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 14px,transparent 14px 26px),linear-gradient(90deg,rgba(124,58,237,.18),transparent 45%);border-radius:8px;border:1px solid var(--border)}
.frame figcaption{padding:10px 14px;font-size:.8125rem;color:var(--faint);border-top:1px solid var(--border)}
.frame figcaption::before{content:"Screenshot from the demo workspace at release · ";color:var(--violet);font-family:var(--mono);font-size:.8125rem}

/* grids and cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px 22px;transition:transform .28s,border-color .28s,box-shadow .28s}
.card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.45);box-shadow:0 20px 48px rgba(0,0,0,.3)}
.card > .icon{width:42px;height:42px;padding:10px;border-radius:11px;background:rgba(124,58,237,.14);color:var(--violet);margin-bottom:8px}
.card h3{margin-top:8px}
.card p{font-size:.95rem;margin-bottom:0;color:var(--muted)}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text)}
.feature-list .icon{flex:0 0 auto;color:var(--green);margin-top:3px}
.feature-list li.no{color:var(--dim)}
.feature-list li.no .icon{visibility:hidden}
.feature-list-light li{color:var(--text)}
.eyebrow-light{color:var(--violet)}
.steps{margin-top:8px}
.step{padding:8px 0 0}
.step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--ff-h);font-weight:800;font-size:1rem;margin-bottom:14px;box-shadow:var(--glow)}
.step h3{margin-bottom:6px}
.limit{margin-top:28px;padding:16px 20px;border-left:3px solid var(--amber);background:var(--card);border-radius:0 10px 10px 0;color:var(--text)}

/* team */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 18px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.legend .badge-dmm{background:#F59E0B;color:#F59E0B}.legend .badge-seo{background:#3B82F6;color:#3B82F6}.legend .badge-content{background:#8B5CF6;color:#8B5CF6}.legend .badge-social{background:#38BDF8;color:#38BDF8}.legend .badge-crm{background:#00E5A8;color:#00E5A8}
.team-h{display:none}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.agent{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color .2s,transform .2s}
.agent:hover{border-color:rgba(124,58,237,.45);transform:translateY(-2px)}
.agent strong{display:block;font-family:var(--ff-h);font-weight:700;font-size:.92rem;line-height:1.2;color:var(--white)}
.agent-title{display:block;font-size:.8125rem;color:var(--muted)}
.agent-level{display:none}
.badge{flex:0 0 auto;width:36px;height:36px;border-radius:50%;position:relative;display:inline-block;background:radial-gradient(circle at 35% 30%,#fff 0,var(--o,#7C3AED) 28%,color-mix(in srgb,var(--o,#7C3AED),#000 45%) 100%);box-shadow:0 0 14px color-mix(in srgb,var(--o,#7C3AED),transparent 45%);font-size:.8125rem;color:transparent;text-indent:-9999px;overflow:hidden}
.badge-dmm{--o:#F59E0B}.badge-seo{--o:#3B82F6}.badge-content{--o:#8B5CF6}.badge-social{--o:#38BDF8}.badge-crm{--o:#00E5A8}

/* products */
.products .product{display:block;color:inherit}
.products .product:hover{text-decoration:none}
.products .product h3{margin:12px 0 6px}
.products .product > .icon{background:rgba(59,130,246,.14);color:var(--cyan)}

/* plan strip (home) */
.plan-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
@media (max-width:1000px){.plan-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.plan-strip{grid-template-columns:repeat(2,1fr)}}
.plan-mini{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 14px;color:inherit;transition:transform .2s,border-color .2s}
.plan-mini:hover{text-decoration:none;transform:translateY(-3px);border-color:rgba(124,58,237,.45)}
.plan-mini.featured{border-color:rgba(124,58,237,.5);background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(59,130,246,.08));box-shadow:var(--glow)}
.plan-mini-name{font-family:var(--ff-h);font-weight:700;color:var(--white)}
.plan-mini-price{font-family:var(--ff-h);font-weight:800;font-size:1.5rem;color:var(--white);font-variant-numeric:tabular-nums}
.plan-mini-price small{font-family:var(--ff-b);font-weight:500;font-size:.85rem;color:var(--faint)}
.plan-mini-meta{font-family:var(--mono);font-size:.8125rem;color:var(--faint)}
.cta-final{text-align:center}
.cta-final p,.cta-final h2{margin-left:auto;margin-right:auto}
.cta-final .hero-actions{justify-content:center}

/* footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg-2);margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding:56px 0 40px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-h{font-family:var(--ff-h);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 12px;font-weight:700}
.site-footer a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0}
.site-footer a:hover{color:var(--white)}
.site-footer .brand{display:inline-flex;padding:0;margin-bottom:12px}
.footer-brand p{font-size:.9rem;color:var(--muted)}
.footer-fine{font-size:.8125rem;color:var(--dim)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 28px;border-top:1px solid var(--border);font-size:.85rem;color:var(--dim)}

/* page head + pricing */
.page-head{padding-top:72px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(124,58,237,.14) 0%,transparent 62%);pointer-events:none}
.page-head .container{position:relative}
.page-head h1{max-width:22ch}
.billing-toggle{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px;margin-top:8px}
.toggle-btn{font:inherit;font-family:var(--ff-h);font-weight:700;font-size:.9rem;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.toggle-btn.is-active{background:var(--grad);color:#fff}
.toggle-save{font-family:var(--mono);font-size:.8125rem;color:var(--green);background:rgba(0,229,168,.12);border-radius:999px;padding:2px 8px}
.toggle-btn.is-active .toggle-save{background:rgba(255,255,255,.18);color:#fff}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1000px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.plan-grid{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 22px;position:relative;transition:transform .28s,border-color .28s}
.plan:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.4)}
.plan.featured{background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(59,130,246,.08));border-color:rgba(124,58,237,.5);box-shadow:0 0 40px rgba(124,58,237,.18)}
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;border-radius:100px;padding:4px 14px;font-family:var(--ff-h);font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.plan-name{font-family:var(--ff-h);font-weight:800;font-size:1.25rem;margin:0;color:var(--white)}
.plan-desc{color:var(--faint);font-size:.875rem;margin:0;min-height:2.6em}
.plan-price{display:flex;align-items:baseline;gap:6px;font-family:var(--ff-h);font-weight:800;font-size:2.7rem;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.plan-price small{font-family:var(--ff-b);font-weight:500;font-size:.875rem;color:var(--faint);letter-spacing:0}
.plan-meta{font-family:var(--mono);font-size:.8125rem;color:var(--faint);margin:0}
.plan-features{margin:6px 0 8px}
.plan-features li{font-size:.9rem}
.plan-features li.no{display:none}
.plan .btn{margin-top:auto;justify-content:center}
.plan-addon{font-size:.8125rem;color:var(--faint);text-align:center;margin:8px 0 0}
.plan-enterprise{background:var(--bg-2);border-style:dashed}

/* matrix and tables */
.tbl{overflow-x:auto;margin:12px 0 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--card)}
.matrix{width:100%;border-collapse:collapse;font-size:.9rem;min-width:820px}
.matrix th,.matrix td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:middle;color:var(--text)}
.matrix thead th{font-family:var(--ff-h);font-weight:700;font-size:.95rem;background:var(--card-2);position:sticky;top:64px;color:var(--white)}
.matrix tbody th{font-weight:500;color:var(--text);width:26%}
.matrix td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.85rem}
.matrix td.mark .icon{color:var(--green)}
.matrix .dash{color:var(--dim)}
.matrix tr:last-child th,.matrix tr:last-child td{border-bottom:0}
.cmp{min-width:900px}
.cmp tr.us th,.cmp tr.us td{background:rgba(124,58,237,.12)}
.cmp td.num{white-space:normal}
.sr{position:absolute;left:-9999px}

/* faq */
.faq{max-width:760px}
.faq-item{border-top:1px solid var(--border);padding:6px 0}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-item summary{cursor:pointer;font-family:var(--ff-h);font-weight:700;font-size:1rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--white)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);color:var(--violet)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 0 14px;max-width:70ch;color:var(--muted)}

/* forms (site controls, never native-looking) */
.form{display:grid;gap:16px}
.form-row{display:grid;gap:6px}
.form-row-2{grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form-row-2{grid-template-columns:1fr}}
.form label{font-weight:600;font-size:.9rem;color:var(--white)}
.form .opt{font-weight:400;color:var(--faint);font-size:.8125rem;margin-left:6px}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;font:inherit;font-size:1rem;color:var(--white);background:var(--bg);border:1px solid var(--border-2);border-radius:10px;padding:12px 14px;appearance:none;-webkit-appearance:none;outline:none}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.form input[aria-invalid=true]{border-color:var(--red)}
.select{position:relative}
.select select{padding-right:40px}
.select-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(90deg);color:var(--faint);pointer-events:none}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:.9rem;color:var(--muted);cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{flex:0 0 auto;width:20px;height:20px;border:1px solid var(--border-2);border-radius:6px;background:var(--bg);display:grid;place-items:center;color:transparent;margin-top:2px}
.check input:checked + .check-box{background:var(--grad);border-color:transparent;color:#fff}
.check input:focus-visible + .check-box{box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.hp{position:absolute;left:-9999px;top:-9999px}
.form-error{color:var(--red);font-size:.9rem;margin:0}
.form-fine{margin:0}
.form-success{display:grid;justify-items:center;text-align:center;gap:6px;padding:12px 0 0}
.form-success .icon{color:var(--green)}
.form-success h3{margin:8px 0 0}
.form.is-done > :not(.form-success){display:none}
.form.is-done .form-success{display:grid}

/* blog */
.crumbs{display:flex;gap:8px;font-size:.875rem;color:var(--faint);margin-bottom:14px}
.crumbs a{color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid var(--border-2);border-radius:999px;background:var(--card);color:var(--muted);font-size:.875rem}
.chip:hover{text-decoration:none;border-color:var(--violet);color:var(--white)}
.chip .mono{color:var(--dim);font-size:.8125rem}
.post-card{display:flex;flex-direction:column;gap:6px;color:inherit}
.post-card:hover{text-decoration:none}
.post-card .eyebrow{margin:0}
.post-card h3{margin:2px 0 0}
.post-card p{flex:1}
.post-card-img{width:calc(100% + 44px);margin:-26px -22px 10px;border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/9;object-fit:cover}
.post-card-meta{font-size:.8125rem;color:var(--dim)}
.post-lead{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;color:inherit;padding:0;overflow:hidden}
.post-lead:hover{text-decoration:none}
.post-lead > div{padding:28px}
.post-lead-img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.post-lead h2{margin:6px 0 8px}
@media (max-width:820px){.post-lead{grid-template-columns:1fr}}
.post-head{padding:56px 0 8px}
.post-head h1{font-size:clamp(1.64rem,3.444vw,2.624rem)}
.byline{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:.9rem;color:var(--muted)}
.byline .badge{width:30px;height:30px}
.byline .mono{color:var(--dim);font-size:.8125rem}
.post-image{margin:18px 0 0}
.post-image img{border-radius:var(--r);border:1px solid var(--border)}
.post-grid{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:32px 0 8px}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}}
.toc{position:sticky;top:88px;align-self:start;font-size:.875rem}
.toc ol{margin:0;padding-left:18px;color:var(--muted)}
.toc li{margin:6px 0}
.toc a{color:var(--muted)}
.prose{max-width:66ch;font-size:1.05rem}
.prose h2{font-size:1.6rem;margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose p,.prose li{color:var(--text)}
.prose img{border-radius:10px;border:1px solid var(--border)}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--purple);color:var(--white)}
.prose pre{background:var(--card-2);color:var(--white);padding:14px 16px;border-radius:10px;overflow-x:auto;font-family:var(--mono);font-size:.875rem}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose td,.prose th{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
.prose .aeo-tldr{background:rgba(124,58,237,.12);border-radius:10px;padding:14px 18px;margin:0 0 20px}
.prose [style*="font-size"]{font-size:inherit!important}
.prose small,.prose sub,.prose sup,.prose figcaption{font-size:.8125rem}
.post-foot{padding:24px 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:.8125rem;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:3px 8px}

/* product pages */
.product-hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.avail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media (max-width:900px){.avail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.avail{grid-template-columns:1fr}}
.avail-item{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);color:var(--dim)}
.avail-item:hover{text-decoration:none;border-color:var(--violet)}
.avail-item.on{color:var(--white);background:var(--card)}
.avail-mark{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);color:var(--dim)}
.avail-item.on .avail-mark{background:rgba(0,229,168,.14);color:var(--green)}
.avail-name{font-weight:600}
.avail-name .mono{color:var(--faint);font-weight:400;margin-left:6px}
.avail-note{font-size:.8125rem;color:var(--faint)}
.weeks .week{padding:8px 0 0}
.weeks .week h3{margin:0 0 6px}

/* templates */
.tpl-card{display:flex;flex-direction:column;gap:8px;color:inherit}
.tpl-card:hover{text-decoration:none}
.tpl-card h3{margin:0}
.tpl-meta{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:.8125rem;color:var(--dim)}
.tpl-meta .live{color:var(--green)}
.blocks{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.blocks li{font-size:.875rem;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted)}

/* trust pages */
mark.owner{background:rgba(245,158,11,.18);color:#FCD34D;padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:.8125rem}
.notice{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--muted)}
.legal h2{font-size:1.35rem}
.legal .eff{font-family:var(--mono);font-size:.8125rem;color:var(--faint);margin-bottom:18px}
.status-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.status-item{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.status-dot{width:12px;height:12px;border-radius:50%;background:var(--dim)}
.status-dot.operational{background:var(--green);box-shadow:0 0 10px var(--green)}.status-dot.degraded{background:var(--amber)}.status-dot.down,.status-dot.major_outage{background:var(--red)}.status-dot.unknown,.status-dot.checking{background:var(--dim)}
.status-name{font-weight:600;color:var(--white)}
.status-state{color:var(--faint);font-size:.8125rem}
.gate{display:inline-block;font-family:var(--mono);font-size:.8125rem;padding:2px 8px;border-radius:4px}
.gate-ok{background:rgba(0,229,168,.14);color:var(--green)}.gate-boss{background:rgba(245,158,11,.16);color:#FCD34D}.gate-warn{background:rgba(245,158,11,.16);color:#FCD34D}
.log{padding:22px 0;border-top:1px solid var(--border)}
.log:last-child{border-bottom:1px solid var(--border)}
.log-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.log h2{font-size:1.35rem;margin:0 0 8px}
.log ul{margin:0;color:var(--muted)}

/* print */
@media print{.site-header,.site-footer,.hero-actions,.btn,.nav-mobile,.chips,.billing-toggle{display:none!important}body{background:#fff;color:#000;font-size:12pt}h1,h2,h3{color:#000}.container{max-width:none}}

/* ── light mode: the application's own light token set (public/app/index.html, html[data-theme="light"]); page background #F9F8F7, the same value grok.com uses ── */
html[data-theme="light"]{color-scheme:light;
  --bg:#F9F8F7;--bg-2:#F5F3F2;--card:#FFFFFF;--card-2:#F5F3F2;--border:rgba(15,13,10,.08);--border-2:#DDDDDD;
  --white:#050505;--text:#262626;--muted:#555555;--faint:#6B6B6B;--dim:#8A8A8A;
  --violet:#5B48C8;--green:#12664A;--amber:#8A5406;--red:#C62828;--cyan:#1E6FB0;
  --glow:0 0 32px rgba(124,58,237,.14);--shadow:0 16px 40px rgba(15,13,10,.10);
  --ink:#050505;--ink-2:#262626;--ink-3:#555555;--rule:rgba(15,13,10,.08);--rule-2:rgba(15,13,10,.06);--accent-ink:#5B48C8;--accent-soft:rgba(124,58,237,.10);--secondary-soft:rgba(56,96,190,.10);
}
html[data-theme="light"] .site-header{background:rgba(249,248,247,.86);border-bottom-color:rgba(15,13,10,.08)}
html[data-theme="light"] .nav-primary a:hover,html[data-theme="light"] .nav-primary a[aria-current="page"]{background:rgba(5,5,5,.06)}
html[data-theme="light"] .btn-secondary,html[data-theme="light"] .btn-ghost{background:#FFFFFF;border-color:#DDDDDD;color:#262626}
html[data-theme="light"] .btn-secondary:hover,html[data-theme="light"] .btn-ghost:hover{border-color:#7C3AED;color:#050505}
html[data-theme="light"] .btn-primary{box-shadow:0 1px 2px rgba(124,58,237,.25),0 8px 24px rgba(124,58,237,.18)}
html[data-theme="light"] .hero::before{background:radial-gradient(ellipse,rgba(124,58,237,.10) 0%,transparent 62%)}
html[data-theme="light"] .hero::after{background:radial-gradient(ellipse,rgba(59,130,246,.08) 0%,transparent 65%)}
html[data-theme="light"] .page-head::before{background:radial-gradient(ellipse,rgba(124,58,237,.09) 0%,transparent 62%)}
html[data-theme="light"] .section-alt{background:linear-gradient(180deg,#F5F3F2,transparent)}
html[data-theme="light"] .section-dark{background:#F5F3F2}
html[data-theme="light"] .eyebrow-badge{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.25)}
html[data-theme="light"] .cc-agent,html[data-theme="light"] .cc-feed,html[data-theme="light"] .cc-stat,html[data-theme="light"] .cc-url{background:#F5F3F2}
html[data-theme="light"] .cc-row{border-bottom-color:rgba(15,13,10,.06)}
html[data-theme="light"] .cc-tag,html[data-theme="light"] .avail-mark{background:rgba(5,5,5,.05)}
html[data-theme="light"] .frame-body{background:#F5F3F2}
html[data-theme="light"] .frame-pending::before{background:#EEEEEE;border-right-color:rgba(15,13,10,.08)}
html[data-theme="light"] .frame-pending::after{background:repeating-linear-gradient(180deg,rgba(15,13,10,.05) 0 14px,transparent 14px 26px),linear-gradient(90deg,rgba(124,58,237,.14),transparent 45%);border-color:rgba(15,13,10,.08)}
html[data-theme="light"] .plan-mini.featured,html[data-theme="light"] .plan.featured{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(59,130,246,.05))}
html[data-theme="light"] .plan-enterprise{background:#F5F3F2}
html[data-theme="light"] .matrix thead th{background:#F5F3F2}
html[data-theme="light"] .matrix th,html[data-theme="light"] .matrix td{border-bottom-color:rgba(15,13,10,.06)}
html[data-theme="light"] .cmp tr.us th,html[data-theme="light"] .cmp tr.us td{background:rgba(124,58,237,.08)}
html[data-theme="light"] .form input[type=text],html[data-theme="light"] .form input[type=email],html[data-theme="light"] .form select,html[data-theme="light"] .form textarea,html[data-theme="light"] .check-box{background:#FFFFFF}
html[data-theme="light"] .prose pre{background:#1E1E1E;color:#F3F3F3}
html[data-theme="light"] .prose .aeo-tldr{background:rgba(124,58,237,.08)}
html[data-theme="light"] mark.owner{background:rgba(138,84,6,.14);color:#8A5406}
html[data-theme="light"] .gate-ok{background:rgba(18,102,74,.12);color:#12664A}
html[data-theme="light"] .gate-boss,html[data-theme="light"] .gate-warn{background:rgba(138,84,6,.12);color:#8A5406}
html[data-theme="light"] .toggle-save{background:rgba(18,102,74,.10);color:#12664A}
html[data-theme="light"] .site-footer{background:#F5F3F2}
html[data-theme="light"] .avail-item{background:#F5F3F2}
html[data-theme="light"] .avail-item.on{background:#FFFFFF}
html[data-theme="light"] .avail-item.on .avail-mark{background:rgba(18,102,74,.12);color:#12664A}
html[data-theme="light"] .status-dot.operational{box-shadow:none}
/* theme toggle (unused: light is the only theme) */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border-2);background:transparent;color:var(--muted);cursor:pointer}
.theme-toggle:hover{color:var(--white);border-color:var(--violet)}
.theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:block}
html[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* mobile menu: panel over a blurred page */
.nav-backdrop{position:fixed;inset:64px 0 0 0;z-index:40;background:rgba(7,7,15,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-backdrop[hidden]{display:none!important}
.nav-mobile{position:absolute;left:0;right:0;top:100%;z-index:45;box-shadow:0 24px 48px rgba(15,13,10,.14);border-bottom:1px solid var(--border)}
html.menu-open{overflow:hidden}

/* footer: keep the page gutter, tidy the phone layout */
.footer-grid{padding:56px var(--gutter) 40px}
.footer-bottom{padding:18px var(--gutter) 28px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding:40px var(--gutter) 28px}.footer-brand{grid-column:1/-1}.footer-fine{display:none}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr 1fr}.site-footer a{padding:6px 0}.footer-bottom{flex-direction:column;gap:6px;padding:16px var(--gutter) 24px}}

/* mega menu + dropdowns (desktop) */
.nav-dd-wrap{position:relative}
.nav-trigger{font:inherit;font-family:var(--ff-b);font-weight:500;font-size:.9rem;color:var(--muted);background:none;border:0;padding:6px 11px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--white);background:rgba(5,5,5,.05)}
.caret{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s;margin-left:2px}
[aria-expanded="true"] .caret,details[open] > summary .caret{transform:translateY(2px) rotate(225deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-140px;width:min(920px,calc(100vw - 48px));background:var(--card);border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--shadow);z-index:100;padding:18px}
.mega[hidden],.nav-dd[hidden]{display:none!important}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mega-col-title{font-family:var(--ff-h);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:4px 0 8px;padding-left:8px}
.mega-item{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;color:inherit}
.mega-item:hover{background:rgba(124,58,237,.08);text-decoration:none}
.mega-ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(124,58,237,.10);color:var(--violet)}
.mega-body{display:grid;gap:1px}
.mega-name{font-weight:600;font-size:.9rem;color:var(--white)}
.mega-desc{font-size:.8125rem;color:var(--muted);line-height:1.35}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mega-journey{display:flex;gap:14px;flex-wrap:wrap}
.mega-j{display:grid;gap:1px}
.mega-j-step{font-family:var(--ff-h);font-weight:800;font-size:.8125rem;color:var(--violet)}
.mega-j-val{font-size:.8125rem;color:var(--muted)}
.nav-dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:240px;background:var(--card);border:1px solid var(--border-2);border-radius:14px;padding:8px;z-index:100;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.nav-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:.9rem;color:var(--text)}
.nav-dd-item:hover{background:rgba(124,58,237,.08);color:var(--white);text-decoration:none}
.nav-dd-item .icon{color:var(--violet)}
/* phone menu structure */
.nav-mobile{padding:6px var(--gutter) 18px;max-height:calc(100vh - 64px);overflow:auto}
.m-group{border-bottom:1px solid var(--border)}
.m-group summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 8px;font-weight:600;color:var(--white);cursor:pointer}
.m-group summary::-webkit-details-marker{display:none}
.m-group-title{font-family:var(--ff-h);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 8px 4px}
.m-item{display:flex;align-items:center;gap:10px;padding:9px 8px 9px 12px;color:var(--text);border-radius:8px;font-size:.95rem}
.m-item .icon{color:var(--violet)}
.m-link{display:block;padding:12px 8px;font-weight:600;color:var(--white);border-bottom:1px solid var(--border)}
.m-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 4px}
.m-actions .btn{justify-content:center}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-07 — Sarah-first narrative, real product screens, mobile-first sections.
   Dark hero and dark bands use the product's own palette (the app is dark); everything else stays on the light ground.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* header: the wordmark never wraps; on small phones only the mark shows */
.brand span{white-space:nowrap}
/* (the wordmark is never hidden — see the COPY CUT block below) */
.nav-primary a,.site-footer a,.m-item,.m-link{min-height:44px;display:inline-flex;align-items:center}
.site-footer a{display:flex;min-height:36px}

/* dark bands */
.hero-sarah,.section-dark,.cta-final{--paper:#0B0F19;--surface:#121826;--ink:#FFFFFF;--ink-2:#D1D5DB;--ink-3:#9CA3AF;--rule:#1F2937;background:#0B0F19;color:#D1D5DB}
.hero-sarah h1,.hero-sarah h2,.section-dark h2,.section-dark h3,.cta-final h2{color:#fff}
.hero-sarah p,.section-dark p,.cta-final p{color:#C7CDD8}
.lede-light{color:#C7CDD8!important}
.fine-light{color:#8B95A7!important}
.eyebrow-light{color:#A78BFA}
.btn-ghost-light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.btn-ghost-light:hover{border-color:#A78BFA;color:#fff}

/* hero */
.hero-sarah{padding:72px 0 64px;position:relative;overflow:hidden;border-bottom:1px solid #1F2937}
.hero-sarah::before{content:"";position:absolute;inset:auto auto -30% 55%;width:900px;height:700px;background:radial-gradient(ellipse,rgba(124,58,237,.28) 0%,transparent 62%);pointer-events:none}
.hero-sarah::after{content:"";position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(ellipse,rgba(59,130,246,.16) 0%,transparent 65%);pointer-events:none}
.hero-sarah .container{position:relative}
.hero-sarah-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.hero-sarah h1{font-size:clamp(1.722rem,3.608vw,2.952rem);max-width:14ch}
.hero-sarah .lede{max-width:50ch}
.hero-facts-light{list-style:none;padding:0;margin:0;display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:#C7CDD8}
.hero-facts-light li{display:inline-flex;align-items:center;gap:6px}
.hero-facts-light .icon{color:#00E5A8}
.hero-actions.center{justify-content:center}
@media (max-width:900px){.hero-sarah{padding:40px 0 40px}.hero-sarah-grid{grid-template-columns:1fr;gap:28px}.hero-sarah h1{max-width:none}.hero-shot{margin:0 -8px}}

/* real screens */
.frame-dark{background:#0E1320;border-color:#1F2937;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.frame-dark .frame-bar{background:#121826;border-color:#1F2937}
.frame-dark .frame-url{background:#0B0F19;color:#8B95A7}
.frame-dark .frame-body{aspect-ratio:16/10;background:#0B0F19}
.frame-dark img{width:100%;height:100%;object-fit:cover;object-position:top left}
.frame-dark figcaption{background:#0E1320;color:#9CA3AF;border-color:#1F2937}

/* a day with Sarah */
.seq{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:step}
.seq-step{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 16px 12px;min-width:0}
.seq-step .frame-body{aspect-ratio:16/11}
.seq-step figcaption{font-size:.78rem;line-height:1.4}
.seq-step h3{font-size:1.02rem;margin:4px 0 2px}
.seq-step p{font-size:.92rem;color:var(--ink-3);margin:0 0 8px}
.seq-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--ff-h);font-weight:800;font-size:.9rem}
@media (max-width:1000px){.seq{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .seq{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 4px 12px;margin-left:-4px;margin-right:-4px;-webkit-overflow-scrolling:touch}
  .seq-step{flex:0 0 84%;scroll-snap-align:start}
}

/* the workforce */
.team{display:grid;gap:14px}
.team-lead{display:flex;gap:14px;align-items:center;background:#121826;border:1px solid #1F2937;border-radius:var(--r);padding:14px 16px}
.team-lead b{display:block;color:#fff;font-family:var(--ff-h);font-size:1.05rem}
.team-lead span{color:#9CA3AF;font-size:.9rem}
.team-group{background:#121826;border:1px solid #1F2937;border-radius:var(--r);padding:12px 14px}
.team-group-h{display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-weight:700;color:#fff;font-size:.9rem;margin-bottom:8px}
.team-group-h .mono{color:#8B95A7;font-size:.78rem}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.dot-seo{background:#3B82F6;color:#3B82F6}.dot-content{background:#8B5CF6;color:#8B5CF6}.dot-social{background:#38BDF8;color:#38BDF8}.dot-crm{background:#00E5A8;color:#00E5A8}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:6px;align-items:baseline;background:#0B0F19;border:1px solid #1F2937;border-radius:100px;padding:6px 11px;font-size:.8rem;color:#9CA3AF;line-height:1.3}
.chip b{color:#fff;font-weight:600}
@media (max-width:760px){.chip{font-size:.78rem}}

/* the operating system */
.os-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}
.os-col{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px}
.os-h{font-family:var(--ff-h);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
.os-item{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-radius:10px;color:inherit;min-height:44px}
.os-item:hover{background:var(--accent-soft);text-decoration:none}
.os-item .icon{flex:0 0 auto;color:var(--accent-ink);margin-top:2px}
.os-item b{display:block;color:var(--ink);font-family:var(--ff-h);font-size:.95rem}
.os-item span{display:block;color:var(--ink-3);font-size:.86rem;line-height:1.45}
.os-item em{font-style:normal;color:var(--signal)}
@media (max-width:1000px){.os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.os-grid{grid-template-columns:1fr;gap:12px}}

/* approval flow */
.flow{list-style:none;margin:24px 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.flow li{position:relative;background:#121826;border:1px solid #1F2937;border-radius:var(--r);padding:16px 14px 14px}
.flow li b{display:block;color:#fff;font-family:var(--ff-h);margin:8px 0 2px}
.flow li span:last-child{color:#9CA3AF;font-size:.9rem}
.flow-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--ff-h);font-weight:800;font-size:.8rem}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#A78BFA;font-weight:700}
@media (max-width:760px){.flow{grid-template-columns:1fr 1fr}.flow li:not(:last-child)::after{display:none}}

/* pricing summary */
.price-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 14px}
.price-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 18px;color:inherit;min-height:44px;transition:transform .2s,border-color .2s}
.price-card:hover{text-decoration:none;transform:translateY(-3px);border-color:rgba(124,58,237,.45)}
.price-card.featured{border-color:rgba(124,58,237,.5);box-shadow:var(--glow)}
.price-name{font-family:var(--ff-h);font-weight:700;color:var(--ink)}
.price-amount{font-family:var(--ff-h);font-weight:800;font-size:2rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.price-amount small{font-family:var(--ff-b);font-weight:500;font-size:.9rem;color:var(--ink-3);margin-left:4px}
.price-line{color:var(--ink-3);font-size:.9rem;line-height:1.5}
@media (max-width:760px){.price-3{grid-template-columns:1fr}}

/* sections breathe less on phones */
@media (max-width:760px){.section{padding:64px 0}.section-tight{padding:46px 0}h2{font-size:clamp(1.364rem,5.28vw,1.936rem)}.lede{font-size:1.02rem}}

/* pricing page: the full matrix lives behind a disclosure on phones */
.matrix-wrap summary{cursor:pointer;font-family:var(--ff-h);font-weight:700;color:var(--ink);padding:12px 0;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
.matrix-wrap summary::-webkit-details-marker{display:none}
.matrix-wrap summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--accent-ink)}
.matrix-wrap[open] summary::after{content:"–"}
@media (min-width:761px){.matrix-wrap summary{display:none}.matrix-wrap:not([open]) .tbl{display:block}}
.plan-pick{margin:18px 0 6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan-pick div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;font-size:.92rem;color:var(--ink-2)}
.plan-pick b{display:block;color:var(--ink);font-family:var(--ff-h);margin-bottom:4px}
@media (max-width:760px){.plan-pick{grid-template-columns:1fr}}

/* footer headings are headings of the footer, not of the page */
.footer-h{display:block}

/* motion: only where it helps, never on phones */
@media (max-width:900px){.cc{animation:none}}

/* REDESIGN FIXUPS 1 (2026-09-07): real screens carry their own caption; nav triggers align with the taller links */
.frame-dark figcaption::before{content:none}
.nav-trigger{min-height:44px}

/* REDESIGN FIXUPS 2 (2026-09-08): the light theme repaints .section-dark grey, which made the dark bands' white text vanish.
   The dark bands are deliberately dark in both themes (the product is dark), so they win at theme specificity. */
html[data-theme="light"] .hero-sarah,html[data-theme="light"] .section-dark,html[data-theme="light"] .cta-final{background:#0B0F19;color:#D1D5DB}
html[data-theme="light"] .hero-sarah h1,html[data-theme="light"] .section-dark h2,html[data-theme="light"] .section-dark h3,html[data-theme="light"] .cta-final h2{color:#fff}
html[data-theme="light"] .hero-sarah p,html[data-theme="light"] .section-dark p,html[data-theme="light"] .cta-final p{color:#C7CDD8}
html[data-theme="light"] .section-dark .team-lead,html[data-theme="light"] .section-dark .team-group,html[data-theme="light"] .flow li{background:#121826;border-color:#1F2937}
html[data-theme="light"] .section-dark .btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.site-footer a{min-height:44px}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   COPY CUT + MOBILE-FIRST EVIDENCE (2026-09-08, Owner: "too spoon fed and wordy" · "screenshots are all desktop")
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* the company name is never hidden — it shrinks with the mark */
@media (max-width:420px){
  .brand span{display:inline!important;font-size:.95rem;letter-spacing:-.01em}
  .brand{gap:7px}
  .brand img{width:24px;height:24px}
  .nav-row{gap:10px}
  .nav-actions .btn-primary{padding:9px 12px;font-size:.82rem}
}
@media (max-width:360px){.brand span{font-size:.88rem}.nav-actions .btn-primary{padding:8px 10px;font-size:.78rem}}

/* responsive product evidence: a phone visitor sees the phone product, in a phone-shaped frame */
@media (max-width:760px){
  .frame-responsive .frame-body{aspect-ratio:390/500}
  .frame-responsive img{object-fit:cover;object-position:top center}
  .frame-responsive .frame-bar{padding:8px 12px}
}
/* a wide view kept on purpose: it scrolls inside its frame rather than shrinking to nothing */
.frame-desktop-only .frame-body{position:relative}
.frame-desktop-only figcaption::after{content:" ";}
@media (max-width:760px){
  .frame-desktop-only .frame-body{overflow-x:auto;-webkit-overflow-scrolling:touch;aspect-ratio:auto;height:auto}
  .frame-desktop-only img{width:820px;max-width:none;height:auto}
  .frame-desktop-only figcaption{color:var(--faint)}
}

/* the day sequence: four to five phone screens that swipe */
@media (max-width:760px){
  .seq-step{flex:0 0 78%}
  .seq-step h3{font-size:.98rem}
  .seq-step .frame-body{aspect-ratio:390/460}
}

/* tighter rhythm now that the copy is shorter */
.seq-step p{margin-bottom:6px}
.hero-sarah .lede{font-size:1.12rem;max-width:36ch}
@media (max-width:760px){.hero-sarah .lede{font-size:1.02rem}}
.hero-sarah .fine{margin-top:14px}
.section h2 + .os-grid,.section h2 + .seq{margin-top:22px}

/* COPY CUT FIX 1 (2026-09-08): a grid column defaults to min-content, so the 820px desktop-only screenshot forced the
   product hero wider than the phone and clipped the H1. Every grid track that can hold a wide screen is capped. */
.hero-grid,.grid-2,.grid-3,.grid-4,.hero-sarah-grid{min-width:0}
.hero-grid > *,.grid-2 > *,.grid-3 > *,.grid-4 > *,.hero-sarah-grid > *,.seq-step > *{min-width:0}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.grid-3,.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}}
.frame,.frame-body{max-width:100%}
.frame-desktop-only .frame-body{max-width:100%}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE BUILD, AND THE SITES (2026-09-08, Owner: "show the website capability, real designs, an HTML simulation")
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the replay ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.sim{margin-top:26px}
.sim-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px;align-items:start}
.sim-chat{background:#0E1320;border:1px solid #1F2937;border-radius:var(--r-lg);padding:16px;display:grid;gap:10px;align-content:start;box-shadow:var(--shadow)}
.sim-head{display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8B95A7;padding-bottom:8px;border-bottom:1px solid #1F2937}
.sim-dot{width:8px;height:8px;border-radius:50%;background:#00E5A8;box-shadow:0 0 10px #00E5A8}
.sim-msg{max-width:88%;border-radius:14px;padding:11px 14px;font-size:.94rem;line-height:1.55}
.sim-msg p{margin:0;color:inherit;max-width:none}
.sim-you{justify-self:end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.sim-arthur{justify-self:start;background:#161D2E;border:1px solid #1F2937;color:#D1D5DB;border-bottom-left-radius:5px}
.sim-who{display:block;font-family:var(--ff-h);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A78BFA;margin-bottom:3px}
.sim-build{background:#0B0F19;border:1px solid #1F2937;border-radius:12px;padding:12px 14px}
.sim-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sim-steps li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#9CA3AF}
.sim-steps .icon{color:#00E5A8;flex:0 0 auto}
.sim-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.sim-note{font-size:.86rem;color:var(--ink-3)}
.sim-result .frame{margin:0}
.sim-result figcaption a{color:var(--accent-ink);white-space:nowrap}
.sim-result figcaption a .icon{vertical-align:-2px}

/* replay states: JS adds .sim-armed, and nothing is hidden until it does */
.sim-armed .sim-msg,.sim-armed .sim-build{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.sim-armed .sim-result{opacity:0;transform:translateY(10px) scale(.985);transition:opacity .7s ease,transform .7s ease}
.sim-armed .sim-msg.on,.sim-armed .sim-build.on{opacity:1;transform:none}
.sim-armed .sim-result.on{opacity:1;transform:none}
.sim-armed .sim-steps li{opacity:.28;transition:opacity .3s ease}
.sim-armed .sim-steps li.on{opacity:1}
.sim-armed .sim-play[hidden]{display:inline-flex!important}
@media (prefers-reduced-motion:reduce){
  .sim-armed .sim-msg,.sim-armed .sim-build,.sim-armed .sim-result,.sim-armed .sim-steps li{opacity:1!important;transform:none!important;transition:none!important}
}
@media (max-width:900px){
  .sim-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .sim-chat{padding:13px}
  .sim-msg{max-width:92%;font-size:.9rem}
}

/* ── the gallery ────────────────────────────────────────────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:26px}
.gal-card{grid-column:span 2;display:flex;flex-direction:column;gap:0;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.gal-card.gal-lead{grid-column:span 3}
.gal-card:nth-child(2){grid-column:span 3}
.gal-card:hover,.gal-card:focus-visible{text-decoration:none;transform:translateY(-4px);border-color:rgba(124,58,237,.5);box-shadow:0 22px 50px rgba(0,0,0,.16)}
.gal-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0B0F19}
.gal-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.gal-card:hover .gal-shot img{transform:scale(1.03)}
.gal-open{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(11,15,25,.82);backdrop-filter:blur(6px);color:#fff;font-family:var(--ff-h);font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:100px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.gal-card:hover .gal-open,.gal-card:focus-visible .gal-open{opacity:1;transform:none}
.gal-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:14px 16px 0}
.gal-meta b{font-family:var(--ff-h);font-size:1.02rem;color:var(--ink)}
.gal-what{color:var(--ink-3);font-size:.88rem}
.gal-secs{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--accent-ink);background:var(--accent-soft);border-radius:100px;padding:3px 9px}
.gal-brief{display:block;padding:8px 16px 16px;color:var(--ink-3);font-size:.88rem;line-height:1.5;font-style:italic}
@media (max-width:1000px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}.gal-card,.gal-card.gal-lead,.gal-card:nth-child(2){grid-column:span 2}}
@media (max-width:760px){
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 4px 14px;margin:22px -4px 0;-webkit-overflow-scrolling:touch}
  .gal-card,.gal-card.gal-lead,.gal-card:nth-child(2){flex:0 0 82%;scroll-snap-align:start}
  .gal-shot{aspect-ratio:390/430}
  .gal-open{opacity:1;transform:none}
}

/* a nudge that the row scrolls, on phones only */
.swipe-hint{display:none}
@media (max-width:760px){.swipe-hint{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-3);margin-top:2px}}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE REPORT (2026-09-08). A real SEO audit rendered as the product surface itself, because "what does it tell me?"
   is the question the SEO page has to answer. Data: seo-data.php, captured from SeoService::deepAudit().
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.rep{margin-top:26px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.rep-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:26px;align-items:center;padding:24px 26px;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,var(--accent-soft),transparent)}
.rep-score{position:relative;width:120px;height:120px;flex:0 0 auto;display:grid;place-items:center}
.rep-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.rep-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.rep-ring-bg{stroke:var(--rule)}
.rep-ring-fg{stroke:#7C3AED}
.rep-num{font-family:var(--ff-h);font-size:2.5rem;font-weight:800;line-height:1;color:var(--ink)}
.rep-out{position:absolute;bottom:24px;font-size:.72rem;color:var(--ink-3);font-family:var(--mono)}
.rep-tally h3{font-size:1.05rem;margin:0 0 3px;font-family:var(--mono);word-break:break-all}
.rep-sub{color:var(--ink-3);font-size:.9rem;margin:0 0 10px}
.rep-counts{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.rep-counts li{font-size:.86rem;color:var(--ink-3)}
.rep-counts b{font-family:var(--ff-h);font-size:1.25rem;color:var(--ink);display:block;line-height:1.1}
.rep-counts .ok b{color:#0E9F6E}.rep-counts .warn b{color:#B45309}.rep-counts .bad b{color:#B91C1C}
.rep-bars{display:grid;gap:6px}
.rep-bar{display:grid;grid-template-columns:92px minmax(0,1fr) 30px;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-3)}
.rep-bar-t{height:7px;border-radius:100px;background:var(--rule);overflow:hidden}
.rep-bar-t i{display:block;height:100%;border-radius:100px;background:var(--grad)}
.rep-bar-n{font-family:var(--mono);font-size:.78rem;text-align:right;color:var(--ink)}
.rep-body{columns:2;column-gap:0;column-rule:1px solid var(--rule)}
.rep-group{padding:16px 26px;border-bottom:1px solid var(--rule);break-inside:avoid;-webkit-column-break-inside:avoid}
.rep-group-h{font-family:var(--ff-h);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.rep-group-h .mono{color:var(--accent-ink);background:var(--accent-soft);border-radius:100px;padding:2px 8px;font-size:.72rem;margin-left:4px}
.rep-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rep-checks li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:baseline;font-size:.88rem}
.rep-mark{grid-row:span 2;align-self:start;margin-top:2px}
.rep-pass .rep-mark{color:#0E9F6E}.rep-warning .rep-mark{color:#B45309}.rep-error .rep-mark{color:#B91C1C}
.rep-check{color:var(--ink);font-weight:600}
.rep-detail{grid-column:2;color:var(--ink-3);font-size:.83rem;line-height:1.45;word-break:break-word}
.rep-tag{grid-column:3;grid-row:1;font-family:var(--ff-h);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:100px;white-space:nowrap}
.rep-pass .rep-tag{color:#0E9F6E;background:rgba(14,159,110,.1)}
.rep-warning .rep-tag{color:#B45309;background:rgba(180,83,9,.12)}
.rep-error .rep-tag{color:#B91C1C;background:rgba(185,28,28,.12)}
.rep-foot{padding:18px 26px}
.rep-foot p{margin:0 0 10px;color:var(--ink-3);font-size:.9rem}
.rep-others{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.rep-others a{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:100px;padding:7px 15px;color:inherit;transition:border-color .25s ease,transform .25s ease}
.rep-others a:hover{text-decoration:none;border-color:rgba(124,58,237,.5);transform:translateY(-2px)}
.rep-o-score{font-family:var(--ff-h);font-weight:800;color:var(--accent-ink)}
.rep-o-sub{color:var(--ink-3);font-size:.8rem}
html[data-theme="dark"] .rep-counts .ok b{color:#34D399}
html[data-theme="dark"] .rep-counts .warn b{color:#FBBF24}
html[data-theme="dark"] .rep-counts .bad b{color:#F87171}
html[data-theme="dark"] .rep-pass .rep-mark,html[data-theme="dark"] .rep-pass .rep-tag{color:#34D399}
html[data-theme="dark"] .rep-warning .rep-mark,html[data-theme="dark"] .rep-warning .rep-tag{color:#FBBF24}
html[data-theme="dark"] .rep-error .rep-mark,html[data-theme="dark"] .rep-error .rep-tag{color:#F87171}
@media (max-width:900px){
  .rep-head{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:18px}
  .rep-bars{grid-column:1 / -1}
  .rep-body{columns:1;column-rule:0}
  .rep-group{padding:14px 18px}
  .rep-foot{padding:16px 18px}
  .rep-others a{width:100%}
}
@media (max-width:420px){
  .rep-score{width:96px;height:96px}
  .rep-num{font-size:2rem}
  .rep-out{bottom:18px}
  .rep-tally h3{font-size:.85rem;word-break:normal}
  .rep-others a{justify-content:space-between}
  .rep-checks li{grid-template-columns:18px minmax(0,1fr)}
  .rep-tag{grid-column:2;grid-row:auto;justify-self:start}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE JOURNEY (2026-09-08, Owner: "the homepage should act as a window of what's inside every page … think of it as a
   journey"). Each home section is a window with one way in, so the styles here are mostly about the way in: the
   inline link, the two small simulations, the stat peek, and the three doors at the end.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* the way in — an inline link that is a target, not a sentence */
.in{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-h);font-weight:700;font-size:.95rem;color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color .25s ease,gap .25s ease}
.in + .in{margin-left:18px}
.in:hover,.in:focus-visible{text-decoration:none;border-bottom-color:currentColor;gap:11px}
.in .icon{transition:transform .25s ease}
.in:hover .icon{transform:translateX(2px)}
.in-light{color:#A78BFA}

/* the stat peek beside the reports screen */
.peek{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:center;margin-top:24px}
.peek-side{display:grid;gap:14px;align-content:center}
.peek-stat{border-left:3px solid var(--accent);padding-left:14px}
.peek-stat b{display:block;font-family:var(--ff-h);font-size:2.6rem;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.02em}
.peek-stat b small{font-size:1rem;font-weight:600;color:var(--ink-3);margin-left:2px}
.peek-stat span{display:block;margin-top:5px;color:var(--ink-3);font-size:.9rem;line-height:1.45}
@media (max-width:900px){.peek{grid-template-columns:minmax(0,1fr);gap:18px}.peek-stat b{font-size:2.2rem}}

/* the two small simulations share the replay chrome from site-add3, and add their own trim */
.sim2{margin-top:24px;background:#0E1320;border:1px solid #1F2937;border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.sim2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.sim2-one{display:grid;gap:10px;align-content:start}
.sim2-head{display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8B95A7;padding-bottom:8px;border-bottom:1px solid #1F2937}
.sim2-head .sim-dot{width:8px;height:8px;border-radius:50%;background:#00E5A8;box-shadow:0 0 10px #00E5A8}
.sim2-out{background:#0B0F19;border:1px solid #1F2937;border-radius:12px;padding:14px 16px;color:#D1D5DB}
.sim2-out h4{font-family:var(--ff-h);font-size:1.02rem;color:#fff;margin:0 0 8px;line-height:1.35}
.sim2-meta{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.sim2-meta li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:.82rem;color:#9CA3AF;line-height:1.45}
.sim2-meta b{color:#8B95A7;font-family:var(--ff-h);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding-top:2px}
.sim2-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.sim2-note{font-size:.84rem;color:var(--ink-3)}
.sim2 .sim-msg{max-width:94%}
.sim-priya .sim-who{color:#34D399}
.sim-james .sim-who{color:#60A5FA}
.sim-bot .sim-who{color:#A78BFA}
.sim-visitor{justify-self:end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.sim2-lead{margin-top:10px;border:1px dashed #2C3A52;border-radius:12px;padding:12px 14px;background:rgba(0,229,168,.05)}
.sim2-lead b{display:block;font-family:var(--ff-h);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#00E5A8;margin-bottom:5px}
.sim2-lead span{color:#D1D5DB;font-size:.88rem}
@media (max-width:900px){.sim2-grid{grid-template-columns:minmax(0,1fr);gap:16px}.sim2{padding:13px}}

/* the three doors before the footer */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.door{display:flex;flex-direction:column;gap:9px;padding:22px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);color:inherit;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.door:hover,.door:focus-visible{text-decoration:none;transform:translateY(-4px);border-color:rgba(124,58,237,.5);box-shadow:0 20px 44px rgba(0,0,0,.14)}
.door .icon{color:var(--accent-ink)}
.door h3{font-size:1.08rem;margin:0}
.door p{margin:0;color:var(--ink-3);font-size:.92rem;line-height:1.55;flex:1}
.door-cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-h);font-weight:700;font-size:.85rem;color:var(--accent-ink)}
.door-soon h3::after{content:'Coming soon';margin-left:8px;font-family:var(--ff-h);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);background:var(--rule);border-radius:100px;padding:3px 8px;vertical-align:middle}
@media (max-width:900px){.doors{grid-template-columns:minmax(0,1fr)}}

/* the home price row is a glance, not the pricing page */
.price-3-tight{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.price-3-tight .price-card{padding:16px 14px}
.price-3-tight .price-amount{font-size:1.7rem}
@media (max-width:560px){.price-3-tight{grid-template-columns:minmax(0,1fr)}}

/* the article brief: labelled fields, not speech — so it must not look like a chat bubble from a person */
.sim-brief{justify-self:stretch;max-width:none;background:#161D2E;border:1px solid #1F2937;border-left:3px solid #34D399;border-radius:10px}
.sim-brief .sim-who{color:#8B95A7;font-size:.68rem;letter-spacing:.08em}
.sim-brief p{color:#E5E7EB}












/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FRAMES ARE AN EDITORIAL CHOICE (2026-09-08, Owner: "Do not limit the desktop view and mobile view on the devices
   used. It must be logic and based on the better design judgment", and "you can also use light mode screenshots not
   all dark … depending on the background of particular section").

   So: a phone frame renders as a phone at every width, a wide frame renders as a browser at every width, and a frame
   without .frame-dark takes its colours from the page tokens — light on a light section, dark on a dark one — while
   the screenshot inside it follows the reader's colour scheme through <picture> media.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* a phone, at any viewport — for conversations, queues and lists */
.frame-phone{max-width:300px;margin-inline:auto;border-radius:26px;border:8px solid var(--rule);background:var(--surface);box-shadow:0 26px 60px rgba(0,0,0,.28)}
.frame-phone .frame-bar{padding:7px 12px;border-radius:0;justify-content:center}
.frame-phone .frame-bar::before{content:"";width:52px;height:5px;border-radius:100px;background:var(--ink-3);opacity:.35;flex:0 0 auto}
.frame-phone .frame-url{display:none}
.frame-phone .frame-body{aspect-ratio:390/760;overflow:hidden}
.frame-phone .frame-body img{width:100%;height:100%;object-fit:cover;object-position:top center}
.frame-phone figcaption{padding:9px 12px;font-size:.78rem;line-height:1.45}
.frame-dark.frame-phone{border-color:#1F2937;background:#0B0F19;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.frame-dark.frame-phone .frame-bar::before{background:#2C3A52;opacity:1}
@media (max-width:560px){.frame-phone{max-width:260px;border-width:6px}}

/* a browser, at any viewport — for calendars, tables, dashboards and the studio canvas.
   On a narrow screen it scrolls inside itself rather than shrinking into illegibility. */
.frame-wide .frame-body{position:relative}
@media (max-width:760px){
  /* no phone capture for this screen: show the whole desktop window, scaled down. A shrunk-but-complete
     window reads as "this is the desktop app"; a 820px crop of it reads as a blank strip. */
  .frame-wide .frame-body{aspect-ratio:16/10;overflow:hidden}
  .frame-wide .frame-body img{width:100%;max-width:100%;height:100%;object-fit:contain;object-position:top left}
}

/* a phone frame sitting in a two-column row should not leave a canyon beside it */
.grid-2 .frame-phone{margin-inline:auto}

/* the caption prefix belongs to the old light-only frame; a themed frame carries its own wording */
.frame-wide figcaption::before,.frame-phone figcaption::before{content:none}

/* ── Basic and Advanced, side by side ──────────────────────────────────────────────────────────────────────────── */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:24px;align-items:start}
.mode-col h3{font-size:1.05rem;margin:0 0 4px}
.mode-col p{color:var(--ink-3);font-size:.92rem;line-height:1.55;margin:0 0 14px}
.mode-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-h);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:100px;padding:3px 10px;margin-bottom:8px}
@media (max-width:760px){.modes{grid-template-columns:minmax(0,1fr);gap:26px}}

/* Sarah's side of a real conversation, and yours */
.sim-you{justify-self:end;background:var(--grad);color:#fff;border-bottom-right-radius:5px;max-width:86%}
.sim-sarah{justify-self:start;background:#161D2E;border:1px solid #1F2937;color:#D1D5DB;border-bottom-left-radius:5px;max-width:94%}
.sim-sarah .sim-who{color:#A78BFA}

/* On a phone a browser-framed screen shows the app's own phone layout, so the frame becomes phone-shaped rather
   than a letterbox of empty desktop chrome. Only when such a capture exists. */
@media (max-width:760px){
  /* one extra class so this beats the horizontal-scroll rule above it, without !important */
  .frame.frame-wide-has-phone .frame-body{aspect-ratio:390/620;overflow:hidden;height:auto}
  .frame.frame-wide-has-phone .frame-body img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:top center}
}
/* the note under a simulation sits on the dark panel, not on the page */
.sim2-foot .sim2-note{color:#9CA3AF}










/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DESIGN PASS (2026-09-08). The page had become twelve identical bands: eyebrow, heading, paragraph, a whole app
   window shrunk into a rounded card with fake browser chrome, a link. Repeated. Nothing was ever big, nothing was
   ever cropped, nothing ever broke the grid, and the screenshots — the entire argument — were illegible at the size
   they were shown.

   This layer fixes the four things that made it read as a template:
     1. SCALE      one display size, and numbers that behave like images rather than text
     2. CROPPING   show a readable detail of a screen, not the whole window at 45%
     3. COMPOSITION  bleed, offset and overlap, so sections stop being interchangeable
     4. DARK       a real black with the product lit inside it, instead of murky navy
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. scale ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.display{font-family:var(--ff-h);font-weight:800;letter-spacing:-.035em;line-height:.98;
         font-size:clamp(2.05rem,4.428vw,3.772rem);margin:0 0 18px;text-wrap:balance}
.display-sm{font-size:clamp(1.64rem,2.952vw,2.46rem);letter-spacing:-.03em;line-height:1.04}
.say{margin-bottom:26px;font-size:clamp(1.008rem,1.44vw,1.296rem);line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0 0 22px}
.say-light{color:#B6BECD}

/* a number used as an image, not as body copy */
.big-n{display:block;font-family:var(--ff-h);font-weight:800;letter-spacing:-.05em;line-height:.82;
       font-size:clamp(3.9rem,10.14vw,8.58rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;
       color:transparent}
.big-n small{font-size:.18em;letter-spacing:0;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3);margin-left:.06em}
.big-cap{display:block;margin-top:6px;color:var(--ink-3);font-size:.95rem;line-height:1.5;max-width:26ch}

/* ── 2. cropping: a readable detail of a real screen ────────────────────────────────────────────────────────────── */
/* --z zoom (image width as a % of the window), --x/--y the corner of the region, both negative percentages. */
.crop{position:relative;overflow:hidden;border-radius:18px;background:var(--surface);
      box-shadow:0 30px 70px rgba(0,0,0,.16);isolation:isolate}
.crop::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--rule);pointer-events:none}
.crop img{position:absolute;left:0;top:0;width:var(--z,200%);max-width:none;height:auto;
          transform:translate(var(--x,0%),var(--y,0%));transform-origin:top left}
.crop-16{aspect-ratio:16/9}
.crop-4{aspect-ratio:4/3}
.crop-1{aspect-ratio:1/1}
.crop-tall{aspect-ratio:3/4}
.crop-dark{background:#07090F;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.crop-dark::after{border-color:#1C2434}
figure.crop-fig{margin:0}
.crop-note{margin-top:10px;font-size:.82rem;color:var(--ink-3);line-height:1.5}

/* ── 3. composition ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* an asymmetric row that actually uses the width */
.row-7-5{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.row-5-7{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.row-top{align-items:start}
@media (max-width:900px){.row-7-5,.row-5-7{grid-template-columns:minmax(0,1fr);gap:26px}}

/* two crops that overlap, so a pair reads as one composition instead of two cards */
.pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pair .crop:first-child{transform:translateY(18px)}
@media (max-width:760px){.pair{grid-template-columns:minmax(0,1fr);gap:14px}.pair .crop:first-child{transform:none}}

/* a band whose image runs to the edge of the screen */
.bleed{margin-inline:calc(50% - 50vw);padding-inline:clamp(16px,4vw,48px)}
.bleed-r{margin-right:calc(50% - 50vw)}
@media (max-width:900px){.bleed-r{margin-right:calc(50% - 50vw);}}

/* section rhythm: fewer, taller, more confident */
.sec{padding:clamp(78px,10.5vw,164px) 0}
.sec-tight{padding:clamp(54px,7.5vw,108px) 0}

/* ── 4. a real dark ─────────────────────────────────────────────────────────────────────────────────────────────── */
.night{position:relative;background:#07090F;color:#E8ECF3;overflow:hidden}
.night::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 30% 0%,rgba(124,58,237,.30),transparent 70%),
             radial-gradient(50% 50% at 85% 10%,rgba(0,229,168,.14),transparent 70%)}
.night .display,.night h2,.night h3{color:#fff}
.night .eyebrow{color:#A78BFA}
.night .big-n{background:linear-gradient(92deg,#C4B5FD,#7DD3FC);-webkit-background-clip:text;background-clip:text}
.night .big-n small,.night .big-cap{color:#93A0B4;-webkit-text-fill-color:#93A0B4}
.night .crop{background:#0B0F19}
.night .crop::after{border-color:#1C2434}
.night .in{color:#C4B5FD}

/* ── the workforce, as names rather than a wall of pills ────────────────────────────────────────────────────────── */
.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:36px}
.roster-col h3{font-family:var(--ff-h);font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
               color:#8B95A7;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #1C2434}
.roster-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.roster-col li b{display:block;font-family:var(--ff-h);font-weight:700;font-size:1.02rem;color:#fff;line-height:1.25}
.roster-col li span{display:block;font-size:.82rem;color:#93A0B4;line-height:1.4}
@media (max-width:900px){.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (max-width:420px){.roster{grid-template-columns:minmax(0,1fr)}}

/* small helpers the new home needs */
.center-x{margin-inline:auto}
.night .say{color:#B6BECD}
.night .fine{color:#8A94A6}
.night .price-card{background:#0E1320;border-color:#1C2434}
.night .feature-list span{color:#D3DAE5}
.sec.night + .sec.night{padding-top:0}

/* wider windows, for strips of a table or a row of stat cards */
.crop-21{aspect-ratio:21/9}
.crop-strip{aspect-ratio:4/1}
@media (max-width:760px){.crop-strip{aspect-ratio:2/1}.crop-21{aspect-ratio:16/10}}
/* the phone in a two-column row can afford to be bigger */
.row-7-5 .frame-phone,.row-5-7 .frame-phone{max-width:340px}
/* a made image is a photograph, not a UI capture: no inner border */
.crop-plain::after{content:none}

/* A pair is a comparison. Comparisons stay side by side, including on a phone: stacking them turned each crop
   into a 5x zoom of a nav rail, which is what broke the "two ways in" row on mobile. */
@media (max-width:760px){
  .pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pair .crop:first-child{transform:none}
  .pair .crop-tall{aspect-ratio:2/3}
  .crop-note{font-size:.74rem;margin-top:7px}
}
.mt-xl{margin-top:clamp(28px,4vw,54px)}

/* The chatbot is a widget on someone's website, so it is shown as one: a whole phone, not a chat log two screens
   tall. The capture is 390x844, so the frame keeps that shape rather than cropping the widget off the bottom. */
.frame-phone-full{max-width:330px}
.frame-phone-full .frame-body{aspect-ratio:390/844}
.frame-phone-full .frame-body img{object-fit:cover;object-position:bottom center}
.widget-stage{display:flex;justify-content:center}
@media (max-width:900px){.frame-phone-full{max-width:300px}}

/* the lead the conversation produced, as facts rather than a card */
.lead-list{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:12px;max-width:36ch}
.lead-list li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:baseline;
              padding-bottom:12px;border-bottom:1px solid var(--rule)}
.lead-list li:last-child{border-bottom:0}
.lead-list b{font-family:var(--ff-h);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.lead-list span{font-size:1.02rem;color:var(--ink)}
.widget-stage{flex-direction:column;align-items:center}
.widget-stage .crop-note{max-width:32ch;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   SARAH-LED HOME (2026-09-08). Three tiers of visual, not twelve equal ones: the film and the loop are large, the
   proof crops are medium, everything else is type. New pieces: the loop, the film, the triad, the two-plan row.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the loop: the whole product in one screen ──────────────────────────────────────────────────────────────────── */
.loop{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;gap:0;
      grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:loop}
.loop-step{position:relative;padding:22px 20px 24px;border-top:2px solid var(--rule)}
.loop-step + .loop-step{border-left:1px solid var(--rule)}
.loop-step::before{content:"";position:absolute;left:0;top:-2px;width:0;height:2px;background:var(--grad);transition:width .6s ease}
.loop-step.lit::before{width:100%}
.loop-n{display:block;font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.08em}
.loop-who{display:block;margin-top:12px;font-family:var(--ff-h);font-size:.7rem;font-weight:700;letter-spacing:.1em;
          text-transform:uppercase;color:var(--accent-ink)}
.loop-you .loop-who{color:var(--ink-3)}
.loop-label{display:block;margin-top:4px;font-family:var(--ff-h);font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.2}
.loop-text{display:block;margin-top:8px;font-size:.9rem;line-height:1.55;color:var(--ink-3)}
.loop-out{margin-top:18px}
@media (max-width:900px){
  .loop{grid-template-columns:minmax(0,1fr)}
  .loop-step{padding:16px 0 18px;border-top:1px solid var(--rule)}
  .loop-step + .loop-step{border-left:0}
  .loop-step::before{height:1px}
  .loop-label{font-size:1.05rem}
}

/* ── the film: the largest thing on the page, because it is the strongest ───────────────────────────────────────── */
.film{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#0B0F19;border:1px solid #1C2434;
      box-shadow:0 40px 90px rgba(0,0,0,.55)}
.film video{display:block;width:100%;height:auto}
.film figcaption{padding:12px 18px;font-size:.84rem;color:#93A0B4;border-top:1px solid #1C2434}

/* ── the range, as three columns of type ───────────────────────────────────────────────────────────────────────── */
.triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.triad-ico{display:inline-flex;color:var(--accent-ink)}
.triad-col h3{font-family:var(--ff-h);font-size:1.5rem;margin:10px 0 6px;letter-spacing:-.02em}
.triad-col p{color:var(--ink-3);font-size:.95rem;line-height:1.6;margin:0 0 14px}
.triad-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.triad-col a{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-h);font-weight:700;font-size:.95rem;color:var(--ink)}
.triad-col a:hover{color:var(--accent-ink);text-decoration:none}
@media (max-width:760px){.triad{grid-template-columns:minmax(0,1fr);gap:26px}}

/* ── two plans on the home page, not six ───────────────────────────────────────────────────────────────────────── */
.price-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-inline:auto;max-width:620px}
@media (max-width:560px){.price-2{grid-template-columns:minmax(0,1fr)}}
.feature-list-light span{color:#D3DAE5}
.narrow{max-width:760px;margin-inline:auto}
.hero-shot .crop-note{margin-top:12px;color:#93A0B4}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE HERO EARNS ITS PLACE (2026-09-08). It used to open on a name nobody knows, promise something about her rather
   than about the buyer, and illustrate itself with an approval queue. It now leads with the outcome, names what it
   replaces, prices it, and plays the build immediately.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hero-film{padding:clamp(48px,7vw,104px) 0 clamp(56px,8vw,112px)}
.hero-film-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:980px){.hero-film-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
.hero-film .hero-copy h1{font-size:clamp(1.968rem,3.772vw,3.198rem);line-height:1.02;letter-spacing:-.035em}
.hero-film .lede{max-width:46ch}

/* the three things a buyer wants to know before they scroll */
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);margin:26px 0 0;padding:0}
.hero-facts li{display:flex;flex-direction:column;gap:4px}
.hero-facts b{font-family:var(--ff-h);font-size:clamp(1.408rem,2.288vw,1.848rem);font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.hero-facts b small{font-size:.5em;font-weight:600;color:#93A0B4;margin-left:1px}
.hero-facts span{font-size:.8rem;line-height:1.4;color:#93A0B4}

/* the film, at the size of the argument it is making */
.film-hero{box-shadow:0 44px 100px rgba(0,0,0,.6)}
.hero-film-stage{position:relative}
@media (min-width:981px){.hero-film-stage{margin-right:calc(50% - 50vw);max-width:calc(100% + 8vw)}}
.film-hero figcaption{font-size:.8rem}






/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ONE DARK WORLD (2026-09-08, Owner's reference: MoonRow).

   The page alternated light and dark bands, which is why it read as a series of documents rather than one product.
   The reference commits: a single near-black canvas, an aurora lighting the top of the page, product UI inside soft
   bordered panels with an accent edge, one glowing call to action, and centred section intros with a pill label.

   The site's dark tokens already existed — layout.php was pinning data-theme="light" over them. That is flipped, and
   this layer adds the atmosphere, the panel treatment and the type scale on top.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the canvas and its light ────────────────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{--paper:#07070F;--bg:#07070F;--bg-2:#0B0B14;--card:#0E0F1A;--card-2:#121327;
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.12);--rule:rgba(255,255,255,.07);
  --accent:#6D4AFF;--accent-ink:#B7A6FF;--accent-soft:rgba(109,74,255,.16);--teal:#2FE0C8;
  --grad:linear-gradient(135deg,#6D4AFF,#2FE0C8)}
body{background:var(--paper)}

/* the aurora: one light source for the whole page, strongest at the top */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:130vh;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 42% at 12% -6%, rgba(47,224,200,.18), transparent 62%),
    radial-gradient(52% 44% at 30% 12%, rgba(109,74,255,.32), transparent 64%),
    radial-gradient(46% 38% at 78% 2%,  rgba(59,130,246,.16), transparent 66%);
  filter:blur(10px)}
main,footer{position:relative;z-index:1}   /* not .site-header: it is sticky at z-index 50 and must stay there */

/* sections stop being bands; the canvas is continuous */
.sec,.sec-tight,.section,.section-alt,.section-dark,.night{background:transparent}
.night::before{content:none}
.sec.night,.section-dark{background:transparent}

/* ── the pill label above a heading ──────────────────────────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:100px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-family:var(--ff-h);font-size:.78rem;font-weight:600;letter-spacing:.01em;color:#C7CEDB}
.centred{text-align:center}
.centred .say,.centred .lede{margin-inline:auto}

/* ── the hero ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero-mr{padding:clamp(52px,7vw,110px) 0 clamp(40px,5vw,72px);text-align:center;position:relative}
.hero-mr h1{font-family:var(--ff-h);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(2.132rem,5.248vw,4.428rem);margin:22px auto 0;max-width:16ch;text-wrap:balance}
.hero-mr .hero-sub{margin:22px auto 0;max-width:56ch;color:#98A2B6;font-size:clamp(0.96rem,1.2vw,1.104rem);line-height:1.6}
.hero-mr .hero-cta{margin-top:34px;display:flex;justify-content:center}

/* the one button, with the halo that makes it the only thing to press */
.btn-glow{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:100px;
  background:#0B0B14;color:#fff;font-family:var(--ff-h);font-weight:700;font-size:1.02rem;border:1px solid rgba(255,255,255,.14);
  transition:transform .25s ease}   /* no isolation: the halo must paint behind the fill, not over it */
.btn-glow::before{content:"";position:absolute;inset:-18px -22px;border-radius:100px;z-index:-1;filter:blur(20px);opacity:.95;
  background:conic-gradient(from 210deg,#FF4FD8,#6D4AFF,#2FE0C8,#3B82F6,#FF4FD8)}
.btn-glow:hover{transform:translateY(-2px);text-decoration:none;color:#fff}
.hero-mr .fine{margin-top:16px;color:#7C879B}

/* three facts, as numerals */
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(26px,5vw,72px);margin:44px 0 0;padding:0;list-style:none}
.facts li{display:flex;flex-direction:column;gap:6px;text-align:center}
.facts b{font-family:var(--ff-h);font-size:clamp(1.64rem,2.788vw,2.378rem);font-weight:800;line-height:1;color:#fff;letter-spacing:-.035em}
.facts b small{font-size:.42em;font-weight:600;color:#7C879B;margin-left:2px}
.facts span{font-size:.82rem;line-height:1.45;color:#7C879B}

/* ── panels: product UI in a soft frame with an accent edge, no fake browser chrome ─────────────────────────────── */
.panel{position:relative;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);padding:10px;box-shadow:0 50px 120px rgba(0,0,0,.6)}
.panel-in{border-radius:18px;overflow:hidden;border:1px solid rgba(47,224,200,.28);box-shadow:0 0 0 1px rgba(47,224,200,.10),0 0 44px rgba(47,224,200,.16)}
.panel-in video,.panel-in img{display:block;width:100%;height:auto}
.panel figcaption{padding:14px 8px 6px;text-align:center;font-size:.84rem;color:#7C879B}
.hero-panel{margin-top:clamp(34px,5vw,64px)}

/* the existing crops inherit the panel look instead of a card look */
.crop{border-radius:18px;background:#0B0B14;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.crop::after{border-color:rgba(255,255,255,.10)}
.crop-note{color:#7C879B}

/* frames keep their chrome only where a browser is the point (a customer's own website) */
.frame{background:var(--card);border-color:rgba(255,255,255,.08)}

/* ── cards: hairline, dark, one highlighted ─────────────────────────────────────────────────────────────────────── */
.triad-col,.door,.price-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px}
.triad-col h3,.door h3{color:#fff}
.triad-col p,.door p{color:#8B96AB}
.triad-ico,.door .icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  background:rgba(109,74,255,.16);border:1px solid rgba(109,74,255,.3);color:#B7A6FF}
.price-card.featured{background:linear-gradient(180deg,rgba(47,224,200,.14),rgba(109,74,255,.10));border-color:rgba(47,224,200,.34)}

/* ── type, on a dark canvas ─────────────────────────────────────────────────────────────────────────────────────── */
.display,h2.display,.display-sm{color:#fff}
.say{color:#98A2B6}
.eyebrow{color:#B7A6FF}
.big-n{background:linear-gradient(92deg,#B7A6FF,#2FE0C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.big-cap,.fine{color:#7C879B}
.loop-step{border-top-color:rgba(255,255,255,.10)}
.loop-step + .loop-step{border-left-color:rgba(255,255,255,.07)}
.loop-label{color:#fff}
.loop-text,.loop-n{color:#8B96AB}
.lead-list li{border-bottom-color:rgba(255,255,255,.08)}
.lead-list span{color:#fff}
.lead-list b{color:#7C879B}
.feature-list span{color:#D3DAE5}
.roster-col h3{border-bottom-color:rgba(255,255,255,.09)}

@media (max-width:760px){
  .hero-mr h1{max-width:14ch}
  .facts{gap:22px}
  .panel{border-radius:20px;padding:7px}
  .panel-in{border-radius:14px}
}

/* the finished site, directly under the film */
.hero-result{margin-top:18px}
.hero-result figcaption a{color:#B7A6FF}
@media (min-width:981px){
  .hero-panel{max-width:1080px;margin-inline:auto}
  .hero-result{max-width:1080px}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ARTHUR IN THE HERO — hosting the app's own wizard (2026-09-08).

   The wizard styles itself from the app shell's tokens. Rather than restyle its markup, the hero declares the same
   token names with the marketing site's dark values, so the app's components arrive already dressed for this page
   and stay correct as the app changes them.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

#ax{
  --s1:#0E0F1A;              /* surface: cards and the modal body        */
  --s2:#151728;              /* surface 2: bubbles, inputs, step bars    */
  --bd:rgba(255,255,255,.10);/* hairline                                 */
  --t1:#F2F5FA;              /* primary text                             */
  --t2:#C3CBDA;              /* secondary text                           */
  --t3:#8B96AB;              /* muted text                               */
  --p:#6D4AFF;               /* accent, matching the hero's own          */
  --ac:#2FE0C8;              /* success/teal, matching the hero's own    */
  --fh:var(--ff-h);
  padding:0;overflow:hidden;text-align:left;color:var(--t1)
}
#ax #arthur-modal{position:static;background:none;backdrop-filter:none;display:block}
#ax #arthur-feed{scrollbar-width:thin}
#ax input,#ax textarea,#ax button{font-family:inherit}

/* the one panel this page adds: the account, asked for between the summary and the finishing touches */
#ax .ax-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
#ax #ax-signup-card input{
  width:100%;box-sizing:border-box;background:var(--s2);border:1px solid var(--bd);border-radius:10px;
  color:var(--t1);font-size:13px;padding:11px 13px;outline:none
}
#ax #ax-signup-card input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(109,74,255,.18)}
#ax #ax-signup-card ::placeholder{color:#5C6577}
#ax .ax-err{color:#FF8FA3;font-size:12px;line-height:1.5;margin-top:8px;min-height:1em}
#ax .ax-fallback{padding:26px 18px;text-align:center;color:var(--t3);font-size:.9rem}
#ax .ax-fallback a{color:#B7A6FF}

@media (max-width:600px){ #ax .ax-grid2{grid-template-columns:1fr} }

/* the app shows toasts through a shell this page does not have */
.ax-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;
  background:#151728;border:1px solid rgba(255,255,255,.12);color:#F2F5FA;
  padding:11px 18px;border-radius:100px;font-size:.86rem;box-shadow:0 18px 46px rgba(0,0,0,.5);
  transition:opacity .5s ease,transform .5s ease
}
.ax-toast.err{border-color:rgba(255,143,163,.4);color:#FF8FA3}
.ax-toast.go{opacity:0;transform:translateX(-50%) translateY(8px)}


/* The hero chat on a phone: short until the visitor speaks, then nearly full height, never over the menu bar. */
@media (max-width:760px){
  #ax .lu-arthur-modal{height:min(46vh,370px)!important;transition:height .45s ease}
  /* Expanded: out of the flow and pinned under the menu bar, so the conversation IS the screen.
     z-30 is deliberate — under the header (50) and under the nav backdrop (40), so the hamburger
     still opens over the chat and remains the way off this screen. */
  #ax.ax-tall{position:fixed;inset:64px 0 0 0;z-index:30;margin:0;padding:0;border:0;border-radius:0;
    background:var(--card,#0E0F1A);box-shadow:none}
  /* Both links in the chain: the modal resolved 100% against an auto-height parent and stayed short. */
  /* KB-1 (Owner 2026-09-22): with the keyboard open the panel follows the VISIBLE viewport - Android via the meta
     (interactive-widget=resizes-content makes 100dvh shrink), iOS via --ax-vvh/--ax-vvt kept by site.js - so the
     composer at its foot is never under the keyboard. */
  #ax.ax-tall #arthur-modal{height:100%}
  #ax.ax-tall .lu-arthur-modal{height:100%!important;max-height:none!important;border-radius:0}
  /* A fixed body is the only reliable page lock on a phone; overflow:hidden alone leaves touch scrolling.
     The negative top keeps the page exactly where it was, and it is put back on collapse. */
  html.ax-locked{overflow:hidden;height:100%;overscroll-behavior:none}
  body.ax-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
  /* Sticky resolves against a scrolling ancestor; with the body fixed there is none, so pin it. */
  body.ax-locked .site-header{position:fixed;top:0;left:0;right:0;z-index:50}
}


/* Only offered once the chat has taken the screen, and only at the width where that happens. */
#ax .ax-collapse{display:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;
  color:var(--t2);cursor:pointer;flex:0 0 34px}
#ax .ax-collapse:hover{color:var(--t1);background:rgba(255,255,255,.1)}
@media (max-width:760px){#ax.ax-tall .ax-collapse{display:inline-flex}}


/* Domain search. One field, one button, and a list that says yes or no per ending. */
.dsearch{border:1px solid var(--border-2,rgba(255,255,255,.12));border-radius:22px;padding:clamp(20px,3vw,34px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.dsearch-h{font-family:var(--ff-h);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.02em;margin:0 0 16px;color:#fff}
.dsearch-bar{display:flex;gap:10px;flex-wrap:wrap}
.dsearch-bar input{flex:1 1 260px;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;color:#fff;font:inherit;font-size:1.02rem;padding:15px 18px;outline:none}
.dsearch-bar input:focus{border-color:rgba(109,74,255,.62);box-shadow:0 0 0 3px rgba(109,74,255,.18)}
.dsearch-bar input::placeholder{color:#5C6577}
.dsearch-bar .btn{flex:0 0 auto;padding-inline:26px}
.dsearch-note{color:#7C879B;font-size:.85rem;margin:12px 0 0}
.dsearch-msg{color:#FF8FA3;font-size:.88rem;margin:14px 0 0}
.dsearch-results{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dsearch-results li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.dsearch-name{font-family:var(--ff-h);font-weight:700;color:#fff;font-size:1.02rem;word-break:break-all}
.dsearch-tag{font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:100px}
.dsearch-tag.yes{color:#0B2E24;background:#2FE0C8}
.dsearch-tag.no{color:#8B96AB;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.dsearch-price{color:#D3DAE5;font-size:.92rem}
.dsearch-cta{margin-left:auto}
@media (max-width:640px){.dsearch-cta{margin-left:0;width:100%}.dsearch-cta .btn{width:100%;text-align:center}}


/* The headline result, then what else is free. */
.dsearch-exact{margin:22px 0 0;padding:22px;border-radius:18px;border:1px solid rgba(47,224,200,.34);
  background:linear-gradient(180deg,rgba(47,224,200,.10),rgba(47,224,200,.03));display:flex;align-items:center;
  gap:16px;flex-wrap:wrap}
.dsearch-exact.taken{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.dsearch-exact .dsearch-name{font-size:clamp(1.1rem,2.1vw,1.5rem)}
.dsearch-sub{width:100%;color:#8B96AB;font-size:.86rem;margin:2px 0 0}
.dsearch-recs{margin:26px 0 0}
.dsearch-recs-h{font-family:var(--ff-h);font-size:1rem;font-weight:700;color:#C3CBDA;margin:0 0 12px;
  letter-spacing:.01em}
.dsearch-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.dsearch-list li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.dsearch-list .dsearch-name{font-size:.98rem}
.dsearch-pill{margin-left:auto;font-size:.78rem;font-weight:700;color:#B7A6FF;white-space:nowrap}
@media (max-width:640px){.dsearch-exact{gap:10px}.dsearch-pill{margin-left:0}}


/* The cart, which is a summary and a promise rather than a checkout: the account is made at the end. */
.dcart{margin:26px 0 0;border:1px solid rgba(109,74,255,.34);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(109,74,255,.10),rgba(109,74,255,.03))}
.dcart-lines{display:flex;flex-direction:column}
.dcart-line{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.dcart-line .dsearch-name{font-size:.96rem}
.dcart-line .dsearch-price{margin-left:auto}
.dcart-x{background:none;border:0;color:#7C879B;font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;padding:4px 6px}
.dcart-x:hover{color:#FF8FA3}
.dcart-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px}
.dcart-total{font-family:var(--ff-h);font-weight:800;color:#fff;font-size:1.1rem}
.dcart-foot .btn{margin-left:auto}
.dcart-note{margin:0;padding:0 18px 16px;color:#7C879B;font-size:.82rem}
.dsearch-add{margin-left:auto;font:inherit;font-size:.84rem;font-weight:700;padding:9px 15px;border-radius:10px;
  border:1px solid rgba(109,74,255,.45);background:rgba(109,74,255,.16);color:#fff;cursor:pointer;white-space:nowrap}
.dsearch-add:hover{background:rgba(109,74,255,.28)}
.dsearch-add.in{border-color:rgba(47,224,200,.45);background:rgba(47,224,200,.14);color:#2FE0C8}
@media (max-width:640px){.dsearch-add{margin-left:0;width:100%}.dcart-foot .btn{margin-left:0;width:100%}}


/* mega-bridge: the panel floats 10px below the trigger, and the pointer must not fall through that
   gap on its way down. An invisible extension upward keeps it inside the wrapper the whole way. */
.mega::before,.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}

/* HERO HEADLINE (2026-09-11): two sentences on their own lines at desktop; balanced wrapping on phones. */
.hero-mr h1{max-width:30ch;text-wrap:balance}
@media (max-width:640px){
  .hero-mr h1{font-size:clamp(1.8rem,8.6vw,2.2rem);max-width:none;line-height:1.08}
  .hero-mr h1 br{display:none}
}

/* ── TEMPLATE GALLERY (2026-09-11) ─────────────────────────────────────────────────────────── */
.tg-gallery{position:relative;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.tg-stage{position:relative;perspective:1400px;perspective-origin:50% 40%}
.tg-track{--cw:min(84vw,680px);display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:26px calc(50% - var(--cw)/2) 34px;scrollbar-width:none;-ms-overflow-style:none;
  transform-style:preserve-3d;outline:none}
.tg-track::-webkit-scrollbar{display:none}
.tg-track:focus-visible{box-shadow:0 0 0 2px rgba(47,224,200,.5) inset;border-radius:22px}
.tg-card{flex:0 0 var(--cw);scroll-snap-align:center;margin:0;z-index:var(--z,1);position:relative}
.tg-card .tg-frame{transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease;
  transform:perspective(1400px) translateX(var(--tx,0)) rotateY(var(--ry,0deg)) scale(var(--sc,1)) translateZ(var(--tz,0));
  opacity:var(--op,1);filter:saturate(var(--sat,1)) brightness(var(--br,1));will-change:transform}
.tg-card figcaption{transition:opacity .45s ease;opacity:var(--cap,1)}
.tg-card:not(.is-center) figcaption{--cap:0}
.tg-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(47,224,200,.28);
  box-shadow:0 0 0 1px rgba(47,224,200,.10),0 0 44px rgba(47,224,200,.16),0 30px 80px -30px rgba(0,0,0,.8);
  background:#0b0f1a;aspect-ratio:16/10}
.tg-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 22%),linear-gradient(0deg,rgba(6,8,14,.55),transparent 34%)}
.tg-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:var(--grad);opacity:.9}
.tg-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;user-select:none;-webkit-user-drag:none}
.tg-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 6px 0;
  font-size:.86rem;color:#9AA6BC}
.tg-name{font-weight:600;color:#fff;letter-spacing:-.01em}
.tg-ind{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#7C879B}
.tg-card.is-far{--op:.42;--sat:.6;--br:.8;--sc:.86}
.tg-card.is-left{--ry:16deg;--sc:.9;--op:.72;--br:.9;--tz:-40px}
.tg-card.is-right{--ry:-16deg;--sc:.9;--op:.72;--br:.9;--tz:-40px}
.tg-card.is-center{--ry:0deg;--sc:1;--op:1;--br:1;--sat:1;--tz:0}
.tg-nav{position:absolute;top:calc(50% - 30px);width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:rgba(10,13,22,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;z-index:5;transition:background .2s,border-color .2s}
.tg-nav:hover{background:rgba(47,224,200,.16);border-color:rgba(47,224,200,.5)}
.tg-prev{left:clamp(6px,2vw,22px)} .tg-next{right:clamp(6px,2vw,22px)}
.tg-legend{margin:6px 0 0;text-align:center;font-size:.86rem;color:#7C879B}
.tg-count{color:#9AA6BC;font-variant-numeric:tabular-nums}
.tg-sep{color:#4F5A70;margin:0 4px}
@media (prefers-reduced-motion:reduce){
  .tg-card .tg-frame,.tg-card figcaption{transition:none;transform:none!important;opacity:1!important;filter:none!important}
  .tg-track{scroll-behavior:auto}
}@media (max-width:720px){
  .tg-track{--cw:70vw;padding:18px calc(50% - var(--cw)/2) 22px;gap:10px;perspective:900px}
  .tg-card .tg-frame{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .4s ease}
  .tg-card.is-center{--z:6}
  .tg-card.is-left{--tx:30%;--ry:34deg;--sc:.84;--op:.9;--br:.85;--tz:-40px;--z:4}
  .tg-card.is-right{--tx:-30%;--ry:-34deg;--sc:.84;--op:.9;--br:.85;--tz:-40px;--z:4}
  .tg-card.is-far{--sc:.7;--op:.55;--br:.7;--sat:.7;--tz:-80px;--z:2}
  .tg-card.is-far-l{--tx:58%;--ry:40deg}
  .tg-card.is-far-r{--tx:-58%;--ry:-40deg}
  .tg-card:not(.is-center) figcaption{--cap:0}
  .tg-card figcaption{flex-wrap:wrap;padding-top:10px}
  .tg-frame{box-shadow:0 0 0 1px rgba(47,224,200,.12),0 0 30px rgba(47,224,200,.18),0 18px 40px -16px rgba(0,0,0,.9)}
  .tg-nav{display:none}
}

/* ── MARKETING CHAT SIGNUP CARD (2026-09-11): the card, its header and the "Create account and continue" button were
   rendering unstyled on the marketing page (the .ar-steps / .ar-btn rules belong to the app chat's own stylesheet,
   which is not on this page) — the button was a native grey control. Site CSS, matching the hero's own CTAs. ─── */
#ax #ax-signup-card{margin:12px 0 4px;border:1px solid rgba(47,224,200,.28);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:0 0 0 1px rgba(47,224,200,.08),0 24px 60px -30px rgba(0,0,0,.8);overflow:hidden}
#ax #ax-signup-card .ar-steps-head{padding:16px 18px 0;display:flex;align-items:flex-start;gap:12px}
#ax #ax-signup-card .ar-steps-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.3}
#ax #ax-signup-card .ar-steps-sub{margin-top:4px;font-size:13px;line-height:1.5;color:#98A2B6}
#ax #ax-signup-card .ar-actions{display:flex;margin-top:12px}
#ax #ax-signup-card .ar-btn.primary{appearance:none;-webkit-appearance:none;flex:1;width:100%;height:44px;padding:0 18px;
  border:0;border-radius:10px;background:var(--grad);color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  letter-spacing:-.01em;line-height:1;cursor:pointer;box-shadow:0 10px 26px -12px rgba(109,74,255,.75);
  transition:filter .15s ease,transform .15s ease,opacity .15s ease}
#ax #ax-signup-card .ar-btn.primary:hover{filter:brightness(1.08)}
#ax #ax-signup-card .ar-btn.primary:active{transform:translateY(1px)}
#ax #ax-signup-card .ar-btn.primary:focus-visible{outline:2px solid #fff;outline-offset:2px}
#ax #ax-signup-card .ar-btn.primary:disabled{opacity:.6;cursor:progress;filter:none;transform:none}
#ax #ax-signup-card .ax-err:empty{display:none}

/* ── BTN-GLOW LAYERS (2026-09-11): fill and halo are both layers INSIDE the anchor's own stacking context, so a
   bfcache restore (Back from the sign-up page) cannot re-order them and expose the halo through the fill. ────── */
.btn-glow{isolation:isolate;background:transparent;border-color:transparent}
.btn-glow::after{content:"";position:absolute;inset:0;border-radius:100px;z-index:-1;background:#0B0B14;border:1px solid rgba(255,255,255,.14)}
.btn-glow::before{z-index:-2}
/* Signed in, the mobile menu has one action: it takes the full row, centred (Owner, 2026-09-11). */
html[data-lu-session="in"] .m-actions{grid-template-columns:1fr}

/* ── WHO DOES IT — full-row figure (Owner, 2026-09-11) ─────────────────────────────────────────── */
.who-bg{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(520px,58vw,720px);display:flex;align-items:center;
  background:#0B0F19 var(--who-bg) no-repeat;background-size:cover;background-position:72% 14%}
.who-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,8,16,.92) 0%,rgba(6,8,16,.78) 34%,rgba(6,8,16,.28) 62%,rgba(6,8,16,0) 100%)}
.who-bg .container{position:relative;width:100%}
.who-bg .who-copy{max-width:46ch}
.who-bg .eyebrow{color:#B7A6FF}
.who-bg h2,.who-bg .display{color:#fff}
.who-bg .say{color:#D6DAE3}
.who-bg .in{color:#fff}
@media (max-width:900px){
  .who-bg{min-height:760px;align-items:flex-end;background-position:88% 0%;background-size:cover}
  .who-bg::before{background:linear-gradient(180deg,rgba(6,8,16,.10) 0%,rgba(6,8,16,.55) 42%,rgba(6,8,16,.94) 72%,rgba(6,8,16,.97) 100%)}
  .who-bg .container{padding-bottom:32px}
  .who-bg .who-copy{max-width:none}
}
/* Owner, 2026-09-11: desktop figure 20% smaller than cover — image hugs the right at 80% row width, a matching
   teal→violet base fills the left under the wash so there is no seam. */
@media (min-width:901px){
  .who-bg{background:linear-gradient(180deg,#0f7ea3 0%,#1b3ea8 55%,#4a2fb5 100%);background-image:var(--who-bg),linear-gradient(180deg,#0f7ea3 0%,#1b3ea8 55%,#4a2fb5 100%);background-repeat:no-repeat;background-size:80% auto,auto;background-position:100% 14%,0 0}
}

/* The 80%-wide figure had a hard left edge against the base fill; the figure now lives on its own layer with its
   left 16%→34% feathered into the base, so there is no seam. */
@media (min-width:901px){
  .who-bg{background-image:linear-gradient(180deg,#0f7ea3 0%,#1b3ea8 55%,#4a2fb5 100%);background-size:auto;background-position:0 0}
  .who-bg::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--who-bg) no-repeat 100% 14%/80% auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 16%,#000 34%)}
}

/* Owner: continue the figure's gradient across the left. Base = the image's own left-edge colours over the rows the
   row shows (#02d1dd → #00b1cb → #0077ac); the wash is lightened so the colour reads through under the copy. */
@media (min-width:901px){
  .who-bg{background-image:linear-gradient(180deg,#03d6e0 0%,#00b4cc 38%,#0086b6 72%,#0a63a6 100%)}
  .who-bg::before{background:linear-gradient(90deg,rgba(4,10,22,.58) 0%,rgba(4,10,22,.46) 30%,rgba(4,10,22,.18) 52%,rgba(4,10,22,0) 70%)}
  .who-bg::after{-webkit-mask-image:linear-gradient(90deg,transparent 14%,#000 36%);mask-image:linear-gradient(90deg,transparent 14%,#000 36%)}
}

/* Owner: on phones, half the space above her head — the figure sits 54px higher (cover by height; the uncovered
   strip at the bottom is under the .97 wash). */
@media (max-width:900px){ .who-bg{background-position:88% -26px} }

/* Owner, 2026-09-11: desktop gallery uses the phone stack — neighbours pulled in under the centre card, tilted, two deep. */
@media (min-width:721px){
  .tg-track{--cw:min(84vw,680px);gap:clamp(8px,1vw,14px)}
  .tg-card.is-center{--ry:0deg;--sc:1;--op:1;--br:1;--sat:1;--tz:0;--tx:0;--z:6}
  .tg-card.is-left{--tx:28%;--ry:32deg;--sc:.86;--op:.92;--br:.88;--tz:-40px;--z:4}
  .tg-card.is-right{--tx:-28%;--ry:-32deg;--sc:.86;--op:.92;--br:.88;--tz:-40px;--z:4}
  .tg-card.is-far{--sc:.74;--op:.6;--br:.75;--sat:.7;--tz:-80px;--z:2}
  .tg-card.is-far-l{--tx:54%;--ry:38deg}
  .tg-card.is-far-r{--tx:-54%;--ry:-38deg}
}

/* Owner, 2026-09-11: on phones the hero (pill → Level Up Now) fills the first screen so Arthur sits below the fold
   on load; the button gets air above and below. */
@media (max-width:760px){
  .hero-mr .hero-top{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;padding:4px 0 28px}
  .hero-mr .hero-cta{margin-top:40px;margin-bottom:12px}
}

/* Owner: the BUTTON gets the padding, not the hero — content stays at the top, the button carries 56px above and the
   rest of the first screen below it (min-height only as a floor so Arthur stays under the fold). */
@media (max-width:760px){
  .hero-mr .hero-top{justify-content:flex-start;padding:0 0 16px}
  .hero-mr .hero-cta{margin-top:56px;margin-bottom:auto;padding-bottom:72px}
}

/* The flex column stretched the pill to the row width; it keeps its own width (Owner, 2026-09-11). */
@media (max-width:760px){ .hero-mr .hero-top > .pill{align-self:center;width:auto} }

/* Owner: double the space above the pill on phones and take the same from below the button — the first-screen height
   is fixed by the min-height, so the auto margin under the button gives back exactly what the top takes. */
@media (max-width:760px){ .hero-mr .hero-top{padding-top:52px} }

/* Owner, 2026-09-11: on phones the gallery comes before Arthur. */
@media (max-width:760px){
  .hero-mr .container{display:flex;flex-direction:column}
  .hero-mr .hero-top{order:0}
  .hero-mr .tg-gallery{order:1}
  .hero-mr #ax{order:2}
}

/* Owner, 2026-09-11: on phones the gallery sits tight under the hero — no top margin, no track top padding. */
@media (max-width:760px){
  .hero-mr .tg-gallery{margin-top:0}
  .hero-mr .tg-track{padding-top:0}
}

/* ── TEAM LINE-UP (Owner, 2026-09-11): the five specialists, full width under the copy of #team. ─────────── */
.team-fig{margin:clamp(32px,4.5vw,56px) 0 0;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(47,224,200,.24);box-shadow:0 0 0 1px rgba(47,224,200,.08),0 0 48px rgba(47,224,200,.14),0 40px 90px -40px rgba(0,0,0,.85)}
.team-fig::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:.9}
.team-fig img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 38%}
@media (max-width:760px){
  .team-fig{margin-top:28px;border-radius:14px}
  .team-fig img{aspect-ratio:4/3}
}
/* ── GALLERY, UNFRAMED (Owner, 2026-09-11): sharp corners, no border, no hairline, no glow per card; instead one
   gentle ray of gradient light behind the whole carousel. Applies to phone and desktop. ─────────────────────── */
.tg-frame,.tg-frame img{border-radius:0}
.tg-frame{border:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);background:#0b0f1a}
.tg-frame::before,.tg-frame::after{display:none}
.tg-card.is-far .tg-frame,.tg-card.is-left .tg-frame,.tg-card.is-right .tg-frame{box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.tg-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(140%,1600px);height:130%;transform:translate(-50%,-52%);z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 55% at 50% 50%,rgba(109,74,255,.34) 0%,rgba(109,74,255,0) 70%),
    radial-gradient(ellipse 36% 48% at 34% 46%,rgba(255,79,216,.14) 0%,rgba(255,79,216,0) 70%),
    radial-gradient(ellipse 36% 48% at 66% 52%,rgba(47,224,200,.16) 0%,rgba(47,224,200,0) 70%);
  filter:blur(28px);opacity:.95}
.tg-track{position:relative;z-index:1}
.tg-nav{z-index:5}
.tg-track:focus-visible{border-radius:0}
@media (max-width:720px){
  .tg-stage::before{width:170%;height:120%;filter:blur(22px)}
}
/* The ray was hidden behind the cards; it now spills well above and below them, a little brighter. */
.tg-stage::before{width:min(150%,1700px);height:200%;transform:translate(-50%,-50%);filter:blur(36px);
  background:
    radial-gradient(ellipse 40% 42% at 50% 50%,rgba(109,74,255,.46) 0%,rgba(109,74,255,0) 70%),
    radial-gradient(ellipse 34% 40% at 32% 44%,rgba(255,79,216,.20) 0%,rgba(255,79,216,0) 70%),
    radial-gradient(ellipse 34% 40% at 68% 56%,rgba(47,224,200,.22) 0%,rgba(47,224,200,0) 70%)}
@media (max-width:720px){ .tg-stage::before{width:190%;height:180%;filter:blur(28px)} }
/* Owner, 2026-09-11: on phones, half the gap between the carousel and Arthur (90px to 45px: track bottom padding 22 to 0,
   Arthur top margin 34 to 11) and the 45px handed to the chat panel (370 to 415px). */
@media (max-width:760px){
  .hero-mr .tg-track{padding-bottom:0}
  .hero-mr #ax{margin-top:11px}
  #ax .lu-arthur-modal{height:min(calc(46vh + 45px),415px)!important}
}

/* ── SCROLL CUE under the hero button (Owner, 2026-09-11): a soft bouncing chevron; site CSS, not a native control. */
.scroll-cue{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:26px auto 0;padding:0;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#C7CDD8;cursor:pointer;
  animation:cueBob 1.8s ease-in-out infinite;transition:background .2s,color .2s,border-color .2s}
.scroll-cue:hover{background:rgba(47,224,200,.14);border-color:rgba(47,224,200,.5);color:#fff}
.scroll-cue:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
@media (max-width:760px){
  .hero-mr .hero-cta{margin-bottom:0;padding-bottom:0}
  .hero-mr .scroll-cue{margin-top:auto;margin-bottom:8px}
}

/* The first-screen floor now discounts the hero top padding as well as the nav, so the cue sits inside the first screen. */
@media (max-width:760px){ .hero-mr .hero-top{min-height:calc(100svh - 128px)} }

/* Owner: the arrow with the same space above and below it. Desktop: 32px each side (Arthur's panel margin matched).
   Phone: the cue floats in the middle of what is left of the first screen (auto margins split it equally). */
.scroll-cue{margin:32px auto}
.hero-mr .hero-panel.ax{margin-top:32px}
@media (max-width:760px){
  .hero-mr .hero-top{padding-bottom:0}
  .hero-mr .scroll-cue{margin:auto auto}
}
/* ── SCROLL CUE, BPA-style in LUG colours (Owner, 2026-09-11): "SCROLL" over a 1px bar that draws down and retracts. ── */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;width:auto;height:auto;padding:6px 10px;margin:32px auto;
  border:0;border-radius:0;background:none;color:#9AA6BC;font-family:inherit;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  cursor:pointer;opacity:0;animation:cueFadeIn 1s 1.4s forwards;transition:color .2s}
.scroll-cue .lbl{padding-left:.3em}
.scroll-cue .bar{display:block;width:1px;height:42px;background:linear-gradient(180deg,#6D4AFF,#2FE0C8 60%,transparent);animation:cueBar 2s infinite}
.scroll-cue:hover{background:none;border:0;color:#fff}
.scroll-cue:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes cueFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cueBar{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none;opacity:1}.scroll-cue .bar{animation:none}}
/* equal space above and below: desktop 32px each side (Arthur's panel margin matched); phone: auto margins split the rest of the first screen */
.hero-mr .hero-panel.ax{margin-top:32px}
@media (max-width:760px){
  .hero-mr .hero-top{padding-bottom:0}
  .hero-mr .scroll-cue{margin:auto auto}
}/* Owner: the ray behind the carousel about 20% stronger (.46/.20/.22 → .56/.25/.27). */
.tg-stage::before{
  background:
    radial-gradient(ellipse 40% 42% at 50% 50%,rgba(109,74,255,.56) 0%,rgba(109,74,255,0) 70%),
    radial-gradient(ellipse 34% 40% at 32% 44%,rgba(255,79,216,.25) 0%,rgba(255,79,216,0) 70%),
    radial-gradient(ellipse 34% 40% at 68% 56%,rgba(47,224,200,.27) 0%,rgba(47,224,200,0) 70%)}

/* ── SESSION LABELS WITHOUT A FLASH (2026-09-11): both labels are in the markup; the html[data-lu-session] state
   ('likely' from <head> before paint, then 'in'/'out' from the probe) decides which one shows. ─────────────── */
.lbl-in{display:none}
.lbl-out,.lbl-in{display:inline-flex;align-items:center;gap:inherit}
.lbl-in{display:none}
html[data-lu-session="likely"] .lbl-out,html[data-lu-session="in"] .lbl-out{display:none}
html[data-lu-session="likely"] .lbl-in,html[data-lu-session="in"] .lbl-in{display:inline-flex}
html[data-lu-session="likely"] a.lu-login,html[data-lu-session="in"] a.lu-login{display:none}
html[data-lu-session="likely"] .m-actions{grid-template-columns:1fr}
/* Owner, 2026-09-11: the Arthur chatbox is opaque — a solid surface, nothing behind it shows through. */
.hero-mr #ax.panel{background:#10141F;background-image:none}
/* Owner, 2026-09-11: subtle soft edges on every gallery image — a few px feathered on all four sides, corners still square. */
.tg-frame{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%),linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%),linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Owner, 2026-09-11: "revert soft glow, it looks dirty" — the ray behind the carousel is off. */
.tg-stage::before{display:none}

/* Owner: the feathered image edges are reverted (hard edges); the ray behind the carousel stays as it was. */
.tg-frame{-webkit-mask-image:none;mask-image:none}
.tg-stage::before{display:block}

/* ── LOGIN / RESET pages (2026-09-11): the sign-up form's own look, plus a show/hide password control. ──────── */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px 8px;border-radius:8px;
  color:var(--muted);font:600 .78rem/1 var(--ff-b,inherit);letter-spacing:.02em;cursor:pointer}
.pw-toggle:hover{color:var(--ink,#fff);background:rgba(255,255,255,.06)}
.pw-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.form-links{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.form-links .sep{color:var(--dim)}
.form[data-mode="forgot"] [data-login-only]{display:none}
/* Login/reset: the password field takes the same styling as text/email inputs (the site rule is by type); the success
   blocks honour [hidden] (the .form-success grid rule had been overriding it — on /start/ too). */
.form input[type=password]{width:100%;font:inherit;font-size:1rem;color:var(--white);background:var(--bg);border:1px solid var(--border-2);border-radius:10px;padding:12px 14px;appearance:none;-webkit-appearance:none;outline:none}
.form-success[hidden]{display:none!important}

/* ── TEAM ROW as a full-row figure (Owner, 2026-09-11). Faces clear at the top, copy over darkened bodies below. ── */
.team-bg{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(560px,52vw,760px);background:#070A12 var(--team-bg) no-repeat;background-size:cover;background-position:50% 12%}
.team-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,18,0) 0%,rgba(7,10,18,.12) 34%,rgba(7,10,18,.62) 58%,rgba(7,10,18,.9) 78%,rgba(7,10,18,.97) 100%)}
.team-bg .container{position:relative;width:100%;padding-bottom:8px}
.team-bg .team-copy{align-items:end}
.team-bg h2,.team-bg .display-sm{color:#fff}
.team-bg .say,.team-bg .say-light{color:#D6DAE3}
.team-bg .in{color:#fff}
.team-fig{display:none}
@media (max-width:900px){
  .team-bg{min-height:760px;background-position:50% 0%;background-size:cover}
  .team-bg::before{background:linear-gradient(180deg,rgba(7,10,18,0) 0%,rgba(7,10,18,.10) 30%,rgba(7,10,18,.70) 50%,rgba(7,10,18,.94) 70%,rgba(7,10,18,.98) 100%)}
  .team-bg .container{padding-bottom:28px}
}
@media (max-width:640px){ .team-bg{background-size:auto 62%;background-position:50% 0%} }/* .sec.night{background:transparent} (line ~1195) outranks .team-bg — the figure is re-declared at higher specificity. */
.sec.night.team-bg{background:#070A12 var(--team-bg) no-repeat;background-size:cover;background-position:50% 12%}
@media (max-width:900px){ .sec.night.team-bg{background-position:50% 0%;background-size:cover} }
@media (max-width:640px){ .sec.night.team-bg{background-size:auto 62%;background-position:50% 0%} }

/* .night::before carries height:70% — the wash must span the whole row. */
.sec.night.team-bg::before{height:100%;width:100%;inset:0}

/* ── Arthur: start over (2026-09-12) ── */
#ax .ax-restart{display:block;margin:0;padding:8px 18px;width:100%;text-align:right;background:none;border:0;border-top:1px solid rgba(255,255,255,.06);
  color:#7C879B;font:500 .78rem/1 inherit;letter-spacing:.02em;cursor:pointer}
#ax .ax-restart:hover{color:#fff}
/* Owner, 2026-09-12: on desktop too, the gallery comes before Arthur (phones already did). */
@media (min-width:761px){
  .hero-mr .container{display:flex;flex-direction:column}
  .hero-mr .hero-top{order:0}
  .hero-mr .tg-gallery{order:1}
  .hero-mr #ax{order:2}
  .hero-mr .hero-panel.ax{margin-top:clamp(34px,5vw,64px)}
}

/* In the flex column the panel must keep the row width (auto inline margins otherwise shrink it to content). */
@media (min-width:761px){ .hero-mr .hero-panel.ax, .hero-mr .tg-gallery{width:100%;max-width:1080px} }

/* ── Arthur: ↻ new-conversation button in the header (Owner, 2026-09-12) — replaces the text link. ── */
#ax .ax-restart{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0 0 0 auto;
  background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--t2);cursor:pointer;flex:0 0 34px;
  text-align:center;border-top:1px solid var(--bd);transition:background .2s,color .2s}
#ax .ax-restart:hover{color:#fff;background:rgba(47,224,200,.14);border-color:rgba(47,224,200,.5)}
#ax .ax-restart:focus-visible{outline:2px solid #fff;outline-offset:2px}
#ax .ax-restart ~ .ax-collapse{margin-left:8px}
/* Chatbot yields to Arthur (2026-09-12). */
html.ax-active #cb888-bubble,html.ax-active #cb888-panel,html.ax-active #cb888-backdrop{display:none!important}

/* The account card is a flex child of the feed with overflow:hidden — its min-height resolved to 0 and it shrank to
   a 2px line once the conversation overflowed (Owner, 2026-09-12: "it gets stuck here"). It never shrinks now. */
#ax #ax-signup-card{flex:0 0 auto;min-height:max-content}
#ax #arthur-feed > *{flex-shrink:0}

/* ── HERO LOAD REVEAL (2026-09-12, Owner: "be creative") ────────────────────
   Wipe-in headline, a light sweep through the gradient words, and a rule that
   draws and vanishes. No markup change; nothing here can affect layout. */
@keyframes heroWipe{
  0%  {opacity:0;filter:blur(10px);transform:translate3d(0,26px,0);
       -webkit-mask-position:100% 0;mask-position:100% 0}
  55% {opacity:1;filter:blur(0)}
  100%{opacity:1;filter:blur(0);transform:none;
       -webkit-mask-position:0 0;mask-position:0 0}
}
@keyframes heroShine{from{background-position:-70% 0,0 0}to{background-position:180% 0,0 0}}
@keyframes heroRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes heroPop{0%{opacity:0;transform:translate3d(0,22px,0) scale(.96)}
                   70%{opacity:1;transform:translate3d(0,0,0) scale(1.015)}
                   100%{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}

.hero-top h1{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 0 45%,rgba(0,0,0,0) 58%);
  mask-image:linear-gradient(90deg,#000 0 45%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:220% 100%;mask-size:220% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:heroWipe 1.15s cubic-bezier(.25,.8,.3,1) .15s both;
}
/* the light travelling through the gradient words; it parks off the text, so the resting colours are unchanged */
.hero-top h1 .grad{
  background-image:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.9) 50%,transparent 82%),var(--grad);
  background-size:55% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:180% 0,0 0;
  animation:heroShine 1.45s cubic-bezier(.4,0,.2,1) .8s both;
}
.hero-top .pill{animation:heroRise .6s cubic-bezier(.25,.8,.3,1) .05s both}
.hero-top .hero-sub{animation:heroRise .8s cubic-bezier(.25,.8,.3,1) .6s both}
.hero-top .hero-cta{animation:heroPop .75s cubic-bezier(.25,.8,.3,1) .78s both}
.hero-top .scroll-cue{animation:heroFade .7s ease 1.35s both}

@media (prefers-reduced-motion:reduce){
  .hero-top h1,.hero-top h1 .grad,.hero-top .hero-sub,
  .hero-top .pill,.hero-top .lede,.hero-top .hero-cta,.hero-top .scroll-cue{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .hero-top h1{-webkit-mask-image:none!important;mask-image:none!important}
  .hero-top h1 .grad{background-image:var(--grad)!important;background-size:auto!important;background-position:0 0!important}
}

/* ── ARTHUR PANEL WIDTH ON PHONES (2026-09-12, Owner) ───────────────────────
   The hero container keeps a 24px gutter, which left the chat 342px wide on a
   390px screen. Arthur reclaims half of it on each side; 12px of breathing room
   remains so the panel never sits flush against the edge of the display. */
@media (max-width:760px){
  .hero-mr #ax.panel{margin-left:-12px;margin-right:-12px}
}

/* KB-2 (Owner 2026-09-22): at ANY width, while the keyboard is up, the expanded chat panel follows the visible viewport and a
   fixed-bottom toast rises above the keyboard. html.kb-open + --kb/--ax-vvh/--ax-vvt are kept by site.js. */
html.kb-open #ax.ax-tall{bottom:auto;top:calc(64px + var(--ax-vvt,0px));height:var(--ax-vvh,calc(100dvh - 64px))}
html.kb-open .ax-toast{bottom:calc(26px + var(--kb,0px))}