/* Doorway funnel: SI kit. Foundation (from the SalesFunnels.com kit), then SI brand tokens, then SI signature, then page styles.

   Loaded only by _includes/doorway.njk, never by base.njk, and every rule is
   scoped under .fn-root, so nothing here can reach the rest of the site.
   scripts/test-doorway.mjs fails the build if either stops being true. */

/* ---- tokens: every value brand.ts may override, with a measured default ---- */
.fn-root {
  --fn-paper: #ffffff; --fn-paper-alt: #f4f5f8; --fn-ink: #16181d; --fn-muted: #4d5560; --fn-line: #b4bcc7;
  --fn-accent: #1f4fd1; --fn-accent-deep: #173da3; --fn-accent-soft: #e9efff; --fn-accent-ink: #173da3; --fn-accent-on-dark: #9db4ff;
  --fn-dark: #101218; --fn-dark-alt: #191c25; --fn-dark-ink: #f4f5f7; --fn-dark-muted: #b8bec9; --fn-dark-line: #3d4350;
  --fn-cta: #1f4fd1; --fn-cta-2: #173da3; --fn-cta-ink: #ffffff; --fn-cta-hover: #132f80; --fn-cta-edge: transparent; --fn-cta-radius: var(--fn-radius-sm); --fn-cta-shadow: 0 8px 22px rgb(0 0 0 / .16);
  --fn-disabled: #6b7280; --fn-focus: #d97706; --fn-danger: #b3261e; --fn-success: #1e7f3f;
  --fn-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fn-font-display: var(--fn-font-body);
  --fn-display-weight: 800; --fn-display-tracking: -.02em; --fn-display-style: normal; --fn-display-transform: none;
  --fn-h1: clamp(2.4rem, 1.5rem + 3.2vw, 4rem); --fn-h2: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); --fn-h3: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); --fn-h4: 1.05rem;
  --fn-body: 1.0625rem; --fn-lead: clamp(1.1rem, 1rem + .4vw, 1.3rem); --fn-small: .875rem; --fn-lh: 1.55;
  --fn-radius: 14px; --fn-radius-sm: 9px; --fn-shadow: 0 10px 30px rgb(0 0 0 / .08); --fn-shadow-lg: 0 24px 60px rgb(0 0 0 / .16);
  --fn-measure: 70rem; --fn-narrow: 46rem; --fn-gutter: clamp(1.25rem, 4vw, 2.25rem);
  --fn-pad: clamp(3rem, 6vw, 5.5rem); --fn-pad-hero: clamp(3.5rem, 7vw, 6.5rem); --fn-pad-compact: clamp(2rem, 4vw, 3.25rem);
  --fn-dur: 180ms; --fn-dur-slow: 320ms; --fn-ease: cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; min-height: 100dvh; overflow-x: clip;
  background: var(--fn-paper); color: var(--fn-ink);
  font-family: var(--fn-font-body); font-size: var(--fn-body); line-height: var(--fn-lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.fn-root .fn-main { flex: 1 0 auto; }

/* ---- base: the reset put back, explicitly ---- */
.fn-root *, .fn-root *::before, .fn-root *::after { box-sizing: border-box; }
/* :where keeps this at (0,1,0) so the rhythm rules below, also (0,1,0), win by order. */
.fn-root :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset, hr) { margin: 0; }
.fn-root fieldset { min-inline-size: 0; border: 0; padding: 0; }
.fn-root :is(img, video, iframe, picture) { display: block; max-width: 100%; }
.fn-root img { height: auto; }
.fn-root svg { display: inline-block; max-width: 100%; flex: 0 0 auto; vertical-align: -.15em; }
.fn-root :is(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.fn-root button { background: none; border: 0; padding: 0; }
.fn-root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--fn-focus); outline-offset: 3px; }
.fn-root dialog { margin: auto; }
.fn-root a { color: var(--fn-accent-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fn-root strong, .fn-root b { font-weight: 700; }
.fn-root small { font-size: var(--fn-small); }
.fn-root hr { border: 0; border-top: 1px solid var(--fn-line); }

/* ---- type scale: a page never sets a heading size, weight or leading ---- */
.fn-root :is(h1, h2, h3, h4) { font-family: var(--fn-font-display); font-weight: var(--fn-display-weight); font-style: var(--fn-display-style); letter-spacing: var(--fn-display-tracking); text-transform: var(--fn-display-transform); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.fn-root h1 { font-size: var(--fn-h1); line-height: 1.04; }
.fn-root h2 { font-size: var(--fn-h2); line-height: 1.12; }
.fn-root h3 { font-size: var(--fn-h3); line-height: 1.25; }
.fn-root h4 { font-size: var(--fn-h4); line-height: 1.3; }
.fn-root p { text-wrap: pretty; }
.fn-root .fn-kicker { display: block; color: var(--fn-accent-ink); font-family: var(--fn-font-body); font-size: .78rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.fn-root .fn-lead { color: var(--fn-muted); font-size: var(--fn-lead); line-height: 1.5; max-width: 60ch; }
.fn-root .fn-muted { color: var(--fn-muted); }
.fn-root .fn-small { font-size: var(--fn-small); }
.fn-root .fn-accent { color: var(--fn-accent-ink); }
.fn-root .fn-measure { max-width: var(--fn-max, 62ch); }
.fn-root .fn-display { font-family: var(--fn-font-display); font-weight: var(--fn-display-weight); letter-spacing: var(--fn-display-tracking); line-height: 1.1; }

/* ---- rhythm: the air between stacked copy, once, at the root ----
   Written with :where() so every rule is (0,1,0): a container's own gap rule
   and any page rule outranks it. Blocks are p, lists, quotes, figures; pieces
   are forms, media, grids, panels, rows and buttons. */
.fn-root :where(.fn-kicker) + :where(h1, h2, h3) { margin-top: .6rem; }
.fn-root :where(h1, h2, h3, h4) + :where(p, ul, ol, .fn-lead, .fn-list-check, .fn-list-steps, blockquote) { margin-top: .8rem; }
.fn-root :where(h1, h2, h3, h4, .fn-lead) + :where(form, .fn-form, .fn-cta, .fn-row, .fn-video, .fn-grid, .fn-split, .fn-panel, .fn-proof, .fn-media, .fn-price-stack, .fn-scroll, .fn-center) { margin-top: 1.5rem; }
.fn-root :where(p, ul, ol, blockquote, figure) + :where(p, ul, ol, blockquote, figure) { margin-top: .9em; }
.fn-root :where(p, ul, ol, blockquote, figure, .fn-lead, .fn-cta-note, .fn-row, .fn-cta, form, .fn-form, .fn-video, .fn-grid, .fn-split, .fn-panel, .fn-proof, .fn-list-check, .fn-list-steps, .fn-media, .fn-price-stack, .fn-scroll, .fn-stat, .fn-center, .fn-divider) + :where(form, .fn-form, .fn-video, .fn-grid, .fn-split, .fn-panel, .fn-proof, .fn-list-check, .fn-list-steps, .fn-media, .fn-price-stack, .fn-scroll, .fn-row, .fn-cta, .fn-center, .fn-divider, .fn-bump) { margin-top: 1.5rem; }
.fn-root :where(form, .fn-form, .fn-video, .fn-grid, .fn-split, .fn-panel, .fn-proof, .fn-list-check, .fn-list-steps, .fn-media, .fn-price-stack, .fn-scroll, .fn-cta, .fn-row, .fn-center, .fn-divider) + :where(p, ul, ol, blockquote, figure, .fn-lead) { margin-top: 1rem; }
.fn-root :where(p, ul, ol, blockquote, figure, form, .fn-form, .fn-video, .fn-grid, .fn-split, .fn-panel, .fn-proof, .fn-list-check, .fn-list-steps, .fn-media, .fn-price-stack, .fn-scroll, .fn-cta, .fn-row, .fn-center, .fn-cta-note, .fn-stat) + :where(h2, h3) { margin-top: 1.75rem; }
.fn-root :where(.fn-icon) + :where(h2, h3, h4) { margin-top: .9rem; }
.fn-root :where(.fn-cta) + :where(.fn-cta-note) { margin-top: .6rem; }
.fn-root :is(.fn-form, .fn-stack, .fn-grid, .fn-split, .fn-row, .fn-between, .fn-list-check, ol.fn-list-steps) > * { margin-top: 0; }
.fn-root :is(ul, ol):where(:not(.fn-list-plain, .fn-list-check, .fn-list-steps, .fn-nav, .fn-footer-links, [class*="list-none"])) { padding-inline-start: 1.4em; }
.fn-root li + li { margin-top: .45em; }
.fn-root li::marker { color: var(--fn-accent-ink); }
.fn-root blockquote { border-inline-start: 3px solid var(--fn-accent); padding: .25rem 0 .25rem 1.2rem; color: var(--fn-ink); font-size: 1.15em; font-style: italic; }

/* ---- lists ---- */
.fn-root .fn-list-plain { margin: 0; padding: 0; list-style: none; }
.fn-root .fn-list-plain > li + li { margin-top: 0; }
.fn-root .fn-list-check { padding: 0; list-style: none; display: grid; gap: .6em; text-align: start; }
.fn-root .fn-list-check > li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: .65em; align-items: start; margin: 0; }
.fn-root .fn-list-check > li::before { content: ""; display: block; inline-size: 1.4em; block-size: 1.4em; margin-top: calc((var(--fn-lh) * 1em - 1.4em) / 2); border-radius: 50%; background-color: var(--fn-accent); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); background-position: center; background-repeat: no-repeat; background-size: 62%; }
.fn-root ol.fn-list-steps { padding: 0; list-style: none; counter-reset: fn-step; display: grid; gap: .8em; text-align: start; }
.fn-root ol.fn-list-steps > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8em; align-items: start; margin: 0; counter-increment: fn-step; }
.fn-root ol.fn-list-steps > li::before { content: counter(fn-step); display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--fn-accent); color: #fff; font-weight: 800; font-size: .9rem; }

/* ---- layout: wrap, bands, tones ---- */
.fn-root .fn-wrap { width: min(var(--fn-measure), 100% - var(--fn-gutter) * 2); margin-inline: auto; }
.fn-root .fn-wrap-narrow { max-width: var(--fn-narrow); }
.fn-root .fn-band { padding-block: var(--fn-pad); }
.fn-root .fn-band-hero { padding-block: var(--fn-pad-hero); }
.fn-root .fn-band-compact { padding-block: var(--fn-pad-compact); }
.fn-root .fn-tone-paper { background: var(--fn-paper); color: var(--fn-ink); }
.fn-root .fn-tone-alt { background: var(--fn-paper-alt); color: var(--fn-ink); }
.fn-root .fn-tone-tint { background: var(--fn-accent-soft); color: var(--fn-ink); }
.fn-root .fn-tone-dark { --fn-paper: var(--fn-dark); --fn-paper-alt: var(--fn-dark-alt); --fn-ink: var(--fn-dark-ink); --fn-muted: var(--fn-dark-muted); --fn-line: var(--fn-dark-line); --fn-accent-ink: var(--fn-accent-on-dark); --fn-accent-soft: rgb(255 255 255 / .08); --fn-shadow: 0 10px 30px rgb(0 0 0 / .45); background: var(--fn-paper); color: var(--fn-ink); }
.fn-root .fn-tone-dark .fn-cta-secondary { color: var(--fn-ink); }

/* ---- centring: the box and its children, not only the lines ---- */
.fn-root .fn-center { text-align: center; margin-inline: auto; }
.fn-root .fn-center > * { margin-inline: auto; }
.fn-root .fn-center :is(form, .fn-form, .fn-field, .fn-grid, .fn-split, table, .fn-price-stack, .fn-proof, .fn-list-check, ol.fn-list-steps, ul:where(:not(.fn-list-plain)), ol) { text-align: start; }
.fn-root .fn-center :is(.fn-list-check, ol.fn-list-steps, ul:where(:not(.fn-list-plain)), ol) { width: fit-content; max-width: 100%; margin-inline: auto; }
.fn-root .fn-center :is(form, .fn-form) { width: 100%; max-width: var(--fn-form-max, 32rem); margin-inline: auto; }
.fn-root .fn-center .fn-lead { margin-inline: auto; }
.fn-root .fn-center .fn-row { justify-content: center; }

/* ---- rows, grids, splits, stacks ---- */
.fn-root .fn-grid { display: grid; gap: var(--fn-gap, 1.5rem); grid-template-columns: repeat(var(--fn-cols, auto-fit), minmax(min(100%, var(--fn-col-min, 15rem)), 1fr)); align-items: stretch; }
.fn-root .fn-grid > * { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.fn-root .fn-push { margin-top: auto; padding-top: 1rem; }
.fn-root .fn-split { display: grid; grid-template-columns: minmax(0, var(--fn-split, 1.1fr)) minmax(0, 1fr); gap: var(--fn-gap, clamp(1.5rem, 4vw, 3rem)); align-items: start; }
.fn-root .fn-split > * { min-width: 0; }
.fn-root .fn-sticky { position: sticky; top: 1.5rem; }
.fn-root .fn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.fn-root .fn-stack { display: grid; gap: var(--fn-gap, 1rem); }
.fn-root .fn-stack > * { margin-top: 0; }
.fn-root .fn-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
@media (max-width: 52rem) { .fn-root .fn-split { grid-template-columns: minmax(0, 1fr); } .fn-root .fn-sticky { position: static; } }
@media (max-width: 40rem) { .fn-root .fn-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- surfaces ----
   Variants are written .fn-x.fn-x-variant (0,3,0) so a brand rule on the base
   class (0,2,0) can restyle the base without silently undoing the variant. */
.fn-root .fn-panel { background: var(--fn-paper); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow); padding: var(--fn-panel-pad, clamp(1.25rem, 3vw, 2rem)); }
.fn-root .fn-tone-dark .fn-panel { background: var(--fn-paper-alt); }
.fn-root .fn-panel.fn-panel-tint { background: var(--fn-accent-soft); box-shadow: none; }
.fn-root .fn-panel.fn-panel-dark { --fn-paper: var(--fn-dark); --fn-paper-alt: var(--fn-dark-alt); --fn-ink: var(--fn-dark-ink); --fn-muted: var(--fn-dark-muted); --fn-line: var(--fn-dark-line); --fn-accent-ink: var(--fn-accent-on-dark); --fn-accent-soft: rgb(255 255 255 / .08); background: var(--fn-paper); color: var(--fn-ink); border-color: var(--fn-dark-line); }
.fn-root .fn-panel-head { margin: calc(var(--fn-panel-pad, clamp(1.25rem, 3vw, 2rem)) * -1); margin-bottom: var(--fn-panel-pad, clamp(1.25rem, 3vw, 2rem)); padding: 1.1rem var(--fn-panel-pad, clamp(1.25rem, 3vw, 2rem)); border-bottom: 1px solid var(--fn-line); border-radius: var(--fn-radius) var(--fn-radius) 0 0; background: var(--fn-accent-soft); }
.fn-root .fn-hover-lift { transition: translate var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease), border-color var(--fn-dur) var(--fn-ease); }
.fn-root .fn-hover-lift:hover { translate: 0 -3px; box-shadow: var(--fn-shadow-lg); border-color: var(--fn-accent); }
.fn-root .fn-divider { border: 0; border-top: 1px solid var(--fn-line); margin-block: 1.5rem; }
.fn-root .fn-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.7rem; padding: .15rem .7rem; border: 1px solid var(--fn-accent); border-radius: 999px; color: var(--fn-accent-ink); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fn-root .fn-pill.fn-pill-filled { background: var(--fn-accent); border-color: var(--fn-accent); color: #fff; }
.fn-root .fn-pill.fn-pill-muted { border-color: var(--fn-line); color: var(--fn-muted); }
.fn-root .fn-icon { display: inline-grid; flex: 0 0 auto; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--fn-radius-sm); background: var(--fn-accent-soft); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .06); color: var(--fn-accent-ink); }
.fn-root .fn-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.fn-root .fn-icon.fn-icon-lg { inline-size: 3.4rem; block-size: 3.4rem; border-radius: var(--fn-radius); }
.fn-root .fn-icon.fn-icon-lg svg { inline-size: 1.6rem; block-size: 1.6rem; }
.fn-root .fn-stat { display: grid; gap: .25rem; }
.fn-root .fn-stat strong { font-family: var(--fn-font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: var(--fn-display-weight); letter-spacing: var(--fn-display-tracking); line-height: 1; }
.fn-root .fn-stat span { color: var(--fn-muted); font-size: var(--fn-small); }
.fn-root .fn-table { width: 100%; border-collapse: collapse; font-size: .95rem; text-align: start; }
.fn-root .fn-table :is(th, td) { padding: .75rem .6rem; border-bottom: 1px solid var(--fn-line); text-align: start; vertical-align: top; }
.fn-root .fn-table th { color: var(--fn-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fn-root .fn-scroll { overflow-x: auto; max-width: 100%; }
.fn-root .fn-media { border: 1px solid var(--fn-line); border-radius: var(--fn-radius); overflow: hidden; background: var(--fn-paper-alt); }
.fn-root .fn-media img { width: 100%; object-fit: cover; }

/* ---- header, nav, footer, logo ---- */
.fn-root .fn-header { padding-block: 1rem; }
.fn-root .fn-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 3.25rem; }
.fn-root .fn-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.fn-root .fn-nav a:not(.fn-cta), .fn-root .fn-footer-links a { position: relative; color: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; }
.fn-root .fn-nav a:not(.fn-cta)::after, .fn-root .fn-footer-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -.2em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--fn-dur) var(--fn-ease); }
.fn-root .fn-nav a:not(.fn-cta):hover::after, .fn-root .fn-footer-links a:hover::after { transform: scaleX(1); }
.fn-root .fn-nav .fn-cta { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .92rem; }
.fn-root .fn-footer { margin-top: auto; border-top: 1px solid var(--fn-line); padding-block: 2.25rem; color: var(--fn-muted); font-size: var(--fn-small); }
.fn-root .fn-footer-inner { display: grid; gap: 1rem; }
.fn-root .fn-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.fn-root .fn-footer-legal { display: grid; gap: .4rem; max-width: 80ch; }
.fn-root .fn-footer-legal p + p { margin-top: 0; }
.fn-root .fn-footer-operator { font-size: .85em; font-style: normal; }
.fn-root .fn-footer-operator a { color: inherit; }
.fn-root .fn-logo { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; color: var(--fn-ink); text-decoration: none; line-height: 1; }
.fn-root .fn-logo-mark { display: grid; place-items: center; flex: 0 0 auto; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 30%; background: var(--fn-accent); color: #fff; }
.fn-root .fn-logo-mark svg { inline-size: 1.15rem; block-size: 1.15rem; }
.fn-root .fn-logo-name { display: block; font-family: var(--fn-font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.fn-root .fn-logo-byline { display: block; margin-top: .3rem; color: var(--fn-muted); font-family: var(--fn-font-body); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---- calls to action: fill and ink are a measured pair, never inherited ---- */
.fn-root .fn-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.4rem; padding: .85rem 1.6rem; border: 1px solid var(--fn-cta-edge); border-radius: var(--fn-cta-radius); background: linear-gradient(180deg, var(--fn-cta), var(--fn-cta-2)); box-shadow: var(--fn-cta-shadow); color: var(--fn-cta-ink); cursor: pointer; font-family: var(--fn-font-body); font-size: 1.05rem; font-weight: 800; letter-spacing: var(--fn-cta-tracking, 0); line-height: 1.15; text-align: center; text-decoration: none; text-transform: var(--fn-cta-transform, none); transition: background var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease), translate var(--fn-dur) var(--fn-ease), color var(--fn-dur) var(--fn-ease); }
.fn-root .fn-cta svg { inline-size: 1.2em; block-size: 1.2em; flex: 0 0 auto; }
.fn-root .fn-cta:hover:not(:disabled) { background: var(--fn-cta-hover); color: var(--fn-cta-ink); box-shadow: 0 12px 28px rgb(0 0 0 / .2); translate: 0 -2px; }
.fn-root .fn-cta:active:not(:disabled) { translate: 0 1px; box-shadow: 0 3px 10px rgb(0 0 0 / .18); }
.fn-root .fn-cta:disabled { background: var(--fn-disabled); border-color: transparent; box-shadow: none; color: #ffffff; cursor: not-allowed; }
.fn-root .fn-cta.fn-cta-secondary { background: transparent; border: 2px solid currentColor; box-shadow: none; color: var(--fn-ink); }
.fn-root .fn-cta.fn-cta-secondary:hover:not(:disabled) { background: var(--fn-accent-soft); color: var(--fn-ink); box-shadow: none; }
.fn-root .fn-cta.fn-cta-lg { min-height: 3.9rem; padding: 1rem 2.2rem; font-size: 1.15rem; }
.fn-root .fn-cta.fn-cta-block { width: 100%; }
.fn-root .fn-cta.fn-cta-stack { flex-direction: column; gap: .2rem; }
.fn-root .fn-cta-sub { display: block; font-size: .78em; font-weight: 600; letter-spacing: 0; opacity: .92; text-transform: none; }
.fn-root .fn-cta-note { color: var(--fn-muted); font-size: var(--fn-small); }
.fn-root .fn-text-button { display: inline; padding: 0; border: 0; background: none; color: var(--fn-accent-ink); cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.fn-root .fn-ghost-button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .45rem .9rem; border: 1.5px solid var(--fn-line); border-radius: var(--fn-radius-sm); background: var(--fn-paper); color: var(--fn-ink); cursor: pointer; font-weight: 700; font-size: .92rem; transition: border-color var(--fn-dur) var(--fn-ease), background var(--fn-dur) var(--fn-ease); }
.fn-root .fn-ghost-button:hover { border-color: var(--fn-accent); background: var(--fn-accent-soft); }

/* ---- forms: a field belongs to the band it sits on ---- */
.fn-root .fn-form { display: grid; gap: 1rem; text-align: start; }
.fn-root .fn-form .fn-cta { width: 100%; }
.fn-root .fn-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.fn-root .fn-field { display: grid; gap: .4rem; text-align: start; }
.fn-root .fn-field-label { color: var(--fn-ink); font-size: .82rem; font-weight: 700; line-height: 1.3; }
.fn-root .fn-field-control { width: 100%; min-height: 3.25rem; padding: .75rem .95rem; border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); background: var(--fn-paper); color: var(--fn-ink); font-size: 1rem; line-height: 1.4; transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease); }
.fn-root textarea.fn-field-control { min-height: 7rem; resize: vertical; }
.fn-root select.fn-field-control { appearance: auto; }
.fn-root .fn-field-control::placeholder { color: var(--fn-muted); opacity: 1; }
.fn-root .fn-field-control:hover { border-color: var(--fn-accent); }
.fn-root .fn-field-control:focus { border-color: var(--fn-accent); box-shadow: 0 0 0 3px var(--fn-accent-soft); outline: none; }
.fn-root .fn-field-control:user-invalid { border-color: var(--fn-danger); }
.fn-root .fn-tone-dark .fn-field-control, .fn-root .fn-panel-dark .fn-field-control { background: var(--fn-paper-alt); }
.fn-root .fn-field-hint { color: var(--fn-muted); font-size: .8rem; }
.fn-root .fn-field-error { color: var(--fn-danger); font-size: .8rem; font-weight: 700; }
.fn-root .fn-tone-dark .fn-field-error, .fn-root .fn-panel-dark .fn-field-error { color: #ff9a92; }
.fn-root .fn-choice { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; font-size: .98rem; font-weight: 500; line-height: 1.45; text-align: start; }
.fn-root .fn-choice input { flex: 0 0 auto; inline-size: 1.15rem; block-size: 1.15rem; margin: .2rem 0 0; accent-color: var(--fn-accent); }
.fn-root .fn-choice-card { padding: .9rem 1rem; border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); background: var(--fn-paper); transition: border-color var(--fn-dur) var(--fn-ease), background var(--fn-dur) var(--fn-ease); }
.fn-root .fn-choice-card:hover { border-color: var(--fn-accent); }
.fn-root .fn-choice-card:has(input:checked) { border-color: var(--fn-accent); background: var(--fn-accent-soft); }
.fn-root .fn-bump { border: 2px dashed var(--fn-accent); border-radius: var(--fn-radius); background: var(--fn-accent-soft); padding: 1rem 1.1rem; }

/* ---- offer pieces ---- */
.fn-root .fn-price-stack { display: grid; gap: .8rem; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper); padding: 1.25rem; text-align: start; }
.fn-root .fn-tone-dark .fn-price-stack, .fn-root .fn-panel-dark .fn-price-stack { background: var(--fn-paper-alt); }
.fn-root .fn-price-stack ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fn-root .fn-price-stack li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.fn-root .fn-price-total { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--fn-line); padding-top: .8rem; color: var(--fn-muted); margin: 0; }
.fn-root .fn-price-today { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; font-size: 1.1rem; }
.fn-root .fn-price-today strong { font-family: var(--fn-font-display); font-size: 1.7rem; letter-spacing: var(--fn-display-tracking); }
.fn-root .fn-proof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper); padding: 1.25rem; text-align: start; }
.fn-root .fn-tone-dark .fn-proof, .fn-root .fn-panel-dark .fn-proof { background: var(--fn-paper-alt); }
.fn-root .fn-proof-body { display: grid; gap: .5rem; }
.fn-root .fn-proof-body p + p { margin-top: 0; }
.fn-root .fn-proof-body p { color: var(--fn-muted); font-size: .95rem; }
.fn-root .fn-proof-body .fn-kicker { font-size: .7rem; }

/* ---- modal, video, misc ---- */
.fn-root .fn-modal { width: min(36rem, calc(100% - 2rem)); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper); color: var(--fn-ink); padding: 1.5rem; box-shadow: var(--fn-shadow-lg); }
.fn-root .fn-modal::backdrop { background: rgb(0 0 0 / .55); }
.fn-root .fn-modal-close { float: right; margin: -.25rem -.25rem 0 0; }
.fn-root .fn-video { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: #000; }
.fn-root .fn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fn-root .fn-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fn-root .fn-countdown { display: inline-flex; gap: .6rem; font-family: var(--fn-font-display); font-variant-numeric: tabular-nums; font-weight: 800; }

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

/* ---- SI brand tokens ---- */
.fn-root {
  --fn-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fn-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Navy and gold are the site's own, from css/style.css: --navy #1a2a3a,
     --navy-mid #243447, --navy-dark #101e2b, --gold #c8a96e, --gold-hover
     #d8b97e, --on-gold #101e2b. Written as literals rather than var(--navy)
     because style.css is not loaded on these pages, and because the site's
     dark palette redefines those tokens and these bands are fixed.
     Two values are derived rather than copied: --fn-cta-2, the darker stop of
     the CTA gradient, and --fn-dark-line, a border lifted until it reads on
     navy-mid. Measured (WCAG 2.x):
       ink on paper 14.65   muted on paper 7.12   navy on paper 13.42
       dark-ink on navy 13.42   dark-muted on navy 9.43
       gold on navy 6.51 (5.65 on navy-mid)
       CTA label on gold 7.53, on the darker stop 6.18, on hover 8.98
       dark-line on navy-mid 3.69 */
  --fn-paper: #f7f5f0; --fn-paper-alt: #efebe2; --fn-ink: #1a2230; --fn-muted: #4a5363; --fn-line: #7d8390;
  --fn-accent: #1a2a3a; --fn-accent-deep: #101e2b; --fn-accent-soft: #e6eaf1; --fn-accent-ink: #1a2a3a; --fn-accent-on-dark: #c8a96e;
  --fn-dark: #1a2a3a; --fn-dark-alt: #243447; --fn-dark-ink: #f7f5f0; --fn-dark-muted: #c9d0dc; --fn-dark-line: #7a8ca5;

  --fn-cta: #c8a96e; --fn-cta-2: #b8985c; --fn-cta-ink: #101e2b; --fn-cta-hover: #d8b97e; --fn-cta-edge: transparent;
  --fn-cta-radius: 10px; --fn-cta-shadow: 0 10px 24px rgb(0 0 0 / .22); --fn-cta-tracking: 0; --fn-cta-transform: none;

  --fn-display-weight: 600; --fn-display-tracking: -.015em; --fn-display-style: normal; --fn-display-transform: none;
  --fn-h1: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); --fn-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --fn-body: 1.0875rem; --fn-lh: 1.6;
  --fn-pad-hero: clamp(3rem, 6vw, 5rem);
  --fn-radius: 14px; --fn-radius-sm: 8px; --fn-shadow: 0 14px 36px rgb(26 42 58 / .12); --fn-shadow-lg: 0 22px 54px rgb(26 42 58 / .2);
}

/* ---- SI signature ---- */
.fn-root .fn-header { border-bottom: 1px solid var(--fn-line); }
.fn-root .fn-panel { border-radius: var(--fn-radius); }
.fn-root .fn-cta:hover:not(:disabled) { color: var(--fn-cta-ink); }

/* A section's direct copy keeps a readable measure in a wide wrap. */
.fn-root .fn-wrap > p { max-width: 68ch; }

/* The scripted accent: a named thing in italic Playfair. accent-ink is navy
   on light bands and the dark tone re-points it to gold, so no per-band rule. */
.fn-root .fn-script { font-family: var(--fn-font-display); font-style: italic; font-weight: 500; color: var(--fn-accent-ink); }

/* The wordmark: quadra mark + two-tone Playfair name. */
.fn-root .fn-logo-quadra { inline-size: 1.9rem; block-size: 1.9rem; flex: 0 0 auto; }
.fn-root .fn-logo-quadra .q-line { fill: none; stroke: currentColor; stroke-width: 1.6; }
.fn-root .fn-logo-quadra .q-gold { fill: var(--fn-cta); }
.fn-root .fn-logo-name { font-family: var(--fn-font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.fn-root .fn-logo-name .fn-logo-tone { color: var(--fn-accent-ink); }
.fn-root .fn-tone-dark .fn-logo-name .fn-logo-tone { color: var(--fn-accent-on-dark); }

/* The matted frame, kept for pages that show a product image. */
.fn-root .fn-frame { position: relative; padding: .6rem; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper); box-shadow: var(--fn-shadow); overflow: hidden; }
.fn-root .fn-frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--fn-radius) - .6rem); }

/* ---- page: squeeze (sq-) ---- */
.fn-root .sq-hero { --fn-split: 1.05fr; --fn-gap: clamp(2rem, 5vw, 4rem); --fn-form-max: 28rem; }
.fn-root .sq-copy { max-width: 34rem; }
.fn-root .sq-form { max-width: 28rem; }
.fn-root .sq-exhibit { align-self: center; display: grid; gap: .9rem; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-paper-alt); }
.fn-root .sq-row { display: grid; gap: .35rem; }
.fn-root .sq-label { color: var(--fn-muted); font-size: var(--fn-small); font-weight: 600; }
.fn-root .sq-bubble { justify-self: start; max-width: 22rem; padding: .7rem 1rem; border-radius: 18px 18px 18px 4px; background: var(--fn-paper); border: 1px solid var(--fn-line); font-size: 1.05rem; line-height: 1.4; }
.fn-root .sq-bubble-sent { justify-self: end; border-radius: 18px 18px 4px 18px; background: var(--fn-cta); border-color: transparent; color: var(--fn-cta-ink); font-weight: 600; }
.fn-root .sq-row-sent .sq-label { justify-self: end; }
.fn-root .sq-read { font-family: var(--fn-font-display); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--fn-accent-ink); }
.fn-root .sq-gap { border-top: 1px dashed var(--fn-line); }
.fn-root .sq-narrow { --fn-max: 40rem; }

/* ---- page: thank you (ty-) ---- */
.fn-root .ty-hero { --fn-max: 40rem; }
.fn-root .ty-steps { --fn-max: 30rem; }
.fn-root .ty-offer { --fn-split: 1.2fr; --fn-gap: clamp(2rem, 5vw, 3.5rem); }
.fn-root .ty-card { display: grid; gap: .9rem; }
.fn-root .ty-card-title { font-family: var(--fn-font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.fn-root .ty-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-block: 1px solid var(--fn-line); }
.fn-root .ty-price strong { font-family: var(--fn-font-display); font-size: 2rem; font-weight: 600; line-height: 1; }
.fn-root .ty-facts { display: grid; gap: .3rem; color: var(--fn-muted); font-size: var(--fn-small); }

/* The squeeze form's error line. Hidden until the page script has a message
   for it; without JavaScript the function redirects to ?error=…#sq-error and
   :target shows the generic line the markup carries. */
.fn-root .sq-error { margin: 0; }
.fn-root .sq-error:target { display: block; }
.fn-root .sq-error[hidden]:not(:target) { display: none; }

/* Honeypot. Off screen rather than display:none, which some bots check for,
   and aria-hidden in the markup so a screen reader never announces it. */
.fn-root .sq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }