/* ============================================================
   QuexAI — document-native editorial
   Design system for the public site.

   Deliberately NOT loaded by the dashboard: /css/site.css still
   owns every authenticated page. Only public pages link this.
   ============================================================ */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-var-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ----------------------------------------
   One committed world: paper and ink. Neutrals are warmed
   toward the accent so nothing reads as default grey.
   ---------------------------------------------------------- */
:root {
  --paper:      #fbfaf7;
  --panel:      #ffffff;
  --ink:        #191713;
  --soft:       #57534a;
  --faint:      #8c867a;
  --rule:       #ddd8cc;
  --rule-firm:  #c9c2b2;
  --accent:     #8f3a24;
  --accent-ink: #6f2c1b;
  --mark:       #f0e9dc;
  --tint:       #f5f1e8;

  --measure: 65ch;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1140px;

  --step--1: 0.86rem;
  --step-0:  1.0625rem;
  --step-1:  1.32rem;
  --step-2:  1.72rem;
  --step-3:  2.3rem;
  --step-4:  clamp(2.4rem, 5.2vw, 3.5rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

/* The hidden attribute must beat any class that sets display. Component rules such as
   .q-field { display: flex } are more specific than the browser's [hidden] { display: none },
   so without this an element with hidden set stays on screen - which is how the pay-as-you-go
   charge agreement showed on the monthly plan. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-firm) var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", "Charter", Cambria, Georgia, serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--mark); color: var(--ink); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.021em; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; }

.q-shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }
.q-measure { max-width: var(--measure); }

/* skip link — keyboard users land here first */
.q-skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; text-decoration: none;
}
.q-skip:focus { left: .75rem; top: .75rem; }

/* ---------- identity -------------------------------------- */
.q-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.q-logo__mark { flex-shrink: 0; color: var(--accent); display: block; }
.q-logo__word {
  font-size: 1.24rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
}
.q-logo__word span { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }

/* ---------- header ---------------------------------------- */
.q-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.q-header__in {
  max-width: var(--shell); margin: 0 auto; padding: 1.05rem var(--gut);
  display: flex; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.q-nav { display: flex; gap: 1.55rem; }
.q-nav a {
  font-size: var(--step--1); color: var(--soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease);
}
.q-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.q-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.q-header__actions { display: flex; align-items: center; gap: 1.1rem; }
.q-header__actions .q-link { font-size: var(--step--1); }

@media (max-width: 860px) {
  .q-header__in { flex-wrap: wrap; gap: .85rem; }
  .q-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: .2rem; }
}

/* ---------- controls -------------------------------------- */
.q-btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  text-decoration: none; font-size: var(--step--1); font-weight: 600;
  padding: .72rem 1.35rem; border: 1px solid var(--ink); cursor: pointer;
  font-family: inherit; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.q-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.q-btn:disabled { background: var(--rule-firm); border-color: var(--rule-firm); color: var(--paper); cursor: not-allowed; }
/* Every direct route to sign-up carries the same small trial stamp. The angle
   keeps it lively without sacrificing legibility at compact sizes. */
a[href$="/signup/"], a[href="signup/"] { position: relative; display: inline-block; margin-top: .85rem; }
a[href$="/signup/"]::before, a[href="signup/"]::before { content: "Free trial"; position: absolute; left: 50%; top: -1.05rem; transform: translateX(-50%) rotate(8deg); white-space: nowrap; pointer-events: none; background: var(--mark); color: var(--accent); font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: .28rem .45rem; text-transform: uppercase; }
.q-footer a[href$="/signup/"], .q-footer a[href="signup/"] { margin-top: 0; }
.q-footer a[href$="/signup/"]::before, .q-footer a[href="signup/"]::before { content: none; }
@media (max-width: 480px) { .q-header__actions a[href$="/signup/"], .q-header__actions a[href="signup/"] { margin-bottom: 1rem; } .q-header__actions a[href$="/signup/"]::before, .q-header__actions a[href="signup/"]::before { top: auto; bottom: -1.05rem; } }

.q-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.q-btn--ghost:hover { background: var(--tint); border-color: var(--ink); color: var(--ink); }

.q-link {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color .18s var(--ease);
}
.q-link:hover { color: var(--accent-ink); }

/* ---------- sections -------------------------------------- */
.q-section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.q-section--flush { border-top: 0; }
/* follows a block that already carries its own hairlines (the signposts sit
   under four of their own), so the section rule and its clearance are noise */
.q-section--tight {
  border-top: 0;
  padding-top: clamp(.5rem, .8vw, .7rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* homepage only: the closing band follows this section with nothing between,
   so its own bottom padding stacked with the band's top padding into a much
   bigger gap than anywhere else on the page */
.q-section--tight-band { padding-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.q-section__head { margin-bottom: 2.25rem; }
.q-section__head h2 { font-size: var(--step-3); line-height: 1.14; margin-bottom: .6rem; }
.q-section__head p { color: var(--soft); max-width: 58ch; }

/* ---------- hero ------------------------------------------ */
.q-hero { padding-block: clamp(1.5rem, 3vw, 2.4rem) clamp(2.5rem, 5vw, 4rem); }
/* a hero ending in the lead block hands straight on to the signposts */
.q-hero--lead { padding-bottom: clamp(.5rem, .8vw, .7rem); }
.q-hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .q-hero__grid { grid-template-columns: 1.02fr .98fr; } }

.q-hero h1 {
  font-size: var(--step-4); line-height: 1.06; font-weight: 400;
  letter-spacing: -0.028em; margin-bottom: 1.05rem;
}
.q-hero h1 em { font-style: italic; color: var(--accent); }
/* no margin below: the hero's call to action moved into the closing band, so
   this paragraph is the last thing in the column and a margin here is dead
   height that the grid row inherits. */
.q-hero__sub { color: var(--soft); font-size: var(--step-1); line-height: 1.5; max-width: 38ch; margin-bottom: 0; }
.q-hero__cta { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }

/* The problem, stated before the call to action rather than after it.
   Full shell width beneath the hero grid, statement and explanation side
   by side: the wider measure costs fewer lines than the same words stacked
   in the hero's left column beside the stage. */
.q-hero__lead {
  border-top: 1px solid var(--rule);
  margin-top: clamp(.5rem, .9vw, .7rem); padding-top: .85rem;
  display: grid; gap: .5rem 3rem;
}
@media (min-width: 820px) { .q-hero__lead { grid-template-columns: 1fr 1fr; align-items: center; } }
.q-hero__lead h2 { font-size: var(--step-1); line-height: 1.24; max-width: 26ch; }
.q-hero__lead p { font-size: var(--step--1); color: var(--soft); line-height: 1.6; max-width: 62ch; }

/* the one call to action on the homepage, after the four signposts */

/* ---------- the animated document stage ------------------- */
/* One 16s loop, drawn not written. Four beats, 4s each, matching the
   four steps named in "How a document gets completed":
     0-4s   loose approved pages gather into the library
     4-8s   a blank questionnaire arrives
     8-12s  each answer is drawn out of the library into it
     12-16s it is signed off and delivered
   Base (unanimated) styles are the FINAL frame, so prefers-reduced-motion
   only has to switch the animations off. */
.q-stage {
  border: 1px solid var(--rule); background: var(--panel);
  padding: 1.5rem 1.6rem .8rem;
  /* the text column is the taller of the two, so a start-aligned stage leaves
     its leftover row height as a gap above the lead rule; bottom-align instead
     and the slack moves up beside the headline, where nothing is measured from it */
  align-self: end;
}
.q-stage__frame { position: relative; }
/* The viewBox is cropped to the drawing (y 80-296 of the old 0-300 box), so the
   panel is 28% shorter with every element at its original size and position.
   Clipped, not visible: the gather starts up to 152 units outside the box, which
   spilled harmlessly over 84 units of headroom before and would now paint over
   the hero. Pages and the arriving form slide in from behind the panel edge. */
.q-anim { display: block; width: 100%; height: auto; overflow: hidden; }

.q-a-sheet  { fill: var(--panel); stroke: var(--rule-firm); stroke-width: 1.4; }
.q-a-rule   { fill: var(--rule); }
.q-a-bar    { fill: var(--ink); }
.q-a-slot   { fill: var(--tint); }
.q-a-title  { font-size: 15px; font-weight: 700; fill: var(--ink); letter-spacing: .02em; }
.q-a-qref   { font-size: 11px; font-weight: 700; fill: var(--faint); }

/* 1 - the pages gather */
.q-pg {
  transform-box: fill-box; transform-origin: center;
  animation: q-gather 16s var(--ease) infinite backwards;
}
.q-pg--1 { --sx: -62px; --sy: -104px; --sr: -29deg; animation-delay: 0s; }
.q-pg--2 { --sx:  74px; --sy: -128px; --sr:  24deg; animation-delay: .14s; }
.q-pg--3 { --sx: -96px; --sy:   34px; --sr:  15deg; animation-delay: .28s; }
.q-pg--4 { --sx: 112px; --sy:  -46px; --sr: -19deg; animation-delay: .42s; }
.q-pg--5 { --sx:  16px; --sy: -152px; --sr:  33deg; animation-delay: .56s; }
@keyframes q-gather {
  0%       { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
  4%       { opacity: 1; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
  20%, 93% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: none; }
}

/* 2 and 4 - the questionnaire arrives, then leaves in someone's hands */
.q-anim__form {
  transform-box: fill-box; transform-origin: center;
  animation: q-deliver 16s var(--ease) infinite backwards;
}
@keyframes q-deliver {
  0%, 20%   { opacity: 0; transform: translate(150px, 0); }
  29%, 80%  { opacity: 1; transform: none; }
  91%       { opacity: 1; transform: translate(157px, -41px) scale(.38); }
  96%, 100% { opacity: 0; transform: translate(157px, -41px) scale(.38); }
}

/* 3 - approved wording is pulled out of the library. This line IS the
   citation: it is the only thing the old stage said in words. */
.q-a-thread {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 340; stroke-dashoffset: 0; opacity: .45;
  animation: q-thread 16s var(--ease) infinite backwards;
}
.q-a-thread--2 { animation-delay: .8s; }
.q-a-thread--3 { animation-delay: 1.6s; }
.q-a-thread--4 { animation-delay: 2.4s; }
@keyframes q-thread {
  0%, 47%   { stroke-dashoffset: 340; opacity: 0; }
  48%       { stroke-dashoffset: 340; opacity: 1; }
  55%       { stroke-dashoffset: 0;   opacity: 1; }
  66%       { stroke-dashoffset: 0;   opacity: .45; }
  74%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* The answer being written in. Filled in --soft, not --mark: against the
   --tint empty slot the highlight tone is almost invisible, and the growth
   left-to-right is the whole point of the beat. */
.q-a-fill {
  fill: var(--soft);
  transform-box: fill-box; transform-origin: left center;
  animation: q-ink 16s var(--ease) infinite backwards;
}
.q-a-fill--2 { animation-delay: .8s; }
.q-a-fill--3 { animation-delay: 1.6s; }
.q-a-fill--4 { animation-delay: 2.4s; }
@keyframes q-ink {
  0%, 50%   { transform: scaleX(0); }
  57%, 100% { transform: scaleX(1); }
}

/* 4 - reviewed, then received */
.q-anim__check {
  fill: none; stroke: var(--accent); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation: q-check 16s var(--ease) infinite backwards;
}
@keyframes q-check {
  0%, 76%   { opacity: 0; transform: scale(.3); }
  81%, 100% { opacity: 1; transform: none; }
}
.q-anim__person {
  fill: none; stroke: var(--rule-firm); stroke-width: 3; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  animation: q-person 16s var(--ease) infinite backwards;
}
@keyframes q-person {
  0%, 72%   { opacity: 0; transform: translateY(9px); stroke: var(--rule-firm); }
  78%       { opacity: 1; transform: none;            stroke: var(--rule-firm); }
  90%       { opacity: 1; transform: none;            stroke: var(--accent); }
  97%, 100% { opacity: 1; transform: none;            stroke: var(--rule-firm); }
}

.q-stage__label {
  display: flex; align-items: center; justify-content: flex-end;
  border-top: 1px solid var(--rule); margin-top: .65rem; padding-top: .5rem;
}
.q-stage__ticks { display: flex; gap: .3rem; }
.q-stage__ticks i {
  width: 20px; height: 2px; background: var(--rule-firm); display: block;
  animation: q-tick 16s linear infinite;
}
.q-stage__ticks i:nth-child(1) { animation-delay: 0s; }
.q-stage__ticks i:nth-child(2) { animation-delay: 4s; }
.q-stage__ticks i:nth-child(3) { animation-delay: 8s; }
.q-stage__ticks i:nth-child(4) { animation-delay: 12s; }
@keyframes q-tick {
  0%, 24%  { background: var(--accent); }
  25%,100% { background: var(--rule-firm); }
}

@media (prefers-reduced-motion: reduce) {
  .q-pg, .q-anim__form, .q-a-thread, .q-a-fill,
  .q-anim__check, .q-anim__person, .q-stage__ticks i { animation: none; }
  .q-stage__ticks i { background: var(--accent); }
}

/* ---------- steps ----------------------------------------- */
.q-steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 800px) { .q-steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.q-step { counter-increment: step; border-top: 2px solid var(--accent); padding-top: .9rem; }
.q-step::before {
  content: counter(step); display: block; font-size: .78rem; font-weight: 700;
  color: var(--accent); margin-bottom: .45rem; font-variant-numeric: tabular-nums;
}
.q-step h3 { font-size: var(--step-0); margin-bottom: .3rem; }
.q-step p { font-size: var(--step--1); color: var(--soft); line-height: 1.5; }

/* ---------- audiences ------------------------------------- */
.q-aud { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .q-aud { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.q-aud__col { border-top: 1px solid var(--rule-firm); padding-top: 1.2rem; }
.q-aud__col h3 { font-size: var(--step-1); margin-bottom: .55rem; }
.q-aud__col > p { color: var(--soft); font-size: var(--step--1); margin-bottom: 1rem; }
.q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.q-list li { display: flex; gap: .6rem; font-size: var(--step--1); }
.q-list svg { color: var(--accent); flex-shrink: 0; margin-top: .32rem; }

/* ---------- comparison ------------------------------------ */
.q-compare-wrap { overflow-x: auto; }
.q-compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--step--1); }
.q-compare caption { text-align: left; color: var(--faint); font-size: .8rem; padding-bottom: .75rem; }
.q-compare th, .q-compare td { text-align: left; padding: .78rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.q-compare thead th { border-bottom: 1px solid var(--rule-firm); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.q-compare tbody th { font-weight: 400; color: var(--soft); width: 34%; }
.q-compare td { color: var(--ink); }
.q-compare tbody tr:last-child th, .q-compare tbody tr:last-child td { border-bottom: 0; }
.q-compare__note { color: var(--faint); font-size: .8rem; margin-top: .75rem; }

/* ---------- assurance ------------------------------------- */
.q-assure { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .q-assure { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.q-assure__item { border-top: 1px solid var(--rule-firm); padding-top: 1.05rem; }
.q-assure__item svg { color: var(--accent); margin-bottom: .7rem; display: block; }
.q-assure__item h3 { font-size: var(--step-0); margin-bottom: .3rem; }
.q-assure__item p { font-size: var(--step--1); color: var(--soft); line-height: 1.5; }

/* ---------- closing band ---------------------------------- */
.q-band { background: var(--ink); color: var(--paper); padding-block: clamp(1.75rem, 3.2vw, 2.5rem); }
/* statement left, answer and action right, across the whole shell */
.q-band__in { display: grid; gap: 1.35rem 3rem; }
@media (min-width: 820px) { .q-band__in { grid-template-columns: 1fr 1fr; align-items: start; } }
.q-band h2 { font-size: var(--step-3); font-weight: 400; line-height: 1.15; max-width: 20ch; }
.q-band p { color: #c8c2b6; max-width: 54ch; }
/* The homepage closes here, so its call to action sits in the band and the
   palette inverts: paper button on ink. Other pages carry no band buttons. */
.q-band__cta { margin-top: clamp(1.15rem, 1.8vw, 1.5rem); }
.q-band .q-btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.q-band .q-btn:hover { background: var(--mark); border-color: var(--mark); color: var(--ink); }
.q-band .q-link { color: #c8c2b6; }
.q-band .q-link:hover { color: var(--paper); }

/* centred variant: headline, lead and CTA stacked and centred, not split
   left/right into a column the reader can skim past */
/* matches the tightened q-section--tight-band above it, so top and bottom
   clearance either side of the band are equal */
.q-band--centered { padding-block: clamp(1rem, 1.8vw, 1.5rem); }
.q-band--centered .q-band__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.q-band--centered h2,
.q-band--centered p { max-width: none; width: 100%; }
@media (min-width: 900px) {
  .q-band--centered h2,
  .q-band--centered p { white-space: nowrap; }
}
.q-band--centered .q-hero__cta { justify-content: center; }
.q-btn--lg { font-size: var(--step-0); padding: .95rem 2.1rem; }

/* ---------- footer ---------------------------------------- */
.q-footer { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; font-size: var(--step--1); }
.q-footer__in { display: grid; gap: 1.75rem; }
@media (min-width: 780px) { .q-footer__in { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.q-footer h3 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; font-weight: 700; }
.q-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.q-footer a { color: var(--soft); text-decoration: none; border-bottom: 1px solid transparent; }
.q-footer a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.q-footer__blurb { color: var(--soft); max-width: 34ch; margin-top: .9rem; }
.q-footer__legal { margin-top: 2.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: var(--faint); font-size: .8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- forms ----------------------------------------- */
.q-form { display: flex; flex-direction: column; gap: 1.1rem; }
.q-field { display: flex; flex-direction: column; gap: .4rem; }
.q-field label { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.q-field input, .q-field textarea, .q-field select {
  font-family: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule-firm); padding: .62rem .75rem;
  border-radius: 0; width: 100%; transition: border-color .18s var(--ease);
}
.q-field input:hover, .q-field textarea:hover, .q-field select:hover { border-color: var(--faint); }
.q-field input:focus, .q-field textarea:focus, .q-field select:focus { border-color: var(--accent); }
.q-field textarea { min-height: 8.5rem; resize: vertical; }
.q-field input::placeholder, .q-field textarea::placeholder { color: var(--faint); }
.q-field__hint { font-size: .8rem; color: var(--faint); }
@media (min-width: 620px) { .q-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

/* route selector — two big honest choices, not a dropdown */
.q-route { display: grid; gap: .75rem; }
@media (min-width: 620px) { .q-route { grid-template-columns: 1fr 1fr; } }
.q-route__opt { position: relative; }
.q-route__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-route__opt span {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--rule-firm); padding: .85rem .95rem; cursor: pointer;
  font-size: var(--step--1); line-height: 1.45; color: var(--soft);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.q-route__opt span::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--rule-firm); flex-shrink: 0; margin-top: .28rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.q-route__opt span:hover { border-color: var(--faint); background: var(--tint); }
.q-route__opt input:checked + span { border-color: var(--accent); color: var(--ink); background: var(--panel); }
.q-route__opt input:checked + span::before { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.q-route__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.q-status { padding: .8rem 1rem; border: 1px solid var(--rule-firm); font-size: var(--step--1); }
.q-status--error { border-color: var(--accent); color: var(--accent-ink); background: #fdf6f3; }
.q-status--ok { border-color: #4a6b52; color: #33513a; background: #f2f7f2; }

/* ---------- narrow auth pages ----------------------------- */
.q-auth { max-width: 27rem; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.q-auth h1 { font-size: var(--step-3); font-weight: 400; line-height: 1.12; margin-bottom: .6rem; }
.q-auth__sub { color: var(--soft); margin-bottom: 2rem; }
.q-auth__alt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--soft); }

/* Sign up: the pitch sits beside the form, and the fields pair up.
   Seven stacked fields in a 27rem column made a very tall, very narrow page. */
.q-auth--split { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.q-auth--split h1 {
  font-size: var(--step-3); font-weight: 400; line-height: 1.1;
  letter-spacing: -.022em; margin-bottom: .8rem; max-width: 16ch;
}
.q-auth--split .q-auth__sub { font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.q-auth__aside { border-top: 1px solid var(--rule-firm); padding-top: 1.15rem; margin-top: 1.5rem; }
.q-auth__aside h2 { font-size: var(--step-0); margin-bottom: .35rem; }
.q-auth__aside p { font-size: var(--step--1); color: var(--soft); line-height: 1.55; }
/* password and confirm sit side by side; the strength meter makes the left
   column taller, so the pair aligns at the top rather than stretching */
@media (min-width: 620px) { .q-form__row--top { align-items: start; } }

/* ---------- password field --------------------------------
   Markup and behaviour come from the existing
   /signup/signup-org-name.js, which is reused untouched.
   These styles replace what /css/site.css used to provide.
   ---------------------------------------------------------- */
.password-input { position: relative; display: flex; }
.password-input input { padding-right: 2.9rem; }
.password-toggle {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2.7rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--faint);
  transition: color .18s var(--ease);
}
.password-toggle:hover { color: var(--ink); }
.password-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.password-toggle[aria-pressed="true"] { color: var(--accent); }

.password-strength { margin-top: .5rem; }
.password-strength-bar { height: 3px; background: var(--rule); overflow: hidden; }
.password-strength-bar span { display: block; height: 100%; width: 0; background: var(--faint); transition: width .25s var(--ease), background .25s var(--ease); }
.password-strength-text { font-size: .8rem; color: var(--soft); margin-top: .35rem; }
.password-strength[data-strength="weak"]   .password-strength-bar span { width: 25%;  background: #a8392a; }
.password-strength[data-strength="fair"]   .password-strength-bar span { width: 50%;  background: #a8752a; }
.password-strength[data-strength="good"]   .password-strength-bar span { width: 75%;  background: #5d7a45; }
.password-strength[data-strength="strong"] .password-strength-bar span { width: 100%; background: #3f6b45; }

/* fade-in used by /js/messages.js */
.message-appearing { animation: q-msg .28s var(--ease) both; }
@keyframes q-msg { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .message-appearing { animation: none; } }

/* ---------- prose ----------------------------------------- */
.q-prose p + p { margin-top: 1rem; }
.q-prose { max-width: var(--measure); color: var(--soft); }

/* ---------- child page head ------------------------------- */
/* the top clearance matches .q-hero exactly: every page drops the same
   distance from the header rule to its first heading */
.q-page-head { padding-block: clamp(1.5rem, 3vw, 2.4rem) clamp(1.75rem, 3vw, 2.5rem); }
/* A page head runs the full shell: only the homepage hero shares its row with
   the image, so nothing here has to leave a column free. 24ch is the widest
   measure that changes no existing head — 25ch pulls the pricing head onto
   one line. */
.q-page-head h1 {
  font-size: var(--step-4); line-height: 1.06; font-weight: 400;
  letter-spacing: -0.028em; margin-bottom: 1.05rem; max-width: 24ch;
}
.q-page-head h1 em { font-style: italic; color: var(--accent); }
.q-page-head__sub { color: var(--soft); font-size: var(--step-1); line-height: 1.5; max-width: 54ch; }
.q-page-head--with-lead { padding-bottom: 0; }
.q-section--assure-lead { padding-top: 0; }
/* the grid shares the lead's section so no section rule is drawn between the
   two; its own items carry the hairlines. .q-aud is the two-column variant. */
.q-section--assure-lead .q-assure,
.q-section--assure-lead .q-aud,
.q-section--assure-lead .q-steps { margin-top: calc(2 * clamp(.5rem, .8vw, .7rem)); }
.q-section--after-assure { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- homepage signposts ---------------------------- */
.q-sign { display: grid; gap: 1.5rem; }
@media (min-width: 620px) { .q-sign { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.25rem; } }
@media (min-width: 1000px) { .q-sign { grid-template-columns: repeat(4, 1fr); } }
.q-sign__item {
  border-top: 1px solid var(--rule-firm); padding-top: 1.05rem;
  text-decoration: none; color: inherit; display: block;
  transition: border-color .18s var(--ease);
}
/* the arrow rides the title, not the paragraph: four paragraphs of
   different lengths left four arrows at four different heights */
.q-sign__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .3rem;
}
.q-sign__item h3 { font-size: var(--step-0); }
.q-sign__item p { font-size: var(--step--1); color: var(--soft); line-height: 1.5; }
.q-sign__item em { font-style: italic; }
.q-sign__go {
  display: inline-block; color: var(--accent); font-size: var(--step-0);
  flex-shrink: 0; transition: transform .18s var(--ease);
}
.q-sign__item:hover { border-top-color: var(--accent); }
.q-sign__item:hover .q-sign__go { transform: translateX(5px); }
.q-sign__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .q-sign__item:hover .q-sign__go { transform: none; } }

/* ---------- fact rows ------------------------------------- */
.q-facts { margin: 0; }
.q-facts__row { border-top: 1px solid var(--rule); padding-block: 1.15rem; display: grid; gap: .35rem; }
.q-facts__row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) {
  .q-facts__row { grid-template-columns: 15rem 1fr; gap: 2rem; }
}
.q-facts dt { color: var(--ink); font-weight: 600; font-size: var(--step-0); }
.q-facts dd { margin: 0; color: var(--soft); font-size: var(--step--1); line-height: 1.6; max-width: 62ch; }

/* ---------- next-page row --------------------------------- */
.q-next {
  border-top: 1px solid var(--rule); padding-block: 1.6rem 3rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.q-next__link { text-decoration: none; color: inherit; display: block; }
.q-next__label {
  display: block; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .25rem;
}
.q-next__title { font-size: var(--step-1); color: var(--ink); }
.q-next__link:hover .q-next__title { color: var(--accent); }
.q-next__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- figures --------------------------------------- */
.q-figure { margin: 0; }
.q-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.q-figure figcaption {
  margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--faint); max-width: 62ch;
}
.q-fig__lane { font-size: 11px; letter-spacing: .1em; fill: var(--faint); font-weight: 700; }
.q-fig__t { font-size: 14px; fill: var(--ink); }
.q-fig__t--mute { fill: var(--soft); }
.q-fig__dot { fill: var(--rule-firm); }
.q-fig__arrow { fill: none; stroke: var(--rule-firm); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.q-fig__dash { fill: none; stroke: var(--rule-firm); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.q-fig__split { stroke: var(--rule); stroke-width: 1; }
.q-fig__cite { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.q-fig__cite-rule { fill: none; stroke: var(--accent); stroke-width: 2; }
.q-a-fill-static { fill: var(--mark); }