/* Public product explanation. The working account surface keeps its own layout. */
[data-view=home],.architecture-page{overflow-wrap:anywhere}
.assignment-tabs button{min-width:0;overflow-wrap:anywhere}
.friction-section{padding:2.5rem 0 3.5rem;border-top:1px solid var(--border)}
.friction-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem;margin-top:2rem}
.friction-grid article{grid-column:span 2;display:flex;flex-direction:column;padding:1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:12px;min-width:0}
.friction-grid article:nth-child(n+4){grid-column:span 3}.friction-label{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650}
.friction-grid h3{font-size:1.15rem;line-height:1.35;margin:1rem 0 .6rem}.friction-grid p{font-size:.95rem;color:var(--muted);margin:0 0 1.2rem}.friction-benefit{color:var(--accent);font-size:.875rem;font-weight:600;margin-top:auto}
.boundary-section{padding:3.5rem 0 1rem}
.boundary-figure{margin:2rem 0 0}
.boundary-zones{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);align-items:stretch}
.boundary-zone{border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:0}
.zone-heading{padding:1.8rem 1.7rem 1.4rem}
.zone-location{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:.8125rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}
.zone-heading h3{font-size:1.55rem;line-height:1.3;margin:0;max-width:320px}
.component-rows{padding:0 1.7rem;list-style:none;margin:0}
.component-rows li{padding:1.2rem 0;border-top:1px solid var(--border)}
.component-rows strong{display:block;font-size:1rem;margin-bottom:.35rem}
.component-rows span{color:var(--muted);font-size:.95rem;display:block}
.zone-footer{padding:1.2rem 1.7rem;font-size:.875rem;border-top:1px solid var(--border);color:var(--muted);margin:0;background:var(--bg)}
.client-zone{background:var(--soft);color:var(--ink);border-color:var(--border)}
.client-zone .zone-location{color:var(--accent)}
.client-zone .component-rows li,.client-zone .zone-footer{border-color:var(--border)}
.client-zone .component-rows span,.client-zone .zone-footer{color:var(--muted)}
.client-zone .zone-footer{background:transparent}
.boundary-exchange{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.7rem;text-align:center;padding:1rem;color:var(--muted)}
.boundary-exchange>div{width:100%}
.exchange-arrow{display:block;color:var(--accent);font-size:2rem;line-height:1;position:relative;margin-bottom:.4rem}
.boundary-exchange strong{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.25rem}
.boundary-exchange div>span:last-child{font-size:.875rem;display:block}
.boundary-exchange>p{font-size:.8125rem;line-height:1.6;margin:0}
.provider-lane{margin:1.3rem 0 0 auto;max-width:calc(50% - 85px);padding:1.15rem 1.3rem;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
.provider-lane>span{display:block;font-size:.8125rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--accent);margin-bottom:.5rem}
.provider-lane>strong{display:block;font-size:.95rem}
.provider-lane>p{font-size:.875rem;color:var(--muted);margin:.6rem 0 0}
.boundary-figure figcaption{font-size:.875rem;color:var(--muted);margin-top:1.5rem;max-width:950px}
.intelligence-section{padding-top:3.5rem}
.layer-card{background:var(--bg);border-radius:10px}
@media(max-width:1050px){
  .friction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.friction-grid article{grid-column:span 1}.friction-grid article:nth-child(4){grid-column:span 1}.friction-grid article:last-child{grid-column:span 2}
  .boundary-zones{grid-template-columns:minmax(0,1fr) 145px minmax(0,1fr)}
  .zone-heading{padding:1.4rem 1.3rem}.zone-heading h3{font-size:1.35rem}
  .component-rows{padding:0 1.3rem}.zone-footer{padding:1rem 1.3rem}
  .provider-lane{max-width:calc(50% - 72.5px)}
}
@media(max-width:800px){
  .boundary-zones{grid-template-columns:1fr}.boundary-exchange{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:1rem}
  .boundary-exchange>p{grid-column:1/-1}.exchange-arrow{transform:rotate(90deg);font-size:1.6rem}
  .provider-lane{max-width:none}.boundary-section{padding-top:2.5rem}.zone-heading h3{max-width:none}
}
@media(max-width:600px){.friction-grid{grid-template-columns:1fr}.friction-grid article,.friction-grid article:nth-child(4),.friction-grid article:last-child{grid-column:span 1}.friction-grid article{padding:1.3rem}.friction-section{padding-top:2rem}}
#plan-keys-detail{display:block}
.closing-callout{align-items:center}
.closing-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;flex-shrink:0}
.pricing-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem;align-items:start}
.plan-card .section-heading{align-items:start}
.plan-price{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:.4rem 0 0}
.plan-period{display:block;font-size:.95rem;color:var(--muted);font-weight:500;letter-spacing:0;margin-top:.4rem}
.plan-list{list-style:none;padding:0;margin:1.6rem 0 0}
.plan-list li{padding:1rem 0;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
.plan-list strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.3rem}
.plan-card .actions{margin:1.8rem 0 .8rem}
#pricing-payment-state{color:var(--muted);font-size:.9rem;margin:0}
.pricing-notes{background:var(--bg)}
.pricing-notes h2{font-size:1.15rem}
.pricing-notes h3{font-size:1rem;margin:1.7rem 0 .4rem}
.pricing-notes p{color:var(--muted);font-size:.95rem;margin:.5rem 0 0}
.pricing-questions{margin:3rem 0 0}
.pricing-questions>h2{font-size:1.5rem;margin-bottom:.6rem}
.pricing-questions details{border-top:1px solid var(--border);padding:.4rem 0}
.pricing-questions summary{cursor:pointer;font-weight:600;padding:.85rem 0;color:var(--ink)}
.pricing-questions p{color:var(--muted);margin:.2rem 0 1rem}
@media(max-width:1000px){.pricing-grid{grid-template-columns:1fr}}
/* Enlarged text on a narrow screen: the access actions wrap inside their band instead of pushing the page wider. */
[data-view=pricing]{overflow-wrap:anywhere}
.actions .button,.closing-actions .button,.pricing-teaser-side .button{max-width:100%;flex-shrink:1;flex-wrap:wrap;gap:.5rem;white-space:normal}
.closing-actions,.pricing-teaser-side,.plan-card .actions{min-width:0}

/* The design, September 2026: a professional developer service on a light ground. Every colour, typeface, size and shape
   comes from the tokens at the top of service.css. The rules below are the components: type, buttons, fields, tags, the
   header, the homepage bands and their sections, the Get started page, the signed-in views and the footer. */
@font-face{font-family:Geist;src:url("/assets/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit}
code,kbd,samp,pre{font-family:var(--font-mono)}
h1{font-weight:600;letter-spacing:-.035em}
h2{font-weight:600;letter-spacing:-.025em}
h3{font-weight:600;letter-spacing:-.01em}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.caption{color:var(--subtle)}
.secondary{color:var(--muted)}
/* A neutral label for a count or a state, in the shape of the design's labels. */
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 .5rem;border:0;border-radius:var(--radius-label);background:var(--community-bg);color:var(--community-ink);font-size:.75rem;font-weight:600;line-height:1.4}
/* The two library labels, written exactly Verified and Community. A page marks one with the class or with data-label-tier. */
.label,[data-label-tier]{display:inline-flex;align-items:center;min-height:24px;padding:0 .5rem;border-radius:var(--radius-label);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap}
.label-verified,[data-label-tier=verified]{background:var(--verified-bg);color:var(--verified-ink)}
.label-community,[data-label-tier=community]{background:var(--community-bg);color:var(--community-ink)}
/* The library table's labels, which catalogue-browser.js writes as a badge carrying data-library-tier, take the same two colours. */
.badge[data-library-tier]{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.badge[data-library-tier=verified]{background:var(--verified-bg);color:var(--verified-ink)}
.badge[data-library-tier=community]{background:var(--community-bg);color:var(--community-ink)}

/* Buttons and fields. One ember action for Get started, ink for the main action of a signed-in view, a white secondary with
   a warm edge, and field edges that stand out from the ground. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.625rem 1.25rem;border:1px solid var(--line-strong);border-radius:var(--radius-button);background:var(--paper);color:var(--ink);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none}
.button:hover{filter:none;border-color:var(--ink);color:var(--ink);text-decoration:none}
button{border-radius:var(--radius-field);border-color:var(--line-strong)}
.primary,.button.primary{background:var(--button);border-color:var(--button);color:var(--button-ink)}
.primary:not(:disabled):hover,.button.primary:hover{background:var(--button-hover);border-color:var(--button-hover);color:var(--button-ink)}
.button.secondary{font-weight:500}
.quiet{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
.quiet:not(:disabled):hover{border-color:var(--ink);color:var(--ink)}
.button.ink,button.ink{background:var(--ink-button);border-color:var(--ink-button);color:var(--ink-button-ink)}
.button.ink:hover,button.ink:not(:disabled):hover{background:var(--ink-button-hover);border-color:var(--ink-button-hover);color:var(--ink-button-ink)}
.button.danger,button.danger{background:var(--paper);border-color:var(--line-strong);color:var(--error)}
.button-arrow{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.text-link{font-weight:600;text-decoration:none;color:var(--accent)}
.text-link:hover{text-decoration:underline}
input,select,textarea{border:1px solid var(--field-edge);border-radius:var(--radius-field);background:var(--paper);color:var(--ink)}
input:disabled,select:disabled{background:var(--bg)}
textarea{display:block;width:100%;min-width:0;max-width:100%;padding:.75rem .875rem;font:inherit;line-height:1.5;resize:vertical}
pre{background:var(--bg);border-color:var(--border);border-radius:var(--radius-field)}
.panel{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--paper);box-shadow:none}
.notice{background:var(--soft);border-radius:var(--radius-card)}
/* Tables: muted column labels on the quiet band, rows divided by the soft line, the chosen row on the warm tint. */
.browse-table thead th,.usage-table th{background:var(--band)}
.browse-table tr[aria-selected=true] td{background:var(--tint)}
.browse-table-wrap,.md-table-wrap{border-radius:var(--radius-card)}
/* On a dark band the one action is the light ember of the design's dark hero, with dark text. */
.band-night .button.primary,.band-night .primary{background:var(--night-button);border-color:var(--night-button);color:var(--night-button-ink)}
.band-night .button.primary:hover,.band-night .primary:not(:disabled):hover{background:var(--night-button-hover);border-color:var(--night-button-hover);color:var(--night-button-ink)}

/* Status tags: what exists today, what is being built and what is planned. The colour pair differs on a night band. */
.status-tag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;width:fit-content;margin:0;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.4}
.status-tag.is-available,.status-tag.is-recorded,.status-tag.is-live{color:var(--ok);background:var(--ok-soft)}
.status-tag.is-building{color:var(--info);background:var(--info-soft)}
.status-tag.is-planned{color:var(--planned);background:var(--planned-soft)}
.status-tag.is-recorded::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.band-night .status-tag.is-live,.band-night .status-tag.is-available{color:var(--night-live);background:var(--night-live-soft)}
.band-night .status-tag.is-building,.step-demo-harness .status-tag.is-building{color:var(--night-building);background:var(--night-building-soft)}
.band-night .status-tag.is-planned{color:var(--night-planned);background:var(--night-planned-soft)}

/* Lists with a check mark drawn in the style sheet, so no image is fetched. */
.check-list,.hero-facts{list-style:none;margin:0;padding:0}
.check-list li,.hero-facts li{position:relative;padding-left:1.6rem}
.check-list li::before,.hero-facts li::before{content:"";position:absolute;left:.3rem;top:.28em;width:.4rem;height:.72rem;border:solid var(--ok);border-width:0 .16rem .16rem 0;transform:rotate(45deg)}

/* The header, September 26, 2026: the SiteHeader of the owner's orange design. One row above 860 pixels: the mark and the
   name, the page links as 44 pixel pills, Sign in and the one primary action. At 860 pixels and below the links fold into a
   panel that the Menu button opens. The panel lies over the page, so the bar keeps its height, and the page script closes it
   with Escape and returns focus to the button. The bar stays in view on a translucent warm ground. A view that opens on a
   dark band marks its section with data-header-tone="dark", and the bar takes the design's dark tone while that view shows. */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-height:var(--header-height);padding:0 var(--band-gutter);background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border);color:var(--ink)}
.header .brand,.site-footer .brand{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;color:var(--ink);font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
/* The mark, traced from the owner's logo sheet of September 23, 2026: one file, baltor-mark.svg, used here and as the page icon. */
.brand .brand-mark{display:block;flex-shrink:0;width:32px;height:32px;background:none;border-radius:8px}
/* On a dark ground the mark's navy tile would lose its corners, so the dark theme draws a hairline around it. */
:root[data-theme=dark] .brand-mark{box-shadow:0 0 0 1px var(--line-strong)}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .brand-mark{box-shadow:0 0 0 1px var(--line-strong)}}
.header nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;flex:1;order:0;flex-basis:auto;min-width:0;overflow:visible}
.header nav a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .75rem;border-radius:8px;color:var(--muted);font-size:.9375rem;font-weight:450;text-decoration:none;white-space:nowrap}
.header nav a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.header nav a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:none}
.header .nav-sign-in{margin-left:auto}
.header .header-primary{flex-shrink:0;min-height:44px;padding:0 1.125rem;border-radius:var(--radius-button);font-size:.9375rem;font-weight:600;white-space:nowrap}
/* Signed in, the account entry stands where Sign in stood and Sign out where the primary action stood, as a quiet button,
   because it ends something rather than starting it. */
.header .nav-account{margin-left:auto;color:var(--ink);font-weight:600}
.header .nav-account svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.header .nav-sign-out{flex-shrink:0;min-height:44px;padding:0 1rem;border:1px solid var(--line-strong);border-radius:var(--radius-button);background:transparent;color:var(--ink);font-size:.9375rem;font-weight:500;line-height:1.25}
.header .nav-sign-out:not(:disabled):hover{border-color:var(--ink);background:var(--tint)}
.menu-button{display:none}
/* Between 861 and 1180 pixels the pills draw closer, so every entry keeps one row on the page's own edges; at 900 and below
   the mark stands without the name beside it. The link keeps its name for assistive technology. */
@media(max-width:1180px) and (min-width:861px){.header{column-gap:.5rem}.header nav a{padding:0 .5rem}.header .header-primary{padding:0 .875rem}}
@media(max-width:900px) and (min-width:861px){.header .brand-name{display:none}}
@media(max-width:860px){
  .header{flex-wrap:wrap;gap:.5rem;min-height:64px;padding-top:.625rem;padding-bottom:.625rem}
  .header .brand{gap:.5rem;font-size:1.125rem}
  .header .header-primary{order:2;flex-shrink:1;min-width:0;margin-left:auto;padding:.375rem 1rem;font-size:.9375rem;line-height:1.25;text-align:center;white-space:normal}
  .menu-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;order:3;flex-shrink:0;min-width:44px;height:44px;min-height:44px;margin:0;padding:0 .875rem;border:1px solid var(--line-strong);border-radius:var(--radius-button);background:transparent;color:var(--ink);font-size:.9375rem;font-weight:500;cursor:pointer}
  .menu-button svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menu-button .menu-icon-close,.menu-button[aria-expanded=true] .menu-icon-open{display:none}
  .menu-button[aria-expanded=true] .menu-icon-close{display:block}
  .menu-button:not(:disabled):hover{border-color:var(--ink);background:var(--tint)}
  .menu-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .header nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow:auto;padding:.5rem var(--band-gutter) 1.5rem;background:var(--paper);border-bottom:1px solid var(--border);box-shadow:var(--panel-shadow)}
  .header.menu-open nav{display:flex}
  .header nav a{min-height:48px;padding:0 .5rem;border-radius:0;border-bottom:1px solid var(--border);color:var(--ink);font-size:1.0625rem}
  .header nav a[aria-current=page]{color:var(--accent)}
  .header .nav-sign-in{margin-left:0;border-bottom:0}
  .header .nav-account{margin-left:0}
  /* Signed in, no primary action stands in the bar to push the menu button to its end, so the button takes the free space. */
  .header:has(> .header-primary[hidden]) .menu-button{margin-left:auto}
  .header .nav-sign-out{width:100%;min-height:48px;margin-top:.75rem;padding:0 .5rem;border:0;border-radius:0;background:none;color:var(--muted);font-size:1.0625rem;font-weight:500;text-align:left}
  .header .nav-sign-out:not(:disabled):hover{color:var(--ink);background:var(--tint)}
}
/* The dark tone. Only the bar's own tokens change, so every rule above holds in both tones. */
body:has(main > [data-header-tone=dark]:not([hidden])) .header{--header-bg:var(--night-header-bg);--ink:var(--night-ink);--muted:var(--night-muted);--border:var(--night-rule);--line-strong:var(--night-rule);--tint:var(--night-card);--paper:var(--night);--accent:var(--night-accent);--button:var(--night-button);--button-hover:var(--night-button-hover);--button-ink:var(--night-button-ink);--panel-shadow:none;color-scheme:dark}
/* A phone held sideways has a short screen, so the sticky bar is slimmer there. */
@media(max-height:500px) and (max-width:1000px){.header{min-height:52px;padding-top:.25rem;padding-bottom:.25rem}}
/* A link to a part of a page lands below the sticky bar, not behind it. */
main [id]{scroll-margin-top:5.25rem}
@media(max-width:860px){main [id]{scroll-margin-top:4.75rem}}
@media(max-height:500px) and (max-width:1000px){main [id]{scroll-margin-top:4rem}}
/* On the narrowest phones the mark stands without the name beside it, so the bar stays on one line. The link keeps its name. */
@media(max-width:380px){.header .brand-name{display:none}.menu-button .menu-button-text{display:none}}

/* The homepage is a stack of bands. While the home view is shown, the main column spans the window and each band paints its
   own ground, draws a one pixel rule on its top edge and holds its content in one column. The selector reads the served markup,
   not the page script, so nothing moves when the script runs. */
main:has(> [data-view="home"]:not([hidden])){max-width:none;padding:0}
.home-band{padding:var(--band-pad) max(var(--band-gutter),calc((100% - var(--content-max)) / 2));background:var(--ground);border-top:1px solid var(--rule);min-width:0}
.home-band.band-plain{background:var(--band)}
.home-band.band-night{background:var(--night);color:var(--night-ink);border-top-color:var(--night-rule)}
.band-night :focus-visible{outline-color:var(--night-accent)}
.home-band .section-title{display:flex;flex-direction:column;gap:1rem;max-width:47.5rem}
.home-band .section-title>*{margin:0}
.home-band .section-title h2{font-size:var(--text-h2);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.home-band .section-title>p:not(.eyebrow){font-size:var(--text-lead);line-height:1.6;color:var(--muted)}
.band-night .eyebrow{color:var(--night-accent)}
.band-night .section-title h2{color:#FFFFFF}
.band-night .section-title>p:not(.eyebrow){color:var(--night-muted)}

/* The hero: the headline and the one action on the left, the demonstration of one step on the right, on a faint dot grid. */
.home-band.band-hero{border-top:0;padding-top:clamp(2.5rem,6.1vw,5.5rem);padding-bottom:clamp(2.75rem,6.7vw,6rem);background-color:var(--ground);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px}
/* The opening message and its action lead; the supporting words sit beside them on a wide screen and under the action on a
   phone; the demonstration of one step follows below at the full width of the page. */
.band-hero .hero.product-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:end;max-width:none;margin:0;padding:0}
@media(min-width:1100px){.band-hero .hero.product-hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:3rem clamp(3rem,6vw,6rem)}}
.band-hero .hero.product-hero>.step-demo{grid-column:1/-1;margin-top:1rem}
.band-hero .hero-aside{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-top:1.25rem;border-top:1px solid var(--line-strong)}
.band-hero .hero-aside>*{margin:0}
.band-hero .hero-copy{display:flex;flex-direction:column;gap:1.75rem;min-width:0}
.band-hero .hero-copy>*{margin:0}
.band-hero .hero.product-hero h1{font-size:var(--text-hero);line-height:1.04;letter-spacing:-.035em;text-wrap:balance;max-width:none}
.band-hero .hero-subhead,.band-hero .hero-positioning{max-width:40rem;padding:0;border:0;font-size:var(--text-lead);line-height:1.55;color:var(--muted);font-weight:400;text-wrap:pretty}
.band-hero .hero-subhead{color:var(--ink)}
.band-hero .hero-aside .hero-positioning{font-size:1rem;line-height:1.6}
.band-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.band-hero .hero-actions .button{min-height:52px;padding:0 1.6rem;font-size:1.0625rem}
.band-hero .hero-facts{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:var(--subtle);font-size:.875rem}
.band-hero .hero-split{max-width:40rem;color:var(--subtle);font-size:.875rem;font-weight:400}
.band-hero .hero-split .hero-value{color:inherit;font-size:inherit}

/* The demonstration of one step. The search and the download are recorded from this release's library; the fresh harness
   below them is being built. Everything is visible at once, so it reads without the page script and never moves by itself. */
.step-demo{min-width:0;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--panel-shadow);overflow:hidden}
.step-demo-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:1rem 1.375rem;border-bottom:1px solid var(--border);background:var(--panel-head)}
.step-demo-head>div{min-width:0}
.step-demo-eyebrow{margin:0;color:var(--subtle);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.step-demo-head h2{margin:.15rem 0 0;font-size:.9375rem;font-weight:600;letter-spacing:0}
.step-demo-parts{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:1.25rem 1.375rem}
.step-demo-part{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.75rem;align-items:start}
.step-demo-number{display:grid;place-items:center;width:24px;height:24px;margin-top:8px;border-radius:999px;background:var(--button);color:var(--button-ink);font-size:.75rem;font-weight:700}
.step-demo-number.is-dark{background:var(--night);color:#FFFFFF}
.step-demo-body{min-width:0}
.step-demo-query code{min-width:0}
@media(min-width:1100px){.step-demo-parts{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"search folder" "download folder";gap:1rem 2rem;align-items:start}
  .step-demo-part[data-demo-stage="search"]{grid-area:search}.step-demo-part[data-demo-stage="download"]{grid-area:download}.step-demo-part[data-demo-stage="folder"]{grid-area:folder}}
/* On a narrow screen the parts drop their numbers, so the search, the download and the folder keep the whole width. */
@media(max-width:480px){.step-demo-part{grid-template-columns:minmax(0,1fr)}.step-demo-number{display:none}.step-demo-parts{padding:1rem}}
.step-demo-query{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .625rem;min-height:40px;margin:0;padding:.35rem .875rem;border:1px solid var(--line-strong);border-radius:var(--radius-field);font-family:var(--font-mono);font-size:.875rem;overflow-wrap:anywhere}
.step-demo-glass{flex-shrink:0;fill:none;stroke:var(--subtle);stroke-width:2;stroke-linecap:round}
.step-demo-verb{flex:none;color:var(--subtle)}
.step-demo code{font:inherit;color:var(--ink);background:none;padding:0}
.step-demo-results{list-style:none;margin:.75rem 0 0;padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.step-demo-results li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .75rem;align-items:center;padding:.75rem 1rem;border-top:1px solid var(--border)}
.step-demo-results li:first-child{border-top:0}
.step-demo-results .is-chosen{background:var(--info-soft)}
.step-demo-name{grid-column:1;font-family:var(--font-mono);font-size:.875rem;font-weight:500;overflow-wrap:anywhere}
.step-demo-facts{grid-column:1;color:var(--subtle);font-family:var(--font-mono);font-size:.75rem;overflow-wrap:anywhere}
.step-demo-chosen{grid-column:2;grid-row:1/span 2;color:var(--info);font-size:.75rem;font-weight:600}
.step-demo-download{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin:0;padding:.625rem .875rem;border-radius:var(--radius-field);background:var(--bg);font-family:var(--font-mono);font-size:.8125rem}
.step-demo-ok{display:inline-flex;align-items:center;gap:.45rem;color:var(--ok);font-family:var(--font-ui);font-size:.8125rem;font-weight:600}
.step-demo-ok::before{content:"";width:.35rem;height:.65rem;margin:0 .15rem .2rem .1rem;border:solid currentColor;border-width:0 .15rem .15rem 0;transform:rotate(45deg)}
.step-demo-harness{display:flex;flex-direction:column;gap:.625rem;padding:.875rem 1rem;border-radius:12px;background:var(--night)}
.step-demo-harness-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
/* On a phone the folder keeps its paths and drops the notes beside them, so the tree needs less sideways room. */
@media(max-width:600px){.step-demo-note-inline{display:none}}
.step-demo-harness-head p:first-child{margin:0;color:var(--night-ink);font-size:.8125rem;font-weight:600}
.step-demo-harness .status-tag{font-size:.6875rem}
.step-demo .step-demo-tree{margin:0;padding:0;max-height:none;border:0;border-radius:0;background:none;color:var(--code-ink);font-family:var(--font-mono);font-size:.78125rem;line-height:1.65;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
.step-demo-note-inline{color:var(--night-muted)}

/* The harness strip. */
.home-band.band-strip{padding-top:1.875rem;padding-bottom:1.875rem}
.harness-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.harness-strip h2{margin:0;color:var(--muted);font-size:.9375rem;font-weight:600;letter-spacing:0}
.harness-list{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;margin:0;padding:0}
.harness-list li{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;padding:0 1.125rem;border:1px solid var(--border);border-radius:var(--radius-field);font-size:.9375rem;font-weight:600}
.harness-list .is-planned{border-style:dashed;border-color:var(--line-strong);color:var(--muted)}
.harness-state{color:var(--subtle);font-size:.75rem;font-weight:500}
.harness-state.is-live{color:var(--ok)}
.harness-note{margin:0;color:var(--subtle);font-size:.875rem}

/* The six problems, each with the honest state of the part behind it. */
.problems,.how-band,.trust{display:flex;flex-direction:column;gap:3.5rem}
.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0;padding:0}
.problem{display:flex;flex-direction:column;gap:.875rem;min-width:0;padding:1.75rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
.problem h3{margin:0;font-size:1.25rem;line-height:1.3}
.problem p:not(.status-tag){margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.problem .status-tag,.how-step .status-tag{margin-top:auto}
.problem-icon{flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.problem-grid{grid-template-columns:minmax(0,1fr)}.problem{gap:.625rem;padding:1.25rem}}

/* How it works, on a night band: five steps and the one connection entry. */
.how-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.how-step{display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:1.5rem;background:var(--night-card);border:1px solid var(--night-rule);border-radius:var(--radius-card)}
.how-index{color:var(--night-accent);font-family:var(--font-mono);font-size:.8125rem}
.how-step h3{margin:0;color:#FFFFFF;font-size:1.1875rem}
.how-step p:not(.status-tag){margin:0;color:var(--night-muted);font-size:.9375rem;line-height:1.55}
.how-connect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:stretch}
.how-connect-copy{display:flex;flex-direction:column;gap:.875rem;padding:1.75rem;background:var(--night-card);border:1px solid var(--night-rule);border-radius:var(--radius-card)}
.how-connect-copy h3{margin:0;color:#FFFFFF;font-size:1.25rem}
.how-connect-copy p{margin:0;color:var(--night-muted)}
.how-connect-copy code{color:var(--night-ink);background:none;padding:0}
.band-night .how-connect-copy .text-link{margin-top:auto;color:var(--night-accent)}
.band-night .how-code{margin:0;padding:1.5rem 1.75rem;max-height:none;background:var(--code-bg);border:1px solid var(--night-rule);border-radius:var(--radius-card);color:var(--code-ink);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
@media(max-width:1100px){.how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.how-steps,.how-connect{grid-template-columns:minmax(0,1fr)}.how-step{gap:.5rem;padding:1.25rem}}

/* The library: the kinds of file a harness picks up, and the count read from this release's catalogue. */
.library{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:3.5rem;align-items:start}
.library-main{display:flex;flex-direction:column;gap:2.5rem;min-width:0}
.kind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.875rem;list-style:none;margin:0;padding:0}
.kind{display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.25rem;border:1px solid var(--border);border-radius:14px}
.kind h3{margin:0;font-size:1rem}
.kind-files{margin:0;color:var(--subtle);font-family:var(--font-mono);font-size:.8125rem;overflow-wrap:anywhere}
.kind .status-tag{margin-top:.25rem}
.library-facts{display:flex;flex-direction:column;gap:1.375rem;padding:2rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-panel)}
.library-count{display:flex;flex-direction:column;gap:.25rem;margin:0;padding-bottom:1.375rem;border-bottom:1px solid var(--border)}
.library-number{font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.library-count span:last-child{color:var(--muted);font-size:.9375rem}
.library-facts .check-list{display:flex;flex-direction:column;gap:1rem;color:var(--muted);font-size:.9375rem}
.library-note{margin:0;color:var(--subtle);font-size:.8125rem}
@media(max-width:1100px){.library{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.kind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.kind-grid{grid-template-columns:minmax(0,1fr)}}

/* Trust: three columns, each under a rule. */
.trust h2,.faq-intro h2{margin:0;font-size:var(--text-h2-small);line-height:1.12;letter-spacing:-.03em;max-width:47.5rem}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0;padding:0}
.trust-grid li{display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;border-top:2px solid var(--ink)}
.trust-grid h3{margin:0;font-size:1.25rem}
.trust-grid p{margin:0;color:var(--muted)}
@media(max-width:760px){.trust-grid{grid-template-columns:minmax(0,1fr)}}

/* Pricing on the homepage: one plan card. */
.home-band .pricing-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:4.5rem;align-items:start;margin:0;padding:0;border:0;background:none}
.plan-summary{display:flex;flex-direction:column;gap:1.5rem;padding:2.25rem;background:var(--paper);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--card-shadow)}
.plan-summary-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.plan-summary-head h3{margin:0;font-size:1.375rem;font-weight:700}
.plan-summary-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;margin:0}
.plan-amount{font-size:3.5rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.plan-per{color:var(--subtle);font-size:1rem}
.plan-summary .check-list{display:flex;flex-direction:column;gap:.75rem;color:var(--ink);font-size:1rem}
.home-band .pricing-teaser-side{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;flex:none}
.home-band .pricing-teaser-side .button{min-height:52px;font-size:1.0625rem}
.home-band .pricing-teaser-side .caption,.home-band .pricing-teaser-side .text-link{margin:0;text-align:center}
@media(max-width:980px){.home-band .pricing-teaser{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* Questions, answered. Native disclosure elements, so every answer opens without the page script. */
.faq{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);gap:4rem;align-items:start}
.faq-intro{display:flex;flex-direction:column;gap:.875rem}
.faq-intro p{margin:0;color:var(--muted);font-size:1.0625rem}
.faq-list{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.faq-item{border-top:1px solid var(--border)}
.faq-item:first-child{border-top:0}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 1.75rem;font-size:1.125rem;font-weight:600;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex-shrink:0;color:var(--subtle);font-size:1.375rem;font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline-offset:-3px}
.faq-item p{margin:0;padding:0 1.75rem 1.5rem;color:var(--muted)}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* The closing band, on night blue, with the one action. */
.band-night .closing-band{display:flex;align-items:center;justify-content:space-between;gap:3rem;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--night-ink)}
.band-night .closing-band h2{margin:0;color:#FFFFFF;font-size:var(--text-h2);line-height:1.1;letter-spacing:-.03em}
.band-night .closing-band p{margin:.875rem 0 0;max-width:none;color:var(--night-muted);font-size:var(--text-lead)}
.band-night .closing-actions .button{min-height:56px;padding:0 1.9rem;font-size:1.125rem}
.band-night .benefit-limits{margin:3rem 0 0;padding-top:1.25rem;max-width:none;border-top:1px solid var(--night-rule);color:var(--night-muted)}
@media(max-width:800px){.band-night .closing-band{flex-direction:column;align-items:flex-start;gap:1.75rem}}

/* The footer, September 26, 2026: the SiteFooter of the owner's orange design. The brand column, five groups (Product,
   Library, Use cases, Documentation, Company) and the base row with the operator's address. Each group is a disclosure: open
   on a wide screen, where its heading reads as a plain label, and closed on a phone until it is pressed, so the phone footer
   is five headings rather than one long column (site-chrome.js; without the script every group stays open). */
.site-footer{display:block;padding:4rem var(--band-gutter) 2rem;background:var(--band);border-top:1px solid var(--border);color:var(--muted);font-size:.875rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:2.5rem 2rem;max-width:var(--content-max);margin:0 auto}
/* A footer group shows once it holds a link, so a group waiting for its pages takes no room. */
.site-footer .footer-links:not(:has(a)){display:none}
.site-footer .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0}
.site-footer .footer-brand p{margin:0;max-width:20rem;color:var(--muted);line-height:1.5}
.footer-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}
.footer-status .status-dot{margin:0;background:var(--ok)}
.site-footer .footer-links{display:block;flex:initial;min-width:0}
.footer-group{min-width:0}
.footer-group>summary{list-style:none}
.footer-group>summary::-webkit-details-marker{display:none}
.footer-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .5rem;color:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none}
.footer-chevron{display:none}
.footer-group-links{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .footer-links a{display:flex;align-items:center;min-height:32px;padding:.25rem 0;color:var(--muted);font-size:.875rem;line-height:1.35;text-decoration:none}
.site-footer .footer-links a:hover{color:var(--ink);text-decoration:none}
.site-footer .footer-links a[aria-current=page]{box-shadow:none;color:var(--ink);font-weight:600}
/* A line of text in a group, such as the contact line, sits like a link. Only a direct child: the label inside the Get started
   link is a span too, and it must keep the link's colour and height. */
.site-footer .footer-group-links>span{display:flex;align-items:center;min-height:32px;padding:.25rem 0;color:var(--subtle);line-height:1.35}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;max-width:var(--content-max);margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid var(--border);color:var(--subtle);font-size:.8125rem}
.footer-bottom p{margin:0}
.footer-base{display:inline-flex;align-items:center;gap:.5rem}
.footer-base .brand-mark{width:20px;height:20px;background:none;border-radius:5px}
.site-footer #theme{min-height:44px;margin:0;padding:0 .875rem;border:1px solid var(--line-strong);border-radius:var(--radius-button);background:transparent;color:var(--muted);font-size:.8125rem;font-weight:500}
.site-footer #theme:not(:disabled):hover{border-color:var(--ink);color:var(--ink)}
@media(min-width:861px){.footer-group>summary{pointer-events:none;cursor:default}}
/* Between 861 and 1100 pixels the brand column spans the row and the five groups share the next one. */
@media(max-width:1100px) and (min-width:861px){.footer-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.5rem}.site-footer .footer-brand{grid-column:1/-1}}
@media(max-width:860px){
  .site-footer{padding:2.5rem var(--band-gutter) 2rem}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .site-footer .footer-brand{padding-bottom:1.5rem}
  .site-footer .footer-links{border-top:1px solid var(--border)}
  .footer-heading{min-height:48px;margin:0;font-size:1rem;cursor:pointer}
  .footer-chevron{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .footer-group[open] .footer-chevron{transform:rotate(180deg)}
  .footer-group-links{padding-bottom:.75rem}
  .site-footer .footer-links a,.site-footer .footer-group-links>span{min-height:44px;font-size:.9375rem}
  .footer-bottom{margin-top:0;flex-direction:column;align-items:flex-start}
}
/* The signed-in views, the workspace, the account page and the administration page, carry the compact footer the review of
   September 26 asked for: the base row and four links, Status, Docs, Privacy notice and Terms of service, from their groups. */
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) .site-footer{padding-top:1.5rem;padding-bottom:1.5rem}
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) .footer-grid{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem}
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) :is(.footer-brand,.footer-heading,#footer-library,#footer-use-cases,.footer-group-links>:not(:is([href="/status"],[href="/docs"],[href="/privacy"],[href="/terms"]))){display:none}
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) .site-footer .footer-links{border:0}
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) .footer-group-links{flex-direction:row;flex-wrap:wrap;gap:0 1.5rem;padding:0}
body:has(main > :is([data-view=workspace],[data-view=account],[data-view=admin]):not([hidden])) .footer-bottom{flex-direction:row;align-items:center;margin-top:.75rem;padding-top:.75rem}

/* The Get started page: a white introduction band, the three steps on the left and one card for each step. The first card
   leads with the one panel the service's record chooses: the invitation request form, account creation, or the way to reach
   the operator, which is also the careful state. */
main:has(> [data-view="setup"]:not([hidden])){max-width:none;padding:0}
.start-intro{display:flex;flex-direction:column;gap:.875rem;padding:clamp(2.5rem,5vw,4.5rem) max(var(--band-gutter),calc((100% - var(--content-max)) / 2)) 2.5rem;background:var(--band);border-bottom:1px solid var(--rule)}
.start-intro>*{margin:0}
.start-intro h1{max-width:none;font-size:clamp(2.25rem,3.6vw,3.25rem);line-height:1.06;letter-spacing:-.035em}
.start-intro .lede{max-width:47.5rem;margin:0;color:var(--muted);font-size:var(--text-lead);line-height:1.6}
.start-layout{display:grid;grid-template-columns:minmax(0,18.75rem) minmax(0,1fr);gap:3.5rem;align-items:start;padding:3.5rem max(var(--band-gutter),calc((100% - var(--content-max)) / 2)) 6rem}
.start-steps-nav{position:sticky;top:6rem;flex:initial}
.start-steps-nav ol{display:flex;flex-direction:column;gap:.375rem;list-style:none;margin:0;padding:0}
.start-steps-nav a{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 1rem;border:1px solid transparent;border-radius:12px;color:var(--ink);text-decoration:none}
.start-steps-nav a:hover{background:var(--paper);border-color:var(--border);color:var(--ink)}
.start-steps-nav li:first-child a{background:var(--paper);border-color:var(--line-strong)}
.start-step-number{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1.5px solid var(--line-strong);border-radius:999px;color:var(--muted);font-size:.8125rem;font-weight:700}
.start-steps-nav li:first-child .start-step-number{background:var(--button);border-color:var(--button);color:var(--button-ink)}
.start-step-text{display:flex;flex-direction:column;gap:.125rem}
.start-step-text strong{font-size:1rem;font-weight:600}
.start-step-text span{color:var(--subtle);font-size:.875rem}
.start-cards{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.start-card{min-width:0;padding:2.25rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-panel);scroll-margin-top:1.5rem}
.start-card>h2,.start-access-main>h2{margin:.25rem 0 1rem;font-size:1.625rem;letter-spacing:-.02em}
.start-card .feature-index{margin:0;color:var(--subtle);font-family:var(--font-mono);font-size:.8125rem}
.start-card h3{margin:0;font-size:1.0625rem}
.start-card>p:not(.feature-index){color:var(--muted)}
.start-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:2.5rem;align-items:start}
.start-access-main{display:flex;flex-direction:column;gap:1rem;min-width:0}
.start-access-main>h2{margin-bottom:0}
.start-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.start-invite,.start-register,.start-operator{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.start-invite p,.start-register p,.start-operator p{margin:0;color:var(--muted)}
.start-invite form{display:flex;flex-direction:column;gap:.5rem}
.start-invite label{margin:.5rem 0 0;font-size:.9375rem;font-weight:600}
.label-note{color:var(--subtle);font-weight:400}
.start-invite input{min-height:48px}
.start-invite form button{align-self:flex-start;min-height:52px;margin-top:.75rem;padding:0 1.6rem;border-radius:var(--radius-button);font-size:1.0625rem}
.start-register .button{align-self:flex-start}
.start-access-main>.start-signin{margin:0;color:var(--ink);font-weight:500}
.start-access-gets{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--bg);border-radius:14px}
.start-access-gets .check-list{display:flex;flex-direction:column;gap:1rem;color:var(--muted);font-size:.9375rem}
.recipe-tabs{display:inline-flex;flex-wrap:wrap;gap:.375rem;margin:1rem 0;padding:.25rem;background:var(--bg);border-radius:12px}
.recipe-tabs [role=tab]{min-height:40px;padding:0 1rem;border:0;border-radius:9px;background:transparent;color:var(--subtle);font-size:.9375rem;font-weight:600}
.recipe-tabs [role=tab]:not(:disabled):hover{color:var(--ink);border-color:transparent}
.recipe-tabs [role=tab][aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(44,30,20,.12)}
.recipe-tabs [role=tab]:focus-visible{outline-offset:1px}
.recipe-where{margin:0 0 .75rem;color:var(--muted)}
.recipe-where strong{color:var(--ink)}
.start-card .recipe-code{margin:0;padding:1.375rem 1.625rem;max-height:none;background:var(--night);border:0;border-radius:14px;color:var(--code-ink);font-size:.875rem;line-height:1.7;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
.recipe-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin:.875rem 0}
.recipe-actions .caption{margin:0}
.recipe-token{margin:.5rem 0 0;color:var(--muted)}
.recipe-token code{padding:.1rem .35rem;border-radius:6px;background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:.875em}
.recipe-more{margin:1.25rem 0 0;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:12px}
.recipe-more summary{cursor:pointer;font-weight:600}
.recipe-check,.recipe-remove{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.recipe-remove p{color:var(--muted)}
.recipe-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.25rem;margin:1rem 0}
.recipe-facts dt,.recipe-facts dd{margin:0}
/* The connection facts stand in two columns while the card is wide enough for the longest name and its value, and one above
   the other when it is not, on a phone or with enlarged text. The measure is in the card's own text size. */
.recipe-check{container-type:inline-size}
@container (max-width:28em){.recipe-facts{grid-template-columns:minmax(0,1fr);gap:.1rem}.recipe-facts dd{margin-bottom:.55rem}}
.recipe-check .actions{margin:1rem 0 .5rem}
@media(max-width:980px){.start-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}.start-steps-nav{position:static}.start-steps-nav ol{flex-direction:row;flex-wrap:wrap}.start-access{grid-template-columns:minmax(0,1fr)}}
/* On a phone the introduction is short and the step's own heading carries its number, so the invitation form and its button
   sit in the first screen of the page the primary action opens. */
@media(max-width:600px){.start-intro{gap:.5rem;padding-top:1.5rem;padding-bottom:1.5rem}.start-intro h1{font-size:1.875rem}.start-intro .lede{font-size:1rem}.start-card .feature-index{display:none}.start-card>h2,.start-access-main>h2{font-size:1.375rem}.start-invite textarea{height:4.5rem}.start-card{padding:1.25rem}.start-layout{padding-top:1.5rem;padding-bottom:3rem}.start-card .recipe-code{white-space:pre-wrap;overflow-wrap:anywhere}}

/* The signed-in views, in the visual language of the dashboard design: a compact title card, white cards with room between
   them on the ground, muted card labels, fact rows divided by rules, and pills for states. No view shows anything it did not
   show before; the dashboard's sidebar and its example figures wait for the account data they would need. */
:is([data-view="workspace"],[data-view="account"],[data-view="admin"]) .panel{padding:1.5rem}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"]) .panel .eyebrow{color:var(--subtle);letter-spacing:.06em}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"]) .panel .section-heading h2{font-size:1.125rem;letter-spacing:-.01em}
#account-facts{gap:0 1.5rem;margin:1rem 0}
#account-facts dt,#account-facts dd{padding:.625rem 0;border-top:1px solid var(--border)}
#account-facts dt{color:var(--subtle);font-size:.875rem}
#account-facts dd{font-family:var(--font-mono);font-size:.875rem}
/* Recorded usage, item by item: a table in the style of the account facts, with muted column labels and rows divided by rules.
   The raw record stays under a disclosure for developers. When the card is too narrow for three columns, on a phone or with
   enlarged text, each row stands as a block that names its own columns, as the table of the privacy notice does. */
#account-usage{container-type:inline-size}
.usage-summary,.usage-note{margin:1rem 0 0;color:var(--muted);font-size:.9375rem}
.usage-empty{margin:1rem 0 0;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:12px;background:var(--panel-head);color:var(--muted);font-size:.9375rem}
.usage-table{width:100%;margin:.75rem 0 0;border-collapse:collapse;font-size:.875rem}
.usage-table th{padding:.5rem 1rem .5rem 0;border-bottom:1px solid var(--border);color:var(--subtle);font-size:.8125rem;font-weight:600;text-align:left;white-space:nowrap}
.usage-table td{padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--border);vertical-align:top}
.usage-table th:last-child,.usage-table td:last-child{padding-right:0}
.usage-table .usage-item{font-family:var(--font-mono);font-size:.8125rem;overflow-wrap:anywhere}
.usage-table th:nth-child(2),.usage-table .usage-count{text-align:right;font-variant-numeric:tabular-nums}
.usage-table .usage-when{color:var(--muted);white-space:nowrap}
.usage-raw{margin-top:1rem}
.usage-raw summary{padding:.625rem 0;cursor:pointer;color:var(--accent);font-weight:600}
[data-view="account"] #usage{margin:.25rem 0 0;padding:1rem 1.25rem;background:var(--panel-head);border:1px solid var(--border);border-radius:12px;font-family:var(--font-mono);font-size:.8125rem}
@container (max-width:26em){
  .usage-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .usage-table,.usage-table tbody,.usage-table tr,.usage-table td{display:block;width:100%}
  .usage-table tr{padding:.625rem 0;border-bottom:1px solid var(--border)}
  .usage-table td,.usage-table .usage-count{padding:.125rem 0;border:0;text-align:left}
  .usage-table .usage-when{white-space:normal}
  .usage-table td::before{content:attr(data-label);display:block;color:var(--subtle);font-family:var(--font-ui);font-size:.75rem;font-weight:600}
}

/* Inner pages open with an introduction band, as the Get started page does: white, the full width of the window, with a rule
   under it, and the page's own content follows on the ground. The band is painted by an outset border image, which widens the
   paint and not the layout, so no page scrolls sideways. */
:is(.page-intro,.pricing-page>.page-heading,.architecture-page>.reading:first-child){margin-top:-3rem;margin-bottom:2.5rem;padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:2.5rem;border-image:linear-gradient(to top,var(--rule) 0 1px,var(--band) 1px) fill 0/0/0 100vmax}
.page-intro>:last-child,.architecture-page>.reading:first-child>:last-child{margin-bottom:0}
.page-intro .lede{margin:1.25rem 0 0}
.page-intro .actions{margin-top:1.5rem}
@media(max-width:680px){:is(.page-intro,.pricing-page>.page-heading,.architecture-page>.reading:first-child){margin-top:-2rem;margin-bottom:1.75rem;padding-top:1.75rem;padding-bottom:1.75rem}}

/* The account shell, September 26, 2026: the AppNav of the orange design, on the two signed-in views that carry it, the
   workspace and the account page. Above 860 pixels a sticky column of 240 pixels holds the sections under their group names;
   at 860 and below the same links stand in one row of pills that scrolls sideways inside its own region. Every link opens a
   page or a section this service has; the design's analytics, team, publisher and settings sections wait for the service to
   have them. The main action of a signed-in view is ink, not the ember of Get started. */
:is([data-view="workspace"],[data-view="account"]):not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
:is([data-view="workspace"],[data-view="account"])>*{min-width:0;margin-top:0;margin-bottom:0}
.dashboard-nav{order:0;display:flex;flex-wrap:nowrap;gap:.375rem;overflow-x:auto;padding:0 0 .25rem;background:none;border:0;border-radius:0}
.dashboard-nav-group{display:contents}
.dashboard-nav-title{display:none}
.dashboard-nav a{display:flex;flex:none;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:1px solid var(--line-strong);border-radius:22px;background:var(--paper);color:var(--muted);font-size:.875rem;font-weight:500;white-space:nowrap;text-decoration:none}
.dashboard-nav a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.dashboard-nav a[aria-current=page]{background:var(--tint);border-color:var(--tint);color:var(--ink);font-weight:600;box-shadow:none}
.dashboard-nav svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:is([data-view="workspace"],[data-view="account"])>.page-heading{margin-bottom:0}
@media(min-width:861px){
  :is([data-view="workspace"],[data-view="account"]):not([hidden]){grid-template-columns:15rem minmax(0,1fr);gap:1.5rem 2rem}
  :is([data-view="workspace"],[data-view="account"])>*{grid-column:2}
  :is([data-view="workspace"],[data-view="account"])>.dashboard-nav{grid-column:1;grid-row:1/span 6;position:sticky;top:calc(var(--header-height) + 1.5rem);flex-direction:column;align-items:stretch;gap:1.125rem;overflow:visible;padding:0}
  .dashboard-nav-group{display:flex;flex-direction:column;gap:1px}
  .dashboard-nav-title{display:block;margin:0;padding:0 .75rem .375rem;color:var(--subtle);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  .dashboard-nav a{min-height:40px;padding:0 .75rem;border:0;border-radius:9px;background:none;font-size:.875rem}
}
/* Beside the column, the two-column grids of these views have too little width until 1180 pixels, so they stack until then. */
@media(min-width:861px) and (max-width:1180px){[data-view="workspace"] .workspace-grid,[data-view="account"] .bottom-grid{grid-template-columns:minmax(0,1fr)}}
/* The title of a signed-in view: a plain heading and its line, as the design's account pages have, not a card. */
:is([data-view="workspace"],[data-view="account"],[data-view="admin"])>.page-heading{flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;padding:0;background:none;border:0;border-radius:0}
@media(min-width:1181px){:is([data-view="workspace"],[data-view="account"],[data-view="admin"])>.page-heading{flex-direction:row;align-items:flex-end;gap:2rem}}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"])>.page-heading h1{margin:.35rem 0 0;font-size:clamp(1.625rem,2.6vw,2rem);font-weight:600;line-height:1.15;letter-spacing:-.025em}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"])>.page-heading .intro{margin:0;max-width:26rem;color:var(--muted)}
/* The sign-in and account creation forms use ink as well, as the design's SignIn and Signup do, so the ember of Get started
   in the header stays the one ember action of those views. */
:is([data-view="workspace"],[data-view="account"],[data-view="admin"],[data-view="login"],[data-view="signup"]) :is(.primary,.button.primary){background:var(--ink-button);border-color:var(--ink-button);color:var(--ink-button-ink)}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"],[data-view="login"],[data-view="signup"]) :is(.primary:not(:disabled):hover,.button.primary:hover){background:var(--ink-button-hover);border-color:var(--ink-button-hover);color:var(--ink-button-ink)}

/* The waiting list page: the introduction band of the Get started page, the invitation card, and beside it what happens after
   you ask. On a phone the card comes first, so the email field stands in the first screen. */
main:has(> [data-view="waitlist"]:not([hidden])){max-width:none;padding:0}
.waitlist-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:2rem;align-items:start;padding:2.5rem max(var(--band-gutter),calc((100% - var(--content-max)) / 2)) 4.5rem}
.waitlist-card{display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:2rem;border-radius:var(--radius-panel)}
.waitlist-card h2{margin:0;font-size:1.375rem;letter-spacing:-.02em}
.waitlist-card p{margin:0}
.waitlist-card form{display:flex;flex-direction:column;gap:.5rem}
.waitlist-card label{margin:.5rem 0 0;font-size:.9375rem;font-weight:600}
.waitlist-card input{min-height:48px}
.waitlist-card form button{align-self:flex-start;min-height:52px;margin-top:.75rem;padding:0 1.6rem;border-radius:var(--radius-button);font-size:1.0625rem}
.waitlist-card .start-signin{color:var(--ink);font-weight:500}
.waitlist-after{display:flex;flex-direction:column;gap:1rem;padding:1.75rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-panel)}
.waitlist-after h2{margin:0;font-size:1.0625rem;letter-spacing:-.01em}
.waitlist-steps{display:flex;flex-direction:column;gap:.75rem;margin:0;padding-left:1.25rem;color:var(--muted);font-size:.9375rem}
.waitlist-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:.5rem 0 0}
.waitlist-links a{font-weight:600;text-decoration:none}
.start-invite .button{align-self:flex-start}
@media(max-width:900px){.waitlist-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.waitlist-layout{padding-top:1.25rem;padding-bottom:3rem}.waitlist-card,.waitlist-after{padding:1.25rem}.waitlist-card textarea{height:4.5rem}}

/* The homepage and use-case pages of September 23, 2026. The owner: the hero should say at once that Baltor is the library of
   everything a harness can use, placed where the harness reads it; the main pain is gathering, vetting and organising those
   files. Three use cases follow, each with its own page. Band padding lands on 64 pixels on a desktop and 40 on a phone, the
   hero holds its copy and the demonstration side by side from the top, and the only dark band is the closing action. */
.home-band.band-hero{padding-top:clamp(2rem,3.34vw,3rem);padding-bottom:clamp(2.5rem,4.45vw,4rem)}
.band-hero .hero.product-hero{grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
@media(min-width:1100px){.band-hero .hero.product-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:2.5rem clamp(2.5rem,4vw,4rem)}
  .band-hero .hero.product-hero>.step-demo{grid-column:auto;margin-top:0}}
.band-hero .hero-copy{gap:1.25rem}
.band-hero .hero-copy>.eyebrow{margin:0}
.band-hero .hero.product-hero h1{font-size:clamp(2.5rem,4.2vw,3.75rem);line-height:1.05}
.band-hero .hero-paths{display:flex;flex-wrap:wrap;gap:.25rem 1rem;color:var(--subtle);font-size:.875rem}
.band-hero .hero-paths strong{color:var(--ink);font-weight:600}
.band-hero .hero-meta{display:flex;flex-direction:column;gap:.875rem;padding-top:1rem;border-top:1px solid var(--line-strong)}
.band-hero .hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin:0;color:var(--muted);font-size:.9375rem}
.band-hero .hero-price strong{color:var(--ink);font-weight:650}
.band-hero .hero-price-amount{color:var(--ink);font-weight:650}
.hero-harnesses{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.hero-harnesses li{display:inline-flex;align-items:center;min-height:32px;padding:0 .75rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink);font-size:.8125rem;font-weight:600}
/* The demonstration beside the headline: its three parts stack in one column, whatever the window width. */
.step-demo.is-compact .step-demo-head{padding:.875rem 1.125rem}
.step-demo.is-compact .step-demo-parts{display:flex;flex-direction:column;gap:.875rem;padding:1rem 1.125rem}
@media(min-width:1100px){.step-demo.is-compact .step-demo-parts{display:flex;grid-template-columns:none;grid-template-areas:none}}
.step-demo.is-compact .step-demo-results{margin-top:.625rem}
.step-demo.is-compact .step-demo-results li{padding:.625rem .875rem}
.step-demo.is-compact .step-demo-tree{font-size:.75rem;line-height:1.6}
/* The library band. */
.library-facts .text-link{align-self:flex-start}
/* Three use cases on the homepage and on their hub page. Three cards stay in one row or one column, never two and one. */
.use-cases{display:flex;flex-direction:column;gap:2rem}
.use-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0;padding:0}
.use-case{display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
.use-case h3,.use-case h2{margin:0;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.use-case p{margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.use-case .text-link,.use-case .button{margin-top:auto;align-self:flex-start}
.use-case-icon{flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.use-case-grid{grid-template-columns:minmax(0,1fr)}.use-case{padding:1.25rem}}
/* How it works sits on a light band now. Its code sample keeps the dark code ground, which a light band may hold. */
.home-band:not(.band-night) .how-band{gap:2rem}
.home-band:not(.band-night) .how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-band:not(.band-night) .how-step{background:var(--ground);border-color:var(--border)}
.home-band:not(.band-night) .how-step h3{color:var(--ink)}
.home-band:not(.band-night) .how-step p:not(.status-tag){color:var(--muted)}
.home-band:not(.band-night) .how-index{color:var(--accent)}
.home-band:not(.band-night) .how-connect-copy{background:var(--ground);border-color:var(--border)}
.home-band:not(.band-night) .how-connect-copy h3{color:var(--ink)}
.home-band:not(.band-night) .how-connect-copy p{color:var(--muted)}
.home-band:not(.band-night) .how-connect-copy code{color:var(--ink)}
.home-band:not(.band-night) .how-connect-copy .text-link{margin-top:auto}
.home-band:not(.band-night) .how-code{margin:0;padding:1.5rem 1.75rem;max-height:none;background:var(--code-bg);border:1px solid var(--code-rule);border-radius:var(--radius-card);color:var(--code-ink);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
.how-option{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.125rem;border:1px solid var(--border);border-radius:12px;background:var(--paper)}
.how-connect-copy .how-option h3{margin:0;font-size:1rem}
.how-connect-copy .how-option p{margin:0;font-size:.9375rem}
@media(max-width:760px){.home-band:not(.band-night) .how-steps{grid-template-columns:minmax(0,1fr)}}
/* The closing band's second action reads on the dark ground. */
.band-night .closing-actions .button.secondary.on-night{background:transparent;color:#FFFFFF;border-color:var(--night-rule)}
.band-night .closing-actions .button.secondary.on-night:hover{border-color:var(--night-accent)}
/* The use-case pages: the white introduction band, then sections in two columns on a wide screen. */
.use-case-page .page-intro h1{max-width:20ch;text-wrap:balance}
/* Long words and button labels wrap at 320 pixels with text enlarged to 200 percent, as on the homepage and the pricing page. */
.use-case-page{overflow-wrap:anywhere}
.use-case-page .button{max-width:100%;white-space:normal;text-align:center}
.use-case-page .page-intro .lede{max-width:47.5rem}
.use-case-page .page-intro .actions{display:flex;flex-wrap:wrap;gap:.75rem}
.use-case-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.use-case-body>section{display:flex;flex-direction:column;gap:.625rem;min-width:0;padding:1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
.use-case-body>section:first-child:nth-last-child(3){grid-column:1/-1}
.use-case-body h2{margin:0;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.use-case-body p{margin:0;color:var(--muted);line-height:1.6;max-width:68ch}
.use-case-body .check-list{display:flex;flex-direction:column;gap:.625rem;color:var(--muted)}
.use-case-steps{display:flex;flex-direction:column;gap:.625rem;margin:0;padding-left:1.25rem;color:var(--muted);line-height:1.6}
.use-case-steps strong{color:var(--ink)}
.use-case-grid.is-page .use-case{padding:1.75rem}
@media(max-width:860px){.use-case-body{grid-template-columns:minmax(0,1fr)}.use-case-body>section{padding:1.25rem}}
/* The homepage of September 24, 2026. The owner: the hero shows no worked example, only the working directory one step gets,
   built on demand, with no manual search and no manual setup; three demonstrations follow, each start to finish. The hero holds
   the copy and the directory side by side on a wide screen, the bands keep 48 pixels of padding on a desktop and 40 on a phone,
   and the page stays within its scroll budget of 4,000 pixels at 1440 wide. */
[data-view="home"]>.home-band{padding-top:2.5rem;padding-bottom:2.5rem}
.band-hero .hero.product-hero h1{font-size:clamp(2.25rem,3.4vw,3.25rem);line-height:1.06}
.band-hero .hero.product-hero>.hero-directory{grid-column:1/-1;margin:0}
@media(min-width:1100px){.band-hero .hero.product-hero>.hero-directory{grid-column:auto;align-self:center}}
.hero-directory{display:flex;flex-direction:column;gap:.875rem;min-width:0;padding:1.25rem 1.375rem;background:var(--night);border-radius:var(--radius-panel);box-shadow:var(--panel-shadow)}
.hero-directory-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
.hero-directory-title{margin:0;color:var(--night-ink);font-size:.9375rem;font-weight:650}
.hero-directory .status-tag{color:var(--night-building);background:var(--night-building-soft)}
.hero-tree{margin:0;padding:0;max-height:none;border:0;background:none;color:var(--code-ink);font-family:var(--font-mono);font-size:.8125rem;line-height:1.58;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
.hero-tree [data-hero-part]{color:var(--night-accent)}
.hero-tree-note{color:var(--night-muted)}
@media(max-width:600px){.hero-tree-note{display:none}}
.hero-directory-note{margin:0;padding-top:.875rem;border-top:1px solid var(--night-rule);color:var(--night-muted);font-size:.875rem;line-height:1.55}
/* The three demonstrations under the hero. */
.demos{display:flex;flex-direction:column;gap:1.5rem}
.demos .section-title h2{margin:0}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0;padding:0}
.demo-card{display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.375rem 1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
.demo-card>*{margin:0}
.demo-card-kind{color:var(--accent);font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.demo-card h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em}
.demo-card p:not(.demo-card-kind){color:var(--muted);line-height:1.55}
.demo-card .text-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px}
@media(max-width:980px){.demo-grid{grid-template-columns:minmax(0,1fr)}.demo-card{padding:1.25rem}}
/* Compact bands, so the homepage holds its nine bands within 4,000 pixels at 1440 wide and 7,502 at 390. Only spacing, columns and
   the one open question change; every card, link and sentence stays. */
[data-view="home"] .section-title{gap:.75rem}
[data-view="home"] .section-title h2{font-size:var(--text-h2-small)}
[data-view="home"] .library-main{gap:1.75rem}
[data-view="home"] .kind{padding:1rem 1.125rem;gap:.375rem}
[data-view="home"] .library-facts{padding:1.5rem;gap:1rem}
[data-view="home"] .library-count{padding-bottom:1rem}
[data-view="home"] .use-cases{gap:1.5rem}
[data-view="home"] .use-case{padding:1.25rem 1.5rem}
[data-view="home"] .trust{gap:2rem}
[data-view="home"] .trust-grid li{gap:.5rem;padding-top:1rem}
[data-view="home"] .plan-summary{padding:1.5rem 1.75rem;gap:1rem}
[data-view="home"] .plan-summary .check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem 1.25rem;font-size:.9375rem}
[data-view="home"] .faq{gap:3rem}
[data-view="home"] .faq-item summary{padding:1.125rem 1.5rem;font-size:1.0625rem}
[data-view="home"] .faq-item p{padding:0 1.5rem 1.125rem}
@media(max-width:700px){[data-view="home"] .plan-summary .check-list{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .kind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.band-hero .hero.product-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
[data-view="home"]>.home-band.band-hero{padding-top:clamp(2.5rem,3.34vw,3rem);padding-bottom:2.5rem}
@media(min-width:1100px){[data-view="home"] .pricing-teaser{grid-template-columns:minmax(0,1fr) minmax(0,38rem);gap:3.5rem}}
[data-view="home"] .demos .section-title h2{font-size:clamp(1.625rem,2.4vw,2.125rem)}
[data-view="home"] .demo-card{gap:.375rem;padding:1.25rem 1.375rem}
@media(max-width:700px){[data-view="home"] .use-case{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem .75rem;align-items:center}
  [data-view="home"] .use-case>:not(.use-case-icon){grid-column:1/-1}
  [data-view="home"] .use-case>.use-case-icon+h3{grid-column:2}
  [data-view="home"] .hero-subhead{font-size:1.0625rem}
  [data-view="home"] .demo-card{padding:1.125rem 1.25rem}}
/* The use-case band's heading, its line about accounts and its cards stand closer together, so the homepage keeps its budget. */
[data-view="home"] .use-cases .section-title{gap:.5rem}
[data-view="home"] .use-cases .section-title>p:not(.eyebrow){font-size:1rem}
[data-view="home"] .use-case{gap:.5rem}
[data-view="home"] .use-case p{line-height:1.55}