/* ==========================================================================
   Nueform site-7 — Living Artifacts in the "Flow" skin (wisprflow.ai mood)
   Loaded last. Butter-cream world, EB Garamond display, Figtree UI, ink
   borders, lavender pills, black rounded ribbon sections. Functionality and
   the production render cards are untouched — this is feel and mood only.
   Reference recipe (measured on wisprflow.ai): bg #FFFFEB · ink #1A1A1A ·
   EB Garamond 400 @ -0.05em · Figtree UI · lavender #F0D7FF + 2px ink border,
   radius 12 · black rounded sections.
   ========================================================================== */

:root {
  --bg: #ffffeb;
  --bg-2: #f8f8e0;
  --panel: #ffffff;
  --panel-2: #fbfbf1;
  --line: rgba(26, 26, 26, 0.14);
  --line-strong: rgba(26, 26, 26, 0.55);
  --text: #1a1a1a;
  --dim: rgba(26, 26, 26, 0.66);
  --faint: rgba(26, 26, 26, 0.44);

  --paper: #ffffff;
  --paper-2: #f5f5e4;
  --ink: #1a1a1a;
  --ink-dim: rgba(26, 26, 26, 0.66);
  --ink-faint: rgba(26, 26, 26, 0.44);
  --line-ink: rgba(26, 26, 26, 0.16);

  /* violet-ink accent (lavender family, AA on cream); lavender is the fill */
  --accent: #7c5cbf;
  --accent-up: #8d6fd0;
  --accent-ink: #6a4caa;
  --accent-soft: rgba(124, 92, 191, 0.12);
  --lav: #f0d7ff;

  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-serif: "EB Garamond", Georgia, serif;
  /* mono retired: kickers/labels/captions now use the sans UI font */
  --font-mono: var(--font-body);

  --rad: 14px;
  --rad-lg: 20px;
  --shadow-1: 0 2px 8px rgba(26, 26, 26, 0.06);
  --shadow-2: 0 16px 44px -14px rgba(26, 26, 26, 0.16);
  --shadow-3: 0 34px 90px -26px rgba(26, 26, 26, 0.22);
}

::selection { background: var(--lav); color: var(--ink); }

/* ---------- Type: Garamond statements, Figtree everything else ---------- */
.h1, .h2, .h3, .type-wall, .foot-close {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.045em;
}
.h1 { font-size: clamp(3.2rem, 8.6vw, 7rem); line-height: 0.96; }
.h2 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
/* brand-orange emphasis: title closing full stops + select phrases (same accent used across the UI) */
.h1 .fs, .h2 .fs, .type-wall .fs { color: var(--accent-warm); }
.h1 .serif, .type-wall .serif { font-style: italic; font-weight: 400; color: var(--ink); }
/* kicker chip above the headline — faded orange fill + orange stroke (matches the old B2B badge) */
.hero-kicker {
  justify-self: center;
  font-family: "Gloria Hallelujah", "Comic Sans MS", cursive;
  font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.05; letter-spacing: 0;
  color: var(--accent-ink);
  transform: rotate(-3deg);
}
.hero-sub { gap: 20px; }
.type-wall em, .foot-close em { color: var(--accent-ink); font-style: italic; }
.layer-body h3, .ship-card h3, .engage h3, .alt-head .label, .out-name { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ---------- Buttons: chunky pills, ink borders, lavender primary ---------- */
.btn {
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 15px 26px;
  border-width: 2px;
}
.btn-primary { background: var(--lav); color: var(--ink); border: 2px solid var(--ink); }
.btn-primary:hover { background: #e7c6ff; transform: translateY(-1px); }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: rgba(26, 26, 26, 0.05); border-color: var(--ink); }

/* ---------- Nav: the floating pill bar ---------- */
/* Give the fixed header a side gutter so the floating nav pill doesn't touch the
   screen edges below the wrap's max-width (iPad/iPhone). On desktop the pill's own
   margin:auto centering absorbs this, so its position is unchanged; below max-width
   it yields a 14px side gap matching the pill's 14px top margin (an even float). */
.nav, .nav.scrolled { background: transparent; backdrop-filter: none; border-bottom: none; padding-inline: 14px; }
.nav-in {
  background: #fffdf5;
  border: 2px solid var(--ink);
  border-radius: 16px;
  height: 60px;
  margin-top: 14px;
  padding: 0 7px 0 20px;
  box-shadow: var(--shadow-1);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.nav-links a { color: var(--ink); font-weight: 600; transition: color 0.4s ease; }
.nav-links a:hover { color: var(--accent-ink); }
.nav-logo { color: var(--ink); transition: color 0.4s ease; }
/* at the very top the pill sits a touch lighter than the page; once scrolled it blends into the cream */
.nav.scrolled .nav-in { background: var(--bg); }
/* the nav reads the section behind it (main.js toggles .on-dark) and cross-fades */
.nav.on-dark .nav-in { background: #1b1b16; border-color: rgba(255, 255, 235, 0.24); box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.55); }
.nav.on-dark .nav-logo { color: #fffef7; }
.nav.on-dark .nav-links a:not(.btn) { color: rgba(255, 255, 235, 0.82); }
.nav.on-dark .nav-links a:not(.btn):hover { color: #fffef7; }
/* the lavender button keeps its dark text; its ink border blends into the dark pill,
   so give it a light outline on dark (the dark-mode equivalent of its black outline) */
.nav.on-dark .btn-primary { border-color: rgba(255, 255, 235, 0.55); }
.nav-links .btn { padding: 10px 18px; }
.nav-brand span { font-family: var(--font-body); font-weight: 700; }

/* ---------- Material on cream ---------- */
.sec:not(.sec--paper)::after {
  background-image: linear-gradient(to right, rgba(26, 26, 26, 0.045) 1px, transparent 1px);
}
.glow { background: radial-gradient(closest-side, rgba(240, 215, 255, 0.55), transparent 70%); }
.hero-copy .h1, .hero-copy .strap { text-shadow: 0 2px 26px rgba(255, 255, 235, 0.95); }
.hero-copy .lead { text-shadow: 0 1px 16px rgba(255, 255, 235, 0.95); }

/* cards & panels: white, ink-bordered, soft */
.alt, .engage, .guard, .console-panel, .cal-panel, .entry,
.fit-col, .ship-card, .responsibility-matrix {
  border: 2px solid rgba(26, 26, 26, 0.75);
  box-shadow: var(--shadow-1);
}
.verdict .alt { background: var(--panel); border: 2px solid rgba(26, 26, 26, 0.75); }
.verdict .alt-icon { color: var(--accent-ink); background: var(--panel-2); border-color: var(--line); }
.verdict .alt-list li { color: var(--dim); }
.stamp { color: var(--accent-ink); border-color: var(--accent-ink); }

/* ---------- The black ribbon sections (wispr's signature) ---------- */
#why, #system, #proof, #thinking, #how, #book, footer {
  --text: #ffffeb;
  --dim: rgba(255, 255, 235, 0.68);
  --faint: rgba(255, 255, 235, 0.46);
  --line: rgba(255, 255, 235, 0.14);
  --line-strong: rgba(255, 255, 235, 0.3);
  --panel: #242420;
  --panel-2: #2c2c27;
  background: #161613;
  color: var(--text);
}
#why, #system, #rules, #proof, #thinking, #how, #book {
  border-radius: 36px;
  margin: 18px 14px;
}
/* testimonial on dark: cream quote + attribution */
#proof .testi-quote { color: var(--dim); }
#proof .testi-name { color: var(--text); }
#proof .testi-role { color: var(--faint); }
#how .engage, #book .cal-panel { border-color: rgba(255, 255, 235, 0.35); box-shadow: none; }
#how .responsibility-matrix { border-color: rgba(255, 255, 235, 0.35); box-shadow: none; }
#how .btn-primary, #book .btn-primary { border-color: var(--lav); }
#book .cal-panel a.mail { color: var(--text); text-decoration-color: var(--lav); }
/* #system dark prototype: crisp card edges + bright orange number on dark */
#system .layer-card { border-color: rgba(255, 255, 235, 0.16); box-shadow: none; }
#system .layer-body .label--accent { color: var(--accent-warm-bright); }
/* 'the fix' is a light section (the problem sits in the dark, the fix comes into the light) */
#rules { background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.50) 22%, rgba(255, 255, 255, 0.85) 82%); box-shadow: 0 34px 90px -26px rgba(26, 26, 26, 0.08); }
#rules .guard { background: none; border: none; box-shadow: none; gap: clamp(14px, 1.8vw, 20px); }
#rules .g-off .render-scale, #rules .g-on .render-scale { border: 1px solid rgba(26, 26, 26, 0.14); }
#rules .gate-line--l { background: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.28)); }
#rules .gate-line--r { background: linear-gradient(90deg, rgba(26, 26, 26, 0.28), transparent); }
/* #why (problem) dark: card titles + borders read on the ribbon */
#why .alt-head .label { color: var(--text); }
#why .alt { border-color: rgba(255, 255, 235, 0.16); box-shadow: none; }
#why .stamp { color: var(--lav); border-color: rgba(240, 215, 255, 0.5); background: rgba(240, 215, 255, 0.08); }


/* booking card: content is short, so trim the dead space under the panel */
#book { padding-bottom: clamp(56px, 7vw, 84px); }

/* FAQ questions match the card-title treatment (22px / 500) */
.faq summary { font-size: 1.375rem; font-weight: 500; }

/* unify the remaining card-title peers to the same 22px / 500 tier */
.fit-col h3 { font-size: 1.375rem; font-weight: 500; }
.engage h3 { font-size: 1.375rem; font-weight: 500; }
/* fit-section closing line: lighter weight */
.fit-close { font-weight: 400; }

/* BladeStack testimonial band (client quote) */
.testimonial { text-align: center; }
.testi-logo { display: block; width: auto; height: clamp(21px, 2.5vw, 27px); margin: 0 auto 40px; }
.testi-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 20px auto 30px;
}
.testi-quote::before, .testi-quote::after { content: none; }
.testi-by { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.testi-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.testi-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint-on-light); }

/* operator: label the logo strip as brand work + a link to the portfolio */
.op-logos-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint-on-light); margin-bottom: 14px; }
/* operator CTAs: primary "Book a demo" + secondary ghost "View portfolio" */
.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.op-actions .btn { font-size: 14px; }
.op-portfolio.btn-ghost { border-color: var(--ink); }
.op-portfolio.btn-ghost:hover { border-color: var(--ink); }

/* operator quote boxed in a card rectangle */
.op-copy blockquote {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line-on-light);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(19, 19, 18, 0.05);
}
footer { border-top: none; margin: 18px 14px; border-radius: 36px; background: #0d0d0b; }
.foot-inner { padding-bottom: 44px; }   /* breathing room above the rounded card's bottom edge */
.foot-mark {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em;
  background: linear-gradient(180deg, rgba(255, 255, 235, 0.35), rgba(255, 255, 235, 0.05));
  -webkit-background-clip: text; background-clip: text;
}
/* footer logo: small logotype stacked under the nav links */
.foot-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.foot-logo { display: block; width: 128px; height: auto; color: var(--text); } /* cream letters; the "o" keeps its gradient */
.foot-grid:has(.foot-logo) { padding-bottom: 14px; }   /* tighten the gap under the logo */
.foot-close { font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.1; }

/* status / hud / boot on cream */
.status-row .live { color: #1e7d50; }
.status-row .live::before { background: #1e7d50; box-shadow: 0 0 0 0 rgba(30, 125, 80, 0.4); }
.act-kicker { color: var(--accent-ink); }
.eyebrow::before { display: none; }   /* drop the dash next to eyebrows */
.page-tag-v2 { color: #1e7d50; border-color: rgba(30, 125, 80, 0.4); }
.page-tag-v2::before { background: #1e7d50; }


/* marquee + strip on cream */
.mq { background: var(--bg-2); }
.mq-label { background: var(--bg-2); color: var(--accent-ink); }
.mq-cap b { color: var(--ink); }

/* guard toggle greens stay; verdict chips inherit */
.guard:has(#guardrails:checked) .guard-toggle .track { background: rgba(30, 125, 80, 0.16); border-color: #1e7d50; }
.guard:has(#guardrails:checked) .guard-toggle .track::after { background: #1e7d50; }


/* ==========================================================================
   Improvement pass (1–7, 2026-07-08)
   ========================================================================== */

/* --- 1 · Layers section: white ink-bordered cards, structured visuals --- */
.layer-grid { gap: 18px; }
.layer-card {
  background: var(--panel);
  border: 2px solid rgba(26, 26, 26, 0.75);
  border-radius: var(--rad-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.layer-card .card-visual {
  background: #f7f7e9;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 26px; min-height: 240px;
}
.layer-card .layer-body { padding: 22px 26px 28px; }
.layer-body p { color: var(--dim); }
.label--accent { color: var(--accent-ink); }

/* the compile diagram: ink strokes + violet chips (it was drawn for dark) */
.compile-svg .cs-path { stroke: rgba(26, 26, 26, 0.4); fill: none; }
.compile-svg .cs-dot { fill: var(--accent-ink); }
.compile-svg .cs-node { stroke: var(--accent-ink); fill: rgba(240, 215, 255, 0.45); }
.compile-svg .cs-node-text { fill: var(--accent-ink); }
.compile-svg .cs-chip rect { stroke: rgba(26, 26, 26, 0.5); fill: #ffffff; }
.compile-svg .cs-chip text { fill: var(--ink); }
.compile-svg .cs-chip--accent rect { stroke: var(--accent-ink); fill: rgba(240, 215, 255, 0.5); }
.compile-svg .cs-chip--accent text { fill: var(--accent-ink); }

/* --- 2 · The marquee becomes wispr's black ribbon --- */
.mq {
  background: #161613;
  border-top: none; border-bottom: none;
  padding: 30px 0;
  /* top 20 + hero's fixed 24px bottom-padding = 44px above, matching the 44px below */
  margin: 20px 0 44px;
  box-shadow: var(--shadow-2);
  perspective: none;
}
.mq .mq-track { transform: none; }
.mq-track--back { display: none; }
.mq::after { background: linear-gradient(90deg, #161613, transparent 14%, transparent 86%, #161613); }
.mq-label { background: #161613; color: var(--lav); border-right: 1px solid rgba(255, 255, 235, 0.14); padding-right: 34px; }
.mq-cap { color: rgba(255, 255, 235, 0.5); }
.mq-cap b { color: #ffffeb; }
.mq-item .render-scale { box-shadow: 0 0 0 1px rgba(255, 255, 235, 0.18); }

/* promise ribbon: kinetic serif text with the icon mark as the divider */
.mq-track--promise { gap: clamp(26px, 3.2vw, 48px); }
.mq:hover .mq-track { animation-play-state: running; }   /* keep scrolling on hover */
.mq-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.3vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffeb;
  white-space: nowrap;
}
.mq-sep {
  flex: none;
  width: clamp(19px, 2.1vw, 29px);
  height: clamp(19px, 2.1vw, 29px);
  background: url("assets/icon.svg") center / contain no-repeat;
  transform: translateY(3px);   /* optical: sit the mark on the lowercase x-height, not the geometric center */
}

/* --- 3 · Operator portrait: ink frame --- */
.op-photo { border: 2px solid rgba(26, 26, 26, 0.75); aspect-ratio: 4 / 4.3; }
.op-photo img { height: 100%; object-fit: cover; object-position: center; filter: saturate(1.06) contrast(1.02); }  /* full colour (was grayscale 25%) */

/* --- 5 · legacy-dark leftovers --- */
.alt .alt-list li::before, .alt-list li::before {
  content: ""; /* clear the base rule's "–" dash so only the dot shows */
  width: 7px; height: 7px; min-width: 7px; border-radius: 50%;
  background: var(--accent-ink); opacity: 1; margin-top: 8px;
}
.step { background: var(--panel); border: 2px solid rgba(26, 26, 26, 0.75); box-shadow: var(--shadow-1); }
.step h3 { font-family: var(--font-display); letter-spacing: -0.01em; font-size: 1.375rem; font-weight: 500; }

/* pipeline: a connecting rail + station nodes turn the 5 steps into one production line */
.steps { position: relative; }
.step { position: relative; z-index: 1; }
.step-visual { position: relative; }
.step-visual::after { content: ""; position: absolute; left: 50%; bottom: -4.5px; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 0 3px #fff, 0 0 11px rgba(210, 48, 0, 0.5); z-index: 3; }
@media (min-width: 961px) {
  .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 154px; height: 1px; background: rgba(26, 26, 26, 0.14); z-index: 0; }
}

/* visual language, applied beyond the gate --------------------------------- */

/* 2a · render button gets the gate node's warm "system processing" glow */
.pv-render-btn { transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; }
/* preview avatar: Bladestack brandmark on a dark tile (not a "B") */
.li-mini-avatar--bs { background: #1a1a17; display: flex; align-items: center; justify-content: center; }
.li-mini-avatar--bs svg { width: 17px; height: auto; display: block; }

/* 2b · booking status → a green status pill, echoing the verdict badges */
.status-row .live { color: var(--ok); border: 1px solid rgba(53, 194, 110, 0.4); background: rgba(53, 194, 110, 0.1); border-radius: 999px; padding: 4px 11px 4px 10px; }
.status-row .live::before { background: var(--ok); box-shadow: 0 0 0 0 rgba(53, 194, 110, 0.45); }

/* 3 · promise-ribbon marks get a faint warm glow */
.mq-sep { filter: drop-shadow(0 0 6px rgba(255, 88, 32, 0.42)); }

/* 4 · FAQ: open-state accent + a soft reveal on the answer */
.faq summary { transition: color 0.2s ease; }
.faq details[open] summary { color: var(--accent-ink); }
.faq details[open] .a { animation: faq-reveal 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .faq details[open] .a { animation: none; } }
.layer-card h3 { font-weight: 500; }

/* --- 6 · mixed-tone statements (wispr's gray setup / ink-italic payoff) --- */
.h1 .tone, .h2 .tone, .type-wall .tone { color: rgba(26, 26, 26, 0.38); }
.h2 .swing, .type-wall .swing { font-style: italic; color: var(--ink); }
/* two-tone headings on dark sections: muted cream setup + full cream payoff */
#why .h2 .tone, #system .h2 .tone, #how .h2 .tone, #thinking .h2 .tone, #book .h2 .tone { color: rgba(255, 255, 235, 0.4); }
#why .h2 .swing, #system .h2 .swing, #how .h2 .swing, #thinking .h2 .swing, #book .h2 .swing { color: var(--text); }


/* hero: centered statement, wispr-style */
/* more breathing room around the headline (felt tight after the kicker was removed) */
.hero { padding-top: clamp(176px, 13vw, 232px); padding-bottom: 24px; }
/* let the app-mock's drop shadow fade naturally instead of being clipped into a hard
   line at the hero's bottom edge; keep horizontal clip to prevent sideways scroll */
.hero { overflow-y: visible; }
.hero-copy { max-width: 940px; margin: 0 auto; text-align: center; gap: clamp(26px, 2.6vw, 32px); }
.hero-badge {
  display: inline-flex; align-items: center; justify-self: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-warm);
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(210, 48, 0, 0.28);
  background: rgba(210, 48, 0, 0.06);
  margin-bottom: 22px;
}
.hero-copy .h1 { font-size: clamp(3.2rem, 8vw, 6.2rem); }
.hero-copy .eyebrow { justify-content: center; }
.hero-copy .eyebrow::before { display: none; }
.hero-copy .hero-eyebrow { justify-self: center; margin-bottom: 0; margin-top: clamp(-8px, -0.6vw, -4px); }
.hero-copy .lead { margin: 0 auto; max-width: 840px; }
.hero .hero-cta { justify-content: center; }
.hero .status-row { justify-content: center; }
/* keep the reassurance line tucked directly under the CTA (one block), not floated
   down by the hero-copy grid gap */
.hero-cta-wrap { display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 14px); }
.hero-trust {
  margin: 0 auto; text-align: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--faint-on-light);
}

/* Mobile hero: keep the live-studio preview short and lead with the finished post.
   On phones the studio stacks, and the deep config panels (Image copy, Design Specs,
   Design Style) push the rendered output down under two screens of form fields. Hide
   them, and compact the three platform pills into a single icon row, so the flow reads:
   platforms -> the caption it writes -> the finished post. Matches where the studio
   stacks to a single column (components.css: .sw-body single-col at <=960px). */
@media (max-width: 960px) {
  #machine .sw-col--controls .sw-block:nth-of-type(n+2) { display: none; }
  #machine .sw-col--controls .sw-label--gap { display: none; }
  #machine .sw-platforms { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #machine .sw-pill { min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; }
  #machine .sw-pill .sw-formats { display: none; }
  #machine .sw-pill b { display: none; }
}

/* feature triptych (under the promise ribbon) — empty visual slots + captions */
.feat { padding: clamp(56px, 8vw, 100px) 0; }
.feat-eyebrow {
  text-align: center; margin: 0 0 clamp(30px, 4vw, 48px);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-warm);
}
/* #thinking: centred heading + checklist, then a wide product shot of the
   Library workspace below (rebuilt in markup so it stays crisp at any size). */
.thinking-head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 4.5vw, 56px); }
.thinking-head .lead { margin-left: auto; margin-right: auto; }
.thinking-head .why-eyebrow, .thinking-head .think-check { justify-self: center; }

/* #thinking laid out side by side: image LEFT, text RIGHT (stacks on mobile).
   The Library mock is designed wide; render it at its natural width and scale
   the WHOLE thing down (zoom) so the card grid keeps its proportions instead of
   reflowing into a cramped, over-tall column. max-height clips it to a window. */
#thinking .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(44px, 5vw, 84px); }
#thinking .thinking-head { order: 2; flex: 0 1 440px; text-align: left; justify-items: start; max-width: 440px; margin: 0; }
#thinking .thinking-head .lead { margin-left: 0; margin-right: 0; max-width: 42ch; }
#thinking .thinking-head .why-eyebrow { justify-self: start; }
#thinking .lib-stack { order: 1; position: relative; flex: 0 0 auto; }
/* a tilted duplicate window peeking out behind the mock, for depth */
#thinking .lib-stack::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 16px; border: 1px solid var(--line-ink);
  background: linear-gradient(#26261f 0, #26261f 30px, #1b1b14 30px);
  box-shadow: 0 26px 64px -26px rgba(0, 0, 0, 0.6);
  transform: rotate(-5deg) translate(-16px, 10px);
  transform-origin: center;
}
#thinking .lib-shot { position: relative; z-index: 1; width: 1178px; max-width: none; max-height: 1010px; zoom: 0.45; margin: 0; }
@media (max-width: 900px) {
  #thinking .wrap { flex-direction: column; gap: clamp(28px, 5vw, 44px); }
  #thinking .thinking-head { order: 0; flex-basis: auto; max-width: 760px; text-align: center; justify-items: center; }
  #thinking .thinking-head .lead { margin-left: auto; margin-right: auto; }
  #thinking .thinking-head .why-eyebrow { justify-self: center; }
  #thinking .lib-stack { flex-basis: auto; width: 100%; }
  #thinking .lib-stack::before { display: none; }
  #thinking .lib-shot { width: 100%; max-height: none; zoom: 1; }
}

/* ---- eyebrows write in letter-by-letter as they scroll into view (JS splits into .ltr spans) ---- */
.why-eyebrow-txt .ltr { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  .why-eyebrow-txt.nf-write .ltr { opacity: 0; transform: translateY(0.2em) rotate(-5deg); }
  .why-eyebrow-txt.nf-write.is-writing .ltr { animation: nf-ltr-in 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; animation-delay: calc(var(--i) * 0.045s); }
}
@keyframes nf-ltr-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
.think-check {
  list-style: none; margin: clamp(12px, 1.8vw, 20px) auto 0; padding: 0;
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
}
.think-check li {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--text); line-height: 1.3;
}
.think-check li::before {
  content: ""; flex: none; width: 23px; height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 40'%3E%3Cpath d='M2 20 C6 24 11 29 15 31 C19 26 27 14 43 2 C41 6 31 18 17 35 C15.5 36.2 14 35.6 13 34 C9 29 4 24 2 22 Z' fill='%23ff5820'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 560px) { .think-check { flex-direction: column; align-items: center; } }

/* ---- Library product shot ---- */
.lib-shot {
  /* break out of the section column to span wider against the viewport,
     centered with symmetric % margins (scrollbar-safe — no vw-based translate drift) */
  width: min(1320px, 92vw); max-width: none;
  margin-inline: calc((100% - min(1320px, 92vw)) / 2);
  border: 1px solid var(--line-ink); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-3);
  /* the real product's font system (matches the hero Studio window):
     Manrope primary, Inter Tight for the small uppercase chrome labels */
  font-family: "Manrope", system-ui, sans-serif;
}
.lib-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: #f6f5ee; border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.lib-chrome .lib-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(26, 26, 26, 0.16); }
.lib-url { margin-left: 8px; font-size: 11px; color: var(--ink-faint); }
.lib-frame { display: grid; grid-template-columns: clamp(150px, 20%, 196px) 1fr; }

/* sidebar */
.lib-side { display: flex; flex-direction: column; border-right: 1px solid var(--line-on-light); background: #fff; padding: 18px 14px 14px; }
.lib-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.lib-logo { position: relative; width: 22px; height: 16px; flex: none; }
.lib-logo::before, .lib-logo::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 3.2px; border-radius: 2px; background: var(--accent-warm, #d23000);
}
.lib-logo::before { top: 1px; box-shadow: 0 5.4px 0 -0.2px var(--accent-warm, #d23000); }
.lib-logo::after { top: 6.4px; left: 4px; width: 15px; background: var(--accent-warm-bright, #ff5820); }
.lib-brandname { font-size: 14px; font-weight: 700; color: var(--ink); margin-right: auto; letter-spacing: -0.01em; }
.lib-gear { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid rgba(26, 26, 26, 0.3); flex: none; }
.lib-home {
  display: flex; align-items: center; gap: 9px;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink); padding: 8px 10px; border-radius: 7px; margin-bottom: 6px;
}
.lib-group { margin-bottom: 14px; }
.lib-glabel {
  display: block; font-family: "Inter Tight", system-ui, sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 10px; margin-bottom: 7px;
}
.lib-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.lib-lbl { flex: 1; min-width: 0; }
.lib-ico { width: 16px; height: 16px; flex: none; opacity: 0.82; }
.lib-item b { font-family: "Manrope", system-ui, sans-serif; font-weight: 500; font-size: 10px; color: var(--ink-faint); }
.lib-item.is-active { background: rgba(210, 48, 0, 0.09); color: var(--accent-warm, #d23000); font-weight: 600; }
.lib-item.is-active .lib-ico { opacity: 1; }
.lib-item.is-active b { color: var(--accent-warm, #d23000); }
.lib-item.is-dim { color: var(--ink-faint); }
.lib-soon {
  margin-left: auto; font-family: "Inter Tight", system-ui, sans-serif; font-weight: 700;
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-style: normal; color: var(--ink-faint); border: 1px solid rgba(26, 26, 26, 0.16); border-radius: 5px; padding: 1px 5px;
}

/* main */
.lib-main { padding: clamp(16px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); min-width: 0; background: #fafafb; }
.lib-h { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.lib-h-ico {
  width: 26px; height: 26px; border-radius: 7px; background: rgba(210, 48, 0, 0.12); flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d23000' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.5-7-9.5A3.5 3.5 0 0 1 12 7a3.5 3.5 0 0 1 7 3.5C19 15.5 12 20 12 20z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.lib-h-t { font-family: "Manrope", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; font-size: clamp(20px, 2.4vw, 27px); color: var(--ink); }
.lib-tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-size: 12.5px; border-bottom: 1px solid rgba(26, 26, 26, 0.1); padding-bottom: 10px; margin-bottom: 16px; }
.lib-tabset { display: flex; gap: 18px; align-items: center; }
.lib-tabset span { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); white-space: nowrap; }
.lib-tabset .is-on { color: var(--ink); position: relative; }
.lib-tabset .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--ink); }
.lib-tools { display: flex; align-items: center; gap: 9px; }
.lib-search {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint);
  border: 1px solid rgba(26, 26, 26, 0.14); border-radius: 9px; padding: 7px 12px;
}
.lib-search svg { width: 14px; height: 14px; flex: none; opacity: 0.7; }
.lib-view {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid rgba(26, 26, 26, 0.14); border-radius: 8px; color: var(--ink-faint);
}
.lib-view svg { width: 15px; height: 15px; }
.lib-view.is-on { background: rgba(26, 26, 26, 0.06); color: var(--ink); }
.lib-tdot { width: 7px; height: 7px; border-radius: 50%; }
.d-studio { background: #3b6fd4; }
.d-review { background: #e0a020; }
.d-appr { background: var(--ok, #35c26e); }
.lib-attn { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.lib-attn b { font-weight: 500; color: var(--ink-faint); margin-left: 7px; }

.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lib-card { display: flex; gap: 12px; padding: 14px; border-radius: 12px; }
.lib-card.c-studio { background: #eaf0fb; }
.lib-card.c-review { background: #fefce8; }
.lib-card.c-saved { background: #fff; border: 1px solid rgba(26, 26, 26, 0.1); }
.lib-card.c-approved { background: #f0fdf4; }
.lib-thumb {
  width: 58px; height: 58px; flex: none; border-radius: 9px;
  background: linear-gradient(150deg, #2a2a28, #141412);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.lib-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lib-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lib-badge { font-size: 10px; border-radius: 6px; padding: 3px 9px; font-weight: 500; }
.b-studio { background: #d7e1f6; color: #2f5fbf; }
.b-review { background: #f4e4b2; color: #8a5e10; }
.b-saved { background: #efece4; color: #6f695c; }
.b-approved { background: #d3ecd3; color: #2f7d3f; }
.lib-ago { font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.lib-cap { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: #26241f; margin: 0 0 12px; }
.lib-open {
  align-self: flex-end; margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink); background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 26, 26, 0.14); border-radius: 8px; padding: 6px 11px;
}
.lib-card.c-saved .lib-open { background: #faf9f4; }
.lib-open em { font-style: normal; color: var(--ink-dim); }

/* ============================================================
   Workspace Library mock — DARK MODE. The #thinking section is dark, so the
   product shot shows the app's dark theme (matches the every-week chat, and
   avoids a harsh white panel on black). Scoped to #thinking so the hero Studio
   stays light. Remapping the on-light tokens flips most text + borders; the rest
   are hardcoded light surfaces + pills overridden below.
   ============================================================ */
#thinking .lib-shot {
  --ink: #f4f4ea;
  --ink-dim: rgba(244, 244, 234, 0.62);
  --ink-faint: rgba(244, 244, 234, 0.40);
  --ink-on-light: #f4f4ea;
  --muted-on-light: rgba(244, 244, 234, 0.70);
  --faint-on-light: rgba(244, 244, 234, 0.44);
  --line-on-light: rgba(255, 255, 255, 0.10);
  --line-ink: rgba(255, 255, 255, 0.10);
  background: #1b1b16;
  border-color: rgba(255, 255, 255, 0.12);
}
#thinking .lib-chrome { background: #24241f; border-bottom-color: rgba(255, 255, 255, 0.08); }
#thinking .lib-chrome .lib-dot { background: rgba(255, 255, 255, 0.20); }
#thinking .lib-side { background: #16160f; border-right-color: rgba(255, 255, 255, 0.08); }
#thinking .lib-side .sb-item.is-active { background: rgba(255, 88, 32, 0.16); }
/* nav count badges: smaller + lighter so they sit quietly next to the labels */
#thinking .lib-side .sb-badge { font-size: 10.5px; font-weight: 400; }
#thinking .lib-main { background: #1e1e18; }
#thinking .lib-tabs { border-bottom-color: rgba(255, 255, 255, 0.12); }
#thinking .lib-search, #thinking .lib-view { border-color: rgba(255, 255, 255, 0.14); }
#thinking .lib-view.is-on { background: rgba(255, 255, 255, 0.09); }
#thinking .lib-soon { border-color: rgba(255, 255, 255, 0.18); }
/* content cards: dark tints of the status colours */
#thinking .lib-card.c-studio { background: rgba(59, 111, 212, 0.15); }
#thinking .lib-card.c-review { background: rgba(224, 160, 32, 0.12); }
#thinking .lib-card.c-saved { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); }
#thinking .lib-card.c-approved { background: rgba(53, 194, 110, 0.12); }
#thinking .lib-cap { color: #f4f4ea; }
#thinking .lib-open { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #f4f4ea; }
#thinking .lib-card.c-saved .lib-open { background: rgba(255, 255, 255, 0.07); }
/* status pills: dark fill, brighter text */
#thinking .b-studio { background: rgba(59, 111, 212, 0.28); color: #a9c5ff; }
#thinking .b-review { background: rgba(224, 160, 32, 0.25); color: #f0c866; }
#thinking .b-saved { background: rgba(255, 255, 255, 0.10); color: rgba(244, 244, 234, 0.72); }
#thinking .b-approved { background: rgba(53, 194, 110, 0.25); color: #83dba0; }
/* flat image placeholder — drop the base gradient (its light-to-dark shading read as
   a 3D highlight/shadow) for a solid fill with a quiet flat edge. */
#thinking .lib-thumb { background: #26261f; border-color: rgba(255, 255, 255, 0.10); }

@media (max-width: 940px) {
  .lib-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-tools, .lib-url { display: none; }
}
@media (max-width: 520px) {
  .lib-frame { grid-template-columns: 128px 1fr; }
  .lib-brandname { font-size: 12px; }
  .lib-gear { display: none; }
}

/* big headline + subtitle, section intro above the triptych */
.feat-head { max-width: 1040px; margin: 0 auto clamp(48px, 6vw, 76px); text-align: center; }
.feat-h2 {
  margin: 20px auto 0; color: var(--ink);
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.03em;
}
.feat-h2 em { font-style: italic; font-weight: 400; color: var(--ink); }
.feat-sub {
  max-width: 64ch; margin: 18px auto 0; color: var(--ink-dim);
}
.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.feat-card { display: flex; flex-direction: column; }
.feat-slot {
  aspect-ratio: 16 / 10; width: 100%;
  position: relative;
  display: grid; place-items: center;
}
.feat-kicker {
  margin: 20px 0 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--accent-warm);
}
.feat-title {
  font-family: var(--font-body); font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
.feat-copy {
  margin-top: 9px; font-size: 0.98rem; line-height: 1.5;
  color: var(--ink-dim); max-width: 36ch;
}
@media (max-width: 820px) {
  .feat-grid { grid-template-columns: 1fr; gap: 30px; max-width: 480px; margin: 0 auto; }
  .feat-copy { max-width: none; }
}

/* card 01 · the source-picker, floating in 3D */
.feat-slot--ideas {
  position: relative;
  display: grid; place-items: center;
}
.ill3d {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center;
  perspective: 1000px; transform-style: flat;
}
.ill3d-glow { display: none; }
.ill-menu {
  position: relative; z-index: 2;
  justify-self: start; margin-left: 2%;
  width: 64%; max-width: 232px;
  background: #fff; border: 1px solid rgba(19, 19, 18, 0.1); border-radius: 14px;
  padding: 16px 15px 19px 24px;
  box-shadow: 0 32px 56px -14px rgba(19, 19, 18, 0.34), 0 4px 12px rgba(19, 19, 18, 0.07);
  transform: rotateX(8deg) rotateY(-17deg);
  transform-origin: center; transform-style: preserve-3d;
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-menu-t {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint-on-light); margin-bottom: 11px;
}
/* ============================================================
   CARD THEME: Mode card = dark LIQUID glass, Generate button = solid black.
   Solid-black values (to revert either card): background #141412;
   .ill-mode box-shadow 0 26px 46px -14px rgba(19,19,18,0.5);
   .ill-cta  box-shadow 0 22px 36px -8px rgba(19,19,18,0.46).
   Earlier (lighter) glass spec kept below for reference:

   .ill-mode {
     background: linear-gradient(150deg, rgba(78,80,90,0.46) 0%, rgba(26,26,31,0.5) 52%, rgba(12,12,16,0.58) 100%);
     backdrop-filter: blur(18px) saturate(180%) brightness(0.7);  (+ -webkit-)
     border: 1px solid rgba(255,255,255,0.14);
     box-shadow: 0 26px 46px -14px rgba(0,0,0,0.62),
                 inset 0 1px 0.5px rgba(255,255,255,0.42),
                 inset 1px 0 0.5px rgba(255,255,255,0.12),
                 inset 0 -16px 26px -18px rgba(0,0,0,0.72);
   }
   .ill-mode::before {
     content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
     background: linear-gradient(133deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.06) 15%, transparent 33%),
                 radial-gradient(130% 90% at 16% -8%, rgba(255,255,255,0.16), transparent 55%);
   }
   .ill-cta {
     background: linear-gradient(150deg, rgba(78,80,90,0.46) 0%, rgba(24,24,29,0.5) 55%, rgba(12,12,16,0.56) 100%);
     backdrop-filter: blur(14px) saturate(180%) brightness(0.7);  (+ -webkit-)
     border: 1px solid rgba(255,255,255,0.16);
     box-shadow: 0 22px 36px -8px rgba(0,0,0,0.5),
                 inset 0 1px 0.5px rgba(255,255,255,0.45),
                 inset 1px 0 0.5px rgba(255,255,255,0.12),
                 inset 0 -9px 16px -12px rgba(0,0,0,0.6);
   }
   .ill-cta::before {
     content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
     background: linear-gradient(133deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.07) 16%, transparent 38%);
   }
   ============================================================ */

/* second floating card — the mode selector, dark LIQUID glass, above the main card */
.ill-mode {
  position: absolute; z-index: 3;
  top: 27%; right: 8%;
  width: 52%; max-width: 190px;
  background:
    linear-gradient(150deg, rgba(38, 39, 45, 0.42) 0%, rgba(9, 9, 12, 0.46) 55%, rgba(2, 2, 4, 0.54) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(165%) brightness(0.4);
  backdrop-filter: blur(18px) saturate(165%) brightness(0.4);
  border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px;
  padding: 12px 12px 14px 18px;
  box-shadow:
    0 26px 46px -14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.38),
    inset 1px 0 0.5px rgba(255, 255, 255, 0.1),
    inset 0 -16px 26px -18px rgba(0, 0, 0, 0.68);
  transform: rotateX(8deg) rotateY(-17deg) translateZ(30px) scale(0.82);
  transform-origin: center; transform-style: preserve-3d;
  animation: ill-float-mode 7s ease-in-out infinite alternate;
}
.ill-mode::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(133deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 33%),
    radial-gradient(130% 90% at 16% -8%, rgba(255, 255, 255, 0.13), transparent 55%);
}
.ill-src--mode { gap: 11px; }
.ill-src--mode li { font-size: 11px; white-space: nowrap; }
.ill-mode .ill-menu-t { color: rgba(255, 255, 235, 0.42); }
.ill-mode .ill-src li { color: rgba(255, 255, 235, 0.55); }
.ill-mode .ill-src li.on { color: #fdfdf2; }
.ill-mode .ill-src li i { border-color: rgba(255, 255, 235, 0.3); }
.ill-mode .ill-src li.on i {
  border-color: var(--accent-warm-bright);
  background: radial-gradient(circle, var(--accent-warm-bright) 0 42%, #141412 48%);
  box-shadow: 0 0 8px rgba(255, 88, 32, 0.55);
}
@keyframes ill-float-mode {
  from { transform: rotateX(8deg) rotateY(-17deg) translateZ(30px) translateY(7px) scale(0.82); }
  to   { transform: rotateX(5deg) rotateY(-12deg) translateZ(30px) translateY(-3px) scale(0.82); }
}
.ill-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; transform-style: preserve-3d; }
.ill-src li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #6b6b64;
}
.ill-src li i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(19, 19, 18, 0.22);
}
.ill-src li.on {
  color: var(--ink);
  transform: translateZ(20px);
}
.ill-src li.on i {
  border-color: var(--accent-warm);
  background: radial-gradient(circle, var(--accent-warm) 0 42%, #fff 48%);
  box-shadow: 0 0 0 2px rgba(210, 48, 0, 0.13);
}
.ill-cta {
  position: absolute; z-index: 4; top: 17%; right: auto; left: calc(98% - min(52%, 190px));
  display: inline-flex; align-items: center; gap: 6px;
  background: #141412; color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  padding: 8px 12px; border-radius: 9px;
  box-shadow: 0 22px 36px -8px rgba(19, 19, 18, 0.46);
  transform: rotateX(8deg) rotateY(-17deg) translateZ(46px);
  animation: ill-float-cta 7s ease-in-out infinite alternate;
}
.ill-cta i { color: var(--accent-warm-bright); font-style: normal; }
@keyframes ill-float {
  from { transform: rotateX(8deg) rotateY(-17deg) translateY(5px); }
  to   { transform: rotateX(5deg) rotateY(-12deg) translateY(-6px); }
}
@keyframes ill-float-cta {
  from { transform: rotateX(8deg) rotateY(-17deg) translateZ(46px) translateY(-2px); }
  to   { transform: rotateX(5deg) rotateY(-12deg) translateZ(46px) translateY(-13px); }
}

/* ============================================================
   card 02 · "Rendered in your identity" — floating render composition:
   a branded post card (the output) + a Theme picker + orange Render button
   ============================================================ */
.feat-slot--render { position: relative; display: grid; place-items: center; }

/* light caption card (the write step) — to the right of the post */
.ill-caption {
  position: absolute; z-index: 3; right: 0; top: 24%;
  width: 44%; max-width: 152px;
  background: #fff; border: 1px solid var(--line-on-light); border-radius: 12px;
  padding: 11px 13px 12px;
  box-shadow: 0 22px 40px -16px rgba(19, 19, 18, 0.26);
  transform: rotateX(8deg) rotateY(-17deg);
  transform-origin: center;
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-cap-lines { display: flex; flex-direction: column; gap: 5px; margin: 9px 0 10px; }
.ill-cap-lines span { display: block; height: 4px; border-radius: 2px; background: rgba(19, 19, 18, 0.11); }
.ill-cap-lines span:nth-child(3) { width: 60%; }
.ill-cap-tags { font-family: var(--font-body); font-size: 9px; font-weight: 600; color: #2f6bc0; }

/* the rendered output card — the brand-identity payoff (star element) */
.ill-post {
  position: relative; z-index: 2;
  width: 40%; max-width: 138px; aspect-ratio: 4 / 5;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
  padding: 10px 10px 9px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 52px -16px rgba(0, 0, 0, 0.5);
  transform: rotateX(8deg) rotateY(-17deg);
  transform-origin: center;
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-post-top { display: flex; align-items: center; justify-content: space-between; }
.ill-post-stripes {
  width: 26px; height: 7px;
  background: repeating-linear-gradient(112deg, var(--accent-warm-bright) 0 2.5px, transparent 2.5px 5.5px);
}
.ill-post-mark {
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 6px; font-weight: 700;
  letter-spacing: 0.06em; color: #fff;
}
.ill-post-body { margin-top: auto; }
.ill-post-kicker {
  font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-warm-bright); margin-bottom: 5px;
}
.ill-post-head {
  font-family: "Inter Tight", system-ui, sans-serif; font-weight: 700; font-style: italic;
  font-size: 13.5px; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: #fdfdf2;
}
.ill-post-foot {
  margin-top: 8px; font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
}

/* theme picker card — light, upper-left */
.ill-themes {
  position: absolute; z-index: 1; left: 2%; top: 8%;
  width: 44%; max-width: 152px;
  background: #fff; border: 1px solid var(--line-on-light); border-radius: 12px;
  padding: 11px 12px 12px 16px;
  box-shadow: 0 22px 40px -16px rgba(19, 19, 18, 0.24);
  transform: rotateX(8deg) rotateY(-17deg) translateZ(-30px);
  transform-origin: center;
  animation: ill-float-themes 7s ease-in-out infinite alternate;
}
.ill-sw-row { display: flex; gap: 6px; margin-bottom: 9px; }
.ill-sw {
  position: relative; flex: none; width: 27px; height: 33px; border-radius: 5px;
  background: #20202a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ill-sw::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 9px; height: 2px; border-radius: 1px;
  background: var(--accent-warm-bright);
}
.ill-sw--1 { background: linear-gradient(158deg, #4a3320 0%, #17120c 100%); }
.ill-sw--2 { background: linear-gradient(158deg, #1c2634 0%, #0c0f15 100%); }
.ill-sw--3 { background: linear-gradient(158deg, #2b2b30 0%, #131315 100%); }
.ill-sw.on { box-shadow: 0 0 0 2px var(--accent-warm), 0 0 0 4px rgba(210, 48, 0, 0.16); }
.ill-sw.on::before {
  content: ""; position: absolute; bottom: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-warm); border: 1.5px solid #fff;
}
.ill-sw-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--ink); }

/* orange Render button — under the theme card, overlapping the post */
.ill-render-btn {
  position: absolute; z-index: 3; top: 70%; left: 20%; right: auto;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-warm); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  padding: 7px 12px; border-radius: 9px;
  box-shadow: 0 16px 28px -8px rgba(210, 48, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: rotateX(8deg) rotateY(-17deg);
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-render-btn i { font-style: normal; }
@keyframes ill-float-themes {
  from { transform: rotateX(8deg) rotateY(-17deg) translateZ(-30px) translateY(7px); }
  to   { transform: rotateX(5deg) rotateY(-12deg) translateZ(-30px) translateY(-3px); }
}

/* ============================================================
   card 03 · "Straight to your feed" — floating publish composition:
   an approved post card + a schedule calendar + platform badges + Publish
   ============================================================ */
.feat-slot--feed { position: relative; display: grid; place-items: center; }

/* approved post card — the star (grid anchor) */
.ill-approved {
  position: relative; z-index: 2;
  width: 52%; max-width: 188px;
  background: #fff; border: 1px solid var(--line-on-light); border-radius: 13px;
  padding: 12px 13px 13px;
  box-shadow: 0 30px 52px -16px rgba(19, 19, 18, 0.26);
  transform: rotateX(8deg) rotateY(-17deg);
  transform-origin: center;
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-appr-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--ink);
  margin-bottom: 10px;
}
.ill-appr-dot { width: 8px; height: 8px; border-radius: 50%; background: #35a35a; box-shadow: 0 0 6px rgba(53, 163, 90, 0.55); }
.ill-appr-row { display: flex; gap: 9px; align-items: center; }
.ill-appr-thumb {
  flex: none; width: 40px; height: 50px; border-radius: 6px;
  background: linear-gradient(158deg, #3a2a1c 0%, #14100b 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
}
.ill-appr-thumb::after {
  content: ""; position: absolute; top: 5px; left: 5px; width: 11px; height: 2px; border-radius: 1px;
  background: var(--accent-warm-bright);
}
.ill-appr-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.ill-appr-lines { display: flex; flex-direction: column; gap: 4px; }
.ill-appr-lines span { display: block; height: 4px; border-radius: 2px; background: rgba(19, 19, 18, 0.12); }
.ill-appr-lines span:nth-child(2) { width: 66%; }
.ill-appr-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 9px; font-weight: 600; color: #2f6bc0;
}
.ill-appr-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #35a35a; }
.ill-publish {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-warm); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 10px;
  padding: 6px 11px; border-radius: 8px;
  box-shadow: 0 10px 20px -8px rgba(210, 48, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ill-publish i { font-style: normal; }

/* schedule calendar card — behind, left */
.ill-cal {
  position: absolute; z-index: 1; left: 0; top: 6%;
  width: 42%; max-width: 146px;
  background: #fff; border: 1px solid var(--line-on-light); border-radius: 12px;
  padding: 11px 12px 12px;
  box-shadow: 0 22px 40px -16px rgba(19, 19, 18, 0.22);
  transform: rotateX(8deg) rotateY(-17deg) translateZ(-30px);
  transform-origin: center;
  animation: ill-float-themes 7s ease-in-out infinite alternate;
}
.ill-cal-head { margin-bottom: 9px; }
.ill-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ill-cal-grid span { aspect-ratio: 1; border-radius: 2.5px; background: rgba(19, 19, 18, 0.07); }
.ill-cal-grid span.on {
  background: var(--accent-warm);
  box-shadow: 0 0 7px rgba(210, 48, 0, 0.5);
}

/* platform badges — the feed, floating top-right */
.ill-feed {
  position: absolute; z-index: 3; top: 4%; right: 3%;
  display: flex; gap: 6px;
  transform: rotateX(8deg) rotateY(-17deg) translateZ(40px);
  animation: ill-float 7s ease-in-out infinite alternate;
}
.ill-plat {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  font-family: "Inter Tight", system-ui, sans-serif; font-weight: 700; font-size: 12px; color: #fff;
  box-shadow: 0 10px 20px -8px rgba(19, 19, 18, 0.4);
}
.ill-plat--in { background: #0a66c2; }
.ill-plat--x { background: #14100e; }
.ill-plat--ig { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); position: relative; }
.ill-plat--ig i { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 4px; }
.ill-plat--ig i::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border: 1.5px solid #fff; border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .ill-menu, .ill-cta, .ill-mode, .ill-post, .ill-themes, .ill-render-btn,
  .ill-caption, .ill-approved, .ill-cal, .ill-feed { animation: none; }
}

/* hero render: photo-post variant (a real BladeStack render, frame baked in) */
#sw-render { position: relative; }
.pv-render-photo { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; border-radius: 10px; overflow: hidden; background: #0d0d0f; }
.pv-render-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sw-render.is-photo.is-rendered .pv-render-photo { opacity: 1; }
/* keep the concept card fully hidden behind a photo — higher specificity than
   the .is-rendered opacity:1 rule so it doesn't flash through as the photo fades out */
#sw-render.is-photo.is-rendered .pv-render-out { opacity: 0; }

/* --- layers section, consistency pass (2026-07-08) ---
   The four instrument minis join the light chrome — everywhere else on this
   site the product UI is light (hero machine, Studio); dark minis were
   leftovers from the dark build. Wells become drafting grid-paper; the card
   numerals adopt the anatomy section's kicker pattern. */
.layer-card .strat-mini,
.layer-card .tenant,
.layer-card .queue-mini {
  background: #fffdf5;
  border: 1px solid rgba(26, 26, 26, 0.5);
  box-shadow: 0 10px 24px -14px rgba(26, 26, 26, 0.22);
}
.layer-card .strat-tabs { border-bottom-color: rgba(26, 26, 26, 0.14); }
.layer-card .strat-tabs span { color: rgba(26, 26, 26, 0.42); }
.layer-card .strat-tabs span.is-active { color: var(--ink); }
.layer-card .strat-label { color: rgba(26, 26, 26, 0.52); }
.layer-card .strat-bar { background: rgba(26, 26, 26, 0.12); }
.layer-card .strat-chips i { background: rgba(240, 215, 255, 0.65); border-color: rgba(106, 76, 170, 0.35); }
.layer-card .strat-chips--banned i { background: rgba(217, 68, 68, 0.14); border-color: rgba(217, 68, 68, 0.4); }
.layer-card .tenant-id b { color: var(--ink); }
.layer-card .tenant-id i { color: rgba(26, 26, 26, 0.5); }
.layer-card .tenant-bars i { background: rgba(26, 26, 26, 0.12); }
.layer-card .queue-thumb { background: #f0efe2; border-color: rgba(26, 26, 26, 0.2); }
.layer-card .queue-title { background: rgba(26, 26, 26, 0.14); }
.layer-card .queue-review { color: var(--accent-ink); }
.layer-card .pill { color: rgba(26, 26, 26, 0.55); border-color: rgba(26, 26, 26, 0.25); }
.layer-card .pill--amber { color: #8a6a1c; border-color: rgba(184, 142, 43, 0.5); background: rgba(232, 176, 75, 0.16); }
.layer-card .pill--green { color: #1e7d50; border-color: rgba(30, 125, 80, 0.45); background: rgba(53, 194, 110, 0.14); }
.layer-card .pill-sep { color: rgba(26, 26, 26, 0.35); }

/* drafting grid-paper wells (ties to the hero's pencil grid) */
.layer-card .card-visual {
  background-color: #fbfbee;
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 26, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.layer-card .compile-svg { width: 100%; max-width: 400px; }

/* numerals echo the anatomy labels: — 01 · mono violet */
.layer-body .label--accent {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink);
}
.layer-body .label--accent::before { display: none; }   /* drop the accent dash */


/* ==========================================================================
   site-8 · one-page collapse (2026-07-08)
   The five-step pipeline joins the light chrome: white ink-bordered cards,
   drafting grid-paper wells, violet mono kickers — the exact treatment the
   layer grid got. The sv- minis were drawn for the dark build; every value
   below is the light equivalent from the layers pass.
   ========================================================================== */

.steps { gap: 16px; }
.step {
  padding: 0;
  border-radius: var(--rad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.step-visual {
  margin-top: 0;
  height: 152px;
  padding: 16px 14px;
  background-color: #fbfbee;
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 26, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  border-bottom: 1px solid var(--line);
}
.step-body { padding: 16px 18px 22px; }
.step-body .label--accent {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink);
}
.step-body .label--accent::before { display: none; }   /* drop the accent dash */
.step h3 { color: var(--ink); margin-top: 12px; margin-bottom: 8px; }
.step p { color: var(--dim); font-size: 0.875rem; line-height: 1.65; }

/* Orange as a system accent — the brand + process color: section kickers
   (eyebrows) and the machine's step/layer numbers, alongside the logo and the
   render output it already owns. Purple stays interaction/emphasis (CTAs,
   selected states, links, highlighted words). */
:root { --accent-warm: #d23000; --accent-warm-bright: #ff5820; }
.eyebrow, .sec--paper .eyebrow { color: var(--accent-warm); }
#system .eyebrow, #rules .eyebrow, #proof .eyebrow, #how .eyebrow, #book .eyebrow { color: var(--accent-warm-bright); }
.layer-body .label--accent, .step-body .label--accent { color: var(--accent-warm); }

/* sv- minis: light instruments */
.step .sv-card {
  background: #fffdf5;
  border: 1px solid rgba(26, 26, 26, 0.5);
  box-shadow: 0 10px 24px -14px rgba(26, 26, 26, 0.22);
}
.step .sv-title { color: var(--ink-dim); }
.step .sv-tag { color: #1e7d50; border-color: rgba(30, 125, 80, 0.4); background: rgba(30, 125, 80, 0.08); }
.step .sv-key { color: rgba(26, 26, 26, 0.52); }
.step .sv-bar { background: rgba(26, 26, 26, 0.12); }
.step .sv-idea-line { background: rgba(26, 26, 26, 0.18); }
.step .sv-idea-line--dim { background: rgba(26, 26, 26, 0.08); }
.step .sv-chip { color: rgba(26, 26, 26, 0.55); border-color: rgba(26, 26, 26, 0.3); }
.step .sv-chip--save { color: var(--accent-ink); border-color: rgba(106, 76, 170, 0.45); background: rgba(240, 215, 255, 0.5); }
.step .sv-render-frame { background: rgba(26, 26, 26, 0.05); border: 1px solid rgba(26, 26, 26, 0.3); }
.step .sv-render-btn { color: var(--ink); background: var(--lav); border: 1px solid var(--ink); }
.step .sv-render-note { color: var(--ink-faint); }
.step .sv-lines i { background: rgba(26, 26, 26, 0.12); }
.step .sv-btn { color: rgba(26, 26, 26, 0.6); border-color: rgba(26, 26, 26, 0.35); }
.step .sv-btn--approve { color: #1e7d50; border-color: rgba(30, 125, 80, 0.45); background: rgba(30, 125, 80, 0.08); }
.step .sv-day b { color: rgba(26, 26, 26, 0.45); }
.step .sv-slot { border-color: rgba(26, 26, 26, 0.28); }
.step .sv-slot.is-posted { background: rgba(26, 26, 26, 0.12); border: none; }
.step .sv-slot.is-next { background: rgba(240, 215, 255, 0.6); border: 1px solid rgba(106, 76, 170, 0.5); }

/* carousel format card: a real claim on the front slide */
.fmt-slide { background: #161613; }
/* carousel front slide: caption sits at the bottom, not centered */
.fmt-slide--front { justify-content: flex-end; padding-bottom: 30px; }
.fmt-slide-text {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: 1.45rem; line-height: 1.1; color: #ffffeb;
}
/* match the text-post headline to the slide-card text (size + weight) */
.fmt-post-text { font-size: 1.45rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }

/* outputs: real renders + a real post replace the skeleton mocks (option A) */
.fmt-render { position: relative; width: 100%; }
.fmt-render .render-scale { margin: 0 auto; display: block; }
.fmt-render--carousel .render-scale { position: relative; z-index: 2; }
.fmt-render--carousel::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 22px; right: -13px; border-radius: 12px; background: #0e0e0d; border: 1px solid rgba(255, 255, 235, 0.1); z-index: 1; }
.fmt-slide-num { position: absolute; bottom: 10px; right: 10px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 235, 0.72); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 235, 0.16); border-radius: 999px; padding: 3px 8px; }
.fmt-li { flex: 1; background: #fafafa; border: 1px solid var(--line-on-light); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.fmt-li .li-mini-text { font-size: 14px; line-height: 1.5; color: var(--ink-on-light); letter-spacing: -0.005em; }
.fmt-li-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-on-light); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint-on-light); }
.fmt-kicker-bar { background: var(--lav); }
/* single-image card now mirrors the carousel slide: kicker + top-left headline + body lines */
.fmt-canvas { flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }


/* ==========================================================================
   site-8 · trust pass (2026-07-08): booking panel, shipped strip, legal
   ========================================================================== */

/* booking panel: scheduler-grade (Cal.com embed replaces fallback when
   NF_CAL_LINK is set in index.html) */
.cal-embed { min-height: 500px; border-radius: 12px; overflow: hidden; background: #fffdf5; }
/* apply flow: value copy on the left, application form panel on the right */
#book .book-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (max-width: 860px) { #book .book-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); } }
.cal-embed:not([hidden]) { background: #101010; padding: 22px 14px 10px; } /* no height cap: Cal's iframe auto-sizes, full-width booker is naturally compact */
/* Cal sizes its iframe to the booker card alone, cropping its own Cal.com
   attribution row; min-height leaves just enough room for it (mobile sets
   taller inline heights, so this is a no-op there) */
.cal-embed iframe { min-height: 618px !important; }

/* navbar: the logotype SVG is the brand; no extra text */
.nav-brand span { display: none; }
.nav-brand img, .nav-logo { height: 19px; width: auto; display: block; }

/* the "o" (brand mark) renders itself on load, replays on hover —
   echoes the render-card assembly motif used across the site */
.logo-o { transform-box: fill-box; transform-origin: center; }
/* load: the mark renders in */
.logo-o.is-rendering { animation: logo-o-render 0.62s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes logo-o-render {
  0%   { opacity: 0; transform: scale(0.3) rotate(-55deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* hover: one clean full spin */
.logo-o.is-spinning { animation: logo-o-spin 0.72s cubic-bezier(0.5, 0.02, 0.2, 1); }
@keyframes logo-o-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .logo-o.is-rendering, .logo-o.is-spinning { animation: none; } }

/* footer: oversized outline of the icon, bleeding off the bottom-right.
   The footer's overflow: clip crops it to the rounded card. */
.foot-icon-ghost {
  position: absolute;
  right: -130px;
  bottom: -84px;
  width: min(820px, 76vw);
  height: auto;
  color: rgba(255, 255, 235, 0.11);
  pointer-events: none;
  z-index: 0;
}
.foot-inner { position: relative; z-index: 1; }

/* dark sections: same outline mark, top-right (#system, #how) */
#system, #how { overflow: clip; }
.sec-icon-ghost {
  position: absolute;
  top: -56px;
  right: -140px;
  width: min(720px, 64vw);
  height: auto;
  color: rgba(255, 255, 235, 0.09);
  pointer-events: none;
  z-index: 0;
}
#system .wrap, #how .wrap { position: relative; z-index: 1; }
@media (max-width: 720px) {
  /* phones: give the booker the full panel width */
  #book .cal-panel { padding: 10px; }
  .cal-embed:not([hidden]) { padding: 8px 2px; }
}
.cal-kicker { font-size: 11px; letter-spacing: 0.16em; color: var(--lav); }
.cal-meta { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.cal-meta li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; font-size: 14.5px; }
.cal-meta b { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cal-meta span { color: var(--dim); }
.cal-cta { display: flex; justify-content: center; width: 100%; }
.cal-direct { margin-top: 14px; font-size: 12.5px; color: var(--faint); }
.cal-direct .mail { color: var(--text); text-decoration-color: var(--lav); }

/* shipped strip: three dated entries off the production floor */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.ship-strip .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.ship-strip .eyebrow { margin-bottom: 12px; }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.strip-grid .entry { border: 2px solid rgba(26, 26, 26, 0.75); }
.strip-grid .entry .render-scale { justify-self: center; margin: 2px 0; }
.strip-grid .entry .post { font-size: 14.5px; }
.strip-grid .entry .post .hook { font-size: 17px; }
@media (max-width: 960px) { .strip-grid { grid-template-columns: 1fr; } }

/* footer utility row + legal pages */
.foot-utility { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; position: relative; font-size: 12.5px; color: var(--faint); }
/* the divider dissolves before it reaches the ghost mark on the right */
.foot-utility::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line) 40%, transparent 58%);
}
.foot-utility nav { display: flex; gap: 20px; }
.foot-utility a { color: var(--dim); }
.foot-utility a:hover { color: var(--text); }

/* Footer mobile pass: the 5 nav links were crammed into one nowrap row, so each
   phrase broke mid-word ("How it / works"). Let the row wrap between links while
   keeping each link intact, and stack the utility row so the copyright and legal
   links each get their own line instead of a cramped space-between. */
@media (max-width: 640px) {
  .foot-links { flex-wrap: wrap; gap: 12px 22px; }
  .foot-links a { white-space: nowrap; }
  .foot-utility { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.legal { padding: clamp(140px, 18vw, 190px) 0 clamp(60px, 8vw, 100px); min-height: 60vh; }
.legal h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.04em; font-size: clamp(2.6rem, 6vw, 4.4rem); margin-bottom: 10px; }
.legal .updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 40px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; font-size: 1.5rem; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: var(--dim); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0 18px; display: grid; gap: 8px; }
.legal li b { color: var(--text); font-weight: 600; }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--lav); text-underline-offset: 3px; }

/* booking fallback: left-set, compact direct line */
.cal-fallback { text-align: left; }
.cal-meta li span { justify-self: start; text-align: left; }
.cal-direct { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cal-panel .cal-direct a.mail { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-underline-offset: 3px; }

/* the section-closing statement runs monumental (Bryan: "way bigger") —
   scoped to this one wall so the problem paragraph + rhythm line keep their size */
.type-wall--xl {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.05;
}

/* the worklight grid: a fixed canvas behind everything (worklight.js draws it).
   z-index:-1 sits it above the cream body background but below every content
   element (sections are transparent, so the grid shows through) — no need to
   touch the fixed nav's own stacking. pointer-events off so it never blocks. */
.nf-worklight {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* kill the ~28px horizontal scroll from the marquee's rotate+scale bleed:
   body already clips, but the root scroll container (html) was visible.
   `clip` (not hidden) contains it without breaking sticky / fixed / the worklight. */
html { overflow-x: clip; }

/* one grid, not two: retire the old 6-column section guide lines now that the
   worklight canvas carries the drafting-floor grid. (.sec::after only ever
   drew those verticals.) */
.sec:not(.sec--paper)::after { background-image: none; }

/* --- Problem/verdict cards: on-brand chrome + larger titles (2026-07-08) ---
   Rounder to match the layer grid, and the icon chip joins the lavender-pill
   system (lavender fill + 2px ink border + violet glyph, like .btn-primary).
   Titles were 16px Garamond captions — lift to proper card headings. */
.verdict .alt {
  border-radius: var(--rad-lg);
  padding: 30px 28px;
}
.verdict .alt-head { gap: 14px; align-items: center; margin-bottom: 4px; }
.verdict .alt-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--lav);
  border: 2px solid var(--ink);
  color: var(--accent-ink);
  flex-shrink: 0;
}
.verdict .alt-icon svg { width: 21px; height: 21px; }
.verdict .alt-head .label {
  font-family: var(--font-display);
  font-size: 1.375rem;   /* 22px — matches the step + layer titles */
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}

/* ==========================================================================
   Hero Studio (2026-07-08): the content-engine workspace is now the hero
   visual (moved from the retired #ships section) and runs itself — the caption
   types, the Render button fires, the post image assembles in the preview.
   ========================================================================== */
.hero .studio-window { max-width: 1080px; margin: clamp(46px, 6vw, 82px) auto 0; }

/* hero studio: the Bladestack app sidebar. Only shows on screens wide enough to
   hold it at rest; below that the original single-window layout is untouched. */
.sw-sidebar { display: none; }
.sw-main { min-width: 0; }
@media (min-width: 1340px) {
  .hero .wrap { max-width: 1370px; }
  .hero .studio-window { display: flex; align-items: stretch; max-width: 1312px; }
  .sw-main { flex: 1 1 auto; min-width: 0; }
  .sw-sidebar { display: flex; flex-direction: column; flex: 0 0 232px; width: 232px; background: #fff; border-right: 1px solid var(--line-on-light); padding: 18px 14px 14px; }
}
.sb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4px 14px; border-bottom: 1px solid var(--line-on-light); }
.sb-mark { justify-self: start; display: inline-flex; width: 26px; }
.sb-mark--nf { width: 26px; }
.sb-mark svg { width: 100%; height: auto; }
.sb-word { justify-self: center; font-family: "Manrope", system-ui, sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink-on-light); }
.sb-gear { justify-self: end; color: var(--faint-on-light); display: inline-flex; align-items: center; }
.sb-gear svg { width: 16px; height: 16px; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.sb-sec { display: flex; align-items: center; gap: 6px; font-family: "Inter Tight", system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint-on-light); padding: 11px 8px 5px; }
.sb-caret { width: 8px; height: 8px; flex: none; opacity: 0.9; }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--muted-on-light); }
.sb-item svg { width: 15px; height: 15px; flex: none; color: var(--faint-on-light); }
.sb-item.is-active { background: rgba(255, 88, 32, 0.11); color: var(--ink-on-light); }
.sb-item.is-active svg { color: var(--accent-warm-bright); }
.sb-item.is-dim { color: var(--faint-on-light); }
.sb-item.is-dim svg { opacity: 0.7; }
.sb-badge { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--faint-on-light); font-style: normal; }
.sb-soon { margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint-on-light); background: #f0f0ee; border-radius: 999px; padding: 3px 7px; font-style: normal; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 11px; padding-top: 16px; }
.sb-search { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--faint-on-light); border: 1px solid var(--line-on-light); border-radius: 10px; padding: 9px 11px; }
.sb-search svg { width: 15px; height: 15px; flex: none; }
.sb-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint-on-light); font-style: normal; }
.sb-user { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-on-light); padding: 0 2px; }
.sb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #131312; color: #fff; font-size: 12px; font-weight: 700; font-style: normal; box-shadow: 0 0 0 2px rgba(255, 88, 32, 0.9); }
.sb-powered { font-size: 11px; color: var(--faint-on-light); text-align: center; padding-top: 2px; }
.sb-powered b { font-weight: 700; color: var(--muted-on-light); }

/* preview render slot: the "ready to render" state and the rendered post share
   one grid cell and crossfade, so the layout never jumps when it fires */
#sw-render { display: grid; place-items: center; }
#sw-render > * { grid-area: 1 / 1; }
#sw-render .pv-render-empty { width: 100%; transition: opacity 0.35s ease; }
#sw-render .pv-render-out { opacity: 0; pointer-events: none; justify-self: center; transition: opacity 0.5s ease; }
#sw-render.is-rendered .pv-render-empty { opacity: 0; pointer-events: none; }
#sw-render.is-rendered .pv-render-out { opacity: 1; pointer-events: auto; }

/* reserve the caption's line height so it doesn't collapse to 0 when it clears
   between posts — otherwise the render frame below jumps up and back on each cycle */
#sw-caption { min-height: 1.5em; min-height: 1lh; }

/* the Render control is a real button now */
.pv-render-btn { border: none; cursor: pointer; font-family: inherit; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; }
.pv-render-btn:hover { background: #000; }
.pv-render-btn:active { transform: scale(0.96); }
#sw-render.is-rendering .pv-render-btn { opacity: 0.6; transform: scale(0.97); }

/* How-we-work: equal-height panels. Stretch the matrix to match the taller
   engagement card, and let the activity rows breathe to fill rather than
   leaving an empty gap; the legend stays pinned at the bottom. */
.how-grid { align-items: stretch; }
.responsibility-matrix { display: flex; flex-direction: column; }
.responsibility-matrix .rm-table { flex: 1 1 auto; height: 100%; }

/* matrix column headers: quiet sentence-case labels in the body-title style,
   not the shouty uppercase-mono spec treatment */
.rm-table thead th {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.875rem;
}

/* breathing room above the matrix column headers */
.responsibility-matrix { padding-top: 28px; }

/* ==========================================================================
   UI-mock chrome uses the UI font, not the editorial display font.
   These labels/buttons borrow var(--font-display) (a SANS display font in the
   original build) for emphasis; the Flow skin redefines --font-display to
   serif Garamond, which is wrong for product-UI chrome. Force them to the UI
   font (Figtree). Editorial card titles (.layer-card h3, .step h3) keep
   Garamond deliberately; the rendered post cards keep their brand-pack fonts.
   ========================================================================== */
/* other product-UI mockups (pipeline step vignettes, demo tool, outputs post):
   same real-app fonts — Manrope primary, Inter Tight chrome. */
.fmt-li { font-family: "Manrope", system-ui, sans-serif; }
.fmt-li .li-mini-text,
.fmt-li .li-mini-id {
  font-family: "Manrope", system-ui, sans-serif;
}
.fmt-li .fmt-li-meta {
  font-family: "Inter Tight", system-ui, sans-serif;
}
/* how-it-works section stays on its original Figtree UI font */
.step-visual { --font-display: var(--font-body); }

/* hero mockup fonts, matched to the real Bladestack app UI:
   Manrope = primary (body, labels, headings); Inter Tight = chrome
   (button labels, section/uppercase micro-labels, badges & chips). */
.studio-window { font-family: "Manrope", system-ui, sans-serif; }
.studio-window .sw-title,
.studio-window .sw-pill b,
.studio-window .sw-block-head b,
.studio-window .style-tile,
.studio-window .theme-card {
  font-family: "Manrope", system-ui, sans-serif;
}
.studio-window .sw-label,
.studio-window .sw-style-label,
.studio-window .sw-chipbtn,
.studio-window .sw-count,
.studio-window .sw-usage,
.studio-window .rdr-chip,
.studio-window .pv-render-btn,
.sw-sidebar .sb-sec,
.sw-sidebar .sb-badge,
.sw-sidebar .sb-soon,
.sw-sidebar .sb-kbd,
.lib-side .sb-sec,
.lib-side .sb-badge,
.lib-side .sb-soon,
.lib-side .sb-kbd {
  font-family: "Inter Tight", system-ui, sans-serif;
}
/* caption action chips were reading heavy (weight 500 in near-black ink) —
   dial to regular weight + dimmed ink so they sit quietly under the caption,
   like the real Studio */
.studio-window .sw-chipbtn { font-weight: 400; color: var(--ink-dim); }

/* Pre-set the hero zoom-out's oversized start-state so the FIRST paint already
   matches the GSAP from-state — otherwise the window paints at its settled size
   (1.0), then GSAP fires on `load` and jumps it to 1.16 (a visible flash).
   Gated by html.js (no-JS keeps the natural size) and reduced-motion opts out.
   GSAP writes inline transform once it runs, cleanly taking over from here. */
/* Only oversize on real desktop (>=961px), where the studio sits in the wide wrap
   and the bleed is the intended showpiece. Below that it stacks and is column-width,
   so any oversize bleeds past the sides and clips the labels — start at natural size.
   Must match main.js's startScale breakpoint. */
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  html.js .hero .studio-window { transform: scale(1.16); transform-origin: center top; }
}

/* type-wall statements wrap into even, balanced lines (no hand-placed breaks) */
.type-wall { text-wrap: balance; }

/* the problem-section closing statement runs wider */
.verdict .type-wall { max-width: 1280px; text-wrap: pretty; }

/* rules section: side-by-side before → after. The same brief rendered without
   the gate (slop, blocked) and through it (on-brand, shippable), shown at once
   so the contrast lands without a click. */
.guard-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

.guard-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(14px, 2.2vw, 30px);
  align-items: center;
  justify-items: center;
  padding-top: clamp(30px, 3.6vw, 48px);
}
.guard-compare .g-on,
.guard-compare .g-off { display: block; }   /* both always visible now — no toggle */
.guard-compare .render-scale { --rs: 0.4 !important; }  /* fill the compare columns */

.g-col { display: grid; gap: 16px; justify-items: center; width: 100%; }
.g-col-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 7;
  margin: 0 0 54px;
  font-family: "Gloria Hallelujah", "Comic Sans MS", cursive;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}
.g-col-label::before { display: none; }
.g-col--off .g-col-label { color: #ff6b5c; }
.g-col--off .g-col-label::before { background: #ff6b5c; }
.g-col--on .g-col-label { color: var(--ok); }
.g-col--on .g-col-label::before { background: var(--ok); }

/* the ungated card reads as the reject: dimmed + a faint red frame */
.g-col--off .render-scale { filter: saturate(0.7); }
.g-col--off .verdict-chip.fail { font-weight: 600; }

/* verdict chips: clearer pass/fail — semantic red/green, an icon, and a subtle fill
   so they read as status badges rather than thin ghost outlines */
.verdict-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; }
.verdict-chip::before { font-size: 10px; line-height: 1; }
.verdict-chip.pass { color: var(--ok); border-color: rgba(53, 194, 110, 0.45); background: rgba(53, 194, 110, 0.1); }
.verdict-chip.pass::before {
  content: ""; flex: none; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 40'%3E%3Cpath d='M2 20 C6 24 11 29 15 31 C19 26 27 14 43 2 C41 6 31 18 17 35 C15.5 36.2 14 35.6 13 34 C9 29 4 24 2 22 Z' fill='%2335c26e'/%3E%3C/svg%3E") center / contain no-repeat;
}
.verdict-chip.fail { color: #ff6b5c; border: 1px solid rgba(255, 107, 92, 0.45); background: rgba(255, 107, 92, 0.1); }
.verdict-chip.fail::before {
  content: ""; flex: none; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 30 30'%3E%3Cpath d='M7 7 Q17.2 22.8 33 33 Q22.8 17.2 7 7 Z' fill='%23ff6b5c'/%3E%3Cpath d='M33 7 Q22.8 22.8 7 33 Q17.2 17.2 33 7 Z' fill='%23ff6b5c'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the gate arrow between the two cards */
.gate-divider { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; }
.gate-arrow { font-size: 26px; line-height: 1; color: var(--dim); }
.gate-label { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1; color: var(--dim); transform: rotate(-3deg); }

/* fail chip on the ungated render */
.rdr-chip--fail { color: #ff6b5c !important; border-color: rgba(255, 107, 92, 0.6) !important; }

/* gate demo refinements: split the RULE markers (left/off = red, right/on = green),
   float the verdict chips as overlay badges, swap the arrow for the nueform mark */
.guard-rules .rule:nth-child(odd) b { color: #ff6b5c; }
.guard-rules .rule:nth-child(even) b { color: var(--ok); }
/* banned-phrase strikes: the section red, a bit thicker */
.g-col--off .ban { text-decoration-color: #ff6b5c; text-decoration-thickness: 3px; }

/* format-showcase card copy reads sentence case (chrome/footer labels stay caps) */
#outputs .cx-card-text, #outputs .cx-card-subtitle { text-transform: none; }
.g-col { gap: 30px; }
.guard-compare .g-off, .guard-compare .g-on { position: relative; }
.guard-compare .verdict-chip { position: absolute; top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 14px; z-index: 6; font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: 0; text-transform: none; white-space: nowrap; padding: 0 2px 3px; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; background: none; }
/* the gate: a glowing node the content passes through — the section's pivot */
/* nudge up ~half the verdict-chip block so the gate reads centered on the cards' visual height (chip floats above each card) */
.gate-divider { gap: 13px; transform: translateY(-23px); }
.gate-flow { display: flex; align-items: center; gap: 12px; }
.gate-line { width: 30px; height: 1px; }
.gate-line--l { background: linear-gradient(90deg, transparent, rgba(255, 255, 235, 0.32)); }
.gate-line--r { background: linear-gradient(90deg, rgba(255, 255, 235, 0.32), transparent); }
.gate-node { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255, 120, 80, 0.42); background: radial-gradient(circle, rgba(255, 88, 32, 0.2), rgba(255, 88, 32, 0.05) 55%, transparent 72%); box-shadow: 0 0 30px rgba(255, 88, 32, 0.18); }
.gate-node::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 120, 80, 0.5); animation: gate-pulse 2.8s ease-out infinite; }
@keyframes gate-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gate-node::before { animation: none; } }
.gate-mark { width: 40px; height: auto; display: block; }
.gate-label { color: var(--accent-warm-bright); }
.gate-sub { margin-top: -3px; max-width: 160px; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--dim); }

/* the verdict overlay badges replace these in-card render pills */
.guard-compare .rdr-chip { display: none; }

/* rules list: match the cards' 3-column layout (card | gate | card) so each
   pair sits directly under its image; closing line spans full width */
.guard-rules { grid-template-columns: 1fr 158px 1fr; gap: 14px clamp(14px, 2.2vw, 30px); align-content: start; }
.guard-rules .rule:nth-child(odd) { grid-column: 1; }
.guard-rules .rule:nth-child(even) { grid-column: 3; }
/* each rule row matches its fixed-width card (432px, centered in the 1fr column) so labels sit under the mockup, not the column edge */
.guard-rules .rule { width: 432px; max-width: 100%; justify-self: center; }
.guard-close { grid-column: 1 / -1; margin: clamp(56px, 7vw, 84px) auto 0; max-width: 860px; font-weight: 400; text-align: center; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.guard-note { grid-column: 1 / -1; justify-self: center; margin: clamp(16px, 2vw, 24px) auto 0; max-width: 720px; text-align: center; color: var(--dim); font-size: 1.05rem; line-height: 1.6; }
.guard-note .swing { color: var(--text); }
/* the gate closing line ends the section — trim the section's bottom padding so it isn't bottom-heavy */
#rules { padding-bottom: clamp(48px, 6vw, 72px); }

@media (max-width: 760px) {
  /* Mobile gate section: on desktop this is a 3-column comparison with the labels
     and verdict chips floating absolutely above each card. Stacked on a phone that
     broke — everything was anchored to a fixed 432px card that overflowed the column
     and dragged the pinned labels off-center. Rebuild each column as a centered stack
     with a fluid card. */

  /* .guard's old panel padding shrank the content box (it has no border/bg now), so
     the oversized card overflowed asymmetrically right — drop it on mobile. */
  #rules .guard { padding-left: 0; padding-right: 0; }

  .guard-compare { grid-template-columns: 1fr; gap: 18px; }

  /* card fluid-fits the column: calc(length / length) yields a unitless --rs, so the
     card width tracks the viewport and always fits (was a fixed 0.4 → 432px). */
  #rules .guard-compare .render-scale { --rs: calc(min(300px, 82vw) / 1080px) !important; order: 2; }

  /* each column is a centered stack — label, verdict chip, then the post (chip above
     the card, matching desktop) — instead of chips pinned absolutely to the card. */
  #rules .guard-compare .g-off,
  #rules .guard-compare .g-on { display: flex; flex-direction: column; align-items: center; }
  #rules .g-col { gap: 0; }
  #rules .guard-compare .g-col-label {
    position: static; left: auto; bottom: auto; transform: none; order: 0; margin: 0 0 10px;
  }
  #rules .guard-compare .verdict-chip {
    position: static; left: auto; bottom: auto; transform: translateX(0); order: 1; margin: 0 0 12px;
  }

  /* gate stacks vertically and centered (default mobile rule lays it sideways) */
  #rules .gate-divider { flex-direction: column; align-items: center; margin-top: clamp(20px, 5vw, 32px); transform: none; }
  #rules .gate-sub { max-width: none; }

  /* space between the two stacked cards (labels no longer float above them) */
  #rules .g-col--on { margin-top: clamp(20px, 5vw, 32px); }

  /* rules: one column, fill the width (was a fixed 432px that clipped the text) */
  .guard-rules { grid-template-columns: 1fr; }
  .guard-rules .rule { grid-column: 1 !important; width: 100%; max-width: 100%; }
}

/* ============================================================
   V3 · COPY REWRITE BUILD — new components
   (four-jobs problem chain, loop diagram, comparison,
    install steps). Dark sections: #why #how. Light: #pipeline
    #compare #thinking.
   ============================================================ */

/* --- §3 Problem (dark #why): narrative + four-jobs chain --- */
.prob-story { max-width: none; display: grid; gap: 14px; margin: 40px 0 0; }
#why { padding-bottom: clamp(44px, 5vw, 72px); }
.prob-story > p { color: var(--dim); font-size: 1.05rem; line-height: 1.62; }
.prob-story > p:last-child { color: var(--text); font-weight: 500; }
.story-card { position: relative; max-width: 560px; margin: clamp(30px, 4vw, 46px) auto 0; text-align: left; background: rgba(255, 255, 235, 0.03); border: 1px solid rgba(255, 255, 235, 0.1); border-radius: 16px; padding: 28px 30px 24px; }
.story-tag { position: absolute; top: -14px; left: 26px; background: #161613; padding: 0 9px; font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: 1rem; color: var(--accent-warm-bright); transform: rotate(-3deg); }
.story-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; color: var(--text); margin: 4px 0 16px; }
.story-tally { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; align-items: center; gap: 13px; padding: 10px 0; font-size: 15px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 235, 0.06); }
.st-ck { width: 21px; height: 21px; border-radius: 50%; background: rgba(53, 194, 110, 0.16); color: #46c37a; display: grid; place-items: center; font-size: 12px; flex: none; }
.st-who { margin-left: auto; color: var(--faint); font-size: 13.5px; }
.st-out { display: flex; align-items: center; gap: 13px; padding: 15px 0 4px; font-size: 15px; }
.st-xk { width: 21px; height: 21px; border-radius: 50%; background: rgba(255, 107, 92, 0.16); color: #ff6b5c; display: grid; place-items: center; font-size: 12px; flex: none; }
.st-out-txt { color: #ff6b5c; font-weight: 500; }
.story-cap { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.prob-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); max-width: 1120px; margin: 0 auto; align-items: stretch; }
.prob-cols .story-card { margin: 0; max-width: none; }
.story-card--take { display: flex; flex-direction: column; justify-content: center; }
.story-prose { font-size: 15px; line-height: 1.62; color: rgba(255, 255, 235, 0.4); margin: 0 0 18px; }
.story-punch { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.72rem); line-height: 1.25; letter-spacing: -0.02em; color: rgba(255, 255, 235, 0.5); margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 235, 0.12); }
.story-seams { font-style: normal; color: rgba(255, 255, 235, 0.5); }
.story-you { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.3vw, 1.72rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--accent-warm-bright); margin: 20px 0 0; }
/* real-client credit folded in from the dropped testimonial: names the flagship as a
   real, verifiable client without leaning on a weak quote */
.story-cred { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 235, 0.12); }
.story-cred-logo { height: 19px; width: auto; }
.story-cred-txt { font-family: var(--font-body); font-size: 0.92rem; color: rgba(255, 255, 235, 0.4); }
/* D · work vs. reality bars */
.dvs-box { border: 1px solid rgba(255, 255, 235, 0.1); border-radius: 12px; padding: 15px 17px 13px; }
.dvs-box + .dvs-box { margin-top: 14px; }
.dvs-lab { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); margin: 0 0 9px; }
.dvs-bar { display: flex; align-items: stretch; height: 44px; border-radius: 8px; overflow: hidden; }
.dvs-wk { flex: 1; min-width: 30px; background: var(--accent-warm-bright); color: #161613; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; border-right: 2px solid #161613; }
.wk-d { font-size: 11px; font-weight: 500; color: rgba(22, 22, 19, 0.7); margin-top: 2px; }
.dvs-wk:last-child { border-right: 0; }
.dvs-gp { background: rgba(255, 255, 235, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--font-body); font-size: 11px; line-height: 1.1; color: rgba(255, 255, 235, 0.5); border-right: 2px solid #161613; }
.dvs-tot { display: flex; justify-content: flex-end; font-family: var(--font-body); font-size: 11.5px; margin: 5px 0 0; color: var(--faint); }
.dvs-tot--red { color: #ff6b5c; }
.dvs-note { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--dim); }
@media (max-width: 720px) { .prob-cols { grid-template-columns: 1fr; } }

.jobs { display: flex; align-items: flex-start; max-width: 1120px; margin: clamp(20px, 3vw, 32px) auto 0; padding-bottom: 46px; }
.job { position: relative; flex: 0 0 auto; min-width: 200px; height: 58px; display: flex; align-items: center; justify-content: center; padding: 0 22px; background: rgba(255, 255, 235, 0.04); border: 1px solid rgba(255, 255, 235, 0.13); border-radius: 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: var(--text); white-space: nowrap; line-height: 1; }
.job-gap { flex: 1 1 auto; min-width: 56px; height: 58px; position: relative; }
.g-line { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 5px; }
.g-line::before { content: ""; flex: 1; height: 1.5px; border-radius: 2px; background: var(--accent-warm-bright); }
.job-w { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; font-family: var(--font-body); font-size: clamp(11px, 1.05vw, 12.5px); font-weight: 500; color: rgba(255, 255, 235, 0.5); background: rgba(255, 255, 235, 0.03); border: 1px dashed rgba(255, 255, 235, 0.18); border-radius: 999px; padding: 6px 12px; white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1; }
.job-w b { color: var(--accent-warm-bright); font-weight: 600; }
.jobs-cap { margin-top: clamp(20px, 3vw, 32px); text-align: center; font-size: 1.15rem; line-height: 1.5; }
.jobs--flow + .jobs-cap { margin-top: clamp(30px, 4vw, 46px); }
.jobs-cap .swing { display: block; font-style: italic; color: var(--text); }
.jobs-cap-sub { display: block; margin-top: 10px; font-size: 0.95rem; font-style: normal; color: var(--faint); }
@media (max-width: 720px) {
  .jobs { flex-direction: column; align-items: center; padding-bottom: 0; }
  .job { justify-content: center; width: 100%; max-width: 320px; }
  .job-gap { min-width: 0; width: auto; height: auto; position: static; display: flex; flex-direction: column; align-items: center; }
  .g-line { height: 24px; padding: 0; flex-direction: column; }
  .g-line::before { flex: none; width: 1.5px; height: 100%; }
  .js .jobs--flow .g-line::before, .js .jobs--flow.in .g-line::before { transform: none; animation: none; }
  .job-w { position: static; transform: none; margin: 9px 0; }
}

/* --- §6b Flowline (light #pipeline): a calm hairline with a highlight gliding back
   and forth, plus three tick-dots above the cards that brighten as it passes (JS in v3.js) --- */
.flowline { position: relative; height: 1px; width: 100%; margin: 0 auto clamp(34px, 5vw, 56px); background: rgba(210, 48, 0, 0.14); }
.flow-hi { position: absolute; top: 50%; left: 0; width: 11%; height: 2px; border-radius: 3px; transform: translate(0, -50%);
  background: linear-gradient(90deg, rgba(255, 88, 32, 0), var(--accent-warm-bright), rgba(255, 88, 32, 0));
  box-shadow: 0 0 7px 0 rgba(255, 88, 32, 0.3);
  animation: flow-glide 3s linear infinite; will-change: transform, opacity; }
@keyframes flow-glide { from { transform: translate(0, -50%); } to { transform: translate(800%, -50%); } }
.flow-dot { position: absolute; top: 50%; left: 50%; width: 5.5px; height: 5.5px; margin: -2.75px 0 0 -2.75px; border-radius: 50%;
  background: var(--accent-warm-bright); opacity: 0.28; }
.flow-num { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-warm); }
#pipeline .feat-kicker { display: none; }
/* the illustrations' inner cards paint at z-index up to 4 with large downward shadows;
   lift the text above them and give it room so the shadow no longer sits on the copy */
#pipeline .feat-slot { margin-bottom: clamp(24px, 3.5vw, 40px); }
#pipeline .feat-title, #pipeline .feat-copy { position: relative; z-index: 6; text-align: center; }
#pipeline .feat-copy { margin-left: auto; margin-right: auto; }
.flow-ring { position: absolute; inset: -1.5px; border-radius: 50%; border: 1px solid var(--accent-warm-bright); opacity: 0; pointer-events: none; }
.flow-dot.pop { animation: flow-pop 0.45s cubic-bezier(.34, 1.4, .64, 1); }
.flow-dot.pop .flow-ring { animation: flow-ripple 0.5s ease-out; }
@keyframes flow-pop { 0% { transform: scale(1); } 44% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes flow-ripple { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } }
@media (prefers-reduced-motion: reduce) { .flow-hi { animation: none; opacity: .9; transform: translate(300%, -50%); } .flow-dot.pop { animation: none; } }

/* --- §6 Loop diagram (light #pipeline) --- */
.loop-diagram { max-width: 900px; margin: 0 auto clamp(46px, 6vw, 72px); color: var(--ink); }
.loop-diagram svg { width: 100%; height: auto; display: block; }
.lp-node rect { fill: #fffef7; stroke: var(--ink); stroke-width: 1.5; }
.lp-n { fill: var(--accent-warm); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-anchor: middle; }
.lp-t { fill: var(--ink); font-family: var(--font-display); font-size: 27px; text-anchor: middle; }
.lp-link { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.lp-loop { stroke: var(--accent-warm-bright); stroke-width: 2.2; fill: none; }
.lp-loop-label { fill: var(--accent-warm); font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; letter-spacing: 0.11em; text-anchor: middle; }

/* --- §10 Comparison (light paper #compare) --- */
.compare .cmp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.cmp-col { background: #fffdf6; border: 1px solid var(--line-ink); border-radius: 18px; padding: 24px 22px; display: grid; align-content: start; overflow: hidden; }
.cmp-col--nf { border: 2px solid var(--ink); box-shadow: var(--shadow-2); background: #fffef7; }
.cmp-col-head { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line-ink); }
.cmp-name { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.1; letter-spacing: 0; color: rgba(22, 22, 19, 0.8); }
.cmp-col--nf .cmp-name { color: var(--accent-warm); }
/* Nueform column header: the real wordmark instead of the handwritten name */
.cmp-logo { height: clamp(14px, 1.35vw, 16px); width: auto; display: block; justify-self: start; color: var(--ink); }
.cmp-what { font-size: 13.5px; color: var(--ink-dim); line-height: 1.42; }
.cmp-rows { margin: 0; }
.cmp-row { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--line-ink); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.cmp-row dd { margin: 0; font-size: 15px; color: var(--ink-dim); line-height: 1.42; }
.cmp-col--nf .cmp-row dd { color: rgba(22, 22, 19, 0.8); font-weight: 500; }
.cmp-row--who { margin: 0 -22px; padding: 15px 22px; background: rgba(210, 48, 0, 0.05); }
.cmp-row--who dt { color: var(--accent-warm); }
.cmp-row--who dd { font-weight: 600; color: rgba(22, 22, 19, 0.8); }
.cmp-col--nf .cmp-row--who { background: rgba(210, 48, 0, 0.10); }
.cmp-col--nf .cmp-row--who dd { color: var(--accent-warm); }
.cmp-row dd.cmp-mk { display: flex; gap: 8px; align-items: flex-start; }
.cmp-row dd.cmp-mk::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.cmp-mk--yes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 40'%3E%3Cpath d='M2 20 C6 24 11 29 15 31 C19 26 27 14 43 2 C41 6 31 18 17 35 C15.5 36.2 14 35.6 13 34 C9 29 4 24 2 22 Z' fill='%23ff5820'/%3E%3C/svg%3E"); }
.cmp-mk--no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 30 30'%3E%3Cpath d='M7 7 Q17.2 22.8 33 33 Q22.8 17.2 7 7 Z' fill='%23ff6b5c' fill-opacity='0.62'/%3E%3Cpath d='M33 7 Q22.8 22.8 7 33 Q17.2 17.2 33 7 Z' fill='%23ff6b5c' fill-opacity='0.62'/%3E%3C/svg%3E"); }
.cmp-close { margin: clamp(26px, 3.5vw, 40px) auto 0; text-align: center; font-size: 1.15rem; line-height: 1.5; color: var(--ink-dim); max-width: 62ch; }
.cmp-close .swing { font-style: italic; color: var(--ink); }
@media (max-width: 1000px) { .compare .cmp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .compare .cmp { grid-template-columns: 1fr; } }

/* --- #how · two-way pricing sheet (dark section) --- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); max-width: 960px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px, 3vw, 40px); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.plan--featured { border-color: rgba(255, 120, 40, 0.55); box-shadow: 0 0 0 1px rgba(255, 120, 40, 0.28), 0 20px 60px -30px rgba(0, 0, 0, 0.7); }
.plan:hover { transform: translateY(-5px); border-color: rgba(255, 120, 40, 0.55); box-shadow: 0 0 0 1px rgba(255, 120, 40, 0.22), 0 26px 64px -32px rgba(210, 48, 0, 0.5); }
@media (prefers-reduced-motion: reduce) { .plan:hover { transform: none; } }
.plan-flag { position: absolute; top: -12px; left: clamp(26px, 3vw, 40px); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #161613; background: var(--accent-warm-bright); border-radius: 999px; padding: 5px 12px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan-tag { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -0.02em; color: var(--text); }
.plan-role { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1; text-transform: lowercase; color: var(--accent-warm-bright); transform: rotate(-3deg); white-space: nowrap; }
.plan-list { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 13px; }
.plan-list li { position: relative; padding-left: 26px; color: var(--dim); font-size: 15px; line-height: 1.5; }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 40'%3E%3Cpath d='M2 20 C6 24 11 29 15 31 C19 26 27 14 43 2 C41 6 31 18 17 35 C15.5 36.2 14 35.6 13 34 C9 29 4 24 2 22 Z' fill='%23ff5820'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-price { display: flex; align-items: baseline; gap: 9px; margin: 0 0 18px; }
.plan-price .amt { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.plan-price .per { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.plan-for { margin: 0 0 20px; font-style: italic; font-size: 14.5px; color: var(--faint); }
.plan-cta { display: block; text-align: center; margin-top: 22px; padding: 13px 26px; }
.plan .btn:not(.btn-primary) { border-color: rgba(255, 255, 235, 0.28); color: var(--text); }
.plan .btn:not(.btn-primary):hover { background: rgba(255, 255, 235, 0.06); border-color: rgba(255, 255, 235, 0.5); }

/* mid-page CTAs at the natural "I'm convinced" moments */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin: clamp(40px, 6vw, 66px) auto 0; }
.sec-cta-line { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-style: normal; font-size: clamp(1.05rem, 1.9vw, 1.4rem); letter-spacing: 0; color: var(--ink); margin: 0; }
.sec-cta-note { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--faint-on-light); margin: -4px 0 0; }
.plans-close { margin: clamp(30px, 4vw, 46px) auto 0; text-align: center; max-width: 62ch; font-size: 1.1rem; line-height: 1.55; color: var(--dim); }
.plans-close .swing { font-style: italic; color: var(--text); }
@media (max-width: 680px) { .plans { grid-template-columns: 1fr; } }

/* --- §12 Install steps (dark #how, replaces the matrix) --- */
.install-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; align-content: start; }
.ins-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; background: var(--panel); border: 1px solid rgba(255, 255, 235, 0.16); border-radius: 16px; }
.ins-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--accent-warm-bright); padding-top: 5px; }
.ins-body { display: grid; gap: 5px; }
.ins-when { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ins-t { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); margin: 0; font-weight: 500; }
.ins-body p { color: var(--dim); font-size: 15px; line-height: 1.55; margin: 0; }

/* --- inline emphasis on the two new sub-leads --- */
.rules-sub { margin-top: 10px; }
.rules-sub .swing { font-style: italic; color: var(--text); }
.think-sub { margin-top: 12px; }
.think-sub .swing { font-style: italic; color: var(--ink); }

/* ============================================================
   V4 · lean clean-slate control — section tweaks
   ============================================================ */
/* relief section (#how, dark): running-state sub + centered close */
.run-sub { margin-top: 12px; }
.run-sub .swing { font-style: italic; color: var(--text); }
.run-close { margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; font-size: 1.15rem; line-height: 1.5; color: var(--dim); max-width: 54ch; }
.run-close::after { content: ""; }
/* install steps as a horizontal 4-step timeline at full width */
.install-steps--wide { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.install-steps--wide .ins-step { grid-template-columns: 1fr; gap: 10px; align-content: start; }
.install-steps--wide .ins-num { padding-top: 0; }
@media (max-width: 860px) { .install-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .install-steps--wide { grid-template-columns: 1fr; } }
/* book: minimal founder line + small round portrait (dark #book) */
.book-founder { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.book-founder-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid var(--line-strong); flex: none; }
.book-founder-txt { display: grid; gap: 2px; font-size: 14px; color: var(--dim); }
.book-founder-txt b { color: var(--text); font-weight: 600; font-size: 15px; }

/* ============================================================
   V5 · two-month section tweaks (centered prose + display-font caption)
   ============================================================ */
/* playful handwritten eyebrow, centered above a section title (no arrow) — used in #why + #rules */
.why-eyebrow { display: inline-flex; justify-self: start; margin-bottom: clamp(10px, 1.4vw, 16px); color: var(--accent-warm-bright); transform: rotate(-3deg); }
#why .why-eyebrow, #rules .why-eyebrow, #pipeline .why-eyebrow, #proof .why-eyebrow, #how .why-eyebrow { justify-self: center; }
#bryan .why-eyebrow { margin-bottom: -8px; }
.why-eyebrow-txt { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.05; }
#why .sec-head, #why .prob-story { text-align: center; margin-left: auto; margin-right: auto; }
#why .sec-head { justify-items: center; max-width: none; }
#why .sec-head .lead { max-width: 68ch; font-size: 1.125rem; line-height: 1.6; }
#rules .sec-head, #how .sec-head { text-align: center; justify-items: center; margin-left: auto; margin-right: auto; max-width: none; }
#rules .sec-head .lead { max-width: 68ch; font-size: 1.125rem; line-height: 1.6; }
#how .sec-head .lead { font-size: 1.125rem; line-height: 1.6; }
/* this section has a diagram on the right, so its lead must stay narrower than the page's 68ch leads to clear it */
#anatomy .sec-head .lead { max-width: 46ch; font-size: 1.125rem; line-height: 1.6; }
#why .jobs-cap .swing {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-style: italic;
  line-height: 1.15;
  color: rgba(255, 255, 235, 0.4);
}

/* ---- #why · animated horizontal handoff chain ----
   Cards + connectors rise L->R on entry (reuses v3.js §1's .in observer),
   a warm ring pings each card as the cascade reaches it, the connectors
   "march" in the flow direction, and each "waits on…" label settles from
   accent to faint. Hidden state is gated behind .js so no-JS shows the full
   static chain; the marching connectors + stronger chevrons are desktop-only
   so the mobile vertical layout (max-width:720px) is untouched. */
.jobs--flow .job { position: relative; }
/* cascade reveal — all widths */
.js .jobs--flow > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.js .jobs--flow.in > * { opacity: 1; transform: none; }
.js .jobs--flow.in > *:nth-child(1) { transition-delay: 0s; }
.js .jobs--flow.in > *:nth-child(2) { transition-delay: .10s; }
.js .jobs--flow.in > *:nth-child(3) { transition-delay: .20s; }
.js .jobs--flow.in > *:nth-child(4) { transition-delay: .30s; }
.js .jobs--flow.in > *:nth-child(5) { transition-delay: .40s; }
.js .jobs--flow.in > *:nth-child(6) { transition-delay: .50s; }
.js .jobs--flow.in > *:nth-child(7) { transition-delay: .60s; }
/* warm ring pings each card as the cascade reaches it — all widths */
.js .jobs--flow.in .job::before {
  content: ""; position: absolute; inset: -1px; border-radius: 13px; pointer-events: none;
  box-shadow: 0 0 0 1px var(--accent-warm-bright), 0 0 22px rgba(255, 120, 40, .28);
  opacity: 0; animation: why-ping .9s ease-out forwards;
}
.js .jobs--flow.in .job:nth-child(1)::before { animation-delay: .05s; }
.js .jobs--flow.in .job:nth-child(3)::before { animation-delay: .25s; }
.js .jobs--flow.in .job:nth-child(5)::before { animation-delay: .45s; }
.js .jobs--flow.in .job:nth-child(7)::before { animation-delay: .65s; }
@keyframes why-ping { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* the "waits on…" label settles from accent to faint after its card lands */
.js .jobs--flow .job-w { color: var(--accent-warm-bright); transition: color .6s ease; }
.js .jobs--flow.in .job-w { color: var(--faint); transition-delay: .7s; }
/* connector line grows left→right as each gap reveals (JS only; static without JS) */
.js .jobs--flow .g-line::before { transform: scaleX(0); transform-origin: left; }
.js .jobs--flow.in .g-line::before { animation: nf-grow-x .6s cubic-bezier(.4, .1, .2, 1) forwards; }
.js .jobs--flow.in .job-gap:nth-child(2) .g-line::before { animation-delay: .15s; }
.js .jobs--flow.in .job-gap:nth-child(4) .g-line::before { animation-delay: .35s; }
.js .jobs--flow.in .job-gap:nth-child(6) .g-line::before { animation-delay: .55s; }
@keyframes nf-grow-x { to { transform: scaleX(1); } }
/* reduced motion: full static chain, no cascade/ping/grow */
@media (prefers-reduced-motion: reduce) {
  .js .jobs--flow > *, .js .jobs--flow.in > * { opacity: 1; transform: none; transition: none; }
  .js .jobs--flow.in .job::before { display: none; }
  .js .jobs--flow .job-w, .js .jobs--flow.in .job-w { transition: none; color: var(--faint); }
  .js .jobs--flow .g-line::before, .js .jobs--flow.in .g-line::before { animation: none; transform: none; }
}

/* ============================================================
   §6c · The weekly input — a chat composer that feeds the loop.
   Lives in #pipeline (light/cream) above "Set up once."; a dark glass
   panel to match the illustration cards. Animation: v3.js §feed.
   ============================================================ */
/* the "every week" block sits in a dark card, like the dark ribbon sections. Remap
   the text tokens to their on-dark values so the heading + lead read on the panel. */
.feed-in {
  margin-top: clamp(52px, 8vw, 96px);
  --text: #ffffeb;
  --dim: rgba(255, 255, 235, 0.68);
  --faint: rgba(255, 255, 235, 0.46);
  background: #161613;
  border-radius: clamp(24px, 3vw, 36px);
  padding: clamp(36px, 5.5vw, 68px) clamp(20px, 4vw, 52px);
}
.feed-head { text-align: center; max-width: 640px; margin: 0 auto clamp(24px, 3.2vw, 36px); }
.feed-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -0.045em; line-height: 1.02; margin: 18px 0 0; }
.feed-h .fs { color: var(--accent-warm); }
.feed-h .tone { color: rgba(255, 255, 235, 0.4); }
.feed-h .swing { font-style: italic; color: var(--text); }
.feed-lead { color: var(--dim); font-size: 1.125rem; line-height: 1.6; margin: 18px auto 0; max-width: 54ch; }

.feed-note { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--dim); text-align: center; max-width: 920px; margin: clamp(32px, 4vw, 48px) auto 0; line-height: 1.4; transform: rotate(-1.2deg); }
.feed-note .fn-ul { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hand-note { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--dim); line-height: 1.4; transform: rotate(-1.2deg); }
.feat-card .hand-note { text-align: center; margin: 16px auto 0; max-width: 32ch; }
.compare .hand-note { text-align: center; margin: clamp(22px, 2.8vw, 34px) auto 0; }
.book-copy .hand-note { margin: 22px 0 0; max-width: 32ch; }

/* --- Apply flow (booking section) --- */
.apply-steps { list-style: none; counter-reset: astep; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.apply-steps li { position: relative; padding-left: 42px; font-size: 15px; color: var(--dim); line-height: 1.5; }
.apply-steps li b { color: var(--text); font-weight: 600; }
.apply-steps li::before { counter-increment: astep; content: counter(astep); position: absolute; left: 0; top: -2px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }

#apply-panel { grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-items: start; }
.apply-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; text-align: left; }
.apply-form[hidden], .apply-done[hidden] { display: none; }
.apply-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.apply-field label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.apply-hint { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); font-size: 12.5px; }
.apply-field input, .apply-field textarea { font-family: var(--font-body); font-size: 15px; color: var(--text); background: rgba(255, 255, 235, 0.04); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color 0.15s ease, background 0.15s ease; }
.apply-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.apply-field input:focus, .apply-field textarea:focus { outline: none; border-color: var(--accent-warm-bright); background: rgba(255, 255, 235, 0.07); }
.apply-submit { width: 100%; margin-top: 6px; }
.apply-fineprint { margin: 0; font-size: 12px; color: var(--faint); text-align: center; }
.apply-error { margin: 0; font-size: 13.5px; color: #ffb4a0; }
.apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply-done { text-align: center; padding: 22px 8px; display: grid; gap: 7px; place-items: center; }
.apply-done-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-warm-bright); color: #161613; font-size: 22px; margin: 0 0 6px; }
.apply-done-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--text); margin: 0; }
.apply-done-copy { font-size: 14.5px; color: var(--dim); margin: 0; max-width: 34ch; }
.feed-chat { max-width: 920px; margin: 0 auto; background: #15150f; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 44px 84px -44px rgba(0, 0, 0, 0.55), inset 0 1px 0.5px rgba(255, 255, 255, 0.07); }
.feed-cxlbl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.feed-logo { height: 15px; width: auto; display: block; color: #fdfdf2; flex: none; }
.feed-status { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: rgba(255, 255, 235, 0.5); white-space: nowrap; }
.feed-live { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent-warm-bright); box-shadow: 0 0 8px rgba(255, 88, 32, 0.7); animation: feed-pulse 2s ease-in-out infinite; }
@keyframes feed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.feed-thread { min-height: clamp(176px, 26vw, 202px); display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.feed-row { display: flex; gap: 11px; align-items: flex-start; }
.feed-row--u { justify-content: flex-end; }
.feed-bub { max-width: 80%; padding: 12px 16px; font-size: 15px; line-height: 1.5; border-radius: 15px; }
.feed-bub--u { background: #26261f; color: #fdfdf2; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom-right-radius: 5px; }
.feed-sys { flex: 1; min-width: 0; }
.feed-bub--s { display: inline-block; background: transparent; color: rgba(255, 255, 235, 0.92); border: 1px solid rgba(255, 88, 32, 0.38); border-bottom-left-radius: 5px; }
.feed-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 2px; background: #26261f; border: 1px solid rgba(255, 255, 255, 0.12); }
.feed-av-mark { width: 11px; height: auto; display: block; }
.feed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.feed-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.13); color: rgba(255, 255, 235, 0.75); white-space: nowrap; }
.feed-cdot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.feed-cdot--o { background: var(--accent-warm-bright); }
.feed-cdot--g { background: var(--ok); }
.feed-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255, 88, 32, 0.3); border-radius: 15px; border-bottom-left-radius: 5px; }
.feed-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 235, 0.5); animation: feed-typ 1.2s ease-in-out infinite; }
.feed-typing i:nth-child(2) { animation-delay: 0.15s; }
.feed-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes feed-typ { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.feed-inp { display: flex; align-items: center; gap: 12px; background: #211f18; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px; padding: 12px 12px 12px 17px; }
.feed-field { flex: 1; min-width: 0; }
.feed-ph { color: rgba(255, 255, 235, 0.82); font-size: 15px; line-height: 1.45; }
.feed-ph.is-empty { color: rgba(255, 255, 235, 0.4); }
.feed-cur { display: inline-block; width: 1.5px; height: 17px; background: var(--accent-warm-bright); vertical-align: -3px; margin-left: 2px; animation: feed-blink 1.1s step-end infinite; }
.feed-ph.is-empty + .feed-cur { opacity: 0; }
.feed-mic { width: 40px; height: 40px; flex: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 11px; background: transparent; color: rgba(255, 255, 235, 0.6); display: grid; place-items: center; cursor: default; }
.feed-mic svg { width: 19px; height: 19px; transition: transform 0.2s ease; }
.feed-mic.is-listening { color: var(--accent-warm-bright); border-color: rgba(255, 120, 40, 0.65); animation: feed-mic-ping 1.4s ease-out infinite; }
.feed-mic.is-listening svg { transform: scale(1.08); }
@keyframes feed-mic-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 88, 32, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(255, 88, 32, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 88, 32, 0); } }
.feed-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 11px; background: var(--accent-warm-bright); color: #15150f; display: grid; place-items: center; font-size: 18px; font-weight: 700; cursor: default; }
@keyframes feed-blink { 50% { opacity: 0; } }

.feed-anim { opacity: 0; transform: translateY(9px); }
.feed-anim.in { opacity: 1; transform: none; transition: opacity 0.42s ease, transform 0.42s ease; }

@media (prefers-reduced-motion: reduce) { .feed-cur, .feed-live, .feed-typing i, .feed-mic.is-listening { animation: none; } }
@media (max-width: 620px) { .feed-bub { max-width: 88%; } .feed-h { font-size: clamp(1.5rem, 7vw, 1.9rem); } }

/* ---------- 'the fix' desktop layout: text left, before/after fanned right ----------
   Appended last so it wins over the earlier #rules sec-head centering.
   Scoped to >=901px; narrow screens keep the original stacked comparison. */
@media (min-width: 901px) {
  #rules .wrap {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    grid-template-areas: "text visual";
    column-gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
    max-width: 1160px;
  }
  #rules .guard { display: contents; }
  #rules .sec-head { grid-area: text; text-align: left; justify-items: start; margin: 0; max-width: none; }
  #rules .sec-head .why-eyebrow { justify-self: start; }
  #rules .guard-compare { grid-area: visual; display: block; position: relative; min-height: clamp(390px, 32vw, 480px); padding-top: 0; width: 100%; }
  #rules .guard-compare .g-col { position: absolute; width: auto; gap: 8px; }
  #rules .g-col--off { left: 0; top: 15%; transform: rotate(-6deg); z-index: 1; }
  #rules .g-col--on { right: 0; top: 0; transform: rotate(4deg); z-index: 2; }
  #rules .gate-divider { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; margin: 0; }
  #rules .gate-flow .gate-line { display: none; }
  #rules .gate-label, #rules .gate-sub { display: none; }
  #rules .guard-compare .render-scale { --rs: calc(min(268px, 28vw) / 1080px) !important; }
}

/* ---------- 'the problem' desktop layout: text left, flagship story as floating cards right ----------
   The jobs-flow diagram was removed (the timeline card covers the same ground, deeper).
   Scoped to >=901px; narrow screens keep the original stacked layout. */
@media (min-width: 901px) {
  #why .wrap {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    grid-template-areas: "cards head" "cards cap";
    column-gap: clamp(28px, 4.5vw, 60px);
    row-gap: 16px;
    align-items: center;
    max-width: 1160px;
  }
  #why .sec-head { grid-area: head; text-align: left; justify-items: start; margin: 0; max-width: none; }
  #why .sec-head .why-eyebrow { justify-self: start; }
  #why .sec-head .lead { max-width: 48ch; }
  #why .jobs-cap { grid-area: cap; text-align: left; margin: 6px 0 0; }
  #why .prob-story { grid-area: cards; margin: 0; max-width: none; }
  #why .prob-cols { display: block; position: relative; max-width: none; margin: 0; transform: scale(0.92); transform-origin: left center; }
  #why .prob-cols .story-card { margin: 0; max-width: none; background: #201f1b; border: 1px solid rgba(255, 255, 235, 0.14); box-shadow: 0 26px 56px -22px rgba(0, 0, 0, 0.62); }
  #why .prob-cols .story-card:not(.story-card--take) { transform: rotate(-2.5deg); position: relative; z-index: 1; }
  #why .prob-cols .story-card--take { transform: rotate(2.5deg); position: relative; z-index: 2; margin-top: -18px; }
}