/* SeatLayer Features — the capability inventory.
   The homepage argues; this page lists. Every section is a group of named
   capabilities that routes to the page which goes deep, so the styling here is
   built for scanning: one matrix, alternating surfaces, and a sticky rail that
   says where you are. Shares the site design system (site.css) and the diagram
   frame treatment with the homepage. */

/* ---------- 1. hero ---------- */
.feat-hero{position:relative;overflow:hidden;padding:clamp(44px,4.6vw,62px) 0 clamp(34px,3.4vw,46px);background:#0b111b;color:#edf2fb}
.feat-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 84% 18%,rgba(88,101,242,.2),transparent 62%),radial-gradient(50% 70% at 16% 0,rgba(244,183,64,.11),transparent 62%)}
.feat-hero .wrap{position:relative;z-index:1}
/* Copy left, the Designer mock right. The mock is this page's own asset — the
   live picker belongs to the homepage hero and is not duplicated here. Below
   1100px the frame stacks under the CTAs. */
.feat-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,3.2vw,44px);align-items:center}
.feat-hero-grid>*{min-width:0}
.feat-hero-dia{margin:0;max-width:none}
/* The clamp must stay genuinely fluid: the responsive gate requires 30–46px at
   320, a real increase by 390 (not a floor both widths bottom out on), and
   48–84px at 1440. The ceiling is held just over 48px because the headline now
   shares the hero with the Designer frame and has ~480px of column to live in. */
.feat-hero h1{max-width:16ch;font-size:clamp(2.125rem,calc(1.55rem + 2.9vw),3.05rem);font-weight:800;line-height:1;letter-spacing:-.045em;text-wrap:balance}
.feat-hero h1 em{color:#f4b740;font-style:normal}
.feat-lead{max-width:64ch;margin-top:20px;color:#a6b1c4;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.65;text-wrap:pretty}
.feat-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.feat-actions .btn{min-height:48px}
.feat-link{display:inline-flex;align-items:center;min-height:44px;color:#f4b740;font-size:.875rem;font-weight:750;border-bottom:2px solid rgba(244,183,64,.5)}
.feat-link:hover{border-color:#f4b740}

/* ---------- 2. sticky jump rail ----------
   Reads as a second row OF the header, not a band under it: same translucent
   cream and blur, same hairline, contents on the same .wrap measure. Tabs, not
   pills — text with the amber underline the rest of the site already uses for
   an active link. The 44px tap target comes from padding, so the rail itself
   stays ~48px tall. On a phone it is one scrolling row with a fade on the right
   edge, and the scroll-spy keeps the active tab in view. */
.feat-rail{position:sticky;top:var(--feat-header,76px);z-index:40;border-bottom:1px solid rgba(230,220,200,.6);background:rgba(252,247,238,.86);backdrop-filter:blur(12px)}
.feat-jump{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.feat-jump::-webkit-scrollbar{display:none}
.feat-jump a{display:inline-flex;flex:0 0 auto;align-items:center;padding:12px 2px;border-bottom:2px solid transparent;color:var(--muted);font-size:13px;font-weight:600;line-height:20px;white-space:nowrap;transition:color .15s,border-color .15s}
.feat-jump a:hover{color:var(--ink)}
.feat-jump a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--amber)}
@media(max-width:900px){.feat-rail{top:var(--feat-header-sm,64px)}}
@media(max-width:640px){
  .feat-rail .wrap{padding:0 16px}
  .feat-jump{gap:20px;mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
}

/* ---------- shared section shell ---------- */
.feat-section{padding:clamp(44px,4.2vw,60px) 0}
.feat-head{max-width:790px}
.feat-head h2{font-size:var(--sl-title-section);font-weight:800;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.feat-head p{max-width:70ch;margin-top:14px;color:var(--muted);font-size:1rem;line-height:1.7;text-wrap:pretty}
/* Dark sections declare the surface-scoped text tokens locally so a light-token
   --muted (2.9:1 on a panel) never leaks in. Mirrors the generated block in
   site.css without editing it. */
.feat-dark{background:#0b111b;color:#e9eef8;--muted:#8b94ac;--faint:#98a1b8;--amber-text:var(--amber);--ink-strong:#e7ecf7;--ghost-border:#33405c;--ghost-bg:rgba(255,255,255,.04);--ghost-ink:#e7ecf7}
.feat-cream{background:#fbf8f2}
.feat-warm{background:#fffaf1}
.feat-white{background:#fff}

/* ---------- 3. the capability matrix ---------- */
/* Each legend entry is one inline-flex unit, so a chip can never be orphaned
   from its label and narrow screens wrap whole entries rather than words. The
   all-caps mono treatment stays inside the chips; the labels are sentence-case
   body text, which is what stops the row reading as three ransom notes. */
.feat-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:18px 0 22px;color:var(--muted);font:600 12px/1.5 var(--sans);letter-spacing:.02em}
.feat-legend-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.feat-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feat-mgroup{min-width:0;padding:clamp(20px,2.4vw,26px);border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 18px 48px -46px rgba(12,18,32,.7)}
.feat-mgroup h3{font-size:1.0625rem;line-height:1.25;letter-spacing:-.015em}
/* Each group is a <details> so a phone can collapse it. It ships with `open` in
   the markup, so with JavaScript off — and on every screen at or above 760px —
   the full inventory is simply present. features.js only closes groups below
   760px. Above it the summary is inert and shows no affordance. */
.feat-mgroup{padding-block:clamp(16px,2vw,20px)}
.feat-mgroup summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;cursor:default;list-style:none}
.feat-mgroup summary::-webkit-details-marker{display:none}
.feat-mgroup summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-right:2px;border-right:2px solid var(--amber-text);border-bottom:2px solid var(--amber-text);transform:translateY(-3px) rotate(45deg);transition:transform .2s;opacity:0}
.feat-mgroup-jump{margin-top:2px}
.feat-mgroup-jump a{display:inline-flex;align-items:center;min-height:44px;color:var(--amber-text);font-size:.8125rem;font-weight:700;border-bottom:2px solid var(--amber)}
.feat-mgroup ul{display:grid;margin:2px 0 0;padding:0;list-style:none}
/* Row height IS the tap target: the name fills the row, so the 44px minimum is
   met without padding that would add 12px to every one of forty-odd rows. */
.feat-mgroup li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;border-bottom:1px solid #efe7d6;color:#3f4759;font-size:.875rem;line-height:1.45}
.feat-mgroup li:last-child{border-bottom:0}
.feat-mgroup li>span:first-child{display:flex;align-items:center;min-width:0;min-height:44px;padding:5px 0}
.feat-mgroup li a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid #cfc2a4;font-weight:650}
.feat-mgroup li a:hover{border-color:var(--amber-deep);color:var(--amber-text)}
/* Status is a shape or a word, never a colour on its own. */
.cap-chip{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:5px;height:22px;min-width:22px;padding:0 8px;border-radius:999px;vertical-align:middle;font:700 .625rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.cap-chip svg{width:11px;height:11px;flex:0 0 11px}
.cap-ok{padding:0 6px;border:1px solid #b7ddc9;background:#eaf7f0;color:#12664a}
.cap-beta{border:1px solid #dcc79a;background:#fdf2dc;color:#7a5610}
.cap-preview{border:1px solid #c3cbe4;background:#eef1fb;color:#3f4a80}
.feat-mnote{margin-top:12px;padding-top:11px;border-top:1px solid #efe7d6;color:var(--faint);font-size:.8125rem;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. two ways in ---------- */
.feat-forks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.feat-fork{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.6vw,30px);border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 20px 54px -45px rgba(12,18,32,.7)}
.feat-fork-primary{border-color:#e0d0ab;background:linear-gradient(168deg,#fffdf8,#fff6e4)}
.feat-fork h3{font-size:1.1875rem;line-height:1.22;letter-spacing:-.02em}
.feat-fork p{margin-top:10px;max-width:56ch;color:var(--muted);font-size:.9375rem;line-height:1.7}
.feat-fork-read{margin-top:14px;color:var(--muted);font-size:.8125rem;line-height:1.9}
.feat-fork-read a{border-bottom:1px solid #cfc2a4;font-weight:650}
.feat-fork-read a:hover{border-color:var(--amber-deep);color:var(--amber-text)}
.feat-fork-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:20px}
.feat-fork-actions .btn{min-height:48px}
.feat-fork-actions a:not(.btn){display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid var(--amber);font-size:.8125rem;font-weight:750}

/* ---------- 5. where the line is ---------- */
.feat-ownership{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.feat-ownership>div{min-width:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}
.feat-ownership b{display:block;color:var(--amber-text);font:700 .625rem/1.45 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.feat-ownership p{margin-top:10px;color:var(--muted);font-size:.875rem;line-height:1.7}
.feat-ownership p+p{margin-top:12px}

/* ---------- 6. section sub-lists ---------- */
.feat-list{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none;max-width:74ch}
.feat-list li{position:relative;padding-left:22px;color:var(--muted);font-size:.9375rem;line-height:1.65;text-wrap:pretty}
.feat-list li:before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.feat-list b{color:var(--ink-strong);font-weight:750}
.feat-list a{border-bottom:1px solid #cfc2a4;font-weight:650}
.feat-dark .feat-list a{border-bottom-color:#4a5570}
.feat-list a:hover{border-color:var(--amber-deep);color:var(--amber-text)}

/* ---------- diagram frame (matches the homepage) ---------- */
/* Frames sit on the same left edge and measure as the copy above them —
   a centred 820px frame under left-aligned text read as two grids
   (owner, 2026-08-19). Height on phones is handled by hiding the desktop-
   only mocks below 640px, not by shrinking the frames. */
.feat-dia{margin:26px 0 0;padding:0;border:1px solid #26324a;border-radius:18px;overflow:hidden;background:#0b0f18;box-shadow:0 24px 60px -46px rgba(12,18,32,.8)}
.feat-dia>div{min-width:0}
.feat-dia figcaption{padding:11px 15px;border-top:1px solid #1c2536;color:#9aa3b8;font:11.5px/1.5 var(--mono);letter-spacing:.02em}
.feat-dia-pair{display:grid;grid-template-columns:1fr;gap:18px;margin:26px 0 0}
.feat-dia-pair .feat-dia{margin:0}

/* ---------- route links out of a section ---------- */
.feat-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.feat-more a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:.84375rem;font-weight:700;transition:border-color .18s,box-shadow .18s,transform .18s}
.feat-more a:after{content:"→";color:var(--amber-deep);font-weight:800}
.feat-more a:hover{border-color:var(--amber-deep);box-shadow:0 14px 30px -24px rgba(12,18,32,.75);transform:translateY(-1px)}
.feat-dark .feat-more{border-top-color:#243044}
.feat-dark .feat-more a{border-color:#2a3650;background:#121a27;color:#e9eef8}
.feat-dark .feat-more a:after{color:#f4b740}
.feat-dark .feat-more a:hover{border-color:#f4b740;box-shadow:0 14px 30px -24px #000}

/* ---------- 7. the one live proof ----------
   Compact: the widget itself is the evidence, so it gets a heading, the widget,
   and one line of provenance that routes to the homepage for the full note. */
.feat-proof{margin-top:30px;padding-top:26px;border-top:1px solid #243044}
.feat-proof h3{font-size:1.1875rem;line-height:1.25;letter-spacing:-.02em}
.feat-proof>p{max-width:68ch;margin-top:9px;color:#9ba7ba;font-size:.9375rem;line-height:1.7}
.feat-proof .sl3d-proof{margin-top:20px}
/* The shared shell styles the poster headline as an h2. Here the proof is a
   sub-part of the Buyers section, so it is an h4 and takes the same treatment
   at a size that does not out-shout the section's own h2. */
.feat-proof .sl3d-proof-rest canvas{height:100%!important}
.feat-proof .sl3d-proof[data-state="idle"] .sl3d-proof-poster{cursor:pointer}
.feat-proof .sl3d-proof-poster h4{margin:10px 0 0;max-width:24ch;font-size:clamp(22px,3vw,32px);line-height:1.05;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.feat-proof .sl3d-proof-poster-copy{padding:26px clamp(20px,4vw,42px) clamp(22px,4vw,34px)}
.feat-proof-note{margin-top:16px;color:#8e9aaf;font-size:.8125rem;line-height:1.7}
.feat-proof-note a{color:#e9eef8;border-bottom:1px solid #4a5570;font-weight:700}
.feat-proof-note a:hover{border-color:#f4b740;color:#f4c75b}
.feat-proof-full{display:inline-flex}
/* The shared shell pins its controls to 40px with !important. These are the
   page's only live product controls, so they take the full 44px target. */
.feat-proof .sl3d-guide,.feat-proof .sl3d-load,.feat-proof .sl3d-proof-link{min-height:44px!important}

/* ---------- 8. code snippet (identical to the homepage's) ---------- */
.feat-code{max-width:640px;margin-top:22px;padding:18px 20px;border-radius:14px;background:#101828;color:#c9d4ea;font:400 12.5px/1.7 var(--mono);overflow-x:auto}
.feat-code .k{color:#6ee7a8}.feat-code .s{color:#f4b740}.feat-code .n{color:#e0b0ff}.feat-code .c{color:#98a5c2}

/* ---------- 9. AI cards ---------- */
.feat-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.feat-ai-grid article{display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 18px 48px -44px rgba(12,18,32,.7)}
.feat-ai-grid h3{margin-top:12px;font-size:1.0625rem;line-height:1.25;letter-spacing:-.015em}
.feat-ai-grid p{margin-top:8px;color:var(--muted);font-size:.875rem;line-height:1.7}
.feat-ai-grid code{display:inline-block;margin-top:10px;padding:4px 9px;border-radius:8px;background:#101828;color:#f4b740;font:700 .75rem/1.5 var(--mono)}
.feat-ai-grid a{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:10px;border-bottom:2px solid var(--amber);align-self:flex-start;font-size:.8125rem;font-weight:750}
.ai-status-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border:1px solid #decfab;border-radius:999px;background:rgba(255,253,248,.72);color:#675b45;font:700 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ai-status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--live)}

/* ---------- 10. hosted ---------- */
.feat-hosted-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.7fr);gap:clamp(26px,5vw,60px);padding:clamp(26px,4.5vw,50px);border:1px solid #dbcbaa;border-radius:24px;background:linear-gradient(145deg,#fffdf8,#fff4d9);box-shadow:0 24px 64px -52px rgba(12,18,32,.7)}
.feat-hosted-card>*{min-width:0}
.feat-hosted-card h2{max-width:19ch;font-size:var(--sl-title-section);font-weight:800;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.feat-hosted-lead{max-width:62ch;margin-top:16px;color:var(--muted);font-size:.9375rem;line-height:1.72;text-wrap:pretty}
.feat-hosted-boundary{margin-top:20px;padding:16px 18px;border:1px solid rgba(219,203,170,.95);border-radius:12px;background:rgba(255,255,255,.66);color:#4e5870;font-size:.9375rem;line-height:1.6}
.feat-hosted-side{display:flex;flex-direction:column;padding:26px;border-radius:18px;background:#121a28;color:#edf2fb}
.feat-hosted-side b{font:700 .625rem/1.45 var(--mono);letter-spacing:.13em;color:#f4b740}
.feat-hosted-side ol{margin:16px 0 0;padding-left:20px;color:#c0c9d6;font-size:.8125rem;line-height:1.65}
.feat-hosted-side li+li{margin-top:8px}
.feat-hosted-side .btn{justify-content:center;margin-top:22px;text-align:center}
.feat-hosted-side nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.feat-hosted-side nav a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid #667188;color:#aeb9c9;font-size:.75rem;font-weight:750}
.feat-hosted-side nav a:hover{color:#f4c75b;border-color:currentColor}

/* ---------- 11. faq + closer ---------- */
.feat-faq{max-width:880px;margin:26px 0 0}
.feat-faq details{border-bottom:1px solid var(--line)}
.feat-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:13px 4px;cursor:pointer;list-style:none;font-size:1.03125rem;font-weight:700;letter-spacing:-.01em}
.feat-faq summary::-webkit-details-marker{display:none}
.feat-faq summary:after{content:"+";color:var(--faint);font:400 20px var(--mono);transition:transform .2s}
.feat-faq details[open] summary:after{transform:rotate(45deg);color:var(--amber-text)}
.feat-faq .a{max-width:70ch;padding:0 4px 20px;color:var(--muted);font-size:.9375rem;line-height:1.7;text-wrap:pretty}
.feat-final{margin-top:38px;padding:clamp(28px,3.6vw,42px);border-radius:22px;background:#0b111b;color:#edf2fb;text-align:center}
.feat-final h2{max-width:20ch;margin-inline:auto;font-size:var(--sl-title-final);font-weight:800;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.feat-final p{max-width:60ch;margin:14px auto 0;color:#9ba7ba;font-size:.9375rem;line-height:1.7}
.feat-final .feat-actions{justify-content:center;margin-top:24px}
.feat-final .btn-ghost{border:1.5px solid #536177;background:#192231;color:#edf2fb}
.feat-final .btn-ghost:hover{border-color:#f4b740;color:#f4c75b}
.feat-final-alt{margin-top:22px;color:#8e9aaf;font-size:.84375rem}
.feat-final-alt a{color:#edf2fb;border-bottom:1px solid #4a5570;font-weight:700}
.feat-final-alt a:hover{border-color:#f4b740;color:#f4c75b}

.feat-hero a:focus-visible,.feat-rail a:focus-visible,.feat-section a:focus-visible,.feat-section button:focus-visible,.feat-section summary:focus-visible{outline:3px solid #f4b740;outline-offset:3px}

/* Below 1100px the hero is one column: copy, CTAs, then the frame. */
@media(max-width:1100px){
  .feat-hero-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .feat-hero-dia{max-width:640px}
}
/* Collapsible matrix groups: only below 760px. The summary becomes a real
   toggle with a visible chevron and a full-width target; above it the group is
   permanently open and the summary is not interactive. */
@media(max-width:760px){
  .feat-mgroup summary{cursor:pointer}
  .feat-mgroup summary::after{opacity:1}
  .feat-mgroup[open] summary::after{transform:translateY(2px) rotate(225deg)}
}
@media(max-width:980px){
  .feat-matrix,.feat-forks,.feat-ownership,.feat-ai-grid{grid-template-columns:1fr}
  .feat-hosted-card{grid-template-columns:1fr}
}
@media(max-width:640px){
  .feat-hero h1{max-width:none}
  .feat-actions .btn{justify-content:center;width:100%}
  .feat-dia{border-radius:14px}
  /* Widening these inside a scroll container was tried and reverted: the
     diagrams lay themselves out once, at mount, against the container they were
     given, so a later min-width stretches the finished layout instead of
     re-flowing it — designerFrame got TALLER (327px to 489px) and gained a
     horizontal scrollbar for nothing.
     What does pay off is dropping the diagrams that cannot survive the column
     at all. The operations console is a full desktop workspace — 1,472px of
     unreadable chrome on a phone — and the two integration flows are
     left-to-right diagrams that reflow into 500-570px vertical ribbons. Each
     one sits beside a list that already carries its content, and the hero
     Designer mock plus the live picker still give the page two real visuals. */
  .feat-run-dia,.feat-dia-pair{display:none}
  /* The row stays a row. Stacking the status chip under each name added ~26px
     to every one of the forty-odd matrix rows — over a thousand pixels of phone
     scroll to say nothing new. The name wraps; the chip stays on the first line. */
  .feat-mgroup li{align-items:flex-start;gap:10px}
  .feat-mgroup li>span:first-child{padding:8px 0}
  .cap-chip{margin-top:12px}
  .feat-fork-actions .btn{justify-content:center;width:100%}
  .feat-hosted-card{padding:22px}
  .feat-hosted-side{padding:22px}
  .feat-hosted-side .btn{width:100%}
  .feat-final .feat-actions{display:grid;grid-template-columns:1fr}
  .feat-final .feat-actions a{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.feat-hero *,.feat-section *{transition:none!important}}