/* Claimifi.biz — shared styles for the landing page (/) and the analyzer (/app) */

:root {
  color-scheme: light;

  /* The one typeface, for every element on both pages. Changing it is this line
     plus the Google Fonts <link> in index.html and app.html. To compare
     candidates on the real pages first, open /?font=inter (see app.js). */
  --font: 'Lato';

  /* A plain white page: nothing is drawn behind the content. Neutrals lean
     toward the logo's navy wordmark (#231F69) rather than grey, so text and
     hairlines share the mark's hue. */
  --bg:            #ffffff;
  --bg-raised:     #f7f6fc;  /* panel heads, the sample window bar */
  --bg-card:       #ffffff;
  --bg-inset:      #faf9fe;  /* inputs and claims, set into a white card */
  --border:        #e7e4f3;
  --border-strong: #d5d0ea;
  --text:          #17153a;
  --text-2:        #48456e;
  --text-3:        #646189;  /* the lightest text that clears 4.5:1 on every surface */

  /* Palette, from the logo: the mark's gradient runs #A461F6 -> #7887F2 and the
     check inside the C is #B4D5F8. On white those are fills, never body text -
     the periwinkle is 3.2:1 and the check is near invisible - so text accents
     are the same hues deepened to clear 4.5:1, tints included. */
  --brand-violet:  #a461f6;  /* gradient start: fills, rings */
  --brand-blue:    #7887f2;  /* gradient end */
  --brand-ice:     #b4d5f8;  /* the check: decoration only */
  --accent:        #7b3fe4;  /* violet as text, links, icons */
  --accent-blue:   #4a55d0;  /* periwinkle as text */
  --accent-soft:   rgba(164, 97, 246, .10);
  --accent-line:   rgba(123, 63, 228, .24);
  /* The logo gradient deepened just enough for white labels to reach 4.5:1. */
  --btn-from:      #9546f4;
  --btn-to:        #5366ee;
  --grad-soft:     linear-gradient(120deg, #f3ecff, #ecefff 50%, #e8f3fd);

  /* Verdicts keep their green/amber/red/grey meaning: the logo has no green, and
     Supported must never read as the brand accent. Each clears 4.5:1 as text on
     its own tint. */
  --ok:            #12743a;  /* Supported */
  --warn:          #a24a05;  /* Mixed */
  --bad:           #bf1238;  /* Unsupported */
  --neutral:       #5f5d7c;  /* Insufficient Evidence - deliberately colourless */
  --ok-soft:       rgba(18, 116, 58, .10);
  --warn-soft:     rgba(162, 74, 5, .10);
  --bad-soft:      rgba(191, 18, 56, .10);
  --neutral-soft:  rgba(95, 93, 124, .10);

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(23, 21, 58, .04), 0 6px 18px -10px rgba(23, 21, 58, .10);
  --shadow-lg: 0 1px 3px rgba(23, 21, 58, .05), 0 28px 60px -28px rgba(83, 60, 170, .32);
  --ring: 0 0 0 4px rgba(164, 97, 246, .18);
  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding keeps anchor targets clear of the sticky header (66px tall):
   on mobile the section headings landed with their top under it. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

/* Lato ships 400 and 700 only (plus 700 italic for the hero). Weights here stay
   on those two: a 500 or 600 would silently resolve to one of them anyway. */
body {
  font-family: var(--font), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(164, 97, 246, .22); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Components set their own display, which would otherwise beat the attribute. */
[hidden] { display: none !important; }

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

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--btn-from); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { left: 24px; }

/* ---------------- Header ---------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
/* The logo mark alone: the name beside it is live text, not part of the image. */
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0; display: block;
  filter: drop-shadow(0 4px 10px rgba(123, 63, 228, .25));
}
.brand-name { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.brand-name span { color: var(--accent); }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--text-2); font-size: .9rem; font-weight: 400; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-links + .nav-right { margin-left: 0; }

.btn-sm {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to)); color: #fff;
  font-size: .86rem; font-weight: 700; padding: 8px 16px;
  border-radius: var(--r-sm); white-space: nowrap; border: none; cursor: pointer;
  font-family: inherit; transition: transform .15s, box-shadow .15s;
}
.btn-sm:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(123, 63, 228, .55); }
.btn-sm svg { width: 14px; height: 14px; stroke: currentColor; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .75rem; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-3); white-space: nowrap; flex-shrink: 0;
}
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status[data-mode="live"] { color: var(--ok); border-color: rgba(18, 116, 58, .25); background: var(--ok-soft); }
.status[data-mode="live"] .dot { box-shadow: 0 0 0 3px rgba(18, 116, 58, .16); }
.status[data-mode="demo"] { color: var(--warn); border-color: rgba(162, 74, 5, .25); background: var(--warn-soft); }

/* ---------------- Type ---------------- */
h1 {
  font-weight: 700; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  margin-bottom: 22px;
}
h1 em { font-style: italic; color: var(--accent); }
/* The logo's gradient, starting from its deepened violet so the whole run stays
   above 3:1 on white at heading size. Where the browser cannot clip a background
   to text, the solid accent above stays rather than the text disappearing. The
   padding keeps the italic's overhang inside the painted box. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em {
    background: linear-gradient(100deg, var(--btn-from), var(--brand-blue));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    padding-right: .08em; margin-right: -.08em;
  }
}

h2.sec-title {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.8vw, 2.3rem); letter-spacing: -.015em;
  line-height: 1.2; margin-bottom: 12px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: .78rem; font-weight: 700;
  padding: 6px 15px; border-radius: 999px; margin-bottom: 26px;
}
.lede { color: var(--text-2); font-size: clamp(1.02rem, 2.2vw, 1.16rem); max-width: 620px; margin: 0 auto; }

section { padding: 76px 0; }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.sec-head p { color: var(--text-2); font-size: 1rem; }

/* ---------------- Hero ---------------- */
.hero { padding: 76px 0 40px; text-align: center; }
.hero-app { padding: 48px 0 24px; text-align: center; }
.hero-app h1 { font-size: clamp(2rem, 4.8vw, 2.6rem); margin-bottom: 14px; }

/* ---------------- Search ---------------- */
/* A hairline of the logo gradient round the box, painted as a border-box
   background under a white padding-box: a real border cannot take a gradient
   and keep the rounded corners. It comes up to full strength on focus. */
.search {
  border: 1px solid transparent; border-radius: var(--r-xl); padding: 12px;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(120deg, rgba(164, 97, 246, .45), rgba(120, 135, 242, .45) 55%, rgba(180, 213, 248, .9)) border-box;
  box-shadow: var(--shadow-lg); margin: 40px auto 0; max-width: 760px;
  transition: box-shadow .2s;
}
.search:focus-within {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(120deg, var(--brand-violet), var(--brand-blue) 55%, var(--brand-ice)) border-box;
  box-shadow: var(--shadow-lg), var(--ring);
}
.search-row { display: flex; gap: 10px; align-items: center; }
.field { position: relative; flex: 1; display: flex; align-items: center; }
.field > svg { position: absolute; left: 16px; width: 18px; height: 18px; stroke: var(--text-3); pointer-events: none; }

#videoInput {
  width: 100%; background: var(--bg-inset);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 15px 136px 15px 46px; font: inherit; font-size: 1rem;
  color: var(--text); transition: border-color .2s, background-color .2s;
}
#videoInput::placeholder { color: var(--text-3); }
#videoInput:focus { outline: none; border-color: var(--border-strong); background: var(--bg-card); }
#videoInput:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Transcript on/off, sitting inside the right end of the input. */
.tx-toggle {
  position: absolute; right: 8px; display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--text-3);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 10px 6px 7px; cursor: pointer; transition: color .15s, border-color .15s;
}
.tx-toggle:hover { border-color: var(--border-strong); }
.tx-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tx-track {
  position: relative; width: 26px; height: 15px; border-radius: 999px;
  background: var(--border-strong); transition: background-color .15s;
}
.tx-knob {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.tx-toggle[aria-checked="true"] { color: var(--text); }
.tx-toggle[aria-checked="true"] .tx-track { background: var(--accent); }
.tx-toggle[aria-checked="true"] .tx-knob { transform: translateX(11px); }

/* Programmatic skip-link targets, not controls: they take focus so the next Tab
   continues from the right place, and should not draw a ring round the page. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: .97rem; font-weight: 700; cursor: pointer;
  border: none; border-radius: var(--r-lg); padding: 15px 26px;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(123, 63, 228, .6); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; stroke: currentColor; }

.examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.examples-label { color: var(--text-3); font-size: .82rem; align-self: center; margin-right: 2px; }
.chip {
  display: inline-block; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); font: inherit; font-size: .82rem;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.chip:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
/* Disabled while analysis is paused: they would otherwise invite a click that
   can only fail. */
.chip:disabled { opacity: .55; cursor: not-allowed; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 34px; }
.trust div { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: .85rem; }
.trust svg { width: 15px; height: 15px; stroke: var(--accent); flex-shrink: 0; }

/* ---------------- Results ---------------- */
#results { margin-top: 54px; scroll-margin-top: 86px; }
#results:empty { display: none; margin-top: 0; }

.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--bg-raised);
}
.panel-head h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.panel-body { padding: 24px; }
.panel-body p { overflow-wrap: anywhere; }
/* Title-only results: says plainly that no transcript was read. */
.panel-body.notice { background: var(--accent-soft); }
.panel-body.notice p { color: var(--accent); font-size: .9rem; }
.panel-body + .panel-body { border-top: 1px solid var(--border); }

.label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 12px; }

.pill { font-size: .75rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.pill.busy  { background: var(--warn-soft); color: var(--warn); }
.pill.done  { background: var(--ok-soft); color: var(--ok); }
.pill.demo  { background: var(--accent-soft); color: var(--accent); }
.pill.error { background: var(--bad-soft); color: var(--bad); }

.ghost {
  margin-left: auto; background: var(--bg-card); border: 1px solid var(--border-strong);
  color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 700;
  padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .18s;
}
.ghost:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.ghost svg { width: 14px; height: 14px; stroke: currentColor; }

.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)); gap: 12px; }
.tally-item { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; border-left-width: 3px; }
.tally-item .n { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.tally-item .t { font-size: .76rem; color: var(--text-3); font-weight: 400; margin-top: 2px; }
.tally-item[data-v="supported"]    { border-left-color: var(--ok); }
.tally-item[data-v="supported"] .n    { color: var(--ok); }
.tally-item[data-v="mixed"]        { border-left-color: var(--warn); }
.tally-item[data-v="mixed"] .n        { color: var(--warn); }
.tally-item[data-v="unsupported"]  { border-left-color: var(--bad); }
.tally-item[data-v="unsupported"] .n  { color: var(--bad); }
.tally-item[data-v="insufficient"] { border-left-color: var(--neutral); }
.tally-item[data-v="insufficient"] .n { color: var(--neutral); }

.claim {
  background: var(--bg-inset); border: 1px solid var(--border);
  border-left: 3px solid var(--neutral); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 12px;
}
.claim:last-child { margin-bottom: 0; }
.claim[data-v="supported"]   { border-left-color: var(--ok); }
.claim[data-v="mixed"]       { border-left-color: var(--warn); }
.claim[data-v="unsupported"] { border-left-color: var(--bad); }

.claim-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.claim-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
  background: var(--bg-card); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--text-3);
}
.claim-text { font-size: 1rem; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }

.verdict { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; margin-bottom: 10px; }
.verdict::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.verdict[data-v="supported"]    { background: var(--ok-soft); color: var(--ok); }
.verdict[data-v="mixed"]        { background: var(--warn-soft); color: var(--warn); }
.verdict[data-v="unsupported"]  { background: var(--bad-soft); color: var(--bad); }
.verdict[data-v="insufficient"] { background: var(--neutral-soft); color: var(--neutral); }

.claim-why { color: var(--text-2); font-size: .93rem; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2); font-size: .75rem; padding: 4px 10px; border-radius: var(--r-sm); transition: all .18s; }
a.tag:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.loading { padding: 52px 24px; text-align: center; }
.spinner { width: 38px; height: 38px; margin: 0 auto 20px; border: 3px solid var(--border); border-top-color: var(--brand-violet); border-right-color: var(--brand-blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { display: inline-flex; flex-direction: column; gap: 9px; text-align: left; margin-top: 6px; }
.step { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: var(--text-3); transition: color .3s; }
.step .box { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border-strong); transition: all .3s; }
.step.on { color: var(--text); }
.step.on .box { border-color: var(--brand-violet); box-shadow: 0 0 0 3px var(--accent-soft); }
.step.ok .box { border-color: var(--ok); background: var(--ok); box-shadow: none; }
.step.ok { color: var(--text-2); }
.elapsed { margin-top: 18px; font-size: .8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.loading-note { margin: 10px auto 0; max-width: 420px; font-size: .86rem; color: var(--text-2); }

/* ---------------- Landing hero actions ---------------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; }
.hero-actions .btn { text-decoration: none; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .97rem; font-weight: 700;
  padding: 15px 26px; border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); color: var(--text);
  background: var(--bg-card); transition: border-color .18s, color .18s, background .18s;
}
.btn-ghost:hover { text-decoration: none; border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* ---------------- Landing: stats ---------------- */
/* Fixed column counts, not auto-fit: at in-between widths auto-fit left an empty
   cell, and the 1px gap trick paints an empty cell solid border colour. */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.stat { background: var(--bg-card); padding: 24px 20px; text-align: center; }
.stat .v {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; color: var(--accent); margin-bottom: 8px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat .v {
    background: linear-gradient(100deg, var(--btn-from), var(--btn-to));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.stat .k { font-size: .82rem; color: var(--text-3); }

/* ---------------- Landing: cards ---------------- */
/* min(..., 100%) wherever a grid sets a column minimum: on a 320px screen a
   fixed minimum is wider than the container and the cards overflow it. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
/* The analyzer's three short cards sit in the 780px column, where a 260px
   minimum only fits two and strands the third on a row of its own. */
.wrap-narrow .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.card h3, .card h2 { font-size: 1.03rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.card p { color: var(--text-2); font-size: .92rem; }
.card-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 16px;
}
.card-icon svg { width: 18px; height: 18px; stroke: var(--accent); }
.step-num {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-weight: 700; font-size: .88rem; margin-bottom: 16px;
}

/* ---------------- Landing: sample output ---------------- */
.sample { max-width: 780px; margin: 0 auto; }
.sample-frame {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg);
}
.sample-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-raised);
}
.sample-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-violet); display: block; }
.sample-bar i:nth-of-type(2) { background: var(--brand-blue); }
.sample-bar i:nth-of-type(3) { background: var(--brand-ice); }
.sample-bar span { margin-left: 8px; font-size: .8rem; color: var(--text-3); }

/* ---------------- Landing: comparison ---------------- */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.compare-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.compare-col h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.compare-col h3 svg { width: 17px; height: 17px; }
.compare-col.yes { border-color: rgba(18, 116, 58, .25); }
.compare-col.yes h3 { color: var(--ok); }
.compare-col.yes h3 svg { stroke: var(--ok); }
.compare-col.no h3 { color: var(--bad); }
.compare-col.no h3 svg { stroke: var(--bad); }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.compare-col li { color: var(--text-2); font-size: .93rem; padding-left: 20px; position: relative; }
.compare-col li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.compare-col.yes li::before { background: var(--ok); }
.compare-col.no li::before { background: var(--bad); }

/* ---------------- Landing: sources ---------------- */
.src-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.src-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.src-group h3 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-blue); margin-bottom: 13px; }
.src-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.src-group li { font-size: .78rem; color: var(--text-2); background: var(--bg-inset); border: 1px solid var(--border); padding: 4px 9px; border-radius: 6px; }

/* ---------------- Landing: FAQ ---------------- */
details.faq { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 11px; overflow: hidden; transition: border-color .18s; }
details.faq[open] { border-color: var(--accent-line); }
details.faq summary {
  padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: .98rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; flex-shrink: 0; line-height: 1; transition: transform .25s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary:hover { color: var(--accent); }
details.faq .a { padding: 0 22px 20px; color: var(--text-2); font-size: .93rem; }

/* ---------------- CTA + footer ---------------- */
/* The one block that carries the logo palette as a surface. It sits on the
   page like the cards do; the page behind it stays plain. */
.cta {
  background: var(--grad-soft);
  border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  padding: 52px 32px; text-align: center;
}
.cta h2 { font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.2rem); letter-spacing: -.015em; margin-bottom: 10px; }
.cta p { color: var(--text-2); margin-bottom: 26px; }

footer { border-top: 1px solid var(--border); padding: 48px 0 32px; margin-top: 60px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.foot-about p { color: var(--text-3); font-size: .86rem; margin-top: 14px; max-width: 340px; }
.foot-col h3 { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { color: var(--text-2); font-size: .88rem; }
.foot-col a:hover { color: var(--accent); }
.foot-base { border-top: 1px solid var(--border); padding-top: 24px; }
.foot-base p { color: var(--text-3); font-size: .82rem; }

/* ---------------- Font preview (only with ?font=) ---------------- */
.font-preview {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 6px 6px 6px 14px;
  box-shadow: var(--shadow-lg); font-size: .8rem;
}
.font-preview label { font-weight: 700; color: var(--text); white-space: nowrap; }
.font-preview select {
  font: inherit; color: var(--text); min-width: 0;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.font-preview button {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--text-2);
  background: transparent; border: 1px solid transparent;
}
.font-preview button:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

/* ---------------- Feature flags ---------------- */
/* The server fills data-accounts / data-billing on <html>. Links to the account
   and pricing pages stay out of sight until those features are switched on. */
html[data-billing="off"] .needs-billing,
html[data-accounts="off"] .needs-accounts { display: none !important; }
html:not([data-billing="off"]) .billing-off-only { display: none !important; }
html:not([data-accounts="off"]) .accounts-off-only { display: none !important; }

.nav-account { color: var(--text-2); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.nav-account:hover { color: var(--accent); text-decoration: none; }
.plan-badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  padding: 4px 10px; border-radius: 999px;
}
.plan-badge[hidden] { display: none; }

/* ---------------- Analyzer: input hint ---------------- */
.hint { margin: 10px 4px 0; text-align: left; font-size: .86rem; color: var(--bad); }
.hint:empty { display: none; }
#videoInput[aria-invalid="true"] { border-color: var(--bad); }

/* ---------------- Results: close ---------------- */
.panel-close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer; margin-left: auto;
  background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-2);
  font: inherit; transition: all .18s;
}
.panel-close:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.panel-close svg { width: 16px; height: 16px; stroke: currentColor; }
.ghost + .panel-close { margin-left: 0; }

/* ---------------- Results: Pro ---------------- */
.pill.pro { background: linear-gradient(135deg, var(--btn-from), var(--btn-to)); color: #fff; }

.claim-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.claim-meta .verdict { margin-bottom: 0; }
.cat {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-blue); background: var(--bg-card); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px;
}
.confidence { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text-3); }
.meter { width: 72px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; display: inline-block; }
.meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-violet), var(--brand-blue)); }
.confidence-n { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin-top: 14px; }
.versus-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.versus-col.scholarship { border-color: var(--accent-line); }
.versus-h { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 4px; }
.versus-col.scholarship .versus-h { color: var(--accent); }
.versus-col p { font-size: .9rem; color: var(--text-2); overflow-wrap: anywhere; }

.sub-h { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin: 14px 0 6px; }
.views, .dig, .findings { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.views li, .dig li, .findings li { font-size: .9rem; color: var(--text-2); padding-left: 16px; position: relative; overflow-wrap: anywhere; }
.views li::before, .dig li::before, .findings li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.dig li::before { background: var(--brand-blue); }
.findings.errors li::before { background: var(--bad); }
.findings.gaps li::before { background: var(--warn); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.metric { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.metric-v { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.metric.score .metric-v { color: var(--accent); }
.metric-k { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.metric-note { font-size: .75rem; color: var(--text-3); margin-top: 6px; }
.verdict-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); margin-top: 16px; }
.verdict-bar span { display: block; height: 100%; }
.verdict-bar [data-v="supported"] { background: var(--ok); }
.verdict-bar [data-v="mixed"] { background: var(--warn); }
.verdict-bar [data-v="unsupported"] { background: var(--bad); }
.verdict-bar [data-v="insufficient"] { background: var(--neutral); }
.cats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* ---------------- Results: free plan upsell ---------------- */
.upsell { background: var(--grad-soft); }
.upsell p { color: var(--text-2); font-size: .93rem; }
.locked { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px 18px; margin: 14px 0 18px; }
.locked li { font-size: .9rem; color: var(--text-2); padding-left: 22px; position: relative; }
.locked li::before { content: '\2726'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: .85rem; }
.btn-upsell { text-decoration: none; padding: 12px 22px; font-size: .92rem; }
.btn-upsell:hover { text-decoration: none; }
.muted { color: var(--text-3); font-size: .88rem; }

/* ---------------- Pricing ---------------- */
.page-head { text-align: center; padding: 56px 0 8px; }
.page-head h1 { font-size: clamp(2rem, 4.8vw, 2.7rem); margin-bottom: 14px; }
.interval {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px;
}
.interval button {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  border: 0; background: transparent; color: var(--text-2);
  padding: 8px 18px; border-radius: 999px; transition: all .18s;
}
.interval button[aria-pressed="true"] { background: var(--bg-card); color: var(--accent); box-shadow: var(--shadow-sm); }
.save { font-size: .75rem; color: var(--ok); margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; max-width: 820px; margin: 36px auto 0; }
.plan { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan.pro {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(120deg, var(--brand-violet), var(--brand-blue) 55%, var(--brand-ice)) border-box;
  box-shadow: var(--shadow-lg);
}
.plan h2 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.plan-desc { color: var(--text-2); font-size: .92rem; margin-top: 6px; }
.price { margin: 22px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.price-n { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.price-per { color: var(--text-3); font-size: .9rem; }
.price-note { color: var(--text-3); font-size: .82rem; min-height: 1.3em; }
.features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 22px 0 26px; flex: 1; }
.features li { font-size: .92rem; color: var(--text-2); padding-left: 24px; position: relative; }
.features li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.plan .btn, .plan .btn-ghost { width: 100%; text-decoration: none; }
.fine { text-align: center; color: var(--text-3); font-size: .84rem; margin-top: 22px; }

/* ---------------- Account forms ---------------- */
.auth-card {
  max-width: 440px; margin: 40px auto 0; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 30px 28px;
}
.auth-card h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.auth-card > p { color: var(--text-2); font-size: .92rem; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 22px; }
.tabs button { flex: 1; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; border: 0; background: transparent; color: var(--text-2); padding: 8px 12px; border-radius: 999px; }
.tabs button[aria-selected="true"] { background: var(--bg-card); color: var(--accent); box-shadow: var(--shadow-sm); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form[hidden] { display: none; }
.form-field label { display: block; font-size: .84rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.form-field input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px;
}
.form-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--bg-card); }
.form-help { font-size: .8rem; color: var(--text-3); margin-top: 4px; }
.form .btn { width: 100%; }
.link-btn { font: inherit; font-size: .86rem; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.link-btn:hover { text-decoration: underline; }
.msg { border-radius: var(--r); padding: 12px 14px; font-size: .9rem; margin-bottom: 16px; overflow-wrap: anywhere; }
.msg:empty { display: none; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.err { background: var(--bad-soft); color: var(--bad); }
.msg.info { background: var(--accent-soft); color: var(--accent); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 18px 0 22px; font-size: .92rem; }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.btn-col { display: flex; flex-direction: column; gap: 10px; }
.btn-col .btn, .btn-col .btn-ghost { width: 100%; text-decoration: none; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* ---------------- Account: signed in ---------------- */
.auth-card.wide { max-width: 560px; }
/* The site-wide `section` padding is for landing-page blocks, not card parts. */
.acct-section { padding: 0; }
.acct-section h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.btn-ghost.danger { color: var(--bad); border-color: rgba(191, 18, 56, .3); }
/* Continue with Google: Google's own mark on a plain button, as its branding asks. */
.btn-google { gap: 10px; width: 100%; text-decoration: none; }
.btn-google .g-mark { width: 20px; height: 20px; flex: none; }
.oauth-block { margin-bottom: 18px; }
.oauth-block.is-off { display: none; }
/* The server says whether Google is on before the page is sent (data-google on /login). */
html:not([data-google="on"]) .needs-google { display: none !important; }
#callbackConfirm .btn-col { margin-top: 18px; }
/* An email address is one long word: let it break rather than overflow. */
#callbackTitle, #callbackConfirm p, #callbackContinue { overflow-wrap: anywhere; }
#callbackContinue { white-space: normal; text-align: center; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; color: var(--text-3); font-size: .84rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.google-reauth { display: flex; flex-direction: column; gap: 12px; }
.google-reauth[hidden] { display: none; }
.btn-ghost.danger:hover { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.confirm-box { margin-top: 16px; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-inset); }
.confirm-box p { color: var(--text-2); font-size: .92rem; margin-bottom: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn-ghost { flex: 1 1 160px; padding: 12px 18px; font-size: .92rem; }
.danger-zone h2 { color: var(--bad); }
.confirm-box .msg { margin-bottom: 0; }
.reset-by-email { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.reset-by-email .btn-ghost { margin-top: 10px; padding: 12px 18px; font-size: .92rem; }

/* ---------------- Account: dialog ---------------- */
/* A native <dialog> opened with showModal(): it traps focus, closes on Escape
   and puts the page behind it out of reach. */
.modal {
  width: min(440px, calc(100% - 32px)); margin: auto; padding: 0;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(23, 21, 58, .45); }
.modal-body { padding: 30px 26px 24px; text-align: center; }
.modal-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.modal-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.modal p { color: var(--text-2); font-size: .94rem; line-height: 1.55; margin-bottom: 22px; }
.modal .btn-row { flex-direction: column; }
.modal .btn-row .btn-ghost { flex: none; width: 100%; }

/* ---------------- Account welcomes and page illustrations ---------------- */
.page-illustration, .auth-illustration {
  width: min(190px, 72vw); margin: 0 auto 16px;
}
.page-illustration-large { width: min(220px, 76vw); margin-bottom: 20px; }
.page-illustration svg, .auth-illustration svg, .welcome-art svg { display: block; width: 100%; height: auto; }
.auth-illustration { width: min(180px, 70vw); margin-bottom: 22px; }
.auth-illustration-deleted { opacity: .9; }

.welcome-card {
  position: relative; display: grid; grid-template-columns: minmax(128px, 180px) minmax(0, 1fr);
  gap: 22px; align-items: center; padding: 24px; margin-bottom: 30px;
  background: var(--grad-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden;
}
.welcome-card-new { grid-template-columns: minmax(108px, 148px) minmax(0, 1fr); }
.welcome-copy { min-width: 0; }
.welcome-copy h2 { color: var(--text); font-size: 1.36rem; line-height: 1.2; margin: 0 34px 8px 0; }
.welcome-copy > p { color: var(--text-2); font-size: .94rem; line-height: 1.55; }
.welcome-art { position: relative; width: 100%; max-width: 180px; margin: 0 auto; }
.welcome-card-new .welcome-art { max-width: 148px; }
.welcome-dismiss {
  position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px;
  display: grid; place-items: center; color: var(--text-2); background: rgba(255, 255, 255, .76);
  border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer;
}
.welcome-dismiss:hover { color: var(--accent); border-color: var(--accent-line); background: var(--bg-card); }
.welcome-dismiss svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
.welcome-actions .btn { padding: 12px 20px; min-height: 44px; text-decoration: none; }
.welcome-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-size: .9rem; font-weight: 700; }
.welcome-features { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--accent-line); }
.welcome-features > p { color: var(--text); font-size: .82rem; font-weight: 700; margin-bottom: 7px; }
.welcome-features ul { display: grid; gap: 5px; padding-left: 18px; }
.welcome-features li { color: var(--text-2); font-size: .86rem; }

.celebration-piece {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; opacity: 0;
  border-radius: 2px; background: var(--brand-violet); pointer-events: none;
  animation: welcome-burst 560ms ease-out both;
}
.piece-1 { --burst-x: -78px; --burst-y: -55px; animation-delay: 80ms; }
.piece-2 { --burst-x: -95px; --burst-y: 8px; animation-delay: 210ms; background: var(--brand-blue); border-radius: 50%; }
.piece-3 { --burst-x: -56px; --burst-y: 62px; animation-delay: 340ms; background: var(--brand-ice); }
.piece-4 { --burst-x: 75px; --burst-y: -58px; animation-delay: 120ms; background: var(--brand-ice); border-radius: 50%; }
.piece-5 { --burst-x: 96px; --burst-y: -4px; animation-delay: 260ms; background: var(--brand-violet); }
.piece-6 { --burst-x: 62px; --burst-y: 65px; animation-delay: 390ms; background: var(--brand-blue); }
.piece-7 { --burst-x: -18px; --burst-y: -78px; animation-delay: 500ms; background: var(--brand-blue); border-radius: 50%; }
.piece-8 { --burst-x: 18px; --burst-y: 78px; animation-delay: 590ms; background: var(--brand-violet); }
@keyframes welcome-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1) rotate(130deg); }
}

/* ---------------- Text pages (privacy, 404) ---------------- */
.prose { max-width: 720px; margin: 0 auto; padding: 8px 0 24px; }
.prose h2 { font-size: 1.15rem; font-weight: 700; margin: 30px 0 8px; }
.prose p, .prose li { color: var(--text-2); font-size: .97rem; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.prose p + p { margin-top: 10px; }
.updated { color: var(--text-3); font-size: .85rem; }
.center-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.center-actions .btn, .center-actions .btn-ghost { text-decoration: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 780px) {
  .nav-links { display: none; }
  /* /app's only route back to the site is the brand link, so keep it visible. */
  .nav .brand { margin-right: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 52px 0 32px; }
  /* stretch, not the row's center: stacked, a centred field shrank to the
     input's intrinsic width and sat narrower than the button beneath it. */
  .search-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .panel-body, .panel-head { padding: 18px; }
  section { padding: 56px 0; }
  .ghost { margin-left: 0; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn, .btn-ghost { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta { padding: 36px 22px; }
  /* The brand, the status badge and the header CTA cannot share a 375px row.
     The analyzer sits in the hero on mobile and there is a CTA at the foot of
     the page, so the header button is the redundant one. */
  .nav-right .btn-sm { display: none; }
  /* The account link stays: on a phone it is the only way to the plan, billing
     and Sign out. With accounts on, the status badge gives up its words for the
     room, keeping its colour, and its text for screen readers. */
  html[data-accounts="on"] .status { padding: 9px; }
  html[data-accounts="on"] .status #statusText {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav-account { padding: 10px 0; }
  .auth-card, .plan { padding: 24px 20px; }
  .welcome-card, .welcome-card-new { grid-template-columns: 1fr; gap: 8px; padding: 20px; text-align: center; }
  .welcome-art { width: min(154px, 54vw); }
  .welcome-card-new .welcome-art { width: min(132px, 48vw); }
  .welcome-copy h2 { margin-right: 24px; margin-left: 24px; }
  .welcome-actions { justify-content: center; }
  .welcome-actions .btn { width: 100%; }
  .welcome-features { text-align: left; }
}
@media (max-width: 380px) {
  /* On the narrowest phones the Pro badge makes way for the account link,
     which leads to the plan anyway. */
  .nav-right .plan-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .celebration-piece { display: none; }
}