/*
 * prototypeV3's page-local CSS, lifted into one file.
 *
 * GENERATED — do not edit. `wp-native/sync.sh` rewrites it from prototypeV3's `<style>` blocks,
 * and it is gitignored, exactly like advanced.css. prototypeV3 stays the single source.
 *
 * Every declaration below is prototypeV3's own, unchanged. Nothing here was authored: the rules
 * were written for one page each, and each of those pages carries prototypeV3's own note
 * `TODO(css): fold into advanced.css on the style pass`. This is that fold, done without
 * touching prototypeV3.
 *
 * Loaded after advanced.css and before style.css, so it can specialise the design system and
 * still be overridden by the theme.
 *
 * Selectors that could reach a page they were not written for are **left out**, not lifted —
 * see the report in wp-native/tools/extract-page-css.py. 0 rules were dropped
 * for that reason.
 *
 * 211 rules from 6 pages.
 */

/* ---- from prototypeV3/about.html ---- */
/* ------------------------------------------------------------------
   About page — section-local styles.
   Prefixed abp- (about page; ab2- is already taken by the homepage
   About block in index.html) so nothing here can collide with a
   global rule. Two traps this prefix is deliberately avoiding:
     - .fact (advanced.css:752) styles ANY unprefixed class="fact"
       as a rounded trust pill with a ✓
     - .btn-ghost.dark renders as a filled gradient, because .dark is
       a section class (advanced.css:40) that outranks it
   TODO(css): fold into advanced.css and drop the abp- prefix on the
   style pass.
   ------------------------------------------------------------------ */

/* ---- hero actions: primary CTA + a plain secondary link ---- */
.abp-cta {display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:26px}
/* not .btn-ghost.dark (see above) — a plain link is also less shouty
   next to the yellow CTA than a second button would be */
.abp-cta .abp-alt {color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.abp-cta .abp-alt:hover {border-bottom-color:var(--cyan);color:var(--cyan)}
/* ---- two-column prose + aside ---- */
.abp-split {display:grid;grid-template-columns:1.3fr .85fr;gap:44px;align-items:start}
.abp-prose p+p {margin-top:15px}
.abp-prose .lead {max-width:none}
/* Pull-out beside the origin story: the name explanation is the one
   fact on this page a reader is most likely to want to repeat. */
.abp-pull {background:var(--cloud);border:1px solid var(--pale);border-left:4px solid var(--cyan);
  border-radius:var(--r);padding:22px 24px}
.abp-pull b {display:block;font-size:13px;font-weight:800;color:var(--deep);margin-bottom:7px}
.abp-pull p {font-size:14.5px;color:var(--navy)}
.abp-pull .abp-name {font-weight:800;color:var(--deep)}
/* ---- portfolio links under "What Midel does" ---- */
.abp-links {display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.abp-links a {color:var(--cobalt);font-weight:700;font-size:14.5px;text-decoration:none}
.abp-links a:hover {color:var(--cyanmid)}
/* ---- proof band: where the optics already run ----
   The one thing this page could not previously do: show that somebody
   buys and runs these optics. Logo + process + one measured outcome +
   a link to the full use case, so every mark is checkable rather than
   decorative. */
.abp-proof {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.abp-proof-card {display:flex;flex-direction:column;background:#fff;border:1px solid var(--pale);
  border-radius:var(--r);padding:22px 24px}
/* fixed-height logo slot so three logos of different proportions sit on
   one baseline instead of pushing the text below them out of line */
.abp-proof-lg {display:flex;align-items:center;height:46px;margin-bottom:16px}
.abp-proof-lg img {max-height:42px;max-width:150px;width:auto;object-fit:contain}
.abp-proof-k {display:block;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cyanmid);margin-bottom:8px}
.abp-proof-card p {font-size:14.5px;color:var(--navy);flex:1}
.abp-proof-card p b {color:var(--deep)}
.abp-proof-card a {margin-top:14px;color:var(--cobalt);font-weight:700;font-size:14px;
  text-decoration:none}
.abp-proof-card a:hover {color:var(--cyanmid)}
/* the world map on this page uses the shared .reach / .gm-* styles from
   advanced.css unchanged — no local rules needed, and none should be added:
   those styles assume a deep-navy ground (.gm-label sits on rgba(13,27,46,.55),
   .gm-leg b is #fff), so the section cannot be lightened here.
   .globe already caps itself at 820px and centres. */

/* ---- innovation credentials ----
   Replaces the nine-entry milestone timeline that stood here. Cards, not a
   rail: a rail implies chronology, and chronology is exactly what made this
   material read as a startup CV instead of as evidence. Four columns so the
   whole set is one glance rather than a scroll — with the text trimmed to
   fit that width, which is itself the discipline the section needed. */
.abp-cred {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px}
/* the cyan top rule is the only decoration: it marks these four as one set
   without the section needing a second heading to say so */
.abp-cred-card {background:#fff;border:1px solid var(--pale);border-top:3px solid var(--cyan);
  border-radius:var(--r);padding:22px 22px}
.abp-cred-card b {display:block;font-size:15.5px;font-weight:800;color:var(--deep);
  line-height:1.3;margin-bottom:9px}
.abp-cred-card p {font-size:14px;color:var(--navy)}
/* ---- team ---- */
.abp-team {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:6px}
.abp-person {background:#fff;border:1px solid var(--pale);border-radius:var(--r);padding:22px;
  text-align:center}
/* sources are pre-cropped square headshots in _originals/team — just center.
   Same treatment as .cred .team .face so faces match across the site. */
.abp-person img {width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 50%;
  background:var(--pale);border:2px solid #fff;box-shadow:0 2px 10px rgba(13,27,46,.14);
  margin:0 auto 14px;display:block}
.abp-person b {display:block;font-size:15.5px;font-weight:800;color:var(--deep)}
.abp-person span {display:block;font-size:13.5px;color:var(--navy);margin-top:4px}
/* ---- ecosystem logo row ----
   Was a five-card grid, one card per relationship type, each with its own
   heading. The credential cards above now carry those words, so the marks
   only have to be legible — repeating EXIST, HTGF and the Award under
   separate headings said the same thing twice at three times the height.
   Full colour, not the greyscale-at-rest treatment the homepage .logos
   strip uses: these marks are the credibility of the section, and faded-out
   logos read as weaker than no logos at all. */
.abp-eco-k {display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyanmid);margin:30px 0 14px}
.abp-eco-logos {display:flex;align-items:center;gap:20px 34px;flex-wrap:wrap;min-height:52px}
.abp-eco-logos img {max-height:48px;max-width:136px;width:auto;object-fit:contain}
/* Funding acknowledgement, kept on its own row on purpose: the BMWK block
   is a fixed, text-bearing mark that must not be cropped and needs real
   size to stay legible, so it cannot share the row above without dwarfing
   every other logo. Standing apart is also the conventional placement for
   a public-funding notice. */
.abp-fund {display:flex;align-items:center;gap:20px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--pale)}
.abp-fund img {height:104px;width:auto;flex:none}
.abp-fund p {font-size:13.5px;color:var(--muted);max-width:56ch}
@media(max-width:1000px) {
  .abp-cred{grid-template-columns:1fr 1fr}
}
@media(max-width:900px) {
  .abp-split{grid-template-columns:1fr;gap:26px}
  .abp-team{grid-template-columns:1fr 1fr}
  .abp-proof{grid-template-columns:1fr}
}
@media(max-width:560px) {
  .abp-cred{grid-template-columns:1fr}
  .abp-fund{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px) {
  .abp-team{grid-template-columns:1fr}
}

/* ---- from prototypeV3/index.html ---- */
/* TODO(css): fold into advanced.css and drop the pf2- prefix on the style pass */
  .pf2-grid {display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:stretch}
.pf2-side {display:flex;flex-direction:column;gap:20px}
/* size to content, then share the leftover height — never clip a product row */
  .pf2-side .pf-card {flex:0 0 auto}
.pf2-side .pf-card:first-child {flex:1 0 auto}
/* ---- stage: chips + big portrait plot + spec panel ----
     The chips are a segmented control, not tabs: they swap one exhibit inside
     the card. Grouping them in a rail makes "exactly one of these is active"
     legible at a glance; aria-pressed carries the same fact to assistive tech. */
  .pf2-chips {display:inline-flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px;padding:4px;
    background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.38);border-radius:999px}
.pf2-chip {appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:800;
    color:var(--deep);background:transparent;border:1px solid transparent;
    border-radius:999px;padding:10px 15px;min-height:42px;
    transition:background .18s,border-color .18s,color .18s}
.pf2-chip:hover {background:rgba(255,255,255,.55)}
.pf2-chip[aria-pressed="true"] {background:var(--deep);border-color:var(--deep);color:#fff}
/* focus must be visible on the blue field — same pattern as .btn, in white */
  .pf2-chip:focus-visible,.pf2-row:focus-visible {outline:2px solid #fff;outline-offset:2px;border-radius:999px}
.pf2-row:focus-visible {border-radius:10px}
.pf2-stage {flex:1;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:stretch;min-height:0}
/* the plot keeps its portrait aspect — the beam axis IS the vertical axis,
     so it gets a tall exhibit tile of its own instead of being cropped. */
  .pf2-plot {margin:0;display:flex;align-items:center;justify-content:center;
    background:rgba(10,20,40,.30);border:1px solid rgba(255,255,255,.35);
    border-radius:12px;padding:12px;min-height:0}
.pf2-plot img {display:block;height:100%;max-height:330px;width:auto;object-fit:contain;
    filter:drop-shadow(0 6px 18px rgba(6,16,32,.30));
    transition:opacity .18s ease}
.pf2-plot img.is-swapping {opacity:0}
.pf2-info {display:flex;flex-direction:column;gap:8px;min-width:0}
.pf2-info h4 {margin:0;font-size:19px;font-weight:800;color:var(--deep);letter-spacing:-.01em}
.pf2-info p {margin:0}
.pf2-specs {list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pf2-specs li {position:relative;padding-left:16px;font-size:13.5px;font-weight:600;color:var(--navy)}
.pf2-specs li::before {content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
    border-radius:50%;background:var(--cyanmid)}
.pf2-info .card-cta {margin-top:auto;align-self:flex-start;padding:11px 18px;font-size:14px}
/* ---- side cards: one clickable row per product ---- */
  .pf2-rows {display:flex;flex-direction:column;gap:2px;margin-top:2px}
.pf2-row {display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;
    text-decoration:none;border-top:1px solid rgba(255,255,255,.42);transition:background .16s}
.pf2-row:first-child {border-top:none}
.pf2-row:hover {background:rgba(255,255,255,.42)}
.pf2-thumb {flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.55);border-radius:9px;overflow:hidden}
.pf2-thumb img {width:100%;height:100%;object-fit:contain}
.pf2-row span.nm {display:block;font-size:14.5px;font-weight:800;color:var(--deep);line-height:1.25}
.pf2-row small {display:block;font-size:12.5px;font-weight:600;color:var(--navy);opacity:.9}
.pf2-row .arr {margin-left:auto;flex:none;font-weight:800;color:var(--cobalt);font-size:16px}
/* splitter row carries both patterns in one thumb: 2D array + 1D line */
  .pf2-thumb--dual {width:auto;height:auto;min-height:46px;flex-direction:column;gap:3px;padding:5px 6px}
.pf2-thumb--dual img {width:32px;height:auto}
@media (max-width:1080px) {
    .pf2-grid{grid-template-columns:1fr}
    .pf2-stage{grid-template-columns:1fr}
    .pf2-plot img{max-height:280px}
  }
@media (prefers-reduced-motion:reduce) {
    .pf2-plot img{transition:none}
    .pf2-plot img.is-swapping{opacity:1}
  }
.uc2-rows {display:grid;gap:18px}
.uc2-row {display:grid;grid-template-columns:290px 1fr auto;align-items:stretch;
    background:#fff;border:1px solid var(--pale);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);text-decoration:none;position:relative;
    transition:transform .2s,box-shadow .2s,border-color .2s}
.uc2-row:hover {transform:translateY(-3px);border-color:var(--mist);
    box-shadow:0 18px 44px -16px rgba(13,27,46,.42)}
/* one shared accent, revealed on hover — the Midel marker, not a colour code */
  .uc2-row::before {content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.uc2-row:hover::before {transform:scaleX(1)}
.uc2-photo {height:100%;min-height:172px;overflow:hidden;background:var(--grad)}
.uc2-photo img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.uc2-row:hover .uc2-photo img {transform:scale(1.045)}
.uc2-body {padding:22px 26px;display:flex;flex-direction:column;gap:9px;justify-content:center;min-width:0}
.uc2-body h3 {font-size:19px;margin:0;max-width:30ch;color:var(--deep)}
.uc2-body p {margin:0;font-size:14.5px;color:var(--navy);max-width:46ch}
/* partner attribution — the credibility, stated plainly.
     navy, not --muted: at 11.5px --muted only reaches 4.4:1 (below AA 4.5). */
  .uc2-with {font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.uc2-with b {color:var(--cobalt);font-weight:800}
/* result panel: the measured outcome is the visual anchor, replacing the
     decorative stripe as the thing that differentiates one row from the next */
  .uc2-kpi {border-left:1px solid var(--pale);background:var(--cloud);
    padding:22px 26px;display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:3px;min-width:206px}
.uc2-kpi b {font-size:29px;font-weight:800;line-height:1;color:var(--deep);letter-spacing:-.02em}
.uc2-kpi span {font-size:12.5px;font-weight:700;color:var(--navy);max-width:19ch;line-height:1.35}
/* --cyanmid only reaches 3.1:1 on the pale --cloud panel; navy clears AA and
     the cyan identity is already carried by the hover stripe. */
  .uc2-kpi .go {margin-top:12px;font-size:13.5px;color:var(--navy)}
.uc2-row:hover .uc2-kpi .go {color:var(--cyanmid)}
.uc2-row:focus-visible {outline:2px solid var(--cobalt);outline-offset:2px}
/* .go is only ever defined nested (.card .go, .tech .go …), never globally —
     a bare .go in a .wrap inherits nothing and renders as a default blue
     underlined link. Style the section-level link explicitly. */
  .uc2-all {display:inline-block;margin-top:22px;color:var(--cyanmid);
    font-weight:700;font-size:14px;text-decoration:none}
.uc2-all:hover {color:var(--cobalt)}
@media (max-width:900px) {
    .uc2-row{grid-template-columns:1fr}
    .uc2-photo{min-height:200px}
    /* justify-content:center from the base rule centres vertically in a column
       but horizontally in a row — reset it so the panel stays left-aligned */
    .uc2-kpi{border-left:0;border-top:1px solid var(--pale);flex-direction:row;
      align-items:baseline;justify-content:flex-start;gap:10px;flex-wrap:wrap;min-width:0}
    .uc2-kpi b{font-size:25px}
    .uc2-kpi span{max-width:none}
    .uc2-kpi .go{margin-top:0;margin-left:auto;align-self:center}
  }
@media (prefers-reduced-motion:reduce) {
    .uc2-row,.uc2-row::before,.uc2-photo img{transition:none}
  }
/* three columns: the band is three claims, and thirds give each headline
     room to sit on one line at desktop width */
  .bn2-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:28px}
/* hairline separators instead of cards: this is one argument in three parts,
     not three independent boxes competing for weight */
  .bn2-item {padding-left:26px;border-left:1px solid rgba(255,255,255,.16)}
.bn2-item:first-child {padding-left:0;border-left:0}
/* icons are optics-specific marks, not metaphors — a rocket and a diamond
     say nothing about a beam. currentColor so the yellow is one token. */
  .bn2-ico {color:var(--yellow);width:34px;height:34px;display:block;margin-bottom:13px}
.bn2-ico svg {width:100%;height:100%;display:block}
.bn2-item h3 {font-size:18px;line-height:1.28;margin:0 0 8px;color:#fff}
.bn2-item p {font-size:14.5px;color:var(--mist)}
/* the one hard spec on the band: checkable ranges, so they get the
     monospace-ish treatment that marks them as data rather than copy */
  .bn2-spec {display:block;margin-top:10px;font-size:12.5px;font-weight:700;
    letter-spacing:.04em;color:var(--cyan)}
/* one link for the whole band, forward — see the note above on why the
     per-tile backlinks were dropped */
  .bn2-more {display:inline-block;margin-top:26px;font-size:14px;font-weight:700;
    color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(0,208,232,.4);
    padding-bottom:2px}
.bn2-more:hover {color:#fff;border-bottom-color:#fff}
/* two-up would leave a widow, so tablet goes straight to stacked rows */
  @media(max-width:900px) {
    .bn2-grid{grid-template-columns:1fr;gap:24px}
    .bn2-item{padding-left:0;border-left:0}
    .bn2-item+.bn2-item{border-top:1px solid rgba(255,255,255,.16);padding-top:24px}
  }
/* Colours as tokens: the section was prototyped light and dark, and holding
     the palette in one place keeps a later dark treatment a token swap. */
  .ab2 {position:relative;overflow:hidden;background:var(--ab2-bg);color:var(--ab2-fg);
    --ab2-bg:#fff;--ab2-fg:var(--deep);--ab2-num:var(--cobalt);--ab2-sub:var(--navy);
    --ab2-rule:var(--pale);
    /* --cobalt (7.12:1), not --cyanmid: this token also colours the strip's
       company names and the reach eyebrow, i.e. body text that must clear AA. */
    --ab2-link:var(--cobalt);--ab2-linkhov:var(--cyanmid)}
/* the map is decoration here: bled off the right edge, behind everything.
     aria-hidden lives on the container; the inner svg/img carry it too. */
  .ab2-map {position:absolute;top:50%;left:34%;width:80%;transform:translateY(-50%);
    opacity:.62;pointer-events:none;z-index:0}
.ab2-map .gm-canvas {aspect-ratio:2/1}
/* Fade the map towards the text side so the headline never fights the dots.
     The first stop stays at 20% rather than pushing further right: the quote box
     is translucent now, so there has to be something left behind it to show. */
  .ab2::after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,#fff 20%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.15) 100%)}
.ab2 .wrap {position:relative;z-index:2}
.ab2 h2 {color:var(--ab2-fg);max-width:24ch}
/* Stats row: three numbers, then the qualitative facts as bullets.
     .qual, not .fact — a global .fact rule (the product trust pills) would
     style these as rounded chips with a checkmark. */
  .ab2-stats {display:flex;align-items:center;flex-wrap:wrap;gap:14px 32px;margin:18px 0 28px;
    padding:0;list-style:none}
.ab2-stats .num b {display:block;font-size:30px;font-weight:800;line-height:1;color:var(--ab2-num)}
.ab2-stats .num span {font-size:13px;font-weight:600;color:var(--ab2-sub)}
.ab2-stats .qual {display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
    color:var(--ab2-fg)}
.ab2-stats .qual::before {content:"";width:7px;height:7px;border-radius:50%;
    background:var(--cyan);flex:none}
/* The quote is a box, so it reads as testimony rather than as our own claim.
     Cyan left edge is the same device .bigquote used — kept deliberately.
     Translucent on purpose: the dot map stays faintly visible through it, which
     ties the quote to the reach line below instead of masking it. The 2px blur
     keeps the dots from reading as noise directly behind the text. */
  .ab2-quote {max-width:760px;margin:0;background:rgba(255,255,255,.72);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    border:1px solid var(--ab2-rule);border-left:4px solid var(--cyan);
    border-radius:var(--r);box-shadow:var(--shadow);padding:26px 30px}
.ab2-quote blockquote {margin:0;font-size:clamp(18px,1.9vw,23px);font-weight:700;
    line-height:1.45;color:var(--ab2-fg)}
.ab2-quote .who {display:flex;align-items:center;gap:13px;margin-top:18px}
.ab2-quote .face {width:52px;height:52px;border-radius:50%;object-fit:cover;
    object-position:50% 50%;flex:none;border:2px solid var(--ab2-rule)}
.ab2-quote .nm {display:block;font-weight:800;font-size:14.5px;color:var(--ab2-fg)}
.ab2-quote .rl {display:block;font-size:12.5px;color:var(--ab2-sub);margin-top:2px}
/* Own outline button rather than .btn-ghost.dark: that pairing is broken
     site-wide — .dark (a section class, advanced.css:40) sets
     background:var(--grad) and outranks .btn-ghost's transparent, so the
     "ghost" button renders as a filled blue gradient with navy text.
     ⚑ flagged for the style pass; fixing it globally is not this section's job. */
  .ab2-cta {margin-top:22px}
/* border is --cyanmid (3.27:1), not --sky (2.37:1): an outline button's edge
     IS the control, so it needs the 3:1 non-text AA threshold, not decoration. */
  .ab2-btn {background:transparent;color:var(--cobalt);border:1.5px solid var(--cyanmid)}
.ab2-btn:hover {background:var(--cloud);border-color:var(--cobalt)}
/* Partner strip: the logos say "reachable locally" better than pins did */
  .ab2-reach {margin-top:32px;padding-top:26px;border-top:1px solid var(--ab2-rule)}
.ab2-reach-k {font-size:11.5px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ab2-link)}
.ab2-strip {display:flex;flex-wrap:wrap;gap:14px 30px;margin:14px 0 0;padding:0;list-style:none}
.ab2-strip .rs-item {display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ab2-sub)}
.ab2-strip .rs-item b {color:var(--ab2-fg);font-weight:700}
.ab2-strip .rs-hq b {color:var(--ab2-link)}
/* The logo files have opaque light backgrounds, so they go on a white chip —
     the same way .gm-leg .gm-logo already does on partners.html */
  .ab2-strip .gm-logo {height:16px;width:auto;max-width:52px;flex:none;object-fit:contain;
    background:#fff;border:1px solid var(--pale);border-radius:3px;padding:2px 4px}
.ab2-strip .gm-swatch {width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none}
.ab2-links {display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px}
.ab2-links a {color:var(--ab2-link);font-weight:700;font-size:14px;text-decoration:none}
.ab2-links a:hover {color:var(--ab2-linkhov)}
@media (max-width:900px) {
    /* the map would sit under the text at this width — drop it entirely
       rather than dim it further, and let the gradient go flat.
       With no map behind it, the quote box goes fully opaque again. */
    .ab2-map{display:none}
    .ab2::after{background:none}
    .ab2-quote{max-width:none;padding:22px 24px;background:#fff;
      backdrop-filter:none;-webkit-backdrop-filter:none}
  }

/* ---- from prototypeV3/technology.html ---- */
/* page-specific: Technology. Prefixed t3- throughout;
   TODO(css): fold into advanced.css and drop the prefix on the style pass.

   Much smaller than the previous version's block, because most of the old
   page's layout primitives left with the sections they served (.t3-pair,
   .t3-propfig, .t3-tri, .t3-arch, .t3-datagrid and the shared .dgm frame).
   They are preserved in _legacy/technology-longform-2026-08.html for whoever
   builds the basics and integration pages. */

/* small reusable bullet style, shared by every card grid on this page */
.t3-bullets {list-style:none;display:grid;gap:10px}
.t3-bullets li {position:relative;padding-left:19px;font-size:14.5px;color:var(--navy)}
.t3-bullets li::before {content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--cyanmid)}
.t3-kicker {font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cyanmid);margin-bottom:10px;display:block}
/* The hero now uses the stock .hero .visual.has-img pattern (a single photo,
   object-fit:contain, mobile auto-hide at 820px), so it needs no page CSS at
   all. The previous diagram carried ~35 lines of .t3-hv-* here plus a comment
   about fighting advanced.css:183 for specificity. Both left with it. */

/* Full-width explanatory figure, caption underneath. Used twice: the beam-path
   sketch in "What it is" and the wavelength spectrum in "Which lasers". Both are
   SVG, so they carry their own labels and optimize.py ignores them. */
.t3-fig {margin:26px 0 0;background:#fff;border:1px solid var(--pale);
  border-radius:var(--r);padding:22px 24px 18px;box-shadow:var(--shadow)}
.t3-fig img {width:100%;height:auto;display:block;max-width:900px;margin:0 auto}
.t3-fig figcaption {margin-top:14px;font-size:13.5px;color:var(--muted);max-width:80ch;
  margin-left:auto;margin-right:auto}
/* The process chain as a display formula rather than a sentence. That is how the
   intro deck states it (slide 12) and how the old site stated it, and it reads
   in one glance: three nouns, two operators. Still a <p>, so the canvas pass can
   edit the words. */
.t3-eq {margin-top:4px;font-size:clamp(18px,2.4vw,25px);font-weight:800;
  line-height:1.35;color:var(--deep)}
.t3-eq i {font-style:normal;font-weight:900;color:var(--cyanmid);padding:0 4px}
/* keeps the result on one line with its "=", instead of leaving the operator
   dangling at the end of the previous line when the formula wraps */
.t3-eq em {font-style:normal;white-space:nowrap}
/* THE MANUFACTURING SCENE — five layers cut to overlay exactly, recovered from
   the old website, which animated them on scroll into view. Same stacking order
   and the same durations and delays; the trigger is an IntersectionObserver
   below the figure instead of the old page's waypoints.
   All five are absolutely positioned inside an aspect-ratio stage in DOM order
   bottom to top, so no z-index is needed and nothing can end up misregistered.
   .t3-armed is set by script, not in the markup: without JS the finished frame
   is simply visible, and there is no flash of a hidden figure. */
.t3-make {position:relative;margin:0 auto 14px;max-width:502px;aspect-ratio:1004/485}
.t3-make img {position:absolute;inset:0;width:100%;height:auto;display:block}
.t3-make.t3-armed img {opacity:0}
.t3-make.t3-armed.is-in .t3-l1 {animation:t3-fade 1.5s ease 1.5s both}
.t3-make.t3-armed.is-in .t3-l2 {animation:t3-sll  1s   ease  .3s both}
.t3-make.t3-armed.is-in .t3-l3 {animation:t3-slr   .5s ease  0s  both}
.t3-make.t3-armed.is-in .t3-l4 {animation:t3-fade 1.5s ease 1.7s both}
.t3-make.t3-armed.is-in .t3-l5 {animation:t3-flip 2s   ease  3s  both}
@keyframes t3-fade {from{opacity:0}to{opacity:1}}
@keyframes t3-sll {from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}
@keyframes t3-slr {from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}
@keyframes t3-flip {from{opacity:0;transform:perspective(900px) rotateY(-85deg)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {
  .t3-make.t3-armed img{opacity:1}
  .t3-make.t3-armed.is-in img{animation:none}
}
/* THE THREE STEPS, without boxes. They used the global .flow/.fstep, which
   about.html also uses (and howwework.html did, until it was deleted
   2026-08-31), so it could not be restyled here —
   and as cards they sat directly above the three cross-section cards, which made
   the whole section read as boxes inside boxes. No background, no border, no
   shadow: a hairline runs out of each numeral to carry the left-to-right
   reading, and the numeral is ghosted so the title stays dominant. */
.t3-steps {display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:32px}
.t3-stepn {display:flex;align-items:center;gap:14px;margin-bottom:12px}
.t3-stepn span {flex:0 0 auto;font-size:34px;font-weight:900;line-height:1;
  letter-spacing:-.02em;color:var(--mist)}
.t3-stepn::after {content:"";flex:1 1 auto;height:1px;background:var(--pale)}
.t3-step h3 {font-size:18px;margin-bottom:8px}
.t3-step>p {font-size:14.5px;color:var(--navy)}
.t3-step .t3-bullets {margin-top:14px}
@media(max-width:820px) {.t3-steps{grid-template-columns:1fr;gap:28px}}
/* HOW WE MAKE IT — three cross-sections of the same mirror, one per patterning
   route. They are built on one shared geometry (documented at the top of
   images/technology/xsection-subtractive.svg), so they only work as a row: read
   on its own, none of the three makes its point. Order is deliberate, ours last,
   because the third figure is only interesting once the first two have shown
   what "structured coating" normally costs you.
   The SVGs carry their own labels, so no text sits on the graphic from here.
   The cards stay white whatever the section ground is: the figures use
   near-white internal fills for removed and added volume, which would vanish
   straight into any tinted card. */
.t3-xs {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;
  align-items:start}
.t3-xsfig {margin:0;background:#fff;border-radius:var(--r);padding:16px 18px 20px}
.t3-xsfig img {width:100%;height:auto;display:block}
.t3-xsfig figcaption {margin-top:12px;font-size:14px;color:var(--navy)}
.t3-xsfig figcaption b {display:block;font-size:15.5px;margin-bottom:6px}
/* The scale disclaimer used to be a footnote under this row (.t3-xsnote). It is
   now a small grey label inside each of the three SVGs, so it is read with the
   drawing it applies to instead of after all three. */

/* Second pass on the presentation, 2026-08-21: "die midel box muss am Ende
   prominenter". Three identical cards made the row read as a menu of three
   equal options, which is the opposite of the point. Now the first two are
   flat reference figures - border, no shadow, muted title - and ours is the
   only card that lifts off the ground: cyan frame, heavy shadow, an "Our route"
   label above a larger title.
   The column stays 1fr like the other two on purpose. All three SVGs are built
   on one shared geometry, so a wider column would render the same structure at
   a different scale and the row would stop being a comparison. */
.t3-xsfig:not(.t3-own) {border:1px solid var(--mist)}
.t3-xsfig:not(.t3-own) figcaption b {color:var(--navy)}
.t3-xsfig.t3-own {border:1.5px solid var(--cyan);border-top-width:5px;
  padding:18px 20px 24px;box-shadow:0 16px 36px rgba(13,27,46,.14)}
.t3-xsfig.t3-own figcaption {color:var(--deep);font-size:14.5px}
.t3-xsfig.t3-own figcaption b {font-size:19px;color:var(--deep);margin-bottom:8px}
.t3-xsown {display:block;font-size:11.5px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--cyanmid);margin-bottom:7px}
@media(max-width:820px) {.t3-xs{grid-template-columns:1fr}}
.t3-callout {background:#fff;border:1px solid var(--pale);border-left:4px solid var(--cyan);
  border-radius:var(--r);padding:20px 24px;margin-top:24px;box-shadow:var(--shadow)}
.t3-callout p {font-size:15.5px;font-weight:700;color:var(--deep)}
.t3-callout p+p {font-weight:400;font-size:14.5px;color:var(--navy);margin-top:8px}
/* single white card — now used only for the fit-check checklist. The .t3-two
   grid that paired two of these under "How we make it" is gone: the two cards
   were removed and their substance moved into the step bullets above. */
.t3-twocard {background:#fff;border:1px solid var(--pale);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow)}
.t3-twocard h3 {font-size:18px;margin-bottom:12px}
.t3-twocard p {font-size:14.5px;color:var(--navy)}
.t3-twocard p+p {margin-top:10px}
/* LIMITS — the same card shape as .t3-twocard but on the dark ground, because
   this block carries the page's credibility and should not read like a
   disclaimer buried in body copy. Deliberately 2x2 rather than a bullet list:
   each limit is a full thought with a consequence, not a caveat. */
.t3-lims {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.t3-lim {background:rgba(13,27,46,.30);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:24px 26px}
.t3-lim h3 {color:#fff;font-size:17px;margin-bottom:10px}
.t3-lim p {font-size:14.5px;color:var(--mist)}
@media(max-width:820px) {.t3-lims{grid-template-columns:1fr}}
/* HOW WE MAKE IT ON THE DARK BAND — David, 2026-08-21: "mach den how we make it
   absatz in dem dunklen blau, das wirkt besser mit dem bild". The manufacturing
   scene is magenta and green line art on transparency, recovered from the old
   site, and the intro deck puts the same artwork on a blue ground (slide 12). On
   --cloud it read as a diagram pasted into a page.
   .dark (the cobalt-to-sky gradient) and not .deep (#0D1B2E), for one measurable
   reason: about 9 % of the two mirror layers is pure black outline. Black holds
   on the gradient and disappears entirely on #0D1B2E.
   Everything below is colour only, no layout: the light-ground values stay in
   place above, so this block reads as the diff it is. */
#process.dark .t3-eq {color:#fff}
#process.dark .t3-eq i {color:var(--cyan)}
#process.dark .t3-stepn span {color:rgba(255,255,255,.42)}
#process.dark .t3-stepn::after {background:rgba(255,255,255,.30)}
#process.dark .t3-step>p,
#process.dark .t3-bullets li {color:var(--mist)}
#process.dark .t3-bullets li::before {background:var(--cyan)}
/* The two body paragraphs around the cross-section row. --pale rather than #fff:
   74ch of pure white on the gradient is harsher than it needs to be, and it
   leaves the <b> lead-in of the patent sentence somewhere to go. */
#process.dark>.wrap>p {color:var(--pale)}
#process.dark>.wrap>p b {color:#fff}
/* On the dark ground the two levers that made ours the prominent card stop
   working: a mist border on a white card is invisible against the band, and a
   drop shadow has nothing left to darken. The cyan frame carries it alone now,
   and the shadow becomes a cyan glow, which is the version of "lifted" a dark
   ground allows. All three cards stay pure white - see the note above. */
#process.dark .t3-xsfig.t3-own {box-shadow:0 14px 40px rgba(0,208,232,.22)}
.tablewrap {overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- from prototypeV3/usecase-blz-welding.html ---- */
/* This case shows two stacked figures — turn the single-image .uc-graphic
     into a vertical stack with in-flow captions (base .uc-graphic centres one
     image and absolutely-positions a single caption). */
  .uc-graphic.uc-graphic--stack {flex-direction:column;justify-content:flex-start;
    align-items:stretch;gap:10px;text-align:left}
.uc-graphic.uc-graphic--stack .cap {position:static;color:#fff}
.uc-graphic.uc-graphic--stack .cap + img {margin-top:6px}
.uc-graphic.uc-graphic--stack img {max-height:none;width:100%;margin:0 auto}
.uc-graphic.uc-graphic--stack img + .cap {margin-top:18px}