/* bitbibit website - shared styles
   Ported to match the bitbibit Design System (02-design-system/_imported/bitbibit Design System.dc.html) EXACTLY.
   Design-system rules mapped onto the website's own class names.
   Flat colour only, no gradients. Warm, print-grounded. No em-dashes in copy. */

:root {
  /* Colour (brand - unchanged, matches DS) */
  --loam: #1F1B16;
  --paper: #F6F1E7;
  --sprout: #3FA34D;
  --sprout-deep: #2F7C3A;
  --jacaranda: #6B4E9E;
  --poinciana: #D6442B;
  --clay: #C98A5E;
  --river-sage: #7C8A7A;
  --hi-vis: #F2A900;
  --slate: #2E3A3F;

  /* Theme roles (default = paper surface) - aligned to DS #ds-root */
  --bg: var(--paper);
  --ink: var(--loam);
  --pixel: var(--loam);          /* the "bit" pixel inverts with the surface */
  --muted: #6E7A6C;              /* DS light muted (sage-grey) */
  --line: rgba(31,27,22,.14);    /* DS translucent ink line */
  --surface: #FBF7EE;            /* DS --surface */
  --surface-2: #F0E9DA;          /* DS --surface-2 */
  --card: var(--surface);        /* back-compat alias for existing var(--card) call sites */

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale - DS type scale */
  --h1: clamp(34px, 4.4vw, 56px);   /* DS .h1 */
  --h2: clamp(26px, 3vw, 38px);     /* DS .h2 */
  --h3: 22px;                       /* DS .h3 */
  --body: 16px;                     /* DS body */
  --small: 12px;                    /* DS kicker / mono base */
  --lh: 1.6;

  /* Space - DS 8px base scale (1:1 with the design system) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  /* Legacy aliases kept so any inline var(--s12) keeps resolving */
  --s12: 96px;

  /* Radius + motion - DS values */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 280ms;
  --maxw: 1200px;

  /* Grain noise (DS --grain, verbatim) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Surfaces - keep background + color declarations; align dark roles to DS .theme-loam */
.on-loam  { --bg: var(--loam);  --ink: var(--paper); --pixel: var(--paper); --muted: #9AA697; --line: rgba(246,241,231,.16); --surface: #2A251E; --surface-2: #332C23; --card: var(--surface); background: var(--bg); color: var(--ink); }
.on-paper { --bg: var(--paper); --ink: var(--loam);  --pixel: var(--loam); --muted: #6E7A6C; --line: rgba(31,27,22,.14); --surface: #FBF7EE; --surface-2: #F0E9DA; --card: var(--surface); background: var(--bg); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Keyboard focus. Buttons had a ring; links did not, so tabbing through the nav and
   footer was invisible. One rule, matched to the button ring so focus reads the same
   everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sprout);
}

/* Headings - DS lowercase display register with per-level tracking + line-height */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 var(--s3); text-transform: lowercase; }
h1 { font-size: var(--h1); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--h2); letter-spacing: -0.025em; line-height: 1.05; }
h3 { font-size: var(--h3); letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 var(--s3); max-width: 60ch; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink); max-width: 60ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--small); letter-spacing: 0.04em; }
.kicker { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); }

/* Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
/* DS .sec is 128px 0. That is right at desktop and far too much on a phone, where it
   pushed roughly a third of a screen of empty space between every block. Fluid so the
   design-system value is preserved at the width it was designed for, and the rhythm
   tightens on small screens instead of stranding the content. */
section { padding-block: clamp(var(--s6), 9vw, var(--s8)); }
.section-sep { border-top: 1px solid var(--line); }

/* Buttons - DS .btn (rounded rect, full transitions, per-variant lift) */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600;
  font-size: 15px; line-height: 1; padding: 14px 22px; border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform 280ms var(--ease), background 280ms var(--ease), border-color 280ms var(--ease), color 280ms var(--ease); }
.btn .sprout { --sz: 18px; --seed: currentColor; --grow: currentColor; }
.btn-primary { background: var(--sprout); color: #fff; border-color: var(--sprout); }
.btn-primary .sprout { --seed: rgba(255,255,255,.55); --grow: #fff; }
.btn-primary:hover { background: var(--sprout-deep); border-color: var(--sprout-deep); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline .sprout { --seed: var(--sprout); --grow: var(--sprout); }
.btn-outline:hover { border-color: var(--sprout); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--sprout); }
.btn-pop { background: var(--poinciana); color: #fff; border-color: var(--poinciana); } /* use once per view, max */
.btn-pop:hover { filter: brightness(.93); transform: translateY(-2px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sprout); }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }
.btn-lg { font-size: 18px; padding: 18px 28px; }

/* Mark - the OG CSS sprout (two leaves + stem + pixel), grabbed verbatim from the bitbibit Design System export.
   --seed = the "bit" pixel (uses --ink so it inverts with the surface); --grow = leaves and stem. */
.sprout { position: relative; display: inline-block; flex: none; width: var(--sz, 40px); height: var(--sz, 40px); vertical-align: middle; --seed: var(--ink); --grow: var(--sprout); }
.sprout .pixel { position: absolute; left: 50%; bottom: 6%; width: 30%; height: 30%; transform: translateX(-50%); background: var(--seed); border-radius: 2px; }
.sprout .stem { position: absolute; left: 50%; bottom: 30%; width: 8%; height: 30%; transform: translateX(-50%); transform-origin: center bottom; background: var(--grow); border-radius: 3px; }
.sprout .leaf { position: absolute; bottom: 40%; width: 32%; height: 37%; background: var(--grow); }
.sprout .leaf.l { right: 50%; transform-origin: bottom right; border-radius: 0 100% 0 100%; transform: rotate(14deg); }
.sprout .leaf.r { left: 50%; transform-origin: bottom left; border-radius: 100% 0 100% 0; transform: rotate(-14deg); }
.lockup { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.045em; color: var(--ink); }
.lockup .word { line-height: 1; }
.lockup > .sprout { --sz: 1.45em; }
.i-sprout { position: relative; display: inline-block; }
.i-sprout .sprout { position: absolute; left: 50%; bottom: 0.56em; width: 0.46em; height: 0.46em; transform: translateX(-50%); }

/* Nav - sticky wrapper (site behaviour); inner row + links aligned to DS spacing/type */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; gap: var(--s4); }
.nav-links { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--sprout); }
.nav-cta { display: flex; align-items: center; gap: var(--s2); }
.nav-toggle { display: none; background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 0.8rem; cursor: pointer; }

/* Hero - DS .display size on the hero heading */
.hero { padding-block: clamp(var(--s6), 11vw, 160px); }
.hero h1 { max-width: 14ch; font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.035em; line-height: 0.98; }
.hero .lead { max-width: 46ch; }
.cue { font-family: var(--font-mono); font-weight: 500; font-size: var(--small); color: var(--clay); letter-spacing: 0.02em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* Grids + cards */
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.card h3 { margin-bottom: var(--s1); }
.card .price { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; color: var(--sprout-deep); }
/* DS in-card mark chip */
.card .cr-mark, .card .crmark { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s1); }
.card .cr-mark .sprout, .card .crmark .sprout { --sz: 26px; }
.tick { list-style: none; margin: 0; padding: 0; }
.tick li { position: relative; padding-left: 1.5em; margin-bottom: 0.4em; }
.tick li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--sprout); border-radius: 2px; }

/* Documentary / case card (DS .card-doc) */
.card-doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.card-doc .meta { padding: var(--s3); display: flex; flex-direction: column; gap: 6px; }

/* "Is this you" two faces */
.faces { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }

/* Trust band - site's 4-col stat grid (distinct from DS .trust row card; see .trust-row below) */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.trust .item .n { font-family: var(--font-mono); font-weight: 500; font-size: var(--small); color: var(--sprout); }

/* Trust row card (DS .trust) - sprout + bold + muted note */
.trust-row { display: flex; gap: 11px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.trust-row .sprout { --sz: 22px; flex: 0 0 auto; margin-top: 2px; }
.trust-row b { font-family: var(--font-display); font-weight: 600; }
.trust-row p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Badges / tags / chips (DS) */
.badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--river-sage); }
.badge--audit { background: var(--slate); color: #D9E2E0; border-color: transparent; }
.badge--audit .dot { background: var(--hi-vis); border-radius: 50%; }
.badge--seed { color: var(--clay); border-color: var(--clay); }
.badge--seed .dot { background: var(--clay); }
.tag-fixed { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 7px 13px; border-radius: var(--r-sm); background: var(--sprout); color: #fff; }
.tag-fixed.pop { background: var(--poinciana); }
.chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); padding: 5px 9px; border-radius: var(--r-sm); }

/* System flow (DS .flow) */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow .node { flex: 1 1 0; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.flow .node .step { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; color: var(--sprout); }
.flow .node .ttl { font-family: var(--font-display); font-weight: 600; font-size: 18px; text-transform: lowercase; letter-spacing: -.01em; }
.flow .node p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.flow .arr { display: flex; align-items: center; justify-content: center; padding: 0 6px; color: var(--river-sage); flex: 0 0 auto; }

/* Tools strip (neutral greyscale "works-with" signal, never branded colour) */
.tools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; }
.tools .cat { display: flex; flex-direction: column; gap: 6px; }
.tools .cat .label { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tools .cat .names { display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); opacity: 0.85; }
.tools-disclaimer { font-family: var(--font-mono); font-weight: 500; font-size: var(--small); color: var(--muted); margin-top: var(--s3); }

/* SEED / SPROUT / GROWN ladder with germination (DS .ladder + .tier mapped to .rung) */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.rung { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); position: relative; transform-origin: bottom; }
.rung.r-seed { align-self: stretch; }
.rung.r-grown { border-color: var(--sprout); box-shadow: 0 0 0 1px var(--sprout); }
/* growbed = .rung .glyph */
.rung .glyph { display: flex; align-items: flex-end; justify-content: center; flex: none; height: var(--bh, 72px); margin-bottom: 6px; }
.rung.r-seed .glyph { --bh: 56px; }
.rung.r-sprout .glyph { --bh: 92px; }
.rung.r-grown .glyph { --bh: 128px; }
.rung .glyph .sprout { --seed: var(--clay); }
/* mono label = .rung .tier */
.rung .tier { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .22em; color: var(--muted); }
.rung.r-sprout .tier, .rung.r-grown .tier { color: var(--sprout); }
/* DS large price when used inside a ladder rung */
.rung .price { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.rung .price small { font-size: 15px; color: var(--muted); font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
/* feature bullets - DS sprout square, clay on seed */
.rung .tick li::before, .rung .feat li::before { background: var(--sprout); }
.rung.r-seed .tick li::before, .rung.r-seed .feat li::before { background: var(--clay); }
/* DS .feat list treatment for ladder rungs */
.rung .feat { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 9px; }
.rung .feat li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.4; }
.rung .feat li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; margin-top: 6px; flex: 0 0 auto; }

/* Germination motion: pixel static, only the sprout grows, seamless ease-in-out loop */
.germinate { transform-origin: 50% 100%; animation: germinate var(--germ-dur, 3.4s) var(--ease) infinite; }
@keyframes germinate {
  0%   { transform: scaleY(0.02); opacity: 0; }
  42%  { transform: scaleY(1);    opacity: 1; }
  68%  { transform: scaleY(1);    opacity: 1; }
  100% { transform: scaleY(0.02); opacity: 0; }
}

/* Ladder germination (DS tier-rise + sprout unfurl), plays on .ladder.is-grown */
.ladder .rung { animation-fill-mode: both; }
.ladder.is-grown .rung.r-seed { animation: tier-rise 380ms var(--ease) both; }
.ladder.is-grown .rung.r-sprout { animation: tier-rise 380ms var(--ease) 130ms both; }
.ladder.is-grown .rung.r-grown { animation: tier-rise 420ms var(--ease) 270ms both; }
@keyframes tier-rise { 0% { opacity: 0; transform: translateY(22px) scaleY(.88); } 100% { opacity: 1; transform: none; } }
.ladder.is-grown .rung .stem { animation: stem-rise 300ms var(--ease) both; }
.ladder.is-grown .rung .pixel { animation: seed-pop 280ms var(--ease) both; }
.ladder.is-grown .rung .leaf.l { animation: leaf-unfurl-l 360ms var(--ease) both; }
.ladder.is-grown .rung .leaf.r { animation: leaf-unfurl-r 360ms var(--ease) both; }
.ladder.is-grown .rung.r-seed .stem, .ladder.is-grown .rung.r-seed .leaf { animation-delay: 120ms; }
.ladder.is-grown .rung.r-sprout .stem, .ladder.is-grown .rung.r-sprout .leaf { animation-delay: 250ms; }
.ladder.is-grown .rung.r-grown .stem, .ladder.is-grown .rung.r-grown .leaf { animation-delay: 390ms; }
@keyframes stem-rise { 0% { transform: translateX(-50%) scaleY(0); } 100% { transform: translateX(-50%) scaleY(1); } }
@keyframes seed-pop { 0% { transform: translateX(-50%) scale(0); } 60% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes leaf-unfurl-l { 0% { transform: rotate(14deg) scale(0); } 100% { transform: rotate(14deg) scale(1); } }
@keyframes leaf-unfurl-r { 0% { transform: rotate(-14deg) scale(0); } 100% { transform: rotate(-14deg) scale(1); } }

/* Reveal (grow upward) - visible by default, animation is enhancement (DS .reveal) */
.reveal { transform-origin: bottom; }
.reveal.in { animation: growup 640ms var(--ease) both; }
@keyframes growup { 0% { opacity: 0; transform: translateY(26px) scaleY(.97); } 100% { opacity: 1; transform: none; } }

/* Case study ------------------------------------------------------------------
   The page opens on the outcome, not a logo. One number, set at display scale, is
   the whole thesis: this reader wants to know what changed, in a figure they can
   picture in their own week. */
.cs-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 11vw, 132px);
  line-height: 0.92; letter-spacing: -0.045em; text-transform: lowercase; margin: 0 0 var(--s2); max-width: 18ch; }
.cs-number-sub { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 0; }
.cs-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line); }
.cs-meta div { display: flex; flex-direction: column; gap: 4px; }
.cs-meta dt, .cs-meta .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }
.cs-meta dd, .cs-meta .val { margin: 0; font-weight: 600; }

/* "What we said no to". The one section a competitor will not copy, so it is the one
   section that gets its own treatment. Dashed, like the free-way-in card, because it is
   the same gesture: the honest thing offered against our own commercial interest. */
.cs-no { border: 1.5px dashed var(--line); border-left: 3px solid var(--clay); border-radius: var(--r-lg);
  padding: var(--s4); background: transparent; }
.cs-no .kicker { color: var(--clay); }

.cs-quote { border: 0; margin: 0; padding: 0; }
.cs-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.28; letter-spacing: -0.02em; max-width: 24ch; }
.cs-quote figcaption { margin-top: var(--s3); font-family: var(--font-mono); font-size: var(--small);
  letter-spacing: 0.06em; color: var(--muted); }

.cs-cost { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.cs-cost th, .cs-cost td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cs-cost th { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }
.cs-cost td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) {
  .cs-cost td:last-child { white-space: normal; }
  .cs-meta { gap: var(--s3) var(--s4); }
}

/* Unmistakable while the page is still a template. Delete this rule and the
   data-template attribute together once real content is in. */
[data-template] { position: relative; }
[data-template]::before { content: "TEMPLATE, not real content. Do not publish until every placeholder is replaced.";
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-align: center;
  padding: 10px var(--s3); background: var(--poinciana); color: #fff; }
mark.ph { background: rgba(242,169,0,.28); color: inherit; padding: 0 4px; border-radius: 3px;
  box-shadow: inset 0 -1px 0 var(--hi-vis); }

.loader { display: inline-flex; align-items: center; gap: 0.8em; font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.14em; font-size: var(--small); color: var(--muted); }
.loader .glyph { width: 28px; height: 32px; position: relative; }
.loader .pixel { position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; transform: translateX(-50%);
  background: var(--pixel); border-radius: 2px; } /* static */

/* Form (DS .field / .input / .textarea; consolidated from get-started.html inline styles) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea,
.input, .textarea, select.input {
  font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px 15px;
  transition: border-color 220ms var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus,
.input:focus, .textarea:focus, select.input:focus { outline: none; border-color: var(--sprout); }
.field textarea, .textarea { min-height: 108px; resize: vertical; }

/* Footer */
.footer { padding-block: var(--s6); }            /* DS .footer = 64px 0 */
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s4); }
.footer h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.footer a { color: var(--ink); display: block; font-size: 14.5px; margin-bottom: 9px; padding: 0; opacity: .85; }
.footer a:hover { opacity: 1; color: var(--sprout); }
.footer .foot-mark { margin-bottom: var(--s2); }

/* Image placeholder (drop a real photo here) */
.ph { background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md);
  display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--muted); font-family: var(--font-mono); font-weight: 500; font-size: var(--small); }

/* Subtle paper grain - DS .grain (::before, multiply/overlay blend, raises children) */
.grain { position: relative; }
.grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--grain); background-size: 180px 180px; mix-blend-mode: multiply; opacity: .10; }
.on-loam.grain::before { mix-blend-mode: overlay; opacity: .16; }
.grain > * { position: relative; z-index: 1; }

/* FAQ (connections page, AEO/LLM friendly) */
.faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; text-transform: lowercase; cursor: pointer; }
.faq p { margin-top: var(--s2); }

/* Responsive */
@media (max-width: 860px) {
  .g3, .g4, .ladder, .trust, .faces { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links { display: none; }
  .nav.open .nav-links { display: flex; flex-direction: column; gap: var(--s3); position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s4); box-shadow: 0 10px 30px rgba(31,27,22,0.10); }
  section { padding-block: var(--s6); }            /* DS mobile section = 64px 0 */
  .wrap { padding-inline: var(--s3); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .germinate { transform: scaleY(1); opacity: 1; }
}

/* Quick check ("Is this you?" homepage checklist).
   Real checkboxes, so it still reads and ticks with JavaScript off. */
.qc-list { display: flex; flex-direction: column; gap: 2px; }
.qc-list li { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 7px 9px; border-radius: var(--r-sm);
  transition: background 200ms var(--ease); }
.qc-list li::before { content: none; }          /* the checkbox replaces the sprout square */
.qc-list input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--sprout); cursor: pointer;
}
.qc-list label { cursor: pointer; font-size: 15px; line-height: 1.45; }
.qc-list li:hover { background: var(--surface-2); }
.qc-list li:has(input:checked) { background: var(--surface-2); }
.qc-list li:has(input:checked) label { color: var(--muted); }
.qc-list input[type="checkbox"]:focus-visible { outline: 2px solid var(--sprout); outline-offset: 3px; }

.qc-result { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.qc-meter { display: flex; align-items: center; gap: var(--s2); width: 100%; max-width: 460px; }
.qc-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.qc-fill { display: block; height: 100%; width: 0; background: var(--sprout); border-radius: 999px;
  transition: width 320ms var(--ease); }
.qc-tally { color: var(--muted); flex: 0 0 auto; }
.qc-say { min-height: 3.2em; }
.qc-score { color: var(--sprout-deep); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--s1); }
.qc-message { color: var(--muted); max-width: 62ch; margin: 0; }
.qc-cta { margin-top: var(--s1); }
.qc-note { color: var(--muted); margin: 0; }

@media (max-width: 860px) {
  .qc-meter { max-width: none; }
  .qc-list label { font-size: 15.5px; }
  .qc-list li { padding: 9px 8px; }        /* roomier tap target on a phone */
}

@media (prefers-reduced-motion: reduce) {
  .qc-fill, .qc-list li { transition: none; }
}