[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] .eyebrow.on-dark{color:var(--sl-night-accent)}
[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 ----------------------------------------------------- */
@media (max-width:860px){ }

/* 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}
[data-sl-page] .ph{display:grid; place-items:center; text-align:center; padding:26px; height:100%}
[data-sl-page] .ph-in{max-width:30ch}
[data-sl-page] .ph .tag{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--sl-brand-deep); font-weight:600; margin-bottom:10px}
[data-sl-page] .ph .txt{font-size:14px; line-height:1.5; color:var(--sl-brand-deep); opacity:.85}

@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 ------------------------------------------------ */
[data-sl-page] .proof{border-block:1px solid var(--sl-border); background:var(--sl-ground)}
[data-sl-page] .proof .row{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,54px); align-items:baseline; padding-block:22px}
[data-sl-page] .stat{display:flex; align-items:baseline; gap:9px; font-size:14.5px; color:var(--sl-muted)}
[data-sl-page] .stat b{font-family:var(--sl-font-display) !important; font-size:26px; font-weight:600; color:var(--sl-ink); letter-spacing:-.02em}
[data-sl-page] .proof .sep{flex:1}
[data-sl-page] .proof .unis{font-size:13.5px; color:var(--sl-faint-aa)}

/* 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] .mid-head{max-width:64ch; margin:clamp(44px,5vw,66px) 0 0; padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--sl-border)}
[data-sl-page] .mid-head h3{font-size:clamp(21px,2.4vw,29px); line-height:1.18; margin:0 0 12px; letter-spacing:-.02em}
[data-sl-page] .sec-head h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 16px}
[data-sl-page] .sec-head.center{margin-inline:auto; text-align:center}

/* the promise ------------------------------------------------ */
[data-sl-page] .promise{background:var(--sl-ground)}
[data-sl-page] .promise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px)}
[data-sl-page] .promise-card{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:12px; padding:28px 26px}
[data-sl-page] .promise-card h3{font-size:19px; margin:0 0 10px; line-height:1.3}
[data-sl-page] .promise-card p{font-size:15.5px; color:var(--sl-muted); line-height:1.6}
[data-sl-page] .promise-card .num{font-family:var(--sl-font-display) !important; font-size:13px; font-weight:600; color:var(--sl-brand-hover); letter-spacing:.04em; margin-bottom:14px}
@media (max-width:820px){ [data-sl-page] .promise-grid{grid-template-columns:1fr} }

[data-sl-page] .pullquote{
  margin:clamp(34px,5vw,56px) auto 0; max-width:60ch; text-align:center;
  font-family:var(--sl-font-display) !important; font-size:clamp(21px,2.6vw,30px); line-height:1.3;
  letter-spacing:-.02em; color:var(--sl-ink);
}
[data-sl-page] .pullquote span{color:var(--sl-brand)}

/* ============ THE INTERACTIVE ============ */
[data-sl-page] .hood-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; justify-content:space-between; margin-bottom:26px}
[data-sl-page] .hood-head h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 14px; max-width:18ch}
[data-sl-page] .hood-hint{font-size:12.5px; color:var(--sl-faint-aa); font-family:var(--sl-font-mono) !important; letter-spacing:.11em; text-transform:uppercase; margin:0; padding-bottom:8px}

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

[data-sl-page] .hood{border:1px solid var(--sl-border); border-radius:14px; overflow:hidden; background:var(--sl-surface)}
[data-sl-page] .hood-board{
  background:var(--sl-night); color:var(--sl-night-ink); padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,38px);
}
[data-sl-page] .hood-board .lbl{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sl-night-muted); margin-bottom:10px}
[data-sl-page] .hood-board .task{font-family:var(--sl-font-display) !important; font-size:clamp(19px,2.3vw,27px); line-height:1.3; letter-spacing:-.015em; margin:0}

[data-sl-page] .hood-body{display:grid; grid-template-columns:1.05fr .95fr}
[data-sl-page] .hood-col{padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,38px)}
[data-sl-page] .hood-col + .hood-col{border-left:1px solid var(--sl-border)}
[data-sl-page] .hood-col h4{font-size:16px; margin:0 0 4px}
[data-sl-page] .hood-col .sub{font-size:13.5px; color:var(--sl-faint-aa); margin:0 0 20px}

[data-sl-page] .tf-list{list-style:none; margin:0; padding:0}
[data-sl-page] .tf-item{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .tf-item:last-child{border-bottom:0; padding-bottom:0}
[data-sl-page] .tf-mark{width:10px; height:10px; border-radius:50%; flex:none; margin-top:7px}
[data-sl-page] .tf-name{font-family:var(--sl-font-display) !important; font-size:14px; font-weight:600; margin:0 0 3px; letter-spacing:0}
[data-sl-page] .tf-q{font-size:14.5px; color:var(--sl-muted); margin:0; line-height:1.5}

[data-sl-page] .mode-list{list-style:none; margin:0; padding:0}
[data-sl-page] .mode-item{padding:14px 0; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .mode-item:last-child{border-bottom:0; padding-bottom:0}
[data-sl-page] .mode-top{display:flex; align-items:center; gap:9px; margin-bottom:5px}
[data-sl-page] .mode-tag{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
[data-sl-page] .mode-item p{font-size:14.5px; color:var(--sl-muted); margin:0; line-height:1.55}
[data-sl-page] .mode-item .mode-tag{color:var(--sl-brand-hover)}
[data-sl-page] .mode-item .tf-mark{background:var(--sl-brand)}

[data-sl-page] .hood-foot{
  border-top:1px solid var(--sl-border); background:var(--sl-ground);
  padding:18px clamp(22px,3.5vw,38px); font-size:14.5px; color:var(--sl-muted);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
[data-sl-page] .hood-foot a{color:var(--sl-brand-hover); font-weight:600; text-decoration:none}
[data-sl-page] .hood-foot a:hover{text-decoration:underline}
@media (max-width:820px){
  [data-sl-page] .hood-body{grid-template-columns:1fr}
  [data-sl-page] .hood-col + .hood-col{border-left:0; border-top:1px solid var(--sl-border)}
}

/* in the room ------------------------------------------------ */
[data-sl-page] .room{background:var(--sl-ground)}
[data-sl-page] .room-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:start}
[data-sl-page] .timeline{list-style:none; margin:0; padding:0}
[data-sl-page] .timeline{--lc:8.4s}
[data-sl-page] .tl{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--sl-border-strong); align-items:start}
[data-sl-page] .tl-k{font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-brand-hover); font-weight:600; margin:0 0 6px; display:flex; align-items:center; gap:8px}
[data-sl-page] .tl-k b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--sl-brand); color:var(--sl-surface); font-family:var(--sl-font-body) !important; font-size:11px}
[data-sl-page] .tli{display:block; width:96px; height:auto; margin-top:2px}
[data-sl-page] .tli .ti-card{fill:var(--sl-surface); stroke:var(--sl-brand); stroke-width:1.4; transform-box:fill-box; transform-origin:center}
[data-sl-page] .tli .ti-say rect{fill:var(--sl-build-wash)} [data-sl-page] .tli .ti-say text{font-family:var(--sl-font-body) !important; font-size:8.5px; fill:var(--sl-brand-deep)}
[data-sl-page] .tli .ti-brick rect{fill:var(--sl-brand); opacity:.9} [data-sl-page] .tli .ti-brick{transform-box:fill-box; transform-origin:center}
[data-sl-page] .tli .ti-page{fill:var(--sl-surface); stroke:var(--sl-border-strong); stroke-width:1.2}
[data-sl-page] .tli .ti-line{fill:none; stroke:var(--sl-border-strong); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0}
[data-sl-page] .tli .ti-tick{fill:none; stroke:var(--sl-brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:0}
[data-sl-page] .tli .ti-card,[data-sl-page] .tli .ti-say,[data-sl-page] .tli .ti-brick,[data-sl-page] .tli .ti-line,[data-sl-page] .tli .ti-tick{animation-duration:var(--lc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
@keyframes tiC1{0%,2%{transform:translateY(10px);opacity:0} 10%,100%{transform:none;opacity:1}}
@keyframes tiC2{0%,12%{transform:translateY(10px);opacity:0} 20%,100%{transform:none;opacity:1}}
@keyframes tiSay{0%,26%{opacity:0} 34%,100%{opacity:1}}
[data-sl-page] .ti-c1{animation-name:tiC1} [data-sl-page] .ti-c2{animation-name:tiC2} [data-sl-page] .ti-say{animation-name:tiSay}
@keyframes tiB1{0%,30%{transform:none} 40%,60%{transform:translateX(32px)} 70%,100%{transform:none}}
@keyframes tiB2{0%,30%{transform:none} 40%,60%{transform:translateX(-32px)} 70%,100%{transform:none}}
@keyframes tiB3{0%,60%{transform:none} 66%,74%{transform:translateY(-8px)} 80%,100%{transform:none}}
[data-sl-page] .ti-b1{animation-name:tiB1} [data-sl-page] .ti-b2{animation-name:tiB2} [data-sl-page] .ti-b3{animation-name:tiB3}
@keyframes tiL1{0%,2%{stroke-dashoffset:100} 18%,100%{stroke-dashoffset:0}}
@keyframes tiL2{0%,18%{stroke-dashoffset:100} 34%,100%{stroke-dashoffset:0}}
@keyframes tiL3{0%,34%{stroke-dashoffset:100} 48%,100%{stroke-dashoffset:0}}
@keyframes tiTick{0%,52%{stroke-dashoffset:100} 64%,100%{stroke-dashoffset:0}}
[data-sl-page] .ti-l1{animation-name:tiL1} [data-sl-page] .ti-l2{animation-name:tiL2} [data-sl-page] .ti-l3{animation-name:tiL3} [data-sl-page] .ti-tick{animation-name:tiTick}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .tli *{animation:none !important} }
@media (min-width:861px){ [data-sl-page] .timeline{margin-top:78px} } /* level with the heading beside it, under the eyebrow and the format chips */
[data-sl-page] .tl:last-child{border-bottom:1px solid var(--sl-border-strong)}
[data-sl-page] .tl-time{font-family:var(--sl-font-mono) !important; font-size:13px; color:var(--sl-brand-hover); font-weight:600; letter-spacing:.02em; padding-top:2px}
[data-sl-page] .tl h4{font-size:17.5px; margin:0 0 6px}
[data-sl-page] .tl p{font-size:15.5px; color:var(--sl-muted); margin:0; line-height:1.6}
@media (max-width:860px){ [data-sl-page] .room-grid{grid-template-columns:1fr} [data-sl-page] .tl{grid-template-columns:72px 1fr; gap:14px} [data-sl-page] .tli{width:72px} } /* 11 Sep: the timings column went, its 62px track had stayed and swallowed each step on phones */

/* meet paul -------------------------------------------------- */
[data-sl-page] .paul-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center}
[data-sl-page] .photo-strip{display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:min(420px,56vw)}
[data-sl-page] .photo-strip > *{border-radius:12px; overflow:hidden; background:var(--sl-build-wash)}
[data-sl-page] .photo-strip > *:first-child{grid-row:span 2}
[data-sl-page] .photo-strip img{width:100%; height:100%; object-fit:cover}
[data-sl-page] .paul-body p{font-size:16.5px; line-height:1.68; color:var(--sl-muted)}
[data-sl-page] .paul-body p strong{color:var(--sl-ink); font-weight:600}
[data-sl-page] .sig{margin-top:18px; display:flex; align-items:center; gap:14px}
/* ---- 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. ---- */
[data-sl-page] .career{--cc:25s; list-style:none; margin:26px 0 0; padding:0; position:relative; display:flex; justify-content:space-between; gap:8px; padding-bottom:78px}
[data-sl-page] .cs{position:static; flex:1 1 0; min-width:0; font-size:12.5px; line-height:1.3}
[data-sl-page] .cs i{display:block; width:11px; height:11px; border-radius:50%; background:var(--sl-surface); border:2px solid var(--sl-border-strong); margin:0 0 9px; position:relative; z-index:1; animation-duration:var(--cc); animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both}
[data-sl-page] .cs b{display:block; font-family:var(--sl-font-display) !important; font-weight:600; font-size:13px; color:var(--sl-faint-aa); letter-spacing:-.01em; animation-duration:var(--cc); animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both}
[data-sl-page] .cs span{display:block; font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-faint-aa); margin-top:2px}
[data-sl-page] .cs p{position:absolute; left:0; right:0; bottom:0; margin:0; font-size:15.5px; line-height:1.55; color:var(--sl-ink); opacity:0; animation-duration:var(--cc); animation-timing-function:cubic-bezier(.22,.7,.25,1); animation-iteration-count:infinite; animation-fill-mode:both; min-height:60px}
[data-sl-page] .cs p::before{content:""; display:block; width:28px; height:2px; background:var(--sl-brand); margin-bottom:8px}
/* five stops, five keyframe sets on one clock; the stagger lives inside each keyframe, never in a delay */
@keyframes csDot1{0%,19%{background:var(--sl-brand);border-color:var(--sl-brand)} 20%,100%{background:var(--sl-surface);border-color:var(--sl-border-strong)}}
@keyframes csLab1{0%,19%{color:var(--sl-brand-hover)} 20%,100%{color:var(--sl-faint-aa)}}
@keyframes csLine1{0%,1%{opacity:0;transform:translateY(4px)} 3%,18%{opacity:1;transform:none} 20%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .k1 i{animation-name:csDot1} [data-sl-page] .k1 b{animation-name:csLab1} [data-sl-page] .k1 p{animation-name:csLine1}
@keyframes csDot2{0%,20%{background:var(--sl-surface);border-color:var(--sl-border-strong)} 21%,39%{background:var(--sl-brand);border-color:var(--sl-brand)} 40%,100%{background:var(--sl-surface);border-color:var(--sl-border-strong)}}
@keyframes csLab2{0%,20%{color:var(--sl-faint-aa)} 21%,39%{color:var(--sl-brand-hover)} 40%,100%{color:var(--sl-faint-aa)}}
@keyframes csLine2{0%,20%{opacity:0;transform:translateY(4px)} 22%,38%{opacity:1;transform:none} 40%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .k2 i{animation-name:csDot2} [data-sl-page] .k2 b{animation-name:csLab2} [data-sl-page] .k2 p{animation-name:csLine2}
@keyframes csDot3{0%,40%{background:var(--sl-surface);border-color:var(--sl-border-strong)} 41%,59%{background:var(--sl-brand);border-color:var(--sl-brand)} 60%,100%{background:var(--sl-surface);border-color:var(--sl-border-strong)}}
@keyframes csLab3{0%,40%{color:var(--sl-faint-aa)} 41%,59%{color:var(--sl-brand-hover)} 60%,100%{color:var(--sl-faint-aa)}}
@keyframes csLine3{0%,40%{opacity:0;transform:translateY(4px)} 42%,58%{opacity:1;transform:none} 60%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .k3 i{animation-name:csDot3} [data-sl-page] .k3 b{animation-name:csLab3} [data-sl-page] .k3 p{animation-name:csLine3}
@keyframes csDot4{0%,60%{background:var(--sl-surface);border-color:var(--sl-border-strong)} 61%,79%{background:var(--sl-brand);border-color:var(--sl-brand)} 80%,100%{background:var(--sl-surface);border-color:var(--sl-border-strong)}}
@keyframes csLab4{0%,60%{color:var(--sl-faint-aa)} 61%,79%{color:var(--sl-brand-hover)} 80%,100%{color:var(--sl-faint-aa)}}
@keyframes csLine4{0%,60%{opacity:0;transform:translateY(4px)} 62%,78%{opacity:1;transform:none} 80%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .k4 i{animation-name:csDot4} [data-sl-page] .k4 b{animation-name:csLab4} [data-sl-page] .k4 p{animation-name:csLine4}
@keyframes csDot5{0%,80%{background:var(--sl-surface);border-color:var(--sl-border-strong)} 81%,99%{background:var(--sl-brand);border-color:var(--sl-brand)} 100%,100%{background:var(--sl-surface);border-color:var(--sl-border-strong)}}
@keyframes csLab5{0%,80%{color:var(--sl-faint-aa)} 81%,99%{color:var(--sl-brand-hover)} 100%,100%{color:var(--sl-faint-aa)}}
@keyframes csLine5{0%,80%{opacity:0;transform:translateY(4px)} 82%,98%{opacity:1;transform:none} 100%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .k5 i{animation-name:csDot5} [data-sl-page] .k5 b{animation-name:csLab5} [data-sl-page] .k5 p{animation-name:csLine5}
@media (max-width:600px){
  [data-sl-page] .career{display:block; padding-bottom:0}
  [data-sl-page] .career::before{display:none}
  [data-sl-page] .cs{display:grid; grid-template-columns:22px 1fr; column-gap:10px; padding:0 0 14px}
  [data-sl-page] .cs i{margin:4px 0 0}
  [data-sl-page] .cs b{font-size:14px}
  [data-sl-page] .cs span{display:none}
  [data-sl-page] .cs p{position:static; opacity:1; animation:none; grid-column:2; font-size:14.5px; min-height:0; margin-top:4px}
  [data-sl-page] .cs p::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .cs i,[data-sl-page] .cs b,[data-sl-page] .cs p{animation:none}
  [data-sl-page] .cs i{background:var(--sl-brand); border-color:var(--sl-brand)} [data-sl-page] .cs b{color:var(--sl-brand-hover)}
  [data-sl-page] .career{display:block; padding-bottom:0} [data-sl-page] .career::before{display:none}
  [data-sl-page] .cs{display:grid; grid-template-columns:22px 1fr; column-gap:10px; padding:0 0 12px}
  [data-sl-page] .cs p{position:static; opacity:1; grid-column:2; min-height:0; margin-top:2px} [data-sl-page] .cs p::before{display:none} [data-sl-page] .cs span{display:none}
}
[data-sl-page] .sig .nm{font-family:var(--sl-font-display) !important; font-weight:600; font-size:16px}
[data-sl-page] .sig .rl{font-size:14px; color:var(--sl-faint-aa)}
@media (max-width:860px){ [data-sl-page] .paul-grid{grid-template-columns:1fr} [data-sl-page] .photo-strip{height:min(360px,72vw)} }

/* formats table ---------------------------------------------- */
[data-sl-page] .fmt{width:100%; border-collapse:collapse; font-size:15.5px}
[data-sl-page] .fmt caption{text-align:left; font-size:14px; color:var(--sl-faint-aa); padding-bottom:14px}
[data-sl-page] .fmt th{
  text-align:left; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sl-faint-aa); font-weight:600;
  padding:0 18px 12px 0; border-bottom:1px solid var(--sl-border-strong);
}
[data-sl-page] .fmt td{padding:20px 18px 20px 0; border-bottom:1px solid var(--sl-border); vertical-align:top; color:var(--sl-muted)}
[data-sl-page] .fmt td:first-child{color:var(--sl-ink)}
[data-sl-page] .fmt .nm{font-family:var(--sl-font-display) !important; font-weight:600; font-size:16.5px; display:block; margin-bottom:4px; letter-spacing:-.01em}
[data-sl-page] .fmt .who{font-size:14.5px}
[data-sl-page] .fmt .sub{display:block; font-size:13.5px; color:var(--sl-faint-aa); margin-top:4px; font-family:var(--sl-font-body) !important}
[data-sl-page] .fmt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (max-width:720px){
  /* phones: stack format over "choose it when", so nothing needs a swipe (14 Sep, v25) */
  [data-sl-page] .fmt,[data-sl-page] .fmt tbody,[data-sl-page] .fmt tr,[data-sl-page] .fmt td{display:block; width:100%}
  [data-sl-page] .fmt thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  [data-sl-page] .fmt td{padding:0; border:0}
  [data-sl-page] .fmt td:first-child{padding-top:18px}
  [data-sl-page] .fmt td.who{padding:0 0 18px; border-bottom:1px solid var(--sl-border)}
  [data-sl-page] .fmt .nm{margin-bottom:6px}
}

/* testimonial ------------------------------------------------ */
[data-sl-page] .quote-sec{background:var(--sl-night); color:var(--sl-night-ink)}
[data-sl-page] .quote-sec blockquote{
  margin:0; max-width:none; font-family:var(--sl-font-display) !important;
  font-size:clamp(26px,3.6vw,50px); line-height:1.18; letter-spacing:-.025em; text-align:left;
}
[data-sl-page] .quote-sec .attrib{text-align:left; margin-top:18px; font-size:14.5px; color:var(--sl-night-muted); line-height:1.6}
[data-sl-page] .quote-sec .attrib b{display:inline; color:var(--sl-night-ink); font-weight:600; font-family:var(--sl-font-display) !important; font-size:15.5px; margin-right:8px}
[data-sl-page] .quote-sec .sec-head-dark h2{color:var(--sl-night-ink)}
[data-sl-page] .quote-sec .sec-head-dark .lede{color:var(--sl-night-muted)}
[data-sl-page] .accent-night{color:var(--sl-night-accent)}
[data-sl-page] .quote-sec .big-q{margin-top:clamp(18px,3vw,30px)}
[data-sl-page] .proof-strip{list-style:none; margin:clamp(40px,5vw,60px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
[data-sl-page] .proof-strip li,[data-sl-page] .proof-strip figure{margin:0}
[data-sl-page] .proof-strip img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px}
[data-sl-page] .proof-strip figcaption{margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--sl-night-muted)}
[data-sl-page] .revs{list-style:none; margin:clamp(36px,4.5vw,54px) 0 0; padding:clamp(28px,3.5vw,40px) 0 0; border-top:1px solid var(--sl-night-line); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px) clamp(24px,3vw,36px)}
[data-sl-page] .rev{margin:0}
[data-sl-page] .rev p{margin:0; font-size:15.5px; line-height:1.6; color:var(--sl-night-ink)}
[data-sl-page] .rev .rev-who{margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--sl-night-muted)}
[data-sl-page] .rev .rev-who b{display:block; color:var(--sl-night-ink); font-weight:600; font-family:var(--sl-font-display) !important; font-size:14.5px; margin-bottom:1px}
[data-sl-page] .proof-src{margin:clamp(28px,3.5vw,40px) 0 0; font-size:14px; color:var(--sl-night-muted); text-align:center}
[data-sl-page] .proof-src .stars{color:var(--sl-night-accent); letter-spacing:2px; margin-right:6px}
[data-sl-page] .proof-src a{color:var(--sl-night-ink); font-size:inherit; font-family:inherit !important; text-decoration:underline; text-underline-offset:3px}
@media (max-width:860px){ [data-sl-page] .proof-strip{grid-template-columns:1fr 1fr} [data-sl-page] .proof-strip li:last-child{display:none} [data-sl-page] .revs{grid-template-columns:1fr} }
@media (max-width:600px){ [data-sl-page] .proof-strip{grid-template-columns:1fr} [data-sl-page] .proof-strip li:last-child{display:block} }
[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;
}
[data-sl-page] .schools .sch{white-space:nowrap}

/* where it leads --------------------------------------------- */
[data-sl-page] .leads-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--sl-border)}
[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)}
[data-sl-page] .leads-grid{--oc:14s}
[data-sl-page] .ldi{display:block; width:120px; height:auto; margin:0 0 16px}
[data-sl-page] .ldi .ld-fan{transform-box:fill-box; transform-origin:bottom center}
[data-sl-page] .ldi .ld-hub{fill:var(--sl-map)} [data-sl-page] .ldi .ld-node path{stroke:var(--sl-map); stroke-width:1.6; fill:none} [data-sl-page] .ldi .ld-node circle{fill:var(--sl-surface); stroke:var(--sl-map); stroke-width:1.6}
[data-sl-page] .ldi .ld-bub rect{fill:var(--sl-surface); stroke:var(--sl-say); stroke-width:1.4} [data-sl-page] .ldi .ld-bub text{font-family:var(--sl-font-body) !important; font-size:9px; fill:var(--sl-say-text)}
[data-sl-page] .ldi .ld-br rect{fill:var(--sl-build); opacity:.9} [data-sl-page] .ldi .ld-br{transform-box:fill-box; transform-origin:center}
[data-sl-page] .ldi .ld-fan,[data-sl-page] .ldi .ld-node,[data-sl-page] .ldi .ld-bub,[data-sl-page] .ldi .ld-br{animation-duration:var(--oc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
@keyframes ldF1{0%,2%{transform:translateY(8px);opacity:0} 8%,100%{transform:none;opacity:1}}
@keyframes ldF2{0%,8%{transform:translateY(8px);opacity:0} 14%,100%{transform:none;opacity:1}}
@keyframes ldF3{0%,14%{transform:translateY(8px);opacity:0} 20%,100%{transform:none;opacity:1}}
@keyframes ldF4{0%,20%{transform:translateY(8px);opacity:0} 26%,100%{transform:none;opacity:1}}
@keyframes ldF5{0%,26%{transform:translateY(8px);opacity:0} 32%,100%{transform:none;opacity:1}}
[data-sl-page] .ld-f1{animation-name:ldF1} [data-sl-page] .ld-f2{animation-name:ldF2} [data-sl-page] .ld-f3{animation-name:ldF3} [data-sl-page] .ld-f4{animation-name:ldF4} [data-sl-page] .ld-f5{animation-name:ldF5}
@keyframes ldN1{0%,4%{opacity:0} 12%,100%{opacity:1}} @keyframes ldN2{0%,12%{opacity:0} 20%,100%{opacity:1}} @keyframes ldN3{0%,20%{opacity:0} 28%,100%{opacity:1}} @keyframes ldN4{0%,28%{opacity:0} 36%,100%{opacity:1}}
[data-sl-page] .ld-n1{animation-name:ldN1} [data-sl-page] .ld-n2{animation-name:ldN2} [data-sl-page] .ld-n3{animation-name:ldN3} [data-sl-page] .ld-n4{animation-name:ldN4}
@keyframes ldBA{0%,3%{opacity:0;transform:translateY(4px)} 10%,100%{opacity:1;transform:none}} @keyframes ldBB{0%,18%{opacity:0;transform:translateY(4px)} 26%,100%{opacity:1;transform:none}}
[data-sl-page] .ld-bA{animation-name:ldBA} [data-sl-page] .ld-bB{animation-name:ldBB}
@keyframes ldR1{0%,2%{transform:translateY(-30px);opacity:0} 10%,100%{transform:none;opacity:1}} @keyframes ldR2{0%,12%{transform:translateY(-30px);opacity:0} 20%,100%{transform:none;opacity:1}} @keyframes ldR3{0%,22%{transform:translateY(-30px);opacity:0} 30%,100%{transform:none;opacity:1}}
[data-sl-page] .ld-r1{animation-name:ldR1} [data-sl-page] .ld-r2{animation-name:ldR2} [data-sl-page] .ld-r3{animation-name:ldR3}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .ldi *{animation:none !important} }
[data-sl-page] .doors-head{margin-top:clamp(40px,5vw,60px); padding-top:clamp(22px,3vw,34px); border-top:1px solid var(--sl-border)}   /* a rule that underlines the section above: typography, not a rail */
[data-sl-page] .doors-head .eyebrow{margin:0 0 16px}
[data-sl-page] .leads-grid.compact .lead{padding:22px 22px 20px}
[data-sl-page] .leads-grid.compact .lead .go{margin-top:8px}
@media (max-width:900px){ [data-sl-page] .leads-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ [data-sl-page] .leads-grid{grid-template-columns:1fr} }

/* 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}
[data-sl-page] .reassure{margin-top:22px; padding-top:20px; border-top:1px solid var(--sl-border); font-size:14px; color:var(--sl-faint-aa); line-height:1.6}
@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).
   ========================================================================== */
[data-sl-page] .lk{ --lc:8.4s; --lc2:16.8s; }

/* ---- entry slots. hold 88%, gone by 95%, so the reset is never seen ------- */
@keyframes lkE1{0%,3%{opacity:0;transform:translateY(5px)}  11%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes lkE2{0%,8%{opacity:0;transform:translateY(5px)}  16%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes lkE3{0%,13%{opacity:0;transform:translateY(5px)} 21%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes lkE4{0%,18%{opacity:0;transform:translateY(5px)} 26%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes lkE5{0%,23%{opacity:0;transform:translateY(5px)} 31%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes lkE6{0%,28%{opacity:0;transform:translateY(5px)} 36%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .lkE1,[data-sl-page] .lkE2,[data-sl-page] .lkE3,[data-sl-page] .lkE4,[data-sl-page] .lkE5,[data-sl-page] .lkE6{opacity:0;animation-duration:var(--lc);animation-timing-function:cubic-bezier(.22,.7,.25,1);animation-iteration-count:infinite;animation-fill-mode:both}
[data-sl-page] .lkE1{animation-name:lkE1}[data-sl-page] .lkE2{animation-name:lkE2}[data-sl-page] .lkE3{animation-name:lkE3}
[data-sl-page] .lkE4{animation-name:lkE4}[data-sl-page] .lkE5{animation-name:lkE5}[data-sl-page] .lkE6{animation-name:lkE6}

/* ---- 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. */
@keyframes lkLit1{0%,0%{--on:0} 0.1%,14%{--on:1} 16.67%,100%{--on:0}}
[data-sl-page] .lkStep{display:flex;gap:12px;align-items:center;padding:11px 0;opacity:.72;
  transition:none;animation-duration:var(--lc);animation-timing-function:linear;
  animation-iteration-count:infinite;animation-fill-mode:both}
[data-sl-page] .lkStep .n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;font-family:var(--sl-font-body) !important;
  border:1px solid currentColor;background:transparent}
@keyframes lkLitA{0%,0%{opacity:.62} 1%,14%{opacity:1} 17%,100%{opacity:.62}}
@keyframes lkLitB{0%,16.67%{opacity:.62} 17.7%,30.7%{opacity:1} 33.7%,100%{opacity:.62}}
@keyframes lkLitC{0%,33.33%{opacity:.62} 34.4%,47.4%{opacity:1} 50.4%,100%{opacity:.62}}
@keyframes lkLitD{0%,50%{opacity:.62} 51%,64%{opacity:1} 67%,100%{opacity:.62}}
@keyframes lkLitE{0%,66.67%{opacity:.62} 67.7%,80.7%{opacity:1} 83.7%,100%{opacity:.62}}
@keyframes lkLitF{0%,83.33%{opacity:.62} 84.4%,97.4%{opacity:1} 100%{opacity:.62}}
@keyframes lkDiscA{0%,0%{background:transparent;color:var(--sl-brand-hover)} 1%,14%{background:var(--sl-brand-hover);color:var(--sl-surface)} 17%,100%{background:transparent;color:var(--sl-brand-hover)}}
@keyframes lkDiscB{0%,16.67%{background:transparent;color:var(--sl-brand-hover)} 17.7%,30.7%{background:var(--sl-brand-hover);color:var(--sl-surface)} 33.7%,100%{background:transparent;color:var(--sl-brand-hover)}}
@keyframes lkDiscC{0%,33.33%{background:transparent;color:var(--sl-brand-hover)} 34.4%,47.4%{background:var(--sl-brand-hover);color:var(--sl-surface)} 50.4%,100%{background:transparent;color:var(--sl-brand-hover)}}
@keyframes lkDiscD{0%,50%{background:transparent;color:var(--sl-brand-hover)} 51%,64%{background:var(--sl-brand-hover);color:var(--sl-surface)} 67%,100%{background:transparent;color:var(--sl-brand-hover)}}
@keyframes lkDiscE{0%,66.67%{background:transparent;color:var(--sl-brand-hover)} 67.7%,80.7%{background:var(--sl-brand-hover);color:var(--sl-surface)} 83.7%,100%{background:transparent;color:var(--sl-brand-hover)}}
@keyframes lkDiscF{0%,83.33%{background:transparent;color:var(--sl-brand-hover)} 84.4%,97.4%{background:var(--sl-brand-hover);color:var(--sl-surface)} 100%{background:transparent;color:var(--sl-brand-hover)}}
[data-sl-page] .lkStep.s1{animation-name:lkLitA} [data-sl-page] .lkStep.s1 .n{animation:lkDiscA var(--lc) linear infinite}
[data-sl-page] .lkStep.s2{animation-name:lkLitB} [data-sl-page] .lkStep.s2 .n{animation:lkDiscB var(--lc) linear infinite}
[data-sl-page] .lkStep.s3{animation-name:lkLitC} [data-sl-page] .lkStep.s3 .n{animation:lkDiscC var(--lc) linear infinite}
[data-sl-page] .lkStep.s4{animation-name:lkLitD} [data-sl-page] .lkStep.s4 .n{animation:lkDiscD var(--lc) linear infinite}
[data-sl-page] .lkStep.s5{animation-name:lkLitE} [data-sl-page] .lkStep.s5 .n{animation:lkDiscE var(--lc) linear infinite}
[data-sl-page] .lkStep.s6{animation-name:lkLitF} [data-sl-page] .lkStep.s6 .n{animation:lkDiscF var(--lc) linear infinite}
[data-sl-page] .lkStep .n{color:var(--sl-brand-hover)}
[data-sl-page] .lkStep.s1 .n,[data-sl-page] .lkStep.s2 .n,[data-sl-page] .lkStep.s3 .n,[data-sl-page] .lkStep.s4 .n,[data-sl-page] .lkStep.s5 .n,[data-sl-page] .lkStep.s6 .n{border-color:var(--sl-brand-hover)}

/* ---- route drawing, for the planning loop (16.8s, two lessons) ------------ */
@keyframes lkRouteA{
  0%,4%{stroke-dashoffset:var(--len);opacity:1}
  22%,44%{stroke-dashoffset:0;opacity:1}
  50%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes lkRouteB{
  0%,48%{stroke-dashoffset:var(--len);opacity:0}
  50%{stroke-dashoffset:var(--len);opacity:1}
  72%,94%{stroke-dashoffset:0;opacity:1}
  98%,100%{stroke-dashoffset:0;opacity:0}}
[data-sl-page] .lkRouteA{animation:lkRouteA var(--lc2) cubic-bezier(.4,.6,.3,1) infinite}
[data-sl-page] .lkRouteB{animation:lkRouteB var(--lc2) cubic-bezier(.4,.6,.3,1) infinite}
/* the two markers: FINISH is chosen first, START is arrived at second */
@keyframes lkFinA{0%,1%{opacity:0;r:0} 6%,44%{opacity:1;r:26} 48%,100%{opacity:0;r:26}}
@keyframes lkStartA{0%,20%{opacity:0;r:0} 26%,44%{opacity:1;r:26} 48%,100%{opacity:0;r:26}}
@keyframes lkFinB{0%,51%{opacity:0;r:0} 56%,94%{opacity:1;r:26} 98%,100%{opacity:0;r:26}}
@keyframes lkStartB{0%,70%{opacity:0;r:0} 76%,94%{opacity:1;r:26} 98%,100%{opacity:0;r:26}}
[data-sl-page] .lkFinA{animation:lkFinA var(--lc2) ease-out infinite}
[data-sl-page] .lkStartA{animation:lkStartA var(--lc2) ease-out infinite}
[data-sl-page] .lkFinB{animation:lkFinB var(--lc2) ease-out infinite}
[data-sl-page] .lkStartB{animation:lkStartB var(--lc2) ease-out infinite}
@keyframes lkCapA{0%,3%{opacity:0} 9%,44%{opacity:1} 48%,100%{opacity:0}}
@keyframes lkCapB{0%,53%{opacity:0} 59%,94%{opacity:1} 98%,100%{opacity:0}}
[data-sl-page] .lkCapA{animation:lkCapA var(--lc2) linear infinite;opacity:0}
[data-sl-page] .lkCapB{animation:lkCapB var(--lc2) linear infinite;opacity:0}

/* ---- four organiser shapes, one topic. 16.8s, 4.2s each ------------------- */
@keyframes lkShape1{0%,22%{opacity:1} 25%,97%{opacity:0} 100%{opacity:1}}
@keyframes lkShape2{0%,22%{opacity:0} 25%,47%{opacity:1} 50%,100%{opacity:0}}
@keyframes lkShape3{0%,47%{opacity:0} 50%,72%{opacity:1} 75%,100%{opacity:0}}
@keyframes lkShape4{0%,72%{opacity:0} 75%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .lkShape1{opacity:1}[data-sl-page] .lkShape2,[data-sl-page] .lkShape3,[data-sl-page] .lkShape4{opacity:0}
[data-sl-page] .lkShape1,[data-sl-page] .lkShape2,[data-sl-page] .lkShape3,[data-sl-page] .lkShape4{animation-duration:var(--lc2);
  animation-timing-function:cubic-bezier(.4,.1,.3,1);animation-iteration-count:infinite;animation-fill-mode:both}
[data-sl-page] .lkShape1{animation-name:lkShape1}[data-sl-page] .lkShape2{animation-name:lkShape2}
[data-sl-page] .lkShape3{animation-name:lkShape3}[data-sl-page] .lkShape4{animation-name:lkShape4}

/* ---- 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. ----------- */
@keyframes lkBlk1{0%,2%{opacity:0;transform:translateY(-14px)}   7%,93%{opacity:1;transform:none} 99%,100%{opacity:0}}
@keyframes lkBlk2{0%,9%{opacity:0;transform:translateY(-14px)}  14%,93%{opacity:1;transform:none} 99%,100%{opacity:0}}
@keyframes lkBlk3{0%,16%{opacity:0;transform:translateY(-14px)} 21%,93%{opacity:1;transform:none} 99%,100%{opacity:0}}
@keyframes lkBlk4{0%,23%{opacity:0;transform:translateY(-14px)} 28%,93%{opacity:1;transform:none} 99%,100%{opacity:0}}
@keyframes lkPara{0%,30%{opacity:0;transform:translateY(6px)}   37%,93%{opacity:1;transform:none} 99%,100%{opacity:0}}
[data-sl-page] .lkBlk1,[data-sl-page] .lkBlk2,[data-sl-page] .lkBlk3,[data-sl-page] .lkBlk4,[data-sl-page] .lkPara{opacity:0;animation-duration:var(--lc);
  animation-timing-function:cubic-bezier(.3,.8,.35,1);animation-iteration-count:infinite;animation-fill-mode:both}
[data-sl-page] .lkBlk1{animation-name:lkBlk1}[data-sl-page] .lkBlk2{animation-name:lkBlk2}
[data-sl-page] .lkBlk3{animation-name:lkBlk3}[data-sl-page] .lkBlk4{animation-name:lkBlk4}[data-sl-page] .lkPara{animation-name:lkPara}

/* ---- talk. Two learners, always present. Only the speech unfolds. --------- */
@keyframes lkSay1{0%,2%{opacity:0}  8%,93%{opacity:1} 99%,100%{opacity:0}}
@keyframes lkSay2{0%,20%{opacity:0} 27%,93%{opacity:1} 99%,100%{opacity:0}}
@keyframes lkSay3{0%,42%{opacity:0} 50%,93%{opacity:1} 99%,100%{opacity:0}}
[data-sl-page] .lkSay1,[data-sl-page] .lkSay2,[data-sl-page] .lkSay3{opacity:0;animation-duration:var(--lc);
  animation-timing-function:cubic-bezier(.22,.7,.25,1);animation-iteration-count:infinite;animation-fill-mode:both}
[data-sl-page] .lkSay1{animation-name:lkSay1}[data-sl-page] .lkSay2{animation-name:lkSay2}[data-sl-page] .lkSay3{animation-name:lkSay3}

/* ---- G13: reduced motion shows the FINISHED drawing, never an empty stage -- */
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .lk *{animation:none !important}
  [data-sl-page] .lkE1,[data-sl-page] .lkE2,[data-sl-page] .lkE3,[data-sl-page] .lkE4,[data-sl-page] .lkE5,[data-sl-page] .lkE6,[data-sl-page] .lkBlk1,[data-sl-page] .lkBlk2,[data-sl-page] .lkBlk3,[data-sl-page] .lkBlk4,[data-sl-page] .lkPara,[data-sl-page] .lkSay1,[data-sl-page] .lkSay2,[data-sl-page] .lkSay3,[data-sl-page] .lkShape1,[data-sl-page] .lkCapA{opacity:1 !important;transform:none !important}
  [data-sl-page] .lkShape2,[data-sl-page] .lkShape3,[data-sl-page] .lkShape4,[data-sl-page] .lkCapB,[data-sl-page] .lkRouteB{opacity:0 !important}
  [data-sl-page] .lkLate{opacity:1 !important}
  [data-sl-page] .lkRouteA{stroke-dashoffset:0 !important;opacity:1 !important}
  [data-sl-page] .lkStep{opacity:1 !important}
}



/* ---- format morph. one clock, no layout shift: the four labels stack. ------ */
[data-sl-page] .fmt-morph{position:relative; height:34px; margin:0 0 14px}
[data-sl-page] .fm{position:absolute; left:0; top:0; display:inline-flex; align-items:center; height:30px;
  padding:0 14px; border-radius:999px; background:var(--sl-build-wash); color:var(--sl-build-text);
  font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; white-space:nowrap; opacity:0;
  animation-duration:var(--lc2,16.8s); animation-timing-function:cubic-bezier(.4,.1,.3,1);
  animation-iteration-count:infinite; animation-fill-mode:both}
@keyframes fmA{0%,22%{opacity:1} 25%,97%{opacity:0} 100%{opacity:1}}
@keyframes fmB{0%,22%{opacity:0} 25%,47%{opacity:1} 50%,100%{opacity:0}}
@keyframes fmC{0%,47%{opacity:0} 50%,72%{opacity:1} 75%,100%{opacity:0}}
@keyframes fmD{0%,72%{opacity:0} 75%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .fm.f1{animation-name:fmA; opacity:1} [data-sl-page] .fm.f2{animation-name:fmB}
[data-sl-page] .fm.f3{animation-name:fmC} [data-sl-page] .fm.f4{animation-name:fmD}

/* ---- 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}
@keyframes shA{0%,28%{opacity:1} 33%,95%{opacity:0} 100%{opacity:1}}
@keyframes shB{0%,28%{opacity:0} 33%,62%{opacity:1} 67%,100%{opacity:0}}
@keyframes shC{0%,62%{opacity:0} 67%,95%{opacity:1} 100%{opacity:0}}
[data-sl-page] .sl1{animation-name:shA; opacity:1} [data-sl-page] .sl2{animation-name:shB} [data-sl-page] .sl3{animation-name:shC}
[data-sl-page] .portrait .cap{min-height:74px}
[data-sl-page] .cp{position:absolute; left:15px; right:15px; top:13px; 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] .cp.c1{animation-name:shA; opacity:1} [data-sl-page] .cp.c2{animation-name:shB} [data-sl-page] .cp.c3{animation-name:shC}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .fm,[data-sl-page] .slides img,[data-sl-page] .cp{animation:none !important}
  [data-sl-page] .fm.f2,[data-sl-page] .fm.f3,[data-sl-page] .fm.f4,[data-sl-page] .sl2,[data-sl-page] .sl3,[data-sl-page] .cp.c2,[data-sl-page] .cp.c3{opacity:0 !important}
  [data-sl-page] .fm.f1,[data-sl-page] .sl1,[data-sl-page] .cp.c1{opacity:1 !important}
}



/* the framework, laid out left to right */
[data-sl-page] .stage.stage-wide{max-width:none}   /* beats .stage max-width, which is declared later */
[data-sl-page] .fw-q{font-family:var(--sl-font-display) !important; font-size:17px; font-weight:600; fill:var(--sl-ink)}
[data-sl-page] .fw-f{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; fill:var(--sl-faint-aa); font-weight:600}
[data-sl-page] .fw-w{font-size:14px; fill:var(--sl-muted)}
[data-sl-page] .fw-cap{font-family:var(--sl-font-display) !important; font-size:18px; font-weight:600; fill:var(--sl-brand-hover)}
[data-sl-page] .fw-cap2{font-size:16px; fill:var(--sl-muted)}
[data-sl-page] .lkArcA,[data-sl-page] .lkArcB{opacity:0; animation-duration:var(--lc2); animation-iteration-count:infinite;
  animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1)}
@keyframes fwArcA{0%,3%{opacity:0} 9%,44%{opacity:1} 49%,100%{opacity:0}}
@keyframes fwArcB{0%,52%{opacity:0} 58%,94%{opacity:1} 99%,100%{opacity:0}}
[data-sl-page] .lkArcA{animation-name:fwArcA} [data-sl-page] .lkArcB{animation-name:fwArcB}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .lkArcA{animation:none;opacity:1} [data-sl-page] .lkArcB{animation:none;opacity:0} }



/* the two small tiles rotate, same idea as the hero */
[data-sl-page] .psl{position:relative}
[data-sl-page] .psl img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  animation-duration:15s; animation-iteration-count:infinite; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.4,.1,.3,1)}
@keyframes pslA{0%,42%{opacity:1} 50%,92%{opacity:0} 100%{opacity:1}}
@keyframes pslB{0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0}}
[data-sl-page] .psl .ps1{animation-name:pslA; opacity:1} [data-sl-page] .psl .ps2{animation-name:pslB}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .psl img{animation:none} [data-sl-page] .psl .ps1{opacity:1} [data-sl-page] .psl .ps2{opacity:0} }


/* a concrete example under each of the three uses */
[data-sl-page] .ux{width:100%; max-width:290px; height:auto; display:block; margin:16px 0 0}
[data-sl-page] .ux text{font-family:var(--sl-font-body) !important}
[data-sl-page] .ux .ux-t{font-family:var(--sl-font-mono) !important; font-size:8.5px; letter-spacing:.11em; fill:var(--sl-faint-aa); font-weight:600}
[data-sl-page] .ux .ux-k{font-family:var(--sl-font-mono) !important; font-size:8.5px; letter-spacing:.11em; fill:var(--sl-brand-deep); font-weight:600}
[data-sl-page] .ux .ux-b{font-size:12.5px; fill:var(--sl-ink)}
[data-sl-page] .ux .ux-m{font-size:11.5px; fill:var(--sl-brand-deep); font-weight:600}
[data-sl-page] .ux .iv{fill:var(--sl-surface)}
[data-sl-page] .ux .u1,[data-sl-page] .ux .u2,[data-sl-page] .ux .u3,[data-sl-page] .ux .uw{opacity:0; animation-duration:9s; animation-iteration-count:infinite;
  animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1)}
@keyframes uxA{0%,4%{opacity:0} 12%,92%{opacity:1} 99%,100%{opacity:0}}
@keyframes uxB{0%,22%{opacity:0} 30%,92%{opacity:1} 99%,100%{opacity:0}}
@keyframes uxC{0%,44%{opacity:0} 52%,92%{opacity:1} 99%,100%{opacity:0}}
[data-sl-page] .ux .u1{animation-name:uxA} [data-sl-page] .ux .uw{animation-name:uxB} [data-sl-page] .ux .u2{animation-name:uxB} [data-sl-page] .ux .u3{animation-name:uxC}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .ux .u1,[data-sl-page] .ux .u2,[data-sl-page] .ux .u3,[data-sl-page] .ux .uw{animation:none; opacity:1} }


[data-sl-page] .psl .pcap{position:absolute; left:0; right:0; bottom:0; height:32px}
[data-sl-page] .psl .pc{position:absolute; inset:0; display:flex; align-items:center; padding:0 11px;
  font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--sl-surface); background:linear-gradient(transparent, color-mix(in srgb, var(--sl-night) 88%, transparent) 42%);
  opacity:0; animation-duration:15s; animation-iteration-count:infinite; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.4,.1,.3,1)}
[data-sl-page] .psl .pc1{animation-name:pslA; opacity:1} [data-sl-page] .psl .pc2{animation-name:pslB}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .psl .pc{animation:none} [data-sl-page] .psl .pc1{opacity:1} [data-sl-page] .psl .pc2{opacity:0} }


/* conceding the free guidance, then showing the gap */
[data-sl-page] .halves{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); align-items:start}
[data-sl-page] .hf{padding:24px 26px 22px; border-radius:12px; background:var(--sl-ground)}
[data-sl-page] .hf-on{background:var(--sl-build-wash)}
[data-sl-page] .hf-k{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--sl-faint-aa); margin:0 0 14px}
[data-sl-page] .hf-on .hf-k{color:var(--sl-brand-deep)}
[data-sl-page] .hf ul{list-style:none; margin:0; padding:0}
[data-sl-page] .hf li{position:relative; padding:0 0 12px 20px; font-size:15.5px; line-height:1.52; color:var(--sl-muted)}
[data-sl-page] .hf li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%;
  background:var(--sl-border-strong)}
[data-sl-page] .hf-on li{color:var(--sl-ink)}
[data-sl-page] .hf-on li::before{background:var(--sl-brand)}
[data-sl-page] .hf-n{margin:8px 0 0; font-size:14px; color:var(--sl-faint-aa); font-style:italic}
@media (max-width:760px){ [data-sl-page] .halves{grid-template-columns:1fr} }


/* Paul, 10 Sep: nobody should think they have to buy something to get value */
[data-sl-page] .nobuy{list-style:none; margin:clamp(26px,3.5vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,32px)}
/* 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. */
[data-sl-page] .nobuy li{position:relative; padding:16px 0 0; border-top:1px solid var(--sl-border-strong);
  font-size:15px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .nobuy b{display:block; font-family:var(--sl-font-display) !important; font-size:16.5px; color:var(--sl-ink);
  font-weight:600; margin:0 0 6px; letter-spacing:-.01em}
[data-sl-page] .nobuy b::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--sl-brand); margin-right:9px; vertical-align:middle; position:relative; top:-1px}
@media (max-width:760px){ [data-sl-page] .nobuy{grid-template-columns:1fr; gap:16px} }

/* ---- the application ------------------------------------------------------ */
[data-sl-page] .plat{background:var(--sl-ground); --lc2:16.8s; padding-block:clamp(40px,5vw,64px)}   /* 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}
[data-sl-page] .way-pic{display:block; width:100%; height:100%; min-height:240px; background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px}
[data-sl-page] .way-pic text{font-family:var(--sl-font-body) !important; font-size:10.5px; fill:var(--sl-ink)}
[data-sl-page] .way-pic text.cv{fill:var(--sl-surface); font-weight:600; font-size:10.5px}
[data-sl-page] .way-pic text.ttl{font-family:var(--sl-font-display) !important; font-weight:600; font-size:10.5px; fill:var(--sl-ink)}
/* the blocks stack and the cards fan on the section clock, resting most of the time (G13) */
[data-sl-page] .way-pic .wb,[data-sl-page] .way-pic .cd{animation-duration:var(--lc2); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1); transform-box:fill-box; transform-origin:bottom left}
[data-sl-page] .wb3{animation-name:wbIn3} [data-sl-page] .wb2{animation-name:wbIn2} [data-sl-page] .wb1{animation-name:wbIn1}
@keyframes wbIn3{0%,4%{opacity:0;transform:translateY(-18px)} 10%,100%{opacity:1;transform:none}}
@keyframes wbIn2{0%,12%{opacity:0;transform:translateY(-18px)} 18%,100%{opacity:1;transform:none}}
@keyframes wbIn1{0%,20%{opacity:0;transform:translateY(-18px)} 26%,100%{opacity:1;transform:none}}
[data-sl-page] .cd1{animation-name:cdIn1} [data-sl-page] .cd2{animation-name:cdIn2} [data-sl-page] .cd3{animation-name:cdIn3} [data-sl-page] .cd4{animation-name:cdIn4} [data-sl-page] .cd5{animation-name:cdIn5}
@keyframes cdIn1{0%,4%{opacity:0;transform:translateY(8px)} 9%,100%{opacity:1;transform:none}}
@keyframes cdIn2{0%,9%{opacity:0;transform:translateY(8px)} 14%,100%{opacity:1;transform:none}}
@keyframes cdIn3{0%,14%{opacity:0;transform:translateY(8px)} 19%,100%{opacity:1;transform:none}}
@keyframes cdIn4{0%,19%{opacity:0;transform:translateY(8px)} 24%,100%{opacity:1;transform:none}}
@keyframes cdIn5{0%,24%{opacity:0;transform:translateY(8px)} 29%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .way-pic .wb,[data-sl-page] .way-pic .cd{animation:none; opacity:1} }
[data-sl-page] .app{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden}
[data-sl-page] .app-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--sl-border); background:var(--sl-ground)}
[data-sl-page] .app-bar .d{width:8px; height:8px; border-radius:50%; background:var(--sl-border-strong)}
[data-sl-page] .app-t{margin-left:8px; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--sl-faint-aa); font-weight:600}
[data-sl-page] .app-body{padding:18px 20px 22px; display:grid; grid-template-columns:100%}
/* three screens, one clock: the same app answering three different asks */
[data-sl-page] .scr{grid-area:1/1; min-width:0; opacity:0; animation-duration:var(--lc2); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1)}
@keyframes scrA{0%,1%{opacity:0;transform:translateY(4px)} 5%,30%{opacity:1;transform:none} 33%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes scrB{0%,33%{opacity:0;transform:translateY(4px)} 38%,63%{opacity:1;transform:none} 66%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes scrC{0%,66%{opacity:0;transform:translateY(4px)} 71%,96%{opacity:1;transform:none} 99%,100%{opacity:0;transform:translateY(-3px)}}
[data-sl-page] .s1{animation-name:scrA} [data-sl-page] .s2{animation-name:scrB} [data-sl-page] .s3{animation-name:scrC}
[data-sl-page] .ch.on{background:var(--sl-brand); color:var(--sl-surface); border-color:var(--sl-brand)}
[data-sl-page] .ao-kc{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
[data-sl-page] .ao-kc b{font-weight:500; font-size:13.5px; color:var(--sl-ink); background:var(--sl-build-wash); border-radius:6px; padding:8px 10px; text-align:center}
[data-sl-page] .ao-say b{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-say-text); margin-right:8px; font-weight:600}
[data-sl-page] .app-lb{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sl-faint-aa); font-weight:600; margin:0 0 7px}
[data-sl-page] .app-topic{font-family:var(--sl-font-display) !important; font-size:17px; color:var(--sl-ink); padding:9px 12px;
  border:1px solid var(--sl-border); border-radius:8px; margin:0 0 16px}
[data-sl-page] .app-chips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px}
[data-sl-page] .ch{font-size:13.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--sl-border);
  color:var(--sl-muted); background:var(--sl-surface)}
[data-sl-page] .ao-k{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sl-brand-deep); font-weight:600; margin:0 0 10px}
[data-sl-page] .ao-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 24px; position:relative}
[data-sl-page] .ao-flow b{position:relative; font-weight:500; font-size:13px; color:var(--sl-ink); background:var(--sl-map-wash); border-radius:6px; padding:9px 6px; text-align:center; white-space:nowrap}
[data-sl-page] .ao-flow b + b::before{content:"\2192"; position:absolute; left:-20px; top:50%; transform:translateY(-50%); width:16px; text-align:center; color:var(--sl-map); font-size:15px; line-height:1}
@media (max-width:600px){ [data-sl-page] .ao-flow{grid-template-columns:1fr 1fr; gap:14px 24px} [data-sl-page] .ao-flow b:nth-child(3)::before{display:none} }
[data-sl-page] .ao-say{font-size:14px; color:var(--sl-ink); background:var(--sl-say-wash); border-radius:8px;
  padding:9px 12px; margin-bottom:7px}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .scr{animation:none} [data-sl-page] .s1{opacity:1} [data-sl-page] .s2,[data-sl-page] .s3{opacity:0} }
@media (max-width:860px){ [data-sl-page] .ways{grid-template-columns:1fr} [data-sl-page] .way{display:block} [data-sl-page] .way-pic{height:auto; min-height:0; aspect-ratio:3/2} }

/* ---- what it reaches: four outcomes, lit in turn --------------------------- */
[data-sl-page] .outc{background:var(--sl-ground)}
[data-sl-page] .ocards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0}
[data-sl-page] .oc{position:relative; padding:22px 26px 26px 0; margin-right:26px; display:flex; flex-direction:column}
[data-sl-page] .oc+.oc{padding-left:26px; border-left:1px solid var(--sl-border); margin-left:0}
[data-sl-page] .oc:last-child{margin-right:0}
[data-sl-page] .oc .ok{display:block; font-family:var(--sl-font-display) !important; font-size:clamp(17px,1.5vw,20px);
  line-height:1.2; color:var(--sl-ink); font-weight:600; margin:0 0 9px; letter-spacing:-.01em}
[data-sl-page] .oc p{margin:0; font-size:15px; line-height:1.56; color:var(--sl-muted)}
[data-sl-page] .oc i{position:absolute; left:0; top:0; height:3px; width:100%; transform:scaleX(0);
  transform-origin:left; background:var(--sl-brand); border-radius:2px;
  animation-duration:14s; animation-iteration-count:infinite; animation-timing-function:linear}
[data-sl-page] .oc+.oc i{left:26px; width:calc(100% - 26px)}
@keyframes ocA{0%{transform:scaleX(0)} 14%{transform:scaleX(1)} 25%,100%{transform:scaleX(0)}}
@keyframes ocB{0%,25%{transform:scaleX(0)} 39%{transform:scaleX(1)} 50%,100%{transform:scaleX(0)}}
@keyframes ocC{0%,50%{transform:scaleX(0)} 64%{transform:scaleX(1)} 75%,100%{transform:scaleX(0)}}
@keyframes ocD{0%,75%{transform:scaleX(0)} 89%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
[data-sl-page] .o1 i{animation-name:ocA} [data-sl-page] .o2 i{animation-name:ocB} [data-sl-page] .o3 i{animation-name:ocC} [data-sl-page] .o4 i{animation-name:ocD}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .oc i{animation:none; transform:scaleX(1); opacity:.35} }
@media (max-width:860px){ [data-sl-page] .ocards{grid-template-columns:1fr 1fr}
  [data-sl-page] .oc{padding:20px 18px 22px 0; margin-right:18px}
  [data-sl-page] .oc:nth-child(3){padding-left:0; border-left:0; margin-left:0} [data-sl-page] .oc:nth-child(3) i{left:0; width:100%} }
@media (max-width:520px){ [data-sl-page] .ocards{grid-template-columns:1fr}
  [data-sl-page] .oc,[data-sl-page] .oc+.oc{padding:18px 0; border-left:0; padding-left:0; margin-right:0}
  [data-sl-page] .oc+.oc{border-top:1px solid var(--sl-border)} [data-sl-page] .oc i,[data-sl-page] .oc+.oc i{left:0; width:100%} }

/* ---- the theory of change tool ------------------------------------------- */
[data-sl-page] .toc{display:grid; grid-template-columns:.86fr 1.14fr; border:1px solid var(--sl-border);
  border-radius:14px; overflow:hidden; background:var(--sl-surface)}
[data-sl-page] .toc-side{background:var(--sl-ground); border-right:1px solid var(--sl-border); padding:10px; position:relative}
/* 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. */
[data-sl-page] .toc-side .toc-list button{padding-right:122px}   /* a lane for the note; the shorthand padding rule below would otherwise win */
[data-sl-page] .toc-hint{position:absolute; right:14px; top:14px; width:112px; display:flex; align-items:center; gap:6px; color:var(--sl-brand-hover); pointer-events:none; transition:top .5s cubic-bezier(.2,.7,.2,1)}
[data-sl-page] .toc-hint svg{width:34px; height:18px; flex:none; animation:tocNudge 1.4s ease-in-out infinite alternate}
[data-sl-page] .toc-hint-t{font-family:'Caveat','Bradley Hand','Segoe Print',cursive !important; font-size:19px; line-height:.95; font-weight:600; transform:rotate(-3deg); letter-spacing:.01em}
@keyframes tocNudge{from{transform:translateX(0)} to{transform:translateX(-4px)}}
[data-sl-page] .toc-held .toc-hint{display:none}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .toc-hint svg{animation:none} }
@media (max-width:600px){ [data-sl-page] .toc-side .toc-list button{padding-right:108px} [data-sl-page] .toc-hint{width:100px; right:10px} [data-sl-page] .toc-hint-t{font-size:17px} }
[data-sl-page] .toc-q{font-family:var(--sl-font-display) !important; font-size:16.5px; font-weight:600; color:var(--sl-ink); margin:8px 14px 10px; line-height:1.3}
[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] .toc-panel{padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; justify-content:center}
[data-sl-page] .toc-you{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sl-faint-aa); font-weight:600; margin:0}
[data-sl-page] .toc-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 8px}
[data-sl-page] .toc-term{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--toc-t,var(--sl-build-text)); display:inline-flex; align-items:center; gap:6px}
[data-sl-page] .toc-term::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--toc-a,var(--sl-brand))}
[data-sl-page] .toc-prog{grid-column:1/-1; height:2px; background:var(--sl-border); position:relative; overflow:hidden}
[data-sl-page] .toc-prog i{position:absolute; inset:0 auto 0 0; width:100%; background:var(--toc-a,var(--sl-brand));
  transform-origin:left; transform:scaleX(0); animation:tocProg var(--tocDur,6s) linear infinite}
@keyframes tocProg{from{transform:scaleX(0)} to{transform:scaleX(1)}}
[data-sl-page] .toc-held .toc-prog{display:none}
[data-sl-page] .term-ticker{margin:18px 0 0; font-size:14px; color:var(--sl-muted); display:flex; align-items:center; gap:14px}
[data-sl-page] .tt-clip{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent) /* a mask reads coverage, not colour */}
[data-sl-page] .term-ticker>b{color:var(--sl-ink); font-weight:600; white-space:nowrap; flex:none}
[data-sl-page] .tt-track{display:flex; width:max-content; animation:ttRun 48s linear infinite}
[data-sl-page] .term-ticker:hover .tt-track, [data-sl-page] .term-ticker:focus-within .tt-track{animation-play-state:paused}
[data-sl-page] .tt-run{display:inline-flex; flex:none}
[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)}
@keyframes ttRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .tt-track{animation:none; width:auto; flex-wrap:wrap} [data-sl-page] .tt-run{flex-wrap:wrap} [data-sl-page] .tt-run[aria-hidden]{display:none} [data-sl-page] .tt-clip{overflow:visible; mask-image:none; -webkit-mask-image:none} [data-sl-page] .term-ticker{align-items:flex-start} }
@media (max-width:600px){ [data-sl-page] .term-ticker{flex-direction:column; align-items:stretch; gap:6px} }
@media (prefers-reduced-motion:reduce){ [data-sl-page] .toc-prog{display:none} }
[data-sl-page] .toc-prob{font-family:var(--sl-font-display) !important; font-size:clamp(22px,2.7vw,31px); line-height:1.24;
  letter-spacing:-.015em; color:var(--sl-ink); margin:0 0 20px}
[data-sl-page] .toc-chain{list-style:none; margin:0 0 20px; padding:0}
[data-sl-page] .toc-chain li{position:relative; padding:0 0 13px 26px; font-size:15.5px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .toc-chain li::before{content:""; position:absolute; left:6px; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--toc-a,var(--sl-brand))}
[data-sl-page] .toc-chain li::after{content:""; position:absolute; left:9px; top:19px; bottom:2px; width:1px; background:var(--sl-border)}
[data-sl-page] .toc-chain li:last-child::after{display:none}
[data-sl-page] .toc-chain li b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .toc-root{background:var(--toc-w,var(--sl-build-wash)); border-radius:12px; padding:18px 20px 20px; margin:0}
[data-sl-page] .tr-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 5px}
[data-sl-page] .toc-root .k{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--toc-t,var(--sl-build-text)); margin:0 0 5px}
[data-sl-page] .toc-root p{font-family:var(--sl-font-display) !important; font-size:19px; line-height:1.3; color:var(--sl-ink); margin:0}

[data-sl-page] .toc-tag{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--toc-t,var(--sl-build-text)); background:var(--toc-w,var(--sl-build-wash));
  padding:5px 9px; border-radius:999px}
[data-sl-page] .toc[data-m="map"]{--toc-a:var(--sl-map); --toc-w:var(--sl-map-wash); --toc-t:var(--sl-map-text)}
[data-sl-page] .toc[data-m="say"]{--toc-a:var(--sl-say); --toc-w:var(--sl-say-wash); --toc-t:var(--sl-say-text)}
[data-sl-page] .toc[data-m="build"]{--toc-a:var(--sl-build); --toc-w:var(--sl-build-wash); --toc-t:var(--sl-build-text)}
[data-sl-page] .toc[data-m="frame"]{--toc-a:var(--sl-brand); --toc-w:var(--sl-build-wash); --toc-t:var(--sl-build-text)}   /* G5: brand and Build It share a value */
@media (max-width:860px){ [data-sl-page] .toc{grid-template-columns:1fr} [data-sl-page] .toc-list{border-right:0; border-bottom:1px solid var(--sl-border)} [data-sl-page] .toc-do{grid-template-columns:1fr} }

/* ---- the named solution, one small loop per tool -------------------------- */
[data-sl-page] .toc-sol{display:grid; grid-template-columns:124px 1fr; gap:16px; align-items:center;
  margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--sl-border)}
[data-sl-page] .toc-sol .gx{width:124px; height:92px; display:block; background:var(--sl-surface); border-radius:9px}
[data-sl-page] .toc-sol .nm{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; font-weight:600; color:var(--toc-t,var(--sl-build-text)); margin:0 0 6px}
[data-sl-page] .toc-sol .ln{font-size:15.5px; line-height:1.5; color:var(--sl-muted); margin:0}
[data-sl-page] .toc-sol .ln b{color:var(--sl-ink); font-weight:600}
@media (max-width:520px){ [data-sl-page] .toc-sol{grid-template-columns:1fr; gap:12px}
  [data-sl-page] .toc-sol .gx{width:100%; max-width:200px; height:86px} }

/* one clock, no delays: the stagger lives in the percentages */
[data-sl-page] .gx{--gc:6.4s}
[data-sl-page] .gx text{font-size:8.4px}
[data-sl-page] .gx text.bigl{font-size:10.4px}
[data-sl-page] .gx text{font-family:var(--sl-font-body) !important; font-size:8.4px; fill:var(--sl-muted)}
[data-sl-page] .gx text.iv{fill:var(--sl-surface)}   /* a CSS fill beats fill="..." on the element */
[data-sl-page] .gx .lb{font-family:var(--sl-font-mono) !important; font-size:7.2px; letter-spacing:.06em; fill:var(--toc-t,var(--sl-build-text))}
[data-sl-page] .g1,[data-sl-page] .g2,[data-sl-page] .g3,[data-sl-page] .g4,[data-sl-page] .g5,[data-sl-page] .gw{animation-duration:var(--gc); animation-iteration-count:infinite;
  animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1);
  transform-box:fill-box; transform-origin:center; opacity:0}
@keyframes gp1{0%,2%{opacity:0;transform:scale(.72)}  9%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp2{0%,10%{opacity:0;transform:scale(.72)} 17%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp3{0%,18%{opacity:0;transform:scale(.72)} 25%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp4{0%,26%{opacity:0;transform:scale(.72)} 33%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes gp5{0%,34%{opacity:0;transform:scale(.72)} 41%,90%{opacity:1;transform:none} 97%,100%{opacity:0}}
[data-sl-page] .g1{animation-name:gp1} [data-sl-page] .g2{animation-name:gp2} [data-sl-page] .g3{animation-name:gp3}
[data-sl-page] .g4{animation-name:gp4} [data-sl-page] .g5{animation-name:gp5}
/* a line that draws itself */
@keyframes gdraw{0%,8%{opacity:1;stroke-dashoffset:64} 34%,90%{opacity:1;stroke-dashoffset:0} 97%,100%{opacity:0}}
[data-sl-page] .gw{stroke-dasharray:64; animation-name:gdraw}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .g1,[data-sl-page] .g2,[data-sl-page] .g3,[data-sl-page] .g4,[data-sl-page] .g5,[data-sl-page] .gw{animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important}
}

[data-sl-page] .room-note{margin:16px 0 0; font-size:15.5px; line-height:1.62; color:var(--sl-muted)}   /* 7.73:1; the night token measured 2.34:1 here */
[data-sl-page] .uses{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  width:min(100%,940px); margin:22px 0 clamp(46px,5.5vw,72px)}   /* one rule, or the later one wins */
[data-sl-page] .uses li{border-top:1px solid var(--sl-border); padding:13px 0 0}
[data-sl-page] .uses .u-k{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--sl-brand-hover); display:block; margin:0 0 6px}
[data-sl-page] .uses p{margin:0; font-size:15px; line-height:1.55; color:var(--sl-muted)}
@media (max-width:720px){ [data-sl-page] .uses{grid-template-columns:1fr; gap:14px} }

/* ---- loop layout ---------------------------------------------------------- */
[data-sl-page] .pri{display:grid; grid-template-columns:1.02fr .98fr; gap:0; border:1px solid var(--sl-border);
  border-radius:12px; overflow:hidden; background:var(--sl-surface)}
[data-sl-page] .pri-list{background:var(--sl-build-wash); padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px)}
[data-sl-page] .pri-list .lkStep{font-size:15.5px; color:var(--sl-ink); font-weight:500}
[data-sl-page] .pri-say{padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px)}
[data-sl-page] .pri-kick{font-family:var(--sl-font-display) !important; font-size:clamp(19px,2.1vw,24px); line-height:1.25;
  letter-spacing:-.015em; color:var(--sl-ink); margin:0 0 14px}
[data-sl-page] .pri-body{font-size:15.5px; color:var(--sl-muted); line-height:1.62; margin:0 0 18px}
[data-sl-page] .pri-body strong{color:var(--sl-ink); font-weight:600}
[data-sl-page] .pri-foot{font-size:13.5px; color:var(--sl-faint-aa); margin:0; padding-top:16px; border-top:1px solid var(--sl-border)}
@media (max-width:820px){ [data-sl-page] .pri{grid-template-columns:1fr} }

[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}
[data-sl-page] .fw-cards.loop{margin-top:clamp(44px,5vw,66px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--sl-border)}   /* 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] .loop-head{max-width:60ch; margin-bottom:26px}
[data-sl-page] .loop-head h3{font-size:clamp(22px,2.6vw,31px); line-height:1.16; margin:0 0 12px; letter-spacing:-.02em}
[data-sl-page] .loop-lede{font-size:16px; color:var(--sl-muted); line-height:1.62; margin:0}
[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}
[data-sl-page] .readout{display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0; font-size:13.5px; color:var(--sl-faint-aa)}
[data-sl-page] .readout b{color:var(--sl-muted); font-weight:600}

/* 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. */
[data-sl-page] .dom-map .eyebrow{color:var(--sl-map-text)}   [data-sl-page] .dom-map .accent{color:var(--sl-map-text)}
[data-sl-page] .dom-say .eyebrow{color:var(--sl-say-text)}   [data-sl-page] .dom-say .accent{color:var(--sl-say-text)}
[data-sl-page] .dom-build .eyebrow{color:var(--sl-build-text)} [data-sl-page] .dom-build .accent{color:var(--sl-build-text)}
[data-sl-page] .dom-map .readout b{color:var(--sl-map-text)}
[data-sl-page] .dom-say .readout b{color:var(--sl-say-text)}
[data-sl-page] .dom-build .readout b{color:var(--sl-build-text)}

/* ---- svg type ---- */
[data-sl-page] .fw-l{font-family:var(--sl-font-display) !important; font-size:13px; font-weight:600; fill:var(--sl-ink)}
[data-sl-page] .fw-s{font-family:var(--sl-font-body) !important; font-size:11px; font-weight:500; fill:var(--sl-muted)}
[data-sl-page] .fw-cap{font-family:var(--sl-font-display) !important; font-size:13.5px; font-weight:600; fill:var(--sl-brand-hover)}
[data-sl-page] .or-n rect{fill:var(--sl-surface); stroke:var(--sl-map); stroke-width:1.1}
[data-sl-page] .or-n text{font-family:var(--sl-font-body) !important; font-size:12.5px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .or-c{font-family:var(--sl-font-display) !important; font-size:14px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .or-h{font-family:var(--sl-font-display) !important; font-size:13px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .or-r{font-family:var(--sl-font-body) !important; font-size:11.5px; font-weight:500; fill:var(--sl-muted)}
[data-sl-page] .or-tag{font-family:var(--sl-font-body) !important; font-size:12.5px; font-weight:600; fill:var(--sl-map-text)}
[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)}
[data-sl-page] .sp{font-family:var(--sl-font-body) !important; font-size:14.5px; font-weight:500; fill:var(--sl-ink)}
[data-sl-page] .sp-b{font-weight:600; fill:var(--sl-say-text)}
[data-sl-page] .socket rect{fill:none; stroke:var(--sl-border-strong); stroke-width:1.2; stroke-dasharray:4 4}
[data-sl-page] .bk2{font-family:var(--sl-font-body) !important; font-size:13px; font-weight:600; fill:var(--sl-wb-ink)}
[data-sl-page] .bx-h{font-family:var(--sl-font-display) !important; font-size:15px; font-weight:600; fill:var(--sl-ink)}
[data-sl-page] .bx-p{font-family:var(--sl-font-body) !important; font-size:14px; fill:var(--sl-muted)}
[data-sl-page] .bx-c{font-family:var(--sl-font-display) !important; font-size:14px; font-weight:600; fill:var(--sl-build-text)}
[data-sl-page] .bx-t{font-family:var(--sl-font-body) !important; font-size:13px; font-weight:600; fill:var(--sl-build-text)}
@keyframes lkLate{0%,80%{opacity:0} 85%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .lkLate{opacity:0; animation:lkLate var(--lc2) cubic-bezier(.22,.7,.25,1) infinite}
[data-sl-page] .bk{font-family:var(--sl-font-body) !important; font-size:15px; font-weight:600; fill:var(--sl-wb-ink)}
[data-sl-page] .pg{font-family:var(--sl-font-body) !important; font-size:15px; font-weight:600; fill:var(--sl-ink)}
[data-sl-page] .pg-m{font-weight:400; fill:var(--sl-muted)}
[data-sl-page] .pg-s{font-size:12.5px; font-weight:600; fill:var(--sl-build-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). */
@media (min-width:900px){
  html.sl-m [data-sl-page] .fw-cards::after{content:""; display:block; height:70vh}
  html.sl-m [data-sl-page] .fw-stick{position:sticky; top:clamp(48px,6vh,76px)}
}

/* 11 Sep: photographs beside the drawings. Captions say what is happening, never where, unless it is a real photo of a named place. */
[data-sl-page] .ill { margin:0 }
[data-sl-page] .ill img { display:block; width:100%; height:auto; border-radius:12px }
[data-sl-page] .ill figcaption { margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--sl-muted) }
[data-sl-page] .stage-pair { display:grid; grid-template-columns:minmax(0,620px) minmax(220px,1fr); gap:clamp(20px,3vw,36px); align-items:end }
[data-sl-page] .stage-pair .stage { max-width:none }
/* 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 }
  [data-sl-page] .stage.stage-wide svg { min-width:1000px }
  /* 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 */
  [data-sl-page] .fw-cards .stage.stage-wide svg { min-width:0 }
  [data-sl-page] .fw-cards .stage { overflow:hidden }
  [data-sl-page] .fc-pos-cards { transform:translate(0,-70px) }
  [data-sl-page] .fc-pos-say { transform:translate(-440px,50px) }
  [data-sl-page] .fc-teacher { transform:translate(14px,0) }   /* the bust is wider than the old figure; without this its left shoulder is off the phone stage */
  [data-sl-page] .fc-pos-mark { transform:translate(-500px,-10px) }   /* the marked work takes the teacher's slot; they cross-fade */
  [data-sl-page] .fc-pos-cap { transform:translate(0,2px) }
  [data-sl-page] .fc-cap { font-size:12px }   /* the longest caption is 52 characters and has to fit 440 units */
  [data-sl-page] .stage-pair > * { min-width:0 }
}
[data-sl-page] .stage-ill img { aspect-ratio:5/4; object-fit:cover; object-position:50% 74% } /* portrait source, cropped to the row of bricks */
[data-sl-page] .hood-head { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; margin-bottom:clamp(30px,4vw,50px) }
[data-sl-page] .hood-head .sec-head { margin-bottom:0 }
[data-sl-page] .room-ill { margin-top:22px }
[data-sl-page] .day{padding-top:clamp(34px,4vw,54px)}
[data-sl-page] .day .mid-head{margin-top:0; max-width:64ch}
[data-sl-page] .cases{list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,30px) clamp(14px,2vw,22px)}
[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-body{padding-top:11px}
[data-sl-page] .case-where{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--sl-brand-hover); margin:0 0 5px}
[data-sl-page] .case h4{font-size:16.5px; line-height:1.25; margin:0 0 5px; letter-spacing:-.01em}
[data-sl-page] .case-body p:not(.case-where){font-size:14.5px; line-height:1.55; color:var(--sl-muted); margin:0}
[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}
@media (max-width:860px){ [data-sl-page] .cases{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ [data-sl-page] .cases{grid-template-columns:1fr} }
@media (max-width:860px){ [data-sl-page] .stage-pair, [data-sl-page] .hood-head { grid-template-columns:1fr } }

/* 11 Sep, Paul: no orphaned words in a headline */
[data-sl-page] .sec-head h2, [data-sl-page] .hero h1, [data-sl-page] .loop-head h3 { 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] .oc { --oc:14s }
[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) }
[data-sl-page] .mind .mcap { font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.06em; fill:var(--sl-faint-aa); text-transform:uppercase }
[data-sl-page] .mind .mhead { fill:none; stroke:var(--sl-brand); stroke-width:1.6 }
[data-sl-page] .mind .mword rect, [data-sl-page] .mind .mbub rect { fill:var(--sl-surface); stroke:var(--sl-brand); stroke-width:1.3 }
[data-sl-page] .mind .mblock rect { fill:var(--sl-brand); opacity:.85 }
[data-sl-page] .mind .mblock text { fill:var(--sl-surface); font-weight:600 }
[data-sl-page] .mind .msheet { fill:var(--sl-surface); stroke:var(--sl-border-strong); stroke-width:1.2 }
[data-sl-page] .mind .mline { fill:none; stroke:var(--sl-border-strong); stroke-width:3; stroke-linecap:round }
[data-sl-page] .mind .marc { fill:none; stroke:var(--sl-brand); stroke-width:1.6; stroke-dasharray:100; stroke-dashoffset:100 }
[data-sl-page] .mind .mbJ rect { fill:var(--sl-build-wash); stroke:none }
[data-sl-page] .mind .mbJ text { font-weight:600 }
[data-sl-page] .mind .mword, [data-sl-page] .mind .mblock, [data-sl-page] .mind .marc, [data-sl-page] .mind .mbub, [data-sl-page] .mind .mtext { animation-duration:var(--oc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1) }
/* card 1, reading: 0 to 25%. words travel into the head, blocks stack */
@keyframes mdW1 { 0%,3%{transform:none;opacity:1} 9%,20%{transform:translateX(112px);opacity:0} 22%,100%{transform:none;opacity:1} }
@keyframes mdW2 { 0%,8%{transform:none;opacity:1} 14%,20%{transform:translateX(112px);opacity:0} 22%,100%{transform:none;opacity:1} }
@keyframes mdW3 { 0%,13%{transform:none;opacity:1} 19%,20%{transform:translateX(112px);opacity:0} 22%,100%{transform:none;opacity:1} }
@keyframes mdB1 { 0%,7%{opacity:0} 9%,100%{opacity:.85} }
@keyframes mdB2 { 0%,12%{opacity:0} 14%,100%{opacity:.85} }
@keyframes mdB3 { 0%,17%{opacity:0} 19%,100%{opacity:.85} }
[data-sl-page] .o1 .mw1{animation-name:mdW1} [data-sl-page] .o1 .mw2{animation-name:mdW2} [data-sl-page] .o1 .mw3{animation-name:mdW3}
[data-sl-page] .o1 .mb1{animation-name:mdB1} [data-sl-page] .o1 .mb2{animation-name:mdB2} [data-sl-page] .o1 .mb3{animation-name:mdB3}
/* card 2, revision and retrieval: 25 to 50%. a block goes out to the page and comes back */
@keyframes mdRv { 0%,26%{transform:none} 33%,37%{transform:translate(110px,8px)} 45%,100%{transform:none} }
@keyframes mdArcOut { 0%,24%{stroke-dashoffset:0;opacity:.25} 25%,26%{stroke-dashoffset:100;opacity:1} 33%,44%{stroke-dashoffset:0;opacity:1} 48%,100%{stroke-dashoffset:0;opacity:.25} }
@keyframes mdArcIn { 0%,24%{stroke-dashoffset:0;opacity:.25} 25%,36%{stroke-dashoffset:100;opacity:1} 44%,48%{stroke-dashoffset:0;opacity:1} 52%,100%{stroke-dashoffset:0;opacity:.25} }
[data-sl-page] .o2 .mrv{animation-name:mdRv} [data-sl-page] .o2 .marc-out{animation-name:mdArcOut} [data-sl-page] .o2 .marc-in{animation-name:mdArcIn}
/* card 3, writing: 50 to 75%. scattered blocks line up, then the text draws */
@keyframes mdWb1 { 0%,49%{transform:none} 50%,51%{transform:translate(-6px,-14px) rotate(-6deg)} 58%,100%{transform:none} }
@keyframes mdWb2 { 0%,49%{transform:none} 50%,51%{transform:translate(4px,12px) rotate(4deg)} 60%,100%{transform:none} }
@keyframes mdWb3 { 0%,49%{transform:none} 50%,51%{transform:translate(8px,-10px) rotate(7deg)} 62%,100%{transform:none} }
@keyframes mdText { 0%,49%{stroke-dashoffset:0} 50%,62%{stroke-dashoffset:100} 72%,100%{stroke-dashoffset:0} }
[data-sl-page] .o3 .mwb1{animation-name:mdWb1} [data-sl-page] .o3 .mwb2{animation-name:mdWb2} [data-sl-page] .o3 .mwb3{animation-name:mdWb3}
[data-sl-page] .o3 .mtext{stroke-dasharray:100; stroke-dashoffset:100; animation-name:mdText}
[data-sl-page] .o3 .mblock{transform-box:fill-box; transform-origin:center}
/* card 4, speaking and listening: 75 to 100%. two half thoughts, one answer */
@keyframes mdBubA { 0%,74%{opacity:1;transform:none} 75%,76%{opacity:0;transform:translateY(4px)} 81%,100%{opacity:1;transform:none} }
@keyframes mdBubB { 0%,74%{opacity:1;transform:none} 75%,83%{opacity:0;transform:translateY(4px)} 88%,100%{opacity:1;transform:none} }
@keyframes mdBubJ { 0%,74%{opacity:1;transform:none} 75%,90%{opacity:0;transform:translateY(4px)} 95%,100%{opacity:1;transform:none} }
[data-sl-page] .o4 .mbA{animation-name:mdBubA} [data-sl-page] .o4 .mbB{animation-name:mdBubB} [data-sl-page] .o4 .mbJ{animation-name:mdBubJ}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .mind *{animation:none !important}
  [data-sl-page] .mind .mword, [data-sl-page] .mind .mblock, [data-sl-page] .mind .mbub { opacity:1 !important; transform:none !important }
  [data-sl-page] .mind .marc, [data-sl-page] .mind .mtext { stroke-dashoffset:0 !important }
}

/* ---- the framework picture, static, and the cards in three beats ---- */
[data-sl-page] .fw-pics { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px) }
[data-sl-page] .fw-pics li, [data-sl-page] .fw-pics figure { margin:0 }
[data-sl-page] .fw-pics img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px }
[data-sl-page] .fw-pics figcaption { margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--sl-muted) }
[data-sl-page] .fw-pics figcaption b { color:var(--sl-ink); font-weight:600 }
[data-sl-page] .fw-more { margin:16px 0 clamp(30px,4vw,44px); font-size:14.5px; color:var(--sl-muted) }
[data-sl-page] .fw-more a { color:var(--sl-brand-hover); font-weight:600; text-decoration:none; font-size:inherit; font-family:inherit !important }
[data-sl-page] .fw-more a:hover { text-decoration:underline }
@media (max-width:860px){ [data-sl-page] .fw-pics { grid-template-columns:1fr 1fr } [data-sl-page] .fw-pics li:last-child { display:none } }
@media (max-width:600px){ [data-sl-page] .fw-pics { grid-template-columns:1fr } [data-sl-page] .fw-pics li:last-child { display:block } }
[data-sl-page] .fc-beat { font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; fill:var(--sl-faint-aa) }
[data-sl-page] .fc-deck-t { font-family:var(--sl-font-mono) !important; font-size:10px; letter-spacing:.08em; text-transform:uppercase; fill:var(--sl-muted) }
[data-sl-page] .fc-v { font-family:var(--sl-font-display) !important; font-size:16px; font-weight:600; fill:var(--sl-surface) }  /* the real card: white verb on the family colour */
[data-sl-page] .fc-n { fill:var(--sl-surface) }
[data-sl-page] .fc-nt { font-family:var(--sl-font-body) !important; font-size:11px; font-weight:600; fill:var(--sl-ink) }
[data-sl-page] .fc-sp { font-family:var(--sl-font-body) !important; font-size:13.2px; fill:var(--sl-ink) }
[data-sl-page] .fc-it { font-family:var(--sl-font-body) !important; font-size:13px; fill:var(--sl-ink) }
[data-sl-page] .fc-cap { font-family:var(--sl-font-display) !important; font-size:16px; font-weight:600; fill:var(--sl-brand-hover) }
[data-sl-page] .fc-beats-h { list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px) }
[data-sl-page] .fc-beats-h li { font-size:14.5px; line-height:1.5; color:var(--sl-muted) }
[data-sl-page] .fc-beats-h b { display:block; font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--sl-faint-aa); margin-bottom:6px; animation-duration:var(--lc2); animation-iteration-count:infinite; animation-fill-mode:both }
[data-sl-page] .fbh1 b { animation-name:fcHB1 } [data-sl-page] .fbh2 b { animation-name:fcHB2 } [data-sl-page] .fbh3 b { animation-name:fcHB3 }
@keyframes fcHB1 { 0%,1%{color:var(--sl-brand-hover)} 32%,100%{color:var(--sl-faint-aa)} }
@keyframes fcHB2 { 0%,33%{color:var(--sl-faint-aa)} 34%,65%{color:var(--sl-brand-hover)} 66%,100%{color:var(--sl-faint-aa)} }
@keyframes fcHB3 { 0%,66%{color:var(--sl-faint-aa)} 67%,99%{color:var(--sl-brand-hover)} 100%{color:var(--sl-faint-aa)} }
[data-sl-page] .fc-ss { margin-top:10px }
@media (max-width:860px){ [data-sl-page] .fc-beats-h { grid-template-columns:1fr; gap:10px } }
[data-sl-page] .fc-card, [data-sl-page] .fc-say, [data-sl-page] .fc-mark, [data-sl-page] .fc-ic, [data-sl-page] .fc-cap, [data-sl-page] .fc-beat, [data-sl-page] .fc-n, [data-sl-page] .fc-nt { animation-duration:var(--lc2); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1) }
[data-sl-page] .fc-card { transform-box:fill-box; transform-origin:center }
/* beat 1: cards leave the deck for the row */
@keyframes fcC1 { 0%,3%{transform:translate(-130px,100px);opacity:0} 4%{opacity:1} 10%,96%{transform:translate(10px,100px);opacity:1} 100%{transform:translate(10px,100px);opacity:0} }
@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} }
@keyframes fcC3 { 0%,15%{transform:translate(-130px,100px);opacity:0} 16%{opacity:1} 22%,96%{transform:translate(290px,100px);opacity:1} 100%{transform:translate(290px,100px);opacity:0} }
[data-sl-page] .fc1{animation-name:fcC1} [data-sl-page] .fc2{animation-name:fcC2} [data-sl-page] .fc3{animation-name:fcC3}
@keyframes fcNum { 0%,11%{opacity:0} 13%,96%{opacity:1} 100%{opacity:0} }
[data-sl-page] .fc-n, [data-sl-page] .fc-nt { animation-name:fcNum }
/* beat 2: the teacher names the move; the Sequence card answers */
@keyframes fcSay { 0%,34%{opacity:0;transform:translateY(6px)} 38%,64%{opacity:1;transform:none} 67%,100%{opacity:0;transform:translateY(6px)} }
[data-sl-page] .fc-say { animation-name:fcSay }
@keyframes fcC2lift { 0%,9%{transform:translate(-130px,100px);opacity:0} 10%{opacity:1} 16%,38%{transform:translate(150px,100px);opacity:1} 41%,62%{transform:translate(150px,88px);opacity:1} 65%,96%{transform:translate(150px,100px);opacity:1} 100%{transform:translate(150px,100px);opacity:0} }
[data-sl-page] .fc2{animation-name:fcC2lift}
/* beat 3: the work, and the three I can statements */
@keyframes fcMark { 0%,66%{opacity:0} 70%,97%{opacity:1} 100%{opacity:0} }
[data-sl-page] .fc-mark { animation-name:fcMark }
@keyframes fcI1 { 0%,72%{opacity:0;transform:translateX(-6px)} 76%,100%{opacity:1;transform:none} }
@keyframes fcI2 { 0%,78%{opacity:0;transform:translateX(-6px)} 82%,100%{opacity:1;transform:none} }
@keyframes fcI3 { 0%,84%{opacity:0;transform:translateX(-6px)} 88%,100%{opacity:1;transform:none} }
[data-sl-page] .fi1{animation-name:fcI1} [data-sl-page] .fi2{animation-name:fcI2} [data-sl-page] .fi3{animation-name:fcI3}
/* the beat labels and captions */
@keyframes fcB1 { 0%,1%{fill:var(--sl-brand-hover)} 32%,100%{fill:var(--sl-faint-aa)} }
@keyframes fcB2 { 0%,33%{fill:var(--sl-faint-aa)} 34%,65%{fill:var(--sl-brand-hover)} 66%,100%{fill:var(--sl-faint-aa)} }
@keyframes fcB3 { 0%,66%{fill:var(--sl-faint-aa)} 67%,100%{fill:var(--sl-brand-hover)} }
[data-sl-page] .fb1{animation-name:fcB1} [data-sl-page] .fb2{animation-name:fcB2} [data-sl-page] .fb3{animation-name:fcB3}
@keyframes fcCap1 { 0%,2%{opacity:0} 5%,30%{opacity:1} 33%,100%{opacity:0} }
@keyframes fcCap2 { 0%,33%{opacity:0} 37%,63%{opacity:1} 66%,100%{opacity:0} }
@keyframes fcCap3 { 0%,66%{opacity:0} 70%,97%{opacity:1} 100%{opacity:0} }
[data-sl-page] .fcap1{animation-name:fcCap1} [data-sl-page] .fcap2{animation-name:fcCap2} [data-sl-page] .fcap3{animation-name:fcCap3}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .fw-cards *{animation:none !important}
  /* v19: the deck is gone, so the cards land at 10, 150 and 290, not 300, 440 and 580 */
  [data-sl-page] .fc1{transform:translate(10px,100px);opacity:1} [data-sl-page] .fc2{transform:translate(150px,100px);opacity:1} [data-sl-page] .fc3{transform:translate(290px,100px);opacity:1}
  [data-sl-page] .fc-n,[data-sl-page] .fc-nt,[data-sl-page] .fc-mark,[data-sl-page] .fc-ic,[data-sl-page] .fcap3{opacity:1 !important; transform:none !important}
  [data-sl-page] .fc-beats-h b{animation:none !important} [data-sl-page] .fbh3 b{color:var(--sl-brand-hover) !important}
  [data-sl-page] .fc-say,[data-sl-page] .fcap1,[data-sl-page] .fcap2{opacity:0 !important}
}

/* a cutout on its domain wash: the figure is the illustration, the wash is the single colour */
[data-sl-page] .ill-wash { border-radius:12px; padding:18px 18px 0; display:flex; flex-direction:column }
[data-sl-page] .ill-say { background:var(--sl-say-wash) }
[data-sl-page] .ill-wash img { border-radius:0 }
[data-sl-page] .ill-wash figcaption { padding:10px 0 14px }

/* ---- 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) }
[data-sl-page] .act-pic { margin:0 0 16px; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--sl-ground) }
[data-sl-page] .act-pic img { width:100%; height:100%; object-fit:cover; display:block }
[data-sl-page] .act h4 { font-size:19px; line-height:1.25; margin:0 0 8px; letter-spacing:-.01em }
[data-sl-page] .act p:last-child { font-size:15px; line-height:1.58; color:var(--sl-muted); margin:0 }
[data-sl-page] .act .eyebrow { margin-bottom:10px }
[data-sl-page] .act-map .eyebrow { color:var(--sl-map-text) }
[data-sl-page] .act-say .eyebrow { color:var(--sl-say-text) }
[data-sl-page] .act-build .eyebrow { color:var(--sl-build-text) }
@media (max-width:860px){ [data-sl-page] .acts { grid-template-columns:1fr; gap:28px } }

/* ============================================================
   HOMEPAGE additions (14 Sep 2026). Everything above is the CPD page's kit, verbatim.
   Principle (Paul, 14 Sep): a page is a lesson. One idea per screen, the drawing moves to show how the thing works,
   the words stay short. Dual coding throughout: every claim has a picture that does the same work.
   ============================================================ */

/* ---- hero: the planner is the hero object -------------------------------- */
[data-sl-page] .hero{padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,64px)}
[data-sl-page] .hero-grid{grid-template-columns:.96fr 1.04fr}
[data-sl-page] .hero h1{font-size:clamp(36px,4.8vw,62px)}
[data-sl-page] .hero .lede{max-width:50ch}
[data-sl-page] .pl{background:var(--sl-surface); border:1px solid var(--sl-border); border-radius:14px; overflow:hidden; box-shadow:var(--sl-shadow-hover)}
[data-sl-page] .pl-body{padding:18px 20px 20px}
[data-sl-page] .pl-ask{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:0 0 16px}
[data-sl-page] .pl-in{font-family:var(--sl-font-display) !important; font-size:16px; font-weight:500; line-height:1.3; padding:11px 13px; border:1px solid var(--sl-border-strong); border-radius:8px; color:var(--sl-ink); background:var(--sl-surface); min-width:0; width:100%}
[data-sl-page] .pl-in::placeholder{color:var(--sl-faint-aa); font-weight:400}
[data-sl-page] .pl-in:focus{outline:none; border-color:var(--sl-brand); box-shadow:0 0 0 3px var(--sl-build-wash)}
[data-sl-page] .pl-go{padding:11px 16px; font-size:15px; border-radius:8px}
[data-sl-page] .pl-row{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-height:34px; margin:0 0 14px}
[data-sl-page] .pl-row .pl-arw{align-self:center}
[data-sl-page] .pl-card{font-family:var(--sl-font-display) !important; font-weight:600; font-size:13px; line-height:1.2; letter-spacing:0; color:var(--sl-surface); padding:8px 12px; border-radius:7px; background:var(--sl-brand); white-space:nowrap}   /* the skill's name only (Paul, 14 Sep 18:37: the aims made it crowded) */
[data-sl-page] .pl-card[data-f="green"]{background:var(--sl-tf-green)} [data-sl-page] .pl-card[data-f="blue"]{background:var(--sl-tf-blue)}
[data-sl-page] .pl-card[data-f="yellow"]{background:var(--sl-tf-yellow); color:var(--sl-ink)} [data-sl-page] .pl-card[data-f="orange"]{background:var(--sl-tf-orange)} [data-sl-page] .pl-card[data-f="red"]{background:var(--sl-tf-red)}
[data-sl-page] .pl-arw{color:var(--sl-faint-aa); font-size:14px}
[data-sl-page] .pl-moves{display:grid; gap:9px}
[data-sl-page] .pl-mv{display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:11px 13px; border-radius:9px; background:var(--sl-ground)}
[data-sl-page] .pl-mv b{font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding-top:3px}
[data-sl-page] .pl-mv.say{background:var(--sl-say-wash)} [data-sl-page] .pl-mv.say b{color:var(--sl-say-text)}
[data-sl-page] .pl-mv.map{background:var(--sl-map-wash)} [data-sl-page] .pl-mv.map b{color:var(--sl-map-text)}
[data-sl-page] .pl-mv.build{background:var(--sl-build-wash)} [data-sl-page] .pl-mv.build b{color:var(--sl-build-text)}
[data-sl-page] .pl-mv p{margin:0; font-size:14.5px; line-height:1.5; color:var(--sl-ink)}
@media (min-width:481px){ [data-sl-page] .pl-mv p{min-height:3em} }   /* every plan is written to two lines at desk width, and the panel holds two lines whatever it says, so nothing jumps */
[data-sl-page] .pl-foot{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin:16px 0 0; font-size:13.5px; color:var(--sl-faint-aa); line-height:1.5}
[data-sl-page] .pl-foot a{color:var(--sl-brand-hover); font-weight:600; text-decoration:none; font-size:14.5px; white-space:nowrap}
[data-sl-page] .pl-foot a:hover{text-decoration:underline}
[data-sl-page] .pl.thinking .pl-row,[data-sl-page] .pl.thinking .pl-moves{opacity:.35; transition:opacity .2s}
[data-sl-page] .pl-row,[data-sl-page] .pl-moves{transition:opacity .35s}
@media (max-width:900px){ [data-sl-page] .hero-grid{grid-template-columns:1fr} [data-sl-page] .pl-mv{grid-template-columns:64px minmax(0,1fr)} }
@media (max-width:480px){ [data-sl-page] .pl-ask{grid-template-columns:1fr} [data-sl-page] .pl-go{justify-content:center} [data-sl-page] .pl-mv{grid-template-columns:1fr; gap:4px} }

/* ---- the worked example (section 2): three beats on one clock, pinned and scrubbed like the CPD cards ---- */
[data-sl-page] .hx-task{fill:var(--sl-build-wash)}
[data-sl-page] .hx-k{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; fill:var(--sl-build-text)}
[data-sl-page] .hx-t{font-family:var(--sl-font-display) !important; font-size:14.5px; font-weight:600; fill:var(--sl-ink)}
[data-sl-page] .hx-page{fill:var(--sl-surface); stroke:var(--sl-border); stroke-width:1.2}
[data-sl-page] .hx-line{fill:none; stroke:var(--sl-border-strong); stroke-width:3; stroke-linecap:round; stroke-dasharray:100 200; stroke-dashoffset:100}
[data-sl-page] .hx-rule{fill:none; stroke:var(--sl-border); stroke-width:1; opacity:.7}   /* faint rules, so the empty page reads as a page (council, 15 Sep) */
[data-sl-page] .hx-caret{fill:var(--sl-ink)}
[data-sl-page] .hx-v{font-family:var(--sl-font-display) !important; font-size:12.5px; font-weight:600; fill:var(--sl-surface)}
[data-sl-page] .hx-v.dark{fill:var(--sl-ink)}
[data-sl-page] .hx-mk{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
[data-sl-page] .hx-mk.say{fill:var(--sl-say-text)} [data-sl-page] .hx-mk.map{fill:var(--sl-map-text)} [data-sl-page] .hx-mk.build{fill:var(--sl-build-text)}
[data-sl-page] .hx-pos-moves-ph{display:none}                       /* the phone layout of the moves, shown under 600px */
[data-sl-page] .hx-cap.ph{display:none}
[data-sl-page] .hx-bub{fill:var(--sl-surface); stroke:var(--sl-say); stroke-width:1.4}
[data-sl-page] .hx-sp{font-family:var(--sl-font-body) !important; font-size:12.5px; fill:var(--sl-ink)}
[data-sl-page] .hx-box{fill:var(--sl-map-wash); stroke:var(--sl-map); stroke-width:1.2}
[data-sl-page] .hx-bt{font-family:var(--sl-font-body) !important; font-size:11px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .hx-ar{fill:none; stroke:var(--sl-map); stroke-width:1.4; stroke-linecap:round}
[data-sl-page] .hx-blk{fill:var(--sl-wb-face); stroke:var(--sl-wb-edge); stroke-width:1.2}
[data-sl-page] .hx-pan{fill:var(--sl-wb-panel)}
[data-sl-page] .hx-bl{font-family:var(--sl-font-body) !important; font-size:11.5px; font-weight:600; fill:var(--sl-wb-ink)}
[data-sl-page] .hx-card,[data-sl-page] .hx-caret,[data-sl-page] .hx-say,[data-sl-page] .hx-map,[data-sl-page] .hx-build,[data-sl-page] .hx-line,[data-sl-page] .hx-cap,[data-sl-page] .hx-mk{animation-duration:var(--lc2); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
[data-sl-page] .hx-card{transform-box:fill-box; transform-origin:center}
/* beat 1, 0 to 33: the task and an empty page. the caret sits there. */
@keyframes hxCaret{0%,1%{opacity:0} 3%,16%{opacity:1} 19%,100%{opacity:0}}
[data-sl-page] .hx-caret{animation-name:hxCaret}
/* beat 2, 34 to 65: the three cards land on the page, in order */
@keyframes hxC1{0%,20%{opacity:0;transform:translate(-40px,-60px)} 25%,96%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes hxC2{0%,26%{opacity:0;transform:translate(-40px,-60px)} 31%,96%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes hxC3{0%,32%{opacity:0;transform:translate(-40px,-60px)} 37%,96%{opacity:1;transform:none} 100%{opacity:0}}
[data-sl-page] .hxc1{animation-name:hxC1} [data-sl-page] .hxc2{animation-name:hxC2} [data-sl-page] .hxc3{animation-name:hxC3}
/* beat 3, 67 to 97: talk it, map it, build it, then the writing follows */
@keyframes hxSay{0%,44%{opacity:0;transform:translateY(6px)} 48%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes hxMap{0%,52%{opacity:0;transform:translateY(6px)} 56%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes hxBuild{0%,60%{opacity:0;transform:translateY(6px)} 64%,97%{opacity:1;transform:none} 100%{opacity:0}}
[data-sl-page] .hx-say{animation-name:hxSay} [data-sl-page] .hx-map{animation-name:hxMap} [data-sl-page] .hx-build{animation-name:hxBuild}
/* the three labels sit in the empty column from the first frame, as the slots the moves will fill; each lights as its move arrives */
@keyframes hxMkSay{0%,44%{fill:var(--sl-faint-aa)} 48%,97%{fill:var(--sl-say-text)} 100%{fill:var(--sl-faint-aa)}}
@keyframes hxMkMap{0%,52%{fill:var(--sl-faint-aa)} 56%,97%{fill:var(--sl-map-text)} 100%{fill:var(--sl-faint-aa)}}
@keyframes hxMkBuild{0%,60%{fill:var(--sl-faint-aa)} 64%,97%{fill:var(--sl-build-text)} 100%{fill:var(--sl-faint-aa)}}
[data-sl-page] .hx-mk.say{animation-name:hxMkSay} [data-sl-page] .hx-mk.map{animation-name:hxMkMap} [data-sl-page] .hx-mk.build{animation-name:hxMkBuild}
/* opacity is named at every stop: a value given only at 100% interpolates from 0%, and the ease had the lines invisible all cycle */
@keyframes hxL1{0%,70%{stroke-dashoffset:100;opacity:1} 74%,97%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0}}
@keyframes hxL2{0%,74%{stroke-dashoffset:100;opacity:1} 78%,97%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0}}
@keyframes hxL3{0%,78%{stroke-dashoffset:100;opacity:1} 82%,97%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0}}
@keyframes hxL4{0%,82%{stroke-dashoffset:100;opacity:1} 86%,97%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0}}
[data-sl-page] .hxl1{animation-name:hxL1} [data-sl-page] .hxl2{animation-name:hxL2} [data-sl-page] .hxl3{animation-name:hxL3} [data-sl-page] .hxl4{animation-name:hxL4}
[data-sl-page] .hx-cap{font-family:var(--sl-font-display) !important; font-size:15px; font-weight:600; fill:var(--sl-brand-hover)}
@keyframes hxCap1{0%,1%{opacity:0} 4%,16%{opacity:1} 19%,100%{opacity:0}}
@keyframes hxCap2{0%,19%{opacity:0} 22%,40%{opacity:1} 43%,100%{opacity:0}}
@keyframes hxCap3{0%,43%{opacity:0} 46%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .hxcap1{animation-name:hxCap1} [data-sl-page] .hxcap2{animation-name:hxCap2} [data-sl-page] .hxcap3{animation-name:hxCap3}
/* the beat headers above the stage light on the same 12 second clock */
@keyframes hxHB1{0%,1%{color:var(--sl-brand-hover)} 17%,100%{color:var(--sl-faint-aa)}}
@keyframes hxHB2{0%,18%{color:var(--sl-faint-aa)} 19%,41%{color:var(--sl-brand-hover)} 42%,100%{color:var(--sl-faint-aa)}}
@keyframes hxHB3{0%,42%{color:var(--sl-faint-aa)} 43%,99%{color:var(--sl-brand-hover)} 100%{color:var(--sl-faint-aa)}}
[data-sl-page] .fw-cards .fbh1 b{animation-name:hxHB1} [data-sl-page] .fw-cards .fbh2 b{animation-name:hxHB2} [data-sl-page] .fw-cards .fbh3 b{animation-name:hxHB3}
/* Paul, 14 Sep: the pinned, scroll-scrubbed stage read as "stopped loading". On the homepage the loop plays by itself, 12 seconds, and the page scrolls past it. */
[data-sl-page] #idea.lk{--lc2:12s}
html.sl-m [data-sl-page] .fw-cards::after{display:none}
html.sl-m [data-sl-page] .fw-stick{position:static}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .fw-cards .hx-card,[data-sl-page] .fw-cards .hx-say,[data-sl-page] .fw-cards .hx-map,[data-sl-page] .fw-cards .hx-build,[data-sl-page] .fw-cards .hx-line,[data-sl-page] .fw-cards .hx-cap,[data-sl-page] .fw-cards .hx-caret,[data-sl-page] .fw-cards .hx-mk{animation:none !important}
  [data-sl-page] .hx-card,[data-sl-page] .hx-say,[data-sl-page] .hx-map,[data-sl-page] .hx-build{opacity:1 !important; transform:none !important}
  [data-sl-page] .hx-line{stroke-dashoffset:0 !important}
  [data-sl-page] .hx-caret,[data-sl-page] .hxcap1,[data-sl-page] .hxcap2{opacity:0 !important} [data-sl-page] .hxcap3{opacity:1 !important}
}
@media (max-width:600px){
  /* phone: the moves column drops under the task and page; the script swaps the viewBox from data-vb-phone */
  [data-sl-page] .fw-cards .stage.stage-wide svg{min-width:0}
  [data-sl-page] .hx-pos-left{transform:translate(-4.5px,0) scale(1.45)}   /* 300 units wide becomes 430, the column width */
  [data-sl-page] .hx-pos-moves{display:none} [data-sl-page] .hx-pos-moves-ph{display:inline}
  [data-sl-page] .hx-pos-moves-ph .hx-mk{font-size:12px} [data-sl-page] .hx-pos-moves-ph .hx-sp{font-size:14px} [data-sl-page] .hx-pos-moves-ph .hx-bt,[data-sl-page] .hx-pos-moves-ph .hx-bl{font-size:12.5px}
  [data-sl-page] .hx-cap.dk{display:none} [data-sl-page] .hx-cap.ph{display:inline} [data-sl-page] .hx-cap{font-size:16px}
  [data-sl-page] .hx-pos-cap{transform:translate(0,560px)}
}

/* the mock header at phone width (dropped for Webflow, seen in the artefact): brand and button stay on one line each */
@media (max-width:480px){ }
@media (max-width:360px){ }

/* ---- the spine: one approach, four nodes ---------------------------------- */
/* ---- three more drawn learners: under the hero copy, beside the free heading, under the request lede ---- */
[data-sl-page] .hero-draw{width:min(300px,76%); height:auto; margin-top:28px}
[data-sl-page] .free-head{display:grid; grid-template-columns:1fr minmax(220px,300px); gap:clamp(24px,4vw,56px); align-items:end; margin-bottom:clamp(30px,4vw,50px)}
[data-sl-page] .free-head .sec-head{margin-bottom:0}
[data-sl-page] .free-draw{width:100%; height:auto; justify-self:end}
[data-sl-page] .book-draw{width:min(420px,90%); height:auto; margin-top:30px}
@media (max-width:860px){ [data-sl-page] .free-head{grid-template-columns:1fr} [data-sl-page] .free-draw{width:min(300px,80%); justify-self:start} [data-sl-page] .hero-draw{width:min(300px,70%); margin-top:24px} [data-sl-page] .book-draw{width:min(340px,80%)} }
/* ---- the Quebec learner video leads block 4 (council 15 Sep, 5 of 6: the one place a reader sees a learner think) ---- */
[data-sl-page] .approach-video{margin:0 0 clamp(36px,5vw,60px); max-width:960px}
[data-sl-page] .approach-video video{display:block; width:100%; aspect-ratio:16/9; border-radius:12px; background:var(--sl-ink); object-fit:cover}
[data-sl-page] .approach-video figcaption{margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--sl-muted); max-width:78ch}
@media (max-width:600px){ [data-sl-page] .hero-draw{display:none} }   /* 15 Sep: 4 of 6 seats, the drawn pair pushed the planner further below the phone fold; desktop keeps it */
/* the 34 school names flow as text on a phone, not one per line (15 Sep: it was a 3,700 px block). The kit's .schools rule is flex + nowrap. */
@media (max-width:600px){ [data-sl-page] .schools{display:block; text-align:center; line-height:1.8} [data-sl-page] .schools .sch{white-space:nowrap; display:inline-block} [data-sl-page] .schools .sch + .sch::before{content:"\00B7"; margin:0 6px; color:var(--sl-night-muted)}
  /* a name never breaks in the middle ("Stephen / Perse Foundation" read as an error, brand seat 15 Sep); the first 14 show, a line opens the rest */
  [data-sl-page] .schools.capped .sch:nth-child(n+15){display:none}
  [data-sl-page] .schools .sch-more{display:block; margin:10px auto 0; background:none; border:0; padding:6px 0; font:inherit; font-size:13px; color:var(--sl-night-accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer} }
/* ---- the free block's loops, one clock (--oc, on .leads-grid in the kit). Redrawn 15 Sep at Paul's note: the briefing is
        a page being written, then its poster slides out from behind; the articles are pages accumulating. Finished frame first:
        the page outlines are there from frame one, only the writing and the arrivals move. Every loop fades before the reset. ---- */
[data-sl-page] .ldi .ld-pg{fill:var(--sl-surface); stroke:var(--sl-brand); stroke-width:1.4}
[data-sl-page] .ldi .ld-hd{fill:var(--sl-brand); transform-box:fill-box; transform-origin:left center}
[data-sl-page] .ldi .ld-ln{fill:var(--sl-border-strong); transform-box:fill-box; transform-origin:left center}
[data-sl-page] .ldi .ld-po{transform-box:fill-box; transform-origin:center}
[data-sl-page] .ldi .ld-po rect.bg{fill:var(--sl-build-wash); stroke:var(--sl-brand); stroke-width:1.2}
[data-sl-page] .ldi .ld-ar{transform-box:fill-box; transform-origin:bottom center}
[data-sl-page] .ldi .ld-hd,[data-sl-page] .ldi .ld-ln,[data-sl-page] .ldi .ld-po,[data-sl-page] .ldi .ld-ar{animation-duration:var(--oc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
@keyframes ldH1{0%,4%{transform:scaleX(0)} 10%,93%{transform:scaleX(1)} 98%,100%{transform:scaleX(0)}}
@keyframes ldL1{0%,10%{transform:scaleX(0)} 16%,93%{transform:scaleX(1)} 98%,100%{transform:scaleX(0)}}
@keyframes ldL2{0%,16%{transform:scaleX(0)} 22%,93%{transform:scaleX(1)} 98%,100%{transform:scaleX(0)}}
@keyframes ldL3{0%,22%{transform:scaleX(0)} 28%,93%{transform:scaleX(1)} 98%,100%{transform:scaleX(0)}}
@keyframes ldPo{0%,30%{opacity:0;transform:translateX(-18px) rotate(0deg)} 40%,93%{opacity:1;transform:translateX(0) rotate(6deg)} 98%,100%{opacity:0;transform:translateX(-18px) rotate(0deg)}}
[data-sl-page] .ld-h1{animation-name:ldH1} [data-sl-page] .ld-l1{animation-name:ldL1} [data-sl-page] .ld-l2{animation-name:ldL2} [data-sl-page] .ld-l3{animation-name:ldL3} [data-sl-page] .ld-po{animation-name:ldPo}
@keyframes ldA1{0%,2%{opacity:0;transform:translateY(10px)} 10%,93%{opacity:1;transform:none} 98%,100%{opacity:0;transform:translateY(10px)}}
@keyframes ldA2{0%,12%{opacity:0;transform:translateY(10px)} 20%,93%{opacity:1;transform:none} 98%,100%{opacity:0;transform:translateY(10px)}}
@keyframes ldA3{0%,22%{opacity:0;transform:translateY(10px)} 30%,93%{opacity:1;transform:none} 98%,100%{opacity:0;transform:translateY(10px)}}
[data-sl-page] .ld-a1{animation-name:ldA1} [data-sl-page] .ld-a2{animation-name:ldA2} [data-sl-page] .ld-a3{animation-name:ldA3}
/* the card fan (lead 1) keeps the kit's drawing but fades before its reset instead of cutting to nothing */
@keyframes ldF1{0%,2%{transform:translateY(8px);opacity:0} 8%,93%{transform:none;opacity:1} 98%,100%{transform:translateY(-3px);opacity:0}}
@keyframes ldF2{0%,8%{transform:translateY(8px);opacity:0} 14%,93%{transform:none;opacity:1} 98%,100%{transform:translateY(-3px);opacity:0}}
@keyframes ldF3{0%,14%{transform:translateY(8px);opacity:0} 20%,93%{transform:none;opacity:1} 98%,100%{transform:translateY(-3px);opacity:0}}
@keyframes ldF4{0%,20%{transform:translateY(8px);opacity:0} 26%,93%{transform:none;opacity:1} 98%,100%{transform:translateY(-3px);opacity:0}}
@keyframes ldF5{0%,26%{transform:translateY(8px);opacity:0} 32%,93%{transform:none;opacity:1} 98%,100%{transform:translateY(-3px);opacity:0}}
/* ---- the three routes: three drawn learners under the spine heading, one wash each, faceless like the explainer.
        The mode colours are the subject here (G12), so the three labels carry the three text tokens. ---- */
[data-sl-page] .routes{list-style:none; margin:0 0 clamp(36px,5vw,60px); padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); align-items:end}
[data-sl-page] .rt{margin:0}
[data-sl-page] .rt img{width:100%; height:auto; display:block}
[data-sl-page] .rt p{margin:14px 0 0; font-size:15px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .rt p b{font-family:var(--sl-font-display) !important; font-weight:600; font-size:16.5px; color:var(--sl-ink); margin-right:4px}
[data-sl-page] .rt-say p b{color:var(--sl-say-text)} [data-sl-page] .rt-map p b{color:var(--sl-map-text)} [data-sl-page] .rt-build p b{color:var(--sl-build-text)}
@media (max-width:720px){ [data-sl-page] .routes{grid-template-columns:1fr; gap:26px; max-width:440px} [data-sl-page] .rt p{margin-top:10px} }
[data-sl-page] .spine{list-style:none; margin:0; padding:0; position:relative}
[data-sl-page] .spine::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--sl-border-strong); transform:translateX(-.5px)}   /* a neutral hairline, not a coloured rail (rule 1) */
[data-sl-page] .node{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; padding:clamp(28px,3.5vw,48px) 0}
[data-sl-page] .node::before{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; background:var(--sl-surface); border:2px solid var(--sl-ink); transform:translate(-50%,-50%); z-index:1}
[data-sl-page] .node-fig{margin:0; min-width:0}
[data-sl-page] .node.n-map .node-fig{order:2}   /* the middle node swaps sides. By class, not nth-child: the Webflow build splits the spine into one list per node (15 Sep) */
[data-sl-page] .node-body .eyebrow{margin-bottom:10px}
[data-sl-page] .node-body h3{font-size:clamp(22px,2.5vw,30px); line-height:1.16; margin:0 0 12px; letter-spacing:-.02em}
[data-sl-page] .node-body p{font-size:16px; line-height:1.62; color:var(--sl-muted); margin:0 0 12px; max-width:46ch}
[data-sl-page] .node-body .go{font-size:14.5px; font-weight:600; color:var(--sl-brand-hover); text-decoration:none}
[data-sl-page] .node-body .go:hover{text-decoration:underline}
[data-sl-page] .node-draw{display:block; width:100%; height:auto; border-radius:12px}
[data-sl-page] .node-photo img{border-radius:12px; aspect-ratio:4/3; object-fit:cover; width:100%}
[data-sl-page] .node-cap{margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--sl-faint-aa)}
[data-sl-page] .node-video{margin-top:22px}
[data-sl-page] .node-video video{display:block; width:100%; aspect-ratio:16/9; border-radius:12px; background:var(--sl-ink); object-fit:cover}
[data-sl-page] .photo-strip img.ps-top{object-position:50% 22%}   /* portrait frames in landscape slots: keep the faces */
[data-sl-page] .photo-strip img.ps-mid{object-position:50% 58%}
[data-sl-page] .n-map .eyebrow{color:var(--sl-map-text)} [data-sl-page] .n-say .eyebrow{color:var(--sl-say-text)} [data-sl-page] .n-build .eyebrow{color:var(--sl-build-text)}
[data-sl-page] .n-map .go{color:var(--sl-map-text)}   /* the organisers link takes the Map It blue with its eyebrow (Paul, 16 Sep) */
@media (max-width:860px){
  [data-sl-page] .spine::before{left:7px}
  [data-sl-page] .node{grid-template-columns:1fr; gap:18px; padding-left:30px}
  [data-sl-page] .node::before{left:7px; top:24px; transform:translate(-50%,0)}
  [data-sl-page] .node.n-map .node-fig{order:0}
}
/* the spine drawings share one clock. no delays; the stagger is in the percentages (SL loop kit) */
[data-sl-page] .node{--nc:14s}
[data-sl-page] .nd text{font-family:var(--sl-font-body) !important}
[data-sl-page] .nd .nd-lb{font-family:var(--sl-font-mono) !important; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; fill:var(--sl-faint-aa)}
[data-sl-page] .nd .nd-t{font-family:var(--sl-font-display) !important; font-size:12.5px; font-weight:600}
/* node 1, the framework: five rows fan in, then three cards are picked out and land in a lesson row */
[data-sl-page] .nd .fr{animation-duration:var(--nc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1); transform-box:fill-box; transform-origin:left center}
@keyframes ndR1{0%,2%{opacity:0;transform:translateX(-14px)} 7%,100%{opacity:1;transform:none}}
@keyframes ndR2{0%,6%{opacity:0;transform:translateX(-14px)} 11%,100%{opacity:1;transform:none}}
@keyframes ndR3{0%,10%{opacity:0;transform:translateX(-14px)} 15%,100%{opacity:1;transform:none}}
@keyframes ndR4{0%,14%{opacity:0;transform:translateX(-14px)} 19%,100%{opacity:1;transform:none}}
@keyframes ndR5{0%,18%{opacity:0;transform:translateX(-14px)} 23%,100%{opacity:1;transform:none}}
[data-sl-page] .nr1{animation-name:ndR1} [data-sl-page] .nr2{animation-name:ndR2} [data-sl-page] .nr3{animation-name:ndR3} [data-sl-page] .nr4{animation-name:ndR4} [data-sl-page] .nr5{animation-name:ndR5}
[data-sl-page] .nd .pk{animation-duration:var(--nc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.22,.7,.25,1); transform-box:fill-box; transform-origin:center}
@keyframes ndP1{0%,30%{opacity:0;transform:translate(-150px,-70px) scale(.6)} 38%,92%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes ndP2{0%,38%{opacity:0;transform:translate(-260px,-40px) scale(.6)} 46%,92%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes ndP3{0%,46%{opacity:0;transform:translate(-370px,-20px) scale(.6)} 54%,92%{opacity:1;transform:none} 97%,100%{opacity:0}}
@keyframes ndLbl{0%,56%{opacity:0} 62%,92%{opacity:1} 97%,100%{opacity:0}}
[data-sl-page] .np1{animation-name:ndP1} [data-sl-page] .np2{animation-name:ndP2} [data-sl-page] .np3{animation-name:ndP3} [data-sl-page] .nd .nlbl{animation:ndLbl var(--nc) linear infinite}
/* node 2, the organiser: one topic, four shapes, each held for a quarter */
[data-sl-page] .nd .sh{animation-duration:var(--nc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.4,.1,.3,1); opacity:0}
@keyframes ndS1{0%,22%{opacity:1} 25%,97%{opacity:0} 100%{opacity:1}}
@keyframes ndS2{0%,22%{opacity:0} 25%,47%{opacity:1} 50%,100%{opacity:0}}
@keyframes ndS3{0%,47%{opacity:0} 50%,72%{opacity:1} 75%,100%{opacity:0}}
@keyframes ndS4{0%,72%{opacity:0} 75%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .ns1{animation-name:ndS1;opacity:1} [data-sl-page] .ns2{animation-name:ndS2} [data-sl-page] .ns3{animation-name:ndS3} [data-sl-page] .ns4{animation-name:ndS4}
[data-sl-page] .nd .or-n rect{fill:var(--sl-surface); stroke:var(--sl-map); stroke-width:1.3}
[data-sl-page] .nd .or-n text{font-size:11px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .nd .or-n.hd rect{fill:var(--sl-map)} [data-sl-page] .nd .or-n.hd text{fill:var(--sl-surface)}   /* the head node of a spray map or tree is filled; the rule above would whiten it */
[data-sl-page] .nd .or-c{font-family:var(--sl-font-display) !important; font-size:12.5px; font-weight:600; fill:var(--sl-map-text)}
[data-sl-page] .nd .or-e{fill:none; stroke:var(--sl-map); stroke-width:1.3; opacity:.6}
/* node 3, the blocks: three blocks build a sentence, then the writing follows; a second set rebuilds it as grammar.
   The panel never rests empty (council, 15 Sep: a reader landing mid-loop saw a green box): the grammar set lands while the
   sentence set is still fading, and the last set fades to the very end of the cycle. */
[data-sl-page] .nd .bk{animation-duration:var(--nc); animation-iteration-count:infinite; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.8,.35,1); transform-box:fill-box; transform-origin:center; opacity:0}
@keyframes ndB1{0%{opacity:0;transform:translateY(-22px)} 6%,44%{opacity:1;transform:none} 48%,100%{opacity:0}}
@keyframes ndB2{0%,9%{opacity:0;transform:translateY(-22px)} 15%,44%{opacity:1;transform:none} 48%,100%{opacity:0}}
@keyframes ndB3{0%,16%{opacity:0;transform:translateY(-22px)} 22%,44%{opacity:1;transform:none} 48%,100%{opacity:0}}
@keyframes ndW1{0%,24%{stroke-dashoffset:100;opacity:1} 32%,44%{stroke-dashoffset:0;opacity:1} 48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ndW2{0%,30%{stroke-dashoffset:100;opacity:1} 38%,44%{stroke-dashoffset:0;opacity:1} 48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ndG1{0%,46%{opacity:0;transform:translateY(-22px)} 52%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes ndG2{0%,53%{opacity:0;transform:translateY(-22px)} 59%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes ndG3{0%,60%{opacity:0;transform:translateY(-22px)} 66%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes ndG4{0%,67%{opacity:0;transform:translateY(-22px)} 73%,97%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes ndCapA{0%{opacity:0} 4%,44%{opacity:1} 46%,100%{opacity:0}}
@keyframes ndCapB{0%,49%{opacity:0} 52%,97%{opacity:1} 100%{opacity:0}}
[data-sl-page] .nb1{animation-name:ndB1} [data-sl-page] .nb2{animation-name:ndB2} [data-sl-page] .nb3{animation-name:ndB3}
[data-sl-page] .nw1{animation:ndW1 var(--nc) cubic-bezier(.3,.7,.3,1) infinite; stroke-dasharray:100} [data-sl-page] .nw2{animation:ndW2 var(--nc) cubic-bezier(.3,.7,.3,1) infinite; stroke-dasharray:100}
[data-sl-page] .ng1{animation-name:ndG1} [data-sl-page] .ng2{animation-name:ndG2} [data-sl-page] .ng3{animation-name:ndG3} [data-sl-page] .ng4{animation-name:ndG4}
[data-sl-page] .nd .ncA{animation:ndCapA var(--nc) linear infinite; opacity:0} [data-sl-page] .nd .ncB{animation:ndCapB var(--nc) linear infinite; opacity:0}
[data-sl-page] .nd .blk{fill:var(--sl-wb-face); stroke:var(--sl-wb-edge); stroke-width:1.2} [data-sl-page] .nd .pan{fill:var(--sl-wb-panel)} [data-sl-page] .nd .bl{font-size:11.5px; font-weight:600; fill:var(--sl-wb-ink)}
[data-sl-page] .nd .gr{font-size:9px; font-family:var(--sl-font-mono) !important; letter-spacing:.08em; text-transform:uppercase; fill:var(--sl-wb-ink); font-weight:600}
[data-sl-page] .nd .wl{fill:none; stroke:var(--sl-border-strong); stroke-width:3; stroke-linecap:round}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .nd *{animation:none !important}
  [data-sl-page] .nd .fr,[data-sl-page] .nd .pk,[data-sl-page] .nd .nlbl,[data-sl-page] .nd .ns1,[data-sl-page] .nd .ng1,[data-sl-page] .nd .ng2,[data-sl-page] .nd .ng3,[data-sl-page] .nd .ng4,[data-sl-page] .nd .ncB{opacity:1 !important; transform:none !important}
  [data-sl-page] .nd .ns2,[data-sl-page] .nd .ns3,[data-sl-page] .nd .ns4,[data-sl-page] .nd .nb1,[data-sl-page] .nd .nb2,[data-sl-page] .nd .nb3,[data-sl-page] .nd .nw1,[data-sl-page] .nd .nw2,[data-sl-page] .nd .ncA{opacity:0 !important}
}

/* ---- professional learning (section 5) ----------------------------------- */
[data-sl-page] .cpd{background:var(--sl-ground)}
[data-sl-page] .cpd-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center}
[data-sl-page] .cpd-grid .fmt-morph{margin-bottom:16px}
[data-sl-page] .cpd-grid h2{font-size:clamp(29px,3.5vw,44px); line-height:1.12; margin:0 0 16px}
[data-sl-page] .cpd-pts{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
[data-sl-page] .cpd-pts li{position:relative; padding-left:20px; font-size:15.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .cpd-pts li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--sl-brand)}
[data-sl-page] .cpd-pts li b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .cpd-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
[data-sl-page] .todo{display:inline-block; font-family:var(--sl-font-mono) !important; font-size:12px; letter-spacing:.04em; color:var(--sl-faint-aa); border:1px dashed var(--sl-border-strong); border-radius:6px; padding:3px 8px}   /* a fact only Paul can supply. visible on purpose, never shipped */
@media (max-width:860px){ [data-sl-page] .cpd-grid{grid-template-columns:1fr} }

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

/* ---- free, for teachers --------------------------------------------------- */
[data-sl-page] .free .leads-grid{grid-template-columns:repeat(3,1fr)}
[data-sl-page] .free .lead h4{font-size:18px}
[data-sl-page] .free .lead p{margin:0 0 4px}
@media (max-width:900px){ [data-sl-page] .free .leads-grid{grid-template-columns:1fr} }

/* the closing call reuses .book from the CPD kit */

/* ---- the proof strip takes four tiles (the CPD kit has three): one row at desktop, two by two on a tablet, one column on a phone ---- */
[data-sl-page] .proof-strip{grid-template-columns:repeat(4,1fr)}
[data-sl-page] .proof-strip figcaption b{display:block; color:var(--sl-surface); font-weight:600}
@media (max-width:860px){ [data-sl-page] .proof-strip{grid-template-columns:1fr 1fr} [data-sl-page] .proof-strip li:last-child{display:block} }
@media (max-width:600px){ [data-sl-page] .proof-strip{grid-template-columns:1fr} }

/* ---- from the QA pass, 14 Sep ---- */
html.sl-m [data-sl-page] .fw-stick{top:clamp(84px,9vh,100px)}            /* clears a fixed 67px header, so the beat labels stay in view while pinned */
@keyframes ndPanel{0%{opacity:0} 4%,44%{opacity:1} 48%,100%{opacity:0}}
[data-sl-page] .nd .wp{animation:ndPanel var(--nc) linear infinite; opacity:0}   /* the writing panel belongs to the first half of the Build It loop */
@media (prefers-reduced-motion:reduce){ [data-sl-page] .nd .wp{opacity:0 !important} }
[data-sl-page] .wiz [tabindex="-1"]:focus:not(:focus-visible){outline:none}      /* programmatic focus on the dialogue title, no ring */

/* ---- Paul's notes, 14 Sep 16:15 ---- */
[data-sl-page] .cpd .fm{animation-duration:9s}                             /* the four formats in nine seconds, not seventeen */
[data-sl-page] .pl-chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 16px}
[data-sl-page] .pl-chip{font-family:var(--sl-font-body) !important; font-size:12.5px; font-weight:500; line-height:1; padding:8px 11px; border:1px solid var(--sl-border-strong); border-radius:999px; background:var(--sl-surface); color:var(--sl-ink); cursor:pointer; transition:border-color .15s}
[data-sl-page] .pl-chip:hover,[data-sl-page] .pl-chip:focus-visible{border-color:var(--sl-brand)} [data-sl-page] .pl-chip[aria-pressed="true"]{border-color:var(--sl-brand); color:var(--sl-brand-hover)}
@media (max-width:600px){ [data-sl-page] .pl-chip:nth-child(n+5){display:none} }   /* four tasks on a phone, eight on a desk */
[data-sl-page] .ss .ss-frames{position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--sl-ink)}
[data-sl-page] .ss .ssf{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation-duration:var(--ssc,32s); animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both}
[data-sl-page] .ss .ss-caps{position:relative; height:1.6em; margin-top:10px}
[data-sl-page] .ss .ssc{position:absolute; left:0; right:0; top:0; opacity:0; animation-duration:var(--ssc,32s); animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both}
[data-sl-page] .ss img.s3,[data-sl-page] .ss img.s4,[data-sl-page] .ss img.s5,[data-sl-page] .ss img.s7{object-position:50% 30%}     /* the handwriting sits in the upper half of these frames */
@keyframes ssS1{0%,11.0%{opacity:1} 12.5%,98.5%{opacity:0} 100%{opacity:1}}
@keyframes ssS2{0%,11.0%{opacity:0} 12.5%,23.5%{opacity:1} 25.0%,100%{opacity:0}}
@keyframes ssS3{0%,23.5%{opacity:0} 25.0%,36.0%{opacity:1} 37.5%,100%{opacity:0}}
@keyframes ssS4{0%,36.0%{opacity:0} 37.5%,48.5%{opacity:1} 50.0%,100%{opacity:0}}
@keyframes ssS5{0%,48.5%{opacity:0} 50.0%,61.0%{opacity:1} 62.5%,100%{opacity:0}}
@keyframes ssS6{0%,61.0%{opacity:0} 62.5%,73.5%{opacity:1} 75.0%,100%{opacity:0}}
@keyframes ssS7{0%,73.5%{opacity:0} 75.0%,86.0%{opacity:1} 87.5%,100%{opacity:0}}
@keyframes ssS8{0%,86.0%{opacity:0} 87.5%,98.5%{opacity:1} 100.0%,100%{opacity:0}}
[data-sl-page] .ss .s1{animation-name:ssS1} [data-sl-page] .ss .s2{animation-name:ssS2} [data-sl-page] .ss .s3{animation-name:ssS3} [data-sl-page] .ss .s4{animation-name:ssS4} [data-sl-page] .ss .s5{animation-name:ssS5} [data-sl-page] .ss .s6{animation-name:ssS6} [data-sl-page] .ss .s7{animation-name:ssS7} [data-sl-page] .ss .s8{animation-name:ssS8}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .ss .ssf,[data-sl-page] .ss .ssc{animation:none} [data-sl-page] .ss .s1{opacity:1} }

/* Paul, 14 Sep 16:42: "I don't think people know you can interact with it." One handwritten note in the app bar, the CPD page's Caveat,
   an arrow down to the input. It stays after the first click: Paul, 18:37, missed it once it had gone. */
[data-sl-page] .pl .app-bar{position:relative}
[data-sl-page] .pl-hint{position:absolute; right:14px; top:6px; display:flex; align-items:flex-start; gap:4px; color:var(--sl-brand-hover); pointer-events:none}
[data-sl-page] .pl-hint-t{font-size:20px; white-space:nowrap; margin-top:2px}   /* the face comes from .toc-hint-t, the CPD kit's one Caveat rule, so the guard sees one declaration */
[data-sl-page] .pl-hint svg{width:40px; height:30px; flex:none; animation:plNudge 1.3s ease-in-out infinite alternate}
@keyframes plNudge{from{transform:translateY(0)} to{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ [data-sl-page] .pl-hint svg{animation:none} }
@media (max-width:480px){ [data-sl-page] .pl-hint-t{font-size:17px} [data-sl-page] .pl-hint svg{width:30px; height:24px} [data-sl-page] .pl .app-t{visibility:hidden} }   /* 15 Sep: at 390 the title ran into the note; the note is the one Paul asked to keep */

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

/* the photo strip's captions swap faster than the photographs they sit on, so a still never shows two captions at once (council, 15 Sep) */
@keyframes pcA{0%,42%{opacity:1} 45%,95%{opacity:0} 98%,100%{opacity:1}}
@keyframes pcB{0%,45%{opacity:0} 48%,92%{opacity:1} 95%,100%{opacity:0}}
[data-sl-page] .psl .pc1{animation-name:pcA} [data-sl-page] .psl .pc2{animation-name:pcB}
/* the four session lengths as a row a reader can scan, not one chip at a time (council, 15 Sep: three of six seats scanned for their format and found one) */
[data-sl-page] .fmt-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none}
[data-sl-page] .fmt-row li{display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:999px; background:var(--sl-build-wash); color:var(--sl-build-text); font-family:var(--sl-font-mono) !important; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; white-space:nowrap}
@media (max-width:480px){ [data-sl-page] .fmt-row li{font-size:10.5px; height:28px; padding:0 11px} }

/* the hero is hidden by html.sl-m until the arrival script raises it, and on a slow connection that script waits behind the
   Webflow runtime (measured 15 Sep: first paint 2.2 s, script 10.3 s on simulated 4G). This cap shows the hero 2.2 s after
   first paint regardless; the script cancels it on the elements it animates. Revert: delete these two rules. */
html.sl-m [data-sl-page] .hero .arr{animation:slArrSafe 1ms 2200ms both}
@keyframes slArrSafe{to{opacity:1}}
/* one eyebrow: three blocks style their paragraphs by tag (.paul-body p, .evid p, .node-body p) and were catching the eyebrow
   too, so it rendered 16px and grey there (brand seat, 15 Sep). The eyebrow keeps its own size; the nodes keep their domain colour. */
[data-sl-page] .paul-body p.eyebrow, [data-sl-page] .evid p.eyebrow, [data-sl-page] .node-body p.eyebrow{font-size:11.5px; line-height:1.5; margin:0 0 12px}
[data-sl-page] .paul-body p.eyebrow, [data-sl-page] .evid p.eyebrow{color:var(--sl-brand-hover)}

/* ============================================================
   v19 (15 Sep, evening): the learner's thinking beside the video, two big quotes (a school and a trust),
   a sideways quote rail, and Make It Count measured.
   ============================================================ */

/* ---- the video with notes that follow her voice --------------------------- */
[data-sl-page] .approach-video{max-width:960px}
/* v21: the notes sit ON the film, bottom right, one at a time (Paul, 16 Sep: "overlay it over the video... one of those
   panels, one after the other"). Every frame from 3 s on has bare table there; the blocks run across the middle and the
   poem sheet sits bottom left, measured from ten stills. The panel clears the native control bar. On phones the same
   panel sits under the film instead, because at 358 px wide an overlay would cover half the picture. */
[data-sl-page] .vid-stage{position:relative}
[data-sl-page] .vid-cues{list-style:none; margin:0; padding:0; position:absolute; right:14px; bottom:64px; width:min(46%, 380px); pointer-events:none}
[data-sl-page] .vid-cues li{display:none; pointer-events:auto; cursor:pointer; padding:11px 14px 12px; border-radius:10px; background:color-mix(in srgb, var(--sl-ink) 84%, transparent); color:var(--sl-night-ink); font-size:14px; line-height:1.45; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
[data-sl-page] .vid-cues li.is-on{display:block}
@media (prefers-reduced-motion: no-preference){ [data-sl-page] .vid-cues li.is-on{animation:vcIn .35s ease both} }
@keyframes vcIn{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
[data-sl-page] .vid-cues li b{font-weight:600; color:var(--sl-night-accent)}
[data-sl-page] .vc-top{display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-night-muted)}
[data-sl-page] .vc-h{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-sl-page] .vc-t{flex:none}
[data-sl-page] .vc-x{display:block}
[data-sl-page] .vc-sw{display:inline-block; vertical-align:-1px; width:11px; height:11px; border-radius:3px; margin-right:7px; border:1px solid var(--sl-night-line); background:transparent}
[data-sl-page] .vc-sw-none{display:none}
[data-sl-page] .vc-sw-green{background:var(--sl-tf-green); border-color:var(--sl-tf-green)}
[data-sl-page] .vc-sw-yellow{background:var(--sl-tf-yellow); border-color:var(--sl-tf-yellow)}
[data-sl-page] .vc-sw-purple{background:color-mix(in srgb, var(--sl-tf-blue) 45%, var(--sl-tf-red)); border-color:color-mix(in srgb, var(--sl-tf-blue) 45%, var(--sl-tf-red))}
[data-sl-page] .vc-sw-white{background:var(--sl-surface); border-color:var(--sl-surface)}
@media (max-width:720px){
  [data-sl-page] .vid-cues{position:static; width:auto; margin-top:10px}
  [data-sl-page] .vid-cues li{background:var(--sl-surface); color:var(--sl-ink); border:1px solid var(--sl-border); backdrop-filter:none; -webkit-backdrop-filter:none; font-size:13.5px}
  [data-sl-page] .vid-cues li b{color:var(--sl-brand-hover)}
  [data-sl-page] .vc-top{color:var(--sl-faint-aa)}
  [data-sl-page] .vc-sw{border-color:var(--sl-border-strong)}
  [data-sl-page] .vc-sw-white{border-color:var(--sl-border-strong)}
}

/* ---- two big quotes: a primary head and a trust director ------------------- */
/* the site shell styles a bare blockquote at width:70% with a quote-mark background and italics; measured under the shell 15 Sep (364px in a 520px column) */
[data-sl-page] .quote-sec blockquote{width:auto; padding:0; background:none; border:0; font-style:normal}
[data-sl-page] .big-pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:clamp(18px,3vw,30px)}
[data-sl-page] .big-tag{margin:0 0 12px; font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-night-accent); font-weight:600}
[data-sl-page] .big-pair .big-q{margin-top:0; font-size:clamp(22px,2.15vw,31px); line-height:1.24}
@media (max-width:860px){ [data-sl-page] .big-pair{grid-template-columns:1fr; gap:34px} }

/* ---- the quote rail: scrolls sideways, snaps a card at a time ---------------- */
[data-sl-page] .qrail-wrap{margin-top:clamp(36px,4.5vw,54px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--sl-night-line)}
[data-sl-page] .qrail-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
[data-sl-page] .qrail-h{margin:0; font-family:var(--sl-font-mono) !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-night-muted); font-weight:600}
[data-sl-page] .qrail-nav{display:flex; gap:8px}
[data-sl-page] .qbtn{width:38px; height:38px; border-radius:999px; border:1px solid var(--sl-night-line); background:transparent; color:var(--sl-night-ink); font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .2s ease, color .2s ease}
[data-sl-page] .qbtn:hover{border-color:var(--sl-night-accent); color:var(--sl-night-accent)}
[data-sl-page] .qbtn:disabled{opacity:.35; cursor:default}
[data-sl-page] .qbtn:focus-visible{outline:2px solid var(--sl-night-accent); outline-offset:2px}
[data-sl-page] .qrail{list-style:none; margin:0; padding:0 0 6px; display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
[data-sl-page] .qrail::-webkit-scrollbar{display:none}
[data-sl-page] .qrail:focus-visible{outline:2px solid var(--sl-night-accent); outline-offset:6px; border-radius:6px}
[data-sl-page] .qcard{flex:0 0 clamp(280px, 31%, 400px); scroll-snap-align:start; display:flex; flex-direction:column; padding:20px 22px 18px; border:1px solid var(--sl-night-line); border-radius:12px; background:color-mix(in srgb, var(--sl-night-ink) 4%, transparent)}
[data-sl-page] .qc-q{margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--sl-night-ink)}
[data-sl-page] .qc-who{margin:auto 0 0; font-size:13.5px; line-height:1.45; color:var(--sl-night-muted)}
[data-sl-page] .qc-who b{display:block; color:var(--sl-night-ink); font-weight:600; font-family:var(--sl-font-display) !important; font-size:14.5px; margin-bottom:1px}
[data-sl-page] .qc-src{margin:10px 0 0; font-family:var(--sl-font-mono) !important; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sl-night-muted)}
@media (max-width:600px){ [data-sl-page] .qcard{flex-basis:84%} [data-sl-page] .qrail{gap:12px} [data-sl-page] .qrail-h{font-size:10.5px} }

/* ---- Make It Count, measured --------------------------------------------- */
[data-sl-page] .mic{display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; margin-top:clamp(36px,5vw,60px); padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--sl-border)}
[data-sl-page] .mic-fig{margin:0}
[data-sl-page] .mic-fig img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--sl-border)}
[data-sl-page] .mic-fig figcaption{margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--sl-faint-aa)}
[data-sl-page] .mic-body h3{font-family:var(--sl-font-display) !important; font-size:clamp(22px,2.4vw,29px); line-height:1.16; letter-spacing:-.02em; margin:0 0 14px; color:var(--sl-ink)}
[data-sl-page] .mic-body p.eyebrow{font-size:11.5px; line-height:1.5; margin:0 0 12px; color:var(--sl-brand-hover)}
[data-sl-page] .mic-body p{font-size:15px; line-height:1.6; color:var(--sl-muted); max-width:66ch; margin:0 0 12px}
[data-sl-page] .mic-body p b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .mic-bars{list-style:none; margin:4px 0 18px; padding:0; max-width:66ch}
[data-sl-page] .mic-bars li{display:grid; grid-template-columns:minmax(0,1fr) 150px 92px; gap:0 14px; align-items:center; padding:9px 0; border-top:1px solid var(--sl-border); font-size:14px; line-height:1.4; color:var(--sl-ink)}
[data-sl-page] .mic-bars li:last-child{border-bottom:1px solid var(--sl-border)}
[data-sl-page] .mb-bars{display:grid; gap:3px}
[data-sl-page] .mb-pre,[data-sl-page] .mb-post{display:block; height:7px; border-radius:2px; width:calc(var(--v) * 1%)}
[data-sl-page] .mb-pre{background:var(--sl-border-strong)}
[data-sl-page] .mb-post{background:var(--sl-brand)}
[data-sl-page] .mb-n{font-family:var(--sl-font-mono) !important; font-size:12px; letter-spacing:.02em; color:var(--sl-faint-aa); white-space:nowrap; text-align:right}
[data-sl-page] .mb-n b{color:var(--sl-brand-hover); font-weight:600}
[data-sl-page] .mic-body .mic-teach{font-size:14.5px; margin-bottom:0}
@media (max-width:860px){
  [data-sl-page] .mic{grid-template-columns:1fr; gap:22px}
  [data-sl-page] .mic-fig{max-width:300px; order:2}   /* on a phone the words come first and the journal closes the case */
  [data-sl-page] .mic-bars li{grid-template-columns:minmax(0,1fr) 110px 86px; gap:0 10px; font-size:13.5px}
}
@media (max-width:480px){
  [data-sl-page] .mic-bars li{grid-template-columns:1fr; gap:6px 0}
  [data-sl-page] .mb-n{text-align:left}
}


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