@font-face { font-family: "Poppins"; src: url("assets/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("assets/NotoNaskhArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  font-family: "Poppins", sans-serif;
  font-synthesis: none;
  --ink: #07111f;
  --night: #0b1c2a;
  --paper: #f4efdf;
  --white: #fffdf7;
  --gold: #d9ad52;
  --gold-light: #f0d690;
  --teal: #17766e;
  --coral: #bb5548;
  --muted: #5d6672;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --display: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --content: 1180px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--white); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, summary { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { letter-spacing: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: white; color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 50%;
  width: min(calc(100% - 48px), var(--content));
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: white;
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: inherit; font-weight: 700; text-decoration: none; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand span { font-size: 16px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; }
.desktop-nav a { color: rgba(255,255,255,.76); font-size: 13px; font-weight: 600; text-decoration: none; }
.desktop-nav a:hover { color: white; }
.header-action { justify-self: end; padding: 10px 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; }

.hero {
  width: min(calc(100% - 48px), 1320px);
  min-height: 870px;
  position: relative;
  display: grid;
  align-items: start;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink);
  color: white;
}
.hero-gallery { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.hero-gallery > img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(.92) contrast(1.02); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,13,25,.94) 0%, rgba(5,13,25,.76) 42%, rgba(5,13,25,.18) 76%), linear-gradient(0deg, rgba(5,13,25,.86) 0%, transparent 48%, rgba(5,13,25,.32) 100%); }
.hero-inner { position: relative; z-index: 3; width: min(calc(100% - 48px), var(--content)); min-height: 650px; display: grid; grid-template-columns: 1fr; align-items: start; margin: 76px auto 0; padding: 78px 0 36px; }
.hero-copy { max-width: 700px; }
.overline { margin: 0 0 18px; color: var(--gold-light); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.overline-dark { color: #8a631f; }
h1 { max-width: 770px; margin: 0; font-family: var(--display); font-size: 63px; line-height: 1.04; font-weight: 600; }
.hero-lead { max-width: 650px; margin: 18px 0 27px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.hero-actions { max-width: 430px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.button-primary { border-color: var(--gold); background: var(--gold); color: #17120a; }
.button-primary:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }
.platform-clarity { max-width: 480px; margin: 10px 0 0; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.55; }
.platform-clarity strong { color: white; font-weight: 700; }
.platform-clarity span { margin-inline: 5px; opacity: .55; }
.store-badge { width: 184px; height: 55px; display: flex; flex: 0 0 184px; align-items: center; overflow: hidden; border-radius: 7px; color: white; text-decoration: none; transition: filter .2s ease, transform .2s ease; }
.store-badge:hover { filter: brightness(1.1); transform: translateY(-2px); }
.store-badge > img { width: 100%; height: 100%; object-fit: contain; }
.apple-web-badge { gap: 10px; padding: 6px 13px; border: 1px solid #a6a6a6; background: #050505; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.apple-web-badge svg { width: 38px; height: 38px; flex: 0 0 38px; }
.apple-web-badge span { min-width: 0; display: grid; align-content: center; line-height: 1; }
.apple-web-badge small { margin-bottom: 3px; color: rgba(255,255,255,.82); font-size: 8px; font-weight: 600; }
.apple-web-badge strong { color: white; font-size: 19px; font-weight: 600; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 25px; margin: 22px 0 0; color: var(--ink); font-size: 13px; }
.hero-proof strong { color: var(--ink); }

.product-phone { position: relative; margin: 0; padding: 9px 9px 12px; border: 1px solid rgba(255,255,255,.34); border-radius: 34px; background: #03070d; }
.product-phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 25px; background: var(--paper); }
.device-speaker { position: absolute; z-index: 2; top: 17px; left: 50%; width: 70px; height: 17px; transform: translateX(-50%); border-radius: 20px; background: #03070d; }

.listen-lab { padding: 92px max(24px, calc((100% - var(--content)) / 2)) 96px; border-top: 1px solid rgba(255,255,255,.12); background: var(--night); color: white; }
.section-heading { max-width: 770px; }
.section-heading h2, .product-heading h2, .library-heading h2, .proof-copy h2, .faq-heading h2, .closing-copy h2 { margin: 0; font-family: var(--display); font-size: 52px; line-height: 1.1; font-weight: 600; }
.section-heading > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.listen-heading { max-width: none; display: block; margin-bottom: 48px; }
.listen-heading .overline { grid-column: 1 / -1; margin-bottom: 0; }
.listen-heading h2 { color: white; }
.listen-heading > p:last-child { max-width: 590px; margin: 0; color: rgba(255,255,255,.62); }
.listen-player { display: grid; grid-template-columns: minmax(360px, .78fr) minmax(430px, 1.22fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: var(--ink); }
.preview-art { min-width: 0; margin: 0; background: var(--ink); }
.preview-art img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; view-transition-name: preview-cover; }
.preview-webgl { display: none; }
.preview-controls { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px 54px; background: #fff7e5; color: var(--ink); text-align: center; }
.preview-identity p { margin: 0 0 10px; color: #8a631f; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.preview-identity h3 { max-width: 580px; margin: 0 auto; color: var(--ink); font-family: var(--display); font-size: 43px; line-height: 1.1; font-weight: 600; }
.audio-timeline { min-width: 0; margin-top: 38px; }
.playback-controls { width: 230px; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 20px auto 0; }
.audio-toggle { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #a9791e; border-radius: 50%; background: #a9791e; color: white; cursor: pointer; font-size: 18px; box-shadow: 0 8px 22px rgba(117,78,10,.18); }
.audio-toggle:hover { background: var(--gold-light); }
.audio-track { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: #8a631f; cursor: pointer; font-size: 19px; }
.audio-track:hover { color: var(--ink); }
.audio-timeline input { width: 100%; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.audio-timeline > div { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-size: 12px; }
.preview-meta { margin: 17px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.story-picker { display: flex; margin-top: 18px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.story-picker::-webkit-scrollbar { display: none; }
.story-picker button { min-width: 0; flex: 0 0 150px; display: grid; justify-items: center; gap: 9px; padding: 13px 8px 15px; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(255,255,255,.62); cursor: pointer; font-size: 12px; font-weight: 600; scroll-snap-align: center; transition: background-color .2s ease, color .2s ease; }
.story-picker button:last-child { border-right: 0; }
.story-picker button:hover { background: rgba(255,255,255,.05); color: white; }
.story-picker button[aria-pressed="true"] { background: rgba(217,173,82,.13); color: white; box-shadow: inset 0 -3px var(--gold); }
.story-picker img { width: 70px; height: 70px; border-radius: 4px; object-fit: cover; }
#preview-audio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

html[data-player="webgl"] .listen-player { width: min(540px, 100%); display: block; margin-inline: auto; overflow: visible; border: 0; background: transparent; box-shadow: none; }
html[data-player="webgl"] .preview-art { min-height: 760px; position: relative; overflow: visible; background: transparent; }
html[data-player="webgl"] .preview-art > img { opacity: 0; }
html[data-player="webgl"] .preview-webgl { position: absolute; inset: 0; display: block; }
html[data-player="webgl"] .preview-webgl canvas { width: 100%; height: 100%; display: block; cursor: default; touch-action: pan-y; }
html[data-player="webgl"] .preview-webgl canvas[data-interactive="true"] { cursor: pointer; }
html[data-player="webgl"] .preview-controls,
html[data-player="webgl"] .story-picker { display: none; }

.product-story { display: grid; justify-items: center; gap: 34px; padding: 82px max(24px, calc((100% - var(--content)) / 2)) 92px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); background: var(--ink); color: white; text-align: center; }
.product-heading h2 { max-width: 760px; margin: 0; font-family: var(--display); font-size: 52px; font-weight: 600; line-height: 1.1; }
.device-showcase { width: 100%; display: grid; justify-items: center; }
.device-sequence { width: min(250px, 100%); overflow: hidden; padding: 2px 0 20px; }
.device-track { display: flex; align-items: flex-start; transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.sequence-phone { position: relative; width: 100%; flex: 0 0 100%; }
.product-copy { max-width: 760px; display: grid; justify-items: center; position: relative; z-index: 4; }
.product-copy h3 { margin: 0; font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1.16; }
.product-intro { margin: 10px 0 24px; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.55; }
.product-copy > .button { min-width: 250px; }

.after-story { padding: 112px max(24px, calc((100% - var(--content)) / 2)) 120px; background: var(--white); }
.after-heading { margin-bottom: 60px; }
.learning-sequence { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learning-sequence article { min-width: 0; padding: 32px 26px 38px; border-right: 1px solid var(--line); }
.learning-sequence article:first-child { padding-left: 0; }
.learning-sequence article:last-child { padding-right: 0; border-right: 0; }
.learning-sequence article > span { color: #8a631f; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.learning-sequence h3 { margin: 24px 0 14px; font-family: var(--display); font-size: 27px; line-height: 1.1; }
.learning-sequence p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.learning-sequence .arabic { margin-bottom: 14px; color: var(--ink); font-family: "Noto Naskh Arabic", serif; font-size: 26px; line-height: 1.6; }

.library-band { padding: 82px 0 92px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); background: var(--night); color: white; }
.library-heading { max-width: 880px; margin: 0 auto 52px; padding: 0 24px; text-align: center; }
.library-heading .overline { margin-bottom: 15px; }
.library-heading h2 { margin-inline: auto; }
.library-heading > p:last-child { max-width: 720px; margin: 20px auto 0; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.65; }
.text-action { align-self: end; color: var(--gold-light); font-size: 12px; font-weight: 600; text-underline-offset: 5px; }
.text-action span { margin-left: 6px; }
.catalog-wall { width: min(var(--content), calc(100% - 48px)); display: grid; gap: 11px; margin-inline: auto; }
.hero-catalog-wall { position: absolute; z-index: 5; bottom: 0; left: 50%; width: min(calc(100% - 96px), var(--content)); padding: 0 0 12px; overflow: hidden; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.18); border-bottom: 0; border-radius: 8px 8px 0 0; background: rgba(7,17,31,.78); backdrop-filter: blur(12px); }
.catalog-lane { width: 100%; overflow: hidden; }
.catalog-track { width: max-content; display: flex; gap: 10px; animation: catalog-scroll 44s linear infinite; will-change: transform; }
.catalog-lane-reverse .catalog-track { animation-name: catalog-scroll-reverse; transform: translateX(calc(-50% - 5px)); }
.catalog-wall:hover .catalog-track { animation-play-state: paused; }
.catalog-track figure { width: 150px; height: 190px; position: relative; flex: 0 0 150px; margin: 0; overflow: hidden; border-radius: 8px; background: #26323b; }
.catalog-track img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.catalog-track figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 10px 8px 8px; background: rgba(7,17,31,.72); color: white; font-size: 11px; font-weight: 700; text-align: center; }
@keyframes catalog-scroll { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes catalog-scroll-reverse { to { transform: translateX(0); } }
.testimonial-carousel { width: min(var(--content), calc(100% - 48px)); margin: 0 auto; border-top: 1px solid rgba(255,255,255,.18); }
.testimonial-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding: 28px 0 24px; }
.testimonial-top .overline { margin: 0 0 8px; }
.testimonial-top h2 { max-width: 850px; margin: 0; font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1.12; }
.testimonial-controls { display: flex; align-items: center; gap: 8px; }
.testimonial-controls span { min-width: 44px; margin-right: 5px; color: rgba(255,255,255,.62); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.testimonial-controls button { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: transparent; color: white; font: inherit; font-size: 17px; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.testimonial-controls button:hover, .testimonial-controls button:focus-visible { border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); outline: none; }
.testimonial-viewport { overflow: hidden; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.testimonial-track { display: flex; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.testimonial-track blockquote { min-width: 0; flex: 0 0 100%; margin: 0; padding: 36px 34px 38px; border: 0; border-left: 4px solid var(--gold); }
.testimonial-track p { max-width: 930px; margin: 0 0 18px; color: rgba(255,255,255,.92); font-family: var(--display); font-size: 26px; line-height: 1.42; }
.testimonial-track cite { display: block; color: rgba(255,255,255,.62); font-size: 12px; font-style: normal; line-height: 1.5; }

.editorial-proof { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; padding: 74px max(24px, calc((100% - var(--content)) / 2)); border-top: 1px solid rgba(255,255,255,.16); background: var(--teal); color: white; }
.editorial-heading .overline { margin: 0 0 15px; color: var(--gold-light); }
.editorial-heading h2 { max-width: 500px; margin: 0; font-family: var(--display); font-size: 43px; font-weight: 600; line-height: 1.12; }
.editorial-body > p { max-width: 650px; margin: 0 0 24px; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.7; }
.editorial-points { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 25px; padding: 0; border-top: 1px solid rgba(255,255,255,.24); list-style: none; }
.editorial-points li { min-width: 0; padding: 20px 20px 0 0; }
.editorial-points strong, .editorial-points span { display: block; }
.editorial-points strong { margin-bottom: 7px; font-size: 11px; }
.editorial-points span { color: rgba(255,255,255,.6); font-size: 10px; line-height: 1.55; }
.editorial-link { color: white; }

.parent-proof { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 84px max(24px, calc((100% - var(--content)) / 2)); background: var(--teal); color: white; }
.proof-copy h2 { max-width: 520px; }
.parent-quotes { border-top: 1px solid rgba(255,255,255,.28); }
blockquote { margin: 0; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.28); }
blockquote p { margin: 0 0 8px; font-family: var(--display); font-size: 21px; line-height: 1.4; }
blockquote cite { color: rgba(255,255,255,.62); font-size: 10px; font-style: normal; }

.offer { display: grid; grid-template-columns: minmax(360px, .84fr) minmax(0, 1.16fr); align-items: start; gap: 34px 76px; padding: 92px max(24px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--line); background: #fff5df; color: var(--ink); }
.offer-heading { grid-column: 1 / -1; }
.offer-heading h2 { max-width: 760px; margin: 0; font-family: var(--display); font-size: 52px; font-weight: 600; line-height: 1.08; }
.pricing-panel { display: grid; gap: 16px; align-content: start; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-card { min-width: 0; display: grid; align-content: start; gap: 12px; margin: 0; padding: 21px 19px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,253,247,.74); }
.plan-card-featured { border: 2px solid var(--gold); background: #faedc9; }
.plan-label { min-height: 28px; margin: 0; color: #485568; font-size: 10px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.plan-card-featured .plan-label { color: #8a631f; }
.plan-card h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.plan-price { min-width: 0; display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; }
.plan-price strong { font-family: var(--display); font-size: 43px; font-weight: 500; line-height: 1; white-space: nowrap; }
.plan-price span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.plan-detail { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.plan-detail strong { color: #8a631f; }
.offer-button { width: 100%; margin-top: 8px; border-color: var(--gold); background: var(--gold); color: #17120a; }
.offer-button:hover { border-color: var(--gold-light); background: var(--gold-light); color: #17120a; }
.pricing-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.pricing-note strong { color: var(--ink); font-weight: 700; }
.offer-store-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.offer-store-badges .store-badge { width: 100%; height: auto; aspect-ratio: 633 / 188; min-width: 0; flex-basis: auto; }
.offer-store-badges .apple-web-badge { padding: 5px 10px; }
.offer-store-badges .apple-web-badge svg { width: 33px; height: 33px; flex-basis: 33px; }
.offer-store-badges .apple-web-badge strong { font-size: 17px; }
.offer-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.offer-feature-list li { position: relative; min-height: 60px; display: flex; align-items: center; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.5; }
.offer-feature-list li::before { content: "✓"; position: absolute; left: 3px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font-size: 12px; }

.faq { display: grid; grid-template-columns: .68fr 1.32fr; gap: 86px; padding: 92px max(24px, calc((100% - 1180px) / 2)) 110px; border-top: 1px solid var(--line); background: var(--paper); }
.faq-heading > p:last-child { max-width: 390px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 21px 38px 21px 4px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; top: 18px; right: 5px; color: var(--teal); font-size: 20px; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { margin: 0; padding: 0 4px 22px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq-editorial-content { padding: 0 4px 25px; }
.faq-editorial-content p { padding-inline: 0; }
.faq-editorial-content ul { display: grid; gap: 9px; margin: -5px 0 19px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-editorial-content strong { color: var(--ink); }
.faq-editorial-content .text-action { display: inline-block; font-size: 14px; }

.closing { min-height: 700px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: white; }
.closing > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 30%; }
.closing-shade { position: absolute; inset: 0; background: rgba(7,17,31,.68); }
.closing-copy { position: relative; z-index: 2; max-width: 820px; display: grid; justify-items: center; padding: 70px 24px; text-align: center; }
.closing-copy h2 { font-size: 62px; }
.closing-copy .button { margin-top: 28px; }

footer { min-height: 160px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 35px; padding: 38px max(24px, calc((100% - var(--content)) / 2)); border-top: 1px solid #cadbe1; background: #dfeaed; color: #536271; }
.footer-brand { color: var(--ink); }
footer p { font-size: 11px; line-height: 1.6; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { color: #294d5a; text-underline-offset: 3px; }
footer a:hover { color: var(--teal); }
footer a, footer small { font-size: 10px; }
footer small a { color: var(--teal); font-weight: 700; }

.mobile-sticky { display: none; }

:focus-visible { outline: 3px solid #68c7bb; outline-offset: 4px; }

@media (max-width: 1050px) {
  h1 { font-size: 60px; }
  .offer { grid-template-columns: 1fr; gap: 50px; }
  .pricing-panel { width: 100%; max-width: 620px; }
  .learning-sequence { grid-template-columns: repeat(2, 1fr); }
  .learning-sequence article:nth-child(2) { border-right: 0; }
  .learning-sequence article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .learning-sequence article:nth-child(3) { padding-left: 0; }
}

@media (min-width: 761px) and (max-height: 820px) {
  h1 { font-size: 58px; }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 32px); grid-template-columns: 1fr auto; min-height: 64px; }
  .desktop-nav { display: none; }
  .brand { gap: 8px; }
  .brand img { width: 46px; height: 46px; }
  .brand span { font-size: 15px; }
  .header-action { padding: 9px 11px; font-size: 10px; }
  .hero { width: 100%; min-height: 840px; border-radius: 0; }
  .hero-gallery > img { object-position: center top; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,13,25,.82) 0%, rgba(5,13,25,.56) 52%, rgba(5,13,25,.32) 100%); }
  .hero-inner { width: calc(100% - 36px); min-height: 680px; align-content: start; margin-top: 64px; padding: 42px 0 28px; }
  .hero-copy { position: relative; z-index: 3; }
  h1 { max-width: 520px; font-size: 40px; line-height: 1.04; }
  .hero-lead { max-width: 520px; margin-block: 14px 20px; font-size: 14px; line-height: 1.55; }
  .hero-actions { width: 100%; max-width: 390px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
  .hero-actions .store-badge { width: 100%; height: auto; aspect-ratio: 633 / 188; min-width: 0; flex-basis: auto; }
  .hero-actions .apple-web-badge { padding: 5px 10px; }
  .hero-actions .apple-web-badge svg { width: 33px; height: 33px; flex-basis: 33px; }
  .hero-actions .apple-web-badge strong { font-size: 17px; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; font-size: 10px; line-height: 1.35; text-align: center; }

  .listen-lab, .offer, .faq { padding: 64px 18px 70px; }
  .library-band { padding: 64px 0 70px; }
  .listen-lab { padding-top: 58px; }
  .section-heading h2, .product-heading h2, .library-heading h2, .proof-copy h2, .faq-heading h2, .closing-copy h2 { font-size: 38px; }
  .listen-heading { display: block; margin-bottom: 30px; }
  .listen-heading > p:last-child { margin-top: 16px; }
  .listen-player { grid-template-columns: 1fr; }
  .preview-art img { height: 220px; aspect-ratio: auto; }
  html[data-player="webgl"] .preview-art { min-height: 640px; }
  .preview-controls { padding: 27px 22px 30px; }
  .preview-identity h3 { font-size: 34px; }
  .audio-timeline { margin-top: 28px; }
  .playback-controls { width: 210px; gap: 15px; margin-top: 17px; }
  .audio-toggle { width: 62px; height: 62px; }
  .story-picker { width: 100%; margin: 14px 0 0; border-radius: 8px; }
  .story-picker button { min-height: 91px; flex-basis: 112px; gap: 6px; padding: 10px 5px 11px; }
  .story-picker img { width: 50px; height: 50px; }

  .product-story { gap: 27px; padding: 58px 18px 66px; }
  .product-heading h2 { max-width: 340px; }
  .device-sequence { width: min(62vw, 230px); padding-bottom: 14px; }
  .sequence-phone { padding: 8px 8px 11px; border-radius: 32px; }
  .sequence-phone .device-speaker { top: 15px; width: 62px; height: 15px; }
  .sequence-phone img { border-radius: 23px; }
  .product-copy h3 { font-size: 30px; }
  .product-intro { margin: 8px 0 20px; font-size: 16px; }
  .product-copy > .button { width: min(100%, 320px); min-width: 0; }

  .after-heading { margin-bottom: 42px; }
  .learning-sequence { grid-template-columns: 1fr; }
  .learning-sequence article, .learning-sequence article:first-child, .learning-sequence article:nth-child(3), .learning-sequence article:last-child { padding: 25px 0 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .learning-sequence article:last-child { border-bottom: 0; }

  .library-heading { grid-template-columns: 1fr; gap: 25px; }
  .library-heading { margin-bottom: 36px; padding-inline: 18px; }
  .library-heading .overline { margin-bottom: 14px; }
  .text-action { align-self: auto; }
  .catalog-wall { width: calc(100% - 36px); gap: 8px; }
  .hero-catalog-wall { right: 0; left: 0; width: 100%; padding-bottom: 8px; transform: none; border-right: 0; border-left: 0; border-radius: 0; }
  .catalog-track { gap: 8px; animation-duration: 34s; }
  .catalog-track figure { width: 106px; height: 140px; flex-basis: 106px; }
  .catalog-track figcaption { padding: 7px 5px 6px; font-size: 10px; }
  .cover-rail { width: calc(100% + 18px); display: flex; gap: 10px; overflow-x: auto; padding-right: 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cover-rail::-webkit-scrollbar { display: none; }
  .cover-rail figure { min-width: 44vw; scroll-snap-align: start; }
  .testimonial-carousel { width: calc(100% - 36px); margin-top: 0; }
  .testimonial-top { grid-template-columns: 1fr; gap: 16px; padding: 25px 0 20px; }
  .testimonial-top h2 { max-width: 340px; font-size: 28px; }
  .testimonial-controls { justify-content: flex-end; }
  .testimonial-controls span { min-width: 36px; margin-right: 0; }
  .testimonial-controls button { width: 36px; height: 36px; }
  .testimonial-track blockquote { padding: 27px 20px 30px; border-left-width: 3px; }
  .testimonial-track p { margin-bottom: 15px; font-size: 21px; line-height: 1.48; }
  .testimonial-track cite { font-size: 12px; }

  .editorial-proof { grid-template-columns: 1fr; gap: 32px; padding: 58px 18px 62px; }
  .editorial-heading h2 { font-size: 34px; }
  .editorial-body > p { font-size: 13px; }
  .editorial-points { grid-template-columns: 1fr; }
  .editorial-points li { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.18); }

  .offer, .faq { grid-template-columns: 1fr; gap: 42px; }
  .pricing-panel { gap: 14px; }
  .plan-card { padding: 17px 13px; }
  .plan-card h3 { font-size: 17px; }
  .plan-price strong { font-size: 36px; }
  .plan-price span { font-size: 10px; }
  .offer-heading h2 { font-size: 28px; }
  .offer-heading h2 span { display: block; }
  .offer-feature-list { grid-template-columns: 1fr; margin-top: 22px; }
  .offer-feature-list li { min-height: 54px; }
  .closing { min-height: 610px; }
  .closing-copy h2 { font-size: 43px; line-height: 1.12; }

  footer { grid-template-columns: 1fr; gap: 13px; padding: 38px 18px 100px; }
  footer p { margin: 0; }
  .mobile-sticky { position: fixed; z-index: 50; right: 12px; bottom: 10px; left: 12px; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--gold); color: #17120a; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 16px 40px rgba(0,0,0,.32); opacity: 0; pointer-events: none; transform: translateY(130%); transition: opacity .2s ease, transform .2s ease; }
  .mobile-sticky.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
}

@media (max-width: 380px) {
  h1 { font-size: 36px; }
  .header-action { display: none; }
  .site-header { grid-template-columns: 1fr; }
  .offer-heading h2 { font-size: 25px; }
  .plan-card { padding-inline: 10px; }
  .plan-label { font-size: 9px; }
  .plan-price strong { font-size: 31px; }
  .plan-price span { font-size: 9px; }
}

@media (max-width: 420px) {
  .header-action { display: none; }
  .site-header { grid-template-columns: 1fr; }
  h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .catalog-track, .device-track { animation: none !important; transition: none !important; }
}

html[data-theme="light"] { background: #f7faf8; }
html[data-theme="light"] body { background: #f7faf8; color: var(--ink); }
html[data-theme="light"] .site-header { border-bottom-color: rgba(7,17,31,.16); color: var(--ink); }
html[data-theme="light"] .desktop-nav a { color: rgba(7,17,31,.68); }
html[data-theme="light"] .desktop-nav a:hover { color: var(--ink); }
html[data-theme="light"] .header-action { border-color: rgba(7,17,31,.36); }
html[data-theme="light"] .hero { background: #edf4ef; color: var(--ink); }
html[data-theme="light"] .hero-gallery > img { filter: saturate(.96) brightness(1.02); }
html[data-theme="light"] .hero-shade { background: linear-gradient(90deg, rgba(248,251,247,.96) 0%, rgba(248,251,247,.82) 40%, rgba(248,251,247,.18) 76%), linear-gradient(0deg, rgba(248,251,247,.7) 0%, transparent 46%, rgba(248,251,247,.34) 100%); }
html[data-theme="light"] .hero-lead { color: rgba(7,17,31,.72); }
html[data-theme="light"] .hero-proof,
html[data-theme="light"] .hero-proof strong { color: var(--ink); }
html[data-theme="light"] .hero-catalog-wall { border-top-color: rgba(7,17,31,.14); background: rgba(248,251,247,.84); }

html[data-theme="light"] .listen-lab { border-top-color: #d8e2dd; background: #f7faf8; color: var(--ink); }
html[data-theme="light"] .listen-heading h2 { color: var(--ink); }
html[data-theme="light"] .listen-heading .overline { color: #8a631f; }
html[data-theme="light"] .listen-heading > p:last-child { color: var(--muted); }
html[data-theme="light"] .listen-player { border-color: #d5dfda; background: var(--white); box-shadow: 0 18px 45px rgba(28,54,45,.08); }
html[data-theme="light"] .preview-art { background: #dfe8e3; }
html[data-theme="light"] .preview-controls { background: #fff7e5; }
html[data-theme="light"] .preview-identity p { color: var(--teal); }
html[data-theme="light"] .preview-identity h3 { color: var(--ink); }
html[data-theme="light"] .audio-timeline > div,
html[data-theme="light"] .preview-meta { color: var(--muted); }
html[data-theme="light"] .story-picker { border-color: #d5dfda; background: var(--white); }
html[data-theme="light"] .story-picker button { border-right-color: #d5dfda; color: var(--muted); }
html[data-theme="light"] .story-picker button:hover { background: #f1f6f3; color: var(--ink); }
html[data-theme="light"] .story-picker button[aria-pressed="true"] { background: #e7f2ed; color: var(--ink); box-shadow: inset 0 -3px var(--teal); }
@media (max-width: 760px) { html[data-theme="light"] .story-picker button { border-bottom-color: #d5dfda; } }

html[data-theme="light"] .product-story { border-top-color: #d2dfd9; background: #edf5f1; color: var(--ink); }
html[data-theme="light"] .product-intro { color: var(--muted); }

html[data-theme="light"] .library-band { border-top-color: #d7e0e6; background: #f5f8fa; color: var(--ink); }
html[data-theme="light"] .library-band .overline { color: #8a631f; }
html[data-theme="light"] .library-heading > p:last-child { color: var(--muted); }
html[data-theme="light"] .text-action { color: var(--teal); }
html[data-theme="light"] .cover-rail figcaption span { color: var(--muted); }
html[data-theme="light"] .testimonial-carousel,
html[data-theme="light"] .testimonial-viewport { border-color: rgba(7,17,31,.16); }
html[data-theme="light"] .testimonial-viewport { background: #fff8e8; }
html[data-theme="light"] .testimonial-controls span,
html[data-theme="light"] .testimonial-track cite { color: var(--muted); }
html[data-theme="light"] .testimonial-controls button { border-color: rgba(7,17,31,.22); color: var(--ink); }
html[data-theme="light"] .testimonial-controls button:hover,
html[data-theme="light"] .testimonial-controls button:focus-visible { border-color: var(--gold); background: var(--gold); color: var(--ink); }
html[data-theme="light"] .testimonial-track p { color: var(--ink); }
html[data-theme="light"] .testimonial-track blockquote { border-left-color: var(--gold); }

html[data-theme="light"] .product-platform-clarity { color: var(--muted); }
html[data-theme="light"] .product-platform-clarity strong { color: var(--ink); }
html[data-theme="light"] .hero-platform-clarity { color: #4d5b67; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
html[data-theme="light"] .hero-platform-clarity strong { color: var(--ink); }
html[data-theme="light"] .editorial-proof { border-top-color: #cfddd8; background: #e8f2ef; color: var(--ink); }
html[data-theme="light"] .editorial-heading .overline { color: #8a631f; }
html[data-theme="light"] .editorial-body > p { color: var(--muted); }
html[data-theme="light"] .editorial-points { border-top-color: rgba(7,17,31,.18); }
html[data-theme="light"] .editorial-points span { color: var(--muted); }
html[data-theme="light"] .editorial-link { color: var(--teal); }
@media (max-width: 760px) {
  html[data-theme="light"] .editorial-points li { border-bottom-color: rgba(7,17,31,.14); }
  html[data-theme="light"] .hero-gallery { bottom: 148px; background: #dfeaed; }
  html[data-theme="light"] .hero-gallery > img { height: calc(100% + 270px); object-position: center top; transform: translateY(72px); filter: saturate(.98) brightness(1.02); }
  html[data-theme="light"] .hero-shade { background: linear-gradient(180deg, rgba(247,250,248,.92) 0%, rgba(247,250,248,.76) 46%, rgba(247,250,248,.26) 70%, rgba(247,250,248,.62) 100%); }
}

html[data-theme="light"] .offer { background: #fff5df; color: var(--ink); }
html[data-theme="light"] .faq {
  border-top-color: #cfdee5;
  background: #edf5f8;
}