/* ==========================================================================
   BUILD YOUR FIRST AI PRODUCT
   Palette is exactly three colours: paper, ink, flame.
   Everything else is one of those three at a different alpha.
   1. Reset  2. Tokens  3. Base  4. Layout  5. Components
   6. Hero field  7. Responsive  8. Reduced motion
   ========================================================================== */

/* ===== 1. Reset ========================================================== */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }
ol, ul, menu { list-style: none }
a { color: inherit; text-decoration: none }
b, strong { font-weight: 600 }
img, svg, video, canvas { display: block; max-width: 100%; height: auto }
summary { display: list-item; cursor: pointer }
summary::-webkit-details-marker { display: none }
::selection { background: var(--ink); color: var(--paper) }

/* ===== 2. Tokens ========================================================= */

:root {
  /* --- Three colours. That is the whole palette. ------------------------ */
  --paper: #f5f0e8;
  --ink:   #0747cf;
  --flame: #ff5b2e;   /* graphic only — never carries text */

  /* Tonal steps, all derived from the three above. Each text pairing
     below is checked against WCAG AA (4.5:1). */
  --surface:    #d4d8e5;                    /* ink @14% over paper — the calm
                                               reading ground; ink on it 5.25:1 */
  --ink-soft:   rgba(7, 71, 207, .92);      /* on paper 5.7:1 · on surface 4.8:1 */
  --ink-dark:   #053aa8;                    /* ink, ~18% darker — the button's
                                               hover fill; paper on it 8.4:1  */
  --ink-light:  #3265d4;                    /* the lightest blue that still
                                               clears AA on paper — 4.69:1  */
  --rule:       rgba(7, 71, 207, .20);
  --rule-mid:   rgba(7, 71, 207, .34);

  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-sans-ja: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                  "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(3rem, 8.6vw, 7rem);
  --t-h2:      clamp(2.5rem, 5.4vw, 4.75rem);   /* full-bleed headings   */
  --t-h2-col:  clamp(2rem, 4vw, 3.25rem);       /* headings inside .split:
                    the column is ~483px, and 76px CJK overflowed it        */
  --t-h3:      clamp(1.5rem, 2.9vw, 2.375rem);
  --t-h4:      clamp(1.625rem, 2.3vw, 2.125rem);
  --t-h5:      1.375rem;
  --t-lead:    1.125rem;
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-xs:      .75rem;

  /* --- Space ------------------------------------------------------------- */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;  --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4rem;  --s-8: 6rem;
  --s-9: 7.5rem;

  /* --- Form & motion ------------------------------------------------------ */
  /* Leading ramps DOWN as size goes up, the way Apple's Dynamic Type does
     (Large Title 34/41 = 1.21 … Footnote 13/18 = 1.38). Values sit above
     Apple's Latin ratios because CJK glyphs fill the em box. */
  --lh-display: .92;   /* all-caps latin display */
  --lh-h2:     1.18;   /* 40–76px CJK headings */
  --lh-h3:     1.35;   /* 22–38px CJK headings */
  --lh-lead:   1.70;   /* 18px */
  --lh-body:   1.60;   /* 16px */
  --lh-sm:     1.78;   /* 14px — looser than body, per Apple's ramp */

  --r-sm: .75rem; --r-md: 1.25rem; --r-lg: 1.75rem; --r-pill: 999px;
  --shell: 1160px;
  --nav-h: 4.5rem;
  --bar-h: 4.25rem;
  --ease: cubic-bezier(.22, .8, .28, 1);
  --dur: .25s;
}

html[lang="ja"] { --font-sans: var(--font-sans-ja) }

/* ===== 3. Base =========================================================== */

body {
  padding-bottom: var(--bar-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em }

:where(a, summary, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ===== 4. Layout ========================================================= */

.shell { width: min(var(--shell), 100% - var(--s-6)); margin-inline: auto }
/* 12px side margins were below Apple's 16pt minimum — real gutters now. */

.section { padding-block: var(--s-9) }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-3)) }

.split { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-7) var(--s-8) }

.label { font-size: var(--t-xs); margin-bottom: var(--s-5); text-transform: uppercase }
.lead  { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 34em }
.lead p + p { margin-top: var(--s-3) }
.note  { margin-top: var(--s-4); font-size: var(--t-sm); line-height: var(--lh-sm);
         color: var(--ink-soft) }

h1, h2, h3, h4 { text-wrap: balance }
.section h3, .final h3 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: -.035em;
}

.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.sectionHead > p { line-height: var(--lh-body); color: var(--ink-soft) }

/* A heading sharing a row with body copy gets the column size, not the
   full-bleed one — otherwise it wraps mid-phrase against its own <br>. */
.split > h3, .split > div > h3 { font-size: var(--t-h2-col) }

/* The alternating reading ground. Same blue, just far lighter — full-strength
   ink behind body copy was too loud to read against. */
.tint { background: var(--surface) }
.tint .label { color: var(--ink-soft) }
.tint .lead  { color: var(--ink-soft) }

/* ===== 5. Components ===================================================== */

/* --- Nav ----------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 232, .80);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  font-weight: 500;
}
.nav > div { display: flex; align-items: center; gap: var(--s-5); font-size: var(--t-sm) }
.nav > div > a:not(.smallCta) { position: relative; padding-block: var(--s-1) }
.nav > div > a:not(.smallCta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav > div > a:not(.smallCta):hover::after { transform: scaleX(1) }

.smallCta {
  border: 1px solid var(--rule-mid);
  border-radius: var(--r-pill);
  padding: .5rem 1rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.smallCta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }

/* Language switch — reads like the nav links beside it. Both languages are
   always shown; the current one is the dark blue, the other the light. State
   is carried by weight as well as colour, so it does not rely on hue alone. */
.lang {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--t-sm);
}
.lang a { color: var(--ink-light); font-weight: 400;
          transition: color var(--dur) var(--ease) }
.lang a:hover { color: var(--ink) }
.lang a.is-on { color: var(--ink); font-weight: 600; cursor: default }
.lang .sep { color: var(--rule-mid) }

/* --- Brand mark ----------------------------------------------------------- */
.brand { display: inline-flex; align-items: baseline; gap: .4375rem; color: var(--ink) }
.brandWord {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.brandLab { font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-light) }
.brandTag { font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-soft) }
.brandTag b { font-weight: 700; color: var(--ink) }   /* AOI = Act On Ideas */

/* --- Buttons -------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  letter-spacing: .01em;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Hover deepens the whole fill rather than fading it — a fade on a coloured
   button reads as "disabled", a darker fill reads as "pressable". */
.button:hover  { background: var(--ink-dark) }
.button:active { transform: scale(.985) }

.under {
  border-bottom: 1px solid var(--rule-mid);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.under:hover { opacity: .7 }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* The old min-height never bound: content + 96px of padding always exceeded
     it, so the hero grew with its content and the last line fell below the
     fold on short windows. Cap the box, and lift the block off true centre by
     using a taller bottom pad — the sticky nav already eats the top 72px. */
  min-height: calc(100svh - var(--nav-h));
  /* The extra bottom pad equals the nav height, which cancels the 72px the
     sticky bar takes off the top — so the block lands on the viewport's
     centre, not the hero's. On short windows the box grows with content
     instead, keeping the last line above the fold. */
  padding-block: var(--s-4) calc(var(--s-4) + var(--nav-h));
  overflow: hidden;
}
/* Paper veil so the headline never sits on raw colour. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(245, 240, 232, .82) 4%,
    rgba(245, 240, 232, .46) 46%,
    rgba(245, 240, 232, .16) 82%);
}
.hero h1 {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: -.05em;
}
.hero h2 {
  margin: var(--s-5) 0 var(--s-4);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: -.015em;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-1) }
.chips span {
  border: 1px solid var(--rule-mid);
  border-radius: var(--r-pill);
  padding: .4375rem .875rem;
  font-size: var(--t-sm);
}

.actions { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6) }

/* --- Three lists, one rhythm ---------------------------------------------- */
.outcomes li, .prep li, .fit li {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-3);
}
.outcomes li:last-child, .prep li:last-child, .fit li:last-child {
  border-bottom: 1px solid var(--rule);
}

.outcomes li { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-2);
               font-size: var(--t-lead); line-height: var(--lh-lead) }
.prep li     { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-2) }
.prep p      { margin-top: .4375rem; line-height: var(--lh-body); color: var(--ink-soft) }

.fit li { position: relative; padding-left: var(--s-4); font-size: var(--t-lead) }
.fit li::before { content: "•"; position: absolute; left: 2px; color: var(--ink-soft) }

.outcomes span, .prep span { font-family: var(--font-mono); color: var(--ink-soft) }

/* --- Schedule -------------------------------------------------------------- */
.schedule { border-top: 1px solid var(--rule) }
.schedule article {
  display: grid;
  grid-template-columns: 3.25rem 11rem 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.schedule .num, .schedule time { font-family: var(--font-mono); color: var(--ink-soft) }
.schedule time { font-size: var(--t-body) }
.schedule h4 { font-size: var(--t-h5); line-height: var(--lh-h3); font-weight: 600;
               letter-spacing: -.015em }
.schedule article p { margin-top: var(--s-1); line-height: var(--lh-body); max-width: 34em;
                      color: var(--ink-soft) }

/* --- Guides ---------------------------------------------------------------- */
.guides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-7) }
.guides article {
  display: grid;
  grid-template-columns: 4.375rem 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
.guides article:hover { border-color: var(--rule-mid) }
.portrait {
  width: 4.125rem; height: 4.125rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
}
.portrait img { width: 100%; height: 100%; object-fit: cover }
.guides h4 { font-size: var(--t-h4); line-height: var(--lh-h3); font-weight: 600;
             letter-spacing: -.025em }
.guides p  { margin-top: var(--s-2); line-height: var(--lh-body); color: var(--ink-soft) }
.accent    { display: block; margin-top: var(--s-1); line-height: var(--lh-h3); font-weight: 600 }

/* --- FAQ ------------------------------------------------------------------- */
.faq h3 { margin-bottom: var(--s-6) }
.faq details { border-top: 1px solid var(--rule); padding-block: var(--s-3) }
.faq details:last-child { border-bottom: 1px solid var(--rule) }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -.01em;
}
.faq summary::after {
  content: "";
  flex: none;
  width: .8125rem; height: .8125rem;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  /* The question text holds still — the icon carries the whole affordance. */
  opacity: .65;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq summary:hover::after { opacity: 1 }
.faq details[open] summary::after { transform: rotate(135deg); opacity: 1 }
.faq details p {
  max-width: 46rem;
  margin-top: var(--s-2);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.faq details p + p { margin-top: var(--s-3) }   /* multi-paragraph answers */

/* --- Final ----------------------------------------------------------------- */
.final {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 40rem;
  text-align: center;
  overflow: hidden;
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 60% at 50% 46%,
    rgba(245, 240, 232, .78), rgba(245, 240, 232, .30) 68%, rgba(245, 240, 232, 0) 88%);
}
.final .shell { position: relative; z-index: 1 }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  max-width: 48rem;
  margin: var(--s-6) auto var(--s-5);
}
.facts p { font-weight: 600 }
.facts p + p { border-left: 1px solid var(--rule) }
.facts span {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* --- Colophon: whose lab this is, and who backs it ------------------------ */
.colophon { border-top: 1px solid var(--rule); padding-block: var(--s-5) }
.colophon .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.colophonBrand { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap }
/* Two credits, label and logo on a shared axis so they read as one block. */
.colophonPartners {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.colophonPartners .label { margin: 0 }
.colophonPartners img { height: auto; opacity: .9; justify-self: start }
.logoMedifit { width: 6.5rem }
.logoHelloboss { width: 8.75rem }   /* taller lockup: needs more width than medifit to stay legible */

/* --- Fixed price bar ------------------------------------------------------
   Always in reach; body carries a matching padding-bottom so it never
   covers the last line of the page. */
.pricebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  min-height: var(--bar-h);
  background: rgba(245, 240, 232, .86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--rule);
}
.pricebar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--bar-h);
}
.pricebarInfo { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap }
.pricebarInfo b { font-size: var(--t-body); font-weight: 600 }
.pricebarInfo span { font-size: var(--t-sm); color: var(--ink-soft) }
.button.compact { min-height: 2.75rem; padding-inline: var(--s-4); font-size: var(--t-sm) }

/* ===== 6. Colour field =================================================== */

/* One system for every background: a set of blurred blocks that are always
   drifting on their own clocks. The wrapper takes the pointer reaction
   (app.js), the inner circle keeps the drift — two transforms, no conflict. */

.field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none }
.field .blob { position: absolute; will-change: transform }
.field .blob i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Page-wide, fixed behind the light sections. */
.bgflow { position: fixed }
.bgflow .blob i { filter: blur(90px) }
.bgflow .g1 { width: 52vw; height: 52vw; top: -14vw; left: -16vw }
.bgflow .g2 { width: 46vw; height: 46vw; top: 38vh;  right: -14vw }
.bgflow .g3 { width: 38vw; height: 38vw; bottom: -12vw; left: 26vw }
.bgflow .g4 { width: 30vw; height: 30vw; top: 62vh; left: -6vw }
.bgflow .g1 i { background: var(--flame); opacity: .16; animation: drift1 64s ease-in-out infinite alternate }
.bgflow .g2 i { background: var(--ink);   opacity: .13; animation: drift4 78s ease-in-out infinite alternate }
.bgflow .g3 i { background: var(--flame); opacity: .10; animation: drift3 92s ease-in-out infinite alternate }
.bgflow .g4 i { background: var(--ink);   opacity: .09; animation: drift6 71s ease-in-out infinite alternate }

/* Hero — the same gradient as before, now split into five moving parts. */
.hero .blob i { filter: blur(60px) }
.hero .h1 { width: 27.5rem;  height: 27.5rem;  top: 3%;   right: 3% }
.hero .h2 { width: 28.75rem; height: 28.75rem; bottom: -23%; right: 18% }
.hero .h3 { width: 21.25rem; height: 21.25rem; top: 38%;  left: -14% }
.hero .h4 { width: 16rem;    height: 16rem;    top: 58%;  right: 30% }
.hero .h5 { width: 18rem;    height: 18rem;    top: -12%; left: 20% }
.hero .h1 i { background: var(--flame); opacity: .58; animation: drift2 31s ease-in-out infinite alternate }
.hero .h2 i { background: var(--ink);   opacity: .42; animation: drift1 41s ease-in-out infinite alternate }
.hero .h3 i { background: var(--flame); opacity: .26; animation: drift5 37s ease-in-out infinite alternate }
.hero .h4 i { background: var(--flame); opacity: .20; animation: drift3 47s ease-in-out infinite alternate }
.hero .h5 i { background: var(--ink);   opacity: .18; animation: drift6 59s ease-in-out infinite alternate }

/* Closing section. */
.final .blob i { filter: blur(70px) }
.final .b1 { width: 30rem; height: 30rem; top: -18%; left: -6% }
.final .b2 { width: 26rem; height: 26rem; bottom: -22%; right: 4% }
.final .b3 { width: 22rem; height: 22rem; top: 26%; right: -8% }
.final .b4 { width: 24rem; height: 24rem; bottom: -10%; left: 18% }
.final .b5 { width: 18rem; height: 18rem; top: 6%; left: 44% }
.final .b6 { width: 20rem; height: 20rem; top: 40%; left: 8% }
.final .b1 i { background: var(--flame); opacity: .42; animation: drift1 29s ease-in-out infinite alternate }
.final .b2 i { background: var(--ink);   opacity: .30; animation: drift2 37s ease-in-out infinite alternate }
.final .b3 i { background: var(--flame); opacity: .30; animation: drift3 43s ease-in-out infinite alternate }
.final .b4 i { background: var(--ink);   opacity: .24; animation: drift4 53s ease-in-out infinite alternate }
.final .b5 i { background: var(--flame); opacity: .22; animation: drift5 61s ease-in-out infinite alternate }
.final .b6 i { background: var(--ink);   opacity: .20; animation: drift6 71s ease-in-out infinite alternate }

@keyframes drift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1) }
  50%  { transform: translate3d(26%, 18%, 0) scale(1.16) }
  100% { transform: translate3d(48%, -8%, 0) scale(.92) }
}
@keyframes drift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1) }
  50%  { transform: translate3d(-32%, -14%, 0) scale(1.2) }
  100% { transform: translate3d(-14%, 12%, 0) scale(.9) }
}
@keyframes drift3 {
  0%   { transform: translate3d(0, 0, 0) scale(.95) }
  50%  { transform: translate3d(-28%, 26%, 0) scale(1.22) }
  100% { transform: translate3d(-46%, 4%, 0) scale(1.02) }
}
@keyframes drift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1.04) }
  50%  { transform: translate3d(22%, -22%, 0) scale(.88) }
  100% { transform: translate3d(-18%, -6%, 0) scale(1.18) }
}
@keyframes drift5 {
  0%   { transform: translate3d(0, 0, 0) scale(1) }
  50%  { transform: translate3d(-24%, 34%, 0) scale(1.26) }
  100% { transform: translate3d(18%, 16%, 0) scale(.94) }
}
@keyframes drift6 {
  0%   { transform: translate3d(0, 0, 0) scale(.98) }
  50%  { transform: translate3d(34%, -18%, 0) scale(1.14) }
  100% { transform: translate3d(10%, -34%, 0) scale(1.06) }
}

/* --- Pointer dot ----------------------------------------------------------
   A single element. The core and the halo are stops on ONE gradient, so
   there is no seam where a solid dot meets a soft glow. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 3.25rem; height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(7, 71, 207, .95)  0%,
    rgba(7, 71, 207, .88)  6%,
    rgba(7, 71, 207, .62) 13%,
    rgba(7, 71, 207, .34) 23%,
    rgba(7, 71, 207, .18) 36%,
    rgba(7, 71, 207, .09) 52%,
    rgba(7, 71, 207, .04) 70%,
    rgba(7, 71, 207, 0)  100%);
  transition: opacity .3s var(--ease), width .3s var(--ease),
              height .3s var(--ease), margin .3s var(--ease),
              background .3s var(--ease);
  will-change: transform;
}
.has-dot .cursor { opacity: 1 }
.has-dot, .has-dot * { cursor: none !important }

/* Over a link or button it opens up and inverts, so it stays readable on the
   ink-filled CTA. */
.cursor.is-live {
  width: 5rem; height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  background: radial-gradient(circle closest-side,
    rgba(245, 240, 232, .95)  0%,
    rgba(245, 240, 232, .80)  8%,
    rgba(245, 240, 232, .46) 20%,
    rgba(245, 240, 232, .22) 36%,
    rgba(245, 240, 232, .10) 56%,
    rgba(245, 240, 232, 0)  100%);
}

/* ===== 7. Responsive ===================================================== */

@media (width <= 900px) {
  .split  { grid-template-columns: 1fr; gap: var(--s-6) }
  .guides { grid-template-columns: 1fr }
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none }
}

@media (width <= 760px) {
  :root { --s-9: 4.75rem }
  .nav > div { gap: var(--s-2) }
  .shell { width: calc(100% - 2.5rem) }

  .nav > div > a:not(.smallCta) { display: none }

  .hero h1 { font-size: clamp(3.25rem, 15vw, 5rem) }
  .hero .h1 { width: 18.75rem; height: 18.75rem; right: -35% }
  .hero .h2 { width: 21.25rem; height: 21.25rem; right: -25% }
  .hero .h3 { width: 16.25rem; height: 16.25rem; left: -30% }
  .hero .h4 { width: 12rem;    height: 12rem;    right: 10% }
  .hero .h5 { width: 13rem;    height: 13rem;    left: -10% }

  .actions { flex-direction: column; align-items: flex-start; gap: var(--s-2) }
  .actions .button { width: 100% }

  .sectionHead { flex-direction: column; align-items: flex-start }
  .sectionHead > p { text-align: left }

  .schedule article { grid-template-columns: 2.375rem 1fr; gap: var(--s-2) }
  .schedule time, .schedule article > div { grid-column: 2 }
  .schedule .num { grid-row: 1 / span 2 }

  .guides article { grid-template-columns: 3.375rem 1fr; gap: var(--s-3); padding: var(--s-4) }
  .portrait { width: 3.25rem; height: 3.25rem }

  .pricebarInfo span { display: none }
  .pricebarInfo b { font-size: var(--t-sm) }
  .colophon .shell { flex-direction: column; align-items: flex-start; gap: var(--s-4) }

  .facts { grid-template-columns: 1fr 1fr; gap: var(--s-4) 0 }
  .facts p + p { border-left: 0 }
  .facts p:nth-child(even) { border-left: 1px solid var(--rule) }

  .bgflow .blob i { filter: blur(60px) }
  .bgflow .g1, .bgflow .g2, .bgflow .g3 { width: 80vw; height: 80vw }

}

/* ===== 8. Reduced motion ================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .field .blob i { animation: none !important }
  .cursor { display: none }
  *, *::before, *::after { transition-duration: .01ms !important }
}