:root {
  --bg: #07111f;
  --bg-2: #0d1b2f;
  --ink: #eef6ff;
  --muted: #9fb1c7;
  --soft: #c9d8eb;
  --panel: rgba(255,255,255,.075);
  --panel-strong: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.14);
  --gold: #f4c76b;
  --gold-2: #ffe29a;
  --warm: #ffd166;
  --warm-2: #ffdf9c;
  --warm-rose: #ffb38a;
  --blue: #68d5ff;
  --green: #6ee7a8;
  --red: #ff8f8f;
  --trust: #68d5ff;
  --progress: #6ee7c8;
  --review: #f4c76b;
  --danger: #ff8f8f;
  --strategy: #b99cff;
  --shadow: rgba(0,0,0,.35);
  --sterile: #8adfff;
  --sterile-line: rgba(138,223,255,.16);
  --human-glow: rgba(255,179,138,.22);
  --aurora: #ff8fb3;
  --violet: #b99cff;
  --ice: #d7f7ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #050a13; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse at 12% 4%, rgba(255,179,138,.26), transparent 35%),
    radial-gradient(ellipse at 36% 0%, rgba(255,209,102,.16), transparent 31%),
    radial-gradient(ellipse at 72% 5%, rgba(104,213,255,.24), transparent 36%),
    radial-gradient(ellipse at 52% 42%, rgba(185,156,255,.13), transparent 42%),
    linear-gradient(138deg, #07111f 0%, #0b1729 42%, #081221 62%, #050a13 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: .78;
  filter: blur(34px) saturate(1.2);
  transform: scale(1.06);
  background:
    conic-gradient(from 230deg at 28% 24%, rgba(255,143,179,.26), rgba(255,209,102,.16), rgba(104,213,255,.22), rgba(185,156,255,.15), rgba(255,179,138,.22)),
    radial-gradient(ellipse at 70% 38%, rgba(215,247,255,.13), transparent 42%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.70) 54%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.70) 54%, transparent 98%);
}

body::after {
  z-index: 0;
  opacity: .72;
  background:
    radial-gradient(circle at 12% 28%, rgba(255,209,102,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 48%, rgba(255,179,138,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 35%, rgba(255,255,255,.12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 18%, rgba(104,213,255,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 89% 44%, rgba(104,213,255,.15) 0 1.5px, transparent 2.5px);
  mask-image: radial-gradient(ellipse at 50% 22%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 22%, black, transparent 70%);
}

main,
footer,
.trust-strip,
.project-drawer {
  position: relative;
  z-index: 1;
}

a { color: inherit; }
.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.shape-web {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 0;
  width: min(1540px, 120vw);
  height: min(760px, 78vw);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .92;
}

.shape-web svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.25));
}


.latent-halo {
  fill: url(#latentGlow);
  opacity: .84;
}

.latent-field {
  opacity: .9;
  mix-blend-mode: screen;
}

.latent-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 12px rgba(104,213,255,.08));
}

.flow-a { stroke: url(#latentFlow); stroke-width: 2.1; opacity: .72; }
.flow-b { stroke: url(#latentCool); stroke-width: 1.45; opacity: .54; stroke-dasharray: 20 18; }
.flow-c { stroke: url(#latentFlow); stroke-width: 1.75; opacity: .62; }
.flow-d { stroke: rgba(255,255,255,.22); stroke-width: 1.15; opacity: .48; stroke-dasharray: 3 14; }
.flow-e { stroke: rgba(185,156,255,.38); stroke-width: 1.35; opacity: .46; }
.flow-f { stroke: rgba(255,209,102,.30); stroke-width: 1.1; opacity: .42; stroke-dasharray: 10 20; }

.signal-cloud .signal {
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.signal.warm { fill: rgba(255,209,102,.86); stroke: rgba(255,179,138,.58); }
.signal.bridge { fill: rgba(185,156,255,.78); stroke: rgba(255,255,255,.44); }
.signal.cool { fill: rgba(104,213,255,.82); stroke: rgba(215,247,255,.52); }
.signal.tiny { opacity: .72; }

.latent-links path {
  fill: none;
  stroke: rgba(255,255,255,.14);
  stroke-width: .75;
  stroke-linecap: round;
  stroke-dasharray: 3 12;
  vector-effect: non-scaling-stroke;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px max(20px, calc((100vw - 1180px) / 2));
  background: rgba(7,17,31,.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 900; letter-spacing: -.012em; }
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,209,102,.44); border-radius: 50%; color: #111826; background: linear-gradient(135deg, var(--warm), var(--warm-rose)); font-size: 15px; font-weight: 900; line-height: 1; box-shadow: 0 10px 26px rgba(255,179,138,.16); }
.nav nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; }
.nav nav a { text-decoration: none; }
.nav nav a:hover { color: var(--ink); }
.nav-cta { color: #111826 !important; background: linear-gradient(135deg, var(--warm), var(--warm-2)); border: 0; border-radius: 999px; padding: 10px 14px; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 10px 30px rgba(255,209,102,.14); }

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(64px, 9vw, 118px) 48px;
}
.eyebrow { margin: 0 0 12px; color: var(--warm); text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 900; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; max-width: 980px; font-size: clamp(42px, 6.5vw, 80px); line-height: .96; letter-spacing: -.045em; }
h2 { margin: 0; font-size: clamp(31px, 4vw, 54px); line-height: 1.04; letter-spacing: -.032em; }
h3 { margin: 0; font-size: 21px; letter-spacing: -.012em; }
.lead { margin: 24px 0 0; max-width: 760px; color: var(--soft); font-size: clamp(18px, 2vw, 23px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 18px; border-radius: 14px; text-decoration: none; font: inherit; font-weight: 900; border: 1px solid transparent; cursor: pointer; }
.button.primary { color: #111826; background: linear-gradient(135deg, var(--warm), var(--warm-2)); box-shadow: 0 18px 50px rgba(255,209,102,.18); }
.button.primary:hover { transform: translateY(-1px); box-shadow: 0 20px 60px rgba(255,209,102,.25); }
.button.secondary { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.07); }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }
.hero-metrics div { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.055); }
.hero-metrics dt { color: var(--warm); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.hero-metrics dd { margin: 6px 0 0; color: var(--soft); font-weight: 750; line-height: 1.25; }

.hero-copy, .hero-panel { min-width: 0; }
.hero-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.052)); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; padding: 18px; box-shadow: 0 30px 90px var(--shadow); }
.hero-panel::before { content: ""; position: absolute; inset: -80px -80px auto auto; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,209,102,.16); filter: blur(8px); }
.hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 20%, rgba(255,209,102,.13), transparent 38%), radial-gradient(ellipse at 68% 30%, rgba(104,213,255,.14), transparent 42%), radial-gradient(circle at 42% 70%, rgba(185,156,255,.10), transparent 28%), conic-gradient(from 228deg at 52% 50%, transparent, rgba(255,179,138,.06), rgba(104,213,255,.08), transparent 58%); mask-image: linear-gradient(90deg, transparent, black 48%, black); -webkit-mask-image: linear-gradient(90deg, transparent, black 48%, black); }
.panel-top { position: relative; z-index: 1; display: flex; gap: 7px; margin-bottom: 16px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; opacity: .9; }
.green { background: var(--green); } .yellow { background: var(--review); } .red { background: #ff7d7d; }
.signal-card { position: relative; z-index: 1; border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 12px; background: rgba(0,0,0,.20); }
.signal-card.active { background: rgba(104,213,255,.105); border-color: rgba(104,213,255,.32); }
.signal-card.review { border-radius: 12px; background: rgba(244,199,107,.09); border-color: rgba(244,199,107,.34); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.signal-card.handled { border-radius: 24px; background: rgba(110,231,200,.09); border-color: rgba(110,231,200,.28); }
.signal-card span { color: var(--trust); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 950; }
.signal-card.review span { color: var(--review); }
.signal-card.handled span { color: var(--progress); }
.signal-card strong { display: block; margin: 7px 0; font-size: 25px; }
.signal-card p { margin: 0; color: var(--muted); line-height: 1.5; }

.trust-strip { padding: 18px 22px; border: 1px solid rgba(255,209,102,.26); border-radius: 20px; background: linear-gradient(135deg, rgba(255,209,102,.09), rgba(104,213,255,.06)); text-align: center; color: #ffe8b8; }
.trust-strip p { margin: 0; }

.node-system {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin-top: 22px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 38px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,179,138,.18), transparent 38%),
    radial-gradient(circle at 78% 26%, rgba(104,213,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.038));
  box-shadow: 0 30px 100px rgba(0,0,0,.22);
  overflow: hidden;
}
.node-system::before {
  content: "";
  position: absolute;
  inset: -30% -12%;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 52%, rgba(255,255,255,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 22%, rgba(185,156,255,.20) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 62%, rgba(104,213,255,.20) 0 1.5px, transparent 2.5px);
  opacity: .65;
  mask-image: radial-gradient(ellipse at 60% 48%, black, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 48%, black, transparent 68%);
}
.node-system-copy { position: relative; z-index: 1; }
.node-system-copy p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.62; }
.node-system-map {
  position: relative;
  z-index: 1;
  min-height: 430px;
  border-radius: 34px;
  border: 1px solid rgba(104,213,255,.18);
  background:
    radial-gradient(circle at 48% 48%, rgba(104,213,255,.16), transparent 31%),
    radial-gradient(circle at 31% 42%, rgba(255,209,102,.13), transparent 28%),
    radial-gradient(circle at 66% 65%, rgba(185,156,255,.16), transparent 32%),
    rgba(0,0,0,.18);
  overflow: hidden;
}
.node-system-map::before,
.node-system-map::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  transform: rotate(-9deg);
}
.node-system-map::after { inset: 68px 72px; transform: rotate(18deg); border-color: rgba(104,213,255,.13); }
.node-core,
.mesh-node,
.mesh-dot,
.mesh-line { position: absolute; }
.node-core {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 118px; height: 118px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  color: #08111f;
  background: radial-gradient(circle at 30% 20%, #fff9df, var(--warm) 44%, #78ddff 100%);
  font-weight: 1000;
  letter-spacing: -.03em;
  box-shadow: 0 0 0 11px rgba(255,209,102,.08), 0 0 60px rgba(104,213,255,.32);
}
.node-core span { display: block; margin-top: -34px; font-size: 11px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; color: rgba(8,17,31,.72); }
.mesh-node {
  min-width: 78px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: var(--soft);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.mesh-node.warm { border-color: rgba(255,209,102,.33); color: #ffe7ad; background: rgba(255,209,102,.10); }
.mesh-node.cool { border-color: rgba(104,213,255,.34); color: #d7f7ff; background: rgba(104,213,255,.10); }
.mesh-node.bridge { border-color: rgba(185,156,255,.34); color: #e7ddff; background: rgba(185,156,255,.11); }
.mesh-node.review { border-radius: 12px; border-color: rgba(244,199,107,.40); color: #ffe4a3; background: rgba(244,199,107,.10); }
.mesh-line {
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(104,213,255,.28), transparent);
  filter: drop-shadow(0 0 10px rgba(104,213,255,.12));
}
.ml-a { left: 18%; top: 34%; width: 64%; transform: rotate(11deg); }
.ml-b { left: 20%; top: 62%; width: 58%; transform: rotate(-16deg); }
.ml-c { left: 12%; top: 50%; width: 78%; transform: rotate(39deg); }
.ml-d { left: 40%; top: 19%; width: 42%; transform: rotate(77deg); }
.ml-e { left: 8%; top: 78%; width: 72%; transform: rotate(-34deg); }
.ml-f { left: 26%; top: 26%; width: 66%; transform: rotate(154deg); }
.n-customer { left: 7%; top: 15%; }
.n-inbox { left: 17%; top: 42%; }
.n-portal { right: 14%; top: 12%; }
.n-crm { right: 8%; top: 39%; }
.n-docs { left: 38%; top: 9%; }
.n-memory { left: 48%; bottom: 12%; }
.n-risk { left: 27%; bottom: 16%; }
.n-review { right: 23%; bottom: 19%; }
.n-draft { right: 9%; bottom: 8%; }
.n-task { left: 9%; bottom: 9%; }
.n-report { right: 36%; top: 49%; }
.n-team { left: 33%; top: 64%; }
.mesh-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 20px rgba(104,213,255,.38);
}
.md-a { left: 22%; top: 27%; } .md-b { left: 31%; top: 35%; } .md-c { left: 61%; top: 25%; } .md-d { left: 72%; top: 55%; } .md-e { left: 43%; top: 39%; }
.md-f { left: 56%; top: 70%; } .md-g { left: 84%; top: 27%; } .md-h { left: 15%; top: 69%; } .md-i { left: 68%; top: 77%; } .md-j { left: 46%; top: 22%; }

.emotional-map { padding-top: 74px; }
.emotion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emotion-card { position: relative; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.15); }
.emotion-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--warm); }
.emotion-card::after { content: ""; position: absolute; inset: auto 18px 18px auto; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.12); opacity: .6; pointer-events: none; }
.emotion-card span { display: inline-block; margin-bottom: 15px; font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: var(--warm); }
.emotion-card p { color: var(--muted); line-height: 1.55; }
.emotion-card.info { border-radius: 34px; background: radial-gradient(circle at 18% 0%, rgba(255,179,138,.18), transparent 48%), rgba(255,255,255,.07); }
.emotion-card.info::after { border-radius: 50%; background: rgba(255,179,138,.07); }
.emotion-card.trust { border-radius: 12px; background: linear-gradient(180deg, rgba(104,213,255,.11), rgba(255,255,255,.055)); }
.emotion-card.trust::after { border-radius: 12px; background: radial-gradient(circle at 28% 30%, rgba(255,209,102,.16) 0 2px, transparent 3px), radial-gradient(circle at 72% 68%, rgba(104,213,255,.18) 0 2px, transparent 3px), linear-gradient(135deg, transparent 0 48%, rgba(104,213,255,.16) 48.4%, transparent 49%), linear-gradient(36deg, transparent 0 32%, rgba(255,209,102,.12) 32.4%, transparent 33%); }
.emotion-card.review { border-radius: 8px 26px 8px 26px; }
.emotion-card.review::after { width: 0; height: 0; border: 0; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 76px solid rgba(244,199,107,.10); }
.emotion-card.trust::before { background: var(--progress); }
.emotion-card.trust span { color: var(--progress); }
.emotion-card.review::before { background: var(--review); }
.emotion-card.review span { color: var(--review); }


.section { position: relative; z-index: 1; padding-block: 82px; }
.section-head { max-width: 820px; margin-bottom: 28px; }
.section-head.wide { max-width: 980px; }
.section-head p, .split p, .offer p, .cta p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.cards { display: grid; gap: 18px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .fit-card, .mini-card, details { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.15); }
.card.featured { border-color: rgba(244,199,107,.36); background: linear-gradient(180deg, rgba(244,199,107,.13), rgba(255,255,255,.07)); }
.card.good { border-color: rgba(110,231,168,.30); background: rgba(110,231,168,.075); }
.card.bad { border-color: rgba(255,143,143,.28); background: rgba(255,143,143,.055); }
.card p, .mini-card p { color: var(--muted); line-height: 1.55; }
.card-kicker { display: inline-block; margin-bottom: 16px; color: var(--blue); font-weight: 950; letter-spacing: .14em; }
ul { margin: 18px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.78; }
li::marker { color: var(--trust); }
.checklist li::marker { content: "✓  "; color: var(--green); }
.xlist li::marker { content: "×  "; color: var(--red); }

.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.outcome-grid div { padding: 22px; border: 1px solid rgba(104,213,255,.22); border-radius: 22px; background: rgba(104,213,255,.065); }
.outcome-grid strong { display: block; color: var(--blue); font-size: 19px; margin-bottom: 10px; }
.outcome-grid span { color: var(--muted); line-height: 1.5; }

.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: start; }
.use-cases, .offer-list { display: grid; gap: 12px; }
.use-cases div, .offer-list div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.06); }
.use-cases strong, .offer-list strong { color: var(--trust); }
.use-cases span, .offer-list span { color: var(--muted); line-height: 1.5; }

.dark { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border-block: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(0,0,0,.16); }
.step span { color: var(--blue); font-weight: 950; letter-spacing: .12em; }
.step h3 { margin-top: 16px; }
.step p { color: var(--muted); line-height: 1.55; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-card.yes { border-color: rgba(110,231,168,.30); background: rgba(110,231,168,.08); }
.safeguards .mini-card h3 { color: var(--trust); }
.offer { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: center; border-top: 1px solid var(--line); }

.research::before,
.proof::before,
.safeguards::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 18px auto auto 50%;
  width: min(520px, 70vw);
  height: 220px;
  transform: translateX(-8%) rotate(-4deg);
  opacity: .36;
  background:
    radial-gradient(circle at 10% 38%, rgba(255,209,102,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 20%, rgba(185,156,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 54%, rgba(104,213,255,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 32%, rgba(104,213,255,.18) 0 1.5px, transparent 2.5px),
    linear-gradient(20deg, transparent 0 18%, rgba(255,255,255,.08) 18.15%, transparent 18.45%),
    linear-gradient(154deg, transparent 0 56%, rgba(104,213,255,.12) 56.1%, transparent 56.42%);
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%);
}
.comparison-grid { grid-template-columns: minmax(0, 1.14fr) minmax(280px, .86fr); align-items: start; }
.comparison-grid .card.bad { margin-top: 44px; }
#services .cards.three { grid-template-columns: .9fr 1.22fr .9fr; align-items: stretch; }
#services .card.featured { transform: translateY(-18px); }
.outcome-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.outcome-grid div { min-height: 150px; }
.outcome-grid div:nth-child(1), .outcome-grid div:nth-child(4) { grid-column: span 2; }
.outcome-grid div:nth-child(2), .outcome-grid div:nth-child(3) { grid-column: span 2; transform: translateY(22px); }
.steps { align-items: start; }
.step:nth-child(2), .step:nth-child(4) { transform: translateY(28px); }
.safeguards .mini-card:nth-child(2), .safeguards .mini-card:nth-child(4) { transform: translateY(20px); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
details { padding: 20px 22px; }
summary { cursor: pointer; font-weight: 900; font-size: 18px; }
details p { color: var(--muted); line-height: 1.55; margin-bottom: 0; }

.cta { margin-bottom: 78px; padding: clamp(32px, 6vw, 70px); text-align: center; border: 1px solid rgba(104,213,255,.27); border-radius: 34px; background: radial-gradient(circle at top, rgba(104,213,255,.18), rgba(255,255,255,.055) 52%); box-shadow: 0 30px 100px rgba(0,0,0,.25); }
.cta h2 { max-width: 850px; margin: 0 auto; }
.cta p { max-width: 700px; margin: 18px auto 26px; }
.domains { font-size: 14px !important; margin-bottom: 0 !important; }

footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 26px; color: var(--muted); border-top: 1px solid var(--line); }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

body.drawer-open { overflow: hidden; }
.project-drawer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.project-drawer[aria-hidden="false"] { pointer-events: auto; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .24s ease; }
.project-drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(760px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 44px);
  border-left: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 15% 0%, rgba(104,213,255,.20), transparent 36%),
    linear-gradient(180deg, #0a1728, #06101e);
  box-shadow: -34px 0 90px rgba(0,0,0,.45);
  transform: translateX(105%);
  transition: transform .28s ease;
}
.project-drawer[aria-hidden="false"] .drawer-panel { transform: translateX(0); }
.drawer-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.08); font-size: 30px; line-height: 1; cursor: pointer; }
.drawer-panel h2 { margin-right: 42px; font-size: clamp(30px, 5vw, 48px); }
.drawer-lead { color: var(--muted); font-size: 18px; line-height: 1.55; }
.drawer-guardrail { margin: 14px 0 0; padding: 14px 16px; border: 1px solid rgba(104,213,255,.24); border-radius: 16px; color: #d8f4ff; background: rgba(104,213,255,.08); line-height: 1.5; }
.drawer-guardrail strong { color: var(--trust); }
.drawer-form { margin-top: 24px; }
.drawer-form label { display: grid; gap: 9px; margin-top: 16px; color: var(--soft); font-weight: 900; }
.drawer-form textarea, .drawer-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  color: var(--ink);
  background: rgba(0,0,0,.24);
  font: inherit;
  outline: none;
}
.drawer-form textarea { min-height: 210px; resize: vertical; line-height: 1.55; }
.drawer-form textarea::placeholder, .drawer-form input::placeholder { color: rgba(201,216,235,.48); }
.drawer-form textarea:focus, .drawer-form input:focus { border-color: rgba(104,213,255,.58); box-shadow: 0 0 0 4px rgba(104,213,255,.12); }
.send-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.send-choice { min-height: 160px; padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.065); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.send-choice:hover { transform: translateY(-2px); border-color: rgba(104,213,255,.42); background: rgba(255,255,255,.10); }
.send-choice span { display: inline-flex; margin-bottom: 16px; color: #08111f; background: var(--trust); border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.send-choice strong { display: block; font-size: 19px; letter-spacing: -.02em; }
.send-choice small { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.send-choice:disabled { cursor: wait; opacity: .68; transform: none; }
.drawer-status { min-height: 24px; margin: 14px 0 0; color: var(--progress); font-weight: 800; line-height: 1.45; }
.hidden-submit-frame { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

.email-hero { padding-block: clamp(58px, 9vw, 108px) 36px; text-align: center; }
.email-hero h1 { margin-inline: auto; max-width: 1000px; }
.email-hero .lead { margin-inline: auto; }
.email-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; text-align: left; }
.email-option { display: block; min-height: 176px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); text-decoration: none; box-shadow: 0 20px 70px rgba(0,0,0,.16); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.email-option:hover { transform: translateY(-2px); border-color: rgba(104,213,255,.42); background: rgba(255,255,255,.095); }
.email-option span { display: inline-flex; margin-bottom: 20px; color: #08111f; background: var(--trust); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.email-option strong { display: block; font-size: 25px; letter-spacing: -.03em; }
.email-option small { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.email-form-section { padding-top: 50px; }
.contact-form { padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(104,213,255,.24); border-radius: 28px; background: rgba(255,255,255,.07); box-shadow: 0 28px 90px rgba(0,0,0,.20); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; margin-top: 16px; color: var(--soft); font-weight: 850; }
.contact-form .form-grid label { margin-top: 0; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; color: var(--ink); background: rgba(0,0,0,.20); font: inherit; outline: none; }
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(104,213,255,.55); box-shadow: 0 0 0 4px rgba(104,213,255,.12); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.form-actions .button { border: 0; cursor: pointer; font: inherit; }
.form-note { margin: 14px 0 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 980px) {
  .shape-web { top: 80px; width: 142vw; height: 560px; opacity: .55; }
  .nav { position: sticky; align-items: center; padding: 12px 14px; gap: 12px; }
  .nav nav { display: flex; gap: 0; margin-left: auto; }
  .nav nav a { display: none; }
  .nav-cta { display: inline-flex; align-items: center; min-height: 42px; white-space: nowrap; padding-inline: 13px; }
  .hero, .split, .offer, .node-system { grid-template-columns: 1fr; }
  .cards.three, .cards.four, .steps, .fit-grid, .comparison-grid, .outcome-grid, .faq-grid, .email-options, .form-grid, .emotion-grid, #services .cards.three { grid-template-columns: 1fr; }
  .comparison-grid .card.bad, #services .card.featured, .outcome-grid div:nth-child(n), .step:nth-child(n), .safeguards .mini-card:nth-child(n) { transform: none; margin-top: 0; grid-column: auto; }
  .node-system-map { min-height: 360px; }
  .hero-panel { min-width: 0; }
  .hero-metrics { grid-template-columns: 1fr; }
  .use-cases div, .offer-list div { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}

@media (max-width: 760px) {
  .drawer-panel { width: 100%; border-left: 0; }
  .send-choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body::after { opacity: .35; }
  .shape-web { top: 68px; width: 168vw; height: 430px; opacity: .42; }
  .section-shell { width: min(100% - 28px, 1180px); }
  .brand span:last-child { font-size: 15px; }
  .mark { font-size: 15px; }
  .nav-cta { font-size: 13px; padding: 9px 11px; }
  .section { padding-block: 58px; }
  .hero { padding-block: 48px 34px; }
  h1 { font-size: clamp(32px, 11vw, 44px); line-height: .96; letter-spacing: -.045em; overflow-wrap: anywhere; }
  .lead { font-size: 17px; }
  .button { width: 100%; }
  .drawer-panel { width: 100%; padding: 22px 16px 28px; border-left: 0; }
  .drawer-close { top: 12px; right: 12px; }
  .drawer-panel h2 { margin-right: 46px; }
  .drawer-form textarea { min-height: 180px; }
  .send-choice-grid { grid-template-columns: 1fr; }
  .send-choice { min-height: 118px; }
  .card, .fit-card, .mini-card, details { padding: 20px; border-radius: 20px; }
}

/* Universal AI/human colour theme pass - 2026-05-20 */
:root {
  --bg: #050d1a;
  --bg-2: #0a1a31;
  --ink: #f4f8ff;
  --muted: #a9b9cf;
  --soft: #d9e7f7;
  --panel: rgba(255,255,255,.086);
  --panel-strong: rgba(255,255,255,.145);
  --line: rgba(219,238,255,.18);
  --gold: #ffd166;
  --gold-2: #ffe4a3;
  --warm: #ffd166;
  --warm-2: #ffe7ae;
  --warm-rose: #ff9f7d;
  --human: #ffb38a;
  --blue: #5fd7ff;
  --trust: #5fd7ff;
  --green: #63e6a9;
  --progress: #67e7c2;
  --review: #ffd166;
  --danger: #ff7f8a;
  --red: #ff7f8a;
  --strategy: #b79cff;
  --violet: #b79cff;
  --ice: #e3fbff;
  --sterile: #8de5ff;
  --sterile-line: rgba(141,229,255,.22);
  --human-glow: rgba(255,159,125,.28);
  --trust-glow: rgba(95,215,255,.25);
  --progress-glow: rgba(103,231,194,.20);
  --strategy-glow: rgba(183,156,255,.20);
  --theme-rail: linear-gradient(90deg, var(--warm) 0%, var(--human) 26%, var(--trust) 58%, var(--strategy) 100%);
  --theme-surface: linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
  --theme-surface-strong: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
}

body {
  background:
    radial-gradient(ellipse at 10% 2%, rgba(255,159,125,.34), transparent 34%),
    radial-gradient(ellipse at 32% 0%, rgba(255,209,102,.22), transparent 30%),
    radial-gradient(ellipse at 72% 4%, rgba(95,215,255,.34), transparent 36%),
    radial-gradient(ellipse at 52% 39%, rgba(183,156,255,.19), transparent 43%),
    linear-gradient(140deg, #050d1a 0%, #0a1a31 39%, #071728 68%, #040813 100%);
}

body::before {
  opacity: .86;
  background:
    conic-gradient(from 224deg at 27% 24%, rgba(255,159,125,.34), rgba(255,209,102,.20), rgba(95,215,255,.30), rgba(183,156,255,.20), rgba(255,179,138,.26)),
    radial-gradient(ellipse at 72% 38%, rgba(227,251,255,.17), transparent 43%),
    radial-gradient(ellipse at 24% 72%, rgba(103,231,194,.10), transparent 38%);
}

body::after {
  opacity: .78;
  background:
    radial-gradient(circle at 12% 28%, rgba(255,209,102,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 48%, rgba(255,159,125,.21) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 35%, rgba(255,255,255,.15) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 18%, rgba(95,215,255,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 89% 44%, rgba(183,156,255,.19) 0 1.5px, transparent 2.5px),
    linear-gradient(28deg, transparent 0 22%, rgba(255,255,255,.045) 22.1%, transparent 22.35%),
    linear-gradient(142deg, transparent 0 64%, rgba(95,215,255,.07) 64.1%, transparent 64.35%);
}

.nav {
  background: linear-gradient(180deg, rgba(5,13,26,.88), rgba(5,13,26,.72));
  border-bottom-color: rgba(219,238,255,.18);
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
}

.mark,
.nav-cta,
.button.primary {
  background: linear-gradient(135deg, var(--warm) 0%, var(--human) 43%, var(--trust) 100%);
  box-shadow: 0 18px 52px rgba(255,159,125,.18), 0 0 0 1px rgba(255,255,255,.10) inset;
}

.nav-cta:hover,
.button.primary:hover {
  box-shadow: 0 22px 70px rgba(95,215,255,.22), 0 12px 42px rgba(255,159,125,.22), 0 0 0 1px rgba(255,255,255,.16) inset;
}

.button.secondary,
.email-option,
.send-choice {
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border-color: rgba(219,238,255,.18);
}

.button.secondary:hover,
.email-option:hover,
.send-choice:hover {
  border-color: rgba(95,215,255,.44);
  background: linear-gradient(145deg, rgba(95,215,255,.13), rgba(255,255,255,.06));
}

.eyebrow {
  color: var(--warm);
  text-shadow: 0 0 24px rgba(255,209,102,.20);
}

h1 {
  text-shadow: 0 18px 70px rgba(95,215,255,.10), 0 6px 32px rgba(255,159,125,.08);
}

.lead strong,
.trust-strip strong,
.drawer-guardrail strong,
.form-note strong {
  color: var(--warm-2);
}

.proof-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
  align-items: center;
}

.proof-flow.compact { justify-content: center; }

.proof-flow span {
  --pf-color: var(--trust);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(219,238,255,.17);
  border-radius: 999px;
  color: var(--soft);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 0 22px rgba(95,215,255,.12);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.proof-flow span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-color);
  box-shadow: 0 0 18px var(--pf-color);
}

.proof-flow .pf-source { --pf-color: var(--trust); border-color: rgba(95,215,255,.30); }
.proof-flow .pf-route { --pf-color: var(--strategy); border-color: rgba(183,156,255,.30); }
.proof-flow .pf-review { --pf-color: var(--review); border-color: rgba(255,209,102,.34); }
.proof-flow .pf-ready { --pf-color: var(--progress); border-color: rgba(103,231,194,.32); }

.hero-panel,
.node-system,
.node-system-map,
.card,
.fit-card,
.mini-card,
details,
.email-option,
.contact-form,
.drawer-panel,
.trust-strip,
.cta {
  border-color: rgba(219,238,255,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.035) inset;
}

.card,
.fit-card,
.mini-card,
details,
.email-option,
.contact-form,
.cta,
.trust-strip,
.step,
.outcome-grid div,
.use-cases div,
.offer-list div,
.hero-metrics div {
  position: relative;
  overflow: hidden;
}

.card,
.fit-card,
.mini-card,
details,
.email-option,
.contact-form {
  background: var(--theme-surface);
}

.card::before,
.fit-card::before,
.mini-card::before,
details::before,
.email-option::before,
.contact-form::before,
.cta::before,
.trust-strip::before,
.step::before,
.outcome-grid div::before,
.use-cases div::before,
.offer-list div::before,
.hero-metrics div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--theme-rail);
  opacity: .74;
  pointer-events: none;
}

.card.featured::before,
.cta::before,
.trust-strip::before {
  height: 4px;
  opacity: .94;
  background: linear-gradient(90deg, var(--warm) 0%, var(--human) 34%, var(--trust) 72%, var(--strategy) 100%);
}

.card.good::before,
.fit-card.yes::before,
.signal-card.handled::before,
.outcome-grid div:nth-child(2n)::before {
  background: linear-gradient(90deg, var(--progress), var(--trust));
}

.card.bad::before,
.xlist::before {
  background: linear-gradient(90deg, rgba(255,127,138,.78), rgba(255,209,102,.54));
}

.card.featured {
  border-color: rgba(255,209,102,.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,209,102,.18), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(95,215,255,.12), transparent 40%),
    var(--theme-surface-strong);
}

.card.good,
.fit-card.yes {
  border-color: rgba(103,231,194,.34);
  background: linear-gradient(145deg, rgba(103,231,194,.105), rgba(255,255,255,.048));
}

.card.bad {
  border-color: rgba(255,127,138,.31);
  background: linear-gradient(145deg, rgba(255,127,138,.07), rgba(255,255,255,.04));
}

.trust-strip {
  color: #fff0c5;
  border-color: rgba(255,209,102,.32);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,209,102,.19), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(95,215,255,.16), transparent 42%),
    linear-gradient(135deg, rgba(255,209,102,.10), rgba(95,215,255,.075));
}

.hero-metrics div {
  background: linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.035));
  border-color: rgba(219,238,255,.18);
}

.hero-metrics div:nth-child(1)::before { background: linear-gradient(90deg, var(--human), var(--warm)); }
.hero-metrics div:nth-child(2)::before { background: linear-gradient(90deg, var(--strategy), var(--trust)); }
.hero-metrics div:nth-child(3)::before { background: linear-gradient(90deg, var(--review), var(--progress)); }

.signal-card {
  --card-accent: var(--trust);
  border-color: rgba(95,215,255,.34);
  background: linear-gradient(145deg, rgba(95,215,255,.11), rgba(0,0,0,.19));
}

.signal-card::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--card-accent);
  box-shadow: 0 0 22px var(--card-accent);
}

.signal-card.active { --card-accent: var(--trust); border-color: rgba(95,215,255,.38); background: linear-gradient(145deg, rgba(95,215,255,.12), rgba(0,0,0,.19)); }
.signal-card.review { --card-accent: var(--review); border-color: rgba(255,209,102,.40); background: linear-gradient(145deg, rgba(255,209,102,.12), rgba(0,0,0,.18)); }
.signal-card.handled { --card-accent: var(--progress); border-color: rgba(103,231,194,.34); background: linear-gradient(145deg, rgba(103,231,194,.11), rgba(0,0,0,.18)); }

.node-system {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,159,125,.25), transparent 39%),
    radial-gradient(circle at 78% 26%, rgba(95,215,255,.24), transparent 42%),
    radial-gradient(circle at 55% 82%, rgba(103,231,194,.12), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.042));
}

.node-core {
  background: radial-gradient(circle at 30% 20%, #fff9df, var(--warm) 35%, var(--human) 56%, var(--trust) 100%);
  box-shadow: 0 0 0 12px rgba(255,209,102,.09), 0 0 72px rgba(95,215,255,.40), 0 0 42px rgba(255,159,125,.20);
}

.mesh-node.warm { border-color: rgba(255,209,102,.44); background: rgba(255,209,102,.13); }
.mesh-node.cool { border-color: rgba(95,215,255,.46); background: rgba(95,215,255,.13); }
.mesh-node.bridge { border-color: rgba(183,156,255,.43); background: rgba(183,156,255,.13); }
.mesh-node.review { border-color: rgba(255,209,102,.48); background: rgba(255,209,102,.12); }

.step,
.outcome-grid div,
.use-cases div,
.offer-list div {
  background: linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.035));
  border-color: rgba(219,238,255,.16);
}

.step span,
.card-kicker,
.use-cases strong,
.offer-list strong,
.outcome-grid strong,
.email-option span,
.send-choice span {
  color: var(--trust);
}

.safeguards .mini-card h3,
.fit-card h3,
details summary {
  color: var(--soft);
}

.cta {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,209,102,.22), transparent 42%),
    radial-gradient(circle at 74% 10%, rgba(95,215,255,.20), transparent 44%),
    radial-gradient(circle at 52% 82%, rgba(183,156,255,.14), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.046));
}

.drawer-guardrail,
.form-note {
  border-color: rgba(255,209,102,.28);
  background: linear-gradient(135deg, rgba(255,209,102,.10), rgba(95,215,255,.055));
}

@media (max-width: 760px) {
  .proof-flow { gap: 7px; }
  .proof-flow span { flex: 1 1 calc(50% - 7px); justify-content: center; padding-inline: 8px; }
}

/* Human-feeling homepage layer pass - 2026-05-20 */
.human-layer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: stretch;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255,209,102,.24);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,179,138,.22), transparent 40%),
    radial-gradient(circle at 86% 18%, rgba(95,215,255,.14), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
  box-shadow: 0 30px 100px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.035) inset;
  overflow: hidden;
}

.human-layer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--human), var(--warm), var(--trust));
  opacity: .95;
}

.human-layer::after {
  content: "";
  position: absolute;
  inset: auto -8% -42% 28%;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 44%, rgba(255,209,102,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 28%, rgba(255,179,138,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 52%, rgba(95,215,255,.18) 0 2px, transparent 3px),
    linear-gradient(14deg, transparent 0 34%, rgba(255,255,255,.07) 34.1%, transparent 34.4%),
    linear-gradient(145deg, transparent 0 62%, rgba(95,215,255,.09) 62.1%, transparent 62.4%);
  opacity: .62;
  transform: rotate(-2deg);
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 72%);
}

.human-layer-copy,
.human-cues {
  position: relative;
  z-index: 1;
}

.human-layer-copy p:not(.eyebrow) {
  color: var(--soft);
  font-size: 18px;
  line-height: 1.65;
}

.human-layer-copy h2 {
  max-width: 620px;
}

.human-cues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.human-cue {
  position: relative;
  min-height: 250px;
  padding: 22px;
  border: 1px solid rgba(219,238,255,.17);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: 0 22px 70px rgba(0,0,0,.16);
  overflow: hidden;
}

.human-cue::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--human);
}

.human-cue::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%, rgba(255,209,102,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 66%, rgba(95,215,255,.14) 0 2px, transparent 3px),
    rgba(255,255,255,.03);
  opacity: .72;
}

.human-cue span {
  display: inline-flex;
  margin-bottom: 16px;
  color: #151b25;
  background: linear-gradient(135deg, var(--warm), var(--human));
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.human-cue h3 {
  max-width: 260px;
}

.human-cue p {
  color: var(--muted);
  line-height: 1.58;
}

.human-cue.team {
  border-color: rgba(255,209,102,.28);
  transform: translateY(18px);
}

.human-cue.team::before { background: linear-gradient(90deg, var(--review), var(--progress)); }
.human-cue.team span { background: linear-gradient(135deg, var(--review), var(--progress)); }

.human-cue.craft {
  border-color: rgba(95,215,255,.26);
}

.human-cue.craft::before { background: linear-gradient(90deg, var(--trust), var(--strategy)); }
.human-cue.craft span { background: linear-gradient(135deg, var(--trust), var(--strategy)); }

@media (max-width: 980px) {
  .human-layer { grid-template-columns: 1fr; }
  .human-cues { grid-template-columns: 1fr; }
  .human-cue.team { transform: none; }
}

/* Drawer learned-changes pass - 2026-05-20 */
.drawer-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,179,138,.24), transparent 34%),
    radial-gradient(circle at 74% 8%, rgba(95,215,255,.22), transparent 38%),
    radial-gradient(circle at 56% 54%, rgba(183,156,255,.11), transparent 42%),
    linear-gradient(180deg, #0a1728 0%, #071426 58%, #050d1a 100%);
}

.drawer-panel::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 4px;
  margin: calc(clamp(24px, 4vw, 44px) * -1) calc(clamp(24px, 4vw, 44px) * -1) 26px;
  background: linear-gradient(90deg, var(--human), var(--warm), var(--trust), var(--strategy));
  z-index: 2;
}

.drawer-panel::after {
  content: "";
  position: absolute;
  inset: 90px -18% auto auto;
  width: 420px;
  height: 420px;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,209,102,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 48%, rgba(95,215,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 62%, rgba(183,156,255,.18) 0 1.5px, transparent 2.5px),
    linear-gradient(30deg, transparent 0 40%, rgba(255,255,255,.07) 40.1%, transparent 40.4%),
    linear-gradient(142deg, transparent 0 58%, rgba(95,215,255,.09) 58.1%, transparent 58.4%);
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
}

.drawer-close {
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border-color: rgba(219,238,255,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.drawer-close:hover {
  border-color: rgba(255,209,102,.42);
  background: linear-gradient(145deg, rgba(255,209,102,.16), rgba(95,215,255,.08));
}

.drawer-lead {
  color: var(--soft);
  max-width: 620px;
}

.drawer-proof {
  margin-top: 18px;
  margin-bottom: 18px;
}

.drawer-proof span {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}

.drawer-human-cues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 16px;
}

.drawer-human-cues article {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 15px;
  border: 1px solid rgba(219,238,255,.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow: 0 16px 44px rgba(0,0,0,.16);
}

.drawer-human-cues article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--human), var(--warm));
}

.drawer-human-cues article:nth-child(2)::before { background: linear-gradient(90deg, var(--strategy), var(--trust)); }
.drawer-human-cues article:nth-child(3)::before { background: linear-gradient(90deg, var(--review), var(--progress)); }

.drawer-human-cues span {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--warm-2);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.drawer-human-cues strong {
  display: block;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.35;
}

.drawer-guardrail {
  border-color: rgba(255,209,102,.34);
  color: #fff0c5;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,209,102,.16), transparent 40%),
    linear-gradient(135deg, rgba(255,209,102,.11), rgba(95,215,255,.06));
}

.drawer-form label {
  color: var(--soft);
}

.drawer-form label > span {
  display: inline-block;
  margin-top: -4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
}

.drawer-form textarea,
.drawer-form input {
  background: linear-gradient(145deg, rgba(0,0,0,.28), rgba(255,255,255,.035));
  border-color: rgba(219,238,255,.18);
}

.drawer-form textarea:focus,
.drawer-form input:focus {
  border-color: rgba(255,209,102,.52);
  box-shadow: 0 0 0 4px rgba(255,209,102,.10), 0 0 32px rgba(95,215,255,.08);
}

.send-choice {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
}

.send-choice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--trust), var(--strategy));
}

.send-choice:nth-child(1)::before { background: linear-gradient(90deg, var(--human), var(--warm)); }
.send-choice:nth-child(2)::before { background: linear-gradient(90deg, var(--trust), var(--strategy)); }
.send-choice:nth-child(3)::before { background: linear-gradient(90deg, var(--review), var(--progress)); }

.send-choice span {
  color: #111826;
  background: linear-gradient(135deg, var(--warm), var(--trust));
}

.send-choice:nth-child(3) span {
  background: linear-gradient(135deg, var(--review), var(--progress));
}

.drawer-status {
  color: var(--progress);
}

@media (max-width: 760px) {
  .drawer-human-cues { grid-template-columns: 1fr; }
  .drawer-proof span { flex: 1 1 100%; }
}


/* Human editorial de-AI pass - 2026-05-20
   Direction: less SaaS/glass/glow/pill language; more calm workshop notes,
   squared paper-like surfaces, restrained colour, and visible human review. */
:root {
  --bg: #07111c;
  --bg-2: #0b1827;
  --ink: #f5f0e8;
  --muted: #b9c2cb;
  --soft: #e5ddd0;
  --panel: rgba(255, 250, 238, .064);
  --panel-strong: rgba(255, 250, 238, .092);
  --line: rgba(235, 224, 204, .18);
  --paper: rgba(255, 250, 238, .072);
  --paper-strong: rgba(255, 250, 238, .105);
  --paper-line: rgba(235, 224, 204, .20);
  --warm: #e8bf78;
  --warm-2: #f3d7a6;
  --human: #d99a72;
  --trust: #83bfd8;
  --blue: #83bfd8;
  --progress: #8cc9ad;
  --green: #8cc9ad;
  --review: #e8bf78;
  --strategy: #a99ad5;
  --danger: #d78686;
  --red: #d78686;
  --shadow: rgba(0, 0, 0, .28);
}

html { background: #07111c; }

body {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(232,191,120,.13), transparent 38%),
    radial-gradient(ellipse at 76% 8%, rgba(131,191,216,.10), transparent 42%),
    linear-gradient(142deg, #07111c 0%, #0a1624 48%, #07111c 100%);
}

body::before {
  opacity: .28;
  filter: blur(46px) saturate(.9);
  background:
    radial-gradient(ellipse at 24% 20%, rgba(217,154,114,.22), transparent 52%),
    radial-gradient(ellipse at 78% 22%, rgba(131,191,216,.18), transparent 55%);
}

body::after {
  opacity: .22;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 76%);
}

.shape-web { opacity: .38; }
.latent-field { opacity: .44; mix-blend-mode: normal; }
.latent-flow { filter: none; opacity: .42; }
.signal-cloud .signal { opacity: .44; }
.latent-links path { opacity: .34; }

.nav {
  background: rgba(7,17,28,.88);
  border-bottom-color: rgba(235,224,204,.14);
  box-shadow: none;
}

.mark {
  border-radius: 10px;
  border-color: rgba(232,191,120,.38);
  background: #e8bf78;
  box-shadow: none;
}

.nav-cta,
.button.primary {
  border-radius: 11px;
  color: #111826 !important;
  background: #e8bf78;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.nav-cta:hover,
.button.primary:hover {
  transform: translateY(-1px);
  background: #f0cc91;
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.button,
.button.secondary {
  border-radius: 11px;
}

.button.secondary,
.email-option,
.send-choice {
  background: rgba(255,250,238,.056);
  border-color: var(--paper-line);
  box-shadow: none;
}

.button.secondary:hover,
.email-option:hover,
.send-choice:hover {
  border-color: rgba(232,191,120,.38);
  background: rgba(255,250,238,.086);
  box-shadow: none;
}

.eyebrow {
  color: var(--warm-2);
  text-shadow: none;
  letter-spacing: .11em;
}

h1 { text-shadow: none; }
.lead { color: #ded7cc; }

.quiet-proof-line {
  max-width: 720px;
  margin: 22px 0 0;
  padding: 12px 0 12px 15px;
  border-left: 2px solid rgba(232,191,120,.58);
  color: #d8d0c4;
  line-height: 1.55;
  background: linear-gradient(90deg, rgba(232,191,120,.055), transparent 82%);
}

.quiet-proof-line strong { color: var(--warm-2); }

.proof-flow { gap: 8px; }
.proof-flow span {
  min-height: auto;
  padding: 7px 9px;
  border-radius: 8px;
  color: #ddd5c8;
  background: rgba(255,250,238,.052);
  box-shadow: none;
  letter-spacing: .07em;
}
.proof-flow span::before {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  box-shadow: none;
}

.hero-panel,
.node-system,
.node-system-map,
.human-layer,
.card,
.fit-card,
.mini-card,
details,
.email-option,
.contact-form,
.drawer-panel,
.trust-strip,
.cta,
.step,
.outcome-grid div,
.use-cases div,
.offer-list div,
.hero-metrics div,
.human-cue,
.drawer-human-cues article,
.send-choice {
  border-color: var(--paper-line);
  background: linear-gradient(180deg, rgba(255,250,238,.078), rgba(255,250,238,.036));
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
}

.hero-panel,
.node-system,
.human-layer,
.contact-form,
.cta,
.drawer-panel {
  border-radius: 18px;
}

.node-system-map,
.card,
.fit-card,
.mini-card,
details,
.email-option,
.trust-strip,
.step,
.outcome-grid div,
.use-cases div,
.offer-list div,
.hero-metrics div,
.human-cue,
.drawer-human-cues article,
.send-choice {
  border-radius: 13px;
}

.card::before,
.fit-card::before,
.mini-card::before,
details::before,
.email-option::before,
.contact-form::before,
.cta::before,
.trust-strip::before,
.step::before,
.outcome-grid div::before,
.use-cases div::before,
.offer-list div::before,
.hero-metrics div::before,
.human-cue::before,
.drawer-human-cues article::before,
.send-choice::before {
  display: none;
}

.hero-panel::before,
.hero-panel::after,
.human-layer::after,
.drawer-panel::before,
.drawer-panel::after,
.human-cue::after,
.node-system::before,
.node-system-map::before,
.node-system-map::after {
  display: none;
}

.panel-top {
  border-bottom: 1px solid rgba(235,224,204,.16);
  margin-bottom: 14px;
  padding-bottom: 10px;
  color: var(--warm-2);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.panel-top .dot { display: none; }

.signal-card {
  border-radius: 11px !important;
  padding: 17px 18px;
  margin-top: 12px;
  background: rgba(255,250,238,.045) !important;
  border-color: rgba(235,224,204,.17) !important;
  border-left: 3px solid rgba(131,191,216,.58) !important;
  box-shadow: none;
  clip-path: none !important;
}
.signal-card::before { display: none; }
.signal-card.review { border-left-color: rgba(232,191,120,.68) !important; }
.signal-card.handled { border-left-color: rgba(140,201,173,.66) !important; }
.signal-card span {
  color: #d8c49e !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.signal-card strong {
  margin: 8px 0;
  font-size: 21px;
  line-height: 1.12;
}
.signal-card p { color: #c2c8cd; }

.trust-strip {
  text-align: left;
  color: #e9dcc4;
  background: rgba(255,250,238,.055);
}
.trust-strip strong,
.drawer-guardrail strong,
.form-note strong { color: var(--warm-2); }

.card,
.fit-card,
.mini-card,
details,
.outcome-grid div,
.use-cases div,
.offer-list div,
.step,
.email-option,
.send-choice,
.human-cue,
.drawer-human-cues article {
  border-left: 2px solid rgba(235,224,204,.22);
}
.card.featured,
.card.good,
.fit-card.yes,
.signal-card.handled,
.outcome-grid div:nth-child(2n) {
  background: rgba(255,250,238,.058) !important;
}
.card.featured { border-left-color: rgba(232,191,120,.62); }
.card.good,
.fit-card.yes { border-left-color: rgba(140,201,173,.58); }
.card.bad { border-left-color: rgba(215,134,134,.50); }

.card-kicker,
.step span,
.use-cases strong,
.offer-list strong,
.outcome-grid strong,
.email-option span,
.send-choice span {
  color: var(--warm-2);
}

.human-layer {
  border-color: rgba(232,191,120,.22);
  background: rgba(255,250,238,.058);
}
.human-layer::before {
  display: block;
  height: 2px;
  background: rgba(232,191,120,.42);
}
.human-layer-copy p:not(.eyebrow),
.human-cue p { color: #c6cbd0; }
.human-cue {
  min-height: 220px;
  background: rgba(255,250,238,.052);
}
.human-cue.team { transform: none; border-left-color: rgba(232,191,120,.56); }
.human-cue.craft { border-left-color: rgba(131,191,216,.50); }
.human-cue span,
.drawer-human-cues span,
.email-option span,
.send-choice span {
  display: inline-block;
  padding: 0;
  margin-bottom: 12px;
  border-radius: 0;
  background: none !important;
  color: var(--warm-2) !important;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.node-system {
  background: rgba(255,250,238,.052);
}
.node-system-map {
  min-height: 400px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.032) 1px, transparent 1px),
    rgba(0,0,0,.12);
  background-size: 54px 54px;
}
.node-core {
  width: 112px;
  height: 88px;
  border-radius: 18px;
  color: #111826;
  background: #e8bf78;
  box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 16px 38px rgba(0,0,0,.22);
}
.node-core span {
  margin-top: -20px;
  color: rgba(17,24,38,.68);
}
.mesh-node {
  border-radius: 8px;
  background: rgba(255,250,238,.060) !important;
  border-color: rgba(235,224,204,.20) !important;
  color: #ddd5c8 !important;
  box-shadow: none;
  backdrop-filter: none;
  letter-spacing: .055em;
}
.mesh-node.review { border-left: 2px solid rgba(232,191,120,.58); }
.mesh-line {
  background: linear-gradient(90deg, transparent, rgba(235,224,204,.18), rgba(131,191,216,.20), transparent);
  filter: none;
  opacity: .55;
}
.mesh-dot {
  width: 6px;
  height: 6px;
  background: rgba(235,224,204,.60);
  box-shadow: none;
}

.section.dark {
  background: rgba(0,0,0,.12);
  border-block: 1px solid rgba(235,224,204,.10);
}

.drawer-backdrop { background: rgba(0,0,0,.62); }
.drawer-panel {
  background:
    linear-gradient(180deg, rgba(13,28,44,.98), rgba(8,19,32,.99));
}
.drawer-close {
  border-radius: 10px;
  background: rgba(255,250,238,.058);
  border-color: rgba(235,224,204,.20);
  box-shadow: none;
}
.drawer-close:hover {
  background: rgba(255,250,238,.10);
  border-color: rgba(232,191,120,.40);
}
.drawer-lead { color: #ded7cc; }
.drawer-proof-note { margin-top: 18px; margin-bottom: 18px; }
.drawer-human-cues { gap: 12px; }
.drawer-human-cues article {
  min-height: auto;
  padding: 15px 16px;
  background: rgba(255,250,238,.050);
}
.drawer-human-cues article:nth-child(1) { border-left-color: rgba(217,154,114,.58); }
.drawer-human-cues article:nth-child(2) { border-left-color: rgba(131,191,216,.52); }
.drawer-human-cues article:nth-child(3) { border-left-color: rgba(232,191,120,.58); }
.drawer-human-cues strong { color: #e5ddd0; font-size: 14px; }
.drawer-guardrail,
.form-note {
  border-radius: 11px;
  border-color: rgba(232,191,120,.28);
  color: #e9dcc4;
  background: rgba(232,191,120,.060);
}
.drawer-form label { color: #e5ddd0; }
.drawer-form label > span { color: #aeb8c2; }
.drawer-form textarea,
.drawer-form input,
.contact-form input,
.contact-form textarea {
  border-radius: 10px;
  color: #f5f0e8;
  background: rgba(255,250,238,.045);
  border-color: rgba(235,224,204,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.drawer-form textarea:focus,
.drawer-form input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(232,191,120,.52);
  box-shadow: 0 0 0 3px rgba(232,191,120,.10);
}
.send-choice {
  min-height: 136px;
  padding: 17px;
}
.send-choice:nth-child(1) { border-left-color: rgba(217,154,114,.58); }
.send-choice:nth-child(2) { border-left-color: rgba(131,191,216,.52); }
.send-choice:nth-child(3) { border-left-color: rgba(140,201,173,.58); }
.drawer-status { color: var(--progress); }

@media (max-width: 760px) {
  .quiet-proof-line { margin-top: 18px; }
  .node-core { width: 96px; height: 78px; }
}

/* Operator-first redesign pass - 2026-05-20
   Keep the existing colour theme. Shift meaning from AI impressiveness to human diagnosis,
   judgment, build ownership, and AI as leverage. */
.operator-hero .lead {
  max-width: 820px;
}

.operator-hero .quiet-proof-line {
  max-width: 780px;
}

.operator-notes .panel-top {
  color: var(--warm-2);
}

.operator-notes .signal-card strong {
  font-size: clamp(20px, 2.2vw, 26px);
}

.operator-notes .signal-card p {
  max-width: 52ch;
}

.node-core {
  font-size: 26px;
}

@media (max-width: 760px) {
  .operator-hero .hero-actions .button {
    width: 100%;
  }
}

/* Square / angular / sharp design-language pass - 2026-05-20
   Keep the existing colour theme. Shift the surface language from soft workshop notes
   toward rectilinear competence, architectural discipline, sharper hierarchy, and
   controlled angular tension. Sharpness is used for authority and structure; red still
   stays reserved for true stop/risk states. */
:root {
  --edge-0: 0px;
  --edge-1: 2px;
  --edge-2: 4px;
  --edge-3: 7px;
  --corner-cut: 14px;
  --steel-line: rgba(205,220,236,.20);
  --steel-line-strong: rgba(205,220,236,.34);
  --angular-panel: rgba(255,250,238,.052);
}

html { background: #050a13; }

body {
  background:
    linear-gradient(132deg, rgba(255,179,138,.19) 0%, transparent 21%),
    linear-gradient(218deg, rgba(104,213,255,.19) 0%, transparent 26%),
    linear-gradient(90deg, rgba(185,156,255,.09), transparent 48%),
    linear-gradient(180deg, #07111f 0%, #0b1728 48%, #050a13 100%);
}

body::before {
  opacity: .36;
  filter: none;
  transform: none;
  background:
    linear-gradient(118deg, transparent 0 17%, rgba(255,255,255,.055) 17.15% 17.45%, transparent 17.6% 100%),
    linear-gradient(62deg, transparent 0 39%, rgba(232,191,120,.085) 39.05% 39.35%, transparent 39.5% 100%),
    linear-gradient(151deg, transparent 0 69%, rgba(104,213,255,.070) 69.05% 69.35%, transparent 69.5% 100%);
  mask-image: linear-gradient(180deg, black, rgba(0,0,0,.72) 58%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, black, rgba(0,0,0,.72) 58%, transparent 92%);
}

body::after {
  opacity: .34;
  background:
    linear-gradient(90deg, rgba(255,255,255,.052) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.040) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - .5px), rgba(255,255,255,.022) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 56px 56px, 56px 56px, 112px 112px;
}

.section-shell { width: min(1200px, calc(100% - 40px)); }

.shape-web { opacity: .28; }
.shape-web::before {
  content: "";
  position: absolute;
  inset: 46px 8% 12% 8%;
  border: 1px solid rgba(205,220,236,.10);
  background:
    linear-gradient(90deg, rgba(205,220,236,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(205,220,236,.07) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - 1px), rgba(232,191,120,.13) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 72px 72px, 72px 72px, 220px 220px;
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 56px 100%, 0 calc(100% - 56px));
}
.latent-halo { opacity: .22; }
.latent-flow { stroke-linecap: square; stroke-linejoin: miter; opacity: .24 !important; }
.latent-links path { stroke-dasharray: 14 14; opacity: .24; }
.signal-cloud .signal { display: none; }

.nav {
  background: rgba(7,17,28,.94);
  border-bottom: 1px solid var(--steel-line);
  backdrop-filter: blur(10px);
}
.mark {
  width: 34px;
  height: 34px;
  border-radius: var(--edge-1) !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.nav-cta,
.button {
  border-radius: var(--edge-1) !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.button.primary { box-shadow: 8px 10px 0 rgba(0,0,0,.18); }
.button.secondary { box-shadow: inset 0 0 0 1px rgba(205,220,236,.08); }

.eyebrow {
  letter-spacing: .17em;
  color: var(--warm-2);
}
h1, h2, h3 { letter-spacing: -.026em; }
h1 { line-height: .93; }
h2 { line-height: 1.00; }

.quiet-proof-line,
.drawer-guardrail,
.form-note {
  border-left-width: 0;
  border-top: 1px solid rgba(232,191,120,.46);
  border-bottom: 1px solid rgba(232,191,120,.16);
  padding: 13px 16px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

.hero-panel,
.node-system,
.human-layer,
.contact-form,
.cta,
.drawer-panel,
.email-hero,
.email-form-section {
  border-radius: var(--edge-2) !important;
  clip-path: polygon(0 0, calc(100% - var(--corner-cut)) 0, 100% var(--corner-cut), 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)));
  border-color: var(--steel-line-strong) !important;
  box-shadow: 10px 12px 0 rgba(0,0,0,.13), 0 24px 55px rgba(0,0,0,.18) !important;
}

.node-system-map,
.card,
.fit-card,
.mini-card,
details,
.email-option,
.trust-strip,
.step,
.outcome-grid div,
.use-cases div,
.offer-list div,
.hero-metrics div,
.human-cue,
.drawer-human-cues article,
.send-choice,
.signal-card {
  border-radius: var(--edge-1) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  border-color: var(--steel-line) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.060), rgba(255,250,238,.030)) !important;
  box-shadow: 7px 8px 0 rgba(0,0,0,.105) !important;
}

.card,
.fit-card,
.mini-card,
details,
.outcome-grid div,
.use-cases div,
.offer-list div,
.step,
.email-option,
.send-choice,
.human-cue,
.drawer-human-cues article {
  border-left-width: 0 !important;
  border-top: 2px solid rgba(205,220,236,.20) !important;
}
.card.featured,
.card.good,
.fit-card.yes,
.outcome-grid div:nth-child(2n),
.send-choice:nth-child(3) {
  border-top-color: rgba(140,201,173,.62) !important;
}
.card.bad { border-top-color: rgba(215,134,134,.58) !important; }
.card.featured { border-top-color: rgba(232,191,120,.70) !important; }

.panel-top {
  border-bottom-color: var(--steel-line);
  letter-spacing: .14em;
}
.signal-card {
  border-left: 0 !important;
  border-top: 2px solid rgba(131,191,216,.56) !important;
}
.signal-card.review { border-top-color: rgba(232,191,120,.72) !important; }
.signal-card.handled { border-top-color: rgba(140,201,173,.68) !important; }
.signal-card span,
.human-cue span,
.drawer-human-cues span,
.email-option span,
.send-choice span,
.card-kicker,
.step span {
  letter-spacing: .13em !important;
}

.human-layer::before {
  height: 1px;
  background: linear-gradient(90deg, var(--warm-2), rgba(104,213,255,.42), transparent);
}
.human-cue { min-height: 210px; }
.human-cue.team,
.section-head,
.card.featured,
.step:nth-child(2n) { transform: none !important; }

.node-system-map {
  min-height: 430px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.060) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.044) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - .5px), rgba(232,191,120,.045) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(0,0,0,.16) !important;
  background-size: 44px 44px, 44px 44px, 88px 88px, auto;
}
.node-core {
  width: 122px;
  height: 92px;
  border-radius: var(--edge-1) !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  box-shadow: 8px 9px 0 rgba(0,0,0,.22) !important;
}
.mesh-node {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  border-color: rgba(205,220,236,.25) !important;
  text-transform: uppercase;
  letter-spacing: .085em;
}
.mesh-dot {
  border-radius: 0;
  transform: rotate(45deg);
}
.mesh-line {
  height: 1px !important;
  filter: none;
  opacity: .68;
}

.drawer-panel {
  max-width: min(620px, calc(100vw - 24px));
}
.drawer-close,
.drawer-form textarea,
.drawer-form input,
.contact-form input,
.contact-form textarea {
  border-radius: var(--edge-1) !important;
}
.drawer-form textarea:focus,
.drawer-form input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 2px rgba(232,191,120,.16) !important;
}

@media (max-width: 760px) {
  .hero-panel,
  .node-system,
  .human-layer,
  .contact-form,
  .cta,
  .drawer-panel {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  }
  .button.primary { box-shadow: 5px 6px 0 rgba(0,0,0,.18); }
}

/* Mobile containment patch for angular pass - 2026-05-20 */
@media (max-width: 520px) {
  .nav { padding-inline: 10px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand span:last-child { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-cta {
    flex: 0 0 auto;
    min-width: 68px;
    max-width: 76px;
    padding: 9px 10px;
    font-size: 0;
    white-space: nowrap;
  }
  .nav-cta::after { content: "Start"; font-size: 12px; letter-spacing: .08em; }
  h1 { font-size: clamp(31px, 10.4vw, 41px); }
  .lead { overflow-wrap: break-word; }
  .hero-copy,
  .hero-panel,
  .signal-card,
  .card,
  .fit-card,
  .mini-card,
  details,
  .outcome-grid div,
  .use-cases div,
  .offer-list div,
  .human-cue,
  .drawer-human-cues article,
  .send-choice,
  .email-option {
    max-width: 100%;
    min-width: 0;
  }
  .signal-card,
  .card,
  .fit-card,
  .mini-card,
  details,
  .outcome-grid div,
  .use-cases div,
  .offer-list div,
  .human-cue,
  .drawer-human-cues article,
  .send-choice,
  .email-option,
  .quiet-proof-line,
  .drawer-guardrail,
  .form-note {
    clip-path: none;
  }
  .signal-card,
  .card,
  .fit-card,
  .mini-card,
  details,
  .outcome-grid div,
  .use-cases div,
  .offer-list div,
  .human-cue,
  .drawer-human-cues article,
  .send-choice,
  .email-option {
    border-radius: 2px !important;
    padding-right: 18px;
  }
}

/* Mobile overflow fix for angular clipped panels - 2026-05-20 */
@media (max-width: 520px) {
  .section-shell {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }
  .hero,
  .operator-hero,
  .split,
  .offer,
  .node-system {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .hero-copy,
  .hero-panel,
  .operator-notes,
  .node-system,
  .node-system-map,
  .human-layer,
  .contact-form,
  .cta,
  .drawer-panel,
  .email-hero,
  .email-form-section,
  .trust-strip,
  .signal-card,
  .card,
  .fit-card,
  .mini-card,
  details,
  .outcome-grid div,
  .use-cases div,
  .offer-list div,
  .human-cue,
  .drawer-human-cues article,
  .send-choice,
  .email-option,
  .quiet-proof-line,
  .drawer-guardrail,
  .form-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
  }
  .hero-panel,
  .node-system,
  .human-layer,
  .contact-form,
  .cta,
  .drawer-panel,
  .email-hero,
  .email-form-section,
  .trust-strip,
  .signal-card,
  .card,
  .fit-card,
  .mini-card,
  details,
  .outcome-grid div,
  .use-cases div,
  .offer-list div,
  .human-cue,
  .drawer-human-cues article,
  .send-choice,
  .email-option {
    box-shadow: 4px 5px 0 rgba(0,0,0,.12) !important;
  }
  p, li, dd, dt, strong, span, a, button, input, textarea {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Mobile decorative overflow containment - 2026-05-20 */
@media (max-width: 520px) {
  .shape-web {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .shape-web svg {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .shape-web::before { inset: 46px 14px 14% 14px; }
  .node-system-map {
    overflow: hidden !important;
  }
}

/* Hidden drawer + mobile section width containment - 2026-05-20 */
.project-drawer[aria-hidden="true"] {
  visibility: hidden;
  overflow: hidden;
}
.project-drawer[aria-hidden="true"] .drawer-panel {
  display: none;
}
@media (max-width: 520px) {
  .hero.section-shell,
  .trust-strip.section-shell,
  .human-layer.section-shell,
  .node-system.section-shell,
  .section.section-shell,
  .split.section-shell,
  .offer.section-shell,
  .faq.section-shell,
  .cta.section-shell,
  footer.section-shell {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Hidden drawer should not contribute to mobile scroll width - 2026-05-20 */
.project-drawer[aria-hidden="true"] { display: none; }
.project-drawer[aria-hidden="false"] { display: block; }

/* Hide off-canvas mesh decoration on narrow mobile - 2026-05-20 */
@media (max-width: 520px) {
  .mesh-line,
  .mesh-dot { display: none !important; }
}

/* Contain angled background pseudo-elements on mobile sections - 2026-05-20 */
main { overflow-x: hidden; }
.research,
.proof,
.safeguards { overflow: hidden; }
@media (max-width: 520px) {
  .research::before,
  .proof::before,
  .safeguards::before {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    transform: rotate(-4deg);
  }
}

/* Hyper-abstract rising sun + pathing web background - 2026-05-21
   Direction: warm clean colours, sun-as-origin point, and a shadow-textured pathing web
   emanating through dispersed nodes. Keep it abstract and architectural, not literal. */
body {
  background:
    radial-gradient(ellipse at 22% 13%, rgba(255,226,154,.24), transparent 27%),
    radial-gradient(ellipse at 30% 2%, rgba(255,179,138,.16), transparent 24%),
    linear-gradient(132deg, rgba(255,179,138,.17) 0%, transparent 22%),
    linear-gradient(218deg, rgba(104,213,255,.14) 0%, transparent 30%),
    linear-gradient(90deg, rgba(185,156,255,.075), transparent 48%),
    linear-gradient(180deg, #07111f 0%, #0b1728 48%, #050a13 100%);
}

body::before {
  opacity: .42;
  background:
    radial-gradient(circle at 24% 25%, rgba(255,242,191,.18), transparent 0 16%, transparent 34%),
    linear-gradient(115deg, transparent 0 18%, rgba(255,226,154,.10) 18.05% 18.35%, transparent 18.5% 100%),
    linear-gradient(62deg, transparent 0 40%, rgba(255,179,138,.085) 40.05% 40.35%, transparent 40.5% 100%),
    linear-gradient(151deg, transparent 0 70%, rgba(104,213,255,.060) 70.05% 70.35%, transparent 70.5% 100%);
}

.shape-web.rising-sun-web {
  top: 8px;
  width: min(1580px, 124vw);
  height: min(790px, 82vw);
  opacity: .56;
}

.shape-web.rising-sun-web svg {
  filter: drop-shadow(0 30px 84px rgba(0,0,0,.30));
}

.shape-web.rising-sun-web::before {
  inset: 74px 6% 8% 4%;
  opacity: .42;
  border-color: rgba(255,226,154,.09);
  background:
    linear-gradient(90deg, rgba(255,226,154,.080) 1px, transparent 1px),
    linear-gradient(180deg, rgba(205,220,236,.045) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - 1px), rgba(255,179,138,.105) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 78px 78px, 78px 78px, 228px 228px;
}

.rising-sun-field,
.path-shadow-web,
.path-light-web,
.sun-node-cloud {
  transform-box: fill-box;
  transform-origin: 286px 488px;
}

.rising-sun-aura {
  fill: url(#risingSunAura);
  opacity: .88;
  mix-blend-mode: screen;
}

.rising-sun-core {
  fill: url(#risingSunCore);
  opacity: .72;
  filter: url(#sunSoft);
  mix-blend-mode: screen;
}

.sun-horizon {
  fill: none;
  stroke: rgba(255,242,191,.42);
  stroke-width: 1.4;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  opacity: .56;
}

.sun-arc,
.sun-ray {
  fill: none;
  stroke: url(#sunArcWarm);
  vector-effect: non-scaling-stroke;
  mix-blend-mode: screen;
}

.sun-arc {
  stroke-width: 1.05;
  opacity: .34;
  stroke-dasharray: 18 20;
}

.sun-arc.arc-b { opacity: .42; stroke-dasharray: 26 18; }
.sun-arc.arc-c { opacity: .50; stroke-dasharray: 34 16; }
.sun-arc.arc-d { opacity: .58; stroke-dasharray: 42 12; }

.sun-ray {
  stroke-width: .9;
  opacity: .18;
  stroke-dasharray: 42 34;
}

.path-shadow-web path {
  fill: none;
  stroke: rgba(1,7,18,.62);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .34;
  filter: url(#webShadowBlur);
}

.path-light-web path {
  fill: none;
  stroke: url(#pathGlow);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .58;
  filter: drop-shadow(0 0 10px rgba(255,209,102,.08));
}

.path-light-web path.secondary {
  stroke: rgba(255,255,255,.15);
  stroke-width: .85;
  opacity: .46;
  stroke-dasharray: 9 17;
}

.sun-node {
  vector-effect: non-scaling-stroke;
  stroke-width: .8;
  filter: drop-shadow(0 0 10px rgba(255,226,154,.14));
}

.sun-node.source {
  fill: rgba(255,249,223,.94);
  stroke: rgba(255,209,102,.84);
  filter: drop-shadow(0 0 18px rgba(255,209,102,.34));
}

.sun-node.warm { fill: rgba(255,209,102,.84); stroke: rgba(255,179,138,.64); }
.sun-node.bridge { fill: rgba(185,156,255,.72); stroke: rgba(255,242,191,.42); }
.sun-node.cool { fill: rgba(104,213,255,.78); stroke: rgba(215,247,255,.58); }
.sun-node.tiny { opacity: .76; }

.operator-hero {
  padding-block-start: clamp(72px, 10vw, 132px);
}

.operator-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% auto auto -4%;
  width: min(520px, 48vw);
  height: min(420px, 42vw);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 44% 58%, rgba(255,242,191,.18), transparent 56%),
    radial-gradient(ellipse at 38% 60%, rgba(255,179,138,.11), transparent 70%);
  clip-path: polygon(0 42%, 100% 0, 86% 86%, 8% 100%);
  filter: blur(2px);
  opacity: .72;
}

@media (max-width: 900px) {
  .shape-web.rising-sun-web {
    top: 60px;
    width: 154vw;
    height: 560px;
    opacity: .46;
    left: 48%;
  }
  .operator-hero::before { opacity: .42; }
}

@media (max-width: 520px) {
  .shape-web.rising-sun-web {
    top: 82px;
    left: 50%;
    width: 178vw;
    height: 430px;
    opacity: .34;
    overflow: hidden;
  }
  .shape-web.rising-sun-web::before {
    inset: 54px 16px 20% 18px;
    background-size: 58px 58px, 58px 58px, 174px 174px;
  }
  .operator-hero { padding-block-start: 54px; }
}

/* Rising-sun mirror + stronger overlay panel - 2026-05-21 */
.shape-web.rising-sun-web svg {
  transform: scaleX(-1);
  transform-origin: center;
}

.shape-web.rising-sun-web::before {
  opacity: .66;
  border-color: rgba(255,226,154,.16);
}

.hero-panel.operator-notes {
  background: linear-gradient(180deg, rgba(13,27,47,.88), rgba(7,17,31,.80)) !important;
  border-color: rgba(255,226,154,.26) !important;
}

.hero-panel.operator-notes .signal-card {
  background: linear-gradient(180deg, rgba(8,18,32,.78), rgba(5,12,23,.68)) !important;
}

.hero-panel.operator-notes .signal-card.active {
  background: linear-gradient(180deg, rgba(25,58,76,.72), rgba(8,20,35,.70)) !important;
}

.hero-panel.operator-notes .signal-card.review {
  background: linear-gradient(180deg, rgba(72,55,26,.70), rgba(18,22,29,.72)) !important;
}

.hero-panel.operator-notes .signal-card.handled {
  background: linear-gradient(180deg, rgba(18,58,48,.66), rgba(8,20,28,.72)) !important;
}

/* AI leverage map report fix + green streetlight subwiring - 2026-05-21 */
.node-system {
  border-color: rgba(110,231,168,.26) !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,179,138,.18), transparent 38%),
    radial-gradient(circle at 72% 20%, rgba(104,213,255,.16), transparent 38%),
    radial-gradient(circle at 66% 70%, rgba(110,231,168,.22), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.040)) !important;
}

.node-system-map {
  border-color: rgba(110,231,168,.22) !important;
  background:
    radial-gradient(circle at 18% 72%, rgba(110,231,168,.17), transparent 28%),
    radial-gradient(circle at 62% 57%, rgba(110,231,168,.12), transparent 34%),
    linear-gradient(90deg, rgba(110,231,168,.090) 1px, transparent 1px),
    linear-gradient(180deg, rgba(110,231,168,.058) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - .5px), rgba(110,231,168,.070) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(0,0,0,.18) !important;
  background-size: auto, auto, 44px 44px, 44px 44px, 88px 88px, auto;
}

.node-system-map::before {
  border-color: rgba(110,231,168,.20) !important;
  box-shadow: inset 0 0 42px rgba(110,231,168,.055);
}

.node-system-map::after {
  border-color: rgba(110,231,168,.26) !important;
  box-shadow: 0 0 34px rgba(110,231,168,.08);
}

.mesh-node.handled {
  color: #d9ffe9;
  border-color: rgba(110,231,168,.56) !important;
  background: linear-gradient(180deg, rgba(110,231,168,.18), rgba(6,28,22,.34)) !important;
  box-shadow: 0 0 0 1px rgba(110,231,168,.12), 0 14px 34px rgba(0,0,0,.22), 0 0 24px rgba(110,231,168,.14) !important;
}

.mesh-node.handled::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 7px;
  width: 5px;
  height: 5px;
  background: rgba(110,231,168,.96);
  box-shadow: 0 0 12px rgba(110,231,168,.75);
}

.mesh-node.n-report {
  right: 15%;
  top: 60%;
  min-width: 96px;
  border-top-color: rgba(110,231,168,.88) !important;
}

.mesh-node.n-task {
  left: 11%;
  bottom: 8%;
  border-top-color: rgba(110,231,168,.82) !important;
}

.mesh-node.n-draft {
  right: 7%;
  bottom: 28%;
}

.mesh-line {
  background: linear-gradient(90deg, transparent, rgba(110,231,168,.22), rgba(104,213,255,.22), transparent) !important;
  box-shadow: 0 0 18px rgba(110,231,168,.10);
}

.ml-b,
.ml-e {
  background: linear-gradient(90deg, transparent, rgba(110,231,168,.34), rgba(110,231,168,.16), transparent) !important;
  opacity: .86;
}

.mesh-dot {
  background: rgba(142,255,188,.82) !important;
  box-shadow: 0 0 18px rgba(110,231,168,.56), 0 0 2px rgba(255,255,255,.8) !important;
}

.md-d,
.md-f,
.md-i {
  width: 10px;
  height: 10px;
  background: rgba(110,231,168,.96) !important;
  box-shadow: 0 0 22px rgba(110,231,168,.72), 0 0 44px rgba(110,231,168,.20) !important;
}

.node-core {
  background: radial-gradient(circle at 30% 20%, #fff9df, var(--warm) 30%, var(--progress) 62%, var(--trust) 100%) !important;
  box-shadow: 0 0 0 12px rgba(255,209,102,.08), 0 0 60px rgba(110,231,168,.36), 0 0 52px rgba(104,213,255,.24) !important;
}

@media (max-width: 520px) {
  .mesh-node.n-report {
    right: 8%;
    top: 62%;
    min-width: 86px;
  }
  .mesh-node.n-draft { right: 6%; bottom: 24%; }
}

/* Report/Draft spacing refinement - 2026-05-21 */
.mesh-node.n-review {
  right: 24%;
  bottom: 29%;
}

.mesh-node.n-draft {
  right: 6%;
  bottom: 19%;
}

.mesh-node.n-report {
  right: 24%;
  top: auto;
  bottom: 7%;
  min-width: 100px;
}

.ml-b {
  left: 21%;
  top: 61%;
  width: 54%;
  transform: rotate(-13deg);
}

.ml-e {
  left: 12%;
  top: 81%;
  width: 62%;
  transform: rotate(-27deg);
}

@media (max-width: 520px) {
  .mesh-node.n-review { right: 24%; bottom: 30%; }
  .mesh-node.n-draft { right: 5%; bottom: 18%; }
  .mesh-node.n-report {
    right: 23%;
    top: auto;
    bottom: 5%;
    min-width: 88px;
  }
}

/* Subtle green wayfinding refinement - 2026-05-21
   Pull green back from the centre map. Use it as a quiet handled/progress cue that
   naturally draws attention toward outreach/contact without reading as navigation. */
:root {
  --wayfind-green: #8cc9ad;
  --wayfind-green-soft: rgba(140,201,173,.16);
  --wayfind-green-quiet: rgba(140,201,173,.075);
}

.node-system {
  border-color: rgba(205,220,236,.22) !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,179,138,.16), transparent 38%),
    radial-gradient(circle at 74% 22%, rgba(104,213,255,.15), transparent 40%),
    radial-gradient(circle at 78% 82%, rgba(140,201,173,.085), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.086), rgba(255,255,255,.038)) !important;
}

.node-system-map {
  border-color: rgba(205,220,236,.18) !important;
  background:
    radial-gradient(circle at 70% 74%, rgba(140,201,173,.080), transparent 34%),
    radial-gradient(circle at 42% 48%, rgba(104,213,255,.095), transparent 34%),
    linear-gradient(90deg, rgba(205,220,236,.062) 1px, transparent 1px),
    linear-gradient(180deg, rgba(205,220,236,.045) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 calc(50% - .5px), rgba(140,201,173,.032) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    rgba(0,0,0,.16) !important;
  background-size: auto, auto, 44px 44px, 44px 44px, 88px 88px, auto;
}

.node-system-map::before {
  border-color: rgba(140,201,173,.105) !important;
  box-shadow: inset 0 0 34px rgba(140,201,173,.030);
}

.node-system-map::after {
  border-color: rgba(104,213,255,.13) !important;
  box-shadow: none;
}

.mesh-node.handled {
  color: #d8f2e3;
  border-color: rgba(140,201,173,.38) !important;
  background: linear-gradient(180deg, rgba(140,201,173,.090), rgba(8,24,23,.18)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.20), 0 0 16px rgba(140,201,173,.070) !important;
}

.mesh-node.handled::after {
  right: 9px;
  top: 8px;
  width: 4px;
  height: 4px;
  opacity: .58;
  background: rgba(140,201,173,.86);
  box-shadow: 0 0 9px rgba(140,201,173,.38);
}

.mesh-node.n-report,
.mesh-node.n-task {
  border-top-color: rgba(140,201,173,.50) !important;
}

.mesh-line {
  background: linear-gradient(90deg, transparent, rgba(104,213,255,.17), rgba(140,201,173,.105), transparent) !important;
  box-shadow: none;
  opacity: .58;
}

.ml-b,
.ml-e {
  background: linear-gradient(90deg, transparent, rgba(140,201,173,.17), rgba(104,213,255,.10), transparent) !important;
  opacity: .62;
}

.mesh-dot {
  width: 7px;
  height: 7px;
  background: rgba(205,220,236,.68) !important;
  box-shadow: 0 0 14px rgba(104,213,255,.22), 0 0 2px rgba(255,255,255,.55) !important;
}

.md-d,
.md-f,
.md-i {
  width: 8px;
  height: 8px;
  background: rgba(140,201,173,.80) !important;
  box-shadow: 0 0 15px rgba(140,201,173,.32), 0 0 30px rgba(140,201,173,.07) !important;
}

.node-core {
  background: radial-gradient(circle at 30% 20%, #fff9df, var(--warm) 36%, rgba(140,201,173,.86) 66%, var(--trust) 100%) !important;
  box-shadow: 0 0 0 12px rgba(255,209,102,.075), 0 0 48px rgba(104,213,255,.26), 0 0 28px rgba(140,201,173,.12) !important;
}

/* Quiet path toward outreach/contact: not an arrow, just a faint handled-progress trail. */
#offer,
#industries,
#contact {
  position: relative;
}

#offer::after,
#industries::after {
  content: "";
  position: absolute;
  right: clamp(22px, 6vw, 92px);
  bottom: -50px;
  width: 1px;
  height: 68px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(140,201,173,.18), transparent);
  box-shadow: 0 0 18px rgba(140,201,173,.055);
  opacity: .72;
}

#offer .offer-list div:nth-child(4),
#industries .card:nth-child(2),
#industries .card:nth-child(5),
#industries .card:nth-child(7) {
  border-top-color: rgba(140,201,173,.26) !important;
}

#offer .offer-list div:nth-child(4)::before,
#industries .card:nth-child(2)::before,
#industries .card:nth-child(5)::before,
#industries .card:nth-child(7)::before {
  background: linear-gradient(90deg, rgba(140,201,173,.45), rgba(104,213,255,.18), transparent) !important;
  opacity: .42 !important;
}

#contact.cta {
  border-color: rgba(140,201,173,.24) !important;
  background:
    radial-gradient(circle at 52% 100%, rgba(140,201,173,.13), transparent 42%),
    radial-gradient(circle at 18% 0%, rgba(255,209,102,.13), transparent 38%),
    radial-gradient(circle at 90% 16%, rgba(104,213,255,.12), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.082), rgba(255,255,255,.040)) !important;
}

#contact.cta::before {
  background: linear-gradient(90deg, rgba(255,209,102,.62), rgba(104,213,255,.32), rgba(140,201,173,.42)) !important;
  opacity: .66 !important;
}

#contact .button.primary,
.nav-cta,
.send-choice[data-send="direct"] {
  box-shadow: 6px 7px 0 rgba(0,0,0,.16), 0 0 0 1px rgba(140,201,173,.13), 0 16px 42px rgba(140,201,173,.075) !important;
}

.drawer-status,
.send-choice[data-send="direct"] span {
  color: var(--wayfind-green) !important;
}

@media (max-width: 760px) {
  #offer::after,
  #industries::after {
    right: 24px;
    height: 48px;
    bottom: -36px;
    opacity: .46;
  }
}

/* Mobile AI map breathing room after subtle green pass - 2026-05-21 */
@media (max-width: 520px) {
  .node-system-map {
    min-height: 430px !important;
  }
  .mesh-node {
    min-width: 62px;
    padding: 7px 8px;
    font-size: 10px;
    letter-spacing: .065em;
  }
  .node-core {
    width: 88px !important;
    height: 72px !important;
  }
  .node-core span { font-size: 9px; margin-top: -24px; }
  .n-risk { left: 12%; bottom: 30%; }
  .n-memory { left: 43%; bottom: 19%; }
  .mesh-node.n-review { right: 12%; bottom: 32%; }
  .mesh-node.n-draft { right: 4%; bottom: 17%; }
  .mesh-node.n-report { right: 30%; bottom: 4%; min-width: 76px; }
  .mesh-node.n-task { left: 8%; bottom: 6%; }
  .n-team { left: 31%; top: 68%; }
}

/* Micro green pop overlay - old green preserved - 2026-05-21
   Preserve the previous subtle wayfinding green exactly on the main elements. Only tiny
   dots, rails, and status text get a near-invisible halo so the green breathes a bit. */
:root {
  --green-micro-pop: rgba(140,201,173,.045);
}

.mesh-node.handled::after,
.md-d,
.md-f,
.md-i,
#offer::after,
#industries::after,
.signal-card.handled::before,
#contact.cta::before,
#offer .offer-list div:nth-child(4)::before,
#industries .card:nth-child(2)::before,
#industries .card:nth-child(5)::before,
#industries .card:nth-child(7)::before {
  filter: drop-shadow(0 0 2px var(--green-micro-pop));
}

.drawer-status,
.send-choice[data-send="direct"] span {
  text-shadow: 0 0 4px rgba(140,201,173,.035);
}

@media (max-width: 520px) {
  .mesh-node.handled::after,
  .md-d,
  .md-f,
  .md-i,
  #offer::after,
  #industries::after,
  .signal-card.handled::before,
  #contact.cta::before,
  #offer .offer-list div:nth-child(4)::before,
  #industries .card:nth-child(2)::before,
  #industries .card:nth-child(5)::before,
  #industries .card:nth-child(7)::before {
    filter: drop-shadow(0 0 1.5px rgba(140,201,173,.030));
  }
}

/* Anchor scroll clearance for sticky nav - unique workflow refinement - 2026-05-21 */
[id] { scroll-margin-top: 94px; }
@media (max-width: 520px) {
  [id] { scroll-margin-top: 76px; }
}

/* Keep final contact anchor clear above sticky nav near page bottom - 2026-05-21 */
#contact { scroll-margin-top: 122px; }
footer.section-shell { padding-bottom: 92px; }
@media (max-width: 520px) {
  #contact { scroll-margin-top: 112px; }
  footer.section-shell { padding-bottom: 142px; }
}

/* Mobile hero containment/tightening - 2026-05-21
   Fix from phone screenshot: keep the first viewport clean, deterministic, and clipped to the hero box. */
@media (max-width: 520px) {
  .operator-hero {
    isolation: isolate;
    overflow: hidden !important;
  }
  .operator-hero .hero-copy {
    position: relative;
    z-index: 2;
  }
  .operator-hero .hero-panel {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
  }
  .operator-hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.01;
    letter-spacing: -.045em;
  }
  .operator-hero .lead {
    max-width: 34ch;
  }
}

/* Mobile unique-message headline fit - 2026-05-21
   Keep the target-audience hero readable on 360px phones without clipping words. */
@media (max-width: 520px) {
  .operator-hero h1 {
    max-width: 100%;
    font-size: clamp(29px, 8.6vw, 34px);
    line-height: 1.07;
    letter-spacing: -.026em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }
}


/* Mobile drawer typing-box fit - 2026-05-21
   Keep the start-project form usable when the phone keyboard opens. */
:root { --mobile-viewport-height: 100vh; }
@supports (height: 100dvh) {
  :root { --mobile-viewport-height: 100dvh; }
}

@media (max-width: 760px) {
  body.drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  .project-drawer {
    height: var(--mobile-viewport-height, 100dvh);
    overflow: hidden;
  }

  .drawer-panel {
    inset: 0;
    width: 100%;
    height: var(--mobile-viewport-height, 100dvh);
    max-height: var(--mobile-viewport-height, 100dvh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom));
  }

  .drawer-close {
    position: sticky;
    top: 10px;
    right: auto;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-bottom: 2px;
    background: rgba(6,16,30,.84);
    backdrop-filter: blur(12px);
  }

  .drawer-panel h2 {
    margin-right: 0;
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.06;
  }

  .drawer-lead,
  .drawer-guardrail,
  .drawer-proof-note {
    font-size: 14px;
    line-height: 1.45;
  }

  .drawer-human-cues {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .drawer-form {
    margin-top: 16px;
    padding-bottom: 44px;
  }

  .drawer-form label {
    margin-top: 13px;
  }

  .drawer-form textarea,
  .drawer-form input {
    min-width: 0;
    font-size: 16px;
    line-height: 1.45;
    padding: 14px;
    border-radius: 16px;
  }

  .drawer-form textarea {
    min-height: clamp(136px, 32svh, 190px);
    max-height: 42vh;
    resize: vertical;
  }

  .send-choice-grid {
    gap: 10px;
  }

  .send-choice {
    min-height: auto;
    padding: 14px;
  }

  .send-choice span {
    margin-bottom: 10px;
  }

  .send-choice small {
    font-size: 13px;
  }

  .drawer-status {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .project-drawer.typing-focus .drawer-panel {
    padding-bottom: calc(164px + env(safe-area-inset-bottom));
  }

  .project-drawer.typing-focus .drawer-proof-note,
  .project-drawer.typing-focus .drawer-human-cues {
    display: none;
  }

  .project-drawer.typing-focus .drawer-guardrail {
    padding: 11px 12px;
    font-size: 13px;
  }

  .project-drawer.typing-focus .drawer-form textarea {
    min-height: 150px;
  }
}

/* Mobile drawer opacity/scroll hardening - 2026-05-21
   Override earlier decorative mobile containment so the form is an opaque, scrollable panel. */
@media (max-width: 760px) {
  .project-drawer[aria-hidden="false"] {
    z-index: 999 !important;
  }

  .project-drawer[aria-hidden="false"] .drawer-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #071426 0%, #06101e 54%, #050d1a 100%) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .drawer-panel > * {
    position: relative;
    z-index: 2;
  }

  .drawer-form textarea,
  .drawer-form input {
    background: rgba(3, 10, 20, .97) !important;
    color: #f4f8ff !important;
    text-shadow: none !important;
    caret-color: var(--trust);
  }

  .drawer-form textarea::placeholder,
  .drawer-form input::placeholder {
    color: rgba(201,216,235,.54) !important;
  }

  .project-drawer.typing-focus .eyebrow,
  .project-drawer.typing-focus #projectDrawerTitle,
  .project-drawer.typing-focus .drawer-lead,
  .project-drawer.typing-focus .drawer-guardrail {
    display: none;
  }

  .project-drawer.typing-focus .drawer-form {
    margin-top: 4px;
  }
}

/* Mobile drawer compact actions while typing - 2026-05-21 */
@media (max-width: 760px) {
  .project-drawer.typing-focus .send-choice-grid {
    gap: 8px;
  }

  .project-drawer.typing-focus .send-choice {
    padding: 12px 13px;
  }

  .project-drawer.typing-focus .send-choice span,
  .project-drawer.typing-focus .send-choice small {
    display: none;
  }

  .project-drawer.typing-focus .send-choice strong {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* Layout C promoted to homepage - cleaned system showroom - 2026-06-01 */
body.layout-showroom-v2 {
  --show-ink: #111820;
  --show-paper: #f4ead8;
  --show-paper-2: #ded0b8;
  --show-cream: #fff7e9;
  --show-coal: #12161d;
  --show-coal-2: #1d1712;
  --show-muted: #7a6d5d;
  --show-gold: #efbe62;
  --show-blue: #bfe8f4;
  --show-green: #cfe8ce;
  --show-rose: #efb29c;
  --show-line: rgba(17,24,32,.18);
  background:
    radial-gradient(circle at 18% 4%, rgba(239,190,98,.16), transparent 26%),
    radial-gradient(circle at 84% 0%, rgba(191,232,244,.14), transparent 25%),
    linear-gradient(180deg, #1b1713 0%, #241c16 40%, #101721 100%);
  color: var(--show-cream);
}

.layout-showroom-v2 .shape-web,
.layout-showroom-v2 .rising-sun-web { display: none !important; }

.layout-showroom-v2 .section-shell { width: min(1180px, calc(100% - 42px)); }

.show-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, calc(100% - 42px));
  margin: 0 auto;
  padding: 18px 0;
  backdrop-filter: blur(18px);
}
.show-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--show-cream); text-decoration: none; font-weight: 900; letter-spacing: -.02em; }
.show-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--show-gold); color: var(--show-gold); font-size: 13px; font-weight: 950; }
.show-nav nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.show-nav a { color: rgba(255,247,233,.78); text-decoration: none; font-size: 13px; font-weight: 750; padding: 8px 9px; }
.show-nav a:hover { color: var(--show-cream); }
.show-nav-cta, .show-button {
  border: 0;
  min-height: 44px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.show-nav-cta, .show-button.primary { color: var(--show-ink); background: linear-gradient(135deg, var(--show-gold), var(--show-rose)); box-shadow: 8px 8px 0 rgba(0,0,0,.22); }
.show-button.secondary { color: var(--show-cream); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); }

.show-page { position: relative; z-index: 1; }
.show-eyebrow { margin: 0 0 14px; color: var(--show-gold); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 950; }
.show-hero { display: grid; grid-template-columns: minmax(320px, 470px) minmax(0, 1fr); gap: clamp(28px, 5vw, 62px); align-items: end; min-height: 750px; padding: 58px 0 72px; }
.show-copy h1 { margin: 0 0 24px; font-size: clamp(46px, 6.6vw, 92px); line-height: .88; letter-spacing: -.075em; color: var(--show-cream); max-width: 740px; }
.show-lead { margin: 0; color: rgba(255,247,233,.82); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.show-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 22px; }
.show-proof { border-left: 3px solid var(--show-gold); padding-left: 14px; color: rgba(255,247,233,.72); line-height: 1.58; }
.show-proof strong { color: var(--show-cream); }

.show-shelf { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 34px 0 46px; }
.show-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 16px; background: linear-gradient(90deg, #6a4a25, #d59c3b, #76522b); box-shadow: 0 20px 46px rgba(0,0,0,.42); }
.show-product { position: relative; min-height: 330px; padding: 24px; color: var(--show-ink); background: #efe0c2; border: 1px solid rgba(255,255,255,.45); box-shadow: 10px 14px 0 rgba(0,0,0,.24); }
.show-product:nth-child(2) { transform: translateY(-30px); background: #dbe9ef; }
.show-product:nth-child(3) { transform: translateY(18px); background: #d8e8ce; }
.show-product-id { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid rgba(17,24,32,.18); color: #5f6873; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 950; }
.show-product h2 { margin: 28px 0 14px; color: #111820; font-size: clamp(26px, 2.5vw, 36px); line-height: .95; letter-spacing: -.055em; }
.show-product p { color: #354052; line-height: 1.5; }
.show-product > strong { position: absolute; left: 24px; right: 24px; bottom: 22px; border-top: 1px solid rgba(17,24,32,.18); padding-top: 13px; color: #1b2634; }

.show-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); margin-bottom: 28px; }
.show-strip div { padding: 20px; border-right: 1px solid rgba(255,255,255,.12); }
.show-strip div:last-child { border-right: 0; }
.show-strip span { display: block; color: var(--show-gold); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 950; margin-bottom: 9px; }
.show-strip strong { display: block; color: rgba(255,247,233,.88); line-height: 1.35; }

.show-section { padding: 86px 0; }
.show-section-head { max-width: 850px; margin-bottom: 34px; }
.show-section-head.compact { max-width: 470px; margin-bottom: 0; }
.show-section-head h2, .show-final-cta h2, .show-offer h2 { margin: 0 0 16px; color: var(--show-cream); font-size: clamp(34px, 5vw, 66px); line-height: .94; letter-spacing: -.06em; }
.show-section-head p, .show-final-cta p, .show-offer p { color: rgba(255,247,233,.72); line-height: 1.58; }
.show-catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.show-catalogue article { min-height: 230px; padding: 22px; color: var(--show-ink); background: var(--show-paper); }
.show-catalogue article:nth-child(2n) { background: #e6dccb; }
.show-catalogue span, .show-service-stack span, .show-process span, .show-lanes span { color: #9b6f24; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 950; }
.show-catalogue h3 { margin: 28px 0 10px; color: var(--show-ink); font-size: 24px; line-height: 1.02; letter-spacing: -.04em; }
.show-catalogue p { color: #3c4654; line-height: 1.52; }

.show-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 6vw, 74px); align-items: start; }
.show-split.reverse { grid-template-columns: .9fr 1.1fr; }
.show-service-stack { display: grid; gap: 14px; }
.show-service-stack article { padding: 22px; color: var(--show-ink); background: var(--show-paper); box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
.show-service-stack h3 { margin: 12px 0 8px; color: var(--show-ink); font-size: 26px; letter-spacing: -.04em; }
.show-service-stack p { color: #3e4855; line-height: 1.55; }

.show-outcomes, .show-guardrails, .show-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.show-outcomes div, .show-guardrails article, .show-process article, .show-fit-grid article { padding: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.show-outcomes strong { display: block; color: var(--show-cream); font-size: 20px; margin-bottom: 8px; }
.show-outcomes span, .show-guardrails p, .show-process p, .show-fit-grid li { color: rgba(255,247,233,.72); line-height: 1.55; }

.show-dark { background: rgba(0,0,0,.22); border-block: 1px solid rgba(255,255,255,.12); }
.show-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.show-lanes div { padding: 22px; background: var(--show-paper); color: var(--show-ink); }
.show-lanes strong { display: block; margin-top: 14px; color: var(--show-ink); line-height: 1.35; font-size: 21px; }

.show-process article span { color: var(--show-gold); }
.show-process h3, .show-guardrails h3, .show-fit-grid h3 { color: var(--show-cream); margin: 12px 0 8px; font-size: 24px; letter-spacing: -.04em; }
.show-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.show-fit-grid ul { margin: 14px 0 0; padding-left: 20px; }
.show-offer { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; padding: 46px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.055); }
.show-offer-list { display: grid; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.show-offer-list div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 18px; background: rgba(0,0,0,.18); }
.show-offer-list strong { color: var(--show-gold); }
.show-offer-list span { color: rgba(255,247,233,.75); }

.show-faq details { border-top: 1px solid rgba(255,255,255,.16); padding: 20px 0; }
.show-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.show-faq summary { cursor: pointer; color: var(--show-cream); font-size: 20px; font-weight: 900; }
.show-faq p { color: rgba(255,247,233,.72); }
.show-industry-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.show-industry-links a { display: grid; gap: 8px; min-height: 140px; padding: 20px; text-decoration: none; color: var(--show-ink); background: var(--show-paper); }
.show-industry-links a:hover { background: #fff0cf; }
.show-industry-links strong { font-size: 20px; letter-spacing: -.03em; }
.show-industry-links span { color: #4a5360; line-height: 1.45; }
.show-final-cta { margin: 40px auto 88px; padding: clamp(28px, 5vw, 58px); background: linear-gradient(135deg, rgba(239,190,98,.18), rgba(191,232,244,.08)); border: 1px solid rgba(255,255,255,.18); }

.layout-showroom-v2 footer.section-shell { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,247,233,.70); }
.layout-showroom-v2 footer a { color: var(--show-cream); }
.layout-showroom-v2 .project-drawer .drawer-panel { background: #18130f; color: var(--show-cream); border-color: rgba(255,255,255,.18); }
.layout-showroom-v2 .project-drawer .drawer-human-cues article,
.layout-showroom-v2 .project-drawer .send-choice,
.layout-showroom-v2 .project-drawer .drawer-form input,
.layout-showroom-v2 .project-drawer .drawer-form textarea { border-radius: 0; }

@media (max-width: 1020px) {
  .show-hero, .show-split, .show-split.reverse, .show-offer { grid-template-columns: 1fr; }
  .show-shelf { grid-template-columns: 1fr; }
  .show-product, .show-product:nth-child(2), .show-product:nth-child(3) { transform: none; min-height: 280px; }
  .show-strip, .show-catalogue, .show-outcomes, .show-guardrails, .show-process, .show-industry-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-section-head.compact { max-width: 820px; }
}
@media (max-width: 680px) {
  .show-nav { position: relative; align-items: flex-start; flex-direction: column; }
  .show-nav nav { justify-content: flex-start; }
  .show-hero { min-height: auto; padding-top: 34px; }
  .show-copy h1 { font-size: clamp(42px, 14vw, 58px); }
  .show-strip, .show-catalogue, .show-outcomes, .show-guardrails, .show-process, .show-industry-links, .show-fit-grid, .show-lanes { grid-template-columns: 1fr; }
  .show-offer { padding: 24px; }
  .show-offer-list div { grid-template-columns: 1fr; }
  .show-button { width: 100%; }
}


/* Showroom cleanup after vision QA - reduce old hero/SaaS leakage - 2026-06-01 */
body.layout-showroom-v2 {
  --show-ink: #121820;
  --show-paper: #f3e8d3;
  --show-paper-2: #e7d9c0;
  --show-cream: #fff7e9;
  --show-coal: #141820;
  --show-muted: #6e6255;
  --show-gold: #c88c2f;
  --show-blue: #d9eef4;
  --show-green: #dce8d0;
  --show-rose: #efb29c;
  --show-line: rgba(18,24,32,.18);
  background:
    linear-gradient(90deg, rgba(18,24,32,.045) 1px, transparent 1px),
    linear-gradient(rgba(18,24,32,.035) 1px, transparent 1px),
    var(--show-paper);
  background-size: 52px 52px;
  color: var(--show-ink);
}

.layout-showroom-v2 .section-shell { width: min(1220px, calc(100% - 42px)); }
.show-nav {
  width: min(1220px, calc(100% - 42px));
  color: var(--show-ink);
  background: rgba(243,232,211,.88);
  border-bottom: 1px solid var(--show-line);
  backdrop-filter: blur(12px);
}
.show-brand { color: var(--show-ink); }
.show-mark {
  width: auto;
  height: auto;
  border: 0;
  color: var(--show-gold);
  font-size: 13px;
  letter-spacing: .12em;
}
.show-mark::after { content: " /"; color: var(--show-muted); }
.show-nav a { color: rgba(18,24,32,.68); }
.show-nav a:hover { color: var(--show-ink); }
.show-nav-cta,
.show-button.primary,
.show-button.secondary {
  box-shadow: none;
  border-radius: 0;
  border: 1px solid var(--show-ink);
  background: transparent;
  color: var(--show-ink);
}
.show-nav-cta,
.show-button.primary { background: var(--show-ink); color: var(--show-cream); }
.show-button.secondary { background: #eadcc2; }
.show-nav-cta:hover,
.show-button.primary:hover { background: #000; }
.show-button.secondary:hover { background: #fff0cf; }

.showroom-entry {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 66px);
  align-items: start;
  padding: 54px 0 46px;
  min-height: calc(100vh - 88px);
}
.entry-copy {
  position: sticky;
  top: 98px;
  padding-top: 14px;
}
.show-eyebrow { color: var(--show-gold); }
.entry-copy h1 {
  margin: 0 0 20px;
  color: var(--show-ink);
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: .9;
  letter-spacing: -.072em;
}
.show-lead { color: #364353; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; }
.show-actions { margin: 26px 0 0; }
.system-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: #181f29;
  border: 1px solid #181f29;
  box-shadow: 16px 16px 0 rgba(18,24,32,.16);
}
.picker-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  color: rgba(255,247,233,.78);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}
.picker-head strong { color: var(--show-cream); }
.system-tile {
  min-height: 300px;
  padding: 20px;
  background: var(--show-paper);
  color: var(--show-ink);
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
}
.system-tile.featured { background: #f8edd9; }
.system-tile.compact-tile { min-height: 210px; background: #dce8d0; }
.system-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #69717c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18,24,32,.14);
}
.system-top strong { color: #8a6224; }
.system-tile h2 {
  margin: 8px 0 0;
  color: var(--show-ink);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: .95;
  letter-spacing: -.055em;
}
.system-tile p { margin: 0; color: #3a4654; line-height: 1.46; }
.system-tile dl { display: grid; gap: 8px; margin: 4px 0 0; align-self: end; }
.system-tile dl div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(18,24,32,.12); }
.system-tile dt { color: #8a6224; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 950; }
.system-tile dd { margin: 0; color: #2c3745; font-size: 14px; line-height: 1.35; }

.show-strip {
  border-color: var(--show-line);
  background: #e8dcc4;
  margin-top: 0;
}
.show-strip div { border-right-color: var(--show-line); }
.show-strip span { color: #8a6224; }
.show-strip strong { color: var(--show-ink); }
.show-section { padding: 76px 0; }
.show-section-head h2,
.show-final-cta h2,
.show-offer h2 { color: var(--show-ink); }
.show-section-head p,
.show-final-cta p,
.show-offer p { color: #44505f; }
.show-catalogue { background: var(--show-ink); border-color: var(--show-ink); }
.show-catalogue article { min-height: 245px; background: #f8edd9; }
.show-catalogue article:nth-child(2n) { background: #e7dfd1; }
.show-catalogue h3 { color: var(--show-ink); }
.show-service-stack article { box-shadow: none; border: 1px solid var(--show-line); }
.show-outcomes div,
.show-guardrails article,
.show-process article,
.show-fit-grid article {
  background: #eadfc9;
  border-color: var(--show-line);
  color: var(--show-ink);
}
.show-outcomes strong,
.show-process h3,
.show-guardrails h3,
.show-fit-grid h3 { color: var(--show-ink); }
.show-outcomes span,
.show-guardrails p,
.show-process p,
.show-fit-grid li { color: #3f4a58; }
.show-dark { background: #141820; border-block: 0; color: var(--show-cream); }
.show-dark .show-section-head h2 { color: var(--show-cream); }
.show-dark .show-section-head p { color: rgba(255,247,233,.72); }
.show-lanes div { background: #f1e5cf; }
.show-offer { background: #181f29; border: 0; color: var(--show-cream); }
.show-offer h2 { color: var(--show-cream); }
.show-offer p { color: rgba(255,247,233,.72); }
.show-offer-list { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.12); }
.show-offer-list div { background: rgba(255,255,255,.06); }
.show-faq summary { color: var(--show-ink); }
.show-faq details { border-top-color: var(--show-line); }
.show-faq details:last-child { border-bottom-color: var(--show-line); }
.show-faq p { color: #44505f; }
.show-industry-links a { border: 1px solid var(--show-line); }
.show-final-cta {
  background: #181f29;
  border: 0;
  color: var(--show-cream);
}
.show-final-cta h2 { color: var(--show-cream); }
.show-final-cta p { color: rgba(255,247,233,.72); }
.layout-showroom-v2 footer.section-shell {
  border-top-color: var(--show-line);
  color: #59616d;
}
.layout-showroom-v2 footer a { color: var(--show-ink); }

@media (max-width: 1050px) {
  .showroom-entry { grid-template-columns: 1fr; min-height: auto; }
  .entry-copy { position: static; }
}
@media (max-width: 760px) {
  .system-picker { grid-template-columns: 1fr; }
  .picker-head { display: grid; }
  .entry-copy h1 { font-size: clamp(42px, 13vw, 58px); }
}


/* Showroom selector polish - 2026-06-01 */
.system-tile {
  grid-template-rows: auto auto auto 1fr auto;
}
.system-action {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid rgba(18,24,32,.86);
  background: transparent;
  color: var(--show-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
  text-align: left;
  padding: 10px 12px;
}
.system-action::after {
  content: " ->";
  float: right;
}
.system-action:hover,
.system-action:focus-visible {
  background: var(--show-ink);
  color: var(--show-cream);
  outline: none;
}
.compact-tile .system-action {
  align-self: end;
}
.show-nav-cta {
  text-transform: none;
}
.show-button.primary,
.show-button.secondary,
.show-nav-cta {
  letter-spacing: .01em;
}


/* Showroom guide cleanup - 2026-06-01 */
.showroom-guide {
  display: grid;
  gap: 1px;
  margin: 26px 0 14px;
  border: 1px solid rgba(18,24,32,.18);
  background: rgba(18,24,32,.18);
}
.showroom-guide div {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #eadfc9;
}
.showroom-guide span {
  color: #8a6224;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}
.showroom-guide strong {
  color: var(--show-ink);
  font-size: 14px;
}
.entry-copy > .show-button.primary {
  width: 100%;
  margin-top: 0;
}
.showroom-entry {
  padding-bottom: 64px;
}


/* Showroom card-selection visibility fix - 2026-06-01 */
.system-tile {
  grid-template-rows: auto auto auto auto 1fr;
}
.system-tile .system-top { order: 1; }
.system-tile h2 { order: 2; }
.system-tile p { order: 3; }
.system-tile .system-action { order: 4; }
.system-tile dl { order: 5; align-self: start; }
.system-action {
  margin: 2px 0 6px;
  background: rgba(18,24,32,.06);
}
.showroom-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.showroom-guide div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 12px;
}
@media (max-width: 760px) {
  .showroom-guide { grid-template-columns: 1fr; }
}


/* Final selector hierarchy cleanup - 2026-06-01 */
.system-action {
  background: var(--show-ink);
  color: var(--show-cream);
  border-color: var(--show-ink);
}
.system-action:hover,
.system-action:focus-visible {
  background: #000;
  color: var(--show-cream);
}
.entry-copy > .show-button.secondary {
  width: 100%;
  background: transparent;
}
.entry-copy > .show-button.secondary:hover,
.entry-copy > .show-button.secondary:focus-visible {
  background: #fff0cf;
  outline: none;
}


/* Starter selected state - 2026-06-01 */
.system-action.selected,
.system-action[aria-pressed="true"] {
  background: #0b0f14;
  color: var(--show-cream);
  box-shadow: inset 0 0 0 2px var(--show-gold);
}
.system-action.selected::after,
.system-action[aria-pressed="true"]::after {
  content: " ✓";
}


/* Corrected Layout C homepage: features preserved, showroom structure/theme imported, AI FlowPal colour theme preserved - 2026-06-01 */
body.layout-system-showroom {
  --ss-ink-dark: #101722;
  --ss-navy: var(--bg, #07111f);
  --ss-navy-2: var(--bg-2, #0d1b2f);
  --ss-text: var(--ink, #eef6ff);
  --ss-muted: var(--muted, #9fb1c7);
  --ss-line: var(--line, rgba(255,255,255,.14));
  --ss-warm: var(--warm, #ffd166);
  --ss-warm-2: var(--warm-2, #ffdf9c);
  --ss-rose: var(--warm-rose, #ffb38a);
  --ss-blue: var(--blue, #68d5ff);
  --ss-green: var(--green, #6ee7a8);
  --ss-violet: var(--violet, #b99cff);
  color: var(--ss-text);
  background:
    radial-gradient(ellipse at 13% 5%, rgba(255,179,138,.26), transparent 34%),
    radial-gradient(ellipse at 58% -4%, rgba(104,213,255,.20), transparent 34%),
    radial-gradient(ellipse at 84% 12%, rgba(185,156,255,.16), transparent 30%),
    linear-gradient(138deg, #07111f 0%, #0b1729 42%, #081221 62%, #050a13 100%);
}
body.layout-system-showroom::before {
  opacity: .52;
  filter: blur(30px) saturate(1.08);
  background:
    conic-gradient(from 230deg at 28% 24%, rgba(255,143,179,.22), rgba(255,209,102,.16), rgba(104,213,255,.22), rgba(185,156,255,.15), rgba(255,179,138,.20)),
    radial-gradient(ellipse at 70% 38%, rgba(215,247,255,.10), transparent 42%);
}
body.layout-system-showroom::after {
  opacity: .30;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    radial-gradient(circle at 12% 28%, rgba(255,209,102,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 18%, rgba(104,213,255,.20) 0 2px, transparent 3px);
  background-size: 58px 58px, 58px 58px, auto, auto;
  mask-image: radial-gradient(ellipse at 50% 18%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 18%, black, transparent 72%);
}
.layout-system-showroom .shape-web,
.layout-system-showroom .rising-sun-web { display: none !important; }
.layout-system-showroom .section-shell { width: min(1220px, calc(100% - 42px)); }

.ss-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 16px max(21px, calc((100vw - 1220px) / 2));
  background: rgba(7,17,31,.80);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ss-line);
}
.ss-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ss-text); text-decoration: none; font-weight: 950; letter-spacing: -.02em; }
.ss-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ss-ink-dark); background: linear-gradient(135deg, var(--ss-warm), var(--ss-rose)); border: 1px solid rgba(255,209,102,.42); border-radius: 50%; font-size: 14px; font-weight: 950; box-shadow: 0 10px 26px rgba(255,179,138,.16); }
.ss-nav nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; color: var(--ss-muted); font-size: 14px; }
.ss-nav nav a { text-decoration: none; }
.ss-nav nav a:hover { color: var(--ss-text); }
.ss-nav-cta,
.ss-button,
.ss-object-action,
.ss-mini-shelf button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 15px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.ss-nav-cta,
.ss-button.primary,
.ss-object-action,
.ss-mini-shelf button {
  color: var(--ss-ink-dark);
  background: linear-gradient(135deg, var(--ss-warm), var(--ss-warm-2));
  box-shadow: 0 18px 48px rgba(255,209,102,.16);
}
.ss-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ss-button.primary:hover,
.ss-nav-cta:hover,
.ss-object-action:hover,
.ss-mini-shelf button:hover { transform: translateY(-1px); box-shadow: 0 20px 56px rgba(255,209,102,.24); }

.ss-stage { position: relative; z-index: 1; }
.ss-kicker { margin: 0 0 12px; color: var(--ss-warm); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 950; }
.ss-showroom {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: end;
  padding: clamp(44px, 7vw, 88px) 0 56px;
}
.ss-intro { min-width: 0; padding-bottom: 28px; }
.ss-intro h1 {
  margin: 0;
  color: var(--ss-text);
  font-size: clamp(44px, 6.3vw, 84px);
  line-height: .9;
  letter-spacing: -.068em;
  max-width: 780px;
}
.ss-lead { margin: 22px 0 0; color: var(--soft, #c9d8eb); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }
.ss-showroom-rules { display: grid; gap: 1px; margin-top: 28px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15); }
.ss-showroom-rules div { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 13px 14px; background: rgba(255,255,255,.055); }
.ss-showroom-rules span { color: var(--ss-warm); font-size: 11px; letter-spacing: .14em; font-weight: 950; }
.ss-showroom-rules strong { display: block; color: var(--ss-text); }
.ss-showroom-rules small { display: block; margin-top: 4px; color: var(--ss-muted); line-height: 1.35; }

.ss-shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 0 38px;
}
.ss-shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 14px;
  background: linear-gradient(90deg, rgba(255,179,138,.42), rgba(255,209,102,.82), rgba(104,213,255,.42));
  box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 38px rgba(255,209,102,.14);
}
.ss-shelf-label {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.052);
  color: var(--ss-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}
.ss-shelf-label strong { color: var(--ss-text); }
.ss-object {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 12px;
  padding: 20px;
  color: var(--ss-text);
  background: linear-gradient(180deg, rgba(255,255,255,.135), rgba(255,255,255,.052));
  border: 1px solid rgba(255,255,255,.17);
  border-top: 4px solid var(--object-accent, var(--ss-warm));
  border-radius: 24px 24px 10px 10px;
  box-shadow: 10px 14px 0 rgba(0,0,0,.20), 0 26px 80px rgba(0,0,0,.24);
  transform: translateY(var(--lift, 0));
  overflow: hidden;
}
.ss-object::before { content: ""; position: absolute; inset: -70px -60px auto auto; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--object-accent, var(--ss-warm)) 26%, transparent); filter: blur(4px); opacity: .55; }
.ss-object-warm { --object-accent: var(--ss-warm); }
.ss-object-blue { --object-accent: var(--ss-blue); --lift: -28px; }
.ss-object-green { --object-accent: var(--ss-green); --lift: 18px; }
.ss-object-id { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.16); color: var(--ss-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; }
.ss-object h2 { position: relative; z-index: 1; margin: 10px 0 0; font-size: clamp(27px, 3vw, 38px); line-height: .96; letter-spacing: -.05em; color: var(--ss-text); }
.ss-object p { position: relative; z-index: 1; margin: 0; color: var(--soft, #c9d8eb); line-height: 1.48; }
.ss-object-spec,
.ss-object-output { position: relative; z-index: 1; display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; color: var(--ss-muted); font-size: 13px; line-height: 1.35; }
.ss-object-spec span { color: var(--object-accent, var(--ss-warm)); text-transform: uppercase; letter-spacing: .11em; font-size: 11px; font-weight: 950; }
.ss-object-spec strong { color: var(--ss-text); }
.ss-object-output { grid-template-columns: 1fr; color: var(--ss-text); font-weight: 850; }
.ss-object-action { position: relative; z-index: 1; width: 100%; margin-top: 4px; }
.ss-object-action.selected,
.ss-object-action[aria-pressed="true"],
.ss-mini-shelf button.selected,
.ss-mini-shelf button[aria-pressed="true"] { background: linear-gradient(135deg, var(--ss-blue), var(--ss-green)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.36), 0 18px 48px rgba(104,213,255,.20); }

.ss-signal-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.16); }
.ss-signal-strip div { padding: 18px; background: rgba(255,255,255,.055); }
.ss-signal-strip span { display: block; margin-bottom: 9px; color: var(--ss-warm); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; }
.ss-signal-strip strong { display: block; color: var(--soft, #c9d8eb); line-height: 1.35; }

.ss-section { padding: 78px 0; }
.ss-section-head { max-width: 850px; margin-bottom: 32px; }
.ss-section-head.narrow { max-width: 560px; }
.ss-section-head h2,
.ss-offer h2,
.ss-final-cta h2 { margin: 0 0 14px; color: var(--ss-text); font-size: clamp(34px, 4.7vw, 62px); line-height: .96; letter-spacing: -.05em; }
.ss-section-head p,
.ss-offer p,
.ss-final-cta p { color: var(--soft, #c9d8eb); line-height: 1.56; }
.ss-mini-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-mini-shelf article,
.ss-build-board article,
.ss-proof-wall div,
.ss-process-rail article,
.ss-fit-tickets article,
.ss-guardrails article {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}
.ss-mini-shelf article { min-height: 260px; display: grid; align-content: start; gap: 10px; }
.ss-mini-shelf span,
.ss-build-board span,
.ss-process-rail span { color: var(--ss-warm); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; }
.ss-mini-shelf h3,
.ss-build-board h3,
.ss-process-rail h3,
.ss-fit-tickets h3,
.ss-guardrails h3 { color: var(--ss-text); font-size: 24px; line-height: 1; letter-spacing: -.035em; margin: 0; }
.ss-mini-shelf p,
.ss-build-board p,
.ss-process-rail p,
.ss-fit-tickets li,
.ss-guardrails p { color: var(--ss-muted); line-height: 1.5; }
.ss-data-example {
  display: grid;
  gap: 1px;
  margin: 4px 0 0;
  padding: 1px;
  border: 1px solid rgba(104,213,255,.18);
  background: rgba(104,213,255,.16);
}
.ss-data-example div {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  background: rgba(7,17,31,.54);
}
.ss-mini-shelf .ss-data-example span {
  display: block;
  color: var(--ss-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.ss-mini-shelf .ss-data-example strong {
  display: block;
  color: var(--ss-soft, #c9d8eb);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 780;
  line-height: 1.28;
}
.ss-mini-shelf .ss-data-example strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ss-blue);
  box-shadow: 0 0 12px rgba(104,213,255,.35);
  vertical-align: 1px;
}
.ss-mini-shelf button { width: 100%; }
.ss-shelf-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,209,102,.28);
  background: linear-gradient(90deg, rgba(255,209,102,.10), rgba(104,213,255,.08));
}
.ss-shelf-cta span {
  display: block;
  margin-bottom: 5px;
  color: var(--ss-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.ss-shelf-cta strong {
  display: block;
  color: var(--ss-text);
  line-height: 1.35;
}
.ss-expandable-ui {
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.16);
}
.ss-expandable-ui summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}
.ss-expandable-ui summary::-webkit-details-marker { display: none; }
.ss-expandable-ui summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,209,102,.38);
  color: var(--ss-warm);
  font-weight: 950;
}
.ss-expandable-ui[open] summary::after { content: "-"; }
.ss-expandable-ui summary span {
  color: var(--ss-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.ss-expandable-ui summary strong {
  color: var(--ss-text);
  font-size: 13px;
  line-height: 1.2;
  text-align: right;
}
.ss-management-mock {
  margin: 0 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(104,213,255,.20);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,209,102,.14), transparent 34%),
    radial-gradient(circle at 88% 30%, rgba(104,213,255,.13), transparent 38%),
    rgba(7,17,31,.68);
}
.ss-mock-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.06);
}
.ss-mock-topbar strong {
  color: var(--ss-text);
  font-size: 13px;
}
.ss-mock-topbar span {
  color: var(--ss-blue);
  font-size: 11px;
  font-weight: 850;
}
.ss-mock-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 1px;
  background: rgba(255,255,255,.09);
}
.ss-mock-list,
.ss-mock-panel {
  min-width: 0;
  padding: 12px;
  background: rgba(7,17,31,.52);
}
.ss-mock-list em,
.ss-mock-panel em {
  display: block;
  margin-bottom: 8px;
  color: var(--ss-warm);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.ss-mock-row {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.ss-mock-row + .ss-mock-row { margin-top: 7px; }
.ss-mock-row.active {
  border-color: rgba(104,213,255,.35);
  background: rgba(104,213,255,.10);
}
.ss-mock-row strong {
  color: var(--ss-text);
  font-size: 12px;
  line-height: 1.22;
}
.ss-mock-row span {
  color: var(--ss-muted);
  font-size: 11px;
  line-height: 1.2;
}
.ss-mock-panel h4 {
  margin: 0 0 6px;
  color: var(--ss-text);
  font-size: 18px;
  letter-spacing: -.025em;
}
.ss-mock-panel p {
  margin: 0;
  color: var(--ss-muted);
  font-size: 12px;
  line-height: 1.45;
}
.ss-mock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.ss-mock-actions span {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ss-soft, #c9d8eb);
  background: rgba(255,255,255,.06);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 850;
}
.ss-expanded-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 12px 12px;
  background: rgba(255,255,255,.10);
}
.ss-expanded-copy div {
  padding: 12px;
  background: rgba(7,17,31,.50);
}
.ss-expanded-copy h4 {
  margin: 0 0 6px;
  color: var(--ss-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.ss-expanded-copy p {
  margin: 0;
  color: var(--ss-soft, #c9d8eb);
  font-size: 13px;
  line-height: 1.45;
}
.ss-mini-shelf article:has(.ss-deep-ui[open]) {
  grid-column: 1 / -1;
}
.ss-deep-ui-wrap {
  display: grid;
  gap: 12px;
  margin: 0 12px 12px;
}
.ss-ui-browser {
  overflow: hidden;
  border: 1px solid rgba(104,213,255,.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(255,209,102,.14), transparent 34%),
    radial-gradient(circle at 90% 24%, rgba(104,213,255,.14), transparent 38%),
    rgba(7,17,31,.72);
}
.ss-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.065);
}
.ss-ui-header strong {
  color: var(--ss-text);
  font-size: 17px;
  letter-spacing: -.025em;
}
.ss-ui-header span {
  color: var(--ss-blue);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 850;
}
.ss-ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ss-mini-shelf .ss-ui-tabs span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ss-muted);
  background: rgba(255,255,255,.045);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 850;
}
.ss-mini-shelf .ss-ui-tabs span.active {
  color: var(--ss-ink-dark);
  border-color: rgba(255,209,102,.45);
  background: linear-gradient(135deg, var(--ss-warm), var(--ss-warm-2));
}
.ss-ui-grid {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(260px, 1fr) minmax(280px, 1.08fr);
  gap: 1px;
  background: rgba(255,255,255,.10);
}
.ss-ui-queue,
.ss-ui-detail,
.ss-ui-action-panel {
  min-width: 0;
  padding: 14px;
  background: rgba(7,17,31,.58);
}
.ss-ui-queue em,
.ss-ui-detail em,
.ss-ui-action-panel em {
  display: block;
  margin-bottom: 10px;
  color: var(--ss-warm);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.ss-ui-ticket {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
}
.ss-ui-ticket + .ss-ui-ticket { margin-top: 8px; }
.ss-ui-ticket.active {
  border-color: rgba(104,213,255,.38);
  background: linear-gradient(135deg, rgba(104,213,255,.13), rgba(255,255,255,.045));
}
.ss-ui-ticket strong {
  color: var(--ss-text);
  font-size: 13px;
  line-height: 1.22;
}
.ss-ui-ticket small {
  color: var(--ss-muted);
  font-size: 11px;
  line-height: 1.25;
}
.ss-ui-ticket b {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 7px;
  color: var(--ss-warm);
  background: rgba(255,209,102,.09);
  border: 1px solid rgba(255,209,102,.20);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ss-ui-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ss-ui-field-grid div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.ss-mini-shelf .ss-ui-field-grid span,
.ss-ui-source-trail span,
.ss-ui-rule span {
  display: block;
  margin-bottom: 5px;
  color: var(--ss-warm);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
}
.ss-ui-field-grid strong {
  display: block;
  color: var(--ss-soft, #c9d8eb);
  font-size: 13px;
  line-height: 1.25;
}
.ss-ui-source-trail {
  margin-top: 12px;
  padding: 11px;
  border: 1px dashed rgba(104,213,255,.28);
  background: rgba(104,213,255,.06);
}
.ss-ui-source-trail ul,
.ss-ui-explainer ul {
  margin: 0;
  padding-left: 18px;
}
.ss-ui-source-trail li {
  color: var(--ss-soft, #c9d8eb);
  font-size: 12px;
  line-height: 1.42;
}
.ss-ui-source-trail li + li { margin-top: 5px; }
.ss-ui-draft {
  padding: 12px;
  color: var(--ss-text);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  line-height: 1.45;
}
.ss-ui-rule {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(255,209,102,.24);
  background: rgba(255,209,102,.075);
}
.ss-ui-rule strong {
  display: block;
  color: var(--ss-soft, #c9d8eb);
  font-size: 12px;
  line-height: 1.42;
}
.ss-ui-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}
.ss-mini-shelf .ss-ui-actions span {
  padding: 7px 9px;
  color: var(--ss-soft, #c9d8eb);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 850;
}
.ss-ui-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
}
.ss-ui-explainer div {
  padding: 14px;
  background: rgba(7,17,31,.50);
}
.ss-ui-explainer h4 {
  margin: 0 0 10px;
  color: var(--ss-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.ss-ui-explainer li {
  color: var(--ss-soft, #c9d8eb);
  font-size: 13px;
  line-height: 1.46;
}
.ss-ui-explainer li + li { margin-top: 6px; }
.ss-build { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(24px, 5vw, 66px); align-items: start; }
.ss-build-board { display: grid; gap: 14px; }
.ss-proof-wall,
.ss-guardrails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-proof-wall strong { display: block; color: var(--ss-text); font-size: 20px; margin-bottom: 8px; }
.ss-proof-wall span { color: var(--ss-muted); line-height: 1.45; }
.ss-operating { background: rgba(0,0,0,.22); border-block: 1px solid rgba(255,255,255,.12); }
.ss-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.ss-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-lanes div { padding: 22px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); border-radius: 20px; }
.ss-lanes span { color: var(--ss-blue); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; }
.ss-lanes strong { display: block; margin-top: 12px; color: var(--ss-text); line-height: 1.35; font-size: 20px; }
.ss-process-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ss-fit-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ss-fit-tickets ul { margin: 14px 0 0; padding-left: 20px; }
.ss-offer { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; padding: clamp(26px, 4vw, 46px); border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(135deg, rgba(255,209,102,.12), rgba(104,213,255,.08), rgba(185,156,255,.08)); }
.ss-offer-list { display: grid; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; }
.ss-offer-list div { display: grid; grid-template-columns: 100px 1fr; gap: 14px; padding: 16px; background: rgba(0,0,0,.18); }
.ss-offer-list strong { color: var(--ss-warm); }
.ss-offer-list span { color: var(--soft, #c9d8eb); }
.ss-faq details { border-top: 1px solid rgba(255,255,255,.16); padding: 19px 0; }
.ss-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ss-faq summary { cursor: pointer; color: var(--ss-text); font-size: 20px; font-weight: 900; }
.ss-faq p { color: var(--ss-muted); line-height: 1.55; }
.ss-industry-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-industry-links a { display: grid; gap: 8px; min-height: 138px; padding: 20px; color: var(--ss-text); text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; }
.ss-industry-links a:hover { border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.075); }
.ss-industry-links strong { font-size: 20px; letter-spacing: -.025em; }
.ss-industry-links span { color: var(--ss-muted); line-height: 1.45; }
.ss-final-cta { margin: 36px auto 84px; padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: linear-gradient(135deg, rgba(255,209,102,.14), rgba(104,213,255,.09), rgba(185,156,255,.09)); }

.layout-system-showroom footer.section-shell { border-top: 1px solid rgba(255,255,255,.14); color: var(--ss-muted); }
.layout-system-showroom footer a { color: var(--ss-text); }
.layout-system-showroom .project-drawer .drawer-panel { background: #07111f; border-color: rgba(255,255,255,.18); }
.layout-system-showroom .project-drawer .drawer-human-cues article,
.layout-system-showroom .project-drawer .send-choice,
.layout-system-showroom .project-drawer .drawer-form input,
.layout-system-showroom .project-drawer .drawer-form textarea { border-radius: 16px; }

@media (max-width: 1080px) {
  .ss-showroom,
  .ss-build,
  .ss-split,
  .ss-offer { grid-template-columns: 1fr; }
  .ss-shelf,
  .ss-mini-shelf,
  .ss-proof-wall,
  .ss-process-rail,
  .ss-industry-links,
  .ss-guardrails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-object,
  .ss-object-blue,
  .ss-object-green { transform: none; min-height: 320px; }
}
@media (max-width: 720px) {
  .ss-nav { position: relative; align-items: flex-start; flex-direction: column; }
  .ss-nav nav { justify-content: flex-start; gap: 10px; }
  .ss-showroom { padding-top: 36px; }
  .ss-intro h1 { font-size: clamp(40px, 13vw, 58px); }
  .ss-showroom-rules div { grid-template-columns: 1fr; }
  .ss-shelf,
  .ss-mini-shelf,
  .ss-signal-strip,
  .ss-proof-wall,
  .ss-lanes,
  .ss-process-rail,
  .ss-fit-tickets,
  .ss-industry-links,
  .ss-guardrails { grid-template-columns: 1fr; }
  .ss-shelf-label { display: grid; }
  .ss-shelf-cta { align-items: stretch; flex-direction: column; }
  .ss-mock-layout,
  .ss-expanded-copy,
  .ss-ui-grid,
  .ss-ui-field-grid,
  .ss-ui-explainer { grid-template-columns: 1fr; }
  .ss-ui-header { align-items: flex-start; flex-direction: column; }
  .ss-expandable-ui summary { align-items: flex-start; flex-direction: column; }
  .ss-expandable-ui summary strong { text-align: left; }
  .ss-offer-list div { grid-template-columns: 1fr; }
  .ss-button,
  .ss-nav-cta { width: 100%; }
}


/* Rubric fix: Layout C shelf/stage first, AI FlowPal palette stronger, visible approval/capability objects - 2026-06-01 */
.layout-system-showroom .ss-showroom {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  align-items: start;
  padding-top: clamp(34px, 5vw, 68px);
}
.layout-system-showroom .ss-shelf { order: 1; }
.layout-system-showroom .ss-intro { order: 2; padding: 16px 0 0; }
.layout-system-showroom .ss-intro h1 { font-size: clamp(36px, 4.7vw, 66px); }
.layout-system-showroom .ss-lead { font-size: clamp(16px, 1.6vw, 19px); }
.layout-system-showroom .ss-showroom-rules { margin-top: 22px; }
.layout-system-showroom .ss-shelf {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 14px 48px;
  border: 1px solid rgba(104,213,255,.18);
  border-radius: 28px 28px 18px 18px;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255,209,102,.18), transparent 34%),
    radial-gradient(ellipse at 72% 4%, rgba(104,213,255,.18), transparent 34%),
    radial-gradient(ellipse at 82% 78%, rgba(110,231,168,.12), transparent 32%),
    linear-gradient(180deg, rgba(7,17,31,.96), rgba(13,27,47,.82));
  box-shadow: 0 34px 100px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.layout-system-showroom .ss-shelf::after {
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 12px;
  background: linear-gradient(90deg, var(--ss-warm), var(--ss-blue), var(--ss-green), var(--ss-violet));
  box-shadow: 0 15px 34px rgba(0,0,0,.48), 0 0 34px rgba(104,213,255,.16);
}
.layout-system-showroom .ss-shelf-label {
  background: rgba(7,17,31,.70);
  border-color: rgba(104,213,255,.18);
}
.ss-capability-dock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.14);
}
.ss-capability-dock span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 10px;
  color: var(--ss-text);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.layout-system-showroom .ss-object {
  min-height: 342px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--object-accent, var(--ss-warm)) 13%, rgba(7,17,31,.96)), rgba(13,27,47,.92));
  border-color: color-mix(in srgb, var(--object-accent, var(--ss-warm)) 35%, rgba(255,255,255,.14));
  box-shadow: 8px 10px 0 rgba(0,0,0,.24), 0 24px 70px rgba(0,0,0,.24);
}
.layout-system-showroom .ss-object::before {
  opacity: .75;
  background: radial-gradient(circle, color-mix(in srgb, var(--object-accent, var(--ss-warm)) 32%, transparent), transparent 62%);
}
.layout-system-showroom .ss-object-id { color: rgba(238,246,255,.72); }
.layout-system-showroom .ss-object-spec,
.layout-system-showroom .ss-object-output { border-top-color: rgba(255,255,255,.16); }
.ss-approval-check {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  margin-top: 2px;
  border: 1px solid rgba(244,199,107,.38);
  border-radius: 18px;
  background: rgba(244,199,107,.10);
}
.ss-approval-check span {
  color: var(--ss-warm);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
  font-weight: 950;
}
.ss-approval-check strong {
  color: var(--ss-text);
  line-height: 1.35;
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-shelf,
  .layout-system-showroom .ss-intro { order: initial; }
  .ss-capability-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ss-capability-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-approval-check { grid-template-columns: 1fr; }
}


/* Rubric fix 2: all capabilities become objects; intro becomes placard, not hero - 2026-06-01 */
body.layout-system-showroom {
  background:
    radial-gradient(ellipse at 64% 0%, rgba(104,213,255,.20), transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgba(185,156,255,.15), transparent 30%),
    radial-gradient(ellipse at 14% 10%, rgba(255,209,102,.12), transparent 28%),
    linear-gradient(138deg, #07111f 0%, #0b1729 46%, #081221 68%, #050a13 100%);
}
body.layout-system-showroom::before { opacity: .38; }
.layout-system-showroom .ss-showroom {
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, .58fr);
  gap: clamp(18px, 3vw, 36px);
}
.layout-system-showroom .ss-intro {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  padding: 20px;
  background: rgba(7,17,31,.64);
  box-shadow: 0 20px 70px rgba(0,0,0,.20);
}
.layout-system-showroom .ss-intro h1 {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: .98;
  letter-spacing: -.045em;
}
.layout-system-showroom .ss-lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.48;
}
.layout-system-showroom .ss-showroom-rules div {
  grid-template-columns: 38px 1fr;
  padding: 11px 12px;
}
.layout-system-showroom .ss-showroom-rules small { display: none; }
.layout-system-showroom .ss-shelf {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: 46px;
}
.layout-system-showroom .ss-capability-dock {
  display: none;
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  min-height: 278px;
  transform: none;
  border-radius: 20px 20px 10px 10px;
}
.layout-system-showroom .ss-object-violet { --object-accent: var(--ss-violet); }
.layout-system-showroom .ss-object-rose { --object-accent: var(--ss-rose); }
.layout-system-showroom .ss-object-ice { --object-accent: var(--ice, #d7f7ff); }
.layout-system-showroom .ss-object h2 {
  font-size: clamp(22px, 2.1vw, 30px);
}
.layout-system-showroom .ss-object p,
.layout-system-showroom .ss-object-spec,
.layout-system-showroom .ss-object-output {
  font-size: 13px;
}
.layout-system-showroom .ss-object-action {
  min-height: 40px;
  padding: 8px 12px;
}
.layout-system-showroom .ss-approval-check {
  margin-top: 0;
  background: linear-gradient(90deg, rgba(244,199,107,.13), rgba(104,213,255,.08));
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-shelf { order: 2; }
  .layout-system-showroom .ss-intro { order: 1; }
}
@media (max-width: 820px) {
  .layout-system-showroom .ss-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .layout-system-showroom .ss-shelf { grid-template-columns: 1fr; }
}


/* Rubric fix 3: review steps inside objects + semantic accent actions - 2026-06-01 */
.layout-system-showroom .ss-object {
  min-height: 322px;
  grid-template-rows: auto auto auto auto auto auto;
}
.ss-approval-gate {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--object-accent, var(--ss-warm)) 42%, rgba(255,255,255,.12));
  border-radius: 12px;
  background: rgba(7,17,31,.42);
}
.ss-approval-gate span {
  color: var(--object-accent, var(--ss-warm));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 950;
}
.ss-approval-gate strong {
  color: var(--ss-text);
  font-size: 12px;
  line-height: 1.25;
}
.layout-system-showroom .ss-object-action,
.layout-system-showroom .ss-mini-shelf button {
  color: var(--ss-text);
  background: rgba(7,17,31,.70);
  border-color: color-mix(in srgb, var(--object-accent, var(--ss-blue)) 45%, rgba(255,255,255,.16));
  box-shadow: none;
}
.layout-system-showroom .ss-mini-shelf button { border-color: rgba(104,213,255,.35); }
.layout-system-showroom .ss-object-action:hover,
.layout-system-showroom .ss-mini-shelf button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--object-accent, var(--ss-blue)) 24%, rgba(7,17,31,.82));
  box-shadow: 0 18px 46px rgba(0,0,0,.20);
}
.layout-system-showroom .ss-object-action.selected,
.layout-system-showroom .ss-object-action[aria-pressed="true"],
.layout-system-showroom .ss-mini-shelf button.selected,
.layout-system-showroom .ss-mini-shelf button[aria-pressed="true"] {
  color: var(--ss-ink-dark);
  background: linear-gradient(135deg, var(--ss-blue), var(--ss-green));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 18px 48px rgba(104,213,255,.20);
}
.layout-system-showroom .ss-shelf-label strong { color: var(--ss-blue); }
.layout-system-showroom .ss-approval-check {
  border-color: rgba(104,213,255,.30);
  background: linear-gradient(90deg, rgba(104,213,255,.10), rgba(110,231,168,.08), rgba(185,156,255,.07));
}
@media (max-width: 720px) {
  .ss-approval-gate { grid-template-columns: 1fr; }
}


/* User correction: reduce r4 intensity; return toward Option C template with matte showroom colours while keeping top bar/features - 2026-06-01 */
body.layout-system-showroom {
  --matte-cream: #f7efe2;
  --matte-cream-2: #dccfbd;
  --matte-paper: #efe0c2;
  --matte-paper-blue: #dbe9ef;
  --matte-paper-green: #d8e8ce;
  --matte-brown: #241c16;
  --matte-brown-2: #1b1713;
  --matte-ink: #111820;
  --matte-muted: #ccbca6;
  --matte-gold: #f0be62;
  color: var(--matte-cream);
  background: linear-gradient(180deg, #1b1713 0%, #241c16 42%, #0e131b 100%);
}
body.layout-system-showroom::before,
body.layout-system-showroom::after {
  opacity: 0;
}
.layout-system-showroom .ss-nav {
  background: rgba(7,17,31,.80);
  border-bottom-color: rgba(255,255,255,.14);
}
.layout-system-showroom .ss-showroom {
  grid-template-columns: minmax(320px, 470px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 58px);
  align-items: end;
  padding: 58px 0 56px;
}
.layout-system-showroom .ss-intro {
  order: 1;
  padding: 0 0 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.layout-system-showroom .ss-shelf {
  order: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0 0 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.layout-system-showroom .ss-shelf::after {
  left: 0;
  right: 0;
  bottom: 4px;
  height: 16px;
  background: linear-gradient(90deg, #6a4a25, #c89640, #76522b);
  box-shadow: 0 18px 38px rgba(0,0,0,.45);
}
.layout-system-showroom .ss-shelf-label {
  grid-column: 1 / -1;
  padding: 0 0 2px;
  border: 0;
  background: transparent;
  color: var(--matte-muted);
}
.layout-system-showroom .ss-shelf-label span {
  color: var(--matte-gold);
}
.layout-system-showroom .ss-shelf-label strong {
  color: var(--matte-cream);
  font-weight: 850;
}
.layout-system-showroom .ss-intro h1 {
  font-size: clamp(46px, 6.8vw, 88px);
  line-height: .88;
  letter-spacing: -.075em;
}
.layout-system-showroom .ss-lead {
  margin-top: 20px;
  color: var(--matte-cream-2);
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.55;
}
.layout-system-showroom .ss-kicker {
  color: var(--matte-gold);
}
.layout-system-showroom .ss-showroom-rules {
  margin-top: 26px;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
}
.layout-system-showroom .ss-showroom-rules div {
  background: rgba(255,255,255,.055);
}
.layout-system-showroom .ss-showroom-rules small {
  display: block;
  color: var(--matte-muted);
}
.layout-system-showroom .ss-object:nth-of-type(n+4),
.layout-system-showroom .ss-approval-check,
.layout-system-showroom .ss-approval-gate {
  display: none;
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  display: grid;
  min-height: 292px;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 12px;
  padding: 22px;
  color: var(--matte-ink);
  background: var(--matte-paper);
  border: 1px solid rgba(255,255,255,.32);
  border-top: 0;
  border-radius: 0;
  box-shadow: 10px 14px 0 rgba(0,0,0,.22);
  transform: translateY(var(--lift, 0));
  overflow: visible;
}
.layout-system-showroom .ss-object::before {
  display: none;
}
.layout-system-showroom .ss-object-blue {
  --lift: -28px;
  background: var(--matte-paper-blue);
}
.layout-system-showroom .ss-object-green {
  --lift: 18px;
  background: var(--matte-paper-green);
}
.layout-system-showroom .ss-object-id {
  color: #5b6470;
  border-bottom: 2px solid rgba(17,24,32,.20);
}
.layout-system-showroom .ss-object h2 {
  color: var(--matte-ink);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.05em;
  margin-top: 14px;
}
.layout-system-showroom .ss-object p {
  color: #354052;
  line-height: 1.48;
}
.layout-system-showroom .ss-object-spec,
.layout-system-showroom .ss-object-output {
  color: #354052;
  border-top: 1px solid rgba(17,24,32,.20);
}
.layout-system-showroom .ss-object-spec span {
  color: #9b6f24;
}
.layout-system-showroom .ss-object-spec strong,
.layout-system-showroom .ss-object-output {
  color: #1b2634;
}
.layout-system-showroom .ss-object-action {
  width: 100%;
  min-height: 40px;
  border-radius: 0;
  color: var(--matte-ink);
  background: transparent;
  border: 1px solid rgba(17,24,32,.42);
  box-shadow: none;
}
.layout-system-showroom .ss-object-action:hover,
.layout-system-showroom .ss-object-action:focus-visible {
  color: var(--matte-paper);
  background: var(--matte-ink);
  transform: none;
  box-shadow: none;
}
.layout-system-showroom .ss-signal-strip,
.layout-system-showroom .ss-mini-shelf article,
.layout-system-showroom .ss-build-board article,
.layout-system-showroom .ss-proof-wall div,
.layout-system-showroom .ss-process-rail article,
.layout-system-showroom .ss-fit-tickets article,
.layout-system-showroom .ss-guardrails article,
.layout-system-showroom .ss-lanes div,
.layout-system-showroom .ss-industry-links a {
  border-radius: 0;
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.layout-system-showroom .ss-section-head h2,
.layout-system-showroom .ss-offer h2,
.layout-system-showroom .ss-final-cta h2,
.layout-system-showroom .ss-mini-shelf h3,
.layout-system-showroom .ss-build-board h3,
.layout-system-showroom .ss-process-rail h3,
.layout-system-showroom .ss-fit-tickets h3,
.layout-system-showroom .ss-guardrails h3 {
  color: var(--matte-cream);
}
.layout-system-showroom .ss-section-head p,
.layout-system-showroom .ss-offer p,
.layout-system-showroom .ss-final-cta p,
.layout-system-showroom .ss-mini-shelf p,
.layout-system-showroom .ss-build-board p,
.layout-system-showroom .ss-process-rail p,
.layout-system-showroom .ss-fit-tickets li,
.layout-system-showroom .ss-guardrails p,
.layout-system-showroom .ss-faq p,
.layout-system-showroom .ss-industry-links span {
  color: var(--matte-cream-2);
}
.layout-system-showroom .ss-mini-shelf button,
.layout-system-showroom .ss-button.primary,
.layout-system-showroom .ss-nav-cta {
  border-radius: 0;
  color: var(--matte-ink);
  background: var(--matte-gold);
  box-shadow: none;
}
.layout-system-showroom .ss-mini-shelf button:hover,
.layout-system-showroom .ss-button.primary:hover,
.layout-system-showroom .ss-nav-cta:hover {
  transform: none;
  background: #ffd98c;
  box-shadow: none;
}
.layout-system-showroom .ss-offer,
.layout-system-showroom .ss-final-cta {
  border-radius: 0;
  background: rgba(255,255,255,.06);
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-shelf { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-object,
  .layout-system-showroom .ss-object-blue,
  .layout-system-showroom .ss-object-green { transform: none; }
}


/* User correction pass 2: calmer Option C template feel, less dashboard/checklist density - 2026-06-01 */
.layout-system-showroom .ss-showroom-rules {
  display: none;
}
.layout-system-showroom .ss-showroom {
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 62px);
  align-items: end;
  padding-top: 64px;
}
.layout-system-showroom .ss-intro h1 {
  max-width: 600px;
  font-size: clamp(40px, 5.3vw, 68px);
  line-height: .92;
  letter-spacing: -.065em;
}
.layout-system-showroom .ss-lead {
  max-width: 520px;
  font-size: 18px;
  color: #d2c2ad;
}
.layout-system-showroom .ss-shelf-label {
  display: none;
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  min-height: 292px;
  grid-template-rows: auto auto 1fr auto;
  padding: 22px;
}
.layout-system-showroom .ss-shelf > .ss-object .ss-object-spec,
.layout-system-showroom .ss-shelf > .ss-object .ss-object-action {
  display: none;
}
.layout-system-showroom .ss-object h2 {
  margin-top: 22px;
  font-size: 28px;
}
.layout-system-showroom .ss-object-output {
  font-size: 14px;
}
.layout-system-showroom .ss-nav nav {
  gap: 12px;
  color: rgba(204,188,166,.72);
}
.layout-system-showroom .ss-nav nav a {
  font-size: 13px;
}
.layout-system-showroom .ss-nav-cta {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--matte-gold) !important;
  background: transparent;
  border: 1px solid rgba(240,190,98,.42);
  box-shadow: none;
}
.layout-system-showroom .ss-nav-cta:hover {
  color: var(--matte-ink) !important;
  background: var(--matte-gold);
}
.layout-system-showroom .ss-mini-shelf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout-system-showroom .ss-mini-shelf article {
  min-height: 210px;
}
.layout-system-showroom .ss-section {
  padding: 68px 0;
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-mini-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .layout-system-showroom .ss-mini-shelf { grid-template-columns: 1fr; }
}


/* User correction pass 3: quieter top bar, flatter matte cards, remove above-fold process strip - 2026-06-01 */
.layout-system-showroom .ss-nav {
  background: rgba(27,23,19,.58);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  padding-top: 13px;
  padding-bottom: 13px;
}
.layout-system-showroom .ss-brand {
  color: rgba(247,239,226,.88);
}
.layout-system-showroom .ss-mark {
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--matte-gold);
  border-color: rgba(240,190,98,.38);
  box-shadow: none;
}
.layout-system-showroom .ss-nav nav {
  gap: 10px;
  color: rgba(204,188,166,.58);
}
.layout-system-showroom .ss-nav nav a {
  padding: 6px 2px;
  font-size: 12px;
}
.layout-system-showroom .ss-nav-cta {
  min-height: 34px;
  padding: 7px 10px;
  color: rgba(240,190,98,.78) !important;
  border-color: rgba(240,190,98,.24);
}
.layout-system-showroom .ss-showroom {
  padding: 70px 0 92px;
  gap: clamp(42px, 6vw, 74px);
}
.layout-system-showroom .ss-intro {
  padding-bottom: 10px;
}
.layout-system-showroom .ss-intro h1 {
  max-width: 560px;
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: .94;
  letter-spacing: -.058em;
}
.layout-system-showroom .ss-lead {
  max-width: 500px;
  font-size: 17px;
}
.layout-system-showroom .ss-signal-strip {
  display: none;
}
.layout-system-showroom .ss-shelf {
  gap: 22px;
  padding-bottom: 26px;
}
.layout-system-showroom .ss-shelf::after {
  height: 10px;
  opacity: .72;
  box-shadow: 0 12px 24px rgba(0,0,0,.32);
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  min-height: 250px;
  padding: 20px;
  box-shadow: 4px 7px 0 rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.22);
}
.layout-system-showroom .ss-object-blue {
  --lift: -18px;
}
.layout-system-showroom .ss-object-green {
  --lift: 12px;
}
.layout-system-showroom .ss-object-id {
  font-size: 10px;
  border-bottom-width: 1px;
}
.layout-system-showroom .ss-object h2 {
  margin-top: 18px;
  font-size: 24px;
  letter-spacing: -.04em;
}
.layout-system-showroom .ss-object p {
  font-size: 14px;
}
.layout-system-showroom .ss-object-output {
  font-size: 13px;
  padding-top: 10px;
}
.layout-system-showroom .ss-section {
  padding: 60px 0;
}
.layout-system-showroom .ss-section-head h2,
.layout-system-showroom .ss-offer h2,
.layout-system-showroom .ss-final-cta h2 {
  font-size: clamp(30px, 3.7vw, 50px);
}


/* User correction pass 4: true calmer Option C stage - fewer nav links, less copy, object cards only - 2026-06-01 */
.layout-system-showroom .ss-nav nav a:nth-of-type(n+3) {
  display: none;
}
.layout-system-showroom .ss-nav nav {
  gap: 18px;
}
.layout-system-showroom .ss-showroom {
  min-height: calc(100vh - 64px);
  padding: 76px 0 112px;
  align-items: center;
}
.layout-system-showroom .ss-intro h1 {
  max-width: 520px;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: .94;
}
.layout-system-showroom .ss-lead {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.48;
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  min-height: 226px;
  grid-template-rows: auto 1fr auto;
  padding: 20px;
  box-shadow: none;
  border-color: rgba(255,255,255,.20);
}
.layout-system-showroom .ss-object p {
  display: none;
}
.layout-system-showroom .ss-object h2 {
  align-self: center;
  margin: 0;
  font-size: 25px;
}
.layout-system-showroom .ss-object-output {
  border-top-width: 1px;
  color: #263140;
}
.layout-system-showroom .ss-object-blue {
  --lift: -14px;
}
.layout-system-showroom .ss-object-green {
  --lift: 10px;
}
.layout-system-showroom .ss-shelf::after {
  opacity: .55;
  box-shadow: none;
}
.layout-system-showroom .ss-section {
  padding: 54px 0;
}
.layout-system-showroom #systems {
  padding-top: 78px;
}
.layout-system-showroom .ss-section-head {
  max-width: 720px;
}
.layout-system-showroom .ss-section-head h2,
.layout-system-showroom .ss-offer h2,
.layout-system-showroom .ss-final-cta h2 {
  font-size: clamp(28px, 3vw, 42px);
}
.layout-system-showroom .ss-mini-shelf article {
  min-height: 176px;
  padding: 18px;
}
.layout-system-showroom .ss-mini-shelf h3 {
  font-size: 20px;
}
.layout-system-showroom .ss-mini-shelf p {
  font-size: 14px;
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { min-height: auto; }
}


/* User correction pass 5: rebalance hero, reduce empty stage and card dominance - 2026-06-01 */
.layout-system-showroom .ss-showroom {
  min-height: 0;
  grid-template-columns: minmax(360px, 520px) minmax(0, 680px);
  justify-content: space-between;
  padding: 72px 0 78px;
  gap: clamp(34px, 5vw, 64px);
}
.layout-system-showroom .ss-shelf {
  max-width: 680px;
  justify-self: end;
  gap: 16px;
  padding-bottom: 22px;
}
.layout-system-showroom .ss-intro h1 {
  max-width: 560px;
  font-size: clamp(42px, 5vw, 64px);
}
.layout-system-showroom .ss-object,
.layout-system-showroom .ss-object-blue,
.layout-system-showroom .ss-object-green {
  min-height: 202px;
  padding: 18px;
  grid-template-rows: auto 1fr;
  opacity: .94;
}
.layout-system-showroom .ss-object-output {
  display: none;
}
.layout-system-showroom .ss-object h2 {
  align-self: end;
  margin-bottom: 2px;
  font-size: 22px;
}
.layout-system-showroom .ss-object-id {
  padding-bottom: 9px;
  opacity: .82;
}
.layout-system-showroom .ss-object-blue {
  --lift: -10px;
}
.layout-system-showroom .ss-object-green {
  --lift: 8px;
}
.layout-system-showroom .ss-shelf::after {
  height: 8px;
  opacity: .42;
}
.layout-system-showroom #systems {
  padding-top: 64px;
}
@media (max-width: 1080px) {
  .layout-system-showroom .ss-showroom { grid-template-columns: 1fr; }
  .layout-system-showroom .ss-shelf { max-width: none; justify-self: stretch; }
}


/* User correction: keep shelf cards/tabs uniform; vary only expanded UI examples - 2026-06-02 */
.layout-system-showroom .ss-example-card {
  --tool-accent: #68d5ff;
  --tool-accent-2: #6ee7c8;
  --tool-rgb: 104, 213, 255;
  --tool-rgb-2: 110, 231, 200;
  position: relative;
  overflow: visible;
  border-radius: 0 !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.layout-system-showroom .ss-example-card::before,
.layout-system-showroom .ss-example-card::after {
  content: none !important;
}
.layout-system-showroom .ss-example-card > span,
.layout-system-showroom .ss-example-card .ss-data-example span,
.layout-system-showroom .ss-example-card .ss-expandable-ui summary span {
  color: var(--matte-gold, var(--ss-warm)) !important;
}
.layout-system-showroom .ss-example-card .ss-data-example {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.11) !important;
}
.layout-system-showroom .ss-example-card .ss-data-example div {
  background: rgba(7,17,31,.54) !important;
}
.layout-system-showroom .ss-example-card .ss-data-example strong::before {
  background: var(--ss-blue) !important;
  box-shadow: 0 0 12px rgba(104,213,255,.35) !important;
}
.layout-system-showroom .ss-example-card .ss-expandable-ui {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.16) !important;
}
.layout-system-showroom .ss-example-card .ss-expandable-ui summary::after {
  border-color: rgba(240,190,98,.38) !important;
  color: var(--matte-gold, var(--ss-warm)) !important;
  background: transparent !important;
}
.layout-system-showroom .ss-mini-shelf article:has(.ss-deep-ui[open]) {
  grid-column: 1 / -1;
}

/* Expanded UI uses per-example layouts/patterns. The collapsed shelf cards stay identical. */
.layout-system-showroom .ss-example-card .ss-ui-browser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--tool-rgb),.28) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--tool-rgb),.13), transparent 32%),
    radial-gradient(circle at 92% 26%, rgba(var(--tool-rgb-2),.10), transparent 34%),
    rgba(7,17,31,.78) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-browser::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .46;
  background: var(--tool-ui-pattern, linear-gradient(90deg, rgba(var(--tool-rgb),.08) 1px, transparent 1px));
  background-size: var(--tool-pattern-size, 28px 28px);
}
.layout-system-showroom .ss-example-card .ss-ui-header {
  border-bottom-color: rgba(var(--tool-rgb),.18) !important;
  background: linear-gradient(90deg, rgba(var(--tool-rgb),.10), rgba(255,255,255,.045)) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-header span {
  color: var(--tool-accent-2) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-grid {
  grid-template-areas: "queue detail action";
  background: rgba(var(--tool-rgb),.13) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-queue { grid-area: queue; }
.layout-system-showroom .ss-example-card .ss-ui-detail { grid-area: detail; }
.layout-system-showroom .ss-example-card .ss-ui-action-panel { grid-area: action; }
.layout-system-showroom .ss-example-card .ss-ui-queue,
.layout-system-showroom .ss-example-card .ss-ui-detail,
.layout-system-showroom .ss-example-card .ss-ui-action-panel,
.layout-system-showroom .ss-example-card .ss-ui-explainer div {
  background: rgba(7,17,31,.64) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-queue em,
.layout-system-showroom .ss-example-card .ss-ui-detail em,
.layout-system-showroom .ss-example-card .ss-ui-action-panel em,
.layout-system-showroom .ss-example-card .ss-ui-explainer h4,
.layout-system-showroom .ss-example-card .ss-ui-source-trail span,
.layout-system-showroom .ss-example-card .ss-ui-rule span {
  color: var(--tool-accent) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-tabs span.active {
  color: #08111f !important;
  border-color: rgba(var(--tool-rgb),.48) !important;
  background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-2)) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-ticket.active,
.layout-system-showroom .ss-example-card .ss-ui-field-grid div,
.layout-system-showroom .ss-example-card .ss-ui-draft {
  border-color: rgba(var(--tool-rgb),.24) !important;
  background: linear-gradient(135deg, rgba(var(--tool-rgb),.10), rgba(255,255,255,.045)) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-ticket b,
.layout-system-showroom .ss-example-card .ss-ui-rule,
.layout-system-showroom .ss-example-card .ss-ui-source-trail,
.layout-system-showroom .ss-example-card .ss-ui-actions span {
  border-color: rgba(var(--tool-rgb),.24) !important;
  background: rgba(var(--tool-rgb),.065) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-ticket b {
  color: var(--tool-accent) !important;
}
.layout-system-showroom .ss-example-card .ss-ui-explainer {
  background: rgba(var(--tool-rgb),.12) !important;
}

.layout-system-showroom .ss-theme-reply {
  --tool-accent: #68d5ff;
  --tool-accent-2: #6ee7c8;
  --tool-rgb: 104,213,255;
  --tool-rgb-2: 110,231,200;
  --tool-pattern-size: 28px 28px;
  --tool-ui-pattern:
    linear-gradient(90deg, rgba(104,213,255,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(110,231,200,.07) 1px, transparent 1px);
}
.layout-system-showroom .ss-theme-reply .ss-ui-grid {
  grid-template-columns: minmax(220px,.82fr) minmax(300px,1fr) minmax(300px,1fr);
  grid-template-areas: "queue detail action";
}

.layout-system-showroom .ss-theme-estimate {
  --tool-accent: #f0be62;
  --tool-accent-2: #ffe0a1;
  --tool-rgb: 240,190,98;
  --tool-rgb-2: 255,224,161;
  --tool-pattern-size: 34px 34px;
  --tool-ui-pattern:
    linear-gradient(90deg, rgba(240,190,98,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,224,161,.07) 1px, transparent 1px),
    linear-gradient(135deg, transparent 48%, rgba(240,190,98,.11) 49%, transparent 51%);
}
.layout-system-showroom .ss-theme-estimate .ss-ui-grid {
  grid-template-columns: minmax(280px,1.1fr) minmax(240px,.82fr);
  grid-template-areas:
    "detail queue"
    "action queue";
}
.layout-system-showroom .ss-theme-estimate .ss-ui-ticket { border-style: dashed; }

.layout-system-showroom .ss-theme-status {
  --tool-accent: #6ee7a8;
  --tool-accent-2: #68d5ff;
  --tool-rgb: 110,231,168;
  --tool-rgb-2: 104,213,255;
  --tool-pattern-size: 1px 1px;
  --tool-ui-pattern:
    radial-gradient(circle at 72% 32%, transparent 0 34px, rgba(110,231,168,.16) 35px 36px, transparent 37px 68px, rgba(104,213,255,.11) 69px 70px, transparent 71px),
    linear-gradient(90deg, rgba(110,231,168,.05) 1px, transparent 1px);
}
.layout-system-showroom .ss-theme-status .ss-ui-grid {
  grid-template-columns: minmax(240px,.82fr) minmax(280px,1fr) minmax(280px,1fr);
  grid-template-areas:
    "queue detail detail"
    "queue action action";
}
.layout-system-showroom .ss-theme-status .ss-ui-ticket.active { box-shadow: inset 3px 0 0 var(--tool-accent); }

.layout-system-showroom .ss-theme-checklist {
  --tool-accent: #b99cff;
  --tool-accent-2: #f5c1ff;
  --tool-rgb: 185,156,255;
  --tool-rgb-2: 245,193,255;
  --tool-pattern-size: 100% 24px;
  --tool-ui-pattern:
    linear-gradient(180deg, rgba(185,156,255,.12) 0 1px, transparent 1px 23px),
    radial-gradient(circle at 18px 16px, rgba(245,193,255,.16) 0 3px, transparent 4px);
}
.layout-system-showroom .ss-theme-checklist .ss-ui-grid {
  grid-template-columns: minmax(300px,1.2fr) minmax(240px,.8fr);
  grid-template-areas:
    "queue detail"
    "queue action";
}
.layout-system-showroom .ss-theme-checklist .ss-ui-ticket b::before { content: "? "; }

.layout-system-showroom .ss-theme-quote {
  --tool-accent: #ff9fbe;
  --tool-accent-2: #ffd166;
  --tool-rgb: 255,159,190;
  --tool-rgb-2: 255,209,102;
  --tool-pattern-size: 42px 42px;
  --tool-ui-pattern:
    linear-gradient(135deg, rgba(255,159,190,.12) 0 2px, transparent 2px 18px, rgba(255,209,102,.09) 18px 20px, transparent 20px);
}
.layout-system-showroom .ss-theme-quote .ss-ui-grid {
  grid-template-columns: minmax(260px,1fr) minmax(260px,1fr) minmax(260px,.88fr);
  grid-template-areas:
    "queue queue action"
    "detail detail action";
}
.layout-system-showroom .ss-theme-quote .ss-ui-ticket.active { box-shadow: inset 0 -3px 0 rgba(255,209,102,.35); }

.layout-system-showroom .ss-theme-brief {
  --tool-accent: #d7f7ff;
  --tool-accent-2: #9fb2ff;
  --tool-rgb: 215,247,255;
  --tool-rgb-2: 159,178,255;
  --tool-pattern-size: 30px 30px;
  --tool-ui-pattern:
    radial-gradient(circle, rgba(215,247,255,.13) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(159,178,255,.07), transparent 42%);
}
.layout-system-showroom .ss-theme-brief .ss-ui-grid {
  grid-template-columns: minmax(280px,1fr) minmax(260px,.92fr) minmax(260px,.92fr);
  grid-template-areas:
    "detail detail action"
    "queue queue action";
}
.layout-system-showroom .ss-theme-brief .ss-ui-header { background: linear-gradient(90deg, rgba(215,247,255,.10), rgba(159,178,255,.07)) !important; }

@media (max-width: 900px) {
  .layout-system-showroom .ss-example-card .ss-ui-grid,
  .layout-system-showroom .ss-theme-reply .ss-ui-grid,
  .layout-system-showroom .ss-theme-estimate .ss-ui-grid,
  .layout-system-showroom .ss-theme-status .ss-ui-grid,
  .layout-system-showroom .ss-theme-checklist .ss-ui-grid,
  .layout-system-showroom .ss-theme-quote .ss-ui-grid,
  .layout-system-showroom .ss-theme-brief .ss-ui-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "queue"
      "detail"
      "action";
  }
}

/* User correction: bespoke expanded UI examples, no template-looking dashboard repeats - 2026-06-02 */
.layout-system-showroom .ss-bespoke-ui {
  --tool-accent: #68d5ff;
  --tool-accent-2: #6ee7c8;
  --tool-rgb: 104,213,255;
  --tool-rgb-2: 110,231,200;
  overflow: hidden;
  border: 1px solid rgba(var(--tool-rgb),.26);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--tool-rgb),.13), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(var(--tool-rgb-2),.10), transparent 34%),
    rgba(7,17,31,.78);
}
.layout-system-showroom .ss-bespoke-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(var(--tool-rgb),.20);
  background: linear-gradient(90deg, rgba(var(--tool-rgb),.10), rgba(255,255,255,.045));
}
.layout-system-showroom .ss-bespoke-head strong {
  color: var(--matte-cream, var(--ss-text));
  font-size: 17px;
  letter-spacing: -.025em;
}
.layout-system-showroom .ss-bespoke-head span {
  color: var(--tool-accent-2);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 850;
}
.layout-system-showroom .ss-bespoke-ui em,
.layout-system-showroom .bespoke-explain h4 {
  display: block;
  margin: 0 0 10px;
  color: var(--tool-accent);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 950;
}
.layout-system-showroom .ss-bespoke-ui h4 {
  margin: 0;
  color: var(--matte-cream, var(--ss-text));
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  letter-spacing: -.04em;
}
.layout-system-showroom .ss-bespoke-ui p,
.layout-system-showroom .ss-bespoke-ui small,
.layout-system-showroom .ss-bespoke-ui li {
  color: var(--matte-cream-2, var(--ss-muted));
  line-height: 1.45;
}
.layout-system-showroom .ss-bespoke-ui span,
.layout-system-showroom .ss-bespoke-ui b,
.layout-system-showroom .ss-bespoke-ui strong {
  text-transform: none;
  letter-spacing: 0;
}
.layout-system-showroom .bespoke-explain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid rgba(var(--tool-rgb),.16);
  background: rgba(var(--tool-rgb),.12);
}
.layout-system-showroom .bespoke-explain > div {
  padding: 14px;
  background: rgba(7,17,31,.58);
}
.layout-system-showroom .bespoke-explain ul {
  margin: 0;
  padding-left: 18px;
}
.layout-system-showroom .bespoke-explain li {
  font-size: 13px;
}
.layout-system-showroom .bespoke-explain li + li { margin-top: 6px; }
.layout-system-showroom .ss-theme-reply { --tool-accent:#68d5ff; --tool-accent-2:#6ee7c8; --tool-rgb:104,213,255; --tool-rgb-2:110,231,200; }
.layout-system-showroom .ss-theme-estimate { --tool-accent:#f0be62; --tool-accent-2:#ffe0a1; --tool-rgb:240,190,98; --tool-rgb-2:255,224,161; }
.layout-system-showroom .ss-theme-status { --tool-accent:#6ee7a8; --tool-accent-2:#68d5ff; --tool-rgb:110,231,168; --tool-rgb-2:104,213,255; }
.layout-system-showroom .ss-theme-checklist { --tool-accent:#b99cff; --tool-accent-2:#f5c1ff; --tool-rgb:185,156,255; --tool-rgb-2:245,193,255; }
.layout-system-showroom .ss-theme-quote { --tool-accent:#ff9fbe; --tool-accent-2:#ffd166; --tool-rgb:255,159,190; --tool-rgb-2:255,209,102; }
.layout-system-showroom .ss-theme-brief { --tool-accent:#d7f7ff; --tool-accent-2:#9fb2ff; --tool-rgb:215,247,255; --tool-rgb-2:159,178,255; }

/* Lead reply: signal merge path */
.layout-system-showroom .lead-signal-merge {
  display: grid;
  grid-template-columns: minmax(220px,.86fr) minmax(260px,1fr) minmax(280px,1.04fr);
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .signal-stack,
.layout-system-showroom .intake-focus-card,
.layout-system-showroom .reply-review-card {
  padding: 14px;
  background: rgba(7,17,31,.62);
}
.layout-system-showroom .signal-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-left: 3px solid var(--tool-accent);
  background: rgba(var(--tool-rgb),.075);
}
.layout-system-showroom .signal-card + .signal-card { margin-top: 8px; }
.layout-system-showroom .signal-card span,
.layout-system-showroom .need-map span,
.layout-system-showroom .missing-slots span,
.layout-system-showroom .approval-rail span {
  color: var(--matte-cream-2, var(--ss-soft));
  font-size: 12px;
  font-weight: 800;
}
.layout-system-showroom .signal-card strong { color: var(--matte-cream, var(--ss-text)); font-size: 14px; }
.layout-system-showroom .need-map,
.layout-system-showroom .missing-slots,
.layout-system-showroom .approval-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.layout-system-showroom .need-map span,
.layout-system-showroom .missing-slots span,
.layout-system-showroom .approval-rail span {
  padding: 7px 9px;
  border: 1px solid rgba(var(--tool-rgb),.22);
  background: rgba(var(--tool-rgb),.07);
}
.layout-system-showroom .missing-slots b {
  flex-basis: 100%;
  color: var(--tool-accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.layout-system-showroom .reply-review-card blockquote {
  margin: 12px 0 0;
  padding: 12px;
  color: var(--matte-cream, var(--ss-text));
  border: 1px solid rgba(var(--tool-rgb),.22);
  background: rgba(var(--tool-rgb),.075);
}

/* Estimate: package builder */
.layout-system-showroom .estimate-package {
  display: grid;
  grid-template-columns: minmax(190px,.72fr) minmax(300px,1.18fr) minmax(220px,.82fr);
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .photo-evidence-strip,
.layout-system-showroom .scope-board,
.layout-system-showroom .readiness-meter {
  padding: 14px;
  background: rgba(7,17,31,.62);
}
.layout-system-showroom .photo-evidence-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(58px, auto);
  gap: 8px;
}
.layout-system-showroom .photo-evidence-strip em { grid-column: 1 / -1; }
.layout-system-showroom .photo-chip {
  display: grid;
  place-items: end start;
  min-height: 62px;
  padding: 8px;
  color: #0a111f;
  background:
    linear-gradient(135deg, rgba(255,224,161,.92), rgba(240,190,98,.72)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.08) 8px 9px);
  font-weight: 950;
  font-size: 12px;
}
.layout-system-showroom .photo-chip.tall { grid-row: span 2; }
.layout-system-showroom .photo-chip.wide { grid-column: span 2; }
.layout-system-showroom .scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.layout-system-showroom .scope-grid div {
  padding: 10px;
  border: 1px dashed rgba(var(--tool-rgb),.28);
  background: rgba(var(--tool-rgb),.06);
}
.layout-system-showroom .scope-grid span,
.layout-system-showroom .day-columns span {
  display: block;
  margin-bottom: 5px;
  color: var(--tool-accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 950;
}
.layout-system-showroom .scope-grid strong { color: var(--matte-cream, var(--ss-text)); font-size: 13px; }
.layout-system-showroom .meter {
  height: 12px;
  margin: 14px 0 9px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.layout-system-showroom .meter span { display: block; width: var(--pct); height: 100%; background: linear-gradient(90deg, var(--tool-accent), var(--tool-accent-2)); }
.layout-system-showroom .readiness-meter b { color: var(--tool-accent); font-size: 22px; }
.layout-system-showroom .estimate-actions { display: grid; gap: 7px; margin-top: 12px; }
.layout-system-showroom .estimate-actions span { padding: 8px; border: 1px solid rgba(var(--tool-rgb),.22); color: var(--matte-cream-2); }

/* Status: radar and path */
.layout-system-showroom .status-radar-board {
  display: grid;
  grid-template-columns: minmax(230px,.82fr) minmax(250px,.9fr) minmax(280px,1fr);
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .radar-orbit,
.layout-system-showroom .status-path,
.layout-system-showroom .update-composer {
  padding: 14px;
  background: rgba(7,17,31,.62);
}
.layout-system-showroom .radar-orbit {
  position: relative;
  min-height: 260px;
  background:
    radial-gradient(circle at 50% 56%, rgba(var(--tool-rgb),.10) 0 46px, transparent 47px 74px, rgba(var(--tool-rgb),.10) 75px 76px, transparent 77px 112px, rgba(var(--tool-rgb-2),.12) 113px 114px, transparent 115px),
    rgba(7,17,31,.62);
}
.layout-system-showroom .radar-core {
  position: absolute;
  left: 50%; top: 54%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 96px; height: 96px;
  color: #08111f;
  background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-2));
  font-weight: 1000;
  text-align: center;
}
.layout-system-showroom .r-dot { position: absolute; padding: 6px 8px; color: var(--matte-cream); background: rgba(var(--tool-rgb),.12); border: 1px solid rgba(var(--tool-rgb),.24); font-size: 11px; font-weight: 850; }
.layout-system-showroom .d1 { left: 18%; top: 28%; } .layout-system-showroom .d2 { right: 14%; top: 34%; } .layout-system-showroom .d3 { left: 20%; bottom: 22%; } .layout-system-showroom .d4 { right: 18%; bottom: 18%; }
.layout-system-showroom .path-step { display: grid; gap: 4px; padding: 10px; border-left: 3px solid rgba(var(--tool-rgb),.32); background: rgba(255,255,255,.045); }
.layout-system-showroom .path-step + .path-step { margin-top: 9px; }
.layout-system-showroom .path-step b { color: var(--tool-accent); }
.layout-system-showroom .path-step span { color: var(--matte-cream-2); font-size: 12px; }
.layout-system-showroom .update-composer p { padding: 12px; border: 1px solid rgba(var(--tool-rgb),.22); background: rgba(var(--tool-rgb),.06); }
.layout-system-showroom .decision-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.layout-system-showroom .decision-strip span { padding: 7px 9px; border: 1px solid rgba(var(--tool-rgb),.20); color: var(--matte-cream-2); }

/* Checklist: blocker ledger */
.layout-system-showroom .blocker-ledger {
  display: grid;
  grid-template-columns: minmax(270px,1fr) minmax(250px,.9fr) minmax(250px,.9fr);
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .blocker-stack,
.layout-system-showroom .release-panel,
.layout-system-showroom .reminder-paper { padding: 14px; background: rgba(7,17,31,.62); }
.layout-system-showroom .blocker-card { padding: 11px; border: 1px solid rgba(var(--tool-rgb),.22); background: rgba(var(--tool-rgb),.06); }
.layout-system-showroom .blocker-card + .blocker-card { margin-top: 8px; }
.layout-system-showroom .blocker-card.critical { border-left: 4px solid var(--tool-accent); }
.layout-system-showroom .blocker-card strong { display:block; color: var(--matte-cream); }
.layout-system-showroom .blocker-card span { color: var(--matte-cream-2); font-size: 12px; }
.layout-system-showroom .release-checks,
.layout-system-showroom .tone-switch { display: grid; gap: 8px; margin-top: 14px; }
.layout-system-showroom .release-checks span,
.layout-system-showroom .tone-switch span { padding: 8px; border: 1px solid rgba(var(--tool-rgb),.22); color: var(--matte-cream-2); }
.layout-system-showroom .tone-switch { grid-template-columns: repeat(3, minmax(0,1fr)); }
.layout-system-showroom .tone-switch .active { color: #08111f; background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-2)); }
.layout-system-showroom .reminder-paper p { padding: 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(var(--tool-rgb),.20); }

/* Quote: deal runway */
.layout-system-showroom .quote-runway {
  display: grid;
  grid-template-columns: minmax(280px,1.15fr) minmax(220px,.75fr) minmax(270px,1fr);
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .deal-strip,
.layout-system-showroom .signal-gauge,
.layout-system-showroom .touch-workbench { padding: 14px; background: rgba(7,17,31,.62); }
.layout-system-showroom .deal-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.layout-system-showroom .deal-strip em { grid-column: 1 / -1; }
.layout-system-showroom .deal-card { min-height: 118px; padding: 12px; border: 1px solid rgba(var(--tool-rgb),.22); background: linear-gradient(180deg, rgba(var(--tool-rgb),.08), rgba(255,255,255,.04)); }
.layout-system-showroom .deal-card.hot { border-color: rgba(var(--tool-rgb-2),.36); box-shadow: inset 0 -4px 0 rgba(var(--tool-rgb-2),.28); }
.layout-system-showroom .deal-card strong { display:block; color: var(--tool-accent); font-size: 25px; }
.layout-system-showroom .deal-card span { color: var(--matte-cream-2); font-size: 12px; }
.layout-system-showroom .gauge-ring { width: 126px; height: 126px; margin: 12px auto; display:grid; place-items:center; border-radius:50%; background: radial-gradient(circle, rgba(7,17,31,.9) 0 44%, transparent 45%), conic-gradient(var(--tool-accent) 0 72%, rgba(255,255,255,.12) 72%); }
.layout-system-showroom .gauge-ring span { color: var(--tool-accent); font-weight: 1000; }
.layout-system-showroom .signal-tags,
.layout-system-showroom .outcome-row { display:flex; flex-wrap:wrap; gap:7px; }
.layout-system-showroom .signal-tags span,
.layout-system-showroom .outcome-row span { padding:7px 9px; border:1px solid rgba(var(--tool-rgb),.22); color:var(--matte-cream-2); }
.layout-system-showroom .touch-workbench p { padding: 12px; border: 1px solid rgba(var(--tool-rgb),.22); background: rgba(var(--tool-rgb),.06); }

/* Brief: owner-first slate */
.layout-system-showroom .briefing-slate {
  display: grid;
  grid-template-columns: minmax(280px,1.1fr) minmax(260px,.9fr) minmax(240px,.82fr);
  grid-template-areas: "lead columns timeline" "lead actions timeline";
  gap: 1px;
  background: rgba(var(--tool-rgb),.14);
}
.layout-system-showroom .brief-lead,
.layout-system-showroom .day-columns,
.layout-system-showroom .decision-timeline,
.layout-system-showroom .brief-actions { padding: 14px; background: rgba(7,17,31,.62); }
.layout-system-showroom .brief-lead { grid-area: lead; }
.layout-system-showroom .day-columns { grid-area: columns; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; }
.layout-system-showroom .decision-timeline { grid-area: timeline; }
.layout-system-showroom .brief-actions { grid-area: actions; display:flex; flex-wrap:wrap; gap:8px; align-content:start; }
.layout-system-showroom .brief-lead h4 { font-size: clamp(26px,3vw,42px); }
.layout-system-showroom .day-columns div { padding:10px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .day-columns strong { color: var(--matte-cream); font-size: 13px; }
.layout-system-showroom .decision-timeline div { display:grid; grid-template-columns: 54px 1fr; gap:10px; padding:10px 0; border-top:1px solid rgba(var(--tool-rgb),.18); }
.layout-system-showroom .decision-timeline b { color: var(--tool-accent); }
.layout-system-showroom .decision-timeline span { color: var(--matte-cream-2); }
.layout-system-showroom .brief-actions span { padding:8px 10px; border:1px solid rgba(var(--tool-rgb),.22); color:var(--matte-cream-2); }

@media (max-width: 980px) {
  .layout-system-showroom .lead-signal-merge,
  .layout-system-showroom .estimate-package,
  .layout-system-showroom .status-radar-board,
  .layout-system-showroom .blocker-ledger,
  .layout-system-showroom .quote-runway,
  .layout-system-showroom .briefing-slate {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .layout-system-showroom .brief-lead,
  .layout-system-showroom .day-columns,
  .layout-system-showroom .decision-timeline,
  .layout-system-showroom .brief-actions { grid-area: auto; }
  .layout-system-showroom .day-columns,
  .layout-system-showroom .deal-strip,
  .layout-system-showroom .scope-grid { grid-template-columns: 1fr; }
}


/* User correction: completely separate from-scratch expanded UI concepts per shelf example - 2026-06-02 */
.layout-system-showroom .ss-fresh-ui {
  --tool-accent: #68d5ff;
  --tool-accent-2: #6ee7c8;
  --tool-rgb: 104,213,255;
  --tool-rgb-2: 110,231,200;
  overflow: hidden;
  border: 1px solid rgba(var(--tool-rgb),.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--tool-rgb),.12), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(var(--tool-rgb-2),.09), transparent 34%),
    rgba(7,17,31,.78);
}
.layout-system-showroom .fresh-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(var(--tool-rgb),.18);
  background: linear-gradient(90deg, rgba(var(--tool-rgb),.09), rgba(255,255,255,.045));
}
.layout-system-showroom .fresh-title strong { color: var(--matte-cream, var(--ss-text)); font-size: 17px; letter-spacing: -.025em; }
.layout-system-showroom .fresh-title span { color: var(--tool-accent-2); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 850; }
.layout-system-showroom .ss-fresh-ui em,
.layout-system-showroom .fresh-notes h4 { display:block; margin:0 0 10px; color:var(--tool-accent); font-size:10px; font-style:normal; text-transform:uppercase; letter-spacing:.13em; font-weight:950; }
.layout-system-showroom .ss-fresh-ui h4 { margin:0; color:var(--matte-cream, var(--ss-text)); font-size:clamp(20px,2vw,30px); line-height:1; letter-spacing:-.04em; }
.layout-system-showroom .ss-fresh-ui p,
.layout-system-showroom .ss-fresh-ui li,
.layout-system-showroom .ss-fresh-ui small { color:var(--matte-cream-2, var(--ss-muted)); line-height:1.45; }
.layout-system-showroom .ss-fresh-ui span,
.layout-system-showroom .ss-fresh-ui b,
.layout-system-showroom .ss-fresh-ui strong { text-transform:none; letter-spacing:0; }
.layout-system-showroom .fresh-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border-top:1px solid rgba(var(--tool-rgb),.14); background:rgba(var(--tool-rgb),.12); }
.layout-system-showroom .fresh-notes > div { padding:14px; background:rgba(7,17,31,.58); }
.layout-system-showroom .fresh-notes ul { margin:0; padding-left:18px; }
.layout-system-showroom .fresh-notes li { font-size:13px; }
.layout-system-showroom .fresh-notes li + li { margin-top:6px; }
.layout-system-showroom .ss-theme-reply { --tool-accent:#68d5ff; --tool-accent-2:#6ee7c8; --tool-rgb:104,213,255; --tool-rgb-2:110,231,200; }
.layout-system-showroom .ss-theme-estimate { --tool-accent:#f0be62; --tool-accent-2:#ffe0a1; --tool-rgb:240,190,98; --tool-rgb-2:255,224,161; }
.layout-system-showroom .ss-theme-status { --tool-accent:#6ee7a8; --tool-accent-2:#68d5ff; --tool-rgb:110,231,168; --tool-rgb-2:104,213,255; }
.layout-system-showroom .ss-theme-checklist { --tool-accent:#b99cff; --tool-accent-2:#f5c1ff; --tool-rgb:185,156,255; --tool-rgb-2:245,193,255; }
.layout-system-showroom .ss-theme-quote { --tool-accent:#ff9fbe; --tool-accent-2:#ffd166; --tool-rgb:255,159,190; --tool-rgb-2:255,209,102; }
.layout-system-showroom .ss-theme-brief { --tool-accent:#d7f7ff; --tool-accent-2:#9fb2ff; --tool-rgb:215,247,255; --tool-rgb-2:159,178,255; }

/* 01 Lead reply workspace: radial signal capture + question builder */
.layout-system-showroom .intake-canvas-grid { display:grid; grid-template-columns:minmax(240px,.95fr) minmax(260px,1fr) minmax(260px,1fr); gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .intake-signal-ring,
.layout-system-showroom .intake-question-builder,
.layout-system-showroom .intake-response-pad { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .intake-signal-ring { position:relative; min-height:285px; background:radial-gradient(circle at 50% 56%, rgba(var(--tool-rgb),.13) 0 52px, transparent 53px 86px, rgba(var(--tool-rgb),.10) 87px 88px, transparent 89px), rgba(7,17,31,.62); }
.layout-system-showroom .ring-core { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); display:grid; place-items:center; width:104px; height:104px; border:1px solid rgba(var(--tool-rgb),.35); background:rgba(var(--tool-rgb),.10); text-align:center; }
.layout-system-showroom .ring-core strong { color:var(--matte-cream); }
.layout-system-showroom .ring-core span { color:var(--tool-accent); font-size:12px; }
.layout-system-showroom .ring-node { position:absolute; padding:7px 9px; color:var(--matte-cream-2); border:1px solid rgba(var(--tool-rgb),.24); background:rgba(var(--tool-rgb),.075); font-size:11px; font-weight:850; }
.layout-system-showroom .ring-node.form { left:10%; top:30%; } .layout-system-showroom .ring-node.voice { right:8%; top:35%; } .layout-system-showroom .ring-node.call { left:15%; bottom:20%; } .layout-system-showroom .ring-node.rule { right:12%; bottom:18%; }
.layout-system-showroom .question-row { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; padding:11px 0; border-top:1px solid rgba(var(--tool-rgb),.18); }
.layout-system-showroom .question-row b { color:var(--tool-accent); } .layout-system-showroom .question-row span { color:var(--matte-cream-2); font-size:13px; }
.layout-system-showroom .intake-response-pad p { padding:12px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .reply-stamp { display:grid; gap:8px; margin-top:12px; }
.layout-system-showroom .reply-stamp span { padding:8px; color:var(--matte-cream-2); border:1px solid rgba(var(--tool-rgb),.20); }

/* 02 Estimate blueprint sheet */
.layout-system-showroom .blueprint-layout { display:grid; grid-template-columns:minmax(210px,.78fr) minmax(330px,1.22fr) minmax(230px,.82fr); gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .blueprint-photo-board,
.layout-system-showroom .blueprint-scope-canvas,
.layout-system-showroom .blueprint-readiness { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .blueprint-photo-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(62px,auto); gap:8px; }
.layout-system-showroom .blueprint-photo-board em { grid-column:1/-1; }
.layout-system-showroom .photo-tile { display:grid; place-items:end start; padding:8px; min-height:62px; color:#101620; background:linear-gradient(135deg, rgba(255,224,161,.94), rgba(240,190,98,.72)); font-size:12px; font-weight:950; }
.layout-system-showroom .photo-tile.main { grid-row:span 2; } .layout-system-showroom .photo-tile.wide { grid-column:span 2; }
.layout-system-showroom .sketch-frame { position:relative; min-height:260px; border:1px solid rgba(var(--tool-rgb),.26); background:linear-gradient(90deg, rgba(var(--tool-rgb),.08) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--tool-rgb),.07) 1px, transparent 1px); background-size:24px 24px; }
.layout-system-showroom .sketch-line { position:absolute; height:2px; background:var(--tool-accent); transform-origin:left center; opacity:.8; }
.layout-system-showroom .sketch-line.l1 { left:18%; top:54%; width:64%; transform:rotate(-16deg); } .layout-system-showroom .sketch-line.l2 { left:28%; top:28%; width:42%; transform:rotate(38deg); }
.layout-system-showroom .sketch-label { position:absolute; padding:7px 9px; border:1px solid rgba(var(--tool-rgb),.28); background:rgba(7,17,31,.76); color:var(--matte-cream-2); font-size:12px; }
.layout-system-showroom .sketch-label.a { left:12%; top:18%; } .layout-system-showroom .sketch-label.b { right:10%; top:42%; } .layout-system-showroom .sketch-label.c { left:24%; bottom:16%; }
.layout-system-showroom .readiness-block { padding:11px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .readiness-block + .readiness-block { margin-top:9px; }
.layout-system-showroom .readiness-block b { color:var(--tool-accent); display:block; margin-bottom:4px; } .layout-system-showroom .readiness-block span { color:var(--matte-cream-2); font-size:13px; }

/* 03 Client state map */
.layout-system-showroom .state-map-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(250px,.85fr) minmax(280px,1fr); gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .state-current-card,
.layout-system-showroom .state-evidence-ladder,
.layout-system-showroom .state-message-capsule { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .state-current-card { display:grid; align-content:center; min-height:260px; background:radial-gradient(circle at 70% 30%, rgba(var(--tool-rgb),.16), transparent 34%), rgba(7,17,31,.62); }
.layout-system-showroom .state-risk-pill { display:inline-block; margin-top:14px; padding:8px 10px; color:#08111f; background:linear-gradient(135deg,var(--tool-accent),var(--tool-accent-2)); font-weight:950; }
.layout-system-showroom .state-evidence-ladder div { display:grid; grid-template-columns:70px 1fr; gap:10px; padding:12px 0; border-top:1px solid rgba(var(--tool-rgb),.18); }
.layout-system-showroom .state-evidence-ladder b { color:var(--tool-accent); } .layout-system-showroom .state-evidence-ladder span { color:var(--matte-cream-2); font-size:13px; }
.layout-system-showroom .state-message-capsule p { padding:14px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .state-message-capsule > span { display:inline-block; padding:8px 10px; color:var(--matte-cream-2); border:1px solid rgba(var(--tool-rgb),.20); }

/* 04 Missing-item ready-to-move checklist */
.layout-system-showroom .clearance-layout { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(280px,1fr) minmax(280px,1fr); gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .gate-visual,
.layout-system-showroom .clearance-items,
.layout-system-showroom .clearance-message { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .gate-visual { min-height:260px; display:grid; align-content:center; }
.layout-system-showroom .gate-lock { display:grid; place-items:center; height:94px; border:1px solid rgba(var(--tool-rgb),.30); color:var(--tool-accent); font-size:28px; font-weight:1000; background:rgba(var(--tool-rgb),.07); }
.layout-system-showroom .gate-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.layout-system-showroom .gate-bar span { height:16px; border:1px solid rgba(var(--tool-rgb),.24); background:rgba(var(--tool-rgb),.10); }
.layout-system-showroom .clearance-item { padding:11px; border-left:4px solid var(--tool-accent); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .clearance-item + .clearance-item { margin-top:9px; }
.layout-system-showroom .clearance-item.received { opacity:.62; border-left-color:rgba(255,255,255,.24); }
.layout-system-showroom .clearance-item b { display:block; color:var(--matte-cream); } .layout-system-showroom .clearance-item span { color:var(--matte-cream-2); font-size:13px; }
.layout-system-showroom .clearance-message p { padding:13px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .tone-meter { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.layout-system-showroom .tone-meter span { padding:8px; text-align:center; color:var(--matte-cream-2); border:1px solid rgba(var(--tool-rgb),.20); }
.layout-system-showroom .tone-meter .active { color:#08111f; background:linear-gradient(135deg,var(--tool-accent),var(--tool-accent-2)); }

/* 05 Quote follow-up view */
.layout-system-showroom .proposal-room-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(240px,.86fr) minmax(260px,.94fr); gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .proposal-brief-card,
.layout-system-showroom .decision-window-card,
.layout-system-showroom .move-options { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .proposal-brief-card h4 { font-size:clamp(28px,3vw,44px); }
.layout-system-showroom .proposal-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.layout-system-showroom .proposal-tags span { padding:7px 9px; color:var(--matte-cream-2); border:1px solid rgba(var(--tool-rgb),.20); }
.layout-system-showroom .window-scale { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:100px; margin:12px 0; }
.layout-system-showroom .window-scale::before { content:""; position:absolute; left:8px; right:8px; top:50%; height:2px; background:linear-gradient(90deg, rgba(var(--tool-rgb),.28), var(--tool-accent), rgba(var(--tool-rgb-2),.34)); }
.layout-system-showroom .window-scale span,
.layout-system-showroom .window-scale b { position:relative; z-index:1; padding:8px 10px; background:rgba(7,17,31,.86); border:1px solid rgba(var(--tool-rgb),.22); color:var(--matte-cream-2); }
.layout-system-showroom .window-scale b { color:var(--tool-accent); }
.layout-system-showroom .move-options div { padding:11px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .move-options div + div { margin-top:9px; }
.layout-system-showroom .move-options b { display:block; color:var(--matte-cream); } .layout-system-showroom .move-options span { color:var(--matte-cream-2); font-size:13px; }

/* 06 Daily work brief sheet */
.layout-system-showroom .daily-sheet-layout { display:grid; grid-template-columns:minmax(300px,1.18fr) minmax(240px,.84fr) minmax(240px,.84fr); grid-template-areas:"priority time owners" "priority time owners"; gap:1px; background:rgba(var(--tool-rgb),.14); }
.layout-system-showroom .daily-priority-note,
.layout-system-showroom .daily-time-strip,
.layout-system-showroom .daily-owner-board { padding:14px; background:rgba(7,17,31,.62); }
.layout-system-showroom .daily-priority-note { grid-area:priority; display:grid; align-content:center; min-height:270px; }
.layout-system-showroom .daily-time-strip { grid-area:time; } .layout-system-showroom .daily-owner-board { grid-area:owners; }
.layout-system-showroom .daily-priority-note h4 { font-size:clamp(28px,3.2vw,46px); }
.layout-system-showroom .daily-time-strip div { display:grid; grid-template-columns:58px 1fr; gap:10px; padding:12px 0; border-top:1px solid rgba(var(--tool-rgb),.18); }
.layout-system-showroom .daily-time-strip b { color:var(--tool-accent); } .layout-system-showroom .daily-time-strip span { color:var(--matte-cream-2); }
.layout-system-showroom .daily-owner-board div { padding:11px; border:1px solid rgba(var(--tool-rgb),.22); background:rgba(var(--tool-rgb),.06); }
.layout-system-showroom .daily-owner-board div + div { margin-top:9px; }
.layout-system-showroom .daily-owner-board span { display:block; margin-bottom:4px; color:var(--tool-accent); font-size:10px; text-transform:uppercase; letter-spacing:.11em; font-weight:950; }
.layout-system-showroom .daily-owner-board strong { color:var(--matte-cream); font-size:13px; }

@media (max-width: 980px) {
  .layout-system-showroom .intake-canvas-grid,
  .layout-system-showroom .blueprint-layout,
  .layout-system-showroom .state-map-layout,
  .layout-system-showroom .clearance-layout,
  .layout-system-showroom .proposal-room-layout,
  .layout-system-showroom .daily-sheet-layout,
  .layout-system-showroom .fresh-notes {
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .layout-system-showroom .daily-priority-note,
  .layout-system-showroom .daily-time-strip,
  .layout-system-showroom .daily-owner-board { grid-area:auto; }
}


/* Final system-shelf pass: unique expanded UI surfaces, consistent outer shelf - 2026-06-02 */
.layout-system-showroom .ss-example-card {
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.layout-system-showroom .ss-example-card::before,
.layout-system-showroom .ss-example-card::after { content: none !important; }
.layout-system-showroom .ss-example-card > span,
.layout-system-showroom .ss-example-card .ss-data-example span,
.layout-system-showroom .ss-example-card .ss-expandable-ui summary span {
  color: var(--matte-gold, var(--ss-warm)) !important;
}
.layout-system-showroom .ss-example-card .ss-data-example {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.11) !important;
}
.layout-system-showroom .ss-example-card .ss-data-example div {
  background: rgba(7,17,31,.54) !important;
}
.layout-system-showroom .ss-deep-ui-wrap { margin-top: 2px; }
.layout-system-showroom .ss-fresh-ui {
  min-height: 360px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.18);
}
.layout-system-showroom .ss-fresh-ui .fresh-title {
  min-height: 54px;
}
.layout-system-showroom .ss-fresh-ui .fresh-notes {
  margin-top: 0;
}

/* 01 Lead reply workspace: conversation constellation */
.layout-system-showroom .ss-intake-canvas {
  --tool-accent: #52d7ff;
  --tool-accent-2: #6ef3d2;
  --tool-rgb: 82,215,255;
  --tool-rgb-2: 110,243,210;
  border-radius: 24px 10px 24px 10px;
  background:
    radial-gradient(circle at 22% 42%, rgba(82,215,255,.18), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(110,243,210,.14), transparent 22%),
    radial-gradient(circle, rgba(255,255,255,.10) 0 1px, transparent 2px),
    #071522 !important;
  background-size: auto, auto, 22px 22px, auto;
}
.layout-system-showroom .ss-intake-canvas .intake-canvas-grid {
  display: grid;
  grid-template-columns: minmax(250px,1fr) minmax(240px,.82fr) minmax(270px,.95fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}
.layout-system-showroom .ss-intake-canvas .intake-signal-ring,
.layout-system-showroom .ss-intake-canvas .intake-question-builder,
.layout-system-showroom .ss-intake-canvas .intake-response-pad {
  border: 1px solid rgba(82,215,255,.20);
  background: rgba(3,13,24,.64);
  box-shadow: inset 0 0 34px rgba(82,215,255,.05);
}
.layout-system-showroom .ss-intake-canvas .intake-signal-ring {
  border-radius: 50%;
  min-height: 315px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  width: min(100%, 330px);
  background:
    radial-gradient(circle at 50% 55%, rgba(82,215,255,.18) 0 54px, transparent 55px 88px, rgba(82,215,255,.15) 89px 90px, transparent 91px 126px, rgba(110,243,210,.14) 127px 128px, transparent 129px),
    rgba(3,13,24,.66);
}
.layout-system-showroom .ss-intake-canvas .ring-core {
  border-radius: 50%;
  border-color: rgba(82,215,255,.44);
  background: radial-gradient(circle, rgba(82,215,255,.22), rgba(3,13,24,.88));
}
.layout-system-showroom .ss-intake-canvas .ring-node {
  border-radius: 999px;
  background: rgba(82,215,255,.10);
  backdrop-filter: blur(8px);
}
.layout-system-showroom .ss-intake-canvas .intake-question-builder {
  border-radius: 18px;
  display: grid;
  align-content: center;
}
.layout-system-showroom .ss-intake-canvas .question-row {
  border-top-style: dashed;
}
.layout-system-showroom .ss-intake-canvas .question-row b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #071522;
  background: linear-gradient(135deg, #52d7ff, #6ef3d2);
}
.layout-system-showroom .ss-intake-canvas .intake-response-pad {
  border-radius: 10px 26px 10px 26px;
}
.layout-system-showroom .ss-intake-canvas .reply-stamp {
  grid-template-columns: 1fr;
}
.layout-system-showroom .ss-intake-canvas .reply-stamp span:last-child {
  color: #071522;
  background: linear-gradient(135deg, #52d7ff, #6ef3d2);
}

/* 02 Estimate blueprint: technical sheet + annotated evidence */
.layout-system-showroom .ss-estimate-blueprint {
  --tool-accent: #f0be62;
  --tool-accent-2: #ffe0a1;
  --tool-rgb: 240,190,98;
  --tool-rgb-2: 255,224,161;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(240,190,98,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240,190,98,.08) 1px, transparent 1px),
    linear-gradient(135deg, #0b1320, #101826) !important;
  background-size: 26px 26px, 26px 26px, auto;
}
.layout-system-showroom .ss-estimate-blueprint .blueprint-layout {
  grid-template-columns: minmax(210px,.72fr) minmax(360px,1.28fr) minmax(230px,.8fr);
  gap: 16px;
  padding: 16px;
  background: transparent;
}
.layout-system-showroom .ss-estimate-blueprint .blueprint-photo-board,
.layout-system-showroom .ss-estimate-blueprint .blueprint-scope-canvas,
.layout-system-showroom .ss-estimate-blueprint .blueprint-readiness {
  border: 1px dashed rgba(240,190,98,.36);
  background: rgba(9,14,22,.72);
}
.layout-system-showroom .ss-estimate-blueprint .photo-tile {
  transform: rotate(-1deg);
  border: 2px solid rgba(255,224,161,.75);
  box-shadow: 6px 8px 0 rgba(0,0,0,.22);
}
.layout-system-showroom .ss-estimate-blueprint .photo-tile:nth-child(3) { transform: rotate(2deg); }
.layout-system-showroom .ss-estimate-blueprint .photo-tile:nth-child(4) { transform: rotate(-3deg); }
.layout-system-showroom .ss-estimate-blueprint .sketch-frame {
  min-height: 300px;
  background:
    linear-gradient(90deg, rgba(240,190,98,.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240,190,98,.10) 1px, transparent 1px),
    radial-gradient(circle at 60% 40%, rgba(240,190,98,.10), transparent 35%);
  background-size: 22px 22px, 22px 22px, auto;
}
.layout-system-showroom .ss-estimate-blueprint .readiness-block {
  border-style: dashed;
  position: relative;
}
.layout-system-showroom .ss-estimate-blueprint .readiness-block::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(240,190,98,.35);
  transform: rotate(8deg);
}

/* 03 Client state map: calm state capsule + evidence ladder */
.layout-system-showroom .ss-client-state-map {
  --tool-accent: #6ee7a8;
  --tool-accent-2: #68d5ff;
  --tool-rgb: 110,231,168;
  --tool-rgb-2: 104,213,255;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 18%, rgba(110,231,168,.16), transparent 26%),
    radial-gradient(circle at 78% 76%, rgba(104,213,255,.13), transparent 30%),
    #071820 !important;
}
.layout-system-showroom .ss-client-state-map .state-map-layout {
  grid-template-columns: minmax(330px,1.12fr) minmax(210px,.68fr) minmax(280px,.9fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}
.layout-system-showroom .ss-client-state-map .state-current-card,
.layout-system-showroom .ss-client-state-map .state-evidence-ladder,
.layout-system-showroom .ss-client-state-map .state-message-capsule {
  border: 1px solid rgba(110,231,168,.20);
  background: rgba(3,17,21,.68);
}
.layout-system-showroom .ss-client-state-map .state-current-card {
  border-radius: 32px;
  padding: 24px;
}
.layout-system-showroom .ss-client-state-map .state-current-card h4 {
  font-size: clamp(30px, 3.4vw, 52px);
}
.layout-system-showroom .ss-client-state-map .state-risk-pill {
  border-radius: 999px;
  justify-self: start;
}
.layout-system-showroom .ss-client-state-map .state-evidence-ladder {
  border-radius: 20px;
  position: relative;
}
.layout-system-showroom .ss-client-state-map .state-evidence-ladder div {
  border-top: 0;
  border-left: 3px solid rgba(110,231,168,.36);
  padding: 12px 0 12px 14px;
}
.layout-system-showroom .ss-client-state-map .state-message-capsule {
  border-radius: 999px 32px 32px 999px;
  display: grid;
  align-content: center;
  padding: 22px;
}

/* 04 Missing-item ready-to-move checklist: lock/release mechanism */
.layout-system-showroom .ss-clearance-gate {
  --tool-accent: #b99cff;
  --tool-accent-2: #f5c1ff;
  --tool-rgb: 185,156,255;
  --tool-rgb-2: 245,193,255;
  border-radius: 8px 8px 24px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(185,156,255,.07) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #101024, #07111f) !important;
}
.layout-system-showroom .ss-clearance-gate .clearance-layout {
  grid-template-columns: minmax(230px,.78fr) minmax(300px,1.02fr) minmax(280px,.92fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}
.layout-system-showroom .ss-clearance-gate .gate-visual,
.layout-system-showroom .ss-clearance-gate .clearance-items,
.layout-system-showroom .ss-clearance-gate .clearance-message {
  border: 1px solid rgba(185,156,255,.24);
  background: rgba(10,10,30,.70);
}
.layout-system-showroom .ss-clearance-gate .gate-lock {
  height: 128px;
  background:
    linear-gradient(90deg, rgba(185,156,255,.16) 0 12px, transparent 12px 24px),
    rgba(185,156,255,.08);
  border-color: rgba(185,156,255,.38);
  letter-spacing: .08em;
}
.layout-system-showroom .ss-clearance-gate .gate-bar {
  grid-template-columns: 1fr;
}
.layout-system-showroom .ss-clearance-gate .gate-bar span {
  height: 12px;
  background: linear-gradient(90deg, rgba(185,156,255,.16), rgba(245,193,255,.10));
}
.layout-system-showroom .ss-clearance-gate .clearance-item {
  border-left-width: 6px;
}
.layout-system-showroom .ss-clearance-gate .tone-meter span {
  border-radius: 999px;
}

/* 05 Quote follow-up view: timing and follow-up view */
.layout-system-showroom .ss-proposal-room {
  --tool-accent: #ff9fbe;
  --tool-accent-2: #ffd166;
  --tool-rgb: 255,159,190;
  --tool-rgb-2: 255,209,102;
  border-radius: 0 32px 0 32px;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,209,102,.16), transparent 24%),
    linear-gradient(135deg, rgba(255,159,190,.10), transparent 34%),
    #180d18 !important;
}
.layout-system-showroom .ss-proposal-room .proposal-room-layout {
  grid-template-columns: minmax(300px,1.05fr) minmax(260px,.86fr) minmax(270px,.9fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}
.layout-system-showroom .ss-proposal-room .proposal-brief-card,
.layout-system-showroom .ss-proposal-room .decision-window-card,
.layout-system-showroom .ss-proposal-room .move-options {
  border: 1px solid rgba(255,159,190,.22);
  background: rgba(20,9,20,.70);
}
.layout-system-showroom .ss-proposal-room .proposal-brief-card {
  border-left: 8px solid var(--tool-accent-2);
}
.layout-system-showroom .ss-proposal-room .proposal-brief-card h4 {
  font-size: clamp(36px, 4vw, 60px);
  color: var(--tool-accent-2);
}
.layout-system-showroom .ss-proposal-room .window-scale {
  min-height: 150px;
}
.layout-system-showroom .ss-proposal-room .window-scale::before {
  height: 4px;
  background: linear-gradient(90deg, rgba(255,159,190,.25), var(--tool-accent), var(--tool-accent-2));
}
.layout-system-showroom .ss-proposal-room .move-options div {
  transform: rotate(-1deg);
  box-shadow: 5px 6px 0 rgba(0,0,0,.20);
}
.layout-system-showroom .ss-proposal-room .move-options div:nth-child(3) { transform: rotate(1deg); }
.layout-system-showroom .ss-proposal-room .move-options div:nth-child(4) { transform: rotate(-2deg); }

/* 06 Daily work brief: editorial work sheet */
.layout-system-showroom .ss-daily-sheet {
  --tool-accent: #24446f;
  --tool-accent-2: #876c2f;
  --tool-rgb: 215,247,255;
  --tool-rgb-2: 159,178,255;
  border: 1px solid rgba(244,234,215,.55);
  border-radius: 18px 18px 28px 8px;
  color: #132033;
  background:
    linear-gradient(90deg, rgba(36,68,111,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(36,68,111,.07) 1px, transparent 1px),
    #f1e4cd !important;
  background-size: 28px 28px, 28px 28px, auto;
}
.layout-system-showroom .ss-daily-sheet .fresh-title {
  background: rgba(19,32,51,.08) !important;
  border-bottom-color: rgba(19,32,51,.18);
}
.layout-system-showroom .ss-daily-sheet .fresh-title strong,
.layout-system-showroom .ss-daily-sheet h4,
.layout-system-showroom .ss-daily-sheet strong,
.layout-system-showroom .ss-daily-sheet b {
  color: #132033 !important;
}
.layout-system-showroom .ss-daily-sheet .fresh-title span,
.layout-system-showroom .ss-daily-sheet em,
.layout-system-showroom .ss-daily-sheet .fresh-notes h4,
.layout-system-showroom .ss-daily-sheet .daily-time-strip b,
.layout-system-showroom .ss-daily-sheet .daily-owner-board span {
  color: #876c2f !important;
}
.layout-system-showroom .ss-daily-sheet p,
.layout-system-showroom .ss-daily-sheet li,
.layout-system-showroom .ss-daily-sheet span {
  color: #31435c !important;
}
.layout-system-showroom .ss-daily-sheet .daily-sheet-layout {
  grid-template-columns: minmax(330px,1.1fr) minmax(260px,.85fr) minmax(260px,.85fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}
.layout-system-showroom .ss-daily-sheet .daily-priority-note,
.layout-system-showroom .ss-daily-sheet .daily-time-strip,
.layout-system-showroom .ss-daily-sheet .daily-owner-board,
.layout-system-showroom .ss-daily-sheet .fresh-notes > div {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(19,32,51,.16);
}
.layout-system-showroom .ss-daily-sheet .daily-priority-note h4 {
  font-size: clamp(34px,4vw,62px);
}
.layout-system-showroom .ss-daily-sheet .daily-time-strip div {
  border-top-color: rgba(19,32,51,.18);
}
.layout-system-showroom .ss-daily-sheet .daily-owner-board div {
  border-color: rgba(19,32,51,.18);
  background: rgba(255,255,255,.35);
}
.layout-system-showroom .ss-daily-sheet .fresh-notes {
  background: rgba(19,32,51,.16);
}

@media (max-width: 980px) {
  .layout-system-showroom .ss-intake-canvas .intake-canvas-grid,
  .layout-system-showroom .ss-estimate-blueprint .blueprint-layout,
  .layout-system-showroom .ss-client-state-map .state-map-layout,
  .layout-system-showroom .ss-clearance-gate .clearance-layout,
  .layout-system-showroom .ss-proposal-room .proposal-room-layout,
  .layout-system-showroom .ss-daily-sheet .daily-sheet-layout {
    grid-template-columns: 1fr;
  }
  .layout-system-showroom .ss-intake-canvas .intake-signal-ring {
    border-radius: 22px;
    aspect-ratio: auto;
    width: 100%;
  }
}

/* Linked public pages - aligned to homepage showroom shell - 2026-06-02 */
.ss-nav a.ss-nav-cta { display: inline-flex; align-items: center; justify-content: center; color: var(--ss-ink-dark); text-decoration: none; }
.companion-page .ss-stage { padding-bottom: 72px; }
.companion-stage { overflow: clip; }
.companion-hero { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(320px, .72fr); gap: clamp(28px, 5vw, 68px); align-items: stretch; padding: clamp(52px, 8vw, 96px) 0 clamp(30px, 5vw, 64px); }
.companion-copy { min-width: 0; align-self: center; }
.companion-copy h1 { max-width: 860px; margin: 0; color: var(--ss-text); font-size: clamp(42px, 6vw, 82px); line-height: .91; letter-spacing: -.066em; }
.companion-copy .ss-lead { max-width: 760px; }
.companion-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.companion-actions .ss-button:not(.primary), .companion-form .ss-button:not(.primary) { color: var(--ss-text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.companion-panel { position: relative; overflow: hidden; display: grid; gap: 18px; align-content: start; min-height: 430px; padding: clamp(20px, 3vw, 28px); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)), radial-gradient(circle at 18% 18%, rgba(255,209,102,.18), transparent 32%), radial-gradient(circle at 85% 12%, rgba(104,213,255,.14), transparent 34%), rgba(6,14,26,.72); box-shadow: 0 30px 90px rgba(0,0,0,.34); }
.companion-panel::after { content: ""; position: absolute; inset: auto -30px -40px 25%; height: 110px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, rgba(255,179,138,.22), rgba(255,209,102,.24), rgba(104,213,255,.18)); filter: blur(12px); transform: rotate(-5deg); }
.companion-panel-top, .companion-mini-grid { position: relative; z-index: 1; }
.companion-panel-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.15); }
.companion-panel-top span, .companion-mini-grid span, .companion-card span, .email-choice-card span, .screen-top span, .screen-list span, .screen-note em { color: var(--ss-warm); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 950; font-style: normal; }
.companion-panel-top strong { color: var(--ss-text); }
.companion-mini-grid { display: grid; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.13); border-radius: 20px; overflow: hidden; }
.companion-mini-grid div { padding: 16px; background: rgba(0,0,0,.20); }
.companion-mini-grid strong { display: block; margin-top: 7px; color: var(--ss-text); line-height: 1.42; }
.companion-band { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 4px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 22px; background: rgba(255,255,255,.07); color: var(--soft); }
.companion-band strong { color: var(--ss-warm); }
.companion-section { padding: clamp(42px, 7vw, 84px) 0 0; }
.companion-section-head { max-width: 780px; margin-bottom: 24px; }
.companion-section-head h2, .companion-cta h2 { margin: 0; color: var(--ss-text); font-size: clamp(34px, 4.6vw, 62px); line-height: .96; letter-spacing: -.055em; }
.companion-section-head p:not(.ss-kicker), .companion-cta p:not(.ss-kicker) { color: var(--soft); line-height: 1.6; font-size: 17px; }
.companion-card-grid { display: grid; gap: 16px; }
.companion-card-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.companion-card-grid.vertical { align-content: start; }
.companion-card { position: relative; overflow: hidden; min-height: 190px; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)); }
.companion-card::after { content: ""; position: absolute; inset: auto -30px -35px 45%; height: 90px; background: color-mix(in srgb, var(--card-accent, var(--ss-warm)) 24%, transparent); filter: blur(18px); }
.companion-card.warm { --card-accent: var(--ss-warm); } .companion-card.blue { --card-accent: var(--ss-blue); } .companion-card.green { --card-accent: var(--ss-green); }
.companion-card h3 { position: relative; z-index: 1; margin: 12px 0 8px; color: var(--ss-text); font-size: 24px; line-height: 1.02; letter-spacing: -.035em; }
.companion-card p { position: relative; z-index: 1; margin: 0; color: var(--soft); line-height: 1.5; }
.companion-demo-grid { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(260px, .7fr); gap: 18px; align-items: stretch; }
.companion-screen { min-height: 430px; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: linear-gradient(135deg, rgba(8,19,35,.92), rgba(15,31,52,.72)), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 42px 42px, 42px 42px; box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.screen-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.screen-top strong { color: var(--ss-green); }
.screen-list { display: grid; gap: 12px; margin-top: 18px; }
.screen-list div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.065); }
.screen-list strong { color: var(--ss-text); line-height: 1.35; }
.screen-note { margin-top: 18px; padding: 18px; border: 1px solid rgba(255,209,102,.25); border-radius: 20px; background: rgba(255,209,102,.08); }
.screen-note p { margin: 8px 0 0; color: var(--soft); line-height: 1.5; }
.companion-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.companion-link-card { min-height: 126px; display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.06); color: var(--soft); text-decoration: none; }
.companion-link-card:hover, .companion-link-card.active { border-color: rgba(255,209,102,.38); background: rgba(255,209,102,.08); transform: translateY(-1px); }
.companion-link-card span { color: var(--ss-warm); font-weight: 950; } .companion-link-card strong { color: var(--ss-text); line-height: 1.35; }
.companion-cta { margin-top: clamp(44px, 7vw, 82px); padding: clamp(28px, 5vw, 46px); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: linear-gradient(135deg, rgba(255,209,102,.13), rgba(104,213,255,.08), rgba(185,156,255,.08)); }
.email-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.email-choice-card { position: relative; overflow: hidden; min-height: 180px; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: rgba(255,255,255,.065); text-decoration: none; color: var(--soft); }
.email-choice-card strong { display: block; margin: 12px 0 8px; color: var(--ss-text); font-size: 24px; letter-spacing: -.03em; }
.email-choice-card small { color: var(--soft); line-height: 1.45; } .email-choice-card:hover { transform: translateY(-1px); border-color: rgba(255,209,102,.36); }
.companion-form { display: grid; gap: 14px; max-width: 860px; padding: clamp(20px, 4vw, 32px); border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: rgba(255,255,255,.07); }
.companion-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.companion-form label { display: grid; gap: 8px; color: var(--ss-text); font-weight: 850; }
.companion-form input, .companion-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 13px 14px; color: var(--ss-text); background: rgba(5,10,19,.72); font: inherit; }
.companion-form textarea { resize: vertical; min-height: 180px; }
.companion-form .form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.companion-form .form-note { margin: 0; color: var(--soft); line-height: 1.45; }
.companion-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 42px 0 52px; color: var(--ss-muted); }
.companion-footer a { color: var(--ss-text); text-decoration: none; } .companion-footer em { color: rgba(255,255,255,.25); font-style: normal; margin: 0 6px; }
@media (max-width: 980px) { .companion-hero, .companion-demo-grid { grid-template-columns: 1fr; } .companion-panel { min-height: auto; } .companion-card-grid.three, .companion-link-grid, .email-choice-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .companion-copy h1 { font-size: clamp(38px, 12vw, 54px); } .companion-band { grid-template-columns: 1fr; } .screen-list div { grid-template-columns: 1fr; } .companion-form .form-row { grid-template-columns: 1fr; } }