/* fonts: Manrope (headings), Inter (body), JetBrains Mono (code-style labels); self-hosted, SIL Open Font License */
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
/* ===== tokens.css ===== */
/* Solutionz AI design tokens.
   Every color, size and distance the site uses is named here once.
   Colors are written as light-dark(LIGHT, DARK): the first value is the light theme, the second the dark theme.
   The plain value on the line above each pair is a fallback for very old browsers and should match the light value.
   Brand colors (do not change): Navy #043377, Action green #42CE33, White #FFFFFF, Mist #F3F5F7 (final identity, 17 September 2026).
   Green is never text on white or Mist (2.08:1); on navy it passes (5.79:1). The dark-theme navy shades are derived, see 03-colors-typography/v2. */

:root {
  color-scheme: light dark;

  /* brand */
  --navy: #043377;
  --green: #42CE33;
  --white: #FFFFFF;
  --mist: #F3F5F7;

  /* page and surfaces */
  --bg: #FFFFFF;            --bg: light-dark(#FFFFFF, #043377);
  --bg-alt: #F3F5F7;        --bg-alt: light-dark(#F3F5F7, #0A3D85);
  --surface: #FFFFFF;       --surface: light-dark(#FFFFFF, #0E4690);
  --surface-2: #F3F5F7;     --surface-2: light-dark(#F3F5F7, #14508A);
  --line: #DCE1E7;          --line: light-dark(#DCE1E7, rgba(255, 255, 255, 0.16));
  --line-strong: #B8C0CA;   --line-strong: light-dark(#B8C0CA, rgba(255, 255, 255, 0.34));

  /* text */
  --ink: #043377;           --ink: light-dark(#043377, #FFFFFF);
  --ink-2: #3B4A5B;         --ink-2: light-dark(#3B4A5B, #D6DEE8);
  --ink-3: #5F6E7F;         --ink-3: light-dark(#5F6E7F, #AAB8C8);
  --link: #043377;          --link: light-dark(#043377, #FFFFFF);

  /* actions: navy text on green, in both themes (brand rule) */
  --accent: #42CE33;
  --accent-hover: #3BBF2E;
  --accent-ink: #043377;
  --focus: #043377;         --focus: light-dark(#043377, #42CE33);   /* green fails on white (2.08:1), so the ring is navy in the light theme */

  /* the navy band and footer stay navy in both themes; the dark theme uses a deeper navy so they still read as bands */
  --band-bg: #043377;       --band-bg: light-dark(#043377, #032A64);
  --band-ink: #FFFFFF;
  --band-ink-2: #C9D3DF;
  --band-line: rgba(255, 255, 255, 0.14);

  /* the logo's navy parts turn white on dark backgrounds; the green parts never change */
  --logo-ink: #043377;      --logo-ink: light-dark(#043377, #FFFFFF);

  --shadow: 0 1px 2px rgba(4, 51, 119, 0.06), 0 10px 30px rgba(4, 51, 119, 0.08);
  --shadow: light-dark(0 1px 2px rgba(4, 51, 119, 0.06) 0 10px 30px rgba(4, 51, 119, 0.08), 0 10px 30px rgba(0, 0, 0, 0.35));

  /* type: Manrope for headings, Inter for everything else (brand rule) */
  --font-head: "Manrope", system-ui, Arial, sans-serif;
  --font-body: "Inter", system-ui, Arial, sans-serif;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --lh-tight: 1.1;
  --lh-body: 1.6;

  /* space and shape */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;  --s-5: 1.5rem;
  --s-6: 2rem;     --s-7: 3rem;    --s-8: 4rem;     --s-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* header: 72 px tall with the compact horizontal lockup at 205 px of artwork (guide v2); 60 px and 165 px on mobile */
  --header-h: 72px;
  --logo-w: 222px;
}

/* The header toggle sets data-theme; without it the site follows the visitor's device setting. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (max-width: 1023px) {
  :root { --header-h: 60px; --logo-w: 179px; }
}

/* ===== base.css ===== */
/* Base: reset, type, layout primitives, buttons. Colors and sizes come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 36em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.01em;
  color: var(--ink-2); margin: 0 0 var(--s-4);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 3px; background: var(--accent); border-radius: 2px; }

/* focus and skip link */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 46em; margin-bottom: var(--s-7); }
.section-head p { color: var(--ink-2); font-size: var(--fs-lead); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* buttons: navy text on green for the primary action, in both themes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.85rem 1.4rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* inline link with arrow, used at the end of cards */
.more { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35em; }
.more::after { content: "→"; transition: transform 0.2s ease; }
.more:hover { text-decoration: underline; }
.more:hover::after { transform: translateX(3px); }

/* ===== components.css ===== */
/* Components: header, hero, cards, steps, platforms, about, questions, closing band, footer. */

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); }
.logo { display: block; width: var(--logo-w); flex: none; text-decoration: none; }
.logo svg { width: 100%; height: auto; }
.lg-ink { fill: var(--logo-ink); }
.lg-green { fill: var(--green); }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--s-2); list-style: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500; background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--bg-alt); }
.nav-link .chev { width: 0.75em; height: 0.75em; transition: transform 0.2s ease; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 22rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--s-2);
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; }
.menu a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.menu a:hover { background: var(--bg-alt); }
.menu a strong { display: block; font-weight: 600; }
.menu a span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.menu-all { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; margin-bottom: var(--s-2); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.theme-toggle {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.theme-toggle:hover { background: var(--bg-alt); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  html:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.menu-toggle {
  display: none; align-items: center; gap: 0.5em; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600;
}
.menu-toggle .bars { width: 1.1rem; height: 1.1rem; }

/* mobile navigation panel */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow: auto;
  background: var(--bg); border-top: 1px solid var(--line); padding: var(--s-5) var(--gutter) var(--s-8);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; }
.mobile-nav a { display: block; padding: 0.85rem 0; font-size: 1.125rem; font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-nav .sub a { padding-left: var(--s-5); font-weight: 500; font-size: 1.0625rem; }
.mobile-nav .sub a span { display: block; font-size: var(--fs-small); color: var(--ink-2); font-weight: 400; }
.mobile-nav .btn { margin-top: var(--s-5); width: 100%; }
body.nav-open { overflow: hidden; }

@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-y); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.hero h1 { margin-bottom: var(--s-5); max-width: 12em; }
.hero .lead { margin-bottom: var(--s-6); }
.hero-note { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.hero-visual { display: flex; justify-content: center; }
.diagram { width: 100%; max-width: 560px; height: auto; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: 2; }
}

/* diagram (inline SVG in the hero) */
.dg-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.dg-rail { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.dg-flow { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-dasharray: 7 11; stroke-linecap: round; }
.dg-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.dg-time { font: 600 12px var(--font-body); fill: var(--ink-3); letter-spacing: 0.02em; }
.dg-title { font: 700 17px var(--font-head); fill: var(--ink); letter-spacing: -0.01em; }
.dg-sub { font: 400 13px var(--font-body); fill: var(--ink-2); }
.dg-icon { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-icon-fill { fill: var(--accent); }
.dg-pill rect { fill: var(--accent); }
.dg-pill text { font: 600 13px var(--font-body); fill: var(--accent-ink); }
.dg-pill path { fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--ink-2); }
.card .more { margin-top: auto; padding-top: var(--s-2); }
.card-promise { font-weight: 600; color: var(--ink); }
.problem-card { background: var(--bg-alt); border-color: transparent; }
.section-alt .card { background: var(--surface); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .problem-card { background: var(--surface); }
}
html[data-theme="dark"] .problem-card { background: var(--surface); }

/* ---------- steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--s-2); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-head); font-weight: 700; margin-bottom: var(--s-4);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-2); }
.steps-cta { margin-top: var(--s-7); }

/* ---------- platforms ---------- */
.platform-rows { display: grid; gap: var(--s-3); }
.platform-row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.platform-row:last-child { border-bottom: 1px solid var(--line); }
.platform-row h3 { font-size: 1rem; margin: 0; color: var(--ink-2); font-family: var(--font-body); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.chip { display: inline-block; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 500; }
@media (max-width: 599px) { .platform-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* ---------- about teaser ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.about-grid .lead { margin-bottom: var(--s-5); }
.portrait { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); max-width: 380px; margin-inline: auto; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 1023px) { .about-grid { grid-template-columns: minmax(0, 1fr); } .portrait { max-width: 320px; margin-inline: 0; } }

/* ---------- questions ---------- */
.faq { display: grid; gap: var(--s-3); max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s-5); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 500; color: var(--ink-2); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--s-5); color: var(--ink-2); }
.faq-more { margin-top: var(--s-5); }

/* ---------- closing band ---------- */
.band { background: var(--band-bg); color: var(--band-ink); padding-block: var(--section-y); }
.band h2, .band p { color: var(--band-ink); }
.band .lead { color: var(--band-ink-2); }
.band a { color: var(--band-ink); }
.band .btn-primary { color: var(--accent-ink); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-6); align-items: center; }
.band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
@media (min-width: 1024px) { .band-actions { align-items: flex-end; } }
@media (max-width: 1023px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { background: var(--band-bg); color: var(--band-ink-2); border-top: 1px solid var(--band-line); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-small); }
.site-footer a { color: var(--band-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.footer-brand .logo { width: 200px; margin-bottom: var(--s-4); --logo-ink: #FFFFFF; }
.footer-brand p { max-width: 30em; }
.site-footer h3 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--band-ink); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 599px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== fresh.css ===== */
/* Shared styles of the fresh site (25 September 2026), added after tokens.css, base.css and components.css.
   DARK ONLY (founder, 25 September 2026): the page is the founder's navy ground #0A1A38 (Gate D); base.html fixes
   data-theme="dark". Colours stay light-dark(LIGHT, DARK) pairs because the header and the mobile menu are light bars
   (color-scheme: light), where the same tokens give navy writing on white. Brand rules: navy #043377 and green #42CE33; navy labels on green; green is never text
   on white or Mist (2.08:1), so every green text colour below is dark-theme only.
   LOGO RULE: always navy and green, never white, never on a chip: the header is a light bar in both themes and the footer
   panel is light, so the logo always sits on a light ground (memory: logo-never-white).
   The kept concept-B sections (marquee, founder, questions, close, footer) reproduce concept-base.css's final look. */

:root {
  --ground: #F4F7FB;       --ground: light-dark(#F4F7FB, #0A1A38);
  --ground-deep: #E9EEF5;  --ground-deep: light-dark(#E9EEF5, #071430);
  --surface: #FFFFFF;      --surface: light-dark(#FFFFFF, #0F2248);
  --surface-2: #F3F5F7;    --surface-2: light-dark(#F3F5F7, #132A57);
  --line: #DCE1E7;         --line: light-dark(#DCE1E7, rgba(125, 182, 255, 0.16));
  --line-strong: #C3CCD6;  --line-strong: light-dark(#C3CCD6, rgba(125, 182, 255, 0.34));
  --ink: #043377;          --ink: light-dark(#043377, #FFFFFF);
  --ink-2: #3B4A5B;        --ink-2: light-dark(#3B4A5B, #C9D6E8);
  --ink-3: #5F6E7F;        --ink-3: light-dark(#5F6E7F, #9FB3CE);
  --link: var(--ink); --bg: var(--ground); --bg-alt: var(--surface-2);
  --focus: #043377;        --focus: light-dark(#043377, #42CE33);
  --label: #043377;        --label: light-dark(#043377, #42CE33);          /* "// 01" labels, the caret */
  /* code colours: navy shades on light, green and light blue on the navy ground */
  --tk-com: light-dark(#5F6E7F, #8FA6C6);
  --tk-fn: light-dark(#043377, #42CE33);
  --tk-str: light-dark(#0E4690, #9CC7FF);
  --tk-key: light-dark(#043377, #FFFFFF);
  --tk-p: light-dark(#5F6E7F, #9FB3CE);
  --tk-ok: light-dark(#043377, #42CE33);
  --code-bg: light-dark(#FFFFFF, #0C1B3A);
  --code-bar: light-dark(#F3F5F7, #102447);
  --card-shadow: 0 24px 60px light-dark(rgba(4, 51, 119, 0.12), rgba(0, 0, 0, 0.45));
  --btn-glow: light-dark(rgba(66, 206, 51, 0.28), rgba(66, 206, 51, 0.5));
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* fixed brand colours for the bands, the same in both themes */
  --n-green: #42CE33; --n-navy: #043377; --n-navy-0: #02204D; --n-mist: #F3F5F7; --n-blue: #2F8BFF;
  --glow-green: 0 0 12px rgba(66, 206, 51, 0.55), 0 0 36px rgba(66, 206, 51, 0.25);
}

body { background: var(--ground); color: var(--ink); }
/* scrollbars in the brand colours (founder, 8 October 2026: "I do not like the grey scroll bar in chat window and web
   browser"): a slim green thumb on the navy ground, no arrow buttons. Chrome, Edge and Safari use the ::-webkit-scrollbar
   parts; Firefox, which has none, gets scrollbar-color (Chrome would let scrollbar-color override the parts, hence @supports). */
::-webkit-scrollbar { width: 12px; height: 12px; background: #071430; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: #071430; }
::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid transparent; border-radius: 999px; background: var(--n-green) padding-box; }
::-webkit-scrollbar-thumb:hover { background: #5BDB4C padding-box; }
/* the page's own scrollbar starts under the header, and beside the header it is the header's white (founder, 8 October
   2026: "Remove the section I circled on the header", the navy track next to the white bar) */
body::-webkit-scrollbar { background: #F0F1F3; }               /* Chrome takes the page scrollbar's parts from body, not html */
body::-webkit-scrollbar-track { margin-top: var(--header-h); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--n-green) #071430; } }
::selection { background: rgba(66, 206, 51, 0.35); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* no CSS glide while the motion runs, on any screen (10 October 2026): ScrollTrigger measures with an instant scroll, and on a
   phone (no Lenis) base.css's smooth scroll-behavior turned it into a glide, so opening an answer re-measured every
   trigger from the top and the hero and the services stack froze. In-page links glide by script instead (engine.js). */
html.fx-on { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
h1, h2, h3 { color: var(--ink); }
.lead { color: var(--ink-2); }
.section-head p { color: var(--ink-2); }

/* ---------- header: a light bar in both themes, the logo navy and green on it ---------- */
/* --logo-w: since 11 October 2026 (the linked logo, a taller symbol) the widths at which the lettering stays the size it
   had with the ribbon (300, 220 and 186 px until then) */
:root { --header-h: 80px; --logo-w: 276px; }
@media (max-width: 1023px) { :root { --header-h: 64px; --logo-w: 202px; } }
@media (max-width: 480px) { :root { --logo-w: 171px; } .header-inner { gap: var(--s-3); } }
.menu-toggle .bars, .theme-toggle { flex: none; }
.site-header, .mobile-nav { color-scheme: light; }
.logo-svg .lg-f, .logo-svg .lg-l, .logo-svg .lg-d { transform-box: fill-box; }
/* the frosted bar is a layer behind the header's contents (29 September 2026, founder: "MENU on the top right corner does
   not open properly"): with the blur on the header itself, the header became the frame of the fixed phone menu, which then
   opened as a strip the height of the header */
.site-header { background: transparent; border-bottom: 1px solid #DCE1E7; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* the phone menu drops in (29 September 2026) */
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } }
html.fx-on .mobile-nav:not([hidden]) { animation: nav-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* its button keeps the button's own shape (the menu's link rule had taken its padding and centring) */
.mobile-nav .btn { display: flex; padding: 0.95rem 1rem; border: 2px solid var(--accent); color: var(--accent-ink); white-space: normal; text-align: center; }
.site-header.is-scrolled { box-shadow: 0 6px 30px rgba(4, 18, 48, 0.16); }
.lg-ink { fill: #043377; }
.lg-green { fill: #42CE33; }
.site-header .menu-toggle { background: var(--n-navy); border-color: var(--n-navy); color: #fff; }
.menu { box-shadow: 0 20px 60px rgba(4, 18, 48, 0.25); }
/* an invisible bridge over the gap between "Services" and its menu, so the pointer never leaves the item on its way down
   (30 September 2026) */
.menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(0.5rem + 4px); }
/* the Services item (28 September 2026): the word links to the overview, the chevron beside it opens the menu; the two
   read as one item */
.has-menu { display: flex; align-items: center; border-radius: var(--radius-sm); }
.has-menu:hover, .has-menu:focus-within { background: var(--bg-alt); }
.has-menu .nav-link:hover, .has-menu .nav-link[aria-expanded="true"] { background: none; }
.nav-services { padding-right: 0.15rem; }
.menu-chev { padding-left: 0.2rem; padding-right: 0.6rem; }

/* ---------- the type at 90% on desktop (29 September 2026; founder: "Writing is still bit bigger", then "90%, like your
   zoom"): the root size is 90%, so every font and space sized in rem is 90%, as in the founder's 90% browser zoom. Sizes in
   px stay: the header's height and logo, the keys, borders. The header keeps its approved text size, so its rem sizes are
   given back here; the hero, at 90% since 28 September 2026, keeps its look (site.css). Phones and tablets: pages.css. */
@media (min-width: 1024px) {
  html { font-size: 90%; }
  .site-header { font-size: calc(var(--fs-body) / 0.9); }
  .site-header .header-inner { gap: calc(var(--s-5) / 0.9); }
  .site-header .nav-list { gap: calc(var(--s-2) / 0.9); }
  .site-header .nav-link { padding: calc(0.5rem / 0.9) calc(0.75rem / 0.9); }
  .site-header .nav-services { padding-right: calc(0.15rem / 0.9); }
  .site-header .menu-chev { padding-left: calc(0.2rem / 0.9); padding-right: calc(0.6rem / 0.9); }
  .site-header .btn-sm { padding: calc(0.55rem / 0.9) calc(1rem / 0.9); font-size: calc(0.9375rem / 0.9); }
  .site-header .menu { min-width: calc(22rem / 0.9); padding: calc(var(--s-2) / 0.9); }
  .site-header .menu a { padding: calc(0.6rem / 0.9) calc(0.75rem / 0.9); }
  .site-header .menu a span { font-size: calc(var(--fs-small) / 0.9); }
}

/* ---------- buttons ---------- */
.btn { position: relative; transition: transform 0.25s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.btn-primary { box-shadow: 0 0 22px var(--btn-glow); }
.btn-primary:hover { box-shadow: 0 0 18px rgba(66, 206, 51, 0.7), 0 0 50px rgba(66, 206, 51, 0.3); }
.btn .arrow { display: inline-block; transition: transform 0.25s ease; }
/* small phones (29 September 2026): at 360 px the full call to action ran wider than the screen, so the browser laid the
   page out at 370 px and shrank it; buttons wrap there instead */
@media (max-width: 599px) { .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: pretty; } }
.btn:hover .arrow { transform: translateX(3px); }
a.more { color: var(--ink); text-decoration: underline; text-decoration-color: var(--n-green); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

/* ---------- code-style writing ---------- */
/* one look for every "// 01" label (founder, 25 September 2026: one was green while the others were white) */
.code-label, .section-head .code-label { display: inline-flex; align-items: baseline; gap: 0.5em; margin: 0 0 var(--s-4); font: 700 0.9375rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.code-label .tk-com, .section-head .code-label .tk-com { color: var(--label); }
.code-eyebrow { margin: 0 0 var(--s-4); font: 500 clamp(0.875rem, 0.8rem + 0.3vw, 1rem)/1.4 var(--font-mono); color: var(--ink-2); }
.code-eyebrow .tk-com { color: var(--label); font-weight: 700; }
.caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.2em; vertical-align: -0.16em; background: var(--label); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.tk-com { color: var(--tk-com); } .tk-fn { color: var(--tk-fn); font-weight: 700; } .tk-str { color: var(--tk-str); }
.tk-key { color: var(--tk-key); font-weight: 600; } .tk-p { color: var(--tk-p); } .tk-ok { color: var(--tk-ok); font-weight: 700; }
.code-card { margin: 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem; background: var(--code-bar); border-bottom: 1px solid var(--line); font: 500 0.8125rem var(--font-mono); color: var(--ink-3); }
.dots { display: inline-flex; gap: 0.35rem; }
.dots i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--line-strong); }
.dots i:first-child { background: var(--n-green); }
.code-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-copy { flex: none; padding: 0.3rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink-2); font: 600 0.75rem var(--font-mono); cursor: pointer; }
.code-copy:hover { border-color: var(--ink-2); }
.code-copy.is-done::before { content: "✓ "; color: var(--tk-ok); }
.code { padding: 1rem 1.1rem 1.25rem; font: 500 clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem)/1.75 var(--font-mono); color: var(--ink-2); }
.cl { margin: 0; padding-left: 2.6em; text-indent: -2.6em; }
.cl .ln { display: inline-block; width: 2.6em; text-indent: 0; color: var(--tk-com); opacity: 0.6; user-select: none; }
.cl.ind { padding-left: 4.4em; text-indent: -4.4em; }
.cl.ind .ln { width: 4.4em; }
.cl-ok { color: var(--ink); font-weight: 600; }

/* ---------- appear effects (lower.js splits the headings; engine.js runs the batched reveals) ---------- */
.w { display: inline-block; }
html.fx-on [data-split] .w { opacity: 0; transform: translate3d(0, 0.5em, 0) rotateX(-40deg); filter: blur(6px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; transition-delay: calc(var(--i) * 45ms); }
html.fx-on [data-split].in .w { opacity: 1; transform: none; filter: none; }
.gl { display: inline-block; text-align: center; }
.gl.on { color: var(--label); text-shadow: 0 0 18px rgba(66, 206, 51, 0.6); }
.reveal-up { transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
html.fx-on .reveal-up:not(.in) { opacity: 0; transform: translate3d(0, 28px, 0); }

/* glow cards: the pointer lights them from where it is (lower.js sets --mx and --my) */
.glow-card { position: relative; --mx: 50%; --my: 50%; }
.glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(66, 206, 51, 0.16), transparent 70%); }
.glow-card:hover::after { opacity: 1; }

/* cursor light: a soft glow that follows the pointer (desktop only) */
.cursor-light { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(47, 139, 255, 0.11), rgba(47, 139, 255, 0.05) 40%, transparent 70%); transition: opacity 0.5s ease; will-change: transform; }
html.fx-pointer .cursor-light { opacity: 1; }

/* ================= the kept concept-B sections ================= */
.lower { position: relative; }

/* green band of service names (navy on green 5.79:1) */
.green-marquee { position: relative; overflow: hidden; background: var(--n-green); color: var(--n-navy); padding-block: clamp(1.1rem, 0.8rem + 1.2vw, 2rem); border-block: 2px solid var(--n-navy); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.marquee-row li { display: flex; align-items: center; flex: none; }
.marquee-row a { color: var(--n-navy); text-decoration: none; font: 800 clamp(2.2rem, 1.2rem + 4vw, 5.5rem)/1 var(--font-head); letter-spacing: -0.03em; text-transform: uppercase; padding-inline: 0.35em; white-space: nowrap; }
.marquee-row a:hover, .marquee-row a:focus-visible { color: var(--n-navy-0); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
.marquee-mark { width: clamp(1.2rem, 0.8rem + 1.2vw, 2.2rem); height: auto; fill: var(--n-navy); flex: none; }
.green-marquee :focus-visible { outline-color: var(--n-navy); }
html.fx-off .marquee-track { flex-wrap: wrap; width: auto; max-width: 100%; }
html.fx-off .marquee-row[aria-hidden] { display: none; }
html.fx-off .marquee-row { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 0.4rem; padding-inline: var(--gutter); }
html.fx-off .marquee-row a { white-space: normal; font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); }

/* founder block */
.about-band { background: var(--ground); }
.about-band h2 { font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }   /* the same size as sections 01 to 05 (round 3) */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-grid .lead { margin-bottom: var(--s-5); }
.portrait { position: relative; border-radius: 18px; overflow: hidden; max-width: 380px; margin-inline: auto;
  border: 1px solid light-dark(#DCE1E7, rgba(47, 139, 255, 0.4)); box-shadow: 0 0 60px light-dark(rgba(4, 51, 119, 0.18), rgba(4, 51, 119, 0.7)); }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* navy questions band: giant green heading, green answers with navy writing, white when open or hovered */
.navy-band { position: relative; background: radial-gradient(60% 70% at 88% 0%, rgba(47, 139, 255, 0.28), transparent 70%), var(--n-navy); color: var(--n-green); overflow: hidden; color-scheme: dark; }
.navy-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22;
  background-image: linear-gradient(rgba(66, 206, 51, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(66, 206, 51, 0.35) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 70% at 85% 10%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 85% 10%, #000, transparent 75%); }
.navy-band .container { position: relative; }
.navy-band .section-head h2 { color: var(--n-green); font: 800 clamp(2.6rem, 1.4rem + 4.8vw, 6rem)/0.95 var(--font-head); letter-spacing: -0.04em; text-transform: uppercase; }
.navy-band .section-head h2 .faq-sub { display: block; margin-top: 0.35em; font-size: max(0.4em, 1.35rem); line-height: 1.1; letter-spacing: -0.015em; }   /* the service's name under "Questions about" (30 September 2026) */
.navy-band .faq details { position: relative; background: var(--n-green); border: 2px solid var(--n-green); border-radius: 16px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.navy-band .faq details[open] { background: #fff; border-color: #fff; }
/* the white hover only where there is a real pointer: on a phone a tap left the question white after it closed (founder,
   11 October 2026: "when I click any question and un click the white color stays") */
@media (hover: hover) and (pointer: fine) { .navy-band .faq details:hover { background: #fff; border-color: #fff; } }
.navy-band .faq summary, .navy-band .faq p { color: var(--n-navy); }
.navy-band .faq summary::after { color: var(--n-navy); border: 1.5px solid var(--n-navy); }
.navy-band .glow-card::after { display: none; }
.navy-band .faq-more a, .navy-band a.more { color: var(--n-green); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--n-green); }
.navy-band :focus-visible { outline-color: var(--n-green); }
.navy-band .faq summary:focus-visible { outline-color: #fff; }
/* two columns of questions, the first half on the left (founder, 28 September 2026); each column opens on its own */
.faq.faq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s-3) clamp(1rem, 0.5rem + 1.5vw, 1.75rem); max-width: none; }
.faq-col { display: grid; gap: var(--s-3); align-content: start; }
@media (max-width: 899px) { .faq.faq-cols { grid-template-columns: minmax(0, 1fr); } }

/* green close: giant navy type, navy action cards with green writing, white with navy writing on hover */
.green-close { position: relative; background: var(--n-green); color: var(--n-navy); padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); overflow: hidden; }
.green-close::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: linear-gradient(rgba(10, 26, 56, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 26, 56, 0.5) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 80% at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 80% 40%, #000, transparent 75%); }
.green-close-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.green-close-h { color: var(--n-navy); font: 800 clamp(3rem, 1.4rem + 6.4vw, 8rem)/0.92 var(--font-head); letter-spacing: -0.045em; text-transform: uppercase; margin: 0; max-width: 8.5em; }
.green-close-text { margin: 0 0 var(--s-5); font-size: 1.125rem; line-height: 1.55; color: var(--n-navy); max-width: 32em; }
.action-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 11.5rem; padding: 1.5rem 1.6rem; margin-bottom: 0.9rem;
  border: 2px solid var(--n-navy); border-radius: 16px; background: var(--n-navy); color: var(--n-green); text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.action-icon { width: 3.25rem; height: 3.25rem; padding: 0.6rem; border-radius: 10px; background: var(--n-green); color: var(--n-navy); }
.action-label { font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.6rem)/1.25 var(--font-body); letter-spacing: -0.01em; }
.action-label .arrow { display: inline-block; transition: transform 0.3s ease; }
.action-card:hover, .action-card:focus-visible { background: #fff; border-color: #fff; color: var(--n-navy); }
.action-card:hover .arrow { transform: translate(3px, -3px); }
.green-close :focus-visible { outline-color: var(--n-navy); }
/* smaller cards (30 September 2026): the icon beside the words, one row each; then the QR card, the code on a white tile
   (so any phone camera reads it) beside its title and note */
.action-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; min-height: 0; padding: 0.95rem 1.2rem; }
.action-icon { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.5rem; }
.action-label { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.action-qr { gap: 1.2rem; padding: 0.85rem 1.2rem 0.85rem 0.85rem; }
.action-qr-tile { flex: none; display: block; width: clamp(92px, 5rem + 2vw, 116px); padding: 5px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 3px var(--n-green); }
.action-qr-tile img { display: block; width: 100%; height: auto; border-radius: 8px; }
.action-qr-text { display: grid; gap: 0.35rem; }
.action-note { font: 500 0.875rem/1.5 var(--font-mono); color: #fff; }
.action-qr:hover .action-note, .action-qr:focus-visible .action-note { color: var(--n-navy); }
html.fx-on .action-qr-tile { animation: qr-glow 2.8s ease-in-out infinite; }
@keyframes qr-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--n-green); } 50% { box-shadow: 0 0 0 3px var(--n-green), 0 0 18px rgba(66, 206, 51, 0.9); } }

/* footer after solais.ai: rising wordmark, cut-corner light panel (light in both themes, so the logo stays navy and green) */
.sz-footer { position: relative; overflow: hidden; color-scheme: light; padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  background: linear-gradient(180deg, #E9EEF5 0%, var(--n-mist) 45%, #FFFFFF 100%); color: #3B4A5B; border-top: 0; font-size: 1rem; }
.sz-footer-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 55% at 18% 18%, rgba(66, 206, 51, 0.28), transparent 70%), radial-gradient(40% 50% at 85% 10%, rgba(4, 51, 119, 0.22), transparent 70%); }
.sz-footer .container { position: relative; }
.sz-footer-word { position: relative; z-index: 0; margin: 0 calc(50% - 50vw) calc(-1 * clamp(1.5rem, 3.4vw, 4rem)); padding: 0 1.2vw; }
.footer-wordmark { display: block; width: 100%; height: auto; overflow: hidden; }
.footer-wordmark .fw-l { transform-box: fill-box; will-change: transform; }
.fw-sym { font-family: var(--font-head); font-weight: 800; }
.sz-footer-panel { position: relative; z-index: 1; background: #FFFFFF; color: #3B4A5B; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  clip-path: polygon(3.5rem 0, 100% 0, 100% 100%, 0 100%, 0 3.5rem); box-shadow: 0 30px 80px rgba(4, 51, 119, 0.12); }
.sz-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.sz-footer .footer-brand .logo { display: block; width: 184px; margin-bottom: var(--s-4); }   /* 200 px with the ribbon */
.sz-footer h3 { color: #043377; font: 700 0.8125rem var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 var(--s-4); }
.sz-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.sz-footer a { color: #043377; text-decoration: none; }
.sz-footer a:hover { text-decoration: underline; }
.sz-footer p { color: #3B4A5B; font-size: 0.9375rem; line-height: 1.6; margin: 0 0 var(--s-3); max-width: 30em; }
.sz-footer-cta { margin-top: var(--s-5); white-space: normal; text-align: center; max-width: 100%; }
.sz-footer .btn-primary { box-shadow: none; }
.sz-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: clamp(1.75rem, 1rem + 2vw, 3rem); padding-top: var(--s-5);
  border-top: 1px dashed #B8C0CA; font-size: 0.875rem; color: #3B4A5B; }
.sz-footer :focus-visible { outline-color: #043377; }
.rise { display: block; overflow: hidden; }
.rise > span { display: inline-block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 40ms); }
html.fx-on .sz-footer-panel:not(.in) .rise > span { transform: translate3d(0, 110%, 0); }
.sz-footer-bottom .rise { display: inline-block; }

/* overlapping pages (founder, 23 September 2026): each band sinks, shrinks and dims while the next slides over it with
   rounded top corners. lower.js names the view timelines; everything here is scroll-driven, so it reverses exactly. */
html.pages-overlap .page-over { position: relative; z-index: 2; border-radius: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.35); }
html.pages-overlap .navy-band.page-over, html.pages-overlap .green-close.page-over { overflow: hidden; }
html.pages-overlap .site-footer.page-over { z-index: 3; }
@keyframes page-sink { to { transform: translate3d(0, 25vh, 0) scale(0.93); filter: brightness(0.45); } }
html.pages-overlap .page-sink { transform-origin: 50% 0; will-change: transform, filter; animation-name: page-sink; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-range: entry 0% entry 100%; }

@media (max-width: 899px) {
  .about-grid, .green-close-grid { grid-template-columns: 1fr; }
  .sz-footer-grid { grid-template-columns: 1fr 1fr; }
  .sz-footer-grid .footer-brand { grid-column: 1 / -1; }
  .sz-footer-panel { clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0 100%, 0 2rem); }
  .portrait { max-width: 320px; }   /* centred here too (founder, 29 September 2026: "Founder's picture is not in the center") */
}
@media (max-width: 520px) { .sz-footer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } .cursor-light { display: none; } }

/* ================= round 2 (25 September 2026) ================= */

/* typing: letters appear one by one behind a block caret (engine.js F.typer) */
html.fx-on .typer .ch { opacity: 0; }
html.fx-on .typer .ch.on { opacity: 1; }
/* the caret shows only while letters are being typed; nothing blinks once a line is complete (founder, 26 September 2026) */
.typer .wd { white-space: nowrap; }
.typer .ch.cur { position: relative; }
.typer .ch.cur::after { content: ""; position: absolute; left: 100%; top: 0.08em; width: 0.5em; height: 1.05em; margin-left: 1px; background: var(--label); animation: caret 1.05s steps(1) infinite; }
.green-close .typer .ch.cur::after { background: var(--n-navy); }

/* scroll progress: a green line along the bottom of the header, drawn with the scroll forward and back (engine.js) */
.scroll-progress { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49; height: 6px; pointer-events: none; background: rgba(10, 26, 56, 0.35); }
.scroll-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2F8BFF, var(--n-green) 35%); box-shadow: 0 0 10px rgba(66, 206, 51, 0.7);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
/* back to top: bottom centre after the first screen (founder, 27 September 2026). Since 29 September 2026 ("its taking
   alot of space, maybe just keep the arrow up and remove the circle, add two more arrows with motion effects going up"):
   no ring, just the arrow with two more under it, and then ("Can you remove one arrow, just two arrows") two arrows,
   always both; a wave of light runs up them from the bottom, each arrow brightening and stepping up a little in turn,
   over and over, and since "Make it less motion" (29 September) slowly and only a pixel or so, dimming to about half. Nothing behind them (the round 14 "make it transparent" still holds):
   green over the dark sections, navy over the green band and the light footer (engine.js adds .on-light). The button
   itself stays a comfortable size to tap; only the arrows show. Motion off: the two arrows stand still, the lower one fainter. */
.to-top { position: fixed; left: 0; right: 0; margin-inline: auto; bottom: clamp(0.75rem, 2vw, 1.5rem); z-index: 49; display: grid; place-items: center; width: 2.75rem; height: 3rem; padding: 0;
  border: 0; border-radius: 0.5rem; background: transparent; color: var(--n-green); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s ease, filter 0.25s ease, visibility 0s linear 0.3s; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s ease, filter 0.25s ease, visibility 0s; }
.to-top.on-light { color: var(--n-navy); }
.to-top svg { width: 1.6rem; height: 1.55rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top path { transform-box: fill-box; transform-origin: 50% 50%; }
.to-top path { animation: tt-rise 2.8s ease-in-out infinite; }
.to-top .tt-1 { animation-name: tt-lift; animation-delay: 0.4s; }
.to-top:not(.is-shown) path { animation-play-state: paused; }
@keyframes tt-rise { 0%, 100% { opacity: 0.5; transform: translateY(0.5px); } 40% { opacity: 1; transform: translateY(-0.75px); } }
@keyframes tt-lift { 0%, 100% { transform: none; } 40% { transform: translateY(-0.75px); } }
.to-top.is-shown:hover, .to-top.is-shown:focus-visible { transform: translateY(-3px); filter: drop-shadow(0 0 6px rgba(66, 206, 51, 0.75)); }
.to-top.on-light.is-shown:hover, .to-top.on-light.is-shown:focus-visible { filter: none; }
.to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.to-top.on-light:focus-visible { outline-color: var(--n-navy); }
html.fx-off .to-top path { animation: none; }
html.fx-off .to-top .tt-2 { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .to-top path { animation: none; } .to-top .tt-2 { opacity: 0.5; } }
@media (max-width: 599px) { .to-top svg { width: 1.45rem; height: 1.4rem; } }
/* phones and tablets: no button since 30 September 2026 (founder: "remove back to top/scroll to top button as most phones
   already have that built in"); it stays on desktop. Until then it kept to the bottom-right corner on phones */
@media (max-width: 1023px) { .to-top { display: none; } }

/* official-colour platform marks: marks drawn in black are shown white on the navy page (Zapier has its own dark file) */
img.plogo-mono { filter: invert(1); }

/* the green close: a professional line and a clear gap between the heading and the cards */
.green-close-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(3rem, 8vw, 9rem); }
.green-close-h { font-size: clamp(2.8rem, 1.2rem + 5vw, 6.5rem); line-height: 0.95; max-width: 9em; }

/* ---------- raining letters behind sections 01 to 05 and scrambled headings (rain.js; founder, round 3) ---------- */
:root {
  --rain-ink: light-dark(rgba(4, 51, 119, 0.05), rgba(125, 182, 255, 0.075));   /* half as bright since 8 October 2026 (0.085 / 0.15 until then) */
  --rain-hot: light-dark(#043377, #42CE33);                  /* navy on the light theme: green is never a letter colour on white */
  --rain-glow: light-dark(rgba(66, 206, 51, 0.65), rgba(66, 206, 51, 0.55));   /* the glow softer since 8 October 2026 (0.8 until then) */
}
/* phones: the green letters fainter, at 55% with half the glow (founder, 10 October 2026: "fade down litter bit the Green ...
   in the mobile version only. It is bit distracting"); tablets and desktops keep the values above */
@media (max-width: 767px) {
  :root { --rain-hot: light-dark(#043377, rgba(66, 206, 51, 0.55)); --rain-glow: light-dark(rgba(66, 206, 51, 0.65), rgba(66, 206, 51, 0.28)); }
}
.scramble .sw { display: inline-block; white-space: nowrap; }
.scramble .sc { display: inline-block; text-align: center; }
.scramble .sc.pre { visibility: hidden; }
.scramble .sc.dud { color: var(--label); text-shadow: 0 0 16px rgba(66, 206, 51, 0.55); }

/* ---------- opening screen (intro.js, after the solais.ai intro) ---------- */
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-pre body::before { content: ""; position: fixed; inset: 0; z-index: 99; background: #043377; animation: pre-lift 0s linear 4s forwards; }
@keyframes pre-lift { to { visibility: hidden; } }
.intro { --intro-bg: #043377; --intro-t1: #0A3D85; --intro-t2: #14508A; --intro-t3: #9FB3CE; position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--intro-bg); color: #fff; cursor: pointer; font-family: var(--font-mono); }
.intro-frame { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; transition: opacity 0.3s ease; }
.intro-frame i { position: absolute; width: 14px; height: 14px; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.intro-frame i:first-child { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.intro-frame i:nth-child(2) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
.intro-frame svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.intro-frame.show svg { animation: icon-in 0.48s ease forwards; }
@keyframes icon-in { 0% { opacity: 0; transform: scale(0.85); } 35%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.intro-frame.gone { opacity: 0; }
.intro-text { width: 30ch; max-width: calc(100vw - 2.5rem); margin: 0; font-size: clamp(0.9375rem, 0.45rem + 1.05vw, 1.45rem); line-height: 1.3; letter-spacing: 0.02em; text-align: left; font-weight: 700; }
.intro-word { display: inline-block; white-space: nowrap; }
.intro-text .off { visibility: hidden; }
.intro-text .hot { color: #42CE33; }
.intro-text .dim { color: rgba(255, 255, 255, 0.38); }
.intro-load { position: absolute; bottom: 4.5vh; left: 0; right: 0; margin: 0; text-align: center; font-size: clamp(0.8125rem, 0.5rem + 0.6vw, 1.05rem); font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); transition: opacity 0.3s ease; }
.intro.blank .intro-load { opacity: 0.35; }
.intro-cells { position: absolute; inset: 0; display: grid; justify-content: start; align-content: start; pointer-events: none; }
.intro-cells i { background: var(--intro-bg); animation: cell-out 0.56s linear forwards; }
.intro.out { background: transparent; pointer-events: none; }
.intro.out .intro-load { opacity: 0; transition: opacity 0.15s ease; }
@keyframes cell-out { 0%, 19% { background: var(--intro-bg); opacity: 1; } 20%, 39% { background: var(--intro-t1); opacity: 1; } 40%, 59% { background: var(--intro-t2); opacity: 0.9; } 60%, 79% { background: var(--intro-t3); opacity: 0.6; } 80%, 100% { background: #42CE33; opacity: 0; } }
@media (max-width: 899px) { .green-close-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } }

/* ---------- the answers-only chat assistant (chat.js; 8 October 2026, the founder: "build the free answers-only version
   first"): a green round button at the bottom right with a navy ring (so it shows on the green band too), and a navy panel
   above it. On phones the panel spans the width. Hidden while the phone menu is open. ---------- */
.chat-launch { position: fixed; right: clamp(0.9rem, 2vw, 1.5rem); bottom: clamp(0.9rem, 2vw, 1.5rem); z-index: 60; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--n-green); color: var(--n-navy); cursor: pointer;
  box-shadow: 0 0 0 3px var(--n-navy), 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(66, 206, 51, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.chat-launch:hover, .chat-launch:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--n-navy), 0 16px 34px rgba(0, 0, 0, 0.4), 0 0 30px rgba(66, 206, 51, 0.55); }
.chat-launch:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.chat-launch svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-launch .chat-ico-close, html.chat-open .chat-launch .chat-ico-open { display: none; }
html.chat-open .chat-launch .chat-ico-close { display: block; }
body.nav-open .chat-launch { display: none; }
.chat-panel { position: fixed; right: clamp(0.9rem, 2vw, 1.5rem); bottom: calc(clamp(0.9rem, 2vw, 1.5rem) + 4.5rem); z-index: 60; display: flex; flex-direction: column;
  width: min(24rem, calc(100vw - 2rem)); height: min(34rem, calc(100vh - var(--header-h) - 7rem)); height: min(34rem, calc(100svh - var(--header-h) - 7rem));
  background: rgba(4, 51, 119, 0.86); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  color: #fff; border: 1px solid rgba(66, 206, 51, 0.45); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(66, 206, 51, 0.12); overflow: hidden; }
.chat-panel[hidden] { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chat-panel { background: rgba(4, 51, 119, 0.97); } }
html.fx-on .chat-panel { opacity: 0; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease; }
html.fx-on .chat-panel.is-in { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.9rem 0.85rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: rgba(2, 32, 77, 0.45); }
.chat-title { margin: 0; font: 700 1rem/1.2 var(--font-head); color: #fff; }
.chat-title::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; border-radius: 50%; background: var(--n-green); box-shadow: 0 0 10px var(--n-green); vertical-align: 0.05em; }
.chat-x { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.chat-x:hover, .chat-x:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; }
.chat-x svg, .chat-send svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem 1rem 0.5rem; overscroll-behavior: contain; }
.chat-log::-webkit-scrollbar, .chat-log::-webkit-scrollbar-track { width: 10px; background: transparent; }
@supports not selector(::-webkit-scrollbar) { .chat-log { scrollbar-width: thin; scrollbar-color: var(--n-green) transparent; } }
.chat-msg { max-width: 88%; margin: 0 0 0.7rem; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.9375rem; line-height: 1.5; }
.chat-msg p { margin: 0; }
.chat-msg p + p { margin-top: 0.4rem; }
.chat-bot { background: rgba(2, 32, 77, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); border-bottom-left-radius: 4px; color: #fff; }
.chat-you { margin-left: auto; background: var(--n-green); color: var(--n-navy); font-weight: 600; border-bottom-right-radius: 4px; }
.chat-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.55rem; }
.chat-link { color: var(--n-green); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.chat-link::after { content: "\00a0→"; }   /* a no-break space: the arrow never sits alone on a line */
/* the suggested questions are option buttons, not messages (founder, 8 October 2026: "it looks like part of the chat"):
   a heading, full-width outlined buttons with squarer corners and a green arrow, filled green on hover */
.chat-chips { display: grid; gap: 0.45rem; margin: 0.35rem 0 1rem; }
.chat-more { margin: 0 0 0.1rem; font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.chat-more::before { content: "// "; color: var(--n-green); }
.chat-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.6rem 0.8rem;
  border: 1px solid rgba(66, 206, 51, 0.65); border-radius: 10px; background: transparent; color: #fff; font: 600 0.875rem/1.35 var(--font-body);
  text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.chat-chip::after { content: "→"; flex: none; color: var(--n-green); font-weight: 700; transition: transform 0.2s ease, color 0.2s ease; }
.chat-chip:hover, .chat-chip:focus-visible { background: var(--n-green); border-color: var(--n-green); color: var(--n-navy); }
.chat-chip:hover::after, .chat-chip:focus-visible::after { color: var(--n-navy); transform: translateX(3px); }
.chat-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-typing { display: inline-flex; gap: 0.3rem; padding: 0.8rem 0.9rem; }
.chat-typing i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #fff; animation: chat-dot 1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-form { display: flex; gap: 0.5rem; padding: 0.75rem 0.8rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.chat-input { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px; background: rgba(2, 32, 77, 0.7); color: #fff; font: 400 1rem/1.3 var(--font-body); }
.chat-input::placeholder { color: rgba(255, 255, 255, 0.72); }
.chat-input:focus { outline: none; border-color: var(--n-green); box-shadow: 0 0 0 3px rgba(66, 206, 51, 0.2); }
.chat-send { display: grid; place-items: center; flex: none; width: 2.75rem; border: 0; border-radius: 10px; background: var(--n-green); color: var(--n-navy); cursor: pointer; }
.chat-send:hover, .chat-send:focus-visible { background: #5BDB4C; }
@media (max-width: 599px) {
  .chat-panel { left: 0.6rem; right: 0.6rem; width: auto; bottom: 5.1rem; height: min(34rem, calc(100svh - var(--header-h) - 6.5rem)); }
}
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } .chat-launch, .chat-panel { transition: none; } }

/* ===== console/site.css ===== */
/* Site A "Console" (25 September 2026, rounds 2 and 3): meetstream.ai-style keyboard hero in brand green, code-style
   sections on the raining letters, glass cards, the service panels stack and the sideways timeline. */

:root {
  --hero-ground: #E6ECF4; --hero-ground: light-dark(#E6ECF4, #050E26);
  /* keycaps: deep navy, each carrying a platform mark in its own colours; the key under the pointer turns brand green (the light values are unused: dark only) */
  --key-dish-hi: light-dark(#FFFFFF, #1A3160);
  --key-dish: light-dark(#EEF2F7, #10224A);
  --key-bevel: light-dark(#DDE4EE, #0C1B3D);
  --key-side-l: light-dark(#C6D1DF, #081531);
  --key-side-r: light-dark(#B2BFD1, #050D24);
  --key-edge: light-dark(rgba(255, 255, 255, 0.9), rgba(125, 182, 255, 0.16));
  --key-glow: #42CE33;
  --glass: light-dark(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.07));
  --glass-2: light-dark(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02));
  --glass-line: light-dark(rgba(4, 51, 119, 0.12), rgba(255, 255, 255, 0.15));
  --glass-hi: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22));
}

/* ---------- 1 · hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  padding: 0; overflow: hidden; background: var(--hero-ground); isolation: isolate; }
.hero-tiles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--hero-ground) 0%, transparent 12%, transparent 30%, color-mix(in srgb, var(--hero-ground) 82%, transparent) 60%, var(--hero-ground) 82%),
              radial-gradient(60% 50% at 70% 30%, rgba(66, 206, 51, 0.06), transparent 70%); }
/* founder, 28 September 2026: Outlook and Retell AI asked for on the lowest edge keys, left and right, under the lower
   shade that keeps the hero copy readable, so on desktop that shade thins over the outermost left keys. Second screenshot,
   the same day: "lighten the fade at the bottom specially on the bottom right": the shade is lighter overall and fades out
   to the right of the copy's column, where there is no text to keep readable */
@media (min-width: 1024px) {
  .hero-shade { background: linear-gradient(180deg, var(--hero-ground) 0%, transparent 12%), radial-gradient(60% 50% at 70% 30%, rgba(66, 206, 51, 0.06), transparent 70%); }
  .hero-shade::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--hero-ground) 70%, transparent) 62%, color-mix(in srgb, var(--hero-ground) 88%, transparent) 82%,
      color-mix(in srgb, var(--hero-ground) 88%, transparent) 88%, color-mix(in srgb, var(--hero-ground) 30%, transparent) 100%);   /* lighter again below the copy, over the bottom row of keys */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0, #000 min(9%, max(1px, calc((100% - var(--container)) / 2 - 1rem))), #000 55%, rgba(0, 0, 0, 0.22) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0, #000 min(9%, max(1px, calc((100% - var(--container)) / 2 - 1rem))), #000 55%, rgba(0, 0, 0, 0.22) 100%); }
}
.hero-copy { position: relative; padding-top: clamp(8rem, 24vh, 18rem); padding-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero h1 { max-width: none; margin-bottom: var(--s-4); font-size: clamp(2.35rem, 1.1rem + 3.9vw, 4.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.h1-line { display: block; }
/* the word slot keeps the width of the longest word, so the headline never reflows while the word changes */
.rot { display: inline-grid; vertical-align: baseline; }
.rot > * { grid-area: 1 / 1; }
.rot-size { visibility: hidden; }
.rot-size::before { content: attr(data-w); }   /* drawn from the attribute (29 September 2026): search engines read the headline once, "...your business." */
.rot-word { justify-self: start; white-space: nowrap; color: light-dark(#043377, #42CE33);
  text-shadow: 0 0 28px light-dark(transparent, rgba(66, 206, 51, 0.55));
  background: linear-gradient(transparent 70%, light-dark(rgba(66, 206, 51, 0.5), transparent) 70%, light-dark(rgba(66, 206, 51, 0.5), transparent) 92%, transparent 92%) no-repeat; }
.rot-word.is-live::after { content: ""; display: inline-block; width: 0.07em; height: 0.82em; margin-left: 0.06em; vertical-align: -0.04em; background: var(--n-green);
  box-shadow: 0 0 14px rgba(66, 206, 51, 0.8); animation: caret 1.05s steps(1) infinite; }
.rot-word.is-typing::after { animation: none; }
.hero .lead { max-width: 62ch; margin-bottom: var(--s-6); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.hero .btn-row { gap: var(--s-3); }
.hero-note { margin-top: var(--s-4); font: 500 0.8125rem/1.5 var(--font-mono); color: var(--ink-3); }
/* the parts that rise in after the opening screen; the paragraph is on screen from the first paint (29 September 2026), so
   the page's main text never waits for the scripts */
html.fx-on [data-hero]:not([data-hero="lead"]) { opacity: 0; }

.hero-strip { position: relative; display: flex; align-items: center; gap: var(--s-6); padding: 1rem var(--gutter); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--hero-ground) 72%, transparent); }
.strip-label { flex: none; margin: 0; font: 600 0.8125rem var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.strip-label .tk-com { color: var(--label); }
.strip-window { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip-track { display: flex; width: max-content; animation: strip 80s linear infinite; }
.strip-window:hover .strip-track { animation-play-state: paused; }
.strip-row { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; list-style: none; margin: 0; }
.strip-row li { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; font: 700 0.9375rem var(--font-head); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.plogo { display: block; height: 1.35rem; width: auto; max-width: 3.2rem; object-fit: contain; }
.plogo.plogo-word { height: 1.3rem; max-width: 5.2rem; }
@keyframes strip { to { transform: translate3d(-50%, 0, 0); } }
html.fx-off .strip-track { animation: none; width: auto; flex-wrap: wrap; }
html.fx-off .strip-row[aria-hidden] { display: none; }
html.fx-off .strip-row { flex-wrap: wrap; row-gap: 0.7rem; }

/* desktop, founder, 28 September 2026 (second screenshot): the hero text at 90%, as in the founder's 90% zoom view ("Should
   I shrink the hero text to match your 90% view too?" "Yes"); the copy keeps its left edge in line with the header logo.
   The strip is see-through too (third screenshot: the bottom row of keys was still hidden), so the keys on the bottom row
   show through it; its label sits on its own
   dark tab and the names carry a soft shadow, so both stay readable over the keys */
/* Since 29 September 2026 the whole desktop site is at 90% (fresh.css, the root size), so the hero no longer needs its own
   zoom: its rem sizes are 90% already, and the parts that grow with the screen width grow 90% as fast, so it reads as before */
@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(2.35rem, 1.1rem + 3.51vw, 4.75rem); }
  .hero .lead { font-size: clamp(1.0625rem, 1rem + 0.315vw, 1.25rem); }
  .hero .code-eyebrow { font-size: clamp(0.875rem, 0.8rem + 0.27vw, 1rem); }
  .hero-copy { padding-bottom: clamp(1.75rem, 1rem + 1.8vw, 3rem); }
  .hero-strip { background: linear-gradient(90deg, color-mix(in srgb, var(--hero-ground) 30%, transparent), color-mix(in srgb, var(--hero-ground) 18%, transparent)); }
  .strip-label { padding: 0.35rem 0.65rem; border-radius: 8px; background: color-mix(in srgb, var(--hero-ground) 86%, transparent); }
  .strip-row li { text-shadow: 0 1px 10px rgba(5, 12, 32, 0.95), 0 0 3px rgba(5, 12, 32, 1), 0 0 18px rgba(5, 12, 32, 0.8); }
}

/* ---------- sections 01 to 05 on the raining letters (rain.js); the canvas is sticky and one screen tall ---------- */
.rain-zone { position: relative; background: var(--ground); }
.rain-bg { position: sticky; top: 0; z-index: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
html.fx-off .rain-bg { display: none; }
.rain-zone > .section { position: relative; z-index: 1; background: transparent; }
/* bigger section headings (founder, round 3: "make headings bigger, actually all the sections") */
.rain-zone .section-head h2, .tl-cover h2 { max-width: 18em; margin-bottom: var(--s-4); font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }

/* ---------- 2 · one workflow ---------- */
.connect-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) clamp(2rem, 5vw, 5rem); max-width: none; align-items: end; }
.connect-head .code-label { grid-column: 1 / -1; }
.rain-zone .connect-head h2 { margin: 0; }
.connect-head p { margin: 0; }
.connect-stage { max-width: 1000px; margin-inline: auto; }
.connect-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(0.4rem, 1.4vw, 1.2rem); list-style: none; margin: 0; padding: 0 1rem; }
/* metal plates with four screws (after meetstream), each carrying the platform's own logo in its own colours */
.mini-key { position: relative; justify-self: center; display: grid; place-items: center; width: 100%; max-width: 84px; aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(150deg, light-dark(#FFFFFF, #26324A), light-dark(#E3E9F1, #141C2E)); border: 1px solid light-dark(#D3DBE6, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 light-dark(#fff, rgba(255, 255, 255, 0.12)), 0 14px 30px light-dark(rgba(4, 51, 119, 0.14), rgba(0, 0, 0, 0.45));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.mini-key .screw { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: light-dark(#AEB9C8, rgba(255, 255, 255, 0.28)); }
.mini-key .screw:nth-child(1) { left: 8px; top: 8px; } .mini-key .screw:nth-child(2) { right: 8px; top: 8px; }
.mini-key .screw:nth-child(3) { left: 8px; bottom: 8px; } .mini-key .screw:nth-child(4) { right: 8px; bottom: 8px; }
.mk-logo { width: 46%; height: 46%; object-fit: contain; }
.mini-key:hover { transform: translateY(-4px); border-color: var(--n-green); box-shadow: 0 0 0 1px var(--n-green), 0 0 30px rgba(66, 206, 51, 0.45); }
.connect-lines { display: block; width: 100%; height: clamp(90px, 16vw, 170px); margin-top: 0.5rem; overflow: visible; }
.connect-lines-sm { display: none; }
.cl-base { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.cl-live { fill: none; stroke: color-mix(in srgb, var(--n-green) 55%, transparent); stroke-width: 1.8; stroke-linecap: round; }
/* pulses running down each line into the card, like meetstream's (CSS only, so they never block scrolling) */
.cl-pulse { fill: none; stroke: var(--n-green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 88; stroke-dashoffset: 12; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(66, 206, 51, 0.9)); }
html.fx-on .connect.is-live .cl-pulse { opacity: 1; animation: pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: calc(var(--k) * -0.3s); }
@keyframes pulse { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -88; } }
.flow-card { max-width: 760px; margin: -2px auto 0; position: relative; }
.flow-card::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--n-green); box-shadow: var(--glow-green); }
html.fx-on .connect.is-live .flow-card::before { animation: arrive 0.8s ease-out infinite; }
@keyframes arrive { 0% { box-shadow: 0 0 0 0 rgba(66, 206, 51, 0.7); } 100% { box-shadow: 0 0 0 16px rgba(66, 206, 51, 0); } }

/* ---------- glass stages ---------- */
/* the three drifting colour blobs behind the frosted cards are gone (founder, 8 October 2026: "there are three circles in
   the background, remove them"); the stage still clips and isolates its cards */
.glass-stage { position: relative; overflow: hidden; isolation: isolate; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 3 · problems: glass cards, each with its own accent ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); align-items: start; perspective: 1000px; }
.problem { position: relative; padding: var(--s-5) var(--s-5) var(--s-6); border-radius: 22px; transform-style: preserve-3d;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 60px light-dark(rgba(4, 51, 119, 0.12), rgba(0, 0, 0, 0.35)); }
/* a light running round the edge in the card's accent */
.problem::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, var(--acc) 78%, var(--acc2) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
html.fx-on .problem::before { animation: edge-run 7s linear infinite; }
.problem-col:nth-child(2) .problem::before { animation-delay: -1.7s; } .problem-col:nth-child(3) .problem::before { animation-delay: -3.4s; } .problem-col:nth-child(4) .problem::before { animation-delay: -5.1s; }
@keyframes edge-run { to { --ang: 360deg; } }
.problem.glow-card::after { background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); }
.problem-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); transform: translateZ(30px); }
.problem-top .code-label { margin: 0; }
.p-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 30%, transparent), color-mix(in srgb, var(--acc2) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--acc) 22%, transparent); }
.p-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: light-dark(#043377, #FFFFFF); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.fx-on .p-icon { animation: bob 4.5s ease-in-out infinite; }
.problem-col:nth-child(2) .p-icon { animation-delay: -1.1s; } .problem-col:nth-child(3) .p-icon { animation-delay: -2.2s; } .problem-col:nth-child(4) .p-icon { animation-delay: -3.3s; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.problem h3 { margin: 0 0 var(--s-2); font-size: 1.25rem; transform: translateZ(20px); }
.problem > p { margin: 0; color: var(--ink-2); transform: translateZ(12px); }
/* under each card, the service that fixes it (30 September 2026, founder, of the empty space under the cards: "make the
   cards longer or make some animation effects"): a line from the card (its accent to green) draws down as the section
   scrolls in, and the service's icon lights green when the line reaches it (console.js, .is-fixed); then a pulse runs
   down the line over and over, the icon glowing as each one arrives. Motion off: the lines drawn and the icons lit */
.problem-col { --wire: clamp(2.25rem, 5vh, 3.25rem); display: flex; flex-direction: column; }
.p-wire { position: relative; align-self: center; width: 2px; height: var(--wire); border-radius: 2px;
  background: linear-gradient(180deg, var(--acc), var(--n-green)); box-shadow: 0 0 10px rgba(66, 206, 51, 0.45); transform-origin: 50% 0; }
.p-wire i { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--n-green), 0 0 16px var(--n-green); opacity: 0; }
html.fx-on .problem-grid.is-live .is-fixed .p-wire i { animation: wire-run 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes wire-run { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 55% { opacity: 1; transform: translateY(var(--wire)); } 62%, 100% { opacity: 0; transform: translateY(var(--wire)); } }
.p-fix { align-self: center; display: inline-flex; align-items: center; gap: 0.65rem; max-width: 100%; padding: 0.45rem 1rem 0.45rem 0.45rem; border-radius: 999px;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)), var(--ground); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 30px rgba(0, 0, 0, 0.3);
  color: var(--ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.p-fix:hover, .p-fix:focus-visible { border-color: rgba(66, 206, 51, 0.6); box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 24px rgba(66, 206, 51, 0.3); transform: translateY(-2px); }
.p-fix .arrow { color: var(--n-green); transition: transform 0.3s ease; }
.p-fix:hover .arrow { transform: translateX(3px); }
.p-fix-icon { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: linear-gradient(145deg, #7BE66C, #42CE33 55%, #2FA524); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 18px rgba(66, 206, 51, 0.45);
  transition: background 0.5s ease, box-shadow 0.5s ease; }
.p-fix-icon svg { width: 58%; height: 58%; fill: none; stroke: #043377; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s ease; }
.p-fix-icon svg * { transform-box: fill-box; }
html.fx-on .problem-col:not(.is-fixed) .p-fix-icon { background: linear-gradient(145deg, #3A4B6C, #16223C 55%, #0E1830); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
html.fx-on .problem-col:not(.is-fixed) .p-fix-icon svg { stroke: rgba(255, 255, 255, 0.72); }
html.fx-on .problem-grid.is-live .is-fixed .p-fix-icon { animation: fix-ping 2.6s ease-out infinite; }
@keyframes fix-ping { 0%, 50%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 18px rgba(66, 206, 51, 0.45); } 60% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 5px rgba(66, 206, 51, 0.25), 0 0 30px rgba(66, 206, 51, 0.8); } }

/* ---------- 4 · what we automate: list + glass panels stack ---------- */
.services-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.services .section-head { margin-bottom: var(--s-5); }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-item { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); padding: 0.8rem 0; border-top: 1px solid var(--line); position: relative; }
.service-item:last-child { border-bottom: 1px solid var(--line); }
.service-item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--n-green); box-shadow: var(--glow-green); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.service-item { grid-template-columns: 4rem minmax(0, 1fr); }
.service-n { margin: 0.45em 0 0; font: 700 0.9375rem var(--font-mono); color: var(--ink); }
.service-n .tk-com { color: var(--label); display: inline-block; transition: transform 0.4s ease, text-shadow 0.4s ease; }
.service-item.is-active .service-n .tk-com { transform: skewX(-12deg); text-shadow: 0 0 14px rgba(66, 206, 51, 0.7); }
.service-body h3 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.05vw, 2rem); letter-spacing: -0.02em; }
.services.is-pinned .service-body h3 { font-size: min(clamp(1.3rem, 1rem + 1.05vw, 2rem), 3.4vh); }
.services.is-pinned .section-head h2 { font-size: min(clamp(2.25rem, 1.1rem + 3.4vw, 4rem), 7.4vh); }
.services.is-pinned .service-item { padding-block: min(0.8rem, 1.1vh); }
.service-more { display: grid; grid-template-rows: 1fr; }
.service-more > div { overflow: hidden; }
.service-more .card-promise { margin: 0.35rem 0 0.3rem; font-weight: 600; color: var(--ink); }
.service-more p { margin: 0 0 0.5rem; color: var(--ink-2); }
.services.is-pinned { height: 100vh; height: 100svh; padding-block: calc(var(--header-h) + 1.5rem) 1.5rem; }
.services.is-pinned .services-grid { height: 100%; }
.services.is-pinned .service-item { opacity: 0.5; transition: opacity 0.4s ease; }
.services.is-pinned .service-item.is-active { opacity: 1; }
.services.is-pinned .service-item.is-active::before { transform: scaleX(1); }
/* not pinned (phones, tablets, short screens; 29 September 2026): the stack stays in view while the list scrolls past, and
   the service crossing two thirds of the way down the screen draws its green line and lifts its panel (console.js) */
html.fx-on .services:not(.is-pinned) .services-visual { position: sticky; top: var(--header-h); z-index: 2; }
html.fx-on .services:not(.is-pinned) .service-item.is-active::before { transform: scaleX(1); }
@media (min-width: 1024px) { html.fx-on .services:not(.is-pinned) .services-visual { align-self: start; top: calc(var(--header-h) + 2rem); } }
.services.is-pinned .service-more { grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.services.is-pinned .service-item.is-active .service-more { grid-template-rows: 1fr; }
/* the stack: thick glass panels standing in a row that recedes up to the right (after meetstream's feature stack);
   the active one slides out toward the viewer and lights green */
.services-visual { position: relative; }
.stack { position: relative; height: min(62vh, 560px); perspective: 1500px; display: grid; place-items: center; }
.stack-rig { position: relative; width: clamp(110px, 11vw, 150px); aspect-ratio: 1; transform-style: preserve-3d; transform: translate(-18%, 14%) rotateX(-22deg) rotateY(-44deg); }
.panel { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(0, 0, calc(var(--i) * -1 * clamp(52px, 5.4vw, 74px)));
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
.panel.is-active { transform: translate3d(0, -66%, calc(var(--i) * -1 * clamp(52px, 5.4vw, 74px) + 24px)); }   /* pulled up out of the row, like a card from a file */
.panel-layer { position: absolute; inset: 0; border-radius: 20%; transform: translateZ(calc(var(--z) * 5px));
  background: light-dark(#C9D3E1, #0B1630); border: 1px solid light-dark(rgba(4, 51, 119, 0.12), rgba(255, 255, 255, 0.08)); transition: background-color 0.5s ease; }
.panel-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 20%;
  background: linear-gradient(145deg, light-dark(#FFFFFF, #3A4B6C), light-dark(#E8EDF4, #16223C) 55%, light-dark(#D9E1EC, #0E1830));
  border: 1px solid light-dark(rgba(4, 51, 119, 0.14), rgba(255, 255, 255, 0.24)); box-shadow: inset 0 1px 0 light-dark(#fff, rgba(255, 255, 255, 0.3)), inset 0 -10px 24px light-dark(rgba(4, 51, 119, 0.06), rgba(0, 0, 0, 0.25));
  transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease; }
.panel-face svg { width: 46%; height: 46%; fill: none; stroke: light-dark(#5F6E7F, rgba(255, 255, 255, 0.72)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s ease; }
.panel-n { position: absolute; left: 12%; top: 10%; font: 700 0.72rem var(--font-mono); color: light-dark(#5F6E7F, rgba(255, 255, 255, 0.55)); }
.panel.is-active .panel-face { background: linear-gradient(145deg, #7BE66C, #42CE33 55%, #2FA524); border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 50px rgba(66, 206, 51, 0.55); }
.panel.is-active .panel-layer { background: #258A1C; }
.panel.is-active .panel-face svg { stroke: #043377; }
.panel.is-active .panel-n { color: #043377; }
/* the icons move (founder, round 3: "animate the icons"), each with its own small loop */
.panel-face svg * { transform-box: fill-box; }
html.fx-on .ic-spin { transform-origin: 50% 50%; animation: ic-spin 7s linear infinite; }
html.fx-on .ic-link-a { animation: ic-link-a 2.8s ease-in-out infinite; }
html.fx-on .ic-link-b { animation: ic-link-b 2.8s ease-in-out infinite; }
.ic-eye { transform-origin: 50% 50%; }
html.fx-on .ic-eye { animation: ic-blink 3.6s ease-in-out infinite; }
html.fx-on .ic-ant { animation: ic-ant 1.8s ease-in-out infinite; }
.ic-write { stroke-dasharray: 1; }
html.fx-on .ic-write { animation: ic-write 3.2s ease-in-out infinite; }
.ic-write + .ic-write { animation-delay: 0.45s; }
.ic-graph { stroke-dasharray: 1; }
html.fx-on .ic-graph { animation: ic-write 3.4s ease-in-out infinite; }
html.fx-on .ic-graph-dot { animation: ic-ant 1.7s ease-in-out infinite; }
.ic-bar { transform-origin: 50% 100%; }
html.fx-on .ic-bar { animation: ic-bar 2.4s ease-in-out infinite; }
.ic-bar:nth-child(2) { animation-delay: -0.6s; } .ic-bar:nth-child(3) { animation-delay: -1.2s; } .ic-bar:nth-child(4) { animation-delay: -1.8s; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-link-a { 0%, 100% { transform: translate(1.6px, -1.6px); } 45%, 60% { transform: none; } }
@keyframes ic-link-b { 0%, 100% { transform: translate(-1.6px, 1.6px); } 45%, 60% { transform: none; } }
@keyframes ic-blink { 0%, 86%, 100% { transform: none; } 91% { transform: scaleY(0.12); } }
@keyframes ic-ant { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ic-write { 0% { stroke-dashoffset: 1; } 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes ic-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }

/* ---------- 5 · how we work: a timeline (founder, round 3, after a recording) ----------
   Without the pin (phones, tablets, reduced motion, no JavaScript) it runs down the page: the axis on the left, a short
   stem to each card. Pinned on desktop (.is-pinned, console.js) the track lies sideways and slides: the axis crosses the
   screen, each step hangs above or below it on a stem with a dot at the far end, and the call to action closes the line. */
.tl-track { position: relative; padding-left: 2.6rem; }
.tl-axis { position: absolute; left: 0.55rem; top: 0.5rem; bottom: 0.5rem; width: 2px; border-radius: 2px; background: var(--line-strong); }
.tl-axis-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #2F8BFF, var(--n-green) 40%); box-shadow: 0 0 12px rgba(66, 206, 51, 0.45); transform-origin: 50% 0; }
.tl-cover { margin-bottom: var(--s-6); }
.tl-lead { margin: 0; max-width: 30ch; font: 500 clamp(1rem, 0.9rem + 0.4vw, 1.25rem)/1.5 var(--font-mono); color: var(--ink-2); }
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.tl-step { position: relative; }
.tl-pin { position: relative; }
.tl-stem { --g: 1; position: absolute; left: calc(-2.05rem + 1px); top: 1.5rem; width: calc(2.05rem - 1px); height: 2px; background: var(--n-green); transform-origin: 0 50%; transform: scaleX(var(--g)); }
.tl-dot { position: absolute; left: calc(-2.05rem - 5px); top: calc(1.5rem - 5px); width: 12px; height: 12px; border-radius: 50%; background: var(--n-green);
  box-shadow: 0 0 0 4px rgba(66, 206, 51, 0.18), 0 0 14px rgba(66, 206, 51, 0.7); }
.tl-card { position: relative; max-width: 34rem; padding: 1.1rem 1.3rem 1.3rem; border-radius: 18px;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 50px light-dark(rgba(4, 51, 119, 0.12), rgba(0, 0, 0, 0.35)); }
.tl-n { margin: 0 0 0.4rem; font: 700 0.8125rem/1 var(--font-mono); letter-spacing: 0.04em; }
.tl-n .tk-com { color: var(--label); }
.tl-card h3 { margin: 0 0 0.45rem; font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.65rem); letter-spacing: -0.02em; }
.tl-text { margin: 0; font: 500 0.9375rem/1.6 var(--font-mono); color: var(--ink-2); }
.tl-end { position: relative; margin-top: var(--s-6); }
.tl-end .tl-dot { top: 50%; margin-top: -6px; }
.tl-end .btn { max-width: 100%; white-space: normal; text-align: left; }
html.fx-on .tl-end .tl-dot { animation: arrive 1.6s ease-out infinite; }

.process.is-pinned { height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
/* it rises over the empty foot of the section above (sections.js, --tl-pull; founder, 8 October 2026: "There is a big
   gap"); its own empty top lets the pointer through to that section, its words and cards take it as usual */
.process.is-pinned { margin-top: calc(-1 * var(--tl-pull, 0px)); pointer-events: none; }
.pin-spacer-process { pointer-events: none; }                    /* the spacer GSAP wraps it in lets the pointer through too */
.process.is-pinned .tl-cover > *, .process.is-pinned .tl-card, .process.is-pinned .tl-end { pointer-events: auto; }
.process.is-pinned .tl-shell { height: 100%; padding-top: var(--header-h); }
.process.is-pinned .tl-window { height: 100%; }
.process.is-pinned .tl-track { --axis: 57%; display: flex; width: max-content; height: 100%; padding: 0; will-change: transform; }
.process.is-pinned .tl-axis { left: 0; right: clamp(5rem, 9vw, 9rem); top: var(--axis); bottom: auto; width: auto; height: 2px; }   /* ends at the last dot (8 October 2026; it ran on under the button until then) */
.process.is-pinned .tl-axis-fill { background: linear-gradient(90deg, #2F8BFF, var(--n-green) 25%); transform-origin: 0 50%; }
/* the heading sits on the line, like the steps above it (30 September 2026, founder, of the empty space under it); it
   stood at the top of the screen until then */
.process.is-pinned .tl-cover { flex: none; width: min(40vw, 600px); height: calc(var(--axis) - 1.4rem); margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.process.is-pinned .tl-cover h2 { margin-bottom: var(--s-3); }
.process.is-pinned .tl-steps { display: flex; gap: 0; }
.process.is-pinned .tl-step { flex: none; width: clamp(290px, 25vw, 400px); height: 100%; }
.process.is-pinned .tl-pin { position: absolute; left: 0; width: clamp(270px, 24vw, 380px); }
.process.is-pinned .tl-up .tl-pin { bottom: calc(100% - var(--axis) + 1.4rem); }
.process.is-pinned .tl-down .tl-pin { top: calc(var(--axis) + 1.6rem); }
.process.is-pinned .tl-card { margin-left: 1.5rem; }
.process.is-pinned .tl-stem { left: 0; width: 2px; height: auto; transform: scaleY(var(--g)); }
.process.is-pinned .tl-up .tl-stem { top: 0.6rem; bottom: -1.4rem; transform-origin: 50% 100%; }
.process.is-pinned .tl-down .tl-stem { top: -1.6rem; bottom: 0.6rem; transform-origin: 50% 0; }
.process.is-pinned .tl-dot { left: -5px; }
.process.is-pinned .tl-up .tl-dot { top: calc(0.6rem - 6px); }
.process.is-pinned .tl-down .tl-dot { top: auto; bottom: calc(0.6rem - 6px); }
.process.is-pinned .tl-end { flex: none; width: clamp(5rem, 9vw, 9rem); height: 100%; margin: 0; }
.process.is-pinned .tl-end .tl-dot { left: -6px; top: var(--axis); margin-top: -5px; }
.process.is-pinned .tl-end .btn { position: absolute; left: 1.5rem; top: var(--axis); margin-top: -1.6rem; }   /* no transform: the buttons lean toward the pointer */

/* ---------- 6 · platforms: the code card between two columns of names ---------- */
.platforms { overflow: hidden; }
.cloud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.cloud-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; position: relative; z-index: 2; }
.cloud-left { align-items: flex-end; grid-column: 1; grid-row: 1; }
.cloud-right { align-items: flex-start; grid-column: 3; grid-row: 1; }
.cloud-left .cloud-chip { margin-right: var(--o); }
.cloud-right .cloud-chip { margin-left: var(--o); }
.cloud-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: 500 0.8125rem var(--font-mono); white-space: nowrap; box-shadow: var(--card-shadow); }
.cloud-chip .tk-com { color: var(--label); }
.cc-logo { height: 1rem; width: auto; max-width: 2.6rem; }
.cc-logo.plogo-word { height: 0.9rem; max-width: none; }   /* a wordmark at its own width (29 September 2026: PageSpeed found RingCentral's squeezed) */
.platform-card { position: relative; z-index: 1; width: 100%; margin-inline: auto; grid-column: 2; grid-row: 1; }
.platform-card .platform-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.55rem 0 0.55rem 1.6em; border: 0; }
.platform-card .platform-row:last-of-type { border: 0; }
.platform-row::before { content: ""; position: absolute; left: 1.6em; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--rule, 1)); }
.platform-row .pr-key, .platform-row .pr-end { margin: 0; }
.platform-row .chips { display: contents; }
.platform-row .chip { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: 500 0.8125rem var(--font-mono); }
/* a service page lights the platforms that service uses (29 September 2026, founder: "Full list, lit"): navy on green */
.platform-row .chip.is-lit { background: var(--n-green); border-color: var(--n-green); color: var(--n-navy); font-weight: 700; box-shadow: 0 0 16px rgba(66, 206, 51, 0.45); }
.pc-legend { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; font: 500 0.75rem var(--font-mono); color: var(--ink-2); }
@media (max-width: 479px) { .platform-card .code-bar { flex-wrap: wrap; row-gap: 0.35rem; } .pc-legend { margin-left: 0; flex-basis: 100%; } }
.pc-legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--n-green); box-shadow: 0 0 8px rgba(66, 206, 51, 0.6); }

/* ---------- smaller screens ---------- */
@media (max-width: 1279px) {
  .cloud { grid-template-columns: minmax(0, 1fr); }
  .cloud-col { display: none; }
  .platform-card { max-width: 760px; grid-column: 1; }
}
@media (max-width: 1023px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the heading, the panel stack, then the list (29 September 2026, founder: "no motion effects on scroll sections ...
     'What we automate'"): one column, so the stack can stay under the header while the list scrolls up past it */
  .services-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .services-copy { display: contents; }
  .services-visual { order: 1; }
  .service-list { order: 2; }
  html.fx-on .services:not(.is-pinned) .services-visual { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    background: linear-gradient(180deg, var(--ground) 80%, color-mix(in srgb, var(--ground) 0%, transparent)); }
  .stack { height: 250px; translate: -62px 0; }   /* the row of panels recedes to the right, so the stack moves left to sit in the
     middle of the screen (30 September 2026, founder: "the icons are not in the middle"; measured over the turn) */
  .stack-rig { width: 90px; }
}
@media (max-width: 767px) {
  .connect-head { grid-template-columns: minmax(0, 1fr); }
  .hero-strip { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .strip-window { width: 100%; }
  .connect-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.6rem; }
  .connect-keys .mini-key { max-width: 64px; }
  .stack { height: 200px; translate: -56px 0; }
  .stack-rig { width: 76px; }
  .connect-lines { display: none; }
  /* phones (29 September 2026, founder: "no motion effects on scroll sections ... 'One automated workflow'"): four lines,
     one from each column of plates, drawn in with the scroll and carrying the pulses into the card */
  .connect-lines-sm { display: block; width: calc(100% - 2rem); height: clamp(64px, 20vw, 110px); margin: 0.5rem 1rem 0; overflow: visible; }
}
@media (max-width: 599px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .btn { width: 100%; white-space: normal; }
  /* founder, 28 September 2026 (phone screenshot): "there is a big gap between header and the writing, can you bring the
     writing up?" The copy starts about two rows of keys below the header (46vh until then), so both buttons and the note
     fit on the first screen. The shade that keeps it readable now starts just above the copy, wherever the copy sits,
     instead of at fixed heights of the hero */
  .hero-copy { --copy-top: clamp(8.5rem, 22vh, 13rem); padding-top: var(--copy-top); }
  .hero-shade { background: linear-gradient(180deg, var(--hero-ground) 0%, transparent 12%), radial-gradient(60% 50% at 70% 30%, rgba(66, 206, 51, 0.06), transparent 70%); }
  .hero-copy::before { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: calc(var(--copy-top) - 4rem); bottom: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hero-ground) 84%, transparent) 4rem, color-mix(in srgb, var(--hero-ground) 90%, transparent)); }
}
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

/* ===== console/pages.css ===== */
/* The inner pages of Site A (27 September 2026): the Services overview and the service pages, then (28 September 2026)
   About and Contact, in the homepage's dark code style. Reuses the homepage's pieces from site.css (glass cards .problem, the panel stack .stack/.panel, the timeline
   .tl-*, the platform chips .cloud-chip, the raining letters .rain-zone). */

/* ---------- page heading (every inner page) ---------- */
.rain-zone > .page-hero { position: relative; z-index: 1; }
.page-hero { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
.page-hero h1 { max-width: 13em; margin: 0 0 var(--s-5); font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.page-hero .lead { max-width: 42ch; margin-bottom: var(--s-6); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.group-label { margin: 0 0 0.35rem; font: 700 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.group-label .tk-com { color: var(--label); }

/* ---------- Services overview: the jump links as a code object ---------- */
.jump-card { width: 100%; max-width: 520px; justify-self: end; }
.jump-card .code-bar { margin: 0; }
.jump-line { padding-left: 1.2em; text-indent: 0; }
.jump-line a { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 6px; color: inherit; text-decoration: none; transition: background-color 0.25s ease, transform 0.25s ease; }
.jump-line a:hover, .jump-line a:focus-visible, .jump-line a.is-current { background: rgba(66, 206, 51, 0.12); transform: translateX(4px); }
.jump-line a .tk-com { margin-right: 0.35em; }
.jump-line a.is-current .tk-com, .jump-line a:hover .tk-com { color: var(--n-green); }

/* ---------- Services overview: the six groups beside the panel stack (sticky) ---------- */
.groups-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.groups-visual { position: sticky; top: calc(var(--header-h) + 4vh); height: calc(100vh - var(--header-h) - 8vh); display: grid; place-items: center; }
.groups-visual .stack { width: 100%; height: 100%; }
.group { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.group:first-child { padding-top: 0; border-top: 0; }
.group-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.group-head .code-label { margin: 0; }
.group h2 { margin: 0 0 var(--s-3); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; }
.group-promise { margin: 0 0 var(--s-5); font: 700 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.35 var(--font-head); letter-spacing: -0.01em; color: var(--label); }
.group-who { max-width: 46ch; margin: 0 0 var(--s-5); color: var(--ink-2); }
.group-offers { display: grid; gap: 0.55rem; margin: 0 0 var(--s-5); padding: 0; list-style: none; font: 500 0.9375rem/1.5 var(--font-mono); color: var(--ink); }
.group-offers .tk-ok { margin-right: 0.35em; }
.practice-card { max-width: 560px; margin-bottom: var(--s-5); }
.practice-text { margin: 0; padding: 1rem 1.1rem 1.2rem; font: 500 0.9375rem/1.65 var(--font-mono); color: var(--ink-2); }
.group .more:hover::after, .related-card:hover .more::after { transform: translateX(3px); }   /* base.css draws the arrow */
/* small icons outside the stack: the group icon on narrow screens, the related-service cards */
.group-icon.panel-face, .related-icon.panel-face { position: relative; inset: auto; flex: none; border-radius: 26%; }
.group-icon.panel-face { display: none; width: 3.2rem; height: 3.2rem; background: linear-gradient(145deg, #7BE66C, #42CE33 55%, #2FA524); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 0 30px rgba(66, 206, 51, 0.4); }
.group-icon.panel-face svg { stroke: #043377; }

/* ---------- service page: heading ---------- */
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.crumbs { margin: 0 0 var(--s-4); font: 600 0.875rem/1.4 var(--font-mono); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--n-green); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.service-promise { max-width: 24ch; margin: 0 0 var(--s-6); font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.25 var(--font-head); letter-spacing: -0.02em; color: var(--label); }
.who-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); }
.who { flex: 1 1 18rem; max-width: 30rem; }
.who p:last-child { margin: 0; color: var(--ink-2); }

/* the group's panel, circled by the logos of the platforms the page names; one 3D scene, so logos pass behind the panel */
.svc-scene { --solo: clamp(150px, 15vw, 210px); --ring: clamp(300px, 33vw, 470px); position: relative; height: clamp(380px, 38vw, 540px); perspective: 1400px; }
.svc-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.solo-stage { position: absolute; left: 50%; top: 50%; width: var(--solo); height: var(--solo); margin: calc(var(--solo) * -0.5) 0 0 calc(var(--solo) * -0.5); transform-style: preserve-3d; }
.solo-panel.panel.is-active { transform: rotateX(-16deg) rotateY(-28deg); transition: none; }
.solo-panel .panel-face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 70px rgba(66, 206, 51, 0.55); }
html.fx-on .solo-panel.panel.is-active { animation: solo-float 6s ease-in-out infinite; }
@keyframes solo-float { 0%, 100% { transform: rotateX(-16deg) rotateY(-28deg); } 50% { transform: translateY(-10px) translateZ(18px) rotateX(-11deg) rotateY(-20deg); } }
.orbit { position: absolute; left: 50%; top: 50%; width: var(--ring); height: var(--ring); margin: calc(var(--ring) * -0.5) 0 0 calc(var(--ring) * -0.5); padding: 0; list-style: none;
  border: 1px dashed rgba(125, 182, 255, 0.3); border-radius: 50%; transform-style: preserve-3d; transform: rotateX(68deg); }
html.fx-on .orbit { animation: orbit-spin 40s linear infinite; }
@keyframes orbit-spin { to { transform: rotateX(68deg) rotateZ(360deg); } }
.orbit li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(calc(var(--ring) * 0.5)) rotateZ(calc(-1 * var(--a))); }
.orbit-logo { position: absolute; left: -1.75rem; top: -1.75rem; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: rgba(15, 34, 72, 0.94); border: 1px solid rgba(125, 182, 255, 0.3); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); transform: rotateX(-68deg); }
html.fx-on .orbit-logo { animation: orbit-face 40s linear infinite; }
@keyframes orbit-face { from { transform: rotateZ(0deg) rotateX(-68deg); } to { transform: rotateZ(-360deg) rotateX(-68deg); } }
.orbit-img { display: block; width: 58%; height: 58%; object-fit: contain; }
.orbit-img.plogo-word { width: 78%; }

/* ---------- service page: what we build ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); perspective: 1000px; }
.offer h3 { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); }

.offer-grid .offer:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* five offerings: the last card runs the full width */

/* ---------- service page: Search & AI Visibility (Websites & SEO) ---------- */
.seo-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.covers-card .code-bar h3.code-file { margin: 0; font: 600 0.875rem/1.4 var(--font-mono); letter-spacing: 0; color: var(--ink); }
.covers { margin: 0; list-style: none; font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem); line-height: 1.7; }
.cl.cover { margin-bottom: 0.55rem; padding-left: 4.2em; text-indent: -4.2em; color: var(--ink); transition: color 0.35s ease; }   /* wrapped lines hang under the text, past the number and the tick */
.cover:last-child { margin-bottom: 0; }
.cover-tick { display: inline-block; width: 1.6em; text-indent: 0; color: var(--tk-ok); font-weight: 700; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.4), opacity 0.35s ease, color 0.35s ease; }
.cover.is-wait { color: var(--ink-3); }
.cover.is-wait .cover-tick { opacity: 0.25; transform: scale(0.6); color: var(--ink-3); }
.seo-explainer { margin: 0 0 var(--s-5); font: 700 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.4 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.seo-explainer .tk-com { font-family: var(--font-mono); color: var(--label); }
.seo-honesty { border-color: rgba(125, 182, 255, 0.4); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 34px rgba(47, 139, 255, 0.12); }
.seo-honesty .compliance-icon { background: rgba(125, 182, 255, 0.14); border-color: rgba(125, 182, 255, 0.5); }
.seo-honesty .compliance-icon svg { stroke: #7DB6FF; }

/* ---------- service page: in practice, the scenario and its diagram ---------- */
.practice-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.scenario-card .code { font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem); line-height: 1.8; }
.scenario-line { margin-bottom: 0.7rem; }
.scenario-line:last-child { margin-bottom: 0; }
.flow { --gap: clamp(1.6rem, 3vw, 2.6rem); position: relative; display: grid; justify-items: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.flow-node { position: relative; display: grid; place-items: center; }
.flow-node + .flow-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--gap); margin-left: -1px; background: var(--line-strong); transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.flow-node.is-lit + .flow-node.is-lit::before { background: var(--n-green); box-shadow: 0 0 10px rgba(66, 206, 51, 0.7); }
.flow-node + .flow-node::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 6px; height: 6px; margin: 0 0 0 -3px; border-radius: 50%; background: var(--n-green); box-shadow: 0 0 10px var(--n-green); opacity: 0; }
html.fx-on .flow.is-live .flow-node.is-lit + .flow-node::after { opacity: 1; animation: flow-drop 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes flow-drop { from { transform: translateY(calc(var(--gap) * -1)); } to { transform: translateY(0); } }
.flow-icon { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 24px;
  background: linear-gradient(145deg, #3A4B6C, #16223C 55%, #0E1830); border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 34px rgba(0, 0, 0, 0.4); transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.flow-icon svg { width: 50%; height: 50%; fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s ease; }
.flow-node.is-lit .flow-icon { background: linear-gradient(145deg, #7BE66C, #42CE33 55%, #2FA524); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 40px rgba(66, 206, 51, 0.5); transform: scale(1.06); }
.flow-node.is-lit .flow-icon svg { stroke: #043377; }
.flow-n { position: absolute; left: calc(100% + 0.7rem); top: 50%; margin-top: -0.5em; font: 700 0.75rem/1 var(--font-mono); color: var(--ink-3); transition: color 0.4s ease; }
.flow-node.is-lit .flow-n { color: var(--n-green); }

/* ---------- service page: platforms and the compliance note ---------- */
/* every platform as the code object, the service's own lit (29 September 2026) */
.svc-platforms .platform-card { max-width: 880px; margin: 0 0 var(--s-7); }
.compliance { display: flex; align-items: flex-start; gap: var(--s-4); max-width: 60rem; padding: 1.4rem 1.6rem; border-radius: 18px;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid rgba(66, 206, 51, 0.4); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 34px rgba(66, 206, 51, 0.12); }
.compliance-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px; background: rgba(66, 206, 51, 0.15); border: 1px solid rgba(66, 206, 51, 0.5); }
.compliance-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--n-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.compliance-label { margin: 0 0 0.35rem; font: 700 1.05rem/1.35 var(--font-head); color: var(--ink); }
.compliance p:last-child { margin: 0; color: var(--ink-2); }

/* ---------- service page: related services ---------- */
.related-band { background: var(--ground); }
.related-band .section-head h2 { margin-bottom: var(--s-4); font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }   /* the size of every section heading */
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.related-card { display: flex; align-items: flex-start; gap: var(--s-5); padding: 1.5rem; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 50px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease; }
.related-card:hover, .related-card:focus-visible { transform: translateY(-4px); border-color: rgba(66, 206, 51, 0.55); }
.related-icon.panel-face { width: 4rem; height: 4rem; }
.related-card:hover .related-icon.panel-face { background: linear-gradient(145deg, #7BE66C, #42CE33 55%, #2FA524); box-shadow: 0 0 30px rgba(66, 206, 51, 0.45); }
.related-card:hover .related-icon.panel-face svg { stroke: #043377; }
.related-name { display: block; margin-bottom: 0.35rem; font: 800 clamp(1.2rem, 1rem + 0.6vw, 1.45rem)/1.2 var(--font-head); letter-spacing: -0.02em; }
.related-promise { display: block; margin-bottom: 0.9rem; color: var(--ink-2); }
.related-card .more { font-weight: 600; text-decoration: underline; text-decoration-color: var(--n-green); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

/* ---------- About ---------- */
.facts-card { width: 100%; max-width: 520px; justify-self: end; }
/* the About and Services code cards lit green (8 October 2026; the founder: "the About page does not have anything Green in
   the section"): a green edge and glow, the values in green, and a green caret blinking after the closing bracket */
.facts-card, .jump-card { border-color: rgba(66, 206, 51, 0.45); box-shadow: var(--card-shadow), 0 0 44px rgba(66, 206, 51, 0.16); }
.facts-card .tk-str, .jump-card .tk-str { color: var(--n-green); }
.facts-card .code > .cl:last-child::after, .jump-card .code > .cl:last-child::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.3em;
  vertical-align: -0.2em; background: var(--n-green); box-shadow: 0 0 10px rgba(66, 206, 51, 0.7); }
html.fx-on .facts-card .code > .cl:last-child::after, html.fx-on .jump-card .code > .cl:last-child::after { animation: caret 1.1s steps(1) infinite; }
.fact-line { padding-left: 2.4em; text-indent: -1.2em; }   /* one step in, and a wrapped value hangs one step further */
/* five rules: a numbered list; each rule's line draws in with the scroll (pages.js), its number lights on hover */
.rules-list { margin: 0; padding: 0; list-style: none; }
.rule { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-3) clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  padding-block: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); }
.rule-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--n-green), rgba(125, 182, 255, 0.4) 45%, rgba(125, 182, 255, 0.12)); transform-origin: left; }
.rule-n { font: 800 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--font-mono); color: transparent; -webkit-text-stroke: 1.5px var(--n-green); transition: color 0.35s ease, text-shadow 0.35s ease; }
.rule:hover .rule-n { color: var(--n-green); text-shadow: 0 0 26px rgba(66, 206, 51, 0.55); }
.rule-t { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.rule-d { margin: 0; max-width: 46ch; color: var(--ink-2); }
/* the founder, on the raining letters; the photo drifts with the scroll (lower.js) */
.founder-band h2 { margin-bottom: var(--s-4); font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.founder-name { margin: 0 0 var(--s-4); font: 800 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 var(--font-head); letter-spacing: -0.02em; color: var(--label); }
.founder-title { display: block; margin-top: 0.4rem; font: 600 0.875rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.founder-text { max-width: 58ch; margin: 0 0 var(--s-5); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); color: var(--ink-2); }

/* ---------- Contact ---------- */
.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.contact-hero h1 { max-width: 11em; font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); }
/* the signal (founder's recording, 28 September 2026): a phone whose rings pulse out on a loop, the phone shrinking away as
   they go and coming back lit; a dashed ring turns; the email, message and calendar icons float around it. The pointer
   leans it (contact.js) and, over it, makes the phone ring. Still under reduced motion. */
.signal-stage { display: grid; place-items: center; perspective: 1000px; }
.signal { --s: clamp(260px, 26vw, 400px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.sig-ring, .sig-orbit { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.sig-ring { border: 1.5px solid rgba(66, 206, 51, 0.5); box-shadow: 0 0 22px rgba(66, 206, 51, 0.12), inset 0 0 22px rgba(66, 206, 51, 0.08); }
.sig-r1 { inset: 30%; } .sig-r2 { inset: 19%; } .sig-r3 { inset: 8%; opacity: 0.6; }
.sig-orbit { inset: 2%; border: 1.5px dashed rgba(125, 182, 255, 0.28); }
.sig-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(123, 230, 108, 0.28), rgba(10, 26, 56, 0.9) 70%); border: 2px solid var(--n-green); box-shadow: 0 0 34px rgba(66, 206, 51, 0.55), inset 0 0 18px rgba(66, 206, 51, 0.3); }
.sig-core svg { width: 46%; height: 46%; fill: none; stroke: var(--n-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sig-sat { position: absolute; display: grid; place-items: center; width: 13%; height: 13%; margin: -6.5% 0 0 -6.5%; border-radius: 50%;
  background: rgba(15, 34, 72, 0.95); border: 1px solid rgba(125, 182, 255, 0.35); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(66, 206, 51, 0.15); }
.sig-sat svg { width: 46%; height: 46%; fill: none; stroke: var(--n-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sig-mail { left: 82%; top: 14%; } .sig-chat { left: 10%; top: 38%; } .sig-cal { left: 20%; top: 76%; } .sig-qr { left: 91%; top: 64%; }
/* the QR code's scan: a green line runs down it and fades, over and over (30 September 2026) */
.sig-scan { position: absolute; left: 20%; right: 20%; top: 26%; height: 2px; border-radius: 2px; background: var(--n-green); box-shadow: 0 0 8px var(--n-green), 0 0 14px rgba(66, 206, 51, 0.7); opacity: 0; pointer-events: none; }
html.fx-on .sig-scan { animation: sig-scan 2.6s ease-in-out infinite; }
@keyframes sig-scan { 0% { top: 26%; opacity: 0; } 12% { opacity: 1; } 55% { top: 72%; opacity: 1; } 68%, 100% { top: 72%; opacity: 0; } }
html.fx-on .sig-ring { animation: sig-pulse 4.2s cubic-bezier(0.25, 0.6, 0.3, 1) infinite; }
html.fx-on .sig-r2 { animation-delay: 0.25s; } html.fx-on .sig-r3 { animation-delay: 0.5s; }
@keyframes sig-pulse { 0%, 18% { transform: scale(0.55); opacity: 0; } 34% { opacity: 1; } 70% { transform: scale(1.04); opacity: 0.7; } 100% { transform: scale(1.12); opacity: 0; } }
html.fx-on .sig-core { animation: sig-core 4.2s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes sig-core { 0%, 8% { transform: scale(1); } 22% { transform: scale(0.15); opacity: 0.2; } 40% { transform: scale(0.15); opacity: 0.2; }
  58% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 60px rgba(66, 206, 51, 0.8), inset 0 0 24px rgba(66, 206, 51, 0.45); } 72%, 100% { transform: scale(1); } }
html.fx-on .sig-orbit { animation: sig-turn 26s linear infinite; }
@keyframes sig-turn { to { transform: rotate(360deg); } }
html.fx-on .sig-sat { animation: sig-float 5s ease-in-out infinite; }
html.fx-on .sig-chat { animation-delay: -1.6s; } html.fx-on .sig-cal { animation-delay: -3.2s; } html.fx-on .sig-qr { animation-delay: -4.2s; }
@keyframes sig-float { 0%, 100% { transform: translate3d(0, 0, 30px); } 50% { transform: translate3d(0, -8px, 30px); } }
/* over the signal, the phone rings: a quick shake, the rings closer together */
html.fx-on .signal:hover .sig-core svg, html.fx-on .signal.is-near .sig-core svg { animation: sig-ringing 0.9s ease-in-out infinite; }
@keyframes sig-ringing { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
html.fx-on .signal.is-near .sig-ring { animation-duration: 2.6s; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.contact-side { display: grid; gap: var(--s-5); container-type: inline-size; }
.contact-form { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: 20px;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 50px rgba(0, 0, 0, 0.3); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 0.45rem; font: 700 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.03em; color: var(--ink); }
.field .req { color: var(--n-green); }
.field input, .field textarea { width: 100%; padding: 0.8rem 0.95rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(8, 18, 42, 0.94); color: var(--ink);
  font: 400 1rem/1.5 var(--font-body); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--n-green); box-shadow: 0 0 0 3px rgba(66, 206, 51, 0.28); }
.contact-form.was-checked :invalid { border-color: #FF8A7A; box-shadow: 0 0 0 3px rgba(255, 138, 122, 0.2); }
.field-help { margin: 0.45rem 0 0; font-size: 0.875rem; color: var(--ink-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.form-under { margin: 0; font: 500 0.875rem/1.5 var(--font-mono); color: var(--ink-2); }
.form-privacy { margin: var(--s-4) 0 0; font-size: 0.875rem; color: var(--ink-3); }
.form-privacy a, .form-msg a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--n-green); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.form-msg { margin: var(--s-5) 0 0; padding: 0.9rem 1.1rem; border-radius: 12px; font-weight: 600; color: var(--ink); }
.form-ok { background: rgba(66, 206, 51, 0.14); border: 1px solid rgba(66, 206, 51, 0.55); }
.form-err { background: rgba(255, 138, 122, 0.12); border: 1px solid rgba(255, 138, 122, 0.5); }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
/* "Pick a time": the card and its button that opens the booking calendar (founder: "I do not want to show the complete
   calendar"); then the email and phone as two small cards */
.call-card { padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); border-radius: 20px;
  background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid rgba(66, 206, 51, 0.4); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 34px rgba(66, 206, 51, 0.12); }
.call-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.call-head h2 { margin: 0; font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; }
.call-note { margin: 0 0 var(--s-4); font: 500 0.875rem/1.55 var(--font-mono); color: var(--ink-2); }
/* the calendar (30 September 2026): a week of times in miniature, five columns by three rows, the free ones green and
   breathing in a slow wave, one picked and glowing; under it a green button. The whole card opens the calendar */
.call-open { display: grid; gap: 0.9rem; padding: 1rem; border-radius: 14px; border: 1px solid rgba(66, 206, 51, 0.35); background: rgba(66, 206, 51, 0.05);
  text-decoration: none; transition: border-color 0.25s ease, background-color 0.25s ease; }
.cal-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cal-week i { height: 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.06); transition: background-color 0.3s ease; }
.cal-week i.is-free { background: rgba(66, 206, 51, 0.42); border-color: rgba(66, 206, 51, 0.5); }
.cal-week i.is-pick { background: var(--n-green); border-color: #7BE66C; box-shadow: 0 0 14px rgba(66, 206, 51, 0.85); }
html.fx-on .cal-week i.is-free { animation: cal-free 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.35s); }
html.fx-on .cal-week i.is-pick { animation: cal-pick 1.8s ease-in-out infinite; }
@keyframes cal-free { 0%, 100% { background-color: rgba(66, 206, 51, 0.28); } 50% { background-color: rgba(66, 206, 51, 0.6); } }
@keyframes cal-pick { 0%, 100% { box-shadow: 0 0 8px rgba(66, 206, 51, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(66, 206, 51, 1); transform: scale(1.06); } }
.cal-go { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--n-green); color: var(--n-navy);
  font: 700 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 0 22px rgba(66, 206, 51, 0.35); transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.cal-go svg { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: var(--n-navy); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
.call-open:hover, .call-open:focus-visible { border-color: var(--n-green); background: rgba(66, 206, 51, 0.1); }
.call-open:hover .cal-go, .call-open:focus-visible .cal-go { background: #5BDB4C; box-shadow: 0 0 30px rgba(66, 206, 51, 0.6); }
.call-open:hover .cal-go svg, .call-open:focus-visible .cal-go svg { transform: translateY(-2px) scale(1.08); }
.call-open:hover .cal-week i.is-free { background-color: rgba(66, 206, 51, 0.62); }
.direct-h { margin: 0 0 var(--s-3); font: 700 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.direct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.direct-mini { display: grid; gap: 0.35rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line);
  color: var(--ink); text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease; }
.direct-mini:hover, .direct-mini:focus-visible { border-color: rgba(66, 206, 51, 0.6); transform: translateY(-3px); }
.direct-mini .direct-icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; margin-bottom: 0.2rem; }
.direct-label { font: 700 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.direct-value { font-weight: 700; font-size: 0.9375rem; overflow-wrap: anywhere; }
.direct-icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: rgba(66, 206, 51, 0.14); border: 1px solid rgba(66, 206, 51, 0.5); }
.direct-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--n-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the business card's vCard QR (founder, 28 September 2026: "add this attached card to the contact page"): the code on a
   white tile, as printed, inside green viewfinder corners that breathe (they sit outside the code, so it scans the same);
   the link beside it saves the same contact on the phone the page is open on */
.qr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); border-radius: 20px; background: linear-gradient(155deg, var(--glass), var(--glass-2)); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi); }
.qr-frame { position: relative; padding: 9px; }
.qr-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--n-green); --l: 22px; --t: 3px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l),
              linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l),
              linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l),
              linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 6px rgba(66, 206, 51, 0.55)); }
html.fx-on .qr-frame::before { animation: qr-breathe 2.8s ease-in-out infinite; }
@keyframes qr-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.7; } }
.qr-tile { display: block; width: clamp(128px, 7rem + 3vw, 172px); padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.qr-tile img { display: block; width: 100%; height: auto; border-radius: 10px; }
.qr-text h2 { margin: 0 0 var(--s-2); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.qr-text .call-note { margin-bottom: var(--s-3); }
.qr-save { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 10px; border: 1.5px dashed rgba(125, 182, 255, 0.45); color: var(--ink);
  font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.qr-save svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--n-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qr-save:hover, .qr-save:focus-visible { border-color: var(--n-green); background: rgba(66, 206, 51, 0.1); color: #fff; }

/* ---------- Case studies on the homepage (29 September 2026; pop-up cards from 28 September until then): each case in
   full on the page, short: the client, the tags and the result beside the client's quote ---------- */
.case-list { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); }
.case { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.case-summary { display: grid; align-content: start; gap: var(--s-3); padding-top: clamp(0rem, 2vw, 1.75rem); }
.case-n { margin: 0 0 var(--s-2); font: 800 clamp(2.2rem, 1.8rem + 1.2vw, 3rem)/1 var(--font-mono); color: transparent; -webkit-text-stroke: 1.5px var(--n-green); }
.case h3 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.case-where { margin: 0; font: 600 0.9375rem/1.4 var(--font-mono); color: var(--ink-2); }
.case-eyebrow { margin: 0; font: 700 0.8125rem/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.case-result { margin: var(--s-2) 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--ink-2); }
/* the quote on a glass card, a large green opening mark, the speaker and the client's own site under it */
.case-quote { position: relative; margin: 0; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); border-radius: 24px; background: linear-gradient(155deg, var(--glass), var(--glass-2));
  border: 1px solid rgba(66, 206, 51, 0.35); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 44px rgba(66, 206, 51, 0.1); }
.case-quote::before { content: "\201C"; position: absolute; top: 0.05em; left: 0.3em; font: 800 clamp(5.5rem, 4rem + 4vw, 8rem)/1 var(--font-head); color: var(--n-green); text-shadow: 0 0 30px rgba(66, 206, 51, 0.5); pointer-events: none; }
.case-quote blockquote { margin: 0; }
.case-quote blockquote p { margin: 0; padding-top: clamp(2.4rem, 2rem + 1.6vw, 3.6rem); font: 600 clamp(1.15rem, 1rem + 0.55vw, 1.45rem)/1.5 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.case-quote figcaption { display: grid; gap: 0.6rem; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.case-speaker { font-weight: 700; color: var(--ink); }
.case-proof { justify-self: start; font: 700 0.875rem/1.3 var(--font-mono); color: var(--n-green); text-decoration: underline; text-underline-offset: 0.22em; }
.case-proof .arrow { display: inline-block; transition: transform 0.25s ease; }
.case-proof:hover .arrow, .case-proof:focus-visible .arrow { transform: translate(2px, -2px); }

/* ---------- Privacy policy ---------- */
.policy-date { margin: 0; font: 600 0.875rem/1.5 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-2); }
.policy-date .tk-com { color: var(--label); }
.policy { padding-top: 0; }
.policy-item { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.policy-item .rule-t { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem); }
.policy-item .rule-d { max-width: 60ch; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); }
.policy-item .rule-d a { color: var(--n-green); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 404 ---------- */
/* three keycaps from the homepage keyboard spell 404, side by side like neighbouring keys on the homepage, with the
   digits standing up so the number reads at a glance. The sides are the top's outline repeated down the screen; under
   the pointer a key rises (its top moves up, its sides grow, its foot stays) and lights green, as on the homepage */
.nf-hero { display: grid; align-items: center; min-height: calc(100svh - var(--header-h)); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.nf-hero h1 { max-width: 11em; }
.nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); max-width: 560px; }
.nf-link { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; }
.nf-link .direct-icon { margin: 0; }
.nf-link .arrow { display: inline-block; color: var(--n-green); transition: transform 0.25s ease; }
.nf-link:hover .arrow, .nf-link:focus-visible .arrow { transform: translateX(4px); }
.nf-stage { display: grid; place-items: center; min-height: clamp(240px, 30vw, 440px); }
.nf-keys { --u: clamp(64px, 8.4vw, 150px); display: flex; gap: calc(var(--u) * 0.5); padding-inline: calc(var(--u) * 0.21); }   /* each box is u wide, its diamond 1.41u */
.nf-key { --side: #081531; position: relative; display: block; flex: none; width: var(--u); height: var(--u); border-radius: 24%; background: var(--key-bevel); border: 1px solid var(--key-edge);
  transform: rotateX(54deg) rotateZ(-45deg);
  box-shadow: -1px 1px 0 var(--side), -2px 2px 0 var(--side), -3px 3px 0 var(--side), -4px 4px 0 var(--side), -5px 5px 0 var(--side), -6px 6px 0 var(--side), -7px 7px 0 var(--side), -8px 8px 0 #050D24,
              -14px 14px 26px rgba(0, 0, 0, 0.5); }
.nf-top { position: absolute; inset: 9%; display: grid; place-items: center; border-radius: 22%; background: linear-gradient(135deg, var(--key-dish-hi), var(--key-dish)); }
.nf-d { font: 800 calc(var(--u) * 0.5)/1 var(--font-mono); color: rgba(255, 255, 255, 0.9); transform: rotate(45deg) scaleY(1.45); }   /* upright on screen, a little foreshortened */
.nf-key:hover { --side: #2FA524; transform: rotateX(54deg) rotateZ(-45deg) translate(8px, -8px); background: #2FA524; border-color: rgba(255, 255, 255, 0.4);
  box-shadow: -2px 2px 0 var(--side), -4px 4px 0 var(--side), -6px 6px 0 var(--side), -8px 8px 0 var(--side), -10px 10px 0 var(--side), -12px 12px 0 var(--side), -14px 14px 0 var(--side), -16px 16px 0 #22801B,
              0 0 44px rgba(66, 206, 51, 0.55); }
.nf-key:hover .nf-top { background: linear-gradient(135deg, #68E258, #42CE33); }
.nf-key:hover .nf-d { color: #043377; }
html.fx-on .nf-key { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, background-color 0.35s ease; }
html.fx-on .nf-top, html.fx-on .nf-d { transition: background 0.35s ease, color 0.35s ease; }

/* ---------- smaller screens ---------- */
@media (max-width: 1023px) {
  .page-hero-grid, .service-hero-grid, .groups-grid, .practice-grid, .seo-grid, .contact-hero-grid, .contact-grid, .nf-grid, .case { grid-template-columns: minmax(0, 1fr); }
  .nf-stage { order: -1; min-height: 0; padding-block: 2.5rem 1rem; }
  .facts-card { max-width: none; justify-self: stretch; }
  .signal { --s: min(280px, 68vw); }
  .rule { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .rule-d { grid-column: 2; }
  .jump-card { max-width: none; justify-self: stretch; }
  .groups-visual { display: none; }
  .group-icon.panel-face { display: grid; }
  .svc-scene { height: 360px; }
  .flow { grid-auto-flow: column; justify-content: center; gap: var(--gap); }   /* centred since 30 September 2026 (founder: the icons "are not in the middle") */
  .flow-node + .flow-node::before, .flow-node + .flow-node::after { display: none; }
  .flow-n { left: 50%; top: calc(100% + 0.5rem); margin: 0 0 0 -0.6em; }
}
@media (max-width: 767px) {
  .offer-grid, .related-grid, .field-grid, .nf-links { grid-template-columns: minmax(0, 1fr); }
  .rule { grid-template-columns: minmax(0, 1fr); }
  .rule-d { grid-column: 1; }
  .svc-scene { --solo: 128px; --ring: 270px; height: 320px; }
  .related-card { flex-direction: column; }
  .flow { --gap: 1rem; }
  .flow-icon { width: 3.6rem; height: 3.6rem; border-radius: 18px; }
}
/* small phones (29 September 2026): the five flow icons on Business Automation and the logo ring fit a 320 px screen */
@media (max-width: 419px) {
  .flow { --gap: 0.6rem; }
  .flow-icon { width: 3rem; height: 3rem; border-radius: 15px; }
  .svc-scene { --solo: 112px; --ring: 232px; height: 290px; }
}
/* the QR card stacks when its column is narrow (phones, and laptops around 1024 px wide) */
@container (max-width: 399px) {
  .qr-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .solo-panel.panel.is-active, .orbit, .orbit-logo { animation: none !important; } }

/* ---------- type on phones and tablets (29 September 2026; founder: "Writing is still bit bigger", then the 90% plan): body
   text 16 px (was 17), the big headings about 15% smaller, card headings and lead lines a little smaller. Each size is the
   desktop formula scaled, so it still grows between a small phone and a tablet. Form fields stay at 16 px (iPhones zoom
   into smaller ones). Desktop: fresh.css (the root at 90%). ---------- */
@media (max-width: 1023px) {
  :root { --fs-body: 1rem; --fs-lead: calc(0.94 * clamp(1.125rem, 1rem + 0.5vw, 1.3125rem)); }
  .hero h1 { font-size: calc(0.85 * clamp(2.35rem, 1.1rem + 3.9vw, 4.75rem)); }
  .hero .lead { font-size: calc(0.94 * clamp(1.0625rem, 1rem + 0.35vw, 1.25rem)); }
  .rain-zone .section-head h2, .tl-cover h2, .about-band h2, .founder-band h2, .related-band .section-head h2 { font-size: calc(0.85 * clamp(2.25rem, 1.1rem + 3.4vw, 4rem)); }
  .navy-band .section-head h2 { font-size: calc(0.85 * clamp(2.6rem, 1.4rem + 4.8vw, 6rem)); }
  .green-close-h { font-size: calc(0.85 * clamp(2.8rem, 1.2rem + 5vw, 6.5rem)); }
  .marquee-row a { font-size: calc(0.85 * clamp(2.2rem, 1.2rem + 4vw, 5.5rem)); }
  html.fx-off .marquee-row a { font-size: calc(0.85 * clamp(1.6rem, 1rem + 2.4vw, 3rem)); }
  .page-hero h1 { font-size: calc(0.85 * clamp(2.6rem, 1.3rem + 4.6vw, 5.5rem)); }
  .contact-hero h1 { font-size: calc(0.85 * clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem)); }
  .page-hero .lead { font-size: calc(0.94 * clamp(1.0625rem, 1rem + 0.4vw, 1.3rem)); }
  .group h2 { font-size: calc(0.85 * clamp(2rem, 1.2rem + 2.6vw, 3.4rem)); }
  .case h3 { font-size: calc(0.85 * clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem)); }
  .case-result { font-size: calc(0.94 * clamp(1.0625rem, 1rem + 0.35vw, 1.25rem)); }
  .case-quote blockquote p { font-size: calc(0.92 * clamp(1.15rem, 1rem + 0.55vw, 1.45rem)); }
  .rule-n { font-size: calc(0.85 * clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)); }
  .service-promise { font-size: calc(0.9 * clamp(1.4rem, 1rem + 1.4vw, 2.3rem)); }
  .service-body h3 { font-size: calc(0.92 * clamp(1.3rem, 1rem + 1.05vw, 2rem)); }
  .problem h3 { font-size: 1.15rem; }
  .tl-card h3, .offer h3 { font-size: calc(0.92 * clamp(1.2rem, 1rem + 0.6vw, 1.5rem)); }
  .rule-t { font-size: calc(0.92 * clamp(1.35rem, 1.05rem + 1vw, 2rem)); }
  .policy-item .rule-t { font-size: calc(0.92 * clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem)); }
  .founder-name { font-size: calc(0.92 * clamp(1.4rem, 1.1rem + 1vw, 2rem)); }
  .founder-text { font-size: 1rem; }
  .related-name { font-size: calc(0.92 * clamp(1.2rem, 1rem + 0.6vw, 1.45rem)); }
  .seo-explainer, .group-promise { font-size: calc(0.92 * clamp(1.15rem, 1rem + 0.6vw, 1.5rem)); }
  .faq summary { font-size: 1.0625rem; }
  .green-close-text { font-size: 1.0625rem; }
  .action-label { font-size: calc(0.92 * clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)); }
}