/* TMN Creative home page in the TMN Flow world. Tokens copied from tmn-flow.css at 6f83242 (FLOW-SYSTEM 5.2), never linked.
   Motion rule (owner, Sep 30 2026): no control, nothing moves on its own past 5s, reduced motion and no-JS are settled. */

@font-face {
  font-family: "Flow Sans";
  src: url("fonts/flow-sans.woff2") format("woff2");
  font-weight: 380 700;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f5f7fa; --paper-2: #edf1f6; --surface: #ffffff;
  --ink: #0f1b2f; --ink-2: #33415a; --ink-3: #56627a;
  --line: #d9e0e8; --line-2: #e7ecf2;
  --gold: #c9a44c; --gold-2: #e6cf8f; --gold-ink: #7a5c14;
  --stage: #0a1220; --stage-ink: #eef2f7; --stage-muted: #a3afc0;
  --ok: #1c7a4c; --danger: #a3322a;
  --sans: "Flow Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shell: 1280px; --rail: clamp(1.25rem, 4vw, 3rem); --section: clamp(4.5rem, 7.8vw, 7rem); --header-h: 72px;
  --r-xl: 28px; --r-lg: 20px; --r-md: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-1: 0 1px 2px rgb(15 27 47 / 0.05), 0 6px 18px -6px rgb(15 27 47 / 0.08);
  --shadow-2: 0 1px 2px rgb(15 27 47 / 0.05), 0 14px 34px -12px rgb(15 27 47 / 0.16), 0 44px 90px -30px rgb(15 27 47 / 0.22);
  --shadow-device: 0 2px 4px rgb(15 27 47 / 0.08), 0 24px 48px -18px rgb(15 27 47 / 0.35), 0 60px 110px -40px rgb(15 27 47 / 0.35);
  --gold-a: #b8903a; --gold-b: #e2c77f; --gold-c: #c49a3f; --thread-core: #fffaf0;
  interpolate-size: allow-keywords;
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
}

@media (max-width: 640px) {
  :root { --section: 5rem; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

html.menu-open, html.menu-open body { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 450; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }

::selection { background: #f1e3b8; color: var(--ink); }

/* No italic in Flow Sans: <em> is upright. Only the H1 and client quotes carry it as weight.
   Section headings stay uniformly light, as on Flow (no bold last word). */
em { font-style: normal; font-weight: inherit; }
h1 em, .display em { font-weight: 500; }
blockquote em { font-weight: 560; }

/* Focus: ink-gold on light ground (5.81:1), gold only where the ground is dark */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-weight: 580;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline-color: var(--gold); }

.shell {
  width: min(var(--shell), calc(100% - (var(--rail) * 2)));
  margin-inline: auto;
}

/* Type */

.display {
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  font-weight: 380;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
}

h2 {
  font-size: clamp(2.15rem, 4.1vw, 3.9rem);
  font-weight: 420;
  font-stretch: 110%;
  line-height: 1.02;
  letter-spacing: -0.037em;
  max-width: 17ch;
}

h3 {
  font-size: 1.25rem;
  font-weight: 580;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.lead {
  max-width: 31em;
  font-size: clamp(1.125rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Buttons: ink, line, and gold only on an ink ground */

.button {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 580;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform 0.35s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.button-lg {
  min-height: 56px;
  padding: 0 1.6rem;
  font-size: 1.0625rem;
  border-radius: 14px;
}

.button-ink {
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(15 27 47 / 0.25), 0 10px 24px -10px rgb(15 27 47 / 0.55);
}
.button-ink:hover {
  background: #1a2b47;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(15 27 47 / 0.25), 0 16px 32px -12px rgb(15 27 47 / 0.6);
}

.button-line {
  background: rgb(255 255 255 / 0.7);
  border-color: #c8d2de;
  color: var(--ink);
}
.button-line:hover { background: #fff; border-color: var(--ink); }

.button-gold {
  background: var(--gold);
  color: #1d1506;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.button-gold:hover { background: #d6b563; }

.button:active { transform: translate(var(--mx), var(--my)) scale(0.98); }

.button-ink,
.button-gold { position: relative; overflow: hidden; isolation: isolate; }
.button-ink::after,
.button-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.26) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}
.button-ink:hover::after,
.button-gold:hover::after { transform: translateX(130%); }

.button-icon { flex: none; width: 1.05rem; height: auto; transition: transform 0.35s var(--ease-out); }
.button:hover .button-icon { transform: translateX(3px); }

/* Reading progress */

.scroll-prog {
  position: fixed;
  z-index: 70;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
}
.scroll-prog span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
}

/* Header */

.site-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: var(--header-h);
}

/* The glass lives on ::before so the header itself never carries a blur */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(245 247 250 / 0.82);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  opacity: 0;
  transition: opacity 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
.site-header.is-scrolled::before { opacity: 1; }
/* No JS: the glass stays on */
@media (scripting: none) {
  .site-header::before { opacity: 1; }
}
.site-header.menu-is-open::before { opacity: 1; background: var(--paper); }

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}
.logo-mark { width: 74px; height: auto; }
.logo-divider { width: 1px; height: 26px; margin: 0 14px; background: var(--line); }
.logo-word {
  font-size: 1.2rem;
  font-weight: 620;
  font-stretch: 110%;
  letter-spacing: -0.02em;
}
.logo-sub {
  display: none;
  margin: 0.27em 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.9rem);
}

.nav-link,
.nav-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-link::after,
.nav-ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover,
.nav-ghost:hover,
.nav-link.is-active { color: var(--ink); }
.nav-link:hover::after,
.nav-ghost:hover::after,
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu-btn {
  display: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.8);
}
.menu-line {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), background-color 0.35s ease;
}
.menu-line-top { top: 17px; }
.menu-line-bottom { top: 25px; }
.menu-btn[aria-expanded="true"] .menu-line-top { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-line-bottom { transform: translateY(-4px) rotate(-45deg); }

/* Over the dark work stage (unit 2 wires the trigger) */
.site-header.is-on-dark::before {
  background: rgb(10 18 32 / 0.8);
  border-bottom-color: rgb(238 242 247 / 0.08);
}
/* Collapsed nav (phones and tablets): an opaque bar from the first paint, with no fade-in, so content scrolling
   under the logo never shows through. Paper by default, solid ink over the dark work stage, paper with the menu
   open (the menu-is-open rules below still win). Wide screens keep the glass that fades in on scroll. */
@media (max-width: 1140px) {
  .site-header::before {
    opacity: 1;
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.35s ease, border-color 0.35s ease;
  }
  .site-header.is-on-dark::before { background: rgb(10 18 32); }
}
.site-header .logo-word,
.site-header .logo-sub,
.site-header .logo-divider,
.site-header .nav-link,
.site-header .nav-ghost,
.site-header .menu-btn { transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease; }
.site-header.is-on-dark .logo-word { color: #f4f7fb; }
.site-header.is-on-dark .logo-sub { color: var(--stage-muted); }
.site-header.is-on-dark .logo-divider { background: rgb(238 242 247 / 0.22); }
.site-header.is-on-dark .nav-link,
.site-header.is-on-dark .nav-ghost { color: #cfd7e2; }
.site-header.is-on-dark .nav-link:hover,
.site-header.is-on-dark .nav-ghost:hover { color: #fff; }
.site-header.is-on-dark .nav-cta { background: #f4f7fb; color: var(--ink); box-shadow: none; }
.site-header.is-on-dark .menu-btn { border-color: rgb(238 242 247 / 0.2); background: rgb(255 255 255 / 0.06); }
.site-header.is-on-dark .menu-line { background: #f4f7fb; }
.site-header.is-on-dark :focus-visible { outline-color: var(--gold); }
.site-header.is-on-dark.menu-is-open::before { background: var(--paper); border-bottom-color: var(--line); }
.site-header.is-on-dark.menu-is-open .logo-word { color: var(--ink); }
.site-header.is-on-dark.menu-is-open .logo-divider { background: var(--line); }
.site-header.is-on-dark.menu-is-open .menu-btn { border-color: var(--line); background: rgb(255 255 255 / 0.8); }
.site-header.is-on-dark.menu-is-open .menu-line { background: var(--ink); }
.site-header.is-on-dark.menu-is-open :focus-visible { outline-color: var(--gold-ink); }

/* Mobile menu: an opaque paper panel under the header */
.mob-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem var(--rail) 1.5rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgb(15 27 47 / 0.35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.mob-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.mob-menu a:not(.mob-cta) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  border-bottom: 1px solid var(--line-2);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.mob-menu a:not(.mob-cta) svg { width: 14px; height: auto; color: var(--ink-3); }
.mob-menu .mob-cta {
  width: 100%;
  min-height: 52px;
  margin-top: 1.25rem;
}

@media (min-width: 1080px) {
  .logo-sub { display: block; }
}

@media (min-width: 1141px) and (max-width: 1280px) {
  .nav-ghost { display: none; }
}

@media (max-width: 1140px) {
  .nav-links,
  .nav-ghost,
  .nav-cta { display: none; }
  .menu-btn { display: block; }
}

@media (min-width: 1141px) {
  .mob-menu { display: none; }
}

/* Sections, skeleton grounds. Units 2 to 4 give each section its own layout. */

.section { padding-block: var(--section); }
.ground-paper { background: var(--paper); }
.ground-paper-2 { background: var(--paper-2); }

/* In-page jumps land with the section's top edge at the header's bottom edge, so no strip of the section above
   shows. #pricing lands with its heading 2.5rem under the header: it clears the dark stage above it, and all 3
   package cards fit a 1440 x 900 screen (the root scroll-padding adds the header height) */
main > section[id] { scroll-margin-top: -12px; }
#pricing { scroll-margin-top: calc(2.5rem - 12px - var(--section)); }

/* Inline lists with a middot: each separator leads its item and hangs left of the item's text, so a wrapped
   line never ends on a dot, and the clip removes the dot that would start a line */
.sep-list {
  display: block;
  clip-path: polygon(-6px -40px, calc(100% + 40px) -40px, calc(100% + 40px) calc(100% + 40px), -6px calc(100% + 40px));
}
.sep-row { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -1.3em; }
.sep-item { position: relative; min-width: 0; padding-left: 1.3em; }
.sep-item > .sep { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: center; width: 1.3em; }

.section-intro p,
.section p:not([class]) { max-width: 36em; color: var(--ink-2); }
.section-intro p { margin-top: 1.4rem; font-size: 1.125rem; }

/* Hero */

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(2.25rem, 6vw, 5rem)) 0 clamp(3.5rem, 7vw, 6.5rem);
  overflow: clip;
}

.hero-light {
  position: absolute;
  inset: -10% -15% auto 25%;
  height: 120%;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 62% 56%, rgb(201 164 76 / 0.11), transparent 70%),
    radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0));
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.1fr) minmax(0, 6.9fr);
  gap: 72px;
  align-items: center;
}

.hero-copy { position: relative; z-index: 2; }

/* 3 lines at every width: "Your website is / underselling. / Your firm is not." */
.hero .display em { display: block; }
.hero .display br { display: none; }

.hero-deck {
  margin-top: 1.6rem;
  max-width: 31em;
  font-size: clamp(1.125rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-deck strong { font-weight: 560; color: var(--ink); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero-cta-note {
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.hero-cta-note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 27 47 / 0.35);
  transition: text-decoration-color 0.2s ease;
}
.hero-cta-note a:hover { text-decoration-color: var(--ink); }
.hero-cta-note a { white-space: nowrap; }

.hero-visual { position: relative; z-index: 1; min-width: 0; }

/* The scene is 1 drawing in em, scaled by its container */
.hero-stage {
  container-type: inline-size;
}

.hero-scene {
  position: relative;
  width: 70em;
  height: 49em;
  font-size: calc(100cqi / 70);
  transform-style: preserve-3d;
  transform: none;
  transition: transform 1.1s var(--ease-out);
}
.hero-scene.is-tilting {
  transform: perspective(2400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.hero-scene .device-mac { left: 1.5em; top: 1.5em; width: 58em; }
.hero-scene .device-phone { left: 52.5em; top: 15.5em; width: 15em; transform: translateZ(3.2em); }

.hero-work-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.6rem;
  margin-top: 1.1rem;
  padding-left: 3.49%;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.hero-work-caption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 27 47 / 0.3);
}
.hero-work-caption a:hover { text-decoration-color: var(--ink); }
.cap-pair { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }

/* Device frames: each is an inline-size container sized in cqi, so it scales as 1 drawing */

.device { position: absolute; container-type: inline-size; }

/* 14-inch MacBook Pro: lid 312.6mm, display 302.4 x 196.4mm, a 37 of 982pt camera band, page 1512 x 945 */
.device-mac { width: 58em; }
.mac-lid {
  position: relative;
  padding: 0.16cqi;
  border-radius: 2.2cqi 2.2cqi 0.55cqi 0.55cqi;
  background: linear-gradient(180deg, #e3e6ea 0%, #b9bec5 42%, #959ca5 100%);
  box-shadow: var(--shadow-device);
}
.mac-bezel {
  padding: 1.05cqi 1.47cqi 3.4cqi;
  border-radius: 2.05cqi 2.05cqi 0.4cqi 0.4cqi;
  background: #0b0d10;
  box-shadow: inset 0 0 0 0.09cqi rgb(255 255 255 / 0.07);
}
.mac-display {
  position: relative;
  overflow: hidden;
  border-radius: 1.15cqi 1.15cqi 0.18cqi 0.18cqi;
  background: #000;
}
.mac-band {
  position: relative;
  display: block;
  aspect-ratio: 1512 / 37;
  background: #030405;
}
.mac-cam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.6cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 34%, #33405a 0 16%, #111722 44%, #05070a 72%);
  box-shadow: 0 0 0 0.08cqi #0e1116;
}
.mac-screen {
  position: relative;
  aspect-ratio: 1512 / 945;
  overflow: hidden;
  background: #fff;
}
.mac-base {
  position: relative;
  z-index: 1;
  width: 104%;
  height: 2.5cqi;
  margin-left: -2%;
  border-radius: 0 0 50% 50% / 0 0 78% 78%;
  background: linear-gradient(180deg, #f2f4f6 0%, #d5dae0 30%, #a9b0b8 66%, #6f767f 100%);
  box-shadow: inset 0 -0.12cqi 0 rgb(15 27 47 / 0.28), inset 0 0.1cqi 0 rgb(255 255 255 / 0.9);
}
.mac-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  height: 0.3cqi;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f2328, #4d535b);
}
.mac-scoop {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15.5%;
  height: 0.95cqi;
  transform: translateX(-50%);
  border-radius: 0 0 1.3cqi 1.3cqi / 0 0 0.9cqi 0.9cqi;
  background: linear-gradient(180deg, #8f969e 0%, #bfc5cb 100%);
  box-shadow: inset 0 0.14cqi 0.22cqi rgb(15 27 47 / 0.22);
}
.mac-base::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 60%;
  height: 3.2cqi;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 30%, rgb(15 27 47 / 0.42), rgb(15 27 47 / 0) 100%);
}

/* iPhone 15/16: screen 393 x 852pt, 55pt corners, island 126 x 37pt at 11pt, 54pt status bar, page 393 x 798 */
.device-phone { width: 15em; }
.phone-frame {
  position: relative;
  padding: 2cqi;
  border-radius: 17.25cqi;
  background: linear-gradient(155deg, #22324f 0%, #0d1628 55%, #16223a 100%);
  box-shadow: inset 0 0 0 0.42cqi rgb(255 255 255 / 0.1), var(--shadow-device);
}
.phone-frame::before,
.phone-frame::after {
  content: "";
  position: absolute;
  width: 0.7cqi;
  border-radius: 0.4cqi;
  background: #1a2740;
}
.phone-frame::before { left: -0.55cqi; top: 22%; height: 13%; }
.phone-frame::after { right: -0.55cqi; top: 27%; height: 19%; }
.phone-glass {
  padding: 2.5cqi;
  border-radius: 15.25cqi;
  background: #05070b;
}
.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 12.74cqi;
  background: var(--status-band, #fff);
  isolation: isolate;
}
.phone-status {
  display: block;
  aspect-ratio: 393 / 54;
  color: var(--status-ink, #000);
  background: var(--status-band, #fff);
}
.phone-status svg { width: 100%; height: 100%; fill: currentColor; }
.phone-status text { font-family: var(--sans); font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }
.phone-island {
  position: absolute;
  z-index: 2;
  top: 2.547cqi;
  left: 50%;
  width: 29.18cqi;
  height: 8.57cqi;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.phone-capture {
  position: relative;
  aspect-ratio: 393 / 798;
  overflow: hidden;
  background: #fff;
}

/* Captures fill their slot at its own aspect. object-fit only guards sub-pixel rounding. */
.mac-screen img,
.phone-capture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* A static 6% glass highlight on each screen */
.glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.06) 27%, rgb(255 255 255 / 0) 44%);
}

/* The one-shot sheen rests outside the display and crosses it once */
.mac-sheen {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 50%;
  pointer-events: none;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 18%, rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0) 82%);
  transform: translateX(-100%);
}

/* ===== First impressions (#services): the promise beside a client's own words ===== */

/* Flow list checks: a currentColor check at 55%, no disc */
.checks {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
}
.checks li { display: flex; gap: 0.75rem; align-items: flex-start; text-wrap: pretty; }
.checks li::before {
  content: "";
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.2rem;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.4 8.4 3 3 6.2-6.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.4 8.4 3 3 6.2-6.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.feat-body {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: 1.125rem;
  color: var(--ink-2);
}
.feat-checks { margin-top: 1.9rem; max-width: 30em; color: var(--ink); }
.feat-checks strong { font-weight: 560; }
.feat-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.button-icon-down { width: 0.72rem; }
.button:hover .button-icon-down { transform: translateY(3px); }

/* The client's words set as a Flow proof figure */
.feat-proof { max-width: 44rem; }
.proof-quote blockquote {
  max-width: 15em;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 420;
  font-stretch: 110%;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--ink);
}
/* Display-size client words get hanging curly quotes, so they read as a quotation and not as TMN's own headline */
.proof-quote blockquote::before,
.testi-lead blockquote::before { content: "\201C"; margin-left: -0.45em; }
.proof-quote blockquote::after,
.testi-lead blockquote::after { content: "\201D"; }
.proof-quote figcaption {
  margin-top: 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-3);
}
.feat-fit {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.feat-trust {
  max-width: 30em;
  font-size: clamp(1.125rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.feat-trust em { font-weight: 560; color: var(--ink); }
.feat-audience {
  max-width: 38em;
  font-size: 1rem;
  color: var(--ink-2);
}
.feat-audience a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 27 47 / 0.35);
  transition: text-decoration-color 0.2s ease;
}
.feat-audience a:hover { text-decoration-color: var(--ink); }

@media (max-width: 899px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 3.25rem; }
}

@media (max-width: 640px) {
  .feat-body { font-size: 1.0625rem; }
  .feat-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 2rem; }
  .feat-cta .button { width: 100%; min-height: 52px; }
  .proof-quote figcaption { margin-top: 1.1rem; }
}

/* ===== Selected work (#work): the dark stage, driven by scroll, hover or focus only ===== */

.work {
  position: relative;
  background: var(--stage);
  color: var(--stage-ink);
  overflow: clip;
  isolation: isolate;
}
/* 7% film grain, a static image, never animated */
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.work-glow {
  position: absolute;
  z-index: -1;
  top: 16%;
  right: -14%;
  width: 72%;
  height: 74%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(201 164 76 / 0.16), rgb(201 164 76 / 0.04) 55%, transparent 75%);
}
/* The cursor spotlight: a fixed-size layer moved on transform, only while a fine pointer moves */
.work-light {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 68rem;
  height: 68rem;
  margin: -34rem 0 0 -34rem;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(201 164 76 / 0.11), rgb(201 164 76 / 0.04) 60%, transparent);
  opacity: 0;
  transform: translate3d(var(--lx, 70vw), var(--ly, 40vh), 0);
  transition: opacity 0.6s ease;
}
.work.has-light .work-light { opacity: 1; }

.work :focus-visible { outline-color: var(--gold); }

.work-intro { max-width: 46rem; }
.work-intro h2 { max-width: 19ch; color: #f4f7fb; }
/* .work raises specificity over the base .section p rule, which is ink on paper */
.work .work-intro p {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: 1.125rem;
  color: var(--stage-muted);
}

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.work-list { min-width: 0; }

.showcase { position: relative; padding-left: 2.6rem; }
/* The 1 shared "9:41" the slide status bars reference */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Flow's stage rail, scaled by scroll. Full without JS or with reduced motion. */
.work-rail {
  position: absolute;
  left: -1.5px;
  top: calc(max(240px, 28vh) / 2 - 1rem);
  bottom: calc(max(240px, 28vh) / 2 + 1rem);
  width: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.12);
  pointer-events: none;
}
.work-rail span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.8px), #fffaf0 calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(180deg, #e2c77f, #c9a44c 55%, #b8903a);
  box-shadow: 0 0 12px rgb(230 207 143 / 0.5);
  transform: scaleY(var(--rp, 1));
  transform-origin: top;
}

/* Each client row. The row is the existing link: name, sub-label and an arrow. */
.show-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 1.25rem;
  min-height: max(240px, 28vh);
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.show-row:focus-visible { outline-offset: 6px; }
.show-shot { display: none; }
.show-text { display: grid; gap: 0.6rem; min-width: 0; }
.show-title {
  position: relative;
  max-width: 15ch;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  font-weight: 440;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #f4f7fb;
  transition: color 0.4s ease;
}
.show-sub {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--stage-muted);
  transition: color 0.4s ease;
}
.show-arrow {
  width: 1.1rem;
  height: auto;
  margin-top: 0.8rem;
  align-self: start;
  color: var(--stage-muted);
  transition: transform 0.35s var(--ease-out), color 0.3s ease;
}
.show-arrow-out { width: 0.95rem; }
.show-row:hover .show-arrow { transform: translateX(3px); }
.show-row:hover .show-arrow-out { transform: translate(2px, -2px); }

/* The node on the rail beside each name */
.show-title::before {
  content: "";
  position: absolute;
  top: calc(0.54em - 7px);
  left: calc(-2.6rem - 6px);
  width: 14px;
  height: 14px;
  border: 2px solid rgb(238 242 247 / 0.28);
  border-radius: 50%;
  background: var(--stage);
  transition: border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}
.work:not(.is-railing) .show-title::before,
.show-row.is-reached .show-title::before,
.show-row.is-active .show-title::before {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 4px rgb(201 164 76 / 0.18), 0 0 18px rgb(230 207 143 / 0.55);
}

/* Inactive rows step back by color only: names 8.44:1, sub-labels 5.51:1 */
.work.is-tracking .show-title { color: var(--stage-muted); }
.work.is-tracking .show-sub { color: #808c9f; }
.work.is-tracking .show-row.is-active .show-title,
.work.is-tracking .show-row:focus-visible .show-title { color: var(--stage-ink); }
.work.is-tracking .show-row.is-active .show-sub,
.work.is-tracking .show-row:focus-visible .show-sub { color: var(--stage-muted); }
.show-row.is-active .show-arrow { color: var(--gold-2); }

.work-navigation { display: none; }

.work-footer { margin-top: 1.5rem; padding-left: 2.6rem; }

/* Room after the list, so the last row (Training Wheels ABA) reaches the center line while the pane is still
   stuck: half the pane plus half the header, less half a row and the 4.5rem footer, plus 1rem to spare */
@media (min-width: 1000px) {
  .work-list { padding-bottom: max(0px, calc(min(21rem, 42vh) + var(--header-h) / 2 - max(240px, 28vh) / 2 - 3.5rem)); }
}

/* Line button, stage variant: paper text and hairline on ink, paper fill on hover */
.button-stage {
  background: rgb(245 247 250 / 0.06);
  border-color: rgb(238 242 247 / 0.32);
  color: #f4f7fb;
}
.button-stage:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* The sticky visual: Flow's stage geometry, a 72em x 56em scene sized by its container */
.work-visual {
  position: sticky;
  top: calc(50vh - min(21rem, 42vh) + var(--header-h) / 2);
  align-self: start;
  height: min(42rem, 84vh);
}
.work-stage {
  position: relative;
  height: 100%;
  container-type: size;
}
.work-scene {
  position: absolute;
  inset: 0;
  width: 72em;
  height: 56em;
  margin: auto;
  font-size: min(calc(100cqw / 72), calc(100cqh / 56));
}
.work-scene .device-mac { left: 4em; top: 6.5em; width: 54em; }
.work-scene .device-phone { left: 53em; top: 18.5em; width: 15em; z-index: 2; }

/* On ink: a short contact shadow and a hairline rim, no halo */
.work-scene .mac-lid { box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 30px -18px rgb(0 0 0 / 0.7); }
.work-scene .phone-frame {
  box-shadow: inset 0 0 0 0.42cqi rgb(255 255 255 / 0.16), 0 0 0 1px rgb(238 242 247 / 0.1), 0 22px 34px -20px rgb(0 0 0 / 0.75);
}

/* 10 stacked shots per screen: the incoming shot fades over the outgoing one, the iPhone 120ms later */
.work-stage .mac-screen > .shot,
.work-stage .phone-capture > .shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear 0.45s, visibility 0s linear 0.45s;
}
.work-stage .phone-capture > .shot { transition: opacity 0s linear 0.57s, visibility 0s linear 0.57s; }
.work-stage[data-state="1"] [data-shot="1"],
.work-stage[data-state="2"] [data-shot="2"],
.work-stage[data-state="3"] [data-shot="3"],
.work-stage[data-state="4"] [data-shot="4"],
.work-stage[data-state="5"] [data-shot="5"],
.work-stage[data-state="6"] [data-shot="6"],
.work-stage[data-state="7"] [data-shot="7"],
.work-stage[data-state="8"] [data-shot="8"],
.work-stage[data-state="9"] [data-shot="9"],
.work-stage[data-state="10"] [data-shot="10"] {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out), visibility 0s;
}
.work-stage[data-state="1"] .phone-capture [data-shot="1"],
.work-stage[data-state="2"] .phone-capture [data-shot="2"],
.work-stage[data-state="3"] .phone-capture [data-shot="3"],
.work-stage[data-state="4"] .phone-capture [data-shot="4"],
.work-stage[data-state="5"] .phone-capture [data-shot="5"],
.work-stage[data-state="6"] .phone-capture [data-shot="6"],
.work-stage[data-state="7"] .phone-capture [data-shot="7"],
.work-stage[data-state="8"] .phone-capture [data-shot="8"],
.work-stage[data-state="9"] .phone-capture [data-shot="9"],
.work-stage[data-state="10"] .phone-capture [data-shot="10"] {
  transition: opacity 0.45s var(--ease-out) 0.12s, visibility 0s linear 0.12s;
}
.work-stage .glass { z-index: 2; }
.work-stage .phone-screen,
.work-stage .phone-status { transition: background-color 0.45s var(--ease-out) 0.12s, color 0.45s var(--ease-out) 0.12s; }
.work-stage[data-state="1"] .device-phone { --status-band: #fafaf9; --status-ink: #000000; }
.work-stage[data-state="2"] .device-phone { --status-band: #3c4b61; --status-ink: #ffffff; }
.work-stage[data-state="3"] .device-phone { --status-band: #1e1f2f; --status-ink: #ffffff; }
.work-stage[data-state="4"] .device-phone { --status-band: #eaece8; --status-ink: #000000; }
.work-stage[data-state="5"] .device-phone { --status-band: #3f4a4b; --status-ink: #ffffff; }
.work-stage[data-state="6"] .device-phone { --status-band: #555453; --status-ink: #ffffff; }
.work-stage[data-state="7"] .device-phone { --status-band: #061121; --status-ink: #ffffff; }
.work-stage[data-state="8"] .device-phone { --status-band: #0a1a10; --status-ink: #ffffff; }
.work-stage[data-state="9"] .device-phone { --status-band: #fbf9fc; --status-ink: #000000; }
.work-stage[data-state="10"] .device-phone { --status-band: #c0bdb4; --status-ink: #000000; }

/* Below 1000px: no pane, the rows become a swipe track of iPhone slides, moved only by the visitor */
@media (max-width: 999px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .work-visual { display: none; }
  .work-rail { display: none; }
  .showcase {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--rail) * -1);
    padding: 0.25rem var(--rail) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail);
    scrollbar-width: none;
  }
  .showcase::-webkit-scrollbar { display: none; }
  /* Trevor, Sep 30: smaller slides, so more shows on a phone. 2 iPhones side by side with the third
     peeking. The text column ends where the iPhone ends, so the arrow sits at the phone's right edge. */
  .show-row {
    flex: none;
    width: min(42vw, 200px);
    min-height: 0;
    padding: 0;
    grid-template-columns: minmax(0, calc(100% - 1.6rem)) 0.95rem;
    column-gap: 0.65rem;
    align-content: start;
    row-gap: 0.9rem;
    scroll-snap-align: start;
  }
  .show-shot { display: block; grid-column: 1 / -1; }
  .show-shot .device-phone { position: relative; width: 100%; }
  .show-shot .phone-frame {
    box-shadow: inset 0 0 0 0.42cqi rgb(255 255 255 / 0.16), 0 0 0 1px rgb(238 242 247 / 0.1), 0 18px 28px -18px rgb(0 0 0 / 0.75);
  }
  .show-title { max-width: none; font-size: 1.25rem; font-weight: 460; line-height: 1.12; }
  .show-title::before { display: none; }
  .show-text { gap: 0.4rem; }
  .show-sub { font-size: 0.9375rem; line-height: 1.4; }
  .show-arrow { width: 0.95rem; margin-top: 0.3rem; }
  .show-arrow-out { width: 0.8rem; }
  .work-navigation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .work-navigation button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(238 242 247 / 0.32);
    border-radius: var(--r-md);
    background: rgb(245 247 250 / 0.06);
    color: #f4f7fb;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .work-navigation button:hover { background: rgb(245 247 250 / 0.14); border-color: rgb(238 242 247 / 0.55); }
  .work-navigation button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
  .work-navigation button svg { width: 14px; height: auto; }
  #workPrevious svg { transform: rotate(180deg); }
  .work-count {
    min-width: 4.5em;
    font-size: 0.9375rem;
    font-weight: 560;
    text-align: center;
    color: var(--stage-muted);
  }
  .work-footer { margin-top: 1.75rem; padding-left: 0; }
}

@media (max-width: 640px) {
  .work .work-intro p { font-size: 1.0625rem; }
  .show-title { font-size: 1.125rem; }
  .show-sub { font-size: 0.875rem; }
}

/* ===== Pricing (#pricing): every price in plain view, in Flow's option-card language ===== */

.price-group-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  font-size: 1.25rem;
  font-weight: 580;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.price-group-label .pt-sub {
  font-size: 1.0625rem;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--ink-3);
}

.price-group--sites { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Prices are figures: "From" small and quiet, the amount as display type, in 1 element */
.pc-price { color: var(--ink); line-height: 1.1; }
.pc-from { font-size: 1.0625rem; font-weight: 450; color: var(--ink-3); }
.pc-num {
  font-size: clamp(2.35rem, 3.2vw, 2.9rem);
  font-weight: 420;
  font-stretch: 110%;
  letter-spacing: -0.035em;
}
.pc-unit { font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

/* The 3 website packages: unequal widths, 1 ink card, rows shared through subgrid */
.price-packages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.price-package {
  --sx: 50%;
  --sy: 0%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* Cursor edge light, only while a fine pointer moves */
.price-package::before,
.price-package::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.price-package::before {
  inset: -1px;
  z-index: 1;
  padding: 1px;
  background: radial-gradient(24rem circle at var(--sx) var(--sy), rgb(201 164 76 / 0.95), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.price-package::after {
  inset: 0;
  z-index: -1;
  background: radial-gradient(28rem circle at var(--sx) var(--sy), rgb(201 164 76 / 0.08), transparent 60%);
}
.price-package--ink::after { background: radial-gradient(30rem circle at var(--sx) var(--sy), rgb(230 207 143 / 0.16), transparent 60%); }
.price-package.is-lit::before,
.price-package.is-lit::after { opacity: 1; }

.price-package h3 {
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 460;
  font-stretch: 108%;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.price-package .pc-desc { margin-top: 0.85rem; max-width: 30em; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.price-package .pc-price { margin-top: 1.6rem; }
.pc-included { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.pc-included > summary { display: none; }
.pc-list { gap: 0.7rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.price-package .pc-cta { justify-self: start; align-self: start; margin-top: 1.4rem; }

/* The ink card: Flow's ink gradient, text on the stage palette, the gold button */
.price-package--ink {
  border-color: var(--ink);
  background: linear-gradient(160deg, #182843 0%, #0f1b2f 62%);
  color: var(--stage-ink);
  box-shadow: var(--shadow-2);
}
.price-package--ink .pc-desc,
.price-package--ink .pc-from { color: var(--stage-muted); }
.price-package--ink .pc-price,
.price-package--ink .pc-list,
.price-package--ink .pc-included > summary { color: var(--stage-ink); }
.price-package--ink .pc-num { color: #f4f7fb; }
.price-package--ink .pc-included { border-top-color: rgb(255 255 255 / 0.12); }
.price-package--ink :focus-visible { outline-color: var(--gold); }

/* 3 columns from 1200px, where every price holds 1 line and every action label fits on 1 line */
@media (min-width: 1200px) {
  .price-packages {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .price-packages { row-gap: 0; }
    .price-package { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* Narrower: 1 wide card per package, terms left, list right */
@media (min-width: 641px) and (max-width: 1199px) {
  .price-package {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "title list" "desc list" "price list" "cta list";
    column-gap: clamp(1.75rem, 4vw, 3rem);
  }
  .price-package h3 { grid-area: title; }
  .price-package .pc-desc { grid-area: desc; }
  .price-package .pc-price { grid-area: price; }
  .price-package .pc-included {
    grid-area: list;
    margin-top: 0;
    padding: 0.2rem 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid var(--line-2);
  }
  .price-package--ink .pc-included { border-left-color: rgb(255 255 255 / 0.12); }
  .price-package .pc-cta { grid-area: cta; }
}

/* Publishing + Care and Custom Platforms: a 2-column ledger on the same ground, no cards */
.price-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 4rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 900px) {
  .price-ledger {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}

.price-row { padding-block: clamp(1.4rem, 2.4vw, 1.9rem); }
.price-group-label + .price-row { padding-top: 1.1rem; }
.price-row + .price-row { border-top: 1px solid var(--line); }
.pr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
}
.price-row h3 {
  font-size: 1.35rem;
  font-weight: 560;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.price-row .pc-price { white-space: nowrap; }
.price-row .pc-num { font-size: clamp(1.65rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
.price-row .pc-desc { margin-top: 0.6rem; max-width: 34em; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.price-row .checks { gap: 0.55rem; margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.price-row .pc-included { margin-top: 0.9rem; padding-top: 0; border-top: 0; }
.price-row .pc-included .checks { margin-top: 0.35rem; padding-bottom: 0.4rem; }

.pr-cta,
.price-deep-link {
  font-weight: 580;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pr-cta { margin-top: 0.65rem; }
.pr-cta:hover,
.price-deep-link:hover { text-decoration-line: underline; text-decoration-color: rgb(15 27 47 / 0.35); }
.pr-cta svg[viewBox="0 0 12 12"] { width: 11px; }

.price-note {
  margin-top: 0.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  max-width: 40em;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.price-note .text-link { font-weight: 500; }

/* The disclosures and the full-pricing link stay visible at every width and height */
.price-foot {
  display: grid;
  gap: 1rem 3rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .price-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.price-disclosures {
  display: grid;
  gap: 0.45rem;
  max-width: 52em;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.price-deep-link { justify-self: start; white-space: nowrap; }

/* "What’s included": platforms always, packages at 640px and below */
.pc-included { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pc-included > summary,
.pc-included--row > summary {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 580;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.pc-included--row > summary { display: flex; justify-content: flex-start; gap: 0.6rem; min-height: 44px; }
.pc-included > summary::-webkit-details-marker { display: none; }
.pc-included > summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--chevron) center / 100% no-repeat;
  mask: var(--chevron) center / 100% no-repeat;
  transition: transform 0.4s var(--ease-out);
}
.pc-included[open] > summary::after { transform: rotate(180deg); }
.pc-included::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
}
.pc-included[open]::details-content { block-size: auto; }

@media (max-width: 640px) {
  .price-package { padding: 1.4rem 1.4rem 1.25rem; }
  .price-package .pc-desc { margin-top: 0.6rem; }
  .price-package .pc-num { font-size: 2.125rem; }
  .price-row .pc-included--care { margin-top: 0.5rem; }
  .pc-included--care > summary { display: flex; justify-content: flex-start; gap: 0.6rem; min-height: 44px; }
  .price-row .pc-included--care .checks { margin-top: 0.35rem; padding-bottom: 0.4rem; }
  .price-package .pc-price { margin-top: 1.3rem; }
  .price-package .pc-included { margin-top: 1.1rem; padding-top: 0.15rem; }
  .price-package .pc-included > summary { display: flex; }
  .price-package .pc-included .pc-list { padding: 0.35rem 0 0.5rem; }
  .price-package .pc-cta { justify-self: stretch; min-height: 52px; margin-top: 1.25rem; padding-inline: 1rem; }
  .price-package--ink .pc-included > summary:focus-visible { outline-color: var(--gold); }
  .price-deep-link { white-space: normal; }
}
@media (max-width: 360px) {
  .price-package { padding: 1.35rem; }
}

/* ===== Buyer guides: a quiet reading list ===== */

.guides-approach { margin-top: 2rem; }
/* Below about 350px the column is narrower than this 310px label, so it wraps inside the button instead of clipping */
@media (max-width: 359px) {
  .guides-approach { max-width: 100%; white-space: normal; line-height: 1.2; padding-block: 0.65rem; }
}
.guides-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 900px) {
  .guides-groups {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}
.guides-group h3 { margin-bottom: 0.9rem; }
.guide-links { display: grid; list-style: none; }
.guide-links li { border-top: 1px solid var(--line); }
.guide-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 56px;
  padding: 0.8rem 0;
  font-size: 1.0625rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.guide-links a:hover { text-decoration-line: underline; text-decoration-color: rgb(15 27 47 / 0.35); }
.guide-links svg {
  flex: none;
  width: 14px;
  height: auto;
  color: var(--ink-3);
  transition: transform 0.35s var(--ease-out), color 0.2s ease;
}
.guide-links a:hover svg { transform: translateX(3px); color: var(--ink); }
@media (min-width: 1100px) {
  .guides-group--planning .guide-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 2.5rem;
  }
}

/* ===== Process (#process): 1 plan card on a gold spine scrubbed by scroll ===== */

.proc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
/* The heading sits beside the plan from 1100px. Narrower, the plan takes the full width so its copy keeps a
   readable measure next to the stage column (it squeezed to about 150px at 920). */
@media (min-width: 1100px) {
  .proc-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .proc-intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.proc-plan {
  --plan-pad: clamp(1.25rem, 3vw, 2.25rem);
  position: relative;
  padding: 0.6rem var(--plan-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

/* Flow's rail material. The script sets its top and height from the first node to the last. */
.proc-spine {
  position: absolute;
  top: 2.8rem;
  bottom: 2.8rem;
  left: calc(var(--plan-pad) + 0.675rem - 2.5px);
  width: 5px;
  border-radius: 3px;
  background: #e4e9ef;
  pointer-events: none;
}
.proc-spine span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.8px), #fffaf0 calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(180deg, #e2c77f, #c9a44c 55%, #b8903a);
  transform: scaleY(var(--pp, 1));
  transform-origin: top;
}

.proc-list { display: grid; list-style: none; }
.proc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) minmax(0, 11.5rem);
  gap: 0.25rem 1.5rem;
  align-items: start;
  padding: 1.6rem 0;
}
.proc-row + .proc-row { border-top: 1px solid var(--line-2); }

.proc-node {
  position: relative;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--gold);
  transition: box-shadow 0.5s var(--ease-out), border-color 0.4s ease;
}

.proc-body h3 {
  font-size: 1.35rem;
  font-weight: 560;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.proc-body p { margin-top: 0.4rem; max-width: 34em; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

.proc-dur {
  align-self: center;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .proc-plan.is-tracking .proc-row:not(.is-reached) .proc-node {
    border-color: #c9d2dc;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #fff;
  }
}

@media (max-width: 640px) {
  .proc-row { grid-template-columns: 1.35rem minmax(0, 1fr); column-gap: 1rem; padding: 1.4rem 0; }
  .proc-dur { grid-column: 2; align-self: start; margin-top: 0.7rem; padding-left: 0; border-left: 0; font-size: 1rem; }
}

/* ===== Founders band: Studio, then The Standard, on 1 paper-2 ground ===== */

.studio { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.craft { padding-top: 0; }

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .studio-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
  }
}

/* The founders photo at its native 4:3, never wider than the 2x limit of its 800px file */
.studio-photo { max-width: 400px; }
.studio-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.studio-people { max-width: 400px; margin-top: 1.25rem; list-style: none; }
.studio-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
  padding: 0.8rem 0;
}
.studio-person + .studio-person { border-top: 1px solid var(--line); }
.studio-person strong {
  grid-column: 1;
  font-size: 1.25rem;
  font-weight: 580;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.studio-person > span { grid-column: 1; font-size: 1rem; line-height: 1.45; color: var(--ink-3); }
.studio-ln {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.studio-ln:hover { color: var(--ink); background: rgb(15 27 47 / 0.05); }
.studio-ln svg { width: 20px; height: 20px; }

.studio-copy h2 { max-width: 13ch; }
@media (min-width: 960px) {
  .studio-copy h2 br { display: none; }
  /* With the break hidden, a real space keeps "people." and "One" apart */
  .studio-copy h2 em::before { content: " "; }
}
.studio-lead {
  margin-top: 1.5rem;
  max-width: 28em;
  font-size: clamp(1.125rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.craft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .craft-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
  }
}
.craft-lead { margin-top: 1.5rem; max-width: 30em; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }

/* The 5-row ledger: each figure set as display type, its line beside it, 1 hairline between rows */
.standard-ledger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: -0.4rem;
}
/* The rows share 2 columns, so each line starts just past the widest figure */
.standard-ledger > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 1.3rem 0;
}
.standard-ledger > div + div { border-top: 1px solid var(--line); }
.standard-ledger dt {
  font-size: clamp(1.75rem, 2.3vw, 2.1rem);
  font-weight: 460;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.standard-ledger dd { font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); }

@media (max-width: 640px) {
  .standard-ledger { grid-template-columns: minmax(0, 1fr); }
  .standard-ledger > div { grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; padding: 1.1rem 0; }
}

/* Footer */

.foot {
  padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 2.15fr) minmax(0, 0.85fr) minmax(0, 0.7fr);
  gap: 2.5rem clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: start;
}

.foot-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}
.foot-logo img { width: 74px; height: auto; }
.foot-logo span:last-child {
  font-size: 1.2rem;
  font-weight: 620;
  font-stretch: 110%;
  letter-spacing: -0.02em;
}
.foot-brand p {
  margin-top: 1rem;
  max-width: 24em;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.foot-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--ink);
}

.foot-col h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
}
.foot-col summary { list-style: none; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-links {
  display: grid;
  margin-top: 0.6rem;
}
/* A link that wraps grows its row, so wrapped and single-line rows keep the same gap */
.foot-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 6px;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-links--industries { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-3);
}
.foot-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(51 65 90 / 0.35);
}
.foot-bar a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.foot-sig { margin-left: auto; }

/* TMN signature under the footer: the brand mark the pre-Flow footer carried (7a0689b), restored as a gold outline.
   The build writes it into the page footer (scripts/footer-signature.mjs). The settled frame is the finished outline: no-JS, reduced motion and a
   mark already on screen at load all show it. A mark that starts below the viewport is armed (undrawn) and draws
   itself once as it enters, with 1 sheen through the letters (about 3.3s, CSS only, no loop), then stays still. */
.foot-mark {
  width: min(100% - 2 * var(--rail), 560px);
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  pointer-events: none;
}
.tmn-sig { display: block; width: 100%; height: auto; aspect-ratio: 400 / 120; overflow: visible; }
.tmn-sig-text {
  font-family: var(--sans);
  font-size: 104px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-anchor: middle;
  dominant-baseline: central;
}
/* Flow Sans builds some glyphs (the T) from overlapping contours. Painting the stroke first and filling the letters
   with the footer's paper hides those inner seams, so only the outer outline shows (the stroke is doubled to keep
   its visible weight). Every footer ground is paper. */
.tmn-sig-line { fill: var(--paper); stroke: url(#tmnSigGold); stroke-width: 2.3; stroke-linejoin: round; paint-order: stroke; }
.tmn-sig-sheen { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .foot-mark.is-armed .tmn-sig-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  .foot-mark.is-playing .tmn-sig-line { stroke-dasharray: 1200; animation: tmn-sig-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .foot-mark.is-playing .tmn-sig-sheen { animation: tmn-sig-sheen 1.2s cubic-bezier(0.45, 0, 0.25, 1) 2.1s both; }
}
@keyframes tmn-sig-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes tmn-sig-sheen {
  0% { opacity: 0; transform: translateX(0); }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(520px); }
}
@media print { .foot-mark { display: none; } }

@media (min-width: 1180px) {
  .foot-links a { font-size: 0.875rem; }
}

@media (max-width: 1179px) {
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand p { max-width: 36em; }
  .foot-links--industries { grid-template-columns: minmax(0, 1fr); }
  .foot-sig { margin-left: 0; }
}

@media (min-width: 821px) {
  .foot-col summary { pointer-events: none; cursor: default; }
}

@media (max-width: 820px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .foot .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .foot-col--disclosure { border-top: 1px solid var(--line); }
  .foot-col--disclosure + .foot-col--disclosure { margin-top: -2rem; }
  .foot-col--disclosure:last-of-type { border-bottom: 1px solid var(--line); }
  .foot-col summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
  }
  .foot-col summary::after {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.35s var(--ease-out);
  }
  .foot-col[open] summary::after { transform: rotate(180deg); }
  .foot-col--disclosure .foot-links { margin-top: 0; padding-bottom: 0.75rem; }
  .foot-links--industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 0; }
}

@media (max-width: 900px) {
  .foot { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 340px) {
  .foot .foot-links { grid-template-columns: minmax(0, 1fr); }
}

/* Sticky mobile CTA */

.stk {
  display: none;
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px var(--rail) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.stk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(245 247 250 / 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.stk.is-visible {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.stk .button { width: 100%; min-height: 52px; }

@media (max-width: 900px) {
  .stk { display: block; }
}

/* Text links shared by pricing and publishing */
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 27 47 / 0.35);
  transition: text-decoration-color 0.2s ease;
}
.text-link:hover { text-decoration-color: var(--ink); }
.inline-arrow { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.inline-arrow svg { width: 14px; height: auto; transition: transform 0.35s var(--ease-out); }
.inline-arrow:hover svg { transform: translateX(3px); }

/* ===== Publishing (#publishing) ===== */
.pub-grid,
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.pub-checks { margin-top: 1.9rem; max-width: 34em; color: var(--ink-2); }
.pub-checks strong { font-weight: 600; color: var(--ink); }
.pub-note {
  margin-top: 2.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  max-width: 34em;
  font-size: 1rem;
  color: var(--ink-2);
}
.pub-shot {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.pub-shot:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgb(15 27 47 / 0.05), 0 18px 40px -12px rgb(15 27 47 / 0.2), 0 52px 100px -30px rgb(15 27 47 / 0.26);
}
.pub-shot:focus-visible { border-radius: var(--r-lg); }
.pub-shot img { width: 100%; height: auto; }
.pub-proof figcaption { margin-top: 1.6rem; max-width: 36em; color: var(--ink-2); }
.pub-proof figcaption strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  font-weight: 580;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pub-more { margin-top: 0.35rem; font-weight: 560; }

/* ===== Testimonials (#testimonials): 1 lead quote, then 8 unboxed quotes in 2 columns ===== */
.testi-proof { margin-top: 1.4rem; font-size: 1.125rem; font-weight: 540; color: var(--ink-2); }
.testi-proof a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 27 47 / 0.35);
}
.testi-proof a:hover { text-decoration-color: var(--ink); }
.tacc-foot-item { white-space: nowrap; }
.testi-lead { max-width: 66.667%; margin-top: clamp(2.5rem, 4.5vw, 3.25rem); }
.testi-lead blockquote {
  font-size: 1.5rem;
  font-weight: 420;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.testimonial figcaption { margin-top: 1rem; line-height: 1.45; }
.t-name, .t-role { display: block; }
.t-name { font-weight: 600; color: var(--ink); }
.t-role { color: var(--ink-3); }
.testi-flow { margin-top: clamp(2.75rem, 5vw, 3.75rem); }
.testi-flow > figure { break-inside: avoid; padding: 1.3rem 0 1.9rem; border-top: 1px solid var(--line); }
.testi-flow blockquote { color: var(--ink-2); }
.testi-flow blockquote em { color: var(--ink); }

/* Below 900px the script folds quotes 2 to 9 into closed disclosures */
.testi-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
  min-height: 44px;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
  border-radius: 6px;
}
.testi-row .t-name, .testi-row .t-role { grid-column: 1; }
.testi-row summary svg { grid-column: 2; grid-row: 1 / 3; }
.testi-row blockquote { padding-bottom: 1.5rem; }

/* ===== FAQ (#faq): a sticky heading beside native disclosures, 1 open at a time ===== */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq .faq-head p { margin-top: 1.4rem; font-size: 1.125rem; }
.faq-list { margin-top: -1.2rem; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.25rem 0;
  font-size: 1.2rem;
  font-weight: 540;
  letter-spacing: -0.012em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  border-radius: 6px;
}
.faq-item summary::-webkit-details-marker,
.testi-row summary::-webkit-details-marker { display: none; }
.faq-item summary svg,
.testi-row summary svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--ink-3); transition: transform 0.4s var(--ease-out); }
.faq-item[open] summary svg,
.testi-row[open] summary svg { transform: rotate(180deg); }
.faq .faq-a p { max-width: 42em; padding-bottom: 1.6rem; color: var(--ink-2); }

/* Height transition where supported, an instant toggle elsewhere */
.faq-item::details-content,
.testi-row::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
}
.faq-item[open]::details-content,
.testi-row[open]::details-content { height: auto; }

/* ===== Contact (#contact): the card, the form, the thread between them ===== */
.contact {
  background: radial-gradient(50% 60% at 85% 20%, rgb(201 164 76 / 0.08), transparent 70%), var(--paper-2);
}
.ct-grid { position: relative; align-items: start; }
.ct-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.ct-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-halo { stroke: rgb(201 164 76 / 0.16); stroke-width: 14; }
.ct-body { stroke: url(#ct-gold); stroke-width: 5; }
.ct-core { stroke: var(--thread-core); stroke-width: 1.6; }
.ct-node { fill: #fff; stroke: var(--gold); stroke-width: 2.5; }
.ct-thread.is-tracking path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct-thread.is-tracking:not(.is-started) { visibility: hidden; }
.ct-thread.is-tracking .ct-node { opacity: 0; transition: opacity 0.3s ease; }
.ct-thread.is-landed .ct-node { opacity: 1; }
.ct-lead { margin-top: 1.4rem; max-width: 30em; font-size: 1.125rem; color: var(--ink-2); }
.ct-points { margin-top: 1.9rem; }
.ct-card {
  margin-top: 2.5rem;
  padding: 0.4rem 1.5rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.ct-line {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 56px;
  font-size: 1.125rem;
  font-weight: 560;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ct-line + .ct-line { border-top: 1px solid var(--line-2); }
.ct-line svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--ink-3); }
.ct-line:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ct-book { width: 100%; margin-top: 0.9rem; }

/* The form: a white 28px card, labels above 52px fields */
.form-card {
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.fg { display: grid; gap: 0.45rem; margin-bottom: 1.15rem; min-width: 0; align-content: start; }
.fg label { font-size: 0.95rem; font-weight: 560; color: var(--ink); }
.fg input,
.fg select,
.fg textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #c9d3de;
  border-radius: var(--r-md);
  background-color: #fbfcfd;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.fg textarea { min-height: 7.5rem; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.fg select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2333415a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 16px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.fg input::placeholder,
.fg textarea::placeholder { color: #5d697a; opacity: 1; }
.fg input:hover,
.fg select:hover,
.fg textarea:hover { border-color: #9fadbe; }
.fg input:focus-visible,
.fg select:focus-visible,
.fg textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(201 164 76 / 0.35);
}
.fg [aria-invalid="true"] { border-color: var(--danger); background-color: #fff8f7; }
.field-error { font-size: 0.9rem; font-weight: 500; color: var(--danger); }
.field-error:empty { display: none; }
.ai-prompt-help { font-size: 0.875rem; color: var(--ink-3); }
.hp-field { display: none !important; }
.consent-links { display: flex; gap: 1.25rem; margin: 0 0 1rem; }
.consent-links a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-underline-offset: 3px;
}
.consent-links a:hover { color: var(--ink); }
.form-submit { width: 100%; }

@media (max-width: 899px) {
  .pub-grid,
  .faq-grid,
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-grid { gap: 3.25rem; }
  .faq-head { position: static; }
  .faq-list { margin-top: 0; }
  .ct-thread { display: none; }
  .ct-card { max-width: 30rem; }
  .testi-lead { max-width: 40em; }
  .testi-lead blockquote { font-size: 1.25rem; line-height: 1.45; }
  .testi-flow { margin-top: 2.5rem; border-bottom: 1px solid var(--line); }
  .testi-flow > figure { padding: 0; }
  .testi-flow > figure > blockquote { padding-top: 1.25rem; }
  .testi-flow > figure > figcaption { padding-bottom: 1.5rem; }
}

@media (max-width: 400px) {
  .form-card { padding-inline: 1.25rem; }
  .form-submit { padding-inline: 1rem; white-space: normal; line-height: 1.2; text-align: center; }
}
@media (max-width: 360px) {
  .form-submit { gap: 0.45rem; padding-inline: 0.75rem; font-size: 1rem; }
}
/* 340px and below: the decorative arrow gives way so the label stays on 1 line */
@media (max-width: 340px) {
  .form-submit .button-icon { display: none; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .faq-item summary { padding: 1rem 0; font-size: 1.0625rem; }
  .testi-row summary { padding: 0.85rem 0; }
  .fg { margin-bottom: 1rem; }
  .testi-lead blockquote { font-size: 1.125rem; }
  .ct-card { margin-top: 2rem; }
  .ct-card { padding-inline: 1.25rem; }
  .ct-line { font-size: 1.0625rem; }
}

/* ===== Case-study band (start-a-project, industry pages): the page's single dark band, a list of client links
   beside 1 CSS MacBook that shows the row under a moving mouse or keyboard focus. tmn-home.js wires it. ===== */
.sw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sw-list {
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(238 242 247 / 0.12);
}
.sw-list li { border-bottom: 1px solid rgb(238 242 247 / 0.12); }

.sw-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  padding: 0.9rem 0.25rem 0.9rem 1.25rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* The selected row carries Flow's gold rail material */
.sw-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  bottom: 0.95rem;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-a));
  transform: scaleY(0);
  transition: transform 0.45s var(--ease-out);
}
.sw-row.is-active::before { transform: none; }
.sw-row:focus-visible { outline-offset: 2px; }

.sw-thumb { display: none; }
.sw-text { display: grid; gap: 0.2rem; min-width: 0; }
.sw-text strong {
  font-size: 1.1875rem;
  font-weight: 560;
  font-stretch: 106%;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #f4f7fb;
  transition: color 0.3s ease;
}
.sw-text span {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--stage-muted);
  transition: color 0.3s ease;
}
.sw-arrow {
  flex: none;
  width: 1rem;
  height: auto;
  color: var(--stage-muted);
  transition: transform 0.35s var(--ease-out), color 0.3s ease;
}
.sw-row:hover .sw-arrow { transform: translateX(3px); color: var(--gold-2); }
.sw-row.is-active .sw-arrow { color: var(--gold-2); }

/* Rows step back by color only while the screen follows the visitor: names 8.44:1, lines 5.51:1 */
.sw-list.is-tracking .sw-row[data-sw]:not(.is-active) .sw-text strong { color: var(--stage-muted); }
.sw-list.is-tracking .sw-row[data-sw]:not(.is-active) .sw-text span { color: #808c9f; }

.sw-visual { display: none; }

/* The MacBook: the home page's frame, set in flow and sized by its column */
.sw-stage .device { position: relative; width: 100%; }
.sw-stage .mac-screen > [data-shot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.sw-stage .mac-screen > picture[data-shot] img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sw-stage .glass { z-index: 2; }
.sw-stage[data-state="1"] [data-shot="1"],
.sw-stage[data-state="2"] [data-shot="2"],
.sw-stage[data-state="3"] [data-shot="3"],
.sw-stage[data-state="4"] [data-shot="4"],
.sw-stage[data-state="5"] [data-shot="5"],
.sw-stage[data-state="6"] [data-shot="6"],
.sw-stage[data-state="7"] [data-shot="7"],
.sw-stage[data-state="8"] [data-shot="8"],
.sw-stage[data-state="9"] [data-shot="9"],
.sw-stage[data-state="10"] [data-shot="10"] { opacity: 1; }

@media (min-width: 900px) {
  .sw-grid {
    grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .sw-visual { display: block; }
}

/* Phones and small tablets: each row shows its own capture */
@media (max-width: 899px) {
  .sw-row {
    grid-template-columns: min(36vw, 220px) minmax(0, 1fr) auto;
    gap: 0.9rem;
    min-height: 0;
    padding: 0.85rem 0;
  }
  .sw-row::before { display: none; }
  .sw-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    background: #121c2e;
    box-shadow: 0 0 0 1px rgb(238 242 247 / 0.1);
  }
  .sw-text strong { font-size: 1.0625rem; }
  .sw-text span { font-size: 0.875rem; }
}

@media (max-width: 400px) {
  .sw-row { grid-template-columns: min(34vw, 220px) minmax(0, 1fr); }
  .sw-arrow { display: none; }
}

/* ===== Desktop density. Trevor, Sep 30: "smaller font or more compact so more of it fits on the desktop screen".
   From pricing on, body, list, price and card type step down 1 notch and the rhythm tightens at 900px and up.
   The H2 scale, the hero and the stage keep Flow's sizes. ===== */
@media (min-width: 900px) {
  /* Pricing */
  .price .section-intro p { margin-top: 1.1rem; font-size: 1.0625rem; }
  .price-group--sites { margin-top: 2.25rem; }
  .price-group-label { font-size: 1.125rem; }
  .price-group-label .pt-sub { font-size: 1rem; }
  .price-packages { gap: 1rem; margin-top: 0.85rem; }
  .price-package { padding: 1.75rem 1.75rem 1.9rem; }
  .price-package h3 { font-size: 1.5rem; }
  .price-package .pc-desc { margin-top: 0.55rem; font-size: 0.9375rem; line-height: 1.5; }
  .price-package .pc-price { margin-top: 1.1rem; }
  .pc-from,
  .pc-unit { font-size: 0.9375rem; }
  .price-package .pc-num { font-size: 2.125rem; }
  .price-package .pc-cta { margin-top: 1.1rem; }
  .pc-list { gap: 0.4rem; font-size: 0.9375rem; line-height: 1.45; }
  .pc-list li::before,
  .price-row .checks li::before { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; }

  .price-ledger { margin-top: 3.25rem; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .price-row { padding-block: 1.1rem 1.2rem; }
  .price-group-label + .price-row { padding-top: 0.55rem; }
  .price-row h3 { font-size: 1.1875rem; }
  .price-row .pc-num { font-size: 1.5rem; }
  .price-row .pc-desc { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.5; }
  .price-row .checks { gap: 0.3rem; margin-top: 0.65rem; font-size: 0.9375rem; line-height: 1.45; }
  .price-row .pc-included { margin-top: 0.3rem; }
  .pc-included--row > summary { font-size: 0.9375rem; }
  .pr-cta { margin-top: 0.15rem; font-size: 0.9375rem; }
  /* The hairline spans the column, the text keeps its measure */
  .price-note {
    max-width: none;
    margin-top: 0.2rem;
    padding: 1rem max(0px, calc(100% - 42em)) 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .price-foot { margin-top: 2.5rem; padding-top: 1.25rem; }
  .price-disclosures { gap: 0.25rem; font-size: 0.875rem; line-height: 1.5; }
  .price-deep-link { font-size: 0.9375rem; }

  /* Buyer guides */
  .guides .section-intro p { margin-top: 1.1rem; font-size: 1.0625rem; }
  .guides-approach { margin-top: 1.5rem; }
  .guides-groups { margin-top: 2.75rem; }
  .guides-group h3 { margin-bottom: 0.55rem; font-size: 1.125rem; }
  .guide-links a { min-height: 48px; padding: 0.6rem 0; font-size: 1rem; }

  /* Process */
  .proc-row { padding: 1.25rem 0; }
  .proc-body h3 { font-size: 1.2rem; }
  .proc-body p { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.55; }
  .proc-dur { font-size: 1rem; }

  /* Studio and The Standard */
  .studio-lead { font-size: 1.125rem; }
  .craft-grid { padding-top: clamp(3.5rem, 6vw, 4.75rem); }
  .craft-lead { margin-top: 1.2rem; font-size: 1.0625rem; }
  .standard-ledger > div { padding: 1.05rem 0; }
  .standard-ledger dt { font-size: clamp(1.6rem, 2vw, 1.85rem); }
  .standard-ledger dd { font-size: 1rem; }

  /* Publishing: a wider copy column keeps both actions on 1 row at 1440 */
  .pub-grid { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .pub .feat-body { margin-top: 1.2rem; font-size: 1.0625rem; }
  .pub-checks { gap: 0.65rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.55; }
  .pub .feat-cta { margin-top: 1.75rem; }
  .pub-note { max-width: none; margin-top: 1.75rem; padding: 1.1rem max(0px, calc(100% - 36em)) 0 0; font-size: 0.9375rem; }
  .pub-proof figcaption { margin-top: 1.25rem; font-size: 1rem; }
  .pub-proof figcaption strong { font-size: 1.125rem; }

  /* Testimonials */
  .testi-proof { margin-top: 1.2rem; font-size: 1.0625rem; }
  .testi-lead { margin-top: 2.25rem; }
  .testi-lead blockquote { font-size: 1.3125rem; line-height: 1.45; }
  .testi-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    margin-top: 2.25rem;
  }
  .testi-flow > figure { padding: 1.1rem 0 1.5rem; }
  .testi-flow blockquote { font-size: 1rem; line-height: 1.55; }
  .testimonial figcaption { margin-top: 0.7rem; font-size: 0.9375rem; }

  /* FAQ */
  .faq .faq-head p { margin-top: 1.1rem; font-size: 1.0625rem; }
  .faq-list { margin-top: -1rem; }
  .faq-item summary { padding: 1rem 0; font-size: 1.0625rem; }
  .faq .faq-a p { padding-bottom: 1.25rem; font-size: 1rem; }

  /* Contact */
  .ct-lead { margin-top: 1.2rem; font-size: 1.0625rem; }
  .ct-points { gap: 0.6rem; margin-top: 1.5rem; font-size: 1rem; }
  .ct-card { margin-top: 2rem; }
  .ct-line { min-height: 52px; font-size: 1.0625rem; }
  .form-card { padding: 2.25rem; }
  .fg { margin-bottom: 1rem; }
  .fg label { font-size: 0.9375rem; }
  .fg textarea { min-height: 6.5rem; }
}

/* 3 package columns: the included list sits under its own action */
/* Testimonials, 900px and up: Don's lead quote sits beside the heading as the band's figure, in place of a
   body-size paragraph next to an empty half. The 8 quotes follow below in their 2 columns. Phones keep the open
   lead quote and the folded rows. */
@media (min-width: 900px) {
  /* The same 2 columns as the flow below, so the lead quote starts on the second column's line */
  .testimonials .shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .testi-head { grid-column: 1; grid-row: 1; }
  .testi-lead { grid-column: 2; grid-row: 1; max-width: none; margin-top: 0.4rem; }
  .testi-lead blockquote { font-size: clamp(1.3125rem, 1.65vw, 1.5rem); font-stretch: 104%; line-height: 1.42; letter-spacing: -0.016em; }
  .testi-flow { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .price-package .pc-included { margin-top: 1.35rem; padding-top: 1.15rem; }
}

/* Load choreography and reveals. Hidden states only under html.motion-ready. */

@media (prefers-reduced-motion: no-preference) {
  .hero .display { animation: focus-in 1.1s var(--ease-out) both; }
  .hero-deck { animation: focus-up 1s var(--ease-out) 0.18s both; }
  .hero-ctas { animation: focus-up 1s var(--ease-out) 0.28s both; }
  .hero-cta-note { animation: focus-up 1s var(--ease-out) 0.36s both; }
  .hero-stage { animation: stage-in 1.2s var(--ease-out) 0.1s both; }
  .hero-scene .device-phone { animation: phone-settle 1.1s var(--ease-out) 0.25s both; }
  .hero-light { animation: light-in 1.6s ease 0.1s both; }

  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
  .motion-ready .split .wi {
    transform: translateY(108%);
    transition: transform 0.95s var(--ease-out);
    transition-delay: calc(var(--wi, 0) * 55ms);
  }
  .motion-ready .split.is-visible .wi { transform: none; }
}

.split .w {
  display: inline-block;
  overflow-x: visible;
  overflow-y: clip;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: top;
}
.split .wi { display: inline-block; }

@keyframes focus-in { from { transform: translateY(0.22em); } to { transform: none; } }
@keyframes focus-up { from { transform: translateY(14px); } to { transform: none; } }
@keyframes stage-in { from { transform: translateY(28px) scale(0.98); } to { transform: none; } }
@keyframes phone-settle { from { translate: 0 2.4em; } to { translate: 0 0; } }
@keyframes light-in { from { opacity: 0; } to { opacity: 1; } }

/* Responsive hero */

@media (max-width: 1099px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .hero-ctas { display: grid; grid-template-columns: max-content; }
}

@media (max-width: 899px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-visual { max-width: 44rem; }
  .hero-light { inset: 30% -30% auto -10%; height: 90%; }
}

@media (max-width: 640px) {
  .display { font-size: clamp(2.25rem, 11.2vw, 3.6rem); }
  .hero-deck { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.45; }
  .hero-ctas { margin-top: 1.75rem; }
  .hero-ctas .button-lg { min-height: 52px; }
}

@media (max-width: 430px) {
  .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-ctas .button { width: 100%; }
}

/* Phones: the scene recomposes, iPhone in front left, MacBook behind right and higher */
@media (max-width: 899px) {
@container (max-width: 560px) {
  .hero-scene {
    width: 40em;
    height: 48em;
    font-size: calc(100cqi / 40);
    transform: none;
  }
  /* The hero's clip cuts the MacBook at the viewport edge, not mid-page */
  .hero-scene .device-mac { left: 11.5em; top: 0; width: 31em; }
  .hero-scene .device-phone { left: 0.5em; top: 9.5em; width: 18.4em; transform: none; z-index: 2; }
  .hero-scene .mac-lid { box-shadow: 0 2px 4px rgb(15 27 47 / 0.08), 0 18px 36px -16px rgb(15 27 47 / 0.3); }
}
}

@media (max-width: 899px) {
  .hero-work-caption { padding-left: 0; }
}

/* Reduced motion: the settled frame, instantly */

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