/* ============================================================================
   pushpact — landing page
   Ported from the Claude Design source (pushpact.dc.html). Values are copied
   verbatim from that file; where the original used inline styles on every
   element, they are collected here as classes so the markup stays readable.
   ============================================================================ */

/* ---- fonts: self-hosted so nothing silently falls back to Inter ---------- */
@font-face { font-family:'Geist'; src:url("/assets/Geist-Regular-8a3e8476.ttf") format('truetype');
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Geist'; src:url("/assets/Geist-Medium-47e964c4.ttf") format('truetype');
  font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Geist'; src:url("/assets/Geist-SemiBold-50cda242.ttf") format('truetype');
  font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:'Geist'; src:url("/assets/Geist-Bold-294f691e.ttf") format('truetype');
  font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:'Geist Mono'; src:url("/assets/GeistMono-Regular-ea20bf74.ttf") format('truetype');
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Geist Mono'; src:url("/assets/GeistMono-Medium-83dd5059.ttf") format('truetype');
  font-weight:500; font-style:normal; font-display:swap }

/* ---- tokens (Voltage, locked) ------------------------------------------- */
:root{
  --ink-950:#101114; --ink-900:#191B1F; --ink-800:#22252A; --ink-700:#2E323A;
  --ink-600:#33373F; --ink-500:#666C77; --ink-300:#A2A8B3;
  --chalk-050:#F2F3F5; --chalk-100:#E4E6EA; --chalk-200:#D3D6DB; --chalk-300:#C3C7CE;
  /* ink-500 measures 4.23:1 on chalk-100 and 3.57:1 on ink-950 — both under AA for
     small text. These two are the accessible variants for those exact surfaces. */
  --ink-500-on-light:#585E68;   /* 5.23:1 on chalk-100, 5.88:1 on chalk-050 */
  --ink-500-on-dark:#7E8590;    /* 5.07:1 on ink-950,  4.63:1 on ink-900   */
  --volt-700:#4E650A; --volt-400:#C6F24E; --volt-300:#D6FB70;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,monospace;
  --pad-x:clamp(20px,4vw,56px);
  --sec-y:clamp(64px,8vw,128px);
  --maxw:1360px;
}

*{box-sizing:border-box}
/* Nothing may exceed its container. body{overflow-x:hidden} hides overflow, which
   means an automated scrollWidth check reports a clean page while text is being
   clipped mid-word — exactly how the mobile subhead shipped cut off. */
img,svg,video,table,pre{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-950); color:var(--chalk-100);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--volt-400)}
img{display:block}

@keyframes pp-pulse{0%,100%{opacity:1} 50%{opacity:.25}}
@keyframes pp-rise{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}
@keyframes pp-cell{from{opacity:0;transform:scaleY(.35)} to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---- shared -------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto}
.mono-label{font:500 10px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-500-on-light)}

/* ink-500 measures 3.57:1 on ink-950 — under AA for small text. Every dark
   surface therefore promotes the muted neutral rather than patching selectors
   one at a time; a DOM-wide contrast sweep found 14 instances of this after an
   earlier pass fixed only the four I had sampled. */
.sec--dark .mono-label,
.stats .mono-label, .stats .k,
.picker .mono-label,
.join .mono-label,
.site-footer .mono-label,
.figure-block__foot .mono-label,
.device__note{color:var(--ink-500-on-dark)}
.num{font-weight:700; letter-spacing:-.045em; font-variant-numeric:tabular-nums lining-nums; line-height:1}
.logo-slot{
  width:104px; height:30px; border:1px dashed rgba(228,230,234,.8);
  display:flex; align-items:center; justify-content:center;
  font:400 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-050);
}

/* ---- header -------------------------------------------------------------- */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad-x);
  background:linear-gradient(to bottom,rgba(16,17,20,.8) 0%,rgba(16,17,20,.45) 60%,rgba(16,17,20,0) 100%);
}
.site-header a{
  font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--chalk-050); border-bottom:1px solid rgba(242,243,245,.6);
  /* 44px minimum hit height without moving the underline. 11px line-box + 30 + 3
     lands at 44; the negative margin cancels the layout effect. */
  padding:30px 12px 3px; margin:-30px -12px -3px;
}

/* ---- hero ---------------------------------------------------------------- */
.hero{
  position:relative; width:100%; min-height:min(92vh,860px);
  display:flex; align-items:flex-end; background:var(--ink-950); z-index:2;
}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 40%; z-index:-1}
.hero__scrim-v{position:absolute; inset:0; background:linear-gradient(to top,rgba(16,17,20,.94) 0%,rgba(16,17,20,.86) 30%,rgba(16,17,20,.62) 58%,rgba(16,17,20,.3) 80%,rgba(16,17,20,.45) 100%)}
.hero__scrim-h{position:absolute; inset:0; background:linear-gradient(to right,rgba(16,17,20,.55) 0%,rgba(16,17,20,.12) 55%,rgba(16,17,20,0) 100%)}
.hero__grid{
  position:relative; width:100%; padding:112px var(--pad-x) 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(32px,4vw,64px); align-items:end;
}
.hero__copy{padding-bottom:clamp(36px,5vw,64px); animation:pp-rise 760ms cubic-bezier(.2,.7,.3,1) both}
.badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(228,230,234,.25); padding:7px 12px; margin-bottom:24px;
  /* 10px mono sitting straight on the hero photograph measured 2.31:1 against
     the actual pixels. Strengthening the hero scrim enough to carry text this
     small would have flattened the photograph, so the badge carries its own
     plate instead — it already reads as a bordered pill, and the plate is the
     shape the border was implying. */
  background:rgba(16,17,20,.68);
}
.badge i{width:6px; height:6px; background:var(--volt-400); animation:pp-pulse 1.8s ease-in-out infinite; display:inline-block}
.badge span{font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-100)}
.hero h1{
  margin:0; max-width:min(15ch,100%); font-size:clamp(40px,5.6vw,84px); line-height:.98;
  letter-spacing:-.03em; font-weight:500; color:var(--chalk-050); text-wrap:balance;
}
.hero__sub{margin:22px 0 0; max-width:min(46ch,100%); font-size:clamp(15px,1.35vw,19px); line-height:1.5; color:var(--chalk-100); font-weight:300; text-wrap:pretty}
.hero__cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:32px}
.btn-volt{
  display:inline-flex; align-items:center; gap:12px; background:var(--volt-400);
  color:var(--ink-950); padding:15px 24px; font-size:15px; font-weight:500;
  letter-spacing:-.01em; border:0; cursor:pointer; font-family:var(--sans);
}
.btn-volt:hover{background:var(--volt-300); color:var(--ink-950)}
.cta-note{font:400 11px/1.4 var(--mono); letter-spacing:.1em; color:var(--ink-300); text-transform:uppercase; min-width:0}

/* ---- hero device --------------------------------------------------------- */
.hero__device-col{
  display:flex; justify-content:flex-end;
  margin-bottom:calc(-1 * clamp(6px,8vw - 26px,96px));
  position:relative; z-index:3;
  animation:pp-rise 900ms cubic-bezier(.2,.7,.3,1) 160ms both;
}
.device{
  position:relative; width:clamp(228px,23vw,300px); aspect-ratio:9/19.5;
  box-shadow:0 0 0 1px rgba(16,17,20,.9); background:#08090B;
  border:1px solid var(--ink-600); border-radius:40px; padding:9px; flex-shrink:0;
}
.device__screen{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--ink-950)}
.device__screen > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 55%}
/* The lower half carries "17 / 25" and "on device · nothing uploaded" over a
   photograph. At .25 through the middle those measured 2.30:1 and 3.66:1
   against the actual pixels — the count is the most important number in the
   mockup. Ramped so the scrim is already dark where the text starts. */
.device__scrim{position:absolute; inset:0; background:linear-gradient(to bottom,rgba(16,17,20,.75) 0%,rgba(16,17,20,.05) 28%,rgba(16,17,20,.5) 55%,rgba(16,17,20,.88) 78%,rgba(16,17,20,.96) 100%)}
.device__notch{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:70px; height:19px; background:#08090B; border-radius:10px}
.device__status{position:absolute; top:44px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center}
.device__status > span{font:400 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-100)}
.device__counting{display:flex; align-items:center; gap:6px; color:var(--volt-400) !important}
.device__counting i{width:5px; height:5px; background:var(--volt-400); animation:pp-pulse 1.1s ease-in-out infinite; display:inline-block}
.device__foot{position:absolute; left:16px; right:16px; bottom:20px}
.device__reps{display:flex; align-items:baseline; gap:8px}
.device__reps .num{font-size:clamp(46px,5.4vw,68px); line-height:.85; color:var(--volt-400)}
.device__reps span:last-child{font:400 11px/1 var(--mono); color:var(--ink-300)}
.device__bar{margin-top:14px; height:2px; background:rgba(228,230,234,.2)}
.device__bar > div{height:100%; width:0%; background:var(--volt-400)}
.device__note{margin-top:10px; font:400 9px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300)}

/* ---- stat strip ---------------------------------------------------------- */
.stats{background:var(--ink-950); border-top:1px solid var(--ink-800);
  padding:clamp(28px,3vw,40px) var(--pad-x) clamp(28px,3vw,44px); position:relative; z-index:1}
.stats__inner{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,88px); max-width:var(--maxw);
  margin:0 auto; padding-right:clamp(0px,30vw - 60px,320px)}
.stats .num{font-size:clamp(30px,3.4vw,46px); color:var(--chalk-050)}
.stats .k{margin-top:8px; font:400 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500-on-dark)}

/* ---- sections ------------------------------------------------------------ */
.sec{padding:var(--sec-y) var(--pad-x)}
.sec--light{background:var(--chalk-050); color:var(--ink-900)}
.sec--mid{background:var(--chalk-100); color:var(--ink-900)}
.sec--dark{background:var(--ink-950); color:var(--chalk-100)}
.sec h2{margin:20px 0 0; line-height:1.02; letter-spacing:-.03em; font-weight:500; text-wrap:balance}
.sec__lede{margin:20px 0 0; line-height:1.55; font-weight:300; text-wrap:pretty}

.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(36px,5vw,80px)}
.split--center{align-items:center}
.split--start{align-items:start}

/* ---- step cards ---------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--chalk-200); margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--chalk-200); border-bottom:1px solid var(--chalk-200)}
.step{background:var(--chalk-050); padding:28px 24px 32px}
.step__n{font:400 10px/1 var(--mono); letter-spacing:.16em; color:var(--volt-700)}
.step h3{margin:18px 0 0; font-size:21px; line-height:1.25; font-weight:500; letter-spacing:-.02em}
.step p{margin:10px 0 0; font-size:15px; line-height:1.5; color:var(--ink-500-on-light); font-weight:300}

/* ---- full-bleed image band ----------------------------------------------- */
.band{position:relative; width:100%; height:min(70vh,620px); background:var(--ink-950)}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%}

/* ---- counting section ---------------------------------------------------- */
.pullquote{margin:22px 0 0; max-width:min(46ch,100%); font-size:16px; line-height:1.6;
  color:var(--chalk-100); border-left:2px solid var(--volt-400); padding-left:18px; font-weight:300}
.figure-block{display:flex; flex-direction:column; gap:16px}
.figure-block__img{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:var(--ink-900)}
.figure-block__img img{width:100%; height:100%; object-fit:cover}
.figure-block__foot{display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--ink-800); padding-top:16px}
.figure-block__foot .num{font-size:40px; color:var(--volt-400)}

/* ---- day grid ------------------------------------------------------------ */
.grid-head{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; margin-top:20px}
.grid-head h2{margin:0; max-width:min(16ch,100%); font-size:clamp(28px,3.6vw,52px); text-wrap:balance}
.grid-stats{display:flex; gap:28px}
.grid-stats .num{font-size:clamp(26px,2.6vw,36px)}
.grid-stats .k{margin-top:6px; font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500-on-light)}
.daygrid{margin-top:clamp(32px,4vw,56px); overflow:hidden}
.daygrid__row{display:grid; grid-template-columns:clamp(38px,5vw,64px) 1fr; gap:clamp(8px,1.2vw,18px); align-items:center}
.daygrid__row + .daygrid__row{margin-top:clamp(3px,.5vw,7px)}
.daygrid__cells{display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:clamp(3px,.5vw,7px)}
.daygrid__daynum{font:400 10px/1 var(--mono); letter-spacing:.04em; color:var(--ink-500-on-light); text-align:center}
.daygrid__id{font:400 10px/1 var(--mono); color:var(--ink-500-on-light); font-variant-numeric:tabular-nums}
.cell{height:clamp(16px,2vw,28px)}
.cell--hit{background:var(--ink-900)}
.cell--miss{background:var(--volt-400)}
.cell--dead{border:1px solid var(--chalk-200)}
.legend{display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px); margin-top:28px; align-items:center}
.legend > span{display:flex; align-items:center; gap:8px}
.legend i{width:14px; height:14px; display:inline-block}
.legend em{font:400 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500-on-light); font-style:normal}
.legend .disclaimer{font:400 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500-on-light); margin-left:auto}

/* ---- picker -------------------------------------------------------------- */
.picker{margin-top:36px; border:1px solid var(--ink-800); background:var(--ink-900)}
.picker__top{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--ink-800)}
.picker__ctrls{display:flex; align-items:center; gap:18px}
.picker__btn{width:44px; height:44px; background:transparent; border:1px solid var(--ink-700);
  color:var(--chalk-100); font-size:18px; cursor:pointer; line-height:1; font-family:var(--sans)}
.picker__btn:hover{border-color:var(--volt-400); color:var(--volt-400)}
.picker__n{min-width:2.6ch; text-align:center; font-size:clamp(40px,4.4vw,60px); color:var(--volt-400)}
.picker__presets{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:20px 24px; border-bottom:1px solid var(--ink-800)}
.preset{width:100%; min-height:44px; padding:11px 0; background:transparent; border:1px solid var(--ink-700);
  color:var(--ink-300); font:400 12px/1 var(--mono); cursor:pointer; font-variant-numeric:tabular-nums}
.preset:hover{border-color:#4a5058; color:var(--chalk-100)}
.preset[aria-pressed="true"]{border-color:var(--volt-400); color:var(--volt-400)}
.picker__total{display:flex; align-items:baseline; justify-content:space-between; padding:22px 24px}
.picker__total .num{font-size:clamp(28px,3vw,40px); color:var(--chalk-050)}
.picker__img{position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--ink-900)}
.picker__img img{width:100%; height:100%; object-fit:cover}

/* ---- pot ----------------------------------------------------------------- */
.pot{margin-top:clamp(40px,5vw,72px); border-top:1px solid var(--chalk-200)}
.pot__cells{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--chalk-200)}
.pot__cell{background:var(--chalk-050); padding:32px 24px 36px}
.pot__cell .num{margin-top:14px; font-size:clamp(38px,4.4vw,64px)}
.pot__cell--accent .mono-label, .pot__cell--accent .num{color:var(--volt-700)}
.pot__foot{border-top:1px solid var(--chalk-200); padding-top:14px;
  font:400 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500-on-light)}

/* ---- quote band ---------------------------------------------------------- */
.quoteband{position:relative; width:100%; min-height:min(80vh,720px); display:flex; align-items:center; background:var(--ink-950)}
.quoteband img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%}
.quoteband__scrim{position:absolute; inset:0; background:linear-gradient(to right,rgba(16,17,20,.9) 0%,rgba(16,17,20,.55) 45%,rgba(16,17,20,.1) 100%)}
.quoteband__inner{position:relative; padding:clamp(48px,6vw,88px) var(--pad-x); max-width:var(--maxw); margin:0 auto; width:100%}
.quoteband h2{margin:0; max-width:min(17ch,100%); font-size:clamp(28px,3.8vw,54px); line-height:1.03; letter-spacing:-.03em; font-weight:500; color:var(--chalk-050); text-wrap:balance}

/* ---- faq ----------------------------------------------------------------- */
.faq__item{border-top:1px solid var(--chalk-200); padding:22px 0}
.faq__item h3{margin:0; font-size:17px; font-weight:500; letter-spacing:-.015em}
.faq__item p{margin:8px 0 0; max-width:min(56ch,100%); font-size:15px; line-height:1.55; color:var(--ink-500-on-light); font-weight:300}
.reserved{border:1px dashed var(--chalk-300); padding:26px 24px}
.reserved p{margin:10px 0 0; font-size:15px; line-height:1.5; color:var(--ink-500-on-light); font-weight:300}

/* ---- join ---------------------------------------------------------------- */
.join{position:relative; width:100%; background:var(--ink-950); display:flex; align-items:flex-end; min-height:min(88vh,780px)}
.join > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% 55%}
.join__scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(16,17,20,.95) 6%,rgba(16,17,20,.45) 48%,rgba(16,17,20,.15) 100%)}
.join__inner{position:relative; width:100%; padding:0 var(--pad-x) clamp(48px,6vw,88px)}
.join h2{margin:0; max-width:min(14ch,100%); font-size:clamp(34px,5.2vw,76px); line-height:.99; letter-spacing:-.03em; font-weight:500; color:var(--chalk-050); text-wrap:balance}
.join__form{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:32px}
.join__form input[type=email]{
  flex:1 1 280px; max-width:400px; background:rgba(16,17,20,.72); border:1px solid var(--ink-600);
  color:var(--chalk-050); font:400 16px/1 var(--sans); padding:16px 18px;
}
.join__form input[type=email]::placeholder{color:var(--ink-500-on-dark)}
.join__form input[type=email]:focus{outline:none; border-color:var(--volt-400)}
.join__note{font:400 11px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); margin-top:16px}
.flash{margin-top:18px; padding:16px 20px; border-left:3px solid var(--volt-400);
  background:rgba(198,242,78,.10); font-size:16px; line-height:1.45;
  color:var(--chalk-050); max-width:min(52ch,100%); scroll-margin-top:80px}
.flash--error{border-left-color:#E0665C; background:rgba(224,102,92,.08)}

/* ---- footer -------------------------------------------------------------- */
.site-footer{background:var(--ink-950); color:var(--ink-300); border-top:1px solid var(--ink-800);
  padding:clamp(40px,5vw,64px) var(--pad-x)}
.site-footer__top{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:32px;
  justify-content:space-between; align-items:flex-start}
.site-footer__brand{display:flex; flex-direction:column; gap:16px}
.site-footer__fav{display:flex; align-items:center; gap:10px}
.site-footer__fav i{width:26px; height:26px; border:1px dashed rgba(228,230,234,.35); display:inline-block}
.site-footer__fav span{font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500-on-dark)}
.site-footer__cols{display:flex; gap:clamp(28px,4vw,72px); flex-wrap:wrap}
.site-footer__col{display:flex; flex-direction:column; gap:2px}
.site-footer__col > span{font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500-on-dark)}
.site-footer__col a{font-size:14px; font-weight:300; padding:13px 0; margin:-13px 0}
.site-footer__legal{max-width:var(--maxw); margin:40px auto 0; border-top:1px solid var(--ink-800);
  padding-top:18px; font:400 10px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500-on-dark)}
.logo-slot--footer{width:120px; height:34px; border-color:rgba(228,230,234,.35); color:var(--ink-500-on-dark)}

/* ---- accessibility ------------------------------------------------------- */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--volt-400); outline-offset:2px}

/* ---------------------------------------------------------------------------
   Narrow viewports — the scrims, re-aimed.

   The hero and quote-band scrims are HORIZONTAL gradients. That is correct on
   a wide screen, where the copy occupies the left column and the gradient is
   dense exactly where the words are, leaving the right side of the photograph
   open. It stops being correct the moment the layout stacks: the copy goes
   full-bleed and runs straight off the transparent end of its own scrim.

   Measured at a true 390px against the rendered pixels rather than the
   computed background:

     "Everyone starts together. Not everyone finishes."   2.11:1  (needs 3)
     "A new cohort starts every week..."                  1.94:1  (needs 3)
     hero subhead                                         2.62:1  (needs 4.5)
     "iPhone app · TestFlight beta"                       1.75:1  (needs 4.5)

   One of those is a protected line and the other is the first sentence anyone
   reads. Both were failing on the only device this product runs on.

   The DOM-computed sweep reported zero failures here and was not wrong about
   what it measured — the photograph is an <img> painted over an opaque section
   background, so reading `background-color` up the ancestor chain returns
   #101114 for text that is actually sitting on a lit shoulder. Text over
   photography has to be measured in pixels.

   These raise the floor at the transparent end rather than flattening the
   gradient, so the photograph still reads as a photograph. -------------------- */
@media (max-width:700px){
  /* Weighted toward the middle, where the 15px/300 subhead sits — that line is
     the binding constraint here, not the headline. The h1 clears its 3:1 with
     room to spare, so the top of the ramp is deliberately lighter and the
     photograph survives above the copy. */
  .hero__scrim-v{background:linear-gradient(to top,rgba(16,17,20,.94) 0%,rgba(16,17,20,.88) 30%,rgba(16,17,20,.74) 58%,rgba(16,17,20,.56) 80%,rgba(16,17,20,.54) 100%)}
  .hero__scrim-h{background:linear-gradient(to right,rgba(16,17,20,.55) 0%,rgba(16,17,20,.34) 55%,rgba(16,17,20,.26) 100%)}
  .quoteband__scrim{background:linear-gradient(to right,rgba(16,17,20,.9) 0%,rgba(16,17,20,.84) 45%,rgba(16,17,20,.78) 100%)}
}