/* Sessions landing — Stage 1. Soft Geometric Editorial direction. */
:root {
  --navy: #17263a;
  --blue: #315c87;
  --blue-muted: #4f6f91;
  --blue-soft: #80a8d4;
  --terracotta: #c56d52;
  --sand: #d7b878;
  --ivory: #f7f5f1;
  --ivory-deep: #efebe3;
  --card: #ffffff;
  --text: #17263a;
  --text-2: #445264;
  --text-3: #5f6b79;
  --line: #ddd8cf;
  --leaf: 0 18px 0 18px;
  --leaf-sm: 0 10px 0 10px;
  --shadow: 0 30px 60px -40px rgba(23, 38, 58, .45), 0 2px 6px rgba(23, 38, 58, .06);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", var(--sans);
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--navy); }
p { margin: 0; }
.headline-accent { color: var(--blue); }
.pilot .headline-accent { color: var(--blue-soft); }
.pilot .headline-accent .headline-white { color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); position: relative; }

/* Buttons — leaf radius echoes the product's button shape */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--leaf-sm); border: 1px solid transparent;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease;
}
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); }
.btn-secondary { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy) 28%, transparent); }
.btn-secondary:hover { border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); white-space: normal; text-align: center; cursor: default; }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: var(--navy); color: var(--navy); }
.btn-outline:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.btn-outline[aria-disabled=true] { cursor: default; }
.link-quiet { font-size: 14px; font-weight: 500; color: var(--text-3); cursor: default; }
.link-quiet.on-dark { color: rgba(255, 255, 255, .72); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand img { height: 18px; width: auto; }
.brand .brand-icon { height: 38px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 18px; }

/* Replaceable artwork: positioned and scaled here, never baked into screenshots */
.art { position: absolute; height: auto; pointer-events: none; user-select: none; z-index: 0; }

/* Screenshot crop: --x/--y/--w/--h crop box and --iw image width, all in image pixels */
.shot { position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); background: var(--ivory); }
.shot img {
  position: absolute; max-width: none; height: auto;
  width: calc(var(--iw) / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}
.frame { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* Hero */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 24px; }
/* Teacher and learner at a desk: anchored bottom-left of Section 2, bleeding off the left edge. The text sits above the desk line. */
.begins-scene {
  position: absolute; z-index: 0; left: -6%; top: calc(var(--begins-lift) * -1); width: var(--begins-w); height: auto; pointer-events: none; user-select: none;
  /* Fully opaque over the two people, easing to nothing under the copy so the text stays easy to read. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 52%, rgba(0, 0, 0, .35) 68%, transparent 84%);
  mask-image: linear-gradient(to right, #000 0, #000 52%, rgba(0, 0, 0, .35) 68%, transparent 84%);
}
.journey > .wrap { position: relative; z-index: 1; }
/* Background artwork: fades in from the left (text side) and out before the hero's bottom edge */
.hero-art {
  width: min(78vw, 1240px); max-width: none; right: 0; top: 50%; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 34%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 8%, #000 34%), linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 96%);
  mask-composite: intersect;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4vw, 64px); align-items: center; z-index: 1; }
/* Floating iPad: transparent PNG, already tilted. --parallax is set by the scroll script in index.html */
.hero-copy { position: relative; z-index: 2; }
.hero-ipad { width: min(155%, 858px); margin-left: auto; margin-right: 0; position: relative; left: clamp(-167px, calc((1100px - 100vw) * 1.2), 0px); transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; }
.hero-ipad img { width: 100%; height: auto; }
/* Scroll tilt on the image only (the wrapper keeps its parallax). --hero-ipad-scroll-motion: 0 disables it, 1 is full strength. */
.hero-ipad {
  --hero-ipad-scroll-motion: 1;
  --hero-ipad-progress: 0;
}
.hero-ipad img {
  transform: perspective(1400px)
    translateY(calc(var(--hero-ipad-progress) * -16px * var(--hero-ipad-scroll-motion)))
    rotateX(calc(var(--hero-ipad-progress) * 8deg * var(--hero-ipad-scroll-motion)))
    rotateY(calc(var(--hero-ipad-progress) * 2.5deg * var(--hero-ipad-scroll-motion)));
  transform-origin: 50% 60%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hero-ipad img { transform: none; will-change: auto; } }
.hero h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.03em; }
.hero h1 .h1-sub { font-weight: 500; }
.lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); margin-top: 24px; max-width: 34em; text-wrap: balance; }
.hero-visual { margin: 0 calc(var(--gutter) * -1) 0 0; }
.device {
  padding: clamp(8px, 1.1vw, 14px); border-radius: 26px;
  background: var(--navy); box-shadow: var(--shadow);
  transform: perspective(2000px) rotateY(-6deg) rotateX(2deg);
  transform-origin: left center;
}
.device-flat { transform: none; border-radius: 22px; }
.device .shot { border-radius: 14px; }
.hero-visual figcaption, .feature-visual figcaption { font-size: 14px; color: var(--text-3); margin-top: 18px; text-align: center; }

/* Editorial scenes: replaceable PNGs, cropped by CSS only */
.scene { overflow: hidden; border-radius: 0 48px 0 48px; background: var(--ivory-deep); }
.scene img { width: 100%; height: 100%; object-fit: cover; }
.journey-scene { aspect-ratio: 16 / 10; }
.journey-scene img { object-position: 80% 50%; }
/* Coaching: a transparent cut-out that sits straight on the page, centred */
.capture-scene { width: clamp(320px, 56vw, 700px); margin: 0 auto clamp(8px, 2vw, 24px); aspect-ratio: 1775 / 1536; }
.capture-scene img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
/* Capture, audio, materials, notes and insight icons drifting in the open space beside the coaching image */
.capture-icons { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; }
/* Five capture types, all one size, orbiting the pair at the table: live and audio on the left, materials and notes above, insight where it lands on the right */
.capture-icon { position: absolute; width: clamp(104px, 12.5vw, 168px); height: auto; translate: -50% -50%; animation: capture-float 7s ease-in-out infinite; animation-delay: calc(var(--n) * -1.4s); }
.capture-icon:nth-child(1) { left: 12%; top: 68%; width: clamp(146px, 17.5vw, 235px); }
.capture-icon:nth-child(2) { left: 19%; top: 22%; width: clamp(136px, 16.2vw, 218px); }
.capture-icon:nth-child(3) { left: 50%; top: 8%; width: clamp(129px, 15.4vw, 207px); }
.capture-icon:nth-child(4) { left: 73%; top: 4%; }
.capture-icon:nth-child(5) { left: 90%; top: 38%; width: clamp(130px, 15.6vw, 210px); }
@keyframes capture-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .capture-icon { animation: none; } }
/* Flow lines behind Section 5: full width, centred on the section, blended into the page */
.line-bg-2 { position: absolute; z-index: -1; left: 50%; top: 50%; width: 100vw; max-width: none; height: auto; transform: translate(-50%, -50%); mix-blend-mode: multiply; opacity: .5; pointer-events: none; user-select: none; }

/* Journey */
.journey { --begins-w: min(86vw, 1260px); --begins-lift: 275px; --begins-text-drop: 70px; position: relative; padding: 40px 0 90px; }
/* The scene is ~0.746 as tall as it is wide; keep the section tall enough that it never rises into the hero's buttons. */
.journey-head { min-height: calc(var(--begins-w) * .746 - 130px - var(--begins-lift)); }
/* Tall abstract ribbons: one decorative layer behind the hero, cropped to the hero's height. */
.flow-bg {
  position: absolute; z-index: -1; top: 0; right: 0; width: min(62vw, 880px); height: auto;
  transform: translate3d(0, var(--bg-parallax, 0px), 0); will-change: transform;
  opacity: .5; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 560px, transparent 780px), linear-gradient(to left, #000 0, #000 55%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 560px, transparent 780px), linear-gradient(to left, #000 0, #000 55%, transparent 92%);
  mask-composite: intersect;
}
main { overflow-x: clip; }
.journey-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.journey-head .section-head { margin-bottom: 0; grid-column: 2; padding-left: 80px; position: relative; top: var(--begins-text-drop); }
.journey h2 { text-wrap: balance; white-space: nowrap; } /* two lines on desktop: "…you run." / "And the ones ahead." */
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.narrow { max-width: 720px; }
.section-head p:not(.eyebrow) { color: var(--text-2); margin-top: 20px; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
/* Where it begins: one thin line through three moments; no arrows, so no implied workflow */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: color-mix(in srgb, var(--navy) 22%, transparent); }
.steps li { position: relative; padding-top: 40px; }
.step-node { position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--blue); }
.steps li:nth-child(odd) .step-node { border-color: var(--terracotta); }
.steps li:first-child .step-node { background: var(--blue); }
.steps h3 { font-size: 21px; margin-bottom: 8px; }
.steps p { font-size: 16px; color: var(--text-2); max-width: 22em; }

/* Feature sections */
.feature { position: relative; overflow: hidden; padding: var(--section-y) 0; }
.feature-alt { background: var(--ivory-deep); }
.feature-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; z-index: 1; }
.feature-grid.reverse .feature-copy { order: 2; }
.feature-copy h2 { margin-bottom: 20px; }
.feature-copy > p { color: var(--text-2); text-wrap: pretty; }
.feature-copy > p + p { margin-top: 16px; }
.feature-copy > .closing { margin-top: 24px; font: italic 400 clamp(19px, 1.7vw, 22px)/1.4 var(--serif); color: var(--navy); }
.feature-visual { position: relative; min-width: 0; }
/* Decorative flow lines: centred on the Section 1/2 boundary so it rises into Section 1 and runs on behind Section 2 and 3 (neither section clips them).
   Remove the <img> or set opacity to 0 to switch off. */
.line-bg {
  position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: auto;
  transform: translateY(-50%); mix-blend-mode: multiply; opacity: .85;
  pointer-events: none; user-select: none;
}
/* Notes, diary and reminders artwork sitting behind the calendar screenshot */
/* Five iPad screens cross-fade in turn (4s each, 20s loop); each new screen fades in over the previous one, which stays solid until it is covered, so the background never shows through; the first stays visible if motion is reduced. */
.allinone { position: relative; z-index: 8; /* above every section layer, below the sticky header (10) */  width: 160%; margin: 0 0 0 -28%; top: -200px; aspect-ratio: 1448 / 1086; transform: perspective(1400px) rotateX(calc((var(--practical-p, .5) - .5) * 26deg)) rotateY(calc((var(--practical-p, .5) - .5) * 16deg)); will-change: transform; } /* scroll tilt: --practical-p is set by the script in index.html */
.allinone-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: allinone-fade 20s ease-in-out infinite; animation-delay: calc(var(--i) * 4s); }
@keyframes allinone-fade { 0% { opacity: 0; z-index: 2; } 5% { opacity: 1; z-index: 2; } 5.01% { opacity: 1; z-index: 1; } 25% { opacity: 1; z-index: 1; } 25.01%, 100% { opacity: 0; z-index: 0; } }
@media (prefers-reduced-motion: reduce) { .allinone { transform: none; will-change: auto; } .allinone-img { animation: none; } .allinone-img:first-child { opacity: 1; } }
.notes-scene { position: absolute; z-index: 0; left: calc(50% + 50px); top: calc(50% + 150px); width: 125%; max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; user-select: none;
  /* Fades out toward the copy so the artwork never competes with the text */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 60%, transparent 90%); mask-image: linear-gradient(to right, #000 0, #000 60%, transparent 90%); }
#people { overflow: visible; z-index: 3; } /* lets the group scene run over the edge into the next section */
#practical { overflow: visible; margin-top: 100px; } /* the iPad rises over the section above; the section sits lower for breathing room */
#practical .feature-grid { z-index: auto; } /* no stacking context here, so the iPad (z 8) can sit above the group scene in the section above */
#practical .feature-copy { position: relative; z-index: 3; } /* copy sits in front of the artwork */
/* "Everyone learns differently": soft scene first, portrait proof layered in front of it */
.learn-visual { min-height: clamp(560px, calc(66vw + 100px), 1060px); }
#people .feature-copy h2 { white-space: nowrap; } /* one line at the standard heading size; it may run over the iPad */
#people { margin-top: -120px; } /* tucks Section 3 up under Section 2's whitespace */
#people .feature-copy { padding-right: 56px; position: relative; top: -30px; z-index: 3; } /* copy sits in front of the iPad and the group */
.learn-scene { position: absolute; z-index: 2; top: 490px; right: 88px; width: 150%; max-width: none; height: auto; pointer-events: none; user-select: none; }
.learn-proof { position: absolute; z-index: 1; right: -282px; bottom: -100px; width: min(156%, 983px); margin: 0; }
.learn-proof figcaption { max-width: 22em; margin: -4% auto 0; }
/* Two genuine student-detail screens cross-fade; the pair tilts slightly with scroll (--learn-p set by the script in index.html). */
.learn-ipad {
  position: relative; aspect-ratio: 1160 / 1492;
  transform: perspective(1400px) rotateX(calc((var(--learn-p, .5) - .5) * 26deg)) rotateY(calc((var(--learn-p, .5) - .5) * 16deg));
  will-change: transform;
  /* The device dissolves from mid-height, leaving a quiet area for the group. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 76%);
}
.learn-ipad-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.learn-ipad-alt { opacity: 0; animation: learn-ipad-fade 12s ease-in-out infinite; }
@keyframes learn-ipad-fade { 0%, 30% { opacity: 0; } 46%, 80% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .learn-ipad { transform: none; will-change: auto; }
  .learn-ipad-alt { animation: none; opacity: 0; }
}

figure { margin: 0; }
figcaption { font-size: 14px; color: var(--text-3); margin-top: 14px; }
/* Context & Arve: the genuine Before This Session panel, kept narrow */
.arve-visual { max-width: 340px; margin-inline: auto; }
/* Five iPad screens (transcript, files, notes, insights, Arve) dissolve in numbered order over a solid base; the stack tilts slightly with scroll (--arve-p is set by the script in index.html). */
.arve-ipads { position: relative; left: 50%; width: min(211%, 1099px); max-width: none; margin-inline: 0; aspect-ratio: 1455 / 1792; transform: translateX(calc(-50% - 10px)) perspective(1400px) rotateY(calc((var(--arve-p, .5) - .5) * 40deg)); will-change: transform; }
.arve-ipad-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: arve-ipad-fade 16s ease-in-out infinite; animation-delay: calc(var(--i) * 4s); }
/* Four screens, 4s apart, each shown for 5s so the next dissolves in over it before it drops away */
@keyframes arve-ipad-fade { 0% { opacity: 0; z-index: 2; } 6.25% { opacity: 1; z-index: 2; } 6.26% { opacity: 1; z-index: 1; } 31.25% { opacity: 1; z-index: 1; } 31.26%, 100% { opacity: 0; z-index: 0; } }
@media (prefers-reduced-motion: reduce) { .arve-ipads { transform: translateX(calc(-50% - 10px)); will-change: auto; } .arve-ipad-img { animation: none; } .arve-ipad-img:first-child { opacity: 1; } }

.arcs-art { width: 560px; opacity: .9; }
.arcs-left { left: -280px; top: 40px; }
.arcs-right { right: -260px; top: -120px; }

/* Bigger vision: typography-led until replacement artwork is approved */
.confidence { padding: var(--section-y) 0; }
.confidence-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px); align-items: start;
}
.confidence-text { position: relative; z-index: 3; padding-top: clamp(24px, 4vw, 64px); }
.confidence-text .statement { margin-bottom: clamp(20px, 2.4vw, 32px); }
.confidence-copy > p + p { margin-top: 16px; }
/* Left: the Arve iPad with the supporting teaching scene layered behind and below it */
.confidence-visual { position: relative; order: -1; display: flex; flex-direction: column; align-items: center; }
/* The Arve iPad sits in front of the person at the table */
.confidence-scene { position: relative; z-index: 1; width: min(117%, 766px); max-width: none; height: auto; margin-top: calc(-14% - 100px); margin-bottom: -31%; pointer-events: none; user-select: none; }
.confidence-ipad { --conf-x: 0px; transform: translateX(var(--conf-x)) perspective(1400px) rotateX(calc((var(--conf-p, .5) - .5) * -60deg)); will-change: transform; position: relative; z-index: 2; width: 252%; max-width: none; height: auto; }
.confidence-copy > p { color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); }

/* Pilot */
.pilot { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: var(--section-y) 0; border-radius: var(--leaf); margin: 0 var(--gutter); }
.pilot h2 { color: #fff; max-width: 15em; }
.pilot p:not(.eyebrow) { color: rgba(255, 255, 255, .8); max-width: 36em; margin-top: 20px; }
.pilot-inner { z-index: 1; }
/* Pilot section illustration with the Sessions logo beneath it: right-hand side on desktop, after the content when stacked */
.pilot-aside { position: absolute; z-index: 0; right: clamp(16px, 3vw, 48px); top: 50%; transform: translateY(-50%); width: min(42%, 640px); display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 7vw, 110px); pointer-events: none; user-select: none; }
.pilot-scene { display: block; width: 100%; height: auto; }
/* Icon centred above the logotype at the sketched sizes: icon about 57px, logotype about 190px wide */
.pilot-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.pilot-logo-icon { width: 57px; height: auto; }
.pilot-logo-type { width: 120px; height: auto; }
/* Narrow desktops and iPad landscape: a smaller aside keeps the logo clear of the open form */
@media (min-width: 961px) and (max-width: 1279px) { .pilot-aside { width: 32%; } }
@media (min-width: 961px) and (max-width: 1023px) { .pilot-aside { width: 26%; } }

/* Footer */
.site-footer { padding: 20px 0 28px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.site-footer p { font-size: 14px; color: var(--text-3); }
.site-footer .fine { margin: 0 auto; text-align: center; }
.site-footer .wrap { max-width: none; } /* full page width, so the centred copyright sits under the middle of the pilot card */

/* iPad landscape / narrow desktop */
@media (max-width: 1180px) {
  .nav { gap: 18px; }
  .nav a { font-size: 14px; }
  .header-inner { gap: 18px; }
  .header-actions .link-quiet { display: none; }
  .steps h3 { font-size: 19px; }
}

/* iPad portrait */
@media (max-width: 960px) {
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .hero-grid, .feature-grid, .confidence-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-grid.reverse .feature-copy { order: 0; }
  .hero-copy { max-width: 640px; }
  .journey h2 { white-space: normal; }
  .flow-bg { right: -26vw; width: 92vw; opacity: .4; }
  .device { transform: none; }
  .hero-visual { margin-right: 0; order: -1; }
  .hero { padding-top: 24px; padding-bottom: 56px; }
  .journey { display: flex; flex-direction: column; padding: 8px 0 56px; }
  .begins-scene { --begins-w: min(94vw, 620px); -webkit-mask-image: none; mask-image: none; position: relative; left: 0; top: auto; bottom: auto; order: -1; width: min(112vw, 900px); max-width: none; margin: -72px 0 24px -6vw; }
  /* Stacked: art sits behind the iPad only, fading in below the copy */
  .hero-art {
    width: 140vw; right: -20vw; top: auto; bottom: 6%; transform: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 75%, transparent 100%);
  }
  .hero-ipad { width: min(92%, 716px); margin-inline: auto; left: 0; --hero-ipad-scroll-motion: .6; }
  /* Stacked layouts (tablet and phone): group, then headline and copy, then the iPad centred under the copy. */
  .learn-visual { display: contents; }
  #people { padding-top: 16px; padding-bottom: 0; }
  .learn-scene { position: relative; order: -1; top: auto; right: auto; z-index: 0; width: min(118vw, 900px); max-width: none; margin: -72px 0 0 -6vw; }
  #people .feature-copy { order: 0; }
  /* The iPad is sized so the device itself fills the screen width; its lower 42% is clipped and dissolves. */
  .learn-proof { --learn-w: min(104vw, 800px); position: relative; order: 1; right: auto; bottom: auto; width: var(--learn-w); max-width: none; justify-self: center; margin: calc(var(--learn-w) * -.05) 0 calc(var(--learn-w) * -.03); }  /* the cut edge meets the next section with no gap */
  .learn-ipad {
    clip-path: inset(0 0 52% 0); margin-bottom: calc(var(--learn-w) * 1.286 * -.52); -webkit-mask-image: none; mask-image: none; /* hard cut at 48% of the device */
    transform: perspective(1400px) rotateX(calc((var(--learn-p, .5) - .5) * 26deg)); /* one axis only; leans back as you scroll down */
  }
  .line-bg { width: 100%; left: 0; top: 0; }
  /* Section 4: the iPad sits inside the page gutters; the artwork behind it may still bleed */
  .allinone { width: 88%; margin: 0 auto; top: 0; }
  #practical { margin-top: 0; }
  .arve-ipads { width: min(88%, 520px); transform: translateX(-50%) perspective(1400px) rotateY(calc((var(--arve-p, .5) - .5) * 40deg)); }
  /* Section 6 stacks: headline and copy first, then the iPad over the teaching scene, inside the page edges */
  .confidence-visual { order: 0; }
  .confidence-scene { width: min(90%, 468px); margin-top: -10%; margin-bottom: -18%; }
  .confidence-ipad { width: 100%; margin-left: 0; }
  .notes-scene { left: 50%; top: 50%; width: 112%; -webkit-mask-image: none; mask-image: none; }
  #people { margin-top: 0; }
  /* Larger headlines on tablet and phone: 34px at 375px, up to 46px on tablet */
  .hero h1, h2, .statement, #people .feature-copy h2 { font-size: clamp(34px, 5.6vw, 46px); }
  #people .feature-copy h2 { white-space: normal; }
  #people .feature-copy { top: 0; }  #people .feature-copy { padding-right: 0; }
  .journey-head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .journey-head .section-head { grid-column: 1; padding-left: 0; top: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before { left: 9px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .steps li { padding: 0 0 28px 48px; }
  .steps li:last-child { padding-bottom: 0; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-actions .link-quiet { display: none; }
  .flow-bg { right: -55vw; width: 150vw; opacity: .22; }
  /* Phones: let the artwork run nearly edge to edge so the iPads and scenes stay legible. */
  /* Section 3 on phones: group, then headline and copy, then the iPad centred under the copy. */
  .learn-scene { width: min(135vw, 640px); margin: -52px 0 0 -17vw; }
  .learn-proof { --learn-w: min(104vw, 560px); }
  .journey { padding-bottom: 56px; }
  .begins-scene { order: -1; width: min(120vw, 640px); max-width: none; margin: -64px 0 16px -4vw; } /* scene first, then the headline; the artwork's empty top edge is pulled up */
  .brand { gap: 8px; }
  .brand img { height: 17px; }
  .brand .brand-icon { height: 30px; }
  .hero-art { width: 190vw; right: -45vw; }
  .hero-ipad { width: min(92%, 439px); margin-inline: auto; left: 0; --hero-ipad-scroll-motion: .3; }
  .scene { border-radius: 0 28px 0 28px; }
  .capture-scene { width: min(88vw, 420px); }
  .capture-icons { position: static; width: auto; display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
  .capture-icon, .capture-icon:nth-child(n) { position: static; translate: none; width: clamp(48px, 13vw, 72px); animation: none; }
  .capture-scene img { object-position: 50% 50%; }
  .steps li { padding-left: 40px; }
  .arcs-art { width: 380px; }
  .arcs-left { left: -240px; }
  .pilot { margin: 0; border-radius: 0; }
  .btn { width: 100%; }
  .site-header .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) { .learn-ipad { transform: none; } }

/* Sections 5 to 6: close the gap left by the transparent margins around the iPad and the person (desktop) */
@media (min-width: 961px) {
  #capture { padding-bottom: 24px; } /* room for the iPad's lower edge, which the -36% margin below pushes past the section */
  .arve-ipads { margin-bottom: -42%; }
  .confidence { padding-top: 24px; padding-bottom: 24px; }
  .confidence-scene { top: 80px; } /* the man at the table sits 80px lower; position offset only, so the iPad does not move */
  .confidence-ipad { margin-top: -30px; margin-bottom: calc(-28% - 200px); } /* centred on the page (--conf-x) and running 200px over the navy section; tilts forward as it scrolls (--conf-p), both set by the script in index.html */
}
/* Section 5 on narrow desktops and iPad landscape: at 211% the iPad spills over the copy column, so keep its visible edge clear of the text */
@media (min-width: 961px) and (max-width: 1279px) {
  .arve-ipads { width: min(182%, 1099px); }
}

@media (prefers-reduced-motion: reduce) { .confidence-ipad { will-change: auto; } }

/* Final section: pilot enquiry form (one inline form, opened by "Get in touch" or the header "Register interest") */
.btn-action { cursor: pointer; }
.btn-light.btn-action:hover { background: var(--ivory); }
.pilot .pilot-inner > p + p { margin-top: 16px; }
.pilot-form-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; max-width: 36em; }
.pilot-form-wrap.is-open { grid-template-rows: 1fr; }
.pilot-form-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .32s; }
.pilot-form-wrap.is-open .pilot-form-inner { visibility: visible; transition-delay: 0s; }
.pilot-form, .form-thanks { margin-top: 32px; padding: clamp(20px, 3vw, 32px); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--leaf); background: rgba(255, 255, 255, .05); }
.pilot-form h3, .form-thanks h3 { color: #fff; font: 600 clamp(22px, 2.2vw, 26px)/1.2 var(--display); letter-spacing: -0.02em; }
.pilot p.form-lede { margin-top: 8px; color: rgba(255, 255, 255, .8); }
.pilot .form-thanks p { margin-top: 12px; color: rgba(255, 255, 255, .85); }
.form-thanks:focus { outline: none; }
.field { margin-top: 20px; }
.field label { display: block; font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 8px; }
.pilot-form input[type=text], .pilot-form input[type=email], .pilot-form select, .pilot-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3);
  background: #fff; color: var(--navy); font: 400 16px/1.4 var(--sans);
}
.pilot-form textarea { resize: vertical; min-height: 104px; }
/* Name and email side by side where there is room */
@media (min-width: 961px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.pilot-form input:focus-visible, .pilot-form select:focus-visible, .pilot-form textarea:focus-visible, .pilot-form input[type=checkbox]:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.pilot-form [aria-invalid=true] { border-color: #ffb4a2; box-shadow: 0 0 0 1px #ffb4a2; }
.pilot p.field-hint { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.pilot p.field-error { margin-top: 6px; font-size: 14px; color: #ffb4a2; }
.pilot p.field-error:empty { display: none; }
.field-check { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.field-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue-soft); }
.field-check label { margin: 0; font-weight: 500; }
.field-check .field-error { grid-column: 2; }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pilot-form .btn { margin-top: 24px; }
.form-actions { display: flex; justify-content: flex-end; }
.pilot p.form-status { margin-top: 14px; font-size: 15px; color: #fff; }
.pilot p.form-status:empty { display: none; }
.pilot p.form-note { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.pilot .field-check + p.form-note { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .pilot-form-wrap, .pilot-form-inner { transition: none; } }

@media (max-width: 960px) {
  .pilot-aside { position: relative; right: auto; top: auto; transform: none; width: min(calc(100% - var(--gutter) * 2), 560px); margin: 40px auto 0; gap: 40px; }
}

/* Tighter vertical rhythm between sections (desktop) */
@media (min-width: 961px) {
  #people { margin-top: -190px; padding-bottom: 24px; }
  #practical { margin-top: 0; }
  .capture-scene { margin-bottom: -280px; }
  #capture { overflow: visible; z-index: 3; } /* the iPad is pulled up and over the edge, so the section must not crop it */
  #capture .feature-copy { position: relative; top: 25px; } /* sits level with the upper part of the iPad */
  .confidence { position: relative; z-index: 2; }
  .pilot { padding-top: calc(var(--section-y) + 140px); }
}

/* Section 4: copy sits further right, clear of the larger iPad (desktop) */
@media (min-width: 961px) {
  #practical .feature-copy { position: relative; left: 90px; }
}

/* Header account actions: Login (outlined) and Register interest (solid) sit together, both at the small button height */
.header-actions { gap: 12px; }
.header-actions .btn-sm { min-height: 40px; }
/* Narrow phones: Login and Register interest both stay in the header. Gaps and padding tighten first; the wordmark gives way to the icon only where the three still cannot fit */
@media (max-width: 520px) {
  .header-inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 0 12px; }
  .brand img:not(.brand-icon) { display: none; }
}

/* Pilot section: Login sits beside the primary action as a quieter outlined button on the navy */
.pilot-login { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .78); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .72); cursor: pointer; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-outline-light:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
@media (max-width: 640px) { .pilot-login { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; } .pilot-login .btn { width: 100%; } }

/* Section links land on the headline itself where the artwork above it would otherwise push it off screen */
#people-title, #remember-title { scroll-margin-top: 50px; }

/* Final section composition: icon above the headline, a larger illustration fading in behind the text, wordmark bottom right */
.pilot-mark { display: block; width: 40px; height: 40px; margin-bottom: 24px; background-color: var(--blue-soft); -webkit-mask: url(assets/brand/logo-icon-white.png) center / contain no-repeat; mask: url(assets/brand/logo-icon-white.png) center / contain no-repeat; }
@media (min-width: 961px) {
  .pilot-aside { inset: 0; right: 0; top: 0; transform: none; width: auto; display: block; }
  .pilot-scene { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(60%, 900px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 52%); mask-image: linear-gradient(to right, transparent 0, #000 52%); }
  .pilot-logo { position: absolute; right: clamp(24px, 3.5vw, 56px); bottom: 40px; width: auto; }
}

/* Desktop: the wordmark sits on the right of the Register interest row, its base level with the button's bottom edge */
.pilot-logo-cta { display: none; }
.pilot-copy { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-align: center; color: rgba(255, 255, 255, .6); }
.pilot-logo-cta img { display: block; width: 100%; height: auto; }
@media (min-width: 961px) { .pilot-logo-cta .pilot-copy { text-align: right; } } /* desktop: the year sits under the right edge of the wordmark */
@media (min-width: 961px) { .pilot { margin-bottom: 24px; } } /* the page now ends on the card, so it keeps the same ivory margin below as at its sides */
@media (min-width: 961px) {
  /* the right edge follows the card edge at any width: it steps out past the 1200px content column by the same amount the card does */
  .pilot-logo-cta { display: block; width: 180px; height: auto; margin-left: auto; align-self: flex-end; transform: translateX(calc(max(0px, (100vw - 2 * var(--gutter) - 1200px) / 2) + var(--gutter) - clamp(24px, 3.5vw, 56px))); }
  .pilot-logo { display: none; }
  /* With the form open the wordmark drops to the bottom right, level with the Submit button */
  .pilot:has(.pilot-form-wrap.is-open) .pilot-logo-cta { position: absolute; right: var(--gutter); bottom: clamp(20px, 3vw, 32px); margin: 0; }
}

/* Flowing lines behind the final section: inverted to read light on navy, at 50% opacity */
.pilot-lines { position: absolute; z-index: 0; left: 50%; top: 50%; width: 100%; max-width: none; height: auto; transform: translate(-50%, -50%); filter: invert(1); mix-blend-mode: screen; opacity: .5; pointer-events: none; user-select: none; }

/* Tablet and phone: every iPad is cropped to its visible device and sized to the content width; no clipping, no dead space */
@media (max-width: 960px) {
  /* Hero to Section 2 */
  .hero { padding-bottom: 8px; }
  .begins-scene { margin-top: -96px; }

  /* Section 3: group scene fully inside the page, iPad whole and full width */
  #people .learn-scene { width: 110%; max-width: none; margin: -24px 0 0 -4.7%; }
  #people .learn-proof { position: relative; order: 1; right: auto; bottom: auto; width: min(100%, 520px); max-width: none; justify-self: center; margin: 24px 0 0; }
  #people .learn-ipad { clip-path: none; margin-bottom: 0; aspect-ratio: 928 / 1296.5; -webkit-mask-image: none; mask-image: none; }
  #people .learn-ipad-img { inset: auto; left: -12.5%; top: -7.5%; width: 125%; max-width: none; height: auto; }

  /* Section 4 */
  #practical .allinone { width: min(100%, 700px); margin: 0 auto; aspect-ratio: 1.4228; top: 0; }
  #practical .allinone-img { inset: auto; left: -9.4%; top: -12.4%; width: 114.3%; max-width: none; height: auto; }

  /* Section 5: larger floating icons, iPad matched to the content width */
  .capture-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px; }
  .capture-icon, .capture-icon:nth-child(n) { position: static; translate: none; width: clamp(60px, 17vw, 120px); animation: capture-float 7s ease-in-out infinite; animation-delay: calc(var(--n) * -1.4s); }
  #capture .arve-ipads { left: 0; width: min(100%, 560px); aspect-ratio: 0.662; margin: 0 auto; transform: perspective(1400px) rotateY(calc((var(--arve-p, .5) - .5) * 40deg)); }
  #capture .arve-ipad-img { inset: auto; left: -30.1%; top: -15.4%; width: 160.1%; max-width: none; height: auto; }

  /* Section 6: person and Arve iPad, iPad matched to the content width */
  #capture { padding-bottom: 0; }
  .confidence { padding-top: 0; }
  .confidence-text { padding-top: 0; }
  .confidence-visual { width: 100%; max-width: 560px; margin-inline: auto; }
  .confidence-scene { width: min(86%, 440px); margin: -6.7% 0 -8%; }
  .confidence-ipad { align-self: flex-start; width: 143.7%; max-width: none; margin: -17.9% 0 -16.5% -21.8%; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .capture-icon, .capture-icon:nth-child(n) { animation: none; } }

/* Tablet and phone: Section 3 iPad tucks behind the group above and fades out at the bottom; Section 6 iPad is larger and crops off the sides */
@media (max-width: 960px) {
  #people .learn-scene { order: -2; position: relative; z-index: 2; }
  #people .learn-proof { order: -1; z-index: 1; width: min(100%, 520px); margin: -16% 0 12px; }
  #people .learn-ipad { aspect-ratio: 928 / 900; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); }
  .confidence-ipad { width: 180%; margin: -22% 0 -20% -40%; }
}

/* Tablet and phone, Section 3: the iPad sits above the group and the group overlaps its faded lower edge */
@media (max-width: 960px) {
  #people .learn-proof { order: -2; z-index: 1; margin: 8px 0 0; }
  #people .learn-scene { order: -1; z-index: 2; margin: -36% 0 0 -4.7%; }
  #people .learn-ipad { aspect-ratio: 928 / 760; }
}

/* Tablet and phone: close the remaining gaps (Section 2 to the Section 3 iPad, and the Section 6 iPad to the pilot card) */
@media (max-width: 960px) {
  .journey { padding-bottom: 8px; }
  #people { padding-top: 0; }
  #people .learn-proof { margin-top: 0; }
  .confidence { padding-bottom: 16px; }
}

/* Tablet and phone: the Section 6 iPad runs down over the top of the navy pilot card */
@media (max-width: 960px) {
  .confidence { position: relative; z-index: 2; padding-bottom: 0; }
  .confidence-ipad { margin-bottom: calc(-20% - 140px); }
  .pilot { padding-top: calc(var(--section-y) + 140px); }
}

/* Mid-width desktops: the Section 3 iPad no longer rises into the Section 2 copy; the pull-up eases off as the window narrows */
@media (min-width: 961px) and (max-width: 1440px) {
  #people { margin-top: calc(-190px + clamp(0px, (1440px - 100vw) * .6, 190px)); }
}

/* Desktop: the Section 6 headline starts below the lower edge of the Section 5 iPad */
@media (min-width: 961px) {
  .confidence-text { padding-top: calc(clamp(24px, 4vw, 64px) + 80px); }
}

/* Tablet and phone: breathing room between the Section 5 iPad and the Section 6 headline */
@media (max-width: 960px) {
  #capture { padding-bottom: 40px; }
}

/* Mid-width desktops: the Section 3 iPad slides left as the window narrows, so more of it stays on screen */
@media (min-width: 961px) and (max-width: 1440px) {
  .learn-proof { right: calc(-282px + clamp(0px, (1440px - 100vw) * .55, 200px)); }
}

/* Desktop: the Section 3 headline wraps inside its column, so no text can run under the iPad */
@media (min-width: 961px) and (max-width: 1440px) {
  #people .feature-copy h2 { white-space: normal; max-width: 100%; }
  .learn-proof { right: calc(-282px + clamp(0px, (1440px - 100vw) * .45, 150px)); }
}

/* Tablet and phone, Section 4: the iPad and artwork come first, above the headline */
@media (max-width: 960px) {
  #practical .feature-visual { order: -1; margin-bottom: clamp(8px, 7vw, 56px); }
  #practical .feature-copy { order: 0; left: 0; }
}

/* Tablet and phone, Section 5: the five icons float around the pair at the same positions as on desktop, scaled to fit */
@media (max-width: 960px) {
  .capture-wrap { padding-top: clamp(56px, 13vw, 110px); }
  .capture-scene { width: min(62%, 420px); margin: 0 auto 8px; }
  .capture-icons { position: absolute; display: block; z-index: 1; left: 0; top: 0; bottom: 0; width: 100%; margin: 0; padding: 0; pointer-events: none; }
  .capture-icon, .capture-icon:nth-child(n) { position: absolute; translate: -50% -50%; width: clamp(56px, 16vw, 124px); animation: capture-float 7s ease-in-out infinite; animation-delay: calc(var(--n) * -1.4s); }
  .capture-icon:nth-child(1) { left: 9%; top: 74%; }
  .capture-icon:nth-child(2) { left: 14%; top: 34%; }
  .capture-icon:nth-child(3) { left: 32%; top: 6%; }
  .capture-icon:nth-child(4) { left: 74%; top: 2%; }
  .capture-icon:nth-child(5) { left: 90%; top: 46%; width: clamp(66px, 19vw, 150px); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .capture-icon, .capture-icon:nth-child(n) { animation: none; } }

/* Tablet and phone, Section 4: the iPad and artwork sit under the copy */
@media (max-width: 960px) {
  #practical .feature-copy { order: 0; }
  #practical .feature-visual { order: 1; margin: clamp(16px, 5vw, 40px) 0 0; }
}

@media (max-width: 960px) {
  #practical .feature-visual { margin: clamp(40px, 9vw, 80px) 0 clamp(24px, 7vw, 56px); }
  #practical .notes-scene { width: 104%; }
}

/* Tablet and phone: Section 5 icons 4 and 5 sit closer to the pair; Section 4 artwork rises up behind the copy */
@media (max-width: 960px) {
  .capture-icon:nth-child(4) { left: 66%; top: 4%; }
  .capture-icon:nth-child(5) { left: 81%; top: 46%; }
  #practical .notes-scene { top: calc(50% - 110px); }
}

/* Tablet and phone, Section 4: the artwork rises behind the headline and copy; the gap under the iPad is closed */
@media (max-width: 960px) {
  #practical .notes-scene { width: 150%; top: -310px; transform: translate(-50%, 0); }
  #practical .feature-visual { margin-bottom: 0; }
  #practical { padding-bottom: 16px; }
}
@media (max-width: 480px) { #practical .notes-scene { top: -360px; } }

/* Tablet and phone, Section 4: three separate blocks in reading order. The illustration sits above the headline, then the copy, then the iPad */
@media (max-width: 960px) {
  #practical .feature-visual { display: contents; }
  #practical .notes-scene { order: -1; position: relative; left: auto; top: auto; transform: none; width: min(100%, 520px); max-width: none; height: auto; margin: 0 auto clamp(8px, 3vw, 24px); z-index: 0; -webkit-mask-image: none; mask-image: none; }
  #practical .feature-copy { order: 0; }
  #practical .allinone { order: 1; width: min(100%, 700px); margin: clamp(24px, 6vw, 48px) auto 0; top: 0; }
}
@media (max-width: 480px) { #practical .notes-scene { top: auto; } }
@media (max-width: 960px) {
  #practical .notes-scene { margin-bottom: -6%; }
  #practical .allinone { margin-top: clamp(0px, 2vw, 16px); }
}

/* Tablet and phone, Section 4: larger illustration with its transparent margins trimmed, and tighter gaps */
@media (max-width: 960px) {
  #practical { padding-top: 16px; }
  #practical .notes-scene { width: min(124%, 700px); margin: -14% auto -16%; }
  #practical .allinone { margin-top: -4%; }
}
@media (max-width: 960px) {
  #practical .notes-scene { margin: calc(min(124%, 700px) * -0.065) auto calc(min(124%, 700px) * -0.015 + 8px); }
}
@media (max-width: 960px) {
  #practical { padding-top: clamp(56px, 12vw, 96px); }
  #practical .notes-scene { margin-bottom: calc(min(124%, 700px) * -0.015 + 20px); }
}

/* Desktop: the Section 6 iPad starts below the copy at every scroll tilt, so no text can run over it */
@media (min-width: 961px) {
  .confidence-ipad { margin-top: 160px; }
  .pilot { padding-top: calc(var(--section-y) + 330px); }
}

/* Section 4 copy: the rightward shift grows with the window, so the text always stays inside it */
@media (min-width: 961px) {
  #practical .feature-copy { left: clamp(0px, (100vw - 961px) * .15, 90px); }
}

/* Mid-width desktops: the Section 4 iPad is narrower so it ends before the copy starts */
@media (min-width: 961px) and (max-width: 1279px) {
  .allinone { width: 124%; margin-left: -24%; }
  .notes-scene { width: 112%; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .allinone { width: 150%; margin-left: -30%; }
}

/* Mid-width desktops: the hero iPad is sized to the space beside the copy and stays fully on screen */
@media (min-width: 961px) and (max-width: 1439px) {
  .hero-ipad { width: calc(56vw - 40px); max-width: none; margin-left: auto; margin-right: 0; left: calc(-1 * clamp(16px, 2vw, 30px) - 80px); }
}

/* Mid-width desktops: the invitation block (icon, headline, copy) sits about 225px closer to the iPad above it */
@media (min-width: 961px) and (max-width: 1439px) {
  .pilot { padding-top: calc(var(--section-y) + 105px); }
}

/* Mid-width desktops: the iPad under "Your experience leads the way" (and everything below it) sits 80px higher, closing most of the gap under the illustration. Below 1040px the text column would run over the iPad, so those widths keep the original spacing */
@media (min-width: 1040px) and (max-width: 1439px) {
  .confidence-ipad { margin-top: 80px; }
}

/* Privacy Policy dialog (opened from the consent link in the enquiry form) */
.privacy-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.privacy-link:hover { color: var(--blue-soft); }
.privacy-link:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; border-radius: 2px; }
html.modal-open, html.modal-open body { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(23, 38, 58, .62); }
.modal-card { position: relative; display: flex; flex-direction: column; width: min(100%, 680px); max-height: 100%; background: var(--ivory); color: var(--text); border-radius: var(--leaf); box-shadow: var(--shadow); outline: none; }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(24px, 4vw, 40px); }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--leaf-sm); background: var(--ivory); color: var(--navy); cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.modal-close:hover { background: var(--ivory-deep); border-color: var(--blue-muted); }
.modal-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.modal h2 { margin-right: 44px; font: 600 clamp(26px, 3vw, 32px)/1.15 var(--display); letter-spacing: -0.02em; }
.modal-meta { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.modal h3 { margin-top: 26px; font: 600 18px/1.3 var(--display); letter-spacing: -0.01em; }
.modal p { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.modal h3 + p, .modal p + p { margin-top: 10px; }
.modal .btn { margin-top: 28px; }

/* Footer Privacy Policy link, beside the year under the wordmark; same dialog as the consent link */
.pilot-form h3:focus { outline: none; }
.pilot-copy a { display: inline-block; padding: 6px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; pointer-events: auto; }
.pilot-copy a:hover { color: #fff; }
.pilot-copy a:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; border-radius: 2px; }

/* Hero icon, and header branding that appears once the icon has scrolled out of view.
   The header brand keeps its full width the whole time, so the navigation never moves. */
.hero-mark { display: block; width: clamp(46px, 4.5vw, 62px); height: auto; pointer-events: none; user-select: none; }
@media (min-width: 961px) {
  /* Above the headline without taking any space, so the headline and the iPad stay exactly where they were */
  .hero-mark { position: absolute; left: 0; bottom: 100%; margin-bottom: clamp(26px, 3.1vw, 40px); }
}
@media (max-width: 960px) {
  .hero-mark { width: 40px; margin-bottom: 16px; }
}
.brand { --brand-icon-w: 38px; --brand-gap: 9px; } /* the header icon is square: its width is its height */
@media (max-width: 640px) { .brand { --brand-icon-w: 30px; --brand-gap: 8px; } }
/* At the top the SESSIONS wordmark sits where the icon will go and the icon is invisible. Once the hero icon has scrolled
   away the wordmark slides right to its normal place and the icon fades in behind it. Only opacity and transform change,
   so the brand keeps its full width and the navigation never moves. */
.brand-js .site-header .brand-icon { opacity: 0; }
.brand-js .site-header .brand img:not(.brand-icon) { transform: translateX(calc(-1 * (var(--brand-icon-w) + var(--brand-gap)))); }
.brand-js .site-header.brand-shown .brand-icon { opacity: 1; }
.brand-js .site-header.brand-shown .brand img:not(.brand-icon) { transform: none; }
/* Appearing: the wordmark slides first, then the icon fades in. Disappearing: the icon fades out first, then the wordmark slides back. */
.brand-js .site-header.brand-animate .brand-icon { transition: opacity .3s ease-out 0s; }
.brand-js .site-header.brand-animate .brand img:not(.brand-icon) { transition: transform .3s ease-out .2s; }
.brand-js .site-header.brand-animate.brand-shown .brand-icon { transition-delay: .2s; }
.brand-js .site-header.brand-animate.brand-shown .brand img:not(.brand-icon) { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .brand-js .site-header .brand-icon, .brand-js .site-header .brand img:not(.brand-icon) { transition: none !important; }
}
/* Narrow phones show the icon only (the wordmark is hidden by the existing header rule), so at the top there is nothing to
   show: the empty link leaves the tab order until the icon appears. */
@media (max-width: 520px) {
  .brand-js .site-header:not(.brand-shown) .brand { visibility: hidden; }
  .brand-js .site-header.brand-animate .brand { transition: visibility 0s linear .3s; }
  .brand-js .site-header.brand-animate.brand-shown .brand { transition-delay: 0s; }
}