/* NanoPorter — direction J, "dark, consistent", 11 September 2026.
   Round 2. The surface system is unchanged: three tonal levels, a hairline between sections,
   glow only where light has a source. New this round: F's hero (one real exchange beside the
   enquiry email it produces), H's ghost chapter numerals, the scroll-driven mark restored across
   act one, three different widget looks in Three voices, a carousel that spreads its cards out
   instead of piling them up, and no Friday section. Only transform and opacity animate. Every
   word is in the HTML at first byte and the page reads top to bottom with JavaScript off. */

@font-face { font-family: "InterVar"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the faces the widget looks use, self-hosted Latin subsets (OFL), never a font service */
@font-face { font-family: "NunitoSub"; src: url("/fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "SourceSans3Sub"; src: url("/fonts/source-sans-3-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "LoraSub"; src: url("/fonts/lora-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "PlexMonoSub"; src: url("/fonts/plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexMonoSub"; src: url("/fonts/plex-mono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* three levels, and nothing between them */
  --l0: #070C0D;
  --l1: #0E1618;
  --l2: #18211F;

  --page:   var(--l1);
  --ink:    #F1F7F5;
  --body:   #D3E2DD;
  --muted:  #7B8A86;
  --rule:   #334441;
  --tint:   #18211F;
  --accent: #299771;
  --accent-lift: #3FBF90;
  --accent-deep: #1B6E51;

  --rail-w: 232px;
  --bar-h: 60px;

  --container: 1200px;
  --gutter: 28px;
  --r-card: 24px;
  --r-panel: 12px;
  --r-btn: 15px;
  --r-pill: 60px;

  --hair: 1px solid rgba(211, 226, 221, .10);
  --hair-strong: 1px solid rgba(211, 226, 221, .18);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* clip, not hidden: hidden would make the body a scroll container and break the sticky object */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "InterVar", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3 { color: var(--ink); font-weight: 500; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--accent); color: var(--l1); padding: 10px 16px; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 15px; line-height: 18px;
  padding: 11px 16px;
  border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
/* the one lit button: its light has a source, the button itself */
.btn-glow {
  color: var(--l1); font-weight: 600;
  background-color: var(--accent);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--accent-lift), rgba(41, 151, 113, 0) 79%);
  border: .8px solid var(--accent-deep);
  box-shadow: 0 0 30px rgba(41, 151, 113, .42);
}
.btn-glow:hover { box-shadow: 0 0 38px rgba(41, 151, 113, .58); }
.btn-quiet, .btn-chip {
  color: var(--ink);
  background: rgba(241, 247, 245, .04);
  border: var(--hair-strong);
}
.btn-quiet:hover, .btn-chip:hover { border-color: rgba(211, 226, 221, .4); }
.btn-chip { border-radius: var(--r-pill); padding: 11px 18px; text-align: left; }
.btn-chip.is-on { color: var(--l1); background: var(--ink); border-color: var(--ink); font-weight: 600; }
.round {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  color: var(--ink);
  background: rgba(7, 12, 13, .86); border: var(--hair-strong);
  cursor: pointer; padding: 0;
}
.round svg { width: 20px; height: 20px; display: block; }
.round:hover { border-color: rgba(211, 226, 221, .45); }

/* ---------------------------------------------------------------- the rail */

.rail {
  position: fixed; z-index: 40;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  display: flex; align-items: center;
  background: rgba(7, 12, 13, .72);
  backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px);
  border-bottom: var(--hair);
}
.rail-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.lockup { display: block; height: 26px; width: auto; }
.chapters { display: none; }
.rail-sub { display: flex; gap: 18px; margin-inline: auto; }
.rail-sub a { color: var(--body); text-decoration: none; font-size: 14px; opacity: .85; }
.rail-sub a:hover { opacity: 1; color: var(--ink); }
.rail-sub-more { display: none; }
.rail-cta { flex: 0 0 auto; }

@media (min-width: 1024px) and (orientation: landscape) {
  .rail { inset: 0 auto 0 0; width: var(--rail-w); height: auto; display: block; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; border-right: var(--hair); }
  .rail-inner { height: 100%; max-width: none; margin: 0; padding: 30px 26px 28px 30px; display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; scrollbar-width: none; }
  .lockup { height: 30px; }
  .chapters { display: block; position: relative; margin-top: 30px; }
  .chapters ol { display: flex; flex-direction: column; gap: 2px; }
  .chapters a { display: flex; align-items: baseline; gap: 12px; padding: 5px 0 5px 16px; text-decoration: none; color: var(--muted); font-size: 14px; line-height: 1.3; transition: color .3s var(--ease); }
  .chapters a:hover { color: var(--body); }
  .chapters a.is-current { color: var(--ink); }
  .ch-num { font-size: 11px; letter-spacing: .12em; color: var(--muted); flex: 0 0 22px; }
  .chapters a.is-current .ch-num { color: var(--accent-lift); }
  .ch-tick { position: absolute; left: 0; top: 0; width: 2px; height: 22px; border-radius: 2px; background: var(--accent-lift); box-shadow: 0 0 12px rgba(63, 191, 144, .7); transform: translateY(var(--tick-y, 9px)); transition: transform .5s var(--ease), opacity .3s var(--ease); opacity: 0; }
  .js .ch-tick { opacity: 1; }
  .rail-sub { margin: 20px 0 0; padding-top: 16px; border-top: var(--hair); display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .rail-sub a { font-size: 13px; color: var(--muted); opacity: 1; }
  .rail-sub a:hover { color: var(--ink); }
  .rail-sub-more { display: inline; }
  .rail-cta { margin-top: auto; align-self: stretch; transition: box-shadow .25s var(--ease); will-change: transform; }
  main, .foot { padding-left: var(--rail-w); }
}

/* ---------------------------------------------------------------- levels and rhythm */

.section { position: relative; padding: clamp(84px, 10vw, 136px) 0; }
.lvl-0 { background: var(--l0); }
.lvl-1 { background: var(--l1); }
.lvl-2 { background: var(--l2); }
.section + .section { border-top: var(--hair); }
/* the carousel's wash fades to nothing at both edges, so it needs no rule of its own */
.skins, .skins + .section { border-top: 0; }

/* editorial heads: the chapter numeral set huge and ghosted behind (H's, 11 September) */
.section-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; max-width: 820px; }
.section-head.centred { align-items: center; text-align: center; margin-inline: auto; }
.ghost {
  position: absolute; left: -.05em; top: -.42em; z-index: 0; pointer-events: none;
  font-size: clamp(110px, 14vw, 200px); line-height: 1; font-weight: 200; letter-spacing: -.04em;
  color: var(--rule); opacity: .55; user-select: none;
}
.section-head.centred .ghost { left: 50%; translate: -50% 0; }
.section-head > *:not(.ghost) { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: baseline; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-lift); }
/* one big statement per screen */
.section-title { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.028em; font-weight: 550; max-width: 15em; }
.section-title.statement { font-size: clamp(2.3rem, 5.4vw, 4.5rem); max-width: 12em; }
.section-title.small { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 14em; }
.section-sub { color: var(--muted); max-width: 34em; font-size: 16px; }
.section-sub.wide { max-width: 40em; color: var(--body); }
.lede { margin-top: 20px; color: var(--body); font-size: 18px; line-height: 1.55; max-width: 30em; }
.lede-2 { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 32em; }
.two-up { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .two-up { grid-template-columns: 1fr; gap: 36px; } }

/* ---------------------------------------------------------------- the widget, real markup
   Lifted from widget-designer.html (the engine's widget.html base CSS). The variables and the
   data-attributes on each .npw are the look's parameters, written by tools/gen-widgets.mjs from
   the asset JSONs; nothing here picks a colour. */

.npw {
  position: relative; display: flex; flex-direction: column; width: 100%;
  border-radius: var(--r-frame, 16px); overflow: hidden;
  background: var(--surface, #fff); color: var(--ink, #1d1d1f);
  font-family: var(--font, "InterVar", Inter, system-ui, sans-serif); font-size: var(--fs, 14px); line-height: 1.45;
  font-variant-numeric: normal; letter-spacing: 0; text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .62), 0 0 0 2px rgba(0, 0, 0, .62), 0 14px 44px rgba(0, 0, 0, .28), var(--glow, 0 0 0 0 transparent);
}
.npw[data-frame="flat"] { box-shadow: 0 0 0 1px var(--line), var(--glow, 0 0 0 0 transparent); }
.npw[data-frame="outlined"] { box-shadow: 0 0 0 2px var(--accent), 0 14px 44px rgba(0, 0, 0, .18), var(--glow, 0 0 0 0 transparent); }
.npw[data-frame="hard"] { border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--accent); border-radius: 0; }
.npw[data-texture="dots"] { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.npw[data-texture="grid"] { background-image: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.npw[data-texture="lines"] { background-image: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--ink) 5%, transparent) 7px 8px); }
.npw-head { padding: 14px 16px; border-bottom: 1px solid var(--line, #e5e7eb); background: var(--head-bg, var(--surface)); color: var(--head-ink, var(--ink)); display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.npw-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: none; align-items: center; justify-content: center; flex: none; color: #fff; }
.npw-av svg { width: 18px; height: 18px; display: block; }
.npw[data-avatar="head"] .npw-av, .npw[data-avatar="both"] .npw-av { display: flex; }
.npw-t { min-width: 0; }
.npw-title { margin: 0; font-size: calc(var(--fs) + 1px); display: flex; align-items: center; gap: 8px; font-weight: 700; color: inherit; line-height: 1.3; letter-spacing: 0; }
.npw[data-title="upper"] .npw-title { text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--fs) - 1px); }
.npw-letterhead { font-size: 10px; font-weight: 500; letter-spacing: .02em; padding: 2px 8px; border: 1px solid var(--head-line, var(--line)); border-radius: 999px; margin-left: 2px; opacity: .9; white-space: nowrap; }
.npw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: none; flex: none; }
.npw[data-header="surface"] .npw-dot, .npw[data-header="underline"] .npw-dot { display: inline-block; }
.npw[data-header="underline"] .npw-head { border-bottom: 2px solid var(--accent); }
.npw[data-header="gradient"] .npw-head { background: linear-gradient(100deg, var(--head-bg), var(--accent)); }
.npw-sub { margin: 2px 0 0; font-size: 11px; color: var(--head-muted, var(--muted)); line-height: 1.5; }
.npw-link { text-decoration: underline; }
.npw-endbtn { border: 1px solid var(--head-line, var(--line)); border-radius: 999px; padding: 2px 9px; font-weight: 600; color: var(--head-ink, var(--ink)); white-space: nowrap; }
.npw[data-corners="none"] .npw-endbtn { border-radius: 3px; }
.npw-log { flex: 1 1 auto; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; min-height: 0; }
.npw-line { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; flex: 0 0 auto; }
.npw-line.me { align-self: flex-end; flex-direction: row-reverse; }
.npw-line > div { min-width: 0; }
.npw-mav { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: none; flex: none; align-items: center; justify-content: center; margin-bottom: 2px; color: #fff; }
.npw-mav svg { width: 14px; height: 14px; display: block; }
.npw[data-avatar="messages"] .npw-line.bot .npw-mav, .npw[data-avatar="both"] .npw-line.bot .npw-mav { display: flex; }
.npw[data-layout="stacked"] .npw-line, .npw[data-layout="stacked"] .npw-line.me { align-self: flex-start; flex-direction: row; max-width: 100%; }
.npw[data-layout="stacked"] .npw-msg { border-radius: var(--r-bubble); }
.npw[data-layout="stacked"] .npw-who { display: block; }
.npw-who { display: none; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.npw-msg { padding: 9px 12px; border-radius: var(--r-bubble, 14px); line-height: 1.45; font-size: var(--fs); font-weight: 400; letter-spacing: 0; }
/* the assistant bubble's text derives from the BUBBLE, not the surface (handover addendum) */
.npw-line.bot .npw-msg { background: var(--bot, #f3f4f6); color: var(--bot-ink, var(--ink)); border-bottom-left-radius: var(--r-tail, 4px); }
.npw-line.me .npw-msg { background: var(--me); color: var(--me-ink, #fff); border-bottom-right-radius: var(--r-tail, 4px); }
.npw[data-bubbles="square"] .npw-msg { border-radius: 0 !important; }
.npw[data-bubbles="outlined"] .npw-line.bot .npw-msg { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.npw[data-bubbles="outlined"] .npw-line.me .npw-msg { background: transparent; border: 1.5px solid var(--me); color: var(--ink); }
.npw[data-bubbles="notail"] .npw-msg { border-radius: var(--r-bubble) !important; }
.npw-msg a { color: var(--accent); font-weight: 600; }
.npw-msg strong { font-weight: 700; }
.npw-dots { display: inline-flex; gap: 5px; align-items: center; padding: 3px 1px; }
.npw-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; opacity: .6; }
.npw-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line, #e5e7eb); margin: 0; align-items: center; background: var(--surface); flex: 0 0 auto; }
.npw-in { flex: 1; padding: 10px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-input, 10px); font-size: var(--fs); background: var(--input-bg, var(--surface)); color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npw[data-input="underline"] .npw-in { border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; }
.npw[data-input="pill"] .npw-in { border-radius: 999px; }
.npw[data-input="filled"] .npw-in { border: 0; background: var(--bot); color: var(--bot-ink, var(--ink)); }
.npw-send { padding: 10px 14px; border: 0; background: var(--send-bg, var(--me)); color: var(--send-ink, var(--me-ink, #fff)); border-radius: var(--r-input, 10px); font-size: var(--fs); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.npw-send svg { width: 18px; height: 18px; display: none; }
.npw[data-send="round"] .npw-send { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.npw[data-send="round"] .npw-send span, .npw[data-send="icon"] .npw-send span { display: none; }
.npw[data-send="round"] .npw-send svg, .npw[data-send="icon"] .npw-send svg { display: block; }
.npw[data-send="icon"] .npw-send { background: transparent; color: var(--accent); padding: 0 6px; }
.npw[data-send="ghost"] .npw-send { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.npw-powered { font-size: 10px; color: var(--muted); text-align: center; padding: 0 0 6px; background: var(--surface); margin: 0; flex: 0 0 auto; }

.npw-launcher {
  position: absolute; right: 0; bottom: 0;
  height: var(--size, 60px); min-width: var(--size, 60px); border-radius: 50%;
  background: var(--launcher); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .62), 0 0 0 2px rgba(0, 0, 0, .62), 0 6px 20px rgba(0, 0, 0, .25), var(--glow, 0 0 0 0 transparent);
  font-family: var(--font); font-weight: 700; font-size: 14px;
}
.npw-glyph { display: flex; align-items: center; justify-content: center; width: calc(var(--size, 60px) / 2); height: calc(var(--size, 60px) / 2); flex: none; }
.npw-glyph svg { width: 100%; height: 100%; display: block; }
.npw-launcher[data-shape="square"] { border-radius: calc(var(--size) * .22); }
.npw-launcher[data-shape="pill"] { border-radius: 999px; padding: 0 18px 0 12px; }
.npw-launcher[data-shape="pill"] .npw-lbl { display: inline; }
.npw-lbl { display: none; }
.npw-launcher[data-shape="hard"] { border-radius: 0; border: 2px solid var(--ink); box-shadow: 5px 5px 0 0 var(--ink); }

/* ---------------------------------------------------------------- act one: the moving mark
   One object across the hero and the problem: it starts beside the headline, grows and drifts
   behind the stage, darkens into the backdrop behind the three beats, and is gone before the
   next chapter. Opacity and transform only; contained to act one, behind nothing that has to be
   read. Without JavaScript it is a still, faint backdrop. */

.act { position: relative; isolation: isolate; }
/* z-index 1: above the two opaque section grounds of act one, below every line of their copy */
.object { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; z-index: 1; pointer-events: none; overflow: visible; }
.js .object { position: sticky; top: 0; margin-bottom: -100vh; margin-bottom: -100svh; }
.object-inner { position: absolute; left: 50%; top: 50%; width: min(30vh, 46vw); aspect-ratio: 930 / 1059; translate: -50% -50%; }
.object-move { position: absolute; inset: 0; transform: translate3d(26vw, -14vh, 0) scale(1); will-change: transform; }
.object-mark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: opacity; }
.object-lit { opacity: .32; }
.js .object-lit { opacity: .9; }
.object-bloom {
  position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(41, 151, 113, .34) 0%, rgba(41, 151, 113, .14) 30%, rgba(41, 151, 113, .04) 52%, rgba(41, 151, 113, 0) 70%);
  filter: blur(22px); opacity: 0;
}
.js .object-bloom { opacity: 1; }
@media (max-width: 1023px), (orientation: portrait) {
  .object-inner { width: min(30vh, 56vw); }
  .object-move { transform: translate3d(0, -6vh, 0) scale(1.35); }
}

/* ---------------------------------------------------------------- 01 hero (F's, lifted)
   The headline and the two chips, then one real exchange in the widget's Classic look beside the
   enquiry email it produced. */

.hero { padding: 128px 0 0; overflow: visible; }
.hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.light-rig { position: absolute; inset: -64px 0 auto 0; height: 900px; z-index: 0; pointer-events: none; overflow: hidden; }
.glow-circle { position: absolute; left: 50%; top: -300px; translate: -50% 0; width: min(620px, 108vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(63, 191, 144, .58) 0%, rgba(41, 151, 113, .30) 26%, rgba(41, 151, 113, .08) 46%, rgba(41, 151, 113, 0) 66%); filter: blur(34px); }
.light { position: absolute; top: -180px; width: 132px; height: 760px; background: linear-gradient(rgba(241, 247, 245, .16) 4%, rgba(241, 247, 245, 0) 62%); filter: blur(11px); }
.light-left { left: 26%; rotate: 15deg; }
.light-mid { left: 50%; translate: -50% 0; width: 210px; height: 880px; opacity: .55; }
.light-right { right: 26%; rotate: -15deg; }
.badge { display: inline-flex; align-items: stretch; gap: 10px; padding: 1px 16px 1px 1px; border-radius: var(--r-pill); background: rgba(241, 247, 245, .04); border: var(--hair-strong); font-size: 14px; color: var(--body); }
.badge-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--r-pill); background-color: var(--accent); background-image: radial-gradient(circle at 50% 100%, var(--accent-lift), rgba(41, 151, 113, 0) 59%); color: var(--l1); font-weight: 600; font-size: 13px; }
.badge-text { align-self: center; }
.hero-title { margin-top: 26px; font-size: clamp(2.5rem, 7.4vw, 4.25rem); line-height: 1.08; max-width: 640px; letter-spacing: -.025em; }
.hero-sub { margin-top: 18px; max-width: 540px; color: var(--body); font-size: 17px; }
.chips { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chips-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
@media (min-width: 1024px) and (orientation: landscape) {
  .hero-inner { align-items: flex-start; text-align: left; }
  .hero-copy { align-items: flex-start; max-width: 640px; }
  .chips { justify-content: flex-start; }
  .glow-circle { left: 30%; }
  .light-left { left: 12%; } .light-mid { left: 30%; } .light-right { right: 48%; }
}

.hero-stage { position: relative; z-index: 4; width: 100%; margin: 52px 0 40px;
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px 44px; align-items: start; justify-content: center; }
.hero-wf { width: 100%; max-width: 380px; height: 470px; display: flex; }
.hero-email { margin-top: 64px; max-width: 520px; justify-self: start; }
.hero-caption { grid-column: 1 / -1; color: var(--muted); font-size: 13px; max-width: 34em; margin-top: -8px; }
@media (min-width: 1024px) and (orientation: landscape) { .hero-stage { justify-content: start; } }
@media (max-width: 900px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
  .hero-wf { height: auto; min-height: 440px; }
  .hero-wf .npw-log { justify-content: flex-start; }
  .hero-email { margin-top: 0; justify-self: center; width: 100%; }
  .hero-caption { text-align: center; }
}

/* ---------------------------------------------------------------- an email shown as itself
   The engine's real template markup, inlined; the sheet resets what the page would otherwise pass
   down and the inline styles do the rest. In the hero it is tilted in 3D, straight on hover, flat
   under 768px and under reduced motion. In chapter 03 it stands upright and scrolls in its pane. */

.tilt-wrap { perspective: 1200px; }
.tilt { transform: rotateY(var(--ty, -14deg)) rotateX(var(--tx, 6deg)); transform-origin: 50% 40%; transition: transform .7s var(--ease); will-change: transform; }
.tilt:hover, .tilt:focus-within { transform: rotateY(0) rotateX(0); }
.email-card {
  border-radius: 10px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(41, 151, 113, .18);
}
/* the inbox line above the sheet: the email's own subject, as a mail client shows it */
.email-subject { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E7F1EC; background: #F7FBF9; color: #0E1618; font-size: 13px; font-weight: 600; letter-spacing: -.005em; font-family: "InterVar", Inter, system-ui, sans-serif; }
.email-subject small { margin-left: auto; color: #5C6E6A; font-weight: 400; font-size: 12px; white-space: nowrap; }
.email-sheet { padding: 22px 22px 24px; color: #1d1d1f; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; letter-spacing: 0; text-align: left; font-variant-numeric: normal; }
.email-sheet p { margin: 0; }
.email-sheet table { border-spacing: 0; border-collapse: collapse; }
.email-sheet td { vertical-align: top; }
/* the hero's copy of the email is cropped: it is the artefact arriving, not the whole read */
.hero-email .email-scroll { max-height: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 74%, transparent 100%); mask-image: linear-gradient(#000 74%, transparent 100%); }
/* chapter 03: the copy stands still while the email scrolls inside its pane */
.email-pane { max-height: min(660px, 76vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 82%, transparent 99%); mask-image: linear-gradient(#000 82%, transparent 99%); }
.email-pane:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 4px; }
.email-pane .email-subject { position: sticky; top: 0; z-index: 2; }
.email-side { align-self: stretch; }
.email-side .stick { position: sticky; top: 100px; }
.disclosure { margin-top: 22px; color: var(--muted); font-size: 13px; max-width: 34em; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .tilt-wrap { perspective: none; }
  .tilt, .tilt:hover { transform: none; }
  .email-side .stick { position: static; }
}

/* ---------------------------------------------------------------- 02 the problem: an editorial list */

.beats .container { position: relative; z-index: 3; }
.beat-list { margin-top: 64px; border-top: var(--hair); }
.beat { display: grid; grid-template-columns: 140px minmax(0, 7fr) minmax(0, 6fr); gap: 20px 40px; align-items: start; padding: 40px 0 44px; border-bottom: var(--hair); }
.beat-num { font-size: clamp(3.6rem, 6.5vw, 6.5rem); line-height: .8; font-weight: 700; letter-spacing: -.05em; color: rgba(241, 247, 245, .11); margin-top: -.06em; }
.beat-title { font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 550; }
.beat-body { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 30em; padding-top: 6px; }
.beats-close { margin-top: 56px; max-width: 22em; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.02em; font-weight: 500; }

/* ---------------------------------------------------------------- 04 three voices
   F's layout, condensed: the six questions, three widgets each in its own look, the personality
   line under each. All eighteen exchanges are in the HTML; JavaScript only chooses which one
   shows, and the answer appears whole — these are captures, so nothing types itself here. */

.demos { padding-block: 80px; }
.trio-strip { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.trio-strip .btn-chip { padding: 10px 16px; min-height: 44px; font-size: 14px; }
.handoff-label { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 46em; }
.trio-tabs { display: none; }
.trio-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
@media (min-width: 1024px) and (orientation: landscape) { .trio-grid { margin-right: 84px; } }
.voice { position: relative; display: flex; flex-direction: column; isolation: isolate; }
.voice .npw { flex: 1 1 auto; min-height: 390px; }
.voice .npw-log { justify-content: flex-start; }
/* the floor: light from the lit window pools beneath it. Source: the window. */
.voice::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 34px; height: 84px; z-index: -1;
  background: radial-gradient(50% 60% at 50% 40%, rgba(16, 160, 107, .5), rgba(16, 160, 107, 0) 72%);
  filter: blur(18px); pointer-events: none;
}
.demo-x { display: flex; flex-direction: column; gap: 9px; }
.demo-x + .demo-x { padding-top: 12px; border-top: 1px dashed var(--line, #e5e7eb); }
.js .demo-x { display: none; }
.js .demo-x.is-on { display: flex; animation: appear .45s var(--ease) both; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.npw-q { margin: 0; font-weight: 400; }
.handoff-state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 0 0 32px; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.npw[data-avatar="off"] .handoff-state { margin-left: 0; }
.handoff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.voice-note { margin-top: 14px; min-height: 38px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.voice-note b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- 05 pick a look
   The cards sit side by side in one track and each is readable; the chosen one is full strength
   and the section's wash takes its glow colour. The track is the same native scroll-snap track
   with JavaScript on or off — the chevrons and dots scroll it, nothing is stacked or flown. */

.skins { isolation: isolate; overflow: hidden; padding: 88px 0 64px; }
.skin-ground { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.skin-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease); background: radial-gradient(60% 46% at 50% 56%, color-mix(in srgb, var(--glow-c) 48%, transparent), color-mix(in srgb, var(--glow-c) 0%, transparent) 72%), linear-gradient(180deg, color-mix(in srgb, var(--glow-c) 6%, transparent), color-mix(in srgb, var(--glow-c) 12%, transparent)); }
.skin-layer.is-on { opacity: 1; }
.skins-inner { position: relative; }
.skins .section-sub { color: var(--body); }
.arc { position: relative; margin-top: 44px; --card-w: min(340px, 82vw); }
.chev { position: absolute; top: calc(50% - 40px); z-index: 5; transform: translateY(-50%); border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 50%, transparent); transition: border-color .4s var(--ease), opacity .3s var(--ease); }
.chev:hover { border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 85%, transparent); }
.chev[disabled] { opacity: .25; cursor: default; }
.chev-prev { left: calc(50% - var(--card-w) / 2 - 72px); }
.chev-next { right: calc(50% - var(--card-w) / 2 - 72px); }

.skin-track {
  display: flex; gap: 40px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 10px 28px;
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: calc((100vw - var(--card-w)) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.skin-track::-webkit-scrollbar { display: none; }
.skin-card {
  position: relative; flex: 0 0 var(--card-w); scroll-snap-align: center;
  transform: scale(.94); opacity: .5;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.skin-card.is-live { transform: none; opacity: 1; }
.skin-stage { position: relative; padding: 0 0 84px 0; }
.skin-card .npw-log { min-height: 0; justify-content: flex-start; }
.skin-meta { margin-top: 4px; text-align: center; }
.skin-label { color: var(--ink); font-size: 16px; font-weight: 600; }
.skin-tier { margin-top: 6px; display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--glow-c) 55%, transparent); color: var(--body); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.skin-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.skin-dots { display: flex; gap: 6px; }
.skin-dots button { width: 32px; height: 32px; border-radius: 3px; border: 0; cursor: pointer; padding: 14px 2px; background-clip: content-box; background-color: rgba(211, 226, 221, .22); transition: background-color .3s var(--ease); }
.skin-dots button.is-on { background-color: var(--dot, var(--accent-lift)); }

/* ---------------------------------------------------------------- 06 what it will not do */

.wont-list { margin: 56px auto 0; max-width: 780px; border-top: var(--hair); }
.wont-list li { padding: 26px 0; border-bottom: var(--hair); color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.28; letter-spacing: -.018em; font-weight: 500; }
.wont-second { margin: 88px auto 0; max-width: 860px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 56px; align-items: start; }
.wont-second-copy { display: flex; flex-direction: column; gap: 14px; }
.wont-second .lede { margin-top: 0; font-size: 16px; }
.roadmap { margin: 56px auto 0; max-width: 34em; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- 07 how it works: a timeline */

.how-grid { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
.how-aside { position: sticky; top: 120px; }
.timeline { position: relative; padding-left: 64px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: rgba(211, 226, 221, .18); }
.step { position: relative; padding: 0 0 56px; }
.step:last-of-type { padding-bottom: 0; }
.step-num { position: absolute; left: -64px; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--l1); border: 1px solid rgba(211, 226, 221, .28); color: var(--ink); font-weight: 600; font-size: 15px; }
.step-title { font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 550; padding-top: 6px; }
.step-body { margin-top: 10px; color: var(--body); font-size: 16px; max-width: 30em; }
.ownership { margin-top: 64px; max-width: 26em; color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; }
.option { margin-top: 18px; max-width: 40em; color: var(--body); font-size: 15px; }

.site-mini { position: relative; max-width: 340px; width: 100%; border-radius: 10px; background: #0B1211; border: var(--hair-strong); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); overflow: hidden; }
.site-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding-inline: 12px; border-bottom: var(--hair); }
.site-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(123, 138, 134, .5); }
.site-url { margin-left: 8px; padding: 2px 10px; border-radius: 20px; background: rgba(51, 68, 65, .35); color: rgba(211, 226, 221, .8); font-size: 10px; letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: var(--hair); font-size: 10px; color: rgba(211, 226, 221, .7); }
.site-nav b { color: rgba(241, 247, 245, .85); font-weight: 600; margin-right: auto; letter-spacing: .04em; }
.site-nav i { font-style: normal; }
.site-body { padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.site-hero { min-height: 74px; border-radius: 6px; background: linear-gradient(115deg, rgba(51, 68, 65, .65), rgba(24, 33, 31, .45) 62%); display: flex; align-items: flex-end; padding: 10px 12px; }
.site-hero-line { color: rgba(241, 247, 245, .92); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.site-line { height: 7px; border-radius: 4px; background: rgba(51, 68, 65, .5); }
.site-line.w70 { width: 70%; } .site-line.w52 { width: 52%; } .site-line.w60 { width: 60%; } .site-line.w40 { width: 40%; }
.site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block: 4px; }
.site-grid i { height: 34px; border-radius: 6px; background: rgba(51, 68, 65, .38); }
.site-mini .npw-launcher { right: 14px; bottom: 14px; --size: 44px; }

/* ---------------------------------------------------------------- 08 prices */

.vat-toggle { margin: 34px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; }
.seg { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 3px; border-radius: var(--r-pill); background: rgba(241, 247, 245, .04); border: var(--hair-strong); }
.seg legend { float: left; padding: 0 12px 0 10px; line-height: 34px; color: var(--muted); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label { font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill); color: var(--muted); cursor: pointer; user-select: none; transition: background .25s var(--ease), color .25s var(--ease); }
.seg input:checked + label { background: var(--accent); color: var(--l1); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
html:has(#vat-inc:checked) [data-ex] { display: none !important; }
html:has(#vat-inc:checked) [data-inc] { display: inline !important; }

.tiers-wrap { margin: 36px -14px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.tiers { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 14px 0; font-size: 14px; color: var(--body); --card-bg: rgba(24, 33, 31, .55); --card-line: rgba(211, 226, 221, .12); --card-bg-hi: rgba(28, 44, 40, .72); --card-line-hi: rgba(41, 151, 113, .55); }
.tiers th, .tiers td { text-align: left; vertical-align: top; padding: 12px 18px; }
.tiers .row-label, .tiers th[scope="row"] { width: 17%; min-width: 148px; padding-left: 0; padding-right: 10px; color: var(--body); font-weight: 500; line-height: 1.4; }
.tiers th[scope="row"] { padding-top: 14px; }
.fn-mark { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; margin: -4px 0 -4px -2px; color: var(--accent-lift); text-decoration: none; font-weight: 700; }
.tiers .tier { background: var(--card-bg); border-left: 1px solid var(--card-line); border-right: 1px solid var(--card-line); }
.tiers thead .tier { position: relative; border-top: 1px solid var(--card-line); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 36px 18px 18px; vertical-align: top; }
.tiers tbody tr:last-child .tier { border-bottom: 1px solid var(--card-line); border-radius: 0 0 var(--r-panel) var(--r-panel); padding-bottom: 22px; }
.tiers tbody .tier { border-top: 1px solid rgba(51, 68, 65, .55); }
.tiers tbody .row-price .tier { border-top: 0; padding-top: 6px; }
.tiers .tier.is-featured { background: var(--card-bg-hi); border-left-color: var(--card-line-hi); border-right-color: var(--card-line-hi); }
.tiers thead .tier.is-featured { border-top-color: var(--card-line-hi); }
.tiers tbody tr:last-child .tier.is-featured { border-bottom-color: var(--card-line-hi); box-shadow: inset 0 -14px 34px rgba(41, 151, 113, .18); }
.tier-tag { position: absolute; top: 13px; left: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lift); }
.tier-name { display: block; color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.2; }
.tier-for { display: block; margin-top: 8px; color: var(--body); opacity: .85; font-size: 13px; line-height: 1.45; font-weight: 400; }
.row-price .was { display: block; color: var(--muted); font-size: 15px; text-decoration-color: rgba(123, 138, 134, .8); }
.row-price .now { display: block; margin-top: 2px; color: var(--ink); font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.row-price .now small { font-size: 14px; font-weight: 400; color: var(--muted); }
.row-price .was + .now { color: var(--accent-lift); text-shadow: 0 0 22px rgba(63, 191, 144, .45); }
.row-price .per { display: block; margin-top: 6px; color: var(--body); font-size: 13px; line-height: 1.35; }
.row-price .tier { padding-bottom: 16px; }
/* the two tiers with no struck price start where the others' struck line would be, so every
   figure shares a baseline */
.row-price .tier > .now:first-child { margin-top: 26px; }
.tick { color: var(--accent-lift); font-weight: 600; }
.no { color: var(--muted); }
.row-cta .tier { padding-top: 18px; }
.row-cta .btn { width: 100%; font-size: 14px; padding: 12px 6px; white-space: nowrap; }
.footnotes { margin: 22px auto 0; max-width: 760px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.footnotes li:first-child { color: var(--body); }
@media (max-width: 620px) {
  .tiers { min-width: 860px; }
  .tiers .row-label, .tiers th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--l1); min-width: 140px; width: 150px; padding-right: 12px; }
  .tiers th[scope="row"] { box-shadow: 8px 0 12px -8px rgba(0, 0, 0, .7); }
}

/* ---------------------------------------------------------------- 09 get in touch */

.contact-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact-sub { margin-top: 18px; color: var(--accent-lift); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; }
.contact .lede { margin-top: 26px; text-align: center; max-width: 36em; }
.contact .lede a { color: var(--ink); }
.contact-cta { margin-top: 34px; }
.btn-big { font-size: 17px; padding: 16px 30px; }
.contact-lines { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.contact-line { color: var(--body); text-decoration: none; font-size: 15px; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.contact-line:hover { color: var(--ink); }
.contact-form { margin-top: 64px; width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea { font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 10px 0; border: 0; border-bottom: 1px solid rgba(211, 226, 221, .28); background: transparent; border-radius: 0; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent-lift); }
.field textarea { resize: vertical; min-height: 90px; }
.contact-form .btn { min-height: 44px; justify-self: start; border-color: rgba(211, 226, 221, .38); }
.form-note { color: var(--muted); font-size: 12px; align-self: center; }

/* ---------------------------------------------------------------- 10 questions: hairline rows */

.qa-list { margin-top: 56px; max-width: 860px; border-top: var(--hair); }
.qa-list + .qa-list { margin-top: 0; border-top: 0; }
.qa { border-bottom: var(--hair); }
.qa h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.3; font-weight: 550; letter-spacing: -.012em; }
.qa p { color: var(--body); font-size: 15px; line-height: 1.62; max-width: 40em; }
details.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary h3 { flex: 1; }
details.qa summary:hover h3 { color: var(--accent-lift); }
details.qa summary:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 4px; border-radius: 4px; }
.qa-chevron { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: var(--hair-strong); position: relative; transition: transform .35s var(--ease), border-color .25s var(--ease); }
.qa-chevron::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--accent-lift); border-bottom: 2px solid var(--accent-lift); translate: -50% -70%; rotate: 45deg; }
details.qa[open] .qa-chevron { transform: rotate(180deg); border-color: rgba(211, 226, 221, .4); }
details.qa > p { margin: 0; padding: 0 70px 26px 0; }
details.qa .qa-body { padding: 0 70px 26px 0; }
details.qa .qa-body p + p { margin-top: 10px; }
@media (max-width: 620px) { details.qa > p, details.qa .qa-body { padding-right: 0; } }
.faq-more { margin-top: 28px; }
.more-link { display: inline-block; padding: 12px 0; min-height: 44px; color: var(--accent-lift); text-decoration: none; font-size: 15px; font-weight: 600; }
.more-link:hover { color: var(--ink); }

/* ---------------------------------------------------------------- footer */

.foot { position: relative; border-top: var(--hair); padding-block: 40px 56px; background: var(--l0); }
.foot-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-right: 108px; }
.lockup-foot { height: 22px; }
@media (min-width: 1024px) and (orientation: landscape) {
  .foot { border-top: 0; }
  .foot::before { content: ""; position: absolute; left: var(--rail-w); right: 0; top: 0; border-top: var(--hair); }
  .foot-inner .brand { position: absolute; left: 30px; top: 50%; translate: 0 -50%; }
  .lockup-foot { height: 30px; }
  .foot-links { margin-inline: 0 auto; }
}
.foot-links { display: flex; gap: 22px; margin-inline: auto; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 10px 0; display: inline-block; }
.foot-links a:hover { color: var(--ink); }
.foot-note { color: var(--muted); font-size: 12px; }
.foot-company { color: var(--body); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.foot-company:hover { color: var(--ink); }

/* ---------------------------------------------------------------- motion
   The budget is spent at the top: the hero's load stagger as CSS keyframes (it runs with
   JavaScript off), then the storyboard, which is JavaScript and never runs under reduced motion.
   Below the fold the arrivals are visible by default; JavaScript marks only what is still below
   the viewport at load as waiting and reveals it in order. */

@keyframes rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .stage-1, .stage-2, .stage-3, .stage-4, .stage-5 { animation: rise .8s var(--ease) both; }
  .stage-1 { animation-delay: .05s; }
  .stage-2 { animation-delay: .16s; }
  .stage-3 { animation-delay: .28s; }
  .stage-4 { animation-delay: .40s; }
  .stage-5 { animation-delay: .52s; }
  .arrive { transition: opacity 1.1s cubic-bezier(.33, .02, .2, 1), transform 1.1s cubic-bezier(.33, .02, .2, 1); transition-delay: var(--arrive-delay, 0s); }
  .arrive.is-waiting { opacity: 0; transform: translate3d(0, 22px, 0); }
  tr.arrive.is-waiting { transform: translate3d(0, 12px, 0); }
  /* the storyboard: only inside .is-playing, which app.js adds at load */
  .is-playing .npw-line[data-hero="q"] { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .is-playing .npw-line[data-hero="a"] { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .is-playing .hero-email { opacity: 0; transform: translate3d(48px, 24px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .is-playing .npw-line.is-in, .is-playing .hero-email.is-in { opacity: 1; transform: none; }
  .hero-dots .npw-dots span { animation: blink 1.1s infinite; }
  .hero-dots .npw-dots span:nth-child(2) { animation-delay: .18s; }
  .hero-dots .npw-dots span:nth-child(3) { animation-delay: .36s; }
  @keyframes blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .arrive.is-waiting { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .beat { grid-template-columns: 100px minmax(0, 1fr); }
  .beat-body { grid-column: 2; padding-top: 0; }
  .trio-grid { gap: 18px; }
}

@media (max-width: 900px) {
  .section { padding: 76px 0; }
  .hero { padding: 112px 0 0; }
  /* the three windows become one snap track: the next business peeks in at the right edge */
  .trio-grid { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 18px var(--gutter) 24px; align-items: stretch; }
  .trio-grid::-webkit-scrollbar { display: none; }
  .voice { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-top: 80px; }
  .voice .npw { min-height: 400px; }
  .trio-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; padding-right: 0; }
  .trio-tabs .trio-tab:last-child { margin-right: 0; }
  .trio-tab { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 6px; border-radius: 999px; border: var(--hair-strong); color: var(--body); text-decoration: none; font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center; transition: color .25s var(--ease), border-color .25s var(--ease); }
  .trio-tab.is-on { color: var(--l1); background: var(--ink); border-color: var(--ink); font-weight: 600; }
  .trio-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .trio-strip::-webkit-scrollbar { display: none; }
  .trio-strip .btn-chip { flex: 0 0 auto; white-space: nowrap; }
  .trio-strip { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .handoff-label { font-size: 13px; }
  .beat { grid-template-columns: 1fr; gap: 10px; padding: 30px 0 34px; }
  .beat-num { font-size: 3.2rem; margin: 0 0 4px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-aside { position: static; }
  .site-mini { max-width: 280px; }
  .wont-second { grid-template-columns: 1fr; gap: 14px; }
  .section-title.small { max-width: none; }
  .timeline { padding-left: 56px; }
  .step-num { left: -56px; width: 40px; height: 40px; }
  .timeline::before { left: 19px; }
  .contact-form { grid-template-columns: 1fr; }
  .ghost { font-size: 96px; top: -.5em; opacity: .45; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .chips { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-chip { text-align: center; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 0; }
  .foot-links { margin-inline: 0; flex-wrap: wrap; }
  .arc, .skin-track { --card-w: min(300px, 80vw); }
  .skins { padding: 64px 0 48px; }
  /* On a phone there is no room beside a 300px card for a 44px button: the chevrons covered the
     widget's own header. The track is a native scroll-snap track, so a swipe is the gesture, and
     the six dots stay as the explicit control. */
  .chev { display: none; }
  .skin-dots { gap: 10px; }
  .skin-dots button { width: 38px; }
  .rail-cta { padding: 12px 14px; font-size: 13px; }
  .rail-sub { display: none; }
  .rail-inner { justify-content: space-between; }
  .lockup { height: 30px; }
  .hero-sub { font-size: 16px; }
  .voice { flex-basis: 88%; }
  .glow-circle { width: min(820px, 170vw); top: -230px; }
  .light { opacity: .3; } .light-mid { opacity: .18; }
}

@media (max-width: 1023px), (orientation: portrait) {
  .hero { padding-top: 96px; }
}

/* the carousel spans the content column, not the viewport: the rail must not hide its left half */
@media (min-width: 1024px) and (orientation: landscape) {
  .skins .skin-track { width: calc(100vw - var(--rail-w)); margin-inline: calc(50% - (100vw - var(--rail-w)) / 2); padding-inline: calc((100vw - var(--rail-w) - var(--card-w)) / 2); }
}

/* ================================================================ pages: about, faq, privacy, terms, company */
.page { padding: 132px 0 80px; }
.page-inner { max-width: 760px; }
.page-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: -.028em; font-weight: 550; }
.page-lede { margin-top: 14px; color: var(--muted); font-size: 16px; }
.prose { margin-top: 32px; color: var(--body); font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: -.028em; font-weight: 550; }
.prose h2 { margin-top: 38px; font-size: 22px; line-height: 1.3; }
.prose h3 { margin-top: 26px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.prose p { margin-top: 14px; }
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--accent-lift); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-lift); }
mark.held, .held { background: rgba(224, 102, 43, .18); color: var(--ink); border: .8px solid rgba(224, 102, 43, .5); border-radius: 6px; padding: 0 6px; }
.held-note { margin-top: 10px; display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.about-grid { margin-top: 32px; }
.about-grid::after { content: ""; display: block; clear: both; }
.about-grid .prose { margin-top: 0; }
.headshot { float: left; width: 250px; max-width: 45%; height: auto; margin: 6px 32px 14px 0; border-radius: 18px; border: var(--hair-strong); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.about-grid .prose p:first-child { margin-top: 0; }
@media (max-width: 720px) { .headshot { width: 160px; margin: 4px 18px 8px 0; } }
.faq-group { margin-top: 44px; }
.faq-group h2 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-lift); font-weight: 600; }
.faq-group details.qa:first-of-type { margin-top: 12px; border-top: var(--hair); }
.terms-shell { margin-top: 32px; padding: 40px; text-align: center; background: var(--tint); border: var(--hair-strong); border-radius: var(--r-panel); }
@media (max-width: 620px) { .page { padding: 110px 0 60px; } }