/* HomeNote landing page (homenote.info). Light hero with the real plugin screenshot, then orange/black gradient bands
   that fade into each other; soft UI on light, dark glass on the gradients. Values come from the HomeNote design system. */
:root {
  --ground-top: #e4e2e2;
  --ground: #f4f3f3;
  --face: #fbfafa;
  --sunken: #ebe9e9;
  --ink: #1d2025;
  --mute: #5c626b;
  --faint: #8a8f96;
  --orange: #ff6a2b;
  --orange-deep: #e0430d;
  --orange-text: #c2410c;
  --good: #047857;
  --dark-mute: #a3a8b0;
  --warm-mute: #ead9cf;
  --window: #2a2d33;
  --sd: rgba(150, 140, 140, 0.38);
  --sl: rgba(255, 255, 255, 0.95);
  --sh-hero: 0 40px 80px -20px var(--sd), 0 12px 28px -8px var(--sd), -10px -10px 26px var(--sl);
  --sh-raised: 12px 12px 28px var(--sd), -8px -8px 22px var(--sl);
  --sh-small: 4px 4px 12px var(--sd), -3px -3px 8px var(--sl);
  --sh-inset: inset 4px 4px 9px var(--sd), inset -4px -4px 9px var(--sl);
  --sh-inset-sm: inset 2px 2px 5px var(--sd), inset -2px -2px 5px var(--sl);
  --sh-black: 14px 14px 32px rgba(0, 0, 0, 0.9), -8px -8px 22px rgba(255, 255, 255, 0.045);
  --sh-glass: 0 24px 48px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sh-glass-inset: inset 3px 3px 10px rgba(0, 0, 0, 0.5), inset -1px -1px 0 rgba(255, 255, 255, 0.08);
  --win-raised: 4px 4px 10px rgba(17, 19, 22, 0.8), -3px -3px 8px rgba(255, 255, 255, 0.075);
  --win-sunk: inset 3px 3px 7px rgba(17, 19, 22, 0.8), inset -3px -3px 7px rgba(255, 255, 255, 0.075);
  --sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* page side margin: grows with the window so content never hugs the edges */
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: light;
  /* the plugin's windows (hero screenshot and the recreations below) follow the sun/moon toggle */
  --win-bg: #2a2d33; --win-frame: #1d1e21; --win-ink: #f3f4f6; --win-mute: #8e949d; --win-soft: #c9cdd3;
  --win-well: #222428; --win-zone: #3a3e46; --win-btn: #2c2f35; --win-amber: #ffb454; --win-orange: var(--orange);
  --win-bar: linear-gradient(180deg, #a9adb4, #7d828a); --win-chip: #e6e6e8; --win-chip-ink: #2a2d33;
  --win-chip-black: #141517; --win-chip-black-ink: #c9cdd3; --win-dash: rgba(160, 165, 175, 0.55); --win-decide: #f2b25c;
  --win-well-sh: inset 2px 2px 5px rgba(17,19,22,.8), inset -2px -2px 5px rgba(255,255,255,.075);
}
html[data-plugin="light"] {
  --win-bg: #f6f4f5; --win-frame: #e4e1e2; --win-ink: #1d2025; --win-mute: #6b7079; --win-soft: #474c54;
  --win-well: #e7e4e5; --win-zone: #cfcbcc; --win-btn: #f6f4f5; --win-amber: #c25a06; --win-orange: #d2470f;
  --win-bar: linear-gradient(180deg, #6f737b, #50545b); --win-chip: #ffffff; --win-chip-ink: #2a2d33;
  --win-chip-black: #2b2e33; --win-chip-black-ink: #ffffff; --win-dash: rgba(110, 115, 125, 0.55); --win-decide: #c8530f;
  --win-raised: 4px 4px 10px rgba(150, 140, 140, 0.45), -3px -3px 8px rgba(255, 255, 255, 0.95);
  --win-sunk: inset 3px 3px 7px rgba(150, 140, 140, 0.45), inset -3px -3px 7px rgba(255, 255, 255, 0.95);
  --win-well-sh: inset 2px 2px 5px rgba(150,140,140,.45), inset -2px -2px 5px rgba(255,255,255,.95);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* body matches the top of the hero, so nothing lighter shows above it behind the floating nav */
body { margin: 0; background: var(--ground-top); color: var(--ink); font: 400 16px/1.55 var(--sans); }
img { max-width: 100%; }
a { color: var(--orange-text); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #e5560f; outline-offset: 3px; }
/* the email field rings the whole pill, not just the text box */
.well input:focus-visible { outline: none; }
.well { position: relative; }
.well::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid #e5560f; pointer-events: none; opacity: 0; }
.well:has(input:focus-visible)::after { opacity: 1; }   /* drawn over the field, just inside the pill edge where the old input ring sat */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1240px; width: 100%; margin: 0 auto; }
h1, h2, h3 { text-wrap: balance; }
.h2 { margin: 0; font-size: 52px; line-height: 1.02; font-weight: 500; letter-spacing: -0.045em; }
.caption { font-family: var(--mono); font-size: 13px; }

/* ---------- nav: soft pills over the hero, dark glass once the hero has scrolled past ---------- */
/* viewport-fit=cover lets the page run under the notch/island; the nav steps down by the safe-area inset so the pills clear it */
/* Pinned 12px below the edge, not at 0: Safari 26 colours the status bar from a sticky/fixed element touching the top
   edge, and gives up (plain light grey) when that element holds frosted glass. Off the edge, Safari colours the bar
   from the page instead (script.js keeps <html>/<body> the colour of the section underneath). */
.nav { position: sticky; top: 12px; z-index: 10; padding: calc(4px + env(safe-area-inset-top, 0px)) var(--gutter) 16px; }
.nav-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pill { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: var(--face); box-shadow: var(--sh-small);
  transition: background .3s ease, box-shadow .3s ease; }
.pill.brand-pill { padding-right: 8px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 10px; color: var(--ink); text-decoration: none; transition: color .3s ease; }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--window); display: grid; place-items: center; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.navlinks { display: flex; gap: 4px; }
.navlinks a { color: var(--mute); text-decoration: none; font-weight: 500; font-size: 14px; padding: 10px 14px; border-radius: 999px; transition: color .3s ease; }
.navlinks a:hover { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff;
  text-decoration: none; font-weight: 500; font-size: 15px; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.nav.glass .pill { background: linear-gradient(180deg, rgba(40, 41, 45, 0.46), rgba(24, 25, 27, 0.4));
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.nav.glass .brand { color: #fff; }
.nav.glass .navlinks a { color: #c9cdd3; }
.nav.glass .navlinks a:hover { color: #fff; }
.nav.glass .nav-cta { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -6px rgba(0, 0, 0, 0.5); }

/* ---------- light hero ---------- */
.hero { background:
    /* same build as the statement band below (blobs anchored at opposite sides and corners) on the light ground,
       filling the upper part of the hero and fading out before the screenshot */
    linear-gradient(180deg, rgba(244, 243, 243, 0) 0px, rgba(244, 243, 243, 0) 480px, var(--ground) 820px),
    radial-gradient(46% 560px at 4% 460px, rgba(247, 160, 82, 0.48) 0%, rgba(247, 160, 82, 0) 100%),
    radial-gradient(44% 520px at 96% -20px, rgba(232, 84, 28, 0.44) 0%, rgba(232, 84, 28, 0) 100%),
    radial-gradient(34% 460px at 100% 420px, rgba(190, 40, 16, 0.24) 0%, rgba(190, 40, 16, 0) 100%),
    radial-gradient(40% 440px at 28% 30px, rgba(255, 86, 0, 0.25) 0%, rgba(255, 86, 0, 0) 100%),   /* the saturated orange */
    linear-gradient(180deg, var(--ground-top) 0px, var(--ground) 900px); margin-top: calc(-108px - env(safe-area-inset-top, 0px)); padding: calc(192px + env(safe-area-inset-top, 0px)) var(--gutter) 140px; }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 72px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; max-width: 900px; }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--mute); }
.h1 { margin: 0; font-size: 104px; line-height: 0.96; font-weight: 500; letter-spacing: -0.05em; }
.lede { margin: 0; font-size: 20px; color: var(--mute); max-width: 32em; }
.shot { margin: 0; width: 100%; max-width: 1040px; padding: 14px; border-radius: 40px; background: var(--face); box-shadow: var(--sh-hero); }
.shot { position: relative; }
.shot img { display: block; width: 100%; height: auto; border-radius: 28px; }
.shot .theme-light { position: absolute; inset: 14px; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.shot .theme-light img { width: 100%; height: 100%; }
html[data-plugin="light"] .shot .theme-light { opacity: 1; }
/* sun/moon: just the icon, sitting on the hero just above the screenshot's top-right corner (still a real button for keyboards) */
.theme-toggle { position: absolute; top: -54px; right: 8px; z-index: 2; width: 56px; height: 56px;   /* roomy hit area; the icon stays put */ padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: transform .3s ease; }
.theme-toggle:hover { transform: scale(1.12); }
.theme-toggle svg { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity .5s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.theme-toggle .sun { fill: none; stroke: var(--orange-text); stroke-width: 1.9; stroke-linecap: round; }
.theme-toggle .sun circle { fill: var(--orange); stroke: none; }
.theme-toggle .moon { fill: var(--ink); }
/* shows what you'll switch to: sun while dark, moon while light */
.theme-toggle .moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-plugin="light"] .theme-toggle .sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-plugin="light"] .theme-toggle .moon { opacity: 1; transform: none; }

/* ---------- email signup (shared by hero and the closing section) ---------- */
.signup { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 520px; }
.well { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: 999px; background: var(--sunken); box-shadow: var(--sh-inset); }
.well input { flex: 1 1 220px; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 17px var(--sans); padding: 0 18px; min-height: 48px; border-radius: 999px; }
.well input::placeholder { color: inherit; opacity: .5; }
.well button { border: 0; cursor: pointer; color: #fff; background: var(--ink); font: 500 16px var(--sans); padding: 0 22px; border-radius: 999px; min-height: 48px; }
.well button:hover { filter: brightness(1.2); }
.well button[disabled] { opacity: .6; cursor: progress; }
.signup .note { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.signup .error { color: var(--orange-text); font-size: 14px; font-weight: 500; }
.done { display: flex; gap: 12px; align-items: center; padding: 14px 22px; border-radius: 999px; background: var(--sunken); box-shadow: var(--sh-inset); font-weight: 500; text-align: left; }
.done svg { flex: none; }
.signup.dark .well { background: rgba(8, 6, 5, 0.55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--sh-glass-inset); }
.signup.dark .well input { color: #fff; min-height: 52px; }
.signup.dark .well button { color: #0c0c0d; background: #fff; font-size: 17px; padding: 0 26px; min-height: 52px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6); }
.signup.dark .well button:hover { filter: brightness(0.92); }
.signup.dark .error { color: #ffd2b5; }
.signup.dark .note { color: var(--warm-mute); }
.signup.dark + .done, .done.dark { background: rgba(8, 6, 5, 0.55); box-shadow: var(--sh-glass-inset); color: #fff; }

/* ---------- gradient band 1: DAWs + statement (fades into the black band below) ---------- */
.glow { color: #fff; padding: 140px var(--gutter) 290px; display: flex; flex-direction: column; gap: 80px;
  background:

    linear-gradient(0deg, rgba(12,12,13,1) 0px, rgba(12,12,13,.96) 35px, rgba(12,12,13,.90) 75px, rgba(12,12,13,.82) 115px, rgba(12,12,13,.72) 155px, rgba(12,12,13,.61) 195px, rgba(12,12,13,.50) 235px, rgba(12,12,13,.40) 275px, rgba(12,12,13,.31) 315px, rgba(12,12,13,.23) 355px, rgba(12,12,13,.16) 395px, rgba(12,12,13,.10) 435px, rgba(12,12,13,.055) 475px, rgba(12,12,13,.02) 515px, rgba(12,12,13,0) 560px, rgba(12,12,13,0) 100%),

    radial-gradient(42% 60% at 8% 92%, rgba(247,160,82,.85) 0%, rgba(247,160,82,0) 100%),

    radial-gradient(40% 55% at 94% 10%, rgba(232,84,28,.85) 0%, rgba(232,84,28,0) 100%),

    radial-gradient(35% 50% at 100% 85%, rgba(190,40,16,.7) 0%, rgba(190,40,16,0) 100%),

    linear-gradient(160deg, #1a0d09 0%, #2c130b 45%, #140b08 100%);
}
.daws { max-width: 1100px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.daws > span { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.daws ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; }
.daws li { font-weight: 600; font-size: 22px; letter-spacing: -0.03em; opacity: .85; }
.statement { max-width: 1100px; width: 100%; margin: 0 auto; font-size: 64px; line-height: 1.12; font-weight: 500; letter-spacing: -0.045em; text-wrap: balance; text-align: center; }
.statement .dim { color: rgba(255, 255, 255, 0.5); }
.statement .hot { color: #ffa066; text-shadow: 0 0 18px rgba(255, 106, 43, 0.75), 0 0 42px rgba(255, 86, 0, 0.45); }
.tile { display: inline-grid; place-items: center; vertical-align: middle; min-width: 1.15em; height: 1.15em; padding: 0 .14em; border-radius: .3em; margin: 0 .12em;
  position: relative; top: -.06em; font-family: var(--mono); font-weight: 500; font-size: .5em; letter-spacing: -.02em; }
.tile.t-key { background: linear-gradient(160deg, #3a3e46, #1d2025); color: var(--orange); box-shadow: 0 10px 18px -6px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.tile.t-hz { background: linear-gradient(160deg, #ff8a4f, #d2400c); color: #fff; box-shadow: 0 10px 18px -6px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.tile.t-bpm { background: linear-gradient(160deg, #fff, #d9d7d7); color: #1d2025; box-shadow: 0 10px 18px -6px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- black/gray band: feature rows + photos ---------- */
.blackband { background: linear-gradient(180deg, #0c0c0d 0%, #1b1c1f 55%, #0c0c0d 100%); color: #f3f4f6; padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; gap: 140px; }
.features { display: flex; flex-direction: column; gap: 120px; scroll-margin-top: 110px; }
/* the first feature frame rises out of the black band into the orange gradient above it */
.features > .row:first-child { position: relative; z-index: 1; margin-top: -170px; }
.row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.row.flip > :first-child { order: 2; }
.frame { padding: 12px; border-radius: 36px; background: var(--win-frame); box-shadow: var(--sh-black); min-width: 0; }
.frame > img { display: block; width: 100%; height: auto; border-radius: 26px; background: #222428; }
.window { border-radius: 26px; background: var(--win-bg); color: var(--win-ink); padding: 40px; }
/* theme switch: everything in the app windows eases between dark and light */
.frame, .frame *, .shot { transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease, outline-color .6s ease; }
.row-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.row-copy .caption { color: #ff8a52; }
.row-copy p { margin: 0; font-size: 18px; color: var(--dark-mute); max-width: 30em; }
.label { font-family: var(--mono); font-size: 12px; color: var(--win-mute); }

/* Pitch Profile (rebuilt from the plugin's Details panel; the bars breathe up and down) */
.pp { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.pp-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--win-mute); }
.pp-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.pp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-slot { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.pp-slot i { display: block; width: 100%; max-width: 46px; border-radius: 7px; height: calc(var(--h) * 100%);
  animation: pp-breathe var(--dur) ease-in-out var(--delay) infinite; }
@keyframes pp-breathe { 0%, 100% { height: calc(var(--h) * 100%); } 50% { height: calc(var(--h) * var(--lo) * 100%); } }
.pp-col.in .pp-slot i { background: var(--win-bar); }
.pp-col.home .pp-slot i { background: linear-gradient(180deg, #ff8a4f, #e0521a); box-shadow: 0 0 22px rgba(255, 106, 43, 0.55); }
.pp-col.out .pp-slot i { border: 2px dashed var(--win-dash); }
.pp-col.decide .pp-slot i { outline: 2.5px solid var(--win-decide); outline-offset: 3px; }
.pp-key { display: grid; place-items: center; height: 30px; border-radius: 7px; font-size: 14px; font-weight: 700; background: var(--win-chip); color: var(--win-chip-ink); }
.pp-key.black { background: var(--win-chip-black); color: var(--win-chip-black-ink); }
.pp-col.home .pp-key { background: linear-gradient(180deg, #ff8a4f, #e85a1e); color: #fff; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--win-mute); }
.pp-legend span { display: inline-flex; align-items: center; gap: 9px; }
.pp-legend .wide { flex-basis: 100%; }

/* Settings that fit (rebuilt from the plugin's candidate list; the bars fill left to right and the numbers count with them) */
.fit-frame { width: 100%; }
.fit { padding: 30px 34px 26px; display: flex; flex-direction: column; gap: 14px; }
.fit-rows { display: flex; flex-direction: column; }
.fit-row { display: grid; grid-template-columns: 12px 96px minmax(0, 1fr) 52px; align-items: center; column-gap: 14px; height: 46px; }
.fit-dot { width: 12px; height: 12px; border-radius: 50%; }
.fit-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--win-ink); white-space: nowrap; }
.fit-track { position: relative; height: 13px; border-radius: 999px; background: var(--win-well); box-shadow: var(--win-well-sh); }
.fit-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 13px; border-radius: 999px; background: linear-gradient(90deg, var(--win-mute), var(--win-soft)); opacity: .75; }
.fit-pct { text-align: right; font-size: 17px; font-weight: 700; color: var(--win-ink); font-variant-numeric: tabular-nums; }
.fit-row.main .fit-name, .fit-row.main .fit-pct { color: var(--win-orange); }
.fit-row.main .fit-fill { opacity: 1; background: linear-gradient(90deg, #f88b52, #de5520); box-shadow: 0 0 16px rgba(240, 106, 44, 0.45); }
.fit-decide { margin: 0; min-height: 22px; font-size: 15px; color: var(--win-amber); opacity: 0; transition: opacity .5s ease; }
.fit-decide.on { opacity: 1; }
.sw { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.sw.home { background: #f06a2c; }
.sw.in { background: var(--win-bar); }
.sw.out { border: 1.5px dashed var(--win-dash); }
.sw.decide { border: 2px solid var(--win-decide); }

.detune { display: flex; flex-direction: column; gap: 28px; }
.detune-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.big-hz { font-weight: 600; font-size: 56px; letter-spacing: -0.04em; color: var(--win-amber); font-variant-numeric: tabular-nums; transition: color .25s ease; }
.big-hz.in-tune { color: var(--win-ink); }
.unit { font-size: 20px; color: var(--win-mute); font-weight: 500; letter-spacing: 0; }
.meter { display: flex; flex-direction: column; gap: 10px; }
.track { position: relative; height: 14px; border-radius: 999px; background: var(--win-well); box-shadow: var(--win-well-sh); }
.track .zone { position: absolute; left: 47%; width: 6%; top: 3px; bottom: 3px; border-radius: 999px; background: var(--win-zone); }
.track .knob { position: absolute; left: calc(56.3% - 9px); top: -5px; width: 18px; height: 24px; border-radius: 999px; background: var(--win-amber); box-shadow: 0 0 0 4px var(--win-bg); transition: background .25s ease; }
.track .knob.in-tune { background: var(--win-ink); }
.cursor { position: absolute; width: 22px; height: 26px; pointer-events: none; transform-origin: 2px 2px; transition: transform .14s ease; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.cursor.pressed { transform: scale(.88); }
.track .cursor { left: calc(56.3% + 2px); top: 10px; }
.scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--win-mute); }
.detune-line { font-size: 15px; color: var(--win-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.tempo { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tempo-read { display: flex; flex-direction: column; gap: 4px; }
.big-bpm { font-weight: 600; font-size: 72px; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  min-width: 2.5em; }   /* always as wide as "142 BPM", so flipping to 71 never re-wraps the buttons or changes the height */
.big-bpm .unit { font-size: 22px; }
.tbtns { position: relative; display: flex; gap: 12px; }
.tbtn { width: 64px; height: 52px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; background: var(--win-btn); box-shadow: var(--win-raised); color: var(--win-ink);
  transition: box-shadow .12s ease, background .12s ease, color .2s ease; }
.tbtn.on, .tbtn.down { background: var(--win-well); box-shadow: var(--win-sunk); }
.tbtn.on { color: var(--win-orange); }
.tbtns .cursor { left: 104px; top: 30px; transition: left .7s cubic-bezier(.45, 0, .55, 1), transform .14s ease; }

.photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.photos figure { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.photos img { display: block; width: 100%; object-fit: cover; border-radius: 28px; background: #17110e; box-shadow: var(--sh-black); }
.photos .p45 { aspect-ratio: 4 / 4.2; }
.photos .p44 { aspect-ratio: 4 / 3.4; }
.photos figcaption { display: flex; flex-direction: column; gap: 6px; }
.photos figcaption span { font-size: 15px; color: var(--dark-mute); }
.photos figcaption a { font-family: var(--mono); font-size: 11px; color: #8f949b; text-decoration: none; }

/* ---------- gradient band 2: small features + how it works (fades in from the black above) ---------- */
.ember { color: #f3f4f6; padding: 220px var(--gutter) 160px; display: flex; flex-direction: column; gap: 120px;
  background:
    linear-gradient(180deg, rgba(12,12,13,1) 0px, rgba(12,12,13,.94) 35px, rgba(12,12,13,.84) 70px, rgba(12,12,13,.71) 110px, rgba(12,12,13,.56) 150px, rgba(12,12,13,.42) 189px, rgba(12,12,13,.29) 229px, rgba(12,12,13,.19) 268px, rgba(12,12,13,.11) 308px, rgba(12,12,13,.055) 348px, rgba(12,12,13,.02) 387px, rgba(12,12,13,0) 440px, rgba(12,12,13,0) 100%),
    radial-gradient(48% 34% at 24% 36%, rgba(247,160,82,.95) 0%, rgba(247,160,82,0) 100%),
    radial-gradient(42% 36% at 78% 30%, rgba(232,84,28,.95) 0%, rgba(232,84,28,0) 100%),
    radial-gradient(36% 34% at 94% 70%, rgba(190,40,16,.9) 0%, rgba(190,40,16,0) 100%),
    radial-gradient(55% 30% at 38% 74%, rgba(130,38,14,.85) 0%, rgba(130,38,14,0) 100%),
    linear-gradient(180deg, #0c0c0d 0%, #24100a 20%, #3a170c 50%, #1a0d09 80%, #0c0c0d 100%); }
.ember section { display: flex; flex-direction: column; gap: 48px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.glass-card { padding: 30px; border-radius: 28px; background: rgba(14, 10, 9, 0.5); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--sh-glass); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.glass-card.carved { background: rgba(8, 6, 5, 0.55); box-shadow: var(--sh-glass-inset); gap: 14px; }
.glass-card h3 { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.glass-card.carved h3 { margin: 0; }
.glass-card p { margin: 0; color: var(--warm-mute); font-size: 16px; }
.glass-card .step { font-family: var(--mono); font-size: 13px; color: var(--warm-mute); }
.glyph { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 500;
  background: linear-gradient(160deg, #2a2d33, #0c0c0d); color: #ff8a52; box-shadow: 0 10px 18px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
.how-head { display: flex; flex-direction: column; gap: 16px; }
.how-head .caption { color: var(--warm-mute); }
.why-lede { margin: 0; max-width: 46em; color: var(--warm-mute); font-size: 18px; }
.glass-card .vs-classic { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 14px; color: rgba(234, 217, 207, 0.72); }
.glass-card .vs-classic span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(234, 217, 207, 0.5); margin-bottom: 4px; }
/* HomeNote vs Auto-Key 2: observable differences only (Antares hasn't published how Auto-Key works) */
.vs { padding: 10px 30px; overflow-x: auto; }
.vs table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.vs th, .vs td { text-align: left; padding: 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--warm-mute); }
.vs tr:last-child td { border-bottom: 0; }
.vs th { font-weight: 600; color: #fff; font-size: 15px; }
.vs td:first-child { color: #fff; font-weight: 500; }
.vs td.hi { color: #ffa066; font-weight: 600; }
.chart-link { color: var(--orange-text); font-weight: 500; white-space: nowrap; }
/* how-we-tested.html */
.doc-page { background: var(--ground); }
.doc { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 96px; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.6; }
.doc h1 { margin: 0 0 6px; }
.doc h2 { margin: 26px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.doc p, .doc ul { margin: 0; }
.doc ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc a { color: var(--orange-text); }
.doc .caption { color: var(--orange-text); }
.doc-lede { font-size: 19px; color: var(--mute); }
.doc-back { font-size: 14px; text-decoration: none; }
.doc-mute { color: var(--faint); font-size: 14px; }
.doc-table { overflow-x: auto; border-radius: 22px; background: var(--face); box-shadow: var(--sh-raised); padding: 8px 20px; }
.doc-table table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.doc-table th, .doc-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--sunken); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-files { list-style: none; padding: 0 !important; }
.doc-foot { margin-top: 30px !important; font-size: 13px; color: var(--faint); }

/* ---------- light band: accuracy ---------- */
.lightband { background: var(--ground); padding: 100px var(--gutter); }
.accuracy { scroll-margin-top: 110px; }
.accuracy .row-copy .caption { color: var(--orange-text); }
.accuracy .row-copy p { color: var(--mute); }
.chart { margin: 0; padding: 40px; border-radius: 36px; background: var(--face); box-shadow: var(--sh-raised); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.chart figcaption { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.bar { display: flex; flex-direction: column; gap: 6px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; line-height: 1.1; }
.bar-head span:first-child { font-size: 18px; font-weight: 500; }
.bar-head span:last-child { font-size: 44px; font-weight: 500; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.bar-track { height: 22px; border-radius: 999px; background: var(--sunken); box-shadow: var(--sh-inset-sm); padding: 4px; }
.bar-note { margin-top: 0; font-size: 13px; color: var(--mute); }   /* the right key shown on screen, not just the main answer */
.bar-fill { height: 100%; border-radius: 999px; }
.axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mute); padding-inline: 4px; }
.chart p { margin: 0; font-size: 14px; color: var(--mute); }

/* ---------- gradient band 3: signup, FAQ, footer (fades in from the light band above) ---------- */
.sunset { color: #fff; padding: 380px var(--gutter) 48px; display: flex; flex-direction: column; gap: 180px; scroll-margin-top: 80px;
  background:
    linear-gradient(180deg, rgba(244,243,243,1) 0px, rgba(244,243,243,.94) 35px, rgba(244,243,243,.84) 70px, rgba(244,243,243,.71) 110px, rgba(244,243,243,.56) 150px, rgba(244,243,243,.42) 189px, rgba(244,243,243,.29) 229px, rgba(244,243,243,.19) 268px, rgba(244,243,243,.11) 308px, rgba(244,243,243,.055) 348px, rgba(244,243,243,.02) 387px, rgba(244,243,243,0) 440px, rgba(244,243,243,0) 100%),
    /* sized in px, not %, so the bright orange stays at the top however tall the FAQ makes this band
       and the signup text always lands on the darker part */
    radial-gradient(900px 560px at 16% 40px, rgba(247,165,90,1) 0%, rgba(247,165,90,0) 100%),
    radial-gradient(820px 520px at 68% 0, rgba(236,108,40,1) 0%, rgba(236,108,40,0) 100%),
    radial-gradient(560px 900px at 100% 900px, rgba(200,44,18,.8) 0%, rgba(200,44,18,0) 100%),
    linear-gradient(180deg, #e8742c 0px, #6a2812 560px, #1c0f0b 1000px, #0c0c0d 1400px, #0c0c0d 100%); }
.get { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.get .caption, .get p { color: var(--warm-mute); }
.get h2 { margin: 0; font-size: 96px; line-height: 0.96; font-weight: 400; letter-spacing: -0.05em; }
.get p { margin: 0; font-size: 19px; max-width: 30em; }
.included { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-family: var(--mono); font-size: 13px; color: var(--warm-mute); }
.included li { display: flex; gap: 8px; align-items: center; }
.included li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff8a52; }
.faq { max-width: 860px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; scroll-margin-top: 110px; }
.faq h2 { text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq details { border-radius: 24px; background: rgba(24, 25, 27, 0.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--sh-glass); padding: 0 26px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.plus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: inset 2px 2px 5px rgba(0,0,0,.6), inset -1px -1px 0 rgba(255,255,255,.06);
  display: grid; place-items: center; color: #ff8a52; font-size: 20px; transition: transform .2s ease; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { margin: 0; padding-bottom: 24px; color: var(--dark-mute); font-size: 16px; max-width: 62ch; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--dark-mute); }
footer span:last-child { max-width: 640px; }

/* gradient bands: two soft glows slowly drift on their own (no pointer involved). The layer is
   faded out toward each band's top and bottom so it never shows where one band ends. */
.hero, .glow, .ember, .sunset { position: relative; isolation: isolate; overflow: clip; }
.hero::before, .glow::before, .ember::before, .sunset::before { content: ""; position: absolute; inset: -12% -15%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 30% at 30% 35%, rgba(255, 120, 50, 0.30) 0%, rgba(255, 120, 50, 0) 70%),
              radial-gradient(34% 28% at 72% 62%, rgba(232, 84, 28, 0.28) 0%, rgba(232, 84, 28, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  animation: drift 24s ease-in-out infinite alternate; will-change: transform; }
.hero::before { background: radial-gradient(30% 26% at 26% 22%, rgba(255, 86, 0, 0.24) 0%, rgba(255, 86, 0, 0) 70%),
                            radial-gradient(28% 24% at 74% 18%, rgba(255, 128, 56, 0.26) 0%, rgba(255, 128, 56, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 75%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 75%); } }
.glow::before { animation-duration: 28s; animation-delay: -6s; }
.ember::before { animation-duration: 26s; animation-delay: -12s; }
.sunset::before { animation-duration: 30s; animation-delay: -3s; }
@keyframes drift {
  0%   { transform: translate3d(-5%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 5%, 0) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) { .hero::before, .glow::before, .ember::before, .sunset::before, .pp-slot i { animation: none; } }

/* custom cursor (script.js adds .custom-cursor only for a mouse/trackpad, and not with reduced motion) */
.custom-cursor, .custom-cursor * { cursor: none !important; }
.custom-cursor input, .custom-cursor textarea, .custom-cursor select { cursor: text !important; }
.pointer { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 28px; height: 28px; transform-origin: 14px 2px; will-change: transform;
  opacity: 0; transition: opacity .2s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.pointer svg { display: block; transform-origin: 14px 2px; transition: transform .18s ease; }
.pointer.on { opacity: 1; }
.pointer.off { opacity: 0; }
.pointer.link svg { transform: scale(1.18); }
.pointer.link path { fill: var(--orange); }
.pointer.press svg { transform: scale(0.86); }

[hidden] { display: none !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- intro animations: each section's pieces rise and fade in as they scroll into view (classes added by script.js,
   so without JavaScript or with reduced motion everything is simply there) ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease var(--rd, 0s), transform .95s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s); }
.rv.frame { transform: translateY(44px) scale(.965); transition: opacity .9s ease var(--rd, 0s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s), background-color .6s ease, box-shadow .6s ease; }
.rv.on { opacity: 1; transform: none; }
/* the accuracy bars grow from zero once the chart is in */
.chart.rv .bar-fill { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) calc(var(--rd, 0s) + var(--bd, 0s) + .25s); }
.chart.rv.on .bar-fill { transform: none; }

@media (max-width: 980px) {
  .row, .photos, .grid3 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .row.flip > :first-child { order: 0; }
  .navlinks { display: none; }
  .h1 { font-size: 56px; }
  .statement { font-size: 36px; }
  .h2, .get h2 { font-size: 36px; }
  .window { padding: 28px; }
  .big-hz { font-size: 44px; }
  .big-bpm { font-size: 56px; }
}
/* phones: the email well stacks (field on top, button full width) and the desktop-sized
   band padding comes down so sections don't float in empty space */
@media (max-width: 600px) {
  /* comparison table: each row becomes a small label over the two answers side by side, so nothing scrolls sideways */
  .vs { padding: 6px 18px; overflow: visible; }
  .vs table, .vs thead, .vs tbody { display: block; min-width: 0; }
  .vs tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .vs tr:last-child { border-bottom: 0; }
  .vs th, .vs td { padding: 0; border: 0; font-size: 15px; line-height: 1.35; }
  .vs thead tr { padding: 10px 0 12px; }
  .vs th:first-child { display: none; }
  .vs td:first-child { grid-column: 1 / -1; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: rgba(234, 217, 207, 0.55); }
  .fit { padding: 22px 20px 18px; }
  .fit-row { grid-template-columns: 10px 86px minmax(0, 1fr) 42px; column-gap: 10px; height: 40px; }
  .fit-dot { width: 10px; height: 10px; }
  .fit-name { font-size: 15px; }
  .fit-pct { font-size: 14px; }
  .fit-decide { font-size: 13px; min-height: 36px; }
  .nav { padding: 12px var(--gutter); }
  .hero { padding: calc(164px + env(safe-area-inset-top, 0px)) var(--gutter) 72px; }
  /* phones: no corner blobs; one warm glow on one side at a time, drifting very slowly across and back */
  .hero { background: linear-gradient(180deg, var(--ground-top) 0px, var(--ground) 900px); }
  .hero::before { /* one warm glow on one side at a time; it drifts very slowly across to the other side and back */
    inset: 0 -40% 0 -40%;
    background: radial-gradient(26% 300px at 30% 120px, rgba(255, 86, 0, 0.26) 0%, rgba(255, 86, 0, 0) 100%),
                radial-gradient(30% 420px at 24% 300px, rgba(247, 160, 82, 0.42) 0%, rgba(247, 160, 82, 0) 100%),
                radial-gradient(22% 320px at 36% 60px, rgba(232, 84, 28, 0.3) 0%, rgba(232, 84, 28, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 380px, transparent 720px); mask-image: linear-gradient(180deg, #000 0, #000 380px, transparent 720px);
    animation: hero-sweep 46s ease-in-out infinite alternate; }
  /* tempo: buttons always under the number on phones, so 71 and 142 can never change the card's layout */
  .tempo { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .pp { padding: 20px 14px 18px; gap: 14px; }
  .pp-bars { gap: 3px; }
  .pp-col { gap: 6px; }
  .pp-slot { height: 104px; }
  .pp-slot i { border-radius: 4px; }
  .pp-col.out .pp-slot i { border-width: 1.5px; }
  .pp-col.decide .pp-slot i { outline-width: 2px; outline-offset: 2px; }
  .pp-key { height: 22px; font-size: 9.5px; border-radius: 5px; }
  .pp-legend { font-size: 12px; gap: 6px 14px; }
  .theme-toggle { top: -50px; right: 0; }
  .shot .theme-light { inset: 8px; }   /* match the frame's phone padding, so no dark edge shows around the light image */
  /* keep the strip under the iPhone status bar plain, so Safari's safe area stays neutral; the orange starts below it */
  .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(240px + env(safe-area-inset-top, 0px)); z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, var(--ground-top) 0px, var(--ground-top) calc(70px + env(safe-area-inset-top, 0px)), rgba(228, 226, 226, 0) calc(240px + env(safe-area-inset-top, 0px))); }
  .hero-inner { gap: 48px; }
  .shot { padding: 8px; border-radius: 30px; }
  .shot img { border-radius: 22px; }
  .glow { padding: 72px var(--gutter) 170px; gap: 56px; }
  .blackband { padding: 0 var(--gutter) 24px; gap: 80px; }
  .features > .row:first-child { margin-top: -110px; }
  /* phones: each feature reads caption + title, then its picture, then the description */
  .features .row { gap: 16px; }
  .features .row-copy { display: contents; }
  .features .row-copy .caption, .features .row-copy h2 { order: 0; }
  .features .row > .frame { order: 1; margin: 12px 0; }
  .features .row-copy p { order: 2; }
  .photos { gap: 40px; }
  .photos .p45, .photos .p44 { aspect-ratio: 4 / 3; }
  .features { gap: 80px; }
  .row { gap: 28px; }
  .ember { padding: 150px var(--gutter) 96px; gap: 80px; }
  .ember section { gap: 32px; }
  .lightband { padding: 72px var(--gutter); }
  .sunset { padding: 240px var(--gutter) 40px; gap: 96px;
    /* same sunset, scaled to a phone: the bright orange stays in the top 200px so the signup text sits on deep red */
    background:
      linear-gradient(180deg, rgba(244,243,243,1) 0px, rgba(244,243,243,.84) 40px, rgba(244,243,243,.56) 85px, rgba(244,243,243,.29) 130px, rgba(244,243,243,.11) 175px, rgba(244,243,243,0) 220px, rgba(244,243,243,0) 100%),
      radial-gradient(420px 260px at 16% 40px, rgba(247,165,90,1) 0%, rgba(247,165,90,0) 100%),
      radial-gradient(380px 240px at 70% 0, rgba(236,108,40,1) 0%, rgba(236,108,40,0) 100%),
      radial-gradient(300px 520px at 100% 560px, rgba(200,44,18,.7) 0%, rgba(200,44,18,0) 100%),
      linear-gradient(180deg, #e8742c 0px, #6a2812 260px, #1c0f0b 640px, #0c0c0d 900px, #0c0c0d 100%); }
  .get { gap: 20px; }
  .get h2 { font-size: 44px; }
  .chart { padding: 24px; }
  .bar-head span:last-child { font-size: 32px; }
  .daws li { font-size: 18px; }
  .daws ul { gap: 8px 24px; }

  .well { flex-direction: column; gap: 8px; padding: 8px; border-radius: 28px; }
  .well input { flex: none; width: 100%; min-height: 52px; text-align: center; padding: 0 16px; }
  .well button { width: 100%; min-height: 52px; }
  .signup.dark .well input, .signup.dark .well button { min-height: 52px; }
  .done { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@keyframes hero-sweep { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(44%, 0, 0); }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none !important; } }