/* 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:700;letter-spacing:-.035em}
h2{font-weight:700;letter-spacing:-.02em}
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:.1em;text-transform:uppercase;color:var(--accent)}
.caption{color:var(--subtle)}
.secondary{color:var(--muted)}
.badge{display:inline-flex;align-items:center;padding:.25rem .7rem;border:0;border-radius:999px;background:var(--info-soft);color:var(--info);font-size:.75rem;font-weight:600;line-height:1.4}

/* Buttons and fields. One primary colour, one secondary style, and field edges that stand out from the ground. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:48px;padding:.75rem 1.4rem;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)}
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:transparent;color:var(--accent);border-color:var(--line-strong)}
.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)}
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)}

/* 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: the wordmark, four links, sign-in and the one primary action. Below 860 pixels the links fold into a menu
   that a checkbox opens, so the menu works without the page script and nothing moves when the script runs. The checkbox is
   hidden from sight but not from the keyboard, and its focus shows on the menu button. With enlarged text the bar wraps
   onto a second line instead of running off the screen. */
/* The bar stays in view while the page scrolls, on a solid ground under its rule, so the pages and the action are always one
   press away. It sits below the safe area of a phone's screen. */
.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 2rem;min-height:72px;padding:0 var(--band-gutter);background:var(--paper);border-bottom:1px solid var(--border)}
.header .brand,.site-footer .brand{display:inline-flex;align-items:center;gap:.625rem;color:var(--ink);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;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:7px}
.header nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 2rem;flex:1;order:0;flex-basis:auto;min-width:0;overflow:visible}
.header nav a{padding:.5rem 0;color:var(--muted);font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap}
.header nav a:hover{color:var(--ink)}
.header nav a[aria-current=page]{color:var(--ink);box-shadow:0 2px 0 var(--button)}
.header .nav-sign-in{margin-left:auto}
/* Six page links, Sign in and the primary action share one row down to 861 pixels; below 1180 they sit closer together. */
@media(max-width:1180px) and (min-width:861px){.header{column-gap:1.25rem}.header nav{column-gap:1.25rem}}
.header .header-primary{flex-shrink:0;min-height:44px;padding:.5rem 1.25rem;border-radius:var(--radius-field);font-size:.9375rem}
/* 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{display:inline-flex;align-items:center;gap:.5rem;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:.5rem 1.25rem;background:var(--paper);color:var(--ink);font-size:.9375rem;line-height:1.25}
.header .nav-sign-out:not(:disabled):hover{border-color:var(--ink)}
.menu-toggle,.menu-button{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{flex-shrink:1;min-width:0;min-height:44px;padding:.375rem .875rem;font-size:.875rem;line-height:1.25;text-align:center;white-space:normal}
  .header .header-primary{order:2;margin-left:auto}
  .menu-toggle{display:block;position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .menu-button{display:inline-grid;place-items:center;order:3;width:44px;height:44px;margin:0;border:1px solid var(--border);border-radius:var(--radius-field);background:var(--paper);color:var(--ink);cursor:pointer}
  .menu-button svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menu-toggle:focus-visible+.menu-button{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;align-items:stretch;gap:0;padding:.25rem var(--band-gutter) 1rem;background:var(--paper);border-bottom:1px solid var(--border);box-shadow:var(--card-shadow)}
  .menu-toggle:checked~nav{display:flex}
  .header nav a{padding:.8rem 0;border-bottom:1px solid var(--border)}
  .header nav a[aria-current=page]{box-shadow:none}
  .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:44px;padding:.8rem 0;border:0;border-radius:0;background:none;color:var(--muted);font-weight:500;text-align:left}
  .header .nav-sign-out:not(:disabled):hover{color:var(--ink)}
}
/* 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}}

/* 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: four columns, the operator's address and the appearance switch. */
.site-footer{display:block;padding:4rem var(--band-gutter) 3rem;background:var(--paper);border-top:1px solid var(--rule);color:var(--muted);font-size:.9375rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr));gap:2.5rem;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}
.footer-base{display:inline-flex;align-items:center;gap:.5rem}
.footer-base .brand-mark{width:20px;height:20px;border-radius:5px}
.site-footer .footer-brand{display:flex;flex-direction:column;gap:.875rem;min-width:0}
.site-footer .footer-brand p{margin:0;max-width:20rem;color:var(--subtle)}
.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:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.75rem;flex:initial}
.footer-heading{margin:0;color:var(--subtle);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.site-footer .footer-links a{padding:0;color:var(--muted);font-size:.9375rem;text-decoration:none}
.site-footer .footer-links a:hover{color:var(--ink)}
.site-footer .footer-links a[aria-current=page]{box-shadow:none;color:var(--ink)}
.site-footer .footer-links span{color:var(--subtle)}
.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:.875rem}
.footer-bottom p{margin:0}
.site-footer #theme{min-height:40px;margin:0;padding:.4rem .9rem;font-size:.8125rem}
/* Below 900 pixels the link columns share the width two by two, and fall to one column when enlarged text needs the room. */
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}.site-footer .footer-brand{grid-column:1/-1}}
@media(max-width:480px){.site-footer{padding:2.5rem 1rem 2rem}.footer-grid{gap:2rem 1.5rem}}

/* 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(10,16,32,.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"])>.page-heading{align-items:center;margin-bottom:1.5rem;padding:1.5rem 1.75rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
:is([data-view="workspace"],[data-view="account"],[data-view="admin"])>.page-heading h1{margin:.35rem 0 0;font-size:clamp(1.625rem,2.4vw,2.125rem);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)}
: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 side navigation of the dashboard design, on the workspace and the account page. It points only at sections these views
   already have; the design's settings page and example figures wait for the account data they would need. */
:is([data-view="workspace"],[data-view="account"]):not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;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:wrap;gap:.25rem;padding:.5rem;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-card)}
.dashboard-nav a{display:flex;align-items:center;gap:.625rem;min-height:40px;padding:0 .75rem;border-radius:9px;color:var(--muted);font-size:.9375rem;font-weight:500;text-decoration:none}
.dashboard-nav a:hover{background:var(--planned-soft);color:var(--ink)}
.dashboard-nav a[aria-current=page]{background:var(--info-soft);color:var(--info);box-shadow:none}
:is([data-view="workspace"],[data-view="account"])>.page-heading{margin-bottom:0}
.dashboard-nav svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1024px){:is([data-view="workspace"],[data-view="account"]):not([hidden]){grid-template-columns:13.5rem minmax(0,1fr);gap:1.25rem 1.5rem}
  :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:1.5rem;flex-direction:column;align-items:stretch}}

/* 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}}