/* ---------- 04 · Questions before we start: an answer you can see (FAQ_CONCEPT_UK.md) ----------
   Six questions and a stage. From 1180 px the list stands on the left and the open answer, with
   its illustration, stands in the stage on the right; below that the answers open under their
   questions. Without the script this is a <details name="faq"> accordion laid out the same way:
   the open answer is simply placed in the stage. faq.js makes the questions disclosure buttons
   (the same classes, so nothing moves when it arrives), moves the choice and assembles the
   pictures. Every illustration is written here in its final look; the script only animates
   transform, opacity and the lines' stroke-dashoffset on top of it. Nothing at rest is 3D. */
.faq { padding:clamp(80px,8vw,116px) 0; background:var(--white); border-top:1px solid var(--line); }
.faq > .container { width:min(1520px,calc(100% - 128px)); }
.faq-grid { --g:clamp(48px,4.4vw,80px); position:relative; isolation:isolate; }
.faq .eyebrow { display:flex; align-items:center; gap:14px; margin:0; letter-spacing:.18em; color:var(--muted); }
.faq h2 { margin-top:22px; font-size:clamp(30px,3.2vw,50px); line-height:1.04; letter-spacing:-.036em; color:var(--ink); }
.faq h2 > span { display:block; }
.faq-lede { margin-top:18px; max-width:44ch; font-size:16px; line-height:1.55; color:var(--body); }

/* ── The list: six questions and a seventh row to ask your own ────────────────────────────── */
.faq-list { margin-top:clamp(28px,2.6vw,38px); }
.faq-summary { position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; column-gap:16px;
  width:100%; min-height:56px; margin:0; padding:15px 18px; border:0; border-top:1px solid var(--line); border-radius:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.faq-summary::-webkit-details-marker { display:none; }
/* the row's line above it belongs to the row, so it arrives with it */
.faq-summary:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-2px; }
.faq-number { font-size:12px; line-height:1; letter-spacing:.18em; color:var(--muted); font-variant-numeric:tabular-nums; }
/* the question keeps the room of its bold self, so choosing it never rewraps the row */
.faq-question { display:grid; font-size:clamp(16px,1.3vw,18px); line-height:1.35; letter-spacing:-.012em; color:#111315c4; transition:color 220ms ease; }
.faq-question > span,.faq-question::after { grid-area:1/1; }
.faq-question > span { align-self:center; }
.faq-question::after { content:attr(data-text); content:attr(data-text) / ""; font-weight:550; visibility:hidden; pointer-events:none; }
.faq-item:is([open],.is-open) .faq-question { color:var(--ink); font-weight:550; }
/* the Saffron mark beside the open question (the script moves one shared mark on a wide screen) */
.faq-summary::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform 320ms var(--ease); }
.faq-item:is([open],.is-open) > .faq-summary::before { transform:none; }
@media(hover:hover) and (pointer:fine) {
 .faq-summary:hover .faq-question { color:var(--ink); }
}

.faq-ask { position:relative; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; column-gap:16px; min-height:60px;
  padding:14px 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.faq-ask-icon { width:18px; height:18px; color:var(--muted); }
.faq-ask p { margin:0; font-size:15px; line-height:1.45; color:var(--body); }
.faq-cta { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap;
  border-bottom:1px solid #1113153d; padding-bottom:2px; transition:border-color var(--micro); }
.faq-cta::after { content:''; position:absolute; inset:0; }
.faq-cta:focus-visible { outline:none; }
.faq-cta { transition:border-color var(--micro),transform 320ms var(--ease); }
.faq-cta::before { content:''; flex:none; width:5px; height:5px; margin-left:-13px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity var(--micro),transform 320ms var(--ease); }
.faq-ask:is(:hover,:has(.faq-cta:focus-visible)) .faq-cta::before { opacity:1; transform:none; }
.faq-ask:is(:hover,:has(.faq-cta:focus-visible)) .faq-cta { transform:translateX(12px); }
.faq-ask:has(.faq-cta:focus-visible) { outline:var(--border-focus) solid var(--focus); outline-offset:-2px; }
@media(hover:hover) and (pointer:fine) {
 .faq-ask:hover .faq-cta { border-color:var(--ink); }
}

/* ── The answer ─────────────────────────────────────────────────────────────────────────────── */
.faq-body { container:faqbody / inline-size; }
.faq-num { display:none; }
.faq-text { position:relative; margin:0; max-width:62ch; font-size:16px; line-height:1.6; color:var(--body); }
/* the key phrase: the text's own colour, a Saffron line under it */
.faq-key { padding-bottom:2px; background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 2px no-repeat; color:inherit; }
.faq-text.is-keyless .faq-key { background-size:0 2px; }
.faq-key-bar { position:absolute; height:2px; background:var(--accent); transform-origin:left; pointer-events:none; }
.faq-line { display:block; white-space:nowrap; }

/* the moving parts of the wide layout: hidden until the script and the width call them */
.faq-stage,.faq-bar,.faq-hover,.faq-signal { display:none; }

/* ── Wide (≥1180): the list on the left (42 %), the stage on the right (58 %) ───────────────
   The stage runs from the top of the eyebrow to the bottom of the list, so its height never
   depends on the chosen answer. The open answer stands in it, absolutely placed. */
@media(min-width:1180px) {
 .faq-grid { --lc:calc((100% - var(--g)) * .42); --sx:calc(var(--lc) + var(--g)); }
 .faq-head,.faq-list { width:var(--lc); }
 .faq-stage { display:block; position:absolute; z-index:0; top:0; bottom:0; left:var(--sx); right:0; border:1px solid var(--line); border-radius:20px; background:var(--paper); }
 .faq-stage::after { content:''; position:absolute; inset:-1px; border:1px solid var(--accent); border-radius:21px; opacity:0; pointer-events:none; }
 .faq-item[open] > .faq-answer,.faq.is-armed .faq-answer { position:absolute; z-index:1; top:1px; bottom:1px; left:calc(var(--sx) + 1px); right:1px; }
 .faq-body { --ill-h:clamp(226px,18.2vw,272px); display:flex; flex-direction:column; height:100%; padding:clamp(28px,2.6vw,44px); }
 .faq-num { display:block; flex:none; height:1em; overflow:hidden; font-size:clamp(44px,3.4vw,56px); font-weight:300; line-height:1; letter-spacing:-.03em;
   color:var(--muted); font-variant-numeric:tabular-nums; }
 .faq-num > span { display:block; }
 .faq-text { flex:none; margin:clamp(14px,1.3vw,20px) 0 24px; max-width:58ch; font-size:clamp(17px,1.2vw,18px); }
 .fq-ill { flex:none; margin-block:auto; }
 /* without the script: the open question's line to the stage, standing still */
 .faq:not(.is-armed) .faq-item[open] > .faq-summary::after { content:''; position:absolute; left:100%; top:50%; width:var(--g); height:1px; background:#f4b00073; }
 /* with it: one mark, one hover light and one signal line, moved between the rows */
 .faq.is-armed .faq-answer { visibility:hidden; }
 .faq.is-armed .faq-item:is(.is-open,.is-leaving) > .faq-answer { visibility:visible; }
 .faq.is-armed .faq-summary::before { display:none; }
 .faq.is-armed :is(.faq-bar,.faq-hover,.faq-signal) { display:block; position:absolute; left:0; top:0; pointer-events:none; }
 .faq-bar { z-index:2; width:2px; height:100px; background:var(--accent); transform-origin:0 0;
   transform:translateY(var(--y,0px)) scaleY(var(--k,0)); transition:transform 360ms var(--ease); }
 .faq-hover { z-index:-1; width:var(--lc); height:100px; border-radius:10px / var(--r,10px); background:var(--paper); opacity:0; transform-origin:0 0;
   transform:translateY(var(--y,0px)) scaleY(var(--k,.5)); transition:transform 280ms var(--ease),opacity 200ms ease; }
 .faq-hover.is-on { opacity:1; }
 .faq.is-armed .faq-signal { z-index:2; left:var(--lc); width:var(--g); height:1px; transform:translateY(var(--y,0px)); }
 .faq-signal::before { content:''; position:absolute; inset:0; background:var(--accent); opacity:.45; transform-origin:left; }
 .faq-comet { position:absolute; left:0; top:-3.5px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--accent);
   box-shadow:0 0 0 3px #f4b00038,0 0 14px 3px #f4b0005c; opacity:0; }
}

/* ── Narrow (<1180): an accordion, one answer always open, its picture under it ─────────────── */
@media(max-width:1179px) {
 .faq-list { margin-top:clamp(26px,3.6vw,38px); }
 /* the answer's spacing is inside the body (a margin), so a closed answer is truly 0 px high */
 .faq-body { --ill-h:244px; padding:0 18px 0 60px; }
 .fq-ill { margin:20px 0 clamp(24px,3vw,32px); max-width:640px; }
 /* with the script the height opens and closes (≤ 300 ms); the text stays in one place */
 .faq.is-armed .faq-answer { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 300ms var(--ease),visibility 0s linear 300ms; }
 .faq.is-armed .faq-item.is-open > .faq-answer { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows 300ms var(--ease),visibility 0s; }
 .faq.is-armed .faq-body { min-height:0; overflow:hidden; }
}
/* without the script, where the browser can: the native accordion opens smoothly too */
@supports (interpolate-size:allow-keywords) and selector(::details-content) {
 @media(max-width:1179px) and (prefers-reduced-motion:no-preference) {
  .faq:not(.is-armed) { interpolate-size:allow-keywords; }
  .faq:not(.is-armed) .faq-item::details-content { height:0; overflow:clip; transition:height 300ms var(--ease),content-visibility 300ms allow-discrete; }
  .faq:not(.is-armed) .faq-item[open]::details-content { height:auto; }
 }
}
@media(max-width:1080px) {
 .faq > .container { width:calc(100% - 72px); }
 .faq-lede { max-width:60ch; }
}
@media(max-width:680px) {
 .faq { padding:64px 0 56px; }
 .faq > .container { width:calc(100% - 40px); }
 .faq h2 { margin-top:18px; }
 .faq-lede { margin-top:14px; font-size:15.5px; }
 .faq-summary { grid-template-columns:22px minmax(0,1fr); column-gap:12px; min-height:56px; padding:14px 6px 14px 14px; }
 .faq-question { font-size:16px; }
 .faq-body { padding:0 4px 0 14px; }
 .faq-text { font-size:15.5px; line-height:1.58; }
 .fq-ill { margin:18px 0 24px; }
 .faq-ask { grid-template-columns:22px minmax(0,1fr); column-gap:12px; row-gap:8px; padding:16px 6px 16px 14px; }
 .faq-ask p { font-size:14.5px; }
 .faq-cta { grid-column:2; justify-self:start; font-size:14.5px; }
}

/* ── The illustrations: shared parts ───────────────────────────────────────────────────────── */
.fq-ill { position:relative; height:var(--ill-h); font-size:13px; line-height:1.3; color:var(--ink); }
.fq-card { background:var(--white); border-radius:14px; box-shadow:0 0 0 1px #11131517,0 1px 2px #1113150a,0 14px 30px -20px #11131547; }
.fq-skel { display:block; height:6px; border-radius:3px; background:#11131514; transform-origin:left; }
.fq-note { margin:0; font-size:12.5px; line-height:1.4; color:var(--muted); }
.fq-ok { display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; background:var(--accent); color:var(--ink);
  font:700 12px/1 Inter,Arial,sans-serif; font-style:normal; }
.fq-ill .icon { width:15px; height:15px; flex:none; }
.fq-wire-box { position:relative; min-width:0; }
.fq-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.fq-wires path { fill:none; stroke:#11131540; stroke-width:1; stroke-linecap:round; }
.fq-comets { position:absolute; inset:0; pointer-events:none; }
.fq-comet { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,var(--accent) 0 2.6px,#f4b00070 3.4px,#f4b00000 6px); }

/* 01 · Price: two steps on one scale (0 to the scale's top, marks at the ends of the ranges) */
.fq-price,.fq-plan { display:flex; align-items:center; }
.fq-price-card { width:100%; max-width:620px; padding:22px 24px 18px; }
.fq-plot { --s:calc(100% - 112px); --l1:8px; --l2:68px; position:relative; height:150px; }
.fq-guide { position:absolute; left:calc(var(--s) * var(--x)); top:0; bottom:18px; width:1px; background:#1113150f; }
.fq-lane { position:absolute; left:0; right:0; top:var(--l1); height:40px; }
.fq-lane--system { top:var(--l2); }
.fq-bar { position:absolute; left:calc(var(--s) * var(--a)); top:15px; width:calc(var(--s) * (var(--b) - var(--a))); height:10px; border-radius:5px;
  background:#111315d9; transform-origin:left; }
/* the step's name and range stand to the right of its bar */
.fq-label { position:absolute; left:calc(var(--s) * var(--b) + 14px); top:2px; display:grid; white-space:nowrap; }
.fq-lane-name { font-size:12.5px; line-height:16px; color:var(--muted); }
.fq-range { font-size:15px; font-weight:550; line-height:20px; letter-spacing:-.012em; }
/* the step between them: a dashed line at the shared end, a Saffron point on it */
.fq-join { position:absolute; left:calc(var(--s) * var(--join)); top:calc(var(--l1) + 20px); height:calc(var(--l2) - var(--l1)); width:1px; margin-left:-.5px;
  background:repeating-linear-gradient(#11131573 0 3px,#11131500 3px 6px); transform-origin:top; }
.fq-dot { position:absolute; left:calc(var(--s) * var(--join)); top:calc((var(--l1) + var(--l2)) / 2 + 20px); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px #f4b0002e; }
.fq-axis { position:absolute; left:0; bottom:18px; width:var(--s); height:1px; background:#11131538; transform-origin:left; }
.fq-tick { position:absolute; left:calc(var(--s) * var(--x)); bottom:12px; width:1px; height:6px; margin-left:-.5px; background:#11131566; }
.fq-price .fq-note { margin-top:10px; }

/* 02 · Timeline: a document in writing, milestones and no dates */
.fq-plan-card { position:relative; display:flex; flex-direction:column; width:100%; max-width:620px; padding:26px 28px 22px; }
.fq-plan-card > .fq-skel { width:56%; }
.fq-plan-card > .fq-skel + .fq-skel { margin-top:11px; }
.fq-plan-card > .fq-skel--title { width:32%; height:9px; border-radius:5px; background:#11131526; }
.fq-plan-card > .fq-skel--short { width:40%; }
.fq-stamp { position:absolute; right:26px; top:24px; padding:8px 13px 7px; border:1px solid var(--ink); border-radius:6px; box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 3px #11131533;
  font-size:12px; font-weight:600; line-height:1.2; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; color:var(--ink); rotate:-4deg; }
.fq-track { position:relative; margin-top:52px; height:44px; }
.fq-track-line { position:absolute; left:7px; right:7px; top:6.25px; height:1.5px; background:#11131547; transform-origin:left; }
.fq-node { position:absolute; top:0; left:calc(7px + (100% - 14px) * var(--k) / 3); width:0; }
.fq-node-dot { position:absolute; left:-7px; top:0; width:14px; height:14px; border-radius:50%; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--ink); }
.fq-node:nth-of-type(1) .fq-node-dot { background:var(--accent); box-shadow:0 0 0 5px #f4b00029; }
.fq-node:nth-of-type(4) .fq-node-dot { background:var(--ink); }
.fq-node-name { position:absolute; top:26px; left:0; translate:-50% 0; font-size:13px; white-space:nowrap; color:var(--body); }
.fq-node:nth-of-type(1) .fq-node-name { left:-7px; translate:none; font-weight:550; color:var(--ink); }
.fq-node:nth-of-type(4) .fq-node-name { left:auto; right:-7px; translate:none; }

/* 03 · «No.»: you tell, and the brief is written together */
.fq-talk { display:flex; align-items:center; gap:clamp(16px,2.2cqw,26px); max-width:620px; }
.fq-no { flex:none; margin:0 4px 0 0; font-size:clamp(56px,10cqw,72px); font-weight:500; line-height:1; letter-spacing:-.05em; color:var(--ink); }
.fq-no-dot { display:inline-block; color:var(--accent); }
.fq-bubble { display:grid; gap:10px; flex:1 1 190px; max-width:224px; padding:13px 16px 17px; border-radius:16px 16px 16px 5px; background:var(--white);
  box-shadow:0 0 0 1px #11131517,0 1px 2px #1113150a,0 14px 30px -20px #11131547; transform-origin:0 100%; }
.fq-who { display:inline-flex; align-items:center; gap:6px; justify-self:start; height:24px; padding:0 10px 0 4px; border-radius:var(--radius-pill); background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line); font-size:12px; font-weight:550; }
.fq-who .icon { width:16px; height:16px; padding:2px; border-radius:50%; background:var(--white); }
.fq-bubble .fq-skel + .fq-skel { width:62%; }
.fq-brief { display:grid; gap:13px; flex:0 0 170px; padding:18px 18px 20px; }
.fq-brief-title { font-size:13px; font-weight:550; line-height:1.3; }
.fq-brief-row { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; column-gap:9px; row-gap:6px; }
.fq-brief-dot { grid-row:1 / span 2; align-self:start; width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #11131540; }
.fq-brief-row .fq-skel { margin-top:4px; }
.fq-brief-row .fq-skel + .fq-skel { grid-column:2; width:58%; margin-top:0; background:#1113150d; }
.fq-brief-row:nth-of-type(2) .fq-skel:first-of-type { width:84%; }

/* 04 · Your services, connected to your system */
.fq-link { display:grid; grid-template-columns:auto minmax(44px,1fr) auto; grid-template-rows:minmax(0,1fr) auto; row-gap:12px; max-width:620px; }
.fq-chips { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.fq-chips li { display:flex; align-items:center; }
.fq-chip { display:flex; align-items:center; gap:8px; width:100%; height:34px; padding:0 8px 0 10px; border-radius:10px; background:var(--white);
  box-shadow:0 0 0 1px #11131517,0 1px 2px #1113150a,0 8px 18px -14px #11131540; font-size:13px; font-weight:500; white-space:nowrap; }
.fq-chip .icon { color:var(--muted); }
.fq-chip-name { margin-right:14px; }
.fq-chip .fq-ok { margin-left:auto; }
.fq-link .fq-wire-box { grid-row:1; grid-column:2; }
.fq-hub { position:relative; grid-row:1; grid-column:3; align-self:center; display:flex; align-items:center; gap:10px; padding:14px 18px 14px 14px; border-radius:14px;
  background:var(--white); box-shadow:0 0 0 1px #11131517,0 1px 2px #1113150a,0 16px 32px -18px #11131559; }
.fq-hub-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#f4b00024; color:var(--ink); }
.fq-hub-icon .icon { width:18px; height:18px; }
.fq-hub strong { font-size:14px; font-weight:550; white-space:nowrap; }
.fq-hub-ring { position:absolute; inset:-1px; border:1px solid var(--accent); border-radius:15px; opacity:0; pointer-events:none; }
.fq-link .fq-note { grid-column:1 / -1; }

/* 05 · Everything in your name: four tiles, a key and a tag on each */
.fq-keys { display:flex; flex-direction:column; justify-content:center; gap:14px; max-width:620px; }
.fq-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.fq-tiles li { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; min-height:132px; padding:14px 13px 13px; }
.fq-key { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.fq-key .icon { width:17px; height:17px; transform-origin:33% 65%; }
.fq-tile-name { font-size:13.5px; font-weight:550; line-height:1.3; }
.fq-tag { display:inline-flex; align-items:center; gap:6px; margin-top:auto; flex:none; height:24px; padding:0 9px 0 8px; border-radius:var(--radius-pill); background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line); font-size:12px; font-weight:550; white-space:nowrap; }
.fq-tag i { width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* 06 · After launch: three ways on from the live site */
.fq-after { display:grid; grid-template-columns:auto minmax(44px,1fr) minmax(0,276px); max-width:620px; }
.fq-root { display:flex; align-items:center; }
.fq-live { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 13px 0 11px; border-radius:var(--radius-pill); background:var(--ink); color:var(--on-dark);
  font-size:12.5px; font-weight:550; white-space:nowrap; box-shadow:0 10px 22px -14px #111315b3; }
.fq-live-dot { position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.fq-live-ring { position:absolute; inset:0; border-radius:50%; background:var(--accent); opacity:0; }
.fq-ways { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.fq-ways li { align-self:center; display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; }
.fq-way-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.fq-way-text { display:grid; gap:2px; min-width:0; }
.fq-way-text strong { font-size:13.5px; font-weight:550; line-height:1.3; }
.fq-way-text span { font-size:12.5px; line-height:1.3; color:var(--muted); }

/* a narrower stage (1180–1439): the tiles two by two */
@container faqbody (width < 600px) {
 .fq-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; }
 .fq-tiles li { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 11px; min-height:0; padding:11px 12px; }
 .fq-tag { grid-column:1 / -1; justify-self:start; margin-top:0; }
}

/* ── A phone: the same pictures, compact (≈ 180–200 px) ───────────────────────────────────── */
@container faqbody (width < 500px) {
 .fq-ill { height:auto; }
 .fq-price-card { padding:16px 16px 13px; }
 .fq-plot { --s:calc(100% - 100px); --l1:2px; --l2:52px; height:122px; }
 .fq-guide { bottom:16px; }
 .fq-bar { top:16px; height:8px; border-radius:4px; }
 .fq-label { left:calc(var(--s) * var(--b) + 10px); top:1px; }
 .fq-lane-name { font-size:12px; }
 .fq-range { font-size:13.5px; line-height:19px; }
 .fq-dot { width:9px; height:9px; margin:-4.5px 0 0 -4.5px; box-shadow:0 0 0 3px #f4b0002e; }
 .fq-axis { bottom:16px; }
 .fq-tick { bottom:10px; }
 .fq-price .fq-note { margin-top:8px; font-size:12px; }

 .fq-plan-card { padding:18px 18px 16px; }
 .fq-plan-card > .fq-skel { width:50%; }
 .fq-plan-card > .fq-skel--title { width:36%; }
 .fq-plan-card > .fq-skel--short { width:34%; }
 .fq-stamp { right:16px; top:18px; padding:6px 10px 5px; letter-spacing:.14em; }
 .fq-track { margin-top:22px; height:74px; }
 .fq-track-line,.fq-node { top:24px; }
 .fq-node-name { font-size:12px; }
 :is(.fq-node:nth-of-type(2),.fq-node:nth-of-type(3)) .fq-node-name { top:-22px; }

 .fq-talk { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; row-gap:12px; column-gap:16px; align-items:center; }
 .fq-no { grid-row:1 / -1; font-size:56px; }
 .fq-bubble { max-width:none; padding:9px 12px 12px; gap:8px; }
 .fq-brief { gap:9px; padding:11px 14px 13px; }
 .fq-brief-row { grid-template-columns:10px minmax(0,1fr); column-gap:8px; }
 .fq-brief-dot { grid-row:auto; align-self:center; width:10px; height:10px; }
 .fq-brief-row .fq-skel { margin-top:0; }
 .fq-brief-row .fq-skel + .fq-skel { display:none; }

 .fq-link { height:182px; grid-template-columns:auto minmax(28px,1fr) auto; row-gap:8px; }
 .fq-chip { height:28px; gap:6px; padding:0 6px 0 8px; font-size:12px; border-radius:8px; }
 .fq-chip .icon { width:13px; height:13px; }
 .fq-chip-name { margin-right:10px; }
 .fq-ok { width:16px; height:16px; }
 .fq-hub { flex-direction:column; gap:6px; padding:10px 12px; text-align:center; }
 .fq-hub-icon { width:28px; height:28px; border-radius:8px; }
 .fq-hub-icon .icon { width:15px; height:15px; }
 .fq-hub strong { font-size:13px; }
 .fq-link .fq-note { font-size:12px; }

 .fq-keys { gap:10px; }
 .fq-tiles { gap:8px; }
 .fq-tiles li { gap:7px 9px; min-height:0; padding:9px 10px 10px; border-radius:12px; }
 .fq-key { width:28px; height:28px; border-radius:8px; }
 .fq-key .icon { width:15px; height:15px; }
 .fq-tile-name { font-size:12.5px; line-height:1.25; }
 .fq-tag { height:22px; padding:0 8px 0 7px; }
 .fq-keys .fq-note { font-size:12px; }

 .fq-after { height:176px; grid-template-columns:auto minmax(26px,1fr) minmax(0,210px); }
 .fq-live { gap:6px; height:26px; padding:0 10px 0 9px; font-size:12px; }
 .fq-ways li { gap:9px; padding:8px 10px; border-radius:12px; }
 .fq-way-icon { width:26px; height:26px; border-radius:8px; }
 .fq-way-icon .icon { width:14px; height:14px; }
 .fq-way-text strong { font-size:12.5px; }
 .fq-way-text span { font-size:12px; }
}
@container faqbody (width < 300px) {
 .fq-way-icon { display:none; }
}

/* ── Entrance, once (the script's is-armed/is-in; nothing is hidden without the script) ────── */
@media(prefers-reduced-motion:no-preference) {
 .faq.is-armed:not(.is-in) .accent-rule { transform:scaleX(0); }
 .faq.is-armed:not(.is-in) :is(.eyebrow,h2 > span,.faq-lede,.faq-summary,.faq-ask,.faq-stage,.faq-bar,.faq-signal) { opacity:0; }
 .faq.is-waiting .faq-item.is-open .faq-body > *,.faq.is-waiting :is(.faq-bar,.faq-signal) { opacity:0; }
 .faq.is-entering .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .faq.is-entering .eyebrow { animation:enter 540ms var(--ease) 60ms backwards; }
 .faq.is-entering h2 > span { animation:line-reveal 640ms var(--ease) 140ms backwards; }
 .faq.is-entering h2 > span + span { animation-delay:220ms; }
 .faq.is-entering .faq-lede { animation:enter 560ms var(--ease) 300ms backwards; }
 .faq.is-entering .faq-summary { animation:enter 480ms var(--ease) backwards; animation-delay:calc(250ms + var(--k) * 50ms); }
 .faq.is-entering .faq-ask { animation:enter 480ms var(--ease) 550ms backwards; }
 .faq.is-entering .faq-stage { animation:enter 560ms var(--ease) 450ms backwards; }
}

@media(prefers-reduced-motion:reduce) {
 .faq *,.faq *::before,.faq *::after { animation:none!important; transition:none!important; }
 .faq-hover,.faq-comet,.fq-comet { display:none!important; }
}