/* site.css: the bowtie2027 stylesheet for the PUBLIC site (marketing, /learn, /guides, /docs). Issue 361, initiative 343.
   The twin of web-interim/app/explore/explore.css: same token names (space, radius, role), same look
   (one centred column, large light titles, cards with air, few type styles, orange page with ink text,
   dark = ink page with an orange accent). Colour, role, space and radius are STAMPED from
   brand/tokens.json by brand/build-tokens.mjs (NEW_SURFACES, run `npm run tokens`); the three regions
   between @tokens markers below are generated, do not edit them. No hex lives anywhere else in this file.
   Components: docs/design/components.md (SiteHeader, SiteFooter, Hero, Section, Card, CtaBand, PricingCard,
   ArticleLayout, Callout, CodeBlock, Table, FormField, Button). Live specimen: /brand/components.html.
   Load order on a learn.css page: learn.css first, site.css second (site.css restyles what learn.css drew).
   A page that is NOT on learn.css loads site.css alone: it carries its own reset and base type.
   Text on orange is ALWAYS ink (non-negotiable 25: contrast is only proven by looking at a render). */
:root{
  /* @tokens:begin */
  --bg:#fbf8f1;
  --surface:#fffdf8;
  --ink:#181408;
  --dim:#6d6450;
  --faint:#9a9078;
  --line:#e8e0cc;
  --gold:#8f6400;
  --gold-bright:#c8961a;
  --gold-wash:rgba(200,150,26,.09);
  --red:#a33b1f;
  --red-wash:rgba(163,59,31,.08);
  --good:#176a4a;
  --orange:#ff7626;
  --orange-end:#ff9d00;
  --on-orange:#181408;
  --pageink:var(--on-orange);
  --hair:var(--on-orange);
  --card:var(--surface);
  --cardink:var(--ink);
  --cardline:var(--line);
  --btn:var(--ink);
  --btnink:var(--surface);
  --chip:var(--surface);
  --chipink:var(--ink);
  --chipline:var(--ink);
  --chipon:var(--ink);
  --chiponink:var(--surface);
  --sel:var(--surface);
  --selink:var(--ink);
  --tag:var(--gold);
  --tagwash:var(--gold-wash);
  --accent:var(--orange);
  --onaccent:var(--on-orange);
  --accenttext:var(--ink);
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-48:48px;
  --radius-4:4px;
  --radius-10:10px;
  --radius-12:12px;
  --radius-16:16px;
  --radius-20:20px;
  --radius-pill:999px;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* @tokens:end */
  --page:linear-gradient(180deg,var(--orange) 0%,var(--orange-end) 100%);
  --hdr:var(--page);
  --cta:var(--page);
  --ctaink:var(--on-orange);
  --hh:56px;
  --col:680px;
  --wide:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* @tokens:dark:begin */
  --bg:#0e0c07;
  --surface:#16130b;
  --ink:#f0e8d4;
  --dim:#a99e84;
  --faint:#7d7259;
  --line:#2a2413;
  --gold:#e3ac3f;
  --gold-bright:#f0ba4c;
  --gold-wash:rgba(240,186,76,.07);
  --red:#e88a66;
  --red-wash:rgba(232,138,102,.08);
  --good:#57b88a;
  --pageink:var(--ink);
  --hair:var(--line);
  --card:var(--surface);
  --cardink:var(--ink);
  --cardline:var(--line);
  --btn:var(--orange);
  --btnink:var(--on-orange);
  --chip:var(--surface);
  --chipink:var(--ink);
  --chipline:var(--line);
  --chipon:var(--orange);
  --chiponink:var(--on-orange);
  --sel:var(--ink);
  --selink:var(--bg);
  --tag:var(--gold);
  --tagwash:var(--gold-wash);
  --accent:var(--orange);
  --onaccent:var(--on-orange);
  --accenttext:var(--orange);
  /* @tokens:dark:end */
    --page:var(--bg);
    --hdr:var(--bg);
    --cta:linear-gradient(180deg,var(--orange) 0%,var(--orange-end) 100%);
    --ctaink:var(--on-orange);
    --accenttext:var(--ink);
  }
}
:root[data-theme="dark"]{
  /* @tokens:darkforce:begin */
  --bg:#0e0c07;
  --surface:#16130b;
  --ink:#f0e8d4;
  --dim:#a99e84;
  --faint:#7d7259;
  --line:#2a2413;
  --gold:#e3ac3f;
  --gold-bright:#f0ba4c;
  --gold-wash:rgba(240,186,76,.07);
  --red:#e88a66;
  --red-wash:rgba(232,138,102,.08);
  --good:#57b88a;
  --pageink:var(--ink);
  --hair:var(--line);
  --card:var(--surface);
  --cardink:var(--ink);
  --cardline:var(--line);
  --btn:var(--orange);
  --btnink:var(--on-orange);
  --chip:var(--surface);
  --chipink:var(--ink);
  --chipline:var(--line);
  --chipon:var(--orange);
  --chiponink:var(--on-orange);
  --sel:var(--ink);
  --selink:var(--bg);
  --tag:var(--gold);
  --tagwash:var(--gold-wash);
  --accent:var(--orange);
  --onaccent:var(--on-orange);
  --accenttext:var(--orange);
  /* @tokens:darkforce:end */
  --page:var(--bg);
  --hdr:var(--bg);
  --cta:linear-gradient(180deg,var(--orange) 0%,var(--orange-end) 100%);
  --ctaink:var(--on-orange);
  --accenttext:var(--ink);
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}

/* Base: a reset and the page's type, so a page that does not load learn.css still reads right ----------- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--hh) + var(--space-16))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{max-width:100%}
::selection{background:var(--accent);color:var(--onaccent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--radius-4)}
:root[data-theme="dark"] :focus-visible{outline-color:var(--orange)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--orange)}}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--dim)}
/* The centred column. .wide is the 1080px frame for card grids and the footer. */
.wrap{width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--space-20)}
.wrap.wide{max-width:var(--wide)}
/* Type: five styles. display (Hero), title (Section), lead, body, label. */
.t-display{font:300 clamp(2.25rem,6vw,3.5rem)/1.1 var(--sans);letter-spacing:-.015em}
.t-title{font:300 clamp(1.6rem,3.6vw,2.2rem)/1.2 var(--sans);letter-spacing:-.01em}
.t-lead{font:400 1.125rem/1.55 var(--sans)}
.t-label{font:500 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* Button ------------------------------------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:48px;padding:0 var(--space-24);
  border:1px solid transparent;border-radius:var(--radius-pill);background:var(--btn);color:var(--btnink);
  font:700 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{opacity:.88}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn svg.i{width:18px;height:18px}
.btn-secondary,.btn-ghost{background:var(--chip);color:var(--chipink);border-color:var(--chipline)}
.btn-secondary:hover,.btn-ghost:hover{opacity:1;background:var(--gold-wash)}
.btn-link{min-height:44px;padding:0;border:0;border-radius:var(--radius-4);background:none;color:inherit;font-size:15px;font-weight:600;gap:var(--space-4)}
.btn-link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.btn-sm{min-height:44px;padding:0 var(--space-16);font-size:14px}
.btn-block{display:flex;width:100%}
.acts{display:flex;align-items:center;gap:var(--space-12) var(--space-16);flex-wrap:wrap}

/* SiteHeader: the bow mark only, no wordmark (Ben, 2026-10-16). Orange band in light, ink with an orange rule in dark. */
.site-hdr{position:sticky;top:0;z-index:30;height:var(--hh);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-16);background:var(--hdr);background-attachment:fixed;border-bottom:1px solid var(--hair);color:var(--pageink)}
.site-mark{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin-left:calc(var(--space-8) * -1);text-decoration:none;color:inherit}
.site-mark svg{width:34px;height:28px}
.site-nav{display:none}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-12);font:600 14px/1 var(--sans);text-decoration:none;color:inherit}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.site-menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-right:calc(var(--space-8) * -1);border-radius:var(--radius-pill);color:inherit}
.site-menu-btn .ic-x{display:none}
.site-menu-btn[aria-expanded="true"] .ic-menu{display:none}
.site-menu-btn[aria-expanded="true"] .ic-x{display:block}
/* The phone menu: a card hung from the header, rows as tall as the app's PropertyOption. */
.site-menu{display:none;position:absolute;top:calc(100% + var(--space-8));left:var(--space-16);right:var(--space-16);padding:var(--space-8);
  background:var(--card);color:var(--cardink);border:1px solid var(--cardline);border-radius:var(--radius-16)}
.site-menu.open,.site-menu.is-static{display:block}
.site-menu.is-static{position:static;max-width:360px}
.site-menu a{display:flex;align-items:center;min-height:52px;padding:0 var(--space-12);border-radius:var(--radius-12);font-size:17px;font-weight:600;text-decoration:none}
.site-menu a+a{border-top:1px solid var(--cardline);border-radius:0}
.site-menu a:hover,.site-menu a[aria-current]{background:var(--gold-wash)}
@media (min-width:900px){
  .site-hdr{padding:0 var(--space-24)}
  .site-nav{display:flex;align-items:center;gap:var(--space-4)}
  .site-menu-btn,.site-menu{display:none!important}
}

/* Hero: the first screen. Orange (paper-dark in dark), one large light title, ink on it. ----------------- */
.hero{background:var(--page);background-attachment:fixed;color:var(--pageink);padding:var(--space-48) 0 calc(var(--space-48) + var(--space-16))}
.hero,.ctaband{margin:0}
.hero .wrap{display:flex;flex-direction:column;gap:var(--space-16)}
.hero-eyebrow{font:500 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hero h1,.hero-title{font:300 clamp(2.25rem,6vw,3.5rem)/1.1 var(--sans);letter-spacing:-.015em;overflow-wrap:anywhere}
.hero-sub{font:400 1.125rem/1.55 var(--sans);max-width:36rem}
.hero .acts{margin-top:var(--space-8)}
.hero.hero-wide .wrap{max-width:var(--wide)}
:root[data-theme="dark"] .hero{border-bottom:1px solid var(--hair)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{border-bottom:1px solid var(--hair)}}
@media (min-width:900px){.hero{padding:96px 0 112px}}

/* Section + Card: the page body. Paper ground, a title, then cards with air. ---------------------------- */
.sect{margin:0;padding:var(--space-48) 0}
.sect.sect-alt{border-top:1px solid var(--cardline);border-bottom:1px solid var(--cardline)}
.sect .sect-head{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-24)}
.sect .sect-title{font:300 clamp(1.6rem,3.6vw,2.2rem)/1.2 var(--sans);letter-spacing:-.01em;margin:0;padding:0;border:0}
.sect .sect-sub{font:400 1.0625rem/1.55 var(--sans);color:var(--dim);max-width:38rem;margin:0}
.cards{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));background:transparent;padding:1px;
  border-radius:var(--radius-16);overflow:hidden}
.cards>.card{border:0;border-radius:0;box-shadow:0 0 0 1px var(--cardline)}
.card{background:var(--card);color:var(--cardink);border:1px solid var(--cardline);border-radius:var(--radius-16);padding:var(--space-24)}
.card h3{font:600 1.0625rem/1.3 var(--sans);margin:0 0 var(--space-8)}
.card p{color:var(--dim);font-size:15px;line-height:1.55;margin:0}
.card p+p{margin-top:var(--space-12)}
@media (min-width:900px){.sect{padding:80px 0}}

/* CtaBand: one closing ask. Orange block in light, surface card with an orange button in dark. -------- */
.ctaband{padding:var(--space-24) 0 var(--space-48)}
.ctaband-in{display:flex;flex-direction:column;gap:var(--space-16);align-items:flex-start;background:var(--cta);color:var(--ctaink);
  border-radius:var(--radius-20);padding:var(--space-32) var(--space-24);border:1px solid transparent}
/* On the orange band a button turns ink (rule 2): ink face and paper text in light, the on-orange ink with cream text in dark. */
.ctaband{--dim:var(--ctaink);--accenttext:var(--ctaink)}
.ctaband-in>.btn,.ctaband-in>.acts>.btn{--btn:var(--on-orange);--btnink:var(--surface)}
:root[data-theme="dark"] :is(.ctaband-in>.btn,.ctaband-in>.acts>.btn){--btnink:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.ctaband-in>.btn,.ctaband-in>.acts>.btn){--btnink:var(--ink)}}
.ctaband-in>.btn-secondary,.ctaband-in>.btn-ghost,.ctaband-in .acts>.btn-secondary,.ctaband-in .acts>.btn-ghost{--btn:transparent;background:transparent;color:var(--ctaink);border-color:var(--ctaink)}
.ctaband-title{font:300 clamp(1.6rem,3.6vw,2.2rem)/1.2 var(--sans);letter-spacing:-.01em;margin:0;padding:0;border:0}
.ctaband-in p{font-size:1.0625rem;line-height:1.55;max-width:36rem;margin:0}
@media (min-width:900px){.ctaband-in{padding:var(--space-48)}}

/* PricingCard ------------------------------------------------------------------------------------------- */
.price-grid{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));align-items:stretch}
.price{display:flex;flex-direction:column;gap:var(--space-12);background:var(--card);color:var(--cardink);border:1px solid var(--cardline);
  border-radius:var(--radius-16);padding:var(--space-24)}
.price-featured{border:2px solid var(--ink);padding:calc(var(--space-24) - 1px)}
/* Badges are labels, not accents: an outlined mono pill (rule 4). */
.price-badge{align-self:flex-start;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:var(--space-4) 10px;border-radius:var(--radius-pill);
  background:transparent;color:var(--ink);border:1px solid var(--chipline)}
.price-name{font:600 1.0625rem/1.3 var(--sans);margin:0}
.price-amt{display:flex;align-items:baseline;gap:var(--space-8);margin:0}
.price-amt b{font:300 2.75rem/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-amt span{font-size:14px;color:var(--dim)}
.price-desc{font-size:15px;line-height:1.5;color:var(--dim);margin:0}
.price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--cardline)}
.price-list li{display:flex;gap:var(--space-8);padding:10px 0;border-bottom:1px solid var(--cardline);font-size:15px;line-height:1.4}
.price-list li::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;background:var(--good);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.price .btn{margin-top:auto}

/* Callout: a note, a warning, a win, or the one-line summary ------------------------------------------- */
.callout,.bluf{--cc:var(--ink);--cl:var(--dim);--cw:var(--tagwash);margin:var(--space-24) 0 0;padding:var(--space-16) var(--space-20);background:var(--cw);
  border:1px solid color-mix(in srgb,var(--cc) 30%,var(--cardline));border-radius:var(--radius-12);color:var(--ink)}
.callout p.callout-label,.bluf p.bluf-label{font:500 .68rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cl);margin:0 0 var(--space-8)}
.callout p,.bluf p{margin:0;font-size:1rem;line-height:1.6}
.callout p+p{margin-top:var(--space-8)}
.callout-warn{--cc:var(--red);--cl:var(--red);--cw:var(--red-wash)}
.callout-good{--cc:var(--good);--cl:var(--good);--cw:color-mix(in srgb,var(--good) 9%,transparent)}
.callout-tip{--cc:var(--ink);--cw:var(--card)}
.bluf{margin-top:var(--space-24)}
.bluf p:last-child{margin:0;font-size:1.0625rem;line-height:1.6}

/* CodeBlock: a surface card, mono, scrolls sideways, optional caption and copy button -------------------- */
.codeblock{margin:var(--space-24) 0 0;background:var(--card);border:1px solid var(--cardline);border-radius:var(--radius-12);overflow:hidden}
.codeblock-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:44px;padding:0 var(--space-16);
  border-bottom:1px solid var(--cardline);font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.codeblock-copy{min-height:44px;padding:0 var(--space-4);font:600 12px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--ink)}
.codeblock-copy:hover{text-decoration:underline;text-underline-offset:4px}
.codeblock pre,article pre{margin:0;background:var(--card);border:0;border-radius:0;padding:var(--space-16);overflow-x:auto;-webkit-overflow-scrolling:touch;
  font:400 .85rem/1.6 var(--mono);color:var(--cardink);max-width:100%}
article pre{margin-top:var(--space-16);border:1px solid var(--cardline);border-radius:var(--radius-12)}
.codeblock pre code,article pre code{background:none;padding:0;font:inherit;white-space:pre;overflow-wrap:normal;word-break:normal;color:inherit}
:not(pre)>code{font:400 .875em var(--mono);background:var(--tagwash);padding:.1em .35em;border-radius:var(--radius-4)}

/* Table: a surface card, header in dim sans, hairline rows, scrolls sideways on a phone ----------------- */
.tbl,article table{background:var(--card);color:var(--cardink);border:1px solid var(--cardline);border-radius:var(--radius-12);
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl{margin:var(--space-24) 0 0}
.tbl table,article table{width:100%;font-size:15px}
.tbl table{border-collapse:collapse}
article table{display:table;border-collapse:separate;border-spacing:0;margin-top:var(--space-24);overflow:visible}
@media (max-width:768px){article table{display:block;overflow-x:auto}}
.tbl th,article th{font:500 .68rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:var(--space-12) var(--space-16);
  border-bottom:1px solid var(--cardline);white-space:nowrap}
.tbl td,article td{padding:var(--space-12) var(--space-16);text-align:left;vertical-align:top;border-bottom:1px solid var(--cardline);line-height:1.45}
.tbl tr:last-child td,article tr:last-child td{border-bottom:0}
.tbl .num,article td.num,article th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:hover td,article tbody tr:hover td{background:var(--gold-wash)}

/* FormField: label above, a 48px input, help or error under it ------------------------------------------ */
.field{display:flex;flex-direction:column;gap:var(--space-8);margin:0 0 var(--space-16)}
.field-label{font:600 14px/1.3 var(--sans);color:var(--ink)}
.field-input{width:100%;min-height:48px;padding:0 var(--space-16);font:400 16px/1.4 var(--sans);color:var(--cardink);background:var(--card);
  border:1px solid var(--chipline);border-radius:var(--radius-12);appearance:none;-webkit-appearance:none}
textarea.field-input{padding:var(--space-12) var(--space-16);min-height:112px;resize:vertical}
.field-input::placeholder{color:var(--faint)}
.field-input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:root[data-theme="dark"] .field-input:focus-visible{outline-color:var(--orange)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field-input:focus-visible{outline-color:var(--orange)}}
.field-input:disabled{opacity:.55;background:var(--gold-wash)}
.field-help{font-size:13px;line-height:1.4;color:var(--dim);margin:0}
.field-error{display:none;font-size:13px;line-height:1.4;font-weight:600;color:var(--red);margin:0}
.field.invalid .field-input{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.field.invalid .field-error{display:block}
.field.invalid .field-help{display:none}

/* Footer ------------------------------------------------------------------------------------------------ */
.site-ftr{margin-top:var(--space-48);border-top:1px solid var(--cardline);padding:var(--space-32) 0 var(--space-48);color:var(--dim)}
.site-ftr .wrap{display:flex;flex-direction:column;gap:var(--space-16)}
.site-ftr .site-mark{align-self:flex-start;color:var(--ink)}
.site-ftr nav{display:flex;flex-wrap:wrap;gap:0 var(--space-4);margin-left:calc(var(--space-12) * -1)}
.site-ftr nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-12);font-size:14px;text-decoration:none;color:var(--dim)}
.site-ftr nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
main.flow+.site-ftr{margin-top:0}
@media (min-width:900px){
  .site-ftr .wrap{flex-direction:row;align-items:center;justify-content:space-between}
  .site-ftr nav{margin-left:0;justify-content:flex-end}
}

/* ArticleLayout: restyles what learn.css draws. Markup is unchanged (crumb, article, .toc INSIDE the article,
   .sidenav OUTSIDE it: non-negotiable 27, two tables of contents). ----------------------------------------- */
main{max-width:46rem;margin:0 auto;padding:var(--space-32) var(--space-20) 0}
main.guide{max-width:64rem}
main.flow{max-width:none;padding:0}
@media (min-width:900px){main{padding:var(--space-48) var(--space-24) 0}}
.crumb{font:400 13px/1.4 var(--sans);color:var(--dim);margin:0 0 var(--space-24);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumb span{margin:0 var(--space-4);color:var(--faint)}
article h1,article h2,article h3,main section h2,.stat b{font-family:var(--sans)}
article h1{font:300 clamp(2rem,5.4vw,3rem)/1.12 var(--sans);letter-spacing:-.015em;margin:0 0 var(--space-12)}
article h2,main section h2{font:300 clamp(1.45rem,3.2vw,1.9rem)/1.22 var(--sans);letter-spacing:-.01em;margin-top:var(--space-48);padding:0;border:0}
article h3{font:600 1.125rem/1.35 var(--sans);margin-top:var(--space-32)}
article p,article li{font-size:1.0625rem;line-height:1.7}
article>p:first-of-type{font-size:1.1875rem;line-height:1.6;color:var(--dim)}
article a{color:var(--accenttext);text-underline-offset:3px}
article li::marker{color:var(--accenttext)}
article hr{border:0;border-top:1px solid var(--cardline);margin:var(--space-32) 0}
article blockquote{margin:var(--space-24) 0 0;padding:var(--space-16) var(--space-20);background:var(--tagwash);border:1px solid var(--cardline);
  border-radius:var(--radius-12)}
article blockquote p{margin:0}
.toc,.related li a,.react,.comment,.mbtn,.prompt,.report,.notecard{background:var(--card);border-color:var(--cardline)}
.toc{border-radius:var(--radius-16);padding:var(--space-20) var(--space-24)}
.toc-label,.sidenav .toc-label,.related-label,.pp-label,.prompt-cap{font-family:var(--mono)}
.toc a{color:var(--dim)}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.sidenav ul{border-left:1px solid var(--cardline)}
.sidenav a:hover{color:var(--ink)}
.sidenav a.active{color:var(--ink);border-left-color:var(--ink)}
.mbtn{min-height:44px;border-radius:var(--radius-pill);padding:0 var(--space-16)}
.related li a{border-radius:var(--radius-12)}
.related li a:hover{border-color:var(--ink)}
.cta{border-radius:var(--radius-16);background:var(--card);border-color:var(--cardline)}
:root[data-theme="dark"] .related li a:hover,:root[data-theme="dark"] .mbtn:hover{border-color:var(--orange)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .related li a:hover,:root:not([data-theme="light"]) .mbtn:hover{border-color:var(--orange)}}
/* the machine-reference button is ink on both themes: orange text is for nothing on this site (issue 370) */
.mbtn-machine,.mbtn-machine:hover{color:var(--ink)}
@media (max-width:768px){main{padding-top:var(--space-24)}}

/* bowtie2027 polish (issue 370): the craft bar of issue 368 on the public site. --------------------------------------------- */
/* Rule 7, hidden touch: hovering or focusing the header mark redraws the bow, stroke by stroke (the app's header does the same). */
.site-hdr .site-mark svg{overflow:visible}
.site-hdr .site-mark svg path{stroke-dasharray:100}
@keyframes bowdraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
  :root:not(.noanim) .site-hdr .site-mark:hover svg path,:root:not(.noanim) .site-hdr .site-mark:focus-visible svg path{animation:bowdraw .6s ease-out both}
  :root:not(.noanim) .site-hdr .site-mark:hover svg path+path,:root:not(.noanim) .site-hdr .site-mark:focus-visible svg path+path{animation-delay:.12s}
  /* Rule 7, the primary: the join. Hovering or focusing the page's one primary closes the two halves of the header bow toward each other.
     Transform only, 200ms ease-out, never delays the click. */
  :root:not(.noanim) .site-hdr .site-mark svg path{transition:transform .2s ease-out}
  :root:not(.noanim) body:has(:is(.hero,.ctaband,main.flow) .btn:not(.btn-secondary,.btn-ghost,.btn-link):is(:hover,:focus-visible)) .site-hdr .site-mark svg path:first-child{transform:translateX(3px)}
  :root:not(.noanim) body:has(:is(.hero,.ctaband,main.flow) .btn:not(.btn-secondary,.btn-ghost,.btn-link):is(:hover,:focus-visible)) .site-hdr .site-mark svg path+path{transform:translateX(-3px)}
}
.noanim *{transition:none!important;animation:none!important}
@media (max-width:768px){.tbl th,article th{letter-spacing:.02em;font-size:.6rem;overflow-wrap:anywhere;padding-left:var(--space-8);padding-right:var(--space-8)}}