/* HOME — launch-page grammar: hero prism, marquee, trap, engines, film, who, report, close */
.ink-spectrum, .hx__ink {
  background: linear-gradient(90deg, var(--e1-ink), #8a1fb0 42%, var(--e6-ink) 78%, var(--e5-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- HERO ---------- */
/* metric-matched fallback so the Inter swap does not re-flow the hero (CLS) or re-report the LCP paragraph */
@font-face { font-family: "F6 Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; font-display: swap; }
@font-face { font-family: "F6 Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 500 800; size-adjust: 90.9%; font-display: swap; }
.hx { --font-body: "Inter", "F6 Inter Fallback", sans-serif; --font-display: "Bricolage Grotesque", "F6 Display Fallback", sans-serif; }
.hx__copy { font-family: var(--font-body); }
/* labels wait for page.js to place them on the rays (no-JS fallback in content.html) */
.prism__labels { visibility: hidden; }
.prism__labels.is-on { visibility: visible; }
.prism__labels.is-on li:nth-child(n) { top: 0; left: 0; }
.hx { position: relative; padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 6vw, 88px); overflow: hidden;
  background:
    radial-gradient(60% 50% at 85% 30%, rgba(122, 77, 255, .08), transparent 70%),
    radial-gradient(40% 40% at 70% 80%, rgba(30, 123, 255, .06), transparent 70%),
    linear-gradient(180deg, #fafbfd, #f4f6fb);
}
.hx::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 75%); }
.hx__grid { position: relative; z-index: 1; display: grid; gap: 8px; }
.hx__title { font-size: clamp(38px, 12vw, 128px); margin: 0 0 24px; }
.hx__line { white-space: nowrap; }
.hx__line { display: block; padding-bottom: .06em; margin-bottom: -.06em; }
.hx__w { display: inline-block; will-change: transform; }
.hx__lead { margin-bottom: 28px; }
.hx__lead em { font-style: normal; color: var(--ink-statement); font-weight: 600; }
.hx__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hx__ctas .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hx__ctas .btn { flex: 0 0 auto; } }

.hx__prism { position: relative; margin: 8px 0 0; }
.prism { width: 100%; height: auto; overflow: visible; }
.prism__body { transform-origin: 270px 300px; transform-box: view-box; }
.prism__labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.prism__labels li { position: absolute; left: 73%; transform: translateY(-50%); white-space: nowrap;
  font: 600 13px/1 var(--font-body); color: var(--e-ink); display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .86); padding: 6px 9px 6px 7px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 6px 16px -10px rgba(11, 11, 20, .3); }
.prism__labels li b { font: 700 11px/1 var(--font-body); color: #fff; background: var(--e-ink); border-radius: 999px; padding: 3px 5px; letter-spacing: .02em; }
/* static fallback label positions (page.js refines them) */
.prism__labels li:nth-child(1) { top: 20%; } .prism__labels li:nth-child(2) { top: 32%; }
.prism__labels li:nth-child(3) { top: 44%; } .prism__labels li:nth-child(4) { top: 56%; }
.prism__labels li:nth-child(5) { top: 68%; } .prism__labels li:nth-child(6) { top: 80%; }
.hx__cap { text-align: center; margin: -8px 0 0; padding-right: 10%; letter-spacing: .01em; }
@media (min-width: 640px) { .prism__labels li { font-size: 15px; padding: 7px 12px 7px 8px; } .prism__labels li b { font-size: 12px; } }
@media (min-width: 1024px) {
  .hx { padding-top: 40px; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
  .hx__grid { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; }
  .hx__title { font-size: clamp(60px, 6.1vw, 96px); }
  .hx__line { white-space: nowrap; }
  .hx__prism { margin: 0 -24px 0 0; }
}

/* ---------- MARQUEE ---------- */
.mq { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; position: relative; }
.mq::before, .mq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.mq::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.mq::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
.mq__track { display: flex; width: max-content; animation: mq 60s linear infinite; }
.mq:hover .mq__track { animation-play-state: paused; }
.mq__list { list-style: none; display: flex; margin: 0; padding: 22px 0; }
.mq__list li { display: flex; align-items: center; gap: 14px; padding: 0 28px; white-space: nowrap;
  font: 600 clamp(20px, 2.6vw, 30px)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink-statement); }
.mq__list li::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--e); }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; width: auto; }
  .mq__list { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-inline: var(--gutter); }
  .mq__list li { font-size: 18px; padding: 0 14px; }
  .mq__list[aria-hidden] { display: none; }
}

/* ---------- WHY FAME6 (trap): copy + film, then two truths and the Fame6 way ---------- */
/* the head is centred and the film sits under it in a glass tray (it also keeps the film well below the fold, so nothing is fetched at load) */
.trap__head { display: grid; gap: clamp(32px, 4vw, 52px); margin-bottom: clamp(48px, 6vw, 80px); }
.trap__copy { display: grid; justify-items: center; text-align: center; }
.trap__title { margin-bottom: 20px; }
.trap__title span { display: block; }
.trap__b { color: var(--ink-note); }
.trap__lead { margin: 0; max-width: 40ch; }
.trap__film .f6-film--wide { max-width: 920px; }
.trap__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .trap__grid { grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; } }
.trap__card { position: relative; padding: 28px 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.trap__card h3 { margin-bottom: 14px; }
.trap__card p { margin-bottom: 16px; }
.trap__tag { font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); margin-bottom: 18px !important; }
.trap__result { margin-top: auto; margin-bottom: 0 !important; padding-top: 16px; border-top: 1px dashed var(--line-strong); color: var(--ink-intro); font-size: 15px; }
.trap__result span { display: block; font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-note); margin-bottom: 8px; }
.trap__card--win { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; border: 2px solid transparent; box-shadow: var(--shadow-lg); }
.trap__card--win .trap__tag, .trap__card--win .trap__result span { color: var(--e6-ink); }

/* ---------- ENGINES ---------- */
.eng__head { display: grid; gap: clamp(28px, 4vw, 40px); margin-bottom: clamp(40px, 5vw, 64px); }
.eng__copy .h-1 { margin-bottom: 20px; }
.eng__copy .lead { margin: 0; max-width: 40ch; }
@media (min-width: 1024px) {
  .eng__head { grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
  .eng__film { order: -1; }
}
.eng__grid { display: grid; gap: 14px; perspective: 1200px; }
@media (min-width: 680px) { .eng__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .eng__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.eng__card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.eng__card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--e); }
.eng__card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--e), transparent 65%); opacity: .14; transition: opacity .35s, transform .5s var(--ease); }
.eng__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, var(--e-tint), var(--surface) 60%); }
.eng__card:hover::after { opacity: .26; transform: scale(1.2); }
.eng__num { font: 800 54px/1 var(--font-display); letter-spacing: -.05em; color: var(--e-ink); margin-bottom: 18px; }
.eng__card h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 8px; }
.eng__what { color: var(--ink-intro); font-weight: 500; }
.eng__card ul { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.45; }
.eng__card li { position: relative; padding-left: 20px; }
.eng__card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--e); }
.eng__go { margin-top: auto; font-weight: 600; color: var(--e-ink); display: inline-flex; gap: 8px; }
.eng__go::after { content: "→"; transition: transform .25s var(--ease); }
.eng__card:hover .eng__go::after { transform: translateX(4px); }
.eng__more { margin: 40px 0 0; text-align: center; }

/* ---------- FILM ---------- */
.film__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.film__head .lead { margin: 18px auto 0; }
.film__frame { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; background: #0e0f1a; box-shadow: var(--shadow-lg);
  outline: 1px solid rgba(11, 11, 20, .08); outline-offset: -1px; }
.film__frame::before { content: ""; position: absolute; inset: -2px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px;
  background: var(--spectrum); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.film__poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: radial-gradient(70% 90% at 50% 50%, #ffffff 0%, #eef1f8 55%, #e3e8f3 100%); }
.film__bands { position: absolute; inset: 0; opacity: .5;
  background: conic-gradient(from 200deg at 22% 50%, transparent 0deg, rgba(255, 61, 110, .35) 8deg, rgba(255, 122, 26, .35) 16deg, rgba(245, 184, 0, .35) 24deg, rgba(18, 184, 134, .35) 32deg, rgba(30, 123, 255, .35) 40deg, rgba(122, 77, 255, .35) 48deg, transparent 56deg); }
.film__mark { position: relative; font: 800 clamp(40px, 9vw, 120px)/1 var(--font-display); letter-spacing: -.05em; color: var(--ink-statement); }
.film__mark b { font-weight: 800; color: var(--e6-ink); }
.film__sub { position: relative; font: 600 clamp(14px, 1.6vw, 20px)/1.3 var(--font-body); color: var(--ink-intro); }
.film__video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: transparent; }

/* ---------- REPORT ---------- */
.rep__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .rep__grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } }
@media (min-width: 960px) and (min-height: 880px) { .rep__head { position: sticky; top: calc(var(--header-h) + 32px); } }
.rep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rep__item { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.rep__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--e); }
.rep__n { font: 800 22px/1 var(--font-display); color: var(--e-ink); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--e-tint); }
.rep__item h3 { margin: 4px 0 8px; }
.rep__item p { margin: 0; }

/* ---------- CLOSE ---------- */
.close { padding: 0 0 var(--section-y); }
.close__band { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, #ffffff, #f1f3fa); border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px); }
.close__rays { position: absolute; right: 0; top: 0; width: 70%; height: 100%; opacity: .16; }
.close__in { position: relative; max-width: 680px; }
.close__steps { position: relative; list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.close__steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--r); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(11, 11, 20, .45); color: var(--ink-intro); font-size: 16px; line-height: 1.5; }
.close__steps b { color: var(--ink-statement); font-weight: 650; }
.close__steps span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 800 17px/1 var(--font-display); color: #fff; background: var(--e-ink); }
@media (min-width: 1024px) { .close__band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .close__steps { margin: 0; } }
.close__in h2 { margin-bottom: 20px; max-width: 14ch; }
.close__in .lead { margin-bottom: 28px; }
@media (max-width: 640px) { .close__rays { width: 100%; opacity: .1; } }

/* mobile: shift the prism left so the six labels never clip */
@media (max-width: 639px) {
  .hx__prism { margin-left: -16%; margin-right: 2%; }
  .hx__cap { margin-left: 16%; }
  .film__sub { display: none; }
}

/* report: the film under the head; how it is measured */
.rep__film { margin-top: clamp(28px, 3vw, 40px); }
.rep__how { margin: 12px 0 0; padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink-intro); font-size: 15.5px; line-height: 1.55; }
.rep__how b { color: var(--ink-statement); }

/* ---------- STRAIGHT ANSWERS ---------- */
.qa__top { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 960px) { .qa__top { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.qa__lead { margin: 0; }
.qa__head .h-1 { max-width: 20ch; }
.qa__grid { display: grid; gap: 14px; }
@media (min-width: 680px) { .qa__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .qa__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.qa__card { position: relative; padding: 26px 24px 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.qa__card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--e); }
.qa__card h3 { font-size: clamp(21px, 2vw, 25px); margin-bottom: 10px; color: var(--ink-statement); }
.qa__card h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 2px; transform: rotate(45deg) translateY(-2px); background: var(--e); }
.qa__card p { margin: 0; color: var(--ink-body); }
.qa__more { margin: 32px 0 0; text-align: center; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; }


/* =====================================================================
   v4 — art-direction pass (craft layer; overrides the v3 rules above)
   ===================================================================== */

/* CTA: button-in-button arrow, press feedback */
.btn--ico { padding-right: 8px; gap: 14px; }
.btn__ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform .45s cubic-bezier(.32, .72, 0, 1), background .3s; }
.btn--ico:hover .btn__ico { transform: translateX(3px) scale(1.06); background: rgba(255, 255, 255, .26); }
.hx .btn:active, .close .btn:active { transform: translateY(0) scale(.98); }

/* ---------- ENGINES: machined double-bezel cards ---------- */
.eng__grid { gap: 16px; }
@media (min-width: 1080px) { .eng__grid { gap: 20px; } }
.eng__card { padding: 30px 28px 22px; border-radius: 28px; border: 6px solid rgba(255, 255, 255, .72); background: var(--surface) padding-box;
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .055), inset 0 0 0 1px rgba(11, 11, 20, .05), 0 1px 2px rgba(11, 11, 20, .03), 0 34px 60px -42px rgba(40, 30, 90, .38);
  transition: transform .6s cubic-bezier(.32, .72, 0, 1), box-shadow .6s cubic-bezier(.32, .72, 0, 1); }
.eng__card::before { left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, var(--e-tint), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .5s var(--ease); }
.eng__card::after { right: -90px; top: -90px; width: 240px; height: 240px; opacity: .1; }
.eng__card:hover { transform: translateY(-6px); background: var(--surface) padding-box;
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .07), inset 0 0 0 1px rgba(11, 11, 20, .05), 0 2px 4px rgba(11, 11, 20, .03), 0 48px 80px -44px rgba(40, 30, 90, .5); }
.eng__card:hover::before { opacity: 1; }
.eng__card:hover::after { opacity: .2; transform: scale(1.15); }
.eng__card > * { position: relative; }
.eng__num { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-bottom: 44px;
  font: 700 12px/1 var(--font-body); letter-spacing: .16em; color: var(--e-ink);
  padding: 7px 11px 7px 9px; border-radius: 999px; background: var(--e-tint); box-shadow: inset 0 0 0 1px rgba(11, 11, 20, .04); }
.eng__num::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--e); }
.eng__card h3 { font-size: clamp(30px, 2.9vw, 40px); letter-spacing: -.04em; margin-bottom: 10px; }
.eng__what { font-size: 17px; line-height: 1.45; color: var(--ink-intro); margin-bottom: 20px; max-width: 30ch; }
.eng__card ul { margin: 0 0 28px; gap: 10px; font-size: 15px; color: var(--ink-body); }
.eng__card li { padding-left: 18px; }
.eng__card li::before { width: 6px; height: 6px; top: .62em; }
.eng__go { align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.eng__go::after { content: ""; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--e-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0b14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 20, .06); transition: transform .5s cubic-bezier(.32, .72, 0, 1), background-color .3s; }
.eng__card:hover .eng__go::after { transform: translateX(4px) rotate(-45deg); background-color: #fff; }
.eng__card:focus-visible { outline-offset: 4px; border-radius: 28px; }
.eng__dots { display: none; }

/* mobile: the six engines become a swipeable rail (Apple-style peek) */
@media (max-width: 679px) {
  .eng__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 20px; scrollbar-width: none; perspective: none; }
  .eng__grid::-webkit-scrollbar { display: none; }
  .eng__card { scroll-snap-align: start; padding: 26px 22px 20px; }
  .eng__num { margin-bottom: 32px; }
  .eng__dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .eng__dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line-strong); transition: width .45s cubic-bezier(.32, .72, 0, 1), background .3s; }
  .eng__dots i.is-on { width: 26px; background: var(--e); }
  .eng__more { margin-top: 28px; }
}

/* ---------- FILM: glass plate in a tray ---------- */
.film__shell { padding: clamp(6px, .8vw, 10px); border-radius: calc(clamp(16px, 2vw, 28px) + clamp(6px, .8vw, 10px));
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(236, 239, 246, .9));
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 2px 4px rgba(11, 11, 20, .03), 0 60px 120px -60px rgba(40, 30, 90, .45); }
.film__frame { box-shadow: 0 1px 2px rgba(11, 11, 20, .08); }

/* ---------- one surface language: hairline ring + soft ambient, 24px radius (no coloured edge bars) ---------- */
.trap__card, .qa__card, .rep__item, .rep__how { border: 0; border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 1px 2px rgba(11, 11, 20, .03), 0 30px 60px -46px rgba(40, 30, 90, .32); }
.trap__card { padding: 32px 28px 28px; }
.trap__card--win { border: 2px solid transparent; box-shadow: 0 2px 4px rgba(11, 11, 20, .04), 0 50px 90px -50px rgba(91, 46, 224, .5); }
.trap__tag { display: inline-flex; align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.trap__card--win .trap__tag { background: var(--e6-tint); color: var(--e6-ink); }
.qa__card { padding: 30px 28px 28px; transition: transform .6s cubic-bezier(.32, .72, 0, 1), box-shadow .6s cubic-bezier(.32, .72, 0, 1); }
.qa__card::before { display: none; }
.qa__card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(11, 11, 20, .07), 0 2px 4px rgba(11, 11, 20, .03), 0 40px 70px -46px rgba(40, 30, 90, .42); }
.qa__card h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.qa__card h3::before { flex: none; margin: 0; transform: rotate(45deg) translateY(-3px); width: 9px; height: 9px; }
.rep__item { padding: 26px 28px; gap: 22px; align-items: start; }
.rep__item::before { display: none; }
.rep__n { width: 48px; height: 48px; border-radius: 16px; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(11, 11, 20, .04); }
.rep__list { gap: 14px; }
.rep__how { margin-top: 14px; padding: 18px 22px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(11, 11, 20, .06); }

/* close: steps as quiet glass rows */
.close__steps li { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 24px 40px -32px rgba(40, 30, 90, .4); }
.close__band { border: 0; box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 2px 4px rgba(11, 11, 20, .03), 0 70px 120px -70px rgba(40, 30, 90, .5); }

/* ---------- typographic finish: balanced headings, no widows ---------- */
main h2, main h3 { text-wrap: balance; }
main .lead, .eng__what, .who__intro, .qa__card p, .rep__item p { text-wrap: pretty; }
.trap__title { letter-spacing: -.045em; }
.who__title, .eng__head .h-1, .qa__head .h-1, .rep__head .h-1, .close__in h2 { letter-spacing: -.045em; }

/* film play pill (page.js adds it; the native bar appears only once the film plays) */
.film__play { position: absolute; z-index: 4; left: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 20px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 var(--font-body); color: var(--ink-statement); background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 20px 40px -20px rgba(40, 30, 90, .55);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), box-shadow .5s cubic-bezier(.32, .72, 0, 1), opacity .3s; }
.film__play-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--cta);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.film__play-ico svg { margin-left: 2px; }
.film__play-t { font: 600 13px/1 var(--font-body); color: var(--ink-note); padding-left: 12px; border-left: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
.film__play:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(11, 11, 20, .08), 0 26px 48px -20px rgba(40, 30, 90, .6); }
.film__play:hover .film__play-ico { transform: scale(1.08); }
.film__play:active { transform: scale(.98); }
.film__play:focus-visible { outline-offset: 4px; border-radius: 999px; }
.film__frame.is-playing .film__play { opacity: 0; pointer-events: none; }
@media (max-width: 479px) {
  .film__play { left: 10px; bottom: 10px; min-height: 0; width: 48px; height: 48px; padding: 4px; gap: 0; }
  .film__play-ico { width: 40px; height: 40px; }
  .film__play > span:not(.film__play-ico) { display: none; }
}
@media (max-width: 679px) { .qa__card { padding: 26px 22px 24px; } .trap__card { padding: 28px 22px 24px; } .rep__item { padding: 22px 20px; gap: 16px; } }

/* mobile: the drifting second line (x:60 before it animates in) must not widen the phone layout viewport */
.trap { overflow-x: clip; }

/* =====================================================================
   v5 — section films (shared .f6-film player, base.css) + "Who we build for" as the showpiece
   ===================================================================== */
/* anchors land below the floating header */
main [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
main section[id] { scroll-margin-top: 0; }

/* ---------- WHO: two premium cards, each led by its film ---------- */
.who { overflow: hidden; }
.who::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 15% 35%, rgba(255, 122, 26, .07), transparent 70%), radial-gradient(50% 40% at 85% 65%, rgba(122, 77, 255, .08), transparent 70%); }
.who > .wrap { position: relative; }
.who__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.who__title { max-width: 24ch; margin: 0; letter-spacing: -.045em; }
.who__grid { display: grid; gap: clamp(18px, 2vw, 24px); }
@media (min-width: 1024px) { .who__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.who__card { --wc-pad: clamp(8px, 1vw, 12px); position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--wc-pad);
  border-radius: var(--r-lg); border: 6px solid rgba(255, 255, 255, .72);
  background: radial-gradient(120% 55% at 100% 100%, var(--e-tint), rgba(255, 255, 255, 0) 70%) padding-box, var(--surface) padding-box;
  box-shadow: 0 0 0 1px rgba(11, 11, 20, .055), inset 0 0 0 1px rgba(11, 11, 20, .05), 0 1px 2px rgba(11, 11, 20, .03), 0 50px 90px -56px rgba(40, 30, 90, .45); }
.who__card .f6-film { --ff-r: calc(var(--r-lg) - 6px - var(--wc-pad)); }
.who__card .f6-film__frame { box-shadow: 0 0 0 1px rgba(11, 11, 20, .06), 0 1px 2px rgba(11, 11, 20, .05); }
.who__card .f6-film__cap { margin: 16px var(--wb-x, 24px) 0; }
.who__body { container-type: inline-size; flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px) var(--wb-x) clamp(16px, 2.2vw, 28px); }
.who__card { --wb-x: clamp(16px, 2.6vw, 36px); }
.who__kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 18px; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--e-ink); background: var(--e-tint); box-shadow: inset 0 0 0 1px rgba(11, 11, 20, .04); }
.who__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--e); }
.who__card h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; margin: 0 0 14px; max-width: 18ch; }
.who__intro { margin: 0 0 26px; color: var(--ink-intro); font-size: 17px; line-height: 1.55; max-width: 46ch; }
/* crisp list: a spec sheet of what Fame6 does for this buyer */
.who__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 28px; border-top: 1px solid var(--line); }
.who__list li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font: 550 15.5px/1.35 var(--font-body); letter-spacing: -.005em; color: var(--ink-statement); }
.who__list li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--e-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0b14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 20, .06); }
.who__card--re .who__list li::before { background-color: var(--e2-tint); }
@container (min-width: 440px) { .who__list { grid-template-columns: 1fr 1fr; } }
.who__list .nw { white-space: nowrap; }
.who__cta { margin-top: auto; padding-top: 28px; display: flex; }
.who__cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .who__cta .btn { flex: 0 0 auto; } }

/* ---------- film transcripts (AEO/GEO: every film's narration is on the page as text) ----------
   Quiet by default: one small line under the film; opens to a calm, readable column. */
.f6-transcript { margin: 14px 0 0; font-family: var(--font-body); }
.f6-transcript > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; margin-left: -4px;
  border-radius: 999px; list-style: none; cursor: pointer; user-select: none;
  font: 600 14px/1.2 var(--font-body); letter-spacing: -.005em; color: var(--ink-note);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.f6-transcript > summary::-webkit-details-marker { display: none; }
.f6-transcript > summary::marker { content: ""; }
.f6-transcript__ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-body); transition: box-shadow .2s var(--ease-out), color .2s var(--ease-out); }
.f6-transcript__chev { display: inline-grid; place-items: center; transition: transform .3s var(--ease-out); }
.f6-transcript[open] .f6-transcript__chev { transform: rotate(180deg); }
.f6-transcript > summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus); }
@media (hover: hover) {
  .f6-transcript > summary:hover { color: var(--ink-statement); }
  .f6-transcript > summary:hover .f6-transcript__ico { color: var(--ink-statement); box-shadow: inset 0 0 0 1px var(--line-strong); }
}
.f6-transcript__body {
  margin: 10px 0 4px 13px; padding: 2px 0 2px 21px; max-width: 68ch; border-left: 1px solid var(--line-strong);
  font-size: 15px; line-height: 1.7; color: var(--ink-body); text-wrap: pretty;
}
.f6-transcript__body p { margin: 0 0 .75em; }
.f6-transcript__body p:last-child { margin-bottom: 0; }
.f6-transcript[open] .f6-transcript__body { animation: f6-tr-in .45s var(--ease-out) both; }
@keyframes f6-tr-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .f6-transcript[open] .f6-transcript__body { animation: none; } .f6-transcript__chev { transition: none; } }
.f6-transcript--card { margin: 6px var(--wb-x, 24px) 0; }
.f6-transcript--film { margin-top: 18px; padding-left: clamp(6px, .8vw, 10px); }
.section--tint .f6-transcript__ico { background: var(--surface); }
/* the wide "Why" film centres its caption: its transcript sits centred under it too */
.trap__film .f6-transcript { display: flex; flex-direction: column; align-items: center; max-width: 920px; margin: 10px auto 0; }
.trap__film .f6-transcript > summary { margin-left: 0; }
.trap__film .f6-transcript__body { align-self: center; margin-left: 0; }