/* Element Education design system - The Exploded View.
   Single source of truth. See DESIGN.md. Do not fork per page. */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --sheet: #F2F5F7;
    --sheet-sunk: #E7ECF0;
    --graphite: #14181C;
    --graphite-soft: #5A6672;
    --rule: #C3CDD6;
    --signal: #0A63C9;
    --sky: #54B8EE;
    --revision: #C9331B;
    --shipped: #0A7A4D;
    --notice: #F5C518;

    --hair: 0.25rem;
    --xs: 0.5rem;
    --sm: 0.75rem;
    --md: 1.25rem;
    --lg: 2rem;
    --xl: 3.5rem;
    --xxl: 6rem;

    --ease: cubic-bezier(0.2, 0, 0.1, 1);
    --gut: 3rem;
  }

  html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1rem; line-height: 1.6;
    background: var(--sheet); color: var(--graphite);
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- QUALITY FLOOR ---------- */
  :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--signal); }
  .vh {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .skip {
    position: absolute; left: var(--md); top: var(--md); z-index: 99; transform: translateY(-6rem);
    background: var(--graphite); color: var(--sheet);
    padding: var(--sm) var(--md); border-radius: 2px;
    font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    transition: transform 0.15s var(--ease);
  }
  .skip:focus { transform: none; }

  /* ---------- TYPE ---------- */
  .t-display { font-family:'Unbounded',system-ui,sans-serif; font-weight:800; font-size:clamp(2.5rem,6vw,5.5rem); line-height:0.92; letter-spacing:-0.035em; }
  .t-headline { font-family:'Unbounded',system-ui,sans-serif; font-weight:700; font-size:clamp(1.625rem,3.4vw,2.625rem); line-height:1.05; letter-spacing:-0.02em; }
  .t-title { font-family:'Unbounded',system-ui,sans-serif; font-weight:600; font-size:1.0625rem; line-height:1.3; letter-spacing:-0.01em; }
  .t-body { font-size:1rem; font-weight:400; line-height:1.6; max-width:68ch; }
  .t-lead { font-size:1.125rem; font-weight:400; line-height:1.55; max-width:58ch; }
  .t-label { font-size:0.6875rem; font-weight:500; line-height:1.2; letter-spacing:0.14em; text-transform:uppercase; }
  .t-data { font-size:0.8125rem; font-weight:500; line-height:1.4; letter-spacing:0.01em;
            font-feature-settings:'tnum' 1,'zero' 1; font-variant-numeric: tabular-nums slashed-zero; }
  .muted { color: var(--graphite-soft); }

  /* .sheet owns the horizontal gutter only. It must never touch the block axis,
     or its class specificity silently zeroes a section's vertical rhythm. */
  .sheet { max-width: 77.5rem; margin: 0 auto; padding-inline: var(--gut); }

  /* ---------- NAV ---------- */
  .topbar { border-bottom: 1px solid var(--graphite); background: var(--sheet); }
  .topbar-in {
    max-width: 77.5rem; margin: 0 auto; padding: var(--md) var(--gut);
    display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  }
  .brand { display:flex; align-items:center; gap:var(--xs); text-decoration:none; color:var(--graphite); min-height:2.75rem; }
  .brand svg { width:1.625rem; height:1.625rem; display:block; }
  .brand span { font-family:'Unbounded',sans-serif; font-weight:700; font-size:0.9375rem; letter-spacing:-0.01em; }
  .navlinks { display:flex; align-items:center; gap:var(--lg); list-style:none; }
  .navlinks a {
    color: var(--graphite-soft); text-decoration:none;
    display:inline-flex; align-items:center; min-height:2.75rem;
  }
  .navlinks a:hover { color: var(--graphite); }
  .navlinks a[aria-current="page"] { color: var(--graphite); border-bottom: 2px solid var(--signal); }
  .hamburger {
    display:none; width:2.75rem; height:2.75rem; align-items:center; justify-content:center;
    background:none; border:1px solid var(--graphite); border-radius:2px; cursor:pointer;
  }
  .hamburger span { display:block; width:1rem; height:1px; background:var(--graphite); position:relative; }
  .hamburger span::before, .hamburger span::after {
    content:''; position:absolute; left:0; width:1rem; height:1px; background:var(--graphite);
  }
  .hamburger span::before { top:-5px; } .hamburger span::after { top:5px; }

  .drawer { display:none; }
  .drawer[data-open="true"] { display:block; position:fixed; inset:0; z-index:60; background:var(--sheet); overflow-y:auto; }
  .drawer-in { padding: var(--md) var(--md) var(--xxl); }
  .drawer-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:var(--md); border-bottom:1px solid var(--graphite); }
  .drawer-close { width:2.75rem; height:2.75rem; background:none; border:1px solid var(--graphite); border-radius:2px; cursor:pointer; font-size:1.125rem; color:var(--graphite); }
  .drawer ul { list-style:none; margin-top:var(--md); }
  .drawer li { border-bottom:1px solid var(--rule); }
  .drawer li a { display:block; padding:var(--md) 0; text-decoration:none; color:var(--graphite); font-family:'Unbounded',sans-serif; font-weight:600; font-size:1.0625rem; }
  .drawer .btn { margin-top:var(--md); width:100%; justify-content:center; }
  .drawer .btn + .btn { margin-top:var(--xs); }

  /* ---------- BUTTONS ---------- */
  .btn {
    font-family:'Unbounded',sans-serif; font-weight:600; font-size:1.0625rem; letter-spacing:-0.01em;
    border-radius:2px; border:1px solid transparent; padding:1rem 1.75rem; min-height:2.75rem;
    cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:var(--xs);
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
  }
  .btn-primary { background:var(--revision); color:var(--sheet); }
  .btn-primary:hover { background:var(--graphite); }
  .btn-secondary { background:var(--sheet); color:var(--graphite); border-color:var(--graphite); }
  .btn-secondary:hover { background:var(--sheet-sunk); }
  /* Standalone text actions still clear the 44px hit area. The underline
     thickens via text-decoration, which reflows nothing. */
  /* Inline by default: a link inside a sentence must not inflate the line box,
     and WCAG exempts inline links from the target-size minimum. */
  .link-action {
    color:var(--signal); font-weight:500;
    text-decoration:underline; text-decoration-color:var(--signal);
    text-decoration-thickness:1px; text-underline-offset:4px;
    transition:text-decoration-thickness 0.12s var(--ease);
  }
  /* Standalone actions do take the 44px target. */
  .hero-actions .link-action,
  .rlist h3 > .link-action,
  .link-action--block {
    display:inline-flex; align-items:center; min-height:2.75rem;
  }
  .link-action:hover { text-decoration-thickness:2px; }

  /* ---------- TITLE BLOCK / HERO ---------- */
  .hero { padding-block: var(--xl) var(--xxl); border-bottom: 1px solid var(--graphite); }
  .hero-grid { display:grid; grid-template-columns: 2fr 1fr; gap: var(--xl); align-items:start; }
  .hero-eyebrow { color:var(--signal); display:block; margin-bottom:var(--md); }
  .hero h1 { margin-bottom: var(--md); }
  .hero .t-lead { color: var(--graphite-soft); margin-bottom: var(--lg); }
  /* The primary action and its secondary link need clear separation, not a tight
     pair. Row gap is smaller because stacked buttons already read as separate. */
  .hero-actions { display:flex; flex-wrap:wrap; gap:var(--md) var(--xl); align-items:center; }

  .specblock { border:1px solid var(--graphite); }
  .specblock-head { background:var(--graphite); color:var(--sheet); padding:var(--xs) var(--md); }
  .specrow { display:grid; grid-template-columns:1fr auto; gap:var(--md); padding:var(--sm) var(--md); border-bottom:1px solid var(--rule); align-items:baseline; }
  .specrow:last-child { border-bottom:none; }
  .specrow dt { color:var(--graphite-soft); }
  .specrow dd { text-align:right; }
  .specrow .big { font-family:'Unbounded',sans-serif; font-weight:700; font-size:1rem; letter-spacing:-0.01em; }

  /* ---------- Corrected price ----------
     Drawn the way a spec sheet marks a superseded value: the old figure stays
     legible with a vermilion line struck through it, the new one sits beside it.
     The strike is a genuine change mark, which is what Revision Vermilion is for. */
  /* The superseded figure keeps the size and weight it had before it was voided,
     so the reader compares like with like. Only its colour steps back. */
  .was {
    position: relative; color: var(--graphite-soft);
    text-decoration: none; margin-right: 0.5em;
  }
  /* Struck from the top left down to the bottom right, so the line descends the
     way the price does. The old figure reads as marked down, not up. The keyword gradient pins the line to the opposite corners, so
     it spans the figure at any width or type size without a hand-set angle. The
     weight is set in em, so it stays proportional on the 2.25rem pricing cards
     rather than thinning out against them. */
  .was::after {
    content: ''; position: absolute; inset: -0.06em -0.04em; pointer-events: none;
    background: linear-gradient(to top right,
      transparent calc(50% - 0.12em), var(--revision) calc(50% - 0.12em),
      var(--revision) calc(50% + 0.12em), transparent calc(50% + 0.12em));
  }
  .now { color: var(--graphite); }
  /* At 2.25rem the pair is wide enough to force the card past its column, so the
     oversized figures get room to wrap. The smaller ones stay inline, where the
     markup's own whitespace keeps "one time" off the price. */
  .amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.1em; }

  /* Verified quantities belong in the title block, not in a banner of their own. */
  .hero-ledger { display:grid; gap:var(--md); align-content:start; }
  .proofstat { padding:var(--md); border-bottom:1px solid var(--rule); }
  .proofstat .figure {
    display:block; font-family:'Unbounded',sans-serif; font-weight:800;
    font-size:clamp(1.75rem,2.4vw,2.25rem); line-height:1; letter-spacing:-0.03em;
    margin-bottom:var(--xs);
  }
  .proofstat .figure .hl { color:var(--signal); }
  .proofdate { padding:var(--sm) var(--md); }

  /* ---------- SECTIONS ---------- */
  section { padding-block: var(--xxl); }
  .sec-head { margin-bottom: var(--md); }
  .sec-head .t-label { color:var(--signal); display:block; margin-bottom:var(--xs); }
  .sec-head h2 { margin-bottom:var(--sm); }
  .sec-head::after { content:''; display:block; width:100%; height:3px; background:var(--signal); margin-top:var(--md); }

  /* ---------- ASSEMBLY ---------- */
  .assembly { position:relative; margin-top: var(--lg); }
  .asm-row { display:grid; grid-template-columns:1fr 5rem 1fr; align-items:center; min-height:4.5rem; }
  .asm-part { justify-self:end; text-align:right; max-width:26rem; }
    /* The axis is drawn per cell so it tracks the grid instead of a fixed 50%. */
  .asm-gutter { position:relative; height:100%; }
  .asm-gutter::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--signal); transform:translateX(-1px); }
  /* The leader runs from the chip out to the ledger only. It used to span the
     full gutter, which put a stub between the part title and its own number,
     pointing at nothing. A leader should have one end and one destination. */
  .asm-gutter--lead::before { content:''; position:absolute; left:50%; right:-0.5rem; top:50%; height:1px; background:var(--graphite-soft); }
  .chip {
    display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem;
    background:var(--signal); color:var(--sheet); font-family:'Unbounded',sans-serif; font-weight:700;
    font-size:0.75rem; font-feature-settings:'tnum' 1;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  }
  .chip-shipped { background:var(--sky); color:var(--graphite); }
  .asm-ledger { padding:var(--sm) 0 var(--sm) var(--md); display:flex; align-items:baseline; gap:var(--sm); flex-wrap:wrap; }
  .phase-band { display:grid; grid-template-columns:1fr 5rem 1fr; align-items:stretch; margin:var(--xl) 0 var(--sm); min-height:2.5rem; }
  .phase-band .pb-label {
    justify-self:stretch; align-self:center; text-align:right;
    background:var(--signal); color:var(--sheet);
    padding:var(--xs) var(--sm); border:none;
  }
  .stamp { display:inline-flex; align-items:center; gap:var(--hair); border:2px solid var(--shipped); color:var(--shipped); padding:3px var(--xs); font-size:0.6875rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }

  /* ---------- RULED TABLES ---------- */
  .tbl { display:grid; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--lg); }
  .tbl-3 { grid-template-columns:repeat(3,1fr); }   /* 6 cells */
  .tbl-2 { grid-template-columns:repeat(2,1fr); }   /* 4 cells */
  .cell { background:var(--sheet); padding:var(--md); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .cell .ico { display:block; margin-bottom:var(--sm); color:var(--signal); }
  .cell .ico svg { width:1.5rem; height:1.5rem; display:block; }
  .cell h3 { margin-bottom:var(--hair); }
  .cell p { font-size:0.9375rem; color:var(--graphite-soft); line-height:1.55; }

  /* ---------- TERMS ---------- */
  .terms { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--lg); }
  .terms .cell { display:flex; flex-direction:column; gap:var(--hair); }
  .terms .val { font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.375rem; letter-spacing:-0.02em; font-feature-settings:'tnum' 1; }
  .terms .val small { font-family:'DM Sans',sans-serif; font-weight:400; font-size:0.875rem; letter-spacing:0; color:var(--graphite-soft); }

  /* ---------- INSTRUCTOR ---------- */
  .who { display:grid; grid-template-columns:1fr 1fr; gap:var(--xl); align-items:start; margin-top:var(--lg); }
  .who-facts { border:1px solid var(--rule); }
  .who-facts .specrow:last-child { border-bottom:none; }

  /* ---------- QUOTES ---------- */
  .quotes { display:grid; gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); grid-template-columns:repeat(3,1fr); margin-top:var(--lg); }
  .quote { background:var(--sheet); padding:var(--md); display:flex; flex-direction:column; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .quote blockquote { font-size:0.9375rem; line-height:1.6; margin-bottom:var(--md); }
  .quote figcaption { margin-top:auto; }

  /* ---------- PROMPT ---------- */
  .prompt-wrap { border:1px solid var(--graphite); margin-top:var(--lg); }
  .prompt-head { background:var(--graphite); color:var(--sheet); padding:var(--sm) var(--md); display:flex; justify-content:space-between; align-items:center; gap:var(--md); flex-wrap:wrap; }
  .prompt-body { padding:var(--md); }
  details.prompt > summary {
    cursor:pointer; list-style:none; padding:var(--sm) 0; min-height:2.75rem;
    display:flex; align-items:center; gap:var(--xs); color:var(--signal); font-weight:500;
  }
  details.prompt > summary::-webkit-details-marker { display:none; }
  details.prompt > summary::after { content:'+'; font-family:'Unbounded',sans-serif; font-weight:700; }
  details.prompt[open] > summary::after { content:'–'; }
  .prompt-text {
    background:var(--sheet-sunk); border:1px solid var(--rule); padding:var(--md);
    max-height:26rem; overflow:auto; white-space:pre-wrap; font-size:0.8125rem; line-height:1.55;
  }
  .prompt-text:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }

  /* ---------- CTA ---------- */
  .cta { border-top:1px solid var(--graphite); border-bottom:1px solid var(--graphite); padding-block:var(--xxl); }
  .cta-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--xl); align-items:end; }

  /* ---------- FOOTER ---------- */
  footer { padding-block: var(--xl) var(--xxl); }
  .foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); gap:var(--lg); }
  .foot-col h3 { margin-bottom:var(--sm); color:var(--graphite-soft); }
  .foot-col ul { list-style:none; }
  .foot-col li a { display:inline-flex; align-items:center; min-height:2.75rem; color:var(--graphite); text-decoration:none; font-size:0.9375rem; }
  .foot-col li a:hover { color:var(--signal); }
  .foot-base { margin-top:var(--xl); padding-top:var(--md); border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:var(--md); flex-wrap:wrap; }

  /* ---------- REVEAL ---------- */
  .js-motion .rv { opacity:0; transform:translateY(0.75rem); }
  .js-motion .rv.in { opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .js-motion .rv { opacity:1 !important; transform:none !important; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 960px) {
    :root { --gut: 1.25rem; }
    .navlinks { display:none; }
    .hamburger { display:inline-flex; }
    .hero-grid, .who, .cta-grid { grid-template-columns:1fr; gap:var(--lg); }
    .terms { grid-template-columns:1fr; }
    .tbl-3 { grid-template-columns:repeat(2,1fr); }
    .quotes { grid-template-columns:1fr; }
    section { padding-block: var(--xl); }
    /* Stacked layout draws ONE axis for the whole assembly. Per-row segments
       stop at each row's content box, so the row padding left visible breaks in
       the line at every item and every phase change. */
    .assembly::before {
      content:''; position:absolute; left:1.5rem; top:0; bottom:0;
      width:2px; background:var(--signal); transform:translateX(-1px);
    }
    .asm-row { grid-template-columns:3.5rem 1fr; min-height:0; padding:var(--sm) 0; }
    .asm-part { grid-column:2; order:1; justify-self:start; text-align:left; max-width:none; }
    .asm-gutter { grid-column:1; grid-row:1 / span 2; }
    .asm-gutter::after { display:none; }
    /* No leader on mobile: the part and its ledger are both stacked to the right
       of the axis, so the leader has nothing to span. It was landing at 50% of a
       two-row cell, which put a hairline through the second line of wrapped copy. */
    .asm-gutter--lead::before { display:none; }
    .asm-gutter .chip { left:1.5rem; top:1.75rem; }
    .asm-ledger {
      grid-column:2; order:2; padding:0;
      display:grid; grid-template-columns:1fr auto; gap:var(--hair) var(--sm); align-items:baseline;
    }
    .asm-ledger .dl { grid-column:1 / -1; }
    .phase-band { grid-template-columns:3.5rem 1fr; }
    .phase-band .pb-label { grid-column:2; justify-self:start; text-align:left; }
  }

  /* Declared after the 960 block so these narrower rules win the cascade. */
  @media (max-width: 640px) {
    .tbl-2, .tbl-3 { grid-template-columns:1fr; }
  }

  /* ---------- FAQ (shared across pages) ---------- */
  .faq { border-top:1px solid var(--graphite); margin-top:var(--lg); max-width:68ch; }
  .faq details { border-bottom:1px solid var(--rule); }
  .faq summary {
    cursor:pointer; list-style:none; padding:var(--md) 0; min-height:2.75rem;
    display:flex; align-items:center; gap:var(--md);
    font-family:'Unbounded',sans-serif; font-weight:600; font-size:1.0625rem; letter-spacing:-0.01em;
  }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:'+'; margin-left:auto; color:var(--signal); font-weight:700; }
  .faq details[open] summary::after { content:'\2013'; }
  .faq .faq-a { padding:0 0 var(--md); max-width:64ch; color:var(--graphite-soft); }

  /* ---------- Price options ---------- */
  .prices { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--lg); }
  .price { background:var(--sheet); padding:var(--md); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .price .amt { font-family:'Unbounded',sans-serif; font-weight:800; font-size:2.25rem; letter-spacing:-0.03em; line-height:1; margin:var(--xs) 0 var(--hair); font-feature-settings:'tnum' 1; }
  .price.is-best { background:var(--sheet-sunk); }

  /* ---------- Simple ruled list ---------- */
  .rlist { border-top:1px solid var(--graphite); margin-top:var(--lg); }
  .rlist > li { list-style:none; display:grid; grid-template-columns:3.5rem 1fr; gap:var(--md); padding:var(--md) 0; border-bottom:1px solid var(--rule); align-items:start; }
  .rlist .n { font-family:'Unbounded',sans-serif; font-weight:700; font-size:0.75rem; color:var(--signal); font-feature-settings:'tnum' 1; padding-top:0.25rem; }
  .rlist h3 { margin-bottom:var(--hair); }
  .rlist p { color:var(--graphite-soft); max-width:62ch; }

  @media (max-width: 640px) {
    .prices { grid-template-columns:1fr; }
  }

  /* ---------- Forms (shared) ---------- */
  .form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--md); margin-top:var(--lg); }
  .field { display:flex; flex-direction:column; gap:var(--hair); }
  .field.wide { grid-column:1 / -1; }
  .field label { color:var(--graphite-soft); }
  .field input, .field select, .field textarea {
    font-family:inherit; font-size:1rem; color:var(--graphite);
    background:transparent; border:none; border-bottom:1px solid var(--rule);
    padding:var(--xs) 0; border-radius:0; min-height:2.75rem; width:100%;
  }
  .field textarea { min-height:8rem; resize:vertical; }
  .field select { cursor:pointer; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline:none; border-bottom:2px solid var(--signal);
  }
  .field:focus-within label { color:var(--signal); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow:none; }
  .field.is-error input, .field.is-error select, .field.is-error textarea { border-bottom:2px solid var(--revision); }
  .field.is-error label, .field .err { color:var(--revision); }
  .err { font-size:0.8125rem; }
  .form-note { margin-top:var(--md); color:var(--graphite-soft); }
  .form-status { margin-top:var(--md); padding:var(--sm) var(--md); border:1px solid var(--rule); display:none; }
  .form-status[data-state="ok"] { display:block; border-color:var(--shipped); color:var(--shipped); }
  .form-status[data-state="err"] { display:block; border-color:var(--revision); color:var(--revision); }

  /* ---------- Phase group (tools / deliverables) ---------- */
  .phase { margin-top:var(--xl); }
  .phase-head { display:flex; align-items:baseline; gap:var(--md); flex-wrap:wrap; padding-bottom:var(--xs); border-bottom:3px solid var(--signal); }
  .phase-head h3 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.375rem; letter-spacing:-0.02em; }

  @media (max-width: 640px) {
    .form-grid { grid-template-columns:1fr; }
  }

  /* A lone final cell spans its row, so an odd count still reads as a full table. */
  .tbl-2 > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tbl-3 > .cell:last-child:nth-child(3n+1) { grid-column: 1 / -1; }

  /* ---------- Tool switch (Claude Code / Codex) ---------- */
  .toolset { display:flex; gap:0; border:1px solid var(--graphite); margin-top:var(--lg); width:fit-content; }
  .toolset button {
    font-family:'Unbounded',sans-serif; font-weight:600; font-size:0.9375rem; letter-spacing:-0.01em;
    background:var(--sheet); color:var(--graphite-soft); border:none; cursor:pointer;
    padding:0.875rem 1.5rem; min-height:2.75rem; border-radius:0;
    transition:background 0.12s var(--ease), color 0.12s var(--ease);
  }
  .toolset button + button { border-left:1px solid var(--graphite); }
  .toolset button[aria-pressed="true"] { background:var(--signal); color:var(--sheet); }
  .toolset button:not([aria-pressed="true"]):hover { background:var(--sheet-sunk); color:var(--graphite); }
  .only-codex { display:none; }
  [data-tool="codex"] .only-codex { display:revert; }
  [data-tool="codex"] .only-claude { display:none; }

  /* copy feedback lives on the button itself */
  .copy-note { margin-left:var(--sm); }

  /* ---------- Notice banner ----------
     Yellow is the drawing world's caution colour, so it earns a token rather
     than being a one-off. Graphite on notice is 11:1, comfortably past AA. */
  .promo {
    background: var(--notice); color: var(--graphite);
    border-bottom: 1px solid var(--graphite);
    display: flex; align-items: stretch;
  }
  .promo-viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
  .promo-track {
    display: flex; align-items: center; gap: var(--xxl);
    width: max-content; padding-block: var(--hair);
    animation: promo-scroll 42s linear infinite;
  }
  /* A ~48px band: present enough to read at a glance, short enough that it does
     not eat the fold. WCAG AA asks 24px of the target, so the row can sit under
     the 44px used elsewhere on the site without losing the hit area. */
  .promo-msg {
    white-space: nowrap; color: var(--graphite); text-decoration: none;
    font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: var(--sm); min-height: 2.5rem;
  }
  a.promo-msg { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.promo-msg:hover { text-decoration-thickness: 2px; }
  .promo-msg .go { font-family:'Unbounded',sans-serif; font-weight:700; }
  @keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Motion stops on hover, on keyboard focus, and on demand. Hover and focus are
     scoped to the message itself, NOT the whole banner: the pause control lives
     in the banner too, so a banner-wide rule kept the track paused under the
     pointer and the focus ring that a click leaves behind, and Play never took. */
  .promo-viewport:hover .promo-track,
  .promo-viewport:focus-within .promo-track,
  .promo[data-paused="true"] .promo-track { animation-play-state: paused; }

  .promo-pause {
    flex: 0 0 auto; background: transparent; border: none;
    border-left: 1px solid var(--graphite); color: var(--graphite);
    cursor: pointer; min-height: 2.5rem; min-width: 2.75rem;
    padding-inline: var(--md); font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0;
  }
  .promo-pause:hover { background: rgba(20,24,28,0.08); }

  /* On narrow screens the word costs more width than the message can spare,
     so the control collapses to a glyph. aria-label still carries the meaning. */
  @media (max-width: 640px) {
    .promo-pause { min-width: 2.5rem; padding-inline: 0; font-size: 0; }
    .promo-pause::before { content: '\275A\275A'; font-size: 0.625rem; letter-spacing: 0.06em; }
    .promo-pause[aria-pressed="true"]::before { content: '\25B6'; font-size: 0.75rem; }
  }

  /* Reduced motion gets a static, centred, fully readable line. */
  @media (prefers-reduced-motion: reduce) {
    .promo-track { animation: none; width: 100%; justify-content: center; padding-inline: var(--md); }
    .promo-msg { white-space: normal; }
    .promo-track > [aria-hidden="true"] { display: none; }
    .promo-pause { display: none; }
  }