@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(figtree.woff2) format("woff2");
}

:root{
  --field:#e02b10;
  --field-deep:#b81f0a;
  --cream:#fff3ea;
  --gold:#ffb072;
  --glass:rgba(255,255,255,0.92);
  --ink:#171717;
  --ink-soft:#5f5f5f;
  --good:#1f7a35;
  --warn:#9a6708;
  /* Free tools get their own colour so they don't compete with the paid-work
     buttons. #c2410c read as a second red next to the field; this is plainly
     orange and carries the dark brown text at 5.8:1 on cream. */
  --tool:#f97316;
  --tool-ink:#3B1405;
  --tool-hover:#ea580c;
  --display:"Figtree",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Headings only. Archivo is narrower and squarer than Figtree at display size,
     which is what stops a 60px headline reading as a soft consumer wordmark.
     Figtree stays the fallback so a blocked Google Fonts request degrades to the
     face already self-hosted rather than to Arial. */
  --head:"Archivo","Figtree",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Figtree",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* The arrow every CTA carries. stroke-width here is the thickness knob. */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
  /* One text scale for the whole site. Body copy was running at five different
     sizes across the sections (14, 14.5, 15, 15.5 and 17.5) purely because each
     block was styled on its own, so two paragraphs doing the same job read as
     different levels. Three roles, three sizes, used everywhere. */
  --fs-deck:clamp(17px,1.5vw,20px);
  --fs-body:clamp(15.5px,1.2vw,17px);
  --fs-small:14.5px;
  /* Every section on the site puts its content on the same 1180 measure.
     Bands do it with .wrap inside padding; full-bleed sections do it with
     this inset, which resolves to the identical left edge. */
  --inset:max(clamp(18px,3.4vw,44px), calc((100% - 1180px) / 2));
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--field);
  color:#fff;
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;}
/* picture only exists to offer a webp source. display:contents keeps the img as the
   direct flex/grid child so every existing .portrait / .sig-photo rule still applies. */
picture{display:contents;}

/* ===== stage ===== */
/* The stage used to be pinned to 100svh. Nothing in the fold grows with screen
   height, so on anything taller than about 800px the surplus came out as a band
   of empty red under the last thing on the page. It sizes to its content now and
   the cream band below shows at the fold instead, which also reads as "scroll". */
.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px clamp(18px,3.4vw,44px) clamp(30px,4vw,48px);
  overflow:hidden;
}
.stage::before,
.stage::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.16);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.07), rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.stage::before{ width:78vw; height:78vw; left:-26vw; top:-30vw; }
.stage::after{ width:64vw; height:64vw; right:-22vw; bottom:-28vw; }


/* The stage keeps its full-bleed red background and decorative circles, but its
   contents sit on the same 1180px measure as .wrap inside the bands below. The
   stage's only children are .nav and .hero / .hero-page. Without this the nav
   and headline hug the 44px page padding while every band below centres a
   1180px column, so the two disagree above 1268px of viewport and the gutter
   visibly jumps at the fold: 79px out at 1440, 319px out at 1920. */
.stage > *{ width:100%; max-width:1180px; margin-inline:auto; }

/* ===== nav ===== */
.nav{ position:relative; z-index:3; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mark{ display:flex; align-items:center; gap:10px; min-height:44px; margin-right:6px; text-decoration:none; color:#fff; }
.mark svg{display:block;}
.mark b{ font-family:var(--head); font-weight:900; font-size:19px; letter-spacing:-0.025em; }
.pills{display:flex; gap:8px; flex-wrap:wrap;}
/* 14px of side padding, not 18. Two CTA pills in .nav-end instead of one costs
   about 180px and the nav container caps at 1180, so the row broke in two. The
   five page links give the width back without either CTA shrinking. */
.pill{
  display:inline-flex; align-items:center; height:44px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,0.45);
  color:#fff; text-decoration:none; font-size:12px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pill:hover{background:rgba(255,255,255,0.14);}
.pill.is-active{ background:#fff; color:var(--field); border-color:#fff; }
.pill.is-active:hover{background:#fff;}
.nav-end{ margin-left:auto; display:flex; align-items:center; gap:11px; }
/* Circles, not bare glyphs. At 18px on a red field the two marks disappeared
   next to the pills either side of them; the fill and the ring give them the
   same visual weight as a .pill without borrowing its shape. */
.icon-link{
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.45);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.icon-link:hover{background:#fff; border-color:#fff; color:var(--field); transform:translateY(-1px);}
/* The email pill is the only nav item that isn't navigation, so it gets the
   gold fill. White is already spoken for by .pill.is-active. No extra padding:
   at 560px this shares row one with the wordmark and the budget is tight. */
.nav-end .pill{
  background:var(--gold); border-color:var(--gold); color:#4a1503;
  font-weight:800; box-shadow:0 3px 14px rgba(0,0,0,0.16);
}
.nav-end .pill:hover{background:#fff; border-color:#fff; color:var(--field);}
/* Mail pill and mail button share one mark and one fill so the email action
   reads as the same thing wherever it turns up. The white ring lifts the gold
   off the red field, which the flat shadow alone wasn't doing. */
.pill-mail, .pill-book{
  gap:8px; padding:0 22px; height:46px; font-size:12.5px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.22);
}
.pill-mail:hover, .pill-book:hover{transform:translateY(-1px);}
.mail-ico, .cal-ico{flex:none;}

/* ===== hero grid ===== */
/* Two rows, no filler track. There used to be a 1fr spacer between them, which
   parked the wordmark on the floor of the fold behind a dead red band. */
.hero{
  position:relative; display:grid;
  /* Track pinned rather than auto: the cards cap themselves at 370px with a
     percentage, which is indefinite while tracks are being sized, so an auto
     track measured their text unwrapped instead and took 607px off the wordmark. */
  grid-template-columns:minmax(0,1fr) 400px;
  /* Row two takes the slack rather than both rows splitting it. The panel is
     ~900px tall and the headline no longer runs five lines, so two auto rows
     pulled the kicker to the floor and left a hole in the middle of column one. */
  grid-template-rows:auto 1fr;
  gap:clamp(20px,3.6vh,44px) clamp(28px,4vw,72px);
  /* The wordmark used to fill the fold. Without it the stack is short enough to
     sit off the nav rather than under it, so the padding carries the space the
     type used to. */
  padding:clamp(26px,7vh,86px) 0 clamp(20px,4vh,52px);
}
/* The text rows own column one. The cards span both of them and hang off the top
   so their first line sits level with the eyebrow, rather than starting halfway
   down the fold beside the wordmark. */
.row-top, .row-bottom{grid-column:1;}
.globe-layer{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; pointer-events:none; }
/* Sized off the hero box, not the viewport, and capped by its height so the whole
   sphere stays inside the red field instead of being sliced by the band edge.
   globe.js draws the sphere at 0.395 of the canvas, so the box carries 10.5% of
   empty either side: 118% of the hero height puts the sphere at 93% of it. */
.globe-wrap{
  position:relative; width:min(680px,90vw); max-height:118%; aspect-ratio:1;
  pointer-events:auto; cursor:grab; touch-action:pan-y;
}
.globe-wrap.is-drag{cursor:grabbing;}
.globe-wrap canvas{width:100%; height:100%; display:block;}

/* Interior heroes run to 13ch of headline and 54ch of lede, so the right half of
   the red stage is dead space at desktop widths. Same globe as the homepage,
   parked in that gap and bled off the right edge (.stage already clips). Needs
   the .stage > prefix to outrank .stage > *{width:100%;max-width:1180px}. */
.stage > .globe-side{
  /* Top clears the nav row so the globe never sits under the icons; bottom is the
     stage edge. Interior stages vary a lot in height (about is ~365px, vault is
     ~590px), so the wrap is sized off that box rather than off vh, and the globe
     shrinks to fit instead of getting sliced. */
  /* Right edge on the same line as the nav's Email button, so the globe is part
     of the 1180 measure instead of bleeding off the page. Same max() the nav
     resolves to: the centring slack above 1180, the page padding below it. */
  inset:78px 0 10px auto; left:auto;
  right:max(clamp(18px,3.4vw,44px), calc((100% - 1180px) / 2));
  width:auto; max-width:none; margin:0;
  display:flex; align-items:center; justify-content:flex-end;
  opacity:0.8;
}
/* globe.js draws the sphere at 0.395 of the canvas, so the canvas box carries
   10.5% of empty either side. Nudged back out by exactly that, so what lines up
   with the button is the edge of the sphere and not the edge of its box. */
.globe-side .globe-wrap{
  width:auto; height:min(100%,520px); aspect-ratio:1; max-width:none;
  transform:translateX(10.5%);
  cursor:default; pointer-events:none;
}

.row{position:relative; z-index:2;}
.row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(24px,6vw,120px); }
/* 12px at 0.2em tracking was legible on a spec sheet and not on a screen: the
   letterspacing that makes it read as a label is the same thing that thins it
   out. Size carries it instead, tracking pulled back a touch to compensate. */
.eyebrow{ font-family:var(--display); font-weight:900; font-size:14px; letter-spacing:0.17em; text-transform:uppercase; margin:0 0 12px; line-height:1.4; }
.lede{ margin:0; max-width:38ch; font-size:var(--fs-body); line-height:1.55; color:#fff; }
/* On the homepage this line is the h1 now that the wordmark is gone, so it gets
   display type. text-transform because the global h1 rule sets lowercase for the
   wordmark's sake and there is no wordmark left to want it. */
.hero .lede{
  font-family:var(--head); font-weight:900;
  /* 13ch wraps each sentence to two lines, so the block is four lines and 248px
     tall against the 259px the old long headline filled. Set at one line each it
     measured 160px and the column read empty. Lowercase comes from the global h1
     rule; Amazon and Grow opt out via .cap. */
  font-size:clamp(2.15rem,5.2vw,4.5rem);
  line-height:0.86; letter-spacing:-0.035em; color:#fff;
  max-width:13ch;
}
.hero .eyebrow{ font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:0.22em; color:#FFD9BE; }

.row-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,56px); flex-wrap:wrap; }
/* Row two is the 1fr track now, so flex-end would park the kicker and button at
   the bottom of the fold with the gap above them. Top-aligned, they sit under
   the headline and column one reads as one stack. */
.hero .row-bottom{ align-items:flex-start; padding-top:clamp(26px,4.4vh,54px); }
h1{
  font-family:var(--head); font-weight:800;
  font-size:clamp(3.4rem,12.4vw,10.4rem);
  /* Tracking was -0.045em against Figtree. Archivo is a narrower face, so the
     same negative value closed the word gaps and ran the words together. */
  line-height:0.78; letter-spacing:-0.036em;
  margin:0 0 26px; text-transform:lowercase;
}
/* The display face is set lowercase by design, but a sentence still opens on a
   capital. ::first-letter overrides the transform for that one glyph. */
h1::first-letter, h2::first-letter, .verdict-call::first-letter{text-transform:uppercase;}
/* Proper nouns are the exception to the lowercase display style. Amazon is a
   brand name and reads as a typo in lowercase, so it opts out of the transform.
   h1 sets its spans to block for the stacked lede, hence the display reset. */
.cap{text-transform:none;}
h1 .cap{display:inline;}
h1 span{display:block;}
h1 .with{ font-size:0.34em; letter-spacing:-0.01em; line-height:1.1; margin-top:0.16em; color:rgba(255,255,255,0.8); }
.cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:58px; padding:0 40px; border-radius:999px;
  background:var(--gold); color:#4a1503; text-decoration:none;
  /* Every call to action on the site is set caps. Tight display tracking closes
     up at that size, so the letterspacing goes positive to open it back out. */
  font-family:var(--display); font-weight:900; font-size:16px;
  text-transform:uppercase; letter-spacing:0.045em;
  border:0; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* Every call to action carries a trailing arrow. Masked SVG rather than the glyph:
   no font has an arrow at this weight, and the mask gives stroke-width as a knob
   while currentColor keeps it on the button's own text colour. */
.btn{gap:13px;}
.btn::after{
  content:""; width:19px; height:19px; flex:none; margin-right:-0.045em;
  background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat;
  transition:transform .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,0.22);}
.btn:hover::after{transform:translateX(3px);}
/* Gold reads on the red bands but flattens against cream and white panels, so
   anything sitting on light goes to the saturated orange. Same two-skin rule as
   every other CTA here: apricot on red, --tool on cream. */
.btn.dark, .band-light .btn{background:var(--tool); color:var(--tool-ink);}
.btn.dark:hover, .band-light .btn:hover{background:var(--tool-hover);}
/* .doc a underlines every link in prose bodies, which is right for a sentence
   and wrong for a button sitting in the same block. Contact is the only page
   where a .btn lives inside .doc. */
.doc .btn{text-decoration:none;}
.btn-mail{
  background:var(--gold); color:#4a1503;
  height:64px; padding:0 34px; gap:11px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.btn-mail:hover{box-shadow:0 14px 34px rgba(0,0,0,0.26);}
/* No outline CTAs anywhere on this site. Eli's call: every button is a solid
   orange fill, apricot on the red bands and --tool on cream, even where two sit
   side by side. Secondary buttons carry .btn-tool like the primary ones. */
.kicker{ margin:0; max-width:24ch; font-size:var(--fs-small); font-weight:500; color:#fff; }
/* On the homepage it is the supporting line under the headline rather than a
   footnote beside the button, so it gets a full measure and its own air. */
.hero .kicker{ max-width:36ch; margin-bottom:26px; font-size:clamp(15px,1.25vw,17.5px); line-height:1.5; }

/* interior page hero: one column, headline sized down from the homepage */
.hero-page{ position:relative; z-index:2; padding:clamp(34px,7vh,84px) 0 clamp(26px,5vh,56px); }
.hero-page h1{ font-size:clamp(2.7rem,7.2vw,5.6rem); line-height:0.84; margin-bottom:22px; max-width:13ch; }
.hero-page .lede{ max-width:54ch; font-size:clamp(16px,1.5vw,19px); line-height:1.58; }
.hero-page .cta-row{margin-top:28px;}

/* ===== hero benefit panel ===== */
/* Column two of the hero, spanning both text rows, carrying the reasons to be on
   Amazon at all. A translucent shell holding opaque tiles: the shell lets the
   globe read through the gaps, the tiles keep small text off a moving picture.
   One flat panel with hairline rules came before this and read as a price list. */
.helps{
  /* Top edge level with the eyebrow, so the card opens where the copy opens. */
  grid-column:2; grid-row:1 / -1; align-self:start;
  /* It used to inherit the z-index from .row; as a direct child of .hero it needs
     its own or the globe paints over the last two rows. */
  position:relative; z-index:2;
  width:100%; max-width:400px; margin:0;
  display:flex; flex-direction:column; gap:9px;
  padding:16px; border-radius:24px;
  background:rgba(255,240,230,0.16);
  border:1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  /* Warm brown, never black: a neutral shadow goes grey-green against the red. */
  box-shadow:0 28px 60px -22px rgba(30,5,0,0.6);
}
.helps-label{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; color:#FFE0C8;
}
.helps-label::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#FFC79A;}
.helps-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;}
.helps-list li{
  background:#FFF8F3; border-radius:15px; padding:14px 16px;
  box-shadow:0 2px 8px rgba(30,5,0,0.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.helps-list li:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(30,5,0,0.18);}
.helps b{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-0.01em; line-height:1.3; color:#2A1008;
}
/* The 21px square plus the 9px gap is the 30px the body indents by, so both
   lines of a tile start on the same edge. */
.helps b i{
  flex:none; display:grid; place-items:center; width:21px; height:21px;
  border-radius:7px; background:#FFE2CE; color:#B32A10;
  font-size:11px; font-weight:800; font-style:normal;
}
.helps span{display:block; margin-top:4px; padding-left:30px; font-size:13.5px; line-height:1.5; color:#6B4234;}
.helps-cta{
  display:flex; flex-direction:column; gap:10px;
  /* Opaque like the tiles. Translucent here put the button label on whatever the
     globe happened to be showing, which fails AA half the rotation. */
  background:#FFF3E8; border-radius:15px; padding:14px 16px 16px;
  box-shadow:0 2px 8px rgba(30,5,0,0.14);
}
.helps-cta p{margin:0; font-size:12.5px; line-height:1.45; color:#6B4234;}
/* The hero button one size down, not a competing style: same .btn, same arrow,
   same destination. */
.helps-cta .btn{
  width:100%; height:auto; padding:13px 20px; gap:9px;
  background:#FFB47A; color:#3B1405;
  font-size:13px; font-weight:800; letter-spacing:0.06em;
  box-shadow:0 2px 6px rgba(30,5,0,0.16);
}
.helps-cta .btn::after{width:15px; height:15px;}
.helps-cta .btn:hover{background:#FFA25E; transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,5,0,0.2);}
.helps-cta .btn:focus-visible{outline:2px solid #3B1405; outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .helps-list li, .helps-cta .btn, .check-btn,
  .reply-btn, .rl-k, .rl-v{transition:none;}
  .helps-list li:hover, .helps-cta .btn:hover{transform:none;}
}

/* ===== content bands ===== */
.band{ position:relative; z-index:2; padding:clamp(56px,7vw,112px) clamp(18px,3.4vw,44px); }
.wrap{max-width:1180px; margin:0 auto;}
.band-light{background:var(--cream); color:#171717;}
.band-light .eyebrow{color:var(--field);}
h2{ font-family:var(--head); font-weight:800; font-size:clamp(2.1rem,5vw,4rem); line-height:0.9; letter-spacing:-0.026em; text-transform:lowercase; margin:0 0 24px; }
h3{ font-family:var(--display); font-weight:900; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; margin:0 0 14px; }
/* Every section opens the same way: eyebrow, h2, one deck line, then content.
   The story section used to hide its heading inside the narrow left column of a
   two-column grid, so it started at a different place and a different measure
   from the three sections under it. */
.sec-head{margin:0 0 clamp(28px,3.4vw,44px);}
.sec-head > :last-child{margin-bottom:0;}
/* A second block starting straight under a CTA, a callout or a table reads as
   one run-on unit. h3 has no top margin of its own, so give it one here. */
.cta-row + h3, .callout + h3, .tbl-wrap + h3{margin-top:46px;}
/* .note carries no bottom margin, so buttons sat welded to the last line of it.
   Collapses against .sec-sub's equal 30px elsewhere, so nothing else moves. */
.note + .cta-row{margin-top:30px;}

.band-deep{background:var(--field-deep);}
/* story */
/* Start, not stretch. Stretching the prose to the card's height and pushing the
   signature to the floor put 300px of cream between the last paragraph and the
   photo, which reads as a hole rather than as the foot of a column. Both columns
   begin on the same line and each ends where its own content ends. */
/* The heading, the prose and the card share one grid instead of the card sitting
   in a row underneath the heading. The card spans both rows in column two, so its
   top edge starts level with the headline. The offset is the eyebrow's own line
   box plus its margin, both fixed px, so it holds at every width. */
/* Rows are auto then 1fr: the card is taller than the left column, and without
   this the leftover height splits across both rows and drops a hole between the
   sub-headline and the first paragraph. */
.about-wrap{
  display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:auto 1fr;
  column-gap:clamp(30px,5vw,72px); align-items:start;
}
.about-wrap .sec-head, .about-wrap .prose{grid-column:1;}
.about-wrap .proof{grid-column:2; grid-row:1 / -1; margin-top:calc(14px * 1.4 + 12px);}
/* The measure moved off the paragraph and onto the block, so the rule above the
   signature stops where the text stops instead of running the full column. */
.prose{display:flex; flex-direction:column; font-size:var(--fs-body); max-width:58ch;}
.prose p{ font-size:var(--fs-body); line-height:1.62; margin:0 0 16px; }
.prose p:last-child{margin-bottom:0;}
/* The proof PDF sits with the story, above the byline, so it is read as part of
   what he is claiming rather than as a third CTA. Same orange fill and pill as
   the mail button below it: every CTA on the site is orange. */
.prose-cta{
  align-self:flex-start; margin-top:24px;
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 20px; border-radius:999px;
  background:var(--tool); color:var(--tool-ink); text-decoration:none;
  font-family:var(--head); font-weight:800; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:background .18s ease;
}
.prose-cta:hover{background:var(--tool-hover);}
.prose-cta:focus-visible{outline:2px solid var(--tool-ink); outline-offset:2px;}
@media (max-width:560px){
  .prose-cta{align-self:stretch; justify-content:center;}
}
/* A fixed gap, not auto. Pushed to the floor of a column the prose does not
   fill, the signature left a stretch of empty cream above it that read as a
   hole. It follows the last paragraph instead. */
.sig{
  margin-top:38px; padding-top:26px; border-top:1px solid rgba(0,0,0,0.10);
  font-size:14px; color:#6b6b6b; display:flex; align-items:center; gap:16px;
}
.sig b{ display:block; font-family:var(--display); font-weight:900; font-size:17px; letter-spacing:-0.02em; color:#171717; }
.sig-kicker{
  display:block;
  margin:4px 0 2px;
  font-family:var(--display);
  font-weight:800;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--field);
  line-height:1.3;
}
.sig p{margin:0;}
/* The byline is where a reader decides to make contact, so the mail CTA sits
   with the name rather than three sections further down. Beside the name, not
   pushed to the column edge: at this width an auto margin stranded it. */
.sig-face{display:flex; flex-direction:column; align-items:center; gap:10px; flex:none;}
/* Bare glyphs, no chip. These are a footnote under the face, not a third CTA
   competing with the mail button. The box is 44px so a thumb can land on it;
   the glyph stays 15px, so it still reads as a footnote. Padding did this
   before and only got to 27px, which is under the floor on a phone. */
.sig-social{display:flex; gap:0; margin-top:-2px;}
.sig-social a{
  display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; color:#9a9a9a;
  transition:color .18s ease;
}
.sig-social a:hover{color:var(--tool);}
.sig-social svg{width:15px; height:15px;}
.sig-mail{
  flex:none;
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 20px; border-radius:999px;
  background:var(--tool); color:var(--tool-ink); text-decoration:none;
  font-family:var(--head); font-weight:800; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:background .18s ease;
}
.sig-mail:hover{background:var(--tool-hover);}
.sig-mail:focus-visible{outline:2px solid var(--tool-ink); outline-offset:2px;}
/* .sig-book carries no styling of its own. It rides .sig-mail so the book pill is
   the same solid orange as the mail pill, per the no-outline-CTAs rule above. */
@media (max-width:560px){
  .sig{flex-wrap:wrap;}
  .sig-mail{margin-left:0; width:100%; justify-content:center;}
}
/* His own words end with his face. Circular so the square source crops without
   art direction, and so it echoes the rings on the stage and the logo mark. */
.sig-photo{
  width:clamp(88px,11vw,128px); height:clamp(88px,11vw,128px); flex:none;
  border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 10px 26px rgba(0,0,0,0.15);
}
/* Nine figures are scanned, not read. Right-aligned labels meant the eye crossed
   a different sized gap on every row and the labels had no common left edge, so
   the two halves get their own shared column tracks instead. The li's are
   display:contents so the tracks are the list's, not each row's, which is what
   makes the numbers line up; the rules therefore hang off b and span. */
.proof{
  margin:0; list-style:none;
  display:grid; grid-template-columns:auto auto 1fr;
  column-gap:clamp(16px,2vw,26px);
  padding:clamp(18px,2.2vw,26px);
  background:#fff; border:1px solid rgba(0,0,0,0.09); border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,0.06);
}
/* One rule per row, hung off the li. Bordering the two cells instead put the
   rule at each cell's own box bottom, and baseline alignment leaves those
   bottoms at different heights, so every hairline was broken in the middle with
   the two halves a few px apart. subgrid keeps the shared column tracks. */
.proof li{
  display:grid; grid-template-columns:subgrid; grid-column:1/-1;
  align-items:baseline; column-gap:clamp(16px,2vw,26px);
  padding:11px 0; border-bottom:1px solid rgba(0,0,0,0.08);
}
/* The title used to sit outside the card, which pushed the card's top edge a
   heading plus its margin below the first line of prose beside it. Inside, it
   is the card's first row and the two columns start on the same line. */
.proof .proof-head{display:block; padding:0 0 13px;}
.proof .proof-head h3{margin:0;}
.proof li:first-child{padding-top:0;}
.proof li:last-child{padding-bottom:0; border-bottom:0;}
/* One icon per row in the card's first column. Tinted tile rather than a bare
   glyph so the column reads as a rail down the card and the numbers still lead. */
.proof .pf-ico{
  box-sizing:border-box; width:36px; height:36px; padding:8px;
  border-radius:11px; align-self:center;
  background:rgba(193,32,18,0.07); color:var(--field-deep);
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.proof b{ font-family:var(--display); font-weight:900; font-size:clamp(18px,1.55vw,21px); letter-spacing:-0.025em; white-space:nowrap; }
.proof span{font-size:var(--fs-small); line-height:1.4; color:#5f5f5f;}

/* who it's for */
/* Was five outlined pills on one wrapping flex row, which put four on the first
   line and left the fifth stranded on its own, and no two items shared an edge.
   Two fixed columns of hairline rows instead: same left edges, same rhythm, and
   it reads as a list of criteria rather than a tag cloud. The one-word tags on
   the services page keep their own pill styling and their own .chips class. */
/* ===== 02 who this is for: full-bleed split, one red field =====
   The red runs edge to edge, but the content sits on the same 1180px measure as
   every band above and below, so the eyebrow starts on the same vertical line as
   the nav, the story heading and the calculator block. Panels are fr units,
   never fixed px, which is what keeps the section off the horizontal scrollbar. */
.split{
  position:relative; z-index:2; background:#E5391A;
  display:grid; grid-template-columns:1.08fr 1fr;
  padding-inline:var(--inset);
}
.split *{box-sizing:border-box;}
.split-l{padding:clamp(56px,7vw,112px) clamp(28px,3.2vw,54px) clamp(56px,7vw,112px) 0; display:flex; flex-direction:column;}
.split-r{padding:clamp(56px,7vw,112px) 0 clamp(56px,7vw,112px) clamp(28px,3.2vw,54px); display:flex; flex-direction:column;
         border-left:1px solid rgba(255,255,255,0.22);}
.split-inner{display:flex; flex-direction:column; flex:1; width:100%;}
.split-l .split-inner{justify-content:space-between; gap:32px;}

.split-eyebrow{
  font-family:var(--head); font-weight:800; font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase; color:#FFD9BE; margin:0 0 20px;
}
/* Type comes from the global h2 and .sec-sub. Nothing bespoke here beyond
   colour: this heading sits at the same size as "an operator, not a typical
   agency" and "run one sku through every Amazon fee". */
.split-h{ color:#fff; text-wrap:balance; }
.split-sub{
  margin:0; max-width:46ch;
  font-family:var(--body); font-weight:600; font-size:var(--fs-deck);
  line-height:1.45; letter-spacing:-0.012em; color:rgba(255,240,232,0.92);
}
.split-foot{
  padding-top:28px; border-top:1px solid rgba(255,255,255,0.25);
  display:flex; flex-direction:column; gap:20px;
}
/* One child, so space-between still pins the whole group to the panel base when
   a page runs two ruled blocks instead of one. */
.split-foots{display:flex; flex-direction:column; gap:28px;}
.split-lead{ margin:0; font-size:20px; line-height:1.45; font-weight:600; color:#FFF3EC; }
.split-lead span{color:#FFC79A;}
.split-support{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,235,222,0.8); }

.check-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:20px; }
.check-head p{
  margin:0; font-family:var(--head); font-weight:800; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase; color:#FFD9BE;
}
.check-head span{ font-family:var(--head); font-weight:700; font-size:12px; color:rgba(255,235,222,0.55); }
.checks{margin:0; padding:0; list-style:none;}
.checks li{ display:flex; gap:14px; padding:18px 0; border-top:1px solid rgba(255,255,255,0.20); }
.checks li:last-child{border-bottom:1px solid rgba(255,255,255,0.20);}
/* The apricot tile is the only contrast step left on a red panel, so it keeps
   its solid fill and dark glyph. Do not flatten it into the background. */
.checks i{
  flex:none; width:22px; height:22px; margin-top:2px; border-radius:7px;
  background:#FFE2CE; color:#B32A10;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-style:normal; font-weight:800; font-size:12px;
}
.checks span{ font-size:18px; line-height:1.4; font-weight:600; color:#fff; text-wrap:pretty; }
.check-cta{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:12px; }
.check-cta p{ margin:0; font-size:15px; line-height:1.5; color:rgba(255,235,222,0.85); }
.check-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:15px 20px; border-radius:999px;
  background:#FFB47A; color:#3B1405; text-decoration:none;
  font-family:var(--head); font-weight:800; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:background .18s ease;
}
.check-btn:hover{background:#FFA25E;}
.check-btn:focus-visible{outline:2px solid #3B1405; outline-offset:2px;}
.note{ margin:26px 0 0; font-size:var(--fs-body); line-height:1.62; color:#fff; max-width:58ch; }

/* capabilities */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(22px,3vw,40px); margin-top:34px; }
.caps h3{color:var(--gold);}
.caps ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; font-size:var(--fs-small); color:rgba(255,255,255,0.9); }

/* ===== 04 start here: the ask, and one card to answer it =====
   The Email Eli button used to float loose in the cream with the contact details
   under it as grey fine print. Both now sit in a white card, the only thing in
   the section carrying a shadow, so the eye lands on the reply path. */
.start{ background:#FDF1E7; padding:clamp(56px,7vw,112px) var(--inset); }
.start *{box-sizing:border-box;}
.start-grid{ display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:start; }

.start-eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
  font-family:var(--head); font-weight:800; font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase; color:#E5391A;
}
.start-eyebrow::before{content:""; flex:none; width:26px; height:2px; background:#E5391A;}
/* h2 is lowercased and 4rem site-wide. This one is its own scale and keeps its
   capitals, because Amazon sits in the middle of the line. */
/* Same deal as .split-h: global h2 type, local colour only. */
.start-h{ color:#1A1A1A; text-wrap:balance; }
.start-sub{
  margin:0; max-width:52ch;
  font-family:var(--body); font-weight:600; font-size:var(--fs-deck);
  line-height:1.45; letter-spacing:-0.012em; color:#4A3128;
}
/* Three rows, not a run-on sentence. People send the right thing when it is a list. */
.brief{ margin:10px 0 0; padding:0; list-style:none; max-width:520px; }
.brief li{
  display:grid; grid-template-columns:32px 1fr; gap:16px; align-items:baseline;
  padding:16px 0; border-top:1px solid rgba(42,16,8,0.14);
}
.brief li:last-child{border-bottom:1px solid rgba(42,16,8,0.14);}
.brief b{ font-family:var(--head); font-weight:800; font-size:13px; letter-spacing:0.1em; color:#E5391A; }
.brief span{ font-size:19px; font-weight:600; letter-spacing:-0.01em; color:#1A1A1A; }

.reply-card{
  background:#fff; border-radius:20px; padding:32px 30px;
  display:flex; flex-direction:column; gap:20px;
  box-shadow:0 24px 50px -22px rgba(60,10,0,0.35);
}
.reply-top{display:flex; flex-direction:column; gap:8px;}
.reply-label{
  margin:0; font-family:var(--head); font-weight:800; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; color:#B32A10;
}
.reply-note{ margin:0; font-size:15px; line-height:1.5; color:#6B4234; }
.reply-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:48px; padding:17px 22px; border-radius:999px;
  background:var(--tool); color:var(--tool-ink); text-decoration:none;
  font-family:var(--head); font-weight:800; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  box-shadow:0 8px 18px -8px rgba(154,62,8,0.7);
  transition:background .18s ease;
}
.reply-btn svg{flex:none;}
.reply-btn:hover{background:var(--tool-hover);}
/* .reply-btn-book is deliberately unstyled. It used to be the outline version of
   the email button above it, so the stacked pair read as one control instead of
   two competing fills. Asked for solid orange, so it now inherits .reply-btn in
   full and the two are pixel identical. The class stays on the anchor as a hook;
   don't re-add a border here, a 2px one makes it taller than its neighbour. */
.reply-links{ margin:0; padding:0; list-style:none; border-top:1px solid rgba(42,16,8,0.10); }
.reply-links li{border-bottom:1px solid rgba(42,16,8,0.08);}
.reply-links li:last-child{border-bottom:0;}
.reply-links a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; text-decoration:none;
}
.rl-k{
  display:flex; align-items:center; gap:9px;
  font-family:var(--head); font-weight:800; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:#8A6252;
  transition:color .18s ease;
}
.rl-k i{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; background:#FFE9DC; color:#B32A10;
}
.rl-k svg{width:14px; height:14px;}
.rl-v{ font-size:14px; font-weight:600; color:#1A1A1A; transition:color .18s ease; }
.reply-links a:hover .rl-k, .reply-links a:hover .rl-v{color:#E5391A;}
.reply-btn:focus-visible, .reply-links a:focus-visible{outline:2px solid #E5391A; outline-offset:2px;}
.reply-foot{ display:flex; align-items:center; gap:9px; margin:0; font-size:13px; color:#6B4234; }
.reply-foot::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#E5391A;}

.meta-list{margin:22px 0 0; padding:0; list-style:none; font-size:15px;}
.meta-list li{padding:6px 0;}
.meta-list a, .kicker a{color:var(--field); text-decoration:none; border-bottom:1px solid rgba(224,43,16,0.35);}
.meta-list a:hover, .kicker a:hover{border-bottom-color:var(--field);}
/* The rule above was written for .meta-list, which only ever sits on cream.
   .kicker also appears in .stage, the red field, where var(--field) is the
   background colour and the link renders invisible (404.html). */
.stage .kicker a{color:#fff; border-bottom-color:rgba(255,255,255,0.5);}
.stage .kicker a:hover{border-bottom-color:#fff;}
.meta-list .k{ display:inline-block; min-width:92px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#8a8a8a; }

/* ===== calculator page ===== */
/* One deck treatment for the line that sits under an h2. The story section had
   it as 900-weight display type at 1.7rem, which read as a second headline
   arguing with the h2 above it; everywhere else it was plain body copy. */
.sec-sub, .prose .lead{
  margin:0 0 30px; max-width:56ch;
  font-family:var(--body); font-weight:600; font-size:var(--fs-deck);
  line-height:1.45; letter-spacing:-0.012em; text-transform:none;
}
.band-light .sec-sub{color:#4a4a4a;}
.fine{ margin:20px 0 0; font-size:var(--fs-small); line-height:1.62; color:#5f5f5f; max-width:78ch; }
/* Red bands only. Every cream section also carries .band, so an unscoped
   `.band .fine` painted white text on cream and the copy vanished. */
.band:not(.band-light) .fine{color:#fff;}
.fine a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
/* the four fees */
.glossary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(22px,3vw,40px); margin-top:34px; }
.g-label{ font-family:var(--display); font-weight:900; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; color:var(--gold); }
.g-val{ font-size:var(--fs-small); line-height:1.6; color:rgba(255,255,255,0.9); }

/* reference tables */
.tbl-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(0,0,0,0.10); border-radius:16px; background:#fff;
  margin:0 0 18px;
}
table{border-collapse:collapse; width:100%; min-width:540px; font-size:14.5px;}
th{
  font-family:var(--display); font-weight:900; font-size:11.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:#6b6b6b;
  text-align:left; padding:14px 18px; white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,0.12);
}
td{padding:13px 18px; border-bottom:1px solid rgba(0,0,0,0.07); vertical-align:top;}
tbody tr:last-child td{border-bottom:0;}
th.num,td.num{text-align:right; white-space:nowrap;}
td.num{font-family:var(--display); font-weight:900; letter-spacing:-0.02em;}
.mono{font-family:var(--mono); font-size:13px;}
.tbl-scroll-note{display:none;}  /* phones only, the tables fit above 560px */

.callout{
  border-left:3px solid var(--field);
  background:rgba(224,43,16,0.06);
  border-radius:0 12px 12px 0;
  padding:16px 20px; margin:20px 0 0;
  font-size:var(--fs-small); line-height:1.6; max-width:78ch;
}
.band:not(.band-light) .callout{
  border-left-color:var(--gold);
  background:rgba(255,255,255,0.10);
  color:#fff;
}

/* calculator card */
.worked{
  background:#fff; color:#171717;
  border:1px solid rgba(0,0,0,0.09); border-radius:20px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 18px 50px rgba(0,0,0,0.08);
}
.worked-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
.worked-head h4{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-0.025em;}
.tag{
  font-family:var(--display); font-weight:900; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--field);
  border:1px solid rgba(224,43,16,0.35); border-radius:999px; padding:7px 13px;
}
.calc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px;}
.calc-field{display:flex; flex-direction:column; gap:7px; min-width:0;}
/* Labels wrap to one, two or three lines depending on their length, so a plain
   flex column left every input box at a different height across the row and the
   grid read as crooked. Subgrid pins label, input and hint to shared row tracks
   so the boxes line up whatever the label does. Fields with no hint just leave
   the third track empty. Scoped to .calc-grid: the same .calc-field is reused in
   the opt-in and contact forms, which have a flex parent and no rows to share. */
.calc-grid > .calc-field{display:grid; grid-template-rows:subgrid; grid-row:span 3;}
.calc-field label{
  font-family:var(--display); font-weight:900; font-size:11.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:#5f5f5f;
}
.calc-field input,.calc-field select{
  font-family:var(--body); font-size:16px; font-weight:600; color:#171717;
  width:100%; height:52px; padding:0 14px;
  background:#fff; border:1px solid rgba(0,0,0,0.18); border-radius:12px;
  -webkit-appearance:none; appearance:none;
}
.calc-field select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23171717' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.calc-field input:focus,.calc-field select:focus{outline:2px solid var(--field); outline-offset:1px; border-color:var(--field);}
.calc-hint{font-size:12.5px; line-height:1.45; color:#7a7a7a;}

/* One row, one column per metric, whatever the count. A hardcoded seven-column
   track left the launch budget's six metrics one column short and the container
   background showed through the gap as a grey block. Below 1024 the count is
   pinned per breakpoint instead and the last cell stretches to close the row. */
.margin-result{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px;
  margin-top:28px; background:rgba(0,0,0,0.10);
  border:1px solid rgba(0,0,0,0.10); border-radius:16px; overflow:hidden;
}
/* Labels wrap to one or two lines depending on the cell, which left the values
   sitting at two different heights across a row. Pin them to the cell floor. */
.metric{background:#fff; padding:17px 18px; display:flex; flex-direction:column;}
/* Same fix as .eyebrow, and the grey was under 4.5:1 on white as well. */
.metric-label{
  font-family:var(--display); font-weight:900; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:#6b6b6b; margin-bottom:9px;
}
.metric-val{margin-top:auto;}
.metric-val{font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1; letter-spacing:-0.03em; transition:color .35s ease;}
.metric-val.good{color:var(--good);}
.metric-val.warn{color:var(--warn);}
.metric-val.bad{color:var(--field);}
.metric-val.accent{color:#171717;}

/* Go, caution and stop swap on every keystroke. Without a transition the block
   snaps green to red mid-typing and reads as a glitch rather than a verdict. */
.verdict{margin-top:22px; border:1px solid; border-radius:16px; padding:20px 22px;
  transition:background-color .35s ease, border-color .35s ease;}
.verdict.good{background:rgba(31,122,53,0.07); border-color:rgba(31,122,53,0.30);}
/* Yellow, not the old brown-amber, so the middle verdict reads as a traffic
   light between the green and the red rather than as a second shade of red. */
.verdict.warn{background:rgba(240,190,20,0.20); border-color:rgba(196,150,10,0.55);}
.verdict.bad{background:rgba(224,43,16,0.07); border-color:rgba(224,43,16,0.30);}
.verdict-call{
  margin:0 0 10px; font-family:var(--display); font-weight:900;
  font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:-0.03em; text-transform:lowercase;
  transition:color .35s ease;
}
.verdict.good .verdict-call{color:var(--good);}
.verdict.warn .verdict-call{color:var(--warn);}
.verdict.bad .verdict-call{color:var(--field);}
.verdict-read{margin:0 0 12px; font-size:15px; line-height:1.6;}
.verdict-next{margin:0; font-size:14px; line-height:1.6; color:#5f5f5f;}
.verdict-cta{margin:20px 0 0;}
.calc-flag{display:none;}
.calc-flag.show{display:block; margin:16px 0 0; font-size:14px; line-height:1.6; color:var(--field);}

/* ===== homepage calculator preview ===== */
/* Section 03 ran one column and left the right half of the band empty, so the
   tool got described and never shown. This panel reuses the calculator's own
   result classes and carries the real numbers off its sample SKU. */
.tool-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(26px,4vw,60px); align-items:start;
}
/* The colour matters: the band inherits white body text, and .verdict-read sets
   none of its own, so on a white card it rendered white on near-white. */
.calc-peek{
  background:#fff; color:#171717; border:1px solid rgba(0,0,0,0.09); border-radius:20px;
  padding:clamp(18px,2.2vw,26px); box-shadow:0 18px 50px rgba(0,0,0,0.06);
}
.peek-cap{
  margin:0; font-family:var(--display); font-weight:900; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:#7a7a7a;
}
/* Two per row, not one column per metric: this is a half-width panel, not the
   full-bleed result table the calculator page runs. */
.calc-peek .margin-result{
  grid-auto-flow:row; grid-template-columns:repeat(2,1fr); margin-top:15px;
}
.calc-peek .metric{padding:14px 15px;}
.calc-peek .metric-val{font-size:1.45rem;}
.calc-peek .verdict{margin-top:15px; padding:16px 18px;}
.calc-peek .verdict-call{font-size:1.3rem; margin-bottom:7px;}
.calc-peek .verdict-read{margin:0; font-size:14px;}

/* Phone and tablet only: the fields run a screen or more above the result, so
   the number you are steering by is off-screen while you type. This rides the
   bottom of the window whenever the calculator is in view and the real result
   grid is not. Fixed, not sticky, so it never leaves a hole in the flow.
   The consent banner sits at 9999 and stays on top of it. */
.calc-sticky{display:none;}
@media (max-width:860px){
  .calc-sticky{
    display:flex; align-items:baseline; gap:10px;
    position:fixed; left:12px; right:12px; bottom:12px; z-index:6;
    padding:12px 15px;
    background:#fff; color:#171717;
    border:1px solid rgba(0,0,0,0.14); border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,0.22);
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .calc-sticky.show{opacity:1; transform:none;}
  .calc-sticky-k{
    font-family:var(--display); font-weight:900; font-size:10.5px;
    letter-spacing:0.1em; text-transform:uppercase; color:#7a7a7a;
    margin-right:auto;
  }
  .calc-sticky-v{
    font-family:var(--display); font-weight:900; font-size:1.3rem;
    line-height:1; letter-spacing:-0.03em; transition:color .35s ease;
  }
  .calc-sticky-p{font-size:13px; font-weight:700; transition:color .35s ease;}
  .calc-sticky .good{color:var(--good);}
  .calc-sticky .warn{color:var(--warn);}
  .calc-sticky .bad{color:var(--field);}
}

/* ASIN method */
.steps{counter-reset:step; list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:30px;}
.steps li{counter-increment:step; display:flex; gap:18px;}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:0.08em;
  color:var(--gold); flex:none; width:30px; padding-top:5px;
}
.steps li > div{min-width:0;}
.steps h5{margin:0 0 9px; font-family:var(--display); font-weight:900; font-size:clamp(1.05rem,1.8vw,1.25rem); letter-spacing:-0.025em;}
.steps p{margin:0 0 12px; font-size:var(--fs-body); line-height:1.62; max-width:62ch;}

/* Illustration, not a control — pointer-events off so the fake search bar
   isn't a tappable target and iOS can't focus-zoom it. */
.mockup{background:#fff; color:#171717; border-radius:12px; padding:14px 16px; margin:14px 0 6px; max-width:560px; pointer-events:none;}
.az-search{display:flex; align-items:center; gap:12px;}
.az-logo{font-family:var(--display); font-weight:900; font-size:14px; color:#131921; white-space:nowrap;}
.az-bar{display:flex; flex:1; min-width:0; border:1px solid #d5d9d9; border-radius:8px; overflow:hidden;}
.az-bar input{flex:1; min-width:0; border:0; padding:10px 12px; font-family:var(--body); font-size:16px; background:#fff; color:#171717;}
.az-bar button{border:0; background:#febd69; padding:0 14px; font-size:15px;}
.browser-bar{display:flex; align-items:center; gap:6px; min-width:0;}
.browser-bar .dot{width:9px; height:9px; border-radius:50%; background:#dcdcdc; flex:none;}
.browser-bar .url{
  margin-left:8px; min-width:0; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; color:#5f5f5f;
  background:#f2f2f0; border-radius:999px; padding:8px 13px; white-space:nowrap;
}
.asin{color:var(--field); font-weight:700;}
.mockup-label{margin:0; font-size:12.5px;}

/* email capture */
.optin{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
.optin .calc-field{flex:1; min-width:230px;}
/* The call CTA under the opt-in, on every page. Rule above it so the email form
   still reads as one finished block and the call isn't mistaken for part of it. */
.optin-book{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:28px; padding-top:26px; border-top:1px solid rgba(42,16,8,0.14);
}
.optin-book p{margin:0; font-size:var(--fs-body); font-weight:600; color:var(--ink);}
.band:not(.band-light) .optin-book{border-top-color:rgba(255,255,255,0.28);}
.band:not(.band-light) .optin-book p{color:#fff;}
@media (max-width:560px){
  .optin-book{gap:16px;}
  .optin-book .btn{width:100%;}
}

/* ===== long-form pages: about, contact, privacy, terms =====
   The marketing h2 is 4rem lowercase display type. That is right for a section
   you glance at and wrong for a heading someone reads top to bottom, so the
   scale is reset inside .doc. Everything else on these pages is the same
   furniture as the rest of the site. */
.doc{max-width:80ch;}
.doc h2{
  font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.25; letter-spacing:-0.022em;
  text-transform:none; margin:38px 0 12px;
  border-top:1px solid rgba(0,0,0,0.10); padding-top:26px;
}
.doc > h2:first-child{border-top:0; padding-top:0; margin-top:0;}
.doc p,.doc li{font-size:var(--fs-body); line-height:1.62; color:#4a4a4a; margin:0 0 14px;}
.doc ul{margin:0 0 14px; padding-left:20px;}
.doc li{margin-bottom:8px;}
.doc li:last-child,.doc p:last-child{margin-bottom:0;}
/* site.css has no base a{} rule, so a link with nothing scoped to it renders
   default browser blue on cream. */
.doc a{color:var(--field); text-decoration:underline; text-underline-offset:3px;}
.doc a:hover{color:var(--field-deep);}

/* /terms#results is linked from the footer of every page on the site, so the
   results disclaimer sits above the run of sections rather than inside it. */
.notice{
  background:#fff; border:1px solid rgba(0,0,0,0.10);
  border-left:4px solid var(--field); border-radius:0 18px 18px 0;
  padding:clamp(20px,3vw,32px); margin:0 0 10px;
  box-shadow:0 12px 34px rgba(0,0,0,0.06);
  scroll-margin-top:24px;
}
.notice h2{margin:0 0 14px; border-top:0; padding-top:0;}

/* Contact form. The fields themselves are .calc-field, same as the calculators;
   only the stack and the textarea need anything new. */
.doc-form{display:flex; flex-direction:column; gap:18px; max-width:520px; margin:30px 0 0;}
.doc-form textarea{
  font-family:var(--body); font-size:16px; color:#171717;
  width:100%; min-height:150px; padding:13px 14px; resize:vertical;
  background:#fff; border:1px solid rgba(0,0,0,0.18); border-radius:12px;
}
.doc-form textarea:focus{outline:2px solid var(--field); outline-offset:1px; border-color:var(--field);}
.doc-form .btn{align-self:flex-start;}
.doc-form .fine{margin:0; font-size:13.5px; max-width:none;}

/* About page: portrait beside the copy. Grid, not float — .doc h2 carries a
   border-top and a block box's border runs under a float, so the rule would
   come out from behind the photo. Not sticky either: body{overflow-x:hidden}
   makes a scroll container that breaks position:sticky on descendants. */
.about-lead{display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(26px,4vw,52px); align-items:start;}
.portrait{margin:0;}
.portrait img{
  display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:20px; border:4px solid #fff;
  box-shadow:0 18px 44px rgba(0,0,0,0.16);
}
.portrait figcaption{margin-top:16px; font-size:14px; color:#6b6b6b;}
.portrait figcaption b{
  display:block; font-family:var(--display); font-weight:900; font-size:17px;
  letter-spacing:-0.02em; color:#171717;
}
@media (max-width:860px){
  .about-lead{grid-template-columns:minmax(0,1fr); gap:28px;}
  .portrait{max-width:260px;}
}

/* footer */
.legal{
  background:var(--field-deep);
  padding:36px clamp(18px,3.4vw,44px) 46px;
  font-size:13px; line-height:1.65; color:rgba(255,255,255,0.86);
}
.legal .wrap{max-width:1180px;}
.legal p{margin:0; max-width:96ch;}
.legal nav{margin-top:10px; display:flex; flex-wrap:wrap; gap:0 18px;}
.legal a{display:inline-block; position:relative; padding:12px 0; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.35);}
/* Short words like "Home" leave a 35px hit area. Widen the target with a
   pseudo-element so the underline still hugs the word. */
.legal a::after{content:''; position:absolute; inset:0 -7px;}
.legal a:hover{border-bottom-color:#fff;}

/* ===== responsive ===== */
/* The card wants 400px and the headline wants its own measure; below this the two
   start fighting, so the card drops under the copy while the globe stays behind. */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr);}
  /* Stacked it takes the full column. Capped and centred it sat 18px inside
     the measure everything else on the page shares, which reads as a slip. */
  .helps{grid-column:1; grid-row:auto; max-width:none; margin:0;}
  /* Stacked, row two has no slack to take, so the top padding that closes the
     desktop gap is just extra air between the headline and the kicker. */
  .hero .row-bottom{padding-top:0;}
}
@media (max-width:1080px){
  .globe-wrap{width:min(560px,84vw);}
}
@media (max-width:860px){
  /* Brand and socials share row one, the nav links take row two. */
  .nav{gap:10px 8px;}
  .mark{flex:1 1 auto;}
  .nav-end{margin-left:auto; gap:10px;}
  .pills{order:3; width:100%;}

  /* Flatten both hero rows into one column. .intro and .headline dissolve too,
     so the headline can sit above its own supporting line on a phone. */
  .hero{display:flex; flex-direction:column; gap:22px; padding-top:24px;}
  .row-top, .row-bottom, .intro, .headline{display:contents;}
  .hero .eyebrow{order:1; margin-bottom:0;}
  /* No cap here: the two sentences are already blocks, so the measure is the
     viewport and each one wraps on its own. A ch cap only forced a break in the
     middle of a sentence that had room. */
  .hero .lede{order:2; max-width:none; margin-bottom:0;}
  .hero .kicker{order:3; margin-bottom:0;}
  .hero .cta-row{order:4;}
  .globe-layer{order:5; position:relative; inset:auto; top:auto; margin:2px 0;}
  /* Below the globe now, on the width the phone gives it. */
  .helps{order:7;}
  .hero .eyebrow, .hero .lede, .hero .kicker, .hero .cta-row, .helps{position:relative; z-index:2;}
  .globe-wrap{width:min(72vw,420px);}
  .about-wrap, .tool-grid{grid-template-columns:1fr;}
  /* One column, so the card follows the prose instead of spanning beside it. */
  .about-wrap .proof{grid-column:1; grid-row:auto; margin-top:6px;}
  .btn{width:100%; padding:0 24px;}
  .cta-row .btn{width:auto; min-width:220px;}
  /* The button goes full-bleed here, so the kicker wraps under it rather than
     beside it. 24ch was sized for a narrow column next to a button; drop the
     cap and let it use the row. */
  .cta-row{gap:14px;}
  .kicker{max-width:none;}
}
/* Padding is the first thing to give on a phone: the copy keeps its size, the
   frame around it gets thinner. */
@media (max-width:640px){
  .helps{padding:12px;}
  .helps-list li{padding:12px 14px;}
}
@media (max-width:560px){
  /* Row one is glyph + socials, then the page links, then the two CTAs on a row
     of their own. .nav-end dissolves so its four children can be ordered
     individually against .mark and .pills. Email Eli and Book a call sit last
     and split that row evenly: left to wrap on their own one of them lands
     alone alongside the socials and the other is orphaned below it.
     The wordmark rides along at a smaller size down to 450px, where it costs a
     nav row and gets hidden instead. */
  .mark b{font-size:16px;}
  .mark{flex:0 0 auto; margin-right:auto; min-width:0;}
  .nav-end{display:contents;}
  .icon-link{order:1;}
  .nav-end .pill{order:3; flex:1 1 0; min-width:0;}
  /* Five links measure 381px at the smallest padding that still leaves a 44px tap
     target, and the row only has 339px at a 375px viewport, so a wrapping flex row
     always leaves the fifth link hanging on its own. Three equal columns instead:
     two tidy rows sharing the same edges as everything else on the page. */
  .pills{
    order:2; width:100%; flex:0 0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  }
  .nav{column-gap:6px;}
  .pill{padding:0 8px; font-size:11px; letter-spacing:0.05em; justify-content:center;}

  .eyebrow{letter-spacing:0.14em;}

  /* The wide reference tables scroll inside .tbl-wrap. Say so, and give the
     cells back some width by trimming the gutters. */
  .tbl-wrap{position:relative;}
  .tbl-scroll-note{
    display:block;
    /* Top margin so the note separates from a .fine paragraph, which has no
       bottom margin. Collapses against .sec-sub's larger 30px, so no effect there. */
    margin:22px 0 8px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
    font-family:var(--display); font-weight:900; color:#8a8a8a;
  }
  th{padding:12px 12px;}
  td{padding:11px 12px;}

  .meta-list .k{display:block; min-width:0; margin-bottom:1px;}
  .meta-list li{padding:9px 0;}

  .steps li{gap:12px;}
  .steps li::before{width:24px;}

  /* The whole point of the URL mockup is the red ASIN in the middle of the
     string, and at 390px only the first half of it fits before the pill clips.
     Dots on their own row, URL across the full width, wrapping on any character. */
  .browser-bar{flex-wrap:wrap;}
  .browser-bar .url{
    flex:1 0 100%; margin-left:0; overflow-x:visible;
    white-space:normal; word-break:break-all; line-height:1.5;
  }
  .legal nav{gap:0 16px;}
}
/* ===== start here, responsive ===== */
@media (max-width:1100px){
  .start-grid{grid-template-columns:1fr; gap:40px;}
  .reply-card{width:100%; max-width:520px;}
}
@media (max-width:640px){
  .reply-card{max-width:none;}
}
@media (max-width:640px){
  .reply-card{padding:26px 20px; border-radius:18px; box-shadow:0 14px 30px -18px rgba(60,10,0,0.3);}
  .start-sub{max-width:none;}
  .brief li{grid-template-columns:26px 1fr; padding:14px 0;}
  .brief span{font-size:17px;}
  /* At 375 the address and its label will not share a line. Stacked the row is
     about 52px, so the 44px tap target comes for free. */
  .reply-links a{flex-direction:column; align-items:flex-start; gap:6px; padding:14px 0;}
  .rl-v{font-size:15px; word-break:break-word;}
  .reply-btn{font-size:13px;}
}

/* ===== split section, responsive ===== */
/* One column below 1100. Argument first, checklist second. Stacked, a left rule
   points nowhere and the two halves merge into one undifferentiated red block,
   so the divider moves to the top edge. Swapped at 1100, not 640, because 1100
   is where the stack actually happens. */
@media (max-width:1100px){
  .split{grid-template-columns:1fr;}
  .split-r{border-left:0; border-top:1px solid rgba(255,255,255,0.22);}
}
@media (max-width:1100px){
  /* Stacked, the horizontal padding is the page gutter on .split and the panels
     only carry the vertical rhythm. */
  .split-l{padding:clamp(48px,7vw,80px) 0 clamp(40px,5vw,56px);}
  .split-r{padding:clamp(40px,5vw,56px) 0 clamp(48px,7vw,80px);}
}
@media (max-width:640px){
  /* Stacked, the panel is content height, so space-between has nothing to
     distribute against and margin-top:auto resolves to zero. Fixed gaps. */
  .split-l .split-inner{justify-content:flex-start; gap:28px;}
  .split-sub{max-width:none;}
  .split-foot{padding-top:24px; gap:16px;}
  .split-lead{font-size:18px;}
  .split-support{font-size:14.5px;}
  .checks li{padding:16px 0;}
  .checks span{font-size:16.5px;}
  .check-cta{margin-top:24px;}
}
@media (max-width:480px){ .check-head span{display:none;} }

/* Below 450 the wordmark pushes the nav from four rows to five. Hide it rather
   than remove it: the glyph still links home and that link needs its name. */
@media (max-width:450px){
  .mark b{position:absolute; width:1px; height:1px; overflow:hidden;
          clip:rect(0 0 0 0); white-space:nowrap;}
}
/* Contact links are 19px of text, too small to hit with a thumb. Grow the hit
   area to 44px with a transparent overlay so the link still looks the same.
   Above 560px the label sits inline and the rows tighten to ~31px, so the rows
   need padding too or two overlays end up on top of each other and the lower
   link steals taps from the one above it. */
@media (max-width:1024px){
  .meta-list a{position:relative; display:inline-block;}
  .meta-list a::after{content:''; position:absolute; left:0; right:0;
    top:50%; transform:translateY(-50%); height:44px;}
}
@media (min-width:561px) and (max-width:1024px){
  .meta-list li{padding:14px 0;}
  /* Four across. The last cell fills whatever is left of its row, wherever it
     lands: the calculator's seven metrics end in column three, the launch
     budget's six end in column two. A single 3 / -1 rule was written for seven
     and punched a hole in the six-metric grid. */
  .margin-result{grid-auto-flow:row; grid-template-columns:repeat(4,1fr);}
  .metric:last-child:nth-child(4n+1){grid-column:1 / -1;}
  .metric:last-child:nth-child(4n+2){grid-column:2 / -1;}
  .metric:last-child:nth-child(4n+3){grid-column:3 / -1;}
}
@media (max-width:560px){
  .margin-result{grid-auto-flow:row; grid-template-columns:repeat(2,1fr);}
  .metric{padding:15px 14px;}
  /* Same reasoning: only stretch the last cell when the count is odd. */
  .metric:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .verdict,.verdict-call,.metric-val,.calc-sticky,.calc-sticky-v,.calc-sticky-p{transition:none;}
  .calc-sticky{transform:none;}
}

/* No globe on interior pages below 980px: the hero fills the column and there is
   no dead space to fill. Last in the file so it beats the .globe-layer reflow at
   860px, which is for the homepage globe only. */
@media (max-width:980px){
  .stage > .globe-side{display:none;}
}

/* Tool CTAs. Two skins for the same reason every other component here has two:
   orange on the cream bands, and on the red field it goes to the lighter apricot
   from .check-btn, since orange on orange-red is not a shape.
   Since every CTA went orange the light-band skin is the same fill .band-light
   .btn already gives; it stays because the red-band override below needs a
   selector to sit last, and this keeps both skins readable in one place. */
.btn.btn-tool{background:var(--tool); color:var(--tool-ink);}
.btn.btn-tool:hover{background:var(--tool-hover);}
.stage .btn.btn-tool, .band:not(.band-light) .btn.btn-tool{background:#FFB47A; color:#3B1405;}
.stage .btn.btn-tool:hover, .band:not(.band-light) .btn.btn-tool:hover{background:#FFA25E;}

/* Decorative status dot next to the reply time. Pseudo-element so it never
   reaches a screen reader as a stray character. */
.reply-live::before{
  content:''; display:inline-block; width:9px; height:9px; margin-right:9px;
  border-radius:50%; background:#3ddc7f; vertical-align:middle;
  box-shadow:0 0 0 3px rgba(61,220,127,0.25);
}

/* Calculator walkthrough, section 01. The source is a 9:16 reel, so it is
   capped rather than run at the card width: full width portrait would stand
   taller than the viewport on a desktop and push the tool itself off screen.
   min() keeps the same block from overflowing a small phone. */
.demo{margin:0 0 clamp(26px,3vw,38px); display:flex; flex-direction:column; align-items:center; gap:12px;}
.demo video{
  display:block; width:min(320px,80vw); height:auto; aspect-ratio:9/16;
  border-radius:18px; background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,0.16);
}
.demo figcaption{font-size:var(--fs-small); line-height:1.45; color:var(--ink-soft); text-align:center;}