@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Colours are the plugins' own (src/ui/Look.h). Amber = raw voice, mint = through Glidewire. */
:root {
  --ground: #10151d;
  --panel: #18202c;
  --raised: #222d3d;
  --outline: #314057;
  --well: #0b0f15;
  --text: #e8edf4;
  --dim: #93a1b5;
  --mint: #65e5bd;
  --mint-soft: rgb(101 229 189 / .16);
  --amber: #ffb454;

  --gutter: 16px;
  --indent: 40px;          /* space between the page edge column and the content: the wire rail lives here */
  --rail: 15px;            /* rail x, measured from the content column's outer edge */
  --radius: 14px;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 32px; --indent: 84px; --rail: 30px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; --indent: 112px; --rail: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.55 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 1100px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--mint); text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2rem, 6vw, 3.4rem); }
h3 { font-size: 1.5rem; letter-spacing: -.01em; }
p { margin: 0; }
s { color: var(--dim); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--mint); color: var(--well); font-weight: 700; border-radius: 8px; }
.skip:focus { top: 12px; }

/* One content column; everything hangs to the right of the wire rail. */
.rack {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: calc(var(--gutter) + var(--indent));
  padding-right: var(--gutter);
}
section.rack { padding-top: clamp(80px, 11vw, 140px); }
.section-lede { max-width: 34em; margin-top: 18px; color: var(--dim); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--mint); color: var(--well);
  font-weight: 700; font-size: 1.0625rem; font-stretch: 112%; text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 10px 34px -10px rgb(101 229 189 / .55);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { background: #7eedca; box-shadow: 0 12px 40px -8px rgb(101 229 189 / .7); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .9375rem; border-radius: 10px; box-shadow: none; }
.btn--big { min-height: 64px; padding: 0 40px; font-size: 1.1875rem; }
.btn--ghost { background: transparent; color: var(--mint); box-shadow: inset 0 0 0 2px var(--mint); }
.btn--ghost:hover { background: var(--mint-soft); box-shadow: inset 0 0 0 2px var(--mint); }

/* ---------- Header ---------- */
.top {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  height: 64px; padding: 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-stretch: 125%; font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; }
.brand__mark { width: 28px; height: 28px; fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brand__mark circle { fill: var(--mint); stroke: none; }
.top__nav { display: flex; gap: 20px; margin-left: auto; }
.top__nav a { color: var(--dim); text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 10px 0; }
.top__nav a:hover { color: var(--text); }
.wide-only { display: none; }
@media (min-width: 760px) { .wide-only { display: inline-flex; } .top { height: 72px; } .top__nav { gap: 28px; } }

/* ---------- Wire ---------- */
.wire { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; overflow: visible; }
.wire path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire__base { stroke: var(--outline); stroke-width: 2; }
.wire__glow { stroke: var(--mint); stroke-width: 10; opacity: .14; }
.wire__core { stroke: var(--mint); stroke-width: 2.5; }
.wire__head { fill: #c9fbe9; }
.wire__head-glow { fill: var(--mint); fill-opacity: .22; }

.jack {
  position: absolute; z-index: 3;
  left: calc(var(--gutter) + var(--rail) - 8px);
  width: 16px; height: 16px; margin-top: 10px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--outline);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.jack.is-lit { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 5px var(--mint-soft), 0 0 22px 2px rgb(101 229 189 / .6); }
.jack--side.is-lit { background: var(--ground); }
.rack > .jack--end { width: 22px; height: 22px; left: calc(var(--gutter) + var(--rail) - 11px); margin-top: 34px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 64px; }
@media (min-width: 760px) { .hero { padding-top: 72px; } }
.hero__well {
  position: relative; z-index: 0;
  height: clamp(190px, 23vw, 330px);
  background: var(--well);
  border-block: 1px solid var(--outline);
}
.pitch { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pitch .row { stroke: var(--outline); stroke-width: 1; opacity: .7; }
.pitch .bar { stroke: var(--raised); stroke-width: 1; }
.pitch .note { fill: var(--dim); font: 600 11px "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.pitch .sung, .pitch .tuned { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pitch .sung { stroke: var(--amber); stroke-width: 2.5; }
.pitch .sung-ghost { stroke: var(--amber); stroke-width: 1.75; opacity: .55; fill: none; }
.pitch .tuned { stroke: var(--mint); stroke-width: 3; }
.pitch .tuned-glow { stroke: var(--mint); stroke-width: 12; opacity: .14; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pitch .scan { stroke: var(--mint); stroke-width: 1.5; }
.pitch .scan-glow { fill: url(#scanfade); }
.pitch__legend { position: absolute; right: var(--gutter); top: 12px; display: flex; gap: 16px; font-size: .75rem; font-weight: 600; color: var(--dim); }
.pitch__legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--amber); }
.pitch__legend .tuned::before { background: var(--mint); }

.hero__body { display: grid; column-gap: 32px; padding-top: clamp(28px, 4vw, 44px); padding-bottom: 8px; }
.hero h1 { grid-column: 1 / -1; font-size: clamp(2.65rem, 6.1vw, 5.4rem); line-height: .96; letter-spacing: -.03em; }
.lede { max-width: 30em; margin-top: 18px; color: var(--dim); font-size: 1.0625rem; }
@media (min-width: 1100px) { .lede { font-size: 1.25rem; } }
.hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.price-note { color: var(--dim); font-size: .9375rem; }
.price-note s { margin-right: 4px; }
.text-link { display: inline-block; margin-top: 18px; padding: 8px 0; font-weight: 600; }
@media (min-width: 900px) { .hero__body { grid-template-columns: 1fr auto; align-items: start; } }
.clip { margin: 32px 0 0; width: min(200px, 56vw); }
.clip video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--well); border-radius: var(--radius); border: 1px solid var(--outline); box-shadow: 0 30px 60px -20px #000; }
.clip figcaption { margin-top: 10px; color: var(--dim); font-size: .875rem; }
.clip--placeholder video { border: 2px dashed var(--amber); }
.clip--placeholder figcaption { color: var(--amber); }

/* ---------- A/B player ---------- */
.player {
  margin-top: 36px;
  background: var(--panel);
  border: 1px solid var(--outline);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 rgb(255 255 255 / .04);
}
@media (min-width: 760px) { .player { padding: 24px; } }
.player__examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px; background: var(--well); border-radius: 14px; }
.ex {
  min-height: 52px; padding: 8px 6px;
  background: transparent; color: var(--dim);
  border: 0; border-radius: 10px;
  font: inherit; font-size: .8125rem; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ex b { display: block; font-weight: 700; }
.ex span { display: none; margin-top: 4px; font-size: .8125rem; }
.tag { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--outline); border-radius: 4px; color: var(--dim); font-size: .6875rem; font-weight: 600; line-height: 1.5; vertical-align: 1px; }
.ex:hover { color: var(--text); }
.ex[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--outline); }
@media (min-width: 760px) { .player__examples { grid-template-columns: repeat(4, 1fr); } .ex { padding: 12px 14px; font-size: 1rem; text-align: left; } .ex span { display: block; } }

.player__wave { position: relative; height: 128px; margin-top: 14px; background: var(--well); border-radius: 12px; overflow: hidden; }
@media (min-width: 760px) { .player__wave { height: 168px; } }
.player__wave canvas { width: 100%; height: 100%; display: block; }
.player__wave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.player__wave:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
.player__time { position: absolute; right: 10px; bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; pointer-events: none; }

.player__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.play {
  flex: none; width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--outline); border-radius: 50%; cursor: pointer;
  transition: background-color .2s ease;
}
.play:hover { background: #2b384b; }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.play .i-pause, .play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: inline; }
.play.is-loading svg { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.ab { display: flex; align-items: center; gap: 12px; }
.ab__label { padding: 12px 2px; background: none; border: 0; color: var(--dim); font: inherit; font-weight: 700; font-size: 1.0625rem; font-stretch: 112%; cursor: pointer; transition: color .2s ease; }
.ab[data-state="dry"] .ab__label--dry { color: var(--amber); }
.ab[data-state="wet"] .ab__label--wet { color: var(--mint); }
.ab__switch {
  position: relative; width: 96px; height: 52px; flex: none;
  border: 0; border-radius: 26px; cursor: pointer;
  background: rgb(255 180 84 / .22);
  box-shadow: inset 0 0 0 2px var(--amber);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.ab__knob {
  position: absolute; top: 6px; left: 6px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 4px 10px rgb(0 0 0 / .45);
  transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), background-color .25s ease;
}
.ab[data-state="wet"] .ab__switch { background: rgb(101 229 189 / .2); box-shadow: inset 0 0 0 2px var(--mint), 0 0 28px -4px rgb(101 229 189 / .55); }
.ab[data-state="wet"] .ab__knob { transform: translateX(44px); background: var(--mint); }
@media (max-width: 459px) {
  .player__controls { gap: 10px; }
  .play { width: 56px; height: 56px; }
  .ab { gap: 8px; }
  .ab__label { font-size: .9375rem; }
  .ab__switch { width: 80px; height: 46px; }
  .ab__knob { width: 34px; height: 34px; }
  .ab[data-state="wet"] .ab__knob { transform: translateX(34px); }
}
.player__status { margin-top: 14px; color: var(--dim); font-size: .875rem; min-height: 2.8em; }

/* ---------- Chain ---------- */
.mods { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: clamp(56px, 7vw, 96px); }
.mod { display: grid; gap: 20px; }
.mod__text { max-width: 26em; }
.mod__n { display: block; margin-bottom: 8px; color: var(--dim); font-weight: 800; font-stretch: 125%; font-size: .9375rem; font-variant-numeric: tabular-nums; transition: color .35s ease; }
.mod h3 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
.mod p { margin-top: 10px; color: var(--dim); }
.mod img { width: 100%; border-radius: 12px; border: 1px solid var(--outline); box-shadow: 0 30px 70px -30px #000; transition: opacity .6s ease, filter .6s ease; }
.wired .mod:not(.is-lit) img { opacity: .6; filter: saturate(.5); }
.mod.is-lit .mod__n { color: var(--mint); }
.mod .jack { margin-top: 4px; }
.rack > .jack { margin-top: clamp(8px, 1.6vw, 19px); }
@media (min-width: 900px) {
  .mod { grid-template-columns: minmax(260px, 340px) 1fr; gap: 56px; align-items: center; }
  /* Tune is the product's centre: full-width screenshot under its text. */
  .mod--feature { grid-template-columns: 1fr; gap: 28px; }
  .mod--feature .mod__text { max-width: 40em; }
}
.companions__title { margin-top: clamp(88px, 12vw, 140px); font-size: 1.25rem; font-stretch: 100%; font-weight: 700; letter-spacing: 0; color: var(--dim); }
.mods--side { margin-top: 32px; }
@media (min-width: 900px) {
  .mods--side { grid-template-columns: 1fr 1fr; gap: 48px; }
  .mod--side { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Included ---------- */
.facts { display: grid; margin: 40px 0 0; }
.fact { padding: 22px 0; border-top: 1px solid var(--outline); }
.fact dt { font-weight: 700; font-size: 1.25rem; font-stretch: 112%; }
.fact dd { margin: 6px 0 0; color: var(--dim); max-width: 30em; }
.fact--big { border-top: 0; padding-top: 0; }
.figure { display: block; font-size: clamp(5rem, 17vw, 10rem); font-weight: 800; font-stretch: 125%; line-height: .9; letter-spacing: -.04em; color: var(--mint); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .facts { grid-template-columns: minmax(280px, 1fr) 1fr 1fr; column-gap: 48px; }
  .fact--big { grid-row: span 2; align-self: start; }
}

/* ---------- Price ---------- */
.price__card {
  position: relative;
  display: grid; gap: 32px;
  padding: clamp(28px, 5vw, 56px);
  background: var(--panel);
  border: 1px solid var(--outline);
  border-radius: 24px;
  box-shadow: 0 50px 100px -50px #000, inset 0 1px 0 rgb(101 229 189 / .35);
}
.price__name { font-weight: 700; font-stretch: 112%; color: var(--dim); }
.price__amount { margin-top: 6px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.price__amount s { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; font-stretch: 112%; }
.price__amount span { font-size: clamp(3.3rem, 15vw, 7.5rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.price__terms { margin-top: 18px; font-size: 1.125rem; }
.price__card .btn { margin-top: 30px; width: 100%; }
@media (min-width: 760px) { .price__card .btn { width: auto; } }
.price__small { margin-top: 16px; color: var(--dim); font-size: .9375rem; }
.price__list { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--outline); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-weight: 600; }
.price__list li { display: flex; align-items: center; gap: 10px; }
.price__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
@media (min-width: 900px) {
  .price__card { grid-template-columns: 1fr 200px; gap: 56px; align-items: center; }
  .price__list { grid-template-columns: 1fr; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--outline); gap: 16px; }
}

/* ---------- Free Key ---------- */
.free { display: grid; gap: 24px; align-items: center; }
.free h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
.free p { margin-top: 12px; color: var(--dim); max-width: 32em; }
@media (min-width: 900px) { .free { grid-template-columns: 1fr auto; } }

/* ---------- FAQ ---------- */
.faq { max-width: 1280px; }
.faq h2 { margin-bottom: 28px; }
.faq details { max-width: 760px; border-top: 1px solid var(--outline); }
.faq details:last-of-type { border-bottom: 1px solid var(--outline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.1875rem; font-stretch: 112%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--mint), var(--mint)) center / 100% 2px no-repeat, linear-gradient(var(--mint), var(--mint)) center / 2px 100% no-repeat; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq details ol { margin: 0 0 20px; color: var(--dim); max-width: 36em; }
.faq details ol { padding-left: 1.3em; }
.faq details li + li { margin-top: 6px; }

/* ---------- Footer ---------- */
.foot { padding-top: 88px; padding-bottom: 48px; color: var(--dim); font-size: .875rem; }
.foot__privacy { max-width: 46em; }
.foot__privacy + .foot__privacy { margin-top: 14px; }
.foot__privacy b { color: var(--text); }
.foot__legal { margin-top: 14px; }

/* ---------- Phone buy bar ---------- */
.buybar {
  position: fixed; z-index: 20;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px;
  background: var(--raised);
  border: 1px solid var(--outline);
  border-radius: 16px;
  box-shadow: 0 16px 40px -10px #000;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.buybar b { font-size: 1.25rem; font-stretch: 112%; }
.buybar s { margin-left: 6px; font-size: .9375rem; }
.buybar .btn { min-height: 52px; padding: 0 22px; box-shadow: none; }
/* Hidden also means out of the tab order and screen-reader tree (visibility switches after the slide). */
.buybar.is-hidden { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s; }
@media (max-width: 759px) { .foot { padding-bottom: 120px; } }
@media (min-width: 760px) { .buybar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}