/* =========================================================
   RudeSheep — rudesheep.com
   Single-theme by design: wool white ground, ink type,
   one loud blue panel. See design direction doc.
   ========================================================= */

:root{
  --ink:#121116;
  --ink-80:#3A3843;
  --muted:#6E6B79;
  --wool:#FAFAF7;
  --paper:#FFFFFF;
  --grey:#E9E7E0;
  --grey-2:#F1F0EB;
  --line:#D8D5CD;
  --blue:#3A2BF0;
  --blue-ink:#1A0FA8;
  --orange:#F0481C;

  --pad:clamp(16px,3vw,40px);
  --gut:clamp(28px,5vw,72px);
  --r-lg:28px;
  --r-md:18px;

  --f-display:"Anton","Arial Narrow",Impact,sans-serif;
  --f-body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the page sits as a sheet of paper on a dark desk */
.sheet{
  background:var(--wool);
  margin:12px;
  border-radius:24px;
  overflow:clip;
}
@media (max-width:768px){
  .sheet{margin:0;border-radius:0}
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type primitives ---------- */
.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.84;
  letter-spacing:.005em;
}
.mono{
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.13em;
  text-transform:uppercase;
}
@media (min-width:900px){ .mono{font-size:12.5px} }

.h2{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.9;
  font-size:clamp(38px,7vw,86px);
  letter-spacing:.005em;
}
.h3{font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.01em}
.body{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink-80);max-width:56ch}

.section{padding:var(--gut) var(--pad)}
.section__head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:var(--gut);
  border-bottom:1px solid var(--line);
}
.section__head .mono{color:var(--muted)}
.section__head .mono:last-child{margin-left:auto}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--wool);
  font-family:var(--f-body);font-size:15px;font-weight:600;
  padding:15px 26px;border-radius:999px;
  border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s;
}
.pill:hover{transform:translateY(-2px);background:var(--blue-ink)}
.pill--light{background:var(--wool);color:var(--ink)}
.pill--light:hover{background:var(--paper);color:var(--blue)}
.pill--sm{font-size:13px;padding:11px 20px}
.pill--ghost{background:transparent;color:var(--wool);box-shadow:inset 0 0 0 1.5px rgba(250,250,247,.6)}
.pill--ghost:hover{background:rgba(250,250,247,.12);color:var(--wool)}
.pill .arw{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.pill:hover .arw{transform:translateX(4px)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  display:flex;align-items:center;gap:20px;
  padding:20px var(--pad);
}
.nav__mark{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.nav__mark svg{width:26px;height:26px}
.nav__links{display:none;gap:22px;margin:0 auto}
.nav__links a{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__cta{margin-left:0}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:0 var(--pad) var(--pad);position:relative}
.hero__word{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(76px,20.6vw,340px);
  line-height:.8;
  text-align:center;
  letter-spacing:-.005em;
  position:relative;z-index:1;
  white-space:nowrap;
}
.hero__word span{display:inline-block;will-change:transform}

.hero__panel{
  position:relative;z-index:2;
  margin-top:clamp(-30px,-3.5vw,-14px);
  background:var(--blue);
  border-radius:var(--r-lg);
  min-height:clamp(330px,34vw,470px);
  padding:26px;
  display:grid;
  grid-template-columns:1fr;
  align-content:space-between;
  gap:16px;
  color:var(--wool);
  overflow:hidden;
}
@media (min-width:900px){
  .hero__panel{
    grid-template-columns:minmax(200px,1fr) minmax(240px,34%) minmax(200px,1fr);
    padding:34px 40px;
    align-items:start;
  }
}
.hero__copy{font-family:var(--f-mono);font-size:12px;line-height:1.75;letter-spacing:.1em;text-transform:uppercase;max-width:34ch}
.hero__copy--r{display:none}
@media (min-width:900px){
  .hero__copy--r{display:block;justify-self:end;text-align:right;align-self:end}
  .hero__left{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
}
.hero__spacer{display:none}
@media (min-width:900px){ .hero__spacer{display:block} }

/* vertical mono strips on the panel edges */
.hero__rail{
  position:absolute;top:0;bottom:0;width:26px;
  display:none;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,250,247,.55);
}
.hero__rail--l{left:8px;writing-mode:vertical-rl;transform:rotate(180deg)}
.hero__rail--r{right:8px;writing-mode:vertical-rl}
@media (min-width:1100px){ .hero__rail{display:flex} }

/* the device, floating over word + panel */
.hero__device{
  position:absolute;z-index:3;
  left:50%;transform:translateX(-50%);
  top:clamp(40px,7vw,110px);
  width:clamp(168px,18vw,252px);
}

/* mobile hero: the device unpins and just scrolls */
@media (max-width:899px){
  .hero{display:flex;flex-direction:column}
  .hero__word{order:1}
  .hero__device{
    order:2;position:relative;left:auto;top:auto;transform:none;
    width:min(212px,55vw);margin:-4vw auto -16vw;z-index:3;
  }
  .hero__panel{order:3;padding-top:19vw;min-height:0;margin-top:0}
  .hero__left{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
}

/* =========================================================
   DEVICE (phone mock)
   ========================================================= */
.phone{
  position:relative;
  border:9px solid #17161B;
  border-radius:38px;
  background:var(--blue);
  aspect-ratio:9/18.6;
  box-shadow:0 30px 60px -20px rgba(18,17,22,.45);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.phone__notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:36%;height:16px;border-radius:99px;background:#17161B;z-index:4;
}
.phone__bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px 0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--wool);
}
.phone__screen{padding:20px 16px 0;color:var(--wool);display:flex;flex-direction:column;gap:12px;flex:1}
.phone__ask{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,247,.6)}
.phone__q{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,2.1vw,25px);line-height:.94}
.phone__hr{height:1px;background:rgba(250,250,247,.28)}
.answer{display:flex;flex-direction:column;gap:7px}
.answer li{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;color:rgba(250,250,247,.72);
}
.answer li.you{
  align-self:flex-start;
  color:var(--ink);background:var(--orange);
  border-radius:99px;padding:5px 11px;margin-left:-4px;font-weight:500;
}
.answer li .dot{width:5px;height:5px;border-radius:99px;background:currentColor;flex:none}

/* sheep sitting at the bottom of the screen */
.hero__sheep{
  position:absolute;z-index:5;left:50%;bottom:-2%;
  width:80%;transform:translateX(-50%);
  filter:drop-shadow(0 10px 18px rgba(18,17,22,.28));
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:13px 0;
  background:var(--wool);
}
.marquee__track{
  display:flex;width:max-content;
  will-change:transform;
}
.marquee__track > span{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding-right:28px;white-space:nowrap;
}
.marquee--ink{background:var(--ink);border-color:var(--ink);color:var(--wool)}

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{position:relative;padding:calc(var(--gut) * 1.15) var(--pad);overflow:hidden}
.statement__stack{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;z-index:2;
}
.statement__line{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(44px,10vw,132px);line-height:.86;
  display:flex;align-items:center;gap:.14em;
}
.statement__line--blue{color:var(--blue)}
.paren{font-family:var(--f-mono);font-weight:400;font-size:.82em;line-height:1;color:var(--ink)}
.star{font-family:var(--f-mono);font-size:.42em;line-height:1;align-self:flex-start;margin-top:.2em}
.tile{
  background:var(--blue);border-radius:8px;
  width:clamp(66px,12vw,150px);aspect-ratio:1.12;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:visible;
}
.tile svg{width:82%;margin-bottom:-8%}

.wire{position:absolute;left:0;right:0;display:flex;align-items:center;z-index:1;pointer-events:none}
/* real elements, not pseudo-elements: the lines are drawn on scroll */
.wire__ln{display:block;flex:1;height:1px;background:var(--ink);transform:scaleX(1)}
.wire__ln:first-child{transform-origin:right}
.wire__ln:last-child{transform-origin:left}
.wire .pill{pointer-events:auto}
.wire--a{top:24%}
.wire--a .wire__ln:first-child{flex:8.4}
.wire--a .wire__ln:last-child{flex:1.6}
.wire--b{top:70%}
.wire--b .wire__ln:first-child{flex:2.2}
.wire--b .wire__ln:last-child{flex:7.8}
@media (max-width:800px){ .wire{display:none} }

.statement__note{
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  margin-top:36px;color:var(--muted);position:relative;z-index:2;
}
.statement__claim{
  text-align:center;margin:30px auto 0;max-width:44ch;
  font-size:clamp(18px,2.4vw,26px);font-weight:600;line-height:1.3;letter-spacing:-.015em;
  position:relative;z-index:2;
}

/* =========================================================
   GAP (before / after)
   ========================================================= */
.gap__grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:860px){ .gap__grid{grid-template-columns:1fr 1fr;gap:24px} }
.gapcard{
  background:var(--grey-2);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,34px);
  display:flex;flex-direction:column;gap:18px;
  border:1px solid var(--line);
}
.gapcard--after{background:var(--ink);color:var(--wool);border-color:var(--ink)}
.gapcard__tag{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gapcard__tag .mono{color:var(--muted)}
.gapcard--after .gapcard__tag .mono{color:rgba(250,250,247,.6)}
.gapcard__q{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:.95}
.gapcard .answer li{color:var(--ink-80);font-size:11px}
.gapcard--after .answer li{color:rgba(250,250,247,.7)}
.gapcard__foot{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.gapcard--after .gapcard__foot{color:rgba(250,250,247,.72);border-top-color:rgba(250,250,247,.2)}

/* =========================================================
   SHOWCASE (pinned)
   ========================================================= */
.showcase{padding:0 var(--pad) var(--gut)}
.showcase__panel{
  background:var(--grey);border-radius:36px;
  padding:clamp(24px,4vw,64px) clamp(18px,3vw,48px);
  display:grid;gap:32px;align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .showcase__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px}
}
.showcase__copy{display:flex;flex-direction:column;gap:18px}
.tabs{display:flex;flex-direction:column;gap:0;margin-top:6px;border-top:1px solid rgba(18,17,22,.16)}
.tab{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 4px;border-bottom:1px solid rgba(18,17,22,.16);
  opacity:.42;transition:opacity .35s ease;
}
.tab.is-on{opacity:1}
.tab__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;color:var(--blue)}
.tab__t{font-weight:700;font-size:clamp(17px,1.9vw,21px)}
.tab__d{font-size:13.5px;color:var(--ink-80);margin-left:auto;text-align:right;max-width:22ch;display:none}
@media (min-width:640px){ .tab__d{display:block} }

.report{
  background:var(--paper);border-radius:20px;
  padding:clamp(18px,2.4vw,28px);
  box-shadow:0 24px 50px -24px rgba(18,17,22,.35);
  display:flex;flex-direction:column;gap:16px;
}
.report__top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px}
.report__title{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);line-height:1}
.report__rows{display:flex;flex-direction:column;gap:11px}
.rrow{display:grid;grid-template-columns:minmax(74px,110px) 1fr auto;gap:12px;align-items:center}
.rrow__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.rrow__bar{display:block;height:12px;background:var(--grey-2);border-radius:99px;overflow:hidden}
.rrow__fill{display:block;height:100%;width:0;background:var(--blue);border-radius:99px}
.rrow--you .rrow__fill{background:var(--orange)}
.rrow--you .rrow__k{color:var(--ink);font-weight:500}
.rrow__v{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* =========================================================
   PROOF (blob numbers)
   ========================================================= */
.proof__grid{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:760px){ .proof__grid{grid-template-columns:repeat(3,1fr)} }
.blob{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.blob__art{position:relative;width:min(258px,66vw)}
.blob__art svg{width:100%;height:auto}
.blob__num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,4.4vw,52px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.blob--a .blob__num{color:var(--wool)}
.blob--b .blob__num{color:var(--wool)}
.blob--c .blob__num{color:var(--ink)}
.blob__t{font-weight:700;font-size:17px}
.blob__d{font-size:14px;color:var(--muted);max-width:26ch}

/* =========================================================
   TIMELINE
   ========================================================= */
.tl{position:relative;padding-top:20px}
.tl__line{height:1px;background:var(--ink);position:absolute;left:0;right:0;top:44px}
.tl__grid{display:grid;grid-template-columns:1fr;gap:28px;position:relative}
@media (min-width:800px){ .tl__grid{grid-template-columns:repeat(3,1fr);gap:32px} }
.tl__item{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tl__pin{
  background:var(--ink);color:var(--wool);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 16px;border-radius:99px;
}
.tl__item:last-child .tl__pin{background:var(--blue)}
.tl__h{font-weight:700;font-size:18px;margin-top:6px}
.tl__p{font-size:14.5px;color:var(--ink-80);max-width:34ch}

/* =========================================================
   STACK cards
   ========================================================= */
.stack__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){ .stack__grid{grid-template-columns:repeat(3,1fr);gap:20px} }
.scard{
  background:var(--grey-2);border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:14px;
  min-height:300px;
}
.scard__n{font-family:var(--f-display);font-size:clamp(52px,7vw,86px);line-height:.8;color:var(--ink)}
.scard__t{font-weight:700;font-size:clamp(19px,2vw,23px)}
.scard__p{font-size:14.5px;color:var(--ink-80);line-height:1.55}
.scard__list{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.scard__list li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* =========================================================
   PRICING
   ========================================================= */
.price__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){ .price__grid{grid-template-columns:1fr 1fr;gap:20px} }
.pcard{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:16px;background:var(--paper);
}
.pcard--lead{background:var(--blue);border-color:var(--blue);color:var(--wool)}
.pcard__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.pcard__v{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(40px,6vw,74px);line-height:.86}
.pcard__p{font-size:15px;line-height:1.55;max-width:38ch}
.pcard--lead .pcard__p{color:rgba(250,250,247,.85)}
.pcard__p--muted{color:var(--ink-80)}
.pcard ul{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.pcard--lead ul{border-top-color:rgba(250,250,247,.28)}
.pcard li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.pcard--lead li{color:rgba(250,250,247,.8)}
.pcard li:not(.pcard--lead li){color:var(--muted)}

/* =========================================================
   BOOK
   ========================================================= */
.book{padding:0 var(--pad) var(--gut)}
.book__panel{
  background:var(--blue);color:var(--wool);
  border-radius:36px;
  padding:clamp(28px,4vw,64px);
  display:grid;grid-template-columns:1fr;gap:26px;align-items:end;
  position:relative;overflow:hidden;
}
@media (min-width:900px){ .book__panel{grid-template-columns:1.3fr .7fr} }
.book__line{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(40px,7.4vw,104px);line-height:.86}
.book__sub{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(250,250,247,.78);max-width:40ch;margin-top:18px}
.book__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.book__sheep{width:min(280px,52vw);justify-self:center}
@media (min-width:900px){ .book__sheep{justify-self:end;width:min(320px,26vw)} }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{padding:var(--gut) var(--pad) 0}
.foot__grid{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:820px){ .foot__grid{grid-template-columns:1fr 1fr;gap:40px} }
.foot__cols{display:flex;gap:56px}
.foot__cols a{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;padding:3px 0;transition:color .2s}
.foot__cols a:hover{color:var(--ink)}
.foot__say{display:flex;flex-direction:column;gap:20px}
.foot__say .mono{color:var(--ink-80);max-width:46ch}
.foot__mail{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--blue)}
.foot__mark{margin-top:clamp(30px,4vw,60px)}
.foot__mark svg{width:100%;height:auto;display:block}
.foot__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:16px 0 22px;
  color:var(--muted);
}

/* =========================================================
   MOTION — reveal defaults (JS adds .is-in)
   ========================================================= */
/* Reveal vocabulary. One base + variants, so sections stop sharing a
   single fade-up. JS adds .is-in and sets --d (stagger delay, seconds). */
.rv{
  --d:0s;
  opacity:0;
  transform:translateY(22px);
  will-change:opacity,transform;
}
.rv.is-in{
  opacity:1;transform:none;
  transition:
    opacity .7s cubic-bezier(.2,.7,.3,1) var(--d),
    transform .7s cubic-bezier(.2,.7,.3,1) var(--d),
    clip-path .9s cubic-bezier(.2,.7,.3,1) var(--d);
}

/* a panel that lifts and settles rather than floating up */
.rv--panel{transform:translateY(34px) scale(.975);transform-origin:50% 100%}
.rv--panel.is-in{transition-duration:.9s,.9s,.9s}

/* a card that rises from under its own bottom edge */
.rv--card{
  transform:translateY(40px);
  clip-path:inset(0 0 100% 0);
}
.rv--card.is-in{clip-path:inset(0 0 0% 0)}

/* a rule or divider that draws out from its left edge */
.rv--draw{opacity:1;transform:scaleX(0);transform-origin:left}
.rv--draw.is-in{transform:scaleX(1)}

/* a heading that wipes up from behind its own baseline */
.rv--wipe{
  transform:none;opacity:1;
  clip-path:inset(0 0 110% 0);
}
.rv--wipe.is-in{clip-path:inset(-30% 0 -10% 0)}

/* small type that just resolves, no travel */
.rv--soft{transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rv,.rv--panel,.rv--card,.rv--draw,.rv--wipe{opacity:1;transform:none;clip-path:none}
  .tab{opacity:1}
}

/* =========================================================
   STORY — pinned four-beat sequence
   Every layer here is DOM/SVG so the text stays crisp and
   editable. The sheep sits in its own layer: swap the SVG
   for an image-sequence <canvas> and nothing else changes.
   ========================================================= */
.story{padding:var(--gut) var(--pad)}
.story__stage{position:relative}

.story__label{
  display:flex;align-items:baseline;gap:16px;
  margin-bottom:18px;min-height:1em;
}
.story__n{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--blue)}
.story__w{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5.4vw,66px);line-height:.9;
}

.story__scene{
  position:relative;
  aspect-ratio:16/10;
  max-width:1040px;margin:0 auto;
  background:var(--grey);
  border-radius:36px;
  overflow:hidden;
}

/* --- distribution chips --- */
.targets{position:absolute;inset:0;pointer-events:none}
.chip{
  position:absolute;z-index:4;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--wool);color:var(--ink);
  border:1px solid var(--line);border-radius:99px;
  padding:8px 14px;opacity:0;
}
.chip[data-chip="0"]{left:6%;top:8%}
.chip[data-chip="1"]{left:44%;top:4%}
.chip[data-chip="2"]{right:6%;top:8%}

/* --- sheep --- */
.sheepy{
  position:absolute;left:50%;bottom:46%;
  width:28%;transform:translateX(-50%);
  z-index:1;
  filter:drop-shadow(0 18px 26px rgba(18,17,22,.18));
}
.sheepy__arm{opacity:0}

/* --- laptop --- */
.laptop{position:absolute;left:50%;bottom:6%;width:58%;transform:translateX(-50%);z-index:2}
.laptop__lid{
  background:#17161B;border-radius:14px 14px 4px 4px;
  padding:12px 12px 16px;
}
.laptop__screen{
  background:var(--paper);border-radius:6px;
  aspect-ratio:16/10;
  padding:clamp(10px,1.8vw,22px);
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden;
}
.laptop__base{
  height:12px;background:#2A2830;
  border-radius:0 0 12px 12px;
  margin:0 -4%;
  box-shadow:0 16px 30px -14px rgba(18,17,22,.5);
}
.ed__meta{color:var(--muted);font-size:10px}
.ed__title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(14px,2.2vw,26px);line-height:.98;min-height:1em;
}
.ed__body{font-size:clamp(9px,1.05vw,13px);line-height:1.5;color:var(--ink-80);flex:1}
.ed__caret{display:inline-block;width:.5ch;background:var(--blue);color:transparent}
.ed__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.ed__pub{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--wool);
  border-radius:99px;padding:8px 18px;
  font-size:clamp(10px,1.1vw,13px);font-weight:600;
}
.ed__pub b{position:relative;z-index:2;font-weight:600}
.ed__pub i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);z-index:1}
.ed__count{color:var(--muted);font-size:10px}

/* --- flying posts --- */
.flyer{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--ink);color:var(--wool);
  border-radius:10px;padding:9px 14px;
  z-index:3;opacity:0;pointer-events:none;
}
.flyer .mono{font-size:10px;letter-spacing:.12em}

/* --- story phone --- */
.story__phone{
  position:absolute;left:50%;bottom:9%;
  width:17%;transform:translateX(-50%) scale(.9);
  z-index:2;opacity:0;
  aspect-ratio:9/15.6;
  border-width:7px;border-radius:26px;
}
.story__phone .phone__notch{height:11px;top:7px}
.story__phone .phone__bar{padding:8px 11px 0;font-size:7.5px}
.story__phone .phone__screen{padding:12px 10px 10px;gap:8px}
.story__phone .phone__ask{font-size:7.5px}
.story__phone .phone__q{font-size:clamp(11px,1.5vw,17px);min-height:1em}
.story__phone .answer li{font-size:7.5px;gap:5px;opacity:0}
.story__phone .answer li.you{padding:4px 8px}

/* --- step list --- */
.story__steps{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
  max-width:1040px;margin:22px auto 0;padding:0;list-style:none;
}
@media (min-width:760px){ .story__steps{grid-template-columns:repeat(4,1fr)} }
.story__steps li{
  display:flex;align-items:baseline;gap:10px;
  padding-top:12px;border-top:1px solid var(--line);
  font-weight:600;font-size:15px;color:var(--muted);
  transition:color .3s ease,border-color .3s ease;
}
.story__steps li .mono{font-size:11px;color:inherit}
.story__steps li.is-on{color:var(--ink);border-top-color:var(--ink)}

/* the pinned sequence is desktop-only; small screens get the
   same four beats as a plain scrolling stack */
@media (max-width:759px){
  .story__scene{aspect-ratio:1/1;border-radius:24px}
  .laptop{width:84%}
  .sheepy{width:42%;bottom:52%}
  .story__phone{width:32%}
  .chip{font-size:9px;padding:6px 10px}
  .chip[data-chip="0"]{left:2%;top:3%}
  .chip[data-chip="1"]{left:50%;top:3%;transform:translateX(-50%)}
  .chip[data-chip="2"]{right:2%;top:3%}
}

/* =========================================================
   MECHANISM — the one band that states the claim outright
   ========================================================= */
.mech{padding:0 var(--pad) var(--gut)}
.mech__panel{
  background:var(--ink);color:var(--wool);
  border-radius:36px;
  padding:clamp(28px,4.4vw,68px);
}
.mech__eyebrow{color:rgba(250,250,247,.6);margin-bottom:20px}
.mech__line{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(34px,6.2vw,88px);line-height:.88;
  margin:0 0 clamp(30px,4vw,54px);
}
.mech__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:820px){ .mech__grid{grid-template-columns:repeat(3,1fr);gap:34px} }
.mech__item{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid rgba(250,250,247,.28)}
.mech__item .mono{color:#8877FF;font-size:11px}
.mech__item p{font-size:14.5px;line-height:1.55;color:rgba(250,250,247,.78)}

/* a negative marker inside an answer list */
.answer li.bad{
  align-self:flex-start;
  color:var(--wool);background:rgba(240,72,28,.9);
  border-radius:99px;padding:5px 11px;margin-left:-4px;
}
.gapcard--after .answer li.bad{color:var(--wool)}

/* =========================================================
   PANEL RISE
   The ink and blue panels lift over the section above them,
   so sections stack instead of queueing. Only unpinned
   panels get this — a pinned element cannot also be moved.
   ========================================================= */
.mech,.book{position:relative;z-index:2;margin-top:calc(var(--gut) * -.5)}
[data-rise]{
  will-change:transform;
  box-shadow:0 -26px 50px -28px rgba(18,17,22,.30);
}

/* =========================================================
   HERO ENTRANCE
   The panel grows out of a hairline at its own bottom edge,
   so clip-path — scaling would stretch everything inside it.
   ========================================================= */
.hero__panel{will-change:clip-path,transform}
.hero__device,.hero__sheep{will-change:transform}

/* the statement assembles on scroll; JS sets the start state */
.statement__line,.tile,.star,.paren{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .mech,.book{margin-top:0}
  [data-rise]{box-shadow:none}
}



/* =========================================================
   COVERAGE MAP
   A real table, because the argument is a comparison and a
   comparison wants columns. Strength is encoded as weight and
   colour as well as words, so the shape reads before the text.
   ========================================================= */
.cov__intro{max-width:60ch;margin-bottom:var(--gut)}

.cov__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.cov{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
.cov th,.cov td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line)}
.cov thead th{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--grey-2);white-space:nowrap;
}
.cov tbody th{font-weight:600;font-size:15px}
.cov tbody tr:last-child th,.cov tbody tr:last-child td{border-bottom:0}
.cov td{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.cov td::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:99px;
  margin-right:9px;vertical-align:.06em;background:currentColor;
}
.cov td.on{color:var(--blue)}
.cov td.mid{color:var(--ink-80)}
.cov td.off{color:var(--muted);opacity:.75}
.cov td.off::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

.cov__say{
  margin-top:var(--gut);
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(22px,3.4vw,44px);line-height:1.04;letter-spacing:.005em;
  max-width:30ch;text-wrap:balance;
}

/* =========================================================
   CONTENT ENGINE (LINE B)
   ========================================================= */
.engine__lede{max-width:62ch;margin-bottom:var(--gut)}
.engine__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){ .engine__grid{grid-template-columns:1fr 1fr;gap:20px} }
.ecard{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:12px;
}
.ecard__k{color:var(--blue)}
.ecard__t{font-weight:700;font-size:clamp(18px,2vw,22px);line-height:1.2}
.ecard__p{font-size:14.5px;line-height:1.6;color:var(--ink-80)}

/* =========================================================
   MOBILE NAV
   Below the desktop breakpoint the links were display:none with
   nothing to replace them — mobile visitors got a logo and one
   CTA. Two bars, a real button, and the links drop under the bar.
   ========================================================= */
.nav__burger{
  display:grid;place-content:center;gap:5px;
  width:38px;height:38px;margin-left:auto;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.nav__burger span{
  display:block;width:19px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:899px){
  .nav{flex-wrap:wrap;row-gap:0}
  .nav__cta{order:2;margin-left:0}
  .nav__burger{order:3}
  .nav__links{
    order:4;flex-basis:100%;display:flex;flex-direction:column;gap:0;margin:0;
    max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.2,.7,.3,1);
  }
  .nav__links.is-open{max-height:280px}
  .nav__links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:13px}
  .nav__links a:first-child{border-top:1px solid var(--line);margin-top:14px}
}
@media (min-width:900px){ .nav__burger{display:none} }

/* =========================================================
   MOBILE HERO
   The device carried a yPercent:10 scroll parallax with only
   ~11px of clearance over the copy, so scrolling drove the phone
   straight through the value proposition. The parallax is now
   desktop-only (main.js) and the panel gets real headroom.
   ========================================================= */
@media (max-width:899px){
  .hero__device{margin-bottom:-12vw}
  .hero__panel{padding-top:22vw}
}

/* the coverage table is a horizontal scroller on small screens —
   say so, and fade the cut edge instead of clipping it dead */
.cov__wrap{position:relative}
@media (max-width:720px){
  .cov__wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
    background:linear-gradient(90deg,rgba(250,250,247,0),var(--paper));
    border-radius:0 var(--r-md) var(--r-md) 0;
  }
  .cov__hint{display:block}
}
.cov__hint{display:none;margin-top:10px;color:var(--muted)}

/* =========================================================
   HERO LEAD
   The value proposition used to be 12px all-caps mono inside
   parentheses — styled like a footnote. It is the most important
   sentence on the site, so it is now set like one.
   ========================================================= */
.hero__lead{
  font-family:var(--f-body);
  font-size:clamp(20px,2.3vw,29px);
  font-weight:600;line-height:1.2;letter-spacing:-.015em;
  text-transform:none;
  max-width:19ch;text-wrap:balance;
  color:var(--wool);
}
@media (max-width:899px){ .hero__lead{max-width:26ch} }

/* =========================================================
   HOW WE POST — the objection section
   ========================================================= */
.safety__grid{display:grid;grid-template-columns:1fr;gap:var(--gut)}
@media (min-width:900px){ .safety__grid{grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px)} }
.safety__lead .body{max-width:56ch}
.safety__list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.safety__list li{
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
@media (min-width:520px){ .safety__list li{grid-template-columns:130px 1fr;gap:18px;align-items:baseline} }
.safety__list .mono{color:var(--blue)}
.safety__list p{font-size:14.5px;line-height:1.55;color:var(--ink-80)}

/* provenance line under the coverage table */
.cov__src{margin-top:12px;color:var(--muted)}