/* nooodles — site stylesheet
   Shared by every page. Tokens mirror app-mock/styles.css (see docs/design-system.md).
   House style: mono for labels/meta/buttons, sans for names/body; radii 8/12/999;
   hover = translateY(-2px) + border lightens. Drive card colour from --c, never a raw hex. */

:root {
  --bg:        #121216;
  --bg-2:      #16161b;
  --panel:     rgba(22, 22, 27, 0.96);
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --text-hi:   #e8eaed;
  --text:      #c9cbcf;
  --text-dim:  #888a8d;
  --brand:     #ffd84d;   /* nooodles yellow */
  --flow:      #e0883c;   /* STATE orange  — workflows */
  --web:       #3ec9a7;   /* WEB teal      — scenes    */
  --ok:        #70c050;
  --err:       #d04545;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* node-canvas grid backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
  -webkit-mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 40%, transparent 95%);
          mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 40%, transparent 95%);
  opacity: 0.95;
}
body.subpage::before {
  -webkit-mask-image: radial-gradient(ellipse 130% 60% at 50% 0%, #000 25%, transparent 90%);
          mask-image: radial-gradient(ellipse 130% 60% at 50% 0%, #000 25%, transparent 90%);
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.skip {
  position: absolute; left: -9999px; z-index: 99;
  background: var(--brand); color: var(--bg); padding: 10px 16px; border-radius: 8px;
  font-family: var(--mono); font-size: 14px;
}
.skip:focus { left: 24px; top: 12px; }

/* ============ nav ============ */
header.nav {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 20px 24px;
}
.brand { font-family: var(--mono); font-weight: 600; color: var(--text-hi); font-size: 18px; letter-spacing: 0.01em; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--brand); font-weight: 600; }

.nav-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-item { position: relative; }
.nav-btn {
  font-family: var(--mono); font-size: 13.5px; color: var(--text-dim);
  background: none; border: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease, background .15s ease;
}
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--text-hi); background: rgba(255,255,255,0.05); }
.nav-btn .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform .15s ease; }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-3px,-3px); }
a.nav-btn:hover { text-decoration: none; }
.nav-btn.is-current { color: var(--brand); }

/* Invisible bridge across the gap between button and popup. Without it the
   pointer leaves .nav-item on the way down, mouseleave fires, and the menu
   closes before you can click anything. */
.nav-item::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  display: none;
}
.nav-item.open::after { display: block; }

.nav-pop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: #17171d; border: 1px solid var(--line-2); border-radius: 12px; padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9); display: none;
}
.nav-pop.wide { min-width: 480px; display: none; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-item.open .nav-pop { display: block; }
.nav-item.open .nav-pop.wide { display: grid; }
.nav-pop .grp { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); padding: 10px 10px 6px; }
.nav-pop a {
  display: block; padding: 9px 10px; border-radius: 8px; color: var(--text);
  font-size: 14.5px; line-height: 1.35;
}
.nav-pop a:hover { background: rgba(255,255,255,0.06); color: var(--text-hi); text-decoration: none; }
.nav-pop a small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.nav-cta {
  font-family: var(--mono); font-size: 13px; color: var(--bg);
  background: var(--brand); padding: 9px 16px; border-radius: 999px; font-weight: 600;
  white-space: nowrap; margin-left: 8px;
}
.nav-cta:hover { text-decoration: none; filter: brightness(1.08); }

/* auth pair — sign in is solid, sign up is the outline */
.nav-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.nav-signin, .nav-signup {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--brand); transition: filter .15s ease, background .15s ease;
}
.nav-signin { background: var(--brand); color: var(--bg); }
.nav-signin:hover { text-decoration: none; filter: brightness(1.08); }
.nav-signup { background: transparent; color: var(--brand); }
.nav-signup:hover { text-decoration: none; background: rgba(255,216,77,0.12); }

.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-hi); padding: 8px 12px; font-family: var(--mono); font-size: 13px; cursor: pointer; }

/* ============ buttons ============ */
.btn {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: filter .15s ease, border-color .15s ease, color .15s ease;
  display: inline-block; text-align: center;
}
.btn-primary { background: var(--brand); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-hi); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.btn-sm { font-size: 14px; padding: 11px 20px; }

/* ============ hero (landing) ============ */
.hero { text-align: center; padding: 92px 24px 0; }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; margin-bottom: 26px;
}
.eyebrow b { color: var(--brand); font-weight: 600; }
h1 {
  font-size: clamp(38px, 6.4vw, 70px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--text-hi); margin: 0 auto 22px; max-width: 15ch; font-weight: 700; text-wrap: balance;
}
h1 .y { color: var(--brand); }
/* NOTE: scoped to p on purpose. An unscoped .sub once matched <body class="sub">
   and clamped every subpage to 60ch, nav and all. Keep the element selector. */
p.sub { font-size: clamp(17px, 2.4vw, 21px); color: var(--text); max-width: 60ch; margin: 0 auto 34px; }
p.sub b { color: var(--text-hi); font-weight: 600; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); margin-top: 18px; }

/* ============ subpage hero ============ */
.pagehead { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 8px; }
.crumb { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); margin-bottom: 20px; }
.crumb a { color: var(--text-dim); }
.crumb a:hover { color: var(--brand); }
.crumb i { font-style: normal; padding: 0 8px; opacity: .5; }
.pagehead h1 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 18px; max-width: 20ch; text-align: left; }
.pagehead p.sub { margin: 0 0 28px; text-align: left; max-width: 74ch; }
.pagehead .hero-actions { justify-content: flex-start; }

/* ============ sections ============ */
section.wrap { position: relative; z-index: 1; padding: 80px 24px 92px; }
section.wrap.tight { padding: 56px 24px 64px; }
.section-tag { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.12; letter-spacing: -0.01em; color: var(--text-hi); margin: 0 0 18px; font-weight: 700; }
h3 { color: var(--text-hi); }
.lede { font-size: 18px; color: var(--text); max-width: 74ch; }
.lede b { color: var(--text-hi); font-weight: 600; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============ two doors ============ */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 64px auto 0; max-width: 940px; text-align: left; }
.door {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  border-top: 2px solid var(--dc, var(--brand));
  transition: transform .15s ease, border-color .15s ease; display: block; color: inherit;
}
.door:hover { transform: translateY(-2px); border-color: var(--line-2); border-top-color: var(--dc, var(--brand)); text-decoration: none; }
.door .kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc, var(--brand)); margin-bottom: 12px; }
.door h3 { font-size: 19px; margin: 0 0 8px; }
.door p { font-size: 15.5px; color: var(--text); margin: 0 0 14px; }
.door .go { font-family: var(--mono); font-size: 13px; color: var(--dc, var(--brand)); }

/* ============ demo frame ============ */
.demo { margin: 72px auto 0; max-width: 1080px; }
.demo.inline { margin: 44px auto 0; }
.demo-frame {
  position: relative; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #1b1b22 0%, #101014 70%);
  aspect-ratio: 16 / 9; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
}
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.3); }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c2c33; display: inline-block; }
.demo-bar .label { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.demo-body { position: absolute; inset: 38px 0 0 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.demo-body .play {
  width: 70px; height: 70px; border-radius: 50%; border: 1.5px solid var(--brand);
  display: grid; place-items: center; margin: 0 auto 16px; color: var(--brand);
  box-shadow: 0 0 30px -6px var(--brand);
}
.demo-body p { font-family: var(--mono); font-size: 13px; color: var(--text-dim); margin: 0; }
.demo video, .demo iframe, .demo img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* ============ the two modes ============ */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.mode { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; border-top: 2px solid var(--mc); }
.mode-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mode-head .sw { width: 11px; height: 11px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 12px -2px var(--mc); flex: 0 0 auto; }
.mode-head h3 { font-size: 21px; margin: 0; font-weight: 700; }
.mode > p { font-size: 16px; color: var(--text); margin: 0 0 20px; }
.mode dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; }
.mode dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.mode dd { margin: 0; font-size: 15px; color: var(--text); }
.mode dd b { color: var(--mc); font-weight: 600; }
.modes-note { font-size: 17px; color: var(--text-hi); margin: 30px 0 0; text-align: center; }
.modes-note b { color: var(--brand); font-weight: 600; }

/* ============ mode badge ============ */
.badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--bc); color: var(--bc); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; display: inline-block;
}
.badge.w { --bc: var(--flow); }   /* Workflow — assets for your team */
.badge.s { --bc: var(--web); }    /* Scene    — an experience for your audience */
.badge.y { --bc: var(--brand); }  /* System   — the setup other Recipes build on */
.badge.soon { --bc: var(--text-dim); }

/* ============ cards ============ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.pillars.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; border-top: 2px solid var(--c, var(--brand)); }
.card h3 { font-size: 18px; margin: 0 0 10px; }
.card p { font-size: 15.5px; color: var(--text); margin: 0; }
.card p + p { margin-top: 12px; }
.card .kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--brand)); margin-bottom: 12px; }

/* ============ families ============ */
.whatis { display: grid; grid-template-columns: 60fr 40fr; gap: 56px; align-items: center; }
.whatis .whatis-text { margin: 0; }
.whatis .lede { margin-bottom: 0; }
.families { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.whatis .families { margin-top: 0; }
.fam { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.fam .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* ============ family carousel ============ */
.famstrip {
  display: flex; gap: 8px; margin-top: 40px; flex-wrap: nowrap;
  border-bottom: 1px solid var(--line); padding-bottom: 18px;
}
.fam-chip {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 10px; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fam-chip .sw {
  width: 9px; height: 9px; border-radius: 50%; background: var(--c);
  flex: 0 0 auto; opacity: .55; transition: opacity .15s ease, box-shadow .15s ease;
}
.fam-chip:hover { color: var(--text-hi); border-color: var(--line-2); }
.fam-chip:hover .sw { opacity: 1; }
.fam-chip[aria-selected="true"] {
  color: var(--text-hi); border-color: var(--c); background: rgba(255,255,255,0.045);
}
.fam-chip[aria-selected="true"] .sw { opacity: 1; box-shadow: 0 0 10px -1px var(--c); }
.fam-chip:focus-visible { outline: 1px solid var(--c); outline-offset: 2px; }

.fam-panel { display: none; padding-top: 30px; }
.fam-panel.is-active { display: block; animation: fadeIn .3s ease; }
.fam-panel-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.fam-panel-head h3 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.fam-panel-head .code {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: 3px 10px;
}
.fam-panel-head p { margin: 0; font-size: 15.5px; color: var(--text-dim); }
.fam-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fam-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--c);
  border-radius: 10px; padding: 20px 22px;
}
.fam-card h4 { font-size: 16px; color: var(--text-hi); margin: 0 0 8px; font-weight: 600; }
.fam-card p { font-size: 14.5px; color: var(--text); margin: 0; }

@media (max-width: 900px) {
  .famstrip { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .famstrip::-webkit-scrollbar { display: none; }
  .fam-chip { flex: 0 0 auto; }
  .fam-cards { grid-template-columns: 1fr; }
}

/* ============ author/operator split ============ */
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.split .card { border-top: none; }
.split .card.author { border-left: 2px solid var(--brand); }
.split .card.operator { border-left: 2px solid var(--flow); }
.split .card.audience { border-left: 2px solid var(--web); }

/* ============ tabs ============ */
.tabs { margin-top: 44px; }
.tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.tab {
  font-family: var(--mono); font-size: 14px; color: var(--text-dim);
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px 16px; cursor: pointer; transition: color .15s ease, border-color .15s ease; white-space: nowrap;
}
.tab:hover { color: var(--text-hi); }
.tab[aria-selected="true"] { color: var(--tc, var(--brand)); border-bottom-color: var(--tc, var(--brand)); }
.tab:focus-visible { outline: 1px solid var(--tc, var(--brand)); outline-offset: 2px; border-radius: 2px; }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head .sw { width: 12px; height: 12px; border-radius: 50%; background: var(--tc, var(--brand)); flex: 0 0 auto; box-shadow: 0 0 12px -2px var(--tc, var(--brand)); }
.panel-head h3 { font-size: clamp(22px, 3vw, 30px); margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.tabpanel > p { font-size: 18px; color: var(--text); max-width: 74ch; margin: 0 0 32px; }
.tabpanel > p.escalate, p.escalate { color: var(--text-hi); border-left: 2px solid var(--web); padding-left: 16px; font-size: 16.5px; max-width: 74ch; }
.whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--tc, var(--brand)); border-radius: 10px; padding: 18px 20px; }
.why p { font-size: 15px; color: var(--text); margin: 0; }
.why .dot { font-family: var(--mono); font-size: 12px; color: var(--tc, var(--brand)); display: block; margin-bottom: 8px; }

/* ============ benefit rows (capability pages) ============ */
.benefits { display: grid; gap: 2px; margin-top: 44px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.benefit { background: var(--bg-2); padding: 26px 28px; display: grid; grid-template-columns: 34px 1fr; gap: 20px; align-items: start; }
.benefit .n { font-family: var(--mono); font-size: 13px; color: var(--brand); padding-top: 3px; }
.benefit h3 { font-size: 18.5px; margin: 0 0 8px; }
.benefit p { font-size: 15.5px; color: var(--text); margin: 0; max-width: 92ch; }

/* ============ before/after ============ */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ba > div { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--panel); }
.ba .before { border-left: 2px solid #55575c; }
.ba .after  { border-left: 2px solid var(--brand); }
.ba h3 { font-size: 13px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; color: var(--text-dim); }
.ba .after h3 { color: var(--brand); }
.ba p { font-size: 15.5px; margin: 0; color: var(--text); }

/* ============ recipes ============ */
.recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.recipe-grid.three { grid-template-columns: repeat(3, 1fr); }
.recipe { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.recipe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recipe h3 { font-size: 17px; margin: 0; font-weight: 600; }
.recipe p { font-size: 15px; color: var(--text); margin: 0 0 14px; }
.recipe .by { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

/* ============ gallery (Made with nooodles) ============ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.shot {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: block; color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
a.shot:hover { transform: translateY(-2px); border-color: var(--c, var(--line-2)); text-decoration: none; }
.shot-thumb {
  aspect-ratio: 16 / 10; position: relative; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--c, #ffd84d) 18%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, #1b1b22 0%, #101014 100%);
  display: grid; place-items: center;
}
.shot-thumb img, .shot-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb .ph {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); border: 1px dashed var(--line-2); border-radius: 999px; padding: 5px 12px;
}
.shot-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(0,0,0,0.55); border: 1px solid var(--c, var(--line-2)); color: var(--c, var(--text));
  border-radius: 999px; padding: 3px 9px; backdrop-filter: blur(4px);
}
.shot-body { padding: 16px 18px 18px; }
.shot-body h3 { font-size: 16.5px; margin: 0 0 6px; font-weight: 600; }
.shot-body p { font-size: 14.5px; color: var(--text); margin: 0 0 10px; }
.shot-body .meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.shot.soon { border-style: dashed; }
.shot.soon .shot-body h3 { color: var(--text); }

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* ============ index grids (capabilities / resources) ============ */
.idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.idx.two { grid-template-columns: repeat(2, 1fr); }
.idx-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px;
  border-top: 2px solid var(--c, var(--brand)); display: block; color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.idx-card:hover { transform: translateY(-2px); border-color: var(--line-2); border-top-color: var(--c, var(--brand)); text-decoration: none; }
.idx-card .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--brand)); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.idx-card h3 { font-size: 17.5px; margin: 0 0 8px; }
.idx-card p { font-size: 15px; color: var(--text); margin: 0; }

/* ============ pricing ============ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: start; }
.tier { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; }
.tier.feature { border-color: var(--brand); }
.tier .tname { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.tier.feature .tname { color: var(--brand); }
.tier .price { font-size: 34px; color: var(--text-hi); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.tier .price span { font-size: 15px; color: var(--text-dim); font-weight: 400; letter-spacing: 0; }
.tier .tdesc { font-size: 14.5px; color: var(--text-dim); margin: 0 0 20px; min-height: 42px; }
.tier ul { list-style: none; margin: 0 0 22px; padding: 0; }
.tier li { font-size: 15px; color: var(--text); padding: 7px 0 7px 22px; position: relative; }
.tier li::before { content: "+"; position: absolute; left: 0; top: 7px; font-family: var(--mono); color: var(--brand); font-size: 14px; }
.tier .btn { width: 100%; font-size: 14px; padding: 12px 20px; }

/* ============ FAQ ============ */
/* capped independently of --maxw: a question stretched to 1240px is unreadable */
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-size: 17px; color: var(--text-hi);
  position: relative; list-style: none; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 18px;
  font-family: var(--mono); font-size: 20px; color: var(--brand); transition: transform .15s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--brand); }
.faq .a { padding: 0 40px 22px 0; font-size: 15.5px; color: var(--text); max-width: 88ch; }
.faq .a p { margin: 0 0 12px; }
.faq .a p:last-child { margin-bottom: 0; }

/* ============ prose (manifesto, docs) ============ */
.prose { max-width: 76ch; }
.prose p { font-size: 17.5px; margin: 0 0 22px; }
.prose h2 { margin-top: 52px; font-size: clamp(23px, 3vw, 30px); }
.prose h3 { font-size: 19px; margin: 36px 0 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 22px; }
.prose li { margin-bottom: 10px; }
.prose blockquote {
  margin: 32px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--brand);
  font-size: 19px; color: var(--text-hi);
}
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.prose .lead { font-size: 20px; color: var(--text-hi); }

/* ============ CTA band ============ */
.ctaband { padding-top: 40px; padding-bottom: 100px; }
.cta-box {
  background: linear-gradient(180deg, #18181e 0%, #131318 100%);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 52px 44px; text-align: center;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
  max-width: 940px; margin: 0 auto;   /* a centred panel at full 1240 reads as a banner */
}
.cta-box h2 { margin-bottom: 10px; }
.cta-box .lede { margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.team-ask { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.team-ask h3 { font-size: 18px; margin: 0 0 6px; }
.team-ask p { font-size: 15px; color: var(--text-dim); margin: 0 auto 22px; max-width: 52ch; }

/* ============ forms ============ */
form.enquiry { display: flex; gap: 12px; justify-content: center; max-width: 520px; margin: 0 auto; flex-wrap: wrap; }
form.enquiry input[type=email] {
  flex: 1 1 280px; min-width: 0; font-family: var(--mono); font-size: 15px;
  padding: 14px 18px; border-radius: 999px; background: #0e0e12; color: var(--text-hi);
  border: 1px solid var(--line-2); outline: none;
}
form.enquiry input[type=email]:focus { border-color: var(--brand); }
form.enquiry input[type=email]::placeholder { color: var(--text-dim); }
.form-msg { font-family: var(--mono); font-size: 14px; margin-top: 18px; min-height: 20px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }
.form-fine { font-size: 13px; color: var(--text-dim); margin-top: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* visually hidden but read by screen readers — NOT the honeypot, don't delete */
.vh { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ footer ============ */
footer.site { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 52px 0 34px; margin-top: 20px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
.foot-col h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 14px; font-weight: 600; }
.foot-col a { display: block; font-size: 14.5px; color: var(--text); padding: 5px 0; }
.foot-col a:hover { color: var(--brand); text-decoration: none; }
.foot-blurb { font-size: 14.5px; color: var(--text-dim); max-width: 30ch; margin: 12px 0 0; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); }
.foot-bottom .muted { font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.acronym { font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.acronym b { color: var(--brand); }

/* ============ responsive ============ */
@media (max-width: 980px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-block; margin-left: auto; }
  header.nav.open .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 12px; right: 12px; z-index: 30;
    background: #17171d; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9); max-height: 74vh; overflow-y: auto;
  }
  header.nav.open .nav-item { width: 100%; }
  header.nav.open .nav-auth { width: 100%; margin: 8px 0 2px; gap: 8px; }
  header.nav.open .nav-auth a { flex: 1 1 0; text-align: center; }
  header.nav.open .nav-btn { width: 100%; justify-content: space-between; }
  header.nav.open .nav-pop, header.nav.open .nav-pop.wide {
    position: static; min-width: 0; box-shadow: none; border: 0; border-left: 1px solid var(--line);
    border-radius: 0; margin: 2px 0 8px 12px; padding: 0 0 0 8px; grid-template-columns: 1fr;
  }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 860px) {
  .modes, .doors, .recipe-grid, .recipe-grid.three, .tiers, .idx, .idx.two, .ba { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .pillars, .pillars.two, .split, .whatis, .whys { grid-template-columns: 1fr; }
  .whatis { gap: 36px; }
  .tablist { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tablist::-webkit-scrollbar { display: none; }
  section.wrap { padding: 54px 22px 66px; }
  .pagehead { padding: 34px 22px 4px; }
  .ctaband { padding-bottom: 76px; }
  .hero { padding: 52px 22px 0; }
  .demo { margin-top: 50px; }
  .doors { margin-top: 44px; }
  .cta-box { padding: 34px 22px; }
  .benefit { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .foot-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabpanel.is-active { animation: none; }
  .door:hover, .idx-card:hover { transform: none; }
}

/* ── cookie consent bar ───────────────────────────────────────────
   Bottom-anchored rather than a centred modal on purpose: a modal blocks the
   page and trains people to click whatever dismisses it fastest, which is not
   consent in any meaningful sense. This is readable, ignorable, and both
   buttons are equally reachable — a "decline" that is harder to find than
   "accept" is not a free choice under GDPR. */
.cookiebar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}
.cookiebar p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--text); }
.cookiebar a { color: var(--brand); }
.cookiebar-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.cookiebar .btn-sm { padding: 8px 16px; font-size: 13px; }

@media (max-width: 560px) {
  .cookiebar { gap: 12px; }
  .cookiebar-btns { width: 100%; }
  .cookiebar-btns .btn { flex: 1; }
}

/* The footer's cookie-settings control. A <button> styled as a link: it acts,
   it does not navigate. Inherits the footer's muted tone so it reads as fine
   print, not as a call to action. */
.foot-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.foot-link:hover { color: var(--text); }