/* AcornAI brand tokens (Complete Brand Guidelines, 2026) */
:root {
  --ink: #0E251B;          /* Green Ink */
  --forest: #12492E;       /* Forest Green */
  --mint: #CCF664;         /* Mint Green: emphasis and primary actions only */
  --paper: #F7F3EA;        /* Fashion White */
  --white: #FFFFFF;
  --graphite: #727272;
  --smoke: #D6D6D6;
  --cloud: #F2F2F2;
  --tangerine: #FF6B2C;    /* secondary accent: flags and exceptions */
  --tangerine-light: #FFE5D6;
  --title-size: clamp(2rem, 3.35vw, 3rem);   /* every page and section title: the home hero size */
  --tangerine-deep: #943508;

  /* text */
  --text: var(--ink);
  --text-muted: #4E5A53;
  --on-dark: var(--paper);
  --on-dark-muted: rgba(247, 243, 234, .7);
  --on-dark-faint: rgba(247, 243, 234, .45);
  --line-dark: rgba(247, 243, 234, .12);
  --surface-dark: rgba(247, 243, 234, .04);
  --line: #E4DFD3;

  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for hovers, presses, pop-ups */

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 8px;     /* containers */
  --radius-sm: 6px;  /* controls */
  --rail: #8C9A90;    /* layout rails, reads on both backgrounds */
  --window: #0A1C14;  /* every dark product panel: hero card, demo, trace, palette */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.02em; /* brand type hierarchy: paragraphs -2% */
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: var(--title-size); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
/* site.js puts the last two words of each block of text in one of these. As an inline-block the pair
   moves to the next line together, and still wraps inside itself when it is wider than the line. */
keep-words { display: inline-block; text-decoration: inherit; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .nav :focus-visible { outline-color: var(--mint); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--mint); color: var(--ink); padding: .5rem 1rem; border-radius: 999px; }

.dark { background: var(--ink); color: var(--on-dark); }
.paper { background: var(--paper); }
.mint { color: var(--mint); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.4rem;
  border: 0; border-radius: 999px;
  font: 500 1rem/1 var(--font);
  text-decoration: none; cursor: pointer;
  transition: transform var(--acorn-dur-press) var(--acorn-ease-settle), background-color var(--acorn-dur-settle) var(--acorn-ease-settle);
}
.btn:active { transform: scale(.97); }
.btn-mint { background: var(--mint); color: var(--ink); }
.btn-mint:hover { background: #D8FA85; }
.btn-ghost {
  min-height: 36px; padding: 0 .9rem;
  background: transparent; color: var(--on-dark);
  border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  font: 500 .875rem/1 var(--font); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--on-dark-faint); }

/* Intro: full-screen logo drop */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity 400ms var(--acorn-ease-settle), visibility 0s linear 400ms;
  /* Fail-safe: never block the page for more than 2.5 s, even if scripts fail */
  animation: intro-failsafe 0s linear 2.5s forwards;
}
.intro-logo { width: min(640px, 78vw); --acorn-mark: var(--mint); --acorn-word: var(--paper); }
.intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.no-intro .intro { display: none; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.nav-inner { display: flex; align-items: center; gap: 2rem; height: 68px; }
.nav-logo { display: block; color: var(--paper); }
.logo-drop { display: block; width: 128px; --acorn-mark: var(--mint); --acorn-word: var(--paper); }
/* ES theme: the Acorn lockup stays out of view until theme.js points the image at the ES mark.
   The mark is the acorn plus ES CONSULTING, so the nav slot stays a fixed height and grows wider. */
html[data-theme="es"] img[src*="lockup-primary.svg"],
html[data-theme="es"] img[src*="lockup-secondary.svg"],
html[data-theme="es"] acorn-logo-drop { visibility: hidden; }
html[data-theme="es"] .nav-logo img { width: auto; height: 32px; }
html[data-theme="es"] .footer-logo img { width: 200px; height: auto; }
html[data-theme="es"] .intro-logo { width: min(720px, 86vw); height: auto; }
.nav-links { display: flex; gap: 2rem; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--on-dark-muted); font-size: .95rem; padding: .5rem 0; transition: color var(--acorn-dur-settle); }
.nav-links a:hover { color: var(--on-dark); }
.nav-cta { min-height: 40px; font-size: .95rem; }
.nav-sheet-cta { display: none; }
.nav-toggle { display: none; }

/* Hero */
.hero { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.hero-roots {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--acorn-ease-slide);
}
.hero-roots.is-on { opacity: .1; }
.closing-roots, .section-vines { transition: none; }
.closing-roots.is-on { opacity: .08; }
/* Background vines behind every section: Mint on dark, Forest Green on light */
.section-vines.is-on { opacity: .08; }
.section:not(.dark) > .section-vines.is-on { opacity: .06; }
#approach > .section-vines.is-on { opacity: .04; }
.partners-label, .partners-viewport { position: relative; z-index: 1; }
.section > .wrap { position: relative; z-index: 1; }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--title-size); max-width: 11ch; }
.hero-lede { margin-top: 1.5rem; font-size: 1.2rem; color: var(--on-dark-muted); max-width: 46ch; }
.hero-form { display: flex; gap: .5rem; margin-top: 2.25rem; max-width: 460px; padding: 6px; background: #172D23; border: 1px solid var(--line-dark); border-radius: 999px; }
.hero-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 1rem;
  background: transparent; border: 0; color: var(--on-dark);
  font: 1rem var(--font);
}
.hero-form input::placeholder { color: var(--on-dark-faint); }
.hero-form input:focus { outline: none; }
.hero-form:focus-within { border-color: var(--mint); }
.hero-note { margin-top: 1rem; font-size: .95rem; color: var(--on-dark-faint); }
.hero-note a { color: var(--on-dark-muted); }

/* Hero run card */
.run-card {
  background: var(--window); /* solid so the background roots pass behind it */
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.run-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); }
.run-title { font-weight: 500; }
.run-steps { counter-reset: none; padding: .5rem 0; }
.run-steps li {
  display: grid; grid-template-columns: 14px 64px 1fr; gap: .75rem; align-items: start;
  padding: .85rem 0; position: relative;
  opacity: .35; transition: opacity var(--acorn-dur-slide) var(--acorn-ease-settle);
}
.run-steps li + li::before {
  content: ""; position: absolute; left: 6px; top: -14px; height: 26px; width: 1px; background: var(--line-dark);
}
.run-steps li.is-on { opacity: 1; }
.run-dot { width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--on-dark-faint); transition: background-color var(--acorn-dur-settle), border-color var(--acorn-dur-settle); }
.run-steps li.is-on .run-dot { background: var(--mint); border-color: var(--mint); }
.run-stage { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--on-dark-faint); padding-top: 2px; }
.run-text { font-size: .98rem; }
.run-foot { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line-dark); font-size: .875rem; color: var(--on-dark-faint); }
.run-foot a { color: var(--mint); text-decoration: none; }
.run-foot a:hover { text-decoration: underline; }

/* Status pill */
.status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 500;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(247, 243, 234, .08); color: var(--on-dark-muted);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.is-running { color: var(--mint); }
.status.is-running::before { animation: pulse 1.2s var(--acorn-ease-slide) infinite; }
.status.is-done { background: var(--mint); color: var(--ink); }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status.is-running::before { animation: none; } }

/* Partners: a slim Mint bar, label on the left, logos scrolling on the right */
.partners {
  display: flex; align-items: center; overflow: hidden;
  padding: 22px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.partners.dark { background: var(--mint); color: var(--ink); }
.partners > canvas { display: none; } /* no background vines on the Mint bar */
.partners .partners-label { flex: none; margin: 0 32px 0 0; white-space: nowrap; }
.partners-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners-viewport:hover .partners-track { animation-play-state: paused; }
.partners-track { display: flex; align-items: center; width: max-content; animation: partners-scroll 20s linear infinite; }
.partner { flex-shrink: 0; margin-right: 32px; opacity: .85; transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
.partner:hover { opacity: 1; }
.partner img { display: block; width: auto; object-fit: contain; }
.partner-xs { height: 11px; }
.partner-sm { height: 14px; }
.partner-md { height: 16px; }
.partner-lg { height: 18px; }
/* Green Ink logos on Mint */
.partner img { filter: brightness(0) saturate(100%) invert(11%) sepia(20%) saturate(1200%) hue-rotate(100deg); }
@media (min-width: 768px) {
  .partners-track { height: 36px; }
  .partner { margin-right: 56px; }
  .partner-xs { height: 16px; }
  .partner-sm { height: 20px; }
  .partner-md { height: 23px; }
  .partner-lg { height: 25px; }
}
/* Phones: label sits above the logos */
@media (max-width: 600px) {
  .partners { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 20px; }
  .partners .partners-label { margin: 0; padding: 0; border: 0; text-align: center; }
}
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

/* Sections */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { max-width: 16ch; }
.section-head--top { align-items: start; }
.kicker { font-size: .95rem; color: var(--text-muted); margin-bottom: 1rem; }
.kicker::before { content: "//"; margin-right: .5em; color: var(--forest); font-weight: 500; }
.dark .kicker::before { color: var(--mint); }
.dark .kicker { color: var(--on-dark-faint); }
/* The partners bar is .dark but sits on Mint, so it keeps the light-section colors */
.partners .kicker { color: var(--text-muted); }
.partners .kicker::before { color: var(--forest); }
.section-intro { color: var(--text-muted); font-size: 1.1rem; max-width: 52ch; }
.dark .section-intro { color: var(--on-dark-muted); }

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* Why AI stalls: accordion on the left, copy on the right */
.stall-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.stall-copy { position: sticky; top: 120px; order: -1; }
.stall-copy h2 { margin-bottom: 1.25rem; }
.stall-list { display: grid; gap: .75rem; }
.stall-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 300ms var(--acorn-ease-settle), box-shadow 300ms var(--acorn-ease-settle); }
.stall-item { position: relative; overflow: hidden; }
.stall-item.is-open { border-color: var(--ink); }
.stall-item h3 { margin: 0; }
.stall-trigger {
  transition: scale 140ms var(--ease-out);
  width: 100%; display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.25rem; background: none; border: 0; cursor: pointer;
  font: 500 1.2rem/1.25 var(--font); letter-spacing: -0.02em; color: var(--ink); text-align: left;
}
.stall-title { flex: 1; }
.stall-flag { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 500; color: var(--tangerine-deep); background: var(--tangerine-light); padding: .25rem .6rem; border-radius: 999px; letter-spacing: 0; white-space: nowrap; }
.stall-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tangerine); }
.stall-chev { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid #D9D2C2; position: relative; transition: transform 300ms var(--acorn-ease-settle), background-color 300ms; }
.stall-chev::before { content: ""; position: absolute; left: 9.5px; top: 8px; width: 7px; height: 7px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.stall-item.is-open .stall-chev { transform: rotate(180deg); background: var(--ink); border-color: var(--ink); }
.stall-item.is-open .stall-chev::before { border-color: var(--mint); }
.stall-trigger:hover .stall-chev { border-color: var(--graphite); }
.stall-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms cubic-bezier(.32, .72, 0, 1); }
.stall-item.is-open .stall-panel { grid-template-rows: 1fr; }
.stall-inner { overflow: hidden; }
/* Content fades and settles in as the panel opens, and fades out fast as it closes */
.stall-body { opacity: 0; transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms ease; }
.stall-item.is-open .stall-body { opacity: 1; transform: none; transition: opacity 260ms ease 60ms, transform 340ms cubic-bezier(.32, .72, 0, 1) 40ms; }
.stall-body { padding: 0 1.25rem 1.35rem; display: grid; gap: 1.1rem; }
.stall-body > p { color: var(--text-muted); max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .stall-panel, .stall-chev, .stall-body { transition: none; transform: none; } }

/* Readouts: a small dark screen per failure mode */
.readout {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius);
  padding: .9rem 1rem .85rem; min-height: 150px;
  display: flex; flex-direction: column; gap: .9rem;
  font-variant-numeric: tabular-nums; font-size: .72rem;
  background-image: radial-gradient(rgba(247, 243, 234, .06) 1px, transparent 1px);
  background-size: 12px 12px;
}
.readout-head { display: flex; justify-content: space-between; align-items: center; color: var(--on-dark-faint); }
.readout-flag { color: var(--tangerine); display: inline-flex; align-items: center; gap: .35rem; opacity: 0; transition: opacity var(--acorn-dur-settle) var(--acorn-ease-settle); }
.readout-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.readout-foot { margin-top: auto; display: flex; justify-content: space-between; color: var(--on-dark-faint); }
.is-shown .readout-flag { opacity: 1; transition-delay: 1.1s; }

/* 1: pipeline that stalls at build */
.pipe { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 22px; }
.pipe::before, .pipe::after { content: ""; position: absolute; top: 6px; left: 12.5%; height: 2px; border-radius: 2px; }
.pipe::before { right: 12.5%; background: rgba(247, 243, 234, .12); }
.pipe::after { width: 50%; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--acorn-ease-settle) 150ms; }
.is-shown .pipe::after { transform: scaleX(1); }
.pipe li { position: relative; text-align: center; color: var(--on-dark-muted); font-size: .68rem; }
.pipe li::before {
  content: ""; position: absolute; left: 50%; top: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(247, 243, 234, .25); z-index: 1;
  transition: background-color var(--acorn-dur-settle), border-color var(--acorn-dur-settle);
}
.is-shown .pipe li:nth-child(1)::before { background: var(--mint); border-color: var(--mint); transition-delay: .2s; }
.is-shown .pipe li:nth-child(2)::before { background: var(--mint); border-color: var(--mint); transition-delay: .55s; }
.is-shown .pipe .pipe-stall::before { border-color: var(--tangerine); background: var(--tangerine); transition-delay: 1s; animation: pulse 1.2s var(--acorn-ease-slide) 1.1s infinite; }
.pipe .pipe-stall { color: var(--on-dark); }
.pipe .pipe-dim { color: var(--on-dark-faint); }
.pipe .pipe-dim::before { border-style: dashed; }

/* 2: checks grid, mostly failing */
.checks-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.checks-grid li {
  height: 22px; border-radius: 4px; background: rgba(247, 243, 234, .07);
  transition: background-color var(--acorn-dur-settle) var(--acorn-ease-settle);
}
.is-shown .checks-grid li.ok { background: var(--mint); }
.is-shown .checks-grid li.bad { background: rgba(255, 107, 44, .75); }
.checks-grid li:nth-child(1) { transition-delay: .10s; } .checks-grid li:nth-child(2) { transition-delay: .17s; }
.checks-grid li:nth-child(3) { transition-delay: .24s; } .checks-grid li:nth-child(4) { transition-delay: .31s; }
.checks-grid li:nth-child(5) { transition-delay: .38s; } .checks-grid li:nth-child(6) { transition-delay: .45s; }
.checks-grid li:nth-child(7) { transition-delay: .52s; } .checks-grid li:nth-child(8) { transition-delay: .59s; }
.checks-grid li:nth-child(9) { transition-delay: .66s; } .checks-grid li:nth-child(10) { transition-delay: .73s; }
.checks-grid li:nth-child(11) { transition-delay: .80s; } .checks-grid li:nth-child(12) { transition-delay: .87s; }

/* 3: health line that drops after the vendor leaves */
.health { width: 100%; height: 70px; display: block; overflow: visible; }
.health-grid { stroke: rgba(247, 243, 234, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.health-mark { stroke: rgba(247, 243, 234, .35); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.health-line { fill: none; stroke: var(--tangerine); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--acorn-ease-slide) .2s; }
.health-area { fill: rgba(255, 107, 44, .12); opacity: 0; transition: opacity 600ms var(--acorn-ease-settle) 1.2s; }
.is-shown .health-line { stroke-dashoffset: 0; }
.is-shown .health-area { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .readout *, .readout *::before, .readout *::after, .readout-flag { transition: none !important; animation: none !important; }
}

/* Demo */
.demo-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab {
  flex: none; min-height: 44px; padding: 0 1.1rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line-dark);
  background: transparent; color: var(--on-dark-muted);
  font: 500 .95rem var(--font); cursor: pointer;
  transition: background-color var(--acorn-dur-settle), color var(--acorn-dur-settle), border-color var(--acorn-dur-settle), scale 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .demo-tab:hover { color: var(--on-dark); border-color: var(--on-dark-faint); } }
.demo-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.demo-window {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--window);
  overflow: hidden;
}
.demo-window:focus-visible { outline-offset: 4px; }
.demo-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-dark); background: var(--surface-dark);
}
.demo-bar-title { display: flex; flex-direction: column; gap: .15rem; }
.demo-name { font-weight: 500; font-size: 1.05rem; }
.demo-trigger { font-size: .875rem; color: var(--on-dark-faint); }
.demo-bar-actions { display: flex; align-items: center; gap: .75rem; }

.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage { padding: 1.25rem; border-right: 1px solid var(--line-dark); min-height: 360px; position: relative; }
.stage:last-child { border-right: 0; }
.stage:not(:last-child)::after {
  content: ""; position: absolute; right: -7px; top: 1.45rem; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line-dark);
  transition: background-color var(--acorn-dur-settle), border-color var(--acorn-dur-settle);
}
.stage.is-done:not(:last-child)::after { background: var(--mint); border-color: var(--mint); }
.stage-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--on-dark-faint); margin-bottom: 1rem; transition: color var(--acorn-dur-settle); }
.stage.is-active .stage-label, .stage.is-done .stage-label { color: var(--on-dark); }
.stage-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Revealed items inside the pipeline */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--acorn-dur-slide) var(--acorn-ease-settle), transform var(--acorn-dur-slide) var(--acorn-ease-settle); }
.reveal.is-in { opacity: 1; transform: none; }

.card-in { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: .9rem; font-size: .9rem; }
.card-in + .card-in { margin-top: .6rem; }
.card-kind { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--on-dark-faint); margin-bottom: .4rem; }
.card-title { font-weight: 500; margin-bottom: .35rem; line-height: 1.3; }
.card-meta { color: var(--on-dark-muted); line-height: 1.45; }
.card-quote { margin-top: .5rem; padding-left: .7rem; border-left: 2px solid var(--line-dark); color: var(--on-dark-muted); font-style: italic; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; padding: .25rem .55rem; border-radius: 6px; background: rgba(247, 243, 234, .08); font-variant-numeric: tabular-nums; font-size: .75rem; }

.agent-steps li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; padding: .55rem 0; font-size: .9rem; }
.agent-steps li + li { border-top: 1px dashed var(--line-dark); }
.step-mark { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--on-dark-faint); position: relative; }
.agent-steps li.is-working .step-mark { border-color: var(--mint); border-right-color: transparent; animation: spin .8s linear infinite; }
.agent-steps li.is-ok .step-mark { background: var(--mint); border-color: var(--mint); }
.agent-steps li.is-ok .step-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agent-steps li.is-flag .step-mark { background: var(--tangerine); border-color: var(--tangerine); }
.agent-steps li.is-flag .step-mark::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agent-steps li.is-working .step-mark { animation: none; } }
.step-title { font-weight: 500; line-height: 1.3; }
.step-detail { color: var(--on-dark-muted); line-height: 1.4; margin-top: .15rem; }
.step-tool { display: inline-block; margin-top: .3rem; font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--on-dark-faint); }

.out-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .4rem; }
.out-table td { padding: .4rem 0; border-top: 1px solid var(--line-dark); vertical-align: top; }
.out-table td:last-child { text-align: right; padding-left: .5rem; color: var(--on-dark-muted); }
.out-table tr.is-flag td:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--tangerine); vertical-align: 1px; }
.out-note { margin-top: .6rem; font-size: .82rem; color: var(--on-dark-faint); }

.result-head { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; color: var(--mint); margin-bottom: .75rem; line-height: 1.25; }
.result-list li { position: relative; padding: .45rem 0 .45rem 1.1rem; font-size: .9rem; color: var(--on-dark-muted); }
.result-list li::before { content: ""; position: absolute; left: 0; top: .9rem; width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-faint); }
.result-list li.is-flag::before { background: var(--tangerine); }
.result-time { margin-top: .75rem; font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--on-dark-faint); }

.demo-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--line-dark); font-size: .85rem; color: var(--on-dark-faint); }

.more-work { margin-top: clamp(3rem, 6vw, 4.5rem); }
.more-work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.more-work h3 { font-size: 1.1rem; color: var(--on-dark-muted); font-weight: 500; }
.more-work-head a { color: var(--mint); font-size: .95rem; text-decoration: none; }
.more-work-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.work-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.work-card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: rgba(247, 243, 234, .025); border: 1px solid var(--line-dark); border-radius: var(--radius);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover { transform: translateY(-4px); border-color: rgba(204, 246, 100, .45); background: rgba(204, 246, 100, .04); }
}
.work-icon {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: .6rem;
  border-radius: var(--radius); border: 1px solid rgba(204, 246, 100, .35); color: var(--mint);
  transition: background-color 300ms var(--acorn-ease-settle), color 300ms var(--acorn-ease-settle);
}
.work-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .work-card:hover .work-icon { background: var(--mint); color: var(--ink); } }
.work-card strong { font-weight: 500; font-size: 1.05rem; }
.work-desc { color: var(--on-dark-muted); font-size: .95rem; }
.work-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.work-tags span { padding: .2rem .5rem; border-radius: 4px; background: rgba(247, 243, 234, .06); font-size: .75rem; color: var(--on-dark-muted); }
@media (prefers-reduced-motion: reduce) { .work-card:hover { transform: none; } }

/* Approach: a root grows from the label, then branches into each step */
.roots { position: relative; }
.roots-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.roots-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.roots-head { position: relative; z-index: 1; max-width: 500px; }
.roots-head h2 { margin-bottom: 1.25rem; }
.roots-origin { display: inline-block; }

.root-trail { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 400ms var(--acorn-ease-settle); }
.root-trail.is-on { opacity: 1; }
.root-tip { fill: var(--paper); stroke: #6B8A3C; stroke-width: 2; opacity: 0; transition: opacity var(--acorn-dur-settle), fill var(--acorn-dur-settle); }
.is-grown .root-tip { opacity: 1; }
.root-tip.is-active { fill: var(--mint); }
.root-pulse { fill: var(--mint); stroke: var(--ink); stroke-width: 2; }

.steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 130px; }
.steps li {
  background: var(--white); border-radius: var(--radius); padding: 1.75rem 1.5rem 2rem;
  border: 1px solid #E6E0D2;
  transition: background-color var(--acorn-dur-settle) var(--acorn-ease-settle), color var(--acorn-dur-settle) var(--acorn-ease-settle), border-color var(--acorn-dur-settle);
}
.step-num { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--graphite); margin-bottom: 2rem; transition: color var(--acorn-dur-settle); }
.steps h3 { margin-bottom: .75rem; }
.steps li > p:last-child { color: var(--text-muted); font-size: .98rem; transition: color var(--acorn-dur-settle); }
.steps li.is-active { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.steps li.is-active .step-num { color: var(--mint); }
.steps li.is-active > p:last-child { color: var(--on-dark-muted); }

/* Below desktop: one taproot down the left, branching into each step */
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr; gap: 1rem; margin-top: 48px; padding-left: 56px; }
  .step-num { margin-bottom: 1rem; }
}

/* Platform: AgentFlow panel */

/* AgentFlow: copy on the left, a live trace on the right */
.af-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.af-kicker { display: flex; align-items: center; gap: .5rem; }
.af-copy h2 { margin-bottom: 1.25rem; }
.af-lede { color: var(--on-dark-muted); font-size: 1.08rem; max-width: 50ch; }
.af-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; margin: 2rem 0 1.5rem; }
.af-checks li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.af-checks li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mint);
}
.af-checks li::after {
  content: ""; position: absolute; left: 5.5px; top: .38rem; width: 4px; height: 7px;
  border: solid var(--ink); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg);
}
.af-modes { font-size: .95rem; color: var(--on-dark-faint); }
.af-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.btn-line { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--on-dark-faint); }

.trace {
  background: var(--window); border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden;
}
.trace-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line-dark); background: var(--surface-dark); }
.trace-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.trace-req { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-id { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--on-dark-faint); }
.trace-cols, .trace-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 54px; gap: .9rem; align-items: center; }
.trace-cols { padding: .55rem 1.15rem; font-size: .72rem; color: var(--on-dark-faint); border-bottom: 1px solid var(--line-dark); }
.trace-cols span:last-child, .trace-time { text-align: right; }
.trace-rows { min-height: 432px; padding: .35rem 0; }
.trace-row {
  padding: .5rem 1.15rem; font-size: .88rem; position: relative;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--acorn-dur-settle) var(--acorn-ease-settle), transform var(--acorn-dur-settle) var(--acorn-ease-settle), background-color var(--acorn-dur-settle);
}
.trace-row.is-in { opacity: 1; transform: none; }
.trace-row.is-live { background: rgba(204, 246, 100, .05); }
.trace-name { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; padding-left: calc(var(--lvl) * 18px); }
.trace-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tree connector for child spans */
.trace-row[data-lvl="1"] .trace-name::before, .trace-row[data-lvl="2"] .trace-name::before {
  content: ""; position: absolute; left: calc((var(--lvl) - 1) * 18px + 5px); top: -.85rem; width: 9px; height: 1.35rem;
  border-left: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); border-bottom-left-radius: 4px;
}
.trace-row.kind-agent .trace-name { font-weight: 500; }
.trace-row.kind-tool .trace-name { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--on-dark-muted); }
.trace-row.kind-gate .trace-name { color: var(--on-dark); }
.trace-sub { font-family: var(--font); font-weight: 400; font-size: .75rem; color: var(--on-dark-faint); }
.trace-row.kind-gate.is-waiting .trace-sub { color: var(--tangerine); }
.trace-row.kind-gate.is-approved .trace-sub { color: var(--mint); }

.trace-track { position: relative; height: 8px; border-radius: 4px; background: rgba(247, 243, 234, .05); }
.trace-fill { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w, 0%); border-radius: 4px; min-width: 2px; transform: scaleX(var(--p, 0)); transform-origin: left; }
.kind-agent .trace-fill { background: var(--mint); }
.kind-tool .trace-fill { background: rgba(247, 243, 234, .4); }
.kind-gate .trace-fill { background: var(--tangerine); }
.kind-gate.is-approved .trace-fill { background: var(--mint); }
.kind-gate.is-waiting .trace-fill { animation: pulse 1s var(--acorn-ease-slide) infinite; }
.trace-time { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--on-dark-muted); }

.trace-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.15rem; border-top: 1px solid var(--line-dark); font-size: .82rem; color: var(--on-dark-faint); }
.trace-foot [data-trace-summary] { font-variant-numeric: tabular-nums; color: var(--on-dark-muted); }

@media (max-width: 960px) {
  .af-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .af-checks { grid-template-columns: 1fr; }
  .trace-cols, .trace-row { grid-template-columns: minmax(0, 1fr) 64px 44px; gap: .6rem; }
  .trace-rows { min-height: 0; }
}

/* Plans: spec sheets with a duration and pod readout */
.plan { background: var(--white); border: 1px solid #E6E0D2; border-radius: var(--radius); padding: .75rem .75rem 1.25rem; display: flex; flex-direction: column; }
.plan-featured { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.plan { position: relative; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), opacity 220ms var(--ease-out), filter 220ms var(--ease-out); }
/* The hovered card lifts and grows; the others step back so it really stands out */
.plan:focus-within { box-shadow: 0 0 0 2px var(--mint); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-14px) scale(1.08); box-shadow: 0 0 0 2px var(--mint); z-index: 2; }
  .plans:hover .plan:not(:hover):not(:focus-within) { transform: scale(.96); opacity: .6; filter: saturate(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .plan:hover, .plan:focus-within, .plans:hover .plan:not(:hover) { transform: none; }
}
.plan-featured .readout { background-color: #0A1C14; border: 1px solid var(--line-dark); }
.plan-readout { min-height: 0; gap: .7rem; }
.plan-dur { color: var(--mint); }

.dur { padding-bottom: 1.1rem; }
.dur-track { position: relative; height: 10px; border-radius: 5px; background: rgba(247, 243, 234, .07); }
.dur-solid, .dur-range { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.dur-solid { left: 0; width: var(--a); background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--acorn-ease-settle) 150ms; }
.dur-range {
  left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 0 5px 5px 0; transform: scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(-45deg, rgba(204, 246, 100, .55) 0 3px, rgba(204, 246, 100, .15) 3px 6px);
  transition: transform 700ms var(--acorn-ease-settle) 900ms;
}
.is-shown .dur-solid, .is-shown .dur-range { transform: scaleX(1); }
.dur-open::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: rgba(204, 246, 100, .6); opacity: 0; transition: opacity 300ms 1.5s; }
.is-shown .dur-open::after { opacity: 1; }
.dur-ticks { position: relative; height: 0; }
.dur-ticks span { position: absolute; top: 7px; transform: translateX(-50%); font-size: .62rem; color: var(--on-dark-faint); white-space: nowrap; }
.dur-ticks span:first-child { transform: none; }
.dur-ticks span:last-child { transform: translateX(-100%); }

.pod { display: flex; gap: 5px; }
.pod li {
  flex: 1; text-align: center; padding: .45rem 0; border-radius: 5px;
  font-size: .65rem; color: var(--on-dark-faint);
  border: 1px solid rgba(247, 243, 234, .1);
  transition: background-color var(--acorn-dur-settle), color var(--acorn-dur-settle), border-color var(--acorn-dur-settle);
}
.is-shown .pod li { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.is-shown .pod li.opt { background: transparent; color: var(--mint); border: 1px dashed rgba(204, 246, 100, .6); }
.pod li:nth-child(1) { transition-delay: 1.2s; } .pod li:nth-child(2) { transition-delay: 1.3s; }
.pod li:nth-child(3) { transition-delay: 1.4s; } .pod li:nth-child(4) { transition-delay: 1.5s; }

.plan-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1rem 0; }
.plan-title { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.plan h3 { font-size: 1.5rem; }
.plan-tag { flex: none; background: var(--mint); color: var(--ink); font-size: .75rem; font-weight: 500; padding: .2rem .6rem; border-radius: 999px; }
.plan-desc { color: var(--text-muted); }
.plan-featured .plan-desc { color: var(--on-dark-muted); }
.plan-list { margin: 1.4rem 0; display: grid; gap: .55rem; }
.plan-list li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: .25rem; width: 14px; height: 14px; border-radius: 3px; background: var(--forest); }
.plan-list li::after { content: ""; position: absolute; left: 5px; top: .4rem; width: 3px; height: 6px; border: solid var(--mint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.plan-featured .plan-list li::before { background: var(--mint); }
.plan-featured .plan-list li::after { border-color: var(--ink); }
.plan-spec { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; }
.plan-featured .plan-spec { border-color: var(--line-dark); }
.plan-spec div { display: grid; grid-template-columns: 56px 1fr; gap: .75rem; font-size: .88rem; }
.plan-spec dt { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--graphite); padding-top: .15rem; }
.plan-featured .plan-spec dt { color: var(--on-dark-faint); }
.plan-spec dd { margin: 0; }
.plan-spec div:first-child dd { font-weight: 500; }
.plan-featured .plan-spec dd { color: var(--on-dark-muted); }
.plan-featured .plan-spec div:first-child dd { color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  .plan-readout *, .plan-readout *::before, .plan-readout *::after { transition: none !important; }
}

/* Comparison: a scorecard on Green Ink, with the Acorn column outlined in Mint */
.table-scroll { position: relative; overflow-x: auto; padding: 6px 2px 2px; } /* relative keeps the hidden labels inside the scroll box */
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare th, .compare td { text-align: left; padding: 1.15rem 1.1rem; border-bottom: 1px solid var(--line-dark); vertical-align: middle; }
.compare thead th { font-weight: 500; color: var(--on-dark-faint); font-size: .9rem; }
.compare tbody th { font-weight: 500; width: 22%; color: var(--on-dark); }
.compare td { color: var(--on-dark-muted); width: 26%; }
.compare tbody tr { transition: background-color var(--acorn-dur-settle); }
.compare tbody tr:hover td:not(.us), .compare tbody tr:hover th { background: rgba(247, 243, 234, .03); }

/* The table sits in a window panel. Competitors stay quiet; the Acorn column is
   Forest Green with a Mint outline, and a band of light scans down it once. */
.table-scroll { background: var(--window); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: .75rem .75rem 0; }
.compare .us {
  --edge: rgba(204, 246, 100, .45);
  background-color: var(--forest); color: var(--paper); font-weight: 500;
  border-bottom-color: rgba(247, 243, 234, .1);
  box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge);
  background-image: linear-gradient(to bottom, transparent 0%, rgba(204, 246, 100, .28) 50%, transparent 100%);
  background-size: 100% 300%; background-repeat: no-repeat; background-position: 0 -150%;
}
.is-shown .compare .us, .compare.is-shown .us { animation: scan 700ms var(--acorn-ease-slide) forwards; }
.compare thead .us { animation-delay: 0ms !important; }
.compare tbody tr:nth-child(1) .us { animation-delay: 120ms; }
.compare tbody tr:nth-child(2) .us { animation-delay: 240ms; }
.compare tbody tr:nth-child(3) .us { animation-delay: 360ms; }
.compare tbody tr:nth-child(4) .us { animation-delay: 480ms; }
.compare tbody tr:nth-child(5) .us { animation-delay: 600ms; }
@keyframes scan { from { background-position: 0 -150%; } to { background-position: 0 250%; } }
.compare thead .us {
  color: var(--mint); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: inset 0 3px 0 var(--mint), inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge);
}
.compare thead .us img { vertical-align: -2px; margin-right: .5rem; }
.compare tbody tr:last-child .us {
  border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0;
  box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge), inset 0 -1px 0 var(--edge);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover .us { background-color: #175A39; }
.compare .us .mk-good { background: var(--mint); }
.compare .us .tt-track { background: rgba(247, 243, 234, .12); }
.compare .us .tt-fast { background: var(--mint); }
/* Checks in the Acorn column land as the scan passes them */
.compare tbody tr:nth-child(1) .us .mk { transition-delay: .3s; } .compare tbody tr:nth-child(2) .us .mk { transition-delay: .42s; }
.compare tbody tr:nth-child(3) .us .mk { transition-delay: .54s; } .compare tbody tr:nth-child(4) .us .mk { transition-delay: .66s; }
@media (prefers-reduced-motion: reduce) { .compare .us { animation: none !important; background-image: none; } }

/* Status marks */
.mk { display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: .65rem; vertical-align: -4px; position: relative; flex: none;
  transform: scale(.6); opacity: 0; transition: transform 300ms var(--acorn-ease-spring), opacity 200ms var(--ease-out); }
.is-shown .mk, .compare-legend .mk { transform: none; opacity: 1; }
.mk-good { background: var(--mint); }
.mk-good::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mk-mid { background: rgba(255, 179, 143, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 179, 143, .6); }
.mk-mid::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: #FFB38F; border-radius: 1px; }
.mk-bad { background: rgba(255, 107, 44, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 107, 44, .75); }
.mk-bad::before, .mk-bad::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; border-radius: 1px; background: var(--tangerine); transform: rotate(45deg); }
.mk-bad::after { transform: rotate(-45deg); }
.compare tbody tr:nth-child(1) .mk { transition-delay: .05s; } .compare tbody tr:nth-child(2) .mk { transition-delay: .15s; }
.compare tbody tr:nth-child(3) .mk { transition-delay: .25s; } .compare tbody tr:nth-child(4) .mk { transition-delay: .35s; }

/* Time to production: bars on a shared 12 month axis */
.tt-label { display: block; margin-bottom: .55rem; }
.tt-track { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(247, 243, 234, .08); }
.us .tt-track { background: rgba(247, 243, 234, .08); }
.tt-none { background: repeating-linear-gradient(90deg, rgba(247, 243, 234, .2) 0 6px, transparent 6px 11px); }
.tt-fill { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--acorn-ease-settle) .4s; }
.is-shown .tt-fill { transform: scaleX(1); }
.tt-slow { background: repeating-linear-gradient(-45deg, rgba(247, 243, 234, .45) 0 4px, rgba(247, 243, 234, .15) 4px 8px); }
.tt-fast { background: var(--mint); }
.tt-axis { display: block; margin-top: .4rem; font-size: .75rem; font-weight: 400; color: var(--on-dark-faint); }

.compare-legend { display: flex; gap: 1.5rem; margin-top: 1.25rem; font-size: .85rem; color: var(--on-dark-muted); }
.compare-legend > span { display: inline-flex; align-items: center; }
.compare-legend .mk { width: 14px; height: 14px; margin-right: .45rem; vertical-align: 0; }
.compare-legend .mk-good::after { left: 4.5px; top: 2px; width: 3px; height: 7px; border-width: 0 1.5px 1.5px 0; }
.compare-legend .mk-mid::after { top: 6px; left: 4px; right: 4px; }
.compare-legend .mk-bad::before, .compare-legend .mk-bad::after { top: 6px; left: 3px; right: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mk, .tt-fill { transition: none !important; }
}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem 4rem; align-items: start; }
.faq-copy h2 { margin-bottom: 1.25rem; }
.js-ask .faq { display: none; }

/* Command palette FAQ */
.js-palette .faq { display: none; }
.palette { background: var(--window); color: var(--on-dark); border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.palette-search { display: flex; align-items: center; gap: .75rem; padding: 0 1rem; border-bottom: 1px solid var(--line-dark); }
.palette-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--on-dark-faint); stroke-width: 1.8; stroke-linecap: round; }
.palette-search input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: var(--on-dark);
  font: 400 1.05rem var(--font); letter-spacing: -0.01em;
}
.palette-search input::placeholder { color: var(--on-dark-faint); }
.palette-search input:focus { outline: none; }
.palette-search:focus-within { box-shadow: inset 0 -1px 0 var(--mint); }

.palette-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); min-height: 330px; }
.palette-list { border-right: 1px solid var(--line-dark); padding: .5rem; max-height: 380px; overflow-y: auto; }
.palette-group { padding: .7rem .6rem .35rem; font-size: .72rem; font-weight: 500; color: var(--on-dark-faint); letter-spacing: .02em; }
.palette-item {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .7rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .95rem; color: var(--on-dark-muted);
  transition: scale 120ms var(--ease-out);
}
.palette-item.is-active { background: rgba(247, 243, 234, .07); color: var(--on-dark); }
.palette-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--mint); }
.palette-item kbd { visibility: hidden; }
.palette-item.is-active kbd { visibility: visible; }
.palette-item mark { background: none; color: var(--mint); }
.palette-empty { padding: 1rem .7rem; font-size: .92rem; color: var(--on-dark-faint); }
.palette-empty a { color: var(--mint); }

.palette-preview { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.palette-topic { font-size: .78rem; color: var(--on-dark-faint); }
.palette-topic::before { content: "//"; margin-right: .45em; color: var(--mint); }
.palette-preview h3 { font-size: 1.35rem; }
.palette-preview p { color: var(--on-dark-muted); line-height: 1.6; }
.palette-related { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-dark); display: grid; gap: .35rem; }
.palette-related span { font-size: .75rem; color: var(--on-dark-faint); }
.palette-related button { justify-self: start; background: none; border: 0; padding: .15rem 0; color: var(--on-dark); font: 400 .92rem var(--font); cursor: pointer; text-align: left; }
.palette-related button::after { content: " →"; color: var(--mint); }
.palette-related button:hover { color: var(--mint); }

.palette-foot { display: flex; gap: 1.25rem; padding: .7rem 1rem; border-top: 1px solid var(--line-dark); font-size: .78rem; color: var(--on-dark-faint); }
.palette-foot span { display: inline-flex; align-items: center; gap: .3rem; }

@media (max-width: 720px) {
  .palette-body { grid-template-columns: 1fr; }
  .palette-list { border-right: 0; border-bottom: 1px solid var(--line-dark); max-height: 240px; }
  .palette-foot { display: none; }
}

.faq details { border-top: 1px solid var(--smoke); }
.faq details:last-child { border-bottom: 1px solid var(--smoke); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--graphite); transition: transform var(--acorn-dur-settle) var(--acorn-ease-settle); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; color: var(--text-muted); max-width: 62ch; }

/* Closing */
.closing { overflow: hidden; }
.closing-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: start; }
.closing h2 { font-size: var(--title-size); max-width: 10em; margin-bottom: 1.25rem; }
.demo-form {
  position: relative; z-index: 1;
  background: var(--window); color: var(--on-dark);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 0 0 1.5rem; display: grid; gap: 1.1rem;
}
.form-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--line-dark);
  font-weight: 500; font-size: .95rem;
}
.form-bar-note { font-weight: 400; font-size: .8rem; color: var(--on-dark-faint); }
.demo-form .field, .demo-form .form-error, .demo-form .btn { margin: 0 1.5rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 500; color: var(--on-dark-muted); }
.optional { font-weight: 400; color: var(--on-dark-faint); }
.field input, .field textarea {
  width: 100%; min-height: 46px; padding: .7rem .9rem;
  font: 1rem var(--font); color: var(--on-dark);
  background: rgba(247, 243, 234, .04); border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.field input[aria-invalid="true"] { border-color: var(--tangerine); }
.form-error { color: #FF8A5C; font-size: .9rem; }
.form-error:empty { display: none; }
.demo-form .btn { justify-self: start; }
.closing-grid { position: relative; z-index: 1; }
.closing-cta { margin-top: 1.25rem; }

/* Booking popup. Google draws the calendar; everything around it is ours. */
html:has(.booking-popup[open]) { overflow: hidden; }
.booking-popup {
  width: min(960px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 32px));
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0; overflow: hidden;
  border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.booking-popup[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: booking-in 220ms cubic-bezier(.23, 1, .32, 1); }
.booking-popup::backdrop { background: rgba(14, 37, 27, .72); animation: booking-backdrop-in 220ms ease-out; }
@keyframes booking-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes booking-backdrop-in { from { opacity: 0; } }
.booking-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 24px; background: var(--ink); color: var(--paper);
}
.booking-heading { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-bar strong { font-weight: 500; }
.booking-bar span { color: var(--on-dark-muted); font-size: 14px; margin-left: 8px; }
.booking-close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 999px; color: var(--paper); font: inherit; font-size: 24px; line-height: 1;
}
.booking-close:hover { background: rgba(247, 243, 234, .1); }
.booking-close:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.booking-popup iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .booking-popup { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .booking-bar span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-popup[open], .booking-popup::backdrop { animation: none; }
}

/* Footer: the logo, one line and Follow us (LinkedIn) on the left; every page in four columns on the right */
.footer { border-top: 1px solid var(--line-dark); padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem; }
.footer a { text-decoration: none; }
.footer-top { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.footer-logo { display: inline-block; }
.footer-logo img { display: block; }
.footer-line { max-width: 22rem; margin-top: 1rem; font-size: .95rem; line-height: 1.55; color: var(--on-dark-muted); }
.footer-follow { display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.footer-li { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--mint); transition: color 150ms, transform 200ms; }
.footer-li svg { width: 100%; height: 100%; fill: currentColor; }
.footer-li:hover { color: var(--paper); transform: translateY(-2px); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.footer-h { margin: 0 0 .9rem; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.footer-col ul { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.footer-col a, .footer-bar a { color: var(--on-dark-muted); font-size: .92rem; transition: color 150ms; }
.footer-col a:hover, .footer-bar a:hover { color: var(--on-dark); }
.footer-col a[aria-current="page"] { color: var(--mint); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.footer-copy { margin: 0; font-size: .85rem; color: var(--on-dark-faint); }
@media (max-width: 960px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .footer-li { transition: none; } }

/* Responsive */
@media (max-width: 1080px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { min-height: 300px; }
  .stage:nth-child(2) { border-right: 0; }
  .stage:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .stage:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--ink); border-bottom: 1px solid var(--line-dark);
    padding: .5rem var(--gutter) 1rem;
  }
  /* The sheet hangs off the sticky header, so the page itself never grows.
     Cap it to the screen and scroll the list, or the links below the fold stay out of reach. */
  .nav-links.is-open {
    display: flex;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  html:has(#nav-links.is-open) { overflow: hidden; }
  .nav-links a { padding: .85rem 0; font-size: 1.05rem; }
  .nav-cta { margin-left: auto; }
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--paper); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .nav-inner { gap: 1rem; }

  .hero-grid, .section-head, .cols-3, .work-list, .faq-grid, .closing-grid, .stall-grid { grid-template-columns: 1fr; }
  .stall-copy { position: static; order: -1; }
  .section-head { align-items: start; }
}

@media (max-width: 600px) {
  .nav-cta { display: none; }
  .nav-links a.nav-sheet-cta { display: inline-flex; justify-content: center; flex: none; margin-top: 1.25rem; padding: .85rem 1.25rem; }
  .nav-toggle { margin-left: auto; }
  .hero-form { flex-direction: column; border-radius: var(--radius); }
  .hero-form .btn { width: 100%; }
  .pipeline { grid-template-columns: 1fr; }
  .stage { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .stage:last-child { border-bottom: 0; }
  .stage::after { display: none; }
  .run-steps li { grid-template-columns: 14px 1fr; }
  .run-stage { grid-column: 2; }
  .run-text { grid-column: 2; }
}

/* ---------- Layout rails: thin guides at the content edges ---------- */
/* Rails sit 20px outside the content edge so they never touch text */
body { position: relative; }
.rails, .hero, .partners, .section, .footer { --rail-x: max(8px, calc(max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) - 20px)); }
.rails { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rails::before, .rails::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rail); opacity: .28;
}
.rails::before { left: var(--rail-x); }
.rails::after { right: var(--rail-x); }
.hero, .partners, .section, .footer { position: relative; }
.section + .section.paper, .section.paper + .section:not(.dark) { border-top: 1px solid var(--line); }
@media (max-width: 600px) { .rails { display: none; } }

/* Keyboard hints */
kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--line-dark); border-bottom-width: 2px; border-radius: 4px;
  font: 500 .72rem var(--font); color: var(--on-dark-muted); background: rgba(247, 243, 234, .04);
}

/* ---------- Press feedback: every pressable thing confirms the press ---------- */
:where(.demo-tab, .stall-trigger, .palette-item, .switch-item, .spot-arrows button, .case-card, .person, .spot-card, .p-cta, .ask-chip, .cmdk-item):active { scale: .97; }

/* ---------- Pause looping motion while its section is off screen (set by script) ---------- */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- Staggered entrance for card grids (played once, never blocks clicks) ---------- */
[data-stagger]:not(.is-in) > * { opacity: 0; }
[data-stagger].is-in > * { animation: stagger-in 320ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes stagger-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  [data-stagger]:not(.is-in) > * { opacity: 1; }
  [data-stagger].is-in > * { animation: none; }
}

/* ---------- Page transitions between pages (View Transitions API) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- ⌘K command palette ---------- */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .55rem 0 .7rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line-dark); background: rgba(247, 243, 234, .03);
  color: var(--on-dark-muted); font: 500 .85rem var(--font); cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, scale 140ms var(--ease-out);
}
.cmdk-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cmdk-trigger kbd { height: 22px; min-width: 0; padding: 0 6px; }
.cmdk-trigger:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .cmdk-trigger:hover { border-color: var(--on-dark-faint); color: var(--on-dark); } }
@media (max-width: 1000px) { .cmdk-trigger-label, .cmdk-trigger kbd { display: none; } .cmdk-trigger { width: 40px; height: 40px; justify-content: center; padding: 0; } }

.cmdk {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 120px)); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--line-dark); border-radius: 12px; background: var(--window); color: var(--on-dark);
  box-shadow: 0 24px 80px -20px rgba(0, 0, 0, .6); overflow: hidden;
}
.cmdk[open] { display: flex; flex-direction: column; }
.cmdk::backdrop { background: rgba(4, 12, 9, .6); }
.cmdk-search { display: flex; align-items: center; gap: .75rem; padding: 0 1rem; border-bottom: 1px solid var(--line-dark); flex: none; }
.cmdk-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--on-dark-faint); stroke-width: 1.8; stroke-linecap: round; }
.cmdk-search input { flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; color: var(--on-dark); font: 400 1.05rem var(--font); letter-spacing: -0.01em; }
.cmdk-search input::placeholder { color: var(--on-dark-faint); }
.cmdk-search input:focus { outline: none; }
.cmdk-list { overflow-y: auto; padding: .4rem; overscroll-behavior: contain; }
.cmdk-group { padding: .7rem .65rem .3rem; font-size: .72rem; font-weight: 500; color: var(--on-dark-faint); }
.cmdk-item {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .7rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .95rem; color: var(--on-dark-muted);
}
.cmdk-item[aria-selected="true"] { background: rgba(247, 243, 234, .07); color: var(--on-dark); }
.cmdk-item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--mint); }
.cmdk-item.is-primary span:first-child { color: var(--mint); }
.cmdk-hint { font-size: .8rem; color: var(--on-dark-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cmdk-empty { padding: 1rem .7rem; color: var(--on-dark-faint); font-size: .92rem; }
.cmdk-empty a { color: var(--mint); }
.cmdk-foot { display: flex; gap: 1.25rem; padding: .65rem 1rem; border-top: 1px solid var(--line-dark); font-size: .78rem; color: var(--on-dark-faint); flex: none; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 600px) { .cmdk-foot { display: none; } .cmdk { margin-top: 8vh; } }

/* ---------- Card-to-pop-up morph (same-page view transition) ---------- */
html.is-morphing .nav { view-transition-name: none; }
html.is-morphing::view-transition-old(root) { animation: vt-fade-out 220ms ease both; }
html.is-morphing::view-transition-new(root) { animation: vt-fade-in 260ms ease both; }
::view-transition-group(morph) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-old(morph) { animation: vt-fade-out 160ms var(--ease-out) both; height: 100%; object-fit: cover; object-position: top; }
::view-transition-new(morph) { animation: vt-fade-in 260ms var(--ease-out) 60ms both; height: 100%; object-fit: cover; object-position: top; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
dialog.is-morphing, dialog.is-morphing::backdrop { transition: none !important; }

/* ---------- Bottom sheet pop-ups on phones ---------- */
.sheet-handle { display: none; }
@media (max-width: 760px) {
  dialog.case-modal, dialog.profile {
    width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    opacity: 1; transform: translateY(100%);
    transition: transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  dialog.case-modal[open], dialog.profile[open] { transform: none; transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1), overlay 450ms allow-discrete, display 450ms allow-discrete; }
  @starting-style { dialog.case-modal[open], dialog.profile[open] { transform: translateY(100%); } }
  .modal-bar, .profile-bar { position: relative; padding-top: 1.35rem; touch-action: none; cursor: grab; }
  .sheet-handle { display: block; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(247, 243, 234, .28); }
}

/* ---------- Cursor spotlight ---------- */
.glow-layer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 300ms ease; }
.glow-layer.is-on { opacity: 1; transition-duration: 150ms; }
.glow-dot {
  position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 246, 100, .10) 0%, rgba(204, 246, 100, .04) 35%, transparent 65%);
  mix-blend-mode: screen; will-change: transform;
}

/* Nav: keep every link and button on one line */
.nav-links { gap: clamp(1rem, 1.8vw, 2rem); }
.nav-links a, .btn, .cmdk-trigger { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 861px) {
  .nav-links a[href$="#platform"], .nav-links a[href$="#engagements"], .nav-links a[href$="#approach"] { display: none; }
}

/* Decoding page titles (site.js) */
.decode-glyph { color: rgba(204, 246, 100, .55); }

/* ---------- Homepage: every section on Green Ink ----------
   Cards that were white on the old cream sections become dark panels. */
.dark .stall-item, .dark .steps li, .dark .plan {
  background: var(--window); border-color: var(--line-dark); color: var(--on-dark);
  --text-muted: var(--on-dark-muted); --line: var(--line-dark);
}
.dark .stall-trigger, .dark .steps h3, .dark .plan h3 { color: var(--on-dark); }
.dark .stall-item.is-open { border-color: rgba(204, 246, 100, .45); }
.dark .stall-chev { border-color: var(--line-dark); }
.dark .stall-chev::before { border-color: var(--on-dark); }
.dark .stall-item.is-open .stall-chev { background: var(--mint); border-color: var(--mint); }
.dark .stall-item.is-open .stall-chev::before { border-color: var(--ink); }
.dark .steps li.is-active { background: var(--forest); border-color: rgba(204, 246, 100, .45); }
.dark .step-num, .dark .plan-spec dt { color: var(--on-dark-faint); }
.dark .plan .readout { background-color: var(--ink); border: 1px solid var(--line-dark); }
.dark .plan-featured { background: var(--forest); border-color: rgba(204, 246, 100, .45); }
.dark .plan-list li::before { background: var(--mint); }
.dark .plan-list li::after { border-color: var(--ink); }
.dark .plan-spec dd { color: var(--on-dark-muted); }
.dark .plan-spec div:first-child dd { color: var(--on-dark); }

/* Alternating tones break up the page: every other section a shade deeper, with a hairline between */
#main .section:not(#spotlight) { box-shadow: inset 0 1px var(--line-dark); }


/* ---------- Readability pass: easier on the eyes, same look ---------- */
/* Brighter faint and muted text; panels lighter than the page, not darker */
:root { --on-dark-faint: rgba(247, 243, 234, .6); --on-dark-muted: rgba(247, 243, 234, .78); --window: #14301F; --line-dark: rgba(247, 243, 234, .14); }
/* Clearer rhythm between the two section tones */
.hero, .section.dark:not(.tone-alt), .footer { background: #0F2A1E; }
.section.tone-alt { background: #0A1A13; }
.dark .plan .readout, .plan-featured .readout { background-color: #0F2A1E; }
/* Small text gets normal letter spacing and a little more line height */
body { letter-spacing: -0.005em; }
p { line-height: 1.62; }
/* Vines run down the page edges only; the text column stays clear */
.section-vines, .closing-roots {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 10%, transparent 24%, transparent 76%, #000 90%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 10%, transparent 24%, transparent 76%, #000 90%, #000 100%);
}

/* ---------- Why AI stalls: rolling wheel of cards (Sardine style) ---------- */
.has-wheel > .stall-item { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wheel { --ch: 206px; position: relative; height: calc(var(--ch) * 2.72 + 20px);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.wheel-card {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(var(--ch) / -2); height: var(--ch);
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line-dark);
  background: #14301F; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  display: grid; grid-template-rows: auto auto auto 1fr; align-content: start;
  transform-origin: 50% 50%; cursor: pointer;
  transition: transform 700ms cubic-bezier(.65, 0, .35, 1), opacity 700ms cubic-bezier(.65, 0, .35, 1), background-color 700ms ease;
}
/* Slots: middle card full size; neighbours narrower, faded and behind; the rest out of sight */
.wheel-card[data-slot="0"]  { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
.wheel-card[data-slot="-1"] { transform: translateY(calc(var(--ch) * -.92 - 10px)) scale(.84); opacity: .45; z-index: 2; background: #112819; }
.wheel-card[data-slot="1"]  { transform: translateY(calc(var(--ch) * .92 + 10px)) scale(.84); opacity: .45; z-index: 2; background: #112819; }
.wheel-card[data-slot="-2"] { transform: translateY(calc(var(--ch) * -1.7)) scale(.72); opacity: 0; z-index: 1; }
.wheel-card[data-slot="2"], .wheel-card[data-slot="3"] { transform: translateY(calc(var(--ch) * 1.7)) scale(.72); opacity: 0; z-index: 1; }
.wheel-card:not([data-slot="0"]) { box-shadow: none; }
.wheel-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.wheel-dot { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--dot); flex: none; }
.wheel-title { flex: 1; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--on-dark); }
.wheel-flag { font-size: .75rem; padding: 3px 10px; border-radius: 999px; background: var(--tangerine-light); color: var(--tangerine-deep); white-space: nowrap; }
.wheel-desc { margin: 12px 0 0; font-size: .92rem; line-height: 1.5; color: var(--on-dark-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wheel-label { margin: 14px 0 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-faint); }
.wheel-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.wheel-chips span { font-size: .78rem; padding: 5px 10px; border-radius: 6px; background: rgba(247, 243, 234, .07); border: 1px solid var(--line-dark); color: var(--on-dark-muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wheel-card { transition: opacity 200ms ease; } }

/* ---------- Brand graphics (brand/AcornAI Graphics, made with its crop script) ----------
   Every crop is sized to its section at 1440px wide with the headline kept clear. */
/* Hero: the full-strength Channels root system, growing down row by row once the intro ends */
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/graphics/home-hero-field.svg") center top / 1440px auto no-repeat;
  clip-path: inset(0 0 100% 0); }
.hero-art.is-grown { clip-path: inset(0 0 0 0); transition: clip-path 2600ms steps(117, end); }
.hero > .wrap { position: relative; z-index: 1; }
.hero { background-color: #0E251B; }
/* Quiet (tonal) roots and rings behind the sections that hold cards */
/* Tree rings (Contours) live only behind the FAQ */
#faq { background-color: #0E251B; background-image: url("assets/graphics/home-faq.svg"); background-repeat: no-repeat; background-position: center top; background-size: 1440px auto; }
@media (min-width: 1441px) { .hero-art, #faq { background-size: cover; } }
/* Roots run the full height of the page in the side margins, beside the content blocks:
   two thin vertical Channels ribbons per side, each grown from a different master. */
.page-rails { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0;
  --margin: max(0px, calc((100% - var(--wrap)) / 2)); }
.rail { position: absolute; top: 0; bottom: 0; width: 48px; opacity: .3;
  background: url("assets/graphics/rail-1.svg") center top / 48px auto repeat-y; }
.rail-l  { left: calc(var(--margin) * .18); }
.rail-l2 { left: calc(var(--margin) * .58); background-image: url("assets/graphics/rail-2.svg"); opacity: .16; background-position: center -1800px; }
.rail-r  { right: calc(var(--margin) * .18); background-image: url("assets/graphics/rail-2.svg"); transform: scaleX(-1); }
.rail-r2 { right: calc(var(--margin) * .58); background-image: url("assets/graphics/rail-3.svg"); opacity: .16; transform: scaleX(-1); }
@media (max-width: 900px) { .page-rails { display: none; } }
main { position: relative; }
/* A ribbon along the foot of the page; nothing sits on it */
.footer { padding-bottom: 72px; background: #0E251B url("assets/graphics/home-ribbon.svg") center bottom / 1440px 48px no-repeat; }
@media (prefers-reduced-motion: reduce) { .hero-art { clip-path: none; } }
.partners { z-index: 1; } /* side roots pass behind the Mint partners band */

/* ---------- Header menus: Resources and Company (site.js opens them) ---------- */
.nav-links { align-items: center; }
.nav-menu { position: relative; }
.nav-menu-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem 0; border: 0; background: none; color: var(--on-dark-muted); font: inherit; font-size: .95rem; cursor: pointer; transition: color 200ms cubic-bezier(.4, 0, .2, 1); }
.nav-menu-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(.4, 0, .2, 1); }
.nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"], .nav-menu-btn.is-current { color: var(--on-dark); }
.nav-menu-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
:is(.v2 .nav, .nav[data-tone="paper"]) .nav-menu-btn { color: var(--text-muted); }
:is(.v2 .nav, .nav[data-tone="paper"]) .nav-menu-btn:hover, :is(.v2 .nav, .nav[data-tone="paper"]) .nav-menu-btn[aria-expanded="true"], :is(.v2 .nav, .nav[data-tone="paper"]) .nav-menu-btn.is-current { color: var(--ink); }
/* The dropdown: the pages on the left (name and one line), and a preview on the right that follows
   the page you hover (site.js). The gap above it is bridged so the pointer can cross it. */
.nav-menu-list { position: absolute; top: calc(100% + 12px); left: -.9rem; z-index: 30; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .5rem; width: min(36rem, calc(100vw - 2rem)); padding: .5rem; border: 1px solid rgba(14, 37, 27, .1); border-radius: 16px; background: var(--white); box-shadow: 0 18px 44px rgba(14, 37, 27, .2); animation: nav-menu-in 180ms var(--ease-out, ease-out); }
.nav-links > .nav-menu:last-child .nav-menu-list { left: auto; right: -.9rem; }
.nav-menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-menu-list[hidden] { display: none; }
@keyframes nav-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-menu-links { display: grid; align-content: start; gap: .2rem; }
#nav-links .nav-menu-list a { display: flex; align-items: flex-start; gap: .85rem; padding: .8rem .9rem; border-radius: 10px; color: var(--ink); white-space: normal; transition: background-color 150ms; }
#nav-links .nav-menu-list a:hover, #nav-links .nav-menu-list a:focus-visible, #nav-links .nav-menu-list a.is-active { background: rgba(18, 73, 46, .07); color: var(--ink); }
#nav-links .nav-menu-list b { display: block; font-weight: 500; }
#nav-links .nav-menu-list small { display: block; margin-top: .15rem; font-size: .85rem; line-height: 1.4; color: var(--text-muted); }
.nav-menu-pv { min-height: 11rem; border-radius: 12px; background: var(--ink); color: var(--paper); }
.nav-pv { display: grid; gap: .45rem; align-content: end; height: 100%; padding: 1.25rem; animation: nav-pv-in 300ms cubic-bezier(.4, 0, .2, 1); }
@keyframes nav-pv-in { from { opacity: 0; } to { opacity: 1; } }
.nav-pv[hidden] { display: none; }
.nav-pv-k { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.nav-pv b { font-size: 1.9rem; line-height: 1; letter-spacing: -0.035em; font-weight: 500; color: var(--mint); }
.nav-pv p { font-size: .9rem; line-height: 1.45; color: rgba(247, 243, 234, .8); }
/* a callout that stays put (Industries), with a longer line than the usual figure */
.nav-pv--quote b { font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .nav-menu-list, .nav-menu-btn svg, .nav-pv { animation: none; transition: none; } }
/* Phones: inside the mobile panel each menu shows as a label with its pages listed under it */
@media (max-width: 860px) {
  .nav-links { align-items: stretch; }
  .nav-menu { display: grid; justify-items: start; }
  .nav-menu-btn { padding: .85rem 0 .25rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; cursor: default; pointer-events: none; }
  .nav-menu-btn svg { display: none; }
  .nav-menu-list, .nav-menu-list[hidden] { position: static; display: grid; min-width: 0; padding: 0 0 .25rem .9rem; border: 0; background: none; box-shadow: none; animation: none; }
  .nav-menu-list::before { display: none; }
  .nav-menu-list, .nav-menu-list[hidden] { width: auto; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 0; }
  .nav-menu-pv, #nav-links .nav-menu-list small { display: none; }
  #nav-links .nav-menu-list b { font-weight: 400; }
  #nav-links .nav-menu-list a:hover { background: none; color: var(--on-dark); }
  :is(.v2 .nav, .nav[data-tone="paper"]) #nav-links .nav-menu-list a:hover { color: var(--ink); }
  #nav-links .nav-menu-list a { padding: .7rem 0; border-radius: 0; color: var(--on-dark-muted); font-size: 1.05rem; }
  :is(.v2 .nav, .nav[data-tone="paper"]) #nav-links .nav-menu-list a { color: var(--text-muted); }
  #nav-links .nav-menu-list a[aria-current="page"] { background: none; color: var(--mint); }
  :is(.v2 .nav, .nav[data-tone="paper"]) #nav-links .nav-menu-list a[aria-current="page"] { color: var(--forest); }
  /* The preview's "active" page means nothing on phones, so it isn't highlighted there */
  #nav-links .nav-menu-list a.is-active:not(:hover):not([aria-current]) { background: none; color: var(--on-dark-muted); }
  :is(.v2 .nav, .nav[data-tone="paper"]) #nav-links .nav-menu-list a.is-active:not(:hover):not([aria-current]) { color: var(--text-muted); }
}

/* Titles on phones, matching the home hero */
@media (max-width: 760px) { :root { --title-size: clamp(1.75rem, 8vw, 1.875rem); } }

/* ---------- Header motion, measured from cohere.com ----------
   Labels roll over 300ms ease-out (cubic-bezier(0, 0, .2, 1)); the incoming copy starts 110% below.
   The drawer opens by revealing downward over 300ms, cubic-bezier(.4, 0, .2, 1), and closes instantly.
   Links, the heading, and the preview's content enter together: 500ms ease-in-out, from 25% above and opacity 0.
   The preview rail itself stays put, since sliding the full-height rail would cover the header above it.
   A link's name eases to 50% opacity over 150ms. Switching menus keeps the drawer open and replays the enter. */
.nav-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.nav-roll > span { display: block; transition: transform 300ms cubic-bezier(0, 0, .2, 1); }
.nav-roll > span + span { position: absolute; inset: 0; transform: translateY(110%); }
.nav-menu:hover .nav-roll > span:first-child, .nav-menu-btn:focus-visible .nav-roll > span:first-child, .nav-links > a:hover .nav-roll > span:first-child, .nav-links > a:focus-visible .nav-roll > span:first-child { transform: translateY(-100%); }
.nav-menu:hover .nav-roll > span + span, .nav-menu-btn:focus-visible .nav-roll > span + span, .nav-links > a:hover .nav-roll > span + span, .nav-links > a:focus-visible .nav-roll > span + span { transform: translateY(0); }
.nav-menu-k { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 861px) {
  /* Every menu is the same full-width sheet: link columns on the left, a featured rail flush to the right edge. */
  .nav-menu { position: static; }
  .nav-menu-btn { padding: .4rem .7rem; border-radius: 999px; }
  .nav-menu-btn svg { display: none; }
  .nav-menu-btn[aria-expanded="true"] { background: rgba(247, 243, 234, .14); }
  :is(.v2 .nav, .nav[data-tone="paper"]) .nav-menu-btn[aria-expanded="true"] { background: rgba(14, 37, 27, .06); }
  .nav-menu-list, .nav-links > .nav-menu:last-child .nav-menu-list {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; translate: none !important;
    grid-template-columns: minmax(0, 1fr) clamp(16.5rem, 24vw, 24rem); justify-content: stretch; gap: 0;
    padding: 0;
    border: 0; border-top: 1px solid rgba(14, 37, 27, .08); border-radius: 0;
    box-shadow: 0 18px 36px -28px rgba(14, 37, 27, .45);
    background: var(--paper);
    animation: nav-drawer-in 300ms cubic-bezier(.4, 0, .2, 1);
  }
  .nav-menu-list.is-switch, .nav-links > .nav-menu:last-child .nav-menu-list.is-switch { animation: none; }
  .nav-menu-list::before { display: none; }
  .nav-menu-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 1.5rem;
    padding: 1.75rem 3rem 2.25rem max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
  .nav-menu-k { grid-column: 1 / -1; padding: 0; margin: 0; }
  #nav-links .nav-menu-list a { padding: 0; border-radius: 0; background: transparent; align-items: flex-start; }
  #nav-links .nav-menu-list a:hover, #nav-links .nav-menu-list a:focus-visible, #nav-links .nav-menu-list a.is-active,
  #nav-links .nav-menu-list a.nav-menu-alt, #nav-links .nav-menu-list a.nav-menu-alt:hover, #nav-links .nav-menu-list a.nav-menu-alt.is-active { background: transparent; }
  #nav-links .nav-menu-list b { justify-self: start; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1); }
  #nav-links .nav-menu-list a:hover b, #nav-links .nav-menu-list a:focus-visible b { opacity: .5; }
  #nav-links .nav-menu-list small { margin-top: .25rem; font-size: 13px; line-height: 1.4; }
  #nav-links .nav-menu-list a > span { display: grid; gap: 0; }
  .nav-menu-list:not([hidden]) :is(.nav-menu-k, .nav-menu-links > a, .nav-menu-pv:not(.is-swapped) .nav-pv > :not(.nav-acorn), .nav-menu-pv:not(.is-swapped) .nav-callout, .nav-acorn > li) { animation: nav-item-in 500ms ease-in-out both; }
  .nav-menu-list:has(.nav-menu-pv--feature) { grid-template-columns: minmax(0, 1fr) clamp(16rem, 22vw, 20.5rem); }
  .nav-menu-pv--feature { display: grid; }
  .nav-menu-pv { overflow: hidden; border-radius: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
  .nav-menu-pv:not(.nav-menu-pv--fixed) .nav-pv { align-content: start; padding: 1.75rem 1.75rem 2rem; }
  .nav-menu-pv:not(.nav-menu-pv--fixed) .nav-pv-k { color: var(--text-muted); }
  .nav-menu-pv:not(.nav-menu-pv--fixed) .nav-pv:not(.nav-pv--quote) b { color: var(--ink); font-size: 1.65rem; }
  .nav-menu-pv:not(.nav-menu-pv--fixed) .nav-pv--quote b { color: var(--ink); }
  .nav-menu-pv:not(.nav-menu-pv--fixed) .nav-pv p { color: var(--text-muted); }
  .nav-menu-pv--fixed { background: var(--ink); color: var(--paper); padding: 1.5rem; }
}
@keyframes nav-drawer-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(-25%); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .nav-menu-k { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-roll > span { transition: none; }
  .nav-menu-list, .nav-menu-list:not([hidden]) :is(.nav-menu-k, .nav-menu-links > a, .nav-menu-pv:not(.is-swapped) .nav-pv > :not(.nav-acorn), .nav-menu-pv:not(.is-swapped) .nav-callout, .nav-acorn > li) { animation: none; }
}

/* Company drawer: a fixed panel (the four AcornAI layers, as on the About page) that stays the same whatever the
   pointer is over */
.nav-menu-pv--fixed { padding: .75rem; }
.nav-acorn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; height: 100%; list-style: none; margin: 0; padding: 0; }
.nav-acorn li { display: grid; gap: .2rem; align-content: start; padding: .85rem .9rem; border: 1px solid rgba(247, 243, 234, .12); border-radius: 10px; background: rgba(247, 243, 234, .04); }
.nav-acorn b { font-size: 2rem; line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--mint); }
.nav-acorn span { margin-top: .45rem; font-size: .95rem; font-weight: 500; color: var(--paper); }
.nav-acorn small { font-size: .8rem; line-height: 1.4; color: rgba(247, 243, 234, .85); }
.nav-acorn li.is-ground { background: var(--mint); border-color: var(--mint); }
.nav-acorn li.is-ground b, .nav-acorn li.is-ground span { color: var(--ink); }
.nav-acorn li.is-ground small { color: rgba(14, 37, 27, .75); }
.nav-pv--acorn { padding: 0; animation: none; }

/* Services and Industries: a quiet text note on the right that follows the item you hover.
   A real write-up is badged "Case study" and names the customer (or an anonymous label such as
   "Top 5 telecom provider"); otherwise the note is a key use case. */
.nav-menu-pv--feature {
  height: 0;
  min-height: 100%;
  align-self: stretch;
  align-content: stretch;
  padding: 0;
  background: var(--paper);
  border-left: 1px solid rgba(14, 37, 27, .08);
}
.nav-callout { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.75rem 1.75rem 2rem; }
/* A case study note links to its write-up. The whole panel is the link, so the pointer can go straight across from
   any row in the list without passing over another item and swapping the note. */
#nav-links .nav-menu-list a.nav-callout { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.75rem 1.75rem 2rem; border-radius: 0; background: transparent; }
#nav-links .nav-menu-list a.nav-callout[hidden] { display: none; }
#nav-links .nav-menu-list a.nav-callout > span { display: inline-flex; }
#nav-links .nav-menu-list a.nav-callout:focus-visible { outline-offset: -4px; }
.nav-callout-title { transition: opacity 150ms cubic-bezier(.4, 0, .2, 1); }
a.nav-callout:hover .nav-callout-title, a.nav-callout:focus-visible .nav-callout-title { opacity: .5; }
.nav-callout-more { align-items: center; gap: .4rem; margin-top: .45rem; font-size: .9rem; font-weight: 500; color: var(--forest); }
.nav-callout-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms cubic-bezier(.4, 0, .2, 1); }
a.nav-callout:hover .nav-callout-more svg, a.nav-callout:focus-visible .nav-callout-more svg { transform: translateX(4px); }
.nav-callout[hidden] { display: none; }
.nav-callout-badge {
  display: inline-flex; align-items: center;
  margin: 0; padding: .22rem .55rem;
  border: 1px solid #E7E7DD; border-radius: 999px; background: #E7E7DD; /* Fashion White light-ground step 3 */
  font-size: .68rem; font-weight: 500; letter-spacing: .08em; line-height: 1.2;
  text-transform: uppercase; color: var(--ink);
}
.nav-callout-k { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nav-callout-title { margin: .15rem 0 0; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.nav-callout-body { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.nav-menu-pv.is-swapped .nav-callout { animation: nav-pv-in 300ms cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .nav-callout, .nav-menu-pv.is-swapped .nav-callout { animation: none; transition: none; }
  .nav-callout-title, .nav-callout-more svg { transition: none; }
}

/* Projects stay in the markup. Hidden until they should be public again. */
.nav-menu:has(#menu-projects),
#open-source,
.footer-col:has(a[href="agentflow.html"]),
.pat-more:has(> a[href="agentflow.html"]),
a.pat-link[href="agentflow.html"],
a.pat-link[href="token-ledger.html"],
a.svc-link[href="token-ledger.html"] {
  display: none;
}
/* Mentions of a hidden project in running copy read as plain text */
.svc-note a[href="agentflow.html"] { color: inherit; font-weight: inherit; text-decoration: none; pointer-events: none; }

/* Follow us stays hidden until the LinkedIn link in the footer is the company page's address */
.footer-follow:has(a[href="#linkedin"]) { display: none; }

/* About stays in the markup. Hidden until it should be public again. */
#nav-links a[href="about.html"],
.footer-col li:has(> a[href="about.html"]) {
  display: none;
}

/* Company drawer: the Automate / Observe / Connect / Reason callout stays in the markup. */
#menu-company .nav-menu-pv {
  display: none;
}
@media (min-width: 861px) {
  #menu-company.nav-menu-list {
    grid-template-columns: minmax(0, 1fr);
  }
  #menu-company .nav-menu-links {
    grid-template-columns: repeat(2, minmax(14rem, 22rem));
    justify-content: start;
    padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
}
@media (min-width: 961px) {
  .footer-cols:has(a[href="agentflow.html"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}