/* NanoPorter — direction F, "light body". 10 September 2026.
   Built on the a5438905 deployment (sample E): the same rail, the same measured geometry
   (container 1200/1144, button radius 15 with a bottom-centre bloom), the same arrival waves,
   the same skin arc. What changes: the page is the brand's LIGHT token set. Only the hero, the
   skin carousel and the footer are dark, as full-bleed bands that run under the rail. Every
   argument section sits on the light page or the light tint. The product is on screen: the real
   widget markup (from the designer) and the real emails, as text.
   Only transform and opacity animate. Every word is in the HTML at first byte. */

@font-face { font-family: "InterVar"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the four faces the carousel skins use, self-hosted, Latin subsets, never a font service */
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------------------------------------------------------------- tokens
   The light set is the page. `.band-dark` re-declares the dark set for the sections that use it,
   so every component below is written once against the tokens and works on both grounds. */
:root {
  --page:   #F1F7F5;
  --ink:    #0E1618;
  --body:   #28332F;
  --muted:  #5C6E6A;
  --rule:   #BCD4CB;
  --tint:   #E7F1EC;
  --accent: #0D7C56;
  --accent-rgb: 13, 124, 86;
  --accent-lift: #10A06B;
  --accent-deep: #0A6E63;
  --accent-text: #0D7C56;     /* the accent when it carries small type */
  --on-accent: #FFFFFF;
  --card:   #FFFFFF;
  --card-line: #BCD4CB;
  --hairline: .8px solid #BCD4CB;
  --lip: inset 0 -9px 24px rgba(13, 124, 86, .08);
  --shadow: 0 30px 80px rgba(14, 22, 24, .12);

  --rail-w: 232px;
  --bar-h: 60px;
  --container: 1200px;
  --gutter: 28px;
  --r-card: 24px;
  --r-panel: 12px;
  --r-btn: 15px;
  --r-pill: 60px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
.band-dark {
  --page:   #0E1618;
  --ink:    #F1F7F5;
  --body:   #D3E2DD;
  --muted:  #7B8A86;
  --rule:   #334441;
  --tint:   #18211F;
  --accent: #299771;
  --accent-rgb: 41, 151, 113;
  --accent-lift: #3FBF90;
  --accent-deep: #1B6E51;
  --accent-text: #3FBF90;
  --on-accent: #0E1618;
  --card:   rgba(24, 33, 31, .72);
  --card-line: rgba(41, 151, 113, .28);
  --hairline: .8px solid rgba(41, 151, 113, .18);
  --lip: inset 0 -9px 24px rgba(41, 151, 113, .18);
  --shadow: 0 40px 90px rgba(0, 0, 0, .55);
  background: var(--page);
  color: var(--body);
}
.band-tint { background: var(--tint); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
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: -.018em; }
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: #fff; 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); }
.btn-glow {
  color: #fff; font-weight: 600;
  background-color: #0D7C56;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, #10A06B, rgba(16, 160, 107, 0) 79%);
  border: .8px solid #0A6E63;
  box-shadow: 0 0 30px rgba(13, 124, 86, .32);
}
.btn-glow:hover { box-shadow: 0 0 38px rgba(13, 124, 86, .5); }
.btn-quiet, .btn-chip {
  color: var(--ink); background: var(--card); border: var(--hairline); box-shadow: var(--lip);
}
.btn-quiet:hover, .btn-chip:hover { border-color: rgba(var(--accent-rgb), .55); }
.btn-chip { border-radius: var(--r-pill); padding: 11px 18px; text-align: left; }
.round {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ink);
  background: var(--card); border: var(--hairline); box-shadow: var(--lip); cursor: pointer;
}
.round:hover { border-color: rgba(var(--accent-rgb), .5); }

/* ---------------------------------------------------------------- the rail
   Transparent. It sits over whichever band is behind it; app.js marks each item `.on-dark` when a
   dark band is behind that item's own centre, so the lockup and each link swap independently and
   at worst one link straddles a seam. With JavaScript off the rail is a solid light column. */
.rail { position: fixed; z-index: 40; inset: 0 0 auto 0; height: var(--bar-h); display: flex; align-items: center;
  background: rgba(241, 247, 245, .78); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px);
  border-bottom: .8px solid rgba(188, 212, 203, .6); }
.rail.on-dark { background: rgba(14, 22, 24, .62); border-bottom-color: rgba(51, 68, 65, .5); }
.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; position: relative; }
.lockup { display: block; height: 26px; width: auto; }
/* two lockups in one slot: the dark-ground one fades in over a dark band */
.lockup-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.brand.on-dark .lockup-light { opacity: 0; }
.brand.on-dark .lockup-dark { opacity: 1; }
.chapters { display: none; }
.rail-sub { display: flex; gap: 18px; margin-inline: auto; }
.rail-sub a { color: var(--body); text-decoration: none; font-size: 14px; }
.rail-sub a.on-dark { color: #D3E2DD; }
.rail-sub a:hover { color: var(--accent-text); }
.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; }
  .rail.on-dark { background: transparent; }
  html:not(.js) .rail { background: var(--page); border-right: var(--hairline); }
  .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: 34px; }
  .chapters ol { display: flex; flex-direction: column; gap: 4px; }
  .chapters a { display: flex; align-items: baseline; gap: 12px; padding: 6px 0 6px 16px; text-decoration: none; color: var(--muted); font-size: 14px; line-height: 1.3; }
  .chapters a:hover { color: var(--ink); }
  .chapters a.is-current { color: var(--ink); }
  .chapters a.on-dark { color: #7B8A86; }
  .chapters a.on-dark:hover, .chapters a.on-dark.is-current { color: #F1F7F5; }
  .ch-num { font-size: 11px; letter-spacing: .12em; color: inherit; opacity: .75; flex: 0 0 22px; }
  .chapters a.is-current .ch-num { color: var(--accent-text); opacity: 1; }
  .chapters a.on-dark.is-current .ch-num { color: #3FBF90; }
  .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(16, 160, 107, .6); 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: 22px 0 0; padding-top: 16px; border-top: .8px solid rgba(124, 150, 140, .35); display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .rail-sub a { font-size: 13px; color: var(--muted); }
  .rail-sub a.on-dark { color: #7B8A86; }
  .rail-sub a:hover, .rail-sub a.on-dark:hover { color: var(--accent-text); }
  .rail-sub-more { display: inline; }
  .rail-cta { margin-top: auto; align-self: stretch; }
  main, .foot { padding-left: var(--rail-w); }
  /* the dark bands run under the rail: full-bleed ground, content still in the column */
  .band-dark.section, .band-tint.section, .foot.band-dark { margin-left: calc(-1 * var(--rail-w)); padding-left: var(--rail-w); }
}

/* ---------------------------------------------------------------- section rhythm */
.section { padding: 112px 0; position: relative; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.section-head.left { align-items: flex-start; text-align: left; }
.eyebrow { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.eyebrow-num { color: var(--muted); letter-spacing: .12em; font-weight: 500; }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; max-width: 640px; }
.section-head.left .section-title { max-width: 14em; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
.section-sub { color: var(--muted); max-width: 560px; font-size: 16px; }
.section-sub.wide { max-width: 720px; color: var(--body); }
.lede { margin-top: 20px; color: var(--body); font-size: 18px; line-height: 1.55; max-width: 32em; }
.lede-2 { margin-top: 14px; color: var(--muted); font-size: 16px; max-width: 32em; }

/* ---------------------------------------------------------------- 01 the hero (dark) */
.hero { padding: 132px 0 0; overflow: visible; z-index: 2; }
.hero-inner { position: relative; z-index: 2; 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: var(--card); border: var(--hairline); box-shadow: var(--lip); 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(var(--accent-rgb), 0) 59%); color: var(--on-accent); 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%; }
}

/* The stage: the conversation and the email. It straddles the seam into the light section,
   so the hero's dark ground ends behind an object rather than at a hard line. */
.hero-stage { position: relative; z-index: 3; width: 100%; margin-top: 52px; margin-bottom: -210px;
  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; }
.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; margin-bottom: -140px; gap: 28px; }
  .hero-email { margin-top: 0; justify-self: center; width: 100%; }
  .hero-caption { text-align: center; }
}

/* ---------------------------------------------------------------- the widget, the real markup
   Lifted from widget-designer.html: its <style> is widget.html's base CSS, parameterised. The
   variables and data-attributes on each .wf are set by build/assemble.mjs from the skins JSON
   through the designer's own derivation rule. Not an image, not an iframe: real text. */
.wf { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
  width: 100%; height: 480px; border-radius: var(--r-frame, 16px);
  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; letter-spacing: 0;
  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); }
.wf[data-frame=flat] { box-shadow: 0 0 0 1px var(--line), 0 14px 44px rgba(0, 0, 0, .10), var(--glow, 0 0 0 0 transparent); }
.wf[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); }
.wf[data-frame=hard] { border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--accent); border-radius: 0; }
.wf[data-texture=dots] { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.wf[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; }
.wf[data-texture=lines] { background-image: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--ink) 5%, transparent) 7px 8px); }
.wf .head { padding: 13px 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; }
.wf .head .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: none; align-items: center; justify-content: center; flex: none; }
.wf .head .av svg { width: 18px; height: 18px; fill: #fff; }
.wf[data-avatar=head] .head .av, .wf[data-avatar=both] .head .av { display: flex; }
.wf .wname { margin: 0; font-size: calc(var(--fs) + 1px); display: flex; align-items: center; gap: 8px; font-weight: 700; color: inherit; line-height: 1.3; }
.wf[data-title=upper] .wname { text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--fs) - 1px); }
.wf .wname .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: none; }
.wf[data-header=surface] .wname .dot, .wf[data-header=underline] .wname .dot { display: inline-block; }
.wf[data-header=underline] .head { border-bottom: 2px solid var(--accent); }
.wf[data-header=gradient] .head { background: linear-gradient(100deg, var(--head-bg), var(--accent)); }
.wf .wsub { margin: 2px 0 0; font-size: 11px; color: var(--head-muted, var(--muted)); line-height: 1.4; }
.wf .wlink { text-decoration: underline; }
.wf .endbtn { text-decoration: none; border: 1px solid var(--head-line, var(--line)); border-radius: 999px; padding: 2px 9px; font-weight: 600; color: var(--head-ink, var(--ink)); }
.wf[data-corners=none] .endbtn { border-radius: 3px; }
.wf .log { flex: 1 1 auto; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; min-height: 0; }
.wf .line { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; flex: 0 0 auto; }
.wf .line.me { align-self: flex-end; flex-direction: row-reverse; }
.wf .line .mav { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: none; flex: none; align-items: center; justify-content: center; margin-bottom: 2px; }
.wf .line .mav svg { width: 14px; height: 14px; fill: #fff; }
.wf[data-avatar=messages] .line.bot .mav, .wf[data-avatar=both] .line.bot .mav { display: flex; }
.wf[data-layout=stacked] .line, .wf[data-layout=stacked] .line.me { align-self: flex-start; flex-direction: row; max-width: 100%; }
.wf[data-layout=stacked] .msg { border-radius: var(--r-bubble); }
.wf[data-layout=stacked] .who { display: block; }
.wf .who { display: none; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.wf .msg { padding: 9px 12px; border-radius: var(--r-bubble, 14px); line-height: 1.45; }
.wf .line.bot .msg { background: var(--bot, #f3f4f6); color: var(--ink); border-bottom-left-radius: var(--r-tail, 4px); }
.wf .line.me .msg { background: var(--me); color: var(--me-ink, #fff); border-bottom-right-radius: var(--r-tail, 4px); }
.wf[data-bubbles=square] .msg { border-radius: 0 !important; }
.wf[data-bubbles=outlined] .line.bot .msg { background: transparent; border: 1.5px solid var(--line); }
.wf[data-bubbles=outlined] .line.me .msg { background: transparent; border: 1.5px solid var(--me); color: var(--ink); }
.wf[data-bubbles=notail] .msg { border-radius: var(--r-bubble) !important; }
.wf .msg a { color: var(--accent); font-weight: 600; }
.wf .dots { display: inline-flex; gap: 5px; align-items: center; padding: 3px 1px; }
.wf .dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; opacity: .6; }
.wf .wform { 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; }
.wf .msgin { 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; }
.wf[data-input=underline] .msgin { border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; }
.wf[data-input=pill] .msgin { border-radius: 999px; }
.wf[data-input=filled] .msgin { border: 0; background: var(--bot); }
.wf .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; line-height: 1.2; }
.wf .send svg { width: 18px; height: 18px; display: none; }
.wf[data-send=round] .send { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.wf[data-send=round] .send span, .wf[data-send=icon] .send span { display: none; }
.wf[data-send=round] .send svg, .wf[data-send=icon] .send svg { display: block; }
.wf[data-send=icon] .send { background: transparent; color: var(--accent); padding: 0 6px; }
.wf[data-send=ghost] .send { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.wf .powered { font-size: 10px; color: var(--muted); text-align: center; padding: 0 0 6px; background: var(--surface); flex: 0 0 auto; }
/* the launcher, the round button in the corner of a site */
.wl { 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; }
.wl .glyph { display: flex; align-items: center; justify-content: center; width: calc(var(--size, 60px) / 2); height: calc(var(--size, 60px) / 2); flex: none; }
.wl svg { width: 100%; height: 100%; fill: #fff; display: block; }
.wl[data-shape=square] { border-radius: calc(var(--size) * .22); }
.wl[data-shape=pill] { border-radius: 999px; padding: 0 18px 0 12px; }
.wl[data-shape=pill] .lbl { display: inline; }
.wl .lbl { display: none; }
.wl[data-shape=hard] { border-radius: 0; border: 2px solid var(--ink); box-shadow: 5px 5px 0 0 var(--ink); }

/* ---------------------------------------------------------------- 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. Tilted in 3D on wide screens, straight on hover,
   flat under 768px and under reduced motion. */
.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; border: 1px solid #BCD4CB; overflow: hidden;
  box-shadow: 0 1px 0 rgba(14, 22, 24, .04), 0 24px 60px rgba(14, 22, 24, .16), 0 0 80px rgba(13, 124, 86, .10); }
.band-dark .email-card { 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; }
.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; }
.email-sheet p { margin: 0; }
.email-sheet table { border-spacing: 0; }
.email-sheet td { vertical-align: top; }
/* the enquiry email is shown WHOLE: the whole conversation attached is the point. Only the
   Friday email, which is long and already fades past Enhanced, scrolls inside its card. */
.email-friday-scroll { max-height: 760px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* the Friday email keeps its own table shell; rows beyond Enhanced fade */
.email-friday { padding: 0; }
.email-friday tr.fe-fade > td { opacity: .34; }
.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%); }
.disclosure { margin-top: 18px; 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; }
}

/* ---------------------------------------------------------------- 02 the problem: an editorial list */
.problem { padding-top: 290px; }
.beat-list { margin-top: 56px; border-top: var(--hairline); }
.beat { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px 32px; align-items: start; padding: 40px 0 44px; border-bottom: var(--hairline); }
.beat-num { font-size: clamp(3.4rem, 6.4vw, 5.4rem); line-height: .9; font-weight: 300; letter-spacing: -.04em; color: var(--accent-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.beat-title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; max-width: 20em; }
.beat-body { margin-top: 12px; color: var(--body); font-size: 17px; max-width: 34em; }
@media (max-width: 720px) {
  .problem { padding-top: 210px; }
  .beat { grid-template-columns: 1fr; gap: 10px; padding: 32px 0 34px; }
  .beat-num { font-size: 3rem; }
}

/* ---------------------------------------------------------------- shared two-up */
.two-up { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.two-up-copy .eyebrow { margin-bottom: 14px; }
.two-up-copy .section-title { text-align: left; max-width: 12em; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; }
.two-up-asset { min-width: 0; }
@media (max-width: 900px) { .two-up { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------------------------------------------------------- 04 the demo trio */
.demo-chips { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.demo-chips .btn-chip { padding: 12px 16px; min-height: 44px; font-size: 14px; }
.demo-chips .btn-chip.is-on { border-color: rgba(var(--accent-rgb), .7); box-shadow: inset 0 -10px 26px rgba(var(--accent-rgb), .14), 0 0 22px rgba(var(--accent-rgb), .12); color: var(--accent-text); font-weight: 600; }
.handoff-label { margin: 22px auto 0; max-width: 640px; text-align: center; color: var(--body); font-size: 15px; }
.demo-tabs { display: none; margin-top: 20px; gap: 8px; justify-content: center; flex-wrap: wrap; }
.demo-tab { flex: 1 1 auto; min-height: 44px; padding: 10px 12px; border-radius: var(--r-pill); border: var(--hairline); background: var(--card); color: var(--body); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.demo-tab.is-on { color: var(--accent-text); border-color: rgba(var(--accent-rgb), .6); font-weight: 600; }
.demo-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.demo-card { display: flex; flex-direction: column; min-width: 0; }
.demo-card .wf { height: auto; min-height: 0; flex: 1 0 auto; }
.demo-card .log { justify-content: flex-start; overflow: visible; }
.demo-x { display: flex; flex-direction: column; gap: 9px; }
.demo-x + .demo-x { padding-top: 12px; border-top: 1px dashed var(--line, #e5e7eb); }
/* with JavaScript only the chosen exchange is in the flow, so every card is the height of the
   tallest CURRENT answer rather than the tallest of eighteen */
.js .demo-x { display: none; }
.js .demo-x.is-on { display: flex; animation: fadein .35s var(--ease) both; }
.js .demo-x + .demo-x { padding-top: 0; border-top: 0; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.demo-x .line { max-width: 92%; }
.demo-x h3.msg { font: inherit; font-weight: 500; letter-spacing: 0; color: var(--me-ink, #fff); }
.demo-x .line.bot + .line.bot { margin-top: -3px; }
/* two lines reserved under every frame, so a two-line caption cannot shorten its frame */
.demo-note { margin-top: 12px; height: 39px; flex: none; color: var(--muted); font-size: 13px; line-height: 1.5; padding-inline: 4px; }
.demo-letterhead { display: block; margin: 0; }
.handoff-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0 32px; padding: 5px 12px; border-radius: var(--r-pill); background: #E7F1EC; border: .8px solid rgba(13, 124, 86, .4); color: #0D7C56; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.handoff-dot { width: 7px; height: 7px; border-radius: 50%; background: #10A06B; box-shadow: 0 0 10px #10A06B; }
.demo-card .wf[data-avatar=off] .handoff-state { margin-left: 0; }
@media (max-width: 1080px) { .demo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
/* the framing questions under the demos: hairline rows */
.framing { margin: 64px auto 0; max-width: 820px; }

/* ---------------------------------------------------------------- 05 the skins (dark, feathered)
   A dark block whose top and bottom edges feather into the light page over 96px, and whose live
   skin's glow bleeds a further 140px into the page above and below, so it never reads as a block
   dropped in. The glow colour is used here and on the two chevrons and the dots, nowhere else. */
.skins { background: transparent; isolation: isolate; overflow: visible; padding: 150px 0 140px; margin: -20px 0; }
/* The feather: a dark fill fading to nothing over 64px at each edge would pass through a dead
   neutral grey (the mix of #0E1618 and the light page). So the wash layer, which sits UNDER the
   dark fill and runs 140px beyond the section, carries the skin colour strongest at the section's
   own edges; the feather then mixes dark, light and the skin's hue, and reads as a tinted shadow
   rather than grey. The rail treats the feather as light ground (data-feather, in app.js). */
.skins .skins-dark { position: absolute; inset: 0; z-index: -1; background: #0E1618;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.skin-ground { position: absolute; inset: -140px 0; z-index: -2; pointer-events: none; overflow: hidden; }
.skin-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease);
  --edge-a: 140px; --edge-b: 188px; /* where the section's own edges fall inside this extended layer */
  background: radial-gradient(60% 46% at 50% 54%, color-mix(in srgb, var(--skin) 44%, transparent), color-mix(in srgb, var(--skin) 0%, transparent) 72%),
              linear-gradient(180deg,
                color-mix(in srgb, var(--skin) 0%, transparent) 0,
                color-mix(in srgb, var(--skin) 18%, transparent) var(--edge-a),
                color-mix(in srgb, var(--skin) 62%, transparent) var(--edge-b),
                color-mix(in srgb, var(--skin) 12%, transparent) 40%,
                color-mix(in srgb, var(--skin) 12%, transparent) 60%,
                color-mix(in srgb, var(--skin) 62%, transparent) calc(100% - var(--edge-b)),
                color-mix(in srgb, var(--skin) 18%, transparent) calc(100% - var(--edge-a)),
                color-mix(in srgb, var(--skin) 0%, transparent) 100%); }
.skin-layer.is-on { opacity: 1; }
.skins-inner { position: relative; }
.skins .section-sub { color: var(--body); }
.arc { position: relative; margin-top: 24px; }
.chev { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); background: rgba(11, 18, 17, .82); color: #F1F7F5;
  border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--live-skin, var(--accent)) 35%, transparent); }
.chev:hover { border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 90%, transparent); }
.chev-prev { left: calc(50% - var(--card-w) / 2 - 64px); }
.chev-next { right: calc(50% - var(--card-w) / 2 - 64px); }
/* Without JavaScript: a native scroll-snap track on the dark ground. */
.skin-track { --card-w: min(340px, 80vw); display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 14px 24px; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - var(--card-w) / 2); }
.skin-track::-webkit-scrollbar { display: none; }
.arc { --card-w: min(340px, 80vw); }
.skin-card { position: relative; flex: 0 0 var(--card-w); scroll-snap-align: center; padding-bottom: 6px; }
.skin-stage { position: relative; padding: 0 34px 36px 0; }
.skin-stage .wf { height: 500px; }
.skin-meta { margin-top: 14px; text-align: center; }
.skin-label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 5px; background: var(--skin); box-shadow: 0 0 14px color-mix(in srgb, var(--skin) 60%, transparent); }
.skin-tier { margin: 8px auto 0; display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(11, 18, 17, .7); border: .8px solid color-mix(in srgb, var(--skin) 50%, transparent); color: var(--body); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* With JavaScript: the arc, as built and approved. */
/* the arc is centred on the CONTENT column, not the viewport: a viewport-wide track put a dim
   ghost card inside the rail at desktop */
.js .skin-track { display: block; overflow: visible; height: var(--arc-h, 620px); padding: 0; width: 100%; margin-inline: 0; scroll-snap-type: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
.js .skin-card { position: absolute; left: 50%; top: 40px; width: var(--card-w); margin-left: calc(var(--card-w) / -2); transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1)); opacity: var(--o, 1); transition: transform .6s var(--ease), opacity .6s var(--ease); will-change: transform, opacity; }
.js .skin-card:not(.is-live) { pointer-events: none; }
.js .skin-meta { opacity: 0; transition: opacity .35s var(--ease); }
.js .skin-card.is-live .skin-meta { opacity: 1; transition-delay: .2s; }
.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, .25); transition: background-color .3s var(--ease); }
.skin-dots button.is-on { background-color: var(--dot, var(--accent-lift)); }
.skin-hint { color: var(--body); font-size: 13px; }

/* ---------------------------------------------------------------- 07 how it works: a timeline */
.timeline { margin-top: 64px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.timeline::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--rule); }
.step { position: relative; padding-top: 0; }
.step-num { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 0 0 6px var(--page), 0 0 22px rgba(13, 124, 86, .35); }
.step-title { margin-top: 22px; font-size: 20px; line-height: 1.28; max-width: 14em; }
.step-body { margin-top: 10px; color: var(--body); font-size: 15px; max-width: 24em; }
.step-body .line-code { display: inline-block; margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: #0E1618; color: #D3E2DD; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 12px; }
/* the "your own website, unchanged" frame, small, at step 3 */
.site-mini { margin-top: 18px; position: relative; max-width: 300px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(14, 22, 24, .10); overflow: hidden; }
.site-bar { height: 26px; display: flex; align-items: center; gap: 5px; padding-inline: 10px; border-bottom: 1px solid var(--tint); }
.site-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.site-url { margin-left: 8px; padding: 2px 10px; border-radius: 20px; background: var(--tint); color: var(--muted); font-size: 9px; letter-spacing: .02em; }
.site-body { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.site-h1 { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.site-line { height: 7px; border-radius: 4px; background: var(--tint); }
.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: 30px; border-radius: 6px; background: var(--tint); }
.site-mini .wl { right: 10px; bottom: 10px; --size: 30px; }
.site-mini .wl .glyph { width: 15px; height: 15px; }
.ownership { margin: 64px auto 0; max-width: 24em; text-align: center; color: var(--ink); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; }
.option { margin: 18px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 1080px) {
  .timeline { grid-template-columns: 1fr; gap: 36px; padding-left: 64px; }
  .timeline::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .step-num { position: absolute; left: -64px; top: 0; }
  .step-title { margin-top: 8px; }
}

/* ---------------------------------------------------------------- 08 pricing (light) */
.vat-toggle { margin: 30px 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: var(--card); border: var(--hairline); box-shadow: var(--lip); }
.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; }
.seg input:checked + label { background: var(--accent); color: #fff; 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: #FFFFFF; --card-line: #BCD4CB; --card-bg-hi: #E7F1EC; --card-line-hi: rgba(13, 124, 86, .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-text); 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 #E7F1EC; }
.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 tbody .tier.is-featured { border-top-color: rgba(13, 124, 86, .18); }
.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(13, 124, 86, .10); }
.tier-tag { position: absolute; top: 13px; left: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.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); font-size: 13px; line-height: 1.45; font-weight: 400; }
.row-price .was { display: block; color: var(--muted); font-size: 15px; }
.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-text); }
.row-price .per { display: block; margin-top: 6px; color: var(--body); font-size: 13px; line-height: 1.35; }
.row-price .tier { padding-bottom: 16px; }
.tick { color: var(--accent-text); 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(--page); min-width: 140px; width: 150px; padding-right: 12px; }
  .tiers th[scope="row"] { box-shadow: 8px 0 12px -8px rgba(14, 22, 24, .25); }
}

/* ---------------------------------------------------------------- questions: hairline rows */
.qa-list { margin: 44px auto 0; max-width: 820px; border-top: var(--hairline); }
details.qa { border-bottom: var(--hairline); }
details.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 4px 24px 0; cursor: pointer; list-style: none; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary h3 { flex: 1; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.3; font-weight: 500; }
details.qa summary:hover h3 { color: var(--accent-text); }
details.qa summary:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: -2px; border-radius: 6px; }
.qa-chevron { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: var(--hairline); position: relative; transition: transform .35s var(--ease); }
.qa-chevron::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); translate: -50% -70%; rotate: 45deg; }
details.qa[open] .qa-chevron { transform: rotate(180deg); }
details.qa > p, details.qa .qa-body { margin: 0; padding: 0 80px 26px 0; color: var(--body); font-size: 16px; line-height: 1.62; max-width: 40em; }
details.qa .qa-body p + p { margin-top: 10px; }
.faq-more { margin-top: 30px; text-align: center; }
.more-link { display: inline-block; padding: 12px 4px; min-height: 44px; color: var(--accent-text); text-decoration: none; font-size: 16px; font-weight: 600; }
.more-link:hover { color: var(--ink); }
@media (max-width: 620px) { details.qa > p, details.qa .qa-body { padding-right: 0; } }

/* ---------------------------------------------------------------- 10 get in touch */
.contact-sub { margin-top: 10px; color: var(--accent-text); font-size: 20px; font-weight: 500; }
.contact .lede a { color: var(--ink); }
.contact-cta { margin-top: 28px; }
.btn-big { font-size: 17px; padding: 15px 26px; }
.contact-lines { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.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 { display: flex; flex-direction: column; gap: 14px; padding: 30px; background: var(--card); border: var(--hairline); border-radius: var(--r-card); box-shadow: 0 20px 50px rgba(14, 22, 24, .08); }
.contact-form .btn { min-height: 44px; }
.field { display: flex; flex-direction: column; gap: 6px; color: var(--body); font-size: 13px; }
.field input, .field textarea { font: inherit; font-size: 15px; color: var(--ink); padding: 11px 14px; border-radius: 10px; background: var(--page); border: 1px solid var(--rule); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-lift); outline-offset: 1px; border-color: transparent; }
.field textarea { resize: vertical; min-height: 110px; }
.form-note { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- footer (dark) */
.foot { position: relative; padding-block: 44px 60px; }
.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-inner .brand { position: absolute; left: 30px; top: 50%; translate: 0 -50%; }
  .lockup-foot { height: 30px; }
  .foot-links { margin-inline: 0 auto; }
  .rail-cta { transition: box-shadow .25s var(--ease); will-change: transform; }
}
.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 hero's load stagger is CSS keyframes, so it runs with JavaScript off. The conversation's
   storyboard is JavaScript: app.js adds .is-playing to the stage at load (never under reduced
   motion), the parts below start hidden ONLY inside .is-playing, and each gets .is-in on cue.
   Without JavaScript nothing is hidden. Below the fold, `.arrive` waves as built in E. */
@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: .54s; }
  .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 */
  .is-playing .line[data-hero="q"] { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .is-playing .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 .line.is-in, .is-playing .hero-email.is-in { opacity: 1; transform: none; }
  .hero-dots .dots span { animation: blink 1.1s infinite; }
  .hero-dots .dots span:nth-child(2) { animation-delay: .18s; } .hero-dots .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: 900px) {
  .section { padding: 80px 0; }
  .hero { padding-top: 116px; }
}
@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .chips { flex-direction: column; align-items: stretch; }
  .btn-chip { text-align: center; padding: 13px 18px; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot-links { margin-inline: 0; flex-wrap: wrap; }
  .skin-track, .arc { --card-w: min(280px, 74vw); }
  .js .skin-track { --arc-h: 640px; }
  /* on a phone the sample launcher sat a thumb's width from the REAL launcher, two green circles
     in one corner; the frame alone carries the skin here */
  .skin-stage { padding: 0; }
  .skin-stage .wl { display: none; }
  .skins { padding: 120px 0 110px; }
  /* On a phone the chevrons leave the card's edges (a 280px card in a 350px column left no room)
     and sit as a pair under the arc, bottom-left, clear of the real launcher bottom-right. The
     dots go: swipe, the arrows and the label are enough at this width. */
  .chev { top: auto; bottom: -56px; transform: none; }
  .chev-prev { left: 0; } .chev-next { left: 54px; right: auto; }
  .skin-dots { display: none; }
  .skin-controls { margin-top: 12px; min-height: 44px; align-items: flex-start; padding-left: 112px; text-align: left; justify-content: center; }
  .rail-cta { padding: 12px 14px; font-size: 13px; }
  .rail-sub { display: none; }
  .rail-inner { justify-content: space-between; }
  .lockup { height: 30px; }
  .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .glow-circle { width: min(820px, 170vw); top: -230px; }
  .light { opacity: .3; } .light-mid { opacity: .18; }
  .hero-wf { height: 440px; }
  .demo-grid { grid-template-columns: 1fr; }
  .js .demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .demo-tab { font-size: 12px; padding: 8px 6px; line-height: 1.3; }
  .js .demo-card { display: none; }
  .js .demo-card.is-shown { display: flex; }
  .demo-chips { margin-top: 24px; gap: 8px; }
  .demo-chips .btn-chip { font-size: 13px; padding: 10px 13px; min-height: 40px; }
  .handoff-label { margin-top: 18px; font-size: 14px; }
}
@media (max-width: 1023px), (orientation: portrait) { .hero { padding-top: 96px; } }

/* ================================================================ pages: about, faq, privacy, terms, company */
.page { padding: 132px 0 80px; }
.page-inner { max-width: 760px; }
.page-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.page-lede { margin-top: 12px; color: var(--muted); font-size: 17px; }
.prose { margin-top: 32px; color: var(--body); font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.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-text); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-text); }
mark.held, .held { background: rgba(181, 80, 28, .12); color: var(--ink); border: .8px solid rgba(181, 80, 28, .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: 1px solid var(--rule); box-shadow: 0 24px 48px rgba(14, 22, 24, .14); }
.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: 40px; }
.faq-group h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.faq-group details.qa:first-of-type { margin-top: 12px; border-top: var(--hairline); }
.terms-shell { margin-top: 32px; padding: 40px; text-align: center; background: var(--tint); border: var(--hairline); border-radius: var(--r-panel); }
@media (max-width: 620px) { .page { padding: 110px 0 60px; } }