/* ═══════════════════════════════════════════════════════════════
   Free 12-Week Plan — Coach Jovanni
   One job: make the offer obvious and get the email.
   Bone paper, graphite ink, one deep-pine signal (the green from the
   nutrition poster in his own gym). Archivo on its width axis for the
   display — expanded, not the condensed face every gym site uses —
   over IBM Plex Mono for labels and figures.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:      #F1EFEA;
  --paper-deep: #E7E4DC;
  --paper-edge: #DCD8CE;
  --ink:        #17191B;
  --ink-soft:   #55595D;
  --ink-faint:  #63686C;   /* 4.9:1 on --paper — every mono micro-label uses this */
  --rule:       #D3CEC4;
  --signal:     #1D5943;
  --signal-ink: #14402F;
  --signal-pale:#CBDCD2;
  --bad:        #8C3A2C;

  --t-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --w-display: 124;
  --w-body:    100;

  /* one spacing scale */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem;  --s6:3rem;   --s7:4.5rem;

  --gut:1.5rem;
  --maxw:64rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--t-sans);
  font-variation-settings:"wdth" var(--w-body);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

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

/* ── mono atoms ─────────────────────────────────────────────── */

.eyebrow,.section-label,.creds,.masthead-meta,.trust,.cover-tag,
.cover-foot,.cover-note,.case-meta,figcaption{
  font-family:var(--t-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.section-label{
  display:block;
  margin:0 0 var(--s4);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule);
}

/* ── masthead ───────────────────────────────────────────────── */

.masthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s4) var(--gut) 0;
}
.wordmark{
  font-variation-settings:"wdth" var(--w-display),"wght" 600;
  font-size:.9375rem; letter-spacing:.01em;
}

/* ── hero: offer left, cover right ──────────────────────────── */

/* mobile reads: what it is → what it looks like → what's in it + form.
   desktop puts the cover alongside, spanning both. */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s6) var(--gut) var(--s7);
  display:grid; gap:var(--s4);
  grid-template-areas:"head" "cover" "body";
}
.offer-head{ grid-area:head; }
.cover-wrap,
.hero-aside{ grid-area:cover; margin:var(--s2) 0; }
.offer-body{ grid-area:body; }

@media (min-width:56rem){
  .hero{
    grid-template-columns:1fr 19rem;
    grid-template-areas:"head cover" "body cover";
    column-gap:var(--s7); row-gap:var(--s4);
    align-items:start;
  }
  .cover-wrap,
  .hero-aside{ margin:0; position:sticky; top:var(--s4); }
}

.eyebrow{
  display:inline-block;
  margin:0 0 var(--s3);
  padding:.3rem .55rem;
  background:var(--signal); color:var(--paper);
  letter-spacing:.11em;
}

h1{
  margin:0;
  font-variation-settings:"wdth" var(--w-display),"wght" 600;
  font-size:clamp(2.25rem,6vw,3.75rem);
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.lede{
  margin:var(--s4) 0 0;
  max-width:32rem;
  font-size:clamp(1.125rem,2.5vw,1.3125rem);
  line-height:1.45;
  color:var(--ink-soft);
}
.lede b{ color:var(--ink); font-variation-settings:"wdth" 100,"wght" 600; }

.ticks{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:grid; gap:var(--s2);
  max-width:32rem;
}
.ticks li{
  position:relative; padding-left:1.5rem;
  font-size:1rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; background:var(--signal);
}

/* ── the form: the only thing to do on this page ────────────── */

.grab{ margin:var(--s5) 0 0; max-width:32rem; }
.grab-fields{ display:grid; gap:var(--s2); }
@media (min-width:34rem){
  .grab-fields{ grid-template-columns:1fr auto; align-items:end; }
}

.field label{
  display:block; margin-bottom:.4rem;
  font-family:var(--t-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.field input{
  width:100%;
  padding:1.0625rem 1rem;
  background:var(--paper);
  border:1px solid var(--ink);
  color:var(--ink);
  font-family:var(--t-sans); font-size:1.0625rem;
  transition:border-color .16s var(--ease);
}
.field input::placeholder{ color:var(--ink-faint); }
.field input.is-bad{ border-color:var(--bad); }

.btn{
  appearance:none; cursor:pointer;
  padding:1.0625rem 1.75rem;
  background:var(--signal); color:var(--paper);
  border:1px solid var(--signal);
  font-family:var(--t-sans);
  font-variation-settings:"wdth" 104,"wght" 600;
  font-size:.9375rem;
  letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{ background:var(--signal-ink); border-color:var(--signal-ink); }

.err{
  margin:var(--s2) 0 0;
  font-size:.9375rem; color:var(--bad);
}
.trust{
  margin:var(--s2) 0 0;
  text-transform:none; letter-spacing:.04em;
}

.sent{ margin:var(--s5) 0 0; max-width:32rem; }
.sent h2{
  margin:0;
  font-variation-settings:"wdth" var(--w-display),"wght" 600;
  font-size:clamp(1.5rem,3.5vw,2rem);
  letter-spacing:-.02em;
}
.sent p{ margin:var(--s2) 0 0; color:var(--ink-soft); }

/* ── the cover: what you actually get ───────────────────────── */

.cover{
  background:var(--ink);
  color:var(--paper);
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s4);
  aspect-ratio:3/4;
  max-width:19rem;
}
@media (max-width:56rem){ .cover{ max-width:14rem; } }

.cover-tag{
  display:inline-block;
  color:var(--signal-pale);
}
.cover-title{
  margin:var(--s2) 0 0;
  font-variation-settings:"wdth" var(--w-display),"wght" 700;
  font-size:clamp(1.5rem,4.5vw,1.875rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.cover-sub{
  margin:var(--s2) 0 0;
  font-size:.875rem; line-height:1.4;
  color:#A8ACAE;
}

.cover-grid{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
}
.cover-grid i{ display:block; aspect-ratio:1; background:#2C2F31; }
.cover-grid i.on{ background:var(--signal); }

.cover-foot{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding-top:var(--s2);
  border-top:1px solid #2C2F31;
  color:#8A8E90;
  font-size:.5625rem;
}
.cover-note{ margin:var(--s2) 0 0; text-transform:none; letter-spacing:.04em; }

/* ── who wrote it ───────────────────────────────────────────── */

.who,.proof,.faq,.closer{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) var(--s7);
}

.who{ display:grid; gap:var(--s4); }
@media (min-width:44rem){
  .who{ grid-template-columns:16rem 1fr; gap:var(--s5); align-items:start; }
}
.coach{ margin:0; max-width:16rem; }
.coach img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--paper-edge);
}
.who-body{ margin:0; max-width:36rem; }
.creds{
  margin:var(--s3) 0 0;
  padding-top:var(--s2);
  border-top:1px solid var(--rule);
  line-height:1.9;
}

/* ── proof ──────────────────────────────────────────────────── */

.proof-grid{ display:grid; gap:var(--s5); }
@media (min-width:44rem){ .proof-grid{ grid-template-columns:1fr 1fr; } }

.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); }
.pair figure{ margin:0; }
.pair img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--paper-edge);
}
.pair figcaption{ margin-top:.5rem; }

.case-stat{
  margin:var(--s3) 0 0;
  font-variation-settings:"wdth" var(--w-display),"wght" 600;
  font-size:1.375rem; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.case-meta{ margin:.25rem 0 0; }

.proof-note{
  margin:var(--s4) 0 0;
  padding-top:var(--s3);
  border-top:1px solid var(--rule);
  max-width:42rem;
  font-size:.9375rem; color:var(--ink-soft);
}

/* ── faq ────────────────────────────────────────────────────── */

.faq dl{ margin:0; display:grid; gap:var(--s4); }
@media (min-width:44rem){ .faq dl{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); } }
.faq dt{
  font-variation-settings:"wdth" 104,"wght" 600;
  font-size:1.0625rem; margin-bottom:.25rem;
}
.faq dd{ margin:0; color:var(--ink-soft); }

/* ── closer ─────────────────────────────────────────────────── */

.closer{
  padding-top:var(--s6);
  border-top:1px solid var(--rule);
}
.closer h2{
  margin:0;
  font-variation-settings:"wdth" var(--w-display),"wght" 600;
  font-size:clamp(1.75rem,4.5vw,2.5rem);
  letter-spacing:-.02em;
}
.closer-sub{ margin:var(--s2) 0 0; color:var(--ink-soft); }

/* ── footer ─────────────────────────────────────────────────── */

.foot{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s4) var(--gut) var(--s6);
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s5);
  justify-content:space-between;
  font-family:var(--t-mono); font-size:.6875rem;
  letter-spacing:.04em; color:var(--ink-faint);
}

/* ── sticky mobile CTA ──────────────────────────────────────── */

.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:none;
  padding:1rem;
  background:var(--signal); color:var(--paper);
  text-align:center; text-decoration:none;
  font-variation-settings:"wdth" 104,"wght" 600;
  font-size:.9375rem; letter-spacing:.05em; text-transform:uppercase;
}
@media (max-width:44rem){
  .cta-bar:not([hidden]){ display:block; }
  body{ padding-bottom:3.5rem; }
}

/* ═══════════════  COACHING PAGE  ═══════════════
   Same system. Only the pieces the freebie page did not need. */

.masthead-link{
  font-family:var(--t-mono);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding:.4rem 0 .3rem;   /* keeps the target above 24px */
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.masthead-link:hover{ color:var(--signal); border-color:var(--signal); }

.lede-2{
  margin:var(--s2) 0 0;
  max-width:32rem;
  font-size:1.0625rem;
  color:var(--ink-soft);
}

.hero-portrait{ margin:0; max-width:19rem; }
@media (max-width:56rem){ .hero-portrait{ max-width:14rem; } }
.hero-portrait img{
  width:100%;
  aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--paper-edge);
}

/* the booking form: three fields stacked, full-width button.
   The hero is tighter than the freebie page's because this form is
   three fields, not one — the button has to stay near the fold. */
.book{ display:grid; gap:var(--s2); max-width:26rem; }
.book .field{ margin:0; }
.btn.is-wide{ width:100%; }

.coaching .hero{ padding-top:var(--s4); }
.coaching h1{ font-size:clamp(2rem,4.6vw,3rem); }
.coaching .eyebrow{ margin-bottom:var(--s2); }
.coaching .lede{ margin-top:var(--s3); }
.coaching .lede-2{ margin-top:var(--s1); }
.coaching .ticks{ margin-top:var(--s2); gap:.5rem; }
.coaching .offer-body{ margin-top:calc(var(--s2) * -1); }
.coaching .book .field input{ padding:1rem; }

.radio-set{
  margin:0; padding:0; border:0;
  min-inline-size:0;   /* fieldset defaults would break the grid */
}
.radio-set legend{
  padding:0; margin-bottom:.4rem;
  font-family:var(--t-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.radio-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); }
.radio{ position:relative; display:block; cursor:pointer; }
.radio input{
  position:absolute; opacity:0;
  width:100%; height:100%; margin:0; cursor:pointer;
}
.radio span{
  display:block;
  padding:.9375rem .75rem;
  background:var(--paper);
  border:1px solid var(--ink);
  text-align:center;
  font-size:.9375rem;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.radio input:checked + span{ background:var(--signal); border-color:var(--signal); color:var(--paper); }
.radio input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:3px; }
.radio-set.is-bad span{ border-color:var(--bad); }

/* who, without a photo beside it */
.who-solo{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) var(--s7);
}

/* what clients say */
.says{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) var(--s7);
}
.example-note{
  margin:calc(var(--s4) * -1) 0 var(--s4);
  font-family:var(--t-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--bad);
}
.quotes{ display:grid; gap:var(--s4); }
@media (min-width:52rem){ .quotes{ grid-template-columns:repeat(3,1fr); gap:var(--s5); } }

.quote{
  margin:0; padding-top:var(--s3);
  border-top:1px solid var(--rule);
}
.quote p{
  margin:0;
  font-size:1.0625rem; line-height:1.5;
  text-wrap:pretty;
}
.quote cite{
  display:block; margin-top:var(--s2);
  font-family:var(--t-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  font-style:normal; color:var(--ink-faint);
}

/* how it works — a plain ordered list, no display numerals */
.how{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) var(--s7);
}
.steps{
  margin:0; padding-left:1.25rem;
  display:grid; gap:var(--s3);
  max-width:44rem;
}
.steps li{ padding-left:.25rem; color:var(--ink-soft); }
.steps li::marker{
  font-family:var(--t-mono); font-size:.875rem; color:var(--ink-faint);
}
.steps strong{
  color:var(--ink);
  font-variation-settings:"wdth" 104,"wght" 600;
}
.how-link{ margin:var(--s4) 0 0; }
.how-link a{
  display:inline-block;
  font-family:var(--t-mono); font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--signal); text-decoration:none;
  border-bottom:1px solid var(--signal-pale);
  padding:.4rem 0 .3rem;
}
.how-link a:hover{ border-bottom-color:var(--signal); }

/* the freebie page's FAQ link to this one */
.faq dd a{ color:var(--signal); text-underline-offset:.2em; }

/* ── motion off ─────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}