/* What's It Worth? — site stylesheet.
   TWO approved sources of truth, both from Claude Design standalone exports:
     mobile  — "Whats It Worth - Mobile.html"   (390x844, 520px column)
     desktop — "Whats It Worth - Homepage.html" (min-width 1280, 1360px measure)
   Below 1100px the mobile design governs. At 1100px and up the desktop design
   governs. Neither is derived from the other. Both style every node inline, so
   they are expressed here as classes; the tokens, type, colour, geometry and
   crops are taken from the exports. */

/* ---------- tokens ---------- */
:root{
  --ink:#0A0C0F;
  --ink-2:#0E1117;
  --ink-3:#111419;
  --paper:#EFE9DE;
  --paper-ink:#14171C;
  --cream:#F1EBE0;
  --blue:#5B8CFF;
  --blue-lift:#93B2FF;
  --blue-deep:#3763DB;

  --c-70:rgba(241,235,224,.70);
  --c-62:rgba(241,235,224,.62);
  --c-45:rgba(241,235,224,.45);
  --c-35:rgba(241,235,224,.35);
  --line:rgba(241,235,224,.10);
  --line-2:rgba(241,235,224,.14);
  --line-3:rgba(241,235,224,.24);
  --p-line:rgba(20,23,28,.18);
  --p-62:rgba(20,23,28,.62);
  --p-45:rgba(20,23,28,.45);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:18px;
  --col:520px;
  --wide:1360px;
  --heroh:430px;
  --shadow:0 24px 50px rgba(0,0,0,.6);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(91,140,255,.18)}
/* Must beat any class that sets display, or the `hidden` attribute silently does
   nothing. The video fallback carries .scan-stage{display:flex}, so without this
   it painted over the playing video. The old /download page documents the same
   trap; it was lost in the rewrite and cost a real defect. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--blue-lift);text-decoration:none}
a:hover{color:#B9CCFF}

/* height:auto is load-bearing. Every <img> carries width/height attributes so the
   layout cannot jump while images load; those attributes are presentational hints,
   so any rule that sets only width would leave the attribute height in force and
   the image would render STRETCHED. Deliberate crops re-set an explicit height
   together with object-fit:cover, which overrides this.
   RULE: never set an image's width without also settling its height. */
img{max-width:100%;height:auto}
video{max-width:100%}

::selection{background:var(--blue);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.shell{width:100%;max-width:var(--col);margin:0 auto;position:relative}
.pad{padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-45);margin:0 0 18px}
.kicker{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-45)}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,13vw,60px);line-height:.94;letter-spacing:-.035em}
h2{font-size:clamp(36px,10.5vw,46px);line-height:1.02}
h2 em,h1 em{font-style:italic;color:var(--blue-lift)}
.on-paper h2 em{color:inherit}
.lede{font-size:17px;line-height:1.5;color:var(--c-70);text-wrap:pretty}
p{text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:17px;border-radius:999px;font-size:16px;font-weight:500;
  border:1px solid transparent;cursor:pointer;font-family:inherit;text-align:center}
.btn-primary{background:var(--blue);color:var(--ink)}
.btn-primary:hover{background:var(--blue-lift);color:var(--ink)}
.btn-ghost{border-color:var(--line-3);color:var(--cream)}
.btn-ghost:hover{border-color:rgba(241,235,224,.55);color:var(--cream)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-mono{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line-3);color:var(--cream);padding:16px;border-radius:999px}
.btn-mono:hover{border-color:var(--blue);color:var(--blue-lift)}
.on-paper .btn-mono{border-color:rgba(20,23,28,.3);color:var(--paper-ink)}
.on-paper .btn-mono:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.btn-row{display:flex;flex-direction:column;gap:10px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:70;background:rgba(10,12,15,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px var(--pad);max-width:var(--col);margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--cream);white-space:nowrap;flex-shrink:0}
.brand:hover{color:var(--cream)}
.brand img{width:30px;height:30px;border-radius:8px;display:block;object-fit:cover}
.brand-name{font-family:var(--serif);font-size:18px;line-height:1;letter-spacing:-.015em;display:block}
.brand-note{font-family:var(--mono);font-size:7px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(241,235,224,.42);line-height:1;display:block;margin-top:3px}
.q{color:var(--blue)}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:44px;
  padding:0 12px;background:transparent;border:1px solid rgba(241,235,224,.2);border-radius:999px;cursor:pointer}
.menu-btn span{display:block;height:1px;background:var(--cream)}
.head-nav{display:none;align-items:center;gap:34px}
.head-cta{display:none}

.menu{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  background:rgba(10,12,15,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:18px}
.menu.open{display:flex}
.menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}
.menu-close{width:48px;height:44px;background:transparent;border:1px solid rgba(241,235,224,.2);
  border-radius:999px;color:var(--cream);font-size:18px;cursor:pointer;line-height:1}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:22px 0;
  border-top:1px solid var(--line-2);color:var(--cream);font-family:var(--serif);font-size:34px;font-weight:300}
.menu nav a:last-child{border-bottom:1px solid var(--line-2)}
.menu nav a:hover{color:var(--blue-lift)}
.menu nav span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,235,224,.4)}
.menu .btn{margin-top:auto}

/* ---------- sections ---------- */
section{position:relative}
/* Decorative radial glows are wider than their container on purpose. Clip on x so
   the halo still bleeds but the document never scrolls sideways. clip, not hidden:
   hidden would create a scroll container and break sticky descendants. */
.sec,.hero,.download-band{overflow-x:clip}
.sec{padding:60px 0}
.sec-line{border-top:1px solid var(--line)}
.on-paper{background:var(--paper);color:var(--paper-ink)}
.on-paper .eyebrow,.on-paper .kicker{color:rgba(20,23,28,.5)}
.on-paper p,.on-paper .lede{color:rgba(20,23,28,.66)}
.on-paper a{color:var(--blue-deep)}

/* ---------- hero ---------- */
.hero{padding:0 0 40px}
.hero-img{position:relative;height:var(--heroh);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:44% 24%;display:block;filter:saturate(.92) contrast(1.03)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.1) 34%,rgba(10,12,15,.85) 78%,#0A0C0F 100%)}
.hero-veil-2{display:none}
.hero-body{position:relative;margin-top:-14px;padding:0 var(--pad)}
.hero-eyebrow{position:absolute;left:0;right:0;top:-38px;display:flex;align-items:center;gap:10px}
.hero-eyebrow i{width:34px;height:1px;background:rgba(241,235,224,.4);display:block;flex:0 0 auto}
.hero-eyebrow span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,235,224,.6)}
.hero-body h1{margin:0 0 18px}
.hero-body .lede{margin:0 0 26px}
.hero-device{display:none}
.hero-figs{display:none}

/* mobile figure pair below the hero (mobile export) */
.figpair{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:end;padding:40px var(--pad) 0}
.device{border-radius:22px;padding:5px;background:linear-gradient(180deg,#2A2F38,#0E1116);box-shadow:0 30px 60px rgba(0,0,0,.7)}
.device img{width:100%;display:block;border-radius:18px}
.figline{border-top:1px solid var(--line-3);padding-top:8px}
.figline+.figline{margin-top:16px}
.figline.hi{border-top-color:rgba(91,140,255,.5)}
.figline.hi .kicker{color:var(--blue-lift)}
.figline .t{font-family:var(--serif);font-size:16px;color:rgba(241,235,224,.86);margin-top:3px;line-height:1.25}

/* ---------- editorial section scaffold ----------
   MOBILE IS PLAIN FLOW. The mobile export is sequential: heading, then figure,
   then steps, one after another. So .sec-grid is NOT a grid here and the children
   carry NO grid-area.

   This is where the mobile layout was destroyed once already. `display:grid` and
   the `grid-area:head/lede/fig/steps` assignments were written in this base block
   while `grid-template-areas` was only ever declared inside the desktop media
   query. With no named areas to resolve against, `grid-area:head` degrades to
   line names that do not exist, every child gets auto-placed into the same
   implicit cell, and all four stack on top of each other. Zero overflow, zero
   console errors, completely unreadable page.

   RULE: every grid-area and every display:grid for these sections lives inside
   the min-width:1100px block. Nothing about desktop placement belongs here. */
.sec-grid{display:block}
.sec-lede{margin:0 0 28px}
.sec-fig{position:relative}
.steps{display:flex;flex-direction:column}

.steps .row{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--line-2)}
.steps .row:last-child{border-bottom:1px solid var(--line-2)}
.on-paper .steps .row{border-color:rgba(20,23,28,.16)}
.steps .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--c-45);padding-top:5px}
.on-paper .steps .n{color:var(--p-45)}
.steps .row.hi .n{color:var(--blue-lift)}
.on-paper .steps .row.hi .n{color:var(--blue-deep)}
.steps h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;margin:0 0 5px}
.steps p{margin:0;font-size:15px;line-height:1.55;color:rgba(241,235,224,.6)}
.on-paper .steps p{color:var(--p-62)}

.centre-fig{display:flex;justify-content:center;margin-bottom:28px;position:relative}
.centre-fig .glow{position:absolute;inset:6% -10% 6% -10%;background:radial-gradient(60% 50% at 50% 40%,rgba(91,140,255,.16),rgba(10,12,15,0) 70%)}
.centre-fig .device{position:relative;width:232px}
.dive .centre-fig .device{width:250px}
.fig-cap{text-align:center;margin-bottom:30px}
.fig-cap .t{font-family:var(--serif);font-size:16px;color:rgba(241,235,224,.85);margin-top:3px}
.on-paper .fig-cap .t{color:var(--paper-ink)}

/* ---------- rails ---------- */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scroll-padding-left:var(--pad);
  padding-left:var(--pad);padding-right:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start}
/* The last card gets trailing space so a swiped rail ends cleanly instead of
   looking clipped at the viewport edge. */
.rail::after{content:"";flex:0 0 var(--pad);align-self:stretch}
.rail-note{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-35);padding:14px var(--pad) 0}

.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad) 18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 16px;border-radius:999px;border:1px solid rgba(241,235,224,.2);
  color:var(--c-70);background:transparent;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.chips-note{display:none}

/* ---------- object shelves ---------- */
.shelves{display:block}
.railwrap{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-padding-left:var(--pad);padding:10px var(--pad) 22px}
.railwrap::-webkit-scrollbar{display:none}
.railwrap::after{content:"";flex:0 0 4px}
.railwrap+.railwrap{padding-top:0}
/* the mobile export hangs the first shelf from its baseline and stands the
   second one on its top edge, so the two rails read as different shelves */
.railwrap:nth-of-type(1){align-items:flex-end}
.railwrap:nth-of-type(2){align-items:flex-start}
.col{display:contents}          /* mobile: objects flow straight into the rail */
.obj{flex:0 0 auto;scroll-snap-align:start;width:230px}
.obj img{width:100%;display:block;box-shadow:var(--shadow);background:#111}
.obj .meta{margin-top:10px;border-top:1px solid rgba(241,235,224,.2);padding-top:7px}
.obj .t{font-family:var(--serif);font-size:16px;line-height:1.25;margin-top:3px;color:var(--cream)}
.obj.portrait img{height:300px;object-fit:cover}
.obj.landscape img{height:200px;object-fit:cover}
.obj.square img{height:250px;object-fit:cover}
a.obj:hover .t{color:var(--blue-lift)}

/* ---------- four rules ---------- */
.rules{display:flex;gap:12px;overflow-x:auto;padding:40px var(--pad) 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.rules::-webkit-scrollbar{display:none}
.rules::after{content:"";flex:0 0 4px}
.rule-card{flex:0 0 auto;width:225px;background:var(--ink-3);border:1px solid var(--line-2);padding:22px;scroll-snap-align:start}
.rule-card .kicker{color:var(--blue-lift)}
.rule-card .t{font-family:var(--serif);font-size:21px;line-height:1.25;margin-top:10px}

/* The mobile export runs this photograph edge to edge: the section has no
   horizontal padding and each text block carries its own. So the container is
   unpadded and the copy is padded individually. */
.value .sec-head,.value .sec-lede{padding-left:var(--pad);padding-right:var(--pad)}
/* the value section's lead photograph */
.value-fig{position:relative;margin:26px 0}
.value-fig img{width:100%;height:360px;object-fit:cover;object-position:50% 26%;display:block}
.value-fig .plate{position:absolute;left:var(--pad);right:var(--pad);bottom:-22px;background:var(--ink);
  border:1px solid rgba(241,235,224,.16);padding:16px 18px}
.value-fig .plate .t{font-family:var(--serif);font-size:18px;line-height:1.3;margin-top:5px}

/* ---------- the scan video ---------- */
/* padding-* only: `padding` shorthand would wipe .pad's gutters at every width. */
.watch{padding-top:60px;padding-bottom:60px;border-top:1px solid var(--line);scroll-margin-top:76px}
.watch-panel{position:relative;display:block}
.watch-stage{position:relative;background:#05070A;border:1px solid var(--line-2);padding:10px}
.scan-head{margin-bottom:22px}
.scan-head h2{margin-bottom:14px}
.scan-stage{position:relative;overflow:hidden;background:#05070A;min-height:420px;display:flex;align-items:center;justify-content:center}
.scan-stage video{width:100%;max-height:520px;display:block;object-fit:contain}
.scan-label{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,235,224,.72);background:rgba(5,7,10,.65);padding:7px 10px;border:1px solid var(--line-2)}
.scan-label i{width:6px;height:6px;border-radius:999px;background:var(--blue);display:block;animation:wiwPulse 2.2s ease-in-out infinite}
.scan-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 4px;flex-wrap:wrap}
.scan-time{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,235,224,.6)}
.scan-cta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--blue);padding:16px 18px;border-radius:999px;cursor:pointer;
  white-space:nowrap;border:0;font-weight:500}
.scan-cta:hover{background:var(--blue-lift)}
.scan-chapters{display:flex;flex-direction:column;margin-top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--c-45)}
.scan-chapters div{display:flex;justify-content:space-between;border-top:1px solid rgba(241,235,224,.12);padding:12px 0}
.scan-chapters div:last-child{border-bottom:1px solid rgba(241,235,224,.12);color:var(--blue-lift)}

/* ---------- exhibit / stories ---------- */
.stories-grid{display:block}
.exhibit{display:block;background:var(--ink-2);border:1px solid var(--line-2);color:var(--cream);
  overflow:hidden;margin:0 var(--pad) 18px}
.exhibit:hover{border-color:rgba(91,140,255,.6);color:var(--cream)}
.exhibit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;
  border-bottom:1px solid rgba(241,235,224,.12);font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(241,235,224,.5)}
.exhibit-head .no{color:var(--blue-lift)}
.exhibit-body{position:relative;padding:26px 20px 24px}
.exhibit-body .glow{position:absolute;right:-60px;top:-40px;width:260px;height:260px;
  background:radial-gradient(circle at 50% 50%,rgba(91,140,255,.18),rgba(10,12,15,0) 70%)}
.exhibit-title{font-family:var(--serif);font-weight:300;font-size:clamp(30px,8vw,36px);line-height:1.02;
  letter-spacing:-.025em;text-wrap:balance;margin:0 0 20px;position:relative}
.exhibit-lead{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:end;position:relative;margin-bottom:20px}
.exhibit-lead .device{transform:rotate(-2.2deg);border-radius:16px}
.exhibit-lead .device img{border-radius:12px}
.exhibit-lead .cap{border-top:1px solid rgba(241,235,224,.18);padding-top:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,235,224,.4)}
.exhibit-body>p{position:relative;margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--c-62)}
.contents{position:relative;display:flex;flex-direction:column}
.contents div{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:10px 0;
  border-top:1px solid rgba(241,235,224,.12);font-size:14px;color:var(--c-70)}
.contents div:last-child{border-bottom:1px solid rgba(241,235,224,.12)}
.contents .r{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(241,235,224,.4);padding-top:3px}
.contents div:last-child .r{color:var(--blue-lift)}
.enter{position:relative;margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-lift)}

.story-col{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--pad) 18px;scroll-padding-left:var(--pad)}
.story-col::-webkit-scrollbar{display:none}
.story-col::after{content:"";flex:0 0 4px}
.story-card{flex:0 0 auto;scroll-snap-align:start;width:265px;background:var(--ink-3);
  border:1px solid rgba(241,235,224,.12);color:var(--cream);overflow:hidden;display:block}
.story-card:hover{border-color:rgba(91,140,255,.6);color:var(--cream)}
.story-card img{width:100%;height:180px;object-fit:cover;display:block}
.story-card .in{padding:20px}
.story-card .t{font-family:var(--serif);font-size:25px;line-height:1.14;margin:10px 0 9px}
.story-card p{margin:0;font-size:14px;line-height:1.55;color:rgba(241,235,224,.6)}
.story-card.preparing{cursor:default}
.story-card.preparing:hover{border-color:rgba(241,235,224,.12)}

/* ---------- guides ---------- */
.guide-list{display:flex;flex-direction:column}
.guide-list a{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:18px 0;
  border-top:1px solid var(--p-line);color:var(--paper-ink)}
.guide-list a:last-child{border-bottom:1px solid var(--p-line)}
.guide-list a:hover{color:var(--blue-deep)}
.guide-list .n{font-family:var(--mono);font-size:10px;color:rgba(20,23,28,.4);padding-top:6px}
.guide-list .t{display:block;font-family:var(--serif);font-size:22px;line-height:1.22}
.guide-list .s{display:block;grid-column:2;margin-top:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(20,23,28,.4)}

/* ---------- pocket cards ---------- */
.pockets{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--pad) 8px;scroll-padding-left:var(--pad)}
.pockets::-webkit-scrollbar{display:none}
.pockets::after{content:"";flex:0 0 4px}
.pocket{flex:0 0 auto;scroll-snap-align:start;width:250px}
/* The two exports deliberately compose these cards differently: mobile shows an
   image with a caption, desktop shows bespoke in-phone screens. Both are in the
   markup and each breakpoint shows the set its approved export specifies. */
.pocket-d{display:none}
.pocket .in{position:relative;overflow:hidden;background:var(--ink);border:1px solid rgba(241,235,224,.12)}
.pocket img{width:100%;height:330px;object-fit:cover;display:block}
/* crop positions from the exports — without these the default 50% 50% lands on a
   meaningless mid-conversation slice of a tall app screenshot */
.pocket:nth-child(1) img{object-position:50% 10%}
.pocket:nth-child(2) img{object-position:50% 34%}
.pocket:nth-child(3) img{object-position:50% 12%}
/* The caption must always sit on its own ground. The export's gradient was sized
   for one line; a two-line title spilled onto the screenshot and became unreadable.
   Same treatment, taller ramp, and the caption is padded to clear the card edge. */
.pocket .cap{position:absolute;left:0;right:0;bottom:0;padding:52px 16px 14px;
  background:linear-gradient(0deg,rgba(10,12,15,.97) 0%,rgba(10,12,15,.95) 34%,
    rgba(10,12,15,.86) 58%,rgba(10,12,15,.45) 82%,rgba(10,12,15,0) 100%)}
.pocket .cap .t{font-family:var(--serif);font-size:19px;line-height:1.2;margin-top:4px;color:var(--cream)}

/* ---------- download band ---------- */
.download-band{position:relative;padding:70px var(--pad) 90px;overflow:hidden;text-align:center;border-top:1px solid var(--line)}
.download-band .glow{position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 24%,rgba(91,140,255,.16),rgba(10,12,15,0) 70%)}
.download-band .in{position:relative;max-width:var(--col);margin:0 auto}
.download-band img.icon{width:76px;height:76px;border-radius:19px;display:block;margin:0 auto 28px;box-shadow:var(--shadow)}
.download-band p{font-size:17px;line-height:1.6;color:rgba(241,235,224,.68);margin:0 auto 30px;max-width:340px}

/* ---------- footer ---------- */
.site-foot{padding:34px var(--pad) 46px;border-top:1px solid var(--line)}
.site-foot .in{max-width:var(--col);margin:0 auto;display:flex;flex-direction:column;gap:22px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:24px;height:24px;border-radius:7px;display:block}
.foot-brand span{font-family:var(--serif);font-size:18px}
.foot-groups{display:flex;flex-wrap:wrap;gap:26px 48px}
.foot-group{display:flex;flex-direction:column;gap:10px}
.foot-group .h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,235,224,.35)}
.foot-group a{font-size:14px;color:var(--c-70)}
.foot-group a:hover{color:var(--cream)}
.foot-fine{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,235,224,.3);line-height:1.9}

/* ---------- article pages ---------- */
.page-head{padding:56px 0 34px}
.page-head h1{font-size:clamp(40px,11vw,56px);margin:0 0 16px}
.page-head .lede{margin:0}
.article{font-size:17px;line-height:1.72;color:rgba(241,235,224,.82)}
.article h2{font-size:clamp(26px,6.5vw,32px);line-height:1.15;margin:44px 0 14px;color:var(--cream)}
.article h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:30px 0 10px}
.article p{margin:0 0 18px}
.article ul,.article ol{margin:0 0 20px;padding-left:22px}
.article li{margin:0 0 9px}
.article strong{color:var(--cream);font-weight:600}
.article a{border-bottom:1px solid rgba(147,178,255,.4)}
.article figure{margin:30px 0}
.article figure img{width:100%;height:auto;display:block;border:1px solid var(--line-2)}
.article figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-45);margin-top:10px;line-height:1.7}
.article blockquote{margin:26px 0;padding:18px 20px;background:var(--ink-3);border-left:2px solid var(--blue)}
.article blockquote p:last-child{margin:0}
.article table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.article th,.article td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.article th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-45);font-weight:400}
.article .callout,.article .card{background:var(--ink-3);border:1px solid var(--line-2);padding:20px;margin:26px 0}
.article .callout p:last-child,.article .card p:last-child{margin:0}
.scroll-x{overflow-x:auto}

.post-meta{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-45);margin:0 0 16px}
.post-foot{margin-top:52px;padding-top:30px;border-top:1px solid var(--line-2)}

.index-list{display:flex;flex-direction:column;margin-top:8px}
.index-list a{display:block;padding:26px 0;border-top:1px solid var(--line-2);color:var(--cream)}
.index-list a:last-child{border-bottom:1px solid var(--line-2)}
.index-list a:hover{color:var(--cream)}
.index-list a:hover .t{color:var(--blue-lift)}
.index-list .t{font-family:var(--serif);font-weight:300;font-size:clamp(26px,7vw,32px);line-height:1.1;margin:8px 0 8px}
.index-list p{margin:0;font-size:15px;line-height:1.6;color:var(--c-62)}

.find-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;margin-top:26px}
.find-grid .obj{width:auto}
.find-grid .obj img{height:210px;object-fit:cover}

/* ---------- animation ---------- */
@keyframes wiwPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes wiwMarkIn{0%{transform:scale(.86);opacity:0;filter:blur(6px)}42%{transform:scale(1);opacity:1;filter:blur(0)}72%{transform:scale(1.02);opacity:1}100%{transform:scale(1.14);opacity:0;filter:blur(2px)}}
@keyframes wiwRingOut{0%{transform:scale(.6);opacity:0}35%{opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes wiwVeilOut{0%,58%{opacity:1}100%{opacity:0}}
#wiw-intro{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;
  justify-content:center;pointer-events:none;animation:wiwVeilOut 1.05s cubic-bezier(.4,0,.2,1) forwards}
#wiw-intro .w{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center}
#wiw-intro .ring{position:absolute;inset:-16px;border:1px solid rgba(91,140,255,.7);border-radius:50%;
  animation:wiwRingOut 1.05s cubic-bezier(.2,.7,.2,1) forwards}
#wiw-intro img{width:84px;height:84px;border-radius:21px;display:block;
  animation:wiwMarkIn 1.05s cubic-bezier(.3,.05,.2,1) forwards}
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  #wiw-intro{display:none}
}

/* ---------- tablet: the mobile design, more room ---------- */
@media (min-width:680px) and (max-width:1099px){
  :root{--pad:32px;--col:640px;--heroh:520px}
  .find-grid{grid-template-columns:repeat(3,1fr)}
  .btn-row{flex-direction:row}
  .btn-row .btn{flex:1}
  .download-band .btn-row{max-width:440px;margin:0 auto}
}

/* =========================================================================
   DESKTOP — from "Whats It Worth - Homepage.html". 1360px measure, 44px
   gutters, 130-150px section rhythm. This is a separate approved design, not
   a widened phone. Geometry, type sizes and image crops are taken from it.
   ========================================================================= */
@media (min-width:1100px){
  :root{--pad:44px;--col:var(--wide)}
  body{font-size:17px}

  /* header */
  .site-head{background:rgba(10,12,15,.78)}
  .site-head .inner{max-width:var(--wide);padding:16px var(--pad);gap:32px}
  .brand img{width:34px;height:34px;border-radius:9px}
  .brand-name{font-size:22px}
  .brand-note{font-size:8px;letter-spacing:.28em}
  .menu-btn{display:none}
  .head-nav{display:flex}
  .head-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,235,224,.62)}
  .head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--cream)}
  .head-cta{display:inline-flex;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;padding:11px 20px;font-weight:400}

  /* hero: portrait bleeds from 42% across, copy left, phone floating right */
  .hero{min-height:840px;display:grid;grid-template-columns:minmax(520px,1fr) 1fr;
    align-items:center;padding:0;overflow:hidden}
  .hero-img{position:absolute;inset:0 0 0 42%;height:auto}
  .hero-veil{background:linear-gradient(90deg,#0A0C0F 0%,rgba(10,12,15,.92) 22%,rgba(10,12,15,.30) 58%,rgba(10,12,15,.55) 100%)}
  .hero-veil-2{display:block;position:absolute;inset:0;background:linear-gradient(0deg,#0A0C0F 0%,rgba(10,12,15,0) 34%)}
  .hero-img img{object-position:38% 30%}
  .hero-body{position:relative;z-index:3;margin:0;padding:120px 0 120px var(--pad);max-width:760px}
  .hero-eyebrow{position:static;margin-bottom:34px}
  .hero-eyebrow i{width:56px;background:rgba(241,235,224,.35)}
  .hero-eyebrow span{font-size:11px;color:rgba(241,235,224,.55)}
  .hero-body h1{font-size:112px;line-height:.94;margin:0 0 30px}
  .hero-body .lede{font-size:21px;max-width:520px;margin:0 0 40px}
  .hero-body .btn-row{flex-direction:row;gap:18px}
  .hero-body .btn{padding:16px 28px;font-size:15px;flex:0 0 auto}
  .hero-device{display:block;position:relative;z-index:4;justify-self:center;margin:0 40px;
    width:296px;border-radius:38px;padding:8px;background:linear-gradient(180deg,#2A2F38,#0E1116);
    box-shadow:0 60px 120px rgba(0,0,0,.72),0 0 0 1px rgba(241,235,224,.10)}
  .hero-device img{width:100%;display:block;border-radius:31px}
  .hero-figs{display:flex;position:absolute;left:var(--pad);bottom:44px;z-index:5;gap:44px;align-items:flex-end}
  .hero-figs .figline{margin:0;min-width:200px;padding-top:10px}
  .hero-figs .figline .kicker{font-size:10px;letter-spacing:.2em}
  .hero-figs .figline .t{font-size:17px;margin-top:4px}
  .figpair{display:none}          /* desktop carries these inside the hero */

  /* section rhythm */
  .sec{padding:130px 0}
  .sec .shell{max-width:var(--wide)}
  h2{font-size:68px;line-height:1.02}

  /* 01 — some things need more than a guess */
  .sec-grid{display:grid;gap:0;max-width:var(--wide);margin:0 auto;column-gap:100px}
  .sec-head{grid-area:head}
  .sec-lede{grid-area:lede}
  .sec-fig{grid-area:fig}
  .steps{grid-area:steps}
  .how{grid-template-columns:1.05fr .95fr;grid-template-areas:"head fig" "steps fig";align-items:start}
  .how .sec-fig{align-self:center}
  .how .sec-head{margin-bottom:0}
  .how .sec-head .eyebrow{font-size:11px;margin-bottom:28px}
  .how .sec-head .lede{font-size:19px;max-width:520px;margin:0 0 48px}
  .how .centre-fig{margin:0}
  .how .centre-fig .glow{inset:8% -6% 8% -6%}
  .how .centre-fig .device{width:330px;border-radius:42px;padding:9px;
    box-shadow:0 50px 110px rgba(0,0,0,.7),0 0 0 1px rgba(241,235,224,.10)}
  .how .centre-fig .device img{border-radius:34px}
  .how .fig-cap{position:absolute;right:-8px;top:16%;width:170px;text-align:right;margin:0}
  .steps .row{grid-template-columns:56px 1fr;gap:24px;padding:26px 0}
  .steps h3{font-size:24px}
  .steps p{font-size:16px}

  /* 02 — dive deeper */
  .dive{grid-template-columns:1fr 380px;grid-template-areas:"head lede" "steps fig";
    align-items:center;column-gap:80px}
  .dive .sec-head{align-self:end;margin-bottom:80px}
  .dive .sec-head h2{font-size:76px;line-height:1;max-width:900px}
  .dive .sec-lede{align-self:end;margin:0 0 80px;font-size:18px;max-width:330px}
  .dive .steps .row{grid-template-columns:64px 1fr;gap:28px;padding:30px 0}
  .dive .steps h3{font-size:30px;line-height:1.2}
  .dive .steps p{font-size:17px;max-width:520px;margin-top:8px}
  .dive .sec-fig{align-self:center}
  .dive .centre-fig{margin:0;display:block}
  .dive .centre-fig .device{width:100%;border-radius:40px;padding:9px;
    background:linear-gradient(180deg,#3A3F49,#15181D);box-shadow:0 40px 90px rgba(20,23,28,.35)}
  .dive .centre-fig .device img{border-radius:32px}
  .dive .fig-cap{position:absolute;left:0;bottom:-74px;width:280px;text-align:left;
    background:var(--paper);border-top:1px solid rgba(20,23,28,.3);padding-top:9px;margin:0}

  /* 03 — the object collage */
  .finds-head{max-width:var(--wide);margin:0 auto 60px;padding:0 var(--pad);
    display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
  .finds-head h2{font-size:72px}
  .finds-head .lede{max-width:340px;font-size:17px;margin:0 0 8px}
  .chips{max-width:var(--wide);margin:0 auto 34px;padding:0 var(--pad);
    display:flex;flex-wrap:wrap;overflow:visible;gap:10px;align-items:center}
  .chip{padding:9px 16px}
  .chips-note{display:inline;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(241,235,224,.3);margin-left:8px}
  .shelves{max-width:1500px;margin:0 auto;padding:0 40px;
    display:grid;grid-template-columns:.95fr 1.05fr 1fr 1.35fr .85fr 1fr;gap:24px;align-items:start}
  /* display:contents hoists the columns into the grid, but a ::after pseudo still
     generates its own box and becomes a 7th and 8th grid item, wrapping the six
     columns onto two rows. The mobile trailing-peek spacer must be switched off. */
  .railwrap{display:contents}
  .railwrap::after{content:none}
  /* stagger comes from --stagger on each column, set by bin/build.py. nth-child
     cannot be used: the columns sit inside display:contents rail wrappers, so the
     counter restarts and the offsets repeat instead of running across all six. */
  .col{display:flex;flex-direction:column;gap:44px;padding-top:var(--stagger,0px)}
  .obj{width:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .obj img{box-shadow:0 34px 70px rgba(0,0,0,.62)}
  .obj.portrait img{height:300px}
  .obj.landscape img{height:215px}
  .obj.square img{height:250px}
  .obj .meta{margin-top:11px}
  .obj .kicker{font-size:10px}
  .obj .t{font-size:15px;line-height:1.3}
  /* the pinned-to-a-board tilt, per card, from --rot */
  .obj{transform:rotate(var(--rot,0deg))}
  .obj:hover{transform:rotate(var(--rot,0deg)) translateY(-14px) scale(1.04);z-index:20}
  .finds-foot{max-width:1500px;margin:70px auto 0;padding:0 40px;display:flex;
    align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .finds-foot .btn-mono{padding:14px 24px}
  .rail-note{border-top:1px solid rgba(241,235,224,.2);padding:12px 0 0;text-align:right;line-height:2;font-size:10px}

  /* 04 — what it's really worth */
  .value{background:linear-gradient(180deg,#0A0C0F,#0D1015);border-top:1px solid var(--line);padding:130px 0}
  .value .sec-grid{grid-template-columns:.85fr 1.15fr;column-gap:90px;align-items:center;
    grid-template-areas:"fig head" "fig lede" "fig rules";padding:0 var(--pad)}
  .value .sec-head,.value .sec-lede{padding-left:0;padding-right:0}
  .value .sec-fig{grid-area:fig;align-self:center}
  .value-fig{margin:0}
  .value-fig img{height:560px;object-position:50% 22%;box-shadow:0 50px 100px rgba(0,0,0,.6)}
  .value-fig .plate{left:auto;right:-40px;bottom:-28px;max-width:260px;padding:18px 22px}
  .value .sec-head{align-self:end}
  .value .sec-head .eyebrow{font-size:11px;margin-bottom:26px}
  .value .sec-head h2{margin-bottom:26px}
  .value .sec-lede{font-size:19px;max-width:560px;margin:0 0 44px}
  .swipe-note{display:none}
  .rules{grid-area:rules;display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--line-2);border:1px solid var(--line-2);overflow:visible;padding:0}
  .rules::after{display:none}
  .rule-card{width:auto;background:var(--ink);border:0;padding:26px}
  .rule-card .kicker{font-size:10px}
  .rule-card .t{font-size:22px;margin-top:10px}

  /* 05 — watch it think: video left, panel right, inside one frame */
  /* padding-* only: the `padding` shorthand would also clear .pad's gutters
     and widen the panel by 8px, which is a desktop change. */
  .watch{padding-top:0;padding-bottom:0;border-top:0;scroll-margin-top:90px}
  .watch-stage{border:0;padding:0;background:#05070A}
  .watch-panel{max-width:var(--wide);margin:0 auto;padding:14px;background:var(--ink);
    border:1px solid var(--line-2);
    display:grid;grid-template-columns:1fr 400px;gap:14px;align-items:stretch;
    grid-template-areas:"stage head" "stage chapters"}
  .watch-stage{grid-area:stage;position:relative;min-height:560px;background:#05070A;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .scan-stage{min-height:560px;width:100%}
  .scan-stage video{height:560px;max-height:none;width:auto;max-width:100%}
  .scan-label{left:24px;top:24px;font-size:10px;padding:8px 12px}
  .scan-head{grid-area:head;padding:38px 34px 0;border-left:1px solid rgba(241,235,224,.12);margin:0}
  .scan-head .eyebrow{font-size:10px;margin-bottom:18px}
  .scan-head h2{font-size:38px;line-height:1.08;margin:0 0 18px}
  .scan-head .lede{font-size:16px;color:var(--c-62)}
  .scan-chapters{grid-area:chapters;padding:0 34px 38px;border-left:1px solid rgba(241,235,224,.12);
    margin:0;justify-content:flex-end;font-size:11px;gap:10px}
  .scan-chapters div{padding:10px 0 0;border-bottom:0 !important}
  /* the transport sits over the video, as in the desktop export */
  .scan-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 24px;
    background:linear-gradient(0deg,rgba(5,7,10,.9),rgba(5,7,10,0));flex-wrap:nowrap}
  .scan-time{font-size:10px}
  .scan-cta{padding:10px 18px}

  /* 06 — stories */
  .stories-head{max-width:var(--wide);margin:0 auto 64px;padding:0 var(--pad);
    display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .stories-head h2{font-size:72px}
  .stories-head .eyebrow{margin:0 0 10px;font-size:11px}
  .stories-grid{max-width:var(--wide);margin:0 auto;padding:0 var(--pad);
    display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:stretch}
  .exhibit{margin:0;min-height:660px;display:flex;flex-direction:column}
  .exhibit-head{padding:16px 24px;font-size:10px;letter-spacing:.2em}
  .exhibit-body{flex:1;display:grid;grid-template-columns:1fr 230px;gap:34px;padding:44px 40px 40px;align-items:start}
  .exhibit-body .glow{right:-40px;top:-30px;width:340px;height:340px}
  .exhibit-title{font-size:52px;line-height:1.02;letter-spacing:-.02em;margin-bottom:18px}
  .exhibit-lead{display:block;grid-column:2;grid-row:1;margin:0}
  .exhibit-lead .device{border-radius:22px;padding:6px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
  .exhibit-lead .device img{border-radius:17px}
  .exhibit-lead .cap{margin-top:14px;font-size:10px}
  .exhibit-copy{grid-column:1;grid-row:1;position:relative}
  .exhibit-copy>p{margin:0 0 30px;font-size:17px;max-width:430px;color:var(--c-62)}
  .contents div{grid-template-columns:38px 1fr;gap:14px;padding:11px 0;font-size:15px}
  .enter{margin-top:30px;font-size:11px}
  .story-col{display:grid;grid-template-rows:1fr 1fr;gap:36px;overflow:visible;padding:0}
  .story-col::after{display:none}
  .story-card{width:auto;display:grid;grid-template-columns:180px 1fr;overflow:hidden}
  .story-card img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  .story-card .in{padding:30px 30px 30px 32px;display:flex;flex-direction:column;justify-content:center}
  .story-card .kicker{font-size:10px;letter-spacing:.2em;margin-bottom:12px}
  .story-card .t{font-size:28px;line-height:1.14;margin:0 0 10px}
  .story-card p{font-size:15px}
  .stories-foot{max-width:var(--wide);margin:44px auto 0;padding:0 var(--pad);display:flex;justify-content:flex-end}

  /* 07 — guides */
  .guides-grid{max-width:var(--wide);margin:0 auto;padding:0 var(--pad);
    display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
  .guides-grid h2{font-size:66px;margin-bottom:24px}
  .guides-grid .lede{font-size:18px;max-width:420px;margin:0 0 34px}
  .guides-grid .btn-mono{padding:14px 24px;margin:0}
  .guide-list a{grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;padding:22px 0}
  .guide-list .n{font-size:11px;padding:0}
  .guide-list .t{font-size:27px}
  .guide-list .s{grid-column:auto;margin:0;white-space:nowrap}

  /* 08 — in your hand */
  .pockets-head{max-width:var(--wide);margin:0 auto 70px;padding:0 var(--pad);
    display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .pockets-head h2{font-size:60px;line-height:1.03}
  .pockets-head .lede{max-width:320px;font-size:16px;margin:0 0 8px}
  .pockets{max-width:var(--wide);margin:0 auto;padding:0 var(--pad);display:flex;gap:44px;
    justify-content:center;flex-wrap:wrap;overflow:visible}
  .pockets::after{display:none}
  .pocket{width:300px;border-radius:34px;padding:8px;
    background:linear-gradient(180deg,#2A2F38,#0E1116);box-shadow:0 40px 90px rgba(0,0,0,.6)}
  .pocket .in{border-radius:27px;height:620px;border:0}
  .pocket img{height:100%}
  .pocket:nth-child(1) img{object-position:50% 12%}
  .pocket .cap{padding:52px 18px 16px}
  .pocket-m{display:none}
  .pocket-d{display:block}

  /* card 2 — the recent-finds screen */
  .pocket .in.screen-finds{background:var(--ink);padding:20px;display:flex;flex-direction:column;gap:16px}
  .pocket .screen-finds>.kicker{font-size:9px;letter-spacing:.2em}
  .screen-list{display:flex;flex-direction:column;gap:16px;overflow:hidden}
  .pocket .screen-list .row img{width:100%;height:var(--h);object-fit:cover;display:block;box-shadow:none;object-position:50% 35%}
  .screen-list .row .m{border-top:1px solid rgba(241,235,224,.18);margin-top:8px;padding-top:6px}
  .screen-list .row .kicker{font-size:9px;letter-spacing:.16em}
  .screen-list .row .t{font-family:var(--serif);font-size:16px;margin-top:2px;line-height:1.25}

  /* card 3 — the story screen, on paper */
  .pocket .in.screen-story{background:var(--paper);color:var(--paper-ink);padding:22px;display:flex;flex-direction:column}
  .pocket .screen-story>.kicker{font-size:9px;letter-spacing:.2em;color:rgba(20,23,28,.5)}
  .pocket .screen-story .sh{font-family:var(--serif);font-size:32px;line-height:1.08;margin:14px 0 12px}
  .pocket .screen-story p{margin:0 0 16px;font-size:13px;line-height:1.6;color:rgba(20,23,28,.66)}
  .pocket .screen-story img{width:100%;height:230px;object-fit:cover;object-position:50% 18%;display:block;box-shadow:none}
  .pocket .screen-story .sf{border-top:1px solid rgba(20,23,28,.25);margin-top:12px;padding-top:8px;
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,23,28,.5)}

  /* download + footer */
  .download-band{padding:150px var(--pad) 130px}
  .download-band .glow{background:radial-gradient(70% 60% at 50% 30%,rgba(91,140,255,.14),rgba(10,12,15,0) 70%)}
  .download-band .in{max-width:900px}
  .download-band img.icon{width:88px;height:88px;border-radius:22px;margin-bottom:40px}
  .download-band h2{font-size:88px;line-height:.98;margin-bottom:24px}
  .download-band p{font-size:19px;max-width:520px;margin-bottom:44px}
  .download-band .btn-row{flex-direction:row;gap:16px;justify-content:center}
  .download-band .btn{flex:0 0 auto;padding:17px 30px;font-size:15px}

  .site-foot{padding:56px var(--pad) 70px;border-top:1px solid rgba(241,235,224,.12)}
  .site-foot .in{max-width:var(--wide);flex-direction:row;align-items:flex-start;
    justify-content:space-between;gap:60px;flex-wrap:wrap}
  .foot-left{max-width:300px}
  .foot-groups{gap:70px}
  .foot-fine{margin-top:14px;font-family:var(--sans);font-size:14px;letter-spacing:0;
    text-transform:none;color:rgba(241,235,224,.45);line-height:1.6}

  /* article pages keep a reading measure */
  .article,.page-head .lede,.page-head h1,.post-meta{max-width:34em}
  .article{font-size:18px}
  .page-head{padding:80px 0 44px}
  .index-list .t{font-size:36px}
  .index-list p{max-width:56em}
  .find-grid{grid-template-columns:repeat(4,1fr);gap:26px 22px}
  .find-grid .obj{transform:none}
  .find-grid .obj:hover{transform:translateY(-6px)}
  .find-grid .obj img{height:280px}
}

@media (min-width:1500px){
  .hero-body h1{font-size:112px}
}