/* ===========================================================================
   Amberline — global stylesheet
   Tokens, reset, and everything that appears on every page: the header, the
   footer, buttons, section headings. Page-specific rules live in
   css/page-*.css and are pulled in per page via the layout's `styles` list.
   =========================================================================== */

:root {
  --bg:#08090A; --panel:#121316; --panel-2:#16171b;
  --line:#26272c; --line-soft:#1e1f24;
  --amber:#F6B618; --amber-dim:#b8880e;
  --teal:#22C7B8; --teal-bright:#35DED0; --teal-dim:#168E84;
  /* The accents that take turns across a row of cards, claims or links: teal,
     cyan, amber, coral, in that order (Kelly, 10/08/2026). Orange only starts
     the warm bar that runs into coral. */
  --cyan:#22D3EE; --coral:#FF5C7A; --orange:#FF9A1F;
  /* Tags only: an offer (the launch-price tag) or something new. Never a text
     or box colour. Amber is the brand and teal is the action, so a tag in
     either one read as another button (Kelly, 10/02/2026 and 10/08/2026). */
  --offer:#B9A1FF;
  --ink:#F3F1EE; --ink-mid:#9a9aa2; --ink-dim:#6b6b73;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --brand-sans:"Outfit","Helvetica Neue",Arial,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

body { background:var(--bg); color:var(--ink); font-family:var(--mono);
       font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased; }

.wrap { max-width:1280px; margin:0 auto; padding:0 32px; }

a { color:var(--amber); text-decoration:none; }
a:hover { text-decoration:underline; }

:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber); color:#151004; font-size:13px; font-weight:700;
  padding:10px 18px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; text-decoration:none; }

/* ---------- form utilities (download gate + newsletter) ---------- */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Honeypot. Off-canvas rather than display:none, because some bots skip fields
   they can tell are hidden. People never reach it: aria-hidden + tabindex="-1". */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- buttons ---------- */
.btn { display:inline-block; font-family:var(--mono); font-size:13.5px; font-weight:700;
       padding:13px 26px; border-radius:8px; cursor:pointer; text-decoration:none;
       border:1px solid transparent; transition:all .15s ease; }
.btn:hover { text-decoration:none; }
.btn-amber { background:var(--amber); color:#151004; }
.btn-amber:hover { background:#ffc744; transform:translateY(-1px); }
/* "Launch price": driven by regularPrice and launchEnds in products.json
   (site.launch in _data/site.js). Shown only while the product is on sale and
   the launch window is open. */
.launch-tag, .fresh-tag { display:inline-block; vertical-align:middle; font-family:var(--mono); font-size:10px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:#150B33; background:var(--offer); border-radius:999px; padding:4px 10px; align-self:center; }
/* "New": the same tag, beside a heading or a product line. */
.fresh-tag { margin-left:10px; }

/* The outlined button: gold outline, gold text (Kelly, 10/02/2026). The grey
   outline with white text it replaces was too easy to miss on the dark page. */
.btn-ghost { background:transparent; color:var(--amber); border-color:var(--amber); }
.btn-ghost:hover { background:rgba(246,182,24,.1); color:#ffc744; border-color:#ffc744; }
/* V4 interactive accent — teal is action/state; amber remains brand identity. */
.btn-teal { background:var(--teal); color:#061110; border-color:var(--teal); }
.btn-teal:hover { background:var(--teal-bright); transform:translateY(-1px); }
.action-teal { color:var(--teal) !important; }
.action-teal:hover { color:var(--teal-bright) !important; }
.teal-text { color:var(--teal); }

/* ---------- cookie consent banner ---------- */
/* Only ever rendered when site.tracking.enabled. A non-blocking bottom sheet
   by choice (Kelly 08/20/2026: no modal, no backdrop) — but a tall, loud one:
   the earlier slim strip was ignored for whole sessions and consented traffic
   never reached analytics. Title line, bigger copy, bigger buttons, amber top
   edge and a heavy shadow so it reads as "answer me", not page chrome. Both
   choices stay equally prominent — a greyed-out "Decline" next to a bright
   "Accept" is a dark pattern and is exactly what gets these banners ruled
   invalid. */
.consent { position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(18,19,22,.98); backdrop-filter:blur(14px);
  border-top:2px solid var(--amber);
  box-shadow:0 -18px 60px rgba(0,0,0,.55); padding:56px 0 60px; }
.consent[hidden] { display:none; }
.consent-inner { max-width:1280px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:44px; }
.consent-text { flex:1; }
.consent-title { font-size:20px; font-weight:700; margin:0 0 12px; }
.consent-copy { color:var(--ink-mid); font-size:15px; line-height:1.8; margin:0; }
.consent-actions { display:flex; gap:14px; flex:none; }
.consent-actions .btn { padding:17px 36px; font-size:15px; }

@media (max-width:680px) {
  .consent { padding:34px 0 36px; }
  .consent-inner { flex-direction:column; align-items:stretch; gap:20px; padding:0 20px; }
  .consent-actions .btn { flex:1; text-align:center; }
}

/* ---------- header ---------- */
.site-header { background:rgba(10,10,11,.85); backdrop-filter:blur(10px);
               position:sticky; top:0; z-index:50; }
.nav { display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px; }
.brand { display:inline-flex; align-items:center; }
.brand .mark { height:26px; width:auto; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { color:var(--ink-mid); font-size:12.5px; letter-spacing:.08em; }
.nav-links a:hover { color:var(--ink); text-decoration:none; }
.nav-links a.store { color:var(--amber); font-weight:700; }

/* Four short links fit a phone without a menu button — tighten, don't hide. */
@media (max-width:620px) {
  .nav { height:64px; }
  .nav-links { gap:18px; }
  .nav-links a { font-size:11.5px; letter-spacing:.04em; }
}
@media (max-width:380px) {
  .wrap { padding:0 20px; }
  .nav-links { gap:13px; }
  .nav-links a { font-size:11px; letter-spacing:0; }
}

/* ---------- section scaffolding ---------- */
section { padding:110px 0 0; }
.section-head { margin-bottom:56px; }
.section-head h2 { font-size:24px; font-weight:700; letter-spacing:.02em; }
.section-head .sub { color:var(--ink-dim); font-size:12.5px; margin-top:8px; letter-spacing:.06em; }
.section-head .sub b { color:var(--amber); font-weight:700; }
.section-head .sub-caps { letter-spacing:.18em; text-transform:uppercase; }

/* ---------- shared two-column feature list ---------- */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px 72px; }
@media (max-width:640px) { .detail-grid { grid-template-columns:1fr; gap:40px; } }
.feat { font-size:13.5px; color:var(--ink-mid); }
.feat b { color:var(--ink); font-weight:700; display:block; margin-bottom:10px; font-size:15.5px; }

/* ---------- app icon plate ---------- */
.appicon { width:172px; height:172px; border-radius:40px; flex:none;
  background:linear-gradient(145deg,#2a2a30 0%,#101013 78%); border:1px solid #333339;
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; }
.appicon svg { width:110px; height:110px; }
.appicon.feature { width:120px; height:120px; border-radius:28px; }
.appicon.feature svg { width:78px; height:78px; }
.appicon.small { width:104px; height:104px; border-radius:24px; }
.appicon.small svg { width:68px; height:68px; }
.appicon.dimmed { opacity:.32; filter:grayscale(.6); }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--line-soft); margin-top:130px; padding:64px 0 72px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:720px) { .foot-grid { grid-template-columns:1fr 1fr; } }
.foot-grid h2 { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:16px; font-weight:700; }
.foot-grid ul { list-style:none; }
.foot-grid li { margin-bottom:10px; }
.foot-grid li.indent { padding-left:16px; }
.foot-grid a { color:var(--ink-mid); font-size:12.5px; }
.foot-grid a:hover { color:var(--ink); }
.foot-note { margin-top:52px; font-size:11.5px; color:var(--ink-dim); letter-spacing:.05em;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.foot-note .foot-brand { display:inline-flex; align-items:center; gap:10px; }
.foot-note .foot-brand .mark { height:14px; width:auto; }


/* ===========================================================================
   Locked Arvia V2 app icon in an .appicon slot — the PNG already contains the
   approved tile, so the slot's own background, border and padding come off.
   Lives here rather than in a page file: both the home lineup and the product
   hero use it.
   =========================================================================== */
/* ----- Correct locked Arvia V2 application icon ----- */
.appicon-image {
  padding:0 !important;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.appicon-image > img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* Exact brand-guide Arvia V2 assets. The PNG already contains the approved app tile. */
.appicon.appicon-image,
.appicon.feature.appicon-image,
.appicon.small.appicon-image {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  padding:0 !important;
}
.appicon.appicon-image > img,
.appicon.feature.appicon-image > img,
.appicon.small.appicon-image > img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* ---------- accents that take turns ----------
   A row of cards gets one accent each, in order, and a thin bar of it along
   the top edge. The card's heading, its icon and its arrow read --accent. */
.accent-turns > * { --accent:var(--teal); --accent-bar:linear-gradient(90deg,var(--accent),transparent 85%);
  position:relative; }
.accent-turns > *:nth-child(4n+2) { --accent:var(--cyan); }
.accent-turns > *:nth-child(4n+3) { --accent:var(--amber);
  --accent-bar:linear-gradient(90deg,var(--orange),var(--coral) 60%,transparent); }
.accent-turns > *:nth-child(4n+4) { --accent:var(--coral); }
.accent-turns > *::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent-bar); }