/* aiCarousels marketing site: the shared foundation (tokens, type, buttons, header,
   mega menu, footer, slides, prints) plus the shared blocks (FAQ, pre-footer CTA).
   Copied from landing/aicarousels-landing-v3.html (the source of truth for the look).
   15 Oct 2026, handoff: the final CTA's field fits the panel at 320 px (12-final, phones); chrome.css regenerated.
   15 Oct 2026, header under 360 px: tighter logo, gaps and "Try free", so es, de, pt and fr fit on one line; chrome.css regenerated. */
:root {
  --grain: url("data:image/avif;base64,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");
}
/* ==========================================================================
   aiCarousels landing (test mockup, v2) · shared foundation
   Colours, type and controls come from the app (final/ui/css/tokens.css) and
   Fernando's reference drafts (lavender page, aubergine ink). Typography and
   the menu follow the ElevenLabs marketing audit (light display headings,
   Inter body, morphing mega menu). No background grid.
   Every section uses ONLY these tokens and components.
   ========================================================================== */

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* page surfaces (reference drafts) */
  --page: #fbfaff;
  --page-2: #f5f3fa;      /* alternate section */
  --page-3: #eeebf6;      /* stage panels, rails */
  --card: #ffffff;

  /* ink: aubergine, never pure black */
  --ink: #1f1a2e;        /* deep aubergine; buttons and text. Never black */
  --ink-2: #322a45;
  --text: #1f1a2e;
  --text-soft: #3e3949;
  --muted: #6f6a7b;
  --subtle: #9c97a7;
  --line: rgb(31 26 46 / .08);
  --line-2: rgb(31 26 46 / .13);
  --line-3: rgb(31 26 46 / .2);
  --hover: rgb(31 26 46 / .045);
  --press: rgb(31 26 46 / .08);

  /* brand violet (the app logo) + its family, for AI moments and selection */
  --violet: #7f56d9;
  --violet-ink: #5a36b8;
  --violet-soft: #f1ecfc;
  --violet-line: #d9cbf7;
  --marker: #ddd0fa;

  /* the one dark surface (the feed story), aubergine like the drafts */
  --night: #1e1631;      /* deep plum, clearly purple (no black anywhere) */
  --night-2: #281e40;
  --night-3: #33284f;
  --night-line: rgb(255 255 255 / .09);
  --night-text: #f4f1fa;
  --night-muted: rgb(244 241 250 / .6);

  --success: #3f8a55;
  --warning: #c9831f;

  /* radius (app tokens) */
  --r-chip: 8px;
  --r-ctl: 10px;
  --r-input: 12px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-stage: 24px;
  --r-pill: 999px;

  /* elevation (app tokens) */
  --shadow-chip: 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .06);
  --shadow-tile: 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .06), 0 6px 6px -3px rgb(24 21 31 / .06), 0 12px 12px -6px rgb(24 21 31 / .02);
  --shadow-popover: 0 0 0 1px rgb(24 21 31 / .06), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px 0 rgb(24 21 31 / .06), 0 6px 6px 0 rgb(24 21 31 / .06), 0 12px 12px 0 rgb(24 21 31 / .04), 0 24px 24px 0 rgb(24 21 31 / .04);
  --shadow-float: 0 0 0 1px rgb(24 21 31 / .05), 0 1px 1px -.5px rgb(24 21 31 / .06), 0 3px 3px -1.5px rgb(24 21 31 / .06), 0 6px 6px -3px rgb(24 21 31 / .06), 0 12px 12px -6px rgb(24 21 31 / .04), 0 24px 24px -12px rgb(24 21 31 / .04), 0 48px 48px -24px rgb(24 21 31 / .03);
  --shadow-slide: 0 0 0 1px rgb(24 21 31 / .05), 0 1px 2px rgb(24 21 31 / .05), 0 10px 28px -10px rgb(40 24 70 / .22);
  --shadow-btn: 0 0 1px rgb(24 21 31 / .4), 0 1px 1px rgb(24 21 31 / .04), 0 2px 4px rgb(24 21 31 / .05);

  /* motion (app tokens) */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --d-fast: 120ms;
  --d-menu: 180ms;
  --d-morph: 320ms;

  /* layout */
  --wrap: 1240px;
  --gutter: 20px;
  --header-h: 68px;
  --section-y: clamp(88px, 10vw, 136px);
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 16px/1.5 var(--font); letter-spacing: .005em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--marker); color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; transition: top var(--d-fast); }
.skip:focus { top: 12px; }

/* ---- icons ---------------------------------------------------------------- */
.ic { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ic-14 { width: 14px; height: 14px; } .ic-16 { width: 16px; height: 16px; } .ic-18 { width: 18px; height: 18px; }
.ic-24 { width: 24px; height: 24px; } .ic-28 { width: 28px; height: 28px; } .ic-32 { width: 32px; height: 32px; }
.ic-violet { color: var(--violet); }

/* ---- layout --------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.section.tint { background: var(--page-2); }
.section.night { background: radial-gradient(70% 60% at 85% 10%, rgb(127 86 217 / .28), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgb(127 86 217 / .16), transparent 70%), var(--night); color: var(--night-text); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- type (ElevenLabs scale, set in Inter) ------------------------------- */
.t-hero { font-size: clamp(3.25rem, 1.6rem + 5.4vw, 6rem); line-height: .98; font-weight: 300; letter-spacing: -.045em; text-wrap: balance; }
.t-h2 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.04; font-weight: 300; letter-spacing: -.036em; text-wrap: balance; }
.t-h3 { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.22; font-weight: 400; letter-spacing: -.02em; }
.t-h4 { font-size: 1.125rem; line-height: 1.35; font-weight: 500; letter-spacing: -.012em; }
.t-display-num { font-size: clamp(4rem, 2.5rem + 5vw, 6.5rem); line-height: .9; font-weight: 300; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.t-lead { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; color: var(--muted); letter-spacing: .002em; text-wrap: pretty; }
.t-body { font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.t-small { font-size: .875rem; line-height: 1.45; color: var(--muted); }
.t-micro { font-size: .75rem; line-height: 1.35; color: var(--muted); letter-spacing: .01em; }
.eyebrow { display: inline-flex; align-items: flex-start; gap: 8px; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--muted); letter-spacing: .005em; }
/* the marker is the sparkle from the logo */
.eyebrow::before { content: ""; width: 11px; height: 11px; margin-top: calc((1.45em - 11px) / 2); flex: none; background: var(--violet); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }
:root { --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 5.7 3.3 8.9 12 12-8.7 3.1-11.4 6.3-12 12-.6-5.7-3.3-8.9-12-12C8.7 8.9 11.4 5.7 12 0z'/%3E%3C/svg%3E"); }
.night .eyebrow::before, .on-night .eyebrow::before { background: #b9a2f0; }
.night .eyebrow, .on-night .eyebrow { color: var(--night-muted); }
.night .t-lead, .night .t-body, .night .t-small, .night .t-micro { color: var(--night-muted); }
.muted { color: var(--muted); }
.mark { background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 90%, transparent 90%); padding-inline: .04em; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); transition: color var(--d-fast) var(--ease); }
.link:hover { color: var(--muted); }
.link .ic { width: 16px; height: 16px; transition: transform var(--d-menu) var(--ease-out); }
.link:hover .ic { transform: translateX(2px); }
.night .link { color: var(--night-text); } .night .link:hover { color: var(--night-muted); }

/* section intro: ElevenLabs split (eyebrow + H2 left, lead right) */
.head { display: grid; gap: 20px 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.head > div { display: grid; gap: 18px; justify-items: start; }
.head .t-lead { max-width: 46ch; }
@media (min-width: 960px) {
  .head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .head .t-lead { justify-self: end; padding-bottom: .4em; }
}
.head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.head.center > div { justify-items: center; }
.head.center .t-lead { justify-self: center; max-width: 52ch; padding-bottom: 0; }

/* ---- buttons (squarish like the app, ElevenLabs sizes, app ink) ------------ */
.btn {
  --h: 44px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border-radius: 12px;
  font-size: .9375rem; line-height: 1; font-weight: 500; letter-spacing: -.003em; white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 16px; height: 16px; }
.btn .ic-arrow { transition: transform var(--d-menu) var(--ease-out); }
.btn:hover .ic-arrow { transform: translateX(2px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); }
.btn-secondary { background: var(--card); color: var(--ink); box-shadow: var(--shadow-btn); }
.btn-secondary:hover { background: #faf9fd; box-shadow: 0 0 1px rgb(24 21 31 / .5), 0 1px 1px rgb(24 21 31 / .05), 0 3px 6px rgb(24 21 31 / .07); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }
.btn-violet { background: var(--violet); color: #fff; }
.btn-violet:hover { background: var(--violet-ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #ece8f5; }
.btn-sm { --h: 36px; padding: 0 14px; font-size: .875rem; gap: 6px; border-radius: 10px; }
.btn-xs { --h: 30px; padding: 0 11px; font-size: .8125rem; gap: 5px; border-radius: 8px; }
.btn-lg { --h: 52px; padding: 0 24px; font-size: 1rem; border-radius: 14px; }
.btn-icon { width: var(--h); padding: 0; }
.btn[disabled], .btn.is-disabled { background: #d9d6e0; color: #f4f2f8; box-shadow: none; pointer-events: none; }
.night .btn-secondary { background: rgb(255 255 255 / .06); color: var(--night-text); box-shadow: inset 0 0 0 1px var(--night-line); }
.night .btn-secondary:hover { background: rgb(255 255 255 / .1); }
.night .btn-primary { background: #fff; color: var(--ink); }
.night .btn-primary:hover { background: #ece8f5; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reassure { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--muted); }
.reassure .ic { width: 15px; height: 15px; color: var(--violet); }

/* round arrow buttons (carousels, sliders) */
.round { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: var(--shadow-btn); transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), opacity var(--d-fast); }
.round:hover { background: var(--ink); color: #fff; }
.round .ic { width: 16px; height: 16px; }
.round[disabled] { opacity: .4; pointer-events: none; }
.night .round { background: rgb(255 255 255 / .06); color: var(--night-text); box-shadow: inset 0 0 0 1px var(--night-line); }
.night .round:hover { background: #fff; color: var(--ink); }

/* ---- chips, segmented controls, badges ------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--text-soft); white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.chip:hover { background: var(--hover); color: var(--ink); }
.chip[aria-pressed="true"], .chip.on, .chip[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-btn); }
.chip .ic { width: 16px; height: 16px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.chip-outline { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card); }
.chip-outline:hover { box-shadow: inset 0 0 0 1px var(--line-3); background: var(--card); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.night .chip { color: var(--night-muted); }
.night .chip:hover { background: rgb(255 255 255 / .06); color: var(--night-text); }
.night .chip[aria-pressed="true"], .night .chip.on, .night .chip[aria-selected="true"] { background: rgb(255 255 255 / .1); color: var(--night-text); box-shadow: inset 0 0 0 1px var(--night-line); }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--page-3); }
.seg > button, .seg > a { height: 32px; padding: 0 14px; border-radius: 9px; font-size: .875rem; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); white-space: nowrap; }
.seg > button:hover { color: var(--ink); }
.seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > .on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(24 21 31 / .1), 0 0 0 1px rgb(24 21 31 / .04); }
.seg .ic { width: 16px; height: 16px; }
.seg-sm { border-radius: 10px; }
.seg-sm > button { height: 26px; padding: 0 10px; font-size: .8125rem; border-radius: 7px; }

.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; background: var(--page-3); color: var(--text-soft); white-space: nowrap; }
.badge-violet { background: var(--violet-soft); color: var(--violet-ink); }
.badge-ink { background: var(--ink); color: #fff; }
.badge-new { background: var(--violet); color: #fff; }
.badge .ic { width: 11px; height: 11px; }

/* ---- surfaces -------------------------------------------------------------- */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-tile); }
.panel { background: var(--card); border-radius: var(--r-stage); box-shadow: var(--shadow-float); overflow: hidden; }
.stage { position: relative; border-radius: var(--r-stage); background: var(--page-3); overflow: hidden; isolation: isolate; }
/* soft brand aura (the only decorative colour on the page; no grid) */
.aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 55% at 22% 30%, rgb(214 196 250 / .55), transparent 70%),
  radial-gradient(38% 48% at 78% 65%, rgb(250 214 196 / .45), transparent 70%),
  radial-gradient(45% 60% at 55% 0%, rgb(255 255 255 / .9), transparent 70%); filter: saturate(1.05); }

/* app window chrome: what the real editor looks like (white, hairlines, Inter 13–14) */
.app {
  --app-line: rgb(24 21 31 / .08);
  background: var(--card); border-radius: var(--r-stage); box-shadow: var(--shadow-float); overflow: hidden;
  font-size: 13px; line-height: 1.4; color: var(--ink); letter-spacing: 0;
}
.app-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--app-line); background: var(--card); }
.app-bar .crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; white-space: nowrap; }
.app-bar .crumb b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.app-bar .grow { flex: 1; }
.app-logo { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.app-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--app-line); background: var(--card); font-weight: 500; white-space: nowrap; color: var(--ink); }
.app-pill .ic { width: 15px; height: 15px; }
.app-pill.dark { background: var(--ink); color: #fff; box-shadow: none; }
.app-canvas { background: #f4f3f7; }
.app-side { background: var(--card); border-inline-start: 1px solid var(--app-line); }
.app-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.app-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--app-line); background: var(--card); font-size: 13px; }
.app-row .k { color: var(--muted); }
.app-row .v { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.app-row .ic { width: 14px; height: 14px; color: var(--subtle); }
.ask-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 8px;padding-inline: 8px 6px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-popover); }
.ask-bar .scope { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--page-2); font-weight: 500; white-space: nowrap; }
.ask-bar .scope .ic { width: 15px; height: 15px; color: var(--violet); }
.ask-bar .q { flex: 1; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-bar .send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; flex: none; }
.ask-bar .send .ic { width: 15px; height: 15px; }

/* ---- the logo (the app's: violet tile, three slides, sparkle) -------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 4px; margin-inline-start: -4px; border-radius: 10px; color: var(--ink); }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .wm { font-size: 18px; line-height: 1; font-weight: 600; letter-spacing: -.025em; }

/* ---- header + mega menu (ElevenLabs behaviour) ----------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); transition: transform .3s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--page) 84%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.hdr { height: 100%; display: flex; align-items: center; gap: 16px; }
.hdr-nav { display: none; align-items: center; gap: 2px; margin-inline-start: 8px; }
.hdr-nav > a, .hdr-nav > button {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--text-soft); white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.hdr-nav > a:hover, .hdr-nav > button:hover, .hdr-nav > button[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.hdr-nav .ic { width: 12px; height: 12px; opacity: .55; transition: transform var(--d-menu) var(--ease); }
.hdr-nav > button[aria-expanded="true"] .ic { transform: rotate(180deg); }
.hdr-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.hdr-login { display: none; }
.hdr-burger { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); }
.hdr-burger:hover { background: var(--hover); }
.hdr-burger i { position: relative; width: 18px; height: 10px; }
.hdr-burger i::before, .hdr-burger i::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.hdr-burger i::before { top: 0; } .hdr-burger i::after { top: 8.5px; }
.menu-open .hdr-burger i::before { top: 4.25px; transform: rotate(45deg); }
.menu-open .hdr-burger i::after { top: 4.25px; transform: rotate(-45deg); }
@media (min-width: 1080px) {
  .hdr-nav { display: flex; }
  .hdr-login { display: inline-flex; }
  .hdr-burger { display: none; }
}
@media (max-width: 1079px) { .hdr-cta-long { display: none; } }
@media (min-width: 1080px) { .hdr-cta-short { display: none; } }
/* under 360 px: a little tighter, so the longest "Try free" (es, de, pt, fr) fits beside the logo on one line */
@media (max-width: 359px) {
  .hdr { gap: 8px; }
  .hdr .brand { gap: 8px; }
  .hdr .brand svg { width: 26px; height: 26px; }
  .hdr .brand .wm { font-size: 16px; }
  .hdr-end { gap: 4px; }
  .hdr-end .btn-sm { padding-inline: 10px; font-size: .8125rem; }
  .hdr-burger { width: 36px; }
}

/* the one panel that morphs between menus */
.mm { position: absolute; top: calc(var(--header-h) - 6px); inset-inline-start: 0; width: 0; height: 0; z-index: 70;
  border-radius: var(--r-stage); background: var(--card); box-shadow: var(--shadow-float), 0 30px 60px -20px rgb(40 24 70 / .18);
  overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top center;
  transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s; }
.mm.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .3s var(--ease-out), width var(--d-morph) var(--ease-out), height var(--d-morph) var(--ease-out), left var(--d-morph) var(--ease-out), visibility 0s; }
.mm-panel { position: absolute; top: 0; inset-inline-start: 0; width: max-content; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 288px auto; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .28s var(--ease-out); }
.mm-panel.is-active { opacity: 1; pointer-events: auto; transform: none; }
.mm-panel.from-right { transform: translateX(14px); } .mm-panel.from-left { transform: translateX(-14px); }
.mm-lead { padding: 32px 28px 32px 32px;padding-inline: 32px 28px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, #fff, #fcfbff); }
.mm-label { font-size: .8125rem; line-height: 1.4; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.mm-big { display: block; padding: 7px 0; font-size: 1.0625rem; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--ink); transition: color var(--d-fast) var(--ease); }
.mm-big small { display: block; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 1px; }
.mm-big:hover { color: var(--muted); }
.mm-sep { height: 1px; background: var(--line); margin: 14px 0 10px; }
.mm-second { display: block; padding: 5px 0; font-size: .9375rem; font-weight: 500; color: var(--text-soft); transition: color var(--d-fast) var(--ease); }
.mm-second:hover { color: var(--muted); }
.mm-promo { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: start; }
.mm-promo .tile { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.mm-promo b { font-size: .875rem; font-weight: 500; color: var(--ink); }
.mm-promo span { font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.mm-promo:hover b { color: var(--muted); }
.mm-right { display: flex; flex-direction: column; min-width: 0; }
.mm-groups { display: flex; gap: 40px; padding: 32px 36px 28px; }
/* the cards take the column's width, and at least room for two cards of 200px: a panel with one short
   group (Use cases) grows to fit them instead of squeezing their text */
.mm-cards { width: 0; min-width: max(100%, 466px); margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 28px 28px; }
.mm-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px;padding-inline: 10px 14px; border-radius: var(--r-card); background: var(--page-2); transition: background-color var(--d-fast) var(--ease); }
.mm-card:hover { background: var(--page-3); }
.mm-card .mm-art { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--page-3); }
.mm-art .byl { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; }
.mm-card b { display: block; font-size: .875rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.mm-card b + span { display: block; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.mm-group { min-width: 0; }
.mm-group .mm-label { margin-bottom: 12px; }
.mm-links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); gap: 2px 28px; }
.mm-links a { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .875rem; line-height: 1.5; font-weight: 500; letter-spacing: .005em; color: var(--ink); white-space: nowrap; transition: color var(--d-fast) var(--ease); }
.mm-links a:hover { color: var(--muted); }
.mm-links .ic { width: 16px; height: 16px; color: var(--muted); }
.mm-links .badge { margin-inline-start: 2px; }
.mm-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 32px; border-top: 1px solid var(--line); background: var(--page); font-size: .8125rem; color: var(--muted); }
.mm-foot a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.mm-foot a:hover { color: var(--muted); }
.mm-foot .ic { width: 14px; height: 14px; }

/* mobile menu: inset card with drill-down */
.mmob { position: fixed; z-index: 55; inset-inline-start: 8px; inset-inline-end: 8px; top: calc(var(--header-h) + 4px); bottom: 8px; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.99); transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s; }
.menu-open .mmob { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility 0s; }
.mmob-views { position: relative; flex: 1; overflow: hidden; }
.mmob-view { position: absolute; inset: 0; overflow-y: auto; padding: 10px 10px 24px; transition: opacity .2s var(--ease), transform .25s var(--ease-out); -webkit-overflow-scrolling: touch; }
.mmob-view[aria-hidden="true"] { opacity: 0; pointer-events: none; transform: translateX(8%); }
.mmob-view.is-back[aria-hidden="true"] { transform: translateX(-8%); }
.mmob-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 1rem; font-weight: 500; color: var(--ink); text-align: start; }
.mmob-row:active, .mmob-row:hover { background: var(--hover); }
.mmob-row .ic { width: 16px; height: 16px; color: var(--muted); margin-inline-start: auto; }
.mmob-back { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); margin: 0 -10px 8px; padding-inline: 22px; width: calc(100% + 20px); }
.mmob-back .ic { width: 16px; height: 16px; }
.mmob-label { padding: 16px 12px 6px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.mmob-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: .9375rem; font-weight: 500; color: var(--text-soft); }
.mmob-link:active { background: var(--hover); }
.mmob-link .ic { width: 16px; height: 16px; color: var(--muted); margin: 0; }
.mmob-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--card); }
.mmob-bar .btn { width: 100%; --h: 44px; }
@media (min-width: 1080px) { .mmob { display: none; } }
.menu-open { overflow: hidden; }

/* ---- footer ----------------------------------------------------------------- */
.site-footer { padding: 72px 0 28px; border-top: 1px solid var(--line); background: var(--page); }
.ft { display: grid; gap: 48px; }
.ft-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.ft-brand p { max-width: 30ch; color: var(--muted); font-size: .9375rem; }
.ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ft-col h3 { font-size: .8125rem; line-height: 1.4; font-weight: 500; color: var(--muted); margin-bottom: 12px; }
.ft-col a { display: block; padding: 4px 0; font-size: .9375rem; line-height: 1.45; color: var(--ink); transition: color var(--d-fast) var(--ease); }
.ft-col a:hover { color: var(--muted); }
.ft-base { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.ft-base nav { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-base a:hover { color: var(--ink); }
/* language switcher (shown when a page exists in more than one language) */
.ft-lang { position: relative; }
.ft-lang summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-ctl); cursor: pointer; list-style: none; color: var(--ink); box-shadow: var(--shadow-btn); background: var(--card); }
.ft-lang summary::-webkit-details-marker { display: none; }
.ft-lang summary .ic { width: 16px; height: 16px; }
.ft-lang[open] summary .ic-14 { transform: rotate(180deg); }
.ft-lang-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 30; min-width: 220px; padding: 6px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-popover); display: grid; gap: 2px; }
.ft-lang-many .ft-lang-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(408px, calc(100vw - 40px)); }
.ft-lang-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding: 6px 10px 10px; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 500; color: var(--muted); }
.ft-lang-menu .ft-lang-head { max-width: none; }   /* .ft-brand p caps paragraphs at 30ch; the menu head spans the menu */
.ft-lang-head span { font-variant-numeric: tabular-nums; }
.ft-lang-menu a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 7px 10px; border-radius: var(--r-chip); color: var(--ink); transition: background var(--d-fast) var(--ease); }
.ft-lang-name { grid-column: 1; justify-self: start; font-size: .875rem; line-height: 1.3; }
.ft-lang-menu a small { grid-column: 1; font-size: .75rem; line-height: 1.3; color: var(--muted); }
.ft-lang-menu a .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--violet); }
.ft-lang-menu a:hover { background: var(--page); }
.ft-lang-menu a[aria-current] { background: var(--page); }
.ft-lang-menu a[aria-current] .ft-lang-name { font-weight: 500; }
@media (min-width: 720px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ft { grid-template-columns: 300px 1fr; } .ft-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* seven columns (the platform guides get their own once the carousel makers are out: data/nav.php):
   the brand moves above them, so no column gets narrower than today's */
@media (min-width: 1080px) { .ft:has(> .ft-cols > :nth-child(7)) { grid-template-columns: minmax(0, 1fr); } .ft-cols:has(> :nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---- slides (the drafts' look, one component, sized by container units) ------
   <div class="sl" data-skin="daybreak"> .sl-top / .sl-h / .sl-p / .orb.sl-orb / .sl-bot
   ratio: data-ratio="1:1" | "9:16" (default 4:5). Everything scales with the slide's width. */
.sl {
  --sl-bg: #f3e5d4; --sl-ink: #2a2723; --sl-soft: rgb(42 39 35 / .72); --sl-line: rgb(42 39 35 / .22);
  --sl-font: var(--font); --sl-w: 400; --sl-track: -.05em; --sl-size: 15cqw;
  position: relative; container-type: inline-size; aspect-ratio: 4 / 5; width: 100%;
  display: flex; flex-direction: column; padding: 7.6%; overflow: hidden; isolation: isolate;
  background: var(--sl-bg); color: var(--sl-ink); border-radius: var(--sl-r, 10px); letter-spacing: 0;
}
/* note: a container's own padding can't use its own cq units, so the padding is in % (of the
   parent's width; a slide always fills its wrapper) and children use cqw */
.sl[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
.sl[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.sl[data-ratio="9:16"] { aspect-ratio: 9 / 16; padding-top: 12%; padding-bottom: 22%; }
.sl-top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 4cqw; font-size: 2.3cqw; line-height: 1.3; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sl-soft); }
.sl-h { position: relative; z-index: 2; margin-top: 8.5cqw; font-family: var(--sl-font); font-size: var(--sl-size); line-height: 1.04; font-weight: var(--sl-w); letter-spacing: var(--sl-track); text-wrap: balance; overflow-wrap: anywhere; }
.sl-p { position: relative; z-index: 2; margin-top: 4.4cqw; max-width: 82%; font-size: 3.5cqw; line-height: 1.45; color: var(--sl-soft); }
.sl-pill { position: relative; z-index: 2; align-self: flex-start; margin-top: 8cqw; padding: 1.4cqw 3.2cqw; border-radius: 99px; box-shadow: inset 0 0 0 .35cqw var(--sl-line); font-size: 2.4cqw; }
.sl-num { position: relative; z-index: 2; margin-top: 6cqw; font-size: 30cqw; line-height: .85; font-weight: 300; letter-spacing: -.07em; color: var(--sl-soft); }
.sl-list { position: relative; z-index: 2; margin-top: 6cqw; display: grid; }
.sl-list li { padding: 2.6cqw 0; border-bottom: .3cqw solid var(--sl-line); font-size: 3.6cqw; }
.sl-bot { position: relative; z-index: 2; margin-top: auto; padding-top: 4cqw; display: flex; align-items: center; justify-content: space-between; gap: 4cqw; font-size: 2.6cqw; color: var(--sl-soft); }
.sl-arrow { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .35cqw var(--sl-line); font-size: 3.6cqw; color: var(--sl-ink); }
.sl-orb { position: absolute; z-index: 1; width: 68cqw; height: 68cqw; inset-inline-end: -14cqw; bottom: -12cqw; }
.sl.is-dark .sl-orb, .sl[data-orb="top"] .sl-orb { top: -22cqw; bottom: auto; inset-inline-end: -16cqw; }
.sl.is-dark .sl-h { margin-top: auto; }
.sl.is-dark .sl-bot { margin-top: 6cqw; }
.sl .lines { position: absolute; z-index: 1; right: -4cqw; bottom: 3cqw; width: 52cqw; height: 38cqw; display: flex; align-items: flex-end; gap: 2.2cqw; transform: rotate(-25deg); opacity: .6; }
.sl .lines i { flex: 1; height: 55%; border-radius: 50%; background: #d4bc99; }
.sl .lines i:nth-child(2), .sl .lines i:nth-child(5) { height: 80%; } .sl .lines i:nth-child(3), .sl .lines i:nth-child(4) { height: 100%; }
.sl .rings { position: absolute; z-index: 1; inset-inline-end: -6cqw; bottom: -6cqw; width: 64cqw; height: 64cqw; border-radius: 50%; box-shadow: inset 0 0 0 .35cqw var(--sl-line); display: grid; place-items: center; }
.sl .rings i { position: absolute; width: 76%; height: 76%; border-radius: 50%; box-shadow: inset 0 0 0 .35cqw var(--sl-line); }
.sl .rings i:nth-child(2) { width: 52%; height: 52%; } .sl .rings i:nth-child(3) { width: 28%; height: 28%; background: rgb(137 153 116 / .2); }
.sl .bars { position: absolute; z-index: 1; inset-inline-start: 7.6cqw; inset-inline-end: 7.6cqw; bottom: 16cqw; height: 36cqw; display: flex; align-items: flex-end; gap: 3cqw; }
.sl .bars i { flex: 1; border-radius: 1cqw 1cqw 0 0; background: var(--sl-accent, #d8e4a6); opacity: .9; }

/* skins: the drafts' palettes (Daybreak, Paper, Evergreen, Signal, After hours, Iris, Good company, Pearl) */
.sl[data-skin="daybreak"]  { --sl-bg: #f3e5d4; --sl-ink: #2a2723; }
.sl[data-skin="paper"]     { --sl-bg: #fbfaf5; --sl-ink: #26241f; --sl-size: 12.5cqw; }
.sl[data-skin="evergreen"] { --sl-bg: #dfe6cf; --sl-ink: #2c3e2d; --sl-font: "Fraunces", Georgia, serif; --sl-w: 400; --sl-track: -.03em; }
.sl[data-skin="signal"]    { --sl-bg: #24302a; --sl-ink: #f4f1e7; --sl-soft: rgb(244 241 231 / .7); --sl-line: rgb(244 241 231 / .25); --sl-accent: #d8e4a6; }
.sl[data-skin="afterhours"]{ --sl-bg: #dcd6ee; --sl-ink: #2f2745; --sl-soft: rgb(47 39 69 / .7); }
.sl[data-skin="iris"]      { --sl-bg: #382d46; --sl-ink: #f3ecf6; --sl-soft: rgb(243 236 246 / .7); --sl-line: rgb(243 236 246 / .25); }
.sl[data-skin="goodco"]    { --sl-bg: #eaa585; --sl-ink: #3b1d12; --sl-soft: rgb(59 29 18 / .72); }
.sl[data-skin="pearl"]     { --sl-bg: #f4f3f7; --sl-ink: #26232d; }
.sl[data-skin="sage"]      { --sl-bg: #dce3ce; --sl-ink: #2b3a2c; --sl-size: 12.5cqw; }
.sl[data-skin="violet"]    { --sl-bg: #d9d7ef; --sl-ink: #2a2642; --sl-size: 12.5cqw; }

/* a slide's print: our own artwork in the app's halftone (drawn by prints.js), one per tone:
   ember a low sun, iris the sparkle, forest a bloom, pearl a rainbow, copper a target, smoke a fan of slides */
.orb { position: relative; flex: none; background: center / contain no-repeat; }
.orb.ember { background-image: var(--mark-ember); } .orb.iris { background-image: var(--mark-iris); } .orb.forest { background-image: var(--mark-forest); }
.orb.pearl { background-image: var(--mark-pearl); } .orb.copper { background-image: var(--mark-copper); } .orb.smoke { background-image: var(--mark-smoke); }
/* on a dark slide the same print in lighter inks */
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.ember { background-image: var(--mark-ember-d); }
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.iris { background-image: var(--mark-iris-d); }
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.forest { background-image: var(--mark-forest-d); }
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.pearl { background-image: var(--mark-pearl-d); }
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.copper { background-image: var(--mark-copper-d); }
:is(.sl.is-dark, .sl[data-skin="signal"], .sl[data-skin="iris"]) .orb.smoke { background-image: var(--mark-smoke-d); }
/* a slide's print is decoration in the corner, never in the text flow */
.sl > .sl-orb { position: absolute; }

/* a slide in a feed/editor gets the slide shadow */
.sl.lift { box-shadow: var(--shadow-slide); }

/* ---- reveal on scroll (subtle; off for reduced motion) --------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- toast ------------------------------------------------------------------- */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px;padding-inline: 12px 16px; border-radius: 14px; background: rgb(33 29 43 / .92); color: #fff; font-size: .875rem; box-shadow: 0 18px 40px -10px rgb(0 0 0 / .35); backdrop-filter: blur(8px); transition: opacity .2s var(--ease), transform .3s var(--ease-out); max-width: calc(100% - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { width: 18px; height: 18px; color: #b9a3f2; flex: none; }

/* ---- the ghostwriters' halftone prints (from the app: final/ui/css/byline.css) - */
.byl { --bs: 28px; position: relative; display: inline-block; flex: none; vertical-align: middle; overflow: hidden; isolation: isolate; background: var(--byl-p, #f1eef8); }
.byl > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.byl > .byl-ghost { z-index: 1; transition: opacity .5s var(--ease, ease); pointer-events: none; }
.byl::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07); }
.byl-mark, .byl-portrait { width: var(--bs); aspect-ratio: 4 / 5; border-radius: max(3px, calc(var(--bs) * .14)); }
.byl-portrait { box-shadow: 0 calc(var(--bs) * .08) calc(var(--bs) * .2) calc(var(--bs) * -.1) rgb(24 16 60 / .28); }
.byl-card { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; }
.byl-tile { display: block; width: 100%; height: 100%; }
.byl-tile::after { display: none; }
.byl-hero, .byl-band { position: absolute; inset: 0; display: block; border-radius: inherit; }
.byl-hero::after, .byl-band::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==== 11-faq ==== */
/* FAQ: heading left (sticky), the list right; hairline rows with a plus that turns into a minus */
.fq { display: grid; gap: 40px 64px; }
@media (min-width: 960px) {
  .fq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .fq-intro { position: sticky; top: calc(var(--header-h) + 40px); }
}
.fq-intro { display: grid; gap: 18px; justify-items: start; }
.fq-intro .t-body { max-width: 34ch; }

/* "Still curious?" as one of the app's rows */
.fq-ask { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 14px; width: min(100%, 320px); margin-top: 14px; padding: 12px 18px 12px 12px;padding-inline: 12px 18px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-tile); transition: box-shadow var(--d-fast) var(--ease); }
.fq-ask:hover { box-shadow: var(--shadow-popover); }
.fq-ask-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--page-2); color: var(--ink); }
.fq-ask-ic .ic { width: 20px; height: 20px; }
.fq-ask-t b { display: block; font-size: .9375rem; line-height: 1.35; font-weight: 500; color: var(--ink); }
.fq-ask-t small { display: block; font-size: .8125rem; line-height: 1.35; color: var(--muted); transition: color var(--d-fast) var(--ease); }
.fq-ask:hover small { color: var(--ink); }
.fq-ask-go { width: 16px; height: 16px; color: var(--muted); transition: transform var(--d-menu) var(--ease-out), color var(--d-fast) var(--ease); }
.fq-ask:hover .fq-ask-go { transform: translate(2px, -2px); color: var(--ink); }

/* the list (markup: details.faq-item[data-faq] > summary + .faq-a > p) */
.fq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item > summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 26px 64px 26px 0;padding-inline: 0 64px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.4; font-weight: 400; letter-spacing: -.014em; color: var(--ink);
  transition: color var(--d-fast) var(--ease); -webkit-tap-highlight-color: transparent;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--muted); }
.faq-item > summary:focus-visible { outline-offset: 4px; }
/* the plus: a hairline circle with two bars; the upright bar folds away when open */
.faq-item > summary::after {
  content: ""; position: absolute; inset-inline-end: 2px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 10px;
  background: linear-gradient(var(--ink), var(--ink)) center / 13px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 13px no-repeat, var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform var(--d-morph) var(--ease-out), background-size var(--d-morph) var(--ease-out), box-shadow var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.faq-item > summary:hover::after { box-shadow: inset 0 0 0 1px var(--line-3); }
.js .faq-item.is-open > summary::after, html:not(.js) .faq-item[open] > summary::after {
  transform: rotate(180deg);
  background-size: 13px 1.5px, 1.5px 0, auto;
  background-color: var(--page-2);
}
.faq-a > p { max-width: 62ch; padding: 0 64px 28px 0;padding-inline: 0 64px; font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

@media (max-width: 719px) {
  .faq-item > summary { padding: 20px 52px 20px 0;padding-inline: 0 52px; }
  .faq-item > summary::after { width: 32px; height: 32px; margin-top: -16px; inset-inline-end: 0; }
  .faq-a > p { padding: 0 8px 22px 0;padding-inline: 0 8px; font-size: .9375rem; }
  .fq-ask { width: 100%; }
}

/* ==== 12-final ==== */
/* Final CTA: one calm lavender panel, a small fan of slides, the logo, one field */
#start { padding-top: clamp(24px, 4vw, 56px); }
.fin { display: grid; justify-items: center; gap: 0; padding: clamp(48px, 6vw, 80px) clamp(18px, 5vw, 72px) clamp(44px, 5.4vw, 72px); background: #f1edf9; box-shadow: inset 0 0 0 1px rgb(127 86 217 / .07); text-align: center; }
.fin .aura { background:
  radial-gradient(38% 52% at 18% 18%, rgb(214 196 250 / .6), transparent 70%),
  radial-gradient(34% 46% at 84% 78%, rgb(250 214 196 / .5), transparent 70%),
  radial-gradient(50% 40% at 50% 0%, rgb(255 255 255 / .85), transparent 70%); }

/* the fan */
.fin-fan { --cw: clamp(118px, 12vw, 170px); position: relative; text-align: start; width: calc(var(--cw) * 2.7); height: calc(var(--cw) * 1.38); }
/* the fan in the page's own shape (cta.php 'ratio'); 9:16 cards are narrower, so the fan stays about as tall */
.fin-fan[data-ratio="3:4"] { height: calc(var(--cw) * 1.46); }
.fin-fan[data-ratio="1:1"] { height: calc(var(--cw) * 1.13); }
.fin-fan[data-ratio="9:16"] { --cw: clamp(88px, 9vw, 128px); height: calc(var(--cw) * 1.92); }
.fin-card { position: absolute; left: 50%; top: 0; width: var(--cw); transform: translateX(calc(-50% + var(--x) * var(--cw))) translateY(var(--y)) rotate(var(--r)); transition: transform .9s var(--ease-out), opacity .6s var(--ease); }
.fin-card:nth-child(1) { --x: -.62; --y: 18px; --r: -9deg; z-index: 1; }
.fin-card:nth-child(2) { --x: .62; --y: 18px; --r: 9deg; z-index: 1; }
.fin-card.is-front { --x: 0; --y: 0px; --r: 0deg; z-index: 2; }
.fin-card .sl { animation: fin-float 6.5s ease-in-out infinite alternate paused; animation-delay: calc(var(--i) * -1.8s); }
.fin.is-live .fin-card .sl { animation-play-state: running; }
/* the bottom box's three slides get the white edge the side column's slides have, so they read apart (31 Oct 2026, Fernando) */
.fin .fin-card > .sc-pic { box-shadow: 0 0 0 2.5px #fff, 0 1px 3px 2px rgb(24 21 31 / .1), 0 18px 34px -14px rgb(40 24 70 / .4); }
@keyframes fin-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.fin-fan .sl-h { font-size: 13cqw; }
.fin-fan .sl-top { font-size: 2.8cqw; }
.fin-fan .sl-bot { font-size: 3.2cqw; }
.fin-card.is-front .sl-h { font-size: var(--live, 14cqw); transition: font-size .3s var(--ease-out); }
.fin-card.is-front .sl-h.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: .9em; margin-inline-start: .06em; vertical-align: -.08em; background: currentColor; animation: fin-caret 1s steps(1) infinite; }
@keyframes fin-caret { 50% { opacity: 0; } }
@media (hover: hover) {
  .fin:hover .fin-card:nth-child(1) { --x: -.72; --r: -11deg; }
  .fin:hover .fin-card:nth-child(2) { --x: .72; --r: 11deg; }
}
.js .fin:not(.is-in) .fin-card { transform: translateX(-50%) translateY(26px) rotate(0); opacity: 0; }
.js .fin.is-in .fin-card { transition-delay: calc(var(--i) * 70ms); }

/* the logo tile, set on the fan like an app icon */
.fin-logo { position: absolute; z-index: 3; left: 50%; bottom: 0; width: 56px; height: 56px; margin-left: -28px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 4px rgb(255 255 255 / .85), var(--shadow-float), 0 18px 36px -12px rgb(90 54 184 / .4); transition: transform .9s var(--ease-out) .25s, opacity .6s var(--ease) .25s; }
.fin-logo svg { width: 100%; height: 100%; }
.js .fin:not(.is-in) .fin-logo { transform: translateY(10px) scale(.9); opacity: 0; }

/* copy */
.fin-copy { display: grid; justify-items: center; margin-top: clamp(28px, 3.4vw, 40px); }
.fin-title { max-width: 13em; font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem); line-height: 1.02; font-weight: 300; letter-spacing: -.042em; color: var(--ink); text-wrap: balance; }
.fin-lead { margin-top: 20px; max-width: 52ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.55; color: var(--muted); text-wrap: balance; }

/* the field: the hero composer's Generate, compact */
.fin-form { position: relative; display: flex; align-items: center; gap: 8px; width: min(560px, 100%); height: 64px; margin-top: 32px; padding: 8px 8px 8px 46px;padding-inline: 46px 8px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-float), 0 30px 60px -30px rgb(70 40 130 / .3); transition: box-shadow var(--d-fast) var(--ease); }
.fin-form:focus-within { box-shadow: 0 0 0 2px var(--violet-line), var(--shadow-float), 0 30px 60px -30px rgb(70 40 130 / .3); }
.fin-form-ic { position: absolute; inset-inline-start: 17px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--violet); }
.fin-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); }
.fin-form input::placeholder { color: var(--subtle); transition: opacity .25s var(--ease); }
.fin-form input.is-swap::placeholder { opacity: 0; }
.fin-go { --h: 48px; padding: 0 20px; border-radius: 14px; }
.fin-go .ic { width: 15px; height: 15px; color: #c9b5f6; }

.fin-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; }
.fin-checks li { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--muted); }
.fin-checks .ic { width: 15px; height: 15px; color: var(--violet); }

/* on phones the panel keeps the page's side gutter, in line with the sections above it
   (the homepage, whose stages all reach 8px from the edge, widens it: home.css) */
@media (max-width: 719px) {
  .fin-fan { --cw: 30vw; }
  .fin-fan[data-ratio="9:16"] { --cw: 22vw; }
  .fin-title { font-size: clamp(2.25rem, 8.6vw, 2.75rem); }
  .fin-lead { margin-top: 16px; }
  .fin-form { flex-direction: column; align-items: stretch; height: auto; padding: 6px; border-radius: 18px; margin-top: 26px; }
  .fin-form-ic { top: 30px; margin-top: -9px; inset-inline-start: 16px; }
  .fin-form input { flex: none; height: 50px; padding-inline-start: 38px; }
  .fin-lead { max-width: 30ch; }
  .fin-go { --h: 48px; width: 100%; }
  .fin-checks { flex-direction: column; align-items: center; gap: 9px; }
  /* 15 Oct: the field takes the panel's width, as in kb.css (the input's own default width held the column at 317 px,
     wider than the panel at 320 px, so the field and the text around it were cut off) */
  .fin { grid-template-columns: minmax(0, 1fr); }
  .fin-form input { width: 100%; }
}


/* ---- 404 ------------------------------------------------------------------- */
.nf { padding-block: clamp(96px, 14vw, 180px); }
.nf-in { display: grid; gap: 20px; justify-items: center; text-align: center; }
.nf-in .t-lead { max-width: 48ch; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* 15 Oct: headings stay plain, as on the homepage (no highlighter behind a word in a title) */
:is(h1, h2, h3) .mark, .night :is(h1, h2, h3) .mark { background: none; padding-inline: 0; }

/* the footer's language picker: the language's name at the size of the footer links' small print (30 Oct 2026, Fernando) */
.lp .ft-lang summary, .ft-lang summary { font-size: .875rem; font-weight: 500; line-height: 1.5; padding: 6px 12px; gap: 7px; }   /* the header menu’s size (Fernando, 30 Oct 2026) */
.lp .ft-lang summary .ic, .ft-lang summary .ic { width: 16px; height: 16px; }
.lp .ft-lang summary .ic-14, .ft-lang summary .ic-14 { width: 12px; height: 12px; }

/* the pre-footer CTA after the free try (or signed in): composer.js swaps the box for the editor button (.cc-alt), and the
   lead follows (cta.php data-lead). Browsers without :has() keep the first lead ([hidden] is !important here, so the second hides by CSS). 31 Oct 2026 */
.fin-lead[data-lead="back"] { display: none; }
.fin-copy:has(.cc-alt:not([hidden])) .fin-lead[data-lead="new"] { display: none; }
.fin-copy:has(.cc-alt:not([hidden])) .fin-lead[data-lead="back"] { display: block; }

/* Japanese headings break between phrases, not inside a word (Chrome/Edge; others keep their usual breaks) (1 Nov 2026) */
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; overflow-wrap: anywhere; }