/* The signed-out marketing page. It carries its own header rather than
     _toolbar.html: that bar's links are all auth-gated destinations, and the
     only actions here are "start free", "play one" and "sign in". Everything
     else. The tokens, components and the mark come from
     /assets/shadowcapture.css, and the section rhythm is this site's own.

     Two things are deliberately looser here than in the product:

       · gutters are 80/48/24 rather than the app's flat 32, because a
         marketing band is read at arm's length and the app is read at work;
       · a band may spend up to FOUR accents rather than one. The restraint
         that reads as discipline over a captured screen reads as timidity on
         a page whose job is to be looked at.

     Where the accents go, band by band: the mark's capture frame in the bar
     and the footer; the beta strip's left rule; one 2px rule on the "why now"
     answer; one 2px rule under the first pass; the four ordinals on the
     raised band; the 2px rule on the LMS format; one 2px rule on the beta
     band's "what you get" column. Nowhere else. Never on body text, never on
     a link inside prose, and NOTHING in either walkthrough band. A captured
     screen is present there, and no hue goes near the captured frame.

     VOCABULARY. Three nouns, three lanes. They look interchangeable and are
     not; mixing them is the fastest way to make this page read as vague.

       · RUN-THROUGH: the INPUT. What a person performs, once, in their own
         software. Always something you do, never something a learner opens.
       · WALKTHROUGH: the OUTPUT. What Shadow Capture produces and a learner
         works through. The product's noun. Never "lesson", never "module",
         never "tutorial." One word for one thing.
       · COURSE: the CUSTOMER'S world, the unit their LMS already deals in,
         and the artifacts they maintain today. Used for a Shadow Capture
         export only once it is sitting in an LMS, where it genuinely is one.

     The hero teaches the first two in one sentence, which is why that
     sentence carries both. "Four passes between your run-through and a
     finished walkthrough" only parses because the pair is kept apart.

     Page-local CSS is layout: the marketing grid, the marketing rhythm, and
     the components the site has that the app does not (.track, .formats,
     .faq, .wt-*, .beta-*). Every colour, border weight, radius and face is a
     system token. */
  :root {
    --gutter: clamp(24px, 6vw, 80px);   /* 24 / 48 / 80 */
    --section-y: clamp(64px, 8vw, 112px);
    --mk-content: 1240px;
    --measure: 650px;
  }
  html { scroll-behavior: smooth; }
  [id] { scroll-margin-top: 88px; }
  .wrap { width: min(100%, var(--mk-content)); margin: 0 auto; }
  .section { padding: var(--section-y) var(--gutter); border-bottom: var(--line) solid var(--border); }
  .section--raised { background: var(--surface); }
  .section--sunk { background: var(--surface-2); }
  .section-head { display: grid; gap: var(--s3); max-width: var(--measure); margin-bottom: var(--s8); }
  .section-head .lead { margin-top: var(--s1); }
  /* h1 is the one display title on this view. Every other heading is Sora
     at 600, sized up for reading distance and tracked tight. There is no
     second face to switch to: weight and tracking do that work. */
  .section h2 { font-size: clamp(24px, 1.4rem + 1vw, 30px); line-height: 1.2; }
  .aside { margin-top: var(--s7); padding-top: var(--s5); border-top: var(--line) solid var(--border);
           color: var(--muted); font-size: var(--type-small); max-width: 68ch; }

  /* ---- mode names in prose ---------------------------------------------- */
  /* Show me and You try are the two halves of the player's mode switch, and
     set as plain words they stop being names: "Show me demonstrates each step"
     opens as an imperative aimed at the reader, and "You try hands you the
     controls" reads as a clause with a subject.

     The fix is colour, not a chip. Each name takes the hue of its half of the
     switch -- violet while the learner is watching, cyan while the learner is
     driving -- at a slightly heavier weight, in the running font. The eye
     takes the coloured pair as one object, the sentence parses on the first
     pass, and the words still sit in a heading or in muted prose without
     dropping a box into the line. These are the only two hues this page
     spends on body text, so they read as names and nothing else.

     Sentence case in the markup, sentence case on screen: a screen reader
     says "Show me", and so does the page. */
  .mode {
    font-weight: 600;
    white-space: nowrap;
  }
  .mode-show { color: var(--violet); }
  .mode-try  { color: var(--cyan); }
  h1 .mode, h2 .mode, h3 .mode { font-weight: inherit; }

  /* ---- beta strip ------------------------------------------------------ */
  /* Not sticky. It scrolls away and the header's BETA pill carries the status
     from then on, which avoids stacking two sticky bars and the layout maths
     that comes with them. */
  .beta-bar { background: var(--surface); color: var(--on-ink);
              border-bottom: var(--line) solid var(--border); }
  .beta-bar-inner { width: min(100%, var(--mk-content)); margin: 0 auto;
                    padding: 10px var(--gutter); display: flex; flex-wrap: wrap;
                    align-items: center; gap: var(--s2) var(--s4);
                    font-size: var(--type-small); line-height: 1.5;
                    border-left: 2px solid var(--lead); }
  .beta-bar-inner .label { color: var(--lead); }
  .beta-bar-inner span { color: var(--on-ink-muted); }
  .beta-bar-inner a { color: var(--on-ink); text-underline-offset: 3px; }
  .beta-bar-inner a:hover { color: var(--lead); }

  /* ---- bar ----------------------------------------------------------- */
  .mk-nav { width: min(100%, var(--mk-content)); margin: 0 auto; min-height: 72px;
            padding: var(--s3) var(--gutter); display: flex; align-items: center;
            justify-content: space-between; gap: var(--s6); }
  .mk-links { display: flex; align-items: center; gap: var(--s6); }
  .mk-actions { display: flex; align-items: center; gap: var(--s5); flex: none; }
  .mk-brand { display: inline-flex; align-items: center; gap: var(--s3); flex: none; }

  /* ---- hero ----------------------------------------------------------- */
  .hero { padding-top: clamp(40px, 6vw, 80px); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
               gap: clamp(40px, 5vw, 72px); align-items: center; }
  .hero-copy { display: grid; gap: var(--s6); }
  .hero-copy .label { color: var(--primary); }
  .hero h1 { font-size: clamp(40px, 2.4rem + 2.4vw, 60px); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
  .cta-note { color: var(--muted); font-size: var(--type-small); margin-top: calc(var(--s3) * -1); }
  .distribution-line { border-top: var(--line) solid var(--border); padding-top: var(--s4);
                       color: var(--muted); font-family: var(--font-mono); font-size: 11px;
                       line-height: 1.9; letter-spacing: .02em; }

  /* ---- walkthrough frames ---------------------------------------------- */
  /* ====================================================================
     A .wt-frame is the slot a recorded walkthrough sits in. It holds one of
     two things and never anything else:

       · <iframe class="wt-embed" src="<path>/play.html"> once the walkthrough
         has been recorded and its export is in examples/;
       · a .wt-placeholder saying what will sit there, while it has not.

     build.py decides which, per page. Both are the same size, so a page does
     not reflow when a walkthrough lands.

     No accent is spent in any band that contains one: the lead hue beside a
     captured screen is what the player uses to mean "look here".
     ==================================================================== */
  .wt-frame { position: relative; background: var(--surface);
              border: var(--line) solid var(--border); }
  .wt-frame--hero { min-height: 480px; }
  .wt-embed { display: block; width: 100%; height: 480px; border: 0; background: #FFFFFF; }
  /* The empty state is the system's: a dashed rule and the mark built from
     boxes, never a picture of a product that is not there yet. */
  .wt-placeholder { display: flex; flex-direction: column; gap: var(--s3);
                    align-items: flex-start; justify-content: center;
                    min-height: inherit; height: 100%; padding: var(--s7) var(--s6);
                    border: var(--line) dashed var(--border-dashed); margin: var(--s3); }
  .wt-frame--hero .wt-placeholder { min-height: 456px; }
  .wt-placeholder .brand-mark { --mark-size: 28px;
                                --mark-hue: var(--text-off); --mark-shadow: var(--hairline); }
  .wt-placeholder h3 { font-size: var(--type-h3); }
  .wt-placeholder p { color: var(--muted); font-size: var(--type-small); max-width: 46ch; }
  .wt-meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

  /* ---- why now --------------------------------------------------------- */
  .track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--line);
           border: var(--line) solid var(--border); background: var(--border); }
  .track--three { grid-template-columns: repeat(3, 1fr); }
  .pass { background: var(--surface); padding: var(--s6); min-width: 0;
          display: flex; flex-direction: column; }
  .pass h3 { margin: var(--s3) 0; }
  .pass p { color: var(--text-soft); font-size: var(--type-small); }
  .pass .label { color: var(--primary); }
  /* One 2px accent rule, on the first pass only: the run-through is the part
     that is live, and the three passes after it are machinery. */
  .pass-accent { width: 40px; height: 2px; margin-bottom: var(--s4); background: var(--border); }
  .pass:first-child .pass-accent { background: var(--accent); }
  .pass-stamp { display: block; margin-top: auto; padding-top: var(--s3);
                border-top: var(--line) solid var(--border-soft); }
  /* The band's single accent: the sentence that answers the three costs. */
  .answer { margin-top: var(--s7); border-left: 2px solid var(--accent);
            padding: var(--s2) 0 var(--s2) var(--s5); max-width: 72ch; }
  .answer strong { display: block; font-size: 17px; margin-bottom: var(--s1); }
  .answer p { color: var(--text-soft); font-size: var(--type-small); }

  /* ---- walkthrough gallery --------------------------------------------- */
  /* No accent anywhere in this band. */
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--line);
             border: var(--line) solid var(--border); background: var(--border); }
  .gallery-card { background: var(--surface); padding: var(--s6); min-width: 0;
                  display: flex; flex-direction: column; gap: var(--s3);
                  align-items: flex-start; }
  .gallery-card h3 { font-size: 15px; line-height: 1.35; }
  .gallery-card p { color: var(--text-soft); font-size: var(--type-small); }
  .gallery-card .wt-meta { margin-top: auto; padding-top: var(--s3); }
  /* The card's children hug their content (align-items: flex-start) so the
     buttons and pills do not stretch; a strip of screenshots must take the
     full column or its frames shrink to the 180px minimum. */
  .gallery-card .figure { align-self: stretch; }
  .gallery-card .brand-mark { --mark-size: 20px;
                             --mark-hue: var(--text-off); --mark-shadow: var(--hairline); }

  /* ---- what the model was not allowed to do ---------------------------- */
  /* Dark is home, so this band cannot separate itself by going dark. It steps
     UP instead: base -> raised, with a stronger hairline at the seam. The
     class name is kept because the content pages name it. */
  .section--ink { background: var(--surface-2); border-bottom-color: var(--border-strong);
                  border-top: var(--line) solid var(--border-strong); }
  .section--ink .wt-frame { background: var(--surface); border-color: var(--border-strong); }
  .section--ink .wt-placeholder { border-color: var(--border-strong); }
  .section--ink .wt-placeholder .brand-mark { --mark-hue: var(--text-dim); --mark-shadow: var(--hairline); }
  .section--ink .pill { border-color: var(--border-strong); }
  .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--line);
                border: var(--line) solid var(--border-strong); background: var(--border-strong); }
  .proof-item { background: var(--surface-2); padding: var(--s6); }
  /* The band's four accents. Mono, in the lead hue, on a raised surface:
     these are counts the system knows, not numbers a person wrote. */
  .proof-number { font-family: var(--font-mono); font-size: 24px; color: var(--lead); }
  .proof-item h3 { margin: var(--s3) 0; }
  .proof-item p { color: var(--text-soft); font-size: var(--type-small); }

  /* ---- where it goes --------------------------------------------------- */
  .pill-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s7); }
  .formats { display: flex; flex-wrap: wrap;
             border-top: var(--line) solid var(--border); border-left: var(--line) solid var(--border); }
  .format { flex: 1 1 220px; min-height: 150px; display: flex; flex-direction: column;
            gap: var(--s3); padding: var(--s5); background: var(--surface);
            border-right: var(--line) solid var(--border); border-bottom: var(--line) solid var(--border); }
  .format p { color: var(--text-soft); font-size: var(--type-small); }
  /* The LMS is the destination most of this page is about, so it takes the
     2px accent rule that means "active" everywhere else in the system. */
  .format--lms { box-shadow: inset 0 2px 0 var(--accent); }
  .facts { list-style: none; margin-top: var(--s7); border-top: var(--line) solid var(--border); }
  .facts li { padding: var(--s4) 0; border-bottom: var(--line) solid var(--border);
              color: var(--text-soft); font-size: var(--type-small); max-width: 74ch; }
  .facts strong { display: block; color: var(--text); font-weight: var(--weight-semibold);
                  font-size: var(--type-body); margin-bottom: 2px; }

  /* ---- a client's brand, shown on a real export ------------------------- */
  /* No accent in this band: the colour on show is the customer's, inside the
     player and in the swatches, never the site's. */
  #brand .hero-try-head { margin-bottom: var(--s5); }
  .brand-columns { margin-top: var(--s7); }
  .brand-list { list-style: none; display: grid; gap: var(--s3); }
  .brand-list li { color: var(--text-soft); font-size: var(--type-small); max-width: 62ch; }
  .brand-list strong { color: var(--text); font-weight: var(--weight-semibold); }
  .brand-swatches { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
  .brand-swatch { display: inline-flex; align-items: center; gap: 6px;
                  font-family: var(--font-mono); font-size: var(--type-label);
                  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .brand-swatch i { display: block; width: 14px; height: 14px;
                    border: var(--line) solid var(--border); }

  /* ---- who it is for, what it carries, questions ------------------------ */
  .anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
             gap: clamp(32px, 4vw, 64px); align-items: start; }
  .fact-list { list-style: none; border-top: var(--line) solid var(--border); }
  .fact-list li { padding: var(--s5) 0; border-bottom: var(--line) solid var(--border); }
  .fact-list h3 { margin-bottom: var(--s1); }
  .fact-list p { color: var(--text-soft); font-size: var(--type-small); max-width: 62ch; }

  /* The step panel is the walkthrough's chrome written out rather than a
     picture of it. It spends no hue: the hues in the player are assigned to
     learner states, and none of those states is running here. */
  .step-pane { display: grid; gap: var(--s4); align-content: start; }
  .step-pane-head { display: flex; justify-content: space-between; gap: var(--s4); }
  .step-pane p { color: var(--text-soft); font-size: var(--type-small); }
  .step-pane .step-pane-title { color: var(--text); font-size: var(--type-h3);
                               font-weight: var(--weight-semibold); line-height: 1.4; }
  .step-pane-hint { border-left: 2px solid var(--border); padding: 2px 0 2px var(--s4); }
  .step-pane-foot { display: flex; justify-content: space-between; align-items: center;
                    gap: var(--s4); flex-wrap: wrap; padding-top: var(--s4);
                    border-top: var(--line) solid var(--border); }

  /* ---- what beta means -------------------------------------------------- */
  .beta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--line);
               border: var(--line) solid var(--border); background: var(--border); }
  .beta-col { background: var(--surface); padding: var(--s6); min-width: 0;
              display: grid; gap: var(--s4); align-content: start; }
  /* The band's single accent, on the column that says what an early team gets. */
  .beta-col--offer { box-shadow: inset 2px 0 0 var(--accent); }
  .beta-col ul { list-style: none; display: grid; gap: var(--s3); }
  .beta-col li { color: var(--text-soft); font-size: var(--type-small); line-height: 1.55; }
  .beta-col li strong { display: block; color: var(--text); font-weight: var(--weight-semibold); }
  .beta-status { display: flex; align-items: center; gap: var(--s2); }

  .faq { border-top: var(--line) solid var(--border); }
  .faq details { border-bottom: var(--line) solid var(--border); }
  .faq summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s5); cursor: pointer; list-style: none;
                 font-size: var(--type-h3); font-weight: var(--weight-semibold); }
  .faq summary::-webkit-details-marker { display: none; }
  /* The disclosure marker is one of the four text glyphs the system allows.
     There is no icon set here and no icon font. */
  .faq summary::after { content: "\25BE"; font-family: var(--font-mono); font-weight: var(--weight-regular); color: var(--muted); }
  .faq details[open] summary::after { content: "\25B4"; }
  .faq details p { max-width: 68ch; padding: 0 0 var(--s6); color: var(--text-soft); }

  /* ---- closing --------------------------------------------------------- */
  .closing-grid { display: grid; gap: var(--s5); max-width: var(--measure); }

  /* ---- footer ---------------------------------------------------------- */
  .footer { background: var(--surface); color: var(--on-ink); padding: var(--s8) var(--gutter);
            border-top: var(--line) solid var(--border-strong); }
  .footer-inner { width: min(100%, var(--mk-content)); margin: 0 auto; display: flex;
                  align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
  .footer-links { display: flex; gap: var(--s5); flex-wrap: wrap; }
  .footer-links a { color: var(--on-ink-muted); text-decoration: none; font-size: var(--type-small); }
  .footer-links a:hover { color: var(--on-ink); }
  .footer-note { width: 100%; padding-top: var(--s5); border-top: var(--line) solid var(--border);
                 color: var(--on-ink-muted); font-size: 12px; }

  /* ---- responsive ------------------------------------------------------ */
  @media (max-width: 1100px) {
    .anatomy { grid-template-columns: 1fr; }
  }
  @media (max-width: 1000px) {
    .track, .proof-grid, .gallery, .beta-grid { grid-template-columns: repeat(2, 1fr); }
    .track--three { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; gap: var(--s8); align-items: start; }
    .wt-frame--hero, .wt-embed { min-height: 400px; height: 400px; }
    .wt-frame--hero .wt-placeholder { min-height: 376px; }
  }
  @media (max-width: 820px) {
    .mk-links { display: none; }
    .beta-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .mk-nav { min-height: 60px; gap: var(--s4); }
    .site-header .brand-lockup .brand-word { display: none; }
    .track, .proof-grid, .gallery { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
  }

  /* ====================================================================
     Multi-page additions (September 2026). The hero now carries a live
     walkthrough full-width beneath the copy, because the popup player is
     laid out for a desktop-width captured screen and a half-column frame
     would have shown a postage stamp of it. Everything below is layout;
     every colour, weight, radius and face is still a system token.
     ==================================================================== */

  /* ---- hero, restructured ---------------------------------------------- */
  .hero-grid { align-items: end; }
  .hero-try { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: var(--s5); }
  .hero-try-head { display: flex; flex-wrap: wrap; justify-content: space-between;
                   align-items: flex-end; gap: var(--s4) var(--s6); }
  .hero-try-head > div:first-child { display: grid; gap: var(--s2); max-width: 72ch; }
  .hero-try-head h2 { font-size: clamp(20px, 1.1rem + .8vw, 24px); line-height: 1.3; }
  .hero-try-note { color: var(--text-soft); font-size: var(--type-small); max-width: 68ch; }
  .hero-try-links { display: flex; align-items: center; gap: var(--s4); flex: none; }
  .hero-try .distribution-line { margin-top: 0; }
  /* The live player. 16:10 of the content width, clamped so a laptop still
     sees the whole step panel without the page scrolling inside the frame. */
  .wt-embed--hero, .wt-embed--page { height: clamp(520px, 56vw, 760px); }
  .wt-frame--hero, .wt-frame--page { min-height: 0; }

  /* ---- walkthrough pages ------------------------------------------------ */
  .wt-page-head { padding-bottom: var(--s8); }
  .wt-page-head .wrap { display: grid; gap: var(--s4); }
  .wt-page-head .wrap > * { max-width: 820px; }
  .wt-page-head h1 { font-size: clamp(34px, 2rem + 1.6vw, 52px); }
  .wt-page-head .label a { color: inherit; text-decoration: none; }
  .wt-page-head .label a:hover { color: var(--text); }
  .wt-page-head .wt-meta { margin-top: var(--s2); }
  .wt-play .hero-try-head { margin-bottom: var(--s5); }
  .wt-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
  .wt-columns > div { display: grid; gap: var(--s3); align-content: start; }
  .wt-columns h2 { font-size: clamp(22px, 1.2rem + .8vw, 26px); line-height: 1.25; }
  .wt-columns p { color: var(--text-soft); max-width: 62ch; }
  .wt-columns p.small { color: var(--muted); }
  .wt-scenario { font-family: var(--font-display); font-size: clamp(20px, 1.1rem + .6vw, 24px);
                 font-weight: var(--weight-medium); letter-spacing: var(--track-heading);
                 line-height: 1.4; color: var(--text) !important; max-width: 30em !important; }
  .wt-objectives { list-style: none; display: grid; gap: var(--s2); border-top: var(--line) solid var(--border); }
  .wt-objectives li { padding: var(--s3) 0 var(--s3) var(--s5); position: relative;
                      border-bottom: var(--line) solid var(--border); color: var(--text-soft);
                      font-size: var(--type-small); }
  .wt-objectives li::before { content: "\2713"; position: absolute; left: 0;
                              font-family: var(--font-mono); color: var(--muted); }
  /* The step list is the readable alternative to the player: one row per
     step, the instruction verbatim, and the wrong-choice feedback where the
     walkthrough has some. No accent in this band; a captured screen is near. */
  .wt-steps { list-style: none; counter-reset: none; border-top: var(--line) solid var(--border);
              max-width: 78ch; }
  .wt-step { display: grid; gap: var(--s2); padding: var(--s5) 0;
             border-bottom: var(--line) solid var(--border); }
  .wt-step h3 { font-size: var(--type-h3); }
  .wt-step p { color: var(--text-soft); font-size: var(--type-small); max-width: 68ch; }
  .wt-step-kind { color: var(--muted); }
  .wt-step-feedback { border-left: 2px solid var(--border); padding: 2px 0 2px var(--s4); }
  /* A merged run: the parts the player performs straight after the step
     above, with no pause. Indented under it, never numbered on their own. */
  .wt-step-run { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s2);
                 padding-left: var(--s5); border-left: var(--line) solid var(--border); }
  .wt-step-run li { display: grid; gap: 2px; }
  .wt-step-run strong { font-weight: var(--weight-semibold); }
  .wt-step-feedback .label { display: block; margin-bottom: 4px; }
  .facts--flush { margin-top: 0; }
  /* The beta band's own start block: the same grid gap the hero has, so the
     note's negative margin lands where it was designed to. */
  .beta-start { margin-top: var(--s7); display: grid; gap: var(--s6); }
  .gallery-card h3 a { color: inherit; text-decoration: none; }
  .gallery-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .aside--ink { color: var(--on-ink-muted); border-top-color: var(--border); max-width: 78ch; }

  /* ---- long-form pages (privacy, terms) --------------------------------- */
  .prose { display: grid; gap: var(--s4); }
  .prose > * { max-width: 72ch; }
  .prose h2 { font-size: clamp(20px, 1.1rem + .6vw, 24px); margin-top: var(--s6); }
  .prose h3 { margin-top: var(--s3); }
  .prose p, .prose li, .prose dd { color: var(--text-soft); }
  .prose ul { padding-left: 1.2em; display: grid; gap: var(--s2); }
  .prose dl { display: grid; gap: var(--s1); border-top: var(--line) solid var(--border); }
  .prose dt { font-weight: var(--weight-semibold); padding-top: var(--s3); }
  .prose dd { padding-bottom: var(--s3); border-bottom: var(--line) solid var(--border); }
  .prose strong { color: var(--text); }
  .prose a { color: var(--text); }
  /* A value counsel still has to confirm. The lead hue is the system's
     "look here", which is exactly what this means; check.sh counts them. */
  mark.tbc { background: transparent; color: var(--text);
             border-bottom: 2px solid var(--lead); }

  @media (max-width: 1000px) {
    .wt-embed--hero, .wt-embed--page { height: clamp(440px, 70vw, 640px); }
    .wt-columns { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .wt-embed--hero, .wt-embed--page { height: 70vh; min-height: 420px; }
    .hero-try-links { width: 100%; justify-content: space-between; }
  }

  /* ---- guides and LMS publishing guides ---------------------------------- */
  /* A guide is an authored, dated article. The byline is the trust signal
     the plan asks for: a named author and a real review date, in mono. */
  .guide-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
                  font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--muted); }
  .guide-byline .pill { text-transform: none; letter-spacing: .12em; }
  .guide { display: grid; gap: var(--s5); }
  .guide > * { max-width: 72ch; }
  .guide h2 { font-size: clamp(22px, 1.2rem + .8vw, 26px); line-height: 1.25; margin-top: var(--s6); }
  .guide h3 { margin-top: var(--s3); }
  .guide p, .guide li, .guide dd, .guide td { color: var(--text-soft); }
  .guide strong { color: var(--text); }
  .guide a { color: var(--text); }
  .guide ul { padding-left: 1.2em; display: grid; gap: var(--s2); }
  /* Numbered procedure: the number in mono, the step as prose, a rule between. */
  .guide ol.procedure { list-style: none; counter-reset: step; border-top: var(--line) solid var(--border); max-width: 78ch; }
  .guide ol.procedure > li { counter-increment: step; position: relative; padding: var(--s4) 0 var(--s4) 56px;
                             border-bottom: var(--line) solid var(--border); color: var(--text-soft); }
  .guide ol.procedure > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--s4);
                                     font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .12em; color: var(--muted); }
  .guide ol.procedure > li strong { display: block; margin-bottom: 2px; }
  .guide ol.procedure ul { margin-top: var(--s2); }
  /* The answer box: one direct answer to the question the page is titled with,
     above the evidence. The band's single accent. */
  .answer-box { border-left: 2px solid var(--accent); padding: var(--s2) 0 var(--s2) var(--s5); max-width: 72ch; }
  .answer-box p { color: var(--text); font-size: 17px; line-height: 1.5; }
  .answer-box .label { display: block; margin-bottom: var(--s2); }
  /* The tested block: what exactly was verified, when, on what version. Kept
     apart from the prose so a reader can find it and so it is hard to leave stale. */
  .tested { border: var(--line) solid var(--border); background: var(--surface); padding: var(--s5); display: grid; gap: var(--s2); max-width: 78ch; }
  .tested dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s5); }
  .tested dt { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
  .tested dd { color: var(--text-soft); font-size: var(--type-small); }
  .tested--untested { border-style: dashed; border-color: var(--border-dashed); }
  /* Compatibility table. Three statuses, spelled out, never a traffic light. */
  .table-wrap { overflow-x: auto; max-width: none !important; }
  table.compat { width: 100%; border-collapse: collapse; font-size: var(--type-small); min-width: 640px; }
  table.compat th, table.compat td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0;
                                     border-bottom: var(--line) solid var(--border); }
  table.compat th { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase;
                    color: var(--muted); font-weight: var(--weight-medium); }
  table.compat td:first-child { color: var(--text); font-weight: var(--weight-semibold); white-space: nowrap; }
  .guide code, .prose code { font-family: var(--font-mono); font-size: .92em; }
  .download-card { border: var(--line) solid var(--text); background: var(--surface); padding: var(--s6); display: grid; gap: var(--s3); max-width: 78ch; }
  .download-card .hero-actions { margin-top: var(--s2); }
  .download-card p { color: var(--text-soft); font-size: var(--type-small); }

  /* ---- LMS platform grid ---------------------------------------------- */
  /* Names set large in the display face, not vendor logos: the tiles say
     "this is where it goes" without borrowing anyone's mark. A tile with a
     guide is a link and carries the system's 2px accent rule; the rest are
     plain. No other accent in the band. */
  .lms-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--line);
              border: var(--line) solid var(--border); background: var(--border); }
  .lms-tile { background: var(--surface); min-width: 0; min-height: 150px; display: flex; flex-direction: column;
              gap: var(--s2); padding: var(--s5) var(--s5) var(--s4); }
  .lms-tile > a { display: flex; flex-direction: column; gap: var(--s2); flex: 1; color: inherit; text-decoration: none;
                  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) calc(var(--s4) * -1); padding: var(--s5) var(--s5) var(--s4); }
  .lms-tile--guide { box-shadow: inset 0 2px 0 var(--accent); }
  .lms-tile--guide > a:hover .lms-status { text-decoration: underline; text-underline-offset: 3px; }
  /* A tile whose guide is written but not yet tested: still a link, but the
     rule along its top is dashed, like the untested test record, so nobody
     reads the accent as verification. */
  .lms-tile--draft { box-shadow: none; border-top: 2px dashed var(--border-dashed); }
  .lms-tile--draft > a:hover .lms-status { text-decoration: underline; text-underline-offset: 3px; }
  .lms-name { font-family: var(--font-display); font-weight: var(--weight-bold);
              font-size: clamp(26px, 1.3rem + 1vw, 34px); line-height: 1.05;
              letter-spacing: var(--track-heading); color: var(--text); }
  .lms-meta { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .12em; color: var(--muted); }
  .lms-status { margin-top: auto; padding-top: var(--s3); border-top: var(--line) solid var(--border-soft);
                font-size: var(--type-small); color: var(--text-soft); }
  .lms-tile--guide .lms-status { color: var(--text); font-weight: var(--weight-medium); }
  @media (max-width: 1000px) { .lms-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) { .lms-grid { grid-template-columns: repeat(2, 1fr); } .lms-tile { min-height: 130px; } }

  /* ---- quoted feedback ------------------------------------------------- */
  /* A line the learner actually reads, set off with the same 2px rule the
     step pane uses for a hint. Ink and paper only. */
  .quote-block { border-left: 2px solid var(--border); padding: var(--s2) 0 var(--s2) var(--s5);
                 margin: var(--s2) 0; max-width: 68ch; }
  .quote-block p { color: var(--text); font-size: 17px; line-height: 1.5; }
  .quote-block cite { display: block; margin-top: var(--s2); font-style: normal;
                      font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: .08em;
                      text-transform: uppercase; color: var(--muted); }
  .quote-block cite a { color: inherit; }

  /* ---- Learn index ------------------------------------------------------ */
  /* An index of articles, laid out the way a blog is: a picture, the lane and
     the reading time, the title, the promise, the button. Everything except
     the picture is ordinary system furniture.

     THE PICTURES. A product whose claim is "the screens are real, nothing is
     stock" cannot go and buy four photographs for its own blog, so each
     article is given a drawing of its own argument instead: the capture frame
     and its shadow square, hairline strokes, square corners, one hue. The hue
     is ASSIGNED, one per article, and it is the only colour on the card: it
     sets the lane in the meta row, the drawing, and the border and button on
     hover. Four articles, four hues, which is inside this page's licence to
     spend up to four accents on a band. Nothing else in the band takes one.

     Cards are separated by real whitespace rather than sharing hairlines with
     their neighbours: this band is a set of objects to choose between, not a
     table of one thing. Nothing moves on hover; only colour changes. */
  .learn-hue--cyan   { --cover-hue: var(--cyan);   --cover-line: var(--cyan-line); }
  .learn-hue--violet { --cover-hue: var(--violet); --cover-line: var(--violet-line); }
  .learn-hue--green  { --cover-hue: var(--green);  --cover-line: var(--green-line); }
  .learn-hue--yellow { --cover-hue: var(--yellow); --cover-line: var(--yellow-line); }
  .learn-hue--pink   { --cover-hue: var(--pink);   --cover-line: var(--pink-line); }

  .learn-cover { display: block; background: var(--surface-2); color: var(--cover-hue);
                 border-bottom: var(--line) solid var(--border); }
  .learn-cover svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* ---- the featured article -------------------------------------------- */
  .learn-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
                    border: var(--line) solid var(--border); background: var(--surface); }
  .learn-featured-cover { position: relative; display: block; min-width: 0; }
  .learn-featured-cover .learn-cover { height: 100%; border-bottom: 0;
                                       border-right: var(--line) solid var(--border); }
  .learn-featured-cover .learn-cover svg { height: 100%; aspect-ratio: auto; min-height: 300px; }
  /* The flag and the button take the article's own hue rather than the site's
     lead, so a card is one colour from its drawing to its call to action. */
  .learn-flag { position: absolute; top: var(--s4); left: var(--s4);
                background: var(--cover-hue); border-color: var(--cover-hue); color: var(--on-lead); }
  .learn-featured .button--primary { background: var(--cover-hue); border-color: var(--cover-hue);
                                     color: var(--on-lead); }
  .learn-featured .button--primary:hover { background: transparent; color: var(--cover-hue); }
  .learn-featured-body { display: grid; gap: var(--s4); align-content: center;
                         padding: var(--s8) var(--s7); min-width: 0; }
  .learn-featured-body h2 { font-size: clamp(24px, 1.3rem + 1.1vw, 32px); line-height: 1.15;
                            letter-spacing: var(--track-heading); }
  .learn-featured-body h2 a { color: inherit; text-decoration: none; }
  .learn-featured-body h2 a:hover { color: var(--cover-hue); }
  .learn-featured-body .lead { max-width: 46ch; }
  .learn-featured-cta { margin-top: var(--s2); }
  .learn-byline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
                  font-family: var(--font-mono); font-size: var(--type-label);
                  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

  /* ---- the grid --------------------------------------------------------- */
  .learn-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
                gap: var(--s6); margin-top: var(--s6); }
  .learn-card { background: var(--surface); border: var(--line) solid var(--border);
                min-width: 0; display: flex;
                transition: border-color var(--dur-control) var(--ease-settle); }
  .learn-card > a { display: flex; flex-direction: column; flex: 1; min-width: 0;
                    color: inherit; text-decoration: none; }
  .learn-card:hover { border-color: var(--cover-line); }
  .learn-card-body { display: flex; flex-direction: column; gap: var(--s3); flex: 1;
                     padding: var(--s5); }
  .learn-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between;
                     gap: var(--s2) var(--s4); font-family: var(--font-mono);
                     font-size: var(--type-label); letter-spacing: .12em; }
  .learn-cat { color: var(--cover-hue); }
  .learn-time { color: var(--text-dim); white-space: nowrap; }
  .learn-card-title { font-family: var(--font-display); font-weight: var(--weight-semibold);
                      font-size: 17px; line-height: 1.3; letter-spacing: -.02em; color: var(--text); }
  .learn-card > a:hover .learn-card-title { color: var(--cover-hue); }
  .learn-card-dek { color: var(--text-soft); font-size: var(--type-small); line-height: 1.55; }

  /* The button is a span inside the card's one link, so the whole card stays a
     single target and no nested anchor is written. It carries the button's
     shape and the article's hue on hover. */
  .learn-cta { align-self: flex-start; margin-top: auto; padding: 6px 11px;
               border: var(--line) solid var(--border-strong); color: var(--text);
               font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-medium);
               letter-spacing: -.01em; line-height: 1.25;
               transition: border-color var(--dur-control) var(--ease-settle),
                           color var(--dur-control) var(--ease-settle); }
  .learn-card > a:hover .learn-cta { border-color: var(--cover-hue); color: var(--cover-hue); }

  @media (max-width: 1000px) {
    .learn-featured { grid-template-columns: 1fr; }
    .learn-featured-cover .learn-cover { border-right: 0;
                                         border-bottom: var(--line) solid var(--border); }
    .learn-featured-cover .learn-cover svg { min-height: 0; aspect-ratio: 16 / 7; }
    .learn-featured-body { padding: var(--s6) var(--s5); }
    .learn-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .learn-grid { grid-template-columns: 1fr; gap: var(--s5); }
  }

  /* ---- Guides index ----------------------------------------------------- */
  /* The Learn index draws a picture for each article because an essay has no
     shape of its own. A guide does: it is a numbered procedure, and the honest
     picture of one is the procedure itself. So nothing here is drawn. The
     build reads each guide, takes the headings that have a step list under
     them, counts the steps in each, and lays that out -- which means the index
     cannot claim a stage the guide does not have, or a count it does not
     reach. Reference headings (Before you start, Common failures) carry no
     procedure and never appear.

     One accent in the band, the lead hue, and it goes on the ordinals: they
     are counts the build knows, the same argument the homepage's four ordinals
     make. Status keeps its own vocabulary -- the green TESTED pill and the
     yellow dashed one -- because that is what those pills mean everywhere
     else. No hue is spent on anything a person wrote. */
  .guide-lead { border: var(--line) solid var(--border); background: var(--surface);
                box-shadow: inset 0 2px 0 var(--accent); }
  .guide-lead-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
                     gap: clamp(24px, 4vw, 56px); padding: var(--s7) var(--s6);
                     border-bottom: var(--line) solid var(--border); }
  .guide-lead-copy { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
  .guide-lead-copy h2 { font-size: clamp(24px, 1.3rem + 1.1vw, 32px); line-height: 1.15;
                        letter-spacing: var(--track-heading); }
  .guide-lead-copy h2 a { color: inherit; text-decoration: none; }
  .guide-lead-copy h2 a:hover { color: var(--lead); }
  .guide-lead-side { display: grid; gap: var(--s4); align-content: start; }
  .guide-lead-meta { font-family: var(--font-mono); font-size: var(--type-small);
                     color: var(--text-soft); }
  .guide-lead-side .learn-byline { gap: var(--s1) var(--s5); }

  /* The stage track: the guide's own shape, at a glance. Hairlines come from
     the grid gap over a border-coloured container, so no cell draws its own. */
  .guide-track { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr);
                 gap: var(--line); background: var(--border); }
  .guide-track > li { background: var(--surface); padding: var(--s5) var(--s4) var(--s4);
                      display: grid; gap: var(--s2); align-content: start; min-width: 0; }
  .guide-ord { font-family: var(--font-mono); font-size: 22px; line-height: 1;
               color: var(--lead); }
  .guide-stage { color: var(--text); font-size: var(--type-small); font-weight: var(--weight-medium);
                 line-height: 1.35; }
  .guide-steps { font-family: var(--font-mono); font-size: var(--type-label);
                 letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

  /* ---- the publishing guides ------------------------------------------- */
  .guide-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
                gap: var(--s6); margin-top: var(--s6); }
  .guide-card { background: var(--surface); border: var(--line) solid var(--border);
                min-width: 0; display: flex;
                transition: border-color var(--dur-control) var(--ease-settle); }
  .guide-card > a { display: flex; flex-direction: column; gap: var(--s4); flex: 1; min-width: 0;
                    padding: var(--s6) var(--s5) var(--s5); color: inherit; text-decoration: none; }
  .guide-card:hover { border-color: var(--border-strong); }
  /* Same two rules the LMS grid uses: a solid accent along the top means a
     guide exists for this platform, a dashed one means it is written but not
     yet run end to end. The pill says which; the rule says it from across the
     page. */
  .guide-card--tested { box-shadow: inset 0 2px 0 var(--accent); }
  .guide-card--more { box-shadow: none; border-top: 2px dashed var(--border-dashed); }
  .guide-card-head { display: flex; flex-wrap: wrap; align-items: center;
                     justify-content: space-between; gap: var(--s3); }
  .guide-platform { font-family: var(--font-display); font-weight: var(--weight-bold);
                    font-size: clamp(22px, 1.1rem + 1vw, 28px); line-height: 1.05;
                    letter-spacing: var(--track-heading); color: var(--text); }
  .guide-card > a:hover .guide-open { text-decoration: underline; text-underline-offset: 3px; }
  .guide-card-dek { color: var(--text-soft); font-size: var(--type-small); line-height: 1.55; }

  /* The same stages, stacked: an ordinal in the gutter, the stage, its weight. */
  .guide-mini { list-style: none; display: grid; gap: var(--s2);
                border-top: var(--line) solid var(--border-soft); padding-top: var(--s4); }
  .guide-mini > li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
                     gap: var(--s3); align-items: baseline; }
  .guide-mini .guide-ord { font-size: var(--type-small); }
  .guide-mini .guide-stage { font-weight: var(--weight-regular); color: var(--text-soft); }
  .guide-mini .guide-steps { white-space: nowrap; }
  .guide-names { font-family: var(--font-mono); font-size: var(--type-label); line-height: 1.9;
                 letter-spacing: .08em; color: var(--muted);
                 border-top: var(--line) solid var(--border-soft); padding-top: var(--s4); }
  .guide-card-foot { margin-top: auto; padding-top: var(--s4);
                     border-top: var(--line) solid var(--border-soft);
                     display: flex; flex-wrap: wrap; align-items: baseline;
                     justify-content: space-between; gap: var(--s2) var(--s4);
                     font-family: var(--font-mono); font-size: var(--type-label);
                     letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  .guide-open { color: var(--text); }

  @media (max-width: 1100px) {
    .guide-track { grid-template-columns: repeat(3, 1fr); }
    .guide-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 820px) {
    .guide-lead-head { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6) var(--s5); }
  }
  @media (max-width: 640px) {
    .guide-track { grid-template-columns: repeat(2, 1fr); }
    .guide-grid { grid-template-columns: 1fr; gap: var(--s5); }
  }

  /* ---- figures: shots, clips, pairs, strips, diagrams -------------------- */
  /* One frame vocabulary for every picture on the site, and it is the same
     one the walkthrough placeholder already uses: a hairline box on the raised
     surface, the mark, and a mono line underneath. A figure whose file has not
     been captured yet renders the empty frame and the capture instruction
     rather than nothing, so a page can be written before its picture exists
     and needs no edit when the file lands.

     No shadow, no radius, no cropping tricks. A screenshot is evidence, and
     evidence is shown square and whole. The caption is mono because it is a
     label on an artefact, not a sentence in the prose. */
  .figure { display: grid; gap: var(--s3); margin: var(--s7) 0; }
  .guide .figure, .prose .figure { margin: var(--s6) 0; }
  .fig-frame { position: relative; display: grid; place-items: center; margin: 0;
               background: var(--surface); border: var(--line) solid var(--border);
               overflow: hidden; min-width: 0; }
  .fig-frame img, .fig-clip { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fig-frame--diagram { aspect-ratio: auto; padding: var(--s6) var(--s5); background: var(--surface); }
  /* A diagram that declares its own width renders at that size and the CSS px in
     .d-h/.d-t/.d-lab are literal: 1 user unit = 1 device px, hairlines land on
     whole pixels, and diagram text sits in the same type scale as the page around
     it. Stretching a 720-unit drawing across a 1198px column instead scaled its
     12px labels to 20px — larger than the h3 above them. A diagram with no width
     attribute still fills the frame, so this is additive. */
  .fig-frame--diagram svg { display: block; width: auto; max-width: 100%; height: auto; }
  .fig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
             gap: var(--line); background: var(--border);
             border: var(--line) solid var(--border); }
  .fig-row .fig-frame { border: 0; }
  .figure--strip .fig-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  /* A strip whose frames have to be read rather than glanced at: fixed columns
     so six screens land as two rows of three at ~412px instead of one row of
     six at ~206px. Steps down before the frames get small again.

     These are separate cards, not one tiled surface. The default .fig-row is a
     hairline grid — a --border background showing through a 1px gap — which
     reads as one object cut into panes. Six unrelated products are six objects,
     so the background and the shared border come off and each frame carries its
     own, with real space between them. */
  .figure--strip .fig-row--3 { grid-template-columns: repeat(3, 1fr);
          gap: var(--s5); background: none; border: 0; }
  .figure--strip .fig-row--2 { grid-template-columns: repeat(2, 1fr);
          gap: var(--s4); background: none; border: 0; }
  .fig-shot { display: grid; gap: var(--s3); margin: 0; min-width: 0; }
  .fig-shot .fig-frame { border: var(--line) solid var(--border); }
  /* Outside the frame, so it needs no plate and no hairline to hold it off the
     screenshot, and it can take the caption colour rather than the dim one. */
  .fig-shot-label { font-family: var(--font-mono); font-size: var(--type-label);
          letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
          line-height: 1.4; }

  /* The empty state. It says which picture is coming and, in the shoot line,
     exactly what has to be captured; the page is its own shot list. */
  .fig-frame--empty { background: var(--surface-2); border-style: dashed;
                      border-color: var(--border-dashed); gap: var(--s3);
                      align-content: center; padding: var(--s5); text-align: center; }
  .fig-row .fig-frame--empty { border: 0; border-top: 2px dashed var(--border-dashed); }
  .fig-frame--empty .brand-mark { --mark-size: 24px; --mark-hue: var(--text-off);
                                  --mark-shadow: var(--hairline); }
  .fig-frame-label { font-family: var(--font-mono); font-size: var(--type-label);
                     letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
                     max-width: 30ch; line-height: 1.6; }
  .fig-row .fig-frame > .fig-frame-label { position: absolute; left: var(--s4); bottom: var(--s4);
                                           background: var(--surface); padding: 4px 8px;
                                           border: var(--line) solid var(--border); }
  .fig-cap { display: grid; gap: var(--s1); color: var(--text-soft); font-size: var(--type-small);
             max-width: 74ch; }
  .fig-cap .label { color: var(--text-dim); }
  .figure--waiting .fig-cap .label { color: var(--pill-draft-text); }
  .fig-cap-text { color: var(--text); }
  .fig-shoot { color: var(--muted); font-size: var(--type-small); line-height: 1.55;
               padding-left: var(--s4); border-left: 2px solid var(--border); }
  .figure--clip .fig-clip { object-fit: contain; background: var(--base); }

  /* A figure that sits beside prose rather than under it. */
  .figure--inset { max-width: 620px; }
  @media (max-width: 900px) {
    .figure--strip .fig-row--3 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .fig-row { grid-template-columns: 1fr; }
    .figure--strip .fig-row--3 { grid-template-columns: 1fr; }
  }

  /* ---- diagrams --------------------------------------------------------- */
  /* Drawn figures carry no styling of their own: every fill, stroke and face
     comes from these classes, so a diagram follows the theme the way the rest
     of the page does and no hex value is written inside an SVG. Squares only,
     hairlines only, and the lead hue reserved for the thing being counted. */
  .fig-frame--diagram text { font-family: var(--font-sans); }
  .d-h { font-size: 13px; font-weight: var(--weight-semibold); fill: var(--text); letter-spacing: -.01em; }
  .d-t { font-size: 12px; fill: var(--text-soft); }
  .d-t.d-dim { fill: var(--text-dim); }
  .d-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; fill: var(--text-dim); }
  .d-m { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-soft); }
  .d-n { font-family: var(--font-mono); font-size: 12px; fill: var(--lead); }
  .d-box { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
  .d-box--lead { stroke: var(--lead); }
  .d-box--draft { stroke: var(--border-dashed); stroke-dasharray: 5 4; }
  .d-line { stroke: var(--border-strong); stroke-width: 1; fill: none; }
  .d-line--soft { stroke: var(--border); }
  .d-mark { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
  .d-mark--on { fill: var(--lead); stroke: var(--lead); }
  .d-mark--green { fill: var(--green); stroke: var(--green); }
  .d-mark--yellow { fill: var(--yellow); stroke: var(--yellow); }
  .d-mark--pink { fill: var(--pink); stroke: var(--pink); }
  .d-rule--green { fill: var(--green); }
  .d-rule--yellow { fill: var(--yellow); }
  .d-rule--pink { fill: var(--pink); }

/* Launch layout: a concise homepage using the existing Spectrum system. */
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; background: var(--surface); color: var(--text); padding: 12px 20px; border: 1px solid var(--primary); }
.skip-link:focus { top: 12px; }
.launch-hero { padding-top: clamp(48px, 7vw, 100px); padding-bottom: clamp(48px, 7vw, 100px); }
.launch-hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.launch-copy { display: grid; gap: 24px; }
.launch-copy > .label { color: var(--primary); }
.launch-copy h1 { font-size: clamp(38px, 4.1vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
.launch-copy .lead { max-width: 42ch; font-size: 18px; }
.launch-preview { margin: 0; min-width: 0; }
.launch-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.launch-preview figcaption { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.launch-preview figcaption a { display: inline-block; }
.launch-section { --section-y: clamp(48px, 6vw, 80px); }
.launch-section .section-head { margin-bottom: 32px; }
.launch-section .pass { padding: 28px; }
.launch-section .pass h3 { margin: 14px 0; }
.launch-text-link { margin-top: 24px; font-size: 14px; }
.launch-benefits { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.launch-benefits .fact-list { margin: 0; }
.launch-benefits .faq { max-width: none; }
.launch-close { display: grid; gap: 24px; max-width: 720px; text-align: center; }
.launch-close .hero-actions { justify-content: center; }
.launch-close .lead { max-width: 50ch; margin: 0 auto; }
.launch-example { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.launch-example img { width: 100%; height: auto; border: 1px solid var(--border); }
.launch-example-copy { display: grid; gap: 20px; }
@media (max-width: 1100px) { .mk-nav { gap: 20px; flex-wrap: wrap; } .mk-links { gap: 20px; } }
@media (max-width: 820px) {
  .launch-hero-grid, .launch-benefits, .launch-example { grid-template-columns: 1fr; }
  .launch-copy h1 { font-size: clamp(30px, 8.4vw, 54px); }
  .launch-preview { max-width: 620px; }
  .mk-nav { padding: 16px 24px; }
  .site-header .brand-lockup .brand-word { display: inline; }
  .mk-links { display: flex; flex-wrap: wrap; order: 3; width: 100%; justify-content: flex-start; gap: 12px 24px; }
  .mk-actions { margin-left: auto; }
  .launch-benefits { gap: 8px; }
}
@media (max-width: 480px) {
  .mk-brand .pill { display: none; }
  .mk-actions { gap: 12px; }
  .mk-actions .button { padding: 8px 10px; font-size: 12px; }
  .mk-actions .nav-link { font-size: 12px; }
  .site-header .brand-lockup .brand-word { display: inline; font-size: 14px; }
  .mk-actions > .nav-link { display: none; }
  .mk-links { gap: 12px 18px; }
  .mk-links .nav-link { font-size: 12px; }
  .mk-nav { gap: 14px 8px; }
  .launch-copy .hero-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.launch-disclosure { margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.launch-disclosure summary { cursor: pointer; font-weight: 600; }
.launch-disclosure[open] summary { margin-bottom: 20px; }
.launch-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; padding-left: 20px; }
/* Long platform labels and API fields must not widen the page on phones. */
.guide, .prose { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.guide > *, .prose > * { min-width: 0; }