/* The Tactics Academy · 7-Day Tactical Coach System sales page
   The upgrade page's language: navy screen chapters, cream desk chapters,
   depth from light, layered shadow and photographic grounds. No dot grid, no
   pill labels. Brand tokens from context/brand_visual.md. */

:root {
  --navy: #141D24;
  --navy-deep: #0E151B;
  --navy-raise: #1A252E;
  --cream: #FAF7F0;
  --cream-deep: #F1EBDF;
  --ink: #1D2730;
  --muted: #56616B;
  --light: #C7D1D9;
  --light-soft: #8FA1AE;
  --blue: #3281BC;
  --blue-deep: #2A6C9E;
  --blue-light: #6FAEE6;
  --coral: #E8786E;
  --hair-light: rgba(255, 255, 255, .1);
  --hair-ink: rgba(29, 39, 48, .12);
  --gold: #E3A008;

  --display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --serif: "Lora", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--navy); color: var(--ink);
  font: 400 1.03rem/1.65 var(--sans); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, p, h1, h2, h3, ol, ul, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Paper grain over everything, very faint. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- grounds */
.ground--navy {
  position: relative; color: #F4F1EA; background-color: var(--navy);
  background-image: linear-gradient(180deg, #172129 0%, var(--navy) 45%, var(--navy-deep) 100%);
  isolation: isolate;
}
.ground--cream {
  position: relative; color: var(--ink); background-color: var(--cream);
  background-image: linear-gradient(180deg, #FDFBF7 0%, var(--cream) 40%, var(--cream-deep) 100%);
}
.ground--deep { background-image: linear-gradient(180deg, var(--cream-deep) 0%, #EEE6D7 100%); }
/* A hard cut from navy to cream: the cream reads as a sheet laid over the screen. */
.ground--navy + .ground--cream { box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .55); }
.ground--cream::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));
}

/* ------------------------------------------------------------------ type */
.display {
  font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.026em;
  text-wrap: balance; color: inherit;
}
.display em { font-style: italic; color: var(--blue); }
.ground--navy .display em { color: var(--blue-light); }
.display--hero { font-size: clamp(2.7rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -0.03em; line-height: .98; }
.display--xl { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.4rem); letter-spacing: -0.03em; }
.display--lg { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); }
.display--md { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem); line-height: 1.06; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.06rem, .98rem + .35vw, 1.24rem); line-height: 1.55; color: var(--light); max-width: 36rem; text-wrap: pretty; }
.body { color: var(--muted); max-width: 36rem; text-wrap: pretty; }
.ground--navy .body { color: var(--light); }
.stack > * + * { margin-top: 1.1rem; }
.stack > h2 + * { margin-top: 1.6rem; }

/* A plain uppercase label with a short rule (no pills, Lucas's ruling). */
.label {
  display: flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep);
}
.label::before { content: ""; flex: none; width: 1.6rem; height: 1.5px; background: currentColor; }
.ground--navy .label, .label--light { color: var(--blue-light); }

/* --------------------------------------------------------------- buttons */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.5rem; padding: .9rem 1.6rem;
  background: linear-gradient(180deg, #3B8BC6, var(--blue)); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  font: 600 1rem/1.15 var(--sans); letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 26px -10px rgba(50, 129, 188, .75), 0 2px 4px rgba(0, 0, 0, .18);
  transition: background-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(50, 129, 188, .7), 0 2px 4px rgba(0, 0, 0, .2); }
}
.button--full { width: 100%; }
.button--lg { min-height: 3.9rem; padding-inline: 2.2rem; font-size: 1.06rem; }
.button--sm { min-height: 2.9rem; padding: .6rem 1.1rem; font-size: .9rem; }

.trust { margin-top: .9rem; font-size: .86rem; color: var(--light-soft); text-align: center; text-wrap: balance; }
.trust + .trust { margin-top: .35rem; }
.ground--cream .trust { color: var(--muted); }
.trust--left { text-align: left; }
.trust--g { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.trust--left.trust--g { justify-content: flex-start; }
.g-dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* The shine that crosses the course cover now and then. */
.shine {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none; overflow: hidden;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  animation: shine 7s var(--ease) 1.6s infinite;
}
@keyframes shine { 0% { background-position: -150% 0; } 30%, 100% { background-position: 150% 0; } }

/* ------------------------------------------------------------------ hero */
.hero { overflow: clip; padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.hero__world {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: clip; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .5) 30%, #000 65%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .5) 30%, #000 65%);
}
.hero__world img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform-origin: 60% 45%; animation: drift 24s var(--ease) both; }
@keyframes drift { from { transform: scale(1.12) translate3d(1.5%, 0, 0); } to { transform: scale(1.02); } }
.hero__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50rem 34rem at 78% 40%, rgba(50, 129, 188, .24), transparent 70%),
    radial-gradient(46rem 40rem at 0% 30%, rgba(14, 21, 27, .85), transparent 70%),
    linear-gradient(180deg, rgba(14, 21, 27, .35) 0%, transparent 30%, transparent 60%, var(--navy-deep) 100%);
}

.top { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.top__logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.top__buy {
  font-size: .9rem; font-weight: 600; text-decoration: none; color: #fff;
  padding: .55rem 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(14, 21, 27, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.top__buy:hover { border-color: var(--blue-light); background: rgba(50, 129, 188, .2); }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-top: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__copy .display { margin-top: 1.2rem; }
.hero__copy .lede { margin-top: 1.5rem; color: #E6ECF1; }
.hero__sub { margin-top: 1rem; color: var(--light-soft); max-width: 34rem; font-size: .98rem; text-wrap: pretty; }
.hero__act { margin-top: 2rem; max-width: 30rem; }

.rise { animation: rise .9s var(--ease) both; }
.hero__copy .rise:nth-child(2) { animation-delay: .08s; }
.hero__copy .rise:nth-child(3) { animation-delay: .16s; }
.hero__copy .rise:nth-child(4) { animation-delay: .22s; }
.hero__copy .rise:nth-child(5) { animation-delay: .3s; }
.board.rise { animation-delay: .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* ---------------------------------------------------------- the board */
.board {
  position: relative; border-radius: 18px; overflow: clip;
  background: var(--navy-raise); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 60px 120px -40px rgba(0, 0, 0, .95), 0 12px 28px -14px rgba(0, 0, 0, .7), 0 0 180px -30px rgba(50, 129, 188, .45);
  transform: rotate(.6deg);
}
.board__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .6rem .6rem .7rem; border-bottom: 1px solid var(--hair-light);
  background: linear-gradient(180deg, rgba(30, 43, 54, .95), rgba(20, 29, 36, .95));
}
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.seg__btn {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: .45rem .9rem; border-radius: 8px; color: var(--light-soft);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: color .25s var(--ease);
}
.seg__btn[aria-pressed="true"] { color: #fff; }
.seg__btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.seg__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px;
  background: linear-gradient(180deg, #3B8BC6, var(--blue)); box-shadow: 0 6px 16px -6px rgba(50, 129, 188, .9);
  transform: translateX(100%); transition: transform .45s var(--ease);
}
.board[data-state="what"] .seg__thumb { transform: translateX(0); }
.board__replay {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  color: var(--light); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.board__replay:hover { color: #fff; border-color: var(--blue-light); }
.board__replay:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
html:not(.js) .board__bar { display: none; }

.board__plate { position: relative; }
.board__svg { width: 100%; height: auto; aspect-ratio: 1080 / 900; }
.board__pitch { filter: saturate(.85) brightness(.82); }
.board__shade { fill: rgba(14, 21, 27, .12); }

.opp circle { fill: #F4F1EA; stroke: var(--navy); stroke-width: 4; }
.ours circle { fill: var(--blue); stroke: #fff; stroke-width: 4; }
.ours .ours--ball { fill: #3B8BC6; filter: drop-shadow(0 0 10px rgba(111, 174, 230, .8)); }
.ball { fill: #fff; stroke: var(--navy); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }

.ballpath { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 14; opacity: .95; }
.ballpath--shot { stroke-dasharray: none; stroke-width: 5; }
.run { fill: none; stroke-width: 6; stroke-linecap: round; }
.run--b { stroke: #8CC4F0; stroke-dasharray: 16 12; }
.run--r { stroke: #F0958C; stroke-dasharray: 12 10; }
.board__zone { fill: rgba(111, 174, 230, .16); stroke: rgba(140, 196, 240, .9); stroke-width: 4; stroke-dasharray: 14 10; }

.chip rect { fill: rgba(12, 18, 23, .9); stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.chip text { fill: #fff; font: 600 26px var(--sans); text-anchor: middle; letter-spacing: .02em; }
.chip--r rect { stroke: rgba(240, 149, 140, .7); }
.b-zone .chip rect { fill: rgba(42, 108, 158, .92); stroke: rgba(255, 255, 255, .3); }

/* The board is drawn by course.js. These are only its resting looks:
   in "what" view the movement layer is hidden and the ball path is bright. */
.board[data-state="what"] .b-why { opacity: 0; }
.board .b-why, .board .ballpath { transition: opacity .5s var(--ease); }

/* --------------------------------------------------------------- proof */
.proof { padding-block: clamp(4.5rem, 9vw, 8rem); }
.proof__h { max-width: 36rem; }
.spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.say {
  position: relative; padding: 1.6rem 1.5rem 1.4rem; border-radius: 16px; background: #fff; border: 1px solid var(--hair-ink);
  box-shadow: 0 1px 3px rgba(29, 39, 48, .06);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.say:nth-child(2) { margin-top: 2.5rem; }
.say:nth-child(3) { margin-top: 5rem; }
@media (hover: hover) and (pointer: fine) {
  .say:hover { transform: translateY(-3px); border-color: rgba(50, 129, 188, .5); box-shadow: 0 12px 34px rgba(50, 129, 188, .14); }
}
.say__n { display: block; font: italic 400 3.6rem/.8 var(--display); color: var(--blue); margin-bottom: 1rem; }
.stars { color: var(--gold); letter-spacing: .14em; font-size: .9rem; }
.say blockquote { margin-top: .6rem; font: 500 1.08rem/1.5 var(--serif); color: var(--ink); }
.say figcaption, .film figcaption { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin-top: 1rem; font-size: .86rem; color: var(--muted); }
.say figcaption strong, .film figcaption strong { color: var(--ink); font-weight: 600; }
.say figcaption { flex-direction: column; gap: .1rem; }

.films { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(3rem, 6vw, 5rem); align-items: end; }
.film__frame { border-radius: 14px; overflow: clip; background: var(--navy); box-shadow: 0 1px 3px rgba(29, 39, 48, .08), 0 40px 80px -40px rgba(29, 39, 48, .6); }
.film--wide video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.film--tall video { width: 100%; height: auto; aspect-ratio: 9 / 16; }

/* ---------------------------------------------------------- recognition */
.know { padding-block: clamp(4.5rem, 9vw, 8rem); }
.know__head { max-width: 50rem; }
.moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.moment {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.3rem; align-items: center;
  padding: 1.3rem; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--hair-ink);
  box-shadow: 0 1px 3px rgba(29, 39, 48, .05);
}
.moment p { color: var(--ink); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.moment__art { width: 100%; height: auto; border-radius: 10px; }
.m-pitch { fill: var(--navy); }
.m-line { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.m-dash { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.m-us { fill: var(--blue); stroke: #fff; stroke-width: 1.6; }
.m-opp { fill: #F4F1EA; stroke: var(--navy); stroke-width: 1.6; }
.m-q { fill: none; stroke: #8CC4F0; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.m-gap { fill: rgba(111, 174, 230, .16); stroke: rgba(140, 196, 240, .8); stroke-width: 1.4; stroke-dasharray: 4 3; }
.m-bubble { fill: #F4F1EA; }
.m-txt { fill: none; stroke: var(--light-soft); stroke-width: 3; stroke-linecap: round; }
.m-mark { fill: #F0958C; font: italic 400 40px var(--display); }
.js .moment:not(.is-in) .m-draw { stroke-dashoffset: 100; }
.js .moment .m-draw { transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.js .moment:not(.is-in) .m-fade { opacity: 0; }
.js .moment .m-fade { transition: opacity .6s var(--ease) 1.1s; }
.know__foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 46rem; }
.know__big { font: 600 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.know__foot .body { margin-top: .9rem; }

/* ----------------------------------------------------------- the course */
.build { padding-block: clamp(4.5rem, 9vw, 8.5rem); overflow: clip; }
.build__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50rem 30rem at 15% 30%, rgba(50, 129, 188, .22), transparent 70%), radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(8, 13, 17, .8) 100%);
}
.build__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.build__side { position: sticky; top: 3rem; }
.build__cover { position: relative; width: min(58%, 16rem); margin-top: 2.6rem; transform: rotate(-3deg); }
.build__cover img { border-radius: 8px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07), 0 0 120px -30px rgba(50, 129, 188, .5); }
.gains { margin-top: 1.2rem; border-top: 1px solid var(--hair-light); }
.gains li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding-block: 1.35rem; border-bottom: 1px solid var(--hair-light); }
.gains__n { font: italic 400 1.8rem/1 var(--display); color: var(--blue-light); padding-top: .05rem; }
.gains h3 { font: 600 1.18rem/1.25 var(--serif); color: #fff; letter-spacing: -.005em; }
.gains p { margin-top: .4rem; color: var(--light); font-size: .97rem; max-width: 34rem; }
.build__foot { margin-top: 1.8rem; font: 500 1.1rem/1.5 var(--serif); color: #fff; max-width: 34rem; }

/* --------------------------------------------------------- seven stages */
.days { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.days__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.days__side { position: sticky; top: 3rem; }
.days__side .body { margin-top: 1.5rem; }
.days__act { margin-top: 2rem; max-width: 24rem; }

.rail { position: relative; --p: 1; }
.rail__track { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(29, 39, 48, .12); }
.rail__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--blue-light), var(--blue)); transform-origin: top; transform: scaleY(var(--p)); }
.day { position: relative; padding: 0 0 2.4rem 3.2rem; }
.day:last-child { padding-bottom: 0; }
.day__dot {
  position: absolute; left: 0; top: .2rem; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream); border: 2px solid rgba(29, 39, 48, .2);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.day__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .35s var(--ease); }
.day__n { font: italic 400 1.5rem/1 var(--display); color: var(--blue); }
.day h3 { margin-top: .45rem; font: 600 1.28rem/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.day > p:last-child { margin-top: .45rem; color: var(--muted); max-width: 34rem; }
.day.is-on .day__dot { border-color: var(--blue); box-shadow: 0 0 0 6px rgba(50, 129, 188, .14); }
.day.is-on .day__dot::after { transform: scale(1); }
/* Before a day is reached it sits back a little. Without JavaScript, all are on. */
.js .rail.is-live .day:not(.is-on) h3, .js .rail.is-live .day:not(.is-on) > p:last-child { opacity: .5; }
.day h3, .day > p:last-child { transition: opacity .35s var(--ease); }

/* ------------------------------------------------------------ structure */
.order { padding-block: clamp(4.5rem, 9vw, 8rem); overflow: clip; --p: 1; }
.order__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.notes { position: relative; display: grid; gap: .6rem; width: min(100%, 22rem); margin-inline: auto; padding-left: 1.4rem; }
.notes__spine {
  position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue-light), var(--blue));
  transform-origin: top; transform: scaleY(var(--p)); opacity: var(--p);
}
.note {
  --q: calc(1 - var(--p));
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--hair-ink);
  font: 600 1rem/1.3 var(--serif); color: var(--ink);
  box-shadow: 0 1px 3px rgba(29, 39, 48, .06), 0 calc(14px * var(--q)) calc(30px * var(--q)) -16px rgba(29, 39, 48, .5);
  transform: translate(calc(var(--sx) * var(--q)), calc(var(--sy) * var(--q))) rotate(calc(var(--sr) * var(--q)));
  will-change: transform;
}
.note b {
  display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font: italic 400 1.05rem/1 var(--display); color: #fff; background: var(--blue);
  opacity: var(--p); transform: scale(calc(.6 + .4 * var(--p)));
}

/* ------------------------------------------------------------ the offer */
.close-offer { padding-block: clamp(4.5rem, 9vw, 8rem); overflow: clip; }
.offer__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("assets/world-above-m.webp") center / cover no-repeat; opacity: .12; filter: blur(2px); }
.close-offer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50rem 30rem at 50% 50%, rgba(50, 129, 188, .22), transparent 70%); }
.panel {
  display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 22rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem); border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 43, 54, .9), rgba(20, 29, 36, .95));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 160px -40px rgba(50, 129, 188, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel__cover { position: relative; width: clamp(8rem, 14vw, 12rem); transform: rotate(-3deg); }
.panel__cover img { border-radius: 8px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); }
.panel__h { font: 400 clamp(2rem, 1.4rem + 1.8vw, 3rem)/1.05 var(--display); letter-spacing: -.02em; color: #fff; }
.ledger { margin-top: 1.2rem; display: grid; }
.ledger li { position: relative; padding: .7rem 0 .7rem 1.9rem; color: #E6ECF1; border-bottom: 1px dashed rgba(255, 255, 255, .14); font-size: .98rem; }
.ledger li:last-child { border-bottom: 0; }
.ledger li::before {
  content: ""; position: absolute; left: 0; top: .95rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.price { display: grid; gap: .3rem; padding-bottom: 1.2rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--hair-light); text-align: center; }
.price__n { font: 400 clamp(3rem, 2.4rem + 2vw, 3.9rem)/1 var(--display); letter-spacing: -.02em; color: #fff; }
.price__s { font-size: .95rem; color: var(--blue-light); font-weight: 500; }

/* ----------------------------------------------------------- who it's for */
.fit { padding-block: clamp(4.5rem, 9vw, 8rem); }
.fit__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ticks { margin-top: 1.1rem; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 2rem; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.needs__card { padding: 1.2rem 1.25rem; border-radius: 16px; background: #fff; border: 1px solid var(--hair-ink); color: var(--muted); font-size: .97rem; box-shadow: 0 1px 3px rgba(29, 39, 48, .05); }
.needs__card--do { background: var(--navy); border-color: var(--navy); color: var(--light); box-shadow: 0 30px 60px -30px rgba(20, 29, 36, .7); }
.needs__k { display: block; margin-bottom: .5rem; font: italic 400 1.5rem/1 var(--display); color: var(--ink); }
.needs__card--do .needs__k { color: var(--blue-light); }
.fit__close { margin-top: 2rem; font: 500 1.12rem/1.5 var(--serif); color: var(--ink); max-width: 34rem; }

/* ------------------------------------------------------------- why I built */
.why { padding-block: clamp(4.5rem, 9vw, 8rem); }
.why__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.why__photo { position: sticky; top: 3rem; }
.why__photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(29, 39, 48, .08), 0 50px 90px -45px rgba(29, 39, 48, .75); transform: rotate(-1.5deg);
}
.why__photo figcaption { display: grid; margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }
.why__photo figcaption strong { font: italic 400 1.5rem/1.1 var(--display); color: var(--ink); }
.why__pull { font: 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.12 var(--display); color: var(--ink); letter-spacing: -.015em; padding-left: 1.2rem; border-left: 2px solid var(--blue); }

/* ---------------------------------------------------------------- faq */
.faq { padding-block: clamp(4.5rem, 8vw, 7rem); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list details { border-bottom: 1px solid var(--hair-ink); }
.faq__list details:first-child { border-top: 1px solid var(--hair-ink); }
.faq__list summary {
  position: relative; list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0;
  font: 600 1.08rem/1.35 var(--serif); color: var(--ink);
}
.faq__list summary::-webkit-details-marker { display: none; }
/* A plus whose upright turns flat to make a minus. */
.faq__list summary::before, .faq__list summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--blue); transition: transform .3s var(--ease);
}
.faq__list summary::after { transform: rotate(90deg); }
.faq__list details[open] summary::after { transform: rotate(0deg); }
.faq__list summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.faq__a { padding: 0 2.5rem 1.3rem 0; color: var(--muted); }
.faq__a p + p { margin-top: .7rem; }
.faq__list details[open] .faq__a { animation: open .35s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------------------------------------------------- guarantee */
.guarantee { padding-block: clamp(4rem, 8vw, 7rem); }
.guarantee__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 62rem; }
.seal { width: clamp(8.5rem, 16vw, 12rem); filter: drop-shadow(0 24px 30px rgba(29, 39, 48, .25)); }
.seal svg { width: 100%; height: auto; animation: turn 40s linear infinite; }
.seal__ring { fill: var(--navy); }
.seal__inner { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; }
.seal__text { fill: var(--blue-light); font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.seal__num, .seal__days { animation: turn-back 40s linear infinite; transform-origin: 100px 100px; }
.seal__num { fill: #fff; font: 400 64px var(--display); }
.seal__days { fill: var(--light); font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes turn-back { to { transform: rotate(-360deg); } }
.signed { position: relative; display: inline-flex !important; align-items: center; gap: .75rem; padding-bottom: .6rem; font: italic 400 1.4rem/1 var(--display); color: var(--ink); }
.signed img { width: 44px; height: 44px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(29, 39, 48, .5); }
.signed__line { position: absolute; left: 3.4rem; bottom: -.3rem; width: 9rem; height: auto; overflow: visible; }
.signed__line path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
.js [data-in]:not(.is-in) .signed__line path { stroke-dashoffset: 200; }
.js [data-in] .signed__line path { transition: stroke-dashoffset 1.2s var(--ease) .6s; }

/* --------------------------------------------------------------- finale */
.finale { overflow: clip; }
.finale__world { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .42; }
.finale__world img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.finale__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 36rem at 50% 45%, rgba(14, 21, 27, .55), transparent 75%), linear-gradient(180deg, var(--navy) 0%, rgba(20, 29, 36, .5) 25%, rgba(14, 21, 27, .65) 70%, var(--navy-deep) 100%);
}
.finale__in { display: grid; justify-items: center; text-align: center; padding-block: clamp(5.5rem, 12vw, 10rem) clamp(4rem, 8vw, 6rem); }
.finale__in .display { max-width: 52rem; }
.finale__copy { margin-top: 1.8rem; display: grid; justify-items: center; gap: .9rem; }
.finale__copy .lede { color: #E6ECF1; }
.finale__ask { margin-top: .6rem; font: 600 1.2rem/1.4 var(--serif); color: #fff; }
.finale__act { margin-top: 2rem; width: min(100%, 26rem); }
.finale__act .button { width: 100%; }

.foot { padding-block: 2rem 7rem; border-top: 1px solid var(--hair-light); background: rgba(8, 13, 17, .6); }
.foot__legal { font-size: .78rem; line-height: 1.6; color: var(--light-soft); max-width: 52rem; }
.foot__legal--fine { margin-top: .7rem; font-size: .72rem; opacity: .85; }

/* --------------------------------------------------------------- dock */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(14, 21, 27, .88); border-top: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.dock.is-on { transform: none; }
.dock__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--maxw); margin-inline: auto; }
.dock__txt { display: grid; color: #fff; font-size: .9rem; line-height: 1.25; }
.dock__txt strong { font-weight: 600; }
.dock__txt span { color: var(--light-soft); font-size: .84rem; }
.dock .button { white-space: nowrap; flex: none; }

/* ---------------------------------------------------- scroll reveals */
[data-in] { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js [data-in]:not(.is-in) { opacity: 0; transform: translateY(26px); }
/* The five outcomes blur in one after another. */
.js .gains [data-in]:not(.is-in) { filter: blur(6px); transform: translateY(10px); }
.gains [data-in] { transition-delay: calc(var(--i, 0) * 70ms); }
.spread .say:nth-child(2) { transition-delay: .08s; }
.spread .say:nth-child(3) { transition-delay: .16s; }
.moments .moment:nth-child(2n) { transition-delay: .08s; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 959px) {
  .hero__grid, .build__grid, .days__grid, .order__grid, .fit__grid, .why__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .build__side, .days__side, .why__photo { position: static; }
  .build__cover { display: none; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel__cover { width: 8rem; margin: -.2rem auto .2rem; }
  .moments { grid-template-columns: minmax(0, 1fr); }
  .spread { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .say:nth-child(2), .say:nth-child(3) { margin-top: 0; }
  .board { transform: none; max-width: 40rem; }
  .why__photo { max-width: 22rem; }
  .notes { margin-top: 1rem; }
}
@media (max-width: 759px) {
  body { font-size: 1rem; }
  .top { padding-block: .9rem; }
  .top__logo { width: 34px; height: 34px; }
  .hero__world { opacity: .42; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%); }
  .display--hero { font-size: 2.65rem; }
  .hero__grid { padding-top: .8rem; gap: 2.2rem; }
  .hero__copy .lede { margin-top: 1.1rem; }
  .hero__act { margin-top: 1.5rem; }
  .hero__act .button { width: 100%; }
  .seg__btn { padding: .42rem .7rem; font-size: .78rem; }
  .moment { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .moment__art { max-width: 15rem; }
  .films { grid-template-columns: minmax(0, 1fr); }
  .film--tall { width: min(70%, 18rem); }
  .needs { grid-template-columns: minmax(0, 1fr); }
  .guarantee__grid { grid-template-columns: minmax(0, 1fr); }
  .why__photo { max-width: 15rem; }
  .days__act .button { width: 100%; }
  .dock__txt strong { display: none; }
  .dock__txt { font-size: .82rem; }
  .dock__in { gap: .75rem; }
  .dock .button { padding-inline: 1rem; }
}
@media (max-width: 380px) {
  .display--hero { font-size: 2.35rem; }
  .seg__btn { padding-inline: .55rem; }
}

/* --------------------------------------------------------- reduced motion
   The static state is the finished scene. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-in]:not(.is-in) { opacity: 1; transform: none; filter: none; }
  .js .moment:not(.is-in) .m-draw { stroke-dashoffset: 0; }
  .js .moment:not(.is-in) .m-fade { opacity: 1; }
  .js [data-in]:not(.is-in) .signed__line path { stroke-dashoffset: 0; }
  .rail, .order { --p: 1 !important; }
  .js .rail.is-live .day:not(.is-on) h3, .js .rail.is-live .day:not(.is-on) > p:last-child { opacity: 1; }
  .dock { transition: none; }
}