/* obrussalabs.com -- built by scripts/site_live_from_v6.py from publication/design/site_layout_2026-11-02/v6/site.css
   (design commit 79fe23912). Do not edit by hand: change the design or the PORT rules in the build script.
   Every colour token below is DERIVED from the one design source, publication/design/system/bruce.css
   (served as /bruce-system.css, linked before this file): founder 11/04, the same elements on every page. */
@font-face { font-family: "Onest"; src: url("/onest-latin-v20260922.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/dmmono-latin-400-v20260922.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg-2: var(--float);   /* = design system */
  --raise: var(--float-2);   /* = design system */
  --raise-2: var(--lift);   /* = design system */
  --edge: var(--hair);   /* = design system */
  --edge-hi: var(--hair-hi);   /* = design system */
  --ink-2: var(--muted);   /* = design system */
  --ink-3: var(--dim);   /* = design system */
  --accent: var(--k-you);   /* = design system */
  --accent-ink: var(--gold-ink);   /* = design system */
  --glow: 245,196,81;   /* = design system */
  --cool: 92,225,245;   /* = design system */
  --bone: #efece5;        /* the one light band */
  --bone-ink: #15181d;
  --bone-ink-2: #4a505b;  /* 6.9:1 on --bone */
  --r: 14px;
  --r-lg: 22px;
  --max: 1180px;
  --shadow-1: 0 1px 0 0 var(--edge-hi) inset, 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-2: 0 1px 0 0 var(--edge-hi) inset, 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.7), 0 60px 120px -40px rgba(0,0,0,.6);
  --shadow-light: 0 1px 0 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,24,30,.06), 0 24px 48px -20px rgba(20,24,30,.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.mono { font-family: "DM Mono", ui-monospace, monospace; letter-spacing: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 99; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* proposal banner: makes it impossible to mistake this for the live site */

/* ---------- nav: floating, blurred, lit edge (Palantir's floating bar, Linear/Vercel blur) */
.nav { position: sticky; top: 12px; z-index: 50; margin: 12px auto 0; max-width: calc(var(--max) - 0px); padding: 0 12px; }
.nav-in { display: flex; align-items: center; gap: 28px; padding: 10px 10px 10px 20px; border-radius: 16px;
  background: rgba(26,33,44,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-1); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(140deg, var(--accent), #ff9d2e); box-shadow: 0 0 18px rgba(var(--glow),.45); }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); font: inherit; padding: 8px; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px;
  font: 600 16px/1 "Onest", sans-serif; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn-primary { background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px -6px rgba(var(--glow),.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 32px -8px rgba(var(--glow),.7); }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px var(--edge) inset; }
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.nav .btn { min-height: 40px; font-size: 15px; padding: 0 16px; }

/* ---------- type scale: big and confident */
.kicker { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; }
.kicker b { color: var(--accent); font-weight: 600; }
h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin: 0 0 24px; }
h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.03em; font-weight: 600; margin: 0 0 20px; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin: 0 0 8px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 40em; margin: 0 0 32px; }
.muted { color: var(--ink-3); }

/* ---------- hero: spotlight + faint grid that fades out, product floating in perspective */
.hero { position: relative; padding: 64px 0 40px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -120px 0 0; z-index: -2;
   }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--edge) 1px, transparent 1px), linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size: 64px 64px;
    }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.hero h1 { max-width: 17ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.stage { position: relative; perspective: 2200px; margin-top: 24px; min-height: 520px; }
.shot { position: absolute; border-radius: var(--r-lg); overflow: hidden; background: var(--raise);
  box-shadow: var(--shadow-2); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.shot img { width: 100%; }
.shot-a { left: 2%; top: 0; width: 74%; transform: rotateX(10deg) rotateY(-12deg) rotateZ(1.5deg); }
.shot-b { right: 0; top: 150px; width: 46%; transform: rotateX(8deg) rotateY(-12deg) rotateZ(1.5deg) translateZ(80px); }
.stage:hover .shot-a { transform: rotateX(6deg) rotateY(-8deg) rotateZ(1deg); }
.stage:hover .shot-b { transform: rotateX(5deg) rotateY(-8deg) rotateZ(1deg) translateZ(110px); }
.stage::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -30px; height: 140px; z-index: -1; filter: blur(50px);
   }
.caption { font-size: 13px; color: var(--ink-3); margin-top: 18px; }

/* ---------- bands: varied rhythm, full bleed */
.band { padding: 120px 0; position: relative; }
.band-2 { background: var(--bg-2); box-shadow: 0 1px 0 var(--edge) inset, 0 -1px 0 var(--edge) inset; }
.band-light { background: var(--bone); color: var(--bone-ink); }
.band-light .lede, .band-light p { color: var(--bone-ink-2); }
.band-light h2, .band-light h3 { color: var(--bone-ink); }

/* manifesto: type does the work, no boxes */
.manifesto p.big { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.18; letter-spacing: -.025em; font-weight: 500; margin: 0; max-width: 22ch; }
.manifesto p.big span { color: var(--ink-3); }
.manifesto .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 72px; }
.manifesto .cols div { border-top: 1px solid var(--edge-hi); padding-top: 20px; }
.manifesto .cols p { color: var(--ink-2); margin: 0; }

/* offers: two asymmetric raised panels on the light band */
.offers { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin-top: 56px; align-items: start; }
.offer { background: #fff; border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow-light);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.offer:hover { transform: translateY(-6px); box-shadow: 0 1px 0 0 #fff inset, 0 4px 8px rgba(20,24,30,.06), 0 40px 70px -24px rgba(20,24,30,.32); }
.offer:nth-child(2) { margin-top: 64px; background: #15181d; color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 30px 60px -20px rgba(20,24,30,.55); }
.offer:nth-child(2) h3 { color: var(--ink); }
.offer:nth-child(2) p, .offer:nth-child(2) li { color: var(--ink-2); }
.offer .label { font-size: 14px; font-weight: 600; color: #8a5a00; margin: 0 0 14px; }
.offer:nth-child(2) .label { color: var(--accent); }
.offer h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.025em; line-height: 1.12; margin-bottom: 14px; }
.offer ul { margin: 22px 0 28px; padding: 0; list-style: none; }
.offer li { padding: 10px 0; border-top: 1px solid rgba(20,24,30,.1); }
.offer:nth-child(2) li { border-top-color: var(--edge); }
.textlink { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.offer .textlink { color: #8a5a00; }
.offer:nth-child(2) .textlink { color: var(--accent); }

/* first pack: film frame floats over a full-bleed band */
.pack { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.film { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); transform: perspective(1800px) rotateY(-6deg) rotateX(3deg); transition: transform .5s var(--ease); }
.film:hover { transform: perspective(1800px) rotateY(-2deg) rotateX(1deg) translateY(-4px); }
.film img { width: 100%; filter: saturate(.9); }
.film .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(15,19,26,0) 40%, rgba(15,19,26,.55)); text-decoration: none; }
.film .play span { display: inline-flex; align-items: center; gap: 10px; background: rgba(15,19,26,.78); color: var(--ink); padding: 14px 20px; border-radius: 999px; font-weight: 600; box-shadow: 0 0 0 1px var(--edge-hi) inset, 0 10px 30px rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.film .play i { width: 0; height: 0; border-left: 12px solid var(--accent); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.flow { display: flex; gap: 0; margin: 28px 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; flex-wrap: wrap; }
.flow span { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--edge-hi); }
.flow span:last-child { border: 0; color: var(--accent); }
.worklist { columns: 2; column-gap: 32px; padding: 0; margin: 0 0 32px; list-style: none; color: var(--ink-2); }
.worklist li { padding: 8px 0; break-inside: avoid; }
.worklist li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); margin: 0 12px 3px 0; }

/* how it works: a numbered rail, not cards */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; position: relative; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: linear-gradient(90deg, rgba(var(--glow),.8), rgba(var(--glow),.15) 70%, transparent); }
.step { padding-right: 28px; }
.step .n { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 500 18px "DM Mono", monospace; background: var(--raise); color: var(--accent); box-shadow: var(--shadow-1), 0 0 0 6px var(--bg-2); position: relative; margin-bottom: 26px; }
.step p { color: var(--ink-2); margin: 0; }

/* private by design: diagram on a raised plate */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.plate { position: relative; border-radius: var(--r-lg); padding: 36px; background: linear-gradient(180deg, var(--raise), #161c26); box-shadow: var(--shadow-2); }
.firm { position: relative; border-radius: 18px; padding: 28px; background: rgba(var(--glow),.05);
  box-shadow: 0 0 0 1px rgba(var(--glow),.55) inset, 0 0 40px -6px rgba(var(--glow),.35); }
.firm .tag { position: absolute; top: -12px; left: 20px; background: var(--raise); padding: 2px 10px; font-size: 13px; color: var(--accent); font-weight: 600; }
.nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.node { background: var(--raise-2); border-radius: 12px; padding: 16px 12px; text-align: center; font-weight: 600; box-shadow: var(--shadow-1); }
.node small { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.wall { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--ink-3); font-size: 14px; }
.wall .x { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px); }
.wall .net { padding: 8px 14px; border-radius: 10px; box-shadow: 0 0 0 1px var(--edge) inset; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; }
.checks li { padding: 14px 0; border-top: 1px solid var(--edge); color: var(--ink-2); }
.checks li b { color: var(--ink); font-weight: 600; }

/* where we are: a plain status ledger (how an early company shows proof without logos) */
.ledger { margin-top: 48px; border-radius: var(--r-lg); background: var(--raise); box-shadow: var(--shadow-2); overflow: hidden; }
.ledger .row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 32px; border-top: 1px solid var(--edge); transition: background .2s; }
.ledger .row:first-child { border-top: 0; }
.ledger .row:hover { background: rgba(255,255,255,.025); }
.ledger dt { color: var(--ink-3); font-size: 15px; }
.ledger dd { margin: 0; font-weight: 500; }

/* company */
.founders { display: flex; gap: 20px; margin-top: 32px; }
.founder { display: flex; align-items: center; gap: 14px; }
.founder img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--edge-hi); }
.founder span { font-weight: 600; }
.founder small { display: block; color: var(--ink-3); font-weight: 400; }

/* closing CTA: the one place the accent floods */
.closer { position: relative; overflow: hidden; border-radius: 28px; padding: 88px 56px; margin: 0 auto;
  
  box-shadow: var(--shadow-2); }
.closer h2 { max-width: 16ch; }

footer { padding: 72px 0 56px; color: var(--ink-3); font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { color: var(--ink); font-size: 15px; margin: 0 0 12px; font-weight: 600; }
.foot a { display: block; text-decoration: none; padding: 4px 0; color: var(--ink-3); }
.foot a:hover { color: var(--ink); }

/* inner page bits */
.page-hero { padding: 104px 0 64px; position: relative; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: -120px 0 0; z-index: -1;  }
.page-hero h1 { max-width: 16ch; }
.chapter { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 48px; padding: 72px 0; border-top: 1px solid var(--edge); align-items: start; }
.chapter .num { font: 500 15px "DM Mono", monospace; color: var(--accent); padding-top: 10px; }
.chapter h2 { font-size: clamp(28px, 3vw, 40px); }
.chapter p { color: var(--ink-2); }
.artifact { border-radius: 18px; background: var(--raise); box-shadow: var(--shadow-2); padding: 22px; transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transition: transform .4s var(--ease); }
.artifact:hover { transform: perspective(1600px) rotateY(-1deg) translateY(-4px); }
.artifact .head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.msg { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: 15px; }
.msg.you { background: rgba(255,255,255,.06); }
.msg.bruce { background: rgba(var(--glow),.08); box-shadow: 0 0 0 1px rgba(var(--glow),.22) inset; }
.msg b { display: block; font-size: 13px; color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.plan li { padding: 6px 0; color: var(--ink-2); font-size: 15px; }
.plan { margin: 0; padding-left: 20px; }
.approve { display: flex; gap: 10px; margin-top: 14px; }
.approve span { padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.approve .ok { background: var(--accent); color: var(--accent-ink); }
.approve .no { box-shadow: 0 0 0 1px var(--edge-hi) inset; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--edge); }
.tbl th { color: var(--ink-3); font-weight: 500; }
.faq details { border-top: 1px solid var(--edge); padding: 22px 0; }
.faq summary { cursor: pointer; font-size: 20px; font-weight: 600; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--ink-2); max-width: 46em; margin: 12px 0 0; }

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav { padding: 0 8px; }
  .nav-links, .nav .btn { display: none; }
  .menu-btn { display: block; }
  .hero { padding: 64px 0 24px; }
  .stage { min-height: 0; perspective: none; }
  .shot { position: relative; transform: none !important; width: 100% !important; left: 0; right: 0; top: 0; }
  .shot-b { margin: -40px 0 0 12%; width: 88% !important; }
  .band { padding: 80px 0; }
  .manifesto .cols, .offers, .pack, .split, .rail, .foot { grid-template-columns: 1fr; }
  .offer:nth-child(2) { margin-top: 0; }
  .offer { padding: 28px; }
  .rail { gap: 32px; }
  .rail::before { display: none; }
  .worklist { columns: 1; }
  .film, .artifact { transform: none; }
  .ledger .row { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; }
  .closer { padding: 56px 24px; border-radius: 22px; }
  .chapter { grid-template-columns: 1fr; gap: 20px; padding: 56px 0; }
  .founders { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===================== v2 additions ===================== */
/* hero: the giant wordmark, then the line, then the rendering */
.hero2 { position: relative; padding: 72px 0 0; text-align: center; isolation: isolate; overflow: hidden; }
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -1;
   }
.wordmark { font-size: clamp(120px, 20vw, 300px); line-height: .82; letter-spacing: -.065em; font-weight: 600; margin: 0;
  background: linear-gradient(180deg, #ffffff 30%, #9aa6b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.byline { font-size: clamp(18px, 2vw, 24px); color: var(--ink-2); margin: 18px 0 0; letter-spacing: -.01em; }
.byline b { color: var(--accent); font-weight: 600; }
.hero2 .lede { margin: 26px auto 30px; font-size: clamp(16px, 1.4vw, 19px); max-width: 34em; }
.hero2 .cta-row { justify-content: center; }
.render { margin: 8px auto 0; max-width: 1500px; position: relative; }
.render img { width: 100%; height: auto;
  /* fade the render's own edges into the page black so it reads as an object, not a pasted rectangle */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }
.render figcaption, .people figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.render-wide { margin-top: 56px; }

/* people illustrations: background image if generated, otherwise the placeholder with its prompt */
.people { margin: 0; }
.people .frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--raise);
  box-shadow: var(--shadow-2); background-size: cover; background-position: center; }
.people .ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  
  box-shadow: 0 0 0 1px var(--edge-hi) inset; }
.people .frame.has-img .ph { display: none; }
.people .ph b { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.people .ph span { font-size: 14px; color: var(--ink-2); max-width: 46em; }
.people-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 56px; align-items: end; }
.people-row .people:nth-child(2) { transform: translateY(48px); }
.live-band {  }
@media (max-width: 900px) {
  .hero2 { padding-top: 48px; }
  .people-row { grid-template-columns: 1fr; }
  .people-row .people:nth-child(2) { transform: none; }
}

/* ===================== v3 (round 2 builder) ===================== */
/* things that had only a bloom for a background get a flat surface */
.closer { background: var(--raise); }
.people .ph { background: #0a0d12; }
.live-band { background: var(--bg); }

/* defect 2: the proposal label is a small fixed pill, not a strip above the nav */

/* defect 3: the same bar as the Bruce UI (c3_live .top): flat, sticky, full width, black glass, one hairline */
.nav { position: sticky; top: 0; z-index: 50; margin: 0; max-width: none; padding: 0;
  background: rgba(0,0,0,.74); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-in { max-width: var(--max); margin: 0 auto; padding: 12px 24px; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { font-size: 19px; gap: 10px; }
.brand .mark { width: 24px; height: 24px; color: var(--accent); flex: 0 0 auto; }
/* one button: 10px radius, flat gold, no glow, no lift (same token as the UI's --r-btn) */
.btn { border-radius: 10px; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { transform: none; background: #ffd36a; box-shadow: none; }
.btn-ghost:hover { transform: none; }

/* imagery item 1: one caption per figure, set in the caption line */
.render figcaption { font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) { .nav-in { padding: 10px 16px; } }

/* ===================== v4 (round 3 builder, claude-designbuild-r3-1102) ===================== */
/* defect 7: the proposal label is in the flow at the top of the page, never fixed over content */
/* defect 1: a flat, front-on device frame running the real mockup; no tilt, no reflection, no coloured glow */
.render.live { max-width: 1240px; padding: 0 24px; }
.device { margin: 40px auto 0; max-width: 1180px; }
.device .bezel { background: #0b0d10; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 10px;
  box-shadow: 0 50px 90px -50px #000; }
.device .screen { position: relative; overflow: hidden; border-radius: 9px; background: #000; height: 560px; }
.device iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: transparent; }
.device .screen { background-color: #000; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
.device .base { height: 14px; margin: 0 -3%; background: #15181d; border-radius: 0 0 16px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.device.phone { max-width: 340px; }
.device.phone .bezel { border-radius: 34px; padding: 9px; }
.device.phone .screen { border-radius: 26px; }
.device.phone .base { display: none; }
.render.live figcaption, .render figcaption { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 14px; }
@media (max-width: 720px) { .render.live { padding: 0 16px; } .device { margin-top: 28px; } }

/* ===================== v5 (round 4 builder, claude-designbuild-r4-1102) ===================== */
/* defect 5: one black. No #07090c bands, no seams, no cream band; the wordmark is solid ink */
:root { --bg-2: #000000; }
.band-2 { background: var(--bg); box-shadow: none; }
.wordmark { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
  -webkit-text-fill-color: var(--ink); letter-spacing: -.035em; }
/* "Two ways" on black: two columns separated by a hairline, no raised panels */
.offers { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; border-top: 1px solid var(--edge-hi); }
.offer, .offer:nth-child(2) { background: none; border-radius: 0; box-shadow: none; padding: 32px 40px 8px 0; margin-top: 0; color: var(--ink); transform: none; }
.offer:nth-child(2) { padding: 32px 0 8px 40px; border-left: 1px solid var(--edge-hi); }
.offer:hover { transform: none; box-shadow: none; }
.offer h3 { color: var(--ink); }
.offer p, .offer li { color: var(--ink-2); }
.offer .label, .offer:nth-child(2) .label { color: var(--ink-3); font-weight: 500; }
.offer li, .offer:nth-child(2) li { border-top-color: var(--edge); }
.offer .textlink, .offer:nth-child(2) .textlink { color: var(--ink); }
/* defect 1: the hero is tighter, so more of the live screen sits above the fold at 1440x900 */
.hero2 { padding-top: 40px; }
.wordmark { font-size: clamp(104px, 14vw, 208px); }
.byline { margin-top: 12px; }
.hero2 .lede { margin: 18px auto 24px; }
.hero2 .render.live .device { margin-top: 28px; }
/* defect 1: flat, front-on screenshots in plain frames; no tilt, no reflection, no edge fade */
.render.flat { max-width: 1240px; padding: 0 24px; margin-top: 56px; }
.render.flat img { -webkit-mask-image: none; mask-image: none; display: block; width: 100%; height: auto; border-radius: 9px; }
.device.still .bezel, .device.pair .bezel { background: #0b0d10; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 10px;
  box-shadow: 0 50px 90px -50px #000; }
.device.pair { display: flex; justify-content: center; gap: 28px; max-width: 760px; }
.device.pair .bezel { width: min(300px, 44vw); border-radius: 30px; padding: 8px; }
.device.pair img { border-radius: 23px; }
@media (max-width: 720px) {
  .render.flat { padding: 0 16px; margin-top: 36px; }
  .offers { grid-template-columns: 1fr; }
  .offer, .offer:nth-child(2) { padding: 28px 0 8px; border-left: 0; }
  .offer:nth-child(2) { border-top: 1px solid var(--edge-hi); margin-top: 24px; }
  .device.pair { gap: 14px; }
  .device.pair .bezel { padding: 5px; border-radius: 22px; }
  .device.pair img { border-radius: 17px; }
}
/* ===================== v6 (round 5 builder, claude-designbuild-r5-1102) ===================== */
/* B: headings wrap balanced; the last two words are joined in the markup too, so nothing ends on one word */
h1, h2, h3, .lede { text-wrap: balance; }
/* B: rhythm. Six sections, each a different shape and height, not one padding eleven times */
.band { padding: 96px 0; }
.sec-film { padding: 104px 0 88px; }
.sec-how { padding: 88px 0 96px; border-top: 1px solid var(--edge); }
.sec-private { padding: 104px 0; }
.sec-status { padding: 88px 0 72px; border-top: 1px solid var(--edge); }
.sec-close { padding: 120px 0 136px; }
.h-big { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.035em; }
/* A1: the hero ends above the fold at 1440x900; the frame's height is set by the script to the space that is left */
.hero2 { padding-top: 28px; }
.wordmark { font-size: clamp(84px, 10vw, 148px); line-height: .9; }
.byline { margin-top: 10px; }
.hero2 .lede { margin: 16px auto 22px; max-width: 30em; }
.hero2 .render.live { max-width: 1060px; }
.hero2 .render.live .device { margin-top: 26px; max-width: 1000px; }
.device .base { display: none; }
/* A6: the recorded run, flat and full width, with the browser's own play control */
.film-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; }
.film-head .lede { margin: 0; }
.reel { max-width: 1240px; margin: 48px auto 0; padding: 0 24px; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #0b0d10;
  border: 1px solid rgba(255,255,255,.10); }
.reel figcaption { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.film-foot { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.film-foot p { margin: 0; color: var(--ink-2); }
/* how a job runs: Onest numbers (the UI's rule), no mono, a hairline instead of a glowing rule */
.rail { margin-top: 48px; }
.rail::before { background: var(--edge-hi); }
.step .n { font: 600 18px "Onest", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); background: #000;
  box-shadow: 0 0 0 1px var(--edge-hi) inset, 0 0 0 6px #000; }
.sec-how .render.flat { margin-top: 64px; }
/* inside your business: three words on a hairline under one gold rule, no card, no box in a box */
.inside { border-top: 2px solid var(--accent); padding-top: 22px; }
.inside .who { font-size: 15px; color: var(--ink-3); margin: 0 0 18px; }
.inside-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--edge-hi);
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.inside-row small { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-top: 4px; }
.inside .caption { margin-top: 14px; }
/* where we are: hairline rows on black, no card */
.status-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.ledger { margin-top: 28px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--edge-hi); }
.ledger .row { grid-template-columns: 180px 1fr; padding: 16px 0; }
.ledger .row:first-child { border-top: 0; }
.ledger .row:hover { background: none; }
.founders { margin-top: 20px; }
.thesis { color: var(--ink-2); margin: 28px 0 0; max-width: 32em; }
/* the closer: type on black with the two ways to work with us, no filled card */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 1px solid var(--edge-hi); }
.ways > div { padding: 28px 40px 0 0; }
.ways > div + div { padding: 28px 0 0 40px; border-left: 1px solid var(--edge-hi); }
.ways h3 { margin-bottom: 8px; }
.ways p { color: var(--ink-2); margin: 0; }
.sec-close .cta-row { margin-top: 40px; }
/* how-it-works: each step shows a flat crop of the real screen for that moment, with one caption */
.chapter .num { font: 600 15px "Onest", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.crop { margin: 0; }
.crop img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); background: #000; }
.crop figcaption { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.duo h3 { margin-top: 28px; }
.duo h3:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .film-head, .status-grid, .ways, .duo { grid-template-columns: 1fr; gap: 28px; }
  .ways > div, .ways > div + div { padding: 24px 0 0; border-left: 0; }
  .ways > div + div { border-top: 1px solid var(--edge-hi); margin-top: 24px; }
  .reel { padding: 0 16px; margin-top: 32px; }
  .ledger .row { grid-template-columns: 1fr; padding: 14px 0; }
  .inside-row { flex-direction: column; gap: 12px; }
  .sec-film, .sec-how, .sec-private, .sec-status { padding: 72px 0; }
  .sec-close { padding: 88px 0 104px; }
}
/* ===================== site_live port (claude-siteport1102) ===================== */
p, dd, li, a { overflow-wrap: anywhere; }
.more { margin-top: 32px; }
.nav-talk { display: none; }
.direct { margin-top: 28px; color: var(--ink-2); }
.direct a, .chapter p a:not(.textlink), .ledger dd a { color: var(--ink); }
.sec-private p .textlink { color: var(--ink); }
.sec-status .muted { margin: 6px 0 0; }
.sec-status .textlink, .reel .textlink { color: var(--ink); }
.page-hero .muted { margin: -12px 0 28px; }
.page-hero .reel { margin-top: 8px; }
.chapter > div > p:first-child { margin-top: 0; }
.chapter h2 + p { color: var(--ink-3); margin-top: 0; }
.chapter .ledger { margin-top: 0; }
.checks li { padding: 16px 0; }
.still { margin: 0 0 24px; }
.still img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); }
.still figcaption { font-size: 13px; color: var(--ink-3); margin-top: 12px; }
.ways-one { grid-template-columns: 1fr; margin-top: 48px; }
/* Bruce for CRE: the workflows, three across (founder 11/04) */
.ways-cre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; margin-top: 40px; }
.ways.ways-cre > div { padding: 0; border: 0; }
.ways-cre p { margin: 0 0 10px; }
.ways-cre p.muted { font-size: 14px; color: var(--ink-3); }
/* site-2-1111: the CRE information page (price, efficiency, data security, films, models to click) */
.chapter h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.005em; margin: 32px 0 8px; color: var(--ink); }
.chapter h3:first-child { margin-top: 0; }
.cre-days { padding: 0 0 72px; }
.cre-day { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0; padding-top: 28px; border-top: 1px solid var(--edge); }
.cre-days .ways-cre { margin: 32px 0 56px; }
.cre-why { max-width: 720px; }
.cre-why p { color: var(--ink-2); }
.cre-see { border-top: 1px solid var(--edge); }
.cre-model { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--edge); }
.cre-model h3 { font-size: 24px; margin: 0 0 8px; }
.cre-model > p { color: var(--ink-2); margin: 0 0 6px; max-width: 720px; }
.cre-model .demo-style { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.cre-model .demo-label { color: var(--ink-3); font-size: 13px; }
.cre-film { margin-top: 24px; }
.cre-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--edge); }
.cre-film .cre-tall { display: none; aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.cre-play { margin-top: 40px; }
.cre-play h4 { font-size: 18px; margin: 0 0 14px; }
.cre-play iframe { display: block; width: 100%; height: min(72vh, 720px); min-height: 420px; border: 0; border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--edge); }
.cre-play p { margin: 14px 0 0; }
@media (max-width: 640px) {
  .cre-film .cre-tall { display: block; }
  .cre-film .cre-wide:not(.cre-only) { display: none; }
  .cre-play iframe { height: 78vh; }
  .cre-model { margin-top: 48px; }
}
.ways-one > div { padding-right: 0; }
.ways-one + .cta-row { margin-top: 56px; }
.people { display: grid; gap: 36px; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
.person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.person h3 { margin: 0; }
.person .role { color: var(--accent); margin: 2px 0 8px; font-weight: 500; }
.person p { color: var(--ink-2); margin: 0; }
/* contact form */
.contact { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 64px; align-items: start; }
.formbox { background: var(--raise); border: 1px solid var(--edge-hi); border-radius: 16px; padding: 28px; }
.wl label { display: block; font-size: 15px; color: var(--ink-2); margin: 16px 0 6px; }
.wl label:first-child { margin-top: 0; }
.wl input, .wl select { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge-hi);
  background: #000; color: var(--ink); font: inherit; }
.wl input:focus-visible, .wl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wl input[aria-invalid=true] { border-color: #ff8a7a; }
.wl .btn { margin-top: 22px; width: 100%; border: 0; cursor: pointer; }
.wl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-status { min-height: 1.6em; margin: 14px 0 0; color: var(--ink); }
.wl-status.err { color: #ff8a7a; }
.alt { font-size: 14px; color: var(--ink-3); margin: 8px 0 0; }
/* ---- colour that pops, with restraint (founder 11/03 "make the color pop more"; the critic's "pop done well"):
   one colour per kind of moment, the same four everywhere. All measured against #000 for AA (>= 4.5:1):
   action gold #f5c451 12.9:1 . Bruce working cyan #5ce1f5 13.9:1 . done green #5fd38d 11.3:1 . held amber #ffb547 11.6:1 */
/* kind colours: from the design system (--k-work, --k-done, --k-you, --k-need) */
.k-action { --k: var(--k-you); } .k-work { --k: var(--k-work); } .k-done { --k: var(--k-done); } .k-held { --k: var(--k-need); }
h1 em, h2 em { font-style: normal; color: var(--accent); }
.wordmark { text-shadow: 0 0 60px rgba(var(--glow), .18); }
.kicker b { letter-spacing: .01em; }
.btn-primary { box-shadow: 0 0 0 1px rgba(var(--glow), .55), 0 10px 30px -10px rgba(var(--glow), .55); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(var(--glow), .8), 0 14px 36px -10px rgba(var(--glow), .7); }
.step .n { color: var(--k, var(--ink)); box-shadow: 0 0 0 1px var(--k, var(--edge-hi)) inset, 0 0 0 6px #000, 0 0 24px -6px var(--k, transparent); }
.step h3 { color: var(--ink); }
.chapter .num { color: var(--k, var(--accent)); }
.chapter.k-action, .chapter.k-work, .chapter.k-done, .chapter.k-held { border-top-color: var(--k); }
.ways > div[class^="k-"] h3::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--k); margin-bottom: 16px; }
.inside { border-top-color: var(--k-need); }
.inside .who { color: var(--k-need); font-weight: 600; }
.ledger dd { color: var(--ink); }
/* the demo library: the full walkthrough across the top, the shorter runs in a row beneath it */
.library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 44px; }
.library .demo:first-child { grid-column: 1 / -1; }
.demo { margin: 0; border-top: 2px solid var(--k); padding-top: 18px; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0d10;
  border: 1px solid rgba(255,255,255,.10); }
.demo .demo-cap { margin-top: 14px; }
.demo .demo-style { font-size: 13px; font-weight: 600; color: var(--k); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.demo h2, .demo h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 6px; }
.demo p { color: var(--ink-2); margin: 0 0 6px; font-size: 15px; }
.demo .demo-label { color: var(--ink-3); font-size: 13px; }
.library .demo:first-child h2, .library .demo:first-child h3 { font-size: 24px; }
/* the composer, lit at rest: the email field reads as the place to start */
.wl #wl-email { border-color: rgba(var(--glow), .55); box-shadow: 0 0 0 3px rgba(var(--glow), .10); }
/* phone menu: the button opens the same links as a list under the bar */
@media (max-width: 900px) {
  .library { grid-template-columns: 1fr; gap: 36px; }
  .ways-cre { grid-template-columns: 1fr; gap: 36px; }
  .nav-in { flex-wrap: wrap; }
  .nav.open .nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; order: 3; margin: 6px 0 4px; }
  .nav.open .nav-links a { padding: 13px 0; font-size: 17px; color: var(--ink); border-top: 1px solid var(--edge); }
  .nav.open .nav-links .nav-talk { display: block; color: var(--accent); }
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .formbox { padding: 20px; }
  .person { grid-template-columns: 64px 1fr; gap: 16px; }
  .person img { width: 64px; height: 64px; }
  .inside-row { font-size: 24px; }
  .page-hero { padding: 56px 0 40px; }
  .chapter .num { padding-top: 0; }
}