[hidden]{display:none!important}
/* ===== shared bits ===== */
.grow{flex:1}
.mono{font-family:var(--mono)}
.orange{color:var(--orange)}
.h2-44{font-size:44px;line-height:52px;font-weight:700;letter-spacing:-.02em}
.h2-52{font-size:52px;line-height:60px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:640px}
.sec-head-720{max-width:720px}
.card-title{font-size:18px;font-weight:600;line-height:26px}
.card-body{font-size:15px;line-height:24px;color:var(--ink-600)}
.pad-card{padding:var(--card-pad);display:flex;flex-direction:column;gap:12px}
.lift{transition:transform 160ms ease,border-color 160ms ease}
.lift:hover{transform:translateY(-2px);border-color:var(--gray-300)}
.arrow-link{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.arrow-link-sm{font-size:14px;font-weight:600}
.btn-lg{min-height:48px;padding:12px 26px;font-size:16px}
.chip-sm{min-height:30px;font-size:12px}
.eyebrow-ico{display:inline-flex;align-items:center;gap:8px}
.eyebrow-ico img{width:16px;height:16px}
.ico-sm{width:32px;height:32px;border-radius:var(--r-btn);background:var(--orange-100);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ico-well{width:48px;height:48px;border-radius:var(--r-input);background:var(--orange-100);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.card-head{display:flex;align-items:center;gap:10px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ===== hero motifs / composer ===== */
/* Pine on the cliff, hanging in from the left edge of the hero. Height-driven so the
   silhouette keeps clear of the headline at every step of the width scale. */
.motif-pine{top:120px;left:-90px;height:380px;width:auto;opacity:.4}
[data-motif-in].motif-pine{transform:translateX(-24px)}
[data-motif-in].motif-pine.is-in{transform:var(--t,none)}
.motif-bamboo-hero{top:4px;right:-40px;width:360px;opacity:.85}
.composer{width:var(--composer-w);max-width:100%;margin-top:40px;padding:8px;text-align:left}
.composer-field{position:relative}
.composer-input{display:block;width:100%;min-height:72px;border:0;background:transparent;resize:none;padding:10px 12px 4px;font:inherit;font-size:15px;line-height:24px;color:var(--ink);outline:none}
.composer-input:focus-visible{outline:none;box-shadow:none}
.composer-ghost{position:absolute;inset:0;padding:10px 12px 4px;font-size:15px;line-height:24px;color:var(--ink-400);pointer-events:none}
.composer-ghost.is-off{display:none}
#ghostText{display:block;opacity:0}
#ghostText.is-in{animation:ghost-in 420ms cubic-bezier(.2,.7,.2,1) forwards}
#ghostText.is-out{opacity:1;animation:ghost-out 360ms ease-in forwards}
@keyframes ghost-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ghost-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
.caret{display:inline-block;width:1.5px;height:16px;background:var(--ink-400);vertical-align:-2px;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.composer-bar{display:flex;align-items:center;justify-content:space-between;padding:4px}
.composer-attach{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-btn);font-size:14px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 160ms ease,color 160ms ease}
.composer-attach[hidden]{display:none}
.composer-attach:hover{background:var(--gray-100);color:var(--ink)}
.composer-thumbs{display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px 2px}
.composer-thumbs[hidden],.composer-err[hidden]{display:none}
.composer-thumb{position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;border-radius:var(--r-input);border:1px solid var(--gray-200);background:var(--gray-100)}
.composer-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.composer-thumb.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#FFFFFF;border-radius:50%;animation:composer-spin .8s linear infinite}
.composer-thumb.is-loading img{filter:brightness(.55)}
.composer-thumb-x{position:absolute;top:2px;right:2px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(35,38,42,.7);color:#FFFFFF;cursor:pointer}
.composer-thumb-x:hover{background:rgba(35,38,42,.9)}
@keyframes composer-spin{to{transform:rotate(360deg)}}
.composer-err{margin:4px 12px 0;font-size:13px;line-height:18px;color:#C62828}
.composer-send:disabled{cursor:not-allowed}
.composer-send{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-btn);cursor:pointer;background:var(--gray-300);transition:background 160ms ease}
.composer-send.is-armed{background:var(--orange)}
.composer-send.is-armed:hover{background:var(--orange-hover)}
.hero-chips{display:flex;gap:10px;margin-top:18px}
.hero-note{color:var(--ink-500);margin-top:20px}

/* ===== gallery ===== */
#gallery{padding-bottom:var(--section-gap)}
.gallery-rows{position:relative}
.marquee{overflow:hidden;padding:8px 0}
.marquee-2{padding:12px 0 8px}
.track{display:flex;gap:20px;width:max-content;animation:marq 69s linear infinite;will-change:transform}
.track.reverse{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.shot{width:224px;height:150px;object-fit:cover;border-radius:var(--r-input);border:1px solid var(--gray-200);background:var(--white);box-shadow:var(--shadow);transition:transform 160ms ease,box-shadow 160ms ease;flex-shrink:0}
.shot-link{position:relative;display:block;flex-shrink:0;border-radius:var(--r-input);cursor:pointer;transition:transform 160ms ease}
.shot-link .shot{display:block}
.shot-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-input);background:rgba(26,28,31,.38);opacity:0;transition:opacity 160ms ease;pointer-events:none}
.shot-cta{position:absolute;left:50%;top:50%;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-btn);background:var(--white);color:var(--ink);font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(16,24,40,.35);opacity:0;transform:translate(-50%,-40%);transition:opacity 160ms ease,transform 160ms ease;pointer-events:none}
.shot-link:hover,.shot-link:focus-visible{transform:scale(1.03)}
.shot-link:hover .shot,.shot-link:focus-visible .shot{box-shadow:0 4px 10px 0 rgba(16,24,40,.08),0 2px 4px 0 rgba(16,24,40,.06)}
.shot-link:hover::after,.shot-link:focus-visible::after{opacity:1}
.shot-link:hover .shot-cta,.shot-link:focus-visible .shot-cta{opacity:1;transform:translate(-50%,-50%)}
.shot-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.marquee:has(.shot-link:focus-visible) .track{animation-play-state:paused}

/* gallery preview: the popup library's lightbox (packages/popup-library/src/ui/InspirationPreview.tsx), in plain CSS */
.plb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.plb[hidden]{display:none}
.plb-scrim{position:absolute;inset:0;background:rgba(26,28,31,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity 300ms cubic-bezier(.2,.7,.2,1)}
.plb-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;width:100%;max-width:1240px;max-height:100%;overflow:auto;border-radius:20px;background:var(--white);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);opacity:0;transform:translateY(28px) scale(.96);transition:opacity 280ms cubic-bezier(.2,.7,.2,1),transform 380ms cubic-bezier(.2,.9,.25,1.05)}
.plb.is-open .plb-scrim{opacity:1}
.plb.is-open .plb-panel{opacity:1;transform:none}
.plb-l{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0;padding:20px}
.plb-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plb-seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;border:1px solid var(--gray-200);background:var(--gray-100)}
.plb-seg[hidden]{display:none}
.plb-seg button{padding:5px 12px;border-radius:7px;font-size:13px;font-weight:500;line-height:20px;color:var(--ink-600);cursor:pointer}
.plb-seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px 0 rgba(16,24,40,.04),0 1px 3px 0 rgba(16,24,40,.06)}
.plb-nav{display:flex;gap:8px}
.plb-ib{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--gray-200);background:var(--white);color:var(--ink);cursor:pointer}
.plb-ib:hover{border-color:var(--gray-300);background:#FAFAFA}
.plb-x-sm{display:none}
.plb-stage{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:280px;overflow:hidden;padding:5% 4%;border-radius:16px;border:1px solid var(--gray-200);background:var(--gray-100)}
.plb-row{display:flex;align-items:center;justify-content:center;gap:4%;width:100%;min-width:0}
.plb-dsk{display:block;min-width:0;height:auto;max-width:86%;max-height:min(520px,56vh);width:auto;border-radius:10px;object-fit:contain;box-shadow:0 18px 40px -22px rgba(35,38,42,.45),0 1px 2px rgba(35,38,42,.08)}
.plb-phone{min-width:0;overflow:hidden;border-radius:24px;border:6px solid #1A1C1F;background:#1A1C1F;box-shadow:0 18px 40px -22px rgba(35,38,42,.45)}
.plb-phone img{display:block;height:min(520px,56vh);width:auto;border-radius:18px;background:var(--gray-100)}
.plb-row.is-both .plb-dsk{width:0;max-width:none;max-height:none}
.plb-row.is-both .plb-phone img{width:100%;height:auto}
.plb-row [hidden]{display:none}
.plb-r{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0;padding:24px;border-left:1px solid var(--gray-200)}
.plb-x{position:absolute;top:16px;right:16px}
.plb-name{margin:0;padding-right:44px;font-size:24px;font-weight:700;line-height:30px;letter-spacing:-.01em}
.plb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.plb-chip{white-space:nowrap;padding:2px 8px;border-radius:6px;background:var(--gray-100);font-size:12px;font-weight:500;line-height:18px;color:var(--ink-600)}
.plb-k{font-size:12px;font-weight:600;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.plb-why{display:flex;flex-direction:column;gap:6px}
.plb-why p{margin:0;font-size:15px;line-height:24px;color:var(--ink-600)}
.plb-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.plb-fact{display:flex;flex-direction:column;gap:2px}
.plb-fact b{font-size:15px;font-weight:500;line-height:22px;color:var(--ink)}
.plb-cta{display:grid;gap:10px;margin-top:auto;padding-top:8px}
.plb-use,.plb-page{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;width:100%;border-radius:9px;font-size:16px;text-decoration:none;cursor:pointer}
.plb-use{padding:0 26px;background:var(--orange);color:#FFFFFF;font-weight:600;transition:background 160ms ease}
.plb-use:hover{background:#F17E58;color:#FFFFFF}
.plb-page{border:1px solid var(--gray-200);background:var(--white);color:var(--ink);font-weight:500}
.plb-page:hover{border-color:var(--gray-300);background:#FAFAFA;color:var(--ink)}
.plb-n{margin:0;text-align:center;font-size:13px;line-height:18px;color:var(--ink-500);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.plb-panel{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:767px){
  .plb{align-items:flex-end;padding:0}
  .plb-panel{grid-template-columns:minmax(0,1fr);max-height:94%;border-radius:20px 20px 0 0}
  .plb-l{padding:12px}
  .plb-stage{min-height:0;padding:16px 12px}
  .plb-phone{border-width:4px;border-radius:16px}
  .plb-phone img{border-radius:12px;height:auto;max-height:60vh}
  .plb-r{padding:20px;border-left:0;border-top:1px solid var(--gray-200)}
  .plb-x{display:none}
  .plb-x-sm{display:grid}
  .plb-name{padding-right:0}
}
.fade{position:absolute;top:0;bottom:0;width:160px;pointer-events:none}
.fade-l{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,245,241,0))}
.fade-r{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,245,241,0))}
.gallery-cta{text-align:center;margin-top:28px;position:relative}

/* ===== demo (OT-1665: the native live demo, assets/demo/demo.js mounts the stage) ===== */
.demo-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
/* chapter tabs: proto chips; they switch with the clock, a click jumps to the chapter start,
   the orange bar is the chapter's progress (transform only, driven by the player) */
.ds-tabs{display:flex;gap:8px;margin-top:12px;justify-content:center;max-width:100%}
.ds-tab{flex-direction:column;align-items:stretch;gap:6px;min-width:112px;min-height:44px;padding:8px 18px 9px;font-size:14px;color:var(--ink-600)}
.ds-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ds-tab[aria-selected="true"]:hover{background:var(--ink);border-color:var(--ink)}
.ds-tab-label{text-align:center;line-height:20px}
.ds-tab-bar{display:block;height:3px;border-radius:3px;background:var(--gray-100);overflow:hidden}
.ds-tab[aria-selected="true"] .ds-tab-bar{background:rgba(255,255,255,.22)}
.ds-tab-fill{display:block;height:100%;border-radius:3px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
/* the app window on the page background (OT-1665 follow-up: no backdrop sheet), like the old demo card */
.ds-demo{position:relative;margin-top:48px}
.ds-win{position:relative;max-width:1100px;margin:0 auto;border-radius:var(--r-window);border:1px solid var(--gray-200);background:var(--white);overflow:hidden;overflow:clip;box-shadow:var(--shadow)}
.ds-winbar{height:clamp(18px,2.4vw,30px);display:flex;align-items:center;gap:6px;padding:0 clamp(8px,1.2vw,14px);background:var(--gray-100);border-bottom:1px solid var(--gray-200)}
.ds-winbar i{width:clamp(6px,.8vw,10px);height:clamp(6px,.8vw,10px);border-radius:50%;background:var(--gray-300)}
/* the stage box is reserved before demo.js/demo.css arrive (CLS 0): the same aspect rules as
   the stage's own stage.css (16:10; a square on phones, where the camera runs; 16:10 again under
   reduced motion). From 600 px up the demo shows the full stage without camera motion. */
.ds-vp{position:relative;width:100%;aspect-ratio:1280/800;overflow:hidden;overflow:clip;background:var(--admin-page)}
@media (max-width:599px){.ds-vp{aspect-ratio:1/1}}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.ds-vp{aspect-ratio:1280/800}}
/* The window "settles" while it scrolls towards the middle of the screen (faint -> sharp).
   Primary: a CSS scroll-driven animation on the view() timeline — no JS, frame-accurate.
   Fallback (no animation-timeline support): the same end state through the shared
   IntersectionObserver and a 900 ms transition. Opacity + transform only. */
[data-window]{opacity:.55;transform:scale(1.06) translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-window].is-in{opacity:1;transform:none}
@keyframes settle{
  from{opacity:.55;transform:scale(1.06) translateY(28px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  [data-window]{transition:none;animation:settle linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
}
/* phones: the three tabs share the row (no horizontal scroll) */
@media (max-width:599px){
  .ds-demo{margin-top:28px}
  .ds-tabs{gap:6px;width:100%}
  .ds-tab{flex:1 1 0;min-width:0;padding:7px 10px 8px;font-size:13px}
  .ds-win{border-radius:12px}
}

/* ===== generic two-stage cascade: a card arrives, its insides follow =====
   Delay = --cbase (250 ms by default, 150 ms on the What's-new cards) + --i * --cstep. */
[data-reveal-child]{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].is-in [data-reveal-child]{opacity:1;transform:none;transition-delay:calc(var(--cbase,250ms) + var(--i,0) * var(--cstep,60ms))}
/* ===== after publish ===== */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
/* Each card is copy on top and one beige illustration box below. The three boxes are the
   same fixed height from 1024 up, so the three cards line up whatever their copy does. */
.af-grid{gap:32px;align-items:start}
.af-card{padding:20px;display:flex;flex-direction:column;gap:20px}
#after [data-reveal].af-card{transform:translateY(24px)}
#after [data-reveal].af-card.is-in{transform:none}
.af-copy{display:flex;flex-direction:column;gap:10px}
.af-card .card-head{gap:12px}
.af-card .ico-sm{width:36px;height:36px;border-radius:10px}
.af-title{margin:0;font-size:20px;line-height:28px;font-weight:700;color:var(--ink)}
.af-lead{margin:0;font-size:15px;line-height:24px;color:var(--ink-600)}
.af-fig{background:var(--paper);border-radius:12px;padding:16px;height:372px;display:flex;flex-direction:column;justify-content:center;gap:12px}
/* shared bits of the three illustrations */
.af-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}
.af-pill-win{background:var(--success-bg);color:var(--success-fg)}
.af-pill-new{background:var(--orange-100);color:#B93A12}
.af-spark{flex-shrink:0}
.af-btn{border:0;background:var(--orange);color:#fff;font-family:inherit;font-size:13px;font-weight:700;padding:9px 14px;border-radius:var(--r-btn);min-height:36px;white-space:nowrap;cursor:default;flex-shrink:0}
.af-btn.is-ghost{border:1px solid var(--gray-200);background:var(--white);color:var(--ink)}
.af-ask{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:8px 8px 8px 12px}
.af-ask-txt{flex-grow:1;font-size:13px;line-height:18px;color:var(--ink)}
/* 1 — A/B */
.af-ab{display:flex;gap:8px}
.af-var{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--white);border-radius:12px;border:1px solid var(--gray-200)}
.af-var.is-win{border:2px solid #15803D;padding:7px}
/* both rows wrap: in the two-column break the variant column gets narrow, and the label +
   badge / number + unit pairs have to stack rather than run out of the card */
.af-var-top{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--ink)}
.af-var-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;box-shadow:0 1px 2px rgba(16,24,40,.08),0 8px 20px -10px rgba(16,24,40,.3)}
.af-var-num{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.af-num{font-size:22px;line-height:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.af-num.is-win{color:#15803D}
.af-unit{font-size:12px;color:#6B7280}
.af-stats{display:flex;gap:8px}
.af-stat{flex:1 1 0;background:var(--white);border:1px solid var(--gray-200);border-radius:10px;padding:8px 12px}
.af-stat-k{font-size:12px;color:#6B7280}
.af-stat-v{font-size:16px;font-weight:700;color:var(--ink)}
.af-stat-v.is-win{color:#15803D}
/* 2 — animated background */
.af-toggle{align-self:center;display:inline-flex;padding:3px;gap:2px;background:#E9E6E0;border-radius:var(--r-pill);font-size:12px;font-weight:700}
.af-toggle-opt{font:inherit;cursor:pointer;transition:background 160ms ease,color 160ms ease;padding:5px 12px;border-radius:var(--r-pill);color:var(--ink-600);display:inline-flex;align-items:center;gap:6px}
.af-toggle-opt.is-on{background:var(--white);color:var(--ink)}
.af-toggle-opt:not(.is-on):hover{color:var(--ink)}
.af-toggle-opt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.af-stage-video{transition:opacity 280ms ease}
.af-stage.is-static .af-stage-video,.af-stage.is-static .af-stage-left{opacity:0}
.af-dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.af-stage{position:relative;width:100%;aspect-ratio:1200/792;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.08),0 10px 24px -10px rgba(16,24,40,.35)}
.af-stage>*{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.af-stage-left{width:49.1%}
/* 3 — recommendations */
.af-reco-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.af-reco-for{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.af-reco{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:8px}
.af-reco-thumb{width:88px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;flex-shrink:0}
.af-reco-txt{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.af-reco-t{font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.af-reco-w{font-size:12px;line-height:16px;color:#6B7280}

/* ===== developer: full-bleed dark band, attio-style curtain =====
   The band is NOT sticky any more. It stays in normal flow at z-index 10 inside
   .dev-quote-stack; the quote right below it is pulled up by -100svh at z-index 0 and
   pins inside a 250svh track. So the band's lower edge rides up like a curtain and
   uncovers the pinned quote, which then holds for the rest of the track.
   The wrapper's `isolation: isolate` keeps the z-10 band inside the pair, so #trust
   (z-index 1, outside) still covers both. It must never get overflow:hidden — that
   would kill the pin. The header stays at z-index 50, above everything.
   There is no entrance animation on the band any more: it arrives in plain flow with a
   static background. The inner .dev-curtain layer stays as the motifs' canvas. */
.dev-quote-stack{position:relative;isolation:isolate}
#dev{position:relative;z-index:10;padding:0;min-height:100svh;opacity:1;transform:none;transition:none}
.dev-curtain{position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--dark);padding:var(--section-gap) 0}
/* zen motifs on the dark band: white ink (invert) behind and around the copy. The
   mountain range is the only one that sits under the text, hence the low opacity. */
.motif-dev-mountains{left:50%;bottom:0;width:min(100%,1600px);transform:translateX(-50%);filter:invert(1);opacity:.18}
.motif-dev-crane{right:calc((100% - var(--container)) / 2 - 8px);top:40px;width:220px;filter:invert(1);opacity:.4}
/* the dark column + the stack panel arrive 120 ms behind the curtain (--cstep 0: together) */
#dev{--cbase:120ms;--cstep:0ms}
/* OT-1705: the copy column is the fixed one (420 px, as designed) and the tabs + window
   take the rest, so the chat window grows with the viewport instead of the paragraph. */
.dev-grid{position:relative;z-index:1;display:grid;grid-template-columns:420px minmax(0,1fr);gap:56px;align-items:center}
.dev-copy{display:flex;flex-direction:column;gap:14px}
.on-dark{color:#fff}
.on-dark-lead{color:var(--ink-400)}
.dev-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ===== OT-1705: agent stack — four tabs, two of them live chat demos =====
   The window has a FIXED height (--stack-h) at every breakpoint and the inactive panels
   are `hidden`, so switching tabs and every beat of the animation are layout-neutral:
   nothing in the block can contribute a layout shift. */
.stack{min-width:0;display:flex;flex-direction:column;gap:16px}
.stack-tabs{display:flex;gap:8px;flex-wrap:wrap}
.stack-tab{font-family:inherit;font-size:14px;font-weight:600;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  cursor:pointer;border:1px solid var(--dark-border);background:var(--dark-chip);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.stack-tab:hover{border-color:var(--ink-400)}
.stack-tab.is-on{background:#fff;border-color:#fff;color:var(--dark)}
.stack-tab:focus-visible{outline:2px solid var(--focus-border);outline-offset:2px}
.stack-win{position:relative;height:var(--stack-h,480px)}
.stack-panel{position:absolute;inset:0}
.stack-panel[hidden]{display:none}
.stack-panel:focus-visible{outline:2px solid var(--focus-border);outline-offset:4px}

/* ---- chat shell (one skin per product; the tokens are the only difference) ---- */
.sc{--sc-serif:'Source Serif 4',Georgia,'Times New Roman',serif;--sc-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;height:100%;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--dark-border);box-shadow:0 24px 60px -24px rgba(0,0,0,.6);background:var(--sc-bg)}
.sc-claude{--sc-bg:#FAF9F5;--sc-ink:#141413;--sc-sub:#73726C;--sc-line:#E8E6DC;--sc-user:#F0EEE6}
.sc-gpt{--sc-bg:#FFFFFF;--sc-ink:#0D0D0D;--sc-sub:#8F8F8F;--sc-line:#E5E5E5;--sc-user:#F4F4F4}
.sc .ic{flex-shrink:0}
.sc-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;font-family:var(--sc-sans);font-size:14px;color:var(--sc-ink)}
.sc-gpt .sc-bar{font-size:17px}
.sc-logo{flex-shrink:0}
.sc-claude .sc-brand{font-family:var(--sc-serif);font-size:17px}
.sc-title{margin-left:12px;color:var(--sc-sub);display:inline-flex;align-items:center;gap:4px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s linear}
.sc-title.is-on{opacity:1}
.sc-share{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;flex-shrink:0}
.sc-claude .sc-share{padding:5px 10px;border:1px solid var(--sc-line);border-radius:8px}
.sc-gpt .sc-share{font-size:14px}
.sc-body{position:relative;flex-grow:1;min-height:0;overflow:hidden}
/* the older beats fade out under the top edge as the thread rides up */
.sc-body::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .3s linear;background:linear-gradient(180deg,var(--sc-bg) 0,rgba(255,255,255,0) 100%)}
.sc-body.is-rolled::before{opacity:1}

/* beat 1: the empty-chat home screen. It covers the body, so swapping it for the thread
   cannot move anything around it. */
.sc-home{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 44px;
  background:var(--sc-bg);transition:opacity .35s var(--ease)}
.sc-home.is-off{opacity:0;pointer-events:none}
.sc-greet{display:flex;align-items:center;justify-content:center;gap:14px;font-size:30px;color:var(--sc-ink);text-align:center}
.sc-claude .sc-greet{font-family:var(--sc-serif)}
.sc-gpt .sc-greet{font-family:var(--sc-sans);font-size:26px}
.sc-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-family:var(--sc-sans);font-size:13px;color:var(--sc-sub)}
.sc-chips span{padding:6px 12px;border:1px solid var(--sc-line);border-radius:8px}

/* beats 2-4: the thread. It is a real scroller — the player pins it to the bottom on every
   seek, so older beats ride up out of view and the window height never changes. */
/* The thread is taller than the window; --sc-y (set by the player from the measured
   height) slides it up so the newest beat is always at the bottom edge. Transform and
   opacity only — the window's own height never changes, so the block cannot shift. */
.sc-thread{position:absolute;left:0;right:0;top:0;box-sizing:border-box;padding:10px 24px 14px;
  display:flex;flex-direction:column;gap:12px;opacity:0;
  transform:translateY(calc(0px - var(--sc-y,0px)));
  transition:opacity .3s linear,transform .45s var(--ease)}
.sc-thread.is-on{opacity:1}
.sc-el{display:none}
.sc-el.is-on{display:flex;animation:sc-rise .38s var(--ease) both}
/* is-on carries two classes, so the layout mode has to be restated per kind of row */
.sc-user.is-on,.sc-say.is-on{display:block}
.sc-grid.is-on{display:grid}
@keyframes sc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc-user{align-self:flex-end;max-width:78%;background:var(--sc-user);color:var(--sc-ink);padding:10px 14px;border-radius:12px;
  font-family:var(--sc-sans);font-size:15px;line-height:22px}
.sc-gpt .sc-user{max-width:70%;padding:10px 16px;border-radius:22px;line-height:23px}
.sc-say{font-family:var(--sc-serif);font-size:16px;line-height:26px;color:var(--sc-ink)}
.sc-gpt .sc-say{font-family:var(--sc-sans);font-size:15px;line-height:25px}
.sc-tool{align-self:flex-start;align-items:center;gap:8px;font-family:var(--sc-sans);font-size:13px;color:var(--sc-sub);max-width:100%}
.sc-claude .sc-tool{padding:7px 10px;border:1px solid var(--sc-line);border-radius:8px}
.sc-gpt .sc-tool{font-size:14px;gap:6px}
.sc-tool-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-tool-txt b{font-weight:400;color:var(--sc-ink)}
.sc-gpt .sc-tool-txt b{font-weight:inherit;color:inherit}
.sc-om{width:16px;height:16px;border-radius:4px;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-state{display:inline-flex;align-items:center;flex-shrink:0}
.sc-check{color:#12805C}
.sc-spin{display:none;width:13px;height:13px;border-radius:50%;border:2px solid var(--sc-line);border-top-color:var(--orange);
  animation:sc-spin .8s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-tool.is-doing .sc-spin{display:inline-block}
.sc-tool.is-doing .sc-check{display:none}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sc-fig{margin:0;flex-direction:column;gap:4px}
.sc-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;border:1px solid var(--sc-line);display:block}
.sc-fig figcaption{font-family:var(--sc-sans);font-size:11px;line-height:14px;color:var(--sc-sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-fig figcaption b{color:var(--sc-ink)}
.sc-card{gap:14px;border:1px solid var(--sc-line);border-radius:12px;padding:10px;background:#fff;font-family:var(--sc-sans)}
.sc-card img{width:200px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;flex-shrink:0;display:block}
.sc-card-txt{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:19px;color:var(--sc-sub);min-width:0}
.sc-card-t{font-size:14px;font-weight:600;color:var(--sc-ink)}
.sc-card-txt span{color:var(--sc-ink)}
.sc-card-link{color:var(--sc-ink);text-decoration:underline}

/* the composer. It exists twice — inline on the home screen and pinned under the thread —
   and both are driven by the same clock, so the caret never runs on a hidden one. */
.sc-foot{padding:0 24px 16px;opacity:0;transition:opacity .3s linear}
.sc-foot.is-on{opacity:1}
.sc-comp{box-sizing:border-box;background:#fff;border:1px solid var(--sc-line)}
.sc-claude .sc-comp{border-radius:20px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:14px;box-shadow:0 4px 20px -8px rgba(0,0,0,.1)}
.sc-gpt .sc-comp{border-radius:28px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 24px -10px rgba(0,0,0,.14)}
.sc-comp-txt{flex-grow:1;min-width:0;font-family:var(--sc-sans);font-size:15px;line-height:22px;color:var(--sc-sub);
  min-height:22px;overflow:hidden}
.sc-comp.is-typed .sc-comp-txt{color:var(--sc-ink)}
.sc-comp-row{display:flex;align-items:center;gap:10px;color:var(--sc-sub)}
.sc-comp-row>.ic{color:var(--sc-ink)}
.sc-model{margin-left:auto;font-family:var(--sc-sans);font-size:13px;color:var(--sc-ink);display:inline-flex;align-items:center;gap:6px}
.sc-model .sc-dim{color:var(--sc-sub)}
.sc-send{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sc-ink)}
.sc-claude .sc-comp.is-typed .sc-send{width:30px;height:30px;border-radius:8px;background:#D97757;color:#fff}
.sc-gpt .sc-send{width:36px;height:36px;border-radius:50%;background:var(--sc-ink);color:#fff}
.sc-send-i{display:none}
.sc-comp.is-typed .sc-send-i{display:block}
.sc-comp.is-typed .sc-wave-i{display:none}
/* the caret only paints while the composer is actually being typed into */
.sc-comp.is-typing .sc-comp-txt::after{content:"";display:inline-block;width:2px;height:15px;vertical-align:-2px;margin-left:1px;
  background:var(--sc-ink);animation:caret 1s steps(1) infinite}

/* ---- the MCP / API tabs: the old code typewriter, now inside the stack window ---- */
.sc-code{box-sizing:border-box;height:100%;min-width:0;background:var(--dark-panel);border:1px solid var(--dark-border);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.sc-code-pair{height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.sc-code-bar{padding:10px 14px;border-bottom:1px solid var(--dark-border);font-size:12px;color:var(--gray-200);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code{margin:0;flex-grow:1;min-height:0;padding:18px 20px;font-size:13px;line-height:22px;color:#E6E8EB;
  white-space:pre-wrap;word-break:break-word;overflow:auto}
.code .cl{display:block}
.code .cl:empty{height:1em}
.code .cl.cm{color:var(--ink-500)}
.code em{font-style:normal;color:var(--orange-hover)}
.code i.ok{font-style:normal;color:#86EFAC}
.code.js-type .cl{opacity:0}
.code.js-type .cl.on{opacity:1;transition:opacity .12s linear}
.code-cursor{display:inline-block;width:7px;height:14px;background:var(--gray-200);vertical-align:-2px;animation:caret 1s steps(1) infinite}

/* ===== after publish ===== */
/* Anchored to the right edge of the container, not the viewport, so the stones keep the
   same distance from the card grid at every width. */
.motif-stones{top:-44px;right:calc((100% - var(--container)) / 2 - 20px);width:300px;opacity:.7}
[data-reveal].motif-stones.is-in{opacity:.7}

/* ===== trust (beige) + the mist that closes it =====
   The mist mountains used to be their own sticky "breath" section; they are now the
   foot of the trust block, below the logo grid, in the same beige. The band clips the
   mist (it is taller) and a paper gradient softens the top crop so it does not read as
   a hard edge; the mountain base sits exactly on the block floor. Nothing is sticky and
   nothing slides over anything any more: #changelog simply follows in flow. */
.trust-mist{position:relative;height:200px;margin-top:var(--section-gap);overflow:hidden}
.trust-mist::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0,rgba(247,245,241,0) 100%)}
.breath-mist{position:absolute;bottom:0;left:50%;margin-left:-550px;width:1100px;height:auto;opacity:.6;pointer-events:none;user-select:none}
[data-reveal].breath-mist.is-in{opacity:.6}

#trust{position:relative;z-index:1;background:var(--paper);padding-top:var(--section-gap);padding-bottom:0}
.motif-leaf-trust{right:0;top:8px;width:240px}
.trust-head{display:grid;grid-template-columns:360px minmax(0,1fr);gap:40px;align-items:center;position:relative;z-index:1}
.trust-monk{width:300px;height:auto;justify-self:center}
.trust-copy{display:flex;flex-direction:column;gap:12px}
.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 32px;align-items:center;margin-top:56px;position:relative;z-index:1}
.logo{height:26px;width:auto;max-width:min(150px,100%);object-fit:contain;justify-self:center;opacity:.8}
.logo-18{height:18px}.logo-22{height:22px}.logo-24{height:24px}.logo-30{height:30px}.logo-34{height:34px}.logo-40{height:40px}
[data-reveal].logo.is-in{opacity:.8}

/* ===== quote: pinned under the dark band, uncovered by the curtain =====
   The section carries no padding and no height of its own: the 250svh .quote-track is
   the scroll runway, and .quote-pin is what the visitor sees, stuck right below the
   header for the whole runway. margin-top:-100svh puts its first viewport *under* the
   dark band (z-index 0 vs 10), so the band scrolling away is what reveals it. After the
   band's foot has passed, ~450 px of clean paper pin is left before it lets go. */
.quote-sec{position:relative;z-index:0;background:var(--white);margin-top:-100svh;padding:0;display:block}
.quote-track{height:300svh}
.quote-pin{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.quote-wrap{position:relative;z-index:1;max-width:1040px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.quote-text{margin:0;font-size:44px;line-height:56px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
/* the blockquote itself does not move and the words do not fade: they go from light to
   ink left to right, driven by how far the page is through the pin range (main.js). */
[data-reveal].quote-text{opacity:1;transform:none;transition:none}
.quote-text .w{display:inline-block;color:var(--ink-400);transition:color .5s ease-out}
.quote-text .w.is-on{color:var(--ink)}
.quote-attr{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:36px}
.quote-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.quote-who{text-align:left}
.quote-name{font-size:15px;font-weight:600;line-height:22px}
.quote-role{font-size:14px;line-height:20px;color:var(--ink-500)}
/* both motifs live inside the pin, so they hold still with the quote */
.motif-quote-bamboo{left:24px;bottom:0;width:300px;opacity:.5}
.motif-quote-enso{right:16px;top:24px;width:260px;opacity:.35}

/* ===== changelog: a Linear-style release timeline =====
   White, so it separates from the beige trust block above it. One hairline across the
   four columns with a dot at each item's start (the newest one orange); below it the
   four columns, each title / two-line summary / monospace date. Under 1200 the rail is
   dropped and every item carries its own hairline + dot, which survives 2- and 1-column
   rows. The gap to the CTA still lives inside #cta as padding-top. */
#changelog{position:relative;z-index:1;background:var(--white);padding:96px 0;margin-bottom:0;overflow:hidden}
.motif-leaf-log{right:40px;top:24px;width:220px}
.timeline{position:relative;z-index:1;margin-top:48px}
.timeline-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;height:10px}
.timeline-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gray-200)}
.timeline-dot{position:relative;z-index:1;align-self:center;justify-self:start;width:10px;height:10px;border-radius:var(--r-pill);background:var(--ink-400)}
.timeline-dot.is-latest{background:var(--orange)}
.timeline-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:20px}
.timeline-item{display:flex;flex-direction:column;gap:8px;min-width:0}
.timeline-title{margin:0;font-size:17px;line-height:26px;font-weight:500;color:var(--ink)}
.timeline-body{margin:0;font-size:15px;line-height:24px;color:var(--ink-600);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.timeline-date{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.timeline-all{margin-top:40px}

/* ===== cta ===== */
#cta{position:relative;z-index:1;background:var(--paper);padding-top:var(--section-gap);padding-bottom:96px}
.motif-enso{right:-140px;top:-60px;width:520px;animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-motif-in].motif-enso{transition:opacity 1.2s var(--ease)}
[data-motif-in].motif-enso.is-in{transform:none}
.motif-bamboo-cta{right:-20px;bottom:-180px;width:300px}
.cta-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.cta-monk{width:260px;height:auto;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
[data-reveal].cta-monk.is-in{transform:none;animation:float 6s ease-in-out infinite}
.cta-lead{margin-top:16px}
.cta-btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--gray-200);position:relative;z-index:1;background:var(--paper)}
.foot-grid{padding:56px 0 40px;display:grid;grid-template-columns:320px repeat(4,minmax(0,1fr));gap:40px;position:relative}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand img{height:32px;width:auto;align-self:flex-start}
.foot-tag{font-size:14px;color:var(--ink-600)}
.foot-h{font-size:13px;font-weight:600;margin-bottom:8px}
.foot-link{display:block;font-size:14px;color:var(--ink-600);line-height:26px}
.foot-link:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;padding:0 0 32px;font-size:12px;color:var(--ink-500);position:relative;gap:16px;flex-wrap:wrap}
.foot-legal{display:flex;gap:20px}
.foot-legal .foot-link{font-size:12px;line-height:16px}

/* ===== header dropdowns (nav) =====
   "B" style from the approved artboards: bare 20px line icons (no tile), --ink-600 going
   --ink on hover, 500-weight titles, white panel on a 1px --gray-200 border. */
.nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s}
/* 9px, not 8: top:100% lands on the header's padding box, and the header's 1px bottom
   border sits outside it — this puts the panel exactly 8px under the visible header edge */
/* invisible bridge over the 8px gap, so the pointer can cross from the trigger into the
   panel without ever leaving .nav-item */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden}
.nav-panel-product{--nav-w:1000px}
.nav-panel-library{--nav-w:1020px}
.nav-panel-res{--nav-w:860px}
.nav-sec{display:flex;flex-direction:column;gap:12px}
.nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px}
.nav-sec-title-flush{padding:0}
.nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px}
.nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list-tight{display:flex;flex-direction:column;gap:2px}
/* rich row: icon + title (+ chip) + description, arrow revealed at the right edge on hover */
.nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease}
.nav-row:hover{background:var(--gray-100);color:var(--ink)}
.nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease}
.nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)}
.nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px}
.nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)}
/* always in the box, only faded — revealing it must not reflow the row */
.nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease}
.nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1}
/* compact one-line row (Popup Library columns) */
.nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-c:hover{background:var(--gray-100);color:var(--ink)}
/* plain text row (Resources / Company) */
.nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-p:hover{background:var(--gray-100);color:var(--ink)}
.nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12}
.nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px}
.nav-ai-logos img{width:16px;height:16px}
.nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)}
.nav-foot-center{justify-content:center}
.nav-foot-note{font-size:15px;color:var(--ink-600)}
.nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-link-go{min-height:40px}
.nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline}
/* Product panel */
.nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
/* Popup Library panel */
.nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px}
.nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px}
.nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)}
.nav-season-body{display:flex;flex-direction:column;gap:12px}
.nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nav-season-name{font-size:18px;font-weight:600;line-height:24px}
.nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap}
.nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)}
.nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)}
.nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px}
.nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)}
.nav-season-row:hover{color:var(--ink);text-decoration:underline}
/* Resources panel: the artboard's per-column padding keeps the three columns optically even */
.nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.nav-col-l{padding:28px 8px 24px 16px}
.nav-col-r{padding:28px 16px 24px 8px}
.nav-col-c{padding:28px 12px 24px}
/* the mobile sheet only exists under the nav breakpoint */
.mnav{display:none}

/* ===== responsive ===== */

@media (max-width:1059px){
  /* the seasons column needs its 380px; below this the two link columns get the panel */
  .nav-lib-grid{grid-template-columns:minmax(0,1fr)}
  .nav-seasons{display:none}
}
/* ===== tablet ===== */
@media (max-width:1199px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .dev-grid{grid-template-columns:360px minmax(0,1fr);gap:32px}
  .trust-head{grid-template-columns:260px minmax(0,1fr);gap:24px}
  .trust-monk{width:240px}
  .motif-bamboo-hero{width:260px;right:-30px}
  .motif-enso{width:400px;right:-120px}
  .motif-bamboo-cta{width:220px}
  .motif-leaf-log{width:160px;right:16px}
  .motif-stones{width:240px}
  .breath-mist{width:900px;margin-left:-450px}
  /* no room for four columns on one rail: each item takes its own hairline + dot */
  .timeline-rail{display:none}
  .timeline-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .timeline-item{position:relative;border-top:1px solid var(--gray-200);padding-top:22px}
  .timeline-item::before{content:"";position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:var(--r-pill);background:var(--ink-400)}
  .timeline-item:first-child::before{background:var(--orange)}
  .foot-grid{grid-template-columns:240px repeat(4,minmax(0,1fr));gap:24px}
}

/* ===== tablets: the After-publish trio breaks to two columns =====
   Three 372 px illustrations do not fit under 1024, so the first two share a row and the
   recommendation card — whose rows stretch well — takes the full width underneath. The
   fixed box height goes away here; the boxes just take the height of their contents. */
/* the "after publish" cards: three in a row only from 1280px — below that the third card's
   recommendation rows are too narrow for thumb + text + Build, so it spans the full width */
@media (max-width:1279px){
  .af-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .af-card:nth-child(3){grid-column:1/-1}
  .af-fig{height:auto;min-height:0}
}
@media (max-width:1023px){
  /* OT-1705: under 1024 the split breaks — copy on top, tabs + window underneath. */
  .dev-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  /* stacked, the two code windows have to earn their room: a tighter type scale keeps
     both listings whole inside the same fixed window */
  .sc-code-pair{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);gap:12px}
  .code{font-size:12px;line-height:19px;padding:14px 16px}
  .sc-code-bar{font-size:11px;padding:8px 12px}
}

/* ===== mobile ===== */
@media (max-width:767px){
  :root{
    --header-h:64px;
    --container:min(1160px, 100% - 40px);
    --h1-size:36px;--h1-lh:42px;
    --h2-size:28px;--h2-lh:36px;
    --lead-size:16px;--lead-lh:26px;
    --section-gap:72px;
    --card-pad:22px;
    --composer-w:100%;
  }
  body{font-size:15px}
  h1{margin-top:24px}
  .h2-44{font-size:30px;line-height:38px}
  .h2-52{font-size:32px;line-height:40px}
  #hero{padding-top:32px;padding-bottom:64px}
  .nav-links,.header-signin{display:none}
  .nav-burger{display:flex}
  /* full-height sheet under the (sticky) header; z-index stays below the header's 50 */
  .mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
  .mnav-nav{display:flex;flex-direction:column}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .mnav-row svg{flex-shrink:0;color:var(--ink-600)}
  .mnav-chev{transition:transform 160ms ease}
  .mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
  .mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}
  .mnav-sub.is-open{display:block}
  .mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}
  .mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}
  .mnav-link:hover{color:var(--ink)}
  .mnav-ico{display:flex;color:var(--ink-600)}
  .mnav-arrow{padding:6px 20px 0}
  .mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}
  .mnav-cta{font-size:16px}
  body.mnav-open{overflow:hidden}
  body.mnav-open .mnav{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
  .badge{font-size:12px;text-align:left}
  .composer{margin-top:28px}
  .composer-input{min-height:96px}
  .hero-chips{margin-top:16px;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;width:100%;padding-bottom:4px;justify-content:flex-start}
  .hero-chips::-webkit-scrollbar{display:none}
  .motif-pine{display:none}
  .motif-bamboo-hero{width:150px;right:-30px;top:-10px;opacity:.5}
  .motif-leaf-trust{width:120px;right:-56px;top:auto;bottom:-72px}
  .motif-leaf-log{display:none}
  .motif-stones{display:none}
  .trust-mist{height:140px}
  .breath-mist{width:100%;left:0;margin-left:0}
  .timeline-items{grid-template-columns:minmax(0,1fr);gap:28px}
  .motif-enso{width:280px;right:-110px;top:-30px;opacity:.55}
  .motif-bamboo-cta{width:160px;right:-40px;bottom:-80px;opacity:.5}
  .shot{width:180px;height:120px}
  .track{gap:14px}
  .fade{width:60px}
  .grid3,.grid4{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}
  .af-grid{gap:16px}
  .af-card:nth-child(3){grid-column:auto}
  /* phone widths: the A/B pair keeps two columns, so both columns are forced to break the
     same way — a reserved label row and the unit always under the number — or the Winning
     badge alone would push variant B's picture and number out of line with the control's */
  .af-var-top{min-height:26px;align-items:flex-start}
  .af-unit{flex:1 0 100%}
  .af-reco-thumb{width:72px}
  .af-btn{padding:9px 12px}
  .dev-grid{gap:28px}
  #dev{--stack-h:500px}
  .stack{gap:12px}
  .sc-home{padding:0 20px;gap:20px}
  .sc-greet{font-size:22px;gap:10px}
  .sc-gpt .sc-greet{font-size:20px}
  .sc-thread{padding:10px 14px 12px;gap:10px}
  .sc-foot{padding:0 14px 14px}
  .sc-say,.sc-gpt .sc-say{font-size:14px;line-height:22px}
  .sc-user,.sc-comp-txt{font-size:14px;line-height:21px}
  .sc-bar,.sc-gpt .sc-bar{font-size:13px;padding:9px 12px}
  /* the band still has to fill a viewport (the quote is pulled up by exactly 100svh),
     but the stacked column is tall on a phone, hence the tighter band padding */
  .dev-curtain{padding:56px 0}
  .motif-dev-crane,.motif-quote-enso{display:none}
  .motif-dev-mountains{opacity:.12}
  .trust-head{grid-template-columns:minmax(0,1fr);gap:16px;text-align:center;justify-items:center}
  .trust-monk{width:180px;order:-1}
  .trust-copy{align-items:center}
  .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px;margin-top:36px}
  .logo{height:22px;max-width:100%}
  .logo-30,.logo-34,.logo-40{height:26px}
  .quote-text{font-size:30px;line-height:40px}
  /* the pin has to outlast the curtain: the band's foot starts 100svh + header below
     the fold, so the runway (track - pin = track - 100svh + header) must exceed that.
     At exactly 200svh the pin would let go the instant the band clears; 240 leaves a
     ~40svh tail of clean paper, the phone-sized version of the desktop 300svh. */
  .quote-track{height:240svh}
    .motif-quote-bamboo{display:none}
  #changelog{padding:64px 0}
  .cta-monk{width:190px}
  .cta-btns{width:100%;flex-direction:column;align-items:stretch}
  .cta-btns .btn{width:100%}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:40px 0 28px}
  .foot-brand{grid-column:1/-1}
  .foot-bottom{padding:0 0 28px;flex-direction:column;gap:10px}
}

/* ===== phones: the stack window keeps everything inside the same fixed box =====
   Four tabs stay on one row (they only shrink), the concept grid becomes 2x2 and the
   result card stacks, so nothing overflows and nothing scrolls sideways. */
@media (max-width:599px){
  #dev{--stack-h:500px}
  .stack-tabs{flex-wrap:nowrap;gap:6px}
  .stack-tab{flex:1 1 0;min-width:0;padding:10px 6px;font-size:13px;justify-content:center}
  .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-user{max-width:88%}
  .sc-gpt .sc-user{max-width:88%}
  .sc-card{flex-direction:column}
  .sc-card img{width:100%;aspect-ratio:auto;height:132px}
  .sc-chips{display:none}
  .sc-title{display:none}
  .sc-claude .sc-comp{padding:10px 12px 10px;gap:10px}
  .sc-code-pair{grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)}
}

/* ===== 1280+ ===== */
@media (min-width:1280px){
  .motif-pine{height:480px;opacity:.55}
}

/* ===== wide screens: step 3 of 3 (tokens live in index.html :root) ===== */
@media (min-width:1440px){
  .motif-pine{height:560px;left:-110px}
  .motif-stones{width:340px;top:-64px}
  .trust-mist{height:240px}
  .shot{width:256px;height:171px}
  .hero-lead{max-width:640px}
  .sec-head{max-width:720px}
  .sec-head-720{max-width:800px}
  .quote-text{font-size:52px;line-height:64px}
  .motif-dev-crane{width:250px}
  .motif-quote-enso{width:300px}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .nav-panel,.mnav{transition:none!important;transform:translateX(-50%)!important}
  .mnav{transform:none!important}
  .nav-trigger svg,.mnav-chev{transition:none!important}
  .track,.motif-enso,.cta-monk,[data-reveal].cta-monk.is-in,.caret,.code-cursor{animation:none!important}
  .plb-scrim,.plb-panel,.shot-link,.shot-cta{transition:none!important}
  #ghostText{opacity:1}
  /* OT-1705: the chat demos do not run at all — every tab shows the last beat as a still */
  .sc-el.is-on,.sc-spin{animation:none!important}
  .sc-home{transition:none!important}
  .sc-thread,.sc-foot,.sc-title,.sc-body::before{transition:none!important}
  .sc-comp.is-typing .sc-comp-txt::after{display:none}
  /* no scroll-driven settle, no curtain, no sticky: everything sits at its end state */
  [data-window]{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  #dev{position:static!important}
  /* no pull-up, no pin, no scroll-driven word progress: the quote is an ordinary
     section with every word already at full ink */
  .quote-sec{margin-top:0!important;padding:var(--section-gap) 0!important}
  .quote-track{height:auto!important}
  .quote-pin{position:static!important;height:auto!important;overflow:visible!important}
  .quote-text .w{color:var(--ink)!important;transition:none!important}
  [data-reveal-child],.quote-text .w{opacity:1!important;transform:none!important;transition:none!important}
  .chip-dark{opacity:1!important;transform:none!important;transition:none!important}
  .code.js-type .cl{opacity:1!important}
}