/* AnswerDog design tokens — the one stylesheet the whole site imports.
 *
 * Nothing here was invented. The three colours are sampled from the logo itself
 * (docs/brand/answerdog-mark.png): #9CCBF0 is 72% of its opaque pixels, #0A0A0B is 25%,
 * #E5484D is 2.5%. Black-first, so the site is dark by default — a light theme built from a
 * palette whose dominant colour is black would be a different brand wearing the same logo.
 *
 * Every value below is either sampled or derived from a sampled one, and every derivation
 * says what it is for. Pages use tokens; pages do not carry colours.
 */

:root {
  /* --- Brand, sampled straight from the mark ------------------------------------------ */
  --brand-blue: #9CCBF0;   /* the dog */
  --brand-black: #0A0A0B;  /* its outline — a true near-black, not #000 */
  --brand-red: #E5484D;    /* the accent, and rare on purpose */

  /* --- Surfaces. Derived by lifting the brand black toward the blue, so even the greys
         belong to the palette rather than being neutral slate borrowed from elsewhere. --- */
  --surface-0: #0A0A0B;
  --surface-1: #121316;
  --surface-2: #191B20;
  --surface-3: #22252B;

  /* --- Ink -------------------------------------------------------------------------- */
  --ink: #F4F6F8;          /* 18.6:1 on surface-0 */
  --ink-soft: #C3C9D2;     /* 11.3:1 — body text that is not shouting */
  --ink-muted: #9AA1AC;    /* 6.6:1 on the darkest card — headroom, not a pass mark */

  /* --- Accents in use ---------------------------------------------------------------- */
  --accent: var(--brand-blue);          /* 11.2:1 on surface-0 */
  --accent-press: #7FB2DC;              /* brand blue darkened 12% for hover/active */
  --accent-dim: rgba(156, 203, 240, .14);
  --accent-line: rgba(156, 203, 240, .22);
  --alert: var(--brand-red);            /* 5.3:1 on surface-0 */
  --alert-dim: rgba(229, 72, 77, .12);

  /* --- Type. System stack on purpose: zero font requests, nothing to preload, no layout
         shift, and it is the fastest possible first paint on a phone on cellular. ------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale, 320px → 1200px viewport. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.55rem);

  --leading-tight: 1.15;
  --leading: 1.6;
  --measure: 34rem;        /* ~68 characters, the readable line */

  /* --- Space, on a 4px base --------------------------------------------------------- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;   --s-9: 6rem;

  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);

  --wrap: 68rem;
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: dark;
}

/* --- Base ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Nothing may widen the document. A single overflowing element pushes the whole page wider
   than the phone it is on, and every section below it gets clipped — which is exactly what a
   perfect Lighthouse score does not catch and a screenshot does. */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-soft);
  font: var(--step-0)/var(--leading) var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: var(--leading-tight); margin: 0 0 var(--s-3); }
h1 { font-size: var(--step-4); letter-spacing: -.02em; }
h2 { font-size: var(--step-2); letter-spacing: -.01em; }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 var(--s-4); max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-press); }

img { max-width: 100%; height: auto; display: block; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--s-5); }
.muted { color: var(--ink-muted); }
.center { text-align: center; }

/* --- Skip link: the first thing a keyboard reaches ----------------------------------- */
.skip {
  position: absolute; left: -9999px; top: var(--s-3);
  background: var(--surface-2); color: var(--ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); z-index: 100;
}
.skip:focus { left: var(--s-4); }

/* --- Header -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface-2);
}
.site-head .wrap {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;                     /* six nav links do not fit a 390px phone in one row */
  padding-block: var(--s-3);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: var(--radius-s); }
.brand b { color: var(--ink); font-size: var(--step-0); letter-spacing: -.01em; }
.site-head nav {
  margin-left: auto; display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-4); font-size: var(--step--1);
}
@media (max-width: 30rem) {
  /* On a narrow phone the nav takes its own line, left-aligned under the wordmark, rather
     than being squeezed against it. */
  .site-head nav { margin-left: 0; width: 100%; }
}
.site-head nav a { color: var(--ink-muted); text-decoration: none; }
.site-head nav a:hover { color: var(--ink); }

/* --- Buttons ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent); color: var(--brand-black);
  font-weight: 650; font-size: var(--step-0);
  padding: var(--s-3) var(--s-5); border: 0; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background-color .15s var(--ease);
}
.btn:hover { background: var(--accent-press); color: var(--brand-black); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
/* The hero's one micro-interaction: the arrow leans forward when you do. */
.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--surface-3);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent-line); }

/* --- Cards --------------------------------------------------------------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: var(--s-5);
}
a.card, .card-hover {
  text-decoration: none; color: inherit; display: block;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.card:hover, .card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lift);
}

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill); padding: 2px 10px;
}
.tag-soon {
  color: var(--ink-muted); background: var(--surface-2);
  border-color: var(--surface-3); text-transform: none; letter-spacing: 0;
}

/* --- Sections ------------------------------------------------------------------------ */
section { padding-block: var(--s-8); }
.section-lead { max-width: var(--measure); }

hr.rule { border: 0; border-top: 1px solid var(--surface-2); margin: 0; }

/* --- Footer -------------------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--surface-2);
  padding-block: var(--s-7) var(--s-8);
  color: var(--ink-muted); font-size: var(--step--1);
}
.site-foot a { color: var(--ink-muted); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }

/* --- Motion. Everything below is decoration and must degrade to nothing. -------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.seen { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.seen { opacity: 1; transform: none; }
}

/* No JavaScript? Nothing may stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* =====================================================================================
 * Components added for the mission-first homepage. Still tokens only: nothing below
 * introduces a colour, a size or a radius that is not declared at the top of this file.
 * ===================================================================================== */

/* --- Tap targets. Mobile is the primary art direction, so this is a floor, not a hint. --- */
.btn, .site-head nav a, .foot-links a, .car-btn, .dot {
  min-height: 44px;
}
.site-head nav a, .foot-links a {
  display: inline-flex; align-items: center;
}

/* --- Hero ---------------------------------------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero-mark { width: 72px; height: 72px; margin-bottom: var(--s-4); }
.hero .kicker {
  font-size: var(--step-0); font-weight: 650; color: var(--accent);
  margin: 0 0 var(--s-4); letter-spacing: -.01em;
}
.hero h1 { max-width: 18ch; margin-bottom: var(--s-4); }
.hero .sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 34ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Staged fade-up on load. Purely additive: the .load class is set by script, and without
   script or with reduced motion every element is already in its final position. */
.rise { opacity: 0; transform: translateY(12px); }
.load .rise {
  opacity: 1; transform: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.load .rise:nth-child(1) { transition-delay: .00s; }
.load .rise:nth-child(2) { transition-delay: .06s; }
.load .rise:nth-child(3) { transition-delay: .12s; }
.load .rise:nth-child(4) { transition-delay: .18s; }
.load .rise:nth-child(5) { transition-delay: .24s; }

/* --- Carousel ------------------------------------------------------------------------ */
.car { position: relative; }
.car-track {
  display: flex; gap: var(--s-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: var(--s-2) var(--s-4);
  /* Full-bleed on a phone so a card can sit against the gutter and the next one peeks. */
  margin-inline: calc(var(--s-5) * -1);
  padding-inline: var(--s-5);
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-card {
  flex: 0 0 82%; scroll-snap-align: center;
  display: flex; flex-direction: column;
}
@media (min-width: 40rem) { .car-card { flex-basis: 46%; } }
@media (min-width: 64rem) { .car-card { flex-basis: 31%; } }
.car-card h3 { margin-bottom: var(--s-1); }
.car-card .line { color: var(--ink-muted); font-size: var(--step--1); margin: 0 0 var(--s-4); }
.car-card .who {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 1px solid var(--surface-2);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--step--1);
}
.car-nav { display: none; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 48rem) { .car-nav { display: flex; } }
.car-btn {
  width: 44px; min-width: 44px; display: grid; place-items: center;
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--surface-3); border-radius: var(--radius-pill);
  cursor: pointer; font-size: var(--step-0);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.car-btn:hover { background: var(--surface-2); border-color: var(--accent-line); }
.car-dots { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 48rem) { .car-dots { display: none; } }
.dot {
  width: 44px; background: none; border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.dot i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface-3); transition: background-color .2s var(--ease);
}
.dot[aria-current="true"] i { background: var(--accent); }

/* --- The video slot. Built as the exact box a real embed drops into: same aspect, same
       radius, same border. Replacing the inner content changes no layout at all. -------- */
.video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background:
    radial-gradient(80% 120% at 50% 0%, var(--accent-dim), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--surface-3); border-radius: var(--radius);
  overflow: hidden; display: grid; place-items: center; gap: var(--s-2);
  text-align: center;
}
.video img { width: 40px; height: 40px; opacity: .9; }
.video .soon-label {
  font-size: var(--step--1); color: var(--ink-muted); margin: 0; padding: 0 var(--s-4);
}
.video > .inner { display: grid; place-items: center; gap: var(--s-2); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Agent + story grids ------------------------------------------------------------- */
.agent .who { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.story-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
.story h3 { font-size: var(--step-0); margin: var(--s-3) 0 var(--s-1); }
.story p { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }

.about p { font-size: var(--step-1); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .rise, .load .rise { opacity: 1; transform: none; }
  .car-track { scroll-behavior: auto; }
}
.no-js .rise { opacity: 1; transform: none; }