/* ===================================================================
   STILLS — homepage, beta edition
   Paper ground, ink type, one orange. The launch adds two things to the
   original arrangement: a strip of film leader across the top carrying
   the status of the product, and a dark act in the middle — the honest
   bit and then the pictures — between the paper and the orange close.

   Order of grounds: leader (ink) → hero (paper) → build (paper) →
   steps (paper) → deliberate + photos (ink) → closing (orange) →
   footer (ink).

   Pairs with fonts.css. Subpages use pages.css, same tokens.

   GLYPH WARNING (see fonts.css): · © § … • ° ½ render blank in Heming.
   Use an em dash, a CSS-drawn dot, or plain words.
   =================================================================== */

:root{
  --paper:#f2efe7;
  --ink:#1d1d1b;
  --orange:#ef5b27;
  --line:rgba(29,29,27,.18);
  --pad:clamp(20px,4.2vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* The leader is a fixed height so the absolutely-positioned topbar can be
     told where to sit without measuring anything at runtime. Change it here
     and the header follows. */
  --leader-h:40px;
}

*{box-sizing:border-box}
/* The one easing on the page's scroll position, and the browser owns it.
   `smooth` here only affects anchor jumps and scrollIntoView — a wheel or a
   swipe is untouched — and Reduce Motion turns it off below. */
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--heming);font-weight:430;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* height:auto or the width/height attributes win over aspect-ratio */
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
.skip{position:fixed;z-index:100;left:20px;top:-60px;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{top:20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* A visible focus ring everywhere, drawn in the one accent so it reads as
   part of the design rather than as the browser's default apology. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:3px;
}

/* --- film leader --------------------------------------------------- */
/* Edge printing on a strip of 35mm leader. Two identical tracks side by
   side and a translate of exactly -50% gives a loop with no seam; the
   second is aria-hidden so the sentence is announced once, not twice. */

.leader{
  position:relative;z-index:40;height:var(--leader-h);
  display:flex;align-items:center;overflow:hidden;
  background:var(--ink);color:var(--paper);
}
/* the perforations, drawn rather than fetched */
.leader:before,.leader:after{
  content:"";position:absolute;left:0;right:0;height:4px;opacity:.16;
  background-image:repeating-linear-gradient(90deg,var(--paper) 0 8px,transparent 8px 22px);
  pointer-events:none;
}
.leader:before{top:0}
.leader:after{bottom:0}

.leader-track{display:flex;width:max-content;animation:leader-run 42s linear infinite}
.leader-set{display:flex;align-items:center}
.leader-set b,.leader-set em{
  position:relative;white-space:nowrap;font-style:normal;
  padding:0 clamp(18px,2.4vw,34px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.leader-set b{font-weight:700}
.leader-set em{font-weight:430;color:rgba(242,239,231,.6)}
/* a square of orange between each phrase, sitting on the boundary */
.leader-set b:after,.leader-set em:after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;background:var(--orange);
}
@keyframes leader-run{to{transform:translateX(-50%)}}

/* Shown only under Reduce Motion, where a moving strip is the exact thing
   the setting is asking us not to draw. */
.leader-static{
  display:none;margin:0;width:100%;text-align:center;white-space:nowrap;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:650;
}
.leader-static i{font-style:normal;color:rgba(242,239,231,.6)}
.leader-static i:before{
  content:"";display:inline-block;width:4px;height:4px;background:var(--orange);
  margin:0 12px 2px;vertical-align:middle;
}
/* Both halves do not fit on a phone, and the bar is one line tall with
   overflow hidden — so the second half goes rather than wraps out of sight. */
@media(max-width:560px){.leader-static i{display:none}}

/* --- top bar ------------------------------------------------------ */

.topbar{
  position:absolute;z-index:20;top:var(--leader-h);left:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--pad);
}
.wordmark{display:flex;align-items:center;gap:12px}
/* every brand PNG is full-bleed to its edges — a square slot plus
   object-fit:contain is the only way these never get sliced. */
.wordmark .icon{width:32px;height:32px;object-fit:contain;border-radius:8px;flex:none}
.wordmark .mark{width:112px;height:auto;display:block}
.top-nav{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.top-nav a:not(.top-join){
  font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(29,29,27,.6);transition:color .25s var(--ease);
}
.top-nav a:not(.top-join):hover{color:var(--ink)}
/* The one nav item that is a button: filled, because it is the whole point
   of the page and a hairline underline is not enough to say so. */
.top-join{
  display:flex;gap:10px;align-items:center;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:10px 18px;
  font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.top-join svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.top-join:hover{background:var(--orange);transform:translateY(-1px)}
.top-join:hover svg{transform:translate(3px,-3px)}

/* --- hero --------------------------------------------------------- */

/* The hero carries five things — eyebrow, headline, copy, the two actions
   and the counter — which is more than a 720px-tall laptop can show at this
   type scale. The measurements below are chosen so the fold lands inside
   the counter rather than above the buttons: the action is always visible,
   and what is cut off is a row of numbers that asks to be scrolled to. */
.hero{
  position:relative;min-height:calc(100svh - var(--leader-h));
  padding:clamp(96px,13vh,172px) var(--pad) 52px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  isolation:isolate;overflow:hidden;
}
.hero-wash{
  position:absolute;z-index:-1;width:min(72vw,860px);aspect-ratio:1;
  top:-34%;left:50%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(239,91,39,.24),rgba(239,91,39,0) 66%);
  filter:blur(30px);
}

.eyebrow,.section-no{
  font-size:11px;line-height:1;letter-spacing:.21em;text-transform:uppercase;font-weight:700;
}
.eyebrow{color:var(--orange);margin:0 0 20px;display:inline-flex;align-items:center}
/* A steady dot with a halo, not a blinking one. The page already says the
   beta is live in words; this is punctuation, not an alarm. */
.eyebrow .live{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(239,91,39,.17);margin-right:14px;flex:none;
}
.hero h1{
  font-size:clamp(56px,9.2vw,142px);line-height:.77;letter-spacing:-.05em;
  font-weight:700;margin:0;max-width:11ch;
}
.hero h1 em{font-style:normal;color:var(--orange);font-weight:360}
.hero-copy{
  font-size:clamp(17px,1.5vw,22px);line-height:1.48;max-width:590px;
  margin:28px auto 28px;color:rgba(29,29,27,.75);
}

/* --- the two calls to action -------------------------------------- */

.cta-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 24px;
}
.cta-main{
  display:inline-flex;align-items:center;gap:15px;
  background:var(--ink);color:var(--paper);border-radius:100px;
  padding:17px 30px;font-size:15px;font-weight:650;letter-spacing:-.005em;
  box-shadow:0 18px 46px rgba(42,32,25,.18);
  transition:background .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
}
.cta-main svg{width:14px;height:14px;flex:none;transition:transform .38s var(--ease)}
.cta-main:hover{
  background:var(--orange);transform:translateY(-2px);
  box-shadow:0 24px 56px rgba(239,91,39,.28);
}
.cta-main:hover svg{transform:translate(3px,-3px)}
.cta-alt{
  display:inline-flex;align-items:center;gap:11px;padding:6px 0;
  border-bottom:1px solid rgba(29,29,27,.3);
  font-size:13px;font-weight:650;color:rgba(29,29,27,.72);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.cta-alt svg{width:12px;height:12px;flex:none;transition:transform .3s var(--ease)}
.cta-alt:hover{color:var(--ink);border-color:var(--ink)}
.cta-alt:hover svg{transform:translateY(2px)}

/* The primary action is an app badge, not a text button: the real app icon,
   a kicker line, and the platform name — the shape a store badge has, so it
   reads as "install this" at a glance rather than as another link. Drawn
   here rather than fetched, and the icon carries its own dark tile, so the
   badge holds together on paper, on ink and on orange without a second art
   file. TestFlight is named in type; Apple's own glyph is theirs, not ours. */
.cta-main{padding:11px 26px 11px 12px;gap:15px}
.cta-icon{
  width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,252,242,.16);
}
.cta-lines{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.cta-kicker{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;opacity:.62;
}
.cta-lbl{font-size:19px;font-weight:700;letter-spacing:-.028em}
.cta-big{padding:13px 30px 13px 13px}
.cta-big .cta-icon{width:50px;height:50px;border-radius:12.5px}
.cta-big .cta-lbl{font-size:21px}

/* --- the frame counter -------------------------------------------- */
/* A countdown to the App Store drawn as the app's own counter window.
   Everything a visitor needs is already in the markup — the script only
   ever writes the four numbers, so no JavaScript means a stale count and
   a correct date rather than an empty box. */

.countdown{width:min(100%,600px);margin:clamp(24px,2.8vw,38px) auto 0}
.count-head{
  margin:0 0 15px;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:650;color:rgba(29,29,27,.52);
}
/* Author styles beat the UA rule for [hidden], so display:grid would quietly
   un-hide the row the markup asked to keep back. Say it here instead. */
.count-row[hidden]{display:none}
.count-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:0 18px 60px rgba(42,32,25,.09);
}
.cell{position:relative;padding:19px 6px 16px}
.cell+.cell:before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line);
}
.cell b{
  display:block;font-size:clamp(30px,4.6vw,46px);line-height:.88;font-weight:700;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.cell:first-child b{color:var(--orange)}
.cell i{
  display:block;margin-top:10px;font-style:normal;font-weight:650;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(29,29,27,.5);
}
.count-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 18px;margin:14px 4px 0;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(29,29,27,.5);
}
.count-foot .count-date{color:rgba(29,29,27,.72);font-weight:650}
/* After the 28th the row is meaningless — home.js adds this and rewrites
   the heading, so the block becomes a plain "it is out" line. */
.countdown.out .count-row{display:none}
.countdown.out .count-head{
  font-size:12px;color:var(--orange);letter-spacing:.17em;margin-bottom:8px;
}

/* --- hero footing ------------------------------------------------- */

.hero-proof{
  margin-top:clamp(26px,3vw,38px);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:12px 14px;color:rgba(29,29,27,.56);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.hero-proof .mark-wrap{width:34px;height:34px;flex:none}
/* every brand PNG is full-bleed, so contain — cover slices them */
.hero-proof img{width:100%;height:100%;object-fit:contain;border-radius:8px}
/* CSS-drawn separator — Heming has no printable middle dot */
.hero-proof span+span:before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--orange);margin:0 16px 2px 0;
}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:42px;display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;
}
.scroll-cue span{
  height:48px;width:1px;background:var(--ink);transform-origin:top;
  animation:drop 2.8s var(--ease) infinite;
}
@keyframes drop{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* --- in this build ------------------------------------------------- */

.build{
  padding:clamp(90px,13vw,190px) var(--pad) clamp(84px,10vw,140px);
  border-top:1px solid var(--line);
}
.build-head{
  display:grid;grid-template-columns:1fr 2.2fr;gap:50px;
  margin-bottom:clamp(52px,6.5vw,92px);
}
.build-head h2{
  font-size:clamp(40px,6.2vw,94px);line-height:.9;letter-spacing:-.055em;
  margin:0;max-width:14ch;font-weight:650;
}
.build-head p{
  font-size:clamp(17px,1.7vw,23px);line-height:1.48;max-width:660px;
  margin:34px 0 0;color:rgba(29,29,27,.67);
}

/* A contact sheet: six cells divided by hairlines rather than by gaps,
   which is what the 1px gap over a --line background buys. */
.frames{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.frames li{
  background:var(--paper);
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,34px) clamp(30px,3vw,44px);
  transition:background .45s var(--ease);
}
.frames li:hover{background:#fff}
.frames .n{
  margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--orange);
}
.frames h3{
  font-size:clamp(21px,2.1vw,28px);line-height:1.08;letter-spacing:-.035em;
  font-weight:650;margin:16px 0 13px;max-width:17ch;
}
.frames p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(29,29,27,.66)}

/* --- feature icons -------------------------------------------------- */
/* One verb each, on a long slow loop. Every one is a transform or an
   opacity — nothing here animates a property that costs layout. */

.fi{display:block;width:40px;height:40px;color:var(--orange);margin-bottom:20px}
.fi svg{width:100%;height:100%;display:block;overflow:visible}

/* 01 — the lens stops down and opens back up. Only the pupil moves. */
.fi-dot{transform-origin:20px 22.2px;animation:iris-dot 9s var(--ease) infinite}
@keyframes iris-dot{0%,66%,100%{transform:scale(1)}26%,44%{transform:scale(.42)}}

/* 02 — the print comes up out of the bath */
.fi-print{animation:fi-print 9s var(--ease) infinite}
@keyframes fi-print{0%,8%{transform:translateY(9px);opacity:0}34%,88%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}
.fi-wave{opacity:.55;animation:fi-wave 9s ease-in-out infinite}
.fi-wave-2{opacity:.3;animation-delay:-1.6s}
@keyframes fi-wave{0%,100%{transform:translateX(0)}50%{transform:translateX(3.2px)}}

/* 03 — the film advances */
.fi-perf{animation:fi-advance 9s linear infinite}
@keyframes fi-advance{to{transform:translateX(-15px)}}
.fi-leader{stroke-dasharray:1 0}

/* 04 — the loupe sweeps the sheet */
.fi-cells{opacity:.22}
.fi-loupe{animation:fi-loupe 9s var(--ease) infinite}
@keyframes fi-loupe{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(11px,0)}
  66%{transform:translate(11px,11px)}
}

/* 05 — the run fills, one day at a time */
.fi-run rect{fill:currentColor;opacity:.22;transform-origin:center bottom;animation:fi-run 9s var(--ease) infinite}
.fi-run rect:nth-child(1){animation-delay:0s}
.fi-run rect:nth-child(2){animation-delay:.5s}
.fi-run rect:nth-child(3){animation-delay:1s}
.fi-run rect:nth-child(4){animation-delay:1.5s}
.fi-run rect:nth-child(5){animation-delay:2s;opacity:.12}
@keyframes fi-run{0%,4%{opacity:.22;transform:scaleY(.62)}18%,74%{opacity:1;transform:scaleY(1)}92%,100%{opacity:.22;transform:scaleY(.62)}}

/* 06 — two phones meet, and the handshake arcs across */
.fi-ph{animation:fi-meet 9s var(--ease) infinite}
.fi-ph-r{animation-name:fi-meet-r}
@keyframes fi-meet{0%,100%{transform:translateX(-3.5px)}34%,66%{transform:translateX(0)}}
@keyframes fi-meet-r{0%,100%{transform:translateX(3.5px)}34%,66%{transform:translateX(0)}}
.fi-arc{opacity:0;animation:fi-arc 9s var(--ease) infinite}
.fi-arc-2{animation-delay:.32s}
@keyframes fi-arc{0%,30%{opacity:0;transform:translateY(2px)}46%,62%{opacity:1;transform:translateY(0)}78%,100%{opacity:0;transform:translateY(-2px)}}

/* --- the one stock -------------------------------------------------- */

.stock-one{
  margin-top:clamp(50px,6vw,84px);
  border-top:1px solid var(--line);padding-top:clamp(34px,4vw,54px);
}
.stock-top{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center;
  margin-bottom:clamp(34px,4vw,54px);
}
.carton{
  width:clamp(124px,11vw,152px);aspect-ratio:3/4;flex:none;
  border-radius:9px;padding:16px 14px;
  display:flex;flex-direction:column;justify-content:space-between;text-align:center;
  background:linear-gradient(158deg,#f0813a,#eb5e28 46%,#c8431a);
  box-shadow:0 20px 44px rgba(200,67,26,.30),inset 0 0 0 1px rgba(255,252,242,.28);
  color:#2a1606;
}
.carton-top{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.carton-iso{
  font-size:clamp(48px,4.6vw,60px);line-height:.8;font-weight:700;letter-spacing:-.05em;
  color:#fffcf2;text-shadow:0 0 22px rgba(255,224,180,.55);
}
.carton-foot{display:flex;align-items:center;justify-content:center;gap:9px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.carton-foot i{width:3px;height:3px;border-radius:50%;background:currentColor}
.stock-copy .stocks-title{
  margin:0 0 12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:rgba(29,29,27,.5);
}
.stock-copy h3{font-size:clamp(30px,3.4vw,46px);line-height:.98;letter-spacing:-.045em;font-weight:650;margin:0 0 16px}
.stock-copy>p:not(.stocks-title){margin:0;font-size:17px;line-height:1.55;color:rgba(29,29,27,.66);max-width:58ch}

/* Three real exports, each captioned with the trait it demonstrates. The
   frames sit on ink so the film's own matte toe has something to be dark
   against — on paper the shadows read as grey rather than as lifted black. */
.stock-shots{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
}
.stock-shots li{margin:0}
.stock-shots img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:10px;
  background:rgba(29,29,27,.06);
  box-shadow:0 18px 40px rgba(29,29,27,.18);
}
.stock-shots b{
  display:block;margin:18px 0 7px;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;font-weight:700;color:var(--orange);
}
.stock-shots p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(29,29,27,.6);max-width:38ch}

.stocks-foot{
  margin:clamp(34px,4vw,52px) 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.6;color:rgba(29,29,27,.5);
}
.stocks-foot>span{display:block;max-width:62ch}

/* --- getting in ---------------------------------------------------- */

.steps-band{padding:0 var(--pad) clamp(100px,13vw,180px)}
.steps-band h2{
  font-size:clamp(38px,5.8vw,88px);line-height:.9;letter-spacing:-.055em;
  font-weight:650;margin:26px 0 clamp(48px,6vw,84px);max-width:16ch;
}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,62px)}
.steps article{border-top:1px solid var(--line);padding-top:24px}
.steps .n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--orange)}
.steps h3{
  font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.035em;
  font-weight:650;margin:14px 0 12px;
}
.steps p{margin:0;font-size:16px;line-height:1.55;color:rgba(29,29,27,.66)}
.steps .aside{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:rgba(29,29,27,.5);
}

/* --- the dark act -------------------------------------------------- */
/* .deliberate and .photo-world share one ink ground and read as a single
   held breath between the paper and the orange. The hairline between them
   is the fold, not a new section. */

.deliberate{
  background:var(--ink);color:var(--paper);
  padding:clamp(90px,12vw,165px) var(--pad) clamp(72px,8vw,115px);
}
.deliberate .section-no{color:var(--orange);margin:0 0 clamp(38px,5vw,62px)}
.deliberate-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(36px,6vw,92px)}
.deliberate h2{
  font-size:clamp(38px,5.6vw,82px);line-height:.88;letter-spacing:-.05em;
  font-weight:620;margin:0;
}
.known{border-top:1px solid rgba(242,239,231,.16);padding:26px 0 30px}
.known:first-child{border-top:0;padding-top:0}
.known h3{
  font-size:clamp(20px,2vw,27px);line-height:1.14;letter-spacing:-.03em;
  font-weight:650;margin:0 0 12px;
}
.known p{margin:0;font-size:16px;line-height:1.62;color:rgba(242,239,231,.66);max-width:64ch}
.known-foot{
  margin:0;padding-top:24px;border-top:1px solid rgba(242,239,231,.16);
  font-size:14.5px;line-height:1.62;color:rgba(242,239,231,.52);max-width:64ch;
}
.known-foot a{
  border-bottom:1px solid rgba(242,239,231,.32);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.known-foot a:hover{color:var(--orange);border-color:var(--orange)}

/* --- photo band (inverted) ---------------------------------------- */

.photo-world{background:var(--ink);color:var(--paper);padding:clamp(100px,12vw,170px) 0 clamp(90px,10vw,140px);overflow:hidden}
.deliberate+.photo-world{
  padding-top:clamp(74px,8.5vw,118px);border-top:1px solid rgba(242,239,231,.14);
}
.photo-head{
  padding:0 var(--pad);display:grid;grid-template-columns:minmax(150px,1fr) 1.6fr minmax(0,.8fr);
  align-items:start;gap:38px;
}
.photo-head .section-no{color:var(--orange);padding-top:.5em}
.photo-head h2{font-size:clamp(48px,7vw,105px);line-height:.86;letter-spacing:-.05em;margin:0;font-weight:620}
.photo-head>p:last-child{color:rgba(242,239,231,.58);line-height:1.55;max-width:22ch;margin:.5em 0 0;font-size:15px}

/* the rail masks its own edges so frames fade out instead of being sliced */
.photo-rail{
  margin-top:clamp(52px,6vw,86px);
  border-top:1px solid rgba(242,239,231,.14);
  padding-top:clamp(30px,3.4vw,46px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.photo-strip{
  display:grid;grid-auto-flow:column;align-items:start;
  grid-auto-columns:clamp(228px,23vw,336px);gap:22px;width:max-content;
  padding:0 22px;animation:drift 84s linear infinite;
}
.photo-strip:hover{animation-play-state:paused}
.photo-strip figure{
  margin:0;position:relative;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
}
.photo-strip figure:hover{transform:translateY(-10px)}
.photo-strip img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:rgba(242,239,231,.06);
  outline:1px solid rgba(242,239,231,.14);outline-offset:-1px;
  filter:saturate(.95) contrast(1.02);
}
.photo-meta{
  display:flex;align-items:baseline;gap:10px;padding-top:13px;
  font-size:10px;text-transform:uppercase;letter-spacing:.17em;
}
.photo-meta .no{color:var(--orange);font-weight:700}
.photo-meta .cap{color:rgba(242,239,231,.6)}
/* The set is duplicated in markup. One set is 11 columns + 11 gaps; half the
   element is 11 columns + 10.5 gaps, so the loop needs half a gap more. */
@keyframes drift{to{transform:translateX(calc(-50% - 11px))}}

/* --- closing ------------------------------------------------------ */

.closing{
  position:relative;background:var(--orange);color:var(--ink);
  padding:clamp(100px,15vw,215px) var(--pad);text-align:center;overflow:hidden;
}
.closing-mark{
  position:absolute;width:min(38vw,430px);height:auto;opacity:.085;
  left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.closing>*:not(.closing-mark){position:relative}
.closing h2{
  font-size:clamp(48px,8vw,124px);line-height:.82;letter-spacing:-.05em;
  font-weight:650;margin:28px auto 36px;max-width:20ch;
}
.closing>p:not(.section-no):not(.cta-under){
  font-size:clamp(17px,1.6vw,22px);line-height:1.5;max-width:600px;margin:0 auto 36px;
}
.closing .cta-main{
  background:var(--ink);color:var(--paper);box-shadow:0 20px 50px rgba(88,28,8,.22);
}
.closing .cta-main:hover{
  background:#fff;color:var(--ink);box-shadow:0 26px 62px rgba(88,28,8,.3);
}
.cta-big{padding:20px 36px;font-size:16.5px}
.cta-under{
  margin:18px 0 0;font-size:12.5px;letter-spacing:.04em;color:rgba(29,29,27,.72);
}
.cta-under a{border-bottom:1px solid rgba(29,29,27,.45);transition:color .25s var(--ease),border-color .25s var(--ease)}
.cta-under a:hover{color:#fff;border-color:#fff}

/* the fork between the two audiences: install it, or hear about launch */
.or{
  display:flex;align-items:center;gap:20px;
  width:min(100%,600px);margin:clamp(38px,5vw,56px) auto clamp(26px,3vw,34px);
}
.or:before,.or:after{content:"";flex:1;height:1px;background:rgba(29,29,27,.24)}
.or span{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:650;color:rgba(29,29,27,.6);
}

/* --- waitlist form ------------------------------------------------ */

.signup{width:min(100%,600px);position:relative;margin:0 auto}
.field{
  display:flex;background:#fff;border:1px solid var(--ink);padding:5px;border-radius:100px;
  box-shadow:0 18px 60px rgba(42,32,25,.08);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.field input{
  min-width:0;flex:1;border:0;background:transparent;padding:15px 22px;
  color:var(--ink);outline:none;
}
.field input::placeholder{color:rgba(29,29,27,.42);transition:opacity .25s}
.field input:focus::placeholder{opacity:.45}
.signup:focus-within .field{
  box-shadow:0 22px 70px rgba(42,32,25,.14),0 0 0 4px rgba(239,91,39,.18);
  transform:translateY(-2px);
}
.btn{
  border:0;border-radius:100px;background:var(--ink);color:#fff;padding:15px 24px;
  display:flex;gap:14px;align-items:center;justify-content:center;
  font-weight:650;cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{background:var(--orange);transform:translateY(-1px)}
.btn:hover svg{transform:translateX(4px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn:disabled:hover{background:var(--ink)}

/* sending: the arrow advances like film */
.signup.sending .btn{background:var(--ink)}
.signup.sending .btn svg{animation:advance 1.1s var(--ease) infinite}
@keyframes advance{
  0%{transform:translateX(0);opacity:1}
  55%{transform:translateX(15px);opacity:0}
  56%{transform:translateX(-13px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}

.form-note{font-size:11px;letter-spacing:.05em;color:rgba(29,29,27,.55);margin:14px 0 0}
.err{display:none;font-size:13px;margin:14px 0 0;color:#b83220}
.signup.failed .err{display:block}
.signup.failed .field{animation:nudge .4s var(--ease)}
@keyframes nudge{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* --- the receipt that replaces the form on success ---------------- */

.signup .field,.signup .form-note{
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.signup.done .field,.signup.done .form-note,.signup.done .err{
  opacity:0;transform:translateY(-10px);pointer-events:none;
  position:absolute;left:0;right:0;
}
.receipt{
  display:none;text-align:left;background:#fff;border:1px solid var(--ink);
  border-radius:20px;padding:26px 28px;box-shadow:0 22px 70px rgba(42,32,25,.12);
}
.signup.done .receipt{display:block;animation:develop .9s var(--ease) both}
@keyframes develop{
  from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}
.receipt-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px dashed var(--line);
}
.receipt-head strong{font-size:19px;font-weight:650;letter-spacing:-.02em}
.receipt-head span{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700;
}
.receipt ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:15px}
.receipt li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.45}
.receipt li i{
  flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;
  color:rgba(29,29,27,.55);margin-top:1px;
}
.receipt li:first-child i{background:var(--orange);border-color:var(--orange);color:#fff}
.receipt li b{font-weight:650}
.receipt li p{margin:3px 0 0;color:rgba(29,29,27,.62)}
.receipt-foot{
  margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--line);
  font-size:11px;letter-spacing:.05em;color:rgba(29,29,27,.5);
}
.closing .field{background:var(--paper);border:0}
.closing .btn{background:var(--ink)}
.closing .btn:hover{background:#fff;color:var(--ink)}
.closing .form-note{color:rgba(29,29,27,.62)}
.closing .receipt{background:var(--paper);border-color:rgba(29,29,27,.25)}
.closing .err{color:#5c1a10}

/* --- footer ------------------------------------------------------- */

footer{
  background:var(--ink);color:var(--paper);
  padding:clamp(52px,6vw,76px) var(--pad) clamp(30px,3.4vw,42px);
}
.foot-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px 48px;flex-wrap:wrap;
  padding-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid rgba(242,239,231,.14);
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .icon{width:34px;height:34px;object-fit:contain;border-radius:8px;flex:none}
.footer-logo{width:118px;height:auto;display:block}
.footer-links{
  display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.footer-links a{transition:color .25s var(--ease);white-space:nowrap}
.footer-links a:hover{color:var(--orange)}
.foot-social{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid rgba(242,239,231,.14);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.foot-social a{color:rgba(242,239,231,.58);transition:color .25s var(--ease);white-space:nowrap}
.foot-social a:hover{color:var(--orange)}
.foot-base{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px 40px;
  flex-wrap:wrap;padding-top:clamp(20px,2.4vw,28px);
}
.foot-base p{
  color:rgba(242,239,231,.4);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;margin:0;line-height:1.8;max-width:74ch;
}
.foot-base .rights{
  color:rgba(242,239,231,.55);white-space:nowrap;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;
}

/* --- touch targets ------------------------------------------------- */
/* Header links are small type by design; the tappable area is not. The
   padding is negated by a margin so nothing moves visually. */
@media(hover:none),(pointer:coarse){
  .wordmark{padding-block:12px;margin-block:-12px}
  .back{padding-block:16px;margin-block:-16px}
  .footer-links a,.foot-social a{padding-block:7px;margin-block:-7px}
  .foot-base p,.foot-base .rights{font-size:11px}
}

/* --- reveals ------------------------------------------------------ */
/* Ordered by attribute rather than by :nth-of-type, which counts each tag
   separately and so gave the h1 and the eyebrow the same delay while the
   form — a different element entirely — silently restarted the sequence. */

.reveal{opacity:0;transform:translateY(18px);animation:arrive .85s var(--ease) forwards}
.reveal[data-delay="1"]{animation-delay:.07s}
.reveal[data-delay="2"]{animation-delay:.14s}
.reveal[data-delay="3"]{animation-delay:.21s}
.reveal[data-delay="4"]{animation-delay:.28s}
.reveal[data-delay="5"]{animation-delay:.35s}
@keyframes arrive{to{opacity:1;transform:none}}

/* below the fold: held until scrolled into view by home.js */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-delay="1"]{transition-delay:.09s}
.rise[data-delay="2"]{transition-delay:.18s}
.rise[data-delay="3"]{transition-delay:.27s}

/* --- narrow ------------------------------------------------------- */

@media(max-width:1000px){
  .frames{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .steps{grid-template-columns:1fr;gap:34px}
  .build-head,.deliberate-grid{grid-template-columns:1fr;gap:28px}
  .build-head p{margin-top:22px}
  .stock-top{grid-template-columns:1fr;gap:26px;justify-items:start}
}
@media(max-width:760px){
  :root{--leader-h:34px}
  .leader-set b,.leader-set em{font-size:9.5px;letter-spacing:.16em;padding:0 16px}
  .topbar{padding:18px var(--pad)}
  .wordmark .mark{width:92px}
  .wordmark .icon{width:28px;height:28px}
  .top-nav{gap:14px}
  .top-nav a:not(.top-join){display:none}
  .top-join{font-size:10px;gap:8px;padding:11px 16px}
  .hero{padding-top:120px}
  .hero h1{font-size:clamp(48px,15vw,74px);line-height:.86;max-width:15ch}
  .hero-copy{margin:28px auto 30px}
  /* On a phone the primary action is the width of the screen and the
     secondary sits under it, never beside it. */
  .cta-row{flex-direction:column;align-items:stretch;gap:18px}
  .cta-main{justify-content:center;width:100%;padding:12px 20px 12px 12px}
  .cta-big{padding:13px 22px 13px 13px}
  .cta-alt{justify-content:center}
  .count-row{border-radius:16px}
  .cell{padding:15px 4px 13px}
  .cell b{font-size:clamp(26px,8vw,34px)}
  .cell i{font-size:9px;letter-spacing:.14em;margin-top:8px}
  .count-foot{justify-content:center;text-align:center;gap:4px 14px}
  .hero-proof{gap:10px 12px;max-width:330px}
  .hero-proof span+span:before{margin-right:12px}
  .scroll-cue{display:none}
  .build{padding-top:80px}
  .frames{grid-template-columns:1fr}
  .fi{margin-bottom:16px}
  .carton{width:118px}
  .stock-shots{grid-template-columns:1fr;gap:26px}
  .stock-shots p{max-width:none}
  .stocks li{font-size:13.5px;padding-right:18px}
  .field{flex-direction:column;border-radius:22px;padding:5px}
  .field input{min-height:54px;text-align:center}
  .btn{min-height:52px}
  .receipt{padding:22px}
  .photo-head{grid-template-columns:1fr;padding:0 24px;gap:18px}
  .photo-head .section-no{padding-top:0}
  .photo-head h2{font-size:54px}
  .photo-head>p:last-child{max-width:28ch;margin-top:0}
  /* no drift on a phone — the strip becomes a swipeable rail instead */
  .photo-strip{
    grid-auto-columns:74vw;margin-top:0;animation:none;
    width:auto;padding:0 24px 8px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .photo-strip::-webkit-scrollbar{display:none}
  .photo-strip figure{scroll-snap-align:center}
  .photo-strip .dupe{display:none}
  .closing h2{font-size:clamp(42px,13vw,64px);line-height:.9;max-width:16ch}
  .closing-mark{width:66vw}
  .cta-big{width:100%;justify-content:center}
  .foot-top{flex-direction:column;align-items:flex-start;gap:24px}
  .footer-links{gap:10px 20px}
  .foot-base{flex-direction:column;gap:14px}
}
@media(max-width:400px){
  .cell i{font-size:8.5px;letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;animation:none}
  .rise{opacity:1;transform:none;transition:none}
  /* Every loop on the page, in one list: the drifting photo rail, the scroll
     cue, the sending arrow, the error shake — a shake being the single most
     literal thing this setting exists to switch off — and all six feature
     icons. The .err text still says what went wrong, so nothing is lost by
     holding still. */
  .photo-strip,.scroll-cue span,.signup.sending .btn svg,
  .signup.failed .field,
  .fi-dot,.fi-print,.fi-wave,.fi-perf,.fi-loupe,
  .fi-run rect,.fi-ph,.fi-arc{animation:none}
  /* The icons' resting frames are mid-animation for several of them, so
     put each one back where it reads as finished rather than as broken. */
  .fi-run rect{opacity:1;transform:none}
  .fi-arc{opacity:1;transform:none}
  .fi-print{opacity:1;transform:none}
  /* A strip of moving type is precisely what this setting is asking us not
     to draw, so the marquee is replaced by the sentence it was carrying. */
  .leader-track{display:none}
  .leader-static{display:block}
  .signup.done .receipt{animation:none}
}