[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}

/* 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)} /* level with the heading beside it, under the eyebrow and the format chips */ /* 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}
/* three screens, one clock: the same app answering three different asks */
@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-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 */
/* a line that draws itself */   /* 7.73:1; the night token measured 2.34:1 here */   /* one rule, or the later one wins */

/* ---- 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}
[data-sl-page] .lb{font-family:var(--sl-font-body) !important; font-size:12px; font-weight:600; fill:var(--sl-say-text)}

/* 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. ---- */
[data-sl-page] .acts { list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px) }
@media (max-width:860px){ [data-sl-page] .acts { grid-template-columns:1fr; gap:28px } }

/* ===== Writer’s Block demo, scoped under .page (read at build time from prototypes/writers-block-demo.html) ===== */
[data-sl-page] {
  /* Product colours: a photograph of a real object, not an interface accent.
     Sampled 23 Sep 2026 from the 2022 kit shoot, ai-handoffs/sales-pages/audit-assets/thumbs/ (median lit-face
     pixel per frame colour: green 049F38 from shoot22 5Q0A4224, yellow ECCB00 from 5Q0A4288, purple 631F7F from
     5Q0A4309), then softened to 87 percent of their OKLCH chroma, on Paul's steer that the drawn blocks read too hard.
     No red (Paul, 23 Sep). Literals on purpose. Curve-fitting them from framework tokens would tie a block to unrelated
     tokens, and the purple still misses by OKLab 0.05. The fix is a writersBlock group in tokens.json.
     WHITE, not light blue (Paul, 24 Sep: "the real product is purple, yellow, green and white; there are no light
     blue blocks"). The white frame is a neutral derived from tokens, not a literal: a white block is the colour of
     the page, so it is drawn as near-white with a neutral edge (build-it/board.css .blk.c-white). */
  --wb-green: #309C45;
  --wb-yellow: #E8CC44;
  --wb-purple: #5F2878;
  --wb-white: color-mix(in oklch, var(--sl-border) 42%, var(--sl-surface));
}
[data-sl-page] .page .blk {
  --f-hi: color-mix(in oklch, var(--f) 80%, var(--sl-surface));
  --f-lo: color-mix(in oklch, var(--f) 88%, var(--sl-ink));
  --blk-shadow: color-mix(in oklch, var(--sl-ink) 20%, transparent);
  --blk-contact: color-mix(in oklch, var(--sl-ink) 14%, transparent);
  appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: center; position: relative; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; container-type: inline-size; border-radius: 8px;
}
[data-sl-page] .page .blk-tabs { display: block; position: relative; height: 5.2cqw; }
[data-sl-page] .page .blk-tab { position: absolute; bottom: -3px; width: 25cqw; height: calc(5.2cqw + 3px); background: var(--f); border-radius: 2.2cqw 2.2cqw .6cqw .6cqw; box-shadow: inset 0 .6cqw 0 var(--f-hi); }
[data-sl-page] .page .blk-tab:first-child { left: 9.5cqw; }
[data-sl-page] .page .blk-tab:last-child { right: 9.5cqw; }
[data-sl-page] .page .blk-body {
  display: block; position: relative; aspect-ratio: 75.38 / 44.4; background: var(--f); border-radius: 4.4cqw;
  box-shadow: inset 0 .8cqw 0 var(--f-hi), inset 0 -1.5cqw 1cqw -.4cqw var(--f-lo), 0 1.4cqw 2.6cqw -.8cqw var(--blk-shadow), 0 .35cqw .7cqw var(--blk-contact);
}
[data-sl-page] .page .blk-panel {
  position: absolute; left: 12%; width: 76%; top: 10.5%; height: 79%; display: flex; align-items: center; justify-content: center;
  padding: 1.4cqw 2.6cqw; overflow: hidden; background: var(--sl-surface); border-radius: 2.4cqw;
  box-shadow: inset 0 .7cqw 1cqw -.3cqw var(--blk-contact);
}
[data-sl-page] .page .blk-text { font-family: var(--sla-hand) !important; font-weight: 600; font-size: 11.2cqw; line-height: 1.02; color: var(--sl-ink); overflow-wrap: break-word; }
[data-sl-page] .page .blk:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: 3px; }
[data-sl-page] .page .blk.lift { translate: 0 -7px; z-index: 20; }
[data-sl-page] .page .blk.lift .blk-body, [data-sl-page] .page .blk.dragging .blk-body { box-shadow: inset 0 .8cqw 0 var(--f-hi), inset 0 -1.5cqw 1cqw -.4cqw var(--f-lo), 0 3.4cqw 4.4cqw -1.4cqw var(--blk-shadow), 0 .35cqw .7cqw var(--blk-contact); }
[data-sl-page] .page .blk.dragging { z-index: 40; cursor: grabbing; rotate: -1.5deg; }
@media (prefers-reduced-motion: reduce) {
[data-sl-page] .page .blk { transition: none !important; }
[data-sl-page] .page .blk.lift { translate: 0 -3px; }
}
[data-sl-page] .page .mv {
  --a: var(--sl-build); --a-text: var(--sl-build-text); --a-wash: var(--sl-build-wash);
  --mv-hole: color-mix(in oklch, var(--sl-muted) 45%, var(--sl-surface));
  --mv-shadow: color-mix(in oklch, var(--sl-ink) 22%, transparent);
  --mv-card-shadow: color-mix(in oklch, var(--sl-ink) 14%, transparent);
  --sla-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  position: relative; background: var(--a-wash); border-radius: var(--sl-radius-lg);
  padding: 18px clamp(14px, 2.4vw, 26px) 16px; color: var(--sl-ink); font-family: var(--sl-font-body) !important;
}
[data-sl-page] .page .mv *, [data-sl-page] .page .mv *::before, [data-sl-page] .page .mv *::after { box-sizing: border-box; }
[data-sl-page] .page .mv-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] .page .mv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
[data-sl-page] .page .mv-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-sl-page] .page .mv-tabs { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
[data-sl-page] .page .mv-main { min-width: 0; display: flex; flex-direction: column; }
[data-sl-page] .page .mv-tab { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 9px 18px; border-radius: var(--sl-radius-pill); border: 1.5px solid var(--sl-border-strong); background: var(--sl-surface); color: var(--sl-ink); font: 600 15.5px/1.2 var(--sl-font-body); cursor: pointer; }
[data-sl-page] .page .mv-tab:hover { border-color: var(--mv-hole); }
[data-sl-page] .page .mv-tab[aria-selected="true"] { border-color: var(--a); color: var(--a-text); gap: 6px; padding-inline: 11px; }
[data-sl-page] .page .mv-tab[aria-selected="true"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
[data-sl-page] .page .mv-pp span { display: inline-flex; flex-direction: column; }
[data-sl-page] .page .mv-pp span::after { content: "Pause"; height: 0; overflow: hidden; visibility: hidden; }
[data-sl-page] .page .mv-tab:focus-visible, [data-sl-page] .page .mv-go:focus-visible, [data-sl-page] .page .mv-again:focus-visible, [data-sl-page] .page .mv-pp:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: -5px; }
[data-sl-page] .page .mv-pp { appearance: none; -webkit-appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border-radius: var(--sl-radius-pill); border: 1.5px solid var(--sl-border-strong); background: var(--sl-surface); color: var(--sl-ink); font: 600 14.5px/1.2 var(--sl-font-body); cursor: pointer; }
[data-sl-page] .page .mv-pp:hover { border-color: var(--mv-hole); }
[data-sl-page] .page .mv-ppi { position: relative; width: 10px; height: 12px; }
[data-sl-page] .page .mv-ppi::before, [data-sl-page] .page .mv-ppi::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; border-radius: 1px; background: var(--sl-ink); }
[data-sl-page] .page .mv-ppi::before { left: 0; }
[data-sl-page] .page .mv-ppi::after { right: 0; }
[data-sl-page] .page .mv-pp.paused .mv-ppi::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--sl-ink); }
[data-sl-page] .page .mv-pp.paused .mv-ppi::after { content: none; }
[data-sl-page] .page .mv-instr { margin: 0 0 12px; font-size: 16.5px; line-height: 1.45; }
[data-sl-page] .page .mv-instr b { font-weight: 600; }
[data-sl-page] .page .mv-plate { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; background: var(--sl-surface); border-radius: var(--sl-radius-md) var(--sl-radius-md) 0 0; padding: 16px 16px 12px; }
[data-sl-page] .page .mv-ends { margin: 0 0 10px; font: 600 11.5px/1.3 var(--sl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sl-muted); }
[data-sl-page] .page .mv-ends[hidden] { display: none; }
[data-sl-page] .page .mv-zone { container-type: inline-size; min-width: 0; border-radius: 8px; cursor: default; }
[data-sl-page] .page .mv-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; min-height: 182cqw; border-radius: 8px; outline: 1.5px dashed var(--mv-hole); outline-offset: -1.5px; }
[data-sl-page] .page .mv-zone.filled .mv-stack { outline-color: transparent; }
[data-sl-page] .page .mv-zone.over .mv-stack { background: var(--a-wash); outline-color: var(--sl-muted); }
[data-sl-page] .page .mv-stack > .blk + .blk { margin-bottom: -5.2cqw; }
[data-sl-page] .page .mv-zl { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; }
[data-sl-page] .page .mv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); transform: translateY(1px); }
[data-sl-page] .page .mv-slot { min-width: 0; }
[data-sl-page] .page .mv-hole { aspect-ratio: 1000 / 641; border-radius: 8px; outline: 1.5px dashed var(--mv-hole); outline-offset: -1.5px; }
[data-sl-page] .page .mv-slot.filled .mv-hole { outline-color: transparent; }
[data-sl-page] .page .mv-slot.over .mv-hole { background: var(--a-wash); outline-color: var(--sl-muted); }
[data-sl-page] .page .mv-cap { display: block; margin-top: 6px; text-align: center; font: 600 12px/1.3 var(--sl-font-mono); color: var(--a-text); }
[data-sl-page] .page .mv[data-long] .mv-cap { letter-spacing: .06em; text-transform: uppercase; }
[data-sl-page] .page .mv-traywrap { position: relative; margin-top: 0; padding: 12px 16px 14px; background: var(--sl-surface); border-radius: 0 0 var(--sl-radius-md) var(--sl-radius-md); box-shadow: inset 0 1px 0 var(--sl-border); }
[data-sl-page] .page .mv-tray { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 150px)); justify-content: center; gap: 12px 10px; border-radius: var(--sl-radius-md); }
[data-sl-page] .page .mv[data-move="categorise"] .mv-tray { grid-template-columns: repeat(12, minmax(0, 88px)); gap: 10px 8px; }
[data-sl-page] .page .mv-cell { aspect-ratio: 1000 / 641; min-width: 0; }
[data-sl-page] .page .mv-tray.over { background: var(--sl-surface); }
[data-sl-page] .page .mv-traywrap.empty .mv-tray { visibility: hidden; }
[data-sl-page] .page .mv .blk { transform-origin: 0 0; }
[data-sl-page] .page .mv .blk-text { font-size: 18.5cqw; line-height: 1; }
[data-sl-page] .page .mv[data-long] .blk-text { font-size: 13.4cqw; line-height: 1.04; }
[data-sl-page] .page .mv .blk.lift { z-index: 20; }
[data-sl-page] .page .mv .blk.mv-qm::after { content: "?"; position: absolute; z-index: 5; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sl-surface); color: var(--a-text); font: 700 14px/1 var(--sl-font-body); box-shadow: 0 1px 3px var(--mv-shadow); }
[data-sl-page] .page .mv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 12px; min-height: 44px; }
[data-sl-page] .page .mv-result { flex: 1 1 320px; min-height: 2.9em; display: flex; align-items: center; margin: 0; font-size: 16px; line-height: 1.45; }
[data-sl-page] .page .mv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
[data-sl-page] .page .mv-acts[hidden] { display: flex; visibility: hidden; }
[data-sl-page] .page .mv-go { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 10px 20px; border-radius: var(--sl-radius-pill); border: 2px solid var(--a); background: var(--sl-surface); color: var(--a-text); font: 600 15.5px/1.2 var(--sl-font-body); cursor: pointer; }
[data-sl-page] .page .mv-go:hover { border-color: var(--a-text); }
[data-sl-page] .page .mv-again { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--a-text); font: 500 15px/1.2 var(--sl-font-body); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
[data-sl-page] .page .mv-next { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 12px; text-align: center; font-size: 17px; line-height: 1.45; visibility: hidden; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
[data-sl-page] .page .mv-next.shown { visibility: visible; opacity: 1; }
[data-sl-page] .page .mv-next-lb { font: 600 11.5px/1.3 var(--sl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sl-muted); }
[data-sl-page] .page .mv-next-body { max-width: 62ch; }
[data-sl-page] .page .mv-next-k { font-weight: 600; color: var(--a-text); }
@media (max-width: 900px) {
[data-sl-page] .page .mv[data-move="categorise"] .mv-tray { grid-template-columns: repeat(6, minmax(0, 96px)); }
}
@media (max-width: 560px) {
[data-sl-page] .page .mv { padding-inline: 12px; }
[data-sl-page] .page .mv-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
[data-sl-page] .page .mv-tabs::-webkit-scrollbar { display: none; }
[data-sl-page] .page .mv-tab { flex: none; padding: 9px 14px; font-size: 15px; }
[data-sl-page] .page .mv-tab[aria-selected="true"] { padding-inline: 7px; }
[data-sl-page] .page .mv-pp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-sl-page] .page .mv-pp { padding: 8px 15px; }
[data-sl-page] .page .mv-instr { font-size: 16px; }
[data-sl-page] .page .mv-plate { padding: 12px 8px 8px; }
[data-sl-page] .page .mv-traywrap { padding: 10px 8px 12px; }
[data-sl-page] .page .mv-zl { font-size: 12.5px; gap: 4px; }
[data-sl-page] .page .mv-tray, [data-sl-page] .page .mv[data-move="categorise"] .mv-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
[data-sl-page] .page .mv[data-move="categorise"] .mv-tray { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
[data-sl-page] .page .mv[data-long] .blk-text { font-size: 15.6cqw; }
[data-sl-page] .page .mv-cap { font-size: 11px; }
[data-sl-page] .page .mv-foot { margin-top: 10px; }
[data-sl-page] .page .mv-result { min-height: 4.35em; font-size: 15.5px; }
[data-sl-page] .page .mv-next { font-size: 15.5px; }
[data-sl-page] .page .mv .blk-text { font-size: 20cqw; }
}
@media (prefers-reduced-motion: reduce) {
[data-sl-page] .page .mv .blk { transition: none !important; }
}

/* ============================================================
   Build It / Writer's Block page. One accent: Build It teal (--sl-build, --sl-build-text, --sl-build-wash).
   The four product colours appear inside the demo (the physical blocks, --wb-*), never as page accents.
   No rails (G8). Teal text under 24px uses --sl-build-text (rule 6).
   ============================================================ */
[data-sl-page] .accent{color:var(--sl-build)}
[data-sl-page] .eyebrow{color:var(--sl-build-text)}
[data-sl-page] .btn-primary{background:var(--sl-build-text)}
[data-sl-page] .btn-primary:hover{background:color-mix(in oklch, var(--sl-build-text) 82%, var(--sl-ink))}
[data-sl-page] img{max-width:100%; height:auto}
[data-sl-page] figure{margin:0}
[data-sl-page] section{padding-block:clamp(52px,7vw,96px)}
[data-sl-page] section.hero{padding-block:clamp(40px,6vw,76px) clamp(40px,5vw,64px)}
[data-sl-page] .dot{display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--sl-build)}

/* hero: the blocks photograph on white, uncropped */
[data-sl-page] .kit-hero{aspect-ratio:auto; max-height:none; background:var(--sl-surface); overflow:visible; border-radius:0}
[data-sl-page] .kit-hero img{height:auto; object-fit:contain; border-radius:14px}
[data-sl-page] .kit-hero figcaption{margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--sl-muted); text-align:center}
[data-sl-page] .hero-note .dot{margin-right:2px}

/* the demo: the section gives the frame, the demo keeps its own panel */
[data-sl-page] .try{background:var(--sl-surface)}
[data-sl-page] .try .sec-head{margin-bottom:24px}

/* three practical builds and the iteration film */
[data-sl-page] .build-three{background:var(--sl-surface)}
[data-sl-page] .three-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px)}
[data-sl-page] .three-item{min-width:0; border-top:1px solid var(--sl-border-strong); padding-top:22px}
[data-sl-page] .three-number{font:600 13px/1 var(--sl-font-display); color:var(--sl-build-text)}
[data-sl-page] .three-item h3{font-size:clamp(21px,2vw,26px); margin:12px 0 20px}
[data-sl-page] .three-item p{font-size:15.5px; line-height:1.6; color:var(--sl-muted); margin:18px 0 0}
[data-sl-page] .iteration{background:var(--sl-build-wash)}
/* the watch-it-get-better piece lives in wb.watch.css */

/* real classrooms: the Quebec clip, then two YouTube link cards */
[data-sl-page] .film{background:var(--sl-ground)}
[data-sl-page] .film h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12}
[data-sl-page] .film-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start}
[data-sl-page] .film-main video{display:block; width:100%; aspect-ratio:16/9; border-radius:12px; background:var(--sl-ink)}
[data-sl-page] .yt-cards{display:grid; gap:16px}
[data-sl-page] .yt-card{display:grid; grid-template-columns:minmax(0,1fr); background:var(--sl-surface); border-radius:12px; overflow:hidden; color:var(--sl-ink); text-decoration:none}
[data-sl-page] .yt-thumb{position:relative; display:block}
[data-sl-page] .yt-thumb img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
[data-sl-page] .yt-play{position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:var(--sl-surface)}
[data-sl-page] .yt-play::after{content:""; position:absolute; left:22px; top:17px; border-style:solid; border-width:11px 0 11px 17px; border-color:transparent transparent transparent var(--sl-ink)}
[data-sl-page] .yt-copy{display:block; padding:12px 16px 14px}
[data-sl-page] .yt-copy b{display:block; font:600 16px/1.35 var(--sl-font-display)}
[data-sl-page] .yt-copy span{display:block; margin-top:3px; font-size:13.5px; color:var(--sl-build-text); text-decoration:underline}
[data-sl-page] .yt-card:hover .yt-copy b{text-decoration:underline}
[data-sl-page] .yt-card:focus-visible{outline:2px solid var(--sl-build); outline-offset:3px}
[data-sl-page] .film figcaption, [data-sl-page] .lv figcaption, [data-sl-page] .kit-fig figcaption, [data-sl-page] .verdict figcaption{margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--sl-muted)}

/* how to use it in a lesson */
[data-sl-page] .howto{background:var(--sl-surface)}
[data-sl-page] .howto-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px); align-items:center}
[data-sl-page] .howto h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 20px}
[data-sl-page] .howto-grid img{display:block; width:100%; max-width:280px}
[data-sl-page] .howto-steps{list-style:none; counter-reset:st; margin:0; padding:0}
[data-sl-page] .howto-steps li{counter-increment:st; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; padding:16px 0; border-bottom:1px solid var(--sl-border); font-size:16px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .howto-steps li:first-child{border-top:1px solid var(--sl-border)}
[data-sl-page] .howto-steps li::before{content:counter(st); grid-row:1 / span 2; font:500 32px/1 var(--sl-font-display); color:var(--sl-build)}
[data-sl-page] .howto-steps li b{display:block; color:var(--sl-ink); font-family:var(--sl-font-display) !important; font-size:18px; font-weight:600; margin-bottom:2px}

/* two levels */
[data-sl-page] .lv-pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px)}
[data-sl-page] .lv img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px}
[data-sl-page] .lv-tag{display:flex; align-items:center; gap:8px; margin:0 0 10px; font:600 12px/1.3 var(--sl-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sl-build-text)}

/* every age: a grid on wide screens, a swipe rail on phones */
[data-sl-page] .ages{background:var(--sl-ground)}
[data-sl-page] .rail{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px)}
[data-sl-page] .rail figure{background:var(--sl-surface); border-radius:12px; overflow:hidden; height:100%}
[data-sl-page] .rail img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
[data-sl-page] .rail figcaption{padding:14px 16px 16px; font-size:14px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .rail figcaption b{display:block; color:var(--sl-ink); font-family:var(--sl-font-display) !important; font-size:16px; margin-bottom:3px}
[data-sl-page] .age-group{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:center}
/* WHY: the live site stylesheet has a legacy .age-group badge (slate background, white 12px text, padding, margin-left 15px,
   radius 5px) that turned both panels slate with unreadable subtitles. Measured 25 Sep 2026 after go-live. */
[data-sl-page] .age-group{background:none; color:inherit; border-radius:0; margin-left:0; padding:0; font-size:inherit; line-height:inherit}
[data-sl-page] .age-group + .age-group{margin-top:clamp(36px,5vw,64px)}
[data-sl-page] .age-head h3{font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin:0 0 8px}
[data-sl-page] .age-head p{margin:0; font-size:15.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .rail-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
/* v2 (24 Sep): the separating-mixtures photo is a tall tower (about 7:10). In the secondary grid it takes the last column
   and spans both rows, so the other four stay 4:3 and nothing is left ragged. The tower sits at the photo's left, so the
   crop keeps the left edge (object-position) and loses only background on the right. The DOM order stays by age. */
[data-sl-page] .rail-secondary{grid-auto-flow:row dense}
[data-sl-page] .rail-secondary .rail-tall{grid-column:-2 / -1; grid-row:1 / span 2}
[data-sl-page] .rail .rail-tall figure{display:flex; flex-direction:column}
[data-sl-page] .rail .rail-tall img{flex:1 1 auto; min-height:0; aspect-ratio:auto; object-position:left center}
[data-sl-page] .age-group:has(.rail-secondary){grid-template-columns:minmax(0,1fr); gap:18px}
[data-sl-page] .age-group:has(.rail-secondary) .age-head{padding-bottom:12px; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .rail-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the kit */
[data-sl-page] .kit-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
[data-sl-page] .kit h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 20px}
[data-sl-page] .kit-fig img{display:block; width:100%; border-radius:12px}
[data-sl-page] .kit-size{margin:0 0 22px; font-size:17px; line-height:1.6; color:var(--sl-ink); max-width:56ch}
[data-sl-page] .kit-list{list-style:none; margin:0; padding:0}
[data-sl-page] .kit-list li{display:grid; grid-template-columns:8px minmax(0,1fr); gap:12px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--sl-border); font-size:16px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .kit-list li:first-child{border-top:1px solid var(--sl-border)}
[data-sl-page] .kit-list li b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .kit-list .dot{transform:translateY(-1px)}
[data-sl-page] .kit-list .dot-open{background:none; box-shadow:inset 0 0 0 1.5px var(--sl-build)}
[data-sl-page] .first{margin-top:26px}
[data-sl-page] .first h3{font-size:19px; margin:0 0 10px}
[data-sl-page] .first ol{margin:0; padding-left:1.3em; font-size:15.5px; line-height:1.6; color:var(--sl-muted)}
[data-sl-page] .first li{margin:0 0 4px}

/* buy */
[data-sl-page] .buy{background:var(--sl-build-wash)}
[data-sl-page] .tier-picker{border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
[data-sl-page] .tier{position:relative; display:flex; flex-direction:column; min-width:0; background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden; cursor:pointer}
[data-sl-page] .tier:has(input:checked){border:2px solid var(--sl-build-text)}
[data-sl-page] .tier:focus-within{outline:2px solid var(--sl-muted); outline-offset:-2px}
[data-sl-page] .tier input{position:absolute; top:14px; left:14px; width:20px; height:20px; accent-color:var(--sl-build-text); z-index:1}
[data-sl-page] .tier img{display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--sl-surface)}
[data-sl-page] .tier-copy{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; flex:1}
[data-sl-page] .tier-name{font:600 18px/1.25 var(--sl-font-display); color:var(--sl-ink)}
[data-sl-page] .tier-detail,[data-sl-page] .tier-unit{font-size:14px; line-height:1.45; color:var(--sl-muted)}
[data-sl-page] .tier-copy strong{font:600 28px/1.2 var(--sl-font-display); color:var(--sl-ink); margin-top:auto; padding-top:8px}
[data-sl-page] .tier-copy small{font-size:12px; line-height:1.4; color:var(--sl-build-text)}
[data-sl-page] .tier-badge{font:600 12px/1.3 var(--sl-font-body); color:var(--sl-build-text)}
[data-sl-page] .buy-summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin:18px 0 26px; padding:16px 20px; background:var(--sl-surface); border-radius:12px; font-size:15px; color:var(--sl-muted)}
[data-sl-page] .buy-summary strong{font:600 18px/1.3 var(--sl-font-display); color:var(--sl-ink)}
[data-sl-page] .buy-lower{display:grid; grid-template-columns:1fr 1.2fr; gap:18px; align-items:stretch}
[data-sl-page] .order-calc,[data-sl-page] .addons{background:var(--sl-surface); border-radius:14px; padding:clamp(20px,3vw,28px)}
[data-sl-page] .order-calc label{display:block; font:600 19px/1.35 var(--sl-font-display); margin-bottom:15px}
[data-sl-page] .calc-controls{display:flex; gap:10px; align-items:center}
[data-sl-page] .calc-controls input{width:84px; height:44px; padding:8px 10px; font:400 16px var(--sl-font-body); border:1px solid var(--sl-border-strong); border-radius:9px; background:var(--sl-surface); color:var(--sl-ink)}
[data-sl-page] #calcResult{font:600 16px/1.5 var(--sl-font-body); margin:18px 0 0}
[data-sl-page] .addons{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:18px; align-items:center}
[data-sl-page] .addons img{width:100%; border-radius:10px}
[data-sl-page] .addons h3{font-size:18px; line-height:1.35; margin:0 0 8px}
[data-sl-page] .addons h3 span{white-space:nowrap}
[data-sl-page] .addons p{font-size:14.5px; line-height:1.5; color:var(--sl-muted); margin:0 0 8px}
[data-sl-page] .addons a{font-weight:600; color:var(--sl-build-text); text-decoration:underline}
[data-sl-page] .addons small{display:block; font-size:12px; line-height:1.4; color:var(--sl-muted); margin-top:4px}
[data-sl-page] .delivery-note{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--sl-muted); padding:20px 0 24px}
[data-sl-page] .buy-grid{display:block}
[data-sl-page] .price{background:var(--sl-surface); border-radius:14px; padding:clamp(22px,3vw,30px)}
[data-sl-page] .pr-note{margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .routes{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(16px,2vw,24px); align-items:start}
[data-sl-page] .route{background:var(--sl-surface); border-radius:14px; padding:clamp(22px,3vw,30px)}
[data-sl-page] .route h3{font-size:19px; margin:0 0 6px}
[data-sl-page] .route > p{font-size:15px; line-height:1.55; color:var(--sl-muted); margin:0 0 18px}
[data-sl-page] .route .btn{width:100%; justify-content:center}
[data-sl-page] .inv{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px}
[data-sl-page] .inv-f{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--sl-ink)}
[data-sl-page] .inv-f i{font-style:normal; font-weight:400; color:var(--sl-faint-aa)}
[data-sl-page] .inv-f input{font:400 16px/1.3 var(--sl-font-body); color:var(--sl-ink); background:var(--sl-surface); border:1px solid var(--sl-border-strong); border-radius:10px; padding:10px 12px; min-height:44px; width:100%}
[data-sl-page] .inv-f input:focus{outline:2px solid var(--sl-build); outline-offset:-2px}
[data-sl-page] .inv-f input[aria-invalid="true"]{border-color:var(--sl-ink)}
[data-sl-page] .inv-wide, [data-sl-page] .inv-go, [data-sl-page] .inv-err{grid-column:1 / -1}
[data-sl-page] .inv-check{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--sl-ink); min-height:32px}
[data-sl-page] .inv-check input{width:18px; height:18px; accent-color:var(--sl-build-text)}
[data-sl-page] .inv-go{margin-top:4px}
[data-sl-page] .inv-err{margin:0; font-size:14px; color:var(--sl-ink)}
[data-sl-page] .inv-done h4{font-size:19px; margin:0 0 6px}
[data-sl-page] .inv-done p{margin:0; font-size:15px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .bursar{margin-top:clamp(20px,3vw,28px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; background:var(--sl-surface); border-radius:14px; padding:18px clamp(20px,3vw,28px)}
[data-sl-page] .bursar p{margin:0; font-size:15.5px; line-height:1.55; color:var(--sl-muted); max-width:62ch}
[data-sl-page] .bursar p b{color:var(--sl-ink)}
[data-sl-page] .bursar-go{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
[data-sl-page] .bursar-mail{font-size:15px; font-weight:600; color:var(--sl-build-text)}
[data-sl-page] .copied{font-size:14px; color:var(--sl-build-text); min-width:1ch}

/* evidence */
[data-sl-page] .evid{background:var(--sl-surface)}
[data-sl-page] .evid-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,4vw,60px); align-items:start}
[data-sl-page] .evid-h{font-size:clamp(26px,3vw,36px); line-height:1.14; margin:0 0 16px; letter-spacing:-.02em}
[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-q{margin:16px 0 0; padding:16px 18px; border-radius:10px; background:var(--sl-ground)}
[data-sl-page] .evid-q blockquote{margin:0; width:auto; padding:0; background:none; border:0; font-style:normal; font-family:var(--sl-font-display) !important; font-size:17px; line-height:1.45; letter-spacing:-.01em; color:var(--sl-ink); text-align:left}
[data-sl-page] .evid .evid-q .paraphrase{margin:0; font-family:var(--sl-font-display) !important; font-size:17px; line-height:1.45; color:var(--sl-ink)}
[data-sl-page] .evid .evid-q .attrib{margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .evid .honest{margin-top:18px; font-size:15px}
[data-sl-page] .verdict img{display:block; width:100%; max-width:380px; border-radius:12px}

/* FAQ */
[data-sl-page] .faq{background:var(--sl-ground)}
[data-sl-page] .faq-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,60px); align-items:start}
[data-sl-page] .faq .sec-head a{color:var(--sl-build-text); font-weight:600}
[data-sl-page] .fqs{background:var(--sl-surface); border-radius:14px; padding:6px clamp(18px,3vw,28px)}
[data-sl-page] .fq{border-bottom:1px solid var(--sl-border)}
[data-sl-page] .fq:last-child{border-bottom:0}
[data-sl-page] .fq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:17px 0; font:600 16.5px/1.4 var(--sl-font-display); color:var(--sl-ink)}
[data-sl-page] .fq summary::-webkit-details-marker{display:none}
[data-sl-page] .fq summary::after{content:"+"; flex:none; font:400 22px/1 var(--sl-font-body); color:var(--sl-build-text); transition:transform .2s}
[data-sl-page] .fq[open] summary::after{transform:rotate(45deg)}
[data-sl-page] .fq summary:focus-visible{outline:2px solid var(--sl-build); outline-offset:2px; border-radius:4px}
[data-sl-page] .fq p{margin:0 0 18px; font-size:15.5px; line-height:1.62; color:var(--sl-muted); max-width:64ch}

/* the request */
[data-sl-page] .book .lede{color:var(--sl-build-text)}

@media (max-width: 980px){
  [data-sl-page] .rail, [data-sl-page] .rail-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-sl-page] .age-group{grid-template-columns:minmax(0,1fr)}
  [data-sl-page] .faq-grid{grid-template-columns:1fr}
}
@media (max-width: 860px){
  [data-sl-page] .film-grid, [data-sl-page] .kit-grid, [data-sl-page] .evid-grid{grid-template-columns:1fr}
  [data-sl-page] .three-grid{grid-template-columns:1fr}
  [data-sl-page] .buy-lower{grid-template-columns:1fr}
  [data-sl-page] .howto-grid{grid-template-columns:1fr}
  [data-sl-page] .howto-grid img{max-width:200px}
  [data-sl-page] .yt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  [data-sl-page] .lv-pair{grid-template-columns:1fr}
  [data-sl-page] .routes{grid-template-columns:1fr}
  [data-sl-page] .tier-picker{grid-template-columns:1fr}
  [data-sl-page] .tier{display:grid; grid-template-columns:130px minmax(0,1fr)}
  [data-sl-page] .tier img{height:100%; min-height:145px; aspect-ratio:auto}
  [data-sl-page] .tier-copy{padding:14px}
  /* a swipe rail: the next card peeks, so readers know there is more */
  [data-sl-page] .rail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:calc(var(--sl-gut) * -1); padding:0 var(--sl-gut) 8px; scroll-padding-inline:var(--sl-gut); scrollbar-width:thin}
  [data-sl-page] .rail li{flex:0 0 78%; scroll-snap-align:start}
  [data-sl-page] .rail li.rail-tall{flex-basis:50%}
  [data-sl-page] .rail .rail-tall img{flex:none; aspect-ratio:1123/1600}
}
@media (max-width: 480px){
  [data-sl-page] .tier{grid-template-columns:110px minmax(0,1fr)}
  [data-sl-page] .yt-cards{grid-template-columns:1fr}
  [data-sl-page] .addons{grid-template-columns:1fr}
  [data-sl-page] .addons img{max-width:180px}
  [data-sl-page] .inv{grid-template-columns:1fr}
}
[data-sl-page] .evid p.eyebrow{font-size:11.5px; line-height:1.5; margin:0 0 12px; color:var(--sl-build-text)}
[data-sl-page] .verdict img{aspect-ratio:4/3; object-fit:cover; object-position:50% 42%}
[data-sl-page] .inv[hidden], [data-sl-page] .inv-done[hidden], [data-sl-page] .inv-err[hidden], [data-sl-page] #cardButton[hidden]{display:none}
[data-sl-page] .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* v4: generated illustrations in three things and the kit close-ups (every one captioned as an illustration) */
[data-sl-page] .three-fig{margin:0}
[data-sl-page] .three-fig img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px}
[data-sl-page] .three-fig figcaption{margin-top:8px; font-size:13px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .three-item p{margin-top:14px}
[data-sl-page] .kit-strip{list-style:none; margin:clamp(36px,5vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
[data-sl-page] .kit-strip figure{margin:0}
[data-sl-page] .kit-strip img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:12px}
[data-sl-page] .kit-strip figcaption{margin-top:10px; font-size:12.5px; line-height:1.45; color:var(--sl-muted)}
[data-sl-page] .kit-strip figcaption b{display:block; font-family:var(--sl-font-display) !important; font-size:15px; font-weight:600; color:var(--sl-ink); margin-bottom:2px}
@media (max-width: 900px){ [data-sl-page] .kit-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* training: the staff session, the shared year pathway, one research download (a cover with a soft shadow, no outline) */
[data-sl-page] .training{background:var(--sl-surface)}
[data-sl-page] .training h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12}
/* v2 (24 Sep): three real photos side by side, captioned with the place only; a swipe rail on phones, like the gallery */
[data-sl-page] .tr-photos{list-style:none; margin:0 0 clamp(32px,4vw,48px); padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
[data-sl-page] .tr-photos figure{margin:0}
[data-sl-page] .tr-photos img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px}
[data-sl-page] .tr-photos figcaption{margin-top:8px; font-size:14px; line-height:1.45; color:var(--sl-muted)}
@media (max-width:560px){
  [data-sl-page] .tr-photos{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(var(--sl-gut) * -1); padding:0 var(--sl-gut) 8px; scroll-padding-inline:var(--sl-gut); scrollbar-width:thin}
  [data-sl-page] .tr-photos li{flex:0 0 78%; scroll-snap-align:start}
}
[data-sl-page] .tr-research{display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; align-items:center; max-width:560px; margin-top:clamp(36px,4vw,52px); color:var(--sl-ink); text-decoration:none}
/* v2 (Paul, 24 Sep): the shadow belongs to the cover, not to a rectangle behind it. The cover is a tilted page on a
   transparent ground, so a box-shadow drew the image's own box; a drop-shadow filter follows the page's shape. */
[data-sl-page] .tr-research img{display:block; width:120px; height:auto; filter:drop-shadow(0 6px 10px color-mix(in oklch, var(--sl-ink) 16%, transparent)); transition:translate .2s}
[data-sl-page] .tr-research:hover img{translate:0 -3px}
[data-sl-page] .tr-research-copy{display:block}
[data-sl-page] .tr-research-k{display:block; margin-bottom:4px; font:600 11.5px/1.3 var(--sl-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sl-build-text)}
[data-sl-page] .tr-research b{display:block; font:600 20px/1.3 var(--sl-font-display); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
[data-sl-page] .tr-research-copy > span:last-child{display:block; margin-top:4px; font-size:15px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .tr-research:focus-visible{outline:2px solid var(--sl-build); outline-offset:6px; border-radius:6px}
@media (max-width:560px){ [data-sl-page] .tr-research{grid-template-columns:92px minmax(0,1fr); gap:16px} [data-sl-page] .tr-research img{width:92px} [data-sl-page] .tr-research b{font-size:18px} }
@media (prefers-reduced-motion: reduce){ [data-sl-page] .tr-research img{transition:none} }
[data-sl-page] .buy-share{margin:14px 0 0; font-size:15px; line-height:1.5; color:var(--sl-muted)}


/* ===== What is it for? v10 (25 Sep): the flow, left to right. IDEAS IN (a slide; its three phrases are pulled out as blocks),
   TALK (the blocks put in order), IDEAS OUT (the sentence written). Live text. The kit colours fill only the blocks and the
   marker under the three phrases, because the drawing is OF the blocks; everything else is ink, neutrals and the one teal.
   Motion: every animation runs on --cf-clock, staggered by keyframe percentages, never a delay. Frame 0 (and the base
   styles) is the finished drawing, so reduced motion needs only animation:none. Timeline, as percentages of the clock:
     0-4 finished, at rest       4-8 everything but the slide fades (the reset)
     10-29 IDEAS IN: each phrase is marked, then its block drops out of the slide (plates, pressure, rocks)
     30-34 first arrow nudges    34-54 TALK: blocks appear jumbled, "What comes first?", two swap, "The plates move!"
     55-59 second arrow nudges   60-81 IDEAS OUT: the three lines are written    81-100 finished, at rest ===== */
[data-sl-page] .cycle{--cy-hand:'Caveat','Bradley Hand','Segoe Print',cursive; background:var(--sl-surface)}
[data-sl-page] .cy-grid{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "fig" "cols"; gap:28px}
[data-sl-page] .cy-head{grid-area:head; max-width:760px}
[data-sl-page] .cy-head h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 14px}
[data-sl-page] .cy-head .lede{margin:0}
[data-sl-page] .cy-fig{grid-area:fig; margin:0; background:var(--sl-build-wash); border-radius:14px; padding:clamp(16px,2.4vw,32px)}
[data-sl-page] .cy-cols{grid-area:cols; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
[data-sl-page] .cy-col h3{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:19px}
[data-sl-page] .cy-arw{color:var(--sl-build); font-weight:600}
[data-sl-page] .cy-col p{margin:0 0 8px; font-size:15.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .cy-col ul{margin:0; padding-left:1.1em; font-size:15.5px; line-height:1.5; color:var(--sl-ink)}
[data-sl-page] .cy-col li{margin:0 0 4px}
[data-sl-page] .cy-col li::marker{color:var(--sl-build)}

[data-sl-page] .cf{--cf-clock:15s; display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); column-gap:10px; align-items:start}
[data-sl-page] .cf-step{display:flex; flex-direction:column; gap:14px; min-width:0}
[data-sl-page] .cf-lb{margin:0; text-align:center; font:600 14px/1.3 var(--sl-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sl-muted)}
[data-sl-page] .cf-arrow{align-self:center; display:flex; justify-content:center}
[data-sl-page] .cf-arrow svg{display:block; overflow:visible}
[data-sl-page] .cf-arrow path{fill:none; stroke:var(--sl-build); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
[data-sl-page] .cf-cap{margin:18px 0 0; text-align:center; font-size:15px; line-height:1.5; color:var(--sl-muted)}

/* IDEAS IN: the slide, then the blocks that came out of it */
[data-sl-page] .cf-slide{background:var(--sl-surface); border-radius:8px; padding:12px 16px 16px; box-shadow:0 1px 2px color-mix(in oklch, var(--sl-ink) 12%, transparent)}
[data-sl-page] .cf-meta{display:flex; justify-content:space-between; gap:8px; margin:0 0 8px; font:600 11.5px/1.3 var(--sl-font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sl-muted)}
[data-sl-page] .cf-slide-h{margin:0 0 6px; font:600 17px/1.25 var(--sl-font-display); color:var(--sl-ink)}
[data-sl-page] .cf-slide-p{margin:0; font-size:14.5px; line-height:1.55; color:var(--sl-ink)}
[data-sl-page] .cf-hl{color:inherit; padding:0 1px; font-weight:600; background:linear-gradient(to top, color-mix(in oklch, var(--f) 45%, var(--sl-surface)) 32%, transparent 32%) no-repeat 0 0 / 100% 100%}
[data-sl-page] .cf-pulled{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 4px}

/* one block: the kit drawing (two tabs, a coloured frame, a white writing panel), sized from its own width */
[data-sl-page] .cf-b{--f-hi:color-mix(in oklch, var(--f) 80%, var(--sl-surface)); --f-lo:color-mix(in oklch, var(--f) 88%, var(--sl-ink)); display:block; container-type:inline-size; min-width:0}
[data-sl-page] .cf-tabs{display:block; position:relative; height:5.2cqw}
[data-sl-page] .cf-tabs i{position:absolute; bottom:-3px; width:25cqw; height:calc(5.2cqw + 3px); background:var(--f); border-radius:2.2cqw 2.2cqw .6cqw .6cqw; box-shadow:inset 0 .6cqw 0 var(--f-hi)}
[data-sl-page] .cf-tabs i:first-child{left:9.5cqw}
[data-sl-page] .cf-tabs i:last-child{right:9.5cqw}
[data-sl-page] .cf-body{display:block; position:relative; aspect-ratio:75.38 / 44.4; background:var(--f); border-radius:4.4cqw; box-shadow:inset 0 .8cqw 0 var(--f-hi), inset 0 -1.5cqw 1cqw -.4cqw var(--f-lo), 0 1.4cqw 2.6cqw -.8cqw color-mix(in oklch, var(--sl-ink) 20%, transparent)}
[data-sl-page] .cf-panel{position:absolute; left:12%; width:76%; top:10.5%; height:79%; display:flex; align-items:center; justify-content:center; padding:1.4cqw 2.6cqw; background:var(--sl-surface); border-radius:2.4cqw; text-align:center; font:600 19cqw/1 var(--cy-hand); color:var(--sl-ink); overflow-wrap:break-word}

/* TALK: two bubbles over a stack of blocks, the lower block's tabs tucked under the one above */
[data-sl-page] .cf-bubs{display:flex; gap:10px; align-items:flex-end}
[data-sl-page] .cf-bub{position:relative; flex:1 1 0; min-width:0; margin:0 0 10px; padding:9px 10px; background:var(--sl-surface); border:1.5px solid var(--sl-faint); border-radius:12px; text-align:center; font:600 15px/1.3 var(--sl-font-body); color:var(--sl-ink)}
[data-sl-page] .cf-bub::after{content:""; position:absolute; bottom:-8px; width:14px; height:14px; background:var(--sl-surface); border:solid var(--sl-faint); border-width:0 1.5px 1.5px 0; transform:rotate(45deg)}
[data-sl-page] .cf-bub1::after{right:28%}
[data-sl-page] .cf-bub2::after{left:28%}
[data-sl-page] .cf-stack{container-type:inline-size; width:min(100%,150px); margin:0 auto}
[data-sl-page] .cf-stack .cf-b + .cf-b{margin-top:-5.2cqw}
[data-sl-page] .cf-stack .cf-panel{font-size:17cqw}

/* IDEAS OUT: a lined page with the sentence in handwriting */
[data-sl-page] .cf-page{background:var(--sl-surface); border-radius:8px; padding:12px 18px 18px; box-shadow:0 1px 2px color-mix(in oklch, var(--sl-ink) 12%, transparent)}
[data-sl-page] .cf-task{margin:0 0 4px; font-size:14.5px; line-height:1.45; color:var(--sl-muted)}
[data-sl-page] .cf-write{margin:0; font:600 25px/42px var(--cy-hand); color:var(--sl-ink); background:linear-gradient(to top, var(--sl-border) 1.5px, transparent 1.5px) 0 0 / 100% 42px}
[data-sl-page] .cf-write span{display:inline-block; padding-right:4px}

/* the clock */
[data-sl-page] .cf-hl1{animation:cfHl1 var(--cf-clock) linear infinite both}
[data-sl-page] .cf-hl2{animation:cfHl2 var(--cf-clock) linear infinite both}
[data-sl-page] .cf-hl3{animation:cfHl3 var(--cf-clock) linear infinite both}
[data-sl-page] .cf-p1{animation:cfP1 var(--cf-clock) ease-out infinite both}
[data-sl-page] .cf-p2{animation:cfP2 var(--cf-clock) ease-out infinite both}
[data-sl-page] .cf-p3{animation:cfP3 var(--cf-clock) ease-out infinite both}
[data-sl-page] .cf-a1 svg{animation:cfA1 var(--cf-clock) ease-in-out infinite both}
[data-sl-page] .cf-a2 svg{animation:cfA2 var(--cf-clock) ease-in-out infinite both}
[data-sl-page] .cf-s1{animation:cfS1 var(--cf-clock) ease-in-out infinite both}
[data-sl-page] .cf-s2{animation:cfS2 var(--cf-clock) ease-in-out infinite both}
[data-sl-page] .cf-s3{animation:cfS3 var(--cf-clock) ease-in-out infinite both}
[data-sl-page] .cf-bub1{animation:cfB1 var(--cf-clock) ease-out infinite both}
[data-sl-page] .cf-bub2{animation:cfB2 var(--cf-clock) ease-out infinite both}
[data-sl-page] .cf-l1{animation:cfL1 var(--cf-clock) linear infinite both}
[data-sl-page] .cf-l2{animation:cfL2 var(--cf-clock) linear infinite both}
[data-sl-page] .cf-l3{animation:cfL3 var(--cf-clock) linear infinite both}
[data-sl-page] .cf.cf-off *{animation-play-state:paused}
@keyframes cfHl1{0%,4%{background-size:100% 100%} 8%,10%{background-size:0% 100%} 13%,100%{background-size:100% 100%}}
@keyframes cfHl2{0%,4%{background-size:100% 100%} 8%,16%{background-size:0% 100%} 19%,100%{background-size:100% 100%}}
@keyframes cfHl3{0%,4%{background-size:100% 100%} 8%,22%{background-size:0% 100%} 25%,100%{background-size:100% 100%}}
@keyframes cfP1{0%,4%{opacity:1; transform:none} 8%{opacity:0; transform:none} 8.5%,12%{opacity:0; transform:translateY(-40px) scale(.7)} 14%{opacity:1; transform:translateY(-22px) scale(.8)} 16%{opacity:1; transform:translateY(3px) scale(1.02)} 17.5%,100%{opacity:1; transform:none}}
@keyframes cfP2{0%,4%{opacity:1; transform:none} 8%{opacity:0; transform:none} 8.5%,18%{opacity:0; transform:translateY(-40px) scale(.7)} 20%{opacity:1; transform:translateY(-22px) scale(.8)} 22%{opacity:1; transform:translateY(3px) scale(1.02)} 23.5%,100%{opacity:1; transform:none}}
@keyframes cfP3{0%,4%{opacity:1; transform:none} 8%{opacity:0; transform:none} 8.5%,24%{opacity:0; transform:translateY(-40px) scale(.7)} 26%{opacity:1; transform:translateY(-22px) scale(.8)} 28%{opacity:1; transform:translateY(3px) scale(1.02)} 29.5%,100%{opacity:1; transform:none}}
@keyframes cfA1{0%,30%{transform:none} 32%{transform:translateX(7px)} 34%,100%{transform:none}}
@keyframes cfA2{0%,55%{transform:none} 57%{transform:translateX(7px)} 59%,100%{transform:none}}
/* the stack is 58.9cqw from one block to the next (the frame's height; the tabs overlap). Plates starts one place down,
   pressure one place up; they cross on a small arc and swap */
@keyframes cfS1{0%,4%{opacity:1; transform:none} 8%{opacity:0; transform:none} 8.5%,34%{opacity:0; transform:translateY(58.9cqw)} 38%,44%{opacity:1; transform:translateY(58.9cqw)} 47.5%{opacity:1; transform:translate(20cqw,29.5cqw)} 51%,100%{opacity:1; transform:none}}
@keyframes cfS2{0%,4%{opacity:1; transform:none} 8%{opacity:0; transform:none} 8.5%,34%{opacity:0; transform:translateY(-58.9cqw)} 38%,44%{opacity:1; transform:translateY(-58.9cqw)} 47.5%{opacity:1; transform:translate(-20cqw,-29.5cqw)} 51%,100%{opacity:1; transform:none}}
@keyframes cfS3{0%,4%{opacity:1} 8%,34%{opacity:0} 38%,100%{opacity:1}}
@keyframes cfB1{0%,4%{opacity:1; transform:none} 8%,39%{opacity:0; transform:translateY(6px)} 41%,100%{opacity:1; transform:none}}
@keyframes cfB2{0%,4%{opacity:1; transform:none} 8%,52%{opacity:0; transform:translateY(6px)} 54%,100%{opacity:1; transform:none}}
@keyframes cfL1{0%,4%{opacity:1; clip-path:inset(0 0 0 0)} 8%{opacity:0; clip-path:inset(0 0 0 0)} 8.5%,60%{opacity:1; clip-path:inset(0 100% 0 0)} 67%,100%{opacity:1; clip-path:inset(0 0 0 0)}}
@keyframes cfL2{0%,4%{opacity:1; clip-path:inset(0 0 0 0)} 8%{opacity:0; clip-path:inset(0 0 0 0)} 8.5%,67%{opacity:1; clip-path:inset(0 100% 0 0)} 74%,100%{opacity:1; clip-path:inset(0 0 0 0)}}
@keyframes cfL3{0%,4%{opacity:1; clip-path:inset(0 0 0 0)} 8%{opacity:0; clip-path:inset(0 0 0 0)} 8.5%,74%{opacity:1; clip-path:inset(0 100% 0 0)} 81%,100%{opacity:1; clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .cf *, [data-sl-page] .cf *::before, [data-sl-page] .cf *::after{animation:none !important} }

/* narrower screens: the three steps stack, the arrows point down */
@media (max-width:900px){
  [data-sl-page] .cf{grid-template-columns:minmax(0,1fr); row-gap:10px; max-width:460px; margin:0 auto}
  [data-sl-page] .cf-arrow{transform:rotate(90deg); height:44px; align-items:center}
  [data-sl-page] .cf-lb{text-align:left}
}
@media (max-width:560px){ [data-sl-page] .cy-cols{grid-template-columns:minmax(0,1fr); gap:16px} [data-sl-page] .cy-fig{padding:16px 12px} [data-sl-page] .cf-slide{padding:12px 14px 14px} [data-sl-page] .cf-page{padding:12px 14px 16px} [data-sl-page] .cf-write{font-size:23px} }

/* ===== The two YouTube videos open on YouTube in a pop-up window (v10, Paul, 25 Sep: the embedded player showed empty inside
   the claude.ai viewer). The cards are plain links; wb.extra.js opens a sized window and falls back to the link's new tab.
   The only dialogue left on the page is the booking wizard: its close control shows a ring for the keyboard only. ===== */
[data-sl-page] .wiz-x:focus{outline:none}
[data-sl-page] .wiz-x:focus-visible{outline:2px solid var(--sl-muted); outline-offset:2px}

/* the card route with Shopify Buy Buttons (28 Sep 2026) */
[data-sl-page] .sbb-l{font-size:16px; font-weight:600; color:var(--sl-ink); margin:18px 0 6px}
[data-sl-page] .sbb-l span{display:block; font-weight:400; font-size:14px; color:var(--sl-muted)}
[data-sl-page] .sbb{min-height:52px; margin-bottom:14px}
[data-sl-page] .sbb-note{font-size:14px; line-height:1.5; color:var(--sl-muted); margin:14px 0 0}
[data-sl-page] .sbb-fallback{display:inline-block; margin-top:12px; font-size:14px; font-weight:600; color:var(--sl-brand-hover)}
html.sbb-on [data-sl-page] .sbb-fallback{display:none}


/* ===== Watch it get better (v5, 23 Sep): three tabs, the thinking overlaid in time with the blocks =====
   One frame for all three: the stage, then the thinking band joined under it, so the film's own controls stay clear.
   Every thinking line gets the height of the longest one (--wg-line-h, measured by wb.watch.js): no tab moves the page.
   The bricks are the demo's drawing (prototypes/build-it/board.css), repeated here because the demo's rules are scoped
   under its own root. Teal accent only; the brick frames are the product's colours (--wb-*). */
[data-sl-page] .wg-grid{--wg-hand:'Caveat','Bradley Hand','Segoe Print',cursive; display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(24px,4vw,56px); align-items:center}
[data-sl-page] .iteration h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 14px}
[data-sl-page] .wg-head .lede{margin:0 0 22px}
[data-sl-page] .wg-tabs{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
[data-sl-page] .wg-tab{appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:9px 18px; border-radius:var(--sl-radius-pill); border:1.5px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); font:600 15.5px/1.2 var(--sl-font-body); cursor:pointer}
[data-sl-page] .wg-tab:hover{border-color:var(--sl-faint)}
[data-sl-page] .wg-tab[aria-selected="true"]{border-color:var(--sl-build); color:var(--sl-build-text)}
[data-sl-page] .wg-tab[aria-selected="true"]::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--sl-build)}
[data-sl-page] .wg-tab:focus-visible, [data-sl-page] .wg-pause:focus-visible{outline:2px solid var(--sl-muted); outline-offset:-5px}
[data-sl-page] .wg-panel[hidden]{display:none}

[data-sl-page] .wg-frame{background:var(--sl-surface); border-radius:14px; overflow:hidden}
[data-sl-page] .wg-stage{position:relative; aspect-ratio:16/9; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:18px clamp(12px,2.6vw,28px); background:var(--sl-surface)}
[data-sl-page] .wg-stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--sl-surface)}

[data-sl-page] .wg-think{padding:12px clamp(14px,2.2vw,22px) 14px; border-top:1px solid var(--sl-border)}
[data-sl-page] .wg-who{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; font:600 11.5px/1.3 var(--sl-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sl-muted)}
[data-sl-page] .wg-pause{appearance:none; -webkit-appearance:none; flex:none; min-height:36px; margin:0; padding:6px 14px; border-radius:var(--sl-radius-pill); border:1.5px solid var(--sl-border-strong); background:var(--sl-surface); color:var(--sl-ink); font:600 14px/1.2 var(--sl-font-body); letter-spacing:0; text-transform:none; cursor:pointer}
[data-sl-page] .wg-pause:hover{border-color:var(--sl-faint)}
[data-sl-page] .wg-still .wg-pause{display:none}
[data-sl-page] .wg-line{display:flex; align-items:center; min-height:var(--wg-line-h, 2.4em); margin:4px 0 0; font-family:var(--wg-hand) !important; font-weight:600; font-size:clamp(21px,2.1vw,27px); line-height:1.15; color:var(--sl-ink)}

[data-sl-page] .wg-trans{margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .wg-trans summary{cursor:pointer; color:var(--sl-build-text); font-weight:600; min-height:32px; display:flex; align-items:center}
[data-sl-page] .wg-trans ol{margin:8px 0 0; padding-left:1.4em}
[data-sl-page] .wg-trans li{margin:0 0 3px}

/* the bricks */
[data-sl-page] .wg-topic{margin:0 0 14px; text-align:center; font:600 11.5px/1.3 var(--sl-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sl-muted)}
[data-sl-page] .wg-row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 10px}
[data-sl-page] .wg-slot{flex:0 0 calc((100% - 40px) / 5); max-width:150px; min-width:0}
[data-sl-page] .wg-hole{position:relative; aspect-ratio:1000 / 641; border-radius:8px; outline:1.5px dashed color-mix(in oklch, var(--sl-muted) 45%, var(--sl-surface)); outline-offset:-1.5px}
[data-sl-page] .wg-hole.filled{outline-color:transparent}
[data-sl-page] .wg-cap{min-height:18px; margin:6px 0 0; text-align:center; font:600 11.5px/1.3 var(--sl-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sl-build-text)}
[data-sl-page] .wg-sent{margin:18px 0 0; text-align:center; font:500 clamp(16px,1.9vw,22px)/1.35 var(--sl-font-display); color:var(--sl-ink); visibility:hidden; opacity:0; transition:opacity .4s}
[data-sl-page] .wg-sent.on{visibility:visible; opacity:1}
[data-sl-page] .wg-gap{display:inline-block; min-width:4.6em; border-bottom:2px solid var(--sl-muted); text-align:center}
[data-sl-page] .wg-gap.filled{color:var(--sl-build-text); border-bottom-color:var(--sl-build)}
[data-sl-page] .wg .blk{
  --f-hi: color-mix(in oklch, var(--f) 80%, var(--sl-surface));
  --f-lo: color-mix(in oklch, var(--f) 88%, var(--sl-ink));
  --blk-shadow: color-mix(in oklch, var(--sl-ink) 20%, transparent);
  --blk-contact: color-mix(in oklch, var(--sl-ink) 14%, transparent);
  display:block; position:relative; width:100%; container-type:inline-size; text-align:center; transition:translate .45s cubic-bezier(.34,1.4,.64,1)}
[data-sl-page] .wg .blk-tabs{display:block; position:relative; height:5.2cqw}
[data-sl-page] .wg .blk-tab{position:absolute; bottom:-3px; width:25cqw; height:calc(5.2cqw + 3px); background:var(--f); border-radius:2.2cqw 2.2cqw .6cqw .6cqw; box-shadow:inset 0 .6cqw 0 var(--f-hi)}
[data-sl-page] .wg .blk-tab:first-child{left:9.5cqw}
[data-sl-page] .wg .blk-tab:last-child{right:9.5cqw}
[data-sl-page] .wg .blk-body{display:block; position:relative; aspect-ratio:75.38 / 44.4; background:var(--f); border-radius:4.4cqw;
  box-shadow:inset 0 .8cqw 0 var(--f-hi), inset 0 -1.5cqw 1cqw -.4cqw var(--f-lo), 0 1.4cqw 2.6cqw -.8cqw var(--blk-shadow), 0 .35cqw .7cqw var(--blk-contact)}
[data-sl-page] .wg .blk-panel{position:absolute; left:12%; width:76%; top:10.5%; height:79%; display:flex; align-items:center; justify-content:center; padding:1.4cqw 2.6cqw; overflow:hidden; background:var(--sl-surface); border-radius:2.4cqw; box-shadow:inset 0 .7cqw 1cqw -.3cqw var(--blk-contact)}
[data-sl-page] .wg .blk-text{font-family:var(--wg-hand) !important; font-weight:600; font-size:max(13.5px, 15cqw); line-height:1.02; color:var(--sl-ink)}
[data-sl-page] .wg .blk.wg-picked{translate:0 -10px}

@media (max-width:900px){
  [data-sl-page] .wg-grid{grid-template-columns:1fr}
  [data-sl-page] .wg-tabs{flex-direction:row; flex-wrap:wrap}
}
@media (max-width:560px){
  [data-sl-page] .wg-stage{aspect-ratio:4/3; padding:12px 10px}
  [data-sl-page] .wg-slot{flex-basis:calc((100% - 20px) / 3)}
  [data-sl-page] .wg-row{gap:8px 10px}
  [data-sl-page] .wg-cap{margin-top:4px}
  [data-sl-page] .wg-sent{margin-top:8px}
  [data-sl-page] .wg-topic{margin-bottom:8px}
  [data-sl-page] .wg-tab{padding:9px 14px; font-size:15px}
}
@media (max-width:380px){ [data-sl-page] .wg-topic{display:none} [data-sl-page] .wg-row{gap:6px 8px} [data-sl-page] .wg-cap{min-height:15px; margin-top:2px} }
@media (prefers-reduced-motion: reduce){ [data-sl-page] .wg .blk, [data-sl-page] .wg-sent{transition:none} }

/* ===== 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}
}

/* ===== 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}
}



/* d5 (Paul, 29 Sep): booking link first, email printed as plain text (a mailto does nothing on a webmail-only laptop) */
[data-sl-page] .mail-text{font-weight:600; user-select:all; overflow-wrap:anywhere; color:var(--sl-ink)}
[data-sl-page] .book-card .btn-ghost{margin-top:10px}
[data-sl-page] .hero-note .hn a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px}
[data-sl-page] .hero-note .hn b{color:var(--sl-ink); font-weight:600}

/* 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}