/* BounceBeat: the app looks like a small hardware groovebox.
   Layout: warm-grey casing, an inset dark "screen" (the canvas) and a control
   panel of physical keys with LEDs. One committed light look. */
:root {
  color-scheme: light;
  /* casing + keys */
  --case: #e2dfd8;
  --case-2: #d4d0c6;      /* recessed areas */
  --key: #f4f2ed;         /* key top */
  --key-2: #e8e5de;       /* key bottom */
  --key-edge: #b3ada1;
  --ink: #1e1d1a;
  --ink-2: #5f5b52;       /* labels */
  --line: #c2bcb0;
  --screen: #0d0f1c;
  /* LEDs */
  --led: #ff5a1f;         /* main orange */
  --led-off: #c9c3b7;
  --led-melody: #e9a400;
  --led-chords: #1aa6bb;
  --led-bass: #e5484d;
  --led-drums: #6f55f2;
  --ok: #1d8f4e;
  --danger: #c92a2a;
  /* aliases used by the content pages */
  --bg: var(--case);
  --surface: var(--key);
  --surface-2: var(--key-2);
  --fg: var(--ink);
  --muted: var(--ink-2);
  --accent: var(--led);
  --accent-2: var(--led-melody);
  --accent-3: var(--led-chords);
  /* type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 7px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--case);
  color: var(--ink);
  font: 15px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- keys ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--key-edge);
  background: linear-gradient(var(--key), var(--key-2));
  box-shadow: 0 2px 0 var(--key-edge);
  color: var(--ink); text-decoration: none; cursor: pointer;
  font: 600 13px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; transition: transform .05s, box-shadow .05s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-edge); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn.pro { background: var(--led); border-color: #c8410f; box-shadow: 0 2px 0 #b33a0c; color: #fff; }
.btn.danger { color: var(--danger); }
.led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--led-off); box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
[aria-pressed="true"] > .led, [aria-selected="true"] > .led {
  background: var(--led); box-shadow: 0 0 6px var(--led), inset 0 1px 1px rgba(255,255,255,.4);
}

/* ---------- app shell ---------- */
body.app { overflow: hidden; overscroll-behavior: none; }
/* the app is an instrument, not a document: clicking must not select text or leave a text cursor behind */
body.app { -webkit-user-select: none; user-select: none; caret-color: transparent; -webkit-tap-highlight-color: transparent; }
body.app input, body.app textarea { -webkit-user-select: text; user-select: text; caret-color: auto; }
.shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark { flex: none; }
.brand-mark circle { animation: hop 1.2s cubic-bezier(.33,0,.67,1) infinite; transform-origin: 16px 25px; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.brand-name { font: 800 19px/1 var(--font-display); letter-spacing: -0.02em; }
.brand-by { font: 600 11px/1 var(--font-label); color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.top-actions { display: flex; gap: 8px; }

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 12px;
  min-height: 0; padding: 0 12px 12px;
}
.stage { min-height: 0; position: relative; }
.screen {
  position: relative; height: 100%; overflow: hidden; touch-action: none;
  background: var(--screen); border-radius: 14px;
  border: 6px solid #2b2a27;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.6);
}
#cv { display: block; width: 100%; height: 100%; cursor: crosshair; }
.stage-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 4px; background: rgba(255,255,255,.1);
  color: #e9e8f5; font: 600 11px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none; transition: opacity .6s;
}
.stage-hint.gone { opacity: 0; }
.edit-badge {
  position: absolute; left: 12px; top: 12px; padding: 5px 9px; border-radius: 4px;
  background: var(--led-melody); color: #1d1600; font: 700 11px/1.2 var(--font-label);
  letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
/* first-visit tips: a small label stuck on the screen, in the casing's own look */
.tips {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: min(320px, calc(100% - 24px)); padding: 10px 12px; display: grid; gap: 8px;
  background: var(--case); border: 1px solid var(--key-edge); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.tips-text { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.tips-row { display: flex; align-items: center; gap: 10px; }
.tips-count { font-size: 11px; color: var(--ink-2); margin-right: auto; }
.tips-skip {
  border: 0; background: none; padding: 8px 4px; cursor: pointer; color: var(--ink-2);
  font: 600 12px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
}
/* the key a tip is talking about */
.tip-target { outline: 2px solid var(--led); outline-offset: 3px; animation: tip-pulse 1.2s ease-in-out infinite; }
@keyframes tip-pulse { 0%,100% { outline-offset: 3px; } 50% { outline-offset: 6px; } }
.screen-btn {
  position: absolute; right: 10px; bottom: 34px; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(13,15,28,.55); color: #e9e8f5;
  display: grid; place-items: center; cursor: pointer;
}

.panel {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--case-2); border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
}

/* transport */
.transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.play-btn {
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 1px solid #c8410f; background: radial-gradient(circle at 40% 35%, #ff7a45, var(--led) 60%);
  box-shadow: 0 3px 0 #b33a0c; color: #fff; display: grid; place-items: center;
}
.play-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #b33a0c; }
.play-btn[aria-pressed="true"] { background: radial-gradient(circle at 40% 35%, #4b4945, #2b2a27 60%); border-color: #1d1c1a; box-shadow: 0 3px 0 #11100f; }
.bpm { display: grid; gap: 6px; min-width: 0; }
.lcd {
  display: flex; justify-content: space-between; align-items: baseline;
  background: #2b2a27; color: #ffb38f; border-radius: 5px; padding: 4px 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.lcd-lbl { font: 600 10px/1 var(--font-label); letter-spacing: .14em; color: #b6a597; }
.lcd output { font-size: 20px; font-weight: 700; line-height: 1.1; }
.led-btn { justify-content: flex-start; }

.lbl { display: block; font: 600 11px/1.2 var(--font-label); color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; }
.sec { font: 700 11px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.note { font-size: 13px; color: var(--ink-2); margin: 0; }

/* tabs = mode keys */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tab {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; border-radius: var(--r); cursor: pointer; padding: 0 4px;
  border: 1px solid var(--key-edge); background: linear-gradient(var(--key), var(--key-2));
  box-shadow: 0 2px 0 var(--key-edge);
  font: 600 12px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.tab[aria-selected="true"] { color: var(--ink); transform: translateY(2px); box-shadow: 0 0 0 var(--key-edge); background: var(--key-2); }
.tabpanel { display: flex; flex-direction: column; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field .lbl output { color: var(--ink); letter-spacing: 0; margin-left: 4px; font-size: 12px; }
select, .share-input {
  min-height: 36px; border-radius: 6px; border: 1px solid var(--key-edge); background: var(--key);
  padding: 0 10px; width: 100%; color: var(--ink);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--led); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }

/* sliders: groove + square cap */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #b9b3a7; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #b9b3a7; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 22px; margin-top: -8px; border-radius: 3px;
  background: linear-gradient(var(--key), var(--key-2)); border: 1px solid var(--key-edge);
  box-shadow: 0 1px 0 var(--key-edge), inset 0 -2px 0 var(--led);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px; border-radius: 3px; background: linear-gradient(var(--key), var(--key-2));
  border: 1px solid var(--key-edge); box-shadow: inset 0 -2px 0 var(--led);
}

/* presets */
.presets { display: grid; gap: 0; border-top: 1px solid var(--line); }
.preset {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 4px; cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
}
.preset:hover { background: rgba(255,255,255,.35); }
.preset .led { margin-left: 4px; }
.preset[aria-current="true"] .led { background: var(--led); box-shadow: 0 0 6px var(--led); }
.preset .p-name { font-weight: 600; display: block; }
.preset .p-meta { font: 500 12px/1.3 var(--font-label); letter-spacing: .04em; color: var(--ink-2); }
.tag-unverified { font: 600 10px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; background: #f6dfa6; border-radius: 3px; padding: 4px 6px; white-space: nowrap; }

/* beat editor */
.beat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.beat-head .field.inline { margin-left: auto; }
.beat-sub { display: grid; gap: 10px; }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--key-edge); border-radius: var(--r); overflow: hidden; }
.seg-btn {
  border: 0; background: linear-gradient(var(--key), var(--key-2)); color: var(--ink-2); padding: 0 14px; min-height: 34px; cursor: pointer;
  font: 600 12px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--key-edge); }
.seg-btn[aria-pressed="true"] { background: #2b2a27; color: #fff; }
.field.inline select { width: auto; }
.bar-tabs { display: flex; gap: 6px; }
.bar-tab {
  flex: 1; min-height: 30px; border-radius: 5px; border: 1px solid var(--key-edge); background: var(--key);
  color: var(--ink-2); cursor: pointer; font: 600 12px/1 var(--font-mono);
}
.bar-tab[aria-pressed="true"] { background: #2b2a27; color: #fff; border-color: #2b2a27; }
.bar-tab.playing { box-shadow: inset 0 -3px 0 var(--led); }

.grid-wrap { overflow-x: auto; }
.grid { display: grid; grid-template-columns: 70px repeat(16, minmax(14px, 1fr)); gap: 3px; align-items: center; min-width: 340px; }
.grid .num { font: 600 9px/1 var(--font-mono); color: var(--ink-2); text-align: center; padding-bottom: 2px; }
.grid .num.g, .grid .cell.g { margin-left: 3px; }
.grid .rl { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.grid .rl.mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.grid .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cell {
  height: 26px; border-radius: 4px; padding: 0; cursor: pointer;
  border: 1px solid var(--key-edge); background: linear-gradient(var(--key), var(--key-2));
  box-shadow: 0 1px 0 var(--key-edge);
}
.cell.on { background: var(--c, var(--led)); border-color: rgba(0,0,0,.25); box-shadow: 0 0 8px color-mix(in srgb, var(--c, var(--led)) 55%, transparent); }
.cell.ph { outline: 2px solid var(--ink); outline-offset: -1px; }
.roll .cell { height: 20px; }
.roll .cell.root:not(.on) { background: #ddd8cd; }


/* pads */
.pad-props { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.3); }

/* themes */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-btn {
  min-height: 54px; border-radius: 8px; border: 3px solid #2b2a27; cursor: pointer;
  display: flex; align-items: flex-end; padding: 7px 8px;
  font: 700 11px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
}
.theme-btn[aria-pressed="true"] { outline: 2px solid var(--led); outline-offset: 2px; }

/* locked pro items */
.locked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.locked-title { font: 700 11px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--led); margin-right: 4px; }
.locked-item {
  font: 600 12px/1 var(--font-label); letter-spacing: .04em; color: var(--ink-2); text-decoration: none;
  padding: 7px 9px; border: 1px dashed var(--key-edge); border-radius: 5px;
}
.locked-item:hover { color: var(--ink); border-color: var(--ink-2); }
.foot { display: flex; flex-wrap: wrap; gap: 14px; font: 500 12px/1 var(--font-label); letter-spacing: .04em; }
.foot a { color: var(--ink-2); }

/* start overlay */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(13, 15, 28, 0.62); z-index: 20;
}
.start-card { text-align: center; display: grid; gap: 14px; justify-items: center; color: #f1efe9; }
.start-title { font: 800 clamp(40px, 11vw, 84px)/0.95 var(--font-display); letter-spacing: -0.04em; margin: 0; }
.start-sub { margin: 0; font: 600 14px/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: #c9c6d8; }
.start-btn {
  margin-top: 6px; width: 92px; height: 92px; border-radius: 50%; cursor: pointer;
  border: 1px solid #c8410f; background: radial-gradient(circle at 40% 35%, #ff7a45, var(--led) 60%);
  box-shadow: 0 5px 0 #b33a0c, 0 0 0 10px rgba(255, 90, 31, .15); color: #fff; display: grid; place-items: center;
}
.start-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #b33a0c, 0 0 0 10px rgba(255, 90, 31, .15); }
.start-small { margin: 0; font: 500 12px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #a9a6bb; }

.dialog { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(30,29,26,.45); z-index: 30; }
.dialog-card { width: min(460px, 100%); background: var(--case); border-radius: 12px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.dialog-card h2 { margin: 0; font: 800 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.share-input { font-family: var(--font-mono); font-size: 12px; }

.waitlist-card {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  width: min(330px, calc(100% - 32px)); background: var(--case); border: 1px solid var(--key-edge);
  border-radius: 12px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.waitlist-card p { margin: 0; font-size: 14px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: #2b2a27; color: #ffb38f; padding: 10px 14px; border-radius: 6px;
  font: 600 13px/1.3 var(--font-mono);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- full-screen modes ---------- */
/* Beat maker: small screen on top, big editor below with steps and melody side by side */
body.beat-full .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 30%) minmax(0, 1fr); }
body.beat-full .tabs, body.beat-full .locked, body.beat-full .foot, body.beat-full #segView,
body.beat-full #tab-play, body.beat-full #tab-pads, body.beat-full #tab-look, body.beat-full .topbar .top-actions { display: none !important; }
body.beat-full #tab-beat { display: flex !important; }
body.beat-full .transport { grid-template-columns: auto minmax(0, 320px) auto; justify-content: start; }
body.beat-full .beat-sub { grid-template-columns: minmax(0, 1fr) 260px; align-items: end; }
body.beat-full .cell { height: 32px; }
body.beat-full .roll .cell { height: 22px; }
.grid-wrap.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grid-pane { min-width: 0; overflow-x: auto; }
.pane-title { margin: 0 0 8px; font: 700 11px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* Screen only: hide the panel, the canvas fills the window */
body.stage-full .layout { grid-template-columns: minmax(0, 1fr); padding: 0; }
body.stage-full .panel, body.stage-full .topbar { display: none; }
body.stage-full .screen { border-radius: 0; border: 0; }
body.stage-full .shell { grid-template-rows: minmax(0, 1fr); }

/* ---------- phones / portrait ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 48%); gap: 8px; padding: 0 8px 8px; }
  .brand-by { display: none; }
  .top-actions .yt { display: none; }
  .screen { border-width: 4px; }
  body.beat-full .layout { grid-template-rows: minmax(120px, 26%) minmax(0, 1fr); }
  body.beat-full .beat-sub { grid-template-columns: minmax(0, 1fr); }
  .grid-wrap.split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .transport { grid-template-columns: auto minmax(0, 1fr); }
  .transport .led-btn { grid-column: 1 / -1; }
  .tab .led { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark circle, .tip-target { animation: none; }
  .toast, .stage-hint { transition: none; }
}

/* ---------- content pages (pro, privacy) ---------- */
body.page { overflow: auto; }
.page-wrap { max-width: 980px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; }
.page-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 14px; margin-bottom: 24px; }
.prose { max-width: 66ch; }
.prose h1 { font: 800 clamp(28px, 5vw, 44px)/1.05 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; margin: 0 0 12px; }
.prose h2 { font: 700 13px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 28px 0 8px; }
.prose .muted { color: var(--ink-2); }
.todo { background: #f6dfa6; color: #6b4600; padding: 0 4px; border-radius: 3px; font-family: var(--font-mono); font-size: 13px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 32px; }
.hero h1 { font: 800 clamp(30px, 5.6vw, 54px)/1.0 var(--font-display); letter-spacing: -0.035em; margin: 10px 0 14px; text-wrap: balance; }
.hero p { color: var(--ink-2); font-size: 17px; margin: 0; max-width: 46ch; }
.hero .screen-frame { background: var(--screen); border: 6px solid #2b2a27; border-radius: 14px; overflow: hidden; }
.hero canvas { width: 100%; aspect-ratio: 4 / 3; max-width: 100%; display: block; }
.price-card { border-radius: 14px; padding: 20px; display: grid; gap: 14px; background: var(--case-2); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); margin-bottom: 36px; }
.price { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.price strong { font: 800 32px/1 var(--font-display); letter-spacing: -0.03em; }
.price span { color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pill .led { background: var(--led); box-shadow: 0 0 6px var(--led); }
.wl-form { display: grid; gap: 10px; max-width: 520px; }
.wl-form input[type="email"] { min-height: 44px; border-radius: 6px; border: 1px solid var(--key-edge); background: var(--key); padding: 0 12px; width: 100%; }
.wl-form .check { align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.wl-form .check input { margin-top: 2px; flex: none; }
.wl-msg { font-size: 14px; margin: 0; }
.wl-msg.ok { color: var(--ok); }
.wl-msg.err { color: var(--danger); }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 24px; margin-bottom: 36px; }
.feature { padding: 14px 0; border-bottom: 1px solid var(--line); }
.feature h3 { margin: 0 0 4px; font: 700 15px/1.3 var(--font-body); }
.feature p { margin: 0; color: var(--ink-2); font-size: 14px; }
.table-wrap { overflow-x: auto; margin-bottom: 36px; }
table.compare { border-collapse: collapse; width: 100%; min-width: 420px; }
.compare th { font: 700 11px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.compare th, .compare td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 110px; }
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .no { color: var(--ink-2); }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--ink-2); margin: 8px 0 0; }
.page-foot { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--font-label); letter-spacing: .04em; }
.page-foot a { color: var(--ink-2); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }