/* ==========================================================================
   aimset.app — shared stylesheet: tokens, fonts, base, shared components,
   the root page, the privacy page and the 404 page.
   Every value comes from the Aimset design system / the Claude Design handoff
   (docs/superpowers/specs/2026-09-17-aimset-website-handoff.md). Dark is the
   only theme.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* base ink */
  --ink-0: #05070B;
  --ink-page: #06090F;
  --ink-alt: #0B101A;
  --ink-screen: #0A0F18;
  --ink-chrome: rgba(6, 9, 14, .97);
  --ink-surface: #0C1018;

  /* text */
  --text-1: #E6E9EE;
  --text-2: #7D8697;
  --text-3: #4A5160;
  --text-4: #2D333E;

  /* accent — signal green */
  --accent: #00E676;
  --accent-hover: #5CFFA9;
  --accent-ink: #05070B;
  --accent-tint: rgba(0, 230, 118, .12);
  --accent-tint-strong: rgba(0, 230, 118, .14);
  --accent-border: rgba(0, 230, 118, .3);
  --accent-glow: rgba(0, 230, 118, .35);

  /* semantic */
  --negative: #FF4455;
  --negative-border: rgba(255, 68, 85, .4);
  --negative-tint: rgba(255, 68, 85, .08);
  --warning: #FFA928;
  --info: #5CA8FF;
  --info-tint: rgba(92, 168, 255, .14);

  /* surfaces */
  --surface-control: #141A28;
  --surface-track: #10151F;
  --surface-bar: #232D40;
  --surface-bar-bright: #3A4356;
  --surface-rail: rgba(255, 255, 255, .03);

  /* hairlines */
  --hairline-strong: rgba(255, 255, 255, .12);
  --hairline-rail: rgba(255, 255, 255, .09);
  --hairline: rgba(255, 255, 255, .07);
  --hairline-soft: rgba(255, 255, 255, .05);
  --hairline-faint: rgba(255, 255, 255, .04);
  --hairline-input: rgba(255, 255, 255, .18);
  --hairline-button: rgba(255, 255, 255, .25);

  /* target face — the only warm tones */
  --target-paper: rgba(216, 211, 196, .92);
  --target-paper-solid: #D8D3C4;
  --target-black: #06080C;
  --target-ring-dark: rgba(3, 5, 8, .35);
  --target-ring-light: rgba(216, 211, 196, .32);
  --target-numeral-dark: rgba(3, 5, 8, .5);
  --target-numeral-light: rgba(216, 211, 196, .4);
  --hit-dot: rgba(255, 68, 85, .85);
  --hit-dot-stroke: rgba(255, 255, 255, .55);

  /* identity palette — fixed data, never restyled */
  --avatar-blue: #3E7AAD;
  --avatar-red: #D94F5C;
  --avatar-green: #6B9550;
  --avatar-purple: #8A4FD4;
  --avatar-orange: #C8512B;
  --avatar-gold: #E0A020;

  /* type */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-system: -apple-system, system-ui, sans-serif;

  /* shape + metrics */
  --radius-pill: 99px;
  --radius-button: 16px;
  --button-height: 54px;
  --tabbar-height: 58px;
  --gutter: 16px;

  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-draw: ease-out;
  --draw-duration: 1.6s;
}

/* ── Fonts (self-hosted, OFL — see ../fonts/OFL.txt) ───────────────────── */
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-page);
  color: var(--text-1);
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: rgba(0, 230, 118, .25); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Keyframes (names from the handoff) ─────────────────────────────────── */
@keyframes os-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes os-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes os-ring-pulse { from { transform: scale(.35); opacity: .8; } to { transform: scale(1.85); opacity: 0; } }
@keyframes os-ringdraw { from { stroke-dasharray: 66; stroke-dashoffset: 66; } to { stroke-dasharray: 66; stroke-dashoffset: 0; } }
@keyframes os-adraw { from { stroke-dasharray: 70; stroke-dashoffset: 70; } to { stroke-dasharray: 70; stroke-dashoffset: 0; } }
@keyframes os-settle { 0% { transform: scale(1.9); opacity: 1; } 60% { transform: scale(.92); } 100% { transform: scale(1); opacity: 1; } }
@keyframes os-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes os-appear2 { from { opacity: 0; } to { opacity: 1; } }
@keyframes os-marquee { to { transform: translateX(calc(-50% - 28px)); } }
@keyframes os-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes os-wave { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes os-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes os-breathe { 0% { text-shadow: 0 0 30px var(--accent-glow); } 50% { text-shadow: 0 0 44px rgba(0, 230, 118, .55); } 100% { text-shadow: 0 0 30px var(--accent-glow); } }
@keyframes os-settle-num { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes os-fade { from { opacity: 1; } to { opacity: 0; } }

/* ── Shared components ──────────────────────────────────────────────────── */

/* Wordmark — the brand LOCKUP (2026-09-20, docs/design/2026-09-20-aimset-brand-mark/):
   mark first, then AIMSET; mark 0.88em · gap 0.35em · tracking 0.1em, all off the
   type size, wordmark at line-height 1 so the mark centres on the cap height. The
   trailing margin cancels the last letter's tracking so the box ends on the T. */
.wordmark {
  display: inline-flex; align-items: center; gap: .35em; line-height: 1;
  font-family: var(--font-mono); font-size: 13px; font-weight: 800; letter-spacing: .1em;
  margin-right: -.1em;
  color: var(--text-1); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--text-1); }
.wordmark__mark { width: .88em; height: .88em; display: block; flex: none; }
.wordmark[data-size="11"] { font-size: 11px; }

/* Machine-voice micro-label */
.label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); }
.label--dim { color: var(--text-4); }
.label a { color: var(--text-2); }
.label a:hover { color: var(--text-1); }

/* Status pill (green tint, pulse dot) */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--accent-tint); border: 1px solid var(--accent-border);
  font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.pill__dot, .pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: os-pulse 1.4s ease-in-out infinite; flex: none; }

/* Primary button — design-system PrimaryButton, primary variant */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--button-height); padding: 0 24px; border-radius: var(--radius-button);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; position: relative; overflow: hidden;
  transition: background .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn-primary::after {
  /* one soft gloss sweep on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); opacity: 0; transition: none;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 230, 118, .18); }
.btn-primary:hover::after { opacity: 1; transition: left .6s var(--ease-out); left: 120%; }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-primary--wide { width: 280px; max-width: 100%; }
.btn-primary--block { width: 100%; }

/* Ghost pill — the outline button */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: 1px solid var(--hairline-button); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-1);
  text-decoration: none; white-space: nowrap; background: transparent;
  transition: border-color .2s, color .2s, transform .2s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--text-2); color: var(--text-1); }
.btn-ghost:active { transform: scale(.98); }
.btn-ghost .arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* Nav-style accent pill CTA */
.btn-pill-accent {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s var(--ease-out);
}
.btn-pill-accent:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-pill-accent:active { transform: scale(.98); }

/* Segmented pill switch — design-system PillSwitch with a sliding thumb */
.pill-switch {
  position: relative; display: inline-flex; padding: 3px; gap: 0; margin: 0; min-width: 0;
  background: var(--surface-control); border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
}
.pill-switch__thumb {
  position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); border-radius: var(--radius-pill);
  background: var(--accent); transition: transform .28s var(--ease-out), width .28s var(--ease-out);
  pointer-events: none;
}
.pill-switch__opt {
  position: relative; z-index: 1; display: inline-block; padding: 6px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap; cursor: pointer; transition: color .2s;
}
.pill-switch__opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.pill-switch__opt.is-on { color: var(--accent-ink); font-weight: 800; }
.pill-switch__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Layout frame */
.container { max-width: 1220px; margin: 0 auto; padding: 0 32px; }

/* ── Root page ──────────────────────────────────────────────────────────── */
.home {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  /* minmax(0, …): a word too long for the column must not widen the bar and
     the footer past the screen (overflow: hidden would clip their right edge). */
  grid-template-columns: minmax(0, 1fr);
  background: radial-gradient(1100px 720px at 72% 8%, #0E1524 0%, var(--ink-page) 62%);
}
.home__bar { width: 100%; height: 72px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.home__links { display: flex; align-items: center; gap: 22px; }
.home__contact { color: var(--text-2); transition: color .2s; }
.home__contact:hover { color: var(--text-1); }

.home__face {
  position: absolute; z-index: 0; width: min(900px, 130vw); height: auto;
  right: -20%; bottom: -38%; opacity: .7; pointer-events: none;
  transition: transform .8s var(--ease-out);
}
.home__face .face-paper { fill: rgba(216, 211, 196, .035); stroke: rgba(216, 211, 196, .22); }
.home__face .face-ring { fill: none; stroke: rgba(255, 255, 255, .10); }
.home__face .face-black { fill: rgba(6, 8, 12, .9); stroke: rgba(216, 211, 196, .25); }
.home__face .face-ring-in { fill: none; stroke: rgba(216, 211, 196, .14); }
.home__face .face-centre { fill: rgba(216, 211, 196, .45); }
.home__face .hit { fill: var(--hit-dot); stroke: var(--hit-dot-stroke); stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: os-settle .3s cubic-bezier(.2, .9, .3, 1.25) both; transition: fill .4s, opacity .4s; }
.home__face .hit.is-latest { fill: var(--accent); stroke: none; }
.home__face .hit.is-fading { opacity: 0; }
.home__face .hit-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .6; transition: opacity .4s; }
.home__face .hit-ring.is-fading { opacity: 0; }
.home__face .hit-pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .35; transform-box: fill-box; transform-origin: center; animation: os-ring-pulse 1.4s cubic-bezier(.4, 0, .2, 1) 1 both; }

.home__body {
  position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto;
  padding: clamp(48px, 12vh, 140px) 32px clamp(40px, 8vh, 96px);
  display: flex; flex-direction: column; gap: 26px;
}
.home__h1 {
  margin: 0; font-family: var(--font-mono); font-size: clamp(44px, 7vw, 76px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.04; color: var(--text-1);
}
/* "standplassen." is one word, wider than a 375 px phone at the English minimum. */
html[lang="nb"] .home__h1 { font-size: clamp(38px, 7vw, 76px); }
.rise { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.rise > span { display: inline-block; animation: os-rise .75s var(--ease-out) both; }
.rise:nth-child(2) > span { animation-delay: .1s; }
.home__lede { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 46ch; text-wrap: pretty; }
.home__note { margin: 0; }
.home__foot {
  position: relative; z-index: 1; width: 100%; padding-top: 22px; padding-bottom: 28px; /* sides: .container */
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
}
.home .fade-in { animation: os-fade-up .6s ease-out both; }
.home .fade-in[data-delay="1"] { animation-delay: .32s; }
.home .fade-in[data-delay="2"] { animation-delay: .44s; }
.home .fade-in[data-delay="3"] { animation-delay: .56s; }
.home .fade-in[data-delay="4"] { animation-delay: .68s; }

/* Waitlist form — design-system UnderlineField + primary CTA */
.waitlist { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.waitlist__field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.waitlist__eyebrow { font-size: 8px; letter-spacing: 2px; }
.waitlist__input {
  width: 100%; font-family: var(--font-system); font-size: 16px; color: var(--text-1);
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline-input); border-radius: 0;
  padding: 0 0 10px; outline: none; -webkit-appearance: none; appearance: none;
}
.waitlist__input::placeholder { color: var(--text-3); }
.waitlist__field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.waitlist__field:focus-within::after { transform: scaleX(1); }
.waitlist.is-error .waitlist__field::after { background: var(--negative); transform: scaleX(1); }
.waitlist__input:focus-visible { outline: none; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist__submit { flex: none; }
.waitlist__submit[disabled] { opacity: .55; cursor: default; transform: none; }
.waitlist__status { flex-basis: 100%; margin: 0; min-height: 1em; color: var(--text-3); letter-spacing: 1.5px; display: flex; align-items: center; gap: 9px; }
.waitlist__status.is-error { color: var(--negative); }
.waitlist__status.is-ok { color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: 2.5px; animation: os-fade-up .5s ease-out both; }
.waitlist__status.is-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: os-pulse 1.4s ease-in-out infinite; flex: none; }
.waitlist.is-done .waitlist__field, .waitlist.is-done .waitlist__submit { display: none; }
.waitlist.is-done .waitlist__status { padding: 18px 0 0; border-top: 1px solid var(--hairline); }

/* ── Document pages (privacy, 404) ──────────────────────────────────────── */
.doc-bar {
  position: sticky; top: 0; z-index: 10; height: 60px; background: var(--ink-chrome); border-bottom: 1px solid var(--hairline-strong);
}
.doc-bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px; }
.doc-bar__back { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.doc-bar__back:hover { color: var(--text-1); }
.doc { max-width: 680px; margin: 0 auto; padding: 56px 32px 96px; }
.doc h1 { margin: 0 0 6px; font-family: var(--font-mono); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.doc .meta { margin: 0 0 40px; }
.doc h2 { margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-1); }
.doc p, .doc li { margin: 10px 0; font-size: 16px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.doc strong { color: var(--text-1); font-weight: 600; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--accent); }
.doc code { font-family: var(--font-mono); font-size: .9em; color: var(--text-1); }
.doc-foot { border-top: 1px solid var(--hairline); padding: 24px 32px 40px; }
.doc-foot__in { max-width: 680px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.notfound { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 40px 32px; background: radial-gradient(1100px 720px at 72% 8%, #0E1524 0%, var(--ink-page) 62%); }
.notfound__code { font-family: var(--font-mono); font-size: 88px; font-weight: 800; letter-spacing: -5px; line-height: .95; color: var(--text-3); }
.notfound__h { margin: 0; font-family: var(--font-mono); font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.notfound__p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.6; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .home__bar { height: 64px; }
  .home__body { padding-top: 56px; }
  .home__face { width: 150vw; right: -40%; bottom: -22%; opacity: .5; }
  .waitlist__submit { width: 100%; }
}