/* Relay ITSM marketing site. Inherits the real design system from ../styles.css — tokens, the
   three self-hosted faces, base element styles. Everything here is marketing-page structure
   only: no new colours, no new radii, no new motion timings.

   Marketing gets ONE liberty the product doesn't: larger type and more air. Density rules are
   for people who live in a tool eight hours a day, not for someone deciding whether to. */

/* ---- page scaffolding ---- */
body{background:var(--surface-canvas);color:var(--text-primary);font:var(--type-body)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-8)}
section{padding:var(--s-13) 0;border-top:var(--bw-hairline) solid var(--border-hairline)}
section:first-of-type{border-top:0}
h1,h2,h3,h4{text-wrap:balance}
h2{font:var(--fw-semibold) var(--fs-3xl)/1.15 var(--font-display);letter-spacing:var(--ls-display);margin-bottom:var(--s-4)}
h3{font:var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-display);letter-spacing:var(--ls-heading)}
.eyebrow{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-accent);margin-bottom:var(--s-5);display:block}
.lede{font:var(--fw-regular) var(--fs-lg)/var(--lh-body) var(--font-sans);color:var(--text-secondary);max-width:62ch;text-wrap:pretty}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mut{color:var(--text-muted)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--surface-canvas) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.nav-in{max-width:1120px;margin:0 auto;padding:var(--s-4) var(--s-8);display:flex;align-items:center;gap:var(--s-7)}
.brand{display:flex;align-items:center;gap:var(--s-4);margin-right:auto;text-decoration:none;border:0;color:var(--text-primary)}
.brand img{display:block;height:26px;width:auto}
.brand b{font:var(--fw-bold) var(--fs-lg)/1 var(--font-display);letter-spacing:-0.03em}
.brand span{font:var(--type-meta);color:var(--text-muted);border-left:var(--bw-hairline) solid var(--border-strong);padding-left:var(--s-4)}
.nav a.link{font:var(--type-ui);color:var(--text-secondary);text-decoration:none;border:0;white-space:nowrap;flex:0 0 auto}
.nav a.link:hover{color:var(--text-primary)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);height:40px;padding:0 var(--s-6);border-radius:var(--r-control);font:var(--fw-medium) var(--fs-read)/1 var(--font-sans);text-decoration:none;border:var(--bw-hairline) solid var(--border-strong);background:var(--surface-raised);color:var(--action-quiet-text);cursor:pointer;white-space:nowrap;transition:background var(--motion-state),border-color var(--motion-state),color var(--motion-state)}
.btn:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}
.btn.pri{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-text)}
.btn.pri:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--action-primary-text)}
.btn.sm{height:30px;padding:0 var(--s-5);font:var(--type-ui-strong)}
.btn.quiet{background:transparent;border-color:transparent}

/* ---- hero ---- */
.hero{padding:var(--s-13) 0 var(--s-12)}
.hero h1{font:var(--fw-bold) clamp(38px,5.4vw,60px)/1.05 var(--font-display);letter-spacing:-0.035em;max-width:20ch;margin-bottom:var(--s-6)}
.hero .lede{font-size:var(--fs-xl);max-width:60ch;margin-bottom:var(--s-8)}
.hero-cta{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--border-hairline);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-surface);overflow:hidden;margin-top:var(--s-11)}
.proof div{background:var(--surface-raised);padding:var(--s-6)}
.proof .n{display:block;font:var(--fw-medium) var(--fs-2xl)/1 var(--font-mono);font-variant-numeric:tabular-nums;margin-bottom:var(--s-3)}
.proof .l{font:var(--type-meta);color:var(--text-secondary);text-wrap:pretty}

/* ---- layout helpers ---- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.card{background:var(--surface-raised);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-surface);padding:var(--s-7)}
.card h3{margin-bottom:var(--s-4)}
.card p{font:var(--type-body);color:var(--text-secondary);text-wrap:pretty}
.chip{display:inline-flex;align-items:center;gap:var(--s-3);height:22px;padding:0 var(--s-4);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-1);font:var(--type-mono);color:var(--text-secondary);background:var(--surface-raised);white-space:nowrap;flex:none}
.note{background:var(--surface-sunken);border-left:2px solid var(--action-primary);padding:var(--s-6);border-radius:0 var(--r-2) var(--r-2) 0;font:var(--type-body);color:var(--text-secondary);margin-top:var(--s-6);text-wrap:pretty}
.note strong{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* ---- pills reusing the product's status vocabulary ---- */
.pill{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--r-1);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap}
.pill svg{width:10px;height:10px;flex:none}
.pill.safe{background:var(--sla-safe-bg);color:var(--sla-safe-fg)}
.pill.warn{background:var(--sla-warn-bg);color:var(--sla-warn-fg)}
.pill.crit{background:var(--sla-breach-bg);color:var(--sla-breach-fg)}
.pill.ai{background:var(--ai-bg);color:var(--ai-fg)}
.pill.neutral{background:var(--surface-sunken);color:var(--text-secondary)}
.cap{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--r-pill);font:var(--type-mono);font-variant-numeric:tabular-nums}
.cap.safe{background:var(--sla-safe-bg);color:var(--sla-safe-fg)}
.cap.warn{background:var(--sla-warn-bg);color:var(--sla-warn-fg)}
.cap.crit{background:var(--sla-breach-bg);color:var(--sla-breach-fg)}
.cap.live{background:var(--ai-bg);color:var(--ai-fg)}
.mlbl{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}

/* ---- tabs ---- */
.tabs{display:flex;gap:var(--s-6);align-items:stretch;border-bottom:var(--bw-hairline) solid var(--border-hairline);margin-bottom:var(--s-7);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:var(--s-3);height:38px;padding:0;background:none;border:0;border-bottom:var(--bw-emphasis) solid transparent;margin-bottom:-1px;font:var(--type-body);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--motion-state),border-color var(--motion-state)}
.tab:hover{color:var(--text-primary)}
.tab[aria-selected="true"]{color:var(--text-primary);font-weight:var(--fw-semibold);border-bottom-color:var(--text-primary)}
.panel{display:none}
.panel.on{display:block}

/* ---- product mock frame ---- */
.mock{border:var(--bw-hairline) solid var(--border-strong);border-radius:var(--r-surface);overflow:hidden;background:var(--surface-raised);box-shadow:var(--shadow-overlay)}
.mock-bar{display:flex;align-items:center;gap:var(--s-4);height:32px;padding:0 var(--s-5);background:var(--surface-sunken);border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.mock-bar .dots{display:flex;gap:5px}
.mock-bar i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-strong);display:block}
.mock-bar .t{font:var(--type-meta);color:var(--text-muted)}
.mock-body{font:var(--type-ui)}

/* the workspace grid, at the product's real proportions */
.ws{display:grid;grid-template-columns:200px minmax(0,1fr) 268px;min-height:452px}
.ws-col{min-width:0;display:flex;flex-direction:column;border-right:var(--bw-hairline) solid var(--border-hairline)}
.ws-col:last-child{border-right:0}
.ws-side{background:var(--surface-raised);padding:var(--s-5)}
.ws-ctx{background:var(--surface-canvas);padding:var(--s-5);overflow:auto}
.secbar{display:flex;align-items:center;gap:var(--s-4);height:28px;flex:none;padding:0 var(--s-5);border-bottom:var(--bw-hairline) solid var(--border-hairline);font:var(--type-meta);color:var(--text-secondary)}
.qrow{display:flex;align-items:center;gap:var(--s-4);height:30px;padding:0 var(--s-4);border-left:2px solid transparent;border-radius:0 var(--r-1) var(--r-1) 0;cursor:pointer;font:var(--type-ui)}
.qrow:hover{background:var(--surface-hover)}
.qrow.sel{background:var(--surface-selected);border-left-color:var(--action-primary);font-weight:var(--fw-medium)}
.qrow .n{margin-left:auto;font:var(--type-mono);color:var(--text-muted)}
.blk{background:transparent;border:0;border-bottom:var(--bw-hairline) solid var(--border-hairline);border-radius:0;padding:var(--s-5) 0;margin:0}
.blk:last-child{border-bottom:0}
/* HealthIndicator: 2px left rule + tint, never a full bordered box. */
.blk.health{background:var(--sla-breach-bg);border-bottom:0;border-left:2px solid var(--sla-breach-line);border-radius:0 var(--r-2) var(--r-2) 0;padding:var(--s-4) var(--s-5);margin:var(--s-4) 0}
.ws-ctx{padding:0 var(--s-5)}
/* PriorityMark: a 4-step bar gauge read by height, deliberately monochrome. */
.pmark{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px;flex:none}
.pmark i{width:2.5px;border-radius:1px;background:var(--border-hairline);display:block}
.pmark i:nth-child(1){height:4px}.pmark i:nth-child(2){height:6.5px}.pmark i:nth-child(3){height:9px}.pmark i:nth-child(4){height:11px}
.pmark.p1 i{background:var(--text-primary)}
.pmark.p2 i:nth-child(-n+3){background:var(--text-secondary)}
.pmark.p3 i:nth-child(-n+2){background:var(--text-secondary)}
.pmark.p4 i:nth-child(1){background:var(--text-secondary)}
/* ChannelGlyph: identity by glyph, never by hue. */
.chg{display:inline-flex;color:var(--channel-fg);flex:none}
.kv{display:flex;justify-content:space-between;gap:var(--s-4);padding:2px 0;font:var(--type-meta)}
.kv b{font-weight:var(--fw-medium);color:var(--text-primary)}
.kv span:first-child{color:var(--text-muted)}

/* thread */
.thread{flex:1;min-height:0;overflow:auto;padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);max-height:322px}
.msg{max-width:80%;display:grid;gap:var(--s-2)}
.msg .meta{font:var(--type-meta);color:var(--text-muted)}
.msg .body{padding:var(--s-4) var(--s-5);border-radius:var(--r-3);border:var(--bw-hairline) solid var(--border-hairline);background:var(--surface-raised);line-height:var(--lh-body);text-wrap:pretty}
.msg.ai .body{background:var(--ai-bg);border-color:var(--ai-line)}
.msg.me{margin-left:auto;justify-items:end}
.msg.me .body{background:var(--surface-inverse);color:var(--text-inverse);border-color:transparent}
.cite{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-2) var(--s-4);background:color-mix(in oklab,var(--ai-fg) 8%,transparent);border-radius:var(--r-1);font:var(--type-meta);color:var(--ai-fg)}
.composer{flex:none;border-top:var(--bw-hairline) solid var(--border-hairline);padding:var(--s-4) var(--s-5);display:flex;gap:var(--s-4);align-items:center}
.composer input{flex:1;min-width:0;height:30px;padding:0 var(--s-4);border:var(--bw-hairline) solid var(--border-strong);border-radius:var(--r-2);background:var(--surface-raised);color:var(--text-primary);font:var(--type-ui)}
.kbd{display:inline-flex;gap:2px}
.kbd b{font:var(--type-mono);font-size:10px;font-weight:var(--fw-medium);color:var(--text-muted);padding:3px 4px 2px;min-width:15px;text-align:center;border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-1);background:var(--surface-raised)}

/* rows / table */
.rows{width:100%;border-collapse:collapse;font:var(--type-ui)}
.rows th{text-align:left;font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-semibold);padding:var(--s-3) var(--s-5);border-bottom:var(--bw-hairline) solid var(--border-hairline);white-space:nowrap}
.rows td{padding:var(--s-4) var(--s-5);border-bottom:var(--bw-hairline) solid var(--border-subtle);vertical-align:top}
.rows tbody tr:hover td{background:var(--surface-hover)}
.rows .sub{display:block;font:var(--type-meta);color:var(--text-muted);margin-top:1px}
.rows .r{text-align:right}
.prio{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px}
.prio i{width:2.5px;border-radius:1px;background:var(--border-hairline);display:block}
.prio i.on{background:var(--text-secondary)}
.prio.p1 i.on{background:var(--text-primary)}

/* portal mock */
.portal{padding:var(--s-9) var(--s-8);min-height:452px;background:var(--surface-canvas)}
.portal-in{max-width:520px;margin:0 auto;display:grid;gap:var(--s-6)}
.pcard{background:var(--surface-raised);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-3);padding:var(--s-6);display:grid;gap:var(--s-4);text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}
.pcard:hover{border-color:var(--border-strong)}
.prow{display:flex;align-items:center;gap:var(--s-5);min-height:56px;padding:var(--s-5) 0;border-bottom:var(--bw-hairline) solid var(--border-hairline);font:var(--type-body)}

.stage h3{margin-bottom:var(--s-4)}
.stage p{font:var(--type-body);color:var(--text-secondary);margin-bottom:var(--s-5);text-wrap:pretty;max-width:60ch}
.tags{display:flex;gap:var(--s-3);flex-wrap:wrap}
.flow-nav{display:flex;gap:var(--s-4);margin-top:var(--s-7);padding-top:var(--s-6);border-top:var(--bw-hairline) solid var(--border-hairline)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ladder */
.ladder{display:flex;flex-direction:column-reverse;gap:var(--s-1)}
.rung{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-5);align-items:center;min-height:40px;padding:var(--s-4) var(--s-5);background:var(--surface-raised);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-2);transition:border-color var(--motion-state),background var(--motion-state)}
.rung.in{border-color:var(--sla-safe-line);background:var(--sla-safe-bg)}
.rung.out{opacity:.42}
.rung .t{font:var(--type-mono);color:var(--text-muted)}
.rung.in .t{color:var(--sla-safe-fg)}
.rung .d{font:var(--type-ui)}
.rung .a{font:var(--type-meta);color:var(--text-muted);text-align:right}
.slider{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-6);flex-wrap:wrap}
.slider input{flex:1;min-width:200px;accent-color:var(--action-primary)}

/* accordion (FAQ) */
.acc{border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.acc summary{display:flex;align-items:center;gap:var(--s-5);min-height:56px;padding:var(--s-5) 0;cursor:pointer;font:var(--fw-medium) var(--fs-lg)/1.35 var(--font-display);letter-spacing:var(--ls-heading);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";margin-left:auto;font:var(--fw-regular) var(--fs-xl)/1 var(--font-mono);color:var(--text-muted)}
.acc[open] summary::after{content:"\2212"}
.acc p{font:var(--type-body);color:var(--text-secondary);max-width:76ch;padding-bottom:var(--s-6);text-wrap:pretty}

/* closing CTA */
.cta{background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--r-surface);padding:var(--s-12) var(--s-10);text-align:center;display:grid;gap:var(--s-6);justify-items:center}
.cta h2{color:var(--text-inverse);max-width:24ch}
.cta p{font:var(--fw-regular) var(--fs-lg)/var(--lh-body) var(--font-sans);color:color-mix(in oklab,var(--text-inverse) 74%,transparent);max-width:56ch;text-wrap:pretty}
.cta .btn{border-color:color-mix(in oklab,var(--text-inverse) 32%,transparent);background:transparent;color:var(--text-inverse)}
.cta .btn:hover{background:color-mix(in oklab,var(--text-inverse) 12%,transparent);color:var(--text-inverse)}
.cta .btn.pri{background:var(--text-inverse);border-color:var(--text-inverse);color:var(--surface-inverse)}
.cta .btn.pri:hover{background:color-mix(in oklab,var(--text-inverse) 88%,transparent);color:var(--surface-inverse)}

footer{padding:var(--s-11) 0;border-top:var(--bw-hairline) solid var(--border-hairline);font:var(--type-meta);color:var(--text-muted)}
.foot{display:flex;gap:var(--s-8);flex-wrap:wrap;align-items:flex-start}
.foot nav{display:grid;gap:var(--s-3)}
.foot a{color:var(--text-secondary);text-decoration:none;border:0;font:var(--type-ui)}
.foot a:hover{color:var(--text-primary)}

@media(max-width:1180px){
.ws{grid-template-columns:var(--nav-w) minmax(0,1fr)}
.ws-ctx{display:none}
}
@media(max-width:980px){
.ws{grid-template-columns:minmax(0,1fr)}
.ws-side{display:none}
}
@media(max-width:900px){
.g2,.g3{grid-template-columns:1fr}
.ws{grid-template-columns:1fr}
.ws-side,.ws-ctx{display:none}
.nav a.link{display:none}
.stage{grid-template-columns:1fr}
.stage .num{display:none}
}

/* ---- lead form (sits on the inverse CTA panel) ---- */
.lead-in{height:44px;padding:0 var(--s-5);border-radius:var(--r-control);border:var(--bw-hairline) solid color-mix(in oklab,var(--text-inverse) 26%,transparent);background:color-mix(in oklab,var(--text-inverse) 8%,transparent);color:var(--text-inverse);font:var(--fw-regular) var(--fs-read)/1 var(--font-sans);width:100%;transition:border-color var(--motion-state),background var(--motion-state)}
.lead-in::placeholder{color:color-mix(in oklab,var(--text-inverse) 42%,transparent)}
.lead-in:hover{border-color:color-mix(in oklab,var(--text-inverse) 42%,transparent)}
.lead-in:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-inverse);outline-offset:var(--focus-ring-offset);background:color-mix(in oklab,var(--text-inverse) 12%,transparent)}
select.lead-in{appearance:none;background-image:none;cursor:pointer}
select.lead-in option{background:var(--surface-overlay);color:var(--text-primary)}
.lead-in[aria-invalid="true"]{border-color:var(--signal-400)}
.err{font:var(--type-meta);color:var(--signal-200);min-height:1.1em}
#leadDone{grid-template-columns:1fr}

/* ---- portal demo navigation ---- */
.pnav{display:grid;gap:4px;justify-items:center;min-height:52px;padding:var(--s-4);border:0;background:transparent;color:var(--text-secondary);font:var(--type-meta);cursor:pointer;border-top:var(--bw-emphasis) solid transparent;margin-top:-1px;transition:color var(--motion-state),border-color var(--motion-state)}
.pnav:hover{color:var(--text-primary)}
.pnav.on{color:var(--text-accent);font-weight:var(--fw-medium);border-top-color:var(--action-primary)}

/* keyboard-reachable queue rows and ladder rungs (they were click-only divs) */
button.qrow{width:100%;text-align:left;font:var(--type-ui);color:var(--text-primary);border:0;border-left:2px solid transparent;background:transparent;appearance:none}
button.qrow.sel{font-weight:var(--fw-medium)}
tr[data-row]{cursor:pointer}
tr[data-row][aria-selected="true"] td{background:var(--surface-selected)}
tr[data-row][aria-selected="true"] td:first-child{box-shadow:inset 2px 0 0 var(--action-primary)}

/* ---- command palette: the workspace's signature interaction, so the demo has to have it ---- */
.cmdk{position:fixed;inset:0;z-index:80;display:none;justify-content:center;align-items:flex-start;padding-top:12vh;background:color-mix(in oklab,var(--n-950) 42%,transparent)}
.cmdk.on{display:flex}
.cmdk-box{width:560px;max-width:92vw;background:var(--surface-overlay);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-surface);box-shadow:var(--shadow-overlay);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:var(--s-4);height:44px;padding:0 var(--s-5);border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.cmdk-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--text-primary);font:var(--fw-regular) var(--fs-body)/1.2 var(--font-sans)}
.cmdk-in input:focus{outline:none}
.cmdk-list{max-height:320px;overflow:auto;padding:var(--s-3) 0}
.cmdk-grp{padding:var(--s-3) var(--s-5) var(--s-2);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.cmdk-item{display:flex;align-items:center;gap:var(--s-4);width:100%;height:32px;padding:0 var(--s-5);border:0;border-left:2px solid transparent;background:transparent;color:var(--text-primary);font:var(--type-ui);text-align:left;cursor:pointer}
.cmdk-item .m{margin-left:auto;font:var(--type-meta);color:var(--text-muted)}
.cmdk-item.at{background:var(--surface-selected);border-left-color:var(--action-primary)}
.cmdk-empty{padding:var(--s-7) var(--s-5);text-align:center;font:var(--type-ui);color:var(--text-muted)}

/* ---- toast: optimistic receipts, as the product shows them ---- */
.toasts{position:fixed;left:var(--s-6);bottom:var(--s-6);z-index:70;display:grid;gap:var(--s-4);width:340px;max-width:calc(100vw - 2 * var(--s-6))}
.toast{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-5);background:var(--surface-overlay);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--r-surface);box-shadow:var(--shadow-overlay);opacity:1}
.toast b{font:var(--type-ui-strong);display:block}
.toast span{font:var(--type-meta);color:var(--text-secondary);display:block;margin-top:2px;text-wrap:pretty}
.toast .tick{color:var(--sla-safe-fg);flex:none;margin-top:1px}

/* ═══ THE INSTRUMENT LEDGER ═══
   Spice-up pass. The page adopts the product's own information architecture rather than a
   marketing template: a fixed section rail, full-bleed ink instrument panels alternating with
   paper reading passages, and hairline ledger rows in place of card grids. */

/* ---- SIGNATURE: the section rail.
        The SLA capsule's depletion bar, rethought as page navigation. Mono markers, and a
        hairline that fills as you scroll. It is the only motion left on the page. ---- */
.rail{position:fixed;left:0;top:0;bottom:0;width:56px;z-index:55;display:flex;flex-direction:column;align-items:center;padding:var(--s-11) 0 var(--s-5);background:var(--surface-raised);border-right:var(--bw-hairline) solid var(--border-hairline);pointer-events:none;overflow:hidden}
.rail-track{position:absolute;left:27px;top:var(--s-11);bottom:44px;width:1px;background:var(--border-hairline)}
.rail-fill{position:absolute;left:0;top:0;width:1px;background:var(--action-primary);height:0}
.rail-items{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1vh,var(--s-8));pointer-events:auto}
.rail-items::-webkit-scrollbar{display:none}
.rail-item{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;border-radius:var(--r-pill);font:var(--fw-medium) 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);cursor:pointer;transition:color var(--motion-state),background var(--motion-state)}
.rail-item:hover{color:var(--text-primary)}
.rail-item[aria-current="true"]{background:var(--surface-inverse);color:var(--text-inverse)}
.rail-mark{flex:0 0 auto;margin-top:auto;padding-top:var(--s-5);pointer-events:auto}
.rail-mark img{display:block;width:20px;height:24px;opacity:.5}
body.has-rail{padding-left:56px}
body.has-rail .nav-in{padding-left:var(--s-7)}
.nav-in{flex-wrap:nowrap;min-width:0}
@media(max-width:900px){.rail{display:none}body.has-rail{padding-left:0}}

/* ---- full-bleed ink panels: the aesthetic risk.
        The demos run edge to edge with no browser chrome and no shadow, so the instrument reads
        as already-running rather than as a screenshot of something else. ---- */
.bleed{border-top:0;padding:var(--s-12) 0;background:var(--surface-inverse);color:var(--text-inverse)}
.bleed h2,.bleed h3{color:var(--text-inverse)}
.bleed .lede,.bleed p{color:color-mix(in oklab,var(--text-inverse) 72%,transparent)}
.bleed .eyebrow{color:color-mix(in oklab,var(--brand-mark) 92%,white)}
.bleed .mlbl{color:color-mix(in oklab,var(--text-inverse) 54%,transparent)}
.bleed .tab{color:color-mix(in oklab,var(--text-inverse) 62%,transparent);border-bottom-color:transparent}
.bleed .tab:hover{color:var(--text-inverse)}
.bleed .tab[aria-selected="true"]{color:var(--text-inverse);border-bottom-color:var(--text-inverse)}
.bleed .tabs{border-bottom-color:color-mix(in oklab,var(--text-inverse) 18%,transparent)}
.bleed .note{background:color-mix(in oklab,var(--text-inverse) 7%,transparent);border-left-color:var(--brand-mark);color:color-mix(in oklab,var(--text-inverse) 76%,transparent)}
.bleed .note strong{color:var(--text-inverse)}
.bleed .btn{border-color:color-mix(in oklab,var(--text-inverse) 30%,transparent);background:transparent;color:var(--text-inverse)}
.bleed .btn:hover{background:color-mix(in oklab,var(--text-inverse) 12%,transparent);color:var(--text-inverse)}
/* The mock IS the product, and the product is light-first, so it is immune to the panel's
   inverse palette. Without this reset the .bleed rules turn the product's own text dark-on-dark. */
.bleed .mock{border:0;border-radius:var(--r-3);box-shadow:none;overflow:hidden;color:var(--text-primary)}
.bleed .mock h2,.bleed .mock h3,.bleed .mock b,.bleed .mock strong{color:var(--text-primary)}
.bleed .mock p,.bleed .mock td,.bleed .mock th,.bleed .mock span,.bleed .mock div,.bleed .mock button,.bleed .mock input{color:inherit}
.bleed .mock .mut,.bleed .mock .sub{color:var(--text-muted)}
.bleed .mock .mlbl{color:var(--text-muted)}
.bleed .mock .lede{color:var(--text-secondary)}
.bleed .mock .note{background:var(--surface-sunken);border-left-color:var(--action-primary);color:var(--text-secondary)}
.bleed .mock .note strong{color:var(--text-primary)}
.bleed .mock .btn{border-color:var(--border-strong);background:var(--surface-raised);color:var(--action-quiet-text)}
.bleed .mock .btn.pri{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-text)}
.bleed .mock .btn.quiet{background:transparent;border-color:transparent}
.bleed .mock .ledger,.bleed .mock .ledger-row{border-color:var(--border-hairline)}
.bleed-wide{max-width:1320px;margin:0 auto;padding:0 var(--s-8)}

/* ---- ledger rows: what replaced the card grids ---- */
.ledger{border-top:var(--bw-hairline) solid var(--border-hairline)}
.ledger-row{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-6);align-items:baseline;padding:var(--s-6) 0;border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.ledger-row .k{font:var(--fw-medium) var(--fs-meta)/1.4 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);padding-top:2px}
.ledger-row h3{font:var(--fw-semibold) var(--fs-lg)/1.3 var(--font-display);letter-spacing:var(--ls-heading)}
.ledger-row p{font:var(--type-body);color:var(--text-secondary);text-wrap:pretty}
.bleed .ledger,.bleed .ledger-row{border-color:color-mix(in oklab,var(--text-inverse) 16%,transparent)}
.bleed .ledger-row .k{color:color-mix(in oklab,var(--text-inverse) 46%,transparent)}

/* ---- refusal list: the "what we don't ship" ledger, struck through ---- */
.refuse{border-top:var(--bw-hairline) solid var(--border-hairline)}
/* Full width under the band: two columns of hairline rows, so neither side of the section
   above can strand a void. */
.refuse.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:var(--s-9);border-top:0}
.refuse.cols div{border-top:var(--bw-hairline) solid var(--border-hairline);border-bottom:0}
.refuse div{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s-5);padding:var(--s-5) 0;border-bottom:var(--bw-hairline) solid var(--border-hairline);align-items:baseline}
.refuse .x{display:grid;place-items:center;width:16px;height:16px;color:var(--signal-400);margin-top:1px}
.refuse b{font:var(--fw-medium) var(--fs-read)/1.45 var(--font-sans);color:var(--text-secondary);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--text-muted) 60%,transparent)}
.refuse span{display:block;font:var(--type-meta);color:var(--text-primary);margin-top:3px}

/* ---- hero: asymmetric, with a mono kicker and the live strip ---- */
.hero{padding:var(--s-13) 0 var(--s-11)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-10);align-items:end}
.kicker{display:flex;align-items:center;gap:var(--s-4);font:var(--type-mono);color:var(--text-muted);margin-bottom:var(--s-6)}
.kicker i{display:block;width:28px;height:1px;background:var(--border-strong)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:var(--bw-hairline) solid var(--border-hairline);border-bottom:var(--bw-hairline) solid var(--border-hairline);margin-top:var(--s-11)}
.strip div{padding:var(--s-6) var(--s-6) var(--s-6) 0;border-right:var(--bw-hairline) solid var(--border-hairline)}
.strip div:last-child{border-right:0}
.strip .n{display:block;font:var(--fw-medium) var(--fs-3xl)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;margin-bottom:var(--s-3)}
.strip .l{font:var(--type-meta);color:var(--text-secondary);text-wrap:pretty}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.ledger-row{grid-template-columns:28px minmax(0,1fr)}.ledger-row p{grid-column:2}}

/* ---- photography as a SURFACE, not an object ----
   A bordered figure floating in a column is foreign vocabulary here: this system has no cards
   outside the portal and no decorative shadows, so a rounded rectangle can only read as
   dropped in. A photo is therefore a flush PANEL — its edges ARE the section's hairlines, and on
   the outer side it bleeds to the viewport edge so it reads as the page's own surface. Three
   photos on the page, each load-bearing: who uses this, why it matters, what it's like after.
   Warm-neutral and desaturated. No type over any image, so no scrim exists. */
.band{margin:0;position:relative;overflow:hidden;background:var(--surface-sunken);border-block:var(--bw-hairline) solid var(--border-hairline)}
.band img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.03)}
[data-theme="dark"] .band img{filter:saturate(.58) contrast(.94) brightness(.8)}
.band.tall{height:100%;min-height:420px}
.band.bleed-r{margin-right:calc(50% - 50vw);border-right:0}
/* A bleed must never become document overflow: 50vw counts the scrollbar and the rail adds body
   padding, so the section clips rather than the page scrolling sideways. */
section:has(.band.bleed-r){overflow-x:clip}
.band.bleed-r img{aspect-ratio:16/10}
@media(max-width:900px){.band.bleed-r{margin-right:0}.band.tall{min-height:0;aspect-ratio:4/5}}

/* Channels and guardrails are a set, not a sequence, so they carry no numbers — the hairline
   rules do the structuring on their own. (The lifecycle stepper keeps 01–05: it IS sequential.) */
.ledger-row.nokey{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-7)}
@media(max-width:900px){.ledger-row.nokey{grid-template-columns:1fr;gap:var(--s-3)}}

/* 12 markers need 12*28 + 11*6 = 402px inside (vh - 96), so the index fits to ~500px. Hiding at
   700px hid the signature element on every 1366x768 laptop. */
@media(max-height:560px){.rail-items{display:none}.rail-track{bottom:40px}}

/* ---- feature lists in pricing ---- */
.ticks{list-style:none;display:grid;gap:var(--s-4);margin:0;padding:0}
.ticks li{display:block;position:relative;padding-left:22px;font:var(--type-ui);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:5px;border-left:1.5px solid var(--sla-safe-fg);border-bottom:1.5px solid var(--sla-safe-fg);transform:rotate(-45deg)}
.ticks li b{font-weight:var(--fw-medium);color:var(--text-primary)}

/* screen-reader-only text (was referenced before it existed) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- pricing: five tiers as flush hairline columns, not five floating cards ----
   Five cards would be exactly the card-grid default this system rejects. Instead the tiers are
   panels butted together with 1px rules, the recommended one marked by a 2px top rule and a
   tint rather than by a border and a shadow. Allowances sit at the foot in mono, because they
   are the numbers a buyer reasons about. */
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--s-9);border-top:var(--bw-hairline) solid var(--border-hairline);border-bottom:var(--bw-hairline) solid var(--border-hairline)}
.tier{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);border-right:var(--bw-hairline) solid var(--border-hairline);border-top:var(--bw-emphasis) solid transparent}
.tier:last-child{border-right:0}
.tier.on{border-top-color:var(--action-primary);background:var(--surface-selected)}
.tier .amt{font:var(--fw-medium) var(--fs-2xl)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.tier .amt .plus{font:var(--type-meta);color:var(--text-secondary);margin-left:var(--s-3);letter-spacing:0}
.tier .mut{font:var(--type-meta);text-wrap:pretty}
.tier .ticks{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3);font:var(--type-meta);color:var(--text-secondary)}
.tier .ticks li{position:relative;padding-left:var(--s-6);text-wrap:pretty}
.tier .ticks li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-left:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(-45deg)}
.tier .ticks li b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.tier .alw{margin-top:auto;padding-top:var(--s-5);border-top:var(--bw-hairline) solid var(--border-hairline);font:var(--type-mono);color:var(--text-secondary);text-wrap:pretty}
.tier .alw b{color:var(--text-primary)}
@media(max-width:1160px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.tier{border-bottom:var(--bw-hairline) solid var(--border-hairline)}.tier:nth-child(2n){border-right:0}.tier:last-child{grid-column:1/-1;border-right:0;border-bottom:0}}
@media(max-width:900px){.tiers{grid-template-columns:1fr}.tier{border-right:0;border-bottom:var(--bw-hairline) solid var(--border-hairline)}.tier:last-child{border-bottom:0}}

@media(max-width:1040px){.nav-in a.link{display:none}}

/* ===== chapters: the morning, told in SLA time ===== */
.chapter{padding-top:var(--s-13)}
.chapline{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-6)}
.tcap{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;letter-spacing:-0.005em}
.tcap.n{background:var(--surface-sunken);color:var(--text-secondary)}
.tcap.ai{background:var(--ai-bg);color:var(--ai-fg)}
.tcap.crit{background:var(--sla-breach-bg);color:var(--sla-breach-fg)}
.tcap.warn{background:var(--sla-warn-bg);color:var(--sla-warn-fg)}
.tcap.safe{background:var(--sla-safe-bg);color:var(--sla-safe-fg)}
.chapk{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.roomlbl{display:block;font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);margin:var(--s-8) 0 var(--s-4)}
.roomcap{font:var(--type-meta);color:var(--text-secondary);max-width:62ch;margin-top:var(--s-4);text-wrap:pretty}
.roomcap strong{color:var(--text-primary)}
.chapter .band{margin:0}
.chapter .band img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover}
.chapter .bleed-wide{margin-top:0}

/* Photo discipline. The documented grade (warm-neutral, desaturated) was never actually
   applied — the raw stock rendered as-is, at native proportion, so three mismatched grades
   dominated whole viewports. Until the files are re-encoded: unify the grade in CSS and cap
   every image's height. A photo here is a strip in the page's rhythm, never a hero. */
.band img,.shot img,figure.band img{filter:saturate(.68) contrast(1.05) brightness(1.01)}
figure.band img,.band img{width:100%;height:clamp(280px,36vw,460px);object-fit:cover;object-position:50% 38%}
.shot img{width:100%;max-height:560px;object-fit:cover;object-position:50% 30%}
@media(prefers-reduced-motion:no-preference){}

/* Width discipline — the real problem. Full-bleed photos at 2500px+ viewports became 5:1
   letterbox crops, and the portrait swallowed half the page. Photos now sit INSIDE the
   content measure like any other object in the grid, hairline-edged, never viewport-wide. */
figure.band,.band{max-width:1160px;margin-left:auto;margin-right:auto}
figure.band img,.band img{height:clamp(260px,30vw,400px)}
.shot{max-width:520px}
.shot img{max-height:480px}
@media(max-width:1220px){figure.band,.band{margin-left:24px;margin-right:24px}}

/* Alignment fix. The bands sit as direct section children; sections are grids, and a
   max-width child in a stretch grid lands at the track START — flush left, void right.
   And .bleed-r deliberately pulled the problem photo to the right edge, which reads as
   floating on wide screens. Bands are now always centred objects; no photo bleeds anywhere. */
figure.band,figure.band.bleed-r,figure.band.bleed-l{width:100%;max-width:1160px;margin-left:auto;margin-right:auto;justify-self:center;float:none}
figure.band.tall{max-width:100%}
@media(max-width:1220px){figure.band,figure.band.bleed-r{max-width:calc(100% - 48px)}}


/* ---- the product itself, embedded ----------------------------------------------------------
   These are not mocks. Each frame runs the real agent workspace or the real employee portal from
   ui_kits/, the same build the design system ships, driven by the buttons above it. The heavier
   ones load on click rather than on scroll: an instrument that boots when you ask for it is
   honest; four of them booting behind the fold is a slow page. */
.live{border:var(--bw-hairline) solid var(--border-strong);border-radius:var(--r-surface);overflow:hidden;background:var(--surface-raised);box-shadow:var(--shadow-overlay)}
.live-bar{display:flex;align-items:center;gap:var(--s-4);min-height:38px;padding:var(--s-3) var(--s-5);background:var(--surface-sunken);border-bottom:var(--bw-hairline) solid var(--border-hairline);flex-wrap:wrap}
.live-bar .dots{display:flex;gap:5px;flex:none}
.live-bar .dots i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-strong);display:block}
.live-bar .t{font:var(--type-meta);color:var(--text-muted);white-space:nowrap}
.live-bar .live-dot{display:inline-flex;align-items:center;gap:5px;font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--sla-safe-fg)}
.live-bar .live-dot i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--sla-safe-line);display:block}
.live-do{display:flex;gap:var(--s-3);margin-left:auto;flex-wrap:wrap;align-items:center}
.live-do button,.live-do a{height:26px;display:inline-flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4);border:var(--bw-hairline) solid var(--border-strong);border-radius:var(--r-2);background:var(--surface-raised);color:var(--text-primary);font:var(--type-meta);cursor:pointer;text-decoration:none;white-space:nowrap}
.live-do button:hover,.live-do a:hover{background:var(--surface-hover)}
.live-do button.pri{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-text)}
.live-do button.pri:hover{background:var(--action-primary-hover)}
.live-stage{position:relative;height:var(--fh,760px);background:var(--surface-canvas)}
.live-stage iframe{display:block;width:100%;height:100%;border:0;background:var(--surface-canvas)}
.live-poster{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-5);padding:var(--s-9);text-align:center;background:var(--surface-canvas)}
.live-poster b{font:var(--fw-semibold) var(--fs-xl)/1.25 var(--font-display);letter-spacing:var(--ls-heading)}
.live-poster p{margin:0;max-width:52ch;font:var(--type-body);color:var(--text-secondary);text-wrap:pretty}
.live-poster .btn{margin-top:var(--s-3)}
.live-cap{display:flex;gap:var(--s-5);align-items:baseline;flex-wrap:wrap;margin-top:var(--s-4);font:var(--type-meta);color:var(--text-muted)}
.live-cap b{color:var(--text-secondary);font-weight:var(--fw-medium)}
@media (max-width:1100px){.live-stage{height:var(--fh-sm,620px)}}
@media (max-width:700px){.live-stage{height:520px}.live-do{width:100%;margin-left:0}}

/* ---- demo frames that start themselves ----
   The poster now reports rather than asks: the frame boots when it comes within a screen of the
   viewport, so what a visitor reads is a status, not an instruction. The button underneath is
   still in the markup and still works — it is what Save-Data and a missing IntersectionObserver
   fall back to — so this styles the line, not a replacement for it. */
.live-status{display:inline-flex;align-items:center;gap:var(--s-4);margin-top:var(--s-3);font:var(--type-meta);color:var(--text-muted)}
.live-status::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--ai-fg);flex:none;animation:relay-live-pulse 1600ms var(--ease-out) infinite}
@keyframes relay-live-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* Motion here confirms that something is happening; with reduced motion the dot simply sits on. */
@media (prefers-reduced-motion:reduce){.live-status::before{animation:none;opacity:1}}

/* Whole-form failure on the signup, on the dark CTA panel. */
.lead-err{margin:0;min-height:0}
.lead-err:empty{display:none}

/* <picture> wrappers around the photography. The element is inline by default, which would break
   `.band img{height:100%}` in the tall hero slot — the percentage would resolve against a box
   with no height. Making it a block of the same size keeps it invisible to the layout. */
.band picture{display:block;width:100%;height:100%}

/* Sticky-header offset for every programmatic scroll that uses scrollIntoView() — the section
   rail and the command palette's "Go to" entries. The anchor handler in site.js does its own
   arithmetic (window.scrollTo minus 56), but scrollIntoView() knows nothing about a sticky nav,
   so clicking rail item 07 used to bury #knowledge's eyebrow and heading underneath the bar while
   the footer link to the same section landed correctly. scroll-margin-top fixes every
   scrollIntoView() call site at once and cannot double-apply to the scrollTo path. */
main section[id]{scroll-margin-top:64px}
/* Sections become programmatically focusable when the skip link or an anchor targets them; that
   must never paint a focus ring on a whole section for a mouse user. */
main section[id]:focus{outline:none}
main section[id]:focus-visible{outline:var(--bw-focus,2px) solid var(--border-focus,currentColor);outline-offset:4px}

/* The included-usage block in each pricing tier.

   It began as one run-on line of middot-separated numbers, which only parsed if you already knew
   what the numbers were. It is now a two-column figure list: the number in its own tabular-numeral
   column so 500, 1,000 and 2,500 line up down the tier and can be compared at a glance, and the
   unit beside it in prose. The heading spans both columns because "1,000" is meaningless without
   "per agent, per month". */
.tier .alw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-4);align-items:baseline;margin-top:auto;padding-top:var(--s-5);border-top:var(--bw-hairline) solid var(--border-hairline)}
.tier .alw .alw-h{grid-column:1/-1;margin-bottom:var(--s-1);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-medium)}
.tier .alw .n{justify-self:end;font:var(--fw-medium) var(--fs-read)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tier .alw .u{font:var(--type-meta);color:var(--text-secondary);text-wrap:pretty}
/* The emphasised tier carries the recommendation, so its figures sit on the accent. */
.tier.on .alw .n{color:var(--text-accent)}

/* What each billed unit means, under the tiers. Deliberately NOT reusing .refuse: that block is a
   16px-icon + text grid whose <b> is struck through — borrowing it put every definition into the
   icon column, one word per line, in strikethrough. A term list is its own shape. */
.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 var(--s-8)}
.units div{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-5) 0;border-top:var(--bw-hairline) solid var(--border-hairline)}
.units b{font:var(--fw-semibold) var(--fs-read)/1.35 var(--font-sans);color:var(--text-primary)}
.units span{font:var(--type-meta);color:var(--text-secondary);text-wrap:pretty}