*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  /* Gold ramp: identical to the website/*.html :root tokens. */
  --gold-bright: #FFD700;
  --gold-mid:    #D6B500;
  --gold-deep:   #AD9200;
  --gold-dim:    rgba(255, 215, 0, 0.40);
  --gold-line:   rgba(255, 215, 0, 0.20);
  --gold-wash:   rgba(255, 215, 0, 0.06);
  --bg:          #111111;
  --bg-deep:     #0A0A08;
  --bg-card:     #181818;
  --text:        #FFFFFF;
  --text-2:      rgba(255, 255, 255, 0.78);
  --text-3:      rgba(255, 255, 255, 0.60);
  --text-sub:    #999999;
  --text-muted:  #8A8A8A;
  --rule:        rgba(255, 255, 255, 0.10);
  --success:     #22C55E;
  --mono:    'Courier Prime', 'Courier New', Courier, monospace;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;
  --gutter:  clamp(16px, 5vw, 48px);
  --maxw:    1180px;
  --ease:    cubic-bezier(.22, 1, .36, 1);
  /* Visible badge height. Apple's 40px floor applies; never go below 40px. */
  --badge-h: 48px;
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--gold-bright); color: #000; padding: 8px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ── NAV ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 8, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gold-line); }
.nav-in { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 40px; width: 120px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; list-style: none; align-items: center; }
.nav-links li { flex: 0 0 auto; }
.nav-links a {
  display: inline-block; padding: 8px 12px; white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--text-2); border-radius: 999px; transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-bright); }
.nav-links a.cta { background: var(--gold-bright); color: #000; font-weight: 700; margin-left: 6px; }
.nav-links a.cta:hover { background: #FFE033; color: #000; }
/* Phone menu: hidden on wide screens, where every link fits in the bar. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--gold-dim); border-radius: 999px; font: 600 14px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); background: rgba(0, 0, 0, 0.6); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.nav-menu[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.nav-menu > summary:hover, .nav-menu[open] > summary { border-color: var(--gold-bright); }
.nav-menu ul { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; list-style: none; min-width: 220px; padding: 8px; background: #0F0E0C; border: 1px solid var(--gold-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.nav-menu li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; text-decoration: none; font: 500 15px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.nav-menu li a:hover, .nav-menu li a:focus-visible { background: var(--gold-wash); color: var(--gold-bright); }
.nav-menu li a[aria-current="page"] { color: var(--gold-bright); }

/* ── TYPE ── */
.eyebrow { display: block; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 14px; }
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; color: var(--text); max-width: 22ch; }
.lede { margin-top: 18px; font-size: clamp(17px, 1.8vw, 20px); font-weight: 300; color: var(--text-2); max-width: 60ch; }
.h3 { font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.muted { color: var(--text-3); }
section.band { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
section.band + section.band { border-top: 1px solid var(--rule); }
.textlink { color: var(--gold-bright); text-decoration: none; font-family: var(--display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; }
.textlink:hover { border-bottom-color: var(--gold-bright); }
.chip { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gold-dim); color: var(--gold-bright); background: var(--gold-wash); white-space: nowrap; }

/* ── HERO ── */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--rule); }
.hero::before { content: ""; position: absolute; left: 50%; top: -30%; width: 120%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0) 60%); pointer-events: none; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero-in { text-align: center; max-width: 860px; margin: 0 auto; }
.logo-img { width: min(92%, 720px); height: auto; margin: 0 auto; }
/* Same 8 stops as goldGrad in scriptready-wordmark.svg (slaved pair). */
.app-name {
  font-family: var(--display); font-size: clamp(26px, 4.6vw, 34px); font-weight: 500; letter-spacing: 0.05em;
  color: var(--gold-bright);
  background: linear-gradient(180deg, #FFD700 0%, #EEC900 15%, #E4C000 30%, #D9B700 45%, #D3B200 60%, #C5A600 75%, #B89B00 90%, #AD9200 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-top: 18px; display: inline-block;
}
.tagline { font-family: var(--display); font-size: clamp(12px, 2vw, 15px); letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-sub); margin-top: clamp(-24px, -2.6vw, -10px); }
.hero-lede { text-wrap: pretty; margin: 30px auto 0; max-width: 36em; font-size: clamp(18px, 2.1vw, 21px); font-weight: 300; line-height: 1.55; color: var(--text-2); }
.hl { color: var(--gold-bright); font-weight: 500; }
.h2 .hl, .h3 .hl { font-weight: inherit; }
.nowrap { white-space: nowrap; }
/* The visible h1 "ScriptReady": keep it real text. Google brand verification reads it. */
.hero-name { margin: 30px auto 0; font-family: var(--body); font-weight: 500; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--gold-bright); }
.hero-name + .hero-lede { margin-top: 0; }
.hero-lede-2 { margin-top: 16px; }
.hero-glance { margin-top: 28px; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.6vw, 24px); letter-spacing: 0.02em; color: var(--gold-bright); }
.hero-glance + .hero-lede-2 { margin-top: 10px; }

/* ── STORE BADGES (artwork unmodified; sizing math from website/index.html) ── */
.store-wrap { margin: 36px auto 0; max-width: 520px; }
.store-label { display: block; font-family: var(--display); font-size: 12px; letter-spacing: 0.35em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; text-align: center; }
.store-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.store-badge { display: inline-flex; align-items: center; text-decoration: none; border-radius: 10px; }
a.store-badge { transition: transform .2s var(--ease); }
a.store-badge:hover { transform: translateY(-1px); }
.store-badge img { display: block; width: auto; max-width: none; }
.store-badge--apple img { box-sizing: content-box; height: var(--badge-h); padding: calc(var(--badge-h) * 0.25); }
.store-badge--google img { height: calc(var(--badge-h) * 1.4881); }
.store-attribution { margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--text-muted); text-align: center; }

/* ── REHEARSAL MODES (real screen recordings, one per tab) ── */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.phone.import-phone { max-width: 280px; }
.import-phone video { aspect-ratio: 400 / 816; background: #000; }
/* Phone layout (and the no-subgrid fallback): a 2x2 grid of mode buttons, then the phone,
   the title and description, and the video controls. */
.rmodes { display: grid; gap: 18px; width: 100%; max-width: 640px; }
.mtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mtabs button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left;
  font: 600 14px/1.15 var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance;
  color: var(--text-2); background: transparent; border: 1px solid var(--rule); border-radius: 12px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
/* The dot repeats the .points bullet: a hollow ring at rest, filled gold when selected, so the
   selected state never rests on color alone. */
.mtabs button::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-3); transition: background .2s, border-color .2s, box-shadow .2s; }
.mtabs button:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.mtabs button[aria-selected="true"] { color: var(--gold-bright); border-color: var(--gold-dim); background: var(--gold-wash); }
.mtabs button[aria-selected="true"]::before { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.16); }
.mpanel { display: grid; gap: 14px; justify-items: center; text-align: center; }
/* .phone.mphone: .phone (later in the file) sets max-width 300px. 260px keeps the tabs and the
   whole phone on one phone screen, so a tap shows its result. */
.phone.mphone { max-width: 260px; }
.mphone video { aspect-ratio: 400 / 816; background: #000; }
.mtitle { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright); }
.mdesc { margin-top: 6px; color: var(--text-2); font-size: 16px; max-width: 44ch; }
.mctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mctrl .btn-ghost { min-height: 44px; padding: 0 18px; }
/* Wider than a phone: the phone frame on the left, the mode list beside it, the description
   under the list and the controls level with the bottom of the phone. The tab panel spans the
   whole player as a subgrid so the video stays inside it; the tab list sits above it. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 561px) {
    .rmodes { grid-template-columns: clamp(200px, 46%, 270px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0 clamp(20px, 2.6vw, 32px); align-items: start; }
    .mtabs { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
    .mpanel { grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: normal; justify-items: stretch; text-align: left; }
    .phone.mphone { grid-column: 1; grid-row: 1 / -1; max-width: none; margin: 0; }
    .mcopy { grid-column: 2; grid-row: 2; margin-top: 20px; }
    .mctrl { grid-column: 2; grid-row: 4; justify-content: flex-start; margin-top: 18px; }
    /* The selected button already names the mode right above the description. The title stays
       for screen readers, since browse mode does not always announce the panel's name. */
    .mtitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .mdesc { margin-top: 0; }
  }
}
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); background: rgba(0, 0, 0, 0.6); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 9px 14px; white-space: nowrap; }
.btn-ghost:hover { border-color: var(--gold-bright); }
.points { list-style: none; margin-top: 28px; display: grid; gap: 16px; }
.points li { position: relative; padding-left: 22px; color: var(--text-2); }
.points li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-mid); }

/* ── SITUATIONS ── */
.situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.sit { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; transition: border-color .25s, transform .25s var(--ease); }
.sit:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.sit .kicker { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-mid); }
.sit h3 { margin-top: 8px; font-size: 22px; }
.sit dl { margin-top: 18px; display: grid; gap: 10px; }
.sit dt { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.sit dd { color: var(--text-3); font-size: 16px; margin-bottom: 6px; }
.sit dt.yes { color: var(--gold-bright); }
.sit dd.yes { color: var(--text); }
.sit .tags { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ── PARTNERS ── */
.pgrid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 64px); margin-top: 52px; align-items: center; }
.opts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.opt { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; }
.opt .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold-dim); color: var(--gold-bright); font-family: var(--display); font-weight: 600; font-size: 15px; }
.opt h3 { margin-top: 14px; font-size: 21px; }
.opt p { margin-top: 8px; color: var(--text-2); font-size: 16px; }
.phone { border-radius: 30px; padding: 7px; background: #050505; border: 1px solid rgba(255, 215, 0, 0.22); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), 0 0 50px -18px rgba(255, 215, 0, 0.18); max-width: 300px; margin: 0 auto; width: 100%; }
.phone img, .phone video { border-radius: 23px; width: 100%; }
.free-note { margin-top: 48px; padding: 18px 22px; border: 1px solid var(--gold-dim); border-radius: 14px; background: var(--gold-wash); text-align: center; }
.free-note p { color: var(--text); font-size: 17px; }
.free-note b { color: var(--gold-bright); font-weight: 600; }
.free-note + .free-note { margin-top: 12px; }

/* ── LIVE READER (headline band) ── */
.lr-band { background: linear-gradient(180deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0) 45%); }
.lr-stills { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.lr-stills .phone { max-width: 260px; }
.lr-stills figcaption { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.lr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: 48px; align-items: start; }
.lr-cards { list-style: none; display: grid; gap: 14px; }
.lr-cards .opt h3 { margin-top: 10px; }
.lr-cards .opt h3:first-child { margin-top: 0; }
.shot { border-radius: 18px; overflow: hidden; border: 1px solid var(--gold-line); background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.shot img, .shot video { width: 100%; }
.steps { list-style: none; margin-top: 28px; counter-reset: s; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text-2); }
.steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold-dim); color: var(--gold-bright); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 16px; }

/* ── SELF-TAPE ── */
.tape-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: 48px; align-items: start; }
.tape-grid .phone { max-width: 270px; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.mode { border: 1px solid var(--rule); border-radius: 12px; padding: 14px; background: var(--bg-card); }
.mode b { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; color: var(--gold-bright); }
.mode span { font-size: 15px; color: var(--text-3); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.cols2 h3 { font-size: 20px; }
.cols2 p { margin-top: 8px; color: var(--text-2); font-size: 16px; }
.cam-h { margin-top: 44px; font-size: 20px; }
.cam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.fn { color: var(--gold-bright); font-size: 0.75em; margin-left: 1px; }
.cols2 .fn-note { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.android { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }

/* ── SCREENSHOTS ── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: min(230px, 64vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-top: 40px; scrollbar-color: var(--gold-deep) transparent; }
.board figure { scroll-snap-align: start; }
.board img { border-radius: 14px; border: 1px solid var(--rule); width: 100%; }
.board figcaption { font-size: 15px; color: var(--text-3); margin-top: 10px; }

/* ── FEATURE LIST ── */
.features { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.features h3 { grid-column: 1 / -1; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-mid); margin: 32px 0 4px; }
.features h3:first-child { margin-top: 0; }
.feat { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.feat b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.feat span { display: block; font-size: 15px; color: var(--text-3); margin-top: 2px; }

/* ── HOW IT WORKS ── */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.how li { list-style: none; border-top: 2px solid var(--gold-dim); padding-top: 16px; }
.how .n { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); }
.how h3 { font-size: 20px; margin-top: 4px; }
.how p { margin-top: 6px; font-size: 15px; color: var(--text-3); }

/* ── FAQ (teaser + page) ── */
.faq-q { border-bottom: 1px solid var(--rule); }
.faq-q > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 18px 4px; font-size: 18px; font-weight: 500; color: var(--text); }
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::after { content: "+"; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--gold-mid); text-align: center; transition: transform .25s var(--ease); }
.faq-q[open] > summary::after { transform: rotate(45deg); }
.faq-q > summary:hover { color: var(--gold-bright); }
.faq-q .a { padding: 0 34px 20px 4px; color: var(--text-2); font-size: 16px; max-width: 70ch; }
.faq-q .a a { color: var(--gold-bright); }
.faq-teaser { margin-top: 36px; max-width: 860px; border-top: 1px solid var(--rule); }
mark.hit { background: rgba(255, 215, 0, 0.28); color: var(--text); border-radius: 2px; padding: 0 1px; }

.finale { text-align: center; }
.finale .h2, .finale .lede { margin-left: auto; margin-right: auto; }

/* ── FAQ PAGE ── */
.faq-hero { padding: clamp(48px, 8vw, 96px) 0 24px; }
.faq-title { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; text-transform: uppercase; }
.search { margin-top: 32px; position: relative; max-width: 640px; }
.search label { display: block; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.search input { width: 100%; font: 400 18px/1.3 var(--body); color: var(--text); background: rgba(0, 0, 0, 0.6); border: 1px solid var(--gold-dim); border-radius: 14px; padding: 16px 48px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--text-muted); }
.search input:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18); }
.search svg { position: absolute; left: 16px; bottom: 17px; width: 20px; height: 20px; color: var(--gold-mid); pointer-events: none; }
.search .clear { position: absolute; right: 8px; bottom: 9px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text-3); font-size: 22px; cursor: pointer; }
.search .clear:hover { color: var(--gold-bright); }
.faq-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 16px; }
.faq-count { font-size: 15px; color: var(--gold-mid); margin-right: auto; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump button { font: 600 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--text-2); cursor: pointer; }
.jump button:hover { border-color: var(--gold-dim); color: var(--gold-bright); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-bottom: 96px; align-items: start; }
.faq-group { border-top: 1px solid var(--gold-line); scroll-margin-top: 84px; }
.faq-group > summary { list-style: none; cursor: pointer; display: flex; gap: 14px; align-items: baseline; padding: 22px 4px 12px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mid); }
.faq-group > summary::-webkit-details-marker { display: none; }
.faq-group > summary .gt { flex: 1 1 auto; min-width: 0; }
.faq-group > summary .cnt { flex: 0 0 auto; white-space: nowrap; margin-left: auto; font-family: var(--body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.faq-group > summary::after { content: "\25BE"; color: var(--gold-mid); transition: transform .25s var(--ease); }
.faq-group:not([open]) > summary::after { transform: rotate(-90deg); }
.faq-group > summary:hover { color: var(--gold-bright); }
.faq-group .qs { padding-bottom: 18px; }
.faq-empty { padding: 28px 0; color: var(--text-2); }
.faq-empty b { color: var(--gold-bright); }
.aside { position: sticky; top: 96px; border: 1px solid var(--gold-line); border-radius: 18px; padding: 24px; background: var(--bg-card); }
.aside h2 { font-family: var(--display); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; }
.aside p { margin-top: 10px; color: var(--text-2); font-size: 16px; }
.aside a.mail { display: inline-block; margin-top: 14px; color: var(--gold-bright); font-weight: 500; }
.aside hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* ── FOOTER (contrast floor: never below #999 on #111) ── */
footer { position: relative; z-index: 1; text-align: center; padding: 56px 24px 96px; font-family: var(--display); font-size: 12px; letter-spacing: 0.2em; color: var(--text-sub); text-transform: uppercase; line-height: 2; border-top: 1px solid var(--rule); }
footer .foot-mark { width: 150px; height: 50px; margin: 0 auto 18px; opacity: 0.9; }
footer p { margin: 0; }
footer .footer-entity { color: #cfcfcf; letter-spacing: 0.14em; }
footer .footer-entity strong { font-weight: 600; }
footer .footer-contact { text-transform: none; letter-spacing: 0.04em; font-size: 13px; margin-top: 10px; }
footer .footer-links { margin-top: 10px; }
footer a { color: var(--text-sub); text-decoration: none; transition: color .2s; }
footer a:hover, footer a:focus-visible { color: var(--gold-bright); }



@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .split, .tape-grid, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .split > :last-child { order: -1; }
  .split--media-right > :last-child { order: 0; }
  .pgrid, .lr-grid, .lr-stills { grid-template-columns: minmax(0, 1fr); }
  .pgrid .phone { max-width: 260px; }
  .situations { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside { position: static; }
}
@media (max-width: 720px) {
  .features, .cols2, .modes, .opts, .cam-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-in { gap: 10px; flex-wrap: nowrap; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-links { margin-left: 0; }
  .nav-links li:not(:last-child) { display: none; }
  .nav-links a.cta { margin-left: 0; padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; }
}
@media (max-width: 480px) {
  .mtabs button { gap: 8px; padding: 8px 10px; font-size: 13px; letter-spacing: 0.05em; }
  :root { --badge-h: 40px; }
  body { font-size: 16px; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .brand img { width: 102px; height: 34px; }
  .nav-in { gap: 8px; }
  .nav-menu > summary, .nav-links a.cta { padding: 0 12px; letter-spacing: 0.1em; }
}