/* ============================================================
   CPAP MIAMI — "Rested" Brand System
   Calm night giving way to a warm Miami dawn.
   ============================================================ */

:root {
  /* Core palette */
  --night:  #171C36;   /* deep restful indigo — anchor */
  --cloud:  #F7F4ED;   /* warm off-white — default bg   */
  --dawn:   #F2925C;   /* warm apricot sunrise — CTA     */
  --breath: #3FA6A0;   /* calm teal — links, in-stock    */
  --slate:  #3D4259;   /* body text on light             */
  --mist:   #E4E0D6;   /* borders, dividers, card edges  */

  /* Extended tints (derived, harmonious) */
  --night-700: #232a4d;
  --night-500: #353d66;
  --dawn-soft: #F8C39B;
  --dawn-700:  #D9743E;
  --breath-soft: #CDE7E4;
  --breath-700:  #2F807B;
  --cloud-2: #FBF9F3;
  --cream:   #EFEADF;

  /* Functional */
  --verified: #2F8F5B;   /* Rx verified / in stock      */
  --verified-soft: #E2F1E8;
  --caution: #E0A33A;    /* Rx required                 */
  --caution-soft: #FAEFD6;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing rhythm */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 80px);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Soft depth shadows (warm-tinted, never harsh) */
  --sh-xs: 0 1px 2px rgba(23,28,54,.05), 0 1px 1px rgba(23,28,54,.04);
  --sh-sm: 0 2px 8px rgba(23,28,54,.06), 0 1px 2px rgba(23,28,54,.05);
  --sh-md: 0 10px 30px rgba(23,28,54,.08), 0 2px 8px rgba(23,28,54,.05);
  --sh-lg: 0 24px 60px rgba(23,28,54,.14), 0 6px 18px rgba(23,28,54,.08);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--slate);
  background: var(--cloud);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--display); color: var(--night); margin: 0; line-height: 1.08; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--breath-700); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--breath-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dawn);
  flex: none;
}
.eyebrow--ondark { color: var(--dawn-soft); }
.eyebrow--ondark::before { background: var(--dawn); }

.section-title { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.015em; }
.section-title em { font-style: italic; color: var(--dawn-700); font-weight: 500; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--slate); max-width: 60ch; line-height: 1.55; }

.section-num {
  font-family: var(--display);
  font-size: 14px;
  color: var(--breath-700);
  opacity: .75;
  font-feature-settings: "tnum";
}

/* number index header row */
.shead { display:flex; align-items:baseline; gap:18px; margin-bottom: 14px; }
.shead .section-num { font-style: italic; }

/* ---------- Dawn horizon band (signature motif) ---------- */
.horizon {
  background:
    radial-gradient(120% 150% at 78% 120%, rgba(242,146,92,.55) 0%, rgba(242,146,92,0) 45%),
    radial-gradient(90% 130% at 20% 130%, rgba(63,166,160,.30) 0%, rgba(63,166,160,0) 50%),
    linear-gradient(170deg, var(--night) 0%, var(--night-700) 48%, #3a335a 78%, #6b4f6e 100%);
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.btn--primary { background: var(--dawn); color: #3a1c0c; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--dawn-700); color: #fff; }
.btn--primary:active { transform: translateY(2px); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--night); border-color: var(--mist); }
.btn--ghost:hover { border-color: var(--breath); color: var(--breath-700); }
.btn--ondark { background: var(--cloud); color: var(--night); }
.btn--ondark.btn--ghost { background: transparent; color: var(--cloud); border-color: rgba(247,244,237,.35); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63,166,160,.4); }

/* ---------- Generic card ---------- */
.card {
  background: #fff; border: 1px solid var(--mist);
  border-radius: var(--r-md); padding: 28px;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* ---------- Specimen scaffolding ---------- */
.spec {
  border: 1px solid var(--mist);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.spec__body { padding: clamp(24px, 4vw, 48px); }
.spec__cap {
  border-top: 1px solid var(--mist);
  background: var(--cloud-2);
  padding: 14px 22px;
  font-size: 13.5px; color: var(--slate);
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
}
.spec__cap .k { font-weight:700; color: var(--night); }

.grid { display:grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .grid-2,.grid-3 { grid-template-columns: 1fr; } }

/* ---------- Color swatches ---------- */
.swatches { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 760px){ .swatches { grid-template-columns: repeat(2,1fr); } }
.sw {
  border-radius: var(--r-md); overflow:hidden;
  border:1px solid var(--mist); box-shadow: var(--sh-xs);
  background:#fff;
}
.sw__chip { height: 132px; display:flex; align-items:flex-end; padding:14px; }
.sw__meta { padding: 16px 18px 18px; }
.sw__name { font-family: var(--display); font-weight:600; font-size:18px; color:var(--night); }
.sw__role { font-size: 13.5px; color: var(--slate); margin-top: 3px; }
.sw__hex { font-family: var(--body); font-weight:700; letter-spacing:.04em; font-size:13px; margin-top:12px; color: var(--night); text-transform: uppercase; }
.sw__contrast { font-size:11.5px; color: var(--slate); margin-top:4px; }
.dotwhite { color:#fff; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.dotdark { color: var(--night); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}

/* ---------- Type specimen ---------- */
.typerow { border-bottom:1px solid var(--mist); padding: 22px 0; display:flex; gap: 28px; align-items:baseline; flex-wrap:wrap; }
.typerow:last-child { border-bottom:0; }
.typerow .meta { width: 150px; flex:none; font-size:13px; color: var(--slate); }
.typerow .meta b { display:block; color: var(--night); font-size:14px; }
.sample { font-family: var(--display); color: var(--night); }

/* ---------- Misuse ---------- */
.dont { position:relative; }
.dont::after {
  content:"✕"; position:absolute; top:12px; right:14px;
  width:26px; height:26px; border-radius:50%;
  background: #C5483B; color:#fff; font-size:15px; font-weight:700;
  display:grid; place-items:center;
}
.do::after {
  content:"✓"; position:absolute; top:12px; right:14px;
  width:26px; height:26px; border-radius:50%;
  background: var(--verified); color:#fff; font-size:15px; font-weight:700;
  display:grid; place-items:center;
}
.do { position:relative; }

/* ---------- Badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:13px; padding:6px 13px; border-radius: var(--r-pill);
  font-family: var(--body);
}
.badge--ok { background: var(--verified-soft); color: #1f6b41; }
.badge--rx { background: var(--caution-soft); color: #8a5a16; }
.badge .d { width:7px; height:7px; border-radius:50%; }
.badge--ok .d { background: var(--verified); }
.badge--rx .d { background: var(--caution); }

/* ---------- footer ---------- */
.brandfoot { background: var(--night); color: var(--cloud); }
.brandfoot a { color: var(--dawn-soft); }

/* reveal — animation-based (deterministic end state), gated on .js so content never hides without JS */
@keyframes revealUp { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
html.js [data-reveal]:not(.in) { opacity:0; }
html.js [data-reveal].in { animation: revealUp .7s var(--ease) both; }
@media (prefers-reduced-motion: reduce){ html.js [data-reveal]:not(.in){opacity:1;} html.js [data-reveal].in{animation:none;} }

.mono { font-variant-numeric: tabular-nums; }
hr.rule { border:0; border-top:1px solid var(--mist); margin: 0; }

/* ============ LOGO LOCKUP ============ */
.logo { display:inline-flex; align-items:center; gap: 0.7em; --logo: 52px; }
.logo svg { height: var(--logo); width: auto; display:block; flex:none; }
.logo__type { display:flex; flex-direction:column; line-height:.92; }
.logo__main {
  font-family: var(--display); font-weight: 600;
  font-size: calc(var(--logo) * .72); color: var(--night);
  letter-spacing: -.01em; white-space: nowrap;
}
.logo__main em { font-style: italic; }
.logo__sub {
  font-family: var(--body); font-weight: 700;
  font-size: calc(var(--logo) * .205);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--breath-700); margin-top: .35em; padding-left:.12em;
}
.logo--stacked { flex-direction:column; gap:.45em; text-align:center; }
.logo--stacked .logo__type { align-items:center; }
.logo--ondark .logo__main { color: var(--cloud); }
.logo--ondark .logo__sub { color: var(--dawn-soft); }
.logo--mono .logo__main { color: currentColor; }
.logo--mono .logo__sub { color: currentColor; opacity:.7; }

/* ============ MINI NAV ============ */
.topnav {
  position: sticky; top:0; z-index: 50;
  background: rgba(247,244,237,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mist);
}
.topnav__in { max-width: var(--maxw); margin:0 auto; padding: 12px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.topnav .logo { --logo: 30px; }
.topnav__links { display:flex; gap: 4px; flex-wrap:wrap; }
.topnav__links a {
  font-size: 13px; font-weight:600; color: var(--slate); text-decoration:none;
  padding: 6px 11px; border-radius: var(--r-pill); transition: background .15s, color .15s;
}
.topnav__links a:hover { background:#fff; color: var(--night); }
@media (max-width: 920px){ .topnav__links { display:none; } }

/* ============ COVER ============ */
.cover { min-height: 92vh; display:flex; flex-direction:column; justify-content:space-between;
  color: var(--cloud); position:relative; overflow:hidden; }
.cover__top { padding: clamp(28px,5vw,56px) var(--gutter) 0; }
.cover__mid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  width:100%; padding-block: clamp(40px,8vw,90px); }
.cover h1 { color: var(--cloud); font-size: clamp(44px, 8.5vw, 124px); font-weight:500;
  letter-spacing:-.02em; line-height:.96; }
.cover h1 em { font-style: italic; color: var(--dawn-soft); }
.cover__sub { max-width: 46ch; font-size: clamp(17px,2.1vw,22px); color: rgba(247,244,237,.84);
  margin-top: 26px; line-height:1.5; }
.cover__bottom { max-width: var(--maxw); margin:0 auto; width:100%;
  padding: 0 var(--gutter) clamp(28px,5vw,56px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.cover__meta { font-size:13px; letter-spacing:.04em; color: rgba(247,244,237,.7); }
.cover__meta b { color: var(--cloud); font-weight:700; }
/* faint sun on cover */
.cover__sun { position:absolute; right:-6%; bottom:-22%; width: min(60vw, 620px); aspect-ratio:1;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(248,195,155,.85), rgba(242,146,92,.35) 42%, rgba(242,146,92,0) 70%);
  pointer-events:none; }

/* stat row */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
@media (max-width:760px){ .stats{ grid-template-columns: repeat(2,1fr);} }
.stat__n { font-family: var(--display); font-weight:600; font-size: clamp(30px,4vw,46px); color: var(--night); line-height:1; }
.stat__l { font-size: 13.5px; color: var(--slate); margin-top:8px; }
.stats--ondark .stat__n { color: var(--cloud); }
.stats--ondark .stat__l { color: rgba(247,244,237,.72); }

/* on-bg logo tiles */
.bgtiles { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:760px){ .bgtiles{ grid-template-columns: repeat(2,1fr);} }
.bgtile { aspect-ratio: 1.5; border-radius: var(--r-md); display:grid; place-items:center;
  border:1px solid var(--mist); }

/* clear space diagram */
.clearbox { position:relative; background: var(--cloud-2); border:1px dashed var(--breath);
  border-radius: var(--r-md); padding: 48px; display:grid; place-items:center; }

/* component preview shells */
.swatchline { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* product card demo */
.pcard { background:#fff; border:1px solid var(--mist); border-radius: var(--r-md);
  overflow:hidden; box-shadow: var(--sh-xs); max-width: 320px; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.pcard__img { aspect-ratio: 4/3; background:
  radial-gradient(120% 120% at 70% 20%, var(--breath-soft), var(--cream));
  display:grid; place-items:center; position:relative; }
.pcard__body { padding: 18px 20px 22px; }
.pcard__name { font-family: var(--display); font-weight:600; font-size:19px; color:var(--night); }
.pcard__price { font-weight:800; color: var(--night); font-size:20px; }
.stars { color: var(--dawn); letter-spacing:2px; font-size:14px; }

/* trust bar */
.trustbar { background: var(--night); color: var(--cloud); border-radius: var(--r-md);
  display:flex; flex-wrap:wrap; gap: 10px 30px; padding: 18px 26px; align-items:center; justify-content:center; }
.trustbar .ti { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color: rgba(247,244,237,.92);}
.trustbar .ti svg { color: var(--breath); }

/* placeholder photo */
.ph { background:
  linear-gradient(135deg, var(--night) 0%, var(--night-700) 60%, #5a4a63 100%);
  position:relative; overflow:hidden; border-radius: var(--r-md); color: rgba(247,244,237,.5);
  display:grid; place-items:center; text-align:center; }
.ph::after { content:""; position:absolute; right:-30%; bottom:-50%; width:90%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(242,146,92,.5), transparent 65%); }
.ph__label { position:relative; z-index:1; font-size:13px; max-width:80%; line-height:1.45; }
.ph__label b { display:block; color: var(--dawn-soft); font-family:var(--display); font-size:16px; margin-bottom:4px; font-weight:600;}

/* voice cols */
.voice { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--mist); border-radius:var(--r-md); overflow:hidden; }
@media (max-width:680px){ .voice{ grid-template-columns:1fr; } }
.voice .c { padding: 22px 24px; }
.voice .c+ .c { border-left:1px solid var(--mist); }
@media (max-width:680px){ .voice .c+ .c { border-left:0; border-top:1px solid var(--mist);} }
.voice h4 { font-family:var(--body); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.voice .we h4 { color: var(--verified); }
.voice .not h4 { color: #C5483B; }
.voice li { margin-bottom:9px; }

/* bilingual table */
.bil { width:100%; border-collapse:collapse; }
.bil th, .bil td { text-align:left; padding: 16px 18px; border-bottom:1px solid var(--mist); vertical-align:top; }
.bil th { font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--breath-700); }
.bil td .lang { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); opacity:.6; display:block; margin-bottom:3px; }
.bil td.en { width:50%; }
.bil .quote { font-family:var(--display); font-size:18px; color:var(--night); line-height:1.35; }

/* app icon grid */
.appicons { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.appicon { width:84px; height:84px; border-radius:20px; display:grid; place-items:center; box-shadow: var(--sh-md); }
.appicon--ios { border-radius:20px; }
.appicon--round { border-radius:50%; }