/* ============================================================
   CPAP MIAMI — Site styles (extends brand.css)
   ============================================================ */

/* ---------- Utility / announcement bar ---------- */
.util {
  background: var(--night); color: rgba(247,244,237,.82);
  font-size: 13px;
}
.util__in {
  max-width: var(--maxw); margin:0 auto; padding: 7px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap: 18px; white-space:nowrap;
}
.util__l { overflow:hidden; text-overflow:ellipsis; }
.util a { color: var(--dawn-soft); text-decoration:none; font-weight:700; }
.util .dot { color: var(--breath); }
.util__r { display:flex; gap:18px; align-items:center; }
@media (max-width: 720px){ .util__r .hidemob { display:none; } }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top:0; z-index: 60;
  background: rgba(247,244,237,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mist);
}
.hdr__in { max-width: var(--maxw); margin:0 auto; padding: 14px var(--gutter);
  display:flex; align-items:center; gap: 16px; }
.hdr .logo { --logo: 32px; text-decoration:none; flex:none; }
.nav { display:flex; gap: 1px; margin-left: 4px; flex:1; flex-wrap:nowrap; justify-content:center; min-width:0; }
.nav a {
  font-size: 13.5px; font-weight:600; color: var(--slate); text-decoration:none;
  padding: 7px 9px; border-radius: var(--r-pill); transition: background .15s, color .15s; white-space:nowrap;
}
.nav a:hover, .nav a.active { background:#fff; color: var(--night); box-shadow: var(--sh-xs); }
.hdr__r { display:flex; align-items:center; gap: 8px; }
.iconbtn { width:42px; height:42px; border-radius:50%; border:1px solid var(--mist); background:#fff;
  display:grid; place-items:center; cursor:pointer; color: var(--slate); transition: border-color .15s, color .15s; }
.iconbtn:hover { border-color: var(--breath); color: var(--breath-700); }
.iconbtn svg { width:19px; height:19px; }
.cartdot { position:relative; }
.cartdot::after { content:"2"; position:absolute; top:-3px; right:-3px; width:18px; height:18px; border-radius:50%;
  background: var(--dawn); color: var(--night); font-size:11px; font-weight:800; display:grid; place-items:center; font-family:var(--body); }

/* language toggle */
.lang {
  display:inline-flex; border:1px solid var(--mist); border-radius: var(--r-pill); overflow:hidden; background:#fff;
  font-family: var(--body); font-weight:700; font-size:13px;
}
.lang button { border:0; background:transparent; padding: 9px 14px; cursor:pointer; color: var(--slate); }
.lang button.on { background: var(--night); color: var(--cloud); }

@media (max-width: 1160px){ .nav { display:none; } }
@media (max-width: 560px){ .hidesm { display:none; } }

/* hamburger (mobile) */
.burger { display:none; }
@media (max-width:1160px){ .burger { display:grid; } }

/* ---------- Trust strip ---------- */
.tstrip { background: #fff; border-bottom: 1px solid var(--mist); }
.tstrip__in { max-width: var(--maxw); margin:0 auto; padding: 14px var(--gutter);
  display:flex; gap: 10px 34px; flex-wrap:wrap; align-items:center; justify-content:center; }
.tstrip .ti { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color: var(--slate); white-space:nowrap; }
.tstrip .ti svg { color: var(--breath-700); width:18px; height:18px; flex:none; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; color: var(--cloud); }
.hero__in { max-width: var(--maxw); margin:0 auto; padding: clamp(56px,9vw,120px) var(--gutter); position:relative; z-index:2; }
.hero__sun { position:absolute; right:-8%; bottom:-30%; width: min(64vw, 680px); aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(248,195,155,.9), rgba(242,146,92,.4) 42%, rgba(242,146,92,0) 70%); z-index:1; }
.hero h1 { color: var(--cloud); font-size: clamp(40px,6.5vw,82px); font-weight:500; line-height:.98; letter-spacing:-.02em; max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--dawn-soft); }
.hero__sub { font-size: clamp(17px,2vw,21px); color: rgba(247,244,237,.85); max-width: 46ch; margin: 24px 0 32px; line-height:1.5; }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero__micro { margin-top: 26px; font-size:14px; color: rgba(247,244,237,.7); display:flex; align-items:center; gap:9px; }
.hero__micro .stars { color: var(--dawn-soft); }

/* ---------- Generic section heads ---------- */
.s { padding-block: clamp(56px,8vw,104px); }
.s--soft { background: var(--cloud-2); }
.s--white { background:#fff; }
.s__head { text-align:center; max-width: 64ch; margin: 0 auto clamp(34px,5vw,56px); }
.s__head .eyebrow { justify-content:center; }
.s__title { font-size: clamp(28px,4vw,46px); letter-spacing:-.015em; }
.s__title em { font-style:italic; color: var(--dawn-700); font-weight:500; }
.s__sub { font-size: clamp(17px,1.8vw,20px); color: var(--slate); margin-top: 16px; }

/* ---------- Three-path router ---------- */
.paths { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 880px){ .paths { grid-template-columns:1fr; } }
.path {
  background:#fff; border:1px solid var(--mist); border-radius: var(--r-lg); padding: 34px 30px;
  box-shadow: var(--sh-xs); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration:none; display:flex; flex-direction:column; gap: 14px;
}
.path:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.path__ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background: var(--breath-soft); color: var(--breath-700); }
.path__ic svg { width:28px; height:28px; }
.path h3 { font-size:24px; }
.path p { color: var(--slate); font-size:16px; margin:0; flex:1; }
.path__go { color: var(--breath-700); font-weight:700; font-size:15px; display:inline-flex; gap:7px; align-items:center; }
.path--accent .path__ic { background: var(--dawn-soft); color: var(--dawn-700); }

/* ---------- Resupply teaser band ---------- */
.resupply { position:relative; overflow:hidden; color: var(--cloud); border-radius: var(--r-xl, 22px); }
.resupply__in { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
  padding: clamp(36px,5vw,64px); position:relative; z-index:2; }
@media (max-width: 820px){ .resupply__in { grid-template-columns:1fr; } }
.resupply h2 { color: var(--cloud); font-size: clamp(28px,4vw,44px); line-height:1.05; }
.resupply h2 em { color: var(--dawn-soft); font-style:italic; }
.resupply p { color: rgba(247,244,237,.84); font-size:18px; max-width:44ch; }
.resupply__steps { display:flex; flex-direction:column; gap:14px; }
.rstep { display:flex; gap:14px; align-items:flex-start; background: rgba(247,244,237,.07); border:1px solid rgba(247,244,237,.14);
  border-radius: var(--r-md); padding: 16px 18px; }
.rstep .n { width:30px; height:30px; border-radius:50%; background: var(--dawn); color: var(--night); font-weight:800; display:grid; place-items:center; flex:none; font-size:14px; }
.rstep b { color: var(--cloud); font-family: var(--display); font-weight:600; display:block; font-size:17px; }
.rstep span { color: rgba(247,244,237,.7); font-size:14px; }

/* ---------- Product grid ---------- */
.pgrid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 980px){ .pgrid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .pgrid { grid-template-columns: 1fr;} }
.pgrid .pcard { max-width:none; }

/* ---------- Heritage band ---------- */
.heritage { position:relative; overflow:hidden; color: var(--cloud); }
.heritage__in { max-width: var(--maxw); margin:0 auto; padding: clamp(56px,8vw,104px) var(--gutter);
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; position:relative; z-index:2; }
@media (max-width: 860px){ .heritage__in { grid-template-columns:1fr; } }
.heritage h2 { color: var(--cloud); font-size: clamp(30px,4.5vw,52px); line-height:1.04; }
.heritage h2 em { color: var(--dawn-soft); font-style:italic; }
.heritage p { color: rgba(247,244,237,.82); font-size:18px; }
.heritage .sig { font-family: var(--display); font-style:italic; font-size:24px; color: var(--dawn-soft); margin-top:8px; }

/* ---------- Reviews ---------- */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width: 880px){ .reviews { grid-template-columns:1fr; } }
.rev { background:#fff; border:1px solid var(--mist); border-radius: var(--r-md); padding:26px; box-shadow: var(--sh-xs); }
.rev .stars { color: var(--dawn); font-size:15px; letter-spacing:2px; }
.rev p { font-family: var(--display); font-size:19px; color: var(--night); line-height:1.4; margin:12px 0 16px; }
.rev .who { font-size:14px; color: var(--slate); font-weight:700; }
.rev .who span { font-weight:400; opacity:.7; }

/* ---------- Education ---------- */
.edu { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width: 880px){ .edu { grid-template-columns:1fr; } }
.art { background:#fff; border:1px solid var(--mist); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--sh-xs);
  text-decoration:none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); display:block; }
.art:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.art__img { aspect-ratio: 16/10; background: linear-gradient(160deg, var(--night), var(--night-700) 70%, #5a4a63); position:relative; overflow:hidden; }
.art__img::after { content:""; position:absolute; right:-30%; bottom:-50%; width:80%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(242,146,92,.5), transparent 65%); }
.art__b { padding: 20px 22px 24px; }
.art__tag { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--breath-700); }
.art h3 { font-size:20px; margin:8px 0 0; }

/* ---------- Local CTA ---------- */
.local { display:grid; grid-template-columns: 1fr 1fr; gap:0; border:1px solid var(--mist); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-sm); }
@media (max-width: 820px){ .local { grid-template-columns:1fr; } }
.local__info { padding: clamp(30px,4vw,48px); background:#fff; }
.local__info h2 { font-size: clamp(26px,3vw,38px); }
.local__map { background: linear-gradient(160deg, var(--breath-soft), var(--cream)); position:relative; min-height: 320px; display:grid; place-items:center; }
.local__row { display:flex; gap:13px; align-items:flex-start; padding: 14px 0; border-bottom:1px solid var(--mist); }
.local__row:last-of-type { border-bottom:0; }
.local__row svg { color: var(--breath-700); width:20px; height:20px; flex:none; margin-top:2px; }
.local__row b { color: var(--night); display:block; }
.local__row span { font-size:15px; }

/* ---------- Footer ---------- */
.foot { background: var(--night); color: rgba(247,244,237,.74); }
.foot__in { max-width: var(--maxw); margin:0 auto; padding: clamp(48px,6vw,80px) var(--gutter) 40px; }
.foot__cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:34px; }
@media (max-width: 860px){ .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot__cols { grid-template-columns: 1fr; } }
.foot h4 { color: var(--cloud); font-family: var(--body); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.foot a { color: rgba(247,244,237,.74); text-decoration:none; display:block; padding:5px 0; font-size:15px; }
.foot a:hover { color: var(--dawn-soft); }
.foot__news input { width:100%; padding:13px 16px; border-radius: var(--r-sm); border:1px solid rgba(247,244,237,.2); background: rgba(247,244,237,.06); color: var(--cloud); font-family:var(--body); font-size:15px; margin-bottom:10px; }
.foot__news input::placeholder { color: rgba(247,244,237,.45); }
.foot__brands { display:flex; gap:16px 26px; flex-wrap:wrap; align-items:center; padding: 28px 0; margin-top: 36px; border-top:1px solid rgba(247,244,237,.13); border-bottom:1px solid rgba(247,244,237,.13); }
.foot__brands span { font-family: var(--display); font-weight:600; color: rgba(247,244,237,.6); font-size:18px; letter-spacing:.02em; }
.foot__legal { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-size:13px; color: rgba(247,244,237,.55); }

/* ============ MASK FINDER QUIZ ============ */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz__bar { height: 7px; background: var(--mist); border-radius: var(--r-pill); overflow:hidden; margin-bottom: 36px; }
.quiz__bar i { display:block; height:100%; background: linear-gradient(90deg, var(--breath), var(--dawn)); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.quiz__step { display:none; }
.quiz__step.on { display:block; }
.quiz__step.fade { animation: fadeup .4s var(--ease) both; }
@keyframes fadeup { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.quiz__q { font-family: var(--display); font-size: clamp(26px,4vw,40px); color: var(--night); font-weight:600; line-height:1.1; margin-bottom:8px; text-align:center; }
.quiz__hint { text-align:center; color: var(--slate); margin-bottom:34px; }
.quiz__opts { display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px){ .quiz__opts { grid-template-columns:1fr; } }
.opt {
  display:flex; gap:16px; align-items:center; text-align:left; cursor:pointer;
  background:#fff; border:2px solid var(--mist); border-radius: var(--r-md); padding: 20px 22px;
  font-family: var(--body); font-size:17px; font-weight:600; color: var(--night);
  transition: border-color .15s, box-shadow .15s, transform .12s var(--ease);
}
.opt:hover { border-color: var(--breath); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.opt.sel { border-color: var(--dawn); box-shadow: 0 0 0 4px rgba(242,146,92,.18); }
.opt__ic { width:46px; height:46px; border-radius:12px; background: var(--breath-soft); color: var(--breath-700); display:grid; place-items:center; flex:none; }
.opt__ic svg { width:24px; height:24px; }
.opt small { display:block; font-weight:400; color: var(--slate); font-size:13.5px; margin-top:2px; }
.quiz__nav { display:flex; justify-content:space-between; margin-top: 32px; align-items:center; }
.quiz__back { background:none; border:0; color: var(--slate); font-weight:600; cursor:pointer; font-family:var(--body); font-size:15px; padding:8px; }
.quiz__back:hover { color: var(--night); }
.quiz__count { font-size:14px; color: var(--slate); font-weight:700; }

/* results */
.results { display:none; }
.results.on { display:block; }
.results__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width: 820px){ .results__grid { grid-template-columns:1fr; } }
.match { background:#fff; border:1px solid var(--mist); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-sm); display:flex; flex-direction:column; }
.match.best { border-color: var(--dawn); box-shadow: var(--sh-md); }
.match__top { aspect-ratio: 4/3; background: radial-gradient(120% 120% at 70% 20%, var(--breath-soft), var(--cream)); display:grid; place-items:center; position:relative; }
.match__badge { position:absolute; top:14px; left:14px; background: var(--dawn); color: var(--night); font-weight:800; font-size:12px; padding:6px 13px; border-radius: var(--r-pill); }
.match__b { padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.match__why { background: var(--verified-soft); color:#1f6b41; border-radius: var(--r-sm); padding:12px 14px; font-size:14px; }
.match h3 { font-size:21px; }

/* ============ RESUPPLY STEPPER ============ */
.stepper { max-width: 720px; margin:0 auto; }
.stepper__head { display:flex; gap: 8px; margin-bottom: 38px; }
.stepper__head .sn { flex:1; text-align:center; }
.stepper__head .sn .b { height:6px; border-radius:var(--r-pill); background: var(--mist); margin-bottom:10px; transition: background .3s; }
.stepper__head .sn.done .b, .stepper__head .sn.cur .b { background: var(--dawn); }
.stepper__head .sn small { font-size:12.5px; color: var(--slate); font-weight:700; }
.stepper__head .sn.cur small { color: var(--night); }
.sstep { display:none; }
.sstep.on { display:block; }
.sstep.fade { animation: fadeup .4s var(--ease) both; }
.gearpick { display:grid; gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-weight:700; color: var(--night); font-size:15px; }
.field select, .field input { padding: 14px 16px; border-radius: var(--r-md); border:1.5px solid var(--mist); background:#fff; font-family:var(--body); font-size:16px; color: var(--night); }
.field select:focus, .field input:focus { outline:none; border-color: var(--breath); box-shadow: 0 0 0 3px rgba(63,166,160,.25); }
.cadence { display:flex; flex-direction:column; gap:12px; }
.cad { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1.5px solid var(--mist); border-radius: var(--r-md); padding: 16px 18px; }
.cad b { color: var(--night); font-family:var(--display); font-weight:600; font-size:17px; }
.cad span { font-size:13.5px; color: var(--slate); }
.cad select { padding:9px 12px; border-radius: var(--r-sm); border:1.5px solid var(--mist); font-family:var(--body); font-weight:700; color: var(--night); background:var(--cloud-2); }
.chan { display:flex; gap:12px; flex-wrap:wrap; }
.chan label { flex:1; min-width:140px; display:flex; gap:12px; align-items:center; border:1.5px solid var(--mist); border-radius:var(--r-md); padding:16px; cursor:pointer; font-weight:600; color:var(--night); }
.chan input { accent-color: var(--breath); width:18px; height:18px; }
.done-card { text-align:center; padding: 20px; }
.done-card .ring { width:84px; height:84px; border-radius:50%; background: var(--verified-soft); color: var(--verified); display:grid; place-items:center; margin:0 auto 22px; }
.done-card .ring svg { width:42px; height:42px; }

/* hide elements by lang handled in JS */
[hidden] { display:none !important; }

/* ============ PAGE HEADER / BREADCRUMB ============ */
.phead { background: var(--cloud-2); border-bottom:1px solid var(--mist); }
.phead__in { max-width: var(--maxw); margin:0 auto; padding: clamp(28px,4vw,52px) var(--gutter); }
.crumb { font-size:13px; color: var(--slate); margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumb a { color: var(--breath-700); text-decoration:none; }
.crumb a:hover { text-decoration:underline; }
.phead h1 { font-size: clamp(30px,4.5vw,52px); letter-spacing:-.015em; }
.phead h1 em { font-style:italic; color: var(--dawn-700); font-weight:500; }
.phead p { font-size: clamp(16px,1.7vw,19px); color: var(--slate); margin-top:12px; max-width:64ch; }

/* ============ SHOP / COLLECTION ============ */
.shop { display:grid; grid-template-columns: 248px 1fr; gap: 36px; align-items:start; }
@media (max-width: 880px){ .shop { grid-template-columns:1fr; } }
.filters { position:sticky; top:120px; display:flex; flex-direction:column; gap:24px; }
@media (max-width: 880px){ .filters { position:static; } }
.fgroup h4 { font-family:var(--body); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--night); margin:0 0 12px; }
.fopt { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:15px; color:var(--slate); cursor:pointer; }
.fopt input { accent-color: var(--breath); width:17px; height:17px; }
.fopt .ct { margin-left:auto; font-size:12.5px; color:var(--slate); opacity:.6; }
.shop__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.shop__count { font-size:14px; color:var(--slate); }
.shop__sort { padding:10px 14px; border-radius:var(--r-md); border:1.5px solid var(--mist); background:#fff; font-family:var(--body); font-weight:600; color:var(--night); }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip { display:inline-flex; gap:7px; align-items:center; background:var(--breath-soft); color:var(--breath-700); font-weight:700; font-size:13px; padding:6px 13px; border-radius:var(--r-pill); border:0; cursor:pointer; }
.chip b { cursor:pointer; }

/* ============ PDP ============ */
.pdp { display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:start; }
@media (max-width: 880px){ .pdp { grid-template-columns:1fr; } }
.pdp__gallery { position:sticky; top:120px; }
@media (max-width: 880px){ .pdp__gallery { position:static; } }
.pdp__main { aspect-ratio: 1; border-radius: var(--r-lg); background: radial-gradient(120% 120% at 70% 20%, var(--breath-soft), var(--cream)); display:grid; place-items:center; border:1px solid var(--mist); position:relative; }
.pdp__thumbs { display:flex; gap:12px; margin-top:14px; }
.pdp__thumbs div { width:74px; height:74px; border-radius:var(--r-md); border:1.5px solid var(--mist); background: radial-gradient(120% 120% at 60% 30%, var(--breath-soft), var(--cream)); cursor:pointer; }
.pdp__thumbs div.sel { border-color: var(--dawn); }
.pdp h1 { font-size: clamp(28px,3.6vw,42px); margin:10px 0 6px; }
.rxblock { border:1px solid var(--mist); border-radius: var(--r-md); padding:16px 18px; display:flex; gap:13px; align-items:flex-start; margin:18px 0; }
.rxblock.req { background: var(--caution-soft); border-color: #ecd5a3; }
.rxblock.no { background: var(--verified-soft); border-color: #bfe3cd; }
.rxblock svg { width:22px; height:22px; flex:none; margin-top:1px; }
.rxblock.req svg { color: #8a5a16; } .rxblock.no svg { color: #1f6b41; }
.rxblock b { display:block; color:var(--night); margin-bottom:2px; }
.rxblock span { font-size:14px; }
.buybox { border:1.5px solid var(--mist); border-radius: var(--r-md); overflow:hidden; margin:18px 0; }
.buyopt { display:flex; gap:14px; padding:18px; cursor:pointer; align-items:flex-start; border-bottom:1px solid var(--mist); }
.buyopt:last-child { border-bottom:0; }
.buyopt.sel { background: var(--cloud-2); }
.buyopt input { accent-color: var(--dawn); width:20px; height:20px; margin-top:2px; }
.buyopt .t { flex:1; } .buyopt .t b { color:var(--night); font-size:16px; }
.buyopt .t span { font-size:13.5px; color:var(--slate); display:block; }
.buyopt .save { background:var(--dawn-soft); color:var(--dawn-700); font-weight:800; font-size:12px; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.sizepick { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.sizepick button { padding:10px 16px; border-radius:var(--r-md); border:1.5px solid var(--mist); background:#fff; font-family:var(--body); font-weight:700; color:var(--night); cursor:pointer; }
.sizepick button.sel { border-color:var(--dawn); box-shadow:0 0 0 3px rgba(242,146,92,.18); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--mist); margin:40px 0 24px; flex-wrap:wrap; }
.tab { padding:12px 18px; border:0; background:none; font-family:var(--body); font-weight:700; font-size:15px; color:var(--slate); cursor:pointer; border-bottom:2px solid transparent; }
.tab.on { color:var(--night); border-bottom-color: var(--dawn); }
.tabpane { display:none; } .tabpane.on { display:block; }

/* ============ PROSE / ARTICLE ============ */
.prose { max-width: 720px; margin:0 auto; }
.prose h2 { font-size: clamp(24px,3vw,34px); margin: 40px 0 14px; }
.prose h3 { font-size: 22px; margin: 30px 0 10px; }
.prose p { font-size: 18px; color: var(--slate); margin: 0 0 18px; }
.prose ul { font-size: 18px; color: var(--slate); padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose blockquote { border-left:3px solid var(--dawn); margin:24px 0; padding:6px 0 6px 22px; font-family:var(--display); font-style:italic; font-size:22px; color:var(--night); }
.callout { background: var(--breath-soft); border-radius: var(--r-md); padding: 20px 24px; margin: 24px 0; }
.callout b { color: var(--breath-700); }

/* ============ FAQ / ACCORDION ============ */
.faq { max-width: 800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.qa { border:1px solid var(--mist); border-radius: var(--r-md); background:#fff; overflow:hidden; }
.qa summary { padding:20px 24px; font-family:var(--display); font-weight:600; font-size:19px; color:var(--night); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; font-family:var(--body); font-size:24px; color:var(--breath-700); transition: transform .2s; }
.qa[open] summary::after { content:"–"; }
.qa .a { padding: 0 24px 22px; font-size:16px; color:var(--slate); }

/* ============ ABOUT TIMELINE ============ */
.tl { display:flex; flex-direction:column; gap:0; max-width:780px; }
.tlrow { display:grid; grid-template-columns: 110px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--mist); }
.tlrow:last-child { border-bottom:0; }
.tlyear { font-family:var(--display); font-weight:600; font-size:26px; color:var(--dawn-700); }
.tlrow h3 { font-size:20px; margin:0 0 6px; }
.tlrow p { margin:0; color:var(--slate); }

/* ============ ACCOUNT ============ */
.acct { display:grid; grid-template-columns: 220px 1fr; gap:32px; align-items:start; }
@media (max-width: 760px){ .acct { grid-template-columns:1fr; } }
.acct__nav { display:flex; flex-direction:column; gap:4px; position:sticky; top:120px; }
@media (max-width: 760px){ .acct__nav { position:static; flex-direction:row; flex-wrap:wrap; } }
.acct__nav a { padding:11px 16px; border-radius:var(--r-md); font-weight:600; color:var(--slate); text-decoration:none; font-size:15px; }
.acct__nav a.on, .acct__nav a:hover { background:#fff; color:var(--night); box-shadow:var(--sh-xs); }
.rsupply-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--mist); flex-wrap:wrap; }
.rsupply-row:last-child { border-bottom:0; }
.rsupply-row .nm { font-family:var(--display); font-weight:600; color:var(--night); font-size:18px; }
.rsupply-row .meta { font-size:13.5px; color:var(--slate); }
.rsupply-actions { display:flex; gap:8px; }
.minibtn { padding:8px 14px; border-radius:var(--r-pill); border:1.5px solid var(--mist); background:#fff; font-family:var(--body); font-weight:700; font-size:13px; color:var(--night); cursor:pointer; }
.minibtn:hover { border-color:var(--breath); color:var(--breath-700); }

/* ============ CONTACT / SHOWROOM ============ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--mist); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; } }