:root {
     --ink: #0B0A08;
     --ink-soft: #1A1815;
     --bone: #FAF8F3;
     --bone-dim: #F1EEE6;
     --bone-2: #F2EEE4;
     --gold: #C29B3C;
     --gold-soft: #D9BC72;
     --grey: #8B8578;
     --muted: #5A554B;
     --muted-ink: #B9B2A4;
     --hairline: rgba(11, 10, 8, .12);
     --hairline-inv: rgba(250, 248, 243, .16);
     --max: 1180px;
     --danger: #B3402E;
     --danger-soft: #E8705A;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     background: var(--bone);
     color: var(--ink);
     font-family: 'Inter', -apple-system, sans-serif;
     font-size: 18px;
     line-height: 1.68;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden
 }

 a{
    text-decoration: none;
 }

 .wrap {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 32px
 }

 section {
     padding: 90px 0;
     position: relative
 }

 .eyebrow {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     font-weight: 500;
     display: block;
     margin-bottom: 26px
 }

 a {
     color: inherit
 }

 button {
     font-family: inherit;
     cursor: pointer
 }

 :focus-visible {
     outline: 2px solid var(--gold);
     outline-offset: 3px
 }

 h2 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(31px, 3.5vw, 46px);
     line-height: 1.13;
     letter-spacing: -.01em;
     max-width: 740px
 }

 h2 em {
     font-style: italic;
     color: var(--gold)
 }

 strong {
     font-weight: 600
 }

 .skip {
     position: absolute;
     left: -9999px;
     top: 0;
     z-index: 400;
     background: var(--gold);
     color: var(--ink);
     padding: 12px 18px;
     font-weight: 600;
     border-radius: 0 0 3px 0
 }

 .skip:focus {
     left: 0
 }

 /* ---------- SPINE ---------- */
 .spine {
     position: fixed;
     top: 0;
     left: 0;
     width: 2px;
     height: 100vh;
     z-index: 90;
     background: var(--hairline);
     pointer-events: none
 }

 .spine__fill {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 0;
     background: linear-gradient(180deg, var(--gold-soft), var(--gold));
     box-shadow: 0 0 10px rgba(194, 155, 60, .5)
 }



 /* ---------- BUTTONS ---------- */
 .btn-gold {
     background: var(--gold);
     color: var(--ink);
     border: none;
     padding: 18px 32px;
     font-size: 15.5px;
     font-weight: 600;
     border-radius: 2px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: transform .25s, box-shadow .25s, background .2s
 }

 .btn-gold:hover {
     background: var(--gold-soft);
     transform: translateY(-2px);
     box-shadow: 0 12px 30px -12px rgba(194, 155, 60, .7)
 }

 .btn-gold .arw {
     transition: transform .28s
 }

 .btn-gold:hover .arw {
     transform: translateX(5px)
 }

 .btn-ghost {
     background: transparent;
     color: var(--bone);
     border: 1px solid var(--hairline-inv);
     padding: 18px 32px;
     font-size: 15px;
     font-weight: 500;
     border-radius: 2px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: border-color .25s, transform .25s
 }

 .btn-ghost:hover {
     border-color: var(--gold);
     transform: translateY(-2px)
 }

 /* ---------- REVEALS ---------- */
 .reveal {
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1)
 }

 .reveal.in {
     opacity: 1;
     transform: none
 }

 /* ---------- HERO ---------- */
 .hero {
     background: var(--ink);
     color: var(--bone);
     padding: 170px 0 0;
     overflow: hidden;
     position: relative
 }

 .hero__halo {
     position: absolute;
     top: 8%;
     left: 50%;
     width: min(760px, 92vw);
     height: 560px;
     transform: translateX(-50%);
     background: radial-gradient(circle, rgba(217, 188, 114, .20) 0%, rgba(194, 155, 60, .10) 34%, transparent 66%);
     filter: blur(16px);
     pointer-events: none;
     z-index: 0;
     animation: halo 9s ease-in-out infinite
 }

 @keyframes halo {

     0%,
     100% {
         opacity: .55;
         transform: translateX(-50%) scale(1)
     }

     50% {
         opacity: .95;
         transform: translateX(-50%) scale(1.08)
     }
 }

 .hero .wrap {
     position: relative;
     z-index: 1
 }

 /* ---- HERO v3: bigger type, guided axis, authority promoted ---- */
 .hero-stack {
     max-width: 940px;
     margin: 0 auto;
     text-align: center
 }

 /* EYEBROW as a highlighted pill — no longer disappears next to the H1 */
 .eyebrow-pill {
     display: inline-block;
     background: rgba(194, 155, 60, .16);
     border: 1px solid rgba(194, 155, 60, .45);
     color: var(--gold-soft);
     font-family: 'IBM Plex Mono', monospace;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: .14em;
     text-transform: uppercase;
     padding: 10px 20px;
     border-radius: 2px;
     line-height: 1.5;
     margin-bottom: 34px;
     transition: background .4s, border-color .4s
 }

 .eyebrow-pill:hover {
     background: rgba(194, 155, 60, .24);
     border-color: var(--gold)
 }

 @media(max-width:560px) {
     .eyebrow-pill {
         font-size: 11.5px;
         letter-spacing: .1em;
         padding: 9px 14px
     }
 }

 .hero h1 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(35px, 6.4vw, 86px);
     line-height: 1.02;
     letter-spacing: -.022em
 }

 .hero h1 em {
     font-style: italic;
     color: var(--gold-soft)
 }

 /* MECHANISM MARKER — names the method (Ovens: unique mechanism) */
 .hero-method {
     margin: 26px auto 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     max-width: 620px
 }

 .hero-method span {
     font-family: 'Fraunces', serif;
     font-style: italic;
     font-size: clamp(20px, 2.5vw, 28px);
     color: var(--gold-soft);
     line-height: 1.3;
     white-space: nowrap
 }

 .hero-method i {
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(194, 155, 60, .55));
     display: block
 }

 .hero-method i:last-child {
     background: linear-gradient(90deg, rgba(194, 155, 60, .55), transparent)
 }

 @media(max-width:520px) {
     .hero-method span {
         white-space: normal;
         text-align: center
     }

     .hero-method i {
         display: none
     }
 }

 .hero-line {
     margin: 30px auto 0;
     font-size: clamp(17.5px, 2vw, 19.5px);
     color: rgba(250, 248, 243, .82);
     max-width: 720px;
     line-height: 1.68
 }

 .hero-line strong {
     color: var(--bone);
     font-weight: 600
 }

 /* AUTHORITY — the biggest asset, sized like it */
 .auth {
     margin: 52px auto 0;
     max-width: 760px;
     text-align: left;
     border: 1px solid var(--hairline-inv);
     background: rgba(250, 248, 243, .04);
     border-radius: 3px;
     padding: 30px 34px;
     transition: border-color .4s, background .4s
 }

 .auth:hover {
     border-color: var(--gold);
     background: rgba(194, 155, 60, .07)
 }

 .auth__top {
     display: flex;
     align-items: center;
     gap: 24px
 }

 @media(max-width:640px) {
     .auth__face {
         width: 88px;
         height: 88px;
         flex: 0 0 88px
     }
 }

 .auth__face {
     width: 104px;
     height: 104px;
     border-radius: 50%;
     flex: 0 0 104px;
     object-fit: cover;
     object-position: 50% 22%;
     border: 2px solid var(--gold);
     background: #0e0c09;
     display: block;
     box-shadow: 0 0 0 6px rgba(194, 155, 60, .10)
 }

 .auth__kicker {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     display: block;
     margin-bottom: 8px
 }

 .auth__name {
     font-family: 'Fraunces', serif;
     font-size: clamp(26px, 3vw, 32px);
     font-weight: 500;
     color: var(--bone);
     line-height: 1.15
 }

 .auth__creds {
     margin-top: 18px;
     padding-top: 18px;
     border-top: 1px solid var(--hairline-inv)
 }

 .auth__creds li {
     list-style: none;
     font-size: 14.5px;
     line-height: 1.5;
     color: rgba(250, 248, 243, .88);
     padding: 6px 0 6px 20px;
     position: relative
 }

 .auth__creds li::before {
     content: "—";
     position: absolute;
     left: 0;
     color: var(--gold)
 }

 .auth__social {
     margin-top: 20px;
     padding-top: 18px;
     border-top: 1px solid var(--hairline-inv);
     display: flex;
     gap: 34px;
     flex-wrap: wrap;
     align-items: flex-end
 }

 .auth__social div {
     line-height: 1.25
 }

 .auth__social .n {
     font-family: 'Fraunces', serif;
     font-size: 26px;
     font-weight: 500;
     color: var(--gold-soft);
     display: block
 }

 .auth__social .l {
     font-size: 14px;
     color: rgba(250, 248, 243, .7);
     margin-top: 4px;
     display: block
 }

 @media(max-width:640px) {
     .auth {
         padding: 26px 18px
     }

     .auth__top {
         flex-direction: column;
         text-align: center;
         gap: 16px
     }

     .auth__creds li {
         text-align: left
     }

     .auth__social {
         gap: 24px;
         justify-content: center
     }
 }

 .hero-actions {
     margin-top: 44px;
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     justify-content: center
 }

 .hero-micro {
     margin-top: 22px;
     font-size: 14px;
     color: rgba(250, 248, 243, .62)
 }

 .hero-video {
     margin: 60px auto 0;
     max-width: 860px
 }

 .hero-video__frame {
     position: relative;
     aspect-ratio: 16/9;
     border: 1px solid var(--hairline-inv);
     border-radius: 3px;
     overflow: hidden;
     cursor: pointer;
     background: linear-gradient(135deg, #17140f 0%, #0c0b09 60%);
     transition: border-color .4s, transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s
 }

 .hero-video__frame iframe{
    width: 100%;
    height: 100%;
 }

 .hero-video__frame:hover {
     border-color: var(--gold);
     transform: translateY(-4px);
     box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85)
 }

 .hero-video__poster {
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 50% 42%, rgba(194, 155, 60, .17), transparent 62%)
 }

 .hero-video__badge {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 2;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .13em;
     text-transform: uppercase;
     color: var(--gold-soft);
     background: rgba(11, 10, 8, .65);
     padding: 7px 12px;
     border-radius: 2px
 }

 .hero-video__play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 82px;
     height: 82px;
     border-radius: 50%;
     background: var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     animation: playpulse 3.4s ease-in-out infinite
 }

 .hero-video__play::after {
     content: "";
     border-style: solid;
     border-width: 11px 0 11px 19px;
     border-color: transparent transparent transparent var(--ink);
     margin-left: 5px
 }

 @keyframes playpulse {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(194, 155, 60, .42)
     }

     50% {
         box-shadow: 0 0 0 20px rgba(194, 155, 60, 0)
     }
 }

 .hero-video__cap {
     margin-top: 16px;
     font-size: 16px;
     color: rgba(250, 248, 243, .7);
     text-align: center
 }

 .hero-strip {
     margin-top: 92px;
     border-top: 1px solid var(--hairline-inv);
     display: grid;
     grid-template-columns: repeat(4, 1fr)
 }

 .hero-strip>div {
     padding: 34px 26px 40px;
     border-right: 1px solid var(--hairline-inv);
     transition: transform .3s cubic-bezier(.2, .7, .3, 1)
 }

 .hero-strip>div:last-child {
     border-right: none
 }

 .hero-strip .stat {
     font-family: 'Fraunces', serif;
     font-size: 33px;
     font-weight: 500;
     color: var(--bone)
 }

 .hero-strip .stat span {
     color: var(--gold)
 }

 .stat-kicker {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold-soft);
     display: block;
     margin-bottom: 13px
 }

 .hero-strip .label {
     font-size: 15px;
     color: rgba(250, 248, 243, .72);
     margin-top: 9px;
     line-height: 1.5
 }

 .scroll-cue {
     margin: 56px auto 40px;
     width: 1px;
     height: 50px;
     background: linear-gradient(180deg, transparent, var(--gold));
     position: relative;
     overflow: hidden
 }

 .scroll-cue::after {
     content: "";
     position: absolute;
     top: -50px;
     left: 0;
     width: 1px;
     height: 50px;
     background: linear-gradient(180deg, transparent, var(--gold-soft));
     animation: cue 2.4s ease-in-out infinite
 }

 @keyframes cue {
     0% {
         top: -50px
     }

     60%,
     100% {
         top: 50px
     }
 }

 @media(max-width:900px) {
     .hero {
         padding-top: 120px
     }

     .hero-strip {
         grid-template-columns: 1fr 1fr
     }

     .hero-strip>div:nth-child(2) {
         border-right: none
     }

     .hero-strip>div:nth-child(1),
     .hero-strip>div:nth-child(2) {
         border-bottom: 1px solid var(--hairline-inv)
     }
 }

 @media(max-width:560px) {
     .wrap {
         padding: 0 15px
     }

     .hero-strip>div {
         padding: 26px 14px 30px
     }

     .hero-strip .stat {
         font-size: 26px
     }

     .hero-strip .label {
         font-size: 14px
     }

     .stat-kicker {
         font-size: 11px;
         letter-spacing: .12em
     }

     .hero-video__badge {
         font-size: 10.5px;
         letter-spacing: .1em;
         padding: 6px 9px;
         max-width: calc(100% - 32px);
         white-space: normal;
         line-height: 1.35
     }

     .hero-video__cap{
        font-size: 14px;
     }
 }

 /* ---- BATCH STATUS TAB ---- */
 .batchtab {
     margin: 40px auto 0;
     max-width: 860px;
     border: 1px solid rgba(194, 155, 60, .45);
     border-radius: 14px;
     background: linear-gradient(180deg, rgba(194, 155, 60, .11), rgba(194, 155, 60, .04));
     padding: 24px 32px;
     display: flex;
     align-items: center;
     gap: 26px;
     flex-wrap: nowrap;
     justify-content: flex-start;
     transition: border-color .4s, background .4s, transform .4s cubic-bezier(.2, .7, .3, 1)
 }

 .batchtab__body {
     flex: 1;
     min-width: 0;
     text-align: left
 }

 .batchtab:hover {
     border-color: var(--gold);
     transform: translateY(-3px);
     background: linear-gradient(180deg, rgba(194, 155, 60, .17), rgba(194, 155, 60, .06))
 }

 .batchtab__live {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12.5px;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: #7BD69B;
     font-weight: 500;
     white-space: nowrap
 }

 .batchtab__dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #4CAF6D;
     flex: 0 0 10px;
     animation: livedot 2.2s ease-in-out infinite
 }

 @keyframes livedot {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(76, 175, 109, .6)
     }

     50% {
         box-shadow: 0 0 0 11px rgba(76, 175, 109, 0)
     }
 }

 .batchtab__main {
     font-family: 'Fraunces', serif;
     font-size: clamp(19px, 2.1vw, 24px);
     font-weight: 500;
     color: var(--bone);
     line-height: 1.28
 }

 .batchtab__main b {
     color: var(--gold-soft);
     font-weight: 500
 }

 .batchtab__sub {
     margin-top: 10px;
     font-size: 16px;
     color: rgba(250, 248, 243, .84);
     line-height: 1.5
 }

 .batchtab__sub strong {
     color: var(--gold-soft);
     font-weight: 600
 }

 .batchtab__rule {
     width: 1px;
     align-self: stretch;
     min-height: 48px;
     background: rgba(194, 155, 60, .32)
 }

 @media(max-width:720px) {
     .batchtab {
         flex-direction: column;
         flex-wrap: wrap;
         gap: 15px;
         padding: 22px 15px
     }

     .batchtab__rule {
         display: none
     }

     .batchtab__body {
         text-align: center
     }
 }

 /* ---- AUTHORITY BAND — third-party verification, not spec ---- */
 .authband {
     margin-top: 78px;
     border-top: 1px solid var(--hairline-inv);
     padding-top: 44px
 }

 .authband__stars {
     color: var(--gold);
     font-size: 21px;
     letter-spacing: .28em;
     text-align: center;
     line-height: 1
 }

 .authband__tp {
     margin-top: 16px;
     text-align: center;
     font-family: 'Fraunces', serif;
     font-size: clamp(19px, 2.3vw, 25px);
     font-weight: 400;
     color: var(--bone)
 }

 .authband__tp b {
     font-weight: 600
 }

 .authband__tp span {
     color: var(--muted-ink)
 }

 .authband__grid {
     margin-top: 44px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--hairline-inv);
     border-top: 1px solid var(--hairline-inv);
     border-bottom: 1px solid var(--hairline-inv)
 }

 .ab-cell {
     background: var(--ink);
     padding: 34px 24px;
     text-align: center;
     transition: background .35s, transform .35s cubic-bezier(.2, .7, .3, 1)
 }

 .ab-cell:hover {
     background: var(--ink-soft);
     transform: translateY(-3px)
 }

 .ab-cell .n {
     font-family: 'Fraunces', serif;
     font-size: clamp(38px, 4.6vw, 52px);
     font-weight: 500;
     color: var(--bone);
     line-height: 1
 }

 .ab-cell .n span {
     color: var(--gold)
 }

 .ab-cell .l {
     margin-top: 14px;
     font-size: 15.5px;
     color: rgba(250, 248, 243, .78);
     line-height: 1.5
 }

 .ab-cell .sub {
     margin-top: 9px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12.5px;
     letter-spacing: .05em;
     color: var(--gold-soft)
 }

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

 @media(max-width:560px) {
     .ab-cell {
         padding: 24px 10px
     }

     .ab-cell .n {
         font-size: 33px
     }

     .ab-cell .l {
         font-size: 14px
     }

     .ab-cell .sub {
         font-size: 11px
     }
 }

 /* course-spec row, demoted out of the hero */

 /* ---------- EARLY-BIRD BAR — counts to a real date, then expires ---------- */
 .urgbar {
     background: var(--gold);
     color: var(--ink);
     padding: 8px 20px;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
     position: relative;
     z-index: 110;
     margin-top: 0px
 }

 .urgbar .cd {
     font-family: 'IBM Plex Mono', monospace;
     font-weight: 600;
     background: rgba(11, 10, 8, .16);
     padding: 3px 9px;
     border-radius: 2px;
     margin: 0 4px
 }

 .urgbar a {
     color: var(--ink);
     text-decoration: underline;
     text-underline-offset: 2px;
     font-weight: 600
 }

 /* LIVE ACTIVITY BAR — genuine data only */
 .livebar {
     background: var(--ink-soft);
     border-bottom: 1px solid var(--hairline-inv);
     color: var(--bone);
     padding: 10px 20px;
     text-align: center;
     font-size: 13.5px;
     position: relative;
     z-index: 109;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap
 }

 .livebar .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #4CAF6D;
     flex: 0 0 7px;
     animation: pulsedot 2.4s ease-in-out infinite
 }

 @keyframes pulsedot {

     0%,
     100% {
         opacity: 1;
         box-shadow: 0 0 0 0 rgba(76, 175, 109, .5)
     }

     50% {
         opacity: .65;
         box-shadow: 0 0 0 7px rgba(76, 175, 109, 0)
     }
 }

 .livebar b {
     color: var(--gold-soft);
     font-weight: 600;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 13px
 }

 .livebar .sep {
     color: var(--grey)
 }

 /* ---------- EMOTIONAL POSITIONING ---------- */
 .position {
     background: var(--bone)
 }

 /* legacy .position p rule removed — it was capping section 01 at 760px */
 .position em {
     font-style: italic;
     color: var(--ink)
 }

 /* ---------- SECTION 01: low-load pain stack ---------- */
 .position {
     padding: 78px 0
 }

 .position h2 {
     max-width: 900px
 }

 .pain {
     margin-top: 30px;
     max-width: 940px
 }

 .pain li {
     list-style: none;
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 14px;
     padding: 9px 0;
     font-size: clamp(17.5px, 2vw, 20px);
     line-height: 1.42;
     color: #312E26;
     border-top: 1px solid rgba(11, 10, 8, .09);
     transition: padding-left .3s cubic-bezier(.2, .7, .3, 1)
 }

 .pain li:first-child {
     border-top: none
 }

 .pain li:hover {
     padding-left: 8px
 }

 .pain li .m {
     color: var(--gold);
     font-size: 14px;
     line-height: 1.45
 }

 .pain li b {
     font-weight: 600;
     color: var(--ink)
 }

 .pain li .aside {
     color: var(--grey);
     font-size: 14px;
     font-style: italic
 }

 .painquote {
     margin: 34px 0 0;
     max-width: 1040px;
     border-left: 3px solid var(--gold);
     padding: 4px 0 4px 26px
 }

 .painquote p {
     font-family: 'Fraunces', serif;
     font-style: italic;
     font-size: clamp(22px, 2.8vw, 30px);
     line-height: 1.2;
     color: var(--ink);
     letter-spacing: -.01em
 }

 /* the forgetting line carries equal weight — it is a pain point, not a footnote */
 .painquote .after {
     margin-top: 12px;
     font-family: 'Fraunces', serif;
     font-style: italic;
     font-size: clamp(22px, 2.8vw, 30px);
     line-height: 1.2;
     color: var(--ink);
     letter-spacing: -.01em
 }

 .notice {
     margin-top: 44px;
     padding-top: 32px;
     border-top: 1px solid var(--hairline);
     max-width: 1120px
 }

 .notice__lead {
     font-size: clamp(18px, 2.05vw, 21px);
     line-height: 1.35;
     color: var(--ink);
     font-weight: 500;
     max-width: none
 }

 .notice__lead em {
     font-style: normal;
     color: var(--gold);
     font-weight: 600
 }

 .notice__grid {
     margin-top: 22px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0 48px
 }

 .notice__grid li {
     list-style: none;
     display: grid;
     grid-template-columns: 24px 1fr;
     gap: 11px;
     padding: 11px 0;
     border-top: 1px solid rgba(11, 10, 8, .09);
     font-size: 15px;
     line-height: 1.4;
     color: #3A362C;
     white-space: nowrap
 }

 .notice__grid .k {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12.5px;
     color: var(--gold);
     padding-top: 2px
 }

 @media(max-width:1080px) {
     .notice__grid li {
         white-space: normal
     }
 }

 @media(max-width:760px) {
     .notice__grid {
         grid-template-columns: 1fr;
         gap: 0
     }
 }

 .position-close {
     margin-top: 40px;
     max-width: 940px;
     background: var(--ink);
     color: var(--bone);
     padding: 28px 32px;
     border-radius: 3px;
     border-left: 3px solid var(--gold)
 }

 .position-close p {
     font-size: clamp(15px, 2.2vw, 21px);
     line-height: 1.5;
     color: rgba(250, 248, 243, .9)
 }

 .position-close b {
     display: block;
     margin-top: 16px;
     color: var(--gold);
     font-weight: 700;
     font-family: 'IBM Plex Mono', monospace;
     font-size: clamp(21px, 2.9vw, 31px);
     letter-spacing: .14em;
     text-transform: uppercase;
     line-height: 1.2;
     text-shadow: 0 0 26px rgba(194, 155, 60, .35)
 }

 @media(max-width:560px) {
     .position-close {
         padding: 24px 20px
     }

     .painquote {
         padding-left: 18px
     }

     .pain li {
         font-size: 14px
     }
 }

 /* ---------- 01b · WHY DOCTORS FAIL — animated interactive lollipop ---------- */
 .whyfail {
     background: var(--ink);
     color: var(--bone);
     padding: 96px 0
 }

 .whyfail h2 {
     color: var(--bone);
     max-width: 1000px
 }

 .whyfail h2 em {
     color: var(--gold-soft)
 }

 .wf-sub {
     margin-top: 18px;
     font-size: 17px;
     color: rgba(250, 248, 243, .66);
     max-width: 760px;
     line-height: 1.6
 }

 .wf-chart {
     margin-top: 56px;
     max-width: 1060px
 }

 .wf-row {
     display: grid;
     grid-template-columns: minmax(210px, 300px) 1fr 74px;
     gap: 22px;
     align-items: center;
     padding: 19px 16px;
     margin: 0 -16px;
     border-radius: 4px;
     cursor: pointer;
     border-top: 1px solid rgba(250, 248, 243, .09);
     transition: background .35s, transform .35s cubic-bezier(.2, .7, .3, 1)
 }

 .wf-row:last-of-type {
     border-bottom: 1px solid rgba(250, 248, 243, .09)
 }

 .wf-row:hover,
 .wf-row.open {
     background: rgba(194, 155, 60, .09);
     transform: translateX(5px)
 }

 .wf-label {
     font-size: 17.5px;
     line-height: 1.35;
     color: rgba(250, 248, 243, .9);
     transition: color .3s
 }

 .wf-row:hover .wf-label,
 .wf-row.open .wf-label {
     color: var(--bone)
 }

 .wf-track {
     position: relative;
     height: 22px;
     display: flex;
     align-items: center
 }

 .wf-track::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     height: 1px;
     background: rgba(250, 248, 243, .10)
 }

 .wf-line {
     position: absolute;
     left: 0;
     height: 2px;
     width: 0;
     border-radius: 2px;
     background: linear-gradient(90deg, rgba(194, 155, 60, .35), var(--gold));
     transition: width 1.15s cubic-bezier(.22, .61, .36, 1)
 }

 .wf-dot {
     position: absolute;
     left: 0;
     width: 15px;
     height: 15px;
     border-radius: 50%;
     background: var(--gold);
     transform: translateX(-50%) scale(0);
     opacity: 0;
     transition: left 1.15s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1),
         opacity .4s, box-shadow .35s
 }

 .wf-row.in .wf-dot {
     transform: translateX(-50%) scale(1);
     opacity: 1
 }

 .wf-row:hover .wf-dot,
 .wf-row.open .wf-dot {
     transform: translateX(-50%) scale(1.45);
     box-shadow: 0 0 0 7px rgba(194, 155, 60, .22)
 }

 .wf-val {
     font-family: 'Fraunces', serif;
     font-size: 26px;
     font-weight: 500;
     color: var(--bone);
     text-align: right;
     font-variant-numeric: tabular-nums;
     transition: color .3s
 }

 .wf-row:hover .wf-val,
 .wf-row.open .wf-val {
     color: var(--gold-soft)
 }

 .wf-val span {
     font-size: 16px;
     color: var(--gold)
 }

 /* click-to-open: what the Method does about it */
 .wf-fix {
     grid-column: 1/-1;
     max-height: 0;
     overflow: hidden;
     transition: max-height .45s cubic-bezier(.2, .7, .3, 1)
 }

 .wf-fix>div {
     padding: 14px 0 4px;
     font-size: 16px;
     line-height: 1.6;
     color: rgba(250, 248, 243, .72);
     max-width: 720px
 }

 .wf-fix b {
     color: var(--gold-soft);
     font-weight: 600
 }

 .wf-hint {
     margin-top: 26px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--grey)
 }

 .wf-cite {
     margin-top: 34px;
     padding-top: 22px;
     border-top: 1px solid rgba(250, 248, 243, .09);
     font-size: 14px;
     line-height: 1.6;
     color: var(--grey);
     max-width: 820px
 }

 @media(max-width:760px) {
     .wf-row {
         grid-template-columns: 1fr 62px;
         gap: 10px 14px;
         padding: 16px 12px
     }

     .wf-track {
         grid-column: 1/-1;
         order: 3;
         height: 18px
     }

     .wf-fix {
         order: 4
     }

     .wf-label {
         font-size: 16.5px
     }

     .wf-val {
         font-size: 22px
     }
 }

 /* ---------- 03 · THE FIX ----------
     COLOUR LOGIC: §02 (the problem) is ink. §03 (the solution) is near-white.
     The page physically lightens at the moment the solution arrives. Do not
     make this section dark again — the contrast IS the argument.
     The ONE dark element in here is the 500+ block, so it spikes.
     ------------------------------------------------------------------ */
 .system {
     background: #FDFBF6;
     color: var(--ink);
     position: relative
 }

 .system::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     opacity: .65
 }

 .system h2 {
     color: var(--ink);
     max-width: 900px
 }

 .system h2 em {
     color: var(--gold)
 }

 /* ---- the removals: what you never have to do ---- */
 .removed {
     margin-top: 52px;
     border: 1px solid rgba(194, 155, 60, .42);
     background: #fff;
     border-radius: 3px;
     padding: 36px 38px 32px;
     box-shadow: 0 24px 60px -44px rgba(11, 10, 8, .42)
 }

 .removed__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 24px
 }

 .removed ul {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px 44px
 }

 .removed li {
     display: grid;
     grid-template-columns: 26px 1fr;
     gap: 14px;
     align-items: start;
     font-size: 18.5px;
     line-height: 1.5;
     color: var(--ink)
 }

 .removed li .x {
     display: grid;
     place-items: center;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--gold);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     margin-top: 3px;
     transform: scale(0);
     transition: transform .5s cubic-bezier(.34, 1.56, .64, 1)
 }

 .removed.in li .x {
     transform: scale(1)
 }

 .removed.in li:nth-child(1) .x {
     transition-delay: .10s
 }

 .removed.in li:nth-child(2) .x {
     transition-delay: .22s
 }

 .removed.in li:nth-child(3) .x {
     transition-delay: .34s
 }

 .removed.in li:nth-child(4) .x {
     transition-delay: .46s
 }

 .removed__close {
     margin-top: 28px;
     padding-top: 22px;
     border-top: 1px solid rgba(194, 155, 60, .28);
     font-family: 'Fraunces', serif;
     font-style: italic;
     font-size: 19.5px;
     line-height: 1.6;
     color: #3A362C
 }

 @media(max-width:860px) {
     .removed {
         padding: 26px 22px
     }

     .removed ul {
         grid-template-columns: 1fr
     }

     .removed li {
         font-size: 17px
     }
 }

 /* ---- the six steps: scroll-reactive rail ---- */
 h3.steps-hd,
 h3.feats-hd,
 h3.gv-hd,
 h3.removed__hd,
 h3.miss__hd,
 h3.wof-kicker,
 h3.ebbox__hd {
     font-weight: 500
 }

 .steps-hd {
     margin-top: 78px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     display: flex;
     align-items: center;
     gap: 16px
 }

 .steps-hd::after {
     content: "";
     flex: 1;
     height: 1px;
     background: var(--hairline)
 }

 .stepper {
     position: relative;
     margin-top: 34px;
     padding-left: 74px
 }

 .stepper__track {
     position: absolute;
     left: 26px;
     top: 14px;
     bottom: 14px;
     width: 2px;
     background: var(--hairline)
 }

 .stepper__fill {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 0;
     background: linear-gradient(180deg, var(--gold-soft), var(--gold));
     box-shadow: 0 0 12px rgba(194, 155, 60, .55)
 }

 .step {
     position: relative;
     padding: 20px 26px;
     margin-bottom: 14px;
     background: #fff;
     border: 1px solid var(--hairline);
     border-radius: 3px;
     opacity: .42;
     transform: translateX(-14px);
     transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1),
         border-color .4s, box-shadow .4s
 }

 .step.on {
     opacity: 1;
     transform: none
 }

 .step.now {
     border-color: rgba(194, 155, 60, .7);
     box-shadow: 0 18px 44px -34px rgba(11, 10, 8, .55)
 }

 .step:hover {
     border-color: rgba(194, 155, 60, .7);
     transform: translateX(4px)
 }

 .step__n {
     position: absolute;
     left: -74px;
     top: 18px;
     width: 54px;
     height: 54px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #FDFBF6;
     border: 2px solid var(--hairline);
     font-family: 'IBM Plex Mono', monospace;
     font-size: 14px;
     font-weight: 500;
     color: var(--grey);
     transition: background .4s, border-color .4s, color .4s, transform .45s cubic-bezier(.34, 1.56, .64, 1)
 }

 .step.on .step__n {
     border-color: var(--gold);
     color: var(--gold)
 }

 .step.now .step__n {
     background: var(--gold);
     border-color: var(--gold);
     color: #fff;
     transform: scale(1.1);
     box-shadow: 0 0 0 8px rgba(194, 155, 60, .16)
 }

 .step h3 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: 21px;
     line-height: 1.24;
     margin-bottom: 7px
 }

 .step p {
     font-size: 16px;
     line-height: 1.62;
     color: var(--muted);
     max-width: 660px
 }

 @media(max-width:700px) {
     .stepper {
         padding-left: 52px
     }

     .stepper__track {
         left: 17px
     }

     .step__n {
         left: -52px;
         top: 16px;
         width: 36px;
         height: 36px;
         font-size: 12px
     }

     .step {
         padding: 17px 18px
     }

     .step h3 {
         font-size: 18.5px
     }

     .step p {
         font-size: 15.5px
     }
 }

 /* ---- the six feature cards ---- */
 .feats-hd {
     margin-top: 82px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     display: flex;
     align-items: center;
     gap: 16px
 }

 .feats-hd::after {
     content: "";
     flex: 1;
     height: 1px;
     background: var(--hairline)
 }

 .feats {
     margin-top: 34px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 .feat {
     position: relative;
     background: #fff;
     border: 1px solid var(--hairline);
     border-radius: 3px;
     padding: 30px 28px 32px;
     overflow: hidden;
     transition: transform .4s cubic-bezier(.2, .7, .3, 1), border-color .4s, box-shadow .4s
 }

 .feat::after {
     content: "";
     position: absolute;
     top: 0;
     left: -140%;
     width: 60%;
     height: 100%;
     background: linear-gradient(105deg, transparent, rgba(194, 155, 60, .16), transparent);
     transform: skewX(-16deg);
     transition: left .75s cubic-bezier(.2, .7, .3, 1);
     pointer-events: none
 }

 .feat:hover {
     transform: translateY(-6px);
     border-color: rgba(194, 155, 60, .7);
     box-shadow: 0 28px 58px -36px rgba(11, 10, 8, .48)
 }

 .feat:hover::after {
     left: 150%
 }

 .feat__k {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .16em;
     color: var(--gold);
     display: block;
     margin-bottom: 16px
 }

 .feat h3 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: 22px;
     line-height: 1.2;
     margin-bottom: 11px
 }

 .feat p {
     font-size: 15.5px;
     line-height: 1.66;
     color: var(--muted)
 }

 .feat .tagline {
     display: inline-block;
     margin-top: 16px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold);
     border: 1px solid rgba(194, 155, 60, .42);
     padding: 4px 9px;
     border-radius: 2px
 }

 @media(max-width:980px) {
     .feats {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:660px) {
     .feats {
         grid-template-columns: 1fr
     }
 }

 /* ---- 500+ : the one dark block in a light section ---- */
 .aim {
     margin-top: 86px;
     background: var(--ink);
     color: var(--bone);
     border-radius: 4px;
     padding: 70px 40px 66px;
     text-align: center;
     position: relative;
     overflow: hidden
 }

 .aim::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 42%;
     width: 900px;
     height: 900px;
     transform: translate(-50%, -50%) scale(.4);
     opacity: 0;
     background: radial-gradient(circle, rgba(194, 155, 60, .26), transparent 62%);
     transition: transform 1.5s cubic-bezier(.2, .7, .3, 1), opacity 1.5s;
     pointer-events: none
 }

 .aim.go::before {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1
 }

 .aim__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .24em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 30px;
     position: relative
 }

 .aim__was {
     position: relative;
     display: inline-block;
     font-family: 'Fraunces', serif;
     font-size: clamp(26px, 3.6vw, 40px);
     color: rgba(250, 248, 243, .42);
     line-height: 1.1
 }

 .aim__was::after {
     content: "";
     position: absolute;
     left: -6px;
     right: -6px;
     top: 52%;
     height: 2px;
     background: var(--danger-soft);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .7s cubic-bezier(.2, .7, .3, 1) .35s
 }

 .aim.go .aim__was::after {
     transform: scaleX(1)
 }

 .aim__lead {
     font-family: 'Fraunces', serif;
     font-size: clamp(22px, 3vw, 34px);
     line-height: 1.28;
     color: rgba(250, 248, 243, .82);
     position: relative
 }

 .aim__num {
     display: block;
     margin: 10px 0 4px;
     font-family: 'Fraunces', serif;
     font-weight: 500;
     font-size: clamp(88px, 17vw, 220px);
     line-height: .86;
     letter-spacing: -.035em;
     color: var(--gold);
     position: relative;
     font-variant-numeric: tabular-nums;
     text-shadow: 0 0 70px rgba(194, 155, 60, .42)
 }

 .aim__num i {
     font-style: normal
 }

 .aim__num sup {
     font-size: .42em;
     vertical-align: .42em;
     margin-left: .02em;
     opacity: 0;
     transition: opacity .5s ease 1.25s
 }

 .aim.go .aim__num sup {
     opacity: 1
 }

 .aim__sub {
     margin: 26px auto 0;
     max-width: 660px;
     font-size: 17.5px;
     line-height: 1.66;
     color: rgba(250, 248, 243, .7);
     position: relative
 }

 .aim__cite {
     margin-top: 20px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--grey);
     position: relative
 }

 @media(max-width:640px) {
     .aim {
         padding: 52px 22px 50px;
         margin-top: 64px
     }

     .aim__sub {
         font-size: 16.5px
     }
 }

 /* ---------- 04 · THE WEEK ---------- */
 .week {
     background: var(--bone-dim)
 }

 .week h2 {
     max-width: 820px
 }

 .week-sub {
     margin-top: 20px;
     font-size: 18px;
     color: var(--muted);
     max-width: 700px;
     line-height: 1.72
 }

 .week-strip {
     margin-top: 48px;
     border: 1px solid var(--hairline);
     background: var(--bone-2)
 }

 .week-row {
     display: grid;
     grid-template-columns: 214px 1fr;
     border-top: 1px solid var(--hairline);
     transition: background .3s
 }

 .week-row:first-child {
     border-top: none
 }

 .week-row:hover {
     background: #fff
 }

 .week-day {
     padding: 26px 24px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--gold);
     border-right: 1px solid var(--hairline)
 }

 .week-body {
     padding: 26px 28px
 }

 .week-body h3 {
     font-size: 17.5px;
     font-weight: 600;
     margin-bottom: 6px
 }

 .week-body p {
     font-size: 15.5px;
     color: var(--muted);
     line-height: 1.66
 }

 @media(max-width:760px) {
     .week-row {
         grid-template-columns: 1fr
     }

     .week-day {
         border-right: none;
         border-bottom: 1px solid var(--hairline);
         padding-bottom: 12px
     }
 }

 /* week-one first win — time-delay reduction */
 .firstwin {
     margin-top: 44px;
     border: 1px solid var(--hairline);
     border-left: 3px solid var(--gold);
     background: #fff;
     padding: 34px 36px;
     border-radius: 0 3px 3px 0
 }

 .firstwin__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 18px
 }

 .firstwin h3 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(24px, 3vw, 32px);
     line-height: 1.2;
     margin-bottom: 20px;
     max-width: 640px
 }

 .firstwin ul {
     list-style: none;
     display: grid;
     gap: 12px;
     max-width: 720px
 }

 .firstwin li {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 14px;
     font-size: 17px;
     line-height: 1.55;
     color: #3A362C
 }

 .firstwin li .t {
     color: var(--gold)
 }

 .firstwin__close {
     margin-top: 22px;
     font-size: 16px;
     color: var(--muted);
     line-height: 1.6
 }

 @media(max-width:700px) {
     .firstwin {
         padding: 26px 22px
     }
 }

 /* ---------- 05 · WALL OF FAME ---------- */
 .wof {
     background: var(--ink);
     color: var(--bone);
     padding: 112px 0;
     overflow: hidden
 }

 .wof-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
     gap: 64px;
     align-items: start
 }

 .wof-left {
     position: sticky;
     top: 110px
 }

 .wof-kicker {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     letter-spacing: .32em;
     text-transform: uppercase;
     color: var(--gold);
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 30px
 }

 .wof-kicker::after {
     content: "";
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, rgba(194, 155, 60, .5), transparent)
 }

 .wof-big {
     font-family: 'Fraunces', serif;
     font-weight: 500;
     text-transform: uppercase;
     font-size: clamp(40px, 6.4vw, 82px);
     line-height: .98;
     letter-spacing: -.022em;
     color: var(--bone)
 }

 .wof-big em {
     font-style: normal;
     color: var(--gold);
     display: block
 }

 .wof-lead {
     margin-top: 30px;
     font-size: 18px;
     line-height: 1.7;
     color: rgba(250, 248, 243, .72);
     max-width: 460px
 }

 .wof-tp {
     margin-top: 32px;
     padding-top: 24px;
     border-top: 1px solid rgba(250, 248, 243, .12);
     display: flex;
     align-items: center;
     gap: 14px;
     flex-wrap: wrap
 }

 .wof-tp .stars {
     color: var(--gold);
     font-size: 16px;
     letter-spacing: 2px
 }

 .wof-tp .txt {
     font-size: 15px;
     color: rgba(250, 248, 243, .72)
 }

 .wof-tp .txt b {
     color: var(--bone);
     font-weight: 600
 }

 .wof-more {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     margin-top: 26px;
     font-size: 15px;
     font-weight: 600;
     color: var(--gold-soft);
     text-decoration: none;
     border-bottom: 1px solid rgba(194, 155, 60, .4);
     padding-bottom: 3px;
     transition: .25s
 }

 .wof-more:hover {
     color: var(--gold);
     border-bottom-color: var(--gold);
     gap: 14px
 }

 /* the two rails */
 .wof-rails {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
     height: 660px;
     position: relative;
     -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
     mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%)
 }

 .wof-rail {
     overflow: hidden;
     position: relative
 }

 .wof-col {
     display: flex;
     flex-direction: column;
     gap: 18px;
     will-change: transform
 }

 .wof-col.up {
     animation: wofUp 46s linear infinite
 }

 .wof-col.down {
     animation: wofDown 52s linear infinite
 }

 @keyframes wofUp {
     from {
         transform: translateY(0)
     }

     to {
         transform: translateY(calc(-50% - 9px))
     }
 }

 @keyframes wofDown {
     from {
         transform: translateY(calc(-50% - 9px))
     }

     to {
         transform: translateY(0)
     }
 }

 .wof-rails:hover .wof-col {
     animation-play-state: paused
 }

 .wof-card {
     background: #141210;
     border: 1px solid rgba(250, 248, 243, .10);
     border-radius: 3px;
     overflow: hidden;
     transition: border-color .3s, transform .3s cubic-bezier(.2, .7, .3, 1)
 }

 .wof-card:hover {
     border-color: rgba(194, 155, 60, .55);
     transform: translateY(-3px)
 }

 .wof-photo {
     position: relative;
     aspect-ratio: 1/1;
     background: #1C1915;
     display: grid;
     place-items: center;
     overflow: hidden
 }

 .wof-photo::after {
     content: attr(data-init);
     font-family: 'Fraunces', serif;
     font-size: 34px;
     font-weight: 400;
     color: rgba(194, 155, 60, .55);
     letter-spacing: .02em
 }

 .wof-photo img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 1
 }

 .wof-meta {
     padding: 15px 16px 17px;
     border-top: 1px solid rgba(250, 248, 243, .08)
 }

 .wof-meta b {
     display: block;
     font-size: 15.5px;
     font-weight: 600;
     color: var(--bone);
     margin-bottom: 5px;
     line-height: 1.3
 }

 .wof-meta span {
     display: block;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10.5px;
     letter-spacing: .11em;
     text-transform: uppercase;
     color: var(--grey);
     line-height: 1.5
 }

 .wof-tag {
     display: inline-block;
     margin-top: 9px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 9.5px;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--gold);
     border: 1px solid rgba(194, 155, 60, .4);
     padding: 3px 8px;
     border-radius: 2px
 }

 .wof-foot {
     margin-top: 44px;
     padding-top: 22px;
     border-top: 1px solid rgba(250, 248, 243, .09);
     font-size: 14px;
     line-height: 1.6;
     color: var(--grey);
     max-width: 900px
 }

 @media(max-width:1000px) {
     .wof-grid {
         grid-template-columns: 1fr;
         gap: 48px
     }

     .wof-left {
         position: static
     }

     .wof-rails {
         height: 520px
     }
 }

 @media(max-width:560px) {
     .wof {
         padding: 88px 0
     }

     .wof-rails {
         height: 440px;
         gap: 12px
     }

     .wof-col {
         gap: 12px
     }

     .wof-photo::after {
         font-size: 26px
     }

     .wof-meta {
         padding: 12px 12px 14px
     }

     .wof-meta b {
         font-size: 14px
     }
 }

 @media(prefers-reduced-motion:reduce) {

     .wof-col.up,
     .wof-col.down {
         animation: none
     }

     .wof-rail {
         overflow-y: auto
     }
 }

 /* ---------- 06 · WHAT YOU GET — the stack ----------
     Deliberately the same near-white as §03. The two "solution" sections are a
     matched pair; §04 and §05 sit between them so they never touch.
     PLAIN ENGLISH ONLY in this section — short sentences, no idiom. A large part
     of this audience reads English as a second or third language, and this is the
     one section where a misread costs a sale.
     --------------------------------------------------------------------------- */
 .getall {
     background: #FDFBF6;
     color: var(--ink);
     position: relative
 }

 .getall::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     opacity: .65
 }

 .getall h2 {
     max-width: 900px
 }

 .getall h2 em {
     color: var(--gold)
 }

 /* ---- ONE ROW AT A TIME. Do not turn this back into a card grid.
          A three-across grid asks the reader to choose a reading path.
          A single column asks nothing: one line, then the next line.
          Each row is a title plus ONE sentence. If a second sentence
          ever creeps in, cut it. ---- */
 .gv-list {
     margin-top: 30px;
     border: 1px solid var(--hairline);
     border-radius: 3px;
     background: var(--bone-2)
 }

 .gv-row {
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 26px;
     align-items: center;
     padding: 23px 30px;
     border-top: 1px solid var(--hairline);
     background: transparent;
     opacity: 0;
     transform: translateY(14px);
     transition: opacity .5s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms),
         transform .45s cubic-bezier(.2, .7, .3, 1),
         background .3s, box-shadow .35s
 }

 .gv-row.in {
     opacity: 1;
     transform: none
 }

 .gv-row:first-child {
     border-top: none
 }

 .gv-row::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     background: var(--gold);
     transform: scaleY(0);
     transition: transform .35s cubic-bezier(.2, .7, .3, 1)
 }

 .gv-row.in.now,
 .gv-row.in:hover {
     background: #fff;
     z-index: 3;
     transform: scale(1.022);
     box-shadow: 0 22px 48px -32px rgba(11, 10, 8, .45)
 }

 .gv-row.now::before,
 .gv-row:hover::before {
     transform: scaleY(1)
 }

 .gv-row h3 {
     font-size: 18px;
     font-weight: 600;
     line-height: 1.32;
     margin-bottom: 5px
 }

 .gv-row p {
     font-size: 15.5px;
     line-height: 1.55;
     color: var(--muted);
     max-width: 660px
 }

 .gv-row .tag {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--grey);
     white-space: nowrap;
     transition: color .3s
 }

 .gv-row.now .tag,
 .gv-row:hover .tag {
     color: var(--gold)
 }

 @media(max-width:620px) {
     .gv-row {
         grid-template-columns: 1fr;
         gap: 9px;
         padding: 19px 20px
     }

     .gv-row .tag {
         order: -1;
         font-size: 10px
     }

     .gv-row h3 {
         font-size: 17px
     }

     .gv-row p {
         font-size: 15px
     }
 }

 /* bonuses — same rows, warmer container, clearly a second pile */
 .gv-bonus {
     margin-top: 76px;
     background: linear-gradient(180deg, rgba(194, 155, 60, .10), rgba(194, 155, 60, .03));
     border: 1px solid rgba(194, 155, 60, .42);
     border-radius: 4px;
     padding: 44px 40px 46px
 }

 .gv-bonus .gv-hd {
     margin-top: 0;
     margin-bottom: 24px
 }

 .gv-bonus .gv-list {
     margin-top: 0;
     background: rgba(255, 255, 255, .5);
     border-color: rgba(194, 155, 60, .3)
 }

 .gv-bonus .gv-row {
     border-top-color: rgba(194, 155, 60, .24)
 }

 .gv-bonus .gv-row .tag {
     color: var(--gold)
 }

 @media(max-width:700px) {
     .gv-bonus {
         padding: 30px 20px 32px
     }
 }

 .gv-next {
     margin-top: 52px;
     padding-top: 30px;
     border-top: 1px solid var(--hairline);
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--grey)
 }

 /* ---------- 07 · CHOOSE YOUR PLAN ----------
     THREE TIERS. Read gate is TIME, not money — the hours badge sits directly
     under the course name and is the first thing the eye lands on inside a card.
     NO WASTED WORDS IN THIS SECTION. Every line either states a fact or names a
     benefit. If a sentence does neither, delete it.
     ------------------------------------------------------------------------- */
 .plans {
     background: var(--bone);
     position: relative
 }

 .plans::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--hairline)
 }

 .plans h2 {
     max-width: 860px
 }

 .plans h2 em {
     color: var(--gold)
 }

 .plans__sub {
     margin-top: 22px;
     font-size: 18.5px;
     line-height: 1.7;
     color: var(--muted);
     max-width: 640px
 }

 .plan-grid {
     margin-top: 54px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 26px;
     align-items: stretch
 }

 .plan {
     display: flex;
     flex-direction: column;
     border-radius: 4px;
     padding: 44px 40px 40px;
     transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s, border-color .35s
 }

 .plan:hover {
     transform: translateY(-6px)
 }

 .plan--dark {
     background: var(--ink);
     color: var(--bone);
     border: 1px solid var(--ink)
 }

 .plan--dark:hover {
     border-color: var(--gold);
     box-shadow: 0 40px 80px -46px rgba(11, 10, 8, .75)
 }

 .plan--light {
     background: #fff;
     border: 1px solid var(--hairline)
 }

 .plan--light:hover {
     border-color: var(--gold);
     box-shadow: 0 34px 70px -44px rgba(11, 10, 8, .42)
 }

 .plan__live {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold-soft);
     display: flex;
     align-items: center;
     gap: 9px;
     margin-bottom: 20px
 }

 .plan__live i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #4ADE80;
     display: block;
     box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
     animation: pulseDot 2.2s infinite
 }

 @keyframes pulseDot {
     0% {
         box-shadow: 0 0 0 0 rgba(74, 222, 128, .5)
     }

     70% {
         box-shadow: 0 0 0 9px rgba(74, 222, 128, 0)
     }

     100% {
         box-shadow: 0 0 0 0 rgba(74, 222, 128, 0)
     }
 }

 .plan__tier {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     display: block;
     margin-bottom: 12px
 }

 .plan__name {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(26px, 3vw, 33px);
     line-height: 1.16;
     margin-bottom: 18px
 }

 /* THE HOURS GATE — the single most important line in the card */
 .plan__hours {
     display: inline-block;
     background: var(--gold);
     color: var(--ink);
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12.5px;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     line-height: 1.35;
     padding: 11px 16px;
     border-radius: 2px;
     box-shadow: 0 0 0 0 rgba(194, 155, 60, .45);
     transition: box-shadow .35s, transform .35s
 }

 .plan:hover .plan__hours {
     box-shadow: 0 0 0 6px rgba(194, 155, 60, .16);
     transform: translateY(-1px)
 }

 .plan__desc {
     margin-top: 20px;
     font-size: 16.5px;
     line-height: 1.66
 }

 .plan--dark .plan__desc {
     color: var(--muted-ink)
 }

 .plan--light .plan__desc {
     color: var(--muted)
 }

 .plan__price {
     margin-top: 30px;
     display: flex;
     align-items: baseline;
     gap: 16px;
     flex-wrap: wrap
 }

 .plan__price .now {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(46px, 5.6vw, 62px);
     line-height: 1;
     letter-spacing: -.02em
 }

 .plan--dark .plan__price .now {
     color: var(--bone)
 }

 .plan__price .was {
     font-family: 'Fraunces', serif;
     font-size: 24px;
     color: var(--grey);
     text-decoration: line-through
 }

 .plan__access {
     margin-top: 14px;
     font-size: 14.5px;
     line-height: 1.6
 }

 .plan--dark .plan__access {
     color: rgba(250, 248, 243, .62)
 }

 .plan--light .plan__access {
     color: var(--muted)
 }

 .plan__access b {
     font-weight: 600
 }

 .plan--dark .plan__access b {
     color: var(--bone)
 }

 .plan--light .plan__access b {
     color: var(--ink)
 }

 .plan__feats {
     list-style: none;
     margin-top: 26px
 }

 .plan__feats li {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 13px;
     padding: 13px 8px 13px 0;
     font-size: 15.5px;
     line-height: 1.55;
     transition: padding-left .3s, color .3s
 }

 .plan__feats li:hover {
     padding-left: 8px
 }

 .plan--dark .plan__feats li {
     border-bottom: 1px solid rgba(250, 248, 243, .10);
     color: var(--muted-ink)
 }

 .plan--light .plan__feats li {
     border-bottom: 1px solid var(--hairline);
     color: var(--muted)
 }

 .plan__feats li:first-child {
     border-top: 1px solid transparent
 }

 .plan__feats .d {
     color: var(--gold)
 }

 .plan__feats b {
     font-weight: 600
 }

 .plan--dark .plan__feats b {
     color: var(--bone)
 }

 .plan--light .plan__feats b {
     color: var(--ink)
 }

 .plan__cta {
     margin-top: auto;
     padding-top: 32px
 }

 .plan__btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 11px;
     width: 100%;
     padding: 19px 24px;
     border-radius: 2px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     transition: transform .28s, box-shadow .28s, background .25s
 }

 .plan__btn .arw {
     transition: transform .28s
 }

 .plan__btn:hover .arw {
     transform: translateX(5px)
 }

 .plan__btn--gold {
     background: var(--gold);
     color: var(--ink)
 }

 .plan__btn--gold:hover {
     background: var(--gold-soft);
     transform: translateY(-2px);
     box-shadow: 0 16px 34px -14px rgba(194, 155, 60, .7)
 }

 .plan__btn--ink {
     background: var(--ink);
     color: var(--bone)
 }

 .plan__btn--ink:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 34px -16px rgba(11, 10, 8, .6)
 }

 .plan__call {
     display: block;
     text-align: center;
     margin-top: 16px;
     font-size: 14.5px;
     text-decoration: none;
     color: inherit;
     opacity: .7;
     transition: opacity .25s
 }

 .plan__call span {
     border-bottom: 1px solid currentColor;
     padding-bottom: 2px
 }

 .plan__call:hover {
     opacity: 1
 }

 @media(max-width:900px) {
     .plan-grid {
         grid-template-columns: 1fr
     }

     .plan {
         padding: 24px 20px 32px
     }
 }

 /* ---- ELITE ---- */
 .elite {
     margin-top: 26px;
     background: var(--ink);
     color: var(--bone);
     border: 1px solid var(--gold);
     border-radius: 4px;
     padding: 48px 44px;
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 52px;
     align-items: start;
     transition: box-shadow .4s
 }

 .elite:hover {
     box-shadow: 0 40px 84px -48px rgba(194, 155, 60, .55)
 }

 .elite__tier {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     display: block;
     margin-bottom: 16px
 }

 .elite__name {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(24px, 3.2vw, 36px);
     line-height: 1.16;
     margin-bottom: 16px;
     max-width: 560px
 }

 .elite__desc {
     font-size: 16.5px;
     line-height: 1.68;
     color: var(--muted-ink);
     max-width: 580px
 }

 .elite__feats {
     list-style: none;
     margin-top: 30px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0 40px
 }

 .elite__feats li {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 13px;
     padding: 14px 0;
     border-bottom: 1px solid rgba(250, 248, 243, .10);
     font-size: 14px;
     line-height: 1.55;
     color: rgba(250, 248, 243, .86);
     transition: padding-left .3s
 }

 .elite__feats li:hover {
     padding-left: 8px
 }

 .elite__feats .d {
     color: var(--gold)
 }

 .elite__buy {
     text-align: center;
     padding-top: 8px
 }

 .elite__price {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(44px, 5vw, 58px);
     line-height: 1;
     color: var(--bone);
     letter-spacing: -.02em
 }

 .elite__note {
     margin-top: 12px;
     font-size: 14px;
     color: var(--grey);
     line-height: 1.55
 }

 .elite__buy .plan__btn {
     margin-top: 26px
 }

 @media(max-width:900px) {
     .elite {
         grid-template-columns: 1fr;
         gap: 34px;
         padding: 25px 15px
     }

     .elite__feats {
         grid-template-columns: 1fr
     }

     .elite__buy {
         text-align: left
     }
 }

 /* ---- COURSE VS ACCESS ---- */
 .cva {
     margin-top: 38px;
     background: var(--bone-dim);
     border: 1px solid rgba(194, 155, 60, .42);
     border-radius: 4px;
     padding: 48px 44px
 }

 .cva h3 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(22px, 3.2vw, 36px);
     line-height: 1.16;
     margin-bottom: 20px
 }

 .cva__lead {
     font-size: 17.5px;
     line-height: 1.72;
     color: #3A362C;
     max-width: 800px
 }

 .cva__lead b {
     font-weight: 600;
     color: var(--ink)
 }

 .cva__row {
     margin-top: 40px
 }

 .cva__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 12px
 }

 .cva__bar {
     display: grid;
     border: 1px solid var(--hairline);
     border-radius: 2px;
     overflow: hidden
 }

 .cva__bar.p {
     grid-template-columns: 1fr 1fr
 }

 .cva__bar.s {
     grid-template-columns: 2fr 1fr
 }

 .cva__seg {
     padding: 16px 18px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .12em;
     text-transform: uppercase;
     text-align: center;
     line-height: 1.5
 }

 .cva__seg.live {
     background: var(--ink);
     color: var(--gold-soft)
 }

 .cva__seg.rec {
     background: #fff;
     color: var(--muted)
 }

 .cva__note {
     margin-top: 13px;
     font-size: 15.5px;
     line-height: 1.6;
     color: var(--muted)
 }

 .cva__note b {
     color: var(--ink);
     font-weight: 600
 }

 @media(max-width:700px) {
     .cva {
         padding: 25px 18px
     }

     .cva__bar.p,
     .cva__bar.s {
         grid-template-columns: 1fr
     }

     .cva__seg {
         text-align: left
     }
 }


 /* ---- early-bird box: section header, right column. Covers ALL plans ---- */
 .plans__top {
     display: grid;
     grid-template-columns: 1fr 400px;
     gap: 56px;
     align-items: start
 }

 @media(max-width:1000px) {
     .plans__top {
         grid-template-columns: 1fr;
         gap: 38px
     }
 }

 .ebbox {
     background: #fff;
     border: 1px solid var(--hairline);
     border-radius: 3px;
     padding: 30px 30px 28px
 }

 .ebbox__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 18px
 }

 .ebbox__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px
 }

 .ebbox__grid>div {
     border: 1px solid var(--hairline);
     border-radius: 2px;
     padding: 15px 6px 12px;
     text-align: center
 }

 .ebbox__grid b {
     display: block;
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: 32px;
     line-height: 1;
     color: var(--ink);
     font-variant-numeric: tabular-nums
 }

 .ebbox__grid span {
     display: block;
     margin-top: 8px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 9.5px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--grey)
 }

 .seatbar {
     margin-top: 20px;
     display: flex;
     align-items: center;
     gap: 14px;
     flex-wrap: wrap
 }

 .seatbar__track {
     flex: 1;
     min-width: 100px;
     height: 4px;
     border-radius: 2px;
     background: var(--hairline);
     overflow: hidden
 }

 .seatbar__fill {
     height: 100%;
     width: 0;
     border-radius: 2px;
     background: var(--danger);
     transition: width 1.1s cubic-bezier(.22, .61, .36, 1)
 }

 .seatbar__cap {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .13em;
     text-transform: uppercase;
     color: var(--danger);
     white-space: nowrap
 }

 .elite .seatbar__track {
     background: rgba(250, 248, 243, .16)
 }

 .elite .seatbar__fill {
     background: var(--danger-soft)
 }

 .elite .seatbar__cap {
     color: var(--danger-soft)
 }

 .plan__eb {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10.5px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold);
     border: 1px solid rgba(194, 155, 60, .45);
     padding: 4px 9px;
     border-radius: 2px;
     align-self: center
 }

 @media(max-width:420px) {
     .ebbox__grid b {
         font-size: 26px
     }

     .ebbox {
         padding: 22px 20px
     }
 }

 /* ---- Elite: by application only ---- */
 .elite__gate {
     margin-top: 26px;
     padding-top: 24px;
     border-top: 1px solid rgba(250, 248, 243, .16);
     text-align: left
 }

 .elite__gate-hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10.5px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 16px
 }

 .elite__gate ol {
     list-style: none;
     display: grid;
     gap: 12px
 }

 .elite__gate li {
     display: grid;
     grid-template-columns: 24px 1fr;
     gap: 11px;
     font-size: 14.5px;
     line-height: 1.5;
     color: rgba(250, 248, 243, .8)
 }

 .elite__gate li span {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     color: var(--gold)
 }

 .elite__mail {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 24px;
     font-size: 15.5px;
     font-weight: 600;
     color: var(--gold-soft);
     text-decoration: none;
     border-bottom: 1px solid rgba(194, 155, 60, .45);
     padding-bottom: 4px;
     transition: .25s
 }

 .elite__mail:hover {
     color: var(--gold);
     border-bottom-color: var(--gold);
     gap: 15px
 }

 /* ---- UK IMT study budget ---- */
 .claim {
     margin-top: 38px;
     background: var(--ink);
     color: var(--bone);
     border-radius: 4px;
     padding: 56px 48px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 58px;
     align-items: start
 }

 .claim__eyebrow {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     display: block;
     margin-bottom: 26px
 }

 .claim h3 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(30px, 4.2vw, 48px);
     line-height: 1.1;
     letter-spacing: -.01em;
     max-width: 520px
 }

 .claim h3 em {
     font-style: italic;
     color: var(--gold-soft);
     display: block
 }

 .claim__lead {
     margin-top: 26px;
     font-size: 17.5px;
     line-height: 1.72;
     color: rgba(250, 248, 243, .74);
     max-width: 520px
 }

 .claim__steps {
     list-style: none
 }

 .claim__steps li {
     display: grid;
     grid-template-columns: 38px 1fr;
     gap: 16px;
     padding: 24px 0;
     border-top: 1px solid rgba(250, 248, 243, .13);
     transition: padding-left .3s
 }

 .claim__steps li:last-child {
     border-bottom: 1px solid rgba(250, 248, 243, .13)
 }

 .claim__steps li:hover {
     padding-left: 8px
 }

 .claim__steps .k {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 12px;
     color: var(--gold);
     line-height: 1.7
 }

 .claim__steps h4 {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: 21px;
     line-height: 1.2;
     margin-bottom: 8px
 }

 .claim__steps p {
     font-size: 15.5px;
     line-height: 1.62;
     color: var(--muted-ink)
 }

 @media(max-width:900px) {
     .claim {
         grid-template-columns: 1fr;
         gap: 38px;
         padding: 28px 15px
     }
 }

 /* ---------- 08 · WHAT WAITING COSTS ----------
     Back to ink. §07 is the light section where you buy; §08 is the dark one
     about what you lose. Tone rule: ARITHMETIC, NOT FEAR. State the numbers
     flatly and let the reader do the maths. The moment it reads as pressure it
     backfires at this price point.
     ------------------------------------------------------------------------ */
 .cost {
     background: var(--ink);
     color: var(--bone)
 }

 .cost h2 {
     color: var(--bone);
     max-width: 860px
 }

 .cost h2 em {
     color: var(--gold-soft)
 }

 .cost__sub {
     margin-top: 22px;
     font-size: 18.5px;
     line-height: 1.72;
     color: rgba(250, 248, 243, .72);
     max-width: 640px
 }

 .sums {
     margin-top: 52px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: rgba(250, 248, 243, .13);
     border: 1px solid rgba(250, 248, 243, .13)
 }

 .sums>div {
     background: var(--ink);
     padding: 32px 24px;
     transition: background .35s
 }

 .sums>div:hover {
     background: var(--ink-soft)
 }

 .sums .n {
     font-family: 'Fraunces', serif;
     font-weight: 400;
     font-size: clamp(30px, 3.6vw, 42px);
     line-height: 1.05;
     color: var(--gold-soft);
     letter-spacing: -.01em
 }

 .sums .n small {
     font-size: 15px;
     color: var(--grey);
     display: block;
     margin-top: 6px;
     font-family: 'IBM Plex Mono', monospace;
     letter-spacing: .1em;
     text-transform: uppercase
 }

 .sums .l {
     margin-top: 16px;
     font-size: 15.5px;
     line-height: 1.6;
     color: var(--muted-ink)
 }

 @media(max-width:900px) {
     .sums {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:560px) {
     .sums {
         grid-template-columns: 1fr
     }
 }

 .sums__cite {
     margin-top: 18px;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11px;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--grey);
     line-height: 1.6
 }

 .miss {
     margin-top: 72px;
     border: 1px solid rgba(194, 155, 60, .42);
     border-radius: 4px;
     background: linear-gradient(180deg, rgba(194, 155, 60, .10), rgba(194, 155, 60, .02));
     padding: 46px 42px
 }

 .miss__hd {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 11.5px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 26px
 }

 .miss ul {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0 44px
 }

 .miss li {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 14px;
     padding: 17px 0;
     border-bottom: 1px solid rgba(250, 248, 243, .11);
     transition: padding-left .3s
 }

 .miss li:hover {
     padding-left: 8px
 }

 .miss li .d {
     color: var(--gold)
 }

 .miss li b {
     display: block;
     font-weight: 600;
     color: var(--bone);
     font-size: 16.5px;
     margin-bottom: 4px;
     line-height: 1.35
 }

 .miss li span.t {
     font-size: 15px;
     line-height: 1.6;
     color: var(--muted-ink)
 }

 @media(max-width:860px) {
     .miss {
         padding: 30px 15px
     }

     .miss ul {
         grid-template-columns: 1fr
     }
     .tutors__sub{
        font-size: 16px!important;
     }
 }

 .cost__close {
     margin-top: 60px;
     padding-top: 38px;
     border-top: 1px solid rgba(250, 248, 243, .14)
 }

 .cost__line {
     font-family: 'Fraunces', serif;
     font-size: clamp(23px, 3vw, 32px);
     line-height: 1.3;
     max-width: 760px;
     color: var(--bone)
 }

 .cost__line em {
     font-style: italic;
     color: var(--gold-soft)
 }

 .cost__actions {
     margin-top: 34px;
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     align-items: center
 }

 /* ---------- 09 · MEET YOUR TUTORS ----------
     FOUR cards, photo on top, credentials bottom-aligned so the lists line up
     across the row. Sits immediately before the FAQ on purpose: §08 has just
     argued that guidance is the variable that decides the result, so the next
     question is "guided by whom".
     ------------------------------------------------------------------------ */
 .tutors {
     background: #FDFBF6;
     position: relative
 }

 .tutors::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--gold), transparent);
     opacity: .65
 }

 .tutors h2 {
     max-width: 840px
 }

 .tutors h2 em {
     color: var(--gold)
 }

 .tutors__sub {
     margin-top: 22px;
     font-size: 18.5px;
     line-height: 1.7;
     color: var(--muted);
     max-width: 660px
 }

 .tut-grid {
     margin-top: 48px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     align-items: stretch
 }

 @media(max-width:1180px) {
     .tut-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 22px
     }
 }

 @media(max-width:640px) {
     .tut-grid {
         grid-template-columns: 1fr
     }
 }

 .tut {
     display: flex;
     flex-direction: column;
     background: var(--bone-dim);
     border: 1px solid var(--hairline);
     border-radius: 4px;
     overflow: hidden;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity .6s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms),
         transform .6s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms),
         border-color .35s, box-shadow .35s
 }

 .tut.in {
     opacity: 1;
     transform: none
 }

 .tut.in:hover {
     border-color: rgba(194, 155, 60, .75);
     transform: translateY(-6px);
     box-shadow: 0 34px 66px -40px rgba(11, 10, 8, .46)
 }

 .tut__media {
     position: relative;
     aspect-ratio: 4/5;
     background: #0B0A08;
     overflow: hidden
 }

 .tut__media::after {
     content: attr(data-init);
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     font-family: 'Fraunces', serif;
     font-size: 56px;
     color: rgba(194, 155, 60, .5)
 }

 .tut__media img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 12%;
     z-index: 1;
     transition: transform .8s cubic-bezier(.2, .7, .3, 1), filter .5s
 }

 .tut:hover .tut__media img {
     transform: scale(1.055)
 }

 .tut__ring {
     position: absolute;
     inset: 0;
     z-index: 2;
     pointer-events: none;
     box-shadow: inset 0 0 0 0 rgba(194, 155, 60, 0);
     transition: box-shadow .45s
 }

 .tut:hover .tut__ring {
     box-shadow: inset 0 0 0 3px rgba(194, 155, 60, .75)
 }

 .tut__loc {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 3;
     padding: 26px 16px 14px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     background: linear-gradient(180deg, transparent, rgba(11, 10, 8, .86))
 }

 .tut__loc span {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: rgba(250, 248, 243, .94);
     line-height: 1.5;
     transform: translateY(6px);
     opacity: 0;
     transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .45s
 }

 .tut.in .tut__loc span {
     transform: none;
     opacity: 1
 }

 .tut.in .tut__loc span:nth-child(2) {
     transition-delay: .09s;
     color: rgba(194, 155, 60, .95)
 }

 .tut__body {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 26px 15px 26px
 }

 .tut__role {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 10.5px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--gold);
     display: block;
     margin-bottom: 11px;
     line-height: 1.5
 }

 .tut__name {
     font-family: 'Fraunces', serif;
     font-weight: 500;
     font-size: 26px;
     line-height: 1.12;
     letter-spacing: -.012em;
     margin-bottom: 14px
 }

 .tut__line {
     font-size: 16px;
     line-height: 1.6;
     color: var(--muted)
 }

 .tut__line b {
     color: var(--ink);
     font-weight: 600
 }

 .tut__creds {
     list-style: none;
     margin-top: auto;
     padding-top: 24px
 }

 .tut__creds li {
     position: relative;
     padding: 8px 0 8px 18px;
     font-size: 14.5px;
     line-height: 1.5;
     color: var(--muted)
 }

 .tut__creds li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 15px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgba(194, 155, 60, .55)
 }

 .tut__creds li:first-child {
     color: var(--ink);
     font-weight: 600
 }

 .tut__creds li:first-child::before {
     background: var(--gold)
 }

 .tut__creds li em {
     font-style: italic
 }

 .tut__social {
     margin-top: 18px;
     padding-top: 16px;
     border-top: 1px solid var(--hairline);
     display: flex;
     gap: 26px
 }

 .tut__social .n {
     font-family: 'Fraunces', serif;
     font-size: 22px;
     color: var(--gold);
     display: block;
     line-height: 1
 }

 .tut__social .l {
     font-size: 12.5px;
     color: var(--grey);
     margin-top: 5px;
     display: block
 }

 @media(prefers-reduced-motion:reduce) {
     .tut {
         opacity: 1;
         transform: none
     }

     .tut__loc span {
         opacity: 1;
         transform: none
     }
 }

 /* ---------- FAQ ---------- */
 .faq {
     background: var(--bone-dim)
 }

 .acc {
     margin-top: 44px;
     border-top: 1px solid var(--hairline);
     max-width: 860px
 }

 .acc-item {
     border-bottom: 1px solid var(--hairline)
 }

 .acc-q {
     width: 100%;
     background: none;
     border: none;
     text-align: left;
     padding: 24px 40px 24px 0;
     font-family: 'Fraunces', serif;
     font-size: 19.5px;
     font-weight: 400;
     line-height: 1.34;
     color: var(--ink);
     position: relative;
     transition: color .25s
 }

 .acc-q:hover {
     color: var(--gold)
 }

 .acc-q::after {
     content: "+";
     position: absolute;
     right: 6px;
     top: 50%;
     transform: translateY(-50%);
     font-family: 'Inter', sans-serif;
     font-size: 22px;
     color: var(--gold);
     transition: transform .3s
 }

 .acc-item.open .acc-q::after {
     transform: translateY(-50%) rotate(45deg)
 }

 .acc-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height .42s cubic-bezier(.2, .7, .3, 1)
 }

 .acc-a>div {
     padding: 0 44px 26px 0;
     font-size: 16.5px;
     line-height: 1.75;
     color: var(--muted)
 }

 .acc-a p+p {
     margin-top: 14px
 }

 /* ---------- FINAL ---------- */
 .final {
     background: var(--ink);
     color: var(--bone);
     text-align: left
 }

 .final h2 {
     color: var(--bone);
     font-size: clamp(33px, 4.4vw, 54px);
     max-width: 820px
 }

 .final h2 em {
     color: var(--gold-soft)
 }

 .final p {
     margin-top: 26px;
     font-size: 18.5px;
     line-height: 1.76;
     color: rgba(250, 248, 243, .78);
     max-width: 660px
 }

 .final-actions {
     margin-top: 40px;
     display: flex;
     gap: 14px;
     flex-wrap: wrap
 }

 footer {
     background: #070605;
     color: var(--muted-ink);
     padding: 48px 0;
     font-size: 13.5px
 }

 footer .wrap {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap
 }

 @media(prefers-reduced-motion:reduce) {
     * {
         animation: none !important;
         transition: none !important
     }

     html {
         scroll-behavior: auto
     }

     .reveal {
         opacity: 1;
         transform: none
     }
 }


 /* ============================ HEADER ============================ */
header {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
    padding: 15px 0;
    background: var(--ink);
    
}

header.scrolled {
    background: var(--ink);
    box-shadow: 0 1px 0 var(--line-ink);
    padding: 12px 0;
    top : 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bone);
    
}

.brand .mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    background: var(--bone);
    object-fit: cover;
    padding: 2px
}

.brand .word {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--bone)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav-links a {
    color: var(--bone);
    font-size: 15px;
    font-weight: 500;
    opacity: .85;
    transition: opacity .2s, color .2s;
    position: relative
}

.nav-links a:not(.nav-box)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width .25s var(--ease)
}

.nav-links a:not(.nav-box):hover {
    opacity: 1;
    color: var(--gold-soft)
}

.nav-links a:not(.nav-box):hover::after {
    width: 100%
}

.nav-box {
    border: 1px solid var(--gold);
    border-radius: 2px;
    padding: 9px 18px;
    opacity: 1 !important;
    transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease)
}

.nav-box:hover {
    background: var(--gold);
    color: var(--ink) !important;
    transform: translateY(-2px)
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px
}

.burger span {
    width: 24px;
    height: 2px;
    background: var(--bone);
    transition: .3s
}

.mobile-menu {
    display: none
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center
}

.nav-item>button {
    font-size: 15px;
    font-weight: 500;
    color: var(--bone);
    opacity: .85;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: opacity .2s, color .2s;
    background:none;
    border: none;
}

.nav-item.has-drop>button::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .25s
}

.nav-item.has-drop:hover>button {
    opacity: 1;
    color: var(--gold-soft)
}

.nav-item.has-drop:hover>button::after {
    transform: rotate(-135deg);
    margin-top: 2px
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: var(--ink);
    border: 1px solid var(--line-ink);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .75);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    z-index: 120
}

.nav-item.has-drop:hover .dropdown,
.nav-item.has-drop:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0)
}

.dropdown a {
    display: block;
    padding: 11px 14px;
    border-radius: 5px;
    font-size: 14.5px;
    white-space: nowrap
}

.dropdown a::after {
    display: none !important
}

.dropdown a:hover {
    background: rgba(194, 155, 60, .12)
}

.mobile-menu .m-group {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: var(--gold-soft);
    padding: 18px 0 4px
}

.mobile-menu .m-sub {
    display: block;
    color: var(--bone);
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    padding: 11px 0 11px 20px;
    border-bottom: 1px solid var(--line-ink);
    opacity: .9
}

@media(max-width:759px) {
    .nav-links {
        display: none
    }

    .burger {
        display: flex;
        border:none;
        background: none;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--ink);
        z-index: 99;
        transform: translateY(-100%);
        transition: transform .4s var(--ease);
        padding: 90px 32px 32px;
        overflow: auto;
    }

    .mobile-menu.open {
        transform: translateY(0)
    }

    .mobile-menu a {
        display: block;
        color: var(--bone);
        font-family: 'Fraunces', serif;
        font-size: 1.6rem;
        padding: 16px 0;
        border-bottom: 1px solid var(--line-ink)
    }

    .urgbar{
        font-size: 12px;
    }

    header{
        top: 36px;
    }
}

@media(max-width:500px){
    header {
        top: 53px;
    }
}