:root {
  color-scheme: dark;
  --bg: #0b0b0a; --surface: #151412; --raised: #1c1a17;
  --bronze: #b08a60; --accent: #d4b894; --ink: #f4efe7; --muted: #b9b1a6;
  --line: #41382f; --radius: 12px; --space: clamp(16px, 3vw, 36px);
  --shadow: 0 18px 48px #0005; --motion: 180ms ease;
  --font: Tahoma, "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.85 var(--font); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.48; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.4rem, 2.65vw, 2.28rem); }
h3 { font-size: 1.03rem; }
p, small { color: var(--muted); }
small { display: block; font-size: .8rem; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-inline-size: 100%; }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; inset-block-start: 8px; inset-inline-start: 12px; transform: translateY(-160%); z-index: 10; background: var(--bg); padding: 8px 16px; }
.skip:focus { transform: none; }
.container, .nav-shell { width: min(1320px, calc(100% - 2 * var(--space))); margin-inline: auto; }
.site-header { position: sticky; inset-block-start: 0; z-index: 5; background: #0b0b0af0; backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-shell, #site-menu, .nav-links, .actions { display: flex; align-items: center; gap: 12px; }
.nav-shell { min-height: 72px; gap: clamp(14px, 3vw, 42px); }
#site-menu { justify-content: space-between; flex: 1; }
.nav-links { gap: clamp(8px, 1.3vw, 22px); }
.nav-links a, .footer nav a { text-decoration: none; font-size: .84rem; color: var(--muted); padding-block: 7px; }
.nav-links a:hover, .footer nav a:hover { color: var(--accent); text-decoration: underline; }
.wordmark { font: italic 950 clamp(1.35rem, 3vw, 2rem)/1 system-ui; letter-spacing: -.08em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.wordmark span { color: var(--accent); }
.button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 7px; background: var(--accent); color: #17110c; min-height: 44px; padding: 8px 17px; text-decoration: none; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background var(--motion), border-color var(--motion); }
.button:hover { background: #ebcfae; }
.button:active { background: #bf9c74; }
.button.secondary { background: #13110fe0; color: var(--ink); border-color: #826c55; }
.button.secondary:hover { background: #33291f; }
.button:disabled { cursor: default; opacity: .55; }
.menu-toggle { display: none; }
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) minmax(0, .52fr); align-items: center; gap: var(--space); min-height: clamp(480px, 47vw, 690px); padding: clamp(44px, 6vw, 100px) max(var(--space), calc((100% - 1320px) / 2)); border-bottom: 1px solid var(--line); overflow: clip; }
.hero::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, #0b0b0a 13%, #0b0b0af5 31%, #0b0b0a65 62%, #0b0b0a13 100%); }
.hero-photo, .cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero > picture { position: absolute; inset: 0; inset-inline-start: auto; width: 72%; z-index: -2; }
.hero-photo { object-position: 29% 40%; }
.hero-copy { animation: arrive 480ms ease-out both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero h1 { margin-block: 10px 17px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { max-width: 47ch; }
.hero .actions, .cta .actions { margin-block: 24px 13px; flex-wrap: wrap; }
.hero-preview { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius); background: #11100dc9; border: 1px solid #8c745378; backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.hero-preview .badge { justify-self: start; }
.eyebrow { color: var(--accent); font-size: .8rem; font-weight: 700; }
.section { margin-block: clamp(28px, 4vw, 58px); min-width: 0; }
.section-heading { margin-bottom: 18px; }
.section-heading h2 { margin-block: 6px 8px; }
.section-heading p { max-width: 65ch; }
.grid, .split, .metrics { display: grid; gap: 14px; }
.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.two, .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.split { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: var(--space); align-items: center; }
.panel, .feature, .thumbnails article { background: linear-gradient(145deg,var(--raised),var(--surface) 75%); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: var(--space); }
.major > .section { margin-block: 0; }
.major { margin-block: clamp(28px, 4vw, 58px); }
.feature { padding: 18px; }
.feature h3 { margin-block: 10px 4px; }
.feature p { font-size: .9rem; }
.index { color: var(--accent); font-size: .83rem; border-block-end: 1px solid var(--bronze); }
.mock { background: #100f0e; border: 1px solid var(--line); border-radius: 10px; padding: clamp(10px, 1.7vw, 18px); box-shadow: var(--shadow); }
.mock-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 11px; }
.badge { display: inline-block; padding: 2px 8px; border: 1px solid #7b6249; color: var(--accent); border-radius: 5px; font-size: .72rem; }
.metric { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: #201c18; padding: 8px 10px; overflow-wrap: anywhere; }
.metric span { font-size: .76rem; color: var(--muted); }
.metric strong { font-size: .86rem; color: var(--ink); }
.dashboard { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; }
.dashboard aside { display: flex; flex-direction: column; gap: 10px; border-inline-end: 1px solid var(--line); padding-inline-end: 10px; font-size: .72rem; color: var(--muted); }
.dashboard aside strong { color: var(--accent); }
.mock-block { border: 1px solid var(--line); border-radius: 7px; margin-block: 10px; padding: 10px; font-size: .86rem; }
.bars { display: flex; align-items: end; gap: 5px; height: 72px; margin-block: 6px; border-block-end: 1px solid var(--line); }
.bars i { flex: 1; height: var(--value); background: linear-gradient(0deg,#6b4e36,var(--accent)); border-radius: 2px 2px 0 0; }
.checks, .pills { margin: 14px 0 0; padding: 0; list-style: none; }
.checks li { padding-inline-start: 20px; position: relative; margin-block: 6px; }
.checks li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--bronze); transform: rotate(45deg); position: absolute; inset-inline-start: 2px; inset-block-start: .7em; }
.pills, .rows { display: flex; flex-wrap: wrap; gap: 7px; }
.pills li, .rows span { border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; color: var(--muted); font-size: .8rem; }
.rows { margin-top: 10px; }
.photo:not(.hero-photo, .cta-photo) { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 7px; background: radial-gradient(ellipse at 24% 24%,#594331,#181612 68%); }
.mock .photo:not(.hero-photo, .cta-photo) { margin-bottom: 10px; }
.mock p, .mock button, #exercise-status { margin-block: 8px; }
.thumbnails { margin-block: 14px; }
.thumbnails article { overflow: hidden; padding-bottom: 10px; }
.thumbnails h3, .thumbnails small, .thumbnails .badge { margin: 9px 10px 0; }
.thumbnails .photo { border-radius: 0; }
.note { font-size: .83rem; margin-top: 15px; padding: 8px 12px; border-inline-start: 2px solid var(--bronze); background: #d4b8940a; }
.trend { width: 100%; display: block; }
.locked { display: grid; place-content: center; text-align: center; min-height: 145px; border: 1px dashed #826c55; border-radius: 9px; background: repeating-linear-gradient(135deg,#211b16,#211b16 14px,#191612 14px,#191612 28px); }
.locked span { color: var(--accent); font-size: 1.8rem; }
.qr-row { display: flex; align-items: center; gap: 12px; }
.qr { width: 56px; height: 56px; border: 5px solid var(--accent); border-radius: 5px; background: repeating-conic-gradient(var(--ink) 0 25%, #342a20 0 50%) 0 0 / 14px 14px; }
progress { display: block; width: 100%; margin-top: 10px; accent-color: var(--accent); }
.cta { min-height: 300px; display: grid; align-items: center; position: relative; isolation: isolate; overflow: clip; }
.cta-copy { max-width: 540px; }
.availability article { padding: 10px; }
.availability h2 { font-size: 1.05rem; }
.availability p { font-size: .88rem; }
.availability .button { margin-top: 10px; }
.footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 30px; }
.footer nav { display: flex; flex-wrap: wrap; align-content: start; gap: 2px 12px; }
.footer p { font-size: .87rem; }
@media (max-width: 1050px) {
  .nav-shell { gap: 12px; }
  .nav-links { gap: 8px; }
  .nav-links a, .nav-shell .button { font-size: .74rem; }
  .nav-shell .button { padding-inline: 9px; }
  .hero { grid-template-columns: minmax(0,1fr) minmax(175px,225px) minmax(0,.25fr); }
}
@media (max-width: 860px) {
  .nav-shell { justify-content: space-between; min-height: 62px; }
  .menu-toggle { display: inline-flex; }
  #site-menu { display: none; position: absolute; inset: 100% 0 auto; background: var(--surface); padding: 16px var(--space); border-bottom: 1px solid var(--line); }
  .menu-open #site-menu { display: grid; gap: 12px; }
  .nav-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-links a { min-height: 44px; padding-block: 10px; }
  .hero { grid-template-columns: minmax(0,1fr) minmax(0,.55fr); }
  .hero > picture { width: 100%; }
  .hero::before { background: linear-gradient(270deg,#0b0b0a 12%,#0b0b0ae8 45%,#0b0b0a70 100%); }
  .four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr; padding-block: 220px 24px; gap: 22px; }
  .hero > picture { height: 295px; }
  .hero-photo { object-position: 30% 30%; }
  .hero::before { background: linear-gradient(180deg,transparent 78px,#0b0b0a 282px); }
  .hero-preview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-preview .badge { grid-column: 1/-1; }
  .major, .three { grid-template-columns: 1fr; }
  .panel { padding: 15px; }
  .dashboard aside { display: none; }
  .dashboard { grid-template-columns: 1fr; }
  .metrics { gap: 7px; }
  .feature { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Product composition */
:root { --space: clamp(16px, 3vw, 42px); --line: #443a30; --radius: 10px; }
.container, .nav-shell { width: min(1380px, calc(100% - 2 * var(--space))); }
body { font-size: 15px; line-height: 1.75; }
h2 { font-size: clamp(24px, 2.7vw, 42px); line-height: 1.36; }
h3 { font-size: clamp(16px, 1.35vw, 21px); }
.nav-shell { min-height: 76px; }
.nav-links { gap: clamp(12px, 1.5vw, 24px); }
.nav-links a { font-size: .86rem; }
.mobile-actions { display: none; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: center; align-items: start; gap: 20px 0;
  min-height: 700px; padding-block: 38px;
  padding-inline: max(var(--space), calc((100% - 1380px) / 2));
  background: radial-gradient(ellipse at 64% 70%,#241d16 0,transparent 63%);
}
.hero > picture { width: 50%; }
.hero-photo { object-position: 13% 30%; }
.hero::before { background: linear-gradient(270deg,#0b0b0a 39%,#0b0b0ada 49%,transparent 66%), linear-gradient(0deg,#0b0b0a 0,transparent 22%); }
.hero-copy, .hero-preview { grid-column: 1; }
.hero h1 { font-size: clamp(54px, 4.15vw, 64px); line-height: 1.27; margin-block: 10px 14px; text-wrap: initial; }
.hero h1 em { display: inline-block; }
.hero p { max-width: 51ch; }
.hero .actions { margin-block: 16px 9px; }
.hero-preview { max-width: 510px; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.hero-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.hero-metrics .metric { background: linear-gradient(115deg,#262320,#171615); border-color: #574838; padding: 6px 10px; }
.hero-metrics .metric strong { font-size: .82rem; }
.section, .major { margin-block: clamp(13px, 1.35vw, 21px); }
.major { gap: 12px; }
.panel { padding: clamp(14px, 1.9vw, 27px); background: linear-gradient(136deg,#22201d,#151413 68%); }
.section-heading { margin-bottom: 12px; }
.section-heading h2 { margin-block: 3px 5px; }
.major .section-heading h2 { font-size: clamp(22px, 2.05vw, 32px); }
#features { display: flex; flex-direction: column; gap: 12px; }
#features .section-heading { order: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; column-gap: 20px; margin: 0; padding: 4px 4px 8px; }
#features .section-heading .eyebrow { grid-column: 1/-1; }
#features .section-heading h2 { font-size: clamp(22px, 2.25vw, 34px); }
.feature { padding: 12px 15px; background: linear-gradient(125deg,#282520,#161513 80%); transition: border-color var(--motion), background var(--motion); }
.feature:hover { border-color: #8c7453; background: #27231e; }
.feature h3 { margin-block: 5px 2px; }
.feature p { font-size: .83rem; }
#member { position: relative; isolation: isolate; overflow: hidden; }
#member .member-photo { position: absolute; inset-block: 0; inset-inline-start: 0; width: 42%; height: 100%; object-position: 85% 42%; border-radius: 0; z-index: -2; }
#member::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg,#181614ec 0,#181614f0 32%,#181614 50%); }
#member .split { grid-template-columns: minmax(0,.77fr) minmax(0,1.23fr); }
.dashboard > div > .metrics:first-child { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard aside strong { background: #393027; padding: 3px 7px; border-radius: 4px; }
.metrics { gap: 6px; }
.mock { padding: 11px; box-shadow: 0 10px 24px #0003; }
.mock-top { border-bottom: 1px solid #39332c; margin-bottom: 8px; padding-bottom: 6px; }
.mock-block { margin-block: 7px; background: #191715; }
.bars { height: 56px; }
.checks { margin-top: 8px; }
.checks li { margin-block: 2px; font-size: .9rem; }
.workout-console, .workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: start; }
.mock .workout-console > .photo:not(.hero-photo, .cta-photo) { align-self: stretch; height: 100%; aspect-ratio: auto; margin: 0; }
.workout-console .button { width: 100%; padding-inline: 8px; }
#nutrition .split { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
#nutrition .mock { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px 10px; align-items: center; }
#nutrition .mock-top { grid-column: 1/-1; margin: 0; }
#nutrition .mock .photo { grid-row: span 2; margin: 0; height: 100%; }
#nutrition .rows { margin: 0; }
#progress .trend { max-height: 107px; }
.locked { min-height: 104px; }
.workspace { margin-top: 7px; }
.workspace .mock-block { margin: 0; }
.workspace-detail { display: grid; gap: 6px; }
.console-table { width: 100%; text-align: start; border-collapse: collapse; font-size: .75rem; }
.console-table caption { text-align: start; color: var(--accent); margin-bottom: 4px; }
.console-table th, .console-table td { text-align: start; padding: 5px; border-bottom: 1px solid #36302a; }
.console-table td { color: var(--muted); }
.console-table .selected { background: #30271f; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; width: 22px; height: 22px; background: #47372a; color: var(--accent); margin-inline-end: 4px; }
.mock .message { margin: 0; padding: 5px 7px; border-inline-start: 2px solid var(--bronze); font-size: .75rem; }
#booking > .photo, #community > .photo { aspect-ratio: 3.2; object-position: center 42%; }
#booking > .mock, #community > .mock { margin-top: 8px; }
.market { grid-template-columns: minmax(0,1.14fr) minmax(0,1fr); }
.market .thumbnails { gap: 7px; }
.market .thumbnails .photo { aspect-ratio: 1.8; }
.market .thumbnails h3 { font-size: .88rem; }
.market .metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.note { margin-top: 9px; }
.cta { min-height: 235px; }
.availability article { padding: 3px 8px; }
.footer { padding-block: 17px; }
@media (max-width: 1100px) {
  .nav-shell { gap: 16px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: .76rem; }
  .hero h1 { font-size: clamp(38px, 5vw, 54px); }
  .market { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-shell { min-height: 66px; }
  .mobile-actions { display: flex; align-items: center; gap: 7px; }
  .menu-toggle { gap: 5px; }
  #site-menu .actions .button:not(.secondary) { display: none; }
  .hero { min-height: 590px; grid-template-columns: minmax(0,1.17fr) minmax(0,.83fr); }
  .hero > picture { width: 54%; }
  #member .split, #nutrition .split { grid-template-columns: 1fr; }
  #member .member-photo { width: 54%; }
  .workout-console, .workspace { grid-template-columns: 1fr; }
  .mock .workout-console > .photo:not(.hero-photo, .cta-photo) { height: auto; aspect-ratio: 2; }
}
@media (max-width: 600px) {
  .hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-block: 24px 16px; gap: 12px; }
  .hero-copy { grid-row: 1; }
  .hero h1 { font-size: clamp(38px, 10vw, 46px); text-wrap: balance; }
  .hero > picture { position: relative; grid-column: 1; grid-row: 2; width: 100%; height: 178px; border-radius: 8px; overflow: hidden; }
  .hero-photo { object-position: 30% 35%; }
  .hero::before { background: none; }
  .hero-preview { grid-row: 3; grid-template-columns: 1fr; max-width: none; }
  .hero-metrics > .metric:nth-child(n+3) { display: none; }
  .hero .actions { margin-block: 12px 7px; }
  #features .section-heading { display: block; }
  .major { grid-template-columns: 1fr; }
  .market .thumbnails { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .market .metrics, .dashboard > div > .metrics:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #nutrition .mock { grid-template-columns: 1fr; }
  #nutrition .mock .photo { grid-row: auto; height: auto; aspect-ratio: 2.3; }
  .workout-console, .workspace { grid-template-columns: 1fr; }
  #member::before { background: linear-gradient(270deg,#181614eb,#181614 80%); }
  .cta { min-height: 230px; }
}

/* Cinematic landing */
:root {
  --color-background: #090908; --color-background-soft: #0e0d0c;
  --color-surface: #151412; --color-surface-raised: #1b1917; --color-surface-warm: #201b17;
  --color-bronze: #b8875d; --color-bronze-light: #d3a678; --color-champagne: #e2bb91;
  --color-ivory: #f5eee6; --color-text: #eee7df; --color-text-muted: #aaa29a;
  --color-border: #cd9d7147; --color-border-strong: #dcae8385; --color-glass: #171513d1;
  --bg: var(--color-background); --surface: var(--color-surface); --raised: var(--color-surface-raised);
  --bronze: var(--color-bronze); --accent: var(--color-champagne); --ink: var(--color-ivory);
  --muted: var(--color-text-muted); --line: var(--color-border); --radius: 13px;
}
.container, .nav-shell { width: min(1440px, calc(100% - 2 * var(--space))); }
.site-header { background: #090908bb; }
.nav-shell { min-height: 70px; display: grid; grid-template-columns: 1fr 3fr; }
#site-menu { display: grid; grid-template-columns: 1fr auto; }
.nav-links { justify-content: center; gap: clamp(20px,3vw,52px); }
.nav-links a { color: var(--ink); }
.home-link { border-bottom: 1px solid var(--accent); }
.wordmark { color: var(--accent); justify-self: start; }
.button:not(.secondary) { background: linear-gradient(155deg,#ecc8a4,#b1835b 76%); }
.button:not(.secondary):hover { background: #ecc8a4; }
.hero {
  display: block; min-height: 690px; padding-block: 48px 0;
  padding-inline: max(var(--space), calc((100% - 1440px) / 2)); overflow: visible;
  background: #100d0b; z-index: 1;
}
.hero-photo { width: 100%; height: 100%; object-position: left 29%; }
.hero > picture { width: 100%; }
.hero::before { background: linear-gradient(270deg,#090908e8 2%,#09090875 44%,transparent 67%), linear-gradient(0deg,#0b0a09 0%,transparent 39%); }
.hero-copy { width: min(100%, 660px); margin-inline-end: auto; }
.hero h1 { font-size: clamp(56px,4.35vw,68px); margin-block: 8px 13px; }
.hero .hero-tagline { max-width: none; color: var(--ink); font-size: clamp(13px,1.2vw,17px); margin-bottom: 8px; }
.hero-tagline span { display: inline-block; padding-inline: 9px; margin-inline: 6px; border-inline: 1px solid var(--color-border-strong); }
.hero .actions { margin-block: 19px 0; }
.control-deck {
  position: relative; width: 83%; margin: 34px auto -16px; z-index: 2;
  padding: 13px 19px 17px; border: 1px solid var(--color-border-strong); border-top-color: var(--accent);
  border-radius: 17px; background: linear-gradient(160deg,#292725ed,#10100ff7 67%);
  box-shadow: inset 0 8px 24px -20px var(--accent),0 18px 38px #000b;
}
.deck-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 9px; }
.deck-grid { display: grid; grid-template-columns: .74fr 1.45fr 1fr .92fr; gap: 11px; }
.deck-card, .deck-grid nav { min-width: 0; background: linear-gradient(145deg,#292826,#181715); border: 1px solid #ffffff12; border-radius: 8px; padding: 9px; font-size: .82rem; }
.deck-grid nav { display: grid; gap: 2px; }
.deck-grid nav a { text-decoration: none; padding: 3px 7px; }
.deck-grid nav a:first-child, .deck-grid nav a:hover { background: #594638; border-radius: 4px; }
.deck-training { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 4px 8px; align-items: center; }
.deck-training strong { grid-column: 1/-1; }
.deck-training ul { list-style: none; padding: 0; margin: 0; font-size: .73rem; }
.deck-training li::before { content: '✓'; color: var(--accent); margin-inline-end: 4px; }
.deck-training .photo:not(.hero-photo, .cta-photo) { height: 83px; aspect-ratio: auto; }
.deck-card .bars { height: 62px; margin-top: 13px; }
.progress-ring { width: 67px; aspect-ratio: 1; margin: 7px auto 0; border-radius: 50%; background: conic-gradient(var(--color-bronze-light) 72%,#4b4035 0); display: grid; place-items: center; }
.progress-ring bdi { width: 56px; aspect-ratio: 1; border-radius: 50%; background: #1b1917; display: grid; place-items: center; font-weight: 700; }
.cinema-workout { position: relative; isolation: isolate; padding-block: 39px 14px; border-block: 1px solid var(--color-border); background: #12100e; }
.cinema-workout .workout-backdrop { position: absolute; inset: 0 auto 0 0; width: 43%; height: 100%; aspect-ratio: auto; object-position: 42% 35%; z-index: -2; border-radius: 0; }
.cinema-workout::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg,#090908 36%,#090908ba 58%,transparent 86%); }
.workout-stage { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.95fr) minmax(0,.8fr); gap: clamp(12px,2vw,30px); align-items: center; }
.workout-stage .mock { border-radius: 15px; border-color: var(--color-border-strong); background: #12110fee; }
.workout-stage h2 { font-size: clamp(29px,3vw,43px); }
.workout-console .metric { padding: 4px 6px; }
.workout-console .button { font-size: .76rem; }
.cinema-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-block: 14px; }
.cinema-tile { position: relative; isolation: isolate; display: flex; align-items: center; margin: 0; min-height: clamp(155px,13vw,205px); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: linear-gradient(135deg,#201d19,#100f0e); transition: border-color var(--motion), transform var(--motion); }
.cinema-tile:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.tile-art { position: absolute; inset: 0 auto 0 0; width: 55%; z-index: -2; }
.tile-art .photo { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-position: center 44%; }
.tile-art .trend { height: calc(100% - 22px); }
.tile-art .badge { position: absolute; inset: auto auto 7px 9px; background: var(--surface); }
.cinema-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg,#12110f 39%,#12110fd4 53%,transparent 78%); pointer-events: none; }
.tile-copy { width: 56%; padding: 15px clamp(10px,2vw,28px); }
.tile-copy h2 { font-size: clamp(20px,2.1vw,30px); }
.tile-copy p { margin-block: 5px 8px; font-size: .88rem; line-height: 1.65; }
.card-link { color: var(--accent); display: inline-flex; gap: 6px; align-items: center; min-height: 40px; text-decoration: none; font-size: .88rem; font-weight: 700; }
.card-link:hover { text-decoration: underline; }
.card-link span { font-size: 1.2em; }
.feature-index { margin: 12px 0 16px; }
.feature-index summary { cursor: pointer; padding: 9px 14px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--accent); background: var(--surface); }
.feature-index > .section, .feature-index > .major { margin-inline: 0; }
.cta.panel { min-height: 285px; border-radius: 0; border-inline: 0; margin: 0; padding-inline: max(var(--space), calc((100% - 1440px) / 2)); }
.cta-photo { object-position: 20% 60%; }
.cta-copy h2 { max-width: 490px; }
.wall-mark { position: absolute; left: 24%; top: 50%; color: #e2bb91; font: italic 900 clamp(24px,4vw,57px)/1 system-ui; text-shadow: 0 2px 16px #211308; }
.access-wrap .availability { margin-block: 12px; }
.access-wrap:not(:has(:target)) { display: none; }
.footer .grid { grid-template-columns: 1fr auto; align-items: center; }
.footer .wordmark + p { font-size: .77rem; }
@media (min-width: 861px) {
  .hero { min-height: 0; height: 690px; display: flex; flex-direction: column; justify-content: space-between; }
}
@media (max-width: 860px) {
  body:has(.menu-open) { overflow: hidden; }
  .nav-shell { display: flex; }
  #site-menu { display: none; max-height: calc(100dvh - 70px); overflow: auto; }
  .menu-open #site-menu { grid-template-columns: 1fr; }
  #site-menu .actions .button:not(.secondary) { display: inline-flex; }
  .hero { min-height: 0; padding-block: 28px 16px; }
  .hero-copy { max-width: 59%; }
  .hero h1 { font-size: clamp(40px,6vw,56px); }
  .control-deck { width: 100%; margin-bottom: 0; }
  .workout-stage { grid-template-columns: minmax(0,1.2fr) minmax(0,.85fr); }
  .workout-stage .workout-console { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nav-shell { min-height: 64px; }
  .mobile-actions .button { padding-inline: 8px; }
  .hero { display: grid; gap: 13px; grid-template-columns: 1fr; padding-block: 23px 12px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(38px,10vw,46px); }
  .hero-tagline span { margin-inline: 2px; padding-inline: 4px; }
  .hero > picture { position: relative; grid-row: 2; height: 175px; border-radius: 9px; }
  .hero-photo { object-position: 32% 22%; }
  .control-deck { grid-row: 3; }
  .hero::before { background: none; }
  .control-deck { margin: 0; padding: 10px; }
  .deck-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .deck-grid nav { grid-column: 1/-1; display: flex; flex-wrap: wrap; }
  .deck-grid nav a { min-height: 42px; display: grid; place-items: center; }
  .deck-training { grid-column: 1/-1; }
  .deck-training .photo:not(.hero-photo, .cta-photo) { height: 62px; }
  .workout-stage, .cinema-tiles { grid-template-columns: 1fr; }
  .workout-stage > div:last-child { grid-row: 1; }
  .cinema-workout { padding-block: 18px 12px; }
  .cinema-workout .workout-backdrop { width: 55%; height: 125px; }
  .cinema-workout::before { background: linear-gradient(270deg,#090908 39%,transparent 84%); }
  .cinema-tile { min-height: 146px; }
  .tile-copy { width: 62%; }
  .tile-art { width: 53%; }
  .cta.panel { min-height: 255px; }
  .wall-mark { display: none; }
  .footer .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .chart-ready { opacity: .65; transform: translateY(4px); transition: opacity 350ms ease, transform 350ms ease; }
  .chart-ready.chart-visible { opacity: 1; transform: none; }
}

.workout-console figure { margin: 0; min-width: 0; }
.workout-console figcaption { color: var(--muted); font-size: .75rem; }
.workout-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 7px; }
.workout-fields label { font-size: .76rem; }
.workout-fields input { display: block; width: 100%; min-height: 44px; padding: 5px 7px; border: 1px solid var(--color-border-strong); border-radius: 5px; background: var(--bg); color: var(--ink); font: inherit; }
.rest-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.rest-controls .button { width: auto; }
#rest-clock { font-variant-numeric: tabular-nums; }
#workout-sets, #summary-sets { list-style: none; padding: 0; margin-block: 6px; font-size: .8rem; }
#workout-sets button { padding: 4px 7px; min-height: 44px; margin: 3px 4px; border: 1px solid var(--color-border-strong); border-radius: 5px; background: var(--surface); color: var(--ink); cursor: pointer; }
#storage-note { margin-top: 5px; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .workout-stage .workout-console { grid-template-columns: minmax(0,1fr); }
  .workout-console figure img { max-height: 150px; }
}