/* Site surfaces: design system, hub, assumptions, landing. */

/* ---- Design system layout ---- */
.ds-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
.ds-toc { position: sticky; top: 64px; align-self: start; height: calc(100dvh - 64px - var(--pocbar-h)); overflow-y: auto; padding: var(--s-6) var(--s-4); border-right: var(--rule); }
.ds-toc ol { list-style: none; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.ds-toc a { display: flex; gap: var(--s-2); min-height: 36px; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-ctl); color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--t-15); }
.ds-toc a:hover { background: var(--surface); color: var(--ink); }
.ds-toc a span { color: var(--muted); font-variant-numeric: tabular-nums; width: 1.4em; }
.ds-sec { padding: var(--s-8) var(--s-7); border-bottom: var(--rule); }
.ds-sec.tone { background: var(--surface); }
.ds-sec > header { max-width: 72ch; margin-bottom: var(--s-6); }
.ds-sec > header h2 { margin-bottom: var(--s-2); }
.ds-sec > h3 { font-size: var(--t-18); font-family: var(--font-body); font-weight: 700; margin: var(--s-7) 0 var(--s-3); letter-spacing: 0; }
.ds-sec > header + h3 { margin-top: 0; }
.ds-note { font-size: var(--t-14); color: var(--muted); max-width: 72ch; }
.ds-layout > main, .demo-grid > *, .dens > *, .reject > * { min-width: 0; }
@media (max-width: 960px) { .ds-layout { grid-template-columns: minmax(0, 1fr); } .ds-toc { display: none; } .ds-sec { padding: var(--s-7) var(--gutter); } }
@media (max-width: 600px) { .frame-demo, .desk-demo { display: none; } }

.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-3); }
.sw { display: flex; flex-direction: column; min-height: 132px; }
.sw .chip-c { flex: 1; min-height: 84px; padding: var(--s-3); display: flex; align-items: flex-end; font-weight: 700; font-size: var(--t-14); border: var(--rule); }
.sw .meta { padding: var(--s-2) 0 0; font-size: var(--t-13); line-height: 1.4; }
.sw .meta b { display: block; font-size: var(--t-14); }
.sw .meta code { color: var(--muted); font-size: 12px; }
.ramp { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.ramp div { min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ramp small { font-size: 11px; font-weight: 700; }
@media (max-width: 700px) { .ramp { grid-template-columns: repeat(6, 1fr); } }

.spec { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-3) var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: var(--rule); }
.spec > code { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .spec { grid-template-columns: 1fr; } }

.demo { background: var(--bg); padding: var(--s-5); border: var(--rule); }
.ds-sec.tone .demo { background: var(--bg); }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.demo-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.demo-cap { font-size: var(--t-13); color: var(--muted); font-weight: 700; margin-bottom: var(--s-2); }

.reject { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.reject > div { padding: var(--s-4); background: var(--bg); border: var(--rule); }
.reject .dots { display: flex; gap: 6px; margin: var(--s-2) 0; }
.reject .dots i { width: 32px; height: 32px; border-radius: 6px; display: block; }
.reject .verdict { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-14); }
.reject .no { color: var(--danger-ink); } .reject .yes { color: var(--success-ink); }

.ico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 2px; }
.ico-grid div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--s-4) var(--s-2); background: var(--bg); font-size: 12px; color: var(--muted); text-align: center; }
.ico-grid .ico { color: var(--ink); }

.bans { list-style: none; padding: 0; }
.bans li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--rule); }
.bans li b { display: flex; gap: var(--s-2); align-items: flex-start; }
.bans li b .ico { color: var(--danger-ink); margin-top: 3px; }
.bans li span { color: var(--ink-2); }
@media (max-width: 700px) { .bans li { grid-template-columns: 1fr; gap: var(--s-1); } }

.frame-demo { --phone-fit: .66; height: calc(864px * .66 + 12px); display: flex; justify-content: center; overflow: hidden; padding-top: 4px; }
.frame-demo .phone { transform-origin: top center; }
.desk-demo { --desk-fit: .44; min-height: 0; height: calc(740px * .44 + 64px); overflow: hidden; padding: 0; border-radius: var(--r-ctl); }
.desk-demo .desktop { margin-top: var(--s-4); }
.desk-demo .menupop { transform-origin: top right; }

/* ==========================================================================
   Landing — "one long argument": each band a different shape.
   ========================================================================== */
.lp { background: var(--bg); }
.lp-nav { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-sticky); }
.lp-nav .in { display: flex; align-items: center; gap: var(--s-5); height: 76px; }
.lp-nav .links { display: flex; gap: var(--s-1); margin-left: var(--s-5); }
.lp-nav .in > .btn { margin-left: auto; }
.lp-nav .links a { padding: 8px 12px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--t-15); border-radius: var(--r-ctl); }
.lp-nav .links a:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 900px) { .lp-nav .links { display: none; } }

.fold { min-height: min(100vh, 1080px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.fold .copy { display: flex; flex-direction: column; justify-content: center; padding: 112px var(--gutter) calc(var(--pocbar-h) + var(--s-7)) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.fold .fold-col { max-width: 620px; }
.fold h1 { font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: 1.04; }
.fold .lead { margin-top: var(--s-5); font-size: var(--fs-lead); }
.fold .photo { position: relative; min-height: 100%; }
.fold .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.fold .photo figcaption { position: absolute; left: var(--s-5); bottom: calc(var(--pocbar-h) + var(--s-5)); color: #fff; font-size: var(--t-13); font-weight: 700; background: oklch(0.2 0.03 245 / .55); padding: 6px 10px; border-radius: var(--r-ctl); }
.roleband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: var(--s-7); }
.roleband a, .roleband .rb { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 96px; transition: background-color var(--dur-1) var(--ease); }
.roleband a:hover { background: var(--primary-soft-2); }
.roleband b { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-16); }
.roleband span { font-size: var(--t-14); color: var(--muted); }
.roleband .rb .duo { display: flex; gap: var(--s-2); margin-top: auto; }
.roleband .rb .duo a { min-height: 0; padding: 6px 10px; background: var(--bg); border-radius: var(--r-ctl); font-size: var(--t-14); font-weight: 700; flex-direction: row; align-items: center; gap: 6px; }
.roleband .ico { color: var(--primary); }
@media (max-width: 900px) {
  .fold { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fold .photo { order: -1; height: 22vh; min-height: 150px; }
  .fold .photo figcaption { display: none; }
  .fold .copy { padding: var(--s-4) var(--gutter) calc(var(--pocbar-h) + var(--s-6)); }
  .fold h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .fold .lead { font-size: var(--t-16); margin-top: var(--s-3); }
  .lp-nav { position: relative; background: var(--bg); }
  .lp-nav .in { height: 60px; }
  .roleband { margin-top: var(--s-4); }
  .roleband a, .roleband .rb { min-height: 64px; padding: var(--s-3); }
  .roleband a > span, .roleband .rb > span:not(.duo) { display: none; }
  .roleband b { font-size: var(--t-15); }
}

.arg { padding-block: var(--section); }
.arg h2 { font-size: var(--fs-h1); max-width: 18ch; line-height: 1.08; }
.arg .lead { margin-top: var(--s-4); max-width: 56ch; }
.arg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-8); align-items: center; }
.arg-split.rev { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 960px) { .arg-split, .arg-split.rev { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.arg .facts { display: flex; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-6); }
.arg .facts b { display: block; font-family: var(--font-display); font-size: var(--t-32); font-weight: 560; font-variant-numeric: tabular-nums; }
.arg .facts span { font-size: var(--t-14); color: var(--muted); }
.arg img.ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.arg .inset { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4); align-items: center; margin-top: var(--s-6); font-size: var(--t-14); color: var(--ink-2); }
.arg .inset img { aspect-ratio: 1; object-fit: cover; }

.arg.night { background: var(--drench); color: var(--on-drench); }
.arg.night h2, .arg.night .lead { color: var(--on-drench); }
.arg.night .lead { color: var(--on-drench-muted); }
.arg.night .nightgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.arg.night .nightgrid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.arg.night .console { background: var(--bg); padding: var(--s-5); margin-top: var(--s-5); }
.arg.night .xq { font-family: var(--font-display); font-style: italic; font-size: var(--t-18); color: var(--on-drench); margin-top: var(--s-5); }
@media (max-width: 960px) { .arg.night .nightgrid { grid-template-columns: minmax(0, 1fr); } .arg.night .nightgrid img { aspect-ratio: 16 / 9; } }

.lessonlist { list-style: none; padding: 0; counter-reset: l; margin-top: var(--s-5); }
.lessonlist li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--rule); }
.lessonlist li::before { counter-increment: l; content: counter(l, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.lessonlist a { color: var(--ink); text-decoration: none; font-weight: 700; }
.lessonlist a:hover { color: var(--primary); }

.platforms { background: var(--surface); padding-block: var(--section-tight); }
.platforms .row { display: grid; grid-template-columns: 0.42fr 1fr 1fr; gap: var(--s-5); align-items: end; margin-top: var(--s-6); }
.platforms figure { margin: 0; }
.platforms figure img { width: 100%; border: var(--rule); background: var(--bg); }
.platforms figure.ph img { border: 0; background: none; }
.platforms figcaption { margin-top: var(--s-3); font-size: var(--t-14); color: var(--ink-2); }
.platforms figcaption b { display: block; color: var(--ink); font-size: var(--t-15); }
@media (max-width: 900px) { .platforms .row { grid-template-columns: minmax(0, 1fr); } .platforms figure.ph { max-width: 280px; } }

.safe-list { list-style: none; padding: 0; margin-top: var(--s-6); border-top: var(--rule); }
.safe-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.4fr) 160px; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: var(--rule); }
.safe-list li .ico { color: var(--primary); align-self: center; }
.safe-list b { font-size: var(--t-18); }
.safe-list span { color: var(--ink-2); }
.safe-list a { font-weight: 700; text-decoration: none; white-space: nowrap; justify-self: end; }
@media (max-width: 800px) { .safe-list li { grid-template-columns: 36px minmax(0, 1fr); } .safe-list li span, .safe-list li a { grid-column: 2; } }

.closing { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; color: #fff; }
.closing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.18 0.04 245 / .88) 0%, oklch(0.18 0.04 245 / .5) 45%, oklch(0.18 0.04 245 / .1) 80%); }
.closing .in { position: relative; z-index: 1; padding-block: var(--s-9) var(--s-9); }
.closing h2 { font-size: var(--fs-h1); color: #fff; max-width: 20ch; }
.closing blockquote { margin: var(--s-4) 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); max-width: 48ch; color: oklch(0.95 0.01 240); }
.closing .cluster { margin-top: var(--s-6); }

.lp-foot { background: var(--bg); border-top: var(--rule); padding: var(--s-8) 0 calc(var(--pocbar-h) + var(--s-6)); font-size: var(--t-14); }
.lp-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); }
.lp-foot h3 { font-family: var(--font-body); font-size: var(--t-14); font-weight: 700; margin-bottom: var(--s-3); letter-spacing: 0; }
.lp-foot ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.lp-foot a { color: var(--ink-2); text-decoration: none; }
.lp-foot a:hover { color: var(--primary); }
.lp-foot .small { margin-top: var(--s-7); color: var(--muted); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 800px) { .lp-foot .cols { grid-template-columns: 1fr 1fr; } }