/* DJ Waveforms - site stylesheet
   Palette lifted from the app (ui/app.css): slate-navy darks, #f2b50a gold accent,
   band colours (red/green/blue) reserved for waveform art only.
   Type: system sans for display/body, ui-monospace for the technical voice
   (eyebrows, values, keys) - the same voice the app itself uses. */

/* Muted palette pass: backgrounds a step lighter, text a step softer, and the three
   band accents pulled from the app's own cue palette (softer chroma than the old
   saturated red/green/blue) - less contrast, more of the app's actual voice. */
:root{
  --bg:#0e1119;
  --bg2:#121520;
  --panel:#151a26;
  --panel2:#1a2030;
  --line:rgba(158,175,214,.12);
  --line2:rgba(158,175,214,.22);
  --text:#dde4f0;
  --body:#aeb9cc;
  --dim:#8791a5;
  --gold:#f2c24c;
  --gold2:#ffd166;
  --red:#e85555;
  --grn:#4cbf5e;
  --blu:#4f9cf2;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Cascadia Code",monospace;
  --rad:14px;
  --rad-s:10px;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}   /* smooth anchor scrolls that clear the sticky header */
/* dark scrollbars to match the dark scheme (color-scheme flips the native ones;
   scrollbar-color covers Chrome/Firefox; the webkit rules cover Safari) */
:root{color-scheme:dark}
html{scrollbar-color:#242c3d var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#212939;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2b3448}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3{color:var(--text);margin:0}
::selection{background:rgba(242,194,76,.26)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(76px,9vw,130px) 0}
.section-tight{padding:clamp(48px,6vw,84px) 0}

/* ---- the technical voice ---- */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px;
}
.eyebrow .bands{display:inline-flex;gap:3px;flex:none}
.eyebrow .bands i{width:4px;height:11px;border-radius:2px}
/* the four arcs of the logo: red, gold, pink, blue */
.eyebrow .bands i:nth-child(1){background:#e2584c}
.eyebrow .bands i:nth-child(2){background:#ecc351}
.eyebrow .bands i:nth-child(3){background:#e364b0}
.eyebrow .bands i:nth-child(4){background:#5793ee}
.mono{font-family:var(--mono)}
.gold{color:var(--gold)}

/* value + label pair, exactly like the app header ("112.38 BPM") */
.stat{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.stat b{font:700 15px/1 var(--mono);color:var(--gold)}
.stat span{font:600 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

h2.title{font-size:clamp(30px,4.4vw,44px);font-weight:760;letter-spacing:-.025em;line-height:1.06;margin:0 0 14px}
.section-sub{max-width:620px;font-size:17.5px;color:var(--dim);margin:0 0 8px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:11px;border:1px solid transparent;
  font:650 15.5px/1 var(--sans);letter-spacing:.01em;cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#0d0f16}
.btn-gold:hover{background:var(--gold2)}
.btn-ghost{border-color:var(--line2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* the Buy buttons: gold outline at rest, filled gold on hover */
.btn-buy{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-buy:hover{background:var(--gold);border-color:var(--gold);color:#0d0f16}
.btn-s{padding:9px 16px;font-size:14px;border-radius:9px}
.btn .k{font:700 13px/1 var(--mono);opacity:.75}

/* ---- header ---- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font:700 16px/1 var(--sans);color:var(--text);letter-spacing:-.01em}
.brand svg{display:block}
.brand img{display:block;width:24px;height:22px;object-fit:contain}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{
  padding:8px 12px;border-radius:8px;font:520 14.5px/1 var(--sans);color:var(--dim);
  transition:color .15s ease,background .15s ease;
}
.site-nav a:hover{color:var(--text);background:var(--panel2)}
.head-buy{margin-left:6px}
.mnav{display:none;position:relative;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;padding:9px;border:1px solid var(--line2);border-radius:9px;display:flex}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{border-color:var(--gold)}
.mnav-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px;
  display:flex;flex-direction:column;box-shadow:0 24px 60px -18px rgba(0,0,0,.75);
}
.mnav-panel a{padding:11px 14px;border-radius:8px;color:var(--body);font-size:15px}
.mnav-panel a:hover{background:var(--panel2);color:var(--text)}

/* ---- hero (centered) ---- */
.hero{padding:clamp(66px,9vw,120px) 0 clamp(48px,6vw,84px);position:relative;text-align:center}
.hero .wrap{max-width:1280px}   /* the hero breathes wider than the body sections */
.hero .eyebrow{justify-content:center}
.hero h1{
  font-size:clamp(40px,6.4vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1.04;
  max-width:25ch;margin:0 auto 22px;   /* wraps as "Stacked moving waveforms" / "for Ableton Live" */
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{max-width:640px;font-size:clamp(17px,2vw,19.5px);line-height:1.6;color:var(--body);margin:0 auto 32px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hero-fine{font:500 13px/1.7 var(--mono);color:var(--dim);letter-spacing:.02em}
.hero-fine b{color:var(--gold);font-weight:600}

/* the live deck lane - the page's signature. Chrome = the app's own macOS title bar,
   so the whole card reads as a screenshot of the real window, in motion. */
.lane{
  margin-top:clamp(44px,6vw,72px);
  border:1px solid var(--line2);border-radius:var(--rad);
  background:var(--panel);overflow:hidden;position:relative;text-align:left;
}
.lane-mac{
  display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;
  background:linear-gradient(#11131b,#0c0e14);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.lane-mac .tl{display:inline-flex;gap:8px;flex:none;margin-right:2px}
.lane-mac .tl i{width:12px;height:12px;border-radius:50%}
.lane-mac .tl .c1{background:#ff5f57}
.lane-mac .tl .c2{background:#febc2e}
.lane-mac .tl .c3{background:#28c840}
.lane-mac .mac-title{font:600 13px/1 var(--sans);letter-spacing:.3px;color:#aab3c5}
.lane-mac .mac-title b{color:#fff;font-weight:600}
/* value + label pairs, verbatim app header voice (.stat .v / .stat .k in app.css) */
.lane-mac .mac-stat{display:flex;align-items:baseline;gap:5px}
.lane-mac .mac-stat .v{font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.lane-mac .mac-stat .vbpm{color:#ffd166}
.lane-mac .mac-stat .vsnap{color:#5fd0ff}
.lane-mac .mac-stat .k{color:var(--dim);font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.6px}
/* the waveform-style switch - chrome-less like the app's header icons: grey, white on hover */
.lane-style{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font:600 11px/1 var(--mono);letter-spacing:.12em;color:#7e879b;text-transform:uppercase;
  transition:color .12s;
}
.lane-style:hover{color:#fff}
.lane-style b{font-weight:600;min-width:96px;text-align:right;white-space:nowrap}
@media (max-width:640px){.lane-style b{display:none}.lane-mac{gap:11px}}
.lane-stage{position:relative}
.lane-stage > canvas{display:block;width:100%;height:400px}
@media (max-width:640px){.lane-stage > canvas{height:264px}}
/* per-lane deck tags, overlaid like the app rail's soft-grey labels */
.lane-tag{
  position:absolute;left:14px;pointer-events:none;
  font:600 10px/1 var(--mono);letter-spacing:.18em;color:rgba(214,226,248,.6);
  background:rgba(8,10,15,.55);border:1px solid rgba(158,175,214,.14);border-radius:5px;
  padding:4px 8px 3px;
}
.lane-tag.ta{top:10px}
.lane-tag.tb{top:calc(50% + 11px)}

/* ---- timeline band (a real sequence: 2007 / 2012 / 2026) ---- */
.era{border-block:1px solid var(--line);background:var(--bg2)}
.era .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.era-item{padding:30px 28px 32px;border-left:1px solid var(--line)}
.era-item:first-child{border-left:none;padding-left:0}
.era-item .yr{font:700 15px/1 var(--mono);color:var(--gold);letter-spacing:.06em;display:block;margin-bottom:10px}
.era-item p{font-size:15px;color:var(--dim);margin:0;max-width:30ch}
.era-item p b{color:var(--body);font-weight:600}

/* ---- manifesto ---- */
.manifesto p{
  font-size:clamp(22px,3.1vw,31px);line-height:1.42;font-weight:530;letter-spacing:-.015em;
  color:var(--text);max-width:22em;margin:0;
}
.manifesto p+p{margin-top:1.1em}
.manifesto .hl{color:var(--gold)}
.manifesto .soft{color:var(--dim)}

/* ---- screens carousel ---- */
.shots{position:relative;margin-top:34px}
.shots-track{
  display:flex;gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px max(24px,calc(50% - 470px)) 10px;
  scrollbar-width:none;cursor:grab;
}
.shots-track::-webkit-scrollbar{display:none}
.shots-track.dragging{cursor:grabbing;scroll-snap-type:none}
.shots-track.gliding{scroll-snap-type:none}   /* snap stays off while the JS glide animates - re-enabling mandatory snap mid-flight is the release "jump" */
.shot{flex:0 0 min(940px,88%);scroll-snap-align:none center;margin:0} /* block-axis none: a plain "center" lets the carousel hijack PAGE scrolling in Chromium */
.shot-frame{
  position:relative;border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden;
  background:var(--panel);aspect-ratio:1500/980;
  box-shadow:0 34px 90px -34px rgba(0,0,0,.85);
}
.shot-frame img,.shot-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  font:600 11px/1.6 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;
  background:rgba(10,12,17,.72);border:1px solid var(--line2);border-radius:10px;padding:13px 20px;
  pointer-events:none;
}
.shot-badge b{color:var(--gold);font-weight:600;text-transform:none;letter-spacing:.03em}
.shot figcaption{display:flex;gap:12px;align-items:baseline;margin-top:14px;padding:0 4px}
.shot figcaption .n{font:700 13px/1 var(--mono);color:var(--gold);flex:none}
.shot figcaption .c{font-size:14.5px;color:var(--dim)}
.shot figcaption .c b{color:var(--body);font-weight:620}

.shots-ui{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px}
.shots-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;
  color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s;
}
.shots-btn:hover{border-color:var(--gold);color:var(--gold)}
.shots-dots{display:flex;gap:8px}
.shots-dots button{
  width:8px;height:8px;border-radius:99px;border:none;background:var(--line2);
  cursor:pointer;padding:0;transition:width .2s,background .2s;
}
.shots-dots button.on{width:22px;background:var(--gold)}

/* ---- features ---- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.feat{
  border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);
  padding:28px 28px 26px;display:flex;flex-direction:column;gap:14px;min-height:230px;
  transition:border-color .2s ease;
}
.feat:hover{border-color:var(--line2)}
.feat h3{font-size:19px;font-weight:700;letter-spacing:-.014em}
.feat p{font-size:15.5px;line-height:1.62;color:var(--dim);margin:0;max-width:52ch}
.feat p b{color:var(--body);font-weight:600}
.feat-art{margin-top:auto;padding-top:18px;min-height:56px;display:flex;align-items:flex-end}

/* bespoke card art, all built from app vocabulary */
.mini-wave{width:100%;height:52px;border-radius:8px;display:block}

.cue-row{position:relative;width:100%;height:52px;border-radius:8px;background:var(--bg2);overflow:hidden}
.cue-row i{position:absolute;top:0;bottom:0;width:2px;opacity:.9}
.cue-row b{
  position:absolute;top:7px;transform:translateX(-50%);
  font:700 10.5px/1 var(--mono);color:#0d0f16;border-radius:5px;padding:3px 7px;white-space:nowrap;
}
.cue-row .grid-i{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.6}

/* the colour-map overview strip (the "section fill" feature box) - a minimap like the app's overview */
.ovw-map{position:relative;width:100%;height:52px;border-radius:8px;background:var(--bg2);overflow:hidden}
.ovw-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ovw-map i{position:absolute;top:0;bottom:0;width:2px;opacity:.9}
.ovw-map b{position:absolute;top:7px;transform:translateX(-50%);font:700 10.5px/1 var(--mono);color:#0d0f16;border-radius:5px;padding:3px 7px;white-space:nowrap}

/* the app's loop pads, verbatim (.dp-pad-grid in app.css): 2 rows of 4, one active */
.pad-grid{width:100%;display:flex;flex-wrap:wrap;gap:4px}
.pad-grid span{
  flex:1 1 calc(25% - 3px);min-width:30px;height:22px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#1e232f;border:1px solid #2a3344;border-radius:5px;color:#9aa4b8;
  font:700 11px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pad-grid span.on{background:#ffb238;color:#06080c;border-color:transparent}   /* the active loop, amber like the loop brace */

.kbd-row{display:flex;gap:8px;flex-wrap:wrap}
.kbd{
  font:650 12.5px/1 var(--mono);color:var(--text);
  background:#161c29;border:1px solid #2a3348;border-bottom-width:2.5px;border-radius:7px;
  padding:7px 11px;white-space:nowrap;
}
.kbd.blue{color:var(--blu);border-color:rgba(79,156,242,.42)}
/* LEARN keeps REAL (darker gold) borders so its box renders exactly as tall as SHIFT -
   a transparent border let the gold fill paint under it and read taller */
.kbd.gold{color:#0d0f16;background:var(--gold);border-color:#b28f38;border-bottom-color:#8f7229}

/* the app's mixer knobs, verbatim geometry (mixer.js makeKnob + .mxKnob/.mxKLabel):
   44px SVG, 270-degree arc, bipolar fills anchored at the default - drawn by site.js */
.mix-knobs{display:flex;gap:10px;width:100%;justify-content:space-between;flex-wrap:wrap}
.mix-knobs .mxKnob{display:flex;flex-direction:column;align-items:center;pointer-events:none;user-select:none}
.mix-knobs .mxKnob svg{display:block;overflow:visible}
.mix-knobs .mxKLabel{
  font:400 9px/1.3 var(--sans);color:var(--dim);letter-spacing:.02em;max-width:58px;margin-top:-4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}

.cam-art{display:flex;align-items:center;gap:16px}
.cam-art svg{flex:none}
.cam-chips{display:flex;gap:8px;flex-wrap:wrap}
.cam-chip{font:700 12px/1 var(--mono);padding:6px 10px;border-radius:7px;border:1px solid var(--line2)}

/* the app's snapshot pad row, verbatim (mixer.css .dp-snap / .snapPad): 2 rows of 4 pads + the compact
   MORPH knob. Filled pads rest at a DARKER shade of their colour (site.js snapShade, the app's own math)
   and always read white; one pad carries a mid-glide fill tied 1:1 to the MORPH knob, like the app. */
.snap-art{display:flex;gap:8px;width:100%;align-items:center}
.snap-art .snap-grid{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:4px;align-content:center}
.snap-art .snap-pad{
  flex:1 1 calc(25% - 3px);min-width:30px;height:22px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#232a44;border:1px solid #323c61;border-radius:5px;color:#fff;
  font:700 10px/1 var(--sans);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;
}
.snap-art .snap-pad.empty{color:#4a5480;background:#131728;border-color:#242c4a}
.snap-art .snap-pad.tinted{border-color:transparent}
.snap-art .snap-pad.holdmode::before{
  content:"";position:absolute;top:2px;right:2px;width:0;height:0;
  border-left:5px solid transparent;border-top:5px solid rgba(255,255,255,.4);
}
/* mid-glide fill: the bright glow grows over the resting base by background-size, exactly the app's mechanism */
.snap-art .snap-pad.gliding{
  background-image:linear-gradient(var(--snapGlow),var(--snapGlow));
  background-repeat:no-repeat;background-position:left center;background-origin:border-box;
}
.snap-art .snap-morph{flex:0 0 auto;width:46px;display:flex;flex-direction:column;align-items:center;gap:1px}
.snap-art .snap-morph svg{display:block}
.snap-art .snap-morph .morph-lab{font:800 7.5px/1.3 var(--sans);letter-spacing:.6px;color:#6b7589}

/* ---- how it works ---- */
.how-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;margin-top:44px;align-items:start}
.steps{display:flex;flex-direction:column;counter-reset:step}
.step{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.step .num{
  counter-increment:step;flex:none;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font:700 15px/1 var(--mono);color:var(--gold);
}
.step .num::before{content:counter(step,decimal-leading-zero)}
.step h3{font-size:18px;font-weight:700;margin-bottom:7px;letter-spacing:-.012em}
.step p{font-size:15.5px;color:var(--dim);margin:0;max-width:56ch}
.step p code{font:600 13px/1 var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--body);white-space:nowrap}
.reqs{
  border:1px solid var(--line2);border-radius:var(--rad);background:var(--panel);padding:26px 26px 22px;
  position:sticky;top:88px;
}
.reqs h3{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.reqs ul{list-style:none;margin:0;padding:0}
.reqs li{padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--body)}
.reqs li:first-child{border-top:none;padding-top:0}
.reqs li b{color:var(--text);font-weight:640}
.reqs li .d{color:var(--dim);display:block;font-size:13.5px;margin-top:2px}

/* ---- pricing ---- */
.price-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;margin-top:44px;align-items:stretch}
.price{
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  padding:34px 34px 30px;display:flex;flex-direction:column;
}
.price.hot{border-color:rgba(242,194,76,.5);background:linear-gradient(180deg,rgba(242,194,76,.05),rgba(242,194,76,0) 42%),var(--panel)}
.price .plan{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.price.hot .plan{color:var(--gold)}
.price .plan .pill{font:700 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--gold);border:1px solid rgba(242,194,76,.45);border-radius:99px;padding:4px 9px}
.price .amount{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.price .amount b{font:800 54px/1 var(--sans);letter-spacing:-.03em;color:var(--text)}
.price .amount s{font:600 20px/1 var(--sans);color:var(--dim);text-decoration-thickness:2px}
.price .amount .per{font:600 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.price .blurb{font-size:14.5px;color:var(--dim);margin:0 0 22px}
.price ul{list-style:none;margin:0 0 28px;padding:0}
.price li{
  padding:10px 0 10px 22px;border-top:1px solid var(--line);font-size:15px;color:var(--body);
  position:relative;
}
.price li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:2px;background:var(--gold);opacity:.85}
.price li b{color:var(--text);font-weight:640}
.price .actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.price .fine{font:500 12.5px/1.7 var(--mono);color:var(--dim);margin-top:14px}
.price .fine a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.price .fine a:hover{color:var(--gold)}
.dl-row{display:flex;gap:10px}
.dl-row .btn{flex:1}
.price-foot{margin-top:26px;font-size:14.5px;color:var(--dim)}
.price-foot a{color:var(--gold)}
.price-foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- faq ---- */
.faq-list{max-width:820px;margin-top:38px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;
  padding:21px 4px;font-size:17px;font-weight:640;color:var(--text);letter-spacing:-.008em;
  transition:color .15s;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--gold)}
.faq-list summary .ind{
  flex:none;font:700 15px/1.3 var(--mono);color:var(--gold);width:16px;text-align:center;
  transition:transform .2s ease;
}
.faq-list details[open] summary .ind{transform:rotate(45deg)}
.faq-list .a{padding:0 4px 24px 34px;max-width:66ch}
.faq-list .a p{font-size:15.5px;color:var(--dim);margin:0 0 .8em}
.faq-list .a p:last-child{margin-bottom:0}
.faq-list .a b{color:var(--body);font-weight:600}

/* ---- final cta ---- */
.cta-band{border-top:1px solid var(--line);background:var(--bg2);text-align:center}
.cta-band h2{font-size:clamp(30px,4.6vw,50px);font-weight:790;letter-spacing:-.03em;margin-bottom:14px}
.cta-band .sub{color:var(--dim);font-size:17px;max-width:46ch;margin:0 auto 30px}
.cta-band .hero-cta{justify-content:center}
.cta-band .hero-fine{margin-top:6px}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line);padding:56px 0 42px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand p{font-size:14.5px;color:var(--dim);max-width:34ch;margin:14px 0 0}
.foot-brand .marks{font-size:12.5px;line-height:1.8;color:#6b7488;max-width:52ch;margin-top:16px}
.foot-brand .copy{font-size:12.5px;color:#6b7488;margin-top:12px}
.foot-col h3{font:600 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.foot-col a{display:block;padding:6px 0;font-size:15px;color:var(--body)}
.foot-col a:hover{color:var(--gold)}
.foot-legal{
  border-top:1px solid var(--line);padding-top:22px;
  font-size:12.5px;line-height:1.8;color:#6b7488;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.foot-legal .marks{max-width:66ch}

/* ---- legal / prose pages ---- */
.prose{max-width:760px;padding-top:clamp(48px,7vw,90px);padding-bottom:110px}
.prose h1{font-size:clamp(32px,5vw,46px);font-weight:780;letter-spacing:-.028em;margin-bottom:8px}
.prose .updated{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:44px;display:block}
.prose h2{font-size:21px;font-weight:720;letter-spacing:-.015em;margin:44px 0 12px}
.prose p,.prose li{font-size:16px;line-height:1.7;color:var(--body)}
.prose ul{padding-left:22px;margin:10px 0}
.prose li{margin:6px 0}
.prose a{color:var(--gold)}
.prose a:hover{text-decoration:underline;text-underline-offset:3px}
.prose .card{border:1px solid var(--line2);border-radius:var(--rad-s);background:var(--panel);padding:18px 22px;margin:22px 0}
.prose .card p{margin:0;font-size:15px}
.prose table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px}
.prose th{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line2)}
.prose td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.prose code{font:600 13px/1 var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--body)}

/* ---- responsive ---- */
@media (max-width:980px){
  .feat-grid{grid-template-columns:1fr}
  .feat{min-height:0}
  .how-grid{grid-template-columns:1fr;gap:36px}
  .reqs{position:static}
  .price-grid{grid-template-columns:1fr;max-width:560px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .site-nav,.head-buy{display:none}
  .mnav{display:block}
  .era .wrap{grid-template-columns:1fr}
  .era-item{border-left:none;border-top:1px solid var(--line);padding:22px 0}
  .era-item:first-child{border-top:none}
  .step{gap:16px}
  .dl-row{flex-direction:column}
  .foot-legal{flex-direction:column;gap:14px}
}
@media (max-width:560px){
  .hero-cta .btn{flex:1 1 100%}
  .shot{flex-basis:92%}
}

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