/* ============================================================================
   FAQ — one screen, seven categories, zero JavaScript.
   ---------------------------------------------------------------------------
   The page does not scroll. Identity sits on the left and carries the weight;
   the questions sit on the right behind a category switcher. Clicking a
   category swaps the panel — no page movement, nothing to hunt for.

   Three references, one layer each. Mixing their layers is what sank the
   earlier passes, so keep them separate:
     - Dataly      -> the layout: identity left, questions right, contact card
                      under the headline, two-tone "Frequently asked questions".
     - Conicorn    -> the row grammar: number, question, a circle that turns
                      from + to x, the open row lifted off the ground.
     - Cal AI /faq -> the categorisation only. Nothing else from it.

   How the switching works, since there is no script: seven radio inputs sit
   before the tab row and the panels. `:checked ~` lights the matching label
   and reveals the matching panel. Keyboard arrows move between categories for
   free, because it is a native radio group. Answers are native <details> that
   share a `name`, so opening one closes the last — the panel height never
   drifts and the tabs never move under the cursor.

   Everything vertical is sized in vh so the layout compresses on a short
   laptop instead of overflowing the card, which is clipped by .hero.
   Below 780px the shell unlocks (main.css .mobile-scroll) and this stacks.
   ========================================================================== */

.faq-doc {
  --measure: 1660px;
  --col: clamp(300px, 37vw, 620px);
  --colgap: clamp(40px, 5.2vw, 110px);
  --gutter: clamp(20px, 3.2vw, 64px);
  --row: clamp(46px, 6.2vh, 58px);
  --rowgap: clamp(5px, 0.75vh, 9px);
  /* The row measure is capped independently of the column. Left to grow with
     the column, a six-word question on a 1920 screen sits 500px from its own
     + button and the row reads as an empty slab. */
  --rowmax: 680px;
  --row-space: 7px;
  --panel-fade: 34px;
  /* The panel is pinned to the tallest category (8 rows — Scan and Plans) so
     that centring the block does not make the tab row jump when you switch
     category, and an open answer scrolls inside instead of moving the page.
     The +8px is the qlist's own padding, the +fade keeps the bottom gradient
     over empty space in the resting state instead of greying row eight.
     A ninth question in any category means bumping the 8. */
  --rows-max: 8;
  --tabs-gap: clamp(7px, 1.5vh, 19px);
  /* The support card's bottom edge is welded to the last row of the *first*
     category. The left column stretches to the full row instead of being
     given a height, and the card is lifted off the bottom by exactly the
     slack the panel reserves beyond that category — so the tab row's height
     cancels out of the equation entirely. It has to: the pill measures 39px
     at 1920 and 35.25px at 1280 with identical CSS, and an earlier pass that
     hardcoded it drifted a few pixels at every other width. Everything below
     is the same --row-h and --row-space the list is built from. The trailing
     -4px is the panel's own 4px padding / -4px margin pair netting out
     against the qlist's 4px: `.cats` ends 8px above the panel's margin box
     and the first row starts 4px below it. */
  --rows-first: 6;
  --card-drop: calc((var(--rows-max) - var(--rows-first))
                * (var(--row-h) + var(--row-space))
              + var(--panel-fade) - 4px);
  --panel-h: calc(var(--rows-max) * var(--row-h)
              + (var(--rows-max) - 1) * var(--row-space)
              + 8px + var(--panel-fade));
  --row-num: 34px;
  --row-gap: 18px;
  --row-icon: 34px;
  --row-pad: clamp(18px, 1.7vw, 30px);
  --row-pad-y: 11px;
  /* What a row is actually tall, and it is not `--row`. `--row` is a floor on
     the *summary*; above it the summary is set by the + circle plus its
     padding. Either way the border lives on `.q`, the parent, so it is added
     once outside the max — folding it inside made the reserve 2px short per
     row at any viewport where `--row` wins, which is every viewport over
     ~936px tall. */
  --row-h: calc(max(var(--row), calc(var(--row-icon) + 2 * var(--row-pad-y))) + 2px);
  /* Liquid Glass. Three densities: resting, hovered, open. */
  --glass: rgba(255, 255, 255, 0.56);
  --glass-2: rgba(255, 255, 255, 0.66);
  --glass-3: rgba(255, 255, 255, 0.86);
  --glass-line: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(26px) saturate(180%);
  interpolate-size: allow-keywords;
}

/* The card is the page. Nothing lives outside it but the legal bar. */
.faq-doc .hero { display: flex; flex-direction: column; }

/* What the glass has to work with. Flat #f2f2f2 under a translucent row reads
   as a flat grey box; these give the blur something to bend. */
.faq-doc .hero__ambient {
  background:
    radial-gradient(62% 52% at 76% 6%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(48% 44% at 8% 92%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(44% 40% at 99% 92%, rgba(26, 26, 26, 0.055) 0%, rgba(26, 26, 26, 0) 72%),
    var(--stage);
}

.faqwrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  /* One auto row, centred in the free height — founder call, 2026-08-20.
     The row is as tall as the taller column and both columns start at its
     top edge, which is what keeps the headline's cap on the tab pills:
     centring each column on its own would offset them by half their
     difference. The row cannot be stretched by an open answer because the
     panel's height is pinned (--panel-h) and scrolls internally. */
  grid-template-rows: minmax(0, auto);
  /* `safe` so that a window too short for the block falls back to start
     alignment instead of centring it under the topbar and off both edges. */
  align-content: safe center;
  align-items: start;
  gap: 0 var(--colgap);
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  /* The crown does two jobs. It clears the absolutely-positioned topbar —
     pull the cap higher and the F lands on the logo — and it biases the
     centring. The block is centred on its *reserved* height, which is the
     eight-row category; a six-row one leaves 143px of that reserve empty
     below the last row and would sit visibly high. Crowding the band from
     the top moves the centre down by half the amount added, which splits
     the error between the short categories and the tall ones. */
  padding: clamp(120px, 20.8vh, 230px) var(--gutter) clamp(22px, 4vh, 56px);
}

/* ── left: the identity block ─────────────────────────────────────────── */

.faqid { display: flex; flex-direction: column; min-width: 0; align-self: stretch; }

/* Reversed 2026-08-20 (same day it was set): caps at 800/86px was SF Pro
   Display shouted, and every other word on this site is set at 500 — the
   founder read it as "pas du tout adapté à notre police". The stack is a
   UI grotesque, so it carries weight through scale and tone, never through
   Heavy caps. Back to the Dataly grammar it was drawn from: sentence case,
   two lines, two tones. -0.075em is the leading above the cap at this
   line-height, in em so it survives every clamp step: it puts the cap on
   the top edge of the category pills across the gutter — the gap is large
   because it also has to clear SF Pro's ascender, which overshoots the cap
   by a quarter of the em. */
.faq-doc .faqid h1 {
  margin: -0.29em 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.7vw, 4.5rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--ink);
}

/* The second tone. It is the same word the tabs are answering, so it steps
   back rather than repeating the weight of the first line. */
.faqid__soft { color: var(--ink-3); }

/* ── the support card ─────────────────────────────────────────────────── */

.support {
  /* auto, not a fixed gap: the card is welded to the bottom of the column
     and the slack under the headline is whatever is left. */
  margin-top: auto;
  margin-bottom: var(--card-drop);
  padding: clamp(17px, 1.5vw, 22px);
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03),
              0 26px 54px -34px rgba(26, 26, 26, 0.55);
}

.support__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.support__h {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.support__dek {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Outline, not fill. Solid black made this the third black pill on the
   screen after the App Store badge and the live category — three primaries
   is none — and writing to support is the least urgent thing this page
   asks for. The badge keeps the fill; this one keeps the outline. */
.support__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}

.support__cta:hover { background: rgba(26, 26, 26, 0.045); border-color: rgba(26, 26, 26, 0.28); }
.support__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The address the button opens, said once, in plain text. As the button's
   own label it was a URL wearing a CTA's clothes. */
.support__addr {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 0.79rem;
  letter-spacing: -0.005em;
  text-align: center;
}

/* ── right: the switcher ──────────────────────────────────────────────── */

.cats {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
}

.cats > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cats > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* One line, always, at every width — it scrolls rather than wraps. Wrapping
   is what breaks the welded card: below ~1235px the seventh pill dropped to a
   second line and took the whole left column 47px out of true, and there is
   no width at which seven pills and a two-column layout both fit above 780px.
   A cut pill reads as "there is more", the same affordance the Results rail
   uses; a silently taller tab row reads as a bug. */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  max-width: var(--rowmax);
  gap: 8px;
  padding-block: 3px;
  margin-bottom: var(--tabs-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }
.tabs label { white-space: nowrap; }

/* Every category is a pill, not just the live one. Six bare words beside a
   filled black pill read as one button and six links; giving the resting
   state the same glass the rows use makes the row a control. */
.tabs label {
  padding: 10px 19px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink-2);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  transition: background 180ms var(--ease-ui), color 180ms var(--ease-ui),
              border-color 180ms var(--ease-ui);
}

.tabs label:hover {
  background: var(--glass-2);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

/* The panel is a frame, not a surface — the rows are the objects. It takes
   whatever height the column leaves so the tab row never shifts between
   categories, and an open answer scrolls the list rather than the layout:
   .hero clips, so an overflow here would eat the last rows instead of
   scrolling to them. The padding/negative-margin pair keeps that overflow
   from shearing the glass shadows off the rows. */
.panels {
  flex: 0 1 var(--panel-h);
  min-height: 0;
  padding: 4px 8px;
  margin: -4px -8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.18) transparent;
  /* A row clipped by the panel edge has to read as "there is more below",
     not as a rendering fault. The fade sits over empty space whenever the
     category fits, so it costs nothing in that case. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--panel-fade)), rgba(0, 0, 0, 0.06) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--panel-fade)), rgba(0, 0, 0, 0.06) 100%);
}

.panel { display: none; }

.cats > input:nth-of-type(1):checked ~ .tabs label:nth-of-type(1),
.cats > input:nth-of-type(2):checked ~ .tabs label:nth-of-type(2),
.cats > input:nth-of-type(3):checked ~ .tabs label:nth-of-type(3),
.cats > input:nth-of-type(4):checked ~ .tabs label:nth-of-type(4),
.cats > input:nth-of-type(5):checked ~ .tabs label:nth-of-type(5),
.cats > input:nth-of-type(6):checked ~ .tabs label:nth-of-type(6),
.cats > input:nth-of-type(7):checked ~ .tabs label:nth-of-type(7) {
  background: var(--cta-apple-bg);
  border-color: var(--cta-apple-bg);
  color: var(--cta-apple-fg);
}

.cats > input:focus-visible ~ .tabs label { outline: 0; }
.cats > input:nth-of-type(1):focus-visible ~ .tabs label:nth-of-type(1),
.cats > input:nth-of-type(2):focus-visible ~ .tabs label:nth-of-type(2),
.cats > input:nth-of-type(3):focus-visible ~ .tabs label:nth-of-type(3),
.cats > input:nth-of-type(4):focus-visible ~ .tabs label:nth-of-type(4),
.cats > input:nth-of-type(5):focus-visible ~ .tabs label:nth-of-type(5),
.cats > input:nth-of-type(6):focus-visible ~ .tabs label:nth-of-type(6),
.cats > input:nth-of-type(7):focus-visible ~ .tabs label:nth-of-type(7) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cats > input:nth-of-type(1):checked ~ .panels .panel:nth-of-type(1),
.cats > input:nth-of-type(2):checked ~ .panels .panel:nth-of-type(2),
.cats > input:nth-of-type(3):checked ~ .panels .panel:nth-of-type(3),
.cats > input:nth-of-type(4):checked ~ .panels .panel:nth-of-type(4),
.cats > input:nth-of-type(5):checked ~ .panels .panel:nth-of-type(5),
.cats > input:nth-of-type(6):checked ~ .panels .panel:nth-of-type(6),
.cats > input:nth-of-type(7):checked ~ .panels .panel:nth-of-type(7) {
  display: block;
}

/* ── the rows ─────────────────────────────────────────────────────────── */

.qlist { counter-reset: q; max-width: var(--rowmax); padding-block: 4px; }

/* Liquid Glass, never a flat fill. The row is translucent and blurs what is
   behind it, which is why .hero__ambient below carries a gradient — glass with
   nothing underneath is just a grey box, and that is what got the flat-panel
   version thrown out. */
.q {
  counter-increment: q;
  border: 1px solid var(--glass-line);
  border-radius: 19px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.028),
              0 14px 34px -26px rgba(26, 26, 26, 0.5);
  transition: background 260ms var(--ease-ui), box-shadow 300ms var(--ease-ui),
              border-color 260ms var(--ease-ui);
}

.q + .q { margin-top: var(--row-space); }

.q:not([open]):hover {
  background: var(--glass-2);
  border-color: rgba(255, 255, 255, 0.8);
}

.q[open] {
  background: var(--glass-3);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 5px rgba(26, 26, 26, 0.035),
              0 34px 60px -34px rgba(26, 26, 26, 0.6);
}

.q summary {
  display: grid;
  grid-template-columns: var(--row-num) minmax(0, 1fr) var(--row-icon);
  align-items: center;
  gap: 0 var(--row-gap);
  min-height: var(--row);
  padding: var(--row-pad-y) var(--row-pad);
  list-style: none;
  cursor: pointer;
}

.q summary::-webkit-details-marker { display: none; }
.q summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 16px; }

.q__n {
  color: var(--ink-3);
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.q__n::before { content: counter(q, decimal-leading-zero); }

.q__t {
  font-size: clamp(0.94rem, 1.06vw, 1.09rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* One circle, two bars, one of them rotated. Open turns + into x. */
.q__i {
  position: relative;
  justify-self: end;
  width: var(--row-icon);
  height: var(--row-icon);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 320ms var(--ease-ui), background 260ms var(--ease-ui),
              border-color 260ms var(--ease-ui);
}

.q__i::before,
.q__i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink-2);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: background 260ms var(--ease-ui);
}

.q__i::after { transform: translate(-50%, -50%) rotate(90deg); }

.q:not([open]):hover .q__i { border-color: rgba(26, 26, 26, 0.2); }

.q[open] .q__i {
  transform: rotate(45deg);
  background: var(--cta-apple-bg);
  border-color: var(--cta-apple-bg);
}

.q[open] .q__i::before,
.q[open] .q__i::after { background: var(--cta-apple-fg); }

/* Native <details> does not animate. ::details-content plus
   interpolate-size does, on Chrome 131+ and Safari 18.4+; older engines
   simply open instantly, which is not a regression. */
.q::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 360ms var(--ease-ui),
              content-visibility 360ms allow-discrete;
  transition-behavior: allow-discrete;
}

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

.answer {
  max-width: 68ch;
  padding: 0 clamp(20px, 2.4vw, 40px) clamp(14px, 1.9vh, 22px)
              calc(var(--row-pad) + var(--row-num) + var(--row-gap));
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.62;
}

.answer p + p { margin-top: 11px; }
.answer strong { color: var(--ink); font-weight: 600; }
.answer a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── narrow desktop ───────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  /* The headline is set to the column, so the two scale together: "Frequently
     asked" runs about 8.1x the font size, and the column is 34vw here. */
  .faq-doc { --colgap: clamp(30px, 3.6vw, 56px); --col: clamp(280px, 34vw, 430px);
             --rowmax: 620px; }
  .faq-doc .faqid h1 { font-size: clamp(1.85rem, 4.2vw, 3.2rem); }
  .tabs label { padding: 9px 15px; font-size: 0.84rem; }
}

/* ── short windows ────────────────────────────────────────────────────── */

/* Under 900px of viewport height the panel's eight-row reserve no longer fits
   beside the headline and the card: `margin-top: auto` collapses, the gap
   under the headline closes to nothing, and the panel shrinks out from under
   the reserve the weld is measured against — so the card misses the line it
   was welded to anyway. Drop the weld instead of squeezing: the card goes
   back under the headline and the slack sits at the foot of the column, which
   is what this page looked like before the weld and reads deliberate. */
@media (min-width: 781px) and (max-height: 899px) {
  .faq-doc { --card-drop: 0px; }
  .support { margin-top: clamp(20px, 3vh, 34px); }
}

/* ── stacked. Matches main.css, where the shell unlocks at 780. ───────── */

@media (max-width: 780px) {
  .faq-doc { --gutter: 18px; --row: 58px; --row-num: 26px; --row-gap: 12px;
             --row-icon: 34px; --row-pad: 16px; --rowmax: none; }

  /* One column, and the contact card moves to the end — on a phone the
     questions come before the invitation to write in. display: contents
     dissolves .faqid so its children can be ordered against the switcher. */
  .faqwrap {
    display: flex;
    flex-direction: column;
    /* Back to stretch: in a column flex box the desktop rule's `start` is a
       *horizontal* alignment, and it would shrink the card and the switcher
       to their content width. */
    align-items: stretch;
    padding: 92px var(--gutter) 40px;
  }

  .faqid { display: contents; }
  .faqid__eyebrow { order: 1; }
  .faq-doc .faqid h1 { order: 2; }
  .cats { order: 3; margin-top: 26px; }
  .support { order: 4; }

  .faq-doc .faqid h1 { font-size: clamp(2.05rem, 9.6vw, 3rem); }

  .support { margin: 30px 0 0; }
  .tabs { padding-block: 0; }

  /* The seven categories become a rail you swipe. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }
  .tabs label { white-space: nowrap; }

  /* No height lock below 780 — the shell scrolls, so the list runs long. */
  .panels {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .q, .q__i, .q__i::before, .q__i::after, .q::details-content,
  .tabs label, .support, .support__cta { transition: none; }
}