/* ==========================================================================
   CLASSIC: the homepage in the ChasTech classic look (component/classic-home.njk, js/classic.js)
   Quiet editorial: a cream page, ink type, hairlines and whitespace, and one guided dot that runs the
   length of the page. The accent is Sage's purple gradient; sun yellow is kept for small sparks (the
   words lit on the dark field, the chapter numbers, the YES stamps, a marker under "fast.").
   Loaded after style.css when the page sets classic (head.njk), with html[data-theme="classic"].
   ========================================================================== */

html[data-theme="classic"] {
  color-scheme: light;
  --bg: #eee9e2;
  --bg-raised: #e5dfd6;
  --ink: #14111b;
  --ink-2: #4b4852;
  --muted: #8b867f;
  --line: rgba(20, 17, 27, 0.14);
  /* Sage's purples (the leaf in favicon.svg), as one gradient; --accent is its middle for flat uses */
  --accent: #6a3cff;
  --accent-1: #5546ff;
  --accent-2: #a32bff;
  --accent-gradient: linear-gradient(135deg, #5546ff 0%, #a32bff 100%);
  --accent-soft: #6a3cff;
  /* Purple as it reads on the dark field */
  --accent-on-ink: #b48cff;
  /* Sun yellow, for sparks */
  --sun: #fec820;
  --on-sun: #14111b;
  --on-accent: #fff;
  --on-ink: #eee9e2;
  --danger: #c8321e;
  /* The ink of the dark field (bridge, cuts' bar) */
  --night: #14111b;
}

html[data-theme="classic"] body {
  background-color: var(--bg);
  color: var(--ink);
}

html[data-theme="classic"] ::selection {
  background: var(--sun);
  color: var(--on-sun);
}

/* Sections the header links to stop just under it */
html[data-theme="classic"] main > section {
  scroll-margin-top: calc(var(--header-h) - 20px);
}

/* ==========================================================================
   BUTTONS: ink pills; on hover the purple is a circle that grows out of where the pointer came in and
   shrinks back towards where it left (--x / --y, classic.js 2)
   ========================================================================== */
/* (the header's button is already fixed in place, style.css) */
html[data-theme="classic"] .btn-primary,
html[data-theme="classic"] .header-cta {
  overflow: hidden;
  isolation: isolate;
}

html[data-theme="classic"] .btn-primary { position: relative; }

html[data-theme="classic"] .btn-primary:hover,
html[data-theme="classic"] .header-cta:hover {
  background: var(--ink);
  color: #fff;
}

html[data-theme="classic"] .btn-primary::before,
html[data-theme="classic"] .header-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill, var(--accent-gradient));
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

html[data-theme="classic"] .btn-primary:not(:disabled):hover::before,
html[data-theme="classic"] .header-cta:hover::before {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.2s cubic-bezier(0.45, 0, 0.25, 1);
}

html[data-theme="classic"] .header-cta[aria-expanded="true"] {
  background: transparent;
  color: var(--ink);
}

html[data-theme="classic"] .header-cta[aria-expanded="true"]::before { display: none; }

html[data-theme="classic"] .btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ==========================================================================
   HEADER: the cream bar fades in once the brand docks. Over the dark field of the bridge
   (html.header-on-ink, classic.js 5) the bar, brand, phrase, links and button turn to ink
   ========================================================================== */
html[data-theme="classic"] .nav-link:hover { color: var(--accent); }
html[data-theme="classic"] .nav-link.nav-signin:hover { border-color: var(--ink); color: var(--ink); }

html[data-theme="classic"] :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  transition-property: transform, opacity, color, background-color, border-color;
  transition-duration: 0.48s, 0.35s, 0.4s, 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1), ease, ease, ease, ease;
}

html[data-theme="classic"] .dynamic-brand.no-transition { transition: none; }

html[data-theme="classic"].header-on-ink:not(.drawer-open) :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  color-scheme: dark;
  --bg: #14111b;
  --ink: #eee9e2;
  --ink-2: #b9b4c4;
  --line: rgba(238, 233, 226, 0.18);
  --btn-fill: var(--accent-gradient);
}

html[data-theme="classic"].header-on-ink:not(.drawer-open) :is(.dynamic-brand, .brand-phrase, .header-nav) {
  color: var(--ink);
}

/* ==========================================================================
   WORDMARK: SAGE.IS spans the hero's width, up to 40% of the screen's height (classic.js 1 sets
   --wm-size; the header's brand is the same word, so it takes the same size)
   ========================================================================== */
html[data-theme="classic"] .wordmark {
  font-size: var(--wm-size, clamp(5rem, min(calc((min(100vw, var(--container-max, 1440px)) - 2 * var(--gutter)) / 2.6), 40vh), 26rem));
}

html[data-theme="classic"] .hero-wordmark-wrap {
  margin: 0;
}

/* The dot under the cursor (classic.js 3): while the pointer is over the big wordmark, each of SAGE's
   letters is filled ink with a purple dot at the pointer (--cx, --cy in the letter's own box; --cr its
   radius), so the dot only ever shows inside the letters */
html[data-theme="classic"] .dynamic-brand.has-cursor .tinker-word .ltr > span {
  background: radial-gradient(circle var(--cr, 0px) at var(--cx, -100px) var(--cy, -100px), #a32bff 0%, #5546ff 98%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   HERO: labels, the wordmark, then the title with the lede and actions beside it
   ========================================================================== */
.cl-hero {
  padding: calc(var(--header-h) + clamp(8px, 1.5vw, 24px)) 0 clamp(48px, 7vw, 96px);
}

.cl-hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(10px, 1.4vw, 20px);
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  color: var(--muted);
}

.cl-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
  padding-top: clamp(32px, 4.5vw, 64px);
}

.cl-hero-title {
  /* above the bar that leaves it (.cl-hi-bar), so the bar slides out from under its words */
  position: relative;
  z-index: 6;
  grid-column: 1 / span 3;
  max-width: 15em;
  font-size: clamp(2rem, 4.4vw, 5.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  word-spacing: -0.04em;
  text-wrap: balance;
}

.cl-hero-aside {
  grid-column: 4;
  align-self: end;
}

.cl-hero-lede {
  max-width: 40ch;
  font-size: clamp(0.9375rem, 1vw, 1.1875rem);
  color: var(--ink-2);
}

.cl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}

.cl-hero-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.cl-hero-next svg { transition: transform 0.4s var(--ease); }
.cl-hero-next:hover svg { transform: translateY(4px); }

/* Along the bottom of the hero: what we make, on a hairline, and where to find it */
.cl-hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  color: var(--muted);
}

.cl-offers { max-width: 80ch; }

.cl-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-weight: 500;
  color: var(--ink);
}

.cl-hero-links a {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.4s var(--ease), color 0.2s ease;
}

.cl-hero-links a:hover {
  color: var(--accent);
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* Entrance (html.hero-ready, classic.js 1): the title comes into focus word by word, then the labels,
   lede and actions fade up */
.js .cl-hero-title .w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.2em);
}

.hero-ready .cl-hero-title .w {
  opacity: 1;
  filter: none;
  transform: none;
  transition: opacity 0.9s ease, filter 0.9s ease, transform 1s var(--ease);
  transition-delay: calc(0.45s + var(--wi) * 0.05s);
}

.js .cl-hero-meta,
.js .cl-hero-aside,
.js .cl-hero-foot {
  opacity: 0;
  transform: translateY(12px);
}

.hero-ready .cl-hero-meta,
.hero-ready .cl-hero-aside,
.hero-ready .cl-hero-foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.9s, transform 1s var(--ease) 0.9s;
}

.hero-ready .cl-hero-meta { transition-delay: 0.6s; }
.hero-ready .cl-hero-foot { transition-delay: 1.1s; }

/* The highlighted phrase: white type on a purple box, one box per line when it wraps. The box sweeps
   in from the left once the words have arrived. An inline box is as tall as its font's full line, so
   the box is set at 0.8 of the title's size and the words inside are scaled back up to full size */
.cl-hi {
  font-size: 0.8em;
  padding: 0 0.0625em;
  margin: 0 -0.025em;
  border-radius: 0.075em;
  color: #fff;
  background: var(--accent-gradient) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cl-hi > span { font-size: 1.25em; }

.js .cl-hi { background-size: 0% 100%; }

.hero-ready .cl-hi {
  background-size: 100% 100%;
  transition: background-size 0.9s var(--ease) 1s;
}

/* Once scrolling starts the colour leaves as the bar (classic.js 4) and the words settle from white
   into the page's ink (--hi-k, 0 to 1) */
.hero-hi-off .cl-hi {
  background: none;
  color: color-mix(in srgb, var(--ink) calc(var(--hi-k, 1) * 100%), #fff);
}

.cl-hi-bar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100px;
  height: 100px;
  background: var(--accent-gradient);
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 1100px) {
  .cl-hero-title { grid-column: 1 / span 2; }
  .cl-hero-aside { grid-column: 3 / -1; }
}

@media (max-width: 760px) {
  .cl-hero { padding-top: calc(var(--header-h) + 40px); }
  .cl-hero-meta { flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .cl-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .cl-hero-title, .cl-hero-aside { grid-column: 1; }
}

/* ==========================================================================
   BRIDGE (hero → the rest): the dot pins in the middle of the screen and grows into a dark field,
   turning from purple to ink; then the sentence on it lights up word by word. classic.js (5) sets
   --r (the dot's radius), --k (0 purple → 1 ink) and .is-on on each word.
   ========================================================================== */
.cl-bridge {
  position: relative;
  /* above the path's line, so the growing field covers it */
  z-index: 4;
  height: 320vh;
  height: 320svh;
}

.cl-bridge-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.cl-bridge-field {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  background: var(--accent-gradient);
  clip-path: circle(var(--r, 5px) at 50% 50%);
}

/* The ink comes over the purple as the field grows */
.cl-bridge-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 60%, rgba(106, 60, 255, 0.16), transparent 70%),
    var(--night);
  opacity: var(--k, 0);
}

.cl-bridge-text {
  position: relative;
  max-width: 19em;
  font-size: clamp(1.75rem, 4.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  word-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  color: var(--bg);
}

@media (max-width: 760px) {
  .cl-bridge-text { font-size: clamp(2rem, 9.4vw, 2.75rem); }
}

.cl-sun { color: var(--sun); }

.js .cl-bridge-text .w {
  opacity: 0.14;
  transition: opacity 0.35s ease;
}

.js .cl-bridge-text .w.is-on { opacity: 1; }

/* Without JS, or with reduced motion: a plain dark band with the sentence */
html:not(.js) .cl-bridge,
.cl-bridge.is-flat {
  height: auto;
  margin-top: clamp(40px, 6vw, 80px);
}

html:not(.js) .cl-bridge-pin,
.cl-bridge.is-flat .cl-bridge-pin {
  position: static;
  height: auto;
}

html:not(.js) .cl-bridge-field,
.cl-bridge.is-flat .cl-bridge-field {
  position: static;
  padding-block: clamp(96px, 14vw, 200px);
  clip-path: none;
}

html:not(.js) .cl-bridge-field::before,
.cl-bridge.is-flat .cl-bridge-field::before { opacity: 1; }

.cl-bridge.is-flat .cl-bridge-text .w { opacity: 1; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.cl-section {
  padding: clamp(80px, 11vw, 160px) 0 0;
}

.cl-section-last {
  padding-bottom: clamp(80px, 11vw, 160px);
}

.cl-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--gutter);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 96px);
}

/* Split heading: title on the left, lede on the right lined up with the title's last line */
.cl-head-split {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.cl-title {
  font-size: clamp(2rem, 4.6vw, 5.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.cl-lede {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
  color: var(--ink-2);
}

.cl-head-split .cl-lede { justify-self: end; }

/* Small label above a heading, e.g. "(01) Grow your ideas" */
.cl-label {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  color: var(--muted);
}

.cl-eyebrow {
  display: block;
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  color: var(--muted);
}

/* A sun-yellow marker swept under a word */
.cl-mark {
  padding: 0 0.12em;
  margin: 0 -0.06em;
  color: var(--ink);
  background: linear-gradient(transparent 55%, var(--sun) 55%, var(--sun) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}

.js .reveal .cl-mark { background-size: 0% 100%; }
.js .reveal.is-in .cl-mark { background-size: 100% 100%; transition: background-size 0.8s var(--ease) 0.5s; }

@media (max-width: 760px) {
  .cl-head, .cl-head-split { grid-template-columns: 1fr; }
  .cl-head-split .cl-lede { justify-self: start; }
}

/* ---------- Grow your ideas: three pillars on hairlines ---------- */
.cl-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px var(--gutter);
  list-style: none;
}

.cl-pillars li {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.cl-pillar-n {
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cl-pillars h3 {
  margin: clamp(32px, 4vw, 64px) 0 12px;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.cl-pillars p {
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.cl-pillars small {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  background: var(--bg-raised);
  font-size: 0.8125rem;
  font-weight: 500;
}

.cl-pillars small::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gradient);
}

@media (max-width: 900px) {
  .cl-pillars { grid-template-columns: 1fr; gap: 40px; }
  .cl-pillars h3 { margin-top: 24px; }
}

/* ---------- The founders' note ---------- */
.cl-letter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px clamp(32px, 5vw, 96px);
  margin-top: clamp(80px, 10vw, 140px);
}

.cl-letter > div {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.cl-letter h3 {
  margin: 20px 0 20px;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.cl-letter p {
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.cl-letter p + p { margin-top: 14px; }
.cl-letter strong { font-weight: 500; color: var(--ink); }
.cl-letter a u { text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.cl-letter a:hover { color: var(--accent); }
.cl-sign { padding-top: 14px; }

@media (max-width: 860px) {
  .cl-letter { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE PROBLEM & THE SOLUTION, full screen ("Cuts", classic.js 6): a sticky frame plays one chapter
   per stretch of scroll. 00 the AI tool pile, 01 a Sage workspace on a laptop, 02 your data, models
   and rules, 03 the purple field and what came in.
   ========================================================================== */
.sol { position: relative; height: calc(280vh + 100vh); margin-top: clamp(-24px, -2vw, 0px); }
.cut { --bar: clamp(84px, 12svh, 124px); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size; isolation: isolate; color: #14111b; background: var(--bg); }
.cut * { box-sizing: border-box; }
/* every scene sits above the chapter bar, so the bar never covers anything */
.cut .sc { position: absolute; left: 0; right: 0; top: 0; bottom: var(--bar); visibility: hidden; overflow: hidden; }
.cut .sc > * { position: absolute; }
.disp { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.86; }
.grain { inset: -50%; position: absolute; z-index: 40; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: sol-grain 0.9s steps(4) infinite; }
@keyframes sol-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- The chapter bar ---------- */
.bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--bar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6cqw, 44px); padding: 0 clamp(18px, 3cqw, 48px); background: var(--night); color: #f3efe7; }
.bar .slot { display: grid; }
.bar .slot > * { grid-area: 1 / 1; opacity: 0; }
.bar-n { font-family: var(--font-display); font-size: clamp(40px, 6.4svh, 68px); line-height: 0.85; color: var(--sun); }
.bar-t b { display: block; font-size: clamp(18px, 1.7cqw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.bar-t span { display: block; margin-top: 4px; max-width: 70ch; font-size: clamp(13px, 1.05cqw, 17px); line-height: 1.4; color: rgba(243, 239, 231, 0.68); }
.bar-rail { display: flex; gap: clamp(10px, 1.2cqw, 18px); }
.bar-rail > span { width: clamp(56px, 7cqw, 120px); }
.bar-rail i { display: block; height: 3px; border-radius: 2px; background: rgba(243, 239, 231, 0.2); overflow: hidden; }
.bar-rail i::after { content: ""; display: block; height: 100%; background: var(--accent-gradient); transform-origin: 0 0; transform: scaleX(var(--f, 0)); }
.bar-rail small { display: block; margin-top: 8px; font-size: 11px; font-weight: 500; color: rgba(243, 239, 231, 0.45); white-space: nowrap; transition: color 0.4s var(--ease); }
.bar-rail .on small { color: #f3efe7; }
@container (max-width: 900px) { .bar-rail { display: none; } }

/* ---------- 00: the AI tool pile. Deliberately none of our brand. ---------- */
.mk-bg { inset: 0; background: #f4f5f7; }
.mk-grid { left: -8cqw; top: -6cqh; display: grid; gap: 2.2cqmin; transform: rotate(-6deg); }
.mk-row { display: flex; gap: 2.2cqmin; }
.th { flex: none; width: clamp(130px, 21cqw, 300px); }
.th-in { container-type: inline-size; display: flex; flex-direction: column; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.06); font-family: Arial, Helvetica, sans-serif; color: #444; }
.th-nav { display: flex; justify-content: space-between; align-items: center; padding: 4cqw 6cqw; border-bottom: 1px solid #eee; color: #888; }
.th-nav b { font-size: 3.8cqw; color: #555; }
.th-nav span { padding: 1cqw 2.6cqw; border-radius: 99px; background: #2f6fde; color: #fff; font-size: 3cqw; }
.th-hero { flex: 1; display: grid; align-content: center; justify-items: center; gap: 2.4cqw; padding: 0 6cqw; text-align: center; }
.th-hero b { font-size: 7cqw; font-weight: 700; color: #333; }
.th-hero span { font-size: 3.6cqw; color: #999; }
.th-input { display: flex; align-items: center; justify-content: space-between; margin: 0 6cqw 6cqw; padding: 2.4cqw 2.4cqw 2.4cqw 4cqw; border: 1px solid #ddd; border-radius: 99px; font-size: 3.4cqw; color: #aaa; }
.th-input i { width: 6cqw; height: 6cqw; border-radius: 50%; background: #2f6fde; }
.th-cap { display: flex; justify-content: space-between; margin-top: 6px; font: 11px/1.2 Arial, Helvetica, sans-serif; color: #888; }
.th-cap span:first-child { color: #333; font-weight: 700; }
.mk-bar { left: 50%; top: calc(var(--header-h) + 3cqh); translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: 2cqmin; padding: 1.4cqmin 1.4cqmin 1.4cqmin 2.4cqmin; border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); font: clamp(11px, 2cqmin, 16px)/1 Arial, Helvetica, sans-serif; color: #333; white-space: nowrap; }
.mk-search { display: flex; align-items: center; gap: 1.2cqmin; min-width: 34cqmin; padding: 1.2cqmin 1.6cqmin; border: 1px solid #ccc; border-radius: 3px; }
.mk-search svg { width: 1.2em; height: 1.2em; color: #777; }
.mk-count { padding: 1.2cqmin 1.8cqmin; border-radius: 3px; background: #2f6fde; color: #fff; font-weight: 700; }
.mk-stamp { left: 50%; top: 56%; translate: -50% -50%; z-index: 3; display: grid; justify-items: center; gap: 1.4cqmin; padding: 3.4cqmin 5cqmin; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); font-family: Arial, Helvetica, sans-serif; white-space: nowrap; }
.mk-stamp b { font-size: clamp(22px, 6.4cqmin, 60px); font-weight: 900; letter-spacing: -0.03em; color: #222; }
.mk-stamp span { font-size: clamp(12px, 2.4cqmin, 20px); color: #777; }

/* ---------- 01: ink, and a Sage workspace on a laptop ---------- */
.ct-ink { inset: 0; background: radial-gradient(70% 60% at 50% 55%, #221c33, #0e0b16 70%); clip-path: inset(100% 0 0 0); }
/* the laptop: a lid with the screen, and the base below; sized to fit the space above the bar */
.lap { --lw: min(62cqw, (100cqh - var(--bar) - var(--header-h) - 10cqh) / 0.7); left: 50%; top: calc(var(--header-h) + (100% - var(--header-h)) / 2); width: var(--lw); translate: -50% -50%; opacity: 0; will-change: transform, opacity; }
.lap-lid { position: relative; padding: calc(var(--lw) * 0.022) calc(var(--lw) * 0.022) calc(var(--lw) * 0.03); border-radius: calc(var(--lw) * 0.024) calc(var(--lw) * 0.024) calc(var(--lw) * 0.006) calc(var(--lw) * 0.006); background: linear-gradient(#2b2b2d, #1b1b1d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 calc(var(--lw) * 0.05) calc(var(--lw) * 0.12) rgba(0, 0, 0, 0.6); }
.lap-lid::before { content: ""; position: absolute; left: 50%; top: calc(var(--lw) * 0.009); width: calc(var(--lw) * 0.006); height: calc(var(--lw) * 0.006); margin-left: calc(var(--lw) * -0.003); border-radius: 50%; background: #3c3c40; }
.lap-scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--lw) * 0.006); background: #050505; container-type: inline-size; }
.lap-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%); }
.lap-base { position: relative; left: -8%; width: 116%; height: calc(var(--lw) * 0.036); border-radius: 0 0 calc(var(--lw) * 0.03) calc(var(--lw) * 0.03) / 0 0 calc(var(--lw) * 0.02) calc(var(--lw) * 0.02); background: linear-gradient(#5b5b60, #2c2c30 40%, #18181a); box-shadow: 0 calc(var(--lw) * 0.03) calc(var(--lw) * 0.06) rgba(0, 0, 0, 0.55); }
.lap-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 34%; translate: -50% 0; border-radius: 0 0 calc(var(--lw) * 0.01) calc(var(--lw) * 0.01); background: #1f1f22; }
.lap-glow { left: 50%; top: calc(var(--header-h) + (100% - var(--header-h)) / 2 + 6cqh); width: 90cqw; height: 40cqh; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(130, 70, 255, 0.28), transparent); opacity: 0; }
.ct-tag { right: 3cqmin; top: calc(var(--header-h) + 2cqmin); z-index: 2; display: flex; align-items: center; gap: 1cqmin; padding: 1cqmin 1.8cqmin; border-radius: 99px; background: rgba(243, 239, 231, 0.1); color: #f3efe7; font-size: clamp(11px, 1.6cqmin, 14px); font-weight: 600; white-space: nowrap; opacity: 0; box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.14); }
.ct-tag i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--sun); }

/* The workspace on the laptop's screen, laid out in its own width (cqw) so it scales with it */
.ws { position: absolute; inset: 0; display: grid; grid-template-columns: 22% 1fr 24%; background: #f6f4f0; color: #14111b; font-family: var(--font-body); font-size: 1.5cqw; line-height: 1.35; }
.ws small { display: block; margin: 2.4cqw 0 0.8cqw; font-size: 1.1cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8b867f; }
.ws-side, .ws-tasks { display: flex; flex-direction: column; gap: 0.5cqw; padding: 2.2cqw 1.8cqw; }
.ws-side { background: #ece8f6; border-right: 1px solid rgba(20, 17, 27, 0.08); }
.ws-tasks { border-left: 1px solid rgba(20, 17, 27, 0.08); }
.ws-brand { font-family: var(--font-display); font-weight: 400; font-size: 2.8cqw; line-height: 1; letter-spacing: 0.01em; }
.ws-brand em { font-style: normal; font-size: 0.45em; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-side span { display: flex; align-items: center; gap: 0.8cqw; padding: 0.6cqw 0.9cqw; border-radius: 0.8cqw; color: #4b4852; }
.ws-side span i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--accent-gradient); opacity: 0.55; }
.ws-side span.is-on { background: #fff; color: #14111b; font-weight: 600; box-shadow: 0 0.3cqw 1cqw rgba(60, 40, 120, 0.12); }
.ws-side span.is-on i { opacity: 1; }
.ws-chat { position: relative; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.2cqw 2.4cqw; }
.ws-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.4cqw; border-bottom: 1px solid rgba(20, 17, 27, 0.08); }
.ws-top b { font-size: 1.8cqw; }
.ws-top span { font-size: 1.2cqw; color: #8b867f; }
.ws-msg { display: flex; gap: 1.2cqw; align-items: flex-start; }
.ws-msg p { max-width: 90%; }
.ws-msg b { display: block; font-size: 1.25cqw; color: #4b4852; }
.ws-av { flex: none; width: 3cqw; height: 3cqw; border-radius: 50%; background: #d8d2c6; }
.ws-ai .ws-av { background: var(--accent-gradient); }
.ws-ai p { padding: 1.2cqw 1.5cqw; border-radius: 0 1.2cqw 1.2cqw 1.2cqw; background: #fff; box-shadow: 0 0.4cqw 1.4cqw rgba(60, 40, 120, 0.1); }
.ws-ai b { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-input { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 2.2cqw; display: flex; justify-content: space-between; align-items: center; padding: 1.1cqw 1.1cqw 1.1cqw 1.8cqw; border: 1px solid rgba(20, 17, 27, 0.12); border-radius: 99px; background: #fff; color: #8b867f; }
.ws-input i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--accent-gradient); }
.ws-tasks span { display: flex; align-items: center; gap: 0.9cqw; padding: 0.5cqw 0; color: #4b4852; }
.ws-tasks span i { flex: none; width: 1.6cqw; height: 1.6cqw; border: 1.5px solid #b9b4c4; border-radius: 0.4cqw; }
.ws-tasks span.is-done { color: #8b867f; text-decoration: line-through; }
.ws-tasks span.is-done i { border: 0; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2314111b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 7.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
.ws-file { padding: 0.8cqw 1cqw !important; border-radius: 0.8cqw; background: #fff; font-size: 1.3cqw; }
.ws-msg, .ws-tasks span, .ws-side span { will-change: opacity, transform; }

/* ---------- 02: three panels: your data, your models, your rules ---------- */
.ct-pan { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3.4cqh; padding: calc(var(--header-h) + 1cqh) 3cqw 3cqh; background: var(--bg); border-right: 1px solid rgba(20, 17, 27, 0.1); transform: translateY(100%); }
.ct-pan:nth-child(2) { background: #e7e1d6; }
.pan-h { font-size: clamp(22px, 5cqw, 84px); text-align: center; }
.pan-px { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(10px, 1.6cqmin, 14px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(20, 17, 27, 0.6); }
.card { width: min(100%, 27cqw); padding: 1.2cqmin; border-radius: 2cqmin; background: #fff; box-shadow: 0 2cqmin 5cqmin rgba(40, 20, 90, 0.14); font-size: clamp(12px, 1.9cqmin, 18px); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 2cqmin; padding: 1.5cqmin 1.6cqmin; border-radius: 1.2cqmin; }
.card-row + .card-row { border-top: 1px solid rgba(20, 17, 27, 0.06); }
.card-row span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-row em { flex: none; display: grid; place-items: center; width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; background: #f1edfb; color: var(--accent); }
.card-row em svg { width: 58%; height: 58%; }
.card-row.is-on { background: #f1edfb; }
.radio { flex: none; width: 2.6cqmin; height: 2.6cqmin; border: 2px solid #c9c3d6; border-radius: 50%; }
.card-row.is-on .radio { border: 0; background: radial-gradient(circle, #fff 0 28%, transparent 30%), var(--accent-gradient); }
.tog { flex: none; position: relative; width: 5.2cqmin; height: 3cqmin; border-radius: 99px; background: #d9d4e2; }
.tog::after { content: ""; position: absolute; left: 0.35cqmin; top: 0.35cqmin; width: 2.3cqmin; height: 2.3cqmin; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: translate 0.5s var(--ease); }
.tog.is-on { background: var(--accent-gradient); }
.tog.is-on::after { translate: 2.2cqmin 0; }

/* ---------- 03: the purple field, the line, what came in ---------- */
.ct-close { inset: 0; }
.ct-acc { position: absolute; inset: 0; background: var(--accent-gradient); clip-path: inset(100% 0 0 0); }
.ct-content { inset: 0; }
.ct-words { position: absolute; left: 5cqw; top: calc(50% + var(--header-h) / 2); translate: 0 -50%; display: grid; gap: 0.12em; font-size: clamp(56px, 9.6cqw, 170px); line-height: 0.92; letter-spacing: 0.005em; color: #fff; }
.ct-words > span { display: block; opacity: 0; }
.ct-words > span:last-child { color: var(--sun); }
.ct-stack { position: absolute; right: 5cqw; top: calc(50% + var(--header-h) / 2); translate: 0 -50%; display: grid; gap: 1.6cqmin; }
.ntf { display: flex; align-items: center; gap: 1.6cqmin; padding: 1.7cqmin 2.1cqmin; border-radius: 2cqmin; background: var(--night); color: #fff; font-size: clamp(12px, 1.9cqmin, 17px); white-space: nowrap; box-shadow: 0 2cqmin 5cqmin rgba(20, 0, 60, 0.3); opacity: 0; }
.ntf .i { flex: none; display: grid; place-items: center; width: 4.6cqmin; height: 4.6cqmin; border-radius: 50%; background: #f3efe7; color: #14111b; }
.ntf .i svg { width: 55%; height: 55%; }
.ntf .t { display: grid; }
.ntf small { opacity: 0.65; font-size: 0.86em; margin-top: 0.15em; }
.ntf.on .i { background: var(--sun); color: var(--on-sun); }
@container (max-width: 700px) {
  .ct-words { top: calc(var(--header-h) + 5cqh); translate: none; font-size: 17cqw; }
  .ct-stack { top: auto; bottom: 5cqh; left: 5cqw; right: 5cqw; translate: none; }
}

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Phones: no sticky frame and no timed sequence. The four chapters are plain sections that scroll by,
   each with its caption above it and shown as it ends */
.sc-cap { display: none; }
@media (max-width: 860px) {
  .sol { height: auto; margin-top: 0; }
  .sol .cut { position: relative; top: auto; height: auto; overflow: visible; container-type: inline-size; }
  .sol .cut .sc { position: relative; inset: auto; height: calc(100svh - var(--header-h) - 24px); min-height: 520px; max-height: 760px; visibility: visible; z-index: auto; }
  .sol .bar, .sol .grain { display: none; }
  .sc-cap { display: flex; align-items: flex-start; gap: 16px; padding: 28px 20px 22px; background: var(--night); color: #f3efe7; }
  .sc-cap b { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 0.82; color: var(--sun); }
  .sc-cap strong { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
  .sc-cap span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: rgba(243, 239, 231, 0.7); }
  /* each scene as it ends */
  .sol .ct-ink, .sol .ct-acc { clip-path: none; }
  .sol .lap, .sol .lap-glow, .sol .ct-tag, .sol .ct-words > span, .sol .ntf { opacity: 1; }
  .sol .ct-pan { transform: none; }
  /* the header isn't over these, so the layouts that made room for it don't need to */
  .sol .mk-bar { top: 3cqh; }
  .sol .ct-tag { top: 2cqmin; }
  .sol .lap, .sol .lap-glow { top: 50%; }
  .sol .lap { --lw: 92cqw; }
  .sol .sc[data-sc="1"] { height: calc(92cqw * 0.7 + 140px); min-height: 0; }
  .sol .ct-words { top: 5cqh; }
  /* the three panels stack, each a third of the scene */
  .sol .sc[data-sc="2"] { height: auto; max-height: none; display: grid; }
  .sol .ct-pan { position: relative; left: auto !important; width: auto !important; padding: 32px 20px; border-right: 0; border-bottom: 1px solid rgba(20, 17, 27, 0.1); }
  .sol .card { width: min(100%, 340px); }
  .sol .pan-h { font-size: 44px; }
  .cut .card { font-size: 15px; }
  .cut .card-row { padding: 10px 12px; }
  .cut .card-row em { width: 26px; height: 26px; }
  .cut .radio { width: 18px; height: 18px; }
  .cut .tog { width: 36px; height: 20px; }
  .cut .tog::after { width: 15px; height: 15px; left: 2.5px; top: 2.5px; }
  .cut .tog.is-on::after { translate: 16px 0; }
}

/* ==========================================================================
   HOW IT WORKS: three steps along a line; each comes up as the dot reaches it (.is-reached,
   classic.js 7)
   ========================================================================== */
/* Room above the steps for the dot's drop */
.cl-method-section {
  padding-top: clamp(140px, 22vh, 260px);
}

.method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px var(--gutter);
  list-style: none;
}

.method-step {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* The number, huge in the display face, waits below the line in a mask and rises when reached */
.method-num-mask {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.02em;
  font-size: clamp(6rem, 12vw, 13rem);
}

.method-num {
  --num-ink: var(--ink);
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--num-ink);
}

.js .method-num {
  transform: translateY(102%);
  transition: transform 1s var(--ease);
}

.js .method-step.is-reached .method-num { transform: none; }

/* Where the dot lands: a ring opens off the line */
.method-step::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.js .method-step.is-reached::before { animation: method-ring 1.1s var(--ease) both; }

@keyframes method-ring {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: 4.5; }
}

@media (max-width: 960px) {
  .method-step:not(:first-child)::before { display: none; }
}

/* What the step hands you: chips that tick in one after another once it's reached */
.method-get {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  list-style: none;
}

.method-get li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  background: var(--bg-raised);
  font-size: 0.8125rem;
  color: var(--ink);
}

/* a white tick on the purple */
.method-get li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7.2 2 2 4-4.4'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--accent-gradient);
}

.js .method-get li {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s ease, translate 0.7s var(--ease);
}

.js .method-step.is-reached .method-get li { opacity: 1; translate: none; }
.js .method-step.is-reached .method-get li:nth-child(1) { transition-delay: 0.35s; }
.js .method-step.is-reached .method-get li:nth-child(2) { transition-delay: 0.5s; }
.js .method-step.is-reached .method-get li:nth-child(3) { transition-delay: 0.65s; }

/* Ink pour: each number waits as a faint ghost, and when the dot reaches its step, ink pours down
   into it from the top behind a sun-yellow edge. The ink is a second copy of the number in a curtain
   that slides down while the copy inside slides the other way, so it stays put; the edge is a third,
   yellow copy seen through a thin window riding the curtain's edge. Only transforms move. */
.method-ink, .method-band { display: none; }
.js .method-num { color: color-mix(in srgb, var(--num-ink) 14%, transparent); }
.js .method-ink { display: block; position: absolute; inset: 0; overflow: hidden; transform: translateY(-101%); transition: transform 1.1s var(--ease-in-out); }
.js .method-ink > span { display: block; color: var(--num-ink); transform: translateY(101%); transition: transform 1.1s var(--ease-in-out); }
.js .method-step.is-reached .method-ink, .js .method-step.is-reached .method-ink > span { transform: none; }
.js .method-band { display: block; position: absolute; left: 0; right: 0; top: 0; height: 7%; overflow: hidden; transform: translateY(-100%); transition: transform 1.1s var(--ease-in-out); }
.js .method-band > span { display: block; color: var(--sun); transform: translateY(7%); transition: transform 1.1s var(--ease-in-out); }
.js .method-step.is-reached .method-band { transform: translateY(1430%); }
.js .method-step.is-reached .method-band > span { transform: translateY(-100%); }

/* The last step's number lands in the purples */
.method-step:last-child .method-ink > span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.method-step h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.method-step p {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.25vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-2);
}

.js .method-step > * {
  opacity: 0.25;
  transition: opacity 0.6s ease, color 0.5s ease;
}

.js .method-step > .method-num-mask,
.js .method-step > .method-get { opacity: 1; }

.js .method-step.is-reached > * { opacity: 1; }

@media (max-width: 960px) {
  .method { grid-template-columns: 1fr; gap: 40px; }
  .method-step h3 { margin-top: 20px; }
}

/* The dot's line along the steps' top: an overlay in page coordinates; classic.js sizes it, shapes the
   line and moves the dot */
.path-layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.path-layer.is-ready { display: block; }

.path-trail {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* The travelling dots: the same purple dot wherever it is on the page */
.path-dot-el,
.cb-dot,
.fd-dot {
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 0 transparent;
  pointer-events: none;
  will-change: transform;
}

.path-dot-el {
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: 4;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.path-dot-el.is-flying { opacity: 1; }

/* ==========================================================================
   PROVEN ADVANTAGE: each question on a hairline, stamped YES in sun yellow as it comes up
   ========================================================================== */
.cl-yes {
  list-style: none;
  border-top: 1px solid var(--ink);
}

.cl-yes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px var(--gutter);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}

.cl-yes small {
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  color: var(--muted);
}

.cl-yes h3 {
  font-size: clamp(1.25rem, 2vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cl-yes p {
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
  color: var(--ink-2);
}

.cl-stamp {
  display: inline-grid;
  place-items: center;
  min-width: 2.6em;
  padding: 0.18em 0.42em 0.1em;
  border-radius: 0.18em;
  background: var(--sun);
  color: var(--on-sun);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  rotate: -4deg;
  /* it lands from larger, growing out of its right edge so it never reaches past the page */
  transform-origin: 100% 50%;
}

.js .reveal .cl-stamp {
  opacity: 0;
  scale: 1.7;
}

.js .reveal.is-in .cl-stamp {
  opacity: 1;
  scale: 1;
  rotate: -4deg;
  transition: opacity 0.2s ease 0.45s, scale 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.45s, rotate 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.45s;
}

/* Phones: the stamp sits at the screen's edge, where waiting scaled up would widen the page, so it
   lands with a twist instead */
@media (max-width: 860px) {
  .js .reveal .cl-stamp { scale: 1; rotate: -18deg; }
}

@media (max-width: 860px) {
  .cl-yes li { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-yes small, .cl-yes h3, .cl-yes p { grid-column: 1; }
  .cl-yes .cl-stamp { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; font-size: 1.75rem; }
}

.cl-statement {
  margin-top: clamp(96px, 12vw, 180px);
}

.cl-big {
  max-width: 18em;
  margin-top: 20px;
  font-size: clamp(2.25rem, 6vw, 7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

html[data-theme="classic"] [data-scroll-words] u { text-decoration: none; }

/* ==========================================================================
   WORKFLOW DIAGNOSIS: six signs, numbered, two to a row
   ========================================================================== */
.cl-symptoms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gutter);
  list-style: none;
  counter-reset: sign;
  border-top: 1px solid var(--ink);
}

.cl-symptoms li {
  counter-increment: sign;
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.25rem, 2vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.cl-symptoms li::before {
  content: counter(sign, decimal-leading-zero);
  flex: none;
  font-size: clamp(0.8125rem, 0.85vw, 1rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cl-symptoms-cta { margin-top: clamp(40px, 5vw, 72px); }

@media (max-width: 760px) {
  .cl-symptoms { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OUR CREED
   ========================================================================== */
.cl-creed {
  padding-bottom: clamp(80px, 10vw, 140px);
}

.cl-creed-text {
  max-width: 22em;
  margin-top: 20px;
  font-size: clamp(2rem, 4.6vw, 5.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.cl-creed-word {
  margin-top: clamp(40px, 5vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 15rem);
  line-height: 0.86;
  text-transform: uppercase;
}

/* ==========================================================================
   CHAPTER BREAK (before the FAQ; classic.js 8): the purple field, big words, then the dot
   ========================================================================== */
.chap-break { position: relative; z-index: 4; height: 200vh; height: 200svh; }
.cb-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cb-acc { position: absolute; inset: 0; background: var(--accent-gradient); clip-path: inset(100% 0 0 0); }
.cb-words { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 6vh); display: grid; gap: 0.08em; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 14vw, 260px); line-height: 0.88; text-transform: uppercase; color: #fff; }
.cb-words > span { display: block; overflow: hidden; padding: 0.06em 0 0.24em; margin: -0.06em 0 -0.24em; }
.cb-words > span:last-child { color: var(--sun); }
.cb-words > span > span { display: block; transform: translateY(140%); will-change: transform; }
.chap-break.is-in .cb-words > span > span { transform: none; transition: transform 0.9s var(--ease); }
.chap-break.is-in .cb-words > span:nth-child(2) > span { transition-delay: 0.14s; }
.cb-dot { position: fixed; left: 0; top: 0; z-index: 5; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; }

@media (max-width: 760px) {
  .chap-break { height: auto; }
  .cb-pin { position: relative; height: 88svh; }
  .cb-words { font-size: 21vw; }
}

@media (prefers-reduced-motion: reduce) {
  .chap-break { height: auto; }
  .cb-pin { position: relative; height: 70vh; }
  .cb-acc { clip-path: none; }
  .cb-words > span > span { transform: none; }
}

/* ==========================================================================
   FAQ: the heading holds still on the left (its full stop is the dot) while the questions are read
   ========================================================================== */
.cl-faq-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px var(--gutter);
}

.cl-head-stack {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.cl-head-stack .cl-title {
  margin-top: 24px;
  font-size: clamp(2rem, 3.4vw, 4rem);
}

.cl-head-stack .cl-lede {
  margin-top: 20px;
  font-size: clamp(0.9375rem, 1vw, 1.125rem);
}

.cl-faq-body {
  grid-column: 2 / -1;
  min-width: 0;
}

/* The heading's full stop: a purple dot on the baseline, the size of the type's own period. It waits,
   hidden, for the travelling dot (classic.js 8) */
.title-dot {
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.04em;
  border-radius: 50%;
  background: var(--accent-gradient);
  -webkit-text-fill-color: initial;
}

.title-dot.is-waiting { visibility: hidden; }

/* The FAQ's own marker is the same dot */
html[data-theme="classic"] .faq-marker {
  width: 10px;
  height: 10px;
  margin-top: -1px;
  background: var(--accent-gradient);
  box-shadow: none;
}

html[data-theme="classic"] .faq-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}

html[data-theme="classic"] .faq-tab[aria-selected="true"] span { color: var(--sun); }

html[data-theme="classic"] .faq-pane {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg) 40%, #fff);
}

@media (min-width: 861px) {
  html[data-theme="classic"] .faq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

@media (max-width: 1100px) {
  .cl-faq-layout { grid-template-columns: 1fr; }
  .cl-head-stack { position: static; }
  .cl-faq-body { grid-column: 1; }
}

/* ==========================================================================
   FOOTER: cream, under a thick ink rule, the brand mark SAGE•IS beside the headline, where the dot
   comes home (classic.js 9)
   ========================================================================== */
html[data-theme="classic"] .site-footer {
  color-scheme: light;
  --bg: #eee9e2;
  --bg-raised: #e5dfd6;
  --ink: #14111b;
  --ink-2: #4b4852;
  --muted: #8b867f;
  --line: rgba(20, 17, 27, 0.14);
  --accent: #6a3cff;
  --accent-gradient: linear-gradient(135deg, #5546ff 0%, #a32bff 100%);
  --accent-soft: #6a3cff;
  --on-accent: #fff;
  --on-ink: #eee9e2;
  padding-top: 0;
  background: var(--bg);
}

html[data-theme="classic"] .footer-statement {
  border-top: clamp(4px, 0.35vw, 6px) solid var(--ink);
}

/* SAGE • IS, as tall as the headline: ink SAGE, the purple dot as its full stop, and IS in the purples
   at the wordmark's proportion */
html[data-theme="classic"] .footer-mark {
  --h: clamp(56px, 9vw, 170px);
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--h) * 0.06);
  height: var(--h);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--h) / 0.84);
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
}

.fm-word { display: block; }

.fm-r {
  font-size: 0.4em;
  line-height: 1;
  margin-bottom: 0.02em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="classic"] .footer-dot {
  flex: none;
  width: calc(var(--h) * 0.17);
  aspect-ratio: 1;
  margin-bottom: calc(var(--h) * 0.01);
  border-radius: 50%;
  background: var(--accent-gradient);
}

@media (max-width: 760px) {
  html[data-theme="classic"] .footer-statement { flex-direction: column-reverse; }
}

/* The dot and the bent rule while it bounces (classic.js 9), in page coordinates */
.fd-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 30;
  pointer-events: none;
}

.fd-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
}

.fd-rule {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  overflow: visible;
}

.fd-rule path {
  fill: none;
  stroke: var(--ink);
  stroke-width: clamp(4px, 0.35vw, 6px);
}

html[data-theme="classic"] .footer-mark.is-home .footer-dot { animation: fd-pop 0.8s both; }

@keyframes fd-pop {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  35% { transform: scale(1.45); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: scale(1); }
}

/* The legal links wrap, so on phones the last of them doesn't widen the page */
html[data-theme="classic"] .footer-legal {
  flex-wrap: wrap;
  gap: 8px 20px;
}

html[data-theme="classic"] .footer-alert {
  border-color: color-mix(in srgb, var(--sun) 70%, transparent);
  background: color-mix(in srgb, var(--sun) 18%, transparent);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .cl-hero-title .w { opacity: 1; filter: none; transform: none; }
  .js .cl-hero-meta, .js .cl-hero-aside, .js .cl-hero-foot { opacity: 1; transform: none; }
  .js .cl-hi { background-size: 100% 100%; }
  .js .reveal .cl-stamp { opacity: 1; scale: 1; }
}