/* The homepage (2026-10-29, from the doc "Homepage copy" and the hero still Kyle approved, design/screens/hero). Everything
   the homepage alone needs lives here; the frame shared by every page stays in landing.html's style block. */
.marketing-home { --spring: cubic-bezier(.34,1.56,.64,1); --card: var(--bg-2); --primary-soft: #232C4D; }
.marketing-home main { display: block; }
.marketing-home section { border-top: 1px solid var(--line); padding: 96px 0; }
.marketing-home section h2 { font-size: 36px; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; }
.marketing-home .eyebrow { margin-bottom: 14px; }
.copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.copy .eyebrow { align-self: flex-start; }
.copy p { font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 36em; margin-top: 16px; }
.copy p.strong, .big-p.strong { color: var(--ink); font-weight: 500; }
.copy .actions { margin-top: 28px; }
.copy.centered { align-items: center; text-align: center; margin: 0 auto; max-width: 760px; }
.copy.centered .eyebrow { align-self: center; }
.copy.centered p { margin-left: auto; margin-right: auto; }
.two { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.narrow { max-width: 760px; }
.big-p { font-size: 22px; line-height: 1.5; color: var(--mute); margin-top: 20px; text-wrap: pretty; }
.shot { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #202733; box-shadow: 0 30px 80px rgba(0,0,0,.45); min-width: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot.light { background: #fff; }
svg.lu { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.replay { color: var(--link); background: none; border: 0; padding: 4px 0 4px 8px; font: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.replay:hover { text-decoration: underline; }
.replay:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 3px; }

/* --- 1. the hero: the old site's top, to its numbers, on the navy (Kyle, 2026-10-29) ------------------------------- */
.hero2 { padding: 72px 0 56px; position: relative; overflow: hidden; border-top: 0; font-family: var(--display); }
.hero2::before { content: ""; position: absolute; left: 50%; top: 420px; width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(123,140,255,.16), rgba(123,140,255,0)); pointer-events: none; }
.hero2-wrap { width: min(1240px, 100% - 80px); margin: 0 auto; padding: 0; position: relative; text-align: center; }
.hero2-copy { display: block; }
.hero2 .eyebrow { display: block; text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 500; color: var(--primary); margin: 0 0 24px; }
.hero2 .eyebrow::before { display: none; }
.hero2 h1 { font-size: clamp(2.375rem, 4.2vw, 3.75rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); max-width: none; margin: 0; }
.hero2 h1 .m { display: none; }
.hero2 h1 em { font-style: normal; color: var(--primary); }
.hero2 h1 .d { white-space: nowrap; }
.hero2 .sub { max-width: 780px; margin: 28px auto 0; font-size: 21px; line-height: 1.45; color: var(--mute); }
.hero2 .actions { display: flex; justify-content: center; gap: 24px; margin: 30px 0 0; }
.hero2 .actions .btn { min-height: 48px; height: auto; padding: 0 24px; font-size: 15px; font-weight: 500; border-radius: 10px; }
.hero2 .actions .btn.primary { background: var(--btn); color: var(--on-primary); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.hero2 .actions .text-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; font-size: 15px; font-weight: 500; border-radius: 10px; color: var(--ink); background: none; border: 0; }
.hero2 .actions .text-link:hover { color: var(--ink); text-decoration: none; background: var(--bg-3); }
.hero2 .fine { font-size: 14px; margin-top: 22px; }
.actions .text-link { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 0 6px; }
.actions .text-link:hover { color: var(--ink); text-decoration: underline; }
.logos-in-hero { margin: 52px auto 0; }
.logos-in-hero .logos-line { font-size: 14px; font-weight: 500; color: var(--mute); margin-bottom: 22px; }
.logos-in-hero .logos-under { margin-top: 24px; }
.mk.plus { font: 500 22px/1 var(--display); color: var(--mute); }
.hero-card { margin: 56px auto 0; max-width: 1180px; padding: 0 0 40px; }
.hero-card + .logos-in-hero { margin-top: 72px; }
.hero2-art { position: relative; width: 1080px; max-width: 100%; margin: 0 auto; }
.laptop { position: relative; width: 860px; max-width: 100%; }
.laptop .screen { border-radius: 16px 16px 0 0; border: 1px solid #2B3452; background: #0B0F1C; padding: 12px 12px 14px;
  box-shadow: 0 50px 140px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03); }
.laptop .screen img { display: block; width: 100%; height: auto; border-radius: 7px; }
.laptop .base { height: 16px; margin: 0 -44px; border: 1px solid #2B3452; border-top: 0; border-radius: 0 0 14px 14px;
  background: linear-gradient(#2A3250, #181E33); position: relative; }
.laptop .base::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 132px; height: 6px;
  border-radius: 0 0 7px 7px; background: #10152A; }
.phone { position: absolute; right: 0; bottom: -40px; width: 238px; height: 524px; border-radius: 38px; background: #0B0F1C;
  border: 1px solid #2B3452; padding: 9px; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.phone::before { content: ""; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 72px; height: 20px;
  border-radius: 12px; background: #000; z-index: 2; }
.phone.static { position: relative; right: auto; bottom: auto; flex-shrink: 0; }
.pscreen { height: 100%; border-radius: 30px; overflow: hidden; background: #202733; color: #E6E8EC; position: relative;
  font: 11px/1.4 var(--font); padding: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.pscreen .status { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: #E6E8EC; padding: 0 4px; }
.pscreen svg { display: block; width: 100%; }
.pscreen .ask { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 999px; color: #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--primary) 55%, white) 0%, var(--primary) 45%, color-mix(in srgb, var(--primary) 70%, black) 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent); }
.pscreen .ask svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }


/* --- 2. the logo strip ------------------------------------------------------------------------------------------------ */
.logos { border-top: 0; padding: 0 0 72px; }
.logos-line { text-align: center; font-size: 15px; font-weight: 500; color: var(--ink-2); margin-bottom: 28px; }
.logos-under { text-align: center; font-size: 15px; color: var(--mute); max-width: 44em; margin: 28px auto 0; line-height: 1.6; }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marks { list-style: none; margin: 0; padding: 0; display: flex; gap: 56px; align-items: center; width: max-content; }
.marquee .marks { animation: marquee 48s linear infinite; }
.marquee:hover .marks { animation-play-state: paused; }
.marks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.mk { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.mk svg, .mk img { width: 30px; height: 30px; display: block; }
.mk.tile-p { background: #017737; color: #fff; border-radius: 9px; width: 30px; height: 30px; font: 800 18px/30px var(--display); text-align: center; }
.marks.small { gap: 20px 36px; margin-bottom: 44px; width: auto; flex-wrap: wrap; }
.marks.small .lead { color: var(--mute); font-weight: 500; }
.marks.small .mk { width: 28px; height: 28px; } .marks.small .mk svg { width: 22px; height: 22px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- 3. start here ------------------------------------------------------------------------------------------------------ */
.start .narrow { margin: 0 auto; text-align: center; }
.start h2 { font-size: 40px; }

/* --- 4. then and now: the onboarding's two scenes ------------------------------------------------------------------------ */
.scenefig { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.scenefig figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--mute); }
.scenebox { position: relative; width: 620px; max-width: 100%; height: 420px; --s: 1; }
.scenebox > .chaos, .scenebox > .thennow { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: top left; }
.scenebox > .thennow { opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.scenebox.swap > .chaos { opacity: 0; transition: opacity 500ms var(--ease); }
.scenebox.swap > .thennow { opacity: 1; }
.tile { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.tile.real { background: #fff; border: 1px solid #E9E5DC; color: #FF7A59; }
.tile.real img { width: 68%; height: 68%; object-fit: contain; display: block; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.chip svg { width: 13px; height: 13px; }
.chaos { position: relative; width: 620px; height: 420px; }
.chaos svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chaos .wire { fill: none; stroke: var(--mute-2); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0; transition: opacity 500ms var(--ease); }
.chaos.wired .wire { opacity: .7; animation: flow 1.1s linear infinite; }
.chaos .tool { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; width: 96px; }
.chaos.live .tool { animation: popc 560ms var(--spring) var(--d) both; }
.chaos.live .tool .tile { animation: jitter 2.6s ease-in-out var(--j, 0ms) infinite; }
.chaos .tool small { font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.chaos .tool .tags { position: absolute; right: 6px; top: -10px; display: flex; gap: 4px; }
.chaos .tool .tags .chip { height: 22px; padding: 0 7px; opacity: 0; }
.chaos.billed .tool .tags .chip { animation: pop 420ms var(--spring) var(--d) both; }
.chaos .one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85); width: 520px; max-width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity 500ms var(--ease) 500ms, transform 700ms var(--spring) 500ms, box-shadow 700ms var(--ease) 500ms; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.chaos .one .head { display: flex; align-items: baseline; gap: 12px; }
.chaos .one .head .brand { font-size: 18px; }
.chaos .one .head span:not(.brand):not(.bar) { font-size: 13px; color: var(--mute); }
.chaos .one .parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chaos .one .parts { opacity: 0; }
.chaos .one .part { opacity: 1; }
.chaos .one .brand .bar { transform: scaleX(0); transform-origin: left; }
.chaos .one .foot { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); opacity: 0; }
.chaos .one .foot .replaced { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); margin-right: 6px; }
.chaos .one .foot .tile { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; opacity: .5; filter: saturate(.35); }
.chaos .one .foot .tile img { width: 64%; height: 64%; }
.chaos .halo, .thennow .halo { position: absolute; left: 50%; top: 50%; width: 700px; height: 480px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(123,140,255,.18), rgba(123,140,255,0)); opacity: 0; pointer-events: none; }
.chaos.gone .tool { transition: transform 820ms var(--ease), opacity 600ms var(--ease); transform: translate(-50%, -50%) translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(.3); opacity: 0; animation: none; }
.chaos.gone .wire { opacity: 0; animation: none; }
.chaos.gone .one { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(123,140,255,.22); }
.chaos.gone .halo { animation: halo-in 900ms var(--ease) 600ms both; }
.chaos.gone .one .brand .bar { animation: draw 600ms var(--ease) 700ms both; }
.chaos.gone .one .foot { animation: foot-in 420ms var(--spring) 1050ms both; }
.chaos.gone .one .parts { animation: pop 520ms var(--spring) 600ms both; }
.part { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-weight: 500; font-size: 14px; color: var(--ink); }
.part .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.part .ic svg { width: 15px; height: 15px; }
.thennow { position: relative; width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.thennow .halo { left: 75%; width: 440px; height: 520px; transition: opacity 700ms var(--ease); }
.thennow.after .halo { opacity: 1; }
.era.now { position: relative; transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.thennow.after .era.now { transform: translateY(-2px); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(123,140,255,.22); }
.era { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 400px; transition: opacity 600ms var(--ease), filter 600ms var(--ease); }
.era .lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; align-items: center; }
.era .lbl i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute-2); }
.role { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-3); font-size: 14px; font-weight: 500; color: var(--ink); opacity: 0; }
.role svg { width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; }
.role .ai { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--primary); }
.role .ai svg { width: 13px; height: 13px; color: var(--primary); }
.era .tools { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-2); }
.era .tools .tile { width: 34px; height: 34px; border-radius: 9px; box-shadow: none; opacity: 0; }
.era .tools .brand { font-size: 15px; align-self: center; margin-left: 2px; opacity: 0; }
.era.now .one-person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; }
.era.now .big { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; opacity: 0; }
.era.now .big svg { width: 30px; height: 30px; }
.thennow.live .era .role { animation: pop 460ms var(--spring) var(--d) both; }
.thennow.live .era .tools .tile, .thennow.live .era .tools .brand { animation: pop 420ms var(--spring) var(--d) both; }
.thennow.live .era.now .big { animation: pop 520ms var(--spring) var(--d) both; }
.thennow.after .era.then { opacity: .45; filter: saturate(.3); }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes popc { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes jitter { 0%, 100% { translate: 0 0; } 25% { translate: 2px -3px; } 50% { translate: -2px 2px; } 75% { translate: 3px 1px; } }
/* without motion, or before the script runs: the finished states */
.scenebox.still > .chaos .tool { display: none; }
.scenebox.still > .chaos .one { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(123,140,255,.22); }
.scenebox.still > .chaos .one .parts, .scenebox.still > .chaos .one .foot, .scenebox.still > .chaos .halo { opacity: 1; animation: none; }
.scenebox.still > .chaos .one .brand .bar { transform: scaleX(1); animation: none; }
.scenebox.still.swap > .thennow .halo { opacity: 1; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes halo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes foot-in { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
.scenebox.still.swap > .thennow .role, .scenebox.still.swap > .thennow .tile, .scenebox.still.swap > .thennow .brand, .scenebox.still.swap > .thennow .big { opacity: 1; }

/* --- 5. the walk: the rail on the left, the nine parts with real screens ----------------------------------------------- */
.walk-head { max-width: 760px; margin-bottom: 48px; }
.walk-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
.walk .rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.walk .rail a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--mute); font-size: 14px; font-weight: 500; transition: background .25s, color .25s; }
.walk .rail a svg { width: 18px; height: 18px; flex-shrink: 0; }
.walk .rail a:hover { color: var(--ink); text-decoration: none; }
.walk .rail a.on { background: var(--primary-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--primary); }
.walk .rail a.on svg { color: var(--primary); }
.parts { display: flex; flex-direction: column; gap: 56px; }
.part-row h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.part-row > p { font-size: 16px; line-height: 1.6; color: var(--mute); max-width: 40em; margin-top: 10px; }
/* walk:begin */
/* --- 5. the walk's nine pictures, drawn in the app's own style at the page's own sizes (Kyle, 2026-10-30: "Yes, redraw
   those eight pictures in the hero's store so every number agrees."; the coordinator added the other three so all nine
   match). One frame for all nine: the app's tabs on top, the screen below, 470px tall beside the rail. On a narrow screen
   each shows less, never smaller. Every figure is the hero's store's. ------------------------------------------------- */
.wk { margin-top: 22px; height: 470px; grid-template-rows: 46px minmax(0, 1fr); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.wk-top { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 12px; border-bottom: 1px solid var(--a-line-2); overflow: hidden; }
.wk-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; font-size: 13px; color: var(--a-mute); white-space: nowrap; }
.wk-tab.on { background: var(--a-bg-3); color: var(--a-white); box-shadow: inset 0 0 0 1px var(--a-line); }
.wk-tab i { font-style: normal; font-variant-numeric: tabular-nums; }
.wk-ttl { padding-left: 6px; font-size: 14px; font-weight: 600; color: var(--a-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-sp { flex: 1; }
.wk-body { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 18px 22px; }
.wk svg.lu, .tm svg.lu, .byo-devs svg.lu { width: 16px; height: 16px; flex-shrink: 0; }
.wk-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wk-h > span:first-child { min-width: 0; }
.wk-h b { display: block; font: 600 18px/1.25 var(--display); letter-spacing: -.01em; color: var(--a-white); }
.wk-h small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--a-mute); }
.wk-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--a-line); background: #2a313c; color: var(--a-white); font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.wk-btn.primary { border-color: transparent; background: #4E63F1; color: #fff; font-weight: 600; }
.wk-btn.quiet { border-color: transparent; background: none; padding: 0 6px; color: var(--a-primary); }
.wk-btn svg.lu { width: 14px; height: 14px; }
.wk-lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.wk-crumb { font-size: 13px; color: var(--a-mute); } .wk-crumb a { color: var(--a-primary); }
.wk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-ok); flex-shrink: 0; }
.wk code { font: 12.5px var(--mono); color: var(--a-ink); }
.wk-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wk-t th { padding: 0 12px 8px 0; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--a-mute); border-bottom: 1px solid var(--a-line-2); white-space: nowrap; }
.wk-t td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--a-line-2); color: var(--a-ink); white-space: nowrap; }
.wk-t tr:last-child td { border-bottom: 0; }
.wk-t .r { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wk-logo, .tm .wk-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.wk-logo img, .wk-logo svg { width: 19px; height: 19px; display: block; object-fit: contain; }
.wk-logo.dk { background: var(--a-soft); color: var(--a-primary); }
.wk-logo.dk svg.lu { width: 17px; height: 17px; }

/* 1. Connect: the Sources screen */
.src-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.src-door, .src-card, .src-tile { min-width: 0; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg-3); }
.src-door, .src-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.src-door > span:last-child, .src-card > span:last-child { min-width: 0; }
.src-door b, .src-tile b { display: block; font-size: 14px; font-weight: 600; color: var(--a-white); white-space: nowrap; }
.src-door small, .src-card small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-di { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--a-soft); color: var(--a-primary); flex-shrink: 0; }
.src-di.white { background: #fff; } .src-di img { width: 21px; height: 21px; }
.src-l { margin: 18px 0 8px; }
.src-on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.src-card b { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--a-white); white-space: nowrap; }
.src-ok { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--a-ok); }
.src-ok svg.lu { width: 13px; height: 13px; }
.src-more { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.src-tile { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.src-tile > span:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.src-tile .wk-logo { width: 26px; height: 26px; border-radius: 7px; } .src-tile .wk-logo img, .src-tile .wk-logo svg { width: 15px; height: 15px; }
.src-tile > span:first-child { gap: 8px; }
.src-tile b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.src-tile .wk-btn { justify-content: center; height: 28px; font-size: 12.5px; }

/* 2. Store: Data, Tables */
.wk-tbl .wk-body { display: grid; grid-template-columns: 214px minmax(0, 1fr); padding: 0; }
.tbl-tree { padding: 12px 10px; border-right: 1px solid var(--a-line-2); background: var(--a-bg-2); }
.tree-g { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--a-white); }
.tree-g svg.lu { width: 14px; height: 14px; color: var(--a-mute); }
.tree-g i, .tree-i i { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.tree-i { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px 0 20px; border-radius: 6px; font: 13px var(--mono); color: var(--a-ink); }
.tree-i svg.lu { width: 14px; height: 14px; color: var(--a-mute); }
.tree-i.on { background: var(--a-soft); box-shadow: inset 2px 0 0 var(--a-primary); color: var(--a-white); }
.tbl-main { min-width: 0; padding: 16px 22px; }
.tbl-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.tbl-title b { font: 600 17px var(--mono); color: var(--a-white); }
.tbl-meta { margin-top: 2px; font-size: 13px; color: var(--a-mute); }
.tbl-main .wk-t { margin-top: 12px; }
.tbl-main .wk-t td { padding-top: 7px; padding-bottom: 7px; font: 13px var(--mono); }
.tbl-hist { display: flex; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg-2); }
.tbl-hist > svg.lu { margin-top: 2px; color: var(--a-primary); }
.tbl-hist b { display: block; font-size: 13.5px; font-weight: 500; color: var(--a-white); }
.tbl-hist small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-mute); }

/* 3. Model: the Models list, one model's SQL beside it */
.wk-mod .wk-body { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 18px; }
.mod-list { min-width: 0; }
.mod-row { display: flex; gap: 12px; margin-top: 8px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; }
.mod-list .wk-h + .mod-row { margin-top: 12px; }
.mod-row.on { background: var(--a-soft); border-color: rgba(123,140,255,.35); }
.mod-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--a-line); color: var(--a-primary); flex-shrink: 0; }
.mod-txt { min-width: 0; }
.mod-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mod-name b { font: 600 14px var(--mono); color: var(--a-white); }
.mod-name em { padding: 1px 8px; border-radius: 999px; background: rgba(123,140,255,.14); font-style: normal; font-size: 12px; color: #A8B3FF; }
.mod-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; color: var(--a-ink); }
.mod-reads { margin-top: 3px; font-size: 12.5px; color: var(--a-mute); }
.mod-sql { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg-2); overflow: hidden; }
.mod-sqlh { display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--a-line-2); font-size: 12.5px; color: var(--a-mute); }
.mod-sqlh b { font: 600 13.5px var(--mono); color: var(--a-white); }
.mod-sql pre { margin: 0; padding: 16px 16px; font: 13px/25px var(--mono); color: var(--a-ink); white-space: pre; }
.mod-sql pre .k { color: #8F9DFF; }
.mod-sqlf { margin-top: auto; padding: 11px 14px; border-top: 1px solid var(--a-line-2); font-size: 12.5px; line-height: 1.45; color: var(--a-mute); }

/* 4. Define: the Net sales metric */
.wk-met .wk-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 22px; }
.met-main { min-width: 0; }
.met-title { display: block; margin-top: 4px; font: 600 20px/1.25 var(--display); letter-spacing: -.01em; color: var(--a-white); }
.met-mean { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--a-ink); }
.met-agreed { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: var(--a-mute); }
.met-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; }
.met-num b { font: 700 28px/1 var(--display); letter-spacing: -.02em; color: var(--a-white); font-variant-numeric: tabular-nums; }
.met-num span { font-size: 13px; color: var(--a-mute); } .met-num em { font-style: normal; font-weight: 600; color: var(--a-ok); }
.met-ct { margin-top: 16px; font-size: 12.5px; color: var(--a-mute); }
.met-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); height: 128px; margin-top: 10px; }
.met-y { position: relative; }
.met-y span { position: absolute; right: 8px; bottom: calc(var(--y) * 1%); transform: translateY(50%); font-size: 12px; color: var(--a-mute); }
.met-bars { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--a-line); }
.met-g { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 1%); height: 1px; background: var(--a-line-2); }
.met-bar { position: relative; z-index: 1; justify-self: center; width: min(22px, 70%); height: var(--h); border-radius: 4px 4px 0 0; background: #7B8CFF; }
.met-bar.now { background: rgba(123,140,255,.45); }
.met-x { display: grid; grid-template-columns: 44px repeat(12, minmax(0, 1fr)); margin-top: 6px; text-align: center; font-size: 12px; color: var(--a-mute); }
.met-x b { font-weight: 400; } .met-x i { display: none; font-style: normal; }
.met-how { min-width: 0; padding-left: 20px; border-left: 1px solid var(--a-line-2); }
.met-how > b { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--a-white); }
.met-how dl { margin: 10px 0 0; }
.met-how dl div { padding: 7px 0; border-top: 1px solid var(--a-line-2); }
.met-how dt { font-size: 12.5px; color: var(--a-mute); }
.met-how dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--a-ink); }
.met-used { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.met-used .wk-lbl { width: 100%; margin-bottom: 2px; }
.met-used .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-bg-3); font-size: 12.5px; color: var(--a-white); }
.met-used .chip svg.lu { width: 13px; height: 13px; color: var(--a-primary); }

/* 5. Dashboards: the Westside page itself, at the column's width */
.wk-dash .wk-body { padding: 14px 16px; }
.wk-dash .wp { height: 100%; margin: 0; padding: 14px 18px 14px; }
.wk-dash .wp-head { height: 34px; gap: 10px; }
.wk-dash .wp-logo { width: 26px; height: 26px; }
.wk-dash .wp-names { gap: 2px; }
.wk-dash .wp-word { font-size: 19px; }
.wk-dash .wp-what { font-size: 12px; }
.wk-dash .wp-pill { height: 28px; padding: 0 10px; font-size: 12.5px; }
.wk-dash .wp-kpis { gap: 10px; margin-top: 12px; }
.wk-dash .wp-kpi { padding: 9px 12px 10px; }
.wk-dash .wp-kl { font-size: 13px; }
.wk-dash .wp-kn { margin-top: 4px; font-size: 26px; }
.wk-dash .wp-kc { margin-top: 6px; font-size: 12px; }
.wk-dash .wp-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 10px; margin-top: 10px; }
.wk-dash .wp-card { padding: 10px 14px 6px; }
.wk-dash .wp-ch { flex-wrap: wrap; row-gap: 3px; }
.wk-dash .wp-ch b { font-size: 13.5px; }
.wk-dash .wp-ch > span, .wk-dash .wp-legend { font-size: 12px; }
.wk-dash .wp-legend i { width: 16px; }
.wk-dash .wp-body { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 106px auto; margin-top: 8px; }
.wk-dash .wp-y span { right: 8px; font-size: 12px; }
.wk-dash .wp-x { height: 22px; } .wk-dash .wp-x span { top: 6px; font-size: 12px; }
.wk-dash .wp-total em { font-size: 12px; }
.wk-dash .wp-now em { right: 18px; font-size: 12.5px; }
.wk-dash .wp-rank { gap: 8px; margin-top: 10px; }
.wk-dash .wp-rank li { grid-template-columns: 20px minmax(0, 1fr) 62px; row-gap: 4px; column-gap: 8px; }
.wk-dash .wp-rank b { justify-self: end; }
.wk-dash .wp-bar { height: 6px; }
.wk-dash .wp .hs-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk-dash .wp-rn { width: 20px; height: 20px; font-size: 11.5px; }
.wk-dash .wp-sn, .wk-dash .wp-rank b { font-size: 13.5px; }
.wk-dash .wp-rank em { font-size: 12px; }

/* 6. Ask: a chat */
.wk-ask .wk-body { display: flex; justify-content: center; }
.ask-col { display: flex; flex-direction: column; gap: 12px; width: min(100%, 680px); }
.ask-q { align-self: flex-end; max-width: 80%; padding: 8px 13px; border-radius: 12px 12px 4px 12px; border: 1px solid var(--a-line-2); background: var(--a-bg-3); color: var(--a-white); }
.ask-a { display: flex; align-items: flex-start; gap: 11px; }
.ask-a > div { flex: 1; min-width: 0; }
.ask-a p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--a-white); }
.ask-tt { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--a-white); }
.ask-a .wk-t { margin-top: 6px; }
.ask-a .wk-t td { padding-top: 5px; padding-bottom: 5px; }
.ask-a .wk-t td b { font-weight: 600; color: var(--a-white); }
.ask-line { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--a-mute); }
.ask-line b { font-weight: 600; color: #F1B65C; }
.ask-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-rate { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-size: 12.5px; color: var(--a-mute); }
.ask-rate span { display: inline-flex; align-items: center; gap: 5px; }
.ask-rate svg.lu { width: 14px; height: 14px; }

/* 7. Tell: the inbox's four rows */
.wk-inb-m { font-size: 13px; color: var(--a-mute); white-space: nowrap; }
.wk-inb-list { margin-top: 12px; border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.wk-inb-list .inb-row:last-child { border-bottom: 0; }

/* 8. Send back: Destinations */
.dst-list { margin-top: 16px; border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.dst-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--a-line-2); }
.dst-row:last-child { border-bottom: 0; }
.dst-txt { flex: 1; min-width: 0; }
.dst-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--a-white); }
.dst-txt small { display: block; margin-top: 2px; font-size: 13px; color: var(--a-mute); }
.dst-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--a-ink); white-space: nowrap; }

/* 9. Agents: Settings, Agents */
.agt-l { margin: 16px 0 4px; }
.agt-t td { padding-top: 7px; padding-bottom: 7px; }
.agt-name { display: flex; align-items: center; gap: 10px; }
.agt-name b { display: block; font-size: 14px; font-weight: 600; color: var(--a-white); }
.agt-name small { display: block; font-size: 12.5px; color: var(--a-mute); }
.agt-name .wk-logo { width: 28px; height: 28px; border-radius: 7px; } .agt-name .wk-logo svg, .agt-name .wk-logo img { width: 16px; height: 16px; }
.agt-rev { font-size: 13px; color: var(--a-mute); }
.agt-code { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 10px; border: 1px solid var(--a-line); background: #151b23; }
.agt-code pre { margin: 0; font: 13px/1.7 var(--mono); color: var(--a-white); }
.agt-code .ps { color: var(--a-mute); }

/* narrow screens: each picture shows less, never smaller */
@media (max-width: 720px) {
  .wk { height: auto; }
  .wk-body { padding: 14px; }
  .wk-h { flex-wrap: wrap; }
  .src-doors, .src-on { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .src-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .src-tile:nth-child(n+4) { display: none; }
  .src-tile > span:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wk-tbl .wk-body { grid-template-columns: minmax(0, 1fr); }
  .tbl-tree { display: none; }
  .tbl-main { padding: 14px; }
  .wk-tbl .c-at, .wk-tbl .c-v212 { display: none; }
  .wk-mod .wk-body, .wk-met .wk-body { grid-template-columns: minmax(0, 1fr); }
  .wk-mod .mod-row:not(.on) .mod-reads { display: none; }
  .met-how { padding-left: 0; border-left: 0; }
  .met-how .h-3, .met-how .h-4 { display: none; }
  .met-x b { display: none; } .met-x i { display: inline; }
  .met-y span { right: 6px; } .met-plot, .met-x { grid-template-columns: 38px minmax(0, 1fr); } .met-x { grid-template-columns: 38px repeat(12, minmax(0, 1fr)); }
  .wk-dash .wk-body { padding: 10px; }
  .wk-dash .wp { padding: 12px; }
  .wk-dash .wp-pill { display: none; }
  .wk-dash .wp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wk-dash .wp-main { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .wk-dash .wp-now em { display: none; }
  .wk-ask .c-ns { display: none; }
  .ask-rate { margin-left: 0; }
  .wk-inb .inb-when { display: none; }
  .wk-inb .inb-name { white-space: normal; flex-wrap: wrap; row-gap: 0; } .wk-inb .inb-name b { overflow: visible; text-overflow: clip; } .wk-inb .inb-line { -webkit-line-clamp: 3; }
  .wk-agt .agt-code .wk-btn { display: none; }
  .wk-dash .wp-x span:last-child { display: none; }
  .wk-dash .wp-total em { max-width: 9.5em; white-space: normal; line-height: 1.25; }
  .wk-agt .c-use, .wk-agt .c-rev { display: none; }
  .wk-top .wk-tab:not(.on) ~ .wk-tab:not(.on) { display: none; }
}

/* --- 10. bring your own AI: the words above, then the terminal and the Stores page it made, in the app and on a phone ---- */
.byo-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.byo-words p:first-child { margin-top: 0; }
.byo-art { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; align-items: center; margin-top: 48px; min-width: 0; }
.byo-art .term pre { font-size: 12.5px; line-height: 1.7; }
.byo-devs { position: relative; min-width: 0; padding: 0 0 26px; }
.byo-devs .laptop { width: calc(100% - 174px); }
.byo-devs .laptop .screen { padding: 8px 8px 10px; border-radius: 12px 12px 0 0; }
.byo-devs .laptop .base { margin: 0 -14px; height: 12px; }
.st-app { aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: #212830; }
.st-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 26px; padding: 0 12px; border-bottom: 1px solid #353c45; font-size: 11.5px; color: #9198a1; white-space: nowrap; }
.st-bar a { color: #7B8CFF; } .st-pub { color: #9198a1; }
.st-page { flex: 1; min-height: 0; margin: 8px; padding: 9px 11px; border-radius: 9px; border: 1px solid #3A4454; background: #F6EFE4; color: #3A1D0C; font-family: "Hanken Grotesk", var(--font); }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-logo { width: 22px; height: 22px; flex-shrink: 0; }
.st-head b { font: 600 15px/1 "Fraunces", Georgia, serif; color: #5A2E14; white-space: nowrap; }
.st-head i { padding-left: 8px; border-left: 1px solid #DCCAB3; font-style: normal; font-size: 12px; font-weight: 600; color: #3A1D0C; }
.st-head span { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #7A5B45; white-space: nowrap; }
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.st-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; padding: 7px 9px 5px; border-radius: 8px; border: 1px solid #E8DAC6; background: #FDF9F3; }
.st-name { font-size: 12px; font-weight: 600; color: #7A5B45; }
.st-card b { grid-column: 1; font: 600 20px/1.05 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: #3A1D0C; }
.st-ch { grid-column: 2; grid-row: 1 / 3; align-self: start; font-size: 10.5px; color: #8A6E58; white-space: nowrap; }
.st-ch em { font-style: normal; font-weight: 700; color: #3C6A35; }
.st-spark { grid-column: 1 / -1; display: block; width: 100%; height: 20px; margin-top: 2px; overflow: visible; }
.st-spark .a { fill: rgba(139,74,35,.12); } .st-spark .l { fill: none; stroke: #8B4A23; stroke-width: 1.6; stroke-linejoin: round; }
.byo-devs .st-phone { right: 0; bottom: 0; width: 160px; height: 356px; border-radius: 28px; padding: 7px; box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.byo-devs .st-phone::before { width: 54px; height: 16px; top: 13px; }
.byo-devs .st-phone .pscreen { gap: 5px; padding: 10px 10px 0; border-radius: 22px; background: #F6EFE4; color: #3A1D0C; font-family: "Hanken Grotesk", var(--font); }
.byo-devs .st-phone .status { color: #3A1D0C; }
.st-phead { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.byo-devs .pscreen .st-plogo { width: 15px; height: 15px; flex-shrink: 0; }
.st-phead { gap: 5px; }
.st-phead b { font: 600 11px/1 "Fraunces", Georgia, serif; color: #5A2E14; white-space: nowrap; }
.st-pwhat { font-size: 9px; font-weight: 600; color: #7A5B45; white-space: nowrap; }
.st-card.ph { padding: 5px 8px 4px; border-radius: 7px; }
.st-card.ph .st-name { font-size: 10px; } .st-card.ph b { font-size: 15px; } .st-card.ph .st-ch { font-size: 9px; }
.st-card.ph .st-spark { height: 17px; margin-top: 2px; }
@media (max-width: 1000px) {
  .byo-intro, .byo-art { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .byo-art { margin-top: 32px; }
}
@media (max-width: 600px) {
  .byo-devs { display: flex; justify-content: center; padding: 0; }
  .byo-devs .laptop { display: none; }
  .byo-devs .st-phone { position: relative; right: auto; bottom: auto; }
}

/* --- 11. the next person: what the team made, kept, with who made it ------------------------------------------------- */
.tm { grid-template-rows: 46px auto; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.tm-body { padding: 18px 20px 20px; }
.tm-list { margin-top: 14px; border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.tm-head, .tm-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 58px; align-items: center; gap: 12px; padding: 0 14px; }
.tm-head { height: 36px; border-bottom: 1px solid var(--a-line-2); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--a-mute); }
.tm-hd { text-align: right; }
.tm-row { min-height: 58px; border-bottom: 1px solid var(--a-line-2); }
.tm-row:last-child { border-bottom: 0; }
.tm-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tm-name > span:last-child { min-width: 0; }
.tm-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--a-line); color: var(--a-primary); flex-shrink: 0; }
.tm-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--a-white); }
.tm-name small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--a-mute); }
.tm-name small em { font-style: normal; } .tm-name .published { color: var(--a-ok); } .tm-name .draft { color: #F1B65C; }
.tm-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--a-ink); white-space: nowrap; }
.av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; }
.av-sb { background: #8B4A23; } .av-dr { background: #4E63F1; } .av-t { background: #2E7D5B; }
.tm-when { text-align: right; font-size: 13px; color: var(--a-mute); white-space: nowrap; }
@media (max-width: 520px) {
  .tm-body { padding: 14px; }
  .tm-head, .tm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tm-hd, .tm-when { display: none; }
  .tm-who { font-size: 12.5px; }
  .tm-name b { white-space: normal; }
}
/* walk:end */
/* close:begin */
/* --- 12 to 15. the last sections, drawn (Kyle, 2026-10-30: "Okay, do them all"): the timeline of why now, with no numbers
   on it; what "yours" means as six cards; and Home's checklist as the product draws it. ----------------------------------- */
.why .copy.centered p { max-width: 40em; }
.why-fig { margin-top: 44px; }
.why-chart { --nw: 136px; position: relative; display: grid; row-gap: 0; padding: 30px 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.why-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; align-items: center; }
.why-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.why-track { position: relative; height: 100%; min-width: 0; }
.why-cost { height: 128px; }
.why-curve { position: absolute; left: 0; right: 0; top: 30px; bottom: 6px; width: 100%; height: calc(100% - 36px); overflow: visible; }
.why-curve .l { fill: none; stroke: var(--mute); stroke-opacity: .75; stroke-width: 2; stroke-linecap: round; }
.why-cl { position: absolute; left: 0; top: 0; font-size: 13.5px; color: var(--mute); white-space: nowrap; }
.why-cl b { font-weight: 500; }
.why-lane { height: 92px; border-top: 1px solid var(--line-2); }
.seg { position: absolute; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); top: 50%; height: 0; }
.seg i { position: absolute; left: 0; right: 3px; top: -3px; height: 6px; border-radius: 999px; }
.seg.amber i { background: #F1B65C; }
.seg.blue i { left: 3px; right: 0; background: var(--primary); }
.seg.dots i { top: -1.5px; height: 0; border-top: 3px dotted var(--mute-2); border-radius: 0; }
.seg b { position: absolute; left: 0; bottom: 12px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg.blue b { left: 10px; }
.seg.dots + .seg.amber b { left: auto; right: 0; }        /* the late set-up's words at its end, clear of the mark */
.why-flag { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(50% + 12px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.why-flag b { font-weight: 600; }
.why-flag.ok { background: color-mix(in srgb, var(--ok) 18%, var(--bg-2)); box-shadow: 0 0 0 4px var(--bg-2); color: var(--ok); }
.why-flag.ok svg.lu { width: 13px; height: 13px; }
.why-flag.warn { background: color-mix(in srgb, #F1B65C 16%, var(--bg-2)); box-shadow: 0 0 0 4px var(--bg-2); color: #F1B65C; }
.why-axis { height: 34px; border-top: 1px solid var(--line); }
.why-axis .why-track span { position: absolute; top: 9px; left: calc(var(--t) * 1%); transform: translateX(-50%); font-size: 13px; color: var(--mute); white-space: nowrap; }
.why-axis .why-track span:first-child { transform: none; } .why-axis .why-track span:last-child { transform: translateX(-100%); }
.why-axis b { font-weight: 400; }
.why-mark { position: absolute; z-index: 1; top: 30px; bottom: 52px; left: calc(28px + var(--nw) + (100% - 56px - var(--nw)) * var(--x) / 100); width: 0; border-left: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); }
.why-mark span { position: absolute; top: -26px; left: 0; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.why-mark span b { font-weight: 600; }
.l-short { display: none; }
/* drawn once in view: time sweeps left to right, the line falls, the mark and the flags land when the sweep reaches them */
.why-fig.is-run .seg, .why-fig.is-run .why-curve { transition: clip-path calc((var(--b, 100) - var(--a, 0)) * 16ms) linear calc(var(--a, 0) * 16ms); }
.why-fig.is-run:not(.drawn) .seg, .why-fig.is-run:not(.drawn) .why-curve { clip-path: inset(-40px 100% -40px 0); transition: none; }
.why-fig.is-run .seg, .why-fig.is-run .why-curve { clip-path: inset(-40px -40px -40px 0); }
.why-fig.is-run .why-mark, .why-fig.is-run .why-flag { transition: opacity 320ms var(--ease) calc(var(--x) * 16ms); }
.why-fig.is-run:not(.drawn) .why-mark, .why-fig.is-run:not(.drawn) .why-flag { opacity: 0; transition: none; }

/* 13. what "yours" means, six cards */
.tr-side { min-width: 0; }
.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.tr-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.tr-ico svg.lu { width: 18px; height: 18px; }
.tr-card b { font-size: 15px; font-weight: 600; color: var(--ink); }
.tr-card span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.tr-more { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--link); }

/* 15. the close: Home's checklist, drawn */
.ck { grid-template-rows: auto; align-self: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ck svg.lu { width: 16px; height: 16px; flex-shrink: 0; }
.ck-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--a-line-2); }
.ck-head b { flex: 1; font: 600 16px/1.2 var(--display); color: var(--a-white); }
.ck-n { font-size: 13px; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.ck-bar { display: flex; gap: 4px; }
.ck-bar i { width: 20px; height: 4px; border-radius: 999px; background: var(--a-line); }
.ck-bar i.on { background: var(--a-white); }
.ck-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 20px; border-bottom: 1px solid var(--a-line-2); font-size: 14px; color: var(--a-ink); }
.ck-c { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--a-line-3, #656c76); flex-shrink: 0; color: #fff; }
.ck-c svg.lu { width: 13px; height: 13px; stroke-width: 3; }
.ck-row.done .ck-c { border-color: transparent; background: var(--a-ok-fill, #347d39); }
.ck-row.done .ck-name { color: var(--a-mute); }
.ck-t { margin-left: auto; font-size: 13px; color: var(--a-mute); white-space: nowrap; }
.ck-row.open { align-items: flex-start; padding-top: 14px; padding-bottom: 16px; background: rgba(123,140,255,.06); }
.ck-row.open .ck-c { border-color: var(--a-primary); border-width: 2px; }
.ck-open b { display: block; font-size: 14px; font-weight: 600; color: var(--a-white); }
.ck-open p { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--a-mute); }
.ck-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; }

@media (max-width: 860px) {
  .trust { gap: 28px; }
}
@media (max-width: 640px) {
  .why-chart { --nw: 0px; padding: 26px 16px 14px; }
  .why-row { grid-template-columns: minmax(0, 1fr); }
  .why-cost .why-name, .why-axis .why-name { display: none; }
  .why-lane { height: 118px; grid-template-rows: 26px minmax(0, 1fr); align-items: stretch; }
  .why-lane .why-name { align-self: center; font-size: 14px; }
  .why-cost { height: 112px; }
  .why-mark { left: calc(16px + (100% - 32px) * var(--x) / 100); bottom: 48px; }
  .why-mark span { left: auto; right: 8px; top: 16px; transform: none; text-align: right; }
  .l-long { display: none; } .l-short { display: inline; }
  .seg b, .why-cl { font-size: 12.5px; }
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-head { padding: 14px 16px; } .ck-row { padding: 0 16px; } .ck-foot { padding: 12px 16px; }
  .ck-bar i { width: 12px; }
}
/* close:end */

/* --- 6 and 7, drawn in the app's own colours and sizes ---------------------------------------------------------------------
   Kyle, 2026-10-30: "Yes, fix both sections the way you described. Show me stills." Telling it once (a chat, the fact it
   saves, the Context library it files into) and the drawer behind a number. The app's dark tokens (web/src/styles.css),
   its type at its own sizes: words 14px, labels and secondary 12 to 13px, never a scaled picture. */
.app-ui { --a-bg: #212830; --a-bg-2: #151b23; --a-bg-3: #262c36; --a-line: #3d444d; --a-line-2: #353c45; --a-ink: #d1d7e0; --a-mute: #9198a1;
  --a-white: #f0f6fc; --a-primary: #7B8CFF; --a-soft: #2a3245; --a-ok: #5FCB9A;
  position: relative; display: grid; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg); color: var(--a-ink);
  font: 400 14px/1.45 var(--font); text-align: left; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.app-ui svg.lu { width: 16px; height: 16px; }
.app-head { display: flex; align-items: center; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--a-line-2); font-size: 14px; font-weight: 600; color: var(--a-white); }
.app-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--a-soft); color: var(--a-primary); flex-shrink: 0; }
.app-mark svg.lu { width: 15px; height: 15px; }

/* 6. telling it once */
.tell { grid-template-columns: minmax(0, 1fr) 198px; }
.tell-chat { display: flex; flex-direction: column; min-width: 0; }
.tell-log { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 22px; }
.tell-q { align-self: flex-end; max-width: 88%; padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: var(--a-bg-3); border: 1px solid var(--a-line-2); color: var(--a-white); }
.tell-typed { border-right: 2px solid transparent; }
.tell-a { display: flex; gap: 10px; align-items: flex-start; }
.tell-a p { margin: 2px 0 0; }
.tell-card { display: flex; gap: 10px; align-items: flex-start; margin-left: 36px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg-2); }
.tell-ok { color: var(--a-ok); padding-top: 1px; } .tell-ok svg.lu { width: 18px; height: 18px; }
.tell-card b { display: block; font-weight: 600; color: var(--a-white); }
.tell-card div > span { display: block; font-size: 13px; margin-top: 1px; }
.tell-card small { display: block; margin-top: 7px; font-size: 12px; color: var(--a-mute); }
.tell-box { display: flex; justify-content: space-between; align-items: center; margin: auto 16px 16px; padding: 9px 9px 9px 14px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-bg-2); font-size: 13px; color: var(--a-mute); }
.tell-send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-soft); color: var(--a-primary); } .tell-send svg.lu { width: 14px; height: 14px; }
.tell-lib { border-left: 1px solid var(--a-line-2); background: var(--a-bg-2); padding-bottom: 14px; }
.tell-group { padding: 14px 18px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.tell-row { display: flex; justify-content: space-between; align-items: center; height: 32px; margin: 0 8px; padding: 0 10px; border-radius: 6px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease); }
.tell-row i { font-style: normal; font-size: 13px; color: var(--a-mute); font-variant-numeric: tabular-nums; }
.tell-metrics { background: var(--a-soft); box-shadow: inset 2px 0 0 var(--a-primary); color: var(--a-white); }
.tell-metrics i { color: var(--a-white); font-weight: 600; }
.tell-n { display: inline-block; }
.tell-n.tick { animation: tell-tick 520ms var(--spring); }
@keyframes tell-tick { 40% { transform: scale(1.4); } }
.tell-fly { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--a-primary); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; }
.tell-fig.is-run [data-t] { opacity: 0; transform: translateY(6px); transition: opacity .38s var(--ease), transform .38s var(--ease); }
.tell-fig.is-run [data-t].on { opacity: 1; transform: none; }
.tell-fig.is-run .tell-typed.typing { border-right-color: var(--a-primary); }
.tell-fig.is-run .tell-metrics:not(.on) { background: transparent; box-shadow: none; color: var(--a-ink); }
.tell-fig.is-run .tell-metrics:not(.on) i { color: var(--a-mute); font-weight: 400; }

/* 7. the drawer behind a number; the picture sits left, so it does not repeat the section above */
@media (min-width: 1001px) { .two.mirror { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .two.mirror > figure { order: -1; } }
.calc { grid-template-columns: minmax(0, 1fr) 300px; }
.calc-page { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; }
.calc-card { position: relative; padding: 14px 16px 12px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-bg-3); transition: border-color .3s, box-shadow .3s; }
.calc-card.sel { border-color: var(--a-primary); box-shadow: 0 0 0 1px var(--a-primary); }
.calc-k { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.calc-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--a-soft); color: var(--a-primary); }
.calc-ico svg.lu { width: 14px; height: 14px; }
.calc-num { margin-top: 8px; font: 700 30px/1.15 var(--display); letter-spacing: -.02em; color: var(--a-white); font-variant-numeric: tabular-nums; }
.calc-num span { border-radius: 5px; padding: 0 3px; margin-left: -3px; transition: background .3s; }
.calc-card.sel .calc-num span { background: rgba(123,140,255,.16); }
.calc-num.small { font-size: 24px; }
.calc-delta { margin-top: 3px; font-size: 13px; color: var(--a-mute); }
.calc-delta b { color: var(--a-ok); font-weight: 600; }
.calc-spark { display: block; width: 100%; height: 36px; margin-top: 10px; }
.calc-ghost { opacity: .5; }
.calc-cursor { position: absolute; left: 127px; top: 57px; z-index: 3; width: 22px; height: 22px; pointer-events: none; }
.calc-tap { position: absolute; left: 132px; top: 62px; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(123,140,255,.9); background: rgba(123,140,255,.18); opacity: 0; pointer-events: none; }
.calc-drawer { display: flex; flex-direction: column; border-left: 1px solid var(--a-line); background: var(--a-bg-2); padding-bottom: 16px; transition: transform .45s var(--ease), opacity .4s var(--ease); }
.calc-dh { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--a-line-2); font-size: 14px; }
.calc-dh b { font-weight: 600; color: var(--a-white); }
.calc-x { display: grid; color: var(--a-mute); }
.calc-mean { margin: 14px 16px 6px; font-size: 14px; line-height: 1.5; color: var(--a-white); }
.calc-rows { margin: 4px 0 0; padding: 0 16px; }
.calc-rows > div { padding: 8px 0 9px; border-top: 1px solid var(--a-line-2); }
.calc-rows dt { margin-bottom: 1px; font-size: 12.5px; color: var(--a-mute); }
.calc-rows dd { margin: 0; font-size: 13.5px; color: var(--a-ink); }
.calc-rows code { font: 12.5px/1.5 var(--mono); color: var(--a-primary); }
.calc-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--a-ok); vertical-align: 1px; }
.calc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 16px 0; padding-top: 12px; border-top: 1px solid var(--a-line-2); font-size: 13px; font-weight: 500; color: var(--a-primary); }
.calc-fig [data-c] { transition: opacity .38s var(--ease), transform .38s var(--ease); }
.calc-fig.is-run:not(.open) .calc-drawer { transform: translateX(100%); opacity: 0; }
.calc-fig.is-run:not(.rows) [data-c] { opacity: 0; transform: translateY(6px); }
.calc-fig.is-run.rows [data-c] { transition-delay: calc(var(--k) * 130ms); }
.calc-fig.is-run:not(.clicked) .calc-card.sel { border-color: var(--a-line); box-shadow: none; }
.calc-fig.is-run:not(.clicked) .calc-card.sel .calc-num span { background: transparent; }
.calc-fig.is-run:not(.go) .calc-cursor { opacity: 0; }
@media (max-width: 860px), (hover: none) { .calc-cursor { display: none; } }

/* one column on a phone: the library under the chat, the drawer under the card */
@media (max-width: 640px) {
  .tell { grid-template-columns: minmax(0, 1fr); }
  .tell-lib { display: grid; grid-template-columns: 1fr 1fr; align-content: start; border-left: 0; border-top: 1px solid var(--a-line-2); padding: 0 0 10px; }
  .tell-lib .app-head { grid-column: 1 / -1; }
  .tell-group { display: none; }
  .tell-row { margin: 6px 6px 0 8px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-ghost { display: none; }
  .calc-drawer { border-left: 0; border-top: 1px solid var(--a-line); }
  .calc-fig.is-run:not(.open) .calc-drawer { transform: translateY(28px); }
}

/* --- 8. the phone: one phone that opens the company's app from its icon, and the Monday email (Kyle, 2026-10-30: "Yes,
   fix both sections the way you described. Show me stills."). The phone is the hero's, full screen with no browser bar;
   the email is the product's own white card, its numbers the hero's store's week of Oct 19 to 25. ---------------------------- */
.phones { display: flex; justify-content: center; align-items: flex-start; gap: 44px; margin-top: 56px; flex-wrap: wrap; }
.ph8 { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ph8 .scene-foot { justify-content: center; }
.ph8 .pscreen .status { position: relative; z-index: 7; color: #3A1D0C; }
.ph8 .pscreen .ph-home { display: flex; position: absolute; inset: 0; z-index: 4; padding: 30px 14px 0; background: linear-gradient(180deg, #2B3550, #151A2B); }
.ph8-app { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: 34px 14px 0; background: #F6EFE4; transform-origin: 50% 50%; }
.ph8-tap { position: absolute; z-index: 6; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.5); opacity: 0; pointer-events: none; }
.ph8.is-run:not(.open) .ph8-app { visibility: hidden; }
.ph8.is-run:not(.open) .pscreen .status { color: #E6E8EC; }
.em { margin: 0; width: 440px; max-width: 100%; height: 524px; display: flex; flex-direction: column; padding: 18px 24px 22px; border-radius: 16px; background: #fff; color: #1B2130;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); text-align: left; font: 400 14px/1.5 var(--font); }
.em-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #EEEAE2; font-size: 12.5px; color: #6B7280; }
.em-from { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #3A1D0C; }
.em-logo { width: 22px; height: 22px; }
.em-title { margin-top: 16px; font: 600 20px/1.3 var(--display); letter-spacing: -.01em; color: #121826; }
.em-hi { margin: 6px 0 0; color: #3B4256; }
.em-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.em-tiles div { padding: 10px 12px 11px; border-radius: 10px; background: #F4F1EB; }
.em-tiles span, .em-tiles small { display: block; font-size: 12.5px; color: #6B7280; }
.em-tiles b { display: block; margin: 3px 0 2px; font: 700 21px/1.15 var(--display); letter-spacing: -.01em; color: #121826; font-variant-numeric: tabular-nums; }
.em-chart { margin-top: 16px; }
.em-ch { font-size: 12.5px; color: #6B7280; }
.em-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 118px; margin-top: 6px; border-bottom: 1px solid #E2DED5; }
.em-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.em-bar em { margin-bottom: 4px; font-style: normal; font-size: 11.5px; color: #4B5263; font-variant-numeric: tabular-nums; }
.em-bar i { width: 22px; height: calc(var(--h) * .76); border-radius: 4px 4px 0 0; background: #6478FF; }
.em-bar span { position: absolute; top: 100%; margin-top: 5px; font-size: 12px; color: #6B7280; }
.em-moved { margin: 32px 0 0; color: #3B4256; }
.em-moved b { color: #121826; font-weight: 600; }
.em-link { margin-top: auto; font-weight: 600; color: #4E63F1; }
@media (max-width: 640px) {
  .em { height: auto; padding: 16px 16px 18px; }
  .em-head { flex-wrap: wrap; row-gap: 4px; } .em-head > span { white-space: nowrap; }
  .em-tiles { gap: 6px; } .em-tiles div { padding: 8px 9px 9px; } .em-tiles span { font-size: 11.5px; white-space: nowrap; } .em-tiles b { font-size: 17px; }
  .em-bar em { font-size: 10.5px; } .em-bar i { width: 18px; }
  .em-link { margin-top: 14px; }
}

/* --- 9. when something breaks: the app's own inbox, a list and the panel that opens on a row; the broken model is fixed with
   one Yes and moves to Handled for you ------------------------------------------------------------------------------------- */
@media (min-width: 1001px) { .two.wide { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }
.inb { grid-template-rows: auto auto 1fr; }
.inb-head { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--a-line-2); }
.inb-head > b { font: 600 18px/1 var(--display); color: var(--a-white); }
.inb-month { font-size: 13px; color: var(--a-mute); }
.inb-tabs { display: flex; gap: 4px; padding: 11px 12px; border-bottom: 1px solid var(--a-line-2); font-size: 13.5px; color: var(--a-mute); white-space: nowrap; }
.inb-tabs span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; }
.inb-tabs span.on { color: var(--a-white); background: var(--a-bg-3); box-shadow: inset 0 0 0 1px var(--a-line); }
.inb-tabs i, .inb-month .inb-n { display: inline-block; font-style: normal; font-variant-numeric: tabular-nums; }
.inb-n.tick { animation: tell-tick 520ms var(--spring); }
.inb-body { display: grid; grid-template-columns: minmax(0, 1fr) 258px; height: 364px; }
.inb-list { min-width: 0; }
.inb-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 11px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--a-line-2); overflow: hidden; }
.inb-ico { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--a-line); color: var(--a-mute); }
.inb .inb-ico svg.lu { width: 15px; height: 15px; }
.inb-ico .dot { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: #F08A6B; box-shadow: 0 0 0 2px var(--a-bg); }
.inb-row:has(.inb-st.line) .dot { background: #F1B65C; }
.inb-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inb-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.inb-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--a-white); }
.inb-name small { font-size: 12.5px; color: var(--a-mute); }
.inb-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--a-mute); }
.inb-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; font-size: 12.5px; }
.inb-when { color: var(--a-mute); }
.inb-st { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.inb .inb-st svg.lu { width: 13px; height: 13px; }
.inb-st.broke { color: #F08A6B; } .inb-st.line { color: #F1B65C; } .inb-st.moved { color: var(--a-mute); } .inb-st.yes { color: #8F9DFF; }
.inb-st.fixed { display: none; color: var(--a-ok); }
.inb-panel { min-width: 0; overflow: hidden; border-left: 1px solid var(--a-line); background: var(--a-bg-2); }
.inb-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--a-line-2); }
.inb-ph b { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--a-white); }
.inb-x { display: grid; color: var(--a-mute); }
.inb-pb { padding: 13px 16px 16px; }
.inb-pb p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--a-ink); }
.inb-fix b { font-weight: 600; color: var(--a-white); }
.inb-acts { display: none; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inb-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.inb-btn.primary { background: #4E63F1; color: #fff; }
.inb-btn.quiet { padding: 0 8px; font-weight: 500; color: var(--a-primary); }
.inb-fixing { display: none; align-items: center; gap: 8px; height: 32px; margin-top: 6px; font-size: 13px; color: var(--a-mute); }
.inb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(123,140,255,.28); border-top-color: #7B8CFF; animation: hs-spin 800ms linear infinite; }
.inb-done { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(95,203,154,.35); background: rgba(95,203,154,.1); font-size: 13.5px; line-height: 1.45; color: var(--a-ok); }
.inb .inb-done svg.lu { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.inb-done span { color: var(--a-white); }
.inb-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; pointer-events: none; opacity: 0; }
.inb-tap { position: absolute; left: 0; top: 0; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(123,140,255,.9); background: rgba(123,140,255,.18); opacity: 0; pointer-events: none; }
/* the page's still is the end: the broken row gone, the panel showing the fix done, the counts at 3 and 38 */
.inb-fig:not(.is-run) .inb-r1 { display: none; }
.inb-fig.is-run .inb-done { display: none; }
.inb-fig.is-run .inb-acts { display: flex; }
.inb-fig.is-run:is(.fixing, .fixed) .inb-acts { display: none; }
.inb-fig.is-run.fixing:not(.fixed) .inb-fixing { display: flex; }
.inb-fig.is-run.fixed .inb-done { display: flex; animation: hs-rise 320ms var(--ease) both; }
.inb-fig.is-run .inb-body { grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns 460ms var(--ease); }
.inb-fig.is-run.open .inb-body { grid-template-columns: minmax(0, 1fr) 258px; }
.inb-fig.is-run:not(.open) .inb-panel { border-left-color: transparent; }
.inb-fig.is-run.open :is(.inb-ph, .inb-pb > p, .inb-acts) { animation: hs-rise 300ms var(--ease) both; }
.inb-fig.is-run.open .inb-pb > p { animation-delay: 140ms; } .inb-fig.is-run.open .inb-pb > p + p { animation-delay: 230ms; } .inb-fig.is-run.open .inb-acts { animation-delay: 320ms; }
.inb-fig.is-run .inb-row { transition: background 260ms var(--ease), box-shadow 260ms var(--ease); }
.inb-fig.is-run.sel .inb-r1 { background: var(--a-soft); box-shadow: inset 2px 0 0 var(--a-primary); }
.inb-fig.is-run.fixed .inb-r1 .inb-st.broke, .inb-fig.is-run.fixed .inb-r1 .dot { display: none; }
.inb-fig.is-run.fixed .inb-r1 .inb-st.fixed { display: inline-flex; animation: hs-pop 360ms var(--spring) both; }
.inb-fig.go .inb-cursor { opacity: 1; }
@media (max-width: 860px), (hover: none) { .inb-cursor { display: none; } }
@media (max-width: 640px) {
  .inb-body, .inb-fig.is-run .inb-body, .inb-fig.is-run.open .inb-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .inb-panel { border-left: 0; border-top: 1px solid var(--a-line); }
  .inb-fig.is-run:not(.open) .inb-panel { display: none; }
  .inb-head { padding: 0 14px; } .inb-tabs { gap: 0; padding: 10px 6px; font-size: 12px; } .inb-tabs span { gap: 5px; padding: 0 8px; }
}

/* --- 10. bring your own AI -------------------------------------------------------------------------------------------------- */
.term { border: 1px solid var(--line); border-radius: 14px; background: #0B0F1C; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.term-top { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.term-top i { width: 10px; height: 10px; border-radius: 50%; background: #3A4460; } .term-top i:first-child { background: #E5564B; } .term-top i:nth-child(2) { background: #E3B341; } .term-top i:nth-child(3) { background: #4BC26B; }
.term-top span { margin-left: 6px; }
.term pre { margin: 0; padding: 16px 18px; font: 13px/1.75 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.term .ps { color: var(--mute-2); } .term .dim { color: var(--mute); } .term .ok { color: #5FCB9A; } .term .you { color: var(--primary); } .term b { color: var(--ink); font-weight: 600; letter-spacing: .06em; }

/* --- 12. why now, words in three columns -------------------------------------------------------------------------------------- */
.three-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.three-words p { font-size: 16px; line-height: 1.65; color: var(--mute); padding-top: 20px; border-top: 1px solid var(--line); }

/* --- 13. your data, 14. plans, 15. the close ------------------------------------------------------------------------------------ */
.trust-s .trust ul { font-size: 15px; }
.pricing-s .three { margin-top: 32px; }
.pricing-s .plan { gap: 12px; }
.pricing-s .plan h3 { font-size: 20px; font-weight: 600; }
.pricing-s .plan p { font-size: 15px; color: var(--mute); line-height: 1.55; flex: 1; }
.plans-note { margin-top: 20px; font-size: 14px; color: var(--mute); }
.closing2 { padding-bottom: 120px; }

/* --- narrower screens ----------------------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .two { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .walk-grid { grid-template-columns: minmax(0, 1fr); }
  .walk .rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .walk .rail a { padding: 7px 10px; font-size: 13px; }
  .three-words { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .marketing-home section { padding: 64px 0; }
  .marketing-home section h2 { font-size: 30px; }
  .start h2 { font-size: 32px; }
  .big-p { font-size: 19px; }
  .hero2 { padding: 42px 0 34px; }
  .hero2-wrap { width: calc(100% - 40px); }
  .hero2 .eyebrow { font-size: 15px; margin-bottom: 22px; }
  .hero2 h1 { font-size: clamp(1.75rem, 8.7vw, 2.5rem); }
  .hero2 h1 .d { display: none; } .hero2 h1 .m { display: inline; }
  .hero2 .sub { font-size: 17px; margin-top: 24px; }
  .hero2 .actions { flex-direction: column; gap: 8px; margin-top: 26px; }
  .hero2 .actions .btn, .hero2 .actions .text-link { width: 100%; justify-content: center; }
  .hero-card { margin-top: 40px; padding: 0 0 24px; }
  .hero-card + .logos-in-hero { margin-top: 40px; }
  .logos-in-hero { margin-top: 36px; }
  .laptop { width: 100%; }
  .laptop .base { margin: 0 -10px; }
  .phone { width: 132px; height: 300px; right: -10px; bottom: -22px; border-radius: 22px; padding: 5px; }
  .phone::before { width: 40px; height: 11px; top: 10px; }
  .phone.static { width: 238px; height: 524px; border-radius: 38px; padding: 9px; }
  .phone.static::before { width: 72px; height: 20px; top: 18px; }
  .hero2 .pscreen { border-radius: 18px; padding: 8px 9px 0; gap: 6px; font-size: 7px; }
  .hero2 .pscreen .status { font-size: 6px; }
  .hero2 .pscreen .ask { width: 22px; height: 22px; right: 8px; bottom: 9px; }
  .hero2 
  .marks { gap: 36px; } .marks li { font-size: 14px; }
  .phones { gap: 24px; }
  .part-row h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .replay { display: none; }
  .marquee .marks { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 28px 40px; padding: 0 24px; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* --- 5b. the real-world mess (2026-10-29): six messy inputs on wires, each landing as a table in a lake of your own. The
   onboarding demo's lake scene (the whatis screen) on the site's tokens, the way section 4 ports the fold. ----------------- */
.mess-s { padding: 96px 0; }
.mess-s .copy p { max-width: 34em; }
.lakebox { position: relative; width: 590px; max-width: 100%; height: 340px; --s: 1; }
.lakebox > .lake { position: absolute; left: 0; top: 0; width: 590px; height: 340px; transform: scale(var(--s)); transform-origin: top left; }
.lake svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lake .wire { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0; }
.lake.live .wire { animation: flow 1s linear infinite; opacity: .6; transition: opacity 240ms var(--ease) var(--d); }
.lake .src { position: absolute; left: 0; top: var(--y); display: flex; align-items: center; gap: 9px; width: 198px; opacity: 0; }
.lake .src .tile { width: 40px; height: 40px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: none; }
.lake .src .tile svg { width: 20px; height: 20px; }
.lake .src .tile.real { background: #fff; border-color: #E9E5DC; } .lake .src .tile.real img { width: 24px; height: 24px; display: block; }
.lake .src small { font-size: 12px; line-height: 1.25; font-weight: 500; color: var(--ink); }
.lake.live .src { animation: pop 300ms var(--spring) var(--d) both; }
.lake .pool { position: absolute; left: 270px; top: 8px; width: 320px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; }
.lake.live .pool { animation: rise 300ms var(--ease) 40ms both; }
.lake .pool .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lake .pool .hd .brand { font-size: 15px; } .lake .pool .hd small { font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.lake .pool .tabs { display: flex; flex-direction: column; gap: 6px; }
.lake .pool .tb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line-2); font: 12px/1 var(--mono); color: var(--ink); opacity: 0; }
.lake .pool .tb i { font-style: normal; margin-left: auto; font: 11px/1 var(--font); color: var(--mute); }
.lake .pool .tb > svg { width: 13px; height: 13px; color: var(--mute); flex-shrink: 0; }
.lake .pool .tb .aid { flex-basis: 100%; display: flex; align-items: center; gap: 5px; font: 500 11px/1 var(--font); color: var(--primary); padding-left: 21px; }
.lake .pool .tb .aid svg { width: 12px; height: 12px; }
.lake.live .pool .tb { animation: pop 300ms var(--spring) var(--d) both; }
.lake .outs { position: absolute; left: 270px; top: 300px; width: 320px; display: flex; justify-content: space-between; gap: 4px; opacity: 0; }
.lake .outs .chip-out { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.lake .outs .chip-out svg { width: 13px; height: 13px; }
.lake.live .outs { animation: rise 260ms var(--ease) var(--d) both; }
.lakebox.still .src, .lakebox.still .pool, .lakebox.still .tb, .lakebox.still .outs { opacity: 1; animation: none; }
.lakebox.still .wire { opacity: .6; }
.scene-foot { display: flex; justify-content: flex-end; margin-top: 10px; min-height: 20px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .mess-s { padding: 56px 0; } }

/* The lake scene's six input tiles: all white with the mark in its own colour, so the Sheets mark isn't the only one that pops (Kyle, 2026-10-29). */
.lake .src .tile { background: #fff; border-color: #E9E5DC; color: #0F1424; }
.lake .src:nth-of-type(1) .tile { color: #4E63F1; }
.lake .src:nth-of-type(2) .tile { color: #E5484D; }
.lake .src:nth-of-type(4) .tile { color: #0EA5E9; }
.lake .src:nth-of-type(5) .tile { color: #F59E0B; }
.lake .src:nth-of-type(6) .tile { color: #7C3AED; }
.lake .src .tile svg { stroke-width: 2.2; }

/* The mess section stacked: words centred on top, the lake scene wide beneath, so it reads differently from Then and now (Kyle, 2026-10-29). */
.mess-s .wrap.stack { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.mess-s .copy.centered p { max-width: 38em; }
.mess-s .scenefig { width: 100%; max-width: 885px; }
.mess-s .lakebox { width: 100%; max-width: 885px; margin: 0 auto; }
@media (max-width: 860px) { .mess-s .wrap.stack { gap: 28px; } }

/* One type scale for both scenes (Kyle, 2026-10-29: "uniformity across the page"): labels 14px, secondary 12 to 13px, and no scene scaled up.
   The lake lays out wide at natural size on a laptop; Then and now gets a wider column so it is not shrunk. */
.lake .src small { font-size: 14px; }
.lake .pool .hd small { font-size: 12px; }
.lake .pool .tb { font-size: 13px; padding: 8px 10px; }
.lake .pool .tb i { font-size: 12px; }
.lake .pool .tb .aid { font-size: 12px; }
.lake .outs .chip-out { font-size: 12px; height: 30px; }
@media (min-width: 861px) {
  .mess-s .lakebox { --base: 885; --baseh: 372; max-width: 885px; }
  .mess-s .lakebox > .lake { width: 885px; height: 372px; }
  .mess-s .lake .src { width: 300px; }
  .mess-s .lake .pool, .mess-s .lake .outs { left: 395px; width: 490px; }
  .mess-s .lake .outs { top: 332px; justify-content: flex-start; gap: 10px; }
  .thennow-s .two { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.era .lbl, .era .lbl i { font-size: 13px; }
.era .role { font-size: 14px; }
.era.now .big { font-size: 14px; }
.chaos .tool small { font-size: 13px; }

/* --- the hero scene (2026-10-30, stage one: six states, no motion yet; Kyle: "something more like that", GitHub's scripted hero,
   then "more than that, like showing the data connections"). The app's screens as stylised, site-local markup on the app's tokens
   inside the laptop, drawn at 1440x900 and scaled to the laptop's screen. Everything is scoped under .hs so nothing reaches the
   site's own styles. The state is a class on .hero2-art, beat-1 to beat-8; the page reads ?beat=N or #beat-N, else beat-8. -------- */
.hs-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: #202733; --hs: .5805; }
.hs { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform: scale(var(--hs)); transform-origin: top left; display: grid; grid-template-columns: 56px minmax(0, 1fr) 400px; background: #202733; color: #E6E8EC; font: 13px/1.4 var(--font); text-align: left; letter-spacing: 0; }
.hs * { box-sizing: border-box; }
.hs .hs-i, .ph-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hs-rail { background: #1A2029; border-right: 1px solid #303947; display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; gap: 6px; }
.hs-org { width: 30px; height: 30px; border-radius: 8px; background: #7A4A26; color: #fff; font: 700 12px/30px var(--font); text-align: center; margin-bottom: 14px; }
.hs-ri { width: 40px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #9BA3B9; position: relative; }
.hs-ri.hs-ask { color: #7B8CFF; margin-bottom: 8px; }
.hs-ri.on { background: #262E3A; color: #E6E8EC; }
.hs-ri.on::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #7B8CFF; }
.hs-sep { width: 24px; height: 1px; background: #303947; margin: 6px 0; }
.hs-grow { flex: 1; }
.hs-avatar { width: 28px; height: 28px; border-radius: 50%; background: #3B4E8A; color: #E6E8EC; font: 600 10px/28px var(--font); text-align: center; margin: 4px 0; }
.hs-main { min-width: 0; display: flex; flex-direction: column; }
.hs-top { height: 50px; border-bottom: 1px solid #303947; display: flex; align-items: center; gap: 4px; padding: 0 28px; }
.hs-tab { padding: 6px 14px; border-radius: 999px; color: #9BA3B9; font-size: 13px; }
.hs-tab.on { background: #2A3240; color: #E6E8EC; border: 1px solid #303947; }
.hs-page { padding: 34px 32px 0 40px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; flex: 1; }
.hs-screen { display: none; flex-direction: column; }
.hs-crumbs { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #9BA3B9; }
.hs-crumb a { color: #7B8CFF; }
.hs-actions { display: flex; align-items: center; gap: 8px; }
.hs-said { color: #9BA3B9; margin-right: 6px; }
.hs-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid #303947; background: #262E3A; color: #E6E8EC; font-size: 13px; white-space: nowrap; }
.hs-btn.ghost { border-color: transparent; background: transparent; }
.hs-btn.primary { background: #7B8CFF; color: #0F1424; border-color: transparent; font-weight: 600; }
.hs-btn .hs-dd { width: 13px; height: 13px; }
.hs-title { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; color: #E6E8EC; }
.hs-sales .hs-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.hs-sources .hs-title-row { margin-top: 0; }
.hs-line { color: #9BA3B9; font-size: 13px; margin-top: 6px; }
.hs-tabs { display: flex; gap: 20px; margin-top: 22px; border-bottom: 1px solid #303947; font-size: 13px; color: #9BA3B9; }
.hs-tabs span { padding: 0 0 10px; }
.hs-tabs span.on { color: #E6E8EC; font-weight: 500; box-shadow: inset 0 -2px 0 #7B8CFF; }
/* the Sources screen */
.hs-connect { margin-top: 22px; border: 1px solid #7B8CFF; border-radius: 14px; background: #262E3A; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.hs-chead2 { display: flex; align-items: center; gap: 12px; }
.hs-smark { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hs-smark img, .hs-smark svg { width: 24px; height: 24px; display: block; }
.hs-sname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hs-sname b { font-size: 14px; font-weight: 600; color: #E6E8EC; }
.hs-sname small { font-size: 12px; color: #9BA3B9; }
.hs-connected { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: #5FCB9A; font-weight: 500; }
.hs-connected .hs-i { width: 14px; height: 14px; }
.hs-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hs-flabel { flex-basis: 100%; font-size: 12px; color: #9BA3B9; }
.hs-field { display: flex; align-items: center; gap: 8px; width: 440px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #7B8CFF; background: #202733; box-shadow: 0 0 0 3px rgba(123,140,255,.2); color: #9BA3B9; }
.hs-field .hs-i { width: 15px; height: 15px; }
.hs-dots { font: 13px var(--mono); color: #E6E8EC; letter-spacing: .06em; }
.hs-go { height: 36px; padding: 0 16px; }
.hs-prog { height: 6px; border-radius: 3px; background: #303947; overflow: hidden; }
.hs-prog i { display: block; height: 100%; width: 100%; background: #7B8CFF; border-radius: 3px; }
.hs-done { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #5FCB9A; font-weight: 500; }
.hs-done .hs-i { width: 15px; height: 15px; }
.hs-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.hs-src { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #303947; background: #262E3A; }
.hs-src .hs-smark { width: 34px; height: 34px; border-radius: 9px; } .hs-src .hs-smark img, .hs-src .hs-smark svg { width: 20px; height: 20px; }
.hs-sbtn { font-size: 12px; color: #9BA3B9; border: 1px solid #303947; border-radius: 7px; padding: 5px 10px; }
/* the Sales page: the Westside page, the company's own page framed in the app (Kyle, 2026-10-30, after picking it: "This
   needs to actually be a good analytics dashboard."). Cream and leather browns, the wordmark and the big numbers in
   Fraunces, the words and the lists in Hanken Grotesk. Four numbers, then net sales month to date against September as
   two lines, then by store from beat 4. Sizes are the stage's own pixels, set to read at the hero's scale. */
.wp { margin-top: 16px; padding: 18px 22px 20px; border-radius: 14px; border: 1px solid #3A4454; background: #F6EFE4; color: #3A1D0C;
  font: 500 15px/1.35 "Hanken Grotesk", var(--font); text-align: left; }
.wp .hs-i { width: 15px; height: 15px; }
.wp-head { display: flex; align-items: center; gap: 12px; height: 46px; }
.wp-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wp-logo { width: 32px; height: 32px; }
.wp-word { font: 600 24px/1 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 72; letter-spacing: -.01em; color: #5A2E14; white-space: nowrap; }
.wp-names { display: flex; flex-direction: column; gap: 4px; }
.wp-what { font-size: 13.5px; font-weight: 600; color: #7A5B45; white-space: nowrap; }
.wp-gap { flex: 1; }
.wp-alert, .wp-pill { align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.wp-alert { display: none; background: #FFFBF5; border: 1px solid #E0CFB8; color: #7A5B45; }
.wp-alert .wa-f { display: none; }
.wp-pill { display: inline-flex; background: #FFFBF5; border: 1px solid #E0CFB8; color: #5A2E14; }
.wp-pill .hs-i:last-child { width: 13px; height: 13px; opacity: .7; }
.wp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.wp-kpi, .wp-card { min-width: 0; border-radius: 12px; background: #FDF9F3; border: 1px solid #E8DAC6; }
.wp-kpi { display: flex; flex-direction: column; padding: 13px 16px 14px; }
.wp-kl { font-size: 15px; font-weight: 600; color: #7A5B45; }
.wp-kn { margin-top: 6px; font: 600 36px/1 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.wp-kc { margin-top: 9px; font-size: 14px; color: #8A6E58; white-space: nowrap; }
.wp-kc b, .wp-rank em, .wpp-kc b, .wpp-rank em { color: #3C6A35; font-weight: 700; font-style: normal; }
.wp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; margin-top: 14px; }
.wp-card { padding: 14px 18px 12px; }
.wp-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap; }
.wp-ch b { font-size: 16px; font-weight: 700; }
.wp-ch > span { font-size: 14px; color: #8A6E58; }
.wp-legend { display: inline-flex; align-items: center; gap: 8px; }
.wp-legend i, .wpp-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid #8B4A23; }
.wp-legend i.sep, .wpp-legend i.sep { border-top: 2.5px dashed #A8998A; margin-left: 8px; }
.wp-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 274px auto; margin-top: 16px; }
.wp-y { position: relative; }
.wp-y span { position: absolute; right: 10px; top: calc(var(--y) * 1%); transform: translateY(-50%); font-size: 13.5px; color: #8A6E58; }
.wp-plot { position: relative; }
.wp-grid { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1%); height: 1px; background: #EBDDCA; }
.wp-grid[style*="--y:100"] { background: #D5C2AA; }
.wp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-oct { stroke: #8B4A23; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.wp-sep { stroke: #A8998A; stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linejoin: round; }
.wp-total { position: absolute; left: 0; right: 0; top: calc(var(--y) * 1%); border-top: 1.5px solid #CDB89F; }
.wp-total em { position: absolute; left: 4px; top: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: #7A5B45; white-space: nowrap; }
.wp-pass { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #FDF9F3; border: 2.5px solid #8B4A23; }
.wp-now { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #8B4A23;
  box-shadow: 0 0 0 3px #FDF9F3, 0 0 0 9px rgba(139,74,35,.16); }
.wp-now em { position: absolute; right: 24px; top: calc(50% - 9px); transform: translateY(-50%); padding: 2px 7px; border-radius: 6px; background: #FDF9F3;
  font-style: normal; font-size: 14.5px; font-weight: 600; color: #5A2E14; white-space: nowrap; }
.wp-now em b { font-weight: 800; color: #3A1D0C; }
.wp-x { position: relative; height: 26px; }
.wp-x span { position: absolute; top: 8px; left: calc(var(--x) * 1%); transform: translateX(-50%); font-size: 13.5px; color: #8A6E58; white-space: nowrap; }
.wp-x span:first-child { transform: translateX(-30%); } .wp-x span:last-child { transform: translateX(-80%); }
.wp-rank, .wpp-rank { list-style: none; margin: 0; padding: 0; display: grid; }
.wp-rank { gap: 16px; margin-top: 18px; }
.wp-rank li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 8px; align-items: center; }
.wp-rn { grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EFE3D2; color: #5A2E14; font-size: 13px; font-weight: 700; }
.wp-rank li:first-child .wp-rn { background: #8B4A23; color: #FDF9F3; }
.wp-sn { font-size: 15.5px; font-weight: 600; }
.wp-rank b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wp-bar { position: relative; height: 8px; border-radius: 999px; background: #EFE3D2; overflow: hidden; }
.wp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 999px; background: #8B4A23; }
.wp-rank em { justify-self: end; font-size: 14px; }
/* the same page on the phone, in em of the phone's 11px */
.wpp { display: flex; flex-direction: column; color: #3A1D0C; font-family: "Hanken Grotesk", var(--font); text-align: left; }
.wpp-head { display: flex; align-items: center; gap: .55em; margin-top: .2em; }
.pscreen .wpp-logo { width: 2.1em; height: 2.1em; flex-shrink: 0; }
.wpp-head b { font: 600 1.5em/1 "Fraunces", Georgia, serif; color: #5A2E14; white-space: nowrap; }
.wpp-what { margin-top: .8em; font-size: .95em; font-weight: 600; color: #7A5B45; }
.wpp-kl { margin-top: 1.1em; font-size: .95em; font-weight: 600; color: #7A5B45; }
.wpp-num { margin-top: .15em; font: 600 3.3em/1 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.wpp-kc { margin-top: .45em; font-size: .9em; color: #8A6E58; }
.wpp-chart { margin-top: 1.1em; }
.wpp-chart .wp-plot { height: 7.4em; }
.wpp .wp-oct { stroke-width: 2; } .wpp .wp-sep { stroke-width: 1.6; stroke-dasharray: 4 3.5; }
.wpp .wp-total { border-top-width: 1px; }
.wpp .wp-now { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 2px #F6EFE4, 0 0 0 6px rgba(139,74,35,.16); }
.wpp-x { display: flex; justify-content: space-between; margin-top: .4em; font-size: .78em; color: #8A6E58; }
.wpp-legend { display: flex; align-items: center; gap: .45em; margin-top: .55em; font-size: .78em; color: #7A5B45; white-space: nowrap; }
.wpp-legend i { width: 1.5em; border-top-width: 2px; } .wpp-legend i.sep { border-top-width: 1.6px; margin-left: .5em; }
.wpp-stores { margin-top: 1.1em; }
.wpp-h { font: 600 1.15em/1 "Fraunces", Georgia, serif; }
.wpp-rank { gap: .6em; margin-top: .7em; }
.wpp-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.7em; column-gap: .5em; row-gap: .3em; align-items: baseline; }
.wpp-sn { font-size: .95em; font-weight: 600; }
.wpp-rank b { font-size: .95em; font-weight: 700; }
.wpp-rank em { font-size: .8em; text-align: right; }
.wpp-rank .wp-bar { grid-column: 1 / -1; height: .4em; }
@media (max-width: 768px) { .hero2 .pscreen .wpp { font-size: .86em; } }
/* the chat beside the page */
.hs-chat { border-left: 1px solid #303947; display: flex; flex-direction: column; min-height: 0; background: #202733; }
.hs-chead { padding: 22px 20px 14px; border-bottom: 1px solid #303947; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: center; }
.hs-ctitle { font-size: 14px; font-weight: 600; color: #E6E8EC; }
.hs-ct-sales, .hs-pl-sales, .hs-pl-of { display: none; }
.hs-x { color: #9BA3B9; } .hs-x .hs-i { width: 16px; height: 16px; }
.hs-place { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9BA3B9; }
.hs-place .hs-i { width: 14px; height: 14px; } .hs-place b { color: #E6E8EC; font-weight: 500; }
.hs-log { flex: 1; min-height: 0; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.hs-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 10px 6px; }
.hs-orb { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.hs-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(123,140,255,.5); }
.hs-orb-core { width: 36px; height: 36px; border-radius: 50%; background: rgba(123,140,255,.16); color: #7B8CFF; display: flex; align-items: center; justify-content: center; }
.hs-hq { font: 600 18px/1.2 var(--display); color: #E6E8EC; }
.hs-hsub { font-size: 13px; color: #9BA3B9; }
.hs-q { align-self: flex-end; max-width: 84%; background: #2A3240; border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 14px; color: #E6E8EC; }
.hs-a { display: flex; gap: 10px; align-items: flex-start; }
.hs-mark { width: 24px; height: 24px; border-radius: 7px; background: rgba(123,140,255,.16); color: #7B8CFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hs-mark .hs-i { width: 14px; height: 14px; }
.hs-said-a { min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: #E6E8EC; }
.hs-said-a p { margin: 0; }
.hs-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-chip { font-size: 13px; border: 1px solid #303947; border-radius: 999px; padding: 6px 12px; background: #262E3A; color: #E6E8EC; }
.hs-chip.yes { color: #7B8CFF; border-color: rgba(123,140,255,.5); background: rgba(123,140,255,.14); font-weight: 500; }
.hs-art { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 12px; border-radius: 10px; border: 1px solid #303947; background: #262E3A; font-size: 13px; color: #9BA3B9; }
.hs-art .hs-i { width: 15px; height: 15px; color: #7B8CFF; } .hs-art b { color: #E6E8EC; font-weight: 500; }
.hs-atable { border-collapse: collapse; font-size: 13px; width: 100%; }
.hs-atable th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9BA3B9; padding: 4px 0; border-bottom: 1px solid #303947; }
.hs-atable td { padding: 6px 0; border-bottom: 1px solid #303947; }
.hs-atable th:last-child, .hs-atable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hs-trust { font-size: 12.5px; color: #9BA3B9; line-height: 1.5; padding-left: 10px; border-left: 2px solid #303947; }
.hs-trust .hs-i { width: 13px; height: 13px; color: #5FCB9A; vertical-align: -2px; margin-right: 4px; }
.hs-trust b { color: #5FCB9A; font-weight: 600; }
.hs-dock { padding: 10px 16px 14px; }
.hs-box { border: 1px solid #303947; border-radius: 10px; background: #262E3A; padding: 12px 14px 10px; }
.hs-input { font-size: 14px; min-height: 42px; color: #E6E8EC; }
.hs-ph1 { color: #9BA3B9; }
.hs-typed { display: none; }
.hs-caret { display: inline-block; width: 1.5px; height: 15px; background: #7B8CFF; vertical-align: -3px; margin-left: 2px; }
.hs-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.hs-hint { font-size: 11.5px; color: #7B8399; }
.hs-send { width: 30px; height: 30px; border-radius: 50%; background: rgba(123,140,255,.2); color: rgba(123,140,255,.6); display: flex; align-items: center; justify-content: center; }
.hs-send .hs-i { width: 15px; height: 15px; }
.hs-cursor { position: absolute; width: 22px; height: 22px; left: 600px; top: 272px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); overflow: visible; }
/* the eight beats, as stills (?beat=N): 1 connect, 2 the offer, 3 the build (the Lineage view), 4 the page as a draft,
   5 by store and published, 6 the alert set and watching, 7 Monday: the alert fires, 8 the alert open on the phone.
   Live mode keeps the beat class for the screens and adds the k-* steps on top. */
.hero2-art:is(.beat-1, .beat-2) .hs-sources, .hero2-art.beat-3 .hs-lineage, .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-sales { display: flex; }
.hero2-art:is(.beat-1, .beat-2) .hs-r-src, .hero2-art.beat-3 .hs-r-data, .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-r-dash { background: #262E3A; color: #E6E8EC; }
.hero2-art:is(.beat-1, .beat-2) .hs-r-src::before, .hero2-art.beat-3 .hs-r-data::before, .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-r-dash::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #7B8CFF; }
.hs-t-wh { display: none; }
.hero2-art:is(.beat-1, .beat-2) :is(.hs-t-dash, .hs-t-rest), .hero2-art.beat-3 :is(.hs-t-src, .hs-t-dash, .hs-t-rest), .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-t-src { display: none; }
.hero2-art.beat-3 .hs-t-wh { display: inline; }
.hero2-art:is(.beat-1, .beat-2) .hs-t-src, .hero2-art.beat-3 .hs-t-lin, .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-t-dash { background: #2A3240; color: #E6E8EC; border: 1px solid #303947; }
.hero2-art.beat-2 :is(.hs-form, .hs-prog, .hs-done) { display: none; }
.hero2-art.beat-2 .hs-connected { display: inline-flex; }
.hero2-art.beat-2 .hs-connect { border-color: #303947; }
/* the chat: what it is looking at, and which messages each beat has */
.hs-pl-lin { display: none; }
.hero2-art:is(.beat-3, .beat-4, .beat-5, .beat-6, .beat-7, .beat-8) :is(.hs-ct-new, .hs-pl-src) { display: none; }
.hero2-art:is(.beat-3, .beat-4, .beat-5, .beat-6, .beat-7, .beat-8) .hs-ct-sales, .hero2-art.beat-3 .hs-pl-lin, .hero2-art:is(.beat-4, .beat-5, .beat-6, .beat-7, .beat-8) :is(.hs-pl-sales, .hs-pl-of) { display: inline; }
.hero2-art:not(.beat-1) .hs-hello, .hero2-art:not(.beat-2) .hs-offer-chips { display: none; }
.hero2-art.beat-1 .hs-offer, .hero2-art:is(.beat-1, .beat-2) :is(.hs-q-yes, .hs-steps), .hero2-art:is(.beat-1, .beat-2, .beat-3, .beat-4) :is(.hs-q-store, .hs-a-store),
.hero2-art:is(.beat-1, .beat-2, .beat-3, .beat-4, .beat-5) :is(.hs-q-watch, .hs-a-watch), .hero2-art.beat-3 .hs-steps .hs-art { display: none; }
.hero2-art:is(.beat-6, .beat-7, .beat-8):not(.hs-live) .hs-log { justify-content: flex-end; }
.hero2-art.beat-3 .hs-st[data-s="4"] .hs-sti { background: none; }
.hero2-art.beat-3 .hs-st[data-s="4"] .hs-spin { display: block; }
.hero2-art.beat-3 .hs-st[data-s="4"] .hs-sti > svg { display: none; }
/* the page: a draft with Publish at beat 4, published from 5; by store from 5; the chip watching at 6, fired from 7 */
.hs-sd-draft, .hs-pubbtn { display: none; }
.hero2-art.beat-4 .hs-sd-draft { display: inline; }
.hero2-art.beat-4 .hs-pubbtn { display: inline-flex; }
.hero2-art.beat-4 .hs-sd-pub, .hero2-art.beat-4 .wp-stores { display: none; }
.hero2-art:is(.beat-5, .beat-6, .beat-7, .beat-8) .wp-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 12px; }
.hero2-art:is(.beat-6, .beat-7, .beat-8) .wp-alert { display: inline-flex; }
.hero2-art:is(.beat-7, .beat-8) .wp-alert { background: #FCE3BC; border-color: #E59B3B; color: #7A3E0B; }
.hero2-art:is(.beat-7, .beat-8) .wp-alert .wa-w { display: none; }
.hero2-art:is(.beat-7, .beat-8) .wp-alert .wa-f { display: inline; }
.hero2-art:is(.beat-5, .beat-6) .pscreen { background: #F6EFE4; }
.hero2-art:is(.beat-5, .beat-6) .pscreen .status { color: #3A1D0C; }
/* where the cursor rests in each still */
.hero2-art:is(.beat-2, .beat-3) .hs-cursor { left: 1112px; top: 164px; }
.hero2-art.beat-4 .hs-cursor { left: 1145px; top: 375px; }
.hero2-art.beat-5 .hs-cursor { left: 607px; top: 96px; }
.hero2-art.beat-6 .hs-cursor { left: 1390px; top: 858px; }
.hero2-art:is(.beat-7, .beat-8) .hs-cursor { display: none; }
/* the phone through the beats: the home screen, the Sales page, a notification, the alert open */
.pscreen .ph-home, .pscreen .ph-notif, .pscreen .ph-alert { display: none; }
.pscreen .ph-sales { display: contents; }
/* the phone's home screen, shared by the hero's phone (beats 1 to 4) and section 8's: a white glyph on every tile, the
   date on the calendar, the company's leather tile among them, and a dock (Kyle, 2026-10-30, via the coordinator: no blank
   or dark empty tiles) */
.pscreen .ph-home { flex: 1; min-height: 0; flex-direction: column; }
.pscreen .ph-home .apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; margin-top: 34px; padding: 0 2px; }
.pscreen .ph-home .apps span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; color: #E6E8EC; }
.pscreen .ph-home :is(.apps, .dock) i { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-style: normal; color: #fff; }
.pscreen .ph-home :is(.apps, .dock) i svg { width: 62%; height: 62%; }
.pscreen .ph-home .apps i.wl { display: block; background: #7A4A26; font: 700 13px/40px var(--font); text-align: center; box-shadow: 0 0 0 2px #7B8CFF; }
.pscreen .ph-home .apps .ours { color: #fff; font-weight: 600; }
.pscreen .ph-home .apps i.cal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #F7F7F9; }
.pscreen .ph-home .cal b { font: 700 7.5px/1 var(--font); letter-spacing: .05em; color: #E5483E; }
.pscreen .ph-home .cal em { font: 500 19px/1 var(--display); font-style: normal; letter-spacing: -.02em; color: #1D1F24; }
.pscreen .ph-home .a1 { background: linear-gradient(#4FA3FF, #1D6FE0); } .pscreen .ph-home .a2 { background: linear-gradient(#8ED7A4, #3A9D5F); }
.pscreen .ph-home .a3 { background: linear-gradient(#FFC867, #F07F3A); } .pscreen .ph-home .a5 { background: linear-gradient(#FFD452, #EFA800); }
.pscreen .ph-home .a6 { background: linear-gradient(#6FB7FF, #2B6FD6); } .pscreen .ph-home .a7 { background: linear-gradient(#FF7A8A, #E0304B); }
.pscreen .ph-home .a8 { background: linear-gradient(#8D93A0, #555B68); } .pscreen .ph-home .a9 { background: #11141B; }
.pscreen .ph-home .a10 { background: #11141B; } .pscreen .ph-home .a11 { background: linear-gradient(#A3A8B3, #6E7381); }
.pscreen .ph-home .dock { margin-top: auto; margin-bottom: 12px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; padding: 9px 4px; border-radius: 22px; background: rgba(255,255,255,.12); }
.pscreen .ph-home .d1 { background: linear-gradient(#6BE07A, #2DA64A); } .pscreen .ph-home .d2 { background: linear-gradient(#5EC2FF, #1A7FE8); }
.pscreen .ph-home .d3 { background: linear-gradient(#7BE28A, #30B14E); } .pscreen .ph-home .d4 { background: linear-gradient(#C77DFF, #8E3FE0); }
.hero2-art:is(.beat-1, .beat-2, .beat-3, .beat-4) .pscreen { background: linear-gradient(180deg, #2B3550, #151A2B); }
.hero2-art:is(.beat-1, .beat-2, .beat-3, .beat-4) .pscreen .ph-home { display: flex; }
.hero2-art:is(.beat-1, .beat-2, .beat-3, .beat-4, .beat-7, .beat-8) .pscreen :is(.ph-sales, .ask) { display: none; }
.pscreen .ph-notif { position: absolute; left: 8px; right: 8px; top: 34px; display: none; gap: 9px; padding: 9px 10px; border-radius: 14px; background: rgba(38,46,58,.96); border: 1px solid #3A4454; box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 5; }
.pscreen .ph-nicon { width: 28px; height: 28px; border-radius: 7px; background: #7A4A26; color: #fff; font: 700 10px/28px var(--font); text-align: center; flex-shrink: 0; }
.pscreen .ph-nbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pscreen .ph-nhead { display: flex; justify-content: space-between; font-size: 9px; color: #9BA3B9; } .pscreen .ph-nhead b { color: #E6E8EC; font-weight: 600; }
.pscreen .ph-ntext { font-size: 10px; line-height: 1.35; color: #E6E8EC; }
.hero2-art.beat-8 .pscreen .ph-alert { display: flex; }
.pscreen .ph-alert { flex-direction: column; gap: 8px; margin-top: 6px; }
.pscreen .ph-aback { display: flex; align-items: center; gap: 2px; font-size: 10px; color: #7B8CFF; } .pscreen .ph-aback .ph-i { width: 12px; height: 12px; }
.pscreen .ph-akind { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #F5B860; margin-top: 8px; } .pscreen .ph-akind .ph-i { width: 12px; height: 12px; }
.pscreen .ph-anum { font: 700 30px/1.1 var(--display); letter-spacing: -.02em; color: #E6E8EC; }
.pscreen .ph-aline { font-size: 10px; color: #9BA3B9; }
.pscreen .ph-anote { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: #262E3A; border: 1px solid #303947; }
.pscreen .ph-amark { width: 18px; height: 18px; border-radius: 5px; background: rgba(123,140,255,.16); color: #7B8CFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pscreen .ph-amark .ph-i { width: 11px; height: 11px; }
.pscreen .ph-anote p { margin: 0; font-size: 10px; line-height: 1.45; color: #E6E8EC; }
.pscreen .ph-abtn { margin-top: 6px; height: 30px; border-radius: 8px; background: #7B8CFF; color: #0F1424; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) { .hero2 .pscreen .ph-home .apps { gap: 8px 3px; margin-top: 18px; } .hero2 .pscreen .ph-home .apps span { font-size: 5px; gap: 2px; } .hero2 .pscreen .ph-home :is(.apps, .dock) i { width: 20px; height: 20px; border-radius: 6px; } .hero2 .pscreen .ph-home .apps i.wl { font-size: 7px; line-height: 20px; } .hero2 .pscreen .ph-home .cal b { font-size: 3.6px; } .hero2 .pscreen .ph-home .cal em { font-size: 9.5px; } .hero2 .pscreen .ph-home .apps i.cal { gap: 1px; } .hero2 .pscreen .ph-home .dock { margin-bottom: 6px; padding: 4px 2px; border-radius: 11px; } .hero2 .pscreen .ph-notif { top: 18px; padding: 5px 6px; border-radius: 8px; gap: 5px; } .hero2 .pscreen .ph-nicon { width: 14px; height: 14px; font-size: 5px; line-height: 14px; } .hero2 .pscreen .ph-nhead { font-size: 5px; } .hero2 .pscreen .ph-ntext { font-size: 5.5px; } .hero2 .pscreen .ph-anum { font-size: 16px; } .hero2 .pscreen .ph-aline, .hero2 .pscreen .ph-anote p, .hero2 .pscreen .ph-aback { font-size: 5.5px; } .hero2 .pscreen .ph-akind { font-size: 5px; } .hero2 .pscreen .ph-abtn { height: 16px; font-size: 6px; } }

/* the build beat: the Lineage view the agent fills as it works (Kyle, 2026-10-30: "showing some kind of SQL getting written
   or something would be cool, and that becomes a model, then the dashboard"). Shopify's tables land, the SQL is written
   large, folds into sales.orders, the tests pass, the metrics and the page join the map. */
.lg { position: relative; height: 560px; margin-top: 22px; border-radius: 14px; border: 1px solid #303947; overflow: hidden;
  background: #1C222C radial-gradient(rgba(155,163,185,.13) 1px, transparent 1.4px) 0 0 / 24px 24px; }
.lg-heads span { position: absolute; top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7B8399; }
.lg-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-wires .w { fill: none; stroke: #566277; stroke-width: 2; }
.lg-t, .lg-m, .lg-metric, .lg-page { position: absolute; display: flex; align-items: center; gap: 10px; border-radius: 10px; border: 1px solid #3A4454; background: #262E3A; color: #E6E8EC; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.lg :is(.lg-t, .lg-m, .lg-page) .hs-i { width: 17px; height: 17px; color: #9BA3B9; flex-shrink: 0; }
.lg-t { left: 20px; width: 196px; height: 58px; padding: 0 12px; }
.lg-t b, .lg-m b { display: block; font: 600 13.5px/1.25 var(--mono); }
.lg-t small, .lg-m small, .lg-page small { display: block; margin-top: 3px; font-size: 12.5px; color: #9BA3B9; }
.lg-m { left: 300px; width: 210px; height: 64px; padding: 0 14px; }
.lg .lg-m .hs-i { color: #7B8CFF; }
.lg-so { top: 120px; border-color: #7B8CFF; box-shadow: 0 0 0 1px rgba(123,140,255,.45), 0 8px 26px rgba(123,140,255,.2); }
.lg-sd { top: 340px; }
.lg-ph { display: none; position: absolute; left: 300px; top: 120px; width: 210px; height: 64px; border-radius: 10px; border: 1.5px dashed #56627A; }
.lg-test { position: absolute; left: 300px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(95,203,154,.12); border: 1px solid rgba(95,203,154,.4); color: #5FCB9A; font-size: 12.5px; font-weight: 500; }
.lg-test .hs-i { width: 13px; height: 13px; }
.lg-t1 { top: 194px; } .lg-t2 { top: 226px; }
.lg-metric { left: 572px; width: 140px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; }
.lg-metric .hs-i { width: 15px; height: 15px; color: #7B8CFF; }
.lg-page { left: 770px; top: 250px; width: 122px; height: 76px; padding: 0 12px; }
.lg-page b { font-size: 15px; font-weight: 700; }
.lg-sql { position: absolute; left: 228px; top: 200px; width: 672px; display: none; border-radius: 12px; border: 1px solid #3A4454; background: #151B23; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.lg-sqlh { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 18px; border-bottom: 1px solid #2A313C; font-size: 13px; color: #9BA3B9; }
.lg-sqlh b { font: 600 13.5px var(--mono); color: #E6E8EC; }
.lg-code { position: relative; margin: 0; padding: 16px 20px 18px; font: 18px/30px var(--mono); color: #E6E8EC; white-space: pre; }
.lg-code .ln { display: block; width: max-content; clip-path: inset(-4px max(0px, calc(100% - var(--k, 999) * 1ch)) -4px 0); }
.lg-code .k { color: #8F9DFF; } .lg-code .s { color: #5FCB9A; } .lg-code .c { color: #F1B65C; }
.lg-caret { display: none; position: absolute; left: 20px; top: 19px; width: 2px; height: 24px; background: #7B8CFF; font: 18px var(--mono);
  transform: translate(calc(var(--ck, 0) * 1ch), calc(var(--cl, 0) * 30px)); }
/* the agent's steps in the chat, ticked off as they happen */
.hs-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hs-st { display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.35; }
.hs-sti { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(95,203,154,.16); color: #5FCB9A; flex-shrink: 0; font-style: normal; }
.hs-sti > svg { width: 12px; height: 12px; }
.hs-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(123,140,255,.28); border-top-color: #7B8CFF; animation: hs-spin 800ms linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-steps .hs-art { margin-top: 4px; }
/* published, for a second; and the dimming that says the days went by */
.hs-toast { position: absolute; left: 548px; bottom: 40px; z-index: 2; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 10px; background: #2A313C; border: 1px solid #3D444D;
  color: #F0F6FC; font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 34px rgba(0,0,0,.5); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
.hs-toast .hs-i { width: 16px; height: 16px; color: #5FCB9A; }
.hs-night { position: absolute; inset: 0; z-index: 2; background: rgba(6,9,18,.66); opacity: 0; pointer-events: none; }
/* the phone's Monday: the lock screen, its clock rolling from Thursday 9:41 to Monday 8:02 */
.hero2-art .phone::before { z-index: 8; }
.hero2-art .pscreen .status { position: relative; z-index: 7; }
.st-time b { font-weight: inherit; }
.st-b { display: none; }
.hero2-art.beat-7 .pscreen .st-time { visibility: hidden; }
.hero2-art.beat-8 .pscreen .st-a { display: none; }
.hero2-art.beat-8 .pscreen .st-b { display: inline; }
.pscreen .ph-lock { display: none; position: absolute; inset: 0; z-index: 4; padding-top: 3.3em; text-align: center; color: #F4F5FA;
  background: radial-gradient(130% 70% at 15% 0%, #5A5EA6 0%, transparent 60%), radial-gradient(120% 80% at 100% 100%, #8B4A23 0%, transparent 55%), #1A1E33; }
.pl-day, .pl-time { position: relative; }
.pl-day { height: 1.5em; font-size: 1.1em; font-weight: 600; }
.pl-time { height: 1.05em; font: 600 5.4em/1 var(--display); letter-spacing: -.03em; }
.pl-day span, .pl-time span { position: absolute; left: 0; right: 0; top: 0; }
.pl-a { opacity: 0; }
.hero2-art.beat-7 .pscreen .ph-lock { display: block; }
.hero2-art.beat-7 .pscreen .ph-notif { display: flex; }
.hero2-art:is(.beat-7, .beat-8) .pscreen .ph-notif, .hero2-art.hs-live.k-lock .pscreen .ph-notif { top: 14.2em; }
.pscreen .ph-alink { text-align: center; font-size: 10px; font-weight: 500; color: #7B8CFF; }
/* the footnote, on the pause button's line */
.hs-note { position: absolute; left: 0; bottom: -36px; margin: 0; line-height: 28px; font-size: 13px; color: var(--mute); }
/* on a phone the note takes its own line under the pause button, so the card makes room for it */
@media (max-width: 768px) { .hs-note { bottom: -62px; font-size: 12px; } .hero-card { padding-bottom: 68px; } .hero2 .pscreen .ph-alink { font-size: 5.5px; } }

/* --- the hero scene, stage two (2026-10-30; Kyle: "Yes to the six beats. Build the motion."). home.js plays the six beats on
   one clock. Live mode is .hs-live on the art: the beat class still picks the screens, the k-* step classes say what has
   happened so far within a beat, and anything a beat or a step shows comes in with an animation. hs-paused freezes every
   animation; hs-noanim snaps the scene back to its start at the loop's seam, while it is faded out. ------------------------ */
.hs-connect { gap: 0; }
.hs-reveal-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.hero2-art.beat-2 .hs-reveal { display: none; }
.hs-sopen { display: none; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid #303947; background: #262E3A; color: #E6E8EC; font-size: 12.5px; font-weight: 500; }
.hs-typing { display: none; gap: 10px; align-items: center; }
.hs-tdots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #262E3A; border: 1px solid #303947; }
.hs-tdots i { width: 6px; height: 6px; border-radius: 50%; background: #9BA3B9; animation: hs-blink 900ms ease-in-out infinite both; }
.hs-tdots i:nth-child(2) { animation-delay: 150ms; } .hs-tdots i:nth-child(3) { animation-delay: 300ms; }
.hs-tap { --tap: 40px; position: absolute; left: 0; top: 0; width: var(--tap); height: var(--tap); margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2); border-radius: 50%; border: 2px solid rgba(123,140,255,.95); background: rgba(123,140,255,.18); opacity: 0; pointer-events: none; z-index: 2; }
.hs-cursor { z-index: 3; }
.ph-tap { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.42); opacity: 0; pointer-events: none; }
.ph-anote p span { display: block; }
@keyframes hs-blink { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes hs-in { from { opacity: 0; } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes hs-pop { 0% { opacity: 0; transform: scale(.88); } 70% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes hs-growy { from { transform: scaleY(0); } }
@keyframes hs-draw { from { stroke-dashoffset: 1; } }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 100% { box-shadow: 0 0 0 14px rgba(245,158,11,0); } }
@keyframes hs-caret { 50% { opacity: 0; } }
@keyframes ph-drop { 0% { opacity: 0; transform: translateY(-130%); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ph-sheet { from { transform: translateY(100%); } }

.hero2-art.hs-paused *, .hero2-art.hs-paused *::before, .hero2-art.hs-paused *::after { animation-play-state: paused !important; }
.hero2-art.hs-noanim *, .hero2-art.hs-noanim *::before, .hero2-art.hs-noanim *::after { animation: none !important; transition: none !important; }
.hero2-art.hs-live .hs-cursor { left: 0; top: 0; will-change: transform; }
/* no cursor on a phone or a touch screen: the taps carry the clicks, a fingertip's size on the screen whatever the laptop's scale */
@media (max-width: 860px), (hover: none) { .hero2-art.hs-live .hs-cursor { display: none; } .hero2-art.hs-live .hs-tap { --tap: calc(28px / var(--hs, .5)); border-width: calc(2px / var(--hs, .5)); } }
.hero2-art.hs-live .hs-screen { animation: hs-in 380ms var(--ease) both; }
.hero2-art.hs-live .hs-hello { transition: opacity 250ms var(--ease); }
.hero2-art.hs-live.k-hello-out .hs-hello { opacity: 0; }

/* 1. Connect: the collapsed row's button, the panel opening, the key, the bar, the count */
.hero2-art.hs-live.beat-1:not(.k-open) .hs-sopen { display: inline-flex; }
.hero2-art.hs-live .hs-connect { transition: border-color 300ms var(--ease); }
.hero2-art.hs-live:not(.k-open) .hs-connect, .hero2-art.hs-live.k-closed .hs-connect { border-color: #303947; }
.hero2-art.hs-live .hs-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease); }
.hero2-art.hs-live .hs-reveal > div { min-height: 0; overflow: hidden; }
.hero2-art.hs-live.k-open:not(.k-closed) .hs-reveal { grid-template-rows: 1fr; }
.hero2-art.hs-live.beat-2 .hs-form { display: flex; } .hero2-art.hs-live.beat-2 .hs-prog { display: block; } .hero2-art.hs-live.beat-2 .hs-done { display: flex; }
.hero2-art.hs-live:not(.k-done) .hs-done { visibility: hidden; }
.hero2-art.hs-live.k-done .hs-done { animation: hs-rise 300ms var(--ease) both; }
.hero2-art.hs-live .hs-connected { animation: hs-in 300ms var(--ease) both; }

/* 2 to 4. the chat: a typing indicator, the messages rising in, the chips popping, the box focused, typed and sent */
.hero2-art.hs-live .hs-q, .hero2-art.hs-live .hs-a, .hero2-art.hs-live.k-typing .hs-typing { animation: hs-rise 320ms var(--ease) both; }
.hero2-art.hs-live.k-typing .hs-typing { display: flex; }
.hero2-art.hs-live:not(.k-offer) .hs-offer, .hero2-art.hs-live:not(.k-chips) .hs-offer-chips { display: none; }
/* the build: the agent's steps come in one at a time, each spinning until it is done, then ticked */
.hero2-art.hs-live:not(.k-s1) .hs-steps, .hero2-art.hs-live:not(.k-s2) .hs-st[data-s="2"], .hero2-art.hs-live:not(.k-s3) .hs-st[data-s="3"],
.hero2-art.hs-live:not(.k-s4) .hs-st[data-s="4"], .hero2-art.hs-live:not(.k-art) .hs-steps .hs-art { display: none; }
.hero2-art.hs-live .hs-st, .hero2-art.hs-live .hs-steps .hs-art { animation: hs-rise 300ms var(--ease) both; }
.hero2-art.hs-live:not(.k-s1d) .hs-st[data-s="1"] .hs-sti, .hero2-art.hs-live:not(.k-s2d) .hs-st[data-s="2"] .hs-sti,
.hero2-art.hs-live:not(.k-s3d) .hs-st[data-s="3"] .hs-sti, .hero2-art.hs-live:not(.k-s4d) .hs-st[data-s="4"] .hs-sti { background: none; }
.hero2-art.hs-live:not(.k-s1d) .hs-st[data-s="1"] .hs-spin, .hero2-art.hs-live:not(.k-s2d) .hs-st[data-s="2"] .hs-spin,
.hero2-art.hs-live:not(.k-s3d) .hs-st[data-s="3"] .hs-spin, .hero2-art.hs-live:not(.k-s4d) .hs-st[data-s="4"] .hs-spin { display: block; }
.hero2-art.hs-live:not(.k-s1d) .hs-st[data-s="1"] .hs-sti > svg, .hero2-art.hs-live:not(.k-s2d) .hs-st[data-s="2"] .hs-sti > svg,
.hero2-art.hs-live:not(.k-s3d) .hs-st[data-s="3"] .hs-sti > svg, .hero2-art.hs-live:not(.k-s4d) .hs-st[data-s="4"] .hs-sti > svg { display: none; }
.hero2-art.hs-live.k-s4d .hs-st[data-s="4"] .hs-sti, .hero2-art.hs-live.k-s1d .hs-st[data-s="1"] .hs-sti, .hero2-art.hs-live.k-s2d .hs-st[data-s="2"] .hs-sti,
.hero2-art.hs-live.k-s3d .hs-st[data-s="3"] .hs-sti { animation: hs-pop 320ms var(--spring) both; }
.hero2-art.hs-live .hs-offer-chips .hs-chip { animation: hs-pop 360ms var(--spring) both; transition: background 200ms, color 200ms, border-color 200ms; }
.hero2-art.hs-live .hs-offer-chips .hs-chip + .hs-chip { animation-delay: 80ms; }
.hero2-art.hs-live.k-yes .hs-chip.yes { background: #7B8CFF; color: #0F1424; border-color: transparent; }
.hero2-art.hs-live.k-sent .hs-q-store { display: block; }
.hero2-art.hs-live.k-answer .hs-a-store { display: flex; }
.hero2-art.hs-live:not(.k-answer) .hs-a-store { display: none; }
.hero2-art.hs-live .hs-a-store .hs-atable tr { animation: hs-rise 280ms var(--ease) both; }
.hero2-art.hs-live .hs-a-store .hs-atable tr:nth-child(1) { animation-delay: 160ms; }
.hero2-art.hs-live .hs-a-store .hs-atable tr:nth-child(2) { animation-delay: 280ms; }
.hero2-art.hs-live .hs-a-store .hs-atable tr:nth-child(3) { animation-delay: 400ms; }
.hero2-art.hs-live .hs-a-store .hs-atable tr:nth-child(4) { animation-delay: 520ms; }
.hero2-art.hs-live .hs-a-store .hs-atable tr:nth-child(5) { animation-delay: 640ms; }
.hero2-art.hs-live .hs-a-store .hs-trust { animation: hs-in 320ms var(--ease) 900ms both; }
.hero2-art.hs-live .hs-box { transition: border-color 200ms, box-shadow 200ms; }
.hero2-art.hs-live .hs-send { transition: background 200ms, color 200ms; }
.hero2-art.hs-live:not(.k-sent) .hs-q-store { display: none; }
.hero2-art.hs-live:not(.k-sent2) .hs-q-watch, .hero2-art.hs-live:not(.k-watch-a) .hs-a-watch { display: none; }
.hero2-art.hs-live.k-sent2 .hs-q-watch { display: block; }
.hero2-art.hs-live.k-watch-a .hs-a-watch { display: flex; }
.hero2-art.hs-live.k-type .hs-typed { display: inline; }
.hero2-art.hs-live.k-type .hs-ph1 { display: none; }
.hero2-art.hs-live.k-focus .hs-box { border-color: #7B8CFF; box-shadow: 0 0 0 3px rgba(123,140,255,.22); }
.hero2-art.hs-live.k-ready .hs-send { background: #7B8CFF; color: #0F1424; }
.hero2-art.hs-live .hs-caret { animation: hs-caret 1s steps(1) infinite; }

/* 3 to 5. the Westside page: the four numbers pop and count, both lines draw left to right, today and September's total
   land; at beat 4 the chart narrows and by store slides in; at beat 5 the page's own chip */
.hero2-art.hs-live .wp-kpi { animation: hs-pop 420ms var(--spring) both; animation-delay: calc(150ms + var(--c) * 90ms); }
.hero2-art.hs-live .wp-chart { animation: hs-pop 420ms var(--spring) 480ms both; }
.hero2-art.hs-live .wp-chart .wp-lines { animation: wp-wipe 1300ms cubic-bezier(.45,.05,.35,1) 750ms both; }
.hero2-art.hs-live .wp-chart :is(.wp-total, .wp-pass) { animation: hs-in 500ms var(--ease) 1500ms both; }
.hero2-art.hs-live .wp-chart .wp-now { animation: hs-pop 420ms var(--spring) 2000ms both; }
@keyframes wp-wipe { from { clip-path: inset(-12px 100% -12px 0); } to { clip-path: inset(-12px -12px -12px 0); } }
.hero2-art.hs-live .wp-main { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; transition: grid-template-columns 560ms var(--ease), column-gap 560ms var(--ease); }
.hero2-art.hs-live.k-store .wp-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 12px; }
.hero2-art.hs-live .wp-stores { display: block; contain: size; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(28px);
  transition: opacity 360ms var(--ease) 200ms, transform 560ms var(--ease); }
.hero2-art.hs-live.k-store .wp-stores { opacity: 1; transform: none; }
.hero2-art.hs-live .wp-stores .wp-bar i { width: 0; transition: width 620ms var(--ease); }
.hero2-art.hs-live.k-store .wp-stores .wp-bar i { width: var(--w); transition-delay: calc(320ms + var(--r) * 80ms); }
/* 4 and 5. a draft until the cursor publishes it; then the toast */
.hero2-art.hs-live:not(.k-pub) .hs-sd-draft { display: inline; }
.hero2-art.hs-live:not(.k-pub) .hs-pubbtn { display: inline-flex; }
.hero2-art.hs-live:not(.k-pub) .hs-sd-pub { display: none; }
.hero2-art.hs-live.k-pub .hs-sd-pub { animation: hs-in 320ms var(--ease) both; }
.hero2-art.hs-live .hs-toast { transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.hero2-art.hs-live.k-toast .hs-toast { opacity: 1; transform: translate(-50%, 0); }
/* 6 and 7. the chip watching, quietly; on Monday it turns amber */
.hero2-art.hs-live:not(.k-watch) .wp-alert { display: none; }
.hero2-art.hs-live.k-watch .wp-alert { animation: hs-pop 420ms var(--spring) both; transition: background 420ms var(--ease), border-color 420ms var(--ease), color 420ms var(--ease); }
.hero2-art.hs-live:not(.k-fired) .wp-alert { background: #FFFBF5; border-color: #E0CFB8; color: #7A5B45; }
.hero2-art.hs-live:not(.k-fired) .wp-alert .wa-w { display: inline; }
.hero2-art.hs-live:not(.k-fired) .wp-alert .wa-f { display: none; }
.hero2-art.hs-live.k-fired .wp-alert { animation: hs-pulse 1400ms ease-out 1 both; }
.hero2-art.hs-live .hs-night { transition: opacity 420ms var(--ease); }
.hero2-art.hs-live.k-night .hs-night { opacity: 1; }
/* 3. the build: tables land, the SQL is written and folds into sales.orders, the tests pass, the map fills to the page */
.hero2-art.hs-live .lg-t { animation: hs-pop 340ms var(--spring) both; animation-delay: calc(100ms + var(--i) * 120ms); }
.hero2-art.hs-live .lg-sql { display: block; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 260ms var(--ease), transform 300ms var(--ease); }
.hero2-art.hs-live.k-sql .lg-sql { opacity: 1; transform: none; }
.hero2-art.hs-live.k-sql:not(.k-fold) .lg-caret { display: block; animation: hs-caret 1s steps(1) infinite; }
.hero2-art.hs-live.k-fold .lg-sql { opacity: 0; transform: translate(-159px, -190px) scale(.3125); transition: transform 460ms cubic-bezier(.55,0,.25,1), opacity 220ms var(--ease) 260ms; }
.hero2-art.hs-live.k-sql:not(.k-node) .lg-ph { display: block; }
.hero2-art.hs-live:not(.k-node) .lg-so, .hero2-art.hs-live:not(.k-daily) .lg-sd, .hero2-art.hs-live:not(.k-test1) .lg-t1, .hero2-art.hs-live:not(.k-test2) .lg-t2,
.hero2-art.hs-live:not(.k-m) .lg-metric, .hero2-art.hs-live:not(.k-page) .lg-page { visibility: hidden; }
.hero2-art.hs-live.k-node .lg-so { animation: lg-lit 900ms var(--ease) both; }
.hero2-art.hs-live.k-daily .lg-sd, .hero2-art.hs-live.k-test1 .lg-t1, .hero2-art.hs-live.k-test2 .lg-t2, .hero2-art.hs-live.k-page .lg-page { animation: hs-pop 340ms var(--spring) both; }
.hero2-art.hs-live.k-m .lg-metric { animation: hs-pop 340ms var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes lg-lit { 0% { opacity: 0; transform: scale(.94); } 35% { opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 2px #7B8CFF, 0 0 44px rgba(123,140,255,.6); } 100% { opacity: 1; transform: none; } }
.hero2-art.hs-live .lg-wires .w { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--ease); }
.hero2-art.hs-live.k-node .lg-wires .w1, .hero2-art.hs-live.k-daily .lg-wires .w2, .hero2-art.hs-live.k-m .lg-wires .w3, .hero2-art.hs-live.k-page .lg-wires .w4 { stroke-dashoffset: 0; }
/* the phone: its page shows as the home screen fades (k-phone); its lines draw then; by store follows the laptop's */
.hero2-art.hs-live:not(.k-phone) .pscreen .status { color: #E6E8EC; }
.hero2-art.hs-live .wpp .wp-lines { clip-path: inset(-8px 100% -8px 0); }
.hero2-art.hs-live.k-phone .wpp .wp-lines { clip-path: inset(-8px -8px -8px 0); transition: clip-path 1200ms cubic-bezier(.45,.05,.35,1) 350ms; }
.hero2-art.hs-live .wpp :is(.wp-now, .wp-total) { opacity: 0; }
.hero2-art.hs-live.k-phone .wpp :is(.wp-now, .wp-total) { opacity: 1; transition: opacity 360ms var(--ease) 1500ms; }
.hero2-art.hs-live .wpp-stores { visibility: visible; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease) 250ms, transform 500ms var(--ease) 250ms; }
.hero2-art.hs-live.k-store .wpp-stores { opacity: 1; transform: none; }

/* the phone: its home screen over the page until the page is built, the notification dropping in, the alert opening */
.hero2-art.hs-live .pscreen .ph-home { display: flex; position: absolute; inset: 0; z-index: 4; padding: 30px 14px 0; background: linear-gradient(180deg, #2B3550, #151A2B); transition: opacity 520ms var(--ease); }
.hero2-art.hs-live.k-phone .pscreen .ph-home { opacity: 0; }
.hero2-art.hs-live .pscreen .ph-sales { display: contents; }
.hero2-art.hs-live .pscreen .ask { display: grid; }
.hero2-art.hs-live:not(.k-notif) .pscreen .ph-notif { display: none; }
.hero2-art.hs-live.k-notif .pscreen .ph-notif { display: flex; animation: ph-land 620ms var(--spring) both; }
@keyframes ph-land { 0% { opacity: 0; transform: translateY(26px) scale(.96); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.hero2-art.hs-live:not(.k-lock) .pscreen .ph-lock { display: none; }
.hero2-art.hs-live.k-lock .pscreen .ph-lock { display: block; animation: hs-in 420ms var(--ease) both; }
.hero2-art.hs-live .pscreen :is(.pl-day, .pl-time) span { transition: opacity 360ms var(--ease), transform 420ms var(--ease); }
.hero2-art.hs-live:not(.k-mon) .pscreen .pl-a { opacity: 1; }
.hero2-art.hs-live:not(.k-mon) .pscreen .pl-b { opacity: 0; transform: translateY(35%); }
.hero2-art.hs-live.k-mon .pscreen .pl-a { transform: translateY(-35%); }
.hero2-art.hs-live.k-phone .pscreen { background: #F6EFE4; }
.hero2-art.hs-live.k-phone:not(.k-lock) .pscreen .status { color: #3A1D0C; }
.hero2-art.hs-live.k-lock .pscreen .status { color: #E6E8EC; }
.hero2-art.hs-live.k-lock:not(.beat-8) .pscreen .st-time { visibility: hidden; }
.hero2-art.hs-live.k-mon .pscreen .st-a { display: none; }
.hero2-art.hs-live.k-mon .pscreen .st-b { display: inline; }
.hero2-art.hs-live .phone { transition: box-shadow 700ms var(--ease); }
.hero2-art.hs-live.k-notif .phone { box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(123,140,255,.32), 0 0 64px rgba(123,140,255,.26); }
.hero2-art.hs-live .pscreen .ph-alert { position: absolute; inset: 0; z-index: 6; margin: 0; padding: 32px 14px 0; background: #202733; animation: ph-sheet 440ms var(--ease) both; }
.hero2-art.hs-live .pscreen .ph-alert > * { animation: hs-rise 320ms var(--ease) both; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(1) { animation-delay: 260ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(2) { animation-delay: 340ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(3) { animation-delay: 460ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(4) { animation-delay: 700ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(5) { animation-delay: 1000ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(6) { animation-delay: 2700ms; }
.hero2-art.hs-live .pscreen .ph-alert > :nth-child(7) { animation-delay: 2850ms; }
.hero2-art.hs-live .pscreen .ph-anote p span { animation: hs-in 460ms var(--ease) both; }
.hero2-art.hs-live .pscreen .ph-anote p span:nth-child(1) { animation-delay: 1150ms; }
.hero2-art.hs-live .pscreen .ph-anote p span:nth-child(2) { animation-delay: 1650ms; }
.hero2-art.hs-live .pscreen .ph-anote p span:nth-child(3) { animation-delay: 2150ms; }
/* the island stays above every screen the phone shows; the banner reads left like a real one, and the page behind it steps back */
.pscreen .ph-nbody { text-align: left; }
.hs-done-n { font-variant-numeric: tabular-nums; }

/* the pause button, under the laptop's right end, beside the phone */
.hs-pause { position: absolute; right: 254px; bottom: -36px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 85%, transparent); color: var(--mute); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: color 150ms, border-color 150ms; }
.hs-pause:hover { color: var(--ink); border-color: var(--input); }
.hs-pause:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.hs-pause svg { width: 12px; height: 12px; fill: currentColor; }
@media (max-width: 768px) {
  .hs-pause { right: 146px; bottom: -32px; width: 26px; height: 26px; }
  .hero2 .hero2-art.hs-live .pscreen .ph-home { padding: 16px 8px 0; }
  .hero2 .hero2-art.hs-live .pscreen .ph-alert { padding: 18px 9px 0; }
  .hero2 .ph-tap { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}

/* The inbox section's headline on two lines, not three: a little more room for the words beside the drawn inbox (2026-10-30). */
@media (min-width: 1001px) { .breaks .two.wide { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); } }
/* With the words column a little wider, the inbox's rows wrap instead of cutting off: a slightly narrower panel, names that wrap, three lines a row. */
@media (min-width: 1001px) {
  .breaks .inb-body, .breaks .inb-fig.is-run.open .inb-body { grid-template-columns: minmax(0, 1fr) 236px; }
  .breaks .inb-name { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .breaks .inb-name b { overflow: visible; text-overflow: clip; }
  .breaks .inb-line { -webkit-line-clamp: 3; }
}

/* On a phone the glow behind Then and now's scene ran 12px past the screen and the whole page scrolled sideways (2026-10-30). */
.thennow-s { overflow-x: hidden; overflow-x: clip; }

/* The Claude Code section: the headline and its two short lines together in one column, the terminal and the page below (Kyle, 2026-10-30). */
.byo-intro { display: block; max-width: 640px; }