/* Assemble You homepage, draft 7.1 (Oli's notes on draft 7, 29 Oct; from the seventh: Oli's notes, 29 Oct): Multiverse's structure and look, AY's colours, fonts and words. */

:root {
  --ink: #0c355c;
  --ink-soft: #46607a;
  --mute: #566b80;   /* text only; was #8193a6, darkened for 4.5:1 contrast (accessibility sweep, checklist 165, Oli 10 Nov) */
  --teal: #2cd1b1;
  --teal-deep: #0f9c83;
  --teal-text: #0a7562;   /* teal as small text: 4.5:1 on cream and white (checklist 165) */
  --sky: #3cc6ed;
  --indigo: #4460a9;
  --sun: #ffb850;
  --sun-deep: #b86e00;
  --cream: #f5f3ef;
  --paper: #ffffff;
  --line: #e6e1d8;

  --t-display: clamp(56px, 8.4vw, 144px);
  --t-h1: clamp(44px, 5.6vw, 96px);
  --t-h2: clamp(36px, 4vw, 68px);
  --t-h3: clamp(28px, 2.6vw, 44px);
  --t-h4: clamp(20px, 1.6vw, 28px);
  --t-body: 16px;
  --t-small: 14px;
  --t-mono: 11px;

  --r-s: 4px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 20px;

  --page: 1440px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --bar: 48px; /* 32px until 11 Nov: bigger banner, Apira row 23 */
  --navh: 56px;
  --hold: 0px; /* the banner scrolls away and the menu hides on the way down, so held sections use the whole screen */
  --pill: 76px; /* room kept at the top of a held screen for the menu pill when it comes back */
  --inner: clamp(16px, 5vw, 96px);
  --sec: clamp(96px, 10vw, 160px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
p { margin: 0; }
b, strong { font-weight: 500; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-s); }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--inner); }

/* the dot-and-mono label at the top of a section (Multiverse's signature; against page-design rule 5) */
.label { display: inline-flex; align-items: center; gap: 12px; font: 500 var(--t-mono)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(44, 209, 177, .2); }
.mono { font: 500 var(--t-mono)/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }

/* draft 8.9 (Jen, Oli): one pill, the words then the arrow inside it; no separate arrow box */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px 0 22px; border-radius: 999px; background: var(--teal); color: var(--ink); text-decoration: none; font: 500 14px/1 "Outfit", sans-serif; white-space: nowrap; transition: background .3s var(--ease); }
.btn .t, .btn .a { display: inline-flex; align-items: center; }
.btn .a svg { transition: transform .45s var(--ease); }
.btn:hover { background: #5ce6cb; }
.btn:hover .a svg { transform: translateX(3px); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #164a7b; }
.btn.line { background: transparent; box-shadow: inset 0 0 0 1px rgba(12, 53, 92, .35); }
.btn.line:hover { background: rgba(12, 53, 92, .06); }
.link { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; text-decoration: none; }
.link svg { transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(4px); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------- top bar and nav ---------- */
/* the webinar banner sits at the very top and stays there while the page scrolls (webinars split, 10 Nov); its x hides it for that visitor */
.topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: #0a2a49; color: #fff; }
.topbar .tb-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 12px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; opacity: .8; }
.topbar .tb-x svg { width: 16px; height: 16px; }
.topbar .tb-x:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.topbar .tb-x:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; opacity: 1; }
.topbar .wrap { max-width: none; padding: 0 var(--gutter); display: flex; justify-content: flex-end; align-items: center; height: var(--bar); }
.topbar a { font-size: 14px; letter-spacing: .08em; line-height: 1.3; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the menu: a translucent pill across the middle two-thirds of the screen, not edge to edge.
   It hides on the way down and comes back on the way up (motion.js adds .hidden). */
.nav { position: fixed; left: 50%; top: 10px; z-index: 50; width: max-content; min-width: 66.667vw; max-width: calc(100vw - 2 * var(--gutter)); border-radius: 999px; background: rgba(255, 255, 255, .62); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 0 0 1px rgba(12, 53, 92, .08), 0 14px 34px -20px rgba(12, 53, 92, .4); transform: translate(-50%, var(--ny, var(--bar))); transition: transform .6s var(--ease); }
.nav.hidden { transform: translate(-50%, -140%); }
.nav .wrap { max-width: none; padding: 0 8px 0 24px; display: flex; align-items: center; height: var(--navh); gap: 28px; }
.nav .logo img { height: 28px; width: auto; }
.nav ul { display: flex; gap: 24px; list-style: none; margin: 0 auto; padding: 0; font-size: 14px; white-space: nowrap; }
.nav ul a { text-decoration: none; opacity: .85; transition: opacity .3s; }
.nav ul a:hover { opacity: 1; }
.nav .right { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.nav .right > a:not(.btn) { text-decoration: none; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; color: var(--ink); cursor: pointer; }

/* ---------- hero: full screen, headline only ---------- */
.hero { position: relative; height: calc(100svh + 24px); min-height: 664px; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; background: #eef2f3; }
.aura { position: absolute; inset: -15%; z-index: -1; filter: blur(80px) saturate(1.15); }
.aura span { position: absolute; border-radius: 50%; opacity: .75; will-change: transform; }
.aura .a1 { width: 60vw; height: 50vw; left: -10%; top: 20%; background: var(--teal); animation: d1 24s ease-in-out infinite alternate; }
.aura .a2 { width: 56vw; height: 46vw; right: -12%; top: -10%; background: var(--sun); animation: d2 28s ease-in-out infinite alternate; }
.aura .a3 { width: 52vw; height: 40vw; left: 28%; bottom: -24%; background: var(--sky); animation: d3 20s ease-in-out infinite alternate; }
.aura .a4 { width: 30vw; height: 26vw; right: 10%; bottom: 0; background: var(--indigo); opacity: .4; animation: d1 32s ease-in-out infinite alternate-reverse; }
.aura .a5 { width: 34vw; height: 30vw; left: 20%; top: -10%; background: #fff; opacity: .7; animation: d2 26s ease-in-out infinite alternate-reverse; }
@keyframes d1 { to { transform: translate(16vw, 10vh) rotate(25deg) scale(1.15); } }
@keyframes d2 { to { transform: translate(-14vw, 16vh) rotate(-20deg) scale(.88); } }
@keyframes d3 { to { transform: translate(-18vw, -12vh) rotate(15deg) scale(1.2); } }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero h1 { font-size: var(--t-display); font-weight: 500; line-height: .95; letter-spacing: -0.05em; padding: 0 var(--gutter); max-width: 1300px; }
.hero-in { display: grid; justify-items: center; gap: clamp(20px, 3vh, 36px); }
.hero .tagline { font-size: var(--t-h4); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; padding: 0 var(--gutter); max-width: 760px; }
.pause { position: absolute; right: var(--gutter); bottom: 72px; width: 32px; height: 32px; border-radius: var(--r-s); border: 0; background: rgba(12, 53, 92, .12); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
/* the hero's colour wash drifts gently, quicker than the small panels' */
/* the hero's colour wash: bold, quick and clearly moving; the small panels keep their slow drift */
.hero .aura { filter: blur(60px) saturate(1.3); }
.hero .aura span { opacity: .85; }
.hero .aura .a1 { animation: h1 7s ease-in-out infinite alternate; }
.hero .aura .a2 { animation: h2 8s ease-in-out infinite alternate; }
.hero .aura .a3 { animation: h3 6s ease-in-out infinite alternate; }
.hero .aura .a4 { opacity: .55; animation: h2 7.5s ease-in-out infinite alternate-reverse; }
.hero .aura .a5 { opacity: .6; animation: h1 6.5s ease-in-out infinite alternate-reverse; }
@keyframes h1 { 33% { transform: translate(28vw, -12vh) scale(1.25) rotate(30deg); } 66% { transform: translate(12vw, 22vh) scale(.85) rotate(-15deg); } 100% { transform: translate(38vw, 8vh) scale(1.15) rotate(45deg); } }
@keyframes h2 { 33% { transform: translate(-30vw, 18vh) scale(.8) rotate(-25deg); } 66% { transform: translate(-10vw, 30vh) scale(1.3) rotate(20deg); } 100% { transform: translate(-36vw, -6vh) scale(1) rotate(-40deg); } }
@keyframes h3 { 33% { transform: translate(-24vw, -24vh) scale(1.3); } 66% { transform: translate(18vw, -10vh) scale(.9); } 100% { transform: translate(-6vw, -30vh) scale(1.2); } }
body.still .aura span, body.still .marquee-track { animation-play-state: paused !important; }

/* the white sheet slides up over the hero's bottom edge */
.sheet { position: relative; z-index: 2; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -40px; }

/* the slim strip between the hero and What we found: logo and tagline */
.tagband { background: #ebe8e2; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.tagband .wrap { display: flex; align-items: center; gap: clamp(20px, 4vw, 64px); min-height: 88px; padding-top: 20px; padding-bottom: 20px; }
.tagband img { height: 30px; width: auto; flex: none; }
.tagband p { font-size: clamp(16px, 1.6vw, 22px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.3; }

/* ---------- statement ---------- */
.statement { padding: 72px 0 40px; }
.statement .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.statement p { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.02em; font-weight: 300; max-width: 640px; }

/* ---------- curtain: the picture grows to full screen, then the card takes its place ---------- */
.curtain { height: calc(440vh - var(--hold)); position: relative; }
.curtain-stick { position: sticky; top: var(--hold); height: calc(100vh - var(--hold)); overflow: hidden; }
/* What we found: the picture grows, then the card rises and holds for half a screen */
.zoom { height: 250vh; }
@media (min-width: 768px) { .zoom-timed .zoom { height: 130vh; } } /* draft 8.1: half the held stretch after the card lands (Oli: "about fifty percent too long") */ /* laptops: it grows on a timer, so only the card needs a held stretch */
.cur-main { position: absolute; inset: 0; clip-path: inset(var(--ci, 18%) var(--cx, 30%) var(--ci, 18%) var(--cx, 30%) round var(--cr, 16px)); isolation: isolate; background: #e7f0f1; }
.zoom .cur-main { background: #f1efeb; }
.zoom .curtain-stick { background: #f1efeb; }
.cur-main .aura { inset: -20%; }
.cur-main .aura span { opacity: .55; }
/* the crowd fills the frame and fades back to the grey as the card rises */
.cur-people { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: var(--po, 1); }
.cur-tile { position: absolute; width: 18vw; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(12, 53, 92, .4); transition: none; }
.cur-tile img { width: 100%; height: 100%; object-fit: cover; }
.cur-tile.t1 { left: 6vw; top: 14vh; transform: translate(var(--tx1, 0), var(--ty1, 0)) scale(var(--ts, 1)); opacity: var(--to, 1); }
.cur-tile.t2 { right: 6vw; bottom: 14vh; transform: translate(var(--tx2, 0), var(--ty2, 0)) scale(var(--ts, 1)); opacity: var(--to, 1); }
.cur-tile.t3 { right: 6vw; top: 14vh; transform: translate(var(--tx3, 0), var(--ty3, 0)) scale(var(--ts, 1)); opacity: var(--to, 1); }
.cur-tile.t4 { left: 6vw; bottom: 14vh; transform: translate(var(--tx4, 0), var(--ty4, 0)) scale(var(--ts, 1)); opacity: var(--to, 1); }
.ada-tile { background: var(--paper); }
.ada-mini { height: 100%; padding: 7% 8%; display: flex; flex-direction: column; justify-content: center; gap: 8%; font-size: clamp(10px, .85vw, 13px); }
.ada-mini .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--teal); }
.ada-mini p { padding: .5em .8em; border-radius: 10px; line-height: 1.3; max-width: 85%; }
.ada-mini .me { align-self: flex-end; background: var(--ink); color: #fff; }
.ada-mini .ada { background: #f0ede7; color: var(--ink); }
.ai-tile { background: var(--paper); }
.ai-mini { height: 100%; padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; gap: 10%; font-size: clamp(10px, .9vw, 14px); color: var(--ink-soft); }
.ai-hd { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.ai-hd img { width: auto; height: 1.6em; object-fit: contain; }
.ai-row { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 8px; }
.ai-row i { display: block; height: .9em; border-radius: 4px; width: calc(var(--v) * 1%); }
.cur-card { position: absolute; left: 50%; top: calc(50% + var(--pill) / 2 - 8px); width: min(880px, 88vw); transform: translate(-50%, calc(-50% + var(--cy, 120px))); opacity: var(--co, 0); }
/* the method has no picture of its own now: it sits on the soft colour, full screen */
.method-hold { height: calc(304vh - var(--hold)); } /* ends just after Prove's place, so the page moves on from Prove (draft 7.43) */
.method-hold .cur-main { clip-path: none; }
/* an in-between line on the method's colour, before its card rises over it, like the strip under the hero (draft 7.45) */
.cur-line { position: absolute; left: 50%; top: clamp(20px, 4vh, 40px); z-index: 1; width: 100%; max-width: var(--page); margin: 0; padding: 0 var(--inner); transform: translateX(-50%); opacity: var(--lo, 1); text-align: right; font-size: clamp(26px, 2.9vw, 48px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; pointer-events: none; }
.method-hold.freed { height: calc(120vh - var(--hold)); } /* after Prove: one screen, passed like any other section (draft 7.44) */

/* the method panel that rises into the full-screen picture, sized to fit one screen */
.cur-card.method-card { width: min(1440px, 96vw); }
.method-in { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: var(--r-xl); padding: clamp(18px, 2vw, 30px); box-shadow: 0 40px 80px -36px rgba(12, 53, 92, .45); }
.method-card .method-head { margin-bottom: clamp(10px, 2vh, 24px); align-items: center; }
.method-card .method-head h2 { font-size: clamp(36px, min(4.8vw, 8vh), 80px); line-height: .95; }
.m-sub { margin-top: 6px; font-size: clamp(17px, min(1.7vw, 3.2vh), 26px); font-weight: 300; letter-spacing: -0.015em; color: var(--ink-soft); }
.method-card .panel { padding: clamp(14px, min(2.2vw, 3vh), 32px) clamp(18px, 2.2vw, 32px); }
.method-card .pane h3 { font-size: clamp(28px, min(3vw, 6vh), 52px); margin-top: 10px; }
.method-card .pane p { font-size: 15px; margin-top: 12px; }
.method-card .pane .btn { margin-top: 20px; }
/* on short laptop screens the product windows shrink so the whole card fits under the menu */
.method-card .shot { width: 100%; max-width: calc((100vh - var(--pill) - 16px - 280px) * 1.6); justify-self: end; }
.method-card .window-bar { padding: 10px 18px; }
.method-card .window-body { padding: 16px 20px; }
.method-card .team-rows { gap: 9px; margin-top: 12px; }
.method-card .lessons { gap: 8px; }
.method-card .ada video { aspect-ratio: 16 / 9; }
.method-card .tabs { margin-top: clamp(10px, 2vh, 28px); }
.method-card .tab { height: 36px; }
.method-card .team-row .pair span { transform-origin: left; }

/* Foundations tab: a pointer picks a lesson, which opens to fill the window and plays */
.lessons { position: relative; }
.lessons img { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.lessons.hov img.pick { transform: scale(1.04); box-shadow: 0 0 0 3px var(--teal), 0 14px 30px -12px rgba(12, 53, 92, .45); }
.lessons.press img.pick { transform: scale(.97); }
.lopen { position: absolute; z-index: 2; border-radius: 8px; overflow: hidden; opacity: 0; pointer-events: none; background: var(--ink); transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), border-radius .8s var(--ease), opacity .15s; }
.lopen img { width: 100%; height: 100%; object-fit: cover; }
.lplay { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lessons.opened .lplay { opacity: 1; transform: none; }
.lessons.playing .lplay { opacity: 0; transform: scale(1.25); }
.lbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 18px 14px; background: linear-gradient(transparent, rgba(12, 53, 92, .88)); color: #fff; font-size: 13px; display: grid; gap: 8px; opacity: 0; transition: opacity .4s var(--ease) .2s; }
.lessons.opened .lbar { opacity: 1; }
/* the person leading the lesson, in the corner of the playing video, as in the real player */
.lhost { position: absolute; right: 14px; bottom: 58px; width: 13%; aspect-ratio: 68 / 78; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 12px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.lhost img { width: 100%; height: 100%; object-fit: cover; }
.lessons.human .lhost { opacity: 1; transform: none; }
.lp { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.lp i { display: block; height: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); }
.lessons.playing .lp i { transform: scaleX(1); transition: transform 4.5s linear; }

/* product window, shared */
.window { background: var(--paper); border-radius: var(--r-l); box-shadow: 0 40px 80px -36px rgba(12, 53, 92, .45), 0 0 0 1px rgba(12, 53, 92, .06); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.window-bar img { height: 20px; }
.window-bar .tag { margin-left: auto; color: var(--mute); }
.window-body { padding: clamp(20px, 2.6vw, 36px); }
.report h4 { font-size: var(--t-h4); font-weight: 400; letter-spacing: -0.02em; }
.report .q { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.bars { margin-top: 24px; display: grid; gap: 16px; }
.bar { display: grid; grid-template-columns: 140px 1fr 56px; align-items: center; gap: 14px; font-size: 14px; }
.bar .track { height: 24px; border-radius: 6px; background: #f0ede7; overflow: hidden; display: block; padding: 0; }
.bar .fill { display: block; height: 100%; border-radius: 6px; width: calc(var(--v) * 1%); transform-origin: left; }
.bar .num { font-weight: 500; font-size: 20px; text-align: right; letter-spacing: -0.02em; }
.c-conf { background: var(--sun); }
.c-cap { background: var(--teal); }
.gap-line { margin-top: 24px; display: flex; align-items: baseline; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.gap-line strong { font-size: clamp(36px, 3.6vw, 56px); font-weight: 300; letter-spacing: -0.04em; color: var(--sun-deep); line-height: 1; white-space: nowrap; }
.gap-line span { color: var(--ink-soft); font-size: 15px; max-width: 420px; }
.src { margin-top: 14px; font-size: 12px; color: var(--mute); }

/* ---------- logo strip ---------- */
.trust { padding: clamp(64px, 8vw, 112px) 0 0; }
.trust-lab { font-size: var(--t-small); color: var(--ink-soft); }
.trust .wrap { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide var(--speed, 48s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.logos { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.logos img { height: 36px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(.4) contrast(1.2); opacity: .55; }
.logos img.award { height: 64px; filter: none; opacity: 1; }

/* ---------- the AI Confidence Method: four tabs (from the first draft) ---------- */
.method { padding: clamp(72px, 8vw, 128px) 0; }
.method-card h2, .method-card h3, .offer h2, .offer h3 { font-weight: 500; letter-spacing: -0.035em; }
.method-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.method-head h2 { font-size: var(--t-h2); max-width: 900px; }
.legend { display: flex; gap: 12px; align-items: center; font-size: 15px; white-space: nowrap; }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -1px; }
.legend .ln { width: 32px; height: 1.5px; background: var(--line); }
.panel { background: var(--cream); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 64px); }
.panes { display: grid; }
.pane { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 96px); align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.pane.on { opacity: 1; visibility: visible; transition: opacity .7s var(--ease); }
.pane .kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.pane .kicker i { width: 12px; height: 12px; border-radius: 50%; }
.pane h3 { font-size: var(--t-h3); margin-top: 20px; }
.pane p { margin-top: 20px; color: var(--ink-soft); font-size: 17px; font-weight: 300; max-width: 520px; }
.pane p b { font-weight: 500; color: var(--ink); }
.pane .btn { margin-top: 32px; }
.pane .shot { transform: translateY(24px); transition: transform 1s var(--ease); }
.pane.on .shot { transform: none; }
.tabs { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.tab { position: relative; overflow: hidden; height: 44px; min-width: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(12, 53, 92, .07); color: var(--ink); font: 500 15px/1 "Outfit", sans-serif; }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
/* the timer line runs inside the pill, so the round ends don't hide it */
.tab .prog { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--teal); transform-origin: left; transform: scaleX(0); }
.tab[aria-selected="true"] .prog { animation: prog var(--dur, 8s) linear forwards; }
.panel.paused .tab .prog { animation-play-state: paused; }
@keyframes prog { to { transform: scaleX(1); } }
/* laptops and desktops: the tabs follow the scroll, and the line shows how far through this one you are */
.panel.by-scroll .tab .prog { animation: none !important; }
.works { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; font-size: 15px; color: var(--ink-soft); }
.works ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; list-style: none; margin: 0; padding: 0; }
.works li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.works img { width: 28px; height: 28px; object-fit: contain; }

.team-rows { display: grid; gap: 14px; margin-top: 20px; }
.team-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; font-size: 13px; }
.team-row .pair { display: grid; gap: 5px; }
.team-row .pair span { display: block; height: 10px; border-radius: 5px; width: calc(var(--v) * 1%); }
.key-inline { display: flex; gap: 18px; font-size: 12px; color: var(--ink-soft); }
.key-inline span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.sample { font-size: 11px; color: var(--mute); margin-top: 14px; }
.lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lessons img { border-radius: 8px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ada video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.prove-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cert { border-radius: 12px; padding: 24px 20px; background: linear-gradient(140deg, #fff 0%, #fff8ea 100%); box-shadow: inset 0 0 0 1px #f0e3c8; text-align: center; }
.cert img { width: 56px; margin: 0 auto 10px; }
.cert .t1 { font-size: 12px; color: var(--ink-soft); }
.cert .t2 { font-size: 19px; letter-spacing: -0.02em; margin-top: 6px; }
.cert .t3 { font-size: 12px; color: var(--ink-soft); margin-top: 12px; }
.remeasure h5 { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.remeasure .bar { grid-template-columns: 56px 1fr 36px; font-size: 12px; }
.remeasure .bar .track { height: 14px; }
.remeasure .bar .num { font-size: 14px; }
.courses { display: grid; gap: 10px; }
.course { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #f7f6f3; font-size: 14px; }
.course img { width: 28px; height: 28px; object-fit: contain; margin: auto; }
.course small { display: block; color: var(--mute); font-size: 12px; }
.course .mono { color: var(--teal-deep); }

/* ---------- what we found: one white card, rising over the picture of people, fitting one laptop screen ---------- */
.cur-card.found-card { width: min(1320px, 94vw); }
.fd-card { background: var(--paper); border-radius: var(--r-xl); padding: clamp(22px, min(3vw, 4vh), 56px) clamp(24px, 3.4vw, 64px); box-shadow: 0 40px 80px -36px rgba(12, 53, 92, .45); }
.fd-card .loading { box-shadow: 0 0 0 1px var(--line); }
.fd-top { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.fd-copy h2 { font-size: clamp(40px, min(5vw, 9vh), 72px); line-height: .95; white-space: nowrap; }
.fd-copy h2 b { font-weight: 500; }
.fd-copy p { margin-top: clamp(12px, 2.4vh, 24px); font-size: clamp(15px, min(1.3vw, 2.6vh), 18px); font-weight: 300; color: var(--ink-soft); max-width: 520px; }
.fd-copy p + p { margin-top: 10px; color: var(--ink); font-weight: 400; }
.fd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: clamp(12px, 2.6vh, 28px); }
.fd-foot p { font-size: clamp(15px, min(1.3vw, 2.6vh), 18px); font-weight: 300; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.fd-foot .btn { flex: none; }
/* the two survey figures: large, each on its own cream tile, so they stand out */
.fd-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(12px, 2vh, 36px); }
.fd-num { display: flex; flex-direction: column; align-items: start; gap: clamp(8px, 1.4vh, 14px); background: var(--cream); border-radius: var(--r-l); padding: clamp(12px, 2.4vh, 28px) clamp(18px, 2vw, 32px); }
.fd-num b { flex: none; font-size: clamp(44px, min(4.8vw, 10vh), 96px); white-space: nowrap; font-weight: 500; letter-spacing: -0.05em; line-height: .9; color: var(--ink); }
.fd-num p { font-size: clamp(15px, min(1.2vw, 2.3vh), 19px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }

/* the loading card: tools ticked; confidence's ring fills to 72 and stops; capability's ring
   is a 19% arc that keeps turning, still loading */
.loading { margin: 0; }
.loading .window-body { display: grid; gap: clamp(10px, 2vh, 28px); padding: clamp(12px, 2.4vh, 32px) clamp(22px, 2.8vw, 40px); }
.ld-tools { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-bottom: clamp(10px, 2vh, 20px); border-bottom: 1px solid var(--line); font-size: 17px; }
.ld-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--teal-text); }
.ld-ok svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(44, 209, 177, .18); }
.ld-rings { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); }
.ld-ring { display: grid; justify-items: center; text-align: center; gap: 4px; }
.ring { position: relative; width: clamp(96px, min(10vw, 15vh), 170px); aspect-ratio: 1; margin-bottom: 8px; }
.ld-ring .ring { margin-bottom: 4px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .rt { stroke: #f0ede7; }
.ring .rf { stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 300; font-size: clamp(28px, min(2.8vw, 6vh), 44px); letter-spacing: -0.04em; }
.ld-ring.c .rf { stroke: var(--sun); stroke-dasharray: 72 100; }
.ld-ring.c b { color: var(--sun-deep); }
.ld-ring.k .rf { stroke: var(--teal); stroke-dasharray: 19 100; }
.ld-ring.k b { color: var(--teal-text); }
.ld-ring.k svg { animation: ld-spin 2.4s linear infinite; }
.ld-lab { font-size: 17px; font-weight: 500; }
.ld-note { font-size: 14px; color: var(--ink-soft); max-width: 260px; line-height: 1.35; }
/* both rings grow to their figures together as the card lands; then the capability arc starts turning */
/* in order, from empty outlines: the tick, then Confidence fills, then Capability fills, then Capability turns */
.js .loading .ld-ok { opacity: 0; transition: opacity .5s var(--ease) .4s; }
.js .loading .ld-ring .rf { stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray 1.4s cubic-bezier(.3, .6, .4, 1) 1s, opacity .2s linear 1s; }
.js .loading .ld-ring.k .rf { transition-duration: 1s, .2s; transition-delay: 2.5s, 2.5s; }
.js .loading .ld-ring b { opacity: 0; transition: opacity .5s var(--ease) 2s; }
.js .loading .ld-ring.k b { transition-delay: 3.1s; }
.js .loading .ld-ring.k svg { animation: none; }
.js .loading.run .ld-ok { opacity: 1; }
.js .loading.run .ld-ring .rf { opacity: 1; }
.js .loading.run .ld-ring.c .rf { stroke-dasharray: 72 100; }
.js .loading.run .ld-ring.k .rf { stroke-dasharray: 19 100; }
.js .loading.run .ld-ring b { opacity: 1; }
.js .loading.run .ld-ring.k svg { animation: ld-spin 2.4s linear 3.6s infinite; }
@keyframes ld-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
body.still .ld-ring.k svg { animation-play-state: paused; }

/* ---------- research: the four findings together, beside the photo ---------- */
.big-stat { position: relative; background: var(--cream); }
.bs-stick { padding: var(--sec) 0; }
/* the photo matches the label-to-source block, top and bottom */
.bs { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 72px); align-items: stretch; width: 100%; }
.bs .portrait { border-radius: var(--r-l); overflow: hidden; position: relative; isolation: isolate; align-self: stretch; min-height: 360px; }
.bs .portrait .aura { inset: -30%; filter: blur(40px); }
.bs .portrait img { position: absolute; bottom: 0; left: 50%; height: 92%; width: auto; max-width: none; transform: translateX(-50%); }
.bs .finds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vh, 48px) clamp(28px, 4vw, 64px); }
.bs .find p { font-size: clamp(26px, 2.6vw, 40px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.1; }
.bs .find p em { font-style: normal; color: var(--sun-deep); }
.bs .find p em.t { color: var(--teal-deep); }
.bs .head { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 6vh, 64px); }
.bs .src { margin-top: 0; }
.bs-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.btn.report { font-size: 17px; }
.btn.report { height: 56px; padding: 0 26px 0 32px; gap: 12px; }

/* content that fades up lightly as its section arrives (motion.js adds .fades, then .in) */
.fades [data-fade] { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.33, 1, .68, 1) var(--fd, 0ms), transform .5s cubic-bezier(.33, 1, .68, 1) var(--fd, 0ms); }
.fades [data-fade].in { opacity: 1; transform: none; }

/* ---------- band of large photo cards ---------- */
.band { padding: var(--sec) 0; overflow: hidden; }
.band-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; }
.band-head h2 { font-size: var(--t-h1); }
.band-head p { color: var(--ink-soft); max-width: 360px; }
.track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--inner); scroll-padding: 0 var(--inner); }
.track::-webkit-scrollbar { display: none; }
.person { flex: 0 0 clamp(280px, 30vw, 440px); scroll-snap-align: start; }
.person .ph { border-radius: var(--r-l); aspect-ratio: .8; overflow: hidden; position: relative; isolation: isolate; }
.person .ph .aura { inset: -30%; filter: blur(50px); }
.person .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease); }
.person .ph img.cut { object-fit: contain; object-position: bottom; top: auto; height: 90%; }
.person:hover .ph img { transform: scale(1.03); }
.person .ph.missing { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #f3efe8 0 12px, #ebe5da 12px 24px); color: var(--ink-soft); font-size: 14px; }
.person h3 { font-size: var(--t-h4); margin-top: 20px; font-weight: 400; letter-spacing: -0.02em; }
.person p { color: var(--ink-soft); margin-top: 6px; font-size: 14px; }
/* Taught by people: one framed screen under the banner, photos sized to fit it */
.band.experts { height: calc(100vh - var(--hold)); min-height: 560px; padding: clamp(24px, 5vh, 64px) 0; display: flex; flex-direction: column; justify-content: center; }
.experts .band-head { margin-left: 0; margin-bottom: clamp(16px, 3.5vh, 44px); }
.experts .band-head h2 { font-size: clamp(36px, min(5.6vw, 9vh), 96px); }
.experts .track { flex: none; }
.experts .person { flex-basis: auto; width: calc(min(40vh, 480px) * .85); }
.experts .person .ph { aspect-ratio: auto; height: min(40vh, 480px); }
.experts .person h3 { margin-top: 14px; }
.experts .hdots { margin-top: clamp(16px, 3vh, 32px); }
.hdots { display: flex; gap: 6px; margin-top: 40px; padding: 0 var(--inner); }
.hdots span { width: 6px; height: 6px; border-radius: 1px; background: rgba(12, 53, 92, .2); transition: background .3s, width .5s var(--ease); }
.hdots span.on { background: var(--teal-deep); width: 24px; }

/* ---------- the practical: Copilot and Claude tiles (from the first draft) ---------- */
.tools { padding: 0 0 var(--sec); }
.tools { padding-top: var(--sec); }
.tools > .wrap::after { content: ""; display: block; border-top: 1px solid var(--line); margin-top: var(--sec); } /* draft 8.1: the line now sits under the tools, above the people */
.tools-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vh, 72px); }
.tools-head h2 { font-size: var(--t-h2); }
.tools-head p { margin-top: 20px; color: var(--ink-soft); font-size: 18px; font-weight: 300; }
.tool-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tool-card { background: var(--cream); border-radius: var(--r-xl); padding: 24px 24px 40px; display: flex; flex-direction: column; }
.tool-card .art { border-radius: var(--r-l); aspect-ratio: 2 / 1; max-height: 34vh; display: grid; place-items: center; }
.tool-card .art img { width: clamp(64px, 16%, 112px); height: auto; transition: transform 1.2s var(--ease); }
.tool-card:hover .art img { transform: rotate(-6deg); }
.art.copilot { background: radial-gradient(70% 70% at 30% 30%, #d9ecff 0%, transparent 70%), radial-gradient(70% 70% at 80% 80%, #e6f9f0 0%, transparent 70%), #f1f5fa; }
.art.claude { background: radial-gradient(70% 70% at 30% 30%, #ffe7dc 0%, transparent 70%), radial-gradient(70% 70% at 80% 80%, #fff3dc 0%, transparent 70%), #faf5f0; }
.tool-card h3 { font-size: var(--t-h3); margin: 32px 16px 0; font-weight: 400; letter-spacing: -0.03em; }
.tool-card p { margin: 16px 16px 0; color: var(--ink-soft); }
.tool-card .btn { margin: 28px 16px 0; align-self: flex-start; }

/* ---------- results: picture pinned, figures scroll past ---------- */
.impact { padding: var(--sec) 0; background: var(--cream); }
.impact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 112px); }
.impact-pic { position: sticky; top: 14vh; height: 72vh; border-radius: var(--r-l); overflow: hidden; background: #e8eef3; isolation: isolate; }
.impact-pic .aura { inset: -30%; filter: blur(60px); }
.impact-pic .aura span { opacity: .5; }
.impact-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }
.impact-pic img.cut { object-fit: contain; object-position: bottom; }
.impact-pic img.on { opacity: 1; }
.impact-pic img.train { object-position: 100% 50%; } /* the man sits about 15% of the frame further left */
.impact-head h2 { font-size: var(--t-h1); }
.figure { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.figure .big { font-size: clamp(96px, 11vw, 192px); font-weight: 300; letter-spacing: -0.06em; line-height: .9; }
.figure p { font-size: var(--t-h4); font-weight: 300; margin-top: 20px; max-width: 520px; letter-spacing: -0.01em; }
.figure .who { margin-top: 18px; }
.quote { padding-top: 72px; }
.quote blockquote { margin: 0; font-size: var(--t-h4); line-height: 1.3; letter-spacing: -0.015em; font-weight: 300; }
.quote .by { margin-top: 24px; font-size: 14px; }
.quote .by b { display: block; }
.quote .by span { color: var(--ink-soft); }

/* ---------- customers ---------- */
.qcard { flex: 0 0 clamp(300px, 38vw, 560px); scroll-snap-align: start; background: var(--cream); border-radius: var(--r-l); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; min-height: 360px; }
.qcard blockquote { margin: 0; font-size: var(--t-h4); line-height: 1.3; letter-spacing: -0.015em; font-weight: 300; }
.qcard .by { display: flex; gap: 14px; align-items: center; margin-top: 40px; font-size: 14px; }
.qcard .by img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #fff; }
.qcard .by b { display: block; }
.qcard .by span span { color: var(--ink-soft); }
.arrows { display: flex; gap: 6px; }
.arrows button { width: 40px; height: 40px; border-radius: var(--r-s); border: 0; background: rgba(12, 53, 92, .07); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.arrows button:hover { background: var(--ink); color: #fff; }

/* ---------- timeline: held on screen until its line has filled, then let go ---------- */
.why { position: relative; height: calc(100vh - var(--hold) + 150vh); }
.why-stick { position: sticky; top: var(--hold); height: calc(100vh - var(--hold)); display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: clamp(16px, 4vh, 48px) 0; }
.why-stick > .aura { inset: -20%; }
.why-stick > .aura span { opacity: .5; }
.why-stick > .wrap { width: 100%; }
.why-head { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: "h pic" "h p"; gap: 20px 40px; align-items: start; }
.why-head > div:first-child { grid-area: h; }
.why-head > p { grid-area: p; }
/* the picture sits above the paragraph, its top level with the heading's */
.why-pic { grid-area: pic; margin-top: 0; height: clamp(150px, 30vh, 340px); border-radius: var(--r-l); overflow: hidden; }
.why-pic { position: relative; }
.why-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.why-pic img.on { opacity: 1; }
/* product pictures sit whole on a pale panel, each fading in as the timeline reaches its date */
.why-pic img.mock { object-fit: contain; padding: 3% 5%; background: #eef4f7; box-sizing: border-box; }
.why-head h2 { font-size: clamp(40px, 4.4vw, 76px); }
.why-head h2 b { font-weight: 500; }
.why-head p { color: var(--ink-soft); max-width: 460px; }
.timeline { position: relative; margin-top: clamp(32px, 8vh, 88px); }
.tl-line { position: absolute; left: 0; right: 0; top: 2.5px; height: 4px; border-radius: 2px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; height: 4px; top: 0; border-radius: 2px; background: var(--teal); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tl-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
.tl-item { opacity: .2; transform-origin: left top; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.tl-item.now { transform: scale(1.14); }
.tl-item.on { opacity: 1; }
.tl-item .dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px var(--paper); }
.tl-item .date { margin-top: 24px; color: var(--mute); }
.tl-item.now .date { color: var(--ink-soft); }   /* the current item sits on the teal wash: 4.6:1 (checklist 165) */
.tl-item h4 { font-size: 20px; font-weight: 400; letter-spacing: -0.015em; margin-top: 14px; }
.tl-item p { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }

/* ---------- how else we can support you: four tiles in a row ---------- */
.offer { position: relative; }
.offer-stick { padding: var(--sec) 0; }
.offer h2 { font-size: var(--t-h1); margin-bottom: clamp(32px, 5vh, 56px); }
.offer-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.offer-row { display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; text-decoration: none; }
.offer-row .n { padding-top: 6px; color: var(--mute); }
.offer-row .pic { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3; max-height: 48vh; width: 100%; background: var(--cream); }
.offer-row .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.offer-row:hover .pic img { transform: scale(1.04); }
.offer-row > span:last-child { grid-column: 2; padding-top: 24px; }
.offer-row h3 { font-size: var(--t-h3); }
.offer-row p { margin-top: 10px; color: var(--ink-soft); }
.offer-row .more { margin-top: 20px; display: inline-flex; gap: 10px; align-items: center; font-weight: 500; }
.offer-row .more svg { transition: transform .4s var(--ease); }
.offer-row:hover .more svg { transform: translateX(6px); }

/* ---------- colour call to action ---------- */
.expr { position: relative; overflow: hidden; isolation: isolate; padding: clamp(120px, 14vw, 220px) 0 clamp(56px, 7vw, 96px); background: #eef2f3; }
.expr .wrap { text-align: left; }
.expr h2 { font-size: var(--t-display); line-height: .95; max-width: 1200px; letter-spacing: -0.05em; }
.expr p { margin-top: 32px; max-width: 480px; color: var(--ink-soft); }
.expr .btns { display: flex; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.expr .strip { margin-top: clamp(48px, 6vw, 80px); padding: 18px 0; border-top: 1px solid rgba(12, 53, 92, .14); }
.words { display: flex; gap: 40px; padding-right: 40px; white-space: nowrap; align-items: center; }
.words i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; }

/* ---------- closing product call to action ---------- */
/* the soft-colour frame behind the closing card: rounded and clipped, so its colour stops at the edge */
.stage { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; aspect-ratio: 1.3; display: grid; place-items: center; padding: 7%; }
.stage .aura { inset: -25%; filter: blur(60px); }
.stage .aura span { opacity: .6; }
.closer { padding: var(--sec) 0; }
.closer .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 112px); align-items: center; }
.closer h2 { font-size: clamp(36px, 4.6vw, 72px); }
.closer h2 .line { display: block; white-space: nowrap; } /* two lines: "Start with the" / "Alignment Index." (draft 7.44) */
.closer p { margin-top: 28px; color: var(--ink-soft); max-width: 360px; }
.closer h2 + p { max-width: 440px; font-size: 18px; } /* the intro, not the window's note (draft 7.44) */
.closer .btn { margin-top: 36px; }
.closer .stage { aspect-ratio: auto; padding: clamp(32px, 4vw, 64px); } /* sized by its window, so the window is never clipped (draft 7.44) */
.closer .stage .window { transform: none; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 88px 0 40px; transform: translateY(var(--fy, 0)); transition: transform 1.2s var(--ease); }
.footer .cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 40px; }
.footer h3 { font: 500 var(--t-mono)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; color: #9fb3c6; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.footer ul a { text-decoration: none; opacity: .85; }
.footer ul a:hover { opacity: 1; }
.footer form { display: flex; gap: 6px; }
.footer form .btn { border: 0; padding: 0 22px; cursor: pointer; }
.footer input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; padding: 0 18px; font: inherit; font-size: 14px; }
.footer input::placeholder { color: #9fb3c6; }
.footer .big-logo { margin-top: 112px; display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: 13px; color: #9fb3c6; }
.footer .big-logo img { height: clamp(56px, 9vw, 140px); width: auto; filter: brightness(0) invert(1); }
.footer details summary { list-style: none; pointer-events: none; }
.footer details summary::-webkit-details-marker { display: none; }

/* ---------- motion start states, only when the script is running ---------- */
.js [data-split] .ln { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .1em 0; margin: 0 -.08em -.1em 0; }
.js [data-split] .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 100ms); }
.js [data-split].in .ln > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .aura span, .marquee-track, .check .st.wait { animation: none !important; }
  .js [data-split] .ln > span { transform: none !important; transition: none !important; }
  .curtain { height: auto; }
  .curtain-stick { position: relative; height: auto; display: grid; gap: 24px; padding: 40px var(--gutter); }
  .cur-main { position: relative; clip-path: none; height: 70vh; border-radius: var(--r-xl); }
  .cur-line { position: static; transform: none; opacity: 1; width: auto; }
  .cur-tile { display: none; }
  .cur-main { clip-path: none; }
  .cur-card { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: -30vh auto 0; }
  .tl-item { opacity: 1; }
  .tl-line i { transform: scaleX(1); }
  .tab .prog { display: none; }
  .tl-item.now { transform: none; }
  .why { height: auto; }
  .why-stick { position: relative; height: auto; padding: var(--sec) 0; }
  .ld-ring.k svg { animation: none !important; }
  .js .loading .ld-ring.c .rf { stroke-dasharray: 72 100; transition: none; }
  .js .loading .ld-ring.k .rf { stroke-dasharray: 19 100; transition: none; }
  .js .loading .ld-ring b { opacity: 1; transition: none; }
  .js .loading .ld-ok { opacity: 1; transition: none; }
  .js .loading .ld-ring .rf { opacity: 1; }
}

/* short laptop screens: the Measure window tightens so the method card fits under the menu */
@media (min-width: 768px) and (max-height: 720px) {
  .method-card .window-bar { padding: 8px 16px; }
  .method-card .window-body { padding: 12px 18px; }
  .method-card .team-rows { gap: 5px; margin-top: 8px; }
  .method-card .team-row .pair span { height: 8px; }
  .method-card .sample { margin-top: 8px; }
}

@media (max-width: 1100px) {
  .nav ul, .nav .right > a:not(.btn) { display: none; }
  .menu-btn { display: grid; place-items: center; margin-left: auto; }
  .nav { min-width: min(66.667vw, calc(100vw - 2 * var(--gutter))); }
  .nav.open ul { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--cream); border-radius: var(--r-xl); box-shadow: 0 14px 34px -20px rgba(12, 53, 92, .4); padding: 24px 24px 32px; gap: 20px; font-size: 20px; }
  .pane, .closer .wrap { grid-template-columns: 1fr; }
  .tl-items { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .bs { grid-template-columns: 160px 1fr; }
  .fd-top { grid-template-columns: 1fr; grid-template-areas: "copy" "win" "nums"; }
  .offer-list { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
}

@media (max-width: 767px) {
  .nav .btn { display: none; }
  .nav { width: calc(100vw - 32px); min-width: 0; max-width: none; }
  .nav .wrap { padding: 0 6px 0 18px; }
  .method-hold .cur-main { display: none; }
  .cur-line { position: static; transform: none; opacity: 1 !important; width: auto; padding: 28px var(--gutter) 24px; font-size: 26px; }
  .method-hold .cur-card.method-card { margin-top: 0; }
  .fd-top { gap: 24px; }
  .fd-nums, .fd-top > .fd-nums { grid-template-columns: 1fr; }
  .fd-foot { flex-direction: column; align-items: start; }
  .fd-foot p { white-space: normal; text-align: left; }
  .fd-num { flex-direction: column; align-items: start; gap: 8px; }
  .statement .wrap, .trust .wrap, .impact-grid, .why-head { grid-template-columns: 1fr; }
  .why-head { grid-template-areas: "h" "pic" "p"; }
  .why-pic { margin-top: 0; height: 46vw; }
  .method-head { flex-direction: column; align-items: start; }
  .legend { flex-wrap: wrap; }
  .offer-list { grid-template-columns: 1fr; }
  .offer-row { grid-template-columns: 1fr; }
  .offer-row .n { padding: 0 0 10px; }
  .offer-row > span:last-child { grid-column: 1; }
  .cur-tile { display: none; }
  .cur-main { clip-path: none; }
  .curtain { height: auto; }
  .curtain-stick { position: relative; height: auto; overflow: visible; padding: 0 0 40px; }
  .cur-main { position: relative; height: 70vh; overflow: hidden; }
  .cur-card, .cur-card.method-card { position: relative; left: auto; top: auto; width: auto; margin: -24vh 12px 0; transform: none; opacity: 1; }
  .bs { grid-template-columns: 1fr; min-height: 0; }
  .bs .portrait { aspect-ratio: 1.7; max-height: 30vh; min-height: 0; width: 100%; }
  .bs .finds { grid-template-columns: 1fr; }
  .fd-num b { font-size: 56px; }
  .impact-pic img.train { object-position: 78% 50%; }
  .tool-cards { grid-template-columns: 1fr; }
  .tool-card { padding: 16px 16px 32px; }
  .tool-card h3, .tool-card p, .tool-card .btn { margin-left: 8px; margin-right: 8px; }
  .tools-head { text-align: left; }
  .why { height: auto; }
  .why-stick { position: relative; height: auto; padding: var(--sec) 0; }
  .band-head { flex-direction: column; align-items: start; }
  .band.experts { height: auto; min-height: calc(100svh - var(--bar)); }
  .experts .person { width: 78vw; }
  .experts .person .ph { height: 46svh; }
  .row-head .arrows { display: none; }
  .impact-pic { position: relative; top: 0; height: 56vh; }
  .figure { min-height: 0; padding: 48px 0; }
  .tl-line { display: none; }
  .tl-items { grid-template-columns: 1fr; border-left: 1px solid var(--line); padding-left: 24px; margin-left: 4px; }
  .tl-item { opacity: 1; }
  .tl-item .dot { margin-left: -29px; }
  .tl-item .date { margin-top: -10px; }
  .prove-grid { grid-template-columns: 1fr; }
  .stage, .closer .stage { aspect-ratio: auto; padding: 24px 16px; }
  .bar { grid-template-columns: 92px 1fr 44px; font-size: 12px; }
  .footer .cols { grid-template-columns: 1fr; gap: 0; }
  .footer details { border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 18px 0; }
  .footer details summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; }
  .footer details summary::after { content: "+"; font-size: 20px; line-height: 1; }
  .footer details[open] summary::after { content: "\2212"; }
  .footer details h3 { margin: 0; }
  .footer details ul { margin-top: 16px; }
  .footer .news { margin-top: 32px; }
  .footer .big-logo { flex-direction: column; align-items: start; }
}


/* ---------- draft 8.1 (Oli's notes on 7.45, with Adam's 30 Oct notes) ---------- */

/* What we found: the headline takes the whole left column; the Alignment Index window, as in 7.45, on the right
   with the two figures under it */
.fd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "copy win" "copy nums"; row-gap: clamp(12px, 2vh, 24px); align-items: stretch; }
.fd-copy { grid-area: copy; align-self: center; }
.fd-top > .loading { grid-area: win; }
.fd-top > .fd-nums { grid-area: nums; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
.fd-top > .fd-nums .fd-num b { font-size: clamp(40px, min(3.4vw, 8vh), 64px); } /* sized to the half-width tiles, so "3 in 10" fits on big screens */
.fd-copy h2 { font-size: clamp(44px, min(4.5vw, 11vh), 78px); line-height: .95; } /* capped so "Their judgement" fits the left column; the card stops growing at 1320px */
/* draft 8.2: the heading grows to fill the left column's height (Oli: "fill more of the vertical space"); sized to the column's width so "Their judgement" still fits */
.fd-copy { container-type: inline-size; }
.fd-copy h2 { font-size: clamp(44px, min(14.2cqi, 14vh), 150px); line-height: .98; }
/* the copy column takes more of the card's width so the four-line heading can grow (Oli: "use some of that horizontal space") */
@media (min-width: 1101px) { .fd-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .fd-top { grid-template-columns: 1fr; grid-template-areas: "copy" "win" "nums"; }
  .fd-copy h2 { font-size: clamp(40px, min(7vw, 9vh), 72px); }
}
@media (max-width: 767px) { .fd-top > .fd-nums { grid-template-columns: 1fr; } .fd-copy h2 { white-space: normal; font-size: 40px; } }

/* Adam: the three headshots at one scale (as draft 7.5) */
.experts .person .ph img.hs-james { scale: 1.4; transform-origin: 50% 59%; }

/* Adam: a source under every figure; "link to add" ones wait for Oli (as draft 7.5) */
.figure .who a.src { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.figure .who a.src:hover { color: var(--ink); }
.figure .who a.src.todo { text-decoration-style: dashed; color: var(--sun-deep); }

/* Adam: no compliance on the tiles (as draft 7.5) */
.offer-row .pic img.pic-woman { object-position: 50% 20%; background: #eef4f7; }
.offer-row .pic img.pic-lead { scale: 1.55; transform-origin: 92% 35%; }

/* Foundations, drawn: six lesson tiles; one is picked and opens into a drawn lesson player (no presenter photo) */
.lessons { grid-template-columns: repeat(3, 1fr); }
.ltile { position: relative; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ltile .lart { width: 26px; aspect-ratio: 1; margin-bottom: 5px; border-radius: 8px; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--c) 28%, #fff); }
.ltile .lart svg { width: 70%; }
.lmeta { font-size: clamp(8px, .65vw, 10px); color: var(--ink-soft); letter-spacing: .02em; }
.lname { font-size: clamp(9px, .8vw, 12px); line-height: 1.2; color: var(--ink); font-weight: 500; }
.lessons.hov .ltile.pick { transform: scale(1.04); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px var(--teal), 0 14px 30px -12px rgba(12, 53, 92, .35); }
.lessons.press .ltile.pick { transform: scale(.97); }
.lopen { background: #f7f5f1; box-shadow: inset 0 0 0 1px var(--line); }
.lopen .lslide { position: absolute; inset: 0 0 22px; padding: 6% 7%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6%; align-items: center; }
.lopen .lslide .lt { display: grid; gap: 8px; }
.lopen .lslide .lt b { font-size: clamp(12px, 1.2vw, 18px); font-weight: 500; color: var(--ink); line-height: 1.15; }
.lopen .lslide .lt i { display: block; height: 7px; border-radius: 4px; background: #dcd7ce; width: var(--w); }
.lopen .lslide .lg { aspect-ratio: 1; border-radius: 14px; background: color-mix(in srgb, var(--sky) 26%, #fff); display: grid; place-items: center; color: var(--ink); }
.lopen .lslide .lg svg { width: 60%; }
.lbar { background: none; color: var(--ink); padding: 10px 18px 14px; }
.lp { background: #dcd7ce; }

/* Ada, drawn: a lesson slide with Ada's chat beside it; the messages arrive one after another when the tab opens */
.ada-draw { display: grid; grid-template-columns: .8fr 1.4fr; gap: 14px; background: #f7f5f1; padding: 14px; }
.ad-lesson { background: var(--paper); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 10% 10%; display: flex; flex-direction: column; gap: 7px; position: relative; }
.ad-title { font-size: clamp(11px, 1vw, 15px); font-weight: 500; color: var(--ink); line-height: 1.15; margin-bottom: 4px; }
.ad-line { display: block; height: 6px; border-radius: 3px; background: #e6e1d8; width: var(--w); }
.ad-pic { margin-top: auto; width: 40%; aspect-ratio: 1; border-radius: 10px; background: color-mix(in srgb, var(--sun) 30%, #fff); display: grid; place-items: center; color: var(--ink); }
.ad-pic svg { width: 64%; }
.ad-chat { display: flex; flex-direction: column; justify-content: center; gap: 7px; font-size: clamp(9px, .74vw, 11px); }
.ad-who { display: flex; align-items: center; gap: 6px; font-size: .95em; font-weight: 500; color: var(--ink); }
.ad-who i { width: .8em; height: .8em; border-radius: 50%; background: var(--teal); }
.ad-chat p { margin: 0; padding: .55em .85em; border-radius: 12px; line-height: 1.3; max-width: 92%; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ad-chat .me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.ad-chat .ada { align-self: flex-start; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 4px; }
.pane.on .ad-chat p { opacity: 1; transform: none; }
.pane.on .ad-chat p:nth-of-type(1) { transition-delay: .5s; }
.pane.on .ad-chat p:nth-of-type(2) { transition-delay: 1.7s; }
.pane.on .ad-chat p:nth-of-type(3) { transition-delay: 2.9s; }
@media (prefers-reduced-motion: reduce) { .ad-chat p { opacity: 1; transform: none; transition: none; } }

/* The judgement layer: Multiverse's "layer" section in our words. Words on the left, three layers on the right
   with the judgement layer between the tools and the people */
.judge { background: var(--cream); padding: var(--sec) 0; }
.judge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 112px); align-items: center; }
.judge-joke { font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; color: var(--ink-soft); line-height: 1.35; max-width: 520px; margin: 0 0 clamp(20px, 3vh, 32px); }
.judge-joke em { font-style: normal; color: var(--ink); font-weight: 400; display: block; margin-top: 4px; }
.judge h2 { font-size: var(--t-h2); }
.judge-line { margin-top: clamp(20px, 3vh, 28px); font-size: 18px; font-weight: 300; color: var(--ink-soft); max-width: 540px; }
.layers { display: grid; gap: 14px; }
.layer { border-radius: var(--r-xl); padding: clamp(18px, 2vw, 28px); display: grid; gap: 14px; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(12, 53, 92, .35); }
.layer .lab { font-size: 15px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.layer .lab b { font-size: clamp(22px, 2vw, 30px); font-weight: 500; color: var(--ink); letter-spacing: -0.03em; }
.layer .lab .sub { flex-basis: 100%; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 7px 14px; border-radius: 999px; background: var(--cream); color: var(--ink); }
.chip img { width: 18px; height: 18px; object-fit: contain; }
.chip.dim { color: var(--ink-soft); background: none; box-shadow: inset 0 0 0 1px var(--line); }
.l-judge { background: var(--ink); padding: clamp(24px, 2.6vw, 36px); box-shadow: 0 30px 60px -28px rgba(12, 53, 92, .55); }
.l-judge .lab, .l-judge .lab b { color: #fff; }
.l-judge .lab .sub { color: var(--teal); }
.l-judge .chip { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(44, 209, 177, .5); }
.l-tools, .l-people { margin: 0 clamp(16px, 2vw, 32px); }
@media (max-width: 767px) {
  .judge-grid { grid-template-columns: 1fr; }
  .l-tools, .l-people { margin: 0 10px; }
  .ada-draw { grid-template-columns: 1fr; aspect-ratio: auto; }
  .ad-lesson { display: none; }
  .ad-chat { font-size: 13px; }
  .lmeta { font-size: 9px; } .lname { font-size: 10px; }
}
.lopen .lplay { box-shadow: 0 8px 24px -6px rgba(12, 53, 92, .35); }

/* ---------- draft 8.2: the judgement layer as a still sculpture (an inline SVG) ---------- */
.sculpt { display: grid; place-items: center; }
.sculpt-svg { display: block; width: min(100%, 440px); height: auto; }
@media (max-width: 900px) { .sculpt-svg { width: min(80%, 340px); } }

/* carried over from draft 8.1 at 12:12: made in 8.1 at about 12:05, after 8.2 had been copied from it */
/* draft 8.1 (Oli): the four product windows in the method (Measure, Foundations, Ada, Prove) are all one size. The panes
   share one grid cell, so each window stretches to the tallest one and its content sits in the middle */
.method-card .pane .shot { align-self: stretch; display: flex; flex-direction: column; }
.method-card .shot > .window-body { flex: 1; }
.method-card .shot > .window-body:not(.lessons):not(.ada-draw):not(.prove-grid) { display: flex; flex-direction: column; justify-content: center; }
.method-card .lessons { align-content: center; }
.method-card .prove-grid { align-items: center; }
@media (max-width: 767px) {
  .method-card .pane .shot { align-self: start; height: 390px; }
  .method-card .cert { padding: 14px; }
  .method-card .cert img { width: 34px; margin-bottom: 6px; }
  .method-card .cert .t3 { margin-top: 6px; }
}

/* ---------- draft 8.3: the judgement layer as flat white cutouts; only the slab moves ---------- */
.sculpt-svg { overflow: visible; filter: drop-shadow(0 18px 30px rgba(12, 53, 92, .12)); }
.sculpt .cut { fill: #fff; }
.sculpt .slab-edge { fill: none; stroke: #fff; stroke-width: 1.5; }
/* the slab carries the hero's colour wash: the same colours, blur, grain and quick drift, scaled to the slab */
.sc-box { position: relative; width: min(100%, 440px); }
.sc-box .sculpt-svg { width: 100%; position: relative; z-index: 1; }
.sculpt .cut { filter: drop-shadow(0 14px 22px rgba(12, 53, 92, .12)); }
.sculpt-svg { filter: none; }
.slab-wrap { position: absolute; left: 5.88%; top: 36.89%; width: 88.24%; height: 22.67%; filter: drop-shadow(0 16px 24px rgba(12, 53, 92, .16)); }
.slab { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #eef2f3;
  clip-path: polygon(0% 39.2%, 50% 0%, 100% 39.2%, 100% 60.8%, 50% 100%, 0% 60.8%); }
.slab .aura { inset: -30%; filter: blur(18px) saturate(1.3); }
.slab .aura span { opacity: .85; }
.slab .aura .a1 { width: 60%; height: 90%; left: -5%; top: 20%; animation: s1 7s ease-in-out infinite alternate; }
.slab .aura .a2 { width: 56%; height: 85%; right: -5%; top: 0; animation: s2 8s ease-in-out infinite alternate; }
.slab .aura .a3 { width: 50%; height: 75%; left: 30%; bottom: -10%; animation: s3 6s ease-in-out infinite alternate; }
.slab .aura .a4 { width: 30%; height: 50%; right: 15%; bottom: 5%; opacity: .55; animation: s2 7.5s ease-in-out infinite alternate-reverse; }
.slab .aura .a5 { width: 36%; height: 60%; left: 22%; top: 5%; opacity: .6; animation: s1 6.5s ease-in-out infinite alternate-reverse; }
@keyframes s1 { 33% { transform: translate(70%, -15%) scale(1.25) rotate(30deg); } 66% { transform: translate(30%, 25%) scale(.85) rotate(-15deg); } 100% { transform: translate(95%, 10%) scale(1.15) rotate(45deg); } }
@keyframes s2 { 33% { transform: translate(-75%, 20%) scale(.8) rotate(-25deg); } 66% { transform: translate(-25%, 35%) scale(1.3) rotate(20deg); } 100% { transform: translate(-90%, -8%) scale(1) rotate(-40deg); } }
@keyframes s3 { 33% { transform: translate(-60%, -30%) scale(1.3); } 66% { transform: translate(45%, -12%) scale(.9); } 100% { transform: translate(-15%, -35%) scale(1.2); } }
.slab .grain { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .slab .aura span { animation: none; } }
@media (max-width: 900px) { .sc-box { width: min(80%, 340px); } }

/* ---------- draft 8.4: the judgement layer as a four-layer pyramid (Oli): people, judgement, tools, output ---------- */
.py-box { position: relative; width: min(100%, 460px); }
.py-svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; overflow: visible; }
.py-svg .cut { fill: #fff; filter: drop-shadow(0 12px 20px rgba(12, 53, 92, .1)); }
.py-svg .edge { fill: none; stroke: #fff; stroke-width: 1.5; }
.pyr .slab-wrap { position: absolute; }
.pl { position: absolute; left: 0; right: 0; z-index: 2; transform: translateY(-50%); text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; pointer-events: none; }
@media (max-width: 900px) { .py-box { width: min(86%, 360px); } }
/* draft 8.4 (Oli): "Their" on its own line, so the widest line is now "isn't there yet." and the headline can be about 20% bigger */
.fd-copy h2 { font-size: clamp(44px, min(17cqi, 13vh), 160px); }
@media (max-width: 1100px) { .fd-copy h2 { font-size: clamp(40px, min(8vw, 9vh), 80px); } }
@media (max-width: 767px) { .fd-copy h2 { font-size: 44px; } }
/* draft 8.4 (Oli): the right column slightly wider without changing the left one. The left column keeps exactly the width
   it had (its 1.3 share with the old gap); the gap between them halves and the right column takes the difference */
@media (min-width: 1101px) {
  .fd-top { grid-template-columns: minmax(0, calc((100% - clamp(32px, 5vw, 96px)) * 1.3 / 2.3)) minmax(0, 1fr); column-gap: calc(clamp(32px, 5vw, 96px) / 2); }
}
/* draft 8.4 (Oli): "judgement" underlined (tried bold, then italic). Not italic; the line skips the descenders of j and g */
.fd-copy h2 em.fd-em { font-style: normal; font-weight: inherit; text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .12em; text-decoration-skip-ink: auto; }
/* the headline's words are split into masked pieces for the rise-in, and an underline doesn't reach into them, so each piece of "judgement" carries its own */
.js .fd-copy h2 em.fd-em .ln > span { text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .12em; text-decoration-skip-ink: auto; }

/* ---------- draft 8.5: the judgement layer as Multiverse builds its "layer" section (Oli), from the judgement layer tuner ----------
   White, no panel behind the drawing; words on the left; a stack of four flat tiles with rounded corners and a 20px edge, overlapping (Oli, about 13:08: thicker, tighter, a lower camera),
   from the base up people, judgement, tools, output; judgement carries the hero's moving colour; no labels.
   Each tile is a rounded square turned 45° and tilted back 64°, so it shows as a diamond as wide as the tile and cos(64°) = .44 as tall. */
.judge { background: var(--paper); }
.judge h2 { font-weight: 400; letter-spacing: -0.02em; }
.judge h2 .jl-light { font-weight: 300; }
.jt { display: grid; place-items: center; padding: clamp(12px, 3vh, 40px) 0; }
.jt-stack { --tile: min(36vw, 400px, 62vh); --dh: calc(var(--tile) * .44); --step: calc(var(--dh) * .42 + 20px);
  position: relative; width: var(--tile); height: calc(var(--dh) + var(--step) * 3 + 20px); }
.jt-tile { position: absolute; left: 0; width: var(--tile); height: var(--tile); top: calc(var(--n) * var(--step) - (var(--tile) - var(--dh)) / 2);
  filter: drop-shadow(0 8px 14px rgba(12, 53, 92, .12)); }
.jt-walls { position: absolute; inset: 0; }
.jt-side, .jt-face { position: absolute; left: 0; width: 100%; height: 100%; border-radius: 14%; transform: rotateX(64deg) rotateZ(45deg) scale(.7071); }
.jt-face { top: 0; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #ffffff, #f1f3f5); }
.jt-side { background: linear-gradient(90deg, #dfe3e8, #c9cfd6); }
.jt-judge .jt-face { background: linear-gradient(135deg, var(--teal), var(--sky) 55%, var(--sun)); }
.jt-judge .jt-side { background: linear-gradient(90deg, #1f8fb0, #2e4f93); }
.jt .aura { inset: -30%; z-index: -1; filter: blur(22px) saturate(1.3); }
.jt .aura span { opacity: .85; }
.jt .aura .a1 { width: 60%; height: 90%; left: -5%; top: 20%; animation: s1 7s ease-in-out infinite alternate; }
.jt .aura .a2 { width: 56%; height: 85%; right: -5%; top: 0; animation: s2 8s ease-in-out infinite alternate; }
.jt .aura .a3 { width: 50%; height: 75%; left: 30%; bottom: -10%; animation: s3 6s ease-in-out infinite alternate; }
.jt .aura .a4 { width: 30%; height: 50%; right: 15%; bottom: 5%; opacity: .55; animation: s2 7.5s ease-in-out infinite alternate-reverse; }
.jt .aura .a5 { width: 36%; height: 60%; left: 22%; top: 5%; opacity: .6; animation: s1 6.5s ease-in-out infinite alternate-reverse; }
.jt .grain { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .jt .aura span { animation: none; } }
@media (max-width: 900px) { .jt-stack { --tile: min(72vw, 320px); } }
/* a dividing line between the judgement layer and the practical (Oli) */
.tools { padding-top: 0; }
.tools > .wrap::before { content: ""; display: block; border-top: 1px solid var(--line); margin-bottom: var(--sec); }
/* ---------- draft 8.6 (Oli): the judgement layer ----------
   the headline in one weight, as "We build the"; headline and paragraph a step bigger;
   the judgement tile's edge in the same moving colours as its face, not navy; five tiles, three white above judgement */
.judge h2 { font-size: clamp(40px, 4.5vw, 76px); }
.judge h2 .jl-light { font-weight: 400; }
.judge-line { font-size: 20px; max-width: 580px; }
.jt-stack { --tile: min(36vw, 400px, 52vh); height: calc(var(--dh) + var(--step) * 4 + 20px); }
.jt-judge .jt-side { background: linear-gradient(90deg, var(--teal), var(--sky), #fff, var(--sun), var(--teal), var(--sky));
  background-size: 300% 100%; filter: brightness(.94) saturate(1.05); animation: jt-edge 14s linear infinite; }
@keyframes jt-edge { to { background-position: 150% 0; } }
body.still .jt-judge .jt-side { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .jt-judge .jt-side { animation: none; } }
@media (max-width: 900px) { .jt-stack { --tile: min(64vw, 300px); } }
/* draft 8.6 (Oli): Tiffany and Deb cut out of their backgrounds and set on the site's moving colour, as James is;
   each cut-out is already framed so the head sits level with James's, so it fills the frame from the bottom */
.experts .person .ph img.cut.hs-fill { top: 0; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* the colour patches are sized to the screen, so on phones they left the frame part white: the three headshots get a blue base under them */
.experts .person .ph:has(.hs-fill, .hs-james) { background: linear-gradient(150deg, #effafa 0%, #8fe0e2 40%, #3fc4e4 100%); }
/* draft 8.7 (Oli): the timeline's pictures drawn, as the product windows are, except Expert Series' studio photo; a drawing sits on the pale ground with room round it */
.why-pic img.mock[src$=".svg"] { padding: 4% 6%; background: #eef4f7; }
/* draft 8.7 (Oli): the timeline no longer holds the scroll; it steps through on its own (motion.js) */
.why { height: auto; }
.why-stick { position: relative; top: auto; height: auto; padding: var(--sec) 0; }
.tl-line i { transition: none; }
.tl-item { cursor: pointer; }
.tl-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 767px) {
  .tl-item, .tl-item.on { opacity: .45; transition: opacity .5s var(--ease); }
  .tl-item.now { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tl-line i { transform: scaleX(var(--p, 0)); } }

/* ---------- draft 8.8: phones (Oli, 2 Nov: "optimize homepage for mobile"). Phone rules only, so laptops are unchanged ---------- */
@media (max-width: 400px) {
  /* 1. the webinar banner fits on one line at 360 */
  .topbar a { font-size: 13px; letter-spacing: .02em; }
}
@media (max-width: 767px) {
  :root { --sec: 64px; } /* 11. less blank space between sections (was 96px top and bottom) */
  /* 2. the hero's colour across the whole screen, and a little shorter so the strip below peeks in */
  .hero { height: 88svh; min-height: 520px; }
  .hero .aura .a1 { width: 110vw; height: 70vh; left: -30%; top: 10%; }
  .hero .aura .a2 { width: 100vw; height: 55vh; right: -30%; top: -5%; }
  .hero .aura .a3 { width: 110vw; height: 60vh; left: 0; bottom: -5%; }
  .hero .aura .a4 { width: 60vw; height: 35vh; right: -10%; bottom: 15%; }
  .hero .aura .a5 { width: 70vw; height: 40vh; left: 10%; top: 25%; }
  /* 3. no logo in the strip (it's in the menu just above); the tagline takes the width */
  .tagband img { display: none; }
  .tagband .wrap { min-height: 0; }
  .tagband p { font-size: 18px; }
  /* 4. a shorter crowd photo before What we found */
  .zoom .cur-main { height: 48vh; }
  .cur-card.found-card { margin-top: -16vh; }
  /* 5. the in-between line on the page's left edge */
  .cur-line { text-align: left; }
  /* 6. the method's key on one line */
  .legend { flex-wrap: nowrap; gap: 8px; font-size: 14px; }
  .legend .ln { width: 16px; }
  .legend i { margin-right: 6px; }
  /* 7. the method's tabs above the panel, two by two */
  .method-card .panel { display: flex; flex-direction: column; }
  .method-card .tabs { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
  .method-card .tab { width: 100%; padding: 0 8px; height: 40px; font-size: 14px; white-space: nowrap; }
  /* 8. the judgement tiles a quarter smaller */
  .jt-stack { --tile: min(48vw, 225px); }
  .judge-grid { gap: 32px; }
  /* 9. the timeline: the picture fills its card; under it the current date only, and a row of five dots to tap */
  .why-pic { height: auto; aspect-ratio: 4 / 3; }
  .why-pic img.mock, .why-pic img.mock[src$=".svg"] { padding: 2%; }
  .timeline { margin-top: 24px; }
  .tl-items { grid-template-columns: repeat(5, 1fr); gap: 0; border-left: 0; padding: 0 0 112px; margin-left: 0; }
  .tl-item, .tl-item.on, .tl-item.now { position: static; opacity: 1; display: grid; justify-items: center; transform: none; }
  .tl-item .dot { margin: 0; width: 44px; height: 44px; background: none; box-shadow: none; display: grid; place-items: center; }
  .tl-item .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .35; transition: transform .4s var(--ease), opacity .4s var(--ease); }
  .tl-item.on .dot::before { opacity: 1; }
  .tl-item.now .dot::before { transform: scale(1.6); }
  .tl-item .date, .tl-item h4, .tl-item > p:not(.date) { position: absolute; left: 0; right: 0; text-align: left; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
  .tl-item .date { top: 56px; margin: 0; }
  .tl-item h4 { top: 76px; margin: 0; }
  .tl-item > p:not(.date) { top: 106px; margin: 0; }
  .tl-item.now .date, .tl-item.now h4, .tl-item.now > p:not(.date) { opacity: 1; }
  .tl-item:focus-visible { outline-offset: -4px; }
  /* 10. a shorter impact photo */
  .impact-pic { height: 36vh; }
}

/* ---------- draft 8.9: Jen's notes (2 Nov; jen-notes/plan.md) ---------- */
/* 1. the pause button says what it does, on hover and on keyboard focus */
.pause .ic { display: grid; place-items: center; }
.pause-tip { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 7px 11px; border-radius: var(--r-s); background: var(--ink); color: #fff; font: 500 12px/1 "Outfit", sans-serif; letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.pause:hover .pause-tip, .pause:focus-visible .pause-tip { opacity: 1; }
/* 3. line breaks: paragraphs avoid a lone last word; short labels and timeline lines balance */
p, blockquote, li, .lname { text-wrap: pretty; }
.ld-note, .fd-num p, .tl-item h4, .tl-item p, .person p, .kicker { text-wrap: balance; }
/* 6. Adam and Rich cut out, on the same teal and sky as the others */
.experts .person .ph img.cut.hs-team { object-position: 50% 100%; }
/* 7. the timeline's current date grows a little; its words now stay inside their own column at that size */
.tl-item { min-width: 0; }
@media (min-width: 768px) { .tl-item > :not(.dot) { max-width: calc(100% / 1.14); } }
/* 8. each number sits just above its picture, on its left edge */
.offer-row { grid-template-columns: 1fr; }
.offer-row .n { padding: 0 0 10px; }
.offer-row > span:last-child { grid-column: 1; }
/* 10. the carousel arrows under the cards, at the right, on the progress dashes' line (Jen's note 13; Oli's yes, 2 Nov) */
.band-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; padding: 0 var(--inner); }
.band-foot .hdots { margin: 0; padding: 0; }
.experts .band-foot { margin-top: clamp(16px, 3vh, 32px); }
.experts .band-foot .hdots { margin: 0; }

/* ---------- draft 8.10: calm on phones (Oli, 2 Nov: "ours is overcomplicated, theirs is simple and calm"; plan.md, Draft 9 (calm mobile)).
   Phone rules only, so laptops are unchanged ---------- */
@media (max-width: 767px) {
  /* 1. What we found: no white card, no window round the rings, the two figures as plain lines; the survey line hidden */
  .cur-card.found-card { margin: 0; }
  .fd-card { background: none; box-shadow: none; border-radius: 0; padding: 32px var(--inner) 0; }
  .fd-card .loading { background: none; box-shadow: none; border-radius: 0; overflow: visible; margin-top: 24px; }
  .fd-card .loading .window-bar { display: none; }
  .fd-card .loading .window-body { padding: 0; }
  .ld-tools { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .fd-nums, .fd-top > .fd-nums { gap: 0; margin-top: 28px; }
  .fd-num { background: none; border-radius: 0; padding: 18px 0; border-top: 1px solid var(--line); gap: 6px; }
  .fd-num:last-child { border-bottom: 1px solid var(--line); }
  .fd-num b, .fd-top > .fd-nums .fd-num b { font-size: 44px; }
  .fd-foot { margin-top: 24px; }
  .fd-foot p { display: none; }

  /* 2. The method: the repeated line and the key hidden; no panels round the tabs and window */
  .method-hold .cur-line { display: none; }
  .legend { display: none; }
  .cur-card.method-card { margin: 0; }
  .method-in { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; padding: 0; }
  .method-card .method-head { padding: 0 var(--inner); }
  .method-card .panel { background: none; border-radius: 0; padding: 0 var(--inner); }

  /* 3 and 7. Colour holds still outside the hero; the turning 19% ring keeps turning (Oli's follow-up) */
  .sheet .aura span, .jt-judge .jt-side, .marquee-track { animation: none !important; }

  /* 4. Tool training: two plain rows under hairlines, a small logo, one line, a text link */
  .tool-cards { gap: 0; }
  .tool-card { background: none; border-radius: 0; padding: 24px 0; border-top: 1px solid var(--line); }
  .tool-card:last-child { border-bottom: 1px solid var(--line); }
  .tool-card .art { background: none; aspect-ratio: auto; max-height: none; display: block; border-radius: 0; }
  .tool-card .art img { width: 36px; }
  .tool-card h3, .tool-card p, .tool-card .btn { margin-left: 0; margin-right: 0; }
  .tool-card h3 { margin-top: 14px; }
  .tool-card p { margin-top: 8px; }
  .tool-card p + p { display: none; }
  .tool-card .btn.line { background: none; box-shadow: none; padding: 0; height: auto; margin-top: 14px; font-size: 16px; }

  /* 5. Results: the four figures two by two on one screen; sources small and grey */
  .impact-grid > div:last-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .impact-head, .impact .quote { grid-column: 1 / -1; }
  .figure { padding: 20px 0; }
  .figure .big { font-size: 44px; }
  .figure p { margin-top: 8px; }
  .figure .who { margin-top: 8px; }
  .figure .who a.src, .figure .who a.src.todo { color: var(--mute); }

  /* 6. Carousels: swipe only, dots, the testimonial without its box */
  .band .arrows { display: none; }
  .band-head { margin-bottom: 32px; }
  .hdots span, .hdots span.on { width: 6px; border-radius: 50%; }
  .hdots, .band .band-foot { margin-top: 24px; } /* 8.9 moved the arrows under the cards; on phones they're hidden, the dots stay */
  .qcard { background: none; border-radius: 0; padding: 0; min-height: 0; justify-content: flex-start; }
  .qcard .by { margin-top: 24px; }

  /* 9. One button in From feeling ready */
  .expr .btn.line { display: none; }

  /* 8. Six sizes: hero 56, headings 36, figures 44, body 16, small print 13, labels 11 */
  .hero h1 { font-size: 56px; }
  .sheet h2, .method-card .method-head h2, .fd-copy h2, .expr h2, .closer h2, .why-head h2, .band-head h2 { font-size: 36px; }
  .method-card .pane h3, .tool-card h3, .offer h3, .person h3, .tl-item h4 { font-size: 16px; font-weight: 500; letter-spacing: 0; }
  .sheet p, .method-card .pane p, .figure p, .qcard blockquote, .impact .quote blockquote, .tagband p, .m-sub, .closer h2 + p, .fd-num p, .btn, .btn.report { font-size: 16px; }
  .ld-note, .ld-lab, .person p, .qcard .by, .impact .by, .sample, .window-bar, .tl-item > p:not(.date), .offer-row p { font-size: 13px; }
  .mono, .figure .who, .figure .who a.src, .trust-lab, .tl-item .date, .lmeta { font-size: 11px; }
  .pane .kicker, .ld-ok, footer a, footer li, footer summary, footer p { font-size: 13px; }
}

/* ---------- draft 8.11: Oli's notes from his phone (2 Nov; plan.md, Draft 8.11, 2 Nov) ---------- */
.tg-short, .m-foot { display: none; }
/* 7. the judgement tile's face is clipped to its rounded shape in Safari too: a transformed face with a blurred colour wash
   inside spilled past the rounded corners as a flat sheet; the mask makes Safari honour overflow: hidden with the radius */
.jt-face { -webkit-mask-image: -webkit-radial-gradient(white, black); clip-path: inset(0 round 14%); }
@media (max-width: 767px) {
  /* 1 and 2. the strip under the hero: white, one line, shorter words on phones */
  .tagband { background: #fff; }
  .tagband p, .sheet .tagband p { font-size: 14px; white-space: nowrap; }
  .tg-long { display: none; }
  .tg-short { display: inline; }

  /* 3. no crowd photo before What we found */
  .zoom .cur-main { display: none; }
  /* 4. the survey line back, just above Read the full report */
  .fd-foot p { display: block; margin-bottom: 16px; }

  /* 5 and 8. The method: four slides to swipe, the picture first, then its words; dots and a swipe arrow; no tabs, no timer */
  .method-card .tabs { display: none; }
  .method-card .panel { padding: 0; }
  .method-card .panes { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; }
  .method-card .panes::-webkit-scrollbar { display: none; }
  .method-card .pane { flex: 0 0 100%; box-sizing: border-box; padding: 0 var(--inner); scroll-snap-align: start; opacity: 1; visibility: visible; transition: none; gap: 24px; align-items: start; }
  .method-card .pane .shot { order: -1; transform: none; }
  .method-card .pane .kicker { margin-top: 0; }
  .m-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding: 0 var(--inner); }
  .m-foot .hdots { margin: 0; padding: 0; }
  .swipe-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }

  /* 6. the judgement layer: a smaller sculpture beside the heading, the paragraph under both */
  .judge-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 24px 16px; align-items: center; }
  .judge-copy { display: contents; }
  .judge h2 { grid-column: 1; grid-row: 1; }
  .judge .jt { grid-column: 2; grid-row: 1; padding: 0; }
  .judge-line { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .jt-stack { --tile: min(30vw, 130px); }
  /* 7. on phones the colour is still, so the judgement face is its plain gradient, with no wash inside to spill */
  .jt-judge .jt-face .aura, .jt-judge .jt-face .grain { display: none; }

  /* 9. the timeline's picture only takes sideways swipes for itself; up and down still scroll the page */
  .why-pic { touch-action: pan-y; }

  /* 10. Engagement you can see: a narrow photo on the left beside the heading; the figures two by two below */
  .impact-grid { grid-template-columns: 7fr 3fr 10fr; column-gap: 16px; row-gap: 0; }
  .impact-grid > div:last-child { display: contents; }
  .impact-pic { grid-column: 1 / 2; grid-row: 1; height: 200px; align-self: center; }
  .impact-head { grid-column: 2 / 4; grid-row: 1; align-self: center; }
  .impact-head h2 { font-size: 28px; }
  .impact .figure:nth-child(even) { grid-column: 1 / 3; }
  .impact .figure:nth-child(odd) { grid-column: 3 / 4; }
  .impact-grid .figure:nth-child(2), .impact-grid .figure:nth-child(3) { margin-top: 16px; }
  .impact .quote { grid-column: 1 / -1; }

  /* 11. What L&D teams say: each quote on its own tile, the next one showing at the edge */
  .band .qcard { flex: 0 0 84%; margin: 0; background: var(--cream); border-radius: var(--r-l); padding: 24px; min-height: 0; justify-content: space-between; }

  /* 12. From feeling ready to being ready, bigger */
  .expr h2 { font-size: 44px; } /* 48px left "ready" alone on a line at 360 and 390; 44px is the figures size */
}
/* 13. the trusted-by logos glide again on phones (only the hero moved in 8.10); reduced motion still holds them still */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide var(--speed, 48s) linear infinite !important; }
  body.still .marquee-track { animation-play-state: paused !important; }
}

/* ---------- draft 8.12: Oli's notes and the 2 Nov marketing call (plan.md, Draft 8.12, 3 Nov) ---------- */
/* 1. a small arrow under the hero, its glow fading in and out; click to go on to the next section */
.scroll-cue { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: cue 2.4s ease-in-out infinite; z-index: 2; }
.scroll-cue:hover { background: rgba(255, 255, 255, .85); }
@keyframes cue { 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); background: rgba(255, 255, 255, .8); } }
body.still .scroll-cue { animation-play-state: paused; }

/* 5. the strip under the hero: the judgement line, wrapping where it needs to */
.tagband p, .sheet .tagband p { white-space: normal; }

/* 5 and 14. the clients' logos, higher and bigger, where the judgement line was (above the method); no awards in it */
.cur-logos { text-align: left; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; font-size: inherit; }
.cur-logos .trust-lab { margin: 0; }
.cur-logos .logos { gap: 72px; padding-right: 72px; }
.cur-logos .logos img { height: 44px; max-width: 170px; }

/* 9. the two tool cards each in their own AY colour */
.tool-card:nth-child(1) { background: color-mix(in srgb, var(--sky) 16%, #fff); }
.tool-card:nth-child(2) { background: color-mix(in srgb, var(--sun) 20%, #fff); }
.tool-card .art { background: rgba(255, 255, 255, .6); }

/* 12. What learners say: Adam's tile wall, four rows drifting slowly, alternate rows the other way */
.wall { padding: var(--sec) 0; overflow: hidden; }
.wall-sub { margin-top: 12px; color: var(--ink-soft); }
.wall-rows { display: grid; gap: 16px; }
.wall-row .marquee-track { animation-duration: var(--speed); }
.wall-row.rev .marquee-track { animation-direction: reverse; }
.wall-set { display: flex; gap: 16px; padding-right: 16px; }
.wtile { flex: 0 0 300px; margin: 0; background: var(--cream); border-radius: var(--r-l); padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.wtile blockquote { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 300; }
.wtile figcaption { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.wtile figcaption b { display: block; font-weight: 500; color: var(--ink); }

/* 15. one closing section: the headline, the Alignment Index, one green button, the awards in their own row */
.expr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.expr-grid p { margin-top: 0; font-size: 18px; max-width: 440px; }
.expr-stage .window { transform: none; }
.awards { display: flex; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 88px); padding-top: 28px; border-top: 1px solid rgba(12, 53, 92, .14); }
.awards img { height: 72px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .wall-set[aria-hidden="true"] { display: none; }
  .wall-row .marquee-track { width: auto; }
  .wall-set { flex-wrap: wrap; padding: 0 var(--gutter); }
}
@media (max-width: 767px) {
  .scroll-cue { bottom: 40px; }
  .tagband p, .sheet .tagband p { font-size: 16px; }
  .method-hold .cur-line.cur-logos { display: grid; }
  .cur-logos { grid-template-columns: 1fr; gap: 12px; padding: 24px var(--gutter) 20px; }
  .cur-logos .logos { gap: 48px; padding-right: 48px; }
  .cur-logos .logos img { height: 36px; }
  .wtile { flex-basis: 240px; padding: 16px 18px; }
  .wall-rows { gap: 12px; }
  .wall-set { gap: 12px; padding-right: 12px; }
  .expr-grid { grid-template-columns: 1fr; }
  .awards { gap: 20px; justify-content: space-between; }
  .awards img { height: 52px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .wall-row .marquee-track { animation: slide var(--speed) linear infinite !important; }
  .wall-row.rev .marquee-track { animation-direction: reverse !important; }
}
.expr .expr-stage p.sample { margin-top: 14px; font-size: 11px; max-width: none; } /* the window's note, not the section's paragraph */
@media (max-width: 767px) {
  /* 9 on phones: the colour needs its tile back, so the two tool cards are rounded and padded again, with a gap between */
  .tool-cards { gap: 12px; }
  .tool-card, .tool-card:last-child { border: 0; border-radius: var(--r-l); padding: 20px 20px 24px; }
}
/* 6. the opened lesson is James presenting lesson 01 */
.lopen .lhuman { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; border-radius: 0; background: var(--paper); padding: 4%; box-sizing: border-box; }

/* ---------- draft 8.13: Oli's notes on 8.12 (plan.md, Draft 8.13, 3 Nov) ---------- */
/* 18. the hero's arrow is a plain arrow, no pulse */
.scroll-cue { animation: none; box-shadow: none; }
/* 19. the judgement sculpture held in a rounded cream box */
.judge .jt { background: var(--cream); border-radius: var(--r-xl); padding: clamp(20px, 3vh, 36px) clamp(32px, 4vw, 64px); display: grid; place-items: center; }
/* 20. the tool cards back to 8.11: cream cards, each picture panel in its own tint */
.tool-card:nth-child(1), .tool-card:nth-child(2) { background: var(--cream); }
.tool-card .art.copilot { background: radial-gradient(70% 70% at 30% 30%, #d9ecff 0%, transparent 70%), radial-gradient(70% 70% at 80% 80%, #e6f9f0 0%, transparent 70%), #f1f5fa; }
.tool-card .art.claude { background: radial-gradient(70% 70% at 30% 30%, #ffe7dc 0%, transparent 70%), radial-gradient(70% 70% at 80% 80%, #fff3dc 0%, transparent 70%), #faf5f0; }
/* 21. the timeline's real thumbnails sit on white */
.why-pic img.mock { background: #fff; }
/* 23. What learners say on cream, its tiles white, so it doesn't run on from What L&D teams say */
.wall { background: var(--cream); }
.wtile { background: #fff; }
/* 24. the last section: a bigger headline, a smaller window level with the paragraph, the awards centred */
.expr h2 { font-size: clamp(56px, 8.4vw, 136px); }
.expr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; justify-content: space-between; }
.expr-stage .window { max-width: 480px; margin-left: auto; }
.expr-stage .window h4 { font-size: 18px; }
.awards { justify-content: center; }
@media (max-width: 767px) {
  .tool-card:nth-child(1), .tool-card:nth-child(2) { background: none; }
  .tool-cards { gap: 0; }
  .tool-card, .tool-card:last-child { border-radius: 0; padding: 24px 0; border-top: 1px solid var(--line); }
  .tool-card:last-child { border-bottom: 1px solid var(--line); }
  .tool-card .art.copilot, .tool-card .art.claude { background: none; }
  .judge .jt { padding: 14px; border-radius: var(--r-l); }
  .expr h2 { font-size: 44px; } /* 48 and up leave "ready" alone on a line at 390 (draft 8.11) */
  .expr-grid { grid-template-columns: 1fr; }
  .expr-stage .window { max-width: none; }
}

/* ---------- draft 8.14: the judgement sculpture finished (Oli, 3 Nov: "somehow lacks some finish"; plan.md, Draft 8.14) ---------- */
/* 1. the colour layer exactly as in 8.10 (Oli, 3 Nov: "i think we had it right in 8.10"): its own wash and moving sides,
   without 8.11's clip, which cut its rounded corners on laptops; phones keep 8.11's still gradient with no wash */
.jt-face { -webkit-mask-image: none; clip-path: none; }
/* 2. shadows: each tile casts a soft one on the tile below, and the stack one on the ground */
.jt-tile { filter: drop-shadow(0 calc(var(--tile) * .035) calc(var(--tile) * .05) rgba(12, 53, 92, .2)); }
.jt-stack::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: calc(var(--tile) * .14); border-radius: 50%; background: radial-gradient(closest-side, rgba(12, 53, 92, .26), rgba(12, 53, 92, 0)); filter: blur(8px); z-index: -1; }
.jt-stack { isolation: isolate; }
/* 3. the white tiles' sides a step darker, so their edges hold against the cream */
.jt-side { background: linear-gradient(90deg, #d3d9e0, #b8c1cb); }
.jt-face { background: linear-gradient(135deg, #ffffff, #eef1f4); }

/* draft 8.14 (Oli, 3 Nov): What learners say on the site's moving colour, as the closing section; its tiles stay white */
.wall { position: relative; isolation: isolate; background: #eef2f3; }
.wall > .aura { inset: -10%; filter: blur(70px) saturate(1.25); }
.wall > .aura span { opacity: .85; }

/* draft 8.15 (Adam, 3 Nov, accepted by Oli): section headings about 22% smaller and body text up to 20px, laptop and up only.
   Hero headline untouched; phones keep their sizes. Each size is the 8.14 size times about 0.78. */
@media (min-width: 768px) {
  .fd-copy h2 { font-size: clamp(40px, min(13.3cqi, 10.1vh), 124px); }
  .method-card .method-head h2 { font-size: clamp(32px, min(3.75vw, 6.25vh), 62px); }
  .judge h2 { font-size: clamp(36px, 3.5vw, 60px); }
  .tools-head h2 { font-size: clamp(32px, 3.12vw, 53px); }
  .experts .band-head h2 { font-size: clamp(32px, min(4.37vw, 7vh), 75px); }
  .why-head h2 { font-size: clamp(34px, 3.43vw, 59px); }
  .impact-head h2, .band-head h2, .offer h2 { font-size: clamp(36px, 4.37vw, 75px); }
  .expr h2 { font-size: clamp(44px, 6.3vw, 108px); }

  .expr p, .tools-head p, .why-head p, .wall-sub, .judge-line { font-size: 20px; }
  .tool-card p, .offer-row p { font-size: 20px; }
  .method-card .pane p { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .fd-copy h2 { font-size: clamp(40px, min(6.2vw, 7vh), 62px); }
}

/* draft 8.16 (huddle with Adam, 3 Nov): the section after "How else we can support you" ("From feeling ready to being ready.")
   lines up with the sections around it. Its heading was 86px on a laptop (44px on phones) when every other section heading is 60px (36px),
   and its top gap 191px (120px) against the others' 137px (64px). Same heading size and top gap as "How else we can support you" now. */
.expr { padding-top: var(--sec); }
.expr h2 { line-height: 1; letter-spacing: -0.04em; } /* as "What learners say." */
@media (min-width: 768px) { .expr h2 { font-size: clamp(36px, 4.37vw, 75px); } }
@media (max-width: 767px) { .expr h2 { font-size: 36px; } }

/* draft 8.17 (Oli, 4 Nov: "the spacing was all too big, needs to be a touch denser"): every gap between and inside sections about 18% smaller,
   laptops and phones alike. Type sizes and words untouched. The held screens (What we found, the method, the timeline, the experts) keep their
   heights, since they fill one screen as they scroll; their spacing already follows the window. Each value is the 8.16 one times about 0.82. */
:root { --sec: clamp(78px, 8.2vw, 131px); }            /* top and bottom of every section: 137 to 112px at 1366 */
.tools-head { margin-bottom: clamp(33px, 4.9vh, 59px); }
.tools-head p { margin-top: 16px; }
.tool-cards { gap: 20px; }
.quote { padding-top: 59px; }
.quote .by { margin-top: 20px; }
.qcard { padding: clamp(23px, 2.5vw, 36px); }
.qcard .by { margin-top: 33px; }
.band-foot { margin-top: 33px; }
.offer h2 { margin-bottom: clamp(26px, 4.1vh, 46px); }
.offer-row > span:last-child { padding-top: 20px; }
.offer-row p { margin-top: 8px; }
.offer-row .more { margin-top: 16px; }
.judge-joke { margin-bottom: clamp(16px, 2.5vh, 26px); }
.judge-line { margin-top: clamp(16px, 2.5vh, 23px); }
.expr { padding-bottom: clamp(46px, 5.7vw, 79px); }
.expr-grid { margin-top: clamp(26px, 3.3vw, 46px); }
.expr .btns { margin-top: 30px; }
.awards { margin-top: clamp(39px, 4.9vw, 72px); padding-top: 23px; }
.footer { padding: 72px 0 33px; }
.footer .big-logo { margin-top: 92px; }
@media (min-width: 768px) {
  .band-head { margin-bottom: 46px; }
  .experts .band-head { margin-bottom: clamp(13px, 2.9vh, 36px); }
}
@media (max-width: 767px) {
  :root { --sec: 52px; }                               /* 64 to 52px */
  .band-head { margin-bottom: 26px; }
  .hdots, .band .band-foot { margin-top: 20px; }
  .offer-list { row-gap: 39px; }
  .footer .news { margin-top: 26px; }
}

/* draft 8.18 (Oli, 4 Nov, on 8.17: "spacing too big here"): the join between the tool cards and "Taught by people, with AI beside them."
   was 306px at 1366 (216 at 390): the grey line's own section-sized top margin (112), the tools' bottom padding (112), then the experts'
   centring (81). Now the line sits close under the cards and the tools end at the line. The experts screen stays one window tall with its
   content centred on laptops, so its centring alone gives the gap down to the heading (106px at 1366). On phones the experts section is
   already not held, so it drops its full-screen minimum and starts at its own padding (52px from cards to heading). */
.tools { padding-bottom: 0; }
.tools > .wrap::after { margin-top: 24px; }
@media (max-width: 767px) {
  .tools > .wrap::after { margin-top: 16px; }
  .band.experts { min-height: 0; padding-top: 35px; }
}

/* draft 8.18 (Oli, 4 Nov: "the timeline pictures are crap, we should make them look like the how else can we support you pictures"):
   five drawn tiles in the support row's style (photos/tl-*.webp, sources in photos/src). Each is 1440x640 with the device and its shapes
   in the middle 800px, so the laptop frame (about 2.8:1) shows it whole and the phone frame (4:3) crops only empty cream. */
.why-pic { background: #f5f3ef; }
.why-pic img.tile { object-fit: contain; object-position: 50% 50%; padding: 0; background: #f5f3ef; } /* the laptop frame is wider than the tile (about 2.8:1): shown whole, cream either side */
@media (max-width: 767px) { .why-pic img.tile { object-fit: cover; } } /* the phone frame is 4:3: fills it, cropping only empty cream at the sides */

/* draft 8.20 (Oli, 4 Nov: the final section "is too short now, needs to be regular page height ... a lot bigger, and more eye catching,
   but i like the overall cleanness"): the closing section fills the window, its headline back to the big display size of drafts 8.11 to 8.14,
   the line and buttons a step bigger, content centred, the awards at its foot. */
.expr { min-height: calc(100svh - var(--hold)); display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 11vh, 112px) 0 clamp(24px, 4vh, 48px); }
.expr > .wrap { width: 100%; display: flex; flex-direction: column; flex: 1; justify-content: center; }
.expr h2 { font-size: clamp(56px, min(8.4vw, 14.5vh), 144px); line-height: .95; letter-spacing: -0.05em; max-width: 12ch; } /* the display size, kept to the window's height so the section fits one screen */
.expr > .wrap > p { font-size: clamp(18px, 1.6vw, 24px); max-width: 560px; margin-top: clamp(24px, 3vw, 40px); }
.expr .btns { margin-top: clamp(28px, 3vw, 44px); }
.expr .btns .btn { height: 56px; padding: 0 28px; font-size: 17px; }
.expr .awards { margin-top: auto; padding-top: 28px; }
.expr .btns + .awards { margin-top: clamp(36px, 7vh, 112px); }
@media (max-width: 767px) {
  .expr h2 { font-size: 44px; max-width: none; } /* 48 and up leave "ready" alone on a line at 390 (draft 8.11) */
  .expr > .wrap > p { font-size: 18px; }
  .expr .btns .btn { height: 52px; font-size: 16px; }
}

/* draft 8.21 (Oli, 4 Nov: the "Trusted by 1000+ organisations" strips "run the full width of the screen, across all pages, feels a bit weird
   to have that hemmed"): the label stays in the page column, on its own line; the logos slide edge to edge, fading at both sides. */
.cur-logos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cur-logos .marquee { width: 100vw; margin-left: calc(50% - 50vw); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* draft 8.23 (Oli's notes from his screen recording, 4 Nov, about 14:20) */
/* "Trusted by 1000+ organisations" sits just above the moving logos, on the left, lined up with where the strip starts, not the page column */
.cur-line.cur-logos { max-width: none; }
/* "What L&D teams say." and "What learners say." line up with their cards, as "Taught by people" does */
.band:not(.experts) > .band-head, .wall > .band-head { max-width: none; }
/* Taught by people: dots and arrows only when the four cards don't all fit (phones) */
.experts.fits .band-foot { display: none; }
@media (min-width: 768px) {
  /* The AI Confidence Method card bigger */
  .cur-card.method-card { width: min(1760px, 96vw); }
  .method-card .method-head h2 { font-size: clamp(36px, min(4.4vw, 7.4vh), 80px); }
  .method-card .m-sub { font-size: clamp(17px, min(1.5vw, 2.9vh), 26px); }
  .method-card .pane h3 { font-size: clamp(30px, min(3.4vw, 6.6vh), 60px); }
  .method-card .pane p { font-size: clamp(15px, 1.25vw, 19px); }
  .method-card .shot { max-width: calc((100vh - var(--pill) - 16px - 240px) * 1.75); }
  /* We build the judgement layer: heading and layered picture bigger */
  .judge h2 { font-size: clamp(44px, 5vw, 80px); } /* 80 keeps "judgement layer." on one line at 1920 */
  .judge-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .judge .jt { padding-left: clamp(20px, 2vw, 40px); padding-right: clamp(20px, 2vw, 40px); }
  .judge-line { font-size: clamp(20px, 1.6vw, 24px); max-width: 620px; }
  .jt-stack { --tile: min(31vw, 420px, 54vh); } /* was min(36vw, 400px, 52vh); 420 is the most its panel holds at 1920, 54vh keeps one screen at 1366x650 */
  /* From feeling ready to being ready: a clear step bigger */
  .expr h2 { font-size: clamp(64px, min(8.8vw, 16.5vh), 150px); } /* 107px at 1366x650 (was 94), 127 at 1440x900 (was 121); 150 at most, so it stays on two lines in the page column */
}

/* draft 8.24 (Oli's review round 2026-11-04-1526, 4 Nov) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* 1. less space between the "We build the judgement" strip and the office photo: the photo's top starts at 40% of its old inset */
  .zoom .cur-main { clip-path: inset(calc(var(--ci, 18%) * .4) var(--cx, 30%) var(--ci, 18%) var(--cx, 30%) round var(--cr, 16px)); }
}
@media (min-width: 768px) {
  /* 2. "Trusted by 1000+ organisations" moves left, to where the logo strip starts (both sides alike, so the strip stays edge to edge) */
  .cur-line.cur-logos { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (min-width: 768px) and (min-height: 721px) {
  /* 3. The AI Confidence Method card taller: the four windows grow with the screen's height (402px at 1366x768, was 312; 480 at 1440x900, was 330).
     Shorter screens keep 8.23's size. */
  .method-card .pane .shot { min-height: calc(59vh - 51px); }
}

/* draft 8.25 (Oli's review round 2026-11-04-1548, drawings 6 to 8): "This page break can move down slightly, and then we can move this up
   slightly" and "Page break in here". The grey line under the tool cards sits a little lower (48px under the cards, was 24), and
   "Taught by people" comes up to it: on laptops the experts section is no longer one screen tall with its content centred; it takes its
   own height, with a fixed gap above the heading. A matching grey line now closes the section, above "Assemble You, the human side". */
.tools > .wrap::after { margin-top: 48px; }
.band.experts { height: auto; min-height: 0; justify-content: flex-start; padding: clamp(56px, 8vh, 80px) 0 0; }
.experts-rule { margin-top: clamp(48px, 7vh, 72px); }
.experts-rule::after { content: ""; display: block; border-top: 1px solid var(--line); } /* inside the page padding, like the line under the tools */
@media (max-width: 767px) {
  .tools > .wrap::after { margin-top: 24px; }
  .band.experts { padding-top: 40px; }
  .experts-rule { margin-top: 40px; }
}

/* draft 8.26 (Oli, 4 Nov) */
/* 1. body text one step heavier ("everything looks so grainy"): reading text from 300 to 400; headings, big numbers and big display lines stay 300 */
.hero .tagline, .tagband p, .statement p, .m-sub, .pane p, .fd-copy p, .fd-foot p, .fd-num p, .tools-head p, .figure p,
.quote blockquote, .qcard blockquote, .judge-joke, .judge-line, .wtile blockquote { font-weight: 400; }
/* 2. the logo strip snug to "Trusted by" above and the logos below */
@media (min-width: 768px) { .cur-line.cur-logos { top: 16px; } }
@media (max-width: 767px) { .cur-logos { padding-top: 12px; padding-bottom: 12px; } }
/* 3. The AI Confidence Method card (Oli, 4 Nov: "too big now, makes the graphics in the tile seem too small").
   Wide screens (1600px and up) go back to about 8.23's height; 8.24's height stays at 1366x768 and 1440x900.
   Inside the white window the graphics scale with the window (--u is about 6px at 1366x768), so they fill it on all four tabs. */
@media (min-width: 1600px) and (min-height: 721px) {
  .method-card .pane .shot { min-height: clamp(340px, 34vh, 400px); }
}
@media (min-width: 768px) and (min-height: 721px) {
  .method-card .shot > .window-body { container-type: size; --u: min(1cqw, 1.8cqh); }
  /* Measure: the report rows spread down the window, with bigger labels and bars */
  #p-measure .window-body { justify-content: space-between; }
  #p-measure .key-inline { font-size: max(12px, calc(var(--u) * 2.3)); gap: calc(var(--u) * 3); }
  #p-measure .key-inline span::before { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); }
  #p-measure .team-rows { flex: 1; align-content: space-evenly; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.5); }
  #p-measure .team-row { grid-template-columns: calc(var(--u) * 17) 1fr; font-size: max(13px, calc(var(--u) * 2.6)); }
  #p-measure .team-row .pair { gap: calc(var(--u) * .8); }
  #p-measure .team-row .pair span { height: max(10px, calc(var(--u) * 1.8)); border-radius: 99px; }
  #p-measure .sample { font-size: max(12px, calc(var(--u) * 2.3)); margin-top: calc(var(--u) * 1.5); }
  /* Foundations: the six lesson cards fill the window in two rows */
  #p-found .lessons { grid-template-rows: 1fr 1fr; align-content: stretch; gap: calc(var(--u) * 1.6); }
  #p-found .ltile { padding: calc(var(--u) * 2); gap: calc(var(--u) * .6); justify-content: flex-end; }
  #p-found .ltile .lart { width: calc(var(--u) * 7); margin-bottom: auto; border-radius: calc(var(--u) * 1.4); }
  #p-found .ltile .lmeta { font-size: max(10px, calc(var(--u) * 1.9)); }
  #p-found .ltile .lname { font-size: max(12px, calc(var(--u) * 2.6)); }
  /* Prove: the certificate and the bars fill the window's height */
  #p-prove .prove-grid { align-items: stretch; gap: calc(var(--u) * 2.4); }
  #p-prove .cert { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--u) * 3); }
  #p-prove .cert img { width: calc(var(--u) * 13); margin: 0 auto calc(var(--u) * 2); }
  #p-prove .cert .t1, #p-prove .cert .t3 { font-size: max(12px, calc(var(--u) * 2.2)); }
  #p-prove .cert .t2 { font-size: max(19px, calc(var(--u) * 3.4)); margin-top: calc(var(--u) * 1); }
  #p-prove .cert { align-self: center; min-height: 82%; }
  #p-prove .cert .t3 { margin-top: calc(var(--u) * 2); }
  #p-prove .remeasure { display: flex; flex-direction: column; justify-content: center; }
  #p-prove .remeasure h5 { font-size: max(14px, calc(var(--u) * 2.8)); }
  #p-prove .bars { gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
  #p-prove .remeasure .bar { grid-template-columns: calc(var(--u) * 10) 1fr calc(var(--u) * 6.5); font-size: max(12px, calc(var(--u) * 2.3)); gap: calc(var(--u) * 1.6); }
  #p-prove .remeasure .bar .track { height: max(14px, calc(var(--u) * 4)); border-radius: calc(var(--u) * 1); }
  #p-prove .remeasure .bar .num { font-size: max(14px, calc(var(--u) * 3.4)); }
  #p-prove .sample { font-size: max(12px, calc(var(--u) * 2.3)); margin-top: calc(var(--u) * 2.4); }
  /* the opened lesson (a picture of a lesson card, shown whole) as big as the window's height allows */
  #p-found .lopen .lhuman { padding: 1.5%; }
}

/* Certificate on the site (5 Nov): the full-burst certificate Adam picked (round 3, option 2), colours drifting and a shine once it's in view, then every 45s; no float, no tilt (Oli). */
@font-face { font-family: AycGambetta; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/product/gambetta-italic.woff2) format("woff2"); }
.ayc { --ink: #0c355c; --ink-soft: #46607a; --b1: #2cd1b1; --b2: #ffb850; --b3: #3cc6ed; --b4: #4460a9;
  width: 100%; min-width: 0; height: auto; align-self: center; aspect-ratio: 16 / 10; container-type: inline-size; position: relative; color: var(--ink); font-family: Outfit, system-ui, sans-serif; line-height: 1.2; text-align: center; }
.ayc-face { position: absolute; inset: 0; border-radius: 2.2cqw; overflow: hidden; isolation: isolate; background: #eef2f3; box-shadow: 0 0 0 1px rgba(12,53,92,.06), 0 1.6cqw 4cqw rgba(12,53,92,.14); }
.ayc-aura { position: absolute; inset: -15%; z-index: 0; filter: blur(5cqw) saturate(1.15); }
.ayc-aura span { position: absolute; border-radius: 50%; opacity: .78; will-change: transform; }
.ayc-aura .a1 { width: 62cqw; height: 46cqw; left: -8%; top: 22%; background: var(--b1); animation: ayc-d1 11s ease-in-out infinite alternate; }
.ayc-aura .a2 { width: 54cqw; height: 40cqw; right: -10%; top: -6%; background: var(--b2); animation: ayc-d2 13s ease-in-out infinite alternate; }
.ayc-aura .a3 { width: 48cqw; height: 34cqw; left: 30%; bottom: -16%; background: var(--b3); animation: ayc-d3 9s ease-in-out infinite alternate; }
.ayc-aura .a4 { width: 28cqw; height: 22cqw; right: 12%; bottom: 4%; background: var(--b4); opacity: .4; animation: ayc-d1 14s ease-in-out infinite alternate-reverse; }
.ayc-aura .a5 { width: 30cqw; height: 24cqw; left: 22%; top: -6%; background: #fff; opacity: .7; animation: ayc-d2 12s ease-in-out infinite alternate-reverse; }
@keyframes ayc-d1 { to { transform: translate(16cqw, 7cqw) rotate(25deg) scale(1.15); } }
@keyframes ayc-d2 { to { transform: translate(-14cqw, 10cqw) rotate(-20deg) scale(.88); } }
@keyframes ayc-d3 { to { transform: translate(-18cqw, -8cqw) rotate(15deg) scale(1.2); } }
.ayc-grain { position: absolute; inset: 0; z-index: 1; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ayc-panel { position: absolute; inset: 4.2cqw; z-index: 2; border-radius: 1.4cqw; background: rgba(255,255,255,.55);
  display: grid; grid-template-rows: auto 1fr auto; padding: 3.4cqw 4.6cqw 3cqw; box-shadow: 0 .4cqw 1.6cqw rgba(12,53,92,.08); }
.ayc-top { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; }
.ayc-top img { width: 13cqw; height: auto; display: block; margin: 0; }
.ayc-no, .ayc-kicker { font-size: max(1.5cqw, 7px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ayc-kicker { letter-spacing: .3em; }
.ayc-mid { display: grid; align-content: center; justify-items: center; gap: 1.1cqw; }
.ayc-name { font-size: 7.6cqw; font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: .4cqw 0 0; color: var(--ink); }
.ayc-line { width: 30cqw; height: .35cqw; border-radius: 1cqw; background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3)); margin: .6cqw 0; }
.ayc-has { font-size: max(1.8cqw, 8px); color: var(--ink-soft); }
.ayc-course { display: grid; gap: .2cqw; }
.ayc-course em { font-family: AycGambetta, Georgia, serif; font-style: italic; font-size: 2.6cqw; color: var(--ink); }
.ayc-course b { font-size: 4.2cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.ayc-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; font-size: max(1.6cqw, 7px); color: var(--ink-soft); text-align: left; }
.ayc-foot .r { justify-self: end; display: flex; align-items: center; gap: 1cqw; }
.ayc-foot .r i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; display: inline-block; }
.ayc-seal { width: 9cqw; aspect-ratio: 1; border-radius: 50%; padding: .55cqw; background: conic-gradient(from 20deg, var(--b1), var(--b2), var(--b3), var(--b4), var(--b1)); }
.ayc-seal > span { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ayc-seal svg { width: 64%; }
.ayc-foil, .ayc-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ayc-foil { background: repeating-linear-gradient(115deg, rgba(255,184,80,.5) 0%, rgba(44,209,177,.5) 6%, rgba(60,198,237,.5) 12%, rgba(68,96,169,.35) 18%, rgba(255,184,80,.5) 24%);
  background-size: 300% 300%; background-position: 50% 50%; mix-blend-mode: soft-light; opacity: .55; }
.ayc-sheen { overflow: hidden; border-radius: inherit; }
.ayc-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 28%; left: -50%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 76%, transparent 100%);
  transform: skewX(-14deg); mix-blend-mode: soft-light; }
/* shine: once 1.2s after it comes into view, then once every 45s */
@keyframes ayc-sweep { 0% { left: -50% } 3.6% { left: 130% } 100% { left: 130% } }
.ayc.on .ayc-sheen::before { animation: ayc-sweep 45s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .ayc-aura span, .ayc.on .ayc-sheen::before { animation: none !important; } }

/* draft 8.30 (Oli, 6 Nov, about 17:40): "The AICM sort of tile is too wide and not tall enough… Can we make it the same size as the tile
   on the first page? The people feel ready for AI tile?" On laptops The AI Confidence Method card takes the "People feel ready for AI"
   card's width (min(1320px, 94vw)) and its height (--fd-h, set by motion.js from that card). The grey panel fills what the heading
   leaves, and each tab's white window fills the panel's height, so the graphics grow or shrink with it. Phones are unchanged:
   neither card is a tile there. */
@media (min-width: 768px) {
  .cur-card.method-card { width: min(1320px, 94vw); }
  .method-in { display: flex; flex-direction: column; height: var(--fd-h, auto); }
  .method-card .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .method-card .panes { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .method-card .pane { min-height: 0; }
  .method-card .pane .shot { min-height: 0; height: 100%; }
}

/* draft 8.31 (Adam, 8 Nov): Center Parcs' logo is a tree over the name, so it sits taller to read at the same weight */
.logos img.lg-tall { height: 52px; }
.cur-logos .logos img.lg-tall { height: 60px; }
@media (max-width: 767px) { .cur-logos .logos img.lg-tall { height: 48px; } }

/* Go-live fixes, 9 Nov: the Solutions and Resources dropdowns, the same menu as the product pages (product-pages/shared/product.css). */
.nav .dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; color: inherit; opacity: .85; cursor: pointer; transition: opacity .3s; }
.dd-btn:hover, .dd.open .dd-btn { opacity: 1; }
.dd-btn .chev { transition: transform .3s var(--ease); }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.nav ul.dd-list { display: none; position: absolute; top: calc(100% + 22px); left: -18px; margin: 0; min-width: 260px; flex-direction: column; gap: 0; padding: 10px; background: var(--cream); border-radius: var(--r-l); box-shadow: 0 0 0 1px rgba(12, 53, 92, .08), 0 18px 40px -20px rgba(12, 53, 92, .45); }
.nav .dd.open ul.dd-list { display: flex; }
.nav ul.dd-list a { display: block; padding: 9px 12px; border-radius: 10px; opacity: 1; }
.nav ul.dd-list a:hover { background: rgba(12, 53, 92, .06); }
@media (max-width: 1100px) {
  .nav.open #menu { max-height: calc(100svh - var(--navh) - var(--ny, 0px) - 40px); overflow-y: auto; } /* 10 Nov: minus the banner's height (--ny), or the menu ran off the bottom while the banner showed */
  .nav.open ul.dd-list { display: none; position: static; min-width: 0; box-shadow: none; background: none; border-radius: 0; padding: 12px 0 0 14px; gap: 2px; font-size: 17px; }
  .nav.open .dd.open ul.dd-list { display: grid; }
  .nav.open ul.dd-list a { padding: 6px 0; }
}

/* 9 Nov: on phones the webinar banner wraps onto two lines, so the whole line shows (as on the product pages); same colours and type. */
@media (max-width: 767px) {
  .topbar .wrap { height: auto; min-height: 56px; justify-content: center; padding: 8px var(--gutter); }
  .topbar a { font-size: 14px; letter-spacing: .04em; white-space: normal; overflow: visible; text-align: center; line-height: 1.35; }
  .topbar .tb-x { width: 44px; height: 44px; margin-right: -12px; }
}

/* Review tiles: five stars in place of the words "5-star review" (Oli, 9 Nov; black, i.e. the ink colour, 10:55) */
.wtile .stars { display: block; margin-bottom: 1px; line-height: 0; color: var(--ink); }
.wtile .stars > span { display: inline-flex; gap: 2px; }
.wtile .stars svg { display: block; width: 15px; height: 15px; fill: currentColor; }

/* Adam and Apira's notes, 9 Nov (adam-apira-notes-9nov/plan.md), the same as the product pages (product-pages/shared/product.css).
   Point 1: the AI Confidence Method first in Solutions, bold, a thin line under it. Point 3: Login is one dropdown (Email, Access code):
   on the right of the wide menu, and the last item of the phone menu. */
.nav ul.dd-list li.dd-main { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.nav ul.dd-list li.dd-main a { font-weight: 600; }
.nav .right .dd-login ul.dd-list { left: auto; right: -18px; min-width: 200px; }
.nav #menu > .dd-phone { display: none; }
@media (max-width: 1100px) {
  .nav .right > .dd-login { display: none; }
  .nav.open #menu > .dd-phone { display: block; }
}

/* Phone checks, 10 Nov (golive-order/phone-checks-10nov.md, checklist 152), phone menu only, desktop unchanged: every menu item and dropdown item
   is at least 44px tall to tap. The gaps go to 0 so the spacing looks as before (was 25 to 31px items with 20px gaps). */
@media (max-width: 1100px) {
  .nav.open #menu { gap: 0; }
  .nav.open #menu > li > a, .nav.open #menu > li > .dd-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; }
  .nav.open #menu ul.dd-list { gap: 0; padding-top: 0; }
  .nav.open #menu ul.dd-list a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}

/* Webinar banner centred at every width (Apira, 11 Nov): the line sits in the middle, the close button pinned to the right edge,
   equal padding both sides so a wrapped line never runs under it. Was right-aligned on desktop. */
.topbar .wrap { position: relative; justify-content: center; padding-left: calc(var(--gutter) + 48px); padding-right: calc(var(--gutter) + 48px); }
.topbar a { text-align: center; }
.topbar .tb-x { position: absolute; right: calc(var(--gutter) - 8px); top: 50%; transform: translateY(-50%); margin: 0; }

/* Phones: the curtain's grid column can't grow wider than the screen. Without it the "Trusted by" logo strip
   widened the page to 866px at 390px wide (staging check, 13 Nov). */
.curtain-stick { grid-template-columns: minmax(0, 1fr); }