/* site-v3.css — the shared shell for the fesk.uk info pages (ai-features, getting-started, help, status, security,
   privacy, terms, gdpr), loaded by includes/sitepage_top.php. Marketing site only; the app never loads it.

   Built from the front page (assets/css/premium.css + premium-phone.css): the same tokens, fonts, solid navy nav,
   grid-paper body, white rounded cards, navy footer, and the same phone behaviour at 760px and under (58px bar,
   20px gutters, 48px sections, 44px+ targets, nothing wider than the screen). Every URL is root-relative, so the
   fonts come from the host the visitor is on and are never blocked cross-origin.

   Page-body vocabulary (snippets in the redesign notes, SHELL.md):
     .sp-hero (via sp_head_band)   .sp-body > .wrap > .sp-layout > .sp-toc + .prose   long-form pages
     .sp-sec + .sp-shead           a section and its head (eyebrow, Cook Conthic h2, lede to the right)
     .sp-cards > .sp-card          white cards (r24), with .sp-card__ic
     .sp-callout (= .prose-callout) the coral-tint "short version" note
     .sp-ticks  .sp-steps  .sp-faq  .sp-table  .sp-cta             lists, numbered steps, questions, tables, closing band
     .btn .btn--coral/--ghost/--navy/--lg/--sm/--block  .pill .pill--ok  .chip  .eyebrow  .lede  .fine  .wrap
   The old site-pages.css names the pages still use (.btn-primary, .pill-ok, .mesh, --accent, --ink-950 …) are
   mapped onto these at the bottom of the tokens and in "legacy" below, so nothing breaks before a page's own pass. */

/* self-hosted (SIL OFL) latin subsets, the same files Google Fonts served: no third-party CSS or connection before first paint */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-semibold.woff2") format("woff2"); font-weight: 100 650; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-bold.woff2") format("woff2"); font-weight: 651 900; font-display: swap; }   /* Switzer from Fontshare (ITF Free Font License): real Semibold and Bold, so 700-750 headings get the true Bold */
@font-face { font-family: "Cook Conthic"; src: url("/assets/fonts/cook-conthic.woff") format("woff"), url("/assets/fonts/cook-conthic.otf") format("opentype"); font-weight: 400 800; font-display: swap; }

:root {
  --coral: #e8857a; --coral-dk: #d4675b; --coral-lt: #fdf0ee; --coral-ink: #b84f40; --coral-soft: #f4a79d;
  --navy: #1e2a3a; --navy-mid: #263447; --navy-lt: #344459;
  --sky: #a8d8ea; --sky-lt: #eaf5fb; --sky-dk: #5ba3c9;
  --ok: #2c7a50; --ok-mid: #4caf8a; --ok-lt: #edfaf4;
  --ai: #6366f1;
  --bg: #ebeff5; --surface: #fff; --surface-2: #f4f7fb;
  --line: #e4e8ee; --line-strong: #c9d0d8;
  --text: #1e2a3a; --body-ink: #3b4f64; --muted: #5b7186; --light: #9fb8c8;
  --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 28px;
  --sh-sm: 0 1px 2px rgba(16,24,40,.05);
  --sh: 0 4px 14px rgba(16,24,40,.08);
  --sh-card: 0 0 0 1px rgba(30,42,58,.055), 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
  --sh-lg: 0 2px 6px rgba(16,24,40,.06), 0 24px 60px -18px rgba(16,24,40,.28);
  --display: "Bricolage Grotesque", system-ui, sans-serif;   /* figures and UI */
  --head: "Switzer", "Bricolage Grotesque", system-ui, sans-serif;   /* the big headings: Switzer Bold, -0.02em (18 Oct 2026); was Cook Conthic */
  --head-track: -.02em;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1180px;
  --nav-h: 72px;
  --grain: url("/assets/img/site/navy-grain.webp");
  /* engineering grid paper: one faint 32px square, drawn on the page itself */
  --graph: /* engineering paper (28 Sep 2026, fainter 18 Oct): faint 16px squares, a stronger line every 80px — matches the booking page */ linear-gradient(rgba(30,42,58,.03) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(30,42,58,.03) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(rgba(30,42,58,.012) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(30,42,58,.012) 1px, transparent 1px) 0 0 / 16px 16px;

  /* legacy names (site-pages.css) that page bodies still use, mapped onto the front page's tokens */
  --ink-950: #16202d; --ink-900: var(--navy); --ink-850: #22303f; --ink-800: var(--navy-mid); --ink-700: var(--navy-lt);
  --accent: var(--coral); --accent-bright: var(--coral-soft); --accent-deep: var(--coral-dk); --accent-soft: var(--coral-lt);
  --accent-ink: var(--coral-ink); --accent-rgb: 232, 133, 122;
  --paper: #fff; --paper-2: var(--surface-2); --paper-3: var(--line); --line-soft: var(--line);
  --text-strong: var(--navy); --text-soft: var(--muted); --text-faint: #6d8196;
  --on-dark: #eef2f8; --on-dark-soft: #aebacb; --on-dark-faint: #8193a8;
  --font-display: var(--display); --font-body: var(--body);
  --r-md: 14px; --r-pill: 999px;
  --sh-md: var(--sh); --sh-xl: var(--sh-lg);
  --glow: 0 8px 22px -10px rgba(212,103,91,.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--graph), var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); text-wrap: balance; }
h1, h2 { font-family: var(--head); font-weight: 720; letter-spacing: var(--head-track); }
h3, h4 { font-family: var(--body); font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; }
::selection { background: rgba(232,133,122,.28); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 48px); }
/* the front page's phone layout has its own section ids: links that differ carry both, one per layout */
@media (min-width: 761px) { .ph-only { display: none !important; } }
@media (max-width: 760px) { .dsk-only { display: none !important; } }

/* ── buttons: coral fill with a navy label ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--body); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s; }
.btn .i { transition: transform .2s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn--coral, .btn-primary { background: var(--coral); color: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -10px rgba(212,103,91,.9); }
.btn--coral:hover, .btn-primary:hover { background: #ec9489; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -10px rgba(212,103,91,.95); }
.btn--ghost, .btn-ghost-light { background: rgba(255,255,255,.7); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover, .btn-ghost-light:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--ghostdark, .btn-ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn--ghostdark:hover, .btn-ghost-dark:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-lt); }
.btn--lg, .btn-lg { min-height: 56px; padding: 0 26px; font-size: 17px; border-radius: 14px; }
.btn--sm, .btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn--block, .btn-block { width: 100%; }
.btn:active { transform: translateY(0) scale(.99); }

/* ── small parts ── */
.eyebrow { font: 700 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); margin: 0 0 12px; }
.eyebrow--light { color: var(--coral-soft); }
.lede { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--body-ink); }
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); font: 600 14px/1.2 var(--body); color: var(--navy); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 13px/1.2 var(--body); white-space: nowrap; }
.pill--ok, .pill-ok { background: var(--ok-lt); color: var(--ok); }
.pill--sky { background: var(--sky-lt); color: #2b6f93; }
.pill--coral, .pill-hot { background: var(--coral-lt); color: var(--coral-ink); }
.pill-warn { background: #fef3e6; color: #9a5b12; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ── the reading bar: the coral line across the top ── */
.sprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
.sprog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral-dk), var(--coral-soft)); box-shadow: 0 0 12px rgba(232,133,122,.6); border-radius: 0 3px 3px 0; }

/* ── nav: the front page's, solid navy, stays solid on scroll (only a soft shadow appears) ── */
.nav { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); transition: box-shadow .25s; }
.nav.is-stuck { box-shadow: 0 10px 30px -18px rgba(16,24,40,.7); }
.nav__in { width: min(var(--wrap), 100% - 32px); margin-inline: auto; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav__in > .nav__brand { grid-column: 1; justify-self: start; }
.nav__in > .nav__links { grid-column: 2; }
.nav__in > .nav__act { grid-column: 3; justify-self: end; }
/* the lockup: the tile leaning 7 degrees with the letters, then the drawn FESK.UK wordmark */
.nav__brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; text-decoration: none; }
.nav__mark { display: block; height: 28px; width: auto; aspect-ratio: 1.1228; }
.nav__wm { display: block; height: 16px; width: auto; }
.nav__links { display: flex; gap: 6px; }
.nav__links a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font: 600 15px/1 var(--body); color: #b9c6d4; white-space: nowrap; transition: color .15s, background-color .15s; }
.nav__links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--coral); border-radius: 10px 10px 2px 2px; }
.nav__act { display: flex; align-items: center; gap: 8px; }
.nav__signin { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px; text-decoration: none; font: 600 15px/1 var(--body); white-space: nowrap;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); transition: background-color .2s, box-shadow .2s; }
.nav__signin:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.nav__act .btn { min-height: 42px; padding: 0 16px; border-radius: 10px; font: 600 15px/1 var(--body); box-shadow: inset 0 0 0 1px var(--coral); }
.nav__act .btn:hover { transform: none; background: #ec9489; box-shadow: inset 0 0 0 1px #ec9489; }

/* ── the page hero: the front page's section head, on the grid paper ── */
.sp-hero { position: relative; padding: 64px 0 48px; overflow-x: clip; overflow-y: visible; }   /* the glow fades out behind the body (main.sp-body paints above it), never a hard edge */
.sp-hero:focus { outline: none; }
.sp-hero__glow { position: absolute; inset: -60% -10% auto; height: 900px; pointer-events: none;
  background: radial-gradient(36% 46% at 84% 42%, rgba(168,216,234,.5), transparent 70%), radial-gradient(28% 34% at 66% 62%, rgba(232,133,122,.14), transparent 70%); }
.sp-hero__in { position: relative; }
.sp-hero--img .sp-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 48px; align-items: center; }
.sp-hero--img .sp-hero__in > :not(.sp-hero__img) { grid-column: 1; }
.sp-hero__img { grid-column: 2; grid-row: 1 / span 4; width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sh-lg); }
@media (max-width: 900px) { .sp-hero--img .sp-hero__in { grid-template-columns: minmax(0, 1fr); } .sp-hero__img { grid-column: 1; grid-row: auto; max-width: 420px; margin-top: 24px; } }
.sp-hero h1 { max-width: 700px; font-size: clamp(40px, 4.8vw, 60px); line-height: 1; font-weight: 750; }
.sp-hero .lede { margin-top: 20px; max-width: 620px; }
.sp-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.sp-meta li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); font: 600 14px/1.2 var(--body); color: var(--body-ink); }
.sp-meta svg { color: var(--coral-dk); flex: none; }
/* the faint drawing: the wordmark as a hairline on the grid paper, to the right of the title (wide screens) */
.sp-hero__mark { display: none; }
@media (min-width: 1240px) {
  .sp-hero__in > :not(.sp-hero__mark) { position: relative; z-index: 1; }
  .sp-hero__mark { display: block; position: absolute; z-index: 0; right: -230px; top: 50%; transform: translateY(-50%); width: 720px; aspect-ratio: 5.4604; pointer-events: none;
    background: url("/assets/img/brand/fesk-wordmark-outline.svg?v=3") no-repeat center / contain; opacity: .18; }
}

/* ── the body: an "On this page" rail beside one white article card ── */
.sp-body { position: relative; padding: 56px 0 80px; }
.sp-hero + .sp-body { padding-top: 0; }   /* straight after the hero: the hero's own bottom space is enough */
.sp-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; }
.sp-toc { position: sticky; top: 96px; }
.sp-toc__box > summary { display: block; list-style: none; pointer-events: none; margin: 8px 0 12px; font: 700 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.sp-toc__box > summary::-webkit-details-marker { display: none; }
#sp-toc-nav { display: grid; gap: 2px; padding-left: 2px; box-shadow: inset 2px 0 0 var(--line-strong); }
.sp-toc a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px 8px 16px; margin-left: -2px; border-radius: 0 10px 10px 0; text-decoration: none;
  font: 600 15px/1.3 var(--body); color: var(--muted); transition: color .15s, background-color .15s, box-shadow .15s; }
.sp-toc a:hover { color: var(--navy); background: rgba(255,255,255,.7); }
.sp-toc a.active { color: var(--navy); background: #fff; box-shadow: inset 2px 0 0 var(--coral), var(--sh-sm); }

/* the article: one white card, long-form text in the body face */
.prose { min-width: 0; padding: 48px 56px 56px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); color: var(--body-ink); font-size: 17px; line-height: 1.65; }
.prose--plain { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font: 800 clamp(24px, 2.2vw, 28px)/1.2 var(--body); letter-spacing: -.015em; color: var(--navy); }
.prose > h2:not(:first-child) { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.prose h3 { font: 800 19px/1.3 var(--body); letter-spacing: -.01em; color: var(--navy); }
.prose > h3:not(:first-child) { margin-top: 32px; }
.prose > h2 + *, .prose > h3 + * { margin-top: 12px; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; }
.prose strong { color: var(--navy); font-weight: 700; }
.prose em { font-style: italic; }
.prose a:not(.btn) { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .15s; }
.prose a:not(.btn):hover { color: var(--coral-ink); }
.prose ul, .prose ol { margin-bottom: 0; padding: 0; display: grid; gap: 8px; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 24px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.prose ol { padding-left: 24px; }
.prose ol > li { padding-left: 4px; }
.prose ol > li::marker { color: var(--coral-ink); font: 700 16px var(--display); }
.prose blockquote { margin: 24px 0 0; padding: 16px 20px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--coral);
  color: var(--navy); font-size: 16px; line-height: 1.6; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* the "short version" note: coral tint, the icon on a white tile */
.prose-callout, .sp-callout { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 16px; background: var(--coral-lt); box-shadow: inset 0 0 0 1px rgba(232,133,122,.24); }
.prose-callout .ico, .sp-callout__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--coral-dk); box-shadow: var(--sh-sm); }
.prose-callout p, .sp-callout p { font-size: 16px; line-height: 1.55; color: var(--navy); }
.prose-callout p + p, .sp-callout p + p { margin-top: 8px; }
.prose .prose-callout, .prose .sp-callout { margin-top: 24px; }
.prose > .prose-callout:first-child, .prose > .sp-callout:first-child { margin-top: 0; }

/* tables: a hairline frame, a quiet header row, the first column as the row's name */
.prose table, .sp-table { width: 100%; margin-top: 24px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; font-size: 15.5px; background: #fff; }
.prose th, .sp-table th { text-align: left; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font: 700 13px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose thead th:first-child, .sp-table thead th:first-child { border-top-left-radius: 13px; }
.prose thead th:last-child, .sp-table thead th:last-child { border-top-right-radius: 13px; }
.prose td, .sp-table td { padding: 14px 16px; vertical-align: top; line-height: 1.5; color: var(--body-ink); border-bottom: 1px solid var(--line); }
.prose tbody tr:last-child td, .sp-table tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child, .sp-table td:first-child { color: var(--navy); font-weight: 700; }

/* ── sections and their heads (for pages built from sections rather than one article) ── */
.sp-sec { position: relative; padding: 76px 0; }
.sp-hero + .sp-body > .sp-sec:first-child { padding-top: 16px; }   /* the hero already leaves room */
.sp-body > .sp-sec:last-child { padding-bottom: 0; }                /* .sp-body keeps the space above the footer */
.sp-sec--tint { background: linear-gradient(180deg, transparent, rgba(168,216,234,.20) 22%, rgba(168,216,234,.20) 78%, transparent); }
.rule::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(var(--wrap), calc(100% - 48px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,42,58,.12) 12%, rgba(30,42,58,.12) 88%, transparent); }
.sp-shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; margin-bottom: 32px; }
.sp-shead > .eyebrow, .sp-shead > h2 { grid-column: 1; }
.sp-shead > p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 18px; color: var(--body-ink); max-width: 620px; }
.sp-shead h2, .sp-cta h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.04; }

/* cards */
.sp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-card { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: #fff; box-shadow: var(--sh-card); }
.sp-card__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--coral-lt); color: var(--coral-ink); }
.sp-card h3 { font-size: 20px; line-height: 1.3; }
.sp-card p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--body-ink); }
.sp-card .fine { margin-top: auto; padding-top: 16px; }
.sp-card--navy { background: var(--grain) 0 0 / 300px, linear-gradient(160deg, var(--navy-mid), var(--navy)); background-blend-mode: soft-light, normal; color: #d3dce6; box-shadow: var(--sh-lg); }
.sp-card--navy h3 { color: #fff; }
.sp-card--navy p { color: #c9d4e1; }

/* tick list */
.sp-ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--body-ink); }
.sp-ticks li::before, .prose .sp-ticks > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf8a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.prose .sp-ticks > li { padding-left: 30px; }
.prose .sp-ticks > li::before { top: 4px; }

/* numbered steps */
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; counter-reset: sp-step; }
.sp-steps > li { counter-increment: sp-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: var(--sh-card); }
.sp-steps > li::before { content: counter(sp-step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--coral-lt); color: var(--coral-ink); font: 800 16px/1 var(--display); }
.sp-steps h3 { font-size: 19px; line-height: 1.3; align-self: center; }
.sp-steps p { grid-column: 2; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--body-ink); }

/* questions */
.sp-faq { display: grid; gap: 10px; }
.sp-faq details { border-radius: 16px; background: #fff; box-shadow: var(--sh-card); transition: box-shadow .2s; }
.sp-faq details[open] { box-shadow: var(--sh-lg); }
.sp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 0 22px; font: 700 17px/1.3 var(--display); color: var(--navy); }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 10px; transition: transform .25s var(--ease), background-color .2s;
  background: var(--surface-2) no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2a3a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.sp-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--coral-lt); }
.sp-faq details > :not(summary) { padding: 0 22px 20px; color: var(--body-ink); max-width: 66ch; }

/* the closing band: navy with the grain and a coral glow, the one dark block above the footer */
.sp-cta { position: relative; overflow: hidden; padding: 48px 56px; border-radius: 24px; color: #fff;
  background: var(--grain) 0 0 / 300px, radial-gradient(50% 70% at 85% 20%, rgba(232,133,122,.22), transparent 70%), linear-gradient(160deg, var(--navy-mid), var(--navy)); background-blend-mode: soft-light, normal, normal; }
.sp-cta h2 { color: #fff; max-width: 720px; }
.sp-cta h2 span { color: var(--coral); }
.sp-cta p { margin-top: 16px; max-width: 560px; font-size: 18px; color: #c9d4e1; }
.sp-cta__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sp-cta .fine { margin-top: 16px; font-size: 14px; line-height: 1.5; color: #9fb0c4; }   /* the small print, as the front page's .final__fine */
.sp-cta .eyebrow { margin: 0 0 14px; max-width: none; font-size: 13px; line-height: 1.2; color: var(--coral-soft); }
.sp-cta .fine a { color: #fff; font-weight: 600; }

/* ── footer: the front page's, standing on its own (no closing band above it) ── */
.foot { position: relative; overflow: hidden; margin: 0 16px 16px; border-radius: 28px; color: #9fb0c4;
  background: var(--grain) 0 0 / 300px, var(--navy); background-blend-mode: soft-light, normal; }
.foot__in { position: relative; z-index: 1; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: 48px; padding: 56px 0 40px; }
.foot__brand { display: grid; justify-items: start; align-content: start; }
.foot__home { display: inline-flex; align-items: center; min-height: 44px; margin: -7px 0; border-radius: 8px; }
.foot__wm { display: block; height: 30px; width: auto; }
.foot__tag { margin: 20px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: #9fb0c4; }
.foot__mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; min-height: 44px; padding: 0 16px; border-radius: 10px; color: #fff; font: 600 15px/1 var(--body);
  text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .2s, box-shadow .2s; }
.foot__mail .i { color: var(--coral-soft); }
.foot__mail:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot__hd { margin: 4px 0 14px; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-soft); }
.foot__cols a { display: flex; align-items: center; min-height: 36px; font-size: 15px; color: #dfe6ee; text-decoration: none; transition: color .15s; }
.foot__cols a:hover, .foot__cols a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__cols a[aria-current="page"] { text-decoration-color: var(--coral); }
.foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; color: #8193a8; }
.foot__act { display: flex; gap: 20px; }
.foot__act a { color: #cfd9e5; text-decoration: none; }
.foot__act a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__mark { height: 120px; margin-top: 4px; background: url("/assets/img/brand/fesk-wordmark-outline-white.svg?v=3") no-repeat 50% 0 / auto 230px; opacity: .1; pointer-events: none; }

/* ── legacy classes the page bodies still use (site-pages.css): kept so nothing breaks before each page's pass ── */
.mesh { background: radial-gradient(50% 70% at 85% 20%, rgba(232,133,122,.22), transparent 70%), var(--grain) 0 0 / 300px, linear-gradient(160deg, var(--navy-mid), var(--navy));
  background-blend-mode: normal, soft-light, normal; }
.grain { position: relative; }
.card { background: #fff; border-radius: 20px; box-shadow: var(--sh-card); }

/* ── tablet ── */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__in { display: flex; justify-content: space-between; }
}
@media (max-width: 1020px) {
  .sp-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .prose { padding: 48px; }
  .prose--plain { padding: 0; }
  .sp-toc { position: static; }
  /* "On this page" becomes a fold above the article */
  .sp-toc__box { border-radius: 18px; background: #fff; box-shadow: var(--sh-card); }
  .sp-toc__box > summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin: 0; padding: 0 12px 0 20px; -webkit-tap-highlight-color: transparent; }
  .sp-toc__box > summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 10px; transition: transform .25s var(--ease);
    background: var(--surface-2) no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b84f40' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  .sp-toc__box[open] > summary::after { transform: rotate(180deg); }
  #sp-toc-nav { padding: 8px; box-shadow: none; border-top: 1px solid var(--line); }
  .sp-toc a { min-height: 48px; margin: 0; padding: 0 12px; border-radius: 12px; font-size: 16px; }
  .sp-toc a.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--coral); }
  .sp-shead { grid-template-columns: minmax(0, 1fr); }
  .sp-shead > p:not(.eyebrow) { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ── phone: the front page's phone rules (premium-phone.css) ── */
@media (max-width: 760px) {
  :root { --nav-h: 58px; --graph: /* engineering paper (28 Sep 2026, fainter 18 Oct): faint 16px squares, a stronger line every 80px — matches the booking page */ linear-gradient(rgba(30,42,58,.03) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(30,42,58,.03) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(rgba(30,42,58,.012) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(30,42,58,.012) 1px, transparent 1px) 0 0 / 16px 16px; }
  html { scroll-padding-top: 74px; }
  .wrap, .wrap--narrow { width: calc(100% - 40px); }   /* 20px gutters */

  /* the bar: one line, the tile + wordmark, Sign in and Free trial; the grain as on the front page */
  .nav { background: var(--grain) 0 0 / 520px, var(--navy); background-blend-mode: soft-light, normal; border-bottom: 0; }
  .nav.is-stuck { box-shadow: 0 12px 28px -18px rgba(0,0,0,.8); }
  .nav__in { width: 100%; padding: 0 20px; gap: 4px; }
  .nav__brand { gap: 11px; margin-right: auto; }
  .nav__mark { height: 26px; }
  .nav__wm { height: 12px; }
  .nav__act { gap: 0; }
  .nav__signin, .nav__act .btn { position: relative; height: 38px; min-height: 0; padding: 0 14px; border-radius: 10px; font: 600 14px/1 var(--body); letter-spacing: -.005em; -webkit-tap-highlight-color: transparent; }
  .nav__signin { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  .nav__act .btn { margin-left: 8px; font-weight: 700; box-shadow: 0 6px 16px -8px rgba(212,103,91,.9); }
  .nav__signin::after, .nav__act .btn::after { content: ""; position: absolute; inset: -3px -2px; }   /* 44px tap area */
  .sprog { top: 56px; height: 2px; z-index: 41; }
  .sprog span { box-shadow: none; border-radius: 0 2px 2px 0; }

  .sp-hero { padding: 36px 0 28px; }
  .sp-hero__glow { inset: -40% -40% auto; height: 600px; }
  .eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 12px; }
  .sp-hero h1 { font-size: 36px; line-height: 1; max-width: none; }
  .sp-hero .lede { margin-top: 16px; font-size: 17px; line-height: 1.5; }
  .sp-meta { margin-top: 20px; }
  .sp-meta li { font-size: 13px; min-height: 32px; padding: 0 12px; }

  .sp-body { padding: 36px 0 40px; }
  .sp-hero + .sp-body { padding-top: 0; }
  .sp-layout { gap: 12px; }
  .prose { padding: 24px 20px 28px; border-radius: 18px; font-size: 16px; line-height: 1.6; }
  .prose--plain { padding: 0; border-radius: 0; }
  .prose p, .prose li { font-size: 16px; line-height: 1.6; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 18px; }
  .prose > h2:not(:first-child) { margin-top: 40px; padding-top: 32px; }
  .prose ul > li { padding-left: 20px; }
  .prose ul > li::before { left: 2px; }
  .prose blockquote { font-size: 15px; padding: 14px 16px; }
  .prose-callout, .sp-callout { gap: 12px; padding: 16px; border-radius: 16px; }
  .prose-callout .ico, .sp-callout__ic { width: 36px; height: 36px; border-radius: 11px; }
  .prose-callout p, .sp-callout p { font-size: 15px; }
  /* tables stack: one tinted panel, a row per entry split by hairlines, the first cell naming the row and the
     rest under it; 3+ column tables label each cell with its column (the script copies the header text) */
  .prose table, .prose thead, .prose tbody, .prose tr, .prose td,
  .sp-table, .sp-table thead, .sp-table tbody, .sp-table tr, .sp-table td { display: block; }
  .prose table, .sp-table { border-radius: 14px; background: var(--surface-2); font-size: 15px; }
  .prose thead, .sp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr, .sp-table tr { padding: 14px 16px; }
  .prose tr + tr, .sp-table tr + tr { border-top: 1px solid var(--line); }
  .prose td, .sp-table td { padding: 0; border: 0; font-size: 15px; }
  .prose td + td, .sp-table td + td { margin-top: 6px; }
  .is-labelled td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 13px/1.3 var(--body); color: var(--muted); }

  .sp-sec { padding: 40px 0; }
  .sp-hero + .sp-body > .sp-sec:first-child { padding-top: 8px; }
  .sp-shead { margin-bottom: 20px; }
  .sp-shead h2, .sp-cta h2 { font-size: 28px; line-height: 1.02; }
  .sp-shead > p:not(.eyebrow) { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .sp-cards, .sp-cards--2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-card { padding: 18px 18px 20px; border-radius: 18px; }
  .sp-card__ic { width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; }
  .sp-card h3 { font-size: 18px; }
  .sp-card p { font-size: 15px; }
  .sp-steps > li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 20px; }
  .sp-steps > li::before { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
  .sp-steps h3 { font-size: 18px; }
  .sp-steps p { font-size: 15px; }
  .sp-faq summary { min-height: 58px; padding: 0 16px; font-size: 16px; }
  .sp-faq details > :not(summary) { padding: 0 16px 16px; font-size: 15px; }
  .sp-cta { padding: 36px 20px; border-radius: 20px; }
  .sp-cta p { font-size: 16px; }
  .sp-cta .fine { font-size: 14px; }
  .sp-cta .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .sp-cta__act { margin-top: 24px; }
  .sp-cta__act .btn { width: 100%; }

  /* the footer: the brand centred, Product and Help side by side, the legal links in the base row */
  .foot { margin: 0 10px 10px; border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  .foot__in { width: auto; margin: 0; padding: 40px 20px 0; }
  .foot__top { display: block; padding: 0; }
  .foot__brand { justify-items: center; text-align: center; }
  .foot__wm { height: 22px; }
  .foot__tag { margin-top: 16px; max-width: none; }
  .foot__mail { justify-self: stretch; justify-content: center; gap: 8px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); }
  .foot__hd { margin: 0 0 4px; }
  .foot__cols a { min-height: 44px; }
  .foot__grp--legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
  .foot__grp--legal .foot__hd { display: none; }
  .foot__grp--legal a { font-size: 14px; color: #cfd9e5; }
  .foot__bar { display: block; padding: 4px 0 0; border: 0; }
  .foot__copy { font-size: 13px; line-height: 1.5; }
  .foot__act { display: none; }
  .foot__mark { height: 56px; margin: 24px 0 0; background-size: auto 96px; opacity: .12; }
}
@media (max-width: 360px) {
  .wrap, .wrap--narrow { width: calc(100% - 28px); }
  .foot__in { width: auto; padding-left: 14px; padding-right: 14px; }   /* the footer is a .wrap too: keep it centred on its own padding */
  .nav__in { padding: 0 14px; }
  .sp-hero h1 { font-size: 33px; }
  .sp-shead h2, .sp-cta h2 { font-size: 26px; }
}
@media (max-width: 340px) { .nav__wm { display: none; } }   /* the smallest phones: the mark alone */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001s !important; }
}
/* Phones under 430px: the menu carries the trial button, so the header keeps the logo, Sign in and the menu (18 Oct 2026) */
@media (max-width: 430px) { .nav__act .nav__cta { display: none; } }

/* ══ Consistency with the front page (21 Oct 2026) ══════════════════════════════════════════════════════════════
   One block, so the site pages read like the front page: navy section tags, the zebra bands, the section rhythm,
   the questions, card shadows and picture outlines, the tick green, the phone menu button, stacked tables, grouped
   cards on phones, navy card icons and step numbers, no coral left bars, plain hero meta on phones, the feature
   pages' "More features" list, and the white bar link with an arrow in a navy circle. */

/* 1. section tags: navy pills with white words (not in the hero or the navy closing band) */
.sp-shead > .eyebrow, .sp-sec > .wrap > .eyebrow {
  display: inline-flex; align-items: center; justify-self: start; align-self: start; width: fit-content;
  margin: 0 0 16px; padding: 7px 13px; border-radius: 999px; background: var(--navy); color: #fff; line-height: 1; }
@media (max-width: 760px) {
  .sp-shead > .eyebrow, .sp-sec > .wrap > .eyebrow { margin-bottom: 14px; padding: 6px 11px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; max-width: 100%; } }
@media (max-width: 374px) {
  .sp-shead > .eyebrow, .sp-sec > .wrap > .eyebrow { font-size: 11px; letter-spacing: .07em; padding: 6px 10px; } }

/* 2. zebra: every other section is the solid band, no hairline dividers (the front page dropped them 18 Oct) */
.rule::after { display: none; }
.sp-sec--tint { background: none; }
.sp-body > .sp-sec:nth-of-type(even):not(:has(.sp-cta)) { background: #dde5ef;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(30,42,58,.06); }
.sp-sec { padding: 64px 0; }
@media (min-width: 761px) { .sp-shead { margin-bottom: 48px; } }
@media (max-width: 760px) { .sp-sec { padding: 40px 0; } .sp-shead { margin-bottom: 24px; } }
/* the section after a band keeps its top space, so a band never runs straight into the navy closing band
   (pages that zero the closing section's top padding, such as .hc-end, did so before the bands) */
.sp-body > .sp-sec:nth-of-type(even):not(:has(.sp-cta)) + .sp-sec { padding-top: 64px; }
@media (max-width: 760px) { .sp-body > .sp-sec:nth-of-type(even):not(:has(.sp-cta)) + .sp-sec { padding-top: 40px; } }

/* 3. questions: body face 16px, round plus that becomes a filled navy minus, a fine rule under the open question */
.sp-faq { gap: 12px; }
.sp-faq details { border-radius: 18px; box-shadow: 0 0 0 1px rgba(30,42,58,.06), 0 1px 2px rgba(16,24,40,.04), 0 8px 20px -14px rgba(16,24,40,.22); }
.sp-faq details[open] { box-shadow: 0 0 0 1px rgba(30,42,58,.12), 0 2px 4px rgba(16,24,40,.04), 0 18px 34px -18px rgba(16,24,40,.38); }
.sp-faq summary { position: relative; min-height: 62px; padding: 12px 16px 12px 22px; gap: 14px; font: 700 16px/1.3 var(--body); letter-spacing: -.01em; text-wrap: balance; }
.sp-faq summary::after { width: 32px; height: 32px; border-radius: 50%; background-color: #fff; background-size: 13px; box-shadow: inset 0 0 0 1.5px #d3dae3; transition: background-color .2s, box-shadow .2s; }
.sp-faq details[open] summary::after { transform: none; background-color: var(--navy); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.sp-faq details[open] > summary::before { content: ""; position: absolute; left: 22px; right: 16px; bottom: 0; height: 1px; background: #edf0f4; }
.sp-faq details[open] > summary + * { padding-top: 14px; }
.sp-faq details > :not(summary) { text-wrap: pretty; }
@media (max-width: 760px) {
  .sp-faq summary { padding: 12px 16px 12px 20px; font-size: 16px; }
  .sp-faq details[open] > summary::before { left: 20px; }
  .sp-faq details > :not(summary) { padding-left: 20px; padding-right: 20px; } }

/* 4. cards: the front page's hairline and long soft shadow; a faint line round pictures */
:root { --sh-card: 0 0 0 1px rgba(30,42,58,.06), 0 2px 4px rgba(16,24,40,.04), 0 16px 32px -22px rgba(16,24,40,.35); }
.sp-card img, .sp-hero__img { outline: .75px solid rgba(30,42,58,.14); outline-offset: -.75px; }

/* 5. ticks in the front page's green */
.sp-ticks li::before, .prose .sp-ticks > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7a50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* 6. phone bar: the menu button pairs with Sign in as on the front page (40 x 38, outline, no fill) */
@media (max-width: 760px) {
  .nav__signin { background: transparent; }
  .nav .smenu-btn { position: relative; width: 40px; height: 38px; margin-left: 8px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  .nav .smenu-btn svg { width: 18px; height: 18px; }
  .nav .smenu-btn::after { content: ""; position: absolute; inset: -3px -2px; } }

/* 7. stacked tables on phones: a row-header cell stacks too; one white card with fine dividers */
@media (max-width: 760px) {
  .prose table, .sp-table { border: 0; background: #fff; box-shadow: var(--sh-card); }
  .prose tr + tr, .sp-table tr + tr { border-top-color: #edf0f4; }
  .prose tbody th, .sp-table tbody th, .sp-table tbody th[scope="row"] { display: block; padding: 0; border: 0; background: none; }
  .prose tbody th + td, .sp-table tbody th + td { margin-top: 6px; }
  .sp-table.sp-table { min-width: 0; } }   /* page tables that scroll sideways on desktop (.cp-table min-width 560px) must not on a phone */

/* 8. phones: a row of .sp-cards is one white card with fine dividers (as the /features/ phone list and the front
   page's "Up and running" card), not a stack of floating cards. Feature-page .ft-more lists have their own (11). */
@media (max-width: 760px) {
  .sp-cards:not(.ft-more) { gap: 0; padding: 4px 0; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); }
  .sp-cards:not(.ft-more) > .sp-card { position: relative; padding: 20px; border-radius: 0; background: none; box-shadow: none; }
  .sp-cards:not(.ft-more) > .sp-card + .sp-card::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: #edf0f4; }
}

/* 9. card icons and step numbers in navy (the front page moved coral to navy); help.php keeps its indigo AI tile */
.sp-card__ic { background: linear-gradient(155deg, #2d3d52, #19222e); color: #9fd4ee;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 18px -12px rgba(16,24,40,.7); }
.sp-steps > li::before { border-radius: 50%; background: var(--navy); color: #fff; }

/* 10. no coral left bars: the quote keeps a soft tint, the "On this page" link being read is a soft navy tint */
.prose blockquote { box-shadow: inset 0 0 0 1px var(--line); }
.sp-toc a.active { color: var(--navy); font-weight: 700; background: rgba(30,42,58,.07); box-shadow: none; }

/* hero meta ("Last updated", "N min read") on phones: one plain line, not wrapping pills */
@media (max-width: 760px) {
  .sp-meta { display: block; margin-top: 16px; font: 600 14px/1.5 var(--body); color: var(--muted); }
  .sp-meta li { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; }
  .sp-meta li svg { display: none; }
  .sp-meta li + li::before { content: "\00a0\00b7\0020"; } }

/* 11. the feature pages' "More features" cards (moved here from each page) and, on phones, one grouped list as on
   /features/: a 40px icon tile, the name and line, a chevron; fine dividers from the text's left edge */
.ft-more li { display: flex; }
.ft-more a.sp-card { flex: 1; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ft-more a.sp-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.ft-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font: 700 15px/1.2 var(--body); color: var(--navy); }
.ft-go svg { color: var(--coral-dk); }
@media (max-width: 760px) {
  .ft-more:not(.ft-hub) { gap: 0; padding: 4px 0; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); }
  .ft-more:not(.ft-hub) > li { position: relative; }
  .ft-more:not(.ft-hub) > li + li::before { content: ""; position: absolute; z-index: 1; top: 0; left: 72px; right: 16px; height: 1px; background: #edf0f4; }
  .ft-more:not(.ft-hub) > li > a.sp-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; grid-template-rows: auto auto; column-gap: 16px;
    align-items: center; padding: 14px 16px; border-radius: 0; background: none; box-shadow: none; transform: none; }
  .ft-more:not(.ft-hub) > li:first-child > a.sp-card { border-radius: 22px 22px 0 0; }
  .ft-more:not(.ft-hub) > li:last-child > a.sp-card { border-radius: 0 0 22px 22px; }
  .ft-more:not(.ft-hub) > li > a.sp-card:hover { transform: none; box-shadow: none; }
  .ft-more:not(.ft-hub) > li > a.sp-card:active { background: #f5f7fa; }
  .ft-more:not(.ft-hub) > li > a.sp-card .sp-card__ic { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
  .ft-more:not(.ft-hub) > li > a.sp-card h3 { grid-column: 2; align-self: end; margin: 0; font-size: 16px; line-height: 1.25; }
  .ft-more:not(.ft-hub) > li > a.sp-card p { grid-column: 2; align-self: start; margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: #4f6377; text-wrap: pretty; }
  .ft-more:not(.ft-hub) > li > a.sp-card .ft-go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; gap: 0; font-size: 0; }
  .ft-more:not(.ft-hub) > li > a.sp-card .ft-go svg { width: 16px; height: 16px; color: #9aa7b6; }
}

/* 12. the "see more" link as a white bar with the arrow in a small navy circle (front page #ph-how .p-carall):
   .sp-barlink at every width; .sp-barlink--ph only on phones (a button or page link that stays as it is on desktop) */
.sp-barlink { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 260px; min-height: 56px; padding: 0 8px 0 20px;
  border-radius: 16px; background: #fff; color: var(--navy); font: 700 15.5px/1.2 var(--body); letter-spacing: -.005em; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(30,42,58,.08), 0 2px 4px rgba(16,24,40,.04), 0 12px 24px -18px rgba(16,24,40,.45);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.sp-barlink svg { flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 10px; border-radius: 50%; background: var(--navy); color: #fff; transition: transform .2s var(--ease); }
.sp-barlink:hover { box-shadow: 0 0 0 1px rgba(30,42,58,.16), 0 2px 4px rgba(16,24,40,.05), 0 14px 28px -18px rgba(16,24,40,.5); }
.sp-barlink:hover svg { transform: translateX(2px); }
.sp-barlink:active { transform: scale(.985); }
.ft-more + .sp-barlink { margin-top: 20px; }
@media (max-width: 760px) {
  .sp-barlink { display: flex; width: 100%; min-width: 0; }
  .ft-more + .sp-barlink { margin-top: 16px; }
  .sp-barlink--ph.sp-barlink--ph { display: flex; justify-content: space-between; gap: 20px; width: 100%; min-height: 56px; padding: 0 8px 0 20px; border-radius: 16px;
    background: #fff; color: var(--navy); font: 700 15.5px/1.2 var(--body); letter-spacing: -.005em; text-decoration: none;
    box-shadow: 0 0 0 1px rgba(30,42,58,.08), 0 2px 4px rgba(16,24,40,.04), 0 12px 24px -18px rgba(16,24,40,.45); }
  .sp-barlink--ph.sp-barlink--ph svg { flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 10px; border-radius: 50%; background: var(--navy); color: #fff; transform: none; }
  .sp-barlink--ph.sp-barlink--ph:active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) { .sp-barlink, .sp-barlink svg { transition: none; } .sp-barlink:active, .sp-barlink--ph.sp-barlink--ph:active { transform: none; } }