/* AI for Products: site styles. Brand colours come from the logo (navy, electric blue) and the motto (cream). */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-opsz96-wght.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-opsz96-wght-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-rupee-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+20B9;
}

:root {
  --navy: #16213e;
  --navy-2: #1e2b50;
  --navy-3: #2c3b68;
  --cream: #f5f1e8;
  --cream-2: #ece5d6;
  --paper: #fbf9f4;
  --blue: #1f4bff;
  --blue-2: #4a6cff;
  --blue-soft: #dce3ff;
  --blue-mist: #eef1ff;
  --blue-on-navy: #9fb2ff;
  --ink: #16213e;
  --muted: #4b5675;
  --muted-on-navy: #c3c9dc;
  --line: rgba(22, 33, 62, 0.14);
  --line-on-navy: rgba(245, 241, 232, 0.16);
  --radius: 22px;
  --radius-s: 14px;
  --shadow: 0 1px 2px rgba(22, 33, 62, 0.06), 0 12px 40px -12px rgba(22, 33, 62, 0.22);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --header-h: 64px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.on-navy :focus-visible, .section--navy :focus-visible { outline-color: var(--blue-on-navy); }
main:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7vw, 5.6rem); font-weight: 650; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
strong { font-weight: 650; }
em { font-style: italic; }
h1 em, h2 em { font-weight: 500; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--cream); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(245, 241, 232, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.brand-mark { width: 30px; height: 28px; flex: none; }
.brand-mark .mark-a { fill: currentColor; stroke: currentColor; stroke-width: 8; stroke-linejoin: round; }
.brand-mark .mark-arrow { fill: var(--blue); }
.brand-word { font-family: var(--serif); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-word em { font-weight: 500; }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-list li + li { margin-top: 0; }
.nav-link {
  display: inline-block; padding: 8px 14px; border-radius: 999px; color: var(--navy);
  font: 500 0.98rem/1.2 var(--sans); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-current { background: rgba(22, 33, 62, 0.07); }
.sub-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.sub-toggle[aria-expanded="true"]::after { transform: translateY(0) rotate(-135deg); }
.has-sub { position: relative; }
.sub-list {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 8px); left: -8px; width: 290px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.has-sub:hover .sub-list, html:not(.js) .has-sub:focus-within .sub-list, .sub-toggle[aria-expanded="true"] + .sub-list { opacity: 1; visibility: visible; transform: none; }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.sub-list a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--navy); text-decoration: none; }
.sub-list a:hover, .sub-list a[aria-current="page"] { background: var(--blue-mist); }
.sub-list strong { display: block; font-family: var(--serif); font-size: 1.1rem; }
.sub-list span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.35; }

.menu-toggle { display: none; }
@media (max-width: 899px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; margin-right: -6px; border-radius: 999px;
    color: var(--navy); font: 600 0.95rem/1 var(--sans); text-decoration: none; background: rgba(22, 33, 62, 0.06); border: 0; cursor: pointer;
  }
  .menu-icon, .menu-icon::before { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.2s; }
  .menu-icon { box-shadow: 0 0 0 0 transparent; }
  .menu-icon::before { content: ""; position: absolute; top: 5px; }
  .menu-icon { transform: translateY(-3px); }
  .menu-open .menu-icon { transform: translateY(0) rotate(45deg); }
  .menu-open .menu-icon::before { transform: translateY(-5px) rotate(-90deg); }
  .site-nav { display: none; }
  .menu-open .site-nav {
    display: block; position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; box-shadow: 0 24px 40px -24px rgba(22, 33, 62, 0.35);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { display: block; width: 100%; text-align: left; padding: 14px 12px; font-size: 1.15rem; border-radius: 12px; }
  .sub-toggle { display: none; }
  .sub-list { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: var(--blue-mist); padding: 4px; }
  .has-sub::after { display: none; }
}
@media (max-width: 380px) { .brand-word { font-size: 1.12rem; } .brand-mark { width: 26px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  background: var(--navy); color: var(--cream); transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover { background: var(--navy-3); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(22, 33, 62, 0.6); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: #1438d6; }
.btn--ghost { background: transparent; color: var(--navy); border-color: rgba(22, 33, 62, 0.28); }
.btn--ghost:hover { background: rgba(22, 33, 62, 0.06); box-shadow: none; }
.btn--light { background: var(--cream); color: var(--navy); }
.btn--light:hover { background: #fff; }
.btn--ghost-light { background: transparent; color: var(--cream); border-color: rgba(245, 241, 232, 0.4); }
.btn--ghost-light:hover { background: rgba(245, 241, 232, 0.1); }
.btn .arrow { width: 16px; height: 16px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow .arrow { width: 15px; height: 15px; transition: transform 0.2s; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---------- Sections ---------- */
.section { position: relative; z-index: 1; padding-block: clamp(72px, 11vw, 140px); background: var(--cream); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy a:not(.btn) { color: var(--blue-on-navy); }
.section--navy .muted, .section--navy .lede { color: var(--muted-on-navy); }
.section--clear { background: transparent; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--blue);
  font: 600 0.8rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.section--navy .eyebrow { color: var(--blue-on-navy); }
.lede { font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--muted); max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 0.92rem; }
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: 0.55; z-index: 0; }

/* ---------- Hero (all pages) ---------- */
.hero { position: relative; z-index: 1; padding-block: clamp(64px, 10vw, 120px) clamp(56px, 8vw, 100px); overflow: hidden; }
.hero .lede { margin-top: 8px; }
.hero--page { background:
  radial-gradient(60% 80% at 85% 0%, rgba(31, 75, 255, 0.13), transparent 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(220, 227, 255, 0.9), transparent 70%), var(--cream); }
.hero--page h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 15ch; }
.hero--page > .container { position: relative; z-index: 1; }
/* A page's slogan, under a heading that says plainly what the page offers. */
.hero-slogan { margin: 0 0 18px; max-width: 30ch; font: 600 clamp(1.3rem, 2.4vw, 1.85rem)/1.2 var(--serif); letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
.hero-slogan span, .hero-slogan em { color: var(--blue); }
.hero-slogan em { font-weight: 500; }
@media (min-width: 1000px) {
  .hero--mark::after {
    content: ""; position: absolute; z-index: 0; right: 5%; top: 50%; width: min(34vw, 470px); aspect-ratio: 260 / 240; transform: translateY(-46%); pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70 80 260 240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231f4bff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%231f4bff' stop-opacity='.04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M181 89H219L317 310H260L212 203H187L139 310H82Z' fill='url(%23g)' stroke='%2316213e' stroke-opacity='.12' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M175 234H205L240 271L205 306H175L207 271Z' fill='%231f4bff' fill-opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* Home hero: rays in CSS as the still image; WebGL draws over them when it runs. */
.hero--home {
  min-height: min(100svh, 980px); display: flex; align-items: center; padding-block: 48px 72px;
  background:
    radial-gradient(42% 52% at 72% 54%, rgba(31, 75, 255, 0.22), transparent 70%),
    radial-gradient(60% 75% at 18% 40%, rgba(245, 241, 232, 0.9), transparent 75%),
    repeating-conic-gradient(from 0deg at 72% 105%, rgba(74, 108, 255, 0) 0deg, rgba(74, 108, 255, 0.11) 1.6deg, rgba(74, 108, 255, 0) 3.2deg, rgba(74, 108, 255, 0) 7deg),
    radial-gradient(90% 70% at 72% 100%, rgba(220, 227, 255, 0.95), transparent 70%),
    var(--cream);
}
.has-3d .hero--home { background: transparent; }
.hero--home .hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero--home h1 { font-size: clamp(2.7rem, 7.4vw, 6.2rem); }
.hero-visual { position: absolute; z-index: 1; pointer-events: none; right: 4%; top: 50%; width: min(44vw, 560px); transform: translateY(-50%); }
.hero-still { width: 100%; height: auto; transition: opacity 0.8s; }
.hero-still .dots { fill: url(#dotfill); }
.has-3d .hero-still { opacity: 0; }
@media (max-width: 899px) {
  .hero--home { align-items: flex-end; min-height: max(640px, min(100svh, 1000px)); padding-top: 0; } /* capped: a very tall window keeps the copy near the top */
  .hero--home { background:
    radial-gradient(60% 34% at 50% 26%, rgba(31, 75, 255, 0.2), transparent 70%),
    linear-gradient(transparent 38%, rgba(245, 241, 232, 0.92) 60%),
    repeating-conic-gradient(from 0deg at 50% 30%, rgba(74, 108, 255, 0) 0deg, rgba(74, 108, 255, 0.1) 1.8deg, rgba(74, 108, 255, 0) 3.6deg, rgba(74, 108, 255, 0) 8deg),
    var(--cream); }
  .has-3d .hero--home { background: transparent; }
  .hero-visual { left: 50%; right: auto; top: 6%; width: min(66vw, 300px); transform: translateX(-50%); }
}
/* Short phones: the copy sits a little lower, and the mark sits higher and only as big as the room above
   the copy allows (the hero is at least 640px tall; its copy is about 380px), so the two never overlap.
   The 3D mark follows this box. */
@media (max-width: 899px) and (max-height: 720px) {
  .hero--home { padding-bottom: 40px; }
  .hero-visual { top: 3%; width: min(66vw, 300px, calc((max(640px, 100vh) * 0.97 - 434px) * 1.083)); }
  @supports (height: 100svh) { .hero-visual { width: min(66vw, 300px, calc((max(640px, 100svh) * 0.97 - 434px) * 1.083)); } }
}
.scene-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.scene-canvas.is-live { opacity: 1; }

/* Words: the home hero line animates on load in CSS; other headings reveal word by word (main.js), on load
   when they are on screen, or as they scroll in. */
.words .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-words .w { opacity: 0; transform: translateY(0.45em); filter: blur(6px); animation: word-in 0.9s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero-words .w:nth-child(2) { animation-delay: 0.08s; } .hero-words .w:nth-child(3) { animation-delay: 0.16s; }
  .hero-words .w:nth-child(4) { animation-delay: 0.34s; } .hero-words .w:nth-child(5) { animation-delay: 0.42s; }
  .hero-words .w:nth-child(6) { animation-delay: 0.5s; } .hero-words .w:nth-child(7) { animation-delay: 0.58s; }
  .fade-in { opacity: 0; animation: fade-up 0.9s 0.55s cubic-bezier(.2, .7, .2, 1) forwards; }
  .fade-in-2 { animation-delay: 0.7s; }
  .rw { display: inline-block; transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
}
/* The faint "before" state of the words: only in windows up to 1500px tall (see "Motion" below). Never
   invisible: a heading on screen at load is painted at once, faintly, so it counts as shown from the first paint. */
@media (prefers-reduced-motion: no-preference) and (max-height: 1500px) {
  .rw { opacity: 0.18; transform: translateY(0.3em); }
  .is-in .rw { opacity: 1; transform: none; }
}
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Home: offering cards that stack ---------- */
.offerings { position: relative; z-index: 1; padding-block: 40px clamp(56px, 7vw, 96px); }
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.stack > li + li { margin-top: 0; }
.stack-card {
  /* --fit (motion.js): the highest a tall card may stack and still show its foot on a short screen. */
  position: sticky; top: min(calc(var(--header-h) + 24px + var(--n, 0) * 22px), var(--fit, 100vh));
  transform-origin: 50% 0; /* motion.js leans a covered card back about its top edge */
  display: grid; gap: 24px; align-items: center; min-height: 360px; padding: clamp(28px, 5vw, 56px);
  border-radius: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.stack-card:nth-child(2) { --n: 1; }
.stack-card:nth-child(3) { --n: 2; }
.stack-card:nth-child(4) { --n: 3; }
/* Keyboard focus inside a card that a later card covers brings it to the front, so the focused link shows. */
.stack-card:focus-within { z-index: 2; }
.stack-card:focus-within > .stack-dim { opacity: 0 !important; }
/* A very short screen (a phone on its side) without motion.js to fit the cards: no stacking, so no card hides another's foot. */
@media (max-height: 560px) { .stack:not(.fx-fit) > .stack-card { position: relative; top: auto; } }
.stack-card h3 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 0.3em; }
.stack-card p { color: var(--muted); max-width: 52ch; }
.stack-card .num { font: 600 0.85rem/1 var(--sans); letter-spacing: 0.12em; color: var(--blue); margin-bottom: 18px; }
.stack-card .card-sub { margin: -0.15em 0 0.9em; font: italic 500 clamp(1.08rem, 1.5vw, 1.28rem)/1.35 var(--serif); color: var(--navy-3); }
.stack-card--navy { background: var(--navy); color: var(--cream); border-color: transparent; }
.stack-card--navy p { color: var(--muted-on-navy); }
.stack-card--navy .num, .stack-card--navy .link-arrow { color: var(--blue-on-navy); }
.stack-card--blue { background: linear-gradient(140deg, #2a55ff 0%, var(--blue) 45%, #1236c9 100%); color: #fff; border-color: transparent; }
.stack-card--blue p { color: #e3e9ff; }
.stack-card--blue .num, .stack-card--blue .link-arrow { color: #fff; }
.stack-card--sky { background: linear-gradient(140deg, #eef1ff 0%, var(--blue-soft) 52%, #c9d4ff 100%); border-color: rgba(31, 75, 255, 0.16); }
.stack-card--sky .num, .stack-card--sky .link-arrow { color: #1438d6; }
.card-art { display: none; }
@media (min-width: 900px) {
  .stack-card { grid-template-columns: 1.2fr 0.8fr; }
  .card-art { display: block; justify-self: end; width: 100%; max-width: 300px; opacity: 0.95; }
}

/* ---------- Generic cards and grids ---------- */
.grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
.card { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.card .icon { width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-mist); color: var(--blue); }
.card .icon svg { width: 22px; height: 22px; }
.section--navy .card { background: var(--navy-2); border-color: var(--line-on-navy); }
.section--navy .card p { color: var(--muted-on-navy); }
.card--glass { background: rgba(251, 249, 244, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.feature { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 72px; } }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.ticks li { position: relative; padding-left: 34px; margin-top: 14px; }
.ticks li::before, .ticks li::after { content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; border-radius: 50%; }
.ticks li::before { background: var(--blue); }
.ticks li::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* Featured GSF-E block on the home page */
.featured { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(32px, 6vw, 72px); background: var(--navy); color: var(--cream); }
.featured::before { content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 75, 255, 0.55), transparent 65%); }
.featured > * { position: relative; }
.featured .lede, .featured p { color: var(--muted-on-navy); }
.featured .eyebrow { color: var(--blue-on-navy); }
.price-chip { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 8px; padding: 12px 18px; border-radius: 16px; background: rgba(245, 241, 232, 0.08); border: 1px solid var(--line-on-navy); }
.price-chip strong { color: var(--cream); font-size: 1.1rem; }

/* Featured weekend workshops block on the home page: light blue, so it stands apart from GSF-E's navy */
.section--lead { padding-block: clamp(24px, 4vw, 48px) 0; }
.featured--sky { background: linear-gradient(150deg, #f3f5ff 0%, var(--blue-soft) 55%, #c9d4ff 100%); color: var(--ink); border: 1px solid rgba(31, 75, 255, 0.14); }
.featured--sky::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 65%); }
.featured--sky .lede, .featured--sky p { color: var(--muted); }
.featured--sky .eyebrow { color: #1438d6; }
.featured--sky .info-block .title { color: var(--ink); }
@media (max-width: 479px) { .featured--sky { padding-inline: 20px; } .featured--sky .info-block { padding: 22px 20px; } }
.feature-side .ticks { margin-top: 26px; }
.info-block .actions { margin-top: 18px; }
.fact-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; }
.fact-chips li { margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(22, 33, 62, 0.12); color: var(--navy); font-size: 0.95rem; font-weight: 600; }

/* Community blocks */
.info-block { position: relative; padding: 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.info-block h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.info-block .title { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; font-weight: 600; margin-bottom: 8px; }
.info-block .meta { color: var(--muted); font-size: 0.95rem; }
.info-block[aria-busy="true"]:not([data-key]):not(:has([data-key])) { opacity: 0.7; } /* only while a block the build left empty loads */
.topics { margin: 12px 0 0; padding-left: 1.1em; color: var(--muted); }
.past-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.past-list > li { display: grid; gap: 6px 28px; padding: 24px 0; border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 760px) { .past-list > li { grid-template-columns: 180px 1fr; } }
.past-list time { font-weight: 600; color: var(--blue); }
.past-list h3 { margin-bottom: 6px; }
.past-list p { margin-bottom: 0.4em; color: var(--muted); }
.note { font-size: 0.93rem; color: var(--muted); padding: 12px 16px; border-left: 3px solid var(--blue); background: var(--blue-mist); border-radius: 0 12px 12px 0; }
.section--navy .note { background: rgba(159, 178, 255, 0.1); color: var(--muted-on-navy); }

/* Pricing */
.pricing { display: grid; gap: 20px; }
@media (min-width: 800px) { .pricing { grid-template-columns: 1fr 1fr; } }
.price-card { position: relative; padding: clamp(26px, 4vw, 40px); border-radius: 26px; background: var(--paper); border: 1px solid var(--line); }
.price-card--feature { background: var(--navy); color: var(--cream); border-color: transparent; }
.price-card--feature .muted { color: var(--muted-on-navy); }
.price-card h3 { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 4px; }
.price { font: 700 clamp(2.6rem, 6vw, 3.6rem)/1 var(--sans); letter-spacing: -0.03em; }
.per { color: var(--muted); }
.price-card--feature .per { color: var(--muted-on-navy); }
.free-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 650; font-size: 0.9rem; }

/* Steps and the GSF-E path */
.path-section { overflow: clip; }
.path-layout { display: grid; gap: 28px; }
.path-visual { position: relative; height: min(42vh, 420px); min-height: 260px; }
.path-visual svg, .path-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.path-visual canvas { opacity: 0; transition: opacity 0.8s; }
.path-visual.is-live canvas { opacity: 1; }
.path-visual.is-live .path-still { opacity: 0; }
.path-still { transition: opacity 0.6s; }
@media (max-width: 899px) {
  .path-visual { position: sticky; top: var(--header-h); z-index: 2; height: min(32vh, 320px); min-height: 210px; margin-inline: calc(var(--gutter) * -1); background: var(--navy); box-shadow: 0 18px 18px -2px var(--navy); }
}
@media (min-width: 900px) {
  .path-layout { grid-template-columns: 1fr 1fr; gap: 64px; }
  .path-visual { position: sticky; top: calc(var(--header-h) + 5vh); height: min(80vh, 800px); }
}
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { position: relative; margin: 0; padding: 36px 0 36px 0; border-top: 1px solid var(--line-on-navy); }
@media (min-width: 900px) { .steps > li { min-height: min(60vh, 600px); display: flex; flex-direction: column; justify-content: center; } }
.steps .step-num { font: 600 0.85rem/1 var(--sans); letter-spacing: 0.14em; color: var(--blue-on-navy); margin-bottom: 14px; }
.steps h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.steps p { color: var(--muted-on-navy); max-width: 46ch; }
.checkpoint { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-on-navy); color: var(--muted-on-navy); font-size: 0.92rem; font-weight: 600; width: fit-content; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.checkpoint::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; transition: background 0.4s; }
.checkpoint.is-signed, .checkpoint.is-in { background: var(--blue); border-color: var(--blue); color: #fff; }
.checkpoint.is-signed::before, .checkpoint.is-in::before { background: #fff; border-color: #fff; }

/* ---------- GSF-E page: numbers, the why, the delivery loop, the map, what's inside, the status ---------- */
.rc-chip { margin: 22px 0 0; }
.rc-chip a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); color: var(--navy); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.rc-chip a:hover { background: #fff; }
.status-dot { flex: none; position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }

.stats-band { position: relative; z-index: 1; background: var(--navy); color: var(--cream); padding-block: clamp(36px, 5vw, 56px); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat { margin: 0; display: grid; align-content: start; gap: 6px; padding-left: 16px; border-left: 2px solid rgba(159, 178, 255, 0.35); }
.stat-num { font: 600 clamp(2.4rem, 4.4vw, 3.4rem)/1 var(--serif); color: #fff; letter-spacing: -0.02em; }
.stat-label { color: var(--muted-on-navy); font-size: 0.92rem; line-height: 1.4; }

.why-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 520px) { .why-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why-stat { display: grid; align-content: start; gap: 10px; margin: 0; }
.why-num { font: 650 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif); color: var(--blue); letter-spacing: -0.02em; }
.why-cap { color: var(--muted); font-size: 0.98rem; line-height: 1.45; }
.why-text { max-width: 760px; margin-top: clamp(32px, 5vw, 48px); }
.why-text p { font-size: 1.1rem; }
.sources { margin: 18px 0 0; color: var(--muted); font-size: 0.88rem !important; line-height: 1.5; }

/* The delivery loop (motion.js draws it on scroll; without it, it shows fully drawn) */
.dl-layout { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1200px) { .dl-layout { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 40px; } }
.key-gates { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; max-width: 560px; }
.key-gates li { position: relative; margin: 0; padding-left: 32px; color: var(--muted); }
.key-gates li::before { content: ""; position: absolute; left: 4px; top: 0.42em; width: 12px; height: 12px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); }
.key-gates strong { color: var(--ink); }
.dl { position: relative; margin: 0; }
.dl-box { max-width: 800px; margin-inline: auto; }
.dl-ring { width: 100%; height: auto; overflow: visible; }
.dl-track { fill: none; stroke: rgba(22, 33, 62, 0.1); stroke-width: 2; }
.dl-draw { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.dl-draw-glow { stroke: #4a6cff; stroke-opacity: 0.18; stroke-width: 14; }
.dl-pulse { display: none; }
.dl-node { fill: var(--blue); stroke: var(--paper); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1); }
.dl-name { font: 600 32px var(--serif); fill: var(--ink); letter-spacing: -0.01em; }
.dl-rec { font: 600 19px ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; fill: var(--navy-3); }
.dl-center { font: italic 500 27px var(--serif); fill: var(--navy-3); }
.dl-back { font: italic 400 16px var(--sans); fill: var(--muted); }
.dl-back-arrow { fill: none; stroke: var(--muted); stroke-opacity: 0.55; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dl-gate rect { fill: var(--blue); stroke: var(--paper); stroke-width: 2.5; }
.dl-check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dl-halo { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* Hovering a stage, or focusing its line in the list, highlights its record. */
:is(.dl-s:hover, .dl:has([data-s="0"]:is(:hover, :focus-visible)) .dl-s0, .dl:has([data-s="1"]:is(:hover, :focus-visible)) .dl-s1, .dl:has([data-s="2"]:is(:hover, :focus-visible)) .dl-s2, .dl:has([data-s="3"]:is(:hover, :focus-visible)) .dl-s3, .dl:has([data-s="4"]:is(:hover, :focus-visible)) .dl-s4, .dl:has([data-s="5"]:is(:hover, :focus-visible)) .dl-s5) .dl-node { transform: scale(1.5); }
:is(.dl-s:hover, .dl:has([data-s="0"]:is(:hover, :focus-visible)) .dl-s0, .dl:has([data-s="1"]:is(:hover, :focus-visible)) .dl-s1, .dl:has([data-s="2"]:is(:hover, :focus-visible)) .dl-s2, .dl:has([data-s="3"]:is(:hover, :focus-visible)) .dl-s3, .dl:has([data-s="4"]:is(:hover, :focus-visible)) .dl-s4, .dl:has([data-s="5"]:is(:hover, :focus-visible)) .dl-s5) :is(.dl-name, .dl-rec) { fill: #1438d6; }
:is(.dl-s:hover, .dl:has([data-s="0"]:is(:hover, :focus-visible)) .dl-s0, .dl:has([data-s="1"]:is(:hover, :focus-visible)) .dl-s1, .dl:has([data-s="2"]:is(:hover, :focus-visible)) .dl-s2, .dl:has([data-s="3"]:is(:hover, :focus-visible)) .dl-s3, .dl:has([data-s="4"]:is(:hover, :focus-visible)) .dl-s4, .dl:has([data-s="5"]:is(:hover, :focus-visible)) .dl-s5) .dl-rec { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
:is(.dl-s:hover, .dl:has([data-s="0"]:is(:hover, :focus-visible)) .dl-s0, .dl:has([data-s="1"]:is(:hover, :focus-visible)) .dl-s1, .dl:has([data-s="2"]:is(:hover, :focus-visible)) .dl-s2, .dl:has([data-s="3"]:is(:hover, :focus-visible)) .dl-s3, .dl:has([data-s="4"]:is(:hover, :focus-visible)) .dl-s4, .dl:has([data-s="5"]:is(:hover, :focus-visible)) .dl-s5) .dl-label { opacity: 1 !important; transform: none !important; }
/* The list: read by screen readers on large screens; the readable layout on phones. */
.dl-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; list-style: none; }
.dl-file { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; font-weight: 600; color: var(--navy-3); font-size: 0.92em; }
.dl-credit { margin-top: 16px; text-align: center; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 639px) {
  /* Phones: the ring becomes a compact emblem without labels, and the list carries the words. */
  .dl-box { width: min(250px, 70vw); aspect-ratio: 1; overflow: hidden; }
  .dl-ring { width: 181.82%; max-width: none; margin: -20.45% 0 0 -40.91%; }
  .dl-label, .dl-back, .dl-back-arrow { display: none; }
  .dl-list { position: relative; width: auto; height: auto; margin: 24px 0 0; padding: 0 0 0 34px; overflow: visible; clip-path: none; white-space: normal; display: grid; gap: 4px; }
  .dl-list::before, .dl-list::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 26px; width: 2px; border-radius: 2px; background: rgba(22, 33, 62, 0.12); }
  .dl-list::after { background: var(--blue); transform-origin: 50% 0; transform: scaleY(var(--dl-p, 1)); }
  .dl-item { position: relative; margin: 0; padding: 10px 12px; border-radius: 12px; }
  .dl-item::before { content: ""; position: absolute; z-index: 1; left: -30px; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--paper); }
  .dl-item:is(:hover, :focus-visible) { background: var(--blue-mist); }
  .dl-k { display: block; font: 600 1.3rem/1.25 var(--serif); color: var(--ink); }
  .dl-v { display: block; margin-top: 2px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
  .dl-credit { text-align: left; }
}

.phase-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 1100px) { .phase-map { grid-template-columns: 1.3fr 1.3fr 1fr 1fr 1fr 1.1fr; } }
.stage-col { margin: 0; padding: 22px 20px; }
.stage-name { margin: 0 0 14px; font: 650 0.8rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-on-navy); }
.phase-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.phase-list li { margin: 0; display: grid; gap: 5px; }
.ph { font: 600 1.2rem/1.2 var(--serif); color: var(--cream); }
.gt { position: relative; padding-left: 19px; color: var(--muted-on-navy); font-size: 0.9rem; line-height: 1.45; }
.gt::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 8px; height: 8px; border-radius: 1.5px; background: var(--blue-2); transform: rotate(45deg); }
.gt em { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid var(--line-on-navy); border-radius: 999px; font-style: normal; font-weight: 650; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--blue-on-navy); white-space: nowrap; }
.phase-note { margin: 24px 0 0; max-width: 820px; }
.people-note { margin: 24px 0 0; max-width: 820px; }

.inside { display: grid; gap: 20px; }
@media (min-width: 760px) { .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inside-kit { grid-row: span 2; } }
@media (min-width: 1100px) { .inside { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kit-list { list-style: none; padding: 0; margin: 0; }
.kit-list li { position: relative; margin: 14px 0 0; padding-left: 18px; color: var(--muted); }
.kit-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }
.kit-list strong { color: var(--ink); }
.track-list { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 12px; }
.track-list li { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 2px 12px; color: var(--muted); font-size: 0.95rem; }
.track-list li > span:last-child { grid-column: 2; line-height: 1.4; }
.track-name { color: var(--ink); font-weight: 650; }
.track-bar { height: 8px; border-radius: 99px; background: var(--blue-mist); overflow: hidden; }
.track-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); transform-origin: 0 50%; }
.tb-full { width: 100%; }
.tb-mvp { width: 54.5%; }
.tb-proto { width: 27.3%; }
.ways { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ways li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--blue-mist); color: var(--navy); font-size: 0.92rem; font-weight: 600; line-height: 1.35; }

.status-band { position: relative; z-index: 1; background: var(--cream); padding-block: 0 clamp(56px, 8vw, 96px); }
.status { display: flex; gap: 14px; align-items: flex-start; max-width: 900px; margin: 0 auto; padding: 18px 22px; border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.status .status-dot { margin-top: 0.55em; }
.status strong { color: var(--ink); }

/* Community web */
.web-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto; }
.web-visual svg, .web-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.web-visual canvas { opacity: 0; transition: opacity 0.8s; }
.web-visual.is-live canvas { opacity: 1; }
.web-visual.is-live .web-still { opacity: 0; }
.web-still { transition: opacity 0.6s; }
@media (max-width: 899px) { .web-visual { max-width: 320px; } }

/* Q&A */
.qa { display: grid; gap: 14px; }
.qa details { border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); padding: 0 22px; }
.qa summary { cursor: pointer; padding: 20px 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--sans); font-weight: 400; color: var(--blue); font-size: 1.4rem; line-height: 1; }
.qa details[open] summary::after { content: "−"; }
.qa details p { color: var(--muted); }

/* Offers (consulting) */
.offer { position: relative; display: grid; gap: 18px; padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--paper); border: 1px solid var(--line); }
.offer + .offer { margin-top: 20px; }
@media (min-width: 900px) { .offer { grid-template-columns: 80px 1fr auto; align-items: start; gap: 32px; } }
.offer .num { font: 600 clamp(2rem, 4vw, 3rem)/1 var(--serif); color: var(--blue); }
.offer h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.35em; }
.offer p, .offer li { color: var(--muted); }
.offer ul { margin: 0; }
.offer .note { margin: 20px 0 0; max-width: 62ch; }
.offer .actions { margin-top: 0; flex-direction: column; align-items: stretch; }
.offer .small a { white-space: nowrap; }

/* About */
.about-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 860px) { .about-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 72px; align-items: center; } }
.about-grid .portrait { margin: 0; max-width: 400px; width: 100%; }
.portrait { position: relative; border-radius: 28px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow); max-width: 360px; }
.portrait img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%); mask-image: linear-gradient(90deg, transparent 0, #000 7%); }
.portrait picture { display: block; }
.portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; color: var(--cream); background: linear-gradient(transparent, rgba(22, 33, 62, 0.92)); font-size: 0.95rem; }
.portrait figcaption strong { display: block; font-family: var(--serif); font-size: 1.25rem; }
.draft-flag { display: inline-block; margin-bottom: 16px; padding: 6px 12px; border-radius: 8px; background: #fff3c4; color: #5a4300; font-size: 0.85rem; font-weight: 600; border: 1px dashed #b38b00; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { position: relative; margin: 0; padding: 22px 24px; border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 4px; }
.contact-list .label { font-size: 0.8rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.contact-list .value { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }
.placeholder { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; background: #fff3c4; color: #5a4300; padding: 1px 6px; border-radius: 6px; }

/* Legal pages */
.legal { padding-block: clamp(48px, 8vw, 96px); }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.2em; }
.legal h3 { font-size: 1.2rem; margin-top: 1.6em; }
.legal p, .legal li { max-width: 72ch; }
.legal .meta { color: var(--muted); font-size: 0.95rem; }
.legal .callout { margin: 28px 0; padding: 18px 20px; border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); font-size: 0.97rem; }
.legal .clause { margin: 0 0 0.9em; }
.legal .clause b { font-weight: 650; margin-right: 0.35em; }
.table-wrap { overflow-x: auto; margin: 18px 0 26px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); }
.table-wrap:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font-weight: 650; background: var(--blue-mist); }
@media (max-width: 640px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .stack-table td { border: 0; padding: 4px 14px; }
  .stack-table td::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
}
.toc { columns: 2 220px; padding-left: 1.2em; margin: 0 0 8px; }
.toc li { break-inside: avoid; }

/* ---------- Closing line and the sky footer ---------- */
.closing { position: relative; z-index: 1; padding-block: clamp(96px, 14vw, 180px) clamp(40px, 6vw, 80px); text-align: center; background: linear-gradient(var(--cream), #e9edff); }
.closing h2 { font-size: clamp(2.6rem, 8vw, 6.4rem); margin-bottom: 0.3em; }
.closing .actions { justify-content: center; }
.closing .lede { margin-inline: auto; }
.site-footer {
  position: relative; z-index: 1; padding: clamp(56px, 9vw, 120px) 0 28px;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(45% 40% at 82% 22%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(180deg, #e9edff 0%, #bfcdff 38%, #7f9bff 72%, #3f63ff 100%);
}
.closing + .site-footer { padding-top: 24px; }
.footer-card {
  display: grid; gap: 36px; padding: clamp(28px, 5vw, 52px); border-radius: 28px;
  background: rgba(251, 249, 244, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -40px rgba(22, 33, 62, 0.55); border: 1px solid rgba(255, 255, 255, 0.7);
}
@media (min-width: 900px) { .footer-card { grid-template-columns: 1fr 1.6fr; } }
@media (min-width: 1100px) { .footer-card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr); } }
.footer-brand p { color: var(--muted); margin: 14px 0 0; max-width: 34ch; }
.footer-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.footer-cols h2 { font: 650 0.8rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li + li { margin-top: 8px; }
.footer-cols a, .footer-brand a:not(.brand) { color: var(--navy); text-decoration: none; }
.footer-cols a:hover, .footer-brand a:not(.brand):hover { color: var(--blue); text-decoration: underline; }
.footer-legal { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
.footer-legal a { color: inherit; }

/* ---------- 404 ---------- */
.notfound { min-height: min(64vh, 640px); display: grid; place-items: center; text-align: center; }
.notfound .actions { justify-content: center; }

/* ---------- Motion: cards and sub-sections (assets/js/motion.js) ----------
   The hidden "before" states exist only once motion.js has run and motion is allowed, so without JS,
   or with reduced motion, every card and line shows, still. Only transforms and opacity animate
   (plus stroke offsets inside small SVGs). */
.acronym-title b { color: var(--blue); font-weight: inherit; }
/* GSF-E heading: the name "GSF-E" is part of the heading, shown as a small navy pill on its own line above the
   full name. With motion, the moving mark (.acro-mark) assembles over it, then leaves it in place. */
.acronym-title .acro-name, .acro-mark { padding: 0.42em 0.8em 0.46em; font: 650 clamp(1.05rem, 1.5vw, 1.3rem)/1 var(--serif); letter-spacing: 0.04em; color: var(--cream); white-space: nowrap; }
.acronym-title .acro-name { position: relative; display: flex; align-items: baseline; width: max-content; margin: 0 0 0.75em; border-radius: 999px; background: var(--navy); box-shadow: 0 12px 26px -12px rgba(22, 33, 62, 0.7), inset 0 0 0 1px rgba(159, 178, 255, 0.3); }
.acro-dash { margin: 0 0.05em; color: #7f9bff; }
.acro-mark { display: none; }
.stack-dim, .fx-tilt > .fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.stack-dim { z-index: 1; background: #0b1124; opacity: 0; }
.fx-tilt > .fx-glare { z-index: 2; overflow: hidden; opacity: 0; transition: opacity 0.5s ease; }
.fx-tilt.is-hovered > .fx-glare { opacity: 1; }
.fx-glare > span { position: absolute; left: 0; top: 0; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, var(--glare, rgba(74, 108, 255, 0.14)), transparent); }
.section--navy .card, .stack-card--navy, .price-card--feature, .featured, .portrait { --glare: rgba(255, 255, 255, 0.11); }
.stack-card--blue { --glare: rgba(255, 255, 255, 0.17); }
.stack-card--sky, .featured--sky { --glare: rgba(255, 255, 255, 0.45); }
/* A price counting up (motion.js): the real price stays in place, transparent, and the count is drawn over it.
   The count is hidden from screen readers (the empty alternative text after the slash). */
.fx-counting { position: relative; -webkit-text-fill-color: transparent; }
.fx-counting::after { content: attr(data-count); content: attr(data-count) / ""; position: absolute; inset: 0; -webkit-text-fill-color: currentColor; white-space: nowrap; pointer-events: none; }

.fx-quiet, .fx-quiet *, .fx-quiet *::before, .fx-quiet *::after { transition: none !important; } /* set-up frames only */
@media (prefers-reduced-motion: no-preference) {
  /* Blocks rise in from depth with a slight tilt back; their contents follow one after another. */
  .fx-rise { transform-origin: 50% 100%; transition: opacity 0.75s cubic-bezier(.2, .7, .2, 1), transform 1.05s cubic-bezier(.2, .7, .2, 1); }
  .featured.fx-rise, .offer.fx-rise, .past-list > .fx-rise, .qa > .fx-rise, .contact-list > .fx-rise { --fx-rx: 7deg; }
  .steps > .fx-rise { --fx-rx: 10deg; }
  .fx-kid { transition: opacity 0.6s cubic-bezier(.2, .7, .2, 1) var(--fx-d, 0ms), transform 0.8s cubic-bezier(.2, .7, .2, 1) var(--fx-d, 0ms); }
  .icon.fx-kid { transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
  .fx-kid:focus-within, .fx-ticks > li:focus-within { transition-delay: 0s; } /* keyboard focus never waits for the stagger */
  .checkpoint.fx-kid { transition: opacity 0.6s ease var(--fx-d, 0ms), transform 0.8s cubic-bezier(.2, .7, .2, 1) var(--fx-d, 0ms), background 0.4s, color 0.4s, border-color 0.4s; }

  /* Icons draw on. */
  .fx-draw { stroke-dasharray: var(--len) var(--len); transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--fx-d, 0ms) + 200ms); }

  /* Ticks check in one after another: the line, the blue dot, then the tick. */
  .fx-ticks > li { transition: opacity 0.5s ease var(--fx-d), transform 0.7s cubic-bezier(.2, .7, .2, 1) var(--fx-d); }
  .fx-ticks > li::before { transition: transform 0.55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fx-d) + 60ms); }
  .fx-ticks > li::after { transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fx-d) + 280ms), opacity 0.2s linear calc(var(--fx-d) + 280ms); }

  /* 3D tilt under a mouse: motion.js writes the transform each frame, so it follows without a lag. */
  .fx-tilt.is-tilting { transition: opacity 0.75s cubic-bezier(.2, .7, .2, 1); }
  .fx-tilt.is-tilting:not(.stack-card) { transform-origin: 50% 50%; }

  /* Home offering cards' art. It plays only while it can be seen (motion.js sets .is-playing). */
  .fx-art { --play: paused; }
  .fx-art.is-playing { --play: running; }
  .fx-art :is(.cp-on, .cp-halo, .aw-node, .aw-ripple, .ac-on, .ac-glow, .ac-ripple, .wk-on, .wk-halo, .wk-num) { transform-box: fill-box; transform-origin: center; }
  .fx-art .ap-line { stroke-dasharray: 100 100; animation: ap-line 9s linear infinite both var(--play); }
  .fx-art .ap-run { animation: ap-run 9s linear infinite both var(--play); }
  .fx-art .cp-on { animation: ap-on1 9s ease-out infinite both var(--play); }
  .fx-art .ap-cp2 .cp-on { animation-name: ap-on2; }
  .fx-art .ap-cp3 .cp-on { animation-name: ap-on3; }
  .fx-art .ap-cp4 .cp-on { animation-name: ap-on4; }
  .fx-art .cp-halo { animation: ap-halo1 9s ease-out infinite both var(--play); }
  .fx-art .ap-cp2 .cp-halo { animation-name: ap-halo2; }
  .fx-art .ap-cp3 .cp-halo { animation-name: ap-halo3; }
  .fx-art .ap-cp4 .cp-halo { animation-name: ap-halo4; }
  .fx-art .ap-tag-in { animation: ap-tag 9s ease-out infinite both var(--play); }
  /* Consulting card, "many paths, one chosen": the routes are weighed one by one, then one draws itself
     in electric blue to its end point, which glows, while the others dim. */
  .fx-art :is(.ac-alt, .ac-end) { animation: ac-alt1 8s ease-in-out infinite both var(--play); }
  .fx-art .ac-trace { animation-name: ac-trace; }
  .fx-art :is(.ac-alt2, .ac-end2) { animation-name: ac-alt2; }
  .fx-art :is(.ac-alt3, .ac-end3) { animation-name: ac-alt3; }
  .fx-art .ac-line { stroke-dasharray: 100 120; animation: ac-line 8s cubic-bezier(.65, 0, .35, 1) infinite both var(--play); }
  .fx-art .ac-run { animation: ac-run 8s linear infinite both var(--play); }
  .fx-art .ac-on { animation: ac-on 8s ease-out infinite both var(--play); }
  .fx-art .ac-glow { animation: ac-glow 8s ease-out infinite both var(--play); }
  .fx-art .ac-ripple { animation: ac-ripple 8s ease-out infinite both var(--play); }
  /* Workshop card: Friday, Saturday and Sunday light up in turn as the 16-hour ring fills (motion.js
     counts the hours in step). The timings of wk-fill must match weekendHours() in motion.js. */
  .fx-art .wk-fill { animation: wk-fill 9s linear infinite both var(--play); }
  .fx-art .wk-run { animation: wk-run 9s linear infinite both var(--play); }
  .fx-art .wk-on { animation: wk-on1 9s ease-out infinite both var(--play); }
  .fx-art .wk-on2 { animation-name: wk-on2; }
  .fx-art .wk-on3 { animation-name: wk-on3; }
  .fx-art .wk-halo { animation: wk-halo 9s ease-out infinite both var(--play); }
  .fx-art .wk-num { animation: wk-pop 9s ease-out infinite both var(--play); }
  .fx-art .aw-glow { opacity: 1; }
  .fx-art :is(.aw-link, .aw-glow) path { stroke-dasharray: 1 1; animation: aw-link 6s cubic-bezier(.45, 0, .25, 1) infinite both var(--play); }
  .fx-art .aw-glow path { animation-name: aw-glow; }
  .fx-art .aw-node { animation: aw-node 6s ease-out infinite both var(--play); }
  .fx-art .aw-ripple { animation: aw-ripple 3s ease-out infinite both var(--play); }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(2), .fx-art .aw-node:nth-child(2) { animation-delay: 0.22s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(3), .fx-art .aw-node:nth-child(3) { animation-delay: 0.44s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(4), .fx-art .aw-node:nth-child(4) { animation-delay: 0.66s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(5), .fx-art .aw-node:nth-child(5) { animation-delay: 0.88s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(6) { animation-delay: 1.2s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(7) { animation-delay: 1.42s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(8) { animation-delay: 1.64s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(9) { animation-delay: 1.86s; }
  .fx-art :is(.aw-link, .aw-glow) path:nth-child(10) { animation-delay: 2.08s; }

  /* GSF-E page: the delivery loop (motion.js). It starts undrawn; stages, records and gates follow the ring. */
  .fx-loop .dl-draw { stroke-dasharray: 100 120; }
  .fx-loop .dl-node { transition: fill 0.4s, stroke 0.4s, transform 0.35s cubic-bezier(.34, 1.56, .64, 1); }
  .fx-loop .dl-s:not(.is-on) .dl-node { fill: var(--paper); stroke: rgba(22, 33, 62, 0.28); }
  .fx-loop .dl-label { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); }
  .fx-loop .dl-s:not(.is-on) .dl-label { opacity: 0; transform: translateY(10px); }
  .fx-loop :is(.dl-gate rect, .dl-check) { transition: fill 0.35s, stroke 0.35s, opacity 0.35s; }
  .fx-loop .dl-g:not(.is-signed) .dl-gate rect { fill: var(--paper); stroke: rgba(22, 33, 62, 0.35); stroke-width: 2; }
  .fx-loop .dl-g:not(.is-signed) .dl-check { opacity: 0; }
  .fx-loop .dl-g.is-signed .dl-halo { animation: dl-halo 1s ease-out both; }
  .fx-loop :is(.dl-center, .dl-back, .dl-back-arrow) { transition: opacity 0.9s ease 0.2s; }
  .fx-loop:not(.is-done) :is(.dl-center, .dl-back, .dl-back-arrow) { opacity: 0; }
  .fx-loop.is-done .dl-pulse { display: inline; transform-box: view-box; transform-origin: 400px 310px; animation: dl-spin 7s linear infinite; animation-play-state: var(--dl-play, paused); }
  .fx-loop.is-playing { --dl-play: running; }
  .fx-loop .dl-item { transition: opacity 0.5s ease; }
  .fx-loop .dl-item:not(.is-on) { opacity: 0.45; }
  .fx-loop .dl-item::before { transition: background 0.4s, box-shadow 0.4s; }
  .fx-loop .dl-item:not(.is-on)::before { background: var(--paper); box-shadow: 0 0 0 3px var(--paper), inset 0 0 0 2px rgba(22, 33, 62, 0.3); }
  /* The track bars grow in as their card rises; the status dot breathes. */
  .track-bar i { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) 0.35s; }
  .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); animation: status-ping 2.4s ease-out infinite; }

  /* GSF-E heading: the initials light up in turn, then the letters fly into the heading's "GSF-E" pill (motion.js
     lays the moving mark over it). */
  .acronym-title.fx-acro b { position: relative; z-index: 0; color: inherit; }
  .acronym-title.fx-acro b::after { content: attr(data-l); position: absolute; inset: 0; display: flex; align-items: center; color: var(--blue); opacity: 0; }
  .acronym-title.fx-acro b::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 1.7em; height: 1.7em; margin: -0.85em 0 0 -0.85em; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 108, 255, 0.4), rgba(74, 108, 255, 0)); opacity: 0; }
  .acronym-title.is-go b::after { animation: acro-lit 0.8s cubic-bezier(.2, .7, .2, 1) var(--fx-d) both; }
  .acronym-title.is-go b::before { animation: acro-glow 1.6s ease-out var(--fx-d) both; }
  .acronym-title.fx-acro .acro-name { transition: opacity 0.4s ease; }
  .acronym-title.is-done .acro-name { transition: none; } /* the mark is removed in the same frame */
  .acro-mark { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: baseline; pointer-events: none; -webkit-user-select: none; user-select: none; }
  .am-pill { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; background: var(--navy); box-shadow: 0 12px 26px -12px rgba(22, 33, 62, 0.7), inset 0 0 0 1px rgba(159, 178, 255, 0.3); opacity: 0; transform: scale(0.5); }
  .am-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-110%); }
  .am-l, .am-dash { position: relative; display: inline-block; opacity: 0; }
  .am-dash { margin: 0 0.05em; color: #7f9bff; transform: scale(0); }
  .am-l::after { content: attr(data-l); position: absolute; left: 0; top: 0; color: var(--blue); } /* leaves as the blue initial, lands cream */
  .acro-mark.is-go .am-pill { opacity: 1; transform: none; transition: opacity 0.5s ease var(--fx-d), transform 0.7s cubic-bezier(.34, 1.56, .64, 1) var(--fx-d); }
  .acro-mark.is-go .am-l { opacity: 1; transform: none; transition: transform 1s cubic-bezier(.65, 0, .25, 1) var(--fx-d), opacity 0.5s ease var(--fx-d); }
  .acro-mark.is-go .am-dash { opacity: 1; transform: none; transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1) var(--fx-d), opacity 0.3s ease var(--fx-d); }
  .acro-mark.is-go .am-l::after { opacity: 0; transition: opacity 0.4s ease calc(var(--fx-d) + 650ms); }
  .acro-mark.is-go .am-shine { animation: am-shine 1.2s ease-in-out var(--fx-d) both; }
}

/* The hidden "before" states, until each block scrolls in. Only in windows up to 1500px tall: a taller window
   (search engines render pages in one) hides nothing, and motion.js and main.js set nothing up there (TALL). */
@media (prefers-reduced-motion: no-preference) and (max-height: 1500px) {
  .fx-rise:not(.is-in) { opacity: 0; transform: perspective(1200px) translate3d(0, 64px, -110px) rotateX(var(--fx-rx, 14deg)); }
  .fx-stage:not(.is-in) .fx-kid { opacity: 0; transform: translate3d(0, 22px, 0); }
  .fx-stage:not(.is-in) .icon.fx-kid { transform: scale(0.4) rotate(-20deg); }
  .fx-stage:not(.is-in) .fx-draw { stroke-dashoffset: var(--len); }
  .fx-ticks:not(.is-in) > li { opacity: 0; transform: translate3d(-16px, 0, 0); }
  .fx-ticks:not(.is-in) > li::before { transform: scale(0); }
  .fx-ticks:not(.is-in) > li::after { opacity: 0; transform: scale(0.2) rotate(-60deg); }
  .fx-stage:not(.is-in) .track-bar i { transform: scaleX(0); }
  /* The heading's "GSF-E" pill waits faint, never invisible, until the moving mark has assembled over it. */
  .acronym-title.fx-acro:not(.is-done) .acro-name { opacity: 0.2; }
}
@media (min-height: 1501px) {
  /* If a window grows that tall after loading, whatever was still hidden shows at once. */
  .rw, .fx-rise, .fx-kid, .fx-ticks > li, .fx-ticks > li::before, .fx-ticks > li::after, .fx-draw, .track-bar i, .ws-seg { transition: none !important; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  /* Phones: contents still enter one after another, but only fade (no movement of their own), quicker,
     so fewer layers animate at once while scrolling. The blocks themselves still rise in from depth. */
  .fx-kid { transition: opacity 0.45s ease calc(var(--fx-d, 0ms) * 0.6); }
  .checkpoint.fx-kid { transition: opacity 0.45s ease calc(var(--fx-d, 0ms) * 0.6), background 0.4s, color 0.4s, border-color 0.4s; }
  .fx-stage:not(.is-in) .fx-kid, .fx-stage:not(.is-in) .icon.fx-kid { transform: none; }
  .fx-ticks > li { transition: opacity 0.45s ease calc(var(--fx-d) * 0.6); }
  .fx-ticks:not(.is-in) > li { transform: none; }
  .fx-ticks > li::before { transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fx-d) * 0.6 + 60ms); }
  .fx-ticks > li::after { transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--fx-d) * 0.6 + 220ms), opacity 0.2s linear calc(var(--fx-d) * 0.6 + 220ms); }
}

@keyframes ap-line { 0%, 4% { stroke-dashoffset: 100; } 50%, 93% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }
@keyframes ap-run { 0%, 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes ap-on1 { 0%, 4% { opacity: 0; transform: scale(0.2); } 6.5% { opacity: 1; transform: scale(1.25); } 9%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes ap-on2 { 0%, 19.3% { opacity: 0; transform: scale(0.2); } 21.8% { opacity: 1; transform: scale(1.25); } 24.3%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes ap-on3 { 0%, 34.7% { opacity: 0; transform: scale(0.2); } 37.2% { opacity: 1; transform: scale(1.25); } 39.7%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes ap-on4 { 0%, 50% { opacity: 0; transform: scale(0.2); } 52.5% { opacity: 1; transform: scale(1.25); } 55%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes ap-halo1 { 0%, 4% { opacity: 0; transform: none; } 5% { opacity: 0.8; transform: none; } 14%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ap-halo2 { 0%, 19.3% { opacity: 0; transform: none; } 20.3% { opacity: 0.8; transform: none; } 29.3%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ap-halo3 { 0%, 34.7% { opacity: 0; transform: none; } 35.7% { opacity: 0.8; transform: none; } 44.7%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ap-halo4 { 0%, 50% { opacity: 0; transform: none; } 51% { opacity: 0.8; transform: none; } 60%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ap-tag { 0%, 54% { opacity: 0; transform: translateY(6px); } 58%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ac-alt1 { 0%, 6% { opacity: 0.55; } 12% { opacity: 1; } 18%, 36% { opacity: 0.55; } 44%, 90% { opacity: 0.2; } 98%, 100% { opacity: 0.55; } }
@keyframes ac-trace { 0%, 12% { opacity: 0.55; } 18% { opacity: 1; } 24%, 100% { opacity: 0.55; } }
@keyframes ac-alt2 { 0%, 18% { opacity: 0.55; } 24% { opacity: 1; } 30%, 36% { opacity: 0.55; } 44%, 90% { opacity: 0.2; } 98%, 100% { opacity: 0.55; } }
@keyframes ac-alt3 { 0%, 24% { opacity: 0.55; } 30% { opacity: 1; } 36% { opacity: 0.55; } 44%, 90% { opacity: 0.2; } 98%, 100% { opacity: 0.55; } }
@keyframes ac-line { 0%, 36% { stroke-dashoffset: 100; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes ac-run { 0%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes ac-on { 0%, 57% { opacity: 0; transform: scale(0.3); } 61% { opacity: 1; transform: scale(1.3); } 65%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes ac-glow { 0%, 57% { opacity: 0; transform: scale(0.4); } 62% { opacity: 1; transform: scale(1.5); } 70%, 90% { opacity: 0.6; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@keyframes dl-halo { 0% { opacity: 0.8; transform: none; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes status-ping { 0% { opacity: 0.6; transform: none; } 80%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes ac-ripple { 0%, 2% { opacity: 0; transform: none; } 3% { opacity: 0.7; transform: none; } 14%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes wk-fill { 0%, 4% { stroke-dashoffset: 100; } 82%, 94% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 100; } }
@keyframes wk-run { 0%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes wk-on1 { 0%, 4% { opacity: 0; transform: scale(0.82); } 6.5% { opacity: 1; transform: scale(1.06); } 9%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wk-on2 { 0%, 30% { opacity: 0; transform: scale(0.82); } 32.5% { opacity: 1; transform: scale(1.06); } 35%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wk-on3 { 0%, 56% { opacity: 0; transform: scale(0.82); } 58.5% { opacity: 1; transform: scale(1.06); } 61%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes wk-halo { 0%, 82% { opacity: 0; transform: none; } 83% { opacity: 0.8; transform: none; } 92%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes wk-pop { 0%, 82% { transform: none; } 85% { transform: scale(1.14); } 89%, 100% { transform: none; } }
@keyframes aw-link { 0% { stroke-dashoffset: 1; } 16%, 72% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: -1; } }
@keyframes aw-glow { 0% { stroke-dashoffset: 1; opacity: 0; } 16% { stroke-dashoffset: 0; opacity: 1; } 34%, 72% { stroke-dashoffset: 0; opacity: 0.35; } 90%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes aw-node { 0%, 14% { transform: none; } 19% { transform: scale(1.55); } 27%, 100% { transform: none; } }
@keyframes aw-ripple { 0% { opacity: 0.7; transform: none; } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes acro-lit { 0% { opacity: 0; transform: translateY(0.1em) scale(0.9); } 40% { opacity: 1; transform: translateY(-0.07em) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes acro-glow { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.1; transform: none; } }
@keyframes am-shine { to { transform: translateX(300%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .stack-card, .fx-tilt { transform: none !important; }
  .stack-dim, .fx-glare { display: none; }
}
@media print {
  .site-header, .site-footer, .scene-canvas, .hero-visual, .path-visual, .acro-mark, .stack-dim, .fx-glare { display: none !important; }
  .fx-rise, .fx-kid, .fx-ticks > li, .rw, .acronym-title .acro-name { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}
.pricing-notes { margin: 36px 0 28px; }

/* ---- 3D headline ---- */
/* The home headline as 3D letters (assets/js/scenes/headline.js). The real h1 stays in place for screen
   readers, search and selection; its letters turn transparent only while the 3D letters are drawing. */
.hero-words .hl-probe { display: inline-block; width: 0; height: 0; }
#hero-title .hero-words { transition: color 0.3s ease; }
#hero-title.hl-live .hero-words { color: transparent; }
#hero-title.hl-live .hero-words::selection, #hero-title.hl-live .hero-words ::selection { color: transparent; background: rgba(31, 75, 255, 0.2); }
@media print { #hero-title.hl-live .hero-words { color: inherit; } }
/* The still headline matches the 3D one: "isn't." in electric blue. */
#hero-title:not(.hl-live) em { color: var(--blue); }

/* ---- Workshops ---- */
/* The Weekend workshops page (src/pages/workshops.html), and the [data-workshops] blocks that
   community-data.js fills on any page (such as the home page's "Next weekend workshop"). */
[data-workshops][hidden] { display: none !important; }
:is([data-workshops], [data-community]) :is(.title, p, li, h3, h4) { overflow-wrap: anywhere; }

/* Hero */
.ws-hero h1 { max-width: 13ch; }
.ws-facts, .hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
:is(.ws-facts, .hero-facts) li { margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(251, 249, 244, 0.8); border: 1px solid var(--line); color: var(--navy); font-size: 0.95rem; font-weight: 600; }
:is(.ws-facts, .hero-facts) li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* The weekend scene (assets/js/scenes/weekend.js) draws over its still image when it runs. */
.ws-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto; }
.ws-visual > svg, .ws-visual > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-visual > canvas { opacity: 0; transition: opacity 0.8s; }
.ws-visual.is-live > canvas { opacity: 1; }
.ws-still { transition: opacity 0.6s; }
.ws-visual.is-live .ws-still { opacity: 0; }
@media (max-width: 899px) { .ws-visual { max-width: 300px; } }

/* The next workshop, and the cards for the ones after it */
.ws-next-feature { align-items: start; }
.ws-next { padding: clamp(24px, 3.4vw, 36px); box-shadow: var(--shadow); }
.ws-next .title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.ws-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 330px; margin: 2px 0 20px; }
.ws-day { display: grid; justify-items: center; gap: 5px; padding: 12px 4px 11px; border-radius: 14px; background: var(--blue); color: #fff; text-align: center; line-height: 1; }
.ws-day:nth-child(2) { background: #1438d6; }
.ws-day:nth-child(3) { background: var(--navy); }
.ws-dow { font: 650 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.ws-num { font: 600 clamp(1.5rem, 3vw, 2rem)/1 var(--serif); }
.ws-mon { font-size: 0.8rem; opacity: 0.9; }
.ws-fee { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 100%; margin: 6px 0 14px; padding: 8px 14px; border-radius: 12px; background: var(--blue-mist); border: 1px solid rgba(31, 75, 255, 0.16); }
.ws-fee-label { font: 650 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.ws-fee strong { font-size: 1.12rem; color: var(--navy); }
.ws-fee-per { color: var(--muted); font-size: 0.92rem; }
.ws-price-row { display: grid; gap: 20px; align-items: center; margin-top: 28px; }
@media (min-width: 800px) { .ws-price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.ws-price .price-row { margin-top: 10px; }
.ws-price p:last-child { margin-bottom: 0; }
.ws-price-cta .btn { margin-bottom: 14px; }
.ws-price-cta p { margin: 0; max-width: 46ch; }
.ws-price-cta p + p { margin-top: 10px; }
.ws-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ws-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ws-cta .btn { max-width: 100%; }
.ws-more { margin-top: clamp(48px, 7vw, 80px); }
.ws-more-title { font: 650 1.05rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.ws-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .ws-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-list > li { margin: 0; min-width: 0; }
.ws-suits { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: 0.95rem; color: var(--ink); }
.ws-suits strong { margin-right: 6px; font: 650 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }

/* The schedule: one row per workshop (date, topic, who it suits, Details, Reserve) */
.ws-schedule { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ws-row { display: grid; gap: 8px 28px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .ws-row { grid-template-columns: 190px minmax(0, 1fr) auto; align-items: start; } }
.ws-row-date { margin: 0.2em 0 0; font-weight: 650; color: var(--blue); }
.ws-row-title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 6px; }
.ws-row-main { min-width: 0; }
.ws-row-main .ws-suits { margin-bottom: 4px; }
.ws-row-more summary { display: inline-block; cursor: pointer; padding: 4px 0; font-weight: 600; color: var(--blue); }
.ws-row-more[open] summary { margin-bottom: 8px; }
.ws-row-more .meta { color: var(--muted); font-size: 0.95rem; }
.ws-row-more .topics { list-style: disc; }
.ws-row-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ws-row-act .ws-now { margin: 0; }
.ws-row-act .ws-closed { margin: 0; font-size: 0.92rem; }
.ws-now { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 0.88rem; font-weight: 650; }
.ws-now-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ws-closed { margin: 18px 0 0; font-weight: 600; color: var(--muted); }

/* Sections of the page */
.ws-aside { margin: 28px 0 0; max-width: 64ch; }
.ws-examples { position: relative; padding: clamp(24px, 3.4vw, 36px); border-radius: var(--radius); background: var(--paper); border: 1px dashed rgba(31, 75, 255, 0.35); }
.ws-examples-label { margin: 0 0 16px; font: 650 0.8rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.ws-topic-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.ws-topic-chips li { margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--blue-mist); border: 1px solid rgba(31, 75, 255, 0.16); color: var(--navy); font-weight: 600; }
.ws-examples-note { margin: 18px 0 0; color: var(--muted); font-size: 0.93rem; }
.ws-who { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ws-host { display: grid; gap: 32px; align-items: center; }
@media (min-width: 760px) { .ws-host { grid-template-columns: 300px 1fr; gap: 64px; } }
.ws-portrait { max-width: 300px; margin: 0; }
.ws-portrait img { width: 100%; height: auto; }
.section--navy .ws-aside { color: var(--muted-on-navy); }
.ws-step { font: 600 clamp(2rem, 4vw, 2.8rem)/1 var(--serif); color: var(--blue); margin-bottom: 16px; }
.ws-shape-layout { display: grid; gap: 20px; }
@media (min-width: 900px) { .ws-shape-layout { grid-template-columns: minmax(280px, 0.85fr) 1.6fr; } }
.ws-ring-card { display: grid; place-items: center; background: rgba(245, 241, 232, 0.04); border-color: var(--line-on-navy); color: var(--cream); overflow: hidden; }
.ws-ring, .ws-ring-text { grid-area: 1 / 1; }
.ws-ring { width: min(100%, 300px); height: auto; }
.ws-ring-text { text-align: center; }
.ws-ring-card .price { margin: 0; color: #fff; font-size: clamp(3.4rem, 7vw, 4.6rem); }
.ws-ring-card .per { margin: 8px 0 0; color: var(--muted-on-navy); }
.ws-seg { stroke: var(--blue-2); }
.ws-shape { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ws-shape > li { margin: 0; }
.ws-shape .card { display: grid; gap: 0 24px; align-content: start; }
.ws-dow-label { margin: 0 0 12px; font: 650 0.8rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-on-navy); }
.ws-shape h3 { margin-bottom: 0.3em; }
@media (min-width: 900px) {
  .ws-shape .card { grid-template-columns: 110px 1fr; }
  .ws-shape .ws-dow-label { grid-row: span 2; margin: 0.45em 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Workshops filled in from the sheet arrive softly; the hour ring lights up one hour at a time. */
  .ws-in { animation: ws-in 0.7s cubic-bezier(.2, .7, .2, 1) calc(var(--ws-i, 0) * 90ms) both; }
  .ws-filled { animation: ws-fade 0.5s ease backwards; }
  .ws-seg { transition: stroke-opacity 0.35s ease; }
  .ws-seg:nth-child(1) { transition-delay: 0.3s; } .ws-seg:nth-child(2) { transition-delay: 0.38s; } .ws-seg:nth-child(3) { transition-delay: 0.46s; } .ws-seg:nth-child(4) { transition-delay: 0.54s; }
  .ws-seg:nth-child(5) { transition-delay: 0.62s; } .ws-seg:nth-child(6) { transition-delay: 0.7s; } .ws-seg:nth-child(7) { transition-delay: 0.78s; } .ws-seg:nth-child(8) { transition-delay: 0.86s; }
  .ws-seg:nth-child(9) { transition-delay: 0.94s; } .ws-seg:nth-child(10) { transition-delay: 1.02s; } .ws-seg:nth-child(11) { transition-delay: 1.1s; } .ws-seg:nth-child(12) { transition-delay: 1.18s; }
  .ws-seg:nth-child(13) { transition-delay: 1.26s; } .ws-seg:nth-child(14) { transition-delay: 1.34s; } .ws-seg:nth-child(15) { transition-delay: 1.42s; } .ws-seg:nth-child(16) { transition-delay: 1.5s; }
}
@media (prefers-reduced-motion: no-preference) and (max-height: 1500px) { .fx-stage:not(.is-in) .ws-seg { stroke-opacity: 0; } }
@keyframes ws-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@media print { .ws-visual { display: none; } .ws-in, .ws-filled { animation: none; } }

/* ---- Contact as a button at the end of the menu ---- */
.nav-link.nav-cta { margin-left: 10px; padding-inline: 18px; background: var(--navy); color: var(--cream); font-weight: 600; }
.nav-link.nav-cta:hover, .nav-link.nav-cta[aria-current="page"] { background: var(--blue); color: #fff; }
@media (max-width: 899px) {
  .nav-link.nav-cta { margin: 12px 0 0; text-align: center; }
}

/* ---- A tighter menu on narrow desktops, so all seven items fit on one line ---- */
@media (min-width: 900px) and (max-width: 1099px) {
  .nav-link { padding: 8px 10px; font-size: 0.94rem; }
  .nav-link.nav-cta { margin-left: 6px; padding-inline: 14px; }
}