:root {
  color-scheme: dark;
  --ink: #f8f8fa;
  --muted: #aeb4c0;
  --dim: #707887;
  --line: rgba(185, 195, 213, 0.12);
  --line-bright: rgba(114, 153, 218, 0.42);
  --surface: rgba(17, 20, 28, 0.92);
  --surface-solid: #11141c;
  --surface-high: #181c26;
  --ground: #0a0b10;
  --acid: #fb9a62;
  --acid-dark: rgba(251, 154, 98, 0.12);
  --cyan: #75b9f8;
  --warning: #ffd36d;
  --danger: #ff8b78;
  --radius: 10px;
  --shadow: 0 20px 54px rgba(0, 0, 0, 0.22);
  --font-body: "Inter", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: "Inter Tight", "Inter", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  font-synthesis: none;
}
.shot-window{box-sizing:border-box}
@media(max-width:680px){body:not(.platform-mode) .product-gallery-grid .shot-window,body:not(.platform-mode) .product-gallery-grid .shot-case-head{min-width:0;max-width:100%;box-sizing:border-box}body:not(.platform-mode) .product-gallery-grid .shot-case-head strong{overflow-wrap:anywhere}}
* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: clip; background: var(--ground); scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--ink); background: radial-gradient(ellipse 68% 58% at 88% -12%, rgba(76, 126, 202, .20) 0, transparent 65%), radial-gradient(ellipse 44% 34% at 6% 18%, rgba(46, 184, 206, .07) 0, transparent 72%), linear-gradient(112deg, #0d0e13 0%, #0a0c11 54%, #0d1017 100%); line-height: 1.5; }
body::before { position: fixed; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.013), transparent 28%, transparent 72%, rgba(116, 151, 211, .018)); content: ""; pointer-events: none; }
/* A quiet topology layer gives the public shell a product-security context
   without competing with the authored workspace surfaces. It is decorative
   only: no signal, tenant, or operational state is represented here. */
body::after {
  position: fixed;
  z-index: -3;
  inset: -12%;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(119, 189, 247, .06) 32.1%, transparent 32.35% 67%, rgba(249, 159, 111, .045) 67.1%, transparent 67.35%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(147, 180, 222, .035) 72px 73px),
    repeating-linear-gradient(0deg, transparent 0 72px, rgba(147, 180, 222, .028) 72px 73px),
    radial-gradient(circle at 72% 28%, rgba(83, 147, 224, .13), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(235, 125, 83, .07), transparent 30%);
  opacity: .44;
  pointer-events: none;
  transform: perspective(900px) rotateX(58deg) translate3d(0, 4%, 0) scale(1.35);
  transform-origin: center bottom;
  animation: assuranceLatticeDrift 28s ease-in-out infinite alternate;
}
/* The authenticated response desk is operational, not cinematic. Keep the
   shared topology as a quiet static orientation cue after sign-in so motion
   never competes with triage, review, or evidence work. */
body.platform-mode::after { animation: none; }
@keyframes assuranceLatticeDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 42px -24px, 24px 0, 0 -18px, -22px 16px, 18px -12px; }
}
body.platform-mode {
  --ink: hsl(0 0% 98%);
  --muted: hsl(0 0% 74%);
  --dim: #64748b;
  --line: hsl(220 14% 20%);
  --line-bright: rgba(59, 130, 246, .42);
  --surface: hsl(226 24% 13%);
  --surface-solid: hsl(226 24% 13%);
  --surface-high: hsl(220 16% 15%);
  --ground: hsl(226 32% 8%);
  --acid: #3b82f6;
  --acid-dark: rgba(59, 130, 246, .08);
  --cyan: #38bdf8;
  --warning: #fbbf24;
  --danger: #ef4444;
  --radius: 8px;
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, .6), 0 4px 6px -2px rgba(0, 0, 0, .4);
  color: var(--ink);
  background: var(--ground);
  font-family: var(--font-body);
}
button, input, textarea { font: inherit; }
button { color: inherit; }
a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
a { color: inherit; }
.hidden { display: none !important; }
.skip-link{position:fixed;z-index:100;top:-100px;left:12px;padding:10px 14px;border-radius:8px;background:var(--acid);color:#111118}.skip-link:focus-visible{top:12px;outline:2px solid var(--acid)}

.ambient { position: fixed; z-index: -1; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(150px); opacity: .014; pointer-events: none; }
.ambient-one { top: 10vh; right: -18vw; background: var(--cyan); }
.ambient-two { bottom: -22vw; left: -12vw; background: var(--acid); }

.site-header { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: none; margin: 0; padding: 18px clamp(28px, 4vw, 68px); border-bottom: 1px solid rgba(203, 219, 230, .08); background: linear-gradient(180deg, rgba(18, 22, 34, .92), rgba(11, 12, 17, .84)); box-shadow: inset 0 1px rgba(215, 242, 255, .045), 0 14px 30px rgba(2, 8, 20, .12); }
.site-header::after { position: absolute; right: clamp(28px, 4vw, 68px); bottom: -1px; width: 54px; height: 1px; background: linear-gradient(90deg, var(--acid), #5f94f3); content: ""; }
.public-reading-progress { position: absolute; z-index: 1; right: 0; bottom: -2px; left: 0; display: block; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.public-reading-progress i { display: block; width: var(--public-reading-progress, 0%); height: 100%; background: linear-gradient(90deg, #7ee9d0 0%, #70cfff 52%, #9a9cff 100%); box-shadow: 0 0 14px rgba(112, 207, 255, .5); transition: width .18s linear; }
body.landing-compact:not(.platform-mode) .public-reading-progress { opacity: .82; }
/* A direct setup link must remain usable even before the compact-mode
   controller finishes its first animation frame. The hash target is only a
   presentation fallback; it never changes the source or account boundary. */
body.landing-compact:not(.platform-mode) #landing-view > .early-access-panel:target {
  display: grid;
  content-visibility: visible !important;
}
.brand { display: inline-flex; justify-self: start; align-items: center; gap: 10px; min-height: 44px; border: 1px solid rgba(143,205,239,.12); border-radius: 12px; padding: 3px 12px 3px 5px; background: rgba(117,183,234,.08); box-shadow: inset 0 1px rgba(226,247,255,.06); text-decoration: none; transition: border-color .2s,background .2s,transform .2s; }
.brand:hover, .brand:focus-visible { border-color: rgba(143,205,239,.3); background: rgba(117,183,234,.14); transform: translateY(-1px); }
.brand img { width: 34px; height: 34px; filter: invert(1) brightness(1.9); }
.brand-wordmark { display: grid; gap: 1px; line-height: 1; }
.brand-wordmark strong { color: #f8f8fa; font-size: .9rem; font-weight: 780; letter-spacing: .04em; }
.brand-wordmark small { color: #8e96a2; font-size: .5rem; font-weight: 760; letter-spacing: .22em; text-transform: uppercase; }
.public-nav { display: flex; justify-self: center; gap: 32px; }
.public-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: #b8c4d5; font-size: .72rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; transition: color .16s ease; }
.public-nav a:hover { color: var(--ink); }
.public-nav a:focus-visible { color: var(--ink); outline: 0; box-shadow: 0 0 0 3px rgba(125, 211, 252, .18); }
.header-actions { display: flex; justify-self: end; align-items: center; gap: 14px; }
.trust-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(34,197,94,.2); border-radius: 999px; background: rgba(20,64,47,.18); font-size: .62rem; }
.trust-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px rgba(247,123,61,.62); }

.button { min-height: 44px; border: 1px solid transparent; border-radius: 5px; padding: 0 19px; cursor: pointer; font-size: .78rem; font-weight: 720; letter-spacing: .004em; transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .48; cursor: wait; }
.button-primary { background: linear-gradient(105deg, #f18b55, #f7a069); color: #18191e; box-shadow: 0 8px 20px rgba(242,138,85,.1); }
.button-primary:hover:not(:disabled) { background: linear-gradient(105deg, #ff9d66, #f8b17a); }
.button-outline { border-color: rgba(155, 197, 217, .34); background: rgba(82,183,232,.015); color: var(--ink); }
.button-outline:hover:not(:disabled) { border-color: rgba(123, 202, 235, .72); background: rgba(82,183,232,.06); }
.button-quiet { background: transparent; border-color: var(--line); color: var(--muted); }
.button-danger { background: rgba(255,139,120,.08); border-color: rgba(255,139,120,.3); color: #ffc2b8; }
.icon-button { flex: 0 0 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; }
.feedback-dialog .dialog-header > .icon-button,
.release-notes .section-heading > .icon-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.view { max-width: 1400px; margin: 0 auto; padding: 76px 52px 132px; }
section[id], h1[id], h2[id], h3[id] { scroll-margin-top: 100px; }
#landing-view { position: relative; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .94fr) minmax(500px, 1.06fr); gap: clamp(48px, 6vw, 92px); align-items: start; min-height: 590px; overflow: clip; }
.hero-grid::before { position: absolute; top: -10px; left: 0; width: min(265px, 29%); border-top: 1px solid rgba(135, 195, 221, .13); content: ""; animation: heroRuleShift 9s ease-in-out infinite alternate; }
.hero-grid::after {
  position: absolute;
  z-index: -1;
  right: -9%;
  bottom: -24%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 10% 10%, rgba(76, 113, 182, .12), rgba(13, 18, 28, .02) 58%, transparent 70%);
  content: "";
  filter: blur(22px);
  animation: orbitDrift 18s ease-in-out infinite alternate;
}

.landing-depth {
  position: relative;
  contain: paint;
  min-height: 540px;
  border: 1px solid rgba(128, 170, 213, .26);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(86, 171, 236, .54), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(126, 96, 236, .34), transparent 43%),
    linear-gradient(138deg, rgba(9, 15, 26, .88), rgba(7, 11, 19, .98));
  --landing-progress: 0;
}

.landing-journey {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-bottom: 12px;
  padding: 12px 15px 13px;
  border-radius: 10px;
  border: 1px solid rgba(140, 190, 224, .12);
  background: linear-gradient(90deg, rgba(11, 22, 35, .52), rgba(11, 22, 35, .11) 82%, transparent);
  box-shadow: inset 3px 0 rgba(125, 211, 252, .24);
  backdrop-filter: none;
  isolation: isolate;
}

.landing-journey::before {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 96% 4%, rgba(255, 177, 131, .15), transparent 56%);
  opacity: .32;
  pointer-events: none;
  content: "";
}

.landing-journey-stage {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  color: #89c7ef;
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 1;
}

.landing-journey-track {
  position: relative;
  height: 3px;
  margin: 9px 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.landing-journey-track i {
  position: absolute;
  inset: 0 100% 0 0;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, #f89a63, #77b9f5 58%, #cbe0ff);
  transition: width .35s cubic-bezier(.16, 1, .3, 1);
}

.landing-journey-copy {
  position: relative;
  margin: 0;
  min-height: 35px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 430;
  line-height: 1.5;
  z-index: 1;
}

.landing-journey[data-journey-stage="1"] {
  border-color: rgba(130, 193, 236, .33);
  --journey-accent: #88c6ec;
}

.landing-journey[data-journey-stage="2"] {
  border-color: rgba(254, 165, 123, .33);
  --journey-accent: #feab7c;
}

.landing-journey[data-journey-stage="3"] {
  border-color: rgba(130, 194, 250, .33);
  --journey-accent: #82d0fd;
}

.landing-journey[data-journey-stage="4"] {
  border-color: rgba(255, 200, 130, .36);
  --journey-accent: #ffc7a8;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .3), 0 0 28px rgba(255, 183, 130, .08);
}

.landing-journey[data-journey-stage] .landing-journey-stage,
.landing-journey[data-journey-stage] .landing-journey-track i {
  color: var(--journey-accent);
}

.landing-journey[data-journey-stage] .landing-journey-track i {
  background: linear-gradient(90deg, var(--journey-accent), #6aa3f5 56%, #c4dcff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--journey-accent) 44%, transparent);
}

.landing-depth::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 22%, transparent 74%, rgba(255, 255, 255, .04)),
    repeating-linear-gradient(118deg, transparent 0 58px, rgba(125, 196, 235, .028) 59px, transparent 60px),
    radial-gradient(circle at 82% 16%, rgba(101, 177, 240, .3), transparent 56%);
  opacity: 0.94;
  content: "";
  transition: opacity .6s ease, transform .6s ease;
  transform: translateY(calc(var(--landing-progress, 0) * -12px));
  background-size: 100% 100%, 150% 150%, 130% 130%;
  animation: heroAtmosphereShift 15s ease-in-out infinite alternate;
}
.landing-depth::after {
  position: absolute;
  top: -12%;
  left: -9%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 170, 120, .18), transparent 58%),
    conic-gradient(from 218deg at 50% 50%, transparent 0deg, rgba(113, 216, 255, .11) 46deg, transparent 92deg, rgba(159, 132, 255, .1) 164deg, transparent 224deg);
  filter: blur(1px);
  transform: scale(calc(1 + clamp(0, var(--landing-progress, 0), 1) * 0.08));
  opacity: calc(0.36 + clamp(0, var(--landing-progress, 0), 1) * 0.14);
  content: "";
  background-size: 100% 100%, 160% 160%;
  background-position: 50% 50%, 0% 0%;
  animation: heroOrbitalGlow 19s ease-in-out infinite alternate;
}

@keyframes heroAtmosphereShift {
  from { background-position: 0 0, 0% 0%; }
  to { background-position: 0 0, 18% 12%; }
}

@keyframes heroOrbitalGlow {
  from { background-position: 50% 50%, 0% 0%; }
  to { background-position: 52% 48%, 24% 16%; }
}

.landing-depth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  opacity: .94;
  transition: opacity .35s ease;
}

.landing-layer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  mix-blend-mode:screen;
  transition: transform 0.25s linear;
  transform: translate3d(0, 0, 0);
}

.landing-layer.layer-a {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), transparent 62%),
    radial-gradient(circle at 20% 20%, rgba(255, 190, 140, .2), transparent 48%);
  opacity: .3;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .12) 72%);
}

.landing-layer.layer-b {
  background:
    linear-gradient(130deg, transparent 25%, rgba(117, 185, 248, .12)),
    radial-gradient(circle at 100% 0%, rgba(98, 159, 231, .14), transparent 52%);
  opacity: .25;
}

.landing-layer.layer-c {
  background:
    repeating-linear-gradient(128deg, rgba(112, 207, 255, .04), rgba(112, 207, 255, .04) 1px, transparent 1px, transparent 24px),
    radial-gradient(circle at 42% 78%, rgba(141, 196, 231, .14), transparent 58%);
  opacity: .22;
}

.landing-layer.layer-d {
  background:
    radial-gradient(circle at 70% 14%, rgba(243, 154, 109, .18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .07) 100%);
  opacity: .17;
}

.hero-copy, .signal-panel {
  z-index: 1;
}

.hero-glow {
  position: absolute;
  right: -14%;
  top: -13%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 17%, rgba(117, 185, 248, .16), rgba(117, 185, 248, 0) 64%);
  filter: blur(8px);
  opacity: .44;
  pointer-events: none;
}
.brand-case { text-transform: none; }
.eyebrow, .nav-kicker { margin: 0 0 20px; color: #f5a176; font-size: .61rem; font-weight: 780; letter-spacing: .205em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1, h2, h3, h4, .brand-wordmark strong { font-family: var(--font-title); }
h1, h2, h3, .section-heading h2 { text-wrap: balance; }
.hero-copy h1 { max-width: 655px; margin-bottom: 27px; font-size: clamp(2.95rem, 3.78vw, 4.05rem); line-height: 1.045; letter-spacing: -.058em; font-weight: 650; text-wrap: balance; }
.hero-copy h1 span {
  color: #f0a074;
  font-style: italic;
  font-weight: 580;
  background: linear-gradient(105deg, #f0a074 0%, #a7a3ff 48%, #72dfd1 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroPromiseShift 16s ease-in-out infinite alternate;
}
@keyframes heroPromiseShift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 span { background-position: 50% 50%; animation: none; }
}
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 22px; }
.hero-metric { position: relative; overflow: hidden; border: 1px solid rgba(129, 188, 232, .12); border-radius: 12px; padding: 12px 13px; background: linear-gradient(140deg, rgba(16, 24, 36, .54), rgba(11, 16, 24, .82)); transition: border-color .24s ease, background .24s ease, transform .24s ease, box-shadow .24s ease; }
.hero-metric::after { position: absolute; right: 15px; bottom: 13px; left: 15px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(240, 160, 116, .72), rgba(120, 205, 237, .42), transparent); content: ""; opacity: .35; transform: scaleX(.38); transform-origin: left center; transition: opacity .24s ease, transform .24s ease; }
.hero-metric:hover, .hero-metric:focus-within { border-color: rgba(145, 205, 236, .36); background: linear-gradient(140deg, rgba(22, 35, 51, .8), rgba(11, 18, 28, .96)); box-shadow: 0 14px 32px rgba(0, 0, 0, .2); transform: translateY(-3px); }
.hero-metric:hover::after, .hero-metric:focus-within::after { opacity: .8; transform: scaleX(1); }
.hero-metric-kicker { display: inline-block; margin-bottom: 9px; color: #8cc8ec; font-size: .54rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.hero-metric strong { display: block; margin-bottom: 4px; font-size: .96rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.hero-copy h1,
.signal-intro h2,
.platform-story-intro h2,
.section-heading h2 { text-wrap: balance; }
.hero-lede { max-width: 590px; color: #e1e4e9; font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.7; }
.hero-support { max-width: 555px; margin: 17px 0 0; color: #a6aeba; font-size: .84rem; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }

#response-lifecycle {
  position: relative;
  --workspace-probe-depth: 0;
  transition: transform .28s ease;
  transform: translate3d(0, calc(var(--workspace-probe-depth, 0) * -12px), 0);
}

#response-lifecycle .response-stage {
  transition: background .35s ease, transform .35s ease, border-color .35s ease;
}
#response-lifecycle .response-stage.is-active {
  transform: translate3d(0, calc(var(--workspace-probe-depth, 0) * -2px), 0);
}

#response-lifecycle .proof-line strong {
  position: relative;
}
#response-lifecycle .proof-line strong::before {
  position: absolute;
  top: 50%;
  left: -18px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffb089;
  transform: translateY(-50%);
  content: "";
}
/* Keep content visible if the enhancement script is unavailable. The reveal
   treatment only becomes active after the runtime opts in on the document. */
body.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px) scale(0.995);
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-delay, 0s));
}
body.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
.domain-form { max-width: 760px; margin-top: 28px; }
.source-free-account-action { margin-top: 10px; }
.domain-form > label, .verification-form > label, .dialog-shell > label { display: block; margin-bottom: 9px; color: #dedee6; font-size: .83rem; font-weight: 650; }
.input-combo { display: flex; gap: 10px; padding: 8px; border: 1px solid rgba(82,183,232,.52); border-radius: 8px; background: rgba(4,14,23,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 16px 50px rgba(0,0,0,.28); }
.input-combo input { flex: 1; min-width: 0; border: 0; padding: 0 13px; color: var(--ink); background: transparent; outline: 0; font-size: 1.03rem; }
.input-combo input::placeholder, input::placeholder, textarea::placeholder { color: #737583; }
.field-label{margin:0;color:#d6e3eb;font-size:.76rem;font-weight:680}
.source-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.source-input-grid label{display:grid;gap:7px;color:#d6e3eb;font-size:.76rem;font-weight:620}
.source-input-grid input{width:100%;border:1px solid rgba(117,185,248,.28);border-radius:7px;padding:12px;color:var(--ink);background:rgba(4,14,23,.56);outline:0;font-size:.92rem}
.source-input-grid input:focus { border-color: rgba(141, 226, 255, .78); box-shadow: 0 0 0 3px rgba(117, 211, 252, .11); }
.field-note { margin: 10px 2px 0; color: var(--muted); font-size: .78rem; }

.signal-panel { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(148, 170, 208, .22); border-radius: 14px; background: linear-gradient(141deg, rgba(28, 34, 47, .98), rgba(12, 16, 24, .99) 72%); box-shadow: 0 34px 82px rgba(0,0,0,.28); }
.signal-panel::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.032), transparent 45%), radial-gradient(circle at 100% 0%, rgba(89, 135, 214, .12), transparent 43%); content: ""; }
.signal-panel::after { position: absolute; z-index: 1; top: 0; right: 30px; left: 30px; height: 2px; background: linear-gradient(90deg, #f18b55 0%, #efa77d 30%, #75b9f8 100%); content: ""; }
.signal-stage-marker {
  display: inline-flex;
  margin: 16px 0 0 26px;
  max-width: 210px;
  padding: 7px 12px;
  border: 1px solid rgba(240, 156, 109, .35);
  border-radius: 999px;
  color: #f4a57d;
  font-size: .59rem;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.signal-header { display: flex; justify-content: space-between; padding: 20px 30px 16px; border-bottom: 1px solid rgba(179, 215, 232, .1); color: #aeb5c1; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.signal-intro { padding: 30px 30px 23px; }
.workspace-kicker { margin: 0 0 8px !important; color: #8ec9ef !important; font-size: .62rem !important; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.signal-intro h2 { max-width: 500px; margin: 0 0 13px; font-size: clamp(1.62rem, 2.05vw, 2.12rem); line-height: 1.1; letter-spacing: -.047em; font-weight: 650; }
.signal-intro p { max-width: 500px; margin: 0; color: #b8c1ce; font-size: .81rem; line-height: 1.65; }
.workspace-lineage { position: relative; margin: 0 30px 16px; padding: 12px 14px 11px; overflow: hidden; border: 1px solid rgba(126, 201, 234, .18); border-radius: 9px; background: linear-gradient(110deg, rgba(18, 36, 52, .58), rgba(9, 18, 29, .48)); --lineage-progress: 0; }
.workspace-lineage::before { position: absolute; top: 46px; right: 10%; left: 10%; height: 1px; background: rgba(124, 197, 231, .2); content: ""; }
.workspace-lineage::after { position: absolute; top: 45px; left: 10%; width: calc(var(--lineage-progress, 0) * 80%); height: 2px; border-radius: 999px; background: linear-gradient(90deg, #79c9ec, #a8e3d2); box-shadow: 0 0 12px rgba(119, 210, 226, .28); content: ""; transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.workspace-lineage-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; color: #819bae; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.workspace-lineage-head span:last-child { color: #9de2ce; }
.workspace-lineage-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; }
.workspace-lineage-node { display: grid; justify-items: center; gap: 7px; min-width: 0; border: 0; padding: 0; color: #7e90a0; background: transparent; cursor: pointer; font: inherit; font-size: .55rem; text-transform: uppercase; transition: color .25s ease, transform .25s ease; }
.workspace-lineage-node:hover { color: #e2f6ff; transform: translateY(-2px); }
.workspace-lineage-node:focus-visible { outline: 2px solid #9de8d5; outline-offset: 5px; border-radius: 8px; }
.workspace-lineage-node i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(130, 205, 233, .36); border-radius: 50%; background: #0c1825; color: #8fd5ef; font: 700 .45rem ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
.workspace-lineage-node b { overflow: hidden; max-width: 100%; color: #b8c8d5; font-size: .52rem; font-weight: 700; letter-spacing: .065em; text-overflow: ellipsis; white-space: nowrap; }
.workspace-lineage-node[aria-pressed="true"] { color: #e7fbf4; }
.workspace-lineage-node[aria-pressed="true"] i { box-shadow: 0 0 0 4px rgba(111, 222, 197, .1), 0 0 22px rgba(111, 222, 197, .24); }
.workspace-lineage[data-lineage-stage="0"] .workspace-lineage-node:nth-child(1) i,
.workspace-lineage[data-lineage-stage="1"] .workspace-lineage-node:nth-child(-n+2) i,
.workspace-lineage[data-lineage-stage="2"] .workspace-lineage-node:nth-child(-n+3) i,
.workspace-lineage[data-lineage-stage="3"] .workspace-lineage-node i { border-color: rgba(155, 235, 214, .72); background: rgba(47, 117, 111, .44); color: #c7f6e4; box-shadow: 0 0 0 3px rgba(111, 222, 197, .07), 0 0 15px rgba(111, 222, 197, .18); }
.workspace-lineage[data-lineage-stage="0"] .workspace-lineage-node:nth-child(1) b,
.workspace-lineage[data-lineage-stage="1"] .workspace-lineage-node:nth-child(-n+2) b,
.workspace-lineage[data-lineage-stage="2"] .workspace-lineage-node:nth-child(-n+3) b,
.workspace-lineage[data-lineage-stage="3"] .workspace-lineage-node b { color: #d6f5e9; }
.workspace-preview { position: relative; margin: 0 30px 4px; overflow: hidden; border: 1px solid rgba(138, 181, 222, .18); border-radius: 10px; background: rgba(5, 12, 20, .46); transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease; }
.workspace-preview::after { position: absolute; top: 0; bottom: 0; left: -34%; width: 24%; background: linear-gradient(90deg, transparent, rgba(164, 224, 255, .14), transparent); content: ""; opacity: 0; pointer-events: none; transform: skewX(-18deg); }
.workspace-preview:hover, .workspace-preview:focus-within { border-color: rgba(143, 211, 243, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 42px rgba(0, 0, 0, .2), 0 0 0 1px rgba(118, 199, 239, .08); transform: translateY(-2px); }
.workspace-preview:hover::after, .workspace-preview:focus-within::after { opacity: 1; animation: workspaceSurfaceSweep 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes workspaceSurfaceSweep { from { left: -34%; } to { left: 118%; } }
.workspace-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid rgba(179, 215, 232, .1); color: #aeb8c4; font-size: .62rem; font-weight: 740; letter-spacing: .075em; text-transform: uppercase; }
.workspace-preview-bar code { color: #79baf0; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }
.workspace-preview-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(185px, .9fr); }
.workspace-decision { padding: 19px 18px; border-right: 1px solid rgba(179, 215, 232, .1); }
.workspace-decision > span, .workspace-context span { display: block; color: #7f8997; font-size: .61rem; font-weight: 730; letter-spacing: .075em; text-transform: uppercase; }
.workspace-decision strong { display: block; margin-top: 8px; font-size: 1rem; letter-spacing: -.028em; }
.workspace-decision p { margin: 8px 0 12px; color: #acb6c3; font-size: .72rem; line-height: 1.55; }
.workspace-decision b { display: inline-flex; padding: 5px 8px; border: 1px solid rgba(242, 159, 105, .28); border-radius: 999px; color: #f2b28c; background: rgba(242, 138, 85, .07); font-size: .57rem; font-weight: 760; letter-spacing: .055em; text-transform: uppercase; }
.workspace-context { display: grid; align-content: center; gap: 0; }
.workspace-context div { padding: 10px 15px; border-bottom: 1px solid rgba(179, 215, 232, .1); }
.workspace-context div:last-child { border-bottom: 0; }
.workspace-context strong { display: block; margin-top: 3px; color: #e1e6ec; font-size: .73rem; font-weight: 630; }
.proof-line { display: flex; justify-content: space-between; gap: 15px; padding: 18px 30px 20px; border-top: 1px solid rgba(179, 215, 232, .1); background: rgba(255,255,255,.014); color: #a8b0bc; font-size: .65rem; }
.proof-line strong { color: #efae89; white-space: nowrap; }

.surface, .preview-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.platform-story { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(46px, 6vw, 90px); margin-top: 108px; padding: 72px 0 28px; border-top: 1px solid rgba(155, 197, 217, .14); }
.platform-story::before { position: absolute; top: -43px; left: 69%; width: 1px; height: 43px; background: linear-gradient(180deg, transparent, rgba(240, 157, 112, .7) 72%, rgba(117, 185, 248, .42)); content: ""; pointer-events: none; }
.platform-story::after { position: absolute; top: -47px; left: calc(69% - 3px); width: 7px; height: 7px; border: 1px solid rgba(240, 157, 112, .75); border-radius: 50%; background: #0e141d; box-shadow: 0 0 0 4px rgba(240, 157, 112, .07), 0 0 14px rgba(240, 157, 112, .28); content: ""; pointer-events: none; }
.platform-story-intro { position: relative; }
.platform-story-intro::after { display: none; }
.response-map { position: relative; width: min(100%, 420px); margin-top: 42px; padding: 15px 16px 13px; overflow: hidden; border: 1px solid rgba(124, 180, 220, .2); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 31, 45, .9), rgba(8, 13, 21, .98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 60px rgba(0, 0, 0, .18); }
.response-map::before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(134, 186, 223, .045) 0 1px, transparent 1px 35px), repeating-linear-gradient(0deg, rgba(134, 186, 223, .04) 0 1px, transparent 1px 35px); content: ""; pointer-events: none; }
.response-map-head, .response-map-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8192a4; font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .085em; text-transform: uppercase; }
.response-map-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 28px 0 25px; }
.response-map-track::before { position: absolute; top: 15px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .8), rgba(123, 198, 235, .62), rgba(151, 215, 183, .72)); content: ""; opacity: .6; }
.response-map-track::after { position: absolute; z-index: 0; top: 14px; left: 8%; width: calc(var(--response-map-progress, 0) * 84%); height: 3px; border-radius: 999px; background: linear-gradient(90deg, #f0a073, #82c8ed); box-shadow: 0 0 12px rgba(240, 160, 116, .28); content: ""; pointer-events: none; transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.response-map-track button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: 10px; color: #9eabb9; background: transparent; font: inherit; text-align: center; cursor: pointer; transition: background .22s ease, box-shadow .22s ease, transform .22s ease; }
.response-map-track button > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(133, 190, 226, .33); border-radius: 50%; background: #0b121c; color: #80c6e9; font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.response-map-track button:focus-visible { outline: 1px solid rgba(123, 198, 235, .78); outline-offset: 4px; border-radius: 10px; }
.response-map-track button strong { color: #dce4ec; font-size: .67rem; letter-spacing: -.015em; }
.response-map-track button small { color: #7f8a98; font-size: .57rem; }
.response-map-track button:hover > span, .response-map-track button:focus-visible > span, .response-map-track button.is-active > span { border-color: #f0a073; background: #17202b; color: #f4b28c; box-shadow: 0 0 0 4px rgba(240, 157, 112, .08), 0 0 18px rgba(240, 157, 112, .18); }
.response-map-track button.is-active strong { color: #f2b28c; }
.response-map-track button.is-active { background: linear-gradient(180deg, rgba(240, 160, 116, .15), rgba(125, 211, 252, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065); transform: translateY(-2px); }
.response-map-track button:hover,
.response-map-track button:focus-visible { background: rgba(125, 211, 252, .065); }
.response-map-foot { padding-top: 10px; border-top: 1px solid rgba(155, 197, 217, .12); color: #8898a8; font: 500 .6rem ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.response-map-pulse { width: 8px; height: 8px; border: 1px solid rgba(240, 157, 112, .78); border-radius: 50%; box-shadow: 0 0 0 5px rgba(240, 157, 112, .07), 0 0 16px rgba(240, 157, 112, .32); animation: responseMapPulse 2.7s ease-in-out infinite; }
@keyframes responseMapPulse { 0%, 100% { transform: scale(.82); opacity: .52; } 50% { transform: scale(1.14); opacity: 1; } }
.platform-story-intro h2 { max-width: 585px; margin: 0 0 17px; font-size: clamp(2.15rem, 3.35vw, 3.2rem); line-height: 1.05; letter-spacing: -.052em; }
.platform-story-intro > p:last-child { max-width: 610px; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.platform-story-grid { position: relative; display: grid; gap: 0; border-top: 1px solid var(--line); }
.platform-story-grid::before { position: absolute; top: 30px; bottom: 30px; left: 17px; width: 1px; background: linear-gradient(180deg, rgba(123, 199, 231, .65), rgba(123, 199, 231, .08) 80%, transparent); content: ""; pointer-events: none; }
.platform-story-grid article { position: relative; min-height: 132px; padding: 28px 18px 26px 61px; border-bottom: 1px solid var(--line); transition: background .18s ease, padding-left .18s ease; }
.platform-story-grid article::before { position: absolute; top: 32px; left: 28px; width: 9px; height: 9px; border: 1px solid rgba(240, 157, 112, .84); border-radius: 50%; background: #101720; box-shadow: 0 0 0 4px rgba(240, 157, 112, .06), 0 0 16px rgba(240, 157, 112, .18); content: ""; }
.platform-story-grid article:hover { padding-left: 68px; background: rgba(49, 70, 95, .11); }
.platform-story-grid article.is-active { background: linear-gradient(90deg, rgba(240, 157, 112, .075), rgba(49, 70, 95, .08) 58%, transparent); }
.platform-story-grid article.is-active::after { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, #f0a073, rgba(240, 160, 116, .08)); content: ""; }
.platform-story-grid h3 { margin: 0 0 8px; font-size: 1.08rem; letter-spacing: -.022em; }
.platform-story-grid p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.story-index { position: absolute; top: 27px; left: 6px; color: #7bc7e7; font: 700 .67rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.context-atlas { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(46px, 7vw, 110px); margin-top: 64px; padding: 54px 0 30px; border-top: 1px solid rgba(155, 197, 217, .14); background: linear-gradient(180deg, rgba(17, 24, 35, .12), transparent 86%); }
.context-atlas::before { position: absolute; top: 118px; right: 12%; width: 44%; height: 1px; background: linear-gradient(90deg, transparent, rgba(116, 187, 239, .34), transparent); content: ""; transform: rotate(-12deg); pointer-events: none; }
.context-atlas::after { position: absolute; z-index: 0; top: 51%; left: 39%; width: 9%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .42), rgba(125, 196, 235, .36), transparent); box-shadow: 0 0 14px rgba(125, 196, 235, .1); content: ""; opacity: .55; transition: opacity .5s ease, width .5s ease; pointer-events: none; }
.context-atlas.is-active::after { width: 11%; opacity: .8; }
.context-atlas-intro h2 { max-width: 520px; margin: 0 0 18px; font-size: clamp(2.25rem, 3.4vw, 3.35rem); line-height: 1; letter-spacing: -.06em; }
.context-atlas-intro > p:not(.eyebrow) { max-width: 510px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.context-atlas-boundary { display: block; max-width: 430px; margin-top: 26px; padding-left: 14px; border-left: 1px solid rgba(240, 157, 112, .7); color: #9daab8; font-size: .71rem; line-height: 1.5; }
.context-atlas-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.context-atlas-grid::before, .context-atlas-grid::after { position: absolute; z-index: 0; content: ""; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.context-atlas-grid::before { top: 50%; right: 11%; left: 11%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .72) 25%, rgba(125, 196, 235, .6) 75%, transparent); background-size: 220% 100%; }
.context-atlas-grid::after { top: 16%; bottom: 16%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(125, 196, 235, .58) 25%, rgba(240, 157, 112, .58) 75%, transparent); background-size: 100% 220%; }
.context-atlas.is-active .context-atlas-grid::before, .context-atlas.is-active .context-atlas-grid::after { opacity: .8; animation: contextTrace 4.8s ease-in-out infinite; }
.context-atlas.is-active .context-atlas-grid::after { animation-delay: .7s; }
.context-node { position: relative; min-height: 158px; padding: 22px 20px 20px; border: 1px solid rgba(122, 176, 219, .17); border-radius: 11px; background: linear-gradient(145deg, rgba(19, 31, 45, .68), rgba(8, 13, 21, .85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.context-node::before { position: absolute; top: -1px; left: 18px; width: 54px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(125, 196, 235, .78), transparent); box-shadow: 0 0 12px rgba(125, 196, 235, .16); content: ""; opacity: .72; transition: width .2s ease, opacity .2s ease; }
.context-node:hover::before { width: 82px; opacity: 1; }
.context-node-supply::before { background: linear-gradient(90deg, rgba(240, 157, 112, .82), transparent); box-shadow: 0 0 12px rgba(240, 157, 112, .14); }
.context-node-signal::before { background: linear-gradient(90deg, rgba(137, 211, 177, .82), transparent); box-shadow: 0 0 12px rgba(137, 211, 177, .14); }
.context-node-obligation::before { background: linear-gradient(90deg, rgba(190, 164, 238, .82), transparent); box-shadow: 0 0 12px rgba(190, 164, 238, .14); }
.context-atlas.is-active .context-node { animation: contextNodePulse 4.8s ease-in-out infinite; }
.context-atlas.is-active .context-node:nth-child(2) { animation-delay: .55s; }
.context-atlas.is-active .context-node:nth-child(3) { animation-delay: 1.1s; }
.context-atlas.is-active .context-node:nth-child(4) { animation-delay: 1.65s; }
.context-node:hover { border-color: rgba(137, 202, 244, .42); background: linear-gradient(145deg, rgba(23, 42, 61, .75), rgba(8, 14, 23, .9)); transform: translateY(-3px); }
.context-node::after { position: absolute; width: 6px; height: 6px; border: 1px solid rgba(240, 157, 112, .8); border-radius: 50%; background: #111820; content: ""; }
.context-node-product::after { right: -4px; bottom: -4px; }
.context-node-supply::after { bottom: -4px; left: -4px; }
.context-node-signal::after { top: -4px; right: -4px; }
.context-node-obligation::after { top: -4px; left: -4px; }
.context-node-index { display: block; margin-bottom: 27px; color: #8bc5e8; font: 700 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.context-node h3 { margin: 0 0 9px; color: #e5ebf1; font-size: 1rem; letter-spacing: -.025em; }
.context-node p { margin: 0; color: #a2afbd; font-size: .78rem; line-height: 1.55; }
.context-node-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.context-node-tags li { padding: 5px 7px; border: 1px solid rgba(130, 190, 230, .2); border-radius: 999px; color: #83a9c1; background: rgba(7, 16, 26, .52); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.context-node-supply .context-node-tags li { border-color: rgba(240, 157, 112, .24); color: #c69a83; }
.context-node-signal .context-node-tags li { border-color: rgba(137, 211, 177, .24); color: #8fbca8; }
.context-node-obligation .context-node-tags li { border-color: rgba(190, 164, 238, .25); color: #b1a0cf; }
.customer-fit { margin-top: 98px; padding: 72px 0 28px; border-top: 1px solid rgba(155, 197, 217, .14); }
.customer-fit-intro { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 52px; align-items: start; }
.customer-fit-intro h2 { max-width: 640px; margin: 0; font-size: clamp(2rem, 3.4vw, 3.15rem); line-height: 1.03; letter-spacing: -.055em; }
.customer-fit-intro-actions { display: grid; align-content: start; justify-items: start; gap: 17px; }
.customer-fit-intro-actions p { max-width: 610px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.customer-fit-scale-link { min-height: 44px; padding: 8px 12px; font-size: .64rem; }
.customer-fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 1px solid rgba(155, 197, 217, .14); border-bottom: 1px solid rgba(155, 197, 217, .14); }
.customer-fit-grid article { position: relative; min-height: 214px; padding: 31px 28px 29px; border-right: 1px solid var(--line); }
.customer-fit-grid article:last-child { border-right: 0; }
.fit-index { display: block; margin-bottom: 25px; color: #82c7e6; font: 700 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.customer-fit-grid h3 { margin: 0 0 12px; font-size: 1.04rem; letter-spacing: -.022em; }
.customer-fit-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.62; }
.early-access-panel { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(340px,1.1fr); gap: 64px; margin-top: 56px; padding: 54px; border-color: rgba(123, 192, 221, .38); border-radius: 10px; background: linear-gradient(115deg, rgba(24, 51, 76, .9), rgba(8, 19, 34, .98)); }
.early-access-panel::before { position: absolute; top: 28px; right: 28px; left: 28px; height: 1px; background: linear-gradient(90deg, rgba(241,139,85,.78), rgba(117,185,248,.18) 48%, transparent); content: ""; }
.early-access-panel::after { position: absolute; right: 4%; bottom: -22%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(117, 185, 248, .11), transparent 68%); filter: blur(12px); content: ""; pointer-events: none; }
.early-access-panel[data-setup-route-stage="domain"]::before { background: linear-gradient(90deg, rgba(117, 185, 248, .82), rgba(117, 185, 248, .18) 48%, transparent); }
.early-access-panel[data-setup-route-stage="review"]::before { background: linear-gradient(90deg, rgba(240, 157, 112, .84), rgba(117, 185, 248, .22) 48%, transparent); }
.early-access-panel[data-setup-route-stage="access"]::before { background: linear-gradient(90deg, rgba(137, 211, 177, .82), rgba(117, 185, 248, .2) 48%, transparent); }
.early-access-panel[data-setup-route-stage="domain"] .setup-form-shell { border-color: rgba(117, 185, 248, .28); }
.early-access-panel[data-setup-route-stage="review"] .setup-form-shell { border-color: rgba(240, 157, 112, .3); }
.early-access-panel[data-setup-route-stage="access"] .setup-form-shell { border-color: rgba(137, 211, 177, .3); }
.early-access-panel h2 { max-width: 590px; margin: 0 0 10px; font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.12; }
.early-access-panel > div > p:last-child { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.setup-form-shell { position: relative; z-index: 1; padding: 20px; border: 1px solid rgba(132, 188, 227, .42); border-radius: 12px; background: linear-gradient(145deg, rgba(9, 24, 39, .74), rgba(9, 18, 31, .94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 22px 52px rgba(0, 0, 0, .26); }
.setup-form-shell:focus-within { border-color: rgba(117, 185, 248, .56); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 3px rgba(117, 185, 248, .1), 0 22px 54px rgba(0, 0, 0, .2); }
.setup-form-shell::after { position: absolute; right: 20px; bottom: 22px; left: 20px; height: 1px; background: radial-gradient(circle at 8% 50%, rgba(240, 157, 112, .82) 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, rgba(117, 185, 248, .66) 0 2px, transparent 3px), radial-gradient(circle at 92% 50%, rgba(137, 211, 177, .62) 0 2px, transparent 3px), linear-gradient(90deg, rgba(240, 157, 112, .16), rgba(117, 185, 248, .24), rgba(137, 211, 177, .16)); background-size: auto, auto, auto, 100% 1px; background-repeat: no-repeat; opacity: .7; content: ""; animation: setupBoundaryDrift 9s ease-in-out infinite alternate; pointer-events: none; }
.setup-handoff { display: grid; grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto; gap: 9px; align-items: center; margin: -2px 0 17px; color: #7690a4; font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .085em; text-transform: uppercase; }
.setup-handoff i { position: relative; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .55), rgba(117, 185, 248, .62), rgba(137, 211, 177, .46)); }
.setup-handoff i::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; border: 1px solid rgba(137, 211, 177, .7); border-radius: 50%; background: #111923; content: ""; }
.setup-handoff span:nth-of-type(2) { color: #c4a27f; }
.setup-handoff span:last-child { color: #91c6af; }
.setup-form-heading { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(155, 197, 217, .14); }
.setup-form-heading span { color: #e8eff4; font-size: .75rem; font-weight: 730; letter-spacing: .01em; }
.setup-form-heading small { color: #b6c9d8; font: 650 .58rem ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; }
.setup-form-shell .domain-form { margin-top: 0; }
.early-access-panel #public-secondary-source { width: 100%; min-height: 44px; }
.setup-form-shell .field-note { margin-bottom: 0; }
.setup-source-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.setup-source-examples > span { flex-basis: 100%; }
.setup-source-examples button { min-height: 44px; padding: 0 11px; border: 1px solid rgba(125, 211, 252, .2); border-radius: 9px; background: rgba(11, 27, 42, .72); }
.setup-source-examples button:hover:not(:disabled), .setup-source-examples button:focus-visible { border-color: rgba(125, 211, 252, .62); background: rgba(23, 56, 78, .78); }
.setup-source-kind { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 12px 2px 0; padding: 8px 11px; overflow-wrap: anywhere; border: 1px solid rgba(117, 185, 248, .24); border-radius: 12px; color: #c6d8e4; background: linear-gradient(105deg, rgba(18, 36, 53, .78), rgba(12, 25, 38, .52)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(2, 8, 15, .22); font: 650 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; line-height: 1.35; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease; }
.setup-source-kind::before { display: grid; flex: 0 0 auto; width: 14px; height: 14px; place-items: center; border: 1px solid rgba(117, 185, 248, .7); border-radius: 50%; color: #b9e9ff; background: rgba(117, 185, 248, .16); box-shadow: 0 0 9px rgba(117, 185, 248, .24); content: "→"; font: 800 .54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.setup-source-kind[data-kind="website"]::before { content: "W"; }
.setup-source-kind[data-kind="project"]::before { content: "P"; }
.setup-source-kind[data-kind="package"]::before { content: "@"; }
.setup-source-kind[data-kind="invalid"]::before,
.setup-source-kind[data-kind="error"]::before { content: "!"; }
.early-access-panel[data-setup-source-kind="error"] .setup-source-kind { border-color: rgba(232, 121, 103, .34); color: #f3a494; background: rgba(70, 28, 30, .28); }
.early-access-panel[data-setup-source-kind="error"] .setup-source-kind::before { border-color: rgba(232, 121, 103, .74); background: rgba(232, 121, 103, .28); box-shadow: 0 0 9px rgba(232, 121, 103, .26); }
.early-access-panel[data-setup-source-kind="invalid"] .setup-source-kind { border-color: rgba(232, 121, 103, .34); color: #f3a494; background: rgba(70, 28, 30, .28); }
.early-access-panel[data-setup-source-kind="invalid"] .setup-source-kind::before { border-color: rgba(232, 121, 103, .74); background: rgba(232, 121, 103, .28); box-shadow: 0 0 9px rgba(232, 121, 103, .26); }
.early-access-panel[data-setup-source-kind="project"] .setup-source-kind,
.early-access-panel[data-setup-source-kind="package"] .setup-source-kind { border-color: rgba(137, 211, 177, .3); color: #9bd5c0; background: rgba(18, 53, 48, .25); }
.early-access-panel[data-setup-source-kind="project"] .setup-source-kind::before,
.early-access-panel[data-setup-source-kind="package"] .setup-source-kind::before { border-color: rgba(137, 211, 177, .72); background: rgba(137, 211, 177, .26); box-shadow: 0 0 9px rgba(137, 211, 177, .25); }
.early-access-panel[data-setup-source-kind="website"] .setup-source-kind { border-color: rgba(240, 157, 112, .3); color: #f0b18e; background: rgba(61, 37, 29, .25); }
.early-access-panel[data-setup-source-kind="website"] .setup-source-kind::before { border-color: rgba(240, 157, 112, .74); background: rgba(240, 157, 112, .26); box-shadow: 0 0 9px rgba(240, 157, 112, .25); }
/* v3.0 source-path cue (2028.04.09): the bounded source classifier should
   carry through to the setup shell so visitors can see which review path they
   are about to use. This is a visual cue only; classification never proves
   ownership, creates a tenant, or changes the server decision. */
.early-access-panel[data-setup-source-kind="website"]::before { background: linear-gradient(90deg, rgba(240, 157, 112, .84), rgba(240, 157, 112, .18) 48%, transparent); }
.early-access-panel[data-setup-source-kind="website"] .setup-form-shell { border-color: rgba(240, 157, 112, .32); }
.early-access-panel[data-setup-source-kind="project"]::before,
.early-access-panel[data-setup-source-kind="package"]::before { background: linear-gradient(90deg, rgba(137, 211, 177, .84), rgba(137, 211, 177, .18) 48%, transparent); }
.early-access-panel[data-setup-source-kind="project"] .setup-form-shell,
.early-access-panel[data-setup-source-kind="package"] .setup-form-shell { border-color: rgba(137, 211, 177, .32); }
.early-access-panel[data-setup-source-kind="invalid"]::before,
.early-access-panel[data-setup-source-kind="error"]::before { background: linear-gradient(90deg, rgba(232, 121, 103, .82), rgba(232, 121, 103, .18) 48%, transparent); }
.early-access-panel[data-setup-source-kind="invalid"] .setup-form-shell,
.early-access-panel[data-setup-source-kind="error"] .setup-form-shell { border-color: rgba(232, 121, 103, .32); }
/* v3.0 active-handoff emphasis (2028.04.10): keep the three-step route
   legible as a route, but let the current stage lead. This is derived solely
   from the existing data-setup-route-stage marker and never advances a flow,
   proves identity, or grants access. */
.early-access-panel[data-setup-route-stage="domain"] .setup-handoff span:nth-of-type(1),
.early-access-panel[data-setup-route-stage="review"] .setup-handoff span:nth-of-type(2),
.early-access-panel[data-setup-route-stage="access"] .setup-handoff span:nth-of-type(3) {
  color: #edf7ff;
  text-shadow: 0 0 14px rgba(125, 211, 252, .24);
}
.early-access-panel[data-setup-route-stage="domain"] .setup-handoff i:nth-of-type(1),
.early-access-panel[data-setup-route-stage="review"] .setup-handoff i:nth-of-type(2) {
  background: linear-gradient(90deg, rgba(125, 211, 252, .82), rgba(240, 157, 112, .55));
  box-shadow: 0 0 10px rgba(125, 211, 252, .16);
}
.early-access-panel[data-setup-route-stage="access"] .setup-handoff i {
  background: linear-gradient(90deg, rgba(137, 211, 177, .65), rgba(125, 211, 252, .58));
}
/* v3.0 setup handoff continuity (2028.05.16): the active label follows the
   same stage signal as the route marker and form shell. Presentation only;
   no setup state, identity, or authorization semantics are changed. */
.early-access-panel[data-setup-route-stage="domain"] .setup-handoff span:nth-of-type(1) {
  color: #bceeff;
  text-shadow: 0 0 14px rgba(125, 211, 252, .24);
}
.early-access-panel[data-setup-route-stage="review"] .setup-handoff span:nth-of-type(2) {
  color: #f0b28f;
  text-shadow: 0 0 14px rgba(240, 157, 112, .24);
}
.early-access-panel[data-setup-route-stage="access"] .setup-handoff span:nth-of-type(3) {
  color: #b8f1df;
  text-shadow: 0 0 14px rgba(137, 211, 177, .24);
}
.setup-inspection { position: relative; margin-top: 25px; padding-top: 16px; border-top: 1px solid rgba(155, 197, 217, .12); }
.setup-inspection-label { display: block; margin-bottom: 11px; color: #9bb0bf; font: 650 .62rem ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; }
.setup-inspection ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.setup-inspection li { display: grid; gap: 7px; min-width: 0; padding: 10px 9px 9px; border: 1px solid rgba(132, 188, 227, .13); border-radius: 7px; background: rgba(14, 25, 37, .52); color: #aab8c6; font-size: .61rem; line-height: 1.35; }
.setup-inspection li:nth-child(2) { border-color: rgba(240, 157, 112, .2); }
.setup-inspection li:nth-child(3) { border-color: rgba(137, 211, 177, .2); }
.setup-inspection i { color: #82c8ed; font: 700 .51rem ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; letter-spacing: .08em; }
.setup-inspection li:nth-child(2) i { color: #f0a074; }
.setup-inspection li:nth-child(3) i { color: #89d3b1; }
.site-footer { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 62px; padding: 25px 0 10px; border-top: 1px solid rgba(155, 197, 217, .28); color: #718194; font-size: .67rem; letter-spacing: .02em; }
.site-footer-brand { color: #e6f1f6; font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { margin-left: auto; color: #bfe7f5; font-weight: 700; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #7bd8ef; text-decoration: underline; text-underline-offset: 4px; }
.preview-panel { position: relative; isolation: isolate; overflow: hidden; margin-top: 65px; padding: clamp(24px, 3vw, 36px); background: radial-gradient(circle at 92% 0, rgba(117, 185, 248, .11), transparent 34%), linear-gradient(145deg, rgba(19, 31, 44, .94), rgba(10, 15, 23, .99)); box-shadow: 0 24px 64px rgba(2, 8, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .035); }
.preview-panel::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 34%, rgba(117,185,248,.035)), repeating-linear-gradient(90deg, rgba(151,201,232,.025) 0 1px, transparent 1px 72px); background-size: auto, 72px 100%; content: ""; pointer-events: none; }
.preview-panel::after { position: absolute; top: 0; right: 30px; left: 30px; height: 1px; background: linear-gradient(90deg, rgba(240,157,112,.7), rgba(117,185,248,.22), transparent 76%); content: ""; pointer-events: none; }
.preview-source-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(117, 185, 248, .28); border-radius: 14px; background: linear-gradient(110deg, rgba(20, 40, 62, .8), rgba(11, 20, 32, .76)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 34px rgba(0, 0, 0, .16); animation: previewHorizonIn .42s cubic-bezier(.16, 1, .3, 1) both; }
.preview-source-identity.is-project { border-color: rgba(117, 224, 194, .26); background: linear-gradient(110deg, rgba(17, 52, 57, .72), rgba(11, 23, 31, .72)); }
.preview-source-identity.is-package { border-color: rgba(172, 151, 255, .36); background: linear-gradient(110deg, rgba(38, 34, 74, .76), rgba(14, 22, 40, .76)); }
.preview-source-mark { display: inline-grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(128, 210, 255, .65); border-radius: 10px; color: #b9efff; background: rgba(62, 166, 225, .16); font: 800 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 0 20px rgba(62, 166, 225, .16); }
.preview-source-identity.is-project .preview-source-mark { border-color: rgba(117, 224, 194, .66); color: #c5ffec; background: rgba(117, 224, 194, .14); box-shadow: 0 0 20px rgba(117, 224, 194, .14); }
.preview-source-identity.is-package .preview-source-mark { border-color: rgba(184, 164, 255, .72); color: #e0d8ff; background: rgba(133, 108, 235, .2); box-shadow: 0 0 22px rgba(133, 108, 235, .22); }
.preview-source-identity-copy { display: grid; gap: 2px; min-width: 0; }
.preview-source-kicker { color: #8ab9d2; font: 750 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.preview-source-identity-copy strong { overflow: hidden; color: #eef9ff; font-size: .96rem; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.preview-source-identity-copy small { overflow: hidden; color: #8fa9b9; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-source-identity-state { padding: 6px 8px; border: 1px solid rgba(164, 214, 194, .25); border-radius: 999px; color: #a4d6c2; background: rgba(164, 214, 194, .07); font: 750 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.preview-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.preview-overview-item { position: relative; display: grid; gap: 5px; min-height: 94px; padding: 15px 15px 13px; overflow: hidden; border: 1px solid rgba(132, 177, 218, .24); border-radius: 11px; background: linear-gradient(145deg, rgba(11, 23, 36, .72), rgba(8, 16, 26, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.preview-overview-item::before { position: absolute; top: 0; right: 17%; left: 0; height: 1px; background: linear-gradient(90deg, rgba(131, 201, 239, .72), transparent); content: ""; }
.preview-overview-signals::before { background: linear-gradient(90deg, rgba(240, 160, 116, .78), transparent); }
.preview-overview-review::before { background: linear-gradient(90deg, rgba(164, 214, 194, .78), transparent); }
.preview-overview-review { border-color: rgba(164, 214, 194, .3); background: linear-gradient(145deg, rgba(16, 39, 37, .5), rgba(8, 16, 26, .58)); }
.preview-overview-label { color: #8298aa; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.preview-overview-value { color: #ecf5fa; font-size: 1.12rem; font-weight: 720; letter-spacing: -.025em; }
.preview-overview-signals .preview-overview-value { color: #f4b18f; }
.preview-overview-review .preview-overview-value { color: #a4d6c2; font-size: .94rem; }
.preview-overview-detail { overflow: hidden; color: #728699; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

/* v3.0 public-preview evidence spine (2028.08.106): connect the existing
   source identity, review summary, and next-step card into one visual path.
   The spine is pointer-inert presentation only; it carries no signal,
   tenant, authorization, or workflow state. */
.preview-panel #preview-content { position: relative; }
.preview-panel #preview-content::before {
  position: absolute;
  z-index: 0;
  top: 18px;
  bottom: 22px;
  left: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(117, 185, 248, .55), rgba(164, 214, 194, .36) 58%, rgba(240, 157, 112, .48));
  box-shadow: 0 0 14px rgba(117, 185, 248, .14);
  content: "";
  pointer-events: none;
}
.preview-panel #preview-content > * { position: relative; z-index: 1; }
.preview-panel #preview-content > .preview-source-identity,
.preview-panel #preview-content > .preview-overview,
.preview-panel #preview-content > .preview-next { margin-left: 28px; }
.preview-panel #preview-content > .preview-source-identity::before,
.preview-panel #preview-content > .preview-next::before {
  position: absolute;
  top: 50%;
  left: -14px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(138, 211, 196, .82);
  border-radius: 50%;
  background: #102c32;
  box-shadow: 0 0 12px rgba(138, 211, 196, .28);
  content: "";
  transform: translate(-50%, -50%);
}
.preview-panel #preview-content > .preview-next::before {
  border-color: rgba(240, 157, 112, .86);
  background: #35231f;
  box-shadow: 0 0 12px rgba(240, 157, 112, .3);
}
@media (max-width: 680px) {
  .product-shot:not(.is-spotlight){display:none}
  .preview-panel #preview-content > .preview-source-identity,
  .preview-panel #preview-content > .preview-overview,
  .preview-panel #preview-content > .preview-next { margin-left: 20px; }
  .preview-panel #preview-content::before { left: 12px; }
  .preview-panel #preview-content > .preview-source-identity::before,
  .preview-panel #preview-content > .preview-next::before { left: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-panel #preview-content::before { box-shadow: none; }
}
.feedback-intro > p:not(.eyebrow) { max-width: 500px; color: var(--muted); font-size: .94rem; line-height: 1.68; }
.feedback-boundary { margin-top: 28px; padding-left: 15px; border-left: 1px solid rgba(242, 138, 85, .7); color: #91a1ad !important; font-size: .76rem !important; line-height: 1.58 !important; }
.feedback-form { display: grid; gap: 14px; padding: 27px; border: 1px solid rgba(141, 193, 215, .18); border-radius: 10px; background: linear-gradient(150deg, rgba(16, 29, 40, .88), rgba(8, 14, 22, .92)); box-shadow: 0 20px 54px rgba(0, 0, 0, .16); }
.feedback-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(155, 197, 217, .15); }
.feedback-form-heading span { color: #eff4f7; font-size: .9rem; font-weight: 700; letter-spacing: -.015em; }
.feedback-form-heading small { color: var(--dim); font-size: .67rem; letter-spacing: .045em; text-transform: uppercase; }
.feedback-form-heading b { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(240, 157, 112, .26); border-radius: 999px; color: #f0a074; background: rgba(240, 157, 112, .06); font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; white-space: nowrap; }
.feedback-submit-status { margin: 0; padding: 11px 13px; border: 1px solid rgba(117, 185, 248, .25); border-left: 2px solid #75b9f8; border-radius: 0 8px 8px 0; color: #b9d9ed; background: rgba(117, 185, 248, .06); font-size: .72rem; line-height: 1.5; }
.feedback-submit-status[data-state="working"] { border-color: rgba(117, 185, 248, .28); border-left-color: #75b9f8; }
.feedback-submit-status[data-state="success"] { border-color: rgba(139, 211, 177, .3); border-left-color: #8bd3b1; color: #bce9d3; background: rgba(139, 211, 177, .07); }
.feedback-submit-status[data-state="error"] { border-color: rgba(240, 157, 112, .3); border-left-color: #f0a074; color: #f3c1a7; background: rgba(240, 157, 112, .06); }
.feedback-form label { display: grid; gap: 8px; color: #dfe6eb; font-size: .77rem; font-weight: 700; letter-spacing: .01em; }
.feedback-form input, .feedback-form textarea, .feedback-form select { width: 100%; border: 1px solid rgba(155, 197, 217, .2); border-radius: 8px; padding: 11px 12px; color: var(--ink); background: rgba(4, 13, 20, .56); transition: border-color .16s ease, background .16s ease; }
.feedback-form input:focus, .feedback-form textarea:focus, .feedback-form select:focus { border-color: rgba(123, 202, 235, .7); background: rgba(4, 13, 20, .82); outline: 0; }
.feedback-form textarea { min-height: 112px; resize: vertical; }
.feedback-form .button { justify-self: start; margin-top: 4px; }
.feedback-screenshot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-screenshot-preview {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid rgba(128, 173, 214, .22);
  border-radius: 10px;
  background: rgba(11, 14, 20, .6);
}
.feedback-screenshot-preview img {
  max-width: 100%;
  width: 100%;
  border-radius: 9px;
  border: 1px solid rgba(155, 197, 217, .24);
}
.feedback-screenshot-preview p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}

.release-badge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(117, 185, 248, .3);
  border-radius: 999px;
  color: #b9d4ed;
  text-decoration: none;
  font-size: .55rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  font: 700 .55rem var(--font-body);
  background: rgba(10, 16, 25, .82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.release-badge:hover { border-color: rgba(117, 185, 248, .62); color: #e4f0fc; background: rgba(14, 27, 42, .9); box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 0 0 1px rgba(117, 185, 248, .08); transform: translateY(-1px); }
.release-badge:focus-visible { border-color: rgba(155, 230, 242, .86); box-shadow: 0 0 0 3px rgba(117, 185, 248, .22), 0 14px 34px rgba(0, 0, 0, .28); }
.release-badge:active { transform: translateY(0); }
.feedback-dialog-shell { max-height: calc(100vh - 28px); overflow: auto; }
.feedback-dialog-shell .feedback-form { margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.feedback-dialog-shell .feedback-boundary { margin: 0; }
.release-notes { width: min(720px, calc(100vw - 28px)); max-height: min(720px, calc(100vh - 28px)); overflow-y: auto; padding: 25px; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: rgba(117, 185, 248, .34) transparent; }
.release-notes .release-grid { display: grid; gap: 9px; margin-top: 20px; counter-reset: release-card; }
.release-card { position: relative; min-width: 0; padding: 16px 18px 16px 52px; border: 1px solid rgba(132, 177, 218, .18); border-radius: 10px; background: linear-gradient(145deg, rgba(17, 29, 42, .78), rgba(9, 14, 22, .88)); counter-increment: release-card; }
.release-card::before { position: absolute; top: 17px; left: 17px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(240, 157, 112, .5); border-radius: 50%; color: #f0a074; background: #151b25; content: counter(release-card, decimal-leading-zero); font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.release-card-kicker { display: block; margin-bottom: 6px; color: #82c8ed; font: 700 .53rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.release-card h3 { margin: 0 0 6px; color: #e9eff4; font-size: .92rem; letter-spacing: -.02em; }
.release-card p { margin: 0; color: #a8b5c2; font-size: .74rem; line-height: 1.55; }
.release-details { max-width: 58ch; margin: 4px 0 0; padding: 2px 0 0; color: #93a3b3; font-size: .7rem; line-height: 1.5; }
.release-details h4 { margin: 0 0 8px; color: #dbe6ee; font-size: .72rem; letter-spacing: .02em; }
.release-details ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; }
.release-details li { font-size: .7rem; line-height: 1.45; }
.release-notes .dialog-actions { position: sticky; bottom: -25px; z-index: 2; justify-content: flex-start; margin: 20px -25px -25px; padding: 14px 25px 25px; background: linear-gradient(180deg, rgba(14, 19, 28, .06), rgba(14, 19, 28, .98) 45%); }
.release-badge::before {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7bd8ef;
  content: "";
}
dialog::backdrop { background: rgba(3, 7, 12, .76); backdrop-filter: blur(7px) saturate(.82); }
.feedback-dialog { width: min(680px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow: hidden; padding: 0; border: 1px solid rgba(132, 177, 218, .28); border-radius: 16px; color: var(--ink); background: linear-gradient(145deg, rgba(20, 31, 44, .98), rgba(8, 13, 21, .99)); box-shadow: 0 32px 100px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .045); }
.feedback-dialog[open] { animation: dialogRise .24s cubic-bezier(.16, 1, .3, 1) both; }
.feedback-dialog-shell { position: relative; max-height: min(820px, calc(100vh - 28px)); padding: 27px 29px 104px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: rgba(117, 185, 248, .3) transparent; }
.feedback-dialog-shell::before { position: absolute; top: 0; right: 30px; left: 30px; height: 1px; background: linear-gradient(90deg, #f09d70, rgba(117, 185, 248, .72), transparent 82%); content: ""; pointer-events: none; }
.feedback-dialog-shell .dialog-header { position: sticky; z-index: 2; top: -27px; margin: -27px -29px 0; padding: 27px 29px 16px; background: linear-gradient(180deg, rgba(20, 31, 44, .99) 65%, rgba(20, 31, 44, .86), transparent); }
.feedback-dialog-shell .dialog-guidance { max-width: 560px; margin: 3px 0 18px; color: #b6c2ce; font-size: .82rem; line-height: 1.62; }
.feedback-dialog-shell .feedback-boundary { max-width: 590px; padding: 11px 13px; border: 1px solid rgba(240, 157, 112, .18); border-left: 2px solid rgba(240, 157, 112, .72); border-radius: 0 7px 7px 0; color: #aeb8c3 !important; background: rgba(240, 157, 112, .045); font-size: .7rem !important; line-height: 1.52 !important; }
.feedback-dialog-shell .feedback-form { gap: 16px; margin-top: 22px; }
.feedback-dialog-shell .feedback-form-heading { padding: 13px 0 14px; }
.feedback-dialog-shell .feedback-screenshot-actions .button {
  min-height: 44px;
  padding-inline: 13px;
  font-size: .68rem;
}
.feedback-dialog-shell .feedback-form input,
.feedback-dialog-shell .feedback-form select,
.feedback-dialog-shell .feedback-form > .button {
  min-height: 44px;
}
.hero-actions .button,
.input-combo > .button {
  min-height: 44px;
}
.feedback-dialog-shell .feedback-screenshot-hint { max-width: 560px; }
@keyframes dialogRise { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }

/* Public landing: a restrained editorial product page, separate from the operational workspace. */
body:not(.platform-mode) {
  /* v3.0 compositing boundary (2028.09.25): keep the public atmosphere's
     negative-z decorative layers inside the landing shell. */
  isolation: isolate;
  background:
    radial-gradient(ellipse 76% 58% at 82% -20%, rgba(68, 99, 152, .16), transparent 66%),
    radial-gradient(ellipse 44% 34% at 8% 34%, rgba(232, 128, 78, .035), transparent 76%),
    #0c0e13;
}
/* v3.0 landing atmosphere (2028.09.24): carry the product-security visual
   language beyond the hero card so the public route feels like one composed
   experience. This layer is decorative only: it contains no tenant, signal,
   telemetry, or operational-state semantics, and it does not add a request.
   The animation is deliberately slow and is disabled for reduced-motion users. */
body:not(.platform-mode)::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  display: block;
  background:
    radial-gradient(ellipse 48% 42% at 78% 12%, rgba(93, 145, 224, .12), transparent 72%),
    radial-gradient(ellipse 34% 38% at 14% 58%, rgba(238, 139, 95, .055), transparent 74%),
    linear-gradient(124deg, transparent 0 31%, rgba(126, 197, 239, .032) 31.2%, transparent 31.55% 68%, rgba(240, 157, 112, .025) 68.2%, transparent 68.55%);
  background-size: 130% 130%, 125% 125%, 180% 180%;
  opacity: .78;
  pointer-events: none;
  content: "";
  animation: publicAtmosphereShift 34s ease-in-out infinite alternate;
}
@keyframes publicAtmosphereShift {
  from { background-position: 0% 0%, 100% 20%, 0% 0%; }
  to { background-position: 14% 9%, 86% 8%, 8% -5%; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.platform-mode)::before { animation: none; }
}
body:not(.platform-mode) .ambient { display: none; }
.site-header { min-height: 72px; padding-top: 12px; padding-bottom: 12px; background: rgba(12, 14, 19, .8); backdrop-filter: blur(18px); }
.site-header::after { width: 64px; background: linear-gradient(90deg, var(--acid), rgba(117, 185, 248, .72)); }
.chapter-rail { position: fixed; z-index: 8; top: 50%; right: 18px; display: grid; gap: 10px; transform: translateY(-50%); }
.chapter-rail a { position: relative; display: grid; justify-items: end; gap: 5px; min-width: 26px; color: #8298ad; font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.chapter-rail a::before { position: absolute; top: 7px; right: 20px; width: 20px; height: 1px; background: rgba(117, 185, 248, .18); content: ""; transform-origin: right center; transition: width .2s ease, background .2s ease; }
.chapter-rail a i { display: block; width: 7px; height: 7px; border: 1px solid rgba(117, 185, 248, .48); border-radius: 50%; background: #0c0e13; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.chapter-rail a:hover, .chapter-rail a:focus-visible, .chapter-rail a.is-active { color: #edf5fa; outline: 0; transform: translateX(-2px); }
.chapter-rail a.is-active::before { width: 30px; background: rgba(240, 157, 112, .7); }
.chapter-rail a.is-active i { border-color: #f09d70; background: #f09d70; box-shadow: 0 0 0 4px rgba(240, 157, 112, .1), 0 0 12px rgba(240, 157, 112, .42); transform: scale(1.15); }
.chapter-rail a:focus-visible i { box-shadow: 0 0 0 3px rgba(117, 185, 248, .32); }
@media (min-width: 981px) {
  /* v3.0 chapter-rail orientation consolidated (2027.12.07): keep one
     canonical desktop rule for the existing active-label behavior. */
  .chapter-rail a.is-active::after {
    position: absolute;
    top: -4px;
    right: 31px;
    padding: 3px 6px 3px 7px;
    border: 1px solid rgba(240, 157, 112, .24);
    border-radius: 999px;
    background: rgba(12, 18, 27, .84);
    color: #e6edf3;
    content: attr(aria-label);
    font: 700 .48rem ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    backdrop-filter: blur(10px);
    white-space: nowrap;
  }
  .chapter-rail a:hover::after,
  .chapter-rail a:focus-visible::after {
    content: attr(aria-label);
  }
}

/* v3.0 gallery focus halo (2028.07.24): make keyboard inspection of an
   authored product surface unmistakable without changing selection semantics.
   The halo is presentation-only, adds no requests or state, and remains a
   static cue for reduced-motion users. */
.product-shot:focus-visible {
  outline: 0;
  border-radius: 19px;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, .72), 0 0 0 6px rgba(167, 139, 250, .14), 0 18px 44px rgba(7, 13, 24, .24);
}
.product-shot:focus-visible .shot-window {
  border-color: rgba(155, 230, 242, .72);
}
.chapter-back { position: fixed; z-index: 9; top: calc(88px + env(safe-area-inset-top)); left: clamp(28px, 4vw, 68px); display: none; align-items: center; gap: 7px; min-height: 44px; padding: 5px 10px 5px 8px; border: 1px solid rgba(117, 185, 248, .24); border-radius: 999px; color: #a8c6dc; background: rgba(10, 18, 29, .76); box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(14px) saturate(1.08); font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
body.landing-compact.landing-detail-open .chapter-back,
body.landing-compact.deep-scroll .chapter-back { display: inline-flex; }
/* v3.0 first-visit guard (2028.08.687): no return control at scroll zero. */
body.landing-compact.landing-at-top.deep-scroll .chapter-back { display: none; }
.chapter-back > span:first-child { color: #f0a073; font-size: .85rem; line-height: 1; }
.chapter-back:hover, .chapter-back:focus-visible { border-color: rgba(117, 185, 248, .58); color: #eff8ff; background: rgba(19, 36, 53, .88); outline: 0; transform: translateY(-1px); }
.chapter-back:focus-visible { box-shadow: 0 0 0 3px rgba(117, 185, 248, .24), 0 10px 26px rgba(0, 0, 0, .18); }
.brand { gap: 11px; }
.brand img { width: 32px; height: 32px; opacity: .96; }
body:not(.platform-mode) .brand-wordmark { display: grid; gap: 1px; align-items: center; }
body:not(.platform-mode) .brand-wordmark strong { color: #f2f5f8; font-size: .78rem; letter-spacing: .035em; }
body:not(.platform-mode) .brand-wordmark small { color: #8e9aaa; font-size: .49rem; letter-spacing: .18em; text-transform: uppercase; }
body:not(.platform-mode) .trust-status { display: none; }
/* Public story navigation stays in view while a visitor explores a focused
   product surface. Workspace navigation keeps its own authenticated layout.
   Fixed positioning avoids root overflow quirks while the main offset keeps
   the entry composition at the same visual start line. */
body:not(.platform-mode) .site-header { position: fixed; top: 0; right: 0; left: 0; box-shadow: 0 12px 30px rgba(3, 8, 18, .18); }
body:not(.platform-mode) #main { padding-top: 72px; }
@media (min-width: 681px) {
  /* Once a deep public surface is active, keep release detail in the quiet
     header band instead of covering the product evidence at the viewport edge. */
  body:not(.platform-mode).deep-scroll .release-badge,
  body:not(.platform-mode).setup-in-view .release-badge { top: calc(84px + env(safe-area-inset-top)); right: clamp(28px, 4vw, 68px); bottom: auto; }
}
#landing-view {
  /* `hidden` creates an unintended scroll container and defeats the gallery
     rail's sticky reading aid. Clip preserves the visual boundary without
     taking ownership of vertical scrolling. */
  overflow-x: clip;
}
/* The entry route is intentionally short. Deeper narrative sections remain
   addressable as focused views instead of making first-time visitors scroll
   through the entire product story. */
body.landing-compact #landing-view > .platform-story,
body.landing-compact #landing-view > .context-atlas,
body.landing-compact #landing-view > .trust-story,
body.landing-compact #landing-view > .customer-fit,
body.landing-compact #landing-view > .operating-scale,
body.landing-compact #landing-view > .services-panel { display: none; }
/* A focused chapter owns the reading frame. The gallery stays in the compact
   overview and in its own direct route, but must not remain as a clipped
   predecessor above setup, services, or another focused chapter. */
body.landing-compact.landing-detail-open #landing-view > .product-gallery:not(.is-detail-open) { display: none; }
body.landing-compact.landing-detail-open #landing-view > .platform-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .product-gallery.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .context-atlas.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .trust-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .customer-fit.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .operating-scale.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > :is(.services-panel,.customer-fit).is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .early-access-panel.is-detail-open { display: block; }
/* A focused chapter is an intentional reading target. Promote it out of the
   deferred paint path before anchor scrolling so content-visibility cannot
   leave a mobile chapter at an intrinsic placeholder position. */
body.landing-compact.landing-detail-open #landing-view > .platform-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .product-gallery.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .context-atlas.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .trust-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .customer-fit.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .operating-scale.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .services-panel.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .early-access-panel.is-detail-open { content-visibility: visible !important; }
/* Focused chapters remain the authored product compositions. The compact
   entry route hides these chapters, but a direct navigation should not flatten
   a grid into a long text column or leave its visual proof stranded below the
   fold. This is layout-only; it does not change the route or its authority. */
body.landing-compact.landing-detail-open #landing-view > .platform-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .product-gallery.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .context-atlas.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .trust-story.is-detail-open,
body.landing-compact.landing-detail-open #landing-view > :is(.services-panel,.customer-fit).is-detail-open,
body.landing-compact.landing-detail-open #landing-view > .early-access-panel.is-detail-open { display: grid; }
/* A focused chapter is a deliberate reading transition, not a route change.
   One short compositional settle makes the new surface feel intentional while
   keeping the existing authored layout and adding no per-frame work. */
body.landing-compact.landing-detail-open #landing-view > .is-detail-open {
  animation: publicChapterArrive .42s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes publicChapterArrive {
  from { opacity: .18; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
body.landing-compact.landing-detail-open #landing-view { padding-bottom: 100vh; }
body.landing-compact.landing-detail-open.landing-setup-detail #landing-view { padding-bottom: max(0px, calc(100vh - 92px)); }
body.landing-compact:not(.platform-mode)::before { z-index: -2; display: block; background: linear-gradient(rgba(115, 214, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(115, 214, 255, .045) 1px, transparent 1px), radial-gradient(ellipse 54% 42% at 50% 18%, rgba(92, 112, 255, .14), transparent 70%); background-size: 72px 72px, 72px 72px, auto; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .86), transparent 72%); opacity: .8; }
body.landing-compact:not(.platform-mode)::after { z-index: -1; display: block; background: linear-gradient(115deg, transparent 0 32%, rgba(119, 189, 247, .045) 32.1%, transparent 32.35% 67%, rgba(249, 159, 111, .035) 67.1%, transparent 67.35%), repeating-linear-gradient(180deg, transparent 0 7px, rgba(137, 223, 255, .018) 8px, transparent 9px), radial-gradient(ellipse 34% 20% at 78% 14%, rgba(115, 236, 209, .13), transparent 74%); background-size: 100% 100%, 100% 16px, auto; mix-blend-mode: screen; opacity: .7; pointer-events: none; }
body.landing-compact .hero-grid { position: relative; }
body.landing-compact .hero-grid::before { position: absolute; z-index: -1; top: -8%; right: -13%; width: 72%; height: 88%; border: 1px solid rgba(114, 221, 255, .14); border-radius: 50%; background: radial-gradient(circle at 36% 52%, rgba(51, 192, 255, .11), transparent 54%); box-shadow: 0 0 90px rgba(39, 159, 230, .14), inset 0 0 70px rgba(79, 108, 255, .08); content: ""; transform: rotate(-14deg); pointer-events: none; }
body.landing-compact .hero-grid::after { position: absolute; z-index: -1; top: 4%; right: 21%; width: 1px; height: 58%; background: linear-gradient(180deg, transparent, rgba(134, 227, 255, .48), transparent); box-shadow: 0 0 24px rgba(114, 221, 255, .4); content: ""; opacity: .5; transform: rotate(36deg); pointer-events: none; }
body.landing-compact .hero-copy h1 { text-shadow: 0 8px 48px rgba(0, 0, 0, .32); }
body.landing-compact .eyebrow { color: #88d8f0; }
body.landing-compact .button-primary { background: linear-gradient(135deg, #7ee9d0, #70cfff 52%, #9a9cff); color: #07121e; box-shadow: 0 10px 28px rgba(68, 203, 232, .2); }
body.landing-compact .button-primary:hover:not(:disabled) { background: linear-gradient(135deg, #a6f5e2, #91dcff 52%, #b6b7ff); }
@media (prefers-reduced-motion: reduce) {
  .landing-depth::before, .landing-depth::after { animation: none; }
  .signal-art { animation: none; }
  .hero-context-link::after { animation: none; opacity: 0; }
  .hero-evidence-trace::after { animation: none; }
  body.landing-compact.landing-detail-open #landing-view > .is-detail-open { animation: none; }
  body.landing-compact .hero-grid::before, body.landing-compact .hero-grid::after { transform: none; }
  .signal-panel.workspace-stage-refresh .workspace-psirtling, .signal-panel.workspace-stage-refresh .workspace-decision { animation: none; }
}
body.landing-compact .hero-copy h1 span { color: #8fe7ff; text-shadow: 0 0 28px rgba(99, 216, 255, .18); }
body.landing-compact .signal-panel { border-color: rgba(125, 220, 255, .36); background: linear-gradient(145deg, rgba(22, 47, 75, .90), rgba(8, 18, 33, .94) 72%); box-shadow: 0 34px 92px rgba(0, 73, 130, .3), 0 0 0 1px rgba(125, 211, 252, .06), inset 0 1px 0 rgba(209, 247, 255, .18); }
body.landing-compact .hero-metric { border-color: rgba(125, 220, 255, .22); background: rgba(14, 29, 47, .58); }
body.landing-compact .hero-metric strong, body.landing-compact .workspace-preview strong { color: #f2fbff; }
/* Keep the hero immediate and defer only the long public story. The compact
   route intentionally hides non-selected chapters; direct hash navigation
   promotes its requested chapter through the bounded JS reconciliation below. */
.platform-story,
.product-gallery,
.context-atlas,
.customer-fit,
.operating-scale,
.trust-story,
.services-panel,
.early-access-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* v3.0 compact-route paint contract (2028.07.06): zero geometry for a hidden
   chapter is expected on the overview route; a requested chapter must be
   promoted and rendered before alignment. */
.public-nav { gap: clamp(20px, 2.7vw, 38px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.public-nav a { position: relative; border-radius: 0; color: #b4c0d0; font-size: .7rem; }
.public-nav a:hover { color: #fff; background: transparent; }
.public-nav a:focus-visible { color: #fff; background: transparent; outline: 0; box-shadow: 0 0 0 3px rgba(125, 211, 252, .2); }
.public-nav a::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 2px; background: linear-gradient(90deg, #f09d70, #7bd8ef); content: ""; opacity: 0; transform: scaleX(.35); transition: opacity .2s ease, transform .2s ease; }
.public-nav a.is-active { color: #eef7fb; }
.public-nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.button { min-height: 44px; border-radius: 5px; padding: 0 18px; font-size: .75rem; font-weight: 760; }
.button > span[aria-hidden="true"] { margin-left: .4em; }
.button-primary { background: linear-gradient(112deg, #f39a67 0%, #eeb0ff 56%, #8fd5ff 100%); color: #10131d; box-shadow: 0 10px 26px rgba(132, 177, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .34); }
.button-primary:hover:not(:disabled) { background: linear-gradient(112deg, #ffad78 0%, #efbdff 56%, #a5e1ff 100%); box-shadow: 0 14px 34px rgba(132, 177, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .42); }

.view { max-width: 1480px; padding-top: clamp(48px, 5vw, 76px); }
.hero-grid { isolation: isolate; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(54px, 7vw, 122px); min-height: 610px; overflow: hidden; background-image: linear-gradient(90deg, rgba(7,14,26,.72) 0%, rgba(7,14,26,.38) 44%, rgba(7,14,26,.18) 100%), radial-gradient(ellipse 70% 86% at 86% 52%, rgba(68, 143, 219, .38), transparent 68%), linear-gradient(118deg, transparent 0 48%, rgba(122, 190, 232, .1) 48.15%, transparent 48.35%), image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x); background-position: center, center, center, calc(100% + var(--landing-hero-shift,0%) + var(--landing-hero-pointer-x,0px)) calc(50% + var(--landing-hero-pointer-y,0px)); background-size: cover, cover, cover, cover; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(221, 242, 255, .12), inset 0 -1px 0 rgba(95, 142, 187, .18); }
.hero-grid::before { top: -16px; width: 340px; border-top-color: rgba(155, 222, 241, .28); }
.hero-grid::after {
  /* v3.0 hero response-field contract (2028.04.05): one authoritative
     atmosphere layer. Keep this declaration consolidated so later visual
     changes cannot be masked by dead cascade overrides. */
  right: -8%;
  bottom: -33%;
  width: 66%;
  border: 1px solid rgba(125, 211, 252, .1);
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 174, 255, .24), rgba(79, 174, 255, 0) 61%),
    conic-gradient(from 214deg at 50% 50%, transparent 0deg, rgba(125, 211, 252, .12) 56deg, transparent 102deg, rgba(132, 188, 255, .14) 158deg, transparent 214deg, rgba(240, 157, 112, .08) 278deg, transparent 330deg);
  box-shadow: 0 0 0 18px rgba(125, 211, 252, .018), inset 0 0 46px rgba(125, 211, 252, .07), 0 0 92px rgba(99, 102, 241, .12);
  mix-blend-mode: screen;
  animation: orbitDrift 26s ease-in-out infinite alternate;
}
.hero-copy, .signal-panel { z-index: 1; }
/* v3.0 hero ambient field (2028.01.27): keep motion in an isolated
   compositor-friendly layer so the supplied security artwork remains the
   background and the response workspace stays the only foreground surface.
   This is atmospheric presentation only; it never represents tenant state,
   evidence, authorization, or a network signal. */
.hero-field-ambient {
  position: absolute;
  z-index: 0;
  top: -22%;
  right: -6%;
  /* v3.0 paint containment (2028.09.25): keep the ambient ellipse's blur
     inside the hero frame instead of expanding the page paint region. */
  contain: paint;
  width: min(760px, 68%);
  aspect-ratio: 1.32;
  border: 1px solid rgba(125, 211, 252, .08);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 56% 46%, rgba(125, 211, 252, .15), transparent 38%),
    radial-gradient(ellipse at 72% 63%, rgba(167, 139, 250, .12), transparent 56%),
    conic-gradient(from 210deg at 54% 50%, transparent 0deg, rgba(125, 211, 252, .12) 42deg, transparent 78deg, rgba(240, 157, 112, .07) 124deg, transparent 174deg);
  box-shadow: inset 0 0 70px rgba(125, 211, 252, .04), 0 0 110px rgba(99, 102, 241, .08);
  opacity: .8;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(-9deg);
  animation: heroAmbientDrift 24s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}
@media (max-width: 680px) {
  .hero-field-ambient { top: -16%; right: -22%; width: 122%; opacity: .72; }
}

/* v3.0 product-context field: a quiet visual bridge between the report,
   shipped release, evidence, and human decision. This is atmospheric only;
   it has no data source, hit target, or authority and never represents a
   tenant record. */
.hero-context-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  contain: paint;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 91%, transparent 100%);
}
.hero-context-field::before {
  position: absolute;
  inset: 8% 4% 8% 35%;
  background:
    linear-gradient(128deg, transparent 0 40%, rgba(125, 214, 244, .08) 40.1%, transparent 40.4%),
    radial-gradient(circle at 12% 24%, rgba(188, 232, 255, .34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 18%, rgba(240, 190, 157, .28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 72%, rgba(168, 229, 211, .3) 0 1px, transparent 1.8px),
    repeating-linear-gradient(90deg, rgba(135, 202, 235, .05) 0 1px, transparent 1px 66px),
    repeating-linear-gradient(0deg, rgba(135, 202, 235, .04) 0 1px, transparent 1px 66px);
  opacity: .84;
  content: "";
  transform: translate3d(0, calc(var(--landing-journey-progress, 0) * -8px), 0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  background-size: auto, auto, auto, auto, 66px 66px, 66px 66px;
  animation: heroContextMeshDrift 20s ease-in-out infinite alternate;
}

@keyframes heroContextMeshDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 12px -8px, 18px 0, 0 -14px; }
}
.hero-security-shield {
  position: absolute;
  z-index: 0;
  top: 19%;
  right: 34%;
  width: clamp(210px, 27vw, 390px);
  aspect-ratio: .82;
  border: 1px solid rgba(145, 211, 246, .5);
  border-radius: 48% 48% 53% 53% / 35% 35% 65% 65%;
  background: radial-gradient(ellipse at 46% 31%, rgba(125, 211, 252, .08), transparent 48%), linear-gradient(145deg, rgba(125, 211, 252, .06), transparent 48%, rgba(167, 139, 250, .075));
  box-shadow: 0 0 0 14px rgba(125, 211, 252, .03), 0 0 76px rgba(99, 102, 241, .17), inset 0 0 38px rgba(125, 211, 252, .1);
  opacity: .98;
  mix-blend-mode: screen;
  transform: rotate(10deg) translate3d(0, 0, 0);
  animation: heroShieldDrift 18s ease-in-out infinite alternate;
}
.hero-security-shield::before {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(139, 211, 177, .2);
  border-radius: inherit;
  content: "";
}
.hero-security-orbit {
  position: absolute;
  z-index: 0;
  top: 22%;
  right: 17%;
  width: clamp(250px, 33vw, 480px);
  aspect-ratio: 1;
  border: 1px solid rgba(167, 139, 250, .36);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(167, 139, 250, .024), inset 0 0 42px rgba(125, 211, 252, .05);
  opacity: .88;
  mix-blend-mode: screen;
  transform: rotate(-22deg) translate3d(0, 0, 0);
  animation: heroSecurityOrbit 25s linear infinite;
}
.hero-security-orbit::after {
  position: absolute;
  top: 8%;
  left: 16%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(139, 231, 209, .75);
  border-radius: 50%;
  background: rgba(139, 231, 209, .35);
  box-shadow: 0 0 16px rgba(139, 231, 209, .42);
  content: "";
}
.hero-signal-sweep {
  position: absolute;
  z-index: 1;
  top: -16%;
  left: 39%;
  width: 2px;
  height: 132%;
  background: linear-gradient(180deg, transparent 0%, rgba(125, 211, 252, 0) 18%, rgba(125, 211, 252, .34) 43%, rgba(167, 139, 250, .25) 58%, rgba(240, 157, 112, .12) 70%, transparent 100%);
  filter: blur(.25px);
  opacity: 0;
  transform: rotate(28deg) translate3d(-190px, 0, 0);
  animation: heroSignalSweep 12s cubic-bezier(.45, .05, .55, .95) infinite;
}
.hero-evidence-trace {
  position: absolute;
  z-index: 1;
  top: 25%;
  left: 42.5%;
  width: 44%;
  height: 38%;
  border-top: 1px solid rgba(139, 227, 239, .24);
  border-right: 1px solid rgba(139, 211, 177, .2);
  border-radius: 0 46% 0 0;
  opacity: .78;
  transform: rotate(8deg) skewX(-12deg);
  filter: drop-shadow(0 0 10px rgba(117, 207, 239, .12));
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
  pointer-events: none;
}
.hero-evidence-trace::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(139, 227, 239, .72);
  border-radius: 50%;
  background: #102838;
  box-shadow: 0 0 0 4px rgba(115, 210, 233, .08), 0 0 18px rgba(105, 204, 238, .38);
  content: "";
  animation: evidenceTraceAdvance 8s cubic-bezier(.45, .05, .55, .95) infinite;
}
.hero-context-field::after {
  position: absolute;
  top: 10%;
  right: 8%;
  width: min(330px, 31%);
  aspect-ratio: 1;
  border: 1px solid rgba(122, 211, 237, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(122, 211, 237, .025), 0 0 70px rgba(103, 156, 255, .11), inset 0 0 42px rgba(92, 221, 205, .05);
  content: "";
  transform: rotate(-18deg) scale(.96);
  animation: contextOrbit 22s ease-in-out infinite alternate;
}
.hero-context-link {
  position: absolute;
  z-index: 1;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(118, 216, 238, .05), rgba(118, 216, 238, .54), rgba(240, 157, 112, .2), transparent);
  box-shadow: 0 0 12px rgba(117, 207, 239, .16);
  transform-origin: left center;
  animation: contextTrace 10s ease-in-out infinite;
}
.hero-context-link-one { top: 27%; left: 43%; width: 19%; transform: rotate(22deg); }
.hero-context-link-two { top: 51%; left: 57%; width: 18%; transform: rotate(-25deg); animation-delay: -3.2s; }
.hero-context-link-three { top: 33%; left: 70%; width: 17%; transform: rotate(39deg); animation-delay: -6.1s; }
.hero-context-link::after { position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:#b8f0e1; box-shadow:0 0 0 3px rgba(184,240,225,.08),0 0 13px rgba(116,223,219,.8); content:""; animation:contextPacket 4.8s linear infinite; animation-delay:inherit; }
@keyframes contextPacket { 0% { left:0; opacity:0; transform:scale(.7); } 10%,78% { opacity:1; } 88%,100% { left:calc(100% - 5px); opacity:0; transform:scale(1); } }
@media (prefers-reduced-transparency: reduce) { .hero-context-link::after { box-shadow:none; background:#d6f5e9; } }
.hero-context-node {
  position: absolute;
  z-index: 2;
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(139, 227, 239, .78);
  border-radius: 50%;
  background: #102838;
  box-shadow: 0 0 0 4px rgba(115, 210, 233, .06), 0 0 20px rgba(105, 204, 238, .34);
  animation: contextNodePulse 5.6s ease-in-out infinite;
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s ease, box-shadow .35s ease;
}
.hero-context-node:not(.is-active) { opacity: .58; filter: saturate(.72); transform: scale(.78); }
.hero-context-node.is-active { opacity: 1; filter: saturate(1.12); transform: scale(1.32); }
.hero-context-node.is-active::before { position: absolute; inset: -7px; border: 1px solid currentColor; border-radius: 50%; opacity: .34; content: ""; animation: contextActiveHalo 2.8s ease-out infinite; }
.hero-context-node::after {
  position: absolute;
  top: 11px;
  left: 10px;
  color: rgba(188, 221, 237, .64);
  content: attr(data-label);
  font: 700 .48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(5, 9, 16, .92);
}
.hero-context-node-release::after { color: rgba(247, 190, 157, .72); }
.hero-context-node-evidence::after { color: rgba(178, 235, 210, .72); }
.hero-context-node-decision::after {
  right: 10px;
  left: auto;
  color: rgba(204, 192, 250, .72);
  transform: translateX(100%);
}
.hero-context-node-product { top: 25%; left: 42.5%; }
.hero-context-node-release { top: 49%; left: 56.5%; animation-delay: -1.4s; border-color: rgba(240, 177, 140, .82); background: #34251f; box-shadow: 0 0 0 4px rgba(240, 157, 112, .06), 0 0 20px rgba(240, 157, 112, .3); }
.hero-context-node-evidence { top: 30%; left: 69.5%; animation-delay: -2.7s; border-color: rgba(161, 233, 205, .82); background: #17342e; box-shadow: 0 0 0 4px rgba(137, 211, 177, .06), 0 0 20px rgba(137, 211, 177, .3); }
.hero-context-node-decision { top: 61%; left: 86%; animation-delay: -4.2s; border-color: rgba(181, 161, 255, .78); background: #24203d; box-shadow: 0 0 0 4px rgba(167, 140, 255, .06), 0 0 20px rgba(167, 140, 255, .28); }
.eyebrow, .nav-kicker { margin-bottom: 24px; color: #eea075; font-size: .59rem; letter-spacing: .22em; }
.hero-copy h1 { max-width: 590px; margin-bottom: 26px; font-size: clamp(3.35rem, 4.3vw, 5.15rem); line-height: .94; letter-spacing: -.07em; font-weight: 680; }
.hero-copy h1 span { color: #f09d70; font-weight: 550; background: linear-gradient(108deg, #f2a177 0%, #c4a9ff 54%, #8ee4ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 28px rgba(159, 178, 255, .11); }
.landing-depth {
  position: absolute;
  z-index: 0;
  inset: -8% -4%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background:radial-gradient(ellipse at 74% 40%,rgba(79,142,224,.17),transparent 48%);
  opacity: .7;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}
.landing-depth::before,
.landing-depth::after { opacity: .82; }
.landing-depth-canvas { border-radius: 0; opacity: .78; pointer-events: none; }
.landing-journey {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 0;
  width: min(270px, 29%);
  margin: 0;
  padding: 13px 15px 12px;
  border-color: rgba(139, 177, 214, .22);
  background: rgba(10, 16, 25, .56);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px) saturate(1.1);
}
.landing-journey-copy { min-height: 0; max-width: 218px; color: #b8c8d8; font-size: .7rem; line-height: 1.4; letter-spacing: -.005em; }
.landing-journey-stage { margin-bottom: 6px; font-size: .56rem; }
.landing-journey-track { margin: 6px 0 8px; }
.landing-journey::after {
  position: absolute;
  right: 38px;
  bottom: -82px;
  width: 1px;
  height: 82px;
  background: linear-gradient(180deg, rgba(240, 157, 112, .72), rgba(126, 190, 229, .34) 58%, transparent);
  opacity: .7;
  content: "";
  pointer-events: none;
}
.landing-journey-track::after {
  display: block;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 auto;
  border: 1px solid rgba(240, 157, 112, .76);
  border-radius: 50%;
  background: #121923;
  box-shadow: 0 0 0 3px rgba(240, 157, 112, .08), 0 0 14px rgba(240, 157, 112, .36);
  content: "";
}
.signal-panel::after { box-shadow: 0 0 18px rgba(240, 157, 112, .16), 0 0 26px rgba(117, 185, 248, .12); }
.hero-copy { grid-column: 1; grid-row: 1; }
.signal-panel { grid-column: 2; grid-row: 1; }
.hero-copy h1 { max-width: 450px; }
.hero-copy .hero-lede, .hero-copy .hero-support { max-width: 450px; }
.hero-lede { max-width: 550px; color: #edf5ff; font-size: 1.08rem; line-height: 1.62; }
.hero-support { max-width: 525px; margin-top: 20px; color: #9aaec1; font-size: .86rem; line-height: 1.72; }
.hero-actions { gap: 10px; margin-top: 33px; }
.hero-proofline { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; margin-top: 18px; color: #8b9cac; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .075em; text-transform: uppercase; }
.hero-proofline span { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.hero-proofline i { display: block; width: 5px; height: 5px; border: 1px solid rgba(137, 211, 177, .68); border-radius: 50%; background: rgba(137, 211, 177, .28); box-shadow: 0 0 9px rgba(137, 211, 177, .25); }
.hero-proofline span:nth-child(2) i { border-color: rgba(117, 185, 248, .7); background: rgba(117, 185, 248, .3); box-shadow: 0 0 9px rgba(117, 185, 248, .24); }
.hero-proofline span:nth-child(3) i { border-color: rgba(240, 157, 112, .76); background: rgba(240, 157, 112, .32); box-shadow: 0 0 9px rgba(240, 157, 112, .26); }

.signal-panel { border-color: rgba(139, 162, 198, .24); border-radius: 17px; background: rgba(8,15,26,.66); box-shadow: 0 34px 88px rgba(0,0,0,.34); backdrop-filter: blur(14px) saturate(1.1); }
.signal-art { position: absolute; z-index: -1; inset: 0; contain: paint; overflow: hidden; background: radial-gradient(circle at 86% 18%, #a78bfa24, transparent 23%), linear-gradient(118deg, rgba(13,18,27,.92), rgba(121,189,229,.045), rgba(13,18,27,.62)); background-size: 100% 100%, 210% 100%; opacity: .92; animation: workspaceFieldDrift 18s ease-in-out infinite alternate; }
.signal-art::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(124, 194, 233, .1) 18.1%, transparent 18.3% 63%, rgba(240, 157, 112, .08) 63.1%, transparent 63.3%),
    repeating-linear-gradient(90deg, rgba(130, 193, 231, .045) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(130, 193, 231, .035) 0 1px, transparent 1px 42px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
  opacity: .8;
  content: "";
  pointer-events: none;
}
.signal-art::after {
  position: absolute;
  top: 30%;
  left: -22%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .08) 18%, rgba(240, 177, 140, .8) 48%, rgba(126, 201, 238, .42) 72%, transparent);
  box-shadow: 0 0 18px rgba(240, 157, 112, .28), 0 0 42px rgba(117, 185, 248, .18);
  opacity: .62;
  content: "";
  pointer-events: none;
  transform: rotate(-13deg);
  animation: workspaceEvidenceSweep 13s ease-in-out infinite;
}
.signal-panel::before { background: radial-gradient(circle at calc(100% - var(--landing-journey-shift, 0%)) 12%, rgba(87, 130, 204, .16), transparent 42%), radial-gradient(circle at 14% 84%, rgba(75, 222, 201, .045), transparent 34%); transition: background-position .7s cubic-bezier(.16, 1, .3, 1); }
.signal-panel::after { right: 32px; left: 32px; height: 1px; background: linear-gradient(90deg, #f09b6c 0%, rgba(117, 185, 248, .82) 100%); background-size: 220% 100%; animation: signalTrace 9s ease-in-out infinite; }
.signal-panel:focus-within, .signal-panel:hover { border-color: rgba(155, 197, 232, .38); box-shadow: 0 38px 92px rgba(0,0,0,.34), 0 0 0 1px rgba(117, 185, 248, .06); }
.signal-panel .signal-intro, .signal-panel .workspace-psirtling, .signal-panel .workspace-preview, .signal-panel .proof-line { position: relative; z-index: 2; }
.signal-panel .workspace-preview { box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 15px 38px rgba(0,0,0,.22); border-color: rgba(142, 182, 223, .26); transition: border-color .55s ease, box-shadow .55s ease; }
.signal-panel[data-journey-stage="4"] .workspace-preview { border-color: rgba(139, 211, 177, .32); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 15px 38px rgba(0,0,0,.16), 0 0 24px rgba(139, 211, 177, .07); }
.signal-panel .workspace-preview::after { position: absolute; top: -22%; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 202, 239, .34), rgba(240, 157, 112, .3), transparent); opacity: .5; content: ""; pointer-events: none; animation: workspacePreviewScan 11s cubic-bezier(.22,.8,.24,1) infinite; }
.signal-panel.workspace-stage-refresh .workspace-psirtling,
.signal-panel.workspace-stage-refresh .workspace-decision { animation: workspaceStateHandoff .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes workspaceStateHandoff { from { opacity: .54; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.signal-panel .workspace-psirtling { transition: border-color .24s ease, background .24s ease, transform .24s ease; }
.signal-panel:hover .workspace-psirtling { border-color: rgba(137, 211, 177, .35); background: linear-gradient(110deg, rgba(35, 70, 67, .27), rgba(11, 20, 29, .58)); transform: translateY(-1px); }
.hero-metric { position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.hero-metric::before { position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(117, 185, 248, .55), transparent); opacity: .45; content: ""; }
.hero-metric:nth-child(2)::before { background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .66), transparent); }
.hero-metric:nth-child(3)::before { background: linear-gradient(90deg, transparent, rgba(137, 211, 177, .62), transparent); }
.hero-metric:hover, .hero-metric:focus-within { border-color: rgba(155, 197, 232, .34); background: linear-gradient(140deg, rgba(22, 35, 50, .84), rgba(11, 16, 24, .96)); box-shadow: 0 14px 28px rgba(0,0,0,.14); transform: translateY(-3px); }
.signal-header { padding: 20px 32px 18px; color: #b8c0cc; font-size: .56rem; letter-spacing: .15em; }
.surface-label {
  color: #93a5bd;
  font-size: .5rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.signal-intro { padding: 34px 32px 28px; }
.workspace-kicker { margin-bottom: 11px !important; color: #8cc3e6 !important; font-size: .57rem !important; letter-spacing: .16em; }

.signal-intro h2 { max-width: 470px; margin-bottom: 14px; font-size: clamp(1.85rem, 2.28vw, 2.5rem); line-height: 1.02; letter-spacing: -.06em; }
.signal-intro p { max-width: 480px; color: #aeb8c6; font-size: .83rem; line-height: 1.67; }
.workspace-preview { margin: 0 32px 6px; border-color: rgba(142, 182, 223, .17); border-radius: 10px; background: #10141c; }
.workspace-preview-bar { padding: 14px 17px; color: #a6b0bd; font-size: .57rem; letter-spacing: .1em; }
.workspace-preview-bar code { color: #8bc6ed; font-size: .57rem; }
.workspace-preview-main { grid-template-columns: minmax(0, 1.28fr) minmax(165px, .72fr); }
.workspace-decision { padding: 22px; }
.workspace-decision > span, .workspace-context span { color: #7f8b9c; font-size: .57rem; letter-spacing: .1em; }
.workspace-decision strong { display: block; min-height: 2.25em; max-width: 265px; margin-top: 9px; font-size: 1.06rem; letter-spacing: -.038em; }
.workspace-decision p { min-height: 3.1em; max-width: 310px; margin: 9px 0 15px; font-size: .72rem; }
.workspace-decision b { padding: 5px 8px; border-radius: 4px; font-size: .54rem; }
.workspace-context div { padding: 12px 15px; }
.workspace-context strong { margin-top: 4px; font-size: .74rem; }
.workspace-attention { margin: 0 32px 14px; padding: 10px 12px 11px; border: 1px solid rgba(117, 185, 248, .12); border-radius: 8px; background: rgba(8, 16, 26, .38); }
.workspace-attention-label { display: block; margin-bottom: 8px; color: #7f8b9c; font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.workspace-attention-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.workspace-attention-lane { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 6px; align-items: center; min-width: 0; padding: 7px 6px; border: 1px solid rgba(127, 153, 181, .1); border-radius: 6px; color: #728398; background: rgba(10, 18, 29, .42); opacity: .54; transition: opacity .28s ease, border-color .28s ease, background .28s ease, color .28s ease; }
.workspace-attention-lane i { grid-row: span 2; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.workspace-attention-lane b { overflow: hidden; font-size: .52rem; font-weight: 680; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.workspace-attention-lane small { overflow: hidden; color: #68788b; font-size: .47rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.signal-panel[data-attention-focus="approval"] [data-attention-lane="approval"],
.signal-panel[data-attention-focus="timelines"] [data-attention-lane="timelines"],
.signal-panel[data-attention-focus="exploitation"] [data-attention-lane="exploitation"] { border-color: rgba(240, 157, 112, .34); color: #f0af89; background: rgba(98, 57, 46, .18); opacity: 1; }
.signal-panel[data-attention-focus="approval"] [data-attention-lane="approval"] small,
.signal-panel[data-attention-focus="timelines"] [data-attention-lane="timelines"] small,
.signal-panel[data-attention-focus="exploitation"] [data-attention-lane="exploitation"] small { color: #c88f75; }
.workspace-psirtling { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin: 0 32px 6px; padding: 11px 12px; border:1px solid #7eeccc61; border-radius: 8px; background: linear-gradient(110deg,#23574f42,#0b141d8a); box-shadow: inset 3px 0 #9bf2da, inset 0 1px 0 #e5fff70f; }
.workspace-psirtling-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid rgba(137, 211, 177, .78); border-radius: 50%; color: #c5f5df; background: radial-gradient(circle,#d9fff12e 0 2px,transparent 3px),linear-gradient(145deg,#89d3b140,#4f8e9d29); font: 750 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 0 20px rgba(126, 236, 218, .25); }
.workspace-psirtling-label { display: block; margin-bottom: 3px; color: #9fe0bd; font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.workspace-psirtling strong { display: block; min-height: 2.2em; color: #e1ebe8; font-size: .67rem; font-weight: 630; letter-spacing: -.012em; }
.workspace-psirtling small { display: block; min-height: 1.35em; margin-top: 3px; color: #839a99; font-size: .56rem; line-height: 1.35; }
.workspace-psirtling-state { padding: 4px 7px; border: 1px solid rgba(117, 185, 248, .28); border-radius: 999px; color: #b9d8f5; font: 700 .49rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.response-stages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(179, 215, 232, .1); }
.response-stages::before { position: absolute; top: -1px; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .62), rgba(117, 185, 248, .48), rgba(137, 211, 177, .42), rgba(190, 164, 238, .48)); content: ""; opacity: .52; pointer-events: none; }
.response-stage { min-height: 92px; padding: 17px 16px 16px; border-right: 1px solid rgba(179, 215, 232, .1); color: inherit; text-decoration: none; cursor: pointer; transition: background .35s ease, transform .35s ease, border-color .35s ease; }
.response-stage:hover { background: rgba(117, 185, 248, .08); }
.response-stage:focus-visible { position: relative; z-index: 2; outline-offset: -3px; }
.response-stage:last-child { border-right: 0; }
.response-stage span { display: block; margin-bottom: 15px; color: #778596; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.response-stage strong { display: block; margin-bottom: 4px; color: #dfe4eb; font-size: .79rem; letter-spacing: -.018em; }
.response-stage small { display: block; color: #8f99a7; font-size: .64rem; line-height: 1.4; }
.response-stage.is-active { background: rgba(240, 155, 108, .12); }
.response-stage.is-active span, .response-stage.is-active strong { color: #f0a073; }
.response-stage.is-active { box-shadow: inset 0 3px 0 rgba(240, 157, 112, .72); }
.proof-line { padding: 20px 32px 22px; color: #aeb7c3; font-size: .63rem; }

/* v3.0 protected-perimeter handoff (2028.03.07): the hero promise and the
   Response Workspace are one product story. Use a dedicated decorative layer
   rather than a copy pseudo-element so the existing copy veil cannot suppress
   the connector in the cascade. It carries no tenant state, telemetry,
   evidence, authorization, or network meaning. Keep it out of the phone
   composition so the workspace remains the next readable touch target. */
@media (min-width: 981px) {
  .hero-workspace-bridge {
    position: absolute;
    z-index: -1;
    top: 58%;
    left: 44%;
    width: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 211, 252, .06), rgba(125, 211, 252, .58), rgba(240, 157, 112, .42));
    box-shadow: 0 0 18px rgba(125, 211, 252, .16);
    content: "";
    opacity: .7;
    pointer-events: none;
    animation: heroBridgePulse 7s ease-in-out infinite;
  }
  .hero-workspace-bridge::after {
    position: absolute;
    top: -3px;
    right: -1px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(240, 157, 112, .78);
    border-radius: 50%;
    background: #111b28;
    box-shadow: 0 0 0 4px rgba(240, 157, 112, .08), 0 0 16px rgba(240, 157, 112, .28);
    content: "";
    pointer-events: none;
  }
}
@keyframes heroBridgePulse {
  0%, 100% { opacity: .38; transform: scaleX(.86); transform-origin: left center; }
  42% { opacity: .86; transform: scaleX(1); }
  58% { opacity: .62; transform: scaleX(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .signal-panel { backdrop-filter: none; }
  .hero-workspace-bridge { animation: none; }
}

.platform-story { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(60px, 9vw, 138px); margin-top: 58px; padding: 62px 0 32px; background: radial-gradient(circle at 18% 16%, rgba(240, 157, 112, .065), transparent 28%), radial-gradient(circle at 82% 42%, rgba(117, 185, 248, .055), transparent 34%), repeating-linear-gradient(90deg, rgba(117, 185, 248, .025) 0 1px, transparent 1px 92px), linear-gradient(180deg, rgba(17, 24, 35, .2), transparent 82%); }
.platform-story-intro h2 { max-width: 590px; margin-bottom: 21px; font-size: clamp(2.6rem, 3.85vw, 3.8rem); line-height: .99; letter-spacing: -.065em; }
.platform-story-intro > p:last-child { max-width: 555px; font-size: .98rem; }
.platform-story-grid { border-top-color: rgba(155, 197, 217, .17); }
.platform-story-grid article { min-height: 148px; padding: 32px 22px 30px 68px; }
.platform-story-grid article:hover { padding-left: 72px; background: rgba(72, 101, 135, .08); }
.platform-story-grid h3 { margin-bottom: 9px; font-size: 1.14rem; letter-spacing: -.035em; }
.platform-story-grid p { font-size: .9rem; }
.story-index { top: 33px; left: 7px; color: #8fd0ed; font-size: .64rem; }
.platform-story-grid::before { top: 35px; bottom: 35px; left: 19px; background: linear-gradient(180deg, rgba(143, 208, 237, .72), rgba(143, 208, 237, .1) 86%, transparent); }
.platform-story-grid article::before { top: 36px; left: 30px; width: 10px; height: 10px; }

.product-gallery { position: relative; isolation: isolate; margin-top: 34px; padding: 30px 0 28px; border-top: 1px solid rgba(155, 197, 217, .17); background: linear-gradient(180deg, rgba(31, 45, 72, .34), transparent 82%); }
.product-gallery::before { position: absolute; z-index: -1; top: 0; right: -12%; left: -12%; height: 360px; background: radial-gradient(ellipse at 66% 18%, rgba(117, 185, 248, .085), transparent 62%), linear-gradient(90deg, transparent, rgba(240, 157, 112, .025) 48%, transparent); pointer-events: none; content: ""; }
/* v3.0 gallery surface horizon (2028.02.17): give the walkthrough rail and
   the screens below one quiet visual spine. This is a presentation-only layer;
   it carries no product state, evidence, authority, or network signal. The
   motion is CSS-only so it adds no Worker work or request cost. */
.product-gallery::after { position: absolute; z-index: -1; top: 112px; right: -8%; left: -8%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(117, 185, 248, .06) 12%, rgba(117, 185, 248, .46) 31%, rgba(240, 157, 112, .32) 52%, rgba(139, 211, 177, .36) 73%, transparent 92%); box-shadow: 0 0 26px rgba(117, 185, 248, .14), 0 42px 90px rgba(44, 92, 136, .08); opacity: .78; transform: translate3d(0, 0, 0); animation: gallerySurfaceHorizon 15s ease-in-out infinite alternate; pointer-events: none; }

/* v3.0 gallery horizon clarity (2028.07.02): preserve the visual handoff
   between the hero and product walkthrough at dark contrast levels. This is a
   single existing composited line; it adds no copy, request, state, or cost. */
.product-gallery-heading { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 64px); align-items: end; }
.product-gallery-heading h2 { max-width: 610px; margin: 0; font-size: clamp(2.45rem, 3.7vw, 3.7rem); line-height: .98; letter-spacing: -.064em; }
.product-gallery-heading > p { max-width: 545px; margin: 0 0 3px; color: var(--muted); font-size: .94rem; line-height: 1.62; }
.gallery-sequence {
  position: sticky;
  z-index: 4;
  top: 116px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  margin-top: 22px;
  padding: 12px 14px 11px;
  border: 1px solid rgba(155, 197, 217, .24);
  border-radius: 10px;
  background: rgba(11, 18, 27, .84);
  box-shadow: 0 14px 30px rgba(4, 8, 14, .16), inset 0 1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(14px) saturate(1.08);
}
.gallery-sequence a { position: relative; display: inline-flex; gap: 9px; align-items: center; min-height: 44px; padding: 7px 0; color: #7f8d9e; font-size: .59rem; font-weight: 730; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; transition: color .25s ease; }
.gallery-sequence a::after { position: absolute; right: 0; bottom: -13px; left: 0; height: 2px; background: #f09d70; opacity: 0; transform: scaleX(.35); transition: opacity .25s ease, transform .25s ease; content: ""; }
.gallery-sequence a:hover, .gallery-sequence a:focus-visible, .gallery-sequence a.is-active { color: #e7edf2; }
.gallery-sequence a.is-active::after { opacity: 1; transform: scaleX(1); }
.gallery-sequence a span { color: #6386a1; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.gallery-sequence a.is-active span { color: #f09d70; }
.product-gallery h2:focus {
  outline: 0;
  text-decoration: none;
  box-shadow: 0 5px 0 -3px rgba(119, 226, 209, .9), 0 0 24px rgba(119, 226, 209, .18);
  border-radius: 3px;
  text-shadow: 0 0 24px rgba(119, 226, 209, .18);
}
/* v3.0 chapter focus continuity (2028.04.16): chapter navigation adds a
   temporary heading focus target so deep links and keyboard users arrive at
   the same reading point. Keep every public chapter in the same quiet focus
   language as the gallery; this is presentation-only and never changes route,
   state, tenant data, or authority. */
body.landing-compact:not(.platform-mode) #landing-view > section h2:focus {
  outline: 0;
  text-decoration: none;
  box-shadow: 0 5px 0 -3px rgba(119, 226, 209, .9), 0 0 24px rgba(119, 226, 209, .18);
  border-radius: 3px;
  text-shadow: 0 0 24px rgba(119, 226, 209, .18);
}
.gallery-status { margin-left: auto; color: #6f8598; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gallery-status::before { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: #88d2b4; box-shadow: 0 0 10px rgba(136, 210, 180, .5); content: ""; }
.gallery-progress { position: relative; flex: 0 0 82px; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(126, 171, 203, .16); }
.gallery-progress i { display: block; width: var(--gallery-progress, 33%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f09d70, #8bd1b0); box-shadow: 0 0 12px rgba(240, 157, 112, .38); transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.product-gallery[data-gallery-active="response-desk"] .gallery-progress i { background: linear-gradient(90deg, #75b9f8, #8bd1b0); box-shadow: 0 0 12px rgba(117, 185, 248, .38); }
.product-gallery[data-gallery-active="case-room"] .gallery-progress i { background: linear-gradient(90deg, #f09d70, #f4c27e); box-shadow: 0 0 12px rgba(240, 157, 112, .38); }
.product-gallery[data-gallery-active="product-context"] .gallery-progress i { background: linear-gradient(90deg, #bba4ee, #75b9f8); box-shadow: 0 0 12px rgba(187, 164, 238, .38); }
.product-gallery[data-gallery-active="response-desk"] .product-shot.is-spotlight::before { border-color: rgba(117, 185, 248, .3); background: linear-gradient(145deg, rgba(117, 185, 248, .14), transparent 45%, rgba(139, 211, 177, .05)); }
.product-gallery[data-gallery-active="case-room"] .product-shot.is-spotlight::before { border-color: rgba(240, 157, 112, .3); background: linear-gradient(145deg, rgba(240, 157, 112, .1), transparent 45%, rgba(244, 194, 126, .05)); }
.product-gallery[data-gallery-active="product-context"] .product-shot.is-spotlight::before { border-color: rgba(187, 164, 238, .3); background: linear-gradient(145deg, rgba(187, 164, 238, .1), transparent 45%, rgba(117, 185, 248, .05)); }
.product-gallery-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 14px; margin-top: 30px; }
.product-shot { position: relative; align-self: start; display: block; width: 100%; margin: 0; color: inherit; text-align: left; text-decoration: none; transition: opacity .35s ease, filter .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.product-gallery-grid > .product-shot { min-height: 104px; padding: 20px; border: 1px solid rgba(155, 197, 217, .2); border-radius: 14px; background: linear-gradient(145deg, rgba(31, 45, 72, .55), rgba(11, 18, 27, .78)); scroll-margin-top: 110px; }
@media (min-width: 681px) { .product-gallery > .product-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.product-gallery-grid > .product-shot strong, .product-gallery-grid > .product-shot span { display: block; }
.product-gallery-grid > .product-shot strong { margin-bottom: 8px; color: #eef5f8; font-size: 1rem; }
.product-gallery-grid > .product-shot span { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.product-shot.is-spotlight::before { position: absolute; z-index: -1; inset: -9px; border: 1px solid rgba(117, 185, 248, .24); border-radius: 19px; background: linear-gradient(145deg, rgba(117, 185, 248, .14), transparent 45%, rgba(240, 157, 112, .06)); box-shadow: 0 30px 74px rgba(4, 8, 14, .28); pointer-events: none; content: ""; }
/* Keep adjacent product surfaces legible while the selected surface leads.
   The inactive state is a focus cue, not a disabled or unfinished screen. */
.product-gallery.has-spotlight .product-shot:not(.is-spotlight) { opacity: .86; filter: saturate(.9) brightness(.96); transform: scale(.992); }
.product-gallery.has-spotlight .product-shot:not(.is-spotlight):hover, .product-gallery.has-spotlight .product-shot:not(.is-spotlight):focus-within { opacity: 1; filter: saturate(1); transform: translateY(-2px) scale(1); }
.product-gallery.has-spotlight .product-shot.is-spotlight { transform: translateY(-7px); }
.product-gallery[data-gallery-active="case-room"] [data-gallery-shot="case-room"],
.product-gallery[data-gallery-active="product-context"] [data-gallery-shot="product-context"] {
  grid-column: 1;
  grid-row: span 2;
}
.product-gallery[data-gallery-active="case-room"] .product-shot-wide,
.product-gallery[data-gallery-active="product-context"] .product-shot-wide {
  grid-column: 2;
  grid-row: 1;
}
.product-gallery[data-gallery-active="case-room"] [data-gallery-shot="product-context"],
.product-gallery[data-gallery-active="product-context"] [data-gallery-shot="case-room"] {
  grid-column: 2;
  grid-row: 2;
}
.product-shot:hover { transform: translateY(-7px); }
.product-shot:active { transform: translateY(-1px) scale(.998); }
.product-shot:focus-visible {
  outline: 0;
  border-radius: 19px;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, .72), 0 0 0 6px rgba(167, 139, 250, .14), 0 18px 44px rgba(7, 13, 24, .24);
}
.product-shot:focus-visible .shot-window { border-color: rgba(155, 230, 242, .72); }
.product-shot:hover .shot-window { border-color: rgba(145, 203, 240, .42); box-shadow: 0 30px 72px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.product-shot.is-spotlight:focus-visible .shot-window { border-color: rgba(155, 230, 242, .72); }
.product-shot.is-spotlight figcaption strong { color: #f0b28f; }
.product-shot-wide { grid-row: span 2; }
.shot-window { position: relative; min-height: 230px; overflow: hidden; border: 1px solid rgba(132, 175, 220, .28); border-radius: 13px; background: linear-gradient(145deg, #1c2f44, #0b111b 74%); box-shadow: 0 25px 60px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045); transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.product-shot-wide .shot-window { min-height: 414px; }
.shot-window::after { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 38%, rgba(104, 162, 230, .05)); pointer-events: none; content: ""; }
.product-shot.is-spotlight .shot-window::before { position: absolute; z-index: 2; top: 42px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 173, 137, .45), rgba(131, 197, 233, .55), transparent); opacity: .72; animation: productScan 6.4s ease-in-out infinite; pointer-events: none; content: ""; }
@media(hover:hover)and(pointer:fine)and(min-width:981px) {
  .product-shot:hover .shot-window { transform: perspective(1200px) rotateX(1deg); }
}
.shot-chrome { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 15px; border-bottom: 1px solid rgba(157, 199, 228, .12); color: #b7c3d0; font-size: .57rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
.shot-chrome b { color: #f0ac86; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; white-space: nowrap; }
.shot-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 16px 17px 0; }
.shot-search { min-width: 0; overflow: hidden; padding: 8px 10px; border: 1px solid rgba(155, 197, 217, .14); border-radius: 6px; color: #75869a; background: rgba(4, 11, 19, .38); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.shot-avatar { display: inline-grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(240, 157, 112, .46); border-radius: 50%; color: #f0ae8d; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.shot-layout { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 18px 17px 20px; }
.shot-sidebar { display: grid; align-content: start; gap: 12px; padding-top: 4px; }
.shot-sidebar i { display: block; width: 22px; height: 5px; border-radius: 999px; background: rgba(132, 181, 224, .28); }
.shot-sidebar i:first-child { background: #f09d70; }
.shot-main { min-width: 0; }
.shot-title small, .shot-case-head small, .shot-case-grid small { display: block; color: #7e8da0; font-size: .53rem; letter-spacing: .07em; text-transform: uppercase; }
.shot-title span { display: block; margin-bottom: 6px; color: #84c5eb; font-size: .56rem; font-weight: 740; letter-spacing: .1em; text-transform: uppercase; }
.shot-title strong { display: block; color: #edf1f5; font-size: 1.02rem; letter-spacing: -.03em; }
.shot-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 20px; }
.shot-metrics span { display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(132, 175, 220, .15); border-radius: 7px; background: rgba(11, 20, 31, .58); }
.shot-metrics small { color: #7e8da0; font-size: .49rem; text-transform: uppercase; letter-spacing: .05em; }
.shot-metrics b { color: #eef2f6; font-size: 1.1rem; font-weight: 650; }
.shot-metrics b.shot-state { color: #d9eff8; font-size: .67rem; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }
.shot-intake-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; margin-top: 14px; padding: 8px 9px; border: 1px solid rgba(126, 201, 233, .14); border-radius: 8px; background: linear-gradient(90deg, rgba(14, 34, 52, .72), rgba(11, 20, 32, .5)); color: #b8cfdd; font-size: .55rem; letter-spacing: .02em; }
.shot-intake-rail > span:not(.shot-intake-label) { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid rgba(137, 205, 233, .14); border-radius: 999px; background: rgba(6, 16, 27, .48); color: #d4e6ef; }
.shot-intake-label { margin-right: auto; color: #7f9bad; font: 700 .48rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
.shot-intake-dot { width: 5px; height: 5px; border-radius: 50%; background: #83c9e9; box-shadow: 0 0 8px rgba(131, 201, 233, .6); }
.shot-intake-vdp { background: #f0a073; box-shadow: 0 0 8px rgba(240, 160, 115, .65); }
.shot-intake-bounty { background: #a998ef; box-shadow: 0 0 8px rgba(169, 152, 239, .6); }
.shot-intake-scan { background: #8bd3b0; box-shadow: 0 0 8px rgba(139, 211, 176, .6); }
.product-shot[data-gallery-shot="response-desk"].is-spotlight .shot-intake-rail { animation: intakeRailPulse 6s ease-in-out infinite; }
@keyframes intakeRailPulse { 0%, 100% { border-color: rgba(126, 201, 233, .14); box-shadow: inset 0 0 0 rgba(126, 201, 233, 0); } 50% { border-color: rgba(126, 201, 233, .3); box-shadow: inset 0 0 22px rgba(68, 160, 207, .06); } }
.shot-table { display: grid; gap: 0; margin-top: 14px; border-top: 1px solid rgba(157, 199, 228, .12); }
.shot-table span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(157, 199, 228, .1); color: #c5d0db; font-size: .64rem; }
.shot-table em { color: #f0ad89; font-size: .52rem; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.shot-dot { width: 6px; height: 6px; border-radius: 50%; background: #f09d70; box-shadow: 0 0 9px currentColor; }
.dot-cool { color: #83c9ef; background: #83c9ef; }
.dot-green { color: #88d2b4; background: #88d2b4; }
.product-shot[data-gallery-shot="response-desk"].is-spotlight .shot-table span { animation: shotRowPulse 5.4s ease-in-out infinite; }
.product-shot[data-gallery-shot="response-desk"].is-spotlight .shot-table span:nth-child(2) { animation-delay: 1.2s; }
.product-shot[data-gallery-shot="response-desk"].is-spotlight .shot-table span:nth-child(3) { animation-delay: 2.4s; }
.shot-case-head { display: grid; gap: 7px; padding: 24px 20px 20px; }
.shot-case-head strong { max-width: 250px; color: #f0f3f6; font-size: 1rem; letter-spacing: -.03em; line-height: 1.18; }
.shot-case-head span { color: #9dabb9; font-size: .62rem; }
.shot-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 20px; border-top: 1px solid rgba(157, 199, 228, .12); border-bottom: 1px solid rgba(157, 199, 228, .12); }
.shot-case-grid div { display: grid; gap: 6px; padding: 14px 9px 14px 0; }
.shot-case-grid div + div { padding-left: 9px; border-left: 1px solid rgba(157, 199, 228, .12); }
.shot-case-grid b { color: #dce5ed; font-size: .68rem; font-weight: 620; }
.shot-control-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 13px 20px 0; color: #86c5e5; font-size: .5rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
.shot-control-heading small { color: #71879a; font-size: .46rem; font-weight: 550; letter-spacing: .015em; text-transform: none; }
.shot-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 20px 0; }
.shot-control-grid span { display: grid; gap: 4px; min-width: 0; padding: 8px 7px; border: 1px solid rgba(141, 192, 220, .13); border-radius: 7px; background: rgba(10, 22, 34, .48); }
.shot-control-grid small { overflow: hidden; color: #7e8da0; font-size: .45rem; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.shot-control-grid b { color: #e2c092; font-size: .56rem; font-weight: 720; letter-spacing: .035em; text-transform: uppercase; }
.shot-control-grid span:nth-child(2) b { color: #8ed0ee; }
.shot-control-grid span:nth-child(3) b { color: #d2b6f1; }
.shot-control-grid span:nth-child(4) b { color: #a7d8b9; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-control-grid span { animation: controlGatePulse 5.6s ease-in-out infinite; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-control-grid span:nth-child(2) { animation-delay: .7s; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-control-grid span:nth-child(3) { animation-delay: 1.4s; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-control-grid span:nth-child(4) { animation-delay: 2.1s; }
@keyframes controlGatePulse { 0%, 100% { border-color: rgba(141, 192, 220, .13); transform: translateY(0); } 50% { border-color: rgba(141, 192, 220, .3); transform: translateY(-1px); } }
.shot-evidence { display: grid; gap: 8px; margin: 19px 20px; }
.shot-evidence span { color: #84c5eb; font-size: .53rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
.shot-evidence i { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, rgba(129, 194, 235, .45), rgba(129, 194, 235, .08)); }
.shot-evidence i:nth-child(3) { width: 72%; }
.shot-evidence i:nth-child(4) { width: 48%; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-evidence i { animation: evidenceBasisPulse 4.8s ease-in-out infinite; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-evidence i:nth-child(3) { animation-delay: .8s; }
.product-shot[data-gallery-shot="case-room"].is-spotlight .shot-evidence i:nth-child(4) { animation-delay: 1.6s; }
.shot-graph { position: relative; min-height: 205px; margin: 5px 12px 0; }
.shot-context-coverage { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 12px 0; padding-top: 10px; border-top: 1px solid rgba(128, 188, 230, .14); }
.shot-context-coverage span { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid rgba(128, 188, 230, .2); border-radius: 999px; color: #9db8cc; background: rgba(13, 24, 36, .62); font: 700 .48rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.shot-context-coverage span::before { width: 4px; height: 4px; margin-right: 5px; border: 1px solid #83c5e9; border-radius: 50%; background: rgba(131, 197, 233, .2); box-shadow: 0 0 7px rgba(131, 197, 233, .28); content: ""; }
.shot-context-coverage span:nth-child(2)::before { border-color: #f0a074; background: rgba(240, 160, 116, .2); box-shadow: 0 0 7px rgba(240, 160, 116, .28); }
.shot-context-coverage span:nth-child(3)::before { border-color: #9ad9bf; background: rgba(154, 217, 191, .2); box-shadow: 0 0 7px rgba(154, 217, 191, .28); }
.shot-context-coverage span:nth-child(4)::before { border-color: #bba4ee; background: rgba(187, 164, 238, .2); box-shadow: 0 0 7px rgba(187, 164, 238, .28); }
.graph-node { position: absolute; z-index: 1; display: grid; gap: 3px; min-width: 80px; padding: 9px 10px; border: 1px solid rgba(128, 188, 230, .31); border-radius: 8px; background: rgba(13, 24, 36, .92); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.graph-node b { color: #e9eff4; font-size: .67rem; font-weight: 650; }
.graph-node small { color: #83c5e9; font-size: .49rem; letter-spacing: .06em; text-transform: uppercase; }
.product-shot.is-spotlight .graph-node { animation: contextNodePulse 3.8s ease-in-out infinite; }
.product-shot.is-spotlight .graph-release { animation-delay: .55s; }
.product-shot.is-spotlight .graph-component { animation-delay: 1.05s; }
.product-shot.is-spotlight .graph-sbom { animation-delay: 1.55s; }
.graph-product { top: 18px; left: 8px; border-color: rgba(240, 157, 112, .5); }
.graph-release { top: 18px; right: 8px; }
.graph-component { bottom: 18px; left: 13px; }
.graph-sbom { right: 17px; bottom: 18px; }
.graph-core { position: absolute; z-index: 1; top: 50%; left: 50%; width: 12px; height: 12px; border: 1px solid rgba(240, 157, 112, .72); border-radius: 50%; background: #111b28; box-shadow: 0 0 0 6px rgba(240, 157, 112, .055), 0 0 22px rgba(117, 185, 248, .32); transform: translate(-50%, -50%); }
.graph-core::after { position: absolute; inset: 3px; border-radius: inherit; background: #f0a073; box-shadow: 0 0 10px rgba(240, 160, 116, .75); content: ""; }
.graph-line { position: absolute; z-index: 0; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .78), rgba(124, 190, 230, .46)); transform-origin: left center; }
.line-one { top: 18%; left: 11%; width: 78%; transform: rotate(0deg); }
.line-two { top: 22%; left: 16%; width: 34%; transform: rotate(61deg); }
.line-three { top: 22%; left: 84%; width: 34%; transform: rotate(119deg); }
.product-shot.is-spotlight .graph-line { background: linear-gradient(90deg, rgba(240, 157, 112, .18), rgba(240, 157, 112, .9), rgba(124, 190, 230, .48), rgba(124, 190, 230, .12)); background-size: 220% 100%; animation: contextTrace 3.4s ease-in-out infinite; }
.product-shot.is-spotlight .line-two { animation-delay: .45s; }
.product-shot.is-spotlight .line-three { animation-delay: .9s; }
.product-shot figcaption { display: grid; gap: 4px; padding: 14px 4px 0; }
.product-shot figcaption strong { color: #e9eef3; font-size: .82rem; letter-spacing: -.01em; }
.product-shot figcaption span { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.product-gallery-boundary { margin: 26px 0 0; color: #758596; font-size: .65rem; line-height: 1.5; }

.trust-story { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(54px, 8vw, 120px); margin-top: 84px; padding: 74px 0 8px; border-top: 1px solid rgba(155, 197, 217, .17); background: linear-gradient(180deg, rgba(17, 24, 35, .16), transparent 84%); }
.trust-story-intro h2 { max-width: 560px; margin: 0 0 18px; font-size: clamp(2.35rem, 3.55vw, 3.5rem); line-height: .99; letter-spacing: -.064em; }
.trust-story-intro > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.trust-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(155, 197, 217, .17); border-bottom: 1px solid rgba(155, 197, 217, .17); }
.trust-story-grid article { position: relative; min-height: 230px; padding: 28px 22px 27px; border-right: 1px solid var(--line); background: linear-gradient(160deg, rgba(24, 35, 58, .34), rgba(8, 12, 19, .05)); transition: background .22s ease, border-color .22s ease, opacity .32s ease, filter .32s ease, transform .32s ease, box-shadow .32s ease; }
.trust-story-grid article::before { position: absolute; top: 0; right: 22px; left: 22px; height: 2px; background: linear-gradient(90deg, rgba(127, 196, 235, .7), transparent); content: ""; opacity: .38; }
.trust-story-grid article:nth-child(2)::before { background: linear-gradient(90deg, rgba(240, 157, 112, .78), transparent); }
.trust-story-grid article:nth-child(3)::before { background: linear-gradient(90deg, rgba(137, 211, 177, .72), transparent); }
.trust-story-grid article:last-child { border-right: 0; }
.trust-story.has-spotlight .trust-story-grid article:not(.is-trust-spotlight) { opacity: .95; filter: saturate(.98); transform: scale(.996); }
.trust-story.has-spotlight .trust-story-grid article.is-trust-spotlight { position: relative; z-index: 2; border-color: rgba(130, 194, 232, .28); background: linear-gradient(160deg, rgba(30, 45, 61, .54), rgba(8, 13, 20, .14)); box-shadow: inset 0 2px 0 rgba(240, 157, 112, .72), 0 20px 48px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.trust-story-intro::after, .customer-fit-copy::after { display: block; width: min(220px, 74%); height: 2px; margin-top: 24px; background: linear-gradient(90deg, rgba(117, 185, 248, .72), transparent); content: ""; opacity: .8; transition: background .25s ease; }
.trust-story[data-trust-active="basis"] .trust-story-intro::after { background: linear-gradient(90deg, rgba(117, 185, 248, .72), transparent); }
.trust-story[data-trust-active="approval"] .trust-story-intro::after { background: linear-gradient(90deg, rgba(240, 157, 112, .78), transparent); }
.trust-story[data-trust-active="history"] .trust-story-intro::after { background: linear-gradient(90deg, rgba(137, 211, 177, .74), transparent); }
.trust-story-index { display: block; margin-bottom: 33px; color: #82c8ed; font: 700 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.trust-story-grid h3 { max-width: 180px; margin: 0 0 12px; font-size: 1.05rem; letter-spacing: -.03em; }
.trust-story-grid p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.62; }
.trust-proof { display: inline-flex; margin-top: 23px; padding: 5px 7px; border: 1px solid rgba(127, 196, 235, .22); border-radius: 999px; color: #86acc5; background: rgba(8, 18, 29, .5); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.trust-story-grid article:nth-child(2) .trust-proof { border-color: rgba(240, 157, 112, .24); color: #c99a82; }
.trust-story-grid article:nth-child(3) .trust-proof { border-color: rgba(137, 211, 177, .23); color: #91bba7; }

/* v3.0 trust-path polish: on wide screens the three existing trust lanes read
   as one review path. The spine and markers are decorative only; they do not
   encode a case state, approval, or tenant-derived relationship. */
@media (min-width: 981px) {
  .trust-story-grid { position: relative; overflow: visible; }
  .trust-story-grid::before { position: absolute; z-index: 0; top: 38px; right: 11%; left: 11%; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .24), rgba(240, 157, 112, .52), rgba(137, 211, 177, .4)); box-shadow: 0 0 14px rgba(117, 185, 248, .1); content: ""; pointer-events: none; }
  .trust-story-grid article { z-index: 1; }
  .trust-story-grid article::after { position: absolute; z-index: 2; top: 34px; left: 50%; width: 8px; height: 8px; border: 1px solid rgba(117, 185, 248, .78); border-radius: 50%; background: #0e1722; box-shadow: 0 0 0 4px rgba(117, 185, 248, .07), 0 0 14px rgba(117, 185, 248, .18); content: ""; transform: translateX(-50%); transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; pointer-events: none; }
  .trust-story-grid article:nth-child(2)::after { border-color: rgba(240, 157, 112, .82); box-shadow: 0 0 0 4px rgba(240, 157, 112, .07), 0 0 14px rgba(240, 157, 112, .18); }
  .trust-story-grid article:nth-child(3)::after { border-color: rgba(137, 211, 177, .8); box-shadow: 0 0 0 4px rgba(137, 211, 177, .07), 0 0 14px rgba(137, 211, 177, .18); }
  .trust-story-grid article.is-trust-spotlight::after { background: #172735; box-shadow: 0 0 0 5px rgba(117, 185, 248, .11), 0 0 22px rgba(117, 185, 248, .34); }
  .trust-story-grid article:nth-child(2).is-trust-spotlight::after { box-shadow: 0 0 0 5px rgba(240, 157, 112, .11), 0 0 22px rgba(240, 157, 112, .34); }
  .trust-story-grid article:nth-child(3).is-trust-spotlight::after { box-shadow: 0 0 0 5px rgba(137, 211, 177, .11), 0 0 22px rgba(137, 211, 177, .34); }
}

.customer-fit { margin-top: 76px; padding-top: 78px; background: linear-gradient(180deg, rgba(17, 24, 35, .12), transparent 84%); }
.customer-fit-intro { gap: clamp(50px, 7vw, 108px); }
.customer-fit-intro h2 { max-width: 600px; font-size: clamp(2.45rem, 3.65vw, 3.55rem); line-height: .99; letter-spacing: -.064em; }
.customer-fit-grid { margin-top: 38px; border-top-color: rgba(155, 197, 217, .17); border-bottom-color: rgba(155, 197, 217, .17); }
.customer-fit-grid article { position: relative; overflow: hidden; min-height: 224px; padding: 34px 29px; background: linear-gradient(160deg, rgba(18, 27, 40, .44), rgba(8, 12, 19, .04)); transition: background .22s ease, border-color .22s ease, transform .22s ease; }
.customer-fit-grid article::before { position: absolute; top: 0; right: 29px; left: 29px; height: 2px; background: linear-gradient(90deg, rgba(117, 185, 248, .74), transparent); content: ""; opacity: .55; }
.customer-fit-grid article::after { position: absolute; top: 17px; right: 22px; width: 74px; height: 74px; border: 1px solid rgba(117, 185, 248, .12); border-radius: 50%; content: ""; opacity: .7; transform: translate(22px, -22px); }
.customer-fit-grid article:nth-child(2)::before { background: linear-gradient(90deg, rgba(240, 157, 112, .82), transparent); }
.customer-fit-grid article:nth-child(2)::after { border-color: rgba(240, 157, 112, .16); }
.customer-fit-grid article:nth-child(3)::before { background: linear-gradient(90deg, rgba(137, 211, 177, .76), transparent); }
.customer-fit-grid article:nth-child(3)::after { border-color: rgba(137, 211, 177, .15); }
.customer-fit-grid article:hover, .customer-fit-grid article:focus-within { background: linear-gradient(160deg, rgba(28, 43, 59, .58), rgba(8, 13, 20, .14)); border-color: rgba(130, 194, 232, .28); transform: translateY(-3px); }
.customer-fit.has-spotlight .customer-fit-grid article:not(.is-role-spotlight) { opacity: .94; filter: saturate(.96); transform: scale(.996); }
.customer-fit.has-spotlight .customer-fit-grid article.is-role-spotlight { position: relative; z-index: 2; border-color: rgba(130, 194, 232, .36); box-shadow: inset 0 2px 0 rgba(117, 185, 248, .72), 0 24px 56px rgba(0, 0, 0, .24); }
.customer-fit.has-spotlight .customer-fit-grid article:not(.is-role-spotlight):hover, .customer-fit.has-spotlight .customer-fit-grid article:not(.is-role-spotlight):focus-within { opacity: .98; filter: saturate(1); transform: translateY(-2px) scale(1); }
.customer-fit[data-role-active="psirt"] .customer-fit-copy::after { background: linear-gradient(90deg, rgba(117, 185, 248, .74), transparent); }
.customer-fit[data-role-active="engineering"] .customer-fit-copy::after { background: linear-gradient(90deg, rgba(240, 157, 112, .8), transparent); }
.customer-fit[data-role-active="assurance"] .customer-fit-copy::after { background: linear-gradient(90deg, rgba(137, 211, 177, .76), transparent); }
.fit-index { margin-bottom: 29px; font-size: .63rem; }
.customer-fit-grid h3 { margin-bottom: 12px; font-size: 1.06rem; letter-spacing: -.03em; }
.role-surfaces { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
.role-surfaces li { padding: 6px 8px; border: 1px solid rgba(117, 185, 248, .18); border-radius: 999px; color: #8aa5b9; background: rgba(9, 18, 29, .46); font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.customer-fit-grid article:nth-child(2) .role-surfaces li { border-color: rgba(240, 157, 112, .2); }
.customer-fit-grid article:nth-child(3) .role-surfaces li { border-color: rgba(137, 211, 177, .2); }
.customer-fit-grid article:hover .role-surfaces li, .customer-fit-grid article:focus-within .role-surfaces li { color: #dceaf2; border-color: rgba(117, 185, 248, .38); background: rgba(25, 47, 65, .58); }

/* v3.0 role-path polish: show the shared response record connecting the
   existing role surfaces on wide screens. Markers are decorative and
   pointer-inert; they do not represent role membership, permissions, or live
   tenant relationships. */
@media (min-width: 981px) {
  .customer-fit-grid { position: relative; overflow: visible; }
  .customer-fit-grid::before { position: absolute; z-index: 0; top: 39px; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .24), rgba(240, 157, 112, .5), rgba(137, 211, 177, .38)); box-shadow: 0 0 14px rgba(117, 185, 248, .1); content: ""; pointer-events: none; }
  .customer-fit-grid article { z-index: 1; }
  .role-path-node { position: absolute; z-index: 2; top: 35px; left: 50%; display: block; width: 8px; height: 8px; border: 1px solid rgba(117, 185, 248, .8); border-radius: 50%; background: #0e1722; box-shadow: 0 0 0 4px rgba(117, 185, 248, .07), 0 0 14px rgba(117, 185, 248, .18); transform: translateX(-50%); pointer-events: none; }
  .customer-fit-grid article:nth-child(3) .role-path-node { border-color: rgba(137, 211, 177, .82); box-shadow: 0 0 0 4px rgba(137, 211, 177, .07), 0 0 14px rgba(137, 211, 177, .18); }
  .customer-fit-grid article.is-role-spotlight .role-path-node { background: #172735; box-shadow: 0 0 0 5px rgba(117, 185, 248, .11), 0 0 22px rgba(117, 185, 248, .34); }
  .customer-fit-grid article:nth-child(2).is-role-spotlight .role-path-node { box-shadow: 0 0 0 5px rgba(240, 157, 112, .11), 0 0 22px rgba(240, 157, 112, .34); }
  .customer-fit-grid article:nth-child(3).is-role-spotlight .role-path-node { box-shadow: 0 0 0 5px rgba(137, 211, 177, .11), 0 0 22px rgba(137, 211, 177, .34); }
}

.operating-scale { margin-top: 88px; padding: 78px 0 8px; border-top: 1px solid rgba(155, 197, 217, .17); background: linear-gradient(180deg, rgba(17, 24, 35, .16), transparent 84%); }
.operating-scale-intro { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(50px, 7vw, 108px); align-items: start; }
.operating-scale-intro h2 { max-width: 620px; margin: 0 0 18px; font-size: clamp(2.35rem, 3.55vw, 3.5rem); line-height: .99; letter-spacing: -.064em; }
.operating-scale-copy::after { display: block; width: min(220px, 74%); height: 2px; margin-top: 24px; background: linear-gradient(90deg, rgba(117, 185, 248, .72), transparent); content: ""; opacity: .8; transition: background .25s ease; }
.operating-scale[data-scale-active="sentinel"] .operating-scale-copy::after { background: linear-gradient(90deg, rgba(117, 185, 248, .72), transparent); }
.operating-scale[data-scale-active="squadron"] .operating-scale-copy::after { background: linear-gradient(90deg, rgba(240, 157, 112, .8), transparent); }
.operating-scale[data-scale-active="citadel"] .operating-scale-copy::after { background: linear-gradient(90deg, rgba(137, 211, 177, .76), transparent); }
.operating-scale-intro > p:last-child { max-width: 610px; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.operating-scale-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 1px solid rgba(155, 197, 217, .17); border-bottom: 1px solid rgba(155, 197, 217, .17); }
.operating-scale-grid::before { position: absolute; z-index: 0; top: 43px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .18), rgba(240, 157, 112, .52), rgba(137, 211, 177, .24)); content: ""; }
.scale-card { position: relative; z-index: 1; min-height: 254px; padding: 28px 29px 27px; border-right: 1px solid var(--line); background: linear-gradient(160deg, rgba(18, 24, 35, .92), rgba(8, 12, 19, .96)); transition: background .2s ease, transform .2s ease; }
.scale-card:last-child { border-right: 0; }
.scale-card:hover { background: linear-gradient(160deg, rgba(34, 46, 65, .54), rgba(10, 14, 22, .16)); transform: translateY(-3px); }
.operating-scale.has-spotlight .scale-card:not(.is-scale-spotlight) { opacity: .9; filter: saturate(.94); transform: scale(.996); }
.operating-scale.has-spotlight .scale-card.is-scale-spotlight { position: relative; z-index: 2; border-color: rgba(130, 194, 232, .28); box-shadow: inset 0 2px 0 rgba(117, 185, 248, .72), 0 20px 48px rgba(0, 0, 0, .18); }
.operating-scale.has-spotlight .scale-card:not(.is-scale-spotlight):hover, .operating-scale.has-spotlight .scale-card:not(.is-scale-spotlight):focus-within { opacity: .98; filter: saturate(1); transform: translateY(-2px) scale(1); }
.scale-card-featured { background: linear-gradient(160deg, rgba(43, 48, 68, .5), rgba(15, 22, 33, .18)); box-shadow: inset 0 2px 0 rgba(240, 157, 112, .76); }
.scale-card-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 35px; }
.scale-index { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(130, 200, 237, .42); border-radius: 50%; color: #82c8ed; background: #121b27; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.scale-name { color: #f0a074; font-size: .65rem; font-weight: 780; letter-spacing: .18em; text-transform: uppercase; }
.scale-card:nth-child(1) .scale-name { color: #83c9ef; }
.scale-card:nth-child(2) .scale-name { color: #f0a074; }
.scale-card:nth-child(3) .scale-name { color: #9ad9bf; }
.scale-card h3 { max-width: 260px; margin: 0 0 12px; font-size: 1.14rem; letter-spacing: -.035em; }
.scale-card p { max-width: 300px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.62; }
.scale-outcome { display: inline-block; margin-top: 24px; color: #a8cbea; font-size: .6rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }

.services-panel { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(54px, 8vw, 120px); margin-top: 68px; padding: 58px 0; border-top: 1px solid rgba(155, 197, 217, .17); border-bottom: 1px solid rgba(155, 197, 217, .17); background: linear-gradient(180deg, rgba(24, 42, 64, .24), transparent 84%); }
.services-panel::before { position: absolute; bottom: -72px; left: 22%; width: 1px; height: 72px; background: linear-gradient(180deg, rgba(117, 185, 248, .42), rgba(240, 157, 112, .68) 72%, transparent); content: ""; pointer-events: none; }
.services-intro { position: relative; }
.services-intro::after {
  display: block;
  width: min(100%, 348px);
  height: 176px;
  margin-top: 32px;
  border: 1px solid rgba(124, 180, 220, .2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(221, 231, 241, .9) 0 3px, rgba(117, 185, 248, .12) 4px 17px, transparent 18px),
    radial-gradient(circle at 17% 29%, rgba(240, 157, 112, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 29%, rgba(117, 185, 248, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 17% 74%, rgba(137, 211, 177, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 74%, rgba(190, 164, 238, .95) 0 3px, transparent 4px),
    linear-gradient(28deg, transparent 0 48.8%, rgba(240, 157, 112, .38) 49% 49.6%, transparent 49.8% 100%),
    linear-gradient(152deg, transparent 0 48.8%, rgba(117, 185, 248, .38) 49% 49.6%, transparent 49.8% 100%),
    linear-gradient(208deg, transparent 0 48.8%, rgba(137, 211, 177, .32) 49% 49.6%, transparent 49.8% 100%),
    linear-gradient(332deg, transparent 0 48.8%, rgba(190, 164, 238, .32) 49% 49.6%, transparent 49.8% 100%),
    repeating-linear-gradient(90deg, rgba(134, 186, 223, .045) 0 1px, transparent 1px 35px),
    repeating-linear-gradient(0deg, rgba(134, 186, 223, .04) 0 1px, transparent 1px 35px),
    linear-gradient(145deg, rgba(17, 31, 45, .82), rgba(8, 13, 21, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .18);
  content: "";
  animation: serviceOrbit 13s ease-in-out infinite alternate;
}
.services-intro h2 { max-width: 565px; margin: 0 0 18px; font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.06em; }
.services-intro > p:not(.eyebrow) { max-width: 535px; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.services-intro .button { margin-top: 20px; }
.services-loop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; align-items: center; max-width: 470px; margin-top: 46px; padding: 15px 16px; border: 1px solid rgba(117, 185, 248, .2); border-radius: 12px; background: linear-gradient(145deg, rgba(20, 38, 55, .66), rgba(9, 16, 25, .72)); box-shadow: inset 0 1px 0 rgba(235, 250, 255, .04), 0 18px 42px rgba(0, 0, 0, .16); }
.services-loop::before { position: absolute; top: 0; right: 28px; left: 28px; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .75), rgba(240, 157, 112, .7), rgba(137, 211, 177, .72)); content: ""; opacity: .75; }
.services-loop span { display: grid; gap: 3px; min-width: 0; }
.services-loop b { color: #e9f6fb; font-size: .72rem; letter-spacing: -.01em; }
.services-loop small { color: #87a1b2; font: 700 .48rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .095em; text-transform: uppercase; }
.services-loop i { position: relative; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .56), rgba(240, 157, 112, .62)); }
.services-loop i::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; border: 1px solid rgba(240, 157, 112, .72); border-radius: 50%; background: #111923; content: ""; }
.services-grid { display: grid; align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.services-grid article { position: relative; min-height: 126px; overflow: hidden; padding: 27px 20px 26px 58px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, rgba(20, 34, 48, .28), rgba(8, 14, 22, .12)); transition: background .22s ease, transform .22s ease, border-color .22s ease, opacity .32s ease, filter .32s ease, box-shadow .32s ease; }
.services-grid article::before { position: absolute; top: -34px; right: -26px; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 185, 248, .11), transparent 70%); content: ""; pointer-events: none; }
.services-grid article::after { position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .65), transparent 76%); opacity: .5; content: ""; }
.services-grid article:hover, .services-grid article:focus-within { background: linear-gradient(145deg, rgba(34, 54, 73, .48), rgba(10, 17, 26, .2)); border-color: rgba(130, 194, 232, .24); transform: translateY(-2px); }
.services-panel.has-spotlight .services-grid article:not(.is-service-spotlight) { opacity: .94; filter: saturate(.96); transform: scale(.996); }
.services-panel.has-spotlight .services-grid article.is-service-spotlight { position: relative; z-index: 2; border-color: rgba(130, 194, 232, .36); box-shadow: inset 0 2px 0 rgba(117, 185, 248, .72), 0 28px 64px rgba(0, 0, 0, .24); }
.services-panel.has-spotlight .services-grid article:not(.is-service-spotlight):hover, .services-panel.has-spotlight .services-grid article:not(.is-service-spotlight):focus-within { opacity: .98; filter: saturate(1); transform: translateY(-2px) scale(1); }
.services-panel[data-service-active="design"] .services-intro::after { border-color: rgba(117, 185, 248, .34); box-shadow: inset 0 1px 0 rgba(117, 185, 248, .28), 0 24px 60px rgba(0, 0, 0, .18); }
.services-panel[data-service-active="strategy"] .services-intro::after { border-color: rgba(240, 157, 112, .38); box-shadow: inset 0 1px 0 rgba(240, 157, 112, .3), 0 24px 60px rgba(0, 0, 0, .18); }
.services-panel[data-service-active="readiness"] .services-intro::after { border-color: rgba(137, 211, 177, .36); box-shadow: inset 0 1px 0 rgba(137, 211, 177, .28), 0 24px 60px rgba(0, 0, 0, .18); }
.services-panel[data-service-active="enablement"] .services-intro::after { border-color: rgba(190, 164, 238, .38); box-shadow: inset 0 1px 0 rgba(190, 164, 238, .3), 0 24px 60px rgba(0, 0, 0, .18); }
.trust-story-grid article:focus-visible, .customer-fit-grid article:focus-visible, .operating-scale .scale-card:focus-visible, .services-grid article:focus-visible { outline: 2px solid rgba(155, 230, 242, .9); outline-offset: -3px; box-shadow: 0 0 0 4px rgba(117, 185, 248, .16), inset 0 1px 0 rgba(235, 250, 255, .26); }
.services-grid article:nth-child(even) { border-right: 0; }
.services-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.services-grid article:nth-child(2)::before { background: radial-gradient(circle, rgba(240, 157, 112, .13), transparent 70%); }
.services-grid article:nth-child(2)::after { background: linear-gradient(90deg, rgba(240, 157, 112, .68), transparent 76%); }
.services-grid article:nth-child(3)::before { background: radial-gradient(circle, rgba(137, 211, 177, .12), transparent 70%); }
.services-grid article:nth-child(3)::after { background: linear-gradient(90deg, rgba(137, 211, 177, .64), transparent 76%); }
.services-grid article:nth-child(4)::before { background: radial-gradient(circle, rgba(190, 164, 238, .12), transparent 70%); }
.services-grid article:nth-child(4)::after { background: linear-gradient(90deg, rgba(190, 164, 238, .64), transparent 76%); }
.services-grid span { position: absolute; top: 25px; left: 20px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(143, 207, 237, .46); border-radius: 50%; color: #8fcfed; background: rgba(9, 18, 28, .66); font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.services-grid h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -.03em; }
.services-grid p { max-width: 500px; margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.6; }
/* v3.0 consulting-path polish: connect the four existing service lanes as
   one operating system on wide screens. This is a pointer-inert visual cue;
   it does not imply sequencing, entitlement, or a live service state. */
@media (min-width: 981px) {
  .services-grid { position: relative; overflow: visible; }
  .services-grid::before { position: absolute; z-index: 0; top: 50%; right: 9%; left: 9%; height: 1px; background: linear-gradient(90deg, transparent, rgba(117, 185, 248, .46) 18%, rgba(240, 157, 112, .55) 50%, rgba(137, 211, 177, .4) 82%, transparent); box-shadow: 0 0 14px rgba(117, 185, 248, .1); content: ""; pointer-events: none; }
  .services-grid::after { position: absolute; z-index: 0; top: 13%; bottom: 13%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(117, 185, 248, .35) 25%, rgba(190, 164, 238, .42) 75%, transparent); content: ""; pointer-events: none; }
  .services-grid article { z-index: 1; }
}

.early-access-panel { gap: clamp(52px, 8vw, 116px); margin-top: 56px; padding: 44px; border-color: rgba(130, 180, 219, .24); border-radius: 14px; background: radial-gradient(circle at 8% 8%, rgba(240, 157, 112, .08), transparent 34%), radial-gradient(circle at 92% 92%, rgba(117, 185, 248, .08), transparent 38%), #17233a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 22px 58px rgba(4, 8, 14, .16); }
.early-access-panel::before { top: 30px; right: 32px; left: 32px; height: 1px; background: linear-gradient(90deg, rgba(241,139,85,.78), rgba(117,185,248,.14) 48%, transparent); }
.early-access-panel h2 { margin-bottom: 13px; font-size: 2rem; letter-spacing: -.05em; }
.setup-boundary { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 8px; border: 1px solid rgba(240, 157, 112, .2); border-radius: 999px; color: #c09b88; background: rgba(39, 28, 29, .38); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.setup-boundary::before { width: 5px; height: 5px; border-radius: 50%; background: #f0a074; box-shadow: 0 0 8px rgba(240, 160, 116, .5); content: ""; }
.setup-boundary {
  border-color: rgba(137, 211, 177, .25);
  color: #9bd5c0;
  background: rgba(24, 58, 50, .32);
}
.setup-boundary::before {
  background: #89d3b1;
  box-shadow: 0 0 8px rgba(137, 211, 177, .5);
}
.setup-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.setup-route li { position: relative; display: grid; gap: 4px; min-width: 0; padding: 11px 12px 0 0; color: #687b8c; }
.setup-route li:not(:last-child)::after { position: absolute; top: 18px; right: 8px; left: 48px; height: 1px; background: rgba(117, 185, 248, .16); content: ""; }
.setup-route li span { color: #6686a0; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.setup-route li strong { color: #9aaaba; font-size: .71rem; font-weight: 700; }
.setup-route li small { color: #718294; font-size: .62rem; line-height: 1.35; }
.setup-route li.is-current span, .setup-route li.is-current strong { color: #82cfff; }
.setup-route li.is-current::before, .setup-route li.is-complete::before { position: absolute; top: 14px; left: 27px; width: 7px; height: 7px; border-radius: 50%; background: #82cfff; box-shadow: 0 0 0 4px rgba(130, 207, 255, .1), 0 0 12px rgba(130, 207, 255, .32); content: ""; }
.setup-route li.is-current { padding-left: 42px; }
.setup-route li.is-current::after { left: 56px; }
.setup-route li.is-complete { color: #8bb8a8; }
.setup-route li.is-complete span, .setup-route li.is-complete strong { color: #8bb8a8; }
.setup-route li.is-complete::before { background: #8bb8a8; box-shadow: 0 0 0 4px rgba(139, 184, 168, .08); }
/* v3.0 setup-path polish: keep every route stage visible on wide screens so
   the first action, review checkpoint, and governed-workspace handoff form one
   honest path. This follows existing route state classes only; it creates no
   new state, authority, or completion claim. */
@media (min-width: 981px) {
  .setup-route { position: relative; }
  .setup-route::before { position: absolute; z-index: 0; top: 17px; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .52), rgba(240, 157, 112, .48), rgba(137, 211, 177, .42)); box-shadow: 0 0 12px rgba(117, 185, 248, .08); content: ""; pointer-events: none; }
  .setup-route li { z-index: 1; }
  .setup-route li:not(.is-current):not(.is-complete)::before { position: absolute; top: 14px; left: 27px; width: 7px; height: 7px; border: 1px solid rgba(117, 185, 248, .42); border-radius: 50%; background: #111b27; content: ""; }
}
/* Setup-stage changes are a visual handoff only. A short settle keeps the
   route legible as the source moves from public context to review to access;
   state and authority still come from the existing workflow. */
.setup-route li.is-current { animation: setupStageArrive .34s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes setupStageArrive {
  from { opacity: .62; transform: translate3d(5px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Keep the product surface legible in the opening viewport. The stage rail is
   part of the product story, not below-the-fold decoration; desktop density is
   reduced here without changing the touch layout or the workspace authority
   model behind this public preview. */
@media (min-width: 981px) {
  .view { padding-top: 36px; }
  .signal-stage-marker { margin-top: 12px; }
  .signal-intro { padding: 23px 32px 19px; }
  .signal-intro h2 { font-size: clamp(1.72rem, 2.08vw, 2.22rem); }
  .workspace-psirtling { margin-bottom: 4px; padding-top: 9px; padding-bottom: 9px; }
  .workspace-preview-main .workspace-decision { padding-top: 16px; padding-bottom: 16px; }
  .workspace-context div { padding-top: 9px; padding-bottom: 9px; }
  .response-stage { min-height: 58px; padding-top: 10px; padding-bottom: 9px; }
  .response-stage span { margin-bottom: 8px; }
  .proof-line { padding-top: 12px; padding-bottom: 13px; }
  /* Keep the screenshot sequence available while the visitor studies the
     product surfaces. The rail is a visual wayfinding aid, not a new control
     plane, and leaves the actual gallery cards in normal document flow. */
  .product-gallery .gallery-sequence { position: sticky; z-index: 4; top: 116px; padding: 11px 13px 10px; border: 1px solid rgba(155, 197, 217, .24); border-radius: 10px; background: rgba(11, 18, 27, .84); box-shadow: 0 14px 30px rgba(4, 8, 14, .16), inset 0 1px 0 rgba(255, 255, 255, .025); backdrop-filter: blur(14px) saturate(1.08); }
  .product-gallery .gallery-sequence a::after { bottom: -11px; }
}
.feedback-form { padding: 30px; border-color: rgba(141, 193, 215, .18); border-radius: 12px; background: #131923; box-shadow: none; }
.section-heading, .workspace-heading { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.workspace-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.preview-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.section-heading h2, .dialog-header h2 { margin: 0; font-size: 1.75rem; letter-spacing: -.035em; }
.status-pill, .tag { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: rgba(255,255,255,.02); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.status-pill { max-width: min(100%, 260px); text-align: right; }
#public-preview[data-state] #preview-status { display: inline-flex; align-items: center; gap: 7px; }
#public-preview[data-state] #preview-status::before { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; content: ""; }
#public-preview[data-state="checking"] #preview-status,
#public-preview[data-state="not-found"] #preview-status { border-color: rgba(125, 211, 252, .45); color: #a8dcf7; background: rgba(125, 211, 252, .07); }
#public-preview[data-state="checking"] #preview-status::before { animation: previewStatusPulse 1.25s ease-in-out infinite; }
#public-preview[data-state="ready"] #preview-status { border-color: rgba(137, 211, 177, .42); color: #a4d6c2; background: rgba(137, 211, 177, .07); }
#public-preview[data-state="unavailable"] #preview-status,
#public-preview[data-state="incomplete"] #preview-status { border-color: rgba(240, 177, 140, .55); color: #f1b08c; background: rgba(106, 58, 45, .2); box-shadow: 0 0 0 3px rgba(240, 157, 112, .06); }
@keyframes previewStatusPulse {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  #public-preview[data-state="checking"] #preview-status::before { animation: none; }
}
.preview-signal-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.preview-signal-map { display: flex; gap: 3px; min-height: 62px; margin-top: 20px; padding: 3px; border: 1px solid rgba(132, 177, 218, .16); border-radius: 10px; background: rgba(8, 14, 22, .72); }
.preview-signal-map-segment { position: relative; display: grid; flex: var(--signal-weight) 1 0; align-content: center; min-width: 74px; gap: 4px; overflow: hidden; padding: 9px 11px; border: 0; border-radius: 7px; color: #aebdcb; background: rgba(47, 73, 101, .28); cursor: pointer; text-align: left; transition: flex-grow .24s ease, background .2s ease, color .2s ease, transform .2s ease; }
.preview-signal-map-segment::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: currentColor; opacity: .5; content: ""; }
.preview-signal-map-segment:hover, .preview-signal-map-segment:focus-visible, .preview-signal-map-segment.is-active { color: #eff6fb; background: rgba(54, 83, 113, .72); outline: 0; transform: translateY(-1px); }
.preview-signal-map-segment b { color: #83c9ef; font: 700 .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview-signal-map-segment span { overflow: hidden; color: inherit; font-size: .57rem; font-weight: 680; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.preview-signal-map-product b { color: #83c9ef; }
.preview-signal-map-audience b { color: #a4d6c2; }
.preview-signal-map-operating-context b { color: #f0c579; }
.preview-signal-map-program b { color: #bba4ee; }
.preview-signal-map-segment:focus-visible { box-shadow: 0 0 0 2px rgba(131, 201, 239, .7); }
.preview-review-rail { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 23px; padding: 10px 12px; border: 1px solid rgba(132,177,218,.14); border-radius: 8px; background: rgba(7, 14, 22, .42); color: #8496a8; font: 700 .54rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .075em; text-transform: uppercase; }
.preview-review-rail > span { display: inline-flex; align-items: center; gap: 6px; }
.preview-review-rail > span::before { width: 5px; height: 5px; border-radius: 50%; background: #83c9ef; box-shadow: 0 0 9px rgba(131, 201, 239, .38); content: ""; }
.preview-review-rail .preview-review-proposed { color: #f0a074; }
.preview-review-rail .preview-review-proposed::before { background: #f0a074; box-shadow: 0 0 9px rgba(240, 160, 116, .4); }
.preview-review-rail .preview-review-human { color: #a4d6c2; }
.preview-review-rail .preview-review-human::before { background: #a4d6c2; box-shadow: 0 0 9px rgba(164, 214, 194, .35); }
.preview-evidence-horizon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(117, 185, 248, .18); border-radius: 10px; background: linear-gradient(105deg, rgba(20, 37, 55, .68), rgba(14, 20, 29, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.preview-evidence-horizon-mark { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid rgba(240, 157, 112, .42); border-radius: 999px; color: #f4b08c; background: rgba(240, 157, 112, .08); font: 750 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.preview-evidence-horizon-copy { display: grid; gap: 2px; min-width: 0; }
.preview-evidence-horizon-copy strong { overflow: hidden; color: #e4edf5; font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.preview-evidence-horizon-copy span { overflow: hidden; color: #8ea3b5; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-evidence-horizon-meta { color: #86a8c0; font: 700 .53rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.preview-evidence-horizon { animation: previewHorizonIn .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes previewHorizonIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.preview-signal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(132, 177, 218, .2); border-radius: 999px; color: #9fb2c5; background: rgba(16, 27, 40, .58); font-size: .62rem; letter-spacing: .04em; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.preview-signal-chip:hover, .preview-signal-chip:focus-visible, .preview-signal-chip.is-active { border-color: rgba(240, 160, 116, .66); color: #e7edf2; background: rgba(38, 35, 40, .86); transform: translateY(-1px); }
.preview-signal-chip.is-active b { color: #ffd0b3; }
.preview-signal-chip b { color: #f0a074; font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview-signal-chip span { color: #aebbc9; }
.preview-filter-status { align-self: center; margin-left: auto; color: #6f8294; font: 650 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .045em; }
.preview-checked-sources { margin-top: 14px; border-top: 1px solid rgba(132, 177, 218, .13); border-bottom: 1px solid rgba(132, 177, 218, .13); }
.preview-checked-sources summary { display: inline-flex; padding: 11px 0; color: #86a1b4; cursor: pointer; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; list-style-position: inside; text-transform: uppercase; }
.preview-checked-sources summary::marker { color: #f0a074; }
.preview-checked-source-list { display: grid; gap: 6px; max-height: 180px; margin: 0 0 13px; padding: 0 0 0 18px; overflow: auto; }
.preview-checked-source-link { color: #83c9ef; font-size: .7rem; overflow-wrap: anywhere; text-decoration: none; }
.preview-checked-source-link:hover, .preview-checked-source-link:focus-visible { color: #e1f2fb; text-decoration: underline; text-underline-offset: 3px; }
.preview-signal-product b { color: #83c9ef; }
.preview-signal-audience b { color: #a4d6c2; }
.preview-signal-operating-context b { color: #f0c579; }
.preview-signal-organization b { color: #d2b1f1; }
.preview-signal-program b { color: #bba4ee; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 10px; margin-top: 14px; }
.preview-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,11,18,.42); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; animation: previewCardIn .46s cubic-bezier(.16, 1, .3, 1) both; }
.preview-card:nth-child(2) { animation-delay: .05s; }
.preview-card:nth-child(3) { animation-delay: .1s; }
.preview-card:nth-child(4) { animation-delay: .15s; }
.preview-card:nth-child(5) { animation-delay: .2s; }
.preview-card:nth-child(6) { animation-delay: .25s; }
.preview-card:hover, .preview-card:focus-within { border-color: rgba(132, 201, 239, .42); background: rgba(14, 24, 36, .68); box-shadow: 0 14px 30px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025); transform: translateY(-2px); }
.preview-card[hidden] { display: none; }
.preview-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #d2b1f1; content: ""; }
.preview-card::after { position: absolute; top: 0; right: 16px; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, rgba(210, 177, 241, .58)); content: ""; opacity: .8; }
.preview-card-organization::before { background: #d2b1f1; }
.preview-card-product::before { background: #83c9ef; }
.preview-card-audience::before { background: #a4d6c2; }
.preview-card-operating-context::before { background: #f0c579; }
.preview-card-program::before { background: #bba4ee; }
.preview-card-product::after { background: linear-gradient(90deg, transparent, rgba(131, 201, 239, .58)); }
.preview-card-audience::after { background: linear-gradient(90deg, transparent, rgba(164, 214, 194, .58)); }
.preview-card-operating-context::after { background: linear-gradient(90deg, transparent, rgba(240, 197, 121, .58)); }
.preview-card-program::after { background: linear-gradient(90deg, transparent, rgba(187, 164, 238, .58)); }
.preview-card span { display: block; margin-bottom: 7px; color: var(--muted); font: 650 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview-card strong { display: block; overflow-wrap: anywhere; font-size: .95rem; }
.preview-confidence { display: grid; gap: 7px; margin-top: 14px; }
.preview-confidence-label { color: #8ea2b4; font: 650 .59rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; text-transform: uppercase; }
.preview-confidence-track { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(132, 177, 218, .13); }
.preview-confidence-track::after { display: block; height: 100%; border-radius: inherit; background: #83c9ef; content: ""; }
.preview-confidence-high::after { width: 100%; background: linear-gradient(90deg, #83c9ef, #a4d6c2); }
.preview-confidence-medium::after { width: 70%; background: linear-gradient(90deg, #83c9ef, #f0c579); }
.preview-confidence-low::after { width: 42%; background: linear-gradient(90deg, #f0c579, #f0a074); }
.preview-card small { display: block; margin-top: 12px; color: var(--dim); }
.preview-card-provenance { display: inline-flex !important; align-items: center; gap: 6px; color: #91a9bb !important; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; text-transform: uppercase; }
.preview-card-provenance::before { width: 5px; height: 5px; border: 1px solid rgba(131, 201, 239, .62); border-radius: 50%; background: rgba(131, 201, 239, .16); content: ""; }
.preview-card-program .preview-card-provenance::before { border-color: rgba(187, 164, 238, .7); background: rgba(187, 164, 238, .18); }
.preview-card-decisions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(142, 182, 223, .12); }
.preview-card-decisions::before { align-self: center; margin-right: 2px; color: #8095a7; content: "Review"; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.preview-decision { min-height: 44px; padding: 0 10px; font-size: .59rem; }
.preview-decision.is-selected { border-color: rgba(164, 214, 194, .58); color: #b8efd9; background: rgba(28, 86, 69, .28); }
.preview-correct { color: #d9a98b; }
.preview-card-decisions .preview-decision, .preview-card-decisions .preview-correct { border: 1px solid rgba(145, 211, 246, .5); background: rgba(12, 25, 38, .72); color: #d9eaff; }
.preview-card-decisions .preview-decision.is-selected { border-color: rgba(164, 214, 194, .72); color: #b8efd9; background: rgba(28, 86, 69, .42); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.preview-correct:hover, .preview-correct:focus-visible { border-color: rgba(240, 157, 112, .55); color: #ffd0b3; background: rgba(98, 57, 46, .24); }
@media (max-width: 520px) { .preview-card-decisions::before { flex-basis: 100%; } .preview-overview-detail { white-space: normal; line-height: 1.25; } }
@media (max-width: 520px) { .preview-card-decisions .preview-decision, .preview-card-decisions .preview-correct { flex: 1 1 calc(50% - 6px); } }
.preview-source-link { display: inline-flex; margin-top: 13px; color: #83c9ef; font: 700 .61rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.preview-source-link::after { margin-left: 7px; color: #f0a074; content: "↗"; }
.preview-source-link:hover, .preview-source-link:focus-visible { color: #d8edf9; text-decoration: underline; text-underline-offset: 3px; }
.preview-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 18px 19px; border: 1px solid rgba(240, 157, 112, .3); border-radius: 13px; background: radial-gradient(circle at 100% 0, rgba(240, 157, 112, .1), transparent 42%), linear-gradient(100deg, rgba(38, 28, 29, .68), rgba(12, 21, 30, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 30px rgba(0, 0, 0, .14); }
.preview-next-copy { display: grid; gap: 4px; min-width: 0; }
.preview-next-kicker { color: #f0a074; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.preview-next-copy strong { color: #f0f3f6; font-size: .86rem; letter-spacing: -.015em; }
.preview-next-copy small { color: #9eacba; font-size: .7rem; line-height: 1.45; }
.preview-next-action { flex: 0 0 auto; min-height: 46px; padding-inline: 18px; font-size: .67rem; box-shadow: 0 8px 18px rgba(240, 157, 112, .12); }
.preview-expand { display: block; margin: 16px auto 0; min-height: 44px; border-color: rgba(117, 185, 248, .3); color: #b8def1; }
.preview-expand:hover:not(:disabled), .preview-expand:focus-visible { border-color: rgba(117, 185, 248, .62); background: rgba(117, 185, 248, .08); }
.preview-loading { display: grid; gap: 10px; margin-top: 23px; padding: 27px 22px; border: 1px solid rgba(132, 177, 218, .2); border-radius: 14px; background: linear-gradient(135deg, rgba(16, 27, 40, .72), rgba(10, 14, 22, .9)); }
.preview-loading strong { color: #e6edf4; font-size: .95rem; font-weight: 650; }
.preview-loading span { max-width: 650px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.preview-loading-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 8px 0 3px; padding: 0; list-style: none; border-top: 1px solid rgba(132, 177, 218, .17); border-bottom: 1px solid rgba(132, 177, 218, .17); }
.preview-loading-step { position: relative; display: grid; gap: 7px; min-width: 0; padding: 13px 12px 12px 0; color: #6f8294; font: 650 .59rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.preview-loading-step + .preview-loading-step { padding-left: 17px; border-left: 1px solid rgba(132, 177, 218, .12); }
.preview-loading-step-index { color: #66839a; font-size: .54rem; }
.preview-loading-step.is-current { color: #d8e5ed; }
.preview-loading-step.is-current .preview-loading-step-index { color: #f0a074; }
.preview-loading-step.is-current::after { position: absolute; right: 12px; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, #f0a074, rgba(117, 185, 248, .15)); content: ""; }
.preview-loading-line { display: block; width: 82%; height: 7px; margin-top: 5px; border-radius: 999px; background: linear-gradient(90deg, rgba(117, 185, 248, .12), rgba(117, 185, 248, .46), rgba(117, 185, 248, .12)); background-size: 240% 100%; animation: previewShimmer 1.7s ease-in-out infinite; }
.preview-loading-line-short { width: 51%; margin-top: 0; animation-delay: .16s; }
.preview-loading-progress {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(117, 185, 248, .12);
}
.preview-loading-progress::before,
.preview-loading-progress::after {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  content: "";
}
.preview-loading-progress::before {
  width: var(--loading-progress, 33%);
  background: linear-gradient(90deg, #f0a074, #7dd3fc 72%, #a78bfa);
  box-shadow: 0 0 15px rgba(125, 211, 252, .38);
  transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.preview-loading-progress::after {
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(235, 250, 255, .8), transparent);
  animation: previewProgressSweep 2.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes previewProgressSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(420%); }
}
@media (prefers-reduced-motion: reduce) {
  .preview-loading-progress::after { animation: none; opacity: .3; }
  .preview-loading-progress::before { transition: none; }
}
.empty-state { position: relative; overflow: hidden; padding: 48px 20px; border: 1px solid rgba(117, 185, 248, .18); border-radius: 14px; text-align: center; color: var(--muted); background: linear-gradient(145deg, rgba(17, 27, 40, .52), rgba(8, 13, 21, .52)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.empty-state::before { position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .62), rgba(117, 185, 248, .32), transparent); content: ""; }
.empty-state::after { display: block; width: 34px; height: 1px; margin: 17px auto 0; background: rgba(240, 157, 112, .55); content: ""; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.08rem; }
.preview-empty { display: grid; justify-items: center; gap: 7px; padding: 28px 20px 26px; }
.preview-empty::after { margin-top: 9px; }
.preview-empty-mark { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid rgba(240, 157, 112, .35); border-radius: 999px; color: #f0a074; background: rgba(240, 157, 112, .07); font: 750 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.preview-empty-unavailable .preview-empty-mark { border-color: rgba(240, 197, 121, .36); color: #f0c579; background: rgba(240, 197, 121, .07); }
.preview-empty-pending .preview-empty-mark,
.preview-empty-not-found .preview-empty-mark { border-color: rgba(131, 201, 239, .3); color: #83c9ef; background: rgba(131, 201, 239, .06); }
.preview-empty-message { max-width: 540px; color: #93a4b4; font-size: .76rem; line-height: 1.55; }
.preview-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 9px; }
.preview-empty-action { min-height:44px; font-size: .63rem; }
.report-unavailable { display: grid; justify-items: center; gap: 5px; }
.report-unavailable span { max-width: 520px; line-height: 1.5; }
.report-unavailable .button { margin-top: 13px; }
.first-run-guide { position: relative; overflow: hidden; margin-bottom: 16px; padding: 24px; border-color: rgba(117, 185, 248, .3); background: radial-gradient(circle at 92% 0, rgba(117, 185, 248, .14), transparent 31%), linear-gradient(145deg, rgba(24, 33, 48, .76), rgba(17, 22, 31, .96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 46px rgba(4, 8, 14, .18); }
.first-run-guide::before { position: absolute; top: 0; right: 13%; width: 116px; height: 1px; background: linear-gradient(90deg, transparent, rgba(117, 185, 248, .76), transparent); content: ""; }
.first-run-guide::after { position: absolute; top: 0; left: -24%; width: 24%; height: 1px; background: linear-gradient(90deg, transparent, rgba(117, 185, 248, .72), rgba(126, 207, 244, .8), transparent); box-shadow: 0 0 14px rgba(117, 185, 248, .22); content: ""; animation: firstRunTrace 12s ease-in-out infinite; pointer-events: none; }
.first-run-guide .section-heading { margin-bottom: 21px; }
.first-run-guide h2 { margin-bottom: 8px; }
.first-run-guide .section-heading p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
#first-run-guide-status[data-state="ready"] { border-color: rgba(126, 207, 244, .38); color: #b9e5f8; background: rgba(126, 207, 244, .08); }
#first-run-guide-status[data-state="waiting"] { border-color: rgba(132, 147, 163, .28); color: #9aa9b8; background: rgba(132, 147, 163, .06); }
.first-run-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(240, 157, 112, .18); border-bottom: 1px solid rgba(240, 157, 112, .18); }
.first-run-grid::before { position: absolute; top: 39px; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .54), rgba(117, 185, 248, .24)); content: ""; pointer-events: none; }
.first-run-grid article { position: relative; min-height: 178px; padding: 19px 18px 18px; border-right: 1px solid var(--line); transition: background .22s ease, transform .22s ease, border-color .22s ease; }
.first-run-grid article:last-child { border-right: 0; }
.first-run-grid article[data-first-run-step="context"] { background: linear-gradient(145deg, rgba(117, 185, 248, .045), transparent 62%); }
.first-run-grid article[data-first-run-step="intake"] { background: linear-gradient(145deg, rgba(137, 211, 177, .045), transparent 62%); }
.first-run-grid article[data-first-run-step="context"] > span { border-color: rgba(117, 185, 248, .58); color: #83c9ef; }
.first-run-grid article[data-first-run-step="intake"] > span { border-color: rgba(137, 211, 177, .58); color: #9ad9bf; }
.first-run-grid article:hover, .first-run-grid article:focus-within { background: rgba(126, 207, 244, .055); transform: translateY(-2px); }
.first-run-grid article[data-state]::after { position: absolute; top: 21px; right: 18px; padding: 4px 7px 3px; border: 1px solid rgba(132, 147, 163, .25); border-radius: 999px; color: #8290a0; content: attr(data-state-label); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.first-run-state-glyph { position: absolute; top: 23px; right: 92px; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(132, 147, 163, .34); border-radius: 50%; color: #aab8c5; background: rgba(11, 18, 27, .72); font-style: normal; }
.first-run-state-glyph::before { content: "·"; font: 700 .7rem/1 ui-sans-serif, system-ui, sans-serif; }
.first-run-grid article[data-state="complete"] .first-run-state-glyph { border-color: rgba(137, 211, 177, .5); color: #9cdbc1; }
.first-run-grid article[data-state="complete"] .first-run-state-glyph::before { content: "✓"; }
.first-run-grid article[data-state="ready"] .first-run-state-glyph { border-color: rgba(240, 157, 112, .5); color: #f0a074; }
.first-run-grid article[data-state="ready"] .first-run-state-glyph::before { content: "→"; }
.first-run-grid article[data-state="deferred"] .first-run-state-glyph { border-color: rgba(167, 139, 250, .5); color: #c4b5fd; }
.first-run-grid article[data-state="deferred"] .first-run-state-glyph::before { content: "Ⅱ"; font-size: .55rem; }
.first-run-grid article[data-state="blocked"] .first-run-state-glyph { border-color: rgba(132, 147, 163, .42); color: #9aa9b8; }
.first-run-grid article[data-state="blocked"] .first-run-state-glyph::before { content: "!"; }
.first-run-grid article[data-state="waiting"] .first-run-state-glyph::before { content: "…"; }
.first-run-grid article > span { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 22px; border: 1px solid rgba(240, 157, 112, .58); border-radius: 50%; color: #f0a074; background: #171a22; font: 700 .59rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.first-run-grid article[data-state="complete"] { border-color: rgba(137, 211, 177, .2); }
.first-run-grid article[data-state="complete"]::after { border-color: rgba(137, 211, 177, .32); color: #9cdbc1; background: rgba(38, 72, 62, .2); }
.first-run-grid article[data-state="complete"] > span { border-color: rgba(137, 211, 177, .7); color: transparent; background: rgba(38, 72, 62, .38); }
.first-run-grid article[data-state="complete"] > span::after { color: #9cdbc1; content: "✓"; font: 700 .8rem ui-sans-serif, system-ui, sans-serif; }
.first-run-grid article[data-state="blocked"] { opacity: .72; }
.first-run-grid article[data-state="blocked"] > span { border-color: rgba(132, 147, 163, .42); color: #8290a0; background: rgba(18, 24, 32, .72); }
.first-run-grid article[data-state="deferred"] { border-color: rgba(167, 139, 250, .24); background: linear-gradient(145deg, rgba(129, 140, 248, .06), transparent 68%); }
.first-run-grid article[data-state="deferred"]::after { border-color: rgba(167, 139, 250, .34); color: #c4b5fd; background: rgba(129, 140, 248, .07); }
.first-run-grid article[data-state="deferred"] > span { border-color: rgba(167, 139, 250, .58); color: #c4b5fd; background: rgba(39, 35, 75, .42); }
.first-run-grid article[data-state="ready"] { border-color: rgba(240, 157, 112, .28); background: linear-gradient(145deg, rgba(240, 157, 112, .06), transparent 68%); }
.first-run-grid article[data-state="ready"]::after { border-color: rgba(240, 157, 112, .34); color: #f0a074; background: rgba(240, 157, 112, .07); }
.first-run-grid article[data-state="ready"] > span { box-shadow: 0 0 0 4px rgba(240, 157, 112, .08), 0 0 18px rgba(240, 157, 112, .18); animation: firstRunPulse 2.8s ease-in-out infinite; }
.first-run-grid article[data-state="ready"] .button {
  /* v3.0 next-action hierarchy (2028.09.25): make the server-derived ready
     move visually primary without manufacturing completion or authority. */
  border-color: rgba(240, 157, 112, .58);
  color: #ffd0b7;
  background: linear-gradient(135deg, rgba(106, 61, 49, .46), rgba(20, 45, 60, .5));
  box-shadow: inset 0 1px 0 rgba(255, 236, 224, .08), 0 8px 20px rgba(8, 12, 18, .16);
}
.first-run-grid article[data-state="ready"] .button:hover,
.first-run-grid article[data-state="ready"] .button:focus-visible {
  border-color: rgba(240, 157, 112, .82);
  color: #fff2ea;
  background: linear-gradient(135deg, rgba(132, 73, 55, .58), rgba(27, 66, 82, .58));
}
.first-run-grid article[data-first-run-step="context"][data-state="ready"] { border-color: rgba(117, 185, 248, .34); background: linear-gradient(145deg, rgba(117, 185, 248, .1), transparent 68%); }
.first-run-grid article[data-first-run-step="context"][data-state="ready"]::after { border-color: rgba(117, 185, 248, .42); color: #83c9ef; background: rgba(117, 185, 248, .08); }
.first-run-grid article[data-first-run-step="context"][data-state="ready"] > span { border-color: rgba(117, 185, 248, .78); color: #a8dcf7; box-shadow: 0 0 0 4px rgba(117, 185, 248, .08), 0 0 18px rgba(117, 185, 248, .18); }
.first-run-grid article[data-first-run-step="intake"][data-state="ready"] { border-color: rgba(137, 211, 177, .34); background: linear-gradient(145deg, rgba(137, 211, 177, .1), transparent 68%); }
.first-run-grid article[data-first-run-step="intake"][data-state="ready"]::after { border-color: rgba(137, 211, 177, .42); color: #9ad9bf; background: rgba(137, 211, 177, .08); }
.first-run-grid article[data-first-run-step="intake"][data-state="ready"] > span { border-color: rgba(137, 211, 177, .78); color: #b1e6ce; box-shadow: 0 0 0 4px rgba(137, 211, 177, .08), 0 0 18px rgba(137, 211, 177, .18); }
.first-run-grid article[data-state="waiting"]::after { color: #7d8c9c; }
.first-run-grid h3 { margin: 0 0 8px; font-size: .98rem; letter-spacing: -.02em; }
.first-run-grid p { min-height: 49px; margin: 0 0 15px; color: var(--muted); font-size: .74rem; line-height: 1.52; }
.first-run-grid .button {
  /* v3.0 operator target contract (2028.09.25): setup actions stay full-size
     at desktop as well as phone widths without changing the visual rail. */
  min-height: 44px;
  padding: 0 11px;
  font-size: .64rem;
}
/* v3.0 first-run action alignment (2028.04.15 asset baseline): keep the three accountable
   setup moves on one visual baseline when guidance wraps differently. This is
   layout-only; it changes no state, permission, route, or server authority. */
.first-run-grid article { display: flex; flex-direction: column; }
.first-run-grid article .button { align-self: flex-start; margin-top: auto; }
.first-run-boundary { margin: 16px 0 0; color: #aeb9c6; font-size: .72rem; line-height: 1.55; }
.first-run-boundary strong { color: #f0a074; }
/* v3.0 first-run copy hierarchy (CalVer 2028.08.99): keep the record-derived
   next move visually ahead of supporting setup cards. Other cards remain fully
   usable and keyboard reachable; this only lowers competing emphasis. */
.first-run-grid article:not(.is-primary) .button {
  border-color: rgba(132, 177, 218, .22);
  color: #a9bbc9;
  background: rgba(8, 17, 28, .34);
}
.first-run-grid article:not(.is-primary) .button:hover,
.first-run-grid article:not(.is-primary) .button:focus-visible {
  border-color: rgba(126, 207, 244, .55);
  color: #e4f5fb;
  background: rgba(22, 53, 70, .42);
}
@keyframes firstRunPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(240, 157, 112, .06), 0 0 12px rgba(240, 157, 112, .12); } 50% { box-shadow: 0 0 0 6px rgba(240, 157, 112, .1), 0 0 22px rgba(240, 157, 112, .24); } }
@keyframes firstRunTrace { 0%, 18% { left: -24%; opacity: 0; } 35% { opacity: .8; } 78%, 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .first-run-grid article[data-state="ready"] > span { animation: none; } }

.narrow-shell { max-width: 760px; margin: 0 auto; }
.narrow-shell > h1 { margin-bottom: 18px; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.055em; }
.narrow-shell > h1:focus,
.report-intro h1:focus,
.preview-panel h2:focus,
.report-unavailable h2:focus,
.receipt-panel h2:focus {
  outline: 1px solid rgba(125, 211, 252, .74);
  outline-offset: 9px;
  border-radius: 5px;
  text-shadow: 0 0 24px rgba(125, 211, 252, .16);
}
.section-lede { max-width: 680px; color: var(--muted); font-size: 1.08rem; }
.preview-uncertainty-legend { max-width: 680px; margin: 10px 0 0; color: var(--muted-strong); font-size: .82rem; letter-spacing: .01em; }
.preview-uncertainty-legend strong { color: var(--ink); font-weight: 650; }
.workspace-entry-options { margin-top: 28px; padding: 24px; border-color: rgba(117, 185, 248, .22); background: linear-gradient(145deg, rgba(16, 29, 43, .76), rgba(10, 15, 24, .9)); }
.workspace-entry-options-heading { display: grid; gap: 5px; }
.workspace-entry-options-heading h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.03em; }
.workspace-entry-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.workspace-entry-option { position: relative; display: grid; gap: 15px; min-height: 190px; padding: 17px; border: 1px solid rgba(132, 177, 218, .16); border-radius: 11px; background: rgba(7, 14, 23, .52); }
.workspace-entry-option.is-selected { border-color: rgba(240, 157, 112, .46); background: linear-gradient(145deg, rgba(240, 157, 112, .09), rgba(7, 14, 23, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.workspace-entry-option-index { color: #83c9ef; font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.workspace-entry-option.is-selected .workspace-entry-option-index { color: #f0a074; }
.workspace-entry-option h3 { margin: 0 0 7px; font-size: .88rem; letter-spacing: -.02em; }
.workspace-entry-option p { min-height: 67px; margin: 0 0 12px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.workspace-entry-option .tag { font-size: .49rem; }
.workspace-entry-option .button { min-height: 44px; padding: 0 9px; font-size: .59rem; }
.workspace-entry-option .button-outline { align-self: end; justify-self: start; margin-top: auto; }
.workspace-entry-boundary { margin: 18px 0 10px; color: #a9b8c7; font-size: .7rem; line-height: 1.5; }
.workspace-entry-boundary strong { color: #f0a074; }
.verification-status{margin-top:14px;padding:14px;border:1px solid #f0a074}
.verification-status[data-state="available"]{border-color:rgba(117,224,194,.42);background:linear-gradient(135deg,rgba(117,224,194,.12),rgba(117,224,194,.035));color:#e8fff7}
.project-proof-info-shell { max-width: 560px; }
.project-proof-steps { display: grid; gap: 0; margin: 22px 0 18px; padding: 0; list-style: none; border-top: 1px solid rgba(132, 177, 218, .16); }
.project-proof-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(132, 177, 218, .13); }
.project-proof-steps li > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(240, 157, 112, .44); border-radius: 50%; color: #f0a074; background: rgba(240, 157, 112, .06); font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-proof-steps strong { display: block; margin-bottom: 4px; color: #e8eff4; font-size: .82rem; }
.project-proof-steps p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.project-proof-boundary { margin: 0; padding: 12px 13px; border: 1px solid rgba(240, 157, 112, .2); border-radius: 9px; color: #aebbc7; background: rgba(33, 26, 27, .46); font-size: .7rem; line-height: 1.5; }
.project-proof-boundary strong { color: #f0a074; }
.verification-form, .proof-panel { margin-top: 35px; padding: 28px; }
.setup-status-prominent { margin: 18px 0; padding: 16px 18px; border: 1px solid rgba(117, 224, 194, .38); border-radius: 12px; background: linear-gradient(135deg, rgba(117, 224, 194, .13), rgba(117, 224, 194, .04)); color: #f5fffb; font-size: 1rem; line-height: 1.55; font-weight: 700; }
.setup-status-prominent::before { display: block; margin-bottom: 6px; color: #82d9c0; content: attr(data-state-label); font: 700 .54rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.setup-status-prominent[data-state="ready"] { border-color: rgba(131, 201, 239, .38); background: linear-gradient(135deg, rgba(131, 201, 239, .12), rgba(131, 201, 239, .035)); }
.setup-status-prominent[data-state="ready"]::before { color: #9bd7f3; }
.setup-status-prominent[data-state="checking"] { border-color: rgba(131, 201, 239, .38); background: linear-gradient(135deg, rgba(131, 201, 239, .12), rgba(131, 201, 239, .035)); }
.setup-status-prominent[data-state="checking"]::before, .setup-status-prominent[data-state="challenge"]::before { color: #9bd7f3; }
.setup-status-prominent[data-state="challenge"] { border-color: rgba(240, 197, 121, .38); background: linear-gradient(135deg, rgba(240, 197, 121, .12), rgba(240, 197, 121, .035)); }
.setup-status-prominent[data-state="expired"], .setup-status-prominent[data-state="delivery-failed"], .setup-status-prominent[data-state="challenge-rejected"], .setup-status-prominent[data-state="error"], .setup-status-prominent[data-state="unavailable"] { border-color: rgba(232, 121, 103, .42); background: linear-gradient(135deg, rgba(232, 121, 103, .12), rgba(232, 121, 103, .035)); }
.setup-status-prominent[data-state="expired"]::before, .setup-status-prominent[data-state="delivery-failed"]::before, .setup-status-prominent[data-state="challenge-rejected"]::before, .setup-status-prominent[data-state="error"]::before, .setup-status-prominent[data-state="unavailable"]::before { color: #f3a494; }
.setup-status-prominent.is-sent { border-color: #75e0c2; box-shadow: 0 0 0 3px rgba(117, 224, 194, .12), 0 12px 32px rgba(0, 0, 0, .22); }
.setup-sent-detail { margin: -8px 0 16px; padding: 10px 12px; border: 1px solid rgba(117, 224, 194, .28); border-radius: 10px; background: rgba(117, 224, 194, .07); color: #c9f5e5; font-size: .94rem; line-height: 1.5; font-weight: 600; }
.setup-sent-detail strong { color: #f5fffb; overflow-wrap: anywhere; }
#setup-email[readonly] { color: #c9d6e0; cursor: default; }
.verification-form input[type="text"], .dialog-shell textarea, .report-form input, .report-form textarea, .program-form input, .program-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; color: var(--ink); background: #11121a; }
fieldset { margin: 24px 0; padding: 0; border: 0; }
legend { margin-bottom: 11px; color: var(--muted); font-size: .78rem; }
.method-choice { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.method-choice:has(input:checked) { border-color: var(--line-bright); background: rgba(99,102,241,.08); }
.method-choice input { accent-color: var(--acid); }
.method-choice strong, .method-choice small { display: block; }
.method-choice small { color: var(--muted); }
.proof-panel dl { margin: 23px 0; }
.proof-panel dl div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.proof-panel dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.proof-panel dd { margin: 5px 0 0; overflow-wrap: anywhere; font: .84rem ui-monospace, SFMono-Regular, Menlo, monospace; }

#workspace-view { max-width: none; padding: 0; }
body.platform-mode .site-header { background: hsl(222 20% 7%); }
body.platform-mode .eyebrow { color: #fb923c; }
body.platform-mode .brand img { filter: invert(1) drop-shadow(0 0 12px rgba(251, 146, 60, .24)); }
body.platform-mode .trust-status i {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, .6);
}
body.platform-mode .button-primary {
  color: #fff;
  background: linear-gradient(90deg, #f97316, #f59e0b);
  box-shadow: 0 8px 28px rgba(249, 115, 22, .14);
}
body.platform-mode .button-primary:hover:not(:disabled) { background: linear-gradient(90deg, #fb923c, #fbbf24); }
body.platform-mode .button-outline { background: rgba(59, 130, 246, .04); }
body.platform-mode .workspace-shell { background: var(--ground); }
/* v3.0 workspace canvas continuity (2028.06.06): carry the public
   product-security atmosphere into the authenticated canvas without turning
   the workspace into a decorative dashboard. These gradients are static,
   tenant-agnostic presentation only; they add no requests, state, or
   authority and remain behind every readable workspace surface. */
body.platform-mode .workspace-content {
  background:
    radial-gradient(circle at 88% 0%, rgba(99, 102, 241, .12 ), transparent 25%),
    radial-gradient(circle at 5% 34%, rgba(45, 212, 191, .045), transparent 28%),
    var(--ground);
}
.workspace-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - 83px); }

/* v3.0 governed workspace arrival (2028.07.04): make the public-to-platform
   handoff perceptible without suggesting freshness, severity, or authority.
   The one-shot compositor animation is presentation-only and disabled for
   reduced-motion users. */
#workspace-view.is-arriving .workspace-shell {
  animation: workspaceArrival .56s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes workspaceArrival {
  from { opacity: .01; transform: translate3d(0, 10px, 0) scale(.996); filter: saturate(.86); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #workspace-view.is-arriving .workspace-shell { animation: none; }
}
.workspace-nav { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: calc(100vh - 83px); padding: 34px 22px 24px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 20% 0%, rgba(117, 185, 248, .11), transparent 35%), rgba(10,13,11,.62); }
.workspace-nav::after { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .62) 30%, rgba(117, 185, 248, .26) 78%, transparent); content: ""; pointer-events: none; }
.workspace-nav > div:first-child { position: relative; padding: 0 3px 16px; border-bottom: 1px solid rgba(117, 185, 248, .14); }
.workspace-nav > div:first-child::after { position: absolute; right: 3px; bottom: -1px; width: 42px; height: 1px; background: #f09d70; box-shadow: 0 0 12px rgba(240, 157, 112, .34); content: ""; }
body.platform-mode .workspace-nav { background: hsl(222 20% 7%); }
.workspace-lifecycle { margin-top: 36px; padding: 14px 13px 13px; border: 1px solid rgba(117, 185, 248, .2); border-radius: 11px; background: linear-gradient(145deg, rgba(22, 36, 53, .72), rgba(10, 15, 23, .68)); }
.workspace-lifecycle > p { margin: 0 0 12px; color: #8fa4bb; font-size: .57rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.workspace-lifecycle ol { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.workspace-lifecycle ol::before { position: absolute; top: 13px; bottom: 13px; left: 10px; width: 1px; background: linear-gradient(180deg, rgba(117, 185, 248, .12), rgba(240, 157, 112, .42) 38%, rgba(137, 211, 177, .26) 72%, rgba(190, 164, 238, .12)); content: ""; pointer-events: none; }
.workspace-lifecycle li { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-height: 27px; color: #748396; font-size: .69rem; font-weight: 640; }
.workspace-lifecycle li span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid rgba(132, 153, 179, .22); border-radius: 50%; color: #718095; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.workspace-lifecycle li.is-current { color: #f2f8fd; }
.workspace-lifecycle li.is-current span { border-color: rgba(126, 207, 244, .72); background: rgba(126, 207, 244, .13); color: #b9e5f8; box-shadow: 0 0 0 3px rgba(126, 207, 244, .07); }
.workspace-lifecycle li:nth-child(2) span { border-color: rgba(117, 185, 248, .34); color: #83c9ef; }
.workspace-lifecycle li:nth-child(3) span { border-color: rgba(137, 211, 177, .34); color: #9ad9bf; }
.workspace-lifecycle li:nth-child(4) span { border-color: rgba(190, 164, 238, .34); color: #bba4ee; }
.workspace-lifecycle li:nth-child(2).is-current span { border-color: rgba(117, 185, 248, .72); background: rgba(117, 185, 248, .1); color: #a8dcf7; }
.workspace-lifecycle li:nth-child(3).is-current span { border-color: rgba(137, 211, 177, .72); background: rgba(137, 211, 177, .1); color: #b1e6ce; }
.workspace-lifecycle li:nth-child(4).is-current span { border-color: rgba(190, 164, 238, .72); background: rgba(190, 164, 238, .1); color: #d0bdf5; }
.workspace-lifecycle small { display: block; margin-top: 11px; color: #637084; font-size: .58rem; line-height: 1.35; }
.workspace-priority { margin-top: 25px; padding: 12px 11px 10px; border: 1px solid rgba(240, 157, 112, .16); border-radius: 11px; background: linear-gradient(145deg, rgba(35, 26, 29, .46), rgba(12, 18, 27, .56)); }
.workspace-priority > p { margin: 0 0 8px; color: #c49a89; font-size: .54rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.workspace-priority-list { display: grid; gap: 3px; }
.workspace-priority-link { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 7px 5px; border: 1px solid transparent; border-radius: 7px; color: #9caabd; background: transparent; font-size: .61rem; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.workspace-priority-link::before { width: 5px; height: 5px; border: 1px solid rgba(240, 197, 121, .7); border-radius: 50%; background: rgba(240, 197, 121, .16); box-shadow: 0 0 8px rgba(240, 197, 121, .2); content: ""; }
.workspace-priority-link[data-attention-lane="timeline"]::before { border-color: rgba(131, 201, 239, .76); background: rgba(131, 201, 239, .18); box-shadow: 0 0 8px rgba(131, 201, 239, .22); }
.workspace-priority-link[data-attention-lane="exploitation"]::before { border-color: rgba(232, 121, 103, .82); background: rgba(232, 121, 103, .2); box-shadow: 0 0 8px rgba(232, 121, 103, .24); }
.workspace-priority-link.is-active::before { box-shadow: 0 0 0 3px rgba(240, 197, 121, .08), 0 0 10px rgba(240, 197, 121, .34); }
.workspace-priority-link[data-attention-lane="timeline"].is-active::before { box-shadow: 0 0 0 3px rgba(131, 201, 239, .08), 0 0 10px rgba(131, 201, 239, .34); }
.workspace-priority-link[data-attention-lane="exploitation"].is-active::before { box-shadow: 0 0 0 3px rgba(232, 121, 103, .08), 0 0 10px rgba(232, 121, 103, .34); }
.workspace-priority-link:hover, .workspace-priority-link:focus-visible { border-color: rgba(117, 185, 248, .2); background: rgba(117, 185, 248, .07); color: #e6edf3; outline: 0; transform: translateX(2px); }
.workspace-priority-link.is-active { border-color: rgba(240, 157, 112, .28); background: rgba(240, 157, 112, .08); color: #ffd0b7; }
.workspace-priority-link[data-attention-lane="timeline"] b { color: #a8dcf7; background: rgba(117, 185, 248, .12); }
.workspace-priority-link[data-attention-lane="exploitation"] b { color: #f3b095; background: rgba(232, 121, 103, .14); }
.workspace-priority-link[data-attention-lane="approval"] b { color: #f6d39b; background: rgba(240, 197, 121, .14); }
.workspace-priority-link[data-attention-lane="timeline"].is-active { border-color: rgba(117, 185, 248, .34); background: rgba(117, 185, 248, .09); color: #bce5fa; }
.workspace-priority-link[data-attention-lane="timeline"].is-active b { color: #0e1c28; background: #83c9ef; }
.workspace-priority-link[data-attention-lane="exploitation"].is-active { border-color: rgba(232, 121, 103, .38); background: rgba(232, 121, 103, .1); color: #ffd0c3; }
.workspace-priority-link[data-attention-lane="exploitation"].is-active b { color: #271311; background: #e87967; }
.workspace-priority-link[data-attention-lane="approval"].is-active { border-color: rgba(240, 197, 121, .36); background: rgba(240, 197, 121, .1); color: #ffe0ad; }
.workspace-priority-link[data-attention-lane="approval"].is-active b { color: #241a0d; background: #f0c579; }
.workspace-priority-link b { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: #c7d6e4; background: rgba(117, 185, 248, .12); font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.workspace-priority-link.is-active b { color: #1a1110; background: #f09d70; }
.nav-kicker { margin-bottom: 5px; color: var(--dim); }
#workspace-domain { overflow-wrap: anywhere; font-size: .95rem; }
.nav-tabs { display: grid; gap: 6px; margin-top: 44px; overscroll-behavior-x: contain; }
.nav-tab { position: relative; display: flex; justify-content: space-between; width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 11px 12px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.nav-tab::before { position: absolute; top: 9px; bottom: 9px; left: -1px; width: 3px; border-radius: 999px; background: #f09d70; opacity: 0; transform: scaleY(.45); transition: opacity .2s ease, transform .2s ease; content: ""; }
.nav-tab[data-tab="intake"]::before { background: #83c9ef; }
.nav-tab[data-tab="cases"]::before { background: #9ad9bf; }
.nav-tab[data-tab="team"]::before { background: #d2b1f1; }
.nav-tab[data-tab="ledger"]::before { background: #bba4ee; }
.nav-tab:hover, .nav-tab:focus-visible { border-color: rgba(117, 185, 248, .2); background: rgba(117, 185, 248, .06); color: var(--ink); outline: 0; transform: translateX(2px); }
.nav-tab span { min-width: 24px; border-radius: 999px; padding: 1px 7px; background: rgba(255,255,255,.05); text-align: center; font-size: .72rem; }
.nav-tab.active { border-color: rgba(117, 185, 248, .24); background: linear-gradient(100deg, rgba(117, 185, 248, .1), rgba(255,255,255,.025) 72%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.nav-tab.active::before { opacity: 1; transform: scaleY(1); }
.nav-tab:focus-visible { box-shadow: 0 0 0 2px rgba(240, 157, 112, .46), inset 0 0 0 1px rgba(117, 185, 248, .18); }
.nav-tab.active span { background: var(--acid); color: #0b0d0c; }
.nav-tab[data-tab="intake"].active span { background: #83c9ef; color: #0e1c28; }
.nav-tab[data-tab="cases"].active span { background: #9ad9bf; color: #10231c; }
.nav-tab[data-tab="team"].active span { background: #d2b1f1; color: #21172c; }
.nav-tab[data-tab="ledger"].active span { background: #bba4ee; color: #20172b; }
body.platform-mode .nav-tab.active { border-color: rgba(59, 130, 246, .24); background: rgba(59, 130, 246, .1); }
body.platform-mode .nav-tab.active span { color: #fff; }
/* Keep the workspace's active surface legible by lifecycle lane. This is a
   visual distinction only; tab identity and authorization remain server-
   controlled and unchanged. */
body.platform-mode .nav-tab[data-tab="intake"].active { border-color: rgba(56, 189, 248, .34); background: linear-gradient(100deg, rgba(56, 189, 248, .13), rgba(255, 255, 255, .025) 72%); }
body.platform-mode .nav-tab[data-tab="cases"].active { border-color: rgba(134, 239, 172, .34); background: linear-gradient(100deg, rgba(134, 239, 172, .1), rgba(255, 255, 255, .025) 72%); }
body.platform-mode .nav-tab[data-tab="team"].active { border-color: rgba(216, 180, 254, .34); background: linear-gradient(100deg, rgba(216, 180, 254, .1), rgba(255, 255, 255, .025) 72%); }
body.platform-mode .nav-tab[data-tab="ledger"].active { border-color: rgba(196, 181, 253, .34); background: linear-gradient(100deg, rgba(196, 181, 253, .11), rgba(255, 255, 255, .025) 72%); }
body.platform-mode .nav-tab[data-tab="intake"].active { box-shadow: inset 0 1px 0 rgba(224, 247, 255, .06), 0 8px 24px rgba(56, 189, 248, .08); }
body.platform-mode .nav-tab[data-tab="cases"].active { box-shadow: inset 0 1px 0 rgba(232, 255, 240, .05), 0 8px 24px rgba(134, 239, 172, .07); }
body.platform-mode .nav-tab[data-tab="team"].active { box-shadow: inset 0 1px 0 rgba(248, 240, 255, .05), 0 8px 24px rgba(216, 180, 254, .07); }
body.platform-mode .nav-tab[data-tab="ledger"].active { box-shadow: inset 0 1px 0 rgba(245, 241, 255, .05), 0 8px 24px rgba(196, 181, 253, .08); }
body.platform-mode #review-panel .workspace-heading::after { background: linear-gradient(90deg, rgba(240, 197, 121, .72), rgba(125, 211, 252, .18) 54%, transparent 86%); }
body.platform-mode #intake-panel .workspace-heading::after { background: linear-gradient(90deg, rgba(56, 189, 248, .72), rgba(125, 211, 252, .18) 54%, transparent 86%); }
body.platform-mode #cases-panel .workspace-heading::after { background: linear-gradient(90deg, rgba(134, 239, 172, .72), rgba(125, 211, 252, .18) 54%, transparent 86%); }
body.platform-mode #team-panel .workspace-heading::after { background: linear-gradient(90deg, rgba(216, 180, 254, .72), rgba(125, 211, 252, .18) 54%, transparent 86%); }
body.platform-mode #ledger-panel .workspace-heading::after { background: linear-gradient(90deg, rgba(196, 181, 253, .72), rgba(125, 211, 252, .18) 54%, transparent 86%); }
.nav-assurance { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(99,102,241,.04); }
.assurance-mark { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--acid); color: #0b0d0c; font-weight: 800; }
.nav-assurance strong, .nav-assurance small { display: block; }
.nav-assurance strong { font-size: .76rem; }
.nav-assurance small { margin-top: 2px; color: var(--dim); font-size: .64rem; }
.workspace-content { position: relative; isolation: isolate; min-width: 0; overflow: hidden; padding: 54px clamp(26px, 5vw, 78px) 90px; background: radial-gradient(circle at 82% 4%, rgba(117, 185, 248, .12), transparent 32%), linear-gradient(180deg, rgba(17, 25, 38, .34), transparent 42%); }
.workspace-content::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(117, 185, 248, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 185, 248, .035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 78%); content: ""; pointer-events: none; }
.workspace-content::after { position: absolute; z-index: -1; top: 0; right: clamp(26px, 5vw, 78px); left: clamp(26px, 5vw, 78px); height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .52) 22%, rgba(117, 185, 248, .3) 68%, transparent); content: ""; pointer-events: none; }
.workspace-panel { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; scroll-margin-top: 24px; }
.workspace-heading { position: relative; padding-bottom: 27px; border-bottom: 1px solid rgba(117, 185, 248, .13); }
.workspace-heading::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .58), rgba(117, 185, 248, .18) 48%, transparent 86%); content: ""; pointer-events: none; }
.workspace-heading h1 { margin-bottom: 10px; font-size: clamp(2.4rem, 4.1vw, 4.1rem); line-height: .96; letter-spacing: -.055em; }
.workspace-heading-actions { padding-top: 5px; }
.workspace-heading p:last-child { max-width: 710px; color: var(--muted); }
.workspace-assurance-strip { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 17px; }
.workspace-assurance-strip span { display: inline-flex; align-items: center; gap: 7px; color: #a7b7c6; font: 700 .54rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .065em; text-transform: uppercase; }
.workspace-assurance-strip i { display: block; width: 6px; height: 6px; border: 1px solid rgba(131, 201, 239, .72); border-radius: 50%; background: rgba(131, 201, 239, .22); box-shadow: 0 0 9px rgba(131, 201, 239, .2); }
.workspace-assurance-strip span[data-assurance="decision"] i { border-color: rgba(240, 197, 121, .78); background: rgba(240, 197, 121, .24); box-shadow: 0 0 9px rgba(240, 197, 121, .2); }
.workspace-assurance-strip span[data-assurance="tenant"] i { border-color: rgba(137, 211, 177, .78); background: rgba(137, 211, 177, .24); box-shadow: 0 0 9px rgba(137, 211, 177, .2); }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 35px 0; }
.metric { min-height: 100px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.metric:hover { border-color: rgba(117, 185, 248, .28); background: rgba(117, 185, 248, .045); box-shadow: 0 12px 26px rgba(3, 8, 14, .16); transform: translateY(-2px); }
.workspace-panel#review-panel > .metric-row { margin-top: 27px; }
.workspace-focus-brief { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 28px; align-items: stretch; margin: 0 0 27px; padding: 24px 25px; overflow: hidden; border: 1px solid rgba(240, 157, 112, .28); border-radius: 14px; background: radial-gradient(circle at 94% 0,rgba(125,211,252,.15),transparent 38%),linear-gradient(132deg,rgba(25,28,40,.94),rgba(9,16,27,.97)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 20px 48px rgba(4, 8, 14, .18); }
.workspace-focus-brief::before { position: absolute; top: 0; right: 15%; left: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 157, 112, .76), rgba(117, 185, 248, .36), transparent); content: ""; }
.workspace-focus-brief::after { position: absolute; top: -30%; right: -8%; width: 36%; aspect-ratio: 1; border: 1px solid rgba(117, 185, 248, .11); border-radius: 50%; box-shadow: 0 0 0 17px rgba(117, 185, 248, .025), 0 0 0 35px rgba(117, 185, 248, .018); content: ""; pointer-events: none; }
.workspace-focus-main { position: relative; z-index: 1; min-width: 0; }
.workspace-focus-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-bottom: 10px; }
.workspace-focus-meta .eyebrow { margin: 0; }
.workspace-focus-state { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border: 1px solid rgba(137, 211, 177, .3); border-radius: 999px; color: #a8dfc3; background: rgba(137, 211, 177, .08); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .075em; text-transform: uppercase; }
.workspace-focus-brief[data-focus-state="selected"] .workspace-focus-state { border-color: rgba(126, 207, 244, .34); color: #b9e5f8; background: rgba(126, 207, 244, .08); }
.workspace-focus-brief[data-first-run-guide="true"] { border-color: rgba(167, 139, 250, .3); background: radial-gradient(circle at 92% 0, rgba(125, 211, 252, .12), transparent 34%), linear-gradient(132deg, rgba(23, 28, 47, .92), rgba(11, 18, 29, .96)); }
.workspace-focus-brief[data-first-run-guide="true"]::before { background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .72), rgba(125, 211, 252, .42), transparent); }
.workspace-focus-brief[data-first-run-guide="true"] .workspace-focus-state { border-color: rgba(167, 139, 250, .38); color: #d8ccff; background: rgba(167, 139, 250, .09); }
.workspace-focus-brief[data-focus-state="selected"] .workspace-focus-state::before { width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; content: ""; }
.workspace-focus-main > .eyebrow { margin-bottom: 10px; }
.workspace-focus-main h2 { max-width: 680px; margin: 0 0 9px; overflow-wrap: anywhere; font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.06; letter-spacing: -.045em; }
.workspace-focus-main > p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.58; }
#workspace-focus-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.workspace-focus-boundary{margin:8px 0;font-size:12px}
.workspace-focus-question { display: grid; gap: 4px; max-width: 680px; margin: 14px 0 0; padding: 10px 12px; border-left: 2px solid rgba(120, 225, 209, .72); color: #d8fbf4; background: rgba(10, 35, 39, .34); }
.workspace-focus-question span { color: #8fe3d3; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.workspace-focus-question strong { font-size: clamp(.92rem, 1.25vw, 1.08rem); line-height: 1.4; font-weight: 720; letter-spacing: .005em; }
.workspace-focus-question-evidence { justify-self: start; padding: 0; border: 0; color: rgba(208, 244, 237, .68); background: transparent; font: 600 .62rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: underline; text-decoration-color: rgba(143, 227, 211, .45); text-underline-offset: 3px; cursor: pointer; }
.workspace-focus-question-evidence:hover, .workspace-focus-question-evidence:focus-visible { color: #d8fbf4; text-decoration-color: currentColor; }
.workspace-focus-question[data-question-state="held"] { border-left-color: rgba(240, 197, 121, .78); color: #f3e4c5; background: rgba(55, 39, 18, .28); }
.workspace-focus-question[data-question-state="held"] span { color: #f0c579; }
.workspace-focus-lanes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.workspace-focus-lanes span { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 8px; border: 1px solid rgba(142, 165, 186, .16); border-radius: 999px; color: #8091a4; background: rgba(7, 13, 21, .32); font: 700 .53rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
.workspace-focus-lanes span::before { width: 5px; height: 5px; border: 1px solid rgba(240, 197, 121, .56); border-radius: 50%; background: rgba(240, 197, 121, .16); content: ""; }
.workspace-focus-lanes span[data-focus-lane="timeline"]::before { border-color: rgba(131, 201, 239, .62); background: rgba(131, 201, 239, .16); }
.workspace-focus-lanes span[data-focus-lane="exploitation"]::before { border-color: rgba(232, 121, 103, .68); background: rgba(232, 121, 103, .16); }
.workspace-focus-lanes span.is-current { border-color: rgba(240, 197, 121, .42); color: #ffe0ad; background: rgba(240, 197, 121, .11); box-shadow: 0 0 0 3px rgba(240, 197, 121, .05), 0 0 15px rgba(240, 197, 121, .12); }
.workspace-focus-lanes span[data-focus-lane="timeline"].is-current { border-color: rgba(131, 201, 239, .44); color: #bce5fa; background: rgba(131, 201, 239, .1); box-shadow: 0 0 0 3px rgba(131, 201, 239, .05), 0 0 15px rgba(131, 201, 239, .12); }
.workspace-focus-lanes span[data-focus-lane="exploitation"].is-current { border-color: rgba(232, 121, 103, .46); color: #ffd0c3; background: rgba(232, 121, 103, .1); box-shadow: 0 0 0 3px rgba(232, 121, 103, .05), 0 0 15px rgba(232, 121, 103, .12); }
.workspace-focus-main .button { margin-top: 17px; min-height: 44px; font-size: .68rem; }
.workspace-focus-facts { position: relative; z-index: 1; display: grid; align-content: center; gap: 0; margin: 0; border-left: 1px solid rgba(117, 185, 248, .15); }
.workspace-focus-facts div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0 11px 18px; border-bottom: 1px solid rgba(117, 185, 248, .12); }
.workspace-focus-facts div:last-child { border-bottom: 0; }
.workspace-focus-facts dt { color: #7f91a4; font-size: .58rem; font-weight: 760; letter-spacing: .085em; text-transform: uppercase; }
.workspace-focus-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #e3eaf0; font-size: .75rem; font-weight: 650; }
.workspace-focus-facts div:nth-child(2) dd { color: #f0b28f; }
.workspace-focus-facts div:nth-child(3) dd { color: #9ecded; }
.workspace-focus-facts div:nth-child(4) dd { color: #c8b8f5; }
.workspace-focus-actions { position: relative; z-index: 1; margin-top: 21px; }
.workspace-focus-actions-label { display: block; margin-bottom: 8px; color: #91a6b9; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.workspace-focus-action-list { display: flex; flex-wrap: wrap; gap: 7px; }
.workspace-focus-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 11px; border: 1px solid rgba(126, 207, 244, .24); border-radius: 6px; color: #c9e9f5; background: rgba(8, 21, 33, .42); cursor: pointer; font-size: .65rem; font-weight: 700; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.workspace-focus-action span { color: #82d8d2; font-size: .78rem; }
.workspace-focus-action:hover, .workspace-focus-action:focus-visible { border-color: rgba(126, 207, 244, .62); color: #f2fbff; background: rgba(30, 71, 89, .48); transform: translateY(-1px); }
.workspace-focus-action.is-primary {
  border-color: rgba(167, 139, 250, .62);
  color: #f5f2ff;
  background: linear-gradient(135deg, rgba(93, 75, 159, .68), rgba(29, 111, 139, .58));
  box-shadow: 0 8px 22px rgba(67, 57, 143, .2), inset 0 1px 0 rgba(240, 238, 255, .12);
}
.workspace-focus-action.is-primary span { color: #bff9ef; }
.workspace-focus-action.is-primary::before { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; background: #bff9ef; box-shadow: 0 0 9px rgba(191, 249, 239, .7); content: ""; }
body.platform-mode .workspace-focus-actions-label { color: #9de8d5; }
body.platform-mode .workspace-focus-action { border-color: rgba(120, 225, 209, .28); color: #d8fbf4; background: rgba(10, 35, 39, .46); }
body.platform-mode .workspace-focus-action.is-primary { border-color: rgba(120, 225, 209, .68); background: linear-gradient(135deg, rgba(35, 109, 103, .72), rgba(24, 80, 98, .66)); box-shadow: 0 8px 22px rgba(26, 104, 107, .2), inset 0 1px 0 rgba(223, 255, 249, .12); }
body.platform-mode .workspace-focus-action.is-primary::after{content:"NEXT";margin-left:2px;color:#bff9ef;font-size:.48rem;font-weight:700;letter-spacing:.08em}
body.platform-mode .workspace-focus-action:hover, body.platform-mode .workspace-focus-action:focus-visible { border-color: rgba(120, 225, 209, .66); background: rgba(28, 79, 79, .52); }
body.platform-mode .workspace-focus-brief { border-color: rgba(59, 130, 246, .3); background: radial-gradient(circle at 92% 0, rgba(59, 130, 246, .13), transparent 34%), linear-gradient(132deg, rgba(18, 29, 47, .9), rgba(11, 18, 29, .95)); }
body.platform-mode .workspace-focus-brief::before { background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .72), rgba(96, 165, 250, .32), transparent); }
/* v3.0 first-run focus material (CalVer 2028.08.757): lift contrast without
   adding a surface or implying readiness. */
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] { border-color: rgba(120, 225, 209, .62); background: radial-gradient(circle at 8% 0, rgba(120, 225, 209, .24), transparent 38%), linear-gradient(132deg, rgba(24, 58, 72, .94), rgba(12, 24, 37, .98)); }
body.platform-mode .workspace-focus-brief[data-focus-state="empty"]::before { background: linear-gradient(90deg, transparent, rgba(120, 225, 209, .68), rgba(125, 211, 252, .34), transparent); }
body.platform-mode .workspace-panel#review-panel > .metric-row .metric { position: relative; overflow: hidden; border-color: rgba(117, 185, 248, .16); background: linear-gradient(145deg, rgba(20, 29, 43, .78), rgba(11, 16, 24, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028); }
body.platform-mode .workspace-panel#review-panel > .metric-row .metric::before { position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .72), rgba(117, 185, 248, .18)); content: ""; }
body.platform-mode .workspace-panel#review-panel > .metric-row .metric:nth-child(2)::before { background: linear-gradient(90deg, rgba(117, 185, 248, .78), rgba(117, 185, 248, .18)); }
body.platform-mode .workspace-panel#review-panel > .metric-row .metric:nth-child(3)::before { background: linear-gradient(90deg, rgba(137, 211, 177, .78), rgba(137, 211, 177, .18)); }
body.platform-mode .workspace-panel#review-panel > .metric-row .metric:nth-child(4)::before { background: linear-gradient(90deg, rgba(190, 164, 238, .78), rgba(190, 164, 238, .18)); }
.metric-row.is-deferred { display: none; }
.metric span, .metric strong { display: block; }
.metric span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.metric strong { margin-top: 10px; font-size: 1.8rem; line-height: 1; }
.metric .integrity-ok { color: var(--acid); font-size: 1.1rem; }
.operation-banner { margin-bottom: 18px; padding: 13px 16px; border: 1px solid rgba(59,130,246,.28); border-radius: 10px; background: rgba(59,130,246,.07); color: #bfdbfe; font-size: .84rem; }
.operation-banner[data-degraded] { border-color: rgba(232,121,103,.42); background: rgba(70,28,30,.24); color: #f3b3a6; }

.report-shell { max-width: 1080px; margin: 0 auto; }
.report-intro { max-width: 760px; }
.report-intro h1 { margin-bottom: 20px; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .94; letter-spacing: -.06em; }
.report-loading-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  margin-top: 26px;
  padding: 17px 18px;
  border: 1px solid rgba(125, 211, 252, .2);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(18, 35, 54, .72), rgba(9, 15, 25, .84));
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .035), 0 18px 42px rgba(0, 0, 0, .15);
}
.report-loading-mark { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(125, 211, 252, .42); border-radius: 50%; background: rgba(28, 73, 98, .32); box-shadow: 0 0 0 5px rgba(125, 211, 252, .05), 0 0 20px rgba(125, 211, 252, .12); }
.report-loading-mark::before, .report-loading-mark::after { position: absolute; border: 1px solid rgba(167, 139, 250, .42); border-radius: 50%; content: ""; }
.report-loading-mark::before { inset: 6px; }
.report-loading-mark::after { inset: 11px; border-color: rgba(137, 211, 177, .7); }
.report-loading-mark i { width: 4px; height: 4px; border-radius: 50%; background: #b8ecff; box-shadow: 0 0 10px rgba(184, 236, 255, .8); }
.report-loading-state strong { display: block; color: #e9f6fb; font-size: .82rem; letter-spacing: -.01em; }
.report-loading-state > div > span { display: block; margin-top: 3px; color: #91aabd; font-size: .7rem; line-height: 1.45; }
.report-loading-state ol { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin: 1px 0 0; padding: 0; list-style: none; }
.report-loading-state li { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; border: 1px solid rgba(142, 165, 186, .16); border-radius: 999px; color: #71899d; background: rgba(7, 13, 21, .32); font: 700 .49rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .065em; text-transform: uppercase; }
.report-loading-state li.is-current { border-color: rgba(125, 211, 252, .34); color: #b8e8f8; background: rgba(52, 112, 140, .18); }
.report-loading-state li.is-current::before { width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 8px rgba(125, 211, 252, .65); content: ""; }
.report-loading-state.hidden { display: none; }
.policy-card { margin-top: 28px; padding: 20px; border-left: 2px solid var(--cyan); background: rgba(59,130,246,.06); }
.policy-card p { margin: 15px 0; color: #d7d7df; white-space: pre-wrap; }
.policy-card small { color: var(--muted); }
.report-form { margin-top: 36px; padding: clamp(22px, 4vw, 38px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid label, .program-form label { display: block; color: #dedee6; font-size: .83rem; font-weight: 650; }
.form-grid input, .form-grid textarea, .program-form input, .program-form textarea { display: block; margin-top: 8px; resize: vertical; }
.span-two { grid-column: 1 / -1; }
.optional { color: var(--dim); font-weight: 500; }
.required { color: #b8f1df; font-size: .62rem; font-weight: 650; letter-spacing: .04em; }
.attachment-field small { display: block; margin-top: 8px; color: var(--dim); font-size: .74rem; font-weight: 500; }
.attachment-field input[type="file"] { padding: 10px; }
.attachment-field input[type="file"]::file-selector-button { margin-right: 12px; border: 1px solid var(--line-bright); border-radius: 8px; padding: 8px 11px; color: var(--ink); background: rgba(99,102,241,.08); cursor: pointer; }
.turnstile-container { min-height: 70px; margin-top: 22px; }
.report-submit-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.report-submit-row p { max-width: 650px; margin: 0; color: var(--muted); font-size: .78rem; }
.receipt-panel { display: flex; gap: 18px; margin-top: 38px; padding: 28px; }
.receipt-panel .assurance-mark { flex: 0 0 auto; }
.receipt-panel h2 { margin-bottom: 8px; }
.receipt-panel p { color: var(--muted); }
.receipt-panel code { display: inline-block; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--acid); overflow-wrap: anywhere; }
.attachment-receipt { margin-top: 18px; color: var(--muted); font-size: .8rem; }
.attachment-receipt strong { color: var(--ink); }
.attachment-receipt ul { margin: 8px 0 0; padding-left: 18px; }
.attachment-receipt .attachment-ok { color: var(--cyan); }
.attachment-receipt .attachment-pending { color: var(--warning); }
#retry-attachments-button { margin-top: 12px; }

.intake-program-card { margin: 34px 0; padding: 26px; }
.program-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.program-form label:nth-child(2), .program-form label:nth-child(4), .program-actions { grid-column: 1 / -1; }
.program-actions { display: flex; gap: 9px; }
.program-link { margin-top: 20px; padding: 13px 15px; border: 1px solid rgba(59,130,246,.25); border-radius: 10px; color: #93c5fd; overflow-wrap: anywhere; }
.intake-list, .case-list { display: grid; gap: 12px; }
.empty-state-guidance { display: grid; justify-items: start; gap: 8px; padding: 28px 22px; border: 1px dashed rgba(117, 185, 248, .2); border-radius: 11px; background: linear-gradient(145deg, rgba(17, 26, 38, .52), rgba(8, 13, 21, .42)); }
.continuity-empty { padding: 22px; text-align: left; }
.continuity-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0 0 8px; padding: 0; list-style: none; }
.continuity-steps::before { position: absolute; top: 15px; right: 11%; left: 11%; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .28), rgba(240, 157, 112, .42), rgba(137, 211, 177, .26)); content: ""; }
.continuity-step { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; background: rgba(7, 13, 21, .3); }
.continuity-step-index { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(142, 165, 186, .34); border-radius: 50%; color: #8ea5ba; background: #101a26; font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.continuity-step-copy { display: grid; gap: 2px; min-width: 0; }
.continuity-step-copy strong { color: #b6c4d2; font-size: .64rem; line-height: 1.25; }
.continuity-step-copy small { color: #74879a; font-size: .58rem; line-height: 1.35; }
.continuity-step.is-current { border-color: rgba(240, 157, 112, .36); background: rgba(240, 157, 112, .07); box-shadow: 0 0 0 3px rgba(240, 157, 112, .04); }
.continuity-step.is-current .continuity-step-index { border-color: rgba(240, 157, 112, .78); color: #ffc09e; box-shadow: 0 0 0 3px rgba(240, 157, 112, .07); }
.continuity-step.is-current .continuity-step-copy strong { color: #ffd0b7; }
.continuity-step.is-complete .continuity-step-index { border-color: rgba(137, 211, 177, .6); color: #b1e6ce; background: rgba(137, 211, 177, .1); }
.continuity-step.is-next { border-color: rgba(117, 185, 248, .22); }
.continuity-step.is-next .continuity-step-index { border-color: rgba(117, 185, 248, .58); color: #a8dcf7; }
.review-continuity-steps { margin-bottom: 7px; }
.review-continuity-steps .continuity-step-copy strong { letter-spacing: .01em; }
.attention-list > .empty-state-guidance { position: relative; overflow: hidden; border-style: solid; border-color: rgba(137, 211, 177, .22); background: radial-gradient(circle at 92% 8%, rgba(137, 211, 177, .1), transparent 34%), linear-gradient(145deg, rgba(17, 31, 35, .58), rgba(8, 13, 21, .46)); }
.attention-list > .empty-state-guidance::before { position: absolute; top: 0; right: 14%; left: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(137, 211, 177, .65), transparent); content: ""; }
.attention-clear-mark { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 4px; border: 1px solid rgba(137, 211, 177, .62); border-radius: 50%; color: #b1e6ce; background: rgba(137, 211, 177, .12); box-shadow: 0 0 0 5px rgba(137, 211, 177, .045), 0 0 18px rgba(137, 211, 177, .15); font: 800 .9rem ui-sans-serif, system-ui, sans-serif; }
.empty-state-guidance strong { color: #e6ebf1; font-size: .9rem; letter-spacing: -.018em; }
.empty-state-guidance p { max-width: 620px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.58; }
.empty-state-guidance .button { margin-top: 5px; min-height: 44px; font-size: .7rem; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.empty-state-actions .button { margin-top: 0; }
.attention-card { margin: 34px 0 18px; padding: 24px; }
.attention-list { display: grid; gap: 9px; margin-top: 18px; }
.attention-item { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; padding: 17px 17px 16px; border-color: rgba(117, 185, 248, .16); background: linear-gradient(145deg, rgba(18, 27, 40, .76), rgba(9, 14, 22, .88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.attention-item[data-attention-lane="exploitation"]::before { background: linear-gradient(180deg, #e87967, rgba(240, 157, 112, .35)); }
.attention-item[data-attention-lane="timeline"]::before { background: linear-gradient(180deg, #f0b36e, rgba(117, 185, 248, .35)); }
.attention-item::before { position: absolute; inset: 0 auto 0 0; width: 2px; border-radius: 10px 0 0 10px; background: linear-gradient(180deg, #f2a176, rgba(117, 185, 248, .35)); content: ""; }
.attention-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 11px; min-width: 0; }
.attention-case-ref { color: #8cc8ec; font: 700 .6rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.attention-title { overflow-wrap: anywhere; font-size: .9rem; letter-spacing: -.018em; }
.attention-lane-tag { display: inline-flex !important; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid rgba(240, 197, 121, .32); border-radius: 999px; color: #f1cf96 !important; background: rgba(240, 197, 121, .08); font: 700 .5rem ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: .08em; text-transform: uppercase; }
.attention-lane-tag::before { width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; }
.attention-item[data-attention-lane="timeline"] .attention-lane-tag { border-color: rgba(131, 201, 239, .32); color: #9bd7f3 !important; background: rgba(131, 201, 239, .08); }
.attention-item[data-attention-lane="exploitation"] .attention-lane-tag { border-color: rgba(232, 121, 103, .34); color: #f4ad9b !important; background: rgba(232, 121, 103, .08); }
.attention-rvo-citation { display: block; margin-top: 10px; overflow-wrap: anywhere; color: var(--dim); font-size: .65rem; line-height: 1.45; }
.join-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 22px; border-color: rgba(249,115,22,.38); }
.join-panel-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; color: #b8c4d0; font-size: .67rem; }
.join-panel-route .tag { margin: 0; }
.join-panel h2 { margin: 5px 0 8px; }
.join-panel p:last-child { margin: 0; color: var(--muted); }
.team-card { margin-bottom: 18px; padding: 24px; }
.onboarding-path-card { margin: 27px 0 30px; padding: 28px; border-color: rgba(110, 197, 232, .24); background: linear-gradient(125deg, rgba(14, 30, 42, .78), rgba(11, 18, 29, .88)); }
.onboarding-path-card .section-heading > div > p:last-child { max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.onboarding-path-meter { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.onboarding-path-meter-visual { position: relative; display: block; flex: 1 1 auto; min-width: 0; padding: 9px 0; }
.onboarding-path-meter-track { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(117, 185, 248, .12); }
.onboarding-path-meter-track::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240, 157, 112, .18), rgba(117, 185, 248, .1)); content: ""; }
.onboarding-path-meter-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f09d70, #75b9f8); box-shadow: 0 0 14px rgba(117, 185, 248, .28); transition: width .35s ease; }
.onboarding-path-meter-steps { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.onboarding-path-meter-steps li { width: 9px; height: 9px; border: 1px solid rgba(117, 185, 248, .34); border-radius: 50%; background: #101a27; box-shadow: 0 0 0 3px rgba(9, 15, 24, .8); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.onboarding-path-meter-steps li[data-state="recorded"] { border-color: rgba(164, 214, 194, .8); background: #a4d6c2; box-shadow: 0 0 0 3px rgba(164, 214, 194, .08), 0 0 10px rgba(164, 214, 194, .3); }
.onboarding-path-meter-steps li[data-state="next"] { border-color: #f0a074; background: #f0a074; box-shadow: 0 0 0 4px rgba(240, 160, 116, .1), 0 0 13px rgba(240, 160, 116, .34); transform: scale(1.15); }
.onboarding-path-meter-steps li[data-state="waiting"] { opacity: .72; }
.onboarding-path-meter strong { flex: 0 0 auto; color: #a9bdd0; font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.onboarding-path-steps { display: grid; gap: 1px; margin: 24px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); list-style: none; }
.onboarding-path-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 16px; background: rgba(7, 14, 23, .62); }
.onboarding-path-step.is-recorded { background: linear-gradient(90deg, rgba(137, 211, 177, .045), rgba(7, 14, 23, .62) 42%); }
.onboarding-path-step.is-recorded .onboarding-path-step-copy strong { color: #c8d8d4; }
.onboarding-path-step.is-recorded .onboarding-path-step-copy span { color: #899c9d; }
.onboarding-path-step.is-next { position: relative; background: linear-gradient(90deg, rgba(240, 157, 112, .14), rgba(7, 14, 23, .7) 36%, rgba(117, 185, 248, .035)); box-shadow: inset 3px 0 0 #f09d70, inset -1px 0 0 rgba(117, 185, 248, .28), 0 7px 26px rgba(4, 8, 14, .12); }
.onboarding-path-step.is-next .onboarding-path-step-number { border-color: rgba(240, 157, 112, .78); background: rgba(240, 157, 112, .12); color: #ffd0b3; box-shadow: 0 0 0 4px rgba(240, 157, 112, .05); }
.onboarding-path-step.is-next .onboarding-path-step-copy strong::after { margin-left: 10px; color: #f0a074; content: "NEXT"; font: 700 .52rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; vertical-align: middle; }
.onboarding-path-step-number { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(110, 197, 232, .34); border-radius: 50%; color: var(--cyan); font-size: .69rem; font-weight: 760; letter-spacing: .04em; }
.onboarding-path-step.is-recorded .onboarding-path-step-number { border-color: rgba(242, 138, 85, .52); background: rgba(242, 138, 85, .1); color: #f5ad81; }
.onboarding-path-step-copy { display: grid; gap: 4px; min-width: 0; }
.onboarding-path-step-copy strong { font-size: .87rem; }
.onboarding-path-step-copy span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.onboarding-path-state { justify-self: end; color: var(--dim); font-size: .66rem; font-weight: 720; letter-spacing: .065em; text-align: right; text-transform: uppercase; }
.onboarding-path-action { justify-self: end; white-space: nowrap; font-size: .72rem; }
.onboarding-brief-card { margin: 30px 0; padding: 28px; border-color: rgba(126, 207, 244, .34); background: linear-gradient(135deg, rgba(20, 39, 54, .62), rgba(13, 22, 32, .84)); }
.onboarding-brief-card .section-heading > div > p:last-child { max-width: 770px; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.onboarding-brief-sources { display: grid; gap: 10px; margin-top: 24px; }
.onboarding-source-card { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 13, 21, .42); }
.onboarding-source-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.onboarding-source-title { display: grid; gap: 8px; min-width: 0; }
.onboarding-source-title .tag { justify-self: start; color: #f4ac82; }
.onboarding-source-title strong { overflow-wrap: anywhere; font-size: .96rem; letter-spacing: -.018em; }
.onboarding-source-inspect { min-height: 44px; flex: 0 0 auto; padding: 0 12px; font-size: .72rem; }
.onboarding-source-metadata { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--line); }
.onboarding-source-metadata-item { min-width: 0; padding: 10px 11px; background: rgba(10, 18, 28, .68); }
.onboarding-source-metadata-item span, .onboarding-source-metadata-item strong { display: block; }
.onboarding-source-metadata-item span { color: var(--dim); font-size: .63rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.onboarding-source-metadata-item strong { margin-top: 5px; overflow-wrap: anywhere; color: #dce3e9; font-size: .74rem; font-weight: 600; line-height: 1.4; }
.onboarding-source-proposals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.onboarding-source-proposals .tag { max-width: 100%; overflow-wrap: anywhere; white-space: normal; color: #c6d4df; font-size: .65rem; text-transform: none; letter-spacing: .015em; }
.onboarding-brief-boundary { margin: 16px 0 0; color: var(--dim); font-size: .76rem; line-height: 1.55; }
.selected-source-policy-card { margin: 30px 0 36px; padding: 28px; border-color: rgba(112, 184, 229, .28); background: linear-gradient(135deg, rgba(14, 35, 49, .72), rgba(13, 20, 31, .84)); }
.selected-source-policy-card .section-heading > div > p:last-child { max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.selected-source-policy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.selected-source-policy-form > label { display: grid; gap: 7px; color: #dee6ec; font-size: .82rem; font-weight: 650; }
.selected-source-policy-form select, .selected-source-policy-form input, .selected-source-policy-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; color: var(--ink); background: rgba(6, 16, 25, .72); }
.selected-source-policy-form textarea { min-height: 92px; resize: vertical; }
.selected-source-policy-form small { color: var(--dim); font-size: .72rem; font-weight: 500; line-height: 1.45; }
.selected-source-policy-form .span-two, .selected-source-policy-actions { grid-column: 1 / -1; }
.selected-source-policy-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.selected-source-policy-actions p { max-width: 650px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.operating-policy-card { margin: 30px 0 36px; padding: 28px; border-color: rgba(110, 151, 205, .28); background: linear-gradient(135deg, rgba(17, 31, 48, .76), rgba(14, 20, 31, .8)); }
.operating-policy-card .section-heading > div > p:last-child { max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.operating-policy-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.operating-policy-detail { min-height: 84px; padding: 13px 14px; background: rgba(7, 14, 23, .56); }
.operating-policy-detail span, .operating-policy-detail strong { display: block; }
.operating-policy-detail span { color: var(--dim); font-size: .65rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.operating-policy-detail strong { margin-top: 7px; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.36; }
.operating-policy-rationale { grid-column: 1 / -1; margin: 0; padding: 14px; color: var(--muted); background: rgba(7, 14, 23, .56); white-space: pre-wrap; font-size: .83rem; line-height: 1.55; }
.operating-policy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.operating-policy-form > label { display: grid; gap: 7px; color: #dedee6; font-size: .83rem; font-weight: 650; }
.operating-policy-form select, .operating-policy-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; color: var(--ink); background: rgba(7, 14, 23, .72); }
.operating-policy-form textarea { min-height: 112px; resize: vertical; }
.operating-policy-form small { color: var(--dim); font-size: .72rem; font-weight: 500; line-height: 1.45; }
.operating-policy-context { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.operating-policy-context legend { padding: 0 5px; color: var(--muted); font-size: .78rem; }
.product-context-options legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.product-context-options legend output { margin-left: auto; padding: 3px 7px; border: 1px solid rgba(131, 201, 239, .24); border-radius: 999px; color: #a8dcf7; background: rgba(117, 185, 248, .08); font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.product-context-options legend output[data-selection-state="ready"] { border-color: rgba(139, 231, 209, .42); color: #dffcf3; background: rgba(103, 205, 180, .12); }
.operating-policy-context p { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: .76rem; }
.operating-policy-context label { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: .78rem; font-weight: 550; line-height: 1.4; }
.product-context-options label { min-height: 44px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.product-context-filter-label { display: grid !important; gap: 6px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; color: var(--muted); }
.product-context-filter-label input { width: 100%; min-height: 44px; }
.product-context-filter-note { color: var(--dim); font-size: .7rem; }
.product-context-filter-status { color: var(--muted); font-size: .7rem; }
.product-context-options > label.is-filtered { display: none !important; }
.product-context-options label:hover, .product-context-options label:focus-within { border-color: rgba(117, 185, 248, .28); background: rgba(117, 185, 248, .06); color: #e5f5ff; }
.product-context-options label.is-selected { border-color: rgba(139, 231, 209, .42); background: linear-gradient(135deg, rgba(103, 205, 180, .14), rgba(117, 185, 248, .08)); color: #effffb; box-shadow: inset 0 1px 0 rgba(236, 255, 252, .08), 0 7px 18px rgba(3, 17, 26, .16); }
.operating-policy-context input { margin-top: 2px; accent-color: var(--acid); }
.product-context-group-label { grid-column: 1 / -1; margin-top: 4px; padding-top: 9px; border-top: 1px solid rgba(179, 215, 232, .1); color: var(--dim); font: 700 .59rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.product-context-group-label:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.operating-policy-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.operating-policy-actions p { max-width: 620px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.ai-data-use-card { margin: 30px 0 36px; padding: 28px; border-color: rgba(103, 184, 225, .3); background: linear-gradient(135deg, rgba(11, 34, 46, .82), rgba(14, 20, 31, .82)); }
.ai-data-use-card .section-heading > div > p:last-child { max-width: 770px; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.ai-data-use-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.ai-data-use-detail { min-height: 84px; padding: 13px 14px; background: rgba(6, 16, 25, .6); }
.ai-data-use-detail span, .ai-data-use-detail strong { display: block; }
.ai-data-use-detail span { color: var(--dim); font-size: .65rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.ai-data-use-detail strong { margin-top: 7px; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.36; }
.ai-data-use-purpose { grid-column: 1 / -1; margin: 0; padding: 14px; color: var(--muted); background: rgba(6, 16, 25, .6); white-space: pre-wrap; font-size: .83rem; line-height: 1.55; }
.ai-data-use-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ai-data-use-form > label { display: grid; gap: 7px; color: #dedee6; font-size: .83rem; font-weight: 650; }
.ai-data-use-form select, .ai-data-use-form input, .ai-data-use-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; color: var(--ink); background: rgba(6, 16, 25, .72); }
.ai-data-use-form textarea { min-height: 104px; resize: vertical; }
.ai-data-use-form small { color: var(--dim); font-size: .72rem; font-weight: 500; line-height: 1.45; }
.ai-data-use-options { display: grid; grid-column: 1 / -1; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px; }
.ai-data-use-options legend { padding: 0 5px; color: var(--muted); font-size: .78rem; }
.ai-data-use-options > p { margin: 0 0 3px; color: var(--dim); font-size: .76rem; line-height: 1.5; }
.ai-data-use-option, .ai-data-use-unavailable { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 12px; border: 1px solid rgba(155, 197, 217, .14); border-radius: 9px; background: rgba(6, 16, 25, .32); }
.ai-data-use-option { cursor: pointer; }
.ai-data-use-option:has(input:checked) { border-color: rgba(110, 197, 232, .52); background: rgba(38, 111, 145, .12); }
.ai-data-use-option input { width: auto; margin-top: 3px; accent-color: var(--cyan); }
.ai-data-use-option strong, .ai-data-use-option small, .ai-data-use-unavailable strong, .ai-data-use-unavailable small { display: block; }
.ai-data-use-option strong, .ai-data-use-unavailable strong { color: #e1ebf1; font-size: .82rem; }
.ai-data-use-option small, .ai-data-use-unavailable small { margin-top: 4px; color: var(--dim); font-size: .73rem; line-height: 1.45; }
.ai-data-use-unavailable { grid-template-columns: auto 1fr; opacity: .74; }
.ai-data-use-unavailable .tag { align-self: start; color: #9ba9b3; }
.ai-data-use-actions { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.ai-data-use-actions p { max-width: 650px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.ai-data-use-actions #ai-data-use-withdrawal-note { color: #f3bd95; }
.team-list { display: grid; gap: 9px; margin-top: 18px; }
.team-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,11,18,.42); }
.team-row-main { display: grid; gap: 7px; }
.team-row-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.team-row small { color: var(--muted); overflow-wrap: anywhere; }
.invitation-link { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.invitation-link code { overflow: hidden; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,11,18,.42); }
.attention-item p { grid-column: 2; margin: 0; color: var(--muted); font-size: .82rem; }
.attention-owner { grid-column: 2; color: var(--dim); font-size: .73rem; }
.attention-evidence-cue { grid-column: 2; color: var(--dim); font-size: .7rem; letter-spacing: .01em; }
.attention-open-case, .attention-open-destination { align-self: center; grid-column: 3; grid-row: 1 / span 3; }
.attention-item[data-guidance-disposition="safety-filtered"] { border-color: rgba(240, 197, 121, .34); background: linear-gradient(145deg, rgba(42, 35, 27, .58), rgba(13, 18, 24, .88)); }
.attention-item[data-guidance-disposition="safety-filtered"]::before { background: linear-gradient(180deg, #e7c27e, rgba(240, 197, 121, .28)); }
.attention-boundary { grid-column: 2 / -1; color: var(--dim); font-size: .74rem; }
.catalog-card { margin: 18px 0 28px; padding: 24px; }
.catalog-card .section-heading p { max-width: 650px; margin-top: 8px; color: var(--muted); font-size: .82rem; }
.catalog-list { display: grid; gap: 9px; margin-top: 18px; }
.catalog-item { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,11,18,.42); }
.catalog-item-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.catalog-item small { color: var(--dim); }
.release-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.intake-card, .case-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(27,28,40,.9), rgba(14,15,23,.94)); }
.case-card { position: relative; overflow: hidden; }
.case-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, #f58a4f, #52b7e8); content: ""; opacity: .8; }
.case-card-focused { border-color: rgba(247,123,61,.72); box-shadow: 0 0 0 3px rgba(247,123,61,.13), 0 26px 70px rgba(0,0,0,.25); }
.intake-card-header, .case-card-header { display: flex; justify-content: space-between; gap: 20px; }
.case-card-header { align-items: flex-start; padding-bottom: 13px; border-bottom: 1px solid rgba(117, 185, 248, .13); }
.case-card-header h3 { max-width: 780px; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.03em; }
.intake-card h3, .case-card h3 { margin: 8px 0; font-size: 1.2rem; }
.case-card-header h3 { max-width: 780px; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.03em; }
.intake-card p, .case-card p { color: var(--muted); white-space: pre-wrap; }
.response-path { margin: 18px 0 20px; padding: 15px 16px 16px; border: 1px solid rgba(117, 185, 248, .14); border-radius: 12px; background: linear-gradient(145deg, rgba(14, 24, 36, .72), rgba(7, 12, 19, .78)); }
.response-path-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.response-path-boundary { color: #8ea5ba; font-size: .68rem; line-height: 1.35; text-align: right; }
.response-path-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.response-path-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 7px 8px; min-height: 68px; padding: 10px 9px; border: 1px solid rgba(142, 165, 186, .12); border-radius: 9px; background: rgba(7, 12, 19, .48); }
.response-path-step:not(:last-child)::after { position: absolute; top: 20px; right: -9px; width: 10px; height: 1px; background: rgba(142, 165, 186, .24); content: ""; }
.response-path-step.is-complete { border-color: rgba(117, 185, 248, .23); background: linear-gradient(145deg, rgba(26, 44, 61, .66), rgba(8, 16, 26, .62)); }
.response-path-step.is-current { border-color: rgba(240, 157, 112, .58); box-shadow: inset 0 1px 0 rgba(240, 157, 112, .2), 0 8px 26px rgba(0, 0, 0, .16); }
.response-path-marker { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(142, 165, 186, .28); border-radius: 50%; color: #a9bed1; font-size: .61rem; font-weight: 700; }
.is-complete .response-path-marker { border-color: rgba(117, 185, 248, .48); color: #a9dcff; }
.is-current .response-path-marker { border-color: rgba(240, 157, 112, .82); color: #ffc09e; }
.response-path-copy { display: grid; gap: 2px; }
.response-path-step strong { color: #e9eff5; font-size: .73rem; }
.response-path-step small { grid-column: 1 / -1; color: #8ea5ba; font-size: .64rem; line-height: 1.35; }
.response-basis { margin: 0 0 20px; padding: 17px 16px 16px; border: 1px solid rgba(240, 157, 112, .16); border-radius: 12px; background: linear-gradient(145deg, rgba(33, 29, 29, .58), rgba(10, 14, 20, .82)); }
.response-basis-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.response-basis-title { margin: 4px 0 0; color: #edf1f5; font-size: .94rem; }
.response-basis-boundary { max-width: 320px; color: #a9a0a0; font-size: .68rem; line-height: 1.4; text-align: right; }
.response-basis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.response-basis-item { display: grid; align-content: start; gap: 7px; min-height: 96px; padding: 12px; border: 1px solid rgba(142, 165, 186, .13); border-radius: 9px; background: rgba(7, 12, 19, .46); }
.response-basis-item strong { color: #e7edf3; font-size: .8rem; line-height: 1.3; }
.response-basis-item small { color: #9caebe; font-size: .65rem; line-height: 1.42; overflow-wrap: anywhere; }
.response-basis-inspect { justify-self: start; margin-top: auto; padding: 0; border: 0; background: transparent; font-size: .64rem; }
.response-basis-label { color: #c8a995; font-size: .63rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.intake-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 15px 0; }
.intake-field { padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.intake-field span, .intake-field strong { display: block; }
.intake-field span { color: var(--dim); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.artifact-list { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.artifact-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,11,18,.42); }
.artifact-row > div { display: grid; gap: 5px; min-width: 0; }
.artifact-row strong { overflow-wrap: anywhere; }
.artifact-row small { color: var(--dim); }
.artifact-row .evidence-button { flex: 0 0 auto; margin-top: 0; }
.intake-field strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .86rem; }
.case-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(170px, .8fr)); gap: 1px; margin: 19px 0 13px; border: 1px solid rgba(92,143,202,.3); border-radius: 11px; overflow: hidden; background: rgba(92,143,202,.22); }
.case-overview > div { display: grid; align-content: start; gap: 6px; min-height: 126px; padding: 15px; background: rgba(7,14,23,.8); }
.case-overview-current { background: linear-gradient(135deg, rgba(18,41,66,.94), rgba(11,18,28,.96)) !important; }
.case-overview-label { color: #8ebddd; font-size: .66rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.case-overview strong { color: var(--ink); font-size: .91rem; line-height: 1.35; }
.case-overview p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.case-overview-readiness strong { color: #f6bf93; }
.case-overview-timing strong { color: #9dc8f2; }
.case-authority-note, .case-stage-note { grid-column: 1 / -1; margin: 0; padding: 10px 15px; border-top: 1px solid rgba(92,143,202,.22); color: #9eb2c5; background: rgba(5,10,17,.9); font-size: .72rem !important; line-height: 1.45; }
.case-stage-note { padding-top: 0; border-top: 0; color: #79bce2; }
.case-fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.case-fact-grid .intake-field { min-height: 74px; background: rgba(8,13,20,.35); }
.intake-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.psirtling-confirmation { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid rgba(249,115,22,.42); border-radius: 10px; background: linear-gradient(135deg, rgba(57,30,24,.5), rgba(16,22,35,.68)); }
.psirtling-confirmation p { margin: 0; color: var(--muted); }
.confirmation-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; color: var(--text); font-weight: 600; }
.confirmation-check input { margin-top: 3px; }
.psirtling-action-receipts { display: grid; gap: 9px; margin-top: 18px; padding: 16px; border: 1px solid rgba(59,130,246,.34); border-radius: 10px; background: rgba(12,28,48,.4); }
.psirtling-action-receipt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px; align-items: center; }
.psirtling-action-receipt small { grid-column: 2; color: var(--muted); }
.psirtling-action-receipt .button { grid-column: 2; justify-self: start; }
.case-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.case-actions-top { justify-content: flex-start; align-items: center; margin: 0 0 6px; padding: 12px 0; border-bottom: 1px solid rgba(117, 185, 248, .13); }
.case-actions-top::before { margin-right: 4px; color: #8ebddd; content: "Permitted actions"; font-size: .58rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.case-work-section, .retained-lesson-section { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(92,143,202,.28); border-radius: 11px; background: rgba(12,28,48,.42); }
.retained-lesson-section { border-color: rgba(74,222,128,.28); background: linear-gradient(135deg, rgba(16,52,40,.28), rgba(12,28,48,.42)); }
.case-relationship-section { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(110,197,232,.30); border-radius: 11px; background: linear-gradient(135deg, rgba(14,43,64,.44), rgba(12,28,48,.42)); }
.case-relationship-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.case-relationship-heading p { margin: 4px 0 0; font-size: .78rem; }
.case-relationship-list { display: grid; gap: 8px; }
.case-relationship-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 11px; border: 1px solid rgba(110,197,232,.20); border-radius: 9px; background: rgba(5,14,24,.42); }
.case-relationship-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.case-relationship-item p { margin: 0; font-size: .76rem; }
.rvo-summary { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(247,123,61,.34); border-radius: 11px; background: linear-gradient(135deg, rgba(48,27,25,.42), rgba(12,28,48,.38)); }
.rvo-summary-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rvo-summary-title { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.4; }
.rvo-summary p { margin: 0; font-size: .82rem; }
.rvo-resolution-basis { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(82,183,232,.32); border-radius: 10px; background: linear-gradient(135deg, rgba(17,48,68,.72), rgba(8,18,30,.78)); }
.rvo-resolution-basis-warning { border-color: rgba(247,123,61,.62); background: linear-gradient(135deg, rgba(67,29,25,.72), rgba(19,19,30,.82)); box-shadow: inset 3px 0 0 rgba(247,123,61,.82); }
.rvo-resolution-basis-historical { border-style: dashed; }
.rvo-resolution-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rvo-resolution-heading > div { display: grid; gap: 5px; }
.rvo-resolution-title { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.4; }
.rvo-resolution-claim { width: fit-content; padding: 6px 9px; border: 1px solid rgba(247,123,61,.44); border-radius: 7px; color: #ffd1b8; background: rgba(76,34,27,.55); font-size: .74rem; letter-spacing: .02em; }
.rvo-resolution-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rvo-resolution-meta code { color: #9dc8f2; font: .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.rvo-blocker-title { margin: 2px 0 -2px; color: var(--ink); font-size: .78rem; line-height: 1.4; }
.rvo-blocker-list { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .8rem; }
.rvo-digest { color: #9dc8f2; font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.case-work-heading, .retained-lesson-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.case-work-heading p, .retained-lesson-heading p { margin: 4px 0 0; font-size: .78rem; }
.case-work-list { display: grid; gap: 8px; }
.case-work-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,13,20,.5); }
.case-work-item p { grid-column: 1 / -1; margin: 0; font-size: .82rem; }
.case-work-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.case-work-item .button { align-self: start; }
.retained-lesson-list { display: grid; gap: 8px; }
.retained-lesson-item { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,13,20,.5); }
.retained-lesson-item p { margin: 0; font-size: .82rem; white-space: pre-line; }
.retained-lesson-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.case-work-dependencies { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.case-work-dependencies legend { padding: 0 6px; color: var(--muted); font-size: .78rem; }
#case-work-dependency-list { display: grid; gap: 8px; }
#case-work-dependency-list label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-weight: 500; }
#case-work-dependency-list small { display: block; color: var(--dim); }
.disclosure-section { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(221,124,63,.32); border-radius: 11px; background: linear-gradient(135deg, rgba(48,27,25,.42), rgba(12,28,48,.38)); }
.disclosure-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.disclosure-heading p { margin: 4px 0 0; font-size: .78rem; }
.disclosure-delivery-authority-section { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(167,139,250,.32); border-radius: 11px; background: linear-gradient(135deg, rgba(46,30,72,.32), rgba(12,28,48,.42)); }
.disclosure-delivery-authority-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.disclosure-delivery-authority-heading p { margin: 4px 0 0; font-size: .78rem; }
.disclosure-delivery-authority-list { display: grid; gap: 8px; }
.disclosure-delivery-authority-item { display: grid; gap: 7px; padding: 11px; border: 1px solid rgba(167,139,250,.22); border-radius: 9px; background: rgba(13,9,25,.42); }
.disclosure-delivery-authority-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.disclosure-delivery-authority-item p { margin: 0; font-size: .76rem; }
.disclosure-list { display: grid; gap: 8px; }
.disclosure-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,13,20,.56); }
.disclosure-item p { grid-column: 1 / -1; margin: 0; font-size: .82rem; }
.disclosure-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.disclosure-hash { display: block; margin-top: 7px; color: #9dc8f2; font-size: .72rem; overflow-wrap: anywhere; }
.disclosure-review { display: grid; gap: 10px; margin: 16px 0; }
.disclosure-review > div { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,13,20,.56); }
.disclosure-review span { color: var(--dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.disclosure-review code, .disclosure-review pre { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.researcher-thread { display: grid; gap: 9px; margin-top: 16px; padding: 15px; border: 1px solid rgba(92,143,202,.28); border-radius: 11px; background: rgba(12,28,48,.48); }
.researcher-message { display: grid; gap: 6px; padding-top: 11px; border-top: 1px solid var(--line); }
.researcher-message:first-of-type { border-top: 0; }
.researcher-message .tag { justify-self: start; }
.researcher-message small, .delivery-truth { color: var(--muted); }
.researcher-message p { margin: 4px 0 0; color: var(--ink); white-space: pre-wrap; }
.deadline-card { margin-bottom: 18px; }
.deadline-policy-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.deadline-policy-form > label, .deadline-policy-form fieldset label { color: #dedee6; font-size: .83rem; font-weight: 650; }
.deadline-policy-form input, .deadline-policy-form textarea { display: block; width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; color: var(--ink); background: #11121a; }
.deadline-policy-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.deadline-policy-form legend { padding: 0 6px; color: var(--muted); font-size: .76rem; }
.deadline-policy-reason, .deadline-policy-actions { grid-column: 1 / -1; }
.deadline-policy-actions { display: flex; justify-content: flex-end; }
.deadline-list { display: grid; gap: 8px; margin-top: 16px; }
.deadline-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,13,20,.38); }
.deadline-row strong, .deadline-row small { display: block; }
.deadline-row small { margin-top: 3px; color: var(--muted); }

.proposal-list { display: grid; gap: 12px; }
.proposal-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(27,28,40,.9), rgba(14,15,23,.94)); box-shadow: 0 12px 45px rgba(0,0,0,.14); }
.proposal-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.tag-observed { border-color: rgba(59,130,246,.3); color: #93c5fd; }
.tag-integrated { border-color: rgba(167,139,250,.36); color: #c4b5fd; }
.tag-proposed { border-color: rgba(255,211,109,.25); color: var(--warning); }
.tag-confirmed { border-color: rgba(74,222,128,.28); color: #4ade80; }
.tag-rejected { border-color: rgba(255,139,120,.25); color: var(--danger); }
body.platform-mode .tag-confirmed { border-color: rgba(34, 197, 94, .3); color: #4ade80; }
.proposal-predicate { margin-bottom: 7px; color: var(--muted); font: 700 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.proposal-value { max-width: 790px; overflow-wrap: anywhere; font-size: 1.12rem; font-weight: 680; letter-spacing: -.015em; }
.proposal-context { margin: 12px 0 0; color: var(--dim); font-size: .78rem; }
.proposal-next-question { margin: 9px 0 0; padding: 9px 11px; border-left: 2px solid rgba(125, 211, 252, .54); color: var(--text); background: rgba(125, 211, 252, .055); font-size: .78rem; line-height: 1.45; }
.proposal-actions { display: flex; align-items: center; gap: 8px; }
.evidence-button { margin-top: 15px; border: 0; padding: 0; background: transparent; color: var(--cyan); cursor: pointer; font-size: .78rem; }
.evidence-button:hover { text-decoration: underline; }

.audit-list { list-style: none; margin: 40px 0 0; padding: 0; }
.audit-event { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding-bottom: 28px; }
.audit-event:not(:last-child)::before { content: ""; position: absolute; top: 33px; left: 17px; bottom: 0; width: 1px; background: var(--line); }
.audit-sequence { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line-bright); border-radius: 50%; color: var(--acid); font: .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.audit-body { padding: 3px 0 20px; border-bottom: 1px solid var(--line); }
.audit-body strong { display: block; margin-bottom: 4px; }
.audit-body p { margin-bottom: 9px; color: var(--muted); }
.hash-line { overflow: hidden; color: var(--dim); font: .67rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }

dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); border: 1px solid var(--line-bright); border-radius: 18px; padding: 0; color: var(--ink); background: var(--surface-solid); box-shadow: 0 30px 120px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(3,5,4,.78); backdrop-filter: blur(9px); }
.dialog-shell { padding: 25px; }
.dialog-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.dialog-assertion { margin: 24px 0; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #11121a; }
.dialog-assertion span, .dialog-assertion strong { display: block; overflow-wrap: anywhere; }
.dialog-assertion span { margin-bottom: 8px; color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.dialog-grid.nested-grid { margin-top: 0; }
.dialog-grid label { display: block; color: #dedee6; font-size: .83rem; font-weight: 650; }
.dialog-grid input, .dialog-grid select, .dialog-grid textarea { display: block; width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; color: var(--ink); background: #11121a; }
.dialog-shell textarea { resize: vertical; }
.dialog-guidance { margin: 0 0 14px; color: var(--muted); font-size: .8rem; }
.route-switch-button { display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 4px; padding: 0; border: 0; color: #9fd5ef; background: transparent; font-size: .71rem; font-weight: 700; cursor: pointer; }
.route-switch-button span { color: #f0a073; transition: transform .18s ease; }
.route-switch-button:hover, .route-switch-button:focus-visible { color: #e3f5ff; text-decoration: underline; text-underline-offset: 3px; }
.route-switch-button:hover span, .route-switch-button:focus-visible span { transform: translateX(3px); }
.setup-domain-context { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 1px 0 3px; padding: 7px 9px; border: 1px solid rgba(117, 185, 248, .22); border-radius: 999px; color: #9ec9e4; background: rgba(21, 47, 69, .34); font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.setup-domain-context::before { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #89d3b1; box-shadow: 0 0 9px rgba(137, 211, 177, .52); content: ""; }
.setup-email-domain-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 8px; padding: 8px 10px; border: 1px solid rgba(117, 224, 194, .22); border-radius: 10px; color: #b9d8d0; background: rgba(26, 67, 69, .24); font-size: .72rem; line-height: 1.35; }
.setup-email-domain-hint .button { flex: 0 0 auto; padding: 6px 9px; font-size: .62rem; }
.setup-email-domain-hint small { color: #83a9a6; font-size: .61rem; white-space: nowrap; }
.setup-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 22px; padding: 0; list-style: none; }
.setup-flow li { position: relative; display: grid; gap: 6px; min-width: 0; padding: 11px 10px 10px; border-top: 1px solid rgba(132, 177, 218, .2); color: #778697; }
.setup-flow li::after { position: absolute; top: -1px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .86), transparent); content: ""; opacity: 0; }
.setup-flow li.is-current { color: #e6edf2; background: linear-gradient(180deg, rgba(240, 157, 112, .08), transparent); }
.setup-flow li.is-current::after { opacity: 1; }
.setup-flow li.is-complete { color: #a8d8c2; background: linear-gradient(180deg, rgba(137, 211, 177, .07), transparent); }
.setup-flow li.is-complete::after { opacity: 1; background: linear-gradient(90deg, rgba(137, 211, 177, .78), transparent); }
.setup-flow li span { color: #80c6e9; font: 700 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.setup-flow li.is-current span { color: #f0a073; }
.setup-flow li.is-complete span { color: #9ad9bf; }
.setup-flow li strong { overflow-wrap: anywhere; font-size: .68rem; letter-spacing: -.01em; }
.sign-in-dialog-shell { width: min(560px, calc(100vw - 28px)); }
.sign-in-flow { margin-top: 20px; }
.sign-in-route-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin: 15px 0 2px; padding: 10px 12px; border: 1px solid rgba(125, 211, 252, .5); border-radius: 10px; background: linear-gradient(100deg, rgba(125, 211, 252, .17), rgba(167, 139, 250, .14)); color: #c8ddeb; font-size: .72rem; box-shadow: 0 8px 22px rgba(34, 85, 126, .12); }
.sign-in-route-callout > span { color: #dcecf5; font-weight: 700; }
.sign-in-route-callout #signin-alt { white-space: nowrap; }
.sign-in-route-callout .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 9px; border: 1px solid rgba(125, 211, 252, .22); border-radius: 8px; color: #a8e6fa; background: rgba(125, 211, 252, .055); font-weight: 750; }
.sign-in-route-callout .text-button span { color: #f0a073; transition: transform .18s ease; }
.sign-in-route-callout .text-button:hover span, .sign-in-route-callout .text-button:focus-visible span { transform: translateX(3px); }
.sign-in-status-prominent {
  position: relative;
  margin: 18px 0 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(125, 211, 252, .22);
  border-left: 2px solid rgba(125, 211, 252, .78);
  border-radius: 0 9px 9px 0;
  color: #ccecf8;
  background: linear-gradient(105deg, rgba(125, 211, 252, .1), rgba(167, 139, 250, .06) 72%, transparent);
  line-height: 1.5;
}
.sign-in-status-prominent::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border: 1px solid rgba(125, 211, 252, .86);
  border-radius: 50%;
  background: rgba(125, 211, 252, .35);
  box-shadow: 0 0 11px rgba(125, 211, 252, .32);
  content: "";
  vertical-align: middle;
}
.sign-in-route-note { margin: 11px 0 0; color: #8fa5b5; font-size: .72rem; line-height: 1.45; }
.sign-in-route-note strong { color: #c8ddeb; }
.text-button { padding: 0; border: 0; color: #f0a073; background: transparent; font: inherit; cursor: pointer; }
.text-button:hover, .text-button:focus-visible { color: #ffd0b7; text-decoration: underline; text-underline-offset: 3px; }
dialog#training-dialog { width: min(680px, calc(100vw - 28px)); }
.training-dialog-shell { width: auto; }
.psirtling-explanation-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(125,211,252,.14); }
.psirtling-explanation-section h3 { margin: 0 0 9px; color: #d9f2fb; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.psirtling-explanation-record { margin: 8px 0 0; color: #b8d5df; }
.psirtling-explanation-record-check { margin-top: 8px; min-height: 36px; }
.psirtling-explanation-more-findings { margin-top: 10px; border-top: 1px solid rgba(125,211,252,.1); }
.psirtling-explanation-more-findings summary { display: inline-flex; min-height: 40px; align-items: center; color: #9fd7eb; cursor: pointer; font-size: .78rem; font-weight: 700; }
.psirtling-explanation-more-findings summary::marker { color: #75b9f8; }
.psirtling-explanation-more-findings[open] { padding-bottom: 2px; }
.psirtling-explanation-more-findings p { margin: 10px 0 6px; }
.psirtling-explanation-more-questions { margin-top: 10px; border-top: 1px solid rgba(125,211,252,.1); }
.psirtling-explanation-more-questions summary { display: inline-flex; min-height: 40px; align-items: center; color: #9fd7eb; cursor: pointer; font-size: .78rem; font-weight: 700; }
.psirtling-explanation-more-questions summary::marker { color: #75b9f8; }
.psirtling-explanation-review-form,.psirtling-explanation-review-actions { display: grid; gap: 10px; }
.training-record-history { margin-top: 14px; }
.training-record-history h3 { margin: 0 0 8px; color: #d9f2fb; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.training-record-history-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #b8d5df; font-size: .78rem; }
.training-record-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.training-record-history-open { min-height: 32px; padding: 5px 10px; font-size: .72rem; }
.training-loop { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 24px 0 0; padding: 0; list-style: none; }
.training-loop::before { position: absolute; top: 26px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, rgba(240, 157, 112, .5), rgba(117, 185, 248, .36), rgba(137, 211, 177, .46), rgba(190, 164, 238, .5)); content: ""; pointer-events: none; }
.training-loop li { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 152px; padding: 12px 10px 13px; border: 1px solid rgba(117, 185, 248, .16); border-radius: 10px; background: linear-gradient(155deg, rgba(22, 35, 50, .9), rgba(10, 16, 24, .94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.training-loop li:nth-child(2) { border-color: rgba(117, 185, 248, .2); }
.training-loop li:nth-child(3) { border-color: rgba(137, 211, 177, .2); }
.training-loop li:nth-child(4) { border-color: rgba(240, 197, 121, .2); }
.training-loop li:nth-child(5) { border-color: rgba(190, 164, 238, .2); }
.training-loop li > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(240, 157, 112, .62); border-radius: 50%; color: #f0a074; background: #101923; font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.training-loop li:nth-child(2) > span { border-color: rgba(117, 185, 248, .64); color: #83c9ef; }
.training-loop li:nth-child(3) > span { border-color: rgba(137, 211, 177, .64); color: #9ad9bf; }
.training-loop li:nth-child(4) > span { border-color: rgba(240, 197, 121, .64); color: #f0c579; }
.training-loop li:nth-child(5) > span { border-color: rgba(190, 164, 238, .64); color: #bba4ee; }
.training-loop strong { display: block; margin-bottom: 4px; font-size: .78rem; letter-spacing: -.01em; }
.training-loop p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.48; }
.training-boundary { margin: 18px 0 0; padding: 12px 14px; border-left: 2px solid #f0a074; color: #b6c0cc; background: rgba(240, 157, 112, .05); font-size: .74rem; line-height: 1.52; }
.training-boundary strong { color: #f0a074; }
@media (max-width: 680px) {
  dialog#training-dialog { width: min(680px, calc(100vw - 20px)); }
  .training-loop { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .training-loop::before { display: none; }
  .training-loop li { grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: 0; gap: 10px; padding: 11px 12px; }
  .training-loop li > span { grid-row: span 2; }
  .training-loop p { font-size: .72rem; }
  .training-record-history-item { align-items: flex-start; flex-direction: column; }
}
.scope-release-list { display: grid; gap: 9px; max-height: 310px; overflow: auto; }
.scope-release-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto); gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #11121a; }
.scope-release-row strong, .scope-release-row small { display: block; }
.scope-release-row small { margin-top: 3px; color: var(--dim); }
.scope-release-row select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); background: #11121a; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.evidence-record { padding: 16px 0; border-top: 1px solid var(--line); }
.evidence-record:first-child { border-top: 0; }
.evidence-record a { display: block; margin: 8px 0; color: var(--cyan); overflow-wrap: anywhere; }
.evidence-record dl { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 6px 12px; margin: 12px 0 0; font-size: .76rem; }
.evidence-record dt { color: var(--dim); }
.evidence-record dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.toast-region { position: fixed; z-index: 80; right: 22px; bottom: 22px; display: grid; gap: 8px; width: min(390px, calc(100vw - 44px)); }
.toast { padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--acid); border-radius: 10px; background: #1b1c27; box-shadow: var(--shadow); font-size: .84rem; }
.toast.error { border-left-color: var(--danger); }
.noscript { position: fixed; inset: auto 20px 20px; z-index: 90; padding: 12px; background: #321b17; color: #ffd8d1; }

@keyframes orbitDrift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.9; }
  50% { transform: translate3d(-12px, -10px, 0) rotate(-7deg); opacity: 1; }
  100% { transform: translate3d(10px, 8px, 0) rotate(6deg); opacity: 0.92; }
}

@keyframes heroRuleShift {
  0% { transform: translateY(0px); opacity: 0.74; }
  100% { transform: translateY(-12px); opacity: 0.96; }
}

@keyframes heroAmbientDrift {
  0% { opacity: .54; transform: translate3d(-10px, 8px, 0) rotate(-9deg) scale(.98); }
  50% { opacity: .78; }
  100% { opacity: .64; transform: translate3d(14px, -11px, 0) rotate(-5deg) scale(1.02); }
}

@keyframes heroSignalSweep {
  0%, 14% { opacity: 0; transform: rotate(28deg) translate3d(-190px, 0, 0); }
  28% { opacity: .46; }
  62% { opacity: .18; transform: rotate(28deg) translate3d(360px, 0, 0); }
  78%, 100% { opacity: 0; transform: rotate(28deg) translate3d(480px, 0, 0); }
}
@keyframes evidenceTraceAdvance {
  0%, 12% { left: 0%; opacity: 0; }
  20% { opacity: .95; }
  68% { left: 91%; opacity: .72; }
  82%, 100% { left: 100%; opacity: 0; }
}

@keyframes heroShieldDrift {
  0% { transform: rotate(10deg) translate3d(-4px, 3px, 0) scale(.98); opacity: .58; }
  100% { transform: rotate(13deg) translate3d(8px, -7px, 0) scale(1.02); opacity: .86; }
}

@keyframes heroSecurityOrbit {
  from { transform: rotate(-22deg) translate3d(0, 0, 0); }
  to { transform: rotate(338deg) translate3d(0, 0, 0); }
}

@keyframes workspaceEvidenceSweep {
  0%, 16% { left: -22%; opacity: .08; }
  42% { opacity: .72; }
  78%, 100% { left: 82%; opacity: .06; }
}

@keyframes workspaceFieldDrift {
  0% { background-position: 0 0, 100% 0, 0 0; transform: translate3d(-1%, 0, 0); opacity: .48; }
  50% { background-position: 0 4px, 72% 8%, 44% 0; opacity: .76; }
  100% { background-position: 0 12px, 0 0, 100% 0; transform: translate3d(1%, -1%, 0); opacity: .58; }
}

@keyframes signalTrace {
  0%, 100% { background-position: 0 0; opacity: .72; }
  50% { background-position: 100% 0; opacity: 1; }
}

@keyframes workspacePreviewScan {
  0%, 14% { top: -18%; opacity: 0; }
  30% { opacity: .65; }
  72% { top: 118%; opacity: .22; }
  86%, 100% { top: 118%; opacity: 0; }
}

@keyframes previewShimmer {
  0%, 100% { background-position: 100% 0; opacity: .56; }
  50% { background-position: 0 0; opacity: .95; }
}

@keyframes previewCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes workspaceEnter {
  from { opacity: .72; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes productScan {
  0%, 100% { opacity: 0; transform: translateY(0); }
  18%, 76% { opacity: .72; }
  88% { opacity: 0; transform: translateY(330px); }
}

@keyframes shotRowPulse {
  0%, 100% { background-color: transparent; }
  18%, 34% { background-color: rgba(117, 185, 248, .07); }
}

@keyframes evidenceBasisPulse {
  0%, 100% { opacity: .62; transform: scaleX(1); transform-origin: left center; }
  24%, 44% { opacity: 1; transform: scaleX(1.015); }
}

@keyframes serviceOrbit {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 2px -2px, -3px 2px, 3px 1px, 1px -3px, -2px 3px, 4px 0, -3px 1px, 2px -1px, -2px 2px, 12px 0, 0 11px; }
}

@keyframes setupBoundaryDrift {
  0% { background-position: 8% 50%, 50% 50%, 92% 50%, 0 0; opacity: .56; }
  100% { background-position: 12% 50%, 48% 50%, 88% 50%, 0 0; opacity: .86; }
}

@keyframes contextNodePulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
  45% { box-shadow: 0 10px 24px rgba(0, 0, 0, .16), 0 0 0 4px rgba(117, 185, 248, .06), 0 0 22px rgba(117, 185, 248, .12); }
}

@keyframes contextActiveHalo {
  0% { opacity: .42; transform: scale(.72); }
  70%, 100% { opacity: 0; transform: scale(1.65); }
}

@keyframes contextTrace {
  0%, 100% { background-position: 100% 0; opacity: .56; }
  45%, 70% { background-position: 0 0; opacity: 1; }
}

@keyframes contextOrbit {
  0% { transform: rotate(-18deg) scale(.96) translate3d(0, 0, 0); opacity: .72; }
  100% { transform: rotate(-11deg) scale(1.02) translate3d(-8px, 7px, 0); opacity: 1; }
}

@media (max-width: 980px) {
  /* superseded responsive contract: .product-gallery-grid { display: block !important; grid-template-columns: 1fr !important; }
     grid-column: 1;
    grid-row: auto; */
  .public-nav { display: none; }
  .chapter-rail { display: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .landing-depth { opacity: .68; }
  .landing-depth::before, .landing-depth::after { opacity: .62; }
  .landing-journey { top: 18px; right: 19px; width: min(360px, calc(100% - 38px)); }
  .hero-copy, .signal-panel { grid-column: 1; grid-row: auto; }
  .signal-panel { max-width: 680px; }
  .platform-story, .product-gallery-heading, .context-atlas, .trust-story, .customer-fit-intro, .operating-scale-intro, .early-access-panel { grid-template-columns: 1fr; }
  .services-panel { grid-template-columns: 1fr; }
  .services-loop { max-width: none; margin-top: 34px; }
  .services-grid { grid-template-columns: 1fr; border-left: 0; }
  .services-grid article:nth-child(even),
  .services-grid article:nth-last-child(-n+2) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .services-grid article:nth-last-child(1) { border-bottom: 0; }
  .customer-fit-grid { grid-template-columns: 1fr; }
  .operating-scale-grid { grid-template-columns: 1fr; }
  .operating-scale-grid::before { top: 28px; right: auto; bottom: 28px; left: 34px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(117, 185, 248, .18), rgba(240, 157, 112, .52), rgba(137, 211, 177, .24)); }
  .scale-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .scale-card:last-child { border-bottom: 0; }
  .trust-story-grid { grid-template-columns: 1fr; }
  .trust-story-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-story-grid article:last-child { border-bottom: 0; }
  .first-run-grid { grid-template-columns: 1fr; }
  .first-run-grid::before { top: 38px; right: auto; bottom: 38px; left: 31px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(240, 157, 112, .54), rgba(117, 185, 248, .24)); }
  .first-run-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .first-run-grid article:last-child { border-bottom: 0; }
  .workspace-shell { grid-template-columns: 1fr; }
  .workspace-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-lifecycle { margin-top: 22px; }
  .workspace-lifecycle ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .workspace-lifecycle ol::before { top: 20px; right: 10%; bottom: auto; left: 10%; width: auto; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .12), rgba(240, 157, 112, .42) 38%, rgba(137, 211, 177, .26) 72%, rgba(190, 164, 238, .12)); }
  .workspace-lifecycle li { flex-direction: column; gap: 4px; justify-content: center; min-height: 47px; font-size: .6rem; text-align: center; }
  .nav-tabs { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .nav-assurance { display: none; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .operating-policy-summary, .operating-policy-form, .ai-data-use-summary, .ai-data-use-form { grid-template-columns: 1fr 1fr; }
  .operating-policy-context { grid-template-columns: 1fr 1fr; }
  .onboarding-source-metadata { grid-template-columns: 1fr 1fr; }
  .response-path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .response-path-step:nth-child(3)::after { display: none; }
  .response-basis-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 681px) and (max-width: 820px) {
  .landing-journey { display: none; }
}

/* v3.0 mobile brand legibility (CalVer 2028.08.403): final mobile cascade
   owner for the supplied REMEDiS mark; presentation only. */
@media (max-width: 680px) {
  body:not(.platform-mode) .brand img { width: 32px; height: 32px; }
}

@media (min-width: 821px) and (max-width: 980px) {
  .view { padding-right: 36px; padding-left: 36px; }
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 22px; min-height: 640px; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: center; }
  /* v3.0 tablet first-frame clearance: keep the primary action inside the
     opening viewport without changing the headline, workspace width, or
     mobile/wide-desktop rhythm. This is spacing only; no state is implied. */
  .hero-copy .eyebrow { margin-bottom: 16px; }
  .hero-copy .hero-support { margin-top: 12px; }
  .hero-copy h1 { max-width: 390px; font-size: clamp(2.45rem, 4.8vw, 3.2rem); }
  .hero-copy .hero-lede, .hero-copy .hero-support { max-width: 390px; }
  .signal-panel { grid-column: 2; grid-row: 1; align-self: end; width: 100%; margin-top: 40px; }
  .landing-journey { top: 18px; right: 0; width: min(300px, 68%); }
  .signal-intro { padding: 24px 24px 20px; }
  .signal-intro h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); }
  .workspace-preview { margin-right: 24px; margin-left: 24px; }
  .proof-line { padding: 16px 24px 18px; }
  .trust-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-story-grid article { min-height: 224px; padding: 25px 17px 22px; border-right: 1px solid var(--line); border-bottom: 0; }
  .trust-story-grid article:last-child { border-right: 0; }
  .trust-story-index { margin-bottom: 26px; }
  .trust-story-grid h3 { font-size: .96rem; }
  .trust-story-grid p { font-size: .76rem; }
  .customer-fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-fit-grid article { min-height: 190px; padding: 24px 17px 21px; }
  .customer-fit-grid article p { max-width: 220px; font-size: .76rem; }
  .fit-index { margin-bottom: 21px; }
  .role-surfaces { gap: 5px; }
  .role-surfaces li { padding: 4px 6px; font-size: .48rem; }
  .operating-scale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operating-scale-grid::before { top: 50%; right: 8%; bottom: auto; left: 8%; width: auto; height: 1px; background: linear-gradient(90deg, rgba(117, 185, 248, .2), rgba(240, 157, 112, .58), rgba(137, 211, 177, .3)); }
  .scale-card { min-height: 224px; padding: 24px 17px 22px; border-right: 1px solid var(--line); border-bottom: 0; }
  .scale-card:last-child { border-right: 0; }
  .scale-card-top { margin-bottom: 24px; }
  .scale-card h3 { max-width: 220px; font-size: .98rem; }
  .scale-card p { max-width: 220px; font-size: .75rem; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid article:nth-child(even) { border-right: 0; }
  .services-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .services-grid article { min-height: 150px; padding: 25px 17px 22px 52px; }
  .services-grid h3 { font-size: .98rem; }
  .services-grid p { font-size: .76rem; }
  .services-intro::after { width: 100%; height: 142px; }
}

@media (min-width: 681px) and (max-width: 820px) {
  .hero-copy h1, .hero-copy .hero-lede, .hero-copy .hero-support { max-width: 320px; }
  .signal-intro { padding: 20px 18px 16px; }
  .signal-intro h2 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
  .workspace-preview { margin-right: 16px; margin-left: 16px; }
}

@media (max-width: 680px) {
  #landing-view { overflow-x: clip; }
  /* Fixed chapter return control occupies the first mobile reading band.
     Give the report route its own breathing room so the verified-channel
     eyebrow never sits beneath that control. */
  #report-view:not(.hidden) .report-shell { padding-top: 18px; }
  /* The phone hero is a handoff into the workspace, not a second empty
     section. Keep the product surface close enough to enter the first touch
     frame while preserving the full preview below it. */
  .hero-grid { row-gap: 18px; }
  .signal-panel { margin-top: 12px; }
  .chapter-back { top: calc(88px + env(safe-area-inset-top)); left: 12px; min-height: 44px; padding: 4px 9px 4px 7px; font-size: .53rem; }
  /* Keep the compact release affordance visible without laying it over the
     response workspace that occupies the phone's lower hero viewport. */
  body:not(.deep-scroll):not(.setup-in-view) .release-badge { top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #landing-view { padding-bottom: 154px; }
  /* The desktop hero reserves a tall composition for the workspace card. On
     phones the card follows the shortened copy, so retaining that minimum
     would create an empty dead zone before the product appears. */
  .hero-grid { min-height: 0; }
  body.setup-in-view .release-badge { top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.deep-scroll:not(.setup-in-view) .release-badge { top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* v3.0 mobile deep-reading clearance (2028.01.16): the release affordance
     remains bottom-right on the overview, but moves into the quiet header band
     once a visitor is reading a focused chapter or lower surface. This keeps
     the compact control from covering card titles and touch targets. */
  body.landing-compact:not(.platform-mode).landing-detail-open .release-badge,
  body.landing-compact:not(.platform-mode).deep-scroll .release-badge,
  body.landing-compact:not(.platform-mode).setup-in-view .release-badge {
    top: calc(92px + env(safe-area-inset-top));
    right: 10px;
    bottom: auto;
  }
  .landing-depth { opacity: .56; }
  .landing-depth::before, .landing-depth::after { opacity: .45; }
  /* The signal field is atmospheric on phones. Its labels are useful on the
     wide composition, but can cross the hero controls at narrow widths. Keep
     the nodes and motion as visual texture while removing that collision. */
  .hero-context-field { opacity: .68; }
  .hero-context-node::after { display: none; }
  .site-header { position: sticky; padding: 18px 12px; }
  /* v3.0 phone safe-area handoff (2027.12.03): keep the sticky brand and
     account controls below a device notch without changing desktop rhythm.
     `max()` preserves the existing 18px breathing room when no inset exists. */
  body.landing-compact:not(.platform-mode) .site-header {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: 18px;
  }
  .brand { gap: 8px; padding:9px 0; font-size: .78rem; letter-spacing: .085em; }
  .brand img { width: 26px; height: 26px; }
  .brand-wordmark small { display: grid; }
  .trust-status { display: none; }
  .header-actions { gap: 7px; }
  /* Keep the compact header visually quiet while preserving a 44px touch
     target for both account paths. The hit area grows; the label does not. */
  .header-actions .button { min-height: 44px; padding: 0 10px; font-size: .78rem; touch-action: manipulation; }
  .header-actions #setup-button, .header-actions #login-button { font-size: 0; white-space: nowrap; }
  .header-actions #setup-button { min-width: 90px; }
  .header-actions #login-button { min-width: 62px; }
  .header-actions #setup-button::before { content: "Create account"; font-size: .68rem; }
  /* Use the action name visitors need, not a state description. The full
     accessible label remains on the button; this compact visual label keeps
     account creation and sign-in immediately distinguishable on phones. */
  .header-actions #login-button::before { content: "Sign in"; font-size: .68rem; }
  .header-actions #login-button > span { display: none; }
  /* Keep workspace context available while long response panels move beneath
     it. The translucent surface is intentionally narrow-screen only: desktop
     retains the full-height rail and tablet retains the compact header flow. */
  .workspace-nav {
    position: sticky;
    top: 0;
    z-index: 7;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, rgba(10, 14, 20, .96), rgba(10, 14, 20, .88));
    border-bottom-color: rgba(117, 185, 248, .2);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px) saturate(1.08);
  }
  body.platform-mode .workspace-nav {
    background: linear-gradient(180deg, rgba(14, 20, 31, .97), rgba(14, 20, 31, .9));
  }
  .workspace-lifecycle { margin-top: 14px; padding: 9px 10px 8px; }
  .workspace-lifecycle > p { margin-bottom: 8px; }
  .workspace-lifecycle ol { gap: 3px; }
  .workspace-lifecycle li { min-height: 38px; }
  .workspace-lifecycle small { margin-top: 7px; }
  .workspace-priority { margin-top: 11px; padding: 8px 7px 7px; }
  .workspace-priority > p { margin-bottom: 5px; }
  .workspace-priority-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .workspace-priority-link { grid-template-columns: 5px minmax(0, 1fr) auto; min-height: 44px; padding: 5px 4px; font-size: .54rem; }
  .workspace-priority-link b { min-width: 18px; padding: 2px 4px; }
  .nav-tabs { position: relative; display: flex; gap: 7px; margin: 14px -18px 0; padding: 0 18px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .nav-tabs.has-overflow:not(.at-end)::after { position: absolute; z-index: 2; top: 0; right: 18px; bottom: 6px; display: grid; place-items: center; width: 32px; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(10, 14, 20, 0), rgba(10, 14, 20, .96) 58%); color: rgba(229, 238, 247, .82); content: "›"; font-size: 1.2rem; line-height: 1; pointer-events: none; }
  body.platform-mode .nav-tabs.has-overflow:not(.at-end)::after { background: linear-gradient(90deg, rgba(14, 20, 31, 0), rgba(14, 20, 31, .96) 58%); }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { flex: 0 0 auto; width: auto; min-width: 148px; min-height: 44px; scroll-snap-align: start; touch-action: manipulation; }
  .nav-tab::before { top: auto; right: 10px; bottom: -1px; left: 10px; width: auto; height: 2px; transform: scaleX(.35); }
  .nav-tab.active::before { transform: scaleX(1); }
  .view { padding: 34px 19px 80px; }
  .preview-evidence-horizon { grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
  .preview-evidence-horizon-meta { grid-column: 2; text-align: left; }
  .preview-evidence-horizon-copy strong, .preview-evidence-horizon-copy span { white-space: normal; }
  .preview-source-identity { grid-template-columns: auto minmax(0, 1fr); }
  .preview-source-identity-state { grid-column: 2; justify-self: start; }
  .preview-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .preview-overview-item { min-height: 82px; padding: 11px 10px 10px; }
  .preview-overview-value { font-size: 1rem; }
  .preview-overview-review .preview-overview-value { font-size: .82rem; }
  .preview-overview-detail { font-size: .56rem; }
  .hero-copy h1 { margin-bottom: 20px; font-size: clamp(2.55rem, 11vw, 3.6rem); line-height: .92; }
  .route-switch-button { min-height: 44px; }
  /* Let the promise lead on a phone. The scroll-linked journey is a proof
     device, so it follows the headline and actions instead of displacing them. */
  .hero-copy { grid-row: 1; min-width: 0; }
  /* v3.0 phone intrinsic-width guard (2028.08.58): long display words must
     wrap within the grid track instead of allowing the heading's preferred
     width to widen the hero beyond the viewport. Presentation-only; no copy,
     state, or interaction semantics change. */
  .hero-grid > *, .hero-copy h1 { min-width: 0; max-width: 100%; }
  .hero-copy h1 { overflow-wrap: anywhere; }
  /* The chapter rail is already represented by the compact gallery sequence
     below; repeating it inside the hero makes the first touch path feel long. */
  .landing-journey { display: none; }
  .signal-panel { grid-row: 2; min-width: 0; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-proofline { gap: 7px 12px; margin-top: 11px; font-size: .49rem; }
  .hero-metrics { display: flex; gap: 9px; margin: 24px -19px 0 0; padding-right: 19px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hero-metrics::after { position: sticky; right: 0; flex: 0 0 24px; align-self: stretch; width: 24px; min-height: 52px; margin-left: -24px; background: linear-gradient(90deg, rgba(12, 14, 19, 0), rgba(12, 14, 19, .96)); content: ""; pointer-events: none; }
  .hero-metrics::-webkit-scrollbar { display: none; }
  .hero-metric { flex: 0 0 min(238px, calc(100vw - 64px)); scroll-snap-align: start; padding: 11px 12px 12px; }
  .hero-metric strong { font-size: .92rem; }
  /* Keep first-run actions touchable on phones. */
  .first-run-grid .button { padding: 0 13px; font-size: .7rem; touch-action: manipulation; }
  /* The first mobile frame prioritizes the workspace preview. */
  .hero-copy .hero-support,
  .hero-copy .hero-metrics { display: none; }
  .signal-panel { margin-top: 6px; }
  .platform-story { margin-top: 24px; padding-top: 32px; }
  body.landing-compact.landing-detail-open #landing-view > .is-detail-open { scroll-margin-top: 130px; }
  .platform-story-intro::after { height: 142px; margin-top: 30px; }
  .product-gallery { margin-top: 34px; padding-top: 30px; }
  .product-gallery::after { top: 108px; right: -18%; left: -18%; opacity: .56; }
  .gallery-sequence { position: sticky; z-index: 4; top: calc(122px + env(safe-area-inset-top)); gap: 8px 9px; margin: 22px 0 0; padding-right: 56px; overflow-x: auto; flex-wrap: nowrap; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 14px 56px; scroll-snap-type: x proximity; }
  .gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Keep the swipe cue inside the rail without intercepting input. */
  .gallery-sequence::after { position: absolute; z-index: 5; top: 0; right: 0; display: grid; width: 52px; height: 100%; place-items: center; border-left: 1px solid rgba(125, 211, 252, .12); color: rgba(194, 232, 249, .96); background: linear-gradient(90deg, rgba(12, 14, 19, 0), rgba(12, 14, 19, .96) 58%); content: ""; font: 700 .43rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; opacity: 0; pointer-events: none; text-shadow: 0 0 12px rgba(125, 211, 252, .46); transition: opacity .2s ease; }
  .gallery-sequence.has-overflow::after { content: "SWIPE  ›"; opacity: 1; }
  .gallery-sequence.has-overflow.at-end::after { opacity: 0; }
  .gallery-sequence::-webkit-scrollbar { display: none; }
  .gallery-sequence a { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; touch-action: manipulation; }
  .gallery-status { margin-left: 4px; flex: 0 0 auto; }
  .gallery-progress { flex-basis: 64px; }
  .product-gallery-grid { margin-top: 28px; }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .product-gallery[data-gallery-active="case-room"] [data-gallery-shot="case-room"],
  .product-gallery[data-gallery-active="product-context"] [data-gallery-shot="product-context"] { order: -1; }
  .product-gallery-heading { row-gap: 18px; }
  .product-gallery-heading > p { margin-top: 0; }
  .product-shot-wide .shot-window, .shot-window { min-height: 0; }
  .shot-layout { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 15px 13px 16px; }
  .shot-metrics { gap: 5px; }
  .shot-metrics span { padding: 8px 7px; }
  .shot-metrics small { font-size: .44rem; }
  .shot-table span { font-size: .58rem; }
  .shot-graph { min-height: 190px; }
  .context-atlas { margin-top: 58px; padding-top: 40px; }
  .context-atlas::before { display: none; }
  .context-atlas::after { display: none; }
  .context-atlas-grid::before { display: none; }
  .context-atlas-grid::after { display: block; top: 12px; bottom: 12px; left: 5px; width: 1px; background: linear-gradient(180deg, rgba(240, 157, 112, .56), rgba(117, 185, 248, .34) 48%, rgba(137, 211, 177, .46)); opacity: .72; }
  .context-atlas-grid { grid-template-columns: 1fr; margin-top: 12px; padding-left: 14px; }
  .context-node { min-height: 0; }
  .platform-story-grid article { padding-left: 56px; }
  .response-map { margin-top: 30px; padding: 13px 12px 11px; }
  .response-map-track { margin-top: 24px; margin-bottom: 21px; }
  .response-map-track button strong { font-size: .61rem; }
  .response-map-track button small { font-size: .52rem; }
  .response-map-foot { font-size: .56rem; }
  .customer-fit { margin-top: 40px; padding-top: 32px; }
  .customer-fit-grid article { min-height: 164px; padding: 25px 22px 24px; }
  .fit-index { margin-bottom: 18px; }
  .operating-scale { margin-top: 58px; padding-top: 40px; }
  .operating-scale-grid { margin-top: 32px; }
  .scale-card { min-height: 0; padding: 25px 20px 24px; }
  .scale-card-top { margin-bottom: 24px; }
  .trust-story { margin-top: 58px; padding-top: 40px; }
  .trust-story-grid { margin-top: 32px; position: relative; }
  .trust-story-grid::before { position: absolute; top: 25px; bottom: 25px; left: 6px; width: 1px; background: linear-gradient(180deg, rgba(117, 185, 248, .62), rgba(240, 157, 112, .56) 50%, rgba(137, 211, 177, .62)); content: ""; opacity: .74; pointer-events: none; }
  .trust-story-grid article { position: relative; padding: 25px 20px 24px; }
  .trust-story-grid article::after { position: absolute; top: 31px; left: 2px; width: 8px; height: 8px; border: 1px solid rgba(117, 185, 248, .74); border-radius: 50%; background: #0f1722; box-shadow: 0 0 0 4px rgba(117, 185, 248, .07); content: ""; pointer-events: none; }
  .trust-story-grid article:nth-child(2)::after { border-color: rgba(240, 157, 112, .78); box-shadow: 0 0 0 4px rgba(240, 157, 112, .07); }
  .trust-story-grid article:nth-child(3)::after { border-color: rgba(137, 211, 177, .78); box-shadow: 0 0 0 4px rgba(137, 211, 177, .07); }
  .early-access-panel { padding: 32px 22px 22px; }
  .setup-form-shell { padding: 16px; }
  .setup-handoff { grid-template-columns: auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto; gap: 5px; font-size: .42rem; letter-spacing: .055em; }
  .workspace-entry-options { padding: 20px; }
  .workspace-entry-options-grid { grid-template-columns: 1fr; }
  .workspace-entry-option { min-height: 0; }
  .workspace-entry-option p { min-height: 0; }
  .setup-inspection ul { grid-template-columns: 1fr; }
  .setup-form-heading { display: grid; gap: 5px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 42px; padding-bottom: 5px; }
  .site-footer a { padding:14px 0; }
  .setup-route { grid-template-columns: 1fr; gap: 10px; }
  .setup-route li, .setup-route li.is-current { min-height: 37px; padding: 0 0 0 42px; }
  .setup-route li:not(:last-child)::after, .setup-route li.is-current::after { top: 25px; right: auto; bottom: -9px; left: 29px; width: 1px; height: auto; }
  .setup-route li.is-current::before, .setup-route li.is-complete::before { top: 5px; left: 25px; }
  .first-run-guide { padding: 20px; }
  /* v3.0 mobile first-run spine (CalVer 2028.08.146): when the setup cards
     stack, the authored sequence follows them vertically rather than leaving
     a misleading desktop rail across the card. */
  body.platform-mode .first-run-grid { grid-template-columns: 1fr; padding-left: 21px; }
  body.platform-mode .first-run-grid::before { top: 29px; right: auto; bottom: 29px; left: 10px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(125, 211, 252, .55), rgba(120, 225, 209, .3)); }
  body.platform-mode .first-run-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(125, 211, 252, .12); padding-left: 15px; }
  body.platform-mode .first-run-grid article:last-child { border-bottom: 0; }
  .training-loop { grid-template-columns: 1fr; gap: 7px; }
  .training-loop::before { top: 14px; right: auto; bottom: 14px; left: 13px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(240, 157, 112, .5), rgba(117, 185, 248, .36), rgba(137, 211, 177, .46), rgba(190, 164, 238, .5)); }
  .training-loop li { grid-template-columns: 28px minmax(0, 1fr); align-items: start; min-height: 0; padding: 11px 12px; }
  .input-combo { display: grid; }
  .input-combo input { min-height: 48px; }
  .source-input-grid { grid-template-columns: 1fr; }
  .section-heading, .workspace-heading { display: block; }
  /* v3.0 mobile preview heading rhythm (CalVer 2028.08.148): keep the
     result state visually attached to its heading after the shared section
     heading collapses. This changes only layout; status semantics remain
     supplied by the preview lifecycle. */
  #public-preview .preview-heading-actions { justify-content: flex-start; margin-top: 12px; }
  #public-preview .preview-heading-actions #preview-status { width: fit-content; max-width: 100%; text-align: left; }
  .workspace-heading-actions { justify-content: flex-start; margin-top: 18px; }
  .workspace-heading > .button { margin-bottom: 26px; }
  .workspace-content { padding: 40px 18px 70px; }
  .workspace-content::before { opacity: .62; background-size: 54px 54px; }
  .workspace-content::after { right: 18px; left: 18px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .workspace-focus-brief { grid-template-columns: 1fr; gap: 17px; margin-bottom: 22px; padding: 20px; }
  .workspace-focus-main .button { width: 100%; }
  .workspace-focus-facts { border-top: 1px solid rgba(117, 185, 248, .15); border-left: 0; }
  .workspace-focus-facts div { grid-template-columns: 96px minmax(0, 1fr); padding: 9px 0; }
  /* First-run actions are the operator's first real touch path. Stack them
     into one calm rail on phones so each choice has a full target and a clear
     reading order; this changes no operation or authority. */
  .workspace-focus-action-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .workspace-focus-action { justify-content: space-between; min-height: 44px; padding: 0 13px; }
  .continuity-steps { grid-template-columns: 1fr; gap: 5px; }
  .continuity-steps::before { top: 14px; right: auto; bottom: 14px; left: 16px; width: 1px; height: auto; }
  .continuity-step { grid-template-columns: auto minmax(0, 1fr); padding: 7px 8px; }
  .proposal-card { grid-template-columns: 1fr; }
  .proposal-actions { justify-content: flex-start; }
  /* Text size and localization can turn a short proof cue into a sentence.
     Let the two claims form a calm vertical rhythm instead of clipping a
     nowrap label at zoom or on a narrow device. */
  .proof-line { display: grid; min-width: 0; }
  .proof-line > * { min-width: 0; overflow-wrap: anywhere; }
  .proof-line strong { white-space: normal; }
  .preview-next { align-items: flex-start; flex-direction: column; }
  .preview-next-action { width: 100%; flex: 1 1 auto; }
  .preview-evidence-horizon { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .preview-evidence-horizon-meta { grid-column: 2; text-align: left; }
  .preview-signal-map { margin-right: -1px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .preview-signal-map::-webkit-scrollbar { display: none; }
  .preview-signal-map-segment { flex: 0 0 min(142px, 42vw); scroll-snap-align: start; }
  .preview-loading-steps { grid-template-columns: 1fr; }
  .preview-loading-step, .preview-loading-step + .preview-loading-step { padding: 10px 0; border-left: 0; border-bottom: 1px solid rgba(132, 177, 218, .1); }
  .preview-loading-step:last-child { border-bottom: 0; }
  .preview-loading-step.is-current::after { right: auto; bottom: 0; left: 0; width: 88px; height: 1px; }
  .preview-filter-status { flex-basis: 100%; margin-left: 0; }
  .signal-header { gap: 12px; padding: 18px 20px 15px; flex-wrap: wrap; }
  .signal-header > span:last-child { display: none; }
  .signal-intro { padding: 25px 20px 20px; }
  .response-path-heading { display: grid; gap: 5px; }
  .response-path-boundary { text-align: left; }
  .response-path-list { grid-template-columns: 1fr; gap: 6px; }
  .response-path-step { min-height: 0; grid-template-columns: auto 1fr; align-items: center; }
  .response-path-step:not(:last-child)::after { top: auto; right: auto; bottom: -7px; left: 20px; width: 1px; height: 8px; }
  .response-path-step:nth-child(3)::after { display: block; }
  .response-path-step small { grid-column: 2; }
  .response-basis-heading { display: grid; gap: 6px; }
  .response-basis-boundary { max-width: none; text-align: left; }
  .response-basis-grid { grid-template-columns: 1fr; }
  .workspace-preview { margin: 0 20px 3px; }
  .workspace-lineage { margin: 0 20px 14px; padding: 11px 12px 10px; }
  /* Keep each evidence-lineage control large enough for touch without
     changing the compact visual track or its presentation-only state. */
  .workspace-lineage-node { gap: 6px; min-height: 44px; padding: 4px 0; touch-action: manipulation; }
  /* The selected stage is a control, not just a dot on the track. A quiet
     full-width wash makes the current handoff legible at a glance while
     preserving the compact rail and its presentation-only semantics. */
  .workspace-lineage-node[aria-pressed="true"] {
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(125, 211, 252, .1), rgba(139, 231, 209, .04));
    box-shadow: inset 0 1px 0 rgba(225, 250, 255, .06);
  }
  .workspace-lineage-node:hover,
  .workspace-lineage-node:focus-visible {
    border-radius: 8px;
    background: rgba(125, 211, 252, .07);
  }
  .workspace-lineage-node b { font-size: .48rem; letter-spacing: .045em; }
  .workspace-preview-main { grid-template-columns: 1fr; }
  .workspace-decision { padding: 16px 15px 17px; border-right: 0; border-bottom: 1px solid rgba(179, 215, 232, .1); }
  .workspace-decision strong { margin-top: 7px; font-size: .98rem; }
  .workspace-decision p { margin: 7px 0 10px; }
  .workspace-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-psirtling { margin-right: 20px; margin-left: 20px; }
  .workspace-attention { margin-right: 20px; margin-left: 20px; padding: 9px 10px; }
  .workspace-attention-lanes { gap: 4px; }
  .workspace-attention-lane { column-gap: 4px; padding: 6px 4px; }
  .workspace-attention-lane b { font-size: .48rem; }
  .workspace-attention-lane small { font-size: .43rem; }
  .workspace-context div { padding: 10px 8px; }
  .workspace-context div:last-child { border-bottom: 0; }
  .workspace-context div:nth-child(2) { border-left: 1px solid rgba(179, 215, 232, .1); }
  .workspace-context strong { font-size: .65rem; line-height: 1.25; }
  .response-stage { min-height: 76px; padding: 12px 9px 11px; }
  .response-stage span { margin-bottom: 8px; }
  .response-stage strong { font-size: .72rem; }
  .response-stage small { font-size: .58rem; }
  .response-stages { grid-template-columns: repeat(4, minmax(104px, 1fr)); overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(117, 185, 248, .34) transparent; }
  .proof-line { padding: 17px 20px 19px; }
  .form-grid, .program-form, .dialog-grid, .deadline-policy-form, .operating-policy-summary, .operating-policy-form, .ai-data-use-summary, .ai-data-use-form, .selected-source-policy-form { grid-template-columns: 1fr; }
  .form-grid .span-two, .program-form label:nth-child(2), .program-form label:nth-child(4), .program-actions, .dialog-grid .span-two { grid-column: auto; }
  .operating-policy-card, .onboarding-path-card, .selected-source-policy-card { padding: 21px; }
  .onboarding-brief-card { padding: 21px; }
  .onboarding-path-step { grid-template-columns: 29px minmax(0, 1fr); align-items: start; }
  .onboarding-path-state, .onboarding-path-action { grid-column: 2; justify-self: start; text-align: left; }
  .onboarding-source-header { display: grid; }
  .onboarding-source-inspect { justify-self: start; }
  .onboarding-source-metadata { grid-template-columns: 1fr; }
  .operating-policy-context { grid-template-columns: 1fr; }
  .operating-policy-actions { display: grid; }
  .ai-data-use-card { padding: 21px; }
  .ai-data-use-actions { display: grid; }
  .selected-source-policy-actions { display: grid; }
  .report-submit-row, .intake-card-header, .case-card-header, .join-panel, .team-row { display: grid; }
  .case-actions-top { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .case-actions-top::before { grid-column: 1 / -1; }
  .case-actions-top .button { width: 100%; }
  .attention-item { grid-template-columns: auto minmax(0, 1fr); }
  .attention-open-case, .attention-open-destination { grid-column: 2; grid-row: auto; justify-self: start; }
  .case-overview, .case-fact-grid { grid-template-columns: 1fr; }
  .invitation-link { grid-template-columns: 1fr; }
  .deadline-policy-reason, .deadline-policy-actions { grid-column: auto; }
  .deadline-row { grid-template-columns: 1fr; }
  .scope-release-row { grid-template-columns: auto minmax(0, 1fr); }
  .scope-release-row select { grid-column: 2; }
}

/* v3.0 mobile screenshot-first handoff (2028.03.02): the gallery is the
 visitor's first concrete product proof. Keep the authored heading and
   one-sentence context, but compress their reading rhythm so the Response Desk
   surface arrives in the first visual sequence. No copy is removed, and the
   sequence remains keyboard and screen-reader reachable. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .product-gallery-heading {
    row-gap: 10px;
  }
  body.landing-compact:not(.platform-mode) .product-gallery-heading h2 {
    max-width: 330px;
    font-size: clamp(2.2rem, 9.8vw, 3rem);
    line-height: .93;
  }
  body.landing-compact:not(.platform-mode) .product-gallery-heading > p {
    max-width: 34ch;
    font-size: .82rem;
    line-height: 1.42;
  }
  body.landing-compact .product-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
  }
  /* v3.0 mobile one-foreground gallery (2028.08.217): show the selected
     product surface as the visual proof, and defer the other two behind the
     existing keyboard/touch surface rail. This preserves every authored
     screenshot while preventing three full cards from becoming a scroll wall
     on phones. The script toggles .is-spotlight; no authority or data state is
     coupled to this presentation choice. */
  body.landing-compact .product-gallery.has-spotlight .product-shot:not(.is-spotlight) {
    display: none;
  }
  body.landing-compact .product-gallery.has-spotlight .product-shot.is-spotlight {
    display: block;
  }
}

@media (max-width: 360px) {
  body:not(.platform-mode) .brand-wordmark { display: grid; }
  body:not(.platform-mode) .brand-wordmark small { display: none; }
  body:not(.platform-mode) .brand { gap: 5px; margin-right: 8px; }
  body:not(.platform-mode) .header-actions { gap: 5px; }
  body:not(.platform-mode) .header-actions #setup-button { min-width: 82px; padding-right: 7px; padding-left: 7px; }
  body:not(.platform-mode) .header-actions #login-button { min-width: 58px; max-width: 64px; padding-right: 8px; padding-left: 8px; }
  body:not(.platform-mode) .header-actions #login-button::before { content: "Sign in"; font-size: .68rem; }
  body.landing-compact:not(.platform-mode) #early-access .setup-route li small { display: none; }
}

/* Keep the compact release surface readable on phones: the close affordance
   belongs to the header, while feedback must not cover the final update. */
@media (max-width: 680px) {
  /* Decision controls are consequential actions. Give each one a full-width
     touch target on phones instead of compressing two labels into one row. */
  body.platform-mode .intake-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  body.platform-mode .intake-actions .button { width: 100%; }
  .release-notes .section-heading { position: relative; display: block; padding-right: 46px; }
  .release-notes .section-heading .icon-button { position: absolute; top: -5px; right: -5px; }
  .release-notes .dialog-actions { position: static; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(132, 177, 218, .16); background: none; }
}

/* v3.0 visual pass: the public visual system below is the single source of
   truth for landing atmosphere; the earlier field declarations remain only
   where they provide pseudo-element geometry or motion behavior. */
body.landing-compact:not(.platform-mode)::before {
  background:
    linear-gradient(rgba(126, 208, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 208, 255, .04) 1px, transparent 1px),
    radial-gradient(ellipse 56% 44% at 62% 20%, rgba(116, 95, 255, .14), transparent 70%);
  background-size: 72px 72px, 72px 72px, auto;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 76%);
}
.hero-grid {
  border: 1px solid rgba(133, 192, 235, .18);
  border-radius: 24px;
  border-color: rgba(150, 192, 226, .25);
  box-shadow: 0 34px 100px rgba(2, 8, 22, .28), inset 0 1px 0 rgba(226, 245, 255, .09), inset 0 -1px 0 rgba(79, 130, 189, .16);
}

/* v3.0 hero frame target correction (2028.07.03): apply the material edge to
   the visible hero frame, not the transparent atmosphere layer that sits
   behind it. This keeps the visual claim honest and changes no state, request,
   tenant, telemetry, or authority behavior. */
.hero-grid::before {
  width: min(280px, 32%);
  border-top-color: rgba(138, 222, 255, .28);
}
.hero-copy {
  position: relative;
  padding: clamp(16px, 1.6vw, 24px) 0 clamp(18px, 2.4vw, 36px) clamp(20px, 3.8vw, 58px);
}
.hero-copy::before {
  position: absolute;
  top: clamp(16px, 1.6vw, 24px);
  left: clamp(20px, 3.8vw, 58px);
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 236, 218, .9), transparent);
  box-shadow: 0 0 18px rgba(126, 236, 218, .28);
  content: "";
  pointer-events: none;
}
.hero-copy h1 { max-width: 540px; font-size: clamp(3.1rem, 4vw, 4.7rem); }
.hero-copy .hero-lede, .hero-copy .hero-support { max-width: 510px; }
.landing-journey {
  top: 24px;
  right: 18px;
  width: min(246px, 27%);
  border-color: rgba(145, 200, 237, .26);
  background: linear-gradient(135deg, rgba(13, 27, 45, .68), rgba(8, 15, 27, .48));
  box-shadow: 0 18px 44px rgba(3, 10, 24, .12), inset 0 1px 0 rgba(219, 249, 255, .05);
  opacity: .72;
  transform: scale(.96);
  transform-origin: top right;
}
.landing-depth {
  inset: -12% -2%;
  opacity: .70;
  mask-image: radial-gradient(ellipse 76% 82% at 66% 48%, #000 34%, rgba(0, 0, 0, .7) 62%, transparent 96%);
}
.landing-depth::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 18%, transparent 76%, rgba(255, 255, 255, .065)),
    radial-gradient(circle at 77% 43%, rgba(113, 137, 255, .18), transparent 38%),
    radial-gradient(circle at 42% 76%, rgba(75, 222, 201, .08), transparent 30%);
  opacity: .8;
}
.signal-panel {
  margin-right: clamp(12px, 2.2vw, 34px);
  border-color: rgba(142, 218, 246, .3);
  box-shadow: 0 36px 92px rgba(1, 8, 22, .38), 0 0 0 1px rgba(111, 168, 255, .05), inset 0 1px 0 rgba(231, 250, 255, .08);
}
  /* security-trace frame (CalVer 2028.08.185) */
  .signal-panel::after {
  right: 26px;
  left: 26px;
  height: 2px;
  background: linear-gradient(90deg, #6fe3cf, #78cfff 48%, #a78cff);
  box-shadow: 0 0 22px rgba(113, 222, 215, .24);
}
.signal-stage-marker { border-color: rgba(111, 227, 207, .38); color: #93eadb; background: rgba(59, 194, 180, .06); }
.workspace-psirtling { border-color: rgba(113, 224, 193, .3); background: linear-gradient(110deg, rgba(28, 87, 79, .27), rgba(12, 25, 39, .58)); }
.workspace-psirtling-mark { background: linear-gradient(145deg,rgba(137,211,177,.2),rgba(79,142,157,.12));box-shadow:0 0 14px rgba(137,211,177,.16)}
.workspace-psirtling-state { color: #b9d8f5; border-color: rgba(117, 185, 248, .35); }
.proof-line strong { color: #9de8d5; }
@media (max-width: 980px) {
  .hero-grid { border-radius: 20px; }
  .hero-copy { padding-left: clamp(20px, 4vw, 38px); }
  .hero-copy::before { left: clamp(20px, 4vw, 38px); }
  .signal-panel { margin-right: 18px; margin-left: 18px; }
  .landing-journey { right: 30px; width: min(300px, 42%); }
}
@media (max-width: 680px) {
  .hero-grid { border-radius: 16px; }
  /* Reset the grid item's intrinsic minimum so long display words wrap inside
     the phone canvas instead of widening the hero and being clipped by the
     intentional overflow guard. */
  .hero-copy { min-width: 0; padding: 30px 19px 0; }
  .hero-copy::before { top: 30px; left: 19px; }
  /* Keep this final narrow-screen rule after the v3.0 visual tokens above so
     the phone hierarchy cannot be widened by the desktop headline scale. */
  .hero-copy h1 { margin-bottom: 20px; font-size: clamp(2.55rem, 11vw, 3.6rem); line-height: .92; }
  .hero-proofline { gap: 7px 12px; margin-top: 11px; font-size: .49rem; }
  .signal-panel { margin: 6px 0 0; }
  .landing-depth { inset: -6% -10%; opacity: .54; }
  .hero-context-field { opacity: .5; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 100%); }
  .hero-context-node { width: 7px; height: 7px; }
  .hero-security-shield { right: 18%; width: 220px; opacity: .42; }
  .hero-security-orbit { right: 4%; width: 270px; opacity: .34; }
}

/* Narrow desktop keeps the product surface and the promise in the same first
   frame. The wide-desktop 530px preview minimum is too dominant around 1,024px
   and leaves the headline artificially tall; this is a presentation-only
   bridge between the intentional tablet and wide-desktop compositions. */
@media (min-width: 981px) and (max-width: 1120px) {
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 32px; min-height: 570px; }
  .hero-copy { padding-left: clamp(22px, 3vw, 34px); }
  .hero-copy::before { left: clamp(22px, 3vw, 34px); }
  .hero-copy h1 { max-width: 360px; font-size: clamp(2.8rem, 4.8vw, 4.1rem); line-height: .95; }
  .hero-copy .hero-lede, .hero-copy .hero-support { max-width: 370px; }
  .hero-lede { font-size: 1rem; }
  .hero-support { font-size: .81rem; }
  .signal-panel { margin-right: 12px; }
  .landing-journey { width: min(240px, 31%); }
}

@media (prefers-reduced-motion: reduce) {
  .setup-route li.is-current { animation: none; }
  .workspace-lineage::after, .workspace-lineage-node i { transition: none; }
  .response-map-track button { transition: none; }
  .hero-grid { box-shadow: 0 24px 64px rgba(2, 8, 22, .24), inset 0 1px 0 rgba(220, 247, 255, .05); }
  .landing-journey { transform: none; }
  .hero-field-ambient, .hero-context-field::before, .hero-context-field::after, .hero-signal-sweep, .hero-context-link, .hero-context-node, .hero-security-shield, .hero-security-orbit { animation: none; }
  .product-gallery::after { animation: none; }
  .hero-context-node.is-active::before { animation: none; }
  .signal-panel::before, .signal-panel .workspace-preview { transition: none; }
  .public-reading-progress, .public-reading-progress i { transition: none; }
}

/* v3.0 transparency resilience (2028.05.17): retain the same visual
   hierarchy for visitors who request less translucency. Solid surfaces avoid
   contrast loss and reduce compositor work without changing content, setup
   state, tenant boundaries, or authority semantics. */
@media (prefers-reduced-transparency: reduce) {
  body.landing-compact:not(.platform-mode) .signal-panel,
  body.landing-compact:not(.platform-mode) .landing-journey,
  /* v3.0 hero copy system-palette fallback (CalVer 2028.08.134). */
  body.landing-compact:not(.platform-mode) .hero-copy::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #101c2c;
  }
  body.landing-compact:not(.platform-mode) .signal-panel {
    border-color: rgba(142, 218, 246, .48);
  }
  body.landing-compact:not(.platform-mode) .landing-journey {
    border-color: rgba(145, 200, 237, .42);
  }
  .landing-depth-canvas,.landing-layer{opacity:.18}
}

/* public visual system: indigo, violet, and slate establish the calm
   product surface; warm/green colors remain semantic response cues. This is
   presentation-only, uses no new asset or request, and is scoped away from
   the authenticated workspace tokens. */
body.landing-compact:not(.platform-mode) {
  --public-violet:#a78bfa;
  --public-indigo: #818cf8;
  --public-cyan: #7dd3fc;
  --public-slate: #94a3b8;
  background:
    radial-gradient(ellipse 78% 64% at 82% -12%, rgba(99, 102, 241, .24), transparent 65%),
    radial-gradient(ellipse 50% 38% at 8% 24%, rgba(167, 139, 250, .1), transparent 72%),
    linear-gradient(145deg, #070c19 0%, #0b1021 52%, #17112b 100%);
}
body.landing-compact:not(.platform-mode)::before {
  background:
    linear-gradient(rgba(165, 180, 252, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 180, 252, .04) 1px, transparent 1px),
    radial-gradient(ellipse 54% 42% at 50% 18%, rgba(129, 140, 248, .13), transparent 70%);
}
body.landing-compact:not(.platform-mode) .proof-line { color: #c1cbd6; }

/* v3.0 hero focal-field refinement (2027.09.15); v3.0 hero field composition (2028.01.24). Decorative only, never tenant or authority state. The reviewed baseline is background-position: center, center, right center;. */
body.landing-compact:not(.platform-mode) .hero-grid {
  background-color: #0b0f18;
  background-image:
    linear-gradient(90deg, rgba(8, 13, 25, .88) 0%, rgba(8, 13, 25, .64) 34%, rgba(8, 13, 25, .2) 70%, rgba(8, 13, 25, .05) 100%),
    linear-gradient(122deg, transparent 0 47%, rgba(125, 211, 252, .12) 47.15%, transparent 47.38%),
    repeating-linear-gradient(90deg, rgba(165, 180, 252, .045) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(165, 180, 252, .03) 0 1px, transparent 1px 84px),
    image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
  background-blend-mode: normal, screen, normal, normal, normal;
  background-position: center, center, 0 0, 0 0, right center;
  background-size: cover, cover, 84px 84px, 84px 84px, cover;
}

/* v3.0 setup anchor clearance (CalVer 2028.09.074): the fixed public header
   must never cover the first line after a chapter jump. This is layout-only;
   it changes no source, tenant, or authorization state. */
body.landing-compact:not(.platform-mode) #early-access {
  scroll-margin-top: 132px;
}
body.landing-compact:not(.platform-mode) .hero-grid::after {
  /* v3.0 hero response-field contract (2028.04.05): atmosphere only. */
  right: -4%;
  bottom: -30%;
  width: 72%;
  background:
    linear-gradient(136deg, transparent 0 44%, rgba(125, 211, 252, .13) 44.2%, transparent 44.5%),
    radial-gradient(ellipse at 62% 38%, rgba(129, 140, 248, .2), transparent 54%),
    radial-gradient(ellipse at 42% 70%, rgba(45, 212, 191, .12), transparent 52%),
    conic-gradient(from 214deg at 50% 50%, transparent 0deg, rgba(125, 211, 252, .1) 56deg, transparent 102deg, rgba(167, 139, 250, .09) 158deg, transparent 214deg, rgba(240, 157, 112, .07) 278deg, transparent 330deg);
  border: 1px solid rgba(125, 211, 252, .1);
  box-shadow: 0 0 0 18px rgba(125, 211, 252, .018), inset 0 0 46px rgba(125, 211, 252, .06), 0 0 92px rgba(99, 102, 241, .1);
  mix-blend-mode: screen;
  opacity: .88;
}
body.landing-compact:not(.platform-mode) .hero-context-field {
  opacity: .94;
}
body.landing-compact:not(.platform-mode) .hero-context-field::after {
  border-color: rgba(125, 211, 252, .26);
  box-shadow: 0 0 0 20px rgba(125, 211, 252, .03), 0 0 86px rgba(129, 140, 248, .16), inset 0 0 46px rgba(45, 212, 191, .08);
}

/* v3.0 visual focus pass (2027.09.28): the first-frame promise should feel
   like a product surface, not a marketing overlay. The headline carries the
   signal color, while the response workspace keeps the highest contrast and
   the decorative field stays deliberately quiet behind it. */
body.landing-compact:not(.platform-mode) .hero-copy h1 span {
  background: linear-gradient(105deg, #b9a7ff 0%, #8fd9ff 62%, #8be7d1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(132, 182, 255, .14);
}
body.landing-compact:not(.platform-mode) .hero-copy h1 {
  text-shadow: 0 2px 0 rgba(4, 8, 18, .18);
}

body.landing-compact:not(.platform-mode) .landing-journey::after {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(139, 231, 209, .78);
  border-radius: 50%;
  background: rgba(139, 231, 209, .4);
  box-shadow: 0 0 0 5px rgba(139, 231, 209, .05), 0 0 18px rgba(139, 231, 209, .36);
  content: "";
  pointer-events: none;
}
body.landing-compact:not(.platform-mode) .signal-panel {
background:linear-gradient(145deg,rgba(32,52,79,.54),rgba(7,14,28,.88) 48%,rgba(34,25,58,.66));
  backdrop-filter:blur(14px) saturate(1.08);
}
body.landing-compact:not(.platform-mode) .signal-panel .workspace-preview {
  background: linear-gradient(145deg, rgba(13, 20, 32, .94), rgba(7, 12, 21, .97));
}
body.landing-compact:not(.platform-mode) .hero-metric strong {
  color: #eef6ff;
}

/* v3.0 surface handoff refinement (2028.02.04): the product walkthrough is
   the first place a visitor chooses what to inspect. A quiet active marker
   makes that choice feel intentional without turning the rail into another
   card or adding a new state source. The marker is presentation-only; the
   existing data-gallery-active value remains the sole selection state. */
body.landing-compact:not(.platform-mode) .gallery-sequence a {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.landing-compact:not(.platform-mode) .gallery-sequence a::before {
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  content: "";
  opacity: .48;
  transition: background .25s ease, box-shadow .25s ease, opacity .25s ease;
}
body.landing-compact:not(.platform-mode) .gallery-sequence a.is-active {
  border-color: rgba(125, 211, 252, .2);
  color: #eef7fb;
  background: linear-gradient(110deg, rgba(125, 211, 252, .11), rgba(167, 139, 250, .08));
  box-shadow: inset 0 1px 0 rgba(225, 250, 255, .06), 0 5px 16px rgba(12, 34, 61, .16);
}
body.landing-compact:not(.platform-mode) .gallery-sequence a.is-active::before {
  border-color: #8be7d1;
  background: #8be7d1;
  box-shadow: 0 0 0 3px rgba(139, 231, 209, .08), 0 0 12px rgba(139, 231, 209, .52);
  opacity: 1;
}
body.landing-compact:not(.platform-mode) .gallery-sequence a.is-active::after {
  right: 10px;
  bottom: -8px;
  left: 10px;
  height: 2px;
  background: linear-gradient(90deg, #7dd3fc, #a78bfa, #8be7d1);
  box-shadow: 0 0 12px rgba(125, 211, 252, .34);
}
body.landing-compact:not(.platform-mode) .gallery-sequence a:hover,
body.landing-compact:not(.platform-mode) .gallery-sequence a:focus-visible {
  border-color: rgba(125, 211, 252, .18);
  background: rgba(125, 211, 252, .055);
}
body.landing-compact:not(.platform-mode) .gallery-sequence a:focus-visible {
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-copy h1 span { text-shadow: none; }
}

/* Keep the final landing-theme override compatible with the hero promise's
   reduced-motion contract. The later theme rule uses a background shorthand,
   so restate the stable position at the same cascade depth. */
@media (prefers-reduced-motion: reduce) {
  .workspace-preview:hover, .workspace-preview:focus-within,
  .hero-metric:hover, .hero-metric:focus-within { transform: none; }
  .workspace-preview:hover::after, .workspace-preview:focus-within::after { animation: none; opacity: 0; }
  body.landing-compact .hero-copy h1 span {
    animation: none;
    background-position: 50% 50%;
  }
}

/* v3.0 response-stage signal pass (2028.02.05): stage accents help visitors
   scan the authored response model as a progression. They are semantic visual
   cues only; the response-map renderer and server remain the sources of truth
   for any actual workflow or authority. */
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="receive"]::before,
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="receive"] > span {
  border-color: rgba(125, 211, 252, .82);
  color: #8fd9ff;
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="receive"].is-active {
  background: linear-gradient(90deg, rgba(125, 211, 252, .09), rgba(49, 70, 95, .08) 58%, transparent);
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="coordinate"]::before,
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="coordinate"] > span {
  border-color: rgba(167, 139, 250, .82);
  color: #c4b5fd;
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="coordinate"].is-active {
  background: linear-gradient(90deg, rgba(167, 139, 250, .09), rgba(49, 70, 95, .08) 58%, transparent);
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="decide"]::before,
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="decide"] > span {
  border-color: rgba(139, 211, 177, .82);
  color: #a5e1c5;
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="decide"].is-active {
  background: linear-gradient(90deg, rgba(139, 211, 177, .09), rgba(49, 70, 95, .08) 58%, transparent);
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="disclose"]::before,
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="disclose"] > span {
  border-color: rgba(240, 157, 112, .84);
  color: #f0b28f;
}
body.landing-compact:not(.platform-mode) .platform-story-grid article[data-story-step="disclose"].is-active {
  background: linear-gradient(90deg, rgba(240, 157, 112, .09), rgba(49, 70, 95, .08) 58%, transparent);
}
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step] > span {
  background: rgba(8, 15, 26, .82);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .04), 0 0 14px rgba(125, 211, 252, .08);
}
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="coordinate"] > span { box-shadow: 0 0 0 4px rgba(167, 139, 250, .04), 0 0 14px rgba(167, 139, 250, .08); }
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="decide"] > span { box-shadow: 0 0 0 4px rgba(139, 211, 177, .04), 0 0 14px rgba(139, 211, 177, .08); }
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step="disclose"] > span { box-shadow: 0 0 0 4px rgba(240, 157, 112, .04), 0 0 14px rgba(240, 157, 112, .08); }
body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step].is-active > span {
  background: rgba(20, 29, 42, .94);
  box-shadow: 0 0 0 4px currentColor, 0 0 20px currentColor;
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .response-map-track button[data-story-map-step].is-active > span { box-shadow: 0 0 0 3px currentColor; }
}

/* v3.0 consulting-loop signal pass (2028.02.06): keep the existing Design /
   Run / Prove loop visually connected to the platform story. The pulse is a
   compositor-friendly presentation cue only; it never represents a request,
   service entitlement, customer state, or workflow authority. */
body.landing-compact:not(.platform-mode) .services-loop i::before {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(139, 231, 209, .72);
  border-radius: 50%;
  background: #101923;
  box-shadow: 0 0 0 3px rgba(139, 231, 209, .06), 0 0 13px rgba(139, 231, 209, .28);
  content: "";
  animation: consultingLoopSignal 5.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
body.landing-compact:not(.platform-mode) .services-loop i:nth-of-type(2)::before { animation-delay: -2.8s; }
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="design"] .services-grid article[data-service-lane="design"]::after,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="strategy"] .services-grid article[data-service-lane="strategy"]::after,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="readiness"] .services-grid article[data-service-lane="readiness"]::after,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="enablement"] .services-grid article[data-service-lane="enablement"]::after {
  right: 14px;
  left: 14px;
  height: 2px;
  opacity: .9;
  box-shadow: 0 0 15px currentColor;
}
@keyframes consultingLoopSignal {
  0%, 12% { left: 0; opacity: 0; }
  22% { opacity: 1; }
  74% { left: calc(100% - 7px); opacity: .84; }
  88%, 100% { left: calc(100% - 7px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .services-loop i::before { animation: none; left: calc(100% - 7px); opacity: .72; }
}

/* v3.0 setup-first-move signal pass (2028.02.07): public setup should make
   the first safe action obvious without hiding the later proof steps. The
   beam and node pulse are presentation-only; setup state still comes from the
   existing bounded route renderer and no authority is created here. */
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="domain"] .setup-form-shell::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, rgba(125, 211, 252, .18), transparent);
  box-shadow: 0 0 18px rgba(125, 211, 252, .28);
  content: "";
  pointer-events: none;
}
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="domain"] .setup-route li.is-current::before {
  animation: setupCurrentPulse 2.8s ease-in-out infinite;
}
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="domain"] .setup-route li.is-current strong {
  color: #bceeff;
  text-shadow: 0 0 16px rgba(125, 211, 252, .22);
}
@keyframes setupCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(125, 211, 252, .08), 0 0 12px rgba(125, 211, 252, .24); }
  50% { box-shadow: 0 0 0 7px rgba(125, 211, 252, .12), 0 0 22px rgba(125, 211, 252, .38); }
}
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="domain"] .setup-route li.is-current::before { background: #7dd3fc; }
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="review"] .setup-route li.is-current::before { background: #f09d70; animation-name: setupCurrentPulseOrange; }
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="review"] .setup-route li.is-current span,
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="review"] .setup-route li.is-current strong { color: #f0b28f; text-shadow: 0 0 16px rgba(240, 157, 112, .22); }
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="access"] .setup-route li.is-current::before { background: #89d3b1; animation-name: setupCurrentPulseGreen; }
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="access"] .setup-route li.is-current span,
body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="access"] .setup-route li.is-current strong { color: #b8f1df; text-shadow: 0 0 16px rgba(137, 211, 177, .22); }
@keyframes setupCurrentPulseOrange {
  0%, 100% { box-shadow: 0 0 0 4px rgba(240, 157, 112, .08), 0 0 12px rgba(240, 157, 112, .24); }
  50% { box-shadow: 0 0 0 7px rgba(240, 157, 112, .12), 0 0 22px rgba(240, 157, 112, .38); }
}
@keyframes setupCurrentPulseGreen {
  0%, 100% { box-shadow: 0 0 0 4px rgba(137, 211, 177, .08), 0 0 12px rgba(137, 211, 177, .24); }
  50% { box-shadow: 0 0 0 7px rgba(137, 211, 177, .12), 0 0 22px rgba(137, 211, 177, .38); }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .early-access-panel[data-setup-route-stage="domain"] .setup-route li.is-current::before {
    animation: none;
    box-shadow: 0 0 0 4px rgba(125, 211, 252, .08), 0 0 12px rgba(125, 211, 252, .24);
  }
}

/* v3.0 preview-result breathing room pass (2028.02.08): the public preview
   heading receives focus when a result is ready. Give the explanatory lede a
   deliberate reading gap so the focus ring never collides with the first line.
   This is layout and focus presentation only; proposed context, review state,
   and account boundaries are unchanged. */
body.landing-compact:not(.platform-mode) #public-preview .section-heading > div > .section-lede {
  margin-top: 14px;
}
body.landing-compact:not(.platform-mode) #public-preview #preview-title:focus {
  outline-offset: 6px;
}

/* v3.0 review-to-setup trace pass (2028.02.09): the next-step panel is the
   public preview's only transition into account-bound setup. A bounded trace
   gives that handoff the same visual intentionality as the product surfaces;
   it remains pointer-inert and carries no workflow or authorization meaning. */
body.landing-compact:not(.platform-mode) #public-preview .preview-next {
  position: relative;
  overflow: hidden;
}
body.landing-compact:not(.platform-mode) #public-preview .preview-next::before {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #7dd3fc 45%, #a78bfa 72%, transparent);
  box-shadow: 0 0 17px rgba(125, 211, 252, .32);
  content: "";
  animation: previewNextTrace 8.5s cubic-bezier(.45, .05, .55, .95) infinite;
  pointer-events: none;
}
@keyframes previewNextTrace {
  0%, 16% { left: -30%; opacity: 0; }
  29% { opacity: .9; }
  76%, 100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) #public-preview .preview-next::before { left: 12%; opacity: .52; animation: none; }
}

/* v3.0 active-surface focus pass (2028.02.10): the gallery is the landing
   page's visual proof. A small edge trace makes the selected surface legible
   against the supporting shots without adding labels, data, or a new motion
   system. It is pointer-inert and has no workflow, tenant, or authority meaning. */
body.landing-compact:not(.platform-mode) .product-shot.is-spotlight::after {
  position: absolute;
  z-index: 3;
  top: -1px;
  right: 22px;
  width: 92px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .82) 42%, rgba(167, 139, 250, .82) 78%, transparent);
  box-shadow: 0 0 17px rgba(125, 211, 252, .25);
  content: "";
  animation: galleryFocusSweep 6.8s cubic-bezier(.45, .05, .55, .95) infinite;
  pointer-events: none;
}
@keyframes galleryFocusSweep {
  0%, 18% { opacity: .18; transform: translateX(-34px) scaleX(.72); }
  42% { opacity: .88; transform: translateX(0) scaleX(1); }
  72%, 100% { opacity: .18; transform: translateX(34px) scaleX(.72); }
}
@keyframes gallerySurfaceHorizon {
  0% { opacity: .42; transform: translate3d(-2%, 0, 0) scaleX(.96); }
  100% { opacity: .78; transform: translate3d(2%, 0, 0) scaleX(1.02); }
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .product-shot.is-spotlight::after { right: 16px; width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .product-shot.is-spotlight::after { opacity: .62; transform: none; animation: none; }
}

/* v3.0 mobile gallery touch hardening (2028.02.11): compact visual chrome
   must not shrink the actual interaction target. The rail remains visually
   quiet while each surface choice has a 44px minimum hit area. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .gallery-sequence a {
    min-height: 44px;
  }
}

/* v3.0 first-run action rail (2028.02.12): scope, context review, and intake
   are three entry points into one operating path. The spine is a bounded
   reading-order cue behind the existing controls; it does not imply sequence,
   completion, live work, or authority. */
body.platform-mode .workspace-focus-action-list {
  position: relative;
  isolation: isolate;
}
body.platform-mode .workspace-focus-action-list::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 12px;
  left: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(125, 211, 252, .12), rgba(125, 211, 252, .42), rgba(167, 139, 250, .28), rgba(134, 239, 172, .22));
  box-shadow: 0 0 12px rgba(125, 211, 252, .12);
  content: "";
  pointer-events: none;
}
body.platform-mode .workspace-focus-action {
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 18px rgba(2, 8, 22, .18), inset 0 1px 0 rgba(225, 250, 255, .04);
}
@media (max-width: 680px) {
  body.platform-mode .workspace-focus-action-list {
    padding-left: 8px;
  }
  body.platform-mode .workspace-focus-action-list::before {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 16px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(125, 211, 252, .16), rgba(125, 211, 252, .42), rgba(134, 239, 172, .22));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-focus-action { box-shadow: inset 0 1px 0 rgba(225, 250, 255, .04); }
}

/* v3.0 consulting-lane marker pass (2028.02.13): the active service card is
   the visual counterpart to the Design / Run / Prove loop. A low-amplitude
   marker pulse ties those surfaces together without implying entitlement,
   sequencing, live demand, or service status. */
body.landing-compact:not(.platform-mode) .services-grid article.is-service-spotlight > span {
  border-color: rgba(125, 211, 252, .78);
  color: #c7efff;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .08), 0 0 16px rgba(125, 211, 252, .2);
  animation: serviceMarkerPulse 3.8s ease-in-out infinite;
}
body.landing-compact:not(.platform-mode) .services-grid article[data-service-lane="strategy"].is-service-spotlight > span {
  border-color: rgba(240, 157, 112, .8);
  color: #ffd0b7;
  box-shadow: 0 0 0 4px rgba(240, 157, 112, .08), 0 0 16px rgba(240, 157, 112, .2);
}
body.landing-compact:not(.platform-mode) .services-grid article[data-service-lane="readiness"].is-service-spotlight > span {
  border-color: rgba(137, 211, 177, .8);
  color: #c0f0d5;
  box-shadow: 0 0 0 4px rgba(137, 211, 177, .08), 0 0 16px rgba(137, 211, 177, .2);
}
body.landing-compact:not(.platform-mode) .services-grid article[data-service-lane="enablement"].is-service-spotlight > span {
  border-color: rgba(190, 164, 238, .82);
  color: #e0d1ff;
  box-shadow: 0 0 0 4px rgba(190, 164, 238, .08), 0 0 16px rgba(190, 164, 238, .2);
}
@keyframes serviceMarkerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .services-grid article.is-service-spotlight > span { animation: none; }
}

/* v3.0 evidence provenance separation (2028.02.14): provenance is review
   context; source inspection is an action. Keep them on distinct rows so the
   visitor can see the boundary before opening the first-party source. This is
   presentation-only and preserves the existing link, target, and data. */
body.landing-compact:not(.platform-mode) #public-preview .preview-card-provenance {
  display: flex !important;
  width: fit-content;
}
body.landing-compact:not(.platform-mode) #public-preview .preview-source-link {
  display: flex;
  width: fit-content;
  margin-top: 11px;
}

/* v3.0 workspace surface pass (2027.09.29): keep authenticated work calm
   enough for sustained PSIRT work. Orange remains a semantic checkpoint color;
   it no longer tints every surface. No state, authority, or tenant boundary
   is changed by these presentation-only rules. */
body.platform-mode .workspace-content {
  background:
    radial-gradient(ellipse 58% 32% at 78% 0%, rgba(99, 102, 241, .12), transparent 70%),
    radial-gradient(ellipse 42% 28% at 16% 12%, rgba(56, 189, 248, .06), transparent 72%),
    linear-gradient(180deg, rgba(12, 19, 34, .76), transparent 48%);
}
body.platform-mode .workspace-content::before {
  background-image:
    linear-gradient(rgba(125, 211, 252, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .028) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: .72;
}
body.platform-mode .workspace-heading h1 {
  letter-spacing: -.055em;
  text-shadow: 0 2px 0 rgba(3, 8, 18, .22);
}
body.platform-mode .workspace-focus-brief {
  /* v3.0 focus hierarchy pass (CalVer 2028.08.126): one restrained rail
     makes the next accountable move read as a single instrument. This cue is
     decorative only; it never encodes severity, authority, or tenant state. */
  border-color: rgba(125, 211, 252, .26);
  background:
    radial-gradient(circle at 92% 0, rgba(129, 140, 248, .14), transparent 36%),
    linear-gradient(132deg, rgba(19, 31, 50, .94), rgba(10, 18, 31, .97));
  box-shadow: inset 0 1px 0 rgba(220, 247, 255, .045), 0 22px 52px rgba(2, 8, 22, .24);
}
/* v3.0 empty-workspace arrival (CalVer 2028.08.143): give a first-run
   operator a composed starting surface instead of a dormant-looking card.
   The ring and accent are presentation only; the server-derived setup action
   remains the sole source of workflow meaning or authority. */
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] {
  background:
    radial-gradient(circle at 88% 18%, rgba(120, 225, 209, .11), transparent 22%),
    radial-gradient(circle at 92% 0, rgba(129, 140, 248, .13), transparent 38%),
    linear-gradient(132deg, rgba(17, 34, 49, .96), rgba(9, 18, 31, .98));
}
body.platform-mode .workspace-focus-brief[data-focus-state="empty"]::after {
  width: 31%;
  border-color: rgba(120, 225, 209, .16);
  box-shadow: 0 0 0 15px rgba(120, 225, 209, .025), 0 0 0 31px rgba(125, 211, 252, .018);
}
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-actions {
  padding-top: 11px;
  border-top: 1px solid rgba(120, 225, 209, .16);
}
body.platform-mode .workspace-focus-main {
  padding-left: 16px;
}
body.platform-mode .workspace-focus-main::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #78e1d1 0%, #7ccfff 52%, rgba(167, 139, 250, .5) 100%);
  box-shadow: 0 0 18px rgba(120, 225, 209, .2);
  content: "";
  opacity: .78;
}
body.platform-mode .workspace-focus-brief::before {
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .62), rgba(167, 139, 250, .46), transparent);
}
body.platform-mode .workspace-focus-brief::after {
  border-color: rgba(125, 211, 252, .13);
  box-shadow: 0 0 0 17px rgba(125, 211, 252, .024), 0 0 0 35px rgba(167, 139, 250, .018);
}
body.platform-mode .workspace-focus-state {
  border-color: rgba(125, 211, 252, .32);
  color: #b8e6fa;
  background: rgba(56, 189, 248, .08);
}
body.platform-mode .workspace-focus-lanes span.is-current {
  border-color: rgba(125, 211, 252, .38);
  color: #c7efff;
  background: rgba(56, 189, 248, .1);
}
body.platform-mode .workspace-nav {
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, .12), transparent 36%),
    hsl(222 25% 7%);
}
body.platform-mode .workspace-priority {
  border-color: rgba(125, 211, 252, .16);
  background: linear-gradient(145deg, rgba(17, 30, 48, .7), rgba(10, 17, 29, .78));
}
/* v3.0 first-run path composition (CalVer 2028.08.144): connect the three
   setup moves into one readable sequence. The connector is pointer-inert and
   decorative; each button remains an ordinary, independently authorized
   action. */
body.platform-mode .first-run-guide {
  border-color: rgba(125, 211, 252, .2);
  background:
    radial-gradient(circle at 92% 0, rgba(120, 225, 209, .1), transparent 28%),
    linear-gradient(145deg, rgba(17, 34, 49, .86), rgba(10, 18, 30, .97));
}
body.platform-mode .first-run-grid {
  border-top-color: rgba(125, 211, 252, .18);
  border-bottom-color: rgba(125, 211, 252, .18);
}
body.platform-mode .first-run-grid::before {
  background: linear-gradient(90deg, rgba(125, 211, 252, .55), rgba(120, 225, 209, .3));
  opacity: .72;
}
body.platform-mode .first-run-grid article {
  background: linear-gradient(145deg, rgba(125, 211, 252, .045), transparent 70%);
}
body.platform-mode .first-run-grid article:hover,
body.platform-mode .first-run-grid article:focus-within {
  background: linear-gradient(145deg, rgba(120, 225, 209, .1), rgba(125, 211, 252, .035));
}
@media (max-width: 760px) {
  body.platform-mode .workspace-content { padding-top: 34px; }
  body.platform-mode .workspace-focus-brief { gap: 20px; padding: 20px; }
  body.platform-mode .workspace-focus-main { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-heading h1 { text-shadow: none; }
}
@media (forced-colors: active) {
  body.landing-compact:not(.platform-mode) .hero-copy::after {
    backdrop-filter: none;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: none;
  }
  .landing-depth-canvas,.landing-layer{display:none}
  body.platform-mode .workspace-focus-main::before { background: CanvasText; box-shadow: none; }
}
@media (prefers-contrast: more) {
  /* v3.0 authenticated contrast resilience (CalVer 2028.08.128): strengthen
     the existing focus brief boundaries without introducing new state cues.
     This is presentation-only and keeps response semantics unchanged. */
  body.platform-mode .workspace-focus-brief {
    border-color: rgba(210, 239, 255, .72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
  }
  body.platform-mode .workspace-focus-main::before {
    width: 3px;
    opacity: 1;
    box-shadow: none;
  }
  body.platform-mode .workspace-focus-state,
  body.platform-mode .workspace-focus-action {
    border-color: currentColor;
  }
  body.platform-mode .workspace-focus-facts {
    border-left-color: rgba(210, 239, 255, .56);
  }

  /* v3.0 public contrast resilience (CalVer 2028.08.129): keep the
     show-not-tell surfaces legible without making the hero louder. */
  body.landing-compact:not(.platform-mode) .hero-copy h1,
  body.landing-compact:not(.platform-mode) .hero-lede {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .48);
  }
  body.landing-compact:not(.platform-mode) .signal-panel,
  body.landing-compact:not(.platform-mode) .product-shot {
    border-color: rgba(210, 239, 255, .62);
  }
  body.landing-compact:not(.platform-mode) .button-primary,
  body.landing-compact:not(.platform-mode) .button-outline {
    box-shadow: 0 0 0 1px currentColor;
  }
  .landing-depth-canvas,.landing-layer{opacity:.1}
}

/* v3.0 evidence handoff (CalVer 2028.08.130): give the first product surface
   a quiet arrival edge so the hero atmosphere hands off to product evidence as
   one instrument. This is paint-only, pointer-inert, and carries no state,
   tenant, telemetry, or authority meaning. */
@media (min-width: 681px) {
  body.landing-compact:not(.platform-mode) .product-gallery-heading {
    position: relative;
    padding-left: 18px;
  }
  body.landing-compact:not(.platform-mode) .product-gallery-heading::before {
    position: absolute;
    top: 8px;
    bottom: 2px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc, rgba(167, 139, 250, .65) 56%, rgba(139, 211, 177, .18));
    box-shadow: 0 0 16px rgba(125, 211, 252, .18);
    content: "";
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body.landing-compact:not(.platform-mode) .product-gallery-heading::before {
    box-shadow: none;
  }
}

/* v3.0 evidence handoff forced-colors fallback (CalVer 2028.08.131): retain
   the orientation edge with a system color when gradients are suppressed. */
@media (forced-colors: active) {
  body.landing-compact:not(.platform-mode) .product-gallery-heading::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* v3.0 focus continuity pass (CalVer 2028.08.84): acknowledge a changed
   server-derived attention item with one calm material transition. This is a
   visual orientation aid only; it never communicates permission or completion. */
body.platform-mode .workspace-focus-brief.workspace-focus-refresh {
  animation: workspaceFocusRefresh .46s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes workspaceFocusRefresh {
  from { opacity: .78; transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(220, 247, 255, .045), 0 10px 26px rgba(2, 8, 22, .16); }
  to { opacity: 1; transform: translateY(0); box-shadow: inset 0 1px 0 rgba(220, 247, 255, .045), 0 22px 52px rgba(2, 8, 22, .24); }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-focus-brief.workspace-focus-refresh { animation: none; }
}

/* v3.0 handoff continuity pass (2027.09.30): a Case Room focus should tell
   the operator where it came from. The bridge is a transient presentation cue
   only; it does not assert a new case fact or authorize an action. */
body.platform-mode .case-card.case-card-focused {
  border-color: rgba(125, 211, 252, .58);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, .1), 0 26px 70px rgba(2, 8, 22, .3);
  animation: caseFocusArrival .46s cubic-bezier(.16, 1, .3, 1) both;
}
body.platform-mode .case-focus-bridge {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 2px;
  padding: 5px 8px;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 999px;
  color: #c5edfd;
  background: rgba(56, 189, 248, .08);
  font: 700 .53rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.platform-mode .case-focus-bridge-mark {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, .5);
  border-radius: 50%;
  color: #8be7d1;
  font-size: .65rem;
}
@keyframes caseFocusArrival {
  from { opacity: .62; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .case-card.case-card-focused { animation: none; }
}

/* v3.0 first-run focus pass (2027.10.01): expose one next move without
   hiding the complete operating path. Secondary steps remain readable and
   actionable; this is a presentation cue, not a maturity score or permission
   change. */
body.platform-mode .first-run-grid article.is-primary {
  border-color: rgba(125, 211, 252, .42);
  background: linear-gradient(145deg, rgba(56, 189, 248, .1), rgba(17, 30, 48, .46));
  box-shadow: inset 0 1px 0 rgba(220, 247, 255, .045), 0 14px 30px rgba(2, 8, 22, .22);
}
body.platform-mode .first-run-grid article.is-primary > span {
  border-color: rgba(125, 211, 252, .78);
  color: #c5efff;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .08), 0 0 18px rgba(125, 211, 252, .2);
}
body.platform-mode .first-run-grid article:not(.is-primary):not([data-state="complete"]) {
  opacity: .78;
}
body.platform-mode .first-run-grid article:not(.is-primary):not([data-state="complete"]):hover,
body.platform-mode .first-run-grid article:not(.is-primary):not([data-state="complete"]):focus-within {
  opacity: 1;
}
body.platform-mode .first-run-guide .section-heading p:last-child {
  max-width: 620px;
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .first-run-grid article.is-primary > span { box-shadow: 0 0 0 4px rgba(125, 211, 252, .08); }
}

/* v3.0 first-run readiness surface (2028.05.08): make the first authenticated
   handoff feel like a governed operating surface rather than a legacy setup
   card. Warm accents remain available for real attention states; the default
   path uses the platform's indigo/cyan system. Presentation only. */
body.platform-mode .first-run-guide {
  background:
    radial-gradient(circle at 96% 0, rgba(167, 139, 250, .12), transparent 34%),
    linear-gradient(145deg, rgba(19, 30, 53, .9), rgba(8, 16, 29, .96));
  border-color: rgba(167, 139, 250, .3);
}
body.platform-mode .first-run-guide .section-heading { align-items: flex-start; }
body.platform-mode #first-run-guide-status[data-state="ready"] {
  border-color: rgba(125, 211, 252, .4);
  color: #bdeeff;
  background: rgba(125, 211, 252, .08);
}
body.platform-mode #first-run-guide-status[data-state="waiting"] {
  border-color: rgba(167, 139, 250, .28);
  color: #c9c0f4;
  background: rgba(167, 139, 250, .07);
}
body.platform-mode .first-run-boundary {
  border-top-color: rgba(167, 139, 250, .18);
  color: #aebed1;
}
body.platform-mode .first-run-boundary strong { color: #d5caff; }
body.platform-mode .first-run-grid article {
  border-color: rgba(125, 211, 252, .16);
  background: linear-gradient(145deg, rgba(17, 31, 51, .78), rgba(8, 16, 29, .86));
}
body.platform-mode .first-run-grid article[data-state="complete"] {
  border-color: rgba(117, 224, 194, .32);
  background: linear-gradient(145deg, rgba(18, 49, 51, .46), rgba(8, 24, 30, .82));
}
body.platform-mode .first-run-grid article[data-state="complete"] > span {
  border-color: rgba(117, 224, 194, .5);
  color: #b8f1df;
  box-shadow: 0 0 0 4px rgba(117, 224, 194, .06);
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .first-run-guide::after { box-shadow: none; }
}

/* v3.0 gallery lane signal (2028.05.09): the selected product surface changes
   composition, so its caption and keyboard focus treatment must carry the same
   lane color. This is a presentation cue only; gallery selection remains the
   existing bounded client state and does not imply readiness or authority. */
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="response-desk"].is-spotlight figcaption strong { color: #9bd9f6; }
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="case-room"].is-spotlight figcaption strong { color: #f0b28f; }
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="product-context"].is-spotlight figcaption strong { color: #c9baff; }
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="response-desk"]:focus-visible { outline-color: rgba(125, 211, 252, .94); }
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="case-room"]:focus-visible { outline-color: rgba(240, 157, 112, .94); }
body.landing-compact:not(.platform-mode) .product-shot[data-gallery-shot="product-context"]:focus-visible { outline-color: rgba(167, 139, 250, .94); }
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .product-shot { transition: none; }
}

/* v3.0 gallery rail continuity (2028.05.10): carry the selected lane signal
   into the walkthrough rail and status marker so the control, frame, and
   progress indicator read as one product surface. CSS-only and pointer-inert;
   the existing data-gallery-active value remains the sole source of state. */
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="response-desk"] .gallery-sequence a.is-active::after {
  background: #7dd3fc;
  box-shadow: 0 0 12px rgba(125, 211, 252, .34);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="response-desk"] .gallery-sequence a.is-active span { color: #9bd9f6; }
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="response-desk"] .gallery-status::before {
  background: #7dd3fc;
  box-shadow: 0 0 10px rgba(125, 211, 252, .5);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="response-desk"] .gallery-status { color: #a7dff6; }
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="case-room"] .gallery-sequence a.is-active::after {
  background: #f09d70;
  box-shadow: 0 0 12px rgba(240, 157, 112, .34);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="case-room"] .gallery-sequence a.is-active span { color: #f0b28f; }
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="case-room"] .gallery-status::before {
  background: #f09d70;
  box-shadow: 0 0 10px rgba(240, 157, 112, .5);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="case-room"] .gallery-status { color: #f0b28f; }
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="product-context"] .gallery-sequence a.is-active::after {
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(167, 139, 250, .34);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="product-context"] .gallery-sequence a.is-active span { color: #c9baff; }
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="product-context"] .gallery-status::before {
  background: #a78bfa;
  box-shadow: 0 0 10px rgba(167, 139, 250, .5);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="product-context"] .gallery-status { color: #c9baff; }

/* v3.0 gallery active-surface treatment (2028.07.27): make the selected
   product view read as a composed surface, not only a one-pixel underline.
   The lane tint is presentation-only; data-gallery-active remains the sole
   source of selection and no request, tenant state, or authority changes. */
body.landing-compact:not(.platform-mode) .gallery-sequence a.is-active {
  border-color: rgba(155, 197, 232, .34);
  background: linear-gradient(145deg, rgba(28, 47, 67, .96), rgba(13, 22, 34, .98));
  box-shadow: inset 0 1px 0 rgba(231, 244, 255, .08), 0 10px 26px rgba(1, 5, 20, .2);
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="response-desk"] .gallery-sequence a.is-active {
  border-color: rgba(125, 211, 252, .38);
  background: linear-gradient(145deg, rgba(23, 53, 72, .92), rgba(12, 27, 39, .96));
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="case-room"] .gallery-sequence a.is-active {
  border-color: rgba(240, 157, 112, .38);
  background: linear-gradient(145deg, rgba(62, 42, 38, .92), rgba(28, 23, 27, .96));
}
body.landing-compact:not(.platform-mode) .product-gallery[data-gallery-active="product-context"] .gallery-sequence a.is-active {
  border-color: rgba(167, 139, 250, .4);
  background: linear-gradient(145deg, rgba(45, 38, 75, .92), rgba(22, 20, 39, .96));
}

/* v3.0 short-viewport hero rhythm (2028.07.28): preserve the same composed
   first-frame hierarchy on 720px-tall laptop viewports. The copy and response
   surface move as a unit; no content, state, request, or authority changes. */
@media (min-width: 981px) and (max-height: 800px) {
  body.landing-compact:not(.platform-mode) .hero-copy,
  body.landing-compact:not(.platform-mode) .signal-panel { transform: translateY(-34px); }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-copy,
  body.landing-compact:not(.platform-mode) .signal-panel { transition: none; }
}

/* v3.0 hero action focus spectrum (2028.07.29): align keyboard focus with
   the current cyan/violet action language instead of the legacy orange ring.
   The cue is presentation-only and preserves the existing 44px targets,
   routes, and authority boundaries. */
body.landing-compact:not(.platform-mode) .hero-actions .button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, .9), 0 0 0 6px rgba(167, 139, 250, .2), 0 14px 32px rgba(2, 8, 22, .26);
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-actions .button:focus-visible { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .gallery-sequence a.is-active { transition: none; }
}

/* v3.0 assurance lane continuity (2028.05.12): trust-story cards already
   expose lane-specific nodes and intro accents. Match the selected card edge
   to that same lane so the visual hierarchy never suggests that approval is
   the default trust mode. Presentation only; no trust state is inferred. */
body.landing-compact:not(.platform-mode) .trust-story[data-trust-active="basis"] .trust-story-grid article.is-trust-spotlight {
  border-color: rgba(125, 211, 252, .34);
  box-shadow: inset 0 2px 0 rgba(125, 211, 252, .72), 0 20px 48px rgba(0, 0, 0, .18);
}
body.landing-compact:not(.platform-mode) .trust-story[data-trust-active="approval"] .trust-story-grid article.is-trust-spotlight {
  border-color: rgba(240, 157, 112, .34);
  box-shadow: inset 0 2px 0 rgba(240, 157, 112, .72), 0 20px 48px rgba(0, 0, 0, .18);
}
body.landing-compact:not(.platform-mode) .trust-story[data-trust-active="history"] .trust-story-grid article.is-trust-spotlight {
  border-color: rgba(137, 211, 177, .34);
  box-shadow: inset 0 2px 0 rgba(137, 211, 177, .72), 0 20px 48px rgba(0, 0, 0, .18);
}

/* v3.0 chapter lane continuity (2028.05.13): carry each chapter's authored
   lane signal into its active card. The same rule applies to roles, operating
   scale, and consulting so a selected card never looks like an unrelated
   approval state. Presentation only; existing data attributes remain the sole
   presentation inputs. */
body.landing-compact:not(.platform-mode) .customer-fit[data-role-active="psirt"] .customer-fit-grid article.is-role-spotlight,
body.landing-compact:not(.platform-mode) .operating-scale[data-scale-active="sentinel"] .scale-card.is-scale-spotlight,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="design"] .services-grid article.is-service-spotlight {
  border-color: rgba(117, 185, 248, .34);
  box-shadow: inset 0 2px 0 rgba(117, 185, 248, .72), 0 20px 48px rgba(0, 0, 0, .18);
}
body.landing-compact:not(.platform-mode) .customer-fit[data-role-active="engineering"] .customer-fit-grid article.is-role-spotlight,
body.landing-compact:not(.platform-mode) .operating-scale[data-scale-active="squadron"] .scale-card.is-scale-spotlight,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="strategy"] .services-grid article.is-service-spotlight {
  border-color: rgba(240, 157, 112, .34);
  box-shadow: inset 0 2px 0 rgba(240, 157, 112, .72), 0 20px 48px rgba(0, 0, 0, .18);
}
body.landing-compact:not(.platform-mode) .customer-fit[data-role-active="assurance"] .customer-fit-grid article.is-role-spotlight,
body.landing-compact:not(.platform-mode) .operating-scale[data-scale-active="citadel"] .scale-card.is-scale-spotlight,
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="readiness"] .services-grid article.is-service-spotlight {
  border-color: rgba(137, 211, 177, .34);
  box-shadow: inset 0 2px 0 rgba(137, 211, 177, .72), 0 20px 48px rgba(0, 0, 0, .18);
}
body.landing-compact:not(.platform-mode) .services-panel[data-service-active="enablement"] .services-grid article.is-service-spotlight {
  border-color: rgba(190, 164, 238, .38);
  box-shadow: inset 0 2px 0 rgba(190, 164, 238, .74), 0 20px 48px rgba(0, 0, 0, .18);
}

/* v3.0 evidence review pass (2027.10.02): proposal cards should communicate
   source review before they invite a decision. Dataset attributes are derived
   from the existing assertion and never grant authority or change truth. */
body.platform-mode .proposal-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(125, 211, 252, .2);
  background: linear-gradient(135deg, rgba(17, 31, 50, .88), rgba(8, 15, 27, .96));
  box-shadow: inset 0 1px 0 rgba(220, 247, 255, .035), 0 16px 44px rgba(2, 8, 22, .16);
}
body.platform-mode .proposal-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #7dd3fc, #a78bfa 65%, rgba(125, 211, 252, .12));
  content: "";
}
body.platform-mode .proposal-card[data-proposal-state="confirmed"]::before {
  background: linear-gradient(180deg, #86efac, rgba(134, 239, 172, .14));
}
body.platform-mode .proposal-card[data-proposal-state="rejected"]::before {
  background: linear-gradient(180deg, #fca5a5, rgba(252, 165, 165, .14));
}
body.platform-mode .proposal-card .proposal-meta {
  gap: 6px;
  padding-left: 1px;
}
body.platform-mode .proposal-card .proposal-predicate {
  color: #a9c7da;
}
body.platform-mode .proposal-card .proposal-value {
  color: #f2f8fd;
}
body.platform-mode .proposal-card .proposal-context {
  max-width: 760px;
  color: #8ca6ba;
}
body.platform-mode .proposal-card .proposal-actions {
  align-self: center;
  padding-left: 4px;
}
body.platform-mode .proposal-card .evidence-button {
  color: #8be7d1;
  font-weight: 700;
}
body.platform-mode .proposal-card[data-proposal-source-kind="deterministic"] .tag-observed {
  border-color: rgba(125, 211, 252, .34);
  color: #bdeaff;
  background: rgba(56, 189, 248, .08);
}
@media (max-width: 760px) {
  body.platform-mode .proposal-card { padding: 19px; }
  body.platform-mode .proposal-card .proposal-actions { padding-left: 0; }
}

/* v3.0 capability boundary pass (2027.10.03): an inspectable proposal should
   explain a missing decision control to an owner-limited role. This note is
   derived from the existing capability check and never becomes authority. */
body.platform-mode .proposal-boundary {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 7px;
  color: #c9bfff;
  background: rgba(129, 140, 248, .08);
  font-size: .62rem;
  line-height: 1.35;
}
body.platform-mode .proposal-boundary::before {
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}
@media (max-width: 760px) {
  body.platform-mode .proposal-boundary { justify-self: start; }
}

/* v3.0 receive-report continuity pass (2027.10.04): preserve-first work needs
   the same source-led calm as evidence review. Status rails and the ownership
   note are derived presentation only; acceptance remains server-gated. */
body.platform-mode .intake-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(125, 211, 252, .2);
  background: linear-gradient(145deg, rgba(17, 31, 49, .86), rgba(8, 15, 27, .96));
  box-shadow: inset 0 1px 0 rgba(220, 247, 255, .035), 0 16px 44px rgba(2, 8, 22, .15);
}
body.platform-mode .intake-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #7dd3fc, rgba(125, 211, 252, .12));
  content: "";
}
body.platform-mode .intake-card[data-report-status="accepted"]::before {
  background: linear-gradient(180deg, #86efac, rgba(134, 239, 172, .12));
}
body.platform-mode .intake-card[data-report-status="rejected"]::before {
  background: linear-gradient(180deg, #fca5a5, rgba(252, 165, 165, .12));
}
body.platform-mode .intake-card .intake-card-header h3 {
  color: #f1f8fd;
}
body.platform-mode .intake-card .intake-fields {
  border-color: rgba(125, 211, 252, .14);
  background: rgba(6, 14, 25, .3);
}
body.platform-mode .intake-card .evidence-button {
  color: #8be7d1;
  font-weight: 700;
}
body.platform-mode .intake-boundary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 17px;
  padding: 7px 10px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 7px;
  color: #c9bfff;
  background: rgba(129, 140, 248, .08);
  font-size: .62rem;
  line-height: 1.35;
}
body.platform-mode .intake-boundary::before {
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}
@media (max-width: 760px) {
  body.platform-mode .intake-card { padding: 19px; }
}

/* v3.0 ledger scan pass (2027.10.05): make custody context visible before
   cryptographic detail. The full hashes remain available in the same entry;
   this is a readability layer over server-returned audit records only. */
body.platform-mode .audit-list {
  margin-top: 28px;
}
body.platform-mode .audit-event {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 24px;
}
body.platform-mode .audit-event:not(:last-child)::before {
  top: 36px;
  left: 18px;
  background: linear-gradient(180deg, rgba(125, 211, 252, .38), rgba(167, 139, 250, .12));
}
body.platform-mode .audit-sequence {
  width: 38px;
  height: 38px;
  border-color: rgba(125, 211, 252, .42);
  color: #bdeaff;
  background: rgba(56, 189, 248, .06);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .035);
}
body.platform-mode .audit-body {
  padding: 5px 17px 20px;
  border: 1px solid rgba(125, 211, 252, .16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(16, 29, 47, .7), rgba(8, 15, 27, .72));
  box-shadow: inset 0 1px 0 rgba(220, 247, 255, .028);
}
body.platform-mode .audit-body strong {
  color: #f0f7fc;
  letter-spacing: -.015em;
}
body.platform-mode .audit-body p {
  color: #b9c9d6;
}
body.platform-mode .audit-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 10px;
}
body.platform-mode .audit-context span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 999px;
  color: #9cc4da;
  background: rgba(56, 189, 248, .05);
  font: 700 .51rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}
body.platform-mode .audit-context .audit-integrity {
  border-color: rgba(134, 239, 172, .24);
  color: #a6e9c1;
  background: rgba(134, 239, 172, .06);
}
body.platform-mode .audit-context .audit-integrity::before {
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  content: "";
}
body.platform-mode .audit-body .hash-line {
  color: #748fa2;
}
@media (max-width: 680px) {
  body.platform-mode .audit-event { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
  body.platform-mode .audit-sequence { width: 32px; height: 32px; font-size: .62rem; }
  body.platform-mode .audit-event:not(:last-child)::before { left: 15px; top: 31px; }
  body.platform-mode .audit-body { padding: 5px 13px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-field-ambient,
  body.landing-compact:not(.platform-mode) .hero-grid::after { animation: none; }
}

/* v3.0 bounded ambient motion (2027.12.12; refined 2028.01.28): keep the product-security field
   alive around the hero, then pause every CSS motion layer once the visitor
   studies a deeper public surface. The canvas scene follows the same
   visibility boundary; none of these layers represent live telemetry. */
body.landing-compact:not(.platform-mode).hero-ambient-paused .hero-grid *,
body.landing-compact:not(.platform-mode).hero-ambient-paused .hero-grid::before,
body.landing-compact:not(.platform-mode).hero-ambient-paused .hero-grid::after,
body.landing-compact:not(.platform-mode).hero-ambient-paused::after {
  animation-play-state: paused;
}

/* v3.0 low-power presentation (2028.08.159): the static fallback must also
   quiet CSS-only atmosphere when hardware is constrained. Keep the artwork,
   hierarchy, and product surfaces visible while removing compositor loops
   that do not add meaning on a low-power device. */
body.low-power.landing-compact:not(.platform-mode) .hero-grid *,
body.low-power.landing-compact:not(.platform-mode) .hero-grid::before,
body.low-power.landing-compact:not(.platform-mode) .hero-grid::after,
body.low-power.landing-compact:not(.platform-mode) .hero-context-field::before,
body.low-power.landing-compact:not(.platform-mode) .hero-context-field::after,
body.low-power.landing-compact:not(.platform-mode) .hero-signal-sweep,
body.low-power.landing-compact:not(.platform-mode) .hero-context-link,
body.low-power.landing-compact:not(.platform-mode) .hero-context-node,
body.low-power.landing-compact:not(.platform-mode) .hero-security-shield,
body.low-power.landing-compact:not(.platform-mode) .hero-security-orbit,
body.low-power.landing-compact:not(.platform-mode) .hero-evidence-trace::after,
body.low-power.landing-compact:not(.platform-mode) .signal-art,
body.low-power.landing-compact:not(.platform-mode) .signal-panel::after,
body.low-power.landing-compact:not(.platform-mode)::after {
animation:none}

/* v3.0 focal hierarchy pass (2027.11.03): the hero should feel like a
   product surface first and an illustration second. The copy veil is a
   presentation-only layer; it contains no inferred company data, state, or
   authorization signal. The slow aurora keeps the field alive without adding
   a request, a new runtime, or a second competing animation loop. */
body.landing-compact:not(.platform-mode) .hero-copy {
  isolation: isolate;
}
body.landing-compact:not(.platform-mode) .hero-copy::after {
  position: absolute;
  z-index: -1;
  inset: -24px -34px -26px -24px;
  border: 1px solid rgba(190, 205, 255, .08);
  border-radius: 28px;
  background:
    linear-gradient(115deg, rgba(8, 14, 28, .62), rgba(8, 14, 28, .16) 72%, transparent),
    radial-gradient(ellipse at 24% 18%, rgba(129, 140, 248, .12), transparent 64%);
  box-shadow: inset 0 1px 0 rgba(232, 244, 255, .045), 0 22px 70px rgba(2, 8, 22, .12);
  backdrop-filter: blur(7px) saturate(1.05);
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
  content: "";
  pointer-events: none;
}
body.landing-compact:not(.platform-mode) .hero-grid::after {
  animation: heroAuroraDrift 24s ease-in-out infinite alternate;
}
body.landing-compact:not(.platform-mode) .hero-context-field::after {
  animation-duration: 28s;
}

@keyframes heroAuroraDrift {
  0% { transform: translate3d(-1%, 1%, 0) scale(.98); opacity: .62; }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); opacity: .86; }
}

@media (max-width: 680px) {
  /* v3.0 hero copy transparency fallback (CalVer 2028.08.132): the copy
     plane must not retain backdrop blur when reduced transparency is enabled. */
  body.landing-compact:not(.platform-mode) .hero-copy::after {
    inset: -20px -16px -18px -16px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; transform: perspective(900px) rotateX(58deg) translate3d(0, 4%, 0) scale(1.35); }
  body.landing-compact:not(.platform-mode) .hero-grid::after,
  body.landing-compact:not(.platform-mode) .hero-context-field::after {
    animation: none;
  }
}

/* v3.0 mobile surface handoff (2027.09.16): connect the evidence-led hero to
   the product gallery without adding another paragraph or interaction. The
   line and marker are pointer-inert atmosphere, never tenant telemetry. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .product-gallery {
    position: relative;
    margin-top: 52px;
    padding-top: 42px;
  }
  body.landing-compact:not(.platform-mode) .product-gallery::after {
    position: absolute;
    top: -28px;
    left: 19px;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, rgba(125, 211, 252, .08), rgba(125, 211, 252, .62));
    box-shadow: 0 0 14px rgba(125, 211, 252, .22);
    content: "";
    pointer-events: none;
  }
  body.landing-compact:not(.platform-mode) .product-gallery-heading::before {
    display: block;
    width: 6px;
    height: 6px;
    margin-bottom: 13px;
    border: 1px solid rgba(125, 211, 252, .72);
    border-radius: 50%;
    background: #0d1a2b;
    box-shadow: 0 0 0 4px rgba(125, 211, 252, .07), 0 0 16px rgba(125, 211, 252, .24);
    content: "";
  }
}
body.landing-compact:not(.platform-mode)::after {
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(119, 189, 247, .045) 32.1%, transparent 32.35% 67%, rgba(249, 159, 111, .035) 67.1%, transparent 67.35%),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(125, 211, 252, .016) 8px, transparent 9px),
    radial-gradient(ellipse 34% 20% at 78% 14%, rgba(167, 139, 250, .12), transparent 74%);
  background-size: 100% 100%, 100% 16px, auto;
}
/* v3.0 navigation continuity pass (2027.11.29): keep orientation and the
   two primary entry actions available while a visitor reads the visual story.
   This is presentation-only; it adds no event listener, network request, or
   tenant state. The opaque fallback keeps the header legible without blur. */
body.landing-compact:not(.platform-mode) .site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom-color: rgba(165, 180, 252, .14);
  background: linear-gradient(105deg, rgba(8, 14, 29, .92), rgba(13, 20, 42, .8));
  box-shadow: 0 12px 34px rgba(1, 6, 20, .18), inset 0 -1px 0 rgba(125, 211, 252, .04);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}
@supports not (backdrop-filter: blur(1px)) {
  body.landing-compact:not(.platform-mode) .site-header { background: rgba(8, 14, 29, .96); }
}
/* v3.0 first-frame hierarchy pass (2027.11.30): keep the product surface and
   the entry actions in the opening desktop viewport. Nothing is removed;
   the same evidence is compressed into a calmer rhythm so the visitor can
   see, then act, without a second scroll. */
body.landing-compact:not(.platform-mode) .hero-copy h1 {
  margin-bottom: 18px;
  font-size: clamp(2.9rem, 3.55vw, 4.2rem);
  line-height: 1;
}
/* v3.0 first-frame action breathing room (2027.12.11): keep the primary
   actions visibly inside a 720px opening viewport with at least 12px of lower
   clearance without changing the hero headline, focused chapters, or narrow
   screen action layout. */
body.landing-compact:not(.platform-mode) .hero-actions { margin-top: 3px; }
body.landing-compact:not(.platform-mode) .hero-metrics { gap: 8px; margin-top: 18px; }
body.landing-compact:not(.platform-mode) .hero-metric { padding: 10px 11px 9px; }
body.landing-compact:not(.platform-mode) .hero-metric-kicker { margin-bottom: 6px; }
body.landing-compact:not(.platform-mode) .hero-metric strong { margin-bottom: 5px; font-size: .87rem; }
/* v3.0 first-frame edge correction (2027.12.01): the desktop action row
   measured 16px below a 720px viewport after the hierarchy pass. Trim only
   the overview's top breathing room; focused chapters retain their authored
   reading offset and mobile layout remains governed by its own media rules. */
body.landing-compact:not(.platform-mode):not(.landing-detail-open) #landing-view { padding-top: 18px; }
/* v3.0 first-frame handoff (2028.01.13): the public header is in normal flow
   (and sticky while the visitor reads), so the legacy main offset creates a
   blank 72px band before the hero. Remove that dead space only for the
   landing route; report and authenticated surfaces retain their route-specific
   offsets. This is presentation-only and does not change reading order,
   anchors, identity, or authorization. */
body.landing-compact:not(.platform-mode) #main { padding-top: 0; }
body.landing-compact .site-header::after {
  background: linear-gradient(90deg, var(--public-violet), var(--public-cyan));
}
body.landing-compact .public-nav a::after {
  background: linear-gradient(90deg, var(--public-violet), var(--public-cyan));
}
body.landing-compact .eyebrow { color: #c4b5fd; }
body.landing-compact .hero-copy h1 span {
  color: #c4b5fd;
  text-shadow: 0 0 28px rgba(167, 139, 250, .16);
}
body.landing-compact .button-primary {
  background: linear-gradient(135deg, #c0b0ff, #82e1ff 58%, #8797ff);
  box-shadow: 0 10px 28px rgba(129, 140, 248, .18);
}
body.landing-compact .button-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #d1c6ff, #a5e4ff 58%, #a5b4fc);
}
body.landing-compact .hero-grid::before {
  border-color: rgba(167, 139, 250, .16);
  background: radial-gradient(circle at 36% 52%, rgba(129, 140, 248, .1), transparent 54%);
  box-shadow: 0 0 90px rgba(99, 102, 241, .12), inset 0 0 70px rgba(167, 139, 250, .07);
}
body.landing-compact .signal-panel {
  border-color: rgba(165, 180, 252, .3);
  box-shadow: 0 36px 92px rgba(1, 5, 20, .4), 0 0 0 1px rgba(167, 139, 250, .05), inset 0 1px 0 rgba(231, 234, 255, .08);
}
body.landing-compact .signal-panel::after {
  background: linear-gradient(90deg, #a78bfa, #7dd3fc 52%, #818cf8);
  box-shadow: 0 0 22px rgba(167, 139, 250, .2);
}
/* v3.0 stage-aware hero field (2028.03.01): the public walkthrough carries a
   restrained visual emphasis from intake through resolution. The stage is an
   authored presentation index set by the bounded scroll/keyboard renderer; it
   is never tenant state, evidence, authorization, or an automated decision.
   Keep the transition on the isolated atmospheric layer so the workspace stays
   the single readable foreground surface and reduced-motion users retain the
   same color hierarchy without animation. */
body.landing-compact:not(.platform-mode) #landing-view .hero-field-ambient {
  transition: background .7s cubic-bezier(.16, 1, .3, 1), border-color .7s ease,
    box-shadow .7s ease, opacity .7s ease;
}
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="1"] .hero-field-ambient {
  border-color: rgba(125, 211, 252, .1);
}
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="2"] .hero-field-ambient {
  border-color: rgba(240, 157, 112, .14);
  background:
    radial-gradient(ellipse at 56% 46%, rgba(125, 211, 252, .11), transparent 38%),
    radial-gradient(ellipse at 72% 63%, rgba(240, 157, 112, .13), transparent 56%),
    conic-gradient(from 210deg at 54% 50%, transparent 0deg, rgba(125, 211, 252, .1) 42deg, transparent 78deg, rgba(240, 157, 112, .09) 124deg, transparent 174deg);
}
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="3"] .hero-field-ambient {
  border-color: rgba(139, 211, 177, .14);
  background:
    radial-gradient(ellipse at 56% 46%, rgba(139, 211, 177, .13), transparent 38%),
    radial-gradient(ellipse at 72% 63%, rgba(125, 211, 252, .1), transparent 56%),
    conic-gradient(from 210deg at 54% 50%, transparent 0deg, rgba(139, 211, 177, .11) 42deg, transparent 78deg, rgba(125, 211, 252, .08) 124deg, transparent 174deg);
}
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="4"] .hero-field-ambient {
  border-color: rgba(167, 139, 250, .16);
  background:
    radial-gradient(ellipse at 56% 46%, rgba(167, 139, 250, .14), transparent 38%),
    radial-gradient(ellipse at 72% 63%, rgba(139, 211, 177, .1), transparent 56%),
    conic-gradient(from 210deg at 54% 50%, transparent 0deg, rgba(167, 139, 250, .12) 42deg, transparent 78deg, rgba(139, 211, 177, .08) 124deg, transparent 174deg);
}
body.landing-compact .signal-stage-marker {
  border-color: rgba(167, 139, 250, .36);
  color: #c4b5fd;
  background: rgba(129, 140, 248, .06);
}
body.landing-compact .surface-label { color: #9aa8c4; }

/* v3.0 feedback reachability pass (2027.12.26): the release-triggered
   feedback form is intentionally a dialog, but its optional screenshot and
   contact fields can extend beyond a short viewport. Keep the sole submit
   action in a quiet sticky footer while the visitor scrolls the same dialog.
   This is presentation-only: consent, Turnstile, validation, and submission
   authority remain unchanged. */
.feedback-dialog-shell .feedback-submit-bar {
  position: sticky;
  z-index: 2;
  right: 0;
  bottom: -1px;
  display: flex;
  justify-content: flex-end;
  margin: 6px -14px -8px;
  padding: 8px 14px;
  border-top: 1px solid rgba(165, 180, 252, .18);
  background: linear-gradient(180deg, rgba(14, 22, 35, .76), rgba(10, 17, 28, .98) 42%);
  box-shadow: 0 -16px 24px rgba(8, 14, 25, .72);
}
.feedback-dialog-shell .feedback-submit-bar .button[type="submit"] {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(165, 180, 252, .3);
  background: linear-gradient(135deg, rgba(129, 140, 248, .98), rgba(125, 211, 252, .98));
  box-shadow: 0 8px 20px rgba(50, 73, 150, .2);
}
.feedback-dialog-shell .feedback-submit-bar .button[type="submit"]:hover:not(:disabled),
.feedback-dialog-shell .feedback-submit-bar .button[type="submit"]:focus-visible {
  background: linear-gradient(135deg, #c4b5fd, #a5e4ff);
}
@media (prefers-reduced-motion: reduce) {
  .feedback-dialog-shell .feedback-submit-bar .button[type="submit"] { transition: none; }
}
/* v3.0 mobile feedback reading boundary (2026.08.27 / CalVer 2028.08.125):
   keep the submit action in normal form flow on phones. The desktop sticky
   footer is useful on a tall form, but its gradient covered the Visual context
   label and helper text in the phone opening view. Mobile users still reach
   the same submit action after the fields, without losing any input or state. */
@media (max-width: 680px) {
  .feedback-dialog,
  .feedback-dialog-shell { max-height: min(720px, calc(100vh - 44px)); }
  .feedback-dialog-shell .feedback-submit-bar {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    margin-bottom: 0;
    box-shadow: none;
  }
  /* The mobile submit action returns to normal flow, so do not retain the
     desktop footer's reserved scroll space. */
  .feedback-dialog-shell { padding-bottom: 29px; }
  /* Keep the two visual-context actions equal, full-width touch targets on
     phones. This removes the accidental wrap imbalance without changing
     screenshot capture, upload, consent, or submission semantics. */
  .feedback-dialog-shell .feedback-screenshot-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feedback-dialog-shell .feedback-screenshot-actions .button {
    width: 100%;
    padding-inline: 8px;
  }
}
@media (max-width: 360px) {
  .feedback-dialog-shell .feedback-screenshot-actions {
    grid-template-columns: 1fr;
  }
}
body.landing-compact .landing-journey {
  border-color: rgba(165, 180, 252, .32);
  background: linear-gradient(135deg, rgba(18, 22, 48, .7), rgba(8, 14, 28, .52));
}
/* v3.0 journey-cue refinement (2028.05.30): keep the authored stage cue quiet
   and readable without competing with the Response Workspace. */
body.landing-compact:not(.platform-mode) .landing-journey {
  border-width: 0 0 0 1px;
  border-radius: 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(13, 24, 45, .74), rgba(13, 24, 45, .16));
  box-shadow: none;
  backdrop-filter: none;
  opacity: .9;
}
body.landing-compact:not(.platform-mode) .landing-journey::before {
  border-radius: 0;
  background: linear-gradient(90deg, rgba(125, 211, 252, .08), transparent 78%);
}
/* v3.0 narrow-hero clarity (2028.08.214): at the minimum supported phone
   width the authored journey cue is redundant with the headline and signal
   surface, and its live status box competes with the first-read promise.
   Remove only this decorative presentation layer below 360px; the semantic
   status remains available in the DOM and no tenant state or authority is
   changed. */
@media (max-width: 360px) {
  body.landing-compact:not(.platform-mode) .hero-grid > .landing-journey {
    display: none;
  }
  /* The compact phone frame already shows the authored response brief below;
     defer the duplicate clickable lineage rail until the full workspace. */
  body.landing-compact:not(.platform-mode) .signal-panel .workspace-lineage {
    display: none;
  }
}
body.landing-compact .hero-metric {
  border-color: rgba(165, 180, 252, .2);
  background: rgba(18, 22, 44, .54);
}
body.landing-compact .hero-metric::before {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .58), transparent);
}
body.landing-compact .hero-metric:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .62), transparent);
}
body.landing-compact .hero-metric:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, .62), transparent);
}
/* v3.0 stage-linked outcome emphasis (2028.05.31): as the authored
   walkthrough advances, one outcome tile quietly picks up the same lane
   signal as the workspace. This is a visual index only; it never reports live
   tenant metrics or an automated decision. */
body.landing-compact:not(.platform-mode) .hero-metric {
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1), background .45s ease;
}
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="1"] .hero-metric:nth-child(1),
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="2"] .hero-metric:nth-child(2),
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="3"] .hero-metric:nth-child(2),
body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage="4"] .hero-metric:nth-child(3) {
  border-color: rgba(165, 180, 252, .48);
  background: linear-gradient(145deg, rgba(31, 36, 76, .72), rgba(16, 20, 42, .78));
  box-shadow: 0 12px 30px rgba(99, 102, 241, .13), inset 0 1px 0 rgba(231, 234, 255, .1);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-metric { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  body.landing-compact:not(.platform-mode) #landing-view[data-journey-stage] .hero-metric { transform: none; }
}
body.landing-compact .hero-context-link {
  background: linear-gradient(90deg, rgba(125, 211, 252, .05), rgba(167, 139, 250, .52), rgba(129, 140, 248, .2), transparent);
  box-shadow: 0 0 12px rgba(167, 139, 250, .14);
}
body.landing-compact .hero-context-node-release {
  border-color: rgba(165, 180, 252, .82);
  background: #27264a;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .06), 0 0 20px rgba(167, 139, 250, .26);
}
body.landing-compact .signal-art::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .1) 18%, rgba(196, 181, 253, .72) 48%, rgba(125, 211, 252, .42) 72%, transparent);
  box-shadow: 0 0 18px rgba(167, 139, 250, .22), 0 0 42px rgba(125, 211, 252, .14);
}

/* v3.0 cinematic hero field (2028.08.168; focal-light pass 2028.08.686): treat the supplied product-security
   artwork, ambient gradients, and response topology as one continuous stage.
   This is paint-only: it adds no DOM, network request, tenant signal, or
   authority meaning. The workspace remains the sole readable foreground. */
body.landing-compact:not(.platform-mode) .hero-grid {
  background-color: #0b0f18;
  background-image:
    radial-gradient(ellipse at 79% 21%, rgba(126, 211, 252, .14), transparent 34%),
    radial-gradient(ellipse at 72% 78%, rgba(167, 139, 250, .11), transparent 42%),
    linear-gradient(90deg, rgba(8, 12, 20, .92) 0%, rgba(10, 16, 27, .7) 42%, rgba(8, 12, 20, .2) 100%),
    linear-gradient(118deg, transparent 0 48%, rgba(122, 190, 232, .08) 48.15%, transparent 48.35%),
    repeating-linear-gradient(90deg, rgba(151, 201, 232, .035) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(151, 201, 232, .025) 0 1px, transparent 1px 84px),
    image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
  background-position: center, center, center, center, 0 0, 0 0, right center;
  background-size: 130% 130%, 125% 125%, cover, cover, 84px 84px, 84px 84px, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}
body.landing-compact:not(.platform-mode) .hero-grid::after {
  animation: heroSecurityFieldRotate 34s linear infinite;
  transform-origin: 50% 50%;
}

/* v3.0 gallery surface finish (2028.08.170): make the selected product view
   read as a deliberate interface surface instead of a static image caption.
   The rail is presentation-only and follows the existing spotlight state. */
body.landing-compact:not(.platform-mode) .product-shot.is-spotlight figcaption {
  position: relative;
  margin-top: 14px;
  padding: 13px 12px 1px;
  border-left: 2px solid rgba(125, 211, 252, .62);
  background: linear-gradient(90deg, rgba(24, 46, 69, .34), transparent 70%);
}
body.landing-compact:not(.platform-mode) .product-shot.is-spotlight figcaption::before {
  position: absolute;
  top: 0;
  left: 12px;
  width: 82px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 157, 112, .85), rgba(125, 211, 252, .5), transparent);
  content: "";
}
body.landing-compact:not(.platform-mode) .product-shot.is-spotlight figcaption strong {
  letter-spacing: .01em;
}
@media (prefers-reduced-transparency: reduce) {
  body.landing-compact:not(.platform-mode) .product-shot.is-spotlight figcaption {
    background: #172b40;
  }
}
@keyframes heroSecurityFieldRotate {
  from { transform: rotate(0deg) scale(1); opacity: .82; }
  to { transform: rotate(360deg) scale(1.04); opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-grid::after {
    animation: none;
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.landing-compact:not(.platform-mode) .hero-grid {
    background-image:
      linear-gradient(90deg, rgba(8, 12, 20, .96), rgba(8, 12, 20, .76) 52%, rgba(8, 12, 20, .42)),
      image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
    background-position: center, right center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }
}

/* v3.0 hero glass-depth pass (2027.10.25): let the product surface sit over
   the security field instead of flattening it into an opaque card. This is a
   presentation-only layer: it uses no tenant state, network request, or
   authority signal. The solid fallback preserves legibility where blur is
   unavailable, and reduced-motion users receive the same static composition. */
body.landing-compact:not(.platform-mode) .signal-panel {
  background:
    linear-gradient(145deg, rgba(18, 37, 59, .76), rgba(7, 13, 24, .88)),
    rgba(8, 15, 27, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}
body.landing-compact:not(.platform-mode) .signal-art {
  opacity: .74;
}
body.landing-compact:not(.platform-mode) .signal-header,
body.landing-compact:not(.platform-mode) .signal-intro,
body.landing-compact:not(.platform-mode) .proof-line {
  position: relative;
  z-index: 1;
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .signal-panel {
    background:
      linear-gradient(145deg, rgba(16, 32, 53, .82), rgba(7, 13, 24, .92)),
      rgba(8, 15, 27, .95);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
  }
  body.landing-compact:not(.platform-mode) .signal-art { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .signal-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* v3.0 lifecycle accent: the public preview can show where the authored
   walkthrough is pointing without pretending to be live tenant state. The
   same bounded stage index already drives the copy; these restrained colors
   make that progression perceptible without adding another visual system. */
.signal-panel[data-journey-stage="1"] { --workspace-accent-rgb: 130, 193, 236; }
.signal-panel[data-journey-stage="2"] { --workspace-accent-rgb: 254, 171, 124; }
.signal-panel[data-journey-stage="3"] { --workspace-accent-rgb: 167, 139, 250; }
.signal-panel[data-journey-stage="4"] { --workspace-accent-rgb: 139, 211, 177; }
body.landing-compact .signal-panel[data-journey-stage]::after {
  background: linear-gradient(90deg, rgb(var(--workspace-accent-rgb)), rgba(125, 211, 252, .82) 58%, rgba(129, 140, 248, .58));
  box-shadow: 0 0 22px rgba(var(--workspace-accent-rgb), .2);
}
body.landing-compact .signal-panel[data-journey-stage] .signal-stage-marker {
  position: relative;
  border-color: rgba(var(--workspace-accent-rgb), .38);
  color: rgb(var(--workspace-accent-rgb));
  background: rgba(var(--workspace-accent-rgb), .06);
}
/* v3.0 stage-aware frame marker: the authored workspace marker should read as a
   label attached to the product surface, not as a second navigation control.
   The bracket is presentation-only, follows the same bounded walkthrough
   accent, and has no live-state or tenant-data meaning. */
body.landing-compact .signal-panel[data-journey-stage] .signal-stage-marker::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-top: 1px solid rgba(var(--workspace-accent-rgb), .68);
  border-right: 1px solid rgba(var(--workspace-accent-rgb), .68);
  border-radius: 0 7px 0 0;
  box-shadow: 4px -4px 16px rgba(var(--workspace-accent-rgb), .12);
  content: "";
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact .signal-panel[data-journey-stage] .signal-stage-marker::after { box-shadow: none; }
}
/* v3.0 product-surface lift (2028.01.14): keep the response workspace
   visually distinct from the hero frame instead of letting its top border
   fuse with the outer perimeter. The inset is limited to the wide composition
   where there is room for the shadow to read; the phone handoff keeps its
   existing stack and touch rhythm. Presentation only: no state or authority
   is encoded by the offset. */
@media (max-width: 820px) {
  body.landing-compact:not(.platform-mode) .signal-panel {
    margin-top: -32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact .signal-art,
  body.landing-compact .signal-panel::after { animation: none; }
}

/* Authenticated workspace pass. This is intentionally CSS-only: once the
   server hands the user a workspace, the same visual vocabulary becomes a
   focused operating surface rather than a second application shell. */
body.platform-mode .workspace-shell {
  background:
    radial-gradient(ellipse 48% 34% at 82% 0%, rgba(83, 116, 255, .12), transparent 72%),
    linear-gradient(135deg, #090e1c 0%, #0c1220 48%, #101025 100%);
}
body.platform-mode .workspace-shell { animation: workspaceEnter .42s cubic-bezier(.16, 1, .3, 1) both; }
body.platform-mode .workspace-heading h1:focus { outline: 0; }
body.platform-mode .workspace-nav {
  border-right-color: rgba(118, 183, 238, .18);
  background:
    linear-gradient(rgba(118, 183, 238, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 183, 238, .025) 1px, transparent 1px),
    radial-gradient(circle at 16% 0%, rgba(80, 145, 255, .16), transparent 35%),
    #090e1a;
  background-size: 54px 54px, 54px 54px, auto, auto;
}
body.platform-mode .workspace-nav > div:first-child {
  padding-bottom: 20px;
  border-bottom-color: rgba(126, 210, 244, .2);
}
body.platform-mode #workspace-domain {
  color: #eef7ff;
  font-size: 1rem;
  letter-spacing: -.018em;
}
body.platform-mode .workspace-lifecycle,
body.platform-mode .workspace-priority {
  border-color: rgba(118, 183, 238, .2);
  box-shadow: inset 0 1px 0 rgba(225, 248, 255, .035), 0 18px 42px rgba(0, 0, 0, .12);
}
body.platform-mode .workspace-lifecycle {
  background: linear-gradient(145deg, rgba(20, 36, 58, .8), rgba(9, 16, 29, .8));
}
body.platform-mode .workspace-priority {
  border-color: rgba(240, 176, 113, .22);
  background: linear-gradient(145deg, rgba(40, 29, 38, .68), rgba(11, 18, 31, .72));
}
body.platform-mode .workspace-content {
  background:
    radial-gradient(ellipse 54% 30% at 78% 0%, rgba(92, 117, 255, .14), transparent 72%),
    linear-gradient(180deg, rgba(18, 29, 49, .54), rgba(8, 13, 23, .18) 54%, transparent);
}
body.platform-mode .workspace-content::before {
  background-image: linear-gradient(rgba(118, 183, 238, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 183, 238, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .82), transparent 70%);
}
body.platform-mode .workspace-heading h1 {
  max-width: 720px;
  text-wrap: balance;
  text-shadow: 0 14px 42px rgba(0, 0, 0, .3);
}
body.platform-mode .workspace-heading p:last-child { max-width: 650px; }
body.platform-mode .metric {
  border-color: rgba(118, 183, 238, .2);
  background: linear-gradient(145deg, rgba(20, 34, 54, .8), rgba(9, 15, 27, .9));
  box-shadow: inset 0 1px 0 rgba(228, 249, 255, .035), 0 16px 34px rgba(0, 0, 0, .12);
}
body.platform-mode .metric span { color: #94abc1; }
body.platform-mode .metric strong { color: #f2f8fd; font-size: 2rem; }
body.platform-mode .workspace-focus-brief {
  border-color: rgba(133, 218, 245, .34);
  background:
    radial-gradient(circle at 92% 0, rgba(119, 143, 255, .2), transparent 34%),
    linear-gradient(132deg, rgba(21, 40, 62, .94), rgba(10, 18, 31, .96));
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .06), 0 26px 60px rgba(0, 0, 0, .2);
}
body.platform-mode .workspace-focus-brief::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, #78e1d1 25%, #7ccfff 68%, transparent);
  box-shadow: 0 0 20px rgba(120, 225, 209, .3);
}
body.platform-mode .workspace-focus-brief.is-empty {
  border-color: rgba(117, 224, 194, .34);
  background:
    radial-gradient(circle at 92% 0, rgba(117, 224, 194, .14), transparent 34%),
    linear-gradient(132deg, rgba(19, 47, 52, .82), rgba(10, 20, 30, .96));
}
body.platform-mode .workspace-focus-brief.is-empty::before {
  background: linear-gradient(90deg, transparent, #77e2d1 24%, #7bcfff 68%, transparent);
}
body.platform-mode .workspace-focus-brief.is-empty .eyebrow { color: #9de8d5; }
body.platform-mode .workspace-focus-brief.is-empty .workspace-focus-facts dd { color: #b8e8d9; }
body.platform-mode .workspace-focus-main .eyebrow { color: #8fe3d3; }
body.platform-mode .workspace-focus-state { border-color: rgba(126, 207, 244, .28); color: #b8e7f6; background: rgba(126, 207, 244, .08); }
body.platform-mode .workspace-focus-brief.is-empty .workspace-focus-state { border-color: rgba(117, 224, 194, .3); color: #b1ead5; background: rgba(117, 224, 194, .08); }
body.platform-mode .workspace-focus-main h2 { color: #f7fcff; text-wrap: balance; }
body.platform-mode .workspace-focus-facts { border-left-color: rgba(126, 207, 244, .2); }
body.platform-mode .workspace-focus-facts dd { color: #e8f4fb; }
body.platform-mode .first-run-guide,
body.platform-mode .onboarding-path-card {
  border-color: rgba(126, 207, 244, .24);
  background: linear-gradient(135deg, rgba(17, 36, 56, .8), rgba(9, 17, 29, .9));
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .035), 0 22px 52px rgba(0, 0, 0, .12);
}
body.platform-mode .first-run-guide .section-heading h2,
body.platform-mode .onboarding-path-card .section-heading h2 { color: #eef8ff; }
body.platform-mode .first-run-boundary { color: #a7c1d2; }
body.platform-mode .nav-assurance {
  border-color: rgba(126, 207, 244, .2);
  background: linear-gradient(140deg, rgba(34, 64, 88, .42), rgba(10, 18, 31, .72));
}
@media (max-width: 680px) {
  body.platform-mode .workspace-content { padding-top: 32px; }
  body.platform-mode .workspace-heading h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  body.platform-mode .workspace-focus-brief { padding: 21px 19px; }
  body.platform-mode .metric strong { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-shell { animation: none; }
  body.platform-mode .workspace-focus-brief::before { box-shadow: none; }
}

/* v3.0 workspace palette continuation: structure uses the same calm
   indigo/violet/slate glass as the public route. Amber, red, and green remain
   reserved for actual attention, exploitation, readiness, and integrity
   states. This is scoped presentation only; it adds no runtime work. */
body.platform-mode {
  --workspace-violet: #a78bfa;
  --workspace-indigo: #818cf8;
  --workspace-cyan: #7dd3fc;
}
body.platform-mode .button-primary {
  background: linear-gradient(135deg, #b7a5ff, #7dd3fc 58%, #818cf8);
  color: #07121e;
  box-shadow: 0 10px 28px rgba(129, 140, 248, .16);
}
body.platform-mode .button-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #d1c6ff, #a5e4ff 58%, #a5b4fc);
}
body.platform-mode .workspace-nav::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .62) 30%, rgba(125, 211, 252, .3) 78%, transparent);
}
body.platform-mode .workspace-nav > div:first-child::after {
  background: var(--workspace-violet);
  box-shadow: 0 0 12px rgba(167, 139, 250, .34);
}
body.platform-mode .workspace-content::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .56) 22%, rgba(125, 211, 252, .28) 68%, transparent);
}
body.platform-mode .workspace-heading::after {
  background: linear-gradient(90deg, rgba(167, 139, 250, .62), rgba(125, 211, 252, .2) 48%, transparent 86%);
}
body.platform-mode .workspace-panel#review-panel > .metric-row .metric::before {
  background: linear-gradient(90deg, rgba(167, 139, 250, .72), rgba(125, 211, 252, .18));
}
body.platform-mode .workspace-focus-brief::before {
  background: linear-gradient(90deg, transparent, var(--workspace-violet) 25%, var(--workspace-cyan) 68%, transparent);
  box-shadow: 0 0 20px rgba(167, 139, 250, .2);
}
body.platform-mode .workspace-focus-main .eyebrow { color: #c4b5fd; }
body.platform-mode .first-run-guide::before {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .72), transparent);
}
body.platform-mode .first-run-guide::after {
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .72), rgba(167, 139, 250, .76), transparent);
  box-shadow: 0 0 14px rgba(125, 211, 252, .2);
}
body.platform-mode .first-run-grid::before {
  background: linear-gradient(90deg, rgba(167, 139, 250, .54), rgba(125, 211, 252, .24));
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .first-run-guide::after { animation: none; }
}

/* v3.0 first-move rail pass (2027.10.26): the record-derived next move needs
   to read as a deliberate action, not just a brighter card in a three-column
   list. The accent is derived from the existing `is-primary` presentation
   state; it never changes permission, ordering, or workspace truth. */
body.platform-mode .first-run-grid article.is-primary {
  border-color: rgba(125, 211, 252, .56);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, .14), rgba(17, 30, 48, .56)),
    rgba(9, 17, 29, .76);
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .055), 0 18px 38px rgba(2, 8, 22, .18);
}
body.platform-mode .first-run-grid article.is-primary::before {
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--workspace-cyan) 24%, var(--workspace-violet) 76%, transparent);
  box-shadow: 0 0 16px rgba(125, 211, 252, .22);
  content: "";
  pointer-events: none;
}

/* v3.0 response-desk lane focus (2028.07.15): carry the already-derived
   attention lane into the first focus card so an operator can orient before
   reading the queue. This is a presentation bridge only; the lane remains
   server-derived and no color implies permission, severity, or disposition. */
body.platform-mode .workspace-focus-brief[data-focus-lane="approval"] {
  border-color: rgba(240, 197, 121, .42);
  background:
    radial-gradient(circle at 92% 0, rgba(240, 197, 121, .15), transparent 36%),
    linear-gradient(132deg, rgba(45, 37, 29, .92), rgba(12, 19, 30, .97));
  box-shadow: inset 3px 0 0 rgba(240, 197, 121, .72), inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(4, 8, 14, .18);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="approval"]::before {
  background: linear-gradient(90deg, transparent, #f0c579 28%, #b8d7ff 72%, transparent);
  box-shadow: 0 0 18px rgba(240, 197, 121, .2);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="approval"] .workspace-focus-state {
  border-color: rgba(240, 197, 121, .38);
  color: #ffe1a8;
  background: rgba(240, 197, 121, .1);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="timeline"] {
  border-color: rgba(125, 211, 252, .42);
  background:
    radial-gradient(circle at 92% 0, rgba(125, 211, 252, .16), transparent 36%),
    linear-gradient(132deg, rgba(18, 42, 60, .92), rgba(10, 19, 31, .97));
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, .72), inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(4, 8, 14, .18);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="timeline"]::before {
  background: linear-gradient(90deg, transparent, #7dd3fc 28%, #a78bfa 72%, transparent);
  box-shadow: 0 0 18px rgba(125, 211, 252, .2);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="timeline"] .workspace-focus-state {
  border-color: rgba(125, 211, 252, .38);
  color: #c4efff;
  background: rgba(125, 211, 252, .1);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="exploitation"] {
  border-color: rgba(232, 121, 103, .46);
  background:
    radial-gradient(circle at 92% 0, rgba(232, 121, 103, .16), transparent 36%),
    linear-gradient(132deg, rgba(50, 29, 34, .92), rgba(12, 18, 30, .97));
  box-shadow: inset 3px 0 0 rgba(232, 121, 103, .76), inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(4, 8, 14, .18);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="exploitation"]::before {
  background: linear-gradient(90deg, transparent, #e87967 28%, #f0c579 72%, transparent);
  box-shadow: 0 0 18px rgba(232, 121, 103, .2);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="exploitation"] .workspace-focus-state {
  border-color: rgba(232, 121, 103, .42);
  color: #ffd0c5;
  background: rgba(232, 121, 103, .1);
}
body.platform-mode .workspace-focus-brief[data-focus-lane="setup"] {
  box-shadow: inset 3px 0 0 rgba(126, 207, 244, .64), inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(4, 8, 14, .18);
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-focus-brief[data-focus-lane]::before { box-shadow: none; }
}

/* v3.0 mobile response-desk rhythm (2028.07.17): at phone widths where the
   two heading actions have room to breathe, keep them in one row so the first
   accountable-action card arrives sooner. The 44px minimum preserves touch
   access; the existing stacked layout remains the fallback below 360px. */
@media (min-width: 360px) and (max-width: 680px) {
  body.platform-mode .workspace-heading-actions {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
  }
  body.platform-mode .workspace-heading-actions .button {
    min-height: 44px;
    padding-inline: 10px;
  }
}
body.platform-mode .first-run-grid article.is-primary h3 { color: #f2faff; }
body.platform-mode .first-run-grid article.is-primary .button {
  border-color: rgba(125, 211, 252, .5);
  color: #07121e;
  background: linear-gradient(135deg, #b7a5ff, #7dd3fc 58%, #818cf8);
  box-shadow: 0 8px 18px rgba(56, 189, 248, .12);
}
body.platform-mode .first-run-grid article.is-primary .button:hover:not(:disabled),
body.platform-mode .first-run-grid article.is-primary .button:focus-visible {
  border-color: rgba(230, 251, 255, .72);
  background: linear-gradient(135deg, #d1c6ff, #a5e4ff 58%, #a5b4fc);
}
@media (max-width: 680px) {
  body.platform-mode .first-run-grid article.is-primary {
    box-shadow: inset 0 1px 0 rgba(230, 251, 255, .055), 0 12px 26px rgba(2, 8, 22, .16);
  }
  body.platform-mode .first-run-grid article.is-primary::before { right: 12px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .first-run-grid article.is-primary { box-shadow: inset 0 1px 0 rgba(230, 251, 255, .055); }
}

/* v3.0 first-run hierarchy pass (CalVer 2028.08.85): give the existing
   record-derived primary step a little physical presence so the operator can
   scan the next move immediately. This changes no order, copy, permission,
   or completion state. */
body.platform-mode .first-run-grid article {
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease;
}
body.platform-mode .first-run-grid article.is-primary {
  transform: translateY(-3px);
}
body.platform-mode .first-run-grid article.is-primary:hover,
body.platform-mode .first-run-grid article.is-primary:focus-within {
  transform: translateY(-5px);
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .07), 0 24px 46px rgba(2, 8, 22, .26);
}
@media (max-width: 680px) {
  body.platform-mode .first-run-grid article.is-primary { transform: none; }
  body.platform-mode .first-run-grid article.is-primary:hover,
  body.platform-mode .first-run-grid article.is-primary:focus-within { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .first-run-grid article { transition: none; }
  body.platform-mode .first-run-grid article.is-primary,
  body.platform-mode .first-run-grid article.is-primary:hover,
  body.platform-mode .first-run-grid article.is-primary:focus-within { transform: none; }
}

/* v3.0 mobile setup reach pass (2027.10.29): keep the three-step proof path
   visible while bringing the first source field into the opening touch frame.
   This is a density correction only; no setup stage, claim, or authority is
   removed. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .early-access-panel {
    gap: 24px;
    padding:32px 18px;
  }
  body.landing-compact:not(.platform-mode) .setup-route {
    gap: 6px;
    margin-top: 22px;
  }
  body.landing-compact:not(.platform-mode) .setup-route li,
  body.landing-compact:not(.platform-mode) .setup-route li.is-current {
    min-height: 34px;
  }
  body.landing-compact:not(.platform-mode) .setup-form-shell { padding: 14px; }
}

/* v3.0 mobile release pill (2027.12.31): keep the CalVer feedback affordance
   legible as a compact bottom-right pill. It remains outside the reading flow;
   click behavior, release notes, and feedback review are unchanged. */
@media (max-width: 680px) {
  .release-badge {
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    min-height: 44px;
    padding: 4px 5px;
    border-radius: 999px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: .05em;
    font-size: .46rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  .release-badge::before { flex: 0 0 auto; width: 4px; height: 4px; }
  /* Preserve the compact visual pill inside the 44px interaction envelope. */
  .release-badge::after {
    position: absolute;
    z-index: -1;
    inset: 7px 0;
    border: 1px solid rgba(117, 185, 248, .3);
    border-radius: 999px;
    background: rgba(10, 16, 25, .82);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    content: "";
    pointer-events: none;
  }

  /* v3.0 focused setup clearance (2028.01.20): the fixed Overview return
     control occupies the 88–116px header band. The setup panel's compact
     22px padding placed its eyebrow at 111px, so it could sit beneath the
     control on a direct mobile link. Add clearance only to this focused
     panel; other chapters already carry a larger authored top rhythm. */
  body.landing-compact:not(.platform-mode).landing-detail-open #landing-view > .early-access-panel.is-detail-open {
    padding-top: 40px;
  }
  /* Keep the role-surface chapter on the same calm 12px minimum as setup.
     Its authored 32px top rhythm left the eyebrow only 6.7px below the
     fixed return control on a 390px direct link. */
  body.landing-compact:not(.platform-mode).landing-detail-open #landing-view > .customer-fit.is-detail-open {
    padding-top: 38px;
  }
}

/* v3.0 tablet handoff pass (2027.10.27): give the Response Desk heading and
   its actions one reading column before the narrow-screen breakpoint. This
   prevents the wide action row from competing with the decision brief at
   tablet widths; it does not alter routes, permissions, or state. */
@media (min-width: 681px) and (max-width: 980px) {
  body.platform-mode .workspace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  body.platform-mode .workspace-heading-actions {
    justify-content: flex-start;
    padding-top: 0;
  }
  body.platform-mode .workspace-heading-actions .button { min-height: 44px; }
}

/* v3.0 command-surface polish: the response desk should feel like one
   considered operating surface, not a heading followed by unrelated chips and
   buttons. The ambient field is pointer-inert and contains no inferred tenant
   data; the three boundary chips remain the literal, inspectable contract. */
body.platform-mode .workspace-heading {
  isolation: isolate;
  padding: 12px 18px 30px 0;
  border-bottom-color: rgba(126, 207, 244, .18);
}
body.platform-mode .workspace-heading::before {
  position: absolute;
  z-index: -1;
  top: -34px;
  right: -5%;
  width: min(540px, 54%);
  height: 205px;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(125, 211, 252, .06) 34.2%, transparent 34.5%),
    radial-gradient(ellipse at 82% 16%, rgba(167, 139, 250, .16), transparent 66%);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 74%, transparent);
  content: "";
  pointer-events: none;
}
body.platform-mode .workspace-heading-actions {
  align-items: flex-start;
  padding-top: 0;
}
body.platform-mode .workspace-heading-actions .button {
  min-height: 44px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .06), 0 10px 24px rgba(0, 0, 0, .12);
}
body.platform-mode .workspace-assurance-strip {
  gap: 8px;
  margin-top: 21px;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 207, 244, .12);
}
body.platform-mode .workspace-assurance-strip span {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(126, 207, 244, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 42, 59, .48), rgba(11, 22, 37, .34));
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .035);
}
body.platform-mode .workspace-assurance-strip span[data-assurance="decision"] {
  border-color: rgba(167, 139, 250, .24);
  background: linear-gradient(135deg, rgba(50, 39, 84, .34), rgba(18, 22, 46, .28));
}
body.platform-mode .workspace-assurance-strip span[data-assurance="tenant"] {
  border-color: rgba(137, 211, 177, .24);
  background: linear-gradient(135deg, rgba(24, 62, 58, .34), rgba(12, 29, 37, .28));
}
body.platform-mode .workspace-assurance-strip i { box-shadow: 0 0 11px rgba(125, 211, 252, .32); }
body.platform-mode .workspace-assurance-strip span[data-assurance="decision"] i { box-shadow: 0 0 11px rgba(167, 139, 250, .3); }
body.platform-mode .workspace-assurance-strip span[data-assurance="tenant"] i { box-shadow: 0 0 11px rgba(137, 211, 177, .3); }
@media (max-width: 680px) {
  body.platform-mode .workspace-heading { padding: 4px 0 25px; }
  body.platform-mode .workspace-heading::before { right: -18%; width: 86%; height: 170px; opacity: .72; }
  body.platform-mode .workspace-assurance-strip { gap: 6px; margin-top: 18px; padding-top: 12px; }
  body.platform-mode .workspace-assurance-strip span { min-height: 27px; padding: 5px 8px; font-size: .48rem; letter-spacing: .045em; }
  body.platform-mode .workspace-heading-actions { display: grid; gap: 7px; }
  body.platform-mode .workspace-heading-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-heading::before { transform: none; }
}

/* v3.0 quiet-queue pass (2027.11.04): a new workspace should communicate
   readiness without presenting three empty counters as if they were work.
   The server-derived attention list still owns the meaning of every lane;
   this state only changes how an empty result is presented. */
body.platform-mode .workspace-priority[data-empty="true"] {
  border-color: rgba(125, 211, 252, .22);
  background: linear-gradient(145deg, rgba(17, 31, 47, .52), rgba(10, 17, 28, .64));
}
body.platform-mode .workspace-priority[data-empty="true"] .workspace-priority-list {
  display: none;
}
body.platform-mode .workspace-priority[data-empty="true"] > p {
  margin-bottom: 0;
  color: #9bb6ca;
}
/* v3.0 accessible empty-queue cue (2027.12.17): keep the ready state in the
   DOM so assistive technology receives the same truthful cue as sighted
   users. The client only mirrors the server-derived empty result. */
body.platform-mode .workspace-priority-empty {
  display: block;
  margin-top: 2px;
  color: #a9c2d4;
  font-size: .62rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  body.platform-mode .workspace-priority[data-empty="true"] {
    transition: none;
  }
}

/* v3.0 connected-surface polish: the walkthrough names three surfaces that
   share one response record. A quiet spine makes that handoff visible on
   desktop without introducing another control, request, or implied live
   relationship. Mobile keeps the existing horizontal rail and overflow cue. */
@media (min-width: 981px) {
  .product-gallery .gallery-sequence {
    position: relative;
    top: auto;
    bottom: auto;
    overflow: hidden;
  }
  .product-gallery .gallery-sequence::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 42%;
    left: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(117, 185, 248, .16), rgba(240, 157, 112, .6) 46%, rgba(137, 211, 177, .36));
    box-shadow: 0 0 12px rgba(117, 185, 248, .12);
    content: "";
    pointer-events: none;
  }
  .product-gallery .gallery-sequence a {
    z-index: 1;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(11, 18, 27, .92);
  }
  .product-gallery .gallery-sequence a::before {
    inset: -1px -2px;
    border-radius: 999px;
  }
  .product-gallery .gallery-sequence a::after { bottom: -8px; }
}

/* Setup/access handoff: the dialog is a continuation of the product field,
   not a generic browser form. No behavior or authority is introduced here. */
dialog#setup-dialog,
dialog#signin-dialog,
dialog#project-proof-info-dialog {
  border-color: rgba(127, 210, 244, .38);
  background:
    radial-gradient(ellipse 72% 42% at 100% 0%, rgba(92, 117, 255, .18), transparent 72%),
    linear-gradient(145deg, #111d31 0%, #0b1220 62%, #0d1020 100%);
  box-shadow: 0 36px 130px rgba(0, 0, 0, .76), 0 0 0 1px rgba(132, 221, 247, .04), inset 0 1px 0 rgba(229, 250, 255, .08);
}
dialog#setup-dialog::backdrop,
dialog#signin-dialog::backdrop,
dialog#project-proof-info-dialog::backdrop {
  background: linear-gradient(135deg, rgba(3, 6, 16, .82), rgba(8, 10, 25, .9));
  backdrop-filter: blur(14px) saturate(1.12);
}
#setup-dialog .dialog-shell,
#signin-dialog .dialog-shell,
#project-proof-info-dialog .dialog-shell,
#preview-correction-dialog .dialog-shell { position: relative; overflow: hidden; }
#setup-dialog .dialog-shell::before,
#signin-dialog .dialog-shell::before,
#project-proof-info-dialog .dialog-shell::before,
#preview-correction-dialog .dialog-shell::before {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  background: linear-gradient(90deg, #77e2d1, #7bcfff 54%, #a88cff);
  box-shadow: 0 0 22px rgba(119, 226, 209, .25);
  content: "";
  pointer-events: none;
}
#setup-dialog .dialog-header,
#signin-dialog .dialog-header,
#project-proof-info-dialog .dialog-header,
#preview-correction-dialog .dialog-header { position: relative; z-index: 1; }
#setup-dialog .dialog-header h2,
#signin-dialog .dialog-header h2,
#project-proof-info-dialog .dialog-header h2,
#preview-correction-dialog .dialog-header h2 { max-width: 470px; color: #f1f8ff; letter-spacing: -.045em; }
#setup-dialog .dialog-guidance,
#signin-dialog .dialog-guidance,
#project-proof-info-dialog .dialog-guidance { color: #b9c9d8; line-height: 1.68; }
#setup-dialog label[for="setup-email"] {
  display: grid;
  gap: 8px;
  color: #e9f3f8;
  font-size: .82rem;
  font-weight: 700;
}
#setup-dialog label[for="setup-email"] input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(126, 207, 244, .3);
  border-radius: 10px;
  padding: 12px 13px;
  color: #f5fbff;
  background: rgba(5, 13, 24, .72);
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .035);
}
#setup-dialog label[for="setup-email"] input:focus {
  border-color: #77e2d1;
  box-shadow: 0 0 0 3px rgba(119, 226, 209, .1), inset 0 1px 0 rgba(230, 251, 255, .06);
}
#setup-dialog label[for="setup-email"] .field-note { margin: -1px 0 0; color: #91aabd; font-size: .7rem; font-weight: 500; line-height: 1.45; }
#setup-dialog .setup-flow,
#signin-dialog .setup-flow {
  position: relative;
  gap: 7px;
  margin-top: 24px;
  padding-bottom: 3px;
}
#setup-dialog .setup-flow::before,
#signin-dialog .setup-flow::before {
  position: absolute;
  top: 12px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(119, 226, 209, .72), rgba(123, 207, 255, .42), rgba(168, 140, 255, .4));
  content: "";
  opacity: .72;
  pointer-events: none;
}
#setup-dialog .setup-flow li,
#signin-dialog .setup-flow li {
  z-index: 1;
  min-height: 67px;
  padding: 10px 11px 9px;
  border: 1px solid rgba(127, 188, 228, .16);
  border-radius: 10px;
  background: rgba(8, 17, 30, .48);
}
#setup-dialog .setup-flow li.is-current,
#signin-dialog .setup-flow li.is-current {
  border-color: rgba(119, 226, 209, .42);
  background: linear-gradient(145deg, rgba(58, 139, 130, .2), rgba(9, 20, 33, .66));
  box-shadow: 0 0 0 3px rgba(119, 226, 209, .055), inset 0 1px 0 rgba(225, 255, 249, .06);
}
#setup-dialog .setup-flow li.is-current::after,
#signin-dialog .setup-flow li.is-current::after { background: linear-gradient(90deg, #77e2d1, #7bcfff, transparent); opacity: 1; }
#setup-dialog .setup-flow li.is-complete,
#signin-dialog .setup-flow li.is-complete { border-color: rgba(137, 211, 177, .3); background: rgba(28, 79, 67, .2); }
#setup-dialog .setup-flow li span,
#signin-dialog .setup-flow li span { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(123, 207, 255, .48); border-radius: 50%; background: #101d30; color: #a8e6fa; }
#setup-dialog .setup-flow li.is-current span,
#signin-dialog .setup-flow li.is-current span { border-color: #77e2d1; background: rgba(119, 226, 209, .14); color: #baf9ea; box-shadow: 0 0 12px rgba(119, 226, 209, .2); }
#setup-dialog .setup-flow li strong,
#signin-dialog .setup-flow li strong { color: #dbeaf4; font-size: .69rem; }
#setup-dialog .setup-status-prominent {
  border-color: rgba(119, 226, 209, .42);
  background: linear-gradient(135deg, rgba(66, 163, 147, .17), rgba(17, 49, 57, .34));
  box-shadow: inset 0 1px 0 rgba(223, 255, 249, .06), 0 12px 28px rgba(0, 0, 0, .16);
}
#setup-dialog .setup-status-prominent[data-state="ready"],
#signin-dialog .setup-status-prominent[data-state="ready"] {
  border-color: rgba(131, 201, 239, .46);
  background: linear-gradient(135deg, rgba(56, 126, 171, .2), rgba(17, 35, 55, .5));
  box-shadow: inset 0 1px 0 rgba(219, 245, 255, .07), 0 12px 28px rgba(0, 0, 0, .16);
}
#setup-dialog .setup-status-prominent[data-state="ready"]::before,
#signin-dialog .setup-status-prominent[data-state="ready"]::before { color: #9bd7f3; }
#setup-dialog .setup-status-prominent.is-sent {
  border-color: #8be8d4;
  background: linear-gradient(135deg, rgba(84, 206, 180, .24), rgba(16, 55, 61, .48));
  box-shadow: 0 0 0 3px rgba(119, 226, 209, .12), 0 14px 34px rgba(20, 114, 102, .18);
}
#setup-dialog .dialog-actions,
#signin-dialog .dialog-actions,
#project-proof-info-dialog .dialog-actions { position: relative; z-index: 1; padding-top: 3px; }
#signin-dialog .sign-in-route-callout { position: relative; z-index: 1; }
#signin-dialog .sign-in-route-callout .text-button { min-height: 44px; padding: 0 9px; border: 1px solid rgba(125, 211, 252, .22); border-radius: 8px; color: #a8e6fa; background: rgba(125, 211, 252, .055); }
#setup-dialog .button-primary,
#signin-dialog .button-primary,
#project-proof-info-dialog .button-primary { background: linear-gradient(135deg, #77e2d1, #7bcfff 55%, #a88cff); color: #07121f; box-shadow: 0 10px 26px rgba(88, 205, 220, .16); }
#setup-dialog .button-primary:hover:not(:disabled),
#signin-dialog .button-primary:hover:not(:disabled),
#project-proof-info-dialog .button-primary:hover:not(:disabled) { background: linear-gradient(135deg, #9af3e2, #9bddff 55%, #c1b1ff); }
#signin-dialog .text-button {
  min-height: 44px;
  padding: 4px 9px;
  border: 1px solid rgba(119, 226, 209, .34);
  border-radius: 7px;
  color: #9bf0df;
  background: rgba(119, 226, 209, .07);
  font-size: .76rem;
  font-weight: 750;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
#signin-dialog .text-button:hover, #signin-dialog .text-button:focus-visible { color: #c4fff2; }
#signin-dialog .text-button:hover { border-color: rgba(119, 226, 209, .65); background: rgba(119, 226, 209, .14); text-decoration: none; }
#signin-dialog .text-button:focus-visible { outline: 2px solid #9bf0df; outline-offset: 2px; text-decoration: none; }
@media (max-width: 680px) {
  .sign-in-route-callout { align-items: flex-start; flex-direction: column; gap: 6px; }
  #signin-dialog .sign-in-route-callout .text-button { min-height: 44px; }
  #setup-dialog .dialog-actions .button,
  #signin-dialog .dialog-actions .button { min-height: 44px; }
  #signin-dialog .dialog-actions { flex-direction: column; }
  #signin-dialog .dialog-actions .button { width: 100%; }
  #setup-dialog .dialog-shell,
  #signin-dialog .dialog-shell,
  #project-proof-info-dialog .dialog-shell { padding: 21px 18px; }
  #setup-dialog .setup-flow,
  #signin-dialog .setup-flow { grid-template-columns: 1fr; gap: 6px; }
  #setup-dialog .setup-flow::before,
  #signin-dialog .setup-flow::before { top: 18px; right: auto; bottom: 18px; left: 21px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(119, 226, 209, .62), rgba(123, 207, 255, .3), rgba(168, 140, 255, .3)); }
  #setup-dialog .setup-flow li,
  #signin-dialog .setup-flow li { grid-template-columns: 28px minmax(0, 1fr); align-items: center; min-height: 49px; padding: 8px 10px; }
  #setup-dialog .setup-flow li span,
  #signin-dialog .setup-flow li span { width: 22px; height: 22px; }
  #setup-dialog .setup-flow li strong,
  #signin-dialog .setup-flow li strong { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  #setup-dialog .setup-status-prominent, #signin-dialog .setup-flow li { box-shadow: inset 0 1px 0 rgba(223, 255, 249, .06); }
}

/* v3.0 mobile secure-setup handoff (2028.02.21): preserve a visible,
   reviewable handoff from setup guidance to the authenticated workspace. */

@media (max-width: 680px) {
  #setup-dialog,
  #signin-dialog,
  #project-proof-info-dialog { overflow: hidden; }
  #setup-dialog .dialog-shell,
  #signin-dialog .dialog-shell,
  #project-proof-info-dialog .dialog-shell {
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 24px;
  }
}

@media (max-width: 360px) {
  body.landing-compact:not(.platform-mode) .hero-copy { padding-top: 14px; }
  body.landing-compact:not(.platform-mode) .eyebrow { margin-bottom: 12px; }
  body.landing-compact:not(.platform-mode) .hero-copy h1 {
    margin-bottom: 12px;
    font-size: 1.9rem;
    line-height: .86;
  }
  body.landing-compact:not(.platform-mode) .hero-lede {
    font-size: .9rem;
    line-height: 1.42;
  }
  #setup-dialog .dialog-shell,
  #signin-dialog .dialog-shell { padding: 14px 14px 12px; }
  #setup-dialog .dialog-header h2,
  #signin-dialog .dialog-header h2 { font-size: 1.8rem; line-height: 1; }
  #setup-dialog .dialog-guidance,
  #signin-dialog .dialog-guidance { font-size: .72rem; line-height: 1.45; }
  #signin-dialog .sign-in-route-callout {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding: 6px 8px;
    white-space: normal;
  }
  #signin-dialog .sign-in-route-callout > span { font-size: .66rem; }
  #signin-dialog .sign-in-route-callout .text-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 6px;
    font-size: .68rem;
  }
  #signin-dialog .sign-in-route-callout #signin-alt { width: 100%; }
  #signin-dialog .sign-in-flow { margin-bottom: 0; }
  #signin-dialog .sign-in-status-prominent {
    margin: 0 0 4px;
    padding: 4px 8px;
    font-size: .66rem;
    line-height: 1.2;
  }
  #setup-dialog .setup-flow { gap: 4px; margin-top: 14px; }
  #signin-dialog .setup-flow { gap: 3px; margin-top: 14px; }
  #setup-dialog .setup-flow li { min-height: 36px; padding: 5px 8px; }
  #signin-dialog .setup-flow li { min-height: 30px; padding: 4px 7px; }
  #setup-dialog .setup-status-prominent { margin: 7px 0 4px; padding: 6px 8px; font-size: .72rem; line-height: 1.28; }
  #setup-dialog .setup-status-prominent::before { display: block; }
  #setup-dialog .setup-status-prominent[data-state="ready"] { display: none; }
  #setup-dialog .setup-status-prominent.is-sent { margin: 10px 0; padding: 10px 12px; font-size: .86rem; line-height: 1.42; }
  #setup-dialog .dialog-actions,
  #signin-dialog .dialog-actions {
    position: sticky;
    right: -18px;
    bottom: -1px;
    left: -18px;
    z-index: 2;
    margin: 8px -14px -8px;
    padding: 8px 14px 8px;
    border-top: 1px solid rgba(125, 211, 252, .14);
    background: linear-gradient(180deg, rgba(11, 18, 32, .12), rgba(11, 18, 32, .98) 42%);
  }
  #signin-dialog .dialog-shell { padding-top: 17px; padding-bottom: 0; }
  #setup-dialog .dialog-actions, #signin-dialog .dialog-actions { position: static; margin: 16px 0 0; padding: 8px 0 0; background: none; }
  #signin-dialog .dialog-actions {
    position: sticky;
    right: -14px;
    bottom: -1px;
    left: -14px;
    z-index: 2;
    margin: 8px -14px -8px;
    padding: 8px 14px 8px;
    border-top: 1px solid rgba(125, 211, 252, .14);
    background: linear-gradient(180deg, rgba(11, 18, 32, .12), rgba(11, 18, 32, .98) 42%);
  }
  #setup-dialog .dialog-actions .button,
  #signin-dialog .dialog-actions .button { min-height: 44px; }
}

/* Reduced motion is a complete presentation mode, not just a canvas switch.
   Preserve the authored state, focus, and navigation cues while settling all
   decorative scans, pulses, parallax transitions, and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tablet navigation keeps the chapter story discoverable after the vertical
   rail is removed. Keep every destination touch-sized and let the rail scroll
   horizontally when the viewport cannot fit the full story without shrinking
   its labels into noise. Presentation only: no new runtime work or page copy. */
@media (min-width: 681px) and (max-width: 980px) {
  .chapter-rail { position: sticky; top: 0; right: auto; display: flex; justify-content: flex-start; gap: 8px; width: 100%; margin: 0; padding: 9px clamp(28px, 4vw, 48px); overflow-x: auto; border-bottom: 1px solid rgba(117, 185, 248, .16); background: rgba(12, 14, 19, .84); box-shadow: 0 12px 26px rgba(0, 0, 0, .16); scrollbar-width: none; backdrop-filter: blur(16px) saturate(1.06); transform: none; }
  .chapter-rail::-webkit-scrollbar { display: none; }
  .chapter-rail a { flex: 0 0 94px; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 94px; padding: 5px 6px; border: 1px solid transparent; border-radius: 999px; color: #718497; }
  .chapter-rail a::after { color: inherit; content: attr(data-chapter); font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
  .chapter-rail a::before { display: none; }
  .chapter-rail a i { flex: 0 0 auto; width: 6px; height: 6px; }
  .chapter-rail a:hover, .chapter-rail a:focus-visible, .chapter-rail a.is-active { border-color: rgba(117, 185, 248, .2); background: rgba(23, 39, 55, .5); transform: none; }
  .chapter-rail a.is-active { color: #edf5fa; }
  .chapter-rail a.is-active i { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* System-native focus fallback for Windows high-contrast and forced-colors
   modes. The branded rings remain the default, but accessibility settings
   must always win over decorative glass styling. */
@media (forced-colors: active) {
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible,
  .trust-story-grid article:focus-visible, .customer-fit-grid article:focus-visible,
  .operating-scale .scale-card:focus-visible, .services-grid article:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  /* Branded glows are intentionally suppressed by the system palette. Keep
     the selected public walkthrough stage discoverable without relying on
     color alone; this is presentation state, never tenant state. */
  .workspace-lineage-node[aria-pressed="true"] {
    outline: 1px solid Highlight;
    outline-offset: 3px;
    color: HighlightText;
  }
  .workspace-lineage-node[aria-pressed="true"] i {
    border-color: Highlight;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  .landing-journey,
  .signal-panel,
  .gallery-sequence,
  .product-gallery .gallery-state-chip,
  body.landing-compact:not(.platform-mode) .product-shot figcaption {
    border-color: ButtonText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .product-gallery [data-gallery-shot].is-spotlight .shot-window {
    border-color: Highlight;
    box-shadow: none;
  }
  .gallery-sequence a.is-active::before,
  .product-shot.is-spotlight::before {
    border-color: Highlight;
    background: transparent;
    box-shadow: none;
  }
}

/* v3.0 product-path polish: the walkthrough is navigation, not telemetry.
   Give its labels enough optical weight to be read as a product surface while
   keeping the rail compact, sticky, and free of new runtime work. The active
   treatment is a quiet focus cue; it does not change gallery state or access. */
.gallery-sequence a {
  font-size: .64rem;
  letter-spacing: .075em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .24);
}
.gallery-sequence a::before {
  position: absolute;
  z-index: -1;
  inset: -7px -10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  content: "";
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.gallery-sequence a:hover::before,
.gallery-sequence a:focus-visible::before {
  border-color: rgba(125, 211, 252, .2);
  background: rgba(125, 211, 252, .05);
}
.gallery-sequence a.is-active::before {
  border-color: rgba(167, 139, 250, .42);
  background: linear-gradient(135deg, rgba(167, 139, 250, .16), rgba(125, 211, 252, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(4, 8, 20, .14);
}
.gallery-sequence a.is-active::after { bottom: -10px; }
.gallery-status { font-size: .57rem; }
@media (max-width: 680px) {
  /* v3.0 mobile role-story rhythm: once the two-column intro collapses, do
     not carry the desktop gap into the single reading column. This removes
     dead air while keeping the role promise, scale action, and cards intact. */
  .customer-fit-intro { row-gap: 26px; }
  .customer-fit-intro-actions { gap: 14px; }
  .gallery-sequence a { font-size: .62rem; }
  .gallery-sequence a::before { inset: -6px -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-sequence a::before { transition: none; }
}

/* v3.0 seeded-gallery boundary (2027.11.05): realistic product screenshots
   are useful only when their status is visible at the point of use. This chip
   is a compact presentation cue, not a telemetry or capability claim. */
.gallery-state-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(167, 139, 250, .24);
  border-radius: 999px;
  color: #c4b5fd;
  background: rgba(129, 140, 248, .07);
  font: 700 .49rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gallery-state-chip::before {
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border: 1px solid rgba(196, 181, 253, .7);
  border-radius: 50%;
  background: rgba(167, 139, 250, .24);
  box-shadow: 0 0 8px rgba(167, 139, 250, .22);
  content: "";
}
.gallery-state-chip.is-refreshing { animation: galleryChipRefresh .52s cubic-bezier(.16, 1, .3, 1); }
.gallery-state-chip[data-surface="response-desk"] { border-color: rgba(117, 185, 248, .34); color: #b9dff8; background: rgba(117, 185, 248, .08); }
.gallery-state-chip[data-surface="response-desk"]::before { border-color: rgba(117, 185, 248, .72); background: rgba(117, 185, 248, .24); box-shadow: 0 0 8px rgba(117, 185, 248, .28); }
.gallery-state-chip[data-surface="case-room"] { border-color: rgba(240, 157, 112, .36); color: #f4c0a1; background: rgba(240, 157, 112, .08); }
.gallery-state-chip[data-surface="case-room"]::before { border-color: rgba(240, 157, 112, .76); background: rgba(240, 157, 112, .24); box-shadow: 0 0 8px rgba(240, 157, 112, .28); }
.gallery-state-chip[data-surface="product-context"] { border-color: rgba(187, 164, 238, .34); color: #d2c5f7; background: rgba(187, 164, 238, .08); }
.gallery-state-chip[data-surface="product-context"]::before { border-color: rgba(187, 164, 238, .74); background: rgba(187, 164, 238, .24); box-shadow: 0 0 8px rgba(187, 164, 238, .28); }
@keyframes galleryChipRefresh {
  0% { border-color: rgba(125, 211, 252, .7); box-shadow: 0 0 0 0 rgba(125, 211, 252, .22); transform: translateY(1px); }
  100% { border-color: rgba(167, 139, 250, .24); box-shadow: 0 0 0 8px rgba(125, 211, 252, 0); transform: translateY(0); }
}
@media (max-width: 680px) {
  .gallery-state-chip { min-height: 40px; padding: 5px 8px; }
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode).deep-scroll #landing-view{padding-top:38px}
}
/* v3.0 mobile gallery reading boundary (2026.08.27 / CalVer 2028.08.124):
   keep the compact surface rail in document flow on phones. A sticky rail
   remained useful at desktop, but on a narrow scroll it covered the first
   rows of the selected screenshot and weakened the show-not-tell proof. The
   rail is still present and horizontally scrollable at gallery entry; this
   removes only the overlay behavior while preserving selection semantics. */
@media (max-width: 680px) {
  .product-gallery .gallery-sequence {
    position: relative;
    top: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-state-chip.is-refreshing { animation: none; }
}

/* v3.0 gallery lane signature: selected surface edge treatment only. */
.product-gallery[data-gallery-active="response-desk"] [data-gallery-shot="response-desk"].is-spotlight {
  --gallery-lane-accent: 117, 185, 248;
  --gallery-lane-secondary: 139, 211, 177;
}
.product-gallery[data-gallery-active="case-room"] [data-gallery-shot="case-room"].is-spotlight {
  --gallery-lane-accent: 240, 157, 112;
  --gallery-lane-secondary: 244, 194, 126;
}
.product-gallery[data-gallery-active="product-context"] [data-gallery-shot="product-context"].is-spotlight {
  --gallery-lane-accent: 187, 164, 238;
  --gallery-lane-secondary: 117, 185, 248;
}
.product-gallery [data-gallery-shot].is-spotlight .shot-window {
  border-color: rgba(var(--gallery-lane-accent, 117, 185, 248), .72);
  background:
    radial-gradient(circle at 84% 8%, rgba(var(--gallery-lane-accent, 117, 185, 248), .18), transparent 34%),
    linear-gradient(145deg, #1b2e44, #0b111b 74%);
  box-shadow: 0 36px 84px rgba(0, 0, 0, .34), 0 0 0 1px rgba(var(--gallery-lane-accent, 117, 185, 248), .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.product-gallery [data-gallery-shot].is-spotlight .shot-window::before {
  background: linear-gradient(90deg, transparent, rgba(var(--gallery-lane-accent, 117, 185, 248), .62), rgba(var(--gallery-lane-secondary, 139, 211, 177), .48), transparent);
}
.product-gallery [data-gallery-shot].is-spotlight figcaption::before {
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--gallery-lane-accent, 117, 185, 248)), rgba(var(--gallery-lane-secondary, 139, 211, 177), .72));
  box-shadow: 0 0 12px rgba(var(--gallery-lane-accent, 117, 185, 248), .28);
  content: "";
}
.product-gallery [data-gallery-shot].is-spotlight figcaption strong { color: rgb(var(--gallery-lane-secondary, 139, 211, 177)); }
@media (prefers-reduced-motion: reduce) {
  .product-gallery [data-gallery-shot].is-spotlight .shot-window::before { animation: none; }
}

/* v3.0 gallery caption anchor (2028.08.87): each interactive authored
   surface now has one visible caption anchor that also serves as its
   aria-describedby target. The selected surface gets a slightly stronger
   reading measure; supporting surfaces stay available without competing for
   attention. This is presentation-only and adds no state, request, or cost. */
.product-gallery [data-gallery-shot] figcaption {
  min-height: 58px;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.product-gallery [data-gallery-shot]:not(.is-spotlight) figcaption {
  opacity: .74;
  transform: translateY(1px);
}
.product-gallery [data-gallery-shot].is-spotlight figcaption {
  opacity: 1;
  transform: translateY(0);
}
.product-gallery [data-gallery-shot].is-spotlight figcaption span {
  max-width: 46ch;
  color: #c5d1dc;
}
@media (max-width: 680px) {
  .product-gallery [data-gallery-shot] figcaption { min-height: 52px; }
  .product-gallery [data-gallery-shot].is-spotlight figcaption span { max-width: 38ch; }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery [data-gallery-shot] figcaption { transition: none; }
}

/* v3.0 empty-state readiness cue (2028.08.88): the Response Desk empty
   state already suppresses unsupported zero metrics. Add one non-color shape
   to the existing status pill so “awaiting direction” is scannable before a
   visitor reads the label. The ring is presentation-only; its source remains
   the server-derived `data-focus-state` attribute and it grants no authority. */
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-state::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 3px rgba(117, 224, 194, .08), 0 0 10px rgba(117, 224, 194, .3);
  content: "";
}
@media (prefers-reduced-motion: reduce) {
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-state::before { box-shadow: none; }
}

/* v3.0 workspace navigation rhythm (2028.08.89): priority lanes and view
   tabs are two levels of one operating shell, not unrelated controls. Reduce
   the desktop dead band and add a quiet divider so the next navigation layer
   arrives as a deliberate continuation. Mobile keeps its existing compact
   overflow rail and touch geometry. Presentation-only; no route, role, or
   authorization semantics change. */
@media (min-width: 981px) {
  body.platform-mode .workspace-nav .nav-tabs {
    position: relative;
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid rgba(125, 211, 252, .12);
  }
  body.platform-mode .workspace-nav .nav-tabs::before {
    position: absolute;
    top: -1px;
    right: 18%;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(167, 139, 250, .56), rgba(125, 211, 252, .2), transparent);
    content: "";
    pointer-events: none;
  }
}

/* v3.0 instrument-surface depth (2028.09.08): give the hero workspace a
   measured physical presence on pointer-capable screens. The lift is a
   presentation-only hover affordance; it does not encode tenant state,
   severity, authorization, or telemetry. Touch and reduced-motion users keep
   the same readable, static surface. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.landing-compact:not(.platform-mode) .signal-panel:hover {
    transform: perspective(1100px) rotateX(.35deg) rotateY(-.45deg) translateY(-3px);
    transform-origin: 58% 42%;
  }
}

/* v3.0 mobile release gutter (2027.12.16): reserve a quiet edge beside the
   narrow Response Workspace so the fixed CalVer control remains reachable
   without covering its content. The gutter changes only presentation width;
   release-dialog behavior, touch target, and public reading order stay intact. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .signal-panel {
    margin-right: 18px;
  }
}

body.landing-compact:not(.platform-mode) .hero-grid {
  /* v3.0 hero atmosphere luminance pass (2028.06.28): lift the supplied
     product-security field just enough to read as part of the experience
     while preserving copy contrast and the workspace as the foreground. */
  border-color: rgba(165, 180, 252, .12);
  background-image:
    radial-gradient(ellipse 44% 58% at 84% 48%, rgba(93, 191, 236, .16), transparent 72%),
    linear-gradient(90deg, rgba(7, 11, 22, .95) 0%, rgba(7, 11, 22, .78) 30%, rgba(7, 11, 22, .36) 67%, rgba(7, 11, 22, .1) 100%),
    linear-gradient(180deg, rgba(125, 211, 252, .06), transparent 42%, rgba(167, 139, 250, .11) 100%),
    image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
  background-position: center, center, center, right center;
  background-size: 118% 118%, cover, cover, cover;
  box-shadow: 0 34px 100px rgba(2, 8, 22, .28), inset 0 1px 0 rgba(220, 247, 255, .04);
}
body.landing-compact:not(.platform-mode) .hero-grid::before {
  right: 0;
  width: min(420px, 48%);
  border-top-color: rgba(125, 211, 252, .24);
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .18));
  box-shadow: 0 0 28px rgba(125, 211, 252, .08);
}
body.landing-compact:not(.platform-mode) .landing-depth {
  opacity: .72;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 82% 86% at 72% 48%, #000 22%, rgba(0, 0, 0, .72) 61%, transparent 98%);
}
body.landing-compact:not(.platform-mode) .landing-depth-canvas { opacity: .76; }
body.landing-compact:not(.platform-mode) .hero-context-field { opacity: .9; }
body.landing-compact:not(.platform-mode) .landing-journey { border-color: rgba(165, 196, 223, .3); background: rgba(8, 14, 24, .72); box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(226, 242, 255, .06); }
/* v3.0 hero paint boundary (2028.05.18): isolate animated atmosphere so
   parallax and scroll updates repaint the field, not the surrounding page.
   This is a bounded compositor hint, presentation-only, and has no bearing
   on tenant state, identity, or authority. */
body.landing-compact:not(.platform-mode) .landing-depth,
body.landing-compact:not(.platform-mode) .hero-context-field {
  contain: paint;
}
body:not(.platform-mode) .brand img {
  transform: translate3d(0, 0, 0);
  filter: invert(1) brightness(1.9) drop-shadow(0 0 10px rgba(125, 211, 252, .16));
  transition: transform .2s ease, filter .2s ease;
}
body:not(.platform-mode) .brand:hover img,
body:not(.platform-mode) .brand:focus-visible img {
  transform: translate3d(0, -1px, 0) scale(1.04);
  filter: invert(1) brightness(2) drop-shadow(0 0 15px rgba(125, 211, 252, .28));
}
@media (min-width: 681px) {
  body:not(.platform-mode) .brand img { width: 36px; height: 36px; }
}
@media (max-width: 680px) {
  body:not(.platform-mode) .brand img { width: 28px; height: 28px; }
}
body.landing-compact:not(.platform-mode) .signal-panel {
  box-shadow: 0 42px 108px rgba(1, 5, 20, .46), 0 0 0 1px rgba(167, 139, 250, .06), inset 0 1px 0 rgba(231, 234, 255, .08);
}
@media (max-width: 680px) {
  .view { width:100%; min-width: 0; box-sizing: border-box; }
  body.landing-compact:not(.platform-mode) .hero-grid {
    /* v3.0 phone intrinsic-width guard (2028.08.58): wide
       preview minimum is overridden here so the hero track cannot widen the
       document and clip the promise on narrow viewports. */
    display: block;
    width: calc(100% - 18px);
    border-color: rgba(165, 180, 252, .1);
    background-position: center, center, 80% center;
  }
  body.landing-compact:not(.platform-mode) .hero-copy,
  body.landing-compact:not(.platform-mode) .signal-panel {
    width: min(100%, calc(100% - 18px));
    max-width: calc(100% - 18px);
    box-sizing: border-box;
  }
  body.landing-compact:not(.platform-mode) .signal-panel { margin-top: 18px; }
  body.landing-compact:not(.platform-mode) .hero-copy h1 {
    width: 100%;
    max-width: min(100%, 330px);
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(2.35rem, 10.2vw, 3rem);
    line-height: .94;
  }
  body.landing-compact:not(.platform-mode) .hero-copy .hero-lede,
  body.landing-compact:not(.platform-mode) .hero-copy .hero-support {
    width: 100%;
    max-width: min(100%, 320px);
    box-sizing: border-box;
  }
  body.landing-compact:not(.platform-mode) .landing-depth {
    opacity: .56;
    mask-image: radial-gradient(ellipse 94% 74% at 74% 38%, #000 18%, rgba(0, 0, 0, .58) 64%, transparent 100%);
  }
  /* Keep the decorative product-context mesh subordinate on phones. This
     final mobile rule intentionally follows the desktop luminance pass so a
     broad-screen atmosphere cannot leak into the compact reading frame. */
  body.landing-compact:not(.platform-mode) .hero-context-field {
    opacity: .52;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .landing-depth { mix-blend-mode: normal; }
  body:not(.platform-mode) .brand img { transform: none; transition: none; }
}

/* v3.0 premium field pass (2028.09.25 / CalVer 2028.08.824): let the
   supplied product-security artwork read as the environment around the
   product surface. The authored horizon and signal arc are atmospheric only;
   they do not imply live telemetry, tenant state, or authorization. */
body.landing-compact:not(.platform-mode) .hero-grid {
  background-image:
    linear-gradient(90deg, rgba(6, 10, 20, .82) 0%, rgba(6, 11, 23, .56) 35%, rgba(7, 14, 27, .22) 68%, rgba(7, 12, 23, .06) 100%),
    radial-gradient(ellipse 60% 90% at 82% 58%, rgba(98, 167, 255, .30), transparent 66%),
    linear-gradient(118deg, transparent 0 56%, rgba(125, 211, 252, .08) 56.2%, transparent 56.5%),
    image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
  background-position: center, center, center, calc(100% + var(--landing-hero-shift, 0%)) center;
  background-size: cover, cover, cover, cover;
  background-blend-mode: normal, screen, normal, normal;
}
/* v3.0 constrained-data presentation (2028.08.119): when the browser
   advertises save-data or a very slow connection, preserve the artwork,
   copy, and response surface while quieting optional depth layers. This keeps
   the first frame useful without spending client CPU on ornamental motion. */
body.reduced-data.landing-compact:not(.platform-mode) .landing-depth {
  opacity: .22;
}
body.reduced-data.landing-compact:not(.platform-mode) .hero-context-field,
body.reduced-data.landing-compact:not(.platform-mode) .hero-field-ambient {
  opacity: .34;
}
/* Keep constrained-data mode from retaining compositor promotion for layers
   whose motion is already suppressed. The static field remains available as
   orientation; this is presentation-only and carries no state semantics. */
body.reduced-data.landing-compact:not(.platform-mode) .hero-grid *,
body.reduced-data.landing-compact:not(.platform-mode) .hero-grid::before,
body.reduced-data.landing-compact:not(.platform-mode) .hero-context-field::after,
body.reduced-data.landing-compact:not(.platform-mode) .hero-evidence-trace::after,
body.reduced-data.landing-compact:not(.platform-mode)::after {
  animation: none;
  will-change: auto;
}
body.reduced-data.landing-compact:not(.platform-mode) .landing-depth-canvas {
  visibility: hidden;
}
/* v3.0 constrained-data motion guard (CalVer 2028.08.133): once the optional
   depth canvas is suppressed, the ambient aurora must not keep consuming
   compositor time. The static field remains as orientation; no state,
   telemetry, tenant, or authority meaning is changed. */
body.reduced-data.landing-compact:not(.platform-mode) .hero-grid::after {
  animation: none;
  opacity: .12;
}
body:is(.reduced-data,.low-power).landing-compact .product-gallery *,
body:is(.reduced-data,.low-power).landing-compact .product-shot::before {
  animation: none;
}
body.landing-compact:not(.platform-mode) .hero-grid::after {
  right: -4%;
  bottom: -35%;
  width: 62%;
  background:
    radial-gradient(ellipse at 54% 44%, transparent 0 43%, rgba(112, 216, 255, .11) 43.2% 43.5%, transparent 43.8%),
    conic-gradient(from 218deg at 54% 44%, transparent 0deg, rgba(112, 216, 255, .14) 22deg, transparent 48deg, rgba(167, 139, 250, .1) 82deg, transparent 116deg);
  filter: blur(.4px);
  opacity: calc(.28 + clamp(0, var(--landing-progress, 0), 1) * .12);
  animation: heroAuroraDrift 24s ease-in-out infinite alternate;
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .hero-grid {
    background-image:
      linear-gradient(180deg, rgba(6, 10, 20, .80) 0%, rgba(6, 11, 23, .54) 52%, rgba(7, 12, 23, .22) 100%),
      radial-gradient(ellipse 90% 56% at 78% 30%, rgba(98, 167, 255, .28), transparent 70%),
      image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
    background-position: center, center, 68% center;
    background-size: cover, cover, cover;
  }
  body.landing-compact:not(.platform-mode) .hero-grid::after { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-grid::after { animation: none; }
}

/* v3.0 gallery instrument sheen (2026.08.27 / CalVer 2028.08.110): one
   restrained pass of light makes the selected product surface feel tangible
   while preserving the screenshots as the primary story. It is CSS-only,
   pointer-inert, and carries no tenant, telemetry, or capability meaning. */
.product-shot.is-spotlight .shot-window::after {
  background:
    linear-gradient(116deg, transparent 0 34%, rgba(220, 246, 255, .08) 42%, rgba(255, 190, 150, .06) 48%, transparent 58%),
    linear-gradient(120deg, rgba(255,255,255,.035), transparent 38%, rgba(104, 162, 230, .05));
  background-size: 220% 100%, 100% 100%;
  animation: galleryGlassSweep 9s cubic-bezier(.45, .05, .55, .95) infinite;
}
.product-gallery:not(.is-in-view) .product-shot.is-spotlight .shot-window::after { animation-play-state: paused; }
.first-run-guide:not(.is-in-view)::after { animation-play-state: paused; }
@keyframes galleryGlassSweep {
  0%, 32% { background-position: 160% 0, 0 0; opacity: .72; }
  62%, 76% { background-position: -45% 0, 0 0; opacity: .98; }
  100% { background-position: -80% 0, 0 0; opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .product-shot.is-spotlight .shot-window::after { animation: none; background-position: 50% 0, 0 0; }
}

/* v3.0 stage-cue placement (2026.08.27 / CalVer 2028.08.609). */
@media (min-width: 821px) {
  body.landing-compact:not(.platform-mode) .hero-grid > .landing-journey {
    top: 18px !important;
    right: 0;
    left: auto;
    width: min(248px, 26%) !important;
    margin: 0;
    padding: 10px 13px;
  }
  body.landing-compact:not(.platform-mode) .hero-grid > .landing-journey .landing-journey-copy {
    min-height: 0;
    font-size: .65rem;
    line-height: 1.38;
  }
}

@media (min-width: 1121px) {
  body.landing-compact:not(.platform-mode) .hero-grid > .landing-journey {
    top: 18px;
    width: 280px;
  }
}

@media (max-width: 680px) {
/* v3.0 mobile product-surface density (2028.02.18) */
  body.landing-compact:not(.platform-mode) .signal-intro { padding: 20px 20px 14px; }
  body.landing-compact:not(.platform-mode) .signal-intro p { display: none; }
  body.landing-compact:not(.platform-mode) .response-stages { display: none; }
  body.landing-compact:not(.platform-mode) .proof-line { padding-top: 14px; padding-bottom: 16px; }
}

@media (max-width: 680px) {
/* v3.0 mobile workspace density (2028.07.26) */
  body.landing-compact:not(.platform-mode) .workspace-attention { display: none; }
  body.landing-compact:not(.platform-mode) .proof-line { padding-top: 10px; padding-bottom: 12px; }
}

/* v3.0 mobile workspace arrival (2028.04.07): let the first product surface
   enter the phone frame sooner without deleting the promise or its trust
   boundary. This is presentation-only; it changes no route, state, or
   authorization semantics. */
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .hero-copy { padding-top: 24px; }
  body.landing-compact:not(.platform-mode) .hero-copy h1 {
    margin-bottom: 17px;
    font-size: clamp(1.9rem, 9.5vw, 3.05rem);
    line-height: .9;
    letter-spacing: -.065em;
  }
  body.landing-compact:not(.platform-mode) .hero-actions { margin-top: 24px; }
  body.landing-compact:not(.platform-mode) .hero-proofline { margin-top: 9px; }
  body.landing-compact:not(.platform-mode) .signal-panel { margin-top: 4px; }
}

@media(max-width:680px){body.landing-compact:not(.platform-mode) .signal-panel,.workspace-preview,.workspace-preview-main{width:100%;min-width:0}.workspace-preview-main{display:block}}

/* v3.0 perimeter-field depth pass (2028.04.08): the authored product-security
   artwork should read as a connected perimeter around the foreground
   workspace, not as a dim texture at the edge of the hero. The mesh is
   decorative, pointer-inert, and presentation-only; it creates no product
   state, authority, network request, or tenant-derived claim. */
.landing-depth::after {
  background:
    radial-gradient(ellipse 42% 34% at 72% 22%, rgba(117, 185, 248, .18), transparent 72%),
    radial-gradient(ellipse 34% 46% at 30% 78%, rgba(126, 236, 218, .105), transparent 72%),
    conic-gradient(from 205deg at 67% 48%, transparent 0deg, rgba(167, 139, 250, .08) 34deg, transparent 72deg, rgba(125, 211, 252, .07) 126deg, transparent 176deg, rgba(240, 157, 112, .06) 232deg, transparent 292deg);
  filter: blur(18px) saturate(1.12);
  opacity: calc(.28 + clamp(0, var(--landing-progress, 0), 1) * .12);
  transform: scale(calc(1.02 + clamp(0, var(--landing-progress, 0), 1) * .04)) rotate(calc(var(--landing-progress, 0) * 2deg));
  transform-origin: 67% 48%;
  animation: perimeterFieldDrift 24s ease-in-out infinite alternate;
}
@keyframes perimeterFieldDrift {
  0% { filter: blur(18px) saturate(1.08); transform: scale(1.02) rotate(-1deg); }
  100% { filter: blur(23px) saturate(1.18); transform: scale(1.06) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-depth::after { animation: none; filter: blur(18px) saturate(1.08); transform: scale(1.02); }
}

/* v3.0 mobile coverage scan (2028.05.25): keep the broad product/service
   taxonomy usable without turning first-run setup into a scroll-heavy wall of
   options. Group labels and the live count retain full-width reading priority;
   each native checkbox remains comfortably tappable. */
@media (max-width: 680px) {
  .product-context-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product-context-options label { min-height: 44px; padding: 8px 9px; font-size: .73rem; }
}
@media (max-width: 360px) {
  .product-context-options { grid-template-columns: 1fr; }
}

/* v3.0 hero-spectrum polish (2028.06.05): the product-security field should
   feel like one composed environment around the workspace. This adds a single
   low-contrast scan to the existing authored atmosphere; it is decorative,
   pointer-inert, and carries no tenant, telemetry, or authorization meaning.
   The animation is CSS-only and has a reduced-motion fallback. */
body.landing-compact:not(.platform-mode) .hero-field-ambient {
  border-color: rgba(125, 211, 252, .13);
  opacity: .82;
  box-shadow: inset 0 0 84px rgba(125, 211, 252, .055), 0 0 132px rgba(99, 102, 241, .11);
}
body.landing-compact:not(.platform-mode) .hero-field-ambient::after {
  position: absolute;
  top: -12%;
  left: 34%;
  width: 1px;
  height: 124%;
  background: linear-gradient(180deg, transparent, rgba(141, 226, 255, .2) 42%, rgba(194, 166, 255, .28) 56%, transparent);
  box-shadow: 0 0 18px rgba(141, 226, 255, .16);
  content: "";
  opacity: .62;
  transform: rotate(26deg) translate3d(-16px, 0, 0);
  animation: heroSpectrumScan 16s cubic-bezier(.45, .05, .55, .95) infinite;
  pointer-events: none;
}
body.landing-compact:not(.platform-mode) .signal-panel {
  border-color: rgba(165, 180, 252, .42);
  box-shadow: 0 38px 96px rgba(1, 5, 20, .42), 0 0 38px rgba(125, 211, 252, .075), inset 0 1px 0 rgba(231, 234, 255, .09);
}
@keyframes heroSpectrumScan {
  0%, 18% { opacity: 0; transform: rotate(26deg) translate3d(-120px, 0, 0); }
  34%, 66% { opacity: .62; }
  82%, 100% { opacity: 0; transform: rotate(26deg) translate3d(150px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-field-ambient::after { animation: none; opacity: .24; transform: rotate(26deg) translate3d(0, 0, 0); }
}

/* v3.0 outcome-tile hierarchy (2028.06.15): the first-frame outcomes are
   three distinct product promises, not a generic card row. A quiet accent
   identifies each lane and a small lift rewards inspection without adding
   copy, requests, or implied operational state. This is presentation-only. */
body.landing-compact:not(.platform-mode) .hero-metric {
  position: relative;
  overflow: hidden;
  border-color: rgba(165, 180, 252, .2);
  box-shadow: inset 0 1px 0 rgba(231, 244, 255, .045), 0 12px 28px rgba(2, 8, 22, .12);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
body.landing-compact:not(.platform-mode) .hero-metric::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 15px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #80e2cb, transparent 78%);
  box-shadow: 0 0 15px rgba(128, 226, 203, .18);
  content: "";
}
body.landing-compact:not(.platform-mode) .hero-metric:nth-child(2)::before {
  background: linear-gradient(90deg, #a899ff, transparent 78%);
  box-shadow: 0 0 15px rgba(168, 153, 255, .18);
}
body.landing-compact:not(.platform-mode) .hero-metric:nth-child(3)::before {
  background: linear-gradient(90deg, #f3a477, transparent 78%);
  box-shadow: 0 0 15px rgba(243, 164, 119, .18);
}
body.landing-compact:not(.platform-mode) .hero-metric:hover,
body.landing-compact:not(.platform-mode) .hero-metric:focus-within {
  transform: translateY(-3px);
  border-color: rgba(165, 214, 244, .38);
  background: linear-gradient(140deg, rgba(22, 35, 51, .82), rgba(11, 17, 27, .96));
  box-shadow: inset 0 1px 0 rgba(231, 244, 255, .07), 0 18px 34px rgba(2, 8, 22, .2);
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-metric { transition: none; }
  body.landing-compact:not(.platform-mode) .hero-metric:hover,
  body.landing-compact:not(.platform-mode) .hero-metric:focus-within { transform: none; }
}

/* v3.0 proofline legibility (2028.06.16): the trust-boundary labels are
   existing content, not supporting copy. Raise their contrast and size just
   enough to remain readable in the first frame while keeping the line compact
   and the three labels in one visual group. */
body.landing-compact:not(.platform-mode) .hero-proofline {
  color: #a5b8c8;
  font-size: .61rem;
  letter-spacing: .065em;
}
@media (max-width: 680px) {
  /* v3.0 responsive heading rhythm (2028.09.23): balance authored display
     headings where the browser supports it so the hero and product surface
     read as designed units instead of accidental line fragments. Bounds,
     copy, and interaction semantics remain unchanged. */
  body.landing-compact:not(.platform-mode) .hero-copy h1,
  body.landing-compact:not(.platform-mode) .signal-intro h2 {
    text-wrap: balance;
  }
  /* v3.0 mobile lifecycle rail (2028.09.22): keep all four orientation
     stages visible in one calm band so the operator reaches the active
     response surface sooner. This is context only, not a case-status control. */
  body.platform-mode .workspace-lifecycle ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }
  body.platform-mode .workspace-lifecycle li {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 48px;
    font-size: .55rem;
    line-height: 1.1;
    text-align: center;
  }
  body.platform-mode .workspace-lifecycle li span {
    width: 20px;
    height: 20px;
  }
  /* v3.0 phone context-line guard (2028.09.21): the eyebrow is part of the
     public reading path, so long organization/product wording must wrap inside
     the hero track instead of widening the composition or clipping its edge. */
  body.landing-compact:not(.platform-mode) .hero-copy > .eyebrow {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  /* v3.0 mobile first-frame hierarchy (2028.09.20): the headline and lede
     carry the public promise on a phone; the repeated support sentence stays
     available at larger widths while the workspace preview arrives sooner. */
  body.landing-compact:not(.platform-mode) .hero-copy .hero-support {
    display: none;
  }
  body.landing-compact:not(.platform-mode) .hero-proofline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: min(100%, 300px);
    max-width: 300px;
    font-size: .53rem;
    letter-spacing: .055em;
  }
  body.landing-compact:not(.platform-mode) .hero-proofline span {
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
    text-align: center;
  }
}

/* v3.0 package-state cascade repair (2028.06.18): keep registry context
   visually separate from repository context at the earliest setup cue. The
   earlier grouped source-state rule already supplies the fallback; this final
   package-only rule is the sole theme owner, so no declaration is shadowed by
   an identical later block. Presentation-only; source normalization and the
   read-only preview boundary remain unchanged. */
.early-access-panel[data-setup-source-kind="package"] .setup-source-kind {
  border-color: rgba(172, 151, 255, .42);
  color: #cfc3ff;
  background: rgba(67, 50, 111, .28);
}
.early-access-panel[data-setup-source-kind="package"] .setup-source-kind::before {
  border-color: rgba(184, 164, 255, .78);
  background: rgba(133, 108, 235, .24);
  box-shadow: 0 0 11px rgba(133, 108, 235, .28);
}
.early-access-panel[data-setup-source-kind="package"]::before {
  background: linear-gradient(90deg, rgba(172, 151, 255, .84), rgba(172, 151, 255, .18) 48%, transparent);
}
.early-access-panel[data-setup-source-kind="package"] .setup-form-shell {
  border-color: rgba(172, 151, 255, .38);
}

.early-access-panel .input-combo {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.early-access-panel .input-combo:focus-within {
  border-color: rgba(141, 226, 255, .78);
  background: rgba(6, 18, 30, .9);
  box-shadow: inset 0 0 0 1px rgba(141, 226, 255, .12), 0 0 0 3px rgba(117, 211, 252, .11), 0 18px 44px rgba(2, 8, 22, .24);
}
@media (prefers-reduced-motion: reduce) {
  .early-access-panel .input-combo { transition: none; }
}

/* v3.0 mobile touch-target correction (2028.07.18): keep the final cascade
   aligned with the documented 44px action contract after later platform-mode
   refinements. */
@media (min-width: 360px) and (max-width: 680px) {
  body.platform-mode .workspace-heading-actions .button { min-height: 44px; }
}


/* v3.0 response-surface material (2028.07.19): let the authored workspace
   read as a premium product surface without adding another image, request,
   or runtime animation. The gradients are presentation-only; they carry no
   tenant state, evidence, authority, or operational status. */
.signal-panel {
  background:
    linear-gradient(145deg, rgba(24, 38, 57, .46), rgba(10, 16, 26, .72) 48%, rgba(17, 27, 39, .56)),
    rgba(11, 16, 24, .42);
  box-shadow: 0 32px 76px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.signal-header {
  border-bottom: 1px solid rgba(151, 196, 224, .1);
  background: linear-gradient(90deg, rgba(12, 21, 33, .38), transparent 72%);
}
.signal-panel .workspace-preview {
  background: linear-gradient(145deg, rgba(15, 24, 36, .86), rgba(8, 13, 21, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 15px 38px rgba(0, 0, 0, .16);
}

/* v3.0 composed hero rhythm (2028.07.22): wide screens should reveal the
   authored response overview as a complete product surface before the next
   chapter. Tighten only internal spacing; preserve every label, control,
   trust boundary, and reduced-motion behavior. No requests or state change. */
@media (min-width: 981px) {
  .signal-intro { padding-top: 26px; padding-bottom: 20px; }
  .workspace-psirtling { padding-top: 9px; padding-bottom: 9px; }
  .workspace-preview-bar { padding-top: 10px; padding-bottom: 10px; }
  .workspace-decision { padding-top: 14px; padding-bottom: 14px; }
  .workspace-attention { margin-bottom: 8px; padding-top: 6px; padding-bottom: 7px; }
  .response-stage { min-height: 64px; padding-top: 9px; padding-bottom: 9px; }
  .proof-line { padding-top: 12px; padding-bottom: 12px; }
}

/* v3.0 laptop first-frame density (2028.09.17): at short desktop heights the
   workspace preview must read as a product surface, not a clipped lower edge.
   This only compresses internal presentation spacing; it changes no copy,
   state, authority, or request behavior. */
@media (min-width: 981px) and (max-width: 1320px) and (max-height: 760px) {
  .signal-stage-marker { margin-top: 10px; padding-top: 5px; padding-bottom: 5px; }
  .signal-header { padding-top: 12px; padding-bottom: 10px; }
  .signal-intro { padding-top: 16px; padding-bottom: 12px; }
  .signal-intro h2 { margin-bottom: 8px; font-size: 1.72rem; }
  .workspace-psirtling { margin-right: 24px; margin-bottom: 5px; margin-left: 24px; padding-top: 8px; padding-bottom: 8px; }
  .workspace-lineage { margin-right: 24px; margin-bottom: 8px; margin-left: 24px; padding-top: 8px; padding-bottom: 8px; }
  .workspace-preview { margin-right: 24px; margin-left: 24px; }
  .workspace-preview-bar { padding-top: 8px; padding-bottom: 8px; }
  .workspace-decision { padding-top: 14px; padding-bottom: 14px; }
  .workspace-context { padding-top: 9px; padding-bottom: 9px; }
  .workspace-attention { margin-right: 24px; margin-bottom: 7px; margin-left: 24px; padding-top: 7px; padding-bottom: 7px; }
  .response-stage { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
  .proof-line { padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-compact .hero-copy h1 span {
    animation: none;
    background-position: 50% 50%;
  }
}

@media (prefers-contrast: more) {
  body:not(.platform-mode) {
    --line: rgba(224, 239, 250, .34);
    --line-bright: rgba(155, 220, 249, .78);
  }
  body:not(.platform-mode) .hero-context-field,
  body:not(.platform-mode) .landing-depth { opacity: .42; }
  body:not(.platform-mode) .button-outline,
  body:not(.platform-mode) .gallery-state-chip,
  body:not(.platform-mode) .product-gallery .gallery-sequence,
  body:not(.platform-mode) .product-shot figcaption {
    border-color: rgba(224, 239, 250, .58);
  }
  body:not(.platform-mode) .button:focus-visible,
  body:not(.platform-mode) .product-shot:focus-visible,
  body:not(.platform-mode) .gallery-sequence a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
  }
  body.platform-mode .workspace-focus-brief,
  body.platform-mode .workspace-priority,
  body.platform-mode .workspace-tabs {
    border-color: rgba(224, 239, 250, .5);
  }
  body.platform-mode .nav-tab.active,
  body.platform-mode .workspace-focus-state,
  body.platform-mode .workspace-heading-actions .button-primary {
    border-color: #dff6ff;
    background: #102a3b;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(223, 246, 255, .2);
  }
  body.platform-mode .nav-tab.active span {
    background: #dff6ff;
    color: #06131c;
  }
}

body.landing-compact:not(.platform-mode) .hero-copy {
  position: relative;
  isolation: isolate;
}
body.landing-compact:not(.platform-mode) .hero-copy::before {
  position: absolute;
  z-index: -1;
  top: -14%;
  right: -18%;
  bottom: -14%;
  left: -12%;
  border: 1px solid rgba(125, 211, 252, .07);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 74% 82% at 28% 44%, rgba(5, 11, 23, .72), transparent 74%),
    linear-gradient(112deg, rgba(7, 12, 24, .56), rgba(7, 12, 24, .08) 78%);
  box-shadow: inset 0 1px 0 rgba(222, 247, 255, .035), 0 20px 64px rgba(2, 8, 22, .12);
  content: "";
  pointer-events: none;
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .hero-copy::before {
    top: -8%;
    right: -9%;
    bottom: -8%;
    left: -9%;
    border-radius: 20px;
    background: radial-gradient(ellipse 88% 72% at 34% 32%, rgba(5, 11, 23, .62), transparent 78%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .hero-copy::before { box-shadow: inset 0 1px 0 rgba(222, 247, 255, .035); }
}

body.platform-mode .workspace-focus-brief[data-focus-state="empty"] {
  border-color: rgba(126, 207, 244, .28);
  background:
    radial-gradient(circle at 92% 0, rgba(126, 207, 244, .13), transparent 35%),
    linear-gradient(132deg, rgba(15, 34, 48, .9), rgba(11, 18, 29, .96));
}
body.platform-mode .workspace-focus-brief[data-focus-state="empty"]::before {
  background: linear-gradient(90deg, transparent, rgba(126, 207, 244, .72), rgba(137, 211, 177, .34), transparent);
}
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-state {
   border-color: rgba(126, 207, 244, .46);
  color: #b9e5f8;
   background: rgba(126, 207, 244, .11);
}

@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop {
    background: rgba(3, 7, 12, .94);
    backdrop-filter: none;
  }
  .release-badge,
  .feedback-dialog,
  .release-notes,
  body.landing-compact:not(.platform-mode) .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .landing-journey,
  .signal-panel,
  .gallery-sequence,
  .product-gallery .gallery-state-chip,
  body.landing-compact:not(.platform-mode) .product-shot figcaption {
    backdrop-filter: none;
    background-color: #101b29;
  }
  body.platform-mode .workspace-lifecycle {
    border-color: rgba(126, 207, 244, .34);
    background: #111d2d;
    box-shadow: none;
  }
  body.platform-mode .workspace-lifecycle ol::before {
    background: #5b7890;
  }
  /* v3.0 authenticated focus transparency fallback (CalVer 2028.08.127):
     preserve the focus brief's reading order and rail without translucent
     gradients. This changes paint only; state and authority stay server-derived. */
  body.platform-mode .workspace-focus-brief {
    background: #102338;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
  }
  body.platform-mode .workspace-focus-main::before {
    box-shadow: none;
  }
  body.landing-compact:not(.platform-mode) .hero-copy::after {
    backdrop-filter: none;
    background: #101b29;
    box-shadow: none;
  }
}

body.landing-compact:not(.platform-mode) .product-shot figcaption {
  position: relative;
  z-index: 2;
  margin: -54px 12px 0;
  min-height: 54px;
  padding: 11px 13px 12px;
  border: 1px solid rgba(155, 197, 217, .2);
  border-radius: 9px;
  background: linear-gradient(105deg, rgba(9, 17, 28, .94), rgba(11, 24, 37, .84));
  box-shadow: 0 14px 28px rgba(2, 8, 18, .2), inset 0 1px 0 rgba(226, 247, 255, .05);
  backdrop-filter: blur(12px) saturate(1.08);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
body.landing-compact:not(.platform-mode) .product-shot:hover figcaption,
body.landing-compact:not(.platform-mode) .product-shot:focus-visible figcaption {
  border-color: rgba(125, 211, 252, .42);
  background: linear-gradient(105deg, rgba(13, 30, 46, .96), rgba(13, 33, 47, .88));
  transform: translateY(-2px);
}
body.landing-compact:not(.platform-mode) .product-shot.is-spotlight figcaption {
  border-color: rgba(125, 211, 252, .34);
}
@media (max-width: 680px) {
  body.landing-compact:not(.platform-mode) .product-shot figcaption {
    margin: -48px 8px 0;
    min-height: 48px;
    padding: 9px 11px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) .product-shot figcaption { transition: none; }
  body.landing-compact:not(.platform-mode) .product-shot:hover figcaption,
  body.landing-compact:not(.platform-mode) .product-shot:focus-visible figcaption { transform: none; }
}

  /* v3.0 public horizon field (CalVer 2028.08.146): extend the authored
   product-security atmosphere beyond the hero frame so the first viewport
   reads as one considered environment. This is a pointer-inert paint layer;
   it carries no signal, tenant, severity, freshness, or authorization claim.
   The field is deliberately low-frequency and CSS-only so Cloudflare serves
   it at zero additional request or runtime cost. */
body.landing-compact:not(.platform-mode) #landing-view {
  isolation: isolate;
}
body.landing-compact:not(.platform-mode) #landing-view::before {
  position: absolute;
  z-index: -1;
  top: -10vh;
  right: -18vw;
  left: -18vw;
  height: min(920px, 96vh);
  background:
    radial-gradient(ellipse 34% 42% at 78% 18%, rgba(93, 216, 255, .13), transparent 70%),
    radial-gradient(ellipse 30% 34% at 21% 38%, rgba(126, 105, 255, .09), transparent 72%),
    linear-gradient(112deg, transparent 0 48%, rgba(127, 222, 255, .035) 48.15%, transparent 48.4%);
  opacity: .72;
  content: "";
  pointer-events: none;
  transform: translate3d(0, calc(var(--landing-scroll-progress, 0) * -22px), 0);
  animation: publicHorizonDrift 24s ease-in-out infinite alternate;
}
@keyframes publicHorizonDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 4% 3%, -3% 5%, 1.5% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-compact:not(.platform-mode) #landing-view::before {
    animation: none;
    transform: none;
  }
}
@media (prefers-reduced-data: reduce) {
  body.landing-compact:not(.platform-mode) #landing-view::before {
    animation: none;
    opacity: .42;
    transform: none;
  }
}
body.reduced-data.landing-compact:not(.platform-mode) #landing-view::before {
  animation: none;
  opacity: .42;
  transform: none;
}

@media (prefers-reduced-transparency: reduce) {
  body.platform-mode .workspace-focus-brief,
  body.platform-mode .first-run-guide,
  body.platform-mode .workspace-priority,
  body.platform-mode .workspace-lifecycle,
  body.platform-mode .nav-assurance,
  body.platform-mode .metric {
    background: #122236;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.platform-mode .workspace-content {
    background: #0d1726;
  }
body.platform-mode .workspace-focus-brief::after {
    opacity: .6;
  }
  body.platform-mode .workspace-focus-state,
  body.platform-mode .workspace-focus-lanes span,
  body.platform-mode .workspace-priority-link,
  body.platform-mode .workspace-focus-action:not(.is-primary) {
    background: #172b40;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* v3.0 reduced-display final guard (2028.08.171): keep the hero field static
   after every later stage rule in this stylesheet. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  body.landing-compact:not(.platform-mode) .hero-grid::after {
    animation: none !important;
    transform: none;
  }
}

.feedback-dialog-shell {
  padding: 27px 29px 104px;
}
@media (max-width: 680px) {
  .feedback-dialog-shell { padding-bottom: 29px; }
}

@media (max-width: 680px) {
  .feedback-dialog-shell .dialog-guidance { margin-bottom: 12px; }
  .feedback-dialog-shell .feedback-form { gap: 12px; margin-top: 15px; }
  .feedback-dialog-shell .feedback-form-heading { padding-block: 9px 10px; }
}

/* v3.0 hero calibration (2028.08.683): one decorative field, accessible fallbacks. */
.hero-grid {
  background-image:
     linear-gradient(90deg, rgba(12, 14, 19, .50) 0%, rgba(12, 14, 19, .22) 43%, rgba(12, 14, 19, .1) 100%),
    radial-gradient(ellipse 54% 78% at 74% 46%, rgba(100, 153, 238, .20), transparent 70%),
    linear-gradient(118deg, transparent 0 48%, rgba(122, 190, 232, .10) 48.15%, transparent 48.35%),
    repeating-linear-gradient(90deg, rgba(151, 201, 232, .045) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(151, 201, 232, .035) 0 1px, transparent 1px 84px),
    image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
}
.hero-grid::before { box-shadow: 0 0 18px rgba(125, 211, 252, .18); }
.hero-grid {
  background-position: center, center, center, 0 0, 0 0, calc(100% + var(--landing-hero-shift, 0%)) center;
  transition: background-position 1.15s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hero-grid {
    background-image:
      linear-gradient(90deg, rgba(12, 14, 19, .9) 0%, rgba(12, 14, 19, .67) 48%, rgba(12, 14, 19, .18) 100%),
      linear-gradient(118deg, transparent 0 48%, rgba(122, 190, 232, .08) 48.15%, transparent 48.35%),
      repeating-linear-gradient(90deg, rgba(151, 201, 232, .035) 0 1px, transparent 1px 84px),
      repeating-linear-gradient(0deg, rgba(151, 201, 232, .025) 0 1px, transparent 1px 84px),
      image-set(url("./remedis-product-security-hero-v2.webp") type("image/webp") 1x, url("./remedis-product-security-hero-v2.jpg") type("image/jpeg") 1x, url("./remedis-product-security-hero-v2.png") type("image/png") 1x);
    background-position: center, center, 0 0, 0 0, calc(100% + var(--landing-hero-shift, 0%)) center;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
   .hero-grid { transition: none; }
   .product-shot:hover .shot-window { transform: none; }
 }

body.landing-compact:not(.platform-mode) .platform-story,
body.landing-compact:not(.platform-mode) .context-atlas,
body.landing-compact:not(.platform-mode) .trust-story,
body.landing-compact:not(.platform-mode) .customer-fit,
body.landing-compact:not(.platform-mode) .operating-scale,
body.landing-compact:not(.platform-mode) .services-panel,
body.landing-compact:not(.platform-mode) .early-access-panel {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

 /* security-trace frame (CalVer 2028.08.185) */
 .signal-panel::after {
  background-size: 210% 100%;
  animation: securityTraceSweep 9s ease-in-out infinite;
}
@keyframes securityTraceSweep {
  0%, 18% { background-position: 0% 50%; opacity: .8; }
  52% { background-position: 100% 50%; opacity: 1; }
  82%, 100% { background-position: 0% 50%; opacity: .8; }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  .signal-panel::after { animation: none; background-position: 50% 50%; opacity: .82; }
}

@media (min-width: 681px) and (max-width: 820px) {
  body.landing-compact:not(.platform-mode) .hero-copy h1 {
    font-size: clamp(2rem, 4.2vw, 2.35rem);
    line-height: .94;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .public-nav, .trust-status, .chapter-rail { display: none; }
  .site-header { grid-template-columns: 1fr auto; padding-inline: 24px; }
  .header-actions { gap: 8px; }
}

body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-action {
  min-height: 44px;
  padding-inline: 13px;
  border-color: rgba(120, 225, 209, .3);
  background: rgba(10, 35, 39, .52);
}
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-action:hover,
body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-action:focus-visible {
  border-color: rgba(120, 225, 209, .66);
  background: rgba(22, 67, 70, .62);
}

@media (min-width: 821px) {
  body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-facts {
    padding: 8px 0;
    border: 1px solid rgba(120, 225, 209, .18);
    border-radius: 11px;
    background: rgba(7, 25, 32, .34);
  }
  body.platform-mode .workspace-focus-brief[data-focus-state="empty"] .workspace-focus-facts div {
    padding-inline: 16px;
  }
}

@media (min-width: 1121px) {
  body.landing-compact:not(.platform-mode) .signal-stage-marker { margin-top: 9px; }
  body.landing-compact:not(.platform-mode) .signal-header { padding-top: 15px; padding-bottom: 12px; }
  body.landing-compact:not(.platform-mode) .signal-intro { padding-top: 19px; padding-bottom: 15px; }
  body.landing-compact:not(.platform-mode) .signal-intro h2 { margin-bottom: 9px; font-size: clamp(1.65rem, 1.9vw, 2.02rem); }
  body.landing-compact:not(.platform-mode) .signal-intro p { line-height: 1.48; }
  body.landing-compact:not(.platform-mode) .workspace-psirtling { padding-top: 8px; padding-bottom: 8px; }
  body.landing-compact:not(.platform-mode) .workspace-lineage { margin-bottom: 11px; padding-top: 9px; padding-bottom: 8px; }
  body.landing-compact:not(.platform-mode) .workspace-lineage-track { margin-top: 10px; }
  body.landing-compact:not(.platform-mode) .workspace-lineage::before { top: 41px; }
  body.landing-compact:not(.platform-mode) .workspace-lineage::after { top: 40px; }
  body.landing-compact:not(.platform-mode) .workspace-preview { margin-bottom: 3px; }
  body.landing-compact:not(.platform-mode) .workspace-preview-bar { padding-top: 10px; padding-bottom: 9px; }
  body.landing-compact:not(.platform-mode) .workspace-decision { padding-top: 13px; padding-bottom: 13px; }
  body.landing-compact:not(.platform-mode) .workspace-decision p { margin-top: 6px; margin-bottom: 9px; }
  body.landing-compact:not(.platform-mode) .workspace-context div { padding-top: 7px; padding-bottom: 7px; }
  body.landing-compact:not(.platform-mode) .workspace-attention { margin-bottom: 9px; padding-top: 7px; padding-bottom: 7px; }
  body.landing-compact:not(.platform-mode) .workspace-attention-label { margin-bottom: 5px; }
  body.landing-compact:not(.platform-mode) .workspace-attention-lane { padding-top: 5px; padding-bottom: 5px; }
  body.landing-compact:not(.platform-mode) .response-stage { min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
  body.landing-compact:not(.platform-mode) .response-stage span { margin-bottom: 8px; }
  body.landing-compact:not(.platform-mode) .proof-line { padding-top: 9px; padding-bottom: 10px; }
}

/* Blur over the animated hero re-rasterizes each frame in Chrome (flashing). */
body.landing-compact:not(.platform-mode) .site-header,
body.landing-compact:not(.platform-mode) .signal-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.landing-compact:not(.platform-mode) .site-header { background: rgba(12, 14, 19, .94); }
body.landing-compact:not(.platform-mode) .signal-panel { background: rgba(8, 15, 26, .9); }

/* ---- Clarity cut (2026-09-02): plain landing sections, no ambient motion ---- */
#landing-view *, #landing-view *::before, #landing-view *::after { animation: none !important; }
#landing-view .hero-grid, #landing-view .signal-panel, #landing-view .product-shot figcaption { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hero-grid::before, .hero-grid::after { animation: none !important; }

.story-beats, .why-now, .who-for { display: grid; gap: 22px; padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 44px); }
.story-beats-intro h2, .why-now-intro h2, .who-for-intro h2 { margin: 6px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.story-beats-grid, .who-for-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.story-beats-grid article, .who-for-grid article { padding: 20px 22px; border: 1px solid rgba(139, 162, 198, .18); border-radius: 12px; background: rgba(8, 15, 26, .55); }
.story-beats-grid h3, .who-for-grid h3 { margin: 0 0 8px; font-size: 1.05rem; }
.story-beats-grid p, .who-for-grid p, .why-now-grid p, .who-for-grow, .who-for-services p { margin: 0; color: rgba(214, 222, 235, .86); font-size: 1rem; line-height: 1.55; }
.why-now-grid { display: grid; gap: 14px; max-width: 66ch; }
.why-now-grid p:first-child { font-size: 1.12rem; color: #eef2f8; }
.who-for-grow { max-width: 66ch; }
.who-for-services { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; padding: 18px 22px; border: 1px solid rgba(139, 162, 198, .18); border-radius: 12px; }
.who-for-services p { max-width: 60ch; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.early-access-panel .setup-source-kind:empty { display: none; }
#landing-view * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

@media(max-width:680px){
body:not(.platform-mode) #landing-view .product-gallery{inline-size:100%;max-inline-size:100%;padding-inline:14px;box-sizing:border-box;overflow:hidden}
body:not(.platform-mode) #landing-view .product-gallery-heading{display:block}
body:not(.platform-mode) #landing-view .product-gallery-heading>p{margin-top:12px}
body:not(.platform-mode) #landing-view .gallery-sequence{display:flex;inline-size:100%;max-inline-size:100%;box-sizing:border-box;gap:8px 18px;overflow-x:auto;overscroll-behavior-inline:contain}
body:not(.platform-mode) #landing-view .gallery-sequence a{flex:0 0 auto}
body:not(.platform-mode) #landing-view .gallery-status,body:not(.platform-mode) #landing-view .gallery-progress{display:none}
body:not(.platform-mode) #landing-view .product-gallery-grid,body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight,body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight>.shot-window{display:block!important;inline-size:100%!important;width:100%!important;max-inline-size:100%!important;max-width:100%!important;min-inline-size:0!important;min-width:0!important;box-sizing:border-box!important}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight{padding:0!important;overflow:visible}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight>.shot-window>*{inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-layout{grid-template-columns:1fr}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-sidebar{display:none}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-metrics,body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-case-grid{grid-template-columns:1fr}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-case-grid div+div{padding-left:0;border-top:1px solid rgba(157,199,228,.12);border-left:0}
body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-table span,body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-case-head strong,body:not(.platform-mode) #landing-view .product-gallery-grid>.product-shot.is-spotlight .shot-chrome span{overflow-wrap:anywhere;word-break:break-word}
}

/* v3.0 mobile gallery authority (CalVer 2028.11.038): the selected product
   surface is a full-width reading pane on a phone. This is the final
   responsive contract so legacy desktop lane placement cannot leave a narrow
   Case Room or Product Context card stranded beside unused space. */
@media (max-width: 680px) {
  body:not(.platform-mode) #main {
    padding-top: calc(88px + env(safe-area-inset-top)) !important;
  }
  body:not(.platform-mode) .site-header {
    min-height: calc(72px + env(safe-area-inset-top));
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  /* The public header is fixed so the account actions remain available while
     a visitor explores the story. Reserve its full touch target height in the
     document flow; otherwise the first product proof starts underneath the
     header on iOS Safari and looks clipped before any gallery interaction. */
  body.landing-compact:not(.platform-mode) #main { padding-top: calc(88px + env(safe-area-inset-top)) !important; }
  body.landing-compact:not(.platform-mode) #landing-view {
    padding-top: 0 !important;
  }
  /* Keep this selector independent of transient body state. A public landing
     view can be restored after an auth attempt before the body class is
     reconciled; its phone layout must remain safe in that interval. */
  #landing-view .product-gallery-grid {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
  #landing-view .product-gallery-grid > .product-shot,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight {
    display: block !important;
    position: relative !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  #landing-view .product-gallery-grid > .product-shot:not(.is-spotlight) {
    display: none !important;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight > .shot-window {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-window,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-window > *,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-chrome,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-toolbar,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-layout,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-main {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-chrome,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-toolbar {
    flex-wrap: wrap;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-chrome,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-head,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-evidence {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-head,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-evidence,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-graph {
    inline-size: auto !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid,
  #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v3.0 mobile product pane (CalVer 2028.11.038): the public walkthrough is
   a full-width product preview on phones, never a desktop mockup stranded in
   a narrow grid track. Keep every nested surface shrinkable and let the
   selected pane use the available reading width. This is presentation-only;
   it carries no workspace, tenant, or operational state. */
@media (max-width: 680px) {
  body:not(.platform-mode) #landing-view .product-gallery,
  body:not(.platform-mode) #landing-view .product-gallery-grid,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight > .shot-window {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    inline-size: 100% !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery {
    overflow: visible !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid {
    overflow: visible !important;
    margin-inline: 0 !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight {
    transform: none !important;
    padding-inline: 0 !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight > .shot-window {
    overflow: hidden !important;
    min-height: 0 !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-chrome,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-toolbar,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-layout,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-head,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-evidence,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-graph {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-head,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-evidence {
    padding-inline: 16px !important;
    margin-inline: 0 !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid {
    margin-inline: 16px !important;
  }
}

/* v3.0 mobile layout correction (CalVer 2028.11.038): the public header
   must participate in phone layout, and the selected product surface must
   occupy the reading column at every narrow viewport. Earlier responsive
   layers left a fixed-header override and desktop gallery tracks in the
   cascade; that produced an overlapped hero and a tall, narrow mockup on
   real phones. This is presentation-only and carries no workspace state. */
@media (max-width: 760px) {
  body:not(.platform-mode) {
    overflow-x: hidden;
  }
  /* Keep the cinematic artwork present on phones without letting its high
     contrast details compete with the first reading task. The copy remains
     foreground content; this veil is presentation-only and carries no
     tenant, source, or workflow state. */
  body:not(.platform-mode) #landing-view .hero-grid {
    background-position: 50% 50%, 50% 50%, 82% 50%;
  }
  body:not(.platform-mode) #landing-view .hero-copy {
    isolation: isolate;
    position: relative;
    z-index: 2;
    padding: 22px 18px 24px;
    border: 1px solid rgba(151, 204, 239, .16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(7, 13, 26, .94), rgba(7, 13, 26, .78));
    box-shadow: 0 18px 44px rgba(1, 7, 18, .28), inset 0 1px rgba(231, 248, 255, .05);
  }
  body:not(.platform-mode) #landing-view .hero-copy h1,
  body:not(.platform-mode) #landing-view .hero-copy p,
  body:not(.platform-mode) #landing-view .hero-copy .eyebrow,
  body:not(.platform-mode) #landing-view .hero-copy li {
    color: #f8f8fa;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .72);
  }
  body:not(.platform-mode) #landing-view .hero-copy .eyebrow {
    color: #a9e9ff;
  }
  /* Keep the brand and account paths in one intentional phone row. The
     desktop three-track header leaves an empty middle track at narrow widths,
     which can squeeze the account buttons into the browser edge on real
     phones. */
  body:not(.platform-mode) .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding-inline: 12px;
  }
  body:not(.platform-mode) .header-actions {
    min-width: 0;
    justify-self: end;
    gap: 6px;
  }
  body:not(.platform-mode) .site-header {
    position: sticky !important;
    top: 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
  }
  body:not(.platform-mode) #main {
    padding-top: 0 !important;
  }
  body:not(.platform-mode) #landing-view {
    padding-top: 18px !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot:not(.is-spotlight) {
    display: none !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight > .shot-window {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight > .shot-window {
    min-height: 0 !important;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-chrome,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-toolbar,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-layout,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-head,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-evidence,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-graph {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-layout,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-metrics,
  body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-case-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v3.0 mobile headline legibility (CalVer 2028.11.179): the desktop
   spectrum treatment loses contrast on small OLED screens when it sits over
   the animated perimeter field. Keep the same headline hierarchy, but use a
   solid foreground on phones so the promise is readable at a glance. Paint
   only; no state, evidence, or interaction semantics change. */
@media (max-width: 680px) {
  body:not(.platform-mode) #landing-view .hero-copy h1 span {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #f7fbff !important;
    -webkit-text-fill-color: #f7fbff !important;
  }
}

/* Keep hash navigation readable beneath the sticky phone header. This is a
   presentation-only offset; it carries no workspace, tenant, or workflow
   state and applies only to the public landing surface. */
@media (max-width: 760px) {
  body:not(.platform-mode) #landing-view [id],
  body:not(.platform-mode) #landing-view section,
  body:not(.platform-mode) #landing-view article {
    scroll-margin-top: calc(84px + env(safe-area-inset-top));
  }
}

.recovery-dialog-shell { width: min(540px, calc(100vw - 28px)); }
.recovery-code-label { display: grid; gap: 8px; color: #dfe6eb; font-size: .77rem; font-weight: 700; }
.recovery-code-label input { width: 100%; min-height: 48px; border: 1px solid rgba(155, 197, 217, .24); border-radius: 8px; padding: 12px; color: var(--ink); background: rgba(4, 13, 20, .56); font: 600 1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.recovery-code-label input:focus { border-color: rgba(123, 202, 235, .7); outline: 0; box-shadow: 0 0 0 3px rgba(117, 185, 248, .14); }
.recovery-dialog-shell .turnstile-slot { min-height: 70px; margin-top: 16px; }

.setup-source-kind[data-kind="empty"] { display: none; }
.release-badge.release-badge-footer { position: static; inset: auto; margin-left: auto; transform: none; }

.hero-proofline { flex-wrap: wrap; }
.hero-proofline span { white-space: normal; }

/* Keep the screening explanation adjacent to its state, without turning the
   intake card into a second decision dialog. */
.quality-guidance,
.quality-next-step { display: block; max-width: 70ch; color: rgba(214, 222, 235, .78); line-height: 1.45; }
.quality-guidance { margin-top: 8px; }
.quality-next-step { margin-top: 4px; }

/* v3.0 account security surface (CalVer 2028.11.038): expose the existing
   server-governed passkey and recovery lifecycle without surfacing secrets or
   changing workspace authority. */
.account-security-dialog-shell { width: min(620px, calc(100vw - 28px)); }
.section-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-security-trigger { margin-left: auto; min-height: 36px; padding-inline: 10px; font-size: .62rem; }
.security-credential-section,
.security-recovery-section,
.security-revoke-panel { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid rgba(132, 177, 218, .18); border-radius: 12px; background: rgba(8, 15, 26, .46); }
.security-credential-section .section-heading { align-items: center; }
.security-credential-section h3,
.security-recovery-section h3,
.security-revoke-panel h3 { margin: 0; font-size: .92rem; }
.security-credential-list { display: grid; gap: 8px; }
.security-credential-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-width: 0; padding: 11px 12px; border: 1px solid rgba(132, 177, 218, .14); border-radius: 9px; background: rgba(12, 22, 34, .7); }
.security-credential-row > div { display: grid; gap: 3px; min-width: 0; }
.security-credential-row strong { overflow-wrap: anywhere; color: #eaf3f8; font-size: .78rem; }
.security-credential-row small { color: #8fa5b5; font-size: .62rem; line-height: 1.45; }
.security-recovery-section { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.security-recovery-section .field-note { margin: 4px 0 0; }
.security-recovery-codes { grid-column: 1 / -1; margin: 0; padding: 12px; overflow-x: auto; border: 1px solid rgba(139, 211, 177, .34); border-radius: 8px; color: #c5f1df; background: rgba(8, 31, 29, .72); font: 700 .78rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.security-recovery-finish { grid-column: 1 / -1; justify-self: start; }
.security-revoke-panel label { display: grid; gap: 7px; color: #dfe8ee; font-size: .74rem; font-weight: 650; }
.security-revoke-panel textarea { width: 100%; min-height: 78px; resize: vertical; }
.security-revoke-panel .dialog-actions { margin: 0; padding: 0; border-top: 0; background: none; }
@media (max-width: 680px) {
  .account-security-trigger { margin-top: 8px; margin-left: 0; }
  .section-heading-actions { width: 100%; justify-content: stretch; }
  .section-heading-actions .button { flex: 1 1 150px; }
  .security-recovery-section { grid-template-columns: 1fr; }
  .security-recovery-section .button { width: 100%; }
  .security-credential-row { align-items: flex-start; flex-direction: column; }
  .security-credential-row .button { width: 100%; }
}

/* Proof reads as a sentence, not a chip row. */
#landing-view .hero-proofline { display: grid; gap: 6px; }
#landing-view .hero-proofline span { font-family: Inter, "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; font-weight: 500; font-size: .92rem; letter-spacing: 0; text-transform: none; color: rgba(214, 222, 235, .82); white-space: normal; }
.verification-context-status {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent, #72e6c2) 28%, transparent);
  border-radius: .75rem;
  color: var(--text, #f5f7fb);
  background: color-mix(in srgb, var(--accent, #72e6c2) 7%, transparent);
  font-size: .92rem;
}
.onboarding-supporting-source { margin-left: .55rem; opacity: .78; }

/* Guided walkthrough banner and operator-guide coaching */
.training-tour-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.training-tour-step { font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acid); }
.training-tour-actions { margin-left: auto; display: flex; gap: .4rem; }
.training-loop-actions { margin: .4rem 0 .6rem; }
.training-step-show { background: none; border: 0; padding: 0; margin-top: .25rem; color: var(--cyan); cursor: pointer; font: inherit; font-size: .78rem; text-decoration: underline; }
.training-coach { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.training-coach-prompts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.training-coach-prompts .chip { border: 1px solid var(--line-bright); border-radius: 999px; padding: .3rem .7rem; background: transparent; color: var(--ink); font: inherit; font-size: .76rem; cursor: pointer; }
.training-coach-form textarea { width: 100%; }
.training-coach-findings, .training-coach-questions { margin: .5rem 0 .5rem 1.1rem; }
.uncertainty-badge { font-family: ui-monospace, monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* v3.0 phone bleed guard (CalVer 2028.11.588): long identifiers (receipts,
   digests, case refs) and pill rows wrap inside their card instead of widening
   grid tracks past the viewport; the phone tab strip becomes a two-column grid
   so every workspace tab is visible without a horizontal scroll. Presentation only. */
.workspace-content p,.workspace-content small,.workspace-content strong,.workspace-content h3,.workspace-content code,.workspace-content .tag,.workspace-content .status-pill,.dialog-shell p,.dialog-shell small,.dialog-shell code,.dialog-shell strong{overflow-wrap:anywhere}
.workspace-content .tag,.workspace-content .status-pill{max-width:100%;white-space:normal}
.attention-rvo-citation{grid-column:2}
.deadline-row>*,.retained-lesson-item>*,.intake-card-header>*,.case-card-header>*,.attention-item>*,.team-row>*,.artifact-row>*,.retained-lesson-section,.retained-lesson-list,.retained-lesson-item,.deadline-list{min-width:0}
@media (max-width:680px){
.sign-in-dialog-shell,.recovery-dialog-shell,.account-security-dialog-shell{width:auto;max-width:100%}
.attention-item{grid-template-columns:minmax(0,1fr)}
.attention-item>*,.attention-item p,.attention-owner,.attention-evidence-cue,.attention-open-case,.attention-open-destination{grid-column:1}
.attention-item>.tag{justify-self:start}
.ai-data-use-actions,.operating-policy-actions,.selected-source-policy-actions{grid-template-columns:minmax(0,1fr)}
.ai-data-use-actions p,.operating-policy-actions p,.selected-source-policy-actions p{max-width:none}
.nav-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:14px 0 0;padding:0;overflow:visible}
.nav-tabs.has-overflow:not(.at-end)::after{display:none}
.nav-tab{min-width:0;padding:9px 10px;gap:6px;font-size:.8rem}
.nav-tab span{min-width:20px;padding:1px 5px;font-size:.62rem}
.intake-fields,.case-fact-grid{grid-template-columns:minmax(0,1fr)}
}
/* v3.0 legibility floor (CalVer 2028.11.588): no workspace or dialog text
   below 12px, secondary text at 4.5:1 or better, eyebrows and labels raised.
   Presentation only. */
.workspace-shell,.dialog-shell{--dim:#98a4b4}
body.platform-mode .workspace-shell,body.platform-mode .dialog-shell{--dim:#98a4b4}
.workspace-shell .eyebrow,.workspace-shell .nav-kicker,.dialog-shell .eyebrow{font-size:.72rem;letter-spacing:.16em}
.workspace-shell small,.dialog-shell small,.workspace-shell .tag,.workspace-shell .status-pill,.dialog-shell .tag,.workspace-shell code,.dialog-shell code,.hash-line,.audit-integrity,.audit-actor,.audit-resource,.audit-sequence,.attention-case-ref,.attention-lane-tag,.attention-owner,.attention-evidence-cue,.attention-rvo-citation,.case-overview-label,.response-basis-label,.onboarding-path-state,.product-context-group-label,.workspace-focus-state,.workspace-focus-question-evidence,.response-path-boundary,.response-basis-boundary,.product-context-filter-status,.product-context-filter-note,.workspace-shell dt,.workspace-shell output{font-size:.78rem}
.case-authority-note,.case-stage-note{font-size:.8rem !important}
.workspace-shell .tag,.workspace-shell .status-pill,.dialog-shell .tag{letter-spacing:.05em}
.workspace-lifecycle li{font-size:.76rem}
.workspace-lifecycle li span{width:24px;height:24px;font-size:.66rem}
.workspace-lifecycle small{font-size:.72rem}
.workspace-lifecycle > p,.workspace-priority > p{font-size:.7rem}
.workspace-priority-link{font-size:.74rem}
.workspace-priority-link b{font-size:.7rem}
.continuity-step-index{width:20px;height:20px;font-size:.62rem}
.hash-line{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.workspace-shell p,.dialog-shell p,.workspace-shell li{line-height:1.55}
.workspace-shell .button,.dialog-shell .button{font-size:.82rem}
@media (max-width:680px){
.workspace-lifecycle li{font-size:.7rem}
.workspace-priority-link{font-size:.72rem}
.workspace-shell p,.dialog-shell p{font-size:max(.92rem,14px)}
.workspace-shell h1{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.05}
}
/* Legibility floor, platform-mode priority: the signed-in body class carries
   size rules that outrank plain class selectors, so the floor is restated here. */
body.platform-mode .workspace-lifecycle li{font-size:.72rem !important;line-height:1.2}
body.platform-mode .workspace-lifecycle li span{width:24px;height:24px;font-size:.66rem !important}
body.platform-mode .workspace-lifecycle small,body.platform-mode .workspace-lifecycle > p,body.platform-mode .workspace-priority > p{font-size:.72rem !important}
body.platform-mode .audit-context span,body.platform-mode .audit-integrity,body.platform-mode .audit-actor,body.platform-mode .audit-resource,body.platform-mode .hash-line{font-size:.78rem !important}
body.platform-mode .audit-sequence,body.platform-mode .response-path-marker,body.platform-mode .continuity-step-index,body.platform-mode .onboarding-path-step-number{font-size:.68rem !important}
body.platform-mode .attention-lane-tag{font-size:.74rem !important;padding:3px 8px}
body.platform-mode .workspace-attention-lane b{font-size:.64rem !important}
body.platform-mode .workspace-attention-lane small{font-size:.6rem !important}
body.platform-mode .workspace-priority-link{font-size:.74rem !important}
body.platform-mode .workspace-priority-link b{font-size:.7rem !important}
body.platform-mode .nav-tab span{font-size:.68rem !important}
body.platform-mode .workspace-shell label,body.platform-mode .workspace-shell output,body.platform-mode .workspace-shell strong,body.platform-mode .workspace-shell dt,body.platform-mode .workspace-shell dd{font-size:max(.8rem,12.5px)}
body.platform-mode .workspace-shell .eyebrow,body.platform-mode .workspace-shell .nav-kicker{font-size:.74rem !important}
body.platform-mode .attention-case-ref,body.platform-mode .audit-context span,body.platform-mode .audit-actor,body.platform-mode .audit-resource{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
body.platform-mode .audit-context{flex-wrap:wrap;min-width:0}
body.platform-mode .workspace-assurance-strip span,body.platform-mode .workspace-focus-lanes span,body.platform-mode .workspace-focus-question span{font-size:.72rem !important}
body.platform-mode .workspace-lifecycle li,body.platform-mode .workspace-lifecycle li span{color:#a6b1bf}
body.platform-mode .workspace-lifecycle li.is-current,body.platform-mode .workspace-lifecycle li.is-current span{color:var(--ink)}
body.platform-mode .workspace-lifecycle small{color:#9aa6b5}
.audit-integrity-details{margin-top:6px}
.audit-integrity-details summary{cursor:pointer;color:var(--dim);font-size:.78rem}
.audit-integrity-details[open] summary{margin-bottom:4px}

/* External access panel (CalVer 2028.11.588): token capability grid, one-time token reveal. */
.api-token-capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.api-token-capabilities legend{padding:0 5px;color:var(--muted);font-size:.78rem}
.api-token-capability{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:500}
.api-token-capability input{width:auto;accent-color:var(--cyan)}
.token-reveal{width:100%;margin-top:10px;border:1px solid rgba(117,185,248,.35);border-radius:9px;padding:11px 12px;color:var(--ink);background:#0b1220;font:.8rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;resize:none}
.connections-subheading{margin:18px 0 8px;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.section-heading-actions{display:flex;align-items:center;gap:10px}
@media (max-width:680px){.api-token-capabilities{grid-template-columns:minmax(0,1fr)}}
/* Phone sidebar (CalVer 2028.11.588): the three "Waiting on you" chips stack
   in one column under 420px so each label reads on one line. */
@media (max-width:420px){
body.platform-mode .workspace-priority-list{grid-template-columns:minmax(0,1fr);gap:5px}
body.platform-mode .workspace-priority-link{grid-template-columns:8px minmax(0,1fr) auto;min-height:38px;padding:6px 8px}
}

/* Landing alignment with the investor narrative (CalVer 2028.11.588): forces,
   the PSIRT distinction, the PSIRTling comparison, and tiers. Also ends two
   overlaps: gallery metric cells that could not wrap, and the setup step chips
   pulled up over the field label. */
.shot-metrics{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
body:not(.platform-mode) #landing-view .product-gallery-grid > .product-shot.is-spotlight .shot-metrics{grid-template-columns:repeat(auto-fit,minmax(88px,1fr)) !important}
.shot-metrics span{min-width:0}
.shot-metrics b{font-size:.92rem;overflow-wrap:anywhere}
.shot-metrics small{font-size:.58rem;letter-spacing:.04em;overflow-wrap:anywhere}
.field-label{display:block;margin:0 0 6px;line-height:1.45}
.field-label .optional{display:block;margin-top:2px;color:var(--muted);font-weight:500}
.setup-handoff{margin:12px 0 16px;font-size:.6rem}
@media (max-width:560px){.setup-handoff{grid-template-columns:minmax(0,1fr);gap:4px;font-size:.62rem}.setup-handoff i{display:none}}
.forces-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 22px}
.forces-grid article{position:relative;min-width:0;padding:22px 20px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,27,40,.72),rgba(9,14,22,.9))}
.force-index{display:inline-block;margin-bottom:10px;color:#f09d70;font:700 .7rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.forces-grid h3{margin:0 0 8px;font-size:1.05rem;letter-spacing:-.01em}
.forces-grid p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.why-now-grid p strong{color:var(--ink)}
.distinction,.expert-room{margin:56px 0}
.distinction-intro,.expert-intro{max-width:760px}
.distinction-intro h2,.expert-intro h2{margin:8px 0 12px;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;letter-spacing:-.02em}
.distinction-intro p,.expert-intro p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
.distinction-table{width:100%;margin-top:22px;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.9rem}
.distinction-table th,.distinction-table td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.distinction-table thead th{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,14,20,.7)}
.distinction-table tbody th{color:var(--muted);font-weight:650;background:rgba(10,14,20,.45);width:20%}
.distinction-table tbody tr:last-child th,.distinction-table tbody tr:last-child td{border-bottom:0}
.distinction-table .is-psirt{color:var(--ink);background:rgba(117,185,248,.08)}
.expert-table{display:grid;gap:0;margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.9rem}
.expert-table [role="row"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-bottom:1px solid var(--line)}
.expert-table [role="row"]:last-child{border-bottom:0}
.expert-table [role="cell"],.expert-table [role="columnheader"]{padding:13px 16px;line-height:1.5;color:var(--muted)}
.expert-table [role="columnheader"]{font-size:.78rem;font-weight:700;letter-spacing:.02em;background:rgba(10,14,20,.7)}
.expert-table .is-remedis{color:var(--ink);background:rgba(137,211,177,.07)}
.expert-boundary{max-width:760px;margin:16px 0 0;color:var(--muted);font-size:.86rem;line-height:1.55}
.tier-name{display:inline-block;margin-bottom:8px;padding:3px 9px;border:1px solid rgba(117,185,248,.35);border-radius:999px;color:#9bd7f3;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:820px){.forces-grid{grid-template-columns:minmax(0,1fr)}.distinction-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.distinction-table table{min-width:560px}.expert-table [role="row"]{grid-template-columns:minmax(0,1fr)}.expert-table [role="row"] [role="cell"]:first-child{border-bottom:1px dashed var(--line)}.expert-table .expert-head [role="columnheader"]:first-child{display:none}}
/* Gallery mockups: each metric cell is a label over a value, at every width;
   the overlaid caption gets its own room below the mockup so it never sits
   on the metric row; the depth canvas stays beneath every section. */
.shot-metrics > span{display:grid !important;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start}
.shot-metrics small,.shot-metrics b{display:block;min-width:0}
body.landing-compact:not(.platform-mode) .product-shot .shot-window{padding-bottom:68px}
#landing-view > section,#landing-view > .hero-grid{position:relative;z-index:1}
/* Hero mockup: below 1240px the status pill starves the PSIRTling sentence
   (a 90px text column beside a 277px pill). The pill drops under the text. */
@media (max-width:1240px){.workspace-psirtling{grid-template-columns:31px minmax(0,1fr)}.workspace-psirtling > :nth-child(3){grid-column:2;justify-self:start}}
/* Public header (CalVer 2028.11.588): the two account buttons must never wrap
   or slide over the story navigation. The header grid now gives the nav the
   remaining width; below 1180px the nav tightens, below 1080px it yields to
   the existing compact route (the chapter rail and the setup buttons). */
body:not(.platform-mode) .site-header{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px}
body:not(.platform-mode) .public-nav{justify-self:center;flex-wrap:nowrap;min-width:0}
body:not(.platform-mode) .header-actions .button{white-space:nowrap}
@media (max-width:1180px){body:not(.platform-mode) .public-nav{gap:18px}body:not(.platform-mode) .public-nav a{font-size:.68rem}}
@media (max-width:1080px){body:not(.platform-mode) .public-nav{display:none}}

/* Perimeter cursor: translucent boundary that follows the pointer and settles on the control in scope. */
.perimeter-cursor{position:fixed;left:0;top:0;width:30px;height:30px;border-radius:15px;pointer-events:none;z-index:2147483000;opacity:0;border:1px solid rgba(117,185,248,.42);background:rgba(117,185,248,.07);box-shadow:0 0 0 1px rgba(10,11,16,.35) inset,0 0 18px rgba(117,185,248,.16);will-change:transform,width,height;transition:opacity .28s ease,border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
.perimeter-cursor::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 0deg,rgba(117,185,248,0) 0deg,rgba(117,185,248,0) 250deg,rgba(117,185,248,.9) 320deg,rgba(117,185,248,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:perimeter-sweep 2.6s linear infinite;opacity:.9}
.perimeter-cursor::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(117,185,248,.85);transition:opacity .2s ease,transform .2s ease}
.perimeter-cursor.is-visible{opacity:1}
.perimeter-cursor.is-idle{opacity:.35}
.perimeter-cursor.is-locked{border-color:rgba(117,185,248,.72);background:rgba(117,185,248,.05);box-shadow:0 0 0 1px rgba(10,11,16,.35) inset,0 0 22px rgba(117,185,248,.22)}
.perimeter-cursor.is-locked::before{animation-play-state:paused;opacity:0}
.perimeter-cursor.is-locked::after{opacity:0;transform:scale(.4)}
.perimeter-cursor.is-pressed{border-color:rgba(251,154,98,.75);box-shadow:0 0 0 1px rgba(10,11,16,.35) inset,0 0 20px rgba(251,154,98,.24)}
@keyframes perimeter-sweep{to{transform:rotate(360deg)}}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.perimeter-cursor{display:none}}

/* Sticky header: opaque enough that scrolled section text never reads through it behind the nav. */
body.landing-compact:not(.platform-mode) .site-header{background:rgba(12,14,19,.985);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Audit chain verification control above the ledger. */
.audit-verify{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 18px}
.audit-verify .hash-line{margin:0;flex:1 1 320px;min-width:0;overflow-wrap:anywhere}
#audit-verify-result[data-state="valid"]{color:#7ee9d0}
#audit-verify-result[data-state="invalid"]{color:var(--danger)}