/* Product page only: the eight-station walkthrough layout and the rulebook compiler, lifted from the pre-r5 homepage (site.css at a7523b9). */
/* Eight-station walkthrough */
.hiw-grid { display:grid; grid-template-columns:20% minmax(0,1fr); position:relative; }
.marker-menu { left:20%; top:100%; }
.marker-station { left:56%; top:100%; }
.hiw-grid > .marker-top, .hiw-sub > .marker-top { top:0; }
.hiw-menu-wrap { min-width:0; border-right:1px solid var(--line-solid); }
.hiw-menu { position:sticky; top:calc(var(--nav-h) + 8px); display:flex; flex-direction:column; gap:4px; padding:32px 24px; }
.hiw-link { display:flex; align-items:center; gap:10px; padding:8px 0; color:var(--n500); text-decoration:none; font-size:14px; }
.hiw-link { color:var(--n600); }
.hiw-link.is-active { color:var(--n900); font-weight:500; }
.hiw-link:hover { color:var(--n900); }
.st-emblem { width:240px; height:240px; display:block; margin:0 0 20px -16px; }
.st-thumb { width:28px; height:28px; flex:none; opacity:.6; }
.hiw-link.is-active .st-thumb { opacity:1; }
.st-emblem.is-missing, .st-thumb.is-missing { border:1px dashed var(--n300); border-radius:50%; background:transparent; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); }
.hiw-stations { min-width:0; }
.hiw-sub { scroll-margin-top:24px; position:relative; }
.hiw-sub + .hiw-sub { border-top:1px solid var(--line-solid); }
.hiw-split { display:grid; grid-template-columns:56% 44%; }
.hiw-copy { align-self:center; }
.hiw-copy .h3 { margin-top:12px; }
.hiw-copy p:not(.eyebrow) { margin-top:16px; }
.hiw-visual { border-left:1px solid var(--line-solid); display:flex; align-items:center; justify-content:center; padding:32px 16px; container-type:inline-size; }

/* The compiler: provenance stays readable while each fact and rule is revealed. */
#rulebook .eyebrow + .h4 { margin-top:12px; }
#rulebook .h4 + p { margin-top:16px; }
#rulebook .compiler { width:100%; min-width:0; min-height:560px; border:1px solid var(--n200); border-radius:16px; overflow:hidden; background:#fff; }
#rulebook .compiler-bar { display:flex; align-items:stretch; justify-content:space-between; gap:12px; height:44px; border-bottom:1px solid var(--n200); background:var(--n50); }
#rulebook .compiler-tabs { display:flex; align-items:stretch; min-width:0; overflow-x:auto; scrollbar-width:thin; }
#rulebook .compiler-tab { flex:none; padding:0 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--n600); font:400 11px/1.4 var(--font-mono); text-transform:uppercase; white-space:nowrap; cursor:pointer; }
#rulebook .compiler-tab[aria-selected="true"], #rulebook .compiler-tab.is-active { color:var(--n900); border-bottom-color:var(--n900); }
#rulebook .compiler-tab:focus-visible { outline-offset:-4px; }
#rulebook .lifecycle { display:flex; align-items:center; gap:5px; flex:none; padding-right:12px; font:400 11px/1 var(--font-mono); color:var(--n600); white-space:nowrap; }
#rulebook .lifecycle .tag { padding:4px 6px; font:400 11px/1 var(--font-mono); }
#rulebook .compiler-body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.2fr); gap:1px; min-height:515px; background:var(--n200); }
#rulebook .compiler-panel[hidden] { display:none; }
#rulebook .compiler-pane { min-width:0; padding:24px 20px; background:#fff; }
#rulebook .compiler-pane > .eyebrow { margin-bottom:24px; }
#rulebook .compiler-source { color:var(--n800); font:400 15px/1.7 var(--font-sans); }
#rulebook .source-caption { font:400 10px/1.65 var(--font-mono); color:var(--n500); }
#rulebook .source-caption + p { margin-top:16px; }
#rulebook .compiler-source p + .source-caption { margin-top:20px; }
#rulebook .source-note { margin-top:16px; padding:16px; border:1px solid var(--n200); border-radius:12px 12px 12px 2px; background:var(--n50); }
#rulebook .ex { --ex-tint:#dcfce7; --ex-line:var(--green700); color:inherit; background:transparent; border-bottom:1px solid transparent; transition:background-color .25s,border-color .25s; }
#rulebook .ex-exception { --ex-tint:var(--amber50); --ex-line:var(--amber600); }
#rulebook .ex-condition { --ex-tint:#f0fdf4; }
#rulebook .ex.on, #rulebook .compiler:not([data-phase]) .ex { background:var(--ex-tint); border-bottom-color:var(--ex-line); }
#rulebook .ex::after { content:attr(data-ref); display:inline-block; position:relative; top:-.4em; margin-left:2px; color:var(--n700); font:500 8px/1 var(--font-mono); opacity:0; transition:opacity .2s; }
#rulebook .ex.on::after, #rulebook .compiler:not([data-phase]) .ex::after { opacity:1; }
#rulebook .compiler-extracted { background:var(--n50); }
#rulebook .compiler-facts { list-style:none; margin:0; padding:0 0 0 12px; }
#rulebook .fact { position:relative; min-width:0; padding:0 0 18px; font:400 12px/1.65 var(--font-mono); overflow-wrap:anywhere; }
#rulebook .fact .tag { margin-bottom:5px; font:400 10px/1 var(--font-mono); }
#rulebook .fact::before { content:''; position:absolute; left:-15px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--green500); transform:scale(0); transition:transform .2s; }
#rulebook .fact.on::before, #rulebook .compiler:not([data-phase]) .fact::before { transform:scale(1); }
#rulebook .prov { display:block; margin-top:5px; color:var(--n500); font:400 10px/1.6 var(--font-mono); }
#rulebook .vocabulary { margin-top:8px; padding-top:20px; border-top:1px solid var(--n200); }
#rulebook .vocabulary > .eyebrow { font-size:10px; letter-spacing:.12em; }
#rulebook .vocabulary-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#rulebook .vocabulary-chips > * { min-width:0; padding:4px 6px; border:1px solid var(--n200); border-radius:4px; background:#fff; font:400 11px/1.5 var(--font-mono); overflow-wrap:anywhere; }
#rulebook .compiler-compiled { background:var(--n950); color:#efe9dc; font:400 12.5px/1.6 var(--font-mono); }
#rulebook .compiler-compiled > .eyebrow { color:var(--n400); }
#rulebook .compiler-code { max-width:100%; margin:0; overflow-x:auto; padding-bottom:12px; font:inherit; white-space:pre; scrollbar-width:thin; scrollbar-color:var(--n600) var(--n950); }
#rulebook .compiler-code:focus-visible { outline-color:#efe9dc; outline-offset:2px; }
#rulebook .compiler-code code { display:block; width:max-content; min-width:100%; font:inherit; white-space:normal; }
#rulebook .compiler-code .ln { display:block; min-height:1.6em; white-space:pre; }
#rulebook .compiler-code .type { white-space:pre; }
#rulebook .compiler-code .kw { color:var(--n400); }
#rulebook .compiler-code .lit { color:var(--green500); }
#rulebook .compile-status { display:grid; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--n700); font:400 11px/1.65 var(--font-mono); }
#rulebook .compile-status > * { overflow-wrap:anywhere; }
#rulebook .compile-status .check { color:var(--green500); }
#rulebook .compiler[data-phase] .fact, #rulebook .compiler[data-phase] .vocabulary, #rulebook .compiler[data-phase] .ln, #rulebook .compiler[data-phase] .compile-status [data-step] { opacity:0; transform:translateY(3px); transition:opacity .2s,transform .2s; }
#rulebook .compiler[data-phase] .fact.on, #rulebook .compiler[data-phase] .vocabulary.on, #rulebook .compiler[data-phase] .ln.on, #rulebook .compiler[data-phase] .compile-status [data-step].on { opacity:1; transform:none; }
#rulebook .compiler[data-phase] .ln .type { max-width:0; transition:max-width .11s steps(24); }
#rulebook .compiler[data-phase] .ln.on .type { max-width:100%; }
#rulebook .compiler.is-resetting *, #rulebook .compiler.is-resetting *::before, #rulebook .compiler.is-resetting *::after { transition:none !important; animation:none !important; }
#rulebook .rulebook-notes > .zone-box { padding-top:24px; padding-bottom:24px; }
#rulebook .rulebook-notes p:not(.eyebrow) { font-size:14px; line-height:1.65; }
@media (max-width:1023px) {
  #rulebook .compiler-body { grid-template-columns:minmax(0,1fr); }
  #rulebook .compiler { min-height:0; }
  #rulebook .compiler-pane { padding:24px; }
}
@media (max-width:700px) {
  #rulebook .compiler-bar { height:auto; min-height:44px; flex-wrap:wrap; gap:0; }
  #rulebook .compiler-tabs { width:100%; min-height:44px; }
  #rulebook .lifecycle { width:100%; min-height:36px; padding:0 12px; border-top:1px solid var(--n200); }
  #rulebook .compiler-pane { padding:20px 16px; }
}

/* compiler: compact */
@media (min-width:1024px) {
  #rulebook .compiler-body { min-height:0; }
  #rulebook .compiler-pane { padding:16px 18px; }
  #rulebook .compiler-pane > .eyebrow { margin-bottom:12px; }
  #rulebook .source-text, #rulebook .compiler-pane p.doc { font-size:13px; line-height:1.55; }
  #rulebook .fact { padding-bottom:10px; font-size:11px; line-height:1.5; }
  #rulebook .fact .tag { margin-bottom:2px; }
  #rulebook .vocabulary { margin-top:4px; padding-top:12px; }
  #rulebook .vocabulary-chips { gap:4px; margin-top:8px; }
  #rulebook .vocabulary-chips > * { padding:2px 5px; font-size:10px; }
  #rulebook .compiler-code { font-size:11px; }
  #rulebook .compiler-code .ln { min-height:1.45em; line-height:1.45; }
  #rulebook .compile-status { gap:6px; margin-top:12px; padding-top:12px; font-size:10.5px; }
}
@media (min-width:1024px) { #rulebook .compiler-source p { font-size:13.5px; line-height:1.6; } #rulebook .source-caption + p { margin-top:10px; } #rulebook .compiler-source p + .source-caption { margin-top:12px; } }
.hiw-split > * { min-width:0; }
#product-hero { padding-top:calc(var(--nav-h) + 72px); background:#efe9dc; }
#product-hero .zone-box { padding-bottom:56px; }
#product-hero .display { font-size:clamp(34px,4.6vw,60px); }
#product-hero .sub { margin-top:20px; }
#product-hero .team-strip { max-width:960px; margin:40px auto 0; }
#product-hero .hero-actions { margin-top:32px; }
@media (max-width:1023px) {
  .hiw-grid { grid-template-columns:minmax(0,1fr); }
  .hiw-menu-wrap { display:none; }
  .st-emblem { width:160px; height:160px; margin-left:-10px; }
  .hiw-grid > .ew-marker, .hiw-sub > .ew-marker { display:none; }
  .hiw-split { grid-template-columns:minmax(0,1fr); }
  .hiw-copy { padding-bottom:24px; }
  .hiw-visual { border-left:0; padding-top:0; padding-bottom:40px; }
}
@media (max-width:767px) { .hiw-visual { padding-left:16px; padding-right:16px; } .hiw-copy { padding-top:32px; } }