/* /autopilot page styles, moved verbatim out of the page's inline <style> when it became app/autopilot (a Next.js page).
   Loaded only while that page is mounted (AutopilotLanding renders the <link>), so these global selectors never reach
   another route. Component styles come from bundle.css alongside this file. */

/* The root layout's LayoutWrapper paints the marketing grey behind every page; this page brings its own paper ground. */
[data-layout-wrapper] { background: transparent; }

@font-face { font-family: "Rigid Square"; src: url("/autopilot/assets/fonts/rigidsquare-bold-webfont.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "8-bit Operator Plus"; src: url("/autopilot/assets/fonts/8bitOperatorPlus-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --ink: #1d1218; --ink-body: #3d2b2c; --ink-soft: #6b4a34; --brand: #9c4a34;
  --paper: #eadcbe; --paper-hi: #f4e7cd; --paper-lo: #dccaa7; --paper-edge: rgba(116, 72, 46, 0.34);
  --cream: #f6ecdd; --cream-soft: rgba(246, 236, 221, 0.74); --ember: rgba(255, 190, 148, 0.9);
  --night: #1a1324; --coral: #ff7c6d; --coral-hi: #ffa392; --coral-deep: #a8402f;
  --lamp: #ffb367; --moss: #5d8a68;
  --cap-face-top: #ff9584; --cap-face-bottom: #f96e5c; --cap-skirt: #e0553d; --cap-skirt-low: #cb4530;
  --cap-wall: #9c3524; --cap-wall-edge: #6f2318; --cap-label: #2b0a05; --cap-legend: #3a1008; --focus-on-coral: #241016;
  --scene-coral: #c65c44; --scene-night: #171325; --scene-ink: #120c16;
  --font-title: "Rigid Square", system-ui, sans-serif;
  --font-pixel: "8-bit Operator Plus", ui-monospace, monospace;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-paper: 20px; --radius-cap-lg: 14px; --radius-cap-md: 12px; --radius-cap-sm: 6px; --radius-header-key: 8px;
  --keycap-xl-height: 84px; --keycap-lg-height: 72px; --keycap-md-height: 58px; --keycap-sm-height: 40px;
  --space-tap: 44px; --space-paper-y: 34px; --space-paper-x: 36px; --space-eyebrow-gap: 18px; --space-body-gap: 20px;
  --space-keycap-sm: 17px; --space-keycap-md: 24px; --space-keycap-lg: 38px; --space-keycap-xl: 48px;
  --shadow-paper-base: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(146, 96, 58, 0.3), inset 0 -18px 34px -26px rgba(120, 66, 38, 0.5);
  --shadow-paper-lit-right: inset -1.5px 0 0 rgba(255, 214, 164, 0.5), 3px 0 22px -8px rgba(255, 178, 116, 0.34), -12px 22px 42px -18px rgba(24, 10, 4, 0.62), -30px 54px 92px -44px rgba(12, 5, 12, 0.74);
  --shadow-paper-lit-left: inset 1.5px 0 0 rgba(255, 214, 164, 0.5), -3px 0 22px -8px rgba(255, 178, 116, 0.34), 12px 22px 42px -18px rgba(24, 10, 4, 0.62), 30px 54px 92px -44px rgba(12, 5, 12, 0.74);
  --shadow-paper-lit-behind: 0 20px 44px -18px rgba(24, 10, 4, 0.7), 0 60px 104px -46px rgba(10, 4, 12, 0.8);
  --shadow-keycap-active: 0 0 0 1px rgba(104, 30, 18, 0.5), 0 1px 0 0 #9c3524, 0 2px 0 0 #6f2318, 0 5px 9px -4px rgba(32, 7, 3, 0.6), 0 8px 18px -10px rgba(255, 122, 96, 0.55);
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.33, 0, 0.5, 1); --ease-key: cubic-bezier(0.34, 1.52, 0.64, 1);
  --wrap: 1160px; --gutter: clamp(20px, 4vw, 46px);
}

* { box-sizing: border-box; }
html { background: var(--paper-hi); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink-body); background: var(--paper-hi); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* The page ground is paper-coloured, not a sheet: flat paper-hi plus the printed grain. */
.page { position: relative; isolation: isolate; overflow-x: clip; background: var(--paper-hi); padding-bottom: clamp(80px, 8vw, 120px); }
.page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply; opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; }

.px { font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: 0.06em; }
.aura-arrow { width: 17px; height: 10px; }

/* Legibility: the pixel eyebrows and labels read too faint at 11px on cream, so the page sets them a step larger and darker. */
.aura-eyebrow { font-size: 13px; letter-spacing: 0.16em; color: color-mix(in srgb, var(--brand) 72%, var(--ink)); }
.head-c .aura-eyebrow { justify-content: center; }
.head-c .aura-eyebrow::after { content: ""; width: clamp(16px, 1.6vw, 26px); height: 2px; background: currentColor; opacity: 0.7; flex: 0 0 auto; }

/* ------------------------------------------------ nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 32px; padding-bottom: 32px; }
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border-radius: 4px; }
.lockup:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.lockup img { width: 30px; height: auto; }
.lockup b { font-family: var(--font-title); font-weight: 400; font-size: 1.06rem; letter-spacing: 0.1em; text-transform: uppercase; }
.lockup i { width: 1px; height: 22px; background: var(--paper-edge); }
.lockup small { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.lockup b, .lockup img, .lockup i { flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.t { font-family: var(--font-pixel); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-links a.t:hover { color: var(--ink); border-color: var(--brand); }
.nav-links a.t:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* ------------------------------------------------------------ hero */
/* CENTERED HERO: no image. One centered column. Height is content-driven (no viewport-height rule) so the proof strip peeks into the first screen. */
.hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(8px, 1vw, 14px); padding-bottom: clamp(36px, 3.4vw, 48px); }
.hero .aura-display { font-size: clamp(2.2rem, 4.6vw, 4.125rem); }  /* the top step of the scale */
.hero .aura-display > span { white-space: nowrap; }
.hero .aura-body { max-width: 62ch; margin: 24px auto 0; text-wrap: balance; }
/* ------------------------------------------------------------ get Autopilot (hero)
   One centered column: pick a build, then the coral keycap downloads it. The GitHub star sits right beside it as a
   small secondary key; the open-source repo and the docs are plain links underneath. */
.get { width: 100%; max-width: 600px; margin: 40px auto 0; scroll-margin-top: 24px; }
.get-label { display: block; margin: 0 0 10px; font-size: 12.5px; letter-spacing: 0.16em; line-height: 1; color: var(--ink-soft); text-align: left; }
.get-row { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; }
.get-row > .aura-keycap, .get-row > .src { flex: 1 1 auto; min-width: 0; }
.get-row > .aura-keycap { padding: 0 28px; }
.get-dl { display: inline-flex; align-items: center; gap: 0.6em; }
.get-dl svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* GitHub star: a small paper key, the same height as the coral one, so the pair reads as one control */
.gh-star { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--keycap-lg-height); height: var(--keycap-lg-height); color: var(--ink); background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--radius-cap-lg); box-shadow: 0 8px 0 0 var(--ink); text-decoration: none; transition: transform 160ms var(--ease-key), box-shadow 160ms var(--ease-key); }
.gh-star:hover { transform: translateY(3px); box-shadow: 0 5px 0 0 var(--ink); }
.gh-star:active { transform: translateY(8px); box-shadow: 0 0 0 0 var(--ink); }
.gh-star:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.gh-star .gh-mark { width: 26px; height: 26px; fill: currentColor; }
.gh-star .gh-cap { font-size: 12px; letter-spacing: 0.12em; line-height: 1; }
.gh-star .gh-badge { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; display: grid; place-items: center; line-height: 0; background: var(--lamp); border: 1.5px solid var(--ink); border-radius: 50%; }
.gh-star .gh-badge svg { display: block; width: 11px; height: 11px; fill: var(--ink); }
.get-note { margin: 16px 0 0; text-align: center; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }  /* centered on the same line as the H1 and the links below */
.get-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--paper-edge); text-underline-offset: 3px; }
.get-note a:hover { text-decoration-color: currentColor; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 32px; margin-top: 12px; }
.hero-links .aura-quiet-link { font-size: 1.05rem; }  /* secondary to the coral key, still a clear tap target */
.hero-links .gh-mark { width: 1em; height: 1em; fill: currentColor; }
/* One native dropdown for engine + OS + version: keyboard, screen readers and phones all get the platform's own picker. */
.cmd-pick { margin: 0; }
.cmd-pick .sel { position: relative; }
.cmd-pick select { display: block; width: 100%; min-height: 52px; margin: 0; padding: 0 48px 0 18px; -webkit-appearance: none; appearance: none; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; }
.cmd-pick select:hover { background: var(--paper-hi); }
.cmd-pick select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cmd-pick .sel > svg { position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.get-row > [hidden] { display: none; }
/* Unreal source build (Windows): a copyable PowerShell block instead of a download. BENT RULE: the brand has no monospace face, so the code alone uses the system mono stack. */
.src { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px; text-align: left; background: var(--paper-lo); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 0 var(--ink); }
/* long lines scroll inside the code column, never under the Copy chip */
.src pre { flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 0 8px 10px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.6; color: var(--ink); text-align: left; }
.src-copy { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--paper-hi); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; }
.src-copy svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.src-copy .ico-fill { fill: var(--paper-hi); }
.src-copy .c-done, .src.is-copied .src-copy .c-idle { display: none; }
.src.is-copied .src-copy .c-done { display: block; }
.src-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* short desktop windows (laptops): tighten the hero rhythm further so the proof strip still begins inside the first screen */
@media (min-width: 861px) and (max-height: 820px) {
  .hero { padding-top: 14px; padding-bottom: 26px; }
  .hero .aura-display { font-size: clamp(2.2rem, min(4.6vw, 7.2vh), 4.125rem); }
  .hero .aura-body { margin-top: 16px; }
  .get { margin-top: 30px; }
}

/* ------------------------------------------------ intro: statement + badges + video */
/* Split sections (intro, FAQ) share one 5:7 grid, so the video and the FAQ list start on the same vertical line. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 64px); }
.wrap.split, .faq.split { max-width: calc(var(--narrow) + var(--gutter) * 2); }
.faq.split { max-width: var(--narrow); margin-inline: auto; }
.intro { align-items: center; }
/* BENT RULE: far longer than a brand headline (8 words max), so neutral sans 700 instead of Rigid Square uppercase. */
.intro h2 { margin: 0; max-width: 26ch; font-family: var(--font-sans); font-weight: 650; font-size: clamp(1.2rem, 0.9rem + 0.7vw, 1.45rem); line-height: 1.4; letter-spacing: -0.012em; text-align: left; text-wrap: pretty; hyphens: manual; color: var(--ink); }
.intro h2 .hl { color: var(--brand); }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.badge { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 7px 18px 7px 7px; background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 4px 0 -1px rgba(29,18,24,0.22); }
.badge-ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 8px; }
.badge-ico.amber { background: color-mix(in srgb, var(--lamp) 82%, var(--paper)); }
.badge-ico.moss { background: var(--moss); }
.badge-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.badge-txt { display: grid; gap: 5px; }
.badge-lab { font-size: 12px; letter-spacing: 0.16em; line-height: 1; color: var(--ink-soft); }
.badge-txt b { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--ink); white-space: nowrap; }

/* ---------------------------------------------------- section heads */
:root { --section-gap: clamp(72px, 8vw, 112px); --narrow: 1040px; }  /* every section below the hero shares one measure */
.section { padding-top: var(--section-gap); }
.section.intro { padding-top: clamp(28px, 3vw, 44px); }  /* sits right under the hero so the video and statement show in the first screen */
.head .aura-heading { font-size: clamp(1.7rem, 2.55vw + 0.4rem, 2.6rem); text-wrap: balance; }
.nw { white-space: nowrap; }

/* demo video: straight, same ink border and hard shadow as the page's other framed objects */
.demo { margin: 0; aspect-ratio: 16 / 9; background: var(--ink); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 6px 8px 0 -1px rgba(29,18,24,0.22); }
.demo iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ink); }
.demo-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo { position: relative; }
/* click-to-load facade: a thumbnail link with the page's own play key; the YouTube player is only created on click */
.demo-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: var(--ink); cursor: pointer; display: grid; place-items: center; }
.demo-play-icon { position: relative; }  /* above the thumbnail */
.demo-play-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--paper-hi); border: 2px solid var(--ink); box-shadow: 0 5px 0 0 var(--ink); display: grid; place-items: center; transition: transform 180ms cubic-bezier(0.34, 1.52, 0.64, 1), box-shadow 180ms cubic-bezier(0.34, 1.52, 0.64, 1); }
.demo-play-icon svg { width: 34px; height: 34px; margin-left: 4px; }
.demo-play:hover .demo-play-icon, .demo-play:focus-visible .demo-play-icon { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--ink); }
.demo-play:active .demo-play-icon { transform: translateY(5px); box-shadow: 0 0 0 0 var(--ink); }
.demo-play:focus-visible { outline: 3px solid var(--paper-hi); outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .demo-play-icon { transition: transform 120ms linear, box-shadow 120ms linear; } }

/* ------------------------------------------------------------ benchmarks
   The finding leads, as a multiple; a compact CSS bar row backs it up instead of a pasted chart image.
   Both cards are paper sheets (the site's container), centered with the section head. */
#benchmarks .head { text-align: center; }
#benchmarks .head .aura-body { margin-left: auto; margin-right: auto; max-width: 44rem; text-wrap: balance; }
.bm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); max-width: var(--narrow); margin: 48px auto 0; }
/* framed like the demo video and badges: paper face, ink border, one hard offset shadow */
.card { background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 6px 8px 0 -1px rgba(29, 18, 24, 0.22); }
.stat { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 32px); background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 6px 8px 0 -1px rgba(29, 18, 24, 0.22); }
.stat-label { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.16em; line-height: 1; color: var(--ink); }
.stat-big { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(3.4rem, 6vw, 4.8rem); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.stat-unit { font-size: 0.42em; letter-spacing: 0.04em; margin-left: 0.2em; }  /* the unit reads smaller than the number */
.stat-sub { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.45; font-weight: 500; color: var(--ink-body); text-wrap: balance; }
.bars { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 2px dotted rgba(107, 74, 52, 0.45); display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; font-size: 0.95rem; line-height: 1.2; color: var(--ink-body); }
.bar-track { height: 10px; border-radius: 999px; background: rgba(116, 72, 46, 0.14); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: rgba(61, 43, 44, 0.55); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar.is-us { font-weight: 700; color: var(--ink); }
.bar.is-us .bar-fill { background: var(--coral-deep); }
.bars-cap { margin: 12px 0 0; font-size: 0.9rem; color: var(--ink-body); }
.bm-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px; margin: 40px 0 0; }

/* ------------------------------------------------------------ trusted by: its own band after the benchmarks */
.trusted-sec { padding-top: calc(var(--section-gap) * 0.75); text-align: center; }
.trusted-band { position: relative; max-width: var(--narrow); margin: 0 auto; padding: 32px 0; border-top: 2px dotted rgba(107, 74, 52, 0.45); border-bottom: 2px dotted rgba(107, 74, 52, 0.45); }
.trusted-label { margin: 0 0 24px; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
/* -------------------------------------------------------------- about aura */
#about-aura { text-align: center; }  /* closing beat, mirrors the centered hero */
.about-card { max-width: var(--narrow); margin: 0 auto; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; text-align: left; }
.about-side { display: grid; justify-items: stretch; gap: 0; }
#about-aura .about-card .head { text-align: left; }
#about-aura .about-card .aura-body { margin-left: 0; margin-right: 0; }
.about-card .head-c .aura-eyebrow { justify-content: flex-start; }
.about-card .head-c .aura-eyebrow::after { content: none; }
#about-aura .aura-body { max-width: 50ch; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.55; text-wrap: pretty; }
.about-badges { justify-content: flex-start; flex-direction: column; align-items: stretch; }
.about-badges .badge-txt { text-align: left; }
.about-avail { margin-top: 12px; }
.about-badges { margin-top: 0; gap: 10px; }
.about-card .badge { box-shadow: none; border: 1.5px solid var(--paper-edge); background: transparent; min-height: auto; padding: 6px 16px 6px 6px; }
.about-card .badge-ico { border-width: 1.5px; }
.about-cta { display: flex; margin: 22px 0 0; }
.about-cta .aura-keycap { width: 100%; }
/* Trusted by: one slot per studio, each holding the studio's own logo file (the li's type styles only show if an image fails to load and its alt text appears). */
/* A slow, unboxed logo strip. The list is in the markup twice, back to back; sliding the track by exactly half loops seamlessly. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.trusted-logos { list-style: none; margin: 0; padding: 0 64px 0 0; display: flex; align-items: center; gap: 64px; }  /* trailing padding = gap, so the seam between the two copies matches */
.trusted-logos li { flex: 0 0 auto; display: flex; align-items: center; height: calc(var(--logo-h) * 1.95); font-family: var(--font-title); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }  /* type styles only show if an image fails and its alt text appears */
/* A set height and width:auto, so the width follows each logo's own proportions (from the width/height attributes).
   A max-height alone is not enough here: several SVGs declare no size, and would collapse to 0 in this shrink-to-fit row. */
.trusted { --logo-h: 42px; }  /* sized to fill the band; tall/wide modifiers scale from this */
.trusted-logos img { display: block; height: var(--logo-h); width: auto; }
.trusted-logos li.wide img { height: calc(var(--logo-h) * 0.8); }  /* long wordmarks (Tencent, ByteDance, Sinn, Netmarble) would otherwise dominate */
.trusted-logos li.tall img { height: calc(var(--logo-h) * 1.47); }
.trusted-logos li.tall.narrow img { height: calc(var(--logo-h) * 1.8); }  /* narrow stacked marks (Funcom, Warner Bros.) need the extra height to stay legible */

/* -------------------------------------------------------------- faq */
.faq { align-items: start; }
#faq { padding-top: calc(var(--section-gap) * 0.75); }  /* the trusted band sits evenly between Benchmarks and FAQ */
.faq .head { position: sticky; top: 32px; padding-top: 14px; }
.faq-more { margin: 22px 0 0; }
.faq-list { border-top: 2px solid var(--ink-soft); }
.faq-list details { border-bottom: 2px solid var(--ink-soft); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 4px; font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--brand); }
.faq-list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.plus { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: currentColor; transition: transform 240ms var(--ease-in); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.faq-list details p { margin: 0 0 20px; padding: 0 4px; max-width: 34rem; font-size: 1rem; line-height: 1.58; color: var(--ink-body); text-wrap: pretty; }

/* ------------------------------------------------- footer: community strip */
/* --cf-banner: room for the shared cookie bar while it is up, so it never sits on the footer's links (measured by AutopilotBannerInset) */
.site-foot { background: var(--night); color: var(--cream); padding: clamp(36px, 4vw, 52px) 0 calc(clamp(32px, 3.4vw, 44px) + env(safe-area-inset-bottom, 0px) + var(--cf-banner, 0px)); }
.foot-rule { height: 1px; margin: 0 0 clamp(18px, 1.8vw, 26px); background: linear-gradient(90deg, rgba(246,236,221,0) 0%, rgba(246,236,221,0.2) 22%, rgba(246,236,221,0.2) 78%, rgba(246,236,221,0) 100%); }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px clamp(16px, 3vw, 40px); }
.community { display: flex; align-items: center; gap: 14px; }
.community-label { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--ember); white-space: nowrap; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
/* Single-ink SVGs are authored dark: inverted at 72% on night, full opacity on hover inside a faint coral chip. */
.social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: rgba(246,236,221,0.06); box-shadow: inset 0 0 0 1px rgba(246,236,221,0.14); transition: background 200ms ease, box-shadow 200ms ease, transform 220ms var(--ease-in); }
.social img { width: 18px; height: 18px; filter: invert(1); opacity: 0.72; transition: opacity 200ms ease; }
.social:hover { background: rgba(255,124,109,0.16); box-shadow: inset 0 0 0 1px rgba(255,124,109,0.44); transform: translateY(2px); }
.social:hover img { opacity: 1; }
.social:focus-visible, .foot-credit a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.foot-credit { margin: 0; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.5; color: rgba(246,236,221,0.6); }
.foot-credit a { color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(255,190,148,0.34); padding: 12px 0 2px; }
.foot-credit a:hover { color: var(--cream); border-bottom-color: rgba(255,190,148,0.8); }

/* ------------------------------------------------------------ phone */
@media (max-width: 860px) {
  .nav-links a.t { display: none; }
  .nav-links a.t-get { display: inline-block; }  /* phones keep one way back to the download */
  .nav { padding-top: 20px; padding-bottom: 20px; }
  .hero { padding-top: 8px; padding-bottom: 32px; }
  :root { --gutter: 16px; }
  .lockup { gap: 10px; }
  .lockup small { font-size: 10px; letter-spacing: 0.12em; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .faq .head { position: static; }
  .intro { gap: 28px; }
  .badges { gap: 12px; }
  .badge { flex: 1 1 230px; min-height: 56px; }
  .hero .aura-display { font-size: clamp(2.05rem, 9.6vw, 3rem); }
  .head .aura-heading { font-size: clamp(1.4rem, 6.2vw, 1.8rem); line-height: 1.02; }
  .intro-copy, .faq .head { text-align: center; }
  .intro-copy .aura-eyebrow, .faq .head .aura-eyebrow { justify-content: center; }
  .intro-copy .aura-eyebrow::after, .faq .head .aura-eyebrow::after { content: ""; width: 16px; height: 2px; background: currentColor; opacity: 0.7; flex: 0 0 auto; }
  .intro h2 { text-align: center; }
  .faq .head .aura-body { margin-left: auto; margin-right: auto; }
  .about-card { grid-template-columns: minmax(0, 1fr); text-align: center; }
  #about-aura .about-card .head { text-align: center; }
  #about-aura .about-card .aura-body { margin-left: auto; margin-right: auto; font-size: 1rem; }
  .about-card .head-c .aura-eyebrow { justify-content: center; }
  .about-card .head-c .aura-eyebrow::after { content: ""; }
  .about-side { justify-items: center; }
  .about-badges { width: min(100%, 300px); margin-inline: auto; }
  .about-badges .badge { flex: 0 0 auto; }  /* the generic phone badge basis (230px) would become height in this vertical stack */
  .about-cta { justify-content: center; width: min(100%, 300px); margin-inline: auto; }
  .stat { padding: 22px 18px; }
  .bm-more .aura-keycap { width: min(100%, 300px); }
  .bm-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .foot-row { flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
  .community { flex-direction: column; gap: 14px; }
  .socials { gap: 10px; }
  .quiet-tap { min-height: var(--space-tap); }
  .faq-list summary { min-height: 56px; }
  .trusted { --logo-h: 34px; }
  .trusted-logos { gap: 48px; padding-right: 48px; }
}
@media (max-width: 619px) {
  .hero-links { flex-wrap: nowrap; gap: 4px 16px; }
  .hero-links .aura-quiet-link { font-size: 0.92rem; }
  #get-meta { display: block; }
  #get-meta > span[aria-hidden] { display: none; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .get-label { text-align: center; }
  .trusted { --logo-h: 27px; }
  .trusted-logos { gap: 40px; padding-right: 40px; }
  .get-row > .aura-keycap { padding: 0 18px 0 20px; }
  .about-cta .aura-keycap { width: 100%; }
}
/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cmd-face, .cmd:hover .cmd-face, .cmd:focus-visible .cmd-face { transition: transform 120ms linear; }
  .social { transition-duration: 120ms; }
  .social:hover { transform: none; }
  /* no drifting logos: one still, wrapped row, without the duplicate copy or the edge fade */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; justify-content: center; }
  .marquee-track .trusted-logos[aria-hidden="true"] { display: none; }
  .trusted-logos { flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding: 0; }
}