/* ============================================================
   vidda.ca — site styles
   Colour, type, radius and shadow values come from the Vidda
   brand pack (design_handoff_vidda_rebrand/brand-tokens.css).
   Do not hardcode new hex values; add a token instead.
   ============================================================ */

:root {
  /* Brand colours (strict roles) */
  --ink:              #1E3350; /* deep plateau · brand ground · body text */
  --clay:             #C56B45; /* dawn clay — INTERACTIVE ONLY */
  --clay-hover:       #A85636;
  --sand:             #F1E7DC; /* warm surface */
  --sun-dark:         #E8A06A; /* accent on dark ground */

  /* Supporting neutrals */
  --surface:          #FBF8F3;
  --surface-alt:      #EAE3D6;
  --border:           #EBE3D6;
  --border-warm:      #DDD1BE; /* hairlines on sand */
  --text-secondary:   #5C6572;
  --text-muted:       #9A968C;
  --on-dark:          #F1E7DC;
  --on-dark-secondary:#C3CAD4;

  /* Type */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: "Spectral", Georgia, serif; /* italic 500 — taglines only */

  --eyebrow-tracking: 0.14em;

  /* Radius + shadow */
  --radius-sm: 8px;
  --radius-lg: 14px;

  /* Horizontal page gutter, shared by every band so edges line up */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 760px; /* the column the design centres everything in */
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: var(--clay); text-decoration: none; overflow-wrap: anywhere; }
a:hover { color: var(--clay-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

h1, h2 { margin: 0; }
p { margin: 0; }

/* Visually hidden but available to screen readers */
.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;
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 10;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--clay);
  color: var(--surface);
  font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; text-decoration: none; color: var(--surface); }

/* ============================================================
   Hero — the dark band on /
   ============================================================ */
.hero {
  background: var(--ink);
  padding: clamp(64px, 9vw, 92px) var(--gutter) clamp(60px, 8.5vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.hero__logo {
  display: block;
  width: clamp(220px, 40vw, 320px);
  height: auto;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero__question {
  max-width: 800px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 6.4vw, 4.25rem); /* 36 → 68px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  text-wrap: pretty;
}

.hero__answer {
  max-width: 620px;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem); /* 18 → 22px */
  line-height: 1.5;
  color: var(--on-dark-secondary);
  text-wrap: pretty;
}

/* ============================================================
   Main band — lead paragraph + signup card
   ============================================================ */
.band {
  padding: clamp(52px, 7vw, 76px) var(--gutter) clamp(56px, 7.5vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5.5vw, 56px);
}

.lead {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 2vw, 1.25rem); /* 17 → 20px */
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- signup card ---------- */
.signup {
  width: 100%;
  max-width: var(--measure);
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4.5vw, 44px) clamp(24px, 5vw, 48px) clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.signup__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signup__title {
  font-size: clamp(1.125rem, 2.2vw, 1.25rem); /* 18 → 20px */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.signup__subtitle {
  font-size: clamp(1rem, 1.8vw, 1.0625rem); /* 16 → 17px */
  line-height: 1.6;
  color: var(--text-secondary);
}

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup__row {
  display: flex;
  gap: 10px;
}

.signup__input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px min, or iOS Safari zooms on focus */
  line-height: 1.6;
}
.signup__input::placeholder { color: var(--text-muted); }

.signup__button {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clay);
  color: var(--surface);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .15s ease;
}
.signup__button:hover { background: var(--clay-hover); }
.signup__button[disabled] { opacity: .6; cursor: default; }

.signup__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The mailto fallback, styled as the primary button */
.signup__mailto {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  background: var(--clay);
  color: var(--surface);
  font-size: 16px;
  font-weight: 700;
}
.signup__mailto:hover { background: var(--clay-hover); color: var(--surface); text-decoration: none; }

/* Confirmation shown in place of the form after a successful submit */
.signup__done {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 14px 20px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}

.signup__error {
  font-size: 14px;
  line-height: 1.55;
  color: var(--clay-hover);
  font-weight: 600;
  text-wrap: pretty;
}

.signup__consent {
  padding-top: 20px;
  border-top: 1px solid var(--border-warm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

[hidden] { display: none !important; }

/* ============================================================
   Site footer — identical on both pages
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(28px, 4vw, 36px) var(--gutter) clamp(32px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__entity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.site-footer__disclaimer {
  max-width: 840px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}

.site-footer__link { font-weight: 600; color: var(--clay-hover); }

/* ============================================================
   Privacy page
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px var(--gutter);
  background: var(--sand);
}

.page-header__logo { display: block; line-height: 0; }
.page-header__logo img { display: block; width: 124px; height: auto; }

.page-header__domain {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.doc {
  padding: clamp(48px, 7vw, 72px) var(--gutter) clamp(56px, 7.5vw, 80px);
  display: flex;
  justify-content: center;
}

.doc__inner {
  width: 100%;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.5vw, 44px);
}

.doc__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.doc__title {
  font-size: clamp(2rem, 5vw, 2.75rem); /* 32 → 44px */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}

.doc__effective {
  font-size: clamp(1rem, 1.8vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.doc__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.doc__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
}

.doc__term {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--clay);
}

.doc__def {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.0625rem); /* 16 → 17px */
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

/* Stack the definition list once 200px + 32px + text stops fitting.
   880 rather than 720 because the methodology and limitations pages use long
   term labels ("If you or someone in your household has a disability"). */
@media (max-width: 880px) {
  .doc__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
   404
   ============================================================ */
.notfound {
  min-height: 60vh;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.notfound__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}

.notfound__body {
  max-width: 520px;
  font-size: clamp(1rem, 1.8vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ============================================================
   Narrow screens — the email row stops fitting side by side
   ============================================================ */
@media (max-width: 520px) {
  .signup__row { flex-direction: column; }
  /* flex:1 governs the main axis, so once the row stacks it would fight
     height:54px and collapse the field. Drop the flex and size it directly. */
  .signup__input { flex: none; width: 100%; }
  .signup__button { width: 100%; }
  .signup__mailto { align-self: stretch; justify-content: center; }
  .site-footer__meta { justify-content: flex-start; }
}

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

@media print {
  .hero { background: none; color: var(--ink); }
  .hero__question, .hero__answer { color: var(--ink); }
  .signup, .skip-link { display: none; }
}

/* ============================================================
   Long-form document pages (/methodology, /known_limitations)
   Built on the .doc scaffolding above; these add the patterns
   those two pages need and the privacy notice does not.
   ============================================================ */

strong { font-weight: 700; }

/* Uppercase overline used as a section label outside a <dt> */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--clay);
}

/* Larger opening line under the page title */
.doc__lead {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem); /* 18 → 22px */
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.muted { color: var(--text-secondary); }

/* A lead-in line that introduces the paragraphs beneath it */
.strongline { font-weight: 700; }

/* Definition bodies carrying several paragraphs rather than one */
.doc__def--stack,
.stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.doc__def--stack-sm { display: flex; flex-direction: column; gap: 20px; }

/* Wider rhythm for the limitations list, which has far more per row */
.doc__list--wide { gap: 40px; }

/* Rule between rows in the long list */
.doc__row--sep {
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* Full-width tinted panel — "one thing that is not a limitation", "what you
   can do about most of this" */
.callout {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4.5vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.callout--tight { gap: 20px; }

.callout__title {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem); /* 18 → 21px */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* Inset aside within a definition — a caveat or worked example */
.note {
  padding: 20px 24px;
  border-radius: 10px;
  background: var(--sand);
}

/* Card linking on to the sibling page */
.next-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border-radius: 10px;
  background: var(--sand);
  font-size: clamp(1.0625rem, 2vw, 1.1875rem); /* 17 → 19px */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.next-link:hover { color: var(--ink); text-decoration: none; background: #E9DCCB; }
.next-link__arrow { color: var(--clay-hover); }

/* Body paragraph inside callouts and stacks, where no parent sets type */
.body-copy {
  font-size: clamp(1rem, 1.8vw, 1.0625rem); /* 16 → 17px */
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

/* Numbered section label — the mono "01" above a term in the app privacy
   policy. Sits inside the <dt>, above the label text. */
.doc__term-num {
  display: block;
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Subtitle under a page title — the legal entity name */
.doc__subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem); /* 17 → 19px */
  font-weight: 600;
  color: var(--ink);
}

/* Definition body with the middle gap; see --stack (24) and --stack-sm (20) */
.doc__def--stack-md { display: flex; flex-direction: column; gap: 22px; }

/* Smaller tinted panel, sized to sit inside a definition rather than span
   the column like .callout does */
.callout--sm {
  padding: clamp(22px, 3.5vw, 28px) clamp(22px, 4vw, 30px);
  border-radius: 10px;
}

/* Terms of Use numbers its sections in the secondary grey rather than the
   muted one the privacy policy uses. Kept faithful to each export; unify by
   deleting this rule if the two documents should match. */
.doc__term-num--dark { color: var(--text-secondary); }

/* Roomier variant of .note, matching .callout--sm's padding */
.note--lg { padding: clamp(22px, 3.5vw, 28px) clamp(22px, 4vw, 30px); }

/* ============================================================
   Bilingual pages (/terms)
   Both versions are in the document. Nothing is hidden until
   terms-lang.js sets data-lang on <html>, so with no JavaScript
   the reader gets both rather than neither — which is the point,
   since the French version has to be available unconditionally.
   ============================================================ */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.lang-switch__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}

.lang-switch__button {
  padding: 7px 15px;
  border: 1px solid var(--border-warm);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-switch__button:hover { background: var(--sand); color: var(--ink); }
.lang-switch__button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

/* Separator between the stacked versions when JS has not run */
.lang-pane + .lang-pane {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 2px solid var(--border);
}

/* Once a language is chosen, show only that one */
[data-lang="en"] .lang-pane[data-lang="fr"],
[data-lang="fr"] .lang-pane[data-lang="en"] { display: none; }
[data-lang] .lang-pane + .lang-pane { margin-top: 0; padding-top: 0; border-top: 0; }

/* Placeholder standing in for a translation that does not exist yet */
.lang-pending {
  padding: clamp(22px, 3.5vw, 28px) clamp(22px, 4vw, 30px);
  border: 1px dashed var(--border-warm);
  border-radius: 10px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Each pane carries the column layout .doc__inner would otherwise give it */
.lang-pane {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.5vw, 44px);
}