/* ==========================================================================
   Otimiz marketing subpages, Plainly-derived LIGHT skin (2026-10-14, wave 1).
   Brings every marketing subpage (body.subpage) and /book/ (body.v2-book) to the
   look of the new homepage (css/home-plainly.css): Jost for all text, Anton
   uppercase for page H1s and CTA-panel headings, paper #FAF9F5 / #F3F2ED,
   ink #1F1E1D, logo blue #1F58EA, hairline rails, rounded hero frame with a
   square grid and a soft blue glow, white hairline cards, glow CTA panel, the
   homepage header and footer.
   Loaded LAST, after v2-base.css + site-v2.css (+ v2-polish.css, free-library.css,
   booking-flow.css where present). It only restyles existing markup; the only
   injected elements are the two hero light blobs (.sp-orb, js/site-plainly.js).
   MOBILE FIRST: base rules are the phone; 768 / 1024 only widen.
   Scroll motion lives in js/site-plainly.js (inline GSAP start states only).
   Nothing in this file hides content at rest. The one exception in motion is the hero
   entrance at the end of this file (2026-10-16): CSS keyframes that start at first paint
   on pages marked html[data-hero="css"], and always end visible.
   ========================================================================== */

@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/jost-var.woff2') format('woff2');
}

/* ---------- Tokens: the homepage palette, mapped onto the v2 token names ---------- */
:root {
  --pf-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --pf-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --pf-code: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --pf-bg: #FAF9F5;
  --pf-bg-2: #F3F2ED;
  --pf-card: #FFFFFF;
  --pf-line: rgba(31,30,29,.1);
  --pf-line-2: rgba(31,30,29,.16);
  --pf-text: #1F1E1D;
  --pf-muted: #55534E;
  --pf-soft: #6B6963;
  --pf-blue: #1F58EA;
  --pf-blue-h: #1A4CCB;
  --pf-blue-ink: #1A4CCB;
  --pf-blue-50: #F3F6FE;
  --pf-blue-line: rgba(31,88,234,.32);
  --pf-glow: rgba(31,88,234,.28);
  --pf-rail: 1240px;
  --pf-pad: 20px;
  --pf-sec: 64px;
  --pf-ring: 0 0 0 3px var(--pf-bg), 0 0 0 5px var(--pf-blue);

  /* v2 tokens re-pointed: every component that reads them follows */
  --font-display: var(--pf-sans);
  --font-body: var(--pf-sans);
  --font-mono: var(--pf-sans);
  --paper-page: var(--pf-bg);
  --paper-panel: var(--pf-bg-2);
  --paper-muted: var(--pf-bg-2);
  --paper-card: #FCFBF8;
  --border-subtle: var(--pf-line);
  --border-strong: var(--pf-line-2);
  --border-brand: var(--pf-blue-line);
  --container: var(--pf-rail);
  --gutter: var(--pf-pad);
  --radius-card: 16px;
  --focus-ring: var(--pf-ring);
}
@media (max-width: 360px) { :root { --pf-pad: 16px; } }
@media (min-width: 768px) { :root { --pf-pad: 32px; --pf-sec: 96px; } }

/* ---------- Base ---------- */
body.subpage, body.v2-book {
  background: var(--pf-bg); color: var(--pf-text);
  font-family: var(--pf-sans); font-size: 17px; line-height: 1.5; letter-spacing: -0.01em;
}
@media (min-width: 768px) { body.subpage { font-size: 18px; } }
.subpage ::selection, .v2-book ::selection { background: var(--pf-blue); color: #fff; }
.subpage :focus-visible { outline: none; box-shadow: var(--pf-ring); border-radius: 8px; }
.subpage :is(code, kbd, samp, pre), .subpage .fl-code pre, .subpage .article code { font-family: var(--pf-code); letter-spacing: 0; }

/* Scroll progress (js/site-plainly.js scrubs scaleX; not built on pages with a reading bar) */
.subpage .sp-bar {
  position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, #1F58EA, #6E95F5);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
/* Reading progress (guides, compare, legal): same gradient as the homepage bar */
.subpage .rprog { height: 3px; }
.subpage .rprog__bar { background: linear-gradient(90deg, #1F58EA, #6E95F5); }

/* ---------- Kicker pill: the homepage .kick > i, drawn with pseudo-elements ---------- */
.subpage :is(.eyebrow, .eyebrow--light), body.subpage .acta__eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pf-sans); font-size: 14px; font-weight: 500; line-height: 1;
  letter-spacing: 0; text-transform: none; color: var(--pf-text);
  padding: 4px 12px 4px 4px; border-radius: 8px;
  border: 1px solid var(--pf-blue-line); background: var(--pf-blue-50); backdrop-filter: none;
}
.subpage :is(.eyebrow, .eyebrow--light)::before, body.subpage .acta__eyebrow::before {
  content: ''; width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
  background: var(--pf-blue); box-shadow: 0 4px 12px -2px var(--pf-glow);
}
.subpage :is(.eyebrow, .eyebrow--light)::after, body.subpage .acta__eyebrow::after {
  content: ''; position: absolute; left: 12px; top: 50%; margin-top: -4px;
  border-left: 7px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.subpage .s-case__label { color: var(--pf-text); }

/* ---------- Breadcrumb ---------- */
.subpage .crumbs { font-family: var(--pf-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--pf-soft); gap: 8px; }
.subpage .crumbs a { color: var(--pf-soft); }
.subpage .crumbs a:hover { color: var(--pf-blue-ink); }
.subpage .crumbs__current { color: var(--pf-text); font-weight: 500; }

/* ---------- Buttons: 12px radius, blue fill with the shine sweep ---------- */
.subpage .btn, .v2-book .booking-primary {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--pf-sans); font-size: 16px; font-weight: 500; letter-spacing: 0;
  border-radius: 12px; padding: 11px 20px; line-height: 1.2; min-height: 48px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.subpage :is(.btn--primary, .btn--white, .btn--dark), .v2-book .booking-primary {
  background: var(--pf-blue); color: #fff; border: 1px solid var(--pf-blue);
  box-shadow: 0 8px 20px -10px var(--pf-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
/* Shine sweep (replaces the polish layer's arrow glyph on large buttons) */
.subpage :is(.btn--primary, .btn--white, .btn--dark)::after, .subpage :is(.btn--primary, .btn--white).btn--lg::after, .v2-book .booking-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; flex: none;
  -webkit-mask: none; mask: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.subpage :is(.btn--primary, .btn--white, .btn--dark):is(:hover, :focus-visible)::after,
.subpage :is(.btn--primary, .btn--white).btn--lg:hover::after, .v2-book .booking-primary:hover::after { transform: translateX(120%); }
.subpage :is(.btn--primary, .btn--white, .btn--dark):hover, .v2-book .booking-primary:hover {
  background: var(--pf-blue-h); border-color: var(--pf-blue-h); color: #fff;
  box-shadow: 0 14px 30px -12px var(--pf-glow), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px);
}
.subpage :is(.btn--ghost, .btn--soft) { background: var(--pf-card); color: var(--pf-text); border: 1px solid var(--pf-line-2); box-shadow: none; }
.subpage :is(.btn--ghost, .btn--soft):hover { border-color: var(--pf-blue-line); background: var(--pf-blue-50); color: var(--pf-text); transform: none; }
.subpage .btn--lg, .subpage .btn--ghost.btn--lg { font-size: 17px; padding: 14px 24px; }
.subpage .btn--sm, .subpage .btn--ghost.btn--sm { font-size: 15px; padding: 9px 16px; min-height: 40px; }
.subpage .btn:focus-visible { outline: none; box-shadow: var(--pf-ring); }

/* ---------- Header: identical to the homepage (.pf .ncl) ---------- */
.subpage .ncl { background: rgba(250,249,245,.82); border-bottom-color: transparent; }
@supports (backdrop-filter: blur(10px)) { .subpage .ncl { backdrop-filter: saturate(160%) blur(12px); } }
.subpage .ncl.is-stuck { background: rgba(250,249,245,.9); border-bottom-color: var(--pf-line); box-shadow: none; }
.subpage .ncl__in { max-width: var(--pf-rail); padding: 0 var(--pf-pad); }
.subpage .nav__link { font-family: var(--pf-sans); font-size: 15px; color: rgba(31,30,29,.78); letter-spacing: 0; }
.subpage .nav__link::after { background: var(--pf-blue); }
.subpage .nav__link:hover, .subpage .nav__item.is-open .nav__link { color: var(--pf-text); }
.subpage .nav__menu-link, .subpage .nav__menu-all { font-family: var(--pf-sans); font-size: 14.5px; }
.subpage .lang { border-radius: 9px; }
.subpage .lang__btn { font-family: var(--pf-sans); font-size: 13px; }
.subpage .mnav__row { font-family: var(--pf-sans); font-size: 18px; }
.subpage .mnav__sub a { font-family: var(--pf-sans); font-size: 16px; }
.subpage .btn--nav { font-size: 13.5px; padding: 8px 11px; border-radius: 10px; min-height: 0; }
@media (max-width: 360px) {
  .subpage .btn--nav { font-size: 12.5px; padding: 8px 9px; }
  .subpage .ncl__in { gap: 6px; }
}
@media (min-width: 900px) { .subpage .btn--nav { font-size: 14px; padding: 9px 13px; } }

/* ---------- Hero: the homepage hero frame (rounded, faint grid, soft blue glow) ---------- */
.subpage .shero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 8px max(8px, calc((100% - 1440px) / 2)) 0; border-radius: 22px;
  border: 1px solid var(--pf-line);
  background:
    radial-gradient(95% 55% at 50% 100%, rgba(31,88,234,.2), rgba(31,88,234,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 55%, #E8EEFC 100%);
  padding: 44px 0 52px;
}
.subpage .shero__grid {
  display: block; position: absolute; inset: -56px 0 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(31,30,29,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,30,29,.055) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 25%, transparent 78%);
          mask-image: radial-gradient(75% 65% at 50% 35%, #000 25%, transparent 78%);
}
/* Soft blue light blobs (spans injected by js/site-plainly.js, aria-hidden, no text) */
.subpage .sp-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(40px); }
.subpage .sp-orb--a { width: 260px; height: 260px; left: -90px; top: 18%; background: rgba(31,88,234,.16); }
.subpage .sp-orb--b { width: 300px; height: 300px; right: -120px; bottom: -60px; background: rgba(110,149,245,.22); }
.subpage .shero .container { position: relative; }
.subpage .shero .crumbs { margin-bottom: 22px; }
.subpage .shero__title {
  margin-top: 18px; font-family: var(--pf-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 5.2vw + 18px, 88px); line-height: 1.04; letter-spacing: .004em;
  color: var(--pf-text); font-variation-settings: normal; text-wrap: balance; overflow-wrap: break-word;
}
.subpage .shero__title em { font-style: normal; color: var(--pf-blue); }
.subpage .shero__lead { margin-top: 18px; max-width: 700px; font-size: 17px; line-height: 1.55; color: var(--pf-muted); letter-spacing: -0.005em; }
.subpage .shero__cta { margin-top: 26px; gap: 10px; }
.subpage .trust-inline { margin-top: 24px; padding-top: 18px; border-top-color: var(--pf-line); }
.subpage .trust-inline .stars { color: #E09B12; border-right-color: var(--pf-line-2); }
.subpage .trust-inline__text { font-size: 15px; color: var(--pf-muted); }
.subpage .post-meta { font-size: 15px; color: var(--pf-muted); gap: 10px; }
.subpage .post-meta__author { color: var(--pf-text); font-weight: 500; }
.subpage .post-meta__author img { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pf-line-2); }
.subpage .post-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--pf-blue); opacity: .55; }
/* Split hero media: the illustration sits on the frame's glow */
.subpage .shero__media img { border-radius: 18px; border-color: var(--pf-line-2); }
.subpage .shero__media:has(img[src*="bastien"]) {
  border-radius: 18px; border: 1px solid var(--pf-line-2);
  background: radial-gradient(70% 60% at 50% 100%, rgba(31,88,234,.28), rgba(31,88,234,0) 75%), linear-gradient(180deg, #FFFFFF, #EEF2FC);
}

/* ---------- Rails: page column framed by two hairlines, sections split by one ---------- */
.subpage .s-section { padding: 0; }
.subpage .s-section > .container {
  position: relative; max-width: var(--pf-rail);
  padding: var(--pf-sec) var(--pf-pad);
  border-left: 1px solid var(--pf-line); border-right: 1px solid var(--pf-line);
}
/* Narrow sections keep the full-width rail; only the content column narrows. */
.subpage .s-section > .container--narrow {
  padding-left: max(var(--pf-pad), calc((min(100vw, var(--pf-rail)) - 860px) / 2));
  padding-right: max(var(--pf-pad), calc((min(100vw, var(--pf-rail)) - 860px) / 2));
}
.subpage main > section + section.s-section > .container { border-top: 1px solid var(--pf-line); }
.subpage .s-section--soft { background: var(--pf-bg-2); border: 0; }
.subpage :is(.s-section, .shero) { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- Section heads: centred, Jost 700 ---------- */
.subpage .s-head { gap: 0; margin-bottom: 32px; }
.subpage .s-section > .container > .s-head { margin-left: auto; margin-right: auto; max-width: 820px; align-items: center; text-align: center; }
/* Exception for readability: a head authored left-aligned WITH a lede stays left (those ledes run
   up to 700 characters; centred, they read badly on a phone). It sits on the rail's left edge, the
   chips and lists under it follow, and from 1024px the polish layer's editorial split (title left,
   lede right) takes over. Every other head is centred like the homepage's. */
.subpage .s-section > .container > .s-head:not(.s-head--center):has(> .s-sub) { max-width: 760px; margin-left: 0; margin-right: auto; align-items: flex-start; text-align: left; }
.subpage .s-section > .container > .s-head:not(.s-head--center):has(> .s-sub) ~ .s-list { margin-left: 0; }
.subpage .s-title {
  margin-top: 16px; font-family: var(--pf-sans); font-weight: 700;
  font-size: clamp(30px, 2.4vw + 22px, 52px); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--pf-text); font-variation-settings: normal; text-wrap: balance;
}
.subpage .s-head > .s-title:first-child { margin-top: 0; }
.subpage .s-sub { margin-top: 12px; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--pf-muted); text-wrap: pretty; }
.subpage .s-sub strong { color: var(--pf-text); font-weight: 600; }
/* Word spans built by js/site-plainly.js for the rise-per-word heading reveal */
.subpage .w { display: inline-block; }
@media (min-width: 768px) {
  .subpage .s-head { margin-bottom: 44px; }
  .subpage .s-sub { font-size: 18px; }
}
@media (min-width: 1024px) {
  /* Left head with a lede: the polish layer's editorial grid (eyebrow + title left, lede right). */
  .subpage .s-section > .container > .s-head:not(.s-head--center):has(> .s-sub) { max-width: none; }
  .subpage .s-section > .container > .s-head:not(.s-head--center):has(> .s-sub) > .s-title { margin-top: 0; }
  .subpage .s-section > .container > .s-head:not(.s-head--center):has(> .s-sub) > .s-sub { margin-top: 0; max-width: none; }
  /* Title-only left heads over bare paragraphs (case studies): centred head, centred reading column. */
  .subpage .s-section > .container:has(> .s-head:not(.s-head--center) + p):not(:has(> :not(.s-head, p))) { display: block; }
  .subpage .s-section > .container:has(> .s-head:not(.s-head--center) + p):not(:has(> :not(.s-head, p))) > .s-head { margin-bottom: 44px; }
  .subpage .s-section > .container:has(> .s-head:not(.s-head--center) + p):not(:has(> :not(.s-head, p))) > p:first-of-type { padding-top: 0; font-size: 20px; color: var(--pf-text); }
}

/* ---------- Prose ---------- */
.subpage .s-section > .container > p:not(.s-sub) { margin-left: auto; margin-right: auto; max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--pf-muted); }
.subpage .s-prose p { font-size: 17px; line-height: 1.65; color: var(--pf-muted); max-width: 70ch; }
.subpage :is(.s-prose, .s-section > .container > p) strong { color: var(--pf-text); font-weight: 600; }
.subpage .s-lead-para { color: var(--pf-text) !important; }
@media (min-width: 768px) {
  .subpage .s-section > .container > p:not(.s-sub), .subpage .s-prose p { font-size: 18px; }
}
.subpage :is(.s-sub, .s-prose, .step__desc, .feature__desc, .faq__a p, .article, .takeaways, .trust-inline__text, .s-section > .container > p, .s-list) a:not(.btn) {
  color: var(--pf-blue-ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(31,88,234,.4); text-underline-offset: 3px; background-image: none;
}
.subpage :is(.s-sub, .s-prose, .step__desc, .feature__desc, .faq__a p, .article, .takeaways, .trust-inline__text, .s-section > .container > p, .s-list) a:not(.btn):hover { color: var(--pf-blue); text-decoration-color: var(--pf-blue); }
.subpage .s-split { gap: 32px; }
@media (min-width: 1024px) { .subpage .s-split { gap: 72px; } }

/* ---------- Problem callout ---------- */
.subpage .s-problem {
  background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,30,29,.04); padding: 24px 20px;
}
.subpage .s-section > .container > .s-problem { margin-left: auto; margin-right: auto; }
.subpage .s-problem:hover { border-color: var(--pf-blue-line); box-shadow: 0 24px 44px -30px rgba(31,88,234,.5); }
.subpage .s-problem__tag {
  font-family: var(--pf-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pf-blue-ink); background: var(--pf-blue-50); border: 1px solid var(--pf-blue-line); border-radius: 999px; padding: 5px 11px;
}
.subpage .s-problem p { font-size: 17px; line-height: 1.6; color: var(--pf-muted); }

/* ---------- Cards: white, hairline, 16px radius, blue border + glow on hover ---------- */
.subpage :is(.step, .feature, .svc-card, .post-card) {
  background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,30,29,.04);
  transition: border-color .25s ease, box-shadow .3s ease;
}
.subpage :is(.step, .feature, .svc-card, .post-card):hover {
  transform: none; border-color: var(--pf-blue-line); box-shadow: 0 24px 44px -30px rgba(31,88,234,.5);
}
.subpage :is(.feature__ico, .svc-card__ico) {
  width: 44px; height: 44px; padding: 0; border-radius: 12px; color: var(--pf-blue);
  background: var(--pf-blue-50); border: 1px solid var(--pf-blue-line); box-shadow: none;
}
.subpage :is(.feature__ico, .svc-card__ico) svg { width: 22px; height: 22px; }
.subpage :is(.feature__title, .svc-card__title, .post-card__title, .step__title) {
  font-family: var(--pf-sans); font-weight: 700; letter-spacing: -0.01em; color: var(--pf-text); font-variation-settings: normal;
}
.subpage :is(.svc-card__title, .post-card__title) { font-size: 22px; line-height: 1.25; }
.subpage :is(.feature__title, .step__title) { font-size: 20px; line-height: 1.3; }
.subpage :is(.feature__desc, .svc-card__desc, .post-card__excerpt, .step__desc) { font-size: 16px; line-height: 1.55; color: var(--pf-muted); }
.subpage :is(.svc-card__link, .post-card__link) { font-size: 15px; font-weight: 500; color: var(--pf-blue-ink); }
.subpage .svc-card:hover .svc-card__link, .subpage .post-card:hover .post-card__link { color: var(--pf-blue); }
.subpage .post-card__tag {
  font-family: var(--pf-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pf-blue-ink); background: var(--pf-blue-50); box-shadow: none; border: 1px solid var(--pf-blue-line); border-radius: 999px; padding: 5px 10px;
}
.subpage .post-card__meta { font-family: var(--pf-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-soft); border-top-color: var(--pf-line); }
.subpage .post-card__link { border-top-color: var(--pf-line); }
.subpage .post-grid:has(> :nth-child(7):last-child) > .post-card:first-child {
  background: radial-gradient(90% 120% at 100% 0%, rgba(31,88,234,.1), rgba(31,88,234,0) 60%), var(--pf-card);
}

/* Steps: Jost numerals in logo blue */
.subpage .step__num {
  font-family: var(--pf-sans); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.02em;
  color: var(--pf-blue); font-variation-settings: normal; font-variant-numeric: tabular-nums;
}
.subpage .step > .step__num { font-size: 32px; }
.subpage .step:hover .step__num { color: var(--pf-blue-h); }
@media (min-width: 700px) {
  .subpage .steps:not(:has(> .step:nth-child(5))) > .step > .step__num { font-size: 38px; }
}
.subpage .steps:has(> .step:nth-child(5)) > .step { border-top-color: var(--pf-line); background: none; box-shadow: none; }
.subpage .steps:has(> .step:nth-child(5)) > .step:last-child { border-bottom-color: var(--pf-line); }
.subpage .steps:has(> .step:nth-child(5)) > .step:hover { border-color: var(--pf-line); border-left-color: transparent; border-right-color: transparent; box-shadow: none; }

/* ---------- Result panel: the homepage glow panel ---------- */
.subpage .s-case {
  border: 1px solid var(--pf-blue-line); border-radius: 22px; box-shadow: none;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(31,88,234,.2), rgba(31,88,234,0) 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(110,149,245,.14), rgba(110,149,245,0) 70%),
    linear-gradient(160deg, #FFFFFF 0%, #EEF2FC 100%);
}
.subpage .s-case__quote { font-family: var(--pf-sans); font-weight: 600; font-size: 22px; line-height: 1.35; letter-spacing: -0.015em; color: var(--pf-text); font-variation-settings: normal; }
.subpage .s-case__quote span { color: var(--pf-blue); }
.subpage .s-case__stat { border-color: var(--pf-blue-line); }
.subpage .s-case__num { font-family: var(--pf-sans); font-weight: 700; color: var(--pf-blue); letter-spacing: -0.03em; font-variation-settings: normal; }
.subpage .s-case__cap { font-size: 15px; color: var(--pf-muted); }
@media (min-width: 900px) { .subpage .s-case__quote { font-size: 28px; } }

/* ---------- Results list, testimonial, tools, related ---------- */
.subpage .s-list { gap: 14px; }
.subpage .s-section > .container > .s-list { margin-left: auto; margin-right: auto; }
.subpage .s-list li { font-size: 17px; line-height: 1.55; color: var(--pf-muted); }
.subpage .s-list li strong { color: var(--pf-text); font-weight: 600; }
.subpage .s-list li::before { background: var(--pf-blue-50); border-color: var(--pf-blue-line); }
.subpage .s-quote {
  background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,30,29,.04); padding: 26px 22px 24px;
}
.subpage .s-quote:hover { border-color: var(--pf-blue-line); box-shadow: 0 24px 44px -30px rgba(31,88,234,.5); }
.subpage .s-quote::before { width: 30px; height: 23px; margin-bottom: 14px; background: var(--pf-blue); }
.subpage .s-quote__text { font-family: var(--pf-sans); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: var(--pf-text); font-variation-settings: normal; }
.subpage .s-quote__cite { font-size: 15px; color: var(--pf-soft); padding-top: 14px; border-top: 1px solid var(--pf-line); }
.subpage .s-quote__cite strong { color: var(--pf-text); font-weight: 600; }
.subpage .upwork-link { font-size: 12px; color: var(--pf-text); border-color: var(--pf-line-2); border-radius: 7px; padding: 5px 9px; }
.subpage .upwork-link:hover { background: var(--pf-blue-50); border-color: var(--pf-blue-line); }
@media (min-width: 768px) {
  .subpage .s-quote { padding: 36px 36px 30px; }
  .subpage .s-quote__text { font-size: 23px; }
}
.subpage .tools { gap: 8px; }
.subpage .s-section > .container > .s-head--center ~ .tools { justify-content: center; }
.subpage .tools__chip {
  font-size: 15px; color: var(--pf-text); background: var(--pf-card); border: 1px solid var(--pf-line-2);
  border-radius: 999px; padding: 8px 15px 8px 11px; box-shadow: none;
}
.subpage .tools__chip:hover { transform: none; border-color: var(--pf-blue-line); background: var(--pf-blue-50); box-shadow: none; }
.subpage .related { border-top-color: var(--pf-line-2); }
.subpage .related a { font-size: 17px; font-weight: 500; color: var(--pf-text); border-color: var(--pf-line); min-height: 56px; }
.subpage .related a:hover { color: var(--pf-blue-ink); }
.subpage .related a::after { background: var(--pf-blue); }
@media (min-width: 700px) { .subpage .related a:nth-child(-n+2) { border-top-color: var(--pf-line-2); } }
@media (min-width: 1100px) { .subpage .related:not(:has(> a:nth-child(3n+1):last-child)) > a:nth-child(3) { border-top-color: var(--pf-line-2); } }

/* ---------- FAQ: rounded cards (homepage .faq__item) ---------- */
.subpage .faq__list { margin-top: 32px; border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.subpage .s-faq .faq__list { max-width: none; margin: 0; }
.subpage .s-head + .faq__list { margin-top: 0; }
.subpage .faq__item { border: 1px solid var(--pf-line-2); border-radius: 14px; background: var(--pf-card); transition: border-color .2s ease, box-shadow .25s ease; }
.subpage .faq__item:hover, .subpage .faq__item.is-open { border-color: var(--pf-blue-line); }
.subpage .faq__item.is-open { box-shadow: 0 20px 40px -30px rgba(31,88,234,.5); }
.subpage .faq__q {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 16px; font-family: var(--pf-sans); font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--pf-text); text-align: left; border-radius: 14px;
}
.subpage .faq__q:hover { color: var(--pf-text); }
.subpage .faq__q > span:nth-child(2) { flex: 1; font-weight: 600; letter-spacing: -0.005em; }
.subpage .faq__num { font-family: var(--pf-sans); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--pf-blue-ink); flex: 0 0 auto; }
.subpage .faq__chevron {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pf-line-2); color: var(--pf-muted);
  transition: transform .3s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.subpage .faq__chevron svg { width: 12px; height: 12px; }
.subpage .faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(45deg); background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.subpage .faq__a p { padding: 0 16px 18px; max-width: none; font-size: 16px; line-height: 1.65; color: var(--pf-muted); }
@media (min-width: 1024px) {
  .subpage .faq__q { padding: 20px 22px; font-size: 18px; }
  .subpage .faq__a p { padding: 0 22px 22px; font-size: 17px; }
}

/* ---------- Article (guides, comparisons, legal, privacy): long-form reading ---------- */
.subpage .article { max-width: 700px; margin-left: auto; margin-right: auto; }
/* Long bare URLs (privacy, legal) must wrap inside the column, never widen the page. */
.subpage :is(.article, .fl-body, .s-prose, .faq__a, .takeaways, .s-section > .container > p) { overflow-wrap: break-word; }
.subpage .article > * + * { margin-top: 22px; }
.subpage .article__lead { font-family: var(--pf-sans); font-weight: 400; font-size: 20px; line-height: 1.55; color: var(--pf-text); letter-spacing: -0.01em; font-variation-settings: normal; }
.subpage .article h2 { font-family: var(--pf-sans); font-weight: 700; font-size: clamp(26px, 1.2vw + 21px, 36px); line-height: 1.18; letter-spacing: -0.02em; color: var(--pf-text); margin-top: 52px; font-variation-settings: normal; }
.subpage .article h3 { font-family: var(--pf-sans); font-weight: 700; font-size: clamp(20px, .5vw + 18px, 24px); line-height: 1.3; letter-spacing: -0.01em; color: var(--pf-text); margin-top: 36px; font-variation-settings: normal; }
.subpage .article h4 { font-family: var(--pf-sans); font-weight: 700; font-size: 18px; color: var(--pf-text); margin-top: 28px; }
.subpage .article :is(p, ul, ol) { font-size: 17px; line-height: 1.65; color: var(--pf-muted); letter-spacing: -0.005em; }
.subpage .article :is(p, li) strong { color: var(--pf-text); font-weight: 600; }
.subpage .article ul > li::before { background: var(--pf-blue); }
.subpage .article ol > li::marker { font-family: var(--pf-sans); font-weight: 600; color: var(--pf-blue-ink); }
.subpage .article blockquote {
  margin-top: 40px; padding: 24px 0 4px; border-top: 1px solid var(--pf-line-2);
  font-family: var(--pf-sans); font-weight: 500; font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; color: var(--pf-text); font-variation-settings: normal;
}
.subpage .article blockquote::before { background: var(--pf-blue); }
.subpage .article img { border-radius: 16px; border-color: var(--pf-line-2); }
.subpage .article code { background: var(--pf-bg-2); border: 1px solid var(--pf-line); padding: 1px 6px; border-radius: 6px; font-size: .86em; overflow-wrap: anywhere; }
.subpage .article hr { border-top-color: var(--pf-line); }
@media (min-width: 768px) {
  .subpage .article__lead { font-size: 22px; line-height: 1.5; }
  .subpage .article :is(p, ul, ol) { font-size: 18px; }
  .subpage .article blockquote { font-size: 25px; margin-top: 48px; }
}

/* Comparison tables: readable, scroll inside their own wrapper, never the page */
.subpage .cmp-table-wrap { max-width: 100%; overflow-x: auto; background-color: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: 0 1px 2px rgba(31,30,29,.04); }
.subpage .cmp-table-wrap table.cmp-table { font-family: var(--pf-sans) !important; font-size: 16px !important; color: var(--pf-muted) !important; }
.subpage .cmp-table th { font-family: var(--pf-sans) !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-soft) !important; background: #FCFBF8; }
.subpage .cmp-table thead tr { background: #FCFBF8 !important; }
.subpage .cmp-table td { line-height: 1.55; }
.subpage .cmp-table td[style*="font-weight:600"] { font-weight: 600 !important; color: var(--pf-text) !important; }
.subpage .cmp-table-hint { font-family: var(--pf-sans); font-size: 14px; color: var(--pf-soft); }

/* Key takeaways, author card */
.subpage .takeaways { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: 0 1px 2px rgba(31,30,29,.04); }
.subpage .takeaways::before { background: linear-gradient(90deg, #1F58EA, #6E95F5); }
.subpage .article .takeaways h2, .subpage .takeaways h2 {
  font-family: var(--pf-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-blue-ink);
}
.subpage .article .takeaways li, .subpage .takeaways li { font-size: 17px; line-height: 1.55; color: var(--pf-muted); }
.subpage .takeaways li::before { background: var(--pf-blue-50); box-shadow: inset 0 0 0 1px var(--pf-blue-line); }
.subpage .author-card { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: 0 1px 2px rgba(31,30,29,.04); }
.subpage .author-card:hover { border-color: var(--pf-blue-line); box-shadow: 0 24px 44px -30px rgba(31,88,234,.5); }
.subpage .author-card__name { font-family: var(--pf-sans); font-weight: 700; font-size: 19px; color: var(--pf-text); font-variation-settings: normal; }
.subpage .author-card__role { font-family: var(--pf-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-blue-ink); }
.subpage .author-card__bio { font-size: 16px; line-height: 1.55; color: var(--pf-muted); }

/* ---------- Final CTA: the homepage glow panel, Anton heading ---------- */
.subpage .cta.s-section, .subpage .cta.s-section--soft { background: var(--pf-bg); padding: 0; overflow: visible; isolation: auto; }
.subpage .cta::before { content: none; display: none; }
.subpage .cta__panel {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 52px 20px; border-radius: 22px; border: 1px solid var(--pf-blue-line); box-shadow: none;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(31,88,234,.26), rgba(31,88,234,0) 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(110,149,245,.18), rgba(110,149,245,0) 70%),
    linear-gradient(160deg, #FFFFFF 0%, #EEF2FC 100%);
}
.subpage .cta__panel::before { content: none; display: none; }
.subpage .cta__panel > .eyebrow { align-self: center; }
.subpage .cta__title {
  margin: 16px auto 0; max-width: none; font-family: var(--pf-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 3.6vw + 18px, 72px); line-height: 1.05; letter-spacing: .005em;
  color: var(--pf-text); font-variation-settings: normal; text-wrap: balance; overflow-wrap: break-word;
}
.subpage .cta__subtitle { margin: 12px auto 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--pf-muted); }
.subpage .cta .btn--white, .subpage .cta .btn--primary { margin-top: 26px; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.subpage .cta .btn--white:hover, .subpage .cta .btn--primary:hover { background: var(--pf-blue-h); }
.subpage .cta__email {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 100%;
  margin-top: 10px; min-height: 48px; padding: 14px 24px; border-radius: 12px;
  font-family: var(--pf-sans); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--pf-text); background: var(--pf-card); border: 1px solid var(--pf-line-2);
  text-decoration: none; overflow-wrap: anywhere;
  transition: background-color .18s ease, border-color .18s ease;
}
.subpage .cta__email:hover { color: var(--pf-text); background: var(--pf-blue-50); border: 1px solid var(--pf-blue-line); text-decoration: none; }
.subpage .cta :focus-visible { outline: none; box-shadow: var(--pf-ring); }
@media (min-width: 768px) {
  /* Buttons side by side: two auto tracks between two flexible ones, so the full-width rows
     (which span the flexible tracks) never stretch the button tracks. */
  .subpage .cta__panel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; column-gap: 10px;
    padding: 88px 40px; border-radius: 26px;
  }
  .subpage .cta__panel > :not(.btn):not(.cta__email) { grid-column: 1 / -1; justify-self: center; }
  .subpage .cta__panel > .btn { grid-column: 2; }
  .subpage .cta__panel > .cta__email { grid-column: 3; }
  .subpage .cta__panel > .btn:last-child { grid-column: 2 / 4; justify-self: center; }
  .subpage .cta__panel > .cta__glow { display: none; }
  .subpage .cta .btn--white, .subpage .cta .btn--primary, .subpage .cta__email { width: auto; margin-top: 30px; }
  .subpage .cta__subtitle { font-size: 18px; }
}

/* ---------- Injected audit capture block (js/audit-cta.js) ---------- */
body.subpage .acta {
  border: 1px solid var(--pf-blue-line); border-radius: 22px; box-shadow: none; padding: 28px 20px 24px;
  background: radial-gradient(70% 90% at 100% 100%, rgba(31,88,234,.16), rgba(31,88,234,0) 70%), linear-gradient(160deg, #FFFFFF 0%, #F3F6FE 100%);
}
body.subpage .acta__eyebrow [aria-hidden="true"] { display: none; }
body.subpage .acta__title { font-family: var(--pf-sans); font-weight: 700; font-size: clamp(24px, 1.2vw + 20px, 32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--pf-text); font-variation-settings: normal; }
body.subpage .acta__lead { font-size: 17px; color: var(--pf-muted); }
body.subpage .acta__submit .btn { font-size: 16px; padding: 12px 22px; }
@media (min-width: 768px) { body.subpage .acta { padding: 44px 48px 40px; border-radius: 26px; } }

/* ---------- Forms (audit, ROI, free library, audit capture): one field style ---------- */
body.subpage :is(.acta, .aud-card, .roi-field, .roi-email, .fl-card) :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
  min-height: 50px; border-radius: 12px; border: 1px solid var(--pf-line-2); background: #fff;
  font-family: var(--pf-sans); font-size: 16px; color: var(--pf-text); padding: 12px 15px; letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(31,30,29,.04) inset;
}
body.subpage :is(.acta, .aud-card, .roi-field, .roi-email, .fl-card) :is(input, select, textarea):hover { border-color: var(--pf-blue-line); }
body.subpage :is(.acta, .aud-card, .roi-field, .roi-email, .fl-card) :is(input, select, textarea):focus { outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 4px rgba(31,88,234,.18); }
body.subpage :is(.aud-field__label, .roi-field label, .roi-email label, .fl-field__label, .acta__label) { font-family: var(--pf-sans); font-size: 15px; font-weight: 600; color: var(--pf-text); }

/* Audit page */
body.subpage .aud-card { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(31,30,29,.35); }
body.subpage .aud-card__title { font-family: var(--pf-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; color: var(--pf-text); font-variation-settings: normal; }
body.subpage .aud-card__step { font-family: var(--pf-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--pf-blue-ink); }
body.subpage .aud-card__sub { font-size: 16px; color: var(--pf-muted); }
body.subpage .aud-back { font-family: var(--pf-sans); font-size: 15px; }
body.subpage .aud-reveal__text { font-family: var(--pf-sans); font-weight: 600; font-size: clamp(26px, 2vw + 20px, 40px); line-height: 1.25; letter-spacing: -0.02em; font-variation-settings: normal; margin-left: auto; margin-right: auto; }

/* ROI calculator */
body.subpage :is(.roi-tool, .roi-checklist) { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(31,30,29,.35); }
body.subpage .roi-card {
  border: 1px solid var(--pf-blue-line); border-radius: 16px;
  background: radial-gradient(100% 120% at 100% 0%, rgba(31,88,234,.12), rgba(31,88,234,0) 60%), var(--pf-card);
}
body.subpage .roi-card__num { font-family: var(--pf-sans); font-weight: 700; color: var(--pf-blue); letter-spacing: -0.03em; font-variation-settings: normal; }
body.subpage .roi-card__cap { font-size: 14px; color: var(--pf-muted); }
body.subpage .roi-print-title { font-family: var(--pf-sans); font-weight: 700; }
body.subpage .roi-email { border: 1px dashed rgba(31,88,234,.45); border-radius: 14px; background: var(--pf-blue-50); }
body.subpage .roi-checklist li::before { border-color: var(--pf-blue); }

/* ---------- Free library (/free/ and pack pages) ---------- */
.subpage .fl-card { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(31,30,29,.35); }
.subpage :is(.fl-card__title, .fl-pack__title, .fl-group__title, .fl-empty__title) { font-family: var(--pf-sans); font-weight: 700; letter-spacing: -0.015em; color: var(--pf-text); }
.subpage .fl-card__title { font-size: 22px; }
.subpage .fl-pack__title { font-size: 20px; }
.subpage .fl-group__title { font-size: clamp(24px, 1.2vw + 20px, 32px); }
.subpage :is(.fl-card__sub, .fl-pack__desc, .fl-group__sub) { font-size: 16px; color: var(--pf-muted); }
.subpage .fl-pack { background: var(--pf-card); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: 0 1px 2px rgba(31,30,29,.04); }
.subpage .fl-pack:hover { border-color: var(--pf-blue-line); box-shadow: 0 24px 44px -30px rgba(31,88,234,.5); }
.subpage .fl-pack.is-target { border-color: var(--pf-blue); box-shadow: 0 0 0 4px rgba(31,88,234,.16); }
.subpage .fl-pack.is-target::before { font-family: var(--pf-sans); font-size: 12px; border-radius: 999px; }
.subpage .fl-pack__meta { font-family: var(--pf-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-soft); }
.subpage .fl-pack__id { color: var(--pf-blue-ink); }
.subpage :is(.fl-pack__kw, .fl-kw) { font-family: var(--pf-sans); font-weight: 600; color: var(--pf-blue-ink); background: var(--pf-blue-50); border-color: var(--pf-blue-line); }
.subpage .fl-pack__video { font-size: 15px; color: var(--pf-muted); }
.subpage :is(.fl-jump a, .fl-pack__video:hover, .fl-note a) { color: var(--pf-blue-ink); }
.subpage .fl-missing { border-color: var(--pf-blue-line); background: var(--pf-blue-50); border-radius: 14px; }
.subpage .fl-empty { border-color: var(--pf-line-2); background: var(--pf-card); border-radius: 16px; }
.subpage .fl-gate__hint { font-size: 15px; color: var(--pf-soft); }
.subpage .fl-body h2 { font-family: var(--pf-sans); font-weight: 700; font-size: clamp(24px, 1.2vw + 20px, 32px); letter-spacing: -0.02em; color: var(--pf-text); }
.subpage .fl-body h3 { font-family: var(--pf-sans); font-weight: 700; font-size: 20px; color: var(--pf-text); }
.subpage .fl-body :is(p, li) { font-size: 17px; line-height: 1.65; color: var(--pf-muted); }
.subpage .fl-body li::marker { color: var(--pf-blue-ink); }
.subpage .fl-body a:not(.btn):not(.fl-file) { color: var(--pf-blue-ink); text-underline-offset: 3px; }
.subpage .fl-body :not(pre) > code { font-family: var(--pf-code); }
.subpage .fl-code { background: var(--pf-card); border-color: var(--pf-line-2); border-radius: 16px; }
.subpage .fl-code__bar { background: #FCFBF8; border-bottom-color: var(--pf-line); }
.subpage .fl-code__label { font-family: var(--pf-sans); font-size: 12.5px; letter-spacing: .06em; color: var(--pf-soft); }
.subpage .fl-code pre { font-size: 14px; color: var(--pf-text); }
.subpage .fl-copy { font-family: var(--pf-sans); font-size: 15px; font-weight: 500; border-radius: 10px; background: var(--pf-blue); }
.subpage .fl-copy:hover { background: var(--pf-blue-h); }
.subpage .fl-file { background: var(--pf-card); border-color: var(--pf-line-2); border-radius: 14px; }
.subpage .fl-file:hover { border-color: var(--pf-blue-line); box-shadow: 0 20px 40px -30px rgba(31,88,234,.5); }
.subpage .fl-file__ico { border-radius: 10px; background: var(--pf-blue-50); color: var(--pf-blue); border: 1px solid var(--pf-blue-line); }
.subpage .fl-file__name { font-family: var(--pf-sans); font-size: 16px; font-weight: 600; }
.subpage .fl-file__desc { font-size: 15px; color: var(--pf-muted); }
.subpage .fl-file__size { font-family: var(--pf-sans); font-size: 13px; color: var(--pf-soft); }
.subpage .fl-inside { background: var(--pf-bg-2); border-color: var(--pf-line); border-radius: 12px; font-size: 15px; }
.subpage .fl-backrow { border-top-color: var(--pf-line); }
.subpage .fl-table { border-color: var(--pf-line-2); border-radius: 14px; background: var(--pf-card); }
.subpage .fl-table th { background: #FCFBF8; font-family: var(--pf-sans); }

/* ---------- Footer: identical to the homepage (.pf .ft) ---------- */
.subpage .ft { margin: 0; padding: 0 8px 8px; background: var(--pf-bg); color: var(--pf-muted); }
.subpage main + .ft { margin-top: 0; }
.subpage .ft__in { position: relative; max-width: var(--pf-rail); margin: 0 auto; padding: 8px; border: 1px solid var(--pf-line-2); border-radius: 22px; background: var(--pf-card); }
.subpage .ft__in::before { content: none; display: none; }
.subpage .ft__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.subpage .ft__brand, .subpage .ft__grid > div:first-child {
  grid-column: 1 / -1; position: relative; overflow: hidden; border-radius: 16px;
  min-height: 140px; padding: 18px 16px; display: flex; align-items: flex-end;
  background: linear-gradient(160deg, #F3F6FE 0%, #FFFFFF 100%); border: 1px solid var(--pf-line);
}
/* The homepage's .ft__glow span, drawn as a pseudo-element on subpages */
.subpage .ft__brand::before {
  content: ''; position: absolute; inset: auto -20% -60% 30%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31,88,234,.28), rgba(31,88,234,0)); pointer-events: none;
}
.subpage .ft__logo { position: relative; height: 84px; width: auto; margin: -16px 0 -16px -10px; filter: none; opacity: 1; }
.subpage .ft__col { padding: 12px 8px 4px; font-size: 16px; line-height: 1.5; color: var(--pf-muted); }
.subpage .ft__col a { display: block; padding: 9px 0; color: var(--pf-muted); transition: color .18s ease; }
.subpage .ft__col a:hover { color: var(--pf-blue-ink); }
.subpage .ft__col a:focus-visible, .subpage .ft__bot a:focus-visible { outline: none; box-shadow: var(--pf-ring); }
.subpage .ft__bot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 8px 8px 0; padding: 16px 0 10px; border-top: 1px solid var(--pf-line);
  font-size: 14px; color: var(--pf-soft);
}
.subpage .ft__bot a { color: var(--pf-soft); padding: 6px 0; }
.subpage .ft__bot a:hover { color: var(--pf-blue-ink); }
@media (min-width: 768px) {
  .subpage .ft { padding: 0 12px 12px; }
  .subpage .ft__in { padding: 10px; border-radius: 26px; }
  .subpage .ft__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 16px; }
  .subpage .ft__brand, .subpage .ft__grid > div:first-child { grid-column: auto; min-height: 240px; padding: 26px 24px; }
  .subpage .ft__logo { height: 104px; margin: -24px 0 -24px -14px; }
  .subpage .ft__col { padding: 26px 8px; }
  .subpage .ft__col a { padding: 5px 0; }
  .subpage .ft__bot { flex-direction: row; justify-content: space-between; align-items: center; margin: 8px 16px 0; }
  .subpage .ft__bot a { padding: 6px 0; }
}
/* The page column ends on a rail; the footer card sits 8px under it, as on the homepage */
.subpage main { padding-bottom: 8px; }
@media (min-width: 768px) { .subpage main { padding-bottom: 12px; } }

/* ==========================================================================
   Booking flow (/book/): same paper, card and type; keeps booking-flow.css mechanics
   ========================================================================== */
body.v2-book { font-size: 16px; }
body.v2-book .booking-shell { background: var(--pf-bg); }
body.v2-book .booking-card {
  position: relative; border: 1px solid var(--pf-line-2); border-radius: 22px;
  background: radial-gradient(95% 40% at 50% 100%, rgba(31,88,234,.1), rgba(31,88,234,0) 70%), #fff;
  box-shadow: 0 30px 60px -40px rgba(31,30,29,.35);
}
body.v2-book .booking-card h1 {
  font-family: var(--pf-display); font-weight: 400; text-transform: uppercase;
  font-size: 32px; line-height: 1.06; letter-spacing: .004em; color: var(--pf-text); font-variation-settings: normal;
}
body.v2-book .booking-intro { font-size: 16px; color: var(--pf-muted); }
body.v2-book a { color: var(--pf-blue-ink); }
body.v2-book .booking-form :is(label, legend) { font-family: var(--pf-sans); font-size: 15px; font-weight: 600; color: var(--pf-text); }
body.v2-book .booking-form :is(input:not([type=radio]), textarea), body.v2-book .booking-zone select {
  border: 1px solid var(--pf-line-2); border-radius: 12px; font-family: var(--pf-sans); font-size: 16px; color: var(--pf-text);
}
body.v2-book .booking-form :is(input:not([type=radio]), textarea):focus, body.v2-book .booking-zone select:focus { outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 4px rgba(31,88,234,.18); }
body.v2-book .booking-primary { width: 100%; min-height: 56px; font-size: 17px; }
body.v2-book .booking-choice { border-color: var(--pf-line-2); border-radius: 12px; font-family: var(--pf-sans); font-size: 16px !important; font-weight: 500 !important; }
body.v2-book .booking-choice:hover { background: var(--pf-blue-50); border-color: var(--pf-blue-line); }
body.v2-book .booking-choice:has(input:checked) { border-color: var(--pf-blue); background: var(--pf-blue-50); }
body.v2-book :is(.booking-step-count, .booking-zone-label, .booking-day-label) { font-family: var(--pf-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-soft); }
body.v2-book .booking-progress { background: var(--pf-blue-50); }
body.v2-book .booking-progress span { background: linear-gradient(90deg, #1F58EA, #6E95F5); }
body.v2-book :is(.booking-date, .booking-time) { border-color: var(--pf-line-2); border-radius: 12px; font-family: var(--pf-sans); color: var(--pf-text); }
body.v2-book .booking-date strong { font-family: var(--pf-sans); font-weight: 700; font-variation-settings: normal; }
body.v2-book :is(.booking-date, .booking-time)[aria-pressed=true] { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
body.v2-book :is(.booking-time:hover:not([aria-pressed=true]), .booking-date:hover:not(:disabled):not([aria-pressed=true])) { background: var(--pf-blue-50); border-color: var(--pf-blue-line); }
body.v2-book .calendar-actions button { border-color: var(--pf-line-2); border-radius: 12px; font-family: var(--pf-sans); }
body.v2-book :is(.booking-back, .booking-skip, .booking-footer a, .booking-footer button) { font-family: var(--pf-sans); font-size: 14px; color: var(--pf-muted); }
body.v2-book :is(.booking-back, .booking-skip, .booking-footer a):hover { color: var(--pf-blue-ink); }
body.v2-book .booking-confirm { background: #fff; } /* sticky confirm bar must stay opaque over the time grid */
body.v2-book :focus-visible { outline: none; box-shadow: var(--pf-ring); }
/* Programmatic focus targets (the step heading booking-flow.js focuses for screen readers) are not controls: no ring. */
:is(body.v2-book, body.subpage) [tabindex="-1"]:focus { outline: none; box-shadow: none; }
@media (max-width: 600px) { body.v2-book .booking-card h1 { font-size: 30px; } }
@media (max-width: 350px) { body.v2-book .booking-card h1 { font-size: 27px; } }

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width: 768px) {
  .subpage .shero { margin: 12px max(12px, calc((100% - 1440px) / 2)) 0; border-radius: 26px; padding: 76px 0 84px; }
  .subpage .sp-orb--a { width: 420px; height: 420px; left: -140px; }
  .subpage .sp-orb--b { width: 480px; height: 480px; right: -160px; }
  .subpage .shero__lead { font-size: 20px; }
  .subpage .s-problem { padding: 30px 30px; }
}
@media (min-width: 981px) {
  .subpage .shero__inner--split .shero__title { font-size: clamp(40px, 2.6vw + 20px, 66px); }
  .subpage .shero__inner--split:not(:has(> .shero__media)) .shero__title { font-size: clamp(44px, 4.2vw + 18px, 84px); }
}
@media (min-width: 1280px) {
  .subpage .shero { padding-top: 96px; padding-bottom: 104px; }
}

/* ---------- Header logo at its own proportions (2026-10-16) ----------
   v2-base.css sizes the logo by height (44px phone, 52px from 641px) with width:auto, but its global
   img { max-width: 100% } resolved against the brand link, whose width is the image minus its negative
   left margin, so the 180x120 PNG was squeezed to 60x44 / 70x52 (Lighthouse image-aspect-ratio).
   Same height; the width is now the PNG's own 1.5 ratio (66 / 78px). Marketing pages only. */
html[data-hero="css"] .ncl__logo { max-width: none; }

/* ---------- Hero entrance in CSS (2026-10-16, mobile LCP) ----------
   Pages marked html[data-hero="css"] (the marketing subpages; offer pages that load this file are not
   marked) run the hero entrance as CSS keyframes instead of the deferred GSAP timeline in js/site-v2.js,
   which held the hero at opacity 0 until the scripts ran behind the Google tags (LCP 6-7 s on a
   throttled phone). It starts as soon as html.fonts-in is set by the head motion gate: when Anton and
   Jost are loaded (they are preloaded; 3 s cap). Waiting for the fonts means a late font swap reflows
   the hero while it is still hidden, so there is no layout shift; with cached fonts it starts at first
   paint.
   Same choreography as the GSAP timeline: kicker (crumbs, eyebrow) .6 s from 0, 60 ms apart; the H1
   words (span.w, pre-wrapped in the HTML with their index in --i) rise .5em over .8 s from .1 s, 50 ms
   apart; the rest (lead, CTA row, trust line, post meta) rise 16px over .7 s from .4 s, 80 ms apart
   (--hr = order after the H1; a non-split hero's single .shero__copy wrapper counts first, as it did in
   the timeline); split-hero media scales from .965 over .9 s from .3 s. GSAP's power3.out is
   cubic-bezier(.165,.84,.44,1), power2.out cubic-bezier(.215,.61,.355,1). The keyframes start at
   opacity .01, not 0: Chrome only credits a paint to Largest Contentful Paint when the element's
   opacity is above zero, and a composited fade from exactly 0 is not repainted until something else
   touches the element (it was then credited when the deferred scripts booted). .01 is not visible.
   fill-mode backwards: the start state holds through the delay, then the element is back on its own
   styles. The first rule cancels site-v2.css's JS-era hidden state (lifted only by .is-in, which
   site-v2.js adds when it boots). --pf-entrance: css tells site-v2.js and site-plainly.js that CSS
   owns the element: they only mark it settled, so nothing re-hides or plays twice. No .js-motion
   (reduced motion, ?motion=reduce, no JS): none of this applies and the hero is static. */
html[data-hero="css"].js-motion .subpage :is(.shero__copy > *, .shero__inner:not(.shero__inner--split) > *, .shero__title .w, .shero__media) { --pf-entrance: css; }
html[data-hero="css"].js-motion .subpage :is(.shero__copy > *, .shero__inner:not(.shero__inner--split) > *, .shero__title .w, .shero__media):not(.is-in) { opacity: 1; transform: none; }
html[data-hero="css"].js-motion:not(.fonts-in) .subpage :is(.shero__copy > *, .shero__inner:not(.shero__inner--split) > *, .shero__media) { opacity: 0; }
@keyframes pfHeroRise { from { opacity: .01; transform: translateY(16px); } }
@keyframes pfHeroWord { from { opacity: .01; transform: translateY(.5em); } }
@keyframes pfHeroScale { from { opacity: .01; transform: scale(.965); } }
html[data-hero="css"].js-motion.fonts-in .subpage :is(.shero__copy > *, .shero__inner:not(.shero__inner--split) > *):not(.shero__title) {
  animation: pfHeroRise .7s cubic-bezier(.165,.84,.44,1) backwards;
  animation-delay: calc(.4s + var(--hr, 0) * .08s);
}
html[data-hero="css"].js-motion.fonts-in .subpage :is(.shero__copy, .shero__inner:not(.shero__inner--split)) > :is(.crumbs, .eyebrow) { animation-duration: .6s; animation-delay: 0s; }
html[data-hero="css"].js-motion.fonts-in .subpage :is(.shero__copy, .shero__inner:not(.shero__inner--split)) > .crumbs ~ .eyebrow { animation-delay: .06s; }
.subpage .shero__title + * { --hr: 0; }
.subpage .shero__title + * + * { --hr: 1; }
.subpage .shero__title + * + * + * { --hr: 2; }
.subpage .shero__title + * + * + * + * { --hr: 3; }
.subpage .shero__title + * + * + * + * + * { --hr: 4; }
.subpage .shero__inner:not(.shero__inner--split) > .shero__copy { --hr: 0; }
.subpage .shero__inner:not(.shero__inner--split) > .shero__copy > .shero__title + * { --hr: 1; }
.subpage .shero__inner:not(.shero__inner--split) > .shero__copy > .shero__title + * + * { --hr: 2; }
.subpage .shero__inner:not(.shero__inner--split) > .shero__copy > .shero__title + * + * + * { --hr: 3; }
.subpage .shero__inner:not(.shero__inner--split) > .shero__copy > .shero__title + * + * + * + * { --hr: 4; }
html[data-hero="css"].js-motion.fonts-in .subpage .shero__title .w {
  animation: pfHeroWord .8s cubic-bezier(.165,.84,.44,1) backwards;
  animation-delay: calc(.1s + var(--i, 0) * .05s);
}
html[data-hero="css"].js-motion.fonts-in .subpage .shero__media { animation: pfHeroScale .9s cubic-bezier(.215,.61,.355,1) .3s backwards; }
/* Guides: the article's lead paragraph sits right under the hero and is the phone LCP element. Below
   768px it rises like js/site-plainly.js would reveal it on screen (22px x 0.6 phone factor, .7 s,
   power3.out, first of its batch); wider screens keep the scroll reveal. */
@keyframes pfHeroLead { from { opacity: .01; transform: translateY(13.2px); } }
@media (max-width: 767px) {
  html[data-hero="css"].js-motion .subpage .article > .article__lead { --pf-entrance: css; }
  html[data-hero="css"].js-motion .subpage .article > .article__lead:not(.is-in) { opacity: 1; transform: none; }
  html[data-hero="css"].js-motion:not(.fonts-in) .subpage .article > .article__lead { opacity: 0; }
  html[data-hero="css"].js-motion.fonts-in .subpage .article > .article__lead { animation: pfHeroLead .7s cubic-bezier(.165,.84,.44,1) backwards; }
}

/* ---------- Reduced motion: nothing moves on hover either ---------- */
@media (prefers-reduced-motion: reduce) {
  .subpage .btn::after { transition: none; }
  .subpage :is(.btn--primary, .btn--white, .btn--dark):hover { transform: none; }
}