/* Style Audio - the brand look for the style-audio.com copy only. Loaded after style.css by make_gage_site.py;
   the main site never sees it. Palette, fonts and rules are Kyle's brand brief of 2026-10-09 (see CLAUDE.md). */
:root {
  --night: #1E1428;
  --purple: #4B1F6F;             /* the brand's deep purple: too bright as a large area (Kyle, 2026-10-09) */
  --cream: #F1E9DA;
  --orange: #E0672A;
  --magenta: #A1347B;
  --violet: #8B5CC4;
  --lilac: #B79AD9;
  --blue-violet: #3E45CC;        /* buttons */
  /* "Sunset to night" (Kyle, 2026-10-09): the logo's stripes are now orange, amber, blue violet, dark steel,
     and the page uses the same four colours. Magenta, violet and lilac above are the old stripes, no longer used. */
  --amber-gold: #D9A12B;
  --banner: #191B3A;             /* dark indigo: the header, the call-to-action bands and the footer (Kyle's pick, 2026-10-10) */
  --gage-blue: #4C8EFF;          /* GAGE Blue: GAGE's own colour (its wordmark and app). Used on GAGE things only: the buy
                                    cards, the Pro tag, the comparison chart. Not a Style Audio brand colour. */
  --steel: #3F5873;

  /* "Too much purple" (Kyle, 2026-10-09): the page, header, bands and footer are near-black with only a hint of violet,
     so the purples are left to the logo, the four stripes and a few small marks. */
  --ink: #0f1115;                /* the page body and the header: blue-black */
  --bg: var(--ink);
  --bg-raised: #131820;          /* bands, footer, form fields: the page with a little steel in it */
  --surface: #171d26;            /* cards and the chart */
  --line: #2b394a;               /* outlines: dark steel, toned down */
  --text: var(--cream);
  --dim: #c4c1ba;
  --faint: #8d8f95;
  --blue: var(--orange);          /* style.css calls its accent "blue": here it is the orange of buttons and links */
  --blue-deep: #c75620;
  --pink: var(--magenta);
  --amber: var(--orange);
  --green: var(--lilac);
  --stripes: linear-gradient(180deg, var(--orange) 0 25%, var(--amber-gold) 25% 50%, var(--blue-violet) 50% 75%, var(--steel) 75% 100%);
}

/* ---------- type: the same fonts as moontechstudios.com (Inter and Instrument Serif; Kyle, 2026-10-09) ---------- */
.card .num { color: var(--amber-gold); }
.eyebrow { color: var(--amber-gold); }
.tagline { display: block; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--cream); margin-bottom: 26px; }
.foot h4 { color: var(--faint); }
.compare thead th { color: var(--cream); }
.compare tbody tr.group th { color: var(--cream); }

/* ---------- header (Bridget's idea, 2026-10-10): a slim menu row, then the lettering centred on four page-wide bars
   that turn wavy beside it. The picture (assets/style-audio-header-*.png, drawn by the kit's header_band.py) is 1120 x 186
   and keeps its size; the bars beyond it are a slice of the picture's own left edge (style-audio-header-bars.png) repeated
   across the window, so they meet the picture without a step, and only they stretch with the window. ---------- */
.nav { position: relative; background: var(--banner); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.nav .wrap { height: 64px; justify-content: center; }
.sa-band { position: relative; height: 186px; overflow: hidden; background: var(--ink) url("assets/style-audio-header-bars.png?v=6") repeat-x left top / auto 100%; }
.sa-band a { position: absolute; left: 50%; top: 0; width: 1120px; height: 186px; margin-left: -560px; display: block; }
.sa-band img { display: block; width: 100%; height: 100%; max-width: none; }
/* While the home page's animated header plays (style-audio-intro.js), the still picture and the still bars are hidden
   and a canvas the size of the band draws everything; when it ends the class goes and the still header is back. */
.sa-intro .sa-band { background: linear-gradient(180deg, var(--banner) 0 52.688%, var(--ink) 52.688% 100%); }
.sa-intro .sa-band img { visibility: hidden; }
.sa-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sa-logo { display: block; width: 168px; height: 72px; flex: none; }        /* the pill logo, in the footer */
.nav ul a { color: var(--cream); }
.nav ul a:hover, .nav ul a[aria-current="page"] { background: rgba(241, 233, 218, .14); }
.nav ul a.cta, .btn.primary, .plan .badge, .skip:focus { color: var(--night); }
.menu-btn { border-color: rgba(241, 233, 218, .5); }
@media (max-width: 860px) {
  /* The open menu on phones: a dark panel a step lighter than the indigo header it drops from, so it reads as a layer on
     top of the page without being light (Kyle, 2026-10-10), closed off by a line. */
  .nav .wrap { height: 56px; justify-content: flex-end; }
  .sa-band { height: 124px; }
  .sa-band a { width: 746.67px; height: 124px; margin-left: -373.33px; }
  .nav ul { top: 56px; background: #20234a; border-top: 1px solid #2e3160; border-bottom: 1px solid #454a8a; padding-top: 14px; z-index: 60; }
  .nav ul a:hover, .nav ul a[aria-current="page"] { background: rgba(241, 233, 218, .10); }
}

/* ---------- buttons, bullets, table marks: orange only on buttons and links ---------- */
.btn.ghost { border-color: rgba(241, 233, 218, .4); }
.btn.ghost:hover { border-color: var(--cream); }
.checks li::before { background: var(--amber-gold); }
.compare td.yes { color: var(--gage-blue); }
.compare { border-color: var(--gage-blue); }
.compare td.no { color: #5a5560; }
.plan, .plan.featured { background: var(--surface); border-color: var(--gage-blue); }
.plan.featured { border-width: 2px; }
form.notify input[type=email], .field input, .field textarea, .field select { border-color: var(--line); }

/* ---------- bands and footer: flat, no gradients or glows ---------- */
.gage-band { background: var(--banner); border: 0; }
.gage-band::after { display: none; }
.gage-band .dim, .gage-band .form-note { color: var(--cream); }
.gage-band form.notify input[type=email], .gage-band .field input, .gage-band .field textarea, .gage-band .field select { background: var(--ink); border-color: var(--line); }
.gage-band .field label { color: var(--cream); }
.gage-band .eyebrow { color: var(--amber-gold); }
/* the divider between sections: the four stripes, right across the page */
.rule { border: 0; height: 16px; margin: 0; background: var(--stripes); }

footer { background: var(--banner); border-top: 0; padding-top: 0; }
footer::before { content: ""; display: block; height: 16px; background: var(--stripes); margin-bottom: 56px; }
.foot .tagline { font-size: 13px; margin: 22px 0 0; }
.foot a { color: var(--cream); }
/* Footer links get the orange outline box on hover (Kyle, 2026-10-10: he saw it as the keyboard focus ring and liked it). */
.foot ul a:hover { color: #fff; outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.legal { border-top-color: rgba(241, 233, 218, .2); color: var(--cream); }

/* ---------- buttons: blue violet with cream text (Kyle, 2026-10-09: not orange, and chosen over cream).
   Orange is left for text links only. ---------- */
.btn.primary, .nav ul a.cta, .skip:focus { background: var(--blue-violet); color: var(--cream); }
.plan .badge { background: var(--gage-blue); color: #0b1220; }
.btn.primary:hover, .nav ul a.cta:hover { background: #5158DD; }

/* ---------- the Contact page is one long section: the page colour like the other pages, not one long band ---------- */
#contact.gage-band { background: var(--ink); }
#contact.gage-band .eyebrow { color: var(--amber-gold); }
#contact.gage-band .dim, #contact.gage-band .field label, #contact.gage-band .form-note { color: var(--dim); }
#contact.gage-band .field input, #contact.gage-band .field textarea, #contact.gage-band .field select { background: var(--bg-raised); border-color: var(--line); }