/* ============================================================
   SECTIONS — homepage section components, in page order
   thecouchcupholder.com
   ============================================================ */

/* ============ 0. ANNOUNCEMENT BAR ============ */
.announce{
  background:var(--ink);color:var(--cream);font-size:.79rem;letter-spacing:.045em;
  text-align:center;padding:.62rem 1rem;font-weight:500;
}
.announce span{white-space:nowrap}
.announce .dot{opacity:.4;margin-inline:.62rem}
@media(max-width:600px){
  .announce{font-size:.715rem;padding:.55rem .75rem}
  .announce .dot{margin-inline:.4rem}
}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(245,240,232,.93);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.92rem 0}
.mark{
  font-family:var(--display);font-size:1.075rem;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;line-height:1.1;
}
.mark em{font-style:normal;color:var(--ink-faint);font-weight:400}
.nav{display:flex;gap:1.85rem;align-items:center}
.nav a{font-size:.895rem;font-weight:500;text-decoration:none;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.hdr-cta{font-size:.87rem;padding:.62rem 1.15rem}
.burger{
  display:none;background:none;border:1px solid var(--rule);border-radius:var(--r);
  padding:.55rem .8rem;font:inherit;font-size:.87rem;font-weight:500;cursor:pointer;color:var(--ink);
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper-lift);
    border-bottom:1px solid var(--rule);padding:.5rem 1.25rem 1.1rem;
  }
  .nav.open a{padding:.78rem 0;width:100%;border-bottom:1px solid var(--rule);font-size:1rem}
  .nav.open a:last-child{border-bottom:0}
}

/* ============ 1. HERO ============ */
.hero{padding-block:clamp(3rem,7vw,5.2rem) clamp(3.2rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:2.3rem}}
.hero h1{margin-bottom:1.15rem}
.hero h1 .quiet{color:var(--ink-faint);display:block;font-size:.55em;font-weight:400;letter-spacing:-.01em;margin-bottom:.42rem}
.hero-actions{display:flex;flex-direction:column;gap:.9rem;margin-top:1.9rem;max-width:400px}
.hero-actions .row{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
@media(max-width:520px){.hero-actions{max-width:none}.hero-actions .btn{width:100%}}

.hero-frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream);aspect-ratio:4/5}
.hero-frame img{width:100%;height:100%;object-fit:cover}
/* caption plate — the signature device, carried across every image */
.plate{
  position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(to top,rgba(36,31,28,.88),rgba(36,31,28,0));
  color:var(--cream);padding:2.4rem 1.15rem .95rem;font-size:.79rem;letter-spacing:.02em;
}
.plate b{font-weight:600;color:#fff}

/* ============ 2. DEMO ============ */
.demo{background:var(--ink);color:var(--cream)}
.demo h2{color:var(--paper-lift)}
.demo .eyebrow{color:rgba(239,231,214,.5)}
.demo .eyebrow::after{background:rgba(239,231,214,.22)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:880px){.demo-grid{grid-template-columns:1fr}}
.demo p{color:rgba(239,231,214,.82);max-width:42ch}
.demo-video{
  border-radius:var(--r);overflow:hidden;background:#12100E;aspect-ratio:9/16;
  max-height:640px;margin-inline:auto;width:100%;
}
.demo-video video,.demo-video img{width:100%;height:100%;object-fit:cover}
.demo-note{
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid rgba(239,231,214,.2);
  font-size:.86rem;color:rgba(239,231,214,.62);max-width:42ch;
}

/* ============ 3. PROBLEM ============ */
.prob-head{max-width:44ch;margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:860px){.prob-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
.prob-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--cream)}
.prob-card img{width:100%;height:100%;object-fit:cover}
.prob-card .plate{padding:2rem .85rem .8rem;font-size:.755rem}
.prob-close{
  margin-top:clamp(2rem,4vw,2.8rem);font-family:var(--display);
  font-size:clamp(1.2rem,3.1vw,1.62rem);line-height:1.34;max-width:33ch;letter-spacing:-.014em;
}

/* ============ 4. BENEFITS ============ */
.ben{background:var(--paper-lift)}
.ben-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,4rem);
  align-items:center;padding-block:clamp(1.9rem,4vw,2.9rem);
  border-bottom:1px solid var(--rule);
}
.ben-row:last-of-type{border-bottom:0}
.ben-row:nth-child(even) .ben-img{order:-1}
@media(max-width:820px){
  .ben-row{grid-template-columns:1fr;gap:1.4rem}
  .ben-row:nth-child(even) .ben-img{order:0}
}
.ben-img{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:var(--cream);position:relative}
.ben-img img{width:100%;height:100%;object-fit:cover}
.ben-txt h3{margin-bottom:.62rem}
.ben-txt p{color:var(--ink-soft);max-width:40ch;margin:0}
.ben-idx{
  font-family:var(--display);font-size:.85rem;color:var(--terracotta);
  font-weight:600;display:block;margin-bottom:.5rem;letter-spacing:.02em;
}

/* ============ 5. HOW IT WORKS ============ */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
@media(max-width:880px){.how-grid{grid-template-columns:1fr}}
.how-obj{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;background:var(--cream)}
.how-obj img{width:100%;height:100%;object-fit:cover}
.how-step{padding:1.15rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.how-step:first-of-type{border-top:0;padding-top:0}
.how-step b{font-family:var(--display);font-size:1.06rem;font-weight:600;display:block;margin-bottom:.24rem}
.how-step p{color:var(--ink-soft);font-size:.965rem;margin:0}
.how-dot{width:9px;height:9px;border-radius:50%;background:var(--terracotta);margin-top:.62rem}
.how-kicker{
  margin-top:1.8rem;padding:1.05rem 1.2rem;background:var(--cream);
  border-radius:var(--r);font-size:.945rem;color:var(--ink-soft);
}
.how-kicker b{color:var(--ink)}

/* ============ 6. FIT ============ */
.fit{background:var(--cream)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.fit-grid{grid-template-columns:1fr}}
.fit-gauge{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--paper-lift);position:relative}
.fit-gauge img{width:100%;height:100%;object-fit:cover}
.fit-range{
  display:inline-flex;align-items:baseline;gap:.55rem;background:var(--paper-lift);
  border:1px solid var(--rule);border-radius:var(--r);padding:.72rem 1.05rem;margin-bottom:1.3rem;
  font-family:var(--display);font-size:1.09rem;font-weight:600;
}
.fit-range small{font-family:var(--body);font-size:.775rem;font-weight:500;color:var(--ink-faint);letter-spacing:.03em;text-transform:uppercase}
.fit-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.05rem 1.4rem}
@media(max-width:520px){.fit-list{grid-template-columns:1fr}}
.fit-list li{
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:.93rem;
}
.fit-list li span{color:var(--ink-faint);font-size:.845rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.koozie{
  margin-top:1.7rem;padding:1.05rem 1.2rem;background:var(--paper-lift);
  border-left:2.5px solid var(--terracotta);border-radius:0 var(--r) var(--r) 0;font-size:.945rem;
}
.koozie b{display:block;margin-bottom:.18rem}

/* ============ 7. USE CASES ============ */
.uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
@media(max-width:900px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.uc-grid{grid-template-columns:1fr}}
.uc{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.uc img{width:100%;height:100%;object-fit:cover}
.uc-cap{
  position:absolute;inset:auto 0 0 0;padding:2.6rem .95rem 1rem;color:var(--cream);
  background:linear-gradient(to top,rgba(36,31,28,.9),rgba(36,31,28,0));
}
.uc-cap b{font-family:var(--display);font-size:1.06rem;font-weight:600;display:block;color:#fff;margin-bottom:.16rem}
.uc-cap span{font-size:.845rem;opacity:.88;line-height:1.42;display:block}
.uc-fifth{
  margin-top:1.5rem;padding:1.15rem 1.3rem;background:var(--paper-lift);
  border:1px solid var(--rule);border-radius:var(--r);font-size:.965rem;color:var(--ink-soft);
}
.uc-fifth b{color:var(--ink);font-family:var(--display);font-size:1.03rem}

/* ============ 8. DRINK ID ============ */
.did{background:var(--paper-lift)}
.did-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.did-grid{grid-template-columns:1fr}}
.did-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--cream)}
.did-img img{width:100%;height:100%;object-fit:cover}
.did-quote{
  margin-top:1.6rem;padding-left:1.1rem;border-left:2.5px solid var(--sage);
  font-family:var(--display);font-size:1.075rem;line-height:1.44;color:var(--ink-soft);letter-spacing:-.01em;
}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.sw{width:30px;height:30px;border-radius:50%;border:1px solid rgba(36,31,28,.14)}

/* ============ 9. PACKS ============ */
.packs{background:var(--ink);color:var(--cream)}
.packs h2{color:var(--paper-lift)}
.packs .eyebrow{color:rgba(239,231,214,.5)}
.packs .eyebrow::after{background:rgba(239,231,214,.22)}
.packs .lede{color:rgba(239,231,214,.78)}
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2.2rem,4.5vw,3rem)}
@media(max-width:840px){.pack-grid{grid-template-columns:1fr;gap:.85rem}}
.pack{
  background:var(--paper-lift);color:var(--ink);border-radius:var(--r);
  padding:1.7rem 1.5rem 1.5rem;display:flex;flex-direction:column;position:relative;
  border:2px solid transparent;
}
.pack.feat{border-color:var(--gold)}
.pack-flag{
  position:absolute;top:-1px;right:1.25rem;background:var(--gold);color:#fff;
  font-size:.665rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.34rem .68rem;border-radius:0 0 4px 4px;
}
.pack-name{font-family:var(--display);font-size:1.32rem;font-weight:600;margin-bottom:.2rem}
.pack-frame{font-size:.885rem;color:var(--ink-faint);margin-bottom:1.15rem;min-height:2.7em;line-height:1.42}
.pack-price{font-family:var(--display);font-size:2.35rem;font-weight:600;line-height:1;letter-spacing:-.03em}
.pack-unit{font-size:.845rem;color:var(--ink-faint);margin-top:.34rem;font-variant-numeric:tabular-nums}
.pack-col{font-size:.885rem;color:var(--ink-soft);margin:1.15rem 0 1.4rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.pack .btn{margin-top:auto}
.pack-foot{
  margin-top:1.7rem;display:flex;gap:1.6rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(239,231,214,.62);
}
.sets-note{
  margin-top:1.15rem;font-size:.885rem;color:rgba(239,231,214,.62);
}

/* ============ 10. PROOF ============ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
@media(max-width:880px){.rev-grid{grid-template-columns:1fr}}
.rev{background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);padding:1.45rem 1.35rem}
.stars{color:var(--gold);font-size:.9rem;letter-spacing:.14em;margin-bottom:.75rem}
.rev p{font-size:.955rem;line-height:1.56;margin-bottom:.9rem}
.rev cite{font-style:normal;font-size:.82rem;color:var(--ink-faint);display:block}
.rev-lede{max-width:44ch;color:var(--ink-soft)}

/* ============ 11. MAKER ============ */
.maker{background:var(--cream)}
.maker-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2.2rem,5vw,4rem);align-items:center}
@media(max-width:880px){.maker-grid{grid-template-columns:1fr}}
.maker-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--paper-lift)}
.maker-img img{width:100%;height:100%;object-fit:cover}
.maker p{color:var(--ink-soft);max-width:44ch}
.maker-sign{
  margin-top:1.5rem;font-family:var(--display);font-size:1.03rem;color:var(--ink);
}

/* ============ 12. TRUST ============ */
.trust{background:var(--paper-lift);padding-block:clamp(2.4rem,5vw,3.4rem)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:760px){.trust-grid{grid-template-columns:1fr;gap:1.15rem}}
.trust-item{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.trust-item svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.25;margin-top:.22rem}
.trust-item b{display:block;font-size:.965rem;margin-bottom:.12rem}
.trust-item span{font-size:.865rem;color:var(--ink-faint);line-height:1.48}

/* ============ 13. GUARANTEE ============ */
.gua{text-align:center}
.gua h2{max-width:16ch;margin-inline:auto}
.gua p{max-width:46ch;margin-inline:auto;color:var(--ink-soft);font-size:1.08rem;margin-top:1.15rem}

/* ============ 14. COMPARE ============ */
.cmp{background:var(--paper-lift)}
.cmp-wrap{overflow-x:auto;margin-top:clamp(2rem,4vw,2.6rem);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:.925rem}
th,td{padding:.92rem .85rem;text-align:left;border-bottom:1px solid var(--rule)}
thead th{
  font-family:var(--body);font-size:.735rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);vertical-align:bottom;
}
thead th:last-child{color:var(--ink)}
tbody td:first-child{color:var(--ink-soft);font-weight:500}
tbody td:last-child{font-weight:600;background:var(--cream)}
thead th:last-child{background:var(--cream)}
.cmp-close{
  margin-top:1.9rem;font-family:var(--display);font-size:clamp(1.1rem,2.8vw,1.42rem);
  line-height:1.38;max-width:40ch;letter-spacing:-.012em;
}

/* ============ 15. FAQ ============ */
.faq-list{margin-top:clamp(2rem,4vw,2.6rem);max-width:790px}
details{border-bottom:1px solid var(--rule)}
summary{
  cursor:pointer;list-style:none;padding:1.22rem 2.4rem 1.22rem 0;position:relative;
  font-family:var(--display);font-size:1.075rem;font-weight:500;letter-spacing:-.012em;line-height:1.34;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.35rem;top:1.72rem;width:11px;height:11px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.faq-a{padding:0 1.5rem 1.4rem 0;color:var(--ink-soft);font-size:.985rem;max-width:64ch}
.faq-a p{margin-bottom:.75rem}

/* ============ 16. FINAL ============ */
.final{background:var(--ink);color:var(--cream);text-align:center}
.final h2{color:var(--paper-lift)}
.final p{color:rgba(239,231,214,.75);margin-top:1rem;font-size:1.06rem}
.final .btn{margin-top:1.9rem}
.final .micro{color:rgba(239,231,214,.5);margin-top:1.1rem}

/* ============ 17. FOOTER ============ */
.ftr{background:var(--paper);border-top:1px solid var(--rule);padding-block:clamp(2.6rem,5vw,3.6rem)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr;gap:1.9rem}}
.ftr h4{
  font-family:var(--body);font-size:.715rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .95rem;
}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.6rem}
.ftr a{font-size:.925rem;text-decoration:none;color:var(--ink-soft)}
.ftr a:hover{color:var(--ink)}
.ftr-brand p{font-size:.9rem;color:var(--ink-soft);max-width:34ch;margin-top:.7rem}
.legal{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.815rem;color:var(--ink-faint);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ============ STICKY BUY BAR ============ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(36,31,28,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(239,231,214,.16);
  padding:.72rem 1.15rem calc(.72rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sticky.show{transform:translateY(0)}
.sticky-in{
  width:var(--shell);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
}
.sticky-txt{color:var(--cream);line-height:1.28;min-width:0}
.sticky-txt b{display:block;font-size:.925rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-txt span{font-size:.735rem;opacity:.6;display:block}
.sticky .btn{padding:.82rem 1.5rem;font-size:.945rem;white-space:nowrap;flex-shrink:0}
@media(max-width:420px){
  .sticky-txt b{font-size:.87rem}
  .sticky .btn{padding:.8rem 1.15rem;font-size:.9rem}
}

/* image placeholder styling — replaced by real photography */
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 11px,#E7DCC9 11px,#E7DCC9 22px);
  color:var(--ink-faint);font-size:.74rem;letter-spacing:.075em;text-transform:uppercase;
  text-align:center;padding:1.2rem;font-weight:600;line-height:1.5;
}

/* ============================================================
   FIT GUIDE PAGE — /fit
   Own components, same world. fg- prefix keeps these clear of
   the homepage fit teaser (.fit) above.
   ============================================================ */

/* ---- fg 1. hero ---- */
.fg-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2.6rem,6vw,4rem)}
.fg-hero h1{max-width:13ch;margin-bottom:1.2rem}
.fg-hero .lede{max-width:46ch}
.fg-hero .textlink{display:inline-block;margin-top:1.5rem}

/* ---- fg 2. range plate — reads like a spec, not a claim ---- */
.fg-spec{background:var(--ink);color:var(--cream);padding-block:clamp(2.8rem,6vw,4.2rem)}
.fg-spec-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.2rem,4vw,3rem);
  align-items:start;max-width:760px;margin-inline:auto;text-align:center;
}
.fg-spec-num{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.9rem,10vw,5rem);color:var(--paper-lift);font-variant-numeric:tabular-nums;
}
.fg-spec-num small{font-size:.4em;font-weight:500;color:rgba(239,231,214,.6);letter-spacing:0;margin-left:.14em}
/* placeholder numerals — sized so [MEASURE] doesn't blow out the plate.
   Drop the .pending class when the real figures land. */
.fg-spec-num.pending{font-size:clamp(1.35rem,4.6vw,2.3rem);letter-spacing:.005em}
.fg-spec-lab{
  margin-top:.75rem;font-size:.685rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(239,231,214,.55);
}
.fg-spec-sub{margin-top:.32rem;font-size:.8rem;color:rgba(239,231,214,.42)}
.fg-spec-div{width:1px;height:clamp(3.6rem,10vw,5.6rem);background:rgba(239,231,214,.25);justify-self:center}
.fg-spec-foot{
  text-align:center;margin:2rem auto 0;max-width:52ch;
  font-size:.86rem;color:rgba(239,231,214,.62);
}

/* ---- fg 3. sticky-note test ---- */
.fg-test{background:var(--cream)}
.fg-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.fg-test-grid{grid-template-columns:1fr}}
.fg-body{color:var(--ink-soft);max-width:44ch}
.fg-steps{list-style:none;margin:1.8rem 0 0;padding:0}
.fg-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding-block:1.1rem;border-top:1px solid var(--rule);
}
.fg-steps li:first-child{border-top:0;padding-top:0}
.fg-step-num{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--terracotta);line-height:1.5}
.fg-steps b{font-family:var(--display);font-size:1.06rem;font-weight:600;display:block;margin-bottom:.24rem}
.fg-steps p{color:var(--ink-soft);font-size:.965rem;margin:0;max-width:42ch}

/* ---- fg 4a. lead cup — the one this audience already owns ---- */
.fg-lead{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:stretch;
  background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-top:clamp(2rem,4vw,2.8rem);
}
@media(max-width:760px){.fg-lead{grid-template-columns:1fr}}
.fg-lead-img{margin:0;position:relative;aspect-ratio:4/3;background:var(--cream)}
.fg-lead-img img{width:100%;height:100%;object-fit:cover}
.fg-lead-body{
  padding:clamp(1.5rem,3.6vw,2.3rem);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
}
.fg-lead-body h3{font-size:clamp(1.42rem,3.9vw,1.95rem);margin-bottom:.65rem;letter-spacing:-.018em}
.fg-lead-body p{color:var(--ink-soft);max-width:40ch;margin-bottom:0}
.fg-lead-meas{
  margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--rule);width:100%;
  font-size:.845rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}

/* ---- fg 4. container gallery ---- */
.fg-gal .lede{margin-top:1.05rem}
.fg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
@media(max-width:1020px){.fg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.fg-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
.fg-card{
  margin:0;background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.fg-card-img{aspect-ratio:1/1;background:var(--cream);position:relative}
.fg-card-img img{width:100%;height:100%;object-fit:cover}
.fg-card-body{padding:.92rem 1rem 1.05rem;display:flex;flex-direction:column;align-items:flex-start;gap:.22rem}
.fg-card-name{font-family:var(--display);font-size:.995rem;font-weight:600;line-height:1.28;letter-spacing:-.01em}
.fg-card-meas{font-size:.82rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.fg-badge{
  margin-top:.5rem;font-size:.645rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.3rem .58rem;border-radius:4px;border:1px solid;
}
.fg-badge.ok{background:rgba(124,138,110,.16);border-color:rgba(124,138,110,.5);color:#4C593F}
.fg-badge.no{background:transparent;border-color:var(--rule);color:var(--ink-faint)}

/* ---- fg 5. the floor ---- */
.fg-floor{background:var(--paper-lift)}
.fg-floor-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4rem);align-items:start}
@media(max-width:880px){.fg-floor-grid{grid-template-columns:1fr;gap:1.8rem}}
.fg-out-head{
  font-size:.685rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .5rem;
}
.fg-out{list-style:none;margin:0;padding:0}
.fg-out li{
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--rule);font-size:.945rem;font-weight:500;
}
.fg-out li span{color:var(--ink-faint);font-size:.83rem;white-space:nowrap}
.fg-floor-close{
  margin-top:1.5rem;font-family:var(--display);font-size:1.08rem;
  line-height:1.4;letter-spacing:-.012em;color:var(--ink);
}