:root {
    --canvas: #F5F5F7;
    --frame: #FFFFFF;
    --sunken: #F5F5F7;
    --raise: #FFFFFF;
    --text: #1D1D1F;
    --ink: #000000;   /* true black: logo, menu and black buttons */
    --muted: #6E6E73;
    --faint: #A1A1A6;
    --hairline: rgba(0, 0, 0, .055);
    --border: #D2D2D7;
    --ring: rgba(0, 0, 0, .045);
    --focus: #0071E3;
    --glow: rgba(0, 113, 227, .08);
    --shadow-nav: 0 4px 20px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
    --shadow-frame: 0 16px 44px rgba(0, 0, 0, .08);
    --shadow-chip: 0 3px 12px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, .07), 0 2px 8px rgba(0, 0, 0, .04);
  }
  /* Light is the default regardless of OS setting; dark is opt-in via the toggle. */
  :root[data-theme="dark"] {
    --canvas: #000000; --frame: #000000; --sunken: #1D1D1F; --raise: #1D1D1F;
    --text: #F5F5F7; --ink: #F5F5F7; --muted: #86868B; --faint: #6E6E73;
    --hairline: rgba(255, 255, 255, .08); --border: #424245; --ring: rgba(255, 255, 255, .06);
    --focus: #2997FF; --glow: rgba(41, 151, 255, .12);
    --shadow-nav: 0 4px 20px rgba(0, 0, 0, .5); --shadow-frame: none;
    --shadow-chip: 0 4px 14px rgba(0, 0, 0, .45); --shadow-card: 0 16px 44px rgba(0, 0, 0, .55);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  * { -webkit-tap-highlight-color: transparent; }

  /* ---- Touch: make the page behave like a plain scrollable document. ----
     A tap that drifts a pixel or lingers was starting a text selection / a
     tap-highlight / an element focus, and the browser then scrolled that
     into view — felt like the page "redirecting" to another section. On
     touch: nothing is selectable or long-press-able by default, scrolling
     is never animated, and only vertical panning is a gesture. Real reading
     content is opted back into selection. */
  @media (hover: none) {
    html { scroll-behavior: auto; }
    html, body { touch-action: pan-y; }
    body {
      -webkit-user-select: none; user-select: none;
      -webkit-touch-callout: none;
    }
    p, li .t, .desc, h1, h2, h3, h4, blockquote, figcaption, code, pre,
    td, th, input, textarea, select, [contenteditable] {
      -webkit-user-select: text; user-select: text;
    }
    /* the horizontal scrollers still need to pan sideways */
    .stack, .stack-track, .compare-scroll, .cmp-cards, [data-canvas] {
      touch-action: pan-x pan-y;
    }
  }

  body {
    margin: 0;
    background: var(--frame);
    color: var(--text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
    padding: 0;
  }

  .frame {
    --fp: clamp(1.15rem, 5vw, 3.25rem);
    max-width: 1280px;
    margin: 0 auto;
    background-color: var(--frame);
    padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1.15rem, 5vw, 3.25rem) clamp(2.5rem, 6vw, 4rem);
    overflow: clip;
  }

  ::selection { background: var(--focus); color: #fff; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

  .serif {
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
  }

  .eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    background: var(--frame);
    border-radius: 999px;
    padding: .35rem .8rem;
  }
  .eyebrow-pill::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--text);
    rotate: 45deg;
  }

  .btn {
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: .62rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
  }
  .btn--solid { background: var(--ink); color: var(--frame); }
  .btn--solid:hover { opacity: .88; }
  .btn--ghost { background: var(--frame); border-color: var(--border); color: var(--text); }
  .btn--ghost:hover { background: var(--sunken); }

  /* ---------- Top veil: progressive frosted glass ----------
     A fixed band across the very top. Frosting is strongest at the top edge
     and fades to nothing, so content scrolling up dissolves into blur under
     the header instead of being cut off. Three blur layers with staggered
     masks give a smooth ramp (a single blur would show a hard lower edge). */
  html { overflow-x: hidden; }
  /* iPhone Safari widens the layout (and nudges everything off-centre) if anything pokes past the edge; lock the page to the screen width on small screens */
  @media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { position: relative; width: 100%; }
    html { touch-action: pan-y pinch-zoom; }
    .hero-actions { flex-wrap: wrap; row-gap: .6rem; }
  }
  html.menu-open { overflow: hidden; }
  .nav-veil {
    position: fixed; top: 0; left: 0; right: 0; z-index: 49; pointer-events: none;
    height: calc(env(safe-area-inset-top, 0px) + 100px);
  }
  .nav-veil i { position: absolute; inset: 0; }
  .nav-veil i:nth-child(1) {
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 58%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 58%);
  }
  .nav-veil i:nth-child(2) {
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 80%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 80%);
  }
  .nav-veil i:nth-child(3) {
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }
  /* the tint: near-solid paper at the top easing out to clear */
  .nav-veil::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--frame) 90%, transparent) 0%,
      color-mix(in srgb, var(--frame) 72%, transparent) 34%,
      color-mix(in srgb, var(--frame) 30%, transparent) 70%,
      transparent 100%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-veil::before { background: linear-gradient(to bottom, var(--frame) 0%, color-mix(in srgb, var(--frame) 85%, transparent) 45%, transparent 100%); }
  }

  /* ---------- Nav (plain bar, sits on the frosted veil) ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    /* line the brand and links up with the page frame (max 1280px + its padding) */
    padding: calc(env(safe-area-inset-top, 0px) + 14px)
             max(clamp(1.15rem, 5vw, 3.25rem), calc(50% - 640px + clamp(1.15rem, 5vw, 3.25rem)))
             12px;
    background: none; border: 0; box-shadow: none;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-links { background: color-mix(in srgb, var(--frame) 97%, transparent) !important; }
  }

  .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .98rem; letter-spacing: -.02em; flex: none; color: var(--ink); }
  .brand svg { width: 23px; height: 23px; display: block; }

  .nav-links {
    display: flex; align-items: center; gap: .15rem; margin-left: auto;
    max-width: 780px; opacity: 1; overflow: hidden;
    transition: max-width .44s cubic-bezier(.2,.7,.2,1), opacity .24s ease;
  }
  .nav-links a {
    font: inherit; color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap; text-decoration: none;
    padding: .55rem .85rem; border-radius: 999px;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: background .16s ease, opacity .16s ease;
  }
  .nav-links a:hover { background: var(--sunken); }
  .badge { font-size: .55rem; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--border); border-radius: 5px; padding: .05rem .26rem; color: var(--focus); }

  .menu-head { display: none; }

  .menu-theme {
    font: inherit; background: none; border: 0; cursor: pointer;
    color: var(--muted); font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .6rem; border-radius: 999px;
    transition: color .16s ease, background .16s ease;
  }
  .menu-theme:hover { color: var(--text); background: var(--sunken); }
  .menu-theme .tw { font-size: 1.05rem; }
  .menu-theme .tl { display: none; }

  .nav-contact.btn {
    flex: none; margin-left: .5rem;
    background: var(--ink); color: var(--frame);
    border: 0; box-shadow: none;
    font-weight: 600; font-size: .92rem;
    padding: .6rem 1.25rem; border-radius: 999px;
  }
  .nav-contact.btn:hover { opacity: .86; }

  .nav-toggle {
    display: none; position: relative; z-index: 3; flex: none;
    align-items: center; gap: .6rem; height: 38px; padding: 0 .25rem 0 .9rem;
    border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--frame) 70%, transparent);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .3s ease, background .3s ease;
  }
  .nt-label {
    display: block; height: 1.1em; line-height: 1.1; overflow: hidden;
    font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  }
  .nt-label > span { display: block; height: 1.1em; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
  .nav.open .nt-label > span { transform: translateY(-100%); }
  .nt-icon { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); flex: none; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
  .nt-icon b {
    position: absolute; left: 50%; top: 50%; height: 1.6px; border-radius: 2px; background: var(--frame);
    transition: transform .6s cubic-bezier(.7, 0, .2, 1), width .45s cubic-bezier(.7, 0, .2, 1);
  }
  .nt-icon b:nth-child(1) { width: 12px; transform: translate(-50%, calc(-50% - 3px)) rotate(0deg); }
  .nt-icon b:nth-child(2) { width: 7px; transform: translate(calc(-50% + 2.5px), calc(-50% + 3px)) rotate(0deg); }
  @media (hover: hover) { .nav-toggle:hover .nt-icon b:nth-child(2) { width: 12px; transform: translate(-50%, calc(-50% + 3px)) rotate(0deg); } }
  .nav.open .nt-icon { transform: rotate(90deg); }
  .nav.open .nt-icon b:nth-child(1), .nav.open .nt-icon b:nth-child(2) { width: 13px; }
  .nav.open .nt-icon b:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .nav.open .nt-icon b:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

  .mi, .ma { display: none; }
  .ml, .mt { display: inline-flex; align-items: center; gap: .35rem; }
  .menu-foot { display: contents; }
  .menu-mail { display: none; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; text-align: left; padding: clamp(5rem, 7.5vw, 6.75rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
    /* the blueprint grid bleeds to the frame edges and up under the nav; clip there instead of at the hero box */
    overflow: visible; clip-path: inset(-3rem calc(-1 * var(--fp)) 0 calc(-1 * var(--fp)));
  }




  /* hero globe: a sphere of dots that turns and tilts toward the cursor, with the idea-to-scale journey drawn over it — canvas, see script */
  .hero-globe { display: none; }
  @media (min-width: 1100px) {
    .hero-globe {
      display: block; position: absolute; z-index: 1; right: -1rem; top: 4.2rem; width: clamp(24rem, calc(100% - 30vw), 42rem); aspect-ratio: 1 / 1;
      color: var(--text); pointer-events: auto; user-select: none; -webkit-user-select: none; cursor: grab; touch-action: pan-y;
    }
    .hero .hero-inner > .hero-caps { max-width: 30rem; }
  }

  /* hero rings: app-icon squircles ripple outward from the centre, slowly turning as they fade — like potential unlocking */
  .hero-rings {
    position: absolute; z-index: 0; top: -3rem; left: calc(-1 * var(--fp));
    width: calc(100% + 2 * var(--fp)); height: calc(100% + 3rem);
    overflow: hidden; pointer-events: none; user-select: none; color: var(--text);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
  }
  .hero-rings::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, currentColor 5%, transparent), transparent);
  }
  .hero-rings i {
    position: absolute; left: 50%; top: 50%; width: clamp(540px, 108%, 1000px); aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 23%;
    background: linear-gradient(160deg, color-mix(in srgb, currentColor 4%, transparent), transparent 60%);
    transform: translate(-50%, -50%) scale(.05) rotate(0deg); opacity: 0;
    animation: ringOut 16s cubic-bezier(.3, .35, .25, 1) infinite; animation-delay: calc(var(--i) * -2.3s);
  }
  @supports (corner-shape: squircle) { .hero-rings i { border-radius: 34%; corner-shape: squircle; } }
  @keyframes ringOut {
    0%   { transform: translate(-50%, -50%) scale(.05) rotate(0deg);  opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: .55; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(28deg);   opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .hero-rings i { animation: none; opacity: .5; transform: translate(-50%, -50%) scale(calc(.25 + var(--i) * .13)); } }

  .hero > .hero-inner, .hero > .hero-strip-label, .hero > .stack { position: relative; z-index: 1; }

  /* the block spans the frame so the (centred) buttons centre on the page;
     the left-aligned text keeps its own measure */
  .hero-inner { position: relative; z-index: 3; margin: 0; }
  .hero-inner > h1 { max-width: 46rem; }
  .hero-tag {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 600; color: var(--muted);
    border: 1px solid var(--border); background: var(--frame);
    border-radius: 999px; padding: .3rem .8rem; margin-bottom: 1.5rem;
  }
  .hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--focus); }
  .js .hero-tag .dot { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--glow); } 50% { opacity: .7; box-shadow: 0 0 0 5px transparent; } }

  h1 { font-size: clamp(2.35rem, 5.8vw, 4rem); margin: 0; text-wrap: balance; }
  h1 em { font-style: normal; font-weight: 400; color: var(--muted); }
  .hero-inner > p {
    margin: 1.5rem 0 0;
    font-size: clamp(1.02rem, 2.3vw, 1.2rem);
    color: var(--muted); max-width: 34rem;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-start; margin-top: 1.9rem; }
  .hero-actions .btn { padding: .75rem 1.25rem; font-size: .94rem; }

  .hero-caps {
    list-style: none; margin: 1.6rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; max-width: 42rem;
  }
  .hero-caps li {
    font-size: .78rem; font-weight: 550; color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px; padding: .32rem .78rem;
  }

  .hero-strip-label {
    margin: clamp(2rem, 5vw, 3rem) 0 .9rem;
    font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--faint); text-align: left;
  }

  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

  /* ---------- Stack marquee ---------- */
  .stack {
    padding: 1.15rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .stack-track { display: flex; width: max-content; }
  .js .stack-track { animation: marquee 34s linear infinite; }
  .stack:hover .stack-track { animation-play-state: paused; }
  .stack-track span { padding: 0 1.7rem; white-space: nowrap; font-weight: 600; font-size: .95rem; color: var(--faint); letter-spacing: -.01em; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- Section scaffold ---------- */
  section[id] { scroll-margin-top: 84px; }
  .band { padding: clamp(3rem, 6vw, 4.75rem) 0 0; }
  .band-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 5vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
  .band-head h2 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; text-wrap: balance; }
  .band-head p { margin: 0; color: var(--muted); max-width: 34rem; }
  #products .band-head { text-align: left; align-items: flex-start; max-width: none; margin-left: 0; }
  #products .band-head p { max-width: 36rem; }

  /* reveal */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js .stagger.in > * { opacity: 1; transform: none; }
  .js .stagger.in > *:nth-child(1) { transition-delay: .03s; }
  .js .stagger.in > *:nth-child(2) { transition-delay: .09s; }
  .js .stagger.in > *:nth-child(3) { transition-delay: .15s; }
  .js .stagger.in > *:nth-child(4) { transition-delay: .21s; }
  .js .stagger.in > *:nth-child(5) { transition-delay: .27s; }
  .js .stagger.in > *:nth-child(6) { transition-delay: .33s; }
  .js .stagger.in > *:nth-child(7) { transition-delay: .39s; }
  .js .stagger.in > *:nth-child(8) { transition-delay: .45s; }
  .js .stagger.in > *:nth-child(9) { transition-delay: .51s; }
  .js .stagger.in > *:nth-child(10) { transition-delay: .57s; }
  .js .stagger.in > *:nth-child(n+11) { transition-delay: .63s; }

  /* ---------- Products ---------- */
  .logomark { display: block; }
  .lg-fg { fill: var(--ink); }
  /* Business OS app icons — Apple-style depth */
  .app-mark, .viz-marks span {
    position: relative; overflow: hidden;
    background:
      linear-gradient(158deg,
        color-mix(in srgb, var(--ic) 68%, #fff) 0%,
        var(--ic) 44%,
        color-mix(in srgb, var(--ic) 86%, #000) 100%);
    box-shadow:
      inset 0 1px 1.5px rgba(255, 255, 255, .5),
      inset 0 -2px 3px rgba(0, 0, 0, .18),
      inset 0 0 0 .5px rgba(0, 0, 0, .07),
      0 2px 7px -1px color-mix(in srgb, var(--ic) 45%, transparent),
      0 1px 2px rgba(0, 0, 0, .12);
  }
  .app-mark::before, .viz-marks span::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .06) 40%, transparent 58%);
  }
  .app-mark svg .fg, .viz-marks span svg .fg { fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
  .app-mark svg .fg2 { fill: rgba(255, 255, 255, .5); }
  .app-mark svg .dk { fill: rgba(0, 0, 0, .26); }
  .app-mark svg .dkl { fill: rgba(0, 0, 0, .26); stroke: rgba(0, 0, 0, .26); stroke-width: 8.500; stroke-linecap: round; }
  .app-mark svg .dks { fill: none; stroke: rgba(0, 0, 0, .3); stroke-linecap: round; stroke-linejoin: round; }
  .app-mark svg .fgs { fill: none; stroke: #fff; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
  /* ---------- Business OS — a system map: one core, twelve modules on circuit traces, annotated like a drawing ---------- */
  .bsys { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .bsys-copy { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
  .bsys-tag {
    font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .17em; font-size: .68rem; font-weight: 500;
    padding: .56rem 1.05rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); color: var(--ink);
    background: color-mix(in srgb, var(--frame) 68%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent), 0 1px 3px rgba(0, 0, 0, .04);
  }
  .bsys-copy h2 { margin: 1.5rem 0 0; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.02; padding-bottom: .05em; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
  .bsys-copy .h2-end { display: block; color: var(--muted); }
  .bsys-copy > p:not(.bsys-caps) { margin: 1.2rem 0 0; max-width: 24rem; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
  .bsys-actions { margin-top: 1.8rem; }
  .bsys-caps { margin: 1.9rem 0 0; font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
  .bsys-caps i { font-style: normal; margin: 0 .75em; color: var(--faint); }
  .bbox { width: 100%; max-width: 40rem; margin-left: auto; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: 12px; background: var(--frame); padding: 1.4rem 1.5rem 1.3rem; }
  .bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
  .bb-head small, .bb-head b, .bb-cap { font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }
  .bb-head small { font-size: .62rem; letter-spacing: .16em; color: var(--muted); }
  .bb-head b { font-size: .72rem; letter-spacing: .14em; font-weight: 600; color: var(--ink); }
  .bb-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.7rem .6rem; }
  .bb-app { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .6rem; color: var(--ink); -webkit-tap-highlight-color: transparent; }
  .bb-app svg { width: 3.4rem; height: 3.4rem; border-radius: 28%; padding: .15rem; box-sizing: border-box; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 74%, var(--frame)) 0%, var(--ink) 100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .45); }
  .bb-app .fg { fill: var(--frame); } .bb-app .fg2 { fill: color-mix(in srgb, var(--frame) 50%, transparent); } .bb-app .dk { fill: var(--ink); } .bb-app .dks { stroke: var(--ink); fill: none; }
  .bb-app span { font-size: .9rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
  .bb-app em { font-style: normal; font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .5rem; letter-spacing: .13em; padding: .17rem .45rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--muted); }
  .bb-app em.live { background: var(--ink); color: var(--frame); border: 1px solid var(--ink); }
  .bb-app:hover svg, .bb-app:focus-visible svg { transform: translateY(-4px); box-shadow: 0 16px 22px -10px rgba(0, 0, 0, .5); }
  .bb-app:focus-visible { outline: none; }
  .bb-cap { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); text-align: center; font-size: .62rem; letter-spacing: .11em; line-height: 1.6; color: var(--muted); min-height: 1.6em; box-sizing: content-box; }
  .bb-cap b { color: var(--ink); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .bb-app svg { transition: none; } }
  @media (max-width: 860px) {
    .bsys { grid-template-columns: 1fr; gap: 2rem; }
    .bbox { max-width: none; margin: 0; padding: 1.1rem 1rem 1rem; }
    .bb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem .6rem; }
    .bb-app svg { width: 3.1rem; height: 3.1rem; }
    .bb-app span { white-space: normal; }
  }

  .product-note { margin: 1.5rem 0 0; font-size: .88rem; color: var(--muted); }

  /* ---------- Services ---------- */
  .practices { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: .8rem; }
  .practice {
    grid-column: span 2;
    display: flex; flex-direction: column;
    border: 1px solid var(--hairline); border-radius: 10px;
    padding: 1.35rem 1.4rem 1.4rem; background: var(--frame);
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .practice:nth-child(4) { grid-column: 2 / span 2; }
  .practice:nth-child(5) { grid-column: 4 / span 2; }
  @media (max-width: 1000px) {
    .practices { grid-template-columns: repeat(2, 1fr); }
    .practice, .practice:nth-child(4) { grid-column: auto; }
    .practice:nth-child(5) { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; }
  }
  @media (max-width: 620px) {
    /* single column: size each card to its content instead of stretching to the tallest */
    .practices { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .6rem; }
    .practice:nth-child(5) { max-width: none; }
    .practice { padding: 1.1rem 1.15rem 1.15rem; }
    .practice-head { margin-bottom: .7rem; }
    .practice li { padding: .48rem 0; }
  }
  .practice:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
  .practice-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
  .practice-head .lt { font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; color: var(--faint); line-height: 1; transition: color .22s ease; }
  .practice:hover .practice-head .lt { color: var(--text); }
  .practice-head h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -.02em; margin: 0; }
  .practice-head .ct { margin-left: auto; font-size: .72rem; color: var(--faint); }
  .practice ul { list-style: none; margin: 0; padding: 0; }
  .practice li {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem;
    padding: .55rem 0; border-top: 1px solid var(--hairline); align-items: baseline;
  }
  .practice li:first-child { border-top: 0; }
  .practice li .n { font-size: .68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
  .practice li .t { font-size: .9rem; font-weight: 550; transition: color .18s ease; }
  .practice li .desc {
    margin: 0; max-height: 0; opacity: 0; overflow: hidden;
    font-size: .8rem; color: var(--muted);
    transition: max-height .35s ease, opacity .28s ease, margin .3s ease;
  }
  /* row title is a real <button> so it is a proper tap target (not selectable
     body text) — it reads as plain text on desktop and gains a chevron on touch */
  .practice li .t-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    width: 100%; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: default;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .practice li .t-btn * { -webkit-user-select: none; user-select: none; }
  .practice li .t-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  .practice li .chev { width: 12px; height: 12px; flex: none; color: var(--faint); display: none; transition: transform .2s ease, color .2s ease; }
  .hint-tap { display: none; }

  /* desktop (mouse, wide): hover or keyboard focus reveals the description */
  @media (hover: hover) and (min-width: 621px) {
    .practice li:hover .t, .practice li:has(.t-btn:focus-visible) .t { color: var(--focus); }
    .practice li:hover .desc, .practice li:has(.t-btn:focus-visible) .desc { max-height: 5rem; opacity: 1; margin-top: .35rem; }
  }

  /* touch / narrow: tap a service to drop its description down. Rows toggle
     independently (no accordion), so opening one never shifts the row under
     your finger. Height changes instantly — nothing animates the layout. */
  @media (hover: none), (max-width: 620px) {
    .hint-hover { display: none; } .hint-tap { display: inline; }
    .practice li .t-btn { cursor: pointer; }
    .practice li .chev { display: block; }
    .practice li .desc {
      max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; visibility: hidden;
      transition: opacity .18s ease;
    }
    .practice li.is-open .desc { max-height: none; opacity: 1; margin-top: .35rem; visibility: visible; }
    .practice li.is-open .t { color: var(--focus); }
    .practice li.is-open .chev { transform: rotate(180deg); color: var(--focus); }
  }

  /* ---------- Process timeline ---------- */
  .process-aside { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 1rem; }
  .process-aside h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: 0; text-wrap: balance; }
  .process-aside p { margin: 0; color: var(--muted); max-width: 30ch; }

  /* ---------- Engagement ---------- */
  .models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
  .model {
    position: relative; overflow: hidden;
    border: 1px solid var(--hairline); border-radius: 10px;
    padding: 1.3rem 1.35rem; background: var(--frame);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .model:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
  .model::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--focus) 13%, transparent), transparent 62%);
    opacity: 0; transition: opacity .3s ease;
  }
  .model:hover::before { opacity: 1; }
  .model h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.02em; margin: 0 0 .5rem; }
  .model p { margin: 0; font-size: .87rem; color: var(--muted); }
  .model .who { margin-top: .8rem; font-size: .78rem; color: var(--faint); }

  /* ---------- Why (visual cards) ---------- */
  /* ---------- Why: bento of soft grey tiles ---------- */
  .why-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0 0 clamp(1.75rem, 4vw, 2.6rem); }
  .why-label { font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .66rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--text); }
  .why-head h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin: 0; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
  .why-head h2 .h2-end { display: block; color: var(--faint); }
  .why-head p { margin: 0; color: var(--muted); max-width: 34rem; }

  .why-bento { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: .75rem; }
  .wb {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    min-height: 17rem; padding: 1.6rem 1.7rem; border-radius: 12px; background: var(--sunken);
  }
  .wb-a, .wb-d { grid-column: span 4; }
  .wb-b, .wb-c { grid-column: span 2; }
  .wb h3 { margin: 0; max-width: 20rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
  .wb p { margin: .5rem 0 0; max-width: 27rem; font-size: .86rem; line-height: 1.55; color: var(--muted); }

  /* A: two rows of app pills sliding in opposite directions; dark = live */
  .wb-pills { margin: auto -1.7rem -.2rem; display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .wb-row { overflow: hidden; }
  .wb-run { display: flex; width: max-content; }
  .js .wb-run { animation: wbSlide 46s linear infinite; }
  .js .wb-rev .wb-run { animation-direction: reverse; animation-duration: 54s; }
  .wb-set { display: flex; gap: .6rem; padding-right: .6rem; }
  @keyframes wbSlide { to { transform: translateX(-50%); } }
  .wb-pill { padding: .5rem 1.05rem; border-radius: 999px; background: var(--frame); color: var(--text); font-size: .8rem; font-weight: 500; white-space: nowrap; }
  .wb-pill.alt { background: color-mix(in srgb, var(--text) 8%, var(--sunken)); color: var(--muted); }
  .wb-pill.live { background: var(--text); color: var(--frame); }

  /* B: growth line */
  .wb-b .viz-graph { margin-top: auto; width: 100%; height: 7.4rem; }

  /* C: idea -> live, no one in between */
  .wb-c { align-items: center; justify-content: space-between; text-align: center; }
  .wb-c h3 { max-width: 12rem; }
  .wb-flow { display: flex; flex-direction: column; align-items: center; }
  .wb-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--text); }
  .wb-dot::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--text); opacity: 0; pointer-events: none;
  }
  .wb-dot::after {
    content: attr(data-l); position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
    font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  }
  /* the idea travels down through "us" and lands live: dashes march, a packet runs each line, the two ends answer */
  .wb-line {
    position: relative; display: block; width: 1.5px; height: 3.4rem;
    background: repeating-linear-gradient(to bottom, var(--faint) 0 5px, transparent 5px 9px);
    background-size: 1.5px 9px;
  }
  .wb-line::before {
    content: ""; position: absolute; left: -2.75px; bottom: -1px; width: 7px; height: 7px; transform: rotate(225deg);
    border-top: 1.5px solid var(--faint); border-left: 1.5px solid var(--faint);
  }
  .wb-line::after {
    content: ""; position: absolute; left: -2.25px; top: 0; width: 6px; height: 6px; border-radius: 50%;
    background: var(--text); opacity: 0;
  }
  .js .wb-line { animation: wbMarch 1.3s linear infinite; }
  .js .wb-up::after { animation: wbPacketA 6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .js .wb-down::after { animation: wbPacketB 6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .js .wb-dot-a::before { animation: wbRing 6s ease-out infinite; }
  .js .wb-dot-a { animation: wbSeed 6s ease-out infinite; }
  .js .wb-dot-b::before { animation: wbRing 6s ease-out infinite 4.7s; }
  .js .wb-dot-b { animation: wbLand 6s ease-out infinite; }
  .js .wb-dot-b::after { animation: wbLabel 6s ease-out infinite; }
  @keyframes wbMarch { to { background-position: 0 9px; } }
  @keyframes wbPacketA {
    0%, 4%  { top: -3px; opacity: 0; transform: scale(.5); }
    8%      { opacity: 1; }
    36%     { top: calc(100% - 3px); opacity: 1; transform: scale(1.5); }
    40%, 100% { top: calc(100% - 3px); opacity: 0; transform: scale(1.5); }
  }
  @keyframes wbPacketB {
    0%, 42% { top: -3px; opacity: 0; transform: scale(1.5); }
    46%     { opacity: 1; }
    74%     { top: calc(100% - 3px); opacity: 1; transform: scale(2.6); }
    78%, 100% { top: calc(100% - 3px); opacity: 0; transform: scale(2.6); }
  }
  @keyframes wbRing {
    0%      { transform: scale(1); opacity: 0; }
    2%      { opacity: .7; }
    14%, 100% { transform: scale(3.2); opacity: 0; }
  }
  @keyframes wbSeed {
    0%      { transform: scale(.5); }
    6%      { transform: scale(1.15); }
    12%, 100% { transform: scale(1); }
  }
  @keyframes wbLand {
    0%, 72% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 28%, transparent); }
    79%     { transform: scale(1.9); }
    92%     { transform: scale(1.45); box-shadow: 0 0 0 14px transparent; }
    97%     { transform: scale(1.45); }
    100%    { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  }
  @keyframes wbLabel {
    0%, 74% { color: var(--muted); }
    80%, 92% { color: var(--text); }
    100%    { color: var(--muted); }
  }

  /* D: the pushback chat, bigger than the old thumbnail */
  .wb-d .viz-chat { margin: auto 0 0 auto; width: min(100%, 25rem); padding-top: 1.2rem; }
  .wb-d .viz-chat > span { font-size: .8rem; padding: .55rem .75rem; border-radius: 12px; }
  .wb-d .vc-in { background: var(--frame); }

  /* a still, quiet grid behind the chat */
  .wb-d > h3, .wb-d > p, .wb-d > .viz-chat { position: relative; z-index: 1; }
  .wb-grid {
    position: absolute; z-index: 0; inset: 0; pointer-events: none; user-select: none;
    background-image:
      linear-gradient(to right, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
    background-size: 28px 28px; background-position: -1px -1px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 75%);
    mask-image: linear-gradient(to bottom, transparent 18%, #000 75%);
  }

  /* the logo badge sitting on the junction of the four tiles */
  .why-badge {
    position: absolute; z-index: 2; left: calc(66.667% + .125rem); top: 50%; transform: translate(-50%, -50%);
    width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ink); box-shadow: 0 0 0 7px var(--frame), 0 10px 28px rgba(0, 0, 0, .18);
  }
  .why-badge svg { width: 30px; height: 30px; }
  .why-badge .lg-fg { fill: var(--frame); }

  @media (prefers-reduced-motion: reduce) { .js .wb-run, .js .wb-line, .js .wb-line::after, .js .wb-dot, .js .wb-dot::before, .js .wb-dot::after { animation: none !important; } }
  @media (max-width: 860px) {
    .why-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .wb-a, .wb-b, .wb-c, .wb-d { grid-column: auto; }
    .wb { min-height: 0; padding: 1.4rem 1.35rem; }
    .wb-pills { margin-left: -1.35rem; margin-right: -1.35rem; }
    .wb-c { min-height: 16rem; }
    .why-badge { display: none; }
  }
  @media (max-width: 620px) { .why-head h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); } .why-head p { font-size: 1.04rem; line-height: 1.68; } }

  .viz-marks { display: flex; gap: .5rem; }
  .viz-marks span { width: 34px; aspect-ratio: 1; border-radius: 27%; display: grid; place-items: center; }
  .viz-marks span svg { width: 60%; height: 60%; position: relative; z-index: 1; }
  .viz-marks span svg .fg { fill: #fff; }
  .js .viz-marks span { animation: bob 5s ease-in-out infinite; }
  .js .viz-marks span:nth-child(2) { animation-delay: -1.6s; }
  .js .viz-marks span:nth-child(3) { animation-delay: -3.2s; }

  .viz-graph { height: 78%; width: auto; overflow: visible; }
  .vg-grid { stroke: var(--hairline); stroke-width: 1; }
  .vg-area { fill: color-mix(in srgb, var(--text) 9%, transparent); }
  .vg-line { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .vg-node, .vg-dot { fill: var(--text); transform-box: fill-box; transform-origin: center; }
  .vg-node { stroke: var(--sunken); stroke-width: 1.6; }
  .vg-pulse { fill: none; stroke: var(--text); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .vg-dot { opacity: 0; }
  .vg-line { stroke-dasharray: 1; }
  .vg-wipe { transform-box: fill-box; transform-origin: left center; }
  .vg-cap {
    display: flex; justify-content: space-between; margin-top: .55rem;
    font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  }
  /* idea -> scale: the line draws itself, each stage lands as a node, the last one rings out; 8s loop */
  .js .viz-graph { animation: vgFade 8s ease-in-out infinite; }
  .js .vg-line { animation: vgDraw 8s linear infinite; }
  .js .vg-wipe { animation: vgWipe 8s linear infinite; }
  .js .vg-n1 { animation: vgN1 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-n2 { animation: vgN2 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-n3 { animation: vgN3 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-n4 { animation: vgN4 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-n5 { animation: vgN5 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-n6 { animation: vgN6 8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .js .vg-pulse { animation: vgPulse 8s ease-out infinite; }
  .js .vg-pulse2 { animation-delay: .55s; }
  .js .vg-c2 { animation: vgCap 8s ease-out infinite; }
  @supports (offset-path: path("M0 0 L1 1")) {
    .vg-dot { offset-path: path("M6 84 L44 70 L82 76 L120 46 L158 33 L194 14"); offset-rotate: 0deg; offset-distance: 0%; }
    .js .vg-dot { animation: vgDot 8s linear infinite; }
  }
  @keyframes vgFade { 0% { opacity: 0; } 4% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes vgDraw { 0%, 4% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
  @keyframes vgWipe { 0%, 4% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
  @keyframes vgDot { 0%, 3% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 64% { offset-distance: 100%; opacity: 1; } 67%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes vgN1 { 0%, 3.2% { opacity: 0; transform: scale(0); } 4.0% { opacity: 1; transform: scale(1.7); } 8.0% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgN2 { 0%, 14.8% { opacity: 0; transform: scale(0); } 15.6% { opacity: 1; transform: scale(1.7); } 19.6% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgN3 { 0%, 26.0% { opacity: 0; transform: scale(0); } 26.8% { opacity: 1; transform: scale(1.7); } 30.8% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgN4 { 0%, 39.9% { opacity: 0; transform: scale(0); } 40.7% { opacity: 1; transform: scale(1.7); } 44.7% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgN5 { 0%, 51.5% { opacity: 0; transform: scale(0); } 52.3% { opacity: 1; transform: scale(1.7); } 56.3% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgN6 { 0%, 63.2% { opacity: 0; transform: scale(0); } 64.0% { opacity: 1; transform: scale(1.7); } 68.0% { transform: scale(1); } 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes vgPulse { 0%, 64% { transform: scale(.6); opacity: 0; } 66% { opacity: .6; } 82%, 100% { transform: scale(3.4); opacity: 0; } }
  @keyframes vgCap { 0%, 62% { color: var(--muted); } 68%, 90% { color: var(--text); } 100% { color: var(--muted); } }
  @media (prefers-reduced-motion: reduce) { .js .viz-graph, .js .viz-graph *, .js .vg-c2 { animation: none !important; } .vg-node { opacity: 1; } .vg-dot, .vg-pulse { display: none; } .vg-line { stroke-dasharray: none; } }

  .viz-chat { display: flex; flex-direction: column; gap: .4rem; width: 84%; }
  .viz-chat > span {
    font-size: .68rem; font-style: normal; line-height: 1.35;
    padding: .4rem .55rem; border-radius: 9px; max-width: 84%; font-weight: 500;
  }
  .vc-in { align-self: flex-start; background: var(--frame); border: 1px solid var(--hairline); color: var(--muted); }
  .vc-out { align-self: flex-end; background: var(--text); color: var(--frame); }
  .vc-typing { align-self: flex-end; background: var(--text); display: inline-flex; gap: 3px; align-items: center; padding: .5rem .6rem; }
  .vc-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--frame); opacity: .45; }

  .js .vc-typing { opacity: 0; }
  .js .vc-in { animation: vcIn 6s ease-in-out infinite; }
  .js .vc-typing { animation: vcType 6s ease-in-out infinite; }
  .js .vc-out { animation: vcOut 6s ease-in-out infinite; }
  .js .vc-typing i { animation: vcDot .9s ease-in-out infinite; }
  .js .vc-typing i:nth-child(2) { animation-delay: .15s; }
  .js .vc-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes vcIn {
    0%, 4% { opacity: 0; transform: translateY(6px); }
    8%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes vcType {
    0%, 17% { opacity: 0; transform: translateY(4px); }
    21%, 40% { opacity: 1; transform: none; }
    43%, 100% { opacity: 0; }
  }
  @keyframes vcOut {
    0%, 42% { opacity: 0; transform: translateY(6px) scale(.97); }
    47%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes vcDot {
    0%, 100% { transform: translateY(0); opacity: .4; }
    50% { transform: translateY(-2px); opacity: 1; }
  }

  /* ---------- CTA ---------- */
  .cta { text-align: center; padding: clamp(3.75rem, 9vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
  .cta h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0; text-wrap: balance; }
  .cta p { margin: 1rem auto 0; color: var(--muted); max-width: 34rem; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.9rem; }
  .cta-actions .btn { padding: .78rem 1.3rem; font-size: .95rem; }
  .magnetic { display: inline-block; }
  .magnetic .btn { transition: transform .25s cubic-bezier(.2,.7,.2,1); }

  /* ---------- Footer ---------- */
  footer { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
  footer .foot-lead { display: flex; flex-direction: column; gap: .5rem; }
  footer .foot-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
  footer .foot-tag { margin: 0; font-size: .84rem; color: var(--muted); max-width: 24ch; }
  footer .foot-brand svg { width: 16px; height: 16px; }
  footer .cols { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-left: auto; }
  footer .col { display: flex; flex-direction: column; gap: .45rem; }
  footer .col b { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: .25rem; font-weight: 700; }
  footer .col a { color: var(--muted); font-size: .85rem; transition: color .16s ease; }
  footer .col a:hover { color: var(--text); }
  .copy { width: 100%; margin-top: .5rem; font-size: .76rem; color: var(--faint); }

  /* ---------- Selected work ---------- */
  .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  @media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }
  .work-card {
    border: 1px solid var(--hairline); border-radius: 12px; background: var(--frame);
    padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .55rem;
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

  .work-viz {
    height: 104px; margin-bottom: .55rem;
    border: 1px solid var(--hairline); border-radius: 12px;
    background: var(--sunken); overflow: hidden;
    display: grid; place-items: center; position: relative;
  }
  @media (prefers-reduced-motion: reduce) { .work-viz * { animation: none !important; } }

  /* 1 - steps collapse: 11 -> 3 */
  .wv-steps { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
  .wv-steps i { width: 6px; height: 100%; border-radius: 3px; background: var(--text); }
  .js .wv-steps i:nth-child(n+4) { animation: wvDrop 4.4s ease-in-out infinite; transform-origin: bottom; }
  .js .wv-steps i:nth-child(4) { animation-delay: -.1s; } .js .wv-steps i:nth-child(5) { animation-delay: -.2s; }
  .js .wv-steps i:nth-child(6) { animation-delay: -.3s; } .js .wv-steps i:nth-child(7) { animation-delay: -.4s; }
  .js .wv-steps i:nth-child(8) { animation-delay: -.5s; } .js .wv-steps i:nth-child(9) { animation-delay: -.6s; }
  .js .wv-steps i:nth-child(10) { animation-delay: -.7s; } .js .wv-steps i:nth-child(11) { animation-delay: -.8s; }
  @keyframes wvDrop { 0%, 18% { transform: scaleY(1); opacity: 1; } 40%, 74% { transform: scaleY(.08); opacity: .18; } 96%, 100% { transform: scaleY(1); opacity: 1; } }
  .wv-cap { position: absolute; top: 12px; right: 14px; font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
  .wv-cap::after { content: "11"; }
  .js .wv-cap::after { animation: wvNum 4.4s steps(1) infinite; }
  @keyframes wvNum { 0%, 39% { content: "11"; } 40%, 100% { content: "3"; } }

  /* 2 - six sheets merge into one */
  .wv-merge { display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 16px; gap: 5px; }
  .wv-merge i { background: var(--text); border-radius: 3px; }
  .js .wv-merge i { animation: wvMerge 4.6s ease-in-out infinite; }
  .js .wv-merge i:nth-child(1) { --tx: 27px; --ty: 10px; } .js .wv-merge i:nth-child(2) { --tx: 0; --ty: 10px; }
  .js .wv-merge i:nth-child(3) { --tx: -27px; --ty: 10px; } .js .wv-merge i:nth-child(4) { --tx: 27px; --ty: -10px; }
  .js .wv-merge i:nth-child(5) { --tx: 0; --ty: -10px; } .js .wv-merge i:nth-child(6) { --tx: -27px; --ty: -10px; }
  @keyframes wvMerge { 0%, 22% { transform: none; opacity: 1; } 46%, 72% { transform: translate(var(--tx), var(--ty)); opacity: .5; } 94%, 100% { transform: none; opacity: 1; } }

  /* 3 - support queue clearing */
  .wv-queue { display: flex; flex-direction: column; gap: 6px; width: 118px; }
  .wv-queue i { height: 16px; border-radius: 5px; background: var(--frame); border: 1px solid var(--border); position: relative; }
  .js .wv-queue i:nth-child(1) { animation: wvClear 3.6s ease-in-out infinite; }
  .js .wv-queue i:nth-child(2) { animation: wvClear 3.6s ease-in-out infinite -1.2s; }
  .js .wv-queue i:nth-child(3) { animation: wvClear 3.6s ease-in-out infinite -2.4s; }
  @keyframes wvClear {
    0%, 50% { transform: translateX(0); opacity: 1; background: var(--frame); }
    62% { background: color-mix(in srgb, var(--focus) 18%, var(--frame)); }
    74% { transform: translateX(44px); opacity: 0; }
    75%, 90% { transform: translateX(-44px); opacity: 0; background: var(--frame); }
    100% { transform: translateX(0); opacity: 1; }
  }

  /* 4 - two panels syncing */
  .wv-sync { display: flex; align-items: center; gap: 34px; position: relative; }
  .wv-sync b { display: block; width: 40px; height: 52px; border-radius: 8px; background: var(--frame); border: 1px solid var(--border); }
  .wv-sync .rnr { position: absolute; left: 40px; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); top: calc(50% - 4px); }
  .js .wv-sync .rnr { animation: wvRun 2.6s ease-in-out infinite; }
  @keyframes wvRun { 0%, 100% { left: 40px; } 50% { left: 74px; } }
  .js .wv-sync b { animation: wvPing 2.6s ease-in-out infinite; }
  .js .wv-sync b:last-of-type { animation-delay: -1.3s; }
  @keyframes wvPing { 0%, 44%, 100% { box-shadow: 0 0 0 0 transparent; } 55% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); } }

  .work-tag { font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
  .work-card h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -.02em; margin: 0; }
  .work-card p { margin: 0; font-size: .88rem; color: var(--muted); }
  .work-result { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--hairline); font-size: .82rem; font-weight: 550; color: var(--text); }
  .work-note { text-align: center; margin: 1.4rem auto 0; font-size: .78rem; color: var(--faint); max-width: 40rem; }

  /* ---------- Industries ---------- */
  .ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
  .ind {
    border: 1px solid var(--hairline); border-radius: 12px; background: var(--frame);
    padding: .95rem 1.05rem; font-size: .9rem; font-weight: 550;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    transition: border-color .18s ease;
  }
  .ind::after { content: "\2197"; color: var(--faint); opacity: 0; transform: translate(-3px, 3px); transition: opacity .18s ease, transform .18s ease; }
  .ind:hover { border-color: var(--text); }
  .ind:hover::after { opacity: 1; transform: translate(0, 0); }

  /* ---------- Frosted glass ---------- */
  /* the nav's glass, reused on the pill / chip / ghost-button family */
  .eyebrow-pill, .hero-tag, .hero-caps li, .btn--ghost, .ind, .faq-tab.is-active {
    background: color-mix(in srgb, var(--frame) 68%, transparent);
    backdrop-filter: blur(22px) saturate(185%);
    -webkit-backdrop-filter: blur(22px) saturate(185%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
      0 1px 3px rgba(0, 0, 0, .04);
  }
  .eyebrow-pill, .hero-tag, .hero-caps li, .btn--ghost, .ind {
    border-color: color-mix(in srgb, var(--text) 9%, transparent);
  }
  .btn--ghost:hover, .ind:hover {
    background: color-mix(in srgb, var(--sunken) 80%, transparent);
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
  }
  .faq-tab.is-active {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
      var(--shadow-chip);
  }

  /* ---------- Swipe buttons: a fill wipes across and the button inverts — on hover, on a tap, or following your finger as you swipe.
     The label is drawn twice: the normal one, and an inverted copy clipped to exactly the filled part, so the colour change is in step with the fill. ---------- */
  .btn {
    --cl: calc((1 - var(--p, 0)) * 100%);
    position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y; -webkit-user-select: none; user-select: none;
    -webkit-mask-image: radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000);   /* keeps the rounded clip crisp while the fill moves (Safari) */
    transition: box-shadow .45s ease, border-color .45s ease;
  }
  .btn::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
    transform: scaleX(var(--p, 0)); transform-origin: var(--o, right) center;
    transition: transform .55s cubic-bezier(.7, 0, .2, 1);
  }
  .btn--solid { box-shadow: inset 0 0 0 1px transparent; }
  .btn--solid::before { background: var(--frame); }
  .btn--ghost::before { background: var(--ink); }
  .btx .btn .bt { display: inline-flex; align-items: center; justify-content: inherit; gap: inherit; }
  .btx .btn .bt2 {
    position: absolute; inset: 0; padding: inherit; display: flex; align-items: center; justify-content: inherit; gap: inherit; pointer-events: none;
    clip-path: inset(0 var(--cl) 0 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1);
  }
  .btx .btn.o-r .bt2 { clip-path: inset(0 0 0 var(--cl)); }
  .btx .btn--solid .bt2 { color: var(--ink); }
  .btx .btn--ghost .bt2 { color: var(--frame); }
  /* dragging: the fill is glued to the finger, no easing */
  .btn.is-drag::before, .btx .btn.is-drag .bt2 { transition: none; }
  .btn.is-swipe, .btn:focus-visible { --p: 1; --o: left; }
  .btn--solid.is-swipe, .btn--solid:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
  .btn--ghost.is-swipe, .btn--ghost:focus-visible { border-color: var(--ink); }
  @media (hover: hover) {
    .btn:hover { --p: 1; --o: left; }
    .btn--solid:hover { box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }
    .btn--ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--frame) 68%, transparent); }
  }
  .nav-contact.btn:hover { opacity: 1; }
  .magnetic .btn { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .45s ease; }
  @media (prefers-reduced-motion: reduce) { .btn::before, .btx .btn .bt2 { transition-duration: .01ms; } }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .eyebrow-pill, .hero-tag, .hero-caps li, .btn--ghost, .ind, .faq-tab.is-active {
      background: var(--frame);
    }
  }

  /* ---------- Runner game ---------- */
  html:not(.js) #play { display: none; }
  .game { max-width: 42rem; margin: 0 auto; }
  .game-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
  .game-stat { font-size: .8rem; color: var(--muted); }
  .game-stat b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
  .game-btn {
    margin-left: auto; font: inherit; font-size: .78rem; font-weight: 600;
    color: var(--frame); background: var(--ink);
    border: 1px solid var(--ink); border-radius: 999px;
    padding: .45rem 1.15rem; cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
  }
  .game-btn:hover { transform: translateY(-1px); }
  .game-btn:disabled { opacity: .45; cursor: default; transform: none; }
  .game-stage {
    position: relative; border: 1px solid var(--hairline); border-radius: 10px;
    background: var(--sunken); overflow: hidden;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .game-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .game-stage canvas { display: block; width: 100%; height: auto; }
  .game-hint {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .84rem; color: var(--muted); text-align: center; padding: 1rem;
    background: color-mix(in srgb, var(--sunken) 66%, transparent);
    pointer-events: none;
  }
  .game-hint[hidden] { display: none; }
  .game-msg {
    margin: 1rem 0 0; text-align: center; font-size: .95rem;
    color: var(--text); min-height: 1.3em;
  }
  .game-msg b { font-variant-numeric: tabular-nums; }
  .game-msg a { border-bottom: 1px solid var(--text); padding-bottom: 1px; }
  .game-msg a:hover { opacity: .7; }

  /* on-screen jump control (touch / narrow) */
  .game-pad { display: none; }
  @media (pointer: coarse), (max-width: 720px) {
    .game-pad { display: flex; justify-content: center; margin-top: .95rem; }
  }
  .game-pad-base {
    width: 94px; height: 94px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sunken); border: 1px solid var(--hairline);
    box-shadow: inset 0 2px 7px color-mix(in srgb, var(--text) 13%, transparent);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .game-pad-btn {
    appearance: none; -webkit-appearance: none;
    width: 66px; height: 66px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--frame); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    box-shadow:
      0 3px 0 color-mix(in srgb, var(--text) 17%, transparent),
      0 5px 11px color-mix(in srgb, var(--text) 12%, transparent);
    transition: transform .06s ease, box-shadow .06s ease;
  }
  .game-pad-btn svg { width: 26px; height: 26px; display: block; }
  .game-pad-btn.is-pressed, .game-pad-btn:active {
    transform: translateY(3px);
    box-shadow:
      0 0 0 color-mix(in srgb, var(--text) 17%, transparent),
      0 2px 5px color-mix(in srgb, var(--text) 10%, transparent);
  }
  .game-pad-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  /* the game controls must never start a text selection or a scroll gesture
     on a tap — that was the "grey box then the page moves" on iOS */
  .game-pad, .game-pad *, .game-bar, .game-bar *, .game-msg, .game-hint,
  .game-stage, .game-stage * {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  }
  .game-pad-btn, .game-pad-base, .game-stage { touch-action: none; }
  @media (max-width: 560px) { .game-level { display: none; } }

  /* ---------- Comparison ---------- */
  .compare { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
  .compare-wrap { overflow-x: auto; }
  .compare table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
  .compare th, .compare td { padding: .9rem 1.05rem; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
  .compare thead th { font-weight: 650; letter-spacing: -.01em; font-size: .84rem; }
  .compare tbody th { font-weight: 500; color: var(--muted); }
  .compare .col-us { background: var(--sunken); font-weight: 600; }
  .compare thead .col-us { color: var(--text); }
  .compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }

  /* ---------- FAQ ---------- */
  .mark-hl {
    background: var(--text); color: var(--frame);
    border-radius: 8px; padding: .02em .32em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .faq-shell {
    display: grid; grid-template-columns: 1fr; gap: .6rem;
    border: 1px solid var(--hairline); border-radius: 12px;
    background: var(--sunken); padding: .6rem;
  }
  .js .faq-shell { grid-template-columns: 240px 1fr; }
  .faq-rail { display: none; flex-direction: column; gap: .2rem; align-content: start; }
  .js .faq-rail { display: flex; }
  .faq-tab {
    font: inherit; text-align: left; cursor: pointer;
    border: 0; background: transparent; color: var(--muted);
    font-size: .95rem; font-weight: 550; letter-spacing: -.01em;
    padding: .85rem 1rem; border-radius: 12px;
    transition: background .18s ease, color .18s ease;
  }
  .faq-tab:hover { color: var(--text); }
  .faq-tab.is-active { background: var(--frame); color: var(--text); box-shadow: var(--shadow-chip); }
  .faq-panels { background: var(--frame); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
  .faq-group { display: block; }
  .js .faq-group { display: none; }
  .js .faq-group.is-active { display: block; }
  .faq-group details { border-bottom: 1px solid var(--hairline); }
  .faq-group details:last-child { border-bottom: 0; }
  .faq-group summary {
    list-style: none; cursor: pointer;
    padding: 1.15rem 1.35rem;
    font-size: 1rem; font-weight: 550; letter-spacing: -.01em;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  }
  .faq-group summary::-webkit-details-marker { display: none; }
  .faq-group summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--muted); flex: none; line-height: 1; transition: color .18s ease; }
  .faq-group details[open] summary { padding-bottom: .55rem; }
  .faq-group details[open] summary::after { content: "\00d7"; color: var(--text); }
  .faq-a { padding: 0 1.35rem 1.3rem; }
  .faq-a p { margin: 0; font-size: .92rem; color: var(--muted); max-width: 62ch; }
  .js .faq-group details[open] .faq-a { animation: faqIn .28s ease; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* ---------- Careers ---------- */
  .careers {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    border: 1px solid var(--hairline); border-radius: 12px; background: var(--sunken);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  }
  .careers h3 { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
  .careers p { margin: 0; font-size: .88rem; color: var(--muted); }

  /* ---------- Brief form ---------- */
  .brief { max-width: 640px; margin: 2rem auto 0; text-align: left; display: grid; gap: .85rem; }
  .brief .row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
  .brief label { display: flex; flex-direction: column; gap: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .brief input, .brief select, .brief textarea {
    font: inherit; font-size: .92rem; text-transform: none; letter-spacing: normal; font-weight: 400;
    color: var(--text); background: var(--frame);
    border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem;
  }
  .brief textarea { resize: vertical; min-height: 96px; }
  .brief input:focus, .brief select:focus, .brief textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
  .brief .full { grid-column: 1 / -1; }
  .brief .magnetic button { cursor: pointer; }
  .brief-done { font-size: .86rem; color: var(--muted); margin: .3rem 0 0; text-transform: none; letter-spacing: normal; font-weight: 400; }

  /* ---------- Modal forms ---------- */
  .modal {
    border: 1px solid var(--hairline); padding: 0; margin: auto;
    width: min(30rem, calc(100vw - 2rem)); max-width: none;
    max-height: min(calc(100dvh - 2rem), 44rem); overflow: auto;
    border-radius: 12px; background: var(--frame); color: var(--text);
    box-shadow: var(--shadow-card);
    overscroll-behavior: contain;
  }
  .modal::backdrop {
    background: color-mix(in srgb, var(--text) 42%, transparent);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  }
  .modal[open] { animation: modalIn .24s cubic-bezier(.2, .7, .2, 1); }
  @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
  .modal-inner { padding: 1.4rem 1.4rem 1.5rem; }
  .modal-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
  .modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
  .modal-head p { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
  .modal-close {
    margin-left: auto; margin-right: -.3rem; flex: none;
    width: 32px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer;
    display: grid; place-items: center; border-radius: 999px;
    transition: background .16s ease, color .16s ease;
  }
  .modal-close:hover { background: var(--sunken); color: var(--text); }
  .modal-close svg { width: 15px; height: 15px; }
  .mform { display: grid; gap: .7rem; text-align: left; }
  .mform[hidden] { display: none; }
  .mform .row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  .mform label { display: flex; flex-direction: column; gap: .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .mform input, .mform select, .mform textarea {
    font: inherit; font-size: .92rem; text-transform: none; letter-spacing: normal; font-weight: 400;
    color: var(--text); background: var(--frame);
    border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem;
  }
  .mform textarea { resize: vertical; min-height: 84px; }
  .mform input:focus, .mform select:focus, .mform textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
  .mform .full { grid-column: 1 / -1; }
  .mform button[type="submit"] { margin-top: .3rem; width: 100%; justify-content: center; }
  .mform-done { font-size: .85rem; color: var(--muted); text-transform: none; letter-spacing: normal; font-weight: 400; margin: 0; }
  @media (max-width: 480px) { .mform .row { grid-template-columns: 1fr; } }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 960px) {
    h1 { font-size: clamp(2.15rem, 6vw, 3.1rem); }
    .band-head h2, .process-aside h2, .cta h2 { font-size: clamp(1.8rem, 4.6vw, 2.4rem); }
  }

  @media (max-width: 860px) {
    .process-aside { position: static; }
  }

  @media (max-width: 760px) {
    .faq-shell, .js .faq-shell { grid-template-columns: 1fr; }
    .faq-rail { flex-direction: row; overflow-x: auto; gap: .35rem; padding-bottom: .1rem; -webkit-overflow-scrolling: touch; }
    .faq-tab { white-space: nowrap; padding: .6rem .9rem; font-size: .88rem; }
    .faq-tab.is-active { box-shadow: none; border: 1px solid var(--border); }
    .faq-group summary { padding: 1rem 1.1rem; font-size: .94rem; }
    .faq-a { padding: 0 1.1rem 1.1rem; }
  }

  /* Nav collapses to a menu when the link row no longer fits */
  @media (max-width: 820px) {
    .nav { gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(clamp(1.15rem, 5vw, 3.25rem) + .45rem) 10px; }
    .hero-inner, .hero-strip-label { padding-inline: .45rem; }
    /* logo + name are always visible; on load the name wipes out from the logo.
       Only the bar's own brand — the menu card keeps its plain header. */
    .nav > .brand {
      gap: 0; padding: .45rem .5rem; margin-left: -.5rem;
      -webkit-tap-highlight-color: transparent;
    }
    .nav > .brand .brand-name {
      display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: middle;
      /* wipes out of the logo, holds for a moment, then folds back into it and stays hidden */
      max-width: 0; margin-left: 0; opacity: 0;
      animation:
        brandIn .9s cubic-bezier(.2, .7, .2, 1) .3s both,
        brandOut .8s cubic-bezier(.65, 0, .35, 1) 3.2s forwards;
    }
    @keyframes brandIn {
      from { max-width: 0;    margin-left: 0;     clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-14px); }
      to   { max-width: 9rem; margin-left: .55rem; clip-path: inset(0 0 0 0);    opacity: 1; transform: none; }
    }
    @keyframes brandOut {
      from { max-width: 9rem; margin-left: .55rem; clip-path: inset(0 0 0 0);    opacity: 1; transform: none; }
      to   { max-width: 0;    margin-left: 0;     clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-12px); }
    }
    .nav .brand { font-size: 1.12rem; transition: opacity .2s ease; }
    .nav .brand svg { width: 29px; height: 29px; }
    .nav-toggle { display: inline-flex; margin-left: 0; height: 46px; padding: 0 .3rem 0 1rem; gap: .65rem; }
    .nt-label { font-size: .72rem; }
    .nt-icon { width: 38px; height: 38px; }
    .nt-icon b { scale: 1.2; }
    .nav > .brand { position: relative; z-index: 3; }

    /* full-screen menu: a circle grows from the button, links rise out of masks one by one */
    .nav-links {
      display: flex; position: fixed; inset: 0; z-index: 1;
      width: auto; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: calc(env(safe-area-inset-top, 0px) + 6.4rem) calc(clamp(1.15rem, 5vw, 3.25rem) + .45rem) calc(env(safe-area-inset-bottom, 0px) + 1.6rem);
      background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--text) 7%, transparent), transparent 60%), var(--frame);
      clip-path: circle(0px at var(--ox, calc(100% - 3.5rem)) var(--oy, 2.6rem));
      visibility: hidden; pointer-events: none;
      transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .75s;
    }
    .nav.open .nav-links {
      clip-path: circle(150vmax at var(--ox, calc(100% - 3.5rem)) var(--oy, 2.6rem));
      visibility: visible; pointer-events: auto; transition-delay: 0s;
    }
    .menu-head { display: none; }

    .nav-links a {
      position: relative; width: 100%; padding: .55rem 0 .6rem; border-radius: 0; gap: 1rem;
      display: flex; align-items: flex-start; justify-content: flex-start; white-space: nowrap;
      font-size: clamp(2.1rem, 9.5vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: var(--ink);
    }
    .nav-links a:hover, .nav-links a:focus-visible { background: transparent; color: var(--text); }
    .nav-links a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline);
      transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1);
    }
    .nav.open .nav-links a::after { transform: scaleX(1); transition-delay: calc(.35s + var(--i, 0) * .06s); }
    .mi {
      display: block; width: 1.9rem; flex: none; margin-top: .7rem;
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: .68rem; font-weight: 500; letter-spacing: .14em; line-height: 1; color: var(--faint); font-style: normal;
    }
    .ml { display: block; overflow: hidden; padding: .06em 0 .1em; }
    .mt { display: inline-flex; align-items: flex-start; gap: .35rem; transform: translateY(115%); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
    .nav.open .mt { transform: none; transition: transform .85s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * .07s); }
    .nav-links a .badge { font-size: .55rem; margin: .5rem 0 0 .1rem; letter-spacing: .08em; }
    .ma {
      display: block; width: 1.5rem; height: 1.5rem; margin: .55rem 0 0 auto; color: var(--text); flex: none;
      opacity: 0; transform: translateX(-10px); transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
    }
    .nav.open .ma { opacity: .35; transform: none; transition-delay: calc(.55s + var(--i, 0) * .07s); }
    @media (hover: hover) { .nav-links a:hover .ma { opacity: 1; transform: translateX(4px); transition-delay: 0s; } }

    .menu-foot {
      display: flex; flex-direction: column; gap: .8rem; margin-top: auto; padding-top: 2rem;
      opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .3s ease;
    }
    .nav.open .menu-foot { opacity: 1; transform: none; transition: opacity .6s ease .6s, transform .7s cubic-bezier(.2, .8, .2, 1) .6s; }
    .menu-theme {
      display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: .9rem 0 0;
      border-top: 1px solid var(--hairline); border-radius: 0;
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    }
    .menu-theme:hover { background: transparent; color: var(--text); }
    .menu-theme .tl { display: inline; }
    .menu-theme .tw { font-size: 1.2rem; }
    .nav-contact.btn {
      width: 100%; justify-content: center; margin: 0; padding: 1.05rem 1rem; font-size: 1rem; border-radius: 999px;
      background: var(--ink); color: var(--frame); border: 0; box-shadow: none; display: inline-flex;
      font-weight: 600; letter-spacing: -.01em;
    }
    .nav-contact.btn::after { display: none; }
    .menu-mail {
      display: block; text-align: center; color: var(--faint);
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .08em;
    }
    .hero { padding-top: 6.25rem; }
  }

  @media (max-width: 680px) {
    footer { flex-direction: column; gap: 1.75rem; }
    footer .cols { margin-left: 0; gap: 1.75rem 2rem; }
  }

  /* Comparison table -> stacked comparison cards */
  @media (max-width: 620px) {
    .compare { border: 0; border-radius: 0; overflow: visible; background: transparent; }
    .compare-wrap { overflow: visible; }
    .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
    .compare table { min-width: 0; }
    .compare thead { display: none; }

    .compare tbody tr {
      border: 1px solid var(--hairline); border-radius: 10px;
      background: var(--frame); padding: .95rem 1rem 1.05rem; margin-bottom: .7rem;
    }
    .compare tbody tr:last-child { margin-bottom: 0; }

    /* dimension name = card eyebrow */
    .compare tbody th {
      border: 0; border-bottom: 1px solid var(--hairline);
      padding: 0 0 .6rem; margin-bottom: .55rem;
      font-size: .69rem; font-weight: 700; color: var(--faint);
      letter-spacing: .09em; text-transform: uppercase;
    }

    /* each option = a rail-marked row so the three read side-by-side */
    .compare tbody td {
      border: 0; border-left: 2px solid var(--hairline);
      padding: .36rem .7rem; margin: 0;
      display: flex; align-items: baseline; gap: .7rem;
      font-size: .88rem; text-align: left; color: var(--muted);
    }
    .compare tbody td::before {
      content: attr(data-label); flex: none; width: 5.5rem;
      align-self: center;
      color: var(--faint); font-weight: 600; font-size: .69rem;
      letter-spacing: .04em; text-transform: uppercase; line-height: 1.25;
    }
    .compare tbody td.col-us {
      margin-top: .32rem;
      border-left: 2px solid var(--focus); border-radius: 0 9px 9px 0;
      padding-top: .5rem; padding-bottom: .5rem;
      background: color-mix(in srgb, var(--focus) 8%, transparent);
      color: var(--text); font-weight: 650;
    }
    .compare tbody td.col-us::before {
      content: "\2713  Dotnapps"; text-transform: none;
      font-size: .72rem; font-weight: 700; color: var(--focus); letter-spacing: .01em;
    }
  }

  /* Portrait phone */
  @media (max-width: 560px) {
    .frame { --fp: 1.15rem; padding: 12px 1.15rem 3rem; }
    .nav { padding-left: calc(1.15rem + .45rem); padding-right: calc(1.15rem + .45rem); }
    .hero { padding-top: 5.25rem; }
    h1 { font-size: clamp(2.2rem, 9.6vw, 2.75rem); }
    .hero-inner > p { font-size: 1rem; }
    .band { padding-top: clamp(2.75rem, 11vw, 3.5rem); }
    .band-head { gap: .75rem; }
    .band-head h2, .process-aside h2, .cta h2 { font-size: clamp(1.7rem, 7.5vw, 2.05rem); }
    .brief { margin-top: 1.5rem; }
    .brief .row { grid-template-columns: 1fr; }
    .careers { flex-direction: column; align-items: flex-start; }
  }

  /* Small phone */
  @media (max-width: 380px) {
    .frame { --fp: .9rem; padding-left: .9rem; padding-right: .9rem; }
    .nav { padding-left: calc(.9rem + .45rem); padding-right: calc(.9rem + .45rem); }
    h1 { font-size: 2.05rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; }
    @media (max-width: 820px) { .nav > .brand .brand-name { animation: none !important; max-width: 9rem; margin-left: .55rem; opacity: 1; } }
    .stack-track { transform: none !important; }
    .js .vc-in, .js .vc-out { opacity: 1 !important; transform: none !important; }
    .js .vc-typing { display: none !important; }
  }

  /* ---------- Phone hero (reference: mono pill, big two-tone headline,
     one row of pill buttons with arrows, mono caption) ---------- */
  .btn .arr { display: none; }
  @media (max-width: 620px) {
    .hero { padding-top: 5.6rem; }
    .hero-tag {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      text-transform: uppercase; letter-spacing: .17em; font-size: .66rem; font-weight: 500;
      padding: .6rem 1.05rem; margin-bottom: 1.7rem; color: var(--text);
    }
    .hero-tag .dot { display: none; }
    .hero h1 { font-size: clamp(2.35rem, 10.4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
    .hero h1 em { color: inherit; font-weight: inherit; }
    .hero h1 .h1-end { display: block; color: var(--muted); }
    .hero-inner > p { font-size: 1.06rem; line-height: 1.6; margin-top: .85rem; }
    .hero-actions { flex-wrap: nowrap; gap: .6rem; margin-top: 1.4rem; }
    .hero-actions .btn {
      flex: 0 1 auto; justify-content: center; gap: .45rem; white-space: nowrap;
      padding: .78rem 1.15rem; font-size: .86rem; border-radius: 999px;
    }
    .hero-actions .arr { display: block; width: 15px; height: 15px; flex: none; }
    .hero-caps { gap: 0; margin-top: 1.3rem; max-width: none; justify-content: flex-start;
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; line-height: 1.9; }
    .hero-caps li {
      background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
      font: inherit; letter-spacing: inherit; color: var(--muted);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    /* trailing dot (not leading) so a wrapped line never starts with one */
    .hero-caps li:not(:last-child)::after { content: "\00b7"; margin: 0 .75em; color: var(--faint); }
  }
  @media (min-width: 621px) { .hide-s { display: inline; } }
  @media (max-width: 620px) { .hide-s { display: none; } }

  /* ---------- Phone design system (sitewide, same language as the hero) ----------
     left-aligned sections, mono pills, big tight two-tone headings, roomy
     paragraphs, pill buttons with arrows, mono micro-labels. Phones only. */
  @media (max-width: 620px) {
    /* one shared left/right edge for the bar, hero and every section */
    .frame { --fp: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
    .nav { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-inner, .hero-strip-label { padding-inline: 0; }

    /* section header */
    .band-head { text-align: left; align-items: flex-start; max-width: none; gap: 1.05rem; margin: 0 0 1.9rem; }
    .eyebrow-pill {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .17em;
      font-size: .66rem; font-weight: 500; padding: .6rem 1.05rem; color: var(--text);
    }
    .eyebrow-pill::before { display: none; }
    .band-head h2, .process-aside h2, .cta h2, .tst-copy h2 {
      font-size: clamp(2.1rem, 9.4vw, 2.7rem); line-height: 1.04; letter-spacing: -.045em; text-align: left;
    }
    .h2-end { display: block; color: var(--muted); }
    .band-head p, .process-aside p, .tst-copy p { font-size: 1.04rem; line-height: 1.68; max-width: none; }

    .process-aside { align-items: flex-start; }
    .game-msg { text-align: left; }

    /* buttons: pills with arrows */
    .btn { border-radius: 999px; padding: .95rem 1.35rem; font-size: .92rem; gap: .5rem; }
    .btn .arr { display: block; width: 15px; height: 15px; flex: none; }

    /* Business OS block — note left, card stays centred */
    .product-note { text-align: left; }

    /* CTA / careers / notes */
    .cta { text-align: left; }
    .cta p { margin-left: 0; margin-right: 0; max-width: none; font-size: 1.04rem; line-height: 1.68; }
    .cta-actions { justify-content: flex-start; }
    .brief { margin-left: 0; margin-right: auto; }
    .work-note { text-align: left; margin-left: 0; }
    .magnetic { display: block; }
    .magnetic .btn { width: 100%; justify-content: center; }

    /* mono micro-labels */
    .work-tag, .practice-head .ct, .hero-strip-label, footer .col b, .compare tbody th {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; font-weight: 500;
    }
  }

  /* ---------- Testimonials: vertical, endlessly scrolling cards ---------- */
  .tst { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .tst-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; text-align: left; }
  .tst-copy h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0; text-wrap: balance; }
  .tst-copy p { margin: 0; color: var(--muted); max-width: 30rem; }
  .tst-viewport {
    position: relative; height: 500px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  .tst-track { display: flex; flex-direction: column; gap: 1rem; will-change: transform; }
  .js .tst-track { animation: tstScroll 52s linear infinite; }
  .tst-viewport:hover .tst-track { animation-play-state: paused; }
  .tst-set { display: flex; flex-direction: column; gap: 1rem; }
  /* two identical sets + a 1rem gap: one loop is exactly half the track plus half the gap */
  @keyframes tstScroll { to { transform: translateY(calc(-50% - .5rem)); } }
  .tst-card {
    margin: 0; padding: 1.25rem; border-radius: 12px;
    background: var(--sunken); border: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 1rem;
    -webkit-user-select: none; user-select: none;
  }
  .tst-top { display: flex; align-items: center; gap: .8rem; }
  .tst-ava {
    position: relative; overflow: hidden;
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: var(--ink); color: var(--frame);
    font: 700 .72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em;
  }
  .tst-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .tst-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .tst-who b { font-size: .92rem; font-weight: 600; color: var(--text); }
  .tst-who span { font-size: .78rem; color: var(--muted); }
  .tst-q { margin-left: auto; width: 20px; height: 20px; flex: none; color: var(--faint); }
  .tst-card blockquote { margin: 0; font-size: .95rem; line-height: 1.62; color: var(--text); }
  @media (prefers-reduced-motion: reduce) {
    .js .tst-track { animation: none; }
    .tst-viewport { overflow-y: auto; }
    .tst-set[aria-hidden="true"] { display: none; }
  }
  @media (max-width: 860px) {
    .tst { grid-template-columns: 1fr; gap: 1.6rem; }
    .tst-viewport { height: 440px; }
  }
  @media (hover: none) { .tst-viewport { pointer-events: none; } }

  /* ---------- Laptop / tablet hero: centred (phones keep the left-aligned reference layout) ---------- */
  @media (min-width: 621px) {
    .hero { text-align: center; }
    .hero-inner { max-width: 46rem; margin: 0 auto; }
    .hero-inner > h1 { max-width: none; }
    .hero-inner > p { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-caps { margin-left: auto; margin-right: auto; justify-content: center; }
    .hero-strip-label { text-align: center; }

    /* give the laptop hero room to breathe: wider block so the chips fit one row,
       roomier vertical rhythm, and keep the wave / grid art out of the text column */
    .hero-inner { max-width: 64rem; }
    .hero-inner > h1 { max-width: 46rem; margin-left: auto; margin-right: auto; }
    .hero-inner > p { max-width: 40rem; margin-top: 1.1rem; }
    .hero-actions { margin-top: 1.7rem; }
    .hero-caps { max-width: 60rem; margin-top: 1.5rem; }
    .hero-strip-label { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
    h1 { font-size: clamp(2.8rem, 5.7vw, 4.9rem); }
  }

  /* big screens: scale the whole hero up a notch */
  @media (min-width: 1100px) {
    .hero-inner > h1 { max-width: 60rem; }
    h1 { font-size: clamp(3.9rem, 5vw, 5.3rem); }
    .hero-tag { font-size: .84rem; padding: .38rem .95rem; margin-bottom: 1.6rem; }
    .hero-inner > p { max-width: 46rem; font-size: 1.12rem; line-height: 1.6; margin-top: 1.2rem; }
    .hero-actions { margin-top: 2.1rem; gap: .85rem; }
    .hero-actions .btn { padding: .72rem 1.3rem; font-size: .9rem; }
    .hero-caps { max-width: 66rem; margin-top: 1.9rem; gap: .6rem; }
    .hero-caps li { font-size: .9rem; padding: .45rem 1.05rem; }
    .hero-strip-label { font-size: .78rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
    .stack-track span { font-size: 1.08rem; padding: 0 2rem; }
  }

  /* ---------- Desktop hero = the phone hero, scaled up: left-aligned, mono pill, three-line two-tone headline, pill buttons with arrows, mono caption ---------- */
  @media (min-width: 621px) {
    .hero { text-align: left; }
    .hero .hero-inner { max-width: none; margin: 0; }
    .hero .hero-tag {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      text-transform: uppercase; letter-spacing: .17em; font-size: .68rem; font-weight: 500;
      padding: .56rem 1.05rem; margin-bottom: 1.6rem; color: var(--text);
    }
    .hero .hero-tag .dot { display: none; }
    .hero .hero-inner > h1 { max-width: none; margin: 0; line-height: 1.02; letter-spacing: -.045em; }
    .hero h1 em { display: block; color: inherit; font-weight: inherit; }
    .hero h1 .h1-end { display: block; color: var(--muted); }
    .hero .hero-inner > p { margin: 1.3rem 0 0; max-width: 38rem; line-height: 1.6; }
    .hero .hero-actions { justify-content: flex-start; flex-wrap: nowrap; gap: .7rem; margin-top: 1.9rem; }
    .hero .hero-actions .btn { flex: 0 1 auto; border-radius: 999px; gap: .5rem; white-space: nowrap; }
    .hero .hero-actions .arr { display: block; width: 16px; height: 16px; flex: none; }
    .hero .hero-caps {
      justify-content: flex-start; margin: 1.9rem 0 0; max-width: 46rem; gap: 0;
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; line-height: 2;
    }
    .hero .hero-caps li {
      background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
      font: inherit; letter-spacing: inherit; color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .hero .hero-caps li:not(:last-child)::after { content: "\00b7"; margin: 0 .8em; color: var(--faint); }
    .hero .hero-strip-label {
      text-align: left; margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; font-weight: 500;
    }
    /* desktop ripple: minimal — a few faint rings on the left, well clear of the globe */
    .hero-rings i { left: 30%; width: clamp(380px, 36%, 560px); border-color: color-mix(in srgb, currentColor 23%, transparent); background: none; }
    .hero-rings i:nth-child(n+7) { display: none; }
    .hero-rings::before { left: 30%; width: 40%; background: radial-gradient(closest-side, color-mix(in srgb, currentColor 7%, transparent), transparent); }
  }

  /* ---------- Desktop = the hero/Business OS language, site-wide: left-aligned sections, mono pills, big tight two-tone headings in true black,
     pill buttons with arrows, mono micro-labels, a dotted-grid motif ---------- */
  @media (min-width: 621px) {
    .band-head { text-align: left; align-items: flex-start; max-width: none; gap: 1.2rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
    .eyebrow-pill {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .17em;
      font-size: .68rem; font-weight: 500; padding: .56rem 1.05rem; color: var(--ink);
    }
    .eyebrow-pill::before { display: none; }
    .band-head h2, .process-aside h2, .cta h2, .tst-copy h2, .why-head h2 {
      font-size: clamp(2.4rem, 4.2vw, 3.7rem); line-height: 1.02; letter-spacing: -.045em; text-align: left; color: var(--ink); text-wrap: balance;
    }
    .cta h2 { font-size: clamp(2.7rem, 5vw, 4.4rem); }
    .h2-end { display: block; color: var(--muted); }
    .band-head p, .process-aside p, .tst-copy p { font-size: 1.05rem; line-height: 1.62; max-width: 34rem; text-align: left; }
    .process-aside p { max-width: 30rem; }

    .btn { border-radius: 999px; gap: .5rem; }
    .btn .arr { display: block; width: 15px; height: 15px; flex: none; }
    .nav-contact.btn .arr { display: none; }

    .cta { text-align: left; position: relative; isolation: isolate; }
    .cta::before {
      content: ""; position: absolute; inset: 0 -2rem; z-index: -1; pointer-events: none;
      background-image: radial-gradient(color-mix(in srgb, var(--text) 15%, transparent) 1px, transparent 1.4px); background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(closest-side at 78% 50%, #000, transparent 90%); mask-image: radial-gradient(closest-side at 78% 50%, #000, transparent 90%);
    }
    .cta p { margin-left: 0; margin-right: 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.62; }
    .cta-actions { justify-content: flex-start; }
    .work-note { text-align: left; margin-left: 0; }
    .product-note { text-align: left; }

    .work-tag, .practice-head .ct, footer .col b, .compare tbody th {
      font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; font-weight: 500;
    }
  }

  /* ---------- Every section opens like the hero: mono pill, big two-tone headline, one short line, a black pill button, a mono caption ---------- */
  .bh-actions { margin-top: 1.6rem; }
  .bh-caps { margin: 1.5rem 0 0; font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); line-height: 1.8; }
  .bh-caps i { font-style: normal; margin: 0 .75em; color: var(--faint); }
  .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps), .tst-copy > p:not(.bh-caps), .process-aside > p:not(.bh-caps) { max-width: 26rem; }
  .band-head, .why-head { gap: 0; }
  .band-head > h2, .why-head > h2 { margin-top: 1.4rem; }
  .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps) { margin-top: 1.2rem; }
  .cta .eyebrow-pill { margin-bottom: 1.4rem; display: inline-flex; }
  .cta .bh-caps { margin-bottom: 0; }
  @media (min-width: 621px) {
    .band-head h2, .process-aside h2, .cta h2, .tst-copy h2, .why-head h2 { font-size: clamp(2.7rem, 4.8vw, 4.3rem); line-height: 1.02; }
    .process-aside h2, .tst-copy h2 { margin-top: .4rem; }
    .cta h2 { font-size: clamp(2.8rem, 5.2vw, 4.6rem); }
    .band-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
  }
  @media (max-width: 620px) {
    .band-head h2, .process-aside h2, .cta h2, .tst-copy h2, .why-head h2 { font-size: clamp(2.3rem, 10.2vw, 2.9rem); }
    .bh-caps { font-size: .64rem; letter-spacing: .13em; }
  }

  /* ---------- Section openings = the hero, to the pixel: same pill, headline scale, line, button and caption sizes at every breakpoint ---------- */
  .band-head > .eyebrow-pill, .why-head > .eyebrow-pill, .process-aside > .eyebrow-pill, .tst-copy > .eyebrow-pill, .cta > .eyebrow-pill, .bsys-tag { font-size: .66rem; padding: .6rem 1.05rem; letter-spacing: .17em; margin: 0; }
  .band-head > h2, .why-head > h2, .process-aside > h2, .tst-copy > h2, .cta > h2, .bsys-copy > h2 { font-size: clamp(2.35rem, 10.4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; margin: 1.7rem 0 0; padding: 0; text-wrap: auto; color: var(--ink); text-align: left; }
  .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps), .process-aside > p:not(.bh-caps), .tst-copy > p:not(.bh-caps), .cta > p:not(.bh-caps), .bsys-copy > p:not(.bsys-caps) { font-size: 1.06rem; line-height: 1.6; margin: .85rem 0 0; max-width: 34rem; text-align: left; }
  .bh-actions, .bsys-actions { margin: 1.4rem 0 0; }
  .bh-actions .btn, .bsys-actions .btn { padding: .78rem 1.15rem; font-size: .86rem; gap: .45rem; }
  p.bh-caps, p.bsys-caps { margin: 1.3rem 0 0; font-size: .68rem; letter-spacing: .15em; line-height: 1.9; }
  .band-head, .why-head { gap: 0; }
  @media (min-width: 621px) {
    .band-head > .eyebrow-pill, .why-head > .eyebrow-pill, .process-aside > .eyebrow-pill, .tst-copy > .eyebrow-pill, .cta > .eyebrow-pill, .bsys-tag { font-size: .68rem; padding: .56rem 1.05rem; }
    .band-head > h2, .why-head > h2, .process-aside > h2, .tst-copy > h2, .cta > h2, .bsys-copy > h2 { font-size: clamp(2.8rem, 5.7vw, 4.9rem); margin-top: 1.6rem; }
    .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps), .process-aside > p:not(.bh-caps), .tst-copy > p:not(.bh-caps), .cta > p:not(.bh-caps), .bsys-copy > p:not(.bsys-caps) { font-size: clamp(1.02rem, 2.3vw, 1.2rem); margin-top: 1.1rem; }
    .bh-actions, .bsys-actions { margin-top: 1.7rem; }
    .bh-actions .btn, .bsys-actions .btn { padding: .75rem 1.25rem; font-size: .94rem; gap: .5rem; }
    p.bh-caps, p.bsys-caps { margin-top: 1.9rem; line-height: 2; }
  }
  @media (min-width: 1100px) {
    .band-head > h2, .why-head > h2, .process-aside > h2, .tst-copy > h2, .cta > h2, .bsys-copy > h2 { font-size: clamp(3.9rem, 5vw, 5.3rem); }
    .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps), .process-aside > p:not(.bh-caps), .tst-copy > p:not(.bh-caps), .cta > p:not(.bh-caps), .bsys-copy > p:not(.bsys-caps) { font-size: 1.12rem; margin-top: 1.2rem; }
    .bh-actions .btn, .bsys-actions .btn { padding: .72rem 1.3rem; font-size: .9rem; }
  }



  /* =====================================================================
     Ziiro-style system: hairlines, SEC. rows, mono micro-type, big calm numerals, 28px cards, dot-matrix figures, centred nav with a round badge
     ===================================================================== */
  :root { --hl: color-mix(in srgb, var(--ink) 8%, transparent); --card-line: color-mix(in srgb, var(--ink) 10%, transparent); }

  /* section label row */
  .sec-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; align-self: stretch;
    padding: 1.05rem 0; margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--hl);
    font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink);
  }
  .sec-row > span { display: inline-flex; align-items: center; }
  .sec-row i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 1.1rem; flex: none; }
  .sec-row .r { color: var(--muted); letter-spacing: .24em; white-space: nowrap; }
  .hero .sec-row { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); border-top: 0; padding-top: .4rem; }
  @media (max-width: 620px) { .sec-row { letter-spacing: .2em; font-size: .62rem; align-items: flex-start; } .sec-row .r { display: none; } .sec-row i { margin-right: .8rem; margin-top: .35em; } }
  .band-head > h2, .why-head > h2 { margin-top: 0; }
  .band-head .sec-row, .why-head .sec-row { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

  /* lead copy: grey with black keywords */
  .band-head > p:not(.bh-caps), .why-head > p:not(.bh-caps), .tst-copy > p:not(.bh-caps), .process-aside > p:not(.bh-caps), .bsys-copy > p:not(.bsys-caps), .cta > p:not(.bh-caps) { color: var(--muted); }
  .band-head > p b, .bsys-copy > p b { color: var(--ink); font-weight: 500; }

  /* big calm numerals */
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 30rem; margin-top: 2.2rem; }
  .stats > div { border-top: 1px solid var(--hl); padding: 1rem 0 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
  .stats small { font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  .stats b { font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); }

  /* cards: 28px radius, hairline, white */
  .practice, .work-card, .model, .tst-card, .wb, .bbox, .careers, .game-stage, .faq-shell, .compare { border-radius: 12px; }
  .practice, .work-card, .model, .tst-card, .wb, .careers { background: var(--frame); border: 1px solid var(--card-line); box-shadow: none; }
  .bbox { border-color: var(--card-line); }
  .practice:hover, .work-card:hover, .model:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
  .ind { font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; padding: .7rem 1.1rem; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--card-line); }


  /* nav: round badge left, links centred, black pill right, hairline under (desktop) */
  @media (min-width: 821px) {
    .nav { --navpad: max(clamp(1.15rem, 5vw, 3.25rem), calc(50% - 640px + clamp(1.15rem, 5vw, 3.25rem))); padding-bottom: 14px; }
    .nav::after { content: ""; position: absolute; left: var(--navpad); right: var(--navpad); bottom: 0; height: 1px; background: var(--hl); }
    .nav { background: color-mix(in srgb, var(--frame) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
    .nav-veil { display: none; }
    .nav > .brand { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--frame); border: 1px solid var(--card-line); }
    .nav > .brand svg { width: 21px; height: 21px; }
    .nav > .brand .brand-name { display: none; }
    .nav-links { position: absolute; inset: 0; margin: 0; max-width: none; overflow: visible; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 0px); }
    .nav-links > * { pointer-events: auto; }
    .nav-links a:not(.nav-contact) { font-size: .9rem; font-weight: 400; color: var(--muted); padding: .55rem 1.05rem; transition: color .2s ease; }
    .nav-links a:not(.nav-contact):hover, .nav-links a.is-cur { color: var(--ink); background: none; }
    .nav-links .badge { display: none; }
    .nav-contact.btn { position: absolute; right: var(--navpad); top: calc(env(safe-area-inset-top, 0px) + 12px); margin: 0; padding: .85rem 1.5rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
    .menu-theme { position: absolute; right: calc(var(--navpad) + 9rem); top: calc(env(safe-area-inset-top, 0px) + 17px); }
  }
  /* testimonials: themes list fills the copy column */
  .tst-themes { list-style: none; margin: .4rem 0 .2rem; padding: 0; width: 100%; max-width: 30rem; border-top: 1px solid var(--hairline); }
  .tst-themes li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .6rem; row-gap: .15rem; padding: .95rem 0; border-bottom: 1px solid var(--hairline); }
  .tst-themes span { grid-row: 1 / span 2; font: 400 .68rem/1.9 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; color: var(--faint); }
  .tst-themes b { font-size: .98rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
  .tst-themes em { font-style: normal; font-size: .86rem; line-height: 1.5; color: var(--muted); }
  /* ---------- Process: stacked cards ---------- */
  .ps { display: flex; flex-direction: column; gap: clamp(1.8rem, 4vw, 2.6rem); }
  .band .ps-head { position: static; align-self: flex-start; align-items: flex-start; text-align: left; max-width: 52rem; }
  .ps-list { list-style: none; margin: 0; padding: 0 0 .5rem; display: flex; flex-direction: column; gap: 1.1rem; }
  .ps-card {
    position: sticky; top: calc(92px + var(--i) * 18px);
    min-height: clamp(210px, 32vh, 290px); padding: clamp(1.4rem, 3.4vw, 2.4rem);
    border-radius: 12px; background: var(--frame); border: 1px solid var(--card-line);
    box-shadow: 0 -14px 28px -20px color-mix(in srgb, var(--ink) 30%, transparent);
    display: grid; grid-template-columns: clamp(4.5rem, 12vw, 9rem) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 2.4rem); align-content: space-between; align-items: start;
  }
  .ps-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font: 400 .68rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .ps-num { align-self: end; font-size: clamp(3rem, 8vw, 6rem); line-height: .9; font-weight: 500; letter-spacing: -.05em; color: var(--text); font-variant-numeric: tabular-nums; }
  .ps-body { align-self: end; }
  .ps-body h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--text); }
  .ps-body p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--muted); max-width: 30rem; }
  .ps-card.is-last { background: var(--ink); border-color: var(--ink); }
  .ps-card.is-last .ps-top { color: color-mix(in srgb, var(--frame) 55%, transparent); }
  .ps-card.is-last .ps-num, .ps-card.is-last .ps-body h3 { color: var(--frame); }
  .ps-card.is-last .ps-body p { color: color-mix(in srgb, var(--frame) 68%, transparent); }
  .ps-cta { margin-top: .2rem; }
  @media (max-width: 720px) {
    .ps-card { top: calc(76px + var(--i) * 14px); grid-template-columns: 1fr; row-gap: 1.2rem; border-radius: 12px; min-height: 220px; }
    .ps-num { align-self: start; }
  }


  /* section headings: smaller than the hero; boxier minimal corners */
  body h2.serif { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.04em; }
  @media (max-width: 620px) { body h2.serif { font-size: clamp(1.85rem, 7.8vw, 2.15rem); } }
  /* ---------- Services: sticky index + scrolling list ---------- */
  .sx { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
  .sx-index { display: none; }
  .sx .practices { display: block; }
  .sx .practice {
    display: block; grid-column: auto; max-width: none; margin: 0; padding: 0 0 clamp(1.8rem, 4vw, 2.8rem);
    background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; scroll-margin-top: 104px;
  }
  .sx .practice:hover { transform: none; box-shadow: none; border: 0; }
  .sx .practice + .practice { padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--hairline); }
  .sx .practice-head { margin-bottom: .6rem; align-items: baseline; }
  .sx .practice-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; letter-spacing: -.03em; }
  .sx .practice-head .ct { white-space: nowrap; flex: none; }
  .sx .practice-head .lt { font-size: 1rem; font-weight: 500; color: var(--faint); }
  .sx .practice li { grid-template-columns: 2.4rem 1fr; padding: .85rem 0; }
  .sx .practice li .t { font-size: 1rem; font-weight: 500; }
  @media (min-width: 821px) {
    .sx { grid-template-columns: 230px minmax(0, 1fr); }
    .sx-index { display: flex; flex-direction: column; position: sticky; top: 100px; border-top: 1px solid var(--hairline); }
    .sx-index a {
      display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: baseline; gap: .4rem;
      padding: .85rem 0; border-bottom: 1px solid var(--hairline); color: var(--faint); text-decoration: none; position: relative;
      transition: color .3s ease, padding-left .3s ease;
    }
    .sx-index .l { font-weight: 500; font-size: .9rem; }
    .sx-index .nm { font-size: .94rem; letter-spacing: -.01em; }
    .sx-index .c { font: 400 .62rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .08em; }
    .sx-index a:hover { color: var(--text); }
    .sx-index a.is-cur { color: var(--text); padding-left: .9rem; }
    .sx-index a.is-cur .nm { font-weight: 600; }
    .sx-index a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .3s ease; }
    .sx-index a.is-cur::before { transform: scale(1); }
    .sx .practice li .desc, .sx .practice li:hover .desc { max-height: none; opacity: 1; visibility: visible; margin-top: .3rem; }
    .sx .practice li .t, .sx .practice li:hover .t { color: var(--text); }
    .sx .practice li .chev { display: none; }
    .sx .practice li .t-btn { cursor: default; }
  }
  @media (prefers-reduced-motion: reduce) { .sx-index a, .sx-index a::before { transition: none; } }

  /* head aside: a small spec list on the right of the section heading (wide screens) */
  .hd-aside { display: none; margin: 0; }
  @media (min-width: 1100px) {
    .band-head, .why-head { position: relative; }
    .hd-aside { display: block; position: absolute; right: 0; top: 4.6rem; width: 19rem; border-top: 1px solid var(--hairline); }
    .hd-aside div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--hairline); }
    .hd-aside dt { font: 400 .6rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
    .hd-aside dd { margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; color: var(--text); text-align: right; }
  }

/* ---------- Products page ---------- */
.bsys-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pg-head { padding-top: clamp(5.5rem, 12vw, 8rem); }
.pg-head > .sec-row { margin-bottom: 0; }
.pg-head h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -.045em; margin: 1.6rem 0 0; text-align: left; max-width: 16ch; text-wrap: balance; }
.pg-head h1 .h1-end { display: block; color: var(--muted); }
.pg-head > p { margin: 1.2rem 0 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.62; color: var(--muted); text-align: left; }
.pg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; margin: 2.4rem 0 0; max-width: 44rem; }
.pg-facts > div { border-top: 1px solid var(--hairline); padding: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.pg-facts dt { font: 400 .6rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.pg-facts dd { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--text); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem; }
.pc { scroll-margin-top: 100px; background: var(--frame); border: 1px solid var(--card-line); border-radius: 12px; padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; transition: border-color .25s ease; }
.pc:hover, .pc:target { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; }
.pc-ico svg { width: 3.4rem; height: 3.4rem; display: block; border-radius: 28%; padding: .15rem; box-sizing: border-box; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 74%, var(--frame)) 0%, var(--ink) 100%); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .45); }
.pc-ico .fg { fill: var(--frame); } .pc-ico .fg2 { fill: color-mix(in srgb, var(--frame) 50%, transparent); } .pc-ico .dk { fill: var(--ink); } .pc-ico .dks { stroke: var(--ink); fill: none; }
.pc-n { font: 400 .66rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; color: var(--faint); }
.pc h3 { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -.025em; color: var(--text); }
.pc p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.pg-end { padding-bottom: clamp(3rem, 8vw, 5rem); }
.pg-end > p { margin: 1rem 0 0; max-width: 32rem; color: var(--muted); font-size: 1.04rem; line-height: 1.62; text-align: left; }
.pg-end h2 { text-align: left; }
@media (max-width: 620px) { .pg-facts { grid-template-columns: 1fr; gap: 1rem; } }
.pg-head .bh-actions, .pg-end .bh-actions { display: flex; flex-wrap: wrap; gap: .6rem; }