/* ============================================================================
   AudioRoute — shared site shell
   Extracted from the v2 landing page so every page can wear the same chassis
   instead of carrying its own inline <style> block. Before this, all 12 pages
   defined their own 6-18 CSS variables, none of them used the --ar-* tokens,
   and three still set Georgia as the display face.
   Contains ONLY what is common: reset and base, the rack/band/pad structure,
   type scale, LEDs, buttons, the sticky chassis nav, the footer, and the
   reduced-motion block. Anything specific to one page belongs in that page's
   own stylesheet, loaded after this one.
   Load order everywhere: ar-tokens.css, ar-site.css, then the page sheet.
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  background: var(--ar-bg);
  /* Rack texture: hairline rails in the room around the chassis. Not a gradient. */
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.022) 0 1px, transparent 1px 96px);
}

body {
  margin: 0;
  background: var(--ar-bg);
  color: var(--ar-text);
  font-family: var(--ar-font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background: transparent;
}

/* --- Structure ----------------------------------------------------------- */

.rack {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--ar-bg);
  border-left: var(--ar-border);
  border-right: var(--ar-border);
}

.band { border-bottom: var(--ar-border); }
.pad  { padding: var(--ar-s-7) var(--ar-s-6); }

@media (max-width: 720px) { .pad { padding: var(--ar-s-6) var(--ar-s-4); } }

/* --- Type --------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--ar-font-display);
  letter-spacing: var(--ar-tracking-display);
  line-height: 1.04;
  margin: 0;
  font-weight: 700;
}
/* h1 needs an explicit size in the SHELL, not just on the landing page. The hero set
   its own h1 size in v2.css, so this file never did - which left every content page
   with a 32px browser-default h1 sitting under a 38px h2. Page-level rules (the hero
   in v2.css, .page-h below) load later and still win. */
h1 { font-size: clamp(30px, 4vw, 42px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }

p { margin: 0 0 var(--ar-s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--ar-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mono { font-family: var(--ar-font-mono); }

/* Nothing may be wider than its container. The shell constrained figure images but had no
   global rule, so any <img> outside a figure kept its intrinsic width - a 1280px screenshot
   in the Ableton guide pushed the page wider than the viewport at 12 of 15 tested widths.
   height:auto so a width/height pair in the markup still gives the browser the aspect ratio
   to reserve space, without locking the height once the width is capped. */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

.lab {
  font-family: var(--ar-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label);
  text-transform: uppercase;
  color: var(--ar-text-2);
}

.dim  { color: var(--ar-text-2); }
.lede { font-size: 17.5px; color: var(--ar-text-2); }
.lede strong { color: var(--ar-text); font-weight: 500; }

/* Section header: mono index in record-red + display heading on one baseline */
.sec-h { display: flex; align-items: baseline; gap: var(--ar-s-4); margin-bottom: var(--ar-s-5); flex-wrap: wrap; }
.sec-h .n { font-family: var(--ar-font-mono); font-size: 12px; color: var(--ar-record); letter-spacing: .1em; }
.sec-h .sub { font-family: var(--ar-font-mono); font-size: 11px; color: var(--ar-text-2); letter-spacing: .06em; margin-left: auto; }

/* --- LEDs --------------------------------------------------------------- */

.led { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.led.g { background: var(--ar-green);  box-shadow: var(--ar-glow-green); }
.led.r { background: var(--ar-record); box-shadow: var(--ar-glow-record); }
.led.a { background: var(--ar-amber);  box-shadow: var(--ar-glow-amber); }
.led.pulse { animation: ar-pulse 2s ease-in-out infinite; }
@keyframes ar-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ar-s-2);
  min-height: var(--ar-touch-min);
  padding: 0 var(--ar-s-5);
  font-family: var(--ar-font-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--ar-line-2);
  border-radius: var(--ar-r-1);
  background: var(--ar-panel);
  color: var(--ar-text);
  cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.btn:hover { text-decoration: none; border-color: var(--ar-text-2); background: #313131; }
.btn-primary { background: var(--ar-blue); border-color: var(--ar-blue); color: #04121F; font-weight: 700; }
.btn-primary:hover { background: #2C95FF; border-color: #2C95FF; }
.btn-ghost { background: transparent; border-color: var(--ar-line); color: var(--ar-text-2); }
/* Outlined blue: used for the chassis-bar CTA so the solid blue stays reserved
   for the page's real primary actions (and 11px dark-on-blue reads muddy). */
.btn-outline { background: transparent; border-color: var(--ar-blue-24); color: var(--ar-blue); font-weight: 700; }
.btn-outline:hover { background: var(--ar-blue-12); border-color: var(--ar-blue); }
.btn-ghost:hover { background: transparent; color: var(--ar-text); border-color: var(--ar-line-2); }

/* --- Chassis bar (sticky) ----------------------------------------------- */

.chassis {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,18,18,.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--ar-border);
  /* The bar used to run edge to edge while the page sits in a 1240px rack, so it read as
     a separate, much wider element and pushed the CTA far outboard of the content it
     belongs to. Same width and same side rails as .rack: now it is the rack's lid. */
  max-width: 1240px; margin: 0 auto;
  border-left: var(--ar-border); border-right: var(--ar-border);
}
.chassis-in {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--ar-s-5);
  padding: 0 var(--ar-s-6); height: 52px;
  /* Nothing in this row may widen the page: the items are nowrap, so without this a
     narrow window gets a horizontal scrollbar and the CTA ends up outside the rack. */
  min-width: 0; overflow: hidden;
}
.chassis .brand, .chassis nav { flex: 0 0 auto; }
.readout { min-width: 0; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ar-text); }
.brand:hover { text-decoration: none; }
.brand .wm { font-family: var(--ar-font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #FFFFFF; }

.readout { display: flex; align-items: center; gap: var(--ar-s-4); font-family: var(--ar-font-mono); font-size: 10.5px; color: var(--ar-text-2); letter-spacing: .07em; }
.readout .v { color: var(--ar-text); font-style: normal; }
.readout span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.chassis nav { margin-left: auto; display: flex; align-items: center; gap: var(--ar-s-5); }
.chassis nav a { font-size: 13.5px; color: var(--ar-text-2); white-space: nowrap; }
.chassis nav a:hover { color: var(--ar-text); text-decoration: none; }
.chassis .btn { min-height: 34px; padding: 0 var(--ar-s-4); font-size: 11px; }
.chassis nav { padding-left: var(--ar-s-2); }

/* Drop things out BEFORE they overflow, not after. Measured against the natural width
   of the row: logo ~150, readout ~430 (~200 once .opt goes), four links ~250, Buy ~60,
   button ~140, plus gaps. */
/* The optional readout items are hidden at EVERY width, not just below 1240. Above 1240
   the rack is still capped at 1240, so the media query stopped applying while the space
   did not grow: the row then truncated 'or a WAV' mid-phrase. One line of readout plus
   MAC/WIN is what actually fits alongside the nav, and the 'into a DAW, any app or a WAV'
   half is the hero lede's job two inches below. */
.readout .opt { display: none; }
/* 1230px, not 1160. The nav item that reads "Ways to capture" is ~50px wider than the
   "Paths" it replaced, and the readout is the flexible item in that row: at 1180 it was
   being clipped mid-phrase again ("MAC / WIN" cut in half), which is the exact fault the
   note above this describes. Measured: clipped by 50px at 1180, 10px at 1220, fits at 1230. */
@media (max-width: 1230px) { .readout { display: none; } }
@media (max-width: 1040px) { .chassis nav a:not(.btn):not(.buy) { display: none; } }
@media (max-width: 880px) {
  .chassis nav { margin-left: auto; gap: var(--ar-s-3); }
}
@media (max-width: 560px) {
  /* Tightest case: keep only the primary action. */
  .chassis nav a.buy { display: none; }
  .chassis-in { gap: var(--ar-s-3); padding: 0 var(--ar-s-4); }
}
/* 34px is a deliberate size for a compact 52px desktop bar. On a phone, though, this button
   is the primary call to action on 33 of the site's pages, and it was the ONLY control
   anywhere below the 44px touch minimum. A width sweep could never have found it: nothing
   overflows, nothing collapses, the page just makes its main CTA hard to hit.
   The bar grows to 58px to hold it, which is still a thin header. */
@media (max-width: 480px) {
  .chassis-in { height: 58px; }
  .chassis .btn { min-height: 44px; padding: 0 var(--ar-s-4); }
}

/* --- Footer ------------------------------------------------------------- */

/* One track per child. There are five - brand, Product, Guides, Company, Community -
   and the grid declared four, so Community wrapped to a second row while the first
   row's height was set by Company's five links. That left a band of dead space under
   the brand blurb roughly as tall as the footer itself.
   Below 1080px five link columns stop fitting ("Video walkthroughs" needs ~140px), so
   step to three and then two rather than letting them wrap raggedly. */
footer.site { padding: var(--ar-s-6); display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: var(--ar-s-6); }
@media (max-width: 1080px) { footer.site { grid-template-columns: 1.35fr 1fr 1fr; } }
/* Two columns for five children leaves Community alone on a third row with a dead half
   beside it, and pairs the short brand blurb against Product's four links so row one is
   taller than its content. The brand spans the full width instead, which leaves exactly
   four link columns to fill two even rows. Row gap comes down too: at this width the
   column headings already separate the groups. */
@media (max-width: 780px) {
  footer.site { grid-template-columns: 1fr 1fr; gap: var(--ar-s-5) var(--ar-s-6); }
  footer.site > div:first-child { grid-column: 1 / -1; }
}
footer.site h4 { margin: 0 0 var(--ar-s-3); font-family: var(--ar-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-text-2); font-weight: 400; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { padding: 3px 0; }
footer.site a { font-size: 13.5px; color: var(--ar-text-2); }
footer.site a:hover { color: var(--ar-text); text-decoration: none; }
.legal { padding: var(--ar-s-4) var(--ar-s-6) var(--ar-s-7); font-family: var(--ar-font-mono); font-size: 10px; letter-spacing: .07em; color: var(--ar-text-2); }

/* --- Reduced motion: no exceptions ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cord-live, .mfill, .rec-led, .led.pulse { animation: none; }
  .cord-live { stroke-dasharray: none; opacity: .5; }
  .mfill { transform: scaleX(.7); }
  * { transition-duration: 1ms !important; }
}

/* The three blocks below started life on the landing page but are not specific to
   it: a two-column module grid, the FAQ accordion, and the phone-only folds that
   keep long blocks from turning a page into fifteen screens of scrolling. Guides and
   the legal pages want all three. */

/* --- Two-column module grid -------------------------------------------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo > * { border-right: var(--ar-border); padding: var(--ar-s-6); }
.duo > *:last-child { border-right: 0; }
@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; }
  .duo > * { border-right: 0; border-bottom: var(--ar-border); }
  .duo > *:last-child { border-bottom: 0; }
}

.chain { display: flex; align-items: center; gap: var(--ar-s-3); flex-wrap: wrap; margin: var(--ar-s-5) 0; }
.chain { gap: var(--ar-s-2) var(--ar-s-2); }
.chain .node { border: var(--ar-border); background: var(--ar-ink); padding: 7px 9px; font-family: var(--ar-font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ar-text-2); white-space: nowrap; }
.chain .node.core { border-color: var(--ar-line-2); background: var(--ar-panel); color: var(--ar-text); }
.chain .arw { color: var(--ar-line-2); font-family: var(--ar-font-mono); font-size: 12px; }

.facts { list-style: none; margin: 0; padding: 0; border-top: var(--ar-border); }
.facts li { display: flex; gap: var(--ar-s-4); padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 14px; color: var(--ar-text-2); }
.facts li:last-child { border-bottom: 0; }
.facts .k { font-family: var(--ar-font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ar-text-2); width: 116px; flex: none; padding-top: 2px; }
.facts .v strong { color: var(--ar-text); font-weight: 500; }
.facts code { font-family: var(--ar-font-mono); font-size: 12.5px; color: var(--ar-text); }

/* Compact spec grid — density where pro users want it */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; border: var(--ar-border); margin-top: var(--ar-s-2); }
.spec-grid > div { padding: 9px 12px; border-right: var(--ar-border); border-bottom: var(--ar-border); display: flex; flex-direction: column; gap: 2px; }
.spec-grid > div:nth-child(2n) { border-right: 0; }
.spec-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.spec-grid span { font-family: var(--ar-font-mono); font-size: 9px; letter-spacing: .1em; color: var(--ar-text-2); }
.spec-grid b { font-family: var(--ar-font-mono); font-size: 11.5px; font-weight: 400; color: var(--ar-text); }
@media (max-width: 520px) { .spec-grid { grid-template-columns: 1fr; } .spec-grid > div { border-right: 0; } }

/* --- FAQ ---------------------------------------------------------------- */

details.q { border-bottom: 1px solid rgba(255,255,255,.055); }
details.q:last-of-type { border-bottom: 0; }
details.q summary {
  cursor: pointer; list-style: none; padding: 15px 0;
  display: flex; align-items: center; gap: var(--ar-s-3);
  font-size: 15.5px; color: var(--ar-text);
  min-height: var(--ar-touch-min);
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::before {
  content: "+"; font-family: var(--ar-font-mono); font-size: 14px; color: var(--ar-record); flex: none; width: 14px;
}
details.q[open] summary::before { content: "−"; }
details.q .a { padding: 0 0 16px 26px; color: var(--ar-text-2); font-size: 14.5px; }
details.q .a p { max-width: 76ch; }

/* --- Mobile folds ------------------------------------------------------- */
/* Two blocks carry most of the page's length on a phone: the comparison (as cards,
   seven of them) and the architecture deep-dive. Both are the right depth on a desktop
   and both are a lot of scrolling on a 390px screen for someone still deciding whether
   this tool is for them.
   They ship as <details open> with the summary hidden, so desktop and no-JS render
   exactly as before; a matchMedia handler closes them on phones only. Using <details>
   rather than a height clamp means the browser handles focus, find-in-page and
   keyboard access for free. */
details.m-fold > summary { display: none; }
details.m-fold { border: 0; }
@media (max-width: 560px) {
  details.m-fold {
    display: block; border-top: var(--ar-border); margin-top: var(--ar-s-4);
  }
  details.m-fold > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ar-s-3);
    min-height: var(--ar-touch-min); cursor: pointer; list-style: none;
    font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ar-text);
  }
  details.m-fold > summary::-webkit-details-marker { display: none; }
  details.m-fold > summary::after {
    content: "+"; color: var(--ar-record); font-size: 15px; line-height: 1;
  }
  details.m-fold[open] > summary::after { content: "\2212"; }
  details.m-fold[open] > summary { border-bottom: var(--ar-border); margin-bottom: var(--ar-s-4); }
  /* the atmosphere band is pure decoration and costs a fifth of a screen */
  .atmos-band { display: none; }
}

/* --- Page shell: content pages ------------------------------------------ */
/* The landing page is a rack of full-bleed bands; every other page is a document. What
   a document needs on top of that is long-form typography, NOT a second container: an
   earlier draft of this file added a .wrap that duplicated .rack + .band.pad exactly,
   which would have left the site with two competing structural idioms. Content pages use
   the same skeleton as the landing page - main.rack wrapping .band.pad sections, with the
   footer inside the rack so it inherits the rail - and .prose sets the measure inside. */

/* Reading measure. 68ch at 17px lands near 640px, which is the range where line
   length stops fighting the reader. Headings and full-bleed children opt out. */
.prose { max-width: 68ch; }
.prose > .full { max-width: none; }

.prose h2 {
  font-size: 23px; letter-spacing: -0.012em;
  margin: var(--ar-s-7) 0 var(--ar-s-4);
}
.prose h3 {
  font-size: 17.5px; letter-spacing: -0.008em;
  margin: var(--ar-s-6) 0 var(--ar-s-3);
}
.prose h4 {
  font-family: var(--ar-font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-2);
  margin: var(--ar-s-5) 0 var(--ar-s-2);
}
.prose > *:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; color: var(--ar-text-2); }
.prose strong { color: var(--ar-text); font-weight: 500; }
.prose ul, .prose ol { margin: 0 0 var(--ar-s-4); padding-left: var(--ar-s-5); }
.prose li { margin-bottom: var(--ar-s-2); }
.prose li::marker { color: var(--ar-line-2); }
/* Underline links in RUNNING TEXT only. A block-level anchor - a card wrapping a
   heading, a paragraph and a meta row - inherited this and underlined all of it, which
   turned the guides index into a wall of underlined paragraphs. */
/* Name the running-text contexts instead of excluding everything else. The exclusion list
   was both incomplete - it caught the contents rail and the breadcrumbs - and pushed to
   specificity (0,4,1) by its own :not() arguments, so a component could not override it
   without an arms race. Paragraphs, list items, quotes and table cells are where a link
   needs an underline; navigation is not. */
/* Kept deliberately LOW specificity — (0,1,2) — so a component can override it with one
   class. The previous version carried :not(.btn):not(.rc-btn), whose arguments pushed it to
   (0,3,2); every component that needed clean links then lost the fight, which is why the
   contents rail and the breadcrumbs stayed underlined through two attempts to fix them.
   Buttons opt out by declaring text-decoration on .btn itself, below, not by exclusion. */
.prose :is(p, li, dd, blockquote, td, figcaption) a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
a.guide-card, a.guide-card:hover { text-decoration: none; }
.prose code, code {
  /* A long path or flag in inline code has no break opportunity, so without this it makes
     the page wider than the viewport - three guides failed on `code = 385..487px`. */
  overflow-wrap: anywhere;
}
.prose code {
  font-family: var(--ar-font-mono); font-size: 0.88em;
  background: var(--ar-ink); border: var(--ar-border); border-radius: var(--ar-r-1);
  padding: 1px 5px; color: var(--ar-text);
}
.prose pre {
  font-family: var(--ar-font-mono); font-size: 12.5px; line-height: 1.6;
  background: var(--ar-ink); border: var(--ar-border);
  padding: var(--ar-s-4); overflow-x: auto; color: var(--ar-text-2);
}
.prose pre code { background: none; border: 0; padding: 0; }
/* Phones: wrap instead of scrolling. A <pre> holding a shell command needed 410px in a
   344px column, which is the cropped-content-behind-a-scrollbar pattern that reads as a
   broken page. A wrapped command is still correct to copy; a hidden one is not readable at
   all. anywhere rather than break-word so a long path breaks instead of overflowing. */
@media (max-width: 820px) {
  .prose pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
}
.prose blockquote {
  margin: var(--ar-s-5) 0; padding: 0 0 0 var(--ar-s-4);
  border-left: 2px solid var(--ar-record-24); color: var(--ar-text-2);
}
.prose hr { border: 0; border-top: var(--ar-border); margin: var(--ar-s-6) 0; }
.prose small { font-size: 13px; color: var(--ar-text-3); }
/* Long-form pages carry deep-linked headings, and the sticky chassis is 52px. */
/* Any heading that can be a link target has to clear the sticky chassis, not just the ones
   inside .prose - the guides index is a .guide-index section, and /download now deep-links
   into its #daw heading. */
:is(h1, h2, h3, h4)[id], [id].band, [id].guide-section { scroll-margin-top: 68px; }

/* Page header: the document equivalent of .sec-h */
.page-h { margin-bottom: var(--ar-s-6); }
.page-h h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: var(--ar-s-4); }
.page-h .lede { max-width: 62ch; }
.page-h .lab { display: block; margin-bottom: var(--ar-s-3); }

/* Breadcrumb: guides sit two levels down and currently offer no way back up. */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ar-s-2);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-3); margin-bottom: var(--ar-s-5);
}
.crumb a { color: var(--ar-text-2); }
.crumb a:hover { color: var(--ar-text); text-decoration: none; }
.crumb .sep { color: var(--ar-line-2); }

/* Table of contents */
.toc { border: var(--ar-border); background: var(--ar-ink); padding: var(--ar-s-4) var(--ar-s-5); margin-bottom: var(--ar-s-6); }
.toc h4 { margin-top: 0; }
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--ar-s-6); }
@media (max-width: 620px) { .toc ul { columns: 1; } }
.toc li { margin-bottom: var(--ar-s-2); font-size: 14px; }

/* Figures. The guides carry 11 screenshots each; they need a frame and a caption
   rather than a bare img on the page background. */
figure.shot-fig { margin: var(--ar-s-5) 0; }
figure.shot-fig img { display: block; width: 100%; height: auto; border: var(--ar-border); }
figure.shot-fig figcaption {
  margin-top: var(--ar-s-2);
  font-family: var(--ar-font-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ar-text-3);
}

/* Data table, for anything that is genuinely tabular outside the landing page's
   comparison. Scrolls in its own container rather than widening the page. */
.table-wrap { overflow-x: auto; border: var(--ar-border); margin: var(--ar-s-5) 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 10px var(--ar-s-4); text-align: left; border-bottom: 1px solid rgba(255,255,255,.055); }
table.data thead th {
  font-family: var(--ar-font-mono); font-size: 10.5px; letter-spacing: var(--ar-tracking-label);
  text-transform: uppercase; color: var(--ar-text-2); font-weight: 400;
  background: var(--ar-ink); border-bottom: var(--ar-border);
}
table.data td { color: var(--ar-text-2); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* Forms. Only the referral page needs these today, and it is the one page where a
   control that looks unstyled reads as broken. */
.field { display: block; margin-bottom: var(--ar-s-4); }
.field > span {
  display: block; margin-bottom: var(--ar-s-2);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase; color: var(--ar-text-2);
}
.field input, .field textarea, .field select {
  width: 100%; min-height: var(--ar-touch-min);
  padding: 0 var(--ar-s-3);
  font-family: var(--ar-font-sans); font-size: 16px;   /* 16px: smaller triggers iOS zoom */
  color: var(--ar-text); background: var(--ar-ink);
  border: var(--ar-border); border-radius: var(--ar-r-1);
}
.field textarea { padding: var(--ar-s-3); min-height: 120px; line-height: 1.55; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: var(--ar-focus); outline-offset: var(--ar-focus-offset); border-color: var(--ar-blue);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ar-text-3); }
.field .hint { display: block; margin-top: 6px; font-size: 13px; color: var(--ar-text-3); text-transform: none; letter-spacing: 0; font-family: var(--ar-font-sans); }

/* Notices */
.note {
  border: var(--ar-border); border-left: 2px solid var(--ar-line-2);
  background: var(--ar-ink); padding: var(--ar-s-4);
  margin: var(--ar-s-5) 0; font-size: 15px; color: var(--ar-text-2);
}
.note.warn { border-left-color: var(--ar-amber); }
.note.good { border-left-color: var(--ar-green); }

/* --- Segmented control --------------------------------------------------- */
/* A row of mutually exclusive buttons. The landing page uses it to switch the hero
   between three destinations; the download page uses it to switch platform. Styling
   keys off aria-selected, so it works for role=tab and for plain buttons alike. */

.switch-row { display: flex; border: 1px solid var(--ar-line); background: var(--ar-bg); }
.sw {
  flex: 1; min-height: var(--ar-touch-min);
  background: transparent; border: 0; border-right: 1px solid var(--ar-line);
  padding: 11px 8px; cursor: pointer;
  font-family: var(--ar-font-mono); font-size: 11px;
  letter-spacing: var(--ar-tracking-label); color: var(--ar-text-2);
  transition: color 140ms ease-out, background 140ms ease-out;
}
.sw:last-child { border-right: 0; }
.sw:hover { color: var(--ar-text); }
.sw[aria-selected="true"] {
  background: var(--ar-panel-2); color: var(--ar-text);
  box-shadow: inset 0 -2px 0 var(--ar-blue);
}
.sw:focus-visible { outline: var(--ar-focus); outline-offset: calc(var(--ar-focus-offset) * -1); }

/* --- Review card ---------------------------------------------------------- */
/* Used by the pricing carousel and by the /testimonials grid. The card itself is
   shared; how the cards are laid out is each page's business. */

.testimonial-card {
  flex: 0 0 clamp(260px, 32%, 340px); scroll-snap-align: start;
  border: var(--ar-border); background: var(--ar-panel-2);
  padding: var(--ar-s-5); display: flex; flex-direction: column; gap: var(--ar-s-3);
}
.quote-mark { font-family: var(--ar-font-display); font-size: 28px; color: var(--ar-record); line-height: 1; }
.testimonial-quote { margin: 0; font-size: 15px; color: var(--ar-text); }
.testimonial-attr {
  margin: auto 0 0; font-family: var(--ar-font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ar-text-2);
}
.testimonial-attr strong { color: var(--ar-text); font-weight: 400; }
.testimonial-attr a { color: var(--ar-text-2); border-bottom: 1px solid var(--ar-line-2); }
.testimonial-attr a:hover { color: var(--ar-text); text-decoration: none; border-bottom-color: var(--ar-blue); }