/* ============================================================
   Upbuild · design system
   Palette: Paper #F6F7FB · Ink #0E1526 · Signal Blue #2050E0
            Delta Emerald #0E9F6E · Mist lines #E4E8F1
   Type:    Bricolage Grotesque (display) · Inter (body)
            JetBrains Mono (prompts, data, labels)
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/spacegrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/spacegrotesk-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-500.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --paper:#F6F7FB; --card:#FFFFFF;
  --ink:#0E1526; --ink-2:#161F35; --ink-3:#20294A;
  --text:#1B2334; --slate:#5A6478; --faint:#8A92A6;
  --line:#E4E8F1; --line-ink:rgba(255,255,255,.11);
  --blue:#2050E0; --blue-deep:#1740BC; --blue-soft:#EBF0FF;
  --pos:#0AAE96; --pos-soft:#DDFBF3; --pos-bright:#00FBCE;--pos-deep:#067A69;
  --warn:#B45309;
  --radius:14px; --radius-lg:20px; --radius-pill:999px;
  --maxw:1300px;
  --shadow-1:0 1px 2px rgba(14,21,38,.05),0 10px 30px -14px rgba(14,21,38,.14);
  --shadow-2:0 2px 6px rgba(14,21,38,.06),0 24px 60px -24px rgba(14,21,38,.28);
  --fd:'Bricolage Grotesque',system-ui,sans-serif;
  --fb:'IBM Plex Sans','Inter',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--text);font:400 17px/1.65 var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}
[id]{scroll-margin-top:96px}

h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);line-height:1.08;letter-spacing:-0.015em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.55rem,5.6vw,4.05rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.65rem)}
h3{font-size:1.28rem;font-weight:700;letter-spacing:-0.01em}
p{margin:0 0 1em}
.lead{font-size:1.16rem;color:var(--slate);max-width:58ch}
.small{font-size:.86rem;color:var(--faint)}
.mono{font-family:var(--fm)}
strong{font-weight:600;color:var(--ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(72px,9vw,110px)}
.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,56px)}
.eyebrow{font:600 .74rem/1 var(--fb);letter-spacing:.13em;text-transform:uppercase;color:#088C77;display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}

/* ---------- Dark band ---------- */
.band-ink{background:var(--ink);color:#C9D0E0}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink .lead{color:#9AA4BC}
.band-ink .eyebrow{color:var(--pos-bright)}
.band-ink .eyebrow::before{background:var(--pos-bright)}
.band-ink a{color:#AFC3FF}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 .98rem/1 var(--fb);padding:15px 26px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--pos-bright);color:#071018;box-shadow:0 8px 20px -8px rgba(0,251,206,.55)}
.btn-primary:hover{background:#0BE7BE;color:#071018}
.btn-ghost{background:transparent;color:var(--ink);border-color:#C6CDDD}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.band-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.band-ink .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-paper{background:#fff;color:var(--ink);border:2px solid var(--pos-bright)}
.band-ink a.btn-paper{color:var(--ink)}
.btn-paper:hover{background:var(--paper)}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Announcement ---------- */

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 6px 24px -18px rgba(14,21,38,.25)}
.nav-in{display:flex;align-items:center;gap:28px;height:66px}
.logo{display:flex;align-items:baseline;gap:9px;color:var(--ink);font:800 1.3rem/1 var(--fd);letter-spacing:-0.02em}
.logo:hover{text-decoration:none}
.logo .caret{color:var(--blue)}
.logo .by{font:500 .7rem/1 var(--fb);letter-spacing:.04em;color:var(--faint);letter-spacing:.06em}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a{color:var(--slate);font:500 .93rem/1 var(--fb)}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-cta{margin-left:6px;padding:11px 20px;font-size:.9rem}
.nav-burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.2s}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(56px,7vw,92px) clamp(64px,7vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(720px 380px at 82% -10%,rgba(32,80,224,.08),transparent 60%),
  radial-gradient(520px 320px at -6% 30%,rgba(0,251,206,.08),transparent 60%);pointer-events:none}
/* the copy column never drops below the width of its own button row, or the
   two hero buttons break onto two lines; the demo gives up the pixels instead */
.hero-grid{display:grid;grid-template-columns:minmax(431px,.93fr) 1.1fr;gap:clamp(36px,5vw,64px);align-items:center;position:relative}
.hero h1 .u{white-space:nowrap;background:linear-gradient(180deg,transparent 68%,var(--pos-soft) 68%)}
/* the paragraph wraps on the same vertical line the CTA row ends on: 429px is
   the width of the two hero buttons plus their gap, so keep them in step */
.hero .lead{margin-bottom:28px;max-width:477px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.trust-chips{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0;list-style:none}
.trust-chips li{font:500 .84rem/1 var(--fb);color:var(--slate);display:inline-flex;align-items:center;gap:7px}
.trust-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pos)}

/* ---------- Chat panel (signature) ---------- */
.chat{background:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden;border:1px solid var(--ink-3)}
.chat-top{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-ink);background:var(--ink-2)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2A3455}
.chat-title{font:500 .78rem/1 var(--fm);color:#8A92A6;margin-left:2px}
.chat-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 .72rem/1 var(--fm);color:var(--pos-bright);background:rgba(0,251,206,.09);border:1px solid rgba(0,251,206,.3);padding:6px 11px;border-radius:var(--radius-pill)}
.chat-live i{width:7px;height:7px;border-radius:50%;background:var(--pos-bright);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chat-body{padding:22px 20px 18px;height:464px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.msg-user{align-self:flex-end;max-width:88%;background:var(--blue);color:#fff;padding:12px 16px;border-radius:16px 16px 4px 16px;font:400 .92rem/1.5 var(--fb)}
.msg-user .cursor{display:inline-block;width:8px;height:15px;background:#fff;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.msg-ai{align-self:flex-start;width:100%;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:4px 16px 16px 16px;padding:14px 16px}
.tool-line{font:400 .74rem/1.5 var(--fm);color:#7F88A0;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tool-line::before{content:"→";color:var(--pos-bright)}
.ai-text{font:400 .9rem/1.55 var(--fb);color:#D7DCEA;margin:0 0 12px}
.mini-table{width:100%;border-collapse:collapse;font:400 .78rem/1.4 var(--fm)}
.mini-table th{color:#7F88A0;font-weight:500;text-align:left;padding:0 10px 7px 0;border-bottom:1px solid var(--line-ink)}
.mini-table td{color:#E7EBF5;padding:8px 10px 8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.mini-table tr:last-child td{border-bottom:0}
.mini-table .num{text-align:right;font-variant-numeric:tabular-nums}
.delta-up{color:var(--pos-bright);font-weight:500}
.spend-bar{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--blue),#5E85FF);margin-top:5px;width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.bars-12{display:flex;align-items:flex-end;gap:5px;height:96px;margin:6px 0 4px}
.bars-12 i{flex:1;background:linear-gradient(180deg,#5E85FF,var(--blue));border-radius:3px 3px 0 0;min-height:4px;transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bars-12 i.peak{background:linear-gradient(180deg,#00FBCE,#0AAE96)}
.bars-lab{display:flex;justify-content:space-between;font:400 .66rem/1 var(--fm);color:#7F88A0}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--line-ink);background:var(--ink-2)}
.chip{font:500 .74rem/1.35 var(--fm);color:#B8C1D6;background:transparent;border:1px solid #333E63;padding:8px 13px;border-radius:var(--radius-pill);cursor:pointer;transition:.15s;text-align:left}
.chip:hover{border-color:#5E85FF;color:#fff}
.chip[aria-pressed="true"]{border-color:var(--pos-bright);color:var(--pos-bright)}
.chat-note{font:400 .68rem/1 var(--fm);color:#5F6880;text-align:right;padding:0 20px 12px;background:var(--ink-2)}

/* ---------- Trust strip ---------- */
.strip{border-block:1px solid var(--line);background:#fff;padding-block:26px}
.strip p{margin:0 0 24px;font:600 .74rem/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:center}
.strip-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px}
.strip-logos span{font:800 1.06rem/1 var(--fd);letter-spacing:-0.01em;color:#B4BACA}

/* ---------- Steps ---------- */
/* the mint band, the same #0BE9BE Uptimal uses on its whitepaper section.
   Ink on green rather than white on green: it is the house pairing (the primary
   button does the same) and white would drop under 2:1 contrast here. The cards
   inside stay white, so they read as paper on the green */
.band-mint{background:#0BE9BE}
.band-mint .eyebrow{color:#064F41}
.band-mint h2{color:#071018}
.band-mint .hl{background:linear-gradient(0deg,#fff,#fff) no-repeat left bottom .1em / 100% .46em;color:#071018}
.band-mint .lead{color:rgba(7,16,24,.72)}
.band-mint .step{background:var(--card);border-color:transparent;box-shadow:0 18px 40px -26px rgba(4,40,32,.5)}
.band-mint .step h3{color:var(--ink)}
.band-mint .urlbox{background:var(--paper);border-color:var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;position:relative;counter-increment:step}
#how .step.in{transition:box-shadow .2s,transform .2s,border-color .2s}
#how .step:hover{box-shadow:var(--shadow-1);transform:translateY(-2px);border-color:#CBD3E4}
.step::before{content:counter(step,decimal-leading-zero);font:600 .8rem/1 var(--fb);color:#088C77;background:var(--pos-soft);padding:7px 11px;border-radius:8px;display:inline-block;margin-bottom:16px}
.step h3{margin-bottom:8px}
.step p{color:var(--slate);font-size:.95rem;margin:0}
.urlbox{margin-top:16px;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.urlbox code{font:500 .74rem/1.4 var(--fm);color:var(--ink);word-break:break-all}
.copy-btn{flex-shrink:0;background:var(--ink);color:#fff;border:0;border-radius:8px;font:600 .74rem/1 var(--fb);padding:8px 12px;cursor:pointer;transition:.15s}
.copy-btn:hover{background:var(--pos-bright);color:#071018}


/* ---------- Platform rack ---------- */
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:box-shadow .2s,transform .2s,border-color .2s}
.plat:hover{box-shadow:var(--shadow-1);transform:translateY(-2px);border-color:#CBD3E4}
#platforms .plat{background:var(--paper)}
.plat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:45px}
.plat-head h3{margin:0}
.count{font:600 .72rem/1 var(--fb);color:var(--pos);background:var(--pos-soft);padding:6px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.plat p{color:var(--slate);font-size:.92rem;margin:0 0 14px}
.plat details{border-top:1px solid var(--line);padding-top:12px}
/* a second dropdown is not a second section: one rule per card */
.plat details+details{border-top:0;padding-top:10px}
.plat summary{font:600 .8rem/1 var(--fb);color:#088C77;cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.plat summary::-webkit-details-marker{display:none}
.plat summary::after{content:"+";font-size:1rem;transition:transform .2s}
.plat details[open] summary::after{transform:rotate(45deg)}
.plat details ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.plat details li{font:400 .74rem/1.5 var(--fm);color:var(--slate)}
.plat details li::before{content:"·";color:var(--pos);margin-right:8px;font-weight:700}
.rack-foot{margin-top:22px;font:400 .92rem/1.6 var(--fb);color:var(--faint);text-align:center}
.rack-foot code{color:var(--slate)}

/* ---------- Prompt gallery ---------- */
.prompts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.prompt-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;display:flex;flex-direction:column;gap:13px;transition:box-shadow .2s,transform .2s,border-color .2s}
.prompt-card:hover{box-shadow:var(--shadow-1);transform:translateY(-2px);border-color:#C7CFE0}
.prompt-card q{font:400 .95rem/1.55 var(--fb);color:var(--ink);quotes:"\201C" "\201D"}
.prompt-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prompt-meta .uses{font:400 .76rem/1.4 var(--fb);color:var(--faint)}
.prompt-meta .uses b{color:var(--pos);font-weight:500}

/* ---------- Compare (ink band) ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,5vw,60px);align-items:start}
.privacy-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.privacy-list li{display:flex;gap:14px;font-size:.96rem;color:#C9D0E0}
.privacy-list li b{display:block;color:#fff;font-weight:600;font-family:var(--fb)}
.pl-ic{flex-shrink:0;width:38px;min-width:38px;height:38px;padding:0;border-radius:11px;background:rgba(0,251,206,.09);border:1px solid rgba(0,251,206,.3);display:grid;place-items:center;color:var(--pos-bright);font:600 .82rem/1 var(--fm)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-lg);overflow:hidden}
.cmp th,.cmp td{padding:15px 18px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-ink);vertical-align:top}
.cmp thead th{font:600 .74rem/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#8A92A6;background:var(--ink-3)}
.cmp thead th.hl{color:var(--pos-bright)}
.cmp tbody th{font:600 .84rem/1.5 var(--fb);color:#8A92A6;font-weight:500;width:31%}
.cmp td{color:#D7DCEA}
.cmp td.hl{color:#fff;font-weight:500;background:rgba(0,251,206,.05)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-note{font:400 .8rem/1.6 var(--fb);color:#7F88A0;margin-top:14px}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;max-width:920px;margin-inline:auto}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;display:flex;flex-direction:column}
.price.feat{background:var(--ink);border-color:var(--ink-3);color:#C9D0E0;box-shadow:var(--shadow-2);position:relative}
.price.feat h3{color:#fff}
.tag-best{position:absolute;top:-13px;left:28px;font:600 .7rem/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;background:var(--pos);color:#fff;padding:7px 12px;border-radius:var(--radius-pill)}
.price h3{font-size:1.15rem;margin-bottom:4px}
.price .who{font-size:.88rem;color:var(--slate);margin-bottom:20px}
.price.feat .who{color:#8A92A6}
.amount{font:800 3rem/1 var(--fd);letter-spacing:-0.03em;color:var(--ink);display:flex;align-items:baseline;gap:8px;margin-bottom:22px}
.price.feat .amount{color:#fff}
.amount .per{font:500 .8rem/1.3 var(--fb);color:var(--faint);letter-spacing:0}
.feat-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.feat-list li{font-size:.93rem;display:flex;gap:11px;color:var(--slate)}
.price.feat .feat-list li{color:#C9D0E0}
.feat-list li::before{content:"✓";color:var(--pos);font-weight:700;flex-shrink:0}
.price.feat .feat-list li::before{color:var(--pos-bright)}
.price .btn{margin-top:auto;width:100%}
.picker{border-top:1px solid var(--line);padding-top:18px;margin-bottom:22px}
.picker p{font:600 .74rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick{position:relative}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick span{display:block;font:600 .8rem/1.3 var(--fb);color:var(--slate);border:1px solid var(--line);border-radius:9px;padding:9px 11px;text-align:center;transition:.15s;cursor:pointer}
/* a picked chip goes green like every other tick on the site */
.pick input:checked + span{border-color:var(--pos-deep);color:var(--pos-deep);background:var(--pos-soft)}
.pick input:focus-visible + span{outline:2px solid var(--pos-deep);outline-offset:2px}
.calc{font-size:.9rem;color:var(--slate);min-height:44px}
.calc b{color:var(--ink);font-family:var(--fm)}
.calc .nudge{display:block;color:var(--pos);font-weight:500;font-size:.82rem;margin-top:3px}
.price-foot{max-width:920px;margin:22px auto 0;text-align:center;font-size:.86rem;color:var(--faint)}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin-inline:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;transition:border-color .2s}
.faq details[open]{border-color:#C4CCDE}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font:600 1.02rem/1.45 var(--fb);color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.3rem/1 var(--fm);color:#088C77;transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;color:var(--slate);font-size:.96rem}
.faq .a p{margin:0 0 .7em}
.faq .a p:last-child{margin:0}

/* ---------- Lead form ---------- */
.lead-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,52px)}
.lead-side h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.lead-side ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.lead-side li{display:flex;gap:10px;font-size:.94rem;color:var(--slate)}
.lead-side li::before{content:"→";color:var(--pos);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font:500 .8rem/1 var(--fb);color:var(--slate);letter-spacing:.02em}
.field input,.field textarea{font:400 .95rem/1.5 var(--fb);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s,background .15s;width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(32,80,224,.12)}
.field textarea{resize:vertical;min-height:96px}
.plat-chips{display:flex;flex-wrap:wrap;gap:8px}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--faint)}
/* every consent tick on the site: the round mint disc with the dark green check, the same
   mark as the circled bullets (.lp-bullets); unticked it is a white circle */
.consent input[type="checkbox"],.lp-consent input[type="checkbox"]{-webkit-appearance:none;appearance:none;flex:none;box-sizing:border-box;width:18px;height:18px;margin:1px 0 0;border-radius:50%;background:#fff;border:1.5px solid var(--line-strong,#C6CDDD);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.consent input[type="checkbox"]:hover,.lp-consent input[type="checkbox"]:hover{border-color:var(--pos-deep)}
.consent input[type="checkbox"]:checked,.lp-consent input[type="checkbox"]:checked{background:var(--pos-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067A69' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat;border-color:#9CEBD8}
.consent input[type="checkbox"]:focus,.lp-consent input[type="checkbox"]:focus{outline:none}
.consent input[type="checkbox"]:focus-visible,.lp-consent input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px var(--pos-soft);border-color:var(--pos-deep)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{grid-column:1/-1;font:500 .88rem/1.5 var(--fb);min-height:22px}
.form-status.ok{color:var(--pos)}
.form-status.err{color:#C0392B}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#8A92A6;padding:64px 0 34px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.footer .logo{color:#fff;margin-bottom:14px}
.footer .logo .by{color:#5F6880}
.footer-tag{max-width:34ch;font-size:.88rem}
.footer h4{font:600 .72rem/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:#5F6880;margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer a{color:#B8C1D6}
.footer a:hover{color:#fff;text-decoration:none}
.footer-legal{border-top:1px solid var(--line-ink);padding-top:26px;font-size:.78rem;color:#5F6880;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.footer-legal p{margin:0;max-width:72ch}

/* ---------- Setup page ---------- */
.page-hero{padding-block:clamp(48px,6vw,72px) clamp(28px,4vw,40px)}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:34px;flex-wrap:wrap}
.tab{font:600 .95rem/1 var(--fb);color:var(--slate);background:none;border:0;border-bottom:2px solid transparent;padding:13px 18px;margin-bottom:-1px;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:#088C77;border-bottom-color:#088C77}
.tabpanel[hidden]{display:none}
.guide{display:flex;flex-direction:column;gap:16px;max-width:820px}
.gstep{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;display:grid;grid-template-columns:44px 1fr;gap:18px}
.gnum{width:34px;height:34px;border-radius:10px;background:var(--pos-soft);color:#088C77;font:600 .9rem/1 var(--fb);display:grid;place-items:center}
.gstep h3{font-size:1.05rem;margin-bottom:6px}
.gstep p{color:var(--slate);font-size:.94rem;margin:0}
.gstep .urlbox{margin-top:12px}
.kbd{font:500 .78rem/1 var(--fm);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px;color:var(--ink);white-space:nowrap}
.mockup{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;max-width:460px}
.mockup .mk-title{font:600 .82rem/1 var(--fb);color:var(--ink);margin-bottom:12px}
.mockup .mk-field{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:400 .74rem/1.4 var(--fm);color:var(--slate);margin-bottom:8px}
.mockup .mk-field b{display:block;font:500 .62rem/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.mockup .mk-btn{display:inline-block;background:var(--pos-bright);color:#071018;font:600 .74rem/1 var(--fb);border-radius:7px;padding:9px 14px;margin-top:4px}
.callout{margin-top:24px;background:var(--blue-soft);border:1px solid #CFDCFF;border-radius:var(--radius);padding:18px 20px;font-size:.92rem;color:var(--ink);max-width:820px}
.callout.green{background:var(--pos-soft);border-color:#BCE8D3}
.callout b{font-weight:600}
.callout p{margin:0}
.callout p + p{margin-top:.6em}

/* ---------- Legal / prose pages ---------- */
.prose{max-width:760px;padding-block:clamp(40px,6vw,64px) clamp(64px,8vw,96px)}
.prose h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.3em}
.prose .updated{font:400 .84rem/1 var(--fb);color:var(--faint);margin-bottom:2.4em}
.prose h2{font-size:1.35rem;margin:2em 0 .6em}
.prose h3{font-size:1.05rem;margin:1.6em 0 .5em}
.prose p,.prose li{color:var(--slate);font-size:.98rem}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1em 0}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--slate)}
.prose th{background:var(--card);color:var(--ink);font-weight:600}
/* the Google permission table: an unbroken scope URL otherwise claims three
   quarters of the row and squeezes the explanation into a ribbon */
.prose table.scopes{table-layout:fixed}
.prose table.scopes th,.prose table.scopes td{vertical-align:top}
.prose table.scopes th:first-child,.prose table.scopes td:first-child{width:44%}
.prose table.scopes code{font-size:.82rem;overflow-wrap:anywhere}

/* ---------- 404 ---------- */
.err-page{min-height:62vh;display:grid;place-items:center;text-align:center;padding:64px 24px}
.err-code{font:500 .82rem/1 var(--fm);color:var(--pos);background:var(--pos-soft);display:inline-block;padding:8px 14px;border-radius:var(--radius-pill);margin-bottom:20px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .chat-live i{animation:none}
  .msg-user .cursor{animation:none}
  .spend-bar,.bars-12 i{transition:none}
  .btn,.plat,.step{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .chat{max-width:640px}
  .rack{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:18px 24px 22px;gap:4px;box-shadow:var(--shadow-1)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px;font-size:1rem}
  .nav-cta{margin:10px 0 0;text-align:center;justify-content:center}
  .nav-burger{display:block}
  .steps{grid-template-columns:1fr}
  .prompts{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .lead-wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .rack{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  .footer-grid > div:first-child{grid-column:1/-1}
  .form-grid{grid-template-columns:1fr}
  .cmp{display:block;overflow-x:auto}
  .gstep{grid-template-columns:1fr;gap:10px}
  .chat-body{height:500px;padding:18px 14px 14px}
  .mini-table{font-size:.7rem}
  .mini-table td{padding:6px 8px 6px 0}
  .ai-text{font-size:.84rem}
  .hero-ctas .btn{width:100%}
}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:100;font:600 .9rem/1 var(--fb)}
.skip:focus{left:0;text-decoration:none}

/* ---------- Roadmap / upcoming platforms ---------- */
.plat.soon{background:#E6EAF2;border:1px solid #D9DFEA;border-style:solid}
@media (min-width:641px){.plat.soon{min-height:221px}}
.plat.soon:hover{transform:none;box-shadow:none;border-color:#CBD3E2}
.plat.soon h3{color:#9AA1B4;font-size:1.08rem}
.plat.soon p{font-size:.84rem;color:var(--faint);margin:0}
.count.up{color:#8A6116;background:#FBF0DC}
.prompt-card.auto{border-left-color:var(--pos)}
.uses .tagx{color:#8A6116;font-weight:500}
@media (max-width:900px){.rack-soon{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rack-soon{grid-template-columns:1fr}}

/* ---------- Alternating sections + fold + fixes (13 Jul) ---------- */
.bg-m{background:#EEF1F6}
.nav-links .btn-primary{color:#071018}
.nav-links .btn-primary:hover{color:#071018}
.msg-ai strong{color:#fff}
.hero{display:flex;align-items:center;min-height:max(520px,calc(100svh - var(--navh,67px) - 80px));padding-block:clamp(20px,4vh,48px)}
.hero-grid{width:100%}
.hero h1 .u{background:var(--pos-bright);color:#070707;padding:0 .14em;border-radius:4px}
.strip{background:#EEF1F6;border-block:1px solid #E2E7F0}
.logo{align-items:center}
.logo .mark{flex:none;display:block}
@media (max-height:960px) and (min-width:1021px){
  .chat-body{height:384px}
  .hero h1{font-size:clamp(2.3rem,4.4vw,3.4rem)}
  .hero .lead{font-size:1.05rem;margin-bottom:20px}
  .chat-chips{padding:10px 20px 12px}
  .chat-note{padding-bottom:9px}
}
@media (max-width:1020px){
  .hero{padding-block:clamp(20px,4vh,44px)}
}
@media (max-height:800px) and (min-width:1021px){
  .chat-body{height:352px}
  .strip{padding-block:18px}
}

/* mono stays only where it means code or data */
.rack-foot code{font:500 .8rem/1.4 var(--fm);color:var(--slate)}
.uses b{font-family:var(--fm);font-weight:500}

/* ---------- Prompt gallery v2 ---------- */
.p-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ptag{font:600 .66rem/1 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--slate);background:var(--paper);border:1px solid var(--line);padding:6px 10px;border-radius:var(--radius-pill)}
.ptag.auto{color:#8A6116;background:#FBF0DC;border-color:#F1E2C2}
.ptag.rt{color:#067A66;background:var(--pos-soft);border-color:#C4EFE3}
.prompt-card q{font:400 .97rem/1.55 var(--fb);color:var(--ink)}
.p-hint{font:400 .8rem/1.4 var(--fb);color:var(--faint);margin:-4px 0 0}
.p-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.p-tools span{font:500 .68rem/1 var(--fm);color:var(--slate);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:6px 9px}

/* ---------- Form validation states + custom section ---------- */
.field.invalid input,.field.invalid textarea{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12);background:#fff}
.plat-chips.invalid{outline:2px solid rgba(192,57,43,.45);outline-offset:5px;border-radius:8px}
.consent.invalid,.consent.invalid a{color:#C0392B}
.consent.invalid input[type="checkbox"]{border-color:#C0392B}
.custom-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------- Platform logos + 10-card grid ---------- */
.plat-logo{width:40px;height:40px;border-radius:11px;background:#F2F5FA;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.plat-logo img{width:22px;height:22px;display:block}
.plat-head h3{flex:1;min-width:0}
.plat.soon .plat-logo{background:#EDF0F6}

.pl-ic svg{width:18px;height:18px;display:block}

/* setup CTA band distinct from footer */
.site-footer{border-top:1px solid rgba(255,255,255,.09)}

.strip .hl-mint{background:var(--pos-bright);color:#071018;padding:3px 7px;border-radius:5px}

.copy-btn.copied{background:var(--pos-bright);color:#071018}

/* ---------- Prompt gallery v3: assistant composer bars ---------- */
.p-bar{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 12px 11px 14px}
.p-bar .p-plus{color:#A2AABD;flex:none}
.p-bar q{flex:1;font:400 .93rem/1.5 'Space Grotesk',var(--fb);letter-spacing:.005em;color:var(--ink)}
.p-bar q::before,.p-bar q::after{content:none}
.send{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s,transform .15s}
.send:hover{background:var(--pos-bright);color:#071018;transform:scale(1.06)}
.send svg{width:16px;height:16px}
.send .i-check{display:none}
.send .i-copy{display:block}
.send.copied{background:var(--pos-bright);color:#071018}
.send.copied .i-copy{display:none}
.send.copied .i-check{display:block}

/* ---------- Composer bars: option B navy + mint ring ---------- */
.p-bar{background:#1C2946;border:1px solid rgba(0,251,206,.45)}
.p-bar q{color:#E8EEFA}
.p-bar .p-plus{color:#6F7A94}
.send{background:transparent;border:1.5px solid rgba(0,251,206,.6);color:var(--pos-bright)}
.send:hover{background:rgba(0,251,206,.14);color:var(--pos-bright);transform:scale(1.06)}
.send.copied{background:var(--pos-bright);border-color:var(--pos-bright);color:#071018}

/* ---------- Category tag palette (distinct, never gray) ---------- */
.ptag.rep{color:#1E48C8;background:#E7EDFF;border-color:#D3DEFC}
.ptag.aud{color:#6437C9;background:#EFE9FF;border-color:#E0D5FA}
.ptag.gov{color:#C4314B;background:#FDE8EC;border-color:#F8D4DC}
/* ---------- Send button tooltip ---------- */
.send{position:relative}
.send::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);right:-4px;background:#0B1322;color:#fff;font:600 .68rem/1 var(--fb);letter-spacing:.02em;padding:6px 9px;border-radius:6px;white-space:nowrap;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}
.send:hover::after{opacity:1;transform:translateY(0)}
.send.copied::after{content:"Copied!";opacity:1;transform:translateY(0);background:var(--pos-bright);color:#071018}

/* ---------- Prompt cards: soft gray fill; hover lifts the card (no border change).
   transition redeclared here to win over .reveal's, keeping opacity at .55s for the
   entrance while the hover lift stays snappy ---------- */
.prompt-card{background:#F4F6FA;border-color:#E3E8F1;transition:opacity .55s ease,transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.prompt-card:hover{background:#fff;border-color:#E3E8F1;transform:translateY(-3px);box-shadow:0 16px 42px rgba(9,16,32,.12)}
.prompt-card .p-tools span{background:#fff;border-color:#E3E8F1}

/* ---------- Gallery filters ---------- */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px}
#prompts .section-head{margin-bottom:0}
.p-filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:6px}
.fbtn{font:600 .72rem/1 var(--fb);letter-spacing:.03em;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 13px;cursor:pointer;transition:all .15s}
.fbtn:hover{border-color:#C7CFE0;color:var(--ink)}
.fbtn.active{background:var(--pos-bright);color:#071018;border-color:var(--pos-bright)}
.prompt-card.hidden{display:none}
/* ---------- Gallery responsive fix: allow shrink below longest token ---------- */
.prompts > .prompt-card{min-width:0}
.p-bar{min-width:0}
.p-bar q{min-width:0;overflow-wrap:anywhere}
.p-tools{min-width:0}
.p-tools span{overflow-wrap:anywhere}

/* ---------- Cookie consent bar ---------- */
.cookiebar{position:fixed;left:18px;bottom:18px;z-index:80;max-width:360px;background:var(--ink);color:#D7DEEC;border:1px solid #26314F;border-radius:14px;padding:16px 16px 14px;box-shadow:0 18px 40px -18px rgba(6,10,22,.6)}
.cookiebar p{margin:0 0 12px;font:400 .84rem/1.55 var(--fb)}
.cookiebar b{color:#fff}
.cookiebar a{color:var(--pos-bright)}
.cb-actions{display:flex;gap:9px;justify-content:flex-end}
.cb-btn{font:600 .78rem/1 var(--fb);border-radius:var(--radius-pill);padding:9px 15px;cursor:pointer;transition:all .15s}
.cb-btn.ghost{background:transparent;color:#C6CFE2;border:1px solid #3A4666}
.cb-btn.ghost:hover{color:#fff;border-color:#5A688F}
.cb-btn.solid{background:var(--pos-bright);color:#071018;border:1px solid var(--pos-bright)}
.cb-btn.solid:hover{background:#0BE7BE}
@media (max-width:480px){.cookiebar{left:12px;right:12px;max-width:none;bottom:12px}}

/* ---------- Setup mock: connection switcher + urlbox spacing ---------- */
.gstep .urlbox{margin-bottom:14px}
.mk-switch{display:inline-flex;background:#E7EBF3;border-radius:9px;padding:3px;gap:2px;margin-top:4px}
.mk-sw{font:600 .7rem/1 var(--fb);color:var(--faint);padding:6px 11px;border-radius:7px}
.mk-sw.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,21,38,.12)}

.sync-list{background:#0D1730;border:1px solid var(--line-ink);border-radius:12px;padding:6px 14px;margin-top:10px}
.sync{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1C2946}
.sync:last-child{border-bottom:0}
.sync b{font:600 .8rem/1.4 var(--fb);color:#fff}
.sync span{font:500 .7rem/1.6 var(--fm);color:#9FB0CE}
.sync span:first-line{color:#9FB0CE}
@media (max-width:640px){.sync{flex-direction:column}}

/* ---------- Scale page ---------- */
.pl-teal{color:#088C77}
.pl-teal .pi{width:20px;height:20px}
.pl-ic .pi{width:18px;height:18px}
.scale-demo{max-width:860px;margin:0 auto}
.scale-body{height:auto;max-height:none;overflow:visible}
.scale-demo .msg-ai{max-width:100%}
.scale-demo .ai-text{margin:10px 0 0}
.dash{background:#0D1730;border:1px solid var(--line-ink);border-radius:12px;padding:14px;margin-top:12px}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:#121F3D;border:1px solid #223052;border-radius:10px;padding:11px 12px;min-width:0}
.tile b{display:block;font:500 .6rem/1 var(--fm);letter-spacing:.08em;color:var(--faint);margin-bottom:7px}
.tile span{font:700 1.06rem/1 var(--fb);color:#fff}
.tile i{font:600 .68rem/1 var(--fm);margin-left:7px;font-style:normal}
.up{color:var(--pos-bright)}.dn{color:#FF9D9D}
.dash-row{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:10px}
.spark,.leaders{background:#121F3D;border:1px solid #223052;border-radius:10px;padding:11px 12px;min-width:0}
.spark b,.leaders b{display:block;font:500 .6rem/1 var(--fm);letter-spacing:.08em;color:var(--faint);margin-bottom:9px}
.spark-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.spark-bars s{flex:1;background:#2E4A8F;border-radius:3px 3px 0 0;text-decoration:none}
.spark-bars s.mint{background:var(--pos-bright)}
.leaders em{display:flex;justify-content:space-between;gap:10px;font:400 .78rem/1.9 var(--fb);font-style:normal;color:#D7DEEC}
.dash-sched{display:flex;align-items:center;gap:8px;margin-top:11px;font:500 .72rem/1 var(--fm);color:var(--pos-bright)}
.dash-sched .pi{width:14px;height:14px;flex:none}
.pill-alert{display:inline-flex;align-items:center;gap:6px;font:500 .72rem/1 var(--fm);color:#071018;background:var(--pos-bright);border-radius:var(--radius-pill);padding:6px 11px;vertical-align:middle}
.pill-alert .pi{width:13px;height:13px;flex:none}
.chat-note{margin-top:12px}
@media (max-width:640px){.dash-grid{grid-template-columns:1fr 1fr}.dash-row{grid-template-columns:1fr}}

.hero-tight{padding-bottom:26px}
#vision.section{padding-top:10px}

.plat p b{color:#088C77;font-weight:600}

.spark-bars .h34{height:34%}.spark-bars .h41{height:41%}.spark-bars .h38{height:38%}.spark-bars .h52{height:52%}.spark-bars .h47{height:47%}.spark-bars .h61{height:61%}.spark-bars .h58{height:58%}.spark-bars .h72{height:72%}

/* ---------- Beyond carousel ---------- */
.carousel{overflow:hidden;position:relative}
.car-track{display:flex;touch-action:pan-y;cursor:grab;transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.car-track.p0{transform:translateX(0)}.car-track.p1{transform:translateX(-100%)}.car-track.p2{transform:translateX(-200%)}.car-track.p3{transform:translateX(-300%)}
.car-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;gap:12px;padding:2px}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.car-dot{width:8px;height:8px;border-radius:99px;border:0;background:#31405F;cursor:pointer;padding:0;transition:all .25s}
.car-dot.on{background:var(--pos-bright);width:22px}
.pill-ghost{display:inline-flex;align-items:center;gap:7px;font:500 .72rem/1 var(--fm);color:var(--pos-bright);border:1px solid rgba(0,251,206,.55);border-radius:var(--radius-pill);padding:6px 11px}
.pill-ghost .pi{width:13px;height:13px}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#0D1730;border:1px solid var(--line-ink);border-radius:12px;padding:16px 14px;margin-top:12px}
.flow-chip{display:inline-flex;align-items:center;gap:8px;font:600 .78rem/1 var(--fb);color:#EAF0FB;background:#121F3D;border:1px solid #223052;border-radius:10px;padding:10px 12px}
.flow-chip .pi{width:16px;height:16px;color:#9FB0CE}
.flow-chip.mark{background:var(--pos-bright);border-color:var(--pos-bright);padding:8px 10px}
.flow-chip.mark svg{width:18px;height:18px;display:block}
.flow-arrow{color:#5A6B8F;font-size:1.05rem}
@media (prefers-reduced-motion: reduce){.car-track{transition:none}}

.scale-demo{position:relative;overflow:visible}
.car-arr{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#A9B2C6;cursor:pointer;padding:6px;transition:color .15s,transform .15s}
.car-arr:hover{color:var(--ink);transform:translateY(-50%) scale(1.1)}
.car-arr .pi{width:40px;height:40px}
.car-arr.prev{left:-62px}
.car-arr.next{right:-62px}
@media (max-width:1010px){.car-arr{display:none}.scale-demo{margin-bottom:10px}}

.scale-demo > .chat-top{border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0}
.scale-demo > .chat-body{border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px)}
/* ---------- Studio timeline ---------- */
.flowline{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;position:relative;margin-top:14px}
.flowline::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--pos-bright),#B9C4DC 55%,#E4E8F1)}
.fl-step{position:relative;padding-top:58px}
.fl-node{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--pos-bright);color:#088C77;font:700 .95rem/36px var(--fb);text-align:center;box-shadow:0 0 0 6px #fff}
.fl-step h3{font:700 1.08rem/1.3 var(--fd);color:var(--ink);margin:0 0 8px}
.fl-step p{margin:0;color:var(--slate);font-size:.93rem}
@media (max-width:860px){.flowline{grid-template-columns:1fr;gap:26px}.flowline::before{left:19px;right:auto;top:20px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,var(--pos-bright),#B9C4DC 55%,#E4E8F1)}.fl-step{padding:0 0 4px 58px;min-height:44px}.fl-node{top:0;left:0}.fl-step h3{margin-top:8px}}

.car-anim .msg-ai{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.car-anim .msg-ai.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.car-anim .msg-ai{opacity:1;transform:none}}

/* ---------- Blog ---------- */
.art-hero{padding:64px 0 28px}
.art-hero .wrap{max-width:760px}
.art-hero h1{font:800 clamp(1.7rem,3.4vw,2.5rem)/1.16 var(--fd);color:var(--ink);margin:12px 0 14px;letter-spacing:-.01em}
.art-meta{font:500 .8rem/1 var(--fb);color:var(--faint);display:flex;gap:14px;flex-wrap:wrap}
.art-body{max-width:760px;margin:0 auto;padding:8px 20px 30px}
.art-body p{color:var(--text);margin:0 0 18px;line-height:1.75}
.art-body h2{font:700 1.32rem/1.3 var(--fd);color:var(--ink);margin:34px 0 12px}
.art-body ul{margin:0 0 18px;padding-left:22px;color:var(--text);line-height:1.7}
.art-body li{margin-bottom:8px}
.art-body code{font:500 .84em var(--fm);background:#EEF2F9;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink)}
.art-body a{color:var(--blue)}
.art-exp{font-size:.86rem;color:var(--slate);border-left:3px solid var(--pos-bright);padding:10px 14px;background:#F2FBF8;border-radius:0 10px 10px 0;margin:0 0 22px}
.cta-band{background:var(--ink);border-radius:var(--radius-lg);padding:26px 26px;margin:34px 0;color:#D7DEEC}
.cta-band h3{font:700 1.15rem/1.3 var(--fd);color:#fff;margin:0 0 8px}
.cta-band p{margin:0 0 16px;font-size:.92rem}
.cta-band .btn-ghost{background:#fff;color:#0E1526;border-color:#D9DFEA}
.cta-band .btn-ghost:hover{border-color:#9AA6BF}
.art-faq h3{font:600 1rem/1.4 var(--fb);color:var(--ink);margin:18px 0 6px}
.art-faq p{margin:0 0 12px}
.related{border-top:1px solid var(--line);margin-top:36px;padding-top:22px}
.related h2{margin-top:0}
.related a{display:block;margin-bottom:9px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:9px;transition:all .18s}
.post-card:hover{background:#fff;box-shadow:var(--shadow-1);border-color:#C9D2E4;transform:translateY(-2px)}
.post-card .ptag2{font:600 .64rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#088C77}
.post-card h3{font:700 1.02rem/1.35 var(--fd);color:var(--ink);margin:0}
.post-card p{font-size:.85rem;color:var(--slate);margin:0;flex:1}
.post-card .pc-link{font:600 .82rem var(--fb);color:var(--blue)}
.blog-cluster{margin-top:40px}
.blog-cluster > h2{font:700 1.3rem var(--fd);color:var(--ink)}
@media (max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}

.cta-band p{color:#C4CEE3}
.art-meta .msep{color:#C1CADB;font-weight:700}
a.post-card, a.post-card:hover, a.post-card:hover *{text-decoration:none}
.art-hero{padding:56px 0 12px}
.blog-sec{padding-top:6px}
.b-filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 2px}
.blog-cluster.hidden{display:none}
.art-body .btn-primary{color:#071018}

span.hl{background:linear-gradient(0deg,var(--pos-bright),var(--pos-bright)) no-repeat left bottom .1em / 100% .46em;-webkit-box-decoration-break:clone;box-decoration-break:clone}


.form-status:empty{display:none}
.btn-primary.sent, .btn-primary.sent:disabled{background:var(--pos-bright);color:#071018;opacity:1;box-shadow:none;cursor:default}
.btn-primary.sent .ck{width:16px;height:16px;margin-right:8px;vertical-align:-3px}

.car-track.car-drag{cursor:grabbing}
.carousel{user-select:none;-webkit-user-select:none}

@media (max-width:640px){.strip p{line-height:1.7;margin-bottom:14px}}

@media (max-width:640px){
  .cta-band .btn{display:flex;width:100%;justify-content:center}
  .cta-band .btn + .btn{margin-top:10px}
}

.tab-note{font:500 .88rem/1.6 var(--fb);color:var(--faint);margin:0 0 18px;max-width:820px}
.callout.note{background:#F4F6FA;border-color:#DDE3EF;color:var(--slate)}
.callout .btn{margin:10px 12px 4px 0}
.dir-cta .dir-alt{display:block;font-size:.85rem;color:var(--slate);margin-top:8px}
.guide .callout{margin-top:14px}

.urlbox code{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:560px){.gstep .dir-btn{display:flex;width:100%;justify-content:center;white-space:normal;text-align:center}}

.callout.note{margin:26px 0 30px;padding:20px 22px}
.dir-cta{margin-top:6px;padding:22px 24px}
.dir-cta .btn{margin-top:14px}
.panel-notes{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;max-width:820px}
.panel-notes .tab-note{margin:0 0 10px}

.gstep .dir-cta{margin-top:14px;padding:16px 18px}
.gstep .dir-cta .btn{margin:0}

.gstep .dir-btn{margin-top:18px}

.gstep .p-bar{margin-top:14px;max-width:640px}

.nav-ent{border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;border-radius:999px;padding:8px 15px;transition:.15s}
.nav-ent:hover{background:var(--ink);border-color:var(--pos-bright);box-shadow:0 0 0 3px rgba(0,251,206,.18);color:#fff}

.nav a.nav-ent, .nav-links a.nav-ent, a.nav-ent{font-weight:700;color:#fff}
.nav-links a.nav-ent:hover, a.nav-ent:hover{color:#fff}

.price-grid.three{grid-template-columns:1fr 1.12fr 1fr;gap:24px;align-items:stretch;max-width:none}
.price-grid.three .price{display:flex;flex-direction:column}
.price-grid.three .price .btn{margin-top:auto}
.price-grid.three .price{transition:box-shadow .2s,transform .2s,border-color .2s}
.price-grid.three .price:hover{box-shadow:var(--shadow-1);transform:translateY(-3px);border-color:#C7CFE0}
.price-grid.three .price.feat:hover{box-shadow:0 18px 44px rgba(9,16,32,.34)}
.seat-line{font:500 .92rem/1.4 var(--fb);color:var(--ink);background:var(--pos-soft);border:1px solid #BCE8D3;border-radius:10px;padding:9px 13px;margin:2px 0 14px}
.price.feat .seat-line{background:#132038;border-color:#2A3B5C;color:#E8EEFA}
.seat-line b{font-weight:700}
.seat-band{max-width:none;margin:26px 0 6px;background:#FFFFFFB8;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;font-size:.93rem;line-height:1.65;color:var(--slate)}
.seat-band b{color:var(--ink)}
@media (max-width:1080px){.price-grid.three{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

#pricing .price-foot{max-width:none;text-align:left;margin-left:0;margin-right:0}/*price-foot-wide*/
.ident-note{font:italic 400 .92rem/1.6 var(--fb);color:var(--slate);max-width:820px;margin-top:14px}

.page-hero.tight{padding-bottom:10px}
#guide{padding-top:16px}

.trial-note{font:500 .85rem/1.4 var(--fb);color:var(--slate);margin:8px 0 12px}
.price.feat .trial-note{color:#B9C4DC}

.cmp-example{font:500 .95rem/1.65 var(--fb);color:#DDE4F2;background:#152238;border:1px solid #26324B;border-radius:var(--radius);padding:16px 20px;margin:22px 0 14px;max-width:none}
.cmp-example b{color:#fff}

/* ---------- data reference v2 ---------- */
.fstats{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.fstat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:0 4px 14px rgba(9,16,32,.05)}
.fstat b{display:block;font:700 1.35rem/1.1 "Bricolage Grotesque",var(--fb);color:var(--ink)}
.fstat span{font:600 .72rem/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.fsource{font:500 .82rem/1.6 var(--fm);color:var(--faint);margin-top:16px}
.ftoolbar{position:sticky;top:66px;z-index:6;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:0 10px 30px rgba(9,16,32,.10);margin-bottom:4px}
.ftoolbar>svg{color:var(--faint);flex:none}
.ftoolbar input{flex:1;min-width:120px;border:0;outline:0;background:none;font:500 1rem/1.4 var(--fb);color:var(--ink)}
.ftoolbar input::placeholder{color:#A6AEC2}
.fchips{display:flex;gap:6px;background:#F1F3F9;border-radius:999px;padding:4px}
.fchip{font:600 .8rem/1 var(--fb);color:var(--slate);background:none;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;transition:.15s}
.fchip.on{background:var(--ink);color:#fff}
.fcount{font:700 .78rem/1 var(--fm);color:#0B7050;background:var(--pos-soft);border:1px solid #BCE8D3;border-radius:999px;padding:7px 12px;white-space:nowrap}
.fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 26px rgba(9,16,32,.06);margin-top:26px;overflow:hidden;transition:box-shadow .22s,transform .22s,border-color .22s}
.fgroup:hover{box-shadow:0 16px 42px rgba(9,16,32,.12);transform:translateY(-3px);border-color:#C7CFE0}
.fgroup-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:20px 24px 16px;background:linear-gradient(180deg,#FAFBFE,#fff);border-bottom:1px solid var(--line)}
.fgroup-head h2{font-size:1.25rem;margin:0}
.fgroup-head .gcount{font:700 .72rem/1 var(--fm);color:var(--slate);background:#F1F3F9;border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.fgroup-head .fnote{flex-basis:100%;color:var(--slate);font-size:.92rem;margin:2px 0 0;max-width:800px}
.ftable{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.ftable th,.ftable td{padding:14px 24px;text-align:left;vertical-align:top;border-bottom:1px solid #EEF1F6}
.ftable thead th{font:600 .7rem/1 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:#A6AEC2;background:transparent;border-bottom:1px solid var(--line)}
.ftable tbody tr:last-child td{border-bottom:0}
.ftable tbody tr:hover td{background:#F4FDF9}
.ftable code{font:600 .85rem/1.5 var(--fm);color:var(--ink);background:#F1F3F9;border:1px solid #E4E8F1;border-radius:7px;padding:3px 8px;white-space:nowrap}
.ftable td:first-child{width:34%}
.ftable td:nth-child(2){width:120px}
.fpill{font:700 .68rem/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 11px;white-space:nowrap}
.fpill.metric{background:var(--pos-soft);color:#0B7050;border:1px solid #BCE8D3}
.fpill.dimension{background:#EAF0FF;color:#2B4BAD;border:1px solid #CFDCFF}
.fpill.breakdown{background:#FFF3E2;color:#9A5B00;border:1px solid #F4DDB8}
.fask{display:block;font-style:italic;color:var(--faint);font-size:.84rem;margin-top:4px}
.fprompt{padding:16px 24px 30px;background:#F3F5FA;border-bottom:1px solid var(--line)}
.fprompt .p-bar{max-width:none}
.frelated{margin-top:26px;font-size:.92rem;color:var(--slate)}
.dref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:16px}
.dref-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;color:var(--ink);transition:box-shadow .2s,transform .2s,border-color .2s;position:relative}
a.dref-card:hover{box-shadow:var(--shadow-1);transform:translateY(-3px);border-color:#C7CFE0}
a.dref-card:hover .dref-arr{opacity:1;transform:none}
.dref-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font:700 .92rem/1 "Bricolage Grotesque",var(--fb);margin-bottom:14px;border:1px solid}
.dref-card h3{font-size:1.02rem;margin-bottom:6px}
.dref-card p{color:var(--slate);font-size:.86rem;line-height:1.55;margin-bottom:16px;flex:1}
.dref-count{align-self:flex-start;font:700 .72rem/1 var(--fm);color:#0B7050;background:var(--pos-soft);border:1px solid #BCE8D3;border-radius:999px;padding:6px 10px}
.dref-arr{position:absolute;top:20px;right:18px;color:var(--pos);opacity:0;transform:translateX(-4px);transition:.2s}
.dref-card.soon{opacity:.72}
.dref-card.soon .dref-count{background:#EEF1F6;color:var(--faint);border-color:var(--line)}
.map-wrap{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:0 14px 40px rgba(9,16,32,.22)}
.map-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-lg);overflow:hidden;font-size:.88rem}
.map-table th,.map-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line-ink);vertical-align:top;color:#D7DCEA;font-size:.8rem}
.map-table thead th{font:600 .7rem/1 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:#8A92A6;background:var(--ink-3)}
.map-table tbody th{font:600 .82rem/1.4 var(--fb);white-space:nowrap;color:#fff;background:rgba(255,255,255,.03)}
.map-table tbody tr:last-child th,.map-table tbody tr:last-child td{border-bottom:0}
.map-table code{font:600 .72rem/1.5 var(--fm);color:var(--pos-bright);background:#132038;border:1px solid #2A3B5C;border-radius:6px;padding:2px 7px;white-space:normal;overflow-wrap:anywhere;display:inline-block}
.map-table .mut{color:#8A92A6}
@media (max-width:720px){.ftoolbar{flex-wrap:wrap;top:60px;padding:12px 14px}.fcount{display:none}.fchips{flex-wrap:wrap}.fchip{padding:8px 11px;font-size:.76rem}.ftable{table-layout:fixed}.ftable th,.ftable td{padding:12px 16px}.ftable th:nth-child(2),.ftable td:nth-child(2){display:none}.ftable td:first-child{width:44%}.ftable code{white-space:normal;word-break:break-all}.fgroup-head{padding:16px 16px 12px}.fprompt{padding:4px 16px 18px}.fstat{padding:10px 14px}.fstat b{font-size:1.15rem}}


/* data reference v3 */
#fields{padding-top:92px}
.fsource{margin-bottom:0}
.fstat{background:var(--pos-soft);border-color:#BCE8D3;transition:box-shadow .2s,transform .2s}
.fstat:hover{box-shadow:0 10px 26px rgba(11,112,80,.16);transform:translateY(-2px)}
.fstat b{color:#0B7050}
.fstat span{color:#0B7050;opacity:.75}
.gtabs{display:flex;gap:8px;overflow-x:auto;padding:28px 2px 6px;margin-bottom:2px;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 34px),transparent)}
.gtabs.dragging{cursor:grabbing;scroll-behavior:auto}
.gtabs{scroll-behavior:smooth}
.gtabs::-webkit-scrollbar{display:none}
.gtab{font:600 .8rem/1 var(--fb);color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:.15s}
.gtab.on{background:var(--pos-soft);border-color:#9FE8CB;color:#0B7050}
.gtab:hover{border-color:#C7CFE0}
.fgroup-head{align-items:center}
.fgroup-head h2{line-height:1.2}
.fgroup-head .gcount{align-self:center}
.fgroup-head .fnote{margin-top:6px}
.fprompt-label{display:flex;align-items:center;gap:8px;font:600 .72rem/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#0B7050;margin:14px 0 8px}
.fdot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 4px var(--pos-soft)}
.rel-band{background:#E9EDF4;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;margin:0}
.rel-band--roomy{background:#fff;border-top:0;border-bottom:0;margin:0}
.rel-band .eyebrow{display:flex;justify-content:center;margin:0 0 26px}
.rel-band .frelated{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
.frelated{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rel-pill{display:inline-flex;align-items:center;gap:8px;font:600 .88rem/1 var(--fb);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px;transition:.15s}
.rel-pill:hover{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}
.rel-pill:hover .arr{color:var(--pos-bright)}
.rel-pill .arr{color:var(--pos)}
.section.pb-tight{padding-bottom:56px}
/* hub flip cards */
.dref-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.dref-card{display:block;perspective:1200px;background:none;border:0;padding:0;box-shadow:none}
a.dref-card:hover{transform:none;box-shadow:none}
.dref-inner{display:block;position:relative;width:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.dref-card:hover .dref-inner,.dref-card:focus-visible .dref-inner{transform:rotateY(180deg)}
.dref-face{border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;padding:20px;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.dref-front{position:relative;min-height:224px}
.dref-back{position:absolute;inset:0;transform:rotateY(180deg);background:#DCF7EA;border-color:#8FEBC7;color:var(--ink);justify-content:center;gap:10px}
.dref-front .dref-logo{width:44px;height:44px;border-radius:12px;background:#F2F5FA;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:14px;flex:none}
.dref-front .dref-logo img{width:24px;height:24px}
.dref-front h3{font-size:1.02rem;margin-bottom:6px}
.dref-front p{color:var(--slate);font-size:.85rem;line-height:1.5;margin-bottom:14px;flex:1}
.dref-back h3{color:var(--ink);font-size:1.05rem}
.dref-back p{color:#2E5D4B;font-size:.85rem;line-height:1.5}
.dref-back .dref-cta{display:inline-flex;align-items:center;gap:8px;font:700 .88rem/1 var(--fb);color:var(--ink);background:#fff;border:1px solid transparent;border-radius:999px;padding:12px 17px;margin-top:8px;box-shadow:0 8px 20px rgba(11,112,80,.18);transition:border-color .2s,box-shadow .2s}
.dref-back .dref-cta .arr{transition:transform .22s}
a.dref-card:hover .dref-cta{border-color:#0B7050}
a.dref-card:hover .dref-cta .arr{transform:translateX(4px)}
.dref-back .dref-soonchip{font:600 .78rem/1 var(--fm);color:#0B7050;border:1px solid #8FEBC7;background:#fff;border-radius:999px;padding:8px 12px;margin-top:8px}
.dref-count{align-self:flex-start;font:700 .72rem/1 var(--fm);color:#0B7050;background:var(--pos-soft);border:1px solid #BCE8D3;border-radius:999px;padding:6px 10px}
.dref-card.soon .dref-inner{opacity:.9}
/* map modern scroll */
.map-wrap{position:relative}
.map-wrap.can-scroll{padding-bottom:10px}
.map-wrap.can-scroll::after{content:"";position:absolute;top:0;right:0;bottom:10px;width:56px;background:linear-gradient(90deg,rgba(14,21,38,0),rgba(14,21,38,.55));pointer-events:none;border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.map-wrap.can-scroll{overflow-x:auto}
.map-wrap.can-scroll::-webkit-scrollbar{height:9px}
.map-wrap.can-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px}
.map-wrap.can-scroll::-webkit-scrollbar-thumb{background:#2A3B5C;border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.map-wrap.can-scroll::-webkit-scrollbar-thumb:hover{background:#3A4F78;background-clip:padding-box}
.map-wrap.can-scroll{scrollbar-width:thin;scrollbar-color:#2A3B5C rgba(255,255,255,.06)}
@media (max-width:720px){.gtabs{padding-top:10px}.dref-card,.dref-inner{min-height:196px}}

.dref-back::before{content:"";position:absolute;top:-26px;right:-26px;width:88px;height:88px;border:2px dashed #8FEBC7;border-radius:50%;opacity:.8;z-index:0}
.dref-back::after{content:"";position:absolute;bottom:-30px;left:-20px;width:74px;height:74px;background:#C6F2DF;border-radius:50%;opacity:.65;z-index:0}
.dref-back>*{position:relative;z-index:1}
.dref-back .dref-eyebrow{display:flex;align-items:center;gap:8px;font:600 .68rem/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#0B7050}
.dref-back .dref-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos)}

@media (max-width:900px){.map-table{min-width:840px}.map-table code{white-space:nowrap;overflow-wrap:normal}}

.plat-fields{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 .84rem/1 var(--fb);color:#088C77}

.plat-fields:hover{color:#0B7050}
.plat-fields .arr{transition:transform .2s}
.plat-fields:hover .arr{transform:translateX(3px)}

/* sticky searcher: full-bleed when stuck */
.ftool-sentinel{height:1px;margin-top:-1px}
.ftoolbar{transition:border-radius .25s,box-shadow .25s,padding .25s}
.ftoolbar.is-stuck{margin-left:calc(50% - 50vw);width:100vw;border-radius:0;border-left:0;border-right:0;border-top:0;padding-left:max(24px,calc((100vw - 1092px)/2));padding-right:max(24px,calc((100vw - 1092px)/2));box-shadow:0 12px 34px rgba(9,16,32,.12);top:64px}
#platforms-ref{padding-top:58px}

/* ---------- Identities: per-assistant collapsible panes (setup #identities).
   Reuses .faq details styling; the indicator is a downward chevron instead of
   the plus, flipping up when open ---------- */
#identities .section-head{margin-bottom:28px}
.id-acc{max-width:820px;margin-inline:0}
.id-acc details{transition:border-color .2s,transform .25s ease,box-shadow .25s ease}
.id-acc details:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(9,16,32,.12)}
.id-acc summary{align-items:center}
.id-sum{display:flex;align-items:center;gap:12px;min-width:0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.id-logo,.tab-logo,.lp-tab svg{fill:currentColor}
.id-logo{width:20px;height:20px;flex:none;color:var(--slate);transition:color .2s}
.id-acc details[open] .id-logo{color:#088C77}
.tab{display:inline-flex;align-items:center;gap:8px}
.tab-logo{width:18px;height:18px;flex:none}
.id-acc summary::after{content:"";width:9px;height:9px;border-right:2px solid #088C77;border-bottom:2px solid #088C77;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;align-self:center;margin-top:-4px}
.id-acc details[open] summary::after{transform:rotate(225deg);margin-top:4px}
.id-acc .a .guide{max-width:none}
.id-acc .gstep{padding:18px 20px}
/* blog hub hero: full container width so it left-aligns with the page, unlike
   article heroes which keep the narrow centered reading column */
.art-hero.hub-hero .wrap{max-width:var(--maxw)}
/* gstep rhythm: tighter callouts, breathing room after mocks and between paragraphs */
.gstep .callout{margin-top:14px;margin-bottom:14px}
.gstep .mockup{margin-bottom:14px}
.gstep p + p{margin-top:.6em}
/* mock-panel fields that carry their own small copy button (Gemini tab) */
.mockup .mk-has-copy{position:relative;padding-right:74px}
.mockup .mk-copy{position:absolute;right:7px;top:50%;transform:translateY(-50%);font:600 .62rem/1 var(--fb);padding:5px 9px;border-radius:6px}

/* ============================================================
   LANDERS (public/lp/*.html): one screen, no page scroll.
   Everything the visitor needs is in the viewport; the install
   steps and the sign-in live in an overlay so the page never
   scrolls away from the CTA.
   ============================================================ */
html.lp-html,html.lp-html body{height:100%;overflow:hidden}
body.lp{background:var(--paper);display:flex;flex-direction:column;min-height:100dvh;overflow:hidden}
.lp-stage{flex:1;min-height:0;display:flex;flex-direction:column}

/* top bar */
.lp-bar{flex:none;border-bottom:1px solid var(--line);background:#fff}
.lp-bar .wrap{display:flex;align-items:center;gap:14px;padding-block:11px}
.lp-bar .logo{font:800 1.08rem/1 var(--fd);color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.lp-bar .by{font:500 .7rem/1 var(--fb);color:var(--faint)}
/* repeat CTA, right edge flush with the demo window because the bar and the
   hero share .wrap. Dark so the green hero button keeps its monopoly on
   attention, and it lifts like a card on hover */
.lp-bar-cta{margin-left:auto;background:var(--ink);color:#fff;font:600 .9rem/1 var(--fb);padding:12px 20px;text-decoration:none;border:2px solid var(--pos-bright);box-shadow:0 6px 16px -9px rgba(9,21,38,.55)}
.lp-bar-cta:hover{background:var(--ink);color:#fff;border-color:var(--pos-bright);transform:translateY(-2px);box-shadow:0 16px 26px -14px rgba(9,21,38,.7),0 0 0 4px rgba(0,251,206,.16)}
.lp-bar-cta:active{transform:translateY(0)}
.lp-cta-ai{width:16px;height:16px;fill:var(--pos-bright);flex:none}
@media (max-width:620px){
  .lp-bar-cta{font-size:.78rem;padding:10px 13px;gap:7px}
  .lp-bar .by{display:none}
}
@media (max-width:430px){.lp-bar-cta{font-size:.72rem;padding:9px 12px;gap:6px}}
/* ten marks have to hold one line on a phone, a single logo alone on a second
   row reads as a mistake */
@media (max-width:560px){body.lp .lp-plat{gap:7px}}
/* the home strip carries twelve marks now, and ten plus two on a second row
   reads as a mistake: tighten until they hold one line */
@media (max-width:560px){.plat-band .lp-plat{gap:9px}}
@media (max-width:360px){.plat-band .lp-plat{gap:6px}.plat-band .lp-plat img{height:17px}}
@media (max-width:360px){body.lp .lp-plat{gap:6px}body.lp .lp-plat img{height:17px}}
/* the real app icon rather than the bare stroke mark: it carries its own
   tile and reads better at small sizes */
.lp-logo{width:30px;height:30px;border-radius:8px;display:block}
@media (max-width:920px){.lp-logo{width:26px;height:26px;border-radius:7px}}

/* the one screen: bottom padding heavier than top so the centred block sits
   a touch above the optical middle, which is where the eye expects it */
/* landers run a slightly wider container than the rest of the site: the hero
   needs room for a wide gap between the copy and the demo without either
   column giving up width. Header, hero and footer share .wrap so they stay
   aligned. Below 1200px nothing changes, the wrap is fluid there */
body.lp .wrap{max-width:1200px;padding-inline:24px}
/* past 1290px every extra pixel of window goes into the hero gutter, not the
   columns: the wrap grows with the viewport (to 1277) while keeping a 45px
   page margin, so copy stays 439 and the demo stays 571 while the gap opens
   up to 219. Below 1290 the wrap is the flat 1200 and the gap gives way */
@media (min-width:1290px){body.lp .wrap{max-width:min(1277px,calc(100vw - 90px))}}
.lp-main{flex:1;min-height:0;display:flex;align-items:center;padding-block:clamp(4px,.8vh,12px) clamp(16px,4vh,54px);overflow:hidden}
.lp-main .wrap{width:100%}
.lp-grid{display:grid;grid-template-columns:.9fr 1.17fr;gap:clamp(74px,calc(100vw - 1148px),219px);align-items:stretch}
/* THE demo-resize fix: without min-width:0 a grid item's automatic minimum
   size is its content, so a wide table arriving in the demo widens the right
   column, narrows the copy, rewraps the h1 and grows the whole row. The demo
   must never change size, so the tracks stay put and the content fits them */
.lp-grid>div{min-width:0}
.lp-grid>div:last-child{display:flex;flex-direction:column;justify-content:center;min-height:0}
/* desktop: the demo column matches the copy column exactly, top and bottom.
   The window takes whatever the chips leave, so its height is driven by the
   copy (fixed) and never by the demo content (which changes as it types) */
@media (min-width:921px){
  .lp-grid>div:last-child{justify-content:stretch}
  .lp-grid>div:last-child .lp-win{flex:1;height:auto;min-height:290px}
}
.lp-hero{display:flex;flex-direction:column;justify-content:center}
.lp-hero h1{font:800 clamp(1.6rem,3.5vw,2.85rem)/1.08 var(--fd);color:var(--ink);letter-spacing:-.02em;margin:8px 0 12px}
.lp-hero .lead{font:400 clamp(.95rem,1.15vw,1.08rem)/1.55 var(--fb);color:var(--slate);max-width:34em;margin:0 0 16px}
.lp-cta{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.lp-primary{font:700 clamp(.98rem,1.15vw,1.1rem)/1 var(--fb);padding:17px 24px;gap:13px;box-shadow:0 14px 34px -12px rgba(0,251,206,.75);border:2px solid var(--ink);cursor:pointer;display:inline-flex;align-items:center}
.lp-free{background:var(--ink);color:#fff;border:2px solid var(--paper);border-radius:var(--radius-pill);font:700 .72rem/1 var(--fb);letter-spacing:.03em;text-transform:uppercase;padding:6px 10px;flex:none}
.lp-micro{font:500 .8rem/1.5 var(--fb);color:var(--slate);margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lp-micro b{color:var(--ink);font-weight:600}
.lp-micro .sep{color:var(--line)}
/* the three things that hurt, stated plainly */
.lp-bullets{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:8px}
.lp-bullets li{position:relative;padding-left:33px;font:500 clamp(.86rem,1.02vw,.95rem)/1.45 var(--fb);color:var(--ink)}
/* the tick in a mint disc, the marker the app uses on its connect steps. Both
   layers are the same 22px box on the same origin, so the check is centred by
   geometry rather than by a font glyph’s baseline */
.lp-bullets li::before{content:"";position:absolute;left:0;top:calc(.725em - 11px);width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:var(--pos-soft);border:1px solid #B9F3E6}
.lp-bullets li::after{content:"";position:absolute;left:0;top:calc(.725em - 11px);width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067A69' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat}
/* the reassurance chips live under the demo now */
.lp-win-chips{margin:14px 0 0;justify-content:center;gap:8px 18px}
.lp-win-chips li{font-size:.76rem}

/* the demo window, dressed as the assistant app */
/* the home hero runs the same window as the landers, but outside the lander's
   flex column: it needs its own height, or the phone rule below collapses it */
.hero-demo{display:flex;flex-direction:column}
.hero-demo .lp-win{flex:none;height:clamp(300px,52vh,430px)}
@media (max-width:920px){.hero-demo .lp-win{height:clamp(280px,46vh,400px);min-height:0}}
/* two columns side by side: the window matches the copy exactly, top and
   bottom, the way the landers do it. The copy keeps its own centring, and the
   dots take their height out of the window, not out of the row */
@media (min-width:1021px){
  .hero-grid{align-items:stretch}
  .hero-grid>div:first-child{display:flex;flex-direction:column;justify-content:center}
  .hero-demo{justify-content:stretch}
  .hero-demo .lp-win{flex:1;height:auto;min-height:300px}
}
.lp-win{background:#F7F6F3;border:1px solid #E3E1DA;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -22px rgba(9,16,32,.35),0 2px 6px rgba(9,16,32,.06);display:flex;flex-direction:column;height:clamp(300px,52vh,430px)}
.lp-win-bar{flex:none;display:flex;align-items:center;gap:9px;padding:11px 14px;background:#F1EFEA;border-bottom:1px solid #E3E1DA}
.lp-lights{display:flex;gap:6px}
.lp-lights i{width:11px;height:11px;border-radius:50%;display:block}
.lp-lights i:nth-child(1){background:#FF5F57}
.lp-lights i:nth-child(2){background:#FEBC2E}
.lp-lights i:nth-child(3){background:#28C840}
.lp-win-title{font:500 .78rem/1 var(--fb);color:#8C8578;display:inline-flex;align-items:center;gap:7px;margin-left:6px}
.lp-win-title svg{width:13px;height:13px;color:#B0A99B}
.lp-win-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 .66rem/1 var(--fm);color:#067A69;background:#DDFBF3;border:1px solid #B9F3E6;padding:5px 9px;border-radius:var(--radius-pill)}
.lp-win-live i{width:6px;height:6px;border-radius:50%;background:var(--pos-deep);animation:pulse 1.8s infinite}
.lp-win-body{flex:1;min-height:0;contain:size;overflow:hidden;overscroll-behavior:none;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;transition:opacity .34s ease}
/* overflow:hidden, not auto: the demo scrolls itself as it plays, so there is
   no scrollbar to appear mid-cycle and rewrap every line, and nothing for a
   visitor to drag. scrollTop still works from script */
.lp-win-body.lp-restart{opacity:0}

/* messages, light assistant styling */
.lp-q{position:relative;align-self:flex-end;max-width:86%;background:#fff;border:1px solid #E3E1DA;color:#2B2A26;padding:10px 13px;border-radius:14px 14px 4px 14px;font:400 .88rem/1.5 var(--fb);box-shadow:0 1px 2px rgba(9,16,32,.04)}
/* nothing in the transcript may be squeezed by what arrives after it */
.lp-win-body>*{flex:none}
/* contain:size above is the second half of the demo-resize fix: the stage is
   sized as if it were empty, so a long transcript fills and scrolls it but can
   never push the window, the column or the grid row taller */
.lp-a{max-width:96%}
.lp-tool{display:inline-flex;align-items:center;gap:8px;font:500 .7rem/1 var(--fm);color:#8C8578;background:#EFEDE7;border:1px solid #E3E1DA;border-radius:8px;padding:7px 10px;margin-bottom:9px}
.lp-tool::before{content:"";width:6px;height:6px;border-radius:2px;background:#C96442;flex:none}
.lp-say{font:400 .87rem/1.6 var(--fb);color:#2B2A26;margin:0 0 9px}
.lp-say strong{font-weight:600;color:var(--ink)}
.ai-gap{margin-top:10px}
.ai-dim{color:#8C8578}
.lp-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font:400 .74rem/1.35 var(--fm);background:#fff;border:1px solid #E9E7E0;border-radius:9px;overflow:hidden}
.lp-tbl th{color:#8C8578;font-weight:500;text-align:left;padding:8px 9px;background:#FAF9F6;border-bottom:1px solid #E9E7E0;white-space:nowrap}
.lp-tbl td{color:#2B2A26;padding:8px 9px;border-bottom:1px solid #F0EEE8}
.lp-tbl tr:last-child td{border-bottom:0}
.lp-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.delta-up{color:#067A69;font-weight:500}
.delta-down{color:#C0442E;font-weight:500}
.lp-fade{animation:lpfade .34s ease both}
@keyframes lpfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lp-dots{display:inline-flex;gap:3px;margin-left:1px}
.lp-dots i{width:4px;height:4px;border-radius:50%;background:#C96442;animation:lpdot 1.1s infinite}
.lp-dots i:nth-child(2){animation-delay:.16s}
.lp-dots i:nth-child(3){animation-delay:.32s}
@keyframes lpdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* mini dashboard inside the enterprise demo */
.lp-dash{background:#fff;border:1px solid #E9E7E0;border-radius:10px;padding:12px;margin-top:2px}
.lp-dash-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:600 .76rem/1.3 var(--fb);color:var(--ink);margin-bottom:10px}
.lp-dash-top em{font:500 .64rem/1 var(--fm);color:var(--pos-deep);font-style:normal}
.lp-dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.lp-dash-kpis div{background:#FAF9F6;border:1px solid #F0EEE8;border-radius:8px;padding:8px 9px}
.lp-dash-kpis b{display:block;font:700 .95rem/1.15 var(--fd);color:var(--ink)}
.lp-dash-kpis span{font:500 .6rem/1 var(--fm);color:#8C8578;letter-spacing:.04em;text-transform:uppercase}
.lp-dash-bars{display:flex;align-items:flex-end;gap:5px;height:46px}
.lp-dash-bars i{flex:1;height:0;background:linear-gradient(180deg,var(--pos),rgba(10,174,150,.3));border-radius:3px 3px 0 0;transition:height .5s cubic-bezier(.2,.7,.3,1)}

/* footer: legal only, one line */
/* the closing band: ink, the ten platform marks in white, legal underneath */
.lp-foot{flex:none;background:var(--ink);padding-block:18px 13px}
.lp-plat-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px}
.lp-plat-eyebrow span{font:600 .6rem/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:#6C7591}
.lp-plat-eyebrow::before,.lp-plat-eyebrow::after{content:"";height:1px;width:clamp(20px,6vw,74px);background:rgba(255,255,255,.16)}
.lp-plat{display:flex;align-items:center;justify-content:center;gap:clamp(15px,3.1vw,42px);flex-wrap:wrap}
/* the marks sit a centimetre under the eyebrow rule, the eyebrow itself stays put */
@media (min-width:921px){.lp-plat{margin-top:38px}}
.lp-plat img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.82;transition:opacity .2s}
.lp-plat img:hover{opacity:1}
.lp-legal{font:400 .68rem/1.5 var(--fb);color:#5F6880;margin:36px 0 0;text-align:center}
.lp-legal a{color:#8A92A6;text-decoration:underline;text-underline-offset:2px}

/* the overlay: install steps or sign-in, the only thing that scrolls */
.lp-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(9,16,32,.55);backdrop-filter:blur(3px)}
.lp-modal.on{display:flex}
.lp-modal-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:0 40px 90px -30px rgba(9,16,32,.6);width:min(700px,100%);max-height:min(88dvh,780px);overflow-y:auto;padding:clamp(26px,3.6vw,42px) clamp(22px,3.4vw,40px);position:relative;animation:lpfade .22s ease both}
.lp-modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--slate);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
.lp-modal-x:focus-visible,.lp-tab:focus-visible,.lp-copy:focus-visible,.lp-primary:focus-visible,.oauth-btn:focus-visible{outline:2px solid var(--pos-deep);outline-offset:2px}
.lp-modal-x:hover{background:var(--paper);color:var(--ink)}
.lp-modal-card h2{font:800 clamp(1.3rem,2.3vw,1.68rem)/1.2 var(--fd);color:var(--ink);margin:0 0 26px;padding-right:44px}
.lp-modal-card>p.lead{font:400 .95rem/1.6 var(--fb);color:var(--slate);margin:0 0 24px;max-width:46em}
.lp-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.lp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:700 .84rem/1.2 var(--fb);color:var(--slate);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 8px;cursor:pointer;transition:border-color .15s,box-shadow .15s,color .15s;text-align:center}
.lp-tab svg{width:23px;height:23px;transition:color .15s}
.lp-tab:hover{border-color:#BFC8DA;color:var(--ink)}
.lp-tab[aria-selected="true"]{background:#fff;border-color:var(--pos);color:var(--ink);box-shadow:0 0 0 1px var(--pos),0 10px 24px -14px rgba(10,174,150,.55)}
.lp-tab[aria-selected="true"] svg{color:var(--pos-deep)}
/* every assistant panel sits in the same grid cell, so the card is always as
   tall as the longest set of steps and switching tabs never resizes the popup */
.lp-panels{display:grid;grid-template-columns:minmax(0,1fr)}
.lp-panels>.lp-panel{grid-area:1/1;min-width:0}
.lp-panel[hidden]{display:block;visibility:hidden;pointer-events:none}
.lp-panel ol{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.lp-panel li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:15px;align-items:start}
.lp-panel li::before{content:counter(s);width:30px;height:30px;border-radius:9px;background:var(--pos-soft);color:#088C77;font:700 .82rem/30px var(--fb);text-align:center}
.lp-panel li p{margin:0;font:400 .92rem/1.65 var(--fb);color:var(--slate)}
.lp-panel li b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px}
/* the directory button needs air above and below, it is the click on this panel */
/* one button per panel, on step one: same green, same size everywhere. The
   pill is nowrap by default, which spills out of the card on a narrow phone,
   so this one wraps instead */
.lp-panel li .lp-gobtn{margin:14px 0 2px}
.lp-panel li .lp-gobtn .btn{max-width:100%;white-space:normal;text-align:center;font-size:.88rem;padding:12px 20px}
.lp-url{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-top:12px}
.lp-url code{font:500 .74rem/1.35 var(--fm);color:var(--ink);word-break:break-all}
.lp-copy{flex:none;margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:7px;font:700 .7rem/1 var(--fb);padding:8px 11px;cursor:pointer}
.lp-copy.done{background:var(--pos-deep)}

/* sign-in, inline in the hero on the enterprise lander */
.lp-signin{margin-top:2px}
.oauth-row{display:flex;gap:10px;flex-wrap:wrap}
.oauth-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 210px;min-height:48px;border-radius:10px;font:500 .92rem/1.25 var(--fb);padding:13px 16px;text-decoration:none;border:1px solid #747775;background:#fff;color:#1F1F1F;transition:box-shadow .15s}
.oauth-btn:hover{box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}
.oauth-btn svg{width:18px;height:18px;flex:none}
.oauth-reassure{font:500 .8rem/1.55 var(--fb);color:var(--slate);margin:12px 0 0}
.oauth-reassure b{color:#067A69}
.lp-consent{display:flex;gap:10px;align-items:flex-start;margin-top:11px;font:400 .76rem/1.5 var(--fb);color:var(--faint)}

.lp-consent a{color:var(--pos-deep)}
.lp-webview{display:none;font:500 .8rem/1.5 var(--fb);color:#8A6116;background:#FBF0DC;border:1px solid #F0DEBB;border-radius:9px;padding:10px 12px;margin:0 0 12px}
.lp-webview.on{display:block}

@media (max-width:920px){
  /* stack, and let the demo window take exactly the space left over rather
     than carrying a fixed height that pushes the footer off the screen */
  .lp-main{padding-block:clamp(8px,1.6vh,16px);align-items:stretch;min-height:0}
  .lp-main .wrap{display:flex;flex-direction:column;min-height:0;height:100%}
  .lp-grid{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);flex:1;min-height:0}
  .lp-hero{flex:none}
  .lp-grid>div:last-child{flex:1;min-height:0;display:flex;flex-direction:column}
  .lp-win{height:auto;flex:1;min-height:120px}
  .lp-foot-long{display:none}
  .lp-foot{padding-block:10px 8px}
  .lp-plat-eyebrow{margin-bottom:8px}
  .lp-plat-eyebrow::before,.lp-plat-eyebrow::after{width:16px}
  .lp-plat{gap:15px}
  .lp-plat img{height:20px}
  .lp-legal{font-size:.62rem;margin-top:20px}
  .lp-hero .lead{margin-bottom:12px}
  .lp-bullets{margin-bottom:14px;gap:6px}
  .lp-bullets li{font-size:.83rem;padding-left:31px}
  .lp-win-chips{margin-top:10px;gap:5px 13px;flex:none}
  .lp-win-chips li{font-size:.7rem}
  .lp-cta{width:100%}
  .lp-primary{width:100%;justify-content:center;padding:17px 16px;gap:10px}
  .lp-free{font-size:.66rem;padding:6px 9px}
  .lp-micro{justify-content:center;font-size:.74rem;gap:7px}
  .oauth-btn{flex:1 1 100%}
  .lp-cap{display:none}
  .lp-tabs{grid-template-columns:repeat(2,1fr);gap:10px}
  .lp-tab{padding:14px 8px;font-size:.8rem}
}
/* a viewport too short to hold the screen gets its scroll back: clipping
   the CTA would be worse than scrolling */
@media (max-height:560px){
  html.lp-html,html.lp-html body{overflow:auto}
  body.lp{overflow:auto}
  .lp-win{height:260px}
}
.lp-cap{font:400 .68rem/1.4 var(--fm);color:var(--faint);text-align:center;margin:9px 0 0}
@media (max-height:760px){.lp-cap{display:none}}

/* short viewports: tighten every band so the whole screen still lands */
@media (max-width:920px) and (max-height:700px){
  .lp-hero h1{font-size:clamp(1.42rem,6vw,1.72rem);margin:5px 0 9px}
  .lp-hero .lead{font-size:.88rem;line-height:1.45;margin-bottom:10px}
  .lp-bullets{margin-bottom:11px;gap:5px}
  .lp-bullets li{font-size:.79rem;line-height:1.35;padding-left:29px}
  .lp-bullets li::before{width:20px;height:20px;top:calc(.675em - 10px)}
  .lp-bullets li::after{left:0;width:20px;height:20px;top:calc(.675em - 10px);background-size:10px 10px}
  .lp-primary{padding:14px 14px;font-size:.88rem;gap:8px}
  .lp-free{font-size:.61rem;padding:5px 7px}
  .lp-micro{font-size:.7rem;gap:6px}
  .lp-win{min-height:112px}
  .lp-win-chips{margin-top:8px;gap:4px 11px}
  .lp-win-chips li{font-size:.66rem}
  .lp-bar .wrap{padding-block:8px}
  .lp-main{padding-block:8px}
  /* the sign-in hero carries the most, so it tightens the most: the two
     buttons sit side by side rather than stacked */
  .oauth-btn{flex:1 1 calc(50% - 5px);font-size:.72rem;letter-spacing:-.01em;padding:12px 6px;gap:6px;min-height:44px;white-space:nowrap}
  .oauth-btn svg{width:16px;height:16px}
  .oauth-reassure{font-size:.72rem;line-height:1.45;margin-top:9px}
  .lp-consent{font-size:.68rem;line-height:1.4;margin-top:8px;gap:8px}
  .lp-consent input{width:15px;height:15px}
  .lp-win{min-height:92px}
  /* the reassurance line already says no card, so the micro line is noise here */
  .lp-micro-ent{display:none}
  /* on the sign-in hero the reassurance line already covers read-only and no
     card, and the band below covers the platforms, so the chips are noise */
  body[data-conv="signin"] .lp-win-chips{display:none}
  body[data-conv="signin"] .lp-win{min-height:77px}
  .lp-plat-eyebrow{display:none}
  .lp-plat img{height:19px}
  .lp-legal{margin-top:18px}
  .lp-foot{padding-block:12px 9px}
}


/* the demo window's title bar names the four assistants it runs in.
   Decorative, not a control: the ul carries the label for screen readers and
   the names collapse to marks on phones, where four labels do not fit */
.lp-assist-tabs{list-style:none;display:flex;align-items:center;gap:3px;margin:0 0 0 2px;padding:0}
.lp-assist-tabs li{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;font:500 .71rem/1 var(--fb);color:#8C8578}
.lp-assist-tabs li.on{background:#fff;color:#2B2A26;box-shadow:0 1px 2px rgba(9,16,32,.09)}
.lp-assist-tabs svg{width:13px;height:13px;fill:currentColor}
@media (max-width:920px){
  .lp-assist-nm{display:none}
  .lp-assist-tabs li{padding:6px 8px}
}

/* ---------- Home platform band: the lander footer connector line, fold-visible (27 Aug) ---------- */
.hero-grid>div:first-child{max-width:477px}
.plat-band{background:var(--ink);padding-block:16px 18px}
.plat-band .lp-plat{margin-top:0}
.hero .hero-grid{transform:translateY(clamp(-24px,calc(760px - 100svh),0px))}
/* Home prompt gallery: whiter cards, prompt bar goes soft diffused mint (27 Aug) */
#prompts .prompt-card{background:#fff}
#prompts .prompt-card:hover{background:#fff}
#prompts .p-bar{background:linear-gradient(120deg,#F8F9FC 0%,#ECEFF5 45%,#F6F8FB 100%);border:1px solid rgba(10,174,150,.35)}
#prompts .p-bar q{color:var(--ink)}
#prompts .p-bar .p-plus{color:#8FB8AD}
#prompts .send{background:var(--pos-bright);border:1.5px solid var(--pos-bright);color:#071018;box-shadow:0 8px 20px -8px rgba(0,251,206,.55)}
#prompts .send:hover{background:var(--pos-bright);color:#071018;box-shadow:0 10px 24px -8px rgba(0,251,206,.75)}
#prompts .send.copied{background:var(--pos-deep);border-color:var(--pos-deep);color:#fff}
html:has(body.home){scrollbar-width:none;-ms-overflow-style:none}
html:has(body.home)::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- Enterprise demo reskinned to the home lp-win look (28 Aug): colors and chrome only, content and geometry untouched ---------- */
.chat.scale-demo{background:#F7F6F3;border:1px solid #E3E1DA;border-radius:14px;box-shadow:0 24px 60px -22px rgba(9,16,32,.35),0 2px 6px rgba(9,16,32,.06)}
.scale-demo .chat-top{background:#F1EFEA;border-bottom:1px solid #E3E1DA}
.scale-demo .dots i{width:11px;height:11px}
.scale-demo .dots i:nth-child(1){background:#FF5F57}
.scale-demo .dots i:nth-child(2){background:#FEBC2E}
.scale-demo .dots i:nth-child(3){background:#28C840}
.scale-demo .chat-title{color:#8C8578}
.scale-demo .chat-live{color:#067A69;background:#DDFBF3;border:1px solid #B9F3E6;padding:5px 9px;border-radius:var(--radius-pill)}
.scale-demo .chat-live i{background:#0AAE96}
.scale-demo .msg-user{background:#fff;border:1px solid #E3E1DA;color:#2B2A26;box-shadow:0 1px 2px rgba(9,16,32,.04)}
.scale-demo .msg-user .cursor{background:#2B2A26}
.scale-demo .msg-ai{background:transparent;border:0;padding:0}
.scale-demo .ai-text{color:#2B2A26}
.scale-demo .msg-ai strong{color:#111}
.scale-demo .tool-line{display:inline-flex;align-items:center;color:#8C8578;background:#EFEDE7;border:1px solid #E3E1DA;border-radius:8px;padding:7px 10px}
.scale-demo .dash{background:#fff;border:1px solid #E9E7E0}
.scale-demo .tile,.scale-demo .spark,.scale-demo .leaders{background:#FAF9F6;border:1px solid #E9E7E0}
.scale-demo .tile b,.scale-demo .spark b,.scale-demo .leaders b{color:#8C8578}
.scale-demo .tile span{color:#2B2A26}
.scale-demo .leaders em{color:#2B2A26}
.scale-demo .up{color:#067A69}
.scale-demo .dn{color:#C0442E}
.scale-demo .spark-bars s{background:linear-gradient(180deg,var(--pos),rgba(10,174,150,.35))}
.scale-demo .spark-bars s.mint{background:var(--pos-bright)}
.scale-demo .dash-sched{color:#067A69}
.scale-demo .pill-ghost{color:#067A69;border-color:rgba(10,174,150,.5)}
.scale-demo .chat-top{gap:9px;padding:11px 14px}
.scale-demo .tool-line::before{content:"";width:6px;height:6px;border-radius:2px;background:#C96442;flex:none}
.scale-demo .sync-list{background:#fff;border:1px solid #E9E7E0}
.scale-demo .sync{border-bottom:1px solid #F0EEE8}
.scale-demo .sync b{color:#2B2A26}
.scale-demo .sync span{color:#8C8578}
.scale-demo .sync span:first-line{color:#8C8578}
.scale-demo .flow{background:#fff;border:1px solid #E9E7E0}
.scale-demo .flow-chip{color:#2B2A26;background:#FAF9F6;border:1px solid #E9E7E0}
.scale-demo .flow-chip.mark{background:#fff;border-color:#E9E7E0;color:#2B2A26}
.scale-demo .pill-alert{background:#DDFBF3;border:1px solid #B9F3E6;color:#067A69}
.scale-demo .spark-bars s.mint{background:var(--pos)}
.scale-demo .flow-arrow{color:#8C8578}