/* Assemble You product pages: one shared stylesheet for every product page (AIX, Claude, Copilot, later AICM, Foundations, Ada).
   Taken from homepage draft 8.12 (homepage-design/multiverse-build/drafts/draft-8.12/style.css, 3 Nov; 8.12 only added to 8.11's): its colours, sizes, type,
   buttons, menu pill, footer, logo strip, person photos and colour frames. Copied, not linked, so homepage edits can't break these pages.
   Calm only: no held sections, no moving colour, the browser's own scroll. Plan: product-pages/plan.md (agreed by Oli, 3 Nov). */

:root {
  --ink: #0c355c;
  --ink-soft: #46607a;
  --mute: #5a6c80;
  --teal: #2cd1b1;
  --teal-deep: #0f9c83;
  --sky: #3cc6ed;
  --indigo: #4460a9;
  --sun: #ffb850;
  --sun-deep: #b86e00;
  /* Text-only versions (accessibility fixes, 3 Nov): 4.5:1 on white, cream and the badge tints. Fills and gradients keep the colours above. */
  --teal-text: #0a7562;
  --sun-text: #8a5200;
  --slate-text: #566b80;
  --cream: #f5f3ef;
  --paper: #ffffff;
  --line: #e6e1d8;

  --t-h1: clamp(40px, 5.4vw, 88px);
  --t-h2: clamp(40px, 3.95vw, 60px);
  --t-h3: clamp(22px, 1.9vw, 30px);
  --t-h4: clamp(19px, 1.6vw, 24px);
  --t-lede: clamp(18px, 1.5vw, 21px);
  --t-body: clamp(17px, 1.4vw, 19px);
  --t-small: 14px;

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

  --page: 1280px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --navh: 56px;
  --inner: clamp(16px, 5vw, 80px);
  --sec: clamp(72px, 8vw, 128px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
[id] { scroll-margin-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
:where(img[width][height]) { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h3, h4 { letter-spacing: -0.02em; line-height: 1.2; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 500; }
ul, ol { margin: 0; padding: 0; }

.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); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------- buttons (draft 8.9: one pill, the words then the arrow inside it) ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 22px; border-radius: 999px; background: var(--teal); color: var(--ink); text-decoration: none; font: 500 15px/1.2 "Outfit", sans-serif; border: 0; cursor: pointer; transition: background .3s var(--ease); text-align: left; }
.btn .a { display: inline-flex; flex: none; }
.btn .a svg { transition: transform .45s var(--ease); }
.btn:hover { background: #5ce6cb; }
.btn:hover .a svg { transform: translateX(3px); }
.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); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.link { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; text-decoration: none; }
.link svg { transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ---------- the menu: the homepage's translucent pill; hides on the way down, back on the way up ---------- */
.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, .7); 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%, 0); transition: transform .6s var(--ease); }
.nav.hidden { transform: translate(-50%, -140%); }
/* The webinar banner (on/off, words and link set in build/build.py): the homepage's slim dark bar at the very top. It scrolls away;
   the menu pill starts under it and moves up as it goes (product.js sets --ny). */
.topbar { position: sticky; top: 0; z-index: 60; background: #0a2a49; color: #fff; } /* sticky: webinars split, 10 Nov */
.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; } /* bigger banner, Apira row 23, 11 Nov */
.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; min-height: 48px; } /* 32px until 11 Nov (Apira row 23) */
.topbar a { font: 500 14px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; min-width: 0; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.has-topbar .nav { transform: translate(-50%, var(--ny, 48px)); }
.has-topbar .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; white-space: nowrap; }
.nav .right > a:not(.btn) { text-decoration: none; }
.nav .btn { min-height: 40px; font-size: 14px; }
/* The Solutions and Resources dropdowns (3 Nov): a button opens a short list under it; product.js opens and closes it. */
.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); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; color: var(--ink); cursor: pointer; }

/* ---------- the colour: the homepage's wash, held still ---------- */
.aura { position: absolute; inset: -15%; z-index: -1; filter: blur(70px) saturate(1.2); pointer-events: none; }
.aura span { position: absolute; border-radius: 50%; opacity: .75; }
/* Every page has its own wash (Oli, 3 Nov): build.py's WASH table puts a main colour (w1-), a second colour (w2-) and a layout (wl-) on <body>. */
body { --w1: var(--teal); --w2: var(--sky); }
body.w1-teal { --w1: var(--teal); } body.w1-sky { --w1: var(--sky); } body.w1-sun { --w1: var(--sun); }
body.w2-teal { --w2: var(--teal); } body.w2-sky { --w2: var(--sky); } body.w2-sun { --w2: var(--sun); } body.w2-indigo { --w2: var(--indigo); }
/* Second colours added 3 Nov (Copilot campaign extras): the brand's pastel lilac and pastel green. */
body.w2-lilac { --w2: #e0daf9; } body.w2-green { --w2: #c9f9cd; }
.aura .a1, .aura .a4 { background: var(--w1); }
.aura .a2, .aura .a3 { background: var(--w2); }
.aura .a4 { opacity: .35; }
.aura .a5 { background: #fff; opacity: .8; }
/* layout 1, classic: main colour low left, second top right and bottom centre */
.aura .a1 { width: 60%; height: 70%; inset: 18% auto auto -12%; }
.aura .a2 { width: 50%; height: 60%; inset: -14% -12% auto auto; }
.aura .a3 { width: 50%; height: 55%; inset: auto auto -30% 30%; }
.aura .a4 { width: 30%; height: 36%; inset: auto 6% -4% auto; }
.aura .a5 { width: 40%; height: 50%; inset: -6% auto auto 24%; }
/* layout 2, mirrored */
.wl-2 .aura .a1 { inset: 18% -12% auto auto; }
.wl-2 .aura .a2 { inset: -14% auto auto -12%; }
.wl-2 .aura .a3 { inset: auto 30% -30% auto; }
.wl-2 .aura .a4 { inset: auto auto -4% 6%; }
.wl-2 .aura .a5 { inset: -6% 24% auto auto; }
/* layout 3, top-weighted: colour across the top, fading to white at the foot */
.wl-3 .aura .a1 { width: 80%; height: 55%; inset: -24% auto auto 10%; }
.wl-3 .aura .a2 { width: 45%; height: 50%; inset: -18% -14% auto auto; }
.wl-3 .aura .a3 { width: 40%; height: 45%; inset: 10% auto auto -16%; }
.wl-3 .aura .a4 { width: 30%; height: 30%; inset: 30% 4% auto auto; }
.wl-3 .aura .a5 { width: 70%; height: 50%; inset: auto auto -14% 15%; }
/* layout 4, bottom-weighted: white at the top, colour rising from the foot */
.wl-4 .aura .a1 { width: 80%; height: 60%; inset: auto auto -30% 10%; }
.wl-4 .aura .a2 { width: 45%; height: 50%; inset: auto auto -14% -16%; }
.wl-4 .aura .a3 { width: 40%; height: 45%; inset: auto -12% 8% auto; }
.wl-4 .aura .a4 { width: 30%; height: 32%; inset: 4% auto auto 8%; }
.wl-4 .aura .a5 { width: 70%; height: 50%; inset: -14% auto auto 15%; }
/* layout 5, diagonal: main colour top left, second bottom right */
.wl-5 .aura .a1 { width: 60%; height: 70%; inset: -24% auto auto -14%; }
.wl-5 .aura .a2 { width: 55%; height: 65%; inset: auto -14% -28% auto; }
.wl-5 .aura .a3 { width: 32%; height: 40%; inset: -10% 8% auto auto; }
.wl-5 .aura .a4 { width: 28%; height: 34%; inset: auto auto -6% 18%; }
.wl-5 .aura .a5 { width: 45%; height: 50%; inset: 20% auto auto 28%; }
/* 6 side band (3 Nov): main colour down the right side, second colour at the left, white through the middle. */
.wl-6 .aura .a1 { width: 42%; height: 120%; inset: -10% -14% auto auto; }
.wl-6 .aura .a2 { width: 40%; height: 70%; inset: 20% auto auto -16%; }
.wl-6 .aura .a3 { width: 30%; height: 40%; inset: -18% auto auto 10%; }
.wl-6 .aura .a4 { width: 34%; height: 40%; inset: auto 30% -22% auto; }
.wl-6 .aura .a5 { width: 40%; height: 70%; inset: 10% auto auto 30%; }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .2; 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: centred, as Adam drew it, over the still colour; about 80% of a laptop screen ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #eef2f3; min-height: min(80svh, 760px); display: grid; align-items: center; padding: calc(var(--navh) + 72px) 0 112px; text-align: center; }
/* The product pages' hero, one size on all seven (Oli, 4 Nov; build.py's FULL_HERO puts "hero-full" on their <body>): one screen tall, the window
   less the menu, at most 1080px on very tall screens, so the logo strip starts just below the fold. The padding clears the menu pill at the top and
   the sheet's 40px overlap at the foot, so the words sit centred in what shows. Laptop and up only: phones keep the words' own height. */
@media (min-width: 768px) {
  body.hero-full .hero { min-height: min(calc(100svh - var(--navh)), 1080px); padding: calc(var(--navh) + 40px) 0 72px; } /* body.: beats .hero.content on About us (10 Nov) */
}
.hero .wrap { display: grid; justify-items: center; gap: 24px; }
.crumbs { display: none; } /* Breadcrumbs off on every page (Oli, 5 Nov); markup kept so they can come back. */
.crumbs { font-size: var(--t-small); color: var(--ink-soft); justify-self: start; margin-bottom: 8px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.hero .mark { height: 48px; width: auto; }
.hero h1 { font-size: var(--t-h1); max-width: 15ch; font-weight: 400; letter-spacing: -0.045em; }
.hero .lede { font-size: var(--t-lede); font-weight: 400; color: var(--ink); max-width: 640px; line-height: 1.45; }
.hero .btns { justify-content: center; margin-top: 8px; }
.hero .ticks { text-align: left; }
.hero .small { font-size: var(--t-small); color: var(--ink-soft); }

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

/* ---------- sections ---------- */
.sec { padding: var(--sec) 0; }
.sec.cream { background: var(--cream); }
.sec.tight { padding: calc(var(--sec) * .6) 0; }
.sec + .sec:not(.cream):not(.tight) { border-top: 1px solid var(--line); padding-top: calc(var(--sec) * .6); } /* less space under a dividing line (Oli, 10 Nov) */
.cream + .sec, .sec + .cream { border-top: 0 !important; }
.head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.head.center { text-align: center; margin-left: auto; margin-right: auto; justify-items: center; }
.head h2 { font-size: var(--t-h2); }
.head p, .lede-p { font-size: var(--t-lede); font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.prose { display: grid; gap: 16px; }
.prose p { color: var(--ink-soft); }
.prose p b { color: var(--ink); }
.prose h2 { font-size: var(--t-h2); margin-bottom: 8px; }
.note-sm { font-size: var(--t-small); color: var(--mute); }

/* ---------- split: words beside a picture, chart or list ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split.top { align-items: start; }

/* the colour frame round a product picture (the homepage's .stage), held still */
.frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: #eef2f3; padding: clamp(24px, 4vw, 56px); display: grid; place-items: center; }
/* the wash shows only in the hero and the closing panel: picture frames are plain cream (Oli, 3 Nov, option D) */
.frame { background: var(--cream); }
.frame .aura { display: none; }
.frame img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.frame.plain { background: var(--cream); }

/* a labelled placeholder for a picture we don't have yet */
.ph { display: grid; place-items: center; text-align: center; min-height: 220px; padding: 20px; border-radius: var(--r-l); background: repeating-linear-gradient(45deg, #f3efe8 0 12px, #ebe5da 12px 24px); color: var(--ink-soft); font-size: var(--t-small); }

/* ---------- ticks ---------- */
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%230c355c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.tickgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }

/* ---------- facts: a few numbers or short facts in a row, divided by thin lines ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts > div { padding: 28px 24px 8px 0; display: grid; gap: 8px; align-content: start; grid-row: span 2; grid-template-rows: subgrid; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
/* each fact spans two shared rows (figure, caption), so word facts sit on the numbers' baseline and every caption starts at the same height */
.facts b { font-size: clamp(36px, 3.6vw, 56px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; align-self: last baseline; }
.facts b.word { font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.facts span { color: var(--ink-soft); }

/* ---------- rows: a term beside its explanation ---------- */
.rows { border-top: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 24px 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rows h3 { font-size: var(--t-h4); }
.rows p { color: var(--ink-soft); }

/* ---------- points: two to four short points in columns, a thin line above each ---------- */
.points { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.points > div { border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.points h3 { font-size: var(--t-h4); }
.points p { color: var(--ink-soft); }

/* ---------- cards: a picture with words under it ---------- */
.cards { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.card { display: grid; gap: 16px; align-content: start; }
.card .frame, .card .ph { aspect-ratio: 16 / 10; min-height: 0; }
.card h3 { font-size: var(--t-h3); }
.card p { color: var(--ink-soft); }

/* ---------- numbered steps ---------- */
.steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: span 2; font-size: 36px; font-weight: 300; line-height: 1; color: var(--teal-deep); }
.steps h3 { font-size: var(--t-h4); }
.steps p { color: var(--ink-soft); }

/* ---------- a plain list of names with a short line each (frameworks, standards) ---------- */
.defs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.defs > div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.defs b { font-weight: 500; }
.defs span { color: var(--ink-soft); font-size: 15px; }

/* ---------- table ---------- */
.table-box { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.table-box table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.table-box th, .table-box td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); }
.table-box thead th { font-weight: 500; font-size: var(--t-small); color: var(--ink-soft); }
.table-box tbody th { font-weight: 500; }
.table-box td { color: var(--ink-soft); }
.table-box td.num { font-size: 24px; font-weight: 300; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; }
.table-box .us { color: var(--ink); background: rgba(44, 209, 177, .08); padding-left: 16px; }
.table-box thead .us { color: var(--ink); }
/* On phones each row stacks: its title, then each cell with its column name above (product.js copies the names into data-label). */
@media (max-width: 600px) {
  .table-box table { min-width: 0; }
  .table-box thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-box tr, .table-box tbody th, .table-box td { display: block; }
  .table-box tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .table-box tbody th, .table-box td { border-bottom: 0; padding: 4px 0; }
  .table-box tbody th { padding-bottom: 8px; }
  .table-box td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); }
  .table-box td.num { white-space: normal; }
  .table-box .us { padding: 8px 12px; }
}

/* ---------- bars: a sample chart, two to six values ---------- */
.chart { background: var(--paper); border-radius: var(--r-l); box-shadow: 0 30px 60px -36px rgba(12, 53, 92, .45), 0 0 0 1px rgba(12, 53, 92, .06); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 20px; }
.chart .cap { font-size: var(--t-small); color: var(--ink-soft); }
.chart .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart .pair div { border-radius: var(--r-m); background: var(--cream); padding: 16px; }
.chart .pair b { display: block; font-size: 44px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; }
.chart .pair b small { font-size: 16px; color: var(--ink-soft); letter-spacing: 0; }
.bars { list-style: none; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 1fr 48px; gap: 4px 12px; font-size: var(--t-small); }
.bars li span:last-of-type { text-align: right; }
.bars i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #ece8e1; position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--teal); border-radius: 3px; }

/* ---------- figures with their sources ---------- */
.figures { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.figures > div { border-top: 1px solid var(--ink); padding-top: 24px; display: grid; gap: 12px; align-content: start; }
.figures b { font-size: clamp(40px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.figures p { color: var(--ink-soft); }

/* ---------- course path: step links that jump to the course cards ---------- */
.path { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.path a { display: grid; gap: 6px; height: 100%; padding: 18px 20px 20px; border-top: 3px solid var(--c, var(--teal)); background: var(--cream); border-radius: 0 0 var(--r-m) var(--r-m); text-decoration: none; transition: background .3s var(--ease); }
.path a:hover { background: #ece8e1; }
.path small { font-size: 13px; color: var(--ink-soft); }
.path b { font-weight: 400; font-size: 18px; line-height: 1.25; }
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px); }
.course { display: grid; gap: 16px; align-content: start; border-top: 3px solid var(--c, var(--teal)); padding-top: 24px; }
.course .frame, .course .ph { aspect-ratio: 16 / 10; min-height: 0; padding: 20px; }
.course .frame img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); max-height: none; object-fit: contain; }
.course .title { display: flex; gap: 14px; align-items: center; }
.course .n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c, var(--teal)); color: var(--ink); display: grid; place-items: center; font-size: 17px; font-weight: 500; }
.course h3 { font-size: var(--t-h3); }
.course .meta { font-size: var(--t-small); color: var(--ink-soft); }
.course > p { color: var(--ink-soft); }
.course h4 { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-top: 8px; }
.lessons { list-style: none; border-top: 1px solid var(--line); }
.lessons li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lessons li.no-n { grid-template-columns: 1fr auto; }
.lessons .k { color: var(--mute); font-size: 13px; padding-top: 2px; }
.lessons .t { color: var(--ink-soft); font-size: 13px; white-space: nowrap; padding-top: 2px; }

/* ---------- the person: the homepage's person photo, larger, beside their story ---------- */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.person .pic { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1; background: linear-gradient(150deg, #effafa 0%, #8fe0e2 40%, #3fc4e4 100%); }
.person .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.person .pic img.cut { object-fit: contain; object-position: 50% 100%; top: auto; height: 92%; }
.person .role { font-weight: 500; }

/* ---------- logo strip (the homepage's) ---------- */
.trust .wrap { display: grid; grid-template-columns: 240px 1fr auto; gap: 32px; align-items: center; }
.trust-lab { font-size: var(--t-small); color: var(--ink-soft); }
.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, 60s) linear infinite; }
.marquee:hover .marquee-track, .trust.still .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.logos { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.logos img { height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) brightness(.4) contrast(1.2); opacity: .55; }
.pause { width: 32px; height: 32px; border-radius: var(--r-s); border: 0; background: rgba(12, 53, 92, .08); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.pause .play { display: none; }
.trust.still .pause .play { display: block; }
.trust.still .pause .stop { display: none; }

/* ---------- a badge or logo row (standards, certificates) ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badges .ph { min-height: 64px; width: 120px; padding: 8px; font-size: 12px; }
.badges img { height: 40px; width: auto; }

/* ---------- cross-link band and the other-tool card ---------- */
.other { display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--cream); }
.other .tile { width: 120px; aspect-ratio: 1; border-radius: var(--r-l); background: var(--paper); display: grid; place-items: center; }
.other .tile img { width: 56px; height: auto; }
.other h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.other p { color: var(--ink-soft); }

/* ---------- closing ask: centred inside a colour panel, the hero's colour again ---------- */
.closer { padding: var(--sec) 0; }
.closer .panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: #eef2f3; padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); text-align: center; display: grid; justify-items: center; gap: 24px; }
.closer h2 { font-size: var(--t-h2); max-width: 18ch; }
.closer p { font-size: var(--t-lede); font-weight: 400; max-width: 600px; line-height: 1.45; }
.closer .btns { justify-content: center; margin-top: 8px; }
.closer .small { font-size: var(--t-small); color: var(--ink-soft); }
.closer .small a { color: var(--ink); }
/* with a form: words left, the form in a white window right */
.closer.with-form .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; justify-items: start; align-items: center; gap: clamp(32px, 5vw, 80px); }
.closer.with-form .panel > div { display: grid; gap: 20px; }

/* ---------- forms: HubSpot's own form, embedded, dressed in the page's look ---------- */
.form-window { width: 100%; 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); padding: clamp(20px, 2.6vw, 32px); text-align: left; }
.form-window .form-note { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: 12px; }
.hs-form-box { min-height: 200px; }
.hs-form-box form { display: grid; gap: 14px; font-family: "Outfit", system-ui, sans-serif !important; }
.hs-form-box fieldset { max-width: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; border: 0; padding: 0; margin: 0; }
.hs-form-box fieldset .hs-form-field { width: auto !important; float: none !important; padding: 0 !important; }
.hs-form-box fieldset .input { margin: 0 !important; }
.hs-form-box label { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.hs-form-box .hs-input:not([type=checkbox]):not([type=radio]) { width: 100% !important; height: 44px; border-radius: var(--r-m); border: 1px solid #cfd8e1; background: #fbfcfd; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink); }
.hs-form-box .hs-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.hs-form-box .legal-consent-container, .hs-form-box .hs-richtext, .hs-form-box .inputs-list { font-size: 12px; line-height: 1.4; color: var(--ink-soft); list-style: none; padding: 0; }
.hs-form-box .hs-error-msgs { list-style: none; padding: 0; color: #b3261e; font-size: 12px; }
.hs-form-box .hs-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--teal); color: var(--ink); border: 0; font: 500 15px/1 "Outfit", sans-serif; cursor: pointer; }
.hs-form-box .hs-button:hover { background: #5ce6cb; }
.hs-form-box iframe { width: 100% !important; }

/* ---------- the template's notes: what each part is for (template page only) ---------- */
.part-note { max-width: var(--page); margin: 0 auto; padding: 14px var(--inner); font-size: 13px; color: var(--sun-deep); background: #fff8ec; border-top: 1px dashed #e9c58c; border-bottom: 1px dashed #e9c58c; }
.part-note b { font-weight: 600; }

/* ---------- footer (the homepage's) ---------- */
.footer { background: var(--ink); color: #fff; padding: 88px 0 40px; }
.footer .cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 40px; }
.footer h2, .footer h3 { font: 500 11px/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 { padding: 0 22px; }
.footer input { flex: 1; min-width: 0; height: 44px; 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 input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.footer .social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; list-style: none; padding: 0; }
.footer .social a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: .85; }
.footer .social a:hover { opacity: 1; }
.footer .social svg { flex: none; }
.footer .legal { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 24px 0 0; padding: 0; font-size: 13px; color: #9fb3c6; }
.footer .legal a { text-decoration: none; }
.footer .legal a:hover { text-decoration: underline; color: #fff; }
/* The one-line legal strip, in place of the footer, on a page built with "footer: legal" (build.py; the AI report, 3 Nov). The page fills the window with the strip at its foot. */
.footer-legal { min-height: 100svh; display: flex; flex-direction: column; }
.footer-legal main { flex: 1 0 auto; display: grid; }
.legal-strip { background: var(--ink); color: #9fb3c6; font-size: 13px; line-height: 1.4; }
.legal-strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; padding-top: 12px; padding-bottom: 12px; }
.legal-strip ul { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 0; padding: 0; }
.legal-strip a { color: inherit; text-decoration: none; }
.legal-strip a:hover { text-decoration: underline; color: #fff; }
.footer .big-logo { margin-top: 96px; display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: 13px; color: #9fb3c6; }
.footer .big-logo img { height: clamp(48px, 8vw, 120px); width: auto; filter: brightness(0) invert(1); }
.footer details summary { list-style: none; cursor: default; }
.footer details summary::-webkit-details-marker { display: none; }

/* ---------- calm motion: content fades up once as its section arrives (only when the script runs) ---------- */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .btn .a svg, .link svg { transition: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .nav ul, .nav .right > a:not(.btn) { display: none; }
  .menu-btn { display: grid; place-items: center; margin-left: auto; }
  .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; }
  .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; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust .wrap { grid-template-columns: 1fr auto; }
  .trust-lab { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .nav { width: calc(100vw - 32px); min-width: 0; max-width: none; }
  .nav .wrap { padding: 0 6px 0 18px; }
  .nav .btn { display: none; }
  .topbar .wrap { justify-content: center; padding: 8px var(--gutter); }
  .topbar a { font-size: 14px; line-height: 1.35; letter-spacing: .04em; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .hero { min-height: 0; padding: calc(var(--navh) + 56px) 0 88px; }
  .hero h1 { max-width: none; }
  .split, .person, .courses, .closer.with-form .panel { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .tickgrid, .points, .cards, .figures { grid-template-columns: minmax(0, 1fr); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .other { grid-template-columns: minmax(0, 1fr); }
  .other .tile { width: 88px; }
  .path { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .person .pic { aspect-ratio: 1 / .9; }
  .footer .cols { grid-template-columns: 1fr; gap: 0; }
  .footer details { border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .footer details summary { padding: 18px 0; cursor: pointer; }
  .footer details h2, .footer details h3 { margin: 0; }
  .footer details ul { padding-bottom: 18px; }
  .footer .news { padding-top: 28px; }
  .footer .big-logo { flex-direction: column; align-items: start; margin-top: 56px; }
  .btn { white-space: normal; }
  .logos { gap: 48px; padding-right: 48px; }
  .logos img { height: 36px; }
  .lessons li { grid-template-columns: 28px 1fr; }
  .lessons li.no-n { grid-template-columns: 1fr; }
  .lessons .t { grid-column: 2; }
  .lessons li.no-n .t { grid-column: 1; }
}

/* ---------- sample-report window (the homepage's "Alignment Index: by team") ---------- */
.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; align-self: center; }
.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); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.window-body { padding: clamp(20px, 2.6vw, 36px); }
.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); }
.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%); }
.c-conf { background: var(--sun); }
.c-cap { background: var(--teal); }
.window .sample { font-size: 12px; color: var(--mute); margin-top: 14px; }
@media (max-width: 640px) { .window-bar img { display: none; } .window-bar span { white-space: nowrap; } .window-bar { padding: 12px 18px; } }

/* The client logo strip runs the full width of the screen (Oli, 4 Nov: "feels a bit weird to have that hemmed"). Its label and pause
   button stay in the page column, on one line above; the logos slide edge to edge, fading at both sides. */
.trust { overflow: hidden; }
.trust .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 24px; }
.trust .wrap > .trust-lab { grid-column: 1; grid-row: 1; }
.trust .wrap > .pause { grid-column: 2; grid-row: 1; }
.trust .wrap > .marquee { grid-column: 1 / -1; grid-row: 2; 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); }
/* "Trusted by 1,000+ organisations" at the screen's left padding, just above the strip, as on the homepage (draft 8.23, .cur-line.cur-logos; Oli, 4 Nov). */
.trust .wrap { max-width: none; }

/* Site-wide, 4 Nov (Oli: "the white space behind the trusted org banner, we can make that quite snug"): the logo strip's band
   hugs the "Trusted by" line above and the moving logos below (was 60% of a section's padding, 65px at 1366). */
.sec.tight.trust { padding: clamp(20px, 2.4vw, 32px) 0; }

/* Phone tap targets at least 44px tall (going-over point 48, Oli, 5 Nov): footer column, legal and social links, the webinar bar's link,
   the menu button and the logo strip's pause button. Desktop unchanged. */
@media (max-width: 768px) {
  .footer ul { gap: 0; }
  .footer .legal { gap: 0 24px; }
  .footer .social { gap: 0 20px; }
  .footer ul a, .footer .legal a, .footer .social a, .footer .news h2 a { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar .wrap { padding-top: 0; padding-bottom: 0; }
  .topbar a { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 0; }
  .topbar .tb-x { width: 44px; height: 44px; margin-right: -12px; }
  .menu-btn { width: 44px; height: 44px; flex: none; }
  .trust .pause { width: 44px; height: 44px; }
}

/* The footer's Debrief heading is a link while the sign-up form is off (build.py; Oli, 5 Nov: hidden until wired to HubSpot). */
.footer .news h2 a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(159, 179, 198, .5); }
.footer .news h2 a:hover { color: #fff; text-decoration-color: currentColor; }

/* Adam and Apira's notes, 9 Nov (adam-apira-notes-9nov/plan.md). Point 1: the AI Confidence Method, the main offer, 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 (build.py writes both). */
.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; }
}

/* Apira's CTA sheet, 10 Nov (apira-main-menu, points 1 and 2): the footer has a fourth list, The Assembly (Podcast, Blog, Debrief), and the Debrief
   sign-up is HubSpot's live form again, restyled for the dark footer. Four lists and the sign-up in one row on laptops; the sign-up takes its own row
   below the lists on tablets; phones keep the folding lists. */
@media (min-width: 768px) {
  .footer .cols { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 32px; }   /* five lists since Webinars joined (webinars split, 10 Nov): with four columns the sign-up fell to a narrow second row (Adam, 13 Nov) */
}
@media (min-width: 768px) and (max-width: 1100px) {
  .footer .cols { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 48px; }
  .footer .news { grid-column: 1 / -1; max-width: 560px; }
}
.footer .news-line { font-size: 14px; line-height: 1.5; color: #c9d6e2; margin: -8px 0 16px; }
.footer .foot-form { min-height: 132px; }
.footer .hs-form-box form { display: grid; gap: 10px; }
.footer .hs-form-box label { color: #c9d6e2; }
.footer .hs-form-box .hs-input:not([type=checkbox]):not([type=radio]) { flex: none; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; padding: 0 18px; }
.footer .hs-form-box .hs-input::placeholder { color: #9fb3c6; }
.footer .hs-form-box .hs-input:focus { outline: 2px solid var(--teal); outline-offset: 2px; border-color: transparent; }
.footer .hs-form-box .legal-consent-container, .footer .hs-form-box .hs-richtext, .footer .hs-form-box .inputs-list { color: #9fb3c6; }
.footer .hs-form-box .legal-consent-container a, .footer .hs-form-box .hs-richtext a { color: #fff; }
.footer .hs-form-box .hs-error-msgs { color: #ffb4ab; }
.footer .hs-form-box .submitted-message { color: #fff; font-size: 14px; }
.footer .hs-form-box .note-sm { color: #9fb3c6; padding: 8px 0 !important; }
@media (max-width: 767px) {
  .footer .news-line { margin-top: 0; }
}

/* 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; }
}
/* Phone checks, 10 Nov (checklist 152), phones and tablets only, desktop unchanged: form text at 16px, so iOS Safari doesn't zoom on focus
   (was 15px; 14px in the homepage footer), and consent checkboxes 20px square (were about 12px). */
@media (max-width: 1100px) {
  .hs-form-box .hs-input:not([type=checkbox]):not([type=radio]), .footer .hs-form-box .hs-input:not([type=checkbox]):not([type=radio]), .footer input:not([type=checkbox]):not([type=radio]):not([type=submit]) { font-size: 16px; }
  .hs-form-box .inputs-list label { display: flex; align-items: flex-start; gap: 10px; }
  .hs-form-box .inputs-list label > span { margin-left: 0; }
  .hs-form-box input[type=checkbox], .footer .hs-form-box input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 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; }