/* Bright split hero with one synchronized OFF/ON comparison. */
.site-header { height: 102px; padding-top: 28px; background: transparent; }
.site-header .header-inner { width: min(1120px, calc(100% - 80px)); height: 72px; padding: 9px 12px 9px 26px; border: 1px solid #dedee0; border-radius: 22px; background: #ffffffa8; }
.site-header .wordmark { font-size: 29px; }
.site-header .wordmark img { width: 38px; height: 38px; }
.site-header .button-small { min-height: 50px; padding-inline: 20px; font-size: 13px; border-radius: 14px; }
.hero { --header-height: 102px; position: relative; isolation: isolate; overflow: visible; text-align: left; background: transparent; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--header-height)) 0 0; background: url("assets/pearl-ribbon-v2.jpg") center right / cover no-repeat; pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--header-height)) 0 0; background: linear-gradient(90deg, #fffefa 0%, #fffefaef 27%, #fffefa50 48%, #fffefa00 67%); pointer-events: none; }
.hero-layout { width: min(1280px, calc(100% - 112px)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); align-items: center; gap: 68px; min-height: calc(88svh - var(--header-height)); padding-block: 72px 100px; }
.hero-copy { padding: 0; min-width: 0; }
.hero h1 { margin: 0 0 25px; max-width: 760px; color: #080909; font-size: clamp(58px, 5.8vw, 88px); line-height: 1.045; letter-spacing: -.057em; font-weight: 780; }
.hero h1 em { display: block; font-style: italic; color: #525256; font-weight: 740; }
.hero .noise-word { display: inline-block; position: relative; }
.hero .noise-word::after { content: ""; position: absolute; pointer-events: none; left: -.06em; top: 55%; width: calc(100% + .2em); height: .4em; transform: translateY(-50%); background: url("assets/noise-wave-full.svg") left center / 5em 100% repeat-x; opacity: .9; filter: drop-shadow(0 0 2px #e7334866); }
.hero-description { margin: 0 0 32px; max-width: 590px; color: #64646e; font-size: 18px; letter-spacing: -.25px; line-height: 1.6; }
.hero .button-row { justify-content: flex-start; }
.hero .button-amber { min-height: 60px; padding: 17px 28px; gap: 17px; border-radius: 14px; font-size: 18px; }
.hero .button-amber .icon { width: 22px; height: 22px; }
.hero .compatibility { margin-top: 14px; font-size: 12px; color: #777785; }
.hero .compatibility .trial-note { display: inline-block; margin: 0 0 0 7px; white-space: nowrap; }
.hero-assurances { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 29px 0 0; padding: 26px 0 0; border-top: 1px solid #dedee0; max-width: 610px; }
.hero-assurances li { display: flex; align-items: center; gap: 14px; padding-inline: 20px; border-left: 1px solid #e0dfe1; font-size: 12px; line-height: 1.5; color: #26262c; }
.hero-assurances li:first-child { border: 0; padding-left: 0; }
.hero-assurances li:last-child { padding-right: 0; }
.hero-assurances .icon { width: 25px; height: 25px; color: #f5a300; stroke-width: 1.65; }
.demo-stage { min-width: 0; width: 100%; max-width: 480px; justify-self: end; margin: 0; padding: 0; scroll-margin-top: 28px; }
.audio-rail { padding: 30px 27px 17px; border: 1px solid #555656; border-radius: 18px; color: #e8e8ed; background: linear-gradient(130deg, #252727f7, #1c1e1ffa); box-shadow: 0 24px 60px #332d4224, 0 2px 6px #00000012; text-align: center; backdrop-filter: blur(20px); }
.audio-rail h2 { margin: 0; color: #e5e5ec; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: 2.15px; text-transform: uppercase; }
.rail-play { display: grid; place-items: center; width: 76px; height: 76px; margin: 27px auto 28px; padding: 0; border: 1px solid #ffc853; border-radius: 50%; color: #11140f; background: linear-gradient(130deg, #ffc641, #ffb51f); box-shadow: 0 3px 14px #00000013; transition: transform .15s, box-shadow .15s; }
.rail-play:hover { transform: scale(1.045); box-shadow: 0 4px 23px #ffc13b29; }
.rail-play:disabled { cursor: wait; opacity: .65; transform: none; }
.rail-play .icon { width: 29px; height: 29px; }
.demo-waveform { display: none; }
.rail-timeline { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5px 0; color: #e2e3eb; font-size: 12px; font-variant-numeric: tabular-nums; }
#demo-current { text-align: left; }
#demo-duration { text-align: right; }
#demo-seek { --seek-progress: 0%; appearance: none; -webkit-appearance: none; grid-column: 1 / -1; width: 100%; min-width: 20px; height: 5px; margin: 8px 0 5px; border: 0; border-radius: 8px; background: linear-gradient(to right, #ffc342 var(--seek-progress), #505254 var(--seek-progress)); accent-color: #ffc342; cursor: pointer; }
#demo-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; background: #ffc342; border: 0; border-radius: 50%; }
#demo-seek::-moz-range-thumb { width: 10px; height: 10px; background: #ffc342; border: 0; border-radius: 50%; }
.rail-mode { display: flex; align-items: stretch; margin-top: 22px; padding: 2px; border: 1px solid #73777c; border-radius: 13px; background: #2a2e31; }
.rail-mode button { flex: 1; min-width: 0; min-height: 45px; padding: 12px 8px; border: 1px solid transparent; border-radius: 10px; background: none; white-space: nowrap; color: #d4d9e3; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; }
.rail-mode button[aria-pressed="true"] { color: #11140f; background: linear-gradient(120deg, #ffc641, #ffb51e); border-color: #ffc548; box-shadow: 0 2px 6px #0000001f; font-weight: 650; }
.rail-caption { margin: 15px 0 0; color: #a8abb3; font-size: 11px; line-height: 1.5; letter-spacing: .15px; }
.demo-message { color: #ffd58a; font-size: 12px; line-height: 1.6; margin: 13px 0 0; }
.demo-message:empty { display: none; }
.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; }
@media (min-width: 1060px) and (max-height: 800px) {
  .hero-layout { padding-block: 44px 56px; }
  .hero h1 { font-size: clamp(60px, 5.2vw, 80px); margin: 0 0 23px; }
  .hero-description { font-size: 16px; margin-bottom: 26px; }
  .hero-assurances { margin-top: 25px; padding-top: 22px; }
}
@media (max-width: 1100px) {
  .site-header .header-inner { width: calc(100% - 64px); padding-left: 19px; }
  .site-header .wordmark { font-size: 25px; }
  .site-header .wordmark img { width: 33px; height: 33px; }
  .site-header .main-nav { gap: 21px; font-size: 12px; }
  .site-header .button-small { font-size: 11px; padding-inline: 15px; }
  .hero-layout { width: calc(100% - 80px); grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr); gap: 36px; padding-block: 60px 96px; }
  .hero h1 { font-size: clamp(55px, 5.8vw, 66px); }
  .hero-description { font-size: 16px; }
  .hero-assurances li { padding-inline: 12px; gap: 9px; font-size: 10px; }
  .hero-assurances .icon { width: 22px; height: 22px; }
  .audio-rail { padding-inline: 22px; }
  .rail-mode button { font-size: 11px; }
}
@media (max-width: 820px) {
  .hero-layout { grid-template-columns: 1fr; gap: 43px; max-width: 640px; padding-block: 48px 84px; }
  .hero::before { background-position: 63% bottom; background-size: auto 100%; }
  .hero::after { background: linear-gradient(180deg, #fffefa 0%, #fffefaee 38%, #fffefa00 72%); }
  .hero h1 { max-width: 610px; font-size: clamp(52px, 8.1vw, 66px); }
  .hero-description { max-width: 580px; font-size: 17px; }
  .demo-stage { max-width: 480px; justify-self: center; }
  .hero-assurances { max-width: 560px; }
  .hero-assurances li { font-size: 12px; gap: 12px; }
}
@media (max-width: 760px) {
  .hero { --header-height: 92px; }
  .site-header { height: 92px; padding-top: 18px; }
  .site-header .header-inner { position: relative; width: calc(100% - 32px); height: 64px; padding: 8px 10px 8px 15px; border-radius: 18px; gap: 12px; }
  .site-header .wordmark { font-size: 23px; gap: 5px; }
  .site-header .wordmark img { width: 30px; height: 30px; }
  .site-header .button-small { min-height: 39px; padding: 9px 12px; border-radius: 11px; }
  .site-header .header-download span { font-size: 10px; }
  .site-header .main-nav { top: 72px; left: 0; right: 0; font-size: 13px; }
  .hero-layout { width: calc(100% - 40px); padding-top: 32px; gap: 34px; }
  .hero h1 { margin: 0 0 23px; font-size: clamp(49px, 9.4vw, 64px); letter-spacing: -.055em; }
  .hero-description { font-size: 15px; line-height: 1.65; margin-bottom: 26px; }
  .hero .button-amber { min-height: 54px; font-size: 15px; padding: 15px 23px; gap: 13px; }
  .hero .button-amber .icon { width: 19px; height: 19px; }
  .hero .compatibility { font-size: 11px; margin-top: 12px; }
  .hero-assurances { margin-top: 25px; padding-top: 22px; }
  .hero-assurances li { padding-inline: 11px; font-size: 10px; gap: 8px; }
  .hero-assurances .icon { width: 21px; height: 21px; }
  .audio-rail { padding: 27px 24px 17px; border-radius: 17px; }
  .audio-rail h2 { font-size: 10px; }
  .rail-play { width: 68px; height: 68px; margin-block: 25px; }
  .rail-mode button { font-size: 12px; }
}
@media (max-width: 430px) {
  .site-header .header-download { padding: 9px; min-height: 36px; }
  .hero h1 { font-size: clamp(44px, 11.3vw, 49px); }
  .hero-description { font-size: 14px; }
  .hero-assurances { grid-template-columns: 1fr 1fr; gap: 19px 0; }
  .hero-assurances li { font-size: 12px; padding-inline: 17px; gap: 12px; }
  .hero-assurances li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .rail-play, .rail-mode button { transition: none; } }