/* ============================================================
   Bereformer Studio — sage warm-zen design system
   Spectral (display) + Plus Jakarta Sans (UI) · OKLch palette
   Shared by every iOS + Android screen.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
ul{ list-style:none; }

/* ---------- Tokens ---------- */
:root{
  /* warm canvas */
  --bg:        oklch(98.4% 0.009 105);
  --surface:   oklch(100% 0.003 105);
  --surface-2: oklch(96.2% 0.013 115);
  --sage-tint: oklch(94.5% 0.03 150);

  /* ink */
  --fg:        oklch(27% 0.02 150);
  --fg-2:      oklch(40% 0.022 150);
  --muted:     oklch(54% 0.02 150);
  --border:    oklch(90% 0.012 135);
  --border-2:  oklch(83% 0.018 140);

  /* sage brand */
  --sage:       oklch(61% 0.058 152);
  --sage-deep:  oklch(43% 0.062 152);
  --sage-ink:   oklch(33% 0.05 152);
  --sage-tint2: oklch(90% 0.042 150);

  /* clay — reserved for primary CTAs only (book / subscribe / buy) */
  --clay:      oklch(67% 0.135 44);
  --clay-deep: oklch(57% 0.145 42);
  --clay-tint: oklch(94.5% 0.04 45);

  /* status */
  --success: oklch(58% 0.11 150);
  --warn:    oklch(70% 0.135 68);
  --danger:  oklch(58% 0.17 25);
  --info:    oklch(60% 0.07 235);

  /* type */
  --font-display:'Spectral', Georgia, 'Iowan Old Style', serif;
  --font-ui:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* radii */
  --r-card:22px; --r-lg:18px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --r-sheet:30px;

  /* shadow — soft, airy */
  --shadow-sm:0 2px 10px -4px oklch(40% 0.05 150 / .12);
  --shadow:   0 10px 30px -12px oklch(40% 0.05 150 / .18);
  --shadow-lg:0 22px 50px -18px oklch(38% 0.06 150 / .26);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Body / stage ---------- */
body{
  font-family:var(--font-ui);
  color:var(--fg);
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(95% 0.02 150) 0%, oklch(0% 0 0 /0) 55%),
    oklch(91% 0.009 120);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.stage{
  display:flex; flex-wrap:wrap; gap:44px;
  justify-content:center; align-items:flex-start;
  padding:52px 32px 72px;
}

/* ============================================================
   Device frames
   ============================================================ */
.device{ position:relative; flex:0 0 auto; }
.bezel{
  position:relative;
  background:oklch(20% 0.01 150);
  box-shadow:var(--shadow-lg), inset 0 0 0 2px oklch(10% 0.01 150);
}
.screen{
  position:relative; overflow:hidden;
  background:var(--bg);
  display:flex; flex-direction:column;
}

/* iOS */
.device.ios{ width:390px; }
.device.ios .bezel{ border-radius:56px; padding:13px; }
.device.ios .screen{ height:818px; border-radius:44px; }
.device.ios .island{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:122px; height:34px; border-radius:20px; background:#06070a; z-index:9;
}

/* Android (Pixel) */
.device.android{ width:412px; }
.device.android .bezel{ border-radius:46px; padding:7px; }
.device.android .screen{ height:901px; border-radius:40px; }
.device.android .punch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%; background:#06070a; z-index:9;
}
/* subtle side buttons */
.device.android .bezel::before,
.device.android .bezel::after{
  content:""; position:absolute; left:-3px; width:3px; border-radius:3px;
  background:oklch(30% 0.01 150);
}
.device.android .bezel::before{ top:150px; height:64px; }
.device.android .bezel::after{ top:230px; height:42px; }

/* ---------- Status bar ---------- */
.statusbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; font-weight:700; font-size:15px; letter-spacing:.2px;
  position:relative; z-index:6;
}
.device.ios .statusbar{ height:54px; }
.device.android .statusbar{ height:46px; padding-top:6px; }
.sb-right{ display:flex; align-items:center; gap:6px; }
.sb-right svg{ display:block; }

/* ---------- Home indicator / gesture ---------- */
.home-bar{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:134px; height:5px; border-radius:3px; background:oklch(27% 0.02 150 / .85); z-index:8;
}
.gesture{
  position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  width:128px; height:5px; border-radius:3px; background:oklch(27% 0.02 150 / .7); z-index:8;
}

/* ---------- Scroll body ---------- */
.screen-body{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding:6px 20px calc(28px);
  scrollbar-width:none;
}
.screen-body::-webkit-scrollbar{ display:none; }
.screen-body.no-tab{ padding-bottom:40px; }

/* ============================================================
   Typography
   ============================================================ */
.display, h1, h2, h3{ font-family:var(--font-display); font-weight:600; color:var(--sage-ink); letter-spacing:-.01em; }
h1{ font-size:27px; line-height:1.16; }
h2{ font-size:20px; line-height:1.25; }
h3{ font-size:17px; line-height:1.3; }
.serif{ font-family:var(--font-display); }
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep);
}
.muted{ color:var(--muted); }
.fg2{ color:var(--fg-2); }
.tnum{ font-variant-numeric:tabular-nums; }
.t-center{ text-align:center; }

/* ============================================================
   Layout helpers
   ============================================================ */
.row{ display:flex; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.col{ display:flex; flex-direction:column; }
.center{ display:flex; align-items:center; justify-content:center; }
.wrap{ flex-wrap:wrap; }
.gap4{ gap:4px;} .gap6{ gap:6px;} .gap8{ gap:8px;} .gap10{ gap:10px;}
.gap12{ gap:12px;} .gap16{ gap:16px;} .gap20{ gap:20px;}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt10{margin-top:10px}
.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.grow{ flex:1 1 auto; }
.divider{ height:1px; background:var(--border); margin:18px 0; border:0; }

/* ============================================================
   Top app bar
   ============================================================ */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:8px 18px 12px; background:oklch(98.4% 0.009 105 / .86);
  backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px);
  position:relative; z-index:5;
}
.topbar.sticky{ position:sticky; top:0; }
.topbar .title{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--sage-ink); }
.icon-btn{
  width:40px; height:40px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--fg-2);
  background:var(--surface); box-shadow:var(--shadow-sm); flex:0 0 auto;
}
.icon-btn:active{ transform:scale(.94); }

/* language toggle — real product feature (bilingual app) */
.lang-toggle{
  display:flex; align-items:center; background:var(--surface-2);
  border-radius:var(--r-pill); padding:3px; gap:2px; flex:0 0 auto;
  box-shadow:var(--shadow-sm);
}
.lang-toggle button{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:6px 11px; border-radius:var(--r-pill); color:var(--muted);
}
.lang-toggle button[aria-pressed="true"]{
  background:var(--sage-deep); color:#fff; box-shadow:var(--shadow-sm);
}

/* ============================================================
   Bottom tab bar
   ============================================================ */
.tabbar{
  flex:0 0 auto; display:flex; justify-content:space-around; align-items:center;
  padding:10px 12px 26px; background:oklch(100% 0.003 105 / .92);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--border); position:relative; z-index:5;
}
.device.android .tabbar{ padding-bottom:22px; }
.tab{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); font-size:10.5px; font-weight:600; padding:4px 0;
}
.tab .ic{ width:23px; height:23px; }
.tab.active{ color:var(--sage-deep); }
.tab.active .ic{ color:var(--sage-deep); }
.tab:active{ transform:scale(.92); }
/* Material (Android) nav — pill indicator behind active icon */
.device.android .tab{ position:relative; }
.device.android .tab .mnav{
  display:grid; place-items:center; min-width:58px; height:32px; border-radius:16px;
  transition:background .2s var(--ease);
}
.device.android .tab.active .mnav{ background:var(--sage-tint); }
.device.android .tab .mnav .ic{ width:22px; height:22px; }

/* liked state */
.like-btn.liked{ color:var(--clay); }
.like-btn.liked .ic-heart{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.5s-7.5-4.7-7.5-10.2A4 4 0 0 1 12 7a4 4 0 0 1 7.5 3.3c0 5.5-7.5 10.2-7.5 10.2z' fill='black'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.5s-7.5-4.7-7.5-10.2A4 4 0 0 1 12 7a4 4 0 0 1 7.5 3.3c0 5.5-7.5 10.2-7.5 10.2z' fill='black'/></svg>"); }

/* success check ring */
.check-ring{ width:64px; height:64px; border-radius:50%; background:var(--sage); display:grid; place-items:center; margin:0 auto; box-shadow:var(--shadow); }
.check-ring .ic{ width:32px; height:32px; color:#fff; }

/* streak / mini stat */
.stat{ text-align:center; }
.stat .n{ font-size:24px; font-weight:800; color:var(--sage-ink); font-variant-numeric:tabular-nums; line-height:1; }
.stat .l{ font-size:11.5px; color:var(--muted); font-weight:600; margin-top:5px; }

/* Segmented control — Treninzi · Sauna · Red room */
.seg{ display:flex; background:var(--surface-2); border-radius:var(--r-pill); padding:4px; gap:2px; box-shadow:inset 0 0 0 1px var(--border); }
.seg-btn{ flex:1 1 0; padding:11px 6px; border-radius:var(--r-pill); font-weight:700; font-size:12.5px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.seg-btn .ic{ width:16px; height:16px; }
.seg-btn.active{ color:#fff; background:var(--sage-deep); box-shadow:var(--shadow-sm); }

/* Recovery room hero — room identity only; clay stays reserved for the CTA */
.room-hero{ border-radius:var(--r-card); padding:20px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm); }
.room-hero .room-ic{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; }
.room-hero .room-ic .ic{ width:23px; height:23px; }
.room-hero .rh-title{ font-family:var(--font-display); font-size:23px; font-weight:600; line-height:1.15; }
.room-hero.sauna{ background:linear-gradient(150deg, oklch(91% 0.045 55), oklch(83% 0.055 70)); }
.room-hero.sauna .room-ic{ background:oklch(100% 0 0 / .55); }
.room-hero.sauna .room-ic .ic{ color:oklch(42% 0.07 45); }
.room-hero.sauna .rh-title{ color:oklch(30% 0.05 45); }
.room-hero.redroom{ background:linear-gradient(150deg, oklch(58% 0.14 25), oklch(46% 0.15 18)); color:#fff; }
.room-hero.redroom .room-ic{ background:oklch(100% 0 0 / .2); }
.room-hero.redroom .room-ic .ic{ color:#fff; }
.room-hero.redroom .rh-title{ color:#fff; }
.cap{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); background:oklch(100% 0 0 / .22); }
.cap .ic{ width:14px; height:14px; }
.room-hero.sauna .cap{ background:oklch(100% 0 0 / .5); color:oklch(34% 0.05 45); }

/* Recovery quick tiles (Home) — one tidy card, two halves */
.rec-tile{ flex:1 1 0; border-radius:var(--r-lg); padding:15px; display:flex; flex-direction:column; gap:10px; min-height:92px; justify-content:space-between; box-shadow:var(--shadow-sm); transition:transform .12s var(--ease); }
.rec-tile .rt-ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; }
.rec-tile .rt-ic .ic{ width:18px; height:18px; }
.rec-tile .rt-name{ font-weight:700; font-size:14.5px; }
.rec-tile .rt-sub{ font-size:11.5px; font-weight:600; opacity:.82; margin-top:2px; }
.rec-tile.sauna{ background:linear-gradient(150deg, oklch(91% 0.045 55), oklch(83% 0.055 70)); color:oklch(33% 0.05 45); }
.rec-tile.sauna .rt-ic{ background:oklch(100% 0 0 / .55); }
.rec-tile.sauna .rt-ic .ic{ color:oklch(42% 0.07 45); }
.rec-tile.redroom{ background:linear-gradient(150deg, oklch(58% 0.14 25), oklch(46% 0.15 18)); color:#fff; }
.rec-tile.redroom .rt-ic{ background:oklch(100% 0 0 / .2); }
.rec-tile.redroom .rt-ic .ic{ color:#fff; }
.rec-tile:active{ transform:scale(.98); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-ui); font-weight:700; font-size:15.5px; letter-spacing:.1px;
  padding:15px 22px; border-radius:var(--r-md);
  transition:transform .12s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap; min-height:50px;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-block{ display:flex; width:100%; }
.btn-sm{ font-size:13.5px; padding:10px 15px; min-height:40px; border-radius:12px; }
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 12px 24px -10px oklch(57% 0.145 42 / .7); }
.btn-primary:active{ background:var(--clay-deep); }
.btn-sage{ background:var(--sage-deep); color:#fff; }
.btn-outline{ background:var(--surface); color:var(--sage-ink); box-shadow:inset 0 0 0 1.5px var(--border-2); }
.btn-ghost{ background:var(--sage-tint); color:var(--sage-deep); }
.btn-tint{ background:var(--clay-tint); color:var(--clay-deep); }
.btn .ic{ width:19px; height:19px; }
.btn[disabled]{ opacity:.45; }

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); padding:18px;
  border:1px solid oklch(92% 0.008 130 / .6);
}
.card-tint{ background:var(--sage-tint); border-color:transparent; }
.card-clay{ background:linear-gradient(150deg, var(--clay-tint), oklch(96% 0.02 60)); border-color:transparent; }
.card-pad-sm{ padding:14px; }

/* ============================================================
   Pills / chips / day selector
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--fg-2); box-shadow:inset 0 0 0 1px var(--border);
  white-space:nowrap;
}
.pill.active{ background:var(--sage-deep); color:#fff; box-shadow:none; }
.pill .ic{ width:15px; height:15px; }
.chip-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; }
.chip-row::-webkit-scrollbar{ display:none; }

.day-chip{
  flex:0 0 auto; width:52px; padding:10px 0; border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border);
}
.day-chip .dow{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.day-chip .dom{ font-size:17px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.day-chip.active{ background:var(--sage-deep); box-shadow:var(--shadow-sm); }
.day-chip.active .dow,.day-chip.active .dom{ color:#fff; }

/* ============================================================
   Session rows (schedule)
   ============================================================ */
.session{
  display:flex; gap:14px; align-items:stretch;
  background:var(--surface); border-radius:var(--r-lg); padding:14px;
  box-shadow:var(--shadow-sm); border:1px solid oklch(92% 0.008 130 / .55);
}
.session .time{
  flex:0 0 auto; width:62px; display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--border); padding-right:14px;
}
.session .time .t{ font-size:17px; font-weight:800; color:var(--sage-ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.session .time .dur{ font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }
.session .body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.session .prog{ font-weight:700; font-size:15px; color:var(--fg); }
.session .meta{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.spots{ font-size:11.5px; font-weight:700; }
.spots.lo{ color:var(--warn); }
.spots.ok{ color:var(--success); }
.spots.full{ color:var(--danger); }

/* ============================================================
   Pricing / subscriptions
   ============================================================ */
.toggle{
  display:flex; background:var(--surface-2); border-radius:var(--r-pill);
  padding:4px; position:relative; box-shadow:inset 0 0 0 1px var(--border);
}
.toggle button{
  flex:1 1 0; padding:11px 14px; border-radius:var(--r-pill);
  font-weight:700; font-size:13.5px; color:var(--muted); position:relative;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.toggle button.active{ color:#fff; background:var(--sage-deep); box-shadow:var(--shadow-sm); }
.save-badge{ font-size:10px; font-weight:800; background:var(--clay-tint); color:var(--clay-deep); padding:2px 7px; border-radius:var(--r-pill); }
.toggle button.active .save-badge{ background:rgba(255,255,255,.22); color:#fff; }

.plan{
  border-radius:var(--r-card); padding:20px; background:var(--surface);
  box-shadow:var(--shadow-sm); border:1px solid oklch(92% 0.008 130 / .55);
  position:relative; display:flex; flex-direction:column; gap:14px;
}
.plan.featured{ border:2px solid var(--sage); box-shadow:var(--shadow); }
.plan-tag{
  position:absolute; top:-11px; left:20px; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:var(--r-pill);
  background:var(--sage-deep); color:#fff;
}
.plan .price{ font-size:34px; font-weight:800; color:var(--sage-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan .price .cur{ font-size:17px; font-weight:700; color:var(--muted); vertical-align:top; margin-right:1px; }
.plan .price .per{ font-size:13px; font-weight:600; color:var(--muted); }
.feat{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--fg-2); line-height:1.4; }
.feat .ic{ width:17px; height:17px; color:var(--sage); flex:0 0 auto; margin-top:1px; }

/* ============================================================
   Video cards / thumbnails
   ============================================================ */
.thumb{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg, var(--sage-tint2), var(--sage-tint));
  aspect-ratio:16/10; display:grid; place-items:center;
}
.thumb .play-orb{
  width:46px; height:46px; border-radius:50%; background:oklch(100% 0 0 / .9);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.thumb .play-orb .ic{ width:20px; height:20px; color:var(--sage-deep); margin-left:2px; }
.thumb .dur{
  position:absolute; bottom:8px; right:8px; font-size:11px; font-weight:700;
  background:oklch(20% 0.01 150 / .7); color:#fff; padding:3px 7px; border-radius:6px;
  font-variant-numeric:tabular-nums; backdrop-filter:blur(4px);
}
.thumb .lvl{
  position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700;
  background:oklch(100% 0 0 / .85); color:var(--sage-deep); padding:3px 9px; border-radius:var(--r-pill);
}
.thumb.art-a{ background:linear-gradient(150deg, oklch(78% 0.07 150), oklch(86% 0.05 160)); }
.thumb.art-b{ background:linear-gradient(150deg, oklch(80% 0.06 60), oklch(88% 0.05 95)); }
.thumb.art-c{ background:linear-gradient(150deg, oklch(74% 0.07 175), oklch(86% 0.05 190)); }
.thumb.art-d{ background:linear-gradient(150deg, oklch(72% 0.08 135), oklch(85% 0.06 150)); }
.thumb.art-e{ background:linear-gradient(150deg, oklch(82% 0.05 40), oklch(90% 0.04 70)); }

.video-card{ display:flex; flex-direction:column; gap:9px; }
.video-card .vtitle{ font-weight:700; font-size:14px; color:var(--fg); line-height:1.3; }
.video-card .vmeta{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }

/* ============================================================
   Badges
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:5px 10px; border-radius:var(--r-pill); background:var(--sage-tint); color:var(--sage-deep);
}
.badge .ic{ width:13px; height:13px; }
.badge-clay{ background:var(--clay-tint); color:var(--clay-deep); }
.badge-warn{ background:oklch(92% 0.06 70); color:oklch(48% 0.12 68); }
.badge-success{ background:oklch(93% 0.05 150); color:oklch(42% 0.11 150); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

/* ============================================================
   Inputs / fields
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; font-weight:700; color:var(--fg-2); padding-left:4px; }
.input{
  width:100%; background:var(--surface-2); border:1.5px solid transparent; border-radius:var(--r-md);
  padding:15px 16px; font-size:15px; font-weight:500; transition:border .2s, background .2s;
}
.input:focus{ outline:none; border-color:var(--sage); background:var(--surface); }
.search{
  display:flex; align-items:center; gap:9px; background:var(--surface-2);
  border-radius:var(--r-pill); padding:12px 16px; box-shadow:inset 0 0 0 1px var(--border);
}
.search .ic{ width:18px; height:18px; color:var(--muted); }
.search input{ flex:1; border:0; background:none; font-size:14.5px; }
.search input:focus{ outline:none; }

/* ============================================================
   Bottom sheet / modal
   ============================================================ */
.scrim{
  position:absolute; inset:0; background:oklch(20% 0.02 150 / .42);
  z-index:20; opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
  display:flex; align-items:flex-end;
}
.scrim.open{ opacity:1; pointer-events:auto; }
.sheet{
  width:100%; background:var(--bg); border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:12px 22px calc(34px); transform:translateY(100%); transition:transform .34s var(--ease);
  box-shadow:0 -20px 50px -20px oklch(30% 0.05 150 / .4); max-height:88%; overflow-y:auto;
}
.scrim.open .sheet{ transform:translateY(0); }
.sheet-grip{ width:40px; height:4px; border-radius:3px; background:var(--border-2); margin:0 auto 16px; }

/* kv / steps lists */
.kv{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.kv:last-child{ border-bottom:0; }
.kv .k{ font-size:13.5px; color:var(--muted); font-weight:600; }
.kv .v{ font-size:14px; color:var(--fg); font-weight:700; }

.step{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; }
.step .num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--sage-tint);
  color:var(--sage-deep); font-weight:800; font-size:13px; display:grid; place-items:center;
  font-variant-numeric:tabular-nums;
}
.step .st-body .st-title{ font-weight:700; font-size:14.5px; color:var(--fg); }
.step .st-body .st-meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.rep{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--sage-deep); }

/* trainer row */
.trainer{ display:flex; align-items:center; gap:13px; }
.avatar{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:800; color:#fff; font-size:17px;
  font-family:var(--font-display);
  background:linear-gradient(140deg, var(--sage), var(--sage-deep));
}
.avatar.b{ background:linear-gradient(140deg, oklch(72% 0.08 60), oklch(58% 0.1 45)); }
.avatar.c{ background:linear-gradient(140deg, oklch(70% 0.07 175), oklch(52% 0.09 185)); }

/* hero (video detail) */
.hero-player{
  position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(150deg, oklch(48% 0.05 150), oklch(30% 0.04 160));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.hero-player .play-orb{ width:62px; height:62px; border-radius:50%; background:oklch(100% 0 0 / .92); display:grid; place-items:center; box-shadow:var(--shadow-lg); }
.hero-player .play-orb .ic{ width:26px; height:26px; color:var(--clay-deep); margin-left:3px; }

/* section head */
.s-head{ display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 13px; }
.s-head h2{ font-size:18px; }
.s-head .link{ font-size:13px; font-weight:700; color:var(--sage-deep); display:flex; align-items:center; gap:3px; }
.s-head .link .ic{ width:15px; height:15px; }
.s-head:first-child{ margin-top:6px; }

/* ============================================================
   Icon system (CSS masks — color via currentColor)
   ============================================================ */
.ic{
  display:inline-block; width:24px; height:24px; flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.ic-home{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11.5 12 4l9 7.5'/><path d='M5.5 10v9.5h13V10'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11.5 12 4l9 7.5'/><path d='M5.5 10v9.5h13V10'/></svg>"); }
.ic-cal{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2.5'/><path d='M3 10h18'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2.5'/><path d='M3 10h18'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>"); }
.ic-video{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='3'/><path d='M10 9.2v5.6l5-2.8z' fill='black' stroke='black' stroke-linejoin='round'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='3'/><path d='M10 9.2v5.6l5-2.8z' fill='black' stroke='black' stroke-linejoin='round'/></svg>"); }
.ic-card{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2.5'/><path d='M3 10.5h18'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2.5'/><path d='M3 10.5h18'/></svg>"); }
.ic-search{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20.5 20.5-4.2-4.2'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20.5 20.5-4.2-4.2'/></svg>"); }
.ic-play{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5.5v13l11-6.5z' fill='black'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5.5v13l11-6.5z' fill='black'/></svg>"); }
.ic-back{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>"); }
.ic-fwd{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>"); }
.ic-clock{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>"); }
.ic-check{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17 19 7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17 19 7'/></svg>"); }
.ic-heart{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5s-7.5-4.7-7.5-10.2A4 4 0 0 1 12 7a4 4 0 0 1 7.5 3.3c0 5.5-7.5 10.2-7.5 10.2z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5s-7.5-4.7-7.5-10.2A4 4 0 0 1 12 7a4 4 0 0 1 7.5 3.3c0 5.5-7.5 10.2-7.5 10.2z'/></svg>"); }
.ic-filter{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18l-7 8.5V20l-4 2v-8.5z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18l-7 8.5V20l-4 2v-8.5z'/></svg>"); }
.ic-pin{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-6.2 7-12A7 7 0 0 0 5 10c0 5.8 7 12 7 12z'/><circle cx='12' cy='10' r='2.6'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-6.2 7-12A7 7 0 0 0 5 10c0 5.8 7 12 7 12z'/><circle cx='12' cy='10' r='2.6'/></svg>"); }
.ic-user{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/></svg>"); }
.ic-star{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M12 3.2l2.5 5.4 5.9.7-4.4 4 1.2 5.8L12 16.4 6.8 19.1 8 13.3l-4.4-4 5.9-.7z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M12 3.2l2.5 5.4 5.9.7-4.4 4 1.2 5.8L12 16.4 6.8 19.1 8 13.3l-4.4-4 5.9-.7z'/></svg>"); }
.ic-bell{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2.5h-15z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2.5h-15z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>"); }
.ic-dumbbell{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 7v10'/><path d='M4 9.5v5'/><path d='M17.5 7v10'/><path d='M20 9.5v5'/><path d='M6.5 12h11'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 7v10'/><path d='M4 9.5v5'/><path d='M17.5 7v10'/><path d='M20 9.5v5'/><path d='M6.5 12h11'/></svg>"); }
.ic-plus{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>"); }
.ic-bolt{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>"); }
.ic-leaf{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19c0-8 6-13 15-13 0 9-5 15-13 15-1 0-2 0-2 0z'/><path d='M5 19c3-5 7-7 11-8'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19c0-8 6-13 15-13 0 9-5 15-13 15-1 0-2 0-2 0z'/><path d='M5 19c3-5 7-7 11-8'/></svg>"); }
.ic-rent{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 8.5V12l2.5 1.5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 8.5V12l2.5 1.5'/></svg>"); }
.ic-sauna{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/><path d='M3 12c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/><path d='M3 17c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/><path d='M3 12c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/><path d='M3 17c2-2 4 2 6 0c2-2 4 2 6 0c2-2 4 2 6 0'/></svg>"); }
.ic-sun{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5 5l1.8 1.8M17.2 17.2 19 19M19 5l-1.8 1.8M6.8 17.2 5 19'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5 5l1.8 1.8M17.2 17.2 19 19M19 5l-1.8 1.8M6.8 17.2 5 19'/></svg>"); }
.ic-users{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 19.5a5.5 5.5 0 0 1 11 0'/><path d='M16 5.2a3 3 0 0 1 0 5.6'/><path d='M16.8 14.2a5.5 5.5 0 0 1 3.7 5.3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 19.5a5.5 5.5 0 0 1 11 0'/><path d='M16 5.2a3 3 0 0 1 0 5.6'/><path d='M16.8 14.2a5.5 5.5 0 0 1 3.7 5.3'/></svg>"); }

/* ============================================================
   Index launcher gallery (not part of product screens)
   ============================================================ */
.gal{ max-width:1080px; margin:0 auto; padding:54px 28px 80px; }
.gal-head{ text-align:center; margin-bottom:40px; }
.gal-head h1{ font-size:clamp(30px,5vw,46px); line-height:1.05; }
.gal-head p{ color:var(--muted); margin-top:14px; font-size:16px; max-width:560px; margin-left:auto; margin-right:auto; }
.brand-mark{ width:54px; height:54px; border-radius:16px; margin:0 auto 18px; background:linear-gradient(140deg,var(--sage),var(--sage-deep)); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow); }
.brand-mark .ic{ width:28px; height:28px; }
.platform-tabs{ display:flex; gap:8px; justify-content:center; margin:30px 0 8px; }
.screen-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }
.screen-card{
  background:var(--surface); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-sm);
  border:1px solid oklch(92% 0.008 130 / .6); display:flex; flex-direction:column; gap:14px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.screen-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.mini-phone{
  height:230px; border-radius:26px; background:var(--bg); overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px var(--border); display:flex; flex-direction:column;
}
.mini-phone .mini-island{ width:60px; height:16px; border-radius:10px; background:#06070a; position:absolute; top:9px; left:50%; transform:translateX(-50%); }
.mini-phone.android .mini-island{ width:9px; height:9px; border-radius:50%; }
.mini-phone .mini-bar{ height:7px; border-radius:4px; background:var(--sage-tint2); margin:30px 14px 0; }
.mini-phone .mini-block{ margin:7px 14px 0; border-radius:7px; }
.sc-foot{ display:flex; align-items:center; justify-content:space-between; }
.sc-foot .sc-name{ font-weight:700; font-size:15px; color:var(--sage-ink); }
.sc-foot .sc-sub{ font-size:12px; color:var(--muted); }
.sc-link{ font-size:12.5px; font-weight:700; color:#fff; background:var(--sage-deep); padding:9px 14px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px; }
.sc-link .ic{ width:14px; height:14px; }
.legend{ margin-top:46px; padding:24px; border-radius:var(--r-card); background:var(--sage-tint); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.legend h4{ font-family:var(--font-display); font-size:14px; color:var(--sage-ink); margin-bottom:4px; }
.legend p{ font-size:13px; color:var(--fg-2); line-height:1.45; }
.swatch-row{ display:flex; gap:10px; margin-top:16px; }
.sw{ width:30px; height:30px; border-radius:9px; box-shadow:inset 0 0 0 1px oklch(0 0 0 / .06); }

@media (max-width:560px){
  .gal{ padding:40px 16px 60px; }
  .stage{ padding:30px 8px 50px; gap:28px; }
}