/* home.css — /old-home only. Linked from that page's head box, NEVER Site Settings.
   Moving it site-wide would make the generic hero-* class names a live hazard.
   v3 (S232): the hero. Field, card, media half, type, seam stars.
   v3.1 (S233): the 991 width fix + the inherited-centring fix.
   v3.2 (S233): desktop card density + bottom clearance for the marquee.
   v3.3 (S233): placeholder fill for the two seam stars.
   v3.4 (S233): the lower star steps off the seam. Marquee is v4.
   v6 (S235): the how-it-works section. Ground, 920 container, amber rules,
     hairlines between steps, icon-left phone rows.
   v7 (S235): the phone gap under the section heading. SUPERSEDED BY v8 — the
     eyebrow removed the problem it solved, so v7 was reverted, never published,
     and survives only in the rollback chain.
   v8 (S235): the section title becomes a coral eyebrow, both breakpoints.
   v9 (S236): that eyebrow grows into a header - 18px, weight 700, her green.
   v10 (S237): the closet preview. Coral band, amber ribbon straddling the
     seam, oversized cream type, four cream cards overlapping it on desktop.
   v11 (S237): the heading max-widths corrected. The measured string is about
     5.25x the font-size wide, not the 6.75x the v10 figures assumed, so none of
     the four caps was forcing the two-line break.
     Also: the card overlap moves onto :not(:empty), so a no-cards state cannot
     drag the CTA across the heading.
   NOTE: Webflow has FOUR breakpoints. This file speaks at 991, 767 and 479. */

/* ---- SECTION RHYTHM ------------------------------------------------------ */
/* HER RULING S240: ONE number for the space every section puts between itself
   and its neighbour, identical at every breakpoint. She chose it off a rendered
   comparison of 144 / 79 / 35 at the hero-to-how-it-works seam.
   ⚠⚠ TWO EDGES CANNOT TAKE IT AND THAT IS STRUCTURAL, NOT AN OVERSIGHT:
   .closet-preview-section's TOP is owned by the ribbon, which straddles the
   seam by pulling itself up half its own height — give that edge padding and
   the ribbon pulls into the padding instead of onto the seam. And
   .closet-standard-section has no padding at all because its photo panel is
   full-bleed to the section edge; padding there would frame the photo in cream.
   Those two edges stay 0 ON PURPOSE. Every free edge takes the token. */

:root {
  --section-gap: 44px;

  /* ⚠⚠⚠ --ribbon-height LIVES HERE, NOT ON .closet-preview-ribbon, AND THAT IS
     LOAD-BEARING. The ribbon straddles the cream-to-coral seam by pulling itself
     up HALF ITS OWN HEIGHT, so it eats half of whatever padding sits above it.
     .how-it-works-section's bottom padding adds that half back, which is the only
     way the VISIBLE cream at that seam equals --section-gap like every other seam.
     TWO CONSUMERS, ONE VARIABLE, LOCKED TOGETHER — change the height at any
     breakpoint and the seam corrects itself. Move it back onto the ribbon and the
     seam silently collapses to 12px on desktop with nothing erroring. */
  --ribbon-height: 46px;
}

/* ---- FIELD ------------------------------------------------------------- */

.hero-section {
  background-color: #1C4A91;
  padding: 44px 44px 44px;
  position: relative;
}

/* ---- CARD -------------------------------------------------------------- */

.hero-section .hero-container {
  background-color: #EDECE0;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 520px;
  position: relative;
}

/* text-align:left beats Webflow's own `.hero-section` rule setting text-align:center — a
   shared-sheet rule with NO media query that applies at every width. It was
   invisible while every line was short enough not to wrap. Set on the COLUMN so
   every child inherits it, including any added later. */
.hero-section .hero-left {
  flex: 0 0 54%;
  max-width: 54%;
  min-width: 0;
  /* margin:0 kills Webflow's own 100px 0 100px 100px on this element. That margin
     sits INSIDE the card and paints cream, so it read as part of the text half:
     100 + 670 = 770 of visible cream, 62% where the file asks for 54%, and the media
     half squeezed to 470. It also stacked with this padding — 45% of the old 718px
     card was clearance. HER RULING S233 off a rendered comparison: padding alone
     carries the spacing, and the card drops 718 -> 548.
     THE 90px BOTTOM IS NOT SYMMETRY, IT IS THE MARQUEE'S ROOM. The strip (v4) breaks
     the card's bottom edge, and at 60 it crossed straight under the buttons. The strip
     is a FIXED height at every width, so this clearance is absolute, not proportional —
     do not scale it with the card. */
  margin: 0;
  padding: 60px 60px 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.hero-section .home-hero-media {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background-color: #C9C7BC;
  overflow: hidden;
}

.hero-section .home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- SEAM STARS -------------------------------------------------------- */
/* the seam is VERTICAL at desktop and HORIZONTAL once the card stacks.
   pointer-events off so a sticker can never eat a button click.
   ⚠ THESE POSITION AGAINST .hero-container, NOT .hero-section — the container carries
   position:relative and the stars are its children, so top/left are percentages OF THE
   CARD. That is why top:240px at 767 lands exactly on the photo's bottom edge. S233
   raised a "they sit high by the field's padding" fault and it was FALSE; do not
   re-derive it. */

.hero-section .home-hero-star-upper,
.hero-section .home-hero-star-lower {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  height: auto;
  /* PLACEHOLDER FILL, S233 — these are Div Blocks, not Images, so she can place and
     judge them before choosing the artwork. aspect-ratio gives a div the square box an
     img would have had from its file. WHEN THE PNGs LAND: delete background-color and
     clip-path, add background-image / background-size:contain / background-repeat:
     no-repeat. THE ELEMENT AND ITS POSITION RULES DO NOT CHANGE — no Designer work.
     The pink is a placeholder colour, NOT a ruling; both stars share it deliberately so
     the mockup's two-colour version is not mistaken for a decision. */
  aspect-ratio: 1 / 1;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* S304, HERS: 15% SMALLER. 121 -> 103 (121 x 0.85 = 102.85). The top moved 74 -> 83
   with it, CLAUDE'S CALL AND ONE NUMBER TO REVERT: the box is centred horizontally by
   translateX(-50%) but its TOP edge is fixed, so shrinking alone would have lifted the
   star 9px up the headline. +9 keeps the optical centre exactly where she approved it.
   The 991 and 767 blocks restate width and top but NOT height, which is correct and
   needs no edit: those widths are unchanged and the box is centred on its own top
   value by translateY(-50%), so a taller box moves nothing on screen. */
/* S304b, MEASURED ON HER RENDER: A CORNER NOW CROSSES THE "f" OF "Stuff".
   ⚠⚠⚠ `transform: translateX(-50%)` IS GONE AND MUST NOT COME BACK. The independent
      `rotate:` property and the `transform` property COMPOSE — transform is applied
      inside the rotated frame — so a translate here swings the star around a pivot as
      it turns, and home.js turns it on every scroll. Predicted centre under the swing
      was 571.8/86.1 and the live render measured 572/86, so this is arithmetic, not a
      guess. `translate:` composes in a FIXED order (translate, then rotate) and leaves
      the centre where it is written at every angle. Same family as this file's own
      "`rotate:` never `transform: rotate()`" rule, arriving from the other side.
   ⚠ THEREFORE left/top ARE NOW THE BOX'S OWN TOP-LEFT, not a centre. 480/35 reproduces
      the vertical position she approved (centre y 86) and moves it 41px left, putting
      the star's box 20px past the "f", which ends at x 485 (measured). */
.hero-section .home-hero-star-upper {
  left: 480px;
  top: 35px;
  right: auto;
  bottom: auto;
  width: 103px;
  height: 103px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
}

/* HER RULING S233, off the live desktop render: the two stars must NOT sit perfectly
   aligned on the crease. The UPPER one stays on the seam — it is the one that survives
   the stack below 991 — and the LOWER one steps left. 75px is the middle of her 50-100
   range, Claude's pick inside it, adjustable. calc keeps it a FIXED offset from the seam
   rather than a percentage that drifts as the card narrows. Desktop only by construction:
   the 991 block hides this star outright. */
.hero-section .home-hero-star-lower {
  transform: translateX(-50%);
  left: 318px;
  top: 432px;
  right: auto;
  bottom: auto;
  width: 33px;
  height: 33px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
}

/* ---- THE BRAND MARQUEE -------------------------------------------------- */

/* HER RULINGS S234, off three rendered mockups: the AMBER fill with SOFT ENDS (the fill
   and the logos dissolve into the cream together, so a start or a stop can never appear
   on screen -- her S231 hidden-end-points rule), the THINNER 44px band ("it needs to be
   an accessory"), and a 2.8deg incline. It is a LOGO STRIP, not the serif wordmark strip
   in the older mockups.
   EVERY SIZE BELOW THE DESKTOP SET IS CLAUDE'S PICK AND IS REVERSIBLE -- she has judged
   the desktop band only.
   THE 90px BOTTOM PADDING ON .hero-left IS THIS STRIP'S ROOM (S233). It is a FIXED height
   at every width -- do not scale that clearance with the card.
   z-index 2 puts it UNDER both seam stars (z-index 3) and over the card's own halves.
   pointer-events:none because nothing in here is a link. */
.hero-section .home-hero-marquee {
  --marquee-gap: 40px;
  --marquee-fade: 80px;
  --logo-grimms: 27px;
  --logo-gap: 17px;
  --logo-janie: 22px;
  --logo-zara: 11px;
  --logo-lovevery: 24px;
  --logo-melissa: 22px;
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16px;
  height: 44px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #E5AD43;
  transform: rotate(-2.8deg);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}

/* THE LOOP DISTANCE AND THE SET COUNT ARE LOCKED TO EACH OTHER. The track holds SIX
   identical sets and slides by exactly ONE of them, which is -16.6667%. Change the
   number of sets in the Webflow embed and this percentage MUST change with it
   (100 / sets), or the strip jumps once per cycle -- silently, and only on a screen wide
   enough to see the seam. Six rather than five is headroom: the five sets that are not
   sliding off have to cover a band that is wider than the card. */
.hero-section .home-hero-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ks-home-marquee 52s linear infinite;
}

.hero-section .home-hero-marquee-set {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}

/* max-width:none is LOAD-BEARING inside a Webflow embed -- Webflow's own base stylesheet
   sets img{max-width:100%}, and a percentage inside an embed resolves against a wrapper
   that is sizing itself from its content (the S224 trap). Heights drive the sizing here
   and widths follow. */
.hero-section .home-hero-marquee-set img {
  display: block;
  width: auto;
  max-width: none;
}

/* SIX SEPARATE HEIGHTS, NOT ONE. A long wordmark and a stacked lockup set to the same
   size read as two different decisions -- these are optical values, tuned by eye against
   her own contact sheet, and each one is safe to nudge on its own.
   HER S234 CORRECTION, OFF THE LIVE BAND AT DISTANCE, AND IT IS THE RULE HERE: HEIGHT IS
   A BAD PROXY FOR HOW BIG A LOGO LOOKS. Zara is a heavy solid wordmark and dominated at
   15px; Lovevery is light and arched and was unreadable at 13. Optical size is weight
   times width, not height -- judge these on the published page, never in the file. */
.hero-section .home-hero-marquee-logo-grimms { height: var(--logo-grimms); }
.hero-section .home-hero-marquee-logo-gap { height: var(--logo-gap); }
.hero-section .home-hero-marquee-logo-janie { height: var(--logo-janie); }
.hero-section .home-hero-marquee-logo-zara { height: var(--logo-zara); }
.hero-section .home-hero-marquee-logo-lovevery { height: var(--logo-lovevery); }
.hero-section .home-hero-marquee-logo-melissa { height: var(--logo-melissa); }

@keyframes ks-home-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-16.6667%); }
}

/* The strip still draws, still tilts and still shows its logos with the animation off --
   it simply sits still. Failure lands on "no movement", never on "no strip". */
@media (prefers-reduced-motion: reduce) {
  .hero-section .home-hero-marquee-track { animation: none; }
}

/* ---- TYPE -------------------------------------------------------------- */

.hero-section .hero-tagline {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E54F25;
  margin: 0 0 18px;
}

/* the .h1 wrapper carries site-wide spacing; neutralised here only */
.hero-section .h1 {
  margin: 0;
  padding: 0;
}

/* beats the site-wide .h1-light-leftaligned, which sets LIGHT text */
.hero-section .h1-light-leftaligned {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  /* 80px, RAISED FROM 60 AT S242. THE PAGE'S HEADING LADDER WAS 128 / 112 /
     60 / 44 WITH NOTHING BETWEEN 60 AND 112, so the hero — the most important
     section on the page — was closer in size to the pricing list than to the
     two interior sections. 88 was tried at true size and took the headline to
     FOUR lines, which grows the card and eats the marquee's fixed 90px
     clearance. 80 IS THE CEILING THAT KEEPS IT AT THREE. */
  font-size: 80px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #1E1A19;
  margin: 0;
  text-align: left;
  max-width: 15ch;
  text-shadow: none;
}

.hero-section .h1-light-leftaligned em,
.hero-section .h1-light-leftaligned i {
  font-style: italic;
  font-weight: 400;
}

/* ⚠⚠ padding-left:0 IS A CORRECTION, NOT A STYLE — S247. WEBFLOW authors a
   padding-left:10px on this element in the Designer and no pinned file explains
   it, so the subhead's text started 10px right of the eyebrow, the headline, the
   highlights and the buttons, which all sit at 0. She saw it as the line being
   indented differently every time she looked; it was static and it was this.
   ⚠ THE DESIGNER VALUE IS STILL THERE and this only overrides it. Same species
   as hero-left's dead Webflow margin (S233) — clear it at source on the next
   Designer trip and this line can go. Until then, DO NOT DELETE THIS. */

.hero-section .hero-subhead {
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1E1A19;
  margin: 20px 0 0;
  padding-left: 0;
  max-width: 34ch;
}

.hero-section .hero-highlights {
  font-family: Quicksand, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: #75736E;
  margin: 18px 0 0;
}

/* ---- BUTTONS ----------------------------------------------------------- */
/* two classes on purpose: both buttons also wear Webflow's own .w-button,
   which sets a background and a text colour. A one-class rule would tie
   with it and win only on source order. */

.hero-section .hero-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
  /* ⚠⚠ THE transform:none THAT SAT HERE IS GONE — v33 (S246), AND ITS COMMENT
     WAS WRONG. It was written at v32 to beat a Webflow scale(0.95) and IT NEVER
     COULD: that scale was an INLINE style written by an interaction, and an
     inline style beats every stylesheet rule including !important. The commit
     raw-verified, hash-matched, pinned, published AND CHANGED NOTHING.
     THE INTERACTION ITSELF IS NOW DELETED (S246, her ruling), so nothing writes
     a transform to this row and the declaration had nothing left to do.
     ⚠ NAMED COST, STILL LIVE AND CORRECT: both hero buttons render 5% LARGER
     than in the hero she closed at S234 with "perfect". That is what removing
     the scale did. It is the true size, not a regression. */
}

.hero-buttons .hero-button-primary {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  background-color: #E54F25;
  color: #FFFFFF;
  border: 1.5px solid #E54F25;
  border-radius: 50px;
  padding: 14px 28px;
  text-decoration: none;
  white-space: nowrap;
}

.hero-buttons .hero-button-primary:hover {
  background-color: #B23D22;
  border-color: #B23D22;
  color: #FFFFFF;
}

.hero-buttons .hero-button-secondary {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  background-color: transparent;
  color: #1E1A19;
  border: 1.5px solid #1E1A19;
  border-radius: 50px;
  padding: 14px 24px;
  text-decoration: none;
  white-space: nowrap;
}

.hero-buttons .hero-button-secondary:hover {
  background-color: #1E1A19;
  color: #EDECE0;
}

/* ---- HOW IT WORKS ------------------------------------------------------- */
/* HER RULINGS S234, off five mockups: OPTION D — an amber rule under each
   heading plus hairlines between the steps. The container narrows to 920 so the
   section reads clearly narrower than the hero card's 1240. The ground goes to
   palette cream #EDECE0. On the phone the steps become icon-left / text-right
   rows, which knowingly changes her S224 2x2 ruling.

   ⚠⚠⚠ EVERY RULE HERE IS AT THREE CLASSES OR MORE, ON PURPOSE. The four icon
   EMBEDS carry their own <style> blocks, those blocks sit in the BODY, and the
   body is later in source order than this file in the head. At equal
   specificity THE EMBED WINS. A two-class rule here ships, verifies clean and
   does nothing. What is being beaten, read live S235:
     .how-it-works-section .steps-row > *{text-align:left;padding:0 18px}
     .how-it-works-section .steps-row p{max-width:24ch;margin-left:0}
     .how-it-works-section .steps-row > *{align-items:flex-start}
     .kshw-send,.kshw-earn,.kshw-swap,.kshw-repeat{margin:0 0 10px}
     @media(max-width:767px) .steps-row{grid-template-columns:1fr 1fr;gap:40px 8px}
   ⚠ THE SECTION'S OWN BACKGROUND IS THE ONE EXCEPTION AND IT IS SAFE AT ONE
   CLASS — Webflow's stylesheet is in the head ABOVE this file, so an equal tie
   goes to us. .hero-section proves it: it is one class and it paints navy. */

.how-it-works-section {
  background-color: #EDECE0;
  padding: var(--section-gap) 0 calc(var(--section-gap) + var(--ribbon-height) / 2);
}

/* 88px bottom is CLAUDE'S CALL, REVERSIBLE — it was 40px, which was fine while
   the band had no visible edge. Cream against the white featured-section below
   gives it one, and 100/40 then reads lopsided. One number. */

/* ⚠⚠⚠ ONE SPINE — v29 (S244). HER RULING, AND IT KNOWINGLY REVERSES S234's
   920 CONTAINER, which she narrowed on purpose so this section would "read more
   narrow at a glance". She was shown the cost on a rendered comparison — wider
   step columns, and the ~24ch paragraph measure no longer ragging — and chose the
   single left edge anyway. DO NOT "RESTORE" 920 ON THE STRENGTH OF THE S234 LINE.
   ⚠⚠ THE SPINE IS A **TEXT** EDGE, NOT A CONTAINER EDGE: 1240 max-width with 60px
   padding puts type at 166 on a 1451 viewport, which is where the hero's words
   already sit (hero-container 1240 + hero-left's own 60 padding). THE HERO CARD'S
   OUTER EDGE STAYS OUTSIDE THE SPINE ON PURPOSE — it is a drawn object, like the
   closet-standard photo, and closet-standard is exempt for the same reason.
   ⚠⚠ SOURCES IS ON THE SPINE AS OF v32 (S245) AND THIS COMMENT USED TO SAY IT
   COULD NOT BE. Its markup is a Webflow Embed carrying its own <style>, which
   wins every TIE on source order and loses on SPECIFICITY — see the SOURCES
   block near the foot of this file. The old line sent one session looking for
   a Designer edit that was not needed.
   ⚠ align-items:flex-start BEATS A WEBFLOW align-items:center THAT IS IN NO RULE
   IN THIS FILE. The heading is shrink-to-fit, so it was being centred AS A BOX and
   its own text-align:left could never move it — the §0 rule about text-align and
   shrink-to-fit children, arriving on a second element.
   ⚠⚠ THE PRICING CLAMPS WERE **NOT** RETUNED, DELIBERATELY. §STATE says the three
   vw factors cap at 1188 because that is where the container stopped growing at
   max-width 1140. The container is now 1240, so type caps ~52px of viewport BEFORE
   the container does. THAT IS THE SAFE DIRECTION — the rows get ~28px more room and
   nothing can overflow — and it leaves the type she approved at S243 untouched at
   every width. Retuning to 2.82/2.26/1.85vw would cap at 1240 and shrink her
   approved sizes everywhere below it. CLAUDE'S CALL, REVERSIBLE. */

.how-it-works-section .how-it-works-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  align-items: flex-start;
}

/* ⚠⚠ THE SECTION TITLE IS A SANS HEADER, NOT A SERIF HEADING — HER RULING S235,
   off a live phone render. "How It Works" and "Send" were both large Instrument
   Serif in ink, so the section title read as a fifth step. THE FIX IS THAT IT
   STOPS COMPETING, and it does that by changing FACE, not by shrinking.

   ⚠⚠ IT SHIPPED AT S235 AS A 12px CORAL EYEBROW AND THAT IS SUPERSEDED. HER
   RULING S236, off the live render: it read as a label rather than a header, so
   it is now 18px at weight 700 in HER GREEN #309359. It NO LONGER MATCHES THE
   HERO EYEBROW and is not supposed to — a section header and a hero kicker are
   two different jobs. The page has TWO sans uppercase styles on purpose.
   ⚠ CONTRAST, MEASURED AND KNOWINGLY ACCEPTED: green on this cream reads
   3.25:1, essentially the same as the coral it replaced (3.23). The colour
   change bought no legibility and she was told so. 18px/700 sits just UNDER the
   18.66px threshold where the large-text 3:1 bar would apply, so this fails AA
   by half a pixel. 20px/700 would have passed on size alone and she chose 18.
   DO NOT SILENTLY BUMP IT TO 20 AND DO NOT SWAP THE GREEN FOR A DARKER ONE.
   #1F5C38 reads 6.68:1 and is the swap ONLY if she asks for it.
   ⚠⚠ AND HER S236 PAGE-WIDE RULING: EVERY COLOUR IN HER PALETTE MAY APPEAR ON
   /old-home REGARDLESS OF WHAT IT MEANS ELSEWHERE. Green meaning toys in the
   signup flow does not constrain this page. Do not raise it again.

   ⚠ TWO SELECTORS ON PURPOSE. .h2-dark is the class it wears today; the direct
   > h1 catches it if that class is ever renamed in the Designer. A rename would
   otherwise leave a 52px serif title back on the page with nothing erroring.
   ⚠ ZERO DESIGNER EDITS — the element and its text are untouched, and the title
   case stops mattering because text-transform owns it. */

.how-it-works-section .how-it-works-container .h2-dark,
.how-it-works-section .how-it-works-container > h1,
.how-it-works-section .how-it-works-container > h2 {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #309359;
  text-align: left;
  margin: 0 0 30px;
}

.how-it-works-section .how-it-works-container .steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}

/* the hairlines. A border-left on every step but the first draws one line
   BETWEEN each pair and none at the outer edges, which is what makes the row
   read as one object rather than four cards. */

.how-it-works-section .steps-row .step-1 {
  padding: 0 22px;
  border-left: 1px solid #C9C7BC;
  text-align: left;
}

.how-it-works-section .steps-row .step-1:first-child {
  padding-left: 0;
  border-left: 0;
}

.how-it-works-section .steps-row .step-1:last-child {
  padding-right: 0;
}

/* ⚠⚠ THE FIXED-HEIGHT ICON BOX IS WHAT KEEPS THE FOUR AMBER RULES ON ONE LINE.
   The four embeds each size their own icon and each may change; this wrapper
   does not care what is inside it. The icon sits on the BOTTOM of the box so
   art with different amounts of transparent padding still bottoms out level. */

.how-it-works-section .steps-row .step-1 .w-embed {
  align-self: stretch;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 0 0 16px;
}

.how-it-works-section .steps-row .step-1 .w-embed > * {
  width: 150px;
  margin: 0;
}

.how-it-works-section .steps-row .step-1 h1,
.how-it-works-section .steps-row .step-1 h3 {
  margin: 0;
  text-align: left;
}

/* the amber rule. 36x4, HER RULING S234. It is a pseudo on the heading rather
   than a border, so it cannot be pushed out of line by anything below it. */

.how-it-works-section .steps-row .step-1 h1::after,
.how-it-works-section .steps-row .step-1 h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background-color: #E5AD43;
  margin: 12px 0 14px;
}

.how-it-works-section .steps-row .step-1 p {
  margin: 0;
  max-width: none;
  text-align: left;
}

/* max-width:none is deliberate and it beats the embed's 24ch cap. At a 920
   container the four columns are ~190px of content each, which is NARROWER
   than 24ch — so the cap is inert here and only adds rag. CLAUDE'S CALL. */

/* ---- HOW IT WORKS, TABLET ----------------------------------------------- */
/* 2x2 at this width. CLAUDE'S PICK, REVERSIBLE, AND NOBODY HAS LOOKED AT IT —
   four columns inside 991 leaves ~135px of text per column, which rags to
   about three words a line. Her ruled phone rows start at 767. */

@media screen and (max-width: 991px) {

  .how-it-works-section .how-it-works-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .how-it-works-section .how-it-works-container .steps-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }

  .how-it-works-section .steps-row .step-1:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .how-it-works-section .steps-row .step-1:nth-child(even) {
    padding-right: 0;
  }

  .how-it-works-section .steps-row .step-1:nth-child(3) {
    border-left: 0;
  }
}

/* ---- HOW IT WORKS, PHONE ------------------------------------------------ */
/* HER RULING S234: icon LEFT, text RIGHT, one row per step, hairline between
   rows. It knowingly replaces the S224 2x2 — at 2x2 the column is ~156px and
   the paragraphs rag to sixteen characters a line. */

@media screen and (max-width: 767px) {

  .how-it-works-section .how-it-works-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* the header steps down with the section, keeping its distance from the row */
  .how-it-works-section .how-it-works-container .h2-dark,
  .how-it-works-section .how-it-works-container > h1,
  .how-it-works-section .how-it-works-container > h2 {
    font-size: 16px;
    margin: 0 0 24px;
  }

  .how-it-works-section .how-it-works-container .steps-row {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    column-gap: 0;
  }

  .how-it-works-section .steps-row .step-1 {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: start;
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid #C9C7BC;
  }

  .how-it-works-section .steps-row .step-1:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .how-it-works-section .steps-row .step-1:last-child {
    padding-bottom: 0;
  }

  .how-it-works-section .steps-row .step-1 .w-embed {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    height: 96px;
    margin: 0;
  }

  .how-it-works-section .steps-row .step-1 .w-embed > * {
    width: 96px;
  }

  .how-it-works-section .steps-row .step-1 h1::after,
  .how-it-works-section .steps-row .step-1 h3::after {
    margin: 10px 0 10px;
  }
}

/* ---- HOW IT WORKS, PHONE PORTRAIT --------------------------------------- */

@media screen and (max-width: 479px) {

  .how-it-works-section .steps-row .step-1 {
    grid-template-columns: 76px 1fr;
    column-gap: 14px;
    padding: 20px 0;
  }

  .how-it-works-section .steps-row .step-1 .w-embed {
    height: 76px;
  }

  .how-it-works-section .steps-row .step-1 .w-embed > * {
    width: 76px;
  }
}

/* ---- THE CLOSET PREVIEW ------------------------------------------------- */
/* v13 (S238). "What you'll find" — the featured band.
   v13, all hers: the heading and eyebrow go INK and the heading moves IN FRONT
   of the cards, so the word "find" stays readable the whole way across instead
   of being clipped where the cards cover it. Cream measures 3.23 on this coral
   and 1.06 on a white card — it could never have crossed one. The CTA moves to
   the top right, the section loses padding top and bottom, cards 2 and 4 get a
   shorter photo box than 1 and 3, and the phone gets shorter photos and its
   star back.
   ⚠ THE GROUND STAYS CORAL. Ink was measured on all seven palette colours: navy
   2.04 (dead), coral 4.50, green 4.55, pink 7.87, amber 8.54, cream ~14. Cream
   is unavailable because how-it-works directly above is cream and the two bands
   would have no edge; amber would swallow the ribbon. HER RULING: coral.
   v12 fixed four faults found on the live render: the cards were pulled up so
   far they buried the word "find" (-96px against 128px type), the star was
   positioned 478px past the end of the word it belonged beside and landed on
   card 3, the grid stretched every card to the row height so the bottoms were
   flush and card 1 carried 66px of dead cream, and the cream tile read as a
   white card with a cream label because the photos are shot on white.
   Full-bleed coral, an amber marquee ribbon straddling the seam above it,
   oversized cream serif type, four cream cards pulled up over the type on
   desktop, one amber star, a cream pill CTA.
   THE GRID SHIPS EMPTY AND THE SCRIPT PAINTS THE CARDS INTO IT, so nothing
   here can ever render a row of blank boxes.
   SCOPE: every selector is a .closet-preview-* class. The heading no longer
   wears .h2-dark, so nothing in here can reach the how-it-works section. */

.closet-preview-section {
  position: relative;
  background-color: #E54F25;
  overflow-x: clip;
  padding: 0 0 calc(var(--section-gap) + var(--ribbon-height) / 2);
}

/* THE SECTION HIDES ONLY WHEN THE SCRIPT SAYS SO. The class is added by the
   script on an empty featured pool. Nothing is hidden by default, so a script
   that never runs leaves the section visible rather than blank — the S224
   rule, bought by a section that rendered permanently empty. */
.closet-preview-section.is-empty {
  display: none;
}

/* A percentage width inside a Webflow embed can collapse to zero, because
   div.w-embed shrink-wraps its content. The wrapper is given its width here
   rather than left to inherit one. */
.closet-preview-section .w-embed {
  display: block;
  width: 100%;
}

/* THE RIBBON. It straddles the cream-to-coral seam by exactly half its own
   height, so the height and the negative margin are locked together — the
   margin is written as a calc off the height variable so they cannot drift.
   overflow:hidden lives on the band, NEVER on the section, or the half that
   sits up in the cream above would be clipped away. */
.closet-preview-ribbon {
  --ribbon-gap: 30px;
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--ribbon-height);
  margin-top: calc(var(--ribbon-height) / -2);
  background-color: #E5AD43;
  overflow: hidden;
}

/* TWELVE SETS IN THE EMBED, SLIDING -8.3333%, i.e. 100 divided by 12.
   CHANGE THE NUMBER OF SETS AND THIS PERCENTAGE MUST CHANGE WITH IT, or the
   strip jumps once per cycle — silently, and only on a screen wide enough to
   show the seam. The eleven sets that are not sliding off must cover a band
   wider than the viewport; twelve holds to roughly 2560px. */
.closet-preview-ribbon-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: closet-preview-ribbon-slide 42s linear infinite;
}

.closet-preview-ribbon-set {
  display: flex;
  align-items: center;
  gap: var(--ribbon-gap);
  padding-right: var(--ribbon-gap);
}

.closet-preview-ribbon-word {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1E1A19;
  white-space: nowrap;
}

/* A DRAWN SHAPE, NEVER A TEXT GLYPH — a character renders differently on her
   phone than on the Mac. Ink on amber measures 8.54:1. */
.closet-preview-ribbon-star {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-color: #1E1A19;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ⚠⚠⚠ THE CLOSING RIBBON — v30 (S244). HER RULING: dark green #1F5C38, cream
   text, RIGHT END DOWN, stars for now (she may swap the mark later), STRADDLING
   the bottom seam exactly as the top one straddles the top. Approved string,
   verbatim, no terminal full stop: "Every piece, checked by hand"
   ⚠⚠ IT REUSES .closet-preview-ribbon-track / -set / -word / -star, so the type
   ladder and the star already scale per breakpoint. ONLY the band differs.
   ⚠⚠⚠ overflow-x:clip ON THE SECTION IS LOAD-BEARING AND overflow:hidden WOULD
   BREAK IT. The band is 112% wide so the rotation cannot expose a wedge of coral
   at either end, and anything wider than the viewport would otherwise give the
   whole page a horizontal scrollbar. `clip` clips sideways while leaving the
   vertical axis VISIBLE, which is what lets both ribbons hang past their section.
   `hidden` forces the other axis to auto and would cut the straddle off.
   ⚠ OLD SAFARI (<16) TREATS clip AS visible — a horizontal scrollbar there, not a
   broken layout. Accepted knowingly.
   ⚠⚠ THE SECTION'S BOTTOM PADDING IS NOW calc(--section-gap + --ribbon-height/2),
   THE SAME SHAPE how-it-works USES ABOVE THE TOP RIBBON, so the VISIBLE coral
   below the cards equals --section-gap at every width. A literal value there
   renders as gap-minus-half-a-ribbon. Both edges of this section are now owned by
   a ribbon; neither can take the token directly.
   ⚠ THE LOWER HALF LIES OVER THE CLOSET STANDARD PHOTO, HER CHOICE, seen on a
   rendered comparison against the alternative of sitting inside the coral.
   z-index 3 keeps it above that photo — if it ever disappears, look for a
   position + z-index on .closet-standard-section before looking here.
   ⚠⚠⚠ THE box-shadow IS THE CORAL BACKING AND IT IS NOT DECORATION — v31 (S244),
   hers, off the live render. A TILTED RIBBON ON A LEVEL SEAM OPENS A WEDGE: the
   coral section ends horizontally, the ribbon does not, so a triangle of whatever
   is BEHIND shows through at the end that dips. Here that is
   .closet-standard-photo. A hard-edged shadow (blur 0, spread 0) is a copy of the
   band offset upward, IT ROTATES WITH THE ELEMENT, and overflow:hidden does not
   clip it because a shadow is outside the border box. A ::before could not do this
   — overflow:hidden would eat it.
   ⚠⚠ 40px IS A CEILING, NOT A TASTE VALUE. The clearance between the product cards
   and the ribbon's top edge is exactly --section-gap (44px), because the section's
   bottom padding is gap + ribbon-height/2 and the ribbon's own top edge sits
   ribbon-height/2 above the seam. GO PAST 44 AND THE CORAL PAINTS OVER THE BOTTOM
   OF THE WHITE CARDS, since this element sits at z-index 3 above them.
   ⚠⚠ AND IT IS A FIXED NUMBER AGAINST A WEDGE THAT GROWS WITH VIEWPORT WIDTH. The
   wedge is (0.56 x viewport x tan 2.8deg) - ribbon-height/2, so 40px covers to
   roughly a 2300px viewport and a sliver of photo reappears at the right end
   beyond that. RAISING THE ROTATION OR THE 112% WIDTH GROWS THE WEDGE TOO. */

.closet-preview-ribbon-closing {
  --ribbon-gap: 30px;
  position: relative;
  z-index: 3;
  width: 112%;
  margin-left: -6%;
  height: var(--ribbon-height);
  margin-top: 0;
  margin-bottom: calc(var(--ribbon-height) / -2);
  background-color: #1F5C38;
  /* ⚠⚠⚠ THE CORAL SHADOW FILLS THE WEDGE ABOVE THE TILTED RIBBON. 40px, AND
     44px IS A HARD CEILING — v40 (S248) REVERTS S247's 120px, WHICH WAS A
     REGRESSION THIS FILE HAD ALREADY WARNED AGAINST IN WRITING. At 120 the
     shadow is a copy of the band painted 120px higher at z-index 3, so it laid
     a solid coral bar STRAIGHT ACROSS THE BOTTOM OF THE WHITE PRODUCT CARDS.
     Seen on her live Mac; the cards were sliced mid-line.
     ⚠⚠ IT IS NOT FREE TO OVERSHOOT AND THE S247 NOTE SAYING SO WAS FALSE. The
     clearance between the cards and the ribbon's top edge is exactly
     --section-gap (44px), so any value past 44 reaches the cards.
     ⚠⚠ AND THE REASON GIVEN FOR RAISING IT WAS WRONG TOO. The wedge is
     (0.56 x viewport x tan 2.8deg) - ribbon-height/2, so 40px covers to roughly
     a 2,300px viewport — about 12px of wedge on a 1,280px Mac. 40 was never
     running out on her screen; the grey she was seeing was the Webflow
     background-image.svg PLACEHOLDER on the page-level Body class, cleared in
     the Designer at S248, and NOT this shadow failing.
     ⚠ IF A SLIVER EVER REAPPEARS BEYOND ~2,300px, THE ANSWER IS NOT A BIGGER
     NUMBER — the ceiling is 44. It is a tilted coral wedge on
     .closet-standard-section's own top edge, painting DOWNWARD into the photo
     instead of upward into the cards. Scoped, never built. */
  /* ⚠⚠⚠ SHADOW DELETED v48 (S253), SAME REASON AS THE INSTAGRAM RIBBON: the
     wedge grows with viewport width and 40px runs out past ~1500px, which is
     the pale sliver visible at this ribbon's left end on her 2560 screenshot.
     THIS REVERSES v31, WHICH WAS APPROVED WORK — reversible in one line, and
     the 44px ceiling note above stays true for anyone who restores it. */
  transform: rotate(2.8deg);
  overflow: hidden;
}

/* ⚠⚠⚠ THE CLOSING RIBBON'S BLEED HAS TO BE CLIPPED BY ITS EMBED — S247, AND ITS
   ABSENCE WAS 19px OF HORIZONTAL PAGE SCROLL ON A PHONE, FOUND BY MEASUREMENT.
   The ribbon is width:112% margin-left:-6%, deliberately, so its ends can never
   show (her S231 rule). It clips its own 3,174px track with overflow:hidden —
   but the body-level div.w-embed AROUND it is overflow:visible, so the ribbon's
   own 6% bleed escaped to the document and dragged the whole page sideways.
   On a wide desktop it is lost in the margin; on a 317px screen it is the fault.
   ⚠⚠ NOT `body{overflow-x:hidden}`. That works and it ALSO KILLS THE STICKY
   HEADER — a scroll container on body breaks position:sticky, and .site-header
   is sticky site-wide.
   ⚠ :has SCOPES IT TO THIS ONE EMBED. The page carries several w-embeds and a
   bare .w-embed rule would clip all of them, including the hero marquee, whose
   clipping is already correctly owned by hero-container.

   ⚠⚠⚠ `overflow-x: clip`, NEVER `overflow: hidden` — v37 SHIPPED hidden AND CUT
   THE RIBBON IN HALF ON THE LIVE PAGE. The ribbon carries
   margin-bottom: calc(var(--ribbon-height) / -2) so it deliberately hangs half
   its own height BELOW its box and straddles the seam. overflow:hidden clips
   BOTH AXES, so it took the bleed sideways and sliced the overhang off at the
   same time — a horizontal cut straight through the words, with the next
   section starting at the cut.
   ⚠⚠ AND `overflow-x: hidden` IS NOT THE FIX EITHER. Per spec, hidden on one
   axis forces the other axis to `auto`, which makes a scroll container and
   clips the overhang all over again. **`clip` IS THE ONLY VALUE THAT LEAVES THE
   OTHER AXIS GENUINELY `visible`.**
   ⚠ OLD SAFARI (<16) IGNORES IT and falls back to visible, which returns the
   19px of sideways scroll and breaks nothing. Correct failure direction. */

.w-embed:has(> .closet-preview-ribbon-closing) {
  overflow-x: clip;
}

.closet-preview-ribbon-closing .closet-preview-ribbon-word {
  color: #EDECE0;
}

.closet-preview-ribbon-closing .closet-preview-ribbon-star {
  background-color: #EDECE0;
}

@keyframes closet-preview-ribbon-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-8.3333%); }
}

.closet-preview-container {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 60px 0;
}

/* INK AS OF v13, FOLLOWING THE HEADING. The old cream measured 3.23:1, which
   fails AA for normal text and only cleared the bar because 20px bold counts as
   large — the size was carrying the contrast. Ink measures 4.50:1 and passes at
   any size, so the 20px is now a design choice rather than a legibility floor.
   DO NOT PUT CREAM BACK HERE WITHOUT PUTTING THE SIZE RULE BACK WITH IT. */
.closet-preview-eyebrow {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E1A19;
  margin: 0 0 16px;
}

/* THE max-width IS WHAT BREAKS THE HEADING ONTO TWO LINES. There is no line
   break in the markup, so this number is the only thing holding the shape the
   design was approved on. It is the first thing to check on a render, and the
   lever if it comes out wrong: lower it to force the break sooner, raise it to
   let more onto line one. Instrument Serif loads at 400 only, so the size does
   all the work and any heavier weight would be faked by the browser.
   ⚠⚠ THE z-index PUTS THE TYPE IN FRONT OF THE CARDS AND THE INK IS WHAT MAKES
   THAT SURVIVABLE. Ink reads 4.50 on the coral and about 15 on a white card, so
   one colour crosses both. Cream in front of a white card measures 1.06 — the
   word would vanish rather than be clipped. IF THE HEADING EVER GOES BACK TO A
   LIGHT COLOUR, THE z-index HAS TO GO BACK UNDER THE CARDS IN THE SAME EDIT. */
.closet-preview-heading {
  position: relative;
  z-index: 5;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 128px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #1E1A19;
  max-width: 560px;
  margin: 0;
}

/* PLACEHOLDER FILL, exactly like the two hero seam stars. When her PNG lands
   it is one property swap on this same element — drop background-color and
   clip-path, add background-image, background-size:contain and
   background-repeat:no-repeat. NO DESIGNER WORK.
   The top and left figures are positioned against the container and have
   never been looked at. They are a guess and they need one render. */
.closet-preview-star {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 248px;
  top: 229px;
  right: auto;
  bottom: auto;
  width: 110px;
  height: 110px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
}

/* CARDS 2 AND 4 GET A SHORTER PHOTO BOX THAN 1 AND 3 — HER RULING S238, to break
   up the white. The box is the only thing that changes; object-fit stays cover,
   so a shorter box crops further into the photo rather than shrinking it.
   THE OVERLAP IS A NEGATIVE MARGIN ON THE ROW plus a per-card offset, never
   absolute coordinates on individual cards. That is what lets the ragged line
   survive any width and leaves ONE number to tune. */
.closet-preview-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 22px;
}

/* THE OVERLAP ONLY EXISTS ONCE THERE ARE CARDS. An empty grid has no height,
   so the negative margin would drag the CTA up across the heading — which is
   exactly what a script that never runs would leave behind. :not(:empty) makes
   the no-cards state land on plain spacing instead.
   BOTH BANDS ARE WRITTEN AT :not(:empty) DELIBERATELY: the pseudo-class adds
   specificity, so a bare .closet-preview-grid in the phone block would LOSE to
   this desktop rule at every width. */
.closet-preview-grid:not(:empty) {
  margin-top: -40px;
}

.closet-preview-grid > *:nth-child(1) { margin-top: 0; }
.closet-preview-grid > *:nth-child(2) { margin-top: 36px; }
.closet-preview-grid > *:nth-child(3) { margin-top: 12px; }
.closet-preview-grid > *:nth-child(4) { margin-top: 48px; }

.closet-preview-grid > *:nth-child(2) .closet-preview-card-media,
.closet-preview-grid > *:nth-child(4) .closet-preview-card-media {
  aspect-ratio: 1 / 1;
}

/* THE TILE IS WHITE AS OF v12 — HER RULING S238, TAKEN OFF A THREE-WAY MOCKUP
   AND KNOWINGLY. It shipped cream at v10 and the cream lost: her product photos
   are shot on WHITE and fill the media box edge to edge, so a cream card read as
   a white card with a cream label stuck underneath rather than as one object.
   The other two options were leaving it and insetting the photo in cream.
   ⚠ THE COST SHE WAS TOLD ABOUT AND ACCEPTED: the eyebrow, the heading and the
   CTA pill are all cream #EDECE0, so the cards are now the only white thing in
   the section and the cream can read slightly dirty beside them. LOOK AT THE
   WHOLE SECTION, not a card, before judging that.
   ⚠ THE REAL FIX IS THE PHOTOGRAPHY. The day items are shot on cream this goes
   back to #EDECE0 and the tile is one object again. Still true: no photo ever
   touches the coral, and the item text is ink rather than a tint this page
   does not have. */
.closet-preview-card {
  display: block;
  background-color: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  color: #1E1A19;
  text-decoration: none;
}

.closet-preview-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: rgba(30, 26, 25, 0.06);
}

.closet-preview-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closet-preview-card-body {
  padding: 14px 16px 18px;
}

.closet-preview-card-name {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  min-height: 38px;
  color: #1E1A19;
}

.closet-preview-card-meta {
  font-family: Quicksand, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
  color: rgba(30, 26, 25, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Written at the class, never at the link tag. The site-wide All Links tag
   selector reaches all twenty pages and is read-only.
   ⚠ TOP RIGHT AS OF v13, HERS. It is positioned against .closet-preview-container
   rather than moved in the markup, so there was no Designer trip and the DOM
   order is unchanged — the link still follows the grid for a screen reader and
   for anyone tabbing. IT GOES BACK INTO FLOW ON THE PHONE, where a pill beside
   the heading would collide with it. */
.closet-preview-cta,
.closet-preview-cta:visited {
  position: absolute;
  top: 56px;
  right: 32px;
  z-index: 6;
  display: inline-block;
  margin-top: 0;
  padding: 15px 34px;
  border-radius: 50px;
  background-color: #1E1A19;
  color: #EDECE0;
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform .18s ease;
}

.closet-preview-cta:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .closet-preview-ribbon-track {
    animation: none;
  }
}

/* ---- THE CLOSET PREVIEW, TABLET ----------------------------------------- */
/* THE OVERLAP STAYS HERE. Her ruling: it is dropped entirely in the 767 block
   and never reduced, so no in-between value lives in this file. Nobody has
   looked at this width. */

@media screen and (max-width: 991px) {

  :root {
    --ribbon-height: 40px;
  }
  .closet-preview-container {
    padding: 52px 40px 0;
  }
  .closet-preview-cta,
  .closet-preview-cta:visited {
    top: 44px;
    right: 24px;
  }
  .closet-preview-heading {
    font-size: 92px;
    max-width: 400px;
  }
  .closet-preview-star {
    top: 184px;
    left: 176px;
    width: 62px;
    height: 62px;
  }
  .closet-preview-grid {
    gap: 16px;
  }
  .closet-preview-grid:not(:empty) {
    margin-top: -28px;
  }
}

/* ---- THE CLOSET PREVIEW, PHONE ------------------------------------------ */
/* NO OVERLAP AT ALL, 2x2, all four level. Her ruling, chosen over the half
   version: "the inbetween state is awkward." */

@media screen and (max-width: 767px) {

  :root {
    --ribbon-height: 34px;
  }

  .closet-preview-ribbon-closing {
    --ribbon-gap: 22px;
  }

  .closet-preview-ribbon {
    --ribbon-gap: 22px;
  }
  .closet-preview-ribbon-word {
    font-size: 13px;
  }
  .closet-preview-ribbon-star {
    width: 11px;
    height: 11px;
  }
  .closet-preview-container {
    padding: 40px 20px 0;
  }
  .closet-preview-heading {
    font-size: 64px;
    max-width: 280px;
  }
  /* THE STAR IS BACK ON THE PHONE — HER RULING S238. v10 hid it below 767 before
     anyone had seen that width. These two figures are positioned against the
     container and, exactly like the desktop pair before them, THEY ARE A GUESS
     THAT NEEDS ONE RENDER. */
  .closet-preview-star {
    display: block;
    top: 155px;
    left: 125px;
    width: 44px;
    height: 44px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  .closet-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  /* ALL FOUR PHOTO BOXES GO SQUARE ON THE PHONE — hers, "a lot shorter". Written
     at every nth-child so it matches the desktop rule's specificity; a bare
     .closet-preview-card-media here would lose to it on cards 2 and 4. */
  .closet-preview-grid > *:nth-child(1) .closet-preview-card-media,
  .closet-preview-grid > *:nth-child(2) .closet-preview-card-media,
  .closet-preview-grid > *:nth-child(3) .closet-preview-card-media,
  .closet-preview-grid > *:nth-child(4) .closet-preview-card-media {
    aspect-ratio: 1 / 1;
  }
  .closet-preview-grid:not(:empty) {
    margin-top: 36px;
  }
  .closet-preview-grid {
    align-items: stretch;
  }
  .closet-preview-grid > *:nth-child(1),
  .closet-preview-grid > *:nth-child(2),
  .closet-preview-grid > *:nth-child(3),
  .closet-preview-grid > *:nth-child(4) {
    margin-top: 0;
  }
  .closet-preview-cta,
  .closet-preview-cta:visited {
    position: static;
    top: auto;
    right: auto;
    margin-top: 40px;
  }
}

/* ---- THE CLOSET PREVIEW, PHONE PORTRAIT --------------------------------- */
/* Webflow's fourth breakpoint. Its own rules are unopposed below here unless
   this block speaks. The eyebrow stays at 19px so it clears the large-text
   contrast bar. */

@media screen and (max-width: 479px) {

  :root {
    --ribbon-height: 30px;
  }

  .closet-preview-ribbon-closing {
    --ribbon-gap: 18px;
  }

  .closet-preview-ribbon {
    --ribbon-gap: 18px;
  }
  .closet-preview-ribbon-word {
    font-size: 12px;
  }
  .closet-preview-container {
    padding: 34px 20px 0;
  }
  .closet-preview-star {
    left: 100px;
    top: 104px;
    right: auto;
    bottom: auto;
    width: 110px;
    height: 110px;
    display: block;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  }
  .closet-preview-eyebrow {
    font-size: 19px;
  }
  .closet-preview-heading {
    font-size: 52px;
    max-width: 228px;
  }
  .closet-preview-grid {
    gap: 12px;
  }
  .closet-preview-card-body {
    padding: 12px 12px 14px;
  }
  .closet-preview-card-name {
    font-size: 14px;
  }
}

/* ---- CLOSET STANDARD --------------------------------------------------- */

.closet-standard-section {
  background-color: #EDECE0;
}

.closet-standard-container {
  display: flex;
  align-items: stretch;
}

.closet-standard-photo {
  flex: 0 0 38%;
  background-color: #CCCAC5;
  min-height: 0;
}

.closet-standard-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 96px 72px 96px 64px;
}

.closet-standard-eyebrow {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #309359;
  margin: 0 0 30px;
}

.closet-standard-heading {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 112px;
  line-height: 0.92;
  color: #1E1A19;
  max-width: 5.5em;
  margin: 0 0 34px;
}

.closet-standard-body {
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.7;
  color: #1E1A19;
  max-width: 46ch;
  margin: 0 0 22px;
}

.closet-standard-closer {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.25;
  color: #1E1A19;
  max-width: 20ch;
  margin: 0 0 34px;
}

.closet-standard-cta,
.closet-standard-cta:visited {
  display: inline-block;
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #EDECE0;
  background-color: #E54F25;
  border-radius: 50px;
  padding: 16px 34px;
  text-decoration: none;
}

.closet-standard-cta:hover {
  background-color: #B23D22;
  color: #EDECE0;
}

/* S304, HERS: 20% SMALLER. 65 -> 52. This is the star overlapping the See the
   guidelines CTA — confirmed live S304, not by name: it measures left 590 / top 581
   against a CTA at left 619 / top 606, while .closet-standard-star-two sits 330px away
   and is untouched. left and top each moved +7 (half the 13px lost) so the star shrinks
   IN PLACE and keeps the same overlap with the button. Its containing block is NOT the
   section — the rule says left:35 where the live rect reads 590 — so these are relative
   nudges and must never be recomputed from a section-relative measurement.
   The 991 / 767 / 479 blocks all restate this rule, so this change is desktop only. */
.closet-standard-star {
  position: absolute;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 42px;
  top: 588px;
  right: auto;
  bottom: auto;
  width: 52px;
  height: 52px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
}

.closet-standard-star-two {
  position: absolute;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 365px;
  top: 248px;
  right: auto;
  bottom: auto;
  width: 82px;
  height: 82px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
}

@media screen and (max-width: 991px) {

  .closet-standard-photo {
    flex: 0 0 34%;
    min-height: 0;
  }

  .closet-standard-text {
    padding: 72px 48px 72px 44px;
  }

  .closet-standard-heading {
    font-size: 74px;
    margin-bottom: 26px;
  }

  .closet-standard-eyebrow {
    margin-bottom: 24px;
  }

  .closet-standard-body {
    font-size: 17px;
  }

  .closet-standard-closer {
    font-size: 23px;
  }

  .closet-standard-star {
    left: 258px;
    bottom: 74px;
    width: 38px;
    height: 38px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }

  .closet-standard-star-two {
    right: 62px;
    top: 96px;
    width: 60px;
    height: 60px;
  }

}

@media screen and (max-width: 767px) {

  .closet-standard-container {
    display: block;
  }

  .closet-standard-photo {
    min-height: 300px;
  }

  .closet-standard-text {
    padding: 56px 28px 64px;
  }

  .closet-standard-eyebrow {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .closet-standard-heading {
    font-size: 58px;
    margin-bottom: 22px;
  }

  .closet-standard-body {
    font-size: 16px;
    max-width: none;
  }

  .closet-standard-closer {
    font-size: 21px;
    max-width: none;
  }

  .closet-standard-star {
    left: auto;
    right: 34px;
    bottom: 78px;
    width: 34px;
    height: 34px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }

  .closet-standard-star-two {
    right: 30px;
    top: 74px;
    width: 52px;
    height: 52px;
  }

}

@media screen and (max-width: 479px) {

  .closet-standard-photo {
    min-height: 240px;
  }

  .closet-standard-text {
    padding: 44px 22px 52px;
  }

  .closet-standard-heading {
    font-size: 44px;
  }

  .closet-standard-closer {
    font-size: 19px;
  }

  .closet-standard-star {
    left: 161px;
    top: 318px;
    right: auto;
    bottom: auto;
    width: 65px;
    height: 65px;
    display: block;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }

  .closet-standard-star-two {
    left: 133px;
    top: 96px;
    right: auto;
    bottom: auto;
    width: 130px;
    height: 130px;
    display: block;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  }

}

/* ---- PRICING PREVIEW ---------------------------------------------------- */
/* v17 (S241). The footnote under the four plan cards.
   HER RULING S241: the savings figures are UP TO numbers built on the TOP OF
   THE ESSENTIALS BAND ($35 clothing, $30 toy) times the plan's cap, minus the
   monthly price. $180 / $305 / $105 / $370. The savings are CELEBRATED, not
   minimised, because the model assumes she swaps the items back and earns the
   next month -- that recurring loop is the claim.
   ⚠ THE WRITTEN GRADING BAND IS THE AUTHORITY, NOT THE MAX VALUE IN THE
   INVENTORY TABLE. A live read S241 returned an essentials clothing max of $68;
   that is an outlier or a mis-grade, NOT the top of the band. Her words: any
   line saying essentials clothing runs to $68 is completely wrong.
   ⚠ THE FOUR ASTERISKS ON THE CARDS POINTED AT NOTHING until this shipped.
   An asterisk promises the terms are explained somewhere, and on a section
   headed "Simple, honest pricing" it was pointing at empty space.
   ⚠ THE COPY IS HERS, VERBATIM, AND IT DELIBERATELY DOES NOT STATE THE
   PER-ITEM FIGURE -- her words, "i just dont want to be so obvious about my
   formula". Whether an UP TO claim needs its basis stated is owed to Shahin
   alongside the savings-substantiation question. DO NOT ADD THE $35 / $30
   TO THIS LINE WITHOUT HER.
   ⚠ TWO CLASSES ON PURPOSE. A single-class rule ties with Webflow's own and
   wins only on load order; (0,2,0) beats it outright. Same reason every
   button rule in this file is written at two classes. */

.pricing-preview-section .pricing-footnote {
  margin: 22px auto 0;
  max-width: 620px;
  padding: 0 24px;
  color: #EDECE0;
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/* ---- PRICING PREVIEW, PHONE --------------------------------------------- */
/* CLAUDE'S PICK, REVERSIBLE, AND NOBODY HAS LOOKED AT IT AT THIS WIDTH. */

@media screen and (max-width: 767px) {
  .pricing-preview-section .pricing-footnote {
    margin-top: 18px;
    font-size: 12px;
  }
}

/* ======================================================================
   PRICING PREVIEW — v23 (S242). ONE LINE PER PLAN, FULL WIDTH.
   HER RULING: ALL FOUR FACTS ARE EQUALLY IMPORTANT. Every layout that ranked
   them by size failed for the same reason, so they are one size on one line,
   separated by middots, told apart by ORDER and COLOUR rather than by scale.

   READS: name (serif) · swap count (YELLOW) · price · savings (NUNITO ITALIC)

   ⚠⚠ THE ROW TEXT IS PURE WHITE #FFFFFF, NOT CREAM — HER RULING S243, AFTER
   CHOOSING THE NATURAL-WIDTH ROW OVER AN EDGE-TO-EDGE ONE. It is the ONLY
   white text in this section: the heading, the sub line and the footnote are
   still cream #EDECE0, and the hairlines are still cream at 30%. DO NOT
   "UNIFY" THEM WITHOUT ASKING HER — the split is deliberate, and white on this
   green measures 8.15 against cream's 7.36, so the rows also read slightly
   crisper than everything around them, which is the point.

   ⚠⚠⚠ THE ROW IS INLINE TEXT AS OF v57, NOT A FLEX ROW, AND THE MARKUP WAS
   RESTRUCTURED TO MATCH. The four children were dragged in the Designer so
   the DOM order is name, SWAPS, price, savings — the reading order. Every
   `order` property is gone, because INLINE ELEMENTS IGNORE `order`: leave one
   in and it silently does nothing while looking like it governs the sequence.
   ⚠ THE OLD COMMENT HERE SAID "NOT ONE ELEMENT RESTRUCTURED" AND "DO NOT TIDY
   THE MARKUP" — true of the flex build, false from v57. The core doc had
   recorded the drags as shipped at S243 when they had not; the file was right
   and the doc was wrong. Both are corrected.

   ⚠⚠⚠ WHY INLINE AND NOT FLEX, WHICH IS THE WHOLE LESSON OF THIS SECTION: her
   approved mockup was ONE SENTENCE per plan. Flex made it FOUR BOXES pushed
   onto one line, and a flex item is atomic — it cannot share a line with its
   neighbour, so a narrow screen wraps box by box and leaves "The Basics ·"
   alone on a line with the rest of the width empty. Inline text fills each
   line and breaks like prose. SIX VERSIONS SHIPPED IN ONE DAY AT S242 TRYING
   TO MAKE FOUR BOXES BEHAVE LIKE A SENTENCE. Do not restore a flex row here.

   ⚠⚠ WEBFLOW'S OWN .pricing-card IS A FLEX COLUMN, so `display:block` below is
   load-bearing rather than a default — remove it and the four children stack
   again. Ours wins at (0,2,0) against Webflow's (0,1,0).

   ⚠⚠⚠ THERE IS NO WHITESPACE BETWEEN THE FOUR ELEMENTS IN THE MARKUP — read
   off innerHTML at v57, they are butted directly together. THAT ONE FACT
   DECIDES THE WHOLE WRAPPING MODEL AND IT COST TWO FAILED ATTEMPTS:

     · Inline with no other rule: the ONLY break opportunities on the line are
       the spaces INSIDE a phrase, so the browser breaks "6 clothing swaps"
       and strands "swaps" alone at the start of the next line.
     · nowrap on the items alone: each phrase holds together, and now the row
       has NO legal break point at all, so it runs off the right edge.

   ✅ THE ANSWER IS BOTH, IN THE RIGHT PLACES. Each item plus its trailing dot
   is ONE UNBREAKABLE UNIT (nowrap on the item, nowrap on its ::after), and a
   NORMAL BREAKABLE SPACE is injected BEFORE each following item by a ::before.
   THE BREAK MUST SIT OUTSIDE BOTH nowrap RUNS — that is why it is a ::before
   on the next item rather than a trailing space on the previous one, which
   was tried at v57 and does nothing.
   ⚠ THE ::before CARRIES ITS OWN font-size ON PURPOSE. Left to inherit, the
   gap would be set by whichever item follows it, so the space after the 35px
   plan name would be wider than the one after the 23px savings clause. One
   size keeps the rhythm even.

   ⚠⚠ THE SEPARATORS ARE TRAILING ::after MARKS, NOT LEADING ::before ONES,
   AND THAT IS WHAT MAKES THE LINE WRAP CLEANLY. Drawn before each item, a
   wrapped line STARTS with a stranded middot — seen on the phone at S242.
   Drawn after, with a non-breaking space glueing the dot to the word before
   it, the dot can only ever end a line. The savings clause takes none,
   because nothing follows it.

   ⚠⚠ .footer-tagline-dark IS WORN TWICE IN THIS SECTION — the sub line and
   the four plan names. THE DIRECT-CHILD COMBINATOR IS WHAT TELLS THEM APART.
   ====================================================================== */

.pricing-preview-section {
  position: relative;
  z-index: 1;
  background-color: #1F5C38;
  padding: var(--section-gap) 0 var(--section-gap);
}

/* THE SCALLOP. Circles of the band colour centred ON the section's bottom
   edge, so only their lower halves show and they hang into whatever comes
   next. NO IMAGE, NO MARKUP.
   ⚠⚠⚠ THE z-index PAIR IS LOAD-BEARING. section-categories comes LATER in
   the DOM and carries its own background, so without z-index on both the
   section and this pseudo-element the next section paints over the bumps and
   the edge silently goes flat.
   ⚠⚠ RADIUS, TILE AND OFFSET ARE ONE NUMBER IN THREE PLACES: tile = radius
   x 2, height = radius, bottom = minus radius. Change one, change all three. */

.pricing-preview-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 28px;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle at 28px 0, #1F5C38 27px, transparent 27.5px);
  background-size: 56px 56px;
  background-repeat: repeat-x;
}

/* THE CONTAINER IS THE LAYOUT. Heading left across two rows, sub line and
   button stacked on the right, the plan lines spanning underneath, footnote
   last. EVERY CHILD IS PLACED EXPLICITLY, so DOM order decides nothing.
   ⚠ 1140 RATHER THAN 920 — HER ASK S242, so each plan line runs as close to
   full width as it can. It is deliberately wider than how-it-works' 920 and
   narrower than the hero's field. */

.pricing-preview-section .pricing-preview-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  align-items: end;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ⚠⚠⚠ THE max-width IS WHAT MAKES THE HEADING TWO LINES, NOT THE FONT SIZE.
   The Closet Standard heading breaks because its text column is half a
   section wide, not because it is 112px — and this heading was predicted to
   wrap at 72 and did not, twice. 112 WAS TRIED AND REVERTED: it needs the
   full container, and taking the full container pushed the sub line and the
   button into the middle of an empty field, which was worse than the layout
   it replaced. 64 IS THE SIZE THAT KEEPS HER COMPOSITION. This one number is
   the lever if the break lands in the wrong place. */

/* ⚠⚠ padding-left:0 BEATS A WEBFLOW PROPERTY NOTHING HERE HAD OPPOSED — v28 (S244).
   Webflow sets a LEFT PADDING on .h2-light (15px measured at 386px, 20px at 815px,
   per breakpoint), so the heading's text started right of the sub line, the cards
   row and the star, which all sit on the container's own padding edge. margin:0
   was already here and could never have caught it. FOUND BY PRINTING TWO
   ELEMENTS' LEFT EDGES TOGETHER, not by reading either one alone — same species
   as the hero's text-align:center. This selector is (0,3,0) against Webflow's
   (0,1,0) and A MEDIA QUERY ADDS NO SPECIFICITY, so the base block kills it at
   all four widths and the breakpoint blocks need no repeat.
   ⚠ THE VERTICAL PADDING IS LEFT ALONE ON PURPOSE — part of the approved
   composition, and she asked for a left-edge fix, not for the heading to move up. */

.pricing-preview-section .pricing-preview-container > .h2-light {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding-left: 0;
  max-width: 520px;
  color: #EDECE0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.98;
  text-align: left;
}

/* THE ITALIC WORD. Instrument Serif italic is a REAL loaded face on this page,
   measured at S232 — not a synthesised slant. It hangs off the <em> the
   Designer writes when a word is italicised, so IF THAT MARKUP IS EVER LOST
   THE PINK SILENTLY GOES WITH IT. That happened once at S242 and the fix was
   one click, not a CSS change. */

.pricing-preview-section .pricing-preview-container > .h2-light em {
  font-style: italic;
  color: #E796A9;
}

/* ⚠⚠⚠ THE STAR IS A GRID ITEM, NOT A COORDINATE AND NOT AN INLINE MARK —
   HER RULING S243, PICKED OFF A THREE-OPTION MOCKUP SHOWN AT BOTH WIDTHS.
   IT HAS NOW BEEN ALL THREE THINGS. It began as an absolutely positioned DIV
   at left:47%, which landed it on the "i" in "pricing" the first time the
   heading changed size. It became the heading's inline ::after, which followed
   the text but tied it to the heading. IT IS NOW ITS OWN CELL: column 2 row 1
   on desktop, which sits it directly above the Learn more button, and row 3
   beside the button on a phone. NO COORDINATES AT EITHER WIDTH, so nothing to
   go stale when the copy reflows.
   ⚠⚠ IT IS A PLACEHOLDER SHAPE AND SHE HAS NOT CHOSEN THE ARTWORK. When her
   PNG lands it is ONE PROPERTY ON THIS SAME PSEUDO-ELEMENT — drop
   background-color and clip-path, add background-image /
   background-size:contain / background-repeat:no-repeat. NO DESIGNER WORK.
   ⚠ SIZED IN px, NOT em, BECAUSE IT NO LONGER LIVES INSIDE THE HEADING. That
   is the cost of the move: it needs one size per breakpoint instead of none.
   ⚠ THE .pricing-heading-star DIV IS STILL DELETED FROM THE DESIGNER. */

/* S304, HERS: THE STAR MOVES RIGHT AND FLOATS BESIDE THE LEARN MORE BUTTON.
   ⚠⚠⚠ ANCHORED FROM THE RIGHT EDGE, NEVER A NEW `left`. THERE IS NO 991 OVERRIDE ON
      THIS RULE — the next one down is 767 — so a fixed left:930 holds at 1240 and hangs
      the star off the container between 768 and 991, where the container is ~300px
      narrower. The button is justify-self:end, so right-anchoring keeps the SAME gap
      from it at every width and cannot drift out of step with a breakpoint. Measured
      live S304: container 1240 wide, button left 1028 w152, i.e. 60px off the right
      edge; 228 puts a 16px gap between the star and the button.
   ⚠ top:52 centres it on the button (button 73 + 44/2 = 95; star 52 + 84/2 = 94).
   ⚠⚠ pointer-events:none IS NEW AND IS NOT COSMETIC. This rule never had it, and the
      star now sits inches from a live CTA. */
.pricing-preview-section .pricing-preview-container::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: auto;
  top: 52px;
  right: 228px;
  bottom: auto;
  width: 84px;
  height: 84px;
  position: absolute;
  /* S304b: it was the only star on the page that never turned — it is a pseudo-element
     and was in no spin entry. home.js writes --ks-star-rot to the CONTAINER and this
     reads it. NO transform may ever be added to this rule (see the hero star). */
  rotate: var(--ks-star-rot, 0deg);
  pointer-events: none;
  margin: 0;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
}

.pricing-preview-section .pricing-preview-container > .footer-tagline-dark {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  max-width: 430px;
  margin: 16px 0 0;
  color: #EDECE0;
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
}

/* THE SUB LINE CARRIES A NESTED SPAN wearing .body-text-light. Neutralised
   rather than styled, so the sentence reads as one thing whether that span
   survives a future copy paste or not. */

.pricing-preview-section .pricing-preview-container > .footer-tagline-dark .body-text-light {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.pricing-preview-section .pricing-preview-container > .btn-primary {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin: 0;
}

.pricing-preview-section .pricing-cards-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display: block;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
}

/* THE CARD BECOMES THE LINE. Fill, radius and shadow are cleared here rather
   than in the Designer, so the Style panel keeps the card as it was and this
   page-linked file owns the whole look.
   ⚠ THE TYPE IS SET ON THE CARD and inherited by three of its four children,
   so the line is one size by construction rather than by four rules agreeing. */

/* ⚠⚠⚠ THE ROW TYPE IS FLUID AND IT REPLACES FOUR BREAKPOINT LADDERS — HER
   RULING S243, THE "FULLER" SCALE, PICKED OFF AN INTERACTIVE MOCKUP. She
   rejected growing the GAPS as the window widens and asked for the TEXT to
   grow instead, so space-between is gone and the row is packed left with the
   separators doing the separating.
   ⚠⚠ THE vw FACTORS ARE DERIVED, NOT TASTE: each cap divided by 1188, which is
   where .pricing-preview-container hits its 1140 max-width plus its padding.
   PAST 1188 THE TYPE MUST STOP GROWING or the longest row overflows the
   container — that is what the third clamp argument is for. Change the
   container's max-width and all three vw factors move with it.
   ⚠ 28 / 35 / 23 puts the LONGEST row at roughly 95% of the line and the
   shortest at about 75%. Ragged right is structural: the rows differ in length
   by about 27%, so no single size can fill all four. DO NOT RAISE THE CAPS TO
   CLOSE IT — the longest row wraps first, and it wraps silently.
   ⚠ THE FLOORS (16 / 20 / 14) ARE THE PHONE SIZES and are deliberately larger
   than the ladder they replaced (15/19/13 and 14/18/12), her ask. */

.pricing-preview-section .pricing-card {
  display: block;
  width: auto;
  max-width: none;
  padding: 14px 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(237, 236, 224, 0.3);
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.36vw, 28px);
  line-height: 1.5;
  color: #FFFFFF;
}

.pricing-preview-section .pricing-cards-row .pricing-card:last-child {
  border-bottom: 1px solid rgba(237, 236, 224, 0.3);
}

/* THE READING ORDER, WHICH IS NOT THE MARKUP ORDER. */

.pricing-preview-section .pricing-card > .footer-tagline-dark {
  display: inline;
  white-space: nowrap;
  margin: 0;
  color: #FFFFFF;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(20px, 2.95vw, 35px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

/* THE SWAP COUNT CARRIES THE YELLOW — HERS, moved here off the savings clause.
   It is the one coloured thing on the line.
   ⚠⚠ MEASURED AND KNOWINGLY ACCEPTED: #EDA920 reads 3.89 against this green,
   under the 4.5 small text wants. She was shown the number and every
   alternative that clears it — gold #F7DE8A at 5.96, a pill at 8.54, 19px bold
   where the bar drops to 3:1 — and chose this. DO NOT "CORRECT" THE HEX OR THE
   SIZE TO FIX A CONTRAST SCORE. */

.pricing-preview-section .pricing-card > .body-text-dark {
  display: inline;
  white-space: nowrap;
  margin: 0;
  color: #EDA920;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.pricing-preview-section .pricing-card > .h3 {
  display: inline;
  white-space: nowrap;
  margin: 0;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
  text-align: left;
}

/* THE SAVINGS CLAUSE IS THE ONLY NUNITO ON THIS SITE, AND IT IS HERE FOR ONE
   REASON: QUICKSAND HAS NO ITALIC AT ANY WEIGHT. font-style:italic on
   Quicksand is a browser-synthesised shear, which on a rounded geometric face
   turns the circles oval and smears the terminals. She picked Nunito over
   Poppins and Rubik off a rendered comparison because it is the only one of
   the three with ROUNDED TERMINALS. ⚠ IT IS SCOPED TO THIS ONE CLAUSE. */

/* ⚠ savings-text IS A DIV where the other three are P and H3. A div is block
   by default, so this declaration is the one that would silently be missed. */

.pricing-preview-section .pricing-card > .savings-text {
  display: inline;
  white-space: nowrap;
  margin: 0;
  color: #FFFFFF;
  font-family: Nunito, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.94vw, 23px);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

/* THE SEPARATORS — TRAILING, GLUED, AND NEVER ON THE LAST ITEM.
   ⚠⚠ THE NBSP GLUES THE DOT TO THE WORD BEFORE IT so a wrapped line can never
   START with a stranded middot. ⚠ v57 ALSO PUT A TRAILING SPACE IN HERE AND IT
   WAS THE WRONG MECHANISM — a space inside a nowrap run is not a break
   opportunity. It is reverted; the break lives in the ::before below. */

.pricing-preview-section .pricing-card > .footer-tagline-dark::after,
.pricing-preview-section .pricing-card > .body-text-dark::after,
.pricing-preview-section .pricing-card > .h3::after {
  content: "\00A0\00B7";
  white-space: nowrap;
  color: #FFFFFF;
  font-family: Quicksand, sans-serif;
  font-style: normal;
  font-size: clamp(16px, 2.36vw, 28px);
}

/* THE BREAK POINTS. One normal space before each item after the first, sitting
   outside every nowrap run. The plan name takes none — nothing precedes it. */

.pricing-preview-section .pricing-card > .body-text-dark::before,
.pricing-preview-section .pricing-card > .h3::before,
.pricing-preview-section .pricing-card > .savings-text::before {
  content: " ";
  white-space: normal;
  font-family: Quicksand, sans-serif;
  font-style: normal;
  font-size: clamp(16px, 2.36vw, 28px);
}

/* THE FOOTNOTE sits under the lines, left, with the asterisks it explains.
   v17's rules still set its colour, family and size; these win by coming
   later at the same specificity. */

.pricing-preview-section .pricing-footnote {
  grid-column: 1 / -1;
  grid-row: 4;
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}

/* ---- PRICING PREVIEW v23, TABLET ---------------------------------------- */
/* ⚠ CLAUDE'S PICKS AT EVERY WIDTH BELOW DESKTOP. */

@media screen and (max-width: 991px) {
  .pricing-preview-section::after {
    bottom: -22px;
    height: 22px;
    background-image: radial-gradient(circle at 22px 0, #1F5C38 21px, transparent 21.5px);
    background-size: 44px 44px;
  }

  .pricing-preview-section .pricing-preview-container {
    padding: 0 40px;
  }

  .pricing-preview-section .pricing-preview-container > .h2-light {
    font-size: 52px;
    max-width: 420px;
  }
}

/* ---- PRICING PREVIEW v23, PHONE ----------------------------------------- */
/* ⚠⚠⚠ NOTHING IS FORCED ONTO ITS OWN ROW AT THIS WIDTH ANY MORE. v22 gave the
   name and the savings clause flex-basis:100%, which cut the line into FOUR
   rows and left a stranded middot leading the price. THE LINE IS ALLOWED TO
   WRAP ON ITS OWN, which lands it on two rows at 390px, and the trailing
   separators mean a wrap can never start a line with a dot.
   ⚠ ONE LINE IS NOT AVAILABLE HERE AND IT IS ARITHMETIC, NOT TASTE: the
   longest row is about 65 characters, which needs roughly 480px at a readable
   size. DO NOT SHRINK THE TYPE TO CHASE IT. */

@media screen and (max-width: 767px) {
  .pricing-preview-section .pricing-preview-container {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0 20px;
  }

  .pricing-preview-section .pricing-preview-container > .h2-light {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: none;
    font-size: 52px;
    text-align: left;
  }

  .pricing-preview-section .pricing-preview-container > .footer-tagline-dark {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 320px;
    margin: 10px 0 16px;
    text-align: left;
  }

  .pricing-preview-section .pricing-preview-container > .btn-primary {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  /* ⚠ THE STAR SHARES THE BUTTON'S ROW at this width and pushes to the far
     right, which is the arrangement she picked off the mobile mockup. Single
     column here, so column 2 does not exist — it must be column 1. */
  .pricing-preview-section .pricing-preview-container::after {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    width: 130px;
    height: 130px;
    margin-bottom: 0;
    margin-right: 24px;
    margin-block: -46px;              /* S303: the star is a GRID ITEM, so its
                                         height sets the row height. Without this
                                         a 130px star opens ~100px of green under
                                         the button. Negative block margin lets it
                                         overflow its own row instead. */
  }

  .pricing-preview-section .pricing-cards-row {
    grid-row: 4;
    margin-top: 20px;
  }

  .pricing-preview-section .pricing-footnote {
    grid-row: 5;
  }

  /* ⚠ column-gap WAS HERE AND IS GONE — it governed the flex row and does
     nothing on a block. Padding is the only thing this breakpoint changes. */
  .pricing-preview-section .pricing-card {
    padding: 12px 0;
  }

  .pricing-preview-section::after {
    bottom: -16px;
    height: 16px;
    background-image: radial-gradient(circle at 16px 0, #1F5C38 15px, transparent 15.5px);
    background-size: 32px 32px;
  }
}

/* ---- PRICING PREVIEW v23, PHONE PORTRAIT -------------------------------- */
/* ⚠⚠ WEBFLOW HAS FOUR BREAKPOINTS AND THIS FILE SPEAKS AT THREE. Below 479
   Webflow's own rules are unopposed unless this block says otherwise. */

@media screen and (max-width: 479px) {
  .pricing-preview-section .pricing-preview-container > .h2-light {
    font-size: 44px;
  }
}


/* ---- TABLET ------------------------------------------------------------ */

@media screen and (max-width: 991px) {

  .hero-section .home-hero-marquee {
    --marquee-gap: 34px;
    --marquee-fade: 60px;
    --logo-grimms: 23px;
    --logo-gap: 14px;
    --logo-janie: 19px;
    --logo-zara: 10px;
    --logo-lovevery: 21px;
    --logo-melissa: 19px;
    bottom: 14px;
    height: 38px;
  }
  .hero-section {
    padding: 28px 28px 28px;
  }

  .hero-section .hero-container {
    flex-direction: column;
    min-height: 0;
  }

  /* width:100% beats Webflow's own `.hero-left` rule setting width:40%, INERT at
     desktop (flex-basis 54% governs on the row's main axis) and LIVE here, where
     the container is a COLUMN and width becomes the cross axis. max-width:100%
     cannot help — 40% is already under it. A property doing a job from a
     different context, same species as the margin-left:auto trap. */
  .hero-section .hero-left {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    /* bottom 75 = the marquee's room in the tablet band. CLAUDE'S CALL, REVERSIBLE:
       she ruled 90 at desktop and 60 at phone, and nobody has looked at this width. */
    padding: 44px 36px 75px;
    margin: 0;
    order: 2;
  }

  .hero-section .h1-light-leftaligned {
    /* 54, up from 46, so the drop from 80 at the breakpoint is a step rather
       than a cliff. CLAUDE'S PICK AND NOBODY HAS LOOKED AT THIS WIDTH. */
    font-size: 54px;
    max-width: 18ch;
  }

  .hero-section .home-hero-media {
    flex: 0 0 auto;
    width: 100%;
    height: 320px;
    order: 1;
  }

  .hero-section .home-hero-star-upper {
    width: 84px;
    top: 320px;
    left: auto;
    right: 24px;
    /* S304b: `translate:`, NEVER `transform:` — see the base rule. A transform here
       composes with the scroll rotation and swings the star off the photo's bottom
       edge, which is the one thing top:320px exists to sit on. */
    translate: 0 -50%;
  }

  .hero-section .home-hero-star-lower {
    display: none;
  }
}

/* ---- PHONE ------------------------------------------------------------- */

@media screen and (max-width: 767px) {

  .hero-section .home-hero-marquee {
    --marquee-gap: 28px;
    --marquee-fade: 48px;
    --logo-grimms: 20px;
    --logo-gap: 13px;
    --logo-janie: 17px;
    --logo-zara: 8px;
    --logo-lovevery: 18px;
    --logo-melissa: 17px;
    bottom: 12px;
    height: 34px;
  }
  .hero-section {
    padding: 16px 16px 20px;
  }

  .hero-section .hero-container {
    border-radius: 18px;
  }

  .hero-section .hero-left {
    /* bottom 60 = the marquee's room on a phone. HER RULING S233, off a render. */
    padding: 32px 22px 60px;
  }

  .hero-section .hero-tagline {
    font-size: 11px;
    margin-bottom: 14px;
  }

  .hero-section .h1-light-leftaligned {
    font-size: 34px;
    max-width: 100%;
  }

  .hero-section .hero-subhead {
    font-size: 15px;
    margin-top: 16px;
    max-width: 100%;
  }

  /* ⚠⚠ THE 60px UNDER THE STEPS IS WEBFLOW'S, NOT THIS FILE'S — S247, MEASURED.
     .steps-row carries margin-bottom:60px from the Designer, and on a phone it
     stacked with the section's own 59px of ribbon-seam padding to put ~119px of
     empty cream between "Repeat" and the next section. HER CALL: too big.
     ⚠ PHONE ONLY, deliberately. The same 60px is live at desktop, where she has
     approved the render — this does not touch it. Claude's call, reversible.
     ⚠ THE SECTION'S OWN padding-bottom IS NOT THE LEVER AND MUST NOT BE TOUCHED:
     it is calc(--section-gap + --ribbon-height / 2), the arithmetic that makes
     the VISIBLE cream equal --section-gap once the ribbon straddles the seam. */
  .how-it-works-section .how-it-works-container .steps-row {
    margin-bottom: 0;
  }

  .hero-section .hero-highlights {
    font-size: 12px;
  }

  .hero-section .hero-buttons {
    margin-top: 24px;
    gap: 10px;
  }

  .hero-buttons .hero-button-primary,
  .hero-buttons .hero-button-secondary {
    font-size: 13px;
    padding: 13px 22px;
  }

  .hero-section .home-hero-media {
    height: 240px;
  }

  .hero-section .home-hero-star-upper {
    width: 68px;
    top: 240px;
    right: 16px;
  }
}

/* ---- SOURCES ONTO THE SPINE — v32 (S245) -------------------------------- */
/* ⚠⚠⚠ THIS SECTION'S MARKUP IS A WEBFLOW EMBED WITH ITS OWN <style> BLOCK, AND
   AN EMBED'S STYLE SITS IN THE BODY — LATER IN SOURCE ORDER THAN THIS FILE. SO
   IT WINS EVERY TIE AND LOSES EVERY SPECIFICITY CONTEST. The embed writes
   .ks-src and .ks-src-in at ONE class each, so every rule below carries TWO and
   beats it outright wherever it sits. DO NOT "SIMPLIFY" ANY OF THESE TO A
   SINGLE CLASS — that is a tie, and a tie loses to the embed silently.
   ⚠⚠ BOTH CLASSES BELOW LIVE INSIDE THE EMBED'S OWN MARKUP. THERE IS NO
   sources-section CLASS IN THE CHAIN — read live S245, the embed's parent is a
   Webflow-named div.code-embed-11.w-embed — so do not rescope these onto a
   section selector that does not exist.
   ⚠ THE EMBED'S OWN VERTICAL PADDING, clamp(48px,7vw,88px), IS LEFT ALONE ON
   PURPOSE. Only the horizontal padding is zeroed here. That vertical figure is
   roughly double --section-gap and is HERS TO RULE, not a drive-by.

   WHY IT WAS OFF THE SPINE: the embed centres a 720px column inside the band,
   which put its text at 365px on a 1451 viewport where the spine sits at 166.
   A CENTRED COLUMN AND A PADDING EDGE CANNOT AGREE AT ANY WIDTH — so the 720
   MEASURE MOVES OFF THE WRAPPER AND ONTO THE CHILDREN, and the wrapper then
   carries the same 1240/60/40/20 as every other section. */

.w-embed .ks-src {
  padding-left: 0;
  padding-right: 0;
}

.ks-src .ks-src-in {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}

/* the 720 measure she approved, now hanging off the spine instead of centred.
   The <hr> is a child too and is capped with the type, deliberately — a rule
   running the full 1240 would draw a line nothing else reaches. */
.ks-src .ks-src-in > * {
  max-width: 720px;
}

/* ---- SOURCES, TABLET ---------------------------------------------------- */

@media screen and (max-width: 991px) {

  .ks-src .ks-src-in {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ---- SOURCES, PHONE ----------------------------------------------------- */
/* ⚠ THE EMBED'S clamp(20px,5vw,40px) LANDED AT ~38px AT 767 AND ~24px AT 479,
   so the phone was off the spine by a different amount at every width rather
   than by a constant. This block is what makes the mobile edge match. NO 479
   OVERRIDE IS NEEDED — max-width:767 already covers it, and the spine is 20px
   at 767 and below. */

@media screen and (max-width: 767px) {

  .ks-src .ks-src-in {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---- PHONE PORTRAIT ---------------------------------------------------- */
/* Webflow's fourth breakpoint. Its own rules are unopposed below here
   unless this block speaks. hero-section carries a min-height from the
   Designer that leaves dead navy running under the card. */

@media screen and (max-width: 479px) {

  .hero-section .home-hero-marquee {
    --marquee-gap: 24px;
    --marquee-fade: 40px;
    --logo-grimms: 18px;
    --logo-gap: 11px;
    --logo-janie: 15px;
    --logo-zara: 8px;
    --logo-lovevery: 16px;
    --logo-melissa: 15px;
    bottom: 10px;
    height: 30px;
  }
  .hero-section {
    min-height: 0;
  }
}

/* ============================================================================
   THE FAQ  —  v43 (S252)
   ----------------------------------------------------------------------------
   The markup was built by hand in the Designer and PUBLISHED first, then read
   back off HER OWN CONSOLE before a line of this was written (§0: read the
   markup before writing CSS at it — the pricing rows cost nine versions of this
   file learning that). Every selector below was confirmed present in the served
   page. Nothing here is aimed at an element we hope exists.

   HER RULINGS S249/S250: ground #1C4A91 · photo panel #211B1A (v43: ON THE LEFT) with
   THE SAME EDGES AS THE HERO IMAGE · chevrons and CTA pill #EDA920 · star
   #F491A9 · ALL TEXT LIGHT #EDECE0. Layout option C, so the teaser line stays
   VISIBLE under every question whether the row is open or shut. ONE row open at
   a time. ONE CTA for the whole section.

   ⚠⚠ v43 (S252) MOVES THE PHOTO PANEL TO THE **LEFT** — HERS, OFF THE LIVE PAGE:
   with the photo on the right this section read as almost the same layout as the
   pricing band directly above it. It is ONE `order` line plus its mirror on the
   star. ⚠ IT KNOWINGLY TAKES THIS SECTION'S TYPE OFF THE SPINE: every other
   section on this page starts its text at the 1240 measure's left edge (S244),
   and the type now sits in the RIGHT half, so only its right edge lands on that
   measure. THAT IS WHAT SHE RULED — do not "correct" it back to the spine.
   ⚠ THE STACKED ORDER BELOW 991 IS UNCHANGED, photo still BELOW the questions.
   CLAUDE'S CALL, REVERSIBLE IN ONE `order` LINE: her complaint was about the
   desktop side-by-side, and the stack never resembled the pricing band.

   ⚠⚠⚠ THE CLOSED STATE IS SCOPED UNDER html.ks-motion AND SITS AT TOP LEVEL,
   DELIBERATELY OUTSIDE THE prefers-reduced-motion: no-preference BLOCK AT THE
   FOOT OF THIS FILE. Two reasons, both about failure direction.
   (1) home.js sets that flag as its FIRST act and binds the click handler in the
       same breath, so the thing that hides an answer and the thing that opens it
       arrive together. Script never arrives → no flag → ALL FOUR ANSWERS SIMPLY
       SIT OPEN. Her S224 rule: fail visible, never blank.
   (2) Put it inside the motion block instead and a reader who has asked for
       reduced motion gets rows that CANNOT OPEN — the click would toggle a class
       no rule reads. She still gets a working accordion here; it just snaps.

   ⚠⚠ CONTRAST, MEASURED NOT EYEBALLED: cream on navy 7.25 · ink on the amber
   pill 8.46 · amber chevron on navy 4.22 · pink star on navy 3.88. Both marks
   clear the 3.0 bar for a graphical object and the text clears AA at any size.
   ⚠ CREAM ON AMBER IS 1.72. THE CTA LABEL IS INK AND CAN NEVER BE CREAM.
   ⚠ THE PILL'S INK IS #1E1A19, the value header.css already uses site-wide. Her
   S249 palette names #211B1A and that difference is UNRULED — if she rules the
   other way it is one value in one place here.

   ⚠⚠ NO BRAND HEX IS FADED ANYWHERE BELOW (§2). The hairlines are a WHITE TINT
   over the navy — the sanctioned device, the same one the plan cards use for
   their value chip — never a watered-down cream.
   ============================================================================ */

/* ---- THE BAND AND THE TWO HALVES --------------------------------------- */
/* THE SECTION IS THE ROW. faq-container and faq-photo-panel are siblings with no
   wrapper between them, because the Designer build gave them none, so the
   section itself carries the centring: a 1240 measure with the gutter clamped at
   0, and the container's own 60px puts the type EXACTLY ON THE SPINE that every
   other section on this page sits on (S244). The photo panel then ends where the
   hero card ends. ⚠ max(0px, …) IS NOT DECORATION — a negative padding value is
   invalid and would drop the whole declaration, so the clamp is what keeps this
   from silently un-padding itself below 1240. */
.faq-section {
  --faq-gutter: max(0px, calc((100% - 1240px) / 2));
  --faq-photo: 38%;
  position: relative;
  background-color: #1C4A91;
  display: flex;
  align-items: stretch;
  padding: 88px var(--faq-gutter);
}

.faq-section .faq-container {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* v43: THE 60 AND THE 64 SWAPPED SIDES WITH THE PHOTO. The 60 is the spine
     measure and now sits on the RIGHT, because that is the edge of this column
     that still touches it; the 64 is the gap to the photo panel. text-align
     beats the centred inheritance the canvas showed before this file existed —
     set on the COLUMN so anything added later inherits it too, the same way
     .hero-left does it. */
  padding: 0 60px 0 64px;
  text-align: left;
}

/* ALL FOUR CORNERS ARE ROUNDED, NOT JUST THE OUTER TWO — CLAUDE'S CALL,
   REVERSIBLE IN ONE VALUE. Her ruling is "the same edges as the hero image", and
   that image's edges are the hero card's 24px radius. In the hero the photo's
   left edge is a SEAM against the cream card, so it is square; here there is no
   card, the left edge meets the navy ground, and a square edge there reads as a
   cut rather than a seam. ⚠ THE PANEL IS A DIV, NOT AN IMAGE, exactly like the
   hero's and the closet standard's. When her photo lands it is background-image
   / size:cover / repeat:no-repeat ON THIS SAME ELEMENT — NO DESIGNER WORK. */
.faq-section .faq-photo-panel {
  flex: 0 0 var(--faq-photo);
  min-height: 0;
  background-color: #211B1A;
  border-radius: 24px;
  /* v43: THE PHOTO IS ON THE LEFT, HERS. One line, and it is reset to 0 in the
     991 block — without that reset the stack would put a near-black block ABOVE
     the questions, which is a different decision and not the one she made. */
  order: -1;
}

/* THE STAR SITS ON THE SEAM — as of v43 the seam is the photo's RIGHT edge, so
   is arithmetic rather than a guessed number: the gutter, plus 38% of the row
   inside it, minus half the star. Change --faq-photo and the star follows.
   ⚠⚠ THE SPIN IS NOT HERE AND MUST NOT BE. home.js writes an inline `rotate:` on
   scroll; a rotate rule in this file would lose to it silently and read as dead.
   THE CLASS IS .faq-star AND home.js's SPIN LIST NAMES IT LITERALLY — that list
   is five explicit selectors read one at a time with querySelector, not a class
   match, so this star spins only because a sixth line was added there.
   ⚠ PLACEHOLDER FILL, same as the other five: when the PNG lands, drop
   background-color and clip-path, add background-image / size:contain /
   repeat:no-repeat. The element and its position do not change. */
.faq-section .faq-star {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  /* v43: MIRRORED WITH THE PHOTO. Identical arithmetic, measured from the other
     edge. ⚠⚠ THE 991 BLOCK MUST SET `left: auto` — it sets its own `right`, and
     a star carrying BOTH offsets plus a width is over-constrained and lands in
     the wrong place with nothing erroring. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 431px;
  top: 54px;
  right: auto;
  bottom: auto;
  width: 84px;
  height: 84px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
}

/* ---- TYPE --------------------------------------------------------------- */
/* THE EYEBROW IS A SANS HEADER, not a label — the same job and the same
   treatment as how-it-works' (S236).
   ⚠⚠ AMBER, HERS, v42, AND THE CONTRAST WAS MEASURED AND ACCEPTED BEFORE SHE
   RULED: #EDA920 on this navy reads 4.22:1, against 4.5 for normal-size text.
   18px at weight 700 sits just under the 18.66px large-text exemption, so this
   fails AA by the same half-pixel the green eyebrow does at S236 — SHE HAS PAID
   THAT COST KNOWINGLY TWICE NOW. DO NOT SILENTLY BUMP IT TO 20px AND DO NOT SWAP
   THE AMBER FOR A DARKER YELLOW; both are hers to ask for. */
.faq-section .faq-eyebrow {
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EDA920;
  margin: 0 0 18px;
}

/* ⚠ INSTRUMENT SERIF LOADS AT 400 ONLY. Anything heavier is a browser-faked bold
   on this page — the size does the work, never a weight. */
.faq-section .faq-heading {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.05;
  color: #EDECE0;
  margin: 0 0 36px;
  max-width: 16ch;
}

/* ---- THE ROWS ----------------------------------------------------------- */
/* ⚠⚠⚠ faq-question-list HOLDS THE FOUR ROWS AND NOTHING ELSE, AND THE ENTRANCE
   DELAYS AT THE FOOT OF THIS FILE KEY ON nth-child INSIDE IT. She caught the
   stagger arriving TWO AT A TIME on the mockup and it was a MARKUP fault, not a
   value: with the eyebrow, heading and CTA as sibling divs, nth-of-type counted
   by TAG and two rows matched no delay at all. PUT THE CTA BACK IN HERE AND IT
   RETURNS. */
.faq-section .faq-question-list {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.faq-section .faq-question-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* THE HEADER IS THE WHOLE CLICKABLE STRIP AND IT IS A TWO-COLUMN GRID, which is
   what lets the question, the teaser and the chevron sit in her approved layout
   with NO extra wrapper — her class list has none and none was invented. The
   chevron spans both rows and centres against them. */
.faq-section .faq-question-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 28px;
  align-items: start;
  padding: 24px 0;
  cursor: pointer;
}

/* ⚠⚠ AMBER, HERS, v42. Same measurement as the eyebrow: 4.22:1, under the 4.5
   bar for normal text. 22px at weight 600 is NOT "large text" under WCAG — that
   needs 24px, or 18.66px at 700 — so raising this one value to 24px is what
   would make the amber pass outright. SHE WAS SHOWN THAT AND KEPT 22.
   ⚠ THE TEASER AND THE ANSWER STAY CREAM, deliberately: amber on every line
   would flatten the yellow back into a background colour and take the emphasis
   with it. */
.faq-section .faq-question-text {
  grid-column: 1;
  grid-row: 1;
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: #EDA920;
  margin: 0;
}

/* THE TEASER IS ALWAYS VISIBLE — HER LAYOUT OPTION C. It is a lighter WEIGHT and
   a smaller SIZE rather than a faded colour, because §2 forbids fading a brand
   hex to make a quieter one. */
.faq-section .faq-question-teaser {
  grid-column: 1;
  grid-row: 2;
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: #EDECE0;
  margin: 6px 0 0;
}

/* A DRAWN SHAPE, NOT A GLYPH AND NOT AN ASSET — the same decision as the stars.
   A character depends on whatever font arrives and renders differently on her
   phone than on her Mac. ⚠ `rotate:`, NEVER `transform: rotate()`, so nothing
   here can ever delete a positioning transform (the rule this file learned from
   the hero stars). */
.faq-section .faq-question-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 20px;
  height: 20px;
  background-color: #EDA920;
  clip-path: polygon(50% 78%, 2% 26%, 14% 12%, 50% 52%, 86% 12%, 98% 26%);
  transition: rotate .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---- OPEN AND SHUT ------------------------------------------------------ */
/* THE COLLAPSE IS grid-template-rows 0fr -> 1fr, WHICH IS WHY IT CAN ANIMATE TO
   THE ANSWER'S REAL HEIGHT with no measured pixel value and no JavaScript doing
   arithmetic. ⚠ AND ITS FALLBACK IS THE RIGHT WAY UP: a browser too old to
   understand 0fr drops the declaration, the wrap keeps auto rows, AND THE ANSWER
   IS SIMPLY VISIBLE. Every failure path on this section ends at "open", never at
   "unreachable". */
html.ks-motion .faq-section .faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  /* ⚠⚠⚠ THE CLIP IS ON THE WRAP **AND** ON THE ITEM, AND THE WRAP'S IS THE ONE
     THAT MATTERS — v42, after she saw the first line of every answer showing on
     the live page under the closed teaser. The item's own overflow:hidden only
     clips what the ITEM decides to clip; a grid item is free to OVERFLOW a
     0-height track, and when it did, the leak spilled straight out of a wrap
     that had no clip of its own. The wrap is 0 tall whenever the track is 0, so
     clipping here is unconditional and does not care why the item misbehaved.
     ⚠⚠⚠ AND v42 WAS STILL NOT ENOUGH — READ .faq-answer-text BELOW. The clip is
     in the right place and the padding v42 deliberately LEFT on the answer was
     the floor. THE PADDING STILL NEVER COMES ONTO THIS WRAP: padding on a
     zero-height grid container is not clipped by its own track and would leave a
     26px ghost gap under every closed row. It moved INSIDE the answer instead,
     as a spacer the clip can actually eat. */
  overflow: hidden;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}

html.ks-motion .faq-section .faq-answer-wrap > * {
  min-height: 0;
  overflow: hidden;
}

html.ks-motion .faq-section .faq-question-row.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

html.ks-motion .faq-section .faq-question-row.is-open .faq-question-chevron {
  rotate: 180deg;
}

/* ⚠⚠⚠ THE ANSWER CARRIES NO PADDING AND NO MARGIN, AND THAT IS THE v43 FIX.
   MEASURED ON HER LIVE PAGE, NOT DERIVED: with v42 deployed and verified, the
   first line of every closed answer STILL showed. The probe printed the wrap at
   `grid-template-rows: 26px` where 0fr was expected, and 26px was THIS RULE'S
   OWN padding-bottom, to the pixel.
   THE MECHANISM, SO IT IS NOT RE-DERIVED:
   (1) AN `fr` TRACK IS minmax(auto, <flex>), so `0fr` FLOORS AT THE ITEM'S
       MINIMUM CONTRIBUTION rather than at zero.
   (2) min-height:0 takes the item's CONTENT minimum to zero AND CANNOT TOUCH
       PADDING, which is not shrinkable — so the contribution was 0 + 26.
   (3) overflow:hidden CLIPS AT THE PADDING BOX, NOT THE CONTENT BOX, so those
       26px were a visible window. One line here is 25.6px, which is exactly why
       it was always exactly one line and never two.
   ⚠ 26 IS THE DISCRIMINATOR AND IT IS WHY THIS WAS SETTLED IN ONE READ: a leaked
   line box would have measured 25.6. It measured a flat 26.
   ▶▶ THE RULE, GENERAL: ON A 0fr COLLAPSE THE GRID ITEM MUST CARRY NO PADDING
   AND NO MARGIN. Both are unshrinkable, both floor the track, and a margin would
   have moved the leak rather than fixing it. Put the spacing INSIDE the item,
   where the clip can reach it. */
.faq-section .faq-answer-text {
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #EDECE0;
  margin: 0;
  padding: 0;
  max-width: 56ch;
}

/* The answer's bottom breathing room, moved inside the content box so the clip
   eats it while the row is shut. ⚠ NOT DECORATION: delete it and every open
   answer sits hard on its hairline. ⚠ AND IT IS DELIBERATELY NOT SCOPED TO
   html.ks-motion — script never arrives means no collapse and all four answers
   sit open, and they still need the space. */
.faq-section .faq-answer-text::after {
  content: "";
  display: block;
  height: 26px;
}

/* A visible focus ring for anyone tabbing. home.js gives the header a tabindex
   and a role; without this rule that keyboard path would be invisible. */
.faq-section .faq-question-header:focus-visible {
  outline: 2px solid #EDA920;
  outline-offset: 4px;
}

/* ⚠ REDUCED MOTION KEEPS THE ACCORDION AND LOSES ONLY THE EASING. This is the
   whole reason the collapse lives out here rather than in the motion block. */
@media (prefers-reduced-motion: reduce) {
  html.ks-motion .faq-section .faq-answer-wrap,
  .faq-section .faq-question-chevron {
    transition: none;
  }
}

/* ---- THE CTA ------------------------------------------------------------ */
/* ⚠⚠ THE LABEL IS TARGETED AS `> div`, NEVER AS .text-block-119. That class is
   Webflow's own auto-generated name for the text block inside the link — it is
   not ours, it carries no meaning, and Webflow is free to hand the same name to
   something else. The structural selector cannot go stale.
   ⚠ :visited is matched deliberately: `All Links` is a TAG selector styling every
   <a> on all twenty pages, and a visited link would otherwise take its colour. */
.faq-section .faq-cta-button,
.faq-section .faq-cta-button:visited {
  display: inline-block;
  margin-top: 44px;
  padding: 15px 34px;
  border-radius: 50px;
  background-color: #EDA920;
  color: #1E1A19;
  text-decoration: none;
  transition: transform .18s ease;
}

.faq-section .faq-cta-button > div {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: inherit;
}

.faq-section .faq-cta-button:hover {
  transform: translateY(-2px);
}

/* ---- FAQ, TABLET -------------------------------------------------------- */
/* THE HALVES STACK AND THE PHOTO GOES BELOW THE TYPE, in source order. The
   questions are the point of this section and a near-black block above them
   would delay them — CLAUDE'S CALL, REVERSIBLE with one `order` line.
   ⚠ THE PHOTO TAKES A FIXED HEIGHT HERE ON PURPOSE: stacked, it has no sibling
   to stretch against, so without one it collapses to nothing and the star hangs
   over navy. THE STAR'S OFFSET IS COMPUTED FROM THAT HEIGHT — change one, change
   both. */
@media screen and (max-width: 991px) {

  .faq-section {
    --faq-photo-height: 280px;
    flex-direction: column;
    padding: 64px 0;
  }

  .faq-section .faq-container {
    padding: 0 40px;
  }

  .faq-section .faq-photo-panel {
    /* the v43 desktop flip is DESKTOP ONLY. Stacked, the photo stays BELOW. */
    order: 0;
    flex: 0 0 auto;
    height: var(--faq-photo-height);
    margin: 48px 40px 0;
  }

  .faq-section .faq-star {
    width: 56px;
    top: auto;
    /* clears v43's desktop `left`. Both offsets at once over-constrain it. */
    left: auto;
    right: 56px;
    /* 64 = the section's bottom padding, so this lands the star's centre on the
       photo's TOP edge — the horizontal seam the stack creates. */
    bottom: calc(64px + var(--faq-photo-height) - 28px);
  }

  .faq-section .faq-heading {
    font-size: 44px;
  }
}

/* ---- FAQ, PHONE --------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .faq-section {
    --faq-photo-height: 220px;
    padding: 48px 0;
  }

  .faq-section .faq-container {
    padding: 0 20px;
  }

  .faq-section .faq-photo-panel {
    margin: 36px 20px 0;
  }

  .faq-section .faq-star {
    width: 44px;
    right: 28px;
    bottom: calc(48px + var(--faq-photo-height) - 22px);
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }

  .faq-section .faq-heading {
    font-size: 36px;
    margin-bottom: 28px;
  }

  .faq-section .faq-question-text {
    font-size: 19px;
  }

  .faq-section .faq-question-header {
    column-gap: 18px;
    padding: 20px 0;
  }
}

/* ---- FAQ, SMALL PHONE ---------------------------------------------------- */
/* ⚠ WEBFLOW HAS FOUR BREAKPOINTS AND THIS FILE SPEAKS AT THREE. Below 479 the
   Designer's own rules are unopposed unless this file says otherwise, which is a
   rule for every section on this page and not a hero problem. */
@media screen and (max-width: 479px) {

  .faq-section .faq-heading {
    font-size: 32px;
  }

  .faq-section .faq-eyebrow {
    font-size: 16px;
  }
}


/* ============================================================================
   MOTION  —  v42 (S251)
   ----------------------------------------------------------------------------
   THE THIRTEEN WEBFLOW INTERACTIONS ARE DELETED — HER RULING S246, "id rather
   remove the two interactions and keep all of them in your file." Every one of
   them wrote an INLINE transform, which no rule in this file could ever beat,
   and a scale on a left-aligned block pulls its LEFT EDGE inward — the fault
   that read as "the hero subhead is indented" for two sessions. Motion now
   lives here: versioned, diffable, and rolled back by a pin bump.

   HER BRIEF: fun, unique and thought out, but NOT overwhelming — there is a lot
   of information and colour on this page already. So THREE things move and
   everything else stays still.

   ⚠⚠⚠ FOUR RULES THIS BLOCK OBEYS. BREAKING ANY ONE UNDOES THE REASON IT EXISTS.
   1. NOTHING IS HIDDEN WITHOUT THE FLAG. Every rule is scoped under
      html.ks-motion, which home.js sets as its FIRST act. Script never arrives
      → no flag → no hiding → the page renders exactly as it does with no
      JavaScript at all. HER S224 RULING, after a scroll entrance left the
      how-it-works section PERMANENTLY BLANK on the live page. The failure
      direction is the whole design and the first version had it backwards.
   2. NO `transform`, EVER, IN THIS BLOCK. It animates the INDEPENDENT
      `translate:` and `rotate:` properties instead. TWO REASONS, both real:
      .home-hero-star-upper and -lower are POSITIONED by transform:
      translateX(-50%), so a transform here would delete that and drop both
      stars off the seam; and a scale is what moved every left edge in the
      first place. THERE IS NO SCALE ANYWHERE BELOW AND NONE MAY BE ADDED.
   3. REDUCED MOTION KILLS IT WHOLE. The block sits inside
      prefers-reduced-motion: no-preference, so anyone asking for less motion
      gets a still page with everything VISIBLE — never a hidden one.
   4. THE PRICING CARDS REPLAY — HER RULING S247, REVERSING S246's ONE SHOT.
      They re-hide once FULLY off screen and play again on the way back. THE
      STARS ARE NOT IN THIS — v35 took them off the observer entirely; they are
      never hidden and their spin is written inline by home.js on scroll. ⚠⚠ THE HYSTERESIS IS LOAD-BEARING: reveal at
      15% visible, re-hide ONLY at a ratio of exactly 0, never on a small scroll
      wobble, or a phone jitters the page. ⚠ THE HERO IS UNAFFECTED — it runs on
      load and is never observed.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. THE HERO, ON LOAD ---------------------------------------------
     HER RULING S246: the page felt unfinished without an entrance and the hero
     on load is the one she named. ONE gesture, staggered — a 32px rise and a
     fade, 140ms apart — not five separate animations.
     ⚠⚠⚠ IT IS A KEYFRAME ANIMATION, NOT A TRANSITION — REBUILT S247 AFTER THE
     TRANSITION VERSION SHIPPED AND DID NOT FIRE ON LOAD ON THE LIVE PAGE. HER
     WORDS: "no animation on page load on the hero ... it's like its stuck."
     THE MECHANISM: a transition only runs if the browser has PAINTED the start
     state before the class lands, so the old version bet on a double
     requestAnimationFrame winning that race. It is a race, and on a warm cache
     it loses — both states collapse into one frame and NOTHING animates, with
     every gate passing. AN ANIMATION MAKES NO SUCH BET: it runs whenever the
     class exists, whatever the paint timing. ▶ ANY ENTRANCE THAT MUST FIRE ON
     LOAD IS A KEYFRAME ANIMATION ON THIS PROJECT. A transition is for a state
     change on a page that is already painted.
     ⚠⚠ `both` FILL IS LOAD-BEARING: it holds the START state through the delay
     (so a staggered element cannot flash visible before its turn) and holds the
     END state after (so nothing snaps back). Drop it and both ends break.
     ⚠⚠⚠ RETUNED S247 FROM 16px/.45s/.09s AND FROM cubic-bezier(.22,.61,.36,1),
     HER RULING OFF THE LIVE PAGE: "this is perfect, whats live right now is
     terrible." THE CURVE DID MOST OF THE WORK, NOT THE DISTANCE — the old one
     was front-loaded and dumped roughly two-thirds of both the fade and the
     rise into the first 150ms, so the eye never caught it STARTING and the
     whole gesture read as the page finishing painting. cubic-bezier(.4,0,.2,1)
     lets it visibly begin. ▶ WHEN AN ENTRANCE READS AS A LOAD, LOOK AT THE
     EASING BEFORE REACHING FOR A BIGGER NUMBER.
     ⚠⚠ AND A MOCKUP CANNOT JUDGE THIS. The same 16px/.45s read FINE in a 680px
     widget and vanished at hero scale — motion reads relative to the size of
     the thing moving, so the mockup was the wrong instrument and a live
     display-only console probe on her own page is what settled it.
     ⚠ THE NAVY FIELD, THE CREAM CARD AND THE PHOTO HALF DO NOT MOVE. Animating
     the frame is what made the old thirteen-element version feel busy.
     ⚠ THE BUTTONS ARRIVE A BEAT LATER (.70s against the highlights' .42s) —
     HER CALL, a nudge toward the click. */

  @keyframes ks-hero-in {
    from { opacity: 0; translate: 0 32px; }
    to   { opacity: 1; translate: 0 0;    }
  }

  html.ks-motion .hero-section .hero-tagline,
  html.ks-motion .hero-section .h1-light-leftaligned,
  html.ks-motion .hero-section .hero-subhead,
  html.ks-motion .hero-section .hero-highlights,
  html.ks-motion .hero-section .hero-buttons {
    opacity: 0;
    translate: 0 32px;
  }

  html.ks-motion .hero-section .hero-tagline.ks-in,
  html.ks-motion .hero-section .h1-light-leftaligned.ks-in,
  html.ks-motion .hero-section .hero-subhead.ks-in,
  html.ks-motion .hero-section .hero-highlights.ks-in,
  html.ks-motion .hero-section .hero-buttons.ks-in {
    animation: ks-hero-in .7s cubic-bezier(.4, 0, .2, 1) both;
  }

  /* the stagger. these tie with the base rule above at (0,3,1) and win on
     SOURCE ORDER alone, so they must stay BELOW it.
     ⚠ THEY ARE animation-delay NOW, NOT transition-delay — v35. A leftover
     transition-delay here would apply to nothing and read as a working stagger. */
  html.ks-motion .hero-section .hero-tagline.ks-in         { animation-delay: 0s;   }
  html.ks-motion .hero-section .h1-light-leftaligned.ks-in { animation-delay: .14s; }
  html.ks-motion .hero-section .hero-subhead.ks-in         { animation-delay: .28s; }
  html.ks-motion .hero-section .hero-highlights.ks-in      { animation-delay: .42s; }
  html.ks-motion .hero-section .hero-buttons.ks-in         { animation-delay: .70s; }

  /* ---- 2. THE PRICING CARDS, ON SCROLL -----------------------------------
     HER RULING S246: the four plans want an entrance that differentiates them.
     THE DIFFERENTIATION IS THE ORDER, NOT FOUR DIFFERENT ANIMATIONS — four
     treatments would say the plans are four unrelated things, while one hand
     dealt says they are a set she is choosing from.
     ⚠⚠⚠ THE DEAL RUNS RIGHT TO LEFT AND THAT IS THE WHOLE POINT — HER RULING:
     THE EYE MUST LAND ON THE BASICS, which is card 1. Running with the reading
     direction would finish the gesture on The Everything Bag at $70. Reversing
     the stagger is what puts the last beat on the entry plan. DO NOT "CORRECT"
     THESE DELAYS INTO ASCENDING ORDER.
     ⚠⚠ IT ASSUMES FOUR .pricing-card ELEMENTS AS DIRECT CHILDREN of
     .pricing-cards-row. A fifth card, or any non-card element among them,
     shifts every delay by one and the gesture quietly lands on the wrong
     plan — nothing errors. RE-CHECK THESE FOUR LINES IF THAT ROW EVER GAINS
     A CHILD. */

  html.ks-motion .pricing-preview-section .pricing-card {
    opacity: 0;
    translate: 0 36px;
    transition: opacity .75s cubic-bezier(.4, 0, .2, 1),
                translate .75s cubic-bezier(.4, 0, .2, 1);
  }

  html.ks-motion .pricing-preview-section .pricing-card.ks-in {
    opacity: 1;
    translate: 0 0;
  }

  html.ks-motion .pricing-preview-section .pricing-card:nth-child(1) { transition-delay: .57s; }
  html.ks-motion .pricing-preview-section .pricing-card:nth-child(2) { transition-delay: .38s; }
  html.ks-motion .pricing-preview-section .pricing-card:nth-child(3) { transition-delay: .19s; }
  html.ks-motion .pricing-preview-section .pricing-card:nth-child(4) { transition-delay: 0s;   }

  /* ---- 3. THE STARS, TIED TO THE SCROLL ----------------------------------
     HER RULING S247, REPLACING THE S246 ONE-SHOT TURN: all five stars SPIN AS
     SHE SCROLLS, either direction. Her words: "just have them spin on scroll."

     ⚠⚠⚠ THIS SECTION IS DELIBERATELY EMPTY OF RULES AND THAT IS NOT AN OVERSIGHT.
     THE SPIN IS WRITTEN BY home.js AS AN INLINE `rotate:`. A scroll-linked value
     cannot live in a stylesheet, and inline is the one thing that always wins —
     the same mechanism the deleted Webflow interactions used, chosen
     deliberately here rather than inherited. ADDING A rotate RULE HERE WOULD
     LOSE TO THE INLINE VALUE SILENTLY and read as a dead rule.
     ⚠⚠⚠ `rotate:` NOT `transform: rotate()`, IN BOTH FILES. The two hero stars
     are POSITIONED by transform: translateX(-50%) and a transform would delete
     it, throwing the star across the section. The independent property composes.

     ⚠⚠ A TWINKLE WAS BUILT HERE AT v35 AND REMOVED AT v36, HERS: an opacity loop
     on all five, 1 -> .6, five unsynchronised durations. She saw it live and cut
     it. DO NOT REBUILD IT AS AN IMPROVEMENT — it has been shipped and rejected.

     ⚠⚠ THE STARS ARE NOT HIDDEN AND NOT OBSERVED — v35 took them off the
     observer. They carry no opacity:0 and no .ks-in anywhere, so script gone ->
     stars visible and still. THE REPLAY IN home.js IS THE PRICING CARDS ONLY;
     do not re-add these selectors to it. */

  /* ---- 4. PHONE ----------------------------------------------------------
     THE DEAL IS DESKTOP-ONLY BY CONSTRUCTION. Below 767 the four cards stack
     taller than the screen, so they enter view ONE AT A TIME and a right-to-left
     deal is meaningless — each card simply rises as it arrives, in natural
     order. THE DELAYS ARE ZEROED, NOT REDUCED: an in-between value is the
     awkward state she ruled against on the closet-preview overlap at S236. */

  @media screen and (max-width: 767px) {
    html.ks-motion .pricing-preview-section .pricing-card:nth-child(1),
    html.ks-motion .pricing-preview-section .pricing-card:nth-child(2),
    html.ks-motion .pricing-preview-section .pricing-card:nth-child(3),
    html.ks-motion .pricing-preview-section .pricing-card:nth-child(4) {
      transition-delay: 0s;
    }
  }



  /* ---- 5. THE FAQ ROWS, ON SCROLL ---------------------------------------
     THE SAME GESTURE AS EVERYTHING ELSE ON THIS PAGE: a 32px rise and a fade,
     .7s on cubic-bezier(.4,0,.2,1), .14s apart. No new numbers were invented —
     these are her S247 values, and reusing them is what stops the page reading
     as four different animators.

     ⚠⚠⚠ THE DELAYS KEY ON nth-child AND THAT IS THE WHOLE FIX FOR THE BUG SHE
     CAUGHT. On the mockup the rows arrived TWO AT A TIME: the selector counted
     with nth-of-type, which counts BY TAG, so the eyebrow and the heading — divs
     in the same parent — ate the first two delays and two rows fired together at
     zero. .faq-question-list now holds the four rows and nothing else, so
     nth-child counts rows and only rows.

     ⚠⚠ THESE REPLAY, LIKE THE PRICING CARDS AND FOR THE SAME REASON — HER RULING
     S249: they re-hide once FULLY off screen and play again on the way back down
     OR UP. home.js observes them with the pricing cards on one observer, so the
     hysteresis that stops a phone wobble flickering the row is inherited rather
     than rebuilt.
     ⚠ THE DELAYS ARE KEPT ON THE PHONE, unlike the pricing cards'. Those zero out
     because four stacked cards are taller than the screen and enter one at a
     time; four question rows are short enough that two or three share the
     viewport, so the stagger still reads as one gesture.
     ⚠ AND THE ACCORDION IS NOT IN HERE. Its collapse lives at top level under
     html.ks-motion so that reduced motion keeps a WORKING accordion — see the
     FAQ block above. Nothing in this section touches whether a row can open. */

  html.ks-motion .faq-section .faq-question-row {
    opacity: 0;
    translate: 0 32px;
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
                translate .7s cubic-bezier(.4, 0, .2, 1);
  }

  html.ks-motion .faq-section .faq-question-row.ks-in {
    opacity: 1;
    translate: 0 0;
  }

  html.ks-motion .faq-section .faq-question-list .faq-question-row:nth-child(1) { transition-delay: 0s;   }
  html.ks-motion .faq-section .faq-question-list .faq-question-row:nth-child(2) { transition-delay: .14s; }
  html.ks-motion .faq-section .faq-question-list .faq-question-row:nth-child(3) { transition-delay: .28s; }
  html.ks-motion .faq-section .faq-question-list .faq-question-row:nth-child(4) { transition-delay: .42s; }

}

/* ==========================================================================
   THE INSTAGRAM PREVIEW BAND  —  v44 (S253)

   Sits between the sources section and the global footer, and its FIRST job is
   structural rather than decorative: both of those are cream, so the page was
   ending on two light blocks with no edge between them. HER RULING S253 — a new
   section rather than recolouring sources.

   ⚠⚠⚠ THE BAND IS #1F5C38 AS OF v46 (S253), NOT #309359, AND IT IS THE PAGE'S
   ONE BAND GREEN. HER RULING: the pricing band keeps its dark green and this
   one matches it, rather than the page carrying two greens. IT ALSO BOUGHT
   REAL CONTRAST — cream on #1F5C38 reads 6.67 where it read 3.25 on #309359.
   ⚠⚠ #309359 IS STILL LIVE ON THIS PAGE AS A **TEXT** COLOUR (the how-it-works
   header). Band green and text green are two jobs; do not unify them.
   ⚠⚠⚠ GREEN AND **NOT** CORAL, AND THE REASON IS THE PHOTOGRAPHY.
   The tiles are her listing shots, which are taken on white. White-ish tiles on
   a coral ground is the closet-preview band's exact recipe, so coral would end
   the page by repeating a block it already does — the same complaint that moved
   the FAQ photo panel at v43. Green is the one band colour this page does not
   already carry.

   ⚠⚠⚠ EVERY MARK AND EVERY WORD ON THIS BAND IS CREAM, AND THAT IS MEASURED.
   On #1F5C38 cream reads 6.67 and INK READS 2.18 — dark on dark. So the v44
   ink heading and the v44 ink pill BOTH HAD TO FLIP when the band darkened,
   and an ink anything here now is a legibility bug rather than a taste call.
   ⚠ THE PLACEHOLDER STAR PINK #E796A9 STILL DOES NOT WORK HERE (1.95, under
   the 3.0 bar for a graphical mark). THE STARS ARE CREAM ON THIS SECTION ONLY
   — every other star on the page stays the placeholder pink.

   ⚠⚠ THE TILES ARE DRAWN DIVS WITH A PLACEHOLDER FILL, exactly like the
   closet-standard photo panel and the seam stars. When her images land it is
   ONE PROPERTY on the same elements — background-image on each tile. NO
   DESIGNER WORK, no markup change. #CCCAC5 is deliberately OUTSIDE her seven
   palette colours so nobody later reads it as a design decision.

   ⚠ THE COPY IN THE MARKUP IS PLACEHOLDER AND IS NOT HERS YET — the heading,
   the button label and the ribbon string all need her approval (§0). They ship
   under the same rule the FAQ shipped under: every line is TRUE as written.
   ========================================================================== */

.instagram-preview-section {
  background-color: #1F5C38;
  /* ⚠⚠⚠ THE BOTTOM PADDING IS ARITHMETIC, NOT A NUMBER. The ribbon straddles
     the seam by hanging half its own height below this section, so the VISIBLE
     cream between the words and the footer is padding minus ribbon-height/2.
     A literal --section-gap here renders as gap-minus-half-a-ribbon, which is
     the same trap the closet preview's two edges already document. */
  padding: var(--section-gap) 0 calc(var(--section-gap) + var(--ribbon-height) / 2);
  overflow-x: clip;
  position: relative;
}

.instagram-preview-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
  /* LOAD-BEARING: the two stars are absolutely positioned against THIS, not
     against the section, so their offsets are percentages of the 1240 measure
     and stay put when the viewport grows. Name the relative ancestor before
     ever calling a star's position a fault. */
  position: relative;
  text-align: center;
}

/* ⚠ THE TYPE IS CENTRED, SO IT DOES NOT SIT ON THE S244 SPINE and cannot —
   centred content has no left edge to align. Its 1240 measure is the same one
   every other section uses, which is what keeps the band the same width. */
.instagram-preview-heading {
  font-family: "Instrument Serif", Georgia, serif;
  /* 400 IS THE ONLY WEIGHT THIS FAMILY SHIPS. Anything heavier is a browser
     fake, which is what was happening to .ks-wz-h before it was pinned. */
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  /* CREAM, NOT INK — v46. Ink on this band reads 2.18. */
  color: #EDECE0;
  margin: 0 0 26px;
}

.instagram-preview-grid {
  display: grid;
  /* minmax(0, 1fr) AND NEVER 1fr — a bare 1fr track has min-width:auto, so a
     tile with a large min-content pushes the column past the container. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.instagram-preview-tile {
  aspect-ratio: 1 / 1;
  background-color: #CCCAC5;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* ⚠⚠ WRITTEN AT TWO CLASSES ON PURPOSE. Every <a> on all 20 pages inherits the
   `All Links` TAG selector, and the Link Block also wears .w-inline-block, so
   the pair beats both outright instead of winning on source order. */
.instagram-preview-follow-button,
.instagram-preview-follow-button.w-inline-block {
  display: inline-block;
  /* INVERTED AT v46. An ink pill on #1F5C38 separates at 2.18 and reads as a
     hole rather than a button; cream on the band is 6.67 and its ink label is
     ~14. The closet preview's ink-on-coral pill is UNAFFECTED — that ground is
     light enough for ink, this one is not. */
  background-color: #EDECE0;
  color: #1E1A19;
  font-family: Quicksand, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none;
}

/* ⚠⚠⚠ NO `transform` ON A STAR, EVER — NOT EVEN TO POSITION IT. home.js writes
   the scroll spin as an inline `rotate:`, and the two properties are separate,
   but a transform written HERE would still be the thing that positions it and
   the two hero stars are the precedent: they are placed with translateX, which
   is exactly why the spin had to be `rotate:` rather than transform:rotate().
   These are placed with top/left/right/bottom alone so nothing can collide. */
.instagram-preview-star-upper,
.instagram-preview-star-lower {
  position: absolute;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 1158px;
  top: 170px;
  right: auto;
  bottom: auto;
  width: 55px;
  height: 55px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
}

/* THE FOUR OFFSETS AND THE TWO SIZES ARE CLAUDE'S CALL, REVERSIBLE, one number
   each. They are kept OFF the type rather than crossing it, because the heading
   is short and the grid starts directly beneath it. */
.instagram-preview-star-upper {
  left: 35px;
  top: 47px;
  right: auto;
  bottom: auto;
  width: 48px;
  height: 48px;
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }

.instagram-preview-star-lower {
  right: 38px;
  bottom: 84px;
  width: 52px;
  height: 52px;
}

/* ⚠⚠⚠ THE THIRD RIBBON ON THIS PAGE, AND IT REUSES THE FIRST ONE'S INNARDS.
   .closet-preview-ribbon-track / -set / -word / -star are shared, so the
   marquee, the 42s keyframes, the type ladder and the drawn star all come free
   and step per breakpoint on their own. ONLY THE BAND DIFFERS.
   ⚠⚠ AMBER WITH INK TEXT NEEDS **NO** COLOUR OVERRIDE — ink is what -word and
   -star already set, and ink on amber measures 8.54. The closing ribbon needs
   two override rules precisely because its band is dark; this one does not.
   ⚠⚠⚠ TWELVE SETS SLIDING -8.3333%, i.e. 100/12, AND THE TWO ARE LOCKED TO EACH
   OTHER. The pasted embed carries twelve. Drop any and the strip jumps once per
   cycle — silently, and only on a screen wide enough to show the seam.
   ⚠ THE TILT SIGN IS CLAUDE'S CALL: -2.8deg puts the RIGHT END UP, against the
   closing ribbon's +2.8. One character to reverse. */
.instagram-preview-ribbon {
  --ribbon-gap: 30px;
  position: relative;
  z-index: 3;
  /* 112% with -6% margin so both ends are always off-screen — her S231 rule
     that a banner never shows a start or a stop. */
  width: 112%;
  margin-left: -6%;
  height: var(--ribbon-height);
  margin-bottom: calc(var(--ribbon-height) / -2);
  background-color: #E5AD43;
  /* THE SHADOW FILLS THE TILTED WEDGE ABOVE THE BAND, and it is GREEN here
     because green is what sits above it. 40px, and 44px IS A HARD CEILING for
     the same arithmetic the closing ribbon documents: the clearance from this
     ribbon's top edge to the content above is exactly --section-gap, because
     the section's bottom padding is gap + ribbon-height/2. GO PAST 44 AND THE
     GREEN PAINTS OVER THE FOLLOW BUTTON. A bigger number is never the answer;
     v39 raised this ribbon's cousin to 120 and laid a bar across her products.
     ⚠⚠⚠ TWO SHADOWS, NOT ONE — v45 (S253). A TILTED BAND CROSSING A HORIZONTAL
     SEAM MAKES **TWO** WEDGES AND ONE SHADOW CAN ONLY FILL ONE. On the side
     where the band has risen above the seam, the green section (#1F5C38 as of
     v46 — THIS VALUE TRACKS THE BAND AND MUST MOVE WITH IT) is still
     painting BELOW it; on the side where it has dipped, the section has
     already stopped ABOVE it. So the upward shadow carries the section's green
     and the downward one carries the footer's cream, and each wedge gets the
     colour of whatever it actually sits against.
     ⚠⚠ THE DOWNWARD 40px ALSO PAINTS CREAM ACROSS THE TOP OF THE FOOTER, which
     is invisible ONLY BECAUSE THE FOOTER IS THAT EXACT CREAM. If the footer is
     ever recoloured, this value changes with it or a cream bar appears.
     ⚠ NEITHER SHE NOR CLAUDE COULD SEE A DIFFERENCE IN THE MOCKUP, so this is
     correct by construction and UNPROVEN BY EFFECT. If the wrong colour is
     still showing on the live render, the cause is something else and a third
     shadow is not the answer. */
  /* ⚠⚠⚠ NO SHADOW HERE, AND IT IS NOT AN OVERSIGHT — v48 (S253) DELETED BOTH.
     A SHADOW CAN NEVER FILL THIS WEDGE, BECAUSE THE WEDGE IS NOT A FIXED SIZE:
     it is width x tan(2.8deg), so each end sits ~35px off the seam on a 1440
     screen and ~63px off on a 2560 one. A 40px shadow covers the first and runs
     out on the second, which is the pale sliver she photographed at the left
     end. THERE IS NO NUMBER THAT WINS, and 44px is a ceiling anyway.
     ▶ SO THE SEAM IS NOW JUST THE SEAM: the section above paints to its own
     horizontal bottom edge, the footer paints from its top edge, and the band
     lies ACROSS the join. Correct at every width by construction.
     ⚠ IF THE BAND SHOULD EVER LOOK EMBEDDED IN THE SECTION RATHER THAN LAID
     OVER IT, THAT IS A clip-path WEDGE ON THE SECTION'S OWN EDGE — it scales
     with the viewport the way a shadow cannot. Scoped, never built. */
  transform: rotate(-2.8deg);
  overflow: hidden;
}

/* ⚠⚠⚠ `overflow-x: clip`, NEVER `overflow: hidden`. The ribbon hangs half its
   own height BELOW its box on purpose; hidden clips BOTH axes and would slice
   that overhang off, which is exactly what v37 shipped and what cut the closing
   ribbon in half on the live page. AND `overflow-x: hidden` is not the fix
   either — per spec, hidden on one axis forces the other to `auto`, making a
   scroll container that clips the overhang all over again. `clip` is the only
   value that leaves the other axis genuinely `visible`.
   ⚠⚠ WITHOUT THIS, THE 6% BLEED ESCAPES TO THE DOCUMENT and drags the whole
   page sideways — 19px of horizontal scroll on a phone, found by measurement.
   ⚠ :has SCOPES IT TO THIS ONE EMBED. A bare .w-embed rule would clip every
   embed on the page, including the hero marquee, whose clipping is already
   correctly owned by hero-container.
   ⚠ Old Safari ignores `clip` and falls back to visible, which returns the
   sideways scroll and breaks nothing. Correct failure direction. */
.w-embed:has(> .instagram-preview-ribbon) {
  overflow-x: clip;
}

@media screen and (max-width: 991px) {
  .instagram-preview-container {
    padding: 0 40px;
  }
  .instagram-preview-heading {
    font-size: 38px;
    margin: 0 0 22px;
  }
  .instagram-preview-grid {
    gap: 10px;
  }
  .instagram-preview-star-upper {
    left: 30px;
    width: 30px;
    height: 30px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  .instagram-preview-star-lower {
    right: 26px;
    bottom: 72px;
    width: 44px;
    height: 44px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  .instagram-preview-ribbon {
    --ribbon-gap: 22px;
  }
}

@media screen and (max-width: 767px) {
  .instagram-preview-container {
    padding: 0 20px;
  }
  .instagram-preview-heading {
    font-size: 32px;
    margin: 0 0 20px;
  }
  /* SIX ACROSS SURVIVES TO HERE at roughly 113px a tile and breaks to three
     below it. Left as one row on a phone each tile is about 55px, which is
     smaller than a thumbnail, and a photograph at that size stops being one. */
  .instagram-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  /* ONE STAR, NOT TWO — the same call the hero makes, where the lower star is
     hidden below 991 rather than squeezed in. Two stars in a ~350px column with
     a grid under them reads as clutter rather than as scatter. */
  .instagram-preview-star-lower {
    display: none;
  }
  .instagram-preview-star-upper {
    top: -2px;
    left: auto;
    right: 18px;
    width: 26px;
    height: 26px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  /* ⚠⚠⚠ THE PHONE RIBBON IS TALLER THAN THE OTHER TWO, ON PURPOSE — v47 (S253),
     HERS, OFF A LIVE PHONE RENDER WHERE THE FOOTER CREAM SHOWED ABOVE THE BAND.
     THE CAUSE IS THE TILT, NOT THE SHADOWS. 2.8deg across a 382px screen is
     ~19px of rise, against a band only 30px tall — so the band barely spans its
     own seam and the wedges swallow it. Height is what buys the overlap back.
     ⚠⚠ SET HERE AND NEVER ON :root. --ribbon-height is SHARED BY ALL THREE
     RIBBONS; raising it globally fattens the pricing and closing ones too, and
     they are correct as they are.
     ⚠⚠ THE SECTION'S BOTTOM PADDING IS PART OF THIS EDIT, NOT SEPARATE. It is
     gap + half the ribbon, so a 44px band needs 22px there where the root value
     would give 15 — leave it and the follow button loses 7px of clearance to
     the band. CHANGE THE HEIGHT, CHANGE BOTH NUMBERS. */
  .instagram-preview-section {
    padding-bottom: calc(var(--section-gap) + 22px);
  }

  .instagram-preview-ribbon {
    --ribbon-gap: 18px;
    height: 44px;
    margin-bottom: -22px;
  }
}

/* ⚠⚠ WEBFLOW HAS FOUR BREAKPOINTS AND THIS FILE SPEAKS AT THREE, so below 479
   Webflow's own rules run unopposed unless this section says otherwise. HER
   RULING S253: four big tiles on a phone. */
@media screen and (max-width: 479px) {
  .instagram-preview-heading {
    font-size: 28px;
  }
  .instagram-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 24px;
  }
  /* TILES FIVE AND SIX COME OFF rather than shrinking. Four at ~165px each is a
     photograph; six at ~110px is a swatch. The markup is unchanged, so raising
     it back to six is deleting this one rule. */
  .instagram-preview-tile:nth-child(n + 5) {
    display: none;
  }
  .instagram-preview-follow-button,
  .instagram-preview-follow-button.w-inline-block {
    font-size: 14px;
    padding: 12px 24px;
  }
}

/* ==========================================================================
   THE FAQ AS A PANEL  —  v45 (S253)

   HER RULING: the navy stops being a full-bleed band and becomes an inset
   panel on cream, so the dark green and the navy NEVER TOUCH ANYWHERE. It is
   not a seam treatment — it removes the seam.
   ⚠⚠⚠ AND IT IS WHAT LETS THE SCALLOP STAY. Her words: "if the blue becomes a
   panel, the green can keep its scallops." The scallop was never the fault;
   the colour it was landing on was. Its bumps now hang into cream, which is
   the background they were drawn against. THE PRICING SECTION IS NOT TOUCHED
   BY THIS COMMIT and its radius is still unruled.

   ⚠⚠ ZERO MARKUP. .faq-section is already the flex row carrying the photo
   panel and the text column, and the navy already sits on it, so a panel is
   margin plus a radius on that one selector. No wrapper, no Designer trip.
   Its existing 88px padding becomes the panel's inner padding for free.

   ⚠⚠⚠ THE TOP MARGIN IS CLEARANCE FOR THE SCALLOP, NOT RHYTHM. The pricing
   section's bumps hang 28px BELOW its own box, so anything under
   28px here puts the panel under the bumps and the scallop lands on navy
   again — the exact fault this change exists to remove. It is written as
   calc(--section-gap + 32px) so it tracks the token instead of going stale.

   ⚠⚠ NO overflow:hidden ON THIS SECTION. The star hangs outside the panel on
   purpose, and clipping would take it. The photo panel cannot foul the rounded
   corners because 88px of vertical padding holds it well clear of them.

   ⚠ THE INSET AND THE RADIUS ARE CLAUDE'S CALL, REVERSIBLE, one number each —
   she ruled the shape, not the values. 32px is the page's largest curve by a
   distance (the hero card is 24), so THIS SECTION NOW SETS A PRECEDENT the
   rest of the page either follows or reads as inconsistent with.
   ⚠ NAMED COST, ACCEPTED: the FAQ photo no longer bleeds to the page edge.
   Some of what made that section feel generous came from exactly that.
   ========================================================================== */

.faq-section {
  margin: calc(var(--section-gap) + 32px) 28px var(--section-gap);
  border-radius: 32px;
}

@media screen and (max-width: 991px) {
  .faq-section {
    margin: calc(var(--section-gap) + 28px) 24px var(--section-gap);
    border-radius: 28px;
  }
}

@media screen and (max-width: 767px) {
  .faq-section {
    margin: calc(var(--section-gap) + 24px) 16px var(--section-gap);
    border-radius: 24px;
  }
}

/* ==========================================================================
   v46 (S253) — THE INSTAGRAM BAND'S TOP SCALLOP, AND THE FAQ PHOTO'S MARGIN

   ⚠⚠⚠ THE SCALLOP IS THE PRICING SECTION'S, INVERTED. Same radius, same tile,
   same colour — the circles are centred on this section's TOP edge instead of
   a bottom edge, so only their UPPER halves show and they rise into the cream
   above. RADIUS, TILE AND OFFSET ARE ONE NUMBER IN THREE PLACES, exactly as
   they are on the pricing one: tile = radius x 2, height = radius, top = minus
   radius, and the circle's y-centre = radius. Change one, change all four.
   ⚠⚠ IT ONLY WORKS BECAUSE THE BAND IS #1F5C38. A scallop is cut from the
   section's own colour; if this band is ever recoloured, this gradient moves
   with it or the bumps stop matching the thing they are supposed to be part of.
   ⚠ NO z-index WAR HERE, UNLIKE THE PRICING ONE. The sources section comes
   EARLIER in the DOM, so this section paints over it by default. The pricing
   scallop needs its z-index pair precisely because what follows it comes later
   and carries its own background.
   ⚠ THE BUMPS RISE 27px INTO THE SOURCES SECTION'S BOTTOM PADDING. Nobody has
   measured what is down there — if the citations sit close to that edge, this
   wants more room below them rather than a smaller scallop.
   ========================================================================== */

.instagram-preview-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -27px;
  height: 27px;
  pointer-events: none;
  background-image: radial-gradient(circle at 28px 27px, #1F5C38 27px, transparent 27.5px);
  background-size: 56px 56px;
  background-repeat: repeat-x;
}

/* ⚠⚠ HER ASK: the photo's LEFT edge should be inset to match the other side of
   the section. IT IS TWO NUMBERS, NOT ONE — the star is positioned by
   arithmetic off the photo's RIGHT edge, and a left margin pushes that edge
   right by the same amount, so the star travels with it or it comes off the
   seam it exists to sit on. 60px is the spine measure the text column already
   uses on its right. */
/* ⚠⚠⚠ min-width, NOT max-width — v48 FIXED A REAL BUG HERE. v46 wrote this as a
   plain rule with a reset in the 991 block, and below 767 BOTH media queries
   apply: the appended reset sits later in the file, so it beat the 767 rule's
   `margin: 36px 20px 0` ON THE LEFT ONLY, leaving the phone photo at left 0 /
   right 20 — off centre by exactly 20px, which she spotted on a render.
   A MEDIA QUERY ADDS NO SPECIFICITY; SOURCE ORDER DECIDED IT. Scoping the
   inset so it can never reach the phone is the fix, not another reset. */
@media screen and (min-width: 992px) {
  .faq-section .faq-photo-panel,
  .faq-section .faq-star {
    margin-left: 60px;
  }
}

@media screen and (max-width: 991px) {
  .instagram-preview-section::before {
    top: -21px;
    height: 21px;
    background-image: radial-gradient(circle at 22px 21px, #1F5C38 21px, transparent 21.5px);
    background-size: 44px 44px;
  }
}

@media screen and (max-width: 767px) {
  .instagram-preview-section::before {
    top: -15px;
    height: 15px;
    background-image: radial-gradient(circle at 16px 15px, #1F5C38 15px, transparent 15.5px);
    background-size: 32px 32px;
  }
}

/* ==========================================================================
   v48 (S253) — THE CLOSET STANDARD PHOTO MOVES TO THE BOTTOM ON THE PHONE

   HER RULING, AND IT IS A RHYTHM FIX RATHER THAN A LAYOUT ONE: on a phone this
   section and the pricing section beneath it both read heading / body / coral
   button in the same order, so they blur together. Dropping the photo to the
   foot of this section separates them AND lets the coral "What you'll find"
   band above run straight into the closet-standard TEXT instead of into a grey
   rectangle.
   ⚠⚠ DESKTOP IS UNTOUCHED — the photo stays LEFT there, which is her v43
   ruling, and this block never fires above 767.
   ⚠ THE 767 BLOCK ALREADY SETS display:block ON THE CONTAINER; flex plus an
   explicit order is what makes the photo movable at all, since block stacking
   can only ever follow DOM order and the photo is first in the markup.
   ========================================================================== */

@media screen and (max-width: 767px) {
  .closet-standard-container {
    display: flex;
    flex-direction: column;
  }

  .closet-standard-photo {
    order: 2;
  }

  .closet-standard-text {
    order: 1;
  }
}

/* ==========================================================================
   v49 (S253) — THE MOBILE PASS. PHONE ONLY, NOTHING ABOVE 767 MOVES.

   Five of her asks off one live render at 390px, every value measured rather
   than guessed. EVERY RULE HERE IS INSIDE THE 767 BLOCK ON PURPOSE — the
   desktop type, the hero frame and the seam spacing are all approved work and
   this pass must not reach any of them.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* ---- 1. THE HERO'S NAVY FRAME, ROUGHLY DOUBLED --------------------------
     16/20 → 32/40. HER RULING: the stripe of blue around the cream card reads
     too thin on a phone.
     ⚠⚠⚠ THIS IS THE PHONE ONLY AND MUST STAY THAT WAY. The DESKTOP frame is her
     own S240 ruling, arrived at out loud — "44 navy + 35 cream = 79" — after
     she was shown that the navy is the HERO CARD'S FRAME and not a section gap.
     Pointing this at --section-gap, or letting it out of this block, erases a
     decision she made deliberately. */
  .hero-section {
    padding: 32px 16px 40px;
  }

  /* ---- 2. THE HEADINGS GO LARGER — "that editorial feel" ------------------
     Measured at 390: closet standard 44, pricing 44, sources 48.75, FAQ 32,
     Instagram 28. The last two were the odd ones out and now match.
     ⚠ how-it-works is NOT in this list and must not be. It is 16px/700 because
     it is an EYEBROW, not a section heading — her S236 ruling, where she picked
     the eyebrow over a serif title and was shown the contrast cost. */
  .instagram-preview-heading {
    font-size: 44px;
  }

  .faq-section .faq-heading {
    font-size: 40px;
  }

  /* ---- 3. THE FAQ / SOURCES SEAM -----------------------------------------
     88px of cream between two cream blocks: the FAQ's own 44px bottom margin
     plus a 44px collapsed gap. The sources embed carries zero top padding of
     its own here, so ALL of the space was the FAQ's.
     ⚠ ZEROED RATHER THAN REDUCED. The embed's own clamp(48px,7vw,88px) top
     padding is what should be spacing that seam — it is the block's own air,
     and stacking a section margin on top of it is what made the gap read as a
     blank screen rather than as a break. */
  .faq-section {
    margin-bottom: 0;
  }

  /* ---- 4. THE PRICING ROWS, LARGER AND BOLDER -----------------------------
     ⚠⚠⚠ THE ROWS ARE ALREADY FULL WIDTH — measured, and it corrects how this
     was described. "6 clothing swaps" spans 350px of a 350px column; the blank
     space on the right is INSIDE that line, after the text ends, not a column
     failing to fill. So the fix is type size, and only type size. Widening
     anything here would do nothing.
     ⚠⚠ THESE OVERRIDE THE FLOORS OF THREE clamp() DECLARATIONS, never the
     clamps themselves. The vw factors and their caps are derived from where
     .pricing-preview-container hits its max-width and MUST NOT BE TOUCHED —
     past that point the longest row overflows, silently, and it wraps first.
     Raising a floor inside this block cannot reach any of that. */
  .pricing-preview-section .pricing-card > .footer-tagline-dark {
    font-size: 26px;
  }

  .pricing-preview-section .pricing-card > .body-text-dark,
  .pricing-preview-section .pricing-card > .h3 {
    font-size: 20px;
    font-weight: 500;
  }

  .pricing-preview-section .pricing-card > .savings-text {
    font-size: 18px;
  }

  /* THE SEPARATOR DOT TRACKS THE LINE IT SITS ON, or it strands at the old
     size beside bigger type. Same rule, same value. */
  .pricing-preview-section .pricing-card > .footer-tagline-dark::after,
  .pricing-preview-section .pricing-card > .body-text-dark::after,
  .pricing-preview-section .pricing-card > .h3::after {
    font-size: 20px;
  }
}

/* ============================================================================
   v56 (S255) — /faq's OWN LAYOUT, BUILT TO THE MOCKUP SHE APPROVED

   HER RULING S254, OPTION A. Every rule below is written at .faq-section.faq-page
   — TWO CLASSES ON THE SECTION — because faq-page is a combo class that exists
   ONLY on /faq. That is what lets this file serve two pages off one SHA.
   ⚠⚠⚠ THE SPECIFICITY IS THE WHOLE MECHANISM AND IT CUTS BOTH WAYS. The shared
   rules above are written .faq-section .faq-container (0,2,0), so an override
   here needs THREE classes to win. And because a 3-class rule beats a 2-class
   rule INSIDE ANY MEDIA QUERY — a media query adds no specificity — anything set
   here reaches every width, INCLUDING the phone, whether that was intended or
   not. So every value that must differ at a breakpoint carries its own guarded
   twin below.

   ⚠⚠⚠ v50 STRIPPED THE INSET PANEL AND THAT WAS WRONG. It made the section full
   width on the argument that "on /faq the section IS the page" — which was
   CLAUDE'S ARGUMENT AND NOT HERS. She had already approved the rounded card in a
   mockup, and the override was put to her as a fresh decision rather than as a
   reversal of one she had made. THE PANEL IS RESTORED HERE.
   ▶ THE RULE IT COST: BEFORE OVERRIDING A SHAPE, ASK WHAT THE MOCKUP SHE
   APPROVED ACTUALLY SHOWED. A shared rule that looks wrong on a new page is
   sometimes a ruling arriving from another page, not a leftover.

   ⚠⚠ overflow:hidden IS SAFE **HERE AND ONLY HERE**, and the shared rule above
   forbids it for a reason that does not apply on this page: on /old-home the
   star hangs outside the panel and a clip would take it. On /faq the star is
   hidden (her mockup has none), so nothing crosses the boundary — and the clip
   is what makes the navy masthead take the card's own rounded top corners with
   no second radius to keep in sync.
   ========================================================================== */

/* THE MARGIN AND THE RADIUS ARE NOT RESTATED — they come from the shared rule
   and are correct as they are. Only the flex row and the section's own padding
   are undone, because the two bands must be full-bleed INSIDE the card. */
.faq-section.faq-page {
  display: block;
  padding: 0;
  overflow: hidden;
  /* ⚠⚠ v56, HERS: THE TOP GAP IS HALVED — AND IT WAS TWO NUMBERS STACKED, NOT
     ONE. The distance from the top of the page content to the heading is the
     section's own top margin (76px, from calc(--section-gap + 32px)) PLUS the
     masthead's top padding (72px) = 148px. Both are halved so the proportion
     between them survives: 38 + 36 = 74, exactly half.
     ▶ A SESSION CHANGING ONLY ONE OF THEM WILL MOVE THE GAP BY A QUARTER AND
     READ IT AS THE VALUE NOT TAKING. */
  margin-top: 38px;
  /* the cream is the card's base, so the body band and the CTA below it share
     one ground and their seam cannot show. The masthead paints navy over it. */
  background-color: #EDECE0;
}

/* (0,3,0) — beats .faq-section .faq-container at EVERY width, so the two 2-class
   breakpoint rules above need no twins here.
   ⚠⚠ max-width:none IS THE LINE v50 WAS MISSING, and it is what caused BOTH
   faults she saw: the Designer sets 800px on this class, so the navy band
   stopped at 800 with cream either side, and the star — positioned against the
   SECTION, which was far wider — landed out on that cream. ONE CAUSE, TWO
   SYMPTOMS. It read clean on a console probe taken at 684px because below 800
   the cap does nothing. A MEASUREMENT TAKEN BELOW A max-width CANNOT SEE IT. */
.faq-section.faq-page .faq-container {
  display: block;
  max-width: none;
  padding: 0;
}

/* HER MOCKUP HAS NO STAR ON THIS PAGE. One line, and it is also what makes the
   clip above safe — put the star back and the clip must go with it. */
.faq-section.faq-page .faq-star {
  display: none;
}

.faq-section.faq-page .faq-photo-panel {
  display: none;
}

/* ---- THE TWO BANDS ------------------------------------------------------ */
/* THE PADDING MEASURES FROM THE CARD'S EDGE, NOT THE PAGE'S — the section is an
   inset panel, so the spine arithmetic every other section uses does not apply
   here and a plain inset is the honest number. */
.faq-section.faq-page .faq-masthead {
  background-color: #1C4A91;
  padding: 36px 64px 60px;
  /* v52: EXPLICIT, HERS. The masthead type was rendering CENTRED on the live
     page — the shared .faq-section .faq-container rule sets text-align:left and
     it was being beaten by something outside this file, so the alignment is
     stated here rather than inherited and left to argue. */
  text-align: left;
}

.faq-section.faq-page .faq-body {
  background-color: #EDECE0;
  padding: 56px 64px 40px;
  text-align: left;
}

/* ---- MASTHEAD TYPE ------------------------------------------------------ */
/* ⚠ INSTRUMENT SERIF LOADS AT 400 ONLY. Anything heavier is a browser-faked bold
   on this page — the size does the work, never a weight. */
.faq-section.faq-page .faq-heading {
  /* v52: 56 -> 72. THE GROUP HEADINGS WENT TO 60 AT HER ASK, AND A 56px PAGE
     TITLE UNDER 60px SECTION HEADINGS INVERTS THE HIERARCHY. Raising the H1 was
     CLAUDE'S CALL, REVERSIBLE IN ONE VALUE — she asked for 60 on the headings,
     not for 72 here. */
  font-size: 72px;
  max-width: 20ch;
  margin: 0 0 20px;
  /* ⚠⚠⚠ v54: STATED HERE, ON THE ELEMENT, AND NOT ON THE BAND — v52 SET IT ON
     .faq-masthead AND IT DID NOTHING. INHERITANCE ALWAYS LOSES TO A DIRECT RULE
     ON THE ELEMENT, whatever the specificity of the parent's: the masthead
     computed left, the eyebrow computed left, and the H1 computed CENTRE,
     because Webflow styles this heading directly and inherited values are only
     consulted when nothing matches. The shared .faq-section .faq-heading rule
     sets no alignment at all, so /old-home is unaffected either way.
     ▶ WHEN A PARENT'S text-align APPEARS TO BE IGNORED, THE CHILD HAS ITS OWN. */
  text-align: left;
}

.faq-section.faq-page .faq-masthead-line {
  font-family: Quicksand, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: #EDECE0;
  margin: 0;
  max-width: 52ch;
}

/* ---- THE PILLS ---------------------------------------------------------- */
/* JUMP LINKS, NOT FILTERS — every group stays on the page and the pill only
   scrolls to it, so nothing here can hide a question from anyone.
   ⚠ :visited is matched for the same reason the CTA matches it — `All Links` is
   a TAG selector on all twenty pages and would otherwise recolour a visited pill.
   ⚠ NOT STICKY. .site-header is sticky site-wide and nobody has measured its
   height, so a sticky pill row would be guesswork. Two lines whenever she asks. */
.faq-section.faq-page .faq-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 44px;
}

.faq-section.faq-page .faq-pill,
.faq-section.faq-page .faq-pill:visited {
  display: inline-block;
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #1C4A91;
  background-color: transparent;
  border: 1px solid #1C4A91;
  border-radius: 50px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* THE CURRENT PILL — AMBER FILL, INK TEXT, HERS. home.js sets .is-current from
   scroll position; see the SCROLL SPY there.
   ⚠⚠ THE INK TEXT IS NOT A DETAIL: ink on this amber reads 8.5:1 while cream on
   it reads 1.7, so amber can only ever be a fill with DARK text (§2). */
.faq-section.faq-page .faq-pill.is-current,
.faq-section.faq-page .faq-pill.is-current:visited {
  background-color: #EDA920;
  border-color: #EDA920;
  color: #1E1A19;
}

.faq-section.faq-page .faq-pill:hover {
  background-color: #EDA920;
  border-color: #EDA920;
  color: #1E1A19;
}

/* ---- THE GROUPS --------------------------------------------------------- */
/* ⚠⚠ scroll-margin-top IS NOT SPACING — it is what stops a jump link parking the
   group heading UNDERNEATH the sticky site header. Without it every pill lands
   on a heading nobody can see and reads as a broken link. */
.faq-section.faq-page .faq-group {
  margin: 0 0 52px;
  scroll-margin-top: 120px;
}

.faq-section.faq-page .faq-group:last-child {
  margin-bottom: 0;
}

/* SERIF, SENTENCE CASE, INK — HER MOCKUP. It is deliberately NOT the uppercase
   sans eyebrow treatment: that job is already taken by "QUESTIONS" in the
   masthead, and two uppercase sans labels on one screen would read as the same
   thing said twice. text-transform is reset explicitly because the shared
   eyebrow rule is not what governs here — nothing inherits it — but a future
   session copying this block to another page would carry the assumption. */
.faq-section.faq-page .faq-group-heading {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  /* v52, HERS: ITALIC AND 60px. ⚠⚠ THIS ASSUMES THE ITALIC FACE IS LOADED ON
     THIS PAGE. Instrument Serif italic 400 is PROVEN loaded on /signup (measured
     S196, not declared), but font links are PER PAGE and /faq's have never been
     read. If the face is absent the browser SYNTHESISES a shear, which is a
     different thing and looks it. CONFIRM WITH document.fonts ON /faq. */
  font-style: italic;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: #1E1A19;
  margin: 0 0 16px;
}

/* ---- THE ROWS, REPOINTED FOR CREAM -------------------------------------- */
/* ⚠⚠⚠ EVERY ONE OF THESE IS A COLOUR THE SHARED RULES SET FOR NAVY. Left alone
   the questions would be amber on cream (1.9:1), the teaser and the answer cream
   on cream (invisible), and the hairlines a white tint on cream (invisible).
   NOTHING HERE CHANGES A SIZE, A WEIGHT OR A LAYOUT — the section she approved
   on /old-home is untouched and only its ground has moved. */
.faq-section.faq-page .faq-question-list {
  border-top-color: rgba(30, 26, 25, 0.18);
}

.faq-section.faq-page .faq-question-row {
  border-bottom-color: rgba(30, 26, 25, 0.18);
}

/* NAVY, HERS. It reads 8.6:1 on this cream. */
.faq-section.faq-page .faq-question-text {
  color: #1C4A91;
}

/* v54, HERS: THE TEASER IS PLAIN QUICKSAND AGAIN — SO IT IS NOT ITALIC, AND
   THAT IS NOT A COMPROMISE, IT IS THE ONLY VERSION OF THAT FAMILY THAT EXISTS.
   ⚠⚠⚠ QUICKSAND SHIPS NO ITALIC AT ANY WEIGHT (read off document.fonts at S196:
   normal 300/400/500/600/700 and nothing else), so font-style:italic on it is a
   BROWSER-SYNTHESISED SLANT that shears the rounds of a geometric face. v52
   moved the teaser to Instrument Serif italic to get a REAL italic; she asked
   for Quicksand back, which spends the italic. Do not "restore" the slant.
   ⚠ ONLY THE COLOUR IS SET HERE — family, weight, size and leading all come
   from the shared rule, so this teaser is byte-for-byte /old-home's apart from
   the ground it sits on.
   ⚠ the colour is the house muted grey, already the secondary text on /signup
   and in every email footer. It reads 4.0:1 on this cream — under the 4.5 bar,
   the same trade she took knowingly on the footer text at S158. */
.faq-section.faq-page .faq-question-teaser {
  color: #75736E;
}

.faq-section.faq-page .faq-answer-text {
  color: #1E1A19;
}

/* ⚠⚠ CORAL, HERS S255, AFTER SHE SAW THE AMBER LIVE — "the chevrons are
   disappearing in yellow", which is the measurement arriving through her eye
   rather than through a probe: #EDA920 on this cream reads about 1.9:1 against a
   3.0 bar for a non-text graphical mark. #E54F25 reads about 4.4 and clears it
   with room. THE AMBER STAYS ON THE FILLED PILL, where ink text sits on top of
   it at 8.5 and it is doing a different job.
   ⚠ AND THE CHEVRON IS WHY THE ROWS READ AS OPENABLE AT ALL. Her mockup shows
   none, because a still image cannot show a row opening; she ruled it back in
   when that was put to her. Do not remove it on the strength of the mockup. */
.faq-section.faq-page .faq-question-chevron {
  background-color: #E54F25;
}

.faq-section.faq-page .faq-question-header:focus-visible {
  outline-color: #1C4A91;
}

/* ---- THE CTA ------------------------------------------------------------ */
/* IT SITS OUTSIDE faq-body IN THE MARKUP, so with the container un-padded it
   would otherwise start at the card's edge. The same inset puts it back under
   the questions, and its bottom margin is the card's closing space — which is
   why faq-body's own bottom padding is only 40. */
.faq-section.faq-page .faq-cta-button,
.faq-section.faq-page .faq-cta-button:visited {
  margin: 0 0 72px 64px;
}

/* ---- THE CARD'S WIDTH, DESKTOP ONLY ------------------------------------- */
/* HERS S255: CAP /faq AT 1400. IT HAD NO CAP AT ALL — the shared rule gives the
   section a 28px side margin and nothing else, so the card was simply the
   viewport minus 56px: measured at 1095 in a 1151 window, and around 1844 on a
   wide monitor, which is what made it read as sprawling.
   ⚠⚠ width PLUS max-width, NOT margin:auto ALONE. Auto side margins with no
   width would give the card the full viewport below 1400 and put it hard against
   both screen edges — the 28px gutter would silently vanish exactly where it
   matters most. calc(100% - 56px) keeps that gutter at every width and the cap
   only bites once there is room to spare.
   ⚠ SCOPED min-width:992 ON PURPOSE, so the tablet and phone margins in the
   shared rules are left completely alone. Nothing below 992 changes. */
@media screen and (min-width: 992px) {

  .faq-section.faq-page {
    /* margin-top is inherited from the base guarded rule above; only the side
       margins become auto here, and margin-top must NOT be restated or the
       shorthand would wipe it. */
    width: calc(100% - 56px);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- /faq, TABLET ------------------------------------------------------- */
/* ⚠ EVERY RULE HERE EXISTS ONLY BECAUSE ITS DESKTOP TWIN ABOVE IS 3 CLASSES AND
   WOULD OTHERWISE REACH THIS WIDTH. Nothing is restyled for its own sake. */
@media screen and (max-width: 991px) {

  .faq-section.faq-page .faq-masthead {
    padding: 28px 44px 48px;
  }

  .faq-section.faq-page .faq-body {
    padding: 44px 44px 32px;
  }

  .faq-section.faq-page .faq-heading {
    font-size: 52px;
  }

  .faq-section.faq-page .faq-group {
    margin-bottom: 44px;
  }

  .faq-section.faq-page .faq-group-heading {
    font-size: 48px;
  }

  .faq-section.faq-page .faq-cta-button,
  .faq-section.faq-page .faq-cta-button:visited {
    margin: 0 0 56px 44px;
  }
}

/* ---- /faq, PHONE -------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .faq-section.faq-page {
    margin-top: 34px;
  }

  .faq-section.faq-page .faq-masthead {
    padding: 20px 24px 36px;
  }

  .faq-section.faq-page .faq-body {
    padding: 32px 24px 24px;
  }

  .faq-section.faq-page .faq-heading {
    font-size: 36px;
  }

  .faq-section.faq-page .faq-masthead-line {
    font-size: 17px;
  }

  .faq-section.faq-page .faq-pill-row {
    gap: 8px;
    margin-bottom: 32px;
  }

  .faq-section.faq-page .faq-pill,
  .faq-section.faq-page .faq-pill:visited {
    font-size: 14px;
    padding: 9px 16px;
  }

  .faq-section.faq-page .faq-group {
    margin-bottom: 36px;
  }

  .faq-section.faq-page .faq-group-heading {
    font-size: 40px;
  }

  .faq-section.faq-page .faq-cta-button,
  .faq-section.faq-page .faq-cta-button:visited {
    margin: 0 0 44px 24px;
  }
}

/* ---- /faq, SMALL PHONE --------------------------------------------------- */
/* ⚠ WEBFLOW HAS FOUR BREAKPOINTS AND THIS FILE SPEAKS AT THREE. Below 479 the
   Designer's own rules are unopposed unless this file says otherwise. */
@media screen and (max-width: 479px) {

  .faq-section.faq-page .faq-masthead {
    padding: 18px 20px 32px;
  }

  .faq-section.faq-page .faq-body {
    padding: 28px 20px 20px;
  }

  .faq-section.faq-page .faq-heading {
    font-size: 32px;
  }

  .faq-section.faq-page .faq-group-heading {
    font-size: 34px;
  }

  .faq-section.faq-page .faq-cta-button,
  .faq-section.faq-page .faq-cta-button:visited {
    margin: 0 0 40px 20px;
  }
}

/* ─── STAR PLACEMENTS AT PHONE WIDTH — S303, HERS, PLACED BY DRAGGING ON THE
       LIVE PAGE AT 390px AND READ BACK, NOT ESTIMATED. These four rules did not
       exist before; the other five were edited in place above.
   ⚠⚠ THE HERO PAIR ARE NAMED FOR THEIR POSITION IN THE ORIGINAL DESKTOP
       DESIGN, NEVER THEIR SIZE — `upper` is the big one. Reasoning from the
       names is what caused three wrong swaps in one session. And the SHARED
       rule `.hero-section .home-hero-star-upper, .hero-section .home-hero-star-lower`
       ends with the lower selector, so a naive text search for
       `.hero-section .home-hero-star-lower {` matches the SHARED rule first and
       edits both stars. MATCH ON THE RULE'S OWN LINE, NOT ON A SUBSTRING. ─── */
@media screen and (max-width: 479px) {
  .hero-section .home-hero-star-upper {
    display: block;
    left: 233px; top: 320px; right: auto; bottom: auto;
    width: 68px; height: 68px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  }
  .hero-section .home-hero-star-lower {
    display: block;
    left: 251px; top: 462px; right: auto; bottom: auto;
    width: 33px; height: 33px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  .faq-section .faq-star {
    display: block;
    left: 199px; top: 122px; right: auto; bottom: auto;
    width: 84px; height: 84px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  }
  .instagram-preview-star-lower {
    display: block;
    left: 325px; top: 387px; right: auto; bottom: auto;
    width: 62px; height: 62px;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png");
  }
  .pricing-preview-section .pricing-preview-container::after {
    left: 187px; top: 193px; right: auto; bottom: auto;
    width: 84px; height: 84px;
    margin: 0;
    background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png");
  }
}

/* ─── S303: TWO STARS DRAWN ON THE ELEMENT THEY BELONG TO, NOT POSITIONED NEAR IT.
   ⚠⚠⚠ WHY IT IS DONE THIS WAY. Both of these kept drifting when nudged, because
       their left/top are measured from the SECTION, so a value that looks right at
       one width is wrong at every other. The obvious fix — make the neighbour
       position:relative — DOES NOT WORK: the star is not a child of the neighbour,
       and CSS cannot reparent an element. So the real star is hidden and an
       identical one is drawn as a ::after on the neighbour itself, which anchors
       it by construction at every width. ─── */

/* hero small star: left of the Trial for free button */
.hero-section .home-hero-star-lower { display: none; }
.hero-section .hero-buttons { position: relative; }
/* S304, HERS: THE STAR OVERLAPS THE TOP-LEFT CORNER OF "Trial for free".
   ⚠⚠ top:50% AND transform:translateY(-50%) ARE DELETED, NOT OVERRIDDEN. They centred
      it on the row and are the whole reason it sat beside the button; leaving either in
      fights the new offsets. The button is the FIRST child of .hero-buttons (read live
      S304), so the row's own 0,0 IS that corner, and -16/-16 lands a 33px star centred
      on it with half of it over the pill.
   ⚠⚠⚠ IT PAINTS OVER THE BUTTON BECAUSE A ::after IS THE LAST CHILD OF ITS PARENT'S
      STACKING CONTEXT. No z-index is set and none should be — adding one here is how
      the scrim/header fault happened elsewhere. pointer-events:none is what stops a
      sticker eating a click on the page's primary CTA.
   ⚠⚠ IT SPINS AS OF S304 AND IT DID NOT BEFORE. home.js was writing this star's
      rotation to .home-hero-star-lower, which is display:none at line ~4095, so the
      instruction landed on nothing and this was the one still star on the page. The
      var is read here; home.js now writes it to .hero-buttons. `rotate:` NEVER
      `transform: rotate()` — a transform here would delete the positioning.
   ⚠ NO BREAKPOINT RULE GOVERNS THIS ELEMENT, so this reaches every width. The 479
      block restates the old beside-the-row values to leave her approved phone alone. */
.hero-section .hero-buttons::after {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 33px;
  height: 33px;
  rotate: var(--ks-star-rot, 0deg);
  pointer-events: none;
  background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png") center / contain no-repeat;
}

/* FAQ star: top right corner of the photo panel */
.faq-section .faq-star { display: none; }
.faq-section .faq-photo-panel { position: relative; }
.faq-section .faq-photo-panel::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 84px;
  height: 84px;
  rotate: var(--ks-star-rot, 0deg);
  pointer-events: none;
  z-index: 4;
  background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png") center / contain no-repeat;
}

/* ═══ PHONE STAR PLACEMENTS — S303, HERS. 479 ONLY, DESKTOP UNTOUCHED. ═══
   ⚠⚠⚠ THE STARS MUST NOT ADD HEIGHT TO THE LINE THEY SIT ON. First attempt used
       a plain inline-block ::after, which works for placement — it flows after the
       final character, so it finds the last letter whatever the heading wraps to —
       but an inline box CONTRIBUTES ITS HEIGHT TO THE LINE BOX, so an 84px star in
       a 40px line opened a huge gap between the heading's lines. She caught it on
       the phone immediately.
   ✅ THE FIX: the ::after stays inline so it still lands after the last letter, but
       is given width:0 / height:0 so it adds nothing to the line, and the artwork is
       drawn as an ABSOLUTELY POSITIONED box hung off it. Absolute boxes are out of
       flow and cannot affect line height. The heading needs position:relative for
       nothing — the star is positioned against the ::after's own zero-size box.
   ⚠ DO NOT "SIMPLIFY" THIS BACK TO A SIZED INLINE-BLOCK. That is the version that
       broke the line heights. */
@media screen and (max-width: 479px) {

  /* S304c: THE PHONE RESTATEMENT IS DELETED, HERS. It held the star 44px left of the
     button row, which on a ~390px screen puts it outside the card, where
     hero-container's overflow:hidden slices it in half — visible as a yellow sliver
     against the navy in every phone screenshot back to S303. S304 preserved those
     values believing the phone was approved; it was preserving a fault. The phone now
     falls through to the top-level rule and sits on the top-left corner of "Trial for
     free", exactly as the desktop does. ONE POSITION FOR THAT STAR AT EVERY WIDTH. */

  /* ── hero: star after "Childhood" ── */
  .hero-section .home-hero-star-upper,
  .hero-section .home-hero-star-lower { display: none !important; }
  .hero-section .h1-light-leftaligned::after {
    content: "";
    display: inline-block;
    background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png") center / contain no-repeat;
    width: 58px; height: 58px;
    position: absolute;
    rotate: var(--ks-star-rot, 0deg);
    margin-left: -5px;     /* S304b, HERS: 7px RIGHT, was -12px. It sat too far over
                              the "d" of Childhood. Horizontal only — margin-top is
                              untouched so the star does not move up or down. */
    margin-top: -0.34em;   /* dropped 13px, S303 — was clipping the line above */
  }

  /* ── closet standard: big star after "purpose." ── */
  .closet-standard-star-two { display: none !important; }
  .closet-standard-heading::after {
    content: "";
    position: absolute;
    display: inline-block;
    background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png") center / contain no-repeat;
    width: 91px; height: 91px;
    rotate: var(--ks-star-rot, 0deg);
    margin-left: -12px;
    margin-top: -0.11em;   /* dropped 25px, S303 */
  }

  /* ── closet standard: small star on the guidelines button, 20% smaller (65 -> 52) ── */
  .closet-standard-star { display: none !important; }
  .closet-standard-text .closet-standard-cta { position: relative; }
  .closet-standard-text .closet-standard-cta::after {
    content: "";
    position: absolute;
    left: -16px; top: -16px;
    width: 52px; height: 52px;
    rotate: var(--ks-star-rot, 0deg);
    pointer-events: none;
    background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png") center / contain no-repeat;
  }

  /* ── pricing: star after "pricing." ── */
  .pricing-preview-section .pricing-preview-container::after { display: none !important; }
  .pricing-preview-section .h2-light::after {
    content: "";
    position: absolute;
    display: inline-block;
    background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abc4fa0fdb5f38aff1183_star-icon.png") center / contain no-repeat;
    /* S304b, HERS: 15% SMALLER AND HIGHER. 84 -> 71 (84 x 0.85 = 71.4). margin-top
       0.28em -> 0.05em against a 44px heading is ~10px up, and the 13px lost off the
       height lifts the star's centre a further 6.5px, so it rises ~16px in all. */
    width: 71px; height: 71px;
    rotate: var(--ks-star-rot, 0deg);
    margin-left: -12px;
    margin-top: 0.05em;
  }

  /* ── faq: 15% smaller ── */
  .faq-section .faq-photo-panel::after {
    width: 71px; height: 71px;
    right: -28px; top: -28px;
  }

  /* ── instagram: bottom star 20% smaller (62 -> 50) ── */
  .instagram-preview-star-lower {
    width: 50px !important; height: 50px !important;
  }

  /* ── instagram: top star hangs off the top-left of the heading's first letter ── */
  .instagram-preview-star-upper { display: none !important; }
  .instagram-preview-section .instagram-preview-heading { position: relative; }
  .instagram-preview-section .instagram-preview-heading::before {
    content: "";
    position: absolute;
    left: -18px; top: -22px;
    width: 48px; height: 48px;
    pointer-events: none;
    background: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9abf838172650ae71d1248_star-2.png") center / contain no-repeat;
  }
}

/* ==========================================================================
   v59 — S314 — THE TWO PHOTOS, THE FAQ TYPE, THE SEAM, THE STAR
   ROLLBACK: delete from this comment to the end of the file. Both photo panels
   return to their placeholder colours, the FAQ type returns to 22/15, the blue
   card sits flush against the green band on a phone again, and the star returns
   to the card's right edge. Nothing else changes.

   ⚠⚠ EVERY RULE HERE IS AN APPENDED OVERRIDE, NEVER AN EDIT TO THE RULE IT
   BEATS. That is what makes the rollback a single delete, and it is the same
   pattern v41 uses in landing.css for the star artwork.

   ⚠⚠⚠ THE BARE RULES IN THIS BLOCK SIT AFTER EVERY @media IN THE FILE, so at
   equal specificity they win at EVERY width on source order. That is why each
   one that has a breakpoint twin above is RESTATED in its own @media below.
   Miss one and the value silently applies at a width it was never meant for.
   -------------------------------------------------------------------------- */


/* ---- 1. THE CLOSET STANDARD PHOTO ---------------------------------------
   ⚠ THE PANEL IS A DIV, NOT AN IMAGE — flex: 0 0 38% of the FULL VIEWPORT, with
   its HEIGHT set by the text column beside it (align-items: stretch). So there
   is no aspect ratio to fit and the photo is always cropped: a tall portrait
   slice on desktop, a wide band 300px high at 767 and 240 at 479.
   ⚠ background-color IS LEFT DECLARED ABOVE, deliberately. It is what shows if
   the asset ever 404s, and deleting this block restores it exactly.
   ⚠ POSITION IS CENTRE AT EVERY WIDTH. Unlike the FAQ panel she has not asked
   for a focal point here, and the phone band is the crop to judge it on.
   ⚠ THE URL IS PASTED VERBATIM FROM HER, NEVER RETYPED. */
.closet-standard-photo {
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9ff9c0c098df709c031339_home-page-closet-standard.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---- 2. THE FAQ PHOTO PANEL ---------------------------------------------
   ⚠⚠ THE PANEL CARRIES border-radius: 24px AND A STAR OVERHANGING ITS TOP-RIGHT
   CORNER. background-size: cover clips to the radius for free; the star is a
   ::after on this same element and is untouched here.
   ⚠ IT CANNOT REACH /faq — that page sets .faq-section.faq-page .faq-photo-panel
   to display:none at every width, so this rule paints nothing there. */
.faq-section .faq-photo-panel {
  background-image: url("https://cdn.prod.website-files.com/69c8a3bec63e739bf6cbf213/6a9ffdf101ab3bb95d68df10_faq-image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---- 3. THE QUESTION AND THE TEASER ------------------------------------
   HER RULING S314: 20 and 17, closing a 7px gap to 3. The question was 22 and
   the teaser 15. Hierarchy is now carried by WEIGHT (600 against 400) and by
   COLOUR (amber against cream), which is enough.

   ⚠⚠⚠ IT REACHES /faq TOO AND THAT IS HER RULING, NOT AN ACCIDENT. That page
   overrides only the COLOURS of these two elements — family, weight, size and
   leading all come from these shared rules, deliberately, so the component
   reads the same on both pages. She was shown the cost (26 rows she signed off
   two sessions ago move with it) and ruled both.

   ⚠⚠ THE PHONE RESTATEMENT IS MANDATORY, NOT TIDINESS. The 767 block above sets
   the question to 19px; this bare 20px sits later in the file and would beat it
   at phone width. And the teaser has NO breakpoint rule of its own anywhere, so
   without the twin below it would be 17px on a phone as well.

   ⚠ CONTRAST, MEASURED AND SPENT KNOWINGLY. Amber #EDA920 on this navy reads
   4.22:1. At 22px/600 it already failed AA for normal text, and 24px/600 would
   have qualified as large text and cleared it at 3:1 — she was shown that at
   S249 and kept 22. Going to 20 moves further under the bar, hers, twice now.
   THE TEASER IS UNAFFECTED: cream on navy is high contrast and rising to 17
   only helps. DO NOT "CORRECT" THE QUESTION UPWARD ON CONTRAST GROUNDS. */
.faq-section .faq-question-text {
  font-size: 20px;
}

.faq-section .faq-question-teaser {
  font-size: 17px;
}


/* ---- 4. THE SEAM BELOW THE BLUE CARD ------------------------------------
   ⚠⚠⚠ THE ARITHMETIC IS THE WHOLE FIX AND IT IS THE TRAP THIS FILE ALREADY
   DOCUMENTS TWICE FOR THE RIBBON. The green band's scallop is an ::after sitting
   at top:-27px, so it RISES INTO whatever is above it. A plain --section-gap
   here renders as gap minus the scallop: 17px of visible cream on desktop and
   23 at tablet, where every other seam on this page is 44 (her S240 ruling of
   ONE spacing number). So the margin is gap PLUS the scallop height, and the
   scallop is 27 / 21 / 15 across the three breakpoints. CHANGE THE SCALLOP,
   CHANGE THESE THREE NUMBERS WITH IT.

   ⚠⚠ THE PHONE WAS margin-bottom: 0, SET AT S253, AND ITS REASON EXPIRED. Its
   own comment names the neighbour as the SOURCES EMBED, whose large top padding
   made a stacked margin read as a blank screen. The section order changed and
   the neighbour is now the green band, which brings no such padding — so the
   rule survived its reason and the two sections have been flush ever since.

   ⚠⚠⚠ SCOPED :not(.faq-page) BECAUSE /faq WEARS THIS SAME CLASS. There is no
   green band on that page and no scallop to subtract, so an unscoped rule would
   push its footer down by 71px for no reason. :not() takes the specificity of
   its argument, so this is (0,2,0) and beats the (0,1,0) rules above it on
   specificity rather than on source order. */
.faq-section:not(.faq-page) {
  margin-bottom: calc(var(--section-gap) + 27px);
}


@media screen and (max-width: 991px) {

  /* 2b. HER ASK: the stacked band shows the TOP of the photo, not its middle.
     Below 992 the panel stops being a tall column and becomes a wide band, so
     `cover` on a portrait image would crop to the centre and lose the top. */
  .faq-section .faq-photo-panel {
    background-position: center top;
  }

  /* 6. THE STACKED PANEL IS TALLER — HERS, 280 -> 360. It is ONE VARIABLE and
     the star's own position is computed off it, so the star follows for free.
     ⚠ NAMED COST: everything below the FAQ moves down 80px in this band. */
  .faq-section {
    --faq-photo-height: 360px;
  }

  /* 4b. scallop is 21px here */
  .faq-section:not(.faq-page) {
    margin-bottom: calc(var(--section-gap) + 21px);
  }

}


@media screen and (max-width: 767px) {

  /* 3b. the mandatory phone twins — see the note above */
  .faq-section .faq-question-text {
    font-size: 18px;
  }

  .faq-section .faq-question-teaser {
    font-size: 16px;
  }

  /* 6b. 220 -> 300, hers */
  .faq-section {
    --faq-photo-height: 300px;
  }

  /* 4c. scallop is 15px here, and this is the rule that beats the S253
     margin-bottom: 0 */
  .faq-section:not(.faq-page) {
    margin-bottom: calc(var(--section-gap) + 15px);
  }

  /* 5. THE STAR MOVES 15px LEFT so it stops touching the card's right edge.
     ⚠⚠ IT LIVES IN TWO PLACES. The base rule is right:-34px and the 479 block
     overrides it to -28px, so moving it once only fixes one phone band. This is
     -34 -> -19; the 479 twin below is -28 -> -13.
     ⚠ ONLY `right` MOVES. `top`, the size and the rotate custom property are all
     left alone, and no `transform` appears here — the star is turned by
     `rotate: var(--ks-star-rot)` and a transform would compose with it. */
  .faq-section .faq-photo-panel::after {
    right: -19px;
  }

}


@media screen and (max-width: 479px) {

  /* 5b. the 479 twin */
  .faq-section .faq-photo-panel::after {
    right: -13px;
  }

}

/* ==========================================================================
   v60 — S314 — THE SEAM GAP UNDER THE CLOSING RIBBON, AND THE PRICING STAR
   ROLLBACK: delete from this comment to the end of the file.

   -------------------------------------------------------------------------- */


/* ---- 1. THE 23px CREAM BAND BETWEEN THE CORAL AND THE CLOSET STANDARD ----
   ⚠⚠⚠ MEASURED S314, NOT DERIVED, AND THE CAUSE WAS NOT WHERE THIS FILE SAID.
   At 1461: .closet-preview-section ends at 1695, .closet-standard-section
   begins at 1718, and the 23px between them is the ribbon's own
   `div.w-embed` — parent BODY, background transparent, height 23px, full width.
   So THE TWO SECTIONS HAVE NEVER TOUCHED. 23 is --ribbon-height / 2: the ribbon
   pulls half its height up with margin-bottom, and the wrapper keeps the other
   half as real layout height.

   THE VISIBLE FAULT: the band is rotated 2.8deg, so at the LEFT end it rides UP
   off that strip and the page background shows through beneath it, over the top
   of .closet-standard-photo. ~13px at the far left at 1461, tapering to nothing
   by the middle, and it GROWS WITH VIEWPORT WIDTH like every other wedge on this
   ribbon (0.56 x viewport x tan 2.8deg).

   ⚠⚠ THE FIX THIS FILE HAD SCOPED WAS AIMED AT THE WRONG ELEMENT. The closing
   ribbon's own comment says a returning sliver wants "a tilted coral wedge on
   .closet-standard-section's own top edge". That was written believing the two
   sections met. They do not, and a wedge on the section would have painted into
   the wrong box while the 23px strip stayed exactly where it was.

   ⚠⚠ IT IS A SECOND RULE ON THE SAME SELECTOR, DELIBERATELY, NOT AN EDIT TO THE
   S247 ONE ABOVE. That rule owns `overflow-x: clip` and its comment explains why
   `hidden` would slice the overhang off — leave it alone. This adds a margin and
   nothing else, and deleting this block restores the 23px exactly.

   ⚠ --ribbon-height IS ON :root (line 39), so it resolves on a body-level
   element. Written as the token rather than -23px so it stays in step with the
   four breakpoint values the ribbon already scales through.

   ⚠⚠ NAMED COST, PAGE-WIDE: everything below the coral section moves UP by half
   a ribbon at every width. The coral visible below the product cards does NOT
   change — that is the section's own bottom padding and this does not touch it.

   ⚠ THE OTHER END IS UNTOUCHED AND IS A SEPARATE DECISION. Where the band dips
   it opens a wedge ABOVE itself, between the coral and the band. v31 filled that
   with a coral box-shadow and v48 deleted it because a fixed 40px runs out past
   ~1500px while the wedge keeps growing. A tilted wedge is the shape that has no
   ceiling. NOT BUILT — she looks at the render first. */
.w-embed:has(> .closet-preview-ribbon-closing) {
  margin-bottom: calc(var(--ribbon-height) / -2);
}


@media screen and (max-width: 767px) {

  /* ---- 2. THE PRICING STAR LANDS ON THE LEARN MORE BUTTON ----------------
     ⚠⚠⚠ AN INERT RULE, AND EVERY GATE PASSED ON IT. The 767 block above places
     this star as a grid item — grid-row 3, justify-self: end, 130px, pushed to
     the far right of the button's row, which is the arrangement she picked off
     the mobile mockup. IT HAS NEVER DONE THAT. The base rule sets
     `position: absolute` with `right: 228px`, and that block never resets it.
     An absolutely positioned box with a real `right` value ignores
     justify-self on that axis, so grid-column, grid-row and justify-self are
     all dead and the DESKTOP offset is what actually places it. 228px in from
     the right of a ~500px container puts it squarely on the button.

     ⚠⚠ THE COMMENT ON THE DESKTOP RULE IS ALSO WRONG AND IS WHY THIS SURVIVED.
     It says right-anchoring "keeps the SAME gap from it at every width and
     cannot drift out of step with a breakpoint". What moves is the BUTTON'S
     WIDTH, not its position: measured live at 886 the button is 287px wide
     starting at 558, and the star sits 574 to 658 — on top of it. There is no
     991 override, so 768-991 has the same fault and this rule does not reach
     it. THAT BAND IS STILL WRONG. Its fix is a `right` value that clears a
     stretched button, and it is a separate decision.

     ⚠ ONE DECLARATION. `position: static` hands the element back to the grid
     and the placement above does what it was written to do. left, top, right
     and bottom from the base rule all go inert with it — that is the point,
     not a side effect.

     ⚠⚠ NOTHING HERE MAY SET `transform`. The star is turned by
     `rotate: var(--ks-star-rot)`, written to the CONTAINER by home.js and read
     by this pseudo-element, and rotate composes with transform.

     ⚠ AT 479 AND BELOW THIS PSEUDO-ELEMENT IS display:none and the star is a
     ::after on .h2-light instead, sitting after "pricing." — read live at 415
     and correct. This rule reaches that band too and is harmless there, because
     a display:none element is not placed at all. */
  .pricing-preview-section .pricing-preview-container::after {
    position: static;
  }

}

/* ==========================================================================
   v61 — S314 — EIGHT CARDS IN THE CLOSET PREVIEW, AND THE PRICING STAR SMALLER
   ROLLBACK: delete from this comment to the end of the file. The grid returns
   to styling only its first four children and the star returns to 130px.

   ⚠⚠⚠ HER BRIEF: "the design stays the same, just four more boxes." So NOTHING
   here changes a value. Every rule takes a figure that was hardcoded at
   nth-child(1..4) and makes it REPEAT EVERY FOUR, so the second row is the
   first row again — same ragged offsets, same tall/square alternation.
   0 / 36 / 12 / 48 and the square boxes on 2 and 4 are all untouched.

   ⚠⚠ WHY 4n+ RATHER THAN WRITING OUT 5, 6, 7, 8. The count lives in home.js as
   CARDS, not here, so hardcoding eight would put the same number in two files
   and they would drift the first time it moves. This pattern is correct at any
   count, including the four it has today.

   ⚠ THE OVERLAP IS UNAFFECTED AND STAYS ONE NUMBER. margin-top:-40px is on the
   GRID, so it lifts the whole block into the heading exactly as before; only
   the first row can reach the type and the second row sits below it normally.
   -------------------------------------------------------------------------- */

.closet-preview-grid > *:nth-child(4n+1) { margin-top: 0; }
.closet-preview-grid > *:nth-child(4n+2) { margin-top: 36px; }
.closet-preview-grid > *:nth-child(4n+3) { margin-top: 12px; }
.closet-preview-grid > *:nth-child(4n+4) { margin-top: 48px; }

.closet-preview-grid > *:nth-child(4n+2) .closet-preview-card-media,
.closet-preview-grid > *:nth-child(4n+4) .closet-preview-card-media {
  aspect-ratio: 1 / 1;
}


@media screen and (max-width: 767px) {

  /* ⚠⚠⚠ THESE TWO ARE MANDATORY, NOT TIDINESS, AND THE SPECIFICITY IS THE WHOLE
     REASON THEY ARE WRITTEN THIS WAY. The phone block above resets the offsets
     and squares the photo boxes at nth-child(1..4) ONLY. The bare rules I have
     just appended sit LATER IN THE FILE at the same specificity, so without
     these twins they would win at every width — cards 5 to 8 would keep the
     desktop stagger on a phone, and 5 and 7 would stay tall while the rest went
     square. `:nth-child(n)` matches every child and carries the same
     specificity as `:nth-child(4n+1)`, so it takes the value back cleanly.
     ⚠ A media query adds NO specificity. Source order is doing this, and that
     is why these sit below rather than above. */
  .closet-preview-grid > *:nth-child(n) {
    margin-top: 0;
  }

  .closet-preview-grid > *:nth-child(n) .closet-preview-card-media {
    aspect-ratio: 1 / 1;
  }

  /* ---- THE PRICING STAR, 15% SMALLER — HERS S314 ------------------------
     130 -> 111 (130 x 0.85 = 110.5), the same 15% the phone star took at S304.
     ⚠ THAT PHONE STAR IS NOT TOUCHED. It is a different element, a ::after on
     .h2-light below 479, and it was already cut to 71px in that pass.
     ⚠⚠ THE NEGATIVE BLOCK MARGIN STAYS AT -46px. It exists to stop a 130px
     star opening green under the button by setting its own row's height, and a
     SMALLER star cannot open any. Shrinking it too would lift the star instead
     of leaving it where she approved it.
     ⚠ This rides on top of v60's `position: static` on the same element, which
     is what finally hands it to the grid. Both are needed; neither works alone
     for what she asked. */
  .pricing-preview-section .pricing-preview-container::after {
    width: 111px;
    height: 111px;
  }

}

/* ==========================================================================
   v62 — S314 — THE SECOND ROW INTERLOCKS INSTEAD OF REPEATING
   ROLLBACK: delete from this comment to the end of the file. Row two goes back
   to being a copy of row one and the coral gaps return.

   ⚠⚠⚠ THE GAPS ARE STRUCTURAL, NOT A FAULT, AND THIS IS THE ARITHMETIC. A grid
   row is as tall as its tallest item, and v61 gave row two the SAME pattern as
   row one — so in the two columns carrying a SQUARE box the card ended roughly
   95px above the row line, and then the card below it took the SAME 36px or
   48px offset again. Two holes per column, stacked. She named both:
   shoes-to-lockbox (column 2) and jacket-to-nesting-rainbow (column 4).

   ⚠⚠ SO ROW TWO IS THE INVERSE OF ROW ONE, NOT A COPY. Every offset goes to 0,
   so all four cards start flush at the row line and no gap can open between the
   rows at all. And the media ratios FLIP: the two columns that were square in
   row one are TALL in row two and vice versa, so each column alternates and the
   short card in row one is followed by the long one.
   ▶ THE RAGGEDNESS MOVES TO THE BOTTOM EDGE, WHICH IS WHERE IT CAN DO NO HARM.
   Row one keeps its approved staggered top against the oversized heading; row
   two ends unevenly against the CTA and the ribbon.

   ⚠⚠⚠ 8n+, NOT 4n+, AND THAT IS THE WHOLE POINT. v61's rules repeat every four
   deliberately so the count can grow; these repeat every EIGHT so positions 5
   to 8 differ from 1 to 4. They sit later in the file at one pseudo-class more
   than nothing extra — same specificity, later source order — so they take
   positions 5-8 back off v61 and leave 1-4 exactly as she approved them.
   ▶ AT SIXTEEN CARDS THIS PATTERN WOULD REPEAT CORRECTLY TOO. At twelve it
   would not: positions 9-12 would read as row one again while sitting under a
   row that already inverted. Twelve is not a shape anyone has asked for; if it
   ever is, this block is the thing to re-derive.

   ⚠⚠ IT CANNOT BE PIXEL PERFECT AND SHOULD NOT BE TUNED AS THOUGH IT CAN. Card
   height depends on whether the item NAME wraps to one line or two, and the
   items rotate as stock is claimed — the same eight tiles will not be there
   next week. This closes the holes structurally rather than aligning edges,
   which is the only version that survives the content changing.

   ⚠⚠⚠ THE PHONE TWIN AT THE FOOT IS MANDATORY AND THE FIRST DRAFT OF THIS BLOCK
   GOT IT WRONG. v61's phone rules zero every offset and square every box at
   :nth-child(n) — but they sit at line ~4605 and these bare rules land ~4670,
   LATER, at the same specificity. Without the twin below, cards 6 and 8 would
   have gone TALL on a phone while the rest stayed square, at every width,
   silently. Caught by printing the line numbers rather than by reading the
   comment I had just written.
   -------------------------------------------------------------------------- */

.closet-preview-grid > *:nth-child(8n+5),
.closet-preview-grid > *:nth-child(8n+6),
.closet-preview-grid > *:nth-child(8n+7),
.closet-preview-grid > *:nth-child(8n+8) {
  margin-top: 0;
}

/* the two columns that were TALL in row one go SQUARE here */
.closet-preview-grid > *:nth-child(8n+5) .closet-preview-card-media,
.closet-preview-grid > *:nth-child(8n+7) .closet-preview-card-media {
  aspect-ratio: 1 / 1;
}

/* and the two that were SQUARE go TALL — 3/4 is the base value, restated
   because v61's 4n+2 / 4n+4 square rule reaches these positions too */
.closet-preview-grid > *:nth-child(8n+6) .closet-preview-card-media,
.closet-preview-grid > *:nth-child(8n+8) .closet-preview-card-media {
  aspect-ratio: 3 / 4;
}


@media screen and (max-width: 767px) {

  /* THE TWIN. Takes positions 5-8 back for the phone, which is 2x4 there and
     wants every box square and every offset zero. Same specificity as the bare
     rules above, later in the file. */
  .closet-preview-grid > *:nth-child(n) {
    margin-top: 0;
  }

  .closet-preview-grid > *:nth-child(n) .closet-preview-card-media {
    aspect-ratio: 1 / 1;
  }

}

/* ==========================================================================
   v63 — S314 — THE CLOSET PREVIEW BECOMES COLUMNS, AND THE FAQ ANSWER LINK
   ROLLBACK: delete from this comment to the end of the file. ⚠⚠⚠ THE CSS ALONE
   IS NOT A ROLLBACK HERE — home.js now emits four .closet-preview-column
   wrappers, so reverting this block without also reverting home.js leaves four
   unstyled divs in a grid. BOTH FILES OR NEITHER.

   ⚠⚠⚠ WHY THE MARKUP CHANGED, AND IT IS NOT A PREFERENCE. In a CSS grid every
   card in a row is anchored to the same row line and the row is as tall as its
   tallest card, so a SHORT CARD ALWAYS LEAVES A HOLE BENEATH IT. v61 and v62
   both tried to close those holes by choosing better offsets and better ratios,
   and neither could, because card height depends on the photo ratio AND on
   whether the item name wraps to two lines — and the items rotate as stock is
   claimed. Stacking each column independently is the only shape where a card
   sits directly under the one above it at a fixed gap.

   ⚠⚠ EXPLICIT COLUMNS RATHER THAN `columns: 4`. Multi-column balances by height,
   so which item lands in which column is not deterministic, and browsers
   TRUNCATE MARGINS AT THE TOP OF A COLUMN — which is exactly where the approved
   0/36/12/48 stagger lives. This shape has neither problem and needs no
   feature-query fallback.

   ⚠⚠ THE STAGGER MOVES FROM THE CARDS TO THE COLUMNS AND THE FOUR NUMBERS ARE
   UNCHANGED. Row one therefore looks exactly as she approved it at S238, and the
   bottom edge is ragged for free because the columns end at different heights.

   ⚠ v61's AND v62's PER-CARD RULES ARE NOW INERT. Their selectors read
   `> *:nth-child(...)`, and those children are COLUMNS now rather than cards, so
   every rule in this block is written at a higher specificity to take the values
   back cleanly. They are left in place rather than edited so that deleting from
   the v63 comment restores the previous build exactly. DO NOT "TIDY" THEM OUT
   without reverting home.js in the same pass.
   -------------------------------------------------------------------------- */

.closet-preview-grid > .closet-preview-column {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* THE FOUR APPROVED OFFSETS, ON THE COLUMNS. Same values as S238. */
.closet-preview-grid > .closet-preview-column:nth-child(1) { margin-top: 0; }
.closet-preview-grid > .closet-preview-column:nth-child(2) { margin-top: 36px; }
.closet-preview-grid > .closet-preview-column:nth-child(3) { margin-top: 12px; }
.closet-preview-grid > .closet-preview-column:nth-child(4) { margin-top: 48px; }

/* THE CHECKERBOARD. Odd columns lead with the tall box, even columns with the
   square one, and each column alternates going down — so no two neighbours in
   either direction share a shape. 3/4 is the base ratio and 1/1 is the square;
   both values are the ones already in the file. */
.closet-preview-grid > .closet-preview-column:nth-child(odd) > *:nth-child(1) .closet-preview-card-media,
.closet-preview-grid > .closet-preview-column:nth-child(even) > *:nth-child(2) .closet-preview-card-media {
  aspect-ratio: 3 / 4;
}

.closet-preview-grid > .closet-preview-column:nth-child(odd) > *:nth-child(2) .closet-preview-card-media,
.closet-preview-grid > .closet-preview-column:nth-child(even) > *:nth-child(1) .closet-preview-card-media {
  aspect-ratio: 1 / 1;
}


/* ---- THE LINK INSIDE A FAQ ANSWER ---------------------------------------
   ⚠⚠⚠ NOTHING HAS EVER STYLED IT, ON EITHER PAGE. Confirmed by sweeping the
   whole file for an anchor rule anywhere under .faq-section: there is none. So
   the "dashboard" link in the cancel answer renders as a browser-default
   visited purple on the navy home page, and every link in /faq's 26 rows is in
   the same state. Same species as the SEO block links at S261, where the rules
   existed and the anchor was never reached.

   ⚠⚠ color: inherit IS THE WHOLE TRICK AND IT IS WHY THIS IS ONE RULE RATHER
   THAN TWO. The answer text is CREAM on the navy home page and INK on /faq's
   cream ground, both set on .faq-answer-text. Inheriting takes whichever is
   right without this rule needing to know which page it is on, and it cannot go
   out of step the day either colour changes.

   ⚠ THE UNDERLINE IS DOING THE WORK THE COLOUR NORMALLY WOULD. With the link the
   same colour as its sentence, nothing else marks it, so it is not decorative.
   Coral was the obvious alternative and was not taken: it already does six jobs
   on this project and it measures 3.84 on navy, under the bar for body text. */
.faq-section .faq-answer-text a,
.faq-section .faq-answer-text a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.faq-section .faq-answer-text a:hover {
  text-decoration-thickness: 2px;
}


@media screen and (max-width: 991px) {

  /* the column gap follows the grid's own gap at this width */
  .closet-preview-grid > .closet-preview-column {
    gap: 16px;
  }

}


@media screen and (max-width: 767px) {

  /* ⚠⚠⚠ THE PHONE TWINS ARE MANDATORY AND THE SAME TRAP CAUGHT v62. Every rule
     above is a bare rule sitting LATER IN THE FILE than the phone block, at a
     HIGHER specificity than anything in it — so without these the stagger and
     the checkerboard would both apply on a phone, at every width, silently.
     These match the shape above selector for selector so they win on source
     order rather than by accident.

     ⚠ THE MARKUP STILL HOLDS FOUR COLUMNS HERE. The grid drops to two tracks,
     so the four column elements wrap two across and two down, and with two
     cards each that reads as 2x4 — which is the layout she approved at S238. */
  .closet-preview-grid > .closet-preview-column {
    gap: 14px;
  }

  .closet-preview-grid > .closet-preview-column:nth-child(n) {
    margin-top: 0;
  }

  .closet-preview-grid > .closet-preview-column:nth-child(n) > *:nth-child(n) .closet-preview-card-media {
    aspect-ratio: 1 / 1;
  }

}

/* ==========================================================================
   v64 — S314 — FIVE SMALLS: PHONE STARS, THE PRICING STAR, THE PRICING-TO-FAQ
   GAP, THE SOURCES GROUND, AND THE FAQ PHOTO'S BOTTOM MARGIN
   ROLLBACK: delete from this comment to the end of the file.

   ⚠⚠ TWO OF THESE ARE SCOPED :not(.faq-page) AND THAT IS NOT OPTIONAL. /faq
   wears .faq-section too — there the section IS the whole page card, its photo
   panel is display:none and there is no pricing section above it. Unscoped, the
   gap change would move /faq's masthead and the padding change would tighten its
   footer, on a page she signed off two sessions ago. Same guard as v59's seam.
   -------------------------------------------------------------------------- */


/* ---- 4. THE SOURCES GROUND GOES WHITE -----------------------------------
   ⚠⚠⚠ IT WAS NEVER LIGHT CREAM BY INSTRUCTION — THE BLOCK HAS NO BACKGROUND AT
   ALL. Swept: there is not one background declaration anywhere under .ks-src in
   this file. What shows through is the PAGE GROUND, #EDECE0, set on /old-home's
   Body in the Designer at S253. So this is not a colour being changed, it is a
   colour being INTRODUCED, and that is why one rule at every width is enough.

   ⚠⚠ HER REASON MATTERS MORE THAN THE VALUE: the footer is that same cream, so
   with the sources block transparent the two ran together and the footer had no
   top edge. White gives the footer its edge back and costs nothing else, because
   the citations are ink and the links are ink.

   ⚠ WRITTEN AT THE SAME TWO CLASSES AS THE EXISTING .w-embed .ks-src RULE. The
   embed's own <style> lives in the BODY, later in source order than this file,
   so a ONE-class rule here would tie with it and lose. Two beats it outright,
   which is the S245 lesson this section already paid for. */
.w-embed .ks-src {
  background-color: #FFFFFF;
}


@media screen and (max-width: 991px) {

  /* ---- 5. THE PHOTO'S BOTTOM MARGIN MATCHES ITS SIDES --------------------
     The panel carries `margin: 48px 40px 0` here, so its sides sit 40px inside
     the navy and its BOTTOM sits on the section's own padding, which is 64px.
     40 against 64 is what reads as a heavier border along the bottom edge.
     ⚠ THE FIX IS THE SECTION'S PADDING, NOT THE PANEL'S MARGIN. The panel is the
     last child, so the space beneath it belongs to the section and a margin on
     the panel would simply be added to it. */
  .faq-section:not(.faq-page) {
    padding-bottom: 40px;
  }

}


@media screen and (max-width: 767px) {

  /* 5b. sides are 20px here, so the bottom is 20px */
  .faq-section:not(.faq-page) {
    padding-bottom: 20px;
  }

  /* ---- 3. THE GAP BETWEEN PRICING AND THE FAQ CARD ----------------------
     The card carried `calc(var(--section-gap) + 24px)` on top, so 68px against
     the 44px every other seam on this page uses. The extra 24 is the last of a
     ladder (32 desktop, 28 tablet, 24 phone) that nothing in the file explains.
     ⚠ THIS IS HER OWN S240 RULING ARRIVING LATE: one spacing number for every
     section, --section-gap, identical at every breakpoint. Now it is.
     ⚠ ONLY THE TOP CHANGES. The bottom is v59's seam arithmetic and is left
     exactly alone — it is gap PLUS the scallop, for a reason. */
  .faq-section:not(.faq-page) {
    margin-top: var(--section-gap);
  }

}


@media screen and (max-width: 479px) {

  /* ---- 1. THE PHONE STARS, 20% SMALLER — HERS ---------------------------
     ⚠ ONLY THE PHONE. Between 480 and 767 the closet preview star is a 44px
     positioned div and the two closet standard stars are hidden entirely, so
     that band is a different arrangement and she has not looked at it. NOT
     TOUCHED.
     ⚠⚠ EACH OF THESE IS ANCHORED BY ITS TOP-LEFT CORNER, so shrinking pulls the
     artwork up and left rather than shrinking about its centre. Positions are
     deliberately NOT re-tuned to compensate — that is a judgement off a render,
     and every one of these positions is already marked in this file as a guess
     that needs one. */

  /* what you'll find: 110 -> 88 */
  .closet-preview-star {
    width: 88px;
    height: 88px;
  }

  /* we're picky on purpose, the big star after "purpose.": 91 -> 73 */
  .closet-standard-heading::after {
    width: 73px;
    height: 73px;
  }

  /* we're picky on purpose, the small star on the guidelines button: 52 -> 42.
     ⚠ THIS IS THE SECOND 20% IT HAS TAKEN. S303 already cut it 65 -> 52, and its
     own comment says so. 42 is 65 x 0.8 x 0.8. Deliberate, hers. */
  .closet-standard-text .closet-standard-cta::after {
    width: 42px;
    height: 42px;
  }

  /* ---- 2. THE PRICING STAR RISES 20px ----------------------------------
     ⚠⚠ WRITTEN AS calc(0.05em - 20px), NEVER AS A BARE PIXEL VALUE. The 0.05em
     is measured against the heading's own font-size and was itself the result of
     an S304 tuning pass; replacing it with pixels would freeze the relationship
     and silently move the star the next time that heading is resized.
     ⚠ MARGIN, NOT `top`. This ::after is absolutely positioned with auto offsets,
     so it hangs off its own static position after "pricing." — a `top` value
     would take it out of that relationship and anchor it to the container. */
  .pricing-preview-section .h2-light::after {
    margin-top: calc(0.05em - 20px);
  }

}

/* ============================================================================
   v65 (S315) — THE PRICING ROWS ON MOBILE. OPTION A, THE LEDGER. HERS.

   ⚠⚠⚠ SCOPED TO max-width:767 AND NOTHING ABOVE IT. Desktop and the 768–991
   band keep the inline-text row and its middot separators exactly as #PRICING-
   INLINE ruled them. HER WORDS S315: "desktop is fine as is."

   THE SHAPE: a two-column grid. Name top left, price top right, swap count
   bottom left, savings bottom right. The right edge does the separating, which
   is why every separator is switched off below.

   ⚠⚠⚠ EVERY ITEM IS PLACED EXPLICITLY BY ROW AND COLUMN, AND THAT IS LOAD-
   BEARING. The markup order is name, SWAPS, price, savings — the S271 drag
   order — so the price is the THIRD child and has to jump to row 1. Explicit
   placement is also why this needs no Designer work: `order` is useless here
   (the row was inline text, and inline elements ignore it) and a reorder in
   Navigator would break the desktop reading order this same file depends on.

   ⚠⚠ THE SEPARATORS ARE KILLED WITH `content: none`, NOT WITH display:none or
   an empty string. A middot in a grid gap is attached to nothing — it stops
   being a separator and becomes a mark floating between two columns. THE DOTS
   AND THE GRID ARE ONE DECISION: if this ever reverts to a packed row, the
   dots come back with it, and never the other way round.

   ⚠⚠ THIS KNOWINGLY REVERSES THE "LARGER AND BOLDER" PHONE PASS ABOVE (name 26,
   swaps and price 20/500, savings 18). Those values were hers, made against a
   packed inline row where size was the only lever available. Two columns give
   the hierarchy structurally, so the type comes back down and the savings drops
   from 18 to 11.5 — her ask, "the savings text should be a lot smaller overall."
   SHE JUDGED THESE VALUES ON A RENDER AT 390px BEFORE THEY WERE WRITTEN.

   ⚠ THE FLOORS OF THE THREE clamp() DECLARATIONS ARE OVERRIDDEN HERE, NEVER THE
   CLAMPS THEMSELVES. The vw factors and their caps are derived from where
   .pricing-preview-container hits its max-width and must not be touched.

   ⚠ nowrap STAYS ON THE RIGHT COLUMN AND COMES OFF THE LEFT. Price and savings
   must never break; the name and the swap count are allowed to wrap, which is
   what makes a 320px screen degrade into a wrapped line instead of an overflow.
   ============================================================================ */

@media screen and (max-width: 767px) {

  .pricing-preview-section .pricing-card {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: baseline;
    padding: 15px 0;
  }

  /* TOP LEFT — the plan name. */
  .pricing-preview-section .pricing-card > .footer-tagline-dark {
    display: block;
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
    font-size: 23px;
    line-height: 1.05;
  }

  /* BOTTOM LEFT — the swap count, still the one coloured thing on the row.
     ⚠⚠ #EDA920 reads 3.89 against this green and she accepted that measured,
     at 20px. IT IS SMALLER HERE, so the number is worse rather than better.
     Raised deliberately with her; the lever is this font-size, never the hex. */
  .pricing-preview-section .pricing-card > .body-text-dark {
    display: block;
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  /* TOP RIGHT — the price. */
  .pricing-preview-section .pricing-card > .h3 {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.05;
  }

  /* BOTTOM RIGHT — the savings, quieted as well as shrunk.
     ⚠ THE COLOUR CHANGE IS MOBILE ONLY. Desktop keeps #FFFFFF. At 11.5px a full
     white would read as loud as the price it sits under, which is the thing
     this pass exists to stop. */
  .pricing-preview-section .pricing-card > .savings-text {
    display: block;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(237, 236, 224, 0.62);
  }

  /* EVERY SEPARATOR OFF — both the trailing middots and the leading spaces that
     gave the inline row its break points. Neither has a job inside a grid. */
  .pricing-preview-section .pricing-card > .footer-tagline-dark::after,
  .pricing-preview-section .pricing-card > .body-text-dark::after,
  .pricing-preview-section .pricing-card > .h3::after,
  .pricing-preview-section .pricing-card > .body-text-dark::before,
  .pricing-preview-section .pricing-card > .h3::before,
  .pricing-preview-section .pricing-card > .savings-text::before {
    content: none;
  }

}

/* ============================================================================
   v66 (S315) — TWO THINGS ON /faq. BOTH HERS.

   1. THE QUESTIONS GO INK. Banked at S310 and taken now because this file was
      being opened anyway; the doc's own note says do not spend a session on it
      alone.
   2. THE PILL ROW WRAPS EVENLY ON A PHONE. Option D of four she was shown.
   ============================================================================ */

/* ---- 1. THE QUESTION COLOUR — NAVY -> INK ---------------------------------
   HER RULING S310, made against twenty-six real rows rather than the four the
   S255 design was drawn on: the questions should match the rest of the page's
   dark text. The navy was the design working exactly as built, not a fault.

   ⚠⚠ IT IS CONTAINED BY THE COMBO AND THAT IS THE WHOLE REASON THIS IS SAFE.
   Written .faq-section.faq-page, so it CANNOT reach /old-home's FAQ section,
   where the questions are amber on navy and stay that way. One file, two pages,
   and the guard is the only thing keeping them apart.
   ⚠ SAME SELECTOR AND SAME SPECIFICITY AS THE v41 RULE IT REPLACES — it wins on
   SOURCE ORDER alone, because this block sits at the end of the file. Move it
   earlier and the navy comes back with nothing erroring.
   ⚠ CONTRAST IMPROVES: navy read 8.6:1 on this cream, ink reads about 14. This
   is the rare change that costs nothing on that axis.
   ⚠ AFTER THIS, NAVY SURVIVES ON /faq IN EXACTLY TWO PLACES — the masthead and
   the pill outlines. It is no longer a body-text colour on that page. */

.faq-section.faq-page .faq-question-text {
  color: #1E1A19;
}

/* ---- 2. THE PILL ROW ON A PHONE — OPTION D --------------------------------
   ⚠⚠⚠ THE ROW WAS NEVER BROKEN, IT MISSED BY A PIXEL. At 14px with 16px side
   padding, "Credits and billing" plus "The Closet Standard" plus the gap came to
   roughly 335px against roughly 336px of column, so the row fell 2 / 1 / 1 / 1
   and read as four ragged lines. MEASURED OFF HER OWN RENDER AT 390px, not
   derived. Three values buy back the second pair; nothing structural changes.

   ⚠⚠ THIS IS NOT A FIX FOR EVERY STRING. It wraps 2 / 2 / 1 for the five group
   names that exist today. A SIXTH GROUP, OR A LONGER NAME THAN "The Closet
   Standard", PUTS IT BACK TO RAGGED — silently, and only on a phone. If a group
   is ever renamed, look at this row at 390px before publishing.

   ⚠ SHE SAW THREE OTHER SHAPES AND CHOSE THIS ONE: a sideways scroll strip with
   faded ends, a full-width stack, and an even two-up grid. The scroll strip was
   the strongest of the four and it costs a home.js change — the scroll spy sets
   .is-current from scroll position, so a current pill sitting off-screen would
   need scrollIntoView. SHIPPED AND NOT CHOSEN; do not rebuild it as an
   improvement.

   ⚠ THE TAP TARGET DROPS TO ROUGHLY 33px TALL, under the 44px floor footer.css
   protects elsewhere. Taken knowingly: these are jump links on the page they
   already sit on, so a miss costs a second tap and never a wrong destination. */

@media screen and (max-width: 767px) {

  .faq-section.faq-page .faq-pill-row {
    gap: 7px;
  }

  .faq-section.faq-page .faq-pill,
  .faq-section.faq-page .faq-pill:visited {
    font-size: 13px;
    padding: 8px 14px;
  }

}

/* ============================================================================
   v67 (S391) — HER PEER-REVIEW PASS ON /old-home. FOUR THINGS, ALL HERS.
   ----------------------------------------------------------------------------
   1. THE HOW-IT-WORKS HEADINGS SIT LEVEL. Measured live S391 at 1438 wide: the
      four icon boxes were all 150px, yet the headings sat at 1110 / 1120 / 1130
      / 1120. That tracks the paragraph line counts (4 / 3 / 2 / 3), which means
      each column's content was being CENTRED down its stretched grid cell by a
      Webflow Designer setting. This pins it to the top. 768 and up only:
      ⚠ the phone layout below 767 is a 96px / 1fr GRID on .step-1 (v6 block)
      and an unscoped display:flex here would flatten it.
   2. SECTION HEADINGS. Hers S391: "What you'll find" and "We're picky on
      purpose" stay huge; the rest match. Pricing, FAQ and sources now share
      the pricing heading's ruled sizes: 64 desktop, 52 at 991 and 767, 44 at
      479. The FAQ rule skips /faq (.faq-page), where that heading is the H1.
      ⚠ The sources rule needs TWO classes to beat the embed's own <style>
      (see the v32 SOURCES note).
   3. STARS OFF, HERS S391: the pricing star (a pseudo on the container) and
      the FAQ star (a pseudo on the photo panel), /old-home only. home.js still
      writes --ks-star-rot; nothing reads it now, which is harmless.
   4. THE 6M-7 LINE TAKES HER DARK GREEN #1F5C38 (was grey #75736E).
   ============================================================================ */

@media screen and (min-width: 768px) {
  .how-it-works-section .steps-row .step-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
}

.faq-section:not(.faq-page) .faq-heading,
.ks-src .ks-src-in h3 {
  font-size: 64px;
}

@media screen and (max-width: 991px) {
  .faq-section:not(.faq-page) .faq-heading,
  .ks-src .ks-src-in h3 {
    font-size: 52px;
  }
}

@media screen and (max-width: 479px) {
  .faq-section:not(.faq-page) .faq-heading,
  .ks-src .ks-src-in h3 {
    font-size: 44px;
  }
}

.pricing-preview-section .pricing-preview-container::after,
.faq-section:not(.faq-page) .faq-photo-panel::after {
  content: none;
}

.hero-section .hero-highlights {
  color: #1F5C38;
}

/* ============================================================================
   v68 (S391) — ONE H1 PER PAGE. HERS S391. No visual change on its own.
   The page carried six H1s: the hero, the "How It Works" eyebrow, and the four
   step titles. In the Designer the eyebrow becomes H2 and Send / Earn / Swap /
   Repeat become H3. Every rule that found those headings BY TAG (v6 block and
   its 767 overrides) now names the new tag beside the old one, so this file
   works before AND after the Designer change and the order of the two cannot
   break the page. Once the Designer change is live the old h1 selectors are
   inert; leave them, they cost nothing and make a revert safe.
   ============================================================================ */

/* ============================================================================
   v69 (S392) — HER THREE STAR AND HEADING TWEAKS. ALL HERS S392.
   1. The star on the hero "Sign up for free" button is gone at every width.
      It was a pseudo on .hero-buttons; home.js still writes --ks-star-rot to
      that row, and nothing reads it now, which is harmless.
   2. "We're picky on purpose" loses its big star at every width: the desktop
      div (.closet-standard-star-two, beside the heading) and the phone pseudo
      after "purpose." The small star on "See the guidelines" STAYS, hers.
   3. That heading goes 44 -> 50 on the phone ONLY (479 and below). Desktop
      stays 112, hers: it is already nearly twice the other headings there.
   The sources citations got smaller in the sources embed (v6), not here.
   ============================================================================ */

.hero-section .hero-buttons::after {
  content: none;
}

.closet-standard-star-two {
  display: none !important;
}

.closet-standard-heading::after {
  content: none;
}

@media screen and (max-width: 479px) {
  .closet-standard-heading {
    font-size: 50px;
  }
}

/* ============================================================================
   v70 (S456) — PHONE PRICING OPTION C, HALF-SIZE STARS, ONE HOVER. ALL HERS S456.
   1. PHONE PRICING, OPTION C of four (canvas https://claude.ai/artifact/JfiEgNGUQBQ4kG9DEjoCqv).
      Below 767 only; 768 up keeps the inline row (#PRICING-INLINE, "desktop is
      fine as is", S315). It REPLACES the v65 ledger's placement: name, swaps and
      savings stack in column 1, the price sits in column 2 across all three rows,
      big serif, with "/month" small under it.
      ⚠⚠ "/month" is its own span, class pricing-price-per-month, added in the
      Designer S456 on all four cards ("4 on this page"). Without it the whole
      "$30/month" renders at 58px and pushes the row off the screen. The span is
      unstyled above 767, so desktop reads exactly as before.
      ⚠ clamp() floors are for a 320px phone: name 22, price 46. Swap lines may
      wrap on a small phone; that is allowed (min-width:0 on column 1).
   2. STARS AT HALF SIZE, IN PLACE, at every width: the hero's big star (and its
      under-480 stand-in, the heading's ::after) and the What You'll Find star.
      Done with the `scale` property, which shrinks around the centre and composes
      with home.js's inline `rotate`. ⚠ Never as `transform: scale()`: that would
      wipe the stars' translate positioning. The hero's small lower star is not
      touched (it was already 33px).
   3. EVERY HOME PAGE BUTTON HOVERS THE SAME WAY: lifts 2px and goes a shade
      darker (coral #E54F25 to #B23D22, ink to #3A3432, amber to #D4951A, the
      outlined button fills ink). /faq's own button (.faq-page) is NOT included.
      The sources block's "Sign up for free" button lives in its embed, not here.
      Reduced motion keeps the colour change and drops the lift.
   ============================================================================ */

/* 2. THE STARS */
.hero-section .home-hero-star-upper,
.closet-preview-star {
  scale: 0.5;
}

@media screen and (max-width: 479px) {
  .hero-section .h1-light-leftaligned::after {
    scale: 0.5;
  }
}

/* 3. THE BUTTONS */
.hero-buttons .hero-button-primary,
.hero-buttons .hero-button-secondary,
.closet-preview-cta,
.closet-standard-cta,
.pricing-preview-section .pricing-preview-container > .btn-primary,
.faq-section:not(.faq-page) .faq-cta-button {
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.hero-buttons .hero-button-primary:hover,
.closet-standard-cta:hover,
.pricing-preview-section .pricing-preview-container > .btn-primary:hover {
  transform: translateY(-2px);
  background-color: #B23D22;
  border-color: #B23D22;
}

.hero-buttons .hero-button-secondary:hover {
  transform: translateY(-2px);
  background-color: #1E1A19;
  color: #EDECE0;
}

.closet-preview-cta:hover {
  transform: translateY(-2px);
  background-color: #3A3432;
}

.faq-section:not(.faq-page) .faq-cta-button:hover {
  transform: translateY(-2px);
  background-color: #D4951A;
}

@media (prefers-reduced-motion: reduce) {
  .hero-buttons .hero-button-primary:hover,
  .hero-buttons .hero-button-secondary:hover,
  .closet-preview-cta:hover,
  .closet-standard-cta:hover,
  .pricing-preview-section .pricing-preview-container > .btn-primary:hover,
  .faq-section:not(.faq-page) .faq-cta-button:hover {
    transform: none;
  }
}

/* 1. PHONE PRICING, OPTION C */
@media screen and (max-width: 767px) {
  .pricing-preview-section .pricing-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 5px;
    align-items: start;
    padding: 20px 0;
  }

  .pricing-preview-section .pricing-card > .footer-tagline-dark {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(22px, 6.9vw, 27px);
    line-height: 1.05;
  }

  .pricing-preview-section .pricing-card > .body-text-dark {
    grid-column: 1;
    grid-row: 2;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
  }

  .pricing-preview-section .pricing-card > .savings-text {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
    color: #C9D3C4;
  }

  .pricing-preview-section .pricing-card > .h3 {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: clamp(46px, 14.8vw, 58px);
    line-height: 0.9;
  }

  .pricing-preview-section .pricing-card .pricing-price-per-month {
    display: block;
    margin-top: 4px;
    font-family: Quicksand, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: #C9D3C4;
  }
}

/* ============================================================================
   v71 (S456) — THE LEFT STACK, TIGHTENED. HERS S456 ("the spacing and visual
   hierarchy between the three lines ... feel unfinished").
   MEASURED S456 at 438px: Webflow's own class styles put padding-top:10px on
   the plan name and padding 0 10px 10px 0 on the swap line. v70 never reset
   padding, so the savings line sat ~16px further down than the mockup.
   Phones only. Zeroes that padding and spaces the stack on purpose: name, 4px,
   swaps, 3px, savings. The stack then measures about the price's own height
   (~73px), so the two halves sit level.
   ⚠ Desktop keeps Webflow's padding; nothing above 767 changes.
   ============================================================================ */
@media screen and (max-width: 767px) {
  .pricing-preview-section .pricing-card {
    row-gap: 0;
  }

  .pricing-preview-section .pricing-card > .footer-tagline-dark {
    padding: 0;
  }

  .pricing-preview-section .pricing-card > .body-text-dark {
    padding: 0;
    margin-top: 4px;
  }

  .pricing-preview-section .pricing-card > .savings-text {
    padding: 0;
    margin-top: 3px;
  }
}

/* ============================================================================
   v72 (S468) — REFER A FRIEND: THE INVITE BAND AND THE INVITE BAR. Board 3 of
   https://claude.ai/artifact/8SRLeBEmQt8grUxypP5Lgc, approved S462 (wording is
   Claude's, hers to change). home.js builds both elements; with no invite they
   never exist, so every rule here is inert on a normal visit.
   · .ks-invite-band: navy, ABOVE the header (first child of body), so it
     scrolls away while the sticky header stays. Stacked on phones, one row 768 up.
   · .ks-invite-bar: white, pinned to the bottom of the screen. home.js adds a
     spacer at the end of body the bar's height, so the footer is never covered.
   · html.ks-invited hides the hero's "Trial for free" ONLY (hers S468: it isn't
     true for an invited friend, who pays her first month at signup). How It
     Works stays. home.js sets the class while the code is being checked and
     takes it off again if the code is bad or the check fails.
   · Join now hovers like every home page button (v70): lift 2px, coral to
     #B23D22; reduced motion keeps the colour and drops the lift.
   ⚠ Memberstack's Test Mode badge sits at the bottom too until the live flip.
   ============================================================================ */
.ks-invite-band {
  background: #1C4A91;
  color: #FFFFFF;
  font-family: Quicksand, sans-serif;
}

.ks-invite-band .ks-invite-band-inner {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ks-invite-band .ks-invite-band-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-text strong {
  font-weight: 700;
}

.ks-invite-band .ks-invite-band-link {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 2px solid #EDA920;
  padding-bottom: 2px;
}

.ks-invite-band .ks-invite-band-link:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-link:focus-visible,
.ks-invite-bar .ks-invite-bar-button:focus-visible {
  outline: 2px solid #EDA920;
  outline-offset: 3px;
}

.ks-invite-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: #FFFFFF;
  border-top: 1px solid #DAD8CF;
  color: #1E1A19;
  font-family: Quicksand, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ks-invite-bar .ks-invite-bar-inner {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 20px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ks-invite-bar .ks-invite-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #1E1A19;
}

.ks-invite-bar .ks-invite-bar-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background-color: #E54F25;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ks-invite-bar .ks-invite-bar-button:hover {
  transform: translateY(-2px);
  background-color: #B23D22;
  color: #FFFFFF;
}

html.ks-invited .hero-section .hero-buttons .hero-button-primary {
  display: none;
}

@media screen and (min-width: 768px) {
  .ks-invite-band .ks-invite-band-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 40px;
  }

  .ks-invite-bar .ks-invite-bar-inner {
    justify-content: center;
    gap: 24px;
    padding: 14px 40px;
  }

  .ks-invite-bar .ks-invite-bar-text {
    flex: 0 1 auto;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-invite-bar .ks-invite-bar-button:hover {
    transform: none;
  }
}

/* ============================================================================
   v73 (S468) — THE INVITE BAND GOES INK. HERS S468: on the live page the navy
   band blended into the navy hero ("it blends in pretty well, im not so sure
   thats a good thing"). Off three options (ink, amber, coral) she picked ink:
   the one colour none of its neighbours use (pink bar, cream header, navy hero).
   Cream text on ink #1E1A19; the link keeps its gold #EDA920 underline and goes
   cream on hover. Same selectors as v72, so later source order wins.
   ============================================================================ */
.ks-invite-band {
  background: #1E1A19;
  color: #EDECE0;
}

.ks-invite-band .ks-invite-band-text {
  color: #EDECE0;
}

.ks-invite-band .ks-invite-band-link {
  color: #EDECE0;
}

.ks-invite-band .ks-invite-band-link:hover {
  color: #EDECE0;
  border-bottom-color: #EDECE0;
}

/* ============================================================================
   v74 (S468) — THE INVITE BAND AND BAR GO YELLOW. HERS S468: the ink band sat
   too close to the browser's own dark chrome, and she missed the white bottom
   bar entirely ("its sticky at the bottom of the page, but i completely missed
   it. lets make both yellow"). Both are her yellow #EDA920 with ink #1E1A19
   text. The band link's underline goes ink. Join now goes INK with cream text
   (Claude's call: coral on yellow sinks); hover lifts 2px and darkens to
   #3A3431. The bar's grey top line is dropped (the yellow edge is enough).
   Same selectors as v72/v73, so later source order wins.
   ============================================================================ */
.ks-invite-band {
  background: #EDA920;
  color: #1E1A19;
}

.ks-invite-band .ks-invite-band-text {
  color: #1E1A19;
}

.ks-invite-band .ks-invite-band-link {
  color: #1E1A19;
  border-bottom-color: #1E1A19;
}

.ks-invite-band .ks-invite-band-link:hover {
  color: #1E1A19;
  border-bottom-color: #1E1A19;
}

.ks-invite-band .ks-invite-band-link:focus-visible,
.ks-invite-bar .ks-invite-bar-button:focus-visible {
  outline-color: #1E1A19;
}

.ks-invite-bar {
  background: #EDA920;
  border-top: 0;
  color: #1E1A19;
}

.ks-invite-bar .ks-invite-bar-text {
  color: #1E1A19;
}

.ks-invite-bar .ks-invite-bar-button {
  background-color: #1E1A19;
  color: #EDECE0;
}

.ks-invite-bar .ks-invite-bar-button:hover {
  background-color: #3A3431;
  color: #EDECE0;
}

/* ============================================================================
   v75 (S468) — THE INVITE BAND AND BAR GO CORAL. HERS S468, after seeing v74
   live: "i'd actually prefer them to be the cta coral color instead". Both are
   coral #E54F25 with white text; the band link's underline goes white. Join
   now becomes a WHITE pill with coral text (Claude's call); hover lifts 2px
   and goes cream #EDECE0. Same selectors as v72 to v74, later order wins.
   ============================================================================ */
.ks-invite-band {
  background: #E54F25;
  color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-text {
  color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-link {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-link:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.ks-invite-band .ks-invite-band-link:focus-visible,
.ks-invite-bar .ks-invite-bar-button:focus-visible {
  outline-color: #FFFFFF;
}

.ks-invite-bar {
  background: #E54F25;
  color: #FFFFFF;
}

.ks-invite-bar .ks-invite-bar-text {
  color: #FFFFFF;
}

.ks-invite-bar .ks-invite-bar-button {
  background-color: #FFFFFF;
  color: #E54F25;
}

.ks-invite-bar .ks-invite-bar-button:hover {
  background-color: #EDECE0;
  color: #E54F25;
}