/* Aura Docs base. Tokens copied from the Aura prototype (proto-r aura.css :root, 2026-10-26).
   Do not invent new colors: every value below maps to a proto token. Light is the default. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/_shared/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/_shared/fonts/schibsted-grotesk-latin-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #0E1116; --ink-2: #2F343C; --muted: #6B7078; --subtle: #9AA0A8;
  --line: #E8E9ED; --line-strong: #D8DADF;
  --canvas: #F6F7F9; --surface: #FFFFFF; --surface-2: #F9FAFB; --surface-3: #F1F2F5;
  --accent: #6D5BE8; --accent-strong: #5B48D9; --accent-soft: rgba(109, 91, 232, 0.10);
  --accent-text: #4D3CC8; --accent-on: #FFFFFF; --accent-ring: rgba(109, 91, 232, 0.35);
  --green-600: #0F7A55; --green-50: #E7F6EF; --green-dot: #22A06B;
  --amber-700: #8F5208; --amber-50: #FEF3E0;
  --font: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  --fs-display: 32px; --fs-hero: 36px; --fs-h2: 20px; --fs-section: 16px; --fs-body: 14px;
  --fs-lead: 16px; --fs-meta: 12px; --fs-label: 11px; --lh-tight: 1.2; --lh-body: 1.55;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-card: 20px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgb(14 17 22 / 0.04);
  --shadow-raise: 0 2px 8px -2px rgb(14 17 22 / 0.08);
  --shadow-pop: 0 16px 40px -12px rgb(14 17 22 / 0.22), 0 2px 6px rgb(14 17 22 / 0.06);
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --topbar-h: 56px; --content-max: 1120px; --reading-max: 760px;
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: 140ms; --t-med: 240ms;
  --inv-bg: #0E1116; --inv-ink: #FFFFFF; --logo-chip: #FFFFFF; --av-bg: #EEEDF3;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font);
  font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
* { font-variant-numeric: normal !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* ---------- Top bar: real AC logo, hairline, Aura mark + wordmark ---------- */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: calc(var(--kit-max, 1160px) + 2 * var(--kit-gutter, 24px)); margin: 0 auto; height: 100%; padding: 0 var(--kit-gutter, 24px); display: flex; align-items: center; gap: var(--s-4); }
.cobrand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cobrand .ac { height: 34px; width: auto; }
.cobrand .rule { width: 1px; height: 24px; background: var(--line-strong); flex: none; }
.cobrand .aura { height: 24px; width: auto; }
.topbar .spacer { flex: 1; }

/* ---------- Type ---------- */
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.title { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); }
.muted { color: var(--muted); }
.meta { font-size: var(--fs-meta); color: var(--muted); }
.h-section { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-tight); }
.h-card { font-size: var(--fs-section); font-weight: 600; letter-spacing: -0.005em; }
.link { color: var(--accent-text); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Surfaces and controls (proto-r) ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card-pad { padding: var(--s-6); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; border: 0; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--subtle); background: var(--surface-2); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.chip-accent { background: var(--accent-soft); color: var(--accent-text); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { background: var(--green-50); color: var(--green-600); }
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-6); }
.section { margin-top: var(--s-16); }
.section-head { max-width: var(--reading-max); margin-bottom: var(--s-6); display: grid; gap: var(--s-2); }

/* ---------- Footer ---------- */
.foot { margin-top: var(--s-16); border-top: 1px solid var(--line); background: var(--surface); }
.foot-in { max-width: var(--content-max); margin: 0 auto; padding: var(--s-8) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.foot .cobrand .ac { height: 42px; }
.foot .cobrand .aura { height: 28px; }

@media (max-width: 760px) {
  .wrap, .foot-in { padding-left: 16px; padding-right: 16px; }
  .cobrand { gap: 10px; }
  .cobrand .ac { height: 30px; }
  .cobrand .aura { height: 21px; }
  .title { font-size: 28px; }
  .h-section { font-size: 21px; }
  .section { margin-top: var(--s-12); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   Sales-sheet layout (copied from the Aura sales kit, /sales/ kit.css, 2026-10-27).
   Standard for every Aura landing page: 1120 container, 24px gutter (16 on phones),
   72px section rhythm, kit type scale. No new colors.
   ===================================================================== */
:root { --kit-max: 1160px; --kit-gutter: clamp(20px, 5vw, 64px); }
.kit-wrap { max-width: calc(var(--kit-max) + 2 * var(--kit-gutter)); margin: 0 auto; padding: 0 var(--kit-gutter); }
html { overflow-x: clip; }
.kit-eyebrow { margin: 0 0 10px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.kit-h1 { margin: 0; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; text-wrap: balance; }
.kit-h2 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 650; text-wrap: balance; }
.kit-h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.kit-lead { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: #616670; max-width: 640px; }
.kit-lead b, .kit-p b { color: var(--ink); font-weight: 600; }
.kit-p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #616670; }
.kit-meta { font-size: 13px; color: #616670; }
.kit-accent { color: var(--accent-text); }
.kit-sec { padding: clamp(88px, 9vw, 136px) 0 0; }
.kit-sec-hd { max-width: 720px; margin-bottom: 36px; }
.kit-hero { padding: clamp(56px, 7vw, 104px) 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
.kit-cta { display: flex; gap: 14px 20px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.kit-grid { display: grid; gap: 20px; }
.kit-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 24px; min-width: 0; }
.kit-card-lg { padding: 32px; }
.kit-card .kit-h3 + .kit-p { margin-top: 6px; }
.kit-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.kit-ico .i { width: 20px; height: 20px; }
.kit-num { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 6px; }
.kit-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.kit-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.kit-list li .i { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }
.kit-list.x li .i { color: var(--subtle); }
.kit-list b { color: var(--ink); font-weight: 600; }
.kit-shot { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.kit-shot-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.kit-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); display: block; }
.kit-shot-bar span { margin-left: 10px; font-size: 11.5px; color: var(--muted); }
.kit-shot img { width: 100%; height: auto; display: block; }
.kit-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.kit-stat b { display: block; font-size: 36px; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.kit-stat span { font-size: 13.5px; color: #616670; }
.kit-plan { display: flex; flex-direction: column; }
.kit-plan .price { font-size: 40px; font-weight: 650; letter-spacing: -0.03em; margin-top: 10px; line-height: 1; }
.kit-plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kit-plan.pop { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-raise); }
.kit-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: 11px; font-weight: 600; }
.kit-tag-soft { background: var(--accent-soft); color: var(--accent-text); }
.kit-foot { padding: 40px 0 64px; border-top: 1px solid var(--line); margin-top: 120px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #616670; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--r-md); }
.text-link { font-size: 15px; font-weight: 600; color: var(--accent-text); }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Character clips: alpha loops with a still poster; never animate under reduced motion. */
.clip { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: transparent; }

@media (max-width: 960px) {
  .kit-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-g3 { grid-template-columns: 1fr; }
  .kit-hero { grid-template-columns: 1fr; padding-top: 32px; gap: 24px; }
  .kit-band { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 640px) {
  :root { --kit-gutter: 20px; }
  .kit-g2, .kit-g4 { grid-template-columns: 1fr; }
  .kit-sec { padding-top: 72px; }
  .kit-card-lg { padding: 24px; }
  .kit-lead { font-size: 17px; }
}