/* Colours mirror the app's Theme.swift so the site and the app read as one thing. */

@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #101623;
  --line: #101623;
  --shade: #101623;
  --ground: #E6ECF5;
  --panel: #FFFFFF;
  --blue: #2B6BEF;
  --blue-deep: #1B4FC0;
  --blue-soft: #D6E4FF;
  --red: #E5342B;
  --green: #16A44C;
  --yellow: #F7B916;
  --purple: #7B3FE4;
  --slate: #5A6B85;
  --muted: #6B7A93;
  --on-bright: #101623;
  --link: #2B6BEF;

  --display: "Archivo Black", "Space Grotesk", system-ui, sans-serif;
  --text: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --gutter: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EDF6;
    --line: #000000;
    --shade: #000000;
    --ground: #121A26;
    --panel: #232D3E;
    --blue: #4F86F7;
    --blue-deep: #3A6FE0;
    --blue-soft: #C9DAFF;
    --red: #EF4B42;
    --green: #22B85C;
    --purple: #9563F0;
    --slate: #A3B0C4;
    --muted: #8391A7;
    --link: #7EA6FA;
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
}

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--blue-deep); }

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

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.disp {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.card {
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--shade);
}

/* ---------- Header ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.25rem;
}
.brand:hover { color: var(--ink); }
.brand img { width: 2.25rem; height: 2.25rem; }

.pill {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}

/* The home page's header stays on screen with a way to sign up from anywhere on it.
   The rule under it appears once something scrolls beneath (reveal.js). */
.site-head-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ground);
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s ease;
}
.site-head-bar.scrolled { border-bottom-color: var(--line); }
.site-head-bar .site-head { padding-top: 0.75rem; padding-bottom: 0.75rem; flex-wrap: nowrap; }

.head-actions { display: flex; align-items: center; gap: 0.75rem; }

/* .btn.btn-small, so it wins over .btn, which comes later in this file. */
.btn.btn-small {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--shade);
}
.btn.btn-small:hover { color: #FFFFFF; }

/* On a phone the button matters more than the label beside it. */
@media (max-width: 30rem) {
  .head-actions .pill { display: none; }
}

/* The sticky header would otherwise cover the heading a link jumps to. */
[id] { scroll-margin-top: 5rem; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 3.5rem;
}

.hero h1 {
  font-size: clamp(2.25rem, 9vw, 3.75rem);
  line-height: 0.98;
  margin: 0.5rem 0 1rem;
}
.hero h1 .accent { color: var(--blue); }
/* Each sentence starts its own line; left to wrap, "It" ends up alone on the line before. */
.hero h1 .line { display: block; }

.lede {
  font-size: 1.1875rem;
  color: var(--slate);
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

@media (min-width: 56rem) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-top: 3rem; padding-bottom: 5rem; }
}

/* ---------- Signup form ---------- */

.signup { max-width: 34rem; }

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.signup input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0 1rem;
  font: inherit;
  font-size: 1.0625rem; /* 16px or more stops Safari zooming in on focus */
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.signup input[type="email"]::placeholder { color: var(--muted); }

.btn {
  flex: 0 0 auto;
  min-height: 3.25rem;
  padding: 0 1.4rem;
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: var(--blue);
  border: 3px solid var(--line);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--shade);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shade); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

@media (max-width: 26rem) {
  .btn { flex: 1 1 100%; }
}

.consent {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

/* Empty until Turnstile wants the visitor to tick a box. */
.turnstile:not(:empty) { margin-top: 0.75rem; }

.signup-status {
  margin: 0.75rem 0 0;
  font-weight: 500;
  min-height: 1.5em;
}
/* Kept in the page (empty) so screen readers hear it the moment it fills in. */
.signup-status:empty { margin: 0; min-height: 0; }
.signup-status[data-kind="error"] { color: var(--red); }

.trust {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.trust li {
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--panel);
  border: 2px solid var(--line);
}
.trust li::before { content: "✓ "; color: var(--green); }

.signup-done {
  padding: 1rem 1.1rem;
  background: var(--blue);
  color: #FFFFFF;
}
.signup-done p { margin: 0.25rem 0 0; color: var(--blue-soft); }
.signup-done .disp { font-size: 1.25rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Preview: real app screens, one phone, until the demo recording ---------- */

/* The screens share one phone so the page stays a short waitlist, not a tour. Swiping
   is plain scroll-snap, so it works with JavaScript off; carousel.js only adds the
   dots, the caption and the slow advance. */
.preview {
  width: 100%;
  max-width: 19rem;
  justify-self: center;
  margin: 0;
}

/* A phone outline in the site's card style, not a photo of a device. */
.phone {
  padding: 0.6rem;
  background: var(--line);
  border-radius: 2.6rem;
  box-shadow: 6px 6px 0 var(--blue);
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 2rem;
}
.slides::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.preview img,
.preview video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
}

.slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* The visible dot is small; the tap target around it is not. */
.dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
}
.dot::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--line);
  background: var(--panel);
}
.dot[aria-current="true"]::before { background: var(--blue); }

/* So it is obvious there is more to see: dots alone read as decoration. */
.arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0.35rem;
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--shade);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.arrow[hidden] { display: none; }
.arrow svg { width: 1rem; height: 1rem; }
.arrow:hover { color: #FFFFFF; background: var(--blue); }
.arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shade); }

.slide-caption {
  flex: 1 0 100%;
  text-align: center;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--slate);
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- Points ---------- */

.points {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 4rem;
}
.point { padding: 1.4rem 1.3rem; }
.point h2 { font-size: 1.25rem; line-height: 1.1; margin: 0.6rem 0 0.5rem; }
.point p { margin: 0; color: var(--slate); }
/* Drawn like the question bubble in the app's chat, so they read as things to ask. */
.asks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.asks li {
  padding: 0.35rem 0.7rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--blue);
  border: 2px solid var(--line);
}

.point-mark {
  width: 2.25rem; height: 2.25rem;
  border: 3px solid var(--line);
}
.mark-blue { background: var(--blue); }
.mark-red { background: var(--red); }
.mark-yellow { background: var(--yellow); }

@media (min-width: 48rem) {
  .points { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Section headings ---------- */

.section-head { max-width: 42rem; margin-bottom: 1.75rem; }
.section-head h2 { font-size: clamp(1.6rem, 6vw, 2.5rem); line-height: 1; margin: 0.5rem 0 0.75rem; }
.section-head p { margin: 0; color: var(--slate); font-size: 1.125rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  padding: 0 0.3em;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* ---------- Tour: one stop per tab ---------- */

.tour { padding-bottom: 3rem; }

.tour-stop {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem 0;
}

.tour-phone {
  width: 100%;
  max-width: 15rem;
  justify-self: center;
  margin: 0;
}
/* Each phone in the tour casts a different colour from the app's palette. */
.tour-stop:nth-of-type(5n+1) .phone { box-shadow: 6px 6px 0 var(--blue); }
.tour-stop:nth-of-type(5n+2) .phone { box-shadow: 6px 6px 0 var(--purple); }
.tour-stop:nth-of-type(5n+3) .phone { box-shadow: 6px 6px 0 var(--yellow); }
.tour-stop:nth-of-type(5n+4) .phone { box-shadow: 6px 6px 0 var(--red); }
.tour-stop:nth-of-type(5n+5) .phone { box-shadow: 6px 6px 0 var(--green); }

.tour-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
}

/* Phone and words swap sides each time on wide screens, so the page reads as a walk
   through the app rather than a list. */
@media (min-width: 48rem) {
  .tour-stop { grid-template-columns: 15rem 1fr; gap: 3.5rem; }
  .tour-stop:nth-of-type(even) { grid-template-columns: 1fr 15rem; }
  .tour-stop:nth-of-type(even) .tour-phone { order: 2; }
}

.tour-text h3 { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.05; margin: 0.4rem 0 0.6rem; }
.tour-text > p { margin: 0 0 1rem; color: var(--slate); font-size: 1.125rem; }

.tour-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 36rem;
}
.tour-points li { position: relative; padding-left: 1.5rem; }
.tour-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--blue);
  border: 2px solid var(--line);
}

.tour-note {
  margin: 1rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--yellow);
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 36rem;
}

/* ---------- Grades ---------- */

.grades { padding: 2rem 1.5rem; margin-bottom: 4rem; }
.grades > p { margin: 0; color: var(--slate); max-width: 46rem; }

.grade-scale {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem 1rem;
}
.grade-scale li { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; }

/* The colours GradeBadge.swift gives each grade, so a letter looks the same on both. */
.grade {
  min-width: 3.25rem;
  padding: 0.15rem 0.4rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.9375rem;
  color: #FFFFFF;
  border: 2px solid var(--line);
}
.g-top { background: var(--purple); }
.g-a { background: var(--blue); }
.g-mid { background: var(--green); }
.g-d { background: var(--yellow); }
.g-f { background: var(--slate); }

/* ---------- Scanning ---------- */

.scan { padding-bottom: 4rem; }

.steps { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step { padding: 1.4rem 1.3rem; }
.step h3 { font-size: 1.25rem; margin: 0.7rem 0 0.5rem; }
.step p { margin: 0; color: var(--slate); }
.step-num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  color: var(--on-bright);
  background: var(--yellow);
  border: 3px solid var(--line);
}

.scan-note { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--muted); max-width: 46rem; }

/* ---------- Questions ---------- */

.faq { padding-bottom: 4rem; }

/* Full width, so its edges line up with the cards above and below it. */
.faq-list { display: grid; gap: 0.75rem; }

.faq-item {
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--shade);
}

/* The browser's own open and close, so it works without JavaScript; the marker is
   redrawn as a square + that becomes − when open. */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--display);
  color: #FFFFFF;
  background: var(--blue);
  border: 2px solid var(--line);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--slate); }
.faq-sources { margin: 0; padding: 0 1.1rem 1rem 2.4rem; color: var(--slate); display: grid; gap: 0.4rem; }

/* ---------- Closing call ---------- */

.closer {
  padding: 2rem 1.5rem;
  margin-bottom: 4rem;
}
.closer h2 { font-size: clamp(1.6rem, 6vw, 2.5rem); line-height: 1; margin: 0 0 0.75rem; }
.closer > p { color: var(--slate); margin: 0 0 1.25rem; max-width: 34rem; }
/* The consent line sits under the words, beside the form rather than below it. */
.closer > .consent { margin: -0.5rem 0 1.25rem; font-size: 0.875rem; color: var(--muted); }

/* On wide screens the words sit left and the form fills the right, instead of the
   form trailing under the text and leaving half the card empty. The "You're on the
   list" panel that replaces the form takes the same place. */
@media (min-width: 56rem) {
  .closer {
    display: grid;
    grid-template-columns: 1fr minmax(0, 28rem);
    column-gap: 3rem;
    align-items: center;
  }
  .closer > h2, .closer > p { grid-column: 1; }
  .closer > p { margin-bottom: 0; }
  .closer > .consent { margin-top: 0.75rem; }
  .closer > .signup, .closer > .signup-done { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Plain pages (privacy, support) ---------- */

.doc {
  max-width: 42rem;
  padding-top: 1rem;
  padding-bottom: 4rem;
}
.doc h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1; margin: 0.5rem 0 0.5rem; }
.doc h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
.doc p, .doc li { color: var(--ink); }
.doc .updated { color: var(--muted); margin-top: 0; }
.doc .short { padding: 1.1rem 1.2rem; margin: 1.5rem 0; }
.doc .short p { margin: 0; }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 3px solid var(--line);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.site-foot nav a { color: var(--ink); font-weight: 500; }
.site-foot p { margin: 0.4rem 0 0; max-width: 46rem; }

/* Only ever added by reveal.js, so without it nothing starts hidden. */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}