/* ============================================================================
   FAQ — one card per question, the document scrolls, a support card at the foot.

   THE THIRD RULING IN THIRTY HOURS. Layout D (08-31 night) was hairline rows in
   the locked card, no surface at all. Layout A (09-01 morning) brought back
   three CATEGORY panels and released the lock; the categories were killed on
   sight. This is neither: the surface returns as ONE CARD PER QUESTION, the
   categories stay dead, and the lock is released as a deliberate choice.

   Founder, 09-01, seeing D on screen: *"je veux des vraies cards. Je ne veux pas
   des tires a chaque fois et je ne veux pas de scroll interne. […] on n'est pas
   oblige d'avoir une page sur le viewport, on peut se permettre de scroller."*

   THE GAP SEPARATES, NOT A RULE. There is no hairline between questions and
   there must not be one: a card already has an edge, and an edge plus a rule
   says the same thing twice. That is the single visual difference between this
   and D, and it is the thing he asked for.

   NO CARD INSIDE A CARD. The one boxed answer left — the trust block — is a
   TINTED inset on the card's white, never a second bordered white box. Layout A
   found this and it outlives layout A. (There were two until 2026-09-01, when
   the price block was deleted along with every figure on the site.)

   CARRIED OVER FROM THE EARLIER PASSES, all layout-independent:
   - `.answer > p` as a CHILD combinator, and it stays one now that the selectors
     that forced it are gone. `.answer p` (0,1,1) out-ranked the price block's
     own `.fprice__k` / `.fprice__v` (0,1,0) further down the file, so the yearly
     price rendered at 15.44px in mid-grey and the monthly one 11.9% larger. Any
     future single-class element nested in an answer inherits that trap.
   - 52ch at 1.045rem, not 66ch: SF Pro's `ch` is 0.63em against a 0.42em mean
     advance, so the old cap measured 641px and held 98 characters.
   - `text-wrap: pretty`, never `balance` — balance is what split "I fight
     amateur. Do" from "I really need Kalv?".
   - The chevron as a `::after` with one translate (two different translates made
     the mark swing 2.17px sideways as it turned), the focus insets, the
     `::details-content` animation and its `@supports` gate, and the print block.

   Still zero JavaScript: native <details>, `name` for one-drawer-at-a-time, no
   script.
   ========================================================================== */

.faq-doc {
  /* 720px is the founder's number from the wireframe, and it is a column width
     rather than a reading measure — the answers are capped at 52ch inside it.
     The longest question is 424px of ink, so widening buys empty row, not
     text. */
  --fcol: 720px;
  --r-full: 999px;
  /* The padding is the card's now, not a row's, so it can be generous. */
  --fpad: clamp(18px, 2vw, 24px);
  --fcard-radius: 18px;
}

/* ---- head: centred, and closed by a rule -------------------------------- */

/* A route stylesheet reaching into the chrome, scoped to `.faq-doc`. What is
   repaired here is the frame line the centring pass dropped — it moves to
   `.flead` so it lands under the PAIR rather than between them, and it takes
   the column's width rather than the shell's, because a full-bleed rule over a
   720px column reads as a stray divider. */
.faq-doc .pmast {
  width: 100%;
  max-width: var(--fcol);
  margin-inline: auto;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: clamp(2.05rem, 3.6vw, 3.05rem);
  font-weight: 730;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-align: center;
  /* Not `balance`: it gave "Frequently" over "Asked Questions" — a stub above a
     full line, splitting the compound. The greedy break keeps them together. */
  text-wrap: pretty;
}

/* `width: 100%` is load-bearing, not belt-and-braces. `.pshell` is a COLUMN
   flex container, so `margin-inline: auto` on a child makes the auto margins
   absorb the free space and the paragraph shrink-to-fit its own sentence — the
   rule came out 362px wide, the width of the text, and max-width never got a
   chance to apply. */
.flead {
  flex: none;
  width: 100%;
  max-width: var(--fcol);
  margin: 11px auto 0;
  padding-bottom: 16px;
  /* The line every other route hangs under its `.pmast`. Here it hangs under
     the pair, which is the only thing the centring changes about it. This is
     D's "one line of frame". */
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1.05rem;
  letter-spacing: -0.012em;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* ---- body: the document scrolls ---------------------------------------- */

/* No `.pscroll` and no scroll wrapper: `scrolls=True` in render.py puts this
   route on the article regime, the card grows with the content and the window
   scrolls it. Eleven cards with air between them do not fit 900px and the
   founder ruled the air worth more than the one-screen property. */
.fbody {
  width: 100%;
  max-width: var(--fcol);
  margin-inline: auto;
  padding: 26px 0 clamp(48px, 6vw, 84px);
}

/* ---- the three groups --------------------------------------------------- */

/* RESTORED 2026-09-01 (evening) on the founder's recall; cut that morning with
   the panel layout, asked back by name. They partition the order and never
   re-sort it — the boundaries are the flat list's own (render.py, FAQ_GROUPS).

   A MICRO-LABEL, not a heading. Founder, 2026-09-01 evening, seeing them at
   section grade: *"je veux vraiment que ce soit des micros. Je ne veux pas de
   headline. Je veux des tout petits en petite police, plus petits que les
   questions, en gris, subtil, vraiment minimaliste."* So this is main.css's
   shared `.eyebrow` verbatim — 11.84px, weight 620, `--ink-3`, sentence case —
   and faq.css contributes only the margin, exactly as `legal.css` and
   `weights.css` already do. No second vocabulary for the same object.

   IT IS STILL AN `<h2>`. Only the paint got smaller: the element keeps the
   outline (H1 > three H2 > eleven H3), so the page stays navigable by the H key
   and the question titles stay `h3` underneath. Small is a size, not a
   demotion — which is what the earlier `<p class="eyebrow">` got wrong, and it
   was the markup that was wrong, never the size.

   Contrast measured rather than assumed, since 11.84px of grey is where that
   usually breaks: #6e6e69 on the #F5F5F3 ground is **4.69:1**, over the 4.5:1
   floor. Nothing lighter than `--ink-3` passes, so nothing lighter is used. */
.fgrp > .eyebrow {
  margin: 0 0 10px;
  padding-left: 2px;
  /* 14px, founder's call after seeing 11.84: *"agrandis un peu légèrement […]
     je pense que tu peux augmenter à 14 pixels."* The SIZE is the only thing
     this route overrides — colour, weight, tracking and sentence case all stay
     `.eyebrow`'s, so the label still reads as the site's micro-label and not as
     a fourth type grade. Ratio to a question title: 14 / 17.6 = 0.80, still
     unambiguously subordinate.
     Note what this does to § 6.1's spirit: a route sheet overriding a
     main.css-owned utility's type is one step past the margin-only reach
     `legal.css` and `weights.css` take. It is scoped to `.fgrp >` and it stops
     at one declaration; widen it and the shared class has stopped being
     shared. */
  font-size: 0.875rem;
}

/* 40px above the label against 10px below it — a 4:1 ratio, which is what makes
   a micro-label read as belonging to the stack BELOW rather than floating
   between two of them. At label grade the ratio does more work than the
   absolute gap: 12px below would have the eyebrow sitting between two groups
   with nothing to attach to. `.q + .q` does not cross a section boundary, so
   this is the only rule separating the groups. */
.fgrp + .fgrp { margin-top: clamp(28px, 3.2vw, 40px); }

/* ---- the questions ------------------------------------------------------ */

/* EACH QUESTION IS A CARD. `overflow: hidden` so the summary's hover tint and
   the focus ring take the card's own radius instead of squaring off inside it;
   the shadow is drawn outside the box and is not clipped by it.
   No `border-bottom` anywhere near this rule — the 10px gap below is what
   separates one question from the next. */
.q {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(14, 14, 13, 0.12);
  border-radius: var(--fcard-radius);
  box-shadow: 0 1px 2px rgba(14, 14, 13, 0.04), 0 12px 30px -20px rgba(14, 14, 13, 0.20);
  scroll-margin-top: 24px;
}

.q + .q { margin-top: 10px; }

/* An open card lifts out of the stack: the edge darkens and the shadow deepens,
   so the one you are reading is the one in front. Nothing moves position. */
.q[open] {
  border-color: rgba(14, 14, 13, 0.18);
  box-shadow: 0 1px 2px rgba(14, 14, 13, 0.05), 0 18px 40px -22px rgba(14, 14, 13, 0.26);
}

/* The padding lives on the SUMMARY, not on the card: on the card it would leave
   dead surface down each side of every question — unclickable, and a hover tint
   that cannot reach the card's edge. */
.q > summary {
  display: flex;
  /* `flex-start` pinned the chevron to the first text line, so on a two-line
     title it floated 11.3px above the block's centre and on a three-line title
     22.7px. At 320 that is a 14px mark parked in the corner of a 102px row. */
  align-items: center;
  gap: 18px;
  /* 13px, from the same budget as `.fbody` above: eleven rows at 49.4px leave
     14px of slack in the locked card at 1440x900, where 14px of padding left
     none. Below 600 it goes back up — the phone has the whole document. */
  padding: 17px var(--fpad);
  cursor: pointer;
  list-style: none;
  transition: background 160ms var(--ease-ui);
}

.q[open] > summary { padding-bottom: 12px; }
.q > summary::-webkit-details-marker { display: none; }

/* The whole row answers the cursor. The title used to go from `--ink` to
   `--ink-2` on hover — 19.3:1 down to 6.7:1, a 65% contrast drop that read as
   disabled rather than hovered, and the only other signal sat 700px away at the
   far end of the row. */
.q > summary:hover { background: rgba(14, 14, 13, 0.028); }
.q > summary:active { background: rgba(14, 14, 13, 0.05); }
.q > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* A question title is a heading, and with the category labels gone it is the
   only h2 on the route — the page is navigable by the H key again, eleven rungs
   under one h1. It sits at 1.35x its own answer, the house ratio taken from
   `.dread h2` over `.dread p`. */
.q__t {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 620;
  letter-spacing: -0.027em;
  line-height: 1.32;
  color: var(--ink);
  /* `balance` is what split "I fight amateur. Do" from "I really need Kalv?" */
  text-wrap: pretty;
}

/* THE CHEVRON. 1.7px of `--ink-3` measured 1.73:1 as rendered ink at DPR 1 — 42%
   under the 3:1 a non-text indicator needs, effectively invisible on a display
   that is not Retina.
   And the two states carried DIFFERENT translates, so the transform interpolated
   as an arc: the mark swung 2.17px sideways while it turned. One translate, one
   pure spin.
   A pseudo-element, so `<summary>` holds exactly one heading and nothing else,
   and the mark needs no `aria-hidden` to stay out of the accessibility tree. */
.q > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  border-radius: 0 0 2px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms var(--ease-ui), border-color 200ms var(--ease-ui);
}

.q > summary:hover::after { border-color: var(--ink); }
.q[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

/* `interpolate-size: allow-keywords` is declared on :root in main.css. It is
   Chromium-only: Safari 18.4+ and Firefox 139+ ship `::details-content` but not
   the keyword interpolation, so there the height would snap to full and THEN
   fade over 260ms — a fade landing on content that has already jumped, which
   reads worse than no animation at all. The height transition is therefore
   gated on support; everyone else gets the fade alone, which reads intentional. */
.q::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-ui) 60ms, content-visibility 300ms allow-discrete;
}

@supports (interpolate-size: allow-keywords) {
  .q::details-content {
    transition: block-size 300ms var(--ease-ui), opacity 200ms var(--ease-ui) 60ms, content-visibility 300ms allow-discrete;
  }
}

.q[open]::details-content { block-size: auto; opacity: 1; }

.answer { padding: 0 var(--fpad) 22px; }
.answer > p { margin: 0 0 14px; max-width: 52ch; color: var(--ink-2); font-size: 1.045rem; line-height: 1.62; letter-spacing: -0.011em; text-wrap: pretty; }
.answer > p:last-child { margin-bottom: 0; }
.answer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.answer a:hover { text-decoration-color: var(--ink); }
.answer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---- the two boxes, and there are only two ------------------------------ */

/* THE TRUST BLOCK — the page's one appeal to authority. It sits INSIDE a white
   card now, so it is a tinted inset and never a second bordered white box: a
   card in a card is two edges saying the same thing. Same vocabulary as the
   price block below, because two insets on one route that do not match are two
   vocabularies. */
.fnote {
  max-width: 52ch;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.fnote > p { margin: 0 0 10px; color: var(--ink); font-size: 1.02rem; line-height: 1.6; letter-spacing: -0.011em; text-wrap: pretty; }
.fnote > p:last-child { color: var(--ink-2); margin-bottom: 0; }

/* ---- support: the card the list ends on -------------------------------- */

/* The founder handed the register with the ask — Cal AI's support card:
   centred, one question, one line, and the ADDRESS ON THE BUTTON rather than
   sitting beside it as a footnote. The address in the label is the point of the
   reference; it says a person reads it. THE WORDS ARE OURS — a reference
   governs the form, not the copy.

   Capped at 480 and set apart by a wide margin rather than a rule: run it the
   column's full 720 around 250px of content and it reads as a twelfth question
   that has lost its chevron. Same radius as the cards above — four surfaces in
   one column, one radius. It is the only filled button on the route, because it
   is the only place the page asks for something. */
.fhelp {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: clamp(38px, 4.6vw, 60px) auto 0;
  padding: clamp(28px, 3.2vw, 36px) clamp(22px, 2.6vw, 30px);
  background: var(--paper);
  border: 1px solid rgba(14, 14, 13, 0.12);
  border-radius: var(--fcard-radius);
  box-shadow: 0 1px 2px rgba(14, 14, 13, 0.04), 0 12px 30px -20px rgba(14, 14, 13, 0.20);
  text-align: center;
}

.fhelp__t { margin: 0; color: var(--ink); font-size: 1.3rem; font-weight: 640; letter-spacing: -0.03em; line-height: 1.2; }
.fhelp__p { margin: 9px 0 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; letter-spacing: -0.011em; text-wrap: pretty; }

/* A full pill, not the 12px radius of the store CTA. The header's button is
   chrome and keeps the chrome's shape; this one is the page's own and takes the
   reference's. `white-space: normal` because at 320 the label measured 188.0px
   inside a 188px content box — zero slack, and one more character would have
   overflowed a black pill with no recovery. */
.fhelp__b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 26px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 570;
  letter-spacing: -0.014em;
  line-height: 1.25;
  text-wrap: balance;
  transition: background 200ms var(--ease-ui), transform 200ms var(--ease-ui);
}

.fhelp__b:hover { background: var(--cta-apple-bg-hover); transform: translateY(-1px); }
.fhelp__b:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---- arrival ------------------------------------------------------------ */

/* A short rise on the head only. It used to stagger across the groups and the
   support card as well, at 100/170/240/320ms — but those delays animated
   content below the fold while pushing the settle to 870ms, and `from
   { opacity: 0 }` with `fill: both` means every block is invisible through its
   own delay: the price was unreadable for 430ms. */
@keyframes frise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .faq-doc .pmast, .flead { animation: frise 380ms var(--ease-ui) both; }
  .flead { animation-delay: 50ms; }
}

/* ---- ~600: the column narrows and the type has to follow ---------------- */

/* faq.css used to run one breakpoint at 1024 doing three unrelated jobs, so
   between 320 and 1024 the column swung from 262px to 722px and nothing on the
   page changed size. 600 is where the last question title stops wrapping. */
@media (max-width: 600px) {
  .faq-doc { --fpad: 16px; --fcard-radius: 16px; }
  .fbody { padding-top: 18px; }
  .q > summary { padding-block: 16px; gap: 14px; }
  .answer { padding-bottom: 20px; }
  .q__t { font-size: 1.04rem; }
  .answer > p, .fnote > p, .fhelp__p { font-size: 1rem; }
}

/* ---- ~1024: the chrome switches, and so does the head ------------------- */

@media (max-width: 1024px) {
  /* The mast was frozen at 32.8px across 591px of viewport — 320 to 911 —
     because 3.6vw does not reach the floor until 911. Same headline in a 262px
     box and in a 722px one.
     The 2.3rem ceiling is not a taste call: at 1025 the desktop curve computes
     36.9px, so any higher cap here makes the headline SHRINK as the window
     widens across the breakpoint. 4.4vw meets 2.3rem at 837px and the two
     curves join. */
  .faq-doc .pmast { font-size: clamp(1.65rem, 4.4vw, 2.3rem); }
  .flead { margin-top: 11px; padding-bottom: 16px; font-size: 1rem; }
  /* The bar is sticky below 1024, so a hash link landed the question 58px behind
     it. Measured at 390: 64px of bar over a row whose top was at y=6.1. */
  .q { scroll-margin-top: 82px; }
}

/* ---- ~480: the support button goes full width -------------------------- */

/* This band used to un-row the two prices as well. The price block was deleted
   on 2026-09-01 with the figures it carried; the button rule is the whole
   breakpoint now. */
@media (max-width: 480px) {
  .fhelp__b { width: 100%; padding-inline: 14px; }
}

/* ---- print -------------------------------------------------------------- */

/* A closed `::details-content` computes to 0px / opacity 0 / hidden, so
   save-to-PDF produced eleven questions and one answer. */
@media print {
  .q, .fhelp { box-shadow: none; }
  .q::details-content {
    block-size: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
  }
}

/* ---- reduced motion ----------------------------------------------------- */

/* `* { transition: none }` does NOT match `::details-content` — the universal
   selector matches elements, not that pseudo — so the one motion a
   reduced-motion visitor can actually trigger, a panel expansion that reflows
   the page under their cursor, was the only one still running.
   Scoped to this route's own elements rather than `*`: main.css already zeroes
   durations globally, and a route sheet reaching the chrome through the
   universal selector is the § 6.1 breach nobody notices. */
@media (prefers-reduced-motion: reduce) {
  .faq-doc .pmast, .flead, .q, .q > summary, .q > summary::after, .fhelp__b {
    transition: none !important;
    animation: none !important;
  }
  .q::details-content { transition: none !important; }
}