/* ============================================================================
   TYPOGRAPHY STANDARD (2026-08-24, Michael, direct instruction):
   MINIMUM FONT SIZE IS 16px. Nothing on this site renders smaller than 16px.
   Audience is investors in their sixties, most wearing glasses, many not
   comfortable zooming a browser - readable-at-arm's-length type is a hard
   requirement, not a preference. Do NOT introduce any font-size below 16px in
   this file, in any template's scoped <style>, or in any inline style. If a
   label looks too big at 16px, change the layout, not the floor.
   ============================================================================ */
/* ============================================================================
   INVESTOR CALCULATOR (#inv-calc) - moved out of the partial's <style> block
   2026-08-25 (WO-IPLAN-INVESTORS-PAGE-CLARITY-REWRITE separation of concerns).
   Scoped under #inv-calc. All type >= 16px. Helper classes (.calc-label--first,
   .calc-intro, .calc-hint, .calc-own--plain) replace former inline styles.
   ============================================================================ */
#inv-calc{ --calc-line:var(--line); }
/* Two-column interactive layout (2026-08-25): controls and results are visible at the
   same time. Grid-areas reorder for each viewport from ONE markup:
   - mobile (single col):  buttons -> results -> sliders, so pressing a button shows
     the numbers directly below it (the readability fix Michael flagged).
   - desktop (>=900px):    controls (buttons + sliders) on the left, results panel on
     the right, sticky so it stays in view while you adjust. */
#inv-calc .calc-layout{ display:grid; gap:20px 28px; grid-template-columns:1fr;
  grid-template-areas:"top" "readout" "sliders"; }
#inv-calc .calc-controls-top{ grid-area:top; }
#inv-calc .calc-readout{ grid-area:readout; }
#inv-calc .calc-sliders{ grid-area:sliders; }
@media (min-width:900px){
  #inv-calc .calc-layout{ grid-template-columns:minmax(0,1.35fr) minmax(310px,1fr);
    grid-template-areas:"top readout" "sliders readout"; align-items:start; }
  #inv-calc .calc-readout{ position:sticky; top:16px; }
}
#inv-calc .calc-readout{ background:var(--panel,#f6f8fa); border:1px solid var(--calc-line);
  padding:14px 16px; }
#inv-calc .calc-readout .calc-results{ grid-template-columns:repeat(2,1fr); }
#inv-calc .calc-readout .calc-results,
#inv-calc .calc-readout .calc-secondary{ margin-top:0; }
#inv-calc .calc-intro{ max-width:74ch; }
#inv-calc .calc-hint{ color:var(--gray); margin:0 0 10px; }
#inv-calc .calc-label{ margin-top:20px; }
#inv-calc .calc-label--first{ margin-top:0; }
#inv-calc .calc-source{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px; }
#inv-calc .calc-source button{ font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:700;
  color:var(--navy); background:var(--white); border:1px solid var(--calc-line); border-radius:3px;
  padding:10px 16px; cursor:pointer; }
#inv-calc .calc-source button:hover{ background:var(--green-soft); }
#inv-calc .calc-source button[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
#inv-calc .calc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:16px 0; }
#inv-calc .calc-slider{ border:1px solid var(--calc-line); background:var(--white); padding:12px 14px; }
#inv-calc .calc-slider label{ display:block; font-size:16px; color:var(--navy); font-weight:700; margin:0 0 2px; }
#inv-calc .calc-slider .tip{ display:block; font-size:16px; color:var(--gray); margin:0 0 8px; }
#inv-calc .calc-slider input[type=range]{ width:100%; margin:4px 0; }
#inv-calc .calc-slider .rng{ display:flex; justify-content:space-between; font-size:16px; color:var(--gray); }
#inv-calc .calc-slider .cur{ font-size:16px; font-weight:700; color:var(--green); margin-top:4px; }
#inv-calc .calc-slider .cur .sub{ font-weight:400; font-size:16px; color:var(--gray); }
#inv-calc .calc-slider .fieldrow{ display:flex; align-items:center; gap:6px; margin-top:6px; }
#inv-calc .calc-slider input[type=text]{ font-family:Arial,Helvetica,sans-serif; font-size:16px; padding:5px 8px;
  border:1px solid var(--calc-line); border-radius:3px; color:var(--ink); background:var(--white); width:100%; }
#inv-calc .calc-slider input[type=text].bad{ border-color:#a3402f; background:#fdf4f2; }
#inv-calc .calc-slider .unit{ font-size:16px; color:var(--gray); min-width:34px; }
#inv-calc .calc-slider .err{ color:#a3402f; font-size:16px; min-height:14px; margin-top:2px; }
#inv-calc .calc-results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
#inv-calc .calc-res{ border:1px solid var(--calc-line); background:var(--white); padding:14px; }
#inv-calc .calc-res.big{ background:var(--navy); }
#inv-calc .calc-res .rl{ font-size:16px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray); }
#inv-calc .calc-res.big .rl{ color:#cfe0f2; }
#inv-calc .calc-res .rv{ font-size:24px; font-weight:800; color:var(--navy); margin-top:4px; line-height:1.1; }
#inv-calc .calc-res.big .rv{ color:#fff; }
#inv-calc .calc-secondary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0;
  border:1px solid var(--calc-line); margin:14px 0; }
#inv-calc .calc-secondary .sr{ padding:10px 14px; border-bottom:1px solid var(--line-soft); display:flex;
  justify-content:space-between; font-size:16px; }
#inv-calc .calc-secondary .sr .sl{ color:var(--gray); }
#inv-calc .calc-secondary .sr .sv{ color:var(--navy); font-weight:700; }
#inv-calc .calc-stage{ padding:10px 14px; background:var(--green-soft); border:1px solid var(--calc-line);
  font-size:16px; color:var(--navy); margin:12px 0; }
#inv-calc .calc-own{ padding:10px 14px; border:1px dashed var(--calc-line); font-size:16px; color:var(--gray); margin:12px 0; }
#inv-calc .calc-own strong{ color:var(--navy); }
#inv-calc .calc-own--plain{ border-style:none; padding-left:0; }
#inv-calc .calc-scenarios{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
#inv-calc .calc-scenarios button{ font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:700;
  color:var(--navy); background:var(--white); border:1px solid var(--calc-line); border-radius:3px; padding:8px 14px; cursor:pointer; }
#inv-calc .calc-scenarios button:hover{ background:var(--green-soft); }
#inv-calc .calc-scenarios button[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
#inv-calc .calc-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin:14px 0; }
#inv-calc .calc-flow .fs{ border:1px solid var(--calc-line); background:var(--white); padding:12px 14px;
  font-size:16px; color:var(--navy); text-align:center; }
#inv-calc .calc-flow .fs strong{ display:block; font-size:16px; margin-bottom:3px; }
#inv-calc .calc-flow .fa{ color:var(--gray); font-weight:700; text-align:center; }
#inv-calc .calc-glossary dt{ font-weight:700; color:var(--navy); font-size:16px; margin-top:12px; }
#inv-calc .calc-glossary dd{ margin:2px 0 0; font-size:16px; color:var(--ink); max-width:78ch; }
@media (max-width:640px){ #inv-calc .calc-flow{ grid-template-columns:1fr; } #inv-calc .calc-flow .fa{ transform:rotate(90deg); } }

/* ============================================================================
   INVESTOR BUSINESS PAGE (WO-IPLAN-INVESTORS-PAGE-CLARITY-REWRITE 2026-08-25)
   Semantic components for the business-first /investors rewrite. Central here so
   the page carries no <style> blocks or inline styles. All type >= 16px per the
   typography standard above.
   ============================================================================ */
.investor-business-page{ max-width:var(--wide,1100px); margin:0 auto; padding:0 20px 48px; }
.investor-business-page .page-header{ padding:28px 0 8px; }
.investor-business-page .page-introduction{ font-size:19px; line-height:1.6; color:var(--ink);
  max-width:74ch; }
.investor-business-page .content-section{ padding:26px 0; border-top:1px solid var(--line); }
.investor-business-page .section-heading{ margin:0 0 14px; }
.investor-business-page .step-label{ font-size:16px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--green); font-weight:700; margin:0 0 2px; }
.investor-business-page .content-section > p{ max-width:74ch; }
.investor-business-page .section-note{ max-width:74ch; color:var(--gray); }
.investor-business-page .subhead{ font-size:17px; color:var(--navy); margin:18px 0 6px; }
.investor-business-page .page-guide{ margin:14px 0 4px; font-size:16px; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.investor-business-page .page-guide a{ color:var(--navy); font-weight:700; text-decoration:none; border-bottom:2px solid var(--green); padding-bottom:1px; }
.investor-business-page .page-guide a:hover{ background:var(--green-soft); }
.investor-business-page .page-guide span{ color:var(--gray); }
.investor-business-page .page-map{ padding:8px 0 6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.investor-business-page .page-map > p{ max-width:74ch; }
.investor-business-page .card-grid .map-card{ display:block; position:relative; text-decoration:none;
  color:inherit; background:var(--white); border:1px solid var(--navy); border-left:1px solid var(--navy);
  border-radius:4px; padding:14px 40px 14px 18px; transition:background .12s, box-shadow .12s; }
.investor-business-page .card-grid .map-card:hover{ background:var(--green-soft); box-shadow:0 1px 5px rgba(0,0,0,.14); }
.investor-business-page .card-grid .map-card::after{ content:"\2192"; position:absolute; right:16px; top:16px;
  color:var(--green); font-weight:700; font-size:18px; }
.investor-business-page .card-grid .map-card h3{ color:var(--navy); margin:0 0 4px; }
.investor-business-page .card-grid .map-card p{ color:var(--gray); margin:0; }
.investor-business-page .process-steps{ list-style:none; margin:16px 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.process-steps .process-step{ border:none; border-left:3px solid var(--green); background:var(--panel);
  padding:14px 18px; }
.process-steps .process-step h3{ font-size:17px; color:var(--navy); margin:0 0 6px; }
.card-grid{ display:grid; gap:16px; margin:16px 0; }
.card-grid--two{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card-grid--three{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card-grid .card{ border:none; border-left:3px solid var(--line); background:var(--panel); padding:14px 18px; }
.card-grid .card h3{ font-size:17px; color:var(--navy); margin:0 0 8px; }
.feature-list{ max-width:74ch; margin:12px 0; padding-left:22px; }
.feature-list li{ margin:6px 0; }
.definition-list{ display:grid; gap:0; border:1px solid var(--line); margin:16px 0; }
.definition-list .definition-row{ padding:16px 18px; border-bottom:1px solid var(--line-soft,#e7ecf1);
  display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start; }
.definition-list .definition-row:last-child{ border-bottom:none; }
.definition-list .definition-row h3{ font-size:17px; color:var(--navy); margin:0; }
.definition-list .definition-row p{ margin:0; }
.distribution-order{ margin:8px 0 0; padding-left:22px; }
.distribution-order li{ margin:6px 0; }
.investor-business-page .page-disclaimer{ margin-top:28px; padding:16px 0 0; border-top:1px solid var(--line);
  color:var(--gray); }
.investor-business-page .page-disclaimer p{ max-width:74ch; }
@media (max-width:560px){ .definition-list .definition-row{ grid-template-columns:1fr; gap:6px; } }

/* CHANGE LOG
   File: /var/www/html/iplan.nsgia.com/static/css/site.css
   Purpose: Institutional deal-room styling for the iPlan investor site
   Version History:
   2026-08-24 - 16px minimum font-size floor applied site-wide (61 sub-16px
                declarations here + 20 in _investor_calculator.html raised to
                16px). Standard documented in the banner above.
   2026-06-28 v1.0 - Initial creation (as benson.nsgia.com; forked with the site)
   2026-07-22 v1.1 - Body copy measure widened 62ch -> 110ch via `section p`.
                     The global 62ch cap wrapped section body copy into a narrow
                     left column, which inflated the printed-PDF page count.
                     !important is required to override per-tag inline max-width
                     (e.g. style="max-width:74ch") in the section partials.
                     Path corrected in this header (was benson). */

:root{
  --navy:#14315a; --navy-deep:#0f2542; --green:#2f6b4f; --green-soft:#e7efe9;
  --ink:#1f2730; --gray:#535c68; --line:#bcc6cf; --line-soft:#e2e8ed;
  --panel:#f4f6f7; --white:#ffffff; --sidebar-w:248px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--white);
  font-family:Georgia,"Times New Roman",serif; line-height:1.6; font-size:17px;
  /* 2026-07-31 (Michael, direct instruction): flex column + min-height:100vh so <main>
     below can stretch to fill the viewport on short pages, letting .site-foot's
     margin-top:auto (below) anchor it to the bottom of the screen instead of trailing
     off right after the content with dead space below it. Long pages are unaffected -
     main simply grows past 100vh and the footer sits after the content as normal. */
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,.eyebrow,.label,.brand p,.btn,nav a,th{
  font-family:Arial,Helvetica,sans-serif;
}

/* ---- top nav (Michael, WORK-ORDER-DESIGN-BRIEF.md: "the sidebar gets in the way") ---- */
/* 2026-07-31 (Michael, direct instruction): position:sticky so the nav stays visible while
   scrolling instead of disappearing once the reader scrolls past the hero. z-index:40 is
   deliberately BELOW .wb-overlay's z-index:50 (the lightbox), so an open lightbox still
   covers the nav like a proper full-screen modal rather than the nav floating on top of it. */
.topnav{ background:var(--navy-deep); color:#dfe6ee; position:sticky; top:0; z-index:40; }
.topnav-inner{
  max-width:calc(var(--wide) + 112px); margin:0 auto; padding:16px 32px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 28px;
}
.topnav-brand{
  font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:18px; color:#fff;
  text-decoration:none; letter-spacing:.01em;
}
.topnav-links{ display:flex; flex-wrap:wrap; gap:6px 24px; }
.topnav-links a{
  color:#cdd9e6; text-decoration:none; font-size:16px; letter-spacing:.02em; padding:4px 0;
}
.topnav-links a:hover{ color:#fff; }
.topnav-links a[aria-current="page"]{ color:#fff; font-weight:700; }
/* No-JS dropdown (2026-08-25, Michael): Investors -> Investor overview / Pursuit Capital.
   Reveals on hover and on keyboard focus (:focus-within); the parent link still navigates. */
.topnav-links .has-menu{ position:relative; display:inline-flex; align-items:center; padding-bottom:6px; margin-bottom:-6px; }
.topnav-links .has-menu > a::after{ content:"\25BE"; margin-left:5px; opacity:.7; }
.topnav-links .topnav-menu{ display:none; position:absolute; top:100%; left:0; background:var(--navy-deep);
  border:1px solid #25405f; box-shadow:0 6px 18px rgba(0,0,0,.28); min-width:210px; z-index:60; padding:4px 0; }
.topnav-links .has-menu:hover .topnav-menu,
.topnav-links .has-menu:focus-within .topnav-menu{ display:block; }
.topnav-links .topnav-menu a{ display:block; padding:10px 16px; color:#cdd9e6; font-size:16px; white-space:nowrap; padding-top:10px; }
.topnav-links .topnav-menu a:hover,
.topnav-links .topnav-menu a:focus{ color:#fff; background:#1c3352; }
.topnav-links .topnav-menu a[aria-current="page"]{ color:#fff; font-weight:700; }

/* ---- sidebar - RETIRED 2026-07-31 (WORK-ORDER-DESIGN-BRIEF.md); _sidebar.html is no longer
   included from base.html, so nothing in the DOM matches these selectors. Kept, not deleted, in
   case the partial is ever restored - see _sidebar.html's own change log. ---- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh;
  background:var(--navy-deep); color:#dfe6ee; padding:28px 22px; overflow-y:auto;
}
.sidebar .brand .eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:16px; color:#9fb2c8;
}
.sidebar .brand h1{ margin:6px 0 2px; font-size:30px; color:#fff; letter-spacing:.01em;}
.sidebar .brand p{ margin:0 0 22px; font-size:16px; color:#aebfd2; letter-spacing:.08em;}
.sidebar nav{ display:flex; flex-direction:column; border-top:1px solid #25405f; }
.sidebar nav a{
  color:#cdd9e6; text-decoration:none; font-size:16px; padding:9px 0;
  border-bottom:1px solid #1d3450; letter-spacing:.02em;
}
.sidebar nav a:hover{ color:#fff; }
.sidebar nav details{ border-bottom:1px solid #1d3450; }
.sidebar nav details summary{
  color:#9fb2c8; cursor:pointer; font-size:16px; text-transform:uppercase;
  letter-spacing:.11em; padding:13px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.sidebar nav details summary::-webkit-details-marker{ display:none; }
.sidebar nav details summary::after{ content:"+"; color:#6f88a8; font-size:16px; font-weight:400; }
.sidebar nav details[open] summary::after{ content:"\2212"; }
.sidebar nav details summary:hover{ color:#fff; }
.sidebar nav details .sidebar-sub{ padding-bottom:4px; }
.sidebar nav details .sidebar-sub a{
  display:block; padding:7px 0 7px 12px; font-size:16px; color:#aebfd2; border-bottom:none;
}
.sidebar nav details .sidebar-sub a:hover{ color:#fff; }

/* ---- page ---- */
/* 2026-08-03 (WO-2026-08-03-IPLAN-METHODOLOGY-DISPLAY): min-width:0 added. Without it,
   .page (a flex child of body{display:flex;flex-direction:column}) falls back to the
   default flex min-width:auto, which refuses to shrink below its content's intrinsic
   width. On pages with a wide table.t (the phone rules below already set table.t to
   overflow-x:auto specifically so a table scrolls in its own box instead of pushing
   the page wide - see "phone: 2026-07-21" comment) that intrinsic width wins anyway
   and the WHOLE PAGE overflows horizontally on mobile, not just the table. Confirmed
   live on /methodology at a 390px viewport before this fix: main.page rendered at
   775px wide, cutting off the right edge of every section, not only the table. Purely
   corrective - has no effect on any page that was already narrower than max-width. */
/* 2026-08-03 (WO-2026-08-03-IPLAN-METHODOLOGY-DISPLAY): corrected diagnosis, two attempts in.
   min-width:0 (below, and on .page's children) was the wrong fix and is left in place only
   because it's harmless, not because it did anything - confirmed live, main.page still
   rendered at 775px at a 390px viewport after both min-width:0 commits. The actual mechanism:
   .page has margin:0 auto for centering but no explicit width, so it sizes by fit-content.
   table.t's own mobile rule sets white-space:nowrap (so a wide table scrolls instead of
   wrapping) - but nowrap also makes the table's MIN-CONTENT width equal its full unwrapped
   width, a hard floor that fit-content respects regardless of any ancestor's min-width. The
   fix is width:100% below: with an explicit width, .page takes exactly 100% of its
   containing block instead of shrink-wrapping to content, which is what actually lets
   table.t's own overflow-x:auto clip/scroll the table instead of the page growing around it. */
.page{ width:100%; max-width:calc(var(--wide) + 112px); margin:0 auto; padding:0 0 100px; flex:1 0 auto; display:flex; flex-direction:column; min-width:0; }
/* .page is itself display:flex, so its direct children (the topic wrapper <div>s and bare
   <section>s from methodology.html's content block) are ALSO flex items subject to the same
   default min-width:auto. One min-width:0 on .page alone was not enough - confirmed live,
   still overflowed after that fix - because the wide-table content lived one level deeper,
   inside these children. This is the second and last boundary in the chain for this page. */
.page > *{ min-width:0; }
section{ padding:32px 56px; border-bottom:1px solid var(--line-soft); scroll-margin-top:10px;}
section.alt{ background:var(--panel); }
.label{
  text-transform:uppercase; letter-spacing:.13em; font-size:16px; color:var(--green);
  font-weight:bold; margin:0 0 8px;
}
h2{ color:var(--navy); font-size:26px; margin:0 0 12px; font-weight:700; letter-spacing:.01em;}
h3{ color:var(--navy); font-size:17px; margin:22px 0 8px; }
p{ margin:0 0 14px; max-width:62ch; }
/* section body copy runs to a 110ch measure - see CHANGE LOG v1.1 */
section p{ max-width:110ch !important; }
.lead{ font-size:19px; color:var(--ink); }
.callout{
  border-left:3px solid var(--green); background:var(--green-soft);
  padding:12px 18px; margin:18px 0; font-size:16px; max-width:62ch;
}
.muted{ color:var(--gray); font-size:16px; }

/* ---- hero ---- */
.hero{ padding:0; border-bottom:1px solid var(--line);}
.hero .hero-img{
  width:100%; height:340px; object-fit:cover; object-position:center;
  display:block; background:var(--panel);
}
.hero .hero-cap{ font-size:16px; color:var(--gray); padding:8px 56px 0; }
.hero .hero-body{ padding:38px 56px 40px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);
  gap:64px; align-items:start; max-width:1180px; }
.hero-main p, .hero-main .sub, .hero-main .callout{ max-width:none; }
.hero-side .snap{ border:1px solid var(--line); background:var(--panel); padding:18px 20px; }
.hero-side .snap .label{ margin:0 0 10px; }
.snap-t{ width:100%; border-collapse:collapse; font-size:16px; }
.snap-t td{ padding:6px 0; border-bottom:1px solid var(--line); }
.snap-t td:first-child{ color:var(--gray); }
.snap-t td:last-child{ text-align:right; font-weight:600; color:var(--navy); white-space:nowrap; }
.snap-total{ margin-top:16px; font-size:42px; font-weight:800; color:var(--green); line-height:1; letter-spacing:-.01em; }
.snap-bridge{ font-size:16px; font-weight:700; color:var(--navy); margin-top:7px; }
.snap-cap2{ font-size:16px; font-weight:600; color:var(--gray); margin-top:2px; }
.snap-fine{ font-size:16px; color:var(--gray); margin:9px 0 0; line-height:1.45; max-width:none; }
.snap-btn{ display:block; text-align:center; margin-top:14px; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:22px; max-width:none; } }

/* 2026-08-03 (WO-2026-08-03-IPLAN-DISPLAY-FIXES, Bite 2): reusable alternating text/image
   band for breaking up dense prose sections into a Z-scan read layer. Default (no modifier):
   text left, image right. .zband-imgleft: image visually left via order, text stays first in
   DOM so screen readers and mobile ("text before its image") keep natural reading order.
   Additive only - does not alter .hero-grid, .cards, or any existing rule. */
.zband{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; margin:8px 0; }
.zband p{ max-width:none; }
.zband .zband-img img{ width:100%; height:auto; display:block; border:1px solid var(--line); background:var(--panel); }
.zband .zband-cap{ font-size:16px; color:var(--gray); margin-top:8px; }
.zband.zband-imgleft .zband-img{ order:-1; }
@media (max-width:880px){
  .zband{ grid-template-columns:1fr; gap:20px; }
  .zband.zband-imgleft .zband-img{ order:2; }
}
.hero h2{ font-size:34px; line-height:1.2; margin-bottom:10px; }
.hero .sub{ font-size:18px; color:var(--gray); max-width:64ch; }
.btnrow{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-block; padding:10px 16px; font-size:16px; letter-spacing:.03em;
  text-decoration:none; border:1px solid var(--navy); color:var(--navy);
  background:var(--white);
}
.btn:hover{ background:var(--navy); color:#fff; }
.btn.solid{ background:var(--navy); color:#fff; }
.btn.solid:hover{ background:var(--navy-deep); }

/* ---- cards ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

/* 2026-08-03 (WO-2026-08-03-IPLAN-METHODOLOGY-DISPLAY): scoped fix for the nine-stage grid
   (#system-stages, /methodology) stranding its ninth card alone in a full-width row. Same
   root cause and same fix pattern as the seven-tile atrium fix (PHASE-4-WORK-ORDERS.md,
   Bite 3): for nine cards, auto-fit minmax(220px,1fr) lands on column counts of 2 or 4 across
   two width bands, and 9 mod 2 = 1 / 9 mod 4 = 1 strands the last card. Measured live (full-
   range headless sweep, only possible to do accurately after the width:100% fix above
   corrected this container's sizing): stranded at 485-735px (2 columns) and 1040-1275px (4
   columns). 3 columns (9 mod 3 = 0) is always safe and is what the browser already chooses
   naturally in between (738-1035px) - reused here for both bad bands rather than inventing a
   different column count. 1 column below 485px and 5/6 columns from 1278px on (both already
   safe) are untouched, left on the shared .cards rule above. Scoped to #system-stages only -
   the shared .cards{} rule six other surfaces depend on is not touched. */
@media (min-width:485px) and (max-width:737px){
  #system-stages{ grid-template-columns:1fr; }
}
@media (min-width:1040px) and (max-width:1277px){
  #system-stages{ grid-template-columns:repeat(3,1fr); }
}

/* 2026-08-03 (PHASE-4-WORK-ORDERS.md, Bite 3): scoped fix for the atrium's seven-tile
   grid stranding the seventh tile alone in its own full-width row. The shared .cards
   rule above (auto-fit, minmax(220px,1fr)) is used by six other surfaces sitewide
   (/about, /tools, /who, /projects, the gated vision section) and is left untouched.
   Measured live across the full responsive range (headless render sweep, all viewport
   widths): for exactly seven tiles, auto-fit lands on 2, 3, or 6 columns across two
   width bands, and each of those leaves the seventh tile stranded alone. Verified
   boundaries: stranded at window widths <=1039px (2-col then 3-col) and again from
   1512px onward, where the container hits the site's 1400px content cap (--wide) and
   auto-fit settles on 6 columns. 1040-1511px is unaffected (4 then 5 columns, both
   safe) and is left on the default auto-fit rule above. */
@media (max-width:1039px){
  #participate-tiles .cards{ grid-template-columns:1fr; }
}
@media (min-width:1512px){
  #participate-tiles .cards{ grid-template-columns:repeat(5,1fr); }
}
.card{ border:1px solid var(--line); background:var(--white); padding:18px 18px 20px; }

/* 2026-08-10 (Michael): scoped fix for the /projects Multifamily row. The shared .cards
   rule above (auto-fit, minmax(220px,1fr)) fills 1fr, so the two-card multifamily row sized
   its cards to half the container width - both wider and (via .stage-img width:100%/height:
   auto) taller than the three-across logistics cards above. To match them exactly, give the
   multifamily row the SAME column geometry the logistics row resolves to at each width band
   (3 tracks at full width, 2 then 1 as it narrows) and let the two cards fill the first
   cells, leaving the trailing track(s) empty - so a multifamily card is the same width as a
   logistics card at every viewport. Scoped to #projects-multifamily-index only; the shared
   .cards{} rule elsewhere is untouched. Band boundaries mirror auto-fit minmax(220px,1fr):
   3 columns need >=692px of track (3*220 + 2*16), 2 columns >=456px. */
#projects-multifamily-index .cards{ grid-template-columns:repeat(2,minmax(220px,1fr)); justify-content:start; }
@media (min-width:724px){
  #projects-multifamily-index .cards{ grid-template-columns:repeat(3,minmax(220px,1fr)); }
}
@media (max-width:487px){
  #projects-multifamily-index .cards{ grid-template-columns:1fr; }
}
.card .k{ text-transform:uppercase; letter-spacing:.1em; font-size:16px; color:var(--green); font-weight:bold;}
.card h3{ margin:6px 0 8px; font-size:16px; }
.card p{ font-size:16px; margin:0; color:var(--gray); }

/* ---- tables ---- */
table.t{ border-collapse:collapse; width:100%; max-width:760px; margin:8px 0 14px; font-size:16px;}
table.t th,table.t td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
table.t th{ background:var(--navy); color:#fff; font-size:16px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
table.t th + th{ border-left:1px solid rgba(255,255,255,.45); }
table.t tr:nth-child(even) td{ background:#fafcfd; }

/* ---- figures ---- */
figure{ margin:18px 0; }
figure img{ width:100%; max-width:860px; border:1px solid var(--line); display:block; background:var(--panel); }
figcaption{ font-size:16px; color:var(--gray); margin-top:6px; }
.imggrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:880px;}
.imggrid img{ width:100%; border:1px solid var(--line); background:var(--panel);}

/* ---- evidence ---- */
.docrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.contact-block{ font-size:16px; line-height:1.8; }
.site-foot{ position:fixed; left:0; right:0; bottom:0; width:100%; z-index:500; background:var(--white); border-top:1px solid var(--line); padding:12px 24px; color:var(--gray); font-size:16px; letter-spacing:.02em; text-align:center;}
.site-foot-contact{ margin:0 0 6px; font-size:16px; color:var(--navy); }
.site-foot-contact a{ color:var(--navy); text-decoration:none; }
.site-foot-contact a:hover{ text-decoration:underline; }

/* ---- mobile ---- */
@media (max-width:880px){
  /* 2026-08-03: bumped from 60px - the fixed .site-foot wraps to two lines at narrow
     widths (measured 72.6px tall at 390px, vs ~44px on one line at desktop widths) and the
     old 60px reservation here was undoing the base .page rule's 68px and still falling
     short, letting the footer cover real content (confirmed live: register-form inputs and
     labels were covered on mobile before this fix). 100px is a safe margin above the
     measured 72.6px. */
  .page{ padding:0 0 100px; }
  section,.hero .hero-body,.site-foot{ padding-left:22px; padding-right:22px; }
  .hero h2{ font-size:27px; }
}

/* ---- workbook viewer modal (2026-06-28) ---- */
.wb-overlay{ display:none; position:fixed; inset:0; z-index:50;
  background:rgba(12,28,48,.55); }
.wb-overlay.open{ display:flex; align-items:center; justify-content:center; }
.wb-modal{ width:96vw; max-width:1320px; height:93vh; background:var(--white);
  border-radius:6px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4); }
.wb-bar{ display:flex; align-items:center; gap:14px; padding:10px 14px;
  background:var(--navy); color:#fff; flex:0 0 auto; }
.wb-heading{ font-weight:700; font-size:16px; white-space:nowrap; }
.wb-tabs{ display:flex; gap:4px; flex:1 1 auto; flex-wrap:wrap; }
.wb-tab{ background:rgba(255,255,255,.12); color:#dce6f2; border:none;
  padding:6px 11px; border-radius:4px; font-size:16px; cursor:pointer; }
.wb-tab:hover{ background:rgba(255,255,255,.22); color:#fff; }
.wb-tab.active{ background:#fff; color:var(--navy); font-weight:600; }
.wb-dl{ color:#fff; text-decoration:underline; font-size:16px; white-space:nowrap; }
.wb-close{ background:none; border:none; color:#fff; font-size:24px; line-height:1;
  cursor:pointer; padding:0 4px; }
.wb-body{ flex:1 1 auto; overflow:auto; padding:16px 18px; background:#fbfdfe; }
.wb-empty{ color:var(--gray); padding:24px; }
.wb-panel{ display:none; }
.wb-panel.active{ display:block; }
.wb-table{ border-collapse:collapse; width:100%; font-size:16px; }
.wb-table th,.wb-table td{ border:1px solid var(--line); padding:6px 9px;
  text-align:left; vertical-align:top; white-space:nowrap; }
.wb-table th{ background:var(--navy); color:#fff; position:sticky; top:0; }
.wb-table td.wb-title{ background:var(--panel); color:var(--navy);
  font-weight:700; white-space:normal; }
.wb-table tr:nth-child(even) td:not(.wb-title){ background:#f4f8fb; }
@media(max-width:860px){
  .wb-modal{ width:100vw; height:100vh; border-radius:0; }
  .wb-heading{ display:none; }
}

/* ---- patent-pending badge + opportunity metrics (2026-06-28) ---- */
.pp{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:10px;
  background:var(--brass,#b8862e); color:#fff; font-size:16px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; vertical-align:middle; }
.opp{ border:1px solid var(--line); background:var(--panel); padding:18px 20px;
  margin:18px 0; }
.opp .label{ margin-top:0; }
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin:6px 0 12px; }
.metric{ background:var(--white); border:1px solid var(--line); padding:12px 14px; }
.metric .n{ font-size:26px; font-weight:700; color:var(--navy); line-height:1; }
/* 2026-08-03: display:block added. .l is a <span>, and margin-top only creates visible
   separation on an inline element if the text happens to wrap onto its own line by accident
   - which /opportunity's one long label ("1 in 11 trucks needs...") always did, masking the
   bug. /credentials' short labels ("SF Developed (Principal)") don't wrap, so they sat glued
   to the number on one line, tiny and unreadable (Michael, screenshot). display:block fixes
   it for every .metric on the site, not just the new page - this was always latent. */
.metric .l{ display:block; font-size:16px; color:var(--gray); margin-top:5px; }
.opp p{ margin:0; font-size:16px; }
@media(max-width:860px){ .hero .hero-cap{ padding-left:22px; padding-right:22px; } }

/* shorter hero on mobile (2026-06-28) */
@media(max-width:860px){ .hero .hero-img{ height:210px; } }

/* ---- profit number cards (2026-06-28) ---- */
.pcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin:6px 0 14px; }
.pcard{ border:1px solid var(--line); background:var(--white); padding:18px 18px 16px;
  border-top:3px solid var(--navy); }
.pcard.win{ border-top-color:var(--green); background:var(--panel); }
.pcard .pn{ font-size:32px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.01em; }
.pcard.win .pn{ color:var(--green); }
.pcard .pn .yr{ font-size:16px; font-weight:600; color:var(--gray); }
.pcard .pl{ font-size:16px; font-weight:600; color:var(--ink); margin-top:8px; }
.pcard .pnote{ font-size:16px; color:var(--gray); margin-top:3px; }
.pframe{ font-size:16px; color:var(--ink); margin:0 0 14px; }
@media(max-width:860px){ .pcard .pn{ font-size:27px; } }

/* ---- two-case profit: case headers + combined total bar (2026-06-28) ---- */
.case-h{ font-size:16px; font-weight:700; color:var(--navy); letter-spacing:.02em;
  margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.total-bar{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  background:var(--navy); color:#fff; padding:16px 20px; margin:16px 0 12px;
  border-left:5px solid var(--green); }
.total-bar .tb-n{ font-size:34px; font-weight:800; color:#fff; line-height:1; }
.total-bar .tb-l{ font-size:16px; font-weight:600; color:#dce6f2; }
.total-bar .tb-l span{ display:block; font-weight:400; color:#aebfd6; font-size:16px; margin-top:3px; }
@media(max-width:860px){ .total-bar .tb-n{ font-size:28px; } }

/* snapshot: separate facts from economics (2026-06-28) */
.snap-t tr.sep td{ border-top:2px solid var(--line); padding-top:9px; }

/* snapshot: two-sale profit block (2026-06-28) */
.snap-sub{ font-size:16px; font-weight:700; color:var(--navy); letter-spacing:.03em;
  text-transform:uppercase; margin:16px 0 6px; }
.snap-t td{ padding:7px 0; }
@media(max-width:860px){ .snap-total{ font-size:34px; } }

/* representative-example banner (2026-06-28) */
.exbanner{background:#eef2f7;border-left:4px solid #1f3a5f;color:#1f3a5f;
  font-size:.86rem;font-weight:600;padding:.6rem .9rem;margin:0 0 1.1rem;border-radius:3px;line-height:1.4;}

/* lightbox affordance (2026-06-28) */
figure{ position:relative; }
figure img, img.zoomable{ cursor:zoom-in; }
figure::after{ content:"\2922  click to enlarge"; position:absolute; top:8px; right:8px;
  background:rgba(31,58,95,.88); color:#fff; font-size:16px; font-weight:600;
  padding:3px 8px; border-radius:3px; pointer-events:none; opacity:.92; }

/* rate-comp screenshot strip (2026-06-28) */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:720px; margin:10px 0 6px; }
.shots figure{ margin:0; }
.shots figure::after{ content:none; }
.shots figure img{ width:100%; height:auto; }
.shots figcaption{ font-size:16px; text-align:center; }
@media (max-width:680px){ .shots{ grid-template-columns:1fr 1fr; max-width:none; } }
/* real product screens inside quickstart accordions (2026-07-19) */
details.acc .shots-lede{ margin:14px 0 2px; font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--green); font-weight:700; }
details.acc .shots{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); max-width:760px; gap:16px; }
details.acc .shots figure img{ border:1px solid var(--line); border-radius:4px; background:var(--white); }
details.acc .shots figcaption{ margin-top:5px; color:var(--gray); line-height:1.35; }

/* ---- accordion (details/summary) — folds long blocks onto one page ---- */
details.acc{ border:1px solid var(--line); border-radius:6px; margin:10px 0; background:var(--white); overflow:hidden; }
details.acc > summary{ cursor:pointer; list-style:none; padding:13px 18px; background:var(--navy); color:#fff;
  font-weight:700; font-size:17px; letter-spacing:.01em; display:flex; align-items:center; justify-content:space-between; gap:14px; }
details.acc > summary::-webkit-details-marker{ display:none; }
details.acc > summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:#dce6f2; }
details.acc[open] > summary::after{ content:"\2212"; }
details.acc > summary:hover{ background:var(--navy-deep); }
details.acc .acc-body{ padding:4px 18px 14px; }
details.acc .acc-body > :first-child{ margin-top:12px; }

/* value chain (assets section) */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding:18px 20px;background:#f4f7fb;border:1px solid #dfe7f0;border-radius:10px;}
.chain span{font-size:16px;font-weight:600;color:#17324f;}
.chain .arrow{color:#8aa3bf;font-weight:700;font-size:18px;line-height:1;}
figure svg{max-width:100%;height:auto;display:block;margin:0 auto;}

/* metrics panel */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0;}
.stats .stat{background:#f4f7fb;border:1px solid #dfe7f0;border-radius:10px;padding:16px 14px;text-align:center;}
.stats .stat b{display:block;font-size:24px;color:#17324f;line-height:1.15;margin-bottom:5px;}
.stats .stat span{font-size:16px;color:#5b7a99;line-height:1.35;display:block;}

/* pull quote */
.pullquote{margin:26px 0;padding:20px 26px;border-left:4px solid #17324f;background:#f4f7fb;border-radius:0 10px 10px 0;}
.pullquote .q{font-size:clamp(19px,2.4vw,25px);font-weight:700;color:#17324f;line-height:1.3;margin:0 0 8px;}
.pullquote .e{font-size:16px;color:#40597a;line-height:1.5;margin:0;}

/* ── Pipeline walkthrough (_pipeline.html) ─────────────────────────────
   cityplan pattern: full-width illustration, big, with a stage name and one
   caption line beneath. Image is the moment; the caption is the only comment. */
.pipeline .pipeline-lede{ font-size:16px; color:var(--gray); max-width:640px; margin:0 0 16px; }
.pipeline .stage{ margin:0 0 32px; max-width:900px; }
.pipeline .stage:last-child{ margin-bottom:0; }
.pipeline .stage-img{
  width:100%; display:block; border:1px solid var(--line); border-radius:5px;
  background:var(--panel); margin-top:16px;
}
.pipeline .stage-num{
  font-weight:700; letter-spacing:.16em; font-size:16px; color:var(--green);
  margin:10px 0 2px;
}
.pipeline .stage-name{ margin:0 0 4px; font-size:23px; color:var(--navy); font-weight:700; }
.pipeline .stage-cap{ margin:0; font-size:16px; color:var(--ink); max-width:640px; }

/* ---- one shared content width so the primary image, the accordion, and the table
        all line up and read large (2026-07-19h). Bump --wide to resize everything. ---- */
:root{ --wide:1400px; }
.stage-img{ width:100%; max-width:var(--wide); height:auto; display:block;
  border:1px solid var(--line); border-radius:5px; background:var(--panel); margin:0; }
details.acc{ max-width:var(--wide); }
/* accordion body text follows the expander width, not the narrow 62ch cap (2026-07-19i) */
details.acc .acc-body p{ max-width:none; }
/* in-depth topic pages: prose + callouts follow the content width like the tables,
   not the narrow 62ch cram (2026-07-19j) */
.topic p, .topic .callout{ max-width:var(--wide); }

/* ---- hero cover: left-aligned white title block over a dark scrim on the map (2026-07-19k) ---- */
.cover{ position:relative; max-width:var(--wide); border:1px solid var(--line);
  border-radius:5px; overflow:hidden; background:var(--navy); }
.cover-img{ display:block; width:100%; height:auto; }
.cover-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,17,34,.82) 0%, rgba(8,17,34,.58) 34%, rgba(8,17,34,.12) 66%, rgba(8,17,34,0) 100%); }
.cover-text{ position:absolute; top:50%; left:6%; transform:translateY(-50%); max-width:58%; }
.cover-kicker{ margin:0 0 10px; color:#cfe0f2; font-size:16px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.55); max-width:none; }
.cover-title{ margin:0 0 14px; color:#fff; font-size:42px; line-height:1.08; font-weight:800;
  letter-spacing:.004em; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.cover-sub{ margin:0; color:#eaf1fa; font-size:19px; line-height:1.45; max-width:30ch;
  text-shadow:0 1px 8px rgba(0,0,0,.55); }
.cover-foot{ position:absolute; left:6%; bottom:5%; margin:0; color:#c3d2e6; font-size:16px;
  letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.65); max-width:none; }
.cover-specs{ display:flex; gap:34px; margin:20px 0 0; padding:0; list-style:none; max-width:none; }
.cover-specs li{ margin:0; }
.cover-specs .fig{ display:block; color:#fff; font-size:30px; font-weight:800; line-height:1;
  letter-spacing:.005em; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.cover-specs .fig-label{ display:block; margin-top:5px; color:#dbe6f4; font-size:16px;
  letter-spacing:.03em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
@media(max-width:860px){
  .cover-text{ max-width:82%; left:6%; }
  .cover-title{ font-size:26px; }
  .cover-sub{ font-size:16px; }
  .cover-specs{ gap:20px; }
  .cover-specs .fig{ font-size:21px; }
}
table.t{ width:100%; max-width:var(--wide); }
.pipeline .stage{ max-width:var(--wide); }

/* ---- print: JS opens every accordion on beforeprint; here we just clean the layout ---- */
/* print rules moved to the end of this file - see 'print: 2026-07-22' */

/* ---- phone: 2026-07-21 ----------------------------------------------------
   Investor material is read on phones. Wide tables and the fixed-size SVG
   figures were the two things that broke the layout, so: tables scroll
   horizontally inside their own box instead of pushing the page wide, figures
   scale to the viewport, and the collapsed sidebar nav gets tighter so a long
   in-page list does not fill the first screen. Plain hyphens only. */
figure{ max-width:100% !important; margin-left:0; margin-right:0; }
figure svg{ max-width:100%; height:auto; display:block; margin:0 auto; }
img{ max-width:100%; height:auto; }

@media (max-width:880px){
  /* tables: scroll in place rather than widening the page */
  table.t{
    display:block; width:100%; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap; font-size:16px;
    border:1px solid var(--line); border-radius:6px;
  }
  table.t th,table.t td{ padding:7px 10px; }
  table.t th{ font-size:16px; }

  /* top nav: links wrap to additional lines on narrow screens - no hamburger, no JS
     (2026-07-31, WORK-ORDER-DESIGN-BRIEF.md) */
  .topnav-inner{ padding:14px 22px; gap:8px 16px; }
  .topnav-links{ gap:6px 16px; }
  .topnav-links a{ font-size:16px; }

  /* accordions: bigger tap target, no overflow */
  details.acc summary{ padding:12px 14px; font-size:16px; line-height:1.35; }
  details.acc .acc-body{ padding:4px 14px 12px; }
  details.acc .acc-body p{ font-size:16px; }

  section h2{ font-size:23px; line-height:1.25; }
  .stage-cap{ font-size:16px; }
  .btnrow{ display:flex; flex-wrap:wrap; gap:8px; }
  .btnrow .btn{ flex:1 1 auto; text-align:center; }
}

@media (max-width:520px){
  section,.hero .hero-body,.site-foot{ padding-left:16px; padding-right:16px; }
  section h2{ font-size:21px; }
  table.t{ font-size:16px; }
  .topnav-links a{ font-size:16px; }
}


/* ---- print: 2026-07-22 -----------------------------------------------------
   Ctrl-P must produce the WHOLE page with every accordion expanded, because that
   export is what gets handed to a reader for context.

   Three things were breaking it, and all three are why the exports truncated
   part-way down and lost the right-hand side of wide tables:

   1. CASCADE ORDER. This block used to sit above the phone block. A printed
      Letter page is about 816px wide, which is under the 880px phone
      breakpoint, so BOTH blocks match when printing and the later one won. The
      phone rules were silently overriding the print rules. This block now sits
      last so it wins on its own merits.
   2. TABLES. The phone rules set table.t to display:block with
      overflow-x:auto and white-space:nowrap. On screen that scrolls. On paper
      there is nothing to scroll, so anything past the page edge was simply
      clipped off. Tables are restored to real tables that wrap.
   3. BREAK-INSIDE. break-inside:avoid sat on details.acc itself. Several
      accordions are taller than a printed page, and rather than break them
      Chrome drops them, which is what cut the export short. Accordions may now
      break across pages; only the small things are protected.

   The beforeprint script in base.html opens every accordion; the display rules
   below are a fallback so the content still prints if that script does not run.
--------------------------------------------------------------------------- */
@media print{
  .topnav{ display:none !important; }
  .page{ margin:0 !important; max-width:none !important; padding:0 !important; }
  .site-foot{ position:static !important; border-top:1px solid var(--line) !important; }
  body{ font-size:10.5pt; }

  /* every accordion open and visible, script or no script */
  details.acc{ break-inside:auto !important; border-color:var(--line) !important; }
  details.acc > summary{ break-after:avoid; break-inside:avoid; list-style:none; }
  details.acc .acc-body{ display:block !important; padding:4px 14px 12px !important; }
  details:not([open]) > *{ display:revert !important; }

  /* real tables again - the phone rules clip on paper */
  table.t{
    display:table !important; width:100% !important; max-width:100% !important;
    overflow:visible !important; white-space:normal !important;
    font-size:9pt !important; break-inside:auto !important;
  }
  table.t tr{ break-inside:avoid; }
  table.t th{ font-size:8.5pt !important; }
  table.t th, table.t td{ padding:4px 6px !important; word-break:normal; }

  figure, .stage-img, figure img{ break-inside:avoid; max-width:100% !important; height:auto !important; }
  section{ break-inside:auto; padding-left:0 !important; padding-right:0 !important; }
  section h2{ break-after:avoid; }

  /* 2026-08-07 (Michael, direct instruction - "make /about print friendly"): hero cover
     scrim is a CSS gradient background, which browsers omit by default on print - white
     .cover-title/.cover-sub text was landing straight on the photo, unreadable. Forcing
     it to print regardless of the user's "background graphics" checkbox, and keeping the
     cover intact as one block instead of splitting across a page break. Card-style
     components (team cards, patent tombstones, metric tiles) also get break-inside:avoid
     so a page break can't land in the middle of one. Scoped to print only - no effect on
     screen. */
  .cover, .cover-scrim{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .cover{ break-inside:avoid; }
  .card, .patent-item, .metric{ break-inside:avoid; }
  /* keep a market/section label with the content that follows it (prevents a market
     heading stranded alone at the bottom of a printed page - ChatGPT review, page 2) */
  #projects p.label{ break-after:avoid; break-inside:avoid; }
  a[href]::after{ content:"" !important; }
  .btnrow, .lightbox, .zoom-hint{ display:none !important; }
}

/* CHANGE LOG addition 2026-07-31 (WORK-ORDER-PARTICIPATION-REBUILD.md): minimal
   form styling for /participate/register - reuses existing color/type variables,
   no new file, no new framework.
   2026-07-31 (Michael, direct instruction): reg-form constrained to max-width:640px.
   Previously unconstrained, the auto-fit grid below stretched to fill the full page
   width, producing two very wide fields per row instead of a traditional, human-scaled
   form (reference: winnie.nsgia.com/contact-us). At 640px minus the 14px gap, the
   existing auto-fit/minmax(240px,1fr) grid naturally settles into exactly two columns
   per row - no grid-template-columns change needed. Applies to every page sharing
   .reg-form/.reg-grid: /participate/register and /contact. */
.reg-form{ max-width:640px; }
.reg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:12px 0; }
.reg-grid label{ display:flex; flex-direction:column; font-size:16px; color:var(--gray); gap:4px; }
.reg-grid label.wide{ grid-column:1/-1; }
.reg-form input[type=text],.reg-form input[type=email],.reg-form input[type=tel],
.reg-form select,.reg-form textarea{
  font-family:Arial,Helvetica,sans-serif; font-size:16px; padding:8px 10px;
  border:1px solid var(--line); border-radius:3px; color:var(--ink); background:var(--white);
}
.reg-form textarea{ resize:vertical; }
.reg-form button.btn{ border:none; cursor:pointer; font-size:inherit; }

/* 2026-08-03 (WO-CREDENTIALS-PORT): patent tombstone grid for /credentials. No equivalent
   component existed in iplan - ported from nsgia3's _patent_wall.html montage, adapted to
   iplan's color tokens (var(--navy)/var(--line)/var(--gray)) instead of hardcoded hex.
   Scoped under .patent-* only - does not touch .cards, .card, or any existing rule. */
.patent-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:14px; }
.patent-item{ border:1px solid var(--line); background:var(--white); display:flex; flex-direction:column; }
.patent-item img{ width:100%; height:150px; object-fit:contain; background:#f9fbfc; padding:10px; border-bottom:1px solid var(--line); }
.patent-cap{ padding:9px 11px; }
.patent-cap a{ display:block; font-weight:700; font-size:16px; color:var(--navy); text-decoration:none; }
.patent-cap a:hover{ text-decoration:underline; }
.patent-cap span{ display:block; font-size:16px; color:var(--gray); margin-top:3px; }

/* 2026-08-04 (Bite 8, rebuild-2026-08-04, 08-HERO-IMAGES.md): standard visually-hidden utility.
   The new hero images carry their own baked-in headline text on a light background, so the old
   dark-scrim + white-overlay-title treatment is removed page-wide (it duplicated the image's own
   title and made light-background art unreadable under a dark wash). Removing the overlay <h1>
   means each page needs its true <h1> restored some other way for accessibility/SEO structure -
   this class hides it visually while keeping it in the accessibility tree; the page's REAL visible
   heading uses the site's existing .label + h2 pattern already used in every other section, so no
   new visual language is introduced anywhere. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }