[data-sl-page] blockquote{margin:0;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;font-style:normal;text-align:inherit;width:auto} /* the shell also centres a bare blockquote at width:70% (measured 16 Sep 2026) */
[data-sl-page] figure{margin:0}
[data-sl-page] figcaption{display:block;text-align:left;margin-top:0;padding:0} /* the site sheet centres figcaption, makes it a table-caption and pads it 0 7px 5px */
[data-sl-page] p,[data-sl-page] a{white-space:normal} /* the site sheet sets p,a{white-space:pre-wrap} under 768px, which keeps source line breaks */
[data-sl-page] a{font-size:inherit} /* the shell's bare a{font-size:19px} reached every small link in a list (the evidence links on the homepage and this page, measured 16 Sep 2026) */

/* ============================================================
   Structural Learning CPD page. Design canon: ~/.claude/design/DESIGN.md
   Ground: white (rule 3, website medium). Accent: teal (brand).
   No decorative edge rails (G8). Teal text under 24px uses --brand-hover (rule 6).
   The five Thinking Framework colours appear ONLY in the section where
   the framework itself is the subject (G12).
   ============================================================ */
/* GENERATED from ~/.claude/design/tokens.json v1.1.0. Do not hand-edit. */
[data-sl-page] {
  --sl-brand: #128770;
  --sl-brand-hover: #0E6B58;
  --sl-brand-deep: #0C5E4E;
  --sl-build: #128770;        /* same value as brand, deliberately. Paul G5 */
  --sl-say: #D35400;
  --sl-map: #3098DA;
  --sl-say-wash: #FBEDE4;
  --sl-map-wash: #E6F1FA;
  --sl-build-wash: #E4F0EC;
  --sl-say-text: #A5430B;
  --sl-map-text: #1C6EA4;
  --sl-build-text: #0C5E4E;
  --sl-tf-green: #128770;
  --sl-tf-blue: #3098DA;
  --sl-tf-yellow: #F1C206;
  --sl-tf-orange: #D35400;
  --sl-tf-red: #C0392B;
  --sl-ink: #24262D;
  --sl-muted: #565E73;
  --sl-faint: #8A8FA0;
  --sl-border: #DFE1E6;
  --sl-border-strong: #D7DAE0;
  --sl-surface: #FFFFFF;
  --sl-ground: #FAF8F5;    /* warm paper. Paul G1. ONE ground, not four */
  --sl-radius-sm: 4px;
  --sl-radius-md: 10px;
  --sl-radius-lg: 14px;
  --sl-radius-pill: 999px;
  --sl-shadow-hover: 0 8px 18px rgba(36, 38, 45, 0.04);
  --sl-font-display: 'Lexend', Inter, ui-sans-serif, system-ui, sans-serif;
  --sl-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- extensions. Each carries the measurement that justifies it. ---------- */
[data-sl-page]{
  /* WHY: the canonical faint grey measures 3.22:1 on white and 3.04:1 on warm
     paper. AA needs 4.5 for text under 24px, and every use of it on this page IS
     small text. This shade measures 4.85 on white and 4.58 on paper. The token
     itself needs raising estate-wide; that is a proposal, not done here. */
  --sl-faint-aa:#6B7185;

  /* WHY: the physical Writer's Block, measured off the Lynk Design drawing
     (75.38 x 44.40mm, ratio 1.70:1). These are the product's own colours, not
     palette choices, so they are named once and never written as a literal
     again. They appear only inside drawings OF the block. */
  --sl-wb-face:#7CC8AE;
  --sl-wb-edge:#6AB89E;
  --sl-wb-panel:#FCFCFA;
  --sl-wb-ink:#1F5C4B;

  /* WHY: one dark band, for the testimonial. tokens.json carries no dark ground,
     so these five are new. Ratios measured against the night ground: ink 14.20,
     muted 6.60, accent 9.10. --sl-night-line is a 1px divider, never text. */
  --sl-night:#1B2028;
  --sl-night-ink:#EDEFF2;
  --sl-night-muted:#9AA6B2;
  --sl-night-line:#2C333D;
  --sl-night-accent:#6FD3B8;

  --sl-gut: clamp(20px, 5vw, 72px);
  --sl-maxw: 1240px;
  color-scheme: light;
}
[data-sl-page] *{box-sizing:border-box}
[data-sl-page]{
  margin:0; background:var(--sl-surface); color:var(--sl-ink);
  font-family:var(--sl-font-body) !important; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[data-sl-page] img{max-width:100%; display:block; height:auto} /* width and height attributes reserve space before load; the CSS box still decides the height */
[data-sl-page] a{color:inherit}
[data-sl-page] h1,[data-sl-page] h2,[data-sl-page] h3,[data-sl-page] h4{font-family:var(--sl-font-display) !important; font-weight:600; letter-spacing:-.02em; margin:0}
[data-sl-page] p{margin:0 0 1em}
[data-sl-page] p:last-child{margin-bottom:0}

[data-sl-page] .wrap{max-width:var(--sl-maxw); margin:0 auto; padding-inline:var(--sl-gut)}
[data-sl-page] .eyebrow{
  font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--sl-brand-hover);
  margin:0 0 14px;
}
[data-sl-page] .accent{color:var(--sl-brand)}
[data-sl-page] .lede{font-size:19px; line-height:1.62; color:var(--sl-muted); max-width:56ch}
[data-sl-page] .rule{border:0; border-top:1px solid var(--sl-border); margin:0}

/* buttons ---------------------------------------------------- */
[data-sl-page] .btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sl-font-body) !important; font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:8px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:background .16s, border-color .16s, transform .16s;
}
[data-sl-page] .btn-primary{background:var(--sl-brand-hover); color:var(--sl-surface)}   /* white on the base brand teal is 4.44:1, under AA for a 16px label */
[data-sl-page] .btn-primary:hover{background:var(--sl-brand-deep)}
[data-sl-page] .btn-ghost{background:var(--sl-surface); color:var(--sl-brand-hover); border-color:var(--sl-border-strong)}
[data-sl-page] .btn-ghost:hover{border-color:var(--sl-brand); }
[data-sl-page] .btn .arw{transition:transform .16s}
[data-sl-page] .btn:hover .arw{transform:translateX(3px)}

/* header ----------------------------------------------------- */

/* hero ------------------------------------------------------- */
[data-sl-page] .hero{padding-block:clamp(44px,7vw,86px) clamp(40px,6vw,72px)}
[data-sl-page] .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,68px); align-items:center}
[data-sl-page] .hero h1{font-size:clamp(38px,5.1vw,66px); line-height:1.04; margin:0 0 22px}
[data-sl-page] .hero .lede{font-size:clamp(17px,1.5vw,20px)}
[data-sl-page] .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
[data-sl-page] .hero-note{margin-top:20px; font-size:14.5px; color:var(--sl-faint-aa); display:flex; align-items:center; gap:9px}
[data-sl-page] .dot{width:7px; height:7px; border-radius:50%; background:var(--sl-brand); flex:none}

[data-sl-page] .portrait{position:relative; border-radius:14px; overflow:hidden; background:var(--sl-build-wash); aspect-ratio:5/6}
[data-sl-page] .portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 28%}
[data-sl-page] .portrait .cap{
  position:absolute; left:16px; right:16px; bottom:16px; background:var(--sl-surface);
  border-radius:10px; padding:13px 15px; font-size:13.5px; line-height:1.45; color:var(--sl-muted);
}
[data-sl-page] .portrait .cap b{display:block; color:var(--sl-ink); font-family:var(--sl-font-display) !important; font-size:14.5px; margin-bottom:2px}

@media (max-width:900px){ [data-sl-page] .hero-grid{grid-template-columns:1fr; gap:32px} [data-sl-page] .portrait{aspect-ratio:5/4; max-height:430px} }

/* proof strip ------------------------------------------------ */

/* generic section -------------------------------------------- */
[data-sl-page] section{padding-block:clamp(52px,7vw,96px)}
[data-sl-page] .sec-head{max-width:62ch; margin-bottom:clamp(30px,4vw,50px)}
[data-sl-page] .sec-head h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 16px}
[data-sl-page] .sec-head.center{margin-inline:auto; text-align:center}

/* the promise ------------------------------------------------ */

/* ============ THE INTERACTIVE ============ */

[data-sl-page] .chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
[data-sl-page] .chip{
  font-family:var(--sl-font-body) !important; font-size:14.5px; font-weight:500; padding:10px 16px;
  border-radius:999px; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-muted);
  cursor:pointer; transition:all .15s; line-height:1.3;
}
[data-sl-page] .chip:hover{border-color:var(--sl-brand); color:var(--sl-brand-hover)}
[data-sl-page] .chip[aria-selected="true"]{background:var(--sl-brand-hover); border-color:var(--sl-brand-hover); color:var(--sl-surface)}

/* in the room ------------------------------------------------ */
[data-sl-page] .room{background:var(--sl-ground)}
[data-sl-page] .timeline{list-style:none; margin:0; padding:0}
[data-sl-page] .timeline{--lc:8.4s}
@media (min-width:861px){ [data-sl-page] .timeline{margin-top:78px} } /* level with the heading beside it, under the eyebrow and the format chips */   /* QA 28 Sep: the steps are h3 under the section h2 */ /* 11 Sep: the timings column went, its 62px track had stayed and swallowed each step on phones */

/* meet paul -------------------------------------------------- */
/* ---- the career line. One clock (--cc), five stops, each lit for a fifth of it; the sentence for the lit stop
        sits in one shared slot under the rail. Reduced motion: every stop lit, sentences listed. ---- */
/* five stops, five keyframe sets on one clock; the stagger lives inside each keyframe, never in a delay */

/* formats table ---------------------------------------------- */
@media (max-width:720px){
  /* phones: stack format over "choose it when", so nothing needs a swipe (14 Sep, v25) */
}

/* testimonial ------------------------------------------------ */
[data-sl-page] .schools{
  margin-top:clamp(38px,5vw,58px); padding-top:32px; border-top:1px solid var(--sl-night-line);
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-size:14px; color:var(--sl-night-muted); line-height:1.9;
}

/* where it leads --------------------------------------------- */
[data-sl-page] .lead{background:var(--sl-surface); padding:28px 24px 26px; text-decoration:none; display:block; transition:background .15s}
[data-sl-page] .lead:hover{background:var(--sl-ground)}
[data-sl-page] .lead h4{font-size:17.5px; margin:0 0 8px}
[data-sl-page] .lead p{font-size:14.5px; color:var(--sl-muted); margin:0; line-height:1.55}
[data-sl-page] .lead .go{margin-top:14px; font-size:13.5px; font-weight:600; color:var(--sl-brand-hover)}   /* a rule that underlines the section above: typography, not a rail */

/* final cta -------------------------------------------------- */
[data-sl-page] .book{background:var(--sl-build-wash)}
[data-sl-page] .book-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center}
[data-sl-page] .book h2{font-size:clamp(30px,3.8vw,48px); line-height:1.1; margin:0 0 18px}
[data-sl-page] .book .lede{color:var(--sl-brand-deep); opacity:.92}
[data-sl-page] .book-card{background:var(--sl-surface); border-radius:14px; padding:clamp(26px,3.5vw,36px)}
[data-sl-page] .book-card h3{font-size:19px; margin:0 0 6px}
[data-sl-page] .book-card .sub{font-size:14.5px; color:var(--sl-muted); margin:0 0 22px}
[data-sl-page] .book-card .btn{width:100%; justify-content:center}
[data-sl-page] .or{display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--sl-faint-aa); font-size:13px; font-family:var(--sl-font-mono) !important; letter-spacing:.1em; text-transform:uppercase}
[data-sl-page] .or::before,[data-sl-page] .or::after{content:''; flex:1; border-top:1px solid var(--sl-border)}
/* ---- the booking wizard. One accent, white controls on a white card (G11: a control is the lightest thing
        on its panel, a chosen option gains an accent border and accent type, never a fill). ---- */
[data-sl-page] .wiz{position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px}
[data-sl-page] .wiz[hidden]{display:none}
[data-sl-page] .wiz-back{position:absolute; inset:0; background:var(--sl-ink); opacity:.55}
[data-sl-page] .wiz-card{position:relative; width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--sl-surface); border-radius:16px; padding:clamp(22px,3.5vw,34px)}
[data-sl-page] .wiz-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--sl-border); background:var(--sl-surface); color:var(--sl-muted); font-size:22px; line-height:1; cursor:pointer}
[data-sl-page] .wiz-x:hover{border-color:var(--sl-brand); color:var(--sl-brand-hover)}
[data-sl-page] .wiz-step{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--sl-brand-hover); font-weight:600; margin:0 0 10px}
[data-sl-page] .wiz-pane h3{font-family:var(--sl-font-display) !important; font-size:clamp(21px,2.4vw,26px); line-height:1.2; margin:0 0 6px; letter-spacing:-.015em}
[data-sl-page] .wiz-sub{font-size:14.5px; color:var(--sl-muted); margin:0 0 18px}
[data-sl-page] .wiz-opts{display:flex; flex-wrap:wrap; gap:9px}
[data-sl-page] .wiz-opt{font-family:var(--sl-font-body) !important; font-size:15px; font-weight:500; padding:11px 15px; border-radius:10px; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); cursor:pointer; text-align:left; line-height:1.3; transition:border-color .14s,color .14s}
[data-sl-page] .wiz-opt:hover{border-color:var(--sl-brand)}
[data-sl-page] .wiz-opt[aria-pressed="true"]{border-color:var(--sl-brand-hover); color:var(--sl-brand-hover); box-shadow:inset 0 0 0 1px var(--sl-brand-hover)}
[data-sl-page] .wiz-opt-chat{width:100%; margin-top:4px}
[data-sl-page] .wiz-field{display:block; margin:0 0 12px}
[data-sl-page] .wiz-field span{display:block; font-size:13px; font-weight:600; color:var(--sl-ink); margin:0 0 5px}
[data-sl-page] .wiz-field input,[data-sl-page] .wiz-field textarea{width:100%; font-family:var(--sl-font-body) !important; font-size:15px; font-weight:400; line-height:1.4; color:var(--sl-ink); padding:10px 12px; border:1px solid var(--sl-border-strong); border-radius:8px; background:var(--sl-surface); resize:vertical}
[data-sl-page] .wiz-field input:focus,[data-sl-page] .wiz-field textarea:focus{outline:none; border-color:var(--sl-brand); box-shadow:0 0 0 3px var(--sl-build-wash)}
[data-sl-page] .wiz-field input[aria-invalid="true"]{border-color:var(--sl-tf-red)}
[data-sl-page] .wiz-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
[data-sl-page] .wiz-note{font-size:13.5px; color:var(--sl-faint-aa); margin:6px 0 0; line-height:1.5}
[data-sl-page] .wiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--sl-border)}
[data-sl-page] .wiz-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sl-font-body) !important; font-weight:600; font-size:15px; padding:12px 20px; border-radius:8px; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); cursor:pointer; text-decoration:none}
[data-sl-page] .wiz-next{margin-left:auto; background:var(--sl-brand-hover); border-color:var(--sl-brand-hover); color:var(--sl-surface)}
[data-sl-page] .wiz-next:hover{background:var(--sl-brand-deep)}
[data-sl-page] .wiz-next[disabled]{opacity:.45; cursor:not-allowed}
[data-sl-page] .wiz-skip{margin:14px 0 0; text-align:center; font-size:13px}
[data-sl-page] .wiz-skip a{font-size:13px; color:var(--sl-faint-aa); text-decoration:underline; text-underline-offset:3px}
[data-sl-page] .wiz-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
[data-sl-page] [hidden].wiz-pane,[data-sl-page] [hidden].wiz-btn{display:none}
@media (max-width:600px){ [data-sl-page] .wiz{padding:0; align-items:end} [data-sl-page] .wiz-card{width:100%; max-height:92vh; border-radius:16px 16px 0 0} [data-sl-page] .wiz-two{grid-template-columns:1fr} }
[data-sl-page] .contact-line{font-size:15.5px; color:var(--sl-muted); text-align:center}
[data-sl-page] .contact-line a{color:var(--sl-brand-hover); font-weight:600; text-decoration:none; white-space:nowrap; font-size:15px}
[data-sl-page] .contact-line a:hover{text-decoration:underline}
@media (max-width:860px){ [data-sl-page] .book-grid{grid-template-columns:1fr} }

/* footer ----------------------------------------------------- */

/* ============================================================================
   SL LOOP KIT
   ----------------------------------------------------------------------------
   ONE CLOCK. Every animated element shares --lc and carries NO animation-delay.
   Staggering lives inside each keyframe as a percentage offset. This is exactly
   what the live blog CTA does (.loop .step.k1..k6, 8.4s linear infinite, offsets
   at 0 / 16.67 / 33.33 / 50 / 66.67 / 83.33 per cent) and it is why that one
   reads as assured. Per-element animation-delay on an infinite animation puts
   every element on its own clock, so nothing rests together and nothing resets
   together. That was the mechanical cause of "a bit unprofessional".

   SECOND RULE: the loop moves ATTENTION, it does not conjure objects. Anything
   that should be readable in a still frame is present from frame one. Things
   only assemble where the assembly IS the idea (blocks locking, a route being
   planned, an organiser changing shape).
   ========================================================================== */

/* ---- entry slots. hold 88%, gone by 95%, so the reset is never seen ------- */

/* ---- the travelling highlight. Six items, all present, one lit at a time.
        Copied in shape from the live CTA, which is the calmest thing we ship. */

/* ---- route drawing, for the planning loop (16.8s, two lessons) ------------ */
/* the two markers: FINISH is chosen first, START is arrived at second */

/* ---- four organiser shapes, one topic. 16.8s, 4.2s each ------------------- */

/* ---- the block tower. Sequential, and the paragraph waits for the last block.
        In the published version the paragraph arrived at 3.02s while the last
        block did not land until 4.10s. Here block 4 is in at 36% and the
        paragraph does not begin until 40%, so it cannot overtake. ----------- */

/* ---- talk. Two learners, always present. Only the speech unfolds. --------- */

/* ---- G13: reduced motion shows the FINISHED drawing, never an empty stage -- */



/* ---- format morph. one clock, no layout shift: the four labels stack. ------ */

/* ---- hero slideshow. 21s, three slides, slow crossfade. ------------------- */
[data-sl-page] .slides{position:absolute; inset:0}
[data-sl-page] .slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 28%; opacity:0;
  animation-duration:21s; animation-timing-function:cubic-bezier(.4,.1,.3,1);
  animation-iteration-count:infinite; animation-fill-mode:both}
[data-sl-page] .portrait .cap{min-height:74px}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .slides img{animation:none !important}
}



/* the framework, laid out left to right */   /* beats .stage max-width, which is declared later */



/* the two small tiles rotate, same idea as the hero */


/* a concrete example under each of the three uses */


/* conceding the free guidance, then showing the gap */


/* Paul, 10 Sep: nobody should think they have to buy something to get value */
/* neutral hairline, not a teal rail: DESIGN.md rule 1 / G8 forbid a coloured
   top border on a box. The accent goes into the mark, which rule 1 allows. */

/* ---- the application ------------------------------------------------------ */   /* the clock is scoped to .lk; the app needs its own */
[data-sl-page] .ways{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(20px,3vw,36px); align-items:start}
[data-sl-page] .way{display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0}
[data-sl-page] .way > h4{font-family:var(--sl-font-display) !important; font-size:18px; font-weight:600; margin:18px 0 6px; letter-spacing:-.01em}
[data-sl-page] .way > p{font-size:15px; color:var(--sl-muted); line-height:1.55; margin:0}
[data-sl-page] .way .go{display:inline-block; margin-top:10px; font-size:13.5px; font-weight:600; color:var(--sl-brand-hover); text-decoration:none; align-self:start}
[data-sl-page] .way .go:hover{text-decoration:underline}   /* white on yellow fails at every size (tokens: yellow-text 8.59:1) */
/* the blocks stack and the cards fan on the section clock, resting most of the time (G13) */
[data-sl-page] .app{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden}
[data-sl-page] .app-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--sl-border); background:var(--sl-ground)}
[data-sl-page] .app-bar .d{width:8px; height:8px; border-radius:50%; background:var(--sl-border-strong)}
[data-sl-page] .app-t{margin-left:8px; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--sl-faint-aa); font-weight:600}
/* three screens, one clock: the same app answering three different asks */
[data-sl-page] .app-lb{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sl-faint-aa); font-weight:600; margin:0 0 7px}
@media (max-width:860px){ [data-sl-page] .ways{grid-template-columns:1fr} [data-sl-page] .way{display:block} }

/* ---- what it reaches: four outcomes, lit in turn --------------------------- */

/* ---- the theory of change tool ------------------------------------------- */
/* Paul, 11 Sep: "I didn't know to click on it." A hand-drawn note follows the item the cycle is on, and goes
   the moment the visitor clicks anything. Caveat is the one handwriting face on the page, for this note only. */   /* a lane for the note; the shorthand padding rule below would otherwise win */
[data-sl-page] .toc-hint-t{font-family:'Caveat','Bradley Hand','Segoe Print',cursive !important; font-size:19px; line-height:.95; font-weight:600; transform:rotate(-3deg); letter-spacing:.01em}
@media (max-width:600px){ [data-sl-page] .toc-hint-t{font-size:17px} }
[data-sl-page] .toc-list{padding:0}
[data-sl-page] .toc-list button{display:block; width:100%; text-align:left; background:none; border:0;
  font-family:var(--sl-font-body) !important; font-size:15px; line-height:1.45; color:var(--sl-muted);
  padding:11px 13px; border-radius:8px; cursor:pointer; transition:background .14s,color .14s}
[data-sl-page] .toc-list button:hover{background:var(--sl-surface); color:var(--sl-ink)}
[data-sl-page] .toc-list button[aria-selected="true"]{background:var(--sl-surface); color:var(--sl-ink); font-weight:600;
  box-shadow:0 1px 2px rgba(36,38,45,.06)}
[data-sl-page] .tm{background:none; border:0; padding:6px 0; margin:0 22px 0 0; font:inherit; color:var(--sl-muted); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px}
[data-sl-page] .tm::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--sl-brand)}
[data-sl-page] .tm:hover{color:var(--sl-ink)}   /* G5: brand and Build It share a value */
@media (max-width:860px){ [data-sl-page] .toc-list{border-right:0; border-bottom:1px solid var(--sl-border)} }

/* ---- the named solution, one small loop per tool -------------------------- */

/* one clock, no delays: the stagger lives in the percentages */   /* a CSS fill beats fill="..." on the element */
[data-sl-page] .g1,[data-sl-page] .g2,[data-sl-page] .g3,[data-sl-page] .g4{animation-duration:var(--gc); animation-iteration-count:infinite;
  animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1);
  transform-box:fill-box; transform-origin:center; opacity:0}
@keyframes gp1{0%,2%{opacity:0;transform:scale(.72)}  9%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp2{0%,10%{opacity:0;transform:scale(.72)} 17%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp3{0%,18%{opacity:0;transform:scale(.72)} 25%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp4{0%,26%{opacity:0;transform:scale(.72)} 33%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
[data-sl-page] .g1{animation-name:gp1} [data-sl-page] .g2{animation-name:gp2} [data-sl-page] .g3{animation-name:gp3}
[data-sl-page] .g4{animation-name:gp4}
/* a line that draws itself */
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .g1,[data-sl-page] .g2,[data-sl-page] .g3,[data-sl-page] .g4{animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important}
}   /* 7.73:1; the night token measured 2.34:1 here */
[data-sl-page] .uses{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  width:min(100%,940px); margin:22px 0 clamp(46px,5.5vw,72px)}   /* one rule, or the later one wins */
[data-sl-page] .uses li{border-top:1px solid var(--sl-border); padding:13px 0 0}
[data-sl-page] .uses p{margin:0; font-size:15px; line-height:1.55; color:var(--sl-muted)}
@media (max-width:720px){ [data-sl-page] .uses{grid-template-columns:1fr; gap:14px} }

/* ---- loop layout ---------------------------------------------------------- */

[data-sl-page] .loop{margin-top:clamp(40px,5vw,64px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--sl-border)}
[data-sl-page] .loop:first-of-type{margin-top:0; padding-top:0; border-top:0}   /* the photos come first now, so the cards article gets its own rule and gap (Paul, 11 Sep: "are they two sections or not?") */
/* when the Webflow build splits this section into more than one embed, the first loop of a continuation part keeps its rule */
[data-sl-page] [data-sl-cut~="top"] .loop:first-of-type{margin-top:clamp(40px,5vw,64px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--sl-border)}
[data-sl-page] .stage{padding:0; overflow:hidden; max-width:860px}   /* Paul, 10 Sep: no grey boxes */
[data-sl-page] .stage svg{display:block; width:100%; height:auto}

/* Paul, 10 Sep: each modality panel carries its OWN domain colour. Map It blue,
   Say It orange, Build It teal. This reopens my earlier one-accent compliance,
   on his instruction. Revert = delete these three rules. */

/* ---- svg type ---- */
[data-sl-page] .learner circle,[data-sl-page] .learner path{fill:none; stroke:var(--sl-say); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* facts only Paul can confirm. Visible on purpose. */
[data-sl-page] #paul{padding-block:clamp(40px,5vw,64px)}   /* Paul, 11 Sep: squash this down a bit */

/* motion ----------------------------------------------------- */
[data-sl-page] .rise{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
[data-sl-page] .rise.rise-armed{opacity:0; transform:translateY(16px)}
[data-sl-page] .rise.rise-armed.from-l{transform:translateX(-24px)}
[data-sl-page] .rise.rise-armed.from-r{transform:translateX(24px)}
[data-sl-page] .rise.rise-armed.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .rise{opacity:1; transform:none; transition:none}
  [data-sl-page] .btn,[data-sl-page] .chip,[data-sl-page] .lead{transition:none}
}
[data-sl-page] section{overflow-x:clip}   /* a sideways entrance (translateX 24px, armed and not yet revealed) widened the page to 324 at 320. clip, not hidden: sticky still works inside it */

/* ---- the motion layer, v22. html.sl-m is set in the head ONLY when the Motion library loaded and the reader has not
   asked for reduced motion, so nothing below can hide content the library will not reveal. Without it the page keeps
   the CSS reveals above. ---- */
html.sl-m [data-sl-page] .rise{transition:none}                       /* Motion drives these with a spring; the CSS transition would fight it */
html.sl-m [data-sl-page] .hero .arr{opacity:0}                        /* the arrival: eyebrow, headline, lede, buttons, note, portrait, hidden until the script raises them */
html.sl-m [data-sl-page] .hero .arr.arrived{opacity:1}
[data-sl-page] .hero h1 .hw{display:inline-block}                     /* a word can only move if it is a box */
[data-sl-page] .case figure{overflow:hidden; border-radius:10px}      /* the tile's photograph zooms on hover and must stay inside its corners */
[data-sl-page] .case-link{will-change:transform}
/* the cards article pins for most of a screen at desktop while the scroll scrubs its three beats; phones keep the flow.
   The travel is CONTENT height (a spacer after the sticky block), never padding: a sticky child is held inside its
   parent's content box, so padding-bottom gave it nowhere to go and it never stuck (measured 14 Sep 2026). */

/* 11 Sep: photographs beside the drawings. Captions say what is happening, never where, unless it is a real photo of a named place. */
/* 11 Sep: on a phone the drawings scaled to 350px and their text fell to 8px. A diagram may be wider than
   the screen inside its own scroll container (design canon), so each stage keeps a readable minimum width. */
@media (max-width:600px){
  [data-sl-page] .stage { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:none }
  [data-sl-page] .stage svg { min-width:560px }
  /* the cards explainer re-stacks instead of scrolling: the script swaps the viewBox to 450 x 310 (data-vb-phone)
     and these groups move the teacher and the marked work under the cards, so all three beats fit a 390px screen */   /* the bust is wider than the old figure; without this its left shoulder is off the phone stage */   /* the marked work takes the teacher's slot; they cross-fade */   /* the longest caption is 52 characters and has to fit 440 units */
} /* portrait source, cropped to the row of bricks */
[data-sl-page] .day{padding-top:clamp(34px,4vw,54px)}
[data-sl-page] .case,[data-sl-page] .case figure{margin:0}
[data-sl-page] .case img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px}
[data-sl-page] .case-link{display:block; text-decoration:none; color:inherit}
[data-sl-page] .case h4{font-size:16.5px; line-height:1.25; margin:0 0 5px; letter-spacing:-.01em}
[data-sl-page] .case .go{display:inline-block; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--sl-brand-hover)}
[data-sl-page] .case-link:hover .go{text-decoration:underline}
[data-sl-page] .case-link:hover img{opacity:.94}

/* 11 Sep, Paul: no orphaned words in a headline */
[data-sl-page] .sec-head h2, [data-sl-page] .hero h1 { text-wrap:balance }

/* ---- the four small mind drawings under the outcomes. One clock (the band's 14s); each moves in
        its own quarter, when its card is lit, and rests on its finished frame the rest of the time. ---- */
[data-sl-page] .mind { display:block; width:100%; max-width:260px; height:auto; margin:auto 0 0; padding-top:18px } /* margin:auto pushes every drawing to the same baseline */
[data-sl-page] .mind text { font-family:var(--sl-font-body) !important; font-size:10.5px; fill:var(--sl-brand-deep) }
/* card 1, reading: 0 to 25%. words travel into the head, blocks stack */
/* card 2, revision and retrieval: 25 to 50%. a block goes out to the page and comes back */
/* card 3, writing: 50 to 75%. scattered blocks line up, then the text draws */
/* card 4, speaking and listening: 75 to 100%. two half thoughts, one answer */
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .mind *{animation:none !important}
}

/* ---- the framework picture, static, and the cards in three beats ---- */  /* the real card: white verb on the family colour */
/* beat 1: cards leave the deck for the row */
@keyframes fcC2 { 0%,9%{transform:translate(-130px,100px);opacity:0} 10%{opacity:1} 16%,96%{transform:translate(150px,100px);opacity:1} 100%{transform:translate(150px,100px);opacity:0} }
/* beat 2: the teacher names the move; the Sequence card answers */
/* beat 3: the work, and the three I can statements */
/* the beat labels and captions */
@media (prefers-reduced-motion:reduce){
  /* v19: the deck is gone, so the cards land at 10, 150 and 290, not 300, 440 and 580 */
}

/* a cutout on its domain wash: the figure is the illustration, the wash is the single colour */

/* ---- the three activities, image led. Paul, 11 Sep: this is the CPD page, the loops are banked. ---- */

/* ============================================================
   The Thinking Framework page: rules on top of the CPD kit's block above.
   One accent (the brand teal) on type, marks and buttons. The five framework
   colours appear only where the framework is the subject: the chips, the
   plan cards, the marks beside each family (DESIGN.md G12).
   ============================================================ */

/* ---- hero: the explorer is the hero object (the homepage's .pl card, same shell) ---- */
[data-sl-page] .hero{padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,64px)}
[data-sl-page] .hero-grid{grid-template-columns:.9fr 1.1fr; align-items:start}
[data-sl-page] .hero h1{font-size:clamp(36px,4.6vw,60px)}
[data-sl-page] .hero .lede{max-width:48ch}
[data-sl-page] .hero-cta{margin-top:26px}
[data-sl-page] .pl{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden; box-shadow:var(--sl-shadow-hover)}
[data-sl-page] .pl-body{padding:16px 18px 18px}
[data-sl-page] .pl-card{font-family:var(--sl-font-display) !important; font-weight:600; font-size:13px; line-height:1.2; letter-spacing:0; color:var(--sl-surface); padding:8px 12px; border-radius:7px; background:var(--sl-brand); white-space:nowrap}
[data-sl-page] .pl-card[data-f="green"]{background:var(--sl-brand-hover)}   /* QA 28 Sep: white on --sl-tf-green is 4.44:1; the hover shade is 6.44:1 (DESIGN.md rule 6) */ [data-sl-page] .pl-card[data-f="blue"]{background:var(--sl-tf-blue)}
[data-sl-page] .pl-card[data-f="yellow"]{background:var(--sl-tf-yellow); color:var(--sl-ink)} [data-sl-page] .pl-card[data-f="orange"]{background:var(--sl-tf-orange)} [data-sl-page] .pl-card[data-f="red"]{background:var(--sl-tf-red)}
[data-sl-page] .pl .app-bar{position:relative}
[data-sl-page] .pl-hint{position:absolute; right:14px; top:6px; display:flex; align-items:flex-start; gap:4px; color:var(--sl-brand-hover); pointer-events:none; transition:opacity .4s}
[data-sl-page] .pl-hint-t{font-size:20px; white-space:nowrap; margin-top:2px}   /* the face comes from .toc-hint-t, the kit's one Caveat rule */
[data-sl-page] .pl-hint svg{width:40px; height:30px; flex:none; animation:plNudge 1.3s ease-in-out infinite alternate}
@keyframes plNudge{from{transform:translateY(0)} to{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .pl-hint svg{animation:none} }
[data-sl-page] #fwx.used .pl-hint{opacity:0}

/* the five rows of chips */
[data-sl-page] .fw-row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .fw-row:last-child{border-bottom:0}
[data-sl-page] .fw-rq{margin:0; font-family:var(--sl-font-display) !important; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--sl-ink); display:flex; gap:7px; align-items:flex-start; padding-top:6px}
[data-sl-page] .fw-dot{width:9px; height:9px; border-radius:50%; flex:none; margin-top:4px; background:var(--sl-brand)}
[data-sl-page] .fw-row[data-f="green"] .fw-dot{background:var(--sl-tf-green)} [data-sl-page] .fw-row[data-f="blue"] .fw-dot{background:var(--sl-tf-blue)}
[data-sl-page] .fw-row[data-f="yellow"] .fw-dot{background:var(--sl-tf-yellow)} [data-sl-page] .fw-row[data-f="orange"] .fw-dot{background:var(--sl-tf-orange)} [data-sl-page] .fw-row[data-f="red"] .fw-dot{background:var(--sl-tf-red)}
[data-sl-page] .fw-chips{display:flex; flex-wrap:wrap; gap:5px}
[data-sl-page] .fw-chip{font-family:var(--sl-font-display) !important; font-weight:600; font-size:12.5px; line-height:1.2; padding:6px 10px; border-radius:7px; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s, border-color .15s}
[data-sl-page] .fw-chip:hover{border-color:var(--sl-ink)}
[data-sl-page] .fw-chip:focus-visible{outline:2px solid var(--sl-brand); outline-offset:2px}
[data-sl-page] .fw-chip[aria-pressed="true"]{color:var(--sl-surface); border-color:transparent; background:var(--sl-brand)}
[data-sl-page] .fw-chip[data-f="green"][aria-pressed="true"]{background:var(--sl-brand-hover)} [data-sl-page] .fw-chip[data-f="blue"][aria-pressed="true"]{background:var(--sl-tf-blue)}
[data-sl-page] .fw-chip[data-f="yellow"][aria-pressed="true"]{background:var(--sl-tf-yellow); color:var(--sl-ink)} [data-sl-page] .fw-chip[data-f="orange"][aria-pressed="true"]{background:var(--sl-tf-orange)} [data-sl-page] .fw-chip[data-f="red"][aria-pressed="true"]{background:var(--sl-tf-red)}

/* the card panel: one word, explained */
[data-sl-page] .fwp{margin-top:14px; padding:16px 16px 18px; border-radius:10px; background:var(--sl-ground); transition:background .25s}
[data-sl-page] .fwp[data-f="green"],[data-sl-page] .fwp[data-f="yellow"]{background:var(--sl-build-wash)} [data-sl-page] .fwp[data-f="blue"]{background:var(--sl-map-wash)} [data-sl-page] .fwp[data-f="orange"],[data-sl-page] .fwp[data-f="red"]{background:var(--sl-say-wash)}
[data-sl-page] .fwp-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 10px}
[data-sl-page] .fwp-name{font-size:16px; padding:9px 14px}
[data-sl-page] .fwp-fam{font-size:13.5px; color:var(--sl-muted); line-height:1.4}
[data-sl-page] .fwp-fam i{font-style:normal; color:var(--sl-faint-aa)}
[data-sl-page] .fwp-def{margin:0 0 14px; font-family:var(--sl-font-display) !important; font-size:clamp(19px,1.7vw,23px); line-height:1.25; letter-spacing:-.015em; color:var(--sl-ink)}
[data-sl-page] .fwp-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:12px 22px}
[data-sl-page] .fwp .app-lb{margin:0 0 5px}
[data-sl-page] .fwp-use{margin:0; padding:0 0 0 17px; font-size:14px; line-height:1.5; color:var(--sl-ink)}
[data-sl-page] .fwp-use li{margin:0 0 3px}
[data-sl-page] .fwp-rel{margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--sl-ink)}
[data-sl-page] .fwp-ex{margin-top:14px; padding-top:13px; border-top:1px solid var(--sl-border)}
[data-sl-page] .fwp-task{margin:0 0 9px; font-family:var(--sl-font-display) !important; font-size:16.5px; font-weight:600; line-height:1.3; color:var(--sl-ink)}
[data-sl-page] .kn{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
[data-sl-page] .kn-btn{font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:6px 11px; border-radius:6px; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-brand-hover); cursor:pointer}
[data-sl-page] .kn-btn.on{background:var(--sl-ink); color:var(--sl-surface); border-color:var(--sl-ink)}
[data-sl-page] .kn-btn:focus-visible{outline:2px solid var(--sl-brand); outline-offset:2px}
[data-sl-page] .kn-line{flex:1 1 220px; font-size:14.5px; line-height:1.5; color:var(--sl-ink)}
[data-sl-page] .kn-line::before{content:'\2192\00a0'; color:var(--sl-faint-aa)}
@media (max-width:1000px){ [data-sl-page] .hero-grid{grid-template-columns:1fr} [data-sl-page] .hero .lede{max-width:56ch} }
@media (max-width:640px){ [data-sl-page] .fw-row{grid-template-columns:1fr; gap:6px} [data-sl-page] .fw-rq{padding-top:0} [data-sl-page] .fwp-grid{grid-template-columns:1fr} [data-sl-page] .pl-body{padding:14px 14px 16px} }
@media (max-width:480px){ [data-sl-page] .pl-hint-t{font-size:17px} [data-sl-page] .pl-hint svg{width:30px; height:24px} [data-sl-page] .pl .app-t{visibility:hidden} }
/* the hero is hidden by html.sl-m until the arrival script raises it; a slow connection gets it at 2.2 s regardless (homepage v18) */
html.sl-m [data-sl-page] .hero .arr{animation:slArrSafe 1ms 2200ms both}
@keyframes slArrSafe{to{opacity:1}}

/* ---- the five families, laid out linear (the kit's .tf-list) with a photograph beside ---- */

/* ---- one lesson, built from the words ---- */
[data-sl-page] .lesson{background:var(--sl-ground)}
[data-sl-page] .lesson-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,60px); align-items:start}
[data-sl-page] .plan{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden}
[data-sl-page] .plan-body{padding:18px 20px 20px}
[data-sl-page] .plan-topic{margin:0 0 4px; font-family:var(--sl-font-display) !important; font-size:20px; font-weight:600; line-height:1.25; letter-spacing:-.015em}
[data-sl-page] .plan-ican{margin:0 0 16px; font-size:14.5px; color:var(--sl-muted); line-height:1.5}
[data-sl-page] .plan-ican b{color:var(--sl-brand-hover); font-weight:600}
[data-sl-page] .steps{list-style:none; margin:0; padding:0; counter-reset:step}
[data-sl-page] .step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 14px; padding:13px 0; border-top:1px solid var(--sl-border)}
[data-sl-page] .step-cards{display:flex; flex-direction:column; gap:5px; align-items:flex-start; min-width:118px}
[data-sl-page] .step-body p{margin:0; font-size:14.5px; line-height:1.55; color:var(--sl-ink)}
[data-sl-page] .step-body .route{display:inline-block; margin:0 0 4px; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
[data-sl-page] .route.say{color:var(--sl-say-text)} [data-sl-page] .route.map{color:var(--sl-map-text)} [data-sl-page] .route.build{color:var(--sl-build-text)} [data-sl-page] .route.write{color:var(--sl-faint-aa)}
[data-sl-page] .step .kn{margin-top:8px}
[data-sl-page] .lesson-side p{font-size:16.5px; line-height:1.66; color:var(--sl-muted); max-width:52ch; margin:0 0 14px}
[data-sl-page] .lesson-side figure{margin:clamp(18px,3vw,28px) 0 0}
[data-sl-page] .lesson-side img{display:block; width:100%; height:auto; border-radius:12px}
[data-sl-page] .lesson-side figcaption{margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--sl-muted)}
@media (max-width:900px){ [data-sl-page] .lesson-grid{grid-template-columns:1fr} }
@media (max-width:560px){ [data-sl-page] .step{grid-template-columns:1fr; gap:8px} [data-sl-page] .step-cards{flex-direction:row; flex-wrap:wrap} }

/* ---- the language, not another system: three crosswalk rows, then how to start ---- */
[data-sl-page] .start-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); margin-top:clamp(36px,5vw,56px); align-items:center}
[data-sl-page] .start h3{font-size:clamp(20px,2.2vw,26px); line-height:1.2; margin:0 0 10px; letter-spacing:-.02em}
[data-sl-page] .start p{font-size:15.5px; line-height:1.62; color:var(--sl-muted); margin:0 0 12px; max-width:52ch}
[data-sl-page] .five{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
[data-sl-page] .wall{margin:0}
[data-sl-page] .wall img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 70%; border-radius:12px}   /* shorter since the learning-walk list went (23 Sep): the table and the cards stay in frame */
[data-sl-page] .wall figcaption{margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--sl-muted)}
@media (max-width:900px){ [data-sl-page] .start-grid{grid-template-columns:1fr} }

/* ---- evidence, honestly ---- */
[data-sl-page] .evid{padding-block:clamp(40px,5vw,64px); border-block:1px solid var(--sl-border)}
[data-sl-page] .evid-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(28px,4vw,56px); align-items:start}
[data-sl-page] .evid p{font-size:16.5px; line-height:1.66; color:var(--sl-muted); max-width:62ch; margin:0 0 14px}
[data-sl-page] .evid p:last-child{margin:0}
[data-sl-page] .evid p b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .evid a{color:var(--sl-brand-hover); font-weight:600; text-decoration:none}
[data-sl-page] .evid a:hover{text-decoration:underline}
[data-sl-page] .evid p.eyebrow{font-size:11.5px; line-height:1.5; margin:0 0 12px; color:var(--sl-brand-hover)}
[data-sl-page] .evid-links{list-style:none; margin:0; padding:0; border-top:1px solid var(--sl-border)}
[data-sl-page] .evid-links li{padding:13px 0; border-bottom:1px solid var(--sl-border); font-size:14.5px; line-height:1.5}
[data-sl-page] .evid-links li a{display:block; font-weight:600; color:var(--sl-ink); text-decoration:none}
[data-sl-page] .evid-links li a:hover{color:var(--sl-brand-hover)}
[data-sl-page] .evid-links li span{color:var(--sl-faint-aa); font-size:13.5px}
@media (max-width:860px){ [data-sl-page] .evid-grid{grid-template-columns:1fr} }

/* ---- free: what costs nothing ---- */
[data-sl-page] .free .lead h4{font-size:17px}
[data-sl-page] .free .lead p{margin:0 0 4px}

/* ---- professional learning, optional ---- */
[data-sl-page] .cpd .cpd-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:center}
[data-sl-page] .cpd figure{margin:0}
[data-sl-page] .cpd figure img{display:block; width:100%; height:auto; border-radius:12px}
[data-sl-page] .cpd figcaption{margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .cpd .cpd-grid p{font-size:16.5px; line-height:1.66; color:var(--sl-muted); max-width:52ch; margin:0 0 14px}
[data-sl-page] .cpd .hero-cta{margin-top:20px}
@media (max-width:900px){ [data-sl-page] .cpd .cpd-grid{grid-template-columns:1fr} }

/* the request wizard: an error line the reader can act on, and the sent pane's one button (homepage) */
[data-sl-page] .wiz-err{color:var(--sl-say-text)} [data-sl-page] .wiz-err a{color:inherit; text-decoration:underline}
[data-sl-page] .wiz-pane[data-pane="4"] .wiz-btn{margin-top:6px}
[data-sl-page] .wiz-nav[hidden]{display:none}

/* ---- from the first look, 16 Sep ---- */
/* the mock header at phone width (dropped for Webflow, seen in the artefact): brand and button stay on one line each */
/* one eyebrow: the professional learning block styles its paragraphs by tag and was catching the eyebrow (the homepage's trap, v18) */
[data-sl-page] .cpd p.eyebrow{font-size:11.5px; line-height:1.5; margin:0 0 12px; color:var(--sl-brand-hover)}
[data-sl-page] .cpd h2{font-size:clamp(26px,3vw,38px); line-height:1.15; margin:0 0 14px}
/* the crosswalk's closing line sits under its chips on every row, not beside them on one and under them on the next */
/* in the plan, the criterion line sits under the two buttons rather than wrapping beside them */
[data-sl-page] .step .kn-line{flex-basis:100%}

/* ---- v3 (23 Sep, Paul): the definition must be visible without scrolling, and no dead space under the panel.
   The hero copy runs full width; the explorer sits under it, words on the left, the chosen card's meaning beside them. ---- */
[data-sl-page] .hero-copy{max-width:880px}
[data-sl-page] .hero-copy .lede{max-width:64ch}
[data-sl-page] .hero{padding-bottom:clamp(8px,1.5vw,20px)}   /* v3: the explorer card is the hero's last object; the next section brings its own air */

/* ---- v3.1 (23 Sep): hero demo, statement band, explorer in the colours section, poster strip ---- */
[data-sl-page] .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); align-items:center}
@media (max-width:1000px){ [data-sl-page] .hero-grid{grid-template-columns:1fr} }   /* 25 Sep: the v3.1 rule above overrode the phone stack at line 64; the hero card sat beside the headline at 390 and clipped */
[data-sl-page] .hd{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; box-shadow:var(--sl-shadow-hover); padding:22px 24px 16px}
[data-sl-page] .hd-card{min-height:318px}
/* the hero demo is filled by script after first paint: reserve its measured height (403 to 406 px at 390 to 1440) so it does not shift the page (CLS 0.24 -> 0.11, speed README 28 Sep) */
[data-sl-page] #heroDemo{min-height:406px}
[data-sl-page] .hd-q{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:14px; color:var(--sl-muted)}
[data-sl-page] .hd-q .fw-dot{width:9px; height:9px; border-radius:50%; flex:none}
[data-sl-page] .hd-q .fw-dot[data-f="green"]{background:var(--sl-tf-green)} [data-sl-page] .hd-q .fw-dot[data-f="blue"]{background:var(--sl-tf-blue)} [data-sl-page] .hd-q .fw-dot[data-f="yellow"]{background:var(--sl-tf-yellow)} [data-sl-page] .hd-q .fw-dot[data-f="orange"]{background:var(--sl-tf-orange)} [data-sl-page] .hd-q .fw-dot[data-f="red"]{background:var(--sl-tf-red)}
[data-sl-page] .hd-name{display:inline-block; font-size:19px; padding:10px 16px}
[data-sl-page] .hd-def{margin:14px 0 18px; font-family:var(--sl-font-display) !important; font-size:clamp(22px,2.1vw,28px); line-height:1.2; letter-spacing:-.015em; color:var(--sl-ink)}
[data-sl-page] .hd-task{padding-top:14px; border-top:1px solid var(--sl-border)}
[data-sl-page] .hd-t{margin:0 0 10px; font-family:var(--sl-font-display) !important; font-weight:600; font-size:16.5px; line-height:1.35; color:var(--sl-ink)}
[data-sl-page] .hd-k{margin:0 0 6px; font-size:15px; line-height:1.45; color:var(--sl-muted); transition:opacity .45s, transform .45s}
[data-sl-page] .hd-k b{display:inline-block; min-width:64px; margin-right:8px; font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sl-ink)}
[data-sl-page] .hd-card[data-step="0"] .hd-e,[data-sl-page] .hd-card[data-step="0"] .hd-h,[data-sl-page] .hd-card[data-step="1"] .hd-h{opacity:0; transform:translateY(4px)}
[data-sl-page] .hd-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; padding-top:12px; border-top:1px solid var(--sl-border)}
[data-sl-page] .hd-dots{display:flex; gap:8px}
[data-sl-page] .hd-dot{width:26px; height:26px; border-radius:50%; border:0; padding:0; cursor:pointer; opacity:.35; transition:opacity .25s, transform .25s}
[data-sl-page] .hd-dot[data-f="green"]{background:var(--sl-tf-green)} [data-sl-page] .hd-dot[data-f="blue"]{background:var(--sl-tf-blue)} [data-sl-page] .hd-dot[data-f="yellow"]{background:var(--sl-tf-yellow)} [data-sl-page] .hd-dot[data-f="orange"]{background:var(--sl-tf-orange)} [data-sl-page] .hd-dot[data-f="red"]{background:var(--sl-tf-red)}
[data-sl-page] .hd-dot[aria-pressed="true"]{opacity:1; transform:scale(1.1)}
[data-sl-page] .hd-dot:focus-visible{outline:2px solid var(--sl-muted); outline-offset:2px}
[data-sl-page] .hd-more{font-size:14px; font-weight:600; color:var(--sl-brand-hover); text-decoration:none}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .hd-k{transition:none} }

[data-sl-page] .stmt{padding-block:clamp(40px,5vw,72px); background:var(--sl-ground); border-block:1px solid var(--sl-border)}
[data-sl-page] .stmt-big{margin:10px 0 28px; max-width:34ch; font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(24px,2.7vw,36px); line-height:1.12; letter-spacing:-.025em; color:var(--sl-ink)}
[data-sl-page] .stmt-three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,40px); margin:0; padding:0; list-style:none}
[data-sl-page] .stmt-three li{padding-top:14px; border-top:1px solid var(--sl-border-strong)}
[data-sl-page] .stmt-three b{display:block; margin-bottom:6px; font-family:var(--sl-font-display) !important; font-size:20px; color:var(--sl-brand-hover)}
[data-sl-page] .stmt-three span{font-size:15.5px; line-height:1.55; color:var(--sl-muted)}
@media (max-width:720px){ [data-sl-page] .stmt-three{grid-template-columns:1fr} }

[data-sl-page] #families .pl{margin-top:clamp(20px,3vw,34px)}
[data-sl-page] #families .pl-body{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:0 26px; align-items:start; padding:18px 20px 20px}
[data-sl-page] #families .fwp{margin-top:0}
@media (max-width:1000px){ [data-sl-page] #families .pl-body{grid-template-columns:1fr} [data-sl-page] #families .fwp{margin-top:14px} }
/* v10 (Paul, 23 Sep): the "click any word" note sits on the LEFT, over the word chips where the clicking happens, not over the panel.
   The chips column starts 150px + 10px into the body, so the arrow lands on the first row of chips. */
[data-sl-page] #families .pl-hint{right:auto; left:236px}
@media (max-width:640px){ [data-sl-page] #families .pl-hint{left:auto; right:14px} }
[data-sl-page] .stmt-three li{display:flex; flex-direction:column}
[data-sl-page] .stmt-pic{display:block; width:100%; max-width:260px; height:auto; aspect-ratio:3/2; object-fit:contain; margin:0 0 12px}

/* ---- v3.2 (23 Sep, Paul): spacing pass, full-colour dots, where-it-lives ---- */
[data-sl-page] section{padding-block:clamp(40px,5vw,72px)}       /* was clamp(52px,7vw,96px): 192px between sections at desktop read as gaps */
[data-sl-page] .sec-head{margin-bottom:clamp(20px,2.6vw,32px)}
[data-sl-page] .hd-dot{opacity:1; width:20px; height:20px; box-shadow:0 0 0 3px var(--sl-surface)}
[data-sl-page] .hd-dot[aria-pressed="true"]{transform:none; box-shadow:0 0 0 3px var(--sl-surface), 0 0 0 5px var(--sl-muted)}
[data-sl-page] .hd-dot:focus-visible{outline:none; box-shadow:0 0 0 3px var(--sl-surface), 0 0 0 5px var(--sl-muted)}
[data-sl-page] .where-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none}
[data-sl-page] .where-grid li{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; padding:20px 20px 18px; display:flex; flex-direction:column}
[data-sl-page] .where-k{margin:0 0 8px; font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-brand-hover)}
[data-sl-page] .where-grid h3{margin:0 0 8px; font-size:19px; line-height:1.25}
[data-sl-page] .where-grid p{margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .where-grid .go{margin-top:auto; font-size:14.5px; font-weight:600; color:var(--sl-brand-hover); text-decoration:none}
@media (max-width:1000px){ [data-sl-page] .where-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* the framework itself, free: its one-page PDF, the cover as the link (23 Sep, Paul: "just give a copy of the framework away") */
@media (max-width:560px){ [data-sl-page] .where-grid{grid-template-columns:1fr} }

/* the year pathway sits under the training grid (shared part, sl-sales-pages/shared/trainingpath) */
[data-sl-page] .cpd .cpd-path{margin-top:clamp(40px,6vw,72px)}

/* Real session photo kept beside the training illustration (23 Sep 2026): real proof is never swapped out for a generated image. */
[data-sl-page] figure.tr-real{display:flex;gap:14px;align-items:center;margin:16px 0 0}
[data-sl-page] figure figure.tr-real img{width:120px;height:90px;object-fit:cover;border-radius:8px;flex:none}
[data-sl-page] figure.tr-real figcaption{margin:0}
@media (max-width:480px){ [data-sl-page] #families .pl-hint{right:auto; left:64px} }

/* ---- v10 (Paul, 23 Sep): the worked lesson, fewer colours and one screen ----
   The chips keep their family colour; every other word in the plan is ink or muted. The criterion toggle is two light
   pressable buttons in section 3's language: white with a teal border and teal type, and the pressed one takes the teal
   wash (a tint with accent text, never an ink fill). Scoped to #lesson: the explorer's own Easier/Harder is untouched. */
[data-sl-page] #lesson .plan-ican b{color:var(--sl-ink)}
[data-sl-page] #lesson .step-body .route{color:var(--sl-muted)}
[data-sl-page] #lesson .kn-btn{font-family:var(--sl-font-body) !important; font-size:14px; letter-spacing:0; text-transform:none; font-weight:600; line-height:1.2;
  padding:8px 14px; border-radius:var(--sl-radius-md); border:1.5px solid var(--sl-brand-hover); background:var(--sl-surface); color:var(--sl-brand-hover)}
[data-sl-page] #lesson .kn-btn:hover{background:var(--sl-ground)}
[data-sl-page] #lesson .kn-btn.on{background:var(--sl-build-wash); color:var(--sl-brand-deep); border-color:var(--sl-brand-hover)}
[data-sl-page] #lesson .kn-btn:focus-visible{outline:3px solid var(--sl-brand-deep); outline-offset:2px}
[data-sl-page] #lesson .kn-line{font-size:14.5px}
[data-sl-page] #lesson .lesson-side p{margin:0 0 10px}
[data-sl-page] #lesson .lesson-side figure{margin-top:clamp(14px,2vw,20px)}
[data-sl-page] #lesson .sec-head .lede{max-width:none}
[data-sl-page] #lesson .step{padding:12px 0}
[data-sl-page] .ad .sec-head .lede{text-wrap:pretty}

/* ---- v10 (Paul, 23 Sep): Where it lives. The framework PDF is the poster card's picture and its link is the download.
   Every card opens with a picture band of one fixed height on the warm ground, so the four cards share top edges, and the
   links sit on one baseline (margin-top:auto on .go). No coloured edges: the cover takes the kit's soft shadow. ---- */
[data-sl-page] .where-pic{height:150px; margin:-6px -6px 16px; border-radius:10px; background:var(--sl-ground); display:flex; align-items:center; justify-content:center; overflow:hidden}
[data-sl-page] .where-pic img{display:block; max-width:88%; max-height:128px; width:auto; height:auto}
[data-sl-page] .where-pic-pdf img{border-radius:4px; box-shadow:var(--sl-shadow-hover), var(--sl-shadow-hover), var(--sl-shadow-hover); transition:transform .25s}
[data-sl-page] .where-grid li:hover .where-pic-pdf img{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .where-pic-pdf img{transition:none} }
[data-sl-page] .wp-plan{background:var(--sl-surface); border-radius:8px; box-shadow:var(--sl-shadow-hover); padding:10px 12px 12px; width:78%; display:flex; flex-wrap:wrap; gap:5px}
[data-sl-page] .wp-plan b{flex-basis:100%; font-family:var(--sl-font-display) !important; font-weight:600; font-size:13px; line-height:1.25; color:var(--sl-ink); margin-bottom:3px}
[data-sl-page] .wp-plan .pl-card{font-size:11.5px; padding:5px 8px}
@media (max-width:560px){ [data-sl-page] .where-pic{height:140px} }

/* ---- v10 (Paul, 23 Sep): your school's priorities. Replaces the Bloom's / Rosenshine / IB rows.
   One warm-ground panel: the sentence and the cycling priority on the left, its fit and two or three words on the right,
   the six priorities as pressable buttons underneath (white, teal border and type; pressed = teal wash). ---- */
[data-sl-page] .prio{background:var(--sl-ground); border-radius:var(--sl-radius-lg); padding:clamp(18px,2.4vw,30px)}
[data-sl-page] .prio-list{list-style:none; margin:0; padding:0}
[data-sl-page] .prio-list li{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; gap:6px 18px; align-items:center; padding:12px 0; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .prio-list li:last-child{border-bottom:0}
[data-sl-page] .prio-list b{font-family:var(--sl-font-display) !important; font-weight:600; font-size:17px; color:var(--sl-ink)}
[data-sl-page] .prio-list p{margin:0; font-size:15px; line-height:1.5; color:var(--sl-muted); text-align:left}
[data-sl-page] .prio-chips{display:flex; flex-wrap:wrap; gap:5px}
[data-sl-page] .prio.is-live .prio-list{display:none}
[data-sl-page] .prio-stage{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:14px clamp(24px,4vw,56px); align-items:end; min-height:128px}
[data-sl-page] .prio-lead{margin:0 0 6px; font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(17px,1.6vw,20px); color:var(--sl-muted)}
[data-sl-page] .prio-word{margin:0; font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(32px,3.1vw,44px); line-height:1.08; letter-spacing:-.025em; color:var(--sl-brand)}   /* at 32px and up, the brand teal passes as large type */
[data-sl-page] .prio-line{margin:0 0 12px; font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(18px,1.7vw,21px); line-height:1.3; color:var(--sl-ink)}
[data-sl-page] .prio-fit .prio-chips .pl-card{font-size:14px; padding:8px 12px}
@keyframes priIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
[data-sl-page] .prio-in .prio-word{animation:priIn .5s cubic-bezier(.3,.7,.3,1) both}
[data-sl-page] .prio-in .prio-line{animation:priIn .5s .12s cubic-bezier(.3,.7,.3,1) both}
[data-sl-page] .prio-in .prio-fit .pl-card{animation:priIn .45s cubic-bezier(.3,.7,.3,1) both}
[data-sl-page] .prio-in .prio-fit .pl-card:nth-child(1){animation-delay:.22s} [data-sl-page] .prio-in .prio-fit .pl-card:nth-child(2){animation-delay:.32s} [data-sl-page] .prio-in .prio-fit .pl-card:nth-child(3){animation-delay:.42s}
[data-sl-page] .prio-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(18px,2.4vw,26px); padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--sl-border)}
[data-sl-page] .prio-tab{appearance:none; cursor:pointer; font-family:var(--sl-font-body) !important; font-weight:600; font-size:14.5px; line-height:1.2; padding:9px 14px; border-radius:var(--sl-radius-md);
  border:1.5px solid var(--sl-brand-hover); background:var(--sl-surface); color:var(--sl-brand-hover)}
[data-sl-page] .prio-tab:hover{background:var(--sl-build-wash)}
[data-sl-page] .prio-tab[aria-pressed="true"]{background:var(--sl-build-wash); color:var(--sl-brand-deep)}
[data-sl-page] .prio-tab:focus-visible{outline:3px solid var(--sl-brand-deep); outline-offset:2px}
@media (max-width:760px){
  [data-sl-page] .prio-stage{grid-template-columns:minmax(0,1fr); align-items:start; min-height:0}
  [data-sl-page] .prio-list li{grid-template-columns:minmax(0,1fr)}
  [data-sl-page] .prio-tab{font-size:13.5px; padding:8px 11px}
}
/* the card eyebrow: `.where-grid p` (0,1,1) was beating `.where-k` (0,1,0), so the eyebrow rendered as grey body type at 15px */
[data-sl-page] .where-grid p.where-k{margin:0 0 8px; font-size:11.5px; line-height:1.4; color:var(--sl-brand-hover)}

/* QA 28 Sep: the pathway eyebrow reads like every other eyebrow on the page (mono, small caps), not the display font */
[data-sl-page] .tp .tp-eyebrow{font-family:var(--sl-font-mono) !important; font-size:11.5px; line-height:1.5; letter-spacing:.14em; font-weight:600; margin:0 0 14px}

/* ===== shared site header (sl-sales-pages/shared/sitenav) ===== */
[data-sl-page] .sn .row{gap:20px}
[data-sl-page] .sn-burger{display:none; margin-left:8px; width:40px; height:40px; border:1px solid var(--sl-border); border-radius:8px; background:var(--sl-surface); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:4px}
[data-sl-page] .sn-burger span{display:block; width:16px; height:1.5px; background:var(--sl-ink)}
@media (max-width:980px){
  [data-sl-page] .sn .row{gap:10px}
  [data-sl-page] .sn-burger{display:flex}
}

/* ===== shared platform band =====
   A filled band in the page's own colour, set by data-domain (the page's {{DOMAIN}}): map = --sl-map-text, say = --sl-say-text,
   build and brand = --sl-brand-hover. Any other value falls back to brand. White body text on each fill, measured 23 Sep 2026:
   map-text 5.50:1, say-text 6.16:1, brand-hover 6.44:1, all past AA 4.5. The *-text tokens are the fills because the base
   domain colours fail white text (map 3.17:1, say 4.17:1, brand 4.44:1). The button hover (fill on its wash) is 4.80:1 at worst. Colour rules carry #platform so a page's own .accent,
   .eyebrow or .btn-primary rules cannot repaint the band. The button is white, the lightest thing on the band.
   The illustration uses one colour family (the fill and its wash) plus white and ink. Everything below is styled as the
   FINISHED frame; platformband.js animates from it, so without JS, or under reduced motion, the finished frame shows. */
[data-sl-page] #platform.pb{--pb:var(--sl-brand-hover); --pbw:var(--sl-build-wash); background:var(--pb); color:var(--sl-surface); border:0}
[data-sl-page] #platform.pb[data-domain="map"]{--pb:var(--sl-map-text); --pbw:var(--sl-map-wash)}
[data-sl-page] #platform.pb[data-domain="say"]{--pb:var(--sl-say-text); --pbw:var(--sl-say-wash)}
[data-sl-page] .pb-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center}
[data-sl-page] #platform .eyebrow{color:var(--sl-surface); opacity:1}
[data-sl-page] #platform h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 16px; color:var(--sl-surface); max-width:20ch}
[data-sl-page] #platform .accent{color:var(--sl-surface); text-decoration:underline; text-decoration-color:var(--pbw); text-decoration-thickness:3px; text-underline-offset:7px}
[data-sl-page] #platform .pb-lede{font-size:18px; line-height:1.55; color:var(--sl-surface); margin:0 0 28px; max-width:52ch}
[data-sl-page] .pb-act{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
[data-sl-page] #platform a.pb-btn{width:auto; font-size:17px; padding:15px 24px; background:var(--sl-surface); color:var(--pb); border-color:var(--sl-surface); filter:none}
[data-sl-page] #platform a.pb-btn:hover{background:var(--pbw); color:var(--pb); filter:none}
[data-sl-page] #platform .pb-note{font-size:15px; color:var(--sl-surface); margin:0}

/* the illustration. The stage is a size container so the chip type scales with it at 320. The deck is only a place:
   at the start of each loop the four chips sit there (card one on top), and the cursor carries them down one at a time. */
[data-sl-page] .pb-ill{display:flex; justify-content:center}
[data-sl-page] .pb-stage{position:relative; width:min(100%,390px); container-type:inline-size; padding-top:86px}
[data-sl-page] .pb-deck{position:absolute; top:0; left:2px; width:10px; height:10px}
[data-sl-page] .pb-card{background:var(--sl-surface); border-radius:var(--sl-radius-lg); padding:16px 16px 14px; box-shadow:0 12px 28px color-mix(in srgb, var(--sl-ink) 20%, transparent); position:relative}
[data-sl-page] #platform .pb-card-h{font-family:var(--sl-font-display) !important; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pb); margin:0 0 10px}
[data-sl-page] .pb-slots{list-style:none; margin:0; padding:0; display:grid; gap:8px}
[data-sl-page] .pb-slot{position:relative; height:46px; border-radius:var(--sl-radius-md); background:var(--sl-ground); border:1.5px dashed var(--sl-border-strong); box-sizing:border-box}
[data-sl-page] .pb-chip{position:absolute; inset:-1.5px; display:flex; align-items:center; gap:10px; padding:0 10px 0 10px; box-sizing:border-box;
  background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:var(--sl-radius-md); z-index:1;
  box-shadow:0 1px 3px color-mix(in srgb, var(--sl-ink) 10%, transparent); transition:box-shadow .25s ease; will-change:transform}
[data-sl-page] .pb-chip.pb-up{box-shadow:0 16px 30px color-mix(in srgb, var(--sl-ink) 22%, transparent)}
[data-sl-page] #platform .pb-num{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--pbw); color:var(--pb);
  font-family:var(--sl-font-display) !important; font-size:13px; font-weight:700; line-height:1}
[data-sl-page] #platform .pb-chip-t{flex:1; min-width:0; font-family:var(--sl-font-body) !important; font-size:clamp(12.5px,4cqw,15px); font-weight:600; line-height:1.15; color:var(--sl-ink)}
[data-sl-page] .pb-tick{flex:none; width:22px; height:22px}
[data-sl-page] .pb-tick svg{display:block; width:22px; height:22px; overflow:visible}
[data-sl-page] .pb-tick circle{fill:var(--pb); transform-origin:12px 12px}
[data-sl-page] .pb-tick path{fill:none; stroke:var(--sl-surface); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:15}
[data-sl-page] .pb-printer{display:block; width:min(62%,230px); height:auto; margin:-4px auto 0}
[data-sl-page] .pb-pr-tray{fill:var(--sl-surface)}
[data-sl-page] .pb-pr-body{fill:var(--pbw)}
[data-sl-page] .pb-pr-led{fill:var(--pb)}
[data-sl-page] .pb-pr-slot{fill:var(--sl-ink)}
[data-sl-page] .pb-sh-paper{fill:var(--sl-surface)}
[data-sl-page] .pb-sh-line{fill:var(--sl-border-strong)}
[data-sl-page] .pb-sh-venn{fill:none; stroke:var(--pb); stroke-width:3}
[data-sl-page] .pb-sh-venn + .pb-sh-venn{stroke-opacity:.45}
[data-sl-page] .pb-sh-block{fill:var(--pbw); stroke:var(--pb); stroke-width:1.5}
[data-sl-page] .pb-cursor{position:absolute; left:0; top:0; width:26px; height:26px; z-index:30; opacity:0; pointer-events:none; overflow:visible; will-change:transform}
[data-sl-page] .pb-cursor path{fill:var(--sl-ink); stroke:var(--sl-surface); stroke-width:1.6; stroke-linejoin:round}

@media (max-width:860px){
  [data-sl-page] .pb-grid{grid-template-columns:1fr}
  [data-sl-page] .pb-ill{justify-content:flex-start}
}

/* ================= FOR THE LEARNER: a wordy task broken into four moves (Paul, 25 Sep) =================
   ONE clock (--lr-clk, 26s) on the section root; stagger lives in the keyframe percentages, no animation-delay.
   Finished frame first, so frame 0, a paused frame and anyone arriving mid-scroll see the whole story:
     finished 0% to 18%   fade 18% to 22%   the task alone, "I don't know where to start" 24% to 32%
     step 1 32% to 37%    step 2 44% to 49%   step 3 56% to 61%   step 4 68% to 73%   "Four steps" 80% to 100%
   Each step: its phrase in the task is underlined in the card's family colour (a mark, G12: the framework is the
   subject), then its row rises in. Reduced motion or Pause: paused, and at 0% that is the finished frame. */

[data-sl-page] .lr{--lr-clk:26s}
[data-sl-page] .lr-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,56px); align-items:center}
[data-sl-page] .lr-head{margin-bottom:0}
[data-sl-page] .lr-more{font-size:15.5px; line-height:1.62; color:var(--sl-muted); margin:12px 0 0; max-width:48ch}

[data-sl-page] .lr-stage{background:var(--sl-ground); border-radius:var(--sl-radius-lg); padding:clamp(16px,2.2vw,26px); display:grid; grid-template-columns:minmax(0,1fr) 200px; grid-template-areas:"sheet who" "steps steps"; gap:16px 18px; min-width:0}
[data-sl-page] .lr-sheet{grid-area:sheet; background:var(--sl-surface); border-radius:10px; padding:16px 18px 18px; min-width:0}
[data-sl-page] .lr-k{font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--sl-muted); margin:0 0 10px}
[data-sl-page] .lr-task{font-family:var(--sl-font-body) !important; font-size:clamp(15.5px,1.25vw,17px); line-height:1.7; color:var(--sl-ink); margin:0}

/* the underline: a 3px bar in the family colour, drawn left to right */
[data-sl-page] .lr-u{--lr-c:var(--sl-brand); background-image:linear-gradient(var(--lr-c),var(--lr-c)); background-repeat:no-repeat; background-position:0 100%; background-size:100% 3px; padding-bottom:2px}
[data-sl-page] .lr-u[data-f="green"]{--lr-c:var(--sl-tf-green)} [data-sl-page] .lr-u[data-f="blue"]{--lr-c:var(--sl-tf-blue)}
[data-sl-page] .lr-u[data-f="yellow"]{--lr-c:var(--sl-tf-yellow)} [data-sl-page] .lr-u[data-f="red"]{--lr-c:var(--sl-tf-red)}

/* the learner and what they might think */
[data-sl-page] .lr-who{grid-area:who; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0}
[data-sl-page] .lr-bust{width:52px; height:52px; display:block}
[data-sl-page] .lr-body{fill:var(--sl-surface); stroke:var(--sl-ink); stroke-width:1.6; stroke-linejoin:round}
[data-sl-page] .lr-collar{fill:none; stroke:var(--sl-ink); stroke-width:1.6; stroke-linejoin:round}
[data-sl-page] .lr-head{fill:var(--sl-surface); stroke:var(--sl-ink); stroke-width:1.6}
[data-sl-page] .lr-hair{fill:var(--sl-ink)}
[data-sl-page] .lr-bub{background:var(--sl-surface); border-radius:10px; padding:10px 12px 12px; width:100%; position:relative}
[data-sl-page] .lr-bub::before{content:""; position:absolute; left:18px; top:-7px; width:14px; height:14px; background:var(--sl-surface); transform:rotate(45deg)}
[data-sl-page] .lr-bub-k{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--sl-muted); margin:0 0 6px; position:relative}
[data-sl-page] .lr-bub-t{display:grid}
[data-sl-page] .lr-bub-t > p{grid-area:1/1; margin:0}
[data-sl-page] .lr-hand{color:var(--sl-ink); font-size:21px; line-height:1.05; transform:rotate(-2deg); transform-origin:0 50%}
[data-sl-page] .lr-pause{font-family:var(--sl-font-body) !important; font-size:13px; font-weight:600; color:var(--sl-brand-hover); background:none; border:0; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
[data-sl-page] .lr-pause:focus-visible{outline:2px solid var(--sl-brand-hover); outline-offset:2px; border-radius:4px}

/* the four steps */
[data-sl-page] .lr-steps{grid-area:steps; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
[data-sl-page] .lr-steps li{background:var(--sl-surface); border-radius:10px; padding:12px 14px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"n card" "t t"; gap:8px 10px; align-items:center; min-width:0}
[data-sl-page] .lr-n{grid-area:n; font-family:var(--sl-font-display) !important; font-weight:600; font-size:20px; color:var(--sl-brand-hover); line-height:1}
[data-sl-page] .lr-steps .pl-card{grid-area:card; justify-self:start; font-size:14px}
[data-sl-page] .lr-steps p{grid-area:t; margin:0; font-size:15px; line-height:1.45; color:var(--sl-ink)}
[data-sl-page] .lr-steps p b{display:block; font-weight:600; margin-bottom:6px}
[data-sl-page] .lr-steps .lr-hand{display:block; font-size:20px}

/* ---- the one clock ---- */
[data-sl-page] .lr-a,[data-sl-page] .lr-u{animation-duration:var(--lr-clk); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
[data-sl-page] .lr-u1{animation-name:lrU1} [data-sl-page] .lr-u2{animation-name:lrU2} [data-sl-page] .lr-u3{animation-name:lrU3} [data-sl-page] .lr-u4{animation-name:lrU4}
[data-sl-page] .lr-s1{animation-name:lrS1} [data-sl-page] .lr-s2{animation-name:lrS2} [data-sl-page] .lr-s3{animation-name:lrS3} [data-sl-page] .lr-s4{animation-name:lrS4}
[data-sl-page] .lr-b0{animation-name:lrB0} [data-sl-page] .lr-b5{animation-name:lrB5} [data-sl-page] .lr-bw{animation-name:lrBw}
@keyframes lrU1{0%,18%{background-size:100% 3px} 22%,32%{background-size:0% 3px} 35%,100%{background-size:100% 3px}}
@keyframes lrU2{0%,18%{background-size:100% 3px} 22%,44%{background-size:0% 3px} 47%,100%{background-size:100% 3px}}
@keyframes lrU3{0%,18%{background-size:100% 3px} 22%,56%{background-size:0% 3px} 59%,100%{background-size:100% 3px}}
@keyframes lrU4{0%,18%{background-size:100% 3px} 22%,68%{background-size:0% 3px} 71%,100%{background-size:100% 3px}}
@keyframes lrS1{0%,18%{opacity:1;transform:none} 22%{opacity:0;transform:none} 22.1%,34%{opacity:0;transform:translateY(10px)} 37%,100%{opacity:1;transform:none}}
@keyframes lrS2{0%,18%{opacity:1;transform:none} 22%{opacity:0;transform:none} 22.1%,46%{opacity:0;transform:translateY(10px)} 49%,100%{opacity:1;transform:none}}
@keyframes lrS3{0%,18%{opacity:1;transform:none} 22%{opacity:0;transform:none} 22.1%,58%{opacity:0;transform:translateY(10px)} 61%,100%{opacity:1;transform:none}}
@keyframes lrS4{0%,18%{opacity:1;transform:none} 22%{opacity:0;transform:none} 22.1%,70%{opacity:0;transform:translateY(10px)} 73%,100%{opacity:1;transform:none}}
@keyframes lrB0{0%,22%{opacity:0} 25%,31%{opacity:1} 33%,100%{opacity:0}}
@keyframes lrBw{0%,18%{opacity:1} 21%,23%{opacity:0} 25%,31%{opacity:1} 33%,80%{opacity:0} 83%,100%{opacity:1}}
@keyframes lrB5{0%,18%{opacity:1} 21%,80%{opacity:0} 83%,100%{opacity:1}}

[data-sl-page] .lr.lr-paused .lr-a,[data-sl-page] .lr.lr-paused .lr-u{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .lr .lr-a,[data-sl-page] .lr .lr-u{animation-play-state:paused !important}
  [data-sl-page] .lr-pause{display:none}
}

@media (max-width:1000px){
  [data-sl-page] .lr-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  [data-sl-page] .lr-stage{grid-template-columns:1fr; grid-template-areas:"sheet" "who" "steps"}
  [data-sl-page] .lr-who{flex-direction:row; flex-wrap:wrap; align-items:flex-start}
  [data-sl-page] .lr-bust{width:44px; height:44px; flex:none}
  [data-sl-page] .lr-bub{flex:1; width:auto; min-width:0}
  [data-sl-page] .lr-bub::before{left:-6px; top:16px}
  [data-sl-page] .lr-pause{flex-basis:100%; text-align:left}
  [data-sl-page] .lr-steps{grid-template-columns:1fr}
}

/* ================= HOW IT IS USED: three explainer loops (reading, writing, new ideas) =================
   Method: skill sl-explainer-animation. Pure SVG and CSS, no script.
   ONE clock for all three panels (--ua-clk, 14s), set on the section root so no animated element can
   fall outside it. Stagger is written as percentages inside each element's own keyframes; there is no
   animation-delay anywhere. FINISHED FRAME FIRST (23 Sep 2026, after a screenshot of the first frame
   showed bare text, empty gaps and an empty panel): the loop opens on the finished drawing, so frame 0,
   any paused frame and anyone arriving mid-scroll see the whole story. Timeline, the same for all panels:
     finished 0% to 18%    fade 18% to 22%    blank 22% to 24%
     beat 1   26% to 47%   beat 2   49% to 68%   beat 3   69% to 92%    finished again 92% to 100%
   (the build is the old 0 to 90% timeline scaled into 24% to 92%: new = 24 + old x 68/90).
   Reduced motion: every animated element is paused at 0% of the clock, which IS the finished drawing
   (both moves made, the last caption showing).
   v10 (23 Sep, Paul): two moves per panel, ink text, one highlight style (.ua-hl, the teal wash); the family colours
   are on the chips only. */

[data-sl-page] .ua{--ua-clk:14s; background:var(--sl-ground)}
[data-sl-page] .ua-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch}
[data-sl-page] .ua-panel{background:var(--sl-surface); border-radius:var(--sl-radius-lg); padding:20px 18px 22px; display:flex; flex-direction:column; min-width:0}
[data-sl-page] .ua-eb{font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--sl-muted); margin:0 0 8px}
[data-sl-page] .ua-h{font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(19px,1.6vw,21px); line-height:1.25; letter-spacing:-.01em; color:var(--sl-ink); margin:0 0 16px}
[data-sl-page] .ua-stage{margin:0 0 16px}
[data-sl-page] .ua-svg{display:block; width:100%; height:auto; overflow:visible}
[data-sl-page] .ua-txt{font-family:var(--sl-font-body) !important; font-size:15px; line-height:1.6; color:var(--sl-muted); margin:auto 0 0}

/* ---- the cards, drawn like the page's .pl-card chips ---- */
[data-sl-page] .ua-chip{fill:var(--sl-brand)}
[data-sl-page] .ua-chip[data-f="green"]{fill:var(--sl-brand-hover)}   /* white chip text: 6.44:1, not 4.44:1 */ [data-sl-page] .ua-chip[data-f="blue"]{fill:var(--sl-tf-blue)}
[data-sl-page] .ua-chip[data-f="yellow"]{fill:var(--sl-tf-yellow)} [data-sl-page] .ua-chip[data-f="orange"]{fill:var(--sl-tf-orange)} [data-sl-page] .ua-chip[data-f="red"]{fill:var(--sl-tf-red)}
[data-sl-page] .ua-chip-t{font-family:var(--sl-font-display) !important; font-weight:600; font-size:14px; fill:var(--sl-surface)}
[data-sl-page] .ua-chip[data-f="yellow"] + .ua-chip-t{fill:var(--sl-ink)}

/* ---- type inside the drawings: nothing under 13 units, which is 12.3px at 390 wide ---- */
[data-sl-page] .ua-read,[data-sl-page] .ua-frame{font-family:var(--sl-font-body) !important; font-size:14.5px; fill:var(--sl-ink)}
[data-sl-page] .ua-q{font-family:var(--sl-font-body) !important; font-weight:600; font-size:14.5px; fill:var(--sl-ink)}
[data-sl-page] .ua-ans{font-family:var(--sl-font-body) !important; font-style:italic; font-size:14.5px; fill:var(--sl-ink)}
[data-sl-page] .ua-cap{font-family:var(--sl-font-display) !important; font-weight:600; font-size:15px; fill:var(--sl-ink)}
[data-sl-page] .ua-mono{font-family:var(--sl-font-mono) !important; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; fill:var(--sl-muted)}
[data-sl-page] .ua-crit{font-family:var(--sl-font-body) !important; font-size:14px; fill:var(--sl-ink)}
[data-sl-page] .ua-idea{font-family:var(--sl-font-display) !important; font-weight:600; font-size:24px; letter-spacing:-.01em; fill:var(--sl-ink)}
[data-sl-page] .ua-rule{fill:none; stroke:var(--sl-border-strong); stroke-width:1.5; stroke-dasharray:100 200}
[data-sl-page] .ua-gap{font-weight:600; fill-opacity:0}
[data-sl-page] .ua-blank{fill:none; stroke:var(--sl-muted); stroke-width:1.5; stroke-dasharray:3 3}
[data-sl-page] .ua-tile-t{font-family:var(--sl-font-body) !important; font-weight:600; font-size:14.5px; fill:var(--sl-ink)}
[data-sl-page] .ua-tick{fill:none; stroke:var(--sl-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100 200}
[data-sl-page] .ua-note{fill:var(--sl-ground); stroke:var(--sl-border); stroke-width:1}
[data-sl-page] .ua-note-t{font-family:var(--sl-font-body) !important; font-size:13.5px; fill:var(--sl-ink)}
[data-sl-page] .ua-venn{fill:none; stroke:var(--sl-muted); stroke-width:2; stroke-dasharray:100 200}
[data-sl-page] .ua-vt{font-family:var(--sl-font-body) !important; font-size:13px; fill:var(--sl-ink); text-anchor:middle}
[data-sl-page] .ua-vb{font-weight:600}
[data-sl-page] .ua-bub{fill:var(--sl-surface); stroke:var(--sl-border-strong); stroke-width:1.2}
[data-sl-page] .ua-bub-t{font-family:var(--sl-font-display) !important; font-weight:600; font-size:14.5px; fill:var(--sl-ink); text-anchor:middle}
/* the ONE highlight style (v10): a pale teal wash behind the words that matter; the words stay ink */
[data-sl-page] .ua-hl{fill:var(--sl-build-wash)}

/* ---- the one clock ---- */
[data-sl-page] .ua-a{animation-duration:var(--ua-clk); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
[data-sl-page] .ua-hl{transform-box:fill-box; transform-origin:0 50%}

/* 1 · READING. beat 1 Extract (the phrase is highlighted), beat 2 Infer (a question, then the answer is written) */
@keyframes uaC1{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,26.3%{opacity:0;transform:translateY(-6px)} 29.3%,92%,100%{opacity:1;transform:none}}
@keyframes uaC2{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,48.9%{opacity:0;transform:translateY(-6px)} 52%,92%,100%{opacity:1;transform:none}}
[data-sl-page] .ua-r-c1{animation-name:uaC1} [data-sl-page] .ua-r-c2{animation-name:uaC2}
@keyframes uaHl{0%,18%{transform:scaleX(1);opacity:1} 22%,23.9%{transform:scaleX(1);opacity:0} 24%,31%{transform:scaleX(0);opacity:1} 36%,92%,100%{transform:scaleX(1);opacity:1}}
[data-sl-page] .ua-r-hl{animation-name:uaHl}
@keyframes uaQ{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,55%{opacity:0;transform:translateY(4px)} 58%,92%,100%{opacity:1;transform:none}}
[data-sl-page] .ua-r-q{animation-name:uaQ}
@keyframes uaL1{0%,18%{stroke-dashoffset:0;opacity:1} 22%,23.9%{stroke-dashoffset:0;opacity:0} 24%,60%{stroke-dashoffset:100;opacity:1} 64.5%,92%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes uaL2{0%,18%{stroke-dashoffset:0;opacity:1} 22%,23.9%{stroke-dashoffset:0;opacity:0} 24%,62.3%{stroke-dashoffset:100;opacity:1} 66.8%,92%,100%{stroke-dashoffset:0;opacity:1}}
[data-sl-page] .ua-r-l1{animation-name:uaL1} [data-sl-page] .ua-r-l2{animation-name:uaL2}
@keyframes uaAns{0%,18%{opacity:1} 22%,23.9%,24%,67%{opacity:0} 71%,92%,100%{opacity:1}}
[data-sl-page] .ua-r-ans{animation-name:uaAns}
@keyframes uaCap1{0%,18%,22%,23.9%,24%,27%{opacity:0} 30%,45.9%{opacity:1} 48.2%,92%,100%{opacity:0}}
@keyframes uaCap2{0%,18%{opacity:1} 22%,23.9%,24%,51%{opacity:0} 54%,92%,100%{opacity:1}}
[data-sl-page] .ua-r-cap1{animation-name:uaCap1} [data-sl-page] .ua-r-cap2{animation-name:uaCap2}

/* 2 · WRITING. beat 1 the two science words drop in, beat 2 the two joins, then the tick.
   Tile travel (dx,dy) and the blanks are measured from the rendered text (Inter 600, getStartPositionOfChar and
   getComputedTextLength in headless Chromium), not guessed. Re-measure if the words change.
   v10: the highlight travels with each word into its gap. */
@keyframes uaWT1{0%,18%{opacity:1;transform:translate(94.1px,49px)} 22%,23.9%{opacity:0;transform:translate(94.1px,49px)} 24%{opacity:0;transform:translate(0,0)} 26.3%,30%{opacity:1;transform:translate(0,0)} 34.6%,92%,100%{opacity:1;transform:translate(94.1px,49px)}}
@keyframes uaWT2{0%,18%{opacity:1;transform:translate(-117.5px,75px)} 22%,23.9%{opacity:0;transform:translate(-117.5px,75px)} 24%{opacity:0;transform:translate(0,0)} 26.3%,36.1%{opacity:1;transform:translate(0,0)} 40.6%,92%,100%{opacity:1;transform:translate(-117.5px,75px)}}
@keyframes uaWT3{0%,18%{opacity:1;transform:translate(-60.3px,75px)} 22%,23.9%{opacity:0;transform:translate(-60.3px,75px)} 24%{opacity:0;transform:translate(0,0)} 26.3%,48.9%{opacity:1;transform:translate(0,0)} 53.4%,92%,100%{opacity:1;transform:translate(-60.3px,75px)}}
@keyframes uaWT4{0%,18%{opacity:1;transform:translate(-240.3px,101px)} 22%,23.9%{opacity:0;transform:translate(-240.3px,101px)} 24%{opacity:0;transform:translate(0,0)} 26.3%,55.7%{opacity:1;transform:translate(0,0)} 60.2%,92%,100%{opacity:1;transform:translate(-240.3px,101px)}}
[data-sl-page] .ua-w-t1{animation-name:uaWT1} [data-sl-page] .ua-w-t2{animation-name:uaWT2} [data-sl-page] .ua-w-t3{animation-name:uaWT3} [data-sl-page] .ua-w-t4{animation-name:uaWT4}
@keyframes uaWB1{0%,18%,22%,23.9%,24%{opacity:0} 26.3%,33.8%{opacity:1} 35.3%,92%,100%{opacity:0}}
@keyframes uaWB2{0%,18%,22%,23.9%,24%{opacity:0} 26.3%,39.9%{opacity:1} 41.4%,92%,100%{opacity:0}}
@keyframes uaWB3{0%,18%,22%,23.9%,24%{opacity:0} 26.3%,52.7%{opacity:1} 54.2%,92%,100%{opacity:0}}
@keyframes uaWB4{0%,18%,22%,23.9%,24%{opacity:0} 26.3%,59.5%{opacity:1} 61%,92%,100%{opacity:0}}
[data-sl-page] .ua-w-b1{animation-name:uaWB1} [data-sl-page] .ua-w-b2{animation-name:uaWB2} [data-sl-page] .ua-w-b3{animation-name:uaWB3} [data-sl-page] .ua-w-b4{animation-name:uaWB4}
@keyframes uaWTick{0%,18%{stroke-dashoffset:0;opacity:1} 22%,23.9%{stroke-dashoffset:0;opacity:0} 24%,68%{stroke-dashoffset:100;opacity:1} 72.5%,92%,100%{stroke-dashoffset:0;opacity:1}}
[data-sl-page] .ua-w-tick{animation-name:uaWTick}

/* 3 · NEW IDEAS. beat 1 Retrieve, beat 2 Compare (what they share is highlighted), then the move is named */
@keyframes uaNIdea{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,24.8%{opacity:0;transform:translateX(24px)} 30%,92%,100%{opacity:1;transform:none}}
[data-sl-page] .ua-n-idea{animation-name:uaNIdea}
@keyframes uaNC1{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,32.3%{opacity:0;transform:translateY(-6px)} 35.3%,92%,100%{opacity:1;transform:none}}
@keyframes uaNK1{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,36.1%{opacity:0;transform:translateY(-8px)} 39.9%,92%,100%{opacity:1;transform:none}}
@keyframes uaNK2{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,39.9%{opacity:0;transform:translateY(-8px)} 43.6%,92%,100%{opacity:1;transform:none}}
[data-sl-page] .ua-n-c1{animation-name:uaNC1} [data-sl-page] .ua-n-k1{animation-name:uaNK1} [data-sl-page] .ua-n-k2{animation-name:uaNK2}
@keyframes uaNC2{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,48.9%{opacity:0;transform:translateY(-6px)} 52%,92%,100%{opacity:1;transform:none}}
@keyframes uaNV1{0%,18%{stroke-dashoffset:0;opacity:1} 22%,23.9%{stroke-dashoffset:0;opacity:0} 24%,52%{stroke-dashoffset:100;opacity:1} 58%,92%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes uaNV2{0%,18%{stroke-dashoffset:0;opacity:1} 22%,23.9%{stroke-dashoffset:0;opacity:0} 24%,54.2%{stroke-dashoffset:100;opacity:1} 60.3%,92%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes uaNVL{0%,18%{opacity:1} 22%,23.9%,24%,58.8%{opacity:0} 62.5%,92%,100%{opacity:1}}
@keyframes uaNHl{0%,18%{transform:scaleX(1);opacity:1} 22%,23.9%{transform:scaleX(1);opacity:0} 24%,64%{transform:scaleX(0);opacity:1} 68.5%,92%,100%{transform:scaleX(1);opacity:1}}
[data-sl-page] .ua-n-c2{animation-name:uaNC2} [data-sl-page] .ua-n-v1{animation-name:uaNV1} [data-sl-page] .ua-n-v2{animation-name:uaNV2} [data-sl-page] .ua-n-vl{animation-name:uaNVL} [data-sl-page] .ua-n-hl{animation-name:uaNHl}
@keyframes uaNBub{0%,18%{opacity:1;transform:none} 22%,23.9%{opacity:0;transform:none} 24%,73%{opacity:0;transform:translateY(4px)} 77%,92%,100%{opacity:1;transform:none}}
[data-sl-page] .ua-n-bub{animation-name:uaNBub}

@media (prefers-reduced-motion:reduce){
  /* held at 0% of the clock: the finished drawing, nothing moving (G13) */
  [data-sl-page] .ua .ua-a{animation-play-state:paused !important}
}

/* tablets: one column, kept to a readable width */
@media (max-width:980px){ [data-sl-page] .ua-grid{grid-template-columns:minmax(0,1fr); max-width:560px; gap:20px} }
/* phones: the drawings are already narrow, so they keep their layout and only the card padding tightens */
@media (max-width:600px){ [data-sl-page] .ua-panel{padding:18px 14px 20px} [data-sl-page] .ua-h{font-size:19px} }

/* ================= ADAPTIVE TEACHING: one task, more scaffolding or more challenge =================
   v10 (23 Sep, Paul). The task sits ONCE in a strip at the top; three short white cards under three buttons show only
   what changes. The demo takes Compare's blue family (Map It tokens only): the panel is the Map It wash, the buttons
   are white with a blue border and blue type, the lightest thing on the panel (G11), and the pressed one is filled
   with --sl-map-text (white on it is 5.5:1). Labels inside the cards are mono type with no fill, so no label can be
   mistaken for a button. Teal stays everywhere else on the page.
   Budget: at 1440x900 the whole section, heading included, sits inside one screen (measured in REPORT.md).
   Reduced motion: no lift, no play-in and no automatic pass; the buttons still switch the card instantly. */

[data-sl-page] .ad{background:var(--sl-ground); padding-block:clamp(48px,5vw,64px)}
[data-sl-page] .ad .sec-head{max-width:none; margin-bottom:clamp(20px,2.2vw,26px)}
[data-sl-page] .ad .sec-head h2{margin-bottom:12px}
[data-sl-page] .ad .sec-head .lede{max-width:none}
[data-sl-page] .ad-panel{background:var(--sl-map-wash); border-radius:var(--sl-radius-lg); padding:clamp(16px,1.8vw,24px)}

/* ---- the control: one button above each card ---- */
[data-sl-page] .ad-ctl,[data-sl-page] .ad-stage{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
[data-sl-page] .ad-ctl{margin-bottom:12px}
[data-sl-page] .ad-btn{appearance:none; cursor:pointer; font-family:var(--sl-font-display) !important; font-weight:600; font-size:16px; line-height:1.2;
  color:var(--sl-map-text); background:var(--sl-surface); border:1.5px solid var(--sl-map-text); border-radius:var(--sl-radius-md);
  padding:11px 12px; min-height:46px; text-align:center; text-wrap:balance; transition:background-color .2s, color .2s}
[data-sl-page] .ad-btn:hover{background:var(--sl-ground)}
[data-sl-page] .ad-btn[aria-pressed="true"]{background:var(--sl-map-text); color:var(--sl-surface)}
[data-sl-page] .ad-btn:focus-visible{outline:3px solid var(--sl-map-text); outline-offset:3px}

/* ---- the task, shown once ---- */
[data-sl-page] .ad-set{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; background:var(--sl-surface); border-radius:var(--sl-radius-md); padding:14px 20px; margin-bottom:14px}

/* ---- the cards ---- */
[data-sl-page] .ad-stage{align-items:start}
[data-sl-page] .ad-card{background:var(--sl-surface); border-radius:var(--sl-radius-md); padding:16px 20px 18px; transition:transform .35s cubic-bezier(.3,.7,.3,1), box-shadow .35s}
[data-sl-page] .ad-panel[data-state="scaffold"] .ad-card[data-s="scaffold"],
[data-sl-page] .ad-panel[data-state="task"] .ad-card[data-s="task"],
[data-sl-page] .ad-panel[data-state="challenge"] .ad-card[data-s="challenge"]{transform:translateY(-4px); box-shadow:var(--sl-shadow-hover), var(--sl-shadow-hover), var(--sl-shadow-hover)}   /* the token three times: a lift with no colour literal */
[data-sl-page] .ad-word{display:inline-block; font-family:var(--sl-font-display) !important; font-weight:600; font-size:24px; line-height:1; color:var(--sl-surface);
  background:var(--sl-tf-blue); border-radius:9px; padding:8px 14px 9px}   /* white on the blue card is 3.17:1, so it is set at 24px (large text) */
[data-sl-page] .ad-task{font-family:var(--sl-font-display) !important; font-weight:600; font-size:clamp(19px,1.8vw,23px); line-height:1.25; letter-spacing:-.01em; color:var(--sl-ink); margin:0}
[data-sl-page] .ad-add{margin-top:12px}
[data-sl-page] .ad-add:first-child{margin-top:0}
[data-sl-page] .ad-l{font-family:var(--sl-font-mono) !important; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--sl-muted); margin:0 0 4px}
[data-sl-page] .ad-l-c{color:var(--sl-map-text)}
[data-sl-page] .ad-bank{display:flex; flex-wrap:wrap; gap:6px; margin:0}
[data-sl-page] .ad-bank span{font-family:var(--sl-font-body) !important; font-weight:600; font-size:14px; color:var(--sl-ink); background:var(--sl-ground); border-radius:6px; padding:4px 9px}
[data-sl-page] .ad-org{display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--sl-border-strong); border-radius:8px; overflow:hidden}
[data-sl-page] .ad-org span{font-family:var(--sl-font-body) !important; font-weight:600; font-size:14px; color:var(--sl-ink); text-align:center; padding:5px 4px; border-bottom:1.5px solid var(--sl-border-strong)}
[data-sl-page] .ad-org span:first-child,[data-sl-page] .ad-org i:nth-of-type(1){border-right:1.5px solid var(--sl-border-strong)}
[data-sl-page] .ad-org i{display:block; height:24px}
[data-sl-page] .ad-start{font-family:var(--sl-font-body) !important; font-style:italic; font-size:16px; color:var(--sl-ink); margin:0}
[data-sl-page] .ad-crit{font-family:var(--sl-font-body) !important; font-weight:600; font-size:16px; line-height:1.4; color:var(--sl-ink); margin:0}
[data-sl-page] .ad-note{font-family:var(--sl-font-body) !important; font-size:15.5px; line-height:1.45; color:var(--sl-muted); margin:0}
[data-sl-page] .ad-off{font-family:var(--sl-font-body) !important; font-size:15px; color:var(--sl-muted); margin:0; display:flex; flex-wrap:wrap; gap:4px 12px}
[data-sl-page] .ad-off s{text-decoration-thickness:1.5px}

[data-sl-page] .ad-cap{font-family:var(--sl-font-display) !important; font-weight:600; font-size:17px; line-height:1.35; color:var(--sl-map-text); text-align:center; margin:12px 0 0; min-height:1.35em}
[data-sl-page] .ad-link{margin:clamp(14px,1.8vw,20px) 0 0; font-family:var(--sl-font-body) !important; font-size:16px; color:var(--sl-muted)}
[data-sl-page] .ad-link a{color:var(--sl-brand-hover); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* what a card adds plays in, one piece at a time, each time it is chosen */
@keyframes adIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
[data-sl-page] .ad-card.ad-play .ad-add{animation:adIn .45s cubic-bezier(.3,.7,.3,1) both}
[data-sl-page] .ad-card.ad-play .ad-add:nth-child(2){animation-delay:.12s}
[data-sl-page] .ad-card.ad-play .ad-add:nth-child(3){animation-delay:.24s}
[data-sl-page] .ad-card.ad-play .ad-add:nth-child(4){animation-delay:.36s}

@media (prefers-reduced-motion:reduce){
  [data-sl-page] .ad-card,[data-sl-page] .ad-btn{transition:none}
  [data-sl-page] .ad-card.ad-play .ad-add{animation:none}
  [data-sl-page] .ad-panel[data-state] .ad-card{transform:none}
}

/* under 900px only the chosen card shows, in one slot sized to the tallest card, so nothing below it jumps */
@media (max-width:900px){
  [data-sl-page] .ad-stage{grid-template-columns:minmax(0,1fr); align-items:stretch}   /* every version fills the one slot, so the white card never jumps in height */
  [data-sl-page] .ad-card{grid-area:1/1; visibility:hidden; opacity:0; transform:none !important; box-shadow:none !important; transition:opacity .25s, visibility 0s .25s}
  [data-sl-page] .ad-panel[data-state="scaffold"] .ad-card[data-s="scaffold"],
  [data-sl-page] .ad-panel[data-state="task"] .ad-card[data-s="task"],
  [data-sl-page] .ad-panel[data-state="challenge"] .ad-card[data-s="challenge"]{visibility:visible; opacity:1; transition:opacity .25s}
  [data-sl-page] .ad-btn{font-size:14px; padding:8px 6px}
  [data-sl-page] .ad-cap{font-size:15.5px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){ [data-sl-page] .ad-card{transition:none !important} }
@media (max-width:600px){ [data-sl-page] .ad-panel{padding:12px} [data-sl-page] .ad-ctl,[data-sl-page] .ad-stage{gap:8px} [data-sl-page] .ad-card{padding:16px} [data-sl-page] .ad-set{padding:12px 14px; gap:8px 12px} [data-sl-page] .ad-word{font-size:24px} }

/* ---- In schools: the photo rail (parts/schools.html). Every class prefixed sc-. ----
   Scroll-snap rail, three cards and a peek of the fourth on desktop, one card and a peek on a phone.
   No coloured borders: the photographs carry the colour, the controls stay white. */
[data-sl-page] .sc-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,34px)}
[data-sl-page] .sc-head .sec-head{margin-bottom:0}
[data-sl-page] .sc-ctrl{display:flex; gap:8px; flex:none}
[data-sl-page] .sc-btn{display:inline-grid; place-items:center; width:46px; height:46px; padding:0; border-radius:50%; border:1px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); cursor:pointer; transition:border-color .15s, background .15s, opacity .15s}
[data-sl-page] .sc-btn:hover{border-color:var(--sl-ink)}
[data-sl-page] .sc-btn:focus-visible{outline:2px solid var(--sl-brand); outline-offset:2px}
[data-sl-page] .sc-btn[aria-disabled="true"]{opacity:.38; cursor:default}
[data-sl-page] .sc-btn[aria-disabled="true"]:hover{border-color:var(--sl-border-strong)}
[data-sl-page] .sc-btn[hidden]{display:none}
[data-sl-page] .sc-i{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
[data-sl-page] .sc-play .sc-i{fill:currentColor; stroke:none}
[data-sl-page] .sc-play .sc-i-play{display:none}
[data-sl-page] .sc-play[aria-pressed="true"] .sc-i-play{display:block}
[data-sl-page] .sc-play[aria-pressed="true"] .sc-i-pause{display:none}
[data-sl-page] .sc-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

[data-sl-page] .sc-rail{--sc-gap:18px; list-style:none; margin:0; padding:2px 0 6px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--sc-gap)) / 3.2); gap:var(--sc-gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch}
[data-sl-page] .sc-rail::-webkit-scrollbar{display:none}
[data-sl-page] .sc-rail:focus-visible{outline:2px solid var(--sl-brand); outline-offset:4px; border-radius:14px}
[data-sl-page] .sc-slide{scroll-snap-align:start; min-width:0}
[data-sl-page] .sc-slide figure{margin:0}
[data-sl-page] .sc-slide img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:12px; background:var(--sl-ground)}
[data-sl-page] .sc-slide figcaption{display:block; margin-top:12px; padding:0; text-align:left}
[data-sl-page] .sc-what{display:block; font-family:var(--sl-font-display) !important; font-weight:600; font-size:15.5px; line-height:1.35; letter-spacing:-.005em; color:var(--sl-ink)}
[data-sl-page] .sc-where{display:block; margin-top:4px; font-size:13.5px; line-height:1.45; color:var(--sl-muted)}

@media (max-width:760px){
  [data-sl-page] .sc-rail{--sc-gap:14px; grid-auto-columns:84%}
  [data-sl-page] .sc-btn{width:44px; height:44px}
}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .sc-rail{scroll-behavior:auto}
}

/* ===== shared training pathway =====
   Four focuses along one path, no session numbers. One clock: trainingpath.js runs --p from 0 to 1 once, when the path comes into view.
   The staff dots gather into the first session, then the path draws and each session arrives as the line reaches it.
   Without JS, or under prefers-reduced-motion, --p stays 1: the finished path. ONE colour, the page's accent (map blue, say
   orange, build and tf teal, none brand teal): --mk for the page's own filled dot, --acc for type (the *-text token, because
   text under 24px in a domain colour fails AA otherwise). The line and the other sessions' rings are neutral. */
[data-sl-page] .tp{--p:1; --acc:var(--sl-brand-hover); --mk:var(--sl-brand); font-family:var(--sl-font-body) !important; color:var(--sl-ink)}
[data-sl-page] .tp[data-highlight="map"]{--acc:var(--sl-map-text); --mk:var(--sl-map)}
[data-sl-page] .tp[data-highlight="say"]{--acc:var(--sl-say-text); --mk:var(--sl-say)}
[data-sl-page] .tp[data-highlight="build"]{--acc:var(--sl-build-text); --mk:var(--sl-build)}
[data-sl-page] .tp p{margin:0}
[data-sl-page] .tp-eyebrow{font-family:var(--sl-font-display) !important; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin:0 0 8px}
[data-sl-page] .tp .tp-h{font-family:var(--sl-font-display) !important; font-size:clamp(24px,2.6vw,32px); line-height:1.2; font-weight:700; margin:0 0 12px; color:var(--sl-ink)}
[data-sl-page] .tp-accent{color:var(--acc)}
[data-sl-page] .tp .tp-intro{font-size:17px; line-height:1.55; color:var(--sl-muted); max-width:64ch; margin:0 0 34px}

[data-sl-page] .tp-track{position:relative}
[data-sl-page] .tp-sessions{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
[data-sl-page] .tp-s{--on:0; --k:clamp(0, calc((var(--p) - .19 - .2 * var(--i)) / .1), 1); position:relative; padding:44px 24px 0 0; margin:0}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"],
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"],
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"],
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"]{--on:1}
[data-sl-page] .tp-s > p{opacity:var(--k); transform:translateY(calc((1 - var(--k)) * 10px))}

/* the path: one neutral line from the first dot to the last, drawn left to right */
[data-sl-page] .tp-line{position:absolute; left:9px; width:75%; top:13.5px; height:3px; border-radius:2px; background:var(--sl-border-strong);
  transform-origin:left center; transform:scaleX(clamp(0, calc((var(--p) - .2) / .6), 1))}
[data-sl-page] .tp-dot{position:absolute; z-index:1; box-sizing:border-box; border-radius:50%; background:var(--sl-surface); border:3px solid var(--sl-faint); box-shadow:0 0 0 5px var(--sl-surface);
  width:calc(18px + 8px * var(--on)); height:calc(18px + 8px * var(--on)); left:calc(-4px * var(--on)); top:calc(6px - 4px * var(--on));
  transform:scale(clamp(0, calc((var(--p) - .19 - .2 * var(--i)) / .05), 1))}

/* the staff: small dots that gather into the first session, then are gone */
[data-sl-page] .tp-staff{position:absolute; left:9px; top:15px; width:0; height:0; z-index:2}
[data-sl-page] .tp-staff i{position:absolute; left:-3.5px; top:-3.5px; width:7px; height:7px; border-radius:50%; background:var(--sl-faint);
  opacity:calc(1 - clamp(0, calc((var(--p) - .15) / .08), 1));
  transform:translate(calc(var(--x) * 1px * (1 - clamp(0, calc(var(--p) / .2), 1))), calc(var(--y) * 1px * (1 - clamp(0, calc(var(--p) / .2), 1))))}

[data-sl-page] .tp .tp-name{font-family:var(--sl-font-display) !important; font-size:19px; line-height:1.3; font-weight:600; color:var(--sl-ink)}
/* the names link to their pages; the page's own name is plain text (its link is display:none, so it leaves the tab order) */
[data-sl-page] .tp .tp-name a{color:inherit; font:inherit; text-decoration:none; border-radius:2px}
[data-sl-page] .tp .tp-name a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
[data-sl-page] .tp .tp-name a:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
[data-sl-page] .tp .tp-self{display:none}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"] .tp-link,
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"] .tp-link,
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"] .tp-link,
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"] .tp-link{display:none}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"] .tp-self,
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"] .tp-self,
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"] .tp-self,
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"] .tp-self{display:inline}
[data-sl-page] .tp .tp-desc{font-size:16px; line-height:1.5; color:var(--sl-muted); margin-top:6px}
[data-sl-page] .tp .tp-here{display:none; font-size:14px; font-weight:600; color:var(--acc); margin-top:10px}
[data-sl-page] .tp-here::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--mk); margin-right:8px; vertical-align:1px}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"] .tp-dot,
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"] .tp-dot,
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"] .tp-dot,
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"] .tp-dot{background:var(--mk); border-color:var(--mk)}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"] .tp-name,
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"] .tp-name,
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"] .tp-name,
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"] .tp-name{color:var(--acc); font-weight:700}
[data-sl-page] .tp[data-highlight="tf"] .tp-s[data-k="tf"] .tp-here,
[data-sl-page] .tp[data-highlight="map"] .tp-s[data-k="map"] .tp-here,
[data-sl-page] .tp[data-highlight="say"] .tp-s[data-k="say"] .tp-here,
[data-sl-page] .tp[data-highlight="build"] .tp-s[data-k="build"] .tp-here{display:block}

/* phone: the path runs down the left, one short segment from each dot to the next */
@media (max-width:720px){
  [data-sl-page] .tp .tp-intro{margin-bottom:26px}
  [data-sl-page] .tp-sessions{grid-template-columns:1fr}
  [data-sl-page] .tp-s{padding:0 0 26px 44px}
  [data-sl-page] .tp-line{display:none}
  [data-sl-page] .tp-dot{top:calc(2px - 4px * var(--on))}
  [data-sl-page] .tp-s:not(:last-child)::before{content:""; position:absolute; left:7.5px; top:14px; bottom:-4px; width:3px; border-radius:2px; background:var(--sl-border-strong);
    transform-origin:center top; transform:scaleY(clamp(0, calc((var(--p) - .2 - .2 * var(--i)) / .2), 1))}
  [data-sl-page] .tp-staff{top:11px}
}


/* seams where the build split a section into more than one embed */
[data-sl-page] [data-sl-cut~="top"]{padding-top:0}
[data-sl-page] [data-sl-cut~="bottom"]{padding-bottom:0}

/* SPEED 3: the hero lede is the mobile LCP element; it stays painted and Motion only slides it */
html.sl-m [data-sl-page] .hero .lede.arr{opacity:1 !important}