@font-face {
  font-family: "Lora Local";
  src: url("assets/fonts/Lora-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora Local";
  src: url("assets/fonts/Lora-Italic.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Local";
  src: url("assets/fonts/NunitoSans-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Local";
  src: url("assets/fonts/Cinzel-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --ink: #f3eadb;
  --ink-soft: #d9cbb8;
  --panel: #3a2924;
  --panel-raised: #58392b;
  --cream: #f3eadb;
  --muted: #cfc4b3;
  --gold: #d5aa60;
  --gold-light: #f4d88d;
  --gold-dark: #76502d;
  --rose: #9b6fc0;
  --green: #8a5caf;
  --amethyst: #56346f;
  --amethyst-light: #be96d6;
  --coal: #1b191b;
  --soot: #272225;
  --walnut-deep: #3a2924;
  --walnut: #58392b;
  --line: rgba(213, 170, 96, 0.38);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(244, 216, 141, 0.18);
  --display: "Poppins", "Cinzel Local", Arial, sans-serif;
  --heading: "Bebas Neue", "Cinzel Local", Arial, sans-serif;
  --body: "Inter", "Nunito Local", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(232,234,234,.94), rgba(212,216,217,.97)),
    url("assets/pewter-filigree-texture.jpg") center top / 1000px auto repeat;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { min-height: 100vh; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--ink);
  background: #f8f9f9;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 10px clamp(18px, 4vw, 60px);
  border-bottom: 1px solid var(--line);
  background: rgba(34, 37, 40, 0.9);
  backdrop-filter: blur(18px);
}

.site-header-overlay {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(20,22,24,.82), rgba(31,34,36,.42), transparent);
  backdrop-filter: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .012em;
}
.brand img { display:block; width:58px; height:auto; flex:0 0 auto; object-fit:contain; filter:grayscale(1) contrast(1.08) brightness(1.12) drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.brand span { white-space: nowrap; }
.brand span { color:#f7f8f7; }
.brand em { color:#d9ddde; font-style: italic; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(241, 243, 243, 0.84);
  font-size: 0.88rem;
  font-weight: 800;
  transition: 160ms ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.site-nav .nav-cta { margin-left: 8px; color: var(--ink); background: linear-gradient(135deg, #fff, #aeb4b7); box-shadow:inset 0 1px rgba(255,255,255,.85); }
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible { color: var(--ink); background: #fff; }
.menu-toggle { display: none; }

.hero-band {
  position: relative;
  min-height: clamp(670px, 90vh, 900px);
  overflow: hidden;
  border-bottom: 0;
  background: #020303;
}
.hero-journey { height:350svh; min-height:2700px; overflow:visible; }
.hero-stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:670px;
  overflow:clip;
  isolation:isolate;
  background:#020303;
}
.hero-stage::after {
  content:"";
  position:absolute;
  z-index:7;
  right:0;
  bottom:0;
  left:0;
  height:clamp(120px,18vh,190px);
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0, rgba(12,14,15,.42) 28%, rgba(121,126,129,.72) 68%, rgba(226,229,229,.98) 100%);
  filter:blur(.1px);
}
.hero-depth-world,
.hero-scene-backdrop,
.hero-stage-light,
.hero-edge-shade,
.hero-player-track,
.hero-track-lines { position:absolute; inset:0; }
.hero-depth-world { z-index:0; overflow:hidden; }
.hero-scene-backdrop {
  transform:scale(1.08);
  transform-origin:50% 48%;
  will-change:transform,filter;
  background:
    radial-gradient(ellipse 38% 76% at 50% -8%,rgba(255,255,255,.33),transparent 70%),
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(27,30,32,.34) 38%,rgba(27,30,32,.34) 62%,rgba(0,0,0,.9)),
    linear-gradient(rgba(2,3,3,.84),rgba(2,3,3,.94)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
}
.hero-stage-light {
  z-index:2;
  opacity:.12;
  background:
    radial-gradient(ellipse 32% 74% at 50% 4%, rgba(255,255,255,.78), rgba(255,255,255,.13) 34%, transparent 74%),
    radial-gradient(circle at 50% 46%, rgba(225,255,72,.08), transparent 36%);
  mix-blend-mode:screen;
  will-change:opacity,transform;
}
.hero-track-lines {
  z-index:2;
  opacity:.22;
  pointer-events:none;
  background:
    linear-gradient(72deg,transparent 0 45.7%,rgba(223,255,25,.32) 45.9% 46.15%,transparent 46.35%),
    linear-gradient(108deg,transparent 0 45.7%,rgba(255,59,184,.28) 45.9% 46.15%,transparent 46.35%),
    repeating-linear-gradient(90deg,transparent 0 8vw,rgba(255,255,255,.12) 8.1vw 8.26vw,transparent 8.38vw 16vw);
  transform:perspective(700px) rotateX(70deg) scale(1.7) translateY(35%);
  transform-origin:50% 100%;
  filter:blur(.5px);
}
.hero-player-track { z-index:3; pointer-events:none; }
.hero-player-cutout {
  position:absolute;
  top:5%;
  bottom:-6%;
  width:min(78vw,1180px);
  margin:0;
  opacity:0;
  transform-origin:center bottom;
  will-change:transform,filter,opacity;
}
.hero-player-cutout.side-left { left:-8%; }
.hero-player-cutout.side-right { right:-8%; }
.hero-player-cutout img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
}
.hero-player-cutout .player-neon-edge {
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  background:var(--neon);
  -webkit-mask:var(--cutout) center bottom / contain no-repeat;
  mask:var(--cutout) center bottom / contain no-repeat;
  opacity:1;
  filter:none;
  transform:scale(1.008);
  transform-origin:center bottom;
}
.hero-player-cutout .player-photo { z-index:1; filter:grayscale(1) contrast(1.16); }
.hero-player-1 { width:min(112vw,1750px); }
.hero-player-2 { width:min(112vw,1750px); }
.hero-player-3 { width:min(132vw,1900px); }
.hero-player-4 { width:min(120vw,1500px); }
.hero-player-5 { width:min(120vw,1500px); }
.fret-pattern {
  position:absolute;
  z-index:4;
  left:var(--pattern-x);
  top:var(--pattern-y);
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(4,1fr);
  width:var(--pattern-width);
  aspect-ratio:4.8/1;
  transform:translate(-50%,-50%) rotate(var(--pattern-turn));
  opacity:.88;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(14.285% - 1px),rgba(255,255,255,.12) calc(14.285% - 1px) 14.285%),
    repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.16) calc(25% - 1px) 25%);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.8));
}
.fret-pattern span {
  grid-column:var(--col);
  grid-row:var(--row);
  place-self:center;
  width:clamp(10px,1.15vw,18px);
  aspect-ratio:1;
  animation:fret-note-float 2.4s ease-in-out infinite;
  animation-delay:var(--delay);
}
.note-circle { border:2px solid #dfff19; border-radius:50%; background:rgba(223,255,25,.13); box-shadow:0 0 5px #dfff19,0 0 18px rgba(223,255,25,.92); }
.note-square { border:2px solid #ff3bb8; background:rgba(255,59,184,.15); box-shadow:0 0 5px #ff3bb8,0 0 18px rgba(255,59,184,.9); }
@keyframes fret-note-float {
  0%,100% { transform:translateY(-3px) scale(.84); opacity:.58; }
  50% { transform:translateY(3px) scale(1.16); opacity:1; }
}
.hero-edge-shade {
  z-index:6;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84),transparent 19%,transparent 79%,rgba(0,0,0,.8)),
    linear-gradient(0deg,rgba(0,0,0,.92),transparent 28%,rgba(0,0,0,.25) 76%,rgba(0,0,0,.6));
  pointer-events:none;
}
.hero-intro {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: clamp(24px, 6vw, 96px);
  width: min(560px, 43vw);
  transform: translateY(-47%);
  color:#f8f9f8;
}
.hero-journey.is-enhanced .hero-intro,
.hero-journey.is-enhanced .hero-video-card {
  opacity:0;
  pointer-events:none;
  transition:opacity .22s linear;
}
.eyebrow {
  margin: 0 0 14px;
  color: #596064;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; }
h1, h2 { font-family:var(--display); font-weight:800; line-height:1.03; letter-spacing:.002em; }
h1 { font-size:clamp(3.15rem,5.8vw,5.9rem); }
h2 { font-size:clamp(2.2rem,4.25vw,4rem); }
h1 em, h2 em { color:#70777b; font-family:var(--display); font-style:italic; font-weight:800; letter-spacing:-.018em; }
.hero-intro .eyebrow { color:#e4e7e7; }
.hero-intro h1 em { color:#dfe3e4; }
.hero-intro > p:not(.eyebrow) { max-width: 570px; margin: 22px 0 28px; color: #eef0ef; font-size: clamp(1rem, 1.5vw, 1.2rem); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: var(--ink); border-color:#a6acae; background: linear-gradient(145deg, #fff, #c3c8ca 55%, #9ba2a5); box-shadow: 0 14px 32px rgba(42,47,50,.2), inset 0 1px rgba(255,255,255,.95); }
.button-secondary { color: var(--ink); border-color: rgba(38,43,46,.28); background: rgba(255,255,255,.32); }
.button-secondary:hover { border-color: rgba(38,43,46,.48); background: rgba(255,255,255,.64); }

.hero-video-card {
  position: absolute;
  z-index: 9;
  top:50%;
  right:clamp(24px,5vw,80px);
  width:min(47vw,680px);
  padding:10px 10px 14px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:24px;
  background:rgba(42,45,48,.84);
  box-shadow:0 34px 80px rgba(0,0,0,.68);
  transform:translateY(-42%);
  backdrop-filter:blur(18px);
}
.hero-video-card video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  overflow: hidden;
  border-radius:16px;
  background:#000;
  filter:grayscale(1) contrast(1.03);
}
.hero-video-label,
.hero-video-caption { margin:0; }
.hero-video-label { padding:3px 7px 10px; color:#edf0f0; font-size:.74rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.hero-video-label span { margin-right:6px; color:#c8cdcf; }
.hero-video-caption { padding:10px 7px 0; color:#dfe2e2; font-size:.88rem; }
.video-control-bar {
  display:grid;
  grid-template-columns:auto minmax(100px,1fr) auto minmax(132px,160px);
  gap:10px;
  align-items:center;
  padding:11px 7px 0;
}
.video-control-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#f3f5f5;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}
.video-control-button:hover,
.video-control-button:focus-visible { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.15); }
.video-progress-wrap { display:flex; align-items:center; min-width:0; }
.video-progress-wrap input { width:100%; accent-color:#d9ddde; cursor:pointer; }
.video-time { color:#e1e4e4; font-variant-numeric:tabular-nums; font-size:.78rem; white-space:nowrap; }
.video-volume-wrap { display:flex; align-items:center; gap:6px; min-width:0; color:#e1e4e4; font-size:.73rem; white-space:nowrap; }
.video-volume-wrap input { flex:1; min-width:44px; width:100%; accent-color:#d9ddde; cursor:pointer; }
.video-volume-wrap output { min-width:3ch; text-align:right; font-variant-numeric:tabular-nums; }
.hero-scroll-cue {
  position:absolute;
  z-index:9;
  left:50%;
  bottom:28px;
  margin:0;
  color:#171a1c;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 1px 8px rgba(255,255,255,.72);
  transform:translateX(-50%);
}
.hero-scroll-cue span { display:inline-block; margin-left:9px; color:#dfff19; font-size:1rem; }
.hero-journey-progress { position:absolute; z-index:10; inset:auto 0 0; height:3px; background:rgba(255,255,255,.12); }
.hero-journey-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:#dfff19; box-shadow:0 0 14px #dfff19; will-change:transform; }

.section { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 104px 0; }
.hero-copy { position: relative; min-height: 640px; padding-right: min(37vw, 420px); }
.hero-phone-popup {
  position: absolute;
  top: 92px;
  right: 2%;
  width: clamp(220px, 27vw, 310px);
  margin: 0;
  overflow: hidden;
  border: 9px solid #b8bdc0;
  border-radius: 42px;
  background: #000;
  box-shadow: var(--shadow);
  transform: rotate(3deg);
}
.hero-emblem img { display:block; width:118px; height:auto; margin-bottom:22px; object-fit:contain; filter:grayscale(1) contrast(1.06) drop-shadow(0 12px 24px rgba(48,52,55,.24)); }
.hero-copy h2 { max-width: 740px; }
.lead-copy { max-width: 750px; color: var(--muted); font-size: 1.07rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.manifesto-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 0;
  color: #f4f6f6;
  background:
    linear-gradient(116deg, transparent 0 18%, rgba(255,255,255,.07) 18.15% 18.35%, transparent 18.5% 63%, rgba(255,255,255,.05) 63.15% 63.35%, transparent 63.5%),
    radial-gradient(circle at 50% 0%, #262a2d 0, #0c0e0f 44%, #000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 76px,#000 calc(100% - 76px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 76px,#000 calc(100% - 76px),transparent 100%);
}
.manifesto-section::after,
.situations-section::after,
.live-practice::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(235,238,239,.78) 11px 13px, transparent 13px 22px) center 54px / 100% 10px no-repeat,
    repeating-linear-gradient(315deg, transparent 0 11px, rgba(155,162,166,.68) 11px 13px, transparent 13px 22px) center calc(100% - 54px) / 100% 10px no-repeat;
  opacity:.34;
}
.manifesto-section::after { inset:0; }
.manifesto-inner { width: min(940px, calc(100% - 36px)); margin: 0 auto; padding: 90px 0; text-align: center; }
.manifesto-inner .eyebrow { color:#bcc2c5; }
.manifesto-inner h2 em { color:#e2e5e6; }
.manifesto-inner p:last-child { max-width: 850px; margin: 24px auto 0; color: #c8cdcf; font-size: 1.1rem; }

.section-heading { max-width: 830px; margin-bottom: 46px; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.06rem; }
.section-heading-row { max-width: none; display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 54px; align-items: end; }
.section-heading-row > p { margin: 0 0 5px; }

.feature-section { position:relative; border-bottom:0; }
.feature-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.feature-card {
  min-width: 0;
  padding: 24px 24px 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:linear-gradient(145deg, rgba(249,250,249,.96), rgba(190,195,197,.94));
  box-shadow:0 22px 50px rgba(37,41,44,.15), inset 0 1px rgba(255,255,255,.9);
}
.feature-card-phone {
  width: min(90%, 265px);
  margin: -4px auto 28px;
  overflow: hidden;
  border: 8px solid #202326;
  border-radius: 34px;
  background: #000;
  box-shadow: 0 24px 50px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.12);
}
.feature-card-phone img { width: 100%; height: auto; }
.card-label { margin: 0 0 9px; color:#565d61; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.feature-card h3 { font-family:var(--display); font-size:clamp(1.55rem,2.35vw,2.15rem); font-weight:800; line-height:1.08; letter-spacing:.01em; }
.feature-card > p:last-child { color: var(--muted); }

.situation-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.situation-card {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.situation-card-wide { grid-column: span 2; min-height: 520px; }
.situation-card img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter:grayscale(1) contrast(1.04); }
.situation-pattern {
  z-index:2;
  left:52%;
  top:55%;
  width:94%;
  --pattern-turn:-23deg;
  --pattern-x:52%;
  --pattern-y:55%;
  --pattern-width:94%;
  opacity:.94;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.92));
}
.situation-card figcaption {
  position: absolute;
  z-index:3;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding: 45px 24px 22px;
  color:#fff;
  background: linear-gradient(transparent, rgba(25,28,30,.92));
}
.situation-card strong { font-family:var(--display); font-size:1.35rem; letter-spacing:.012em; }
.situation-card span { color:#e0e3e3; text-align:right; }
.situation-card-lifestyle {
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  min-height:0;
  background:#171a1c;
}
.situation-card-lifestyle img {
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:3/2;
  object-fit:contain;
  object-position:center;
  background:#0a0c0d;
}
.situation-card-lifestyle figcaption {
  position:static;
  padding:20px 22px 22px;
  background:linear-gradient(145deg,#25292c,#17191b);
}

.camera-band { position:relative; isolation:isolate; border-block:0; background:transparent; }
.camera-band::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(105deg, rgba(246,247,247,.96), rgba(190,195,197,.92)), url("assets/pewter-filigree-texture.jpg") center / cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 calc(100% - 108px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 calc(100% - 108px),transparent 100%);
}
.camera-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,360px); gap: clamp(50px, 8vw, 120px); align-items: center; }
.camera-copy p:not(.eyebrow), .live-practice-copy p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; }
.single-phone-showcase {
  width: min(100%, 330px);
  margin: 0 auto;
  overflow: hidden;
  border: 10px solid #2c3033;
  border-radius: 42px;
  background: #000;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.14);
}
.single-phone-showcase img { width: 100%; }
.single-phone-dark { transform: rotate(-3deg); }

.live-practice { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(32px,4vw,52px); justify-items:center; }
.live-practice-copy { width:min(100%,780px); }
.live-practice-screen {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.gold-iphone {
  position:relative;
  padding:14px 46px;
  border:8px solid transparent;
  border-radius:0;
  border-image:linear-gradient(135deg,#fff1a8 0,#a77a24 18%,#f8da78 42%,#7f581a 64%,#ffeaa3 82%,#a87922 100%) 1;
  background:#050505;
  box-shadow:0 34px 86px rgba(0,0,0,.68), inset 0 0 0 2px #31250e;
}
.gold-iphone::before {
  content:"";
  position:absolute;
  top:50%;
  left:13px;
  width:18px;
  height:66px;
  transform:translateY(-50%);
  background:#090909;
  box-shadow:inset 0 0 0 1px rgba(255,232,154,.22);
}
.live-practice-screen img { display:block; width:100%; border-radius:0; background:#000; }
.live-practice-screen figcaption { padding:11px 8px 2px; color:#4e5457; font-size:.78rem; text-align:center; letter-spacing:.06em; text-transform:uppercase; }
.practice-steps { display:grid; gap:14px; margin:26px 0 0; padding:0; list-style:none; }
.practice-steps li { display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; }
.practice-steps li > span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #858b8e;
  border-radius:0;
  color:#272b2e;
  background:linear-gradient(145deg,#fff,#b9bec0);
  font-family:var(--display);
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.practice-steps strong { display:block; margin:2px 0 3px; color:#25292b; font-family:var(--display); font-size:1rem; letter-spacing:.02em; }
.practice-steps p { margin:0; font-size:.94rem !important; line-height:1.5; }
.privacy-note { display: flex; gap: 10px; align-items: baseline; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.privacy-note span { color: var(--green); font-size: .72rem; }

.situations-section,
.live-practice {
  position:relative;
  isolation:isolate;
  color:#f4f6f6;
}
.situations-section::before,
.live-practice::before {
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  bottom:0;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  background:
    linear-gradient(116deg, transparent 0 26%, rgba(255,255,255,.065) 26.1% 26.3%, transparent 26.4% 71%, rgba(255,255,255,.045) 71.1% 71.28%, transparent 71.4%),
    radial-gradient(circle at 76% 12%, #24282a 0, #101214 29%, #030303 68%, #000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 calc(100% - 108px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 calc(100% - 108px),transparent 100%);
}
.situations-section::after,
.live-practice::after {
  top:0;
  bottom:0;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
}
.situations-section .eyebrow,
.live-practice .eyebrow { color:#bbc1c4; }
.situations-section h2,
.live-practice h2,
.practice-steps strong { color:#f4f6f6; }
.situations-section h2 em,
.live-practice h2 em { color:#d8dcde; }
.section-heading-row > p,
.live-practice-copy > p:not(.eyebrow),
.practice-steps p,
.live-practice .privacy-note { color:#c5cace; }
.situations-section .situation-card { border-color:rgba(219,224,226,.34); box-shadow:0 28px 70px rgba(0,0,0,.62); }
.live-practice-screen { border-color:transparent; box-shadow:none; }
.live-practice-screen figcaption { color:#d6dadd; }
.practice-steps li > span { border-color:#d6dadd; color:#111416; background:linear-gradient(145deg,#fff,#9da4a7); }
.live-practice .privacy-note { border-top-color:rgba(220,225,226,.24); }
.live-practice .privacy-note span { color:#bfc5c7; }

.launch { padding-top: 44px; }
.launch-panel {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr) auto;
  gap: clamp(24px,4vw,54px);
  align-items: center;
  padding: clamp(30px,5vw,60px);
  border:1px solid rgba(46,51,54,.28);
  border-radius: 30px;
  background:linear-gradient(115deg, rgba(248,249,248,.9), rgba(180,185,188,.9)), url("assets/pewter-filigree-texture.jpg") center / cover;
  box-shadow: var(--shadow);
}
.launch-panel > img { display:block; width:130px; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.06); }
.launch-panel h2 { font-size: clamp(2rem,4vw,3.35rem); }
.launch-panel p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }

.site-footer {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 50px 0 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { display:block; width:74px; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.06); }
.footer-brand p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.footer-links a:hover { color:#000; }
.footer-legal { grid-column: 1/-1; margin: 0; font-size: .85rem; }

.legal-main { padding-top: 24px; }
.legal-page { max-width: 900px; }
.legal-page h1 { font-size: clamp(2.7rem,6vw,5rem); }
.legal-page h2 { margin: 48px 0 12px; font-size: clamp(1.65rem,3vw,2.25rem); }
.legal-page h3 { margin:30px 0 8px; font-family:var(--display); font-size:1.2rem; letter-spacing:.012em; }
.legal-page p, .legal-page li { color: var(--muted); }
.legal-page strong, .legal-page a { color:var(--ink); }
.legal-page a { text-decoration: underline; text-decoration-color: rgba(73,80,84,.5); text-underline-offset: 3px; }
.legal-meta { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal-back { display: inline-block; margin-top: 44px; color: var(--gold-light)!important; }

@media (max-width: 1050px) {
  .site-header-overlay { background:rgba(35,38,41,.9); backdrop-filter:blur(18px); }
  .menu-toggle { display: grid; gap: 5px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display:block; width:24px; height:2px; background:var(--cream); }
  .site-nav { position:absolute; top:76px; left:16px; right:16px; display:none; align-items:stretch; padding:12px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(35,38,41,.98); box-shadow:var(--shadow); }
  .site-nav.is-open { display:grid; }
  .site-nav a { padding:12px 14px; }
  .site-nav .nav-cta { margin:4px 0 0; text-align:center; }
  .hero-intro { width:min(520px,47vw); }
  .hero-video-card { right:22px; width:47vw; }
  .hero-copy { padding-right:min(35vw,350px); }
  .feature-card { padding-inline:18px; }
  .feature-card-phone { width:92%; }
  .live-practice { grid-template-columns:minmax(0,1fr); gap:32px; }
  .launch-panel { grid-template-columns:100px 1fr; }
  .launch-panel .button { grid-column:2; justify-self:start; }
}

@media (max-width: 800px) {
  .hero-band { min-height:980px; }
  .hero-journey { height:340svh; min-height:2600px; }
  .hero-stage { min-height:980px; }
  .hero-player-cutout { top:4%; bottom:-2%; width:142vw; }
  .hero-player-cutout.side-left { left:-30vw; }
  .hero-player-cutout.side-right { right:-30vw; }
  .hero-player-3 { width:150vw; }
  .hero-player-4, .hero-player-5 { width:135vw; }
  .fret-pattern span { width:11px; }
  .hero-edge-shade { background:linear-gradient(180deg,rgba(0,0,0,.36),transparent 25%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.92)),linear-gradient(90deg,rgba(0,0,0,.74),transparent 28%,transparent 72%,rgba(0,0,0,.72)); }
  .hero-intro { top:120px; left:22px; right:22px; width:auto; transform:none; }
  .hero-intro > p:not(.eyebrow) { max-width:650px; }
  .hero-video-card { top:auto; right:auto; bottom:52px; left:50%; width:min(92vw,680px); transform:translateX(-50%); }
  .hero-copy { min-height:0; padding-right:0; padding-bottom:680px; }
  .hero-phone-popup { top:auto; right:50%; bottom:80px; width:270px; transform:translateX(50%) rotate(2deg); }
  .hero-emblem img { width:96px; }
  .feature-trio { grid-template-columns:1fr; }
  .feature-card { display:grid; grid-template-columns:minmax(180px,250px) 1fr; column-gap:26px; align-items:start; }
  .feature-card-phone { grid-row:1/5; margin:0; }
  .feature-card h3, .feature-card p { grid-column:2; }
  .section-heading-row { grid-template-columns:1fr; gap:20px; }
  .situation-card-wide { min-height:420px; }
  .camera-inner, .live-practice { grid-template-columns:1fr; }
  .camera-copy { order:1; }
  .camera-inner .single-phone-showcase { order:2; }
  .live-practice-screen { width:min(100%,680px); margin-inline:auto; }
}

@media (max-width: 620px) {
  html { scroll-padding-top:70px; }
  .site-header { min-height:70px; padding-inline:16px; }
  .brand img { width:50px; height:auto; }
  .brand span { font-size:.92rem; }
  .site-nav { top:70px; }
  h1 { font-size:clamp(2.75rem,12vw,4rem); }
  h2 { font-size:clamp(2rem,9.5vw,3rem); }
  .hero-band { min-height:850px; }
  .hero-intro { top:104px; }
  .hero-video-card { bottom:32px; width:calc(100% - 28px); padding:8px 8px 12px; border-radius:18px; }
  .hero-video-card video { border-radius:12px; }
  .hero-video-caption { font-size:.8rem; }
  .gold-iphone { padding:8px 28px; border-width:6px; }
  .gold-iphone::before { left:7px; width:12px; height:42px; }
  .video-control-bar { grid-template-columns:auto 1fr; gap:8px; }
  .video-progress-wrap { grid-column:1/-1; grid-row:2; }
  .video-time { justify-self:end; }
  .video-volume-wrap { grid-column:1/-1; grid-row:3; }
  .section { width:min(100% - 28px,1180px); padding:80px 0; }
  .hero-copy { padding-bottom:610px; }
  .hero-phone-popup { width:245px; bottom:72px; }
  .hero-actions { display:grid; }
  .feature-card { display:block; padding:22px; }
  .feature-card-phone { width:min(88%,250px); margin:0 auto 26px; }
  .feature-card h3, .feature-card p { grid-column:auto; }
  .situation-grid { grid-template-columns:1fr; }
  .situation-card, .situation-card-wide { grid-column:auto; min-height:350px; }
  .situation-card-lifestyle { min-height:0; }
  .situation-pattern { left:55%; top:45%; width:120%; }
  .situation-card figcaption { display:grid; }
  .situation-card span { text-align:left; }
  .launch-panel { grid-template-columns:1fr; text-align:center; }
  .launch-panel > img { margin:auto; }
  .launch-panel .button { grid-column:auto; justify-self:stretch; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; flex-direction:column; }
  .footer-links { justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .hero-journey { height:auto; min-height:900px; }
  .hero-stage { position:relative; height:900px; min-height:900px; }
  .hero-player-cutout, .hero-scene-backdrop, .hero-stage-light { will-change:auto; }
}

/* Ornate instrument-case theme derived from the gold, ivory, and amethyst design key. */
body {
  color:var(--ink);
  background-color:var(--coal);
  background-image:
    radial-gradient(circle at 12% 12%,rgba(138,92,175,.17),transparent 29%),
    radial-gradient(circle at 88% 38%,rgba(213,170,96,.11),transparent 34%),
    linear-gradient(rgba(18,12,13,.91),rgba(30,20,17,.97)),
    url("assets/pewter-filigree-texture.jpg");
  background-position:center top,center top,center top,center top;
  background-size:auto,auto,auto,1200px auto;
  background-attachment:fixed,fixed,fixed,fixed;
  background-blend-mode:screen,screen,multiply,soft-light;
}

::selection { color:#17100d; background:var(--gold-light); }
:where(a,button,input):focus-visible { outline:3px solid var(--amethyst-light); outline-offset:3px; }

.site-shell {
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(8,6,7,.88),transparent 9%,transparent 91%,rgba(8,6,7,.88)),
    linear-gradient(180deg,rgba(10,8,9,.18),rgba(69,39,25,.12) 52%,rgba(10,8,9,.3));
}

.skip-link {
  color:#17100d;
  border:2px solid var(--gold-light);
  border-radius:6px;
  background:linear-gradient(180deg,#f7dea0,#c28a3d);
  box-shadow:0 8px 22px rgba(0,0,0,.48);
}

.site-header,
.site-header-overlay,
.site-header.is-scrolled {
  border-bottom:1px solid var(--gold);
  background:
    linear-gradient(90deg,rgba(86,52,111,.18),transparent 24%,transparent 76%,rgba(86,52,111,.18)),
    linear-gradient(180deg,rgba(30,24,26,.98),rgba(13,10,11,.94));
  box-shadow:
    inset 0 -3px 0 rgba(86,52,111,.48),
    inset 0 -4px 0 rgba(244,216,141,.18),
    0 12px 34px rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
}

.site-header-overlay {
  background:
    linear-gradient(90deg,rgba(86,52,111,.14),transparent 25%,transparent 75%,rgba(86,52,111,.14)),
    linear-gradient(180deg,rgba(21,16,18,.96),rgba(23,16,17,.72) 72%,rgba(23,16,17,.08));
  backdrop-filter:none;
}

.brand { font-family:var(--display); letter-spacing:.035em; }
.brand img {
  filter:sepia(.2) saturate(1.15) brightness(1.1) drop-shadow(0 5px 0 rgba(55,32,20,.88)) drop-shadow(0 10px 16px rgba(0,0,0,.62));
}
.brand span {
  color:var(--ivory,var(--cream));
  text-shadow:0 1px 0 rgba(255,255,255,.36),0 2px 0 #76502d,0 5px 12px rgba(0,0,0,.72);
}
.brand em { color:var(--amethyst-light); }

.site-nav { gap:6px; }
.site-nav a {
  position:relative;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--muted);
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color:var(--cream);
  border-color:rgba(213,170,96,.52);
  background:linear-gradient(180deg,rgba(86,52,111,.45),rgba(58,41,36,.56));
}
.site-nav .nav-cta,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color:#1a110d;
  border-color:#f4d88d;
  background:linear-gradient(180deg,#f7dfa1 0,#d5aa60 30%,#95632d 60%,#dfb86a 82%,#6b451f 100%);
  box-shadow:inset 0 1px 0 rgba(255,245,205,.9),inset 0 -2px 4px rgba(63,35,16,.68),0 5px 14px rgba(0,0,0,.38);
}
.menu-toggle span:not(.sr-only) { background:var(--gold-light); }

.hero-band,
.hero-stage { background:#090708; }
.hero-stage {
  border-inline:1px solid rgba(213,170,96,.28);
  box-shadow:inset 0 0 0 4px rgba(35,19,14,.34),inset 0 0 60px rgba(0,0,0,.72);
}
.hero-stage::after {
  height:clamp(130px,19vh,210px);
  background:linear-gradient(to bottom,transparent 0,rgba(22,14,14,.38) 28%,rgba(49,30,27,.72) 62%,rgba(27,25,27,.98) 100%);
}
.hero-scene-backdrop {
  background:
    radial-gradient(ellipse 38% 78% at 50% -8%,rgba(244,216,141,.34),transparent 69%),
    radial-gradient(circle at 18% 54%,rgba(86,52,111,.24),transparent 34%),
    radial-gradient(circle at 82% 42%,rgba(118,80,45,.2),transparent 36%),
    linear-gradient(90deg,rgba(0,0,0,.94),rgba(45,30,26,.32) 38%,rgba(45,30,26,.3) 62%,rgba(0,0,0,.94)),
    linear-gradient(rgba(10,7,8,.84),rgba(8,6,7,.95)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,screen,normal,multiply,soft-light;
}
.hero-stage-light {
  background:
    radial-gradient(ellipse 32% 74% at 50% 4%,rgba(255,230,166,.78),rgba(213,170,96,.18) 35%,transparent 74%),
    radial-gradient(circle at 50% 48%,rgba(138,92,175,.16),transparent 39%);
}
.hero-track-lines {
  opacity:.28;
  background:
    linear-gradient(72deg,transparent 0 45.7%,rgba(244,216,141,.55) 45.9% 46.08%,transparent 46.28%),
    linear-gradient(108deg,transparent 0 45.7%,rgba(155,111,192,.48) 45.9% 46.08%,transparent 46.28%),
    repeating-linear-gradient(90deg,transparent 0 8vw,rgba(213,170,96,.18) 8.1vw 8.22vw,transparent 8.34vw 16vw);
}
.hero-player-cutout .player-photo { filter:grayscale(.86) sepia(.24) contrast(1.18) brightness(.92); }
.fret-pattern {
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(14.285% - 1px),rgba(213,170,96,.18) calc(14.285% - 1px) 14.285%),
    repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),rgba(244,216,141,.2) calc(25% - 1px) 25%);
}
.note-circle {
  border-color:var(--gold-light);
  background:rgba(213,170,96,.18);
  box-shadow:0 0 4px var(--gold-light),0 0 14px rgba(213,170,96,.74);
}
.note-square {
  border-color:var(--amethyst-light);
  background:rgba(138,92,175,.2);
  box-shadow:0 0 4px var(--amethyst-light),0 0 14px rgba(138,92,175,.72);
}
.hero-edge-shade {
  background:
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(86,52,111,.1) 18%,transparent 38%,transparent 62%,rgba(118,80,45,.1) 82%,rgba(0,0,0,.9)),
    linear-gradient(0deg,rgba(0,0,0,.94),transparent 30%,rgba(0,0,0,.22) 75%,rgba(0,0,0,.7));
}

.hero-intro {
  padding:clamp(22px,3vw,38px);
  border:2px solid var(--gold);
  border-radius:26px;
  background:
    radial-gradient(circle at 0 0,rgba(155,111,192,.25),transparent 31%),
    radial-gradient(circle at 100% 100%,rgba(213,170,96,.14),transparent 34%),
    linear-gradient(145deg,rgba(39,30,30,.94),rgba(12,9,10,.88));
  box-shadow:
    inset 0 0 0 4px rgba(58,41,36,.95),
    inset 0 0 0 5px rgba(244,216,141,.25),
    inset 0 1px 0 rgba(255,241,193,.58),
    0 28px 70px rgba(0,0,0,.62);
}
.eyebrow {
  color:var(--gold-light);
  font-size:.8rem;
  letter-spacing:.19em;
}
h1,
h2,
h3 {
  color:var(--cream);
  text-shadow:0 1px 0 rgba(255,248,232,.28),0 2px 0 #76502d,0 6px 14px rgba(0,0,0,.56);
}
h1 { line-height:.94; text-shadow:0 1px 0 #fff4da,0 3px 0 #8b6338,0 7px 16px rgba(0,0,0,.72); }
h1 em,
h2 em { color:var(--amethyst-light); text-shadow:0 1px 0 rgba(244,216,255,.28),0 3px 8px rgba(0,0,0,.55); }
.hero-intro .eyebrow { color:var(--gold-light); }
.hero-intro h1 em { color:var(--amethyst-light); }
.hero-intro > p:not(.eyebrow) { color:var(--cream); }

.button {
  border-radius:7px;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.button-primary {
  color:#1a110d;
  border-color:var(--gold-light);
  background:linear-gradient(180deg,#f7dfa1 0,#d5aa60 27%,#95632d 59%,#e1ba6c 82%,#6c471f 100%);
  box-shadow:inset 0 1px 0 rgba(255,247,212,.95),inset 0 -3px 6px rgba(63,35,16,.66),0 11px 24px rgba(0,0,0,.43);
}
.button-secondary {
  color:var(--cream);
  border-color:var(--gold);
  background:linear-gradient(145deg,rgba(86,52,111,.62),rgba(25,17,19,.95));
  box-shadow:inset 0 0 0 2px rgba(155,111,192,.18),0 9px 22px rgba(0,0,0,.34);
}
.button-secondary:hover { color:#fff; border-color:var(--gold-light); background:linear-gradient(145deg,rgba(112,67,154,.76),rgba(39,24,27,.98)); }

.hero-video-card {
  border:2px solid var(--gold);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0,rgba(155,111,192,.28),transparent 34%),
    linear-gradient(145deg,rgba(52,35,31,.96),rgba(12,9,10,.95));
  box-shadow:
    inset 0 0 0 4px rgba(86,52,111,.5),
    inset 0 1px 0 rgba(255,236,176,.5),
    0 34px 80px rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.hero-video-card video { border:1px solid rgba(244,216,141,.55); border-radius:16px; filter:grayscale(.72) sepia(.12) contrast(1.06); }
.hero-video-label { color:var(--gold-light); }
.hero-video-label span { color:var(--amethyst-light); }
.hero-video-caption { color:var(--muted); }
.video-control-button {
  border-color:rgba(213,170,96,.58);
  border-radius:6px;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(86,52,111,.46),rgba(26,18,19,.82));
}
.video-control-button:hover,
.video-control-button:focus-visible { border-color:var(--gold-light); background:rgba(112,67,154,.58); }
.video-progress-wrap input { accent-color:var(--gold); }
.video-volume-wrap input { accent-color:var(--gold); }
.video-time { color:var(--muted); }
.hero-scroll-cue { color:var(--cream); text-shadow:0 2px 8px #000; }
.hero-scroll-cue span { color:var(--gold-light); }
.hero-journey-progress { height:4px; background:rgba(27,18,19,.88); }
.hero-journey-progress span { background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 50%,var(--amethyst-light)); box-shadow:0 0 12px rgba(213,170,96,.72); }

main { position:relative; }
.section-heading > p:last-child,
.lead-copy,
.camera-copy p:not(.eyebrow),
.live-practice-copy p:not(.eyebrow) { color:var(--muted); }

.hero-copy {
  margin-top:74px;
  margin-bottom:74px;
  padding-left:clamp(30px,5vw,68px);
  padding-right:min(40vw,470px);
  border:2px solid var(--gold);
  border-radius:30px;
  background:
    radial-gradient(circle at 0 0,rgba(138,92,175,.22),transparent 31%),
    radial-gradient(circle at 100% 100%,rgba(213,170,96,.13),transparent 34%),
    linear-gradient(145deg,rgba(58,41,36,.94),rgba(21,15,16,.97));
  box-shadow:inset 0 0 0 5px rgba(30,18,16,.95),inset 0 0 0 6px rgba(244,216,141,.24),var(--shadow);
}
.hero-phone-popup {
  border:7px solid var(--gold);
  border-radius:38px;
  background:#050405;
  box-shadow:0 0 0 3px var(--amethyst),0 0 0 5px var(--gold-dark),0 30px 66px rgba(0,0,0,.66);
}
.hero-emblem img {
  width:150px;
  filter:sepia(.2) saturate(1.15) brightness(1.08) drop-shadow(0 7px 0 rgba(71,42,28,.85)) drop-shadow(0 18px 24px rgba(0,0,0,.52));
}

.manifesto-section {
  border-block:1px solid var(--gold);
  color:var(--cream);
  background:
    radial-gradient(circle at 0 50%,rgba(112,67,154,.24),transparent 32%),
    radial-gradient(circle at 100% 50%,rgba(213,170,96,.17),transparent 32%),
    linear-gradient(rgba(27,17,16,.9),rgba(13,9,10,.96)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,multiply,soft-light;
}
.manifesto-section::after,
.situations-section::after,
.live-practice::after {
  background:
    linear-gradient(90deg,transparent 3%,var(--gold-dark) 12%,var(--gold-light) 50%,var(--gold-dark) 88%,transparent 97%) center 46px / 100% 2px no-repeat,
    linear-gradient(90deg,transparent 3%,var(--amethyst) 18%,var(--amethyst-light) 50%,var(--amethyst) 82%,transparent 97%) center 52px / 100% 1px no-repeat,
    linear-gradient(90deg,transparent 3%,var(--gold-dark) 12%,var(--gold-light) 50%,var(--gold-dark) 88%,transparent 97%) center calc(100% - 46px) / 100% 2px no-repeat,
    linear-gradient(90deg,transparent 3%,var(--amethyst) 18%,var(--amethyst-light) 50%,var(--amethyst) 82%,transparent 97%) center calc(100% - 52px) / 100% 1px no-repeat;
  opacity:.78;
}
.manifesto-inner .eyebrow { color:var(--gold-light); }
.manifesto-inner h2 em { color:var(--amethyst-light); }
.manifesto-inner p:last-child { color:var(--muted); }

.feature-card {
  position:relative;
  border:2px solid var(--gold);
  border-radius:22px;
  color:var(--cream);
  background:
    radial-gradient(circle at 0 0,rgba(155,111,192,.26),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(155,111,192,.15),transparent 30%),
    linear-gradient(145deg,rgba(88,57,43,.96),rgba(31,21,20,.98));
  box-shadow:inset 0 1px 0 rgba(255,232,163,.7),inset 0 -5px 12px rgba(70,40,20,.64),0 0 0 4px rgba(58,41,36,.95),0 18px 40px rgba(0,0,0,.5);
}
.feature-card::before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(244,216,141,.26);
  border-radius:15px;
  pointer-events:none;
}
.feature-card-phone {
  border:6px solid var(--gold);
  border-radius:30px;
  background:#030303;
  box-shadow:0 0 0 3px var(--gold-dark),0 0 0 5px rgba(86,52,111,.7),0 22px 44px rgba(0,0,0,.64);
}
.card-label { color:var(--gold-light); }
.feature-card > p:last-child { color:var(--muted); }

.situations-section,
.live-practice { color:var(--cream); }
.situations-section::before {
  background:
    radial-gradient(circle at 10% 8%,rgba(112,67,154,.28),transparent 31%),
    radial-gradient(circle at 90% 48%,rgba(118,80,45,.2),transparent 35%),
    linear-gradient(rgba(16,11,12,.9),rgba(31,20,18,.95)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,multiply,soft-light;
}
.live-practice::before {
  background:
    radial-gradient(ellipse 52% 62% at 82% 23%,rgba(157,88,222,.46),transparent 72%),
    radial-gradient(ellipse 48% 62% at 8% 67%,rgba(111,62,183,.43),transparent 73%),
    radial-gradient(circle at 15% 14%,rgba(232,184,91,.13),transparent 18%),
    linear-gradient(135deg,rgba(39,20,62,.92),rgba(20,11,38,.96)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,screen,multiply,soft-light;
}
.situations-section .eyebrow,
.live-practice .eyebrow { color:var(--gold-light); }
.situations-section h2,
.live-practice h2,
.practice-steps strong { color:var(--cream); }
.situations-section h2 em,
.live-practice h2 em { color:var(--amethyst-light); }
.section-heading-row > p,
.live-practice-copy > p:not(.eyebrow),
.practice-steps p,
.live-practice .privacy-note { color:var(--muted); }
.situation-card,
.situations-section .situation-card {
  border:2px solid var(--gold);
  border-radius:20px;
  background:#110d0e;
  box-shadow:inset 0 0 0 3px rgba(86,52,111,.58),0 0 0 3px var(--gold-dark),0 28px 66px rgba(0,0,0,.65);
}
.situation-card img { filter:grayscale(.76) sepia(.18) contrast(1.08) brightness(.88); }
.situation-card figcaption {
  border-top:1px solid rgba(213,170,96,.46);
  background:linear-gradient(transparent,rgba(45,28,24,.86) 40%,rgba(12,9,10,.98));
}
.situation-card strong { color:var(--cream); }
.situation-card span { color:var(--muted); }
.situation-card-lifestyle { background:#110d0e; }
.situation-card-lifestyle img { background:#080607; }
.situation-card-lifestyle figcaption { background:linear-gradient(145deg,#422b25,#171011); }

.camera-band::before {
  background:
    radial-gradient(ellipse 54% 68% at 12% 42%,rgba(157,84,220,.48),transparent 75%),
    radial-gradient(ellipse 55% 62% at 88% 61%,rgba(119,65,186,.36),transparent 74%),
    radial-gradient(circle at 87% 18%,rgba(235,185,88,.22),transparent 29%),
    linear-gradient(118deg,rgba(41,21,64,.9),rgba(22,12,41,.96)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,screen,multiply,soft-light;
}
.camera-copy h2 { color:var(--cream); }
.camera-copy p:not(.eyebrow) { color:var(--muted); }
.single-phone-showcase {
  border:7px solid var(--gold);
  border-radius:38px;
  background:#030303;
  box-shadow:0 0 0 3px var(--gold-dark),0 0 0 5px rgba(86,52,111,.7),0 28px 64px rgba(0,0,0,.66);
}

.gold-iphone {
  border-width:9px;
  border-image:linear-gradient(135deg,#fff0b1 0,#9a672e 16%,#edca7b 38%,#68431e 59%,#f4d88d 80%,#8c5928 100%) 1;
  background:#050405;
  box-shadow:0 0 0 4px rgba(86,52,111,.62),0 34px 86px rgba(0,0,0,.72),inset 0 0 0 2px #3b2616;
}
.live-practice-screen figcaption { color:var(--muted); }
.practice-steps li > span {
  border:1px solid var(--gold-light);
  color:#1a110d;
  background:linear-gradient(180deg,#f5d993,#c28a3d 55%,#7c5024);
  box-shadow:inset 0 1px 0 rgba(255,248,218,.9),0 0 0 2px rgba(86,52,111,.5),0 5px 12px rgba(0,0,0,.38);
}
.live-practice .privacy-note { border-top-color:rgba(213,170,96,.32); }
.live-practice .privacy-note span { color:var(--amethyst-light); }

.launch-panel {
  border:3px solid var(--gold);
  border-radius:28px;
  color:var(--cream);
  background:
    radial-gradient(circle at 0 0,rgba(155,111,192,.58),transparent 27%),
    radial-gradient(circle at 100% 0,rgba(112,67,154,.46),transparent 27%),
    radial-gradient(circle at 0 100%,rgba(112,67,154,.4),transparent 26%),
    radial-gradient(circle at 100% 100%,rgba(155,111,192,.5),transparent 27%),
    linear-gradient(120deg,rgba(42,22,62,.92),rgba(19,11,35,.97)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,screen,screen,multiply,soft-light;
  box-shadow:inset 0 0 0 6px rgba(58,41,36,.96),inset 0 0 0 8px rgba(244,216,141,.34),inset 0 1px 0 rgba(255,239,191,.76),0 30px 74px rgba(0,0,0,.6);
}
.launch-panel > img {
  width:150px;
  border:3px solid var(--gold-light);
  border-radius:24px;
  filter:none;
  box-shadow:0 0 0 4px var(--gold-dark),0 0 0 6px rgba(86,52,111,.74),0 16px 30px rgba(0,0,0,.52);
}
.launch-panel p:not(.eyebrow) { color:var(--muted); }

.site-footer {
  border-top:2px solid var(--gold-dark);
  color:var(--muted);
  box-shadow:inset 0 1px 0 rgba(244,216,141,.18);
}
.footer-brand img { filter:sepia(.2) saturate(1.12) brightness(1.08) drop-shadow(0 7px 10px rgba(0,0,0,.48)); }
.footer-links a { color:var(--gold-light); }
.footer-links a:hover { color:var(--amethyst-light); }

.legal-main { color:var(--cream); }
.legal-page {
  margin-top:54px;
  margin-bottom:54px;
  padding-inline:clamp(26px,5vw,68px);
  border:1px solid var(--gold);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(48,32,28,.94),rgba(14,10,11,.97));
  box-shadow:inset 0 0 0 4px rgba(86,52,111,.3),var(--shadow);
}
.legal-page h2 { color:var(--gold-light); text-shadow:0 2px 8px rgba(0,0,0,.55); }
.legal-page h3 { color:var(--cream); }
.legal-page p,
.legal-page li { color:var(--muted); }
.legal-page strong { color:var(--cream); }
.legal-page a { color:var(--gold-light); text-decoration-color:var(--amethyst-light); }
.legal-meta { border-bottom-color:rgba(213,170,96,.34); }
.legal-back { color:var(--gold-light)!important; }

@media (max-width:1050px) {
  .site-header-overlay { background:linear-gradient(180deg,rgba(27,20,22,.98),rgba(13,10,11,.96)); backdrop-filter:blur(12px); }
  .site-nav {
    border:2px solid var(--gold);
    border-radius:12px;
    background:
      radial-gradient(circle at 100% 0,rgba(112,67,154,.3),transparent 42%),
      linear-gradient(145deg,rgba(54,36,31,.99),rgba(13,10,11,.99));
    box-shadow:inset 0 0 0 3px rgba(86,52,111,.44),0 24px 50px rgba(0,0,0,.64);
  }
  .site-nav a { padding:12px 14px; }
}

@media (max-width:800px) {
  .hero-intro { padding:24px; }
  .hero-copy {
    margin-top:46px;
    margin-bottom:46px;
    padding-right:30px;
    padding-left:30px;
    padding-bottom:680px;
  }
  .feature-card { border-radius:18px; }
  .launch-panel > img { width:128px; }
}

@media (max-width:620px) {
  body { background-attachment:scroll; }
  .brand span { letter-spacing:0; }
  .hero-intro { padding:20px; border-radius:18px; }
  .hero-video-card { border-radius:18px; }
  .hero-copy {
    width:calc(100% - 24px);
    padding:54px 22px 610px;
    border-radius:20px;
  }
  .hero-emblem img { width:118px; }
  .feature-card,
  .situation-card,
  .launch-panel,
  .legal-page { border-radius:16px; }
  .feature-card::before { border-radius:10px; }
  .launch-panel { padding:28px 22px; }
  .launch-panel > img { width:min(180px,62vw); }
  .legal-page { width:calc(100% - 24px); padding-inline:22px; }
}

/* App screen rail, integrated player devices, and tightly cropped live-practice film. */
.hero-stage {
  top:76px;
  height:calc(100svh - 76px);
}

.hero-app-strip {
  position:relative;
  z-index:12;
  padding:28px clamp(18px,4vw,54px) 24px;
  overflow:hidden;
  border-bottom:2px solid var(--gold);
  color:var(--cream);
  background:
    radial-gradient(circle at 12% 25%,rgba(112,67,154,.2),transparent 26%),
    radial-gradient(circle at 88% 75%,rgba(213,170,96,.15),transparent 30%),
    linear-gradient(180deg,rgba(28,19,20,.99),rgba(8,6,7,.98)),
    url("assets/pewter-filigree-texture.jpg") center / cover;
  background-blend-mode:screen,screen,multiply,soft-light;
  box-shadow:inset 0 -4px 0 rgba(86,52,111,.42),0 18px 48px rgba(0,0,0,.48);
}
.hero-app-strip-cue {
  display:block;
  width:max-content;
  margin:20px auto 0;
  padding:8px 14px 6px;
  border:1px solid rgba(244,216,141,.58);
  color:var(--gold-light);
  background:rgba(22,14,16,.92);
  font-family:var(--display);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-app-strip-cue span { padding-left:8px; color:var(--amethyst-light); }
.hero-app-strip-inner {
  width:min(1160px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(360px,1.65fr) repeat(2,minmax(150px,.62fr));
  gap:clamp(22px,4vw,58px);
  align-items:center;
}
.app-strip-device {
  display:grid;
  justify-items:center;
  align-content:center;
  min-width:0;
  margin:0;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.52));
}
.app-strip-device-shell {
  overflow:hidden;
  border:4px solid var(--gold);
  background:#050405;
  box-shadow:
    0 0 0 2px var(--gold-dark),
    0 0 0 4px rgba(86,52,111,.72),
    inset 0 1px 0 rgba(255,241,199,.68);
}
.app-strip-device-shell img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
}
.app-strip-device-live .app-strip-device-shell {
  width:min(100%,560px);
  aspect-ratio:800/368;
  padding:9px 38px;
  border-radius:31px;
  transform:rotate(-1deg);
}
.app-strip-device-live .app-strip-device-shell img { border-radius:8px; }
.app-strip-device-finger .app-strip-device-shell,
.app-strip-device-modes .app-strip-device-shell {
  width:clamp(118px,13vw,158px);
  aspect-ratio:368/800;
  padding:8px 6px;
  border-radius:34px;
}
.app-strip-device-finger .app-strip-device-shell { transform:rotate(-3deg); }
.app-strip-device-modes .app-strip-device-shell { transform:rotate(3deg); }
.app-strip-device-finger .app-strip-device-shell img,
.app-strip-device-modes .app-strip-device-shell img { border-radius:24px; }
.app-strip-device figcaption {
  margin-top:14px;
  padding:7px 12px 6px;
  border:1px solid rgba(244,216,141,.68);
  border-radius:5px;
  color:var(--gold-light);
  background:linear-gradient(180deg,rgba(86,52,111,.82),rgba(22,14,16,.96));
  font-family:var(--display);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.42);
}

.player-app-phone {
  position:absolute;
  z-index:5;
  top:var(--phone-y);
  left:var(--phone-x);
  display:block;
  width:clamp(30px,3.15vw,50px);
  aspect-ratio:368/800;
  padding:3px;
  overflow:hidden;
  border:2px solid var(--gold-light);
  border-radius:10px;
  background:#040304;
  box-shadow:0 0 0 1px rgba(86,52,111,.9),0 8px 18px rgba(0,0,0,.72);
  transform:translate(-50%,-50%) rotate(var(--phone-turn));
  transform-origin:center;
}
.player-app-phone::before {
  content:"";
  position:absolute;
  z-index:2;
  top:1px;
  left:50%;
  width:38%;
  height:4px;
  border-radius:0 0 4px 4px;
  background:#090809;
  transform:translateX(-50%);
}
.hero-player-cutout .player-app-phone img {
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:6px;
  filter:none;
}
.player-app-phone-landscape {
  width:clamp(76px,7.5vw,122px);
  aspect-ratio:800/368;
  border-radius:8px;
}
.player-app-phone-landscape::before { width:20%; height:3px; border-radius:0 0 3px 3px; }
.hero-player-cutout .player-app-phone-landscape img { border-radius:4px; }
.player-app-phone-screen {
  width:clamp(27px,2.35vw,36px);
  aspect-ratio:.7;
  padding:0;
  border:0;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(244,216,141,.6),0 2px 7px rgba(0,0,0,.5);
}
.player-app-phone-screen::before { display:none; }
.hero-player-cutout .player-app-phone-screen img { border-radius:2px; }

.hero-video-card {
  right:clamp(18px,3vw,48px);
  width:min(51vw,760px);
}
.hero-video-card video {
  object-fit:cover;
  object-position:center;
  filter:none;
}
.hero-copy {
  min-height:0;
  padding-right:clamp(30px,5vw,68px);
}

@media (max-width:1050px) {
  .hero-video-card { right:22px; width:47vw; }
  .hero-app-strip-inner { grid-template-columns:minmax(310px,1.55fr) repeat(2,minmax(132px,.6fr)); gap:28px; }
}

@media (max-width:800px) {
  .hero-app-strip {
    padding-inline:0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-color:var(--gold) rgba(15,10,11,.9);
  }
  .hero-app-strip-inner {
    width:max-content;
    margin:0;
    padding-inline:24px;
    grid-template-columns:310px 148px 148px;
    gap:24px;
    scroll-snap-type:x proximity;
  }
  .app-strip-device { scroll-snap-align:center; }
  .app-strip-device-finger .app-strip-device-shell,
  .app-strip-device-modes .app-strip-device-shell { width:140px; }
  .hero-video-card { right:auto; width:min(92vw,680px); }
  .hero-copy { min-height:0; padding:72px 30px 86px; }
  .player-app-phone { width:clamp(28px,5.5vw,44px); }
  .player-app-phone-landscape { width:clamp(70px,13vw,110px); }
  .player-app-phone-screen { width:clamp(24px,4vw,32px); }
}

@media (max-width:620px) {
  .hero-stage { top:70px; height:calc(100svh - 70px); }
  .hero-app-strip { padding:22px 12px 18px; overflow:hidden; }
  .hero-app-strip-inner { width:100%; grid-template-columns:minmax(0,1.55fr) repeat(2,minmax(0,.72fr)); gap:8px; padding-inline:0; }
  .app-strip-device-live .app-strip-device-shell { width:100%; padding:4px 10px; border-width:2px; border-radius:18px; }
  .app-strip-device-finger .app-strip-device-shell,
  .app-strip-device-modes .app-strip-device-shell { width:min(100%,70px); padding:4px 3px; border-width:2px; border-radius:17px; }
  .app-strip-device-finger .app-strip-device-shell img,
  .app-strip-device-modes .app-strip-device-shell img { border-radius:11px; }
  .app-strip-device figcaption { margin-top:8px; padding:5px 4px 4px; font-size:.5rem; letter-spacing:.02em; }
  .hero-player-1,
  .hero-player-3 { left:50%; right:auto; width:340vw; margin-left:-170vw; }
  .hero-player-2 .player-app-phone { top:64%; }
  .hero-video-card { width:calc(100% - 28px); }
  .hero-copy { padding:54px 22px 72px; }
}

/* Opening tableau: alternating bassists, then the live film and three app screens. */
.landing-hero { height:auto; min-height:0; overflow:hidden; }
main { overflow-x:clip; }
.landing-stage {
  position:relative;
  top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:calc(100svh - 76px);
  height:auto;
  padding:clamp(14px,1.6vw,22px) clamp(14px,3vw,42px) 44px;
  overflow:hidden;
  background:#080608;
}
.landing-stage::after {
  z-index:5;
  height:190px;
  background:linear-gradient(180deg,transparent,rgba(8,6,8,.65) 45%,#171214 100%);
}
.landing-stage .hero-depth-world { z-index:0; }
.landing-stage .hero-scene-backdrop {
  filter:blur(5px) brightness(.58);
  transform:scale(1.04);
}
.landing-stage .hero-stage-light { opacity:.46; }
.landing-stage .hero-track-lines { opacity:.16; }
.landing-stage .hero-edge-shade {
  background:
    linear-gradient(90deg,rgba(0,0,0,.6),transparent 30%,transparent 70%,rgba(0,0,0,.6)),
    linear-gradient(180deg,rgba(0,0,0,.2),transparent 25%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.92));
}
.landing-stage .hero-player-cutout {
  top:0;
  bottom:0;
  max-width:none;
  opacity:0;
  filter:blur(18px) brightness(.04) contrast(1.14);
  transform:translate3d(var(--player-enter-x),0,0) scale(1.04);
  transition:opacity .75s ease,transform 1.1s cubic-bezier(.18,.72,.16,1),filter .9s ease;
}
.landing-stage .hero-player-cutout.side-left { left:-12%; right:auto; --player-enter-x:-115vw; }
.landing-stage .hero-player-cutout.side-right { right:-10%; left:auto; --player-enter-x:115vw; }
.landing-stage .hero-player-1 { width:min(86vw,1260px); }
.landing-stage .hero-player-2 { width:min(62vw,900px); }
.landing-stage .hero-player-3 { width:min(84vw,1230px); }
.landing-stage .hero-player-4 { width:min(60vw,870px); }
.landing-stage .hero-player-5 { width:min(61vw,880px); }
.landing-stage .hero-player-cutout.hero-player-1,
.landing-stage .hero-player-cutout.hero-player-3 { left:-28%; right:auto; }
.landing-stage .hero-player-cutout.hero-player-2,
.landing-stage .hero-player-cutout.hero-player-4 { right:-23%; left:auto; }
.landing-stage .hero-player-cutout.hero-player-5 { left:-16%; right:auto; }
.landing-stage .hero-player-cutout.is-visible {
  opacity:.9;
  filter:blur(0) brightness(.72) contrast(1.13);
  transform:translate3d(0,0,0) scale(1);
}
.landing-stage.is-sequencing:not(.is-lit) .hero-player-cutout.is-visible {
  opacity:0;
  filter:blur(12px) brightness(.1) contrast(1.13);
  transform:translate3d(var(--player-enter-x),0,0) scale(1.04);
}
.landing-stage.is-settled .hero-player-cutout.is-visible {
  opacity:.83;
  filter:blur(.5px) brightness(.84) contrast(1.13);
}
.landing-stage .hero-player-cutout.hero-photo-panel {
  top:0;
  bottom:0;
  width:68%;
}
.landing-stage .hero-player-cutout.hero-photo-panel.hero-player-1 {
  left:0;
  right:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-player-cutout.hero-photo-panel.hero-player-2 {
  right:0;
  left:auto;
  -webkit-mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-photo-panel .player-photo {
  object-fit:cover;
  object-position:left center;
  filter:grayscale(1) contrast(1.1);
}
.landing-stage .hero-player-2.hero-photo-panel .player-photo { object-position:66% center; }
.landing-stage .hero-photo-panel .player-neon-edge,
.landing-stage .hero-photo-panel .player-app-phone,
.landing-stage .hero-photo-panel .fret-pattern { display:none; }
.landing-stage .hero-app-strip {
  position:relative;
  z-index:9;
  order:1;
  width:min(660px,100%);
  margin:0 auto;
  padding:0;
  overflow:visible;
  border:0;
  background:none;
  box-shadow:none;
}
.landing-stage .hero-app-strip-inner {
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  align-items:end;
  width:100%;
  max-width:none;
  gap:clamp(6px,2vw,20px);
  margin:0;
  padding:0;
}
.landing-stage .app-strip-device { min-width:0; }
.landing-stage .app-strip-device .app-strip-device-shell {
  box-sizing:content-box;
  width:min(100%,104px);
  aspect-ratio:1320/2868;
  padding:5px;
  border:3px solid var(--gold-light);
  border-radius:27px;
  background:#050405;
  transform:none;
}
.landing-stage .app-strip-device-live .app-strip-device-shell { width:min(100%,138px); }
.landing-stage .app-strip-device .app-strip-device-shell img {
  width:100%;
  height:100%;
  border-radius:18px;
  object-fit:cover;
}
.landing-stage .app-strip-device figcaption {
  max-width:155px;
  margin-top:9px;
  padding:6px 8px 5px;
  border-radius:2px;
  font-size:.62rem;
  line-height:1.15;
}
.landing-stage .hero-video-card {
  position:relative;
  z-index:10;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  order:2;
  width:min(560px,100%);
  margin:24px auto 0;
  border-radius:3px;
  transform:none;
}
.landing-stage .hero-video-card video { border-radius:2px; filter:none; }
.landing-stage .hero-intro {
  position:relative;
  z-index:9;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  order:3;
  width:min(680px,100%);
  margin:24px auto 0;
  padding:20px clamp(18px,3vw,30px);
  border-radius:3px;
  text-align:center;
  transform:none;
}
.landing-stage .hero-intro h1 { font-size:clamp(2.05rem,3.3vw,3.15rem); }
.landing-stage .hero-intro > p:not(.eyebrow) { margin:14px auto 18px; font-size:clamp(.92rem,1.2vw,1.05rem); }
.landing-stage .hero-scroll-cue {
  position:relative;
  z-index:9;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  order:4;
  margin:20px auto 0;
  color:var(--gold-light);
  transform:none;
}
.landing-stage .hero-journey-progress { display:none; }
.landing-stage.is-sequencing .hero-video-card {
  opacity:0;
  transform:translateY(42vh) scale(.94);
  transition:opacity .7s ease,transform 1.05s cubic-bezier(.18,.78,.16,1);
}
.landing-stage.is-sequencing.phase-video .hero-video-card { opacity:1; transform:translateY(0) scale(1); }
.landing-stage.is-sequencing .app-strip-device {
  opacity:0;
  transition:opacity .62s ease,transform .85s cubic-bezier(.18,.78,.16,1);
}
.landing-stage.is-sequencing .app-strip-device-finger { transform:translateX(-105vw); }
.landing-stage.is-sequencing .app-strip-device-live { transform:translateY(-105vh); }
.landing-stage.is-sequencing .app-strip-device-modes { transform:translateX(105vw); }
.landing-stage.is-sequencing.phase-phones .app-strip-device { opacity:1; transform:translate(0,0); }
.landing-stage.is-sequencing .hero-intro,
.landing-stage.is-sequencing .hero-scroll-cue { opacity:0; transition:opacity .75s ease; }
.landing-stage.is-sequencing.phase-phones .hero-intro,
.landing-stage.is-sequencing.phase-phones .hero-scroll-cue { opacity:1; }

@media (max-width:800px) {
  .landing-stage { min-height:calc(100svh - 70px); padding-top:18px; }
  .landing-stage .hero-player-cutout.hero-player-1,
  .landing-stage .hero-player-cutout.hero-player-3 { left:-80vw; width:230vw; }
  .landing-stage .hero-player-cutout.hero-player-2,
  .landing-stage .hero-player-cutout.hero-player-4 { right:-60vw; width:148vw; }
  .landing-stage .hero-player-cutout.hero-player-5 { left:-50vw; width:150vw; }
  .landing-stage .hero-app-strip { width:min(500px,100%); }
  .landing-stage .app-strip-device .app-strip-device-shell { width:min(100%,92px); padding:4px; border-width:2px; border-radius:23px; }
  .landing-stage .app-strip-device-live .app-strip-device-shell { width:min(100%,118px); }
  .landing-stage .app-strip-device .app-strip-device-shell img { border-radius:16px; }
  .landing-stage .hero-video-card { width:min(530px,100%); margin-top:18px; }
  .landing-stage .hero-intro { width:min(530px,100%); margin-top:18px; }
}
@media (max-width:620px) {
  .landing-stage { top:auto; height:auto; min-height:calc(100svh - 70px); padding:12px 11px 30px; }
  .landing-stage .hero-app-strip-inner { grid-template-columns:1fr 1.13fr 1fr; gap:5px; }
  .landing-stage .app-strip-device .app-strip-device-shell { width:min(100%,76px); padding:3px; border-radius:18px; }
  .landing-stage .app-strip-device-live .app-strip-device-shell { width:min(100%,96px); }
  .landing-stage .app-strip-device .app-strip-device-shell img { border-radius:12px; }
  .landing-stage .app-strip-device figcaption { margin-top:6px; padding:4px 3px; font-size:.48rem; }
  .landing-stage .hero-video-card { width:100%; margin-top:14px; padding:8px 8px 10px; }
  .landing-stage .hero-video-label { padding:2px 4px 5px; }
  .landing-stage .hero-intro { width:100%; margin-top:16px; padding:15px 16px; }
  .landing-stage .hero-intro h1 { font-size:clamp(1.9rem,9vw,2.7rem); }
  .landing-stage .hero-intro .eyebrow { font-size:.65rem; }
  .landing-stage .hero-intro > p:not(.eyebrow) { margin:10px auto 13px; font-size:.88rem; }
  .landing-stage .hero-scroll-cue { margin-top:14px; font-size:.62rem; }
  .landing-stage .hero-player-cutout.hero-player-1,
  .landing-stage .hero-player-cutout.hero-player-3 { left:-114vw; width:270vw; }
  .landing-stage .hero-player-cutout.hero-player-2,
  .landing-stage .hero-player-cutout.hero-player-4 { right:-65vw; width:170vw; }
  .landing-stage .hero-player-cutout.hero-player-5 { left:-55vw; width:175vw; }
}
@media (prefers-reduced-motion:reduce) {
  .landing-stage .hero-player-cutout,
  .landing-stage .hero-video-card,
  .landing-stage .app-strip-device,
  .landing-stage .hero-intro,
  .landing-stage .hero-scroll-cue { transition:none!important; }
  .landing-stage .hero-player-cutout { opacity:0!important; }
  .landing-stage .hero-player-1,
  .landing-stage .hero-player-2 { opacity:.5!important; filter:blur(0) brightness(.5)!important; transform:none!important; }
  .landing-stage .hero-video-card,
  .landing-stage .app-strip-device,
  .landing-stage .hero-intro,
  .landing-stage .hero-scroll-cue { opacity:1!important; transform:none!important; }
}

/* October landing-page polish: three matching phones, restrained branding and store links. */
html { scroll-padding-top:92px; }
.site-header { min-height:88px; }
.brand img {
  width:72px;
  height:72px;
  border:1px solid rgba(244,216,141,.72);
  border-radius:16px;
  filter:none;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
}
.brand span { font-size:clamp(.95rem,1.35vw,1.18rem); }
.app-store-badge,
.site-nav a.app-store-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:max-content;
  min-height:40px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  text-decoration:none;
}
.app-store-badge img {
  display:block;
  width:150px;
  height:auto;
  max-width:none;
}
.site-nav a.app-store-badge { margin-left:10px; }
.site-nav a.app-store-badge:hover,
.site-nav a.app-store-badge:focus-visible { background:none; }
.app-store-badge:focus-visible { outline:2px solid var(--gold-light); outline-offset:5px; }

.landing-stage { min-height:calc(100svh - 88px); }
.hero-side-emblems { position:absolute; inset:0; z-index:5; pointer-events:none; }
.hero-side-emblem {
  position:absolute;
  top:44%;
  width:clamp(120px,18vw,270px);
  height:auto;
  opacity:.2;
  filter:grayscale(1) brightness(1.65) contrast(1.2);
  mix-blend-mode:screen;
}
.hero-side-emblem-left { left:clamp(18px,3vw,58px); transform:rotate(-7deg); }
.hero-side-emblem-right { right:clamp(18px,3vw,58px); transform:rotate(7deg); }

.landing-stage .hero-app-strip { width:min(790px,100%); }
.landing-stage .hero-app-strip-inner {
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:clamp(8px,2vw,22px);
}
.landing-stage .app-strip-device { align-content:start; }
.landing-stage .app-strip-device .app-strip-device-shell,
.landing-stage .app-strip-device-live .app-strip-device-shell {
  position:relative;
  box-sizing:border-box;
  width:min(100%,clamp(132px,14vw,185px));
  aspect-ratio:78/163.4;
  padding:5px;
  overflow:hidden;
  border:2px solid #d7d8dd;
  border-radius:31px;
  background:linear-gradient(135deg,#818a97 0%,#f4f4f5 18%,#aeb7c3 43%,#fff 54%,#828c9d 78%,#d5dae2 100%);
  box-shadow:0 0 0 1px rgba(234,193,116,.78),0 18px 36px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.95);
  transform:none;
}
.landing-stage .app-strip-device .app-strip-device-shell::before {
  position:absolute;
  z-index:2;
  top:10px;
  left:50%;
  width:35%;
  height:10px;
  border-radius:999px;
  background:#020203;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  transform:translateX(-50%);
  content:"";
  pointer-events:none;
}
.landing-stage .app-strip-device .app-strip-device-shell img,
.landing-stage .app-strip-device-live .app-strip-device-shell img {
  display:block;
  width:100%;
  height:100%;
  border-radius:25px;
  object-fit:cover;
}
.landing-stage .app-strip-device figcaption {
  width:100%;
  max-width:210px;
  min-height:2.6em;
  margin:12px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  color:#f9e9c5;
  background:none;
  box-shadow:none;
  font-size:.75rem;
  line-height:1.3;
  letter-spacing:.025em;
  text-shadow:0 2px 7px #000;
}
.landing-stage .hero-video-card {
  border:0;
  box-shadow:0 28px 56px rgba(0,0,0,.58);
}
.landing-stage .hero-video-card video { border:1px solid rgba(244,216,141,.58); }
.hero-action-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; }
.section-store-cta { display:flex; justify-content:center; margin-top:28px; }
.live-practice .app-store-badge { margin-top:20px; }
.launch-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.footer-store-badge { grid-column:2; justify-self:end; }

@media (max-width:1050px) {
  .site-nav { top:88px; }
  .site-nav a.app-store-badge { margin:8px 14px; padding:0; }
  .launch-actions { grid-column:2; }
}
@media (max-width:800px) {
  .landing-stage { min-height:calc(100svh - 88px); }
  .landing-stage .hero-app-strip { width:min(620px,100%); }
  .landing-stage .app-strip-device .app-strip-device-shell,
  .landing-stage .app-strip-device-live .app-strip-device-shell { width:min(100%,clamp(106px,18vw,142px)); }
  .hero-side-emblem { width:clamp(110px,18vw,160px); opacity:.16; }
}
@media (max-width:620px) {
  html { scroll-padding-top:76px; }
  .site-header { min-height:76px; }
  .brand img { width:54px; height:54px; border-radius:12px; }
  .brand span { font-size:.88rem; }
  .site-nav { top:76px; }
  .landing-stage { min-height:calc(100svh - 76px); }
  .landing-stage .hero-app-strip { width:100%; }
  .landing-stage .hero-app-strip-inner { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .landing-stage .app-strip-device .app-strip-device-shell,
  .landing-stage .app-strip-device-live .app-strip-device-shell {
    width:min(100%,clamp(74px,26vw,112px));
    padding:3px;
    border-radius:20px;
  }
  .landing-stage .app-strip-device .app-strip-device-shell::before { top:6px; height:6px; }
  .landing-stage .app-strip-device .app-strip-device-shell img,
  .landing-stage .app-strip-device-live .app-strip-device-shell img { border-radius:16px; }
  .landing-stage .app-strip-device figcaption {
    max-width:112px;
    min-height:3.5em;
    margin-top:7px;
    padding:0;
    font-size:.65rem;
    line-height:1.25;
  }
  .hero-side-emblems { display:none; }
  .launch-actions { grid-column:1; align-items:center; }
  .footer-store-badge { grid-column:1; justify-self:center; }
}

/* Training screens are three open, equal columns rather than boxed cards. */
.feature-section .feature-trio {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,44px);
  align-items:start;
}
.feature-section .feature-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--cream);
  background:none;
  box-shadow:none;
  text-align:center;
}
.feature-section .feature-card::before { content:none; }
.feature-section .feature-card-phone {
  box-sizing:border-box;
  width:min(100%,228px);
  margin:0 auto 24px;
  padding:5px;
  border:2px solid #d5d7dc;
  border-radius:35px;
  background:linear-gradient(135deg,#777f8d,#f0f1f2 23%,#aeb6c1 53%,#e2e5e9 74%,#6d7683);
  box-shadow:0 0 0 1px rgba(222,186,111,.76),0 22px 44px rgba(0,0,0,.48);
}
.feature-section .feature-card-phone img {
  display:block;
  width:100%;
  height:auto;
  border-radius:27px;
}
.feature-section .feature-card h3 {
  margin:0 0 12px;
  font-size:clamp(1.25rem,2.1vw,1.85rem);
  line-height:1.16;
}
.feature-section .feature-card > p:last-child {
  max-width:32ch;
  margin:0 auto;
  color:var(--muted);
  line-height:1.55;
}
.feature-section .string-focus-feature {
  display:grid;
  grid-template-columns:minmax(0,228px) minmax(0,480px);
  align-items:center;
  justify-content:center;
  gap:clamp(28px,5vw,72px);
  max-width:860px;
  margin:clamp(42px,6vw,68px) auto 0;
  padding-top:clamp(30px,4vw,46px);
  border-top:1px solid rgba(218,182,112,.48);
}
.feature-section .string-focus-phone { width:100%; margin:0; }
.feature-section .string-focus-copy { text-align:left; }
.feature-section .string-focus-copy h3 {
  margin:0 0 15px;
  color:var(--cream);
  font-size:clamp(1.75rem,3vw,2.6rem);
  line-height:1.1;
}
.feature-section .string-focus-copy > p:last-child {
  max-width:48ch;
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Preserve the real landscape app capture inside a device-shaped frame. */
.live-practice-screen { width:100%; max-width:680px; justify-self:center; }
.live-practice-screen .iphone-18-pro-max {
  position:relative;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:163.4 / 78;
  padding:clamp(6px,.9vw,10px);
  overflow:hidden;
  border:2px solid #08090b;
  border-radius:clamp(24px,3.8vw,44px);
  background:linear-gradient(135deg,#060608 0%,#25272c 18%,#08090b 47%,#303138 72%,#050506 100%);
  box-shadow:0 0 0 1px rgba(77,78,82,.9),0 28px 70px rgba(0,0,0,.64),inset 0 1px 0 rgba(145,148,155,.22);
}
.live-practice-screen .iphone-18-pro-max::before {
  content:"";
  position:absolute;
  z-index:2;
  top:50%;
  left:clamp(8px,1.2vw,15px);
  width:clamp(7px,.9vw,11px);
  height:19%;
  border-radius:999px;
  background:#030304;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  transform:translateY(-50%);
  pointer-events:none;
}
.live-practice-screen .iphone-18-pro-max img {
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  border:2px solid #050506;
  border-radius:clamp(17px,3vw,35px);
  object-fit:cover;
}
.live-practice-screen figcaption { margin-top:10px; }
/* Keep the purple/gold divider below this section, without a second rule above it. */
.live-practice::after {
  background:
    linear-gradient(90deg,transparent 3%,var(--gold-dark) 12%,var(--gold-light) 50%,var(--gold-dark) 88%,transparent 97%) center calc(100% - 46px) / 100% 2px no-repeat,
    linear-gradient(90deg,transparent 3%,var(--amethyst) 18%,var(--amethyst-light) 50%,var(--amethyst) 82%,transparent 97%) center calc(100% - 52px) / 100% 1px no-repeat;
}

@media (max-width:800px) {
  .feature-section .feature-trio { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .feature-section .feature-card-phone { width:min(100%,178px); }
  .feature-section .feature-card h3,
  .feature-section .feature-card p { grid-column:auto; }
}
@media (max-width:620px) {
  .feature-section .feature-trio { grid-template-columns:1fr; gap:48px; }
  .feature-section .feature-card-phone { width:min(64vw,228px); }
  .feature-section .feature-card h3 { font-size:1.6rem; }
  .feature-section .string-focus-feature { grid-template-columns:1fr; gap:24px; max-width:480px; }
  .feature-section .string-focus-phone { width:min(64vw,228px); justify-self:center; }
  .feature-section .string-focus-copy { text-align:center; }
  .feature-section .string-focus-copy > p:last-child { margin:0 auto; }
}

/* The edited PSD exports contain the aligned pattern dots and logo. */
.situation-card .situation-art {
  position:relative;
  width:100%;
  overflow:hidden;
}
.situation-card-wide .situation-art {
  position:absolute;
  inset:0;
  height:100%;
}
.situation-card-lifestyle .situation-art { aspect-ratio:3 / 2; }
.situation-card .situation-art .situation-photo {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  filter:none;
}

/* Authentic note/finger app screens with illustrative in-use hand imagery. */
.camera-inner {
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,62px);
}
.camera-copy h2 { max-width:14ch; }
.camera-copy p.camera-composite-note {
  margin-top:24px;
  color:var(--gold-light);
  font-size:.78rem;
  letter-spacing:.035em;
}
.camera-demo-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.5vw,34px);
  align-items:start;
}
.camera-demo { display:grid; justify-items:center; min-width:0; margin:0; text-align:center; }
.camera-device {
  position:relative;
  box-sizing:border-box;
  width:min(100%,clamp(185px,18vw,235px));
  aspect-ratio:78 / 163.4;
  overflow:hidden;
  border:2px solid #cbd0d8;
  border-radius:35px;
  background:linear-gradient(145deg,#7d8795,#f3f4f6 22%,#9da7b4 52%,#e5e8ed 76%,#737d8b);
  box-shadow:0 0 0 1px rgba(224,188,117,.75),0 22px 48px rgba(0,0,0,.56);
}
.camera-device::after {
  position:absolute;
  z-index:4;
  top:10px;
  left:50%;
  width:35%;
  height:11px;
  border-radius:999px;
  background:#030304;
  transform:translateX(-50%);
  content:"";
  pointer-events:none;
}
.camera-device .camera-app-shot {
  position:absolute;
  inset:5px;
  display:block;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  border-radius:28px;
  object-fit:cover;
}
.camera-device .camera-note-hand {
  position:absolute;
  z-index:2;
  top:33%;
  left:0;
  display:block;
  width:145%;
  height:auto;
  transform:rotate(-8deg);
  filter:drop-shadow(-3px 5px 7px rgba(0,0,0,.65));
  pointer-events:none;
}
.camera-device .camera-hand-feed {
  position:absolute;
  z-index:2;
  top:27.1%;
  left:13.3%;
  display:block;
  width:73.4%;
  height:33.3%;
  border-radius:10%;
  object-fit:cover;
  pointer-events:none;
}
.camera-demo figcaption { max-width:280px; margin:16px 0 0; }
.camera-demo figcaption strong {
  display:block;
  margin-bottom:6px;
  color:var(--gold-light);
  font-family:var(--display);
  font-size:1rem;
  line-height:1.2;
}
.camera-demo figcaption span { display:block; color:var(--muted); font-size:.87rem; line-height:1.5; }
@media (max-width:1050px) {
  .camera-inner { grid-template-columns:1fr; }
  .camera-copy { max-width:720px; margin-inline:auto; text-align:center; }
  .camera-copy h2 { max-width:none; }
  .camera-demo-grid { max-width:660px; margin-inline:auto; }
}
@media (max-width:620px) {
  .camera-demo-grid { gap:12px; }
  .camera-device { width:min(100%,175px); border-radius:26px; }
  .camera-device .camera-app-shot { border-radius:21px; }
  .camera-device::after { top:7px; height:8px; }
  .camera-demo figcaption strong { font-size:.84rem; }
  .camera-demo figcaption span { font-size:.75rem; }
}
@media (max-width:480px) {
  .camera-demo-grid { grid-template-columns:1fr; gap:38px; }
  .camera-device { width:min(100%,220px); }
  .camera-demo figcaption strong { font-size:1rem; }
  .camera-demo figcaption span { font-size:.85rem; }
}

/* October revision: one consistent player crop, clean iPhone rails, and actual footage
   illustrating the two otherwise-empty simulator camera windows. */
.landing-stage .hero-player-cutout.hero-player-1,
.landing-stage .hero-player-cutout.hero-player-2,
.landing-stage .hero-player-cutout.hero-player-3,
.landing-stage .hero-player-cutout.hero-player-4,
.landing-stage .hero-player-cutout.hero-player-5 {
  top:0;
  bottom:0;
  width:68vw;
}
.landing-stage .hero-player-cutout.hero-player-3,
.landing-stage .hero-player-cutout.hero-player-5 { left:0; right:auto; }
.landing-stage .hero-player-cutout.hero-player-4 { right:0; left:auto; }
.landing-stage .hero-player-cutout.hero-player-3,
.landing-stage .hero-player-cutout.hero-player-5 {
  -webkit-mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-player-cutout.hero-player-4 {
  -webkit-mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-player-cutout.hero-player-3 .player-photo,
.landing-stage .hero-player-cutout.hero-player-4 .player-photo,
.landing-stage .hero-player-cutout.hero-player-5 .player-photo {
  object-fit:cover;
  object-position:center top;
  transform:scale(1.18);
  transform-origin:right top;
}
.landing-stage .hero-player-cutout.hero-player-3 .player-photo { object-position:57% center; }
.hero-side-emblem {
  top:36vh;
  opacity:.43;
  filter:grayscale(1) brightness(1.82) contrast(1.22);
}
.hero-side-emblem-left { transform:translateY(-50%) rotate(-7deg); }
.hero-side-emblem-right { transform:translateY(-50%) rotate(7deg); }

.landing-stage .app-strip-device .app-strip-device-shell,
.landing-stage .app-strip-device-live .app-strip-device-shell {
  padding:4px;
  border:1px solid #86878d;
  background:#0a0a0d;
  box-shadow:0 0 0 2px #151518,0 16px 30px rgba(0,0,0,.56),inset 0 0 0 1px rgba(255,255,255,.15);
}
.landing-stage .app-strip-device .app-strip-device-shell img,
.landing-stage .app-strip-device-live .app-strip-device-shell img { border-radius:25px; }
.landing-stage .app-strip-device .app-strip-device-shell::before {
  top:7px;
  height:8px;
  width:31%;
  box-shadow:none;
}
.landing-stage .app-strip-device-modes .app-strip-device-shell::before { display:none; }

.hero-copy {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);
  gap:clamp(24px,5vw,76px);
  align-items:center;
  min-height:0;
  padding:clamp(32px,5vw,68px);
}
.hero-copy .about-copy { min-width:0; }
.about-modes-phone { display:grid; justify-items:center; min-width:0; margin:0; }
.about-modes-phone-shell {
  box-sizing:border-box;
  width:min(100%,258px);
  aspect-ratio:78 / 163.4;
  padding:5px;
  overflow:hidden;
  border:1px solid #85868c;
  border-radius:36px;
  background:#09090c;
  box-shadow:0 0 0 2px #18171a,0 24px 48px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.15);
}
.about-modes-phone-shell img { display:block; width:100%; height:100%; border-radius:29px; object-fit:cover; }
.about-modes-phone figcaption { margin-top:16px; color:var(--gold-light); font-family:var(--display); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; }

.camera-device {
  border:1px solid #85868c;
  background:#09090c;
  box-shadow:0 0 0 2px #18171a,0 22px 48px rgba(0,0,0,.56),inset 0 0 0 1px rgba(255,255,255,.15);
}
.camera-device .camera-app-shot { z-index:1; }
.camera-device::after { top:7px; height:8px; width:31%; box-shadow:none; }
.camera-feed-window {
  position:absolute;
  z-index:2;
  left:5px;
  display:block;
  width:calc(100% - 10px);
  overflow:hidden;
  background:#171416;
  pointer-events:none;
}
.camera-feed-upper { top:18.5%; height:5.7%; }
.camera-feed-lower { top:59%; height:31.8%; }
.camera-feed-window img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) brightness(.9) contrast(1.04);
}
.camera-feed-upper img { object-position:center 70%; }
.camera-feed-lower img { object-position:center 50%; }
.camera-note-device.is-playing .camera-feed-window img { animation:camera-feed-drift 7.2s ease-in-out infinite; }
@keyframes camera-feed-drift {
  0%,100% { transform:scale(1.01) translateX(0); }
  50% { transform:scale(1.045) translateX(-1.2%); }
}
/* The pink target is part of the original capture. Borrow an adjacent clean
   patch of the same string and wood so it can disappear between prompts. */
.camera-note-eraser {
  position:absolute;
  z-index:3;
  left:20.5%;
  top:38.45%;
  width:11.3%;
  height:4.55%;
  background-image:url("assets/app-ar-note-match-authentic.png");
  background-size:885% 2198%;
  background-position:54.8% 40.25%;
  pointer-events:none;
}
.camera-target {
  position:absolute;
  z-index:4;
  display:grid;
  place-items:center;
  width:8.6%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px solid;
  color:#fff;
  font-family:var(--body);
  font-size:clamp(11px,1.1vw,16px);
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.camera-target-root {
  left:26%;
  top:41%;
  border-color:#ff3beb;
  background:rgba(255,59,235,.3);
  box-shadow:0 0 6px rgba(255,59,235,.72);
  opacity:1;
}
.camera-target-four,
.camera-target-next {
  border-radius:50%;
  border-color:#73ff8a;
  background:rgba(115,255,138,.28);
  box-shadow:0 0 6px rgba(115,255,138,.7);
  opacity:0;
}
.camera-target-four { left:68%; top:41%; }
.camera-target-next { left:26%; top:36.15%; }
.camera-note-device.is-playing .camera-target-root { animation:camera-target-one 7.2s linear infinite; }
.camera-note-device.is-playing .camera-target-four { animation:camera-target-four 7.2s linear infinite; }
.camera-note-device.is-playing .camera-target-next { animation:camera-target-next 7.2s linear infinite; }
@keyframes camera-target-one {
  0%,28% { opacity:1; }
  32%,96% { opacity:0; }
  100% { opacity:1; }
}
@keyframes camera-target-four {
  0%,32% { opacity:0; }
  36%,61% { opacity:1; }
  65%,100% { opacity:0; }
}
@keyframes camera-target-next {
  0%,65% { opacity:0; }
  69%,94% { opacity:1; }
  98%,100% { opacity:0; }
}
.camera-finger-device .camera-app-shot { z-index:2; }

@media (prefers-reduced-motion:reduce) {
  .camera-note-device .camera-feed-window img { animation:none!important; transform:none!important; }
  .camera-note-device .camera-target-root { animation:none!important; opacity:1!important; }
  .camera-note-device .camera-target-four,
  .camera-note-device .camera-target-next { animation:none!important; opacity:0!important; }
}

@media (max-width:800px) {
  .hero-copy { grid-template-columns:1fr; padding:42px 32px; }
  .about-modes-phone-shell { width:min(100%,235px); }
  .camera-copy { order:0; }
  .camera-demo-grid { order:1; }
  .landing-stage .hero-player-cutout.hero-player-3,
  .landing-stage .hero-player-cutout.hero-player-4,
  .landing-stage .hero-player-cutout.hero-player-5 { width:68vw; }
  .hero-side-emblem { opacity:.29; }
}
@media (max-width:620px) {
  .hero-copy { width:calc(100% - 24px); padding:30px 22px; }
  .landing-stage .app-strip-device .app-strip-device-shell,
  .landing-stage .app-strip-device-live .app-strip-device-shell { padding:3px; }
  .landing-stage .app-strip-device .app-strip-device-shell img,
  .landing-stage .app-strip-device-live .app-strip-device-shell img { border-radius:16px; }
  .camera-device::after { top:6px; height:6px; }
}

/* The condensed display typography and fixed, centered-logo header. */
h1, h2, h3,
h1 em, h2 em,
.feature-card h3,
.situation-card strong,
.practice-steps strong,
.camera-demo figcaption strong,
.about-modes-phone figcaption {
  font-family:var(--heading);
  font-weight:400;
}
.brand { font-family:var(--heading); font-weight:400; }
.brand em { font-style:normal; }
.site-header-fixed .site-nav a:not(.app-store-badge) {
  font-family:var(--heading);
  font-size:1rem;
  font-weight:400;
  letter-spacing:.045em;
}
.home-shell { padding-top:88px; }
.site-header-fixed {
  position:fixed;
  top:0;
  right:0;
  left:0;
  width:100%;
  min-height:88px;
}
.site-header-fixed .brand,
.site-header-fixed .menu-toggle,
.site-header-fixed .site-nav { position:relative; z-index:2; }
.header-center-logo {
  position:absolute;
  z-index:1;
  top:4px;
  left:50%;
  display:block;
  width:clamp(100px,8.5vw,128px);
  aspect-ratio:1;
  transform:translateX(-50%);
}
.header-center-logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid rgba(244,216,141,.82);
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.6);
}
.landing-stage .hero-headline {
  position:relative;
  z-index:10;
  order:2;
  width:min(850px,100%);
  margin:10px auto 0;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
.bass-music-start {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  min-height:43px;
  margin:22px auto 20px;
  padding:8px 19px;
  border:2px solid #fff;
  border-radius:999px;
  background:#007aff;
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff75,0 8px 22px #0055bb99,0 8px 24px #000c;
  font:400 clamp(1.2rem,1.7vw,1.55rem)/1 "Bebas Neue",sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
}
.bass-music-start:hover { background:#0a84ff; }
.bass-music-start:focus-visible { outline:3px solid #fff8da; outline-offset:4px; }
.bass-music-start[hidden] { display:none!important; }
.bass-music-start svg { width:20px; height:20px; overflow:visible; }
.bass-music-start svg path { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.bass-music-start svg path:first-child { fill:currentColor; stroke:none; }
.bass-music-start-flying { position:fixed!important; z-index:120!important; margin:0!important; pointer-events:none; }
.landing-stage .hero-headline h1,
.landing-stage .hero-headline p {
  display:inline-block;
  width:max-content;
  max-width:none;
  margin:0;
  font-family:var(--heading);
  font-weight:400;
  line-height:.96;
}
.landing-stage .hero-headline h1 {
  color:#fff8ed;
  font-size:clamp(2.4rem,4.6vw,4.5rem);
  letter-spacing:.014em;
  text-shadow:0 2px 0 #40302c,0 5px 14px rgba(0,0,0,.88);
}
.landing-stage .hero-headline p {
  display:block;
  margin-inline:auto;
  color:#f5eadd;
  font-size:clamp(1.1rem,2.4vw,2.3rem);
  letter-spacing:.016em;
  text-shadow:0 2px 9px rgba(0,0,0,.9);
}
.landing-stage .hero-video-card { order:3; margin-top:9px; }
.landing-stage .hero-intro { order:4; }
.landing-stage .hero-scroll-cue { order:5; }
.landing-stage.is-sequencing .hero-headline {
  opacity:0;
  transition:opacity .75s ease;
}
.landing-stage.is-sequencing.phase-phones .hero-headline { opacity:1; }
@media (max-width:1450px) {
  .site-header-fixed .menu-toggle {
    display:grid;
    gap:5px;
    padding:10px;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .site-header-fixed .site-nav {
    position:absolute;
    z-index:3;
    top:100%;
    right:16px;
    left:16px;
    display:none;
    align-items:stretch;
    padding:12px;
    border:1px solid var(--gold);
    border-radius:8px;
    background:rgba(24,18,22,.98);
    box-shadow:var(--shadow);
  }
  .site-header-fixed .site-nav.is-open { display:grid; }
  .site-header-fixed .site-nav a { padding:12px 14px; }
}
@media (max-width:620px) {
  .home-shell { padding-top:76px; }
  .site-header-fixed { min-height:76px; }
  .site-header-fixed .brand span { display:none; }
  .header-center-logo { top:7px; width:62px; }
  .landing-stage .hero-headline { margin-top:7px; }
  .bass-music-start { min-height:38px; margin:16px auto 17px; padding:7px 14px; font-size:1.2rem; }
  .landing-stage .hero-headline h1 { font-size:2.4rem; }
  .landing-stage .hero-headline p { font-size:1.2rem; }
  .landing-stage .hero-video-card { margin-top:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .landing-stage .hero-headline { opacity:1!important; transition:none!important; }
}

/* Keep the phone trio twice the original size without hiding the opening portraits. */
.landing-stage .hero-app-strip { width:min(790px,100%); }
.landing-stage .hero-app-strip-inner { gap:clamp(14px,2vw,38px); }
.landing-stage .app-strip-device .app-strip-device-shell,
.landing-stage .app-strip-device-live .app-strip-device-shell {
  width:min(100%,clamp(180px,19vw,240px));
  padding:6px;
  border-radius:40px;
}
.landing-stage .app-strip-device .app-strip-device-shell img,
.landing-stage .app-strip-device-live .app-strip-device-shell img { border-radius:34px; }
.landing-stage .app-strip-device .app-strip-device-shell::before {
  top:11px;
  height:12px;
}
.landing-stage .app-strip-device figcaption {
  max-width:370px;
  margin-top:14px;
  font-size:clamp(.82rem,1.1vw,1.05rem);
}
.landing-stage .hero-edge-shade {
  background:
    radial-gradient(ellipse 34% 66% at 0% 43%,rgba(111,58,150,.3),transparent 78%),
    radial-gradient(ellipse 35% 66% at 100% 48%,rgba(113,60,157,.27),transparent 80%),
    linear-gradient(180deg,rgba(17,8,28,.2),transparent 30%,transparent 58%,rgba(49,23,67,.46) 84%,rgba(8,4,14,.9)),
    linear-gradient(90deg,rgba(0,0,0,.61),transparent 24%,transparent 76%,rgba(0,0,0,.61));
}
.landing-stage::after {
  background:linear-gradient(180deg,transparent,rgba(45,22,62,.42) 46%,#171019 100%);
}
@media (max-width:800px) {
  .landing-stage .hero-app-strip { width:min(760px,100%); }
  .landing-stage .app-strip-device .app-strip-device-shell,
  .landing-stage .app-strip-device-live .app-strip-device-shell {
    width:min(100%,clamp(165px,29vw,240px));
  }
}
@media (max-width:620px) {
  .landing-stage .hero-app-strip {
    width:calc(100% + 22px);
    margin-inline:-11px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .landing-stage .hero-app-strip::-webkit-scrollbar { display:none; }
  .landing-stage .hero-app-strip-inner {
    display:flex;
    width:max-content;
    gap:16px;
    padding-inline:calc((100vw - min(56vw,230px)) / 2);
  }
  .landing-stage .app-strip-device {
    flex:0 0 min(56vw,230px);
    scroll-snap-align:center;
  }
  .landing-stage .app-strip-device .app-strip-device-shell,
  .landing-stage .app-strip-device-live .app-strip-device-shell {
    width:100%;
    padding:4px;
    border-radius:29px;
  }
  .landing-stage .app-strip-device .app-strip-device-shell img,
  .landing-stage .app-strip-device-live .app-strip-device-shell img { border-radius:24px; }
  .landing-stage .app-strip-device .app-strip-device-shell::before { top:8px; height:8px; }
  .landing-stage .app-strip-device figcaption {
    max-width:none;
    margin-top:10px;
    font-size:.76rem;
  }
  .landing-stage .hero-edge-shade {
    background:
      radial-gradient(ellipse 27% 60% at 0% 45%,rgba(111,58,150,.22),transparent 83%),
      radial-gradient(ellipse 27% 60% at 100% 45%,rgba(113,60,157,.22),transparent 83%),
      linear-gradient(180deg,rgba(17,8,28,.12),transparent 55%,rgba(49,23,67,.4) 88%,rgba(8,4,14,.9));
  }
}

/* A half-offscreen bass, scaled against the portrait app previews. */
.bass-music-dock {
  position:fixed;
  z-index:95;
  top:calc(88px + clamp(60px,7vw,110px));
  left:0;
  width:clamp(100px,10.7vw,164px);
  height:clamp(300px,32vw,490px);
  overflow:visible;
  pointer-events:none;
  transform:translateX(-55%);
}
.bass-music-art {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  transform:scaleX(-1);
  filter:drop-shadow(2px 1px 4px rgba(0,0,0,.7));
  pointer-events:none;
}
.bass-music-controls { position:absolute; inset:0; pointer-events:none; }
.bass-music-volume {
  position:absolute;
  z-index:2;
  top:15.7%;
  left:68%;
  width:28px;
  height:35.5%;
  pointer-events:none;
  transform:translateX(-50%);
  --volume-position:50%;
}
.bass-music-volume-track {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:5px;
  border:1px solid #fff2c5;
  border-radius:5px;
  background:linear-gradient(90deg,#d8a94e 0%,#fff8d8 45%,#f5d991 100%);
  box-shadow:0 0 0 1px rgba(78,42,13,.9),0 0 7px rgba(255,232,165,.72);
  transform:translateX(-50%);
}
.bass-music-volume-thumb {
  position:absolute;
  top:var(--volume-position);
  left:50%;
  width:18px;
  height:18px;
  border:2px solid #ffe9af;
  border-radius:50%;
  background:radial-gradient(circle at 32% 27%,#fff4bf,#e2b54c 48%,#a76a1e 87%);
  box-shadow:0 1px 6px #000,inset 0 0 0 1px #8a551c,0 0 4px rgba(255,219,126,.7);
  transform:translate(-50%,-50%);
}
.bass-music-volume-thumb::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#df2234;
  box-shadow:0 0 0 1px #7d101b;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.bass-music-volume input {
  position:absolute;
  z-index:1;
  top:-8px;
  left:0;
  width:100%;
  height:calc(100% + 16px);
  margin:0;
  opacity:0;
  pointer-events:auto;
  cursor:ns-resize;
  writing-mode:vertical-lr;
  direction:rtl;
}
.bass-music-volume:focus-within .bass-music-volume-thumb { outline:2px solid #fff5c3; outline-offset:3px; }
.bass-music-label {
  position:absolute;
  top:57%;
  left:75%;
  color:#fff8e9;
  font:400 clamp(15px,1.35vw,21px)/1 "Bebas Neue",sans-serif;
  letter-spacing:.06em;
  text-shadow:0 2px 4px #000,0 0 8px #000;
  text-transform:uppercase;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:translate(-50%,-50%) rotate(180deg);
}
.bass-music-dock button {
  position:absolute;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:2px solid #d9b977;
  border-radius:50%;
  background:linear-gradient(160deg,#3c2b44,#140d20);
  color:#fff4d8;
  box-shadow:inset 0 1px 0 rgba(255,240,205,.45),0 2px 7px rgba(0,0,0,.9);
  font:700 25px/1 Arial,sans-serif;
  cursor:pointer;
  pointer-events:auto;
  transform:translate(-50%,-50%);
}
.bass-music-dock button:hover { filter:brightness(1.2); }
.bass-music-dock button:focus-visible { outline:3px solid #fff5c3; outline-offset:3px; }
.bass-music-dock .bass-music-play,
.bass-music-dock .bass-music-stop {
  width:30px;
  height:30px;
  border:2px solid #c89c5d;
  background:radial-gradient(circle at 35% 28%,#6b5135 0%,#35251b 48%,#130e0d 86%);
  color:#f5d7a2;
  box-shadow:inset 0 0 0 2px #6b4726,inset 0 2px 3px #ffe8ae55,0 2px 7px #000d;
}
.bass-music-dock .bass-music-play { top:82%; left:84%; }
.bass-music-dock .bass-music-stop { top:91%; left:87%; }
.bass-music-play-icon {
  display:block;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:9px solid currentColor;
  transform:translateX(1.5px);
}
.bass-music-stop-icon {
  display:block;
  width:9px;
  height:9px;
  background:currentColor;
  transform:translateX(1px);
}
.bass-music-dock[data-state="on"] .bass-music-play { box-shadow:inset 0 0 0 2px #6b4726,inset 0 2px 3px #ffe8ae55,0 0 0 2px #f2cd80,0 2px 7px #000d; }
.bass-music-dock .bass-music-volume-preset {
  z-index:3;
  left:calc(68% + 30px);
  width:22px;
  height:22px;
  border:1px solid #ecd393;
  background:rgba(23,14,28,.88);
  color:#ffe8a9;
  box-shadow:0 1px 5px rgba(0,0,0,.8),inset 0 0 0 1px rgba(91,57,22,.8);
}
.bass-music-volume-preset svg {
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7;
}
.bass-music-dock .bass-music-volume-full { top:15.7%; }
.bass-music-dock .bass-music-volume-mute { top:51.2%; }
.bass-music-dock[data-volume="0"] .bass-music-volume-mute,
.bass-music-dock[data-volume="100"] .bass-music-volume-full {
  background:#edc76f;
  color:#241525;
}
@media (max-width:800px) {
  .bass-music-dock {
    top:calc(76px + clamp(46px,7vw,65px));
    width:clamp(80px,14vw,117px);
    height:clamp(240px,42vw,350px);
  }
}
@media (max-width:620px) {
  .bass-music-dock { top:auto; bottom:18px; transform:translateX(-35%); }
  .bass-music-label { top:56%; left:72%; font-size:15px; }
  .bass-music-volume { width:24px; }
  .bass-music-volume-thumb { width:16px; height:16px; }
  .bass-music-dock .bass-music-volume-preset { left:calc(68% + 27px); width:21px; height:21px; }
  .bass-music-dock .bass-music-play,
  .bass-music-dock .bass-music-stop { width:24px; height:24px; border-width:1px; }
  .bass-music-dock .bass-music-play { top:81%; left:84%; }
  .bass-music-dock .bass-music-stop { top:92%; left:87%; }
  .bass-music-play-icon { border-top-width:4px; border-bottom-width:4px; border-left-width:7px; }
  .bass-music-stop-icon { width:7px; height:7px; }
}

/* Landscape, ascending note demo and film share one centered hero row. */
.landing-stage .hero-media-row {
  position:relative;
  z-index:10;
  order:3;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(14px,2vw,24px);
  width:min(1160px,100%);
  margin:18px auto 0;
  scroll-margin-top:170px;
}
.landing-stage .hero-media-row .hero-video-card,
.landing-stage .hero-media-row .hero-note-card {
  box-sizing:border-box;
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  height:100%;
  margin:0;
  padding:10px 10px 14px;
  border:0;
  border-radius:3px;
  background:radial-gradient(circle at 100% 0,rgba(155,111,192,.26),transparent 40%),linear-gradient(145deg,rgba(45,29,30,.96),rgba(12,9,10,.96));
  box-shadow:0 28px 56px rgba(0,0,0,.58);
  transform:none;
}
.landing-stage .hero-media-row .hero-note-card { justify-content:flex-start; }
.landing-stage .hero-media-row .hero-note-card .hero-video-caption { margin-top:auto; }
.landscape-note-iphone {
  position:relative;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:2622 / 1206;
  padding:clamp(5px,.7vw,8px);
  border:2px solid #08090b;
  border-radius:clamp(22px,3vw,40px);
  background:linear-gradient(135deg,#050507,#3a3a40 23%,#09090b 50%,#27272c 77%,#050506);
  box-shadow:0 0 0 1px rgba(114,114,122,.92),0 12px 26px #0009,inset 0 1px 0 rgba(255,255,255,.24);
}
.landscape-note-iphone::before {
  position:absolute;
  z-index:5;
  top:50%;
  left:clamp(7px,.9vw,12px);
  width:clamp(5px,.6vw,8px);
  height:16%;
  border-radius:999px;
  background:#020203;
  box-shadow:0 0 0 1px #ffffff22;
  transform:translateY(-50%);
  content:"";
  pointer-events:none;
}
.landscape-note-screen {
  height:100%;
  overflow:hidden;
  border:1px solid #020203;
  border-radius:clamp(15px,2.4vw,31px);
  background:#090708;
}
.landscape-note-screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#050505;
}
.landing-stage.is-sequencing .hero-note-card {
  opacity:0;
  transform:translateY(42vh) scale(.94);
  transition:opacity .7s ease,transform 1.05s cubic-bezier(.18,.78,.16,1);
}
.landing-stage.is-sequencing.phase-video .hero-note-card { opacity:1; transform:translateY(0) scale(1); }
.landing-stage.is-sequencing .hero-media-row .hero-video-card { transform:translateY(42vh) scale(.94); }
.landing-stage.is-sequencing.phase-video .hero-media-row .hero-video-card { transform:translateY(0) scale(1); }

/* One quiet rule connects the finger demo and the instructor-like feedback. */
.camera-band::before { -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 108px,#000 100%); }
.camera-band::after {
  position:absolute;
  z-index:2;
  right:18px;
  bottom:0;
  left:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light) 25%,var(--amethyst-light) 75%,transparent);
  content:"";
  pointer-events:none;
}
.camera-inner { padding-bottom:44px; }
.camera-demo-grid { grid-template-columns:1fr; justify-items:center; }
.live-practice { padding-top:44px; }
.live-practice::before { -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 108px),transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 108px),transparent 100%); }

@media (max-width:800px) {
  .landing-stage .hero-media-row { grid-template-columns:minmax(0,1fr); width:min(560px,100%); margin-top:16px; }
  .landing-stage .hero-media-row .hero-video-card,
  .landing-stage .hero-media-row .hero-note-card { width:100%; margin:0; }
  .camera-inner { padding-bottom:36px; }
  .live-practice { padding-top:36px; }
}
@media (prefers-reduced-motion:reduce) {
  .landing-stage .hero-note-card { opacity:1!important; transform:none!important; transition:none!important; }
}

/* A shallow, full-width classroom banner follows Pattern Focus Training. */
.situation-card.situation-card-classroom {
  --classroom-height:260px;
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:0;
}
.classroom-art-viewport {
  position:relative;
  flex:none;
  height:var(--classroom-height);
  overflow:hidden;
}
.situation-card-classroom .situation-art {
  position:absolute;
  top:0;
  right:auto;
  bottom:auto;
  left:50%;
  width:max(100%,calc(var(--classroom-height) * 3));
  height:auto;
  aspect-ratio:3 / 1;
  transform:translateX(-50%);
}
.situation-card-classroom .situation-art .situation-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.89);
}
.classroom-projection {
  position:absolute;
  z-index:1;
  top:3%;
  left:84.1%;
  width:9.5%;
  height:62%;
  overflow:hidden;
  background:#eee;
  box-shadow:0 0 12px rgba(255,255,255,.32);
}
.situation-card-classroom .classroom-projection img {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  filter:grayscale(1) brightness(1.2) contrast(.78);
  opacity:.88;
}
.situation-card-classroom figcaption {
  position:relative;
  inset:auto;
  z-index:2;
  flex:none;
  min-height:64px;
  padding:15px 24px;
  background:linear-gradient(90deg,#171218,#2a1b2f);
}
@media (max-width:800px) {
  .situation-card.situation-card-classroom { --classroom-height:210px; }
}
@media (max-width:620px) {
  .situation-card.situation-card-classroom { --classroom-height:175px; }
  .situation-card-classroom .situation-art { left:calc(50% - 38px); }
  .situation-card-classroom figcaption { gap:4px; padding:13px 14px; }
  .situation-card-classroom strong { font-size:1rem; }
  .situation-card-classroom span { font-size:.78rem; line-height:1.3; }
}

/* Five complete photographic scenes dissolve behind the landing content. */
.landing-stage .hero-scene-track {
  bottom:auto;
  height:100svh;
  isolation:isolate;
}
.landing-stage .hero-scene {
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .95s ease-in-out;
}
.landing-stage.is-lit .hero-scene.is-visible { opacity:1; }
.landing-stage .hero-scene > img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(1) contrast(1.1) brightness(.78);
}
.landing-stage .hero-scene-duo .hero-duo-photo { width:68%; }
.landing-stage .hero-scene-duo .hero-fret-markers { pointer-events:none; }
.landing-stage .hero-scene-duo .hero-duo-photo {
  filter:grayscale(1) contrast(1.1) brightness(1.02);
}
.landing-stage .hero-scene-duo .hero-duo-left {
  left:0;
  right:auto;
  object-position:50% top;
  filter:grayscale(1) contrast(1.1) brightness(1.3);
  -webkit-mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-scene-duo .hero-duo-right {
  right:0;
  left:auto;
  object-position:40% top;
  -webkit-mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0 54%,transparent 100%);
}
.landing-stage .hero-scene-woman > img { object-position:55% top; }
.landing-stage .hero-scene-mariachi > img { object-position:42% top; }
.landing-stage .hero-scene-reggae > img {
  object-position:58% top;
  filter:grayscale(1) contrast(1.1) brightness(.86);
}
@media (max-width:700px) {
  .landing-stage .hero-scene-reggae > img { object-position:70% top; }
  .landing-stage .hero-scene-duo .hero-duo-photo { width:65%; }
  .landing-stage .hero-scene-duo .hero-duo-left {
    left:0;
    object-position:left top;
    -webkit-mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%);
  }
  .landing-stage .hero-scene-duo .hero-duo-right {
    right:-8%;
    object-position:72% top;
    -webkit-mask-image:linear-gradient(270deg,#000 0 70%,transparent 100%);
    mask-image:linear-gradient(270deg,#000 0 70%,transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce) {
  .landing-stage .hero-scene { transition:none; }
}

/* Matching footer nameplates for the three practice-location photographs. */
.situation-card-classroom figcaption,
.situation-card-lifestyle figcaption {
  position:relative;
  inset:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  align-items:start;
  gap:4px;
  min-height:96px;
  padding:14px 24px 16px;
  border-top:1px solid var(--gold-light);
  background:linear-gradient(180deg,#523529 0%,#38241d 45%,#1d1412 100%);
}
.situation-card-classroom figcaption strong,
.situation-card-lifestyle figcaption strong {
  display:block;
  min-width:0;
  font-size:clamp(1.05rem,2vw,1.38rem);
  line-height:1.12;
  white-space:nowrap;
}
.situation-card-classroom figcaption span,
.situation-card-lifestyle figcaption span {
  display:block;
  text-align:left;
  line-height:1.35;
}
@media (max-width:620px) {
  .situation-card-classroom figcaption,
  .situation-card-lifestyle figcaption { min-height:120px; padding-inline:14px; }
}

/* Keep the full-color circular app medallion intact outside the landing side marks. */
.brand img,
.header-center-logo img,
.hero-emblem img,
.footer-brand img,
.launch-panel > img {
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.52));
}
.brand img,
.header-center-logo img,
.launch-panel > img {
  border:0;
  border-radius:0;
  box-shadow:none;
}
.hero-side-emblem {
  top:72vh;
  opacity:.3;
  filter:grayscale(1) brightness(1.82) contrast(1.22);
  mix-blend-mode:screen;
}
.footer-brand img { aspect-ratio:1; }
@media (max-width:800px) {
  .hero-side-emblem { opacity:.23; }
}

/* The original two-player portrait glides out of shadow on page load. */
.landing-stage .hero-scene-duo .hero-duo-left,
.landing-stage .hero-scene-duo .hero-duo-right {
  transition:transform 1.15s ease-out,filter 1.15s ease-out;
}
.landing-stage.is-sequencing:not(.is-lit) .hero-scene-duo.is-visible { opacity:.18; }
.landing-stage.is-sequencing:not(.is-lit) .hero-duo-left {
  transform:translateX(-8%);
  filter:grayscale(1) contrast(1.1) brightness(.24) blur(5px);
}
.landing-stage.is-sequencing:not(.is-lit) .hero-duo-right {
  transform:translateX(8%);
  filter:grayscale(1) contrast(1.1) brightness(.24) blur(5px);
}
@media (prefers-reduced-motion:reduce) {
  .landing-stage .hero-scene-duo .hero-duo-left,
  .landing-stage .hero-scene-duo .hero-duo-right { transition:none; }
}

/* Center section introductions and avoid stranded final words in display copy. */
h1, h2, h3 { text-wrap:balance; }
p, .situation-card figcaption span, .camera-demo figcaption span { text-wrap:pretty; }
.feature-section > .section-heading,
.situations-section > .section-heading {
  width:min(100%,1080px);
  max-width:none;
  margin:0 auto 46px;
  text-align:center;
}
.feature-section > .section-heading > p:last-child,
.situations-section > .section-heading > p:last-child {
  max-width:72ch;
  margin:20px auto 0;
}
.situations-section > .section-heading-row { display:block; }
.hero-copy .about-copy > .eyebrow,
.hero-copy .about-copy > h2,
.string-focus-copy > .eyebrow,
.string-focus-copy > h3,
.camera-copy > .eyebrow,
.camera-copy > h2,
.live-practice-copy > .eyebrow,
.live-practice-copy > h2,
.launch-panel > div > .eyebrow,
.launch-panel > div > h2 { text-align:center; }
.hero-copy .about-copy > h2,
.camera-copy > h2,
.live-practice-copy > h2,
.launch-panel > div > h2 {
  max-width:none;
  margin-inline:auto;
}
@media (max-width:620px) {
  .landing-stage .hero-headline { white-space:normal; }
  .landing-stage .hero-headline h1,
  .landing-stage .hero-headline p {
    display:block;
    width:100%;
    max-width:100%;
    text-wrap:balance;
  }
}

/* The free-app invitation layers a practice photo, genuine app UI, and copy. */
.launch {
  position:relative;
  width:100%;
  max-width:none;
  padding:0 0 clamp(80px,9vw,130px);
  background:linear-gradient(180deg,#160d24 0%,#0f081a 58%,#08060d 100%);
}
.launch-portrait-band {
  position:relative;
  height:clamp(500px,50vw,760px);
  overflow:hidden;
  background:#150b20;
}
.launch-portrait-band > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  filter:contrast(1.04) brightness(.94);
}
.launch-portrait-band::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(26,10,42,.16),rgba(33,13,53,.06) 58%,rgba(16,7,29,.1)),
    linear-gradient(180deg,rgba(12,7,23,.03) 0%,rgba(21,10,38,.06) 60%,#10091c 100%);
}
.launch-panel {
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  width:min(1180px,calc(100% - 36px));
  min-height:310px;
  margin:-122px auto 0;
  grid-template-columns:130px minmax(0,1fr) 120px;
  gap:clamp(22px,3.6vw,50px);
  overflow:visible;
}
.launch-panel > img,
.launch-copy,
.launch-actions { position:relative; z-index:2; }
.launch-copy { max-width:650px; text-shadow:0 2px 9px rgba(0,0,0,.82); }
.launch-panel .launch-copy h2 { font-size:clamp(1.75rem,3vw,3rem); line-height:1.04; }
.launch-copy h2 span { display:block; }
@media (min-width:701px) {
  .launch-copy h2 span { white-space:nowrap; }
}
.launch-copy > p:not(.eyebrow) { max-width:62ch; line-height:1.6; }
.launch-panel .launch-copy > p.launch-subheading {
  max-width:48ch;
  margin:15px auto 13px;
  color:var(--gold-light);
  font-family:var(--heading);
  font-size:clamp(1.25rem,1.8vw,1.65rem);
  line-height:1.18;
  letter-spacing:.025em;
  text-align:center;
  text-wrap:balance;
}
.launch-settings-phone {
  box-sizing:border-box;
  position:absolute;
  z-index:1;
  top:-85px;
  left:64%;
  width:clamp(170px,16vw,210px);
  margin:0;
  padding:5px;
  border:2px solid #92949b;
  border-radius:40px;
  background:#08090d;
  box-shadow:0 0 0 3px #101015,0 26px 58px rgba(0,0,0,.8);
  transform:rotate(13deg);
  pointer-events:none;
}
.launch-settings-screen {
  position:relative;
  overflow:hidden;
  border-radius:33px;
  background:#000;
}
.launch-settings-capture { display:block; width:100%; height:auto; }
.launch-settings-header {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  clip-path:inset(7.094% 0 52.441% 0);
}
.launch-settings-lock {
  position:absolute;
  top:66.5%;
  left:77%;
  width:auto;
  height:6.2%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 4px #000);
}
@media (max-width:1050px) {
  .launch-panel {
    grid-template-columns:90px minmax(0,1fr);
    padding-right:clamp(175px,25vw,230px);
  }
  .launch-panel > img { width:90px; }
  .launch-actions { grid-column:2; }
  .launch-settings-phone {
    top:-95px;
    right:0;
    left:auto;
    width:150px;
  }
}
@media (max-width:700px) {
  .launch-portrait-band { height:355px; }
  .launch-portrait-band > img { object-position:56% 30%; }
  .launch-panel {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:-65px;
    padding:245px 24px 34px;
    text-align:center;
  }
  .launch-panel > img { width:105px; margin-inline:auto; }
  .launch-copy { max-width:none; }
  .launch-copy > p:not(.eyebrow) { text-align:left; }
  .launch-actions { grid-column:1; align-items:center; }
  .launch-settings-phone {
    top:-45px;
    right:10px;
    left:auto;
    width:120px;
    transform:rotate(11deg);
  }
}
@media (max-width:380px) {
  .launch-panel { padding-top:220px; }
  .launch-settings-phone { top:-40px; width:110px; }
}