/* index page */
/* ------------------------------------------------------------------
   SECTION 01: HERO
-------------------------------------------------------------------*/
.hero { padding-top: clamp(190px, 13.56vw, 300px); text-align: center; overflow-x: clip;background:var(--white);}   /* rings (100vh wide) and the full-width card never widen the page on phones */
.hero__title {
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 800;
  display: inline-block;
}
.hero__line { display: block; }
.hero__title.is-split .hero__line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title.is-split .chw { display: inline-block; white-space: nowrap; }
.hero__title.is-split .ch { display: inline-block; will-change: transform, opacity; -webkit-text-fill-color: currentColor; }
.hero__cta { margin-top: clamp(40px, 3.9vw, 75px); position: relative; z-index: 7; }   /* stays above the growing gradient box of section 02 */

.marksharp {
  container-type: inline-size;
  position: relative;
  width: min(921px, var(--container));
  aspect-ratio: 921 / 208.559;
  margin: clamp(70px, 7.24vw, 139px) auto 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  z-index: 5;               /* travels over the portrait */
  will-change: transform;
  /*background: var(--ink);*/   /* fallback while the banner image loads */
}
.marksharp img { position: absolute; top: -17.5%; left: 0; width: 100%; height: 147.2%; max-width: none; object-fit: cover; }
.marksharp__word {
  position: relative;
  font-family: var(--font-glitch);
  font-weight: 800;
  font-size: 15.4cqw;   /* 142px on the 921px banner */
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
	margin-top: -9%
}

/* SECTION 02: portrait on gradient */
.stage {
  /* Where the MARKSHARP bar lands on the portrait (measured from the Figma image) */
  --eye-x: 48.7%;
  --eye-y: 40.7%;
  --eye-w: 42%;
  position: relative;
  width: var(--container);
  margin: clamp(90px, 15.4vw, 260px) auto 0;
}
.stage__bg {
  position: absolute;
  inset: 9.4% 0 0 0;   /* gradient box starts 74px below the portrait top */
  background: linear-gradient(to bottom, var(--white) 0%, var(--amber-20) 50%, var(--teal) 100%);
  opacity: .4;
  border-radius: 20px;   /* same rounding as the film section */
  pointer-events: none;
}
.stage__media {
  position: relative;
  /* width: 100%; */
  width: 57.1%;
  aspect-ratio: 855 / 787;
  margin-inline: auto;
  overflow: hidden;
}

/* focus rings behind the portrait: each ring spins slowly (alternating direction) like a lens barrel;
   on scroll (index.js) they start large and faint and pull in as the goggles land */
.circle__wrp { width: 100vh; height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.circle__wrp .c_w { position: absolute; inset: 0; margin: auto; border-radius: 50%; }   /* centred with margin:auto, not a translate: GSAP owns the transform (scale + mouse drift), so a CSS translate here got cached in px and drifted off-centre after the screen size changed */
.circle__wrp .c_w::before { content: ""; position: absolute; inset: 0; border: 2px dashed var(--grey-350); border-radius: 50%; animation: ring-spin 90s linear infinite; }
.circle__wrp .c_w.c__01 { width: 100%; height: 100%; }
.circle__wrp .c_w.c__02 { width: 75%; height: 75%; }
.circle__wrp .c_w.c__03 { width: 50%; height: 50%; }
.circle__wrp .c_w.c__02::before { animation-duration: 70s; animation-direction: reverse; }
.circle__wrp .c_w.c__03::before { animation-duration: 50s; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .circle__wrp .c_w::before { animation: none; } }
/* side lines are split into letters by index.js for the letter-fade: words never break mid-word */
h3.tt_01 .lw, h3.tt_02 .lw { display: inline-block; white-space: nowrap; }
h3.tt_01 .lt, h3.tt_02 .lt { display: inline-block; will-change: opacity; }
.circle__wrp .c_w { will-change: transform, opacity; }
.stage__media img { position: absolute; top: 0; left: -7.25%; width: 107.83%; height: 112.33%; max-width: none; object-fit: cover; }

h3.tt_01 {
    font-size: var(--fs-statement);
    line-height: 1.123;
    font-weight: 300;
    letter-spacing: -0.03em;
    text-align: left;
    position: absolute;
    top: 30%;
    left: 10%;
}
h3.tt_02 {
    font-size: var(--fs-statement);
    line-height: 1.123;
    font-weight: 300;
    letter-spacing: -0.03em;
    text-align: right;
    position: absolute;
    top: 50%;
    right: 10%;
}


.stage__media img { position: absolute; top: 0; left: -7.25%; width: 107.83%; height: 112.33%; max-width: none; object-fit: cover; }
/* CTA rides the bottom of the viewport, then settles at the bottom of the card */
.stage__cta {
  position: sticky;
  bottom: 32px;
  z-index: 6;
  display: flex;
  justify-content: center;
  margin-top: -82px;
  padding-bottom: 32px;
  pointer-events: none;
}
.stage__cta .btn { pointer-events: auto; }

/* ------------------------------------------------------------------
   SECTION 03: FILM (poster grows 50vw -> 100vw, pins, panel + text reveal)
   Without JS / with reduced motion this is the static Figma layout.
-------------------------------------------------------------------*/
.statement-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.statement-hero.has-cursor { cursor: none; }
.statement-hero__media {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);   /* always centred, whatever width GSAP gives it */
  width: 100%;
  z-index: -1;
  overflow: hidden;
  will-change: width;
}
.statement-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.statement-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(var(--black-rgb), .5); }
.statement-hero__panel {
  width: 41.04%;                    /* 788 / 1920 */
  background: rgba(var(--black-rgb), .54);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  display: flex;
  align-items: center;
  padding: 60px clamp(24px, 6.46vw, 124px);
}
.statement-hero__text {
  max-width: 577px;
  font-size: var(--fs-quote);
  line-height: 1.1;
  font-weight: 700;
}
.statement-hero__text .line { display: block; }
.statement-hero__text .gap { margin-top: 1.1em; }
/* Gradient mask: faint white -> full colour, wiping in reading order */
.reveal {
  --p: 115%;
  --c: var(--white);
  display: inline-block;
  padding-bottom: 0.18em;   /* room for descenders inside the clipped gradient */
  margin-bottom: -0.18em;
  background-image: linear-gradient(90deg, var(--c) calc(var(--p) - 15%), rgba(var(--white-rgb), .2) var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.reveal--teal { --c: var(--teal); }
.reveal--purple { --c: var(--purple); }
.reveal--amber { --c: var(--amber); }
.c-teal { color: var(--teal); }
.c-amber { color: var(--amber); }
.c-purple { color: var(--purple); }

/* Play button that follows the cursor: rotating badge */
.play-cursor {
  position: absolute; top: 0; left: 0; z-index: 4;
  width: 150px; height: 150px; margin: -75px 0 0 -75px; padding: 0; border: 0; border-radius: 50%;
  background: none;
  color: var(--white); display: grid; place-items: center;
  pointer-events: none; opacity: 0; transform: scale(.4);
}
.play-cursor__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: play-spin 12s linear infinite; filter: drop-shadow(0 1px 3px rgba(var(--black-rgb), .55)); }
.play-cursor__ring text { fill: currentColor; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: var(--fs-2xs); font-weight: 400; letter-spacing: .16em; }
.play-cursor__core {
  position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--white); color: var(--black);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(var(--black-rgb), .3);
  transform: scale(.72); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, color .3s;
}
.play-cursor__core svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
/* hover: the core grows (and the text spins a little faster) */
.play-cursor.is-on .play-cursor__core { transform: scale(1.3); }
.play-cursor.is-on .play-cursor__ring { animation-duration: 8s; }
.play-cursor.is-pressed .play-cursor__core { transform: scale(1.1); background: var(--purple); color: var(--white); }
@keyframes play-spin { to { transform: rotate(360deg); } }
.play-cursor:focus-visible { opacity: 1; transform: none; top: 50%; left: 30%; }
.play-cursor:focus-visible .play-cursor__core { transform: scale(1); }
@media (hover: none), (pointer: coarse) {
  .play-cursor { opacity: 1; transform: none; top: 34%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: auto; }
  .play-cursor__core { width: 52px; height: 52px; transform: scale(1); }
  .play-cursor__core svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .play-cursor__ring { animation: none; } }

/* Film popup */
.film {
  width: min(1280px, 92vw);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--black);
  overflow: visible;
}
.film::backdrop { background: rgba(var(--black-rgb), .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.film[open] { animation: film-in .35s ease both; }
@keyframes film-in { from { opacity: 0; transform: scale(.94); } }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--black); object-fit: cover; }
.film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--black); }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__close {
  position: absolute;
  top: -58px; right: 0;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: var(--fs-lead); line-height: 1;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   SECTION 04: MANIFESTO
-------------------------------------------------------------------*/
.manifesto {
  position: relative;
  z-index: 2;
  background: transparent;   /* the page colour behind it turns purple (index.js) */
  padding-block: clamp(90px, 7.9vw, 152px) 0;
}
/* pinned + scroll-driven when JS/GSAP is active */
.manifesto.is-pinned {
  min-height: 100vh;
  padding-block: 0;
  display: flex;
  align-items: center;
}
/* manifesto sits on the purple page: text colours live here (index.js animates between them) */
:root {
  --mf-dim: rgba(var(--white-rgb), .32);   /* words before they are revealed */
  --mf-text: var(--white);                  /* revealed words */
  --mf-name-1: var(--amber);                /* 'Advanced Marketing Mindset and Entrepreneurship (AMME)' */
  --mf-name-2: var(--teal-40);              /* 'Creators and Marketers School' */
}
.manifesto__copy.grad-text { background-image: none; -webkit-text-fill-color: var(--mf-text); color: var(--mf-text); }
.manifesto .w {
  display: inline;
  will-change: opacity, transform;
  -webkit-text-fill-color: var(--mf-text);
  color: var(--mf-text);
}
/* animated mode: colour is driven by GSAP; words and the two names can move */
.manifesto.is-pinned .w { display: inline-block; -webkit-text-fill-color: currentColor; color: inherit; }
.manifesto.is-pinned .c-purple, .manifesto.is-pinned .c-teal { display: inline-block; -webkit-text-fill-color: currentColor; white-space: nowrap; will-change: transform; }
.manifesto__copy {
  display: flex;
  flex-direction: column;
  gap: 0.75em;                      /* clear breaks between the short paragraphs */
  font-size: var(--fs-statement);
  line-height: 1.3;                 /* more breathing room between lines (was 1.123) */
  font-weight: 400;                 /* a touch heavier for readability (was 300) */
  letter-spacing: -0.01em;          /* slightly more open for clearer letters (was -0.03em) */
}
.manifesto__copy strong { font-weight: 700; }
/* base colours of the two names on the purple page (the global .c-purple is purple = invisible here); GSAP takes over when it runs */
.manifesto .c-purple { color: var(--mf-name-1); }
.manifesto .c-teal { color: var(--mf-name-2); }
.manifesto__copy .c-purple { -webkit-text-fill-color: var(--mf-name-1); }
.manifesto__copy .c-teal   { -webkit-text-fill-color: var(--mf-name-2); }
/* once split for the animation, the name words start plain like everything else; GSAP bolds and colours them at the end */
.manifesto__copy .c-purple .w, .manifesto__copy .c-teal .w { background-image: none; -webkit-text-fill-color: var(--mf-text); font-weight: 400; display: inline-block; }
/* animated mode: the two names inherit the colour and weight GSAP puts on their <strong> (grey/300 -> colour/700) */
.manifesto.is-pinned .c-purple .w, .manifesto.is-pinned .c-teal .w { -webkit-text-fill-color: currentColor; color: inherit; font-weight: inherit; }

/* ------------------------------------------------------------------
   SECTION 05: SCATTERED CONCEPTS
-------------------------------------------------------------------*/
.concepts {
	color:var(--white);
  position: relative;
  z-index: 2;
  background: transparent;   /* the page colour behind it turns amber (index.js) */
  padding-block: clamp(110px, 17.3vw, 332px) clamp(110px, 15vw, 288px);
}
.concepts.is-pinned {
  min-height: 100vh;
  padding-block: 0;
  display: flex;
  align-items: center;
}
.concepts.is-pinned .container { width: var(--container); }
.concepts.is-pinned .bento { background: transparent; }        /* animated in by GSAP */
.concepts.is-pinned .bento__tile { will-change: transform; box-shadow: 0 12px 30px rgba(var(--black-rgb), .08); }
.concepts .w {
  display: inline;
  will-change: opacity;
}
.concepts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.bento {
  width: 352px;
  max-width: 100%;
  height: 465px;
  margin-inline: auto;
  padding: 10px;
  border-radius: 20px;
  background: var(--cream);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.bento__tile {
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.1;
  padding: 8px;
  transition: transform .25s ease;
}
.bento__tile:hover { transform: scale(1.03); }
.bento__tile--wide { grid-column: 1 / span 2; }
.bento__tile--amber  { background: var(--amber);  color: var(--white);   font-size: var(--fs-xl); white-space: nowrap; }
.bento__tile--teal   { background: var(--teal);   color: var(--white); }
.bento__tile--purple { background: var(--purple); color: var(--white); }
.bento__tile--ink    { background: var(--ink);    color: var(--white); font-size: var(--fs-h3); }
.bento__tile--white  { background: var(--white);  color: var(--ink);   font-size: var(--fs-quote); }

.concepts__text { display: flex; flex-direction: column; gap: 30px; max-width: 659px; justify-self: center; }
.concepts__text h2 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.concepts__text p { font-size: var(--fs-lead); }
.concepts__text p + p { margin-top: 1.25em; }
.concepts__tag { font-weight: 700; color: var(--amber); }

/* ------------------------------------------------------------------
   SECTION 06: PHASES
-------------------------------------------------------------------*/
.phases .phases{
  position: relative;
  isolation: isolate;
  padding-block: clamp(90px, 8.2vw, 157px) clamp(80px, 7vw, 135px);
  color: var(--white);
}
.phase__card{/* background: url("phase-card-bg.webp") repeat center center !important; */}
.phase__card .middle_text_align{gap: 30px;display: flex;flex-direction: column;height: 100%;justify-content: center;}

.phases.is-pinned {
  min-height: 100vh;
  padding-block: 0;
  display: flex;
  align-items: center;
}
.phases.is-pinned > .container { transform-origin: 50% 50%; }   /* scaled to fit the viewport by JS */
.phases.is-pinned .phase { will-change: transform; box-shadow: 0 30px 60px rgba(var(--black-rgb), .35); }
.phases.is-pinned .phase__card { box-shadow: 0 10px 24px rgba(var(--black-rgb), .10);}
.phases.is-pinned .timeline__item { will-change: transform, opacity; }
/* title words carry their own light gradient so they can fade independently */
.phases.is-pinned .phases__title .w, .phases.is-split .phases__title .w {
  display: inline;
  background-image: linear-gradient(to right, var(--white), var(--grey-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: transform, opacity;
}
/* fixed-attachment background: the image is the size of the viewport and JS keeps it pinned to the viewport
   while the section scrolls over it (real position:fixed can't be used inside a pinned/transformed section) */
.phases__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.phases__bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; will-change: transform; }
.phases__bg img { width: 100%; height: 100%; object-fit: cover; }
.phases__bg::after { content: ""; position: absolute; inset: 0; background: rgba(var(--black-rgb), .4); }

.phases__title {
  text-align: center;
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.phases__title strong { font-weight: 700; }
.phases__title .line { display: block; }

.phases__row {
  position: relative;
  margin-top: clamp(50px, 4.6vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 440px));
  justify-content: space-between;
  gap: 24px;
}
/* Connector arrows run behind the cards and show in the gaps only */
.phases__arrows {
  position: absolute;
  z-index: 0;
  left: 29.37%;          /* 440 / 1498 */
  width: 39.52%;         /* 592 / 1498 */
  top: 390px;
  height: 22px;
  transform: rotate(-0.58deg);
  pointer-events: none;
}
.phases__arrows img { width: 100.25%; height: 100%; max-width: none; }

.phase {
  position: relative;
  z-index: 1;
  min-height: 600px;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.phase--1 { background: var(--amber); }
.phase--2 { background: var(--teal); }
.phase--3 { background: var(--purple); }
.phase__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--white); }
.phase__head h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.phase__head span { font-size: var(--fs-md); white-space: nowrap; }
.phase__body { flex: 1 0 0; display: flex; flex-direction: column; gap: 25px; min-height: 0; }
.phase__card {
  flex: 1 0 0;
  background: var(--white);
  color: var(--black);
  border-radius: 15px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.phase__card h4 { margin: 0; font-size: var(--fs-lead); line-height: 40px; font-weight: 400; }
.phase__card p { font-size: var(--fs-body); }
.phase__or { text-align: center; font-size: var(--fs-h3); line-height: 40px; color: var(--white);box-shadow:none !important; }
.phase__stack { display: flex; flex-direction: column; gap: 40px; }
.phase__stack b { display: block; font-weight: 700; }
/* Phase 1: the CMS emblem pressed into the card like embossed paper (fills the empty middle of the card).
   The filter lives on the wrapper so the highlight and shadow sit outside the masked shape. */
.phase__emboss {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  /*filter: drop-shadow(-2px -2px 1px rgba(255, 255, 255, 1)) drop-shadow(3px 4px 4px rgba(var(--black-rgb), .13)) drop-shadow(1px 1px 0 rgba(var(--black-rgb), .06));*/
  display: none;
  }
.phase__emboss i { display: block; height: min(100%, 230px); max-width: 70%; aspect-ratio: 358 / 375;
  background: linear-gradient(145deg, #ffffff 0%, #f3f1ee 45%, #e9e5df 100%);
  -webkit-mask: url("../../assets/img/logo-emblem-cms.png") center / contain no-repeat; mask: url("../../assets/img/logo-emblem-cms.png") center / contain no-repeat; }

.timeline {
  margin-top: 35px;
  display: grid;
  grid-template-columns: 247px minmax(0, 1fr);
  gap: clamp(16px, 2.24vw, 43px);
}
.timeline__item {
	color:var(--white);
  background: rgba(var(--black-rgb), .8);
  border-radius: 15px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.timeline__label { white-space: nowrap; }
.timeline__label small { display: block; font-size: var(--fs-sm); letter-spacing: -0.03em; margin-bottom: 7px; }
.timeline__label span { display: block; font-size: var(--fs-lead); letter-spacing: -0.03em; }
.timeline__item p { font-size: var(--fs-body); max-width: 961px; }

/* ------------------------------------------------------------------
   SECTION 07: COMPARE
-------------------------------------------------------------------*/
.compare { padding-top: clamp(90px, 8.3vw, 130px);padding-bottom: clamp(90px, 8.3vw, 130px); position: relative; z-index: 2; background: var(--white); }
.compare.is-pinned {
  min-height: 100vh;
  padding-top: 0;
  display: flex;
  align-items: center;
}
.compare.is-pinned > .container { transform-origin: 50% 50%; }
.compare__box .compare__row { overflow: hidden; }
.compare__box .compare__row > * { will-change: transform, opacity; }
.compare__highlight { will-change: transform; }
.compare__table { overflow: hidden; }          /* clips the column while it slides in from above */
.compare__row--head { overflow: hidden; }
.compare__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.compare__title.is-split .w {
  display: inline;
  background-image: linear-gradient(to right, var(--black), var(--grey-650));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: transform, opacity;
}
.compare__scroll {
  margin-top: clamp(40px, 4.4vw, 85px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare__table {
  --pad: 44px;
  --gap: 40px;
  --col: calc((100% - (var(--pad) * 2) - (var(--gap) * 4)) / 5);
  position: relative;
  min-width: 1180px;
  padding: 35px 0 90px;    /* room for the highlight column above and below the box */
}
/* AMME highlight column */
.compare__highlight {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pad) + var(--col) + var(--gap) - 20px);
  width: calc(var(--col) + 32px);
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--purple), var(--purple-deep));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 21px;
}
.compare__highlight .btn { width: min(241px, 90%); padding-inline: 12px; position: relative; z-index: 3; }

.compare__box {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
}
/* vertical dividers between MESA | LIT School | MBA */
.compare__box::before,
.compare__box::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.compare__box::before { left: calc(var(--pad) + (var(--col) + var(--gap)) * 3 - 22px); }
.compare__box::after  { left: calc(var(--pad) + (var(--col) + var(--gap)) * 4 - 22px); }

.compare__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  min-height: 90px;
  padding: 10px var(--pad);
  font-size: var(--fs-body);
}
.compare__box .compare__row + .compare__row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  z-index: -1;
}
.compare__row > :first-child { font-weight: 700; }
.compare__row > :nth-child(2) { color: var(--white); }
.compare__row--head { font-size: var(--fs-lead); font-weight: 700; }
.compare__row--head > :nth-child(3) { color: var(--teal); }
.compare__row--head > :nth-child(4) { color: var(--amber); }
.compare__row--head > :nth-child(5) { color: var(--purple); }
.price { display: block; font-size: var(--fs-xl); line-height: 1.2; }
.price--hero { display: inline; font-size: var(--fs-quote); font-weight: 700; }
.price-note { font-size: var(--fs-xs); }

/* ------------------------------------------------------------------
   SECTION 08: KNOW THE MARKET
-------------------------------------------------------------------*/
.market {
  /*margin-top: clamp(80px, 6.7vw, 129px);*/
  background: var(--ink);
  color: var(--white);
  min-height: min(586px, 46vw);
  display: flex;
  align-items: center;
  padding-block: 90px;
}
.market__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 685px));
  justify-content: space-between;
  gap: 40px;
}
.market__col {
  border-top: 1px solid var(--white);
  padding-top: 80px;
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.market__col strong { font-weight: 700; }
.market__col .line { display: block; }
.market__col { position: relative; }
.market__line { margin: 0; }
.market__line:not(:first-child) { display: none; }          /* static fallback shows the first pair */
.market.is-pinned .market__col { min-height: 2.1em; }
.market.is-pinned .market__line { display: block; position: absolute; left: 0; right: 0; top: 80px; will-change: transform, opacity; }
.market.is-pinned .market__line:first-child { position: relative; top: 0; }   /* keeps the column height */

/* ------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------*/
@media (max-width: 1180px) {
  .phases__row { grid-template-columns: 1fr; }
  .phases__arrows { display: none; }
  .phase { min-height: 0; }
  /* stacked cards size to their content (the desktop flex: 1 0 0 relies on the 600px min-height) */
  .phase__body, .phase__card { flex: none; }
  .phase__card { gap: 60px; }
  .phase--2 .phase__card { gap: 24px; }
  .phase__emboss { flex: none; height: 160px; }
}

@media (max-width: 900px) {
  .stage__media { width: 88%; }
  /* focus rings: sized to the screen width (100vh rings were far bigger than a phone, so they ran off-screen) */
  .circle__wrp { width: 118vw; height: 118vw; }
  /* side lines: smaller, and placed in the clear space above the head instead of over the face */
  h3.tt_01, h3.tt_02 { font-size: clamp(19px, 5.2vw, 30px); line-height: 1.1; z-index: 3; }
  h3.tt_01 { top: 3%; left: 0; }
  h3.tt_02 { top: 3%; right: 0; }
  /* on phones the stage is short, so the button sits below the portrait instead of riding the viewport */
  .stage__cta { position: static; margin-top: 8px; padding-bottom: 28px; }
  .statement-hero { align-items: flex-end; }
  .statement-hero__panel { width: 100%; padding: 48px 20px; }
  .concepts__grid { grid-template-columns: 1fr; gap: 60px; }
  .concepts__text { justify-self: start; }
  .concepts { padding-block: 90px; overflow: hidden; }
  /* scattered tiles must not widen the page */
  .marksharp__word { font-size: 14cqw; }
  .bento { width: min(340px, 100%); height: auto; aspect-ratio: 340 / 380; gap: 12px; margin-top: 30px; }
  .bento__tile { font-size: 22px; font-weight: 600; }
  .bento__tile--amber { font-size: 22px; }
  .bento__tile--ink { font-size: 24px; }
  .bento__tile--white { font-size: 26px; }
  .bento__tile { box-shadow: 0 12px 30px rgba(var(--black-rgb), .08); }
  .phases { padding-block: 80px 60px; }
  .phases__row { gap: 20px; }
  .phase { will-change: transform; }
  .phase__card h4 { line-height: 1.25; }
  .manifesto.is-pinned { padding-block: 60px; }
  /* the two names must wrap on narrow screens (no centring slide on mobile) */
  .manifesto.is-pinned .c-purple, .manifesto.is-pinned .c-teal { display: inline; white-space: normal; }
  .compare__row--head { font-size: var(--fs-md); }
  .market { padding-block: 70px; min-height: 0; }
  .market__col { min-height: 2.2em; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { flex-direction: column; align-items: flex-start; gap: 16px; }
  .market__grid { grid-template-columns: 1fr; gap: 44px; }
  .market__col { padding-top: 28px; font-size: clamp(34px, 9.4vw, 48px); line-height: 1.05; }
  /* the swapping lines sit exactly where the first pair sits (desktop uses 80px) */
  .market.is-pinned .market__line { top: 28px; }
}

/* ------------------------------------------------------------------
   PAGE COLOUR: the body turns purple when the manifesto's top reaches the middle of the screen,
   black when the concepts section's top does (classes set by index.js; white again scrolling back up)
-------------------------------------------------------------------*/
body { transition: background-color .7s ease; }
body.is-bg-purple { background-color: var(--purple); }
body.is-bg-black  { background-color: var(--black); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ------------------------------------------------------------------
   COMPARE: info icons in the AMME column + their tooltip (the tooltip is one element added to <body> by index.js,
   so the table's clipped rows never cut it off)
-------------------------------------------------------------------*/
.info-tip {
  display: inline-grid; place-items: center; vertical-align: middle; flex: none;
  width: 1.35em; height: 1.35em; margin-left: .35em; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--purple-deep); cursor: help; font-size: .72em;
  transition: transform .2s ease, color .2s ease;
}
.info-tip svg { width: 100%; height: 100%; fill: currentColor; }
.info-tip:hover, .info-tip[aria-expanded="true"] { transform: scale(1.15); color: var(--ink); }
.info-tip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.tip-bubble {
  position: fixed; left: 0; top: 0; z-index: 9500; max-width: min(280px, calc(100vw - 32px));
  padding: 12px 14px; border-radius: 10px; background: var(--ink); color: var(--white);
  font-family: var(--font-book); font-size: var(--fs-xs); line-height: 1.45; text-align: left;
  box-shadow: 0 14px 40px rgba(var(--black-rgb), .25);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.tip-bubble.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
/* little arrow pointing at the icon (flips when the bubble sits below it) */
.tip-bubble::after { content: ""; position: absolute; left: var(--arrow-x, 50%); top: 100%; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; background: var(--ink); transform: rotate(45deg); }
.tip-bubble.is-below::after { top: 0; }
@media (prefers-reduced-motion: reduce) { .tip-bubble, .tip-bubble.is-on { transition: none; transform: none; } }

/* comparison table: disclaimer under the table */
.compare__disclaimer { max-width: 900px; margin: clamp(28px, 2.6vw, 44px) auto 0; text-align: center; font-family: var(--font-book); font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-60); }
.compare__disclaimer b { font-family: var(--font); font-weight: 700; color: var(--ink-80); }

/* Phases accordion (phones/tablets; built by index.js, class .is-acc) */
.phases.is-acc .phase { gap: 0; }
.phases.is-acc .phase__head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.phases.is-acc .phase__head::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; margin-left: 10px;
  background: rgba(var(--white-rgb), .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .35s ease, background-color .25s ease;
}
.phases.is-acc .phase.is-open .phase__head::after { transform: rotate(45deg); background-color: rgba(var(--white-rgb), .35); }
.phases.is-acc .phase__head span { margin-left: auto; }
.phases.is-acc .phase__head:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 6px; }
.phases.is-acc .phase__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.phases.is-acc .phase.is-open .phase__panel { grid-template-rows: 1fr; }
.phases.is-acc .phase__panel-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.phases.is-acc .phase.is-open .phase__panel-in { padding-top: 20px; }
@media (prefers-reduced-motion: reduce) { .phases.is-acc .phase__panel, .phases.is-acc .phase__head::after { transition: none; } }

/* manifesto end state on phones: the two names, centred (built by index.js; absolutely placed so layout never shifts) */
.manifesto__final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 0 20px; text-align: center; pointer-events: none; font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.manifesto__final .mf-n1 { color: var(--mf-name-1); }
.manifesto__final .mf-n2 { color: var(--mf-name-2); }

/* ------------------------------------------------------------------
   COMPARE on phones/tablets: "AMME vs one at a time" (built by index.js)
-------------------------------------------------------------------*/
.cmpm { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .compare__scroll { display: none; }
  .compare__title { margin-bottom: 32px; }   /* room between "Compare" and the switch */
  .cmpm { display: block; max-width: 560px; margin-inline: auto; }
  .cmpm__switch { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--grey-100); margin-bottom: 24px; }
  .cmpm__switch button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 11px 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-60); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .cmpm__switch button.is-on { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(var(--black-rgb), .08); }
  .cmpm__head { position: sticky; top: 76px; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 6px; background: var(--white); }
  .cmpm__head > div { text-align: center; font-weight: 800; font-size: 16px; padding: 11px 8px; border-radius: 12px 12px 0 0; }
  .cmpm__head .cmpm__amme { background: var(--purple); color: var(--white); }
  .cmpm__head .cmpm__them { background: var(--grey-100); color: var(--ink); }
  .cmpm__k { margin: 24px 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
  .cmpm__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cmpm__pair > div { border-radius: 12px; padding: 13px 12px; font-size: 14px; line-height: 1.4; }
  .cmpm__pair .cmpm__amme { background: rgba(var(--purple-rgb), .08); border: 1.5px solid var(--purple); color: var(--purple); font-weight: 700; }
  .cmpm__pair .cmpm__amme small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--ink-80); }
  .cmpm__pair .cmpm__them { background: var(--grey-100); color: var(--ink); }
  .cmpm__row--price .price { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
  .cmpm__row--price .price--hero { font-size: 30px; }
  .cmpm__row--price .price-note { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .85; }
  .cmpm__row--price .cmpm__amme .price-note { display: inline; margin-left: 4px; }
  .cmpm__cta { display: flex; width: 100%; margin-top: 24px; }
}