@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;900&display=swap");

/* ── source: tailwind.generated.css ── */
:root{--ax-navy:#1b2a4a;--ax-navy-deep:#131d30;--ax-pink:#e93f8e;--ax-cyan:#088abf;--ax-amber:#fea700;--ax-purple:#882de7;--ax-green:#1fbd53;--ax-blue:#3477f5;--ax-white:#fff;--ax-off-white:#f8fafc;--ax-surface-2:#f1f5f9;--ax-pale-blue:#f0f9ff;--ax-paper:#faf8f3;--ax-paper-deep:#f1ede2;--ax-cyan-light:#c8f9fe;--ax-pink-light:#fce3f1;--ax-purple-light:#f1e5ff;--ax-slate-dark:#334155;--ax-slate-medium:#475569;--ax-slate-light:#64748b;--ax-border:#e2e8f0;--ax-border-strong:#cbd5e1;--ax-deep-blue:#0c4a6e;--ax-success:#22c55e;--ax-error:#ef4444;--ax-warning:#f59e0b;--ax-star:#f5c542;--fg-1:var(--ax-navy);--fg-2:var(--ax-slate-dark);--fg-3:var(--ax-slate-medium);--fg-4:var(--ax-slate-light);--fg-on-dark:var(--ax-white);--fg-muted-on-dark:var(--ax-border-strong);--fg-on-paper:var(--ax-navy);--fg-body-on-paper:var(--ax-slate-medium);--bg-1:var(--ax-white);--bg-2:var(--ax-off-white);--bg-3:var(--ax-surface-2);--bg-paper:var(--ax-paper);--bg-paper-deep:var(--ax-paper-deep);--bg-dark:var(--ax-navy);--bg-darker:var(--ax-navy-deep);--border-1:var(--ax-border);--border-2:var(--ax-border-strong);--border-paper:rgba(27,42,74,.1);--surface-primary-subtle:rgba(8,138,191,.12);--surface-accent-subtle:rgba(233,63,142,.14);--surface-amber-subtle:rgba(254,167,0,.14);--surface-green-subtle:rgba(31,189,83,.15);--surface-muted-subtle:rgba(100,116,139,.15);--surface-navy-subtle:rgba(27,42,74,.1);--action-primary:var(--ax-cyan);--action-primary-hover:#06729f;--action-accent:var(--ax-pink);--action-accent-hover:#d6357f;--focus-ring:0 0 0 3px rgba(8,138,191,.4);--focus-ring-on-dark:0 0 0 3px rgba(233,63,142,.5);--font-system:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Liberation Sans",sans-serif;--font-body:var(--font-system);--font-display:"Figtree",var(--font-system);--font-deck:Arial,"Helvetica Neue",sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;--lh-tight:1.0;--lh-snug:1.2;--lh-normal:1.5;--lh-relaxed:1.6;--lh-loose:1.75;--tracking-tight:-0.05em;--tracking-snug:-0.01em;--tracking-normal:0;--tracking-wide:0.08em;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--container-tight:720px;--container-default:1200px;--container-wide:1440px;--gutter-mobile:1.5rem;--gutter-tablet:2rem;--gutter-desktop:2rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--shadow-card-hover:0 4px 8px rgba(0,0,0,.04),0 12px 24px rgba(0,0,0,.08);--shadow-button-hover:0 4px 12px rgba(0,0,0,.15);--shadow-on-navy:0 12px 30px rgba(13,27,63,.18);--ease-out:cubic-bezier(0.25,0.1,0.25,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--dur-fast:150ms;--dur-base:200ms;--dur-slow:300ms;--dur-page:600ms;--dur-reveal:800ms;--btn-sm-height:2rem;--btn-md-height:2.5rem;--btn-lg-height:3rem;--btn-sm-padding:0 0.75rem;--btn-md-padding:0 1rem;--btn-lg-padding:0 1.5rem;--input-height:2.75rem;--input-padding:0 0.875rem;--input-border-width:1px;--input-radius:var(--radius-md);--disabled-opacity:0.5}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--fg-1);background:var(--bg-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}.surface-paper{background:var(--bg-paper);color:var(--fg-on-paper)}.surface-paper p{color:var(--fg-body-on-paper)}.surface-paper a{color:var(--ax-cyan)}.surface-paper a:hover{color:var(--ax-pink)}.surface-dark{background:var(--bg-dark);color:var(--fg-on-dark)}.surface-dark p{color:var(--fg-muted-on-dark)}.surface-dark a{color:var(--ax-pink)}.surface-dark :focus-visible{box-shadow:var(--focus-ring-on-dark)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--fg-1);margin:0 0 var(--space-4);letter-spacing:var(--tracking-snug);text-wrap:balance}h1{font-size:var(--text-5xl)}h1,h2{font-weight:var(--fw-bold);line-height:var(--lh-snug)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl);font-weight:var(--fw-bold)}h3,h4{line-height:var(--lh-snug)}h4{font-size:var(--text-2xl)}h4,h5{font-weight:var(--fw-semibold)}h5{font-size:var(--text-xl)}h6{font-size:var(--text-lg);font-weight:var(--fw-semibold)}.ax-display{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);font-size:clamp(2rem,4vw + 1rem,3.75rem);text-wrap:balance}.ax-display--xl{font-size:clamp(2.5rem,6vw + 1rem,4.5rem);font-weight:var(--fw-black)}.ax-kicker{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--action-primary);margin-bottom:var(--space-3)}.ax-kicker--accent{color:var(--action-accent)}p{margin:0 0 var(--space-4);color:var(--fg-3);text-wrap:pretty}.lead,p{line-height:var(--lh-relaxed)}.lead{font-size:var(--text-lg);color:var(--fg-2)}.caption,small{font-size:var(--text-sm);color:var(--fg-4)}code,kbd,pre,samp{font-family:var(--font-mono);font-size:.95em}code{padding:.125em .375em;background:var(--bg-3);border-radius:var(--radius-sm);color:var(--fg-1)}a{color:var(--action-primary);text-decoration:none;transition:color var(--dur-base) var(--ease-out)}a:not(.btn):hover{color:var(--action-accent)}::-moz-selection{background:rgba(233,63,142,.22)}::selection{background:rgba(233,63,142,.22)}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--btn-md-height);padding:var(--btn-md-padding);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);line-height:1;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}.btn:focus-visible{box-shadow:var(--focus-ring)}.btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.btn--sm{height:var(--btn-sm-height);padding:var(--btn-sm-padding);font-size:var(--text-xs)}.btn--lg{height:var(--btn-lg-height);padding:var(--btn-lg-padding);font-size:var(--text-base)}.btn--primary{background:var(--ax-navy);color:var(--fg-on-dark)}.btn--primary:hover{background:var(--ax-navy-deep);box-shadow:var(--shadow-button-hover);transform:translateY(-1px)}.btn--accent{background:var(--action-accent);color:var(--fg-on-dark)}.btn--accent:hover{background:var(--action-accent-hover);box-shadow:var(--shadow-button-hover);transform:translateY(-1px)}.btn--outline{background:transparent;color:var(--fg-1);border-color:var(--ax-navy)}.btn--outline:hover{background:rgba(27,42,74,.06)}.btn--ghost{background:transparent;color:var(--fg-1)}.btn--ghost:hover{background:rgba(27,42,74,.04)}.btn--link{background:transparent;color:var(--action-primary);padding:0;height:auto}.btn--link:hover{color:var(--action-accent);text-decoration:underline}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field-label{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--fg-1)}.field-label .required{color:var(--ax-pink);margin-left:2px}.input,.select,.textarea{width:100%;height:var(--input-height);padding:var(--input-padding);font-family:var(--font-body);font-size:var(--text-base);color:var(--fg-1);background:var(--bg-1);border:var(--input-border-width) solid var(--border-1);border-radius:var(--input-radius);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}.input:hover,.select:hover,.textarea:hover{border-color:var(--border-2)}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ax-cyan);box-shadow:var(--focus-ring)}.textarea{height:auto;min-height:6rem;padding:var(--space-3) .875rem;resize:vertical}.input--error{border-color:var(--ax-error)}.input--error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.3)}.input:disabled{background:var(--bg-3);color:var(--fg-4);cursor:not-allowed}.field-helper{font-size:var(--text-sm);color:var(--fg-4)}.field-helper--error{color:var(--ax-error)}.chip{display:inline-flex;align-items:center;gap:var(--space-1);height:1.75rem;padding:0 var(--space-3);font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--fg-2);background:var(--bg-3);border-radius:var(--radius-full);border:1px solid transparent;cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}.chip:hover{background:var(--border-1)}.chip--selected,.chip[aria-selected=true]{background:var(--ax-navy);color:var(--fg-on-dark)}.chip--kicker{font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--action-primary);background:rgba(8,138,191,.1)}.pill-success{background:rgba(31,189,83,.12);color:#15803d}.pill-error{background:rgba(239,68,68,.12);color:#b91c1c}.pill-warning{background:rgba(254,167,0,.18);color:#7a5400}.ax-x{color:var(--ax-pink);font-family:var(--font-display);font-weight:var(--fw-bold);font-style:normal}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:3rem;margin-bottom:3rem}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-\[70ch\]{max-width:70ch}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.bg-navy{background-color:var(--ax-navy)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pt-16{padding-top:4rem}.pt-5{padding-top:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.font-display{font-family:Figtree,system-ui,sans-serif}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber{color:var(--ax-amber)}.text-navy{color:var(--ax-navy)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}@media (min-width:640px){.sm\:hidden{display:none}.sm\:h-6{height:1.5rem}.sm\:h-7{height:1.75rem}}@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}}@media (min-width:1024px){.lg\:mt-0{margin-top:0}.lg\:mt-16{margin-top:4rem}.lg\:grid{display:grid}.lg\:w-2\/5{width:40%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(420px\2c 560px\)\]{grid-template-columns:minmax(0,1fr) minmax(420px,560px)}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:gap-12{gap:3rem}.lg\:gap-16{gap:4rem}.lg\:p-8{padding:2rem}.lg\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:text-left{text-align:left}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}}

/* ── source: tokens.css ── */
/* ===========================================================================
   ACCELERATOR X — Design System Tokens
   Version: 2.0 · 16 May 2026
   Single source of truth for colour, type, spacing, radii, shadows, motion.
   Supersedes colors_and_type.css.

   See DESIGN.md for principles. See tokens.json for interop.
   =========================================================================== */

/* Figtree — display headlines only. Falls back to system stack if blocked. */


:root {
  /* ==========================================================================
     1. BRAND COLOUR TOKENS — paint to a name, not a role
     ========================================================================== */

  /* Brand core ---------------------------------------------------------------- */
  --ax-navy:           #1B2A4A;  /* Primary dark */
  --ax-navy-deep:      #131D30;  /* Section dividers, footer bars */
  --ax-pink:           #E93F8E;  /* Signature — the X, CTAs, emphasis */
  --ax-cyan:           #088ABF;  /* Web "go", data callouts, links */
  --ax-amber:          #FEA700;  /* Outputs, highlights, warnings */
  --ax-purple:         #882DE7;  /* Quaternary */
  --ax-green:          #1FBD53;  /* Success */
  --ax-blue:           #3477F5;  /* Functional blue */

  /* Surfaces — cool family --------------------------------------------------- */
  --ax-white:          #FFFFFF;
  --ax-off-white:      #F8FAFC;  /* Secondary cool light */
  --ax-surface-2:      #F1F5F9;  /* Tertiary cool */
  --ax-pale-blue:      #F0F9FF;  /* Tinted callout */

  /* Surfaces — warm family (NEW in v2) -------------------------------------- */
  --ax-paper:          #FAF8F3;  /* Warm ivory — editorial/longform */
  --ax-paper-deep:     #F1EDE2;  /* Recessed warm — cards on paper */

  /* Pastel washes ------------------------------------------------------------ */
  --ax-cyan-light:     #C8F9FE;
  --ax-pink-light:     #FCE3F1;
  --ax-purple-light:   #F1E5FF;

  /* Slate text scale --------------------------------------------------------- */
  --ax-slate-dark:     #334155;
  --ax-slate-medium:   #475569;
  --ax-slate-light:    #64748B;
  --ax-border:         #E2E8F0;
  --ax-border-strong:  #CBD5E1;
  --ax-deep-blue:      #0C4A6E;

  /* Semantic state ---------------------------------------------------------- */
  --ax-success:        #22C55E;
  --ax-error:          #EF4444;
  --ax-warning:        #F59E0B;
  --ax-star:           #F5C542;

  /* ==========================================================================
     2. SEMANTIC ALIASES — paint to role, not to colour
     Components should reference these, not the --ax-* tokens above.
     ========================================================================== */

  /* Foreground */
  --fg-1:               var(--ax-navy);          /* Primary text */
  --fg-2:               var(--ax-slate-dark);    /* Secondary */
  --fg-3:               var(--ax-slate-medium);  /* Body */
  --fg-4:               var(--ax-slate-light);   /* Captions */
  --fg-on-dark:         var(--ax-white);
  --fg-muted-on-dark:   var(--ax-border-strong);
  --fg-on-paper:        var(--ax-navy);
  --fg-body-on-paper:   var(--ax-slate-medium);

  /* Background */
  --bg-1:               var(--ax-white);
  --bg-2:               var(--ax-off-white);
  --bg-3:               var(--ax-surface-2);
  --bg-paper:           var(--ax-paper);
  --bg-paper-deep:      var(--ax-paper-deep);
  --bg-dark:            var(--ax-navy);
  --bg-darker:          var(--ax-navy-deep);

  /* Lines */
  --border-1:           var(--ax-border);
  --border-2:           var(--ax-border-strong);
  --border-paper:       rgba(27, 42, 74, 0.10);    /* Softer for warm surfaces */

  /* Tinted surfaces — subtle bg overlays for chips, rows, and section columns */
  --surface-primary-subtle:  rgba(8, 138, 191, 0.12);   /* ~12% cyan */
  --surface-accent-subtle:   rgba(233, 63, 142, 0.14);  /* 14% pink */
  --surface-amber-subtle:    rgba(254, 167, 0, 0.14);   /* 14% amber */
  --surface-green-subtle:    rgba(31, 189, 83, 0.15);   /* 15% green */
  --surface-muted-subtle:    rgba(100, 116, 139, 0.15); /* 15% slate */
  --surface-navy-subtle:     rgba(27, 42, 74, 0.10);    /* 10% navy */

  /* Action */
  --action-primary:     var(--ax-cyan);
  --action-primary-hover: #06729F;                 /* cyan -10% */
  --action-accent:      var(--ax-pink);
  --action-accent-hover: #D6357F;                  /* pink -8% */

  /* Focus ring — verified accessible against every surface */
  --focus-ring:         0 0 0 3px rgba(8, 138, 191, 0.4);
  --focus-ring-on-dark: 0 0 0 3px rgba(233, 63, 142, 0.5);

  /* ==========================================================================
     3. TYPOGRAPHY
     ========================================================================== */

  /* System stack — body & UI, always native, no font files */
  --font-system:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, "Liberation Sans", sans-serif;

  --font-body:    var(--font-system);
  --font-display: "Figtree", var(--font-system);
  --font-deck:    Arial, "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale (rem; 1rem = 16px) ------------------------------------------------ */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.5rem;    /* 72 — display hero only */

  /* Weights ----------------------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;     /* Figtree only — for the boldest display moments */

  /* Line-heights ------------------------------------------------------------ */
  --lh-tight:   1.0;      /* Display headlines */
  --lh-snug:    1.2;      /* Headings */
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;      /* Default body */
  --lh-loose:   1.75;     /* Long-form prose */

  /* Letter-spacing --------------------------------------------------------- */
  --tracking-tight:  -0.05em;   /* AX big-display signature */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.08em;   /* UPPERCASE eyebrows */

  /* ==========================================================================
     4. SPACING — 4px scale
     ========================================================================== */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ==========================================================================
     5. LAYOUT — containers
     ========================================================================== */
  --container-tight:    720px;    /* Article body */
  --container-default:  1200px;   /* Marketing sections */
  --container-wide:     1440px;   /* Full-feel sections */
  --gutter-mobile:      1.5rem;   /* 24px */
  --gutter-tablet:      2rem;     /* 32px */
  --gutter-desktop:     2rem;     /* 32px, occasionally 3rem */

  /* ==========================================================================
     6. RADII
     ========================================================================== */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ==========================================================================
     7. SHADOWS
     ========================================================================== */
  --shadow-sm:           0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:           0 4px 6px -1px rgba(0,0,0,0.10),
                         0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:           0 10px 15px -3px rgba(0,0,0,0.10),
                         0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:           0 20px 25px -5px rgba(0,0,0,0.10),
                         0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-card-hover:   0 4px 8px rgba(0,0,0,0.04),
                         0 12px 24px rgba(0,0,0,0.08);
  --shadow-button-hover: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-on-navy:      0 12px 30px rgba(13,27,63,0.18);

  /* ==========================================================================
     8. MOTION
     ========================================================================== */
  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --dur-page:   600ms;
  --dur-reveal: 800ms;

  /* ==========================================================================
     9. COMPONENT STATE TOKENS
     For buttons, inputs, chips. Use these so components stay consistent.
     ========================================================================== */

  /* Button heights */
  --btn-sm-height: 2rem;       /* 32px */
  --btn-md-height: 2.5rem;     /* 40px */
  --btn-lg-height: 3rem;       /* 48px */

  /* Button padding */
  --btn-sm-padding: 0 0.75rem;
  --btn-md-padding: 0 1rem;
  --btn-lg-padding: 0 1.5rem;

  /* Input */
  --input-height: 2.75rem;     /* 44px — accessible minimum */
  --input-padding: 0 0.875rem;
  --input-border-width: 1px;
  --input-radius: var(--radius-md);

  /* Disabled */
  --disabled-opacity: 0.5;
}


/* =============================================================================
   10. SEMANTIC ELEMENT STYLES
   Default-styled HTML primitives.
   ============================================================================= */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Surface modifiers — apply to <body> or a section root */
.surface-paper { background: var(--bg-paper); color: var(--fg-on-paper); }
.surface-paper p { color: var(--fg-body-on-paper); }
.surface-paper a { color: var(--ax-cyan); }
.surface-paper a:hover { color: var(--ax-pink); }

.surface-dark { background: var(--bg-dark); color: var(--fg-on-dark); }
.surface-dark p { color: var(--fg-muted-on-dark); }
.surface-dark a { color: var(--ax-pink); }
.surface-dark :focus-visible { box-shadow: var(--focus-ring-on-dark); }

/* Headings ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h2 { font-size: var(--text-4xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h3 { font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h5 { font-size: var(--text-xl); font-weight: var(--fw-semibold); }
h6 { font-size: var(--text-lg); font-weight: var(--fw-semibold); }

/* The signature AX display — tight tracking, weight 700, fluid sizing */
.ax-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-size: clamp(2rem, 4vw + 1rem, 3.75rem);
  text-wrap: balance;
}
.ax-display--xl {
  font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  font-weight: var(--fw-black);
}

/* Eyebrow / kicker */
.ax-kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
  margin-bottom: var(--space-3);
}
.ax-kicker--accent { color: var(--action-accent); }

/* Body --------------------------------------------------------------------- */
p {
  margin: 0 0 var(--space-4);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-4);
}

/* Code / mono -------------------------------------------------------------- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  padding: 0.125em 0.375em;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

/* Links -------------------------------------------------------------------- */
a {
  color: var(--action-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
/* Buttons manage their own hover colour — don't let the global link-hover
   repaint anchor-button text (was turning .btn--accent text pink-on-pink). */
a:not(.btn):hover { color: var(--action-accent); }

/* Selection / focus ------------------------------------------------------- */
::selection { background: rgba(233, 63, 142, 0.22); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =============================================================================
   11. COMPONENT PRIMITIVES — buttons, inputs, chips
   These are spec'd in DESIGN.md §9. Implementations live with the components.
   The classes below are reference / convenience.
   ============================================================================= */

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-md-height);
  padding: var(--btn-md-padding);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color    var(--dur-base) var(--ease-out),
    color           var(--dur-base) var(--ease-out),
    box-shadow      var(--dur-base) var(--ease-out),
    transform       var(--dur-base) var(--ease-out);
}
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

.btn--sm { height: var(--btn-sm-height); padding: var(--btn-sm-padding); font-size: var(--text-xs); }
.btn--lg { height: var(--btn-lg-height); padding: var(--btn-lg-padding); font-size: var(--text-base); }

.btn--primary {
  background: var(--ax-navy);
  color: var(--fg-on-dark);
}
.btn--primary:hover {
  background: var(--ax-navy-deep);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--action-accent);
  color: var(--fg-on-dark);
}
.btn--accent:hover {
  background: var(--action-accent-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--ax-navy);
}
.btn--outline:hover {
  background: rgba(27, 42, 74, 0.06);
}

.btn--ghost {
  background: transparent;
  color: var(--fg-1);
}
.btn--ghost:hover {
  background: rgba(27, 42, 74, 0.04);
}

.btn--link {
  background: transparent;
  color: var(--action-primary);
  padding: 0;
  height: auto;
}
.btn--link:hover {
  color: var(--action-accent);
  text-decoration: underline;
}

/* --- Form inputs --------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.field-label .required { color: var(--ax-pink); margin-left: 2px; }

.input,
.select,
.textarea {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--bg-1);
  border: var(--input-border-width) solid var(--border-1);
  border-radius: var(--input-radius);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--border-2); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ax-cyan);
  box-shadow: var(--focus-ring);
}

.textarea { height: auto; min-height: 6rem; padding: var(--space-3) 0.875rem; resize: vertical; }

.input--error { border-color: var(--ax-error); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); }

.input:disabled {
  background: var(--bg-3);
  color: var(--fg-4);
  cursor: not-allowed;
}

.field-helper {
  font-size: var(--text-sm);
  color: var(--fg-4);
}
.field-helper--error { color: var(--ax-error); }

/* --- Chips / tags --------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.75rem;            /* 28px */
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  background: var(--bg-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}
.chip:hover { background: var(--border-1); }
.chip[aria-selected="true"],
.chip--selected {
  background: var(--ax-navy);
  color: var(--fg-on-dark);
}

.chip--kicker {
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
  background: rgba(8, 138, 191, 0.1);
}

.pill-success { background: rgba(31, 189, 83, 0.12); color: #15803d; }
.pill-error   { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.pill-warning { background: rgba(254, 167, 0, 0.18); color: #7a5400; }

/* --- Pink X motif --------------------------------------------------------- */
.ax-x {
  color: var(--ax-pink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: normal;
}

/* ── source: components/AlternativesGrid.css ── */
/* =============================================================================
   AlternativesGrid — competitive comparison table / card stack
   Markup: _templates/components/AlternativesGrid.html
   Used on: /programmes/leadership-cohort (and future funnel pages)

   Responsive strategy (no JS):
     < 768px  → stacked cards, one per alternative, AX card last + highlighted
     ≥ 768px  → comparison table, AX column right + highlighted with navy header

   Purpose: name the alternatives the reader has already considered, then show
   clearly why each one has a ceiling. The goal is not to mock competitors —
   it is to help the reader articulate why they're still looking.
   ============================================================================= */

.ax-alternatives-grid {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

@media (min-width: 768px) {
  .ax-alternatives-grid { padding: var(--space-20) 0; }
}

.ax-alternatives-grid__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-alternatives-grid__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-alternatives-grid__inner { padding: 0 var(--gutter-desktop); }
}

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

.ax-alternatives-grid__heading {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-alternatives-grid__sub {
  margin: 0 0 var(--space-10);
  font-size: var(--text-lg);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

/* =============================================================================
   CARD LAYOUT  (< 768px)
   ============================================================================= */

.ax-alternatives-grid__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .ax-alternatives-grid__cards { display: none; }
}

.ax-alternatives-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* AX card gets navy border + subtle tint to stand out */
.ax-alternatives-card--ax {
  border: 2px solid var(--ax-navy);
  background: var(--surface-primary-subtle);
}

.ax-alternatives-card__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-alternatives-card--ax .ax-alternatives-card__label {
  color: var(--action-primary);
}

.ax-alternatives-card__verdict {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

.ax-alternatives-card__gap {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-4);
  font-style: italic;
  line-height: var(--lh-normal);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-1);
}

/* =============================================================================
   TABLE LAYOUT  (≥ 768px)
   ============================================================================= */

.ax-alternatives-grid__table {
  display: none;
}

@media (min-width: 768px) {
  .ax-alternatives-grid__table { display: table; width: 100%; border-collapse: collapse; }
}

/* Column widths: criterion | alt1 | alt2 | alt3 | AX */
.ax-alternatives-grid__table colgroup col:first-child { width: 18%; }
.ax-alternatives-grid__table colgroup col:nth-child(2) { width: 20%; }
.ax-alternatives-grid__table colgroup col:nth-child(3) { width: 20%; }
.ax-alternatives-grid__table colgroup col:nth-child(4) { width: 20%; }
.ax-alternatives-grid__table colgroup col:last-child   { width: 22%; }

/* Header row ---------------------------------------------------------------- */

.ax-alternatives-grid__thead { display: table-header-group; }
.ax-alternatives-grid__tbody { display: table-row-group; }
.ax-alternatives-grid__tr    { display: table-row; }

.ax-alternatives-grid__th,
.ax-alternatives-grid__td {
  display: table-cell;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-1);
}

/* Criterion column (first cell of each row) */
.ax-alternatives-grid__td--criterion {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  vertical-align: middle;
}

/* Alternative column headers */
.ax-alternatives-grid__th {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  background: var(--bg-3);
  border-bottom: 2px solid var(--border-2);
}

/* Empty top-left header cell */
.ax-alternatives-grid__th--empty {
  background: var(--bg-2);
}

/* AX column header — navy background, white text */
.ax-alternatives-grid__th--ax {
  background: var(--ax-navy);
  color: var(--fg-on-dark);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug);
  font-size: var(--text-base);
}

/* AX column body cells — cyan tint */
.ax-alternatives-grid__td--ax {
  background: var(--surface-primary-subtle);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* Data cells — alternative columns */
.ax-alternatives-grid__td {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

/* Tick / cross marks -------------------------------------------------------- */

.ax-alternatives-grid__tick {
  color: var(--ax-green);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
}

.ax-alternatives-grid__cross {
  color: var(--fg-4);
  font-size: var(--text-base);
}

/* Row hover ----------------------------------------------------------------- */

.ax-alternatives-grid__tr:hover .ax-alternatives-grid__td {
  background: var(--bg-3);
}

/* Don't override the AX column tint on hover */
.ax-alternatives-grid__tr:hover .ax-alternatives-grid__td--ax {
  background: var(--surface-primary-subtle);
}

/* ── source: components/ApplyForm.css ── */
/* ApplyForm — 3-section application form
   Namespace: ax-apply-form
   Wave D — Phase 2 */

.ax-apply-form,
.ax-apply-form__success {
  max-width: 640px;
  margin-inline: auto;
}

/* ── Sections ────────────────────────────────────────── */

.ax-apply-form__section {
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-1);
}

.ax-apply-form__section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.ax-apply-form__section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

.ax-apply-form__section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-on-dark);
  background: var(--ax-navy);
  border-radius: var(--radius-full);
}

.ax-apply-form__fields {
  display: grid;
  gap: var(--space-5);
}

/* ── Chip radio group ────────────────────────────────── */

.ax-apply-form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* float: left forces legend to behave as a block in grid context */
.ax-apply-form__fieldset legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-3);
}

.ax-apply-form__chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  clear: left;
}

/* Visually hidden radio inputs — accessible to keyboard + screen reader */
.chip-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chip-radio:checked + .chip {
  background: var(--ax-navy);
  color: var(--fg-on-dark);
  border-color: transparent;
}

.chip-radio:focus-visible + .chip {
  outline: 2px solid var(--action-primary);
  outline-offset: 2px;
}

/* ── Footer — consent + submit ───────────────────────── */

.ax-apply-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-1);
}

.ax-apply-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.ax-apply-form__consent-check {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--ax-navy);
  cursor: pointer;
}

.ax-apply-form__consent-text {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--leading-relaxed);
}

.ax-apply-form__consent-link {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ax-apply-form__consent-link:hover { color: var(--fg-1); }

.ax-apply-form__sla {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--fg-4);
  margin: 0;
}

.ax-apply-form__submit { width: 100%; }

/* ── Success state ───────────────────────────────────── */

.ax-apply-form__success {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.ax-apply-form__success-icon {
  font-size: 3rem;
  color: var(--ax-pink);
}

.ax-apply-form__success-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: var(--space-3) 0 var(--space-2);
}

.ax-apply-form__success-body {
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--leading-relaxed);
}

.ax-apply-form__success-body a {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================================================
   Dark-surface overrides — scoped to .ax-apply-section (dark navy bg)
   The base component above uses light-bg tokens (--fg-1 etc).
   These overrides apply only when the form sits on the dark section wrapper.
   ============================================================================= */

.ax-apply-section .ax-apply-form__section-heading { color: var(--fg-on-dark); }

.ax-apply-section .ax-apply-form__section-num { background: rgba(255, 255, 255, 0.12); }

.ax-apply-section .field-label { color: var(--fg-on-dark); }

.ax-apply-section .chip-radio:checked + .chip {
  background: rgba(255, 255, 255, 0.18);
  color: var(--fg-on-dark);
  border-color: rgba(255, 255, 255, 0.3);
}

.ax-apply-section .ax-apply-form__consent-text { color: var(--fg-muted-on-dark); }
.ax-apply-section .ax-apply-form__consent-link:hover { color: var(--fg-on-dark); }
.ax-apply-section .ax-apply-form__sla { color: var(--fg-muted-on-dark); }

.ax-apply-section .ax-apply-form__submit { background: var(--action-accent); }
.ax-apply-section .ax-apply-form__submit:hover { background: var(--action-accent-hover); }

.ax-apply-section .ax-apply-form__success-heading { color: var(--fg-on-dark); }
.ax-apply-section .ax-apply-form__success-body { color: var(--fg-muted-on-dark); }

/* =============================================================================
   Apply section wrapper — homepage bottom CTA and /contact page
   ============================================================================= */

.ax-apply-section {
  background: var(--bg-dark);
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-apply-section { padding: var(--space-20) 0; }
}

.ax-apply-section__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-apply-section__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-apply-section__inner { padding: 0 var(--gutter-desktop); }
}

.ax-apply-section__header {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--space-12);
}

.ax-apply-section__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-apply-section__sub {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted-on-dark);
}

/* ── source: components/ArticleTile.css ── */
/* =============================================================================
   ArticleTile — format-aware content card
   Markup: _templates/components/ArticleTile.html
   Used on: /insights hub, home preview
   data-format="article"  → read time label
   data-format="podcast"  → duration + play affordance
   data-format="video"    → play button overlay on cover
   data-variant="standard" (default) | data-variant="feature" (wide lead card)
   ============================================================================= */

/* ============================================================
   STANDARD TILE
   ============================================================ */

.ax-article-tile {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out);
}

.ax-article-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Cover --------------------------------------------------------------------- */
.ax-article-tile__cover {
  aspect-ratio: 3 / 2;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.ax-article-tile__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.ax-article-tile:hover .ax-article-tile__cover img {
  transform: scale(1.03);
}

/* Play button overlay (video/podcast) */
.ax-article-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ax-article-tile__play-btn {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-1);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out);
}

.ax-article-tile:hover .ax-article-tile__play-btn {
  transform: scale(1.1);
}

/* Hide play for articles */
.ax-article-tile[data-format="article"] .ax-article-tile__play {
  display: none;
}

/* Body ---------------------------------------------------------------------- */
.ax-article-tile__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Format + category row */
.ax-article-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ax-article-tile__format {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* Format colour variants */
.ax-article-tile[data-format="article"]  .ax-article-tile__format {
  background: var(--surface-primary-subtle);
  color: var(--action-primary);
}

.ax-article-tile[data-format="podcast"]  .ax-article-tile__format {
  background: var(--surface-accent-subtle);
  color: var(--ax-pink);
}

.ax-article-tile[data-format="video"]    .ax-article-tile__format {
  background: var(--surface-amber-subtle);
  color: var(--ax-amber);
}

.ax-article-tile__category {
  font-size: var(--text-xs);
  color: var(--fg-4);
}

/* Heading ------------------------------------------------------------------- */
.ax-article-tile__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-article-tile__heading a {
  color: inherit;
  text-decoration: none;
}

.ax-article-tile__heading a:hover {
  color: var(--action-primary);
}

/* Sub ----------------------------------------------------------------------- */
.ax-article-tile__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  flex: 1;
}

/* Byline -------------------------------------------------------------------- */
.ax-article-tile__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
  margin-top: auto;
}

.ax-article-tile__author-date {
  font-size: var(--text-xs);
  color: var(--fg-4);
}

.ax-article-tile__duration {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FEATURE VARIANT — horizontal, wide lead card
   ============================================================ */

.ax-article-tile[data-variant="feature"] {
  flex-direction: column;
}

@media (min-width: 640px) {
  .ax-article-tile[data-variant="feature"] {
    flex-direction: row;
    min-height: 320px;
  }
}

.ax-article-tile[data-variant="feature"] .ax-article-tile__cover {
  aspect-ratio: auto;
}

@media (min-width: 640px) {
  .ax-article-tile[data-variant="feature"] .ax-article-tile__cover {
    width: 52%;
    flex-shrink: 0;
    min-height: 280px;
  }
}

.ax-article-tile[data-variant="feature"] .ax-article-tile__body {
  padding: var(--space-8);
  justify-content: space-between;
}

.ax-article-tile[data-variant="feature"] .ax-article-tile__heading {
  font-size: clamp(var(--text-2xl), 2.5vw, var(--text-4xl));
}

/* ── source: components/Buttons.css ── */
/* =============================================================================
   Buttons — extensions beyond tokens.css §11
   Base .btn variants and sizes live in tokens.css.
   ============================================================================= */

/* Full-width modifier */
.btn--full { width: 100%; }

/* Icon-only square button */
.btn--icon {
  width: var(--btn-md-height);
  padding: 0;
}
.btn--icon.btn--sm { width: var(--btn-sm-height); }
.btn--icon.btn--lg { width: var(--btn-lg-height); }

/* Loading state — pair with JS to swap in after click */
.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: var(--fg-on-dark);
}
.btn--outline.btn--loading::after,
.btn--ghost.btn--loading::after {
  color: var(--fg-1);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ── source: components/CTABand.css ── */
/* =============================================================================
   CTABand — full-width closing CTA section
   Markup: _templates/components/CTABand.html
   Single ask: "Apply to work with us" → /contact
   One CTA only — never add a second action to this component.
   ============================================================================= */

.ax-cta-band {
  background: var(--bg-paper);
  padding: var(--space-20) 0;
}

@media (min-width: 768px) {
  .ax-cta-band { padding: var(--space-24) 0; }
}

.ax-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}

@media (min-width: 768px) {
  .ax-cta-band__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-cta-band__inner { padding: 0 var(--gutter-desktop); }
}

/* Button -------------------------------------------------------------------- */
.ax-cta-band__btn { flex-shrink: 0; white-space: nowrap; }

/* Tiny subtitle beneath the button ------------------------------------------ */
.ax-cta-band__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* ── source: components/CaseTile.css ── */
/* =============================================================================
   CaseTile — case study card: sector · outcome metrics · cover · link
   Markup: _templates/components/CaseTile.html
   Used on: /case-studies index, home preview
   data-variant="standard" (default) | data-variant="feature" (wider lead card)
   ============================================================================= */

.ax-case-tile {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out);
}

.ax-case-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Cover image --------------------------------------------------------------- */
.ax-case-tile__cover {
  aspect-ratio: 3 / 2;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
}

.ax-case-tile[data-variant="feature"] .ax-case-tile__cover {
  aspect-ratio: 21 / 9;
}

.ax-case-tile__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.ax-case-tile:hover .ax-case-tile__cover img {
  transform: scale(1.03);
}

/* Body ---------------------------------------------------------------------- */
.ax-case-tile__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Meta chips ---------------------------------------------------------------- */
.ax-case-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ax-case-tile__sector {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-primary-subtle);
  color: var(--action-primary);
}

.ax-case-tile__meta-sep {
  color: var(--fg-4);
  font-size: var(--text-xs);
}

.ax-case-tile__meta-text {
  font-size: var(--text-xs);
  color: var(--fg-4);
}

/* Heading ------------------------------------------------------------------- */
.ax-case-tile__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-case-tile[data-variant="feature"] .ax-case-tile__heading {
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
}

/* Sub ----------------------------------------------------------------------- */
.ax-case-tile__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  flex: 1;
}

/* Metrics ------------------------------------------------------------------- */
.ax-case-tile__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
  margin-top: auto;
}

.ax-case-tile__metric-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--fg-1);
}

.ax-case-tile__metric-label {
  font-size: 10px;
  color: var(--fg-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-1);
}

/* ── source: components/Chips.css ── */
/* =============================================================================
   Chips — extensions beyond tokens.css §11
   Base .chip variants live in tokens.css.
   ============================================================================= */

/* Colour-tinted variants — brand accent chips */
.chip--cyan   { background: rgba(8, 138, 191, 0.10); color: var(--ax-cyan); }
.chip--pink   { background: rgba(233, 63, 142, 0.10); color: var(--ax-pink); }
.chip--amber  { background: rgba(254, 167, 0, 0.12); color: #7a5400; }
.chip--purple { background: rgba(136, 45, 231, 0.10); color: var(--ax-purple); }

/* On-dark variant — for chips placed on dark/navy backgrounds */
.chip--on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: var(--fg-on-dark);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Removable chip — add a dismiss × via JS */
.chip--removable { padding-right: var(--space-2); }
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  border-radius: var(--radius-full);
  font-size: 10px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.chip__remove:hover { opacity: 1; }

/* ── source: components/CohortList.css ── */
/* =============================================================================
   CohortList — active programme instance list
   Markup: _templates/components/CohortList.html
   Used on: offering detail pages when cohort programmes are live
   Hides itself: add [hidden] to .ax-cohort-list when no rows are present
   Data source: content/data/cohorts.json (wired in Phase 3)
   ============================================================================= */

.ax-cohort-list {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header -------------------------------------------------------------------- */

.ax-cohort-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
}

.ax-cohort-list__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ax-cohort-list__count {
  font-size: var(--text-xs);
  color: var(--fg-4);
}

/* Rows ---------------------------------------------------------------------- */

.ax-cohort-list__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-1);
  align-items: center;
}

.ax-cohort-list__row:last-child { border-bottom: none; }

@media (min-width: 640px) {
  .ax-cohort-list__row {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-4);
  }
}

/* Cells --------------------------------------------------------------------- */

.ax-cohort-list__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ax-cohort-list__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-cohort-list__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-cohort-list__sub {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* CTA cell ------------------------------------------------------------------ */

.ax-cohort-list__action { justify-self: start; }

@media (min-width: 640px) {
  .ax-cohort-list__action { justify-self: end; }
}

@media (max-width: 639px) {
  .ax-cohort-list__action { grid-column: 1 / -1; }
}

/* Empty state (shown when no cohorts — use instead of [hidden]) ------------- */

.ax-cohort-list__empty {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-4);
}

/* ── source: components/CompanyEnablement.css ── */
/* =============================================================================
   CompanyEnablement — page-specific styles for /what-we-do/company-enablement/
   Covers: offering hero, phase arc, bridge, streams, cycle chain, proof, CTA.
   All values reference design tokens from tokens.css.
   ============================================================================= */

/* =============================================================================
   1. OFFERING HERO — 2-col layout with sidebar investment card
   ============================================================================= */

.ax-offering-hero {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-16) 0;
}

.ax-offering-hero__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 768px) {
  .ax-offering-hero__inner {
    padding: 0 var(--gutter-tablet);
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .ax-offering-hero__inner {
    padding: 0 var(--gutter-desktop);
    grid-template-columns: 1fr 380px;
    gap: var(--space-16);
  }
}

.ax-offering-hero__chip {
  display: inline-block;
  margin-bottom: var(--space-5);
}

.ax-offering-hero__heading {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-offering-hero__heading em {
  font-style: normal;
}

.ax-offering-hero__sub {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* =============================================================================
   2. PHASE ARC — 2-panel row inside hero content column
   ============================================================================= */

.ax-phase-arc {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-1);
}

/* Single column on small screens; the two panels + arrow sit in a row once there's room. */
@media (min-width: 480px) {
  .ax-phase-arc { grid-template-columns: 1fr auto 1fr; }
}

.ax-phase-arc__panel {
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
}

.ax-phase-arc__panel--cyan {
  background: var(--ax-cyan);
  border-color: var(--ax-cyan);
  color: var(--ax-white);
}

.ax-phase-arc__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  color: inherit;
  opacity: 0.8;
}

.ax-phase-arc__panel--cyan .ax-phase-arc__eyebrow {
  opacity: 1;
  color: var(--ax-white);
}

.ax-phase-arc__spec {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: inherit;
}

.ax-phase-arc__panel:not(.ax-phase-arc__panel--cyan) .ax-phase-arc__spec {
  color: var(--fg-1);
}

.ax-phase-arc__detail {
  margin: 0;
  font-size: var(--text-sm);
  opacity: 0.85;
}

.ax-phase-arc__panel:not(.ax-phase-arc__panel--cyan) .ax-phase-arc__detail {
  color: var(--fg-3);
}

/* On cyan, the base 0.85 opacity drops faded white below legible contrast (#088ABF
   is already only ~3.9:1 with full white). Match the eyebrow's full-white override. */
.ax-phase-arc__panel--cyan .ax-phase-arc__detail {
  color: var(--ax-white);
  opacity: 1;
}

.ax-phase-arc__arrow {
  font-size: var(--text-2xl);
  color: var(--fg-4);
  flex-shrink: 0;
  text-align: center;
}

/* =============================================================================
   3. SIDEBAR INVESTMENT CARD
   ============================================================================= */

.ax-offering-hero__card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .ax-offering-hero__card {
    position: sticky;
    top: calc(var(--nav-height, 64px) + var(--space-6));
  }
}

.ax-offering-hero__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ax-offering-hero__card-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-offering-hero__specs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-1);
}

.ax-offering-hero__spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-1);
}

.ax-offering-hero__spec-row dt {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-weight: var(--fw-normal);
}

.ax-offering-hero__spec-row dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  text-align: right;
}

.ax-offering-hero__cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.ax-offering-hero__card-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-4);
  text-align: center;
  line-height: var(--lh-relaxed);
}

/* Pricing breakdown line inside the investment card (e.g. per-head model). */
.ax-offering-hero__card-pricing {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* "No value, no payment" guarantee line in the investment card. */
.ax-offering-hero__card-guarantee {
  margin: 0 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.ax-offering-hero__card-guarantee strong { color: var(--fg-1); }

/* Subtle inline aside within the hero sub paragraph (e.g. "very small group available"). */
.ax-offering-hero__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-4);
}

/* =============================================================================
   4. PHASE SECTIONS — Phase 0 in depth / Phase 1+ in depth
   ============================================================================= */

.ax-ce-phase {
  padding: var(--space-16) 0;
}

.ax-ce-phase--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-ce-phase__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-ce-phase__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-ce-phase__inner { padding: 0 var(--gutter-desktop); }
}

.ax-ce-phase__header {
  margin-bottom: var(--space-10);
}

.ax-ce-phase__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-ce-phase__heading em {
  font-style: italic;
}

.ax-ce-phase__sub {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* Phase 0 steps — 3-col overrides for ax-plan-layers__steps */
.ax-ce-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
}

@media (min-width: 640px) {
  .ax-ce-steps { grid-template-columns: repeat(3, 1fr); }
}

/* Phase 0 deliverables — 4-col overrides */
.ax-ce-deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-ce-deliverables { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   5. BRIDGE — centered dashed separator between phases
   ============================================================================= */

.ax-bridge {
  padding: var(--space-12) var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

@media (min-width: 768px) {
  .ax-bridge { padding: var(--space-12) var(--gutter-tablet); }
}

.ax-bridge__inner-box {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-xl);
  background: var(--bg-paper);
  padding: var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 480px;
  width: 100%;
}

.ax-bridge__arrow {
  font-size: var(--text-2xl);
  color: var(--fg-4);
}

.ax-bridge__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.ax-bridge__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* =============================================================================
   6. PHASE 1+ STREAMS — 3-col delivery stream cards
   ============================================================================= */

.ax-ce-streams {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .ax-ce-streams { grid-template-columns: repeat(3, 1fr); }
}

.ax-ce-stream {
  padding: var(--space-6);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.ax-ce-stream__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-primary);
  margin-bottom: var(--space-3);
}

.ax-ce-stream__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-ce-stream__body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   7. CYCLE CHAIN — horizontal arrow-connected phase series
   ============================================================================= */

.ax-cycle-chain {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ax-cycle-chain::-webkit-scrollbar { display: none; }

.ax-cycle-chain__item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  min-width: 150px;
}

.ax-cycle-chain__item--advisory {
  border-color: var(--ax-amber);
  background: color-mix(in srgb, var(--ax-amber) 8%, var(--bg-1));
}

.ax-cycle-chain__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}

.ax-cycle-chain__item--advisory .ax-cycle-chain__label {
  color: #7a5400;
}

.ax-cycle-chain__sub {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.ax-cycle-chain__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--text-lg);
  color: var(--fg-4);
  padding: 0 var(--space-1);
}

/* =============================================================================
   8. FAQ alt background override
   ============================================================================= */

.ax-faq-list--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

/* =============================================================================
   10. PROOF — 2-col quote + case study panel
   ============================================================================= */

.ax-ce-proof {
  padding: var(--space-16) 0;
}

.ax-ce-proof__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 768px) {
  .ax-ce-proof__inner {
    padding: 0 var(--gutter-tablet);
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}
@media (min-width: 1024px) {
  .ax-ce-proof__inner { padding: 0 var(--gutter-desktop); }
}

.ax-ce-proof__quote {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-ce-proof__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ax-ce-proof__who {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  font-style: normal;
  color: var(--fg-1);
}

.ax-ce-proof__context {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* Case study panel */
.ax-ce-proof__case-col {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ax-ce-proof__case-img {
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.ax-ce-proof__case-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.ax-ce-proof__case-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-4);
}

.ax-ce-proof__case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--action-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.ax-ce-proof__case-link:hover {
  color: var(--action-primary-hover);
  text-decoration: underline;
}

/* =============================================================================
   11. FINAL CTA — dark background closing section
   ============================================================================= */

.ax-ce-cta {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  padding: var(--space-16) 0;
  text-align: center;
}

.ax-ce-cta__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-ce-cta__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-ce-cta__inner { padding: 0 var(--gutter-desktop); }
}

.ax-ce-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-ce-cta__sub {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-muted-on-dark);
  line-height: var(--lh-relaxed);
  max-width: 55ch;
}

.ax-ce-cta__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
  opacity: 0.7;
}

/* =============================================================================
   12. ACCENT TEXT — pink highlight on headings
   ============================================================================= */

.ax-accent {
  color: var(--action-accent);
}

/* ── source: components/DeliverablesGrid.css ── */
/* =============================================================================
   DeliverablesGrid — numbered tiles showing what leaves the engagement
   Markup: _templates/components/DeliverablesGrid.html
   Used on: All offering detail pages, VSL
   Layout: 4-up at desktop → 2-up at tablet → 1-up at mobile. No truncation.
   ============================================================================= */

.ax-deliverables-grid {
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-deliverables-grid { padding: var(--space-20) 0; }
}

.ax-deliverables-grid--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-deliverables-grid__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-deliverables-grid__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-deliverables-grid__inner { padding: 0 var(--gutter-desktop); }
}

/* Header -------------------------------------------------------------------- */
.ax-deliverables-grid__header {
  margin-bottom: var(--space-8);
}

.ax-deliverables-grid__heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Grid ---------------------------------------------------------------------- */
.ax-deliverables-grid__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-deliverables-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ax-deliverables-grid__items {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tile ---------------------------------------------------------------------- */
.ax-deliverable {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ax-deliverable__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
}

.ax-deliverable__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.ax-deliverable__body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  flex: 1;
}

/* ── source: components/EventCard.css ── */
/* =============================================================================
   EventCard — event format tile
   Markup: _templates/components/EventCard.html
   Used on: /talks-events, /about
   data-variant="standard" (light) | data-variant="featured" (navy, inverted)
   ============================================================================= */

.ax-event-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out);
}

.ax-event-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Featured (dark) variant */
.ax-event-card[data-variant="featured"] {
  background: var(--bg-dark);
  border-color: transparent;
  color: var(--fg-on-dark);
}

/* Header row ---------------------------------------------------------------- */
.ax-event-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.ax-event-card[data-variant="featured"] .ax-event-card__header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.ax-event-card__kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
}

.ax-event-card[data-variant="featured"] .ax-event-card__kicker {
  color: var(--ax-pink);
}

.ax-event-card__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--action-primary);
  flex-shrink: 0;
}

.ax-event-card[data-variant="featured"] .ax-event-card__dot {
  background: var(--ax-pink);
}

/* Title --------------------------------------------------------------------- */
.ax-event-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-event-card[data-variant="featured"] .ax-event-card__title {
  color: var(--fg-on-dark);
}

/* Meta (duration + size) ---------------------------------------------------- */
.ax-event-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-4);
}

.ax-event-card__meta-strong {
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}

.ax-event-card[data-variant="featured"] .ax-event-card__meta {
  color: rgba(255, 255, 255, 0.55);
}

.ax-event-card[data-variant="featured"] .ax-event-card__meta-strong {
  color: var(--fg-on-dark);
}

/* Pitch --------------------------------------------------------------------- */
.ax-event-card__pitch {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  flex: 1;
}

.ax-event-card[data-variant="featured"] .ax-event-card__pitch {
  color: rgba(255, 255, 255, 0.78);
}

/* Outputs list -------------------------------------------------------------- */
.ax-event-card__outputs-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: var(--space-2);
}

.ax-event-card[data-variant="featured"] .ax-event-card__outputs-label {
  color: rgba(255, 255, 255, 0.55);
}

.ax-event-card__outputs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.ax-event-card[data-variant="featured"] .ax-event-card__outputs {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.ax-event-card__output {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.ax-event-card__output::before {
  content: '—';
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  color: var(--action-primary);
}

.ax-event-card[data-variant="featured"] .ax-event-card__output {
  color: var(--fg-on-dark);
}

.ax-event-card[data-variant="featured"] .ax-event-card__output::before {
  color: var(--ax-pink);
}

/* =============================================================================
   Empty state — shown when no events are scheduled yet
   ============================================================================= */

.ax-empty-state {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-1);
}

.ax-empty-state p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 55ch;
}

/* ── source: components/FAQList.css ── */
/* =============================================================================
   FAQList — numbered Q&A list, per-offering content
   Pattern only — no shared markup file. Each page hand-rolls its own
   .ax-faq-list / .ax-faq-item structure (see faq.html, offering pages).
   Used on: FAQ, offering details, About
   Mobile: accordion (collapsed by default). Desktop: open-by-default for scan.
   ============================================================================= */

.ax-faq-list {
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-faq-list { padding: var(--space-20) 0; }
}

.ax-faq-list__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-faq-list__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-faq-list__inner { padding: 0 var(--gutter-desktop); }
}

/* Header -------------------------------------------------------------------- */
.ax-faq-list__heading {
  margin: var(--space-3) 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Items --------------------------------------------------------------------- */
.ax-faq-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* FAQ item (uses <details>/<summary> for native accordion) */
.ax-faq-item {
  border-bottom: 1px solid var(--border-1);
}

.ax-faq-item:first-child {
  border-top: 1px solid var(--border-1);
}

.ax-faq-item summary {
  /* Remove default disclosure triangle */
  list-style: none;
}

.ax-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Question row */
.ax-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  user-select: none;
}

.ax-faq-item__question-text {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.ax-faq-item__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--fg-4);
  transition: transform var(--dur-base) var(--ease-out),
              color    var(--dur-base) var(--ease-out);
}

/* Rotate the + into an × when open. The [open] attribute lands on <details>,
   not on the .ax-faq-item <li> — target the details element directly. */
.ax-faq-item details[open] .ax-faq-item__icon {
  transform: rotate(45deg);
  color: var(--action-primary);
}

/* Answer */
.ax-faq-item__answer {
  padding: 0 0 var(--space-5);
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 65ch;
}

.ax-faq-item__answer p {
  margin: 0 0 var(--space-3);
}

.ax-faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* Desktop: open all by default (JS toggles data-desktop-open) --------------- */
@media (min-width: 1024px) {
  .ax-faq-item[data-desktop-open] {
    /* open attribute handled by JS on load */
  }
}

/* Hover state */
.ax-faq-item summary:hover .ax-faq-item__question-text {
  color: var(--action-primary);
}

/* Focus */
.ax-faq-item summary:focus-visible {
  outline: none;
}

.ax-faq-item summary:focus-visible .ax-faq-item__question {
  outline: 3px solid rgba(8, 138, 191, 0.4);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── source: components/FitCheck.css ── */
/* =============================================================================
   FitCheck — two-column honesty signal: right fit / not for you
   Markup: _templates/components/FitCheck.html
   Used on: All offering detail pages, VSL
   Layout: two-column at tablet+ → stacked at mobile (right-fit col first).
   ============================================================================= */

.ax-fit-check {
  padding: var(--space-16) 0;
  background: var(--bg-2);
}

@media (min-width: 768px) {
  .ax-fit-check { padding: var(--space-20) 0; }
}

/* Alt variant — same surface as the base, with hairline top/bottom rules to
   separate the section when it sits between same-coloured sections (offering pages).
   Consolidated here from CompanyEnablement.css / LeadershipCohort.css (see #49). */
.ax-fit-check--alt {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-fit-check__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-fit-check__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-fit-check__inner { padding: 0 var(--gutter-desktop); }
}

/* Header -------------------------------------------------------------------- */
.ax-fit-check__heading {
  margin: var(--space-3) 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Columns ------------------------------------------------------------------- */
.ax-fit-check__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-fit-check__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* Column -------------------------------------------------------------------- */
.ax-fit-check__col {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ax-fit-check__col--yes {
  border-color: var(--ax-green);
}

.ax-fit-check__col--no {
  border-color: var(--border-1);
}

.ax-fit-check__col-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

/* Icons — masked SVGs so they centre perfectly in the circle (text glyphs
   never do). Per-column custom props drive both the heading badge and the
   list markers: green check for "yes", soft slate minus for "no".
   Mask shape only — colour comes from --fc-color (token), so no hardcoded hex. */
.ax-fit-check__col--yes {
  --fc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --fc-color: var(--ax-green);
  --fc-bg: var(--surface-green-subtle);
}

.ax-fit-check__col--no {
  --fc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --fc-color: var(--ax-slate-medium);
  --fc-bg: var(--surface-muted-subtle);
}

.ax-fit-check__col-heading-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--fc-bg);
}

.ax-fit-check__col-heading-icon::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--fc-color);
  -webkit-mask: var(--fc-icon) center / contain no-repeat;
  mask: var(--fc-icon) center / contain no-repeat;
}

/* List ---------------------------------------------------------------------- */
.ax-fit-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ax-fit-check__item {
  position: relative;
  padding-left: calc(1.25rem + var(--space-2));
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* Marker badge (circle) + centred masked icon, pinned to the first line. */
.ax-fit-check__item::before,
.ax-fit-check__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25rem;
  height: 1.25rem;
}

.ax-fit-check__item::before {
  border-radius: var(--radius-full);
  background: var(--fc-bg);
}

.ax-fit-check__item::after {
  background-color: var(--fc-color);
  -webkit-mask: var(--fc-icon) center / 0.75rem no-repeat;
  mask: var(--fc-icon) center / 0.75rem no-repeat;
}

/* ── source: components/Footer.css ── */
/* =============================================================================
   Footer — dark three-column global footer
   Markup: _templates/components/Footer.html
   ============================================================================= */

.ax-footer {
  background: var(--bg-darker);
  color: var(--fg-muted-on-dark);
}

/* Dispatch band — top of the footer, above the link columns. Centred to the
   container; divider separates it from the columns below. */
.ax-footer__dispatch {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
  .ax-footer__dispatch { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-footer__dispatch { padding: 0 var(--gutter-desktop); }
}

/* Inner grid — brand + nav columns ------------------------------------------ */
.ax-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-footer__inner {
    grid-template-columns: 1.4fr 1fr;
    padding: var(--space-12) var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .ax-footer__inner {
    gap: var(--space-12);
    padding: var(--space-16) var(--gutter-desktop) var(--space-12);
  }
}

/* Brand column -------------------------------------------------------------- */
.ax-footer__logo { display: block; height: 28px; width: auto; }
.ax-footer__logo-link { display: inline-flex; }

.ax-footer__tagline {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
  line-height: var(--lh-relaxed);
  max-width: 280px;
}

.ax-footer__reg {
  margin: 0;
  font-size: var(--text-xs);
  color: rgba(203, 213, 225, 0.5);
}

/* Nav column ---------------------------------------------------------------- */
.ax-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ax-footer__nav-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.ax-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-footer__link {
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  display: inline-flex;
  align-items: center;
}
.ax-footer__link:hover { color: var(--fg-on-dark); }

.ax-footer__link--social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Newsletter signup now lives in the NewsletterSignup component (top-of-footer
   band, .ax-footer__dispatch); dark-context styling is in NewsletterSignup.css. */

/* Bottom bar ---------------------------------------------------------------- */
.ax-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter-mobile);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .ax-footer__bottom { padding: var(--space-5) var(--gutter-tablet); }
}

.ax-footer__legal {
  display: flex;
  gap: var(--space-5);
}

.ax-footer__legal-link {
  font-size: var(--text-sm);
  color: rgba(203, 213, 225, 0.5);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.ax-footer__legal-link:hover { color: var(--fg-muted-on-dark); }

.ax-footer__copyright {
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(203, 213, 225, 0.5);
}

/* ── source: components/FormInputs.css ── */
/* =============================================================================
   FormInputs — extensions beyond tokens.css §11
   Base .field, .input, .select, .textarea live in tokens.css.
   ============================================================================= */

/* Input group — prefix/suffix addons */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .input {
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.input-group .input:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group .input:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--bg-3);
  border: var(--input-border-width) solid var(--border-1);
  color: var(--fg-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.input-addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Custom checkbox / radio */
.check-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.check-field input[type="checkbox"],
.check-field input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border: var(--input-border-width) solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  margin-top: 2px;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.check-field input[type="radio"] { border-radius: var(--radius-full); }

.check-field input[type="checkbox"]:checked,
.check-field input[type="radio"]:checked {
  background: var(--ax-navy);
  border-color: var(--ax-navy);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.check-field input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='white'/%3E%3C/svg%3E");
  background-size: 12px;
}
.check-field input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.check-field__label {
  font-size: var(--text-sm);
  color: var(--fg-1);
  line-height: 1.5;
}

/* ── source: components/FounderCard.css ── */
/* =============================================================================
   FounderCard — founder profile tile: photo · name · bio · track record
   Pattern only — no shared markup file. Each page hand-rolls its own
   .ax-founder-card structure (see about.html, homepage-about.html,
   programmes/leadership-cohort.html).
   Used on: /about, home About snippet, /programmes/leadership-cohort
   ============================================================================= */

.ax-founder-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Identity header ----------------------------------------------------------- */
.ax-founder-card__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.ax-founder-card__portrait {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-3);
}

.ax-founder-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portrait placeholder (used when photo not yet available) */
.ax-founder-card__portrait-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--action-primary);
  background: var(--surface-primary-subtle);
}

.ax-founder-card__identity-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-founder-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

/* Social links */
.ax-founder-card__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.ax-founder-card__social-link {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-1);
  color: var(--fg-4);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.ax-founder-card__social-link:hover {
  color: var(--action-primary);
  border-color: var(--action-primary);
}

/* Bio ----------------------------------------------------------------------- */
.ax-founder-card__bio {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* Track record -------------------------------------------------------------- */
.ax-founder-card__track {
  margin-top: auto;   /* pin to the card bottom so both cards' track sections align regardless of bio length */
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
}

.ax-founder-card__track-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: var(--space-3);
}

.ax-founder-card__track-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ax-founder-card__track-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-1);
}

.ax-founder-card__track-item:last-child {
  border-bottom: none;
}

.ax-founder-card__track-item::before {
  content: '—';
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  color: var(--action-primary);
}

/* =============================================================================
   Founders section wrapper — homepage About snippet and /about page
   ============================================================================= */

.ax-founders-section {
  background: var(--bg-paper-deep);
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-founders-section { padding: var(--space-20) 0; }
}

.ax-founders-section__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-founders-section__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-founders-section__inner { padding: 0 var(--gutter-desktop); }
}

.ax-founders-section__heading {
  margin: var(--space-3) 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-founders-section__cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ax-founders-section__cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── source: components/LeadershipCoaching.css ── */
/* =============================================================================
   Leadership AI Coaching — Door 2 hub
   Markup: _templates/offerings/leadership-ai-coaching.html
   Flow: hero → "not a course" why-block (navy) → three depth cards (the chooser)
   → selection CTA. Cards are full <a> with a strong, obvious click affordance.
   ============================================================================= */

/* --- "Not a course" / what-to-expect (navy punctuation) ------------------ */
.ax-coaching-why {
  padding: var(--space-16) 0;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.ax-coaching-why__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) { .ax-coaching-why__inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .ax-coaching-why__inner { padding: 0 var(--gutter-desktop); } }

.ax-coaching-why__header { margin-bottom: var(--space-10); }

.ax-coaching-why__heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

/* Deterministic two-clause break on desktop (negations | the positive) so the
   heading lands as two clean lines, never orphaning "Not" or "a". Below 1024
   the line break is dropped and the heading wraps/balances naturally. */
.ax-coaching-why__heading br { display: none; }
@media (min-width: 1024px) {
  .ax-coaching-why__heading br { display: inline; }
}

.ax-coaching-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) { .ax-coaching-why__grid { grid-template-columns: repeat(2, 1fr); } }

.ax-coaching-why__point-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-on-dark);
}

.ax-coaching-why__point-body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-muted-on-dark);
  line-height: var(--lh-relaxed);
}

.ax-coaching-why__method {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-base);
  color: var(--fg-muted-on-dark);
  line-height: var(--lh-relaxed);
}

/* --- Three depths (the chooser) ------------------------------------------ */
.ax-depths {
  padding: var(--space-16) 0;
  background: var(--bg-1);
}

.ax-depths__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) { .ax-depths__inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .ax-depths__inner { padding: 0 var(--gutter-desktop); } }

.ax-depths__header { margin-bottom: var(--space-6); max-width: 60ch; }

.ax-depths__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-depths__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* Guarantee reassurance, sits right above the cards to de-risk the click */
.ax-depths__guarantee {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-accent-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.ax-depths__guarantee strong { color: var(--fg-1); }

.ax-depths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) { .ax-depths__grid { grid-template-columns: repeat(3, 1fr); } }

.ax-depths__refs {
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* Depth cards use the shared .ax-offer-card pattern (assets/css/components/OfferCard.css). */

/* --- Selection CTA (champagne; routes to a fit conversation, not "apply") - */
.ax-coaching-cta {
  padding: var(--space-20) 0;
  background: var(--bg-paper);
}

@media (min-width: 768px) { .ax-coaching-cta { padding: var(--space-24) 0; } }

.ax-coaching-cta__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}

.ax-coaching-cta__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-coaching-cta__sub {
  margin: 0 auto var(--space-6);
  max-width: 48ch;
  font-size: var(--text-base);
  color: var(--fg-3);
}

/* ── source: components/LeadershipCohort.css ── */
/* =============================================================================
   LeadershipCohort — page-specific styles for /what-we-do/leadership-cohort/
   Covers: who-is-this-for peer cards, plan steps 3-col override, fit-check/faq
   alt backgrounds, proof, final CTA.
   All values reference design tokens from tokens.css.
   Offering hero shared styles live in CompanyEnablement.css.
   ============================================================================= */

/* =============================================================================
   1. WHO IS THIS FOR — 3-col peer cards
   ============================================================================= */

.ax-lc-who {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-lc-who__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-lc-who__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-lc-who__inner { padding: 0 var(--gutter-desktop); }
}

.ax-lc-who__heading {
  margin: 0 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-lc-who__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .ax-lc-who__grid { grid-template-columns: repeat(3, 1fr); }
}

.ax-lc-peer-card {
  padding: var(--space-6);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.ax-lc-peer-card__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ax-cyan);
  margin-bottom: var(--space-3);
}

.ax-lc-peer-card__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-lc-peer-card__body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   2. PLAN STEPS — 3-col grid override (mirrors ax-ce-steps)
   ============================================================================= */

.ax-lc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .ax-lc-steps { grid-template-columns: repeat(3, 1fr); }
}

/* 3-col grid: remove the vertical rule that only works for stacked layout */
.ax-lc-steps::before { display: none; }

/* =============================================================================
   3. PLACES-LEFT HIGHLIGHT — cyan spec value in sidebar card
   Higher specificity than .ax-offering-hero__spec-row dd to override color.
   ============================================================================= */

.ax-offering-hero__spec-row .ax-lc-spec-highlight {
  color: var(--ax-cyan);
  font-weight: var(--fw-bold);
}

/* =============================================================================
   4. FAQ alt background override
   ============================================================================= */

.ax-faq-list--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

/* =============================================================================
   5. PROOF — centered dark quote (reuses ax-pull-quote from InnerPages.css)
   ============================================================================= */

.ax-lc-proof {
  padding: var(--space-16) 0;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.ax-lc-proof__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}

@media (min-width: 768px) {
  .ax-lc-proof__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-lc-proof__inner { padding: 0 var(--gutter-desktop); }
}

.ax-lc-proof__mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--action-accent);
  margin-bottom: var(--space-4);
  display: block;
}

.ax-lc-proof__quote {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-on-dark);
}

.ax-lc-proof__who {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-style: normal;
  color: var(--fg-on-dark);
  margin-bottom: var(--space-1);
}

.ax-lc-proof__context {
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
}

/* =============================================================================
   6. FINAL CTA — dark background closing section
   ============================================================================= */

.ax-lc-cta {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  padding: var(--space-16) 0;
  text-align: center;
}

.ax-lc-cta__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-lc-cta__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-lc-cta__inner { padding: 0 var(--gutter-desktop); }
}

.ax-lc-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-lc-cta__sub {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-muted-on-dark);
  line-height: var(--lh-relaxed);
  max-width: 55ch;
}

.ax-lc-cta__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
  opacity: 0.7;
}

/* ── source: components/LogoStrip.css ── */
/* =============================================================================
   LogoStrip — quiet credential row
   Markup: _templates/components/LogoStrip.html
   Used on: Home, About
   Monochrome treatment — names or logo images, never colour logos.
   Supports data-variant="text" (default) and data-variant="logos" (img-based).
   ============================================================================= */

.ax-logo-strip {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-8) 0;
}

.ax-logo-strip__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-logo-strip__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .ax-logo-strip__inner {
    padding: 0 var(--gutter-desktop);
  }
}

/* Label --------------------------------------------------------------------- */
.ax-logo-strip__label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
}

/* Separator ----------------------------------------------------------------- */
.ax-logo-strip__sep {
  display: none;
}

@media (min-width: 640px) {
  .ax-logo-strip__sep {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 1.25rem;
    background: var(--border-1);
  }
}

/* Items row ----------------------------------------------------------------- */
.ax-logo-strip__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

/* Text variant -------------------------------------------------------------- */
.ax-logo-strip__item {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}

/* Logo image variant -------------------------------------------------------- */
.ax-logo-strip[data-variant="logos"] .ax-logo-strip__item {
  display: flex;
  align-items: center;
}

.ax-logo-strip__logo {
  display: block;
  height: 24px;
  width: auto;
  filter: grayscale(1) opacity(0.45);
  transition: filter var(--dur-base) var(--ease-out);
}

.ax-logo-strip__logo:hover {
  filter: grayscale(1) opacity(0.65);
}

/* =============================================================================
   Feature variant — navy credibility band (e.g. high on the About page).
   Page-level wrapper so the default (Home trust bar) instance stays light.
   ============================================================================= */
.ax-logo-strip-feature .ax-logo-strip {
  background: var(--bg-dark);
  border-color: rgba(255, 255, 255, 0.12);
}

.ax-logo-strip-feature .ax-logo-strip__inner {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.ax-logo-strip-feature .ax-logo-strip__label { color: var(--fg-muted-on-dark); }
.ax-logo-strip-feature .ax-logo-strip__sep { background: rgba(255, 255, 255, 0.18); }
.ax-logo-strip-feature .ax-logo-strip__item { color: var(--fg-on-dark); }

/* ── source: components/Nav.css ── */
/* =============================================================================
   Nav — sticky site header with mobile drawer
   Markup: _templates/components/Nav.html
   JS: assets/js/nav.js (data-mobile-nav-toggle / aria-controls pattern)
   ============================================================================= */

/* Skip link ----------------------------------------------------------------- */
.ax-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--ax-pink);
  color: var(--fg-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.ax-skip-link:focus { top: var(--space-2); }

/* Header shell -------------------------------------------------------------- */
.ax-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-1);
}

/* Bar — logo + desktop links + actions -------------------------------------- */
.ax-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-nav__bar { padding: var(--space-4) var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-nav__bar { padding: var(--space-4) var(--gutter-desktop); }
}

/* Logo ---------------------------------------------------------------------- */
.ax-nav__logo { display: inline-flex; flex-shrink: 0; }
.ax-nav__logo-img { height: 28px; width: auto; display: block; }

@media (min-width: 640px) {
  .ax-nav__logo-img { height: 32px; }
}

/* Desktop links ------------------------------------------------------------- */
.ax-nav__links {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-nav__links { display: flex; }
}

.ax-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.ax-nav__link:hover { color: var(--fg-1); }
.ax-nav__link[aria-current="page"] { color: var(--action-primary); }

.ax-nav__ext-icon {
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ax-nav__link:hover .ax-nav__ext-icon { opacity: 0.8; }

/* Actions — CTA + hamburger ------------------------------------------------- */
.ax-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.ax-nav__cta { display: none; }

@media (min-width: 768px) {
  .ax-nav__cta { display: inline-flex; }
}

/* Hamburger ----------------------------------------------------------------- */
.ax-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.ax-nav__hamburger:hover { border-color: var(--border-2); }
.ax-nav__hamburger:focus-visible { box-shadow: var(--focus-ring); }

@media (min-width: 768px) {
  .ax-nav__hamburger { display: none; }
}

.ax-nav__bar-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--fg-1);
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

/* Mobile drawer ------------------------------------------------------------- */
.ax-nav__drawer {
  border-top: 1px solid var(--border-1);
  background: var(--bg-1);
  padding: var(--space-4) var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-nav__drawer { display: none !important; }
}

.ax-nav__drawer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.ax-nav__drawer-link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.ax-nav__drawer-link:hover { background: var(--bg-2); color: var(--fg-1); }

.ax-nav__drawer-cta { padding-top: var(--space-2); border-top: 1px solid var(--border-1); }

/* ── source: components/NewsletterSignup.css ── */
/* =============================================================================
   NewsletterSignup — the single weekly-dispatch signup
   Markup: _templates/components/NewsletterSignup.html
   Used: in-page on content pages (top third) + as a band at the top of the Footer.
   Light by default; dark-context override applies inside the footer (.ax-footer__dispatch).
   Field + submit share one height (--btn-lg-height) so they always align.
   ============================================================================= */

.ax-newsletter {
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-12) 0;
}

.ax-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-newsletter__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-12);
    padding: 0 var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .ax-newsletter__inner { padding: 0 var(--gutter-desktop); }
}

/* Copy ---------------------------------------------------------------------- */
.ax-newsletter__heading {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-newsletter__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 52ch;
}

/* Form ---------------------------------------------------------------------- */
.ax-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ax-newsletter__field {
  flex: 1;
  min-width: 220px;
  display: block;
}

/* Match the input height to the large button so field + button align (fixes the
   44px input vs 40/48px button mismatch across the old variants). */
.ax-newsletter__input { height: var(--btn-lg-height); }

.ax-newsletter__submit { flex-shrink: 0; }

.ax-newsletter__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-4);
}

.ax-newsletter__status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.ax-newsletter__status--error { background: rgba(239, 68, 68, 0.08); color: var(--ax-error); }
.ax-newsletter__status p { margin: 0; color: inherit; }

/* Mobile: full-width controls so the field + button stack cleanly. */
@media (max-width: 539px) {
  .ax-newsletter__submit { width: 100%; }
}

/* Dark context — the band at the top of the footer (navy). Input stays white for
   contrast; only the copy flips to light. */
.ax-footer__dispatch .ax-newsletter {
  background: transparent;
  border: none;
  padding: var(--space-12) 0 var(--space-10);
}

.ax-footer__dispatch .ax-newsletter__heading { color: var(--fg-on-dark); }
.ax-footer__dispatch .ax-newsletter__sub { color: var(--fg-muted-on-dark); }
.ax-footer__dispatch .ax-newsletter__note { color: var(--fg-muted-on-dark); }
.ax-footer__dispatch .ax-newsletter__inner { padding-inline: 0; }

/* ── source: components/OfferCard.css ── */
/* =============================================================================
   OfferCard — the shared clickable "choose an offering" card.
   One pattern across: the Leadership AI Coaching hub (three depths), the
   Two Doors chooser (What We Do), and the homepage "What we do" teaser.
   Whole card is a link; button-styled CTA + hover lift make the click obvious.
   Accent modifiers (--cyan/--pink/--amber) add per-card personality.
   ============================================================================= */

.ax-offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.ax-offer-card:hover {
  border-color: var(--action-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.ax-offer-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ax-offer-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--action-primary);
}

.ax-offer-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-offer-card__desc {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.ax-offer-card__outcome {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}
.ax-offer-card__outcome strong { color: var(--fg-1); font-weight: var(--fw-semibold); }

/* Facts list (e.g. Door 1's phase prices) ---------------------------------- */
.ax-offer-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-offer-card__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-1);
}
.ax-offer-card__fact:last-child { border-bottom: none; padding-bottom: 0; }

.ax-offer-card__fact-label { font-size: var(--text-sm); color: var(--fg-3); }
.ax-offer-card__fact-value { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-1); white-space: nowrap; }

.ax-offer-card__meta {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* Button-styled CTA — pushed to the card foot so CTAs align across a row */
.ax-offer-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-5);
  background: var(--action-accent);
  color: var(--fg-on-dark);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.ax-offer-card__cta-arrow { transition: transform var(--dur-base) var(--ease-out); }
.ax-offer-card:hover .ax-offer-card__cta-arrow { transform: translateX(3px); }

/* Accent modifiers — tinted top edge + eyebrow colour for personality ------ */
.ax-offer-card--cyan  { border-top: 3px solid var(--ax-cyan); }
.ax-offer-card--pink  { border-top: 3px solid var(--ax-pink); }
.ax-offer-card--amber { border-top: 3px solid var(--ax-amber); }

.ax-offer-card--cyan  .ax-offer-card__eyebrow { color: var(--ax-cyan); }
.ax-offer-card--pink  .ax-offer-card__eyebrow { color: var(--ax-pink); }
.ax-offer-card--amber .ax-offer-card__eyebrow { color: var(--ax-amber); }

/* ── source: components/PageHero.css ── */
/* =============================================================================
   PageHero — inner-page hero section
   Markup: _templates/components/PageHero.html
   Used on: /what-we-do, /how-we-work, /about, /insights, /events
   No CTA — that's CTABand's job.
   ============================================================================= */

.ax-page-hero {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-12) 0 var(--space-16);
}

@media (min-width: 768px) {
  .ax-page-hero { padding: var(--space-16) 0 var(--space-20); }
}

.ax-page-hero__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-page-hero__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-page-hero__inner { padding: 0 var(--gutter-desktop); }
}

/* Breadcrumb ---------------------------------------------------------------- */
.ax-page-hero__breadcrumb { margin-bottom: var(--space-6); }

.ax-page-hero__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.ax-page-hero__breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-4);
}

.ax-page-hero__breadcrumb-item + .ax-page-hero__breadcrumb-item::before {
  content: '/';
  color: var(--border-2);
}

.ax-page-hero__breadcrumb-link {
  color: var(--fg-4);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.ax-page-hero__breadcrumb-link:hover { color: var(--action-primary); }

.ax-page-hero__breadcrumb-item--current { color: var(--fg-2); }

/* Heading ------------------------------------------------------------------- */
.ax-page-hero__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-page-hero__sub {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: var(--container-tight);
}

/* ── source: components/PlanLayers.css ── */
/* =============================================================================
   PlanLayers — numbered phases / layers explaining how an engagement works
   Markup: _templates/components/PlanLayers.html
   Used on: All offering detail pages, VSL
   Layout: vertical stack at all breakpoints; left rule connects steps.
   Supports 2–4 layers. Phase number stays prominent at all sizes.
   ============================================================================= */

.ax-plan-layers {
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-plan-layers { padding: var(--space-20) 0; }
}

.ax-plan-layers__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-plan-layers__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-plan-layers__inner { padding: 0 var(--gutter-desktop); }
}

/* Header -------------------------------------------------------------------- */
.ax-plan-layers__header {
  margin-bottom: var(--space-12);
  max-width: var(--container-tight);
}

.ax-plan-layers__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-plan-layers__sub {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* Steps list ---------------------------------------------------------------- */
.ax-plan-layers__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Vertical rule connecting steps */
.ax-plan-layers__steps::before {
  content: '';
  position: absolute;
  top: 1.5rem;       /* aligns with centre of first number */
  left: 1.5rem;      /* 24px = half of 48px number bubble */
  bottom: 1.5rem;
  width: 1px;
  background: var(--border-1);
}

/* Individual step ----------------------------------------------------------- */
.ax-plan-layers__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 var(--space-6);
  align-items: start;
  padding-bottom: var(--space-10);
}

.ax-plan-layers__step:last-child {
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .ax-plan-layers__step {
    grid-template-columns: 3rem 1fr;
    gap: 0 var(--space-8);
  }
}

/* Step number --------------------------------------------------------------- */
.ax-plan-layers__num {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--action-primary);
  position: relative;
  z-index: 1;     /* sits above the connecting rule */
}

/* Step body ----------------------------------------------------------------- */
.ax-plan-layers__body {
  padding-top: var(--space-2);  /* visual alignment with number centre */
}

.ax-plan-layers__step-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
  margin-bottom: var(--space-2);
}

.ax-plan-layers__step-heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.ax-plan-layers__step-body {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* Outputs list */
.ax-plan-layers__outputs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-plan-layers__output {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.ax-plan-layers__output::before {
  content: '—';
  flex-shrink: 0;
  color: var(--action-primary);
  font-weight: var(--fw-bold);
}

/* ── source: components/PricingBlock.css ── */
/* =============================================================================
   PricingBlock — programme pricing cards with ROI math and guarantee
   Markup: _templates/components/PricingBlock.html
   Used on: /programmes/leadership-cohort (and future funnel pages)
   Two-tier layout: early-rate card (highlighted) + standard-rate card (muted).
   ROI math block makes the price feel earned before the reader decides.
   Guarantee removes the last remaining risk after the price is seen.
   ============================================================================= */

.ax-pricing-block {
  padding: var(--space-16) 0;
  background: var(--bg-1);
}

@media (min-width: 768px) {
  .ax-pricing-block { padding: var(--space-20) 0; }
}

.ax-pricing-block__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-pricing-block__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-pricing-block__inner { padding: 0 var(--gutter-desktop); }
}

/* Header -------------------------------------------------------------------- */

.ax-pricing-block__heading {
  margin: var(--space-3) 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Cards grid ---------------------------------------------------------------- */

.ax-pricing-block__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

@media (min-width: 640px) {
  .ax-pricing-block__cards {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Individual card ----------------------------------------------------------- */

.ax-pricing-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--bg-1);
}

/* Early-rate card: pink accent border to signal priority */
.ax-pricing-card--early {
  border: 2px solid var(--action-accent);
  box-shadow: var(--shadow-md);
}

/* Standard card: muted — present but not the hero */
.ax-pricing-card--standard {
  opacity: 0.75;
}

/* Badge (early rate only) --------------------------------------------------- */

.ax-pricing-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-accent-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-accent);
  width: fit-content;
}

/* Label (tier name) --------------------------------------------------------- */

.ax-pricing-card__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Price --------------------------------------------------------------------- */

.ax-pricing-card__price {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--fg-1);
  margin: 0;
}

.ax-pricing-card__per {
  font-size: var(--text-sm);
  color: var(--fg-4);
  margin: 0;
}

/* Features list ------------------------------------------------------------- */

.ax-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
  flex: 1;
}

.ax-pricing-card__feature {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

.ax-pricing-card__feature::before {
  content: '✓';
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  color: var(--ax-green);
}

/* CTA button ---------------------------------------------------------------- */

.ax-pricing-card__cta {
  display: block;
  text-align: center;
}

/* Standard-rate note (no CTA — directs to early-rate card) ----------------- */

.ax-pricing-card__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-style: italic;
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

/* ROI math block ------------------------------------------------------------ */
/* Appears after pricing cards. Makes the value case before the reader second-guesses the price. */

.ax-pricing-block__roi {
  background: var(--bg-paper-deep);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--action-primary);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.ax-pricing-block__roi-heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-pricing-block__roi-equation {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-xl));
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.ax-pricing-block__roi-proof {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-paper);
}

.ax-pricing-block__roi-proof strong {
  color: var(--action-accent);
  font-weight: var(--fw-bold);
}

/* Guarantee note ------------------------------------------------------------ */
/* Placed last — removes the final hesitation after the price is absorbed. */

.ax-pricing-block__guarantee {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  text-align: center;
  line-height: var(--lh-relaxed);
}

.ax-pricing-block__guarantee strong {
  color: var(--fg-2);
}

/* Focus: CTA button inherits from Buttons.css — no override needed */

/* ── source: components/ProgrammeFunnel.css ── */
/* =============================================================================
   ProgrammeFunnel — page-level layout for /programmes/* funnel pages
   Used on: _templates/programmes/leadership-cohort.html (and future funnels)
   Covers: programme arc section, scarcity wrapper, proof wrapper, stripped footer.
   Component-specific styles stay in their own CSS files.
   Override component styles here (not in the component file) when funnel context
   needs different spacing or treatment.
   ============================================================================= */

/* =============================================================================
   Scarcity wrapper — sits immediately below the hero
   ============================================================================= */

.ax-funnel-scarcity {
  padding: var(--space-6) 0 var(--space-10);
}

@media (min-width: 768px) {
  .ax-funnel-scarcity { padding: var(--space-8) 0 var(--space-12); }
}

.ax-funnel-scarcity__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-funnel-scarcity__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-funnel-scarcity__inner { padding: 0 var(--gutter-desktop); }
}

/* =============================================================================
   Programme arc section — the three-phase structure
   ============================================================================= */

.ax-programme-arc {
  padding: var(--space-16) 0;
  background: var(--bg-paper);
}

@media (min-width: 768px) {
  .ax-programme-arc { padding: var(--space-20) 0; }
}

.ax-programme-arc__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-programme-arc__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-programme-arc__inner { padding: 0 var(--gutter-desktop); }
}

.ax-programme-arc__heading {
  margin: var(--space-3) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-paper);
  text-wrap: balance;
}

.ax-programme-arc__sub {
  margin: 0 0 var(--space-10);
  font-size: var(--text-lg);
  color: var(--fg-body-on-paper);
  line-height: var(--lh-normal);
  max-width: 60ch;
}

/* Phase cards --------------------------------------------------------------- */

.ax-programme-arc__phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .ax-programme-arc__phases {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.ax-phase-card {
  background: var(--bg-1);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ax-phase-card__num {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
}

.ax-phase-card__weeks {
  font-size: var(--text-xs);
  color: var(--fg-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ax-phase-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-phase-card__unlock {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-style: italic;
  line-height: var(--lh-normal);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

/* Included list + time commitment ------------------------------------------ */

.ax-programme-arc__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .ax-programme-arc__details {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.ax-programme-arc__details-heading {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-programme-arc__includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-programme-arc__include {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-paper);
}

.ax-programme-arc__include:last-child {
  border-bottom: none;
}

.ax-programme-arc__include::before {
  content: '—';
  flex-shrink: 0;
  color: var(--action-primary);
  font-weight: var(--fw-bold);
}

.ax-programme-arc__commitment {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ax-programme-arc__commitment-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ax-programme-arc__commitment-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--fg-on-paper);
}

.ax-programme-arc__commitment-label {
  font-size: var(--text-sm);
  color: var(--fg-body-on-paper);
  line-height: var(--lh-normal);
}

/* =============================================================================
   Stripped footer — funnel pages only
   Removes nav links and newsletter to keep the funnel closed.
   Full footer with navigation lives in Footer.css / Footer component.
   ============================================================================= */

.ax-funnel-footer {
  background: var(--bg-darker);
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ax-funnel-footer__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 640px) {
  .ax-funnel-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 0 var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .ax-funnel-footer__inner { padding: 0 var(--gutter-desktop); }
}

.ax-funnel-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ax-funnel-footer__logo-img {
  height: 24px;
  width: auto;
  opacity: 0.7;
}

.ax-funnel-footer__copy {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-muted-on-dark);
}

.ax-funnel-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
}

.ax-funnel-footer__legal-link {
  font-size: var(--text-xs);
  color: var(--fg-muted-on-dark);
  text-decoration: none;
  transition: color 150ms ease;
}

.ax-funnel-footer__legal-link:hover {
  color: var(--fg-on-dark);
}

.ax-funnel-footer__legal-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-on-dark);
  border-radius: var(--radius-sm);
}

/* ── source: components/ProofRow.css ── */
/* =============================================================================
   ProofRow — social proof block, two variants
   Markup: _templates/components/ProofRow.html
   Used on: Home, offering detail pages, VSL
   data-variant="quote"     → big pull-quote + attribution
   data-variant="case-tile" → featured case study tile with outcomes
   ============================================================================= */

.ax-proof-row {
  padding: var(--space-16) 0;
}

@media (min-width: 768px) {
  .ax-proof-row { padding: var(--space-20) 0; }
}

.ax-proof-row__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-proof-row__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-proof-row__inner { padding: 0 var(--gutter-desktop); }
}

/* ============================================================
   VARIANT: quote
   ============================================================ */

.ax-proof-row--quote .ax-proof-row__inner {
  max-width: var(--container-tight);
}

.ax-proof-row--quote blockquote {
  margin: 0;
  padding: 0;
}

.ax-proof-row__quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: var(--fw-black);
  line-height: 0.75;
  color: var(--ax-pink);
  margin-bottom: var(--space-4);
  user-select: none;
}

.ax-proof-row__quote-text {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-proof-row__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-1);
}

.ax-proof-row__who {
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}

.ax-proof-row__role {
  font-size: var(--text-xs);
  color: var(--fg-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ax-proof-row__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--action-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out),
              gap   var(--dur-base) var(--ease-out);
}

.ax-proof-row__cta-link:hover {
  color: var(--action-accent);
  gap: var(--space-3);
}

/* ============================================================
   VARIANT: case-tile
   ============================================================ */

.ax-proof-row--case-tile .ax-proof-row__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .ax-proof-row--case-tile .ax-proof-row__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.ax-proof-row__case-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ax-proof-row__case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ax-proof-row__case-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ax-proof-row__case-kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
}

.ax-proof-row__case-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 2.5vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-proof-row__case-excerpt {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* Outcome stats */
.ax-proof-row__outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
}

.ax-proof-row__outcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ax-proof-row__outcome-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--fg-1);
}

.ax-proof-row__outcome-label {
  font-size: var(--text-xs);
  color: var(--fg-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── source: components/QuizCTA.css ── */
/* =============================================================================
   QuizCTA — inline promo block linking to quiz.accelerator-x.ai
   Markup: _templates/components/QuizCTA.html
   Used on: /what-we-do, /contact, home (decision aid context)
   ============================================================================= */

.ax-quiz-cta {
  background: var(--bg-dark);
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .ax-quiz-cta { padding: var(--space-16) 0; }
}

.ax-quiz-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-quiz-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 0 var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .ax-quiz-cta__inner { padding: 0 var(--gutter-desktop); }
}

/* Copy ---------------------------------------------------------------------- */

.ax-quiz-cta__copy { flex: 1; }

.ax-quiz-cta__heading {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-quiz-cta__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-muted-on-dark);
  max-width: 48ch;
}

/* Button -------------------------------------------------------------------- */

.ax-quiz-cta__btn { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 767px) {
  .ax-quiz-cta__btn { width: 100%; justify-content: center; }
}

/* ── source: components/ScarcityCard.css ── */
/* =============================================================================
   ScarcityCard — programme availability signal
   Markup: _templates/components/ScarcityCard.html
   Used on: offering detail pages, VSL pages
   Variants:
     --cohort  deadline + places left (cohort-based programmes only)
     --open    lead-time framing (Company Enablement, open programmes)
   Honest data only. No fake urgency — these numbers are real.
   ============================================================================= */

.ax-scarcity-card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--action-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-scarcity-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

/* Status label -------------------------------------------------------------- */

.ax-scarcity-card__status {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action-primary);
  margin: 0 0 var(--space-1);
}

/* Body ---------------------------------------------------------------------- */

.ax-scarcity-card__body { flex: 1; }

.ax-scarcity-card__primary {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.ax-scarcity-card__secondary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* CTA ----------------------------------------------------------------------- */

.ax-scarcity-card__cta { flex-shrink: 0; }

@media (max-width: 639px) {
  .ax-scarcity-card__cta .btn { width: 100%; justify-content: center; }
}

/* Cohort variant ------------------------------------------------------------ */

.ax-scarcity-card--cohort {
  border-left-color: var(--action-accent);  /* pink — more urgent signal */
}

.ax-scarcity-card--cohort .ax-scarcity-card__status {
  color: var(--action-accent);
}

/* ── source: components/TwoDoors.css ── */
/* =============================================================================
   TwoDoors — the offer spine (What We Do)
   Markup: _templates/components/TwoDoors.html
   Section + intro + a two-up grid of shared .ax-offer-card door cards.
   (Card chrome lives in OfferCard.css; the homepage uses WhatWeDoTeaser.)
   ============================================================================= */

.ax-two-doors {
  padding: var(--space-16) 0;
  background: var(--bg-2);
}

@media (min-width: 768px) {
  .ax-two-doors { padding: var(--space-20) 0; }
}

.ax-two-doors__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

@media (min-width: 640px) {
  .ax-two-doors__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 768px) {
  .ax-two-doors__inner { padding: 0 var(--gutter-desktop); }
}

/* Door grid (two-up) -------------------------------------------------------- */
.ax-two-doors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-two-doors__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── source: components/WhatWeDoTeaser.css ── */
/* =============================================================================
   WhatWeDoTeaser — homepage offer teaser (three offer-cards → route onward)
   Markup: _templates/components/WhatWeDoTeaser.html
   Cards use the shared .ax-offer-card pattern (OfferCard.css).
   ============================================================================= */

.ax-wwd-teaser {
  padding: var(--space-16) 0;
  background: var(--bg-1);
}

@media (min-width: 768px) {
  .ax-wwd-teaser { padding: var(--space-20) 0; }
}

.ax-wwd-teaser__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

@media (min-width: 640px) { .ax-wwd-teaser__inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 768px) { .ax-wwd-teaser__inner { padding: 0 var(--gutter-desktop); } }

.ax-wwd-teaser__intro { max-width: 56ch; }

.ax-wwd-teaser__heading {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-wwd-teaser__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.ax-wwd-teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) { .ax-wwd-teaser__grid { grid-template-columns: repeat(3, 1fr); } }

.ax-wwd-teaser__cta { display: flex; }

/* ── source: components/HomeSections.css ── */
/* =============================================================================
   HomeSections — homepage page-specific section styles
   Sections: Hero · Problem · WhyUs · Process · Testimonials
   All visual values reference v2 design tokens from tokens.css.
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */

.ax-hero {
  padding: var(--space-16) 0 var(--space-12);
}

@media (min-width: 1024px) {
  .ax-hero { padding: var(--space-24) 0 var(--space-20); }
}

.ax-hero__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 640px) {
  .ax-hero__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-hero__inner {
    padding: 0 var(--gutter-desktop);
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
  }
}

.ax-hero__copy {
  text-align: center;
}

@media (min-width: 1024px) {
  .ax-hero__copy { text-align: left; }
}

.ax-hero__heading {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-hero__heading em {
  font-style: normal;
  color: var(--action-accent);
}

.ax-hero__sub {
  margin: var(--space-6) auto 0;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  max-width: 52ch;
}

@media (min-width: 1024px) {
  .ax-hero__sub { margin: var(--space-6) 0 0; }
}

.ax-hero__cta-row {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .ax-hero__cta-row { justify-content: flex-start; }
}

.ax-hero__risk {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-4);
  font-style: italic;
}

.ax-hero__media {
  width: 100%;
}

/* =============================================================================
   2. PROBLEM
   ============================================================================= */

.ax-problem {
  background: var(--bg-paper);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .ax-problem { padding: var(--space-24) 0; }
}

.ax-problem__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-problem__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-problem__inner { padding: 0 var(--gutter-desktop); }
}

.ax-problem__panel {
  background: var(--bg-paper-deep);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .ax-problem__panel { padding: var(--space-12); }
}

@media (min-width: 1024px) {
  .ax-problem__panel {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.ax-problem__heading {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3vw + 0.5rem, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-paper);
  text-wrap: balance;
}

.ax-problem__heading em {
  font-style: normal;
  color: var(--action-accent);
}

.ax-problem__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ax-problem__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-body-on-paper);
}

.ax-problem__body p:last-child {
  font-weight: var(--fw-medium);
  color: var(--fg-on-paper);
}

/* =============================================================================
   3. WHY US
   ============================================================================= */

.ax-why-us {
  background: var(--bg-dark);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .ax-why-us { padding: var(--space-24) 0; }
}

.ax-why-us__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-why-us__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-why-us__inner { padding: 0 var(--gutter-desktop); }
}

.ax-why-us .ax-kicker { color: var(--ax-cyan); }

.ax-why-us__heading {
  max-width: var(--container-tight);
  margin: var(--space-4) 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3vw + 0.5rem, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-why-us__heading em {
  font-style: normal;
  color: var(--action-primary);
}

.ax-why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .ax-why-us__grid { grid-template-columns: repeat(3, 1fr); }
}

.ax-why-us__card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ax-why-us__card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.ax-why-us__card--cyan .ax-why-us__card-icon {
  background: var(--surface-primary-subtle);
  color: var(--ax-cyan);
}

.ax-why-us__card--amber .ax-why-us__card-icon {
  background: var(--surface-amber-subtle);
  color: var(--ax-amber);
}

.ax-why-us__card--pink .ax-why-us__card-icon {
  background: var(--surface-accent-subtle);
  color: var(--ax-pink);
}

.ax-why-us__card-kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ax-why-us__card--cyan .ax-why-us__card-kicker { color: var(--ax-cyan); }
.ax-why-us__card--amber .ax-why-us__card-kicker { color: var(--ax-amber); }
.ax-why-us__card--pink  .ax-why-us__card-kicker { color: var(--ax-pink); }

.ax-why-us__card-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-why-us__card-body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}

/* =============================================================================
   4. PROCESS
   ============================================================================= */

.ax-process {
  background: var(--bg-2);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .ax-process { padding: var(--space-24) 0; }
}

.ax-process__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-process__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-process__inner { padding: 0 var(--gutter-desktop); }
}

.ax-process__header {
  max-width: var(--container-tight);
  margin-bottom: var(--space-10);
}

.ax-process__heading {
  margin: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3vw + 0.5rem, var(--text-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-process__heading em {
  font-style: normal;
  color: var(--action-primary);
}

.ax-process__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.ax-process__timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .ax-process__timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ax-process__timeline { grid-template-columns: repeat(4, 1fr); }
}

.ax-process__phase {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-process__phase--highlight {
  background: var(--surface-primary-subtle);
  border-color: var(--ax-cyan);
}

.ax-process__phase-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-process__phase--highlight .ax-process__phase-label {
  color: var(--action-primary);
}

.ax-process__phase-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.ax-process__phase-body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}

/* No-risk guarantee — pinned to the bottom of the Phase 0 card,
   accented in cyan so it reads as load-bearing without shouting. */
.ax-process__guarantee {
  margin: var(--space-4) 0 0;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ax-cyan-light);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.ax-process__guarantee strong {
  color: var(--action-primary);
  font-weight: var(--fw-semibold);
}

.ax-process__guarantee-icon {
  flex: none;
  display: inline-flex;
  color: var(--action-primary);
}

.ax-process__guarantee-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ax-process__note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-4);
}

.ax-process__note a {
  color: var(--action-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.ax-process__note a:hover { text-decoration: underline; }

/* =============================================================================
   5. TESTIMONIALS
   ============================================================================= */

.ax-testimonials {
  background: var(--bg-dark);
  padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
  .ax-testimonials { padding: var(--space-24) 0; }
}

.ax-testimonials__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 640px) {
  .ax-testimonials__inner { padding: 0 var(--gutter-tablet); }
}

@media (min-width: 1024px) {
  .ax-testimonials__inner { padding: 0 var(--gutter-desktop); }
}

.ax-testimonials .ax-kicker { color: var(--ax-cyan); }

.ax-testimonials__heading {
  margin: var(--space-4) 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3vw + 0.5rem, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-on-dark);
  text-wrap: balance;
}

.ax-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .ax-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Testimonial card */
.ax-testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ax-testimonial-card__stars {
  display: flex;
  gap: var(--space-1);
  color: var(--ax-star);
  font-size: var(--text-sm);
  line-height: 1;
}

.ax-testimonial-card__quote {
  flex: 1;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
}

.ax-testimonial-card__attribution {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: auto;
}

.ax-testimonial-card__name {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--fg-on-dark);
  margin: 0;
}

.ax-testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--fg-muted-on-dark);
  margin: var(--space-1) 0 0;
}

/* ── source: components/InnerPages.css ── */
/* =============================================================================
   InnerPages — shared section styles for inner marketing pages
   Pages: /what-we-do · /how-we-work · /about · /contact
   All values reference v2 design tokens from tokens.css.
   ============================================================================= */

/* =============================================================================
   1. SHARED SECTION WRAPPER
   ============================================================================= */

.ax-inner-section {
  padding: var(--space-16) 0;
}

.ax-inner-section--alt {
  background: var(--bg-2);
}

.ax-inner-section--dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.ax-inner-section__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-inner-section__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-inner-section__inner { padding: 0 var(--gutter-desktop); }
}

.ax-inner-section__header {
  margin-bottom: var(--space-10);
}

.ax-inner-section__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-inner-section__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* =============================================================================
   2. HOW WE SHOW UP — ethos cards  (how-we-work)
   ============================================================================= */

.ax-approach {
  padding: var(--space-16) 0;
  background: var(--bg-paper);
}

.ax-approach__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-approach__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-approach__inner { padding: 0 var(--gutter-desktop); }
}

.ax-approach__header { margin-bottom: var(--space-10); }

.ax-approach__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-approach__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  max-width: 60ch;
  line-height: var(--lh-relaxed);
}

.ax-approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .ax-approach__grid { grid-template-columns: repeat(2, 1fr); }
}

.ax-approach__card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.ax-approach__card-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--action-accent);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

.ax-approach__card-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-approach__card-body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   4. WHAT AN ENGAGEMENT LOOKS LIKE  (how-we-work)
   ============================================================================= */

.ax-engagement {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-engagement__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-engagement__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-engagement__inner { padding: 0 var(--gutter-desktop); }
}

.ax-engagement__header { margin-bottom: var(--space-10); }

.ax-engagement__heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.ax-engagement__phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-engagement__phases { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ax-engagement__phases { grid-template-columns: repeat(4, 1fr); }
}

.ax-engagement__phase {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
}

.ax-engagement__phase--highlight {
  border-color: var(--action-accent);
  background: color-mix(in srgb, var(--action-accent) 5%, var(--bg-1));
}

.ax-engagement__phase-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-accent);
  margin-bottom: var(--space-3);
}

.ax-engagement__phase-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-engagement__phase-body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   5. PULL QUOTE  (how-we-work · homepage testimonials)
   ============================================================================= */

.ax-pull-quote {
  padding: var(--space-16) 0;
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.ax-pull-quote__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}

@media (min-width: 768px) {
  .ax-pull-quote__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-pull-quote__inner { padding: 0 var(--gutter-desktop); }
}

.ax-pull-quote__quote {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-on-dark);
}

.ax-pull-quote__attr {
  font-size: var(--text-sm);
  color: var(--fg-muted-on-dark);
}

.ax-pull-quote__attr-name {
  font-weight: var(--fw-semibold);
  color: var(--fg-on-dark);
}

/* =============================================================================
   7. FOUNDERS HERO  (about)
   ============================================================================= */

.ax-founders-hero {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
}

.ax-founders-hero__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-founders-hero__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-founders-hero__inner { padding: 0 var(--gutter-desktop); }
}

.ax-founders-hero__header { margin-bottom: var(--space-10); }

.ax-founders-hero__heading {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.ax-founders-hero__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  max-width: 60ch;
  line-height: var(--lh-relaxed);
}

.ax-founders-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ax-founders-hero__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   8. ORIGIN STORY  (about)
   ============================================================================= */

.ax-origin-story {
  padding: var(--space-16) 0;
  background: var(--bg-paper);
}

.ax-origin-story__inner {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-origin-story__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-origin-story__inner { padding: 0 var(--gutter-desktop); }
}

.ax-origin-story__header { margin-bottom: var(--space-8); }

.ax-origin-story__heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-origin-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ax-origin-story__body p {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   9. BELIEFS  (about)
   ============================================================================= */

.ax-beliefs {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-beliefs__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-beliefs__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-beliefs__inner { padding: 0 var(--gutter-desktop); }
}

.ax-beliefs__header { margin-bottom: var(--space-10); }

.ax-beliefs__heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  max-width: 40ch;
  text-wrap: balance;
}

.ax-beliefs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-1);
}

.ax-beliefs__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-1);
}

.ax-beliefs__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--action-accent);
  line-height: 1.8;
  min-width: 2rem;
}

.ax-beliefs__text {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* =============================================================================
   10. CONTACT PAGE
   ============================================================================= */

.ax-contact-layout {
  padding: var(--space-16) 0;
}

.ax-contact-layout__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-contact-layout__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-contact-layout__inner { padding: 0 var(--gutter-desktop); }
}

/* Direct contact cards */
.ax-contact-direct {
  padding: var(--space-16) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.ax-contact-direct__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
  .ax-contact-direct__inner { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1024px) {
  .ax-contact-direct__inner { padding: 0 var(--gutter-desktop); }
}

.ax-contact-direct__header { margin-bottom: var(--space-8); }

.ax-contact-direct__heading {
  margin: var(--space-3) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.ax-contact-direct__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
  max-width: 55ch;
  line-height: var(--lh-relaxed);
}

.ax-contact-direct__email {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--action-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.ax-contact-direct__email:hover {
  color: var(--action-primary-hover);
  text-decoration: underline;
}

.ax-contact-direct__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ax-contact-direct__grid { grid-template-columns: repeat(2, 1fr); }
}

.ax-contact-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ax-contact-card__name {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-contact-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ax-contact-card__link {
  font-size: var(--text-sm);
  color: var(--action-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.ax-contact-card__link:hover {
  color: var(--action-primary-hover);
  text-decoration: underline;
}

/* Quiz CTA prompt */
.ax-quiz-prompt {
  padding: var(--space-12) 0;
}

.ax-quiz-prompt__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .ax-quiz-prompt__inner {
    padding: 0 var(--gutter-tablet);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  .ax-quiz-prompt__inner { padding: 0 var(--gutter-desktop); }
}

.ax-quiz-prompt__copy { flex: 1; }

.ax-quiz-prompt__heading {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ax-quiz-prompt__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-3);
}

/* =============================================================================
   Talks & Events — three-format grid (markup: _templates/talks-events.html)
   Inquiry-led, priced on application. Added Phase 5 (#57).
   ============================================================================= */

.ax-format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-8) 0 var(--space-6);
}

@media (min-width: 768px) {
  .ax-format-grid { grid-template-columns: repeat(3, 1fr); }
}

.ax-format-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-top: 3px solid var(--ax-amber);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ax-format-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.ax-format-card__meta {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}

.ax-format-card__body {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.ax-format-inquiry__cta { margin-top: var(--space-6); }

/* =============================================================================
   TALKS & EVENTS PANEL  (what-we-do — a separate panel, not a third door)
   ============================================================================= */
.ax-talks-panel {
  padding: var(--space-16) 0;
  background: var(--bg-1);
}

.ax-talks-panel__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 768px) { .ax-talks-panel__inner { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .ax-talks-panel__inner { padding: 0 var(--gutter-desktop); } }

.ax-talks-panel__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--surface-amber-subtle);
  border-radius: var(--radius-2xl);
}
@media (min-width: 900px) {
  .ax-talks-panel__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-10) var(--space-12);
  }
}

.ax-talks-panel__intro { max-width: 46ch; }

.ax-talks-panel__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ax-amber);
}

.ax-talks-panel__heading {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ax-talks-panel__sub {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

.ax-talks-panel__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex-shrink: 0;
}

.ax-talks-panel__formats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ax-talks-panel__format { display: flex; flex-direction: column; }
.ax-talks-panel__format-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
.ax-talks-panel__format-meta { font-size: var(--text-xs); color: var(--fg-3); }