/* Homepage only. Sections that exist nowhere else. */

/* ============ SCROLL STAGE : hero assembles into the next image ============ */
.sstage{position:relative;height:260vh;background:var(--stone)}
.sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden}
/* scales with the window so the gap under the nav holds on a short laptop
   and on a tall display. home.js reads this block's height to place the
   picture, so raising it moves the picture down with it. */
.hero-txt{position:absolute;left:0;right:0;top:0;padding:clamp(100px,16.4vh,170px) var(--gut) 0;text-align:center;z-index:4;will-change:opacity,transform}
.hero-txt h1{max-width:15ch;margin:0 auto}
.hero-txt h1 .acc{background:var(--ember);color:var(--ink);border-radius:10px;padding:.02em .16em .09em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-txt .sub{max-width:50ch;margin:24px auto 0;color:#4A5342}
.hero-txt .pair{justify-content:center;margin-top:28px}
.hero-txt .fine{margin-top:14px;font-size:15px;color:#6B7464}

/* top anchored on purpose. home.js measures this block and sets paddingTop so the
   copy and the picture centre in the stage as one group. Do not centre it here,
   that fights the measurement and the heading ends up in the wrong place. */
.next-txt{position:absolute;left:0;right:0;top:0;padding:94px var(--gut) 0;text-align:center;z-index:4;opacity:0;pointer-events:none;will-change:opacity,transform}
.next-txt .pair{justify-content:center;margin-top:30px}
.next-txt h2{margin:0 auto}
.next-txt p{max-width:46ch;margin:18px auto 0;font-size:19px;color:#4A5342}

/* the centre frame */
.centre{position:absolute;left:50%;top:66%;width:min(640px,46vw);z-index:3;will-change:transform,top;transform-origin:50% 0;transform:translateX(-50%)}
/* The document mock itself now lives in brand.css, because four other pages
   use it and none of them load this file. What stays here is the homepage
   stage behaviour: one system visible at a time, and the row by row reveal
   home.js drives. Scoped to .sys so a static frame on another page is
   simply visible. */
.sysset{position:relative}
.sys{display:none}
.sys.on{display:block}
.doc.sys li{opacity:0;transform:translateY(6px);
  transition:opacity 420ms ease,transform 420ms cubic-bezier(.16,.84,.3,1)}
.doc.sys li.on{opacity:1;transform:none}
.skel{position:absolute;left:22px;right:22px;top:62px;display:flex;flex-direction:column;gap:21px;transition:opacity 420ms ease}
.skel.gone{opacity:0}
.skel span{height:11px;border-radius:4px;background:#F1EDDE;display:block}
.skel span:nth-child(1){width:62%}.skel span:nth-child(2){width:48%}
.skel span:nth-child(3){width:70%}.skel span:nth-child(4){width:38%}

/* ask field */
.ask{width:min(560px,84vw);margin:26px auto 0;background:var(--paper);border:1px solid #E7E3D4;border-radius:var(--r-small);box-shadow:var(--sh1);padding:14px 20px;display:flex;align-items:center;gap:14px;text-align:left}
.ask .lab{flex:none;color:var(--grey3)}
.ask .q{font-size:17px;color:var(--ink);min-height:23px}
.ask .cr{width:1.5px;height:19px;background:var(--ember);margin-left:auto;flex:none;animation:blink 1.06s steps(2,start) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* the flying pieces */
.pc{position:absolute;width:clamp(190px,15vw,232px);z-index:2;background:var(--paper);border-radius:var(--r-small);box-shadow:var(--sh2);padding:14px 16px;will-change:transform;transform-origin:50% 50%}
.pc .lab{display:block;margin-bottom:10px;font-size:10px;color:var(--grey3)}
.pc .ln{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;color:var(--grey1)}
.pc .ln b{width:6px;height:6px;border-radius:50%;background:var(--sage);display:block;flex:none;font-size:0}
.pc .ln.e b{background:var(--ember)}
.pc.q .qt{margin:0;font-size:15.5px;line-height:1.34;color:var(--ink);letter-spacing:-.005em}
.pc.q .by{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey3);font-family:"Martian Mono"}
.blk{position:absolute;z-index:1;border-radius:var(--r-img);will-change:transform,opacity}
.b1{width:64px;height:64px;background:var(--haze)}
.b2{width:44px;height:44px;background:var(--haze)}
.b3{width:52px;height:52px;background:#E0D9C8}
.cur{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:5px;pointer-events:none;will-change:transform,opacity}
.cur svg{width:18px;height:18px;filter:drop-shadow(0 2px 5px rgba(20,24,15,.22))}
.cur span{font-family:"Martian Mono";font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--forest);border-radius:6px;padding:4px 7px;margin-top:9px}
.cur.b span{background:var(--ember);color:var(--ink)}

/* static fallback for small screens */
.fallback{display:none}


/* ============ HOW IT WORKS, 4 steps ============ */
.steps{position:relative;margin-top:48px}
.steps .row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps .st{text-align:center;position:relative}
.steps .st .ring{position:relative;width:76px;height:76px;margin:0 auto 26px;border-radius:50%;background:var(--stone);display:grid;place-items:center}
.steps .st .ring svg{width:26px;height:26px;color:var(--moss)}
.steps .st .n{position:absolute;top:-4px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--forest);color:var(--cream);display:grid;place-items:center;font-size:13px;font-weight:550;font-variant-numeric:tabular-nums}
.steps .st:last-child .n{background:var(--ember);color:var(--ink)}
.steps .st .bar{position:absolute;top:38px;left:calc(50% + 50px);right:calc(-50% + 50px);height:1px;background:var(--haze);transform:scaleX(0);transform-origin:left;transition:transform 700ms cubic-bezier(.16,.84,.3,1)}
.steps.in .st .bar{transform:scaleX(1)}
.steps.in .st:nth-child(2) .bar{transition-delay:220ms}
.steps.in .st:nth-child(3) .bar{transition-delay:440ms}
.steps .st:last-child .bar{display:none}
.steps .st h5{margin-bottom:10px}
.steps .st p{font-size:16px;line-height:1.4;color:var(--grey1);max-width:30ch;margin:0 auto}
#how .pair{justify-content:center;margin-top:52px}
#terms .pair{justify-content:center;margin-top:52px}


/* ============ SAVINGS CALCULATOR ============ */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;align-items:stretch}
.cbox{border-radius:var(--r-card);padding:26px 26px 28px;background:var(--paper);box-shadow:var(--sh1);
  display:flex;flex-direction:column;min-height:212px;text-align:left}
.cbox>.lab{display:block;margin-bottom:16px;color:var(--grey3)}
.cbox .ctrl{margin-top:auto;padding-top:22px}
.cbox.them{background:transparent;box-shadow:none;border:0}
.cbox .hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cbox .hd h5{font-size:19px}
.cbox .cap2{font-size:15px;color:var(--grey2);margin-bottom:22px}
.cbox .big{font-family:Archivo;font-stretch:115%;font-weight:500;font-size:clamp(40px,4.6vw,58px);letter-spacing:-.02em;line-height:1;color:var(--forest);display:flex;align-items:baseline;gap:10px}
.cbox.them .big{color:#9A5A3C}
.cbox .big em{font-style:normal;font-family:"Hanken Grotesk";font-size:18px;font-weight:400;color:var(--grey2)}
.ctrl{margin-top:24px}
.ctrl .lb{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ctrl .lb .lab{color:var(--grey3)}
.ctrl .lb b{margin-left:auto;font-weight:550;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
/* The track used to be the element itself, five pixels tall, which meant the
   whole touch target was a five pixel strip. On a phone that is close to
   undraggable. The track is now drawn on the pseudo element so the input can
   be 28px tall and still look identical. The negative margins keep the line
   sitting where it always sat. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;display:block;
  background:transparent;outline:none;margin:-5px 0 -8px;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:var(--r-pill);background:var(--haze)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-8.5px;width:22px;height:22px;
  border-radius:50%;background:var(--forest);cursor:pointer;border:3px solid var(--paper);
  box-shadow:0 1px 5px rgba(20,24,15,.3)}
input[type=range]::-moz-range-track{height:5px;border-radius:var(--r-pill);background:var(--haze)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--forest);
  cursor:pointer;border:3px solid var(--paper);box-shadow:0 1px 5px rgba(20,24,15,.3)}
input[type=range]:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chips button{border:1px solid var(--haze);background:var(--paper);border-radius:var(--r-pill);padding:8px 16px;font-family:inherit;font-size:15px;color:var(--grey1);cursor:pointer;transition:all var(--t)}
.chips button:hover{border-color:var(--sage)}
.chips button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--haze);border-radius:var(--r-small);padding:13px 15px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8377' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
select:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.inc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.inc div{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--grey1)}
.inc div svg{width:11px;height:11px;color:var(--sage);flex:none}
.inc div.no svg{color:#C79A6E;transform:rotate(180deg)}
.inc.cost div.no svg{transform:none}
.foot-note{margin-top:16px;font-size:14px;line-height:1.45;color:var(--grey2);font-style:italic}

.result{margin-top:20px;background:var(--forest);border-radius:var(--r-card);padding:26px 28px;text-align:left}
.result .top{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.result .top .lab{color:var(--haze)}
.result .top .hero-n{margin-left:auto;font-family:Archivo;font-stretch:115%;font-weight:450;font-size:clamp(44px,6vw,76px);letter-spacing:-.02em;color:var(--cream);line-height:1}
.meter{margin-top:18px;height:8px;border-radius:var(--r-pill);background:var(--moss);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ember);width:0;transition:width 620ms cubic-bezier(.16,.84,.3,1)}
.tiles{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--moss);border-radius:var(--r-small);overflow:hidden}
.tiles .t{background:#26492A;padding:15px 16px}
.tiles .t .k{display:block;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
.tiles .t .v{display:block;font-family:Archivo;font-stretch:115%;font-weight:450;font-size:30px;letter-spacing:-.015em;color:var(--cream);line-height:1}
.tiles .t .s{display:block;margin-top:7px;font-size:13.5px;color:var(--haze)}
.tiles .t .v{font-size:27px}
.tiles .t.hot .v{color:var(--ember)}
.result .line{margin-top:22px;font-size:17px;color:var(--haze)}
.result .line b{color:var(--cream);font-weight:500}



/* ============ THE DEEP SECTION, glow plate + three roles ============
   The band itself now lives in brand.css, because the role pages use it too
   and they do not load this file. What stays here is the lit scene. */
/* the light sits behind the plate, so the scene is what is lit */
.plate-wrap{position:relative;margin:44px auto 0;max-width:960px;transform:translate3d(0,var(--par,0px),0);will-change:transform}
.deep .glow{position:absolute;left:50%;pointer-events:none;opacity:0;border-radius:50%;
  transition:opacity 1200ms ease, transform 1500ms cubic-bezier(.16,.84,.3,1)}
.deep .glow.cool{top:48%;width:172%;height:250%;transform:translate(-50%,-50%) scale(.8);
  background:radial-gradient(closest-side, rgba(150,186,156,.50) 0%, rgba(140,174,146,.22) 40%, rgba(33,66,36,0) 74%)}
.deep .glow.warm{top:70%;width:104%;height:172%;transform:translate(-50%,-50%) scale(.76);
  background:radial-gradient(closest-side, rgba(224,122,31,.40) 0%, rgba(224,122,31,.15) 40%, rgba(224,122,31,0) 72%)}
.deep .glow.cool.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.deep .glow.warm.on{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:180ms}

.plate{position:relative;z-index:2;text-align:left;margin:0 auto;max-width:1000px;background:var(--paper);border-radius:var(--r-card);box-shadow:0 0 0 1px rgba(20,24,15,.05), 0 40px 80px -30px rgba(10,20,12,.55);overflow:hidden;
  opacity:0;transform:translateY(34px) scale(.985);transition:opacity 900ms ease, transform 1100ms cubic-bezier(.16,.84,.3,1)}
.plate.on{opacity:1;transform:none}
.plate .pbar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line);background:#FDFCF6}
.plate .pbar i{width:9px;height:9px;border-radius:50%;background:#E4E0D1;display:block}
.plate .pbar b{margin-left:12px;font-weight:550;font-size:15px;color:var(--ink)}
.plate .pbar .chip{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--haze);border-radius:var(--r-pill);padding:5px 12px;font-family:"Martian Mono";font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.plate .pbar .chip em{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--ember);display:block}
.plate .pbody{display:grid;grid-template-columns:1.32fr .68fr;gap:0}
.thread{padding:22px 22px;border-right:1px solid var(--line)}
.thread .msg{display:grid;grid-template-columns:34px 1fr;gap:13px;padding:11px 0;border-top:1px solid #F3EFE0;opacity:0;transform:translateY(8px);transition:opacity 460ms ease,transform 560ms cubic-bezier(.16,.84,.3,1)}
.thread .msg:first-child{border-top:0}
.plate.on .thread .msg{opacity:1;transform:none}
.plate.on .thread .msg:nth-child(1){transition-delay:320ms}
.plate.on .thread .msg:nth-child(2){transition-delay:520ms}
.plate.on .thread .msg:nth-child(3){transition-delay:720ms}
.plate.on .thread .msg:nth-child(4){transition-delay:920ms}
.thread .av{width:36px;height:36px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:12.5px;font-weight:550;color:var(--forest);letter-spacing:.02em}
.thread .av.a{background:var(--forest);color:var(--cream)}
.thread .whoq{display:block;font-family:"Martian Mono";font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey3);margin-bottom:6px}
.thread .msg p{font-size:16.5px;line-height:1.4;color:var(--ink)}
.thread .msg p mark{background:#FBEBD8;color:var(--ink);border-radius:4px;padding:0 4px}
.side{padding:20px;display:flex;flex-direction:column;gap:16px;background:#FDFCF6}
.tile{border:1px solid var(--line);border-radius:var(--r-img);background:var(--paper);padding:16px;opacity:0;transform:translateY(10px);transition:opacity 520ms ease,transform 620ms cubic-bezier(.16,.84,.3,1)}
.plate.on .tile{opacity:1;transform:none}
.plate.on .tile:nth-child(1){transition-delay:1060ms}
.plate.on .tile:nth-child(2){transition-delay:1220ms}
.tile .tt{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.tile .tt span{font-family:"Martian Mono";font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey3)}
.tile .tt b{margin-left:auto;font-size:13px;font-weight:550;color:var(--forest)}
.bars2{display:flex;align-items:flex-end;gap:7px;height:74px}
.bars2 i{flex:1;border-radius:3px 3px 0 0;background:var(--haze);display:block;transform-origin:bottom;transform:scaleY(.1);transition:transform 720ms cubic-bezier(.16,.84,.3,1)}
.plate.on .bars2 i{transform:scaleY(1)}
.plate.on .bars2 i:nth-child(1){transition-delay:1180ms}
.plate.on .bars2 i:nth-child(2){transition-delay:1250ms}
.plate.on .bars2 i:nth-child(3){transition-delay:1320ms}
.plate.on .bars2 i:nth-child(4){transition-delay:1390ms}
.plate.on .bars2 i:nth-child(5){transition-delay:1460ms}
.bars2 i.g{background:var(--sage)}
.bars2 i.e{background:var(--ember)}
.asset .ln2{height:8px;border-radius:3px;background:#EFEBDC;display:block;margin-bottom:9px}
.asset .ln2.w1{width:74%}.asset .ln2.w2{width:52%}.asset .ln2.w3{width:88%;background:var(--haze)}
.asset .pillrow{display:flex;gap:6px;margin-top:14px}
.asset .pillrow span{font-family:"Martian Mono";font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);border:1px solid var(--haze);border-radius:var(--r-pill);padding:4px 9px}

.roles3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;text-align:left}
.roles3 .r{opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 800ms cubic-bezier(.16,.84,.3,1)}
.roles3.on .r{opacity:1;transform:none}
.roles3.on .r:nth-child(1){transition-delay:80ms}
.roles3.on .r:nth-child(2){transition-delay:220ms}
.roles3.on .r:nth-child(3){transition-delay:360ms}
.roles3 .r .shot{height:140px;border-radius:var(--r-img);background:#26492A;border:1px solid var(--moss);position:relative;overflow:hidden;margin-bottom:22px}
.roles3 .r .shot .row2{position:absolute;left:18px;right:18px;display:flex;align-items:center;gap:9px}
.roles3 .r .shot .row2 b{font-size:0;width:7px;height:7px;border-radius:50%;background:var(--sage);display:block;flex:none}
.roles3 .r .shot .row2 i{font-style:normal;height:8px;border-radius:3px;background:rgba(195,210,198,.34);display:block}
.roles3 .r .shot .row2.e b{background:var(--ember)}
.roles3 .r .shot .cap3{position:absolute;left:18px;bottom:16px;font-family:"Martian Mono";font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.roles3 .r h5{color:var(--cream);font-size:22px;margin-bottom:10px}
.roles3 .r p{font-size:16px;line-height:1.42;color:var(--haze);max-width:32ch}
.roles3 .r .more2{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:450;color:var(--cream);transition:gap var(--t)}
.roles3 .r .more2:hover{gap:14px}
.roles3 .r .more2 svg{width:12px;height:12px;color:var(--ember)}


/* ============ THE ROLES STRIP ============
   A strip, not three cards. The cards made them read as a product menu; three
   ruled columns under a heading make them read as the three places the time
   goes, which is what they are. */
/* it used to sit directly under another dark section, so it had no top
   padding of its own. It stands alone now. */
.rolestrip{padding-top:84px}
.rolestrip h2{margin:0 auto;max-width:22ch;text-align:center}
.rstrip{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;
  border-top:1px solid rgba(195,210,198,.22)}
/* a column, so the link lands in the same place on all three however long
   the paragraph above it runs */
.rstrip .rs{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 22px 4px;border-right:1px solid rgba(195,210,198,.14)}
.rstrip .rs:last-child{border-right:0}
.rstrip .rs .n{font-family:"Martian Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  color:var(--sage);display:block;margin-bottom:14px;transition:color 150ms linear}
.rstrip .rs h5{color:var(--cream);font-size:21px;margin-bottom:10px}
.rstrip .rs p{font-size:16px;line-height:1.46;color:var(--haze);max-width:32ch;margin-inline:auto}
.rstrip .rs .go{margin-top:auto;padding-top:20px;display:inline-flex;align-self:center;align-items:center;gap:8px;font-size:15px;
  font-weight:450;color:var(--cream);transition:gap var(--t)}
.rstrip .rs .go svg{width:12px;height:12px;color:var(--ember)}
.rstrip .rs:hover .n{color:var(--ember)}
.rstrip .rs:hover .go{gap:14px}

/* ============ RESPONSIVE, homepage sections ============ */
/* small screens: no pinned assembly, everything stacks */
@media (max-width:1100px), (prefers-reduced-motion:reduce){
  .sstage{height:auto}
  /* a column, so the three parts can be ordered the way the desktop
     animation reveals them: the promise, the document, then what it is */
  .sticky{position:static;height:auto;min-height:0;overflow:visible;padding:130px 0 72px;
    display:flex;flex-direction:column}
  .hero-txt{position:static;padding:0 var(--gut);opacity:1!important;transform:none!important;order:1}
  .centre{position:static;width:auto;max-width:640px;margin:36px auto 0;transform:none!important;
    opacity:1!important;order:2}

  /* This block used to be display:none here, which took the heading, the
     paragraph and the Steal our systems button off every screen under
     1100px. On desktop it is the second state of the pinned scroll
     animation, so when that animation was switched off for small screens the
     block went with it and the section lost the only words explaining what
     it is. It is a plain static block now, and home.js writes inline opacity
     and transform onto it, hence the important flags. */
  .next-txt{position:static;display:block;order:3;margin-top:46px;
    padding:0 var(--gut)!important;opacity:1!important;transform:none!important;
    pointer-events:auto!important;z-index:auto}
  .next-txt p{font-size:17px;margin-top:14px}
  .next-txt .pair{margin-top:24px}

  .pc,.blk,.cur{display:none}
  /* The four cards only ever existed to stand in for the floating ones. Once
     they stop floating they are four boxes of someone else's words between
     the reader and the point of the section. */
  .fallback{display:none}
}
@media (max-width:1000px){
  .calc{grid-template-columns:1fr}
  .roles3{grid-template-columns:1fr}
  .plate .pbody{grid-template-columns:1fr}
  .thread{border-right:0;border-bottom:1px solid var(--line)}
  .side{flex-direction:row}
  .side .tile{flex:1}
  .steps .row{grid-template-columns:1fr 1fr;gap:40px 24px}
  .steps .st .bar{display:none}
  .tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .sticky{padding-top:104px}
  .fallback{grid-template-columns:1fr}
  .side{flex-direction:column}
  .steps .row{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .result{padding:26px 22px}
}


/* the sourcing line, one star and a link rather than a paragraph */
.srcline{margin-top:22px;font-size:14.5px}
.srcline a{color:var(--grey2);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color var(--t),border-color var(--t)}
.srcline a:hover{color:var(--ink);border-color:var(--sage)}
.srcline .star{color:var(--ember);font-weight:600}


/* ---- the two dense sections get their own tighter rhythm ---- */
#save{padding:58px 0}
#save .calc{margin-top:32px}
.cbox{min-height:196px}
.result{padding:24px 26px}
.result .top .hero-n{font-size:clamp(40px,5vw,62px)}
.tiles .t{padding:14px 15px}
.tiles .t .v{font-size:25px}
.srcline{margin-top:18px}

#terms{padding:58px 0}
.gbox{margin-top:32px;gap:16px}
.gbox .g{padding:22px 22px}
.gbox .g .k{font-size:34px;margin-bottom:10px}
.gbox .g h5{font-size:18px;margin-bottom:7px}
.gbox .g p{font-size:15.5px;line-height:1.38}
.gbox .g .tagline{padding-top:14px}

#roles{padding-bottom:64px}
#roles .dsub{font-size:18px;margin-top:16px}
#roles3sec{padding-bottom:80px}

/* ---- phone proportions ---- */
@media (max-width:760px){
  #save{padding:48px 0}
  .calc{margin-top:26px;gap:14px}
  .cbox{min-height:0;padding:22px 22px}
  .cbox .big{font-size:40px}
  .result{margin-top:14px;padding:22px 20px}
  .tiles{grid-template-columns:1fr 1fr;margin-top:16px}
  .tiles .t .v{font-size:23px}
  #terms{padding:48px 0}
  .steps{margin-top:32px}
  .steps .row{gap:28px 18px}
  .steps .st .ring{width:64px;height:64px;margin-bottom:18px}
  .plate-wrap{margin-top:30px}
  .roles3 .r .shot{height:118px;margin-bottom:16px}
  .mq{padding:32px 0}
}

@media (max-width:760px){
  /* four steps as two rows reads as one screen, four stacked does not */
  .steps .row{grid-template-columns:1fr 1fr !important;gap:26px 16px}
  .steps .st p{font-size:14.5px;max-width:none}
  .steps .st h5{font-size:17px}
  #how{padding:48px 0}
  #how .pair{margin-top:36px}
  /* the plate is the picture, the thread inside it can be shorter */
  .plate .pbody{grid-template-columns:1fr}
  .thread .msg:nth-child(4){display:none}
  .side{display:none}
  .plate-wrap{margin-top:26px}
  #roles .dsub{font-size:16.5px}
}
@media (max-width:600px){
  .sticky{padding-top:96px;padding-bottom:56px}
  .fallback{margin-top:12px}
}

/* ---------- the roles strip on small screens ---------- */
@media (max-width:1000px){
  .rstrip{grid-template-columns:1fr;gap:0}
  .rstrip .rs{border-right:0;border-bottom:1px solid rgba(195,210,198,.14);padding:26px 0}
  .rstrip .rs:last-child{border-bottom:0}
  .rstrip .rs p{max-width:none}
}