:root {
  /* neutrals — official Plooi editorial tokens */
  /* tokens:v2-neutrals:start */
  --cream: #f5f7fa;
  --cream-deep: #ebeff5;
  --paper: #fcfdfe;
  --ink: #1a1814;
  --ink-soft: #6b645b;
  /* tokens:v2-neutrals:end */
  --line: rgba(26, 24, 20, 0.1);
  /* accent — default blue (the brand accent). JS tweak can still switch it;
     per-accent presets below set the right value on FIRST paint via the
     html[data-accent] attribute, so there's no violet→blue flash on load. */
  --accent: #1f4788;
  --accent-deep: #163764;
  --accent-weak: rgba(31, 71, 136, 0.12);
  --accent-bright: #6f9bd6;
  /* fonts */
  --display: 'Bricolage Grotesque';
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --gut: clamp(20px, 4.5vw, 72px);
  --maxw: 1280px;
  /* ---- shared subpage grid (Why / Methods / Use Cases / Philosophy / Pricing)
     One raster so section widths don't drift page-to-page. Was: intro 900/920,
     section-head 680/720/760, measure 60/64ch — visibly uneven on /why. ---- */
  --sub-wide: 1180px; /* outer content container */
  --sub-intro: 920px; /* hero / intro block */
  --sub-head: 720px; /* section eyebrow + headline + dek */
  --sub-measure: 62ch; /* body-copy line length */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* accent presets — applied at first paint from the html[data-accent] attribute */
html[data-accent='blue'] {
  --accent: #1f4788;
  --accent-deep: #163764;
  --accent-bright: #6f9bd6;
  --accent-weak: rgba(31, 71, 136, 0.12);
}
html[data-accent='green'] {
  --accent: #1e5945;
  --accent-deep: #143f31;
  --accent-bright: #6fae93;
  --accent-weak: rgba(30, 89, 69, 0.12);
}
html[data-accent='oxblood'] {
  --accent: #7b2d3a;
  --accent-deep: #5c2029;
  --accent-bright: #c08490;
  --accent-weak: rgba(123, 45, 58, 0.12);
}
html[data-accent='ink'] {
  --accent: #2a2e3d;
  --accent-deep: #1d2029;
  --accent-bright: #9aa1bd;
  --accent-weak: rgba(42, 46, 61, 0.12);
}
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  overflow-x: clip;
}
::selection {
  background: var(--accent);
  color: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* paper texture / fold treatments (from the real Plooi page) */
.grain {
  background-image: radial-gradient(rgba(26, 24, 20, 0.035) 1px, transparent 1px);
  background-size: 14px 14px;
}
.paper-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 6px 18px rgba(26, 24, 20, 0.06);
}
.fold-corner {
  overflow: hidden;
}
.fold-corner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--ink) 10%, transparent) 50%
  );
}
.fold-shadow {
  filter: drop-shadow(0 1px 0 rgba(26, 24, 20, 0.06)) drop-shadow(0 6px 14px rgba(26, 24, 20, 0.1));
}
/* SVG recolor hooks so illustrations follow the accent tweak */
.ac-stroke {
  stroke: var(--accent);
}
.ac-fill {
  fill: var(--accent);
}
.ink-stroke {
  stroke: var(--ink);
}
.ink-fill {
  fill: var(--ink);
}

/* ===== CHAT vs CANVAS comparison ===== */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}
.vpane {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}
.vpane.old {
  background: var(--cream-deep);
}
.vpane .vhd {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.vpane h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 20px;
}
html[data-display='Bricolage Grotesque'] .vpane h3 {
  font-weight: 700;
}
.vpane.new h3 .em {
  color: var(--accent);
}
.vmid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  z-index: 2;
}
.vmid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--line);
}
.vmid span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 8px 4px;
  writing-mode: vertical-rl;
  letter-spacing: 0.04em;
  line-height: 1;
}
html[data-display='Bricolage Grotesque'] .vmid span {
  font-style: normal;
  font-weight: 600;
}
/* chat transcript mock */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bub {
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 13px;
  border-radius: 13px;
  max-width: 84%;
}
.bub.me {
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream);
  border-bottom-right-radius: 4px;
}
.bub.ai {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--ink-soft);
}
.bub.faded {
  opacity: 0.4;
}
.bub.faded2 {
  opacity: 0.18;
}
.chat .lost {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
  font-style: italic;
}
.chat .lost::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.chat .lost::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* mini canvas mock */
.minicanvas {
  position: relative;
  flex: 1;
  min-height: 230px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background-image: radial-gradient(circle at 1px 1px, rgba(23, 21, 17, 0.1) 1px, transparent 0);
  background-size: 20px 20px;
  background-color: color-mix(in srgb, var(--cream) 50%, var(--paper));
  overflow: hidden;
}
.mc-node {
  position: absolute;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--paper);
  border: 1.4px solid var(--ink);
  border-radius: 9px;
  padding: 7px 10px;
  box-shadow: 0 4px 12px rgba(40, 30, 12, 0.1);
}
.mc-node small {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 9.5px;
}
.mc-node.ac {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-weak),
    0 4px 12px rgba(40, 30, 12, 0.1);
}
.mc-node .d {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  vertical-align: middle;
}
.minicanvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.minicanvas svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
  opacity: 0.8;
}
.vfeat {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* ---- chat-vs-canvas animated compare (tweak: data-vscompare) ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-vscompare='on'] #why .bub {
    --vsop: 1;
    opacity: 0;
    transform: translateY(9px);
  }
  html[data-vscompare='on'] #why .bub.faded {
    --vsop: 0.4;
  }
  html[data-vscompare='on'] #why .bub.faded2 {
    --vsop: 0.18;
  }
  html[data-vscompare='on'] #why .chat .lost {
    opacity: 0;
  }
  html[data-vscompare='on'] #why.playing .bub {
    animation: vsBub 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  html[data-vscompare='on'] #why.playing .bub:nth-child(1) {
    animation-delay: 0.15s;
  }
  html[data-vscompare='on'] #why.playing .bub:nth-child(2) {
    animation-delay: 0.7s;
  }
  html[data-vscompare='on'] #why.playing .bub:nth-child(3) {
    animation-delay: 1.3s;
  }
  html[data-vscompare='on'] #why.playing .bub:nth-child(4) {
    animation-delay: 1.85s;
  }
  html[data-vscompare='on'] #why.playing .bub:nth-child(5) {
    animation-delay: 2.45s;
  }
  html[data-vscompare='on'] #why.playing .chat .lost {
    animation: vsLost 0.6s ease forwards 3s;
  }
  @keyframes vsBub {
    to {
      opacity: var(--vsop);
      transform: none;
    }
  }
  @keyframes vsLost {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* canvas side: wires fade in, nodes pop, the folded node pulses */
  html[data-vscompare='on'] #why .minicanvas svg path {
    opacity: 0;
  }
  html[data-vscompare='on'] #why .mc-node {
    opacity: 0;
    transform: scale(0.92) translateY(7px);
  }
  html[data-vscompare='on'] #why.playing .minicanvas svg path {
    animation: vsWire 0.7s ease forwards;
  }
  html[data-vscompare='on'] #why.playing .minicanvas svg path:nth-child(1) {
    animation-delay: 0.9s;
  }
  html[data-vscompare='on'] #why.playing .minicanvas svg path:nth-child(2) {
    animation-delay: 1.4s;
  }
  html[data-vscompare='on'] #why.playing .minicanvas svg path:nth-child(3) {
    animation-delay: 2s;
  }
  html[data-vscompare='on'] #why.playing .mc-node {
    animation: vsPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  html[data-vscompare='on'] #why.playing .mc-node:nth-of-type(1) {
    animation-delay: 0.5s;
  }
  html[data-vscompare='on'] #why.playing .mc-node:nth-of-type(2) {
    animation-delay: 1.1s;
  }
  html[data-vscompare='on'] #why.playing .mc-node:nth-of-type(3) {
    animation-delay: 1.7s;
  }
  html[data-vscompare='on'] #why.playing .mc-node:nth-of-type(4) {
    animation-delay: 2.3s;
  }
  html[data-vscompare='on'] #why.playing .mc-node.ac {
    animation:
      vsPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.7s,
      vsGlow 1.1s ease 2.3s;
  }
  @keyframes vsWire {
    to {
      opacity: 0.8;
    }
  }
  @keyframes vsPop {
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes vsGlow {
    0% {
      box-shadow:
        0 0 0 2px var(--accent-weak),
        0 4px 12px rgba(40, 30, 12, 0.1);
    }
    40% {
      box-shadow:
        0 0 0 7px var(--accent-weak),
        0 4px 16px rgba(40, 30, 12, 0.14);
    }
    100% {
      box-shadow:
        0 0 0 2px var(--accent-weak),
        0 4px 12px rgba(40, 30, 12, 0.1);
    }
  }
}
.vfeat .f {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.vfeat .f .tick {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}
.vfeat.old .f .tick {
  color: var(--ink-soft);
}
@media (max-width: 820px) {
  .versus {
    grid-template-columns: 1fr;
  }
  .vmid {
    display: none;
  }
  .vpane.old {
    border-bottom: 1px solid var(--line);
  }
}

/* ===== FOLD-SHEET texture layer (tweakable: data-texture="worksheet") ===== */
html[data-texture='worksheet'] body {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(50% - 0.5px),
    color-mix(in srgb, var(--ink) 6%, transparent) calc(50% - 0.5px),
    color-mix(in srgb, var(--ink) 6%, transparent) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
/* crop / registration marks at each labelled screen's corners */
html[data-texture='worksheet'] [data-screen-label] {
  position: relative;
}
/* proper registration / crop marks at all four corners */
html[data-texture='worksheet'] [data-screen-label] {
  --cm: color-mix(in srgb, var(--ink) 38%, transparent);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm));
  background-size:
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px;
  background-position:
    18px 18px,
    18px 18px,
    calc(100% - 18px) 18px,
    calc(100% - 18px) 18px,
    18px calc(100% - 18px),
    18px calc(100% - 18px),
    calc(100% - 18px) calc(100% - 18px),
    calc(100% - 18px) calc(100% - 18px);
}
html[data-texture='worksheet'][data-hero='dark'] .hero {
  --cm: rgba(255, 255, 255, 0.34);
}
/* dashed mountain/valley fold guide between sections — flex row, label centered between two dashed segments */
.foldguide {
  display: none;
}
html[data-texture='worksheet'] .foldguide {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gut);
  position: relative;
  z-index: 25;
}
.foldguide .fg-line {
  flex: 1;
  height: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.foldguide .fg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foldguide .fg-tick {
  flex: none;
  width: 22px;
  height: 12px;
  display: block;
}
.foldguide .fg-tick path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-texture='worksheet'] .paper-card,
html[data-texture='worksheet'] .mcard {
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.05),
    0 10px 26px rgba(26, 24, 20, 0.1);
}
html[data-texture='worksheet'] .frame {
  transform: rotate(-0.5deg);
}

/* ---- display type, tuned per family ---- */
.display {
  font-family: var(--display), Georgia, serif;
  font-weight: 600;
}
html[data-display='Fraunces'] .display {
  font-weight: 540;
  letter-spacing: -0.018em;
}
html[data-display='Fraunces'] .em {
  font-style: italic;
  font-weight: 500;
}
html[data-display='Bricolage Grotesque'] .display {
  font-family: var(--display), sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.em {
  color: var(--accent);
}

/* ---- buttons ---- */
.btn {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.16s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--fill:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.btn svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-left: 4px;
  flex: none;
}

/* ---- nav ----
   Scoped to the nav's #hdr, not the bare `header` element: pages use their
   own <header> blocks for section intros (e.g. LegalPage's `.lg-intro`), and
   a bare `header { position:sticky; z-index:60 }` made those pin to the top
   and collide with the site nav. */
#hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.brand {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}
html[data-display='Bricolage Grotesque'] .brand {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand .zfold {
  width: 26px;
  height: 26px;
  flex: none;
}
.brand .zfold rect {
  fill: var(--ink);
  transition: fill 0.3s;
}
/* Plooi mark · Variant B (Crease) — the real V8 logo */
.cmark {
  flex: none;
  overflow: visible;
}
.cmark .v {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke 0.3s;
}
.cmark .crease {
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-dasharray: 1.6 2;
  transition: stroke 0.3s;
}
.navlinks {
  display: flex;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
}
.navlinks a {
  color: var(--ink-soft);
  transition: color 0.15s;
}
.navlinks a:hover {
  color: var(--ink);
}
.navcta {
  display: flex;
  align-items: center;
  gap: 22px;
}
/* The "Log in" link uses .navlogin (styled in V2Layout's inline <style>);
   its former .navcta .login base rules were dead and have been removed. */
.navburger {
  display: none;
  /* button reset — becomes a flex hamburger on mobile (see the media query) */
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
@media (max-width: 900px) {
  .nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 70px;
  }
  .navburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    cursor: pointer;
    border-radius: 9px;
    -webkit-tap-highlight-color: transparent;
  }
  .navburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    margin: 0 auto;
    transition:
      transform 0.25s,
      opacity 0.18s;
  }
  .nav--open .navburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav--open .navburger span:nth-child(2) {
    opacity: 0;
  }
  .nav--open .navburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .navlinks {
    display: none;
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    font-size: 17px;
    padding: 4px 0 8px;
  }
  .navlinks a {
    padding: 13px 2px;
    border-top: 1px solid var(--line);
    color: var(--ink);
  }
  .navcta {
    display: none;
    order: 6;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 20px;
    padding: 14px 0 18px;
    border-top: 1px solid var(--line);
  }
  .nav--open .navlinks {
    display: flex;
  }
  .nav--open .navcta {
    display: flex;
  }
  html[data-hero='dark'] header .navburger span {
    background: #f1eadd;
  }
  html[data-hero='dark'] header.scrolled .navburger span {
    background: var(--ink);
  }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(620px, 90vh, 940px);
  display: flex;
  align-items: center;
  padding: clamp(60px, 9vw, 120px) 0;
  transition:
    background 0.35s,
    color 0.35s;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -12% -6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      48% 52% at 78% 20%,
      color-mix(in srgb, var(--accent) 15%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 46% at 12% 92%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 72%
    ),
    radial-gradient(60% 60% at 50% 4%, rgba(120, 128, 180, 0.05), transparent 72%);
  filter: blur(8px);
  transition: opacity 0.35s;
}
html[data-hero='dark'] .hero {
  --ink: #f1eadd;
  --ink-soft: #b4ab9c;
  --line: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  background:
    radial-gradient(
      70% 56% at 60% -4%,
      color-mix(in srgb, var(--accent-bright) 20%, transparent) 0%,
      transparent 56%
    ),
    radial-gradient(120% 96% at 50% 124%, #241f1a 0%, #16130f 62%), #14110e;
}
html[data-hero='dark'] .hero::before {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent-bright) 18%, transparent),
    transparent 70%
  );
  inset: -14% 18% auto 18%;
  height: 78%;
  filter: blur(10px);
}
html[data-hero='dark'] .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.09) 1px,
    transparent 0
  );
  background-size: 46px 46px;
  opacity: 0.5;
}
html[data-hero='dark'] .hero .btn {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--ink);
}
html[data-hero='dark'] .hero .btn:hover {
  background: var(--cream);
  color: #16130f;
}
html[data-hero='dark'] .hero .btn--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
html[data-hero='dark'] .hero .btn--fill:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #16130f;
}
/* sticky header tone over a dark hero */
html[data-hero='dark'] #hdr {
  background: color-mix(in srgb, #16130f 78%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-hero='dark'] header .navlinks a,
html[data-hero='dark'] header .navcta .navlogin {
  color: #b4ab9c;
}
html[data-hero='dark'] header .navlinks a:hover,
html[data-hero='dark'] header .navcta .navlogin:hover {
  color: #f1eadd;
}
html[data-hero='dark'] header .brand {
  color: #f1eadd;
}
html[data-hero='dark'] header .brand .zfold rect {
  fill: #f1eadd;
}
html[data-hero='dark'] header .brand .cmark .v {
  stroke: #f1eadd;
}
html[data-hero='dark'] header .btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: #f1eadd;
}
html[data-hero='dark'] header .btn--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
html[data-hero='dark'] #hdr.scrolled {
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  border-bottom-color: var(--line);
}
html[data-hero='dark'] header.scrolled .navlinks a,
html[data-hero='dark'] header.scrolled .navcta .navlogin {
  color: var(--ink-soft);
}
html[data-hero='dark'] header.scrolled .brand {
  color: var(--ink);
}
html[data-hero='dark'] header.scrolled .brand .zfold rect {
  fill: var(--ink);
}
html[data-hero='dark'] header.scrolled .brand .cmark .v {
  stroke: var(--ink);
}
html[data-hero='dark'] header.scrolled .btn {
  border-color: var(--ink);
  color: var(--ink);
}
html[data-hero='dark'] header.scrolled .btn--fill {
  color: #fff;
}

.hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.hero-inner .tagpill,
.hero-inner .hero-actions,
.hero-inner .trust {
  pointer-events: auto;
}
.tagpill {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.tagpill .s {
  color: var(--accent);
}
html[data-hero='dark'] .tagpill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e9e0d2;
}
html[data-hero='dark'] .tagpill .s {
  color: var(--accent-bright);
}
h1 {
  font-family: var(--display), serif;
  font-size: clamp(42px, 6.2vw, 90px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 540;
  margin: 24px 0 0;
  width: 100%;
}
html[data-display='Bricolage Grotesque'] h1 {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
h1 .em {
  position: relative;
  white-space: nowrap;
}
/* hero contrast pair: muted first line + hand-inked strike through the dismissed word */
h1 .dim {
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
h1 .strike {
  position: relative;
  white-space: nowrap;
}
h1 .strike::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  top: 50%;
  height: 0.07em;
  background: var(--ink);
  border-radius: 40% 60% 50% 45%/60%;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
html[data-motion='fold'] h1 .strike::after {
  animation: inkdraw-strike 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
@keyframes inkdraw-strike {
  from {
    transform: rotate(-1.5deg) scaleX(0);
  }
  to {
    transform: rotate(-1.5deg) scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion='fold'] h1 .strike::after {
    animation: none;
  }
}
.hero p.sub {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 26px auto 0;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- compact-viewport hero canvas snapshot ----
   The live interactive board (>1024px) and the decorative .hnode network both
   vanish below 1024px, leaving the hero visually empty. Fill it there with a
   tidy static mini-canvas — same node/wire language, no interactivity, no
   video weight. Desktop hides it (the live canvas / nodes lead). The full
   launch film stays one tap away via the "Watch the film" CTA. */
.hero-canvas {
  display: none;
}
@media (max-width: 1024px) {
  /* The decorative node network (which the hero clips with overflow:hidden)
     is gone at this width, so let the hero grow to fit the snapshot instead
     of clipping it on shorter viewports. */
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: clamp(28px, 6vh, 48px);
  }
  .hero-canvas {
    display: block;
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: clamp(24px, 5vh, 44px) auto 0;
  }
  .hero-canvas svg.hc-board {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(26, 24, 20, 0.1));
  }
}

/* ---- hero canvas: live-collaboration overlay (the film's "multiplayer" beat) ----
   Absolute layers over the static board. Only ever visible inside .hero-canvas,
   which is display:none above 1024px, so these cost nothing on desktop. */
.hc-avatars {
  position: absolute;
  top: 11px;
  right: 13px;
  display: flex;
  z-index: 4;
}
.hc-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: -6px;
  border: 2px solid var(--paper);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  animation: hc-av-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hc-av1 {
  background: var(--accent);
  animation-delay: 0.3s;
}
.hc-av2 {
  background: #7a8b6e;
  animation-delay: 0.45s;
}
.hc-av3 {
  background: #b5532f;
  animation-delay: 0.6s;
}
@keyframes hc-av-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.hc-cursor {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  z-index: 5;
  pointer-events: none;
  will-change: top, left;
}
.hc-cursor svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
  flex: none;
}
.hc-name {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.4;
}
.hc-cursor-a .hc-name {
  background: var(--accent);
}
.hc-cursor-b .hc-name {
  background: #7a8b6e;
}
.hc-cursor-a {
  top: 20%;
  left: 18%;
  animation: hc-drift-a 9s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
.hc-cursor-b {
  top: 60%;
  left: 66%;
  animation: hc-drift-b 8s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
@keyframes hc-drift-a {
  0% {
    top: 20%;
    left: 18%;
  }
  28% {
    top: 52%;
    left: 42%;
  }
  52% {
    top: 22%;
    left: 74%;
  }
  78% {
    top: 58%;
    left: 56%;
  }
  100% {
    top: 20%;
    left: 18%;
  }
}
@keyframes hc-drift-b {
  0% {
    top: 60%;
    left: 66%;
  }
  26% {
    top: 22%;
    left: 78%;
  }
  50% {
    top: 50%;
    left: 46%;
  }
  76% {
    top: 82%;
    left: 62%;
  }
  100% {
    top: 60%;
    left: 66%;
  }
}
/* edit-flash ring on the shared "Affinity" node, synced to Tom's pass. Drawn as
   an SVG <rect> inside the board so it aligns with the node exactly (the old
   absolutely-positioned % overlay drifted a few px off the node). */
.hc-flashring {
  opacity: 0;
  pointer-events: none;
  animation: hc-flash 8s ease-in-out infinite;
}
@keyframes hc-flash {
  0%,
  40% {
    opacity: 0;
  }
  46%,
  56% {
    opacity: 0.85;
  }
  62%,
  100% {
    opacity: 0;
  }
}
/* Tom's comment pill near the shared node */
.hc-comment {
  position: absolute;
  left: 39%;
  top: 27%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 5px;
  box-shadow: 0 10px 26px rgba(26, 24, 20, 0.16);
  font-family: var(--body);
  font-size: 10.5px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  z-index: 6;
  animation: hc-comment 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.hc-comment b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7a8b6e;
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
@keyframes hc-comment {
  0%,
  42% {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  50%,
  74% {
    opacity: 1;
    transform: none;
  }
  82%,
  100% {
    opacity: 0;
    transform: translateY(-5px) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-cursor-a,
  .hc-cursor-b,
  .hc-flashring,
  .hc-comment,
  .hc-av {
    animation: none;
  }
  .hc-av {
    opacity: 1;
    transform: none;
  }
  .hc-comment {
    opacity: 1;
    transform: none;
  }
}

/* scattered method nodes + wires */
.hero-net {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.35s;
}
.netwires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.nw {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 4 9;
  opacity: 0.55;
  animation: flow 2.4s linear infinite;
}
.nw.hot {
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 4 9;
  opacity: 0.55;
}
html[data-hero='dark'] .nw {
  stroke: rgba(255, 255, 255, 0.2);
}
html[data-hero='dark'] .nw.hot {
  stroke: var(--accent-bright);
}
.nwpulse {
  fill: color-mix(in srgb, var(--ink) 30%, transparent);
  r: 2.2;
  opacity: 0.6;
}
html[data-hero='dark'] .nwpulse {
  fill: rgba(255, 255, 255, 0.4);
}
.hnode {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: left;
  font-family: var(--body);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  width: 202px;
  min-height: 60px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 13px;
  padding: 11px 14px;
  box-shadow: 0 12px 30px rgba(40, 30, 12, 0.12);
  backdrop-filter: blur(3px);
}
html[data-hero='dark'] .hnode {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.hnode .ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-weak);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
}
.hnode .ic svg {
  width: 24px;
  height: 24px;
}
html[data-hero='dark'] .hnode .ic {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-bright);
}
.hnode .ntext {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hnode .ncat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hnode .ndot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: none;
}
html[data-hero='dark'] .hnode .ndot {
  background: var(--accent-bright);
}
.hnode .ntitle {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
html[data-display='Bricolage Grotesque'] .hnode .ntitle {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hnode .nsub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.2;
  margin-top: 2px;
}
.hnode.hot {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-weak),
    0 12px 30px rgba(40, 30, 12, 0.16);
}
html[data-hero='dark'] .hnode.hot {
  border-color: var(--accent-bright);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-bright) 25%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.5);
}
.hnode.fl {
  animation: hfloat 8s ease-in-out infinite;
}
@keyframes hfloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 9px));
  }
}
/* draggable states */
.hnode {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  transition:
    box-shadow 0.2s,
    left 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hnode.placed {
  animation: none !important;
}
.hnode.grabbing {
  cursor: grabbing;
  z-index: 6;
  transition: none;
  box-shadow:
    0 0 0 2px var(--accent-weak),
    0 22px 50px rgba(40, 30, 12, 0.24);
}
html[data-hero='dark'] .hnode.grabbing {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent),
    0 22px 54px rgba(0, 0, 0, 0.6);
}
.hnode.settled {
  animation: hsettle 460ms cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes hsettle {
  0% {
    transform: translate(-50%, -50%) scale(1.06);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.985);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.hero-draghint {
  position: static;
  margin: 20px auto 0;
  transform: none;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.66;
  pointer-events: none;
  white-space: nowrap;
}
.hero-draghint svg {
  width: 15px;
  height: 15px;
}
.hero-draghint svg path {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
html[data-hero='dark'] .hero-draghint svg path {
  stroke: var(--accent-bright);
}
@media (max-width: 1024px) {
  .hero-draghint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hnode.fl {
    animation: none;
  }
}
html[data-graphics='subtle'] .hero-net {
  opacity: 0.32;
}
html[data-graphics='subtle'] .hnode {
  opacity: 0;
}
html[data-graphics='subtle'] .nwpulse {
  display: none;
}
@media (max-width: 1024px) {
  .hnode {
    display: none;
  }
  .netwires {
    opacity: 0.45;
  }
}

/* node float delays (mode-independent) */
.hnode:nth-of-type(1) {
  animation-delay: -0.3s;
}
.hnode:nth-of-type(2) {
  animation-delay: -1.3s;
}
.hnode:nth-of-type(3) {
  animation-delay: -0.9s;
}
.hnode:nth-of-type(4) {
  animation-delay: -2.1s;
}
.hnode:nth-of-type(5) {
  animation-delay: -1.7s;
}
.hnode:nth-of-type(6) {
  animation-delay: -3s;
}
.hnode:nth-of-type(7) {
  animation-delay: -2.6s;
}
.hnode:nth-of-type(8) {
  animation-delay: -0.6s;
}

/* ---- HERO CANVAS: arc (horseshoe, default) — positions in CSS so drag still wins ---- */
html[data-heroflow='arc'] .hnode:nth-of-type(1) {
  left: 13%;
  top: 20%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(2) {
  left: 8%;
  top: 45%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(3) {
  left: 13%;
  top: 70%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(4) {
  left: 35%;
  top: 89%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(5) {
  left: 65%;
  top: 89%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(6) {
  left: 87%;
  top: 70%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(7) {
  left: 92%;
  top: 45%;
}
html[data-heroflow='arc'] .hnode:nth-of-type(8) {
  left: 87%;
  top: 20%;
}

/* ---- HERO CANVAS: flow (full-hero scattered board, like a live Plooi canvas) ---- */
html[data-heroflow='flow'] .trust {
  display: none;
}
html[data-heroflow='flow'] .hnode:nth-of-type(1) {
  left: 15%;
  top: 19%;
} /* Product Briefing — top-left */
html[data-heroflow='flow'] .hnode:nth-of-type(2) {
  left: 86%;
  top: 22%;
} /* Target Group — top-right */
html[data-heroflow='flow'] .hnode:nth-of-type(3) {
  left: 50%;
  top: 14%;
} /* Competitor Research — top-center */
html[data-heroflow='flow'] .hnode:nth-of-type(4) {
  left: 91%;
  top: 49%;
} /* Interview Guide — right-mid */
html[data-heroflow='flow'] .hnode:nth-of-type(5) {
  left: 31%;
  top: 91%;
} /* Synthetic Interview — bottom-left of the CTA row (row grew wider with the film button) */
html[data-heroflow='flow'] .hnode:nth-of-type(6) {
  left: 9%;
  top: 49%;
} /* Persona — left-mid */
html[data-heroflow='flow'] .hnode:nth-of-type(7) {
  left: 15%;
  top: 75%;
} /* Concept — lower-left */
html[data-heroflow='flow'] .hnode:nth-of-type(8) {
  left: 86%;
  top: 75%;
} /* Storyboard — lower-right */

.trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 46px);
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 72px);
  opacity: 0.62;
}
.trust .tl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.trust .lg {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html[data-display='Bricolage Grotesque'] .trust .lg {
  font-weight: 700;
}
.trust .logo-slot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 9px;
  padding: 9px 18px;
}
html[data-hero='dark'] .trust .logo-slot {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ---- ticker ---- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  background: var(--cream-deep);
}
.ticker .track {
  display: inline-block;
  animation: tk 38s linear infinite;
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(24px, 3.6vw, 46px);
  letter-spacing: -0.01em;
  padding: 18px 0;
}
html[data-display='Bricolage Grotesque'] .ticker .track {
  font-weight: 700;
}
.ticker .track span {
  margin: 0 20px;
}
.ticker .track .s {
  color: var(--ink-soft);
}
.ticker .track .a {
  color: var(--accent);
}
@keyframes tk {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- stats band (always dark warm) ---- */
.statsband {
  background: radial-gradient(120% 130% at 50% -20%, #241f1a 0%, #16130f 70%);
  color: #f1eadd;
}
.statsband .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: clamp(54px, 7vw, 90px) var(--gut);
}
.stat {
  padding: 0 clamp(10px, 2.4vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.stat .n {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(54px, 8vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: #fff;
}
html[data-display='Bricolage Grotesque'] .stat .n {
  font-weight: 700;
}
.stat .n .u {
  font-size: 0.3em;
  color: var(--accent-bright);
  font-weight: 600;
  margin-left: 0.1em;
  letter-spacing: 0;
  font-style: normal;
}
.stat p {
  margin-top: 16px;
  color: #b4ab9c;
  font-size: 15px;
  max-width: 30ch;
}
.stat p b {
  color: #e9e0d2;
  font-weight: 600;
}
@media (max-width: 760px) {
  .statsband .wrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .stat {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---- section scaffold ---- */
section.blk {
  padding: clamp(64px, 9vw, 128px) 0;
  border-top: 1px solid var(--line);
}
section.tint {
  background: var(--cream-deep);
}
.shead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: baseline;
  margin-bottom: clamp(44px, 5vw, 68px);
}
.shead .idx {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--accent);
}
.shead h2 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.022em;
}
html[data-display='Bricolage Grotesque'] .shead h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.shead .lede {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.5vw, 19px);
}
@media (max-width: 680px) {
  .shead {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---- teaser band (slim cross-link to a dedicated page) ---- */
.teaser {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.teaser-main .tidx {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
html[data-display='Bricolage Grotesque'] .teaser-main .tidx {
  font-weight: 700;
}
.teaser-main h2 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.022em;
}
html[data-display='Bricolage Grotesque'] .teaser-main h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.94;
}
.teaser-main h2 .em {
  color: var(--accent);
}
.teaser-main p {
  margin: 20px 0 30px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  text-wrap: pretty;
}
.teaser-main .btn svg {
  width: 15px;
  height: 15px;
  margin-left: 2px;
  transition: transform 0.18s ease;
}
html[data-micro='on'] .teaser-main .btn:hover svg {
  transform: translateX(3px);
}
.teaser-vis {
  position: relative;
}
/* values teaser: three labelled glyphs */
.teaser-vals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teaser-val {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px 20px;
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 8px 22px rgba(26, 24, 20, 0.05);
}
.teaser-val .tv-ic {
  flex: none;
  width: 30px;
  height: 30px;
}
.teaser-val h4 {
  font-family: var(--display), serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.012em;
}
.teaser-val .tv-sub {
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
}
html[data-display='Bricolage Grotesque'] .teaser-val .tv-sub {
  font-style: normal;
  font-weight: 500;
}
@media (max-width: 820px) {
  .teaser {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .teaser-vis .minicanvas {
    min-height: 240px;
  }
}

/* ---- how it works: der Faltstreifen (#927/#931) ----
   Vorher: vier `.step`-Reihen untereinander, je 299 px, alle gleich schwer —
   1763 px fuer 242 Woerter. Jetzt EINE Illustration ueber vier Panels, darunter
   vier Beschriftungsspalten, deren Trennlinien die Falze des Streifens nach
   unten fortsetzen.

   Geloescht wurden dabei 89 Zeilen toter Code (`.ill .brief`, `.ill .quad`,
   `.ill .plois`) — die Klassen kamen im Markup nirgends vor.

   ACHTUNG beim Lesen der Namen: `.fl` waere hier naheliegend gewesen und ist
   vergeben — `landing-content.html` hat acht `<div class="hnode fl">` im Hero.
   Deshalb `.fcap` / `.fc-n`. */
.foldstrip {
  margin-top: clamp(22px, 3vw, 34px);
  height: clamp(150px, 17vw, 180px);
  border: 1.4px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
/* Der Streifen benutzt dieselben Bausteine wie die alten Schritt-Bilder
   (`.stepcanvas`, `.sc-card`, `.fold-badge`, `.sc-chip`) — die Regeln dafuer
   stehen unveraendert weiter unten. */
.foldstrip .fs-folds,
.foldstrip .fs-ticks,
.foldstrip .fs-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.foldstrip .fs-folds {
  z-index: 1;
}
.foldstrip .fs-ticks {
  z-index: 1;
}
.foldstrip .fs-wires {
  z-index: 2;
}
.fs-crease line {
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
}
.fs-ticks path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 34%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Durchgezogen und im Akzent — die alten Schritt-Draehte lagen bei
   `stroke-dasharray: 4 9` und 0.7 Deckkraft, also effektiv unsichtbar. Genau
   diese Linie ist die Aussage der Sektion. */
.foldstrip .fs-wires path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-dasharray: none;
  opacity: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fs-knot {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 1.5;
}
/* Die Herkunftszeile — der Beleg fuer „Nothing gets retyped".
   Jede Karte zitiert woertlich, was in der Karte links davon steht. Ohne das
   zeigte der Streifen vier unverbundene Fakten mit Linien dazwischen: nichts,
   woran man SEHEN kann, dass nichts abgetippt wurde. Statisch lesbar, ganz ohne
   Bewegung — die Animation zeigt nur noch die Reihenfolge. */
.foldstrip .sc-card .ss .von {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 4px;
}
.foldstrip .frag {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}
/* Der wandernde Schnipsel — reine Zugabe.
   Standardmaessig NICHT vorhanden: derselbe Text steht als Herkunftszeile
   statisch in der Zielkarte. Wer reduzierte Bewegung eingestellt hat, bekommt
   ihn gar nicht erst zu sehen, statt eines Elements, das ploetzlich irgendwo
   herumliegt. */
.fs-flug {
  display: none;
}

/* Der Rahmen um alle vier Panels IST der Plooi. */
.fs-rahmen {
  position: absolute;
  inset: 5px;
  z-index: 4;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  pointer-events: none;
}
/* Die Basisregel ist `.sc-card .fold-badge` — der Rahmen ist keine Karte, also
   bekommt er das Aussehen hier noch einmal. Ohne das steht „Plooi" als nackter
   schwarzer Text in der Ecke. */
.fs-rahmen .fold-badge {
  position: absolute;
  top: -8px;
  left: 14px;
  right: auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
  box-shadow: 0 3px 7px rgba(40, 30, 12, 0.2);
}

.foldlegend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(20px, 2.6vw, 30px);
}
.fcap {
  padding: 0 clamp(12px, 1.6vw, 22px);
  /* Setzt die Falzlinie des Streifens nach unten fort. */
  border-left: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
}
.fcap:first-child {
  border-left: 0;
  padding-left: 0;
}
.fcap:last-child {
  padding-right: 0;
}
.fc-n {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.fcap h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 7px;
}
html[data-display='Bricolage Grotesque'] .fcap h3 {
  font-weight: 700;
}
.fcap p {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.45;
}
/* Kein Knopf hier — `#hdr` ist sticky und traegt „Join the alpha" die ganze
   Seite lang. Nur die Zugangs-Zeile, als ruhige Fusszeile. */
.ff-note {
  display: block;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* ---- Aufbau beim Hereinscrollen (data-howbuild) ----
   Frueher haengte das an `.step`; jetzt am Streifen. `landing-inline.js` setzt
   `.built`, sobald er im Blick ist. Ohne diese Zeile dort bliebe der Streifen
   leer — das ist der einzige Weg, wie der Umbau still kaputtgeht. */
@media (prefers-reduced-motion: no-preference) {
  html[data-howbuild='on'] .foldstrip .sc-card,
  html[data-howbuild='on'] .foldstrip .sc-chip {
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  html[data-howbuild='on'] .foldstrip .fs-wires path,
  html[data-howbuild='on'] .foldstrip .fs-wires circle {
    transition: opacity 0.5s ease;
  }
  html[data-howbuild='on'] .foldstrip:not(.built) .sc-card,
  html[data-howbuild='on'] .foldstrip:not(.built) .sc-chip {
    opacity: 0;
    transform: perspective(520px) rotateX(-16deg) translateY(9px);
    transform-origin: top center;
  }
  html[data-howbuild='on'] .foldstrip:not(.built) .fs-wires path,
  html[data-howbuild='on'] .foldstrip:not(.built) .fs-wires circle {
    opacity: 0;
  }
  /* ---- Die Zeitleiste ----
     Eine Regel: nichts erscheint, bevor das, woraus es entsteht, da ist.
     Karte -> ihr Draht -> Knoten auf der Falzlinie -> der Schnipsel fliegt ->
     Zielkarte formt sich um ihn -> ihre Herkunftszeile bleibt zurueck.

     Zwei Fehler stecken in diesen Zahlen, beide gemessen und behoben:
       · Vorher lagen ALLE Draehte pauschal bei 0,5 s und waren bei 1,05 s da,
         waehrend Karte 4 erst 1,40 s kam — die Verbindung war gezeichnet,
         bevor es das Verbundene gab.
       · Danach erschien die Zielkarte 150 ms VOR ihrem Schnipsel; es sah aus,
         als flieger etwas in eine Karte, die schon stand.

     Karten haben 0,55 s Uebergang, Schnipsel 0,35 s Flug — die Ankunftszeit ist
     also Verzoegerung plus Dauer, nicht die Verzoegerung selbst. Genau da lag
     der zweite Fehler.

         Karte 1   0,05  ->  0,60
         Draht 1   0,20  ->  0,70      Knoten 1  0,35
         Flug 1    0,45  ->  0,80
         Karte 2   0,75  ->  1,30      Herkunft 2 ab 0,80
         Draht 2   0,95  ->  1,45      Knoten 2  1,10
         Flug 2    1,20  ->  1,55
         Karte 3   1,50  ->  2,05      Herkunft 3 ab 1,55
         Draht 3   1,70  ->  2,20      Knoten 3  1,85
         Flug 3    1,95  ->  2,30
         Karte 4   2,25  ->  2,80      Herkunft 4 ab 2,30
         Chip      2,45      Rahmen    2,60                                  */
  html[data-howbuild='on'] .foldstrip.built .fs-k1 {
    transition-delay: 0.05s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires path:nth-of-type(1) {
    transition-delay: 0.2s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires circle:nth-of-type(1) {
    transition-delay: 0.35s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k2 {
    transition-delay: 0.75s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires path:nth-of-type(2) {
    transition-delay: 0.95s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires circle:nth-of-type(2) {
    transition-delay: 1.1s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k3 {
    transition-delay: 1.5s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires path:nth-of-type(3) {
    transition-delay: 1.7s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-wires circle:nth-of-type(3) {
    transition-delay: 1.85s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k4 {
    transition-delay: 2.25s;
  }
  html[data-howbuild='on'] .foldstrip.built .sc-chip {
    transition-delay: 2.45s;
  }
  /* ---- was ueber den Draht wandert ----
     Bewegt wird `left`/`top` in Prozent statt per `transform`: die Endpunkte
     muessen an den Draht-Enden kleben, und der Draht sitzt in einem SVG mit
     `preserveAspectRatio="none"`, das ungleichmaessig gedehnt wird. Prozent des
     Containers macht dieselbe Dehnung mit, `translate` in Pixeln nicht. Drei
     winzige, absolut positionierte Elemente — das kostet nichts. */
  html[data-howbuild='on'] .foldstrip.built .fs-flug {
    display: block;
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow: 0 3px 8px rgba(40, 30, 12, 0.22);
    opacity: 0;
    animation: fs-flug 0.35s cubic-bezier(0.35, 0, 0.25, 1) both;
  }
  /* Eigene Klassen, kein `:nth-of-type` — das zaehlt div-Geschwister, und die
     Schnipsel sind die divs 7 bis 9. Beim ersten Versuch griff deshalb keine
     der drei Regeln und alle drei flogen gleichzeitig los. Dieselbe Falle wie
     bei den Karten. */
  html[data-howbuild='on'] .foldstrip.built .fs-f1 {
    animation-delay: 0.45s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-f2 {
    animation-delay: 1.2s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-f3 {
    animation-delay: 1.95s;
  }
  /* Die Herkunftszeile erscheint in dem Moment, in dem der Schnipsel landet —
     er wird zu ihr. */
  html[data-howbuild='on'] .foldstrip .sc-card .ss {
    transition: opacity 0.3s ease;
  }
  html[data-howbuild='on'] .foldstrip:not(.built) .sc-card .ss {
    opacity: 0;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k2 .ss {
    transition-delay: 0.8s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k3 .ss {
    transition-delay: 1.55s;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-k4 .ss {
    transition-delay: 2.3s;
  }
  /* Der Rahmen zuletzt: er fasst zusammen, was gerade entstanden ist. */
  html[data-howbuild='on'] .foldstrip .fs-rahmen {
    transition: opacity 0.5s ease;
  }
  html[data-howbuild='on'] .foldstrip:not(.built) .fs-rahmen {
    opacity: 0;
  }
  html[data-howbuild='on'] .foldstrip.built .fs-rahmen {
    transition-delay: 2.6s;
  }

@media (max-width: 1024px) {
  .foldlegend {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(18px, 3vw, 26px);
  }
  .fcap:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .fcap:nth-child(3),
  .fcap:nth-child(4) {
    border-top: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
    padding-top: clamp(16px, 2.4vw, 22px);
  }
}
@media (max-width: 700px) {
  /* Der Streifen scrollt waagerecht statt sich zu stauchen — die
     angeschnittene naechste Karte ist die Aufforderung. */
  .foldstrip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .foldstrip .stepcanvas {
    width: 760px;
  }
  .foldlegend {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .fcap {
    border-left: 0;
    padding: clamp(15px, 4vw, 19px) 0;
    border-top: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  }
  .fcap:first-child {
    border-top: 0;
    padding-top: clamp(15px, 4vw, 19px);
  }
}
.stepcanvas {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in srgb, var(--ink) 9%, transparent) 1px,
    transparent 0
  );
  background-size: 15px 15px;
  background-color: color-mix(in srgb, var(--cream) 52%, var(--paper));
}
.stepcanvas .sc-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.stepcanvas .sc-wires path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 4 9;
  stroke-linecap: round;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
}
.stepcanvas .sc-wires .ink {
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
}
.stepcanvas .sc-wires .dot {
  display: none;
}
.sc-card {
  position: absolute;
  z-index: 2;
  background: var(--paper);
  border: 1.4px solid var(--ink);
  border-radius: 9px;
  padding: 7px 9px;
  box-shadow: 0 5px 14px rgba(40, 30, 12, 0.13);
  box-sizing: border-box;
}
.sc-card .tag {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.sc-card .tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  flex: none;
}
.sc-card .tt {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.15;
}
.sc-card .ss {
  font-size: 9.5px;
  color: var(--ink-soft);
  line-height: 1.2;
  margin-top: 2px;
}
.sc-card .q {
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  line-height: 1.3;
}
html[data-display='Bricolage Grotesque'] .sc-card .q {
  font-style: normal;
  font-weight: 600;
}
.sc-card.ac {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1.5px var(--accent-weak),
    0 6px 16px rgba(40, 30, 12, 0.14);
}
.sc-card.ac .tag {
  color: var(--accent);
}
.sc-card.ac .tag::before {
  background: var(--accent);
}
.sc-card.ghost {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  background: color-mix(in srgb, var(--paper) 40%, transparent);
  box-shadow: none;
}
.sc-card.ghost .tt {
  color: var(--ink-soft);
  font-weight: 600;
}
.sc-mini {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.sc-mini i {
  width: 13px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 42%, var(--paper));
  display: block;
}
.sc-mini i:nth-child(3) {
  background: color-mix(in srgb, var(--ink) 22%, var(--paper));
}
/* step 04 folded stack + re-run chip */
.sc-card.stack {
  box-shadow:
    5px 6px 0 0 var(--paper),
    5px 6px 0 1px color-mix(in srgb, var(--ink) 24%, transparent),
    10px 12px 0 0 var(--paper),
    10px 12px 0 1px color-mix(in srgb, var(--ink) 15%, transparent);
}
.sc-card .fold-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
  box-shadow: 0 3px 7px rgba(40, 30, 12, 0.2);
}
.sc-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 4px 10px rgba(40, 30, 12, 0.2);
}
.sc-chip .pl {
  color: var(--accent-bright);
  font-size: 9px;
}
@media (max-width: 860px) {
  .step {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .step .ill {
    order: 3;
  }
}

/* ---- methods showcase ---- */
.methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.mcard {
  position: relative;
  background: var(--paper);
  padding: clamp(20px, 2vw, 28px);
  overflow: hidden;
  transition: background 0.18s;
}
.mcard:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
.mcard::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--ink) 9%, transparent) 50%
  );
}
.mcard .cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.mcard .mglyph {
  margin-bottom: 14px;
}
.mcard .mglyph svg {
  width: 36px;
  height: 36px;
  display: block;
}
.mcard h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 9px;
}
html[data-display='Bricolage Grotesque'] .mcard h3 {
  font-weight: 700;
}
.mcard p {
  font-size: 12.8px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.methods-foot {
  margin-top: 24px;
  text-align: center;
}
.methods-foot a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
}
/* expandable full library of 39 methods */
.methods-all {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.methods-all summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
.methods-all summary::-webkit-details-marker {
  display: none;
}
.methods-all summary .sumtxt {
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
}
.methods-all summary .chev {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-weight: 700;
}
.methods-all[open] summary .chev {
  transform: rotate(90deg);
}
.mall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: 26px;
}
.mall-cat h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mall-cat h5 span {
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
}
html[data-display='Bricolage Grotesque'] .mall-cat h5 span {
  font-style: normal;
  font-weight: 700;
}
.mall-cat ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mall-cat li {
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
}
.mall-cat li::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  border-left: 1.4px solid var(--accent);
  border-top: 1.4px solid var(--accent);
  transform: rotate(45deg);
  opacity: 0.7;
}
@media (max-width: 880px) {
  .methods {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* FAQ accordion */
.faq-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.faqlist {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 10px 26px rgba(26, 24, 20, 0.06);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(15px, 1.7vw, 21px) clamp(18px, 2vw, 28px);
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.012em;
  color: var(--ink);
}
html[data-display='Bricolage Grotesque'] .faq-item summary {
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item .fq {
  flex: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item[open] .fq {
  transform: rotate(45deg);
}
.faq-item .fa {
  padding: 0 clamp(18px, 2vw, 28px) clamp(17px, 2vw, 23px);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  max-width: 74ch;
  text-wrap: pretty;
}
.faq-more {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.faq-more a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (max-width: 480px) {
  .methods {
    grid-template-columns: 1fr;
  }
}

/* ---- values: Craft / Clarity / Curation ---- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.vcard {
  position: relative;
  background: var(--paper);
  padding: clamp(28px, 3vw, 42px);
}
.vcard::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--ink) 9%, transparent) 50%
  );
}
.vcard .vic {
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
}
.vcard h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
html[data-display='Bricolage Grotesque'] .vcard h3 {
  font-weight: 700;
}
.vcard .vsub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.vcard p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .values {
    grid-template-columns: 1fr;
  }
}

/* ---- live canvas ---- */
.frame {
  border: 1px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 36px 80px rgba(40, 30, 12, 0.12);
}
.frame .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}
.frame .bar .d {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.frame .bar .u {
  margin-left: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--mono);
}
.frame .bar .live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.frame .bar .live .lpin {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: lpulse 2s ease-out infinite;
}
@keyframes lpulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.stage {
  position: relative;
  height: clamp(380px, 46vw, 540px);
  background-image: radial-gradient(circle at 1px 1px, rgba(23, 21, 17, 0.09) 1px, transparent 0);
  background-size: 26px 26px;
  overflow: hidden;
}
svg.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
svg.wires .w {
  fill: none;
  stroke: #c6c0b1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  animation: flow 1.8s linear infinite;
}
svg.wires .w.hot {
  stroke: var(--accent);
  stroke-width: 2.5;
  opacity: 0.9;
}
svg.wires .pulse {
  fill: var(--accent);
}
@keyframes flow {
  to {
    stroke-dashoffset: -28;
  }
}
.node {
  position: absolute;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 11px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(40, 30, 12, 0.1);
  z-index: 2;
}
.node small {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 11px;
}
.node.hot {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-weak),
    0 8px 22px rgba(0, 0, 0, 0.1);
}
.node .pin {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
}
.node.fl {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.wfnode {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 176px;
  box-shadow:
    0 18px 44px rgba(40, 30, 12, 0.28),
    0 0 0 5px var(--accent-weak);
}
.wfnode .wftag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.wfnode .wfname {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-top: 3px;
}
html[data-display='Bricolage Grotesque'] .wfnode .wfname {
  font-weight: 700;
}
.wfnode .wfmeta {
  font-size: 12px;
  color: #b6b1a4;
  margin-top: 5px;
}

/* ---- pricing ---- */
#pricing {
  background-color: var(--cream-deep);
}
.price {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 22px 50px rgba(26, 24, 20, 0.12);
}
.tier {
  padding: clamp(22px, 2.4vw, 30px);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
.tier:first-child {
  border-left: 0;
}
.tier.pop {
  background: var(--ink);
  color: var(--cream);
}
.tier .tn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tier.pop .tn {
  color: #b6b1a4;
}
.tier .p {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 16px 0 2px;
}
html[data-display='Bricolage Grotesque'] .tier .p {
  font-weight: 700;
}
.tier.pop .p .em {
  color: var(--accent-bright);
}
.tier .per {
  font-size: 13px;
  color: var(--ink-soft);
}
.tier.pop .per {
  color: #b6b1a4;
}
.tier .bl {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 14px 0 22px;
}
.tier.pop .bl {
  color: #cfcabd;
}
.tier ul {
  list-style: none;
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.tier.pop ul {
  color: #cfcabd;
}
.tier li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.tier li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex: none;
}
.tier.pop li::before {
  background: var(--accent-bright);
}
.tier .btn {
  margin-top: auto;
  justify-content: center;
  font-size: 14px;
  padding: 11px 16px;
}
.tier.pop .btn {
  border-color: var(--cream);
  color: var(--cream);
}
.tier.pop .btn:hover {
  background: var(--cream);
  color: var(--ink);
}
.popflag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 10px;
}
.enterprise {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 22px clamp(20px, 2.4vw, 30px);
}
.enterprise .et {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 22px;
}
html[data-display='Bricolage Grotesque'] .enterprise .et {
  font-weight: 700;
}
.enterprise p {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 54ch;
  margin-top: 4px;
}
@media (max-width: 920px) {
  .price {
    grid-template-columns: repeat(2, 1fr);
  }
  .tier:nth-child(3) {
    border-left: 0;
  }
  .tier:nth-child(3),
  .tier:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 520px) {
  .price {
    grid-template-columns: 1fr;
  }
  .tier {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .tier:first-child {
    border-top: 0;
  }
}

/* ---- closing ---- */
.closing {
  border-top: 1px solid var(--line);
  text-align: center;
  background: var(--cream-deep);
}
.closing h2 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(46px, 10vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
html[data-display='Bricolage Grotesque'] .closing h2 {
  font-weight: 700;
  letter-spacing: -0.04em;
}
.closing h2 .em {
  position: relative;
}
.closing p {
  max-width: 46ch;
  margin: 24px auto 32px;
  color: var(--ink-soft);
  font-size: 19px;
}
.closing .acts {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.versus-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

footer {
  border-top: 1px solid var(--line);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 32px var(--gut);
  font-size: 14px;
  color: var(--ink-soft);
  align-items: center;
}
footer .fbrand {
  display: flex;
  align-items: center;
  gap: 11px;
}
footer .fbrand .zfold {
  width: 22px;
  height: 22px;
}
footer .fbrand .zfold rect {
  fill: var(--ink);
}
footer .fbrand .cmark .v {
  stroke: var(--ink);
}
footer .fbrand .nm {
  font-family: var(--display), serif;
  font-weight: 600;
  font-size: 18px;
}
html[data-display='Bricolage Grotesque'] footer .fbrand .nm {
  font-weight: 700;
}
footer a:hover {
  color: var(--ink);
}
footer .fl {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .nw,
  .node.fl,
  .hnode.fl,
  svg.wires .w,
  .frame .bar .live .lpin,
  .ticker .track {
    animation: none;
  }
}

/* ===== OUTCOME GALLERY · "What you make" ===== */
.makes {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: flex-start;
}
.makecol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}
/* Below the 3-column desktop masonry, flow every artifact into an even
   2-up grid. The .makecol wrappers dissolve (display:contents) so all the
   tiles become direct grid items in DOM order — otherwise the lone third
   column stretches a single tile to full width and the photo crops badly. */
@media (max-width: 900px) {
  .makes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .makecol {
    display: contents;
  }
}
@media (max-width: 560px) {
  .makes {
    grid-template-columns: 1fr;
  }
}
.artifact {
  margin: 0;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 8px 22px rgba(26, 24, 20, 0.06);
}
.art-stage {
  position: relative;
  padding: clamp(16px, 1.8vw, 22px);
  background: color-mix(in srgb, var(--cream) 55%, var(--paper));
}
.art-stage.dot {
  background-image: radial-gradient(circle at 1px 1px, rgba(23, 21, 17, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
}
.art-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.art-cap .what {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
html[data-display='Bricolage Grotesque'] .art-cap .what {
  font-weight: 700;
}
.art-cap .who {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.art-cap .who::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.art-use {
  padding: 0 16px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: -2px;
}

/* mini persona */
.mk-persona {
  display: flex;
  gap: 13px;
  align-items: center;
}
.mk-persona .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: var(--accent-weak);
  display: grid;
  place-items: center;
}
.mk-persona .av svg {
  width: 30px;
  height: 30px;
}
.mk-persona .pn {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 17px;
}
html[data-display='Bricolage Grotesque'] .mk-persona .pn {
  font-weight: 700;
}
.mk-persona .pr {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.mk-quote {
  margin-top: 13px;
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  line-height: 1.4;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
}
html[data-display='Bricolage Grotesque'] .mk-quote {
  font-style: normal;
  font-weight: 500;
}
.mk-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}
.mk-bars .b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--ink-soft);
}
.mk-bars .b .lab {
  width: 64px;
  flex: none;
}
.mk-bars .b .tr {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.mk-bars .b .tr span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* mini journey */
.mk-journey .stages {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.mk-journey .stages span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 1;
  text-align: center;
}
.mk-journey svg {
  width: 100%;
  height: 78px;
  display: block;
}
.mk-journey .emo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-journey .dot {
  fill: var(--accent);
}
.mk-journey .base {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* mini empathy quad */
.mk-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mk-quad .c {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
.mk-quad .c .k {
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 3px;
}
html[data-display='Bricolage Grotesque'] .mk-quad .c .k {
  font-style: normal;
  font-weight: 700;
}
.mk-quad .c .v {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* mini crazy 8s */
.mk-c8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.mk-c8 .cell {
  aspect-ratio: 1.2/1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
}
.mk-c8 .cell svg {
  width: 62%;
  height: 62%;
}
.mk-c8 .cell svg * {
  stroke: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mk-c8 .cell.ac svg * {
  stroke: var(--accent);
}

/* ===== real image outcomes (generated artifacts, live <img> not a slot) ===== */
.art-img .artimg {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* The card sets border-radius + overflow:hidden, but analog mode flips it to
     overflow:visible (so the tape strip can spill past the top edge). That
     un-clips the flush image, leaving square top corners — round the image
     itself to match the card. Bottom corners come from the caption block below. */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
/* match the print look: duotone the photo/illustration to the riso palette,
   just like a dropped export. Natural colour returns when analog is toggled off. */
html[data-analog='on'] .art-img .artimg {
  filter: url(#riso-duo);
}

/* ===== MARGIN ANNOTATIONS — handwritten proofreader notes (tweak: data-marginalia) ===== */
.mnote {
  display: none;
}
html[data-marginalia='on'] .mnote {
  display: flex;
  position: absolute;
  z-index: 20;
  align-items: center;
  gap: 9px;
  max-width: 184px;
  font-family: 'Caveat', cursive;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--accent);
  pointer-events: none;
}
.mnote .mtxt {
  flex: 1;
}
.mnote .marrow {
  flex: none;
  width: 38px;
  height: 12px;
}
.mnote .marrow path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-marginalia='on'] .mnote.left {
  left: max(16px, calc(50% - 726px));
  transform: rotate(-4deg);
}
html[data-marginalia='on'] .mnote.right {
  right: max(16px, calc(50% - 726px));
  text-align: right;
  transform: rotate(3.4deg);
}
.mnote.right .marrow {
  order: -1;
}
@media (max-width: 1380px) {
  html[data-marginalia='on'] .mnote {
    display: none;
  }
}

/* ===== USE-CASE STORIES ===== */
.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.case {
  background: var(--paper);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
}
.case::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--ink) 9%, transparent) 50%
  );
}
.case .ctag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 9px;
}
.case .ctag .cnum {
  font-family: var(--display), serif;
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  letter-spacing: 0;
}
html[data-display='Fraunces'] .case .ctag .cnum {
  font-weight: 600;
}
.case h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
html[data-display='Bricolage Grotesque'] .case h3 {
  font-weight: 700;
}
.case p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.case .outcome {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 15px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.case .outcome svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.case .outcome svg path,
.case .outcome svg line,
.case .outcome svg circle {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
.case .outcome .ov {
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 760px) {
  .cases {
    grid-template-columns: 1fr;
  }
}

/* ===== FOOTER COLOPHON ===== */
/* ---- trust strip ---- */
.trustbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.trustbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) var(--gut);
}
.trustbar .tb {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trustbar .tb svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.trustbar .tb .tbl {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}
.trustbar .tb .tbs {
  font-family: var(--display), serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
html[data-display='Bricolage Grotesque'] .trustbar .tb .tbs {
  font-style: normal;
  font-weight: 500;
}
@media (max-width: 680px) {
  .trustbar .wrap {
    gap: 18px 28px;
  }
  .trustbar .tb {
    flex: 1 1 40%;
  }
}
.colophon {
  border-top: 1px solid var(--line);
  background: var(--cream-deep);
}

/* ---- alpha access band ---- */
.alphaband {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.alphaband::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.07) 1px,
    transparent 0
  );
  background-size: 30px 30px;
  opacity: 0.6;
}
.alphaband .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  /* Single centred column — the decorative cohort card that used to fill the
     second column was removed (it claimed a fabricated "Wave 3 of 5"). */
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(52px, 8vh, 104px) var(--gut);
}
.alphaband .acopy {
  max-width: 620px;
}
.alphaband .acopy .aeyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.alphaband .acopy .aeyebrow .adot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 0 var(--accent-bright);
}
@media (prefers-reduced-motion: no-preference) {
  .alphaband .acopy .aeyebrow .adot {
    animation: apulse 2.3s ease-out infinite;
  }
}
@keyframes apulse {
  0% {
    box-shadow: 0 0 0 0 rgba(111, 155, 214, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.alphaband h2 {
  font-family: var(--display), serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--cream);
  text-wrap: balance;
}
.alphaband h2 .em {
  color: var(--accent-bright);
}
.alphaband .alede {
  margin-top: 18px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.56;
  color: rgba(245, 241, 234, 0.74);
  max-width: 46ch;
  text-wrap: pretty;
}
.alphaband .aform {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.alphaband .arow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.alphaband .arow input[type='email'] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--body);
  font-size: 15px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  padding: 14px 16px;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.alphaband .arow input[type='email']::placeholder {
  color: rgba(245, 241, 234, 0.5);
}
.alphaband .arow input[type='email']:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, 0.1);
}
.alphaband .arow button {
  flex: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 11px;
  padding: 14px 22px;
  cursor: pointer;
  transition:
    background 0.18s,
    transform 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.alphaband .arow button:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #16130f;
}
.alphaband .arow button:active {
  transform: translateY(1px);
}
.alphaband .arow button svg {
  width: 15px;
  height: 15px;
}
.alphaband .anote {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(245, 241, 234, 0.5);
  letter-spacing: 0.02em;
}
.alphaband .aform.sent .arow {
  display: none;
}
.alphaband .asuccess {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 13px;
  background: rgba(111, 155, 214, 0.14);
  border: 1px solid rgba(111, 155, 214, 0.4);
}
.alphaband .aform.sent .asuccess {
  display: flex;
}
.alphaband .asuccess svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent-bright);
  margin-top: 1px;
}
.alphaband .asuccess .at {
  font-family: var(--display), serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--cream);
  margin-bottom: 3px;
}
.alphaband .asuccess .ab {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(245, 241, 234, 0.74);
}
@media (max-width: 820px) {
  .alphaband .wrap {
    gap: 28px;
  }
}
.colophon .wrap {
  display: grid;
  /* Two columns since the colophon moved to the Imprint page: brand tagline
     fills the left, Explore nav hugs the right edge (auto) so there's no gap. */
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(44px, 5vw, 68px) var(--gut) clamp(28px, 3vw, 38px);
}
.colophon .cn {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 0.96;
  display: flex;
  align-items: center;
  gap: 13px;
}
html[data-display='Bricolage Grotesque'] .colophon .cn {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.colophon .cn .cmark {
  width: 30px;
  height: 26px;
  flex: none;
}
.colophon .cn .cmark .v {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.colophon .cn .cmark .crease {
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-dasharray: 1.6 2;
}
.colophon .ctagline {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 30ch;
}
.colophon .csec h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.colophon .csec ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}
.colophon .csec li b {
  color: var(--ink);
  font-weight: 600;
}
.colophon .csec a:hover {
  color: var(--ink);
}
.colophon .cmono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.colophon .cmono .k {
  color: var(--ink);
}
.colrule {
  border-top: 1px solid var(--line);
}
.colfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px var(--gut);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.colfoot .cset {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .colophon .wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ---- brand / fold-mark section (dark ink band) ---- */
.brandsec {
  background: radial-gradient(120% 130% at 50% -10%, #241f1a 0%, #16130f 72%);
  color: #f1eadd;
  border-top: 0;
}
.brandhead {
  max-width: 60ch;
  margin-bottom: clamp(38px, 5vw, 58px);
}
.brandhead .eyebrow {
  color: #b4ab9c;
}
.brandhead .eyebrow .dot {
  background: var(--accent-bright);
}
.brandhead h2 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 18px 0 14px;
  color: #fff;
}
html[data-display='Bricolage Grotesque'] .brandhead h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brandhead p {
  color: #b4ab9c;
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 52ch;
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.logocard {
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  padding: clamp(24px, 2.6vw, 36px);
}
.logocard .stage-mark {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.logocard .tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.logocard .tag.muted {
  color: var(--ink-soft);
}
.logocard h3 {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 21px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
html[data-display='Bricolage Grotesque'] .logocard h3 {
  font-weight: 700;
}
.logocard p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.cmark.on-dark .v {
  stroke: var(--cream);
}
/* scales row */
.logocard .stage-mark.scales {
  gap: clamp(20px, 3vw, 40px);
}
.scale-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scale-item small {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* lockup pairing */
.logocard .stage-mark.pair {
  flex-direction: column;
  gap: 0;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.lock {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  padding: 18px 0;
}
.lock .lw {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 22px;
  letter-spacing: -0.015em;
}
html[data-display='Bricolage Grotesque'] .lock .lw {
  font-weight: 700;
}
.lock.light {
  background: var(--cream);
  color: var(--ink);
}
.lock.dark {
  background: var(--ink);
  color: var(--cream);
}
.brandpanel {
  margin-top: clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
.brandpanel .pl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b4ab9c;
  margin-bottom: 18px;
}
.swatch {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
}
.swatch .chip {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  flex: none;
}
.swatch .sn {
  font-size: 14px;
  font-weight: 600;
  color: #f1eadd;
}
.swatch .sh {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #9a9183;
}
.brandpanel .tspec {
  margin-bottom: 18px;
}
.brandpanel .tspec .big {
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 26px;
  color: #fff;
  line-height: 1;
}
html[data-display='Bricolage Grotesque'] .brandpanel .tspec .big {
  font-weight: 700;
}
.brandpanel .tspec .big.body {
  font-family: var(--body);
  font-weight: 600;
}
.brandpanel .tspec .cap {
  font-size: 12px;
  color: #9a9183;
  margin-top: 5px;
}
@media (max-width: 820px) {
  .logos-grid {
    grid-template-columns: 1fr;
  }
  .brandpanel {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
#tweak-root {
  position: fixed;
  z-index: 9999;
}

/* ===== FOLD-TO-REVEAL (tweakable: data-motion="fold") ===== */
.foldreveal {
  transform-origin: top center;
  position: relative;
}
html[data-motion='fold'] .foldreveal {
  opacity: 0;
  transform: perspective(1500px) rotateX(-70deg);
  transition:
    transform 1.05s cubic-bezier(0.2, 0.78, 0.2, 1),
    opacity 0.8s ease;
  will-change: transform, opacity;
}
html[data-motion='fold'] .foldreveal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 24, 20, 0.16), transparent);
  opacity: 1;
  transition: opacity 0.8s ease;
  border-radius: inherit;
}
html[data-motion='fold'] .foldreveal.unfolded {
  opacity: 1;
  transform: perspective(1500px) rotateX(0deg);
}
html[data-motion='fold'] .foldreveal.unfolded::before {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion='fold'] .foldreveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html[data-motion='fold'] .foldreveal::before {
    display: none !important;
  }
}

/* ===================================================================
   CRAFT LAYERS — each a tweak, each reduced-motion / print safe
   =================================================================== */

/* ---- #1 real 3D fold-open on the How-it-works step illustrations ---- */
html[data-fold3d='on'] .step .ill {
  perspective: 1500px;
}
html[data-fold3d='on'] .fold3d-sheet {
  transform-origin: top center;
  position: relative;
  transition:
    transform 1.05s cubic-bezier(0.2, 0.82, 0.2, 1),
    opacity 0.7s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-fold3d='on'] .fold3d-sheet:not(.unfolded) {
    opacity: 0.32;
    transform: rotateX(-82deg);
  }
}
/* the crease shadow + light edge that travels as the sheet drops flat */
html[data-fold3d='on'] .fold3d-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(26, 24, 20, 0.3) 0%,
    rgba(26, 24, 20, 0.04) 38%,
    transparent 60%
  );
  opacity: 1;
  transition: opacity 0.9s ease;
}
html[data-fold3d='on'] .fold3d-sheet.unfolded::after {
  opacity: 0;
}

/* ---- #3 letterpress deboss on display headlines + folios ---- */
html[data-deboss='on'] .hero h1.display,
html[data-deboss='on'] .shead h2,
html[data-deboss='on'] .step h3,
html[data-deboss='on'] .step .sn,
html[data-deboss='on'] .colophon .cn,
html[data-deboss='on'] .vpane h3 {
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--paper) 90%, #fff),
    0 -1px 0 rgba(26, 24, 20, 0.07);
}
/* on dark surfaces the press reads inverted (highlight above, shadow below) */
html[data-deboss='on'][data-hero='dark'] .hero h1.display,
html[data-deboss='on'] .statsband .display,
html[data-deboss='on'] .brandband .display {
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.1),
    0 1px 1px rgba(0, 0, 0, 0.32);
}

/* ---- #4 editorial marginalia — handwritten proofreader hand notes ---- */
/* a hand-circled emphasis ring usable inline */
html[data-marginalia='on'] .inkring {
  position: relative;
}
html[data-marginalia='on'] .inkring::after {
  content: '';
  position: absolute;
  inset: -7px -11px -9px -11px;
  border: 1.8px solid var(--accent);
  border-radius: 48% 52% 49% 51%/60% 56% 60% 54%;
  opacity: 0.55;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

/* ---- #5 typographic detail: drop-cap + hanging punctuation ---- */
html[data-typedetail='on'] body {
  hanging-punctuation: first allow-end last;
}
html[data-typedetail='on'] .dropcap::first-letter {
  float: left;
  font-family: var(--display), serif;
  font-weight: 540;
  font-size: 3.05em;
  line-height: 0.72;
  padding: 6px 12px 0 0;
  color: var(--accent);
}
html[data-typedetail='on'][data-display='Bricolage Grotesque'] .dropcap::first-letter {
  font-weight: 700;
}
html[data-typedetail='on'] h1.display,
html[data-typedetail='on'] .shead h2 {
  text-wrap: balance;
}

/* ---- #6 spring physics on hero method cards (release bounce + pick-up) ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-physics='on'] .hnode.settled {
    animation: hnodeSettle 0.64s cubic-bezier(0.18, 1.5, 0.3, 1) both !important;
  }
  @keyframes hnodeSettle {
    0% {
      transform: translate(-50%, -50%) scale(1.085);
    }
    55% {
      transform: translate(-50%, -50%) scale(0.972);
    }
    78% {
      transform: translate(-50%, -50%) scale(1.014);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  html[data-physics='on'] .hnode.grabbing {
    transform: translate(-50%, -50%) scale(1.07) rotate(-1.2deg);
    transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.3, 1);
  }
}

/* ===== MOTION LAYER (scroll reveals, count-up, draws) — gated on data-motion ===== */
/* 1·2·3 generic editorial entrance + stagger (--rd) */
html[data-motion='fold'] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--rd, 0ms);
}
html[data-motion='fold'] [data-reveal].in {
  opacity: 1;
  transform: none;
}
/* 6 heading underline draw — inked hand stroke spanning the full accent (.em) text */
html[data-motion='fold'] .shead h2 .em {
  position: relative;
}
html[data-motion='fold'] .shead[data-reveal] h2 .em::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -0.06em;
  height: 6px;
  background: var(--accent);
  border-radius: 40% 60% 50% 45%/60% 56% 60% 54%;
  opacity: 0.95;
  transform: rotate(-0.8deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}
html[data-motion='fold'] .shead[data-reveal].in h2 .em::after {
  transform: rotate(-0.8deg) scaleX(1);
}
/* closing CTA heading isn't a .shead — give its accent word the same inked stroke */
html[data-motion='fold'] .closing h2 .em {
  position: relative;
}
html[data-motion='fold'] .closing h2 .em::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0.14em;
  height: 6px;
  background: var(--accent);
  border-radius: 40% 60% 50% 45%/60% 56% 60% 54%;
  opacity: 0.95;
  transform: rotate(-0.8deg);
}
/* 4 canvas "assembles": wires + nodes fade in once the frame unfolds (opacity only, so the float anim is untouched) */
html[data-motion='fold'] #canvas .frame .wires {
  opacity: 0;
  transition: opacity 0.8s ease 0.25s;
}
html[data-motion='fold'] #canvas .frame.unfolded .wires {
  opacity: 1;
}
html[data-motion='fold'] #canvas .frame .node,
html[data-motion='fold'] #canvas .frame .wfnode {
  opacity: 0;
  transition: opacity 0.55s ease;
}
html[data-motion='fold'] #canvas .frame.unfolded .node {
  opacity: 1;
  transition-delay: 0.4s;
}
html[data-motion='fold'] #canvas .frame.unfolded .node.hot {
  transition-delay: 0.62s;
}
html[data-motion='fold'] #canvas .frame.unfolded .wfnode {
  opacity: 1;
  transition-delay: 0.78s;
}
/* 7 second fold moment: closing headline */
html[data-motion='fold'] .foldreveal.text::before {
  display: none;
}
/* 8 page dog-ear (peels on hover, click = back to TOP) */
.dogear {
  display: none;
}
html[data-motion='fold'] .dogear {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 55;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: var(--cream-deep);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: inset 3px 3px 0 rgba(26, 24, 20, 0.05);
  transition:
    width 0.22s ease,
    height 0.22s ease;
}
html[data-motion='fold'] .dogear::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent calc(50% - 0.8px),
    color-mix(in srgb, var(--accent) 45%, transparent) 50%,
    transparent calc(50% + 0.8px)
  );
}
html[data-motion='fold'] .dogear::after {
  content: '\2191';
  position: absolute;
  right: 7px;
  bottom: 4px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
html[data-motion='fold'] .dogear:hover {
  width: 64px;
  height: 64px;
}
@media (max-width: 760px) {
  html[data-motion='fold'] .dogear {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion='fold'] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  html[data-motion='fold'] .shead h2::after {
    display: none !important;
  }
  html[data-motion='fold'] #canvas .frame .wires,
  html[data-motion='fold'] #canvas .frame .node,
  html[data-motion='fold'] #canvas .frame .wfnode {
    opacity: 1 !important;
  }
}

/* =====================================================================
   VARIANT TWEAKS — each lever is independent so they can be mixed/compared
   ===================================================================== */
/* `--hub-x` / `--hub-y` standen hier und in der Magazin-Variante. Kein `var()`
   hat sie je gelesen — auch nicht in der Geschichte der Datei (#847). */

/* ---- SURFACE: flat paper (grain, no glow) vs glow (default) ---- */
/* hero carries the live-canvas dot grid (it IS the canvas) */
html[data-surface='flat'] .hero::before {
  display: block !important;
  inset: 0;
  height: auto;
  filter: none;
  background: radial-gradient(
    circle at 1px 1px,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px,
    transparent 0
  );
  background-size: 26px 26px;
  opacity: 0.85;
}
html[data-surface='flat'][data-hero='dark'] .hero::before {
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: 1;
}
html[data-surface='flat'][data-hero='dark'] .hero::after {
  display: none;
}
html[data-surface='flat'] .hero {
  background-color: var(--cream);
}
html[data-surface='flat'][data-hero='dark'] .hero {
  background-color: #16130f;
  background-image: none;
}
html[data-surface='flat'] body {
  background-color: var(--cream);
  background-image:
    radial-gradient(rgba(26, 24, 20, 0.05) 0.9px, transparent 0.9px),
    radial-gradient(rgba(26, 24, 20, 0.035) 0.9px, transparent 0.9px);
  background-size:
    7px 7px,
    13px 13px;
  background-position:
    0 0,
    4px 5px;
}
html[data-surface='flat'] .statsband {
  background-color: #16130f;
  background-image: none;
}
html[data-surface='flat'] .statsband::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 0.9px, transparent 0.9px);
  background-size: 8px 8px;
}
html[data-surface='flat'] .statsband {
  position: relative;
}

/* editorial folio: "Fold 01" in worksheet mode */
html[data-texture='worksheet'] .shead .idx::before {
  content: 'Fold ';
  font-family: var(--mono);
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: middle;
  margin-right: 7px;
}

/* ---- INTRO: mono kicker (hard) vs pill (✦) ---- */
.herokicker {
  display: none;
}
html[data-intro='kicker'] .tagpill {
  display: none;
}
html[data-intro='kicker'] .herokicker {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.herokicker .kfolio {
  font-family: var(--display), serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.02em;
}
html[data-display='Fraunces'] .herokicker .kfolio {
  font-weight: 600;
}
.herokicker .krule {
  width: 34px;
  height: 0;
  border-top: 1.5px solid var(--accent);
}
.herokicker .ktext {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
html[data-herolayout='magazine'] html[data-intro='kicker'] .herokicker,
html[data-herolayout='magazine'] .herokicker {
  justify-content: flex-start;
}

/* ---- HERO LAYOUT: magazine (asymmetric) vs centered (default) ---- */
html[data-herolayout='magazine'] .hero-inner {
  align-items: flex-start;
  text-align: left;
}
html[data-herolayout='magazine'] .hero-inner h1 {
  width: auto;
  max-width: 15ch;
}
html[data-herolayout='magazine'] .hero-inner p.sub {
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch;
}
html[data-herolayout='magazine'] .hero-inner .hero-actions {
  justify-content: flex-start;
}
html[data-herolayout='magazine'] .hero-inner .trust {
  justify-content: flex-start;
}
html[data-herolayout='magazine'] .hero-inner .hero-draghint {
  margin-left: 0;
  margin-right: auto;
}
/* push the floating method cluster to the right half */
@media (min-width: 1025px) {
  html[data-herolayout='magazine'] .hnode[data-wire='hw1'] {
    left: 60%;
    top: 20%;
  }
  html[data-herolayout='magazine'] .hnode[data-wire='hw2'] {
    left: 66%;
    top: 78%;
  }
  html[data-herolayout='magazine'] .hnode[data-wire='hw3'] {
    left: 90%;
    top: 32%;
  }
  html[data-herolayout='magazine'] .hnode[data-wire='hw4'] {
    left: 84%;
    top: 60%;
  }
}

/* ---- ANALOG: rubber stamp, tape on artifacts, inked underline ---- */
.edition-stamp {
  display: none;
}
html[data-analog='on'] .edition-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: rotate(-4deg);
  margin: 0 auto 30px;
  padding: 9px 16px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.78;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.edition-stamp svg {
  width: 16px;
  height: 16px;
}
.edition-stamp svg path {
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
}
/* tape strips holding the gallery artifacts */
html[data-analog='on'] .makes {
  padding-top: 14px;
}
html[data-analog='on'] .artifact {
  overflow: visible;
}
html[data-analog='on'] .makecol {
  overflow: visible;
}
html[data-analog='on'] .makes .artifact {
  position: relative;
}
html[data-analog='on'] .makes .artifact::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -10px;
  left: 50%;
  width: 66px;
  height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--accent) 26%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 2px 5px rgba(26, 24, 20, 0.16);
  opacity: 0.92;
}
html[data-analog='on'] .makes .artifact:nth-child(even)::before {
  transform: translateX(-50%) rotate(3deg);
  left: 54%;
}
/* inked hand underline under the hero accent word */
html[data-analog='on'] h1 .em::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0;
  height: 0.12em;
  background: var(--accent);
  border-radius: 40% 60% 50% 45%/60%;
  opacity: 0.95;
  transform: rotate(-0.6deg);
  transform-origin: left center;
}
html[data-motion='fold'][data-analog='on'] h1 .em::after {
  animation: inkdraw 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
}
@keyframes inkdraw {
  from {
    transform: rotate(-0.6deg) scaleX(0);
  }
  to {
    transform: rotate(-0.6deg) scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion='fold'][data-analog='on'] h1 .em::after {
    animation: none;
  }
}
html[data-analog='on'] h1 .em {
  padding-bottom: 0.06em;
}
/* Hero headline: the accent word ("canvas remembers.") can wrap between the two
   words. The single-box ::after stroke would draw one slab across a wrapped
   inline; instead paint the inked underline as a cloned background so it stays
   ONE continuous stroke on a single line and splits into a clean stroke under
   each word only when it actually wraps. */
html[data-analog='on'] .hero h1 .em::after {
  display: none;
}
html[data-analog='on'] .hero h1 .em {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 18' preserveAspectRatio='none'%3E%3Cpath d='M6 9 C30 6 46 4.6 66 4.5 C106 4.2 130 5.8 156 5.1 C196 4.4 226 3.4 250 4 C286 4.6 306 6.6 315 7.6 C306 11 284 13.1 250 13.6 C220 14 190 12.9 156 13.6 C120 14.3 94 15.1 66 14.6 C42 14.1 25 12.6 6 11 Z' fill='%231f4788'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.16em;
  padding-bottom: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* The cloned background carries the underline onto each wrapped line, so the
   nowrap that used to protect the single-slab ::after is no longer needed —
   let the accent word break between "canvas" and "remembers". */
html .hero h1 .em {
  white-space: normal;
}
/* Loosen the hero headline's line spacing: the display face is set very tight
   (0.94), which crowds the inked underline against the next line once the
   accent word wraps. Scoped to the hero so subpage headings keep their rhythm. */
html[data-display='Bricolage Grotesque'] .hero h1.display {
  line-height: 1.08;
}
html[data-analog='on'] .hnode .ic svg,
html[data-analog='on'] .mcard .mglyph svg,
html[data-analog='on'] .mk-c8 .cell svg,
html[data-analog='on'] .vcard .vic,
html[data-analog='on'] .mk-persona .av svg,
html[data-analog='on'] .mk-journey svg .emo {
  filter: url(#inkrough);
}

/* ===== SCROLL-STACK MODE (data-scroll="stacked") — JS-pinned sheet cover ===== */
html[data-scroll='stacked'] .ticker,
html[data-scroll='stacked'] .foldguide {
  display: none;
}
/* Each fold pins (sticky) at full height and stays opaque; its inner .wrap is
   translated up by scroll progress (stack.js) so the content scrolls cleanly
   WITHIN the pinned sheet, then the next opaque sheet covers it. Transform-based
   (no nested overflow) → no artefacts. */
html[data-scroll='stacked'] .statsband,
html[data-scroll='stacked'] section.blk {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -16px 36px rgba(26, 24, 20, 0.1);
}
/* the hero pins too (bottom of the stack) — the stats band scrolls up over it */
html[data-scroll='stacked'] .hero {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  height: 100svh;
  padding-top: clamp(40px, 5vw, 76px);
  padding-bottom: clamp(40px, 5vw, 76px);
}
html[data-scroll='stacked'] .statsband > .wrap,
html[data-scroll='stacked'] section.blk > .wrap {
  will-change: transform;
}
/* opaque backgrounds so a pinned sheet is fully hidden once the next covers it */
html[data-scroll='stacked'] section.blk {
  background-color: var(--cream);
}
html[data-scroll='stacked'] section.blk.tint,
html[data-scroll='stacked'] #makes,
html[data-scroll='stacked'] #pricing {
  background-color: var(--cream-deep);
}
html[data-scroll='stacked'] section.closing {
  background-color: var(--cream-deep);
  position: relative;
  z-index: 2;
}
/* FAQ has dynamic height (accordions) — don't pin/transform it; let it flow
   normally as an opaque sheet so expanded answers are never clipped. */
html[data-scroll='stacked'] #faq {
  position: relative;
  min-height: 0;
  overflow: visible;
  z-index: 1;
}
/* the footer is static (non-positioned) → the sticky/positioned sheets would
   paint OVER it and hide it. Lift it into the positioned layer, above the
   pinned sheets, so it shows cleanly at the very bottom. */
html[data-scroll='stacked'] footer.colophon {
  position: relative;
  z-index: 3;
}

/* ===================================================================
   BATCH 2 CRAFT LAYERS
   =================================================================== */

/* ---- #1 live collaborator cursors on the hero canvas ---- */
.collab {
  display: none;
}
html[data-cursors='on'] .collab {
  display: block;
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 1.6s cubic-bezier(0.4, 0.1, 0.25, 1);
}
.collab .cur {
  position: relative;
}
.collab .cur svg {
  display: block;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(26, 24, 20, 0.28));
}
.collab .tag {
  position: absolute;
  left: 17px;
  top: 17px;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 2px 8px;
  border-radius: 7px;
  border-top-left-radius: 2px;
  box-shadow: 0 3px 8px rgba(26, 24, 20, 0.22);
}
.collab.c1 .tag {
  background: #c44a52;
}
.collab.c1 .cur svg path {
  fill: #c44a52;
}
.collab.c2 .tag {
  background: #2c7a5b;
}
.collab.c2 .cur svg path {
  fill: #2c7a5b;
}
@media (prefers-reduced-motion: reduce) {
  html[data-cursors='on'] .collab {
    transition: none;
  }
}
@media (max-width: 1024px) {
  html[data-cursors='on'] .collab {
    display: none;
  }
}
/* a method card briefly selected by a peer cursor */
.hnode.peer-sel {
  box-shadow:
    0 0 0 2px var(--accent),
    0 14px 34px rgba(40, 30, 12, 0.2) !important;
  transition: box-shadow 0.25s ease;
}

/* ---- #4 tactile micro-interactions: ink underline + button press ---- */
/* nav + colophon links grow an ink underline on hover */
html[data-micro='on'] .navlinks a,
html[data-micro='on'] .colophon .csec a {
  position: relative;
}
html[data-micro='on'] .navlinks a::after,
html[data-micro='on'] .colophon .csec a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-micro='on'] .navlinks a:hover::after,
html[data-micro='on'] .colophon .csec a:hover::after {
  transform: scaleX(1);
}
/* buttons depress slightly when pressed */
html[data-micro='on'] .btn {
  transition:
    transform 0.08s ease,
    background 0.16s,
    color 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
html[data-micro='on'] .btn:active {
  transform: translateY(1.5px) scale(0.985);
}
html[data-micro='on'] .btn--fill {
  box-shadow: 0 2px 0 rgba(26, 24, 20, 0.3);
}
html[data-micro='on'] .btn--fill:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(26, 24, 20, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  html[data-micro='on'] .btn:active {
    transform: none;
  }
}

/* touch: hero decor nodes must not trap page scrolling */
@media (pointer: coarse) {
  .hnode {
    touch-action: pan-y;
  }
}

/* Der Schnipsel loest sich aus der Quellkarte, laeuft am Draht entlang und
   verschwindet, sobald die Zielkarte ihn als Herkunftszeile uebernimmt. */
@keyframes fs-flug {
  0% {
    left: var(--x1);
    top: var(--y1);
    opacity: 0;
    scale: 0.82;
  }
  18% {
    opacity: 1;
    scale: 1;
  }
  78% {
    opacity: 1;
    scale: 1;
  }
  100% {
    left: var(--x2);
    top: var(--y2);
    opacity: 0;
    scale: 0.9;
  }
}