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

/* ============ 0. ANNOUNCEMENT BAR (rotating) ============ */
.announce{
  background:var(--ink);color:var(--cream);font-size:.82rem;letter-spacing:.045em;
  padding:.6rem 1rem;font-weight:500;text-align:center;
  display:grid;place-items:center;min-height:2.1rem;
}
/* the three phrases are stacked in one grid cell and cross-faded */
.announce-msg{
  grid-area:1/1;white-space:nowrap;opacity:0;
}
.announce-msg:nth-child(1){opacity:1}   /* reduced-motion / no-anim fallback: first shows */
@media(prefers-reduced-motion:no-preference){
  .announce-msg{animation:announce-cycle 13.5s infinite}
  .announce-msg:nth-child(1){animation-delay:0s}
  .announce-msg:nth-child(2){animation-delay:4.5s;opacity:0}
  .announce-msg:nth-child(3){animation-delay:9s}
}
@keyframes announce-cycle{
  0%,26%{opacity:1}
  33%,97%{opacity:0}
  100%{opacity:0}
}
@media(max-width:600px){
  .announce{font-size:.735rem;padding:.55rem .75rem}
  .announce-msg{white-space:normal}
}

/* ============ 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(--panel);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(--panel);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)}
/* --- the configurator lives in this ink panel; everything namespaced .cfg-* --- */
.cfg .lede{color:rgba(239,231,214,.82);max-width:46ch}
.cfg-step{margin-top:clamp(2rem,4.5vw,3rem)}
.cfg-step-label{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,231,214,.55);margin:0 0 1.1rem;
}
.cfg-step-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.1rem}
.cfg-step-head .cfg-step-label{margin:0}

/* step 1 — pack ladder: 4-up → 2-up → 1-up */
.cfg-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
@media(max-width:760px){.cfg-packs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cfg-packs{grid-template-columns:1fr}}
.cfg-pack{
  position:relative;display:flex;flex-direction:column;gap:.12rem;text-align:left;font:inherit;
  background:var(--paper-lift);color:var(--ink);border:2px solid transparent;border-radius:var(--r);
  padding:1.15rem 1.15rem 1.1rem;cursor:pointer;
  transition:border-color .18s ease, transform .18s ease;
}
.cfg-pack:hover{transform:translateY(-2px)}
.cfg-pack.is-selected,.cfg-pack[aria-checked="true"]{border-color:var(--terracotta)}
.cfg-pack-flag{
  align-self:flex-start;margin-bottom:.35rem;background:var(--ink);color:var(--paper-lift);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:4px;
}
.cfg-pack-flag.gold{background:var(--gold);color:#fff}
.cfg-pack-name{font-family:var(--display);font-size:1.16rem;font-weight:600}
.cfg-pack-price{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.cfg-pack-each{font-size:.8rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* step 2 — per-unit color rows */
.cfg-matchall{padding:.5rem .95rem;font-size:.83rem}
.cfg-rows{display:flex;flex-direction:column;gap:1.15rem}
.cfg-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;
  padding-bottom:1.15rem;border-bottom:1px solid rgba(239,231,214,.12);
}
.cfg-row:last-child{border-bottom:0;padding-bottom:0}
.cfg-row-head{display:flex;align-items:center;gap:.6rem;min-width:9.5rem}
.cfg-row-label{font-size:.95rem;font-weight:500;color:var(--cream)}
.cfg-swatches{display:flex;flex-wrap:wrap;gap:.5rem}

/* fills — .c-<slug> keyed by color name; a real product photo can replace
   each background later (e.g. .c-sage{background:url(...)}) */
.c-charcoal{background:var(--sw-charcoal)}
.c-sage{background:var(--sw-sage)}
.c-white{background:var(--sw-white)}
.c-terracotta{background:var(--sw-terracotta)}
.c-navy{background:var(--sw-navy)}
.c-sky{background:var(--sw-sky)}
.c-brick-red{background:var(--sw-brick)}
.c-sand{background:var(--sw-sand)}

.cfg-sw{
  width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(239,231,214,.2);transition:transform .14s ease;
}
.cfg-sw:hover{transform:scale(1.08)}
.cfg-sw[aria-pressed="true"]{outline:2px solid var(--cream);outline-offset:2px}
/* white needs a defined edge on the ink panel */
.cfg-sw.c-white,.cfg-chip.c-white,.cfg-circle.c-white{box-shadow:inset 0 0 0 1px rgba(36,31,28,.28)}
.cfg-chip{width:17px;height:17px;border-radius:50%;flex:none;border:1px dashed rgba(239,231,214,.45)}
.cfg-chip.is-filled{border-style:solid;border-color:rgba(239,231,214,.25)}

/* the "which one's mine" lineup */
.cfg-lineup-wrap{margin-top:clamp(2rem,4.5vw,3rem);text-align:center}
.cfg-lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.cfg-circle{
  width:clamp(42px,12vw,58px);height:clamp(42px,12vw,58px);border-radius:50%;
  border:2px dashed rgba(239,231,214,.3);
  transition:background-color .22s ease,border-color .22s ease;
}
.cfg-circle.is-filled{border-style:solid;border-color:rgba(239,231,214,.18)}
@keyframes cfg-pop{0%{transform:scale(.55)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.cfg-circle.cfg-pop{animation:cfg-pop .34s cubic-bezier(.34,1.56,.64,1)}
.cfg-caption{
  margin:1.15rem auto 0;max-width:34ch;font-family:var(--display);
  font-size:clamp(1.05rem,2.6vw,1.28rem);line-height:1.4;color:var(--cream);
  min-height:1.4em;letter-spacing:-.01em;
}

/* engraving — v2 stub */
.cfg-engrave{
  margin-top:clamp(2rem,4.5vw,3rem);display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.2rem;border:1px dashed rgba(239,231,214,.22);border-radius:var(--r);opacity:.62;
}
.cfg-engrave-tag{
  flex:none;background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:4px;margin-top:.15rem;
}
.cfg-engrave-body b{font-family:var(--display);font-size:1.02rem;display:block;margin-bottom:.15rem;color:var(--cream)}
.cfg-engrave-body p{margin:0;font-size:.9rem;color:rgba(239,231,214,.7);max-width:52ch}

/* checkout */
.cfg-checkout{margin-top:clamp(2rem,4.5vw,3rem);max-width:520px}
.cfg-summary{font-size:.95rem;color:var(--cream);margin:0 0 .9rem;min-height:1.4em;font-variant-numeric:tabular-nums}
.cfg-add:disabled{opacity:.45;cursor:default}
.cfg-add-error{margin:.7rem 0 0;font-size:.85rem;color:#E7A98C}
.cfg-handoff{margin-top:1rem;color:rgba(239,231,214,.5)}
.cfg-ship{margin-top:.4rem;color:rgba(239,231,214,.5)}

/* ============ 10. PROOF ============ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
/* the hidden all-reviews grid: display:grid above would otherwise defeat the
   UA [hidden] rule, so the couch-tagged default view + the toggle both need this */
.rev-grid[hidden]{display:none}
@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)}
/* reviews view toggle (couch-tagged default ↔ all) — build-injected */
.rev-toggle{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.15rem;
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
}
.rev-toggle-label{margin:0;font-size:.9rem;color:var(--ink-soft)}
.rev-toggle-btn{padding:.62rem 1.15rem;font-size:.895rem}
/* the injected grids sit flush under the toggle, not double-spaced */
.rev-toggle + .rev-grid{margin-top:1.15rem}
/* homepage "See all reviews →" link under the 6-card teaser */
.rev-more{margin-top:clamp(1.6rem,3.5vw,2.2rem)}

/* /reviews page */
.rev-page h1{max-width:15ch;margin-bottom:1rem}
.rev-agg{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .55rem;font-size:1.05rem;color:var(--ink-soft)}
.rev-agg .rev-stars{color:var(--gold);letter-spacing:.14em}
.rev-agg strong{font-family:var(--display);font-weight:600;color:var(--ink)}
.rev-note{margin:0 0 clamp(1.8rem,4vw,2.6rem);font-size:.9rem;color:var(--ink-faint);max-width:62ch;line-height:1.55}

/* ============ 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(--panel);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(30,42,56,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(231,220,199,.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);
}
/* Phones: stack the two bounds into one column so each value + label
   gets full width and can't overlap (the slab display is wider than the fallback).
   The vertical divider becomes a short horizontal rule between them. */
@media(max-width:560px){
  .fg-spec-grid{grid-template-columns:1fr;gap:1.4rem;text-align:center}
  .fg-spec-div{width:min(150px,45%);height:1px;justify-self:center}
  .fg-spec-num.pending{font-size:1.75rem}
}

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

/* ============================================================
   POLICY PAGES — /shipping /returns /privacy /terms
   Plain and readable. Narrow measure, quiet rules, same world.
   Prose-first: no photography, so no caption plates here.
   ============================================================ */
.pol-hero{
  padding-block:clamp(2.6rem,6vw,4rem) clamp(1.7rem,3.5vw,2.4rem);
  border-bottom:1px solid var(--rule);
}
.pol-hero h1{font-size:clamp(2.1rem,6.6vw,3.25rem);max-width:15ch;margin-bottom:1.05rem}
.pol-hero .lede{max-width:50ch}
.pol-updated{margin-top:1.5rem;font-size:.8rem;color:var(--ink-faint);letter-spacing:.02em}

.pol{padding-block:clamp(2.4rem,5vw,3.6rem)}
.pol-wrap{max-width:68ch}

/* key facts — the answers people came for, above the prose */
.pol-key{
  list-style:none;margin:0 0 clamp(2rem,4vw,2.9rem);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
}
.pol-key li{background:var(--paper-lift);padding:1.15rem 1.2rem}
.pol-key b{
  display:block;font-family:var(--display);font-size:1.02rem;
  font-weight:600;margin-bottom:.24rem;letter-spacing:-.01em;
}
.pol-key span{font-size:.875rem;color:var(--ink-soft);line-height:1.48;display:block}

.pol-sec{
  padding-top:clamp(1.8rem,3.6vw,2.5rem);margin-top:clamp(1.8rem,3.6vw,2.5rem);
  border-top:1px solid var(--rule);
}
.pol-sec:first-of-type{padding-top:0;margin-top:0;border-top:0}
.pol-sec h2{font-size:clamp(1.32rem,3.5vw,1.72rem);margin-bottom:.9rem}
.pol-sec h3{font-size:1.035rem;margin:1.6rem 0 .5rem}
.pol-sec p,.pol-sec li{color:var(--ink-soft)}
.pol-sec ul{margin:.6rem 0 1.05em;padding-left:1.15rem}
.pol-sec li{margin-bottom:.5rem}
.pol-sec li::marker{color:var(--ink-faint)}
.pol-sec a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px;
}
.pol-sec a:hover{text-decoration-color:var(--ink)}

.pol-note{
  margin:1.5rem 0;padding:1.05rem 1.2rem;background:var(--paper-lift);
  border-left:2.5px solid var(--sage);border-radius:0 var(--r) var(--r) 0;font-size:.945rem;
}
.pol-note b{display:block;margin-bottom:.2rem;color:var(--ink)}
.pol-note p{margin-bottom:0}

/* closing contact + cross-links between the four policies */
.pol-foot{background:var(--cream)}
.pol-foot h2{font-size:clamp(1.4rem,3.7vw,1.9rem);margin-bottom:.75rem}
.pol-foot p{color:var(--ink-soft);max-width:46ch}
.pol-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.7rem 0 0;padding:0;list-style:none}
.pol-links a{
  display:inline-block;font-size:.895rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding:.62rem 1.05rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-lift);
}
.pol-links a:hover{border-color:var(--ink)}
.pol-links a[aria-current]{background:var(--ink);color:var(--paper-lift);border-color:var(--ink)}

/* ============================================================
   MAKER PAGE — /maker
   Editorial "who makes it". Warm, photo-forward, one portrait.
   Reuses the shared caption plate, buttons, eyebrow, and .final.
   ============================================================ */
.mk-hero{padding-block:clamp(2.6rem,6vw,4rem) clamp(1.6rem,3.5vw,2.4rem)}
.mk-hero h1{max-width:16ch;margin-bottom:1.15rem}
.mk-hero .lede{max-width:50ch}

/* narrow editorial measure, centered in the shell */
.mk-wrap{max-width:60ch}

.mk-story h2{margin-bottom:1.15rem}
.mk-story p{color:var(--ink-soft)}
.mk-open{
  font-family:var(--display);font-size:clamp(1.18rem,3vw,1.5rem);
  line-height:1.4;letter-spacing:-.012em;color:var(--ink);margin-bottom:1.15rem;
}

.mk-here{background:var(--cream)}
.mk-here-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.mk-here-grid{grid-template-columns:1fr;gap:2rem}}
.mk-portrait{
  margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/5;background:var(--paper-lift);
}
.mk-portrait img{width:100%;height:100%;object-fit:cover}
.mk-here-txt h2{margin-bottom:1.1rem}
.mk-here-txt p{color:var(--ink-soft);max-width:44ch}

.mk-close{background:var(--paper-lift)}
.mk-facts{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1.2rem;
}
.mk-close h2{max-width:19ch;margin-bottom:1.1rem}
.mk-close p{color:var(--ink-soft);max-width:48ch}
.mk-close .mk-sign{
  margin-top:1.6rem;font-family:var(--display);font-size:1.12rem;
  color:var(--ink);max-width:none;
}
/* ============================================================
   CART DRAWER — Storefront API slide-out (Late Light)
   Structural class names shared with other doors; the values here are
   couch's own warm world. No inline styles — swatch fills use .c-<slug>.
   ============================================================ */
body.cart-locked{overflow:hidden}
.cart-scrim{position:fixed;inset:0;background:rgba(36,31,28,.5);z-index:70}
.cart-scrim[hidden]{display:none}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(430px,92vw);
  background:var(--paper-lift);color:var(--ink);display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(36,31,28,.18);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.35rem;border-bottom:1px solid var(--rule)}
.cart-head h2{font-size:1.35rem}
.cart-close{background:none;border:0;font-size:1.75rem;line-height:1;color:var(--ink);cursor:pointer;padding:0 .3rem}
.cart-body{flex:1;overflow-y:auto;padding:.5rem 1.35rem;-webkit-overflow-scrolling:touch}
.cart-empty{padding:2.6rem 0}
.cart-empty p{font-size:1.05rem;color:var(--ink-soft);margin:0 0 1.1rem}
.cart-empty .btn{max-width:230px}

.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:start;padding:1.25rem 0;border-bottom:1px solid var(--rule)}
.ci-thumb{width:64px;height:64px;border-radius:var(--r);background:var(--cream);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;padding:.5rem}
.mini-swatches{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-content:center;max-width:48px}
.mini-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(36,31,28,.16)}
.ci-name{font-family:var(--display);font-weight:600;font-size:1.02rem}
.ci-variant{font-size:.9rem;color:var(--ink-soft);margin-top:1px}
.ci-colors{font-size:.82rem;color:var(--ink-faint);margin:.28rem 0 .6rem}
.ci-qty{display:flex;align-items:center;gap:.5rem}
.ci-step{width:27px;height:27px;border:1px solid var(--rule);background:var(--paper);border-radius:6px;font-size:1rem;line-height:1;cursor:pointer;color:var(--ink)}
.ci-count{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.ci-remove{background:none;border:0;color:var(--ink-faint);font-size:.82rem;cursor:pointer;text-decoration:underline;margin-left:.45rem}
.ci-remove:hover{color:var(--ink-soft)}
.ci-price{font-family:var(--display);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-subtotal{display:flex;justify-content:space-between;font-family:var(--display);font-weight:600;font-size:1.2rem;padding:1.15rem 0 .4rem}

.cart-foot{border-top:1px solid var(--rule);padding:1.15rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom));background:var(--cream)}
.cart-subtotal-note{font-size:.83rem;color:var(--ink-faint);margin-bottom:.85rem;text-align:center}
.cart-checkout{width:100%}
.cart-handoff{margin:.85rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint);text-align:center}

/* header cart button (shown once the cart has items) */
.hdr-cart{
  position:relative;background:none;border:0;cursor:pointer;color:var(--ink);
  padding:.35rem;margin-right:.2rem;display:inline-flex;align-items:center;
}
.hdr-cart[hidden]{display:none}
.hdr-cart svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--terracotta);color:#fff;font-size:.66rem;font-weight:700;line-height:17px;text-align:center;
}
.cart-count[hidden]{display:none}

/* white swatch needs a defined edge on light thumbnails too */
.mini-dot.c-white{box-shadow:inset 0 0 0 1px rgba(36,31,28,.28)}

/* ============================================================
   RV HOMEPAGE — components specific to this door's arc
   Additive: reuses the shared section scaffolding above; only the
   pieces the RV arc introduces live here.
   ============================================================ */

/* §4 problem agitation — a rueful pair, not a four-up grid */
.agit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:560px){.agit-grid{grid-template-columns:1fr}}

/* §5 benefits — four plain statements, airy, one idea each */
.blist{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.7rem,4vw,2.8rem);margin-top:clamp(2rem,4.5vw,3rem)}
@media(max-width:720px){.blist{grid-template-columns:1fr;gap:1.7rem}}
.bitem h3{margin-bottom:.5rem}
.bitem p{color:var(--ink-soft);max-width:42ch;margin:0}

/* §6 use-cases — five square tiles, horizontal scroll */
.uc-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:1rem;
  margin-top:clamp(2rem,4vw,2.8rem);overflow-x:auto;padding-bottom:.6rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.uc-scroll .uc{scroll-snap-align:start}

/* §7 compatibility — "confirmed to fit" label above the named-cup list */
.fit-confirm-label{
  margin:1.7rem 0 .3rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* §11 founder — trust cluster pills */
.tcluster{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem .6rem;margin:1.8rem 0 0;padding:0}
.tcluster li{
  font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--ink);
  background:var(--paper-lift);border:1px solid var(--rule);border-radius:22px;padding:.46rem .95rem;
}

/* §12 guarantee — center the CTA block within the centered section */
.gua .hero-actions{margin-inline:auto;align-items:center}

/* Golden Hour — buttons on the deep-navy panels.
   The navy CTA vanishes on a navy panel, so on dark surfaces the primary
   action flips to a warm sand button with navy text (per the panel-contrast
   rule); the "match all" ghost gets a light outline instead of dark-on-dark. */
.demo .btn-primary,.packs .btn-primary,.final .btn-primary,.sticky .btn-primary{
  background:var(--cream);color:var(--terracotta-deep);border-color:transparent;
}
.demo .btn-primary:hover,.packs .btn-primary:hover,.final .btn-primary:hover,.sticky .btn-primary:hover{
  background:#F6F1E2;color:var(--panel);
}
.packs .btn-ghost{color:var(--cream);border-color:rgba(231,220,199,.5)}
.packs .btn-ghost:hover{background:var(--cream);color:var(--panel)}