[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) */

/* GENERATED from ~/.claude/design/tokens.json v1.2.8. 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-tf-yellow-wash: #FBF0DA;   /* the one yellow tint; yellow fails as text at every size */
  --sl-tf-yellow-text: #5C4A12;   /* 8.59:1 on white; the same hue darkened, never a different hue */
  --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;
}
[data-sl-page]{--sl-gut:clamp(20px,5vw,72px);--sl-maxw:1240px;--sl-faint-aa:var(--sl-muted);color-scheme:light}
[data-sl-page] *{box-sizing:border-box}
[data-sl-page]{
  margin:0; background:var(--sl-surface); color:var(--sl-ink);
  font-family:var(--sl-font-body) !important; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[data-sl-page] img{max-width:100%; display:block; height:auto} /* width and height attributes reserve space before load; the CSS box still decides the height */
[data-sl-page] a{color:inherit}
[data-sl-page] h1,[data-sl-page] h2,[data-sl-page] h3,[data-sl-page] h4{font-family:var(--sl-font-display) !important; font-weight:600; letter-spacing:-.02em; margin:0}
[data-sl-page] p{margin:0 0 1em}
[data-sl-page] p:last-child{margin-bottom:0}

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

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

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

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

@media (max-width:900px){ [data-sl-page] .hero-grid{grid-template-columns:1fr; gap:32px} }

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

/* 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)}
/* Learning Behaviour Framework page. Uses the CPD kit and canonical tokens. */
[data-sl-page]{--sl-lbf-max:1120px}
[data-sl-page]{scroll-behavior:smooth}
[data-sl-page] section[id]{scroll-margin-top:66px}
[data-sl-page] .wrap{max-width:var(--sl-lbf-max)}
[data-sl-page] .accent{color:var(--sl-brand)}
[data-sl-page] .go{font-weight:600; color:var(--sl-brand-hover); text-decoration:underline; text-underline-offset:4px}
[data-sl-page] *:focus-visible{outline:0; box-shadow:inset 0 0 0 2px var(--sl-muted)}

[data-sl-page] .lbf-hero{min-height:min(690px,calc(100svh - 66px)); display:flex; align-items:center; padding-block:clamp(48px,7vw,92px)}
[data-sl-page] .lbf-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,56px)}
[data-sl-page] .lbf-hero h1{max-width:12ch; font-size:clamp(45px,5.2vw,70px); line-height:1.07}
[data-sl-page] .lbf-hero .lede{max-width:45ch}
[data-sl-page] .lbf-hero .hero-note{color:var(--sl-muted)}
[data-sl-page] .lbf-hero-badges{position:relative; width:100%; max-width:560px; justify-self:center; aspect-ratio:10/9; outline:0; border-radius:var(--sl-radius-lg)}
[data-sl-page] .lbf-hero-badges:focus-visible{box-shadow:0 0 0 2px var(--sl-muted)}
[data-sl-page] .lbf-hero-badges .hb{position:absolute; width:31%; will-change:transform; transform-origin:50% 50%}
[data-sl-page] .lbf-hero-badges .hb svg{display:block; width:100%; height:auto}
[data-sl-page] .micro-label,[data-sl-page] .detail-strand,[data-sl-page] .detail-footnote,[data-sl-page] .step-no,[data-sl-page] .where-num,[data-sl-page] .layer-no{font-family:var(--sl-font-mono) !important; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
[data-sl-page] .micro-label,[data-sl-page] .detail-strand,[data-sl-page] .step-no,[data-sl-page] .where-num,[data-sl-page] .layer-no{color:var(--sl-brand-deep)}

[data-sl-page] .lbf-story{background:var(--sl-surface); border-block:1px solid var(--sl-border)}
[data-sl-page] .story-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,6vw,96px); align-items:start}
[data-sl-page] .story-copy h2{font-size:clamp(30px,3.8vw,48px); line-height:1.12; margin-bottom:18px}
[data-sl-page] .story-copy .lede{margin-bottom:18px}
[data-sl-page] .story-copy p:not(.eyebrow):not(.lede){font-size:17px; line-height:1.6; color:var(--sl-muted); max-width:56ch; margin:0}
[data-sl-page] .story-layers{list-style:none; margin:0; padding:0}
[data-sl-page] .story-layers li{display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--sl-border)}
[data-sl-page] .story-layers li:last-child{border-bottom:1px solid var(--sl-border)}
[data-sl-page] .layer-no{margin-top:6px}
[data-sl-page] .story-layers h3{font-size:clamp(21px,2vw,25px); margin:0 0 6px}
[data-sl-page] .story-layers p{font-size:16px; line-height:1.55; color:var(--sl-muted); margin:0}
[data-sl-page] .story-note{font-size:15px; color:var(--sl-muted); margin:clamp(28px,4vw,44px) 0 0; max-width:60ch}

[data-sl-page] .lbf-framework .sec-head{max-width:750px}
[data-sl-page] .behaviour-workspace{display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,56px); align-items:start}
[data-sl-page] .behaviour-list{display:grid; grid-template-columns:1fr; gap:0}
[data-sl-page] .behaviour-group{padding-block:0 18px}
[data-sl-page] .behaviour-group + .behaviour-group{padding-top:18px; border-top:1px solid var(--sl-border)}
[data-sl-page] .behaviour-group-title{font:600 11px/1.3 var(--sl-font-mono); color:var(--sl-brand-hover); text-transform:uppercase; letter-spacing:.12em; margin:0 0 6px}
[data-sl-page] .behaviour-option{width:100%; display:flex; gap:12px; align-items:center; text-align:left; padding:9px 10px 9px 0; border:0; border-radius:var(--sl-radius-sm); background:transparent; color:var(--sl-ink); font:500 16px/1.4 var(--sl-font-body); cursor:pointer}
[data-sl-page] .opt-badge{width:26px; flex:none; display:block}
[data-sl-page] .opt-badge svg,[data-sl-page] .detail-badge svg,[data-sl-page] .badge-tile svg{display:block; width:100%; height:auto}
[data-sl-page] .behaviour-option[aria-current="true"]{font-weight:700; color:var(--sl-brand-hover)}
[data-sl-page] .detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:18px}
[data-sl-page] .detail-badge{width:clamp(96px,11vw,132px); flex:none; margin-top:-6px}
[data-sl-page] .behaviour-option:hover{color:var(--sl-brand-hover)}
[data-sl-page] .behaviour-detail{background:var(--sl-build-wash); border-radius:var(--sl-radius-lg); padding:clamp(26px,4vw,48px); min-height:480px}
[data-sl-page] .detail-strand{margin:0 0 10px}
[data-sl-page] .behaviour-detail h3{font-size:clamp(27px,3vw,40px); line-height:1.16; margin:0 0 14px}
[data-sl-page] .detail-definition{font-size:19px; line-height:1.48; max-width:36ch; margin-bottom:27px}
[data-sl-page] .detail-observe{border-top:1px solid var(--sl-border-strong); padding-top:18px; margin-bottom:24px}
[data-sl-page] .detail-observe .micro-label{margin:0 0 8px}
[data-sl-page] .detail-observe p:last-child{font-size:16px; margin:0}
[data-sl-page] .detail-progress{border-top:1px solid var(--sl-border-strong); padding-top:18px}
[data-sl-page] .detail-progress h4{font-size:17px; margin:0 0 14px}
[data-sl-page] .progress-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px}
[data-sl-page] .progress-steps li{font-size:14px; line-height:1.46}
[data-sl-page] .progress-steps b{display:block; color:var(--sl-brand-deep); font-family:var(--sl-font-display) !important; margin-bottom:3px}
[data-sl-page] .detail-footnote{font-family:var(--sl-font-body) !important; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; color:var(--sl-muted); margin:18px 0 0}

[data-sl-page] .lbf-term{background:var(--sl-surface)}
[data-sl-page] .term-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px)}
[data-sl-page] .term-steps li{display:flex; align-items:flex-start; gap:16px; border-top:1px solid var(--sl-border); padding-top:20px}
[data-sl-page] .term-steps h3{font-size:21px; margin-bottom:8px}
[data-sl-page] .term-steps p{color:var(--sl-muted); font-size:16px; line-height:1.58}

[data-sl-page] .lbf-example{background:var(--sl-build-wash)}
[data-sl-page] .example-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(40px,7vw,110px)}
[data-sl-page] .example-grid h2,[data-sl-page] .training-grid h2,[data-sl-page] .evidence-grid h2{font-size:clamp(30px,3.8vw,48px); line-height:1.12; margin-bottom:18px}
[data-sl-page] .example-aside{font-size:15px; color:var(--sl-brand-deep); max-width:42ch; padding-top:14px}
[data-sl-page] .example-sequence{background:var(--sl-surface); border-radius:var(--sl-radius-lg); padding:clamp(24px,3.2vw,40px)}
[data-sl-page] .example-sequence>div{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:17px 0; border-bottom:1px solid var(--sl-border)}
[data-sl-page] .example-sequence>div:first-child{padding-top:0}
[data-sl-page] .example-sequence span{font:600 12px var(--sl-font-mono); color:var(--sl-brand-hover); text-transform:uppercase}
[data-sl-page] .example-sequence p{margin:0; font-size:16px}
[data-sl-page] .example-note{font-size:12.5px!important; line-height:1.5; color:var(--sl-muted); padding-top:20px}

[data-sl-page] .lbf-badges{background:var(--sl-surface); border-top:1px solid var(--sl-border)}
[data-sl-page] .lbf-badges .sec-head{max-width:760px}
[data-sl-page] .badge-grid{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(8px,1.4vw,18px); margin:8px 0 clamp(36px,5vw,60px)}
[data-sl-page] .badge-print{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr); gap:clamp(24px,4vw,48px); align-items:start}
[data-sl-page] .badge-print figure,[data-sl-page] .school-gallery figure{margin:0}
[data-sl-page] .badge-print img{display:block; width:100%; height:auto; border-radius:var(--sl-radius-md); box-shadow:0 0 0 1px var(--sl-border)}
[data-sl-page] .badge-print figcaption,[data-sl-page] .school-gallery figcaption{font-size:14.5px; line-height:1.5; color:var(--sl-muted); margin-top:10px; max-width:60ch}
[data-sl-page] .badge-print figcaption b,[data-sl-page] .school-gallery figcaption b{color:var(--sl-ink); font-weight:600}
[data-sl-page] .school-gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,36px) clamp(18px,3vw,32px)}
[data-sl-page] .school-gallery img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--sl-radius-lg)}

[data-sl-page] .lbf-where{border-top:1px solid var(--sl-border)}
[data-sl-page] .where-items{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,50px)}
[data-sl-page] .where-item{border-top:1px solid var(--sl-border); padding-top:18px; display:flex; gap:14px}
[data-sl-page] .where-num{margin-top:5px}
[data-sl-page] .where-item h3{font-size:20px; margin-bottom:9px}
[data-sl-page] .where-item p{font-size:15.5px; line-height:1.55; color:var(--sl-muted)}
[data-sl-page] .where-item a{font-size:14px; font-weight:600; color:var(--sl-brand-hover); text-decoration:underline; text-underline-offset:4px}

[data-sl-page] .lbf-evidence{background:var(--sl-build-wash)}
[data-sl-page] .evidence-grid,[data-sl-page] .training-grid{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(40px,7vw,110px)}
[data-sl-page] .evidence-grid>div>p:not(.eyebrow){font-size:18px; line-height:1.56}
[data-sl-page] .evidence-links{list-style:none; margin:22px 0 0; padding:0}
[data-sl-page] .evidence-links li{display:flex; flex-direction:column; gap:3px; padding:12px 0; border-top:1px solid var(--sl-border-strong)}
[data-sl-page] .evidence-links a{font-weight:600; color:var(--sl-brand-hover); text-decoration:underline; text-underline-offset:4px}
[data-sl-page] .evidence-links span{font-size:14px; color:var(--sl-muted)}

[data-sl-page] .lbf-training{border-bottom:1px solid var(--sl-border)}
[data-sl-page] .training-grid .training-note{font-size:15px; color:var(--sl-muted); margin-top:16px}
[data-sl-page] .lbf-training .training-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:center}
[data-sl-page] .training-fig{margin:0}
[data-sl-page] .training-fig img{display:block; width:100%; height:auto; border-radius:12px}
[data-sl-page] .training-fig figcaption{font-size:14.5px; line-height:1.5; color:var(--sl-muted); margin-top:10px}
[data-sl-page] .training-path{margin-top:clamp(40px,6vw,72px)}
/* QA 28 Sep: the pathway eyebrow reads like every other eyebrow on the page (mono, small caps), not the display font */
[data-sl-page] .tp .tp-eyebrow{font-family:var(--sl-font-mono) !important; font-size:11.5px; line-height:1.5; letter-spacing:.14em; font-weight:600; margin:0 0 14px}
/* QA 28 Sep: the Learning Behaviour Framework is not one of the four focuses, so no dot is filled; this line says how it fits */
[data-sl-page] .tp-lbf-note{display:flex; gap:10px; align-items:baseline; margin:28px 0 0; font-size:15px; line-height:1.55; color:var(--sl-ink); max-width:64ch}
[data-sl-page] .tp-lbf-note .dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--sl-brand); transform:translateY(-1px)}
[data-sl-page] .book .contact-line{margin:18px 0 0; color:var(--sl-brand-hover); font-weight:600; overflow-wrap:anywhere}
[data-sl-page] .book-grid{grid-template-columns:1.1fr .9fr}
[data-sl-page] .rise{opacity:1; transform:none; transition:opacity .7s,transform .7s}
[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}
html.sl-m [data-sl-page] .rise{transition:none}
html.sl-m [data-sl-page] .hero .arr{opacity:0}
html.sl-m [data-sl-page] .hero .arr.arrived{opacity:1}
[data-sl-page] .hero h1 .hw{display:inline-block}
[data-sl-page] section{overflow-x:clip}

@media(max-width:900px){
  [data-sl-page] .badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}   /* QA 28 Sep: eight across at 768 left the names about 6px */
  [data-sl-page] .lbf-hero{min-height:0}
  [data-sl-page] .lbf-hero .hero-grid,[data-sl-page] .story-grid,[data-sl-page] .behaviour-workspace,[data-sl-page] .example-grid,[data-sl-page] .evidence-grid,[data-sl-page] .training-grid,[data-sl-page] .lbf-training .training-grid{grid-template-columns:1fr}
  [data-sl-page] .lbf-hero h1{max-width:14ch}
  [data-sl-page] .lbf-hero-badges{max-width:520px}
  [data-sl-page] .term-steps,[data-sl-page] .where-items{grid-template-columns:1fr}
  [data-sl-page] .book-grid{grid-template-columns:1fr}
  [data-sl-page] .behaviour-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px}
  [data-sl-page] .behaviour-group:nth-child(2){border-top:0; padding-top:0}
}
@media(max-width:600px){
  [data-sl-page] .lbf-hero h1{font-size:clamp(38px,11vw,52px)}
  [data-sl-page] .behaviour-list{grid-template-columns:1fr}
  [data-sl-page] .behaviour-group:nth-child(2){border-top:1px solid var(--sl-border); padding-top:18px}
  [data-sl-page] .progress-steps{grid-template-columns:1fr}
  [data-sl-page] .example-sequence>div{grid-template-columns:1fr; gap:3px}
  [data-sl-page] .school-gallery,[data-sl-page] .badge-print{grid-template-columns:1fr}
  [data-sl-page] .badge-grid{display:flex; flex-wrap:wrap; justify-content:center}   /* three, three, two: names about 9px, as at desk width */
  [data-sl-page] .badge-grid .badge-tile{flex:0 0 calc((100% - 2 * clamp(8px,1.4vw,18px)) / 3)}
  [data-sl-page] .detail-badge{width:84px}
}
@media(prefers-reduced-motion:reduce){
  [data-sl-page]{scroll-behavior:auto}
  [data-sl-page] .rise{opacity:1; transform:none; transition:none}
}

/* ---- rings explainer + six lessons (website-wow, 29 Sep 2026; v4 wording, Paul ruled d3 "after the hero") ---- */
[data-sl-page] .lbf-rings{padding-block:clamp(48px,7vw,88px)}
[data-sl-page] .lbf-rings.rx{margin-top:0;padding-top:0}
[data-sl-page] .lbf-rings .wrap{max-width:var(--sl-lbf-max)}
/* ONE clock. Defined on the outermost element (the clock-scope trap). Every animated element uses var(--clock). */
[data-sl-page] .rg{--clock:21s}
[data-sl-page] .rg .rg-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 12px}
[data-sl-page] .rg h2{font-family:var(--sl-font-display) !important;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px;max-width:28ch}
[data-sl-page] .rg .rg-hl{color:var(--sl-brand-hover)}
[data-sl-page] .rg .rg-lede{font-size:clamp(16px,1.5vw,18px);color:var(--sl-muted);max-width:56ch;margin:0 0 clamp(20px,3vw,32px)}

/* beat labels: plain HTML, lit on the same clock */
[data-sl-page] .rg-beats{list-style:none;margin:0 0 clamp(16px,2.4vw,28px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,26px)}
[data-sl-page] .rg-beats li{font-size:14.5px;line-height:1.45;color:var(--sl-muted)}
[data-sl-page] .rg-beats b{display:block;font-family:var(--sl-font-mono) !important;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:3px;color:var(--sl-muted);
  animation:var(--clock) linear infinite both}
[data-sl-page] .rg-beats .rg-b1 b{animation-name:rg-hb1}[data-sl-page] .rg-beats .rg-b2 b{animation-name:rg-hb2}[data-sl-page] .rg-beats .rg-b3 b{animation-name:rg-hb3}
@keyframes rg-hb1{0%,31%{color:var(--sl-brand-hover)}33%,96%{color:var(--sl-muted)}100%{color:var(--sl-brand-hover)}}
@keyframes rg-hb2{0%,33%{color:var(--sl-muted)}35%,63%{color:var(--sl-brand-hover)}65%,100%{color:var(--sl-muted)}}
@keyframes rg-hb3{0%,66%{color:var(--sl-muted)}68%,95%{color:var(--sl-brand-hover)}98%,100%{color:var(--sl-muted)}}

[data-sl-page] .rg-grid{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:clamp(24px,5vw,72px);align-items:center}

/* the stage: three concentric washes of ONE tint. Fill steps, no outlines, no rails. */
[data-sl-page] .rg-stage{position:relative;width:100%;max-width:460px;aspect-ratio:1;container-type:inline-size;margin:0 auto}
[data-sl-page] .rg-ring,[data-sl-page] .rg-core{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;aspect-ratio:1}
[data-sl-page] .rg-r3{width:100%;background:color-mix(in srgb,var(--sl-brand) 9%,transparent);animation:var(--clock) ease-out infinite both;animation-name:rg-rg3}
[data-sl-page] .rg-r2{width:76%;background:color-mix(in srgb,var(--sl-brand) 22%,transparent);animation:var(--clock) ease-out infinite both;animation-name:rg-rg2}
[data-sl-page] .rg-core{width:44%;background:var(--sl-brand-deep);display:grid;place-items:center;text-align:center;color:var(--sl-surface);
  font-family:var(--sl-font-display) !important;font-weight:600;font-size:5.2cqw;line-height:1.15;letter-spacing:-.005em}
@keyframes rg-rg2{0%,33%{opacity:0;scale:.55}39%{opacity:1;scale:1}96%{opacity:1;scale:1}100%{opacity:0;scale:1}}
@keyframes rg-rg3{0%,66%{opacity:0;scale:.7}72%{opacity:1;scale:1}96%{opacity:1;scale:1}100%{opacity:0;scale:1}}

/* marks on the rings: numerals in the middle ring, eight behaviours on the outer ring */

/* captions: stacked in one cell so the box is as tall as the tallest, cross-faded on the clock */
[data-sl-page] .rg-caps{display:grid}
[data-sl-page] .rg-cap{grid-area:1/1;animation:var(--clock) ease-in-out infinite both}
[data-sl-page] .rg-cap1{animation-name:rg-c1}[data-sl-page] .rg-cap2{animation-name:rg-c2}[data-sl-page] .rg-cap3{animation-name:rg-c3}
@keyframes rg-c1{0%,30%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
@keyframes rg-c2{0%,33%{opacity:0}36%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes rg-c3{0%,66%{opacity:0}69%,94%{opacity:1}98%,100%{opacity:0}}
[data-sl-page] .rg-cap h3{font-family:var(--sl-font-display) !important;font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 10px}
[data-sl-page] .rg-cap p{font-size:clamp(16px,1.4vw,17.5px);color:var(--sl-muted);margin:0 0 10px;max-width:46ch}
[data-sl-page] .rg-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
[data-sl-page] .rg-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:baseline;font-size:16.5px;line-height:1.4;color:var(--sl-ink)}
[data-sl-page] .rg-steps li>span{font-family:var(--sl-font-mono) !important;font-weight:600;font-size:13px;color:var(--sl-brand-hover)}
[data-sl-page] .rg-steps em{display:block;font-style:normal;color:var(--sl-muted);font-size:15px}
[data-sl-page] .rg-chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 12px;padding:0;list-style:none}
[data-sl-page] .rg-chips li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16.5px;color:var(--sl-ink)}
[data-sl-page] .rg-chips li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sl-brand-hover);flex:none}

/* phone: its own layout, not a scaled desktop one */
@media (max-width:700px){
  [data-sl-page] .rg-grid{grid-template-columns:1fr;gap:20px}
  [data-sl-page] .rg-beats{gap:8px}
  [data-sl-page] .rg-beats li{font-size:0}
  [data-sl-page] .rg-beats b{font-size:11px;letter-spacing:.06em;margin:0}
  [data-sl-page] .rg-beats .rg-full{display:none}
  [data-sl-page] .rg-stage{max-width:380px}
  [data-sl-page] .rg-core{font-size:5.6cqw}
  [data-sl-page] .rg-steps li{font-size:16px}
}

/* reduced motion: the finished drawing, and all three captions stacked as plain text */
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .rg *{animation:none !important}
  [data-sl-page] .rg-ring{opacity:1;scale:1}
  [data-sl-page] .rg-caps{gap:22px}
  [data-sl-page] .rg-cap{grid-area:auto;opacity:1}
  [data-sl-page] .rg-beats{display:none}
}
@media print{
  [data-sl-page] .rg *{animation:none !important}
  [data-sl-page] .rg-ring{opacity:1;scale:1}
  [data-sl-page] .rg-caps{gap:16px}[data-sl-page] .rg-cap{grid-area:auto;opacity:1}[data-sl-page] .rg-beats{display:none}
  [data-sl-page] .rg-core{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

[data-sl-page] .rg-rt,[data-sl-page] .rx-rt{position:absolute;left:50%;translate:-50% 0;text-align:center;font-weight:700;font-size:2.9cqw;line-height:1.2;color:var(--sl-ink);white-space:nowrap}
[data-sl-page] .rg-rt2{top:18.5%}[data-sl-page] .rg-rt3{top:5%;color:var(--sl-brand-deep)}
[data-sl-page] .rg-tag,[data-sl-page] .rx-tag{position:absolute;left:50%;translate:-50% 0;font-family:var(--sl-font-mono) !important;font-size:2.5cqw;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--sl-brand-deep)}
[data-sl-page] .rg-tag.t2{top:73%}[data-sl-page] .rg-tag.t3{top:91%}
[data-sl-page] .rg-tx2{animation:var(--clock) linear infinite both;animation-name:rg-tx2}
[data-sl-page] .rg-tx3{animation:var(--clock) linear infinite both;animation-name:rg-tx3}
@keyframes rg-tx2{0%,38%{opacity:0}43%,96%{opacity:1}100%{opacity:0}}
@keyframes rg-tx3{0%,72%{opacity:0}77%,96%{opacity:1}100%{opacity:0}}
@media (max-width:700px){[data-sl-page] .rg-rt,[data-sl-page] .rx-rt{font-size:3.3cqw}[data-sl-page] .rg-tag,[data-sl-page] .rx-tag{display:none}}


[data-sl-page] .rx{--clock:60s;margin-top:clamp(56px,8vw,104px)}
[data-sl-page] .rx .rx-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 12px}
[data-sl-page] .rx h2{font-family:var(--sl-font-display) !important;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px;max-width:28ch}
[data-sl-page] .rx .rx-hl{color:var(--sl-brand-hover)}
[data-sl-page] .rx .rx-lede{font-size:clamp(16px,1.5vw,18px);color:var(--sl-muted);max-width:56ch;margin:0 0 clamp(18px,2.6vw,28px)}
[data-sl-page] .rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,3vw,34px);padding:0;list-style:none}
[data-sl-page] .rx-chip{font:600 14.5px/1 var(--sl-font-body);padding:11px 16px;border-radius:var(--sl-radius-pill);border:1px solid var(--sl-border-strong);background:var(--sl-surface);color:var(--sl-muted);cursor:pointer;
  animation:var(--clock) linear infinite both}
[data-sl-page] .rx-chip:focus-visible{outline:2px solid var(--sl-ink);outline-offset:2px}
[data-sl-page] .rx-grid{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:clamp(24px,5vw,72px);align-items:center}
[data-sl-page] .rx-stage{position:relative;width:100%;max-width:460px;aspect-ratio:1;container-type:inline-size;margin:0 auto}
[data-sl-page] .rx-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;aspect-ratio:1}
[data-sl-page] .rx-o3{width:100%;background:color-mix(in srgb,var(--sl-brand) 9%,transparent)}
[data-sl-page] .rx-o2{width:76%;background:color-mix(in srgb,var(--sl-brand) 22%,transparent)}
[data-sl-page] .rx-o1{width:44%;background:var(--sl-brand-deep)}
[data-sl-page] .rx-sk,[data-sl-page] .rx-bh{animation:var(--clock) linear infinite both}
[data-sl-page] .rx-ct{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40%;text-align:center;color:var(--sl-surface);font-family:var(--sl-font-display) !important;font-weight:600;font-size:5.2cqw;line-height:1.15;animation:var(--clock) linear infinite both}
[data-sl-page] .rx-list{display:grid}
[data-sl-page] .rx-ex{grid-area:1/1;animation:var(--clock) linear infinite both}
[data-sl-page] .rx-h{font-family:var(--sl-font-mono) !important;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--sl-brand-hover);margin:0 0 10px}
[data-sl-page] .rx-h span{color:var(--sl-muted);font-weight:500}
[data-sl-page] .rx-k{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-muted);margin:0 0 2px}
[data-sl-page] .rx-v{margin:0 0 16px}
[data-sl-page] .rx-v1{font-family:var(--sl-font-display) !important;font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--sl-ink)}
[data-sl-page] .rx-v2,[data-sl-page] .rx-v3{font-size:clamp(16px,1.4vw,18px);line-height:1.5;color:var(--sl-ink);max-width:46ch}
[data-sl-page] .rx-note{font-size:13.5px;color:var(--sl-muted);margin:18px 0 0;max-width:70ch}
@media (max-width:700px){
  [data-sl-page] .rx-grid{grid-template-columns:1fr;gap:22px}
  [data-sl-page] .rx-stage{max-width:none}
  [data-sl-page] .rx-ct{font-size:6cqw}
  [data-sl-page] .rx-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  [data-sl-page] .rx-chip{width:100%;padding:12px 6px;text-align:center;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  [data-sl-page] .rx *{animation:none !important}
  [data-sl-page] .rx-chips,[data-sl-page] .rx-stage,[data-sl-page] .rx-mv{display:none}
  [data-sl-page] .rx-grid{grid-template-columns:1fr}
  [data-sl-page] .rx-list{gap:0}
  [data-sl-page] .rx-ex{grid-area:auto;opacity:1;padding:22px 0;border-bottom:1px solid var(--sl-border)}
  [data-sl-page] .rx-ex:first-child{padding-top:0}
  [data-sl-page] .rx-ex:last-child{border-bottom:0}
}
@media print{
  [data-sl-page] .rx *{animation:none !important}
  [data-sl-page] .rx-chips,[data-sl-page] .rx-stage{display:none}[data-sl-page] .rx-grid{grid-template-columns:1fr}
  [data-sl-page] .rx-ex{grid-area:auto;opacity:1;padding:14px 0;border-bottom:1px solid var(--sl-border);break-inside:avoid}
}
@keyframes rx-e0{0%,15.67%{opacity:1}16.67%,99%{opacity:0}100%{opacity:1}}
@keyframes rx-k0{0%,15.67%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}16.67%,99%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}100%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}}
@keyframes rx-e1{0%,16.67%{opacity:0}17.67%,32.33%{opacity:1}33.33%,100%{opacity:0}}
@keyframes rx-k1{0%,16.67%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}17.67%,32.33%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}33.33%,100%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}}
@keyframes rx-e2{0%,33.33%{opacity:0}34.33%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes rx-k2{0%,33.33%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}34.33%,49%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}50%,100%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}}
@keyframes rx-e3{0%,50%{opacity:0}51%,65.67%{opacity:1}66.67%,100%{opacity:0}}
@keyframes rx-k3{0%,50%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}51%,65.67%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}66.67%,100%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}}
@keyframes rx-e4{0%,66.67%{opacity:0}67.67%,82.33%{opacity:1}83.33%,100%{opacity:0}}
@keyframes rx-k4{0%,66.67%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}67.67%,82.33%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}83.33%,100%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}}
@keyframes rx-e5{0%,83.33%{opacity:0}84.33%,99%{opacity:1}100%,100%{opacity:0}}
@keyframes rx-k5{0%,83.33%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}84.33%,99%{color:var(--sl-brand-hover);border-color:var(--sl-brand);background-color:var(--sl-build-wash)}100%,100%{color:var(--sl-muted);border-color:var(--sl-border-strong);background-color:var(--sl-surface)}}
[data-sl-page] .rx-ex0,[data-sl-page] .rx-ct0,[data-sl-page] .rx-sk0,[data-sl-page] .rx-bh0{animation-name:rx-e0}[data-sl-page] .rx-chip0{animation-name:rx-k0}
[data-sl-page] .rx-ex1,[data-sl-page] .rx-ct1,[data-sl-page] .rx-sk1,[data-sl-page] .rx-bh1{animation-name:rx-e1}[data-sl-page] .rx-chip1{animation-name:rx-k1}
[data-sl-page] .rx-ex2,[data-sl-page] .rx-ct2,[data-sl-page] .rx-sk2,[data-sl-page] .rx-bh2{animation-name:rx-e2}[data-sl-page] .rx-chip2{animation-name:rx-k2}
[data-sl-page] .rx-ex3,[data-sl-page] .rx-ct3,[data-sl-page] .rx-sk3,[data-sl-page] .rx-bh3{animation-name:rx-e3}[data-sl-page] .rx-chip3{animation-name:rx-k3}
[data-sl-page] .rx-ex4,[data-sl-page] .rx-ct4,[data-sl-page] .rx-sk4,[data-sl-page] .rx-bh4{animation-name:rx-e4}[data-sl-page] .rx-chip4{animation-name:rx-k4}
[data-sl-page] .rx-ex5,[data-sl-page] .rx-ct5,[data-sl-page] .rx-sk5,[data-sl-page] .rx-bh5{animation-name:rx-e5}[data-sl-page] .rx-chip5{animation-name:rx-k5}

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

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

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

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

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

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

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

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

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

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


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

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