/* Home page (owner: home). Loads after styles.css, site.css and ucviz.css.
   Sections, in order: hero (styles.css) · the shift (four steps, one scene) · the numbers (stats, styles.css)
   · the infrastructure (stack, layers, what you own) · the agents (one card per layer + the coordinator conversation)
   · how it gets built (rail, three ways, one button)
   · founder (loop, styles.css) · reviews · blog · FAQ · closing (one door). */

/* ---------- Hero ---------- */
.hero .hero__proof { transition: opacity .3s var(--ease); }
.hero a.hero__proof:hover { opacity: .85; }
.hero__lede { max-width: 560px; }
@media (max-width: 599px) {
  /* with the thesis line under the title, the portrait gives back a little height so the button stays in the first screen */
  .hero__portrait { height: min(42vh, 104vw); height: min(42svh, 104vw); }
}
@media (max-width: 360px) {
  .hero__ctas .cta-spin__inner { font-size: 14px; padding-inline: 18px; gap: 8px; white-space: nowrap; }
}

/* ---------- The shift: four steps, one scene [cream section, ink stage] ----------
   Three layouts (p-home.js picks one):
   - default (no JS): the steps beside the final picture
   - .is-pinned (desktop): steps and stage pin; the active step opens, the rail fills with --p
   - .is-minis (phones, tablets, reduced motion): every step carries its own picture */
.shift { position: relative; padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.shift__wrap { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
.shift .sec-head__aside { max-width: 360px; color: var(--body-on-light); }
.shift__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; }
.shift__steps { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shift__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; padding: 0 0 26px; }
.shift__step:last-child { padding-bottom: 0; }
/* the rail between the numbers; in pinned mode a red line fills it, step by step */
.shift__step:not(:last-child)::before { content: ''; position: absolute; left: 19.5px; top: 46px; bottom: 6px; width: 1px; background: var(--line-l2); }
.shift__n {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-l2); font: 500 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--ink);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.shift__t { grid-column: 2; padding-top: 7px; font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; transition: color .45s var(--ease); }
.shift__body { grid-column: 2; display: grid; grid-template-rows: 1fr; }
.shift__body > div { min-height: 0; overflow: hidden; }
.shift__d { padding-top: 10px; max-width: 44ch; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; color: var(--body-on-light); }
.shift__go { all: unset; cursor: pointer; border-radius: 4px; }
.shift__go:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* the stage: a dark panel, the same look as the agent conversation further down */
.shift__stage, .shift__mini {
  container: shiftstage / inline-size;
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--r-lg); color: var(--cream);
  background:
    radial-gradient(110% 70% at 50% 108%, rgba(215, 55, 43, .26), transparent 62%),
    radial-gradient(90% 55% at 50% -6%, rgba(245, 239, 230, .06), transparent 60%),
    var(--ink);
  border: 1px solid rgba(245, 239, 230, .12);
  box-shadow: 0 50px 100px -50px rgba(20, 17, 16, .55), 0 30px 90px -50px rgba(215, 55, 43, .4);
}
.shift__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-d); }
.shift__biz { display: inline-flex; align-items: center; gap: 7px; font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); white-space: nowrap; }
.shift__biz i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245, 239, 230, .14); }
.shift__biz i:first-child { background: var(--red); }
.shift__biz i:last-of-type { margin-right: 6px; }
.shift__chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid;
  font: 500 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.shift__chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.shift__chip[data-mod="rented"] { color: #e9b44c; border-color: rgba(233, 180, 76, .4); background: rgba(233, 180, 76, .08); }
.shift__chip[data-mod="doors"] { color: #ffb3a8; border-color: rgba(239, 90, 76, .5); background: rgba(215, 55, 43, .14); }
.shift__chip[data-mod="owned"] { color: #9fe8b5; border-color: rgba(120, 220, 150, .4); background: rgba(120, 220, 150, .1); }
.shift__canvas { padding: 14px 14px 8px; }
.shift__cap { display: flex; align-items: baseline; gap: 14px; min-height: 54px; margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--line-d); font-size: 14.5px; line-height: 1.45; color: var(--muted-light); }
.shift__capn { flex: none; font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; color: var(--red-bright); }
.shift__capt { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.shift__cap.is-swap .shift__capt { opacity: 0; transform: translateY(5px); }

.sv { display: block; width: 100%; height: auto; overflow: visible; }
.sv--port { display: none; }
@container shiftstage (max-width: 519px) {
  .sv--land { display: none; }
  .sv--port { display: block; }
}
.shift__mini .sv--mini { display: block; }

/* the drawing (tools/shift.mjs) */
.sv text { font-family: Geist, system-ui, -apple-system, sans-serif; }
.sv .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; }
.sv-card__b { fill: #201a18; stroke: rgba(245, 239, 230, .13); }
.sv-card__well { fill: rgba(245, 239, 230, .06); }
.sv-card__g { stroke: #cfc6bc; }
.sv-card__t { fill: #f5efe6; font-weight: 500; letter-spacing: -.01em; }
.sv-fee rect { fill: rgba(233, 180, 76, .09); stroke: rgba(233, 180, 76, .45); }
.sv-fee text { fill: #e9b44c; letter-spacing: .08em; }
.sv-word { fill: #fff; letter-spacing: .1em; }
.sv-spoke { fill: none; stroke-linecap: round; }
.sv-spoke--base { stroke: rgba(245, 239, 230, .26); stroke-width: 1.2; }
.sv-spoke--hand { stroke: #e9b44c; stroke-width: 1.4; stroke-dasharray: 4 5; }
.sv-spoke-dot { fill: rgba(245, 239, 230, .55); }
.sv-arc { fill: none; stroke: #e9b44c; stroke-width: 1.4; stroke-dasharray: 4 5; stroke-linecap: round; }
.sv-break__in circle { fill: #141110; stroke: #e9b44c; stroke-width: 1.4; }
.sv-break__in path { fill: none; stroke: #e9b44c; stroke-width: 1.8; stroke-linecap: round; }
/* the agent connecting to each rented tool (state 2) through the door its vendor built: every door is different */
.sv-reach { fill: none; stroke: #ef5a4c; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.sv-door__in rect { fill: #141110; stroke-width: 1.2; }
.sv-door__in text { letter-spacing: .08em; }
.sv-door--open rect { stroke: rgba(245, 239, 230, .42); }
.sv-door--open text { fill: #e6ded4; }
.sv-door--half rect { stroke: rgba(233, 180, 76, .6); }
.sv-door--half text { fill: #e9b44c; }
.sv-door--paid rect { stroke: rgba(239, 90, 76, .65); }
.sv-door--paid text { fill: #ffb3a8; }
.sv-you__c { fill: #f5efe6; }
.sv-you__g { stroke: #141110; }
.sv-you__halo { fill: none; stroke: rgba(245, 239, 230, .2); }
.sv-you__busy { fill: none; stroke: #e9b44c; stroke-width: 1.5; opacity: 0; }
.sv-lab { fill: #cfc6bc; letter-spacing: .16em; }
.sv-lab-sub { fill: #a89f96; }
.sv-agent__box { fill: #d7372b; }
.sv-agent__g { stroke: #fff; }
.sv-agent__g path { fill: #fff; }
.sv-agent__ring { fill: none; stroke: rgba(239, 90, 76, .55); stroke-width: 1.4; stroke-dasharray: 3 7; }
.sv-agent__pulse { fill: none; stroke: #ef5a4c; stroke-width: 1.5; opacity: 0; }
/* the three layers; the back one, the admin portal, carries a red edge: the command center */
.sv-bar__in rect { fill: #f5efe6; }
.sv-bar__in--back rect { stroke: #d7372b; stroke-width: 2.4; }
.sv-bar__idx { fill: #b8291f; letter-spacing: .1em; }
.sv-bar__lab { fill: #141110; font-weight: 600; letter-spacing: -.02em; }
.sv-bar__sub { fill: #6b625a; font-weight: 400; letter-spacing: -.005em; }
.sv-bar__dom { fill: #6b625a; letter-spacing: .04em; }
.sv-link { fill: none; stroke: rgba(239, 90, 76, .85); stroke-width: 1.6; stroke-dasharray: 2 4; }
.sv-link-dot { fill: #ef5a4c; }
.sv-found__in rect { fill: #d7372b; }
.sv-fdot { fill: rgba(255, 255, 255, .6); }
.sv-own__in rect { fill: rgba(120, 220, 150, .1); stroke: rgba(120, 220, 150, .42); }
.sv-own__a { fill: #9fe8b5; letter-spacing: .14em; }
.sv-own__b { fill: #cfc6bc; letter-spacing: .08em; }
.sv-doc rect { fill: #f5efe6; }
.sv-doc path { fill: none; stroke: rgba(20, 17, 16, .45); stroke-width: 1.4; stroke-linecap: round; }

/* what keeps moving inside each state (p-home.js sets data-state on the drawing) */
.sv[data-state="1"] .sv-spoke--hand, .sv[data-state="2"] .sv-spoke--hand, .sv[data-state="1"] .sv-arc { animation: svCrawl 1s linear infinite; }
@keyframes svCrawl { to { stroke-dashoffset: -9; } }
.sv[data-state="1"] .sv-fee__in { animation: svFee 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svFee { 0%, 100% { transform: none; } 50% { transform: scale(1.1); } }
.sv[data-state="1"] .sv-you__busy, .sv[data-state="2"] .sv-you__busy { animation: svBusy 1.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svBusy { 0% { opacity: .85; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.55); } }
.sv[data-state="2"] .sv-reach { animation: svFlow .9s linear infinite; }
@keyframes svFlow { to { stroke-dashoffset: -8; } }
.sv[data-state="2"] .sv-agent__ring, .sv[data-state="3"] .sv-agent__ring { animation: svSpin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svSpin { to { transform: rotate(360deg); } }
.sv[data-state="3"] .sv-agent__pulse { animation: svPulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.sv[data-state="3"] .sv-link { animation: svLink 1s linear infinite; }
@keyframes svLink { to { stroke-dashoffset: -6; } }
.shift__stage:not(.is-vis) .sv *, .shift__mini:not(.is-vis) .sv * { animation-play-state: paused !important; }

/* pinned (desktop): one step open at a time, the rail fills as you scroll */
.shift.is-pinned .shift__step { padding-bottom: 16px; }
.shift.is-pinned .shift__step:last-child { padding-bottom: 0; }
.shift.is-pinned .shift__t { color: rgba(20, 17, 16, .36); }
.shift.is-pinned .shift__step.is-done .shift__t { color: rgba(20, 17, 16, .55); }
.shift.is-pinned .shift__step.is-on .shift__t { color: var(--ink); }
.shift.is-pinned .shift__body { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .3s var(--ease); }
.shift.is-pinned .shift__step.is-on .shift__body { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease) .12s; }
.shift.is-pinned .shift__step.is-on .shift__n { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(215, 55, 43, .14); }
.shift.is-pinned .shift__step.is-done .shift__n { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.shift.is-pinned .shift__step:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--red);
  transform-origin: top; transform: scaleY(clamp(0, calc(var(--p, 0) * 4 - var(--i, 0)), 1));
}
@media (hover: hover) { .shift.is-pinned .shift__step:not(.is-on) .shift__go:hover { color: var(--ink); } }
/* the stage never grows taller than the screen allows (header, bar and caption included) */
.shift.is-pinned .shift__stage { justify-self: end; width: min(100%, calc((100vh - 290px) * 1.245 + 30px)); width: min(100%, calc((100svh - 290px) * 1.245 + 30px)); }
.shift.is-pinned .sv--land { display: block; }
.shift.is-pinned .sv--port { display: none; }

/* step by step (phones, tablets, reduced motion): each step carries its own picture */
.shift.is-minis .shift__grid { grid-template-columns: minmax(0, 1fr); }
.shift.is-minis .shift__stage { display: none; }
.shift.is-minis .shift__step { padding-bottom: clamp(44px, 7vw, 64px); }
.shift.is-minis .shift__step:last-child { padding-bottom: 0; }
.shift.is-minis .shift__step::before { display: none; }
.shift__mini { grid-column: 1 / -1; margin-top: 22px; width: 100%; max-width: 680px; }
/* side by side once the picture gets 520 px or more, scrollbar included (p-home.js matches this width) */
@media (min-width: 1080px) {
  .shift.is-minis .shift__step { grid-template-columns: 40px minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; }
  .shift.is-minis .shift__mini { grid-column: 3; grid-row: 1 / span 2; width: auto; margin: 0 0 0 clamp(16px, 3vw, 48px); max-width: none; }
}

@media (max-width: 959px) {
  .shift__grid { grid-template-columns: minmax(0, 1fr); }
  .shift__stage { max-width: 680px; }
}
@media (max-width: 599px) {
  .shift__step { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .shift__n { width: 34px; height: 34px; font-size: 11px; }
  .shift__t { padding-top: 4px; font-size: 21px; }
  .shift__d { font-size: 16px; }
  .shift__bar { padding: 11px 13px; }
  .shift__biz { font-size: 10px; letter-spacing: .12em; }
  .shift__biz i { width: 8px; height: 8px; }
  .shift__chip { padding: 4px 9px; font-size: 9.5px; }
  .shift__canvas { padding: 10px 8px 6px; }
}
/* the narrowest pictures (phones of 360 px and less): tighter bar labels so the status chip always fits */
@container shiftstage (max-width: 340px) {
  .shift__bar { gap: 8px; padding-inline: 11px; }
  .shift__biz i { display: none; }
  .shift__biz { letter-spacing: .08em; }
  .shift__chip { gap: 5px; padding-inline: 8px; letter-spacing: .05em; }
}

/* ---------- The numbers (stats, styles.css) ---------- */
.stat__src { position: relative; }
.stat__src::before { content: ''; position: absolute; inset: -6px 0; }
/* 52 tools: one square each, 13 by 4. 19 days: a working month, five days a week for four weeks */
.stat__waffle--tools { grid-template-columns: repeat(13, 14px); gap: 6px; }
.stat__waffle--tools .stat__cell { width: 14px; height: 14px; }
.stat__waffle--month { grid-template-columns: repeat(5, 22px); gap: 6px; }
.stat__waffle--month .stat__cell { width: 22px; height: 22px; border-radius: 5px; transition-delay: calc(var(--i) * 40ms); }
.stat__waffle--month .stat__cell.k3 { background: transparent; border: 1.5px dashed rgba(245, 239, 230, .3); }
/* two across: every chart gets the same height, so the big numbers line up */
@media (min-width: 900px) { .stats__grid .stat__viz--col { min-height: 128px; justify-content: flex-end; } }
@media (max-width: 599px) {
  .stat__waffle--tools { grid-template-columns: repeat(13, minmax(0, 14px)); gap: 5px; width: auto; }
  .stat__waffle--tools .stat__cell { width: auto; height: auto; aspect-ratio: 1; }
  .stat__waffle--month { grid-template-columns: repeat(5, 20px); width: auto; }
  .stat__waffle--month .stat__cell { width: 20px; height: 20px; aspect-ratio: auto; }
}

/* ---------- The infrastructure: three layers on one foundation, owned [cream] ---------- */
.inf { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.inf__wrap { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.inf .sec-head__aside { color: var(--body-on-light); max-width: 440px; }
.inf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 72px); align-items: center; }
.inf__art {
  position: relative; padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0; border-radius: var(--r-lg);
  background: radial-gradient(90% 70% at 50% 20%, rgba(215, 55, 43, .18), transparent 65%), var(--ink);
  border: 1px solid var(--line-d2); box-shadow: 0 50px 100px -50px rgba(20, 17, 16, .6), 0 30px 90px -50px rgba(215, 55, 43, .45);
}
.lx--dark .lx-l { fill: #231d1a; }
.lx--dark .lx-r { fill: #1b1613; }
.lx--dark .lx-top { fill: #2b2522; stroke: rgba(245, 239, 230, .2); stroke-width: 1.2; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.lx--dark .lx-top--base { fill: #171311; stroke: rgba(245, 239, 230, .12); }
.lx--dark .lx-url { fill: var(--red-bright); font: 400 14px 'Geist Mono', ui-monospace, monospace; transition: fill .4s var(--ease); }
.lx--dark .lx-url--base { fill: var(--muted); font-size: 12.5px; }
.lx--dark .lx-g.is-hot .lx-top { fill: var(--red); stroke: var(--red-bright); }
.lx--dark .lx-g.is-hot .lx-url { fill: #fff; }
.inf__proof { display: flex; align-items: center; gap: 10px; padding: 16px 6px 18px; margin: 10px 0 0; border-top: 1px solid var(--line-d); font-size: 14px; line-height: 1.45; color: var(--muted-light); }
.inf__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(120, 220, 150, .14); }
/* the layers, front to back; hovering one lights it in the stack, the admin portal stays lit otherwise */
.inf__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ly { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 34px; border-radius: 18px; transition: background .35s var(--ease); }
.ly::before { content: ''; position: absolute; left: 12px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(215, 55, 43, .14); }
.ly--base::before { background: var(--muted); box-shadow: 0 0 0 5px rgba(20, 17, 16, .06); }
@media (hover: hover) { .ly:not(.ly--back):not(.ly--base):hover { background: rgba(20, 17, 16, .04); } }
.ly__k { font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
.ly--base .ly__k { color: var(--body-on-light); }
.ly__t { font-size: clamp(21px, 2vw, 26px); font-weight: 500; letter-spacing: -.025em; }
.ly__d { max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--body-on-light); }
/* the admin portal: the most powerful layer, set apart as a dark card */
.ly--back {
  margin: 6px 0; padding: 22px 22px 22px 40px; background: radial-gradient(420px circle at 0% 0%, rgba(215, 55, 43, .22), transparent 60%), var(--ink);
  color: var(--cream); box-shadow: 0 34px 70px -40px rgba(20, 17, 16, .7);
}
.ly--back::before { left: 18px; top: 30px; box-shadow: 0 0 0 5px rgba(215, 55, 43, .25), 0 0 18px rgba(239, 90, 76, .7); }
.ly--back .ly__k { color: var(--red-bright); }
.ly--back .ly__t { color: var(--cream); }
.ly--back .ly__d { color: var(--muted-light); }
.ly__mods { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ly__mods li { padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(239, 90, 76, .45); background: rgba(215, 55, 43, .12); font: 500 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: #ffb3a8; }
/* what the business owns, said as outcomes (never the names of the tools behind them) */
.own4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.own4__i { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line-l2); }
.own4__ic { width: 30px; height: 30px; margin-bottom: 6px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.own4__t { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.own4__d { font-size: 15px; line-height: 1.55; color: var(--body-on-light); }
@media (max-width: 959px) {
  .inf__grid { grid-template-columns: minmax(0, 1fr); }
  .inf__art { max-width: 620px; }
  .own4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .own4 { grid-template-columns: minmax(0, 1fr); }
  .ly { padding-right: 12px; }
  .ly--back { padding: 20px 18px 20px 36px; }
  .ly--back::before { left: 15px; }
  .ly__d { font-size: 15px; }
}

/* ---------- The agentic AI systems: four systems built into the infrastructure, beside the coordinator conversation [sand] ---------- */
.agents { padding: var(--section-y) var(--gutter); background: var(--sand); color: var(--ink); }
.agents__wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.agents .sec-head__aside { color: var(--body-on-light); max-width: 460px; }
.agents__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px clamp(36px, 4.5vw, 64px); align-items: start; }
/* the conversation stays in view while the four systems scroll past it */
@media (min-width: 960px) { .agents__grid .chat { position: sticky; top: 96px; } }
.sys { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sy {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0;
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line-l); box-shadow: var(--sh-card-l);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
@media (hover: hover) { .sy:hover { transform: translateY(-3px); border-color: rgba(215, 55, 43, .4); } }
.sy__k { padding-top: 4px; font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.sy__t { margin-top: 6px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.sy__d { margin-top: 8px; max-width: 54ch; font-size: 15.5px; line-height: 1.6; color: var(--body-on-light); }
/* the operations specialists, one line each */
.sy__list { display: grid; gap: 7px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-l); font-size: 14.5px; line-height: 1.5; color: var(--body-on-light); }
.sy__list div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
.sy__list dt { font-weight: 500; color: var(--ink); }
.sy__list dd { margin: 0; }
.sy__ic { width: 64px; height: 64px; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); }
/* the layer icon: three bars, the agent's layer lights up once the card is in view (p-home.js adds is-in) */
.gly__bar { fill: #fff; stroke: rgba(20, 17, 16, .35); stroke-width: 1.6; }
.gly__bar--on { transition: fill .45s var(--ease) .25s, stroke .45s var(--ease) .25s; }
.gly__spark { fill: var(--red); opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .3s .55s, transform .5s var(--ease-expo) .55s; }
/* without JS the lit icon is the final frame */
.gly__link { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 2 3; stroke-linecap: round; }
.sy.is-in .gly__bar--on, html:not(.js) .gly__bar--on { fill: var(--red); stroke: var(--red); }
.sy.is-in .gly__spark, html:not(.js) .gly__spark { opacity: 1; transform: none; }
/* the rule under the four systems: a plain sentence, never a slogan */
.agents__rule { display: flex; align-items: flex-start; justify-content: center; gap: 12px; max-width: 760px; margin: 0 auto; font-size: 16.5px; line-height: 1.55; color: var(--body-on-light); }
.agents__rule-k { font-weight: 600; color: var(--ink); }
.agents__tick { flex: none; position: relative; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--green-ink); }
.agents__tick::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

.chat {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); color: var(--cream); border: 1px solid var(--line-d2);
  box-shadow: 0 50px 100px -50px rgba(20, 17, 16, .6), 0 30px 90px -50px rgba(215, 55, 43, .45);
}
.chat__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line-d); }
.chat__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(245, 239, 230, .14); }
.chat__bar i:first-child { background: var(--red); }
.chat__title { margin-left: 10px; font: 500 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.chat__note { margin-left: auto; font: 400 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chat__body { position: relative; display: grid; min-height: 380px; padding: 22px 22px 8px; }
.run { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.run[hidden] { display: none; }
.msg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.msg__who { font: 500 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.msg--you { align-items: flex-end; text-align: right; }
.msg__t {
  display: inline-block; max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 4px 18px;
  background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1.5; text-align: left; min-height: 1.5em;
}
.msg__t::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--red); opacity: 0; }
.msg__t.is-typing::after { opacity: 1; animation: blink 1s infinite; }
.msg--agent { gap: 10px; }
.ag { margin: 0; }
.ag--say { font-size: 15px; line-height: 1.5; color: var(--cream); }
.ag--tasks { display: flex; flex-direction: column; gap: 7px; padding: 0; list-style: none; }
.task { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--muted-light); }
.task__tick { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(245, 239, 230, .25); transition: background .3s, border-color .3s; }
.task__tick::after { content: ''; position: absolute; left: 5px; top: 4px; width: 5px; height: 8px; border-right: 2px solid #0f0c0b; border-bottom: 2px solid #0f0c0b; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease-expo); }
.task.is-done .task__tick { background: var(--green); border-color: var(--green); }
.task.is-done .task__tick::after { transform: rotate(45deg) scale(1); }
.task.is-done { color: var(--cream); }
.task.is-busy .task__tick { border-color: var(--red-bright); border-top-color: transparent; animation: rot .9s linear infinite; }
.gate2 {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 4px; border-radius: 999px;
  border: 1.5px solid; font-size: 13px; font-weight: 500; white-space: nowrap; transition: border-color .4s, background .4s, color .4s;
}
.gate2__ic { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(245, 239, 230, .08); }
.gate2__ic::before { content: ''; position: absolute; left: 10px; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid currentColor; }
.gate2__ic::after { content: ''; position: absolute; left: 7px; top: 15px; width: 14px; height: 7px; border-radius: 7px 7px 0 0; border: 1.6px solid currentColor; border-bottom: 0; }
.gate2__wait, .gate2__ok { transition: opacity .3s; }
.gate2__ok { position: absolute; left: 42px; opacity: 0; }
.gate2__tick { position: relative; width: 14px; height: 14px; opacity: 0; transition: opacity .3s; }
.gate2__tick::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.gate2[data-state="waiting"] { border-style: dashed; border-color: rgba(245, 239, 230, .4); color: var(--cream); }
.gate2[data-state="waiting"] .gate2__ic { animation: askPulse 1.1s ease-in-out infinite; }
.gate2[data-state="approved"] { border-color: var(--green); background: rgba(120, 220, 150, .1); color: #9fe8b5; }
.gate2[data-state="approved"] .gate2__wait { opacity: 0; }
.gate2[data-state="approved"] .gate2__ok, .gate2[data-state="approved"] .gate2__tick { opacity: 1; }
.ag--done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.area-chip { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(215, 55, 43, .16); border: 1px solid rgba(239, 90, 76, .45); font: 500 10.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #ffb3a8; }
.js .run .msg--agent .ag { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.js .run .ag.is-on { opacity: 1; transform: none; }
.chat__foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px; border-top: 1px solid var(--line-d); font: 400 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.8s infinite; }
.chat__team { color: var(--muted-light); }
.task__who { font-weight: 500; color: var(--cream); }
@media (max-width: 959px) {
  .agents__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .sy { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  .sy__ic { width: 56px; height: 56px; border-radius: 16px; }
  .sy__k { padding-top: 0; }
  .sy__list div { grid-template-columns: 74px minmax(0, 1fr); }
  .chat__body { min-height: 400px; padding: 18px 16px 6px; }
  /* too narrow for one row: the example label moves to its own line, it never hides */
  .chat__bar { flex-wrap: wrap; row-gap: 8px; }
  .chat__note { flex: 1 0 100%; margin-left: 0; font-size: 9.5px; letter-spacing: .06em; }
  .msg__t { max-width: 100%; font-size: 14.5px; }
  .task { font-size: 13.5px; }
  .gate2 { font-size: 12.5px; }
  .chat__foot { padding-inline: 14px; font-size: 9.5px; letter-spacing: .06em; }
  .agents__rule { font-size: 15.5px; justify-content: flex-start; }
}

/* ---------- How it gets built: the rail, three ways, one button [ink-deep] ---------- */
.build { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink-deep); color: var(--cream); }
.build__glow { position: absolute; width: 900px; height: 900px; left: -300px; top: 8%; border-radius: 50%; background: var(--red); opacity: .13; filter: blur(160px); pointer-events: none; }
.build__wrap { position: relative; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.build .sec-head__aside { max-width: 420px; }
/* the process: four steps on one rail; the rail fills once in view (p-home.js adds is-in) */
/* the rail runs from the first number to the last, behind the steps */
.flow { --fg: clamp(20px, 2.6vw, 36px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--fg); margin: 0; padding: 0; list-style: none; }
.flow::before, .flow::after { content: ''; position: absolute; z-index: 0; left: 22px; right: calc((100% - 3 * var(--fg)) / 4 - 22px); top: 21px; height: 2px; border-radius: 1px; }
.flow::before { background: var(--line-d2); }
.flow::after { background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); box-shadow: 0 0 14px rgba(239, 90, 76, .5); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .2s; }
.flow.is-in::after, html:not(.js) .flow::after { transform: none; }
.fstep { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fstep__n {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%;
  background: var(--ink-raised); border: 1px solid var(--line-d2); font: 500 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--cream);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.flow.is-in .fstep__n, html:not(.js) .fstep__n { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(215, 55, 43, .16); }
.flow.is-in .fstep:nth-child(2) .fstep__n { transition-delay: .4s; }
.flow.is-in .fstep:nth-child(3) .fstep__n { transition-delay: .8s; }
.flow.is-in .fstep:nth-child(4) .fstep__n { transition-delay: 1.2s; }
.fstep__k { font: 500 11px 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--red-bright); }
.fstep__t { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.fstep__d { font-size: 15.5px; line-height: 1.6; color: var(--muted-light); }
.ways { display: flex; flex-direction: column; gap: 18px; padding-top: clamp(36px, 4.5vw, 56px); border-top: 1px solid var(--line-d); }
.ways__k { font: 500 11.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--red-bright); }
.ways__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.wy { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--ink-raised); border: 1px solid var(--line-d); }
.wy__t { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.wy__t .serif { color: var(--red-bright); }
.wy__d { font-size: 15.5px; line-height: 1.55; color: var(--muted-light); }
.build__end { display: flex; justify-content: center; }
@media (max-width: 1023px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow::before, .flow::after { display: none; }
}
@media (max-width: 899px) {
  .ways__row { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 599px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fstep { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .fstep__n { grid-row: 1 / span 3; margin: 0; }
  .fstep__d { font-size: 15px; }
}

/* ---------- The person behind it (loop from styles.css) [sand] ---------- */
.loop__node::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--red);
  box-shadow: 0 0 0 4px rgba(215, 55, 43, .1), 0 16px 34px -16px rgba(215, 55, 43, .75);
  opacity: 0;
  animation: loopHit 9s linear calc(var(--k, 0) * 2.25s - .1s) infinite;
}
@keyframes loopHit {
  0% { opacity: 0; }
  1.7% { opacity: 1; }
  8.4% { opacity: 1; }
  12% { opacity: 0; }
  100% { opacity: 0; }
}
.creed { display: flex; flex-direction: column; margin: 0; }
.creed__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--line-l2); }
.creed__row:last-child { border-bottom: 1px solid var(--line-l2); }
.creed dt { font: 500 11px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); padding-top: 4px; }
.creed dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
@media (max-width: 599px) {
  .creed__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .creed dd { font-size: 16px; }
}

/* ---------- Closing [red]: one door, to the What I build page (base look in styles.css / site.css) ---------- */
.book--end .book__inner { max-width: 900px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .loop__node::after { animation: none !important; opacity: 0; }
  .sv *, .shift__body, .shift__t, .shift__n, .shift__capt { animation: none !important; transition: none !important; }
  .gate2[data-state="waiting"] .gate2__ic, .task.is-busy .task__tick, .chat__dot { animation: none !important; }
  .gly__bar--on, .gly__spark, .flow::after, .fstep__n, .lx--dark .lx-top, .lx--dark .lx-url { transition: none !important; }
  .js .run .msg--agent .ag { opacity: 1; transform: none; transition: none; }
  .sy .gly__bar--on { fill: var(--red); stroke: var(--red); }
  .sy .gly__spark { opacity: 1; transform: none; }
  .flow::after { transform: none; }
  .sy, .ly { transition: none; }
}