:root {
  color-scheme: dark;
  --night: #07111d;
  --night-soft: #0c1a2a;
  --ink-light: #f5f7fb;
  --muted-light: #b9c5d4;
  --gold-light: #f0bf48;
  --hg-primary: #1f3a5f;
  --hg-primary-700: #16294a;
  --hg-primary-100: #e7eef7;
  --hg-accent: #c9a227;
  --hg-bg-body: #f5f7fa;
  --hg-ink: #1a1f2e;
  --hg-ink-muted: #5a6478;
  --hg-border: #e3e7ee;
  --hg-red: #dc3545;
  --hg-orange: #fd7e14;
  --hg-yellow: #ffc107;
  --hg-green: #198754;
  --hg-blue: #0dcaf0;
  --yrg-source-ratatosk: #6f42c1;
  --font-ui: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: var(--night); color: var(--ink-light); font-family: var(--font-ui); }
a { color: inherit; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.topbar { position: absolute; inset: 0 0 auto; z-index: 10; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .65rem clamp(1.25rem, 3.5vw, 4.5rem); border-bottom: 1px solid rgba(240,191,72,.58); background: rgba(4,13,22,.84); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__icon { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; object-fit: contain; }
.brand__name { font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
.realm-nav { display: flex; align-items: center; gap: .1rem; }
.realm-nav__link { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .62rem; border-radius: 4px; color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 500; text-decoration: none; }
.realm-nav__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.realm-nav__link img { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fff; object-fit: contain; }
.realm-nav__cta { margin-left: .35rem; background: var(--gold-light); color: #101820; font-weight: 700; }
.nav-toggle { display: none; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; padding: .65rem .8rem; background: rgba(255,255,255,.08); color: #fff; }
.hero { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 6rem 1.5rem 3rem; background: url("yggdrasil-hero.png") center/cover no-repeat; }
.hero__veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 43%, rgba(5,13,22,.08), rgba(5,13,22,.42) 48%, rgba(5,13,22,.84) 100%), linear-gradient(180deg, rgba(5,13,22,.54), rgba(5,13,22,.16) 60%, #07111d 100%); }
.hero__content { position: relative; max-width: 64rem; text-align: center; text-shadow: 0 3px 18px rgba(0,0,0,.75); }
.hero__eyebrow, .section-kicker, .screen-kicker { margin: 0 0 .7rem; color: var(--gold-light); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .95; letter-spacing: -.055em; }
.hero__content > p:not(.hero__eyebrow) { max-width: 54rem; margin: 1.5rem auto 0; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.7; }
.hero__cta { display: inline-flex; margin-top: 1.8rem; padding: .82rem 1.1rem; border: 1px solid rgba(255,255,255,.48); border-radius: 5px; background: rgba(8,19,31,.62); font-weight: 700; text-decoration: none; backdrop-filter: blur(10px); }
.features { padding: 6rem clamp(1.25rem, 5vw, 5.5rem) 7rem; background: linear-gradient(180deg, #07111d, #0b1725); }
.features__header { max-width: 60rem; margin: 0 auto 4rem; text-align: center; }
.features__header h2 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.045em; }
.features__header > p:last-child { max-width: 44rem; margin: 1rem auto 0; color: var(--muted-light); font-size: 1.05rem; line-height: 1.7; }
.feature { display: grid; grid-template-columns: minmax(14rem,.52fr) minmax(0,1.48fr); align-items: center; gap: clamp(2rem,5vw,5rem); max-width: 90rem; margin: 0 auto 8rem; }
.feature__copy h3 { margin: .75rem 0 1rem; font-size: clamp(1.8rem,3vw,3rem); line-height: 1.08; }
.feature__copy p { color: var(--muted-light); font-size: 1rem; line-height: 1.75; }
.feature__copy > strong { display: inline-block; margin-top: .75rem; color: var(--gold-light); }
.feature__step { color: #78b8ef; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.product-screen { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: var(--hg-bg-body); box-shadow: 0 32px 70px rgba(0,0,0,.38); color: var(--hg-ink); }
.product-screen__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 2.55rem; padding: .55rem .8rem; border-bottom: 2px solid var(--hg-accent); background: var(--hg-primary); color: #fff; font-size: .72rem; }
.product-screen__bar > :last-child { justify-self: end; }
.product-screen__brand { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.product-screen__brand img { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; object-fit: contain; }
.product-screen__canvas { min-width: 0; padding: clamp(1rem,2.5vw,2rem); background: var(--hg-bg-body); }
.screen-header { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.3rem; }
.screen-header h4 { margin: 0; font-size: clamp(1.15rem,2vw,1.7rem); }
.screen-header p { margin: .35rem 0 0; color: var(--hg-ink-muted); font-size: .78rem; }
.screen-header .screen-kicker { margin: 0 0 .35rem; color: var(--hg-primary); font-size: .62rem; }
.screen-ref { color: var(--hg-ink-muted); font: .68rem/1.4 ui-monospace, monospace; }
.bootstrap-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(12rem,.5fr); gap: 1rem; }
.terminal { overflow: hidden; border-radius: 8px; background: #111827; color: #d8e6f3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.terminal__top { display: flex; align-items: center; gap: .3rem; padding: .55rem .7rem; background: #1c2738; }
.terminal__top span { width: .55rem; height: .55rem; border-radius: 50%; background: #5d6b7f; }
.terminal__top b { margin-left: .35rem; color: #93a4b8; font-size: .66rem; }
.terminal pre { margin: 0; padding: 1rem 1.1rem 1.2rem; font: .72rem/1.8 ui-monospace, monospace; white-space: pre-wrap; }
.terminal i { color: var(--gold-light); font-style: normal; }
.terminal pre span { color: #62d39a; }
.terminal em { color: #9acff7; font-style: normal; }
.screen-rail { display: grid; gap: .7rem; }
.screen-card { padding: .85rem; border: 1px solid var(--hg-border); border-radius: 8px; background: #fff; }
.screen-card span { display: block; margin-bottom: .25rem; color: var(--hg-ink-muted); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.screen-card strong { display: block; font-size: .82rem; line-height: 1.35; }
.screen-card small { display: block; margin-top: .3rem; color: var(--hg-ink-muted); font-size: .66rem; line-height: 1.4; }
.screen-card--accent { border-color: #d9b857; background: #fffbef; }
.status { display: inline-flex; align-items: center; padding: .22rem .45rem; border-radius: 999px; font-weight: 700; }
.status--purple { background: rgba(111,66,193,.28); color: #e2d5ff; }
.status--green { background: rgba(25,135,84,.22); color: #c5f2d8; }
.status--orange { background: rgba(253,126,20,.2); color: #ffd5b1; }
.status--blue { background: rgba(13,202,240,.2); color: #c4f5ff; }
.status--yellow { background: #fff2c7; color: #7a5b00; }
.feature--reverse { grid-template-columns: minmax(0,1.48fr) minmax(14rem,.52fr); }
.feature--reverse .feature__copy { order: 2; }
.feature--reverse .product-screen { order: 1; }
.feature--last { margin-bottom: 4rem; }
.metric-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; margin-bottom: 1rem; }
.metric-row > div { padding: .75rem; border: 1px solid var(--hg-border); border-radius: 7px; background: #fff; }
.metric-row span, .metric-row small { display: block; color: var(--hg-ink-muted); font-size: .62rem; }
.metric-row strong { display: block; margin: .2rem 0; color: var(--hg-primary); font-size: 1.35rem; }
.screen-grid { display: grid; gap: 1rem; }.screen-grid--wide { grid-template-columns: minmax(0,1.7fr) minmax(13rem,.55fr); }
.screen-card--primary { padding: 1.1rem; border-left: 3px solid var(--hg-primary); }
.screen-lead { margin: .45rem 0 1rem; font-size: .82rem; line-height: 1.65; }
.finding-list { display: grid; gap: .5rem; }.finding-list b { display: flex; gap: .65rem; align-items: center; padding: .55rem .65rem; border-radius: 5px; background: var(--hg-bg-body); font-size: .7rem; }.finding-list i { color: var(--hg-accent-700); font-style: normal; }
.trace-flow { display: flex; align-items: center; justify-content: space-between; gap: .45rem; min-height: 12rem; padding: 1.2rem; border: 1px solid var(--hg-border); border-radius: 9px; background: #fff; }
.trace-flow > b { color: #8a96a8; }.trace-node { flex: 1 1 0; min-width: 0; padding: .8rem .65rem; border: 2px solid var(--hg-primary); border-radius: 8px; background: var(--hg-primary-100); text-align: center; }.trace-node span,.trace-node small { display: block; color: var(--hg-ink-muted); font-size: .57rem; }.trace-node strong { display: block; margin: .3rem 0; font-size: .72rem; }.trace-node--demand { border-color: #a77a12; background: #fff7dd; }.trace-node--focus { border: 3px solid var(--hg-orange); box-shadow: 0 0 0 4px rgba(253,126,20,.1); }
.insight-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; margin-top: .75rem; }.insight-strip span { padding: .65rem; border-radius: 5px; background: var(--hg-primary); color: #fff; font-size: .64rem; line-height: 1.5; }.insight-strip b { display: block; color: #bddaf1; }
.browser-shell { display: grid; grid-template-columns: 11rem minmax(0,1fr) 11rem; min-height: 28rem; background: var(--hg-bg-body); color: var(--hg-ink); }
.browser-nav,.browser-inspector { padding: .85rem; background: #eef2f7; font-size: .64rem; }.browser-nav { display: grid; align-content: start; gap: .4rem; border-right: 1px solid var(--hg-border); }.browser-nav strong { font-size: .75rem; }.browser-nav input { width: 100%; padding: .45rem; border: 1px solid var(--hg-border); border-radius: 5px; color: var(--hg-ink); }.browser-nav span,.browser-inspector > span:first-child { margin-top: .35rem; color: var(--hg-ink-muted); font-size: .54rem; font-weight: 700; letter-spacing: .08em; }.browser-nav b { padding: .32rem .4rem; font-weight: 500; }.browser-nav .is-active { border-radius: 4px; background: #dce6f4; color: var(--hg-primary); }
.browser-work { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }.browser-toolbar { display: flex; align-items: center; gap: .45rem; padding: .7rem; border-bottom: 1px solid var(--hg-border); font-size: .62rem; }.toolbar-spacer { flex: 1; }.view-chip { padding: .3rem .5rem; border-radius: 999px; background: #fff8dd; color: #795a00; }.screen-button { display: inline-flex; padding: .4rem .55rem; border: 1px solid #9da7b4; border-radius: 5px; background: #fff; color: var(--hg-ink); font-size: .62rem; }.screen-button--primary { border-color: var(--hg-primary); background: var(--hg-primary); color: #fff; }
.graph-stage { position: relative; min-height: 20rem; overflow: hidden; background: radial-gradient(#d5dce6 1px, transparent 1px); background-size: 20px 20px; }.graph-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 7rem; min-height: 3.7rem; padding: .55rem; border: 2px solid var(--hg-primary); border-radius: 9px; background: var(--hg-primary-100); font-size: .7rem; font-weight: 700; text-align: center; }.graph-node small { display: block; margin-top: .2rem; color: var(--hg-ink-muted); font-size: .54rem; font-weight: 500; line-height: 1.4; }.graph-node--cap { top: 2.3rem; left: 9%; }.graph-node--focus { top: 7.5rem; left: 39%; border: 3px solid var(--hg-accent); }.graph-node:not(.graph-node--cap):not(.graph-node--focus):not(.graph-node--lower) { top: 2.3rem; right: 9%; }.graph-node--lower { bottom: 1.8rem; left: 39%; }.graph-stage > i { position: absolute; z-index: 1; height: 2px; background: #7b8798; transform-origin: left center; }.graph-stage > i:nth-of-type(1) { top: 5.7rem; left: 24%; width: 19%; transform: rotate(22deg); }.graph-stage > i:nth-of-type(2) { top: 9rem; left: 53%; width: 21%; transform: rotate(-20deg); }.graph-stage .edge-down { top: 11.2rem; left: 50%; width: 5.5rem; transform: rotate(90deg); }.semantic-url { padding: .55rem .7rem; overflow: hidden; border-top: 1px solid var(--hg-border); color: var(--hg-ink-muted); font: .55rem ui-monospace,monospace; white-space: nowrap; text-overflow: ellipsis; }
.browser-inspector { border-left: 1px solid var(--hg-border); }.browser-inspector > strong,.browser-inspector > small { display: block; }.browser-inspector > strong { margin: 1rem 0 .25rem; font-size: .8rem; }.browser-inspector > small { color: var(--hg-ink-muted); }.browser-inspector dl { display: grid; grid-template-columns: 1fr; gap: .15rem; margin: 1rem 0; }.browser-inspector dt { color: var(--hg-ink-muted); }.browser-inspector dd { margin: 0 0 .45rem; font-weight: 600; }
.chat-shell { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(17rem,.65fr); min-height: 28rem; background: var(--hg-bg-body); color: var(--hg-ink); }.chat-graph { padding: 1.3rem; }.mini-graph { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 17rem; background: radial-gradient(#d5dce6 1px,transparent 1px); background-size: 20px 20px; }.mini-graph > span { padding: .75rem; border: 2px solid var(--hg-primary); border-radius: 8px; background: var(--hg-primary-100); font-size: .68rem; font-weight: 700; text-align: center; }.mini-graph small { display: block; margin-top: .2rem; color: var(--hg-ink-muted); font-size: .55rem; }.mini-graph .is-focus { border-color: var(--hg-accent); }.munin-panel { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: 1rem; border-left: 1px solid var(--hg-border); background: #fff; }.munin-panel header { display: flex; align-items: center; gap: .5rem; }.munin-panel header img { width: 1.5rem; }.munin-panel header span { margin-left: auto; color: var(--hg-green); font-size: .55rem; }.chat-message { padding: .7rem; border-radius: 8px; font-size: .68rem; line-height: 1.5; }.chat-message--user { margin-left: 1.7rem; background: var(--hg-primary); color: #fff; }.chat-message--munin { background: var(--hg-primary-100); }.chat-message p { margin: .4rem 0; }.chat-message small { color: var(--hg-ink-muted); }.chat-input { align-self: end; padding: .7rem; border: 1px solid var(--hg-border-strong,#c8cfdb); border-radius: 6px; color: var(--hg-ink-muted); font-size: .65rem; }.chat-input span { float: right; }
.mcp-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) 12rem; gap: .8rem; }.code-card { overflow: hidden; border-radius: 8px; background: #101827; color: #cfe0ef; }.code-card > span { display: block; padding: .5rem .7rem; background: #1b2738; color: #8ba2b8; font-size: .6rem; text-transform: uppercase; }.code-card pre { margin: 0; padding: .85rem; font: .66rem/1.7 ui-monospace,monospace; white-space: pre-wrap; word-break: break-word; }.code-card--result { background: #0b2130; }
.diagram-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: #fff; color: var(--hg-ink); }.diagram-header strong,.diagram-header small { display: block; }.diagram-header small { margin-top: .2rem; color: var(--hg-ink-muted); font-size: .62rem; }.diagram-shell { display: grid; grid-template-columns: 10rem minmax(0,1fr) 10rem; min-height: 27rem; color: var(--hg-ink); }.diagram-shell > aside { display: grid; align-content: start; gap: .4rem; padding: .8rem; background: #edf2f8; }.diagram-shell > aside span { margin: .3rem 0; color: var(--hg-ink-muted); font-size: .54rem; font-weight: 700; letter-spacing: .08em; }.diagram-shell > aside b { padding: .4rem; border: 1px solid #a9b4c1; border-radius: 4px; font-size: .62rem; font-weight: 500; }.diagram-shell > aside .is-active { border-color: var(--hg-accent); background: #fff8db; }.diagram-canvas { position: relative; overflow: hidden; border-inline: 1px solid var(--hg-border); background: radial-gradient(#d5dce6 1px,transparent 1px); background-size: 20px 20px; }.diagram-node { position: absolute; z-index: 2; width: 7.5rem; padding: .75rem; border: 2px solid var(--hg-primary); border-radius: 7px; background: var(--hg-primary-100); font-size: .7rem; font-weight: 700; text-align: center; }.diagram-node small { display: block; margin-top: .2rem; color: var(--hg-ink-muted); font-size: .53rem; }.diagram-node--left { top: 5rem; left: 5%; }.diagram-node--focus { top: 5rem; left: 40%; border: 3px solid var(--hg-accent); }.diagram-node--right { top: 5rem; right: 5%; }.diagram-node--bottom { bottom: 4rem; left: 40%; }.diagram-edge { position: absolute; z-index: 1; top: 7rem; padding-top: .25rem; border-top: 2px solid #7a8798; color: var(--hg-ink-muted); font-size: .52rem; text-align: center; }.diagram-edge--one { left: 23%; width: 19%; }.diagram-edge--two { left: 59%; width: 19%; }
.change-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .7rem; }.operation-list { display: grid; gap: .55rem; }.operation { display: grid; grid-template-columns: 1.8rem minmax(0,1fr) 3rem auto; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--hg-border); border-radius: 7px; background: #fff; font-size: .65rem; }.operation > i { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; background: var(--hg-primary-100); color: var(--hg-primary); font-style: normal; }.operation span b,.operation span small { display: block; }.operation span small { margin-top: .2rem; color: var(--hg-ink-muted); }.operation em { font-style: normal; font-weight: 700; }.confidence-high { color: var(--hg-green); }.confidence-mid { color: var(--hg-orange); }.operation button { margin-left: .25rem; padding: .3rem .4rem; border: 1px solid #a4aebb; border-radius: 4px; background: #fff; font-size: .56rem; }.operation--instruction { background: #fffbef; }.instruction { padding: .45rem; border-radius: 4px; background: #fff; color: var(--hg-ink-muted); }.instruction b { display: block; margin-top: .2rem; color: var(--hg-primary); }
.history-layout { display: grid; grid-template-columns: minmax(12rem,.7fr) minmax(0,1.3fr); gap: 1rem; }.timeline { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--hg-border); border-radius: 8px; background: #fff; }.timeline > div { display: grid; grid-template-columns: 3rem 1rem 1fr; gap: .5rem; align-items: start; min-height: 4rem; font-size: .62rem; }.timeline-dot { position: relative; width: .75rem; height: .75rem; border: 2px solid var(--hg-primary); border-radius: 50%; background: #fff; }.timeline-dot::after { position: absolute; top: .75rem; left: .25rem; width: 1px; height: 3rem; background: var(--hg-border-strong,#c8cfdb); content: ""; }.timeline > div:last-child .timeline-dot::after { display: none; }.timeline-dot--gold { border-color: var(--hg-accent); background: #fff2bd; }.timeline p { margin: 0; }.timeline p strong,.timeline p small { display: block; }.timeline p small { margin-top: .2rem; color: var(--hg-ink-muted); }.diff-card { overflow: hidden; border: 1px solid var(--hg-border); border-radius: 8px; background: #fff; }.diff-card header { display: flex; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--hg-border); font-size: .67rem; }.diff-row { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; padding: .8rem; border-bottom: 1px solid var(--hg-border); font-size: .63rem; }.diff-row:last-child { border-bottom: 0; }.diff-row small { color: var(--hg-ink-muted); }.diff-row--add { background: #effaf4; }.diff-row--add b { color: var(--hg-green); }.diff-row--change { background: #fff8e5; }.diff-row--change b { color: #a97700; }
.run-layout { display: grid; grid-template-columns: minmax(11rem,.65fr) minmax(0,1.15fr) 11rem; gap: .8rem; }.run-steps { display: grid; gap: .5rem; }.run-steps > div { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: center; padding: .6rem; border: 1px solid var(--hg-border); border-radius: 6px; background: #fff; font-size: .62rem; }.run-steps i { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: var(--hg-green); color: #fff; font-style: normal; }.run-steps b,.run-steps small { display: block; }.run-steps small { margin-top: .15rem; color: var(--hg-ink-muted); }.provenance-card { padding: .9rem; border: 1px solid var(--hg-border); border-radius: 8px; background: #fff; }.provenance-card header span,.provenance-card header strong { display: block; }.provenance-card header span { color: var(--hg-ink-muted); font-size: .58rem; text-transform: uppercase; }.provenance-card header strong { margin-top: .2rem; font-size: .76rem; }.provenance-card dl { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; margin: 1rem 0 0; font-size: .62rem; }.provenance-card dt { color: var(--hg-ink-muted); }.provenance-card dd { margin: 0; font-weight: 600; }.confidence-bar { display: inline-block; width: 5rem; height: .35rem; margin-right: .4rem; overflow: hidden; border-radius: 999px; background: var(--hg-border); vertical-align: middle; }.confidence-bar i { display: block; height: 100%; background: var(--hg-green); }
.closing { max-width: 76rem; margin: 2rem auto 0; padding: 5rem 2rem; border: 1px solid rgba(240,191,72,.35); border-radius: 16px; background: radial-gradient(circle at 50% 0,rgba(201,162,39,.16),transparent 45%),#0a1623; text-align: center; }.closing img { width: 4rem; height: 4rem; border-radius: 50%; background: #fff; object-fit: contain; }.closing h2 { max-width: 50rem; margin: .6rem auto 1.5rem; font-size: clamp(2rem,4vw,4rem); line-height: 1.05; }.closing button { padding: .85rem 1.1rem; border: 0; border-radius: 5px; background: var(--gold-light); color: #101820; font-weight: 700; cursor: pointer; }
.beta-dialog { width: min(33rem,calc(100vw - 2rem)); padding: 2rem; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: #111d2c; color: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.beta-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.beta-dialog h2 { margin: 0 0 .6rem; }
.beta-dialog > p { color: var(--muted-light); line-height: 1.6; }
.dialog-close { position: absolute; top: .7rem; right: .85rem; border: 0; background: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.beta-dialog label { display: block; margin: 1rem 0 .45rem; font-size: .82rem; font-weight: 600; }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: .55rem; }
.email-row input { min-width: 0; padding: .78rem; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; background: #09131f; color: #fff; }
.email-row button { border: 0; border-radius: 5px; padding: .78rem 1rem; background: var(--gold-light); color: #141414; font-weight: 700; cursor: pointer; }
.consent-row { display: flex !important; align-items: flex-start; gap: .55rem; color: var(--muted-light); line-height: 1.45; }
.form-status { min-height: 1.4rem; color: #8ee5b8; font-size: .8rem; }
@media (max-width: 1100px) { .topbar { gap: .75rem; } .realm-nav__link { padding-inline: .35rem; font-size: .68rem; } .realm-nav__link img { width: 1.1rem; height: 1.1rem; } .feature { grid-template-columns: 1fr; max-width: 72rem; } .feature__copy,.feature--reverse .feature__copy { order: 1; max-width: 43rem; } .product-screen,.feature--reverse .product-screen { order: 2; } .bootstrap-layout { grid-template-columns: minmax(0,1fr) 14rem; } }
@media (max-width: 820px) { .topbar { min-height: 4rem; } .nav-toggle { display: inline-flex; align-items: center; gap: .45rem; } .realm-nav { position: absolute; top: 100%; right: 1rem; display: grid; min-width: 15rem; padding: .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: #0a1624; opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: 140ms ease; } .realm-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .realm-nav__link img { display: block; } .realm-nav__cta { margin-left: 0; } .hero { min-height: 88svh; } .features { padding-top: 4.5rem; } .bootstrap-layout,.screen-grid--wide,.mcp-layout,.run-layout { grid-template-columns: 1fr; } .screen-rail { grid-template-columns: repeat(3,1fr); } .product-screen__bar { grid-template-columns: 1fr auto; } .product-screen__bar > :nth-child(2) { display: none; } .trace-flow { overflow-x: auto; justify-content: flex-start; }.trace-node { flex: 0 0 7rem; }.browser-shell { grid-template-columns: 8rem minmax(0,1fr); }.browser-inspector { display: none; }.chat-shell { grid-template-columns: 1fr; }.munin-panel { border-top: 1px solid var(--hg-border); border-left: 0; }.diagram-shell { grid-template-columns: 8rem minmax(20rem,1fr); overflow-x: auto; }.diagram-shell > aside:last-child { display: none; }.history-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { h1 { font-size: clamp(2.7rem,14vw,4rem); } .features__header { text-align: left; } .feature { margin-bottom: 5rem; } .product-screen__canvas { padding: .8rem; } .screen-header { display: block; } .screen-ref { display: block; margin-top: .5rem; } .screen-rail,.metric-row,.insight-strip { grid-template-columns: 1fr 1fr; } .terminal pre { font-size: .64rem; } .email-row { grid-template-columns: 1fr; }.browser-shell { grid-template-columns: 1fr; }.browser-nav { display: none; }.graph-stage { min-height: 18rem; }.mini-graph { overflow-x: auto; justify-content: flex-start; }.operation { grid-template-columns: 1.8rem 1fr 3rem; }.operation > div { grid-column: 2 / -1; }.diff-row { grid-template-columns: 1.5rem 1fr; }.diff-row small { grid-column: 2; }.closing { padding: 3.5rem 1rem; } }