/* ==========================================================
   Served from the site root on purpose. vercel.json puts a
   seven day immutable cache on /assets/(.*), so a stylesheet
   living there does not reach anyone who has already visited.
   ==========================================================
   This file is loaded after brand.css and carries the flow
   pass: reveals that land quickly instead of sitting half
   faded, and the fixes for text that was clipping or
   stepping on a real phone.                                */

/* ---------- 1. THE REVEALS LAND -------------------------------
   Every heading on the site fades or rises in on scroll. The
   durations ran to a second with staggered delays on top, so on
   a phone you are constantly looking at type that is halfway
   through arriving. Grey, ghosted, mid-transform. That is what
   reads as "not flowing". Same motion, roughly three times
   faster, and no element waits on another.                    */
.rise, .stagger > *, .rv, .split, .in, .ln, .lnmask > span,
.wl, .rl, .pl, .pivotEnd, .step, .role, .seq-step, .heroAsk,
.boardCopy, .turnPunct, .fine, .copy, .note, .ann{
  transition-duration:.42s!important;
  transition-delay:0s!important;
}
.split .wd > span{ transition-duration:.46s!important; transition-delay:0s!important }

/* a reveal that has not fired yet must never be unreadable.
   Anything still waiting sits at a legible weight, so a fast
   scroll never lands on ghost type. */
.pl{ color:#8D9299!important }
.pl.on{ color:#0C0D0F!important }
[data-tone="dark"] .pl{ color:rgba(243,241,236,.45)!important }
[data-tone="dark"] .pl.on{ color:#F3F1EC!important }

/* ---------- 2. THE ROLE LIST ----------------------------------
   Each phrase was split across two lines and the list stepped
   further right on every item, so the third one ran off the
   right edge of a phone. No staircase, and it wraps.          */
.rl, .role h3 .rl{ white-space:normal!important; display:block!important }
.role{ padding-left:0!important }
.role:nth-of-type(2), .role:nth-of-type(3),
#the-role .role:nth-of-type(2), #the-role .role:nth-of-type(3){ padding-left:0!important }
.role h3{ max-width:none!important; padding-right:clamp(20px,6vw,40px) }

/* ---------- 3. THE SEAMS --------------------------------------
   A photograph ending in a hard horizontal line against cream
   is the other half of what reads as broken. The image sections
   now hand off instead of cutting.                            */
.hit{ position:relative }
.hit::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,12svh,130px);
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(242,242,240,0) 0%,rgba(242,242,240,.82) 72%,#F2F2F0 100%);
}
.hit .col{ position:relative;z-index:1 }
.hit.short::after{ display:none }

/* ---------- 4. BREATHING ROOM ---------------------------------
   The gaps between the three steps were larger than the steps,
   which is why they read as unrelated blocks rather than one
   sequence.                                                    */
.steps{ display:grid; gap:clamp(30px,6vw,56px)!important }
.step h3{ margin-bottom:6px }
.step p{ margin-top:0 }
#how-it-works{ padding-top:clamp(52px,9vh,96px)!important; padding-bottom:clamp(52px,9vh,96px)!important }

/* ---------- 5. HEADLINES CLEAR THE FIXED NAV ------------------ */
.turn .col > .stmt:first-child{ padding-top:clamp(18px,4svh,40px) }

/* ---------- 6. THE SCROLL CURVES ------------------------------
   The inline opacity the page writes becomes an input signal, and
   the opacity you actually see comes from the plateau remap in
   brand-scroll.js. See that file for why.                      */
.cb-remap{ opacity:var(--cb-o,1)!important }

/* ---------- 7. HIERARCHY ---------------------------------------
   Three things on the Development Board that the eye catches and
   measurement confirms.                                         */

.steps .step h3, .step h3{
  font-size:clamp(26px,6.6vw,32px)!important;
  line-height:1.1!important;
  letter-spacing:-.028em!important;
}

/* The page sets .steps>.step:nth-of-type(2) h3 to clamp(38px,11vw,58px),
   so "We build it." came in 60% larger than the steps either side of
   it. That is deliberate in the original design, not a defect. The
   judgment here is that a three part sequence only reads as a sequence
   when the three parts match. Same specificity, later in the cascade. */
.steps > .step:nth-of-type(2) h3{
  font-size:clamp(26px,6.6vw,32px)!important;
  letter-spacing:-.028em!important;
}
.steps > .step:nth-of-type(2){ margin-top:0!important }

/* The role headline measured 27px and the list beneath it 29px, so the
   heading was smaller than the thing it was heading. */
#the-role > .col > h2, #the-role h2.stmt{
  font-size:clamp(30px,8vw,44px)!important;
  line-height:1.08!important;
  letter-spacing:-.032em!important;
  margin-bottom:clamp(26px,5vw,44px)!important;
}
#the-role .role h3, #the-role .rl{
  font-size:clamp(21px,5.4vw,26px)!important;
  line-height:1.2!important;
  letter-spacing:-.022em!important;
  font-weight:600!important;
}
#the-role .role{ padding-bottom:clamp(14px,2.6vh,22px)!important }

/* 122px of nothing sat between the one action and the footer, inside a
   section only 408px tall. */
#board.close-q{ padding-bottom:clamp(44px,7vh,76px)!important }
#board .tellBtn{ margin-bottom:0!important }

/* ---------- 8. THE INFORMATION CARRIES ITS OWN SHAPE ----------
   The process and the role list were stacked text blocks,
   indistinguishable from every other block on the page. The
   process now reads as a process and the list reads as a
   specification, in the measured language the menu already uses. */

#how-it-works .steps{ gap:0!important; padding-left:0!important; position:relative }
#how-it-works .step{
  position:relative;
  padding-left:clamp(30px,9vw,44px)!important;
  padding-bottom:clamp(30px,6vw,52px)!important;
  border-left:1.5px solid #9CBCF5!important;
  border-top:0!important;
}
#how-it-works .step:last-of-type{ padding-bottom:0!important }
#how-it-works .step::after{
  content:"";position:absolute;left:-6px;top:.44em;
  width:13px;height:1.5px;background:#085CF0;display:block!important;
}
#how-it-works .who{
  display:block;margin-bottom:6px;opacity:var(--k,1);
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#085CF0;font-weight:600;
}
#how-it-works .again{
  position:relative;margin:clamp(22px,5.2vw,30px) 0 0;
  padding-left:clamp(30px,9vw,44px);
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#085CF0;font-weight:600;
}
#how-it-works .again::before{
  content:"";position:absolute;left:0;
  top:calc(-1 * clamp(22px,5.2vw,30px));
  width:calc(clamp(30px,9vw,44px) - 10px);
  height:calc(clamp(22px,5.2vw,30px) + 8px);
  border-left:1.5px solid #9CBCF5;border-bottom:1.5px solid #9CBCF5;
  border-bottom-left-radius:14px;
}

#the-role .stagger{ border-top:1px solid rgba(12,13,15,.9)!important; margin-top:clamp(26px,5vw,42px)!important }
#the-role .role{
  display:grid!important;
  grid-template-columns:clamp(74px,22vw,96px) minmax(0,1fr)!important;
  gap:clamp(12px,3.4vw,20px)!important;
  align-items:baseline!important;
  padding:clamp(15px,3.4vw,20px) 0!important;
  border-bottom:1px solid rgba(12,13,15,.14)!important;
}
#the-role .rk{
  opacity:var(--k,1);
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#085CF0;font-weight:600;
}
#the-role .role h3{ margin:0!important }

/* the table's last rule already closes the block; the fine print was
   drawing a second one 37px below it. */
#the-role .fine{ border-top:0!important; margin-top:clamp(22px,5vw,32px)!important; padding-top:0!important }

/* On desktop .steps is a three column grid, so the same spine reads as a
   column leader. Equal lengths, and the return sits under the whole row. */
@media (min-width:900px){
  #how-it-works .step{ padding-bottom:0!important }
  #how-it-works .again{ grid-column:1 / -1; margin-top:0!important; padding-top:30px }
  #how-it-works .again::before{
    top:0; height:34px; width:calc(clamp(30px,9vw,44px) - 10px);
  }
}

/* ---------- 9. THE SURGEON'S LIST, ONE AT A TIME ---------------
   The three observations were one headline with a NEGATIVE margin
   between them, so six lines of type ran together with no gap and
   three of those six were two word stubs. Spacing them out fixed
   the typography and left a list, and a list gets skimmed.

   The section is sticky now. Each observation owns the screen,
   holds, and is replaced by the next. The panel above carries the
   render of that failure. Until the render artist's panels land,
   the band is hidden and each line has the screen to itself.   */
#the-list.lsec{
  min-height:300svh!important; padding:0!important; position:relative;
  background:#07090C!important;
}
#the-list .lstage{
  position:sticky; top:0; height:100svh; overflow:hidden; background:#07090C;
  display:flex; flex-direction:column;
}
#the-list .ltype{
  flex:1 1 auto; display:flex; align-items:center;
  position:relative; z-index:3; min-height:0;
}
#the-list .lcol{ width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(22px,4vw,48px) }
#the-list .stmt{
  position:relative; display:block; max-width:none!important;
  font-size:clamp(34px,9.6vw,74px)!important;
  line-height:1.05!important; letter-spacing:-.035em!important;
  min-height:3.3em; color:#F3F1EC!important;
}
#the-list .lnmask{
  position:absolute!important; left:0; right:0; top:0;
  display:block!important; overflow:visible!important;
  margin:0!important; padding:0!important;
  opacity:0; will-change:opacity,transform;
}
#the-list .ln{
  display:block!important; transform:none!important; transition:none!important;
  text-wrap:balance; color:#F3F1EC!important;
}

/* the render panel. One slot per observation, swapped with its line. */
#the-list .lband{ position:relative; flex:0 0 50%; overflow:hidden; z-index:1; background:#0C0F14 }
#the-list .lband:not(:has(img,canvas,video)){ display:none }
#the-list .lslot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .45s ease;
  background:linear-gradient(162deg,#171B22 0%,#10141A 46%,#0A0D12 100%);
}
#the-list .lslot.on{ opacity:1 }
#the-list .lslot span{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,241,236,.34); text-align:center; line-height:1.9; padding:0 28px;
}
#the-list .lband::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg,rgba(7,9,12,0) 0%,rgba(7,9,12,.74) 56%,#07090C 100%);
}
@media (min-width:900px){ #the-list .lband{ flex-basis:56% } }

/* ---------- 10. THE LABELS SETTLE WITH THEIR OWN HEADLINE ------
   .who and .rk read the step's scroll progress directly, so they
   faded on a different curve from the headline they belong to.
   Same plateau the rest of the type goes through. */
#how-it-works .who, #the-role .rk{
  opacity:clamp(0, calc((var(--k, 1) - 0.14) * 4.1667), 1);
}

/* ---------- 11. TAP TARGETS ------------------------------------
   The email fields measured 43px against a 44px target. */
input[type="email"], .talk input, .talk textarea, .close-sign input{
  min-height:44px;
}

/* ---------- 12. ONE STAGE --------------------------------------
   Most of the story happens in a single frame that never cuts. The
   drill is in that frame the whole time and does the work: it draws
   itself in line, becomes metal, comes apart, goes back together,
   and settles as Burrow. The copy changes in one slot over it and
   the light in the frame moves from black to warm to paper. Nothing
   slides in on top of anything. brand-scroll.js drives all of it off
   this section's own scroll, and adds .lit once it has found the
   drill, so if the script never runs the page is still readable.  */

.swrap{ height:660svh; position:relative; background:var(--black) }
.ssticky{ position:sticky; top:0; height:100svh; overflow:hidden }
.sanchor{ position:absolute; top:62%; left:0; width:1px; height:1px }

.sbg{ position:absolute; inset:0; z-index:0; pointer-events:none }
/* two tones and the graphite between them. The warm layer the stage used
   to pass through is gone: it was a third personality the page did not
   need, and it fought the steel. */
.sbg-dark{
  background:
    radial-gradient(60% 34% at 70% 100%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#08090B 0%,#08090B 54%,#101216 72%,#1E2125 100%);
}
.sbg-warm{ display:none }
.sbg-paper{ opacity:0; background:linear-gradient(180deg,#E9E7E1 0%,var(--paper) 58%) }

/* the drill. One object, one place, for the whole stage. */
.sstage{
  position:absolute; z-index:2; left:50%; top:50%;
  height:min(54svh,540px); aspect-ratio:240/760;
  transform:translate(-50%,-50%); will-change:transform;
}
#story .pasm{ width:100%; height:100%; display:block; overflow:visible }
#story .pasm .pp{ will-change:transform; opacity:var(--s-metal,0) }
#story .pasm .pfloor{ opacity:0 }
.sdkln{
  fill:none; stroke:#EFE9DC; stroke-width:1.25;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
}
#sLine{ filter:drop-shadow(0 0 7px rgba(239,233,220,.2)) }
/* before the script has found the drill, the metal is simply there */
#story:not(.lit) .pasm .pp{ opacity:1 }

/* the copy. One slot: every line sits in the same place. */
.scopy{
  position:absolute; z-index:4;
  left:clamp(30px,7vw,96px); right:clamp(30px,7vw,96px);
  top:calc(env(safe-area-inset-top,0px) + clamp(96px,15svh,170px));
  color:var(--stxt,var(--paper));
  transition:color .5s linear;
}
.sl{
  position:absolute; left:0; right:0; top:0; margin:0;
  opacity:0; transform:translateY(16px); will-change:opacity,transform;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
.sl.on{ opacity:1; transform:none }
/* three levels, so the type has rhythm instead of one size shouting all
   the way down: the statement, the answer, and the note on the drawing.
   The instrument holds the centre; the notes sit beside it. */
.scopy .huge{ max-width:11ch; letter-spacing:-.03em }
.sl-mid{
  font-weight:800; max-width:16ch;
  font-size:clamp(1.9rem,7.4vw,2.8rem); line-height:1.02; letter-spacing:-.028em;
}
/* readable supporting copy */
.ssub{
  font-weight:500; max-width:26ch; margin:clamp(16px,3.4vw,24px) 0 0; opacity:.72;
  font-size:clamp(1.05rem,4.2vw,1.4rem); line-height:1.3; letter-spacing:-.015em;
}
/* small technical annotation, set like a note on a drawing */
.sfacts{
  font-weight:500; max-width:30ch; margin:clamp(18px,3.6vw,26px) 0 0; opacity:.6;
  font-size:clamp(.92rem,3.4vw,1.08rem); line-height:1.65; letter-spacing:-.005em;
}
/* the 34px rule that sat above this read as a stray dash, not a note */
.sbig{ margin:0; letter-spacing:-.018em; line-height:.86 }
.sbig .reg{ font-size:.2em; vertical-align:baseline; position:relative; top:-1.9em; letter-spacing:0 }
.sone{ margin:clamp(14px,3vw,22px) 0 0; font-weight:700;
  font-size:clamp(1.3rem,5.4vw,1.9rem); line-height:1.1; letter-spacing:-.025em }

@media (min-width:900px){
  .swrap{ height:720svh }
  .sstage{ left:auto; right:12vw; transform:translateY(-50%); height:min(76svh,720px) }
  .scopy{ right:auto; width:min(44vw,640px); top:50%; transform:translateY(-50%) }
  .scopy .huge{ max-width:13ch }
  .sone{ font-size:clamp(1.5rem,2.3vw,2.1rem) }
  .sl-mid{ font-size:clamp(2.1rem,3.3vw,3.3rem); max-width:18ch }
  .ssub{ font-size:clamp(1.1rem,1.6vw,1.45rem); max-width:30ch }
  .sfacts{ font-size:clamp(.95rem,1.15vw,1.08rem); max-width:52ch }
}

/* on a phone the copy is at the top and the drill stands under it.
   The product chapter is the one that carries three levels at once,
   so on a phone it uses the whole frame: the mark at the top, the
   instrument in the middle, and the annotation at the foot, where it
   reads as a caption instead of crossing the burr. */
@media (max-width:899px){
  .sstage{ top:54%; transform:translate(-50%,-50%); height:min(44svh,420px) }
  .scopy{ bottom:calc(env(safe-area-inset-bottom,0px) + clamp(18px,3svh,40px)) }
  /* an 11ch cap broke "has an instrument" in half, so the opening read
     as six ragged lines instead of the three it is written as */
  .scopy .huge{ max-width:none; font-size:clamp(1.9rem,8.2vw,3rem); line-height:1 }
  .scopy .huge .hl{ display:block }
  .sl{ bottom:0 }
  .sl-b{ display:flex; flex-direction:column; justify-content:flex-start }
  .sl-b .sbig{ font-size:clamp(3rem,13vw,4.4rem) }
  .sl-b .sone{ margin-top:clamp(10px,2.4vw,16px); font-size:clamp(1.2rem,4.8vw,1.6rem) }
  .sl-b .sfacts{ margin-top:auto; max-width:34ch; font-size:clamp(.88rem,3.2vw,1rem) }
}

/* the stage closes on paper, and the body behind it is paper too, so the
   frame can simply dissolve as it releases instead of sliding away */
#table.tbl{ background:var(--paper) }

@media (prefers-reduced-motion:reduce){
  .swrap{ height:auto; background:var(--paper) }
  .ssticky{ position:relative; height:auto; padding:clamp(60px,12svh,110px) 0 }
  .sbg-dark,.sbg-warm{ display:none }
  .sbg-paper{ opacity:1 }
  .sstage{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
    transform:none; margin:clamp(40px,8svh,80px) auto; height:min(60svh,520px) }
  .scopy{ position:relative; top:auto; transform:none; width:auto; color:var(--ink) }
  .sl{ position:relative; opacity:1; transform:none; margin-bottom:clamp(30px,6vw,52px) }
  #story .pasm .pp{ opacity:1 }
}

/* the way through to the product, at the foot of the Burrow chapter. It
   is a link, not a button: the page already ends on one action and this
   is an aside off the product, not a second ask. */
.sgo{
  display:inline-flex; align-self:flex-start; align-items:center; gap:.5em;
  margin:clamp(16px,3vw,24px) 0 0; text-decoration:none;
  color:inherit; opacity:.72; letter-spacing:-.012em;
  font-weight:600; font-size:clamp(.98rem,3.8vw,1.1rem);
  border-bottom:1px solid currentColor; padding-bottom:.22em; line-height:1;
  transition:opacity .25s ease;
}
.sgo:hover{ opacity:1 }
@media (min-width:900px){ .sgo{ font-size:clamp(1rem,1.25vw,1.12rem) } }

/* ---------- 13. THE BENCH ANNOUNCES ITSELF --------------------
   The stage dissolved and the bench simply started moving, so the two
   read as unrelated. The bench now opens with a line of its own, in
   the exact place the stage's last line was standing, so the eye does
   not have to go looking for the next chapter. The line holds, the
   instruments come in behind it as it clears, and only then do they
   start to cross.                                                */

#table.tbl{ height:250svh!important }
@media (max-width:899px){ #table.tbl{ height:210svh!important } }

.tbl-open{
  position:absolute; z-index:5; margin:0;
  left:clamp(30px,7vw,96px); right:clamp(30px,7vw,96px);
  top:calc(env(safe-area-inset-top,0px) + clamp(96px,15svh,170px));
  max-width:11ch; color:var(--ink); letter-spacing:-.03em;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
.tbl-open.on{ opacity:1; transform:none }

/* the line comes first and the instruments come after it, so while the
   line is up the bench is empty and the frame still belongs to the type */
#table.opening #tblTrack,
#table.opening #tblCap,
#table.opening .tbl-lead{ opacity:0!important }
#tblTrack{ transition:opacity .6s cubic-bezier(.22,.61,.36,1) }

@media (min-width:900px){
  .tbl-open{ right:auto; width:min(44vw,640px); max-width:13ch;
    top:50%; transform:translateY(calc(-50% + 16px)) }
  .tbl-open.on{ transform:translateY(-50%) }
}
@media (max-width:899px){
  .tbl-open{ max-width:none; font-size:clamp(1.9rem,8.2vw,3rem); line-height:1 }
}

/* the caption sits under the card it names. On a wide screen the cards
   cross through the middle of the frame while the caption sat against
   the left margin, so the name read as belonging to whatever was
   leaving on the left. */
@media (min-width:900px){
  #tblCap{ left:calc(50% - min(26vw,450px)); right:auto; width:min(52vw,900px) }
}
@media (prefers-reduced-motion:reduce){
  #table.tbl{ height:auto!important }
  .tbl-open{ position:relative; top:auto; transform:none; opacity:1;
    padding:0 clamp(30px,7vw,96px); margin-bottom:clamp(30px,6vw,52px) }
}

/* the bench used to end on an empty slot with a single line drawn in it.
   On a phone that is a blank screen, and a blank screen reads as broken
   rather than as meaning. The bench ends on the last instrument. */

/* the instrument's line is a statement about the instrument, not an
   aside, so it is set in the sans with the rest of the page. The italic
   serif still lives in the dialogs and on the other two pages; retiring
   it everywhere is a brand decision, not a page one. */
#tblCap .tcap-s{
  font-family:inherit!important; font-style:normal!important; font-weight:500!important;
  letter-spacing:-.015em; opacity:.62;
}

/* ---------- 14. THE CLOSE ------------------------------------
   The page ends on the surgeon. Two ways in: bring us the idea, or go
   and look at the board. No accent colour: the page is near black and
   paper, and the only thing that separates the two actions is weight. */

#join .jsub{
  margin:clamp(16px,3vw,24px) 0 clamp(30px,6vw,46px);
  color:rgba(243,241,236,.66); opacity:1; max-width:28ch;
  font-family:inherit; font-style:normal;
}
#join .jnext{
  display:flex; align-items:center; gap:.5em;
  margin-top:clamp(18px,3.4vw,26px);
  color:rgba(243,241,236,.6); text-decoration:none;
  font-size:clamp(.95rem,3.6vw,1.05rem); letter-spacing:-.01em;
}
#join .jnext:hover{ color:#F3F1EC }
#join .askPill{ display:inline-flex }
@media (min-width:900px){
  #join .jnext{ font-size:clamp(.98rem,1.2vw,1.1rem) }
}

/* ---------- 15. THE TYPE --------------------------------------
   Helvetica. The display face the site shipped with had a personality
   of its own and spent it competing with the instruments. Helvetica
   has none, which is exactly why it works here.

   No webfont is shipped. The stack asks for Helvetica Now Display
   first, so a licensed copy is a drop-in later with nothing else
   changing, then falls back to Helvetica Neue, which is already on
   every Mac and iPhone, then to the Helvetica-metric faces that Linux
   and Windows carry. If we later want one identical rendering on every
   machine, that is one self-hosted file and this stack stays as it is.

   Everything that asked for weight 900 or a width axis is pinned to
   700 and normal, because Helvetica has no 900 and faking one out of
   the bold smears the letterforms.                               */

:root{
  --coba-sans:'Helvetica Now Display','Helvetica Neue',Helvetica,
              'Nimbus Sans','Liberation Sans',Arial,sans-serif;
}

body,
.copy,.step p,.role p,.note,.turnPunct,.fine,.fineprint,.f2-copy,
.boardCopy,.talk-lede,.why-p,.spineFoot,.node span,.her-p2,
.huge,.colossal,.mid,.micro,.label,.stmt,.sbig,.sone,.sl-mid,
.ssub,.sfacts,.tbl-open,.tcap-n,.jsub,.rl,.nl,.who,.rk,
h1,h2,h3,button,input,textarea{
  font-family:var(--coba-sans)!important;
}

body{ font-variation-settings:normal!important }
.huge,.colossal,.mid,.sbig,.sone,.sl-mid,.tbl-open,.tcap-n,
.stmt,.hero-stmt,.mbig,.rl,.nl,h1,h2,h3{
  font-variation-settings:normal!important;
  font-weight:700!important;
}
.huge,.colossal,.mbig,.sbig{ letter-spacing:-.045em!important }
.mid,.sone,.sl-mid{ letter-spacing:-.032em!important }
.micro,.label,.who,.rk{ font-weight:700!important; font-variation-settings:normal!important }
.ssub,.sfacts,.note,.copy,.tcap-s,.jsub{
  font-weight:400!important; font-variation-settings:normal!important;
}

/* ---------- 16. NO COLOUR ON THE PAGE -------------------------
   A pass of split light was tried here and cut. Near black, warm
   white and the graphite of the instrument are the whole palette.
   If colour is ever introduced it has to come from something the
   page is actually doing, not from a light effect laid over it. */

#story .sprism{ display:none!important }

/* ---------- 17. THE ENDING STARTS WHERE THE BENCH ENDS ----------
   The ending used to climb 62svh over the capabilities chapter. That
   chapter is gone, so the climb was eating the last beat of the bench
   (the empty space) before it could be read. */
#join{ margin-top:0!important }

/* ---------- 18. THE INVITATION -------------------------------
   The page ends on the Development Board itself rather than on a
   question. Three levels: the name, the reason, and what it is. */
/* the ending sat hard against the foot of the frame with half a screen
   of empty black above it. It reads as a composed last page centred. */
#join{ justify-content:center!important }
#join .huge{ max-width:16ch; letter-spacing:-.04em }
/* the one action should never run wider than the column */
#join .askPill{ max-width:100%; white-space:normal; text-align:left }
#join .jsub{
  margin:clamp(20px,4vw,30px) 0 clamp(34px,7vw,54px);
  max-width:30ch; color:rgba(243,241,236,.66);
  font-family:inherit; font-style:normal; opacity:1;
}
@media (min-width:900px){
  #join .huge{ max-width:14ch }
  #join .jsub{ max-width:34ch }
}

/* ---------- 19. THE BENCH HANDS OVER -------------------------
   The empty space used to be covered by the ending, which arrived as a
   black rectangle sliding up. The bench's last beat now lifts and
   clears as the board climbs into the frame, so the two read as one
   move rather than two sections meeting. */

#tblTrack, #tblCap{ will-change:transform }

/* arrows are drawn, never typed: iOS renders the up-right arrow character
   as a colour emoji, which this page has no business carrying. */
.ar{
  width:.72em; height:.72em; flex:none; margin-left:.12em;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
a.askPill .ar{ width:.8em; height:.8em; margin-left:.2em; stroke-width:1.6 }

/* ---------- 20. ONE VOICE ON ALL THREE PAGES -----------------
   Section 15 set Helvetica through a list of selectors, which left
   behind everything the other two pages style under a name of their
   own: the italic serif in the captions and dialogs, and the blue and
   amber accents. Helvetica is the face of the brand, so it is set
   once, for everything, and the second voice retires with it.

   The :not(#_) carries no meaning beyond specificity. The rules being
   overridden are single classes marked important, so a plain universal
   selector loses to them however late it sits in the cascade. */

:root{ --serif:var(--coba-sans) }

body:not(#_), body *:not(#_), body *:not(#_)::before, body *:not(#_)::after{
  font-family:var(--coba-sans)!important;
  font-variation-settings:normal!important;
}
/* the italic serif was the aside. There is no aside: the three levels
   of Helvetica carry it. Real emphasis keeps its italic. */
body *:not(#_):not(em):not(i){ font-style:normal!important }

/* No accent colour on any page. The homepage is near black, warm white
   and the graphite of the instrument, and the other two now match. */
.l2:not(#_), .ll .l2:not(#_){ color:inherit!important; opacity:.6 }
#how-it-works .who:not(#_),
#how-it-works .again:not(#_),
#the-role .rk:not(#_){ color:var(--graphite)!important }
#how-it-works .step:not(#_){ border-left-color:rgba(12,13,15,.16)!important }
#how-it-works .step:not(#_)::after{ background:rgba(12,13,15,.46)!important }
#how-it-works .again:not(#_)::before{ border-color:rgba(12,13,15,.16)!important }
.loop-svg:not(#_) .ring-on{ stroke:var(--graphite)!important }
.loop-svg:not(#_) .dot{ fill:var(--graphite)!important }
.loop-svg:not(#_) .ln.on circle{ fill:var(--graphite)!important; stroke:var(--graphite)!important }
.loop-svg:not(#_) text{ fill:var(--graphite)!important }

/* "and again" was landing on top of the last step's line on a phone */
@media (max-width:899px){
  #how-it-works .step:last-of-type:not(#_){ padding-bottom:clamp(20px,5vw,34px)!important }
}

/* ---------- 21. THREE THINGS THE SCAN FOUND -------------------
   Measured at 390, 430 and 1440 on all three pages. */

/* "surgeon's hands." is held on one line and Helvetica sets it a few
   pixels wider than the face it replaced, so on a 390px phone the last
   letters were cut off. It wraps on the narrowest screens. */
@media (max-width:420px){
  .l1b:not(#_){ white-space:normal!important }
}

/* "Explore Burrow" is a 20px line of type, so the thing you actually
   tap was half the size it should be. The hit area is extended without
   moving the rule under the words. */
.sgo{ position:relative }
.sgo::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%);
}
/* and the Tell Coba button measured 43px against a 44px target */
.tellBtn:not(#_), .tellPill:not(#_){ min-height:44px }

/* ---------- 22. THE BURROW RENDER CLEARS THE STEPS ------------
   The drill's frame and the three steps are positioned independently
   of each other, so whether they collided depended on the height of
   the phone. Measured: 28px apart on a 430x932, and 85px ON TOP of
   each other on a 390x667. The render was sitting on "You identify
   it." and its drop shadow reached further still.

   Above 830px of viewport there is room for both, with the drill a
   little smaller. Below that there is not, and a drill printed over
   the process is worse than no drill, so it steps aside. */
@media (max-width:899px){
  #how-it-works .hiw-stage:not(#_){ height:28svh }
}
@media (max-width:899px) and (max-height:829px){
  #how-it-works .hiw-stage:not(#_){ display:none }
}

/* ---------- 23. IN THE LAB OPENS IN ONE FRAME -----------------
   The page built the Kerrison twice: once in a hero that held a
   close-up under the title, and again in a second sticky frame below
   it that told the story. Two frames, two copies of the same
   instrument, and a cut between them. They are one frame now, the way
   the homepage is: the instrument never leaves it, and the copy slot
   changes over it. */

#bench.bench:not(#_){
  /* it used to climb a full screen over the hero to blend the two
     frames. With one frame there is nothing to climb over. */
  margin-top:0!important; box-shadow:none!important;
  height:520svh;
  background:linear-gradient(180deg,#F3F1EC 0%,#EEE7DC 16%,#ECE9E3 38%,#E7E3DB 72%,var(--paper) 100%);
}
@media (max-width:899px){ #bench.bench:not(#_){ height:470svh } }

/* the title shares the copy slot with the story and sits where the
   story's first line will stand, so nothing jumps when it hands over */
#bench .bench-title{
  position:absolute; z-index:3; margin:0;
  left:clamp(30px,7vw,96px); right:clamp(30px,7vw,96px);
  top:calc(env(safe-area-inset-top,0px) + clamp(90px,15vh,160px));
  color:var(--ink); will-change:opacity,transform;
  transition:opacity .25s linear;
}
#bench .scrollcue{ z-index:4 }

@media (prefers-reduced-motion:reduce){
  #bench.bench:not(#_){ height:auto }
  #bench .bench-title{ position:relative; top:auto; left:auto; right:auto;
    padding:0 clamp(30px,7vw,96px); margin-bottom:clamp(24px,5vw,44px) }
}