/* =====================================================================
   THE STOREFRONT HOMEPAGE.

   Loaded AFTER site.css and only by index.html. Everything here is
   either a component the sales page does not have (the nav, the hero,
   the programs strip) or a small arrangement of components it does.

   WHY A SECOND FILE RATHER THAN MORE OF site.css. /formula is the one
   page that must not move, and site.css is its stylesheet. Anything
   added there can reach it by accident through a shared class. Nothing
   in this file is loaded by /formula at all, so the blast radius of a
   mistake here is one page.

   The tokens all come from site.css: --ink, --paper, --pink, --acid,
   --line, --radius-card, --f-hero, --f-sans, --f-type. No new colours
   and no new type faces are invented here.
   ===================================================================== */

/* ── NAV ──────────────────────────────────────────────────────────────
   Fixed, 2.5px rule under it, same translucent cream as the old
   homepage so the brand does not change shape between pages. */
/* ── BAND COLOUR ─────────────────────────────────────────────────────
   site.css ships band--alt, band--ink, band--pink and band--cyan. It has
   no mint modifier, because /formula gets its mint from a page specific
   class rather than a reusable one. This adds the missing member of the
   set so the storefront can use the full palette through modifiers
   instead of inline styles.

   It lives here rather than in site.css deliberately: /formula loads
   site.css, and that page is finished. */
.band--mint{ background:var(--mint); }
/* The hero's own band. site.css has no yellow modifier for the same
   reason it had no mint one: /formula never needed either. */
.band--yellow{ background:var(--yellow); }
.band--yellow .eyebrow{ background:var(--paper); }

/* ── .cut OVER MORE THAN ONE LINE ────────────────────────────────────
   site.css sets .cut to inline-block, which is right for the single
   words /formula uses it on. Over a phrase that wraps, an inline-block
   becomes one unbreakable box: it took the full measure and painted a
   solid rectangle behind four lines instead of hugging the words.

   display:inline with box-decoration-break:clone is the fix. Each line
   fragment gets its own padding, fill and hard shadow, so a wrapped
   highlight reads as several cut strips laid over each other, which is
   closer to the ransom-note idea than one rectangle was.

   Modifier rather than a change to .cut, because /formula loads
   site.css and that page is finished. */
/* ── .sr-only, WHICH WAS NEVER DEFINED ───────────────────────────────
   index.html has carried class="sr-only" on the quote section's
   heading since the storefront was built, and no stylesheet on the
   site declares the class. So the heading rendered: "The point" sat
   visibly above the quote at 1296 by 40, which is how a heading meant
   only for a screen reader ends up as body copy on the page.

   The clip-path pair is the standard version. Width and height of 1
   rather than 0 because a zero-sized element is dropped from the
   accessibility tree by some screen readers, which would lose the
   heading entirely and defeat the point of having it. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.cut--flow{
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Matching the rule site.css already has for its pink and cyan bands:
   an acid eyebrow on a coloured band loses its separation, so it goes
   cream and the border does the work. */
.band--mint .eyebrow{ background:var(--paper); }

/* The nav lives in nav.css now, one file for all eight pages. It used to
   be here, which is why /in-person rendered it as two lines of body text:
   that page loads neither this file nor site.css. */

/* The bar declares its own height in nav.css; this clears it. */
.sf-top{ padding-top:calc(var(--nav-h) + clamp(28px,5vw,64px)); }

/* ── HERO ─────────────────────────────────────────────────────────────
   Photo and words side by side above 860px, stacked below, photo
   first on a phone because it is the thing that says who this is. */
.sfhero__grid{
  display:grid; gap:clamp(22px,3.5vw,48px);
  grid-template-columns:1fr; align-items:center;
}
@media(min-width:860px){
  .sfhero__grid{ grid-template-columns:1fr 1fr; }
  /* Words left, photo right, regardless of DOM order. */
  .sfhero__copy{ order:1; } .sfhero__media{ order:2; }
}
.sfhero__media img,
.sfhero__media .ph{
  display:block; width:100%; height:auto;
  border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink);
}
/* ONE WORD. Kept because it is the treatment the wordmark takes, and
   taking it out would mean rediscovering it the next time a page opens
   on a single word. Nothing uses it today. */
.sfhero__word{
  font-family:var(--f-hero); font-weight:400;
  font-size:clamp(2.6rem,9vw,5.2rem); line-height:.95;
  letter-spacing:-.01em; text-transform:uppercase;
  margin:0 0 .3em;
}

/* A SENTENCE. Anton, which is the brand's headline face, and smaller
   than .sfhero__word because nine words are not one. text-wrap:balance
   so the lines come out even rather than leaving one orphan.

   THE 4rem CEILING IS SET AGAINST THE SENTENCE BELOW IT, not picked.
   At 3.5rem the headline came out 941px and the sentence under it
   1049px, so the smaller text was the wider block and the hero read
   bottom heavy. 4rem puts the headline at 1075 and it leads again. */
.sfhero__head{
  font-family:var(--f-black); font-weight:400;
  font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.02;
  letter-spacing:-.02em; text-transform:uppercase;
  text-wrap:balance; max-width:18ch;
  margin:0 0 .5em;
}
.sfhero__line{
  font-size:clamp(1rem,1.7vw,1.22rem); line-height:1.5;
  max-width:46ch; margin:0 0 1.4em;
}

/* ── THE CENTRED HERO ─────────────────────────────────────────────────
   A MODIFIER, NOT A CHANGE TO .sfhero__grid, because /coaching uses
   that grid too and its hero is still words beside a photograph.

   Everything stacks and centres: headline, sentence, button, then the
   photograph underneath. The 860px rule above turns the grid into two
   columns, so this has to turn it back at the same breakpoint or the
   desktop layout wins.

   THE PHOTO IS CAPPED WELL BELOW THE CONTAINER. .wrap runs to 1400px,
   and a 3:2 photograph that wide is 933px tall, which would push the
   first section below it clean off the fold on most laptops. 760 keeps
   it about 507 and the whole hero inside one screen. */
.sfhero__grid--center{ grid-template-columns:1fr; justify-items:center; text-align:center; }
@media(min-width:860px){
  .sfhero__grid--center{ grid-template-columns:1fr; }
  /* the side-by-side order rules have nothing to order here */
  .sfhero__grid--center .sfhero__copy,
  .sfhero__grid--center .sfhero__media{ order:initial; }
}
.sfhero__grid--center .sfhero__copy{ max-width:100%; }
/* TWO LINES EACH, WHICH IS A MEASURE DECISION NOT A SIZE ONE. The
   headline is 60 characters and the sentence is 152, so the only thing
   standing between them and two lines was how narrow they were allowed
   to be. 34ch and 78ch are the widths at which each breaks into two
   even lines at desktop sizes, with text-wrap:balance evening them.

   THE SENTENCE IS NOW WIDER THAN A COMFORTABLE READING MEASURE, which
   is usually 45 to 75 characters, and that is the trade being made
   knowingly: two lines was the ask. It is one sentence under a
   headline rather than a paragraph anyone has to read down, so the
   cost is small.

   A PHONE STILL WRAPS FURTHER AND MUST. 60 characters of Anton at 32px
   does not fit in 375px in two lines without shrinking the headline to
   the size of the body text. */
.sfhero__grid--center .sfhero__head{ max-width:34ch; margin-inline:auto; }
/* THE SENTENCE MUST NOT BE WIDER THAN THE HEADLINE. 78ch keeps it on
   two lines, and on a wide screen 78ch of 19.5px text came out 1049px
   against a headline of 941, so the smaller type was the wider block.
   The px cap is what stops that without pushing the sentence onto a
   third line. */
.sfhero__grid--center .sfhero__line{ max-width:min(78ch,920px); margin-inline:auto; }
.sfhero__grid--center .sfhero__media{ width:100%; max-width:900px; }

/* ── THE WHOLE SECTION HAS TO FIT ONE SCREEN ──────────────────────────
   Measured before changing anything: at 1440x900 the section ran 1130
   tall against a 900 viewport, and 622 of that was everything except
   the photograph. So the photograph had a budget of 278 and was taking
   508, and no cap on its own would have fixed that without making it
   tiny. The space had to come from both ends.

   FIRST, THE SPACING COMES IN. Each number below is the smallest that
   still reads as deliberate rather than cramped, and together they
   return about 120px:
     padding-top     the nav is 83 tall and fixed, so the clearance
                     cannot go below it. The breathing room ON TOP of
                     the nav is what shrinks, 64 to 24.
     padding-bottom  96 to 48.
     grid gap        48 to 28.
     the two margins under the headline and the sentence.

   SECOND, THE PHOTOGRAPH IS CAPPED AGAINST THE VIEWPORT rather than at
   a fixed width, so it takes whatever is left instead of a number
   guessed once. width:auto is load bearing: .sfhero__media img sets
   width:100%, and a max-height against a 100% width distorts the
   picture instead of scaling it.

   dvh rather than vh because on a phone browser vh is the tallest the
   viewport ever gets, which is the one it is not while the address bar
   is showing.

   DESKTOP ONLY. The stacked phone hero already fits, 698 against 812,
   and capping there would shrink the photograph for no reason. */
/* A CLASS ON THE SECTION RATHER THAN :has() ON IT. :has() would work,
   it is supported everywhere this site cares about, and it would also
   make the section's padding depend on something nested inside it.
   One class says the same thing and cannot be broken by moving the
   grid. */
.sf-top--tight{
  padding-top:calc(var(--nav-h) + clamp(16px,2vw,24px));
  padding-bottom:clamp(32px,4vw,48px);
}
.sfhero__grid--center{ gap:28px; }
.sfhero__grid--center .sfhero__head{ margin-bottom:.34em; }
.sfhero__grid--center .sfhero__line{ margin-bottom:.9em; }

@media(min-width:860px){
  .sfhero__grid--center .sfhero__media img{
    width:auto; height:auto;
    max-width:min(100%,900px);
    /* the floor stops a short window from erasing the picture */
    max-height:max(240px, calc(100dvh - 480px));
    /* CENTRING THE PICTURE INSIDE ITS OWN BOX, which is not the same
       as centring the box. The grid centres .sfhero__media, and while
       the picture filled that box the two looked identical. The moment
       the height cap makes the picture narrower than its box it falls
       to the box's left edge: measured at 1680x900 it was 598 wide in
       a 760 box and sat 81px left of the page's centre. */
    margin-inline:auto;
  }
}

/* ── SHARED SECTION FURNITURE ─────────────────────────────────────────── */
.sf-lead{ max-width:62ch; }
.sf-lead p{ font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.6; margin:0 0 1em; }

/* ── THE DISCIPLINE LINE ──────────────────────────────────────────────
   Two sentences, the second carrying the weight. The strike-through on
   "discipline problem" is the same device the sales page uses on the
   word discipline, which is the line Ana named as the register. */
/* THE SELECTOR CARRIES .sf-lead FOR A REASON, AND IT IS A BUG FIX.
   .sf-lead p sets the body size and scores 0,1,1. A bare .sf-claim
   scores 0,1,0, so inside a .sf-lead the body rule won and this line
   rendered at 17.6px instead of the 46.4px written right here. It had
   the hero face and the body size, which reads as heavy small text
   rather than as the claim it is. Found on 2026-10-12 when a second
   line was added beside it and came out larger. */
/* THE DIAGNOSIS CARD. The site's own card, not a new one: the same
   paper fill, 2px line, 8px 9px 0 offset shadow and card radius as
   .sfdiff__item, and the same slight tilt the result cards carry. It is
   here because the two paragraphs inside it are about the reader, while
   everything above them in this column is about Ana. Boxing them says
   that in the layout instead of leaving the reader to work it out from
   four different type sizes. */
.sfdiag{
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink);
  padding:clamp(18px,2.2vw,26px);
  margin-top:clamp(20px,2.6vw,30px);
  transform:rotate(-0.8deg);
}
.sfdiag > p:last-child{ margin-bottom:0; }

/* THE CLAIM SITS UNDER THE .h-2, SO IT IS SIZED UNDER IT. It used to
   run to 2.9rem, which was larger than the section heading now above
   it and the reason the column had no obvious first thing to read. At
   the .h-3 scale in the secondary display face it is clearly the second
   voice rather than a competing first one.

   THE SELECTOR CARRIES .sf-lead FOR A REASON, AND IT IS A BUG FIX.
   .sf-lead p sets the body size and scores 0,1,1. A bare .sf-claim
   scores 0,1,0, so inside a .sf-lead the body rule won and this line
   rendered at body size with the hero face, which reads as heavy small
   text rather than as a claim. Found on 2026-10-12. */
.sf-claim,
.sf-lead p.sf-claim{
  font-family:var(--f-hero); font-weight:400;
  font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.18;
  letter-spacing:-.015em; margin:0 0 .7em; max-width:26ch;
}
.sf-claim s{ text-decoration:line-through; text-decoration-thickness:.07em; opacity:.45; }
/* The highlight on the claim line is .cut now, the same swatch /formula
   uses, so this rule only carries the weight. It used to paint its own
   acid fill with a 4px spread shadow, which out-specified .cut and left
   the swatch with no hard offset. */
.sf-claim b{ font-weight:400; }

/* MY BEFORE AND AFTER: the pair beside the words.
   Two photographs, not one, because that is what a before and after is.
   They sit side by side at every width including a phone, where two
   half-width portraits still read, and stacking them would put the
   "after" a screen below the "before" and break the comparison. */
.sfmine{ display:grid; gap:clamp(22px,3.5vw,44px); grid-template-columns:1fr; align-items:center; }
@media(min-width:860px){ .sfmine{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
/* MATCHED ON HEIGHT, NOT FORCED INTO ONE SHAPE. These two were
   aspect-ratio 3/4 with object-fit cover, which made them agree by
   cutting: 166px off the bottom of the before and 156px out of the
   middle of the after. Nothing is cropped now. Each image is simply
   drawn at its own ratio, and they still come out the same height.

   THE COLUMN WIDTHS ARE THE TWO FILES' ASPECT RATIOS. 324/598 is
   0.542 and 780/1196 is 0.652, so a column of 0.542fr beside one of
   0.652fr hands each photograph a width in proportion to its own
   shape, and width divided by ratio is then the same number for both.
   The heights match by construction rather than by a figure somebody
   has to keep in step. Replacing a photograph means putting its own
   ratio here.

   A FIXED HEIGHT WAS TRIED FIRST AND IT BROKE AT 320px. The pair
   needs height x 1.194 plus the gap, and a floor tall enough to fill
   a 375px phone overflowed a 320px one, which squeezed the after into
   a letterbox inside its own border. Proportional columns cannot
   overflow, because they are measured from the space there is.

   max-width IS WHAT STOPS IT GROWING. Without it the pair would take
   the full measure and stand about 900px tall on a desktop.

   align-items:end puts the two captions on one line, which lands the
   bottom edges of the photographs together. */
.sfba{
  display:grid; grid-template-columns:0.542fr 0.652fr;
  justify-content:center; align-items:end;
  gap:clamp(10px,1.6vw,18px);
  max-width:560px; margin-inline:auto;
}
.sfba figure{ margin:0; }
.sfba img{
  display:block; width:100%; height:auto;
  border:var(--line); border-radius:var(--radius-card); box-shadow:6px 7px 0 var(--ink);
}
.sfba figcaption{
  margin-top:.5em; font-family:var(--f-type); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-align:center; opacity:.7;
}

/* ── THE PULL QUOTE ───────────────────────────────────────────────────── */
.sfquote{ text-align:center; }
.sfquote blockquote{
  font-family:var(--f-hero); font-weight:400;
  font-size:clamp(1.45rem,3.6vw,2.5rem); line-height:1.16;
  letter-spacing:-.015em; margin:0 auto; max-width:24ch;
}
.sfquote__cta{ margin:clamp(26px,3.4vw,40px) 0 0; }

/* ── THE GLIDING RESULTS ROW ──────────────────────────────────────────
   THE MECHANICS ARE site.css's MARQUEE, not a new idea. .glide__track
   holds the eleven women twice and translates -50%, which lands the
   second copy exactly where the first began, so there is no visible
   join and no reset jump. The comment on .marquee__inner explains why
   that is the shape, and it is worth reading before changing anything
   here.

   WHAT IS DIFFERENT IS THAT THIS CARRIES CONTENT. The ticker is
   aria-hidden decoration. These are named women with a verified badge,
   so the duplicate set is hidden in the markup rather than the whole
   row, and the animation has to be stoppable: a photograph that slides
   out from under someone reading it is worse than one that never
   moved. Hover and keyboard focus both pause it.

   THE DURATION IS TUNED TO THE TRACK, AND HAS TO BE RETUNED WITH IT.
   It is one fixed number, so the speed is track width divided by it,
   and ANY change to the track moves it: the card width, and also the
   number of women in the row. Narrowing the cards from 260 to 200 took
   the track from 6248 to 4928 and the duration from 88s to 70s.
   Dropping one of the eleven took it to 4400, so 64s. Seven more
   photographs took it to 7480, so 108s. Every time the target was the
   same 34 to 35px a second.

   MEASURE IT AT 1440. The card width is a clamp, so a narrow window
   gives a shorter track and a slower reading from the same duration.
   The figures above are all at 1440, and a measurement taken anywhere
   else will disagree with them without anything being wrong. */
.glide{
  overflow:hidden;
  /* the shadows on the cards need somewhere to land */
  padding:10px 0 18px;
  /* the row runs the full band, not the text measure */
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
}
/* THE SPACING IS ON THE ITEM, NOT A flex gap, AND THAT IS THE WHOLE
   REASON THE LOOP IS SEAMLESS. A gap sits BETWEEN items, so N items
   have N-1 gaps and half the track is one copy plus half a gap.
   Measured with gap, back when the row held eleven women: the first
   copy was 3124 wide against a half-track of 3112, so every loop jumped
   12px. As a margin on each item the unit is width+margin, identical
   for every item, so half the track is exactly one copy however many
   women are in it. */
.glide__track{
  display:flex; width:max-content;
  animation:glide-slide 108s linear infinite;
}
.glide:hover .glide__track,
.glide:focus-within .glide__track{ animation-play-state:paused; }

/* THE CARD IS NOW ONLY A PHOTOGRAPH. The name and then the badge both
   came off, so there is no caption under the image and the padding is
   an even frame around it rather than a mat with a label below. */
.glide__item{
  flex:0 0 auto; margin:0 clamp(12px,1.6vw,20px) 0 0;
  width:clamp(160px,14vw,200px);
  background:var(--paper); border:var(--line);
  border-radius:var(--radius-card); box-shadow:8px 9px 0 var(--ink);
  padding:12px;
}
.glide__item img{ display:block; width:100%; height:auto; border-radius:8px; }

@keyframes glide-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* OFF ENTIRELY, and the row stays usable by hand. Without this the
   section becomes motion somebody asked their system not to show. */
@media (prefers-reduced-motion:reduce){
  .glide__track{ animation:none; }
  .glide{ overflow-x:auto; }
}

/* ── CLIENT MESSAGES ──────────────────────────────────────────────────
   Three per row above 1100px, which is what the sales page's WhatsApp
   band does, so a screenshot sized for one works in the other. */
.sfmsgs{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr; }
@media(min-width:720px){ .sfmsgs{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .sfmsgs{ grid-template-columns:repeat(3,1fr); } }
.sfmsgs figure{ margin:0; background:var(--paper); border:var(--line);
  border-radius:var(--radius-card); box-shadow:8px 9px 0 var(--ink); padding:12px; }
.sfmsgs img{ display:block; width:100%; height:auto; border-radius:8px; }

/* ── NOT YOUR AVERAGE ─────────────────────────────────────────────────── */
.sfdiff{ display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:1fr; margin-top:clamp(24px,3vw,36px); }
@media(min-width:860px){ .sfdiff{ grid-template-columns:repeat(3,1fr); } }
.sfdiff__item{
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(18px,2.2vw,26px);
}
.sfdiff__h{ font-family:var(--f-hero); font-size:clamp(1.02rem,1.7vw,1.2rem);
  text-transform:uppercase; letter-spacing:.01em; margin:0 0 .5em; }
.sfdiff__item p{ margin:0; font-size:.98rem; line-height:1.55; }

/* ── PROGRAM CARDS ────────────────────────────────────────────────────── */
.sfcards{ display:grid; gap:clamp(20px,2.6vw,30px); grid-template-columns:1fr; }
@media(min-width:860px){ .sfcards{ grid-template-columns:repeat(2,1fr); } }
.sfcard{
  display:flex; flex-direction:column; gap:.7em;
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(22px,2.6vw,32px);
}
.sfcard__name{ font-family:var(--f-hero); font-size:clamp(1.5rem,2.6vw,2rem);
  text-transform:uppercase; line-height:1.05; margin:0; }
.sfcard__line{ margin:0; font-size:1rem; line-height:1.5; }
.sfcard__price{ font-family:var(--f-type); font-weight:700; font-size:1.05rem; margin:0; }
.sfcard__cta{ margin:.4em 0 0; }
.sfcard--soon{ opacity:.72; }
.sfcard--soon .sfcard__soon{
  font-family:var(--f-type); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--acid); border:var(--line); border-radius:var(--radius-pill);
  padding:.4em 1em; align-self:flex-start;
}

/* ── /programs AND /nutrition-edit ───────────────────────────────────
   THE CARD ACCENTS ARE THE PROGRAMME'S OWN. programs.accent in the
   platform database says pink for The Formula and orange for The
   Nutrition Edit, and the platform design doc is explicit that an
   accent identifies that one programme rather than a kind of thing.
   One to one is not a row in that table, so it takes blue, which its
   nav pill has carried since the bar was rebuilt.

   The colour is a bar down the left edge rather than a fill, because
   three saturated cards side by side fight each other and the band
   behind them. */
.sfcard--pink{ border-left:10px solid var(--pink); }
.sfcard--orange{ border-left:10px solid var(--orange); }
.sfcard--blue{ border-left:10px solid var(--blue); }

/* Three across needs a wider breakpoint than two. Below it the cards
   stack, which is what two did anyway. */
@media(min-width:1040px){ .sfcards--three{ grid-template-columns:repeat(3,1fr); } }

/* THE PRICE AND THE BUTTON SIT ON ONE LINE ACROSS ALL THREE. The grid
   already stretches the cards to equal height, but the copy in them is
   different lengths, so without this the three buttons land at three
   different heights and the row looks accidental. Pushing the price
   down takes the button with it. */
.sfcards--three .sfcard__price{ margin-top:auto; padding-top:.4em; }

/* ── /nutrition-edit ─────────────────────────────────────────────── */
.ne-price{
  font-family:var(--f-type); font-weight:700;
  font-size:1.05rem; margin:0 0 1.2em;
}
.ne-rules{ display:grid; gap:clamp(18px,2.2vw,26px); grid-template-columns:1fr; margin-top:clamp(24px,3vw,36px); }
@media(min-width:900px){ .ne-rules{ grid-template-columns:repeat(3,1fr); } }
.ne-rule{
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(20px,2.4vw,28px);
}
.ne-rule__h{
  font-family:var(--f-hero); font-size:clamp(1.1rem,1.9vw,1.35rem);
  text-transform:uppercase; line-height:1.1; margin:0 0 .6em;
}
.ne-rule p{ margin:0; font-size:1rem; line-height:1.55; }

/* ── IMAGE PLACEHOLDERS ───────────────────────────────────────────────
   DELIBERATELY UGLY. These mark where Ana's photographs go and state
   the size wanted. A placeholder that looks like a design decision is
   one that ships by accident; a dashed grey box with a caption does
   not. Every one of them must be gone before this page is merged. */
.ph{
  display:grid; place-items:center; text-align:center;
  background:repeating-linear-gradient(45deg,#EFE7D6,#EFE7D6 10px,#E6DCC7 10px,#E6DCC7 20px);
  border:2px dashed var(--ink) !important; box-shadow:none !important;
  min-height:220px; padding:22px;
  font-family:var(--f-type); font-size:.8rem; line-height:1.5; color:var(--ink);
}
.ph b{ display:block; font-size:.9rem; margin-bottom:.4em; }

/* ── COPY PLACEHOLDER, for the one section Ana is still writing ──────── */
.copy-todo{
  background:var(--acid); border:var(--line); border-radius:var(--radius-tag);
  padding:.15em .5em; font-family:var(--f-type); font-size:.86em; font-weight:700;
}

/* =====================================================================
   /coaching — THE ONE TO ONE PAGE.

   Application based, so there is no price anywhere and every button
   goes to the same form. That is a content rule, not a style one, but
   it is written here because the button class is the only thing in
   this file that could quietly become a buy button later.
   ===================================================================== */

/* ── NUMBERED PHASES ──────────────────────────────────────────────────
   The number is the design. Large, Archivo Black, in the margin on
   desktop and above the heading on a phone, so the sequence reads as a
   sequence rather than three unrelated cards. */
.co-phases{ display:grid; gap:clamp(20px,2.8vw,32px); margin-top:clamp(26px,3.4vw,42px); }
.co-phase{
  display:grid; gap:clamp(10px,1.6vw,22px); align-items:start;
  grid-template-columns:1fr;
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(20px,2.6vw,30px);
}
@media(min-width:720px){ .co-phase{ grid-template-columns:auto 1fr; gap:clamp(20px,2.6vw,34px); } }
.co-phase__n{
  font-family:var(--f-hero); font-weight:400; line-height:.8;
  font-size:clamp(2.4rem,6vw,4rem); color:var(--pink-deep);
  letter-spacing:-.02em;
}
.co-phase__body p{ margin:0; font-size:1rem; line-height:1.6; }

/* ── WHAT YOU GET, six ticked items ───────────────────────────────── */
.co-get{ display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:1fr; margin-top:clamp(24px,3vw,38px); list-style:none; padding:0; }
@media(min-width:760px){
  .co-get{ grid-template-columns:repeat(2,1fr); }
  /* AN ODD COUNT MUST NOT LEAVE AN ORPHAN. Five items in two columns
     is 2 + 2 + 1, and the lone card at the end reads as a mistake.
     This spans the last one when the list has an odd length, so five
     looks deliberate and six is untouched. It is written as a rule
     rather than a class so adding or removing an item needs no edit
     here. */
  .co-get li:last-child:nth-child(odd){ grid-column:1 / -1; }
}
.co-get li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--paper); border:var(--line); border-radius:var(--radius-block);
  box-shadow:5px 6px 0 var(--ink); padding:clamp(16px,2vw,22px);
  font-size:.99rem; line-height:1.55;
}
.co-get li::before{
  content:"\2713"; font-weight:700; color:var(--pink-deep);
  font-size:1.05rem; line-height:1.4;
}

/* ── FOR YOU / NOT FOR YOU ────────────────────────────────────────────
   Two columns that are deliberately NOT symmetrical in colour: the
   fit list sits on paper and the misfit list on the darker paper, so
   a skimmer can tell them apart without reading either heading. */
.co-fit{ display:grid; gap:clamp(20px,2.6vw,30px); grid-template-columns:1fr; }
@media(min-width:860px){ .co-fit{ grid-template-columns:repeat(2,1fr); } }
.co-fit__col{
  border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(20px,2.6vw,30px);
}
.co-fit__col--yes{ background:var(--paper); }
.co-fit__col--no{ background:var(--paper-2); }
.co-fit__col h3{
  font-family:var(--f-hero); font-size:clamp(1.1rem,2vw,1.35rem);
  text-transform:uppercase; letter-spacing:.01em; margin:0 0 .8em; line-height:1.15;
}
.co-fit__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7em; }
.co-fit__col li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:.98rem; line-height:1.5; }
.co-fit__col--yes li::before{ content:"\2713"; color:var(--pink-deep); font-weight:700; }
.co-fit__col--no li::before{ content:"\00D7"; color:var(--ink); opacity:.5; font-weight:700; }

/* ── THE BIG QUESTION ─────────────────────────────────────────────────
   One line, centred, no card. It is a beat between two lists rather
   than a section with content, so it gets air and nothing else. */
.co-ask{ text-align:center; }
.co-ask h2{
  font-family:var(--f-hero); font-weight:400;
  font-size:clamp(1.6rem,4.4vw,3rem); line-height:1.12;
  letter-spacing:-.015em; margin:0 auto; max-width:20ch; text-transform:none;
}

/* ── WHAT MAKES CHEMISTRY DIFFERENT ──────────────────────────────── */
.co-diff{ display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:1fr; margin-top:clamp(24px,3vw,36px); }
@media(min-width:860px){ .co-diff{ grid-template-columns:repeat(3,1fr); } }
.co-diff__item{
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(18px,2.2vw,26px);
}
.co-diff__h{ font-family:var(--f-hero); font-size:clamp(1rem,1.7vw,1.18rem);
  text-transform:uppercase; margin:0 0 .5em; line-height:1.2; }
.co-diff__item p{ margin:0; font-size:.97rem; line-height:1.55; }

/* ── APPLY ────────────────────────────────────────────────────────── */
.co-apply{ text-align:center; }
.co-apply .sf-lead{ margin-inline:auto; }

/* =====================================================================
   /apply — THE COACHING APPLICATION FORM.

   Nineteen fields, five of them paragraphs, filled in on a phone by
   somebody who is being honest about something difficult. Every
   decision below is about making that less work.
   ===================================================================== */

.ap-form{ max-width:720px; margin-inline:auto; }
.ap-field{ margin:0 0 clamp(20px,2.6vw,28px); }

.ap-label{
  display:block; margin:0 0 .5em;
  font-size:1rem; line-height:1.45; font-weight:700;
}
.ap-hint{ display:block; font-weight:400; opacity:.7; font-size:.9rem; margin-top:.25em; }
/* Optional is marked, required is not. Nine of nineteen are required,
   so marking the smaller set would mean more ink, and a form covered
   in asterisks reads as a form that wants everything. */
.ap-opt{ font-weight:400; opacity:.55; font-size:.85rem; }

/* THE ONE PLACE WHITE STAYS. Cards went to cream so they sit in the
   palette instead of punching out of it, but a field is the element
   where white does real work: it is the thing that says type here. The
   2px rule carries the shape either way, so this is about invitation
   rather than definition. */
.ap-input, .ap-textarea{
  width:100%; box-sizing:border-box;
  font-family:var(--f-sans); font-size:16px; /* 16px or iOS zooms on focus */
  line-height:1.5; color:var(--ink); background:var(--white);
  border:var(--line); border-radius:var(--radius-tag);
  padding:12px 14px; min-height:48px;
}
.ap-textarea{ resize:vertical; }
.ap-input:focus-visible, .ap-textarea:focus-visible{
  outline:3px solid var(--pink-deep); outline-offset:2px;
}

/* ── RADIOS, NOT A SELECT ─────────────────────────────────────────────
   A native select on a phone opens a modal wheel that hides the
   question. These are all visible, all one tap, and the whole set can
   be read without interacting with it. */
.ap-radios{ display:grid; gap:10px; margin:0; padding:0; border:0; }
.ap-radios label{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  background:var(--paper); border:var(--line); border-radius:var(--radius-block);
  padding:12px 14px; cursor:pointer; font-size:.98rem; line-height:1.4;
  min-height:48px;
}
.ap-radios input{ width:20px; height:20px; accent-color:var(--pink-deep); margin:0; }
.ap-radios label:has(input:checked){ background:var(--acid); box-shadow:4px 5px 0 var(--ink); }
.ap-radios label:focus-within{ outline:3px solid var(--pink-deep); outline-offset:2px; }

/* ── THE 1 TO 10 SCALE ────────────────────────────────────────────────
   Ten boxes in a row, with her words at each end rather than above, so
   the ends of the scale are read as part of it. Wraps to two rows on a
   narrow phone rather than shrinking below a thumb. */
.ap-scale{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
.ap-scale label{
  flex:1 1 52px; min-width:52px; min-height:48px;
  display:grid; place-items:center;
  background:var(--paper); border:var(--line); border-radius:var(--radius-tag);
  font-family:var(--f-type); font-weight:700; font-size:1rem; cursor:pointer;
}
.ap-scale input{ position:absolute; opacity:0; width:1px; height:1px; }
.ap-scale label:has(input:checked){ background:var(--pink); box-shadow:4px 5px 0 var(--ink); }
.ap-scale label:focus-within{ outline:3px solid var(--pink-deep); outline-offset:2px; }
.ap-scale__ends{
  display:flex; justify-content:space-between; gap:12px; margin-top:.6em;
  font-size:.86rem; line-height:1.4; opacity:.72;
}
.ap-scale__ends span{ max-width:46%; }

/* Honeypot. Off screen rather than display:none, because some bots
   skip anything hidden and the point is that they fill it. */
.ap-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ap-error{
  margin:0 0 1.2em; padding:14px 16px;
  background:var(--paper); border:2px solid var(--pink-deep);
  border-radius:var(--radius-block); font-size:.98rem; line-height:1.5;
}
.ap-error[hidden]{ display:none; }

/* ── THE CONFIRMATION, which replaces the form in place ─────────────── */
.ap-done{
  background:var(--paper); border:var(--line); border-radius:var(--radius-card);
  box-shadow:8px 9px 0 var(--ink); padding:clamp(26px,3.4vw,40px); text-align:center;
}
.ap-done[hidden]{ display:none; }
.ap-done h2{
  font-family:var(--f-hero); font-size:clamp(1.4rem,3vw,2rem);
  text-transform:none; margin:0 0 .5em; line-height:1.15;
}
.ap-done p{ margin:0 auto; max-width:46ch; font-size:1rem; line-height:1.6; }