/* ============================================================================
   Landing framework: design system + components.
   Palette/type/shadows/motion are tokens in :root (swap them to re-skin).
   Border convention: components draw their hairline from --shadow-card /
   --shadow-control (which begin with a 0 0 0 1px ring), with `border: 0`.
   A plain hairline `border: … var(--hairline)` is only for row dividers that
   have no shadow (fact rows, roadmap, feature-card faces).
   ========================================================================= */
:root {
  color-scheme: light;
  --ink: #1b1916;
  --ink-2: #575049;
  --ink-3: #9c9488;
  --hairline: rgba(50, 42, 28, 0.11);
  --accent: #3f6a53; /* muted forest green: a quiet botanical nod, used sparingly */
  /* A brighter set for the creator dashboard. The site's own palette is
     deliberately muted; a page about money someone earned is the one place that
     should feel good to open, so the plots and the states get real colour. */
  --pink: #e05f96; /* the hand drawn ring, the flower's core, the dock circle */
  --chart: #2b6fd6;
  --ok: #12915a;
  --warn: #e0a400;
  --bad: #d9534f;
  --red: #ff453a;
  --panel: #efece3; /* soft panel tint */
  --control-bg: #fffdf8;
  --pill-bg: #fffdf8;
  --tabs-bg: rgba(55, 45, 25, 0.06);
  --bg: #f7f5ef;
  --font-sans:
    "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:
    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking: -0.01em;
  --shadow-card:
    0 0 0 1px rgba(45, 36, 20, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(45, 36, 20, 0.04), 0 6px 16px rgba(45, 36, 20, 0.06);
  --shadow-control:
    0 0 0 1px rgba(45, 36, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(45, 36, 20, 0.08);
  --shadow-control-hover:
    0 0 0 1px rgba(45, 36, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(45, 36, 20, 0.1);
  --shadow-card-hover:
    0 0 0 1px rgba(45, 36, 20, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(45, 36, 20, 0.05), 0 10px 24px rgba(45, 36, 20, 0.08);
  --shadow-pill:
    0 0 0 1px rgba(45, 36, 20, 0.07), 0 1px 2px rgba(45, 36, 20, 0.07);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bloom: cubic-bezier(0.16, 1.02, 0.3, 1);
  --ease-focus: cubic-bezier(0.2, 0.85, 0.25, 1);
  --ease-flip: cubic-bezier(0.77, 0, 0.175, 1);
  --tab-slide: 0.3s var(--ease-smooth);
  --fade: 0.22s var(--ease-out);
  --radius-sm: 6px;
  --radius-md: 9px;
}
@font-face {
  font-family: Inter Fallback;
  src: local("Arial");
  size-adjust: 107.06%;
  ascent-override: 89.77%;
  descent-override: 22.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: JetBrains Mono Fallback;
  src: local("Menlo");
  size-adjust: 100.5%;
  ascent-override: 77%;
  descent-override: 22%;
  line-gap-override: 0%;
}
* {
  box-sizing: border-box;
}
/* `hidden` has to beat any class that sets display, or a panel the script has
   hidden still renders. Caught three times now: the CTA button, the chart
   tooltip, and an "Available soon $0.00" row on a dashboard with nothing held. */
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  width: 100%;
  min-width: 0;
  max-width: 440px;
  padding: 56px 24px;
}
@media (max-width: 480px) {
  main {
    padding: 36px 18px 44px;
  }
}

/* section entrance stagger (top-level children fade up on load) */
@media (prefers-reduced-motion: no-preference) {
  main > * {
    /* backwards, not both: with `both` the section keeps the animation's end
       value, and a lingering filter holds it on its own compositing layer, so
       text on a fractional pixel is resampled and reads as permanently soft.
       backwards still covers the pre-delay frames, then hands back to the
       element's own styles. */
    animation: enter 0.6s var(--ease-out) backwards;
  }
  main > :nth-child(1) { animation-delay: 0ms; }
  main > :nth-child(2) { animation-delay: 80ms; }
  main > :nth-child(3) { animation-delay: 0.16s; }
  main > :nth-child(4) { animation-delay: 0.24s; }
  main > :nth-child(5) { animation-delay: 0.32s; }
  main > :nth-child(6) { animation-delay: 0.4s; }
  main > :nth-child(7) { animation-delay: 0.48s; }
  main > :nth-child(8) { animation-delay: 0.56s; }
  main > :nth-child(9) { animation-delay: 0.64s; }
  main > :nth-child(10) { animation-delay: 0.72s; }
}
@keyframes enter {
  0% { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a {
  -webkit-tap-highlight-color: transparent;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
  border-radius: var(--radius-sm);
}
::selection {
  background: #2d24141f;
  color: var(--ink);
}
.lockable {
  display: inline-flex;
  justify-content: center;
}
kbd {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  border-radius: 5px;
  padding: 2px 5px 3px;
  box-shadow: var(--shadow-pill);
  vertical-align: 1px;
}

/* shared section heading */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.section-note {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.section-foot {
  margin: 12px 2px 0;
  font: 400 11px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-wrap: pretty;
}
.section-foot kbd {
  font-size: 10px;
  padding: 1px 4px 2px;
}
.section-foot a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.14s ease;
}
.section-foot a:hover {
  color: var(--ink);
}

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  /* fixed/sticky masthead: bleed to the column edges, soft paper + blur, hairline divider */
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 -24px 30px;
  padding: 14px 24px;
  background: rgba(247, 245, 239, 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  backdrop-filter: saturate(1.5) blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}
@media (max-width: 480px) {
  .top {
    margin: 0 -18px 26px;
    padding: 12px 18px;
  }
}
.top h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
  flex: none;
}
.version {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.meta {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.mute-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-3);
  transition: color 0.12s ease, transform 0.12s ease;
}
.mute-btn:hover {
  color: var(--ink);
}
.mute-btn:active {
  transform: scale(0.92);
}
.mute-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}
.mute-btn .ic-off {
  display: none;
}
.mute-btn.muted .ic-on {
  display: none;
}
.mute-btn.muted .ic-off {
  display: block;
}
.dl-btn {
  appearance: none;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  transition: color 0.12s ease, transform 0.12s ease, box-shadow 0.16s var(--ease-out);
}
.dl-btn:hover {
  box-shadow: var(--shadow-control-hover);
}
.dl-btn:active {
  transform: scale(0.96);
}
/* The header's one real call to action. Warm dark rather than black, with a
   top highlight and a lift under it: on paper this reads as a raised object
   instead of a hole cut in the page. */
.dl-btn.is-dark {
  color: #fffdf8;
  background: linear-gradient(180deg, #3d3630 0%, #241f1b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(40, 30, 16, 0.22),
    0 5px 12px -3px rgba(40, 30, 16, 0.34);
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.dl-btn.is-dark:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(40, 30, 16, 0.22);
}
.dl-btn.is-dark:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(40, 30, 16, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .dl-btn.is-dark:hover,
  .dl-btn.is-dark:active {
    transform: none;
  }
}
.dl-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  flex: none;
}
/* the wrapper pins its own ink, which is invisible on the dark button */
.dl-btn.is-dark .dl-icon {
  color: inherit;
}
.dl-icon svg {
  width: auto;
  height: 12px;
  display: block;
}
.dl-btn .lockable {
  min-width: 6.6ch;
  justify-content: flex-start;
}

/* ---------- hero (thesis + supporting line + stat) ---------- */
.hero {
  margin: 4px 0 42px;
}
.hero-thesis {
  margin: 0 0 15px;
  max-width: 19ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  margin: 0 0 16px;
  font: 400 15px/1.5 var(--font-sans);
  /* a hair tighter than the page tracking: at 15px the line misses the column
     by 2px, and this buys it back without touching the type scale */
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 11.5px/1 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.hero-stat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

/* ---------- why it works (distribution thesis) ---------- */
.edge {
  margin-bottom: 44px;
}
.edge-lead {
  margin: 0 0 10px;
  max-width: 34ch;
  font: 500 15px/1.5 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.edge-lead b {
  color: var(--accent);
  font-weight: 600;
}
.edge-sub {
  margin: 0;
  max-width: 46ch;
  font: 400 14px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.edge.stagger > * {
  opacity: 0;
}
.edge.stagger.in > * {
  opacity: 1;
  transition: opacity 0.55s var(--ease-out);
}
.edge-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.edge-points li {
  position: relative;
  padding-left: 20px;
  font: 400 13.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.edge-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.edge.stagger.in > .edge-lead {
  transition-delay: 70ms;
}
.edge.stagger.in > .edge-sub {
  transition-delay: 140ms;
}
.edge.stagger.in > .edge-points {
  transition-delay: 210ms;
}
/* legacy tagline (unused, kept for template parity) */
.tagline {
  margin: 0 0 20px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- marquee ---------- */
.marquee-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  min-width: 0;
}
.marquee-label {
  flex: none;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.marquee-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
.marquee-track {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}
.marquee-item {
  white-space: nowrap;
  font: 400 11px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  transition: color 0.16s ease;
}
.marquee-item b {
  font-weight: 560;
  color: var(--ink-2);
  transition: color 0.16s ease;
}
.marquee-item:hover {
  color: var(--ink-2);
}
.marquee-item:hover b {
  color: var(--ink);
}
@keyframes marquee {
  to { transform: translate(-50%); }
}

/* ---------- video demo (one card, always open) ---------- */
.video-demo {
  margin-bottom: 40px;
}
/* the single card owns the border; the frame lives directly inside it */
.vd-card {
  position: relative;
  background: var(--control-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out);
}
.vd-card:hover {
  box-shadow: var(--shadow-card-hover);
}
/* ▶ play overlay: the always-open frame's play button (hover + click cue) */
.vd-play-btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
}
.vd-play-btn .vd-ph-badge {
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.vd-play-btn:active .vd-ph-badge {
  transform: scale(0.95);
}
.vd-play-btn:focus-visible .vd-ph-badge {
  box-shadow: 0 0 0 3px rgba(45, 36, 20, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .vd-play-btn:hover .vd-ph-badge {
    transform: scale(1.06);
    box-shadow: 0 5px 14px rgba(45, 36, 20, 0.28);
  }
}
/* once the video is actually playing, the overlay steps aside for native controls */
.video-demo.playing .vd-play-btn {
  opacity: 0;
  visibility: hidden;
}
.vd-frame {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: #fff;
}
.vd-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.vd-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 16px;
  background: radial-gradient(120% 100% at 50% 0%, #fffefb 0%, #f4f1ea 100%);
  color: var(--ink-3);
}
/* once a real video loads, the frame reveals it */
.video-demo.has-video .vd-placeholder {
  display: none;
}
.vd-ph-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 3px 10px rgba(45, 36, 20, 0.22);
}
.vd-ph-badge svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-left: 2px;
}
.vd-ph-text {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
}

/* ---------- interactive demo stage (shell) ---------- */
.stage-wrap {
  margin-bottom: 40px;
}
.stage {
  position: relative;
  aspect-ratio: 1560 / 1014;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f0e7 url("assets/desktop-bg.png") center / cover no-repeat;
  box-shadow: var(--shadow-card);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.stage.tool-spotlight {
  cursor: none;
}
.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(6, 7, 11, 0.64) 0%, rgba(10, 11, 16, 0.52) 58%, rgba(14, 15, 22, 0.52) 100%);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.stage.open .scrim {
  opacity: 1;
}
.hud {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.hud-chip {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: #fff;
  background: rgba(28, 28, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 9px;
}
.turn-off {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(28, 28, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: 500 10px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  padding: 6px 10px 6px 8px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.14s ease;
}
.turn-off svg {
  width: 11px;
  height: 11px;
}
.turn-off:hover {
  background: rgba(28, 28, 32, 0.82);
}
.turn-off:active {
  transform: scale(0.96);
}
.stage.has-tool .turn-off {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stage.open .turn-off {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 0;
  background: var(--control-bg);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  padding: 11px 17px;
  border-radius: 999px;
  box-shadow: var(--shadow-control);
  transition: opacity 0.24s var(--ease-out), box-shadow 0.16s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .prompt:hover {
    box-shadow: var(--shadow-control-hover);
  }
}
.prompt:active {
  transform: translate(-50%, -50%) scale(0.97);
}
.prompt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(28, 26, 23, 0.2);
  opacity: 0;
  pointer-events: none;
  animation: prompt-pulse 2.8s var(--ease-out) infinite;
}
@keyframes prompt-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.16); }
}
.stage.open .prompt,
.stage.has-tool .prompt {
  opacity: 0;
  pointer-events: none;
}
.stage.open .prompt::after,
.stage.has-tool .prompt::after {
  animation-play-state: paused;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font: 600 11px/1 var(--font-sans);
  color: #fff;
  background: rgba(28, 28, 32, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 12px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- fact rows ---------- */
.rows {
  margin-bottom: 44px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid var(--hairline);
}
.row:first-child {
  border-top: 0;
}
.row:last-child {
  border-bottom: 0;
}
.row-name {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.row-value {
  font: 560 13px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-align: right;
}

/* ---------- features (flip cards) ---------- */
.features {
  margin-bottom: 44px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 8px;
}
.feature-card {
  position: relative;
  height: 76px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  perspective: 700px;
  transition:
    height 0.46s var(--ease-flip),
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
/* left card widens right (pushes neighbours); middle/right grow taller only
   when the text overflows the flat card */
.feature-card.flipped.expand-right {
  grid-column: span 2;
}
.feature-card.flipped.expand-down {
  height: 148px;
}
.fc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.46s var(--ease-flip);
}
.feature-card.flipped .fc-inner {
  transform: rotateY(180deg);
}
.fc-front,
.fc-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(55, 45, 25, 0.025);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.fc-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 8px 13px;
}
.fc-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 13px;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover .fc-front,
  .feature-card:hover .fc-back {
    border-color: #2d241426;
    background: rgba(55, 45, 25, 0.05);
  }
}
/* opaque + lifted while open (after :hover so it wins under the pointer) */
.feature-card.flipped .fc-front,
.feature-card.flipped .fc-back,
.feature-card.flipped:hover .fc-front,
.feature-card.flipped:hover .fc-back {
  background: #fff;
  border-color: var(--hairline);
  box-shadow: 0 14px 34px -10px rgba(30, 24, 12, 0.26);
}
.feature-card:focus-visible {
  outline: none;
}
.feature-card:focus-visible .fc-inner {
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
}
.feature-grid.stagger .feature-card {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.feature-grid.stagger.in .feature-card {
  opacity: 1;
  transform: none;
}
.fc-icon {
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
.fc-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fc-name {
  font: 560 11.5px/1.25 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.fc-name-sm {
  font: 600 10.5px/1.2 var(--font-sans);
  text-align: left;
  text-wrap: pretty;
}
.fc-desc {
  font: 400 10px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-align: left;
  text-wrap: pretty;
}
@media (max-width: 420px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- video features (flip → video clip) ---------- */
.vfeatures {
  margin-bottom: 44px;
}
.vfeature-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column so an opened card expands full-width, like the video demo, with no grid gaps */
  align-items: start;
  gap: 8px;
}
.vfeature-card {
  position: relative;
  height: 76px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  perspective: 800px;
  transition:
    height 0.46s var(--ease-flip),
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.vfeature-card.flipped {
  height: 300px; /* grows tall for a big video, pushing the cards below down */
  z-index: 2;
}
.vfc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.46s var(--ease-flip);
}
.vfeature-card.flipped .vfc-inner {
  transform: rotateY(180deg);
}
.vfc-front,
.vfc-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(55, 45, 25, 0.025);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.vfc-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 8px 13px;
}
.vfc-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}
.vfc-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fff; /* matches the video-demo frame fill */
  overflow: hidden;
}
.vfc-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.vfc-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #fffefb 0%, #f4f1ea 100%);
}
.vfc-ph-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 3px 10px rgba(45, 36, 20, 0.22);
}
.vfc-ph-badge svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  margin-left: 2px;
}
.vfeature-card.has-video .vfc-ph {
  display: none;
}
.vfc-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px 10px;
}
.vfc-cap b {
  font: 600 11px/1.25 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.vfc-cap span {
  font: 400 10px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .vfeature-card:hover .vfc-front {
    border-color: #2d241426;
    background: rgba(55, 45, 25, 0.05);
  }
}
/* opaque + lifted while open (after :hover so it wins under the pointer) */
.vfeature-card.flipped .vfc-front,
.vfeature-card.flipped .vfc-back,
.vfeature-card.flipped:hover .vfc-front,
.vfeature-card.flipped:hover .vfc-back {
  background: #fff;
  border-color: var(--hairline);
  box-shadow: 0 14px 34px -10px rgba(30, 24, 12, 0.26);
}
.vfeature-card:focus-visible {
  outline: none;
}
.vfeature-card:focus-visible .vfc-inner {
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
}
.vfeature-grid.stagger .vfeature-card {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.vfeature-grid.stagger.in .vfeature-card {
  opacity: 1;
  transform: none;
}
@media (max-width: 480px) {
  .vfeature-grid {
    grid-template-columns: 1fr;
  }
  .vfeature-card.flipped {
    height: 270px;
  }
}

/* ---------- pricing ---------- */
.pricing {
  margin-bottom: 44px;
}
.tabs {
  position: relative;
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border-radius: 8px;
  background: var(--tabs-bg);
}
.tab {
  appearance: none;
  border: 0;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  background: none;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
  transition: color 0.16s var(--ease-out);
}
.tab:hover,
.tab.active {
  color: var(--ink);
}
@supports (anchor-name: --a) {
  .tab.active {
    anchor-name: --tab;
  }
  .tab:is(:hover, :focus-visible) {
    anchor-name: --tab;
  }
  .tabs:has(.tab:is(:hover, :focus-visible)) .tab.active:not(:hover, :focus-visible) {
    anchor-name: none;
  }
  .tabs:before {
    content: "";
    position: absolute;
    z-index: 0;
    position-anchor: --tab;
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    border-radius: var(--radius-sm);
    background: var(--pill-bg);
    box-shadow: var(--shadow-pill);
    transition: inset var(--tab-slide);
  }
}
@supports not (anchor-name: --a) {
  .tab.active {
    background: var(--pill-bg);
    box-shadow: var(--shadow-pill);
  }
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--control-bg);
  border-radius: 12px;
  padding: 14px 13px 13px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out), transform 0.14s ease;
}
.price-card:hover {
  box-shadow: var(--shadow-card-hover);
}
/* featured tier: inked-black fill (black is fine as emphasis on the featured plan + the CTA) */
.price-card.featured {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.9), 0 14px 30px -10px rgba(30, 24, 12, 0.4);
}
/* plan name + optional badge on one line (badge sits just right of the title,
   with a deliberate gap; min-height keeps prices aligned across cards) */
.pc-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 16px;
}
.pc-badge {
  flex: none;
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 3px 7px;
}
.pc-name {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: inherit;
}
.pc-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pc-price {
  font: 700 22px/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  transition: opacity 0.18s var(--ease-out);
}
.pc-price.swap {
  opacity: 0;
}
.pc-period {
  font: 400 10.5px/1 var(--font-mono);
  color: var(--ink-3);
}
.price-card.featured .pc-period {
  color: rgba(255, 255, 255, 0.55);
}
.pc-desc {
  font: 400 11px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
  min-height: 31px;
}
.price-card.featured .pc-desc {
  color: rgba(255, 255, 255, 0.72);
}
.pc-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pc-feats li {
  position: relative;
  padding-left: 15px;
  font: 400 11px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.price-card.featured .pc-feats li {
  color: rgba(255, 255, 255, 0.82);
}
.pc-feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6.5px;
  width: 5px;
  height: 3px;
  border-left: 1.4px solid var(--ink-3);
  border-bottom: 1.4px solid var(--ink-3);
  transform: rotate(-45deg);
}
.price-card.featured .pc-feats li::before {
  border-color: rgba(255, 255, 255, 0.6);
}
.pc-cta {
  appearance: none;
  border: 0;
  margin-top: 4px;
  width: 100%;
  font: 560 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  box-shadow: var(--shadow-control);
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.pc-cta:hover {
  box-shadow: var(--shadow-control-hover);
}
.pc-cta:active {
  transform: scale(0.97);
}
.price-card.featured .pc-cta {
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}
/* two-tier layout (Free + Pro) above the usage slider */
.price-grid.price-grid-2 {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 8px;
}

/* ---------- usage slider (a per-seat plan; shared with the /pricing gallery) ---------- */
.pv-slider {
  background: var(--control-bg);
  border-radius: 14px;
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out);
}
/* main-page Team card: a recessed "well" instead of a raised card. It sinks into
   the page (soft inset shadow + the system track tint) rather than popping like
   the Free/Pro cards above, reading honestly as a control you adjust. No white
   field on the container; the range + CTA inside keep their interactive look.
   Hairline is an inset ring (border:0), never a doubled CSS border. */
#price-slider {
  background: var(--tabs-bg);
  box-shadow:
    inset 0 2px 4px rgba(45, 36, 20, 0.07),
    inset 0 0 0 1px var(--hairline);
}
.pvs-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pvs-plan {
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.pvs-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pvs-amount {
  font: 700 26px/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transform-origin: right center;
  transition: transform 0.18s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .pvs-amount.pop {
    transform: scale(1.08);
  }
}
.pvs-per {
  font: 400 11px/1 var(--font-mono);
  color: var(--ink-2);
}
.pvs-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--tabs-bg);
  outline: none;
  margin: 4px 0 2px;
}
.pvs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ink);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(28, 26, 23, 0.3);
  cursor: grab;
  transition: transform 0.12s ease;
}
.pvs-range::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}
.pvs-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ink);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(28, 26, 23, 0.3);
  cursor: grab;
}
.pvs-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 0 16px;
  font: 400 11.5px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.pvs-labels b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pvs-feats {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.pvs-feats li {
  position: relative;
  padding-left: 15px;
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.pvs-feats li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 6px;
  height: 3.5px;
  border-left: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
@media (max-width: 560px) {
  .price-grid,
  .price-grid.price-grid-2 {
    grid-template-columns: 1fr;
  }
  .pc-desc {
    min-height: 0;
  }
}

/* ---------- roadmap (accordion) ---------- */
.roadmap {
  margin-bottom: 8px;
}
.roadmap-grid {
  display: flex;
  flex-direction: column;
}
.roadmap-phase {
  border-top: 1px solid var(--hairline);
  transition: border-color 0.2s var(--ease-out);
}
.roadmap-phase:last-child {
  border-bottom: 1px solid var(--hairline);
}
.roadmap-phase:hover,
.roadmap-phase:hover + .roadmap-phase {
  border-top-color: #2d241426;
}
/* scroll-in: phases fade up one after another (border-color kept for hover) */
@media (prefers-reduced-motion: no-preference) {
  .roadmap-grid.stagger .roadmap-phase {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.5s var(--ease-out) calc(var(--i, 0) * 55ms),
      transform 0.5s var(--ease-out) calc(var(--i, 0) * 55ms),
      border-color 0.2s var(--ease-out);
  }
  .roadmap-grid.stagger.in .roadmap-phase {
    opacity: 1;
    transform: none;
  }
}
.phase-head {
  display: flex;
  align-items: center;
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  padding: 16px 2px;
  cursor: pointer;
  text-align: left;
}
.phase-dot {
  flex: none;
  margin-right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1.6px solid var(--ink-3);
}
.roadmap-phase.done .phase-dot {
  background: var(--ink);
  border-color: var(--ink);
}
.roadmap-phase.now .phase-dot {
  border-color: var(--ink);
  border-style: dashed;
}
/* animated status markers (ported from the Workbox roadmap): the main roadmap
   uses these; the static .phase-dot above is kept for the /roadmap gallery. The
   "now" phase's arc spins; the marker crossfades to a "−" when the phase opens. */
.phase-status {
  flex: none;
  margin-right: 12px;
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.phase-status svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.mk-closed {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.mk-open {
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
}
.roadmap-phase.open .mk-closed {
  opacity: 0;
  transform: scale(0.6) rotate(90deg);
}
.roadmap-phase.open .mk-open {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.roadmap-phase.done .phase-status,
.roadmap-phase.now .phase-status {
  color: var(--ink);
}
.roadmap-phase.next .phase-status {
  color: var(--ink-2);
}
.roadmap-phase.later .phase-status {
  color: var(--ink-3);
}
.roadmap-phase.now .mk-closed path:last-child {
  transform-origin: 10px 10px;
  animation: road-spin 2.4s linear infinite;
}
@keyframes road-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-phase.now .mk-closed path:last-child {
    animation: none;
  }
  .phase-status svg {
    transition: opacity 0.2s ease;
    transform: none;
  }
}
.phase-label {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 60px;
  flex: none;
  margin-right: 4px;
}
.roadmap-phase.done .phase-label,
.roadmap-phase.now .phase-label {
  color: var(--ink);
}
.phase-title {
  flex: 1;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--ink);
  letter-spacing: var(--tracking);
}
.phase-count {
  font: 500 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-left: 12px;
}
.phase-chevron {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  margin-left: 12px;
  flex: none;
  transition: transform 0.4s var(--ease-smooth), color 0.2s var(--ease-out);
}
.roadmap-phase.open .phase-chevron {
  transform: rotate(180deg);
  color: var(--ink-2);
}
.phase-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s var(--ease-out);
}
.roadmap-phase.open .phase-body {
  grid-template-rows: 1fr;
}
.phase-content {
  overflow: hidden;
}
.phase-list {
  list-style: none;
  margin: 0;
  padding: 0 2px 18px 76px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-list li {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-2);
  letter-spacing: var(--tracking);
  position: relative;
  padding-left: 16px;
  text-wrap: pretty;
}
.phase-list li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* ---------- how it works (numbered steps) ---------- */
.steps {
  margin-bottom: 44px;
}
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px 2px;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* connector line joining the numbered badges (masked by the opaque badges) */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 27px;
  bottom: -27px;
  width: 1px;
  background: var(--hairline);
  transform-origin: top;
}
.step-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.22);
  font: 600 10.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: #fff;
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.step-ic {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ink-3);
}
.step-ic svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-desc {
  font: 400 12.5px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
/* scroll-in: steps fade up, connector lines draw downward */
.steps-list.stagger .step {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.steps-list.stagger.in .step {
  opacity: 1;
  transform: none;
}
.steps-list.stagger .step::before {
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.steps-list.stagger.in .step::before {
  transform: scaleY(1);
}

/* ---------- testimonials (quote cards) ---------- */
.testimonials {
  margin-bottom: 44px;
}
.tm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.tm-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  background: var(--control-bg);
  border-radius: 12px;
  padding: 14px 13px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out), opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.tm-card:hover {
  box-shadow: var(--shadow-card-hover);
}
/* featured pull-quote spans the full width with larger type */
.tm-card.featured {
  grid-column: 1 / -1;
  padding: 18px 17px;
}
.tm-card.featured .tm-quote {
  font-size: 15px;
  line-height: 1.55;
  max-width: 46ch;
}
.tm-quote {
  margin: 0;
  flex: 1;
  font: 400 12.5px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-wrap: pretty;
}
.tm-cite {
  display: flex;
  align-items: center;
  gap: 9px;
}
.tm-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--tabs-bg);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.tm-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tm-name {
  font: 600 11px/1.25 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.tm-role {
  font: 400 10px/1.25 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
/* scroll-in: cards fade up in sequence */
.tm-grid.stagger .tm-card {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.tm-grid.stagger.in .tm-card {
  opacity: 1;
  transform: none;
}
@media (max-width: 480px) {
  .tm-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- faq (accordion) ---------- */
.faq {
  /* the page runs on a 44px section rhythm; this break was the one at 0 */
  margin-top: 44px;
  margin-bottom: 44px;
}
.faq-grid {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--hairline);
  transition: border-color 0.2s var(--ease-out);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.faq-item:hover,
.faq-item:hover + .faq-item {
  border-top-color: #2d241426;
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  padding: 15px 2px;
  cursor: pointer;
  text-align: left;
}
.faq-q-text {
  flex: 1;
  font: 500 13px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-wrap: pretty;
}
/* +/− toggle (reads more "expandable" than a chevron) */
.faq-ic {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  color: var(--ink-3);
  transition: color 0.2s var(--ease-out);
}
.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.28s var(--ease-smooth), opacity 0.2s var(--ease-out);
}
.faq-ic::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq-ic::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
.faq-item.open .faq-ic {
  color: var(--ink-2);
}
.faq-item.open .faq-ic::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s var(--ease-out);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
}
.faq-a p {
  margin: 0;
  padding: 0 28px 16px 2px;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- closing CTA band ---------- */
.cta-band {
  margin: 8px 0 12px;
}
.cta-band-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: #fff;
  border-radius: 16px;
  padding: 34px 24px 30px;
  /* inked panel with a soft radial glow + inset top highlight (black as the closing accent).
     Deeper than --ink on purpose: this is the page's one true black. */
  background: radial-gradient(130% 120% at 50% -10%, #24211e 0%, #0e0d0b 55%);
  box-shadow: 0 0 0 1px rgba(10, 9, 8, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 40px -14px rgba(20, 16, 8, 0.45);
}
/* faint brand glyph watermark, cropped into the corner */
.cta-glyph {
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 150px;
  height: 150px;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.cta-band-inner > :not(.cta-glyph):not(.cta-flower) {
  position: relative;
  z-index: 1;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.cta-title {
  margin: 0;
  font: 600 16px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.cta-sub {
  margin: 0;
  max-width: 32ch;
  font: 400 13px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}
.cta-band-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  font: 560 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.cta-band-btn:hover {
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
}
.cta-band-btn:active {
  transform: scale(0.97);
}
.cta-band-btn .lockable {
  min-width: 6ch;
}
/* secondary ghost button (transparent, ringed) */
.cta-band-btn.ghost {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.cta-band-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cta-note {
  margin: 3px 0 0;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--tracking);
  color: rgba(255, 255, 255, 0.4);
}

/* The closing band keeps its ink. The corner watermark is gone: a flower sits
   at each edge instead, the same executable mark as the hero. The band that
   carries them must not clip, or the cut flower and its petals are sliced off
   at the card's edge, so overflow is opened only where the flowers live. */
.cta-band-inner[data-flower-frame] {
  overflow: visible;
}
/* the copy sits in its own column so the 74px gutters clear both flowers */
.cta-col {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
a.cta-note {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
a.cta-note:hover {
  color: rgba(255, 255, 255, 0.72);
}
a.cta-note:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 4px;
}
/* one at each edge, seated on the card. z-index is load-bearing: the copy
   column spans the full width and would otherwise swallow every click. */
.cta-flower {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  width: 92px;
  height: auto;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cta-flower-r {
  right: 2px;
  transform: scaleX(-1); /* pointer maths goes through getScreenCTM, so the mirror is safe */
}
/* ink strokes would disappear into the slab: the mark is drawn in paper here,
   and the core lifts off the accent so it still reads as green */
.cta-flower .hero-stem,
.cta-flower .hero-petals {
  stroke: rgba(255, 255, 255, 0.82);
}
.cta-flower .hero-core {
  fill: color-mix(in srgb, var(--pink) 62%, #fff);
}
.cta-flower:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
  border-radius: 10px;
}
@media (max-width: 420px) {
  /* the gutters cannot hold two 92px marks at phone width */
  .cta-col {
    padding: 0 62px;
  }
  .cta-flower {
    width: 74px;
  }
}

/* ---------- creator signup form (/creators/apply) ---------- */
/* Inputs are the one place the raised white field is right: they are the things
   you touch. Everything else on the page stays flat. */
.ap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}
.ap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ap-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.ap-fieldset {
  gap: 10px;
}
.ap-fieldset > legend.ap-label {
  margin-bottom: 8px; /* a legend does not take the flex gap */
}
.ap-label {
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  padding: 0;
}
.ap-optional {
  font-weight: 400;
  color: var(--ink-3);
}
.ap-input {
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  font: 400 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  transition: box-shadow 0.16s var(--ease-out);
}
.ap-input::placeholder {
  color: var(--ink-3);
}
.ap-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-control), 0 0 0 2px var(--accent);
}
.ap-input.is-wrong {
  box-shadow: var(--shadow-control), 0 0 0 1.5px #b4553f;
}
/* the handle sits inside its own URL, so the shape explains itself */
.ap-handle {
  display: flex;
  align-items: center;
  height: 36px;
  padding-left: 11px;
  border-radius: 8px;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  overflow: hidden;
}
.ap-prefix {
  font: 400 11.5px/1 var(--font-mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.ap-input-flush {
  height: 34px;
  padding-left: 2px;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.ap-input-flush:focus-visible {
  box-shadow: none;
}
.ap-hint {
  font: 400 11.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.ap-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ap-social {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ap-social > span {
  font: 400 11.5px/1 var(--font-sans);
  color: var(--ink-2);
}
.ap-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* The one on the login page is the only route out for someone in the wrong
   place, so it is set a step up from the footnote size the form uses. */
.ap-privacy.ap-alt {
  font-size: 12px;
  letter-spacing: var(--tracking);
}
.ap-privacy {
  margin: 2px 0 0;
  /* half a step down from the hint text: it was wrapping by two pixels, and a
     footnote that orphans "nothing else: privacy" onto its own line reads worse
     than one set slightly smaller */
  font: 400 10.5px/1.6 var(--font-sans);
  letter-spacing: -0.014em;
  color: var(--ink-3);
  max-width: none; /* each sentence keeps to its own single row */
}
.ap-privacy a {
  color: var(--ink-2);
}
.ap-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ap.is-sending {
  opacity: 0.72;
  pointer-events: none;
}
.ap-error {
  font: 400 12px/1.4 var(--font-sans);
  color: #b4553f;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.ap-error.is-shown {
  opacity: 1;
  transform: none;
}
/* the kit: the whole reason they filled the form */
.ap-done {
  max-width: 520px;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: enter 620ms var(--ease-out) backwards;
}
.ap-done-title {
  margin: 0 0 14px;
  font: 600 14px/1.3 var(--font-sans);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ap-kit {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-kit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ap-kit dt {
  min-width: 68px;
  font: 400 11px/1.4 var(--font-mono);
  color: var(--ink-3);
}
.ap-kit dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ap-kit code {
  font: 500 12px/1.4 var(--font-mono);
  color: var(--ink);
  word-break: break-all;
}
.ap-copy {
  appearance: none;
  border: 0;
  padding: 3px 8px;
  border-radius: 6px;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-2);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.ap-copy:hover {
  box-shadow: var(--shadow-control-hover);
}
.ap-copy:active {
  transform: scale(0.96);
}
/* the one thing left to do, so it looks like a step rather than a footnote */
.ap-next {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ap-next-btn {
  align-self: flex-start;
}
.ap-next-note {
  font: 400 12px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  max-width: 44ch;
}
.ap-done-note {
  margin: 0 0 8px;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  max-width: 44ch;
}
@media (max-width: 520px) {
  .ap-row,
  .ap-socials {
    grid-template-columns: 1fr;
  }
  .ap-prefix {
    display: none; /* the URL prefix eats the field on a phone */
  }
  .ap-input-flush {
    padding-left: 11px;
  }
}

/* the portfolio grid on /creators/ is a picture, not a control */
.fc-app.is-static {
  cursor: default;
  box-shadow: 0 0 0 1px var(--hairline);
}
.fc-app.is-static:hover {
  transform: none;
  box-shadow: 0 0 0 1px var(--hairline);
}
/* What the app is, so "which apps do you want to share" is answerable by
   someone who has not met all seven of them. */
.fc-app-blurb {
  font: 400 10.5px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-wrap: pretty;
  /* narrower than the card, so the line breaks before the edge and the text
     reads as a block rather than as full width prose */
  max-width: 19ch;
  margin-inline: auto;
  /* two lines, so one long description cannot make its whole row taller */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.page-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* the returning creator is not the point of this page, so it is a link rather
   than a second button competing with the one that matters */
.hero-alt {
  font: 400 12.5px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.hero-alt:hover {
  color: var(--ink);
}
.rc-said {
  margin: 0;
  max-width: 42ch;
  font: 400 13px/1.6 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}

/* The promise, in the same hand the home page uses for the flower. It appears
   only once a full app is on someone's list, so it answers a question they
   have actually asked rather than pre-empting one. */
/* A note in the margin, out in the whitespace beside the column, with a drawn
   brace holding it to what it is about. It only drops below the grid when the
   page is too narrow to have a margin to write in. */
/* Drawesome: the double rule under "creator", the same two strokes the frogi
   site uses, drawn in rather than faded up. */
.ap-mark {
  position: relative;
  white-space: nowrap;
}
.ap-rule {
  position: absolute;
  left: -2px;
  right: -6px;
  bottom: -9px;
  width: auto;
  height: 11px;
  color: var(--ink-3);
  overflow: visible;
}
.ap-rule-draw {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: ap-rule-draw 0.7s 0.25s var(--ease-out) forwards;
}
.ap-rule-draw:nth-child(2) {
  animation-delay: 0.45s;
}
@keyframes ap-rule-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-rule-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* the head carries the page's own bottom margin; the lead sits under the title
   rather than a section below it, so it pulls most of that back */
/* .page-lead is defined later in this file, so this needs both classes to win
   its margin rather than quietly losing it */
.page-lead.ap-lead {
  /* the head above already gives up most of its margin; a negative top on
     top of that pulled the line into the title */
  margin: 0 0 34px;
  max-width: 44ch;
}
.ap-lead + * {
  margin-top: 0;
}
main.db-page .db-head:has(+ .ap-lead),
.db-head:has(+ .ap-lead) {
  margin-bottom: 14px;
}
.ap-apps-field {
  position: relative;
}
/* the question on the left, the way out to read about the apps on the right */
.ap-label-row {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ap-learn {
  font: 400 11.5px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s var(--ease-out);
}
.ap-learn span {
  display: inline-block;
  transition: transform 0.16s var(--ease-out);
}
.ap-learn:hover {
  color: var(--ink);
}
.ap-learn:hover span {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .ap-learn span {
    transition: none;
  }
}
.ap-wait {
  position: absolute;
  left: calc(100% + 44px);
  top: 44%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 168px;
  font: 500 20px/1.28 "Caveat", var(--font-sans);
  letter-spacing: 0.005em;
  color: var(--ink-2);
  animation: ap-wait-in 0.34s var(--ease-out) both;
  pointer-events: none;
}
.ap-wait-brace {
  flex: none;
  width: 14px;
  height: 66px;
  color: var(--ink-3);
}
.ap-wait-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
/* drawn rather than an icon, so it belongs to the handwriting next to it */
.ap-wait-bell {
  width: 34px;
  height: 34px;
  margin-left: 2px;
  color: var(--ink-3);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-9deg);
}
.ap-wait-text {
  text-wrap: pretty;
}
@media (max-width: 780px) {
  .ap-wait {
    position: static;
    width: auto;
    justify-content: flex-end;
    margin-top: 10px;
    font-size: 15px;
  }
  /* the brace lies down and points up at the grid it belongs to */
  .ap-wait-brace {
    order: 1;
    width: 34px;
    height: 12px;
    transform: rotate(-90deg);
  }
}
@keyframes ap-wait-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-wait {
    animation: none;
  }
}

/* No labels under the cards. An app that is not open yet is simply quieter:
   its icon sits back until you hover or choose it, so the one you can act on
   today is the one in full colour. Choosing a quiet one turns it amber, swaps
   the tick for a bell, and writes the promise in the margin. */
.fc-app[data-spots="waitlist"] .fc-app-icon img {
  filter: grayscale(0.55);
  opacity: 0.66;
  transition: filter 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.fc-app[data-spots="waitlist"]:hover .fc-app-icon img,
.fc-app[data-spots="waitlist"]:focus-visible .fc-app-icon img,
.fc-app.is-picked[data-spots="waitlist"] .fc-app-icon img {
  filter: none;
  opacity: 1;
}
.fc-app[data-spots="waitlist"] .fc-app-name {
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .fc-app[data-spots="waitlist"] .fc-app-icon img {
    transition: none;
  }
}

/* Chosen but waiting is a different state, not a lesser one: amber rather than
   green, and a bell rather than a tick, so the card says "later" on its own and
   nothing needs explaining underneath. */
.fc-mark-bell {
  display: none;
}
.fc-app.is-listed .fc-mark-check {
  display: none;
}
.fc-app.is-listed .fc-mark-bell {
  display: block;
}
.fc-app.is-picked.is-listed {
  box-shadow: 0 0 0 1.5px #c8a03c, var(--shadow-control);
}
.fc-app.is-picked.is-listed .fc-tick {
  background: #c8a03c;
}
/* ---------- creator dashboard (/creators/dashboard) ---------- */
/* the dashboard runs in the same column as every other page; it only needs the
   extra bottom room so the dock does not sit on the footer */
main.db-page {
  padding-bottom: 96px;
}

/* The greeting carries the page, in the same hand as the home page hero: a
   dashboard that says who you are reads like a place rather than a report. */
/* the home page hero wraps to three lines on purpose; a greeting is one row */
.db-head .hero-title {
  max-width: none;
}
.db-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 26px;
}
.db-who {
  font: 400 11.5px/1.4 var(--font-mono);
  color: var(--ink-3);
}

/* the thing they came to do, given the weight it deserves */
.db-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 15px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.db-link + .db-link {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.db-link-app {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: -0.006em;
  color: var(--ink);
}
.db-link-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
}
/* the rest of the portfolio: one press to take a link, or a flat chip for the
   ones that are not open. A chip that cannot be pressed does not get the
   raised control field. */
.db-apps {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.db-apps-label {
  font: 400 11px/1.3 var(--font-mono);
  color: var(--ink-3);
}
.db-apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.db-app-add,
.db-app-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.db-app-add img,
.db-app-soon img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}
.db-app-add {
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.db-app-add svg {
  width: 12px;
  height: 12px;
  margin-left: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  color: var(--ink-3);
}
.db-app-add:hover:not(:disabled) {
  box-shadow: var(--shadow-control-hover);
}
.db-app-add:active:not(:disabled) {
  transform: scale(0.96);
}
.db-app-add:disabled {
  cursor: default;
  color: var(--ink-3);
  background: none;
  box-shadow: 0 0 0 1px var(--hairline);
}
.db-app-soon {
  color: var(--ink-3);
  background: rgba(55, 45, 25, 0.04);
  box-shadow: 0 0 0 1px var(--hairline);
  cursor: default;
}
.db-app-soon img {
  opacity: 0.5;
}

/* one bell for the whole list, sitting with the label that names it */
.db-apps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.db-bell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), color 0.16s var(--ease-out), transform 0.12s ease;
}
.db-bell svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-bell:hover {
  color: var(--ink);
  box-shadow: var(--shadow-control-hover);
}
.db-bell:active {
  transform: scale(0.96);
}
/* on: the bell fills in and takes the data colour */
.db-bell[aria-pressed="true"] {
  color: var(--chart);
  background: color-mix(in srgb, var(--chart) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart) 30%, transparent);
}
.db-bell[aria-pressed="true"] svg {
  fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .db-bell:active {
    transform: none;
  }
}
.db-apps-err {
  color: #a8352e;
}
@media (prefers-reduced-motion: reduce) {
  .db-app-add:active:not(:disabled) {
    transform: none;
  }
}
.db-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* not `flex: 1`: the copy control belongs beside the link, the same way the one
   under it sits beside the code, rather than pinned to the far edge */
.db-share-link {
  flex: 0 1 auto;
  min-width: 0;
  font: 500 12.5px/1.4 var(--font-mono);
  color: var(--ink);
  word-break: break-all;
}
.db-share-thin {
  gap: 8px;
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--ink-3);
}
.db-share-thin code {
  font: 500 11.5px/1.4 var(--font-mono);
  color: var(--ink);
}
.db-share-key {
  color: var(--ink-3);
}

/* the value sits beside its own control: a glyph, not a word, so the row reads
   as one line of data rather than a sentence */
.db-copy-icon {
  position: relative; /* the bubble anchors to the button, not to the page */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.16s var(--ease-out), background-color 0.16s var(--ease-out), transform 0.12s ease;
}
.db-copy-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-copy-icon:hover {
  color: var(--ink);
  background: rgba(55, 45, 25, 0.06);
}
.db-copy-icon:active {
  transform: scale(0.92);
}
.db-copy-icon .ic-done {
  display: none;
}
/* the same bubble the info icon uses, on success rather than on hover */
.db-copy-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: 4;
  transform: translateX(-50%) translateY(3px);
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--control-bg);
  box-shadow: 0 0 0 1px var(--hairline), 0 6px 16px rgba(45, 36, 20, 0.12);
  font: 500 10.5px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* quick to arrive, slower to leave: the base rule is the exit */
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.db-copy-icon.is-done .db-copy-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .db-copy-tip {
    transition: opacity 0.14s linear;
    transform: translateX(-50%);
  }
}
.db-copy-icon.is-done {
  color: var(--ok);
}
.db-copy-icon.is-done .ic-copy {
  display: none;
}
.db-copy-icon.is-done .ic-done {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .db-copy-icon:active {
    transform: none;
  }
}


/* the status, as a pill, so a sale is one line */
.db-pill {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font: 400 10.5px/1.5 var(--font-mono);
  color: var(--ink-3);
  background: rgba(55, 45, 25, 0.06);
  white-space: nowrap;
  cursor: help;
}
/* waiting out the refund window: the most common state, and the one creators
   write in about, so it is the one that gets a colour */
.db-pill[data-status="pending"] {
  color: #7a5600;
  background: color-mix(in srgb, var(--warn) 26%, transparent);
}
.db-pill[data-status="paid"] {
  color: #0c6b41;
  background: color-mix(in srgb, var(--ok) 22%, transparent);
}
/* `processed` keeps the neutral pill: cleared and waiting is not news */
.db-pill[data-status="refunded"],
.db-pill[data-status="canceled"],
.db-pill[data-status="duplicate"],
.db-pill[data-status="hold"],
.db-pill[data-status="fraud"] {
  color: #a8352e;
  background: color-mix(in srgb, var(--bad) 20%, transparent);
}

/* the swatch survives the legend: the tooltip still marks its one series */
.db-swatch {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-2);
}
.db-swatch-sales {
  background: var(--chart);
}
.db-plot svg {
  display: block;
  width: 100%;
  height: auto; /* uniform scaling: circles stay circles */
  overflow: visible;
}
/* recessive grid, thin marks, a fill only to give the line a body */
.db-grid {
  stroke: var(--hairline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.db-axis {
  font: 400 7.5px/1 var(--font-mono);
  fill: var(--ink-3);
}
.db-area {
  fill: rgba(87, 80, 73, 0.13);
}
.db-area-sales {
  fill: color-mix(in srgb, var(--chart) 17%, transparent);
}
.db-line {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.db-line-sales {
  stroke: var(--chart);
}
.db-cross {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
.db-pt {
  fill: var(--ink);
  stroke: var(--bg);
  stroke-width: 1.4;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
.db-pt-sales {
  fill: var(--chart);
}

/* the chart, as a card: the plot needs air above and below it more than any
   other block on this page, and the tooltip needs something to be inside of */
.db-chart {
  position: relative;
  gap: 16px;
  padding: 16px 18px 20px;
}
.db-chart .db-plot {
  margin: 2px 0 4px;
}

/* the reading happens at the crosshair, so the numbers belong there too */
.db-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
}
.db-tip[data-flip="down"] {
  transform: translate(-50%, 0);
}
.db-tip {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 118px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--control-bg);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 22px rgba(45, 36, 20, 0.12);
  white-space: nowrap;
}
.db-tip-when {
  font: 500 10.5px/1.3 var(--font-mono);
  color: var(--ink-3);
}
.db-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 11.5px/1.45 var(--font-sans);
  color: var(--ink-2);
}
.db-tip-row b {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* a little more air before the assets card than the standard card rhythm */
.db-card.db-recent {
  margin-bottom: 30px;
}
.db-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.db-row {
  display: grid;
  grid-template-columns: 54px 72px 84px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-2);
}
/* one rule, under the column names, rather than a rule between every sale */
.db-row-head {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--hairline);
  font: 400 10.5px/1.4 var(--font-mono);
  color: var(--ink-3);
}
.db-row-clear {
  font: 400 11px/1.4 var(--font-mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.db-row-head .db-row-when,
.db-row-head .db-row-sale,
.db-row-head .db-row-clear,
.db-row-head .db-row-earn {
  font: inherit;
  font-weight: 400;
  color: var(--ink-3);
}
.db-row-head .db-row-earn {
  text-align: right;
}
.db-row-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.db-row-earn {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.db-row-sale {
  font-variant-numeric: tabular-nums;
}
/* the pager, which only exists when there is a second page to reach */
.db-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}
.db-pager-count {
  font: 400 11px/1.4 var(--font-mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.db-pager-btns {
  display: inline-flex;
  gap: 6px;
}
.db-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--ink-2);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease, color 0.16s ease;
}
.db-page-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-page-btn:hover:not(:disabled) {
  color: var(--ink);
  box-shadow: var(--shadow-control-hover);
}
.db-page-btn:active:not(:disabled) {
  transform: scale(0.94);
}
/* a dead end is not a control: it loses the raised field with the affordance */
.db-page-btn:disabled {
  cursor: default;
  color: var(--ink-3);
  opacity: 0.45;
  background: none;
  box-shadow: 0 0 0 1px var(--hairline);
}
@media (prefers-reduced-motion: reduce) {
  .db-page-btn:active:not(:disabled) {
    transform: none;
  }
}

.db-empty {
  margin: 0 0 34px;
  max-width: 46ch;
  font: 400 12.5px/1.6 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.db-state {
  margin: 0;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.db-state.is-bad {
  color: #b4553f;
  max-width: 46ch;
}
/* ---------- dashboard cards ---------- */

/* A block of numbers is not clickable, so it takes the quiet tint and a single
   hairline rather than the raised white control field. */
.db-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px;
  margin: 0 0 18px;
  border-radius: 12px;
  background: rgba(55, 45, 25, 0.025);
  box-shadow: 0 0 0 1px var(--hairline);
}
.db-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.db-card-title {
  margin: 0; /* the sales card uses an h3 here */
  font: 600 12.5px/1.3 var(--font-sans);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.db-card-note {
  font: 400 11px/1.3 var(--font-mono);
  color: var(--ink-3);
}
.db-card-value {
  font: 600 16px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.db-note {
  margin: 0;
  font: 400 11.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  max-width: 54ch;
}
.db-note:empty {
  display: none;
}

/* The second line of a balance. Every payments product does this the same way,
   because "available" and "available soon" are two facts a creator needs at
   once: Stripe, PayPal and Shopify all split the number rather than footnote it. */
.db-soon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.db-soon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}
.db-soon-label {
  font: 400 12px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.db-soon-value {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* the prose measure that suits a paragraph would break this one line in two */
.db-soon .db-note {
  max-width: none;
}

/* A rule a creator needs once, so it sits behind an icon rather than in a line
   of prose under a number. */
.db-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: help;
}
.db-info svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.db-info:hover,
.db-info:focus-visible {
  color: var(--ink-2);
}
.db-info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 4;
  transform: translateX(-50%) translateY(2px);
  width: max-content;
  max-width: 210px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--control-bg);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 22px rgba(45, 36, 20, 0.12);
  font: 400 11.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
.db-info:hover .db-info-tip,
.db-info:focus-visible .db-info-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .db-info-tip {
    transition: opacity 0.14s linear;
    transform: translateX(-50%);
  }
}

/* the payout panel: an empty state that says what happens next, or the history */
.db-inset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 108px;
  padding: 20px 16px;
  border-radius: 10px;
  background: rgba(55, 45, 25, 0.04);
  text-align: center;
}
.db-inset-list {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: 4px 12px;
  text-align: left;
}
.db-inset-title {
  font: 600 12.5px/1.4 var(--font-sans);
  color: var(--ink);
}
.db-inset-note {
  font: 400 11.5px/1.5 var(--font-sans);
  color: var(--ink-3);
  max-width: 36ch;
}
.db-inset-btn,
.db-asset-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}
.db-inset-btn {
  margin-top: 10px;
}
.db-pay {
  list-style: none;
  margin: 0;
  padding: 0;
}
.db-pay-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.db-pay-row:first-child {
  border-top: 0;
}
.db-pay-row .db-row-earn {
  text-align: right;
}

/* three months side by side: one number has no direction */
.db-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.db-bar-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.db-bar-track {
  display: flex;
  align-items: flex-end;
  height: 120px;
}
.db-bar {
  width: 100%;
  border-radius: 8px;
  /* a little lift down the bar, so a column of solid colour is not flat */
  background: linear-gradient(
    180deg,
    var(--chart) 0%,
    color-mix(in srgb, var(--chart) 74%, #fff) 100%
  );
  transform-origin: 50% 100%;
  animation: db-rise 0.5s var(--ease-out) both;
}
/* an empty month is hatched rather than absent, so the columns still compare */
.db-bar.is-empty {
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(50, 42, 28, 0.07) 5px 6px);
  animation: none;
}
@keyframes db-rise {
  from {
    transform: scaleY(0.02);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.db-bar-month {
  font: 500 12px/1.3 var(--font-sans);
  color: var(--ink);
}
.db-bar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.db-bar-value {
  font: 400 12px/1.3 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.db-trend {
  display: inline-flex;
  width: 22px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ink-3);
  background: rgba(55, 45, 25, 0.06);
}
.db-trend svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-trend[data-dir="up"] {
  color: #0c6b41;
  background: color-mix(in srgb, var(--ok) 22%, transparent);
}
.db-trend[data-dir="down"] {
  color: #a8352e;
  background: color-mix(in srgb, var(--bad) 20%, transparent);
}

/* the pack, so nobody has to email us for a logo */
/* A card per app, so a creator carrying three of them never has to work out
   which screenshots belong to which. */
.db-assets {
  margin-bottom: 18px;
}
.db-assets-head {
  margin: 0 0 12px;
  font: 600 12.5px/1.3 var(--font-sans);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.db-kit .db-link-app {
  margin-bottom: 0; /* the card's own column gap spaces it */
}
/* the prose measure that suits a paragraph would break this one line in two */
.db-kit .db-note {
  max-width: none;
}
/* a single row of contact prints: the card stays short, and a click opens the
   full size file for anyone who needs to look properly */
.db-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 7px;
}
.db-shot {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.db-shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(45, 36, 20, 0.24), 0 6px 16px rgba(45, 36, 20, 0.1);
}
.db-shot img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .db-shot {
    transition: none;
  }
}
.db-asset-btn {
  align-self: flex-start;
}

@media (max-width: 520px) {
  /* the countdown is the first thing to go when the row runs out of width */
  .db-row {
    grid-template-columns: 48px 64px 1fr auto;
  }
  .db-row-clear {
    display: none;
  }
  .db-shots {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .db-bar {
    animation: none;
  }
}

/* ---------- bento grid ---------- */
.bento {
  margin-bottom: 44px;
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* not clickable → same subtle tint + hairline as the Feature cards, NOT the white control field */
.bento-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 104px;
  padding: 15px 14px;
  background: rgba(55, 45, 25, 0.025);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.bento-cell.span2 {
  grid-column: 1 / -1;
}
.bc-icon {
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
.bc-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bc-title {
  font: 600 13px/1.25 var(--font-sans);
  letter-spacing: var(--tracking);
  color: inherit;
}
.bc-desc {
  font: 400 11.5px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.bento-cell.stat {
  justify-content: center;
  gap: 4px;
}
.bc-stat {
  font: 600 16px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bc-stat-label {
  font: 400 11px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .bento-cell:hover {
    border-color: #2d241426;
    background: rgba(55, 45, 25, 0.05);
  }
}

/* ---------- feature spotlights ---------- */
.spotlights-sec {
  margin-bottom: 44px;
}
.spotlights {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spotlight {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px;
  background: var(--control-bg);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out);
}
.spotlight:nth-child(even) {
  flex-direction: row-reverse;
}
@media (hover: hover) and (pointer: fine) {
  .spotlight:hover {
    box-shadow: var(--shadow-card-hover);
  }
}
.sp-media {
  position: relative;
  flex: none;
  width: 134px;
  height: 106px;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f1ea;
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid;
  place-items: center;
}
.sp-mock {
  position: absolute;
  inset: 0;
}
.sp-mock svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spotlight.has-media .sp-mock {
  display: none;
}
/* flagship: the media shows the app icon centered, not a cropped screenshot */
.sp-media.sp-appicon img {
  position: static;
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 15px;
  filter: drop-shadow(0 3px 6px rgba(20, 14, 4, 0.18));
}
.sp-link {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.sp-link:hover {
  color: var(--ink);
}
.sp-link-arrow {
  font-family: var(--font-sans);
}
.sp-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-title {
  font: 600 13px/1.2 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.sp-desc {
  margin: 0;
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
  /* never exceed two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.sp-points {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-points li {
  position: relative;
  padding-left: 15px;
  font: 400 11px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.sp-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 6px;
  height: 3.5px;
  border-left: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
@media (max-width: 480px) {
  .spotlight,
  .spotlight:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-media {
    width: 100%;
    height: 128px;
  }
}

/* ---------- comparison (the old way vs) ---------- */
.compare {
  margin-bottom: 44px;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.compare-col {
  border-radius: 12px;
  padding: 16px 15px;
}
/* old = flat + recessed (muted); new = a raised light card (the recommended path).
   Emphasis comes from muted-vs-crisp content + elevation, not a black fill. */
.compare-col.old {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.compare-col.new {
  background: var(--control-bg);
  box-shadow: var(--shadow-card);
}
.compare-head {
  display: block;
  margin-bottom: 13px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.compare-col.old .compare-head {
  color: var(--ink-3);
}
.compare-col.new .compare-head {
  color: var(--ink);
}
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-list li {
  position: relative;
  padding-left: 19px;
  font: 400 12px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  text-wrap: pretty;
}
.compare-col.old li {
  color: var(--ink-2);
}
.compare-col.new li {
  color: var(--ink);
}
.compare-col.old li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink-3);
}
.compare-col.new li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 7px;
  height: 4px;
  border-left: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}
@media (max-width: 480px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- integrations ---------- */
.integrations {
  margin-bottom: 44px;
}
.intg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* flat hairline pills: display only, not the raised "clickable field" look */
.intg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  background: var(--control-bg);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--hairline);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
/* real brand logo (simple-icons SVG) tinted to ink via CSS mask */
.intg-logo {
  flex: none;
  width: 17px;
  height: 17px;
  background-color: var(--ink-2);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.intg-chip.intg-more {
  padding: 7px 12px;
  background: none;
  box-shadow: none;
  color: var(--ink-3);
}

/* scroll-in stagger shared by the four grid sections above */
@media (prefers-reduced-motion: no-preference) {
  .bento-grid.stagger .bento-cell,
  .spotlights.stagger .spotlight,
  .compare-grid.stagger .compare-col,
  .intg-grid.stagger .intg-chip {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.5s var(--ease-out) calc(var(--i, 0) * 55ms),
      transform 0.5s var(--ease-out) calc(var(--i, 0) * 55ms),
      box-shadow 0.2s var(--ease-out);
  }
  .bento-grid.stagger.in .bento-cell,
  .spotlights.stagger.in .spotlight,
  .compare-grid.stagger.in .compare-col,
  .intg-grid.stagger.in .intg-chip {
    opacity: 1;
    transform: none;
  }
}

/* ---------- footer ---------- */
/* One shape on every page. Three rows rather than two columns: the page is a
   440px column, and a five link row set beside the wordmark squeezed the
   copyright into three wrapped lines. */
.footer2 {
  position: relative;
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  /* Five rows of equal height, because the links are the rows: left to itself
     the grid sized each row to whatever the left column put in it, so the gaps
     between the links came out uneven. */
  grid-template-rows: repeat(5, 20px);
  align-items: center;
  gap: 10px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.footer2 a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.14s ease;
}
.footer2 a:hover {
  color: var(--ink);
}
/* The mark from the hero, planted in the footer: its bloom sits where the
   wordmark's icon used to, and its stem runs down beside the signature. Cut
   it and it grows back up to the footer's top edge. */
/* Sized from the mark's own geometry: the bloom sits at y=158 of the 420 unit
   box and the stem meets the ground at y=380, so the height is set to put those
   two on the wordmark row and the signature row exactly. */
.f2-flower {
  position: absolute;
  left: -56px;
  top: -37px;
  width: 162px;
  height: 170px;
  overflow: visible;
  cursor: pointer;
}
.f2-flower:focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 2px;
  border-radius: 8px;
}
.f2-wordmark {
  grid-column: 1;
  grid-row: 1;
  padding-left: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.f2-wordmark img {
  width: 15px;
  height: 15px;
}
/* The links are the rows. `display: contents` puts each one straight into the
   footer grid, so the signature can sit on the same line as "terms" and the
   copyright on the same line as "privacy". */
.f2-nav {
  display: contents;
}
.f2-nav a {
  grid-column: 2;
  justify-self: end;
}
.f2-sign {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  margin-left: 36px;
}
/* the ground line: it starts at the edge, under where the stem lands, rather
   than indented with the text the stem stands beside */
.f2-meta {
  grid-column: 1;
  grid-row: 5;
  font-size: 11px;
  white-space: nowrap;
}
/* On a phone the footer is one column, so there is no gutter to plant the
   flower in and its stem would run straight through the links. The rows are
   spelled out because auto placement follows the markup, which puts the
   copyright before the signature. */
@media (max-width: 560px) {
  .footer2 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-items: start;
    gap: 11px;
  }
  .f2-flower {
    display: none;
  }
  .f2-wordmark {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
  }
  .f2-nav a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .f2-sign {
    grid-column: 1;
    grid-row: 7;
    margin-left: 0;
    justify-self: start;
  }
  .f2-meta {
    grid-column: 1;
    grid-row: 8;
  }
}

/* A legal document is read differently from a five step explainer: clauses can
   run to several paragraphs, so they get room to breathe and a measure that
   does not run past the eye. */
.steps-legal .step {
  align-items: start;
}
.steps-legal .step-body {
  gap: 8px;
}
.steps-legal .step-desc {
  max-width: 62ch;
  line-height: 1.62;
}
.steps-legal .step-desc + .step-desc {
  margin-top: 2px;
}

/* ---------- the signature ----------
   The label says AGC but the link goes to an X profile, so the card shows what
   is on the other end before anyone commits to the click. It opens upward and
   to the left: the footer is the last thing on the page, and the column it
   sits in is right aligned. */
.footer2 .f2-sign {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  /* a small row is too little to tap: pad the hit area out and pull the same
     amount back off the margin so the footer row does not grow */
  padding-block: 8px;
  margin-block: -8px;
  font: 500 16px/1 "Caveat", var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s linear;
}
.footer2 .f2-sign b {
  position: relative;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.15s linear;
}
.footer2 .f2-sign:hover,
.footer2 .f2-sign:focus-visible {
  color: var(--ink-2);
}
.footer2 .f2-sign:hover b,
.footer2 .f2-sign:focus-visible b {
  color: var(--ink);
}
/* two passes of a pen around the initials, drawn on hover */
.f2-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 27px;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: var(--pink);
  overflow: visible;
  pointer-events: none;
}
/* Always there, drawn once on load. Hover deepens it rather than summoning
   it, so the initials are ringed whether or not anyone reaches for them. */
.f2-ring-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  opacity: 0.7;
  animation: f2-ring-draw 0.75s 0.4s var(--ease-out) forwards;
  transition: opacity 0.2s var(--ease-out);
}
.f2-ring-draw:nth-child(2) {
  animation-delay: 0.62s;
}
@keyframes f2-ring-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.f2-sign:hover .f2-ring-draw,
.f2-sign:focus-visible .f2-ring-draw {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .f2-ring-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* the card is not part of the underlined label */
.sign-card {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 248px;
  padding: 13px 14px 12px;
  border-radius: 14px;
  background: var(--control-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transform-origin: 0 100%;
  transition: opacity 0.14s linear, transform 0.22s var(--ease-out);
}
.sign-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sign-card-pic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.sign-card-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  margin-right: auto;
}
.sign-card-name {
  font: 600 13px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sign-card-at {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.sign-card-x {
  display: flex;
  margin-left: 2px;
  color: var(--ink-3);
}
.sign-card-x svg {
  display: block;
  width: 13px;
  height: 13px;
}
.sign-card-bio {
  font: 500 12.5px/1.4 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-align: left;
}
.sign-card-stats {
  display: flex;
  gap: 14px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.sign-card-stats b {
  font-weight: 600;
  color: var(--ink);
}
/* pointer only: on touch the tap already opens the profile */
@media (hover: hover) and (pointer: fine) {
  .f2-sign:hover .sign-card {
    opacity: 1;
    transform: none;
  }
}
/* keyboard users get it too, without needing a pointer */
.f2-sign:focus-visible .sign-card {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sign-card {
    transition: opacity 0.14s linear;
    transform: none;
  }
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  .top-right {
    gap: 8px;
  }
  .tagline {
    margin-bottom: 28px;
  }
  .marquee-row {
    margin-bottom: 32px;
  }
  .rows {
    margin-bottom: 36px;
  }
  .footer2 {
    margin-top: 36px;
  }
  .hero {
    margin-bottom: 34px;
  }
  .hero-thesis {
    font-size: 22px;
  }
}

/* ---------- portfolio (clickable app cards → white-field control look) ---------- */
/* ---------- focus / niches (flip cards: niche → market metrics) ---------- */
.bento {
  margin-bottom: 44px;
}
.niche-card {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  min-height: 132px;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.niche-card.span2 {
  grid-column: 1 / -1;
}
.nc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-flip);
}
.niche-card.flipped .nc-inner {
  transform: rotateY(180deg);
}
.nc-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(55, 45, 25, 0.025);
  padding: 15px 14px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s var(--ease-out);
}
.niche-card:hover .nc-face {
  border-color: rgba(45, 36, 20, 0.2);
}
.niche-card:focus-visible .nc-face {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: transparent;
}
.nc-front {
  justify-content: space-between;
  gap: 14px;
}
/* clamp the front desc and the back why to three lines so every card matches */
.nc-front .bc-desc,
.nc-why {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.nc-back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: 11px;
}
.nc-metrics {
  display: flex;
  gap: 22px;
}
.nc-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nc-val {
  font: 600 16px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.nc-lbl {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nc-why {
  margin: 0;
  font: 400 11.5px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.bento-grid.stagger .niche-card {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 60ms);
}
.bento-grid.stagger.in .niche-card {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nc-inner {
    transition: none;
  }
}

.portfolio {
  margin-bottom: 44px;
}

/* -------- portfolio: three square cells across the full column width -------- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 8px -24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pf-box {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
/* hairlines between columns and between rows: the grid runs to several rows
   now, so a plain sibling rule would draw a stray edge at each row start */
.pf-box:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--hairline);
}
.pf-box:nth-child(n + 4) {
  border-top: 1px solid var(--hairline);
}
.pf-box.is-blank {
  pointer-events: none;
}
.pf-box-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 15px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(20, 14, 4, 0.16));
  transition: transform 0.26s var(--ease-bloom);
  -webkit-user-drag: none;
}
.pf-box-domain {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  transition: color 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pf-box:hover {
    background: rgba(55, 45, 25, 0.03);
  }
  .pf-box:hover .pf-box-icon img {
    transform: scale(1.16) translateY(-3px);
  }
  .pf-box:hover .pf-box-domain {
    color: var(--ink);
  }
}
.pf-box:focus-visible {
  outline: none;
  background: rgba(55, 45, 25, 0.04);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.pf-grid.stagger .pf-box {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 80ms),
    background-color 0.2s var(--ease-out);
}
.pf-grid.stagger.in .pf-box {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pf-box-icon img {
    transition: none;
  }
  .pf-box:hover .pf-box-icon img {
    transform: none;
  }
}
@media (max-width: 480px) {
  .pf-grid {
    margin: 8px -18px 0;
  }
  .pf-box-icon img {
    width: 52px;
    height: 52px;
  }
}
/* acquired card: show the real morefocus icon in the glyph slot */
.acq-glyph.acq-glyph-img {
  overflow: hidden;
  padding: 0;
}
.acq-glyph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .dock-img.bounce {
    animation: none;
  }
}
.pf-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 134px;
  padding: 14px;
  border-radius: 12px;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover {
    box-shadow: var(--shadow-control-hover);
    transform: translateY(-2px);
  }
}
.pf-card:active {
  transform: scale(0.985);
}
.pf-card:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
}
.pf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pf-glyph {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.pf-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-chip {
  flex: none;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(55, 45, 25, 0.06);
}
.pf-chip-live {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.pf-chip-building {
  color: var(--ink-3);
  background: rgba(55, 45, 25, 0.05);
}
.pf-name {
  font: 600 13px/1.2 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.pf-oneliner {
  flex: 1;
  margin: 0;
  font: 400 11.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.pf-visit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--ink-3);
  transition: color 0.14s ease;
}
.pf-card:hover .pf-visit {
  color: var(--accent);
}
.visit-arrow {
  width: 10px;
  height: 10px;
  display: block;
  transition: transform 0.18s var(--ease-out);
}
.pf-card:hover .visit-arrow {
  transform: translate(1px, -1px);
}
/* scroll-in: cards fade in one by one (transform stays free for hover/press) */
.portfolio-grid.stagger .pf-card {
  opacity: 0;
  transition: box-shadow 0.2s var(--ease-out), transform 0.16s var(--ease-out),
    opacity 0.5s var(--ease-out) calc(var(--i, 0) * 70ms);
}
.portfolio-grid.stagger.in .pf-card {
  opacity: 1;
}

/* ---------- acquired (one understated, clickable proof card) ---------- */
.acquired {
  margin-bottom: 44px;
}
.acq-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border-radius: 12px;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .acq-card:hover {
    box-shadow: var(--shadow-control-hover);
    transform: translateY(-2px);
  }
}
.acq-card:active {
  transform: scale(0.99);
}
.acq-card:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
}
.acq-glyph {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-2);
}
.acq-glyph svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acq-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acq-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acq-name {
  font: 600 13px/1.2 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.acq-badge {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--ink-3);
  background: rgba(55, 45, 25, 0.05);
}
.acq-desc {
  font: 400 11.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.acq-visit {
  flex: none;
  color: var(--ink-3);
  transition: color 0.14s ease;
}
.acq-card:hover .acq-visit {
  color: var(--accent);
}
.acq-card:hover .acq-visit .visit-arrow {
  transform: translate(1px, -1px);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }
  .prompt::after {
    animation: none;
  }
  .feature-grid.stagger .feature-card {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .feature-card,
  .fc-inner,
  .turn-off,
  .stage.has-tool .turn-off,
  .stage.open .turn-off {
    transition: none;
    transform: none;
  }
  .vd-play-btn,
  .vd-play-btn .vd-ph-badge {
    transition: none;
  }
  /* flip cards crossfade instead of rotating */
  .feature-card.flipped .fc-inner {
    transform: none;
  }
  .fc-back {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .fc-front {
    transition: opacity 0.2s ease;
  }
  .feature-card.flipped .fc-back {
    opacity: 1;
  }
  .feature-card.flipped .fc-front {
    opacity: 0;
  }
  /* video-feature cards: crossfade instead of rotating */
  .vfeature-grid.stagger .vfeature-card {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .vfeature-card,
  .vfc-inner {
    transition: none;
    transform: none;
  }
  .vfeature-card.flipped .vfc-inner {
    transform: none;
  }
  .vfc-back {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .vfc-front {
    transition: opacity 0.2s ease;
  }
  .vfeature-card.flipped .vfc-back {
    opacity: 1;
  }
  .vfeature-card.flipped .vfc-front {
    opacity: 0;
  }
  .pc-price {
    transition: none;
  }
  .pf-card,
  .acq-card {
    transition: box-shadow 0.2s var(--ease-out);
  }
  .pf-card:hover,
  .pf-card:active,
  .acq-card:hover,
  .acq-card:active,
  .pf-card:hover .visit-arrow,
  .acq-card:hover .acq-visit .visit-arrow {
    transform: none;
  }
}

/* ============================================================================
   NAV DOCK (shared, fixed bottom-center glassy pill) + multi-page pages.
   Added for the multi-page build: nav dock, subpage hero, terms grid,
   example breakdown, payout tables, app-breakdown hero + gallery.
   ========================================================================= */

/* clearance so nothing hides behind the floating dock */
main {
  padding-bottom: 108px;
}
@media (max-width: 480px) {
  main {
    padding-bottom: 96px;
  }
}

/* ---------- dock shell ---------- */
#nav-dock-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* only the pill itself is interactive */
}
.nav-dock {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  /* translucent paper + blur/saturate glass */
  background: rgba(247, 245, 239, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  /* inset white highlight + hairline ring + soft drop shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px var(--hairline),
    0 10px 28px -8px rgba(45, 36, 20, 0.24),
    0 2px 6px rgba(45, 36, 20, 0.1);
  animation: dock-in 0.5s var(--ease-bloom) both;
}
@keyframes dock-in {
  0% { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dock {
    animation: none;
  }
}

/* ---------- dock items (concentric circles inside the pill) ---------- */
.dock-item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s var(--ease-out), transform 0.12s ease,
    background-color 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover {
    color: var(--ink);
    background: rgba(55, 45, 25, 0.05);
  }
}
.dock-item:active {
  transform: scale(0.9);
}
.dock-item[aria-current="page"] {
  color: var(--ink);
}
.dock-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(247, 245, 239, 0.95), 0 0 0 4px #2d241466;
}
.dock-mark {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  display: block;
}
.dock-glyph {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-mute svg {
  width: 20px;
  height: 20px;
  display: block;
}
.dock-mute .ic-off {
  display: none;
}
.dock-mute.muted .ic-on {
  display: none;
}
.dock-mute.muted .ic-off {
  display: block;
}

/* ---------- divider ---------- */
.dock-divider {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--hairline);
}

/* ---------- active-page indicator (sits behind the current item) ---------- */
.dock-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pink) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 30%, transparent);
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-bloom);
}
.dock-indicator.ready {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .dock-indicator {
    transition: none;
  }
}

/* ---------- hover tips (macOS-dock style, above the item) ---------- */
.dock-tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 7px;
  background: #26231f;
  color: #fff;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  box-shadow: 0 5px 16px -5px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out),
    visibility 0.16s;
}
.dock-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #26231f;
}
.dock-tip kbd {
  font: 500 9.5px/1 var(--font-mono);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  border-radius: 4px;
  padding: 2px 4px 3px;
  vertical-align: 0;
}
.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dock-tip {
    transition: opacity 0.12s ease, visibility 0.12s;
    transform: translateX(-50%);
  }
  .dock-item:hover .dock-tip,
  .dock-item:focus-visible .dock-tip {
    transform: translateX(-50%);
  }
}

/* ============================================================================
   SUBPAGES: shared hero, buttons, and section utilities
   ========================================================================= */
.sec {
  margin-bottom: 40px;
}
@media (max-width: 480px) {
  .sec {
    margin-bottom: 34px;
  }
}

/* eyebrow + page hero */
.eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-hero {
  margin: 4px 0 40px;
}
.page-title {
  margin: 0 0 13px;
  max-width: 20ch;
  font: 600 24px/1.24 var(--font-sans);
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.page-lead {
  margin: 0 0 18px;
  max-width: 44ch;
  font: 400 14.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.quiet-line {
  margin: 15px 0 0;
  font: 400 11.5px/1.4 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
@media (max-width: 480px) {
  .page-title {
    font-size: 21px;
  }
  .page-hero {
    margin-bottom: 32px;
  }
}

/* buttons: black primary (intended CTA emphasis) + white-field ghost */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font: 560 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease,
    background-color 0.16s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.22);
}
/* No dark pool under a button on hover: the colour change and the press are
   the feedback, and a heavy shadow only reads as murk on warm paper. */
.btn-primary:hover {
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.22);
}
.btn-ghost {
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
}
.btn-ghost:hover {
  box-shadow: var(--shadow-control-hover);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active {
    transform: none;
  }
}

/* ext-link (mono, arrow) reused across app + creator pages */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.14s ease;
}
.ext-link:hover {
  color: var(--ink);
}
.ext-link .visit-arrow {
  width: 11px;
  height: 11px;
}
.ext-link:hover .visit-arrow {
  transform: translate(1px, -1px);
}

/* accent "promote" pill */
.promote-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--accent);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: background-color 0.16s ease;
}
.promote-link:hover {
  background: color-mix(in srgb, var(--accent) 19%, transparent);
}
.promote-link .visit-arrow {
  width: 11px;
  height: 11px;
}

/* prose paragraph */
.prose {
  margin: 0 0 16px;
  max-width: 48ch;
  font: 400 14px/1.6 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   CREATOR PROGRAM: terms grid, example breakdown, payout tables
   ========================================================================= */

/* terms: small display cards (tint + hairline, not the clickable field) */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.spec-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(55, 45, 25, 0.025);
}
.spec-card.wide {
  grid-column: 1 / -1;
}
.spec-label {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec-value {
  font: 600 14px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec-value code {
  font: 600 12.5px/1.5 var(--font-mono);
  color: var(--ink);
  background: rgba(55, 45, 25, 0.06);
  border-radius: 5px;
  padding: 1px 5px;
}
@media (max-width: 480px) {
  .spec-grid {
    grid-template-columns: 1fr;
  }
}

/* example breakdown: a soft display card with fact rows + emphasised total */
.calc-card {
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: var(--control-bg);
  box-shadow: var(--shadow-card);
}
.calc {
  display: flex;
  flex-direction: column;
}
.calc-caption {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.calc-row:first-of-type {
  border-top: 0;
}
.calc-label {
  font: 400 12.5px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.calc-val {
  font: 500 13px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.calc-row.total {
  margin-top: 4px;
  border-top: 1.5px solid var(--hairline);
}
.calc-row.total .calc-label {
  font-weight: 600;
  color: var(--ink);
}
.calc-row.total .calc-val {
  font: 700 15px/1.2 var(--font-sans);
  color: var(--accent);
}
.calc-note {
  margin: 12px 2px 0;
  font: 400 11.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-wrap: pretty;
}

/* payout tables */
.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hairline);
  -webkit-overflow-scrolling: touch;
}
.table-wrap + .table-wrap {
  margin-top: 10px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--control-bg);
}
.data-table caption {
  caption-side: bottom;
  text-align: left;
  padding: 10px 12px 11px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  white-space: normal;
}
.data-table th,
.data-table td {
  padding: 9px 13px;
  text-align: right;
  white-space: nowrap;
  border-top: 1px solid var(--hairline);
  font: 400 12px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
}
.data-table thead th {
  border-top: 0;
  font: 600 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
  color: var(--ink);
  font-weight: 500;
}
.data-table tbody td {
  color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover td {
    background: rgba(55, 45, 25, 0.03);
  }
}
.table-cap {
  margin: 8px 2px 0;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ============================================================================
   APP BREAKDOWN PAGES: hero, gallery, talking points
   ========================================================================= */
.app-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 4px 0 36px;
}
.app-hero-icon {
  flex: none;
  width: 62px;
  height: 62px;
}
.app-hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(20, 14, 4, 0.2));
}
.app-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.app-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.app-name {
  margin: 0;
  font: 600 22px/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.app-tagline {
  margin: 0;
  max-width: 42ch;
  font: 400 14px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
.app-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 3px;
}
@media (max-width: 480px) {
  .app-hero-icon {
    width: 52px;
    height: 52px;
  }
  .app-name {
    font-size: 20px;
  }
}

/* gallery: framed placeholder boxes (non-clickable → flat hairline + tint) */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%, #fffefb 0%, #f4f1ea 100%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.shot.wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}
.shot-glyph {
  width: 26px;
  height: 26px;
  color: var(--ink-3);
}
.shot-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shot-label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* talking points: pull-quote lines a creator could say on camera */
.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.points li {
  padding: 3px 0 3px 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  font: 400 13.5px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-wrap: pretty;
}

/* placeholder note chip */
.ph-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(55, 45, 25, 0.05);
  font: 500 10px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* subpage top-bar brand: a link home styled like the home wordmark */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.brand-word {
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.14s ease;
}
.brand-link:hover .brand-word {
  color: var(--ink-2);
}

/* ============================================================================
   Ported from cali.so: cross-page transitions, footer live clock, image zoom.
   ========================================================================= */

/* ---------- cross-page transitions (multi-page View Transitions API) ----------
   Disabled 2026-08-20: during a cross-document transition Chrome freezes the
   outgoing page and blocks input until the incoming one is ready to paint. It
   was logging "Transition was skipped" on every navigation here, and a click
   landing in that dead window reads as the click doing nothing. Re-enable by
   restoring the block below once the skips are understood.

@view-transition {
  navigation: auto;
}
*/
::view-transition-old(root) {
  animation: 0.26s var(--ease-out) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 0.34s var(--ease-out) both vt-fade-in;
}
@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}


/* ---------- image zoom (lightbox) ---------- */
[data-zoom],
.app-hero-icon,
.gallery img {
  cursor: zoom-in;
}
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 5vmin;
  background: rgba(20, 16, 8, 0.6);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0;
  cursor: zoom-out;
  transition: opacity 0.24s var(--ease-out);
}
.zoom-overlay.open {
  opacity: 1;
}
.zoom-overlay img {
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.3s var(--ease-bloom), opacity 0.24s var(--ease-out);
}
.zoom-overlay.open img {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .zoom-overlay,
  .zoom-overlay img {
    transition: opacity 0.15s ease;
    transform: none;
  }
}

/* ============================================================================
   Team section: interactive halftone portraits (portrait.js). Frameless dots
   print directly on the paper; dark-ground photos, ink proportional to light.
   ========================================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px; /* the hairline is the background showing through */
  margin: 10px 0 0;
  background: var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.team-member {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--control-bg);
  text-decoration: none;
  color: inherit;
}
.halftone {
  position: relative;
  width: 100%;
  max-width: 156px;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  --halftone-ink: var(--ink);
}
.halftone[data-ready] {
  opacity: 1;
}
.halftone-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* dark-ground studio portraits: a dark tile with warm-white dots, so the lit
   face glows the way the photo was shot (a framed print, not inked content) */
.halftone[data-ground="dark"] {
  --halftone-ink: #f4f1ea;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(
    120% 115% at 50% 30%,
    #272219 0%,
    #171310 60%,
    #100d0a 100%
  );
  box-shadow:
    0 0 0 1px rgba(20, 16, 10, 0.45),
    inset 0 1px 0 rgba(255, 252, 244, 0.05),
    0 12px 28px rgba(20, 16, 10, 0.26);
}
.tm-name {
  font: 600 13px/1.1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tm-role {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
a.team-member .tm-name {
  transition: color 0.2s var(--ease-out);
}
/* hover: the photo leans in, its caption firms up and an arrow arrives. The
   name keeps its colour; tinting it green read as a state change rather than
   as "this goes somewhere". */
.tm-go {
  flex: none;
  display: inline-flex;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.tm-go svg {
  width: 12px;
  height: 12px;
}
.tm-cap {
  transition: background 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.team-member:hover .tm-cap,
  a.team-member:focus-visible .tm-cap {
    background: linear-gradient(180deg, transparent 30%, rgba(12, 10, 7, 0.88));
  }
  a.team-member:hover .tm-go,
  a.team-member:focus-visible .tm-go {
    opacity: 1;
    transform: none;
  }
}
a.team-member:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .tm-go,
  .tm-cap {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .halftone {
    opacity: 1;
    transition: none;
  }
}

/* ============================================================================
   Team member pages (/team/<name>/): a cali-style personal page.
   top bar + person hero + 3 focus boxes + "what's on my mind" wall + editorial
   folder-tree footer. Portrait engine: portrait.js. Clock: nav.js [data-clock].
   ========================================================================= */

/* top-bar brand as a home link (keeps the person's name as the page h1) */
.top-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 17px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.top-brand img {
  width: 20px;
  height: 20px;
}

/* ---------- person hero: bio (left) + halftone portrait (top-right) ---------- */
/* team pages adopt cali's wider column (37.5rem) so the 240px portrait,
   the 3 boxes, and the masonry sit exactly as they do on his site */
main:has(.person-hero) {
  max-width: 600px;
}
.person-hero {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  margin-top: 8px;
}
.person-bio {
  flex: 1 1 auto;
  min-width: 0;
}
.person-name {
  margin: 0;
  font: 600 22px/1.12 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.person-role {
  margin-top: 9px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.person-bio p {
  margin: 14px 0 0;
  font: 400 13px/1.6 var(--font-sans);
  color: var(--ink-2);
}
/* exact cali size: w-60 = 240px desktop, w-[9.35rem] = 149.6px mobile.
   flex:none so the row never shrinks the portrait below its set width */
.person-hero .halftone,
.person-photo {
  flex: none;
  width: 240px;
  max-width: 240px;
}
.person-photo {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: #14120f;
}
@media (max-width: 480px) {
  .person-hero {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 18px;
  }
  .person-hero .halftone {
    width: 149.6px;
    max-width: 149.6px;
    align-self: flex-start;
  }
}

/* ---------- 3 focus boxes (cali nav-cards) ---------- */
.focus-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.focus-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 15px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  box-shadow: 0 0 0 1px var(--hairline);
}
.focus-card .fc-glyph {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.focus-card .fc-title {
  font: 600 13px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.focus-card .fc-desc {
  margin-top: -2px;
  font: 400 11.5px/1.45 var(--font-sans);
  color: var(--ink-3);
}
@media (max-width: 480px) {
  .focus-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- "what's on my mind": cali /photos CSS-columns masonry ---------- */
.mind-wall {
  column-count: 3;
  column-gap: 12px;
  margin-top: 8px;
}
@media (max-width: 460px) {
  .mind-wall {
    column-count: 2;
  }
}
.photo-frame {
  position: relative;
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hairline);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.45s var(--ease-bloom);
}
@media (hover: hover) and (pointer: fine) {
  .photo-frame:hover img {
    transform: scale(1.04);
  }
}
/* placeholder frames (no image yet): varied heights mimic a real wall */
.photo-frame.ph {
  aspect-ratio: var(--ar, 3 / 4);
  display: grid;
  place-items: center;
}
.photo-frame .mt-ph {
  width: 24px;
  height: 24px;
  color: var(--ink-3);
  opacity: 0.5;
}

/* ---------- editorial folder-tree footer (ported from cali) ---------- */
.site-footer {
  width: 100%;
  margin: 72px auto 0;
  color: var(--ink-2);
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 20px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 481px) {
  .site-footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer-label {
  margin: 0 0 11px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-tree li {
  position: relative;
  padding-left: 22px;
  font: 400 11.5px/1.95 var(--font-mono);
}
.footer-tree li::before {
  content: "\251C\2500";
  position: absolute;
  left: 0;
  color: var(--ink-3);
  opacity: 0.65;
}
.footer-tree li:last-child::before {
  content: "\2514\2500";
}
.footer-tree a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer-tree a:hover {
  color: var(--ink);
}
.footer-colophon {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 481px) {
  .footer-colophon {
    grid-column: auto;
    order: -1;
    flex-direction: column;
    gap: 16px;
  }
}
.footer-colophon p {
  margin: 0;
  font: 400 11.5px/1.5 var(--font-mono);
  color: var(--ink-2);
}
.footer-braille {
  color: var(--ink-3);
  letter-spacing: 0.06em;
  font-size: 12.5px;
}
.footer-clock {
  font: 400 11.5px/1 var(--font-mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.footer-geo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}
.footer-geo-globe {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.footer-geo-lines {
  display: flex;
  flex-direction: column;
  font: 400 10.5px/1.35 var(--font-mono);
  letter-spacing: 0.02em;
}

/* focus-box index number (mono, accent) */
.focus-card .fc-index {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* rhythm: separate the "what's on my mind" section from the focus boxes */
.person-hero ~ section:has(.mind-wall) {
  margin-top: 46px;
}

/* a card that carries a status, e.g. the acquired one sitting in the portfolio */
.pf-box-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(55, 45, 25, 0.06);
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- phone stage (mobile apps) ----------
   The desktop apps get screenshots; the phone apps get a device that can hold
   a clip or a live demo, so the section shows the app running rather than
   promising images later. */
.phone-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}
.phone {
  /* iPhone 15/16 base, scaled: 393x852pt at 0.656 -> 258px wide. Radii and
     bezel come off the real hardware (59pt frame, 55pt display, 2.2pt bezel)
     rather than being eyeballed, which is what made the first pass look thick. */
  position: relative;
  width: 258px;
  aspect-ratio: 393 / 852;
  padding: 1.6px;
  border-radius: 39px;
  /* the rail: a brushed band with two specular edges, not a flat black box */
  background: linear-gradient(
    100deg,
    #6f6a63 0%,
    #cfc9bf 6%,
    #8c867d 13%,
    #55504a 28%,
    #4a453f 50%,
    #57524b 72%,
    #99938a 87%,
    #d5cfc5 94%,
    #6b665f 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 22px 44px -16px rgba(30, 24, 12, 0.42),
    0 4px 14px rgba(30, 24, 12, 0.14);
}
/* the black glass under the rail */
.phone::before {
  content: "";
  position: absolute;
  inset: 1.6px;
  border-radius: 37.4px;
  background: #0b0a09;
  z-index: 0;
}
/* the side buttons, drawn as thin slabs on the rail */
.phone::after {
  content: "";
  position: absolute;
  top: 132px;
  left: -1.6px;
  width: 1.6px;
  height: 30px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8b857c, #5b5650);
  box-shadow: 0 44px 0 #6f6a63, 0 88px 0 #6f6a63, 260px -74px 0 #6f6a63;
}
.phone-screen {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 36px; /* the display radius, 55pt at this scale */
  overflow: hidden;
  background: var(--control-bg);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.phone-screen video,
.phone-screen img,
.phone-screen iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* a single soft sweep across the glass, kept faint so a demo stays readable */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 22%,
    transparent 46%
  );
  pointer-events: none;
  z-index: 3;
}
/* the island: 125x36pt on device, same scale as everything else */
.phone-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 23.6px;
  border-radius: 999px;
  background: #0b0a09;
  z-index: 2;
  pointer-events: none;
}
.phone-island::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: radial-gradient(circle at 38% 32%, #2b3242 0%, #10131a 62%, #05060a 100%);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
}
.phone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  text-align: center;
  padding: 0 22px;
}
.phone-empty svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phone-empty b {
  font: 500 12px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.phone-empty span {
  font: 400 10.5px/1.4 var(--font-mono);
  letter-spacing: var(--tracking);
}
.phone-note {
  max-width: 34ch;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}

/* the Oculta clip is 1108x720; the 8/5 frame would crop its menu bar away */
#oculta-demo .vd-frame {
  aspect-ratio: 1108 / 720;
}

/* real screenshots in the gallery grid (the .shot rules are for placeholders) */
.gallery .shot-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #0d0f12;
  box-shadow: 0 0 0 1px var(--hairline);
}
.gallery .shot-img.wide {
  grid-column: 1 / -1;
}


/* the portraits fill their square; the caption is printed on the photo */
.tm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tm-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(12, 10, 7, 0.72));
}
.team-member .tm-name {
  color: #fff;
}
.team-member .tm-role {
  color: rgba(255, 255, 255, 0.66);
}


/* ---------- for creators (below the portfolio) ---------- */
.creators {
  /* the page runs on a 44px section rhythm; hold it on both sides */
  margin: 44px 0;
}
.creators-card {
  position: relative; /* the pointing arrows hang off it */
  padding: 0;
  text-align: center;
}
.creators-kicker {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.creators-title {
  margin-top: 10px;
  font: 600 17px/1.2 var(--font-sans);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.creators-sub {
  margin: 8px auto 0;
  max-width: 44ch;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
/* The portfolio in miniature. It sits as a pile so the section does not repeat
   the grid above, and fans out on hover. Overlap and re-centring are both
   transforms, so nothing reflows. */
.creators-apps {
  --overlap: 19px;
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}
.ca-icon {
  position: relative;
  width: 26px;
  height: 26px;
  z-index: calc(20 - var(--i, 0));
  /* each icon offsets from the centre of the deck, so the pile stays centred
     without the row itself moving (which pushed it off a narrow column) */
  transform: translateX(calc((var(--i, 0) - (var(--n, 8) - 1) / 2) * var(--overlap) * -1))
    rotate(calc((var(--i, 0) - 3.5) * 1.1deg));
  transition: transform 0.42s var(--ease-out);
}
.ca-icon img {
  box-shadow: 0 1px 3px rgba(30, 24, 12, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  /* only the icons open the fan: the row's layout box stays the full spread
     width even while the pile is collapsed, so hovering it would count as
     hovering empty paper */
  .creators-apps {
    pointer-events: none;
  }
  .ca-icon {
    pointer-events: auto;
  }
  /* each icon claims the gap beside it, so a fanned-out row has no dead strips
     that would drop the hover and set the stack flickering */
  .ca-icon::after {
    content: "";
    position: absolute;
    inset: -3px -4px;
  }
  .creators-apps:has(.ca-icon:hover) .ca-icon {
    transform: none;
  }
}
/* no hover to open it with: show the row spread out from the start */
@media (hover: none) {
  .creators-apps {
    flex-wrap: wrap;
  }
  .ca-icon {
    transform: none;
  }
}
.ca-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  -webkit-user-drag: none;
}
/* the reveal fades the pile in; the transform belongs to the fan-out */
.creators-apps.stagger .ca-icon {
  opacity: 0;
  transition: opacity 0.42s var(--ease-out) calc(var(--i, 0) * 55ms),
    transform 0.42s var(--ease-out);
}
.creators-apps.stagger.in .ca-icon {
  opacity: 1;
}
/* Two hands pointing at the one thing to press. They sit either side of the
   button and draw themselves in when the section arrives, so the page is still
   until it is scrolled to. */
.creators-point {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 40px;
  pointer-events: none;
  color: var(--ink-3);
}
.cp-arrow {
  position: absolute;
  bottom: 0;
  width: 70px;
  height: 40px;
  overflow: visible;
}
.cp-l {
  left: calc(50% - 190px);
}
.cp-r {
  right: calc(50% - 190px);
  transform: scaleX(-1);
}
.cp-draw {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.creators-card.in .cp-draw {
  animation: cp-draw 0.62s var(--ease-out) forwards;
}
.creators-card.in .cp-draw:nth-child(2) {
  animation-delay: 0.42s;
}
.creators-card.in .cp-r .cp-draw {
  animation-delay: 0.16s;
}
.creators-card.in .cp-r .cp-draw:nth-child(2) {
  animation-delay: 0.58s;
}
@keyframes cp-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-draw {
    stroke-dashoffset: 0;
    animation: none;
  }
}
@media (max-width: 560px) {
  .creators-point {
    display: none; /* no room beside the button on a phone */
  }
}

.creators-btn {
  margin-top: 20px;
}
.creators-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .creators-btn:hover .creators-arrow {
    transform: translateX(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creators-apps,
  .ca-icon {
    transition: none;
  }
  .creators-apps.stagger .ca-icon {
    opacity: 1;
    transition: none;
  }
  .creators-arrow {
    transition: none;
  }
}

/* The creators CTA: no shadow lift on hover. A light wipe rises from the
   bottom edge instead, which is a transform rather than a growing shadow, so
   the button stays put on the page instead of appearing to float off it. */
.creators-btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.18);
}
.creators-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.14);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s var(--ease-out);
}
.creators-btn-label,
.creators-arrow {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .creators-btn:hover {
    box-shadow: 0 1px 3px rgba(28, 26, 23, 0.18); /* unchanged: the wipe is the cue */
  }
  .creators-btn:hover::before {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creators-btn::before {
    transition: none;
  }
}

/* ---------- the apps grid on /for-creators ---------- */
.fc-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.fc-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border-radius: var(--radius-md);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  text-decoration: none;
  text-align: center;
  transition: box-shadow 0.16s var(--ease-out);
}
.fc-app:hover {
  box-shadow: var(--shadow-control-hover);
}
.fc-app:active {
  transform: scale(0.98);
}
.fc-app-icon {
  width: 34px;
  height: 34px;
}
.fc-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  -webkit-user-drag: none;
}
.fc-app-name {
  font: 560 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.fc-app-domain {
  font: 400 9.5px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
@media (max-width: 560px) {
  .fc-apps {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================================
   HERO (option 2b): the headline flush left, the brand mark to its right, and
   the second clause stood upright word by word beside the stem. The mark is
   clickable: flower.js owns the state machine, this file owns the idle life.
   ========================================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 168px;
  align-items: end;
  gap: 14px;
  margin-top: 4px;
  padding-bottom: 30px; /* the column supplies the side padding */
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
.hero-title {
  margin: 0; /* the h2 and p carry UA margins the site's reset does not clear */
  max-width: 16ch;
  font: 600 30px/1.18 var(--font-sans);
  letter-spacing: -0.028em;
  color: var(--ink);
}


/* ---------- the mark ---------- */
.hero-mark-col {
  position: relative;
  width: 100%;
}
/* brings the stem's base nearer the first blade of grass */
.hero-mark-shift {
  transform: translateX(-24px);
}
.hero-mark {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible; /* the fallen piece leaves the box */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 10px;
}
.hero-stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}
/* 1.55 at the bloom's x3.4 scale reads as the same line weight as the stem */
.hero-petals {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.55;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hero-core {
  fill: var(--pink);
}
.hero-sway {
  transform-origin: 206px 380px;
  animation: hero-sway 5s ease-in-out infinite alternate; /* icon.svg's rhythm */
}
@keyframes hero-sway {
  from {
    transform: rotate(-1.5deg);
  }
  to {
    transform: rotate(1.6deg);
  }
}

/* ---------- the bee: it never reacts to the execution ---------- */
.hero-bee {
  pointer-events: none;
}
.hero-bee-body {
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
}
.hero-bee-wings path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.hero-bee-fly {
  animation: hero-beefly 11s linear infinite;
}
.hero-bee-wings {
  transform-origin: 0 -6px;
  animation: hero-beewing 0.13s ease-in-out infinite alternate;
}
@keyframes hero-beefly {
  0% { transform: translate(66px, 30px) rotate(-14deg); }
  14% { transform: translate(84px, -16px) rotate(-32deg); }
  29% { transform: translate(44px, -62px) rotate(-8deg); }
  44% { transform: translate(-34px, -56px) rotate(16deg); }
  58% { transform: translate(-72px, -4px) rotate(26deg); }
  73% { transform: translate(-28px, 44px) rotate(6deg); }
  88% { transform: translate(34px, 50px) rotate(-10deg); }
  100% { transform: translate(66px, 30px) rotate(-14deg); }
}
@keyframes hero-beewing {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.45); }
}

/* ---------- the annotation beside the stem ----------
   One slot, two states: the invitation before the first cut, the line the
   flower earns after it grows back. The hand is the only one on the site, and
   it is on the one thing the visitor is meant to touch. */
.hero-note {
  position: absolute;
  top: -4px;
  right: -14px;
  margin: 0;
  width: 104px;
  color: var(--ink-3);
  pointer-events: none;
}
/* nothing is said while the flower is on the ground, and it goes with the
   snap rather than fading out after it */
.hero-note.is-away {
  opacity: 0;
  transition-duration: 0.12s;
}
.hero-note-text {
  font: 600 15px/1.15 "Caveat", var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: opacity 0.24s var(--ease-out);
}
.hero-note.is-swapping .hero-note-text {
  opacity: 0;
}
.hero-note.is-typing .hero-note-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.86em;
  margin-left: 1px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: hero-caret 0.75s steps(1) infinite;
}
@keyframes hero-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
/* the tail starts under the left edge of "click" and the head runs down-left,
   at the stem: the negative margin is what carries it out past the words */
.hero-note-arrow {
  display: block;
  width: 48px;
  height: 36px;
  margin: 3px auto 0 -40px;
  overflow: visible;
  opacity: 0.45; /* an aside, not an instruction */
  transition: opacity 0.4s var(--ease-out);
}
/* once the flower has been cut, the invitation is spent: the line stays and
   the arrow goes, because there is nothing left to point out */
.hero-note.is-earned .hero-note-arrow {
  opacity: 0;
}
/* the strokes draw themselves on, once, the way a pen would */
.hero-note-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-note-draw 0.7s var(--ease-out) 0.45s forwards;
}
.hero-note-head {
  animation-delay: 1s;
  animation-duration: 0.3s;
}
@keyframes hero-note-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* The flower's own line, inside a bubble that is drawn rather than styled: one
   wobbly outline with the tail built into it, stretched behind the words. The
   stroke does not scale with the box, so the line stays an even 1.4px. */
.hero-note-bubble {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0; /* both are positioned, so DOM order would put this over the words */
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ink);
}
.hero-note.is-bubble {
  width: 138px;
  /* the tail hangs off the bottom of the drawn outline, so the extra bottom
     padding is what puts the words in the middle of the bubble's body */
  padding: 9px 13px 18px 13px;
}
.hero-note.is-bubble .hero-note-bubble {
  display: block;
}
.hero-note.is-bubble .hero-note-text {
  position: relative;
  z-index: 1; /* the words sit on the outline, not under it */
  color: var(--ink);
  text-align: center;
}
/* the arrow has already faded by the time the bubble opens: take it out of the
   flow too, or it holds 36px of empty space inside the bubble */
.hero-note.is-bubble .hero-note-arrow {
  display: none;
}
.hero-note.is-bubble .hero-note-text {
  color: var(--ink);
}
/* it pops as it is spoken, and rides up with the bloom as the stem grows */
.hero-note {
  transform: translateY(var(--bloom-lift, 0px));
  transition: opacity 0.28s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero-note.is-bubble {
  animation: hero-say 0.34s var(--ease-bloom) both;
}
@keyframes hero-say {
  from {
    transform: translateY(var(--bloom-lift, 0px)) scale(0.94);
  }
  to {
    transform: translateY(var(--bloom-lift, 0px)) scale(1);
  }
}

/* ---------- the grass: the clause, stood upright word by word ---------- */
.hero-grass {
  margin: 0;
  position: absolute;
  right: -11px;
  bottom: 6%;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  font: 400 11px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
/* the 11px box is what lands the last word flush with the Get in touch button */
.hero-grass span {
  display: inline-block;
  width: 11px;
  white-space: nowrap;
  transform-origin: 0% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-note.is-bubble {
    animation: none;
  }
  .hero-sway,
  .hero-bee-fly,
  .hero-bee-wings {
    animation: none;
  }
  .hero-note-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .hero-note-text {
    transition: none;
  }
}

/* a stamp on the tile, pressed slightly askew the way a real one lands */
.tm-stamp {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  padding: 3px 7px 4px;
  border: 1.5px solid rgba(255, 253, 248, 0.82);
  border-radius: 5px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 1.5px;
  color: rgba(255, 253, 248, 0.92);
  transform: rotate(-9deg);
  animation: tm-stamped 0.34s var(--ease-bloom) 0.5s both;
}
@keyframes tm-stamped {
  from {
    opacity: 0;
    transform: rotate(-9deg) scale(1.5);
  }
  to {
    opacity: 1;
    transform: rotate(-9deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-stamp {
    animation: none;
  }
}

/* A highlighter pass behind the question: one stroke, flat ends, held at one
   width the way a marker is, tilted a degree and overshooting the words the way
   a hand does. It sweeps in with the section, then sits still. */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -6px;
  bottom: 0.04em;
  height: 0.86em;
  /* a marker yellow, warm enough to sit on this paper rather than glow on it */
  background: rgba(248, 212, 84, 0.28);
  mix-blend-mode: multiply;
  transform: rotate(-1.4deg) scaleX(1);
  transform-origin: left center;
}
.creators-title.stagger .hl::before {
  transform: rotate(-1.4deg) scaleX(0);
}
.creators-title.stagger.in .hl::before {
  transform: rotate(-1.4deg) scaleX(1);
  transition: transform 0.42s var(--ease-out) 0.15s;
}

/* ---------- picking the apps (for-creators) ---------- */
.fc-lead {
  margin: 6px 0 0;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.fc-apps {
  margin-top: 12px;
}
/* Two across: the cards carry a line of description, and three columns in a
   440px page left too little room to say it in. */
#ap-apps {
  grid-template-columns: repeat(2, 1fr);
}
/* the cards are controls now, not links */
.fc-app {
  position: relative;
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.fc-app:active {
  transform: scale(0.98);
}
.fc-app.is-picked {
  box-shadow: 0 0 0 1.5px var(--ink), var(--shadow-control);
}
.fc-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.16s var(--ease-out), transform 0.2s var(--ease-bloom);
}
.fc-tick svg {
  width: 10px;
  height: 10px;
}
.fc-app.is-picked .fc-tick {
  opacity: 1;
  transform: none;
}
.fc-picked {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.fc-all {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fc-all:hover {
  color: var(--ink);
}
.fc-picked-note {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .fc-app,
  .fc-tick {
    transition: none;
  }
}

/* the picker and the payment choice now live inside their steps */
.step-body .fc-apps {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.step-body .fc-app {
  padding: 11px 6px 9px;
  gap: 5px;
}
.step-body .fc-app-icon {
  width: 28px;
  height: 28px;
}
.step-body .fc-app-name {
  font-size: 11px;
}
.step-body .fc-app-domain {
  font-size: 9px;
}
.step-body .fc-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}
@media (max-width: 560px) {
  .step-body .fc-apps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* the application button sits inside the step that asks for it */
.step-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
}