/* ==========================================================================
   RANKSTER  ·  site design system
   Built on Rankster Design Guide v2.0 (~/Rankster-Brand/README.md)
   Light only. The guide says the website's ground is light: dark is reserved
   for the product dashboard and social cards.
   Hard rules encoded here: no shadow, no gradient, no glass, no glow,
   red is the voice, teal is the structure, amber is what moved.
   ========================================================================== */

@font-face{
  font-family:'Anton';
  src:url('./Anton-Regular-latin.woff2') format('woff2');
  font-style:normal; font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 01 tokens ---------------------------------------------------------- */
:root{
  --rk-red:#E32217;   --rk-red-deep:#B51B12;
  --rk-teal:#1E749C;  --rk-teal-deep:#155874;
  --rk-amber:#F4A300;
  --rk-ink:#131415;
  --rk-paper:#FFFFFF; --rk-paper-2:#F1F4F6;
  --rk-rule:#DCE3E8;  --rk-grey:#5A6B75; --rk-dim:#8A9AA4;

  --rk-display:'Anton',Haettenschweiler,'Arial Narrow Bold',Impact,sans-serif;
  --rk-body:'Open Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --rk-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  /* one spacing scale, multiples of four */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:104px;
  --radius:6px;
  --maxw:1120px;
  --prose:64ch;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--rk-paper); color:var(--rk-ink);
  font-family:var(--rk-body); font-size:17px; line-height:1.62;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}

/* --- 02 type ------------------------------------------------------------ */
h1,h2,h3,h4,.disp{
  font-family:var(--rk-display); font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; margin:0;
}
h1{font-size:clamp(2.9rem,8vw,6.2rem); line-height:.9; text-wrap:balance}
h2{font-size:clamp(2rem,5vw,3.4rem);  line-height:.95; text-wrap:balance}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1; letter-spacing:.02em}
h4{font-size:1.05rem; letter-spacing:.05em}

/* one red word per headline. the numeral is always the biggest glyph. */
.hl{color:var(--rk-red); font-style:normal}
.hl-teal{color:var(--rk-teal); font-style:normal}
.hl-amber{color:var(--rk-amber); font-style:normal}   /* the house orange, for "TikTok" in the hero */
.num{color:var(--rk-red); font-size:1.22em; line-height:.8}

p{margin:0 0 var(--s4); max-width:var(--prose)}
p:last-child{margin-bottom:0}
.lede{font-size:1.16rem; line-height:1.55}
.small{font-size:.92rem; color:var(--rk-grey)}
.grey{color:var(--rk-grey)}
.nodata{color:var(--rk-dim); text-transform:lowercase}
strong{font-weight:700}
a{color:var(--rk-teal-deep); text-underline-offset:3px}
a:hover{color:var(--rk-red)}

.kicker{
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rk-teal); margin:0 0 var(--s3);
}
.kicker-bold{font-weight:700; font-size:13px}    /* the logo-wall label, asked to carry more weight */

/* --- 03 layout ---------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5)}
.narrow{max-width:820px}
.rule{border:0; border-top:4px solid var(--rk-ink); margin:0}
.hair{border:0; border-top:1px solid var(--rk-rule); margin:var(--s6) 0}

/* pattern 5: the scroll engine. alternating grounds, zero JS. */
section{padding:var(--s9) 0}
.g-paper {background:var(--rk-paper)}
.g-paper2{background:var(--rk-paper-2)}
.g-teal  {background:var(--rk-teal);  color:#fff}
.g-red   {background:var(--rk-red);   color:#fff}
.g-ink   {background:var(--rk-ink);   color:#fff}
.g-teal .kicker,.g-red .kicker,.g-ink .kicker{color:rgba(255,255,255,.72)}
.g-teal p,.g-red p,.g-ink p{color:rgba(255,255,255,.94)}
.g-teal .hl,.g-red .hl,.g-ink .hl{color:#fff; text-decoration:underline; text-decoration-thickness:6px; text-underline-offset:8px}
.g-teal a,.g-red a,.g-ink a{color:#fff}
.g-red .num,.g-teal .num{color:#fff}

/* components that carry their OWN paper background must not inherit the
   light-on-dark text colour above, or they render white on white. */
:is(.g-teal,.g-red,.g-ink) :is(.card,.pain,.price,.brief,.proof article,.matrix){color:var(--rk-ink)}
:is(.g-teal,.g-red,.g-ink) :is(.card,.pain,.price,.brief,.proof article,.matrix) p{color:var(--rk-ink)}
:is(.g-teal,.g-red,.g-ink) :is(.card,.pain,.price,.brief) :is(.small,.grey,.stat .l){color:var(--rk-grey)}
:is(.g-teal,.g-red,.g-ink) :is(.card,.pain,.price,.brief) a{color:var(--rk-teal-deep)}

/* --- 04 top bar --------------------------------------------------------- */
.bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); padding:var(--s5) 0 var(--s4);
  border-bottom:4px solid var(--rk-ink); flex-wrap:wrap;
}
.bar .mark{display:block; height:46px; width:auto}
.bar nav{display:flex; gap:var(--s5); align-items:baseline; flex-wrap:wrap}
.bar nav a{
  font-family:var(--rk-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-ink); text-decoration:none;
}
.bar nav a:hover{color:var(--rk-red)}
.bar nav a.on{color:var(--rk-red)}          /* exactly one item in red */

/* --- 05 pattern 1: the cropped wordmark hero ---------------------------- */
.hero{padding:var(--s8) 0 0}
.hero .eyebrow{
  display:inline-block; font-family:var(--rk-mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rk-grey);
  border:1px solid var(--rk-rule); border-radius:100px;
  padding:6px 14px; margin-bottom:var(--s6); background:var(--rk-paper);
}
.hero h1{margin-bottom:var(--s5)}
.hero .sub{font-size:1.2rem; max-width:54ch; margin-bottom:var(--s6)}

.crop{
  overflow:hidden; line-height:.75; margin:var(--s8) 0 0;
  border-bottom:4px solid var(--rk-ink);
}
/* the slice is VERTICAL only. the word must never clip on the right, so the
   size is capped per page by character count via --crop-fs. */
.crop span{
  display:block; font-family:var(--rk-display); text-transform:uppercase;
  font-size:var(--crop-fs, min(23vw,290px)); line-height:.75; letter-spacing:-.01em;
  white-space:nowrap; margin-bottom:-.13em;    /* slice the caps on the rule */
}

/* --- 06 buttons --------------------------------------------------------- */
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}
.btn{
  display:inline-block; font-family:var(--rk-display); text-transform:uppercase;
  letter-spacing:.04em; font-size:1.05rem; padding:15px 30px;
  border-radius:var(--radius); text-decoration:none; border:2px solid transparent;
}
.btn-primary{background:var(--rk-red); color:#fff}
.btn-primary:hover{background:var(--rk-red-deep); color:#fff}
.btn-ghost{border-color:var(--rk-ink); color:var(--rk-ink); background:transparent}
.btn-ghost:hover{background:var(--rk-ink); color:#fff}
.g-teal .btn-ghost,.g-red .btn-ghost,.g-ink .btn-ghost{border-color:#fff; color:#fff}
.g-teal .btn-ghost:hover,.g-red .btn-ghost:hover,.g-ink .btn-ghost:hover{background:#fff; color:var(--rk-ink)}
.g-red .btn-primary{background:#fff; color:var(--rk-red)}
.cta-note{
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rk-dim);
}

/* --- 07 pattern 3: the ticker band -------------------------------------- */
.band{
  border-top:4px solid var(--rk-ink); border-bottom:4px solid var(--rk-ink);
  background:var(--rk-paper-2); overflow:hidden; padding:var(--s4) 0;
}
.band .track{
  display:flex; gap:var(--s7); width:max-content;
  animation:slide 60s linear infinite;
}
.band .item{
  display:flex; align-items:baseline; gap:var(--s3); white-space:nowrap;
  font-family:var(--rk-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-grey);
}
.band .item b{font-family:var(--rk-display); font-size:1.5rem; letter-spacing:.01em; color:var(--rk-ink)}
.band .item b.amber{color:var(--rk-amber)}
.band .item b.teal{color:var(--rk-teal)}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .band .track{animation:none; flex-wrap:wrap; width:auto; gap:var(--s5)}
}

/* --- 08 pattern 2: the numbered section card ---------------------------- */
.cards{display:grid; gap:var(--s7); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  position:relative; background:var(--rk-paper); color:var(--rk-ink);
  border:4px solid var(--rk-ink); border-radius:var(--radius);
  padding:var(--s7) var(--s6) var(--s6); /* no shadow. ever. */
}
.card .tab{
  position:absolute; top:0; left:var(--s5); transform:translateY(-50%);
  background:var(--rk-ink); color:#fff;
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 12px; border-radius:3px; white-space:nowrap;
}
.card .tab.red {background:var(--rk-red)}
.card .tab.teal{background:var(--rk-teal)}
.card h3{margin-bottom:var(--s3)}
.card p{max-width:none}

/* --- 09 stats + the flat data picture ----------------------------------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s6); margin:var(--s7) 0 0}
.stat{border-top:4px solid currentColor; padding-top:var(--s3)}
.stat .n{font-family:var(--rk-display); font-size:clamp(2.2rem,5vw,3.4rem); line-height:.92; display:block}
.stat .n.amber{color:var(--rk-amber)} .stat .n.red{color:var(--rk-red)} .stat .n.teal{color:var(--rk-teal)}
.stat .l{font-size:.9rem; color:var(--rk-grey); display:block; margin-top:var(--s2); line-height:1.45}
.g-teal .stat .l,.g-red .stat .l,.g-ink .stat .l{color:rgba(255,255,255,.8)}

/* the Social Tale move: a pain point drawn as a flat data picture */
.pain{border:4px solid var(--rk-ink); border-radius:var(--radius); padding:var(--s6); background:var(--rk-paper)}
.pain h3{margin-bottom:var(--s5)}
.pain .plot{display:flex; align-items:flex-end; gap:6px; height:96px; margin-bottom:var(--s4)}
.pain .plot i{flex:1; background:var(--rk-teal); border-radius:2px 2px 0 0; display:block}
.pain .plot i.dead{background:var(--rk-rule)}
.pain .row{display:flex; justify-content:space-between; gap:var(--s4); border-top:1px solid var(--rk-rule); padding-top:var(--s3)}
.pain .row div{flex:1}
.pain .row .v{font-family:var(--rk-display); font-size:1.9rem; line-height:1; display:block}
.pain .row .v.red{color:var(--rk-red)}
.pain .row .k{font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rk-dim)}

/* --- 10 the gate list --------------------------------------------------- */
ol.gate{list-style:none; counter-reset:g; padding:0; margin:var(--s7) 0 0}
ol.gate li{display:grid; grid-template-columns:52px 1fr; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--rk-rule)}
ol.gate li:last-child{border-bottom:0}
ol.gate .g-n{counter-increment:g; font-family:var(--rk-display); font-size:1.8rem; color:var(--rk-teal); line-height:.9}
ol.gate .g-n::before{content:counter(g,decimal-leading-zero)}
ol.gate .q{font-weight:700; display:block; margin-bottom:var(--s1)}
ol.gate .why{font-size:.93rem; color:var(--rk-grey); line-height:1.5; display:block}
.g-teal ol.gate li,.g-red ol.gate li{border-bottom-color:rgba(255,255,255,.28)}
.g-teal ol.gate .g-n,.g-red ol.gate .g-n{color:#fff}
.g-teal ol.gate .why,.g-red ol.gate .why{color:rgba(255,255,255,.8)}

/* --- 11 the refusal list ------------------------------------------------ */
ul.no{list-style:none; padding:0; margin:var(--s6) 0 0}
ul.no li{display:grid; grid-template-columns:30px 1fr; gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--rk-rule); max-width:var(--prose)}
ul.no li:last-child{border-bottom:0}
ul.no .x{color:var(--rk-red); font-size:19px; line-height:1.4}
ul.yes .x{color:var(--rk-teal)}
.g-red ul.no li{border-bottom-color:rgba(255,255,255,.3)}
.g-red ul.no .x{color:#fff}

/* --- 12 the three slot case card (the Z MEDIA move) --------------------- */
.proof{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--s7)}
.proof article{border:4px solid var(--rk-ink); border-radius:var(--radius); padding:var(--s5); background:var(--rk-paper)}
.proof .who{font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rk-dim); display:block; margin-bottom:var(--s3); min-height:2.6em}
.proof .big{font-family:var(--rk-display); font-size:2.5rem; line-height:.9; display:block; color:var(--rk-red)}
.proof .big.grey{color:var(--rk-dim)}
.proof .slot{border-top:1px solid var(--rk-rule); margin-top:var(--s3); padding-top:var(--s3); font-size:.92rem}
.proof .slot b{font-family:var(--rk-display); font-size:1.15rem; display:block}

/* --- 13 the comparison matrix (the MediaLabs move) ---------------------- */
.matrix{width:100%; border-collapse:collapse; margin-top:var(--s7); font-size:.94rem}
.matrix th,.matrix td{text-align:left; padding:var(--s4) var(--s3); border-bottom:1px solid var(--rk-rule); vertical-align:top}
.matrix thead th{font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-dim); font-weight:400; border-bottom:4px solid var(--rk-ink)}
.matrix tbody th{font-family:var(--rk-display); font-size:1.05rem; text-transform:uppercase; font-weight:400; letter-spacing:.02em; white-space:nowrap}
.matrix .good{color:var(--rk-teal)}
.matrix .us{background:color-mix(in srgb,var(--rk-amber) 12%,#fff)}
.matrix tr:last-child td,.matrix tr:last-child th{border-bottom:0}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* --- 14 price ----------------------------------------------------------- */
.price{border:4px solid var(--rk-ink); border-radius:var(--radius); padding:var(--s7) var(--s6); background:var(--rk-paper); max-width:560px}
.price .amt{font-family:var(--rk-display); font-size:clamp(3.4rem,10vw,5.4rem); line-height:.86; display:block}
.price .per{font-family:var(--rk-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rk-grey); display:block; margin-top:var(--s3)}
.ladder{width:100%; border-collapse:collapse; margin-top:var(--s6); font-size:.95rem}
.ladder th,.ladder td{text-align:left; padding:var(--s3) 0; border-bottom:1px solid var(--rk-rule)}
.ladder th{font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-dim); font-weight:400}
.ladder td:last-child{text-align:right; font-family:var(--rk-display); font-size:1.2rem}
.ladder tr:last-child td{border-bottom:0}

/* the two offers side by side */
.tiers{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:var(--s7)}
.tiers .price{max-width:none; display:flex; flex-direction:column}
.tiers .price.lead{border-color:var(--rk-red)}
.tiers .price > :last-child{margin-top:auto; padding-top:var(--s6)}  /* pin the CTA to the base */

/* --- 15 callouts -------------------------------------------------------- */
.callout{border-left:6px solid var(--rk-amber); background:color-mix(in srgb,var(--rk-amber) 12%,#fff); border-radius:0 var(--radius) var(--radius) 0; padding:var(--s5); margin:var(--s6) 0; max-width:var(--prose)}
.callout.teal{border-left-color:var(--rk-teal); background:color-mix(in srgb,var(--rk-teal) 9%,#fff)}
.callout.red{border-left-color:var(--rk-red);  background:color-mix(in srgb,var(--rk-red) 8%,#fff)}
.callout .tag{font-family:var(--rk-display); font-size:1rem; letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:var(--s2)}
.g-teal .callout,.g-red .callout{background:rgba(255,255,255,.12); border-left-color:#fff; color:#fff}

/* --- 16 the brief mock (what lands in your channel) --------------------- */
.brief{border:4px solid var(--rk-ink); border-radius:var(--radius); background:var(--rk-paper); overflow:hidden; max-width:560px}
.brief .head{background:var(--rk-ink); color:#fff; padding:var(--s3) var(--s5); font-family:var(--rk-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.brief .body{padding:var(--s5); font-size:.95rem; line-height:1.6}
.brief .body p{max-width:none; margin-bottom:var(--s4)}
.brief dl{margin:0 0 var(--s5); display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s4)}
.brief dt{color:var(--rk-grey); font-size:.9rem}
.brief dd{margin:0; font-family:var(--rk-display); font-size:1.15rem; text-align:right}
.brief dd .d{font-size:.72em; margin-left:6px}
.brief dd .up{color:var(--rk-amber)} .brief dd .dn{color:var(--rk-red)} .brief dd .na{color:var(--rk-dim); font-family:var(--rk-body); font-size:.8rem}
.brief .lever{border-top:4px solid var(--rk-ink); padding-top:var(--s4); margin-top:var(--s4)}
.brief .lever b{font-family:var(--rk-display); text-transform:uppercase; letter-spacing:.03em; display:block; font-size:.95rem; color:var(--rk-red)}

/* --- 17 email capture --------------------------------------------------- */
.signup{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); max-width:540px}
.signup input{flex:1; min-width:220px; font-family:var(--rk-body); font-size:1rem; padding:14px 16px; border:2px solid var(--rk-ink); border-radius:var(--radius); background:#fff; color:var(--rk-ink)}
.signup input:focus{outline:none; border-color:var(--rk-red)}

/* --- 18 faq ------------------------------------------------------------- */
.faq{margin-top:var(--s6); max-width:var(--prose)}
.faq details{border-bottom:1px solid var(--rk-rule); padding:var(--s4) 0}
.faq summary{font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--rk-display); color:var(--rk-red); font-size:1.4rem; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:var(--s3); color:var(--rk-grey)}

/* --- 19 footer ---------------------------------------------------------- */
footer{border-top:4px solid var(--rk-ink); padding:var(--s7) 0 var(--s8); display:flex; flex-wrap:wrap; gap:var(--s6); justify-content:space-between; align-items:flex-start}
footer .fm{height:40px; width:auto}
footer .meta{font-family:var(--rk-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--rk-grey); line-height:2}
footer .meta a{display:block; color:var(--rk-grey); text-decoration:none}
footer .meta a:hover{color:var(--rk-red)}

/* --- 20 a11y ------------------------------------------------------------ */
:focus-visible{outline:3px solid var(--rk-amber); outline-offset:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s5); top:var(--s3); z-index:9; background:var(--rk-ink); color:#fff; padding:var(--s3) var(--s4); border-radius:var(--radius)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

@media (max-width:640px){
  section{padding:var(--s8) 0}
  .card{padding:var(--s6) var(--s5) var(--s5)}
  body{font-size:16px}
}

/* ==========================================================================
   V4  ·  the newsletter architecture
   Structure lifted from Newsletter X (BRIX) per Paul's pick 2026-07-27,
   skin thrown away. Their bones, our brand: flat, three colours, no shadow.
   Fixes the ten failures measured in research/website-v3-design-critique.md.
   ========================================================================== */

/* --- v4.01 rhythm. 104px of air ten times was half the length problem ---- */
section{padding:var(--s8) 0}
.tight{padding:var(--s7) 0}

/* --- v4.02 the missing mid tier. v3 ran 14.7 to 18.6px and nothing else -- */
.stand{font-size:1.5rem; line-height:1.35; font-weight:600; max-width:34ch}
.stand b{font-weight:800}                        /* the standfirst runs 600, so bold needs 800 to read */
/* v5.13 the two standfirst beats. Paul's call 1 Aug: SAME size, both bold, wide
   gaps between all three, so they read as three separate statements and not as a
   paragraph that tapers off. */
.stand-2{font-size:1.13rem; line-height:1.35; font-weight:700; color:var(--rk-ink);
         max-width:none; margin:0}
.pull{
  font-size:1.62rem; line-height:1.3; font-weight:600; max-width:24ch;
  border-left:6px solid var(--rk-red); padding-left:var(--s5); margin:var(--s7) 0;
}
.g-teal .pull,.g-red .pull,.g-ink .pull{border-left-color:#fff}

/* --- v4.03 hero. copy left, the product right. the brief is the picture -- */
/* align-items:center so the text block sits on the vertical midline of the brief
   screenshot beside it, rather than stacking from the top and trailing white space. */
.lead{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:center; padding:var(--s8) 0 var(--s7)}
/* capped at 4.4rem, not 4.6: at 4.6 "EVERY SALE STARTS" is 529px in a 525px
   column and breaks the hard <br> into three lines. Measured, not guessed. */
.lead h1{font-size:clamp(2.4rem,6.2vw,4.4rem); margin-bottom:var(--s7)}
/* the hero is a pyramid: each line steps down in size so the eye is walked from
   the claim to the proof to the ask. 70px -> 31px -> 24px. The middle line is
   capped at 1.95rem because at 2.1rem it wraps in a 525px column. Measured. */
/* 1.58rem, not 1.78: at 1.78 this line measures 505px against the headline's
   504px, so the block bulges in the middle instead of tapering. Measured. */
.lead .stand{margin-bottom:var(--s6); font-weight:700; font-size:1.58rem;
             line-height:1.25; max-width:none}
.lead .grab{margin-top:var(--s7)}
/* the <br> stays at every width. Hiding it with display:none also swallows the
   word space, which renders "STARTSON". Two short lines on mobile is fine. */
.lead .stand{margin-bottom:var(--s6)}
.lead .aside{position:sticky; top:var(--s5)}
.lead .cap{
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-dim); margin-top:var(--s3); display:block;
}
@media (max-width:900px){
  .lead{grid-template-columns:1fr; gap:var(--s7)}
  .lead .aside{position:static}
}

/* --- v4.04 the inline capture. their hero move, our only real ask -------- */
.grab{display:flex; gap:var(--s3); flex-wrap:wrap; max-width:520px}
.grab input{
  flex:1 1 180px; min-width:0; font-family:var(--rk-body); font-size:1rem;
  padding:16px 18px; border:3px solid var(--rk-ink); border-radius:var(--radius);
  background:#fff; color:var(--rk-ink);
}
.grab input:focus{outline:none; border-color:var(--rk-red)}
.grab .btn{padding:16px 30px}
.g-teal .grab input,.g-red .grab input,.g-ink .grab input{border-color:#fff}
.trust{
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rk-dim); margin-top:var(--s3);
}
.g-teal .trust,.g-red .trust,.g-ink .trust{color:rgba(255,255,255,.75)}

/* --- v4.05 the stat band. their social proof row, real numbers only ------ */
.band-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s7)}
.band-stats .s{border-top:4px solid currentColor; padding-top:var(--s4)}
.band-stats .s .n{
  font-family:var(--rk-display); font-size:clamp(2.6rem,5.4vw,4rem);
  line-height:.88; display:block; color:var(--rk-red);
}
.g-ink .band-stats .s .n,.g-teal .band-stats .s .n{color:var(--rk-amber)}
.band-stats .s .l{display:block; margin-top:var(--s3); font-size:.95rem; line-height:1.45}
.band-stats .s .src{
  display:block; margin-top:var(--s3); font-family:var(--rk-mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rk-dim);
}
.g-ink .band-stats .s .src,.g-teal .band-stats .s .src{color:rgba(255,255,255,.55)}

/* --- v4.06 THE DATED REPEATING UNIT. the thing v3 had no version of ------ */
.issues{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:var(--s5); margin-top:var(--s7)}
.issues.pair{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.issue{
  display:flex; flex-direction:column; background:var(--rk-paper);
  border:3px solid var(--rk-ink); border-radius:var(--radius);
  padding:var(--s5); text-decoration:none; color:var(--rk-ink);
}
.issue:hover{border-color:var(--rk-red); color:var(--rk-ink)}
.issue .meta{
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rk-dim);
  display:flex; gap:var(--s3); align-items:baseline; margin-bottom:var(--s4);
}
.issue .meta .no{font-family:var(--rk-display); font-size:1.5rem; color:var(--rk-teal); letter-spacing:.01em}
.issue h3{font-size:1.28rem; line-height:1.06; margin-bottom:var(--s3)}
.issue:hover h3{color:var(--rk-red)}
.issue p{font-size:.94rem; color:var(--rk-grey); max-width:none; margin-bottom:var(--s5)}
.issue .go{
  margin-top:auto; font-family:var(--rk-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rk-teal);
}
.issue:hover .go{color:var(--rk-red)}

/* the index row. same data, scannable, for the archive page */
.rows{margin-top:var(--s7); border-top:4px solid var(--rk-ink)}
.row-i{
  display:grid; grid-template-columns:118px 1fr auto; gap:var(--s5); align-items:baseline;
  padding:var(--s5) 0; border-bottom:1px solid var(--rk-rule);
  text-decoration:none; color:var(--rk-ink);
}
.row-i:hover{color:var(--rk-red)}
.row-i .d{font-family:var(--rk-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--rk-dim)}
.row-i h3{font-size:1.22rem; line-height:1.1}
.row-i:hover h3{color:var(--rk-red)}
.row-i .go{font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-teal)}
@media (max-width:640px){
  .row-i{grid-template-columns:1fr; gap:var(--s2)}
  .row-i .go{display:none}
}

/* --- v4.07 the real figure. v3 shipped bars that meant nothing ----------- */
figure.fig{margin:0; border:3px solid var(--rk-ink); border-radius:var(--radius); background:var(--rk-paper); overflow:hidden}
figure.fig .top{
  background:var(--rk-ink); color:#fff; padding:var(--s3) var(--s5);
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
figure.fig .plotbox{padding:var(--s6) var(--s5) var(--s4)}
figure.fig svg{display:block; width:100%; height:auto}
figure.fig figcaption{
  padding:var(--s4) var(--s5) var(--s5); border-top:1px solid var(--rk-rule);
  font-size:.9rem; color:var(--rk-grey); line-height:1.5;
}
figure.fig figcaption .src{
  display:block; margin-top:var(--s3); font-family:var(--rk-mono);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rk-dim);
}
:is(.g-teal,.g-red,.g-ink) figure.fig{color:var(--rk-ink)}
:is(.g-teal,.g-red,.g-ink) figure.fig figcaption{color:var(--rk-grey)}

/* --- v4.08 two column text. v3 wasted 45% of every container ------------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start}
.duo > * {min-width:0}
.duo p{max-width:none}
@media (max-width:820px){.duo{grid-template-columns:1fr; gap:var(--s6)}}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr; gap:var(--s6)}}

/* --- v4.09 offers as issue cards. the Every.to move, per R11 ------------- */
.offer{
  display:flex; flex-direction:column; background:var(--rk-paper); color:var(--rk-ink);
  border:3px solid var(--rk-ink); border-radius:var(--radius); padding:var(--s6);
}
.offer.lead-offer{border-color:var(--rk-red)}
.offer .meta{
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rk-dim); margin-bottom:var(--s4);
}
.offer .amt{font-family:var(--rk-display); font-size:clamp(2.8rem,6vw,3.9rem); line-height:.88; display:block; color:var(--rk-red)}
.offer .per{font-family:var(--rk-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-grey); display:block; margin-top:var(--s3)}
.offer h3{margin:var(--s5) 0 var(--s3)}
.offer p{max-width:none; font-size:.95rem}
.offer .ladder{margin-top:var(--s5)}
.offer > :last-child{margin-top:auto; padding-top:var(--s6)}

/* --- v4.10 masthead. their nav, our weight ------------------------------- */
.bar nav a.peer{color:var(--rk-ink)}
.dateline{
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  border-bottom:1px solid var(--rk-rule); padding:var(--s3) 0;
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-dim);
}

/* --- v4.11 footer, expanded to their shape ------------------------------- */
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7); padding:var(--s8) 0 var(--s7); border-top:4px solid var(--rk-ink)}
.foot-grid h4{margin-bottom:var(--s4); font-size:.95rem; letter-spacing:.06em}
.foot-grid a{display:block; color:var(--rk-grey); text-decoration:none; font-size:.92rem; line-height:2}
.foot-grid a:hover{color:var(--rk-red)}
.foot-grid .fm{height:38px; width:auto; margin-bottom:var(--s4)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr; gap:var(--s6)}}
.foot-base{
  border-top:1px solid var(--rk-rule); padding:var(--s5) 0 var(--s8);
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rk-dim);
}

/* ==========================================================================
   V5  ·  the soft pass
   Paul's call 2026-07-29: take Newsletter X's LOOK, not just its layout,
   but hold the palette. So the no-shadow rule is deliberately relaxed here
   and the three colours + Anton are NOT. Everything below overrides v1-v4.
   ========================================================================== */

:root{
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:100px;
  --rk-soft:#F7F9FB;          /* the airy ground, replaces the invisible paper2 */
  --rk-line:#E4EAEF;
  --sh-1:0 1px 2px rgba(19,20,21,.04), 0 4px 12px rgba(19,20,21,.05);
  --sh-2:0 2px 4px rgba(19,20,21,.05), 0 12px 28px rgba(19,20,21,.08);
  --sh-red:0 8px 22px rgba(227,34,23,.22);
}

body{font-size:17px; line-height:1.7}

/* headlines stay Anton caps. they just breathe more and shout less. */
h1{letter-spacing:.005em; line-height:.94}
h2{letter-spacing:.005em; line-height:.98}
.g-soft{background:var(--rk-soft)}
section{padding:96px 0}
.tight{padding:64px 0}

/* --- v5.01 the ground. near-white with real separation, not a 5% step ---- */
.g-paper2{background:var(--rk-soft)}
.rule{border-top-width:1px; border-top-color:var(--rk-line)}

/* --- v5.02 buttons. pill, soft lift, no hard ink block ------------------- */
.btn{
  border-radius:var(--radius-pill); border:0; padding:17px 34px;
  font-size:1rem; letter-spacing:.03em; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--rk-red); color:#fff; box-shadow:var(--sh-red)}
.btn-primary:hover{background:var(--rk-red-deep); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--rk-ink); border:1.5px solid var(--rk-line); box-shadow:var(--sh-1)}
.btn-ghost:hover{background:#fff; color:var(--rk-red); border-color:var(--rk-red); transform:translateY(-1px)}
:is(.g-teal,.g-red,.g-ink) .btn-ghost{background:transparent; border-color:rgba(255,255,255,.5); color:#fff; box-shadow:none}

/* --- v5.03 the capture. one rounded shell, button tucked inside ---------- */
.grab{
  background:#fff; border:1.5px solid var(--rk-line); border-radius:var(--radius-pill);
  box-shadow:var(--sh-2); padding:7px 7px 7px 10px; gap:8px; align-items:center; max-width:540px;
}
.grab input{
  border:0; box-shadow:none; background:transparent; padding:14px 12px; border-radius:var(--radius-pill);
}
.grab input:focus{outline:none; border:0}
.grab .btn{padding:15px 30px; white-space:nowrap}
:is(.g-teal,.g-red,.g-ink) .grab{border-color:transparent}
@media (max-width:460px){
  .grab{border-radius:var(--radius); flex-direction:column; align-items:stretch; padding:10px}
  .grab .btn{width:100%; text-align:center}
}

/* --- v5.04 cards. soft, lifted, borderless ------------------------------- */
.card,.pain,.price,.offer,.issue,.proof article,.brief,figure.fig{
  border:0; border-radius:var(--radius); background:#fff; box-shadow:var(--sh-1);
}
.card:hover,.issue:hover,.offer:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.issue,.card,.offer{transition:transform .18s ease, box-shadow .18s ease}
.issue{padding:var(--s6)}
.issue:hover{border:0}
.offer.lead-offer{outline:2px solid var(--rk-red); outline-offset:-2px}
.card .tab{border-radius:var(--radius-pill); padding:7px 16px}

/* the brief keeps its ink header, just softened at the corners */
.brief{overflow:hidden; box-shadow:var(--sh-2)}
.brief .lever{border-top:1px solid var(--rk-line)}
figure.fig .top{border-radius:0}
figure.fig figcaption{border-top-color:var(--rk-line)}

/* --- v5.05 callouts, tables, lists: lose the hard rules ------------------ */
.callout{border-radius:var(--radius); border-left-width:4px}
.ladder th,.ladder td,.matrix th,.matrix td{border-bottom-color:var(--rk-line)}
.matrix thead th{border-bottom:1.5px solid var(--rk-line)}
ul.no li,ol.gate li,.row-i{border-bottom-color:var(--rk-line)}
.rows{border-top:1.5px solid var(--rk-line)}
.stat,.band-stats .s{border-top-width:3px}

/* --- v5.06 masthead + ticker: quieter furniture -------------------------- */
.bar{border-bottom:1px solid var(--rk-line); padding:var(--s5) 0; align-items:center}
.bar .mark{height:68px}          /* the original badge. it needs room or the wordmark inside it mushes */
.foot-grid .fm{height:64px}
.bar nav{align-items:center; gap:var(--s3)}
.bar nav a{font-family:var(--rk-body); font-size:.95rem; letter-spacing:0; text-transform:none; font-weight:600}

/* v5.11 every nav item is visibly a button. outlined, except Subscribe. */
.bar nav a.peer{
  padding:10px 20px; border:1.5px solid var(--rk-line);
  border-radius:var(--radius-pill); color:var(--rk-ink);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.bar nav a.peer:hover{border-color:var(--rk-red); color:var(--rk-red); background:var(--rk-soft)}
.bar nav a.peer[aria-current="page"]{border-color:var(--rk-ink)}
.bar nav a.on{
  color:#fff; background:var(--rk-red); padding:11px 24px;
  border:1.5px solid var(--rk-red);
  border-radius:var(--radius-pill); box-shadow:var(--sh-red);
}
.bar nav a.on:hover{color:#fff}
.dateline{border-bottom:0; color:var(--rk-dim)}
.band{border-top:0; border-bottom:0; background:var(--rk-soft)}

/* --- v5.07 the brand carousel. new in v5 -------------------------------- */
.logos{overflow:hidden; padding:var(--s6) 0}
.logos .track{display:flex; gap:64px; width:max-content; align-items:center; animation:slide 45s linear infinite}
.logos img{height:38px; width:auto; opacity:.55; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease}
.logos img:hover{opacity:1; filter:none}
.logos .ph{
  font-family:var(--rk-display); font-size:1.5rem; color:var(--rk-dim);
  white-space:nowrap; letter-spacing:.02em; text-transform:uppercase;
}

/* --- v5.08 the reviews slot (Senja mounts here) -------------------------- */
.reviews{margin-top:var(--s7); min-height:120px}
.reviews .slot-note{
  border:1.5px dashed var(--rk-line); border-radius:var(--radius); padding:var(--s7);
  text-align:center; color:var(--rk-dim); font-family:var(--rk-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

/* --- v5.09 the hero shot slot (the Slack brief screenshot) --------------- */
.shot{border-radius:var(--radius); box-shadow:var(--sh-2); display:block; width:100%; height:auto}

/* --- v5.12 the hero product shot. static img = the LCP element, all the
       "expensive" is CSS on top: frame, tilt, glow, one floating chip.
       Same recipe Linear / Vercel / Stripe ship. Zero extra bytes. --------- */
.stage{position:relative; padding:var(--s5) var(--s4) var(--s6)}
.stage:before{                                   /* the amber glow, blurred */
  content:""; position:absolute; z-index:0;
  left:-6%; right:-8%; top:-4%; bottom:-6%;
  background:radial-gradient(48% 46% at 22% 26%, rgba(244,163,0,.62), transparent 68%),
             radial-gradient(46% 46% at 88% 82%, rgba(30,116,156,.42), transparent 70%),
             radial-gradient(38% 38% at 76% 12%, rgba(227,34,23,.20), transparent 72%);
  filter:blur(52px); pointer-events:none;
}
.frame{
  position:relative; z-index:1; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid rgba(19,20,21,.09);
  box-shadow:0 1px 2px rgba(19,20,21,.05), 0 12px 28px -8px rgba(19,20,21,.16),
             0 34px 60px -20px rgba(19,20,21,.20);
  transform:perspective(1600px) rotateY(-5deg) rotateX(2.2deg) rotate(-.5deg);
  transform-origin:65% 50%;
}
.frame img{display:block; width:100%; height:auto}
.frame .bar{                                     /* window chrome strip */
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:#F7F8F9; border-bottom:1px solid rgba(19,20,21,.07); border-radius:0;
}
.frame .bar i{width:9px; height:9px; border-radius:50%; background:#DCE0E3; display:block}
.chip{
  position:absolute; z-index:2; right:-6px; bottom:6px;
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid rgba(19,20,21,.09); border-radius:var(--radius-pill);
  padding:9px 16px; font-family:var(--rk-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rk-ink); white-space:nowrap;
  box-shadow:0 8px 22px -6px rgba(19,20,21,.22);
  animation:bob 5.5s ease-in-out infinite;
}
.chip b{width:7px; height:7px; border-radius:50%; background:#2FA84F; display:block}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width:900px){
  .stage{padding:var(--s4) 0 var(--s5)}
  .stage:before{left:0; right:0; top:0; bottom:0} /* keep the glow inside the column */
  .frame{transform:none}                          /* flat on mobile, no tilt */
  .chip{right:auto; left:0; bottom:0}
}
/* nothing may push the page sideways. clip, not hidden, so sticky still works. */
html,body{overflow-x:clip; max-width:100%}

/* --- v5.15 the sticky masthead -----------------------------------------
   Sticky lives on .masthead, NOT on .bar. .bar sits inside .wrap, and a sticky
   element only sticks within its own parent, so it would unstick the moment
   .wrap scrolled away. .masthead is a full-bleed body-level child instead,
   which also gives the white ground the bar needs so content cannot show
   through as it scrolls under.
   .stuck is toggled by an IntersectionObserver on #top-sentinel: no scroll
   listener, nothing running per frame. ----------------------------------- */
/* 1px, not zero: a zero-area sentinel does not reliably re-fire the observer. */
#top-sentinel{height:1px; margin-bottom:-1px}
.masthead{
  position:sticky; top:0; z-index:60; background:var(--rk-paper);
  transition:box-shadow .22s ease;
}
.masthead .bar,.masthead .mark{transition:padding .22s ease, height .22s ease}
.masthead.stuck{box-shadow:0 6px 20px -14px rgba(19,20,21,.45)}
.masthead.stuck .bar{padding:var(--s3) 0 var(--s2); border-bottom-color:transparent}
.masthead.stuck .mark{height:44px}          /* 68px -> 44px. bar 110px -> ~76px */

/* on a phone the four pills wrap to two rows, so a pinned bar would eat a third
   of the screen. Once stuck, keep the logo and the ask, drop the rest. The full
   nav is still there at the top of the page and in the footer. */
@media (max-width:700px){
  .masthead.stuck .bar nav a.peer{display:none}
  .masthead.stuck .mark{height:38px}
}
@media (prefers-reduced-motion:reduce){
  .masthead,.masthead .bar,.masthead .mark{transition:none}
}

/* --- v5.14 the hero, centred. Paul's call 1 Aug: the block is a funnel, so it
       is centred on one axis and every line is narrower than the one above it,
       ending at the capture box. The box is capped at 460px so the triangle
       actually closes instead of flaring back out at the bottom. ------------- */
.lead > div:first-child{text-align:center}
.lead .stand,.lead .stand-2{margin-left:auto; margin-right:auto}
.lead .grab{max-width:460px; margin-left:auto; margin-right:auto}

/* the capture box is the point of the funnel, so it gets the only moving thing
   on the page: a permanent red bloom underneath, plus a double ring that ripples
   out every 2.8s. Both stop the moment the field is focused. Stop nagging. */
.lead .grab{
  position:relative; border:2px solid var(--rk-ink);
  box-shadow:0 8px 24px -8px rgba(227,34,23,.42), 0 14px 32px -16px rgba(19,20,21,.30);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lead .grab:after{                        /* the always-on bloom, sits behind */
  content:""; position:absolute; inset:-18px; z-index:-1; border-radius:100px;
  background:radial-gradient(closest-side, rgba(227,34,23,.42), rgba(244,163,0,.16) 62%, transparent 80%);
  filter:blur(16px); pointer-events:none;
}
.lead .grab:before{                       /* the ripple, two rings out of phase */
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  pointer-events:none; animation:ripple 2.8s cubic-bezier(.32,0,.24,1) infinite;
}
@keyframes ripple{
  0%   {box-shadow:0 0 0 0    rgba(227,34,23,.55), 0 0 0 0    rgba(227,34,23,.30)}
  55%  {box-shadow:0 0 0 15px rgba(227,34,23,0),   0 0 0 5px  rgba(227,34,23,.42)}
  100% {box-shadow:0 0 0 26px rgba(227,34,23,0),   0 0 0 20px rgba(227,34,23,0)}
}
.lead .grab:hover{border-color:var(--rk-red); transform:translateY(-1px)}
.lead .grab:focus-within{
  border-color:var(--rk-red); transform:none;
  box-shadow:0 0 0 6px rgba(227,34,23,.18), 0 14px 32px -16px rgba(19,20,21,.30);
}
.lead .grab:focus-within:before{animation:none}   /* they are typing. stop pulsing. */
.lead .grab:focus-within:after{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .lead .grab:before{animation:none; box-shadow:0 0 0 6px rgba(227,34,23,.16)}
  .lead .grab:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .chip{animation:none}
}
.shot-slot{
  border:1.5px dashed var(--rk-line); border-radius:var(--radius); background:var(--rk-soft);
  padding:var(--s8) var(--s6); text-align:center; color:var(--rk-dim);
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

/* --- v5.10 footer --------------------------------------------------------*/
.foot-grid{border-top:1px solid var(--rk-line)}
.foot-base{border-top:1px solid var(--rk-line)}
@media (prefers-reduced-motion:reduce){
  .logos .track{animation:none; flex-wrap:wrap; width:auto; gap:var(--s6)}
  .btn:hover,.card:hover,.issue:hover,.offer:hover{transform:none}
}

/* ── Article cards ────────────────────────────────────────────────────────
   The repeating dated unit R10 said the stylesheet did not have. Thumbnail
   is generated from the title, so a new post needs no art. The caption
   carries date and section only: the thumbnail already says the headline. */
.posts{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s6); margin-top:var(--s7);
}
.post{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--rk-line,var(--rk-rule)); border-radius:16px;
  overflow:hidden; background:var(--rk-paper);
  transition:transform .18s ease, box-shadow .18s ease;
}
.post:hover{transform:translateY(-2px); box-shadow:var(--sh-2,0 10px 30px rgba(19,20,21,.13))}
.post img{display:block; width:100%; height:auto; aspect-ratio:1200/630}
/* Date only. The headline is in the thumbnail, so repeating it here doubled
   every card and made the grid read as a list with pictures. */
.post .body{padding:var(--s4) var(--s5)}
.post .d{
  display:block; text-align:center;
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-dim);
}
.post:hover .d{color:var(--rk-red)}

.built{
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rk-dim); margin-top:var(--s6);
}

/* ── The caption, anywhere ────────────────────────────────────────────────
   .cap was only ever defined inside .lead, so the same span under a brief
   mock or a figure further down the page rendered as unstyled body text. */
.cap{
  display:block; margin-top:var(--s3);
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rk-dim);
}

@media (prefers-reduced-motion:reduce){ .post:hover{transform:none} }

/* --- the second hero shot, for the agents page -----------------------------
   Running the identical screenshot with the identical treatment on two pages
   reads as stock. Same recipe, mirrored: the tilt leans the other way, the
   glow leads teal instead of amber, and the chip sits on the opposite side. */
.stage.alt:before{
  background:radial-gradient(48% 46% at 78% 24%, rgba(30,116,156,.58), transparent 68%),
             radial-gradient(46% 46% at 14% 80%, rgba(244,163,0,.38), transparent 70%),
             radial-gradient(38% 38% at 26% 14%, rgba(227,34,23,.18), transparent 72%);
}
.stage.alt .frame{
  transform:perspective(1600px) rotateY(5deg) rotateX(2.2deg) rotate(.5deg);
  transform-origin:35% 50%;
}
.stage.alt .chip{right:auto; left:-6px; bottom:6px}

/* --- the third hero shot, for services ------------------------------------
   Home leans left on amber, agents leans right on teal. This one sits square
   on, glow led by red, chip back on the right. Three pages, three treatments,
   one recipe. */
.stage.flat:before{
  background:radial-gradient(50% 46% at 50% 20%, rgba(227,34,23,.34), transparent 68%),
             radial-gradient(46% 46% at 16% 84%, rgba(30,116,156,.40), transparent 70%),
             radial-gradient(40% 40% at 86% 78%, rgba(244,163,0,.40), transparent 72%);
}
.stage.flat .frame{transform:none}
.stage.flat .chip{right:-6px; left:auto; bottom:6px}