/* ============================================================
   ASHLEIGH RO — link in bio
   Big tight grotesque, mono meta, minimal chrome, images do the work.
   Light ground forced everywhere. No dark mode.
   ============================================================ */

:root{
  --cream:#F7F4EE;
  --cream-2:#E7DFCF;   /* was #EFEAE1, 8 points off cream, so alternation read as nothing */
  --paper:#FFFFFF;
  --ink:#111110;
  --ink-2:#4A453F;
  --ink-3:#676158;
  --line:#CEC3AB;      /* #E2DCD2 measured 1.03 on the new tint, i.e. invisible */
  --line-2:#CFC7B9;

  /* The one accent that does real work: PostIdeas, PopCall, the drops list.
     #2A66AC clears WCAG AA on cream (5.32), on the cream-2 tint (4.88) and on white (5.84).
     The lime experiment (8 Sep) was reverted. Keeping the note because it will come up
     again: the logo neon #C1FF72 measures 1.07:1 on cream, so it can only ever be a
     large filled shape, never text and never a hairline. That is why it works as a
     disc behind the face mark and nowhere else on a light ground. */
  --accent:#38691A;   /* 26 Oct: the blue is gone. This is the dark shade of the
                         highlighter, 5.81 on cream, 4.95 on the tint, 6.55 on white. */
  --neon:#C1FF72;      /* The highlighter itself. 1.07 on cream, so it is only ever a
                         filled shape with ink on top, never text and never a hairline. */
  /* Gold is the books eyebrow and the review stars. #875D10 clears AA on all three
     grounds; the old #8F6412 measured 4.38 on the cream-2 tint, just under the floor. */
  --gold:#2D5F2D;      /* 26 Oct: the books shade is now the deep green, not gold.
                         6.87 on cream, 5.69 on the tint, 7.54 on white. */
  /* Undiagnosed's accent, matching the app's red. #B3261E clears AA on cream (5.95),
     on the cream-2 tint (5.46) and on white (6.54). Accent only: eyebrow, ticks, the
     three stat numbers. Never a filled section, never light text on it. */
  --red:#B3261E;
  /* Used by the CommentBooks screen-time card. Clears AA on all three grounds. */
  --done:#1F6B4A;
  /* Form borders need 3:1 as non-text contrast. --line-2 measured 1.53 on cream. */
  --field-line:#847D73;

  --r:3px;
  --r-img:14px;      /* Every image radius. The two full-bleed PopCall bands stay square. */
  --maxw:1180px;
  --pad:20px;
  --shot-ratio:4/5;   /* PostIdeas graphic crop. 1/1 or 9/16 is a one-line swap. */
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--cream) !important;color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  margin:0;font-family:var(--sans);font-weight:600;
  line-height:.95;letter-spacing:-.03em;text-wrap:balance;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:64px 0;background:var(--cream)}
.sec--paper{background:var(--paper)}
.sec--tint{background:var(--cream-2)}

/* mono meta label. the one recurring device on the page. */
.eyebrow{
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 18px;
}
.eyebrow--trust{color:var(--ink-2)}
.eyebrow--accent{color:var(--accent)}
.eyebrow--gold{color:var(--gold)}
.eyebrow--red{color:var(--red)}

.h{font-size:clamp(34px,8.6vw,62px);margin:0 0 20px;max-width:17ch}
.h3{font-size:clamp(22px,5vw,30px);margin:0 0 10px}
.lede{font-size:clamp(18px,4.3vw,21px);color:var(--ink-2);max-width:52ch;margin:0 0 30px;line-height:1.5}
.lede b{color:var(--ink);font-weight:600}
.small{font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 28px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:-.015em;
  text-decoration:none;cursor:pointer;width:100%;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--sm{min-height:50px;padding:14px 22px;font-size:16.5px}
.btn .arw{font-size:17px;line-height:1;transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-note{font-family:var(--sans);font-size:15px;color:var(--ink-2);margin:16px 0 0;letter-spacing:0;line-height:1.5}
/* Left-aligned and capped at the button's width, so it wraps under the button
   instead of running past it. The two notes that sit under a full-width button
   in their own column are centered instead; see .final__cta / .pop__close below. */
.offer .btn-note{max-width:100%}

/* ---------- Masthead ---------- */
.masthead{background:var(--cream);padding:4px 0 0;position:relative;z-index:5}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{
  font-size:17px;font-weight:700;letter-spacing:-.03em;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
}
/* The face mark. Transparent PNG, no frame, no clip: the beanie sits proud
   of the green circle and cropping it to a disc cuts the top off. */
.mark__img{width:34px;height:34px;flex:0 0 auto;display:block}
.masthead__cta{display:none}

/* ---------- Hero ---------- */
.hero{background:var(--cream);padding:4px 0 0;position:relative;overflow:hidden}
/* Emphasis carries on weight, never a second color mid-sentence. */
.hero h1 em{font-style:normal;color:inherit;font-weight:800}
.hero__deck{font-size:17.5px;color:var(--ink-2);max-width:40ch;margin:0 0 18px;line-height:1.5}
.hero__deck b{color:var(--ink);font-weight:600}

/* transparent cut-out portrait. no frame, no card, sits on the ground. */

/* Phones only. Scale the cut-out past the viewport and clip the legs at the section
   edge, so her face is legible instead of a full-body figure two inches tall.
   Above 640px the column is wide enough to carry the whole pose, so this stops. */
@media (max-width:540px){
  /* Height is in vw so the crop stays the same shot at every phone width.
     The image is 1.32 viewports wide and 1.44 tall; 118vw shows down to her knee. */
}

/* stat block under the CTA */
.creds{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:start;
  margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line);
}
.creds__lab{font-size:15px;font-weight:500;color:var(--ink-2);line-height:1.4;max-width:26ch}

/* ---------- Slim jump row. not a nav bar. ---------- */

/* ---------- Proof strip ---------- */
.proof{background:var(--paper);padding:40px 0}
.stars{color:var(--gold);font-size:17px;letter-spacing:3px;line-height:1}
.proof__q{font-size:clamp(21px,5vw,29px);font-weight:500;line-height:1.26;letter-spacing:-.025em;margin:14px 0 14px}
.proof__by{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.press{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.press__item{font-size:18.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em}

/* ---------- Three columns. no boxes, no numbers. ---------- */

.trio__item{border-top:1px solid var(--line);padding-top:18px}
.trio__item h3{font-size:23px;margin:0 0 10px;letter-spacing:-.025em}
.trio__item p{font-size:17px;color:var(--ink-2);margin:0;line-height:1.55}

/* ---------- Offer block. no card, no accent bar. ---------- */
.offer{background:transparent;border:0;padding:0;position:relative}

/* ---------- PostIdeas graphic slider ---------- */

.ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0}
.ticks li{
  position:relative;padding:15px 0 15px 26px;font-size:17px;color:var(--ink-2);
  line-height:1.5;border-top:1px solid var(--line);
}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:23px;width:6px;height:10px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(42deg);
}
.ticks li b{color:var(--ink);font-weight:600}

/* ---------- Undiagnosed. Same architecture as the other offers, red accent. ---------- */
.sec--und .ticks li::before{border-right-color:var(--red);border-bottom-color:var(--red)}
.sec--und .case__n{color:var(--red)}
.sec--und .aside{margin-bottom:34px}
/* cream-2 on a cream-2 section is no container at all. */
@media (min-width:640px){ .und__shot{aspect-ratio:16/9} }
@media (min-width:900px){ .und__shot{aspect-ratio:16/9;margin:32px 0} }

.aside{
  border-left:2px solid var(--ink);padding:2px 0 2px 20px;margin:30px 0 0;
  font-size:17px;color:var(--ink-2);max-width:54ch;line-height:1.55;
}
.aside b{color:var(--ink);font-weight:600}

/* ---------- Books. image, then text under it. no card. ---------- */
.books{display:grid;gap:44px;margin-top:8px}
.book{background:transparent;border:0;border-top:1px solid var(--line);padding-top:20px}
.book__title{font-size:clamp(26px,6vw,34px);margin:0 0 8px;letter-spacing:-.03em}
.book__sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.book__desc{font-size:17px;color:var(--ink-2);margin:0 0 24px;line-height:1.55}
.buy__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.buy__name{font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.buy__price{font-size:26px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}

/* ---------- The newsletter. One row, so one button, no list. ---------- */

/* ---------- PopCall ---------- */
.pop{background:transparent;border:0;border-top:2px solid var(--ink);padding:28px 0 0;margin:0}
.pop__rate{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.pop__amt{font-size:clamp(56px,15vw,86px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--accent)}
.pop__per{font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:var(--ink-2)}
.seven{
  border-left:2px solid var(--accent);padding:2px 0 2px 20px;margin:30px 0 0;
  font-size:16.5px;color:var(--ink-2);line-height:1.6;
}
.seven b{color:var(--ink);font-weight:600}

/* PopCall: full-bleed image band, pull quote, then the offer. Mobile rhythm first. */
.pcimg{
  margin:36px 0;aspect-ratio:16/10;background:var(--line);
  position:relative;overflow:hidden;
}
.pcimg--b{aspect-ratio:4/3}
.pcimg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pcimg--b img{object-position:50% 12%}
.pullq{
  margin:0;padding:0;border:0;
  font-size:clamp(25px,6.4vw,40px);font-weight:600;letter-spacing:-.032em;line-height:1.14;
  max-width:19ch;color:var(--ink);
}
.pullq::before{content:"";display:block;width:46px;height:2px;background:var(--accent);margin:0 0 24px}
.pc__why p{font-size:17px;color:var(--ink-2);line-height:1.6;max-width:48ch;margin:0 0 1em}
.pc__why p b{color:var(--ink);font-weight:600}

/* what you actually get on PopCall */
.modes{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--ink)}
.modes li{padding:20px 0;border-bottom:1px solid var(--line)}
.modes__v{display:block;font-size:16.5px;color:var(--ink-2);line-height:1.5}

/* Two doors, side by side. The clearest way to say which message goes where. */
.dual{display:grid;gap:30px;margin:0}
.dual__h{
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 4px;
  padding-bottom:13px;border-bottom:2px solid var(--ink);
}
.dual__h--go{color:var(--accent)}
.dual ul{list-style:none;margin:0;padding:0}
.dual li{font-size:16.5px;color:var(--ink-2);line-height:1.5;padding:14px 0;border-bottom:1px solid var(--line)}
/* The aside above zeroes its own bottom margin as a last child, so the gap
   below it belongs to this grid. Same fix as the final CTA and the video row. */
.pc__grid{margin-top:44px}

/* Closing offer. The gap keeps the reassurance line off the button. */
.pop__close{display:grid;gap:32px}

/* ---------- Case-study numbers ---------- */
.cases{display:grid;gap:0;margin:34px 0 0;border-top:2px solid var(--ink)}
.case{padding:26px 0 24px;border-bottom:1px solid var(--line)}
.case__n{
  font-size:clamp(38px,9.2vw,52px);font-weight:600;letter-spacing:-.045em;line-height:.9;
  font-variant-numeric:tabular-nums;margin:0 0 12px;
}
.case__t{font-size:16px;color:var(--ink-2);line-height:1.45;margin:0;max-width:30ch}
.cases__note{font-size:15px;color:var(--ink-3);margin:16px 0 0;line-height:1.5;max-width:54ch}
.h3.voices{margin:64px 0 0;font-size:clamp(21px,4.8vw,28px);letter-spacing:-.028em}

/* ---------- Tabbed proof ---------- */
.tabs__nav{
  display:flex;gap:26px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-top:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tabs__nav::-webkit-scrollbar{display:none}
.tabs__btn{
  background:none;border:0;padding:14px 0;margin:0;font-family:var(--mono);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;min-height:52px;
  transition:color .15s ease,border-color .15s ease;
}
.tabs__btn:hover{color:var(--ink-2)}
.tabs__btn[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs__panel{display:none;padding-top:34px}
.tabs__panel.on{display:block}
.tabs__q{font-size:clamp(23px,5.4vw,33px);font-weight:500;line-height:1.26;letter-spacing:-.028em;margin:0 0 18px}
.tabs__by{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}

.strip{display:grid;gap:0;margin-top:38px;border-top:1px solid var(--line)}
.strip__q{margin:0;padding:22px 0;border-bottom:1px solid var(--line)}
.strip__q p{font-size:17px;line-height:1.55;margin:0 0 12px;color:var(--ink-2)}
.strip__q footer{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.strip__q footer span{display:block;margin-top:3px;color:var(--ink-3)}

/* ---------- Video testimonials ---------- */
/* Stacked, the intro copy is a :last-child so its bottom margin is zeroed and the
   video row ends up kissing it. Same fix as the final CTA: the gap lives here,
   and at 900px+ the two sit in separate grid columns so it's removed. */
.vids{display:flex;gap:10px;margin-top:34px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vids::-webkit-scrollbar{display:none}
.vid{
  flex:0 0 76%;scroll-snap-align:start;text-align:left;
  display:grid;grid-template-rows:auto auto 1fr;align-content:start;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
}
.vid__thumb{display:block;aspect-ratio:9/16;overflow:hidden;position:relative;background:var(--cream-2);border-radius:var(--r-img)}
.vid__thumb img,.vid__thumb video{width:100%;height:100%;object-fit:cover;display:block}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.06)}
.vid:hover .vid__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .15s ease;
  width:54px;height:54px;border-radius:999px;background:rgba(17,17,16,.88);
  display:flex;align-items:center;justify-content:center;
}
.vid__play::after{content:"";width:0;height:0;margin-left:4px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.vid__t{display:block;font-size:18.5px;font-weight:600;letter-spacing:-.025em;margin:16px 0 6px;color:var(--ink);align-self:start;line-height:1.3}
.vid__by{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-2);margin:0}

/* ---------- Manifesto ---------- */
.mani__img{overflow:hidden;aspect-ratio:5/4;position:relative;background:var(--cream-2);margin-bottom:30px;border-radius:var(--r-img)}
.mani__img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.mani__body p:not(.lab):not(.eyebrow){font-size:clamp(18px,4.3vw,20px);color:var(--ink-2);line-height:1.6}
.mani__body p b{color:var(--ink);font-weight:600}
.mani__cta{max-width:340px;margin-top:8px}

/* ---------- FAQ ---------- */
.faqwrap{display:block}
.faq{margin-top:26px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:13px;height:1.5px;background:var(--ink);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:9.75px;top:50%;width:1.5px;height:13px;background:var(--ink);transform:translateY(-50%);transition:opacity .18s ease}
.faq details[open] summary::before{opacity:0}
.faq__a{padding:0 0 26px;font-size:17px;color:var(--ink-2);max-width:58ch;line-height:1.65}
.faq__a a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.faq__a a:hover{background:var(--ink);color:#fff;text-decoration-color:transparent}

/* ---------- Final CTA ---------- */
.final{background:var(--cream);padding:76px 0;text-align:left}
.final h2{max-width:14ch}
.final .lede{text-align:left;margin-left:0;margin-right:0}
/* Stacked, the lede is a :last-child so its bottom margin is zeroed and the button
   ends up jammed under the copy. The gap belongs here. At 900px+ the two sit in
   separate grid columns and the grid gap does the work instead. */
.final__cta{max-width:430px;margin:34px 0 0}
/* The closing note centers under its button. It's the only btn-note that does,
   because it's the only one sitting under a full-width button in its own column. */
.final__cta .btn-note,
.pop__close .btn-note{text-align:center;margin-top:12px}

/* ---------- Announcement list. Terminal capture, quieter than the final CTA. ---------- */
.drop{background:var(--paper);padding:66px 0}
.drop h2{font-size:clamp(28px,7vw,44px);margin:0 0 16px;max-width:16ch;letter-spacing:-.035em}
.drop__body{font-size:clamp(17px,4.1vw,19px);color:var(--ink-2);line-height:1.6;max-width:46ch;margin:0}
.dropform{display:grid;gap:12px;margin-top:28px;max-width:520px}
/* One field treatment on the site. The underline variant was a second
   email-capture component doing the same job two sections apart. */
.dropform input{
  width:100%;min-height:56px;font-size:17px;padding:15px 22px;
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--field-line);border-radius:999px;
}
.dropform input::placeholder{color:var(--ink-3)}
.dropform input:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-color:var(--ink)}
.dropform .btn{white-space:nowrap;min-height:56px}
.drop__note{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin:16px 0 0;letter-spacing:.02em;line-height:1.6}

/* ---------- Footer ---------- */
.foot{background:var(--cream);padding:40px 0 120px}
.foot__links{display:flex;flex-wrap:wrap;gap:0 22px;margin:10px 0 0;padding:0;list-style:none}
.foot__links a{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;display:inline-block;padding:11px 0;line-height:22px;
}
.foot__links a:hover{color:var(--ink)}
.disclaim{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin-top:24px;max-width:66ch}

/* ---------- Image slot placeholders ---------- */
.slot{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;text-align:center;padding:24px;
}
.slot__tag{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.92);padding:7px 12px;
}
.slot__desc{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);max-width:26ch;line-height:1.55}

/* ---------- Sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--cream);
  border-top:1px solid var(--line-2);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.sticky.on{transform:translateY(0)}
/* The panel lives inside the masthead stacking context, so a root-level fixed
   bar at the same z-index always wins. Hide the bar while the menu is open. */
body.nav-open .sticky{display:none}
.sticky .btn{min-height:54px}
.sticky__note{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:center;margin:8px 0 0;letter-spacing:.04em}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .dual{grid-template-columns:1fr 1fr;gap:44px}
  .sec{padding:80px 0}
  .trio{grid-template-columns:repeat(3,1fr);gap:28px}
  .creds__lab{max-width:none}
  .strip{grid-template-columns:repeat(3,1fr);gap:0 30px}
  .cases{grid-template-columns:repeat(2,1fr);gap:0 44px}
  .vid{flex:0 0 47%}
  /* One width for the button and its note, so the note wraps to the button's
     edge instead of running three times its length across the column. */
  .offer{--cta-w:310px}
  .offer .btn--primary{width:var(--cta-w)}
  .offer .btn-note{max-width:var(--cta-w)}
}
@media (min-width:900px){
  :root{--pad:40px;--r-img:18px}
  body{font-size:18.5px}
  .sec{padding:110px 0}
  .masthead{padding:16px 0 0}
  .mark__img{width:38px;height:38px}
  .masthead__cta{display:inline-flex;width:auto}
  .hero{padding:8px 0 0}
  .hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:end}
  .hero__deck{font-size:19px}
  .books{grid-template-columns:repeat(2,1fr);gap:48px}
  .proof__in{display:grid;grid-template-columns:.8fr 1.7fr;gap:48px;align-items:start}
  .press{margin-top:34px}
  .sticky{display:none}
  .foot{padding-bottom:48px}
  .pcimg{aspect-ratio:21/8;margin:48px 0}
  .pcimg--b{aspect-ratio:21/9}
  .pc__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .pop__close{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
  .modes li{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline}
  .modes__k{margin-bottom:0}
  .cases{grid-template-columns:repeat(3,1fr);gap:0 52px}
  .tabs__panel.on{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .vids{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:0;overflow:visible}
  .vid{flex:none}
  .vidsec__in{display:grid;grid-template-columns:.7fr 1.7fr;gap:56px;align-items:start}
  .mani__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .mani__img{margin-bottom:0;aspect-ratio:4/5}
  .faqwrap{display:grid;grid-template-columns:.72fr 1.5fr;gap:64px;align-items:start}
  .faqwrap__head{position:sticky;top:40px}
  .faq{margin-top:0}
  .final__in{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}
  .final__cta{margin:0}
  .drop__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .dropform{grid-template-columns:1fr auto;align-items:end;gap:16px;margin-top:8px}
  .dropform .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{.sticky{display:none}}

/* ============================================================
   SITE NAV — added 23 Oct when this stopped being one landing
   page and became a site. Two dropdowns (Products, Community),
   plus About. Labels stay on one line at every width; the row
   scrolls sideways before a label is ever allowed to wrap.
   ============================================================ */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;border-bottom:1px solid transparent;transition:border-color .2s ease}
.masthead.is-stuck{border-bottom-color:var(--line)}
.masthead__in{padding-block:10px;gap:12px}

.navtoggle{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;margin-right:-10px;padding:0;
  background:transparent;border:0;cursor:pointer;color:var(--ink);
}
.navtoggle span{position:relative;display:block;width:21px;height:1.5px;background:currentColor;border-radius:2px}
.navtoggle span::before,.navtoggle span::after{
  content:"";position:absolute;left:0;width:21px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .2s ease, top .2s ease;
}
.navtoggle span::before{top:-6.5px}
.navtoggle span::after{top:6.5px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link,.nav__btn{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:-.012em;
  color:var(--ink-2);text-decoration:none;background:transparent;border:0;padding:8px 0;cursor:pointer;
  /* explicit, so the dropdown buttons sit on the same baseline as the plain
     links; a button's default line-height is 'normal' and ran 6px short. */
  line-height:24.8px;transition:color .15s ease;
}
.nav__link:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__caret{width:8px;height:8px;flex:0 0 auto;transition:transform .18s ease}
.nav__btn[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:calc(100% + 8px);left:-16px;z-index:70;
  min-width:232px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:8px;margin:0;list-style:none;
  box-shadow:0 10px 30px rgba(17,17,16,.09);
}
.nav__menu a{
  display:block;padding:11px 12px;border-radius:8px;text-decoration:none;
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.3;
}
.nav__menu a:hover{background:var(--cream-2)}
.nav__menu .nav__sub{display:block;margin-top:3px;font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.nav__menu .nav__lab{display:block}
.nav__menu a[target] .nav__lab::after{content:" \2197";color:var(--ink-3);font-size:12px}

/* Mobile panel. Full-width sheet under the masthead, sections not a flat list. */
.navpanel{
  position:absolute;left:0;right:0;top:100%;z-index:65;
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:4px var(--pad) 26px;max-height:calc(100dvh - 68px);overflow-y:auto;
}
.navpanel[hidden]{display:none}
.navpanel__grp + .navpanel__grp{margin-top:22px}
.navpanel__lab{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px;
}
.navpanel a:not(.btn){
  display:block;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.navpanel a:not(.btn) .nav__sub{display:block;margin-top:3px;font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.navpanel .nav__lab{display:block}
.navpanel a[target] .nav__lab::after{content:" \2197";color:var(--ink-3);font-size:15px}
.navpanel .btn{margin-top:22px}

@media (min-width:1000px){
  .navtoggle{display:none}
  .navpanel{display:none!important}
  .nav{display:block}
  .masthead__in{gap:26px}
  .masthead__cta{display:inline-flex;width:auto;flex:0 0 auto}
}
@media (min-width:1000px) and (max-width:1059px){
  /* Measured at 1024: mark + nav + button ran 12px past the viewport. Below
     1060 the sticky bar carries the CTA instead, so there is never a width
     with no way to convert. */
  .nav__list{gap:16px}
  
  .masthead__cta{display:none}
}
@media (min-width:1060px) and (max-width:1179px){
  .nav__list{gap:16px}
  
  .nav__menu .nav__sub{display:none}
  .masthead__cta .arw{display:none}
}
/* Keep the sticky bar alive wherever the masthead button is hidden. */
@media (min-width:900px) and (max-width:1059px){ .sticky{display:block} }

/* Footer link columns, added with the nav. */
.footcols{display:grid;gap:26px;margin:30px 0 4px}
.foot__stack{list-style:none;margin:6px 0 0;padding:0}
.foot__stack li{margin:0}
.foot__stack a{
  display:block;padding:7px 0;font-size:16px;font-weight:500;letter-spacing:-.012em;
  color:var(--ink-2);text-decoration:none;
}
.foot__stack a:hover{color:var(--ink)}
.foot__stack a[target]::after{content:" \2197";color:var(--ink-3);font-size:12px}
@media (min-width:640px){ .footcols{grid-template-columns:repeat(3,1fr);gap:32px} }

/* ============================================================
   NEWSLETTER PLANS — free beside paid, both on light ground.
   The paid case gets made here, on the page, not left to a
   paywall nag nobody reads.
   ============================================================ */
.plans{display:grid;gap:18px;margin:34px 0 0}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:26px 22px 24px;display:flex;flex-direction:column;min-width:0;
}
.plan--paid{border-color:var(--ink);border-width:1.5px}
.plan--paid .plan__tag{color:var(--accent)}
.plan__price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 6px}
.plan__amt{font-size:clamp(40px,10vw,52px);font-weight:600;letter-spacing:-.05em;line-height:.92;font-variant-numeric:tabular-nums}
.plan__per{font-family:var(--mono);font-size:15px;letter-spacing:.03em;color:var(--ink-2)}
.plan__alt{font-family:var(--mono);font-size:13.5px;color:var(--ink-2);margin:0 0 20px;letter-spacing:.01em}
.plan__alt b{color:var(--ink);font-weight:600}
.plan__name{font-size:21px;font-weight:700;letter-spacing:-.025em;margin:0 0 4px}
.plan__sell{font-size:16px;color:var(--ink-2);line-height:1.5;margin:0 0 18px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.plan li{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2);line-height:1.5}
.plan li b{display:block;color:var(--ink);font-weight:600;font-size:16.5px;letter-spacing:-.012em;margin-bottom:4px}
.plan .btn{margin-top:auto}
.plan .btn-note{text-align:left}
.launchnote{
  border-left:2px solid var(--accent);padding:2px 0 2px 20px;margin:28px 0 0;
  font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:58ch;
}
.launchnote b{color:var(--ink);font-weight:600}

/* Book detail: contents rail + the line worth quoting. */
.bookmeta{display:grid;gap:0;margin:22px 0 0;border-top:1px solid var(--line)}
.bookmeta div{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.bookmeta .v{font-size:16px;color:var(--ink-2);line-height:1.5;min-width:0}
.bookline{
  font-size:clamp(20px,4.6vw,26px);font-weight:600;letter-spacing:-.028em;line-height:1.26;
  color:var(--ink);margin:26px 0 0;max-width:30ch;
}
.bookline::before{content:"";display:block;width:40px;height:2px;background:var(--gold);margin:0 0 18px}

/* Black Friday tease for the app that isn't live yet. */
.tease{background:transparent;border:0;border-radius:0;padding:0}
.tease h3{font-weight:700;letter-spacing:-.028em;margin:0 0 12px}
.tease p:not(.lab):not(.eyebrow){color:var(--ink-2);line-height:1.55;margin:0 0 10px;max-width:56ch}
@media (min-width:860px){ .tease{padding:30px 0 0} }

/* About + Sounds teasers. */
.sounds{display:grid;gap:0;margin:28px 0 0;border-top:2px solid var(--ink)}
.sound{padding:20px 0;border-bottom:1px solid var(--line)}
.sound__v{display:block;font-size:17px;color:var(--ink-2);line-height:1.55}
.sound__v b{color:var(--ink);font-weight:600}
@media (min-width:900px){ .sound{display:grid;grid-template-columns:168px 1fr;gap:22px;align-items:baseline} .sound__k{margin-bottom:0} }

/* Contact page. */
.reachgrid{display:grid;gap:18px;margin:34px 0 0}
.reach{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 22px;min-width:0}
.reach h3{font-size:20px;font-weight:700;letter-spacing:-.022em;margin:0 0 8px}
.copyrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copyrow code{
  font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--cream-2);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;user-select:all;word-break:break-all;
}
.copybtn{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;
  padding:9px 15px;cursor:pointer;white-space:nowrap;
}
.copybtn:hover{background:var(--ink);color:#fff}

/* ============================================================
   PRODUCT GALLERY — one per book, multiple instances per page.
   Scroll-snap so a thumb works, arrows and a counter on desktop.
   Slots are sized for photographed pages, not just covers.
   ============================================================ */
.gal{margin:0 0 22px}
.gal__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.gal__count{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);margin:0}
.gal__count b{color:var(--ink);font-weight:500}
.gal__nav{display:none;gap:8px}
.galbtn{
  width:40px;height:40px;border-radius:999px;border:0;background:var(--ink);color:#fff;
  font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:opacity .15s ease;
}
.galbtn[disabled]{opacity:.2;cursor:default}
.gal__track{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:0 var(--pad) 0 0;margin-right:calc(var(--pad) * -1);
}
.gal__track::-webkit-scrollbar{display:none}
.gal__track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gal__slide{
  flex:0 0 82%;scroll-snap-align:start;margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--cream-2);border-radius:var(--r-img);
}
.gal__slide:nth-child(even){background:var(--line)}
.gal__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gal__bar{height:2px;background:var(--line);margin-top:14px;overflow:hidden}
.gal__bar span{display:block;height:100%;width:30%;background:var(--ink);transition:width .18s ease-out}
@media (min-width:640px){ .gal__slide{flex:0 0 46%} }
@media (min-width:900px){
  .gal__slide{flex:0 0 38%}
  .gal__nav{display:flex}
  .gal__track{padding-right:0;margin-right:0}
}

/* The screen-time card off the back of CommentBooks Vol 1. Her device, not mine. */
.screencard{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:18px 18px 6px;margin:24px 0 0;max-width:420px;
}
.screencard dl{margin:0;display:grid}
.screencard .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.screencard .row:last-child{border-bottom:0}
.screencard dt{font-size:15.5px;color:var(--ink-2);margin:0}
.screencard dd{font-size:15px;font-weight:600;color:var(--ink);margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.screencard .down{color:var(--done,#1F6B4A)}
.screencard .up{color:var(--gold)}

/* ============================================================
   ROUND 1 FIXES — from the board. Grouped so the next round can
   diff them.
   ============================================================ */

/* Skip link. The homepage is ~26,000px tall on a phone. */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--pad);top:8px;z-index:80;position:fixed;
  background:var(--ink);color:#fff;padding:12px 16px;border-radius:999px;
  font-size:15px;font-weight:600;text-decoration:none;
}

/* Anchors landed under the sticky masthead at desktop too. */
@media (min-width:900px){ html{scroll-padding-top:116px} }

/* The hero stat row: $60k -> $97k wrapped and dropped its caption 36px
   below the other two. Three numbers, three baselines. */
@media (min-width:900px){
}

/* Two book columns drifted 28px apart because one title runs to two lines.
   Pin the price row and the button to the bottom of each column. */
@media (min-width:900px){
  .book{display:flex;flex-direction:column}
  .book .buy__row{margin-top:auto;padding-top:18px}
}

/* Contact cards were stretched to equal height, leaving ~150px of dead
   white under the shorter one. */
@media (min-width:860px){ .reachgrid{align-items:start} }

/* The page is left-aligned everywhere. Only center these notes once they
   actually sit under their own full-width button. */
.final__cta .btn-note,.pop__close .btn-note{text-align:left}
@media (min-width:900px){
  .final__cta .btn-note,.pop__close .btn-note{text-align:center;margin-top:12px}
}

/* Video cards advertise "Play ... 2:28" and have no file behind them yet.
   Say so on the card rather than firing a console warning nobody sees. */
.vid[disabled]{cursor:default}
.vid[disabled] .vid__thumb::after{
  content:"Coming soon";position:absolute;left:12px;bottom:12px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:rgba(255,255,255,.92);padding:7px 12px;border-radius:6px;
}

/* An inline email field beats a click-out to a domain nobody recognizes. */
.signup{display:grid;gap:12px;margin:26px 0 0;max-width:420px}
.signup__row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.signup label{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.signup input{
  flex:1 1 200px;min-width:0;font-family:var(--sans);font-size:17px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--field-line);border-radius:999px;
  padding:15px 20px;
}
.signup input::placeholder{color:var(--ink-3)}
.signup input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.signup .btn{flex:0 0 auto;width:auto;white-space:nowrap}
.signup .btn-note{margin-top:0}
@media (max-width:519px){ .signup .btn{width:100%} }

/* ============================================================
   ROUND 2 FIXES
   ============================================================ */

/* The hero CTA sat 114 to 302px below the fold on every desktop size
   measured. The one goal of the site was unreachable on first view. */
@media (min-width:900px){
  .hero__deck{margin-bottom:22px;font-size:clamp(18px,1.45vw,20px)}
  .signup{margin-top:20px}
  .creds{margin-top:26px;padding-top:20px}
}
@media (min-width:900px) and (max-height:920px){
  .creds{margin-top:20px;padding-top:16px}
}
@media (max-width:539px) and (max-height:760px){
  .hero{padding-top:4px}
  .hero__deck{font-size:16.5px;margin-bottom:0;line-height:1.45}
  .hero__deck + .hero__deck{margin-top:10px}
  .signup{margin-top:18px;gap:10px}
  .signup input{padding:13px 18px;font-size:16px}
}

/* A disabled card was still advertising a play button: [hidden] loses to
   the class rule's display:flex. */
.vid__play[hidden]{display:none}

/* A wrapped video title pushed its duration 24px out of line at 900-1059. */
@media (min-width:900px){ .vid{grid-template-rows:auto 1fr auto} }

/* contact.html skipped from h1 to h3. */
.reach h2,.reach h3{font-size:20px;font-weight:700;letter-spacing:-.022em;margin:0 0 8px}

/* The paid card stacked ~180 words of pricing argument under a decision the
   reader had already made. Phone only: summary visible, detail behind a tap. */
.plan__more{margin:0 0 20px}
.plan__more > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
}
.plan__more > summary::-webkit-details-marker{display:none}
.plan__more > summary::after{content:"+";font-size:19px;line-height:1;color:var(--ink-3)}
.plan__more[open] > summary::after{content:"\2212"}
.plan__more ul{margin-top:18px}
@media (min-width:860px){
  .plan__more > summary{display:none}
  .plan__more ul{margin-top:0}
}

/* The receipts bridge sat above six numbers four times its size. */
.cases__bridge{
  font-size:clamp(19px,4.4vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.35;
  color:var(--ink);margin:26px 0 0;max-width:40ch;
}
.cases__bridge::before{content:"";display:block;width:40px;height:2px;background:var(--ink);margin:0 0 16px}

/* At 320px the field's 200px flex-basis and the button competed for a 286px
   row and pushed 9px past the viewport. Stack them instead of negotiating. */
@media (max-width:344px){
  .signup__row{flex-direction:column}
  .signup input{flex:1 1 auto;width:100%;padding:13px 16px}
  .signup .btn{width:100%;padding:15px 18px}
}

/* SC 1.4.12 Text Spacing: .masthead__in was nowrap, so a reader's spacing
   override pushed the CTA past the viewport and overflow-x:hidden cut the
   label to "Get 50 free pos". Let the nav wrap between items instead. No
   label ever wraps inside itself, and normal rendering is unchanged. */
@media (min-width:1000px){
  .nav__list{flex-wrap:wrap;row-gap:4px}
}
@media (min-width:1060px) and (max-width:1179px){
  .nav__list{gap:12px}
  .masthead__in{gap:20px}
}

/* Two hairlines 18px apart under "What $8 adds" on phones. */

/* iPad portrait put the hero CTA 22px under the fold. */
@media (min-width:640px) and (max-width:899px){
  .hero__deck{margin-bottom:18px}
  .signup{margin-top:18px}
  .creds{margin-top:22px;padding-top:18px}
}

/* ============================================================
   MOBILE-FIRST HERO. The old one ran 1599px on an 844px screen:
   a six-line headline, two paragraphs of deck, and a labeled form.
   This one gets the eyebrow, headline, one line of deck and the
   field onto the first screen, and the proof row reads as chips
   rather than a stacked list.
   ============================================================ */
.hero{padding-top:2px}
/* --two carries its own display rules below, so the blanket sibling hide
   that used to live here is gone: it was eating the hero subline. */

/* No mono label above the only field on the page. The placeholder and
   the button already say what it is. */
.signup label{position:absolute;left:-9999px}
.signup{gap:10px;margin-top:4px}
.signup__row{gap:10px}
@media (max-width:539px){
  .signup__row{flex-direction:column}
  .signup input,.signup .btn{width:100%}
}

/* Credentials read as three chips, not three stacked paragraphs. */
.creds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:24px;
  border-top:1px solid var(--line);padding-top:16px}
.creds > div{padding-right:12px;min-width:0}
.creds > div + div{border-left:1px solid var(--line);padding-left:12px}
.creds__lab{font-size:12.5px;line-height:1.35;color:var(--ink-3);max-width:none}
@media (min-width:900px){
  .creds__lab{font-size:13.5px}
}

/* The portrait is a full-bleed band under the fold, not a 460px gap. */
@media (max-width:899px){
}

/* flex-basis applies to the MAIN axis. Once .signup__row stacks, the input's
   `flex:1 1 200px` became a 200px minimum HEIGHT and then grew to fill. */
.signup__row{align-items:stretch}
@media (max-width:539px){
  .signup input,.signup .btn{flex:0 0 auto;height:54px}
}
/* One line, and not set in mono. Gray mono at 12.5px reads as a code comment. */

/* The three stats were ragged: one number wrapped to two lines, one was blue
   and the other two ink, and the labels ran to different depths. */
.creds > div{display:flex;flex-direction:column}
.creds__lab{font-size:12px;line-height:1.3;color:var(--ink-3)}

/* ============================================================
   CONSOLIDATION PASS — 23 Oct
   Ash's note was "the site design is messy". The cause was not any
   one section, it was that the same three shapes had been written
   six times each with different numbers:

     mono label   11.5 / 12 / 12.5 / 13 / 13px, tracking .04-.09em
     stacked row  1px vs 2px top rule, 13 / 14 / 20 / 20 / 26px pad
     card         radius 12 / 14 / 16, three paddings

   Nothing below is a new look. It is the same look, measured once,
   with every old family pointed at it. Appended rather than edited
   in place so the next round can diff it in one block.
   ============================================================ */

/* ---------- 1. One mono label ---------- */
.lab,
.eyebrow,
.press__lab,
.modes__k,
.dual__h,
.bookmeta .k,
.bookmeta dt,
.sound__k,
.screencard__t,
.reach__k,
.navpanel__lab{
  display:block;
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 10px;
  line-height:1.35;
}
.lab--accent,.eyebrow--accent,.modes__k,.sound__k,.dual__h--go{color:var(--accent)}
.lab--gold{color:var(--gold)}
.lab--red{color:var(--red)}
.lab--trust,.eyebrow--trust{color:var(--ink-2)}
/* The two-door headers keep their rule, nothing else about them differs. */
.dual__h{padding-bottom:13px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.screencard__t{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}

/* ---------- 2. One stacked row ---------- */
.rows,
.modes,
.cases,
.bookmeta,
.sounds,
.trio,
.dual ul{
  list-style:none;
  display:grid;
  gap:0;
  margin:24px 0 0;
  padding:0;
  border-top:2px solid var(--ink);
}
.rows > li,.rows > div,
.modes li,
.case,
.bookmeta div,
.sound,
.trio__item,
.dual li{
  display:block;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  border-top:0;
  min-width:0;
}
/* Key column opens up once there is room for it, same breakpoint for all four. */
@media (min-width:900px){
  .rows > li,.rows > div,
  .modes li,
  .bookmeta div,
  .sound{display:grid;grid-template-columns:172px 1fr;gap:24px;align-items:baseline}
  .rows > li > .lab,.rows > div > .lab,
  .modes__k,.bookmeta .k,.bookmeta dt,.sound__k{margin-bottom:0}
}
/* Values inside a row: one size, one colour, 17px so it stays readable. */
.rows__v,.modes__v,.sound__v,.bookmeta .v,.dual li,.case__t{
  display:block;font-size:17px;color:var(--ink-2);line-height:1.55;margin:0;
}
.rows__v b,.sound__v b,.bookmeta .v b{color:var(--ink);font-weight:600}
/* The trio keeps a heading instead of a label, same row otherwise. */
.trio__item h3{font-size:22px;margin:0 0 8px;letter-spacing:-.025em}
.trio__item p{font-size:17px;color:var(--ink-2);margin:0;line-height:1.55}

/* ---------- 3. One card ---------- */
.card,
.reach,
.screencard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  min-width:0;
  margin:0;
}
.card h3,.reach h3{
  font-size:20px;font-weight:700;letter-spacing:-.024em;line-height:1.2;margin:0 0 10px;
}
/* :not(.lab) — .card p (0,1,1) was beating the .lab rule (0,1,0) and
   repainting every card label at 16.5px ink-2. */
.card p:not(.lab),.reach p:not(.lab){font-size:16.5px;color:var(--ink-2);line-height:1.55;margin:0 0 14px}
.card p:not(.lab):last-child{margin-bottom:0}
/* A whole-card link. The arrow is the affordance, the border is the hit area. */
.card--go{display:block;text-decoration:none;transition:border-color .15s,transform .15s}
.card--go:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card--go:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.card__go{
  display:inline-block;margin-top:14px;font-size:15.5px;font-weight:600;color:var(--accent);
}
.card--go .lab--red ~ .card__go{color:var(--red)}

/* ---------- 4. One grid ---------- */
.grid{display:grid;gap:14px;margin:26px 0 0}
@media (min-width:680px){ .grid--2,.grid--3{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .grid--3{grid-template-columns:repeat(3,1fr)} }

/* ---------- 5. Breadcrumb on the split-out pages ---------- */
.crumb{background:var(--cream);padding:18px 0 0}
.crumb .wrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumb span{color:var(--line-2)}
.crumb b{color:var(--ink);font-weight:500}

/* ---------- 6. One big stat number ---------- */
.num,.case__n{
  display:block;font-size:clamp(34px,8vw,52px);font-weight:600;letter-spacing:-.045em;
  line-height:.9;font-variant-numeric:tabular-nums;margin:0 0 10px;color:var(--ink);
}

/* ---------- 7. The stat row, measured once ---------- */
/* Three stats, one baseline, real gutters, nothing that can wrap. */
.creds{grid-template-columns:repeat(3,1fr);gap:0;align-items:start}
.creds > div{padding:0 14px}
.creds > div:first-child{padding-left:0}
.creds > div:last-child{padding-right:0}
.creds > div + div{border-left:1px solid var(--line)}
.creds__num{font-size:clamp(19px,5vw,24px);line-height:1.05;margin-bottom:7px}
.creds__lab{font-size:12.5px;line-height:1.35}
@media (min-width:900px){
  .creds > div{padding:0 22px}
  .creds > div:first-child{padding-left:0}
  .creds__num{font-size:clamp(26px,2.2vw,34px)}
  .creds__lab{font-size:13.5px}
}

/* ---------- 8. Testimonials grid ---------- */
/* Four portrait videos in a side-scroller made sense inside a one-page site.
   On their own page they are the content, so they lay out as a grid as soon
   as two fit, and the rail only survives on the narrowest phones. */
@media (min-width:560px){
  .vids{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;overflow:visible}
  .vid{flex:none}
}
@media (min-width:1000px){ .vids{grid-template-columns:repeat(4,1fr)} }

/* ---------- 9. Minimum readable size ---------- */
/* Ash's floor is 18px for body copy and nothing under 15px anywhere. The
   reassurance line under a button, the case-study footnote and the legal
   disclaimer were at 13, 14 and 13.5. */
.btn-note,.signup .btn-note{font-size:15px;line-height:1.45}
.cases__note{font-size:15px;line-height:1.5}
.disclaim{font-size:15px;line-height:1.5}
.small{font-size:16px;line-height:1.55}

/* ============================================================
   ROUND 1 BOARD FIXES — design, 23 Oct
   The last pass was appended rather than integrated, so it beat
   three desktop media queries and missed four components. The
   superseded originals are deleted now; these are the one spec.
   ============================================================ */

/* --- every remaining mono label joins the one spec --- */
.plan__tag,.proof__by,.book__sub,.tabs__by,.vid__by,.tabs__btn,
.strip__q footer,.case__src,.gal__count,.slot__tag,.slot__desc,
.sticky__note,.drop__note,.foot__links a,.creds__lab,.plan__per,.plan__alt{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  line-height:1.4;
}
.plan__tag,.proof__by,.book__sub,.tabs__by,.vid__by,.strip__q footer,
.case__src,.slot__tag{text-transform:uppercase}
/* These three are prose-adjacent, so they keep sentence case and the body face. */
.creds__lab,.sticky__note,.drop__note,.foot__links a,.plan__alt{
  font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:15px;
}
.plan__per{font-size:15px;letter-spacing:.02em;text-transform:none}

/* --- the accent is for PostIdeas, PopCall and the drops list only --- */
/* Every row label on the music page was blue, which spends the CTA colour
   on decoration. They inherit --ink-3 now and the accent is applied by hand
   where it carries meaning. */
.lab--accent,.eyebrow--accent,.dual__h--go{color:var(--accent)}
.modes__k,.sound__k{color:var(--ink-3)}

/* --- gutters the appended block had zeroed --- */
@media (min-width:640px){ .trio,.cases,.strip{column-gap:32px} }
@media (min-width:900px){ .trio,.cases,.strip{column-gap:48px} }

/* --- hero: the stat row was flush with the section edge, so descenders
       and the divider rules were cut by the cream/white boundary --- */
@media (min-width:900px){
  .hero{padding-bottom:48px}
}

/* --- the plan cards are the conversion unit and were off the card system --- */
.plan{border-radius:14px;padding:22px}
.plan ul,.strip,.ticks{
  list-style:none;display:grid;gap:0;margin:20px 0 0;padding:0;
  border-top:2px solid var(--ink);
}
.plan li,.ticks li{display:block;padding:18px 0;border-bottom:1px solid var(--line);border-top:0}

/* --- section rhythm on one token instead of five values --- */
:root{--sec-pad:64px}
@media (min-width:640px){ :root{--sec-pad:80px} }
@media (min-width:900px){ :root{--sec-pad:96px} }
.sec,.proof,.drop,.final{padding:var(--sec-pad) 0}
.foot{padding:var(--sec-pad) 0 120px}

/* --- desktop had two 220px dead bands and a 480px empty right rail --- */
@media (min-width:900px){
  .tease{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .tease .eyebrow,.tease .lab{grid-column:1;margin:0}
  .tease h3{grid-column:2;grid-row:1;margin-top:0}
  .tease p{grid-column:2}
}

/* --- gallery: 38% slides sliced slide three through its own caption --- */
@media (min-width:900px){ .gal__slide{flex:0 0 calc((100% - 28px) / 3)} }

/* --- sticky bar: cream over a white section cut live text with a
       visible colour step. Solid white plus a hairline instead. --- */
.sticky{background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(17,17,16,.06)}

/* --- "Coming soon" sat in the burned-in subtitle band at a third radius --- */
.vid[disabled] .vid__thumb::after{
  top:12px;left:12px;bottom:auto;right:auto;
  border-radius:999px;background:rgba(17,17,16,.84);color:#fff;
}

/* ============================================================
   ROUND 1 BOARD FIXES — accessibility
   ============================================================ */

/* SC 2.4.11: the fixed CTA bar covered focused footer links completely. */
@media (max-width:1059px){
}
/* SC 2.5.8: two target groups under 24px. */
.crumb a{display:inline-flex;align-items:center;min-height:24px}
.reach .v a,.rows__v a{display:inline-block;padding-block:3px;min-height:24px}
/* SC 1.4.3: the only failing pair on the site, 1.53:1. */
.crumb span{color:var(--ink-3)}

/* SC 1.4.12 at 320px: the nowrap submit button floored the row at its
   min-content width and pushed the input, the button and the note off
   the right edge. The label is allowed to wrap below 360. */
@media (max-width:359px){
  :root{--pad:14px}
  .signup .btn,.btn--sm{white-space:normal;min-width:0}
  .signup__row,.signup input{min-width:0}
  .masthead__in{gap:8px}
  .navtoggle{margin-right:0}
}

/* The submit result needs somewhere to be announced. */
.formmsg{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.formmsg:empty{margin:0}
.formmsg[data-state="ok"]{color:var(--done);font-weight:600}
.formmsg[data-state="err"]{color:var(--red);font-weight:600}

/* The price anchor moved inside the paid card, directly above the buttons. */
.plan__anchor{font-size:16px;line-height:1.5;color:var(--ink-2);margin:20px 0 16px}
.plan__anchor b{color:var(--ink);font-weight:600}
.plan--paid .btn{width:100%;justify-content:center}
.plan--paid .btn + .btn{margin-top:10px}

/* Price in front of the buyer before the gallery, which is still unshot. */
.bookglance{display:grid;gap:10px;margin:26px 0 0}
.bookglance__i{
  display:grid;gap:4px;text-decoration:none;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  grid-template-columns:1fr auto;grid-template-areas:"lab lab" "name price";
  align-items:baseline;transition:border-color .15s;
}
.bookglance__i:hover{border-color:var(--line-2)}
.bookglance__i .lab{grid-area:lab;margin:0}
.bookglance__i b{grid-area:name;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.bookglance__p{grid-area:price;font-size:21px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bookglance__i--go{border-color:var(--gold)}
@media (min-width:760px){ .bookglance{grid-template-columns:repeat(3,1fr)} }

/* The pair. Free shipping on two sets the threshold above a single book. */
.bundle{
  background:var(--paper);border:1px solid var(--gold);border-radius:14px;
  padding:24px 22px;margin:34px 0 0;
}
.bundle .buy__row{margin-top:4px}
.bundle__sell{font-size:17px;color:var(--ink-2);line-height:1.55;margin:10px 0 18px;max-width:46ch}
.bundle__sell b{color:var(--ink);font-weight:600}
.bundle .btn{width:100%;justify-content:center}

/* "a month" next to the price is prose, not a code label. */
.plan__per{font-family:var(--sans);letter-spacing:0;color:var(--ink-2)}
.plan__tag{color:var(--accent)}

/* ============================================================
   ROUND 2 BOARD FIXES — 24 Oct
   The dead declarations the board found are deleted above, not
   overridden here. What follows is only what has no earlier home.
   ============================================================ */

/* --- SC 2.4.11, properly this time. scroll-margin-bottom on the element
       does not govern sequential-focus scrolling in Chromium. The scroll
       container's padding does. Measured: 8 obscured stops to 0. --- */
@media (max-width:1059px){
  html{scroll-padding-bottom:128px}
  .foot{padding-bottom:176px}
}

/* --- one button, one field. Three radii and two field treatments were
       doing the same job on one page. --- */
.btn,.signup .btn,.signup input,.dropform input{border-radius:999px}
.signup input{min-height:56px;font-size:17px;padding:15px 22px}
.signup .btn{min-height:56px}
.signup label,.dropform label{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
@media (min-width:900px){ .signup .btn{width:100%} }

/* --- labels: 12.5px mono uppercase is a legible label on a laptop and a
       squint on a phone. 14px keeps it subordinate to 17px body. --- */
.lab,.eyebrow,.press__lab,.modes__k,.dual__h,.bookmeta .k,.bookmeta dt,
.sound__k,.screencard__t,.reach__k,.navpanel__lab,.plan__tag,.proof__by,
.book__sub,.tabs__by,.vid__by,.tabs__btn,.strip__q footer,.case__src,
.gal__count,.slot__tag,.copybtn,.crumb .wrap{font-size:15px;letter-spacing:.055em}
.slot__desc{font-size:15px}
.creds__lab,.sticky__note,.drop__note,.foot__links a,.plan__alt,.plan__per{font-size:15px}
.nav__sub{font-size:15px}

/* --- double rules the consolidation created --- */
.dual ul{border-top:0}
@media (max-width:859px){ .plan .plan__more ul{border-top:0} }

/* --- line-height .95 is a display setting. On a 20px heading the leading
       came out smaller than the type and the two lines collided. --- */
h3,h4,.reach h2,.plan__name,.book__title,.trio__item h3,.card h3{line-height:1.16}

/* --- cards: one padding, one radius, at every width --- */
@media (min-width:900px){ :root{--r-img:14px} }
.bookglance__i,.bundle,.plan,.reach,.card,.screencard{padding:22px}
.bookglance__i{align-items:end}
.bookglance__i b{min-height:2.6em;display:flex;align-items:flex-end}

/* --- the grid never opened up on a desktop while the list beside it used 48 --- */
@media (min-width:680px){ .grid{gap:20px} }
@media (min-width:1000px){ .grid{gap:24px} }

/* --- desktop: a 336px column was setting a 62px headline four lines deep,
       and the tease label column held 228px of nothing --- */
@media (min-width:900px){
  .faqwrap__head .h{font-size:clamp(32px,2.9vw,42px);max-width:13ch}
  .tease{grid-template-columns:200px minmax(0,1fr);gap:40px}
}

/* --- "SEEN IN" was a flex item, so it read as a fifth logo --- */
@media (max-width:539px){ .press__lab{flex:0 0 100%;margin:0 0 12px} }

/* --- 24px targets: contact uses .bookmeta .v, which the round 1 rule missed --- */
.bookmeta .v a,.reach .v a{display:inline-block;padding-block:3px;min-height:24px}

/* --- the submit label was allowed to wrap to clear 320px. Shorten it there
       instead, because a two-line button label is its own rule. --- */
@media (max-width:379px){
  .signup .btn,.btn--sm{white-space:nowrap;font-size:15.5px;padding-left:16px;padding-right:16px}
}

/* The hire door. Two columns once there is room, so the CTA sits beside the
   argument rather than 400px under it. */
.hire{display:grid;gap:26px}
.hire__cta{display:grid;gap:10px;align-content:start}
.hire__cta .btn{width:100%;justify-content:center}
.hire__cta .btn-note{margin-top:6px}
@media (min-width:900px){
  .hire{grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
}


/* ============================================================
   ROUND 3 BOARD FIXES — 24 Oct
   ============================================================ */

/* One button height. Three heights of the same black pill was the last
   fragment of the button system. */
.btn{min-height:56px}
.plan--paid .btn,.hire__cta .btn,.signup .btn,.dropform .btn{min-height:56px}

/* The paid CTA wrapped to two lines at 320. A two-line button label is a rule,
   not a preference, so the label shortens rather than wrapping. */
@media (max-width:379px){
  .signup .btn,.btn--sm,.plan .btn,.hire__cta .btn{
    white-space:nowrap;font-size:15.5px;padding-left:16px;padding-right:16px;
  }
}

/* The price ladder was a single 1100px column at 1280, so there was no
   free-versus-paid comparison on the one section that needs one. */
@media (min-width:900px){
  .plans{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .reachgrid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
}

/* "Start with Thursday." was rendering at 76px against a 62px h1. */


/* .mani__body p (0,1,1) was repainting its own eyebrow at 20px. Same
   collision as .card p and .tease p. */

/* Stacked-row values ran 106 characters in a 904px column at 1280. */
.rows__v,.modes__v,.sound__v,.bookmeta .v,.dual li,.case__t{max-width:68ch}

/* 1.4.12 at 320 on books: .book is a grid item, so min-width:auto floored it
   at its min-content width and the gallery bleed pushed the page 18px wide. */
.book,.books > *{min-width:0}

/* The last three labels that escaped the one spec. */
.plan__more > summary{font-size:15px;letter-spacing:.055em}
.gal__count{text-transform:uppercase}
.crumb .wrap{font-weight:500}

/* contact and 404 carry no sticky bar, so they were reserving 176px of
   nothing at the bottom of the page. */
@media (max-width:1059px){ .foot{padding-bottom:var(--sec-pad)} }
@media (max-width:1059px){ body:has(#stickyBar) .foot{padding-bottom:176px} }

/* Body copy floor. Ash's rule is 18px on a phone; seven selectors sat at
   16 to 17.5. The scale stays, the floor moves. */
/* Written as max-width:899px the first time, which raised phone copy and left
   fourteen selectors SMALLER on a laptop than on a phone. It is a floor at
   every width now. */
.hero__deck,.faq__a,.case__t,.book__desc,.trio__item p,.card p:not(.lab),
.plan__sell,.rows__v,.modes__v,.sound__v,.bookmeta .v,.dual li,
.bundle__sell,.reach p:not(.lab),.pc__why p,.btn-note,.aside,
.plan li,.plan__anchor,.launchnote{font-size:18px;line-height:1.55}
.plan li b{font-size:18.5px}

/* ============================================================
   ROUND 4 BOARD FIXES — 24 Oct
   ============================================================ */

/* The h1 was the third-largest heading on its own page at every common laptop
   size: 48-59px against three section h2s at 62px. Cap the h2 below the
   smallest h1 instead of capping one h2 and leaving the rest. */
.h{font-size:clamp(34px,7.4vw,52px)}
.final h2{font-size:clamp(32px,6.4vw,50px)}

/* The quote panel kept a two-column grid built for an image that was deleted
   two rounds ago, so every quote had 578px of dead space beside it. */
.tabs__panel.on{display:block}
.tabs__q{max-width:30ch}

/* .proof__in put one 25px line in a 337px column and pushed the quote 385px
   off the page's only left edge. */
.proof__in{display:block}
.proof__q{max-width:34ch}
.proof .small{margin:0 0 18px}

/* Three 97px columns at 320 gave five-line captions and a 21px ragged
   baseline, directly under the primary CTA. Three rows instead. */
@media (max-width:639px){
  .creds{grid-template-columns:1fr;gap:0}
  .creds > div{
    display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
    padding:14px 0;border-left:0;border-bottom:1px solid var(--line);
  }
  .creds > div:first-child{padding-left:0}
  .creds > div:last-child{border-bottom:0;padding-right:0}
  .creds__num{margin:0;white-space:nowrap}
  .creds__lab{max-width:none}
}

/* Background alternation is the only sectioning device here, and index ran
   three white sections in a row as one 2,079px slab. */


/* The hire band is aimed at the highest-value reader and carried the smallest
   headline on the page. */


/* The skip link moved the tab order and left the AT cursor behind. */
#main:focus{outline:none}

/* The buy block lifted to the first screen on popcall, so the page the hire
   door lands on has something to tap before 3,176px. */
.pop__lead{
  display:grid;gap:18px;margin:30px 0 0;padding:22px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
}
.pop__lead .btn{width:100%;justify-content:center}
.pop__lead .btn-note{margin-top:10px}
@media (min-width:760px){
  .pop__lead{grid-template-columns:auto 1fr;gap:40px;align-items:center}
  .pop__lead .btn{width:auto}
}

/* The column divider belongs to the three-across layout only. Once the stats
   stack it was drawing a one-pixel stub down the left of rows two and three. */
@media (max-width:639px){
  .creds > div,.creds > div + div{border-left:0}
  /* One column width for the numbers so the captions share a left edge. */
  .creds > div{grid-template-columns:102px 1fr}
}
/* 15px labels pushed the trust line to two ragged lines at phone widths, so
   it breaks where it is meant to instead. */
.eyebrow--trust .brk{display:block}
.eyebrow--trust .sep{display:none}
@media (min-width:560px){
  .eyebrow--trust .brk{display:inline}
  .eyebrow--trust .sep{display:inline}
}

/* ============================================================
   ROUND 5 BOARD FIXES — 24 Oct
   ============================================================ */

/* .btn carried width:100% at every width, so every desktop CTA was a
   944-1100px pill with a 200px label marooned in the middle. */
@media (min-width:900px){
  .btn{width:auto}
  .plan .btn,.hire__cta .btn,.dropform .btn{width:100%}
  .signup .btn{width:100%;max-width:320px}
  .bundle .btn,.pop__lead .btn{width:auto}
}

/* .creds > div + div{padding-left:12px} (0,1,2) was beating the stacked rule,
   so rows two and three sat 12px right of row one. */
@media (max-width:639px){
  .creds > div,.creds > div + div{border-left:0;padding-left:0;padding-right:0}
}
@media (min-width:640px){ .creds > div + div{padding-left:22px} }

/* The lead card on popcall was never added to the 320px no-wrap list. */
@media (max-width:379px){
  .pop__lead .btn{white-space:nowrap;font-size:15.5px;padding-left:16px;padding-right:16px}
}

/* #hire h2 is a bare h2, so it inherited margin:0 and sat flush on its lede. */


/* The 18px floor lost to four higher-specificity rules, including the
   microcopy under the one conversion button. */
.signup .btn-note,.tease p:not(.lab):not(.eyebrow),.small,.drop__body{
  font-size:18px;line-height:1.55;
}

/* Capping .h at 52px capped the inner-page h1 too, so about.html had an h1
   and an h2 at exactly the same size. */
h1.h{font-size:clamp(38px,8.6vw,58px)}

/* The hairline landed on three correct boundaries, missed the one real
   white-on-white seam on testimonials, and fired where the ground already
   changes. */


/* Three slides across arrived before .books went single column, so each slot
   was 119px wide and clipped its own caption at both ends. */
@media (min-width:900px) and (max-width:1059px){ .gal__slide{flex:0 0 46%} }

/* .drop predates the hairline system; it only needs a rule where the ground
   does not already change. */
.sec--paper + .drop{border-top:1px solid var(--line)}

/* The results disclaimer belongs beside the numbers it qualifies, not 11,000px
   down in the footer. */
.disclaim--creds{margin:26px 0 0;max-width:46ch;font-size:15px;color:var(--ink-3)}
@media (min-width:900px){ .disclaim--creds{max-width:54ch} }

/* 17ch at 52px sets a four-line heading in a half-width column on a laptop,
   with the right 40% empty beside it. Open the measure where there is room. */
/* The rule spans the full column, so a headline capped at 21ch left a third
   of it empty. The measure opens to meet the rule it sits under. */
@media (min-width:1000px){ .h{max-width:30ch} .lede{max-width:62ch} }

/* ============================================================
   HERO — the face moves into the composition
   The portrait used to sit under the whole text block, so a phone
   showed two lines of eyebrow, three of headline, a deck, a form,
   a note and three stats before any image. It now sits between the
   headline and the form, and it is a band, not a thumbnail.
   ============================================================ */
.hero__in{display:grid;gap:0}
.hero__head{margin:0}
.hero__body{margin:0}

/* Phone: head, face, form. */
@media (max-width:899px){
  .hero__deck{margin-bottom:0}
  .hero__deck--two{display:none}
  .hero__body .signup{margin-top:0}
}

/* Laptop: the text stacks in the left column and the portrait holds
   the right one across both rows, bleeding off the section edge. */
@media (min-width:900px){
  .hero__in{
    grid-template-columns:1.04fr .96fr;
    grid-template-areas:"head face" "body face";
    column-gap:56px;align-items:start;
  }
  .hero__head{grid-area:head}
  .hero__body{grid-area:body}
  .hero__deck--two{display:block}
}
.disclaim--creds{margin:18px 0 0}
@media (max-width:899px){
}

/* ============================================================
   HERO PORTRAIT — one spec, 24 Oct
   img/hero.webp is a proper cut-out: RGBA, 41% of it transparent,
   the figure filling the frame edge to edge. It had a blue-and-gold
   radial disc behind it and nine competing rules cropping or
   overscanning it. Both are gone. It is the cut-out on the page's
   own ground, whole, with no background of its own.
   ============================================================ */
.hero__face{
  position:relative;display:block;margin:28px 0 0;
  background:none;overflow:visible;border-radius:0;
  height:auto;min-height:0;aspect-ratio:auto;max-height:none;
}
.hero__face img{
  display:block;width:100%;height:auto;max-width:none;margin:0;
  object-fit:contain;object-position:50% 100%;background:none;
}

@media (min-width:900px){
  /* She stands on the plinth, not off the edge of the section. */
  .hero__face{grid-area:face;align-self:end;margin:0;justify-content:center}
  .hero__face img{
    width:auto;max-width:none;margin:0 auto -1px;
    height:clamp(520px,54vw,860px);
  }
}

/* Scaled to the column the figure runs 383px on a phone and 796px on a tablet,
   which puts the button under the fold. Drive it off height and centre it. */
@media (max-width:899px){
  .hero__face{display:flex;align-items:flex-end;justify-content:center;margin:18px 0 0}
  /* Full bleed, edge to edge. She is the picture, not a thumbnail of one. */
  .hero__face{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .hero__face img{width:100%;height:auto;max-width:720px;margin:0 auto -1px}

  /* The shelf. */
  .hero__body .signup{
    max-width:none;
    background:var(--paper);border:1px solid var(--line);
    border-top-color:var(--line-2);
    border-radius:20px;padding:var(--s3);margin:0;
    box-shadow:0 18px 40px -30px rgba(17,17,16,.35);
  }
  .hero__body .signup .btn-note{margin:12px 0 0;max-width:none}
  .hero__body .signup .btn{width:100%;max-width:none}
  .hero__body .formmsg:empty{display:none}

  /* And the column she sits in, so the figure, the shelf and the headline are
     one composition instead of three left-and-centre decisions. */
  .hero__in{max-width:600px;margin-inline:auto}
  .creds{margin-top:var(--s3)}
}
@media (min-width:600px) and (max-width:899px){
  .hero h1{font-size:clamp(46px,8vw,60px)}
  .hero__face{margin-top:6px}
}

/* ============================================================
   HERO HEADLINE — one rule, 24 Oct
   It had seven competing declarations and the live one was
   clamp(38px, 9.4vw, 76px). At 390px 9.4vw is 36.7px, under its
   own 38px floor, so the type never scaled with the viewport and
   sat pinned at the minimum. text-wrap:balance then evened the
   lines out, so the longest ran 229px in a 350px column and left
   a third of the width empty. The coefficient fills the measure
   now and the balance comes off below 900px.
   ============================================================ */
.hero h1{
  font-size:clamp(44px,14.9vw,76px);
  line-height:1.0;letter-spacing:-.04em;margin:0 0 18px;
  max-width:none;text-wrap:normal;
}
/* Same problem on a laptop: a 13ch cap left a third of a 543px column empty. */
@media (min-width:900px){
  .hero h1{font-size:clamp(54px,6.2vw,88px);max-width:none;text-wrap:balance;margin-bottom:20px}
}
@media (min-width:900px) and (max-height:800px){
  .hero h1{font-size:clamp(50px,6vw,80px)}
}

/* ============================================================
   SECTION MARK — 24 Oct
   Sections were separated only by background alternation, and the
   tint sat 8 points off cream, so three consecutive white blocks
   read as one 2,000px field. The ground now shifts 16 points, and
   every section opens with the same device: a rule across the
   content column, a label sitting under it, then air, then the
   headline. On the home page the labels are numbered, because a
   13,000px page earns a table of contents.
   ============================================================ */
body.numbered{counter-reset:sec}
.sec{counter-increment:sec}

.sec > .wrap{
  border-top:2px solid var(--ink);
  padding-top:20px;
}
/* The first label in the section, whether it sits on .wrap or one level in. */
.sec > .wrap > .eyebrow:first-child,
.sec > .wrap > .lab:first-child,
.sec > .wrap > * > .eyebrow:first-child,
.sec > .wrap > * > .lab:first-child{
  display:flex;align-items:baseline;gap:16px;
  margin:0 0 30px;
}
body.numbered .sec > .wrap > .eyebrow:first-child::before,
body.numbered .sec > .wrap > .lab:first-child::before,
body.numbered .sec > .wrap > * > .eyebrow:first-child::before,
body.numbered .sec > .wrap > * > .lab:first-child::before{
  content:counter(sec,decimal-leading-zero);
  color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
@media (min-width:900px){
  .sec > .wrap{padding-top:24px}
  .sec > .wrap > .eyebrow:first-child,
  .sec > .wrap > .lab:first-child,
  .sec > .wrap > * > .eyebrow:first-child,
  .sec > .wrap > * > .lab:first-child{gap:28px;margin-bottom:38px}
}

/* The grids that are themselves the .wrap need the label spanning the row. */
.sec > .wrap.hire > div:first-child > .lab:first-child,
.sec > .wrap.faqwrap > .faqwrap__head > .eyebrow:first-child{margin-bottom:24px}

/* The rule and the ground change have to be the same event. With the section
   keeping its own top padding they sat 104px apart and read as two. The air
   above now belongs to the previous section, and the boundary is one line. */
.sec,.final,.drop{padding-top:0}
.sec + .sec,.sec + .final,.sec + .drop{padding-top:0}
.final > .wrap,.drop > .wrap{border-top:2px solid var(--ink);padding-top:20px}
.hero + .proof > .wrap:first-of-type{border-top:0}

/* ============================================================
   ROUND 6 — 26 Oct
   Her notes, in her order: the portrait sits on the field, the
   trust line stops crowding the headline, the offer boxes carry
   real hierarchy, and the case-study numbers get somewhere for
   real screenshots to go.
   ============================================================ */

/* ---------- 1. Air above the headline ---------- */
/* The trust line was 18px off a 44 to 76px headline, so "$175M tracked"
   and the promise read as one lump. */
.hero .eyebrow--trust{margin-bottom:30px}
@media (min-width:900px){ .hero .eyebrow--trust{margin-bottom:34px} }
@media (min-height:761px){ .hero{padding-top:30px} }
@media (min-width:900px){ .hero{padding-top:44px} }

/* ---------- 2. The hero subline ---------- */
.hero__deck--sub{color:var(--ink-2);margin:0}
@media (min-width:900px){ .hero__deck--sub{margin-bottom:0} }

/* ---------- 3. The offer boxes ---------- */
/* "The one I would pick" was 15px mono accent-on-paper. It measured as the
   quietest element in a card whose whole job is to be picked. It is now a
   solid badge, and the two cards no longer share a type scale. */
.plan__badge{
  display:inline-block;align-self:flex-start;
  font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cream);background:var(--ink);
  padding:10px 16px;border-radius:999px;margin:0 0 18px;line-height:1;
}
.plan--paid{
  border-color:var(--ink);border-width:2px;
  box-shadow:0 20px 44px -28px rgba(17,17,16,.38);
}
.plan--paid .plan__amt{font-size:clamp(60px,15vw,84px);font-weight:700;letter-spacing:-.055em}
.plan--free .plan__amt{font-size:clamp(38px,9vw,46px);font-weight:600;color:var(--ink-2)}
.plan--free .plan__per{color:var(--ink-3)}
.plan--paid .plan__name{font-size:23px}
.plan--paid .plan__sell + .plan__sell{margin-top:-10px}
/* The per-week number is the argument, so it is sized like one. */
.plan__unit{font-size:20px;line-height:1.35;color:var(--ink-2);margin:0 0 8px}
.plan__unit b{color:var(--ink);font-weight:700;letter-spacing:-.015em}
.plan__alt s{color:var(--ink-3);text-decoration-thickness:1px}
.plan--paid .plan__anchor + .plan__anchor{margin-top:-8px}
@media (min-width:900px){
  .plan--free{margin-top:14px}        /* the chosen card sits a notch higher */
}

/* ---------- 4. Somewhere for the real screenshots ---------- */
.shots{display:grid;gap:14px;grid-template-columns:1fr;margin:22px 0 0}
.shot{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  background:var(--cream-2);border:1px solid var(--line);aspect-ratio:4/3;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:640px){ .shots{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .shots{grid-template-columns:repeat(3,1fr)} }

/* ---------- 5. Short screens, last word ---------- */
/* These used to live in the round-2 block, where the later round-6 rules beat
   them at equal specificity. A cramped viewport has to override, so it goes
   last: tighter air above the headline, a smaller figure, CTA above the fold. */
@media (max-width:539px) and (max-height:760px){
  .hero .eyebrow--trust{margin-bottom:16px}
  .hero__face{margin-top:8px}
}
@media (min-width:900px) and (max-height:920px){
  .hero .eyebrow--trust{margin-bottom:22px}
}

/* ============================================================
   ROUND 7 — THE SCALE
   The board measured eighteen font sizes on the home page at 390,
   thirteen of them between 15 and 23px with adjacent ratios of
   1.026 to 1.048. A step has to clear about 1.125 to register as a
   different rank, so eleven of twelve steps in that band said
   nothing. h2 rendered at nine sizes across the site. That is the
   "font size is not being used to our benefit" note, and this is
   the fix: six type tokens, five spacing tokens, nothing hand-set.
   Ratios at 1280: 15 / 18 / 23 / 29 / 52 / 76.
   ============================================================ */
:root{
  --t-label:15px;
  --t-body:18px;
  --t-lead:clamp(20px,1.9vw,23px);
  --t-sub:clamp(25px,2.3vw,29px);
  --t-head:clamp(36px,3.9vw,48px);
  --t-hero:clamp(44px,5.4vw,76px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
}
@media (min-width:900px){ :root{--s4:48px;--s5:80px} }

/* ---- display ---- */
.hero h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.042em;line-height:1.0;margin:0 0 var(--s3)}
h1.h{font-size:clamp(40px,4.8vw,60px);font-weight:700;letter-spacing:-.038em}
.h,.final h2,.drop h2,#hire h2,.faqwrap__head .h,.vidsec__in h2,.mani h2{
  font-size:var(--t-head);font-weight:700;letter-spacing:-.035em;line-height:1.04;
}
h1,h2,h3,h4{font-weight:700}

/* ---- the sub rank: card titles, section sub-heads, prices ---- */
.trio__item h3,.card h3,.plan__name,.h3,.tease h3,.book__title,.vid__t,
.reach h2,.reach h3,.pc__why h3{
  font-size:var(--t-sub);font-weight:700;letter-spacing:-.028em;line-height:1.14;
}

/* ---- the intro rank, which did not exist ---- */
.lede,.drop__body,.hero__deck,.cases__bridge,.mani__body p{
  font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);
}
.lede b,.hero__deck b,.mani__body p b{color:var(--ink);font-weight:700}

/* ---- body: everything that was 16, 16.5, 17, 17.5, 18.5, 19, 19.5 ---- */
.rows__v,.modes__v,.sound__v,.bookmeta .v,.dual li,.case__t,.card p:not(.lab),
.reach p:not(.lab),.plan li,.plan li b,.plan__sell,.faq__a,.trio__item p,
.book__desc,.bundle__sell,.pc__why p,.aside,.btn-note,.small,.buy__name,
.plan__anchor,.launchnote,.foot__stack a,.seven,.ticks li{
  font-size:var(--t-body);line-height:1.55;
}
.plan li b{font-weight:700;line-height:1.3}
.faq summary{font-size:21px;font-weight:700}

/* ---- the numbers are the argument, so they keep their own rank ---- */
.creds__num{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.buy__price,.bookglance__p{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.04em}
.press__item{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.025em}

/* ---- spacing: fifteen hand-set values at 390 became five tokens ---- */
.eyebrow,.lab{margin:0 0 var(--s4)}
.h,h1.h,.final h2,.drop h2,#hire h2{margin:0 0 var(--s3)}
.lede{margin:0 0 var(--s3);max-width:62ch}
.lede + .lede{margin-top:calc(var(--s3) * -0.5)}
.plan,.card,.reach,.screencard,.bookglance__i,.bundle,.pop__lead{padding:var(--s3)}
.signup,.dropform,.plans,.grid,.shots,.vids{gap:var(--s2)}
.sec > .wrap{padding-top:var(--s3)}

/* The footer column headers were 15px over 16px links, so the labels were
   smaller than the things they labelled. */
.footcols .lab{font-size:var(--t-label);color:var(--ink-3);margin:0 0 var(--s2)}
.foot__stack a{padding:var(--s1) 0}

/* The breadcrumb and the section eyebrow were the same type object, 15px mono
   uppercase, sitting 15px apart saying the same words. Two objects now. */
.crumb .wrap{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-3)}
.crumb b{font-weight:600;color:var(--ink-2)}

/* Nav links were 15.5px, a sixteenth size doing no work. And the nav rows were
   40px tall against a 44px minimum. */
.nav__link,.nav__btn{font-size:16px}
.navpanel a:not(.btn),.nav__menu a{
  min-height:44px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
}
.navpanel a:not(.btn) .nav__sub,.nav__menu a .nav__sub{margin-top:4px}
.nav__menu{min-width:300px}
.foot__links a{padding:12px 0;display:inline-block}

/* ============================================================
   ROUND 7 — THE OFFER, AND WHAT WAS ARGUING WITH IT
   Measured at 390: the free card ran 1,174px, the paid card
   1,993px, stacked, so the two prices were never on one screen
   and nobody compared them. The paid card's own buy button sat
   1,463px below its own price. And for all 1,993px of it the only
   button on screen was the sticky bar selling the free thing.
   ============================================================ */

/* Both prices, one viewport, before either card opens. */
.ladder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:var(--s3) 0 0}
.ladder__i{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:16px;min-height:92px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);text-decoration:none;color:var(--ink);
}
.ladder__i--go{border:2px solid var(--ink);box-shadow:0 12px 28px -20px rgba(17,17,16,.42)}
.ladder__p{font-size:clamp(28px,7vw,34px);font-weight:700;letter-spacing:-.045em;line-height:1}
.ladder__per{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.ladder__n{font-size:var(--t-label);line-height:1.35;color:var(--ink-2)}
.ladder__note{font-size:var(--t-body);color:var(--ink-2);margin:var(--s2) 0 0}
.ladder__i:hover .ladder__n,.ladder__i:focus-visible .ladder__n{color:var(--ink)}
@media (min-width:860px){ .ladder,.ladder__note{display:none} }

/* The free card's list is as long as the paid card's, so on a phone it folds. */
.plan__more--free > summary{display:flex}
@media (min-width:860px){
  /* No summary to click above 860, so the list has to be open or the five
     things free includes are unreachable. */
  .plan__more--free > summary{display:none}
  .plan__more--free ul{margin-top:0}
  .plan__more--free{display:block}
}

/* The first ask goes next to the price. The old one stays at the foot. */
.plan--paid .btn{margin-top:0}
.plan--paid .plan__anchor + .btn,.plan--paid .plan__more + .btn{margin-top:auto}
.btn-note--tight{margin:10px 0 var(--s3)}
/* The paid tier's whole $49 argument was set at 15px, the smallest size in the
   card whose job was to justify $47. */
.plan--paid .plan__alt{font-family:var(--sans);font-size:var(--t-body);line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--ink-2);margin:0 0 var(--s2)}
.plan--paid .plan__alt b{color:var(--ink);font-weight:700}
.plan--paid .plan__alt s{color:var(--ink-3);text-decoration-thickness:1.5px}
/* "Or $8 a month" rendered at the same 302x62 as the annual, which is a coin
   flip on an option that costs $49 of LTV per taker. */
.plan--paid .btn--ghost{
  width:auto;align-self:flex-start;min-height:0;border:0;background:none;
  padding:10px 0;margin-top:4px;font-size:17px;
  text-decoration:underline;text-underline-offset:3px;
}
@media (min-width:900px){
  .plans{align-items:start}
  .plan{height:auto}
  .plan--free{margin-top:0;position:sticky;top:116px}
}

/* The three doors had no handles: three divs, no anchor, no arrow. */
a.trio__item{display:block;text-decoration:none;color:inherit}
a.trio__item .card__go{display:inline-block;margin-top:var(--s2);font-size:var(--t-body);
  font-weight:600;color:var(--accent)}
a.trio__item:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* ============================================================
   ROUND 7 — SECTION DEFINITION, FINISHED
   The device was right and it stopped halfway. The count quit at
   06 in front of the reader, the proof strip never got a rule on
   any page, three consecutive sections on the home page were the
   same white, and two boundaries were drawn twice.
   ============================================================ */

/* The count runs to the end of the page now. */
.sec,.final,.drop{counter-increment:sec}
body.numbered .final > .wrap > .eyebrow:first-child::before,
body.numbered .final > .wrap > * > .eyebrow:first-child::before,
body.numbered .drop > .wrap > .eyebrow:first-child::before,
body.numbered .drop > .wrap > * > .eyebrow:first-child::before{
  content:counter(sec,decimal-leading-zero);
  color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 auto;
}
body.numbered .final > .wrap > .eyebrow:first-child,
body.numbered .final > .wrap > * > .eyebrow:first-child,
body.numbered .drop > .wrap > .eyebrow:first-child,
body.numbered .drop > .wrap > * > .eyebrow:first-child{
  display:flex;align-items:baseline;gap:16px;margin:0 0 30px;
}
@media (min-width:900px){
  body.numbered .final > .wrap > .eyebrow:first-child,
  body.numbered .final > .wrap > * > .eyebrow:first-child,
  body.numbered .drop > .wrap > .eyebrow:first-child,
  body.numbered .drop > .wrap > * > .eyebrow:first-child{gap:28px;margin-bottom:38px}
}

/* The proof strip is part of the system. */
.proof > .wrap:first-of-type{border-top:2px solid var(--ink);padding-top:var(--s3)}
.hero + .proof > .wrap:first-of-type{border-top:0;padding-top:0}

/* Three grounds, one per world, so the reader learns the rule by section 03.
   Light grounds only, dark text, accent still accent. */
#newsletter{background:var(--cream)}
#more{background:var(--cream-2)}
#hire{background:var(--paper)}
.card{box-shadow:0 1px 2px rgba(17,17,16,.05)}

/* The tease sat inside a .sec that already drew the rule, so it drew a second
   one 26px away at a different width. It is content now, not a section. */
.tease > .wrap{border-top:0;padding-top:0}

/* A boundary the eye can see needs the rule and the ground to change together.
   The home page runs mechanism, newsletter, more, hire, software, faq, final,
   drop, so the grounds alternate explicitly rather than by sibling guesswork.
   Cream, white and the warm tint only. No dark grounds anywhere. */
#software{background:var(--cream-2)}
#faq{background:var(--cream)}
.final{background:var(--paper)}
.drop{background:var(--cream-2)}
.sec--paper + .sec--paper,
.proof + .sec--paper{background:var(--cream)}
.sec--tint + .sec--tint{background:var(--paper)}
.sec--tint + .drop{background:var(--paper)}

/* ============================================================
   ROUND 7 — SOMETHING TO LOOK AT
   The home page ran 14,900px and held one photograph, on a site
   whose argument is that she makes things people look at. Every
   reader on the board asked the same first question: show me one.
   ============================================================ */

/* The sample. Five real ideas before the ask. */
.sample{margin:var(--s4) 0 0;padding:var(--s3);background:var(--paper);
  border:1px solid var(--line);border-radius:16px}
.sample__l{list-style:none;counter-reset:si;margin:var(--s2) 0 0;padding:0}
.sample__l li{counter-increment:si;position:relative;padding:var(--s3) 0 var(--s3) 44px;
  border-bottom:1px solid var(--line);font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.sample__l li:last-child{border-bottom:0;padding-bottom:var(--s2)}
.sample__l li::before{
  content:counter(si,decimal-leading-zero);position:absolute;left:0;top:var(--s3);
  font-family:var(--mono);font-size:var(--t-label);color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.sample__l li b{display:block;color:var(--ink);font-weight:700;letter-spacing:-.015em;
  font-size:19px;margin-bottom:5px;line-height:1.3}
.sample__n{font-size:var(--t-body);font-weight:600;color:var(--ink);margin:var(--s3) 0 0}

/* Image bands. Full-bleed on a phone, inside the measure on a laptop. */
.band{position:relative;margin:var(--s3) 0 0;aspect-ratio:21/9;overflow:hidden;
  background:var(--cream-2);border:1px solid var(--line);border-radius:12px}
.band img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:639px){ .band{aspect-ratio:4/3} }

/* The six teaser cards were white on a white section with 1px tan borders, so
   they were not cards, they were six wireframe rectangles with identical
   weight on a $85 pair of books, a free app and a $7.77 meter. */
.card__fig{display:block;position:relative;aspect-ratio:16/10;margin:0 0 var(--s2);
  border-radius:10px;overflow:hidden;background:var(--cream-2);border:1px solid var(--line)}
.card__fig img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:860px){ .card--hero{grid-column:span 2} .card--hero .card__fig{aspect-ratio:21/9} }

/* Three phone screens where the app should be. */
.appshots{display:grid;gap:var(--s2);grid-template-columns:repeat(3,1fr);margin:var(--s3) 0}
.appshot{position:relative;margin:0;aspect-ratio:9/18;border-radius:20px;overflow:hidden;
  background:var(--cream-2);border:1px solid var(--line)}
.appshot img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:639px){
  .appshots{grid-template-columns:1fr 1fr}
  .appshot:nth-child(3){display:none}
}

/* The press row: a logo slot each, at a size a skeptical buyer can read. */
.press__slot{display:block;width:100%;height:30px;margin:0 auto 8px;
  background:var(--cream-2);border-radius:4px}
.press__item{display:flex;flex-direction:column;align-items:center;min-width:104px}
.press__note{font-size:var(--t-body);color:var(--ink-2);margin:var(--s2) 0 0}
.press__note i{font-style:italic}

/* Shopify and Ads Manager screenshots are wider than 4/3, and object-fit:cover
   in a 4/3 box crops off exactly the numbers the slot exists to show. */
.shot{aspect-ratio:16/10}
@media (max-width:639px){ .shot{aspect-ratio:4/3} }

/* The galleries got SMALLER as the screen got bigger: 287px on a phone and
   166px in a half-width column at 1280, where the slot label filled two
   thirds of the box. */
@media (min-width:900px){ .gal__slide{flex:0 0 calc((100% - 16px) / 2)} }
@media (min-width:1200px){ .gal__slide{flex:0 0 calc((100% - 32px) / 2)} }
.gal__slide:nth-child(even){background:var(--cream-2)}
.slot__desc{max-width:24ch}

/* The tick mark was positioned against a 26px left padding that the later
   `.plan li,.ticks li{padding:18px 0}` rule removed, so a red check sat on
   top of the first letter of all three category lines. On the page asking
   someone to trust it with four years of medical history. */
.ticks li{padding:18px 0 18px 28px;position:relative}
.ticks li::before{left:2px;top:26px}

/* --cta-w was written for a one-line reassurance note and is now carrying the
   disclaimer and the pricing terms, so the note rendered 310px wide and eleven
   lines deep with 600px of empty page beside it. */
.offer .btn-note{max-width:52ch}
.btn-note{max-width:58ch}
.hire__cta .btn-note{max-width:40ch}

/* The strip was built for a quote wall and only ever held one quote. */
.strip--one{grid-template-columns:1fr}
@media (min-width:900px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip--one{grid-template-columns:1fr}
  /* The testimonials h1 wrapped to four lines in a .7fr column with 180px
     spare beside it, because the video grid was taking 1.7fr. */
  .vidsec__in{display:block}
  .vids{margin-top:var(--s4)}
}
@media (min-width:1100px){ .strip{grid-template-columns:repeat(3,1fr)} .strip--one{grid-template-columns:1fr} }

/* The footer had no field, so the last thing a reader met on a site with one
   goal was a link list. And the brand lockup repeated the masthead's, 90px up. */
.footsignup{display:grid;gap:var(--s2);margin:0}
.footsignup .btn{width:100%;justify-content:center}
.footsignup__lead{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--s2)}

/* Readers counted four email fields on the home page and the fourth one
   annoyed them. Pages that already close with a capture don't get a fifth. */
body:has(.final) .footsignup{display:none}

/* The focused skip link rendered at the top of the document under a sticky
   masthead at z-index 60, so the first thing a keyboard reader reaches was
   behind the header. */
.skip:focus{position:fixed;z-index:200;top:10px;left:10px}

/* ============================================================
   ROUND 8 — THE DESKTOP HERO
   It was 1,033px tall in an 800px viewport. The figure started at
   y=656, so the fold held the top of her head and nothing else.
   The three proof numbers sat 140px below the fold. The upper
   right was 533 x 500px of empty cream. And she was bottom-aligned
   to a section edge, so on desktop she sat on nothing at all.
   The plinth is the ground. Both columns rest on it, and it
   carries the proof.
   ============================================================ */
.hero{position:relative;padding-bottom:0}
.hero__plinth{
  background:var(--cream-2);border-top:1px solid var(--line-2);
  padding:var(--s3) 0 var(--s4);margin-top:0;
}
.hero__plinth .creds{
  margin-top:0;border-top:0;padding-top:0;
}
.hero__plinth .disclaim--creds{margin:var(--s2) 0 0}

@media (min-width:900px){
  .hero{padding-top:44px}
  .hero__in{
    grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
    grid-template-areas:"head face" "body face";
    column-gap:var(--s4);
    align-items:end;
    row-gap:0;
  }
  .hero__head{grid-area:head;align-self:end;margin:0 0 var(--s3)}
  .hero__body{grid-area:body;margin:0}

  /* Two lines, not three, and no 180px of gray between the promise
     and the field. */
  .hero h1{font-size:clamp(46px,4.5vw,68px);max-width:15ch;margin:0 0 var(--s2)}
  .hero__deck{margin:0;max-width:44ch}
  .hero__deck--sub{margin:4px 0 0}

  /* The field is a panel on the plinth, the same object the phone gets. */
  .hero__body .signup{
    max-width:none;margin:var(--s3) 0 0;
    background:var(--paper);border:1px solid var(--line);
    border-radius:20px;padding:var(--s3);
    box-shadow:0 18px 40px -30px rgba(17,17,16,.35);
  }
  .hero__body .signup__row{flex-wrap:wrap}
  .hero__body .signup input{flex:1 1 100%;min-width:0}
  .hero__body .signup .btn{width:100%;max-width:none;flex:1 1 100%}
  .hero__body .signup .btn-note{margin:12px 0 0;max-width:none}
  .hero__body .formmsg:empty{display:none}

  .hero__plinth .creds{grid-template-columns:repeat(3,1fr)}
}

/* On a short laptop the figure gives way before the offer does. */
@media (min-width:900px) and (max-height:820px){
  .hero{padding-top:30px}
  .hero__plinth{padding:var(--s2) 0 var(--s3)}
}

/* 15ch wrapped a 42-character headline to three lines once the type hit its
   68px cap. The measure is the column, so the size follows the column. */
@media (min-width:900px){ .hero h1{max-width:none} }
@media (min-width:1200px){ .hero h1{font-size:clamp(56px,4.3vw,64px)} }
@media (min-width:1600px){ .hero h1{font-size:58px} }

/* The nav wrapped to two lines at every desktop width from 1060 up: eight
   items at 16px in a 1180px wrap next to a 243px CTA. Her rule is one line.
   The bar gets the viewport, not the text measure. */
@media (min-width:1000px){
  .nav__list{flex-wrap:nowrap}
  .nav__link,.nav__btn{font-size:15px;white-space:nowrap}
  .nav__list{column-gap:18px}
  .masthead__in{max-width:1480px;padding-left:28px;padding-right:28px}
}
@media (min-width:1000px) and (max-width:1339px){
  .nav__list{column-gap:14px}
  .masthead__cta{padding-left:18px;padding-right:18px;font-size:15px}
}
/* 61.92px at 1440 pushed the headline to three lines in a 620px column. */
@media (min-width:1400px) and (max-width:1599px){ .hero h1{font-size:56px} }

/* She runs past her column toward the page edge rather than being letterboxed
   inside it. The hero clips, so nothing scrolls sideways. */
.hero{overflow:hidden}
@media (min-width:900px){
  .hero__face{justify-content:flex-end;margin-right:calc(var(--pad) * -1)}
}

/* ============================================================
   ROUND 9 — WHAT THE BOARD MEASURED
   Eight cold reviewers. These are the findings three or more of
   them reached independently, plus the ones a single reviewer
   proved with a number.
   ============================================================ */

/* ---- The card labels were wearing their section's number. Two "02"s in one
   viewport on the home page, and "Both books" numbered on the books page. */
body.numbered .sec > .wrap > .sample > .lab:first-child::before,
body.numbered .sec > .wrap > .bundle > .lab:first-child::before{content:none}
body.numbered .sec > .wrap > .sample > .lab:first-child,
body.numbered .sec > .wrap > .bundle > .lab:first-child{display:block;gap:0;margin:0 0 var(--s3)}

/* ---- The 404 page's headline was larger than the money page's. The hero has
   to outrank every other h1 on the site at every width. */
h1.h{font-size:clamp(36px,3.6vw,46px)}

/* ---- The hero headline sat pinned at its 44px floor from 320 all the way to
   814px, because 5.4vw never cleared the floor, and then SHRANK at the 900
   breakpoint. The coefficient has to fill the measure. */
:root{--t-hero:clamp(44px,8.2vw,62px)}
@media (min-width:900px){ .hero h1{font-size:clamp(56px,4.4vw,68px)} }
@media (min-width:1400px) and (max-width:1599px){ .hero h1{font-size:62px} }
@media (min-width:1600px){ .hero h1{font-size:64px} }

/* ---- The section rule ran 40px proud of everything inside it, on all ten
   pages, because border-top paints on the border box and .wrap carries the
   padding. The most repeated element on the site aligned with nothing. */
.sec > .wrap,.final > .wrap,.drop > .wrap,.proof > .wrap:first-of-type{
  border-top:0;position:relative;
}
.sec > .wrap::before,.final > .wrap::before,.drop > .wrap::before,
.proof > .wrap:first-of-type::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:2px;background:var(--ink);
}
.hero + .proof > .wrap:first-of-type::before,.tease > .wrap::before{content:none}

/* ---- The portrait stopped being full bleed between 721 and 899, floating in
   up to 90px of cream a side, against a stated full-bleed decision. */
@media (min-width:600px) and (max-width:899px){
  .hero__face img{max-width:none;width:100%}
}

/* ---- Desktop: 150px of dead cream between the promise and the field, which
   is the leftover of bottom-aligning a text column against a photograph.
   The air moves above the eyebrow, where it reads as intentional. */
@media (min-width:900px){
  .hero__in{align-content:end}
  .hero__head{margin:0 0 var(--s3)}
  .hero__body .signup{margin-top:var(--s4)}
}

/* ---- .hero__face is display:block at >=900, so justify-content did nothing
   and the over-constrained auto margins resolved left: her knee was clipped
   15 to 49px at 900-1440 and she floated with 150px of cream at 1920. */
@media (min-width:900px){
  .hero__face{display:flex;align-items:flex-end;justify-content:flex-end}
  .hero__face img{margin:0 0 -1px}
}

/* ---- The desktop CTA fell below the fold on the three commonest laptops.
   That is layout, not the accepted portrait trade. */
@media (min-width:900px){
  .hero__face img{max-height:min(74vh,700px);object-fit:contain;object-position:50% 100%}
}

/* ---- Three logo slots at three different widths, sized by the length of the
   word underneath. Real logos do not arrive in matching ratios. */
.press{align-items:flex-start}
.press__lab{padding-top:8px}
.press__item{min-width:132px}
.press__slot{width:132px;height:34px;border:1px dashed var(--line-2);border-radius:var(--r-img)}
@media (max-width:539px){
  .press{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
  .press__lab{grid-column:1 / -1;padding-top:0}
  .press__item{min-width:0}
  .press__slot{width:100%;max-width:132px;margin-inline:auto}
}

/* ---- The masthead sat on a different grid from the page: the mark hung
   142px left of every headline at 1440 and 162px at 1920. */
@media (min-width:1000px){
  .masthead__in{max-width:var(--maxw);padding-left:var(--pad);padding-right:var(--pad)}
}
/* ---- 900 to 999 showed the masthead CTA, the sticky bar and the hero button
   at once, all selling the same free fifty. */
@media (min-width:900px) and (max-width:999px){ .masthead__cta{display:none} }

/* ---- The sticky bar's note floated up to 357px from the centre of its own
   button at the widths where the bar is the only CTA on screen. */
@media (min-width:900px) and (max-width:1059px){
  .sticky > div{display:flex;align-items:center;gap:20px;max-width:var(--maxw);
    margin:0 auto;padding:0 var(--pad)}
  .sticky__note{text-align:left;margin:0}
}

/* ---- The footer was the only boundary on the site with no rule, and its
   lead line ran 97 characters against a 62ch measure everywhere else. */
.foot{padding-top:0}
.foot > .wrap{border-top:2px solid var(--ink);padding-top:var(--s4)}
.foot__who{max-width:62ch}
.foot__links{gap:0 18px}
.foot__links .formmsg{flex:0 0 100%;margin-top:8px}
.crumb{padding:var(--s3) 0 var(--s2)}

/* ---- The teaser cards stretched to their tallest sibling with nothing
   anchoring the footer: 322px of empty white inside a 614px card, and an
   orphan row with 744px of tint beside one card. */
.card{display:flex;flex-direction:column}
.card .card__go{margin-top:auto;padding-top:var(--s2)}
@media (min-width:860px){
  .grid--3 > .card:last-child{grid-column:span 2}
  .grid--3 > .card:last-child .card__fig{aspect-ratio:21/9}
}

/* ---- Three doors at 221px wide from 640 wrapped their CTA onto two lines,
   the only wrapping link label on the site. */
@media (min-width:640px) and (max-width:899px){
  .trio{grid-template-columns:1fr 1fr}
  .trio__item:last-child{grid-column:span 2}
}
.trio__item{display:flex;flex-direction:column}
a.trio__item .card__go{margin-top:auto}
@media (max-width:899px){ .trio__item:last-child{border-bottom:0} }

/* ---- The galleries were smaller on a laptop than on a phone: 185px slides at
   900 against 287px at 390. */
@media (min-width:900px) and (max-width:1199px){ .books{grid-template-columns:1fr} }

/* ---- .mani__body p beat .eyebrow by one point of specificity 1,440 lines
   later, so the About page carried the only 20px eyebrow on the site. */
.lede,.drop__body,.hero__deck,.cases__bridge,.mani__body p:not(.lab):not(.eyebrow){
  font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);
}
.mani__body p.eyebrow,.mani__body p.lab{font-size:var(--t-label);color:var(--ink-3)}

/* ---- The base was 18.5px while --t-body is 18px, so anything the token list
   did not name inherited a size outside the system. */
@media (min-width:900px){ body{font-size:var(--t-body)} }

/* ---- Nine live sizes outside the six tokens. */
.btn,.btn--sm,.mark,.plan--paid .btn--ghost,.ladder__per,
a.trio__item .card__go,.plan__unit,.sample__l li b{font-size:var(--t-body)}
.btn .arw{font-size:inherit}
.press__item,.faq summary,.footsignup__lead{font-size:var(--t-lead)}
.proof__q,.plan--paid .plan__name{font-size:var(--t-sub)}
.nav__link,.nav__btn,.crumb .wrap{font-size:var(--t-label)}
.crumb .wrap{font-weight:600;font-family:var(--sans);letter-spacing:0;text-transform:none}

/* ---- Two numeric ranks instead of seven. */
:root{--t-num:clamp(28px,3vw,40px);--t-num-xl:clamp(44px,5.4vw,76px)}
.creds__num,.ladder__p,.num,.case__n,.buy__price,.bookglance__p,
.plan--free .plan__amt{font-size:var(--t-num)}
.plan--paid .plan__amt,.pop__amt{font-size:var(--t-num-xl)}

/* ---- Measure discipline: .lede is 62ch and .faq__a 58ch, these escaped. */
.sample__l li,.sample__l li b{max-width:68ch}
.slot__desc{text-wrap:balance}
@media (min-width:900px){ .sample{max-width:760px} .tabs__q{max-width:48ch} }

/* ---- The tease's gap shorthand put 40px between consecutive sentences. */
@media (min-width:900px){
  .tease{grid-template-columns:200px minmax(0,1fr);column-gap:40px;row-gap:10px}
}

/* ---- The 2px ink rule meant "section" and was being used by five content
   components, so 30% of the rules on the site were not boundaries. */
.pop,.modes,.cases,.sounds,.rows{border-top-width:1px;border-top-color:var(--line-2)}

/* ---- Cosmetic leftovers the board measured. */
.vid__badge{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.bookglance__i b{min-height:2.6em;display:flex;align-items:center}
.final__cta .btn-note{text-align:left;max-width:320px}
.ladder{gap:var(--s1)}
.ladder__i{padding:var(--s2)}
.appshots{grid-template-columns:repeat(3,minmax(0,260px));justify-content:start}
@media (max-width:639px){ .appshots{grid-template-columns:1fr} .appshot:nth-child(3){display:block} }
.slot__desc{min-height:calc(2 * 1.55em)}

/* The drops list is a line under the final CTA on the home page now, so the
   .final section is the last numbered one there. */
.sample__n--sub{font-weight:400;color:var(--ink-2);margin-top:var(--s1)}
.band--sample{margin:0 0 var(--s3)}

/* h1.h has to sit between the hero and the section heads, not under them.
   clamp(36,3.6vw,46) put every inner page's h1 at or below its own h2s. */
h1.h{font-size:clamp(40px,4.2vw,54px)}

/* At 600-899 the hero text was capped to a 600px centred column while the
   masthead ran the full wrap, so the mark sat 84px left of every headline.
   The figure is full bleed at these widths anyway, so the cap buys nothing. */
@media (min-width:600px) and (max-width:899px){
  .hero__in{max-width:none;margin-inline:0}
  /* The 680px cap left the shelf 70px off the centre the figure and the
     plinth both sit on. The headline keeps its measure. The shelf is a
     shelf: it runs the column. */
  .hero__head{max-width:680px}
  .hero__body{max-width:none}
}

/* ============================================================
   THE WAIT — print on demand is a feature if you fill it.
   A book made for one person takes two weeks. The reader starts
   reading the day she buys, so the wait carries value instead of
   an apology.
   ============================================================ */
.wait{
  margin:var(--s3) 0;padding:var(--s3);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-img);
}
.sec--tint .wait,#both .wait{background:var(--paper)}
.wait__h{font-size:var(--t-sub);font-weight:700;letter-spacing:-.028em;line-height:1.16;
  margin:0 0 var(--s2)}
.wait__l{list-style:none;margin:0;padding:0}
.wait__l li{
  position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);
  font-size:var(--t-body);line-height:1.5;color:var(--ink-2);
}
.wait__l li:last-child{border-bottom:0;padding-bottom:var(--s2)}
.wait__l li::before{
  content:"";position:absolute;left:2px;top:22px;width:6px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(42deg);
}
.wait__l li b{color:var(--ink);font-weight:700}
.wait__n{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);margin:var(--s2) 0 0}
.wait__n b{color:var(--ink);font-weight:700}
.bundle__wait{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);margin:0 0 var(--s2)}
.bundle__wait b{color:var(--ink);font-weight:700}
.bookline{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);margin:var(--s3) 0 0;max-width:62ch}

/* ============================================================
   ROUND 10 — WHAT THE SECOND BOARD MEASURED
   ============================================================ */

/* The footer was the one boundary still painting on the border box, so its
   rule ran 40px wider than every other rule on all ten pages. */
.foot > .wrap{border-top:0;position:relative;padding-top:var(--s4)}
.foot > .wrap::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:2px;background:var(--ink);
}

/* Four footer columns in a three-column grid: an orphan row on seven pages,
   a 127px crushed column at 768, and sideways scroll between 640 and 729. */
/* The signup column's min-content is ~311px, so four equal tracks overflowed
   below 1180. It takes the full row until there is room for it. */
/* client@ashleighwarren.org is 25 unbreakable characters, so three tracks
   overflowed a 600px content box. Two until there is room, four at 1180. */
@media (min-width:640px){
  .footcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .footcols > .footsignup{grid-column:1 / -1}
}
@media (min-width:900px){ .footcols{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1180px){
  .footcols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footcols > .footsignup{grid-column:auto}
}
.foot__stack a{overflow-wrap:anywhere}
.footcols > *{min-width:0}
.footsignup input{width:100%;min-width:0}
.footsignup .btn{min-width:0;padding-left:16px;padding-right:16px}
.foot__links li:has(.formmsg){flex:0 0 100%}
@media (min-width:1060px){ .foot{padding-bottom:var(--s5)} }

/* The hero headline was 62px at 768, 56px at 1280 and 62px again at 1440:
   smaller on a laptop than on a tablet, because 4.4vw never cleared its own
   56px floor until 1272. One continuous ramp instead. */
@media (min-width:900px){ .hero h1{font-size:clamp(58px,5.2vw,72px)} }
@media (min-width:1400px) and (max-width:1599px){ .hero h1{font-size:clamp(58px,5.2vw,72px)} }
@media (min-width:1600px){ .hero h1{font-size:72px} }

/* The free card followed the reader down through the whole $47 argument, and
   its own button was never on screen while it was pinned. */
@media (min-width:900px){
  .plan--free{position:static;align-self:start}
  .plans{gap:var(--s3)}
  .grid{gap:var(--s3)}
}

/* The ladder, and the one line that stops $47 cannibalising the free signup,
   were display:none above 860. Desktop never saw either. */
@media (min-width:860px){
  .ladder{display:grid;grid-template-columns:1fr 1fr;max-width:640px;margin:var(--s3) auto 0}
  .ladder__note{display:block;text-align:center;max-width:640px;margin:var(--s2) auto 0}
}

/* The trio CTA wrapped to two lines between 900 and 949. The previous fix
   moved the break rather than closing it. */
@media (min-width:640px) and (max-width:949px){
  .trio{grid-template-columns:1fr 1fr}
  .trio__item:last-child{grid-column:span 2}
}

/* Six cards in a three-column grid left a 372px orphan beside the last one. */
@media (min-width:860px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3 > .card:last-child{grid-column:auto}
  .grid--3 > .card--hero{grid-column:span 2}
  .grid--3 > .card--hero .card__fig{aspect-ratio:21/9}
}

/* The galleries were 247px at 1280 and 287px on a phone, because .books went
   back to two columns above 1199. */
@media (min-width:900px){ .books{grid-template-columns:1fr} }

/* The hire door stranded its buttons at the top of a 686px empty column, on
   the section that closes the six-figure buyer. */
@media (min-width:900px){ .hire__cta{position:sticky;top:132px} }

/* 302px of placeholder sat between the reader and the five ideas, and the
   card used 760 of an 1100px measure. */
@media (min-width:1100px){
  .sample{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 340px;
    column-gap:var(--s4);align-items:start}
  .sample > .lab{grid-column:1 / -1}
  .sample .band--sample{grid-column:2;grid-row:2 / span 3;margin:0;aspect-ratio:9/16}
  .sample__l,.sample__n{grid-column:1}
}

/* The numbers are the proposition and they were the quietest mark in the card. */
.sample__l li::before{font-size:19px;font-weight:600;color:var(--ink)}
.sample__l li{padding-left:52px}

/* "Coming soon" rendered at 12.5px, under the 15px floor, on four cards. */
.vid[disabled] .vid__thumb::after{font-size:15px}

/* The em the whole headline turns on rendered identically to every other word.
   text-decoration skips the descender of the y, which at 73px reads as a
   broken rule, so the underline is drawn as a background instead. */
.hero h1 em{
  font-style:normal;font-weight:800;color:inherit;
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:100% .055em;
  background-position:0 96%;
  padding-bottom:.02em;
}

/* Headlines broke wherever the measure ran out, in 40 to 62px type, on ten pages. */
h1,h2,.h,h1.h,.trio__item h3,.card h3,.wait__h{text-wrap:balance}
@media (min-width:900px){ h1.h{max-width:22ch} }

/* Six boundaries where the rule was drawn and the ground never changed. */
#about{background:var(--paper)}
.foot{background:var(--cream-2)}
.final + .foot,.drop + .foot{background:var(--cream)}

/* The last ink rules still pretending to be section boundaries. */
.plan ul,.strip,.ticks,.bookmeta,.trio{border-top-width:1px;border-top-color:var(--line)}

/* The desktop dropdown had no separators while the mobile panel did. */
.nav__menu li + li{border-top:1px solid var(--line)}

/* 120px of cream under every page at widths with no sticky bar to clear. */
.gal__count{font-family:var(--sans);text-transform:none;letter-spacing:0}

/* ============================================================
   THE HERO, IN PROPORTION
   At 860 the figure measured 941px tall in a 900px viewport, so
   she did not fit on one screen and a short scroll landed on
   trousers. Meanwhile the headline was still 60px and the deck
   23px against her. Big is right. Big and unreadable is not.
   She is capped to one screen, and the type scales with her.
   ============================================================ */
@media (max-width:899px){
  /* Full bleed while the width is the limit, height-capped after that, so
     the whole person is always on one screen. Setting a height and capping
     the width letterboxes her inside the box, so the cap is converted to a
     width through the asset's own ratio (1100 / 1203 = 0.9144) and the
     height follows. */
  .hero__face img{
    width:min(100%, calc(min(74vh, 860px) * 0.9144));
    height:auto;max-width:100%;margin:0 auto -1px;
  }
}

/* Phone: the headline carries the screen. */
@media (max-width:599px){
  :root{--t-hero:clamp(46px,12vw,58px)}
  .hero__deck{font-size:clamp(21px,5.4vw,25px);line-height:1.35}
  .hero .eyebrow--trust{font-size:16px;letter-spacing:.055em}
}

/* Tablet: she is 600 to 700px of figure, so the type has to answer her. */
@media (min-width:600px) and (max-width:899px){
  .hero h1{font-size:clamp(58px,8.5vw,78px)}
  .hero__deck{font-size:clamp(24px,3.2vw,30px);line-height:1.32}
  .hero .eyebrow--trust{font-size:17px;letter-spacing:.06em}
  .hero__body .signup{padding:var(--s4)}
  .hero__body .signup input{min-height:64px;font-size:19px}
  .hero__body .signup .btn{min-height:64px;font-size:20px}
  .hero__body .signup .btn-note{font-size:19px}
}

/* Laptop: the deck was 23px under a 72px headline beside a 700px figure. */
@media (min-width:900px){
  .hero__deck{font-size:clamp(23px,1.75vw,28px);line-height:1.34}
  .hero .eyebrow--trust{font-size:16px}
  .hero__body .signup input{min-height:62px;font-size:19px}
  .hero__body .signup .btn{min-height:62px;font-size:19px}
}

/* The plinth carries the only proof above the fold and its labels were 15px
   against 28 to 40px numbers: the smallest type on the screen, in the band
   where everything else just grew. */
.creds__num{font-size:clamp(34px,3.4vw,46px);line-height:1}
.creds__lab{font-size:var(--t-body);line-height:1.4;color:var(--ink-2)}
.disclaim--creds{font-size:17px;color:var(--ink-3)}
.hero__plinth .creds{gap:0 var(--s3)}
.hero__plinth .creds > div{padding-right:var(--s3)}
.hero__plinth .creds > div + div{padding-left:var(--s3)}
@media (min-width:600px){
  .creds__num{font-size:clamp(38px,4vw,52px)}
  .creds__lab{font-size:19px}
  .disclaim--creds{font-size:18px}
}

/* ============================================================
   26 OCT — HIERARCHY, SECTION DEMARCATION, COLOR, EQUAL COLUMNS.
   Ash: "headlines should have hierarchy and be bigger, little
   title pills should be smaller", "it should be very easy to be
   like, this is a section", "not using color well at all, too
   many white sections", "these columns are so disjointed".
   ============================================================ */

/* ---- 1. Headlines carry the page. ---- */
:root{
  --t-head:clamp(40px,5.6vw,64px);
  --t-sub2:clamp(25px,2.9vw,36px);
}
.h,.final h2,.drop h2,#hire h2,.faqwrap__head .h,.vidsec__in h2,.mani h2{
  font-size:var(--t-head);font-weight:800;letter-spacing:-.042em;line-height:1.0;
  max-width:19ch;
}
.final h2{max-width:15ch}

/* A real third level, between the section headline and body. */
.subhead{
  font-size:var(--t-sub2);font-weight:750;letter-spacing:-.032em;line-height:1.1;
  margin:0 0 var(--s3);max-width:22ch;color:var(--ink);
}

/* ---- 2. Pills read as pills: small, set in a chip, never
   competing with the headline. ---- */
.sec > .wrap > .lab:first-child,
.sec > .wrap > .eyebrow:first-child,
.final > .wrap > .eyebrow:first-child,
.drop > .wrap > .eyebrow:first-child{
  font-size:12px;letter-spacing:.15em;font-weight:600;
}
.lab,.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600}

/* ---- 3. A section announces itself: a 6px colored bar, then a
   big number, then the pill, then the headline. ---- */
.sec > .wrap::before,.final > .wrap::before,.drop > .wrap::before{
  height:6px;background:var(--ink);
}
.sec > .wrap:not(:first-of-type)::before{content:none}
.sec > .wrap:not(:first-of-type){padding-top:0}
#products > .wrap::before{background:var(--accent)}
#more > .wrap::before{background:var(--gold)}
#software > .wrap::before{background:var(--red)}
.final > .wrap::before{background:var(--accent)}

body.numbered .sec > .wrap > .eyebrow:first-child::before,
body.numbered .sec > .wrap > .lab:first-child::before,
body.numbered .sec > .wrap > * > .eyebrow:first-child::before,
body.numbered .sec > .wrap > * > .lab:first-child::before,
body.numbered .final > .wrap > .eyebrow:first-child::before,
body.numbered .final > .wrap > * > .eyebrow:first-child::before,
body.numbered .drop > .wrap > .eyebrow:first-child::before,
body.numbered .drop > .wrap > * > .eyebrow:first-child::before{
  font-family:var(--sans);font-size:clamp(30px,3.6vw,46px);font-weight:800;
  letter-spacing:-.04em;line-height:.9;color:var(--ink);opacity:.22;
}
#products > .wrap > .eyebrow:first-child::before{color:var(--accent);opacity:.3}
#more > .wrap > .eyebrow:first-child::before{color:var(--gold);opacity:.35}
#software .eyebrow:first-child::before{color:var(--red);opacity:.3}

/* ---- 4. Grounds alternate so no two neighbours are the same.
   Light only, dark text, per the house rule. ---- */
#products{background:var(--cream-2)}
#newsletter{background:var(--cream)}
#more{background:var(--paper)}
#software{background:var(--cream-2)}
#faq{background:var(--cream)}
.final{background:var(--cream-2)}

/* ---- 5. Equal columns. The free card no longer sits a notch
   lower than the paid one, and both run to the same baseline. ---- */
@media (min-width:860px){
  .plans{align-items:stretch}
  .plan--free{margin-top:0}
  .plan{display:flex;flex-direction:column}
  .plan .plan__more{margin-top:auto}
}

/* ---- 6. The pair line under the two books. ---- */
.pairline{
  margin:var(--s3) 0 var(--s4);padding:18px 20px;border:2px solid var(--ink);
  border-radius:var(--r-img);background:var(--paper);text-align:center;
  font-size:var(--t-body);
}
.pairline a{color:var(--ink);text-decoration:none}
.pairline a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- 7. Section sub-blocks get air instead of a hairline. ---- */
.sec > .wrap + .wrap{padding-top:var(--s5)}
.sec > .pcimg + .wrap{padding-top:var(--s4)}

/* ---- 8. The Black Friday tease gets a visual like every other
   section. ---- */
.tease__fig{display:block;margin:var(--s3) 0 0;aspect-ratio:21/9}
.tease__fig .slot{height:100%}

/* ---- 9. Fixes measured at 1440 after the 26 Oct pass. ---- */

/* `.grid--3 > .card:last-child{grid-column:auto}` (0,3,0) was beating
   `.grid--3 > .card--hero{grid-column:span 2}` (0,2,0), so a hero card that
   was also the only child rendered at half width with 538px of empty tint
   beside it. */
@media (min-width:860px){
  .grid--3 > .card--hero,
  .grid--3 > .card--hero:last-child{grid-column:1 / -1}
  .grid--3 > .card--hero .card__fig,
  .grid--3 > .card--hero:last-child .card__fig{aspect-ratio:21/9}
  /* Two cards in a row must have the same figure, or their labels, headlines
     and CTAs all start at different heights. Only the full-width card gets
     the wide crop. */
  .grid--3 > .card:not(.card--hero) .card__fig,
  .grid--3 > .card:not(.card--hero):last-child .card__fig{aspect-ratio:16/10}
}

/* The section number marks a SECTION. A sub-block inside one is not a new
   section, so the later wraps lose the counter and keep the pill. */
body.numbered .sec > .wrap:not(:first-of-type) > .eyebrow:first-child::before,
body.numbered .sec > .wrap:not(:first-of-type) > .lab:first-child::before,
body.numbered .sec > .wrap:not(:first-of-type) > * > .eyebrow:first-child::before,
body.numbered .sec > .wrap:not(:first-of-type) > * > .lab:first-child::before{
  content:none;
}

/* Air above a pill that follows a card grid. */
.grid + .lab,.grid + .eyebrow{margin-top:var(--s5)}

/* ---- 10. Second measured pass, 26 Oct. ---- */

/* The Black Friday placeholder was an unpositioned box, so its slot
   absolutely positioned itself over the paragraphs. */
.tease__fig{
  position:relative;display:block;margin:var(--s3) 0 0;aspect-ratio:16/9;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-img);
}
@media (min-width:860px){ .tease__fig{grid-column:2;aspect-ratio:21/9} }

/* Equal columns. `.plan--free{align-self:start}` was beating the container's
   stretch, so the free card stopped 820px short of the paid one. Both now run
   to the same baseline and the free form sits on it. */
@media (min-width:860px){
  .plans{grid-template-columns:1fr 1.28fr;align-items:stretch}
  .plan,.plan--free,.plan--paid{align-self:stretch}
  .plan--free{margin-top:0}
  .plan .plan__more{margin-top:0}
  .plan--free .signup{margin-top:auto}
}

/* Air between the rate card and the two doors under it. */
.pop__lead{margin-bottom:var(--s4)}

/* Fewer white sections: the proof strip joins the cream system. */
.proof{background:var(--cream)}

/* The closing CTA gets a face, like every other section gets a visual. */
.finalimg{position:relative;aspect-ratio:21/9;overflow:hidden;margin:0 0 var(--s5)}
.finalimg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
@media (max-width:599px){ .finalimg{aspect-ratio:3/2} }

.faqfig{
  position:relative;display:block;margin:var(--s3) 0 0;aspect-ratio:4/3;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-img);
}

/* The free card ran 480px shorter than the paid one. Rather than a hole,
   the slack goes to a product shot of the thing being given away. */
.planfig{
  position:relative;display:block;margin:var(--s3) 0;aspect-ratio:4/3;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-img);
}
@media (min-width:860px){
  .plan--free .planfig{margin-top:auto;margin-bottom:var(--s3);aspect-ratio:auto;min-height:240px}
  .plan--free .signup{margin-top:0}
}

/* margin-top:auto parked the slack above the figure instead of inside it.
   The figure grows to take the leftover height, so the card has no hole. */
@media (min-width:860px){
  .plan--free .planfig{margin-top:var(--s3);flex:1 1 auto;min-height:260px}
}

/* The Black Friday section is a section, so it opens on a section headline
   rather than a 28px h3 in a two-column strip. */
#software .tease__fig{grid-column:auto}
.sec > .wrap > .tease__fig{max-width:900px;margin-top:var(--s4)}

/* Section headlines went to 64px, which left every inner page's h1 smaller
   than the h2s under it. The page title leads again. */
h1.h{font-size:clamp(46px,6.6vw,78px);font-weight:800;letter-spacing:-.045em;line-height:.99}

/* The hire door's own visual. */
.hirefig{
  position:relative;display:block;margin:var(--s4) 0 0;aspect-ratio:16/9;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-img);
}

/* ============================================================
   26 OCT — CASE STUDIES: one row per case.
   Ash: "the photo placeholders should be aligned with the copy,
   you have just word vomited a whole section and threw images
   under it."
   ============================================================ */
.cases__list{display:grid;gap:0}
.caserow{
  display:grid;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line);align-items:start;
}
.caserow:first-child{border-top:2px solid var(--ink)}
.caserow__n{
  font-size:clamp(52px,13vw,76px);font-weight:800;letter-spacing:-.05em;line-height:.92;
  margin:0 0 10px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.caserow__r{
  font-size:clamp(21px,2.1vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.2;
  margin:0 0 14px;color:var(--ink);max-width:24ch;
}
.caserow__s{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);margin:0;max-width:40ch}
.caserow__fig{
  position:relative;display:block;margin:0;aspect-ratio:4/3;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-img);
}
@media (min-width:860px){
  .caserow{grid-template-columns:1fr 1fr;gap:var(--s5);padding:var(--s5) 0}
  .caserow__fig{aspect-ratio:16/11}
  /* Alternating sides, tops still flush, so six rows don't read as a column
     of identical blocks. */
  .caserow:nth-child(even) .caserow__copy{order:2}
  .caserow:nth-child(even) .caserow__fig{order:1}
}
@media (min-width:1100px){
  .caserow{grid-template-columns:1fr 1.1fr}
}

/* Even rows swapped the order but not the track widths, so every second
   receipt rendered narrower than the one above it. */
@media (min-width:1100px){
  .caserow:nth-child(even){grid-template-columns:1.1fr 1fr}
}

/* A CTA halfway down six case studies, not only at the end. */
.midcta{
  display:grid;gap:var(--s3);padding:var(--s4);margin:var(--s4) 0;
  background:var(--cream);border:2px solid var(--ink);border-radius:var(--r-img);
  align-items:center;
}
.midcta__t{
  margin:0;font-size:clamp(21px,2.1vw,26px);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;color:var(--ink);
}
.midcta .btn{justify-self:start}
@media (min-width:860px){
  .midcta{grid-template-columns:1.5fr auto;gap:var(--s4)}
  .midcta .btn{justify-self:end;white-space:nowrap}
}

/* The mid-list CTA label wrapped to two lines under 400px. Labels stay on
   one line. */
.midcta .btn{white-space:nowrap}
@media (max-width:420px){
  .midcta{padding:var(--s3)}
  .midcta .btn{font-size:16px;padding-left:16px;padding-right:16px}
}

/* ============================================================
   26 OCT — THE HIGHLIGHTER. Ash: "use my highlighter green as the
   accent, get rid of this blue, just shades of green going
   forward." Two greens and the neon:
     --accent  #38691A  dark chartreuse, carries text and rules
     --gold    #2D5F2D  deep green, the books shade
     --neon    #C1FF72  filled shapes only, always with ink on top
   ============================================================ */

/* The headline gets a real marker swipe instead of a thin rule. */
.hero h1 em{
  background-image:linear-gradient(var(--neon),var(--neon));
  background-size:100% .42em;
  background-position:0 88%;
  padding:0 .06em .04em;
  margin:0 -.06em;
}

/* The one option I'd pick reads as highlighted, not as a black chip. */
.plan__badge{background:var(--neon);color:var(--ink);border-color:var(--neon)}

/* Section markers in the neon where they are a filled shape. */
#products > .wrap::before{background:var(--neon)}
#products > .wrap > .eyebrow:first-child::before{color:var(--accent);opacity:.5}
.final > .wrap::before{background:var(--neon)}

/* The arrow and the hover underline follow the accent, so they move too. */
.pop__amt,.plan--paid .plan__tag{color:var(--accent)}

/* The swipe sat under the word instead of across it, so it read as a rule
   with a descender through it. A marker covers the lower half of the letters. */
.hero h1 em{background-size:100% .46em;background-position:0 68%}

/* ============================================================
   26 OCT — STOP WASTING THE RIGHT SIDE.
   Ash: "stop wasting right aligned padding, everything is so
   annoyingly aligned to the left, headlines especially doesn't
   make sense."
   Headlines ran at a 19ch cap inside an 1100px measure, so every
   section was a narrow left column with 400px of dead tint beside
   it. Headlines now take the measure, and the supporting lines
   move up beside them instead of stacking underneath.
   ============================================================ */
.h,.final h2,.drop h2,#hire h2,.faqwrap__head .h,.vidsec__in h2,.mani h2{max-width:none}
.subhead{max-width:none}
.final h2{max-width:none}
@media (min-width:900px){ h1.h{max-width:none} }

@media (min-width:1000px){
  /* The headline takes the whole measure. The one-line ledes under it spread
     into columns across that same measure instead of stacking in a narrow
     left-hand stripe. */
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)){
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    column-gap:var(--s4);row-gap:0;
    align-items:start;
  }
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .eyebrow:first-child,
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .lab:first-child,
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .h{grid-column:1 / -1}
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .h{margin-bottom:var(--s4)}
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .lede{grid-column:auto;max-width:none;margin:0}
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > *:not(.eyebrow):not(.lab):not(.h):not(.lede):not(.prodfig):not(.prodcta):not(.pairline){
    grid-column:1 / -1;margin-top:var(--s5);
  }
}

/* Small print and bridge links were capped at ~54ch, so on a 1100px measure
   they broke into a narrow left-hand stripe with dead space beside them. */
@media (min-width:1000px){
  .cases__note,.cases__bridge,.sample__n,.aside,.disclaim,.press__note{max-width:86ch}
  .caserow__s{max-width:none}
  .subhead{max-width:none}
}

/* ============================================================
   26 OCT — THE PHONE HERO SITS ON THE SHELF.
   Ash: "this looks messy, should be flush with my legs."
   The cutout ends in a flat line across the trousers, and the
   shelf started 20px below it, so the crop read as a cut. The
   shelf now rides up over the bottom of the figure, and what is
   left of that edge either side of the shelf dissolves into the
   cream it sits on.
   ============================================================ */
@media (max-width:899px){
  .hero__face{position:relative}
  .hero__face::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
    background:linear-gradient(to bottom,
      rgba(247,244,238,0) 0%,
      rgba(247,244,238,.72) 58%,
      var(--cream) 88%);
    pointer-events:none;
  }
  .hero__body{position:relative;z-index:2;margin-top:-70px}
}

/* `.hero__plinth .creds > div + div{padding-left:24px}` was written for the
   three-across layout and had no width guard, so once the stats stacked it
   indented rows two and three 24px past row one. Numbers and captions share
   one left edge again. */
@media (max-width:639px){
  .hero__plinth .creds > div,
  .hero__plinth .creds > div + div{padding-left:0;padding-right:0}
  .hero__plinth .creds > div{grid-template-columns:118px minmax(0,1fr);gap:14px}
}

/* The dissolve only has to kill the strip of flat edge either side of the
   shelf, so it starts lower and her legs stay solid longer. */
@media (max-width:899px){
  .hero__face::after{
    height:96px;
    background:linear-gradient(to bottom,
      rgba(247,244,238,0) 0%,
      rgba(247,244,238,.45) 50%,
      rgba(247,244,238,.92) 84%,
      var(--cream) 100%);
  }
}

/* The press row's logo slots were empty dashed boxes sitting above the names,
   which reads as a broken image, not as press. The names carry it until there
   are real logos to drop in. */
.press__slot{display:none}
.press__item{display:inline;min-width:0;color:var(--ink)}
.press__sep{display:inline-block;width:1px;height:20px;background:var(--line);margin:0 2px}
.press__lab--two{display:inline}
@media (max-width:539px){
  .press__lab--two{flex:0 0 auto;margin:0}
  .press__sep{display:none}
}

/* The press row as a flex list put Cosmopolitan on top of Variety at 390 and
   broke "HBO Max, Swiping America" across three lines. One label, one line of
   names that wraps as a sentence, and the show on its own line. */
.press{display:block;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.press__lab{display:block;margin:0 0 10px}
.press__names{
  margin:0;font-size:clamp(20px,5.2vw,26px);font-weight:700;color:var(--ink);
  letter-spacing:-.025em;line-height:1.3;
}
.press__note{margin:12px 0 0;font-size:var(--t-body);color:var(--ink-2);line-height:1.45}

/* The trust line gets the same marker as the headline. Ink on the neon is
   16:1, which is the only way that color is allowed to carry text. */
.hero .eyebrow--trust{
  display:inline-block;
  color:var(--ink);
  background-image:linear-gradient(var(--neon),var(--neon));
  background-repeat:no-repeat;
  background-size:100% 1.05em;
  background-position:0 52%;
  padding:2px .4em 3px;
  margin-left:-.4em;
}

/* ============================================================
   26 OCT — THE LABELS ARE READABLE AGAIN.
   Ash: "these little titles suck, you can't even see them, too
   small." They went to 12px to stop them competing with the
   headline. The headline wins on size now, so the label can get
   its weight back and the section marker gets the highlighter.
   ============================================================ */
.lab,.eyebrow,.press__lab,.modes__k,.dual__h,.sound__k,.reach__k,.navpanel__lab,
.sec > .wrap > .lab:first-child,
.sec > .wrap > .eyebrow:first-child,
.final > .wrap > .eyebrow:first-child,
.drop > .wrap > .eyebrow:first-child{
  font-size:14px;letter-spacing:.11em;font-weight:600;
}

/* The marker that opens a section is highlighted, so you cannot scroll past
   it. Ink on the neon is 16:1. Sub-block labels inside a section stay as
   colored text, which keeps the two levels apart. */
.sec > .wrap:first-of-type > .eyebrow:first-child,
.final > .wrap > .eyebrow:first-child{
  color:var(--ink);
}
.sec > .wrap:first-of-type > .eyebrow:first-child > .hl,
.final > .wrap > .eyebrow:first-child > .hl{display:inline}

/* The proof strip lost its two-column lead-in, so the quote runs on the
   measure like everything else. */
.proof__q{max-width:none}
.press{margin-top:var(--s4)}

/* The section number was set at 22 to 35 percent opacity, so the one marker
   that tells you a new section started was the faintest thing on the page.
   Full strength, and the label beside it in ink rather than gray. */
body.numbered .sec > .wrap > .eyebrow:first-child::before,
body.numbered .sec > .wrap > .lab:first-child::before,
body.numbered .sec > .wrap > * > .eyebrow:first-child::before,
body.numbered .sec > .wrap > * > .lab:first-child::before,
body.numbered .final > .wrap > .eyebrow:first-child::before,
body.numbered .final > .wrap > * > .eyebrow:first-child::before,
body.numbered .drop > .wrap > .eyebrow:first-child::before,
body.numbered .drop > .wrap > * > .eyebrow:first-child::before{
  opacity:1;color:var(--ink);
}
#products > .wrap > .eyebrow:first-child::before{color:var(--accent);opacity:1}
#more > .wrap > .eyebrow:first-child::before{color:var(--gold);opacity:1}
#software .eyebrow:first-child::before{color:var(--red);opacity:1}

.sec > .wrap > .eyebrow:first-child,
.sec > .wrap > .lab:first-child,
.final > .wrap > .eyebrow:first-child,
.drop > .wrap > .eyebrow:first-child{color:var(--ink)}
.sec > .wrap > .eyebrow--accent:first-child{color:var(--accent)}
.sec > .wrap > .eyebrow--red:first-child{color:var(--red)}

/* ============================================================
   26 OCT — THE MARKER AS AN EMPHASIS TOOL.
   One highlighted phrase per section, on the line that carries
   the money. Ink on the neon, so it reads at 16:1, and
   box-decoration-break keeps the swipe intact when it wraps.
   ============================================================ */
.hl{
  background-image:linear-gradient(var(--neon),var(--neon));
  background-repeat:no-repeat;
  background-size:100% .78em;
  background-position:0 76%;
  color:var(--ink);font-weight:700;
  padding:0 .14em;margin:0 -.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* The real screenshots are 800x550, so the figure holds that ratio at every
   width and nothing crops. */
.caserow__fig{aspect-ratio:800/550;overflow:hidden}
.caserow__fig img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-img)}
@media (min-width:860px){ .caserow__fig{aspect-ratio:800/550} }

/* The accounts gallery. */
.gal2{display:grid;gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.gal2__i{margin:0}
.gal2__i img{
  width:100%;height:auto;display:block;border-radius:var(--r-img);
  border:1px solid var(--line);
}
.gal2__i figcaption{margin:12px 0 0}
.gal2__i figcaption b{
  display:block;font-size:var(--t-body);font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.gal2__i figcaption span{display:block;font-size:16px;color:var(--ink-2);line-height:1.45;margin-top:3px}
@media (min-width:700px){ .gal2{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)} }
@media (min-width:1100px){ .gal2{grid-template-columns:repeat(3,1fr)} }

/* The real logo bar replaces the text list. It is a single transparent strip,
   so it scales on its own and never wraps. */
.press__logos{
  display:block;width:100%;max-width:620px;height:auto;
  mix-blend-mode:multiply;
}
@media (min-width:900px){ .press__logos{max-width:760px} }

/* The case studies banner. It is a collage on white, so it sits contained at
   its own ratio rather than cropped into a letterbox. */
.vbanner{margin:var(--s4) 0 0;padding:0}
.vbanner__v{
  display:block;width:100%;height:auto;max-width:760px;margin:0 auto;
  border-radius:var(--r-img);border:1px solid var(--line);background:var(--paper);
}
@media (min-width:1000px){ .vbanner__v{max-width:860px} }
@media (prefers-reduced-motion:reduce){ .vbanner__v{animation:none} }

/* ============================================================
   26 OCT — THE SHELF IS THE WIDTH OF THE PHONE.
   Ash: "the container should hang over the tan container, rid of
   that stupid black line, it should be the width of the screen so
   it's flush with my body and feels a part of me."
   The card was inset by the page gutter, so the flat bottom edge
   of the cutout showed either side of it as a hairline. Full
   bleed covers that edge completely, and the card now overhangs
   the plinth instead of stopping above it.
   ============================================================ */
@media (max-width:899px){
  .hero__body{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    margin-top:-84px;position:relative;z-index:3;
  }
  .hero__body .signup{
    border-left:0;border-right:0;
    border-radius:24px 24px 20px 20px;
    padding-left:var(--pad);padding-right:var(--pad);
    box-shadow:0 -14px 34px -26px rgba(17,17,16,.45),
               0 22px 44px -28px rgba(17,17,16,.4);
  }
  /* The tan plinth slides up under the card, so the card hangs over it. */
  .hero__plinth{margin-top:-22px;padding-top:calc(var(--s3) + 22px);position:relative;z-index:1}
  /* Nothing left for a seam to show through. */
  .hero__face img{margin-bottom:0}
}

/* ============================================================
   27 OCT — ONE SECTION PER PRODUCT, AND A FACE ON THE QUOTE.
   ============================================================ */
.prodfig{
  position:relative;display:block;margin:var(--s4) 0 var(--s3);
  aspect-ratio:16/10;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-img);overflow:hidden;
}
.sec--paper .prodfig{background:var(--cream)}
.prodfig img{width:100%;height:100%;object-fit:cover;display:block}
.prodcta{margin-top:var(--s2)}
@media (min-width:1000px){
  /* Headline across the top, then copy left and the image right, so the
     section reads like the hero: big line, picture, one button. */
  .sec > .wrap:first-of-type:has(> .prodfig){
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:"eye eye" "head head" "l1 fig" "l2 fig" "l3 fig" "cta fig" "pair pair";
    column-gap:var(--s5);align-items:start;
  }
  .sec > .wrap:first-of-type:has(> .prodfig) > .eyebrow{grid-area:eye}
  .sec > .wrap:first-of-type:has(> .prodfig) > .h{grid-area:head}
  .sec > .wrap:first-of-type:has(> .prodfig) > .lede{max-width:none;margin:0 0 var(--s2)}
  .sec > .wrap:first-of-type:has(> .prodfig) > .lede:nth-of-type(2){grid-area:l1}
  .sec > .wrap:first-of-type:has(> .prodfig) > .lede:nth-of-type(3){grid-area:l2}
  .sec > .wrap:first-of-type:has(> .prodfig) > .lede:nth-of-type(4){grid-area:l3}
  .sec > .wrap:first-of-type:has(> .prodfig) > .prodfig{grid-area:fig;margin:0;aspect-ratio:4/3;align-self:start}
  .sec > .wrap:first-of-type:has(> .prodfig) > .prodcta{grid-area:cta;justify-self:start;align-self:start;margin-top:var(--s3)}
  .sec > .wrap:first-of-type:has(> .prodfig) > .pairline{grid-area:pair;margin-top:var(--s4)}
}

/* Profile picture above the proof quote. */
.proof__face{margin:0 0 var(--s2);width:72px;height:72px}
.slot--round{border-radius:50%;padding:0;background:var(--cream-2);border:1px solid var(--line)}
.slot--round .slot__tag{font-size:11px;padding:3px 7px}
.proof__face .slot{position:relative;inset:auto;width:72px;height:72px}
@media (min-width:900px){ .proof__face{width:88px;height:88px} .proof__face .slot{width:88px;height:88px} }

/* Section colors for the three product sections. */
#field-guide > .wrap::before,#comments > .wrap::before{background:var(--gold)}
#field-guide > .wrap > .eyebrow:first-child::before,
#comments > .wrap > .eyebrow:first-child::before{color:var(--gold)}
#field-guide > .wrap > .eyebrow:first-child,#comments > .wrap > .eyebrow:first-child{color:var(--gold)}
#app > .wrap::before{background:var(--red)}
#app > .wrap > .eyebrow:first-child::before{color:var(--red)}
#app > .wrap > .eyebrow--red:first-child{color:var(--red)}
#comments{background:var(--cream-2)}
#app{background:var(--paper)}
#field-guide{background:var(--cream)}

/* One sentence per line inside the paid card and the launch note. */
.plan .btn-note + .btn-note,.plan .plan__alt + .plan__alt,.plan .plan__sell + .plan__sell,
.plan .plan__anchor + .plan__anchor{margin-top:6px}
.launchnote p{margin:0 0 8px}
.launchnote p:last-child{margin-bottom:0}
.plan__more li b:not(:first-child){color:var(--ink)}

/* Books page: one sentence per line. */
.book__desc{margin:0 0 12px}
.book__desc + .book__desc{margin-top:0}
.book .lab + .book__title{margin-top:8px}
.book__title{font-size:var(--t-head);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.bundle__wait + .bundle__wait,.bundle__sell + .bundle__sell{margin-top:6px}
.bookmeta .v b{color:var(--ink)}

/* ============================================================
   30 OCT — EVERY SECTION LABEL IS A LIME PILL, LIKE THE HERO'S.
   Ash: "WHY ME needs to be in lime green pills like the other
   ones and larger like the other ones." The text sits in its own
   span now, so the pill wraps the words and the section number
   stays plain beside it.
   ============================================================ */
.eyebrow .eyebrow__t{
  display:inline-block;
  background-image:linear-gradient(var(--neon),var(--neon));
  background-repeat:no-repeat;background-size:100% 1.05em;background-position:0 52%;
  padding:2px .4em 3px;margin-left:-.4em;
  color:var(--ink);font-size:16px;letter-spacing:.055em;font-weight:600;
}
@media (min-width:600px){ .eyebrow .eyebrow__t{font-size:17px} }
/* The hero trust line already carries the swipe on the element itself. */
.hero .eyebrow--trust{background:none;padding:0;margin-left:0}
.hero .eyebrow--trust .eyebrow__t{margin-left:0}
/* Colored eyebrows keep ink on the neon; the number beside them keeps its color. */
.sec > .wrap > .eyebrow--accent:first-child .eyebrow__t,
.sec > .wrap > .eyebrow--red:first-child .eyebrow__t,
.sec > .wrap > .eyebrow--gold:first-child .eyebrow__t,
#field-guide > .wrap > .eyebrow:first-child .eyebrow__t,
#comments > .wrap > .eyebrow:first-child .eyebrow__t{color:var(--ink)}
/* Breadcrumb-style labels inside cards stay small and plain. */
.card .eyebrow .eyebrow__t,.tease .eyebrow .eyebrow__t,.plan .eyebrow .eyebrow__t{
  background:none;padding:0;margin:0;font-size:inherit;color:inherit;
}

/* No small light labels anywhere. Sub-block labels, spec keys and the two
   PopCall door headers take the same lime pill as the section labels. */
.lab:not(.card .lab):not(.bookglance .lab):not(.plan .lab),
.bookmeta .k,.bookmeta dt,.modes__k,.dual__h,.sound__k,.reach__k,.screencard__t > span:first-child{
  display:inline-block;
  background-image:linear-gradient(var(--neon),var(--neon));
  background-repeat:no-repeat;background-size:100% 1.05em;background-position:0 52%;
  padding:2px .4em 3px;margin-left:-.4em;
  color:var(--ink);font-size:15px;letter-spacing:.05em;font-weight:600;
}
@media (min-width:600px){
  .lab:not(.card .lab):not(.bookglance .lab):not(.plan .lab),
  .bookmeta .k,.bookmeta dt,.modes__k,.dual__h,.sound__k,.reach__k{font-size:16px}
}
/* Pills keep their accent as the number or rule beside them, never as light text. */
.lab--accent,.lab--gold,.lab--red,.modes__k,.dual__h--go{color:var(--ink)}
.dual__h{display:block;width:100%;padding-left:.4em;margin-left:0;background-size:auto 1.05em}
.dual__h{background-size:0 0;border-bottom:2px solid var(--ink)}
.dual__h > span,.dual__h{font-size:16px}
.bookmeta .k{margin-bottom:6px}
/* The counter ::before is a flex item before the label; a pill with a negative
   margin would tuck under the number, so inside numbered section heads the
   span handles the pill and the element itself stays plain. */
.sec > .wrap > .lab:first-child{background:none;padding:0;margin-left:0}
.sec > .wrap > .lab:first-child .eyebrow__t{display:inline-block}
/* With the span in place, `.lab` itself goes plain and the span is the pill. */
p.lab{background:none;padding:0;margin-left:0}
p.lab .eyebrow__t{display:inline-block}
.card p.lab .eyebrow__t,.bookglance .lab .eyebrow__t,.plan p.lab .eyebrow__t{background:none;padding:0;margin:0;font-size:inherit;color:inherit}

/* ============================================================
   30 OCT — THE PUNCH LIST.
   ============================================================ */
/* Titles and mini titles: bolder, larger. */
.eyebrow .eyebrow__t,p.lab .eyebrow__t,
.bookmeta .k,.bookmeta dt,.modes__k,.dual__h,.sound__k,.reach__k{font-weight:700;font-size:16px;letter-spacing:.06em}
@media (min-width:600px){
  .eyebrow .eyebrow__t,p.lab .eyebrow__t,.bookmeta .k,.bookmeta dt,.modes__k,.sound__k,.reach__k{font-size:18px}
}
.subhead{font-weight:800}
/* The PopCall door headers, larger and heavier. */
.dual__h{font-size:20px;font-weight:800;letter-spacing:.04em;padding-bottom:12px}
@media (min-width:600px){ .dual__h{font-size:22px} }
/* Testimonial names and titles: darker, heavier. */
.tabs__by,.strip__q footer,.proof__by,.vid__t,.vid__by{color:var(--ink)}
.tabs__by b,.strip__q footer b{font-weight:800;font-size:19px;letter-spacing:-.02em;display:block}
.tabs__by span,.strip__q footer span{display:block;font-weight:600;color:var(--ink-2);font-size:16px;margin-top:2px}
.proof__by{font-weight:700;font-size:16px;letter-spacing:.04em}
.vid__by{font-weight:600;color:var(--ink-2)}
/* Avatars beside quotes. */
.qface{width:64px;height:64px;margin:0 0 14px}
.qface .slot{position:relative;inset:auto;width:64px;height:64px;padding:0}
.strip__q .qface{margin-bottom:12px}
/* Containers inside product sections sit on the page white, not a tint. */
.wait,.sec--tint .wait,#both .wait,.bundle,.screencard,.bookmeta{background:var(--paper)}
/* PopCall notes, one per line. */
.pop .btn-note + .btn-note{margin-top:4px}
/* Caption under the Kim Cattrall band. */
.pcimg{position:relative}
.pcimg__cap{
  margin:0;padding:12px var(--pad);font-size:var(--t-body);color:var(--ink-2);line-height:1.45;
  background:var(--cream);
}
.pcimg__cap b{color:var(--ink)}
@media (min-width:900px){ .pcimg__cap{padding:14px calc(50% - var(--maxw)/2 + var(--pad))} }
/* The Black Friday preview is a phone screen recording. */
.tease__fig--phone{aspect-ratio:9/19.5;max-width:320px;margin-left:auto;margin-right:auto}
@media (min-width:860px){ .tease__fig--phone{grid-column:auto;aspect-ratio:9/19.5;max-width:340px;margin:var(--s4) 0 0} }
.sec > .wrap > .tease__fig--phone{max-width:340px}
/* Product sections carry a trust row under the button, like a product page. */
.prodtrust{margin:var(--s2) 0 0;font-size:16px;color:var(--ink-2);line-height:1.5}
.prodtrust b{color:var(--ink)}
/* Intake form. */
.intake{max-width:720px}
.intake__row{display:grid;gap:var(--s2)}
@media (min-width:600px){ .intake__row{grid-template-columns:1fr 1fr} }
.field{margin:0 0 var(--s3)}
.field label,.field legend{display:block;font-weight:700;font-size:16px;margin:0 0 8px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:18px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--field-line);border-radius:14px;padding:14px 16px;min-height:56px;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--neon);outline-offset:1px;border-color:var(--ink)}
.intake__when{border:0;padding:0}
.intake__when .pick{display:inline-flex;align-items:center;gap:10px;margin:0 10px 10px 0;padding:12px 16px;
  border:1.5px solid var(--field-line);border-radius:999px;background:var(--paper);cursor:pointer;font-size:17px;font-weight:600}
.intake__when .pick input{margin:0;accent-color:var(--accent)}
.intake__when .pick:has(input:checked){background:var(--neon);border-color:var(--ink)}
.intake__msg[data-state=ok]{display:block;margin-top:var(--s3);padding:var(--s3);background:var(--paper);border:2px solid var(--ink);border-radius:14px;font-size:var(--t-body);line-height:1.5}
.foot__legal{margin-top:10px;font-size:15px;color:var(--ink-3)}
.shot img{width:100%;height:auto;display:block;border-radius:var(--r-img);border:1px solid var(--line)}
.shot figcaption{margin:10px 0 0;font-size:16px;color:var(--ink-2);line-height:1.4}
.shot figcaption b{color:var(--ink);display:block;font-size:17px}
.shot{aspect-ratio:auto;background:none;border:0}
/* A pill never stretches to its row. */
.eyebrow__t{flex:0 0 auto;align-self:flex-start;width:auto}
.sample__t{font-size:var(--t-sub2);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 var(--s3)}
/* The pill lives on the span. The <p> itself carries nothing, at any specificity. */
p.lab:not(.card .lab):not(.bookglance .lab):not(.plan .lab),
.sec > .wrap > * > p.lab:first-child,.sample p.lab,.bundle p.lab,.wait p.lab{
  background:none;background-image:none;padding:0;margin-left:0;display:block;
}
body.numbered .sec > .wrap > * > .lab:first-child{display:flex}
/* Sub-block label pills, on the span. */
p.lab .eyebrow__t,
.sec > .wrap > * > p.lab:first-child .eyebrow__t{
  display:inline-block;flex:0 0 auto;
  background-image:linear-gradient(var(--neon),var(--neon));
  background-repeat:no-repeat;background-size:100% 1.05em;background-position:0 52%;
  padding:2px .4em 3px;margin-left:-.4em;
  color:var(--ink);font-size:16px;letter-spacing:.06em;font-weight:700;
}
@media (min-width:600px){ p.lab .eyebrow__t{font-size:18px} }
.card p.lab .eyebrow__t,.bookglance .lab .eyebrow__t,.plan p.lab .eyebrow__t{background-image:none;padding:0;margin:0;font-size:inherit;color:inherit;font-weight:inherit}
/* Long labels wrap inside the pill instead of running off the phone. */
.eyebrow .eyebrow__t,p.lab .eyebrow__t,.bookmeta .k,.bookmeta dt,.modes__k,.sound__k,.reach__k{
  display:inline;max-width:100%;white-space:normal;overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.75;
}
.eyebrow,p.lab{min-width:0;max-width:100%}
.hero .eyebrow--trust{display:inline-block;max-width:100%}
/* No negative margin on the pill: inside a flex head it was stretching past
   the right edge by the amount it was pulled left. */
.eyebrow .eyebrow__t,p.lab .eyebrow__t,.hero .eyebrow--trust,
.bookmeta .k,.bookmeta dt,.modes__k,.sound__k,.reach__k{margin-left:0;min-width:0}
body.numbered .sec > .wrap > .eyebrow:first-child > .eyebrow__t,
body.numbered .sec > .wrap > * > .eyebrow:first-child > .eyebrow__t,
body.numbered .final > .wrap > .eyebrow:first-child > .eyebrow__t,
body.numbered .drop > .wrap > .eyebrow:first-child > .eyebrow__t{flex:0 1 auto;max-width:100%}
/* Air between the section number and the pill when the head is a .lab. */
body.numbered .sec > .wrap > .lab:first-child::before,
body.numbered .sec > .wrap > * > .lab:first-child::before{margin-right:16px}
body.numbered .sec > .wrap > p.lab:first-child{display:flex;align-items:baseline;gap:16px}

/* ============================================================
   30 OCT — ONE SENTENCE PER LINE, EVERYWHERE, WITH AIR.
   ============================================================ */
.lede + .lede{margin-top:0}
.lede{margin:0 0 14px}
.book__desc,.btn-note,.aside,.plan__sell,.plan__anchor,.plan__alt,.cases__note,.bundle__sell,.bundle__wait,
.wait__n,.prodtrust,.sample__n,.faq__a p,.launchnote p,.small,.tease p,.mani__body p,.reach p{margin:0 0 10px}
.btn-note + .btn-note,.book__desc + .book__desc,.plan__sell + .plan__sell,.plan__anchor + .plan__anchor,
.plan__alt + .plan__alt,.aside + .aside,.faq__a p + p{margin-top:0}
.aside{padding-top:4px;padding-bottom:4px}
/* The two fold toggles read like every other label: bold and ink, not thin mono. */
.plan__more summary{font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink)}

/* The Field Guide table of contents. */
.toc{margin:var(--s4) 0;padding:var(--s3);background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-img)}
.toc__part{margin-top:var(--s3)}
.toc__k{margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.toc__k .hl{font-weight:800;margin-right:4px}
.toc__l{margin:0;padding:0 0 0 2.2em;font-size:var(--t-body);line-height:1.45;color:var(--ink)}
.toc__l li{padding:7px 0;border-bottom:1px solid var(--line)}
.toc__l li:last-child{border-bottom:0}
.toc__l li::marker{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.toc__l--plain{list-style:none;padding-left:0}
.toc__l--plain li{padding-left:0;color:var(--ink-2)}
@media (min-width:900px){
  .toc{padding:var(--s4)}
  .toc__l{columns:2;column-gap:var(--s4)}
  .toc__l li{break-inside:avoid}
}
.bookmeta .k,.bookmeta dt{display:inline-block;width:auto;justify-self:start;align-self:start}

/* Fifteen post-idea graphics, then the button for fifty more. */
.ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--s3) 0}
.ideas__i{position:relative;margin:0;aspect-ratio:4/5;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden}
.ideas__i img{width:100%;height:100%;object-fit:cover;display:block}
.ideas__i .slot{padding:10px}
.ideas__i .slot__desc{font-size:13px}
@media (min-width:600px){ .ideas{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (min-width:1000px){ .ideas{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px} }
.ideas__cta{width:100%;justify-content:center}
@media (min-width:600px){ .ideas__cta{width:auto} }
/* The sample card is one column now; no side image. */
@media (min-width:1100px){ .sample{display:block} }
.sample{max-width:none}
.ideas__cta{white-space:nowrap}
@media (max-width:420px){ .ideas__cta{font-size:16px} }

/* With one sentence per line, the head's ledes read top to bottom in one
   run, not scattered across three columns. */
@media (min-width:1000px){
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .lede{grid-column:1 / -1;max-width:68ch;margin:0 0 12px}
  .sec > .wrap:first-of-type:has(> .lede):not(:has(> .ph)) > .h{margin-bottom:var(--s3)}
  .sec > .wrap:first-of-type:has(> .prodfig) > .lede{grid-column:1;max-width:none}
}

/* Pills wrap cleanly: a solid background that clones per line, on a true
   inline span. The section number becomes an inline-block beside it instead
   of a flex sibling, so the span is never blockified. */
.eyebrow .eyebrow__t,p.lab .eyebrow__t,.hero .eyebrow--trust,
.bookmeta .k,.bookmeta dt,.modes__k,.sound__k,.reach__k{
  background-image:none;background-color:var(--neon);
  padding:3px .45em 4px;line-height:1.9;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero .eyebrow--trust{display:inline;line-height:2}
body.numbered .sec > .wrap > .eyebrow:first-child,
body.numbered .sec > .wrap > .lab:first-child,
body.numbered .sec > .wrap > * > .eyebrow:first-child,
body.numbered .sec > .wrap > * > .lab:first-child,
body.numbered .sec > .wrap > p.lab:first-child,
body.numbered .final > .wrap > .eyebrow:first-child,
body.numbered .final > .wrap > * > .eyebrow:first-child,
body.numbered .drop > .wrap > .eyebrow:first-child,
body.numbered .drop > .wrap > * > .eyebrow:first-child{display:block;line-height:1.9}
body.numbered .sec > .wrap > .eyebrow:first-child::before,
body.numbered .sec > .wrap > .lab:first-child::before,
body.numbered .sec > .wrap > * > .eyebrow:first-child::before,
body.numbered .sec > .wrap > * > .lab:first-child::before,
body.numbered .final > .wrap > .eyebrow:first-child::before,
body.numbered .final > .wrap > * > .eyebrow:first-child::before,
body.numbered .drop > .wrap > .eyebrow:first-child::before,
body.numbered .drop > .wrap > * > .eyebrow:first-child::before{
  display:inline-block;vertical-align:baseline;margin-right:16px;line-height:1;
}
.bookglance .lab .eyebrow__t,.card p.lab .eyebrow__t,.plan p.lab .eyebrow__t{
  background-color:var(--neon);padding:2px .4em 3px;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.9;
}

/* The paid card, in order: price, what you get, the anchor, one button,
   the guarantee, the fine print folded. */
.plan__list{list-style:none;margin:var(--s2) 0 var(--s3);padding:0}
.plan__list li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line);font-size:var(--t-body);line-height:1.45;color:var(--ink-2)}
.plan__list li:last-child{border-bottom:0}
.plan__list li b{color:var(--ink)}
.plan__list li::before{content:"";position:absolute;left:4px;top:19px;width:7px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(42deg)}
.plan__monthly{display:inline-block;margin:12px 0 var(--s2);font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.plan--paid .plan__more{margin-top:var(--s3)}
.plan--paid .plan__more summary{display:list-item;cursor:pointer}
.plan--paid .plan__name{margin-top:var(--s2)}

/* One idea at a time, swipe through. */
.gal--ideas .gal__slide{flex:0 0 100%;aspect-ratio:4/5;background:var(--cream);border:1px solid var(--line)}
.gal--ideas .gal__slide:nth-child(even){background:var(--cream)}
.gal--ideas .gal__track{gap:16px;padding-right:0;margin-right:0}
.gal--ideas .gal__nav{display:flex}
.gal__hint{margin:10px 0 0;font-size:15px;color:var(--ink-3)}
@media (min-width:640px){ .gal--ideas .gal__slide{flex:0 0 100%} .gal--ideas{max-width:520px;margin-left:auto;margin-right:auto} }
@media (min-width:900px){ .gal--ideas .gal__slide{flex:0 0 100%} .gal__hint{display:none} }

/* Air under every pill before the copy starts. */
.eyebrow,p.lab{margin-bottom:18px}
.sec > .wrap > .eyebrow:first-child,.sec > .wrap > .lab:first-child,
.final > .wrap > .eyebrow:first-child,.drop > .wrap > .eyebrow:first-child{margin-bottom:26px}
.sound__k,.modes__k,.bookmeta .k,.bookmeta dt,.reach__k{margin-bottom:12px}
.sound .sound__k{display:inline-block;margin-bottom:14px}
.sound .sound__v{display:block}
/* Intake timing chips: undo the .field text-input rules on radios. */
.field.intake__when .pick{display:inline-flex;align-items:center;gap:10px;margin:0 10px 10px 0;padding:12px 18px;font-size:17px;font-weight:700;line-height:1.2;color:var(--ink)}
.field.intake__when .pick input[type=radio]{width:20px;height:20px;min-height:0;padding:0;margin:0;border-radius:50%;flex:0 0 20px;appearance:auto;-webkit-appearance:radio;background:none;border:0}
.field.intake__when .pick span{white-space:nowrap}
.field.intake__when .pick:focus-within{outline:3px solid var(--neon);outline-offset:1px}
/* Case studies: logo row, full-case drawers. */
.logos{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px}
@media (min-width:600px){ .logos{grid-template-columns:repeat(5,1fr)} }
@media (min-width:980px){ .logos{grid-template-columns:repeat(7,1fr)} }
.logo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0}
.logo .slot{position:relative;inset:auto;width:84px;height:84px;max-width:100%;aspect-ratio:1}
.logo__n{font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
.logos:not(.is-open) .logo:nth-child(n+7){display:none}
@media (min-width:600px){ .logos:not(.is-open) .logo:nth-child(n+11){display:none} }
@media (min-width:980px){ .logos:not(.is-open) .logo:nth-child(n+8){display:flex} .logos:not(.is-open) .logo:nth-child(n+15){display:none} }
.logos__more{margin-top:var(--s3);white-space:nowrap}
.logos.is-open + .logos__more{display:none}
.case__more{margin-top:var(--s3);border-top:1.5px solid var(--line);padding-top:14px}
.case__more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink);padding:10px 0;min-height:44px}
.case__more > summary::-webkit-details-marker{display:none}
.case__more > summary::after{content:"+";display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--neon);color:var(--ink);font-weight:800;font-size:20px;line-height:1}
.case__more[open] > summary::after{content:"\2212"}
.case__more .lede{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);max-width:60ch;margin:0 0 12px}
.case__more .lede b{color:var(--ink)}
.case__k{display:inline-block;margin:22px 0 10px;padding:3px .5em 4px;background:var(--neon);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;line-height:1.6}
.case__k:first-of-type{margin-top:14px}
.case__fig2{margin:18px 0 6px;max-width:560px}
.case__fig2 img{width:100%;height:auto;display:block;border-radius:var(--r-img);border:1px solid var(--line)}
.case__fig2 figcaption{font-size:15px;color:var(--ink-3);margin-top:8px}
/* Book picker: three cards, three shades, pills not mono. */
.bookglance{display:grid;gap:14px;margin-top:var(--s3)}
@media (min-width:760px){ .bookglance{grid-template-columns:repeat(3,1fr)} }
.bookglance__i{display:flex;flex-direction:column;gap:12px;padding:22px 20px 24px;border-radius:18px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);min-height:150px}
.bookglance__i:nth-child(1){background:#EEF5E4}
.bookglance__i:nth-child(2){background:#E2F3C9}
.bookglance__i:nth-child(3),.bookglance__i--go{background:var(--neon);border-color:var(--ink)}
.bookglance__i > b{font-size:22px;line-height:1.2;letter-spacing:-.01em;font-weight:800}
.bookglance__i .lab{display:block;margin:0}
.bookglance__i .lab .eyebrow__t{font-family:inherit;letter-spacing:.02em;text-transform:uppercase;font-size:15px;font-weight:800;background:var(--ink);color:var(--neon);padding:4px .55em 5px}
.bookglance__i:nth-child(3) .lab .eyebrow__t{background:var(--ink);color:var(--neon)}
.bookglance__i::after{content:"\2192";margin-top:auto;font-weight:800;font-size:22px}
.bookglance__i:hover{border-color:var(--ink)}
.intake .btn-note{margin-top:16px}
.plan__unit,.pc__unit{font-family:inherit;font-weight:700;color:var(--ink);letter-spacing:0;text-transform:none;font-size:16px}
.logo .slot__tag{display:none}
.logo .slot{display:grid;place-items:center}
.logo .slot::after{content:attr(data-i);font-weight:800;font-size:20px;color:var(--ink-2)}
.pop__per{font-family:inherit;font-weight:700;color:var(--ink);letter-spacing:0;font-size:16px}
span.lab .eyebrow__t{display:inline-block}
/* Nav panel: group labels as lime pills, sublines readable. */
.navpanel__lab{display:inline-block;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);background:var(--neon);padding:3px .5em 4px;line-height:1.5;margin:0 0 10px}
.navpanel a:not(.btn) .nav__sub,.nav__menu a .nav__sub{font-size:16px;line-height:1.4;color:var(--ink-2);max-width:34ch}
.proof__face .slot .slot__tag{display:none}
.proof__face .slot{display:grid;place-items:center}
.proof__face .slot::after{content:"BA";font-weight:800;font-size:18px;color:var(--ink-2)}
.bookglance .bookglance__i{align-items:flex-start;text-align:left}
.bookglance .bookglance__i .lab .eyebrow__t{font-family:var(--sans,inherit);font-family:inherit;letter-spacing:.02em}
.bookglance .bookglance__i::after{align-self:flex-end}
.qface .slot .slot__tag{display:none}
.qface .slot{display:grid;place-items:center}
.qface .slot::after{content:attr(data-i);font-weight:800;font-size:16px;color:var(--ink-2)}
/* Hero signup card: lime trim. Inputs keep their field line. */
.hero__body .signup{border:2.5px solid var(--neon);border-top-color:var(--neon)}
@media (max-width:979px){ .hero__body .signup{border-left:0;border-right:0} }
/* Free plan card: same card treatment as the paid one. */
.plan--free{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 22px}
.plan__badge--free{background:var(--neon);color:var(--ink)}
.plan__alt{font-family:inherit;font-size:17px;color:var(--ink-2);letter-spacing:0;margin:0 0 18px}
.plan__alt b{color:var(--ink)}
.plan__sell{font-size:var(--t-body);line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.plan__sell b{color:var(--ink)}
.plan .planfig{margin:18px 0}
.plan .planfig .slot{position:relative;inset:auto;aspect-ratio:4/3;width:100%}
/* DM / CALL headers: lime pills, sans, no rule line. */
.dual__h,.dual__h--go{display:inline-block;width:auto;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);background:var(--neon);padding:4px .55em 5px;border-bottom:0;margin:0 0 14px;line-height:1.5}
@media (min-width:600px){ .dual__h,.dual__h--go{font-size:17px} }
.screencard__t{font-family:inherit;letter-spacing:0;text-transform:none}
.screencard__t > span:first-child{font-weight:800;color:var(--ink);background:var(--neon);padding:2px .45em 3px;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.screencard__t > span:last-child{font-weight:700;color:var(--ink-2);font-size:15px}
/* Quote attributions: bold sans name, readable result line. No light mono. */
.strip__q footer,.tabs__by,.proof__by,.vid__by,.wq footer,.quote footer{font-family:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.4}
.strip__q footer b,.wq footer b,.quote footer b{font-weight:800;font-size:17px;color:var(--ink)}
.strip__q footer span,.wq footer span,.quote footer span{display:block;margin-top:3px;font-size:15.5px;font-weight:600;color:var(--ink-2)}
/* Written-testimonial tabs: bold, readable, lime when selected. */
.tabs__btn{font-family:inherit;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-2);padding:10px 12px 12px;border-bottom:2px solid transparent}
.tabs__btn[aria-selected="true"]{color:var(--ink);background:var(--neon);border-bottom-color:var(--ink)}
.bookmeta--about .v p{margin:0 0 10px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.bookmeta--about .v p:last-child{margin-bottom:0}
.bookmeta--about .v p b{color:var(--ink);font-weight:700}
.gal2__i .slot{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
.drop__body{margin:0 0 10px;line-height:1.5}
.drop__body b{color:var(--ink);font-weight:700}
.sound__v p{margin:0 0 8px;line-height:1.5}
.sound__v p:last-child{margin-bottom:0}
.sound__v b{color:var(--ink);font-weight:700}
/* Paid card: cadence line, price ledger, terms list. */
.plan__cadence{margin:4px 0 18px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.plan__cadence b{color:var(--ink)}
.ledger{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 20px;background:var(--paper)}
.ledger__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 16px;font-size:17px;color:var(--ink-2);border-top:1px solid var(--line)}
.ledger__row:first-child{border-top:0}
.ledger__k{font-weight:600}
.ledger__v{font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ledger__v s{color:var(--ink-3);font-weight:600;margin-left:6px}
.ledger__row--pick{background:var(--neon);color:var(--ink)}
.ledger__row--pick .ledger__k{font-weight:800}
.ledger__row--pick .ledger__v{font-size:22px}
.ledger__row--keep .ledger__v{color:var(--accent)}
.plan__terms{list-style:none;margin:6px 0 0;padding:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.plan__terms li{padding:6px 0 6px 18px;position:relative}
.plan__terms li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--neon);border:1.5px solid var(--ink)}
.plan__terms b{color:var(--ink)}
.plan .plan__monthly{display:block;margin:14px 0 10px}
.plan__terms li,.plan__terms li b{display:inline}
.plan__terms li{display:block;border:0;padding:5px 0 5px 18px}
.plan__terms li b{display:inline;margin:0}
/* Footer hierarchy: bold link stacks, quiet copy, a distinct legal bar. */
.foot .foot__stack a{font-weight:700;color:var(--ink);font-size:18px}
.foot .foot__stack a[target]::after{color:var(--ink-2)}
.foot > .wrap > .small{font-size:16px;color:var(--ink-3);margin:6px 0 0;line-height:1.5}
.foot .foot__links{margin:26px 0 0;padding:18px 0 0;border-top:2px solid var(--ink);gap:0 24px}
.foot .foot__links a{font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);padding:10px 0}
.foot .disclaim{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:18px;max-width:62ch}
.foot .foot__links + .disclaim + .small,.foot .foot__links ~ .small{font-size:15px;color:var(--ink-3)}
.subhead--big{font-size:clamp(34px,8vw,56px);line-height:1.02;letter-spacing:-.025em;font-weight:800}
div.aside p{margin:0 0 8px;font-size:17px;line-height:1.55;color:var(--ink-2)}
div.aside p:last-child{margin-bottom:0}
div.aside p b{color:var(--ink);font-weight:700}
.dual .dual__h + ul{margin-top:6px}
.dual .dual__h + ul > li:first-child{padding-top:10px}
.foot > .wrap > .small:first-of-type{margin-top:22px}
/* Inner-page titles: a step above the section h2, not a billboard. */
h1.h{font-size:clamp(43px,5.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
/* Buy cards: the order block lives in one white container, roomy under the button. */
.buycard{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:22px 20px 20px;margin-top:var(--s3)}
.buycard .buy__row{margin:0 0 14px}
.buycard .btn{width:100%;justify-content:center}
.buycard .btn + .btn-note{margin-top:16px;font-size:16px;color:var(--ink-2)}
.buy__terms{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.buy__terms li{display:block;position:relative;padding:6px 0 6px 18px;border:0}
.buy__terms li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--neon);border:1.5px solid var(--ink)}
.buy__terms li b{display:inline;color:var(--ink);margin:0}
.book .buycard .buy__row{margin-top:0;padding-top:0}
h1.h{font-size:clamp(44px,6.1vw,62px)}
/* Screen time report: one clean stat card. */
.screen{margin:22px 0 0;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:22px 20px 18px}
.screen__head{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.screen__t{align-self:flex-start;font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;background:var(--neon);color:var(--ink);padding:4px .55em 5px;line-height:1.5}
.screen__s{font-size:16px;font-weight:600;color:var(--ink-2)}
.screen__rows{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.screen__row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k v" "bar bar";align-items:baseline;column-gap:16px;row-gap:9px;padding:0;border:0}
.screen__k{grid-area:k;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen__v{grid-area:v;font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.screen__v--up{color:var(--accent)}
.screen__v--down{color:var(--ink-2)}
.screen__bar{grid-area:bar;display:block;height:12px;border-radius:999px;background:var(--cream-2);overflow:hidden}
.screen__bar i{display:block;height:100%;border-radius:999px;background:var(--neon);border-right:2px solid var(--ink)}
.screen__row:nth-child(2) .screen__bar i{border-right:0}
/* Any white block that holds copy gets side padding and a radius. No copy against a container edge. */
.bookmeta,.wait,.bundle{border:1.5px solid var(--line);border-radius:18px;padding:8px 20px;overflow:hidden}
.bookmeta > div{padding:16px 0}
.bookmeta > div:last-child{border-bottom:0}
.bookmeta .k{display:inline-block;margin-bottom:8px}
.wait{padding:22px 20px}
.bundle{padding:22px 20px}
/* After the checklist, the timing notes sit on their own tinted panel inside the card. */
.wait{padding-bottom:0;overflow:hidden}
.wait__foot{background:var(--cream-2);margin:18px -20px 0;padding:16px 20px 18px;border-top:1px solid var(--line)}
.wait__foot .wait__n{margin:0 0 8px;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.wait__foot .wait__n:last-child{margin-bottom:0}
.wait__foot .wait__n b{color:var(--ink)}
.screen__bar i{border-right:0}
/* Highlights inside headlines: same lime, sized to the type. */
h1 .hl,h2 .hl,h3 .hl{background-image:none;background-color:var(--neon);color:var(--ink);padding:0 .12em;margin:0 -.04em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Anything that follows a button gets room. No copy kissing a button. */
.btn + .btn-note,.btn + p,.btn + .plan__monthly,.btn + .small,.btn + .ideas__note{margin-top:18px}
.btn-note + .btn-note{margin-top:8px}
.ideas__cta + .btn-note{margin-top:18px}
.btn + .btn{margin-top:12px}
h1.h{font-size:clamp(44px,6.1vw,68px)}
.buycard .btn{white-space:nowrap;padding-left:16px;padding-right:16px}
@media (max-width:359px){ .buycard .btn{font-size:16px} }
.sample .ideas__cta{margin-top:22px}
.buycard--tea{max-width:560px}
/* Fair warning block on My Tea Diary. */
.warn{margin-top:32px;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:22px 20px 20px;max-width:560px}
.warn__t{margin:0 0 12px;font-weight:800;font-size:18px;color:var(--ink)}
.warn__l{list-style:none;margin:0;padding:0}
.warn__l li{position:relative;padding:9px 0 9px 30px;font-size:17px;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line)}
.warn__l li:first-child{border-top:0}
.warn__l li::before{content:"";position:absolute;left:4px;top:16px;width:7px;height:12px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(42deg)}
.warn__l li b{color:var(--ink)}
.warn__n{margin:14px 0 0;padding-top:12px;border-top:1.5px solid var(--ink);font-weight:700;color:var(--ink);font-size:16px}
/* Headline highlights: leave a hairline between wrapped lines so they don't stack into a blob. */
h1 .hl,h2 .hl,h3 .hl{background-color:transparent;background-image:linear-gradient(transparent 7%,var(--neon) 7%,var(--neon) 93%,transparent 93%);padding:0 .1em;margin:0;border-radius:0}
/* Every pill is bold. */
.eyebrow__t,.eyebrow .eyebrow__t,p.lab .eyebrow__t,span.lab .eyebrow__t,.bookglance .lab .eyebrow__t,.card p.lab .eyebrow__t,.plan p.lab .eyebrow__t,
.hero .eyebrow--trust,.plan__badge,.case__k,.screen__t,.navpanel__lab,.dual__h,.dual__h--go,.bookmeta .k,.bookmeta dt,.modes__k,.sound__k,.reach__k,.screencard__t > span:first-child,.foot__links a,.press__lab,.gal__count b{font-weight:800}
/* Buy cards: cover thumbnail beside the name and price. */
.buy__head{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;margin:0 0 16px}
.buy__thumb{margin:0;width:72px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--cream-2)}
.buy__thumb .slot{position:relative;inset:auto;width:100%;height:100%;padding:4px}
.buy__thumb .slot__tag{font-size:10px;padding:2px 5px}
.buy__thumb .slot__desc{display:none}
.buy__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.buy__thumb--pair{aspect-ratio:1}
.buycard .buy__head .buy__row{margin:0}
.buy__thumb .slot__tag{display:none}
.buy__thumb .slot{display:grid;place-items:center}
.buy__thumb .slot::after{content:"";width:40%;aspect-ratio:3/4;border:2px solid var(--ink-3);border-radius:3px;opacity:.6}
/* Button notes: one size, one color, whether the splitter makes one line or three. */
.btn-note,.btn-note + .btn-note,.buycard .btn-note,.plan .btn-note{font-size:16px;line-height:1.5;color:var(--ink-2)}
.btn-note b{color:var(--ink);font-weight:700}
/* Mid-page CTA: tight to the case rows around it. */
.sec > .wrap:has(> .midcta){padding-top:0;padding-bottom:0}
.sec > .wrap:has(> .midcta) + .wrap{padding-top:0}
.midcta{margin:var(--s3) 0}
.cases__list .caserow:last-child{padding-bottom:var(--s3)}
/* Signup notes match every other button note. */
.signup .btn-note,.hero__body .signup .btn-note,.footsignup .btn-note{font-size:16px;line-height:1.5}
.prodfig + .buycard,.prodfig + .aside,.prodfig + div.aside{margin-top:var(--s3)}
/* Section bottoms: the last thing in a section sits a normal breath above the next rule. */
.sec{padding-bottom:48px}
.sec > .wrap > .aside:last-child,.sec > .wrap > div.aside:last-child{margin-bottom:0}
@media (min-width:900px){ .sec{padding-bottom:64px} }
/* Quote attribution with a face. */
.qby{display:flex;align-items:center;gap:12px;margin-top:14px}
.qface--sm{flex:0 0 44px;width:44px;height:44px}
.qface--sm .slot{position:relative;inset:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.qface--sm .slot__tag{display:none}
.qface--sm .slot::after{content:attr(data-i);font-weight:800;font-size:15px;color:var(--ink-2)}
.qby__t b{display:block;font-weight:800;font-size:17px;color:var(--ink)}
.qby__t > span{display:block;font-size:15.5px;font-weight:600;color:var(--ink-2);margin-top:2px}
.hirefig{overflow:hidden}
.hirefig img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:700px){ .gal2{grid-template-columns:1fr 1fr} }
/* Portrait photos get a portrait frame. No cropped heads. */
.prodfig--portrait{aspect-ratio:4/5;max-width:560px}
.hirefig--portrait{aspect-ratio:4/5;max-width:520px}
.prodfig--portrait img,.hirefig--portrait img,.gal2__i img{object-position:50% 0%}
.gal2__i img{aspect-ratio:4/5;height:auto;object-fit:cover}
@media (min-width:900px){ .sec > .wrap:first-of-type:has(> .prodfig--portrait) > .prodfig--portrait{aspect-ratio:4/5} }
.plan .plan__name{margin:12px 0 8px}
.plan .plan__name + .plan__sell{margin-bottom:14px;font-weight:600;color:var(--ink)}
.plan .plan__price{margin-top:6px}
.books--one{grid-template-columns:1fr !important;max-width:760px}
/* Every section headline is the same size. Subheads are headlines. */
h3.subhead,.subhead{font-size:clamp(34px,8.6vw,62px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:0 0 20px;max-width:17ch}
.subhead--big{font-size:clamp(34px,8.6vw,62px)}
h3.subhead,.subhead{font-size:var(--t-head);font-weight:800;letter-spacing:-.042em;line-height:1.0}
.prodfig--lead{margin:14px 0 22px;aspect-ratio:4/5;max-width:none}
.sec > .wrap:first-of-type:has(> .prodfig--lead) > .prodfig--lead{grid-area:auto;margin:14px 0 22px}
@media (min-width:900px){ .prodfig--lead{max-width:560px} }
/* Hero signup card: inset from the screen edge on phones so the lime trim shows all the way round. */
@media (max-width:979px){
  .hero__body{width:auto;margin-left:0;margin-right:0}
  .hero__body .signup{border-left:2.5px solid var(--neon);border-right:2.5px solid var(--neon);border-radius:22px;margin-left:12px;margin-right:12px}
}
@media (max-width:979px){ .hero__body .signup{margin-left:0;margin-right:0} }
/* Book picker as product tiles. */
.bookglance{grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:760px){ .bookglance{grid-template-columns:repeat(3,1fr);gap:18px} }
.bookglance__i{padding:14px 14px 18px;min-height:0;gap:10px}
.bookglance__cover{margin:0 0 4px;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.bookglance__cover .slot{position:relative;inset:auto;width:100%;height:100%;display:grid;place-items:center}
.bookglance__cover .slot__tag,.bookglance__cover .slot__desc{display:none}
.bookglance__cover .slot::after{content:"";width:38%;aspect-ratio:3/4;border:2px solid var(--ink-3);border-radius:3px;opacity:.55}
.bookglance__cover img{width:100%;height:100%;object-fit:cover;display:block}
.bookglance__i > b{font-size:18px;line-height:1.2}
.bookglance__d{font-size:15px;line-height:1.45;color:var(--ink-2)}
.bookglance__i .lab .eyebrow__t{font-size:12px;padding:3px .5em 4px;letter-spacing:.02em;white-space:normal}
.bookglance .bookglance__i::after{display:none}
.bookglance__i:nth-child(3){grid-column:1/-1}
@media (min-width:760px){ .bookglance__i:nth-child(3){grid-column:auto} }
.bookglance__i .lab .eyebrow__t{font-size:15px}
/* Phone: one product tile per row, cover left, copy right. Desktop: three columns, cover on top. */
@media (max-width:759px){
  .bookglance{grid-template-columns:1fr;gap:14px}
  .bookglance__i{display:grid;grid-template-columns:104px 1fr;grid-template-areas:"cover lab" "cover name" "cover desc";column-gap:16px;row-gap:8px;align-items:start;padding:16px}
  .bookglance__cover{grid-area:cover;width:104px;margin:0;align-self:center}
  .bookglance__i .lab{grid-area:lab}
  .bookglance__i > b{grid-area:name;font-size:19px}
  .bookglance__d{grid-area:desc}
  .bookglance__i:nth-child(3){grid-column:auto}
  .bookglance__cover .slot::after{width:46%}
}
.bookglance__i .lab .eyebrow__t{display:inline;line-height:1.9;font-size:15px}
.prodfig--lead{margin:6px 0 22px}
.prodfig--mid{margin:18px 0 22px}
.sec > .wrap:first-of-type:has(> .prodfig--mid) > .prodfig--mid{grid-area:auto;margin:18px 0 22px}
.sec > .wrap:first-of-type:has(> .prodfig--mid){display:block}
.prodfig--lead img[src*="life-concert"]{object-position:60% 15%}
.prodfig--lead .slot{position:relative;inset:auto;width:100%;height:100%}
.vbanner{margin:14px 0 22px}
/* Any element carrying .h is a section headline, whatever else it is. */
h3.h,.sample__t.h,.sample__t{font-size:var(--t-head);font-weight:800;letter-spacing:-.042em;line-height:1.0;max-width:17ch}
/* Body copy is ink, not gray. Emphasis comes from bold and lime, never from dimming the rest. */
.lede,.book__desc,.caserow__s,.caserow__r,.case__more .lede,.wait__l li,.wait__foot .wait__n,.plan__sell,.plan__cadence,.plan__list li,.plan__terms,.buy__terms,.drop__body,.sound__v p,.bookmeta--about .v p,.bookmeta .v,div.aside p,.aside,.warn__l li,.modes__v,.dual li,.faq__a p,.mani__body p,.pickline,.ledger__row,.screen__k,.gal2__i figcaption span,.pcimg__cap,.btn-note,.small,.foot > .wrap > .small,.plan__alt,.bookglance__d,.prodtrust,.cases__note,.launchnote p{color:var(--ink)}
.lede b,.caserow__s b,.plan__list li b{color:var(--ink)}
/* Video in a photo frame, wide stills, poster frame. */
.pvid{width:100%;height:100%;object-fit:cover;display:block}
.prodfig--video{background:var(--ink)}
.prodfig--wide{aspect-ratio:4/3;max-width:720px}
.prodfig--wide img{object-position:50% 50%}
.prodfig--poster{aspect-ratio:2/3;max-width:460px}
.gal2__i.prodfig--video{aspect-ratio:auto}
.gal2__i .pvid{aspect-ratio:4/5;height:auto;border-radius:var(--r-img)}
.planfig--photo{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-img);max-width:420px}
.planfig--photo img{width:100%;height:100%;object-fit:cover;display:block}
.prodfig--poster{aspect-ratio:1013/1500;max-width:420px;background:#F6E6E0}
.prodfig--poster img{object-fit:contain;object-position:50% 50%}
.gal2__i.prodfig--video{background:transparent}
.gal2__i.prodfig--video .pvid{background:var(--ink)}
.prodfig--lead img[src*="life-cat-bed"]{object-position:70% 20%}

/* FAQ head photo: portrait, top anchored, never crops the head. */
.faqfig--photo{aspect-ratio:4/5;overflow:hidden;border:0;background:transparent}
.faqfig--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;border-radius:var(--r-img)}

/* Closing section photo, portrait variant: a centered card instead of a full-bleed strip. */
.finalimg--portrait{aspect-ratio:4/5;max-width:440px;margin:0 auto var(--s5);border-radius:var(--r-img)}
@media (max-width:599px){ .finalimg--portrait{aspect-ratio:4/5;margin-left:var(--gutter,20px);margin-right:var(--gutter,20px)} }

/* Ash: the figure's legs faded into nothing and the signup card looked like
   it was hanging. On phones the bottom of the figure now dissolves into an
   ink band that runs full-bleed behind the email capture, so the card has a
   solid dark ground and a clear edge. */
@media (max-width:899px){
  .hero__face::after{
    height:120px;
    background:linear-gradient(to bottom,
      rgba(17,17,17,0) 0%,
      rgba(17,17,17,.6) 30%,
      #111 55%,
      #111 100%);
  }
  .hero__body{position:relative;z-index:2;margin-top:-70px;padding:0 0 30px}
  .hero__body::before{
    content:"";position:absolute;z-index:-1;
    left:calc(50% - 50vw);right:calc(50% - 50vw);top:20px;bottom:0;
    background:#111;
  }
  .hero__body .signup{background:#fff}
}

/* Hero social proof: a stack of client circles with the count beside it.
   Letter circles stand in until real client marks are dropped in (same size,
   same class). Light greens with ink text, per the design rules. */
.avstack{display:flex;align-items:center;gap:14px;margin:18px 0 0;flex-wrap:wrap}
.avstack__row{display:flex;align-items:center}
.av{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--cream);display:inline-flex;align-items:center;justify-content:center;font:800 12px/1 var(--font,Inter,system-ui,sans-serif);letter-spacing:-.01em;color:var(--ink);margin-left:-12px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.av:first-child{margin-left:0}
.av--1{background:#d7f5a8}.av--2{background:#c4f07a}.av--3{background:#e6f9c6}.av--4{background:#b5e85c}.av--5{background:#cdf28f}.av--6{background:#a9e244}
.avstack__t{margin:0;font-size:16px;line-height:1.35;color:var(--ink);max-width:260px}
.avstack__t b{font-weight:800}
@media (min-width:900px){ .av{width:44px;height:44px;font-size:13px} .avstack__t{font-size:17px;max-width:none} }

/* Hero sub-deck reads in full ink like every other body line. */
.hero__deck--sub{color:var(--ink)}

.av{font-size:14px;width:42px;height:42px}
@media (min-width:900px){ .av{font-size:15px;width:46px;height:46px} }

.av{font-size:15px}

/* The count sits right against the circles, big, with the label after it. */
.avstack{gap:12px;align-items:center}
.avstack__t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;max-width:none}
.avstack__n{font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.avstack__t b{font-size:16px}
@media (min-width:900px){ .avstack__n{font-size:32px} .avstack__t b{font-size:17px} }
/* Circles and the count share one row; the label sits under both. */
.avstack{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:12px;row-gap:6px}
.avstack__row{grid-column:1;grid-row:1}
.avstack__t{display:contents}
.avstack__n{grid-column:2;grid-row:1;align-self:center}
.avstack__t b{grid-column:1 / -1;grid-row:2}

/* One line under each photo, in her voice. */
.cap{margin:12px 0 0;font-size:17px;line-height:1.4;font-weight:700;color:var(--ink);max-width:560px}
.cap + *{margin-top:var(--s3)}
.cap + .btn,.cap + .btn--primary{margin-top:var(--s3)}
.prodfig--wide + .cap{max-width:720px}
.cap--final{text-align:center;max-width:440px;margin:-14px auto var(--s5)}
@media (max-width:599px){ .cap--final{margin-left:var(--gutter,20px);margin-right:var(--gutter,20px)} }
.mani__img + .cap{margin-bottom:30px}
/* Tighter circle stack; the label is a tag no wider than circles + count. */
.av{margin-left:-16px}
.av:first-child{margin-left:0}
.avstack{width:max-content;max-width:100%;column-gap:10px;row-gap:8px}
.avstack__t b{width:0;min-width:100%;text-align:center;font-size:15px;line-height:1.3}
@media (min-width:900px){ .avstack__t b{font-size:16px} }

.av{margin-left:-13px}
.av:first-child{margin-left:0}

/* The price card follows its own intro; the second wrap gap shrinks so it does not float. */
.sec > .wrap:has(> .pop__lead),.sec > .wrap:has(> .pop__close){padding-top:20px}

/* The tag line stays on one line under the circles and count. */
.avstack__t b{white-space:nowrap;font-size:13px;letter-spacing:-.01em;width:auto;min-width:0;justify-self:center}
@media (min-width:900px){ .avstack__t b{font-size:14px} }

/* Subtitle under a page headline: lede size, heavier, tight to the h2. */
.subtitle{margin:-6px 0 18px;font-size:20px;line-height:1.35;font-weight:600;color:var(--ink);max-width:34ch}
@media (min-width:900px){ .subtitle{font-size:22px;margin-top:-10px} }

/* Label after the proof note: tighter, and the case lines read in full ink. */
.sec > .wrap:has(> .cases__note) + .wrap{padding-top:40px}
.case__t{color:var(--ink)}

/* Talk-to-me lists: a card per column, compact rows, full-ink copy. */
.dual > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-img);padding:18px 20px 8px}
.dual__h{margin:0 0 6px;padding-bottom:10px}
.dual li{font-size:17px;color:var(--ink);line-height:1.45;padding:11px 0;border-bottom:1px solid var(--line)}
.dual li:last-child{border-bottom:0}
.dual li b{font-weight:800}
.note{margin-top:22px;background:var(--cream-2,#efe9dc);border-radius:var(--r-img);padding:18px 20px}
.note p{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.note + *{margin-top:var(--s4)}
/* The band captions were clipped by the fixed-ratio box. The box now keeps
   its ratio on the image only, and the caption sits under it, bold, in ink. */
.pcimg{aspect-ratio:auto;overflow:visible;background:transparent}
.pcimg img{aspect-ratio:16/10;height:auto;display:block}
.pcimg--b img{aspect-ratio:4/3}
@media (min-width:900px){ .pcimg{aspect-ratio:auto} .pcimg img{aspect-ratio:21/8} .pcimg--b img{aspect-ratio:21/8} }
.pcimg__cap{background:transparent;color:var(--ink);font-weight:700;font-size:17px;padding-top:12px;padding-bottom:0}
.pcimg__cap b{font-weight:800}

/* Room between the hero pill and the headline. */
.hero .eyebrow--trust{margin-bottom:22px}
@media (min-width:900px){ .hero .eyebrow--trust{margin-bottom:26px} }

.hero .eyebrow--trust{display:inline-block;line-height:1.6;margin-bottom:22px}
@media (min-width:900px){ .hero .eyebrow--trust{margin-bottom:26px} }

/* Buy-card product name reads as a headline, not a label. */
.buy__name{font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.buycard .buy__row{align-items:baseline;gap:14px}

/* Without the photo the free card no longer stretches to match the paid one. */
@media (min-width:860px){ .plan--free{align-self:start} }
/* The dissolve into the ink band starts at the knees, not the torso. */
@media (max-width:899px){
  .hero__face::after{
    height:64px;
    background:linear-gradient(to bottom,
      rgba(17,17,17,0) 0%,
      rgba(17,17,17,.7) 45%,
      #111 80%,
      #111 100%);
  }
  .hero__body::before{top:30px}
}

/* Policy pages: same type system, wider lists, bullets in full ink. */
.policy .buy__terms{border-top:0;padding-top:0;margin-top:8px;font-size:17px;color:var(--ink)}
.policy .buy__terms li{padding:9px 0 9px 20px;line-height:1.5}
.policy .buy__terms li::before{top:18px}
.policy .lede a,.policy li a,#policy-top a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Closing photo caption sits tight under its photo. */
.finalimg--portrait:has(+ .cap--final){margin-bottom:0}
.cap--final{margin:12px auto 28px}
@media (max-width:599px){ .cap--final{margin:12px var(--gutter,20px) 28px} }

/* Band photo captions: no dead space under them. */
.pcimg{margin-bottom:0}
.pcimg + .wrap{padding-top:36px}

/* A photo that ends a block carries no extra margin under it. */
.wrap > .prodfig:last-child{margin-bottom:0}

/* A block that ends on a photo caption sits closer to the next block. */
.sec > .wrap:has(> .cap:last-child) + .wrap{padding-top:40px}

/* Real client faces in the proof stack. */
img.av{object-fit:cover;background:var(--cream-2);padding:0;font-size:0}

/* Real client faces in the quote slots. */
.qface img.face,.proof__face img.face,.qface--sm img.face{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.qby .qface--sm img.face{width:44px;height:44px}

/* Testimonial player while the files live on Drive. */
.vid__thumb iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* The press strip is one image; each logo gets its own link on top of it. */
.press__bar{position:relative;display:block;width:100%;max-width:620px}
@media (min-width:900px){ .press__bar{max-width:760px} }
.press__bar .press__logos{max-width:none}
.press__hot{position:absolute;top:-8px;bottom:-8px;display:block;border-radius:6px}
.press__hot:hover,.press__hot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.press__note{margin:14px 0 0;font-size:16px;color:var(--ink-2);line-height:1.45}
.press__note a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* The ads themselves, under each case that has them. A row that slides on a phone. */
.workreel{grid-column:1 / -1;margin-top:var(--s3);min-width:0}
.workreel .lab{margin:0 0 12px}
.workreel__row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.workreel__row::-webkit-scrollbar{display:none}
.workreel__i{flex:0 0 auto;width:min(62vw,220px);margin:0;scroll-snap-align:start}
.workreel__i[style*="16/10"]{width:min(86vw,480px)}
.workreel__i[style*="1/1"]{width:min(70vw,260px)}
.workreel__v,.workreel__i img{display:block;width:100%;aspect-ratio:var(--r);object-fit:cover;border-radius:var(--r-img);background:#111}
.workreel__i img{object-fit:contain;background:var(--cream-2)}
.workreel__i figcaption{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;margin-top:8px}

/* ============================================================
   31 OCT: ONE LAYOUT FOR EVERY PHOTO.
   A photo and its caption are one unit (.ph, added at build).
   Phone: the unit sits in the flow, caption tight under it.
   Desktop and tablet landscape: the section becomes two columns,
   copy left, the photo right. It scrolls with the page, never sticks.
   ============================================================ */
.ph{margin:var(--s4) 0}
.ph > figure,.ph > .prodfig,.ph > .faqfig{margin:0}
.ph > .cap{margin:12px 0 0}
.ph + *{margin-top:0}
.sec > .wrap > .ph:last-child{margin-bottom:0}
@media (min-width:900px){
  .sec > .wrap.wrap:has(> .ph){
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:64px;row-gap:0;align-items:start;
  }
  .sec > .wrap.wrap:has(> .ph) > *{grid-column:1;grid-row:auto;max-width:none}
  .sec > .wrap.wrap:has(> .ph) > .ph{
    grid-column:2;grid-row:1 / span 60;margin:0;position:static;align-self:start;
  }
  .sec > .wrap.wrap:has(> .ph) > .ph > .prodfig{max-width:none;width:100%}
  .sec > .wrap.wrap:has(> .ph) > .ph > .prodfig--portrait{aspect-ratio:4/5}
  .sec > .wrap.wrap:has(> .ph) > .h{font-size:clamp(36px,3.6vw,52px)}
  .sec > .wrap.wrap:has(> .ph) > .btn{justify-self:start;margin-top:var(--s3)}
}

/* Book art: the real Volume 1 covers, and the Field Guide's title plate. */
.bkfig{background:transparent !important;border:0 !important;overflow:visible !important}
.bkimg{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;box-shadow:0 18px 40px -18px rgba(17,17,16,.45)}
.bkimg--detail{object-fit:cover;height:auto;box-shadow:none}
.fgcw{container-type:inline-size;display:block;width:100%}
.fgc{
  display:flex;flex-direction:column;justify-content:space-between;
  width:100%;height:100%;aspect-ratio:2/3;max-height:100%;margin:0 auto;
  background:var(--neon);color:var(--ink);border-radius:6px;padding:9cqw 8cqw;
  box-shadow:0 18px 40px -18px rgba(17,17,16,.45);
}
.fgc__top{font:800 6.5cqw/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase}
.fgc__t{font-weight:900;font-size:15cqw;line-height:.95;letter-spacing:-.045em;margin-top:auto}
.fgc__s{font-weight:600;font-size:6cqw;line-height:1.25;margin-top:5cqw;max-width:20ch}
.fgc__by{font-weight:800;font-size:5.4cqw;margin-top:9cqw;padding-top:4cqw;border-top:2px solid var(--ink)}
.bkfig .fgc,.bkfig .bkimg{max-width:100%}
.prodfig.bkfig,.bookglance__cover.bkfig,.buy__thumb.bkfig{aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.prodfig.bkfig .fgc{width:min(100%,420px);height:auto}
.prodfig.bkfig .bkimg{width:min(100%,420px);height:auto}
.bkpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6%;align-items:end;width:100%;padding:4% 2%}
.bkpair .fgc,.bkpair .bkimg{height:auto;width:100%}
.bkpair > :first-child{transform:rotate(-3deg)}
.bkpair > :last-child{transform:rotate(2.5deg)}
.buy__thumb.bkfig .bkpair{padding:0;gap:3px}
.buy__thumb.bkfig .bkpair > *{transform:none;box-shadow:none}
.buy__thumb.bkfig .fgc{padding:6px;box-shadow:none}
.buy__thumb.bkfig .fgc > span{display:none}
.buy__thumb.bkfig .bkimg{box-shadow:none;border-radius:3px}
.bookglance__cover.bkfig{padding:8% 10%}
.bookglance__cover.bkfig .fgc,.bookglance__cover.bkfig .bkimg{height:auto;width:100%}

/* Typeset pages from the manuscript, for the gallery. */
.gal__slide.bkfig{background:var(--cream-2) !important;display:flex;align-items:center;justify-content:center;padding:6%}
.gal__slide.bkfig .bkimg{height:100%;width:auto;max-width:100%}
.gal__slide.bkfig .bkimg--detail{width:100%;height:auto}
.bkpg{
  background:#fff;color:var(--ink);width:100%;height:100%;padding:9% 9%;
  border-radius:4px;box-shadow:0 14px 30px -18px rgba(17,17,16,.4);
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
.bkpg__k{font:700 12px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}
.bkpg__h{font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.1;letter-spacing:-.02em;margin:0 0 6px}
.bkpg p:not(.bkpg__k):not(.bkpg__h){font-size:15px;line-height:1.5;margin:0;color:var(--ink)}

/* FAQ heading at a size the column can carry. */
@media (min-width:700px){
  .sec > .wrap.faqwrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
  .sec > .wrap.faqwrap > .faqwrap__head > .h{font-size:clamp(30px,2.7vw,40px);max-width:none}
  .faqwrap__head .ph{margin-top:var(--s3)}
}

/* The closing section. Phone: the photo is centered with room above it.
   Desktop: photo left, the pitch and the form beside it, one row. */
.final{padding-top:var(--s5)}
.final > .finalimg--portrait{margin:0 auto}
.final > .cap--final{text-align:center;margin:12px auto 36px;max-width:440px}
@media (max-width:599px){
  .final > .finalimg--portrait{margin:0 var(--gutter,20px)}
  .final > .cap--final{margin:12px var(--gutter,20px) 36px}
}
@media (min-width:700px){
  .final:has(> .finalimg){
    display:grid;grid-template-columns:minmax(24px,1fr) minmax(0,330px) minmax(0,740px) minmax(24px,1fr);
    column-gap:56px;align-items:start;padding-top:var(--sec-pad);
  }
  .final:has(> .finalimg) > .finalimg{grid-column:2;grid-row:1;margin:0;max-width:none;width:100%}
  .final:has(> .finalimg) > .cap--final{grid-column:2;grid-row:2;text-align:left;margin:12px 0 0;max-width:none}
  .final:has(> .finalimg) > .wrap{grid-column:3;grid-row:1 / span 2;max-width:none;width:auto;margin:0;padding-left:0;padding-right:0}
  .final:has(> .finalimg) .final__in{grid-template-columns:1fr;gap:var(--s3);align-items:start}
}
/* The closing photo and its caption travel as one block. */
.final > .final__ph{margin:0 auto 36px;max-width:440px}
.final > .final__ph > .finalimg--portrait{margin:0;max-width:none}
.final > .final__ph > .cap--final{text-align:center;margin:12px 0 0;max-width:none}
@media (max-width:599px){ .final > .final__ph{margin:0 var(--gutter,20px) 32px} }
@media (min-width:700px){
  .final:has(> .final__ph){
    display:grid;grid-template-columns:minmax(24px,1fr) minmax(0,330px) minmax(0,740px) minmax(24px,1fr);
    column-gap:56px;align-items:start;padding-top:var(--sec-pad);
  }
  .final:has(> .final__ph) > .final__ph{grid-column:2;grid-row:1;margin:0;max-width:none;position:sticky;top:120px}
  .final:has(> .final__ph) > .final__ph > .cap--final{text-align:left}
  .final:has(> .final__ph) > .wrap{grid-column:3;grid-row:1;max-width:none;width:auto;margin:0;padding-left:0;padding-right:0}
  .final:has(> .final__ph) .final__in{grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start}
}

.prodfig.bkfig .fgcw,.bkpair .fgcw,.bookglance__cover.bkfig .fgcw{width:min(100%,420px)}
.bkpair .fgcw{width:100%}
.buy__thumb.bkfig .fgcw{width:100%}
/* Blocks that are not copy run full width under the photo. */
@media (min-width:700px){
  .sec > .wrap.wrap:has(> .ph) > :is(.bookglance,.sample,.plans,.launchnote,.gal2,.vids,.sounds,.strip,.books){grid-column:1 / -1;margin-top:var(--s5)}
}
@media (min-width:700px){
  .sec > .wrap.wrap:has(> .ph) > .ph{grid-row:1 / span 30}
  .sec > .wrap.wrap:has(> .ph ~ .ph) > .ph{position:static}
  .sec > .wrap.wrap:has(> .ph) > .ph ~ .ph{grid-row:31 / span 30;margin-top:var(--s4)}
}
.sec > .wrap > a.btn{justify-self:start;width:auto}
.mani__ph .mani__img{margin-bottom:0}
.mani__ph .cap{margin:12px 0 30px}
@media (min-width:700px){ .mani__ph .cap{margin-bottom:0} .mani__in{align-items:start} }
.footsignup > .navpanel__lab{width:max-content;justify-self:start}
/* One product, one page: the gallery holds still on the left while the
   details, chapters and buy box scroll on the right. */
@media (min-width:1000px){
  .books.books--one{grid-template-columns:minmax(0,1fr)}
  .books--one > .book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .books--one > .book > *{grid-column:2;min-width:0}
  .books--one > .book > .gal{grid-column:1;grid-row:1 / span 40;position:sticky;top:110px;margin:0}
  .books--one .gal__slide{flex:0 0 82%}
}
/* Room above the closing photo so it never touches the section before it. */
.final.final:has(> .final__ph){padding-top:56px}
@media (min-width:700px){ .final.final:has(> .final__ph){padding-top:96px} }
.books.books--one,.books--one > .book{max-width:none;width:100%}
@media (min-width:700px){ .books--one .bookmeta > div{grid-template-columns:150px minmax(0,1fr)} }
@media (min-width:700px){
  .vidsec__in > div:has(> .ph){display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:64px;align-items:start}
  .vidsec__in > div:has(> .ph) > *{grid-column:1}
  .vidsec__in > div:has(> .ph) > .ph{grid-column:2;grid-row:1 / span 12;margin:0}
  .vidsec__in:has(> div > .ph){grid-template-columns:1fr}
  .vidsec__in:has(> div > .ph) > .vids{margin-top:var(--s5)}
}
.policy__after{margin-top:var(--s3)}
.policy__after .lede{margin:0 0 8px;font-size:17px}
.policy__after .lede:last-child{margin-bottom:0}
@media (min-width:700px) and (max-width:999px){
  .sec > .wrap.wrap:has(> .ph){column-gap:36px}
  .final:has(> .final__ph){column-gap:32px;grid-template-columns:minmax(20px,1fr) minmax(0,260px) minmax(0,740px) minmax(20px,1fr)}
}
@container (max-width:240px){ .fgc__s,.fgc__by{display:none} }
@container (max-width:120px){ .fgc__top{display:none} }
@media (min-width:700px){ .sec > .wrap.wrap:has(> .ph) > h1.h{font-size:clamp(40px,4.6vw,64px)} }
.finalpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.finalpair > .finalimg--portrait{margin:0;max-width:none;width:100%}
.final > .final__ph--pair{max-width:520px}
@media (min-width:700px){ .sec > .wrap.wrap:has(> .ph) > h1.h{font-size:clamp(44px,5.2vw,72px)} }
@media (min-width:700px){ .sec > .wrap.wrap:has(> .ph) > h1.h{font-size:clamp(46px,6vw,72px)} }
.gal__slide.bkfig:has(.bkimg--photo){padding:0}
.gal__slide.bkfig .bkimg--photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0;box-shadow:none}
.prodfig--book{border:0;background:transparent;border-radius:0}
.prodfig--book img{object-fit:contain}
.prodfig--book,.sec > .wrap.wrap:has(> .ph) > .ph > .prodfig--book{aspect-ratio:auto;max-width:420px;margin-inline:auto}
.prodfig--book img{height:auto}
.coverart{margin:var(--s5) 0 0;max-width:560px;border-radius:var(--r-img);overflow:hidden;box-shadow:0 18px 40px -22px rgba(17,17,16,.5)}
.coverart img{display:block;width:100%;height:auto}
.coverart + .cap{margin-bottom:var(--s3)}
@media (min-width:700px){ .sounds .sound{grid-template-columns:240px minmax(0,1fr)} } .sound .sound__k{white-space:nowrap;justify-self:start}
.prodfig--book video{display:block;width:100%;height:auto}

.signup__h{margin:0 0 4px;font-size:clamp(24px,5.6vw,30px);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.signup__list{list-style:none;margin:2px 0 8px;padding:0;display:grid;gap:12px}
.signup__list li{position:relative;padding-left:34px;font-size:18px;line-height:1.4;color:var(--ink)}
.signup__list li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border:1.5px solid #111;box-sizing:border-box}
.signup__list li:last-child{font-weight:700}

/* The ideas swiper never pokes past its own column. */
.sec > .wrap.wrap:has(> .ph) .gal--ideas{max-width:min(520px,100%)}

/* The ten real post ideas: whole card visible, cream around it matches the card's own ground. */
.gal--ideas .gal__slide--img{background:#F4EEE1}
.gal--ideas .gal__slide--img img{object-fit:contain}

/* Ash, 6 Nov: nothing sticks to the screen except the buy/signup bar at the bottom.
   Header, photos, galleries and side columns all scroll with the page. */
.masthead,.faqwrap__head,.plan--free,.hire__cta,.ph,.final__ph,
.final:has(> .final__ph) > .final__ph,.books--one > .book > .gal,
.sec > .wrap.wrap:has(> .ph) > .ph{position:static !important;top:auto !important}