/* ==========================================================================
   DisMis — the standing pages: about, support, policy.

   app.css belongs to the app itself: it locks the body to one screen and paints
   inside it. These pages scroll, so they get their own sheet — same tokens, same
   two faces, same furniture, no SPA machinery.
   ========================================================================== */

:root {
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --ink: #101418;
  --violet: #4B31E0;
  --blue: #3E7BFA;
  --purple: #7C2AE8;
  --lilac: #A79BFF;
  --mist: #EDEBFE;
  --paper: #FBFCFB;
  --light: #F7F8F7;
  --page: #EEF1EE;
  --chip: #F3F5F3;
  --deep: #241A45;
  --news: #E7EAE7;
  --red: #E11D33;
  --green: #0E8C6A;

  --grad: linear-gradient(135deg, var(--blue), var(--purple));
  --hair: rgba(16, 20, 24, .09);
  --soft: rgba(16, 20, 24, .70);
  --faint: rgba(16, 20, 24, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 680px at 8% 0%, rgba(75, 49, 224, .16) 0%, transparent 60%),
    radial-gradient(880px 620px at 96% 100%, rgba(124, 42, 232, .12) 0%, transparent 64%),
    var(--page);
  min-height: 100%;
}

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: rgba(75, 49, 224, .18); }

.label {
  font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: .15em;
  text-transform: uppercase; color: var(--faint);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 26px;
  background: rgba(238, 241, 238, .84);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--hair);
}

.mark { display: flex; align-items: center; gap: 10px; }
.mark:hover { text-decoration: none; }
/* the app's mark, not a stand-in dot — same file the favicon and the share card use */
.mark i {
  width: 30px; height: 30px; display: block; flex: none;
  background: url('/logo.svg') center / contain no-repeat;
}
/* the link colour would otherwise paint the whole wordmark violet — in the app only
   "Mis" is violet, and the wordmark is the same object on both */
.mark b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.mark b s { text-decoration: none; color: var(--violet); }
.mark span {
  font-weight: 500; font-size: 10px; letter-spacing: .18em; color: var(--faint);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 13px; border-radius: 999px; color: var(--soft);
  font-weight: 500; font-size: 13px; white-space: nowrap;
  /* Stated rather than inherited. This sheet sets no body line-height and the landing
     page sets 1.6, which left the header a pixel shorter here — enough that the whole
     page nudged upward on the way in from home. */
  line-height: 1.6;
}
.nav a:hover { background: #fff; text-decoration: none; }
.nav a.on { background: var(--ink); color: #fff; }
/* Byte-for-byte the landing page's rule. The call to action is the one element that
   appears on every page, so any drift in it — a padding, a weight, a hover that does
   nothing — reads as a different button rather than the same one. */
.nav a.go {
  background: var(--grad); color: #fff; padding: 9px 17px; font-weight: 600;
  /* Held at 13px through the phone breakpoint, where the text links drop to 12.5 — the
     button is the one thing that must not resize between pages. */
  font-size: 13px;
}
.nav a.go:hover { filter: brightness(1.07); }

/* ── shell ───────────────────────────────────────────────────────────────── */

.wrap { max-width: 940px; margin: 0 auto; padding: 46px 26px 80px; }
.wrap.narrow { max-width: 780px; }

.hero { margin-bottom: 34px; }
.hero .label { margin-bottom: 14px; }
/* DM Sans for headings, like the app. --display is kept for .clip q — the one thing
   on these pages that is a claim being quoted, which is where the app uses it too. */
.hero h1 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(33px, 5vw, 50px); line-height: 1.1;
}
.hero h1 em { font-style: normal; color: var(--violet); }
.hero p.sub {
  margin-top: 16px; max-width: 620px; font-size: 17px; line-height: 1.62;
  color: var(--soft);
}

.card {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 26px;
  padding: 28px 30px; margin-bottom: 18px;
}
.card h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px;
}
.card h3 {
  font-size: 15px; font-weight: 600; margin: 20px 0 7px;
}
.card p, .card li { font-size: 15px; line-height: 1.72; color: var(--soft); }
.card p + p { margin-top: 12px; }
.card ul { margin: 10px 0 0 20px; }
.card li { margin-bottom: 7px; }
.card strong { color: var(--ink); font-weight: 600; }

/* a pull-quote sized paragraph, for the line that carries the page */
.lede {
  font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5; color: var(--ink); letter-spacing: -.012em;
}

/* the clipping motif from the feed, reused as a callout */
.clip {
  background: var(--news); border: 1px solid var(--hair); border-radius: 22px;
  padding: 26px 28px; margin-bottom: 18px; position: relative; overflow: hidden;
}
.clip::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad);
}
.clip .label { color: rgba(26, 24, 21, .5); margin-bottom: 10px; }
.clip q {
  font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.34; color: #1A1815; display: block; quotes: '“' '”';
}
.clip .who { margin-top: 12px; font-size: 13px; color: rgba(26, 24, 21, .58); }

/* ── the two-column story grid on /about ─────────────────────────────────── */

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cost { display: flex; align-items: flex-start; gap: 13px; }
.cost i {
  width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid;
  place-items: center; background: var(--mist);
  font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .04em;
  color: var(--violet);
}
.cost b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.cost p { font-size: 14px; }

/* verdict chips, so the vocabulary is explained where it is used */
.verdicts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v {
  padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 12px;
  letter-spacing: .06em;
}
.v.d { background: #FDECEE; color: var(--red); }
.v.l { background: #E4F6F0; color: var(--green); }
.v.m { background: #FDF1DC; color: #C77700; }
.v.s { background: #E8EDFD; color: #3B5BDB; }

/* ── the support form ────────────────────────────────────────────────────── */

.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 4px; }
.way { position: relative; }
.way input { position: absolute; opacity: 0; pointer-events: none; }
.way span {
  display: block; padding: 15px 17px; border-radius: 18px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--hair); transition: .16s ease;
}
.way b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.way small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.way span:hover { border-color: var(--lilac); }
.way input:checked + span {
  border-color: var(--violet); background: var(--mist);
  box-shadow: 0 6px 20px rgba(75, 49, 224, .14);
}
.way input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }

.field { margin-top: 18px; }
.field > label {
  display: block; margin-bottom: 7px; font-weight: 500; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
}
.field input, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 16px; background: #fff;
  border: 1.5px solid var(--hair); font-size: 15px; outline: none;
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus {
  border-color: var(--violet); box-shadow: 0 0 0 4px rgba(75, 49, 224, .12);
}

.send {
  margin-top: 20px; width: 100%; padding: 16px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 15px;
  letter-spacing: .01em; box-shadow: 0 12px 30px rgba(75, 49, 224, .26);
}
.send:disabled { opacity: .55; box-shadow: none; cursor: default; }

.note { margin-top: 12px; font-size: 13px; color: var(--faint); text-align: center; }
.err { margin-top: 12px; font-size: 14px; color: var(--red); font-weight: 500; }

/* what replaces the form once it has been sent */
.done { text-align: center; padding: 30px 10px 8px; animation: pgIn .5s ease both; }
.done i {
  width: 62px; height: 62px; border-radius: 50%; background: var(--grad);
  display: grid; place-items: center; margin: 0 auto 18px;
  font-size: 27px; color: #fff;
  box-shadow: 0 14px 34px rgba(75, 49, 224, .3);
}
.done h2 { font-family: var(--sans); font-size: 25px; font-weight: 700; letter-spacing: -.03em; }
.done p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--soft); }

/* ── the support banner other pages use ──────────────────────────────────── */

.beg {
  background: var(--deep); color: #fff; border-radius: 26px; padding: 30px 32px;
  margin-bottom: 18px; position: relative; overflow: hidden;
}
.beg::after {
  content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px;
  background: radial-gradient(circle, rgba(167, 155, 255, .38), transparent 65%);
}
.beg .label { color: rgba(255, 255, 255, .5); margin-bottom: 12px; }
.beg h2 {
  font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 3vw, 28px);
  line-height: 1.22; letter-spacing: -.03em; position: relative;
}
.beg p {
  margin-top: 12px; max-width: 560px; font-size: 15px; line-height: 1.7;
  color: rgba(255, 255, 255, .78); position: relative;
}
.beg a.go {
  display: inline-block; margin-top: 20px; padding: 14px 26px; border-radius: 999px;
  background: #fff; color: var(--deep); font-weight: 600; font-size: 14.5px;
  position: relative;
}
.beg a.go:hover { text-decoration: none; transform: translateY(-1px); }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--hair); padding: 26px; text-align: center;
}
.foot p { font-size: 13px; color: var(--faint); line-height: 1.8; }
.foot a { color: var(--soft); }
.foot .dot { opacity: .35; margin: 0 8px; }

@keyframes pgIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.wrap > * { animation: pgIn .55s cubic-bezier(.22, 1, .36, 1) both; }
.wrap > :nth-child(2) { animation-delay: .06s; }
.wrap > :nth-child(3) { animation-delay: .12s; }
.wrap > :nth-child(4) { animation-delay: .18s; }
.wrap > :nth-child(n+5) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .wrap > *, .done { animation: none; }
}

@media (max-width: 720px) {
  .top { padding: 13px 16px; }
  .mark span { display: none; }
  .nav a { padding: 8px 10px; font-size: 12.5px; }
  .wrap { padding: 30px 16px 64px; }
  .card, .clip { padding: 22px 20px; border-radius: 22px; }
  .beg { padding: 24px 22px; }
  .cols, .ways { grid-template-columns: 1fr; }
}

/* On a phone the three nav labels plus the wordmark do not fit on one line, so the text
   links go and the call to action stays. This used to be the other way round — "Check a
   claim" was the one dropped, on the reasoning that the wordmark already goes home. It
   does, but home is the landing page, not the checker, so on a phone the one thing every
   page is trying to get a reader to do was the one thing the header stopped offering.
   The landing page's header collapses to the same wordmark-plus-button, which is the
   other half of the point: the button does not move or change between pages. */
@media (max-width: 480px) {
  .nav a:not(.go) { display: none; }
  .nav a { padding: 8px 11px; }
  .hero p.sub { font-size: 16px; line-height: 1.6; }
}