/* YOI Draw product page.
 *
 * The page wears the device's own look rather than the site's black-and-pink
 * brand, the same way the Graphite page does: the YOI interface is the subject,
 * so the page is built out of its graphite, amber and cyan. Those come straight
 * from yoi-modern.css.
 *
 * Everything under .yoi-page also re-points bdd-modern.css's variables, which is
 * how the real controls mounted on this page pick the palette up without a
 * single colour being restated on them.
 *
 * yoi-modern.css itself is deliberately NOT loaded here: it sets
 * `html, body { overflow: hidden }` and absolutely positions the panel for a
 * plug-in window. The device's grid is rebuilt below instead, at the same
 * 1040 × 640 and the same proportions.
 */

@font-face {
  font-family: 'YOI Manrope';
  src: url('/products/yoi/WebUI/Manrope.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'YOI Unbounded';
  src: url('/products/yoi/WebUI/Unbounded.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

.yoi-page {
  --yoi-ground: #111417;
  --yoi-panel: #191d21;
  --yoi-card: #20252a;
  --yoi-well: #0c0e10;
  --yoi-ink: #eef0ec;
  --yoi-muted: #a6aaa5;
  --yoi-faint: #6a716f;
  --yoi-amber: #f2a93b;
  --yoi-cyan: #72c8d5;
  --yoi-coral: #ff735c;
  --yoi-font: 'YOI Manrope', Manrope, sans-serif;
  --yoi-display: 'YOI Unbounded', Unbounded, sans-serif;

  /* bdd-modern.css reads these; the real controls follow them. */
  --bdd-radius: 12px;
  --bdd-font: var(--yoi-font);
  --bdd-display: var(--yoi-display);
  --bdd-ground: var(--yoi-ground);
  --bdd-surface: var(--yoi-panel);
  --bdd-card: #252a2e;
  --bdd-raised: #353a3d;
  --bdd-well: #0c0e10;
  --bdd-sheet: #191d21;
  --bdd-line: rgba(255, 255, 255, 0.1);
  --bdd-line-strong: rgba(255, 255, 255, 0.2);
  --bdd-ink: var(--yoi-ink);
  --bdd-ink-soft: #d3d5cf;
  --bdd-muted: var(--yoi-muted);
  --bdd-faint: var(--yoi-faint);
  --bdd-accent: var(--yoi-amber);

  position: relative;
  width: 100%;
  min-width: 320px;
  overflow: clip;
  margin: 0;
  background: var(--yoi-ground);
  color: var(--yoi-ink);
  font-family: var(--yoi-font);
  font-size: 16px;
  line-height: 1.5;
  isolation: isolate;
}

html:has(.yoi-page),
body:has(.yoi-page) {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--yoi-ground);
  color: var(--yoi-ink);
  font-family: 'YOI Manrope', Manrope, sans-serif;
  -webkit-user-select: auto;
  user-select: auto;
}

.yoi-page *,
.yoi-page *::before,
.yoi-page *::after { box-sizing: border-box; }
.yoi-page [hidden] { display: none !important; }
.yoi-page a { color: inherit; }
.yoi-page button { color: inherit; font: inherit; }
.yoi-page em { color: var(--yoi-amber); font-style: normal; }

.yoi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.yoi-skip-link { position: absolute; top: -200px; left: 16px; z-index: 40; padding: 12px 16px; background: var(--yoi-amber); color: #181713; font: 800 10px/1 var(--yoi-font); letter-spacing: .12em; text-transform: uppercase; }
.yoi-skip-link:focus-visible { top: 16px; }

.yoi-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  content: '';
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  pointer-events: none;
}

.yoi-scroll-progress { position: fixed; z-index: 30; inset: 0 0 auto; height: 2px; pointer-events: none; }
.yoi-scroll-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--yoi-cyan), var(--yoi-amber), var(--yoi-coral)); transform: scaleX(0); transform-origin: left; }

/* ───────────────────────────────────────────────────────────────── nav */

/* Out of the way until you leave the hero, so the first screen is the product
   and nothing else. It stays in the document and keeps its tab order: hidden
   with transform and opacity rather than display, and :focus-within brings it
   straight back, so a keyboard user never lands on something invisible.
   yoi-landing.ts adds .is-visible once the hero is behind you. */
.yoi-nav {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(22px, 5vw, 76px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(17, 20, 23, .72);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform .34s cubic-bezier(.05, .7, .1, 1), opacity .34s ease;
}
.yoi-nav.is-visible,
.yoi-nav:focus-within { opacity: 1; pointer-events: auto; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .yoi-nav { transition: opacity .2s ease; }
}
.yoi-nav__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--yoi-ink); font: 800 10px/1.2 var(--yoi-font); letter-spacing: .17em; text-decoration: none; }
.yoi-nav__logo { display: block; width: 22px; height: 34px; object-fit: contain; }
.yoi-nav__brand b { color: var(--yoi-faint); font-weight: 700; }
.yoi-nav nav { display: flex; gap: clamp(18px, 3vw, 42px); }
.yoi-nav nav a,
.yoi-nav__cta { color: var(--yoi-muted); font: 700 10px/1 var(--yoi-font); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }
.yoi-nav nav a:hover,
.yoi-nav__cta:hover { color: var(--yoi-amber); }
.yoi-nav__cta { color: var(--yoi-ink); }
.yoi-nav__cta span { padding-left: 5px; color: var(--yoi-amber); }

/* ──────────────────────────────────────────────────────────────── hero */

.yoi-kicker { margin: 0; color: var(--yoi-cyan); font: 800 10px/1.35 var(--yoi-font); letter-spacing: .2em; text-transform: uppercase; }

/* One column, bottom-weighted: the type sits on the curve rather than beside an
   illustration. The curve is full bleed, so the hero has no second column to
   balance and nothing to fill. */
.yoi-hero { position: relative; display: grid; min-height: max(640px, 100svh); align-content: center; padding: clamp(70px, 10vh, 110px) clamp(24px, 8vw, 130px) clamp(200px, 30vh, 330px); overflow: hidden; }
.yoi-hero__copy { position: relative; z-index: 2; max-width: min(100%, 1100px); }
.yoi-hero__title { position: relative; margin: 0 0 0 -.055em; color: var(--yoi-ink); font: 900 clamp(104px, 17vw, 250px)/.78 var(--yoi-display); letter-spacing: -.105em; }
.yoi-hero__title span { display: inline-block; }

/* Ink, not amber. Amber means one thing on this page — the drawing, and the
   button that gets you to it — and a headline with one tinted phrase in it is
   the look every generated page already has. */
.yoi-hero__line { max-width: 18ch; margin: clamp(18px, 3vh, 34px) 0 0; color: var(--yoi-ink); font: 800 clamp(26px, 4.4vw, 54px)/1.08 var(--yoi-display); letter-spacing: -.055em; }
.yoi-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: clamp(26px, 4vh, 44px); }

/* The drawing, edge to edge across the lower third. Behind the type, in front
   of nothing: it is the only thing in the hero besides the words. */
.yoi-hero__curve { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: clamp(220px, 34vh, 360px); }
.yoi-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 0 19px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px; color: var(--yoi-ink); font: 800 10px/1 var(--yoi-font); letter-spacing: .12em; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.yoi-button:hover { transform: translateY(-3px); border-color: var(--yoi-amber); }
.yoi-button--primary { border-color: var(--yoi-amber); background: var(--yoi-amber); color: #181713 !important; }
.yoi-button--primary:hover { background: #ffc56a; }
.yoi-button span { font-size: 16px; }
.yoi-text-link { color: var(--yoi-muted); font-size: 12px; text-underline-offset: 5px; }
.yoi-text-link:hover { color: var(--yoi-ink); }

/* A mark, not a sentence: on a page whose next move is a pinned scroll, the
   affordance has a job, but it doesn't need telling. */
.yoi-scroll-cue { position: absolute; z-index: 3; bottom: 26px; left: 50%; display: block; width: 1px; height: 46px; overflow: hidden; transform: translateX(-50%); }
.yoi-scroll-cue span { display: block; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--yoi-amber)); animation: yoi-cue 2.4s cubic-bezier(.05, .7, .1, 1) infinite; }
.yoi-scroll-cue:hover span { background: linear-gradient(180deg, transparent, var(--yoi-ink)); }
.yoi-scroll-cue:focus-visible { outline: 2px solid var(--yoi-cyan); outline-offset: 4px; }

@keyframes yoi-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .yoi-scroll-cue span { animation: none; }
}

/* ───────────────────────────────────────────────── the pinned tour */

.yoi-tour {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .78fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 80px clamp(24px, 5vw, 76px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(ellipse at 20% 10%, rgba(114, 200, 213, .07), transparent 55%);
}

/* The camera's window onto the panel. The panel is bigger than this box at
   full zoom; the overflow is the point. */
.yoi-tour__viewport {
  position: relative;
  height: min(76svh, 680px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  background: #0b0d0f;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .04);
  /* The panel's 3D tilt needs depth to read as a tilt and not a squash. */
  perspective: 1600px;
}
.yoi-tour__viewport::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(8, 10, 11, .55));
  content: '';
  pointer-events: none;
}
.yoi-tour__camera { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }

.yoi-tour__rail { position: relative; display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.yoi-tour__marks { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 14px; list-style: none; }
.yoi-tour__marks li { color: rgba(255, 255, 255, .16); font: 800 10px/1 var(--yoi-font); letter-spacing: .14em; transition: color .3s ease, transform .3s ease; }
.yoi-tour__marks li.is-active { color: var(--yoi-amber); transform: translateX(4px); }

/* The four copy panels are stacked; the timeline crossfades them. */
.yoi-tour__panels { position: relative; min-height: 340px; flex: 1; }
.yoi-tour__panel { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.yoi-tour__panel h3 { margin: 18px 0; font: 800 clamp(28px, 3.4vw, 46px)/1.08 var(--yoi-display); letter-spacing: -.06em; }
.yoi-tour__panel p { margin: 0; max-width: 420px; color: var(--yoi-muted); font-size: 14px; line-height: 1.85; }
.yoi-tour__tag { display: inline-block; margin-top: 24px; color: var(--yoi-cyan); font: 700 8px/1.6 var(--yoi-font); letter-spacing: .15em; }
.yoi-tour__hint { position: absolute; bottom: 22px; left: 50%; margin: 0; color: var(--yoi-faint); font: 700 8px/1 var(--yoi-font); letter-spacing: .22em; transform: translateX(-50%); }

/* ─────────────────────────────────────────────────────── the device */

/* Authored at the plug-in's real size. The camera scales it; nothing inside
   is ever sized in viewport units, so a zoom stays pixel-honest. */
.yoi-device {
  position: relative;
  display: grid;
  width: 1040px;
  height: 640px;
  padding: 20px;
  grid-template-columns: 590px 330px 60px;
  grid-template-rows: 46px 396px 138px;
  gap: 10px;
  overflow: hidden;
  background: var(--yoi-ground);
  background-image: radial-gradient(ellipse at 18% 0%, rgba(114, 200, 213, .07), transparent 45%);
  transform-origin: 50% 50%;
  will-change: transform;
}

.yoi-device__topbar { display: flex; grid-column: 1 / -1; grid-row: 1; align-items: baseline; gap: 14px; }
.yoi-device__wordmark { color: var(--yoi-amber); font: 900 24px/1 var(--yoi-display); letter-spacing: .04em; }
.yoi-device__maker { color: var(--yoi-muted); font: 700 9px/1 var(--yoi-font); letter-spacing: .18em; }
.yoi-device__preset { margin-left: auto; color: var(--yoi-faint); font: 700 9px/1 var(--yoi-font); letter-spacing: .14em; }
.yoi-device__preset b { color: var(--yoi-ink); font-weight: 700; }
.yoi-device__silent { padding: 5px 8px; border: 1px solid rgba(114, 200, 213, .3); border-radius: 4px; color: var(--yoi-cyan); font: 700 8px/1 var(--yoi-font); letter-spacing: .12em; }

/* The chrome bdd-modern.css's .bdd-card would have given these. That class
   name is deliberately not used here: bass-daddy.css defines a .bdd-card of
   its own (a brand card, with a column layout and a pink hover shadow) and it
   is loaded site-wide, so sharing the name made the device cards flex the
   wrong way and lift on hover. See the collision note at the end of this file. */
.yoi-device__card {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--bdd-line);
  border-radius: var(--bdd-radius);
  background: var(--bdd-surface);
}
.yoi-device__card--draw { display: flex; grid-column: 1; grid-row: 2; flex-direction: column; gap: 10px; }
.yoi-device__card--character { display: flex; grid-column: 2; grid-row: 2; flex-direction: column; gap: 10px; }
.yoi-device__card--macros { display: grid; grid-column: 1; grid-row: 3; place-items: center; }
.yoi-device__card--filter { display: flex; grid-column: 2; grid-row: 3; align-items: center; justify-content: space-between; gap: 14px; }
.yoi-device__card--level { display: flex; grid-column: 3; grid-row: 2 / 4; flex-direction: column; padding: 14px 4px; }

.yoi-device__head { display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px; }
.yoi-device__title { color: var(--yoi-muted); font: 800 10px/1 var(--yoi-font); letter-spacing: .15em; white-space: nowrap; }
.yoi-device__chip { padding: 6px 8px; border: 1px solid var(--bdd-line); border-radius: 6px; background: #121418; color: var(--yoi-muted); font: 700 9px/1 var(--yoi-font); letter-spacing: .1em; }
.yoi-device__well { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.yoi-device__well canvas { display: block; width: 100%; height: 100%; }
.yoi-device__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yoi-device__row--ds { justify-content: space-between; }
.yoi-device__pad { display: grid; flex: 1; place-items: center; }
.yoi-device__macros { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); place-items: center; gap: 9px; }
.yoi-device__filter-mode { min-width: 110px; }
.yoi-device__card--level > div { width: 100%; flex: 1; min-height: 0; }
.yoi-device__card--level .bdd-level { height: 100%; }
.yoi-device__card--level .bdd-level-body { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────── hands on */

.yoi-play { padding: clamp(90px, 12vw, 150px) clamp(20px, 6vw, 92px) 140px; background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 15%, transparent 90%, rgba(255, 255, 255, .025)); }
.yoi-section-head { display: flex; max-width: 1240px; align-items: end; justify-content: space-between; gap: 45px; margin: 0 auto 45px; }
.yoi-section-head h2,
.yoi-specs h2 { margin: 20px 0; font: 800 clamp(40px, 7vw, 88px)/1.05 var(--yoi-display); letter-spacing: -.075em; }
.yoi-section-head h2 { margin-bottom: 0; }
.yoi-section-head__note { max-width: 320px; margin: 0 0 12px; color: var(--yoi-muted); font-size: 13px; line-height: 1.8; }

.yoi-demo-notice { display: flex; max-width: 1240px; align-items: center; gap: 14px; margin: 0 auto 24px; padding: 15px 18px; border: 1px solid rgba(114, 200, 213, .24); border-radius: 4px; background: rgba(114, 200, 213, .045); }
.yoi-demo-notice__icon { display: grid; width: 21px; height: 21px; flex: none; place-items: center; border: 1px solid var(--yoi-cyan); border-radius: 50%; color: var(--yoi-cyan); font: 700 12px/1 var(--yoi-font); }
.yoi-demo-notice p { flex: 1; margin: 0; color: var(--yoi-muted); font-size: 11px; line-height: 1.6; }
.yoi-demo-notice strong { color: var(--yoi-ink); }
.yoi-demo-notice__state { display: inline-flex; align-items: center; gap: 7px; color: var(--yoi-cyan); font: 800 8px/1 var(--yoi-font); letter-spacing: .13em; }
.yoi-demo-notice__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }

/* The instrument: YOI's own WebUI in a frame. yoi-panel.js scales its stage to
   the frame with a transform, so the frame only has to hold that shape — never
   set a height here that fights the aspect ratio.

   1040 × 740, not the plug-in's 1040 × 640: the web build adds a keyboard row,
   because on a web page there is no DAW to send it notes (WAM/src/bdd-keys.css
   in the YOI workspace). If the panel ever looks letterboxed or cropped here,
   this ratio and that row have come apart. */
.yoi-instrument { max-width: 1240px; margin: 0 auto; }
.yoi-instrument__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; }
.yoi-instrument__frame {
  display: block;
  width: 100%;
  /* Below this the panel's own controls get too small to hit; the wrapper
     scrolls instead of shrinking them further. */
  min-width: 760px;
  aspect-ratio: 1040 / 740;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: var(--yoi-ground);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .04);
  color-scheme: dark;
}
.yoi-instrument__hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 16px 2px 0; color: var(--yoi-faint); font-size: 11px; line-height: 1.7; }

/* The real controls, wearing YOI's palette. Scoped to the page so the panel in
   the tour and the cards down here stay identical. */
.yoi-page .bdd-label,
.yoi-page .bdd-value { font-family: var(--yoi-font); }
.yoi-page .bdd-label { color: var(--yoi-muted); font-size: 8px; letter-spacing: .12em; }
.yoi-page .bdd-value { color: var(--yoi-ink); font-size: 10px; }
.yoi-page .bdd-dial { cursor: ns-resize; }
.yoi-page .bdd-dial-body { background: radial-gradient(circle at 35% 30%, #514432, #252522 70%); }
.yoi-page .bdd-dial-arc { stroke: var(--yoi-amber); }
.yoi-page .bdd-dial-pointer { background: var(--yoi-ink); }
.yoi-page .bdd-fader-fill { background: linear-gradient(90deg, var(--yoi-cyan), var(--yoi-amber)); }
.yoi-page .bdd-fader-thumb { background: var(--yoi-ink); }
.yoi-page .bdd-fader-name { color: var(--yoi-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.yoi-page .bdd-choice { border-color: rgba(255, 255, 255, .12); background: #101214; }
.yoi-page .bdd-choice button { color: var(--yoi-muted); font-family: var(--yoi-font); }
.yoi-page .bdd-choice button.selected { background: #313336; color: var(--yoi-amber); }
.yoi-page .bdd-level-fill { background: linear-gradient(var(--yoi-ink), var(--yoi-muted)); }
.yoi-page .bdd-level-thumb { background: var(--yoi-ink); }
.yoi-page .bdd-pad-axis { color: rgba(238, 240, 236, .55); font-family: var(--yoi-font); }
.yoi-page .bdd-pad-dot { background: var(--yoi-amber); box-shadow: 0 0 0 8px rgba(242, 169, 59, .14), 0 0 20px rgba(242, 169, 59, .6); }
.yoi-page .bdd-pad-dot::after { background: var(--yoi-ground); }
.yoi-page .bdd-pad-grid { stroke: rgba(255, 255, 255, .12); }
.yoi-page .bdd-pad-peak { stroke: var(--yoi-cyan); }
.yoi-page :focus-visible { outline-color: var(--yoi-cyan); }

/* bass-daddy.css (loaded site-wide by BaseLayout) has its own .bdd-dial and
   .bdd-fader for the brand's web controls. bdd-modern.css wins on the
   properties both declare, but a few of the brand's leak through onto the
   device's controls. Undo those here rather than renaming anything in the
   shared WebUI library. */
.yoi-page .bdd-dial { width: auto; }
.yoi-page .bdd-fader { min-width: 0; }
.yoi-page .bdd-fader-track::before { background: none; }

/* ─────────────────────────────────────────────────────────── specs */

.yoi-specs { padding: clamp(80px, 10vw, 130px) clamp(24px, 8vw, 130px); border-top: 1px solid rgba(255, 255, 255, .08); }
.yoi-specs__intro { max-width: 1240px; margin: 0 auto 48px; }
/* Separators are drawn per item, not as a 1px grid gap over a lit background:
   a four-column grid rarely divides evenly into the item count, and the gap
   trick lights the empty cells up as blank panels. */
.yoi-specs__list { display: grid; max-width: 1240px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin: 0 auto; padding: 0; list-style: none; }
.yoi-specs__list li { padding: 28px 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.yoi-specs__list p { margin: 12px 0 0; color: var(--yoi-muted); font-size: 13px; line-height: 1.8; }

/* Plain English / Nerdy AF. A segmented pair rather than a checkbox: both
   registers are named, so nobody has to work out what the off state means.
   The specs list is a grid of auto-fit columns, so the two sets of copy are
   different lengths and the rows resize — that is fine and expected. */
.yoi-detail { display: inline-flex; margin-top: 26px; padding: 3px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.yoi-detail__option { padding: 8px 17px; border: 0; border-radius: 999px; background: transparent; color: var(--yoi-muted); font: 700 10px/1 var(--yoi-font); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.yoi-detail__option:hover { color: var(--yoi-ink); }
.yoi-detail__option.is-on { background: var(--yoi-amber); color: #15181c; }
.yoi-detail__option:focus-visible { outline: 2px solid var(--yoi-cyan); outline-offset: 2px; }

/* The swapped paragraph fades up, so the change registers on a long page where
   the list can run below the fold. Only on a real switch: the class is added by
   yoi-landing.ts, so this never fights the GSAP reveal on first paint. The curve
   is the 'release' easing the script registers with CustomEase. */
.yoi-specs__list p.is-swapped { animation: yoi-detail-in .32s cubic-bezier(.05, .7, .1, 1) both; }

@keyframes yoi-detail-in { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .yoi-specs__list p.is-swapped { animation: none; }
  .yoi-detail__option { transition: none; }
}

/* ─────────────────────────────────────────────────────────── outro */

/* ──────────────────────────────────────────────────────────────── buy */

/* The end of the page is the one place allowed to ask for money, so it gets
   the room to do it: one column, the price set in the display face beside the
   button rather than tucked under it as a caption. */
.yoi-buy {
  position: relative;
  padding: clamp(90px, 13vw, 165px) clamp(24px, 8vw, 130px) clamp(110px, 15vw, 185px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: radial-gradient(ellipse at 18% 0%, rgba(242, 169, 59, .11), transparent 52%), #0e1012;
}
.yoi-buy__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.yoi-buy__title { margin: 18px 0 0; color: var(--yoi-ink); font: 800 clamp(42px, 7.5vw, 100px)/1 var(--yoi-display); letter-spacing: -.075em; }
.yoi-buy__body { max-width: 54ch; margin: 22px 0 0; color: var(--yoi-muted); font-size: 15px; line-height: 1.8; }
.yoi-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 34px); margin-top: clamp(30px, 5vh, 52px); }

/* Priced in the display face, at the weight of a headline: it is the number
   somebody came to find, not a footnote on the button. */
.yoi-buy__price { color: var(--yoi-ink); font: 800 clamp(30px, 4vw, 46px)/1 var(--yoi-display); letter-spacing: -.05em; }
.yoi-buy__cta { min-height: 56px; padding: 0 26px; }
.yoi-buy__serial { position: absolute; right: 28px; bottom: 25px; color: var(--yoi-faint); font: 700 8px/1 var(--yoi-font); letter-spacing: .18em; }


/* ────────────────────────────────────────────────────── responsive */

@media (max-width: 1180px) {
  .yoi-tour { grid-template-columns: 1fr; gap: 32px; }
  .yoi-tour__viewport { height: min(54svh, 460px); }
  .yoi-tour__panels { min-height: 260px; }
}

/* Below the tour's breakpoint the panel is shown whole and the copy is read
   as a plain list — the camera and the pin are off. */
@media (max-width: 899px) {
  .yoi-tour { display: block; min-height: 0; padding-block: 90px; }
  /* No camera here, so the frame hugs the panel's own 1040 × 640 instead of
     leaving empty bands above and below it. */
  .yoi-tour__viewport { height: auto; aspect-ratio: 1040 / 640; margin-bottom: 36px; }
  .yoi-tour__rail { display: block; }
  .yoi-tour__marks { display: none; }
  .yoi-tour__panels { min-height: 0; }
  .yoi-tour__panel { position: static; width: auto; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .1); transform: none; }
  .yoi-tour__panel:first-child { border-top: 0; padding-top: 0; }
  .yoi-tour__panel + .yoi-tour__panel { margin-top: 32px; }
  .yoi-tour__hint { display: none; }
}

@media (max-width: 900px) {
  .yoi-hero__title { font-size: clamp(112px, 26vw, 210px); }
  .yoi-section-head { align-items: start; flex-direction: column; gap: 12px; }
}

@media (max-width: 680px) {
  .yoi-nav { padding: 16px 18px; }
  .yoi-nav__brand { gap: 8px; font-size: 8px; }
  .yoi-nav__logo { width: 19px; height: 30px; }
  .yoi-nav nav { gap: 14px; }
  .yoi-nav nav a { font-size: 8px; letter-spacing: .06em; }
  .yoi-nav__cta { font-size: 8px; letter-spacing: .05em; }
  .yoi-hero { padding: 110px 22px clamp(170px, 26vh, 230px); }
  .yoi-hero__title { margin-left: -.05em; font-size: clamp(100px, 27vw, 176px); }
  .yoi-hero__curve { height: clamp(150px, 26vh, 230px); }
  .yoi-scroll-cue { bottom: 24px; width: max-content; }
  .yoi-tour { padding-inline: 18px; }
  .yoi-play { padding: 78px 16px 90px; }
  /* `grid-column: 1` on a 12-column grid is one twelfth of the width, not a
     full row. Collapse the grid itself and let the cards flow. */
  .yoi-demo-notice { align-items: start; }
  .yoi-demo-notice__state { display: none; }
  /* The frame keeps its minimum width and the wrapper pans. */
  .yoi-instrument__scroll { margin-inline: -16px; padding-inline: 16px; }
  .yoi-specs { padding-inline: 22px; }
  .yoi-buy { padding: 90px 24px 110px; }
  .yoi-buy__serial { display: none; }
}

@media (max-width: 420px) {
  .yoi-nav nav { display: none; }
  .yoi-nav__cta { margin-left: auto; }
  .yoi-hero__title { font-size: 27vw; }
  .yoi-hero__actions { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .yoi-page *,
  .yoi-page *::before,
  .yoi-page *::after { scroll-behavior: auto !important; }
  .yoi-tour__viewport::after { display: none; }
}

/* ───────────────────────────────────────────────────────────── note
 * Name collision, worth knowing before adding anything here:
 * bass-daddy.css (the site brand) and bdd-modern.css (the device) both define
 * .bdd-card, .bdd-dial and .bdd-fader, and BaseLayout loads the brand one on
 * every page. bdd-modern.css is loaded after it, so it wins wherever the two
 * set the same property — but anything only the brand sets still applies.
 * Hence the overrides above. If a device control ever looks subtly wrong on
 * the site but right in the plug-in, check bass-daddy.css for that class first.
 */