/* Fitcheck AI — Blaufluss design system
   Shared language with blaufluss.ai: Schibsted Grotesk, ink on white,
   one blue accent, river canvas, CSS phone hardware, WAAPI reveals. */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --ink: #0d0e10;
  --ink-soft: #2a2c30;
  --ink-mute: #6b6e74;
  --ink-faint: #aeb0b4;
  --line: #ececea;
  --line-soft: #f1f0ec;
  --blue: #2a59d8;
  --blue-soft: #4d77eb;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { color-scheme: light; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }
img { display: block; max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ---- River canvas (faint flow behind everything) ---- */
#river {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0.85;
}
main, nav.top, footer { position: relative; z-index: 2; }

/* ---- Layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 920px; }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }

/* ---- Nav ---- */
nav.top {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
nav.top .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img.mark,
.brand video.mark {
  width: 28px; height: 28px;
  border-radius: 8px; object-fit: cover;
  display: block;
}
.brand .name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }

nav.top ul {
  display: flex; gap: 30px; list-style: none; padding: 0; margin: 0;
  font-size: 14.5px; color: var(--ink-mute); font-weight: 500;
}
nav.top ul a { position: relative; padding: 4px 0; transition: color 200ms ease; }
nav.top ul a:hover { color: var(--ink); }

@media (max-width: 760px) { nav.top ul { display: none; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent; color: inherit;
  transition: transform 160ms var(--ease), background 240ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 1px 2px rgba(13,14,16,0.18), 0 4px 14px -6px rgba(13,14,16,0.30);
}
.btn.primary:hover { background: #1c1e22; }
.btn.ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(13,14,16,0.04);
}
.btn.ghost:hover { border-color: #d8d8d4; box-shadow: 0 1px 3px rgba(13,14,16,0.08); }
.btn .arr { transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arr { transform: translateX(3px); }
}

/* App store style download buttons */
.dl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 16px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(13,14,16,0.18), 0 6px 18px -8px rgba(13,14,16,0.35);
  transition: transform 240ms var(--ease), background 220ms ease;
  will-change: transform;
}
a.dl-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  a.dl-btn:hover { background: #1c1e22; transform: translateY(-2px); }
}
.dl-btn svg, .dl-btn img { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.dl-btn .stack { display: flex; flex-direction: column; line-height: 1.05; }
.dl-btn .stack .pre { font-size: 10.5px; font-weight: 400; opacity: 0.78; letter-spacing: 0.01em; }
.dl-btn .stack .big { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }

/* ---- Hero (split: copy left, phone duo right) ----
   No overflow clipping here: the phone shadows extend well past the
   section box and body{overflow-x:hidden} already guards the viewport. */
.hero { padding: 56px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) 1.1fr;
  gap: 48px;
  align-items: center;
  min-height: min(680px, calc(100dvh - 120px));
}
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-mute); font-weight: 500;
  box-shadow: 0 1px 2px rgba(13,14,16,0.04);
  width: fit-content;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 800ms var(--ease) 120ms forwards;
}
.hero .pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.hero .hero-logo {
  display: block;
  width: 76px; height: 76px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13,14,16,0.06), 0 10px 24px -12px rgba(13,14,16,0.22);
  margin-bottom: 26px;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 800ms var(--ease) 120ms forwards;
}
.hero h1 {
  font-weight: 600;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin: 22px 0 20px;
  max-width: 12ch;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .word { display: inline-block; }
.hero .lede {
  max-width: 46ch;
  margin: 0 0 34px;
  font-size: 18.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  opacity: 0; transform: translateY(10px);
  animation: fadeUp 900ms var(--ease) 750ms forwards;
}
.hero .ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  animation: fadeUp 900ms var(--ease) 900ms forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  .hero { padding: 40px 0 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .hero h1 { max-width: 14ch; }
  /* stacked layout: extra air between the store buttons and the phones */
  .hero .phone-stage { margin-top: 56px; }
}

/* ---- Phone hardware ---- */
.phone {
  width: 100%;
  aspect-ratio: 300 / 626;
  background: #0a0b0d;
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -20px rgba(13,14,16,0.30),
    0 80px 80px -40px rgba(13,14,16,0.20),
    0 0 0 1px rgba(13,14,16,0.04);
  position: relative;
}
.phone::before {
  content: "";
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 24px;
  background: #0a0b0d;
  border-radius: 14px;
  z-index: 3;
}
.phone .screen {
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f3f0, #ffffff);
}
.phone .screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
@media (max-width: 480px) {
  .phone { border-radius: 34px; padding: 8px; }
  .phone .screen { border-radius: 26px; }
  .phone::before { height: 18px; top: 10px; }
}

.phone-float { will-change: transform; animation: phoneFloat 6.5s ease-in-out infinite; }
.phone-tilt { transform-style: preserve-3d; will-change: transform; }
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Hero duo: capture phone behind-left, result phone front-right,
   arrow drawn between them (same layering as the old home.png art). */
.phone-stage { position: relative; will-change: transform; }
.stage-duo {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 100 / 96;
  perspective: 1400px;
}
.stage-duo .duo-back {
  position: absolute; left: 1%; bottom: 2%;
  width: 45%;
  z-index: 1;
}
.stage-duo .duo-back .phone { transform: rotate(-9deg); }
.stage-duo .duo-front {
  position: absolute; right: 2%; top: 0;
  width: 49%;
  z-index: 2;
}
.stage-duo .duo-front .phone { transform: rotate(7deg); }
.stage-duo .duo-front .phone-float { animation-delay: -3.2s; }

/* Trio fan: feedback / tips / colors, left-to-right with the rightmost
   phone on top (same order and layering as the old tipsadvice.png art). */
.stage-trio {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 100 / 88;
}
.stage-trio .trio-a { position: absolute; left: 1%;  top: 7%;  width: 41%; z-index: 1; }
.stage-trio .trio-b { position: absolute; left: 29%; top: 0;   width: 43%; z-index: 2; }
.stage-trio .trio-c { position: absolute; right: 3%; top: 10%; width: 41%; z-index: 3; }
.stage-trio .trio-a .phone { transform: rotate(-10deg); }
.stage-trio .trio-b .phone { transform: rotate(3deg); }
.stage-trio .trio-c .phone { transform: rotate(12deg); }
.stage-trio .trio-a .phone-float { animation-delay: -2.1s; }
.stage-trio .trio-b .phone-float { animation-delay: -4.4s; }
.stage-trio .trio-c .phone-float { animation-delay: -0.8s; }

/* ---- Section base ---- */
section { padding: 90px 0; }
.sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-mute); font-weight: 500;
  margin-bottom: 18px;
}
.sec-label::before {
  content: ""; width: 14px; height: 1px; background: var(--ink-faint);
}
.sec-h {
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.sec-sub {
  color: var(--ink-mute);
  font-size: 18px;
  max-width: 52ch;
  margin: 0;
}

/* ---- Features ---- */
.features .head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.features .head .sec-h { margin: 0 auto 16px; }
.features .head .sec-sub { margin: 0 auto; }

.grid { display: grid; gap: 22px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .grid.three { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 380ms var(--ease), border-color 240ms ease, box-shadow 280ms ease;
  box-shadow: 0 1px 2px rgba(13,14,16,0.03);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    border-color: #dcdcd6;
    box-shadow: 0 1px 2px rgba(13,14,16,0.04), 0 8px 22px -10px rgba(13,14,16,0.18);
  }
}
.card h3 {
  margin: 0;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.card p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15.5px;
  line-height: 1.5;
}
.card .score {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 2px;
}
.card .score .num {
  font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
  line-height: 1;
}
.card .score .den { font-size: 15px; color: var(--ink-faint); font-weight: 500; }
.card .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.card .chip {
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; background: var(--paper-2);
}
.card.muted { background: transparent; border-style: dashed; box-shadow: none; }
.card.muted h3 { color: var(--ink-soft); font-weight: 500; }
.card.muted p { color: var(--ink-mute); }

.closing-line {
  text-align: center;
  padding: 52px 0 0;
  font-size: 18px;
  color: var(--ink-mute);
  margin: 0;
}
.closing-line strong { color: var(--ink); font-weight: 600; }

/* ---- Tips (trio phones left, copy right) ---- */
.tips { padding: 110px 0 130px; }
.tips-grid {
  display: grid;
  grid-template-columns: 1.15fr minmax(280px, 1fr);
  gap: 72px;
  align-items: center;
}
.tips .text-col .sec-sub { margin-bottom: 0; }
@media (max-width: 880px) {
  .tips-grid { grid-template-columns: 1fr; gap: 52px; }
  .tips .text-col { order: -1; }
}

/* ---- CTA ---- */
.cta { padding: 130px 0 150px; text-align: center; }
.cta h2 {
  font-weight: 600;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 auto 20px; max-width: 20ch;
  text-wrap: balance;
}
.cta p { max-width: 48ch; margin: 0 auto 36px; color: var(--ink-mute); font-size: 18px; }
.cta .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); padding: 56px 0 30px; background: var(--paper); }
.foot-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 56px; margin-bottom: 52px;
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.foot-grid h5 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid ul a { font-size: 14.5px; color: var(--ink-mute); transition: color 200ms ease; }
.foot-grid ul a:hover { color: var(--ink); }
.foot-grid p { margin: 0; color: var(--ink-mute); font-size: 14px; line-height: 1.65; }
.foot-grid p strong { color: var(--ink); font-weight: 600; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px;
  font-size: 13px; color: var(--ink-mute);
}

/* ---- Legal document pages ---- */
.doc-page { padding: 48px 0 110px; }
.doc-wrap { max-width: 860px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .doc-wrap { padding: 0 22px; } }
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--ink-mute);
  transition: color 200ms ease;
  margin-bottom: 42px;
}
.back-link:hover { color: var(--ink); }
.back-link svg { transition: transform 260ms var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }
.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 40px; }
.doc-head h1 {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.04; letter-spacing: -0.032em;
  margin: 0 0 12px;
}
.doc-meta { color: var(--ink-mute); font-size: 15px; margin: 0; }

/* Document typography (hand-written legal content, inherits Schibsted) */
.doc { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.doc .lead { font-size: 17px; color: var(--ink-mute); max-width: 68ch; }
.doc h2 {
  font-weight: 600; font-size: 23px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 46px 0 14px;
}
.doc h3 {
  font-weight: 600; font-size: 18px; line-height: 1.3;
  letter-spacing: -0.014em; color: var(--ink);
  margin: 28px 0 10px;
}
.doc p { margin: 0 0 14px; max-width: 72ch; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; max-width: 70ch; }
.doc li { margin: 5px 0; }
.doc li::marker { color: var(--ink-faint); }
.doc a { color: var(--blue); font-weight: 500; word-break: break-word; }
.doc a:hover { color: var(--blue-soft); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc address { font-style: normal; margin: 0 0 14px; line-height: 1.65; }
.doc .toc {
  list-style: none; padding: 0; margin: 0 0 8px;
  columns: 2; column-gap: 40px;
}
.doc .toc li { margin: 6px 0; break-inside: avoid; }
.doc .toc a { color: var(--ink-mute); font-weight: 500; font-size: 15px; transition: color 200ms ease; }
.doc .toc a:hover { color: var(--ink); }
@media (max-width: 640px) { .doc .toc { columns: 1; } }
.doc .callout {
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 14px; padding: 16px 18px;
  font-size: 15px; color: var(--ink-mute);
  margin: 0 0 20px; max-width: 72ch;
}
.doc .callout p { margin: 0; }

/* ---- Analytics consent banner ---- */
.consent {
  position: fixed; left: 22px; bottom: 22px; z-index: 70;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(13,14,16,0.06), 0 16px 44px -14px rgba(13,14,16,0.28);
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  @starting-style { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 520px) { .consent { left: 14px; right: 14px; bottom: 14px; } }
.consent p { margin: 0 0 12px; }
.consent a { color: var(--blue); font-weight: 500; }
.consent .row { display: flex; gap: 8px; flex-wrap: wrap; }
.consent .btn { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---- Reveal animations ----
   JS drives the motion via the Web Animations API; CSS only holds the
   hidden state, gated on the .js root class so content stays visible
   without JavaScript. Once an element gets .in, CSS hands control back
   (opacity 1, no transform) so hover transitions never fight the reveal. */
.js .reveal:not(.in),
.js .hero h1 .word:not(.in),
.js .phone-rise:not(.in) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in),
  .js .hero h1 .word:not(.in),
  .js .phone-rise:not(.in) { opacity: 1; }
  .hero .pill, .hero .hero-logo, .hero .lede, .hero .ctas { animation: none; opacity: 1; transform: none; }
  .phone-float { animation: none; }
  .btn, .dl-btn, .card, .back-link svg, .btn .arr { transition: none; }
}