/* ==========================================================================
   LAZURO LEARNING: WEBSITE STYLESHEET
   Built on Lazuro Design Tokens v2.0 ("Klein blue & bone")
   --------------------------------------------------------------------------
   Section 1 is the token layer, the single source of truth. To rebrand,
   edit only the values in :root. Never hard-code hex values below it.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS  (mirrors lazuro-tokens.css v2.0)
   ========================================================================== */
:root {

  /* --- Brand: Klein blue ramp --- */
  --brand-50:  #EDEFFC;
  --brand-100: #DDE0FA;
  --brand-200: #B9BEF3;
  --brand-300: #8A93EA;
  --brand-400: #4E5BE2;
  --brand-500: #1F2ED6;   /* primary brand */
  --brand-600: #1926B4;   /* hover */
  --brand-700: #141F8C;   /* active */
  --brand-800: #101871;
  --brand-900: #0A0F4A;

  /* --- Support accent: warm orange --- */
  --accent-500: #FF7A3D;
  --accent-100: #FFE4D3;
  --accent-700: #8A3D14;

  /* --- Ink & bone neutrals (warm; never pure black) --- */
  --ink-900:     #14130F;
  --ink-800:     #1F1E19;
  --ink-700:     #2B2922;
  --neutral-600: #48453C;
  --neutral-500: #6B675C;
  --neutral-400: #928D7F;
  --neutral-300: #C2BBA9;
  --neutral-200: #E3DCCB;
  --neutral-100: #EEE9DC;
  --paper-50:    #F4F0E6;
  --paper-0:     #FFFDF7;

  /* --- Semantic --- */
  --success-700: #1F5A38;
  --success-500: #2E7D4F;
  --success-100: #E2F1E7;
  --warning-700: #8A5E0E;
  --warning-500: #C98A1B;
  --warning-100: #FAF0D9;
  --danger-700:  #7E1A14;
  --danger-500:  #B3261E;
  --danger-100:  #F9DEDC;
  --info-700:    #0B4F4A;
  --info-500:    #0F766E;
  --info-100:    #D9F0EE;

  /* --- Purpose aliases --- */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-subtle:      var(--neutral-100);
  --text-primary:   var(--ink-900);
  --text-body:      var(--neutral-600);
  --text-secondary: var(--neutral-500);
  --text-muted:     var(--neutral-500);   /* was neutral-400: 3.3:1 on paper, under AA */
  --text-on-brand:  #F7F5FF;
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --focus-ring:     0 0 0 3px var(--brand-100);

  /* --- Shape & spacing --- */
  --radius-pill:  999px;
  --radius-card:  12px;
  --radius-input: 8px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* --- Typography --- */
  --font-heading: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-body:    'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --text-display: 44px;
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      18px;
  --text-base:    16px;
  --text-sm:      14px;
  --text-caption: 12px;
  --leading-tight: 1.15;
  --leading-body:  1.6;

  /* --- Layout --- */
  --max: 1080px;
}

/* Dark section set: marketing chrome, not learner content */
.theme-dark {
  --bg-page:        var(--ink-900);
  --bg-surface:     var(--ink-800);
  --bg-subtle:      var(--ink-700);
  --text-primary:   var(--paper-50);
  --text-body:      #D8D3C5;
  --text-secondary: #A7A192;
  --text-muted:     #9A9486;
  --border:         #38352C;
  --border-strong:  #48453C;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(32px, 5vw, var(--text-display)); }
h2 { font-size: clamp(24px, 3.4vw, 30px); }
h3, h2.h3 { font-size: var(--text-h3); font-weight: 500; letter-spacing: 0; }
p  { color: var(--text-body); }

a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
a:hover { color: var(--brand-700); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--space-5); }

/* ==========================================================================
   3. HEADER / NAV  (dark chrome)
   ========================================================================== */
.site-header { background: var(--ink-900); position: sticky; top: 0; z-index: 50; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.logo {
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  color: var(--paper-50); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.logo .mark {
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: var(--brand-500); color: var(--text-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex: none;
}
.logo:hover { color: var(--paper-50); }

.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
/* Seven items plus a CTA gets tight on a small laptop before the mobile
   breakpoint takes over, so tighten rather than wrap. */
@media (max-width: 1040px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13.5px; }
  .nav-cta { padding: 9px 16px; }
}
.nav-links a { color: #A7A192; font-size: var(--text-sm); font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: var(--paper-50); }
.nav-cta {
  background: var(--brand-500); color: var(--text-on-brand) !important;
  padding: 10px 20px; border-radius: var(--radius-pill); font-size: var(--text-sm);
  transition: background-color 140ms ease;
}
.nav-cta:hover { background: var(--brand-600); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 22px; color: var(--paper-50); line-height: 1;
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--ink-800); flex-direction: column; align-items: flex-start;
    padding: 18px 24px 24px; gap: 18px; border-bottom: 1px solid #38352C;
  }
  .nav-links.open { display: flex; animation: menuIn 180ms var(--ease) both; }
  .nav-links a { font-size: 15px; padding: 4px 0; }
  .nav-cta { align-self: stretch; text-align: center; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-links.open { animation: none; } }

/* skip link: visible only when it has focus */
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--brand-500); color: var(--text-on-brand); padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 14px; transition: top 120ms ease; }
.skip:focus { top: 0; outline: none; }

/* ==========================================================================
   4. SECTIONS
   ========================================================================== */
section { padding: var(--space-7) 0 64px; }
section.soft { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.warm { background: var(--neutral-100); }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head .kicker {
  display: inline-block; font-family: var(--font-body);
  color: var(--brand-800); background: var(--brand-100);
  font-weight: 600; font-size: var(--text-caption);
  padding: 4px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.section-head p { margin-top: var(--space-3); color: var(--text-secondary); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   5. HERO  (dark editorial)
   ========================================================================== */
.hero { background: var(--ink-900); padding: 72px 0 84px; }
.hero .wrap { max-width: var(--max); }
.hero h1 { color: var(--paper-50); max-width: 17ch; margin: var(--space-4) 0 var(--space-4); }
.hero h1 em { font-style: normal; color: var(--brand-300); }
.hero p.lede { color: #A7A192; max-width: 54ch; font-size: 17px; }
.hero .kicker {
  display: inline-block; background: var(--brand-100); color: var(--brand-800);
  font-weight: 600; font-size: var(--text-caption);
  padding: 4px 14px; border-radius: var(--radius-pill);
}
.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ==========================================================================
   6. BUTTONS  (pill language)
   --------------------------------------------------------------------------
   Three things make the set feel made rather than flat: a light source (a
   hairline highlight on top, a brand-tinted shadow underneath), a response to
   intent (the primary's arrow leans forward, the outline fills from the left)
   and one easing curve shared by every transition on the site.
   ========================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .005em;
  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 180ms var(--ease), box-shadow 220ms ease, background-color 180ms ease, color 180ms ease;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-page), 0 0 0 6px var(--brand-500); }

.btn-primary {
  color: var(--text-on-brand);
  background: linear-gradient(180deg, #2C3BE6 0%, var(--brand-500) 55%, var(--brand-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(20,19,15,.25), 0 10px 24px -12px rgba(31,46,214,.7);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(20,19,15,.25), 0 16px 32px -12px rgba(31,46,214,.75);
}
.btn-primary:active { transform: translateY(1px) scale(0.985); background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); }
/* the arrow: drawn with a mask so it matches the text colour and leans on hover */
.btn-primary::after {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease);
}
.btn-primary:hover::after { transform: translateX(3px); }
.btn-primary.no-arrow::after { display: none; }

.btn-secondary { background: var(--ink-900); color: var(--paper-50); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px -12px rgba(20,19,15,.6); }
.btn-secondary:hover { background: var(--ink-700); color: var(--paper-50); transform: translateY(-1px); }

/* outlines fill from the left */
.btn-outline, .btn-outline-dark { background: transparent; overflow: hidden; }
.btn-outline::before, .btn-outline-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease);
}
.btn-outline { color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.btn-outline::before { background: var(--ink-900); }
.btn-outline:hover { color: var(--paper-50); box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.btn-outline:hover::before { transform: scaleX(1); }

/* on dark backgrounds */
.btn-outline-dark { color: var(--paper-50); box-shadow: inset 0 0 0 1.5px var(--neutral-600); }
.btn-outline-dark::before { background: var(--paper-50); }
.btn-outline-dark:hover { color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--paper-50); }
.btn-outline-dark:hover::before { transform: scaleX(1); }

.btn-ghost { background: transparent; color: var(--brand-600); }
.btn-ghost:hover { background: var(--brand-50); }

.btn:disabled { background: var(--neutral-200); color: var(--neutral-400); cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::after, .btn:disabled::before { display: none; }

/* text links that end in an arrow lean the same way */
a[href]:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.nav-links a:hover, .logo:hover, .footer-inner a:hover, .tile:hover, .tool-card .cover:hover, .stage a:hover { text-decoration: none; }

/* ==========================================================================
   7. CARDS & GRIDS
   ========================================================================== */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color 140ms ease, transform 140ms ease;
}
/* only a card that goes somewhere lifts on hover; a static card that lifts promises a click it can't keep */
a.card:hover, .card.is-link:hover { border-color: var(--brand-400); transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(20,19,15,.25); }
.card h3, .card h2.h3 { margin: 0; }
.card p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.card .icon {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--brand-100); color: var(--brand-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex: none;
}
.card-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* ==========================================================================
   8. TIER CARDS
   ========================================================================== */
.tier { position: relative; }
.tier .tier-name {
  font-family: var(--font-body); color: var(--brand-800); background: var(--brand-100);
  font-weight: 600; font-size: 13px;
  padding: 4px 14px; border-radius: var(--radius-pill);
  align-self: flex-start;
}
.tier ul { list-style: none; margin: var(--space-2) 0 var(--space-5); flex: 1; padding: 0; }
.tier li {
  padding: 7px 0 7px 26px; position: relative;
  color: var(--text-secondary); font-size: var(--text-sm);
}
.tier li::before {
  content: "→"; position: absolute; left: 0; top: 7px;
  color: var(--brand-500); font-weight: 700;
}
.tier .btn { align-self: flex-start; }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.tier-flag {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--text-on-brand); background: var(--brand-500);
  padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* Note: the class is tier-featured, not featured — .featured is the dark
   showcase hero section and the two must never share a name. */
.tier.tier-featured { border: 2px solid var(--brand-500); }
.tier.tier-featured:hover { border-color: var(--brand-600); }

/* ==========================================================================
   9. CHIPS
   ========================================================================== */
.chip {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: var(--text-caption); font-weight: 600;
  background: var(--brand-100); color: var(--brand-800);
  margin: 0 5px 6px 0;
}
.chip.warm, .chip-accent { background: var(--accent-100); color: var(--accent-700); }
.chip-success { background: var(--success-100); color: var(--success-700); }
.chip-info    { background: var(--info-100);    color: var(--info-700); }

/* ==========================================================================
   10. SHOWCASE / DEMO FRAMES
   ========================================================================== */
.demo-frame-wrap {
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  overflow: hidden; background: var(--bg-surface);
}
.demo-frame-wrap iframe { display: block; width: 100%; height: 660px; border: 0; }
.demo-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px; background: var(--ink-900);
  font-size: 12.5px; color: #9A9486; font-family: var(--font-body);
}
.demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.demo-bar .dot:nth-child(1) { background: var(--accent-500); }
.demo-bar .dot:nth-child(2) { background: var(--warning-500); }
.demo-bar .dot:nth-child(3) { background: var(--success-500); }

/* Full-viewport WebGL pieces need more room than a standard module frame,
   and they sit on their own near-black ground rather than the site's paper. */
.demo-frame-wrap.tall iframe { height: 720px; background: #05070d; }
.demo-frame-wrap.tall { background: #05070d; }
.note kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--ink-900); color: var(--bg-surface);
  border-radius: 4px; padding: 1px 6px; margin: 0 1px;
}
@media (max-width: 860px) { .demo-frame-wrap.tall iframe { height: 460px; } }

/* ==========================================================================
   10b. SHOWCASE INDEX: featured hero, filter bar, tile grid
   --------------------------------------------------------------------------
   The showcase used to embed every piece on one page, which meant five live
   builds (two of them WebGL scenes) competing for the same GPU. This replaces
   that: tiles here, one embed on each piece's own page.
   ========================================================================== */

/* --- Featured piece --------------------------------------------------- */
.featured { background: var(--ink-900); padding: 56px 0 64px; }
.featured .feat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-7); align-items: center;
}
.featured .kicker {
  display: inline-block; background: var(--brand-100); color: var(--brand-800);
  font-weight: 600; font-size: var(--text-caption);
  padding: 4px 14px; border-radius: var(--radius-pill);
}
.featured h2 { color: var(--paper-50); margin: var(--space-4) 0 var(--space-3); }
.featured h2 em { font-style: normal; color: var(--brand-300); }
.featured p { color: #A7A192; font-size: 16.5px; }
.featured .feat-ctas { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.featured .cover { border-radius: var(--radius-card); overflow: hidden; border: 1px solid #38352C; }
@media (max-width: 860px) {
  .featured .feat-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .featured .cover { order: -1; }
}

/* --- Filter bar ------------------------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6); align-items: center;
}
.filter-btn {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 7px 16px; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.filter-btn:hover { border-color: var(--brand-400); color: var(--brand-700); }
.filter-btn[aria-pressed="true"] {
  background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900);
}
.filter-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-count { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; }

/* --- Tile grid -------------------------------------------------------- */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 940px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tile-grid { grid-template-columns: 1fr; } }

.tile {
  display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.tile:hover {
  border-color: var(--brand-400); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 19, 15, 0.10);
  color: inherit;
}
.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tile[hidden] { display: none; }

.tile .cover { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--ink-900); }
.tile .cover svg { display: block; width: 100%; height: 100%; }
.tile .tile-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile .tile-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-700);
}
.tile h3 { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.tile p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.tile .tile-foot {
  margin-top: auto; padding-top: 12px;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand-600);
}
.tile:hover .tile-foot { color: var(--brand-700); }

.tile-empty {
  grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--text-muted);
}

/* --- Piece detail page ------------------------------------------------ */
.piece-back { display: inline-block; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.hero .piece-back { color: var(--brand-300); }
.hero .piece-back:hover { color: var(--paper-50); }
.piece-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid #38352C;
}
.piece-meta div { min-width: 150px; }
.piece-meta dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #9A9486; margin-bottom: 5px;
}
.piece-meta dd { margin: 0; font-size: var(--text-sm); color: #D8D3C5; }

.piece-nav {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) 0; border-top: 1px solid var(--border);
}
.piece-nav a { font-size: var(--text-sm); }
.piece-nav .spacer { flex: 1; }

/* ==========================================================================
   10d. FOUNDER BLOCK: circular headshot beside the bio
   --------------------------------------------------------------------------
   The source photo is a tall portrait, so object-fit crops it to a square and
   object-position lifts the window slightly to centre the face in the circle.
   Adjust the Y value if a different photo is swapped in.
   ========================================================================== */
.founder { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: start; }
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; gap: var(--space-5); justify-items: center; text-align: left; }
}

.avatar {
  width: 220px; height: 220px; border-radius: 50%;
  overflow: hidden; position: relative; flex: none;
  background: var(--neutral-200);
  box-shadow: 0 0 0 1px var(--border-strong), 0 14px 34px rgba(20, 19, 15, 0.16);
}
.avatar img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 42%;
}
/* A soft brand ring, so the circle reads as designed rather than as a default */
.avatar::after {
  content: ""; position: absolute; inset: -7px;
  border-radius: 50%; border: 1.5px solid var(--brand-300); opacity: 0.55;
  pointer-events: none;
}
.avatar-caption {
  margin-top: 18px; text-align: center; font-size: var(--text-sm);
  color: var(--text-secondary); line-height: 1.5;
}
.avatar-caption b { display: block; color: var(--text-primary); font-weight: 700; }
@media (max-width: 760px) {
  .avatar { width: 168px; height: 168px; }
}

/* ==========================================================================
   10c. CONTRAST PANELS: "the usual way" vs "the durable way"
   ========================================================================== */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 860px) { .contrast { grid-template-columns: 1fr; } }

.panel {
  border-radius: var(--radius-card); padding: 26px 28px;
  border: 1px solid var(--border);
}
.panel.spent { background: var(--bg-subtle); }
.panel.kept  { background: var(--bg-surface); border-color: var(--brand-400); }
.panel .panel-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px; display: block;
}
.panel.spent .panel-tag { color: var(--text-muted); }
.panel.kept  .panel-tag { color: var(--brand-700); }
.panel h3 { font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.panel ul { list-style: none; margin-top: var(--space-4); display: grid; gap: 10px; }
.panel li { font-size: var(--text-sm); color: var(--text-body); padding-left: 26px; position: relative; line-height: 1.55; }
.panel li::before { position: absolute; left: 0; top: -1px; font-size: 15px; font-weight: 700; }
.panel.spent li::before { content: "×"; color: var(--neutral-400); }
.panel.kept  li::before { content: "✓"; color: var(--success-500); }

/* The honest-caveat block: used where a page argues against its own interest */
.caveat {
  border-left: 3px solid var(--accent-500);
  background: var(--bg-surface);
  padding: 22px 26px; border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.caveat h3 { font-weight: 700; margin-bottom: 8px; }
.caveat p { font-size: var(--text-sm); }

/* Agenda / timetable rows */
.agenda { display: grid; gap: 0; }
.agenda-row {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--space-5);
  padding: 20px 0; border-top: 1px solid var(--border);
}
.agenda-row:last-child { border-bottom: 1px solid var(--border); }
.agenda-row .when {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
  color: var(--brand-600); padding-top: 2px;
}
.agenda-row h3 { font-weight: 700; margin-bottom: 6px; }
.agenda-row p { font-size: var(--text-sm); margin: 0; }
@media (max-width: 640px) {
  .agenda-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   10f. THE TWO PATHS: animated diagram on the training page
   --------------------------------------------------------------------------
   Row A loops forever, because that is the point: the cost recurs.
   Row B builds once (iteration-count 1, fill forwards) and then emits output
   endlessly. The asymmetry between the two animations IS the argument, so
   don't "tidy" them into matching loops.
   ========================================================================== */
.paths {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--border); margin-bottom: var(--space-6);
  background: var(--ink-900);
}
.paths svg { display: block; width: 100%; height: auto; }

.paths .box      { fill: var(--ink-700); }
.paths .box-model{ fill: var(--accent-500); }
.paths .box-tool { fill: var(--brand-500); }
.paths .t        { fill: var(--paper-50); font-family: var(--font-body); font-size: 13px; }
.paths .t-dark   { fill: var(--ink-900); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.paths .lbl {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 1.7px;
}
.paths .lbl-a { fill: var(--accent-500); }
.paths .lbl-b { fill: var(--brand-300); }
.paths .cap   { font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.paths .wire  { stroke: #6B675C; stroke-width: 1.6; fill: none; }
.paths .coin  { font-family: var(--font-heading); font-size: 21px; font-weight: 700; fill: var(--accent-500); }
.paths .coin-b{ fill: var(--brand-300); }

/* ---- Row A: the treadmill --------------------------------------------- */
@keyframes runA {
  0%        { transform: translateX(0);    opacity: 0; }
  6%        { opacity: 1; }
  58%       { transform: translateX(280px); opacity: 1; }
  66%, 100% { transform: translateX(280px); opacity: 0; }
}
.paths .dot-a { animation: runA 2.4s cubic-bezier(.5,0,.5,1) infinite; }

@keyframes popA {
  0%, 52%   { opacity: .18; }
  60%       { opacity: 1; }
  100%      { opacity: .18; }
}
.paths .out-a { animation: popA 2.4s ease-out infinite; }

@keyframes loopArc {
  0%, 62%  { stroke-dashoffset: 300; opacity: 0; }
  70%      { opacity: 1; }
  92%,100% { stroke-dashoffset: 0; opacity: 1; }
}
.paths .arc { stroke-dasharray: 300; animation: loopArc 2.4s ease-in-out infinite; }

/* Money stacks up, then resets, forever */
@keyframes coinIn {
  0%       { opacity: 0; transform: translateY(7px); }
  8%, 96%  { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}
.paths .coin { opacity: 0; animation: coinIn 9.6s ease-out infinite; }
.paths .c1 { animation-delay: .5s }  .paths .c2 { animation-delay: 2.9s }
.paths .c3 { animation-delay: 5.3s } .paths .c4 { animation-delay: 7.7s }

/* ---- Row B: build once, then it runs itself ---------------------------- */
@keyframes runB {
  0%       { transform: translateX(0);    opacity: 0; }
  8%       { opacity: 1; }
  70%      { transform: translateX(292px); opacity: 1; }
  80%,100% { transform: translateX(292px); opacity: 0; }
}
.paths .dot-b { animation: runB 2.6s cubic-bezier(.5,0,.5,1) 1 both; }

@keyframes toolIn {
  0%, 66% { opacity: 0; transform: scale(.6); }
  84%     { opacity: 1; transform: scale(1.09); }
  100%    { opacity: 1; transform: scale(1); }
}
.paths .tool {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: toolIn 2.9s cubic-bezier(.16,1,.3,1) 1 both;
}

/* The model steps back once its job is done */
@keyframes modelRetire { to { opacity: .3; } }
.paths .model-b { animation: modelRetire .9s ease-out 3s 1 both; }

@keyframes fadeUp { from { opacity: 0 } to { opacity: 1 } }
.paths .after { opacity: 0; animation: fadeUp .8s ease-out 3.2s 1 both; }

/* Output keeps arriving. The delay covers the build; after that it just runs. */
@keyframes emit {
  0%   { opacity: 0; transform: translateX(-26px) scale(.8); }
  22%  { opacity: 1; transform: translateX(0) scale(1); }
  76%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(16px) scale(.96); }
}
.paths .em {
  opacity: 0; transform-box: fill-box; transform-origin: left center;
  animation: emit 2.1s ease-out infinite;
}
.paths .e1 { animation-delay: 3.3s } .paths .e2 { animation-delay: 4.0s }
.paths .e3 { animation-delay: 4.7s }

@keyframes sparkle {
  0%, 100% { opacity: .25 } 50% { opacity: .85 }
}
.paths .ring { animation: sparkle 3s ease-in-out 3.4s infinite; }

/* Anyone who has asked for less motion gets the finished state, not a blank box */
@media (prefers-reduced-motion: reduce) {
  .paths .dot-a, .paths .dot-b, .paths .arc { display: none; }
  .paths .coin, .paths .tool, .paths .after, .paths .em, .paths .out-a, .paths .ring {
    animation: none; opacity: 1; transform: none;
  }
  .paths .model-b { opacity: .3; }
}

/* ==========================================================================
   10e. LEGAL PAGES: long-form prose, definition lists, data tables
   ========================================================================== */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: 24px; margin-top: var(--space-7); margin-bottom: var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--border);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-weight: 700; font-size: 17px; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.legal p { margin-bottom: var(--space-3); line-height: var(--leading-body); }
.legal ul, .legal ol { margin: 0 0 var(--space-3) 22px; }
.legal li { color: var(--text-body); line-height: var(--leading-body); margin-bottom: 8px; }
.legal .updated { font-size: var(--text-sm); color: var(--text-muted); }

.legal-toc {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 22px 26px; margin-bottom: var(--space-6);
}
.legal-toc h2 { font-size: 15px; margin: 0 0 12px; border: 0; padding: 0; }
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc li { margin-bottom: 5px; font-size: var(--text-sm); }

.legal-table-wrap {
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  overflow-x: auto; margin-bottom: var(--space-4); background: var(--bg-surface);
}
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.legal-table th {
  text-align: left; padding: 12px 16px; background: var(--bg-subtle);
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
}
.legal-table td {
  padding: 13px 16px; border-top: 1px solid var(--border);
  color: var(--text-body); vertical-align: top; line-height: 1.5;
}
.legal-table td:first-child { font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* A visible marker for clauses that still need Jared's or a lawyer's input */
.legal-flag {
  background: var(--warning-100); border-left: 3px solid var(--warning-500);
  padding: 16px 20px; border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin: var(--space-4) 0;
}
.legal-flag p { margin: 0; font-size: var(--text-sm); }
.legal-flag b { color: var(--warning-700); }

/* ==========================================================================
   11. STEPS / PROCESS
   ========================================================================== */
.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: 0; }
.step .num {
  counter-increment: step; flex: none;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: var(--brand-500); color: var(--text-on-brand);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.step .num::before { content: counter(step); }
.step p { font-size: var(--text-sm); color: var(--text-secondary); }

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.form-grid { display: grid; gap: var(--space-4); }
label {
  font-weight: 600; font-size: 13.5px; display: block;
  margin-bottom: var(--space-1); color: var(--text-primary);
}
input, textarea, select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-input);
  background: var(--bg-surface); color: var(--text-primary);
  font-family: var(--font-body); font-size: 15px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring);
}
textarea { min-height: 140px; resize: vertical; }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.cta-band { background: var(--ink-900); text-align: center; }
.cta-band h2 { color: var(--paper-50); }
.cta-band h2 em { font-style: normal; color: var(--brand-300); }
.cta-band p { color: #A7A192; max-width: 54ch; margin: var(--space-3) auto var(--space-6); }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink-900); padding: 44px 0 36px; font-size: 13px; color: #9A9486; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: flex-end; }
.footer-links a { color: #A7A192; font-weight: 600; font-size: 13px; padding: 8px 10px; border-radius: 6px; display: inline-block; min-height: 40px; line-height: 24px; }
.footer-links a:hover { color: var(--paper-50); background: rgba(255,253,247,.06); }
.footer-links .sep { align-self: center; color: #48453C; padding: 0 2px; }
.footer-legal { line-height: 1.7; }
.footer-legal a { color: #A7A192; font-weight: 600; }
.footer-legal a:hover { color: var(--paper-50); }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; margin-left: -10px; }
}

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */
.mt-1 { margin-top: var(--space-3); }
.mt-2 { margin-top: var(--space-5); }
.mt-3 { margin-top: var(--space-6); }
.note { font-size: 13px; color: var(--text-muted); }

/* ==========================================================================
   16. PRACTICE: THE CONVERSATION BUILDER ON THE SITE  (Sept 2026)
   Home offer cards, the mini conversation, four-step strip, pricing,
   FAQ, film slot. Built from the same tokens as everything above.
   ========================================================================== */
.offer { position: relative; }
.offer .offer-type {
  align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 12px;
  border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600);
}
.offer.lead { border: 2px solid var(--brand-500); }
.offer.lead .offer-type { background: var(--brand-500); color: var(--text-on-brand); }
.offer .offer-links { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
.offer .price-line { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* a still of a practice conversation, drawn in HTML so it stays sharp and editable */
.mini-convo {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 18px 40px -28px rgba(20,19,15,.45);
}
.mini-convo .mc-bar { display: flex; align-items: center; justify-content: space-between; background: var(--ink-900); padding: 10px 14px; }
.mini-convo .mc-bar b { font-family: var(--font-heading); color: var(--paper-50); font-size: 13px; }
.mini-convo .mc-bar b span { color: var(--brand-300); }
.mini-convo .mc-bar small { color: #A7A192; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mini-convo .mc-who { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mini-convo .mc-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-100); color: var(--accent-700); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.mini-convo .mc-who b { display: block; color: var(--text-primary); font-family: var(--font-heading); font-size: 14px; line-height: 1.2; }
.mini-convo .mc-who small { color: var(--text-muted); font-size: 12px; }
.mini-convo .mc-log { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.mc-b { max-width: 86%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.mc-b.them { background: var(--accent-100); color: var(--accent-700); border-bottom-left-radius: 4px; align-self: flex-start; }
.mc-b.me { background: var(--paper-0); color: var(--ink-900); border: 1px solid var(--neutral-300); border-bottom-right-radius: 4px; align-self: flex-end; }
.mini-convo .mc-score { display: flex; gap: 12px; align-items: center; margin: 4px 16px 16px; padding: 10px 12px; border-radius: 10px; background: var(--brand-100); color: var(--brand-800); font-size: 13px; }
.mini-convo .mc-score b { font-family: var(--font-heading); font-size: 20px; }

.practice-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .practice-grid { grid-template-columns: 1fr; } }

.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: four; }
@media (max-width: 860px) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .four { grid-template-columns: 1fr; } }
.four > div { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 18px 20px; }
.four > div::before {
  counter-increment: four; content: counter(four);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-500); color: var(--text-on-brand); font-weight: 700; font-size: 13px; margin-bottom: 10px;
}
.four h3 { font-size: 16px; margin-bottom: 4px; }
.four p { font-size: var(--text-sm); color: var(--text-secondary); }
.four .free { font-size: 12px; font-weight: 600; color: var(--success-700); }
.four .paid { font-size: 12px; font-weight: 600; color: var(--brand-700); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.price { display: flex; flex-direction: column; gap: 10px; }
.price .amt { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.price .amt small { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.price ul { list-style: none; margin: 4px 0 10px; flex: 1; }
.price li { position: relative; padding: 5px 0 5px 24px; font-size: var(--text-sm); color: var(--text-secondary); }
.price li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--success-500); font-weight: 700; }
.price .btn { align-self: flex-start; }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-500); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 8px; font-size: 15px; }

.shot { border-radius: var(--radius-card); border: 1px solid var(--border-strong); overflow: hidden; box-shadow: 0 22px 50px -32px rgba(20,19,15,.5); background: var(--bg-surface); }
.shot img { display: block; width: 100%; height: auto; }

.film-slot .demo-frame-wrap iframe { height: 560px; background: #0b0d12; }
@media (max-width: 860px) { .film-slot .demo-frame-wrap iframe { height: 300px; } }
.film-slot .demo-frame-wrap { background: #0b0d12; }

.hero .hero-note { margin-top: var(--space-4); color: #9A9486; font-size: 14px; }
.hero .hero-note a { color: #D8D3C5; }

/* ==========================================================================
   17. THE LIVE DEMO AND THE TOOLS PAGE  (Sept 2026)
   The learner's side of a practice conversation, playable in the page
   (modules/conversation-demo/ in an iframe), and the Tools hub.
   ========================================================================== */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 56px;
  grid-template-areas: "intro live" "more live";
}
.hero-split .hero-intro { grid-area: intro; align-self: end; }
.hero-split .hero-more { grid-area: more; align-self: start; }
.hero-split .live { grid-area: live; align-self: center; }
.hero-split h1 { max-width: 14ch; }
/* narrow: the demo comes straight after the pitch, before the buttons */
@media (max-width: 1040px) {
  .hero-split { grid-template-columns: 1fr; grid-template-areas: "intro" "more" "live"; row-gap: var(--space-6); }
  .hero-split .live { max-width: 640px; }
  .hero-split .hero-more .hero-ctas { margin-top: 0; }
}

.live-demo {
  border-radius: var(--radius-card); overflow: hidden; background: var(--bg-surface);
  border: 1px solid #38352C; box-shadow: 0 30px 70px -34px rgba(0,0,0,.75);
}
.live-demo iframe { display: block; width: 100%; height: 640px; border: 0; background: var(--paper-50); }
@media (max-width: 560px) { .live-demo iframe { height: 700px; } }
.live-cap { margin-top: 12px; font-size: 13.5px; color: #9A9486; }
.live-cap a { color: #D8D3C5; }
section:not(.hero) .live-cap { color: var(--text-muted); }
section:not(.hero) .live-cap a { color: var(--brand-600); }
section:not(.hero) .live-demo { border-color: var(--border-strong); box-shadow: 0 26px 60px -36px rgba(20,19,15,.5); }
.live-centre { max-width: 820px; margin: 0 auto; }

/* the Tools page */
.tool-feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .tool-feature { grid-template-columns: 1fr; gap: var(--space-5); } }
.tool-feature h2 { margin: var(--space-3) 0; }
.tool-feature ul { list-style: none; margin: var(--space-4) 0; display: grid; gap: 8px; padding: 0; }
.tool-feature li { position: relative; padding-left: 24px; color: var(--text-secondary); }
.tool-feature li::before { content: "→"; position: absolute; left: 0; color: var(--brand-500); font-weight: 700; }
.tool-feature .feat-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 940px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.tool-card .cover { display: block; aspect-ratio: 16 / 10; background: var(--ink-900); }
.tool-card .cover svg { display: block; width: 100%; height: 100%; }
.tool-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tool-card .what { font-size: 12px; font-weight: 600; color: var(--neutral-600); background: var(--neutral-100); align-self: flex-start; padding: 3px 12px; border-radius: var(--radius-pill); }
.tool-card h3 { font-size: 20px; }
.tool-card p { font-size: var(--text-sm); color: var(--text-secondary); }
.tool-card dl { font-size: 13.5px; display: grid; gap: 6px; margin: 2px 0 6px; }
.tool-card dt { font-weight: 600; color: var(--text-primary); display: inline; }
.tool-card dd { display: inline; margin: 0; color: var(--text-secondary); }
.tool-card .acts { margin-top: auto; display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); }
.tool-card .acts .btn { padding: 9px 18px; font-size: 14px; }

.plan-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.plan-table th, .plan-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.plan-table thead th { font-family: var(--font-heading); color: var(--text-primary); background: var(--neutral-100); font-size: 15px; }
.plan-table tbody th { font-family: var(--font-heading); color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: 0; }
.plan-table td { color: var(--text-secondary); }
.plan-table .amt { font-family: var(--font-heading); color: var(--text-primary); font-weight: 700; }
section[id] { scroll-margin-top: 72px; }

/* ==========================================================================
   18. THE STAGE  (Sept 2026)
   --------------------------------------------------------------------------
   Every embedded build or film on the site sits behind a poster. Nothing is
   loaded until asked for; on click the build opens at full size in a dialog
   with a slim Lazuro bar (site.js), or as its own page on a phone. One
   scrollbar, the build's own. The home-page demo is the one "live" stage: on
   wide screens the real thing sits inline, on phones it is a poster.
   ========================================================================== */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 14px; background: #0B0D12; border: 1px solid #2B2922;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.6);
  aspect-ratio: 16 / 10; max-width: 100%;
  display: grid; place-items: center;
}
.stage.wide { aspect-ratio: 16 / 9; }
.stage-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: pointer; }
.stage-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.005); transition: transform 600ms var(--ease), filter 300ms ease; }
.stage:hover .stage-poster img { transform: scale(1.025); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,13,18,0) 35%, rgba(11,13,18,.88)); }
.stage.is-live::before { display: none; }
.stage-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper-50); z-index: 1; }
.stage-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; color: var(--paper-50); display: flex; justify-content: space-between; align-items: end; gap: 14px; pointer-events: none; }
.stage-cap b { display: block; font-family: var(--font-heading); font-size: 17px; letter-spacing: -.01em; }
.stage-cap small { display: block; color: #A7A192; font-size: 12.5px; margin-top: 2px; }
.stage-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.stage-meta span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #D8D3C5; background: rgba(255,253,247,.1); border: 1px solid rgba(255,253,247,.14); padding: 3px 9px; border-radius: var(--radius-pill); }
.stage-open {
  position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 22px 0 14px; border-radius: var(--radius-pill); border: 0;
  background: var(--paper-0); color: var(--ink-900); font: 600 15px var(--font-body); cursor: pointer; text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.7);
  transition: transform 200ms var(--ease), box-shadow 200ms ease;
}
.stage-open:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 36px -8px rgba(0,0,0,.75); color: var(--ink-900); }
.stage-open:focus-visible { outline: none; box-shadow: 0 0 0 3px #0B0D12, 0 0 0 6px var(--brand-300); }
.stage-open .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; flex: none; }
.stage-open .dot svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
.stage.is-live .stage-open, .stage.is-live .stage-cap { display: none; }
.stage-corner { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 8px; }
.stage-corner a, .stage-corner button {
  height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255,253,247,.18);
  background: rgba(20,19,15,.55); color: var(--paper-50); font: 600 12.5px var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stage-corner a:hover, .stage-corner button:hover { background: rgba(20,19,15,.85); color: var(--paper-50); }
.stage-note { margin-top: 12px; font-size: 13.5px; color: var(--text-muted); }
.hero .stage-note { color: #9A9486; }
.stage-note a, .hero .stage-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .stage { aspect-ratio: 4 / 3; } .stage-cap small, .stage-meta { display: none; } .stage-cap b { font-size: 15px; } }

/* --- the full view --- */
dialog.fullview { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--paper-50); }
dialog.fullview::backdrop { background: rgba(20,19,15,.9); backdrop-filter: blur(4px); }
dialog.fullview[open] { display: flex; flex-direction: column; animation: fvIn 240ms ease both; }
html.fv-open { overflow: hidden; }
@keyframes fvIn { from { opacity: 0; } to { opacity: 1; } }
.fv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; background: var(--ink-900); border-bottom: 1px solid #38352C; }
.fv-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--paper-50); min-width: 0; }
.fv-brand .mark { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-500); color: var(--text-on-brand); display: grid; place-items: center; font-size: 12px; flex: none; }
.fv-title { color: #A7A192; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-acts { display: flex; gap: 8px; flex: none; }
.fv-acts a, .fv-acts button { height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid #48453C; background: transparent; color: var(--paper-50); font: 600 13px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.fv-acts a:hover, .fv-acts button:hover { background: var(--ink-700); color: var(--paper-50); }
.fv-acts kbd { font: 600 10.5px var(--font-body); color: #A7A192; border: 1px solid #48453C; border-radius: 4px; padding: 1px 5px; }
.fv-acts button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ink-900), 0 0 0 6px var(--brand-300); }
.fv-body { flex: 1; position: relative; margin: 14px; border-radius: 12px; overflow: hidden; background: #0B0D12; border: 1px solid #2B2922; animation: fvUp 340ms var(--ease) both; }
.fv-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper-50); opacity: 1; transition: opacity 260ms ease; }
.fv-body.loading iframe { opacity: 0; }
.fv-body .lz-mark { position: absolute; inset: 0; display: grid; place-content: center; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.fv-body.loading .lz-mark { opacity: 1; }
@keyframes fvUp { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) { .fv-body { margin: 8px; } .fv-name { display: none; } }

/* --- the mark: a ring that draws, six letters that rise --- */
.lz-mark { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--paper-50); letter-spacing: -.01em; }
.lz-mark .ring { position: relative; width: 44px; height: 44px; flex: none; }
.lz-mark .ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.lz-mark .ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.lz-mark .ring .bg { stroke: #2B2922; }
.lz-mark .ring .fg { stroke: var(--brand-300); stroke-dasharray: 126; stroke-dashoffset: 126; }
.lz-mark .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; color: var(--paper-50); }
.lz-mark .word { display: inline-flex; overflow: hidden; }
.lz-mark .word span { display: inline-block; transform: translateY(110%); opacity: 0; }
.loading .lz-mark .ring .fg { animation: lzRing 900ms var(--ease) 50ms infinite alternate; }
.loading .lz-mark .word span { animation: lzRise 500ms var(--ease) forwards; }
.loading .lz-mark .word span:nth-child(1) { animation-delay: 80ms } .loading .lz-mark .word span:nth-child(2) { animation-delay: 130ms }
.loading .lz-mark .word span:nth-child(3) { animation-delay: 180ms } .loading .lz-mark .word span:nth-child(4) { animation-delay: 230ms }
.loading .lz-mark .word span:nth-child(5) { animation-delay: 280ms } .loading .lz-mark .word span:nth-child(6) { animation-delay: 330ms }
@keyframes lzRing { to { stroke-dashoffset: 0; } }
@keyframes lzRise { to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading .lz-mark .ring .fg, .loading .lz-mark .word span { animation: none; stroke-dashoffset: 0; transform: none; opacity: 1; }
  dialog.fullview[open], .fv-body { animation: none; }
}

/* ==========================================================================
   19. PAGE TO PAGE  (Sept 2026)
   A cross-fade between pages in browsers that support cross-document view
   transitions (Chrome, Edge, Safari 18). The header stays put while the page
   under it changes. Everything else simply loads as before.
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both vtOut; }
::view-transition-new(root) { animation: 220ms ease-in both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* headings balance; numbers line up */
h1, h2, h3 { text-wrap: balance; }
.plan-table, .price .amt, .legal-table { font-variant-numeric: tabular-nums; }

/* tool cards carry a status: Live, Beta, Coming soon */
.tool-card .cover { position: relative; }
.tool-card .status { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255,253,247,.12); color: #D8D3C5; border: 1px solid rgba(255,253,247,.16); }
.tool-card .status.live { background: rgba(46,125,79,.35); color: #B9EBCB; border-color: rgba(124,203,153,.4); }
.tool-card .status.beta { background: rgba(201,138,27,.3); color: #FFE0A3; border-color: rgba(232,179,78,.45); }
.tool-card .status.soon { background: rgba(255,122,61,.25); color: #FFC29E; border-color: rgba(255,122,61,.4); }
.tool-card.soon { border-style: dashed; }
.tool-card.soon .cover { background: var(--bg-subtle); }

/* the live stage on wide screens: the demo at the height it needs, no corner over its controls */
.stage.is-live { aspect-ratio: auto; height: 640px; }
.stage.is-live .stage-corner { display: none; }
.stage-note .stage-full { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.tool-card .status { background: rgba(20,19,15,.82); }
.tool-card .status.live { background: rgba(20,19,15,.82); }