/* =========================================================
   Homepage: Figma Dev Handoff › Home
   ========================================================= */

/* =========================================================
   1 + 2 · INTRO (hero → about)
   ========================================================= */
.intro { position: relative; height: 320vh; height: 320svh; }
.intro__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 640px; overflow: hidden; } /* lvh: no cream gap when the iOS toolbar collapses */
.intro__layer { position: absolute; inset: 0; overflow: hidden; }
.intro__layer--hero {
  background: linear-gradient(180deg, var(--blue-900), var(--blue-700));
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 40px var(--pad-x);
  z-index: 1;
}
.intro__layer--about {
  background: var(--paper); --grain: .5;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--pad-x);
  z-index: 2;
  opacity: var(--p, 0);
  visibility: hidden;
}
.intro.is-about .intro__layer--about { visibility: visible; }
.intro__layer--about, [data-intro-hero-body], [data-intro-about-body], .intro .nav, .intro .marquee { will-change: opacity, transform; }

/* Ring (1316 × 1284, rotates; icons stay upright) */
/* Sized with --ring-s instead of scale(): a 1316px layer scaled down still rasterises and spins at full size. */
.ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(1316px * var(--ring-s, 1)); height: calc(1284px * var(--ring-s, 1));
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 1;
}
.ring__spin { position: absolute; inset: 0; transform-origin: calc(654px * var(--ring-s, 1)) calc(642px * var(--ring-s, 1)); animation: ring-spin 140s linear infinite; will-change: transform; }
.ring__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring__icon {
  position: absolute; left: calc(var(--x) * var(--ring-s, 1)); top: calc(var(--y) * var(--ring-s, 1));
  transform: translate(-50%, -50%);
  animation: ring-counter 140s linear infinite;
}
.ring__icon img { display: block; transform: scale(var(--icon-s, var(--ring-s, 1))); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-counter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* Nav (Figma: Navigation / Header · Desktop) */
.nav { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo img { width: 110.195px; height: 32.285px; }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links > a:not(.btn) { color: #e2cf84; font-size: 16px; font-weight: 500; line-height: 1.5; opacity: .55; transition: opacity .25s var(--ease); }
.nav__links > a:not(.btn):hover { opacity: 1; }
.nav__burger { display: none; width: 24px; height: 24px; }

/* Hero */
.hero__body { position: relative; z-index: 2; flex: 1 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; width: 556px; max-width: 100%; }
.hero__title { font-size: 64px; }
.hero__title .serif { padding-right: .12em; }
.hero__lede { max-width: 530px; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(221, 210, 185, .7); }
.rotator {
  display: inline-block; position: relative; vertical-align: baseline;
  overflow: hidden; line-height: 1;
  padding-bottom: .28em; margin-bottom: -.28em;
}
/* The rotator is as wide as the longest word; the line slides by half the difference so it stays centred. */
.hero__line2 { display: inline-block; white-space: nowrap; transform: translateX(var(--shift, 0px)); transition: transform .65s var(--ease-out); will-change: transform; }
.rotator::before { content: "Hg"; visibility: hidden; }
.rotator__word {
  display: block; position: absolute; left: 0; top: .11em; margin: 0;
  line-height: 1; white-space: nowrap;
  transform: translateY(130%);
  visibility: hidden;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rotator__word.is-on, html:not(.js) .rotator__word:first-child { transform: translateY(0); visibility: visible; }
.rotator__word.is-out { transform: translateY(-130%); visibility: visible; }

/* Landing entrance: ring breathes in, nav drops, headline lines rise one after the other, then lede and marquee.
   Opacity + translate/scale only (the individual properties, so they compose with the elements' own transforms
   and scroll animations). Starts once fonts and the hero texture are ready, so nothing pops in half-drawn. */
.hero__line1 { display: inline-block; }
@keyframes hero-enter {
  from { opacity: 0; translate: 0 var(--y, 28px); scale: var(--s, 1); }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .intro:not(.is-entered) [data-enter] { opacity: 0; }
  .js .intro.is-entering [data-enter] { animation: hero-enter var(--d, 1.1s) cubic-bezier(.16, 1, .3, 1) var(--delay, 0s) both; }
}

/* Marquee */
.marquee { position: relative; z-index: 2; width: calc(100% + 2 * var(--pad-x)); margin: 0 calc(-1 * var(--pad-x)); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee__group { display: flex; gap: 76px; padding-left: var(--pad-x); padding-right: calc(76px - var(--pad-x)); }
.mq { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 16px; font-weight: 500; line-height: 1.5; }
.mq b { font-weight: 500; color: var(--gold-2); }
.mq i { font-style: normal; color: rgba(226, 208, 132, .6); }
.mq img { width: 29px; height: 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.intro.is-off .ring__spin, .intro.is-off .ring__icon, .intro.is-off .marquee__track { animation-play-state: paused; }
/* Only animate what's on screen: the hero loops stop once the about layer covers them, the about ring waits until it shows. */
.intro.is-covered .ring--hero .ring__spin, .intro.is-covered .ring--hero .ring__icon, .intro.is-covered .marquee__track,
.intro:not(.is-revealing) .ring--about .ring__spin, .intro:not(.is-revealing) .ring--about .ring__icon { animation-play-state: paused; }
/* Phones used to let the logos ride the ring (no counter-rotation) to save work, but over a turn that left Google
   and the others sideways or upside down. The counter-rotation is a compositor-only transform, so phones keep it. */

/* About */
.about__body { position: relative; z-index: 2; width: 877px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.about__title { font-size: 64px; max-width: 621px; }
.about__text { --fill-dim: rgba(53, 50, 38, .28); --fill-ink: #353226; width: 689px; max-width: 100%; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text); }
.about__text span { --fill-ink: rgba(53, 50, 38, .72); }


/* =========================================================
   3 · SHOW UP HERE
   ========================================================= */
.show { position: relative; height: 320vh; }
.show__stage {
  position: sticky; top: 0; height: 100vh; min-height: 798px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  padding: 80px var(--pad-x);
}
.show__state { display: contents; }
.show__title {
  grid-area: 1 / 1; align-self: center;
  display: flex; flex-direction: column; gap: 16px; padding: 0 24px;
  opacity: 0; transform: translateY(64px); pointer-events: none;
  transition: opacity .95s var(--ease), transform 1.15s var(--ease-out);
}
.show__title .h-56 { max-width: 383px; }
.show__title .body { max-width: 383px; }
.show__title .body--narrow { max-width: 323px; }
.show__title .body--narrow2 { max-width: 282px; }
.show__state.is-active .show__title { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.show__state.is-past .show__title { opacity: 0; transform: translateY(-72px); transition-delay: 0s; }

.show__card, .show__cardbg {
  grid-area: 1 / 2;
  width: var(--card-w, 838px); height: var(--card-h, 638px);
  border-radius: 24px; overflow: hidden; position: relative;
}
.show__cardbg { --grain: .15; background: linear-gradient(180deg, var(--blue-900), var(--blue-700)); }
.show__card { --grain: .15; background: transparent; }
.show__card.grain::after { display: none; }
.show__state.is-active .show__card { z-index: 2; }
/* Lottie per card (838×638, the desktop card's own size). The finished-state poster shows for no-JS and
   reduced-motion visitors, and until the animation is ready; home.js plays the card that's on screen. */
.lot { position: absolute; inset: 0; z-index: 1; }
.lot__poster, .lot svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.lot.is-live .lot__poster { display: none; }
/* Desktop stacks the three cards in one spot: only the active state's animation shows, crossfading between states */
@media (min-width: 1200px) {
  .show__state .lot { opacity: 0; transition: opacity .5s var(--ease); }
  .show__state.is-active .lot { opacity: 1; }
}


/* =========================================================
   4 · METHOD (ASSBOT stacking cards)
   ========================================================= */
.method { position: relative; height: 640vh; }
.method__stage {
  position: sticky; top: 0; height: 100vh; min-height: 760px;
  display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: 80px var(--pad-x); overflow: hidden;
}
.method__intro { display: flex; flex-direction: column; gap: 12px; width: 554px; flex: 0 1 554px; }
.eyebrow { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: #6d5f26; white-space: nowrap; }
.method__title { font-size: 56px; }
.method__cards {
  position: relative; flex: 0 0 652px; width: 652px;
  /* Card slot + peek room above for cards that recede upward. Waiting cards
     sit one full height below (visibility:hidden + opacity 0 until they arrive). */
  height: calc(var(--mh, 359px) + var(--mpeek, 0px));
}
.mcard {
  --w: 652px;
  --y: 0px;
  --sc: 1;
  --br: 1;
  --o: 1;
  position: absolute; left: 50%; top: var(--mpeek, 0px);
  width: var(--w); height: var(--mh, 359px);
  padding: 40px; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px;
  color: #d2cab5; isolation: isolate;
  background-color: #0c265f; /* opaque base so lower cards never bleed through */
  transform: translate3d(-50%, var(--y), 0) scale(var(--sc));
  transform-origin: 50% 0;
  opacity: var(--o);
  box-shadow: 0 24px 48px -12px rgba(12, 38, 95, .42), 0 8px 16px -8px rgba(32, 30, 20, .28);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.mcard::before, .mcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.mcard::after { background: var(--grain-dark) 0 0 / 256px 256px repeat; opacity: 1; }
.mcard--a { background-color: #0c265f; background-image: linear-gradient(132.12deg, #0e4887 11.2%, #0c265f 119.03%); }
.mcard--a::before { background: url("../img/painting-landscape.webp") center / cover no-repeat; opacity: .2; }
.mcard--b { background-color: #0c265f; background-image: linear-gradient(134.5deg, #0e4887 11.2%, #0c265f 119.03%); }
.mcard--b::before { inset: auto; left: 0; top: -8.81%; width: 100%; height: 102.51%; background: url("../img/painting-ruins-960.webp") 0 0 / 100% 100% no-repeat; opacity: .08; border-radius: 0; }
.mcard--c { background-color: #0c265f; background-image: linear-gradient(135.31deg, #0e4887 11.2%, #0c265f 119.03%); }
.mcard--c::before { inset: auto; left: 0; top: -146.98%; width: 100%; height: 251.98%; background: url("../img/painting-landscape.webp") 0 0 / 100% 100% no-repeat; opacity: .29; border-radius: 0; }
/* Covered cards dim with a black layer instead of filter: brightness(): same look (brightness .7 = 30% black),
   but opacity is composited, so the stack no longer re-renders every card on each scroll frame (iPhone lag). */
.mcard__dim { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: #000; opacity: calc(1 - var(--br)); pointer-events: none; will-change: opacity; }
.mcard h3 { display: flex; gap: 24px; font-size: 40px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; font-weight: 500; }
.mcard h3 span:first-child { font-weight: 600; }
.mcard p { font-size: 16px; line-height: 1.5; }

/* =========================================================
   5 · PLAYBOOK
   ========================================================= */
.playbook {
  --grain: .15;
  position: relative; overflow: hidden; height: 827px;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--pad-x);
  background: linear-gradient(127.04deg, var(--blue-900) 6.66%, var(--blue-700) 93.85%);
}
.playbook::before { content: ""; position: absolute; inset: 0; background: url("../img/painting-landscape.webp") center / cover no-repeat; opacity: .12; z-index: -1; }
.playbook__main { display: flex; align-items: center; gap: 56px; position: relative; z-index: 2; }
.playbook__title { width: 397px; font-size: 40px; }
.playbook__pillar { position: absolute; top: -9px; width: 290px; height: 845px; overflow: hidden; z-index: 1; pointer-events: none; }
.playbook__pillar img { position: absolute; left: -83.12%; top: -7.91%; width: 266.95%; height: 114.48%; }
.playbook__pillar--l { left: -130px; }
.playbook__pillar--r { right: -130px; }
.case { width: 417px; background: #efebe1; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
.case__thumb { height: 345px; border-radius: 16px; overflow: hidden; margin-bottom: -10px; }
.case__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.case:hover .case__thumb img { transform: scale(1.04); }
.case__title { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: #121212; max-width: 351px; }
.case__text { font-size: 16px; line-height: 1.5; color: rgba(18, 18, 18, .6); margin-top: -10px; }
.case__links { display: flex; justify-content: space-between; font-size: 16px; line-height: 1.5; color: #0028ff; }
.case__links .case__more { color: rgba(0, 40, 255, .5); }
.case__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.playbook__side { width: 223px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.playbook__side p { color: #b8b8b8; font-size: 16px; line-height: 1.5; }

/* entry animation */
.playbook .playbook__pillar--l { transform: translateX(-105%); }
.playbook .playbook__pillar--r { transform: translateX(105%); }
.js .playbook .playbook__title, .js .playbook .playbook__side { opacity: 0; transform: translateY(32px); }
.js .playbook .case { opacity: 0; transform: translateY(160px); }
.playbook.is-in .playbook__pillar { transform: none; transition: transform 1.6s var(--ease-out); }
.playbook.is-in .playbook__title, .playbook.is-in .playbook__side { opacity: 1; transform: none; transition: opacity .9s var(--ease) .5s, transform 1.1s var(--ease-out) .5s; }
.playbook.is-in .playbook__side { transition-delay: .65s; }
.playbook.is-in .case { opacity: 1; transform: none; transition: opacity .8s var(--ease) .25s, transform 1.3s var(--ease-out) .25s; }

/* =========================================================
   6 · PRICING
   ========================================================= */
.pricing { padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.pricing__head { width: min(1302px, calc(100% - 2 * var(--pad-x))); display: flex; align-items: center; gap: 40px; }
.pricing__row { display: contents; }
.pricing__head .h-64 { white-space: nowrap; }
.pricing__pill { flex: 1 0 0; min-width: 0; height: 96px; border-radius: 68px; overflow: hidden; position: relative; }
.pricing__pill img { position: absolute; left: 0; top: -5.47%; width: 100%; height: 192.33%; object-fit: cover; transition: transform 8s linear; }
.pricing__h2 { text-align: center; }


/* =========================================================
   ≥1680 · Desktop 1920 frame
   ========================================================= */
@media (min-width: 1680px) {
  :root { --pad-x: 80px; }
  .nav .logo img { width: 147px; height: auto; }
  .nav__links > a:not(.btn), .nav__links .btn { font-size: 20px; }
  .hero__lede { font-size: 20px; }
  .mq { font-size: 20px; }
  .marquee__track { margin: 0 auto; }
  .about__text { font-size: 20px; }
  .about__body .btn { font-size: 20px; }
  .show__stage { padding: 80px; }
  .show__title .body { font-size: 20px; }
  .method { height: 640vh; }
  .method__stage { padding: 80px; flex-direction: row-reverse; justify-content: center; gap: clamp(48px, 6vw, 120px); }
  .eyebrow { font-size: 28px; letter-spacing: -.04em; }
  .method__title { font-size: 64px; }
  .method__cards { flex-basis: 773px; width: 773px; }
  .mcard { padding: 47.423px; border-radius: 28.454px; gap: 28.454px; }
  .mcard::after { background-size: 1214px 1214px; }
  .mcard h3 { font-size: 56px; gap: 28.454px; font-weight: 600; }
  .mcard p { font-size: 23.712px; }
  /* Pillars stay pinned half off the screen edges like the 1440 design, scaled up; the band grows with its content. */
  .playbook { height: auto; min-height: 960px; padding: 96px 80px; }
  .playbook__pillar { width: 340px; height: calc(100% + 18px); }
  .playbook__pillar--l { left: -152px; }
  .playbook__pillar--r { right: -152px; }
  .playbook__main { gap: 80px; }
  .playbook__title { width: 317px; }
  .case__title { font-size: 28px; letter-spacing: -.04em; }
  .case__text, .case__links, .playbook__side p, .playbook__side .btn { font-size: 20px; }
  .playbook__side { width: 279px; }
  .pricing { padding: 80px 0; gap: 40px; }
  .pricing__head { width: calc(100% - 160px); }
  .pricing__head .h-64 { font-size: 64px; }
}

/* =========================================================
   ≤1199 · Tablet 834 frame
   ========================================================= */
@media (max-width: 1199px) {
  :root { --pad-x: 48px; }
  .intro__layer--hero { padding: 40px var(--pad-x); gap: 40px; }
  .ring { --ring-s: .5747; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav .logo img { width: 83px; height: 24px; }
  .marquee__group { gap: 24px; padding-right: 0; padding-left: 24px; }
  .about__text { width: 514px; }

  /* show: stacked */
  .show { height: auto; }
  .show__stage { position: static; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 80px; padding: 80px var(--pad-x); }
  .show__cardbg { display: none; }
  .show__state { display: flex; flex-direction: column; gap: 20px; }
  .show__state:first-of-type { gap: 40px; }
  .show__title { opacity: 1; transform: none; pointer-events: auto; padding: 0; align-items: center; text-align: center; }
  .show__title .h-56 { font-size: 40px; letter-spacing: -.04em; white-space: nowrap; max-width: none; }
  .show__title .body { font-size: 14px; max-width: 383px; }
  .show__state:first-of-type .show__title .h-56 { font-size: 56px; white-space: normal; max-width: 383px; width: 383px; }
  .show__state:first-of-type .show__title .body { font-size: 16px; width: 383px; max-width: 100%; }
  .br-d { display: none; }
  .show__card { width: 100%; background: linear-gradient(180deg, var(--blue-900), var(--blue-700)); border-radius: 14.311px; }
  .show__state:first-of-type .show__card { border-radius: 24px; }
  .show__card.grain::after { display: block; }

  /* method */
  .method { height: 680vh; }
  .method__stage { flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px; padding: 80px var(--pad-x); }
  .method__intro { width: 100%; flex: none; align-items: center; text-align: center; }
  .method__cards { flex: none; width: 652px; max-width: 100%; }

  /* playbook */
  .playbook { height: auto; flex-direction: column; padding: 80px var(--pad-x); }
  .playbook__main { flex-direction: column; gap: 40px; }
  .playbook__title { text-align: center; }
  .case { gap: 24px; }
  .playbook__side { width: 438px; align-items: center; text-align: center; }
  .playbook__pillar { top: -4px; width: 384px; height: 1119px; }
  .playbook__pillar--l { left: -259px; }
  .playbook__pillar--r { right: -249px; }

  /* pricing */
  .pricing { padding: 80px var(--pad-x); }
  .pricing__head { width: 100%; flex-direction: column; gap: 24px; }
  .pricing__row { display: flex; width: 100%; gap: 24px; align-items: flex-start; }

}

/* =========================================================
   ≤699 · Mobile 390 frame
   ========================================================= */
@media (max-width: 699px) {
  :root { --pad-x: 24px; }
  .intro__layer--hero { padding: 40px var(--pad-x); gap: 10px; }
  /* Whole ring + its four orbiting icons on screen (icons orbit at ~631px of the 1316px ring):
     scale so 631 × s stays ~12px inside half the screen width. Was .5897, which put most of it off-screen. */
  .ring { --ring-s: .5897; }
  .ring--hero { --ring-s: .29; }
  .ring--hero { --icon-s: .667; } /* keep the logos ~20-30px after the ring shrinks */
  .hero__body { width: 100%; }
  .hero__title { font-size: 40px; }
  .hero__lede { font-size: 14px; }
  .marquee__group { gap: 56px; padding-left: 0; padding-right: 56px; }
  .mq { font-size: 14px; }
  .intro__layer--about { padding: 40px var(--pad-x); }
  /* home.js pulls this section up into the empty bottom of the pinned about stage (iPhone feedback: negative space) */
  .show { position: relative; z-index: 3; }
  .about__body { gap: 32px; }
  .about__title { font-size: 40px; background-image: none; }
  .about__text { font-size: 14px; }
  .about__body .btn-row { flex-direction: column; gap: 12px; align-items: stretch; }

  .show__stage { padding: 24px var(--pad-x) 40px; gap: 40px; }
  .show__state, .show__state:first-of-type { gap: 20px; }
  .show__title, .show__state:first-of-type .show__title { align-items: flex-start; text-align: left; }
  .show__title .h-56, .show__state:first-of-type .show__title .h-56 { font-size: 36px; width: auto; max-width: none; white-space: nowrap; }
  .show__title .body, .show__state:first-of-type .show__title .body { font-size: 14px; width: auto; max-width: 383px; text-align: left; }
  .show__card, .show__state:first-of-type .show__card { border-radius: 14.311px; }

  .method__stage { padding: 40px var(--pad-x); gap: 46px; min-height: 0; height: 100svh; justify-content: center; } /* svh: card stays above the iOS toolbar; centred so the spare space isn't all under the cards */
  .eyebrow { font-size: 16px; line-height: 1.5; letter-spacing: 0; }
  .method__title { font-size: 36px; }
  .method__cards { width: 100%; }
  .mcard { padding: 40px; }
  .mcard h3 { font-size: 28px; font-weight: 500; }
  .mcard h3 span:first-child { font-weight: 500; }
  .mcard p { font-size: 14px; }

  .playbook { padding: 40px 20px; }
  .playbook__main { gap: 32px; width: 100%; }
  .playbook__pillar { display: none; }
  .playbook__title { width: 232px; font-size: 28px; }
  .playbook__title .serif--reg { font-family: "Awesome Serif ET", serif; }
  .case { width: 100%; }
  .case__title { font-size: 18px; }
  .case__text, .case__links, .playbook__side p { font-size: 14px; }
  .playbook__side { width: 100%; }
  .playbook__side p { width: 286px; }
  .playbook__side .btn { width: 100%; }

  .pricing { padding: 40px var(--pad-x); gap: 46px; }
  .pricing__head { gap: 8px; align-items: flex-start; }
  .pricing__row { justify-content: space-between; align-items: flex-start; }
  /* Scales down on narrow phones so "Two doors." + pill and the second line never spill past the screen */
  .pricing__head .h-64 { font-size: min(40px, 10.5vw); }
  .pricing__pill { flex: 0 1 152px; min-width: 72px; height: 45px; }
  .pricing__h2 { text-align: left; white-space: normal !important; }

}

/* =========================================================
   ≤699 · ASSBOT on phones: native sticky stack (no scroll-driven JS).
   Each card pins 12px lower than the last and the next one slides over it, so the cards still
   stack and stay visible behind each other, but the browser does it on the compositor.
   (iPhone feedback: the JS-driven stack lagged badly.)
   ========================================================= */
@media (max-width: 399px) { .ring--hero { --ring-s: .27; } }
@media (max-width: 349px) { .ring--hero { --ring-s: .245; } }

@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .method { height: auto; }
  .method__stage { position: relative; height: auto; overflow: visible; justify-content: flex-start; padding-bottom: 80px; }
  .method__cards { height: auto; display: block; }
  .mcard {
    position: sticky; top: calc(var(--gnav-space, 24px) + var(--i, 0) * 12px); left: auto; /* below the glass bar, so every card's edge shows */
    width: 100%; height: var(--mh, auto); margin-bottom: 18vh;
    transform: none; opacity: 1; visibility: visible !important; pointer-events: auto !important;
    box-shadow: 0 -10px 24px -14px rgba(12, 38, 95, .5); will-change: auto;
  }
  .mcard:last-child { margin-bottom: 0; }
  .mcard:nth-child(2) { --i: 1; } .mcard:nth-child(3) { --i: 2; } .mcard:nth-child(4) { --i: 3; }
  .mcard:nth-child(5) { --i: 4; } .mcard:nth-child(6) { --i: 5; }
  .mcard__dim { display: none; }
}

/* =========================================================
   Scroll-driven intro (hero → about) and paragraph "rise".
   Where the browser supports scroll timelines these run natively: no scroll JS: and home.js stands down.
   Ranges map home.js's progress: p = 0→1 over the first 1.4 of the intro's 2.2 viewports of pinning (0 → 63.6%).
   ========================================================= */
@property --lit { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes intro-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-hero-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-60px); } }
@keyframes intro-about-in { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes intro-lit { from { --lit: 0; } to { --lit: 1; } }
@keyframes rise-in { from { opacity: .38; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .intro { view-timeline: --intro block; }
    .intro__layer--about { animation: intro-in both cubic-bezier(.65, 0, .35, 1); animation-timeline: --intro; animation-range: contain 0% contain 63.6%; }
    [data-intro-hero-body] { animation: intro-hero-out both cubic-bezier(.65, 0, .35, 1); animation-timeline: --intro; animation-range: contain 0% contain 22.3%; }
    .intro .nav, .intro .marquee { animation: intro-out both linear; animation-timeline: --intro; animation-range: contain 0% contain 22.3%; }
    [data-intro-about-body] { animation: intro-about-in both cubic-bezier(.65, 0, .35, 1); animation-timeline: --intro; animation-range: contain 14% contain 31.8%; }
    .intro .fill-word { animation: intro-lit both linear; animation-timeline: --intro; animation-range: contain calc(33.1% + var(--along, 0) * 24.2%) contain calc(37.5% + var(--along, 0) * 24.2%); }
    [data-rise] { animation: rise-in both linear; animation-timeline: view(); animation-range: cover 15vh cover 60vh; }
  }
  /* Phones: "night to day" as a sunrise curtain: the cream layer slides up over the blue with a soft edge.
     Transform only (no half-opacity cream-over-blue, which read as a muddy, washed-out frame on iPhone). */
  @media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
    .intro__layer--about {
      top: -140px; padding-top: calc(40px + 140px); opacity: 1;
      background: linear-gradient(to bottom, rgba(234, 227, 199, 0), var(--paper) 140px);
      animation-name: intro-curtain; animation-timing-function: cubic-bezier(.3, 0, .2, 1); animation-range: contain 0% contain 42%;
      will-change: transform;
    }
    .intro__layer--about.grain::after { top: 140px; }
    [data-intro-hero-body] { animation-range: contain 0% contain 34%; }
    .intro .nav, .intro .marquee { animation-range: contain 0% contain 24%; }
    [data-intro-about-body] { animation-range: contain 20% contain 42%; }
    .intro .fill-word { animation-range: contain calc(42% + var(--along, 0) * 16%) contain calc(46% + var(--along, 0) * 16%); }
  }
}
@keyframes intro-curtain { from { transform: translateY(100%); visibility: visible; } to { transform: none; visibility: visible; } }
/* =========================================================
   Reduced motion: no pinning, no loops
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ring__spin, .ring__icon, .marquee__track { animation: none; }
  .ring__icon { transform: translate(-50%, -50%); }
  .intro { height: auto; }
  .intro__stage { position: static; height: auto; overflow: visible; }
  .intro__layer { position: relative; min-height: 100vh; opacity: 1; visibility: visible; }
  .show { height: auto; }
  .method { height: auto; }
  .method__stage { position: relative; height: auto; }
  .playbook * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .method__cards { height: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 0; }
  .mcard { position: relative; left: auto; top: auto; transform: none; opacity: 1; filter: none; width: 100%; height: auto; visibility: visible !important; box-shadow: none; }
}