*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{scroll-behavior:smooth;scrollbar-gutter:stable;background:var(--bg-default);color:var(--text-default);font:400 16px/1.4 var(--font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
body{min-height:100%;background:var(--bg-default)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;cursor:pointer}
img,svg,canvas{display:block}
ul,ol{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px;position:relative}
@media (min-width:788px){.container{padding:0 24px}}

/* type scale */
.h-base{font-size:16px;font-weight:600;line-height:1.4}
.h-lg{font-size:18px;font-weight:600;line-height:1.4}
.h-xl{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.25px}
.h-2xl{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.5px}
.h-3xl{font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.5px}
.h-4xl{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-2px}
.h-5xl{font-size:64px;font-weight:600;line-height:1.1;letter-spacing:-3px}
.eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:-.5px;text-transform:uppercase}
.mono{font-family:var(--font-mono)}
.t-secondary{color:var(--text-secondary)}
.t-quaternary{color:var(--text-quaternary)}
.t-link{color:var(--text-link)}

/* icons */
.i16{width:16px;height:16px;flex:none}.i20{width:20px;height:20px;flex:none}.i24{width:24px;height:24px;flex:none}.i12{width:12px;height:12px;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;white-space:nowrap;font-weight:500;transition:all var(--dur) var(--ease);border-radius:999px;line-height:1}
.btn:active{transform:scale(.98)}
.btn-36{height:36px;padding:0 16px;font-size:14px}
.btn-40{height:40px;padding:0 16px;font-size:14px;font-weight:600}
.btn-48{height:48px;padding:0 24px;font-size:16px}
.btn-32{height:32px;padding:0 12px;font-size:12px;font-weight:600}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.btn-primary:hover{background:var(--btn-primary-hover)}
.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}
.btn-secondary:hover{background:var(--btn-secondary-hover)}
.btn-tertiary{border-color:var(--btn-tertiary-border);color:var(--btn-tertiary-text)}
.btn-tertiary:hover{background:var(--btn-tertiary-hover)}
.btn-quaternary{color:var(--text-secondary)}
.btn-cta{background:var(--cta-bg);color:var(--cta-text)}
.btn-cta:hover{background:var(--btn-primary-hover)}
.btn-quaternary:hover{background:var(--btn-quaternary-hover)}
.btn-blue{background:var(--blue-9);color:#fff}
.btn-blue:hover{background:var(--blue-10)}

/* ---------------- NAV ---------------- */
.nav{position:sticky;top:0;z-index:50;background:var(--bg-default);border-bottom:.5px solid transparent;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.nav.scrolled{border-bottom-color:var(--border-default)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.nav-left{display:flex;align-items:center;gap:2px}
.logo{display:flex;align-items:center;gap:8px;margin-right:16px;height:28px;color:var(--text-default)}
.logo-mark{width:28px;height:28px;flex:none;background:url(assets/nook-icon-128.png) center/contain no-repeat}
.logo-word{width:57px;height:25px;font-size:0;background:currentColor;-webkit-mask:url(assets/nook-wordmark.svg) center/contain no-repeat;mask:url(assets/nook-wordmark.svg) center/contain no-repeat}
.nav-links{display:flex;align-items:center;gap:1px}
.nav-link{display:flex;align-items:center;gap:4px;height:36px;padding:0 12px;border-radius:24px;font-size:14px;font-weight:500;color:var(--text-secondary);white-space:nowrap;transition:background .15s var(--ease)}
.nav-link:hover,.nav-link[aria-expanded=true]{background:var(--btn-quaternary-hover)}
.nav-link.has-menu{padding:0 8px 0 12px;border-radius:36px}
.nav-link .chev{width:18px;height:18px;color:var(--icon-secondary);transition:transform .3s ease-in-out}
.nav-link[aria-expanded=true] .chev{transform:rotate(180deg)}
.nav-link .ext{width:16px;height:16px;color:var(--icon-secondary)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-right .gh{padding:0 16px 0 12px;color:var(--text-secondary)}
.menu-btn{display:none;position:relative;width:36px;height:36px;border-radius:24px;background:var(--bg-element);align-items:center;justify-content:center}
.menu-btn span{position:absolute;width:14px;height:1.5px;border-radius:2px;background:var(--icon-default);left:11px;transition:transform .3s}
.menu-btn span:first-child{transform:translateY(-3px)}.menu-btn span:last-child{transform:translateY(3px)}
@media (max-width:1007.98px){.nav-links,.nav-right{display:none}.menu-btn{display:flex}}

/* ---------------- ANNOUNCEMENT BAR (Round 11a) ----------------
   One highlighter-yellow line above the nav on every page. The same yellow and near-black text in dark and light mode
   (#f5ff3d on #111113 is about 18:1). It scrolls away with the page, so the sticky nav and anchor offsets are unchanged. */
.announce{display:block;background:#f5ff3d;color:#111113;font-size:13px;font-weight:500;line-height:18px;text-align:center}
.announce-inner{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:9px;padding-bottom:9px}
.announce-text{text-wrap:balance}
/* Round 13a: "Checkout Bench" is underlined so the bar reads as a link; the whole bar still links to checkoutbench.ai */
.announce-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor}
.announce:hover .announce-link{text-decoration-thickness:1.5px}
.announce-arrow{flex:none;width:14px;height:14px;transition:transform .15s var(--ease)}
.announce:hover .announce-text{text-decoration:underline;text-underline-offset:3px}
.announce:hover .announce-arrow{transform:translateX(2px)}
.announce:focus-visible{outline:2px solid #111113;outline-offset:-4px}

/* mega menu */
.mega-overlay{position:fixed;left:0;right:0;top:68px;bottom:0;background:var(--overlay);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:40}
.mega{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-in-out;z-index:45;pointer-events:none}
.mega>div{overflow:hidden;background:var(--bg-default)}
.mega.open{grid-template-rows:1fr;pointer-events:auto}
.nav.mega-open~.mega-overlay,.mega-overlay.open{opacity:1;pointer-events:auto}
.mega-panel{display:none;gap:16px;padding-top:40px;padding-bottom:64px;animation:fadeIn .3s ease-in-out}
.mega-panel.active{display:flex}
.mega-col{width:240px;display:flex;flex-direction:column;gap:24px}
.mega-col .eyebrow{color:var(--text-quaternary)}
.mega-col ul{display:flex;flex-direction:column;gap:8px}
.mega-col a{display:flex;align-items:center;gap:8px;font-size:16px;line-height:1.4;font-weight:500}
.mega-col a:hover{color:var(--text-secondary)}
.chip{display:inline-flex;align-items:center;min-height:20px;padding:0 10px;border-radius:12px;background:var(--bg-element);color:var(--text-secondary);font-size:12px;font-weight:500;line-height:1.25}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:600;background:var(--bg-default);display:flex;flex-direction:column;transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease-out-quart),visibility 0s linear .45s;overflow:auto;overscroll-behavior:none}
.sheet.open{transform:none;visibility:visible;transition:transform .45s var(--ease-out-quart),visibility 0s}
@media (min-width:1008px){.sheet{display:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px}
.sheet-close{width:36px;height:36px;border-radius:24px;background:var(--bg-element);display:flex;align-items:center;justify-content:center}
.sheet-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:1px 16px 0}
.sheet-auth .btn{font-size:14px}
.sheet-list{padding:22px 16px 32px}
.sheet-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 16px;font-size:17px;font-weight:600;line-height:1.4;text-align:left}
.sheet-item .chev{width:16px;height:16px;color:var(--icon-secondary);transition:transform .3s}
.sheet-item[aria-expanded=true] .chev{transform:rotate(180deg)}
.sheet-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}
.sheet-sub>div{overflow:hidden}
.sheet-sub.open{grid-template-rows:1fr}
.sheet-sub ul{padding:0 16px 12px 32px;display:flex;flex-direction:column;gap:12px}
.sheet-sub a{font-size:15px;font-weight:500;color:var(--text-secondary)}
body.locked{overflow:hidden}

/* ---------------- HERO ---------------- */
.hero{position:relative;overflow-x:clip}
.hero .container{padding-bottom:32px}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:24px}
.burst{width:min(41rem,calc(100vw + 2rem));aspect-ratio:1;margin:-24px 0;touch-action:pan-y;user-select:none}
.hero-copy{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;width:100%;max-width:448px}
.hero-copy h1{letter-spacing:-1.2px;text-wrap:balance}
.hero-ctas{display:flex;flex-direction:column;gap:8px;width:100%}
.hero-side{position:relative;z-index:10;display:flex;flex-direction:column-reverse;align-items:center;gap:24px;text-align:center;width:100%;max-width:448px}
.hero-side p{font-size:16px;font-weight:500;color:var(--text-secondary)}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:.5px solid var(--border-default);background:color-mix(in srgb,var(--bg-subtle) 80%,transparent);padding:4px 10px 4px 4px;backdrop-filter:blur(2px);transition:all .3s}
.pill:hover{background:var(--bg-element);border-color:var(--border-secondary);box-shadow:var(--pill-hover-shadow)}
.pill-tag{display:inline-flex;align-items:center;gap:6px;border-radius:16px;border:.5px solid var(--border-default);background:var(--pill-tag-bg);padding:4px 10px;box-shadow:var(--shadow-sm);font-size:12px;transition:background-color .3s;font-weight:500;line-height:1}
.pill-dot{position:relative;width:8px;height:8px;display:flex;align-items:center;justify-content:center}
.pill-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-7)}
.pill-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-9);animation:status-pulse 2.2s linear infinite}
.pill-dot i{position:relative;width:4px;height:4px;border-radius:50%;background:var(--green-11);z-index:1}
.pill-text{font-size:12px;line-height:20px;font-weight:500;color:var(--text-secondary);display:inline-flex;align-items:center;gap:8px}
.pill:hover .pill-text svg{transform:translateX(1.5px)}
.pill-text svg{transition:transform .3s}
@keyframes status-pulse{0%{opacity:0;transform:scale(1)}20%{opacity:.65}to{opacity:0;transform:scale(2.1)}}
/* Hero art: the Nook icon in a store constellation (hero.js draws the dot grid and flies the six quoting stores in) */
.hero-art{position:relative;isolation:isolate}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-art .hicon{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;translate:-50% -50%;border-radius:23%;overflow:hidden;z-index:3;background:#e8dbe6;
  box-shadow:0 1px 2px rgba(28,32,36,.08),0 12px 28px rgba(120,96,150,.18),0 30px 60px rgba(120,96,150,.14)}
.hero-art .hicon img{width:100%;height:100%;display:block;object-fit:cover}
.hero-art .hicon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.hero-art .stile{position:absolute;left:0;top:0;width:8.6%;aspect-ratio:1;border-radius:24%;z-index:2;background:#fff;opacity:0;will-change:transform;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.10)}
.hero-art .stile img{width:100%;height:100%;border-radius:inherit;display:block}
.dark-theme .hero-art .hicon{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.5)}
.dark-theme .hero-art .stile{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.45)}
/* Round 6: hero CTAs — a larger, less rounded primary button and a plain text link */
.hero-ctas{align-items:center}
@media (min-width:944px){.hero-ctas.hero-ctas{flex-direction:column;align-items:flex-start;gap:6px;width:auto}}
.hero-cta{height:48px;padding:0 20px;font-size:15.5px;font-weight:600;border-radius:12px;gap:10px}
.hero-link{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 4px;font-size:15px;white-space:nowrap;font-weight:600;color:var(--text-default);text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1.5px}
.hero-link:hover{text-decoration-line:underline}
.hero-link svg{transition:transform var(--dur) var(--ease)}.hero-link:hover svg{transform:translateX(2px)}
.hero-link:focus-visible,.hero-cta:focus-visible{outline:2px solid var(--blue-9);outline-offset:3px;border-radius:12px}
/* Round 11c: phone hero CTA row. Desktop (944px+) keeps the original layout: the row is display:contents, the copy button and the short label are hidden. */
.hero-cta-row{display:contents}
.hero-cta .cta-sm,.hero-copybtn{display:none}
.hero-copybtn{height:48px;padding:0 14px 0 16px;gap:8px;border-radius:12px;flex:none;color:var(--text-default);font-size:15px;font-weight:600}
.hero-copybtn .ic-check{display:none}
.hero-copybtn.copied .ic-copy{display:none}.hero-copybtn.copied .ic-check{display:block}
.hero-copybtn:focus-visible{outline:2px solid var(--text-default);outline-offset:3px}
/* Round 13a: on phones the copy button sits at the right edge of the CTA row. Round 13b: back to the neutral secondary fill (.btn-secondary), with the visible label "Agents" before the icon */
/* Round 11d: desktop "Copy the agent guide" button keeps the text-link look; both labels share one grid cell so "Copied" causes no shift */
button.hero-link{font-family:inherit;background:none;border:0;cursor:pointer}
.hero-copylink .hcl-labels{display:inline-grid}
.hero-copylink .hcl-labels>span{grid-area:1/1;text-align:left}
.hero-copylink .hcl-done,.hero-copylink .ic-check{visibility:hidden}
.hero-copylink .ic-check{display:none}
.hero-copylink.copied .hcl-copy{visibility:hidden}.hero-copylink.copied .hcl-done{visibility:visible}
.hero-copylink.copied .ic-copy{display:none}.hero-copylink.copied .ic-check{display:block;visibility:visible}
.hero-copylink:hover svg{transform:none}
@media (max-width:943.98px){
  .hero-cta-row{display:flex;align-items:center;gap:8px;width:100%}
  .hero-ctas.hero-ctas{align-self:stretch}
  .hero-copybtn{margin-left:auto}
  .hero-cta .cta-lg,.hero-ctas .hero-link{display:none}
  .hero-cta .cta-sm{display:inline}
  .hero-copybtn{display:inline-flex}
}
/* Round 6: hero quote demo — one request, one status line, one itemized quote card (no mascot) */
.demo-panel{width:100%;background:var(--bg-subtle);border-radius:28px;padding:8px;box-shadow:inset 0 0 0 1px var(--border-secondary)}
.hero-side .frame.qdemo,.demo-split .frame.qdemo{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.qd-head{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0 0 2px 2px}
.qdemo .scene{font-size:14px;padding:14px 14px 16px;gap:16px;justify-content:flex-start;line-height:1.4}
.qd-agents{display:flex;align-items:center;gap:5px}
.qd-agents .mini-tile{width:18px;height:18px;border-radius:5px}
.qd-label{font-size:12px;color:var(--text-secondary);font-weight:500}
.qd-agents .qd-label{margin-right:5px;font-size:12.5px}
.qd-ask{align-self:flex-end;max-width:80%;background:var(--blue-9);color:#fff;padding:10px 14px;border-radius:18px 18px 6px 18px;font-size:14px;font-weight:500}
.qd-status{position:relative;height:20px;margin:-2px 0 -4px 2px;font-size:13px;color:var(--text-secondary);font-weight:500}
.qd-st{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.qd-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-9);animation:pdot 1.6s ease-in-out infinite}
.qd-ok{width:16px;height:16px;border-radius:50%;background:var(--green-9);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.qd-ok svg{width:11px;height:11px}
.qd-st-b{color:var(--green-11);opacity:0}
.frame.play .qd-st-a{animation:qd-out .4s ease forwards 3.1s}
.frame.play .qd-st-b{animation:fade .4s ease forwards 3.2s}
@keyframes qd-out{to{opacity:0}}
.qd-card{background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);padding:16px 18px;display:flex;flex-direction:column}
.qd-prod{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border-secondary)}
.qd-store{width:36px;height:36px;border-radius:9px;flex:none;box-shadow:var(--shadow-xs)}
.qd-name{font-weight:650;font-size:14.5px;letter-spacing:-.01em;line-height:1.25}
.qd-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.qd-rows{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--border-secondary)}
.qd-row,.qd-total{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.qd-row{font-size:13.5px;color:var(--text-secondary)}.qd-row span:last-child{color:var(--text-default);font-weight:500}
.qd-total{padding-top:10px;font-weight:700;font-size:17px;letter-spacing:-.01em}
.qd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.qd-eta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);font-weight:500}
.qd-eta svg{width:16px;height:16px}
.qd-confirm{position:relative;display:inline-grid;align-items:center;justify-items:center;height:32px;min-width:96px;padding:0 16px;border-radius:10px;background:var(--cta-bg);color:var(--cta-text);font-size:13.5px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.qd-c-a,.qd-c-b{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.qd-c-b{opacity:0}
.qd-c-b svg{width:13px;height:13px}
.frame.play .qd-confirm{animation:qd-press .5s ease forwards 7.2s}
.frame.play .qd-c-a{animation:qd-out .2s ease forwards 7.45s}
.frame.play .qd-c-b{animation:fade .3s ease forwards 7.5s}
@keyframes qd-press{0%{transform:scale(1)}35%{transform:scale(.94)}100%{transform:scale(1);background:var(--green-9);color:#fff}}
.qdemo .anim{transform:translateY(8px)}
.frame.play.qdemo .anim{animation-duration:.7s}
@media (prefers-reduced-motion:reduce){.qd-st-a{display:none}.qd-st-b{opacity:1}.qd-dot{animation:none!important}.qd-c-a{display:none}.qd-c-b{opacity:1}.qd-confirm{background:var(--green-9);color:#fff}}
.dark-theme .qd-card{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.4)}
/* Round 6b: "Any model. Same checkout." — standalone section for the Same job, three models card */
.models{padding:72px 0 8px}
.models-grid{display:grid;gap:28px}
.models-head p{color:var(--text-secondary);font-size:17px;line-height:1.55;margin-top:10px;max-width:520px}
.models-also{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:22px;color:var(--text-secondary);font-size:14px}
.models-also span{margin-right:4px}
.models-also img{width:32px;height:32px;border-radius:9px;box-shadow:var(--shadow-xs)}
.frame.models-card{display:block;background:var(--bg-subtle);border:0;box-shadow:inset 0 0 0 1px var(--border-secondary);border-radius:28px;padding:24px;overflow:visible;container-type:normal}
.mcard-head{display:flex;align-items:center;gap:12px}
.mcard-icon{width:40px;height:40px;border-radius:11px;background:var(--violet-9,#8e4ec6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none}
.mcard-title{font-weight:650;font-size:17px;letter-spacing:-.01em}
.mcard-sub{font-size:14px;color:var(--text-secondary);margin-top:2px}
.mlegend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:20px 0 6px;padding:0;font-size:13px;color:var(--text-secondary);font-weight:500}
.mlegend li{display:inline-flex;align-items:center;gap:6px}
.mlegend i{width:10px;height:10px;border-radius:3px}
.s0{background:var(--slate-6)}.s1{background:var(--slate-8)}.s2{background:var(--slate-10)}.s3{background:var(--blue-9)}
.mrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mrow{display:grid;grid-template-columns:32px 76px 1fr 64px;align-items:center;gap:12px;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:14px;padding:10px 14px 10px 10px}
.mtile{width:32px;height:32px;border-radius:9px;box-shadow:var(--shadow-xs)}
.mname{font-weight:600;font-size:14.5px}
.mbar{display:flex;gap:3px;height:12px}
.mseg{height:100%;border-radius:4px;transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.frame.play .mseg{transform:scaleX(1)}
.mtime{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mseg{transform:none;transition:none}}
@media (max-width:520px){.mrow{grid-template-columns:28px 1fr auto;row-gap:8px}.mtile{width:28px;height:28px}.mbar{grid-column:1/-1;order:3}.frame.models-card{padding:18px}}
@media (min-width:944px){.models{padding-top:96px}.models-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}}
/* Round 5: phones + small tablets — hero copy left-aligned, art smaller, CTAs in the first screen */
@media (max-width:943px){
  .hero-grid{gap:16px}
  .burst{width:min(84vw,340px);margin:-18px auto -26px}
  .hero-copy,.hero-side{align-items:flex-start;text-align:left;max-width:none}
  .hero-copy{gap:20px}
  .hero-copy h1{font-size:clamp(40px,11.4vw,48px);letter-spacing:-1.6px}
  .hero-ctas{align-items:flex-start;width:auto;gap:4px}
  .hero-link{height:40px}
}
@media (max-width:943px) and (max-height:700px){.burst{width:min(72vw,280px);margin:-20px auto -28px}}
@media (min-width:788px){.hero .container{padding-bottom:48px}}
@media (min-width:944px){
  .hero .container{padding-bottom:0}
  .hero-grid{display:grid;grid-template-columns:26rem minmax(0,1fr);align-items:center}
  .burst{grid-column:2;grid-row:1/span 2;margin:-64px auto;width:100%;max-width:41rem}
  .hero-copy{grid-column:1;grid-row:1;align-items:flex-start;text-align:left;max-width:none}
  .hero-ctas{flex-direction:row;width:auto}
  .hero-side{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;text-align:left;max-width:none}
}
@media (min-width:1152px) and (max-width:1327px){
  .hero-grid:has(>.hero-side){grid-template-columns:minmax(0,23rem) minmax(0,1fr) 22rem}
  .hero-side{grid-column:3;grid-row:1;padding-left:24px;align-self:center}
  .burst{grid-row:1;max-width:34rem;margin:-48px auto}
}
@media (min-width:1328px){
  .hero-grid:has(>.hero-side){grid-template-columns:26rem minmax(0,1fr) 26rem}
  .hero-side{grid-column:3;grid-row:1;padding-left:64px;align-self:center}
  .burst{grid-row:1;width:41rem;max-width:none;justify-self:center;margin:-64px 0}
}

/* ---------------- LOGO STRIP ---------------- */
.logos{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 0}
.logos .caption{display:none;font:400 12px/1.6 var(--font-mono);text-transform:uppercase;color:var(--text-secondary);text-align:center}
.marquee{width:100%;max-width:768px;margin-bottom:-32px;height:72px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);mask-image:linear-gradient(to right,transparent,#000 6rem,#000 calc(100% - 6rem),transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:logo-carousel 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.app-icon{width:40px;height:40px;border-radius:12px;box-shadow:var(--shadow-md);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px/1 var(--font-sans)}
@keyframes logo-carousel{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@media (min-width:788px){.logos{padding-top:40px}.logos .caption{display:block}.marquee{margin-bottom:0}}
@media (min-width:1008px){.logos{padding-bottom:0}}

/* ---------------- BUILDING BLOCKS ---------------- */
.blocks{padding-bottom:16px}
.blocks-card{display:grid;grid-template-columns:1fr;border-radius:32px;background:var(--bg-subtle);padding:32px 24px 24px}
.blocks-card h2{text-align:center;text-wrap:balance}
.blocks-card h2.blocks-title{font-size:clamp(28.8px,9.54vw,50.4px);line-height:1.02;letter-spacing:-.035em;font-weight:650;margin:4px 0 20px}
.blocks-art{margin:0 -18px;aspect-ratio:342/318;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.blocks-art svg{position:absolute;height:100%;width:auto;left:50%;transform:translateX(-50%);transition:opacity .5s,visibility .5s}
.blocks-art svg:not(.on){opacity:0;visibility:hidden}
.steps{display:flex;flex-direction:column;gap:4px}
.steps li{padding:4px 0}
.steps li.on{padding-bottom:8px}
.step-row{display:flex;align-items:center;gap:8px;position:relative}
.step-btn{font-size:16px;font-weight:600;line-height:1.4;color:var(--text-secondary);text-align:left;transition:color .15s}
.step-btn:hover,.on .step-btn{color:var(--text-default)}
.step-num{position:relative;flex:none;margin-left:1px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-default);color:var(--text-secondary);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:color .2s}
.step-num b{font-weight:600;position:relative}
.step-num svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.step-num circle{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.sn-track{stroke:var(--border-secondary)}
.sn-arc{stroke:var(--blue-9);stroke-linecap:round;stroke-dasharray:22 72.3;opacity:0;transform-origin:16px 16px;transition:opacity .25s}
.on .step-num{color:var(--text-default)}
.on .sn-arc{opacity:1;animation:sn-spin 1.6s linear infinite}
@keyframes sn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.on .sn-arc{animation:none;transform:rotate(-90deg)}}
.step-body p{padding-left:36px}
.ring{display:none;width:24px;height:24px;color:var(--icon-default)}
.on .ring{display:block}
.ring circle.prog{transition:stroke-dashoffset .2s linear}
.step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}
.on .step-body{grid-template-rows:1fr}
.step-body>div{overflow:hidden}
.step-body p{padding-top:16px;font-size:14px;line-height:1.4;font-weight:500;color:var(--text-secondary);opacity:0;transition:opacity .3s}
.on .step-body p{opacity:1}
@media (min-width:468px){.blocks-art{margin:0 auto;width:100%;max-width:448px}}
@media (min-width:1008px){
  .blocks{padding:16px 0}
  .blocks-card{grid-template-columns:minmax(0,1fr) minmax(0,min(600px,50%));grid-template-rows:auto 1fr;gap:16px;border-radius:40px;padding:40px}
  .blocks-card h2{grid-column:1;grid-row:1;max-width:384px;text-align:left;font-size:32px;line-height:1.1}
  .blocks-card h2.blocks-title{max-width:none;font-size:clamp(39.6px,4.14vw,57.6px);line-height:1;letter-spacing:-.035em;margin:0 0 8px}
  .blocks-art{grid-column:2;grid-row:1/span 2;margin:0;max-width:none;aspect-ratio:6/5;align-self:center}
  .steps{grid-column:1;grid-row:2;max-width:384px;gap:16px;align-self:end}
  .steps li{padding:8px 0}
  .step-row{gap:12px}
  .step-btn{font-size:24px;line-height:1.2;letter-spacing:-.5px}
  .step-body p{font-size:16px;padding-left:44px}
  .step-num{width:32px;height:32px;font-size:14px}
  .steps{gap:0}
  .steps li{padding:14px 0}
  .steps li+li{border-top:1px solid var(--border-secondary)}
}

/* ---------------- BENTO ---------------- */
.bento{padding-bottom:80px}
.bento-grid{display:grid;grid-template-columns:1fr;gap:16px}
.bcard{position:relative;display:block;overflow:hidden;border-radius:24px;background:var(--bg-subtle);border:1px solid transparent;transition:background-color .15s,border-color .15s}
.bcard:hover{background:var(--bg-element);border-color:var(--border-default)}
.bcard .corner{position:absolute;top:14px;right:19px;z-index:40;width:36px;height:36px;border-radius:50%;background:var(--corner-bg);display:flex;align-items:center;justify-content:center;opacity:0;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:opacity .2s}
.bcard:hover .corner{opacity:1}
.sdk{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px 24px 48px;text-align:center}
.sdk-art{width:160px;height:160px;position:relative;flex:none}
.sdk-text{display:flex;flex-direction:column;align-items:center;gap:24px}
.sdk-text>div{display:flex;flex-direction:column;align-items:center;gap:12px}
.sdk-text p{font-size:18px;font-weight:500}
.sdk .btn{height:36px;padding:0 16px;font-size:14px}
.bento-right{display:grid;grid-template-columns:1fr;gap:16px}
.ai{position:relative;display:flex;height:100%;min-height:320px;align-items:center;justify-content:center;overflow:hidden;padding:40px 24px;text-align:center}
.glow{position:absolute;left:0;right:0;top:0;height:80px;filter:blur(40px);pointer-events:none}
.glow span{position:absolute;border-radius:999px}
.glow .g1{top:0;left:8%;height:56px;width:58%;background:#2788f3;animation:ai-glow 11s ease-in-out infinite}
.glow .g2{top:4px;right:7%;height:52px;width:50%;background:#f76809;animation:ai-glow 14s ease-in-out -5s infinite reverse}
.glow .g3{top:8px;left:25%;height:40px;width:40%;background:#fff;animation:ai-glow 9s ease-in-out -3s infinite}
@keyframes ai-glow{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,8px) scale(1.08)}66%{transform:translate(-5%,-6px) scale(.95)}}
.ai-inner{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:24px}
.tiles{display:grid;grid-template-columns:max-content;grid-template-rows:max-content;line-height:0}
.tiles>div{grid-column:1;grid-row:1;width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.tiles>div:last-child{margin-left:81px}
.tile{width:91px;height:91px;border-radius:24px;display:flex;align-items:center;justify-content:center}
.tile.a{transform:rotate(-9deg);background:#d9775a}
.tile.b{transform:rotate(9deg);background:linear-gradient(135deg,#f76809,#2788f3);position:relative}
.tile.b::after{content:"";position:absolute;inset:6px;border-radius:17px;background:#000}
.tile.b b{position:relative;z-index:1;color:#fff;font:600 15px/1 var(--font-sans);letter-spacing:-.5px}
.ai-text{display:flex;flex-direction:column;align-items:center;gap:12px}
.ai-text h3{line-height:1.3}
.soft-pill{display:flex;align-items:center;border-radius:999px;background:var(--soft-pill-bg);padding:8px 16px;font-size:14px;font-weight:500;line-height:1.4;backdrop-filter:blur(2px)}
.bento-pair{display:grid;grid-template-columns:1fr;gap:16px}
.api{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:space-between;gap:32px;padding-bottom:48px;text-align:center}
.phone{position:relative;width:calc(100% - 64px);max-width:288px;aspect-ratio:1;flex:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0/.35) 22%,#000 45%);mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0/.35) 22%,#000 45%)}
.phone .screen{position:absolute;left:3%;right:3%;top:0;bottom:3%;border-radius:0 0 40px 40px;background:#111;border:7px solid #2a2a2e;border-top:0;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-content:end}
.phone .screen i{display:block;aspect-ratio:1;border-radius:3px;background:linear-gradient(160deg,#7d8a99,#c9d0d8)}
.phone .screen i:nth-child(3n){background:linear-gradient(160deg,#5f6b77,#a9b3bd)}
.phone .screen i:nth-child(4n){background:linear-gradient(160deg,#9aa4ae,#e4e8ec)}
.phone .tabbar{grid-column:1/-1;height:34px;margin:6px 18px 4px;border-radius:20px;background:#2a2b30}
.bigline{display:flex;flex-direction:column;align-items:center;padding:0 16px;text-wrap:balance}
.bigline p{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.5px}
.code-chip{display:inline-block;font-family:var(--font-mono);border-radius:6px;border:1px solid var(--border-default);background:var(--bg-element);padding:0 6px;vertical-align:middle;letter-spacing:-.6px;color:var(--text-secondary)}
.native{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;padding:48px 0;text-align:center}
.arc{position:relative;width:100%;aspect-ratio:360/199;container-type:inline-size}
.arc .sweep{position:absolute;left:50%;top:100%;width:0;height:0;animation:arc-sweep 16s linear infinite}
.arc .sweep>div{position:absolute;width:20cqw;height:20cqw;left:-10cqw;top:calc(-78cqw);border-radius:25%;box-shadow:0 5px 10px rgba(0,0,0,.05),0 15px 25px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:#fff;font:700 5cqw/1 var(--font-mono)}
.arc .caret{position:absolute;top:73%;left:50%;width:6cqw;aspect-ratio:21/13;transform:translateX(-50%);color:var(--icon-quaternary)}
@keyframes arc-sweep{0%{opacity:0;transform:rotate(-58deg)}7.76%{opacity:1;transform:rotate(-49deg)}92.24%{opacity:1;transform:rotate(49deg)}to{opacity:0;transform:rotate(58deg)}}
@media (min-width:788px){
  .bento{padding-bottom:128px}
  .bento-grid{grid-template-columns:524fr 740fr}
  .bcard{border-radius:40px}
  .sdk{gap:40px;padding:48px 16px}
  .sdk-art{width:192px;height:192px}
  .sdk-text h3{font-size:32px;line-height:1.1}
  .sdk-text p{font-size:18px;font-weight:500;line-height:1.4}
  .sdk .btn{height:48px;padding:0 24px;font-size:16px}
  .bento-pair{grid-template-columns:1fr 1fr}
  .ai{padding:64px 24px 48px}
  .api{padding-bottom:24px}
  .bigline p{font-size:16px;line-height:1.4;letter-spacing:0}
  .bigline{padding:0 8px}
}
@media (min-width:1008px){
  .sdk{gap:48px;padding:64px 40px}
  .sdk-art{width:224px;height:224px}
  .sdk-text h3{font-size:48px;letter-spacing:-2px}
  .sdk-text p{font-size:24px;letter-spacing:-.5px;line-height:1.2}
  .api{padding-bottom:32px}
  .bigline p{font-size:18px}
  .bigline{padding:0 16px}
}
@media (min-width:1328px){
  .bento-grid{aspect-ratio:1280/650}
  .bento-right{height:100%;grid-template-rows:230fr 404fr}
  .bento-pair{height:100%}
  .sdk{padding:64px}
  .sdk-art{width:240px;height:240px}
  .ai{min-height:0;padding:40px 24px}
  .glow{top:auto;bottom:-32px}
  .glow .g1{left:12%;height:64px;width:60%}.glow .g2{right:10%;height:60px}.glow .g3{height:48px}
  .ai-inner{flex-direction:row;justify-content:center;gap:16px}
  .ai-text{align-items:flex-start;gap:8px}
  .ai-text h3{white-space:nowrap}
  .soft-pill{font-size:16px}
  .api{padding-bottom:48px}
  .bigline p{font-size:24px;line-height:1.2;letter-spacing:-.5px}
  .bigline{padding:0 32px}
  .code-chip{border-radius:8px}
}

/* ---------------- PLATFORM ---------------- */
.platform-head{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.platform-head h2{max-width:576px;text-wrap:balance}
.platform-head .btn{height:36px;padding:0 16px;font-size:14px}
.features{margin-top:80px;display:flex;flex-direction:column;gap:24px}
.frow{display:grid;grid-template-columns:1fr;gap:24px}
.fcard{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:24px;overflow:hidden;border-radius:24px;border:1px solid transparent;background:var(--bg-subtle);padding:32px}
.fcard.top{justify-content:flex-start;padding-bottom:0}
.ftext{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ftext.narrow{max-width:448px}
.ftext h3 span{display:block;white-space:nowrap}
.ftext p{font-size:14px;font-weight:500;color:var(--text-secondary);text-wrap:pretty}
.more{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:500;color:var(--text-link)}
.more svg{width:16px;height:16px;transition:transform .15s}
.more:hover svg{transform:translateX(2px)}
.fart{width:100%;aspect-ratio:8/5;position:relative;display:flex;align-items:center;justify-content:center}
.fade-bottom{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent)}
/* /product only (Round 10g): .pgroup holds Your agent, Any model and the platform head as one section with an even, tighter rhythm; .platform-features is the feature grid split into its own section. Neither class is on the homepage. */
.pgroup .quotes{padding-top:40px}
.pgroup .models{padding:48px 0 0}
.pgroup .platform{padding:48px 0 40px}
.platform-features{padding-top:48px}
.platform-features .features{margin-top:0}
@media (min-width:788px){.pgroup .quotes{padding-top:56px}.pgroup .models,.pgroup .platform{padding-top:64px}.pgroup .platform{padding-bottom:56px}.platform-features{padding-top:64px}}
/* placeholder mock UI blocks */
.mock{background:var(--mock-bg);border:1px solid var(--border-secondary);border-radius:16px;box-shadow:var(--shadow-sm)}
.mock-line{height:10px;border-radius:5px;background:var(--mock-line)}
.mock-line.dark{background:var(--mock-line-strong)}
.mock-line.blue{background:var(--blue-7)}
.wide-art{width:100%;position:relative;display:grid;grid-template-columns:1fr 1.3fr 1.4fr;gap:20px;align-items:start;height:520px;padding:0 16px}
.tree{position:relative;width:62%;height:70%;margin:auto}
.dev-node{position:absolute;width:56px;height:56px;border-radius:16px;background:var(--bg-element);border:1px solid var(--border-secondary)}
@media (min-width:788px){
  .features{margin-top:128px}
  .frow{grid-template-columns:1fr 1fr}
  .fcard{border-radius:40px;padding:32px 24px}
  .ftext{gap:24px}
  .ftext h3{font-size:32px;line-height:1.1}
  .ftext p{text-wrap:balance}
  .platform{--h-platform-size:48px;--h-platform-ls:-2px}
  .platform-head h2{font-size:var(--h-platform-size);letter-spacing:var(--h-platform-ls)}
  .platform-head .btn{height:48px;padding:0 24px;font-size:16px}
}
@media (min-width:1008px){
  .features,.frow{gap:40px}
  .fcard{padding:64px;gap:32px}
  .fcard.top{padding:64px 64px 0}
}
@media (min-width:1328px){
  .features,.frow{gap:64px}
  .fcard{gap:48px}
  .fcard.top{gap:48px}
}
@media (max-width:787.98px){.wide-art{height:340px;grid-template-columns:1fr 1fr;width:calc(100% + 64px)}.wide-art>.col3{display:none}}

/* ---------------- STATS ---------------- */
.stats{padding:200px 0}
.stats .container{padding-left:0;padding-right:0}
.stat-lines{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-1px}
.stat-line{display:flex;align-items:center;justify-content:center;gap:4px}
.badge-pkg{display:inline-flex;align-items:center;justify-content:center;height:20px;width:51px;border-radius:4px;background:var(--slate-12);color:var(--bg-default);font:700 11px/1 var(--font-mono);letter-spacing:0;transform:translateY(4px)}
.avatars{display:flex}
.avatars i{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg-default);display:block}
.avatars i+i{margin-left:-8px}
.shape-a{width:40px;height:40px;border-radius:30%;background:var(--stat-tile);border:1px solid var(--stat-tile-border);transform:rotate(18deg) scale(.8)}
.shape-b{width:42px;height:40px;border-radius:28%;background:linear-gradient(135deg,#5fb8ff,#1b6fe0);transform:rotate(-8deg) scale(.8);margin-right:-4px}
@media (min-width:788px){
  .stats .container{padding:0 24px}
  .stat-lines{font-size:48px;letter-spacing:-2px}
  .stat-line{gap:8px}
  .badge-pkg{height:36px;width:93px;font-size:18px;transform:translateY(6px)}
  .avatars i{width:40px;height:40px}.avatars i+i{margin-left:-12px}
  .shape-a{width:60px;height:60px}.shape-b{width:63px;height:60px;margin-right:-8px}
}
@media (min-width:1008px){
  .stat-lines{font-size:64px;letter-spacing:-3px}
  .badge-pkg{height:50px;width:129px;font-size:24px;transform:translateY(8px)}
  .avatars i{width:48px;height:48px}.avatars i+i{margin-left:-14px}
  .shape-a{width:80px;height:80px}.shape-b{width:84px;height:80px;margin-right:-12px}
}

/* ---------------- COMMUNITY ---------------- */
.community{padding-top:20px}
.community-inner{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.community-inner>div{display:flex;flex-direction:column;align-items:center;gap:16px}
.community-inner>div p{font-size:14px;font-weight:500;color:var(--text-secondary)}
.community .cta-group{gap:8px}
.community .btn{height:36px;padding:0 16px;font-size:14px;background:var(--bg-element);color:var(--text-default)}
.community .btn:hover{background:var(--bg-hover)}
.community .cta-group span{font-size:12px;font-weight:500;color:var(--text-tertiary)}
.quotes{padding-top:48px}
.quotes-mask{overflow:hidden;max-height:1120px;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
.quotes-cols{columns:1;column-gap:16px}
.quote{display:inline-block;width:100%;break-inside:avoid;padding-bottom:16px;vertical-align:top;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.quote.in{opacity:1;transform:none}
.quote a{display:flex;flex-direction:column;gap:24px;border-radius:16px;border:1px solid var(--border-secondary);background:var(--bg-default);padding:32px;transition:all .3s ease-in-out}
.quote a:hover{border-color:var(--border-default);background:var(--bg-element)}
.who{display:flex;align-items:center;gap:8px}
.who i{width:48px;height:48px;border-radius:50%;flex:none;display:block}
.who b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.who small{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);line-height:1.6}
.quote p{font-size:16px;font-weight:500;line-height:1.4}
@media (min-width:788px){
  .community-inner>div h2{font-size:48px;letter-spacing:-2px;line-height:1.1}
  .community-inner>div p{font-size:16px}
  .community .btn{height:48px;padding:0 24px;font-size:16px}
  .quotes{padding-top:80px}
  .quotes-mask{max-height:600px}
  .quotes-cols{columns:2}
}
@media (min-width:1008px){.quotes-cols{columns:3}}
@media (min-width:1328px){.quotes-cols{columns:4}}

/* ---------------- CTA ---------------- */
.cta{position:relative;isolation:isolate;display:flex;align-items:center;min-height:560px;overflow:hidden}
.squircle{position:absolute;top:50%;left:50%;z-index:-10;width:540px;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.squircle i{position:absolute;inset:0;border-radius:32%;display:block}
.squircle .s1{background:var(--bg-default);box-shadow:inset 0 2.5px 21px 0 rgba(255,255,255,.9),inset 8.4px 8.4px 168px 0 rgba(134,134,134,.16)}
.squircle .s2{background:rgba(134,134,134,.12);box-shadow:inset 8.4px 8.4px 168px 0 rgba(134,134,134,.28)}
.dark-theme .squircle .s1{box-shadow:inset 0 2.5px 40px 0 rgba(210,216,228,.07),inset 8.4px 8.4px 168px 0 rgba(148,152,158,.035)}
.dark-theme .squircle .s2{background:rgba(255,255,255,.03);box-shadow:inset 0 2.5px 24px 0 rgba(255,255,255,.1)}
.cta-fade{position:absolute;left:0;right:0;bottom:0;z-index:-10;height:244px;background:linear-gradient(to top,var(--cta-fade-to),transparent)}
.cta .container{text-align:center}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:32px}
.cta h2{text-wrap:balance}
@media (min-width:788px){.cta{min-height:620px}.squircle{width:535px}.cta h2{font-size:64px;letter-spacing:-3px}}

/* ---------------- TRUST ROW ---------------- */
.trust .container{padding:0 16px}
.trust-row{display:flex;align-items:center;justify-content:center;padding:32px 0}
.trust-items{display:flex;align-items:center;gap:24px}
.trust-item{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}
.trust-item b{font-weight:600}
.trust-item span{font-weight:500;color:var(--text-secondary)}
.trust-item svg{width:20px;height:20px}
.trust-mobile{display:none;width:100%;align-items:flex-start;justify-content:space-between}
.trust-mobile>div{display:flex;flex-direction:column;gap:8px}
.trust-end{display:flex;justify-content:center;padding:0 0 32px}
.rule{margin:0 16px;border-bottom:.5px solid var(--border-default)}
@media (min-width:788px){.trust .container{padding:0 8px}}
@media (min-width:1008px){.trust-items{gap:32px}}
@media (min-width:1328px){.trust-items{gap:40px}}
@media (max-width:1007.98px){.trust-item .lg{display:none}}
@media (max-width:787.98px){.trust-items{display:none}.trust-mobile{display:flex}.rule{margin:0}}

/* ---------------- FOOTER ---------------- */
.foot-nav{display:flex;flex-direction:column;gap:40px;padding:40px 0}
.foot-brand{display:flex;flex-direction:column;gap:24px}
.foot-logo{width:44px;height:44px;background:url(assets/nook-icon-128.png) center/contain no-repeat}
.light-theme :is(.logo-mark,.foot-logo){border-radius:23%;box-shadow:0 0 0 .5px rgba(0,0,0,.14)}
.newsletter{display:flex;flex-direction:row;align-items:center;gap:12px;border-radius:16px;background:var(--bg-subtle);padding:16px}
.newsletter>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.newsletter .eyebrow-row{display:flex;align-items:center;gap:6px;font:400 12px/1 var(--font-mono);text-transform:uppercase;color:var(--text-secondary)}
.newsletter .eyebrow-row i{display:inline-block;width:6px;height:10px;background:#0072de}
.newsletter p{font-size:14px;font-weight:500;line-height:1}
.newsletter .btn{margin-left:auto}
.foot-cols{display:grid;grid-template-columns:1fr;gap:40px 16px;width:100%}
.foot-cols h3{margin-bottom:20px;font-size:16px;font-weight:600}
.foot-cols ul{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:14px;line-height:22.4px}
.foot-cols a{color:var(--text-secondary);transition:color .15s}
.foot-cols a:hover{color:var(--text-default)}
.foot-bottom{padding:24px 0;font-size:12px;color:var(--text-secondary);border-top:1px solid var(--border-default)}
.foot-bottom-row{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;gap:12px}
.status{display:inline-flex;align-items:center;gap:6px;padding:0 4px;font-weight:500;color:var(--text-default)}
.status i{width:6px;height:6px;border-radius:50%;background:var(--green-9)}
.privacy{display:inline-flex;align-items:center;gap:6px}
.privacy i{width:26px;height:12px;border-radius:6px;background:var(--blue-9);display:block;position:relative}
.privacy i::after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#fff}
.socials{display:flex;gap:16px}
.socials a{width:26px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:32px;color:var(--text-secondary)}
.socials a:hover{color:var(--text-default);background:var(--bg-element)}
.socials svg{width:16px;height:16px}
.theme-select{position:relative}
.theme-btn{display:flex;align-items:center;gap:8px;height:32px;padding:8px;min-width:97px;border-radius:20px;border:1px solid var(--border-default);background:var(--bg-default);font-size:12px;font-weight:500;color:var(--text-default)}
.theme-btn:hover{background:var(--theme-btn-hover)}
.theme-btn .grow{flex:1;text-align:left}
.theme-menu{position:absolute;bottom:38px;right:0;min-width:120px;padding:4px;border-radius:12px;border:1px solid var(--border-default);background:var(--bg-default);box-shadow:var(--shadow-md);display:none;z-index:20}
.theme-menu.open{display:block}
.theme-menu button{display:block;width:100%;text-align:left;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:500}
.theme-menu button:hover,.theme-menu button[aria-checked=true]{background:var(--bg-element)}
.foot-right{display:flex;flex-direction:column;align-items:center;gap:12px}
@media (min-width:300px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (min-width:788px){
  .foot-brand{flex-direction:row}
  .foot-logo{margin-right:auto}
  .newsletter{background:none;padding:0;gap:16px;border-radius:0}
  .newsletter .btn{margin-left:0}
  .foot-cols{grid-template-columns:repeat(5,1fr)}
  .foot-bottom{border-top:0}
  .foot-bottom-row{flex-direction:row;gap:8px}
  .foot-right{flex-direction:row;margin-left:auto;gap:16px}
}
@media (min-width:1008px){
  .foot-nav{flex-direction:row;gap:16px;padding:88px 0 48px}
  .foot-brand{flex-direction:column;width:100%;max-width:300px}
  .newsletter{flex-direction:column;align-items:flex-start;height:100%;justify-content:flex-start;padding-top:24px;gap:12px}
  .theme-btn{margin-left:8px}
}
@media (max-width:467.98px){.newsletter .eyebrow-row .sm{display:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wf{width:100%;height:300px;border-radius:16px 16px 0 0;display:grid;grid-template-columns:96px 1fr;overflow:hidden;box-shadow:none}
@media (min-width:788px){.wf{width:90%;height:560px;border-radius:20px 20px 0 0;grid-template-columns:200px 1fr}}

.pill:hover .pill-tag{background:var(--pill-tag-hover)}
.app-icon{outline:1px solid var(--app-icon-ring);outline-offset:-1px}
/* dark-only refinements */
.dark-theme .squircle .s1, .dark-theme .squircle .s2{background:transparent}
.dark-theme .squircle .s1{background:var(--bg-default)}
.dark-theme .squircle::after{content:"";position:absolute;inset:0;border-radius:32%;opacity:.024;background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/3px 3px}

.dark-theme .phone .screen{border-color:#3a3b40}
.dark-theme .quote a{background:var(--bg-default)}
@media (prefers-color-scheme: dark){
  :root:where(:not(.light-theme)) .squircle .s1{box-shadow:inset 0 2.5px 40px 0 rgba(210,216,228,.07),inset 8.4px 8.4px 168px 0 rgba(148,152,158,.035)}
  :root:where(:not(.light-theme)) .squircle .s2{background:rgba(255,255,255,.03);box-shadow:inset 0 2.5px 24px 0 rgba(255,255,255,.1)}
}

/* FAQ (placeholder content) */
.faq{padding:80px 0 40px}
.faq-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:32px}
.faq-head .eyebrow{color:var(--text-tertiary)}
.faq-head p:last-child{font-size:14px;font-weight:500;color:var(--text-secondary)}
.faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--border-secondary)}
.faq-item{border-bottom:1px solid var(--border-secondary)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--text-default)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--text-secondary)}
.faq-item summary:focus-visible{outline:2px solid var(--text-link);outline-offset:2px;border-radius:8px}
.faq-chev{flex:none;color:var(--icon-secondary,var(--text-tertiary));transition:transform var(--dur) var(--ease)}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item p{padding:0 4px 20px;max-width:640px;font-size:14px;line-height:1.55;color:var(--text-secondary)}
@media (min-width:1008px){.faq{padding:120px 0 60px}.faq-head h2{font-size:48px;letter-spacing:-2px;line-height:1.1}.faq-head p:last-child{font-size:16px}.faq-item summary{font-size:18px}.faq-item p{font-size:16px}}

/* Subpages: docs, pricing, about, contact, privacy (placeholder content) */
.page-top{border-bottom:1px solid var(--border-secondary)}
.page-top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.page-top .logo{margin:0}
.page-nav{display:flex;gap:4px;flex-wrap:wrap}
.page-nav .nav-link{padding:6px 10px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-secondary)}
.page-nav .nav-link:hover,.page-nav .nav-link[aria-current=page]{color:var(--text-default);background:var(--bg-element)}
.prose{max-width:760px;padding-top:56px;padding-bottom:80px;font-size:16px;line-height:1.6;color:var(--text-secondary)}
.prose h1{font-size:40px;line-height:1.1;letter-spacing:-1.5px;font-weight:600;color:var(--text-default);margin:0 0 24px}
.prose h2{font-size:24px;line-height:1.25;letter-spacing:-.5px;font-weight:600;color:var(--text-default);margin:40px 0 12px}
.prose h3{font-size:18px;font-weight:600;color:var(--text-default);margin:28px 0 8px}
.prose p,.prose ul,.prose ol,.prose table,.prose pre,.prose blockquote{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin:4px 0}
.prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--text-default)}
.prose blockquote{padding:12px 16px;border:1px solid var(--border-info);background:var(--bg-info);border-radius:12px;color:var(--text-default)}
.prose blockquote p{margin:0}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-element);padding:2px 5px;border-radius:6px;color:var(--text-default)}
.prose pre{background:var(--bg-subtle);border:1px solid var(--border-secondary);border-radius:12px;padding:16px;overflow:auto}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.6}
.prose table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--border-secondary);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--bg-subtle);color:var(--text-default);font-weight:600}
.page-foot{border-top:1px solid var(--border-secondary);padding:24px 0;font-size:13px;color:var(--text-tertiary)}
.page-foot-inner{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.page-foot-links{display:flex;flex-wrap:wrap;gap:8px 16px}
.page-foot-links a:hover{color:var(--text-default)}
@media (max-width:600px){.prose h1{font-size:32px}.page-top-inner{height:auto;padding-top:12px;padding-bottom:12px;flex-direction:column;align-items:flex-start}}

/* ---------------- INJECTED SCENES (from /components) ---------------- */
img.app-icon{object-fit:cover;background:#fff}
.frame.bare{border:0;box-shadow:none;background:transparent;border-radius:0}
.blocks-art .artpane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;transition:opacity .5s,visibility .5s}
.blocks-art .artpane:not(.on){opacity:0;visibility:hidden;pointer-events:none}
.blocks-art .artpane .frame{width:100%}
.hero-side .frame,.demo-split .frame{width:100%;text-align:left}
.fart .frame{width:100%}
.fwide{width:100%}
.avatars img{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg-default);object-fit:cover;display:block}
.avatars img+img{margin-left:-8px}
@media (min-width:788px){.avatars img{width:40px;height:40px}.avatars img+img{margin-left:-12px}}
@media (min-width:1008px){.avatars img{width:48px;height:48px}.avatars img+img{margin-left:-14px}}
.tile img{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}
.tile.b::after{display:none}
.storechips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px;padding:28px 18px}
.storechips figure{display:flex;flex-direction:column;align-items:center;gap:7px;margin:0}
.storechips img{width:54px;height:54px;border-radius:14px;object-fit:cover;box-shadow:var(--shadow-sm);background:#fff}
.storechips figcaption{font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.band{padding:72px 0 8px}
.band-head{max-width:640px;margin-bottom:28px}
.band-head p{color:var(--text-secondary);font-size:17px;line-height:1.55;margin-top:10px}
.cqwrap{container-type:inline-size}
.cqwrap .mq-track{animation:mqslide 32s linear infinite}
.cqwrap .mq.rev .mq-track{animation-duration:38s;animation-direction:reverse}
@media (prefers-reduced-motion: reduce){.cqwrap .mq-track{animation:none}}
.agents-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media (min-width:788px){.agents-grid{grid-template-columns:1fr 1fr}}
.cta-inner .frame{width:100%;max-width:400px;text-align:left}
.frame.compact .scene{padding:5cqw;gap:2.1cqw}
.frame.compact .chat{gap:2.1cqw;padding:3.8cqw}
.frame.compact .bubble{padding:2.1cqw 3.1cqw}
.frame.compact .scene{justify-content:center}
.frame.compact .agentrow{margin-bottom:-.5cqw}
.facts{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media (min-width:788px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{border:1px solid var(--border-secondary);border-radius:20px;background:var(--bg-default);padding:20px}
.fact h3{font-size:16px;font-weight:650;letter-spacing:-.2px;margin-bottom:8px}
.fact p{font-size:14px;line-height:1.55;color:var(--text-secondary)}
.endpoints{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.endpoints span{font:500 12.5px/1 var(--font-mono);border:1px solid var(--border-secondary);background:var(--bg-subtle);border-radius:999px;padding:8px 12px;color:var(--text-secondary)}
.endnote{margin-top:16px;color:var(--text-secondary);font-size:14.5px}
.endnote a{color:var(--text-default);font-weight:600}

/* ---- Sher review round 2 (2026-10-29) ---- */
.ftext h3.h-2xl{font-size:29px;letter-spacing:-.6px}
/* Round 6m: full-size feature headings share the platform H2 size on desktop (tokens set in the 788px block) */
@media (min-width:788px){.ftext h3.h-platform{font-size:var(--h-platform-size);line-height:1.1;letter-spacing:var(--h-platform-ls)}}
button.btn{font-family:inherit;cursor:pointer}
.bcard .btn{height:40px;padding:0 20px;font-size:15px}
.linkrow{display:flex;gap:10px;width:min(430px,88%);align-items:center;justify-content:center}
.linkfield{flex:1;height:44px;line-height:44px;padding:0 18px;text-align:left;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:999px;color:var(--text-tertiary);font-family:var(--font-mono);font-size:14px;white-space:nowrap;overflow:hidden}
.people-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media (min-width:788px){.people-grid{grid-template-columns:1.22fr .78fr}}
.howmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.howmodal.open{display:flex}
.howmodal .scrim{position:absolute;inset:0;background:rgb(0 0 0/.45)}
.howcard{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:24px;box-shadow:var(--shadow-md);padding:32px}
.howcard h3{font-size:24px;font-weight:600;letter-spacing:-.5px;margin-bottom:6px}
.howcard .sub{color:var(--text-secondary);margin-bottom:22px}
.howsteps{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.howstep{display:flex;gap:14px}
.howstep .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue-9);color:#fff;font-weight:650;display:flex;align-items:center;justify-content:center;font-size:14px}
.howstep b{display:block;margin-bottom:2px}
.howstep p{color:var(--text-secondary);font-size:15px;line-height:1.5}
.howx{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-secondary);background:var(--bg-element);font-size:15px;cursor:pointer;color:var(--text-default);font-family:inherit}

/* round 4: the Connect card's art takes the full 16:9 width of the card */
.sdk-art{width:100%;height:auto;max-width:660px}

/* Round 6i: Dia text reveal statement band (see dia-text-reveal.js) */
.dia-band{padding:72px 0 64px;text-align:center}
.dia-line{margin:0 auto;max-width:22ch;font-size:clamp(32px,3.6vw + 18px,56px);font-weight:300;line-height:1.12;letter-spacing:-.04em;color:var(--text-default);text-wrap:balance}
.dia-reveal{display:inline-block;text-align:left;white-space:nowrap;padding:0 .04em .08em 0;margin-bottom:-.08em;vertical-align:bottom;background-size:300% 100%;background-position:0% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:inherit}
@media (min-width:944px){.dia-band{padding:104px 0 88px}.dia-line{max-width:none}}
@media (prefers-reduced-motion:reduce){.dia-reveal{opacity:1!important;background-position:0% 0!important}}

/* Round 6k/6l: Animated Beam platform diagram (animated-beam.js).
   Staggered 2-column clusters; nodes placed by --c (depth: 0 = outer for agents, inner for stores) and --r (half-row index).
   >600px: horizontal (agents | 👀 | stores). <=600px: vertical (agents row / 👀 / stores row), same --c/--r transposed. */
.beam-wrap{--n:44px;--dc:54px;--h:30px;position:relative;width:100%;max-width:400px;margin:4px auto 0;display:flex;flex-direction:column;align-items:center;gap:36px}
.beam-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.beam-grp{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.beam-cl{position:relative;width:calc(var(--rows)*var(--h) + var(--n));height:calc(var(--n) + var(--dc))}
.beam-node{position:absolute;left:calc(var(--r)*var(--h));top:calc(var(--c)*var(--dc));width:var(--n);height:var(--n);border-radius:50%;background:#fff;border:1px solid var(--border-secondary);box-shadow:0 0 20px -12px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center}
.beam-node img{width:64%;height:64%;border-radius:24%;object-fit:cover}
.beam-node img[src*="imessage-icon"]{object-fit:contain;border-radius:0}
.beam-eyes{display:flex;align-items:center;justify-content:center;width:1em;height:1em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:52px;line-height:1;background:none}
.beam-lab{font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap;text-align:center}
.beam-l .beam-lab{order:-1}
@media (min-width:601px){
  .beam-wrap{--n:60px;--dc:76px;--h:36px;max-width:none;flex-direction:row;justify-content:space-between;align-items:center;gap:0;margin-top:8px}
  .beam-grp{gap:16px}.beam-l .beam-lab{order:0}
  .beam-cl{width:calc(var(--n) + var(--dc));height:calc(var(--rows)*var(--h) + var(--n))}
  .beam-node{left:calc(var(--c)*var(--dc));top:calc(var(--r)*var(--h))}
  .beam-eyes{font-size:68px}
  .beam-lab{font-size:13px}
  .beam-m{margin-top:0}
}
.beam-static .beam-base{stroke-opacity:.35}

/* ---- Round 9: "Let agents finish real purchases in under 60 seconds" (#sixty) ----
   Neutral surfaces, one blue accent (the elapsed ring, rail fill and the active step). sixty-seconds.js adds .run/.on/.done. */
.s60-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1008px){.s60-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.s60-card,.s60-code{border:1px solid var(--border-secondary);border-radius:24px;background:var(--bg-default);min-width:0}
.dark-theme .s60-card{background:var(--slate-2)}
.s60-card{padding:24px;display:flex;flex-direction:column;gap:22px}
.s60-main{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
@media (min-width:640px){.s60-main{grid-template-columns:184px minmax(0,1fr);gap:28px}}
.s60-watch{position:relative;width:184px;height:184px;margin:0 auto}
.s60-watch svg{width:100%;height:100%;display:block}
.s60-track-c{fill:none;stroke:var(--slate-4);stroke-width:5}
.s60-ticks line{stroke:var(--slate-7);stroke-width:2;stroke-linecap:round}
.s60-prog{fill:none;stroke:var(--blue-9);stroke-width:5;stroke-linecap:round;stroke-dasharray:var(--p,88.33) 100}
.s60-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.s60-time{font:600 44px/1 var(--font-mono);letter-spacing:-1.5px;font-variant-numeric:tabular-nums;color:var(--text-default)}
.s60-read span{font-size:13px;color:var(--text-tertiary)}
.s60-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.s60-steps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--border-secondary)}
.s60-steps li:first-child{border-top:0;padding-top:0}.s60-steps li:last-child{padding-bottom:0}
.s60-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--font-sans);color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--border-default);transition:background .3s,color .3s,box-shadow .3s}
.s60-steps h3{font-size:15px;font-weight:650;letter-spacing:-.2px;line-height:28px;color:var(--text-default)}
.s60-steps p{font-size:13.5px;line-height:1.45;color:var(--text-secondary)}
.s60-t{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-top:5px}
.s60-t b{font:600 15px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-default)}
.s60-t small{font:500 12px/1 var(--font-mono);color:var(--text-tertiary)}
.s60-steps li.done .s60-n{background:var(--text-default);color:var(--bg-default);box-shadow:none}
.s60-steps li.on .s60-n{box-shadow:inset 0 0 0 2px var(--blue-9);color:var(--text-default)}
.s60-card.run .s60-steps li:not(.done):not(.on) h3,.s60-card.run .s60-steps li:not(.done):not(.on) .s60-t{opacity:.45}
.s60-steps h3,.s60-t{transition:opacity .3s}
.s60-rail{position:relative;height:6px;border-radius:999px;background:var(--slate-4);overflow:visible}
.s60-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,88.33) * 1%);border-radius:inherit;background:var(--blue-9)}
.s60-rail s{position:absolute;top:50%;left:calc(var(--at) / 60 * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--bg-default);box-shadow:inset 0 0 0 2px var(--slate-8)}
.dark-theme .s60-rail s{background:var(--slate-2)}
.s60-scale{display:flex;justify-content:space-between;margin-top:8px;font:500 11.5px/1 var(--font-mono);color:var(--text-tertiary)}
.s60-note{font-size:12.5px;line-height:1.5;color:var(--text-tertiary)}
.s60-code{padding:20px 20px 22px;display:flex;flex-direction:column}
.s60-code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border-secondary);font-size:13px}
.s60-code-head b{font-weight:650;color:var(--text-default)}
.s60-code-head span{color:var(--text-tertiary);font-family:var(--font-mono);font-size:12px}
.s60-code pre{margin:0;font:500 12.5px/1.7 var(--font-mono);color:var(--text-default);white-space:pre-wrap;overflow-wrap:anywhere}
.s60-l{display:block;margin-bottom:10px;transition:opacity .3s}
.s60-l i{font-style:normal;color:var(--text-tertiary)}
.s60-code.run .s60-l:not(.done){opacity:.38}
@media (max-width:639px){.s60-card{padding:20px}.s60-watch{width:168px;height:168px}.s60-time{font-size:40px}}
@media (prefers-reduced-motion:reduce){.s60-n,.s60-steps h3,.s60-t,.s60-l{transition:none}}

/* ---- Round 9b: "Agents never write code against your accounts." (#guarded) ---- neutral cards, no accent needed */
.gd-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:788px){.gd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gd-card{border:1px solid var(--border-secondary);border-radius:24px;background:var(--bg-default);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dark-theme .gd-card{background:var(--slate-2)}
.gd-card h3{font-size:16px;font-weight:650;letter-spacing:-.2px;color:var(--text-default);margin-top:8px}
.gd-card>p{font-size:14px;line-height:1.55;color:var(--text-secondary)}
.gd-vis{border-radius:16px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary);padding:16px;min-height:132px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.dark-theme .gd-vis{background:var(--slate-1)}
.gd-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gd-flow i{flex:1 1 10px;min-width:10px;height:1px;background:var(--border-default)}
.gd-pill{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--font-sans);padding:8px 11px;border-radius:999px;color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--border-default);white-space:nowrap}
.gd-final{background:var(--text-default);color:var(--bg-default);box-shadow:none}
.gd-final svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.gd-cap{font-size:12.5px;line-height:1.45;color:var(--text-tertiary)}
.gd-code{display:flex;flex-direction:column;gap:8px;font:500 12px/1.3 var(--font-mono)}
.gd-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.gd-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gd-line b{font:600 11px/1 var(--font-sans);padding:5px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border-default);color:var(--text-secondary);flex:none}
.gd-x span{color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:var(--slate-8)}
.gd-ok span{color:var(--text-default)}
.gd-ok b{background:var(--text-default);color:var(--bg-default);box-shadow:none}
.gd-split{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:8px}
.gd-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.gd-k{font:600 11.5px/1.2 var(--font-sans);color:var(--text-tertiary);margin-bottom:2px}
.gd-row{display:flex;justify-content:space-between;gap:6px;font:500 11.5px/1.3 var(--font-mono);color:var(--text-tertiary);min-width:0;overflow:hidden;white-space:nowrap}
.gd-row em{font-style:normal;letter-spacing:1px}
.gd-clean .gd-row{color:var(--text-default)}
.gd-clean .gd-row em{letter-spacing:0;font-weight:600}
.gd-arrow{width:18px;height:18px;fill:none;stroke:var(--text-tertiary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:480px){.gd-flow{gap:4px;flex-wrap:nowrap}.gd-flow i{min-width:6px}.gd-pill{padding:7px 9px;font-size:12px;gap:5px}}

/* Section flags (Round 10): dotted dividers with numbered links so sections can be named while iterating.
   Shown only when <html> has .show-flags (set in the <head> script: every host except production, or ?flags on production). Zero height, so nothing shifts. */
.sdiv{display:none}
.show-flags .sdiv{display:block;position:relative;height:0;z-index:30}
.show-flags .sdiv .container{height:0}
.show-flags .sdiv .container::before{content:"";position:absolute;left:16px;right:16px;top:0;border-top:1px dotted var(--border-default);opacity:.9;pointer-events:none}
.show-flags .sdiv-first .container::before{display:none}
.sflag{position:absolute;left:16px;top:0;transform:translateY(-50%);display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--border-secondary);background:var(--bg-default);color:var(--text-tertiary);font:500 10.5px/1 var(--font-mono);letter-spacing:0;white-space:nowrap;text-decoration:none;opacity:.85;transition:opacity .15s,color .15s,border-color .15s}
.sflag:hover,.sflag:focus-visible{opacity:1;color:var(--text-secondary);border-color:var(--border-default)}
.sdiv-first .sflag{top:8px;transform:none}
@media (min-width:788px){
  .show-flags .sdiv .container::before{left:24px;right:24px}
  .sflag{left:24px}
}
.show-flags main section[id]{scroll-margin-top:84px}
/* Round 12a: hero column flags. The hero carries three small flags instead of one divider: 01 Hero headline (.hero-copy), 02 Hero art (#burst, flagged from .hero-grid because hero-variants.js can replace the burst's children) and 03 Hero demo (.hero-side). They are absolutely positioned, so the hero layout does not move.
   Phones and tablets (stacked: art, headline, demo): each flag sits just above its block. 944px+ grid: 02 sits at the top of the art's grid area; from 944 to 1151px, where the headline starts at the top of the hero, 01 sits at the right end of its first line. 1152px+ three columns: 03 sits on the "New" pill's row at the column's right edge, because the pill starts at the very top of the hero. */
.hero-grid{position:relative}
.show-flags .sdiv.sdiv-col{position:absolute;left:0;top:0;width:0;height:0}
.sdiv-col .sflag{left:0;top:0;transform:none}
.sdiv-c1 .sflag{top:-28px}
.sdiv-c2 .sflag{top:8px}
.sdiv-c3 .sflag{top:-10px}
.show-flags .hero-grid>[id]{scroll-margin-top:84px}
@media (min-width:944px){
  .show-flags .sdiv.sdiv-c2{grid-column:2;grid-row:1}
  .sdiv-c3 .sflag{top:-22px}
}
@media (min-width:1152px){
  .show-flags .sdiv.sdiv-c3{left:auto;right:0}
  .sdiv-c3 .sflag{left:auto;right:0;top:6px}
}
@media (min-width:1152px) and (max-width:1327px){.sdiv-c3 .sflag{right:-12px}}
@media (min-width:944px) and (max-width:1151.98px){ /* two-column grid: the headline starts at the top of the hero, so 01 sits at the right end of its first line */
  .show-flags .sdiv.sdiv-c1{left:auto;right:0}
  .sdiv-c1 .sflag{left:auto;right:0;top:8px}
}

/* Checkout Bench intro (#bench-intro, Round 10). Three variants, switched by html[data-bench] (set from ?bench=a or ?bench=c in the <head> script, preview hosts only); b shows by default, on production and without JS. Neutral and monochrome. */
.bi-v{display:none}
.bi-v[data-v="b"]{display:block}
html[data-bench="a"] .bi-v[data-v="b"],html[data-bench="c"] .bi-v[data-v="b"]{display:none}
html[data-bench="a"] .bi-v[data-v="a"],html[data-bench="c"] .bi-v[data-v="c"]{display:block}
.bi-paper{max-width:720px}
.bi-abstract{margin-top:14px;font-size:17px;line-height:1.6;color:var(--text-secondary)}
.bi-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.bi-link{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--text-default);text-decoration:underline;text-decoration-color:var(--border-default);text-underline-offset:4px}
.bi-link:hover{text-decoration-color:var(--text-tertiary)}
.bi-link svg{width:15px;height:15px;transition:transform .15s}
.bi-link:hover svg{transform:translateX(2px)}
.bi-meta{margin-top:20px;padding-top:14px;border-top:1px solid var(--border-secondary);font:400 12.5px/1.6 var(--font-mono);color:var(--text-tertiary)}
.bi-board{max-width:640px}
.bi-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.bi-table caption{caption-side:bottom;text-align:left;padding-top:12px;font-size:13px;line-height:1.5;color:var(--text-tertiary)}
.bi-table th{font-size:12.5px;font-weight:500;color:var(--text-tertiary);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--border-default)}
.bi-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--border-secondary);color:var(--text-default)}
.bi-table td:first-child,.bi-table th:first-child{width:56px;color:var(--text-tertiary)}
.bi-table .num{text-align:right;padding-right:0}
.bi-tag{margin-left:8px;font-size:11px;font-weight:500;color:var(--text-tertiary);border:1px solid var(--border-secondary);border-radius:999px;padding:2px 7px;vertical-align:1px;white-space:nowrap}
.bi-tri{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--border-secondary)}
.bi-col{padding:20px 0;border-bottom:1px solid var(--border-secondary)}
.bi-col h3{font-size:16px;font-weight:650;letter-spacing:-.2px;color:var(--text-default)}
.bi-col p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text-secondary)}
@media (min-width:788px){
  .bi-tri{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border-secondary)}
  .bi-col{padding:24px 28px 28px;border-bottom:0}
  .bi-col:first-child{padding-left:0}
  .bi-col+.bi-col{border-left:1px solid var(--border-secondary)}
}

/* Platform beam: the Nook app icon (assets/nook-icon-384.webp, same art as apple-touch-icon) replaces the 👀 center node. */
.beam-eyes.beam-app{font-size:inherit;width:52px;height:52px;border-radius:23%;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.10)}
.beam-eyes.beam-app img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:601px){.beam-eyes.beam-app{width:68px;height:68px}}
.bi-band{padding-bottom:32px}
/* Round 10: the bento now sits between the logo strip and the stats, so it takes the top gap the strip doesn't have and drops the long bottom gap the stats already supply. */
.bento{padding-top:32px;padding-bottom:16px}
@media (min-width:788px){.bento{padding-top:48px;padding-bottom:24px}}

/* Checkout Bench lab grid (#lab, Round 10c): nine neutral text cards, 1 / 2 / 3 columns. */
.lab-band{padding-bottom:32px}
.lab-grid{display:grid;grid-template-columns:1fr;gap:12px}
.lab-card{border:1px solid var(--border-secondary);border-radius:20px;background:var(--bg-default);padding:20px;min-width:0}
.dark-theme .lab-card{background:var(--slate-2)}
.lab-card h3{font-size:16px;font-weight:650;letter-spacing:-.2px;color:var(--text-default)}
.lab-card p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.lab-band .bi-links{margin-top:24px}
@media (min-width:640px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1008px){.lab-grid{grid-template-columns:repeat(3,1fr);gap:16px}.lab-card{padding:24px}}

/* Round 10e: while sections 12 to 28 are hidden for review (numbered 11 to 27 in Round 10e), section 11 Checkout Bench intro sits right above the trust row, so it gets the room the closing CTA used to give. Drops away by itself when the wrapper's hidden attribute is removed. */
main:has(> .review-hidden[hidden]) .bi-band{padding-bottom:64px}
@media (min-width:788px){main:has(> .review-hidden[hidden]) .bi-band{padding-bottom:88px}}

/* Round 13b: 03 Hero demo as its own section (moved out of the hero), placed between 05 Bento cards and 06 Get started.
   While .hero-side is out of the hero, the hero keeps its two-column grid (headline, art) at every desktop width; the three-column templates above apply only when .hero-side is back in .hero-grid. */
@media (min-width:1152px){.hero-grid:not(:has(>.hero-side)) .burst{grid-row:1}}
@media (max-width:420px){ /* keep "Connect your phone" and the "Agents" copy button on one row down to 360 */
  .hero-cta.hero-cta{padding:0 12px;gap:8px;font-size:15px}
  .hero-copybtn{padding:0 12px;gap:6px;font-size:14px}
}
.demo-sec{padding:56px 0 48px}
.demo-split{display:flex;flex-direction:column;gap:28px}
.demo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.demo-copy p{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.5px;color:var(--text-default);text-wrap:balance;max-width:30ch}
.demo-split .demo-panel{max-width:448px}
@media (min-width:788px){.demo-sec{padding:88px 0 72px}.demo-copy p{font-size:32px;letter-spacing:-.8px}}
@media (min-width:944px){
  .demo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,448px);gap:64px;align-items:center}
  .demo-copy p{font-size:clamp(28px,2.6vw,38px);line-height:1.15;letter-spacing:-.03em;max-width:24ch}
}
/* Round 13b: 06 Get started (replaces the stats row). Neutral; no backend, see the comment in index.html. */
.getstarted{padding:64px 0}
.gs-card{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.gs-title{font-size:clamp(30px,8vw,48px);line-height:1.05;font-weight:650;letter-spacing:-.035em;text-wrap:balance}
.gs-sub{margin-top:12px;font-size:16px;font-weight:500;color:var(--text-secondary)}
.gs-form{width:100%;margin-top:28px;display:flex;flex-direction:column;gap:10px}
.gs-row{display:flex;gap:8px}
.gs-row[hidden],.gs-btn[hidden]{display:none}
.gs-input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--border-default);background:var(--bg-subtle);color:var(--text-default);font:500 16px/1 var(--font-sans);outline:none;transition:border-color .15s}
.gs-input::placeholder{color:var(--text-tertiary)}
.gs-input:focus-visible{border-color:var(--text-secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-default) 12%,transparent)}
.gs-input[readonly]{color:var(--text-secondary)}
.gs-otp{letter-spacing:.3em;font-variant-numeric:tabular-nums}
.gs-otp::placeholder{letter-spacing:0}
.gs-btn{height:48px;padding:0 20px;border-radius:12px;font-size:15px;font-weight:600;flex:none}
.gs-btn:focus-visible{outline:2px solid var(--text-default);outline-offset:3px}
.gs-note{min-height:20px;font-size:14px;line-height:20px;color:var(--text-secondary)}
.gs-note:empty{min-height:0}
.gs-reset{align-self:center;background:none;border:0;padding:4px;font:500 14px/1.2 var(--font-sans);color:var(--text-secondary);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gs-reset[hidden]{display:none}
.gs-alt{margin-top:12px}
@media (max-width:519.98px){.gs-row{flex-direction:column}.gs-input,.otp{flex:none;width:100%}.gs-btn{width:100%}}
@media (min-width:788px){.getstarted{padding:104px 0 96px}.gs-sub{font-size:17px}}

/* Round 13c: 03 Hero demo copy is a short header plus three numbered gray-fill steps (replacing the one large sentence).
   The steps work as a step player (inspired by the Step Player block on sher.md/bencho): while the checkout demo plays, each step
   lights up and its bar fills in time with the demo (1 while the agent asks, 2 while the quote is prepared, 3 when Confirm is pressed).
   Without the demo playing, or with reduced motion, all three steps show in full. */
.demo-copy{width:100%}
.demo-title{font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--text-default);text-wrap:balance;margin:4px 0 4px}
.ds-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px}
.ds-step{position:relative;overflow:hidden;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:16px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.ds-num{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 13px/1 var(--font-mono);background:var(--cta-bg);color:var(--cta-text)}
.ds-text{font-size:16px;line-height:1.35;font-weight:500;color:var(--text-default)}
.ds-bar{position:absolute;left:0;right:0;bottom:0;height:2px}
.ds-bar i{display:block;height:100%;background:var(--text-default);opacity:.35;transform:scaleX(0);transform-origin:left}
@media (min-width:788px){.demo-title{font-size:40px}.ds-text{font-size:17px}}
@media (min-width:944px){.demo-split{grid-template-columns:minmax(0,1fr) minmax(0,448px)}.demo-copy{gap:24px}.demo-title{font-size:clamp(36px,3.2vw,46px);max-width:520px}}
@keyframes ds-num{from{background:transparent;color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--border-default)}to{background:var(--cta-bg);color:var(--cta-text);box-shadow:none}}
@keyframes ds-text{from{color:var(--text-tertiary)}to{color:var(--text-default)}}
@keyframes ds-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .demo-split:has(.frame.play) .ds-num{animation:ds-num .35s ease both}
  .demo-split:has(.frame.play) .ds-text{animation:ds-text .35s ease both}
  .demo-split:has(.frame.play) .ds-bar i{animation:ds-fill linear both}
  .demo-split:has(.frame.play) .ds-step:nth-child(1) .ds-bar i{animation-duration:3.1s}
  .demo-split:has(.frame.play) .ds-step:nth-child(2) :is(.ds-num,.ds-text){animation-delay:3.1s}
  .demo-split:has(.frame.play) .ds-step:nth-child(2) .ds-bar i{animation-delay:3.1s;animation-duration:4.1s}
  .demo-split:has(.frame.play) .ds-step:nth-child(3) :is(.ds-num,.ds-text){animation-delay:7.2s}
  .demo-split:has(.frame.play) .ds-step:nth-child(3) .ds-bar i{animation-delay:7.2s;animation-duration:1.2s}
}

/* Round 13d: 03 Hero demo console, rebuilt in plain CSS/JS from two sher.md/bencho blocks.
   Magnetic Select (components/bencho/magnetic-select.tsx): seven store tiles in a honeycomb; pressing one swells it while the
   others are shoved straight away from it, shrinking and leaning more the closer they sit. Here a press toggles the store's
   connection (unconnected tiles are greyed out, connected ones get a check).
   Slide to Confirm (components/bencho/slide-to-confirm.tsx): drag the grip and a wash stretches behind it, swallowing the label;
   let go past 86% and the track floods and reads "Order approved", then resets.
   Monochrome: the wash and grip use the CTA colors. Reduced motion drops the shove, the springs and the autoplay. */
.demo-title{font-size:28px;max-width:22ch}
@media (min-width:788px){.demo-title{font-size:34px}}
@media (min-width:944px){.demo-title{font-size:clamp(30px,2.6vw,38px);max-width:20ch}}
.dc-console{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 16px;border-radius:28px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.mg{--chip:52px;--k:1.1818;position:relative;width:calc(180px*var(--k) + var(--chip)*1.4);height:calc(155.88px*var(--k) + var(--chip)*1.4);flex:none}
.mg-chip{position:absolute;left:50%;top:50%;width:var(--chip);height:var(--chip);margin:calc(var(--chip)/-2) 0 0 calc(var(--chip)/-2);padding:0;border:0;background:none;border-radius:30%;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translate(var(--hx),var(--hy));transition:transform .55s cubic-bezier(.3,1.45,.5,1);outline:none}
.mg-chip img{display:block;width:100%;height:100%;border-radius:30%;box-shadow:0 0 0 1px var(--border-secondary),0 4px 14px rgba(0,0,0,.18);filter:grayscale(1);opacity:.42;transition:filter .3s,opacity .3s}
.mg-chip[aria-pressed="true"] img{filter:none;opacity:1}
.mg-chip:focus-visible img{box-shadow:0 0 0 2px var(--text-default)}
.mg-ok{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;background:var(--cta-bg);color:var(--cta-text);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg-subtle);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mg-chip[aria-pressed="true"] .mg-ok{transform:scale(1)}
.mg-ok svg,.stc-done svg,.otp-done svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dc-status{min-height:20px;margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--text-secondary);text-align:center;text-wrap:balance}
.stc{--pad:4px;--grip:48px;position:relative;width:100%;max-width:360px;height:56px;border-radius:28px;background:var(--bg-default);box-shadow:inset 0 0 0 1px var(--border-secondary);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stc-label{position:absolute;inset:0;padding-left:var(--grip);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--text-secondary);pointer-events:none;opacity:calc(1 - var(--p,0)*.83)}
.stc-wash{position:absolute;left:var(--pad);top:var(--pad);height:var(--grip);width:calc(var(--x,0px) + var(--grip));border-radius:24px;background:var(--cta-bg)}
.stc-grip{position:absolute;left:var(--pad);top:var(--pad);width:var(--grip);height:var(--grip);border:0;padding:0;border-radius:24px;background:var(--cta-bg);color:var(--cta-text);display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;transform:translateX(var(--x,0px));outline:none}
.stc-grip:focus-visible{box-shadow:0 0 0 2px var(--bg-default),0 0 0 4px var(--text-default)}
.stc-grip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:calc(1 - var(--p2,0));transition:opacity .18s}
.stc.drag .stc-grip{cursor:grabbing;scale:.97}
.stc.settle .stc-grip,.stc.settle .stc-wash{transition:transform .45s cubic-bezier(.3,1.35,.5,1),width .45s cubic-bezier(.3,1.35,.5,1)}
.stc-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:var(--cta-text);pointer-events:none;opacity:0;scale:.7;filter:blur(4px);transition:opacity .25s,scale .35s cubic-bezier(.3,1.5,.5,1),filter .25s}
.stc-done svg{width:18px;height:18px;stroke-width:2.4;stroke-dasharray:24;stroke-dashoffset:24}
.stc.done .stc-done{opacity:1;scale:1;filter:none;transition-delay:.06s}
.stc.done .stc-done svg{transition:stroke-dashoffset .28s .18s;stroke-dashoffset:0}
.stc.done .stc-grip svg{opacity:0}
@media (prefers-reduced-motion:reduce){.mg-chip,.mg-ok,.stc-done,.stc.settle .stc-grip,.stc.settle .stc-wash{transition:none}}

/* Round 13d: 06 Get started code step uses a One-time Code input rebuilt from sher.md/bencho (components/bencho/one-time-code.tsx).
   One real (transparent) input drives six cells, so typing, paste, backspace and SMS autofill all work natively; digits rise
   out of a blur, the active cell shows a blinking caret, a short code shakes, and a full code pulls the cells together under a
   goo filter until they melt into a Verified capsule. */
.gs-coderow{align-items:stretch}
.otp{position:relative;flex:1;min-width:0;height:48px;display:flex;align-items:center;justify-content:center}
.otp-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;caret-color:transparent;border:0;padding:0;font-size:16px;cursor:text;color:transparent;background:transparent}
.otp-cells{display:flex;gap:8px;width:100%;height:100%}
.otp-cell{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-default);font:500 20px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-default);transition:transform .38s cubic-bezier(.3,1.2,.5,1),opacity .15s,box-shadow .2s}
.otp-cell.on{box-shadow:inset 0 0 0 1px var(--text-secondary),0 0 0 3px color-mix(in srgb,var(--text-default) 12%,transparent)}
.otp-cell.on:empty::after,.otp-cell.on.caret::after{content:"";width:2px;height:18px;border-radius:1px;background:var(--text-default);animation:otp-caret 1s step-end infinite}
.otp-cell b{position:absolute;font-weight:500;animation:otp-rise .26s cubic-bezier(.2,.8,.2,1) both}
.otp-cell.pop{animation:otp-pop .28s cubic-bezier(.3,0,.2,1)}
.otp.bad .otp-cells{animation:otp-shake .45s linear}
.otp.fuse .otp-cells{filter:url(#otp-goo)}
.otp.fuse .otp-cell{transform:translateX(var(--tc)) scale(1.04)}
.otp.done .otp-cell{opacity:0}
.otp-done{position:absolute;inset:0;margin:auto;height:48px;width:72px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-default);font-size:14px;font-weight:600;color:var(--text-default);white-space:nowrap;overflow:hidden;opacity:.6;transition:width .4s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.otp-done[hidden]{display:none}
.otp.done .otp-done{width:132px;opacity:1}
.otp-done svg{width:15px;height:15px}
.otp-input:disabled{cursor:default}
@keyframes otp-caret{0%,50%{opacity:1}55%,100%{opacity:0}}
@keyframes otp-rise{from{transform:translateY(45%) scale(.86);opacity:0;filter:blur(3px)}to{transform:none;opacity:1;filter:none}}
@keyframes otp-pop{50%{scale:1.06}}
@keyframes otp-shake{0%{translate:0}11%{translate:-5px}22%{translate:5px}33%{translate:-4px}44%{translate:4px}55%{translate:-2.5px}66%{translate:2.5px}77%{translate:-1px}100%{translate:0}}
@media (prefers-reduced-motion:reduce){.otp-cell,.otp-done{transition:none}.otp-cell b,.otp-cell.pop,.otp.bad .otp-cells{animation:none}.otp.fuse .otp-cell{transform:none}}
.demo-copy .dc-status{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;max-width:none;color:var(--text-secondary)}
@media (min-width:788px){.mg{--chip:58px;--k:1.3182}}
.otp.fuse~.gs-btn{opacity:.4;pointer-events:none;transition:opacity .2s}
@media (max-width:519.98px){.gs-coderow .otp{flex:none;width:100%;height:52px}}
.mg{width:calc(90px*var(--k) + var(--chip)*2.2);height:calc(78px*var(--k) + var(--chip)*2)}