/* 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-color: #E796A9;
  clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 3% 36%, 39% 36%);
}

.hero-section .home-hero-star-upper {
  width: 104px;
  top: 13%;
  left: 54%;
  transform: translateX(-50%);
}

/* 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 {
  width: 66px;
  top: 63%;
  left: calc(54% - 75px);
  transform: translateX(-50%);
}

/* ---- 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 {
  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 {
  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 {
  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 {
    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 {
    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;
  top: 244px;
  left: 248px;
  width: 76px;
  height: 76px;
  background-color: #E5AD43;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
}

/* 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;
  }
  .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 {
    top: 132px;
    left: 103px;
    width: 38px;
    height: 38px;
  }
  .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;
}

.closet-standard-star {
  position: absolute;
  left: 336px;
  bottom: 92px;
  width: 46px;
  height: 46px;
  background-color: #E796A9;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
}

.closet-standard-star-two {
  position: absolute;
  right: 104px;
  top: 128px;
  width: 78px;
  height: 78px;
  background-color: #E796A9;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
}

@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;
  }

  .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;
  }

  .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 {
    right: 24px;
    bottom: 66px;
    width: 30px;
    height: 30px;
  }

  .closet-standard-star-two {
    right: 20px;
    top: 58px;
    width: 42px;
    height: 42px;
  }

}

/* ---- 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).

   ⚠⚠ 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. */

.pricing-preview-section .pricing-preview-container::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  background-color: #E796A9;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.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;
  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;
  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;
  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;
  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 TRAILING SPACE IN content IS LOAD-BEARING AS OF v57. Under flex the
   gap between items came from column-gap; inline elements are only separated
   by whitespace in the MARKUP, which Webflow does not guarantee. The NBSP
   glues the dot to the word before it so a wrapped line can never START with
   a stranded middot, and the ordinary space after it is the break opportunity
   the line wraps at. REMOVE EITHER AND THE ROW BREAKS: no NBSP and the dot
   strands, no trailing space and the words run together. */

.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 ";
  color: #FFFFFF;
  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: 26px;
    height: 26px;
    margin-bottom: 0;
  }

  .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;
    transform: translateY(-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;
  width: 68px;
  aspect-ratio: 1 / 1;
  top: 56px;
  /* 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. */
  left: calc(var(--faq-gutter) + (100% - var(--faq-gutter) * 2) * 0.38 - 34px);
  background-color: #F491A9;
  clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 3% 36%, 39% 36%);
}

/* ---- 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);
  }

  .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;
  background-color: #EDECE0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
}

/* 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 {
  top: -4px;
  left: 46px;
  width: 34px;
  height: 34px;
}

.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;
  }
  .instagram-preview-star-lower {
    right: 26px;
    bottom: 72px;
    width: 44px;
    height: 44px;
  }
  .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;
  }
  /* ⚠⚠⚠ 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;
  }
}