/* InfyAI Academy: editorial layer for the flagship pages (Home, Roles and skills, How we teach).
   Board Infinity tokens underneath; Inter 800 for claims, one Instrument Serif italic accent per headline. */

:root{
  --blue:#0075eb; --blue-txt:#006bd6; --blue-deep:#004ca3; --blue-0:#f5faff; --blue-1:#e6f3ff; --blue-2:#bddeff; --blue-3:#8ac4ff; --blue-4:#57abff;
  --navy:#00173d; --navy-2:#002b6b; --navy-3:#0a2350; --on-navy:#b7ceea; --on-navy-2:#8faacd; --on-navy-a:#6fb0ff;
  --a1:#f46c40; --a1-txt:#a8351b; --a1-1:#fff6f0; --a1-3:#ffd4bd;
  --a2:#7f56d9; --a2-1:#f4ebff; --a2-3:#d6bbfb; --a2-4:#b692f6; --a2-8:#53389e;
  --ok:#06c170; --ok-txt:#036a3e; --ok-1:#e6f9f1; --ok-2:#b2ecd3;
  --gold:#ffdd80; --gold-2:#ffeba8;
  --ink:#141414; --text:#262626; --text-2:#595959; --line:#d9d9d9; --line-2:#ececec; --paper:#ffffff; --paper-2:#fafafa;
  --maxw:1200px;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--sans); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; display:block}
a{color:var(--blue-txt); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue-4); outline-offset:3px; border-radius:4px}
h1,h2,h3,h4{margin:0; color:var(--navy); letter-spacing:-0.028em; font-weight:800}
h1{font-size:clamp(34px,4.4vw,60px); line-height:1.04; letter-spacing:-0.035em}
h2{font-size:clamp(27px,2.9vw,40px); line-height:1.1; letter-spacing:-0.03em}
h3{font-size:clamp(18px,1.5vw,21px); line-height:1.25}
h4{font-size:16px; line-height:1.3; letter-spacing:-0.012em}
p{margin:0 0 1em; text-wrap:pretty}
h1,h2,h3,.pullline{text-wrap:balance}
.em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.005em; font-size:1.06em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
@media (max-width:560px){ .wrap{padding:0 16px} }

/* bands: each section reads as a chapter */
.band{padding:80px 0}
@media (max-width:760px){ .band{padding:52px 0} }
.band-paper2{background:var(--paper-2)}
.band-tint{background:var(--blue-0)}
.band-violet{background:var(--a2-1)}
.band-navy{background:var(--navy); color:var(--on-navy)}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{color:#fff}
.band-navy a:not(.btn){color:var(--on-navy-a)}
.band-navy .em{color:var(--a2-4)}
.band-ink{background:#0b0f1a; color:#c9d3e3}
.band-ink h2,.band-ink h3,.band-ink h4{color:#fff}

/* chapter label: number + label, the editorial signature */
.chapter{display:flex; align-items:center; gap:12px; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-txt); margin-bottom:14px}
.chapter b{font-variant-numeric:tabular-nums; color:var(--navy); font-weight:800}
.chapter::after{content:""; flex:0 0 48px; height:1.5px; background:currentColor; opacity:.5}
.band-navy .chapter{color:var(--on-navy-a)} .band-navy .chapter b{color:#fff}
.band-violet .chapter{color:var(--a2-8)}
.lede{font-size:clamp(15.5px,1.2vw,17px); line-height:1.6; color:var(--text-2); max-width:640px; margin-top:16px}
.band-navy .lede{color:var(--on-navy)}
.head{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:end; margin-bottom:36px}
.head .lede{margin-top:0}
@media (max-width:900px){ .head{grid-template-columns:1fr; gap:12px; margin-bottom:28px} }
.small{font-size:14px; line-height:1.6; color:var(--text-2)}
.band-navy .small{color:var(--on-navy-2)}
.src{font-size:12.5px; line-height:1.5; color:var(--text-2)}
.src a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.band-navy .src{color:var(--on-navy-2)}
.ph{background:var(--gold-2); color:#6b4a00; padding:0 4px; border-radius:3px; font-weight:600}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:12px 20px; border-radius:999px; font-size:14.5px; font-weight:700; line-height:1; text-decoration:none; border:1.5px solid transparent; transition:transform .15s ease, background .15s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn .arr{transition:transform .15s ease} .btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--blue); color:#fff} .btn-primary:hover{background:var(--blue-txt)}
.btn-white{background:#fff; color:var(--navy)}
.btn-ghost{border-color:var(--line); color:var(--navy); background:transparent}
.band-navy .btn-ghost{border-color:rgba(255,255,255,.3); color:#fff}
.btn-violet{background:var(--a2); color:#fff}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px}
.link-arrow{font-weight:700; display:inline-flex; gap:8px; align-items:center}

/* the learning grid motif: rounded squares spreading from a corner */
.grid-motif{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.grid-motif::before{content:""; position:absolute; right:-40px; top:-40px; width:min(760px,90vw); height:620px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='32' height='32' rx='9' fill='none' stroke='%23ffffff' stroke-opacity='.10'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%)}
.grid-motif.light::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='32' height='32' rx='9' fill='none' stroke='%230075eb' stroke-opacity='.13'/%3E%3C/svg%3E")}
.grid-motif .tile{position:absolute; width:32px; height:32px; border-radius:9px}

/* hero */
.hero{position:relative; padding:84px 0 0; overflow:hidden}
@media (max-width:760px){ .hero{padding-top:48px} }
.hero .wrap{position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:12.5px; font-weight:600; color:var(--on-navy); margin-bottom:24px}
.eyebrow i{font-style:normal; background:var(--a2); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px}
.hero h1{max-width:980px}
.hero .lede{font-size:clamp(16px,1.35vw,18.5px); max-width:620px; margin-top:20px}
.hero-strip{display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; border-top:1px solid rgba(255,255,255,.12)}
.hero-strip > div{padding:22px 24px 30px 0}
.hero-strip > div + div{border-left:1px solid rgba(255,255,255,.12); padding-left:24px}
.hero-strip b{display:block; color:#fff; font-size:16px; font-weight:800; letter-spacing:-.015em; margin-bottom:6px}
.hero-strip > div > span{font-size:14px; color:var(--on-navy-2); line-height:1.55; display:block}
@media (max-width:760px){ .hero-strip{grid-template-columns:1fr; margin-top:40px} .hero-strip > div + div{border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.12)} .hero-strip > div{padding:14px 0} .hero-strip > div > span{display:none} }

/* big numbers */
.figures{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1.5px solid var(--navy)}
.figure{padding:24px 28px 4px 0}
.figure + .figure{padding-left:28px; border-left:1px solid var(--line-2)}
.figure .n{display:block; font-size:clamp(44px,4.6vw,64px); font-weight:800; letter-spacing:-0.05em; line-height:.9; color:var(--navy); font-variant-numeric:tabular-nums}
.figure .n small{font-size:.45em; letter-spacing:-.02em; margin-left:4px}
.figure p{margin:12px 0 8px; font-size:14.5px; color:var(--text)}
@media (max-width:860px){ .figures{grid-template-columns:1fr} .figure + .figure{padding-left:0; border-left:0; border-top:1px solid var(--line-2)} .figure{padding:18px 0 6px} }
.pullline{margin-top:40px; font-size:clamp(18px,1.8vw,24px); line-height:1.3; font-weight:800; color:var(--navy); letter-spacing:-0.025em; max-width:960px}

/* split rung visual */
.rung{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px}
.rung > div{border-radius:16px; padding:22px 24px}
.rung .down{background:var(--a1-1); border:1px solid var(--a1-3)}
.rung .up{background:var(--ok-1); border:1px solid var(--ok-2)}
.rung h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.rung .down h4{color:var(--a1-txt)} .rung .up h4{color:var(--ok-txt)}
.rung ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
.rung li{padding:8px 0; font-size:14.5px; border-top:1px solid rgba(0,0,0,.07); font-weight:600; color:var(--navy); display:flex; gap:12px; align-items:baseline}
.rung li::before{font-weight:800; width:16px; flex:0 0 16px}
.rung .down li::before{content:"↓"; color:var(--a1)} .rung .up li::before{content:"↑"; color:var(--ok)}
@media (max-width:760px){ .rung{grid-template-columns:1fr} .rung > div{padding:24px} }

/* voices */
.voices{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:1080px){ .voices{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .voices{grid-template-columns:1fr} }
.voice{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-2); border-radius:20px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.voice:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,23,61,.10)}
.voice figure{margin:0; position:relative; aspect-ratio:4/3; background:var(--navy-2); overflow:hidden}
.voice figure img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:grayscale(1) contrast(1.05); transition:filter .3s ease}
.voice:hover figure img{filter:grayscale(.2)}
.voice figure::after{content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(to top, rgba(0,23,61,.75), transparent)}
.voice figcaption{position:absolute; z-index:1; right:10px; bottom:8px; font-size:10px; color:rgba(255,255,255,.75); line-height:1.3; text-align:right}
.voice figcaption a{color:inherit; text-decoration:underline}
.voice .mono{aspect-ratio:4/3; display:grid; place-items:center; background:var(--navy); position:relative; overflow:hidden}
.voice .mono span{font-family:var(--serif); font-style:italic; font-size:64px; color:#fff; line-height:1; letter-spacing:-.02em}
.voice .mono::before{content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='32' height='32' rx='9' fill='none' stroke='%23ffffff' stroke-opacity='.08'/%3E%3C/svg%3E")}
.voice .body{padding:18px 18px 16px; display:flex; flex-direction:column; flex:1}
.voice .who{font-weight:800; color:var(--navy); font-size:16px; letter-spacing:-.015em}
.voice .role{font-size:12.5px; color:var(--text-2); margin-top:1px}
.voice blockquote{margin:12px 0 12px; font-size:14.5px; line-height:1.5; color:var(--text)}
.voice .meta{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; margin-top:auto; border-top:1px solid var(--line-2)}
.voice .tag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--a2-8); background:var(--a2-1); padding:5px 9px; border-radius:999px}
.voice .meta a{font-size:12.5px; font-weight:700; white-space:nowrap}
.voice .when{font-size:11.5px; color:var(--text-2); margin:0 0 12px}
.voice.lead-card{grid-column:span 2; flex-direction:row; background:var(--navy); border-color:var(--navy)}
.voice.lead-card figure{flex:0 0 42%; aspect-ratio:auto}
.voice.lead-card .body{padding:24px 26px}
.voice.lead-card .who{color:#fff; font-size:18px} .voice.lead-card .role{color:var(--on-navy-2)}
.voice.lead-card blockquote{color:#fff; font-size:clamp(16px,1.3vw,18px); line-height:1.45; font-weight:600; letter-spacing:-.015em}
.voice.lead-card .when{color:var(--on-navy-2)}
.voice.lead-card .meta{border-top-color:rgba(255,255,255,.12)}
.voice.lead-card .meta a{color:var(--on-navy-a)}
.voice.lead-card .tag{background:rgba(182,146,246,.18); color:var(--a2-4)}
@media (max-width:760px){ .voice.lead-card{grid-column:auto; flex-direction:column} .voice.lead-card figure{aspect-ratio:4/3.4} .voice.lead-card .body{padding:22px} }
.disclaimer{margin-top:20px; font-size:12px; color:var(--text-2); max-width:820px}
.synthesis{margin-top:32px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1.5px solid var(--navy); border-radius:20px; overflow:hidden}
.synthesis div{padding:18px 20px; background:#fff}
.synthesis div + div{border-left:1px solid var(--line-2)}
.synthesis b{display:block; font-size:22px; letter-spacing:-.03em; color:var(--navy); line-height:1}
.synthesis span{display:block; font-size:13.5px; color:var(--text-2); margin-top:6px}
@media (max-width:860px){ .synthesis{grid-template-columns:1fr 1fr} .synthesis div:nth-child(3){border-left:0} .synthesis div:nth-child(n+3){border-top:1px solid var(--line-2)} }

/* principles */
.beliefs{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media (max-width:1080px){ .beliefs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .beliefs{grid-template-columns:1fr} }
.belief{padding:20px 18px; border-radius:16px; background:#fff; border:1px solid var(--line-2); display:flex; flex-direction:column}
.belief .n{font-family:var(--serif); font-style:italic; font-size:34px; color:var(--blue); line-height:1}
.belief h4{margin:12px 0 8px; font-size:16px}
.belief p{font-size:14px; color:var(--text-2); margin:0 0 14px}
.belief .no{margin-top:auto; font-size:12.5px; font-weight:700; color:var(--a1-txt); padding-top:14px; border-top:1px dashed var(--a1-3)}
.belief .no::before{content:"Rules out: "; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:11px}

/* the model */
.model{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
@media (max-width:900px){ .model{grid-template-columns:1fr; gap:40px} }
.venn{position:relative; aspect-ratio:1/0.92; max-width:420px; width:100%; margin:0 auto}
.venn .c{position:absolute; width:58%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:clamp(15px,1.6vw,19px); letter-spacing:-.01em; mix-blend-mode:multiply}
.venn .t{left:0; top:0; background:rgba(0,117,235,.18); color:var(--blue-deep); padding:0 26% 22% 0}
.venn .b{right:0; top:0; background:rgba(244,108,64,.18); color:var(--a1-txt); padding:0 0 22% 26%}
.venn .a{left:21%; bottom:0; background:rgba(127,86,217,.2); color:var(--a2-8); padding:30% 0 0}
.venn .core{position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); background:var(--navy); color:#fff; border-radius:999px; padding:10px 16px; font-size:13px; font-weight:800; white-space:nowrap; box-shadow:0 10px 30px rgba(0,23,61,.3)}
.band-navy .venn .c{mix-blend-mode:screen}
.band-navy .venn .t{background:rgba(0,117,235,.35); color:#cfe6ff}
.band-navy .venn .b{background:rgba(244,108,64,.32); color:#ffd9c9}
.band-navy .venn .a{background:rgba(127,86,217,.42); color:#e6dbff}
.band-navy .venn .core{background:#fff; color:var(--navy)}
.model-points{display:grid; gap:0}
.model-points > div{padding:14px 0; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:150px 1fr; gap:20px}
.model-points b{white-space:nowrap; font-size:clamp(20px,2vw,26px); color:#fff; letter-spacing:-.03em; line-height:1; font-weight:800}
.model-points p{margin:0; color:var(--on-navy)}
@media (max-width:560px){ .model-points > div{grid-template-columns:1fr; gap:8px} }

/* lanes */
.lanes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){ .lanes{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .lanes{grid-template-columns:1fr} }
.lane{position:relative; padding:22px 20px 20px; border-radius:16px; background:#fff; border:1px solid var(--line-2); display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease}
.lane:hover{border-color:var(--blue-3); transform:translateY(-2px)}
.lane .letter{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:var(--navy)}
.lane:nth-child(2) .letter{background:var(--blue)} .lane:nth-child(3) .letter{background:var(--a1)} .lane:nth-child(4) .letter{background:var(--a2)} .lane:nth-child(5) .letter{background:var(--ok-txt)} .lane:nth-child(6) .letter{background:var(--blue-deep)}
.lane h3{margin:14px 0 6px; font-size:18px}
.lane .own{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--text); line-height:1.35; margin:0 0 12px}
.lane .roles{font-size:13.5px; color:var(--text-2); margin:auto 0 0; padding-top:12px; border-top:1px solid var(--line-2)}
.lane .roles b{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-txt); margin-bottom:6px}
.lane .flag{position:absolute; top:20px; right:18px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--gold-2); color:#6b4a00}
.venture-row{margin-top:14px; padding:20px 24px; border-radius:16px; background:var(--navy); color:var(--on-navy); display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.venture-row h3{color:#fff; font-size:18px}
.venture-row p{margin:4px 0 0; max-width:720px; font-size:14.5px}

/* four-year arc */
.arc{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.arc::before{content:""; position:absolute; left:0; right:0; top:21px; height:2px; background:linear-gradient(90deg,var(--blue-2),var(--blue),var(--a2),var(--navy))}
.arc .yr{position:relative; padding:0 24px 0 0}
.arc .dot{width:44px; height:44px; border-radius:12px; background:#fff; border:2px solid var(--blue); display:grid; place-items:center; font-weight:800; color:var(--navy); font-size:15px; position:relative}
.arc .yr:nth-child(3) .dot{border-color:var(--a2)} .arc .yr:nth-child(4) .dot{border-color:var(--navy); background:var(--navy); color:#fff}
.arc h3{margin:16px 0 0}
.arc .stage{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--blue-txt)}
.arc ul{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px}
.arc li{font-size:14px; padding-left:18px; position:relative; color:var(--text)}
.arc li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:2px; background:var(--blue-3)}
@media (max-width:900px){ .arc{grid-template-columns:1fr 1fr; gap:28px 0} .arc::before{display:none} }
@media (max-width:560px){ .arc{grid-template-columns:1fr} }

/* programme cards */
.programmes{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:1080px){ .programmes{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .programmes{grid-template-columns:1fr} }
.prog{display:flex; flex-direction:column; padding:22px 20px; border-radius:16px; border:1px solid var(--line-2); background:#fff; color:inherit; text-decoration:none; min-height:0; transition:transform .2s ease, border-color .2s ease}
.prog:hover{text-decoration:none; transform:translateY(-3px); border-color:var(--navy)}
.prog .st{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--blue-1); color:var(--blue-deep)}
.prog.first{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.prog.first h3{color:#fff} .prog.first .st{background:var(--gold); color:#4a3300} .prog.first .go{color:#fff}
.prog h3{margin:16px 0 8px}
.prog p{font-size:14px; margin:0 0 16px}
.prog .go{margin-top:auto; font-weight:700; color:var(--blue-txt); font-size:14.5px}

/* audiences */
.aud{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.14)}
.aud > div{padding:26px 28px 4px 0}
.aud > div + div{padding-left:28px; border-left:1px solid rgba(255,255,255,.14)}
.aud .k{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-a)}
.aud h3{margin:10px 0 8px; font-size:19px}
.aud p{font-size:14.5px}
@media (max-width:860px){ .aud{grid-template-columns:1fr} .aud > div + div{padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.14)} .aud > div{padding:20px 0 4px} }

/* honest note + CTA */
.honest{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media (max-width:860px){ .honest{grid-template-columns:1fr; gap:28px} }
.nolist{list-style:none; margin:0; padding:0}
.nolist li{padding:10px 0 10px 30px; font-size:14.5px; border-top:1px solid var(--line-2); position:relative; font-weight:600; color:var(--navy)}
.nolist li::before{content:"✕"; position:absolute; left:4px; top:10px; color:var(--a1); font-weight:800}
.finale{text-align:center; padding:84px 0; position:relative; overflow:hidden}
@media (max-width:760px){ .finale{padding:56px 0} }
.finale h2{font-size:clamp(30px,3.6vw,48px); max-width:820px; margin:0 auto}
.finale .lede{margin:24px auto 0}
.finale .actions{justify-content:center}

/* circle band */
.circle-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.circle-band > div{flex:1 1 520px; min-width:0}
.circle-band h2{font-size:clamp(23px,2.3vw,30px)}

/* tables */
.table-wrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:14px; background:#fff; -webkit-overflow-scrolling:touch}
table.t{width:100%; border-collapse:collapse; font-size:14px; line-height:1.5; min-width:680px}
table.t th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--line-2)}
table.t td{padding:11px 16px; border-top:1px solid var(--line-2); vertical-align:top}
table.t tr:first-child td{border-top:0}
table.t td:first-child{font-weight:700; color:var(--navy); width:26%}
.mode{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap}
.mode.with{background:var(--blue-1); color:var(--blue-deep)} .mode.without{background:var(--a1-1); color:var(--a1-txt)} .mode.both{background:var(--a2-1); color:var(--a2-8)}
.pace{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap}
.pace.fast{background:var(--ok-1); color:var(--ok-txt)} .pace.base{background:var(--blue-1); color:var(--blue-deep)} .pace.slow{background:var(--paper-2); color:var(--text-2); border:1px solid var(--line-2)}

/* four tests */
.tests{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:t}
@media (max-width:980px){ .tests{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .tests{grid-template-columns:1fr} }
.test{padding:22px 20px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12)}
.test::before{counter-increment:t; content:"Test " counter(t); display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--a2-4); margin-bottom:10px}
.test h3{font-size:18px; margin-bottom:8px}
.test p{margin:0; font-size:14px; color:var(--on-navy)}

/* lane detail (roles page) */
.lane-detail{display:grid; grid-template-columns:52px 1.25fr 1fr 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line-2); align-items:start}
.lane-detail:last-of-type{border-bottom:1px solid var(--line-2)}
.lane-detail .letter{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:16px; color:#fff; background:var(--navy)}
.lane-detail h3{font-size:19px}
.lane-detail .own{font-family:var(--serif); font-style:italic; font-size:17.5px; line-height:1.3; color:var(--text); margin:4px 0 8px}
.lane-detail .fit{font-size:12.5px; color:var(--text-2); margin:0}
.lane-detail h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-txt); margin-bottom:8px}
.lane-detail ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.lane-detail li{font-size:14px; color:var(--navy); font-weight:600; padding-left:16px; position:relative}
.lane-detail li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:2px; background:var(--blue-3)}
.lane-detail .lead li::before{background:var(--a2)}
.lane-detail .badge{display:inline-block; margin-left:10px; vertical-align:middle; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--gold-2); color:#6b4a00}
@media (max-width:980px){ .lane-detail{grid-template-columns:40px 1fr 1fr; gap:12px 18px} .lane-detail > :nth-child(2){grid-column:2 / -1} .lane-detail > :nth-child(3){grid-column:2} .lane-detail > :nth-child(4){grid-column:3} }
@media (max-width:560px){ .lane-detail{grid-template-columns:1fr 1fr} .lane-detail .letter{display:none} .lane-detail > :nth-child(2){grid-column:1 / -1} .lane-detail > :nth-child(3){grid-column:1} .lane-detail > :nth-child(4){grid-column:2} .lane-detail li{font-size:13px} }

/* skills */
.skills{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px}
@media (max-width:860px){ .skills{grid-template-columns:1fr} }
.skill{display:grid; grid-template-columns:32px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line-2)}
.skill .n{font-family:var(--serif); font-style:italic; font-size:24px; color:var(--blue); line-height:1}
.skill h4{font-size:15.5px; margin-bottom:3px}
.skill p{margin:0 0 4px; color:var(--text-2); font-size:14px}
.skill .where{font-size:12.5px; font-weight:700; color:var(--a2-8)}
.skill .where::before{content:"Where: "; text-transform:uppercase; letter-spacing:.08em; font-size:11px}
.skill.four .n{color:var(--a2)}
.stat-strip{margin-top:28px; padding:20px 24px; border-radius:16px; background:var(--navy); color:var(--on-navy); display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.stat-strip div b{display:block; color:#fff; font-size:24px; letter-spacing:-.03em; line-height:1}
.stat-strip div span{display:block; font-size:12.5px; margin-top:8px; line-height:1.4}
@media (max-width:860px){ .stat-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .stat-strip{grid-template-columns:repeat(2,1fr); padding:24px} }

/* pay */
.pay{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media (max-width:900px){ .pay{grid-template-columns:1fr} }
.payband{border-radius:18px; padding:24px 26px; background:#fff; border:1.5px solid var(--navy)}
.payband .label{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--gold-2); color:#6b4a00}
.payrow{display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--line-2)}
.payrow:first-of-type{margin-top:16px}
.payrow b{font-size:14px; color:var(--navy)}
.payrow .bar{position:relative; height:30px; border-radius:10px; background:var(--paper-2)}
.payrow .bar span{position:absolute; top:0; bottom:0; border-radius:10px; display:flex; align-items:center; padding:0 12px; font-size:13px; font-weight:800; color:#fff; white-space:nowrap}
@media (max-width:560px){ .payrow{grid-template-columns:1fr; gap:8px} .payband{padding:22px} }
details.srcs{margin-top:20px; border-top:1px solid var(--line-2); padding-top:16px}
details.srcs summary{cursor:pointer; font-weight:700; color:var(--blue-txt); font-size:14px; min-height:44px; display:flex; align-items:center}

/* how we teach: human x AI */
.equation{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; margin-top:44px}
.equation .side{border-radius:16px; padding:20px 24px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.equation .side h4{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-a); margin-bottom:12px}
.equation .side.ai h4{color:var(--a2-4)}
.equation .side ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
.equation .side li{font-size:clamp(15px,1.25vw,17px); font-weight:800; color:#fff; letter-spacing:-.015em}
.equation .x{align-self:center; font-family:var(--serif); font-style:italic; font-size:56px; color:var(--a2-4); line-height:1}
@media (max-width:760px){ .equation{grid-template-columns:1fr; gap:6px} .equation .x{text-align:center; font-size:36px} }

/* segmented toggle */
.seg{display:inline-flex; padding:4px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line-2)}
.seg button{min-height:44px; padding:0 20px; border-radius:999px; border:0; background:transparent; font:inherit; font-size:14px; font-weight:700; color:var(--navy); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy); color:#fff}
.pillars{display:grid; gap:0; margin-top:20px}
.pillar{display:grid; grid-template-columns:1fr 1.4fr 64px; gap:24px; align-items:center; padding:14px 0; border-top:1px solid var(--line-2)}
.pillar h4{font-size:16px}
.pillar p{margin:2px 0 0; font-size:13.5px; color:var(--text-2)}
.pillar .track{height:10px; border-radius:999px; background:var(--paper-2); overflow:hidden}
.pillar .fill{height:100%; border-radius:999px; background:var(--blue); transition:width .5s cubic-bezier(.2,.8,.2,1), background .3s}
.pillar .pct{font-size:24px; font-weight:800; color:var(--navy); letter-spacing:-.03em; text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:760px){ .pillar{grid-template-columns:1fr 64px; gap:10px 16px} .pillar .track{grid-column:1 / -1; grid-row:2} }
.core-note{margin-top:20px; padding:18px 22px; border-radius:14px; font-size:14.5px; background:var(--a2-1); border:1px solid var(--a2-3); color:var(--text)}
.core-note b{color:var(--a2-8)}

/* studio facts */
.studio{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:980px){ .studio{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .studio{grid-template-columns:1fr} }
.studio > div{padding:20px 20px; border-radius:16px; background:#fff; border:1px solid var(--line-2)}
.studio b{display:block; font-size:16.5px; color:var(--navy); letter-spacing:-.015em; margin-bottom:6px}
.studio p{margin:0; font-size:14px; color:var(--text-2)}
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.contrast > div{padding:18px 22px; border-radius:16px}
.contrast .old{background:var(--paper-2); color:var(--text-2)}
.contrast .new{background:var(--navy); color:var(--on-navy)}
.contrast h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px}
.contrast .old h4{color:var(--text-2)} .contrast .new h4{color:var(--on-navy-a)}
.contrast p{margin:0; font-size:15px}
.contrast .new p{color:#fff; font-weight:600}
@media (max-width:760px){ .contrast{grid-template-columns:1fr} }

/* agent walkthrough */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:8px}
.flow button{min-height:64px; padding:12px 14px; border-radius:14px; border:1.5px solid rgba(255,255,255,.16); background:transparent; color:#fff; font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:background .2s, border-color .2s}
.flow button small{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-2)}
.flow button span{font-size:16.5px; font-weight:800; letter-spacing:-.015em}
.flow button[aria-selected="true"]{background:#fff; color:var(--navy); border-color:#fff}
.flow button[aria-selected="true"] small{color:var(--blue-txt)}
@media (max-width:760px){ .flow{grid-template-columns:repeat(5,minmax(110px,1fr)); overflow-x:auto; padding-bottom:6px} }
.flow-panel{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.flow-panel > div{padding:20px 22px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12)}
.flow-panel h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-a); margin-bottom:12px}
.flow-panel .graded h4{color:var(--gold)}
.flow-panel p{margin:0; color:#fff; font-size:15.5px; line-height:1.55}
@media (max-width:760px){ .flow-panel{grid-template-columns:1fr} }
.levels-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:32px; border-top:1px solid rgba(255,255,255,.14)}
.levels-strip > div{padding:22px 20px 0 0}
.levels-strip > div + div{padding-left:20px; border-left:1px solid rgba(255,255,255,.14)}
.levels-strip b{display:block; color:#fff; font-size:15px; margin-bottom:6px}
.levels-strip span{font-size:13.5px; color:var(--on-navy-2)}
@media (max-width:760px){ .levels-strip{grid-template-columns:1fr 1fr; gap:20px 0} .levels-strip > div:nth-child(3){border-left:0; padding-left:0} }

/* competency matrix */
.matrix{display:grid; grid-template-columns:290px 1fr; gap:24px; align-items:start}
@media (max-width:900px){ .matrix{grid-template-columns:1fr} }
.matrix-list{display:grid; gap:5px; max-height:470px; overflow:auto; padding-right:4px}
@media (max-width:900px){ .matrix-list{grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); overflow-x:auto; max-height:none; padding-bottom:6px} }
.matrix-list button{min-height:46px; padding:7px 14px; border-radius:12px; border:1.5px solid var(--line-2); background:#fff; font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; color:var(--navy)}
.matrix-list button small{font-size:11px; font-weight:700; color:var(--text-2); letter-spacing:.02em}
.matrix-list button span{font-weight:800; font-size:14px}
.matrix-list button[aria-selected="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.matrix-list button[aria-selected="true"] small{color:var(--on-navy-2)}
.matrix-detail{border-radius:18px; border:1px solid var(--line-2); background:#fff; padding:24px 26px}
.matrix-detail .p{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-txt)}
.matrix-detail h3{margin:6px 0 14px; font-size:22px}
.lv{display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center; padding:12px 0; border-top:1px solid var(--line-2)}
.lv .chip{display:inline-flex; justify-content:center; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:800}
.lv .chip.c1{background:var(--blue-1); color:var(--blue-deep)}
.lv .chip.c2{background:var(--blue-2); color:var(--blue-deep)}
.lv .chip.c3{background:var(--blue); color:#fff}
.lv .chip.c4{background:var(--navy); color:#fff}
.lv p{margin:0; font-size:15px; color:var(--text)}
@media (max-width:560px){ .lv{grid-template-columns:1fr; gap:8px} .matrix-detail{padding:22px} }

/* tested twice */
.weights{display:flex; height:48px; border-radius:12px; overflow:hidden; margin:20px 0 12px}
.weights span{display:flex; align-items:center; padding:0 14px; color:#fff; font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden}
.weights-key{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13.5px; color:var(--text-2)}
.weights-key i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:0}
.evidence{margin-top:28px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:20px 24px; border-radius:16px; font-size:14.5px; background:var(--a1-1); border:1px solid var(--a1-3)}
.evidence b{font-size:clamp(38px,4vw,52px); color:var(--a1-txt); letter-spacing:-.04em; line-height:1}
.evidence p{margin:0}
@media (max-width:560px){ .evidence{grid-template-columns:1fr; gap:12px; padding:24px} }

/* AI by year */
.modes{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.modes > div{padding:24px 26px; border-radius:16px}
.modes .tutor{background:var(--blue-0); border:1px solid var(--blue-2)}
.modes .work{background:var(--navy); color:var(--on-navy)}
.modes .work h3{color:#fff}
.modes .k{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-txt)}
.modes .work .k{color:var(--on-navy-a)}
.modes h3{margin:8px 0 8px; font-size:21px}
.modes p{margin:0}
@media (max-width:760px){ .modes{grid-template-columns:1fr} .modes > div{padding:26px} }

/* tools */
.tools{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1.5px solid var(--navy)}
.tools > div{padding:16px 20px 16px 0; border-bottom:1px solid var(--line-2)}
.tools > div:not(:nth-child(3n+1)){padding-left:20px; border-left:1px solid var(--line-2)}
.tools b{display:block; color:var(--navy); font-size:15px; margin-bottom:3px}
.tools span{font-size:13.5px; color:var(--text-2)}
@media (max-width:860px){ .tools{grid-template-columns:1fr} .tools > div:not(:nth-child(3n+1)){padding-left:0; border-left:0} }

/* signature experiences */
.exps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){ .exps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .exps{grid-template-columns:1fr} }
.exp{padding:20px 20px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:6px}
.exp .when{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.exp h3{font-size:18px}
.exp p{margin:0; font-size:14px; color:var(--on-navy)}

/* college keeps */
.keeps{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px}
@media (max-width:760px){ .keeps{grid-template-columns:1fr} }
.keeps > div{padding:12px 0; border-top:1px solid var(--a2-3)}
.keeps b{color:var(--navy); display:block; margin-bottom:4px}
.keeps span{font-size:14px; color:var(--text-2)}

/* industries list */
.inds{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){ .inds{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .inds{grid-template-columns:1fr} }

/* reveal on scroll */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }
.no-js .rv{opacity:1; transform:none}

/* sub-nav for long pages */
.toc{position:sticky; top:72px; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px); -webkit-backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line-2)}
.toc .wrap{display:flex; gap:24px; overflow-x:auto; scrollbar-width:none}
.toc .wrap::-webkit-scrollbar{display:none}
.toc a{flex:0 0 auto; display:flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; color:var(--text-2); border-bottom:2px solid transparent}
.toc a:hover{color:var(--navy); text-decoration:none}
.toc a.on{color:var(--navy); border-bottom-color:var(--blue)}

/* shared header and footer (kept from the site) */
.ia-header a:focus-visible,.ia-header summary:focus-visible,.ia-footer a:focus-visible{outline:2px solid #57abff;outline-offset:3px;border-radius:3px}
.ia-header a:hover{text-decoration:none}
.ia-nav .ia-link{color:#595959;text-decoration:none;font-size:14.5px;font-weight:600;padding:10px 0;border-bottom:2px solid transparent;white-space:nowrap}
.ia-nav .ia-link:hover{color:#00173d;text-decoration:none}
.ia-nav .ia-link[aria-current="page"]{color:#00173d;border-bottom-color:#0075eb}
.ia-cta:hover{background:#006bd6;text-decoration:none}
.ia-menu{display:none}
.ia-menu summary{list-style:none;cursor:pointer}
.ia-menu summary::-webkit-details-marker{display:none}
.ia-panel a{display:block;padding:13px 4px;border-top:1px solid #f0f0f0;color:#00173d;font-weight:600;font-size:16px;text-decoration:none}
.ia-panel a[aria-current="page"]{color:#006bd6}
.ia-footer a:hover{color:#ffffff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1200px){.ia-nav .ia-link{display:none}.ia-menu{display:block}}
@media (max-width:560px){.ia-nav .ia-cta{display:none !important}.ia-nav{display:none !important}}
.payband .axis{display:flex; justify-content:space-between; margin:8px 0 0 156px}
@media (max-width:560px){ .payband .axis{margin-left:0} }
.payrow .bar span.outside{background:#8c8c8c !important; color:var(--text-2); padding:0; overflow:visible}
.payrow .bar span.outside::after{content:attr(data-label); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); font-size:13px; font-weight:800; color:var(--text-2)}
section[id]{scroll-margin-top:72px}
body:has(.toc) section[id]{scroll-margin-top:120px}
@media (max-width:760px){ .grid-motif .tile{display:none} .grid-motif::before{opacity:.6} }
.nowrap{white-space:nowrap}

/* phones: long card stacks become one swipeable row (the next card peeks in to show it scrolls) */
@media (max-width:560px){
  .voices,.beliefs,.lanes,.programmes,.exps,.studio,.tests{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 14px; scroll-padding:0 16px; scrollbar-width:none}
  .voices::-webkit-scrollbar,.beliefs::-webkit-scrollbar,.lanes::-webkit-scrollbar,.programmes::-webkit-scrollbar,.exps::-webkit-scrollbar,.studio::-webkit-scrollbar,.tests::-webkit-scrollbar{display:none}
  .voices > *,.beliefs > *,.lanes > *,.programmes > *,.exps > *,.studio > *,.tests > *{scroll-snap-align:start}
  .voice:hover,.lane:hover,.prog:hover{transform:none; box-shadow:none}
  .voice.lead-card{grid-column:auto; flex-direction:column}
  .voice.lead-card figure{aspect-ratio:4/3; flex:none}
  .voice.lead-card .body{padding:18px}
  .swipe-hint{display:block}
}
.swipe-hint{display:none; font-size:12px; font-weight:700; color:var(--text-2); margin:-4px 0 10px}
.band-navy .swipe-hint{color:var(--on-navy-2)}
.finale{background:linear-gradient(180deg,var(--blue-0) 0%,#eef5ff 100%); border-top:1px solid var(--blue-1)}
.finale .em{color:var(--blue)}
.signals{list-style:none; padding:0; margin:20px 0 0}
.signals li{padding:9px 0 9px 22px; border-top:1px solid var(--line-2); position:relative; font-weight:600; color:var(--navy); font-size:14.5px}
.signals li::before{content:""; position:absolute; left:2px; top:16px; width:8px; height:8px; border-radius:2px; background:var(--blue)}
.contrast .old{background:#fff; border:1px solid var(--line-2)}
@media (max-width:560px){ .swipe-hint{display:block} }

/* phones: tables become stacked rows with their column labels; lanes become a swipeable row */
@media (max-width:560px){
  .table-wrap{overflow:visible; border:0; background:transparent; border-radius:0}
  table.t{min-width:0; display:block}
  table.t thead{display:none}
  table.t tbody{display:grid; gap:10px}
  table.t tr{display:block; background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:14px 16px}
  table.t td{display:block; padding:0; border:0; width:auto !important}
  table.t td + td{margin-top:8px}
  table.t td:first-child{font-size:15px}
  table.t td + td[data-label]::before{content:attr(data-label); display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); margin-bottom:2px}
  table.t td:has(> .mode:only-child)::before,table.t td:has(> .pace:only-child)::before{display:none}
  table.t td:has(> .mode:only-child),table.t td:has(> .pace:only-child){margin-top:6px}

  .lane-list{display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 14px; scroll-padding:0 16px; scrollbar-width:none}
  .lane-list::-webkit-scrollbar{display:none}
  .lane-list .lane-detail{scroll-snap-align:start; background:#fff; border:1px solid var(--line-2) !important; border-radius:16px; padding:18px; align-content:start}
}
@media (max-width:560px){
  table.t tbody{grid-auto-flow:column; grid-auto-columns:84%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 14px; scroll-padding:0 16px; scrollbar-width:none}
  table.t tbody::-webkit-scrollbar{display:none}
  table.t tr{scroll-snap-align:start}
}
@media (max-width:560px){ .lane .flag{position:static; display:table; margin-top:12px} }