/* =========================================================
   Oura Ring 5 — landing page
   Calm, premium palette: warm white + sand + charcoal,
   one champagne accent. No blurred/animated background
   layers — everything is a cheap transform or opacity.
   Craft rules: docs/design-audit.md
   ========================================================= */

:root{
  /* ---- surfaces ---- */
  --bg:            #ffffff;
  --bg-soft:       #f7f6f3;
  --bg-stage:      #f0eeea;
  --dark:          #14151a;
  --dark-2:        #1c1d23;

  /* ---- structure ---- */
  --line:          #e8e5e0;
  --line-strong:   #d9d5cf;
  --line-d:        rgba(255,255,255,.12);

  /* ---- text ---- */
  --ink:           #17181c;
  --ink-2:         #55575e;
  --ink-3:         #6e7079;
  --ink-4:         #9a9ca3;
  --inv:           #f8f7f5;
  --inv-2:         #bcbdc3;
  --inv-3:         #8e9096;

  /* ---- one accent, warm ---- */
  --accent:        #b8874a;
  --accent-soft:   #f4ebdd;
  --accent-ink:    #6f4f1f;

  --ok:            #2f7d63;
  --danger:        #b3261e;

  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-ui:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:40px;

  --shadow-soft:  0 1px 2px rgba(23,24,28,.04), 0 10px 30px rgba(23,24,28,.06);
  --shadow-float: 0 20px 50px rgba(23,24,28,.18), 0 2px 8px rgba(23,24,28,.08);

  --dur-1:150ms; --dur-2:250ms; --dur-3:450ms; --dur-4:700ms;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --container: 1280px;
  --header-h: 68px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--sp-5)); -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; font-family:var(--font); font-size:var(--t-md); line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
h1{ font-size:clamp(30px,4.6vw,60px); }
h2{ font-size:clamp(24px,3.4vw,44px); }
h3{ font-size:var(--t-xl); font-weight:560; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:var(--r-sm); }
[hidden]{ display:none!important; }

.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:var(--sp-3); top:-70px; z-index:400; background:var(--ink); color:#fff; padding:var(--sp-3) var(--sp-4); border-radius:0 0 var(--r-sm) var(--r-sm); transition:top var(--dur-1); }
.skip-link:focus{ top:0; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
.container--narrow{ max-width:840px; }
.section{ padding:clamp(56px,8vw,112px) 0; }
.section--alt{ background:var(--bg-soft); }
.section--dark{ background:var(--dark); color:var(--inv); }
.section__head{ max-width:720px; margin:0 auto var(--sp-7); text-align:center; }
.section__sub{ color:var(--ink-3); margin-top:var(--sp-4); font-size:var(--t-lg); }
.section__title-inv{ color:var(--inv); }
.eyebrow{ display:inline-block; font-size:var(--t-2xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:var(--sp-4); }
.eyebrow--inv{ color:var(--accent); }
.lead{ color:var(--ink-2); max-width:64ch; font-size:var(--t-lg); }
.link{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.link:hover{ color:var(--accent-ink); }
.scroll-hint{ display:none; font-size:var(--t-sm); color:var(--ink-3); text-align:center; margin-top:var(--sp-3); }

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:var(--accent); transition:width 120ms linear; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  min-height:48px; padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill);
  font-size:var(--t-ui); font-weight:550; letter-spacing:-.01em; white-space:nowrap;
  transition:background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }
.btn--primary:hover{ background:#2a2b31; border-color:#2a2b31; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--lg{ min-height:54px; padding:var(--sp-4) var(--sp-6); font-size:var(--t-md); }
.btn--sm{ min-height:40px; padding:var(--sp-2) var(--sp-4); font-size:var(--t-sm); }
.btn--block{ width:100%; }

.icon-btn{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; transition:background var(--dur-1); }
.icon-btn:hover{ background:rgba(23,24,28,.06); }

.badge-discount{
  display:inline-flex; align-items:center; background:var(--accent-soft); color:var(--accent-ink);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.03em;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill); white-space:nowrap;
}

/* ---------- announcement ---------- */
.announce{ background:var(--dark); color:var(--inv); font-size:var(--t-xs); }
.announce__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:38px; }
.announce__promo{ color:#e0c294; font-weight:600; }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid transparent;
  transition:border-color var(--dur-2);
}
.header.is-scrolled{ border-bottom-color:var(--line); }
.header__inner{ height:var(--header-h); display:flex; align-items:center; gap:var(--sp-5); transition:height var(--dur-2); }
.header.is-scrolled .header__inner{ height:58px; }
.header__burger{ display:none; margin-left:calc(var(--sp-2) * -1); }
.header__price{ font-weight:600; font-variant-numeric:tabular-nums; font-size:var(--t-ui); }

.logo{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.logo__mark{ color:var(--accent); display:grid; place-items:center; }
.logo__text{ font-size:var(--t-md); letter-spacing:-.02em; }
.logo__text b{ font-weight:700; }

.nav{ display:flex; gap:var(--sp-5); margin-inline:auto; }
.nav a{ font-size:var(--t-ui); color:var(--ink-2); position:relative; padding:var(--sp-2) 0; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--ink); transition:right var(--dur-2) var(--ease); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.header__actions{ display:flex; align-items:center; gap:var(--sp-3); }

/* ---------- hero ---------- */
.hero{ background:linear-gradient(180deg,#fbfaf8 0%,var(--bg-soft) 100%); border-bottom:1px solid var(--line); padding:clamp(40px,6vw,76px) 0 clamp(48px,6vw,84px); }
.hero__inner{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:var(--sp-2) var(--sp-4); font-size:var(--t-sm); color:var(--ink-2);
  margin-bottom:var(--sp-5);
}
.pill__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

.hero__title{ margin-bottom:var(--sp-5); color:var(--ink); max-width:22ch; }
.hero__sub{ color:var(--ink-2); font-size:var(--t-lg); max-width:50ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-6) 0; }
.hero__trust{ display:flex; align-items:center; gap:var(--sp-4); color:var(--ink-3); font-size:var(--t-ui); flex-wrap:wrap; }
.hero__trust b{ color:var(--ink); }
.avatars{ display:flex; }
.avatars i{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:var(--t-xs); font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); border:2px solid var(--bg-soft); margin-left:-10px;
}
.avatars i:first-child{ margin-left:0; }
.dot-sep{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--ink-4); margin:0 var(--sp-2); vertical-align:middle; }

.hero__visual{ position:relative; }
.hero__stage{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.hero__stage img{ width:100%; aspect-ratio:1/1; object-fit:contain; }
.hero__badges{ position:absolute; inset:0; pointer-events:none; }

.float-card{
  position:absolute; display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4); min-width:112px; box-shadow:var(--shadow-soft);
}
.float-card b{ font-size:var(--t-xl); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.float-card span{ font-size:var(--t-2xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; }
.float-card--1{ top:6%; left:-3%; }
.float-card--2{ bottom:14%; right:-3%; }
.float-card--3{ bottom:4%; left:8%; }
.float-card--a{ top:8%; right:7%; }
.float-card--b{ bottom:10%; left:7%; }

/* ---------- trust strip ---------- */
.trust{ background:var(--bg); border-bottom:1px solid var(--line); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); padding-block:var(--sp-5); }
.trust__item{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.trust__item svg{ color:var(--accent); flex:0 0 auto; margin-top:3px; }
.trust__item b{ display:block; font-size:var(--t-ui); font-weight:600; }
.trust__item span{ font-size:var(--t-sm); color:var(--ink-3); }

/* ---------- stats ---------- */
.stats{ background:var(--bg-soft); border-bottom:1px solid var(--line); padding:clamp(36px,5vw,64px) 0; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6); }
.stat{ display:flex; flex-direction:column; gap:var(--sp-2); }
.stat b{ font-size:clamp(32px,4vw,48px); font-weight:600; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat span{ font-size:var(--t-ui); color:var(--ink-3); max-width:24ch; }

/* ---------- product ---------- */
.pdp-wrap{ padding:clamp(48px,6vw,88px) 0; background:var(--bg); }
.pdp{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }

.gallery{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:var(--sp-4); position:sticky; top:calc(var(--header-h) + var(--sp-5)); }
.gallery__thumbs{ display:flex; flex-direction:column; gap:var(--sp-2); }
.gallery__thumbs::-webkit-scrollbar{ display:none; }
.gallery__thumbs{ scrollbar-width:none; }
.thumb{ width:80px; height:80px; border-radius:var(--r-sm); overflow:hidden; background:#fff; border:2px solid transparent; transition:border-color var(--dur-1); }
.thumb img{ width:100%; height:100%; object-fit:contain; }
.thumb[aria-selected="true"]{ border-color:var(--ink); }
.gallery__stage{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; display:grid; place-items:center; padding:var(--sp-4); }
.gallery__stage img{ width:100%; height:100%; object-fit:contain; transition:opacity var(--dur-2) var(--ease); }
.gallery__stage img.is-swapping{ opacity:0; }
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.94); border:1px solid var(--line); display:grid; place-items:center; transition:background var(--dur-1); }
.gallery__nav:hover{ background:#fff; }
.gallery__nav--prev{ left:var(--sp-4); } .gallery__nav--next{ right:var(--sp-4); }
.gallery__counter{ position:absolute; bottom:var(--sp-4); left:50%; transform:translateX(-50%); background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); font-size:var(--t-xs); color:var(--ink-2); font-variant-numeric:tabular-nums; }

.buybox{ display:flex; flex-direction:column; gap:var(--sp-5); }
.rating{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t-sm); color:var(--ink-3); }
.rating__stars{ color:var(--accent); letter-spacing:2px; }
.buybox__title{ font-size:clamp(30px,3.4vw,42px); }
.buybox__tagline{ color:var(--ink-2); font-size:var(--t-lg); }
.price{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.price__now{ font-size:var(--t-3xl); font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.price__was{ color:var(--ink-3); font-size:var(--t-lg); font-variant-numeric:tabular-nums; }

.option__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.option__label{ font-size:var(--t-ui); font-weight:600; }
.option__value{ font-size:var(--t-ui); color:var(--ink-2); }
.option__hint{ font-size:var(--t-sm); color:var(--ink-3); margin-bottom:var(--sp-3); display:flex; gap:var(--sp-2); flex-wrap:wrap; }

.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:var(--sp-3); max-width:420px; }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-2); border-radius:var(--r); border:1px solid transparent; transition:border-color var(--dur-1); }
.swatch__img{ width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--line); }
.swatch__img img{ width:100%; height:100%; object-fit:cover; }
.swatch__name{ font-size:var(--t-2xs); color:var(--ink-2); text-align:center; line-height:1.3; }
.swatch:hover{ border-color:var(--line-strong); }
.swatch[aria-checked="true"]{ border-color:var(--ink); }
.swatch[aria-checked="true"] .swatch__name{ color:var(--ink); font-weight:600; }

.sizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:var(--sp-2); max-width:560px; }
.size{ min-height:46px; padding:var(--sp-2) var(--sp-1); border:1px solid var(--line-strong); border-radius:var(--r-sm); font-size:var(--t-ui); font-weight:500; text-align:center; font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-1), background var(--dur-1), color var(--dur-1); }
.size small{ display:block; font-size:var(--t-2xs); font-weight:400; color:var(--ink-3); letter-spacing:.06em; }
.size:hover{ border-color:var(--ink); }
.size[aria-checked="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.size[aria-checked="true"] small{ color:rgba(255,255,255,.7); }

.buybox__actions{ display:grid; gap:var(--sp-3); }
.assurance{ display:grid; gap:var(--sp-3); font-size:var(--t-sm); color:var(--ink-2); border-top:1px solid var(--line); padding-top:var(--sp-5); }
.assurance li{ display:flex; align-items:center; gap:var(--sp-3); }
.assurance svg{ color:var(--ink-3); flex:0 0 auto; }

.accordion{ border-top:1px solid var(--line); }
.accordion details{ border-bottom:1px solid var(--line); }
.accordion summary{ list-style:none; cursor:pointer; position:relative; padding:var(--sp-4) var(--sp-6) var(--sp-4) 0; font-size:var(--t-ui); font-weight:550; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after,.accordion summary::before{ content:""; position:absolute; right:var(--sp-2); top:50%; background:var(--ink-2); transition:transform var(--dur-2) var(--ease), opacity var(--dur-1); }
.accordion summary::before{ width:12px; height:1.5px; transform:translateY(-50%); }
.accordion summary::after{ width:1.5px; height:12px; transform:translate(-5px,-50%); }
.accordion details[open] summary::after{ opacity:0; transform:translate(-5px,-50%) rotate(90deg); }
.accordion__body{ padding:0 0 var(--sp-5); color:var(--ink-2); font-size:var(--t-ui); display:grid; gap:var(--sp-3); }
.bullets{ display:grid; gap:var(--sp-2); }
.bullets li{ position:relative; padding-left:var(--sp-5); font-size:var(--t-ui); }
.bullets li::before{ content:""; position:absolute; left:2px; top:.5em; width:12px; height:7px; border-left:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent); transform:rotate(-45deg); }
.bullets--lg li{ font-size:var(--t-md); }
.specs > div{ display:flex; justify-content:space-between; gap:var(--sp-5); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.specs > div:last-child{ border-bottom:0; }
.specs dt{ color:var(--ink-3); font-size:var(--t-sm); }
.specs dd{ margin:0; text-align:right; font-size:var(--t-sm); font-variant-numeric:tabular-nums; }

/* ---------- pinned showcase (light) ---------- */
.showcase{ background:var(--bg); border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); padding:clamp(56px,8vw,112px) max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-5))); }
.showcase__stage-col{ position:relative; }
.showcase__sticky{ position:sticky; top:calc(var(--header-h) + var(--sp-6)); display:grid; place-items:center; gap:var(--sp-5); }
.showcase__sticky img{ width:min(100%,460px); border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); aspect-ratio:1/1; object-fit:contain; transition:opacity var(--dur-3) var(--ease); }
.showcase__sticky img.is-swapping{ opacity:0; }
.showcase__dots{ display:flex; gap:var(--sp-2); }
.showcase__dots button{ width:34px; height:4px; border-radius:var(--r-pill); background:var(--line-strong); transition:background var(--dur-2), width var(--dur-2) var(--ease); }
.showcase__dots button[aria-selected="true"]{ background:var(--accent); width:54px; }

.showcase__panels{ display:grid; gap:var(--sp-8); }
.panel{ max-width:44ch; padding-block:clamp(24px,6vw,80px); opacity:.45; transition:opacity var(--dur-3) var(--ease); }
.panel.is-active{ opacity:1; }
.panel__index{ display:block; font-size:var(--t-2xs); letter-spacing:.24em; color:var(--accent-ink); margin-bottom:var(--sp-4); font-variant-numeric:tabular-nums; }
.panel h3{ margin-bottom:var(--sp-4); font-size:clamp(22px,2.6vw,32px); }
.panel p{ color:var(--ink-2); margin-bottom:var(--sp-5); }

/* ---------- bento (light) ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); }
.bento__card{
  position:relative; grid-column:span 1;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
.bento__card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--line-strong); }
.bento__card--wide{ grid-column:span 2; }
.bento__icon{ width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--accent-ink); }
.bento__card p{ color:var(--ink-2); font-size:var(--t-ui); }
.bars{ display:flex; align-items:flex-end; gap:var(--sp-2); height:92px; margin-top:var(--sp-4); }
.bars span{ flex:1; height:var(--h); border-radius:6px; background:linear-gradient(180deg,var(--accent),rgba(184,135,74,.25)); transform-origin:bottom; transform:scaleY(0); transition:transform var(--dur-4) var(--ease); }
.bars.is-in span{ transform:scaleY(1); }
.bento__card--app{ grid-column:span 3; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.score-rings{ display:flex; gap:var(--sp-4) var(--sp-5); flex-wrap:wrap; }
.score{ position:relative; width:96px; height:96px; margin-bottom:18px; display:grid; place-items:center; }
.score svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.score__bg{ fill:none; stroke:var(--line); stroke-width:8; }
.score__bar{ fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.4s var(--ease-out); }
.score b{ font-size:var(--t-lg); font-variant-numeric:tabular-nums; }
.score span{ position:absolute; bottom:-18px; font-size:var(--t-2xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- compare ---------- */
.table-wrap{ overflow-x:auto; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
.compare{ min-width:620px; font-size:var(--t-ui); }
.compare th,.compare td{ padding:var(--sp-4) var(--sp-5); text-align:left; border:0; vertical-align:top; }
.compare thead th{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; border-bottom:1px solid var(--line); }
/* the row label stays put while the two value columns scroll sideways */
.compare thead th:first-child,
.compare tbody th{
  position:sticky; left:0; z-index:2;
  background:var(--bg); box-shadow:1px 0 0 var(--line);
}
.compare thead th:first-child{ background:var(--bg-soft); z-index:3; }
.compare tbody th{ font-weight:400; color:var(--ink-2); }
.compare tbody tr:nth-child(even) th,.compare tbody tr:nth-child(even) td{ background:var(--bg-soft); }
.compare tbody .compare__hl{ background:var(--accent-soft); }
.compare tbody tr:nth-child(even) .compare__hl{ background:#eee0cc; }
.compare td b{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- sizing ---------- */
.sizing{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,64px); align-items:start; }
.sizing h2{ margin-bottom:var(--sp-4); }
.steps{ display:grid; gap:var(--sp-4); margin:var(--sp-5) 0; }
.steps li{ display:flex; gap:var(--sp-4); }
.steps__num{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:var(--t-xs); }
.steps b{ display:block; margin-bottom:var(--sp-1); font-size:var(--t-md); }
.steps p{ color:var(--ink-2); font-size:var(--t-ui); }
.sizing__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.tip-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-5); position:sticky; top:calc(var(--header-h) + var(--sp-5)); }
.tip-card h3{ margin-bottom:var(--sp-4); }
.mini-table{ font-size:var(--t-ui); }
.mini-table th,.mini-table td{ text-align:left; padding:var(--sp-2); border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.mini-table th{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; }
.mini-table tr:last-child td{ border-bottom:0; }
.ticks{ display:grid; gap:var(--sp-3); margin-top:var(--sp-4); }
.ticks li{ position:relative; padding-left:var(--sp-5); color:var(--ink-2); font-size:var(--t-ui); }
.ticks li::before{ content:""; position:absolute; left:2px; top:.5em; width:12px; height:7px; border-left:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent); transform:rotate(-45deg); }
.ticks--lg li{ font-size:var(--t-md); }

/* ---------- membership (the one dark block) ---------- */
.membership{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.membership__text h2{ margin-bottom:var(--sp-4); }
.membership__text p{ color:var(--inv-2); font-size:var(--t-lg); }
.membership__text .bullets{ margin:var(--sp-5) 0; }
.membership__text .bullets li{ color:var(--inv-2); }
.membership__cta{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; }
.membership__price{ font-size:var(--t-2xl); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.membership__price small{ font-size:var(--t-ui); font-weight:400; color:var(--inv-3); }
.membership__note{ font-size:var(--t-sm); color:var(--inv-3); }
.membership__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); }
.membership__media img{ width:100%; aspect-ratio:1/1; object-fit:contain; }

/* ---------- reviews ---------- */
.marquee{ overflow:hidden; }
.marquee--reviews .marquee__track{ display:flex; gap:var(--sp-4); width:max-content; padding:var(--sp-4) 0; animation:marquee 60s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.quote{
  margin:0; width:380px; flex:0 0 auto; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
  transition:border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
.quote:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--line-strong); }
.quote blockquote{ margin:0; color:var(--ink-2); font-size:var(--t-ui); }
.quote figcaption{ font-size:var(--t-sm); color:var(--ink-3); }
.stars{ color:var(--accent); letter-spacing:2px; font-size:var(--t-ui); }

.press{ margin-top:var(--sp-7); text-align:center; }
.press__label{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.18em; color:var(--ink-3); margin-bottom:var(--sp-4); }
.press__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3) var(--sp-6); font-size:var(--t-md); font-weight:600; letter-spacing:-.02em; color:var(--ink-3); }
.press__list li{ transition:color var(--dur-2); }
.press__list li:hover{ color:var(--ink); }

/* ---------- faq ---------- */
.faq{ display:grid; gap:var(--sp-2); }
.faq details{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 var(--sp-5); transition:border-color var(--dur-2), box-shadow var(--dur-2); }
.faq details[open]{ border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.faq summary{ list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-6) var(--sp-4) 0; position:relative; font-weight:550; font-size:var(--t-ui); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:var(--sp-2); top:50%; width:10px; height:10px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3); transform:translateY(-70%) rotate(45deg); transition:transform var(--dur-2) var(--ease); }
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq details p{ padding:0 0 var(--sp-5); color:var(--ink-2); font-size:var(--t-ui); }

/* ---------- order ---------- */
.order{ background:var(--bg-soft); border-top:1px solid var(--line); }
.order__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,64px); align-items:start; }
.order__intro h2{ margin-bottom:var(--sp-4); }
.order__intro .ticks{ margin:var(--sp-5) 0; }
.order__contacts{ display:flex; flex-direction:column; gap:var(--sp-2); font-weight:550; }
.order__contacts a:hover{ color:var(--accent-ink); }

/* ---------- Блок заказа на лендинге ----------
   Сама форма живёт на отдельной странице /order/checkout: кнопка ведёт туда. */
.order-cta{ background:var(--bg-soft); border-top:1px solid var(--line); }
.order-cta__inner{ max-width:52rem; margin:0 auto; text-align:center; display:grid; justify-items:center; gap:var(--sp-4); }
.order-cta__inner h2{ font-size:clamp(26px,3.6vw,38px); letter-spacing:-.02em; margin:0; }
.order-cta__inner .lead{ color:var(--ink-2); margin:0; max-width:44rem; }
.order-cta__summary{
  font-size:var(--t-ui); color:var(--ink-2);
  background:var(--bg); border:1px dashed var(--line-strong);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
}
.order-cta__summary b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.order-cta__inner .btn{ margin-top:var(--sp-2); }
.order-cta__ticks{ text-align:left; max-width:34rem; margin:var(--sp-4) 0 0; }

.form{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-6); display:grid; gap:var(--sp-4); box-shadow:var(--shadow-soft); }
.form__row{ display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.form__field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.form__field > span{ font-size:var(--t-sm); font-weight:550; color:var(--ink-2); }
.form__field > span i{ color:var(--danger); font-style:normal; }
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{
  width:100%; font:inherit; font-size:var(--t-ui); color:var(--ink); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  transition:border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
  appearance:none; -webkit-appearance:none;
}
/* Нативные списки на странице оформления: своя стрелка, чтобы вид совпадал
   с полями ввода и не зависел от оформления системы. */
.form select{
  padding-right:calc(var(--sp-8) - var(--sp-2));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%236e7079' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp-3) center;
  background-size:16px 16px;
  cursor:pointer;
}
.form textarea{ resize:vertical; min-height:92px; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(23,24,28,.08); }
.form__field.is-invalid input,.form__field.is-invalid select,.form__field.is-invalid textarea{ border-color:var(--danger); background:#fdf7f6; }
.form__error{ font-size:var(--t-xs); color:var(--danger); }
.checkbox{ display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--t-sm); color:var(--ink-2); cursor:pointer; }
.checkbox input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink); flex:0 0 auto; }
.checkbox.is-invalid{ color:var(--danger); }
.form__summary{ font-size:var(--t-ui); color:var(--ink-2); background:var(--bg-soft); border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); }
.form__summary b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.form__legal{ font-size:var(--t-xs); color:var(--ink-3); text-align:center; }

.select{ position:relative; }
.select__trigger{ display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp-3); width:100%; min-height:46px; padding:var(--sp-3) var(--sp-4);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--t-ui); color:var(--ink); white-space:nowrap;
  transition:border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1); }
.select__trigger:hover{ border-color:var(--line-strong); }
.select.is-open .select__trigger,.select__trigger:focus-visible{ border-color:var(--ink); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(23,24,28,.08); }
.select.is-invalid .select__trigger{ border-color:var(--danger); background:#fdf7f6; }
.select__chevron{ flex:0 0 auto; color:var(--ink-3); transition:transform var(--dur-2) var(--ease); }
.select.is-open .select__chevron{ transform:rotate(180deg); }
.select__menu{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + var(--sp-1)); max-height:280px; overflow-y:auto; margin:0; padding:var(--sp-1);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-float); display:grid; gap:2px; }
.select__option{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:44px; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); font-size:var(--t-ui); cursor:pointer; }
.select__option span{ color:var(--ink-3); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
.select__option[aria-selected="true"]{ background:var(--bg-soft); font-weight:600; }
.select__option:hover,.select__option.is-active{ background:var(--bg-stage); }

.form-success{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-8) var(--sp-6); text-align:center; display:grid; gap:var(--sp-4); justify-items:center; }
.form-success__icon{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:rgba(47,125,99,.12); color:var(--ok); }
.form-success p{ color:var(--ink-2); }
.form-success__list{ text-align:left; display:grid; gap:var(--sp-2); font-size:var(--t-ui); color:var(--ink-2); width:100%; max-width:360px; }
.form-success__list li{ display:flex; justify-content:space-between; gap:var(--sp-4); border-bottom:1px solid var(--line); padding-bottom:var(--sp-2); }
.form-success__list b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- footer ---------- */
.footer{ background:var(--dark); color:var(--inv-2); padding:clamp(56px,7vw,88px) 0 var(--sp-5); }
.footer__top{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(24px,4vw,48px); }
.logo--inv{ color:#fff; }
.footer__about{ margin:var(--sp-4) 0 var(--sp-5); font-size:var(--t-ui); max-width:330px; color:var(--inv-2); }
.footer__col h3{ font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.14em; color:var(--inv-3); margin-bottom:var(--sp-4); font-weight:700; }
.footer__col ul{ display:grid; gap:var(--sp-3); font-size:var(--t-ui); }
.footer__col a:hover{ color:#fff; }
.footer .link{ color:var(--inv-2); text-align:left; }
.footer .link:hover{ color:#fff; }
.subscribe{ display:flex; gap:var(--sp-2); max-width:340px; }
.subscribe input{ flex:1; min-width:0; font:inherit; font-size:var(--t-ui); color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill); padding:var(--sp-3) var(--sp-4); }
.subscribe input::placeholder{ color:var(--inv-3); }
.subscribe input:focus{ outline:none; border-color:rgba(255,255,255,.6); }
.subscribe__note{ margin-top:var(--sp-3); font-size:var(--t-xs); color:var(--inv-3); }
.footer__bottom{ margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line-d); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.footer__pay{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.footer__pay span{ font-size:var(--t-2xs); border:1px solid rgba(255,255,255,.24); border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-3); color:var(--inv-3); }
.socials{ display:flex; gap:var(--sp-2); }
.socials a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); color:var(--inv-2); transition:background var(--dur-1), color var(--dur-1); }
.socials a:hover{ background:#fff; color:var(--dark); border-color:#fff; }
.footer__legal{ margin-top:var(--sp-5); display:grid; gap:var(--sp-2); font-size:var(--t-xs); color:var(--inv-3); }

/* ---------- sticky buy bar ---------- */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-3) max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-5))) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
  padding-left:max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-5)), env(safe-area-inset-left,0px));
  padding-right:max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-5)), env(safe-area-inset-right,0px));
  background:#fff; border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform var(--dur-3) var(--ease);
}
.buybar.is-visible{ transform:none; }
.buybar__product{ display:flex; align-items:center; gap:var(--sp-3); margin-right:auto; }
.buybar__product img{ width:48px; height:48px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); object-fit:contain; }
.buybar__product b{ display:block; font-size:var(--t-ui); }
.buybar__product small{ font-size:var(--t-xs); color:var(--ink-3); }
.buybar__price{ display:flex; align-items:baseline; gap:var(--sp-2); }
.buybar__price b{ font-size:var(--t-xl); font-weight:600; font-variant-numeric:tabular-nums; }
.buybar__price s{ color:var(--ink-3); font-size:var(--t-ui); font-variant-numeric:tabular-nums; }

/* ---------- modal / toast / fly ---------- */
.modal{ border:0; border-radius:var(--r-lg); padding:0; max-width:680px; width:calc(100% - 32px); box-shadow:var(--shadow-float); color:var(--ink); }
.modal::backdrop{ background:rgba(20,21,26,.5); }
.modal form{ padding:var(--sp-6); display:grid; gap:var(--sp-4); }
.modal h3{ font-size:var(--t-xl); }
.modal__body{ font-size:var(--t-ui); color:var(--ink-2); display:grid; gap:var(--sp-3); max-height:min(58vh, 58dvh); overflow-y:auto; }
.modal .btn{ justify-self:start; }

.toast{
  position:fixed; left:50%; bottom:var(--sp-6); transform:translate(-50%,16px); z-index:400;
  background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:var(--sp-3) var(--sp-5);
  font-size:var(--t-ui); box-shadow:var(--shadow-float); opacity:0; pointer-events:none;
  transition:opacity var(--dur-2), transform var(--dur-2) var(--ease);
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* Появление блоков при прокрутке. Это улучшение, а не обязательное условие:
   если скрипт не загрузился или упал, содержимое всё равно показывается —
   через анимацию-страховку ниже либо через .is-in из app.js. */
.reveal-up{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay:var(--d,0ms); }
.reveal-up.is-in{ opacity:1; transform:none; }

/* Страховка на уровне CSS: срабатывает через 4 секунды, если JavaScript так
   и не добавил .is-in. Без неё сбой скрипта оставлял страницу полностью
   белой — именно это и произошло у части посетителей со старым кэшем. */
@keyframes reveal-fallback{ to{ opacity:1; transform:none; } }
.reveal-up{ animation:reveal-fallback 0s linear 4s forwards; }

/* Совсем без JavaScript показываем всё сразу. */
@media (scripting: none){
  .reveal-up{ opacity:1; transform:none; animation:none; }
  .bars{ --fill:1; }
}

/* ---------- responsive ----------
   Scale order:
     ≥1920 large desktop · 1440–1919 desktop · 1081–1439 small laptop
     901–1080 tablet landscape · 769–900 tablet portrait ·
     641–768 large phone · 481–640 phone · ≤480 small phone · ≤360 compact
   Plus height, pointer and orientation queries at the end. */

/* large desktop: let the layout breathe instead of hugging 1280px */
@media (min-width:1600px){ :root{ --container:1400px; } }
@media (min-width:2000px){ :root{ --container:1560px; --t-md:17px; } }

/* small laptop / big tablet */
@media (max-width:1180px){
  .pdp{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--sp-6); }
}

/* tablet landscape: the reading column stays wide, story blocks stack */
@media (max-width:1080px){
  .showcase{ grid-template-columns:minmax(0,1fr); padding-inline:max(var(--sp-5), env(safe-area-inset-left)); }
  .showcase__sticky{ position:relative; top:0; }
  .showcase__sticky img{ width:min(100%,340px); margin-inline:auto; }
  .panel{ opacity:1; padding-block:var(--sp-5); max-width:60ch; }
  .trust__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) var(--sp-5); }
  .stats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento__card--app{ grid-column:span 2; }
  .sizing,.order__inner,.membership{ grid-template-columns:minmax(0,1fr); }
  .membership__media{ max-width:520px; margin-inline:auto; }
  .tip-card{ position:static; }
  .footer__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .section__head{ margin-bottom:var(--sp-6); }
}

/* tablet portrait and below: one column, hamburger navigation */
@media (max-width:900px){
  .hero{ padding-block:var(--sp-6) var(--sp-7); }
  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6); }
  .hero__visual{ order:-1; }
  .hero__stage{ max-width:520px; margin-inline:auto; }
  .hero__badges{ max-width:520px; margin-inline:auto; }
  .float-card--1{ left:var(--sp-3); }
  .float-card--2{ right:var(--sp-3); }
  .hero__cta{ margin-block:var(--sp-5); }
  .pdp{ grid-template-columns:minmax(0,1fr); }
  .gallery{ position:static; grid-template-columns:minmax(0,1fr); }
  .gallery__thumbs{
    order:2; flex-direction:row; overflow-x:auto; padding-bottom:var(--sp-2);
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .thumb{ flex:0 0 72px; width:72px; height:72px; scroll-snap-align:start; }
  .header__burger{ display:grid; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; gap:0; margin:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:var(--sp-1) max(var(--sp-5), env(safe-area-inset-left)) var(--sp-5);
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform var(--dur-2) var(--ease), opacity var(--dur-2), visibility var(--dur-2);
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:var(--sp-4) 0; border-bottom:1px solid var(--line); font-size:var(--t-md); }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .header__price{ display:none; }
  .swatches{ gap:var(--sp-2); }
  .buybar{ padding-inline:max(var(--sp-4), env(safe-area-inset-left)); gap:var(--sp-3); }
  .buybar__product img{ width:40px; height:40px; }
  .buybar__price s{ display:none; }
  .quote{ width:min(320px, 82vw); }
}

/* large phone / small tablet: two-column forms and card grids collapse */
@media (max-width:768px){
  .section{ padding:clamp(48px,11vw,80px) 0; }
  .showcase{ padding-block:clamp(40px,10vw,72px); }
  .form__row{ grid-template-columns:minmax(0,1fr); }
  .footer__top{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .reviews,.story{ grid-template-columns:minmax(0,1fr); }
  .scroll-hint{ display:block; }
  .table-wrap{ margin-inline:calc(var(--sp-4) * -1); border-radius:0; border-inline:0; }
  .compare{ min-width:560px; font-size:var(--t-sm); }
  .compare th,.compare td{ padding:var(--sp-3) var(--sp-4); }
  .compare thead th:first-child,.compare tbody th{ min-width:112px; }
}

/* phones */
@media (max-width:640px){
  .container{ padding-inline:max(var(--sp-4), env(safe-area-inset-left)); }
  .announce__msg{ display:none; }
  .announce__inner{ justify-content:center; }
  .hero__badges{ position:static; display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
  .float-card{ position:static; flex:1 1 auto; min-width:0; }
  .float-card--3{ display:none; }
  .form{ padding:var(--sp-5); }
  .form-success{ padding:var(--sp-6) var(--sp-4); }
  .bento{ grid-template-columns:minmax(0,1fr); }
  .bento__card{ padding:var(--sp-5); }
  .bento__card--wide,.bento__card--app{ grid-column:span 1; }
  .bento__card--app{ flex-direction:column; align-items:flex-start; }
  .score{ width:76px; height:76px; margin-bottom:var(--sp-4); }
  .score b{ font-size:var(--t-md); }
  .score-rings{ gap:var(--sp-3) var(--sp-4); }
  .bars{ height:72px; }
  .membership__cta{ gap:var(--sp-2); }
  .order__inner{ gap:var(--sp-5); }
  .modal{ width:100%; max-width:none; margin:0; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal form{ padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom,0px)); }
  .modal__body{ max-height:min(64vh, 64dvh); }
  .toast{ left:var(--sp-4); right:var(--sp-4); transform:translateY(16px); text-align:center; }
  .toast.is-visible{ transform:none; }
}

/* small phones: tighter chrome, no letterboxing */
@media (max-width:480px){
  :root{ --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; }
  .header__inner{ height:60px; gap:var(--sp-3); }
  .header.is-scrolled .header__inner{ height:56px; }
  .announce__inner{ min-height:34px; }
  .logo__text{ font-size:var(--t-ui); }
  .swatch__name{ font-size:10px; }
  .swatches{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-2); max-width:none; }
  .sizes{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
  .size{ min-height:46px; font-size:var(--t-sm); }
  .size small{ font-size:10px; }
  .btn--lg{ min-height:50px; padding:var(--sp-3) var(--sp-5); }
  .buybar{ gap:var(--sp-2); }
  .buybar__product small{ font-size:11px; }
  .buybar .btn{ padding:var(--sp-2) var(--sp-4); font-size:var(--t-sm); }
  .footer{ padding-top:var(--sp-7); }
}

/* very compact: 320px-class devices */
@media (max-width:360px){
  :root{ --sp-4:14px; --sp-5:18px; }
  .header__inner{ gap:var(--sp-2); }
  .trust__grid,.stats__grid{ grid-template-columns:minmax(0,1fr); }
  .buybar__product img{ display:none; }
  .gallery__counter{ display:none; }
  .swatch__name{ font-size:9px; }
  .quote{ width:min(280px, 84vw); }
}

/* landscape phones: the header and sticky bar must not eat the viewport */
@media (max-height:560px) and (orientation:landscape){
  .hero{ padding-block:var(--sp-5); }
  .hero__stage{ max-width:340px; }
  .showcase__sticky img{ width:min(100%,260px); }
  .modal__body{ max-height:min(50vh, 50dvh); }
}

/* touch devices: no sticky hover states, bigger gaps for fat fingers */
@media (hover:none){
  .btn:hover,.bento__card:hover,.quote:hover,.thumb:hover,.size:hover,.swatch:hover{ transform:none; }
  .bento__card:hover,.quote:hover{ box-shadow:none; border-color:var(--line); }
  .gallery__nav{ width:48px; height:48px; }
  .marquee--reviews .marquee__track{ animation-duration:80s; }
}

/* keyboard and pointer users keep the polish */
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-1px); }
  .bento__card:hover{ transform:translateY(-3px); }
  .quote:hover{ transform:translateY(-3px); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  html{ scroll-behavior:auto; }
  .reveal-up{ opacity:1; transform:none; animation:none; }
}
/* ============================================================
   CHECKOUT PAGE — /order/checkout
   Отдельная полноценная страница оформления заказа.
   ============================================================ */
.checkout{ padding:var(--sp-6) 0 var(--sp-9); }
.checkout__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.checkout__title{ font-size:clamp(26px,3.4vw,36px); line-height:1.15; letter-spacing:-.02em; margin:0 0 var(--sp-3); }
.checkout__lead{ color:var(--ink-2); font-size:var(--t-md); max-width:46rem; margin:0 0 var(--sp-6); }
.checkout-nav{ margin-left:auto; }
.checkout-nav a{ font-size:var(--t-ui); color:var(--ink-2); text-decoration:none; }
.checkout-nav a:hover{ color:var(--ink); }

/* ---- шаги ---- */
.steps{ list-style:none; display:flex; gap:var(--sp-2); margin:0 0 var(--sp-7); padding:0; flex-wrap:wrap; }
.steps__item{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t-sm); color:var(--ink-3); }
.steps__item span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); font-size:var(--t-xs); font-weight:600; font-variant-numeric:tabular-nums;
}
.steps__item.is-current{ color:var(--ink); font-weight:600; }
.steps__item.is-current span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.steps__item.is-done{ color:var(--ink-2); }
.steps__item.is-done span{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent-ink); }
.steps__item + .steps__item::before{ content:''; width:clamp(12px,3vw,32px); height:1px; background:var(--line-strong); margin-right:var(--sp-2); }

/* ---- форма на отдельной странице ---- */
.form--checkout{ padding:clamp(20px,3vw,36px); }
.checkout__divider{ display:flex; align-items:center; gap:var(--sp-4); margin:var(--sp-2) 0 0; }
.checkout__divider::before,
.checkout__divider::after{ content:''; height:1px; background:var(--line); flex:1; }
.checkout__divider span{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; }
.checkout__hint{ font-size:var(--t-sm); color:var(--ink-3); margin:calc(var(--sp-2) * -1) 0 0; }

/* ---- сводка заказа ---- */
.checkout__aside{ position:sticky; top:calc(var(--header-h) + var(--sp-4)); }
.summary{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
}
.summary__product{ display:flex; align-items:center; gap:var(--sp-4); padding-bottom:var(--sp-5); border-bottom:1px solid var(--line); }
.summary__product img{ width:56px; height:56px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); object-fit:contain; flex:none; }
.summary__product b{ display:block; font-size:var(--t-md); }
.summary__product small{ display:block; font-size:var(--t-sm); color:var(--ink-3); margin-top:2px; }
.summary__rows{ margin:var(--sp-5) 0; display:grid; gap:var(--sp-3); }
.summary__rows > div{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); }
.summary__rows dt{ font-size:var(--t-ui); color:var(--ink-2); }
.summary__rows dd{ margin:0; font-size:var(--t-ui); color:var(--ink); font-variant-numeric:tabular-nums; }
.summary__rows s{ color:var(--ink-4); margin-right:var(--sp-2); }
.summary__rows b{ font-size:var(--t-lg); }
.summary__save{ color:var(--ok); font-weight:600; }
.summary__ticks{ list-style:none; margin:0; padding:var(--sp-5) 0 0; border-top:1px solid var(--line); display:grid; gap:var(--sp-3); }
.summary__ticks li{ font-size:var(--t-ui); color:var(--ink-2); padding-left:26px; position:relative; }
.summary__ticks li::before{
  content:''; position:absolute; left:0; top:.42em; width:15px; height:9px;
  border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg); border-radius:1px;
}
.summary__note{ font-size:var(--t-sm); color:var(--ink-3); margin:var(--sp-5) 0 0; }

/* ---- подвал страницы оформления ---- */
.checkout-footer{ border-top:1px solid var(--line); padding:var(--sp-6) 0; background:var(--bg-soft); }
.checkout-footer__inner{ display:flex; gap:var(--sp-5); justify-content:space-between; align-items:center; flex-wrap:wrap; }
.checkout-footer p{ font-size:var(--t-xs); color:var(--ink-3); margin:0; max-width:52rem; }
.checkout-footer nav{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.checkout-footer nav a{ font-size:var(--t-sm); color:var(--ink-2); text-decoration:none; }
.checkout-footer nav a:hover{ color:var(--ink); }

@media (max-width:901px){
  .checkout__grid{ grid-template-columns:minmax(0,1fr); }
  .checkout__aside{ position:static; order:-1; }
  .summary{ padding:var(--sp-5); }
  .summary__ticks{ display:none; }
}
@media (max-width:640px){
  .checkout{ padding:var(--sp-5) 0 var(--sp-8); }
  .steps{ margin-bottom:var(--sp-6); flex-wrap:nowrap; gap:0; }
  /* На узком экране подписи у неактивных шагов не помещаются и ломают
     строку — оставляем только номера, текущий шаг подписан. */
  .steps__item:not(.is-current){ font-size:0; gap:0; }
  .steps__item + .steps__item::before{ width:14px; margin-right:var(--sp-2); }
  .checkout__lead{ font-size:var(--t-ui); }
  .form--checkout{ padding:var(--sp-5); }
  .checkout-footer__inner{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
}

/* ============================================================
   LEGAL / CONTENT PAGES
   Реальные URL с политикой и условиями: нужны для проверки
   Google Ads и для доверия пользователя.
   ============================================================ */
.legal{ padding:var(--sp-8) 0 var(--sp-9); }.legal__wrap{ max-width:76rem; margin:0 auto; padding:0 var(--sp-5); }
.legal__head{ border-bottom:1px solid var(--line); padding-bottom:var(--sp-5); margin-bottom:var(--sp-6); }
.legal__back{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:14px; color:var(--ink-2); text-decoration:none; margin-bottom:var(--sp-5); }
.legal__back:hover{ color:var(--ink); }
.legal h1{ font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 var(--sp-3); letter-spacing:-.02em; }
.legal__meta{ font-size:13px; color:var(--ink-3); margin:0; }
.legal h2{ font-size:clamp(18px,2vw,22px); margin:var(--sp-7) 0 var(--sp-3); letter-spacing:-.01em; }
.legal h3{ font-size:16px; margin:var(--sp-5) 0 var(--sp-2); }
.legal p,.legal li{ font-size:15px; line-height:1.7; color:var(--ink-2); }
.legal p{ margin:0 0 var(--sp-4); }
.legal ul,.legal ol{ margin:0 0 var(--sp-4); padding-left:1.3em; }
.legal li{ margin-bottom:var(--sp-2); }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--accent-ink); }
.legal__toc{ background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:var(--sp-5); margin-bottom:var(--sp-7); }
.legal__toc p{ margin:0 0 var(--sp-3); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.legal__toc ol{ margin:0; padding-left:1.2em; }
.legal__toc li{ margin-bottom:var(--sp-1); }
.legal__note{ background:var(--accent-soft); border-radius:12px; padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0; }
.legal__note p{ margin:0; color:var(--accent-ink); font-size:14px; }
.legal table{ width:100%; border-collapse:collapse; margin:0 0 var(--sp-5); font-size:14px; }
.legal th,.legal td{ text-align:left; padding:var(--sp-3); border-bottom:1px solid var(--line); color:var(--ink-2); }
.legal th{ color:var(--ink); font-weight:600; }
.legal__footer{ margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--line); display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:14px; }
.legal-nav{ margin-left:auto; display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.legal-nav a{ font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.legal-nav a:hover{ color:var(--ink); }
.legal-nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }
@media (max-width:768px){
  .legal-nav{ margin-left:0; width:100%; gap:var(--sp-4); padding-bottom:var(--sp-2); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .legal-nav a{ font-size:13px; }
}

/* Cookie / consent bar */
.consent{ position:fixed; left:0; right:0; bottom:0; z-index:120; background:#14151a; color:#fff; padding:var(--sp-4) var(--sp-5); transform:translateY(110%); transition:transform .35s ease; box-shadow:0 -8px 32px rgba(0,0,0,.22); }
.consent[data-open="1"]{ transform:translateY(0); }
.consent__inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.consent__text{ flex:1 1 22rem; font-size:14px; line-height:1.55; color:#c9cbd3; margin:0; }
.consent__text a{ color:#fff; }
.consent__actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.consent__btn{ font:inherit; font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; transition:background .2s ease,border-color .2s ease; }
.consent__btn:hover{ border-color:#fff; }
.consent__btn--primary{ background:#fff; color:#14151a; border-color:#fff; }
.consent__btn--primary:hover{ background:#e9e6df; border-color:#e9e6df; }
@media (max-width:640px){
  .consent{ padding:var(--sp-4); }
  .consent__inner{ gap:var(--sp-3); }
  .consent__actions{ width:100%; }
  .consent__btn{ flex:1 1 auto; text-align:center; }
}
@media print{
  .header,.announce,.buybar,.socials,.subscribe,.progress{ display:none; }
}