/* Program page only. Loaded AFTER site.css, which owns the tokens, the reset and the
   Arvo/Roboto faces. Generated by tools/build_page.py, do not edit by hand. */

h1,h2,h3,.slab{font-family:'Arvo','Rockwell',Georgia,serif;font-weight:700}
h1{font-size:clamp(34px,5.6vw,54px);line-height:1.08;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
h2{font-size:clamp(23px,3.2vw,32px);line-height:1.18;letter-spacing:-.012em;margin:0 0 10px;text-wrap:balance}
h3{font-size:18px;line-height:1.3;margin:0 0 6px;text-wrap:balance}
p{margin:0 0 14px;max-width:64ch}
p:last-child{margin-bottom:0}
strong{font-weight:700}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

.eyebrow{font-family:'Roboto',Arial,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.5;max-width:44ch;margin:0 0 26px}
.small{font-size:14px;color:var(--slate);line-height:1.5;max-width:58ch}

/* one big obvious button, repeated at every decision point */
.btn{display:inline-block;font-family:'Roboto',Arial,sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 34px;
  border-radius:26px;border:2px solid var(--blue-deep);background:var(--blue-deep);color:var(--btn-fg);
  box-shadow:var(--shadow)}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn.onblack{border-color:#FFFFFF;background:#FFFFFF;color:#000000}
.btn.onblack:hover{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 0}

/* full-bleed black bands, the strongest thing on their own site */
.bleed{background:var(--black);color:var(--on-black)}
.bleed h1,.bleed h2,.bleed h3{color:var(--on-black)}
.bleed p{color:var(--on-black-soft)}
.bleed .eyebrow{color:#7FA8FF}
.bleed a{color:#7FA8FF}
.bleed .lede{color:#E4E9F2}
.bleed .inner{max-width:920px;margin:0 auto;padding:56px 24px}

section{padding:46px 0;border-top:1px solid var(--hair)}
section.plain{border-top:none}

.hero{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.hero{grid-template-columns:1.25fr .75fr}}
.hero .cover{border-radius:4px;box-shadow:0 18px 44px -18px rgba(0,0,0,.8);width:100%}

.three{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:780px){.three{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--band);border:1px solid var(--hair);border-radius:6px;padding:22px 24px}
.tile h3{color:var(--blue)}
.tile p{font-size:16px;color:var(--ink-soft)}

.prog{background:var(--surface);border:1px solid var(--hair);border-radius:6px;
  box-shadow:var(--shadow);margin-top:20px;overflow:hidden}
.prog summary{cursor:pointer;list-style:none;padding:20px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.prog summary::-webkit-details-marker{display:none}
.prog summary:hover{background:var(--band)}
.prog summary:after{content:"+";font-weight:700;font-size:23px;color:var(--blue);line-height:1;flex:none}
.prog[open] summary:after{content:"\2013"}
.proghead{display:flex;flex-direction:column;gap:4px;min-width:0}
.progname{font-family:'Arvo',Georgia,serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--ink)}
.progwhy{font-size:14.5px;color:var(--slate);line-height:1.4}
.prog > *:not(summary){margin-left:26px;margin-right:26px}
.prog > *:last-child{margin-bottom:24px}
/* text takes --btn-fg, not a literal white: the blue LIFTS in dark mode, and white on the
   lifted blue measured 2.69:1. Anything sitting on --blue must use the same token. */
.prog .tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--btn-fg);background:var(--blue-deep);border-radius:20px;
  padding:5px 13px;margin:0 0 14px}
.qh{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);margin:20px 0 6px}

ul.check{list-style:none;margin:0;padding:0;display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:700px){ul.check{grid-template-columns:1fr 1fr;gap:11px 28px}}
ul.check li{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;font-size:16px;line-height:1.45}
ul.check li::before{content:"\2714";color:var(--blue);font-weight:700;line-height:1.45}
ul.plain{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:9px}
ul.plain li::marker{color:var(--blue)}

.bio{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.bio{grid-template-columns:1fr 300px}}
.bio img{border-radius:6px;width:100%}

.tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:6px;background:var(--surface);margin-top:6px}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hair)}
thead th{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#FFFFFF;background:var(--black);white-space:nowrap}
tbody th{font-family:'Arvo',Georgia,serif;font-weight:700;white-space:nowrap}
td.n,th.n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:700;color:var(--money)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}

/* FAQ: native accordions, no script at all */
.faq{border:1px solid var(--hair);border-radius:6px;background:var(--surface);overflow:hidden;margin-top:8px}
details{border-bottom:1px solid var(--hair)}
details:last-child{border-bottom:none}
summary{cursor:pointer;list-style:none;padding:17px 22px;font-family:'Arvo',Georgia,serif;
  font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'Roboto',Arial,sans-serif;font-weight:700;font-size:22px;
  color:var(--blue);flex:none;line-height:1}
details[open] summary::after{content:"\2013"}
summary:hover{background:var(--band)}
details .a{padding:0 22px 20px;font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:66ch}
details .a p{margin-bottom:10px}

/* five service areas */
.areas{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:640px){.areas{grid-template-columns:1fr 1fr}}
.area{border:1px solid var(--hair);border-radius:6px;padding:18px 20px;background:var(--band)}
.area h4{font-family:'Arvo',Georgia,serif;font-weight:700;font-size:16px;margin:0 0 6px;color:var(--blue)}
.area p{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0}
.area .n{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);display:block;margin-bottom:6px}

/* tranche rail: a real sequence, so it is numbered */
/* Each li has THREE grid items: the ::before counter, the percentage, and the description.
   It was declared with two columns, so the description fell into row 2 of the 96px column and
   wrapped one word per line. A bare text node inside a grid is the tell for this class of bug. */
ol.tranche{margin:10px 0 0;padding:0;list-style:none;counter-reset:t}
ol.tranche li{counter-increment:t;display:grid;grid-template-columns:92px 4.5rem minmax(0,1fr);
  gap:6px 16px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:baseline;font-size:16px}
ol.tranche .tw{min-width:0}
@media(max-width:560px){
  ol.tranche li{grid-template-columns:1fr;gap:3px}
  ol.tranche li::before{grid-column:1}
}
ol.tranche li:last-child{border-bottom:none}
ol.tranche li::before{content:"Payment " counter(t);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.pct{font-weight:700;font-variant-numeric:tabular-nums;color:var(--money)}

/* what the money buys: the itemized list */
.buys{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.buy{border:1px solid var(--hair);border-radius:6px;background:var(--surface);overflow:hidden}
.buy summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;flex-wrap:wrap;
  gap:6px 14px;align-items:center;justify-content:space-between}
.buy summary::-webkit-details-marker{display:none}
.buy summary:hover{background:var(--band)}
.buy summary:after{content:"+";font-family:'Roboto',Arial,sans-serif;font-weight:700;font-size:21px;
  color:var(--blue);line-height:1;flex:none;order:3}
.buy[open] summary:after{content:"\2013"}
.buyhead{display:flex;flex-direction:column;gap:3px;flex:1 1 16rem;min-width:0}
.buyname{font-family:'Arvo',Georgia,serif;font-weight:700;font-size:18px;line-height:1.25;color:var(--ink)}
.buywhy{font-size:14px;color:var(--slate);line-height:1.4}
.buytot{font-size:14.5px;font-weight:700;color:var(--money);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:none}
ul.buylist{padding:0 20px}
.buywho{padding:0 20px 18px}
ul.buylist{list-style:none;margin:0;border-top:1px solid var(--hair)}
ul.buylist li{display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:space-between;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair);font-size:15.5px;line-height:1.45}
.bi{flex:1 1 16rem;color:var(--ink-soft)}
.bp{font-weight:700;color:var(--money);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14.5px}
.buyplain{font-family:'Roboto',Arial,sans-serif;font-weight:400;font-size:13.5px;
  color:var(--slate);letter-spacing:.02em;margin-left:4px;white-space:nowrap}
.areaplain{font-size:12px!important;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate)!important;margin:0 0 6px!important}
.buywho{font-size:14.5px;line-height:1.5;color:var(--slate);margin:12px 0 0}
.buywho strong{color:var(--ink)}
.areatot{font-size:13px;font-weight:700;color:var(--money);margin:8px 0 0;font-variant-numeric:tabular-nums}

/* membership */
.ratewrap{border:1px solid var(--hair);border-radius:6px;background:var(--surface);
  overflow:hidden;margin-top:10px}
.ratewrap summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)}
.ratewrap summary::-webkit-details-marker{display:none}
.ratewrap summary:hover{background:var(--band)}
.ratewrap summary:after{content:"+";font-weight:700;font-size:20px;color:var(--blue);line-height:1;flex:none}
.ratewrap[open] summary:after{content:"\2013"}
.ratewrap .mrates{border:0;border-top:1px solid var(--hair);border-radius:0;margin:0}
.mrates{overflow-x:auto;border:1px solid var(--hair);border-radius:6px;background:var(--surface);margin-top:8px}
.mrates table{min-width:520px;font-size:15.5px}
.mrates td.n,.mrates th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mrates .save{color:var(--money);font-weight:700}
.tiers{display:grid;gap:12px;grid-template-columns:1fr;margin-top:10px}
@media(min-width:700px){.tiers{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{border:1px solid var(--hair);border-radius:6px;padding:18px 20px;background:var(--surface);
  display:flex;flex-direction:column;gap:8px}
.tier.value{border-color:var(--blue)}
.tier h4{font-family:'Arvo',Georgia,serif;font-weight:700;font-size:18px;margin:0}
.tier .price{font-weight:700;font-size:15px;color:var(--money);font-variant-numeric:tabular-nums}
.tierhead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.livetag{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--money);border:1px solid var(--money);border-radius:20px;padding:3px 9px}
.proptag{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);border:1px dashed var(--hair);border-radius:20px;padding:3px 9px}
.props{display:grid;gap:12px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:760px){.props{grid-template-columns:repeat(3,1fr)}}
.prop{border:1px dashed var(--hair);border-radius:6px;padding:16px 18px;background:var(--band)}
.prop h4{font-family:'Arvo',Georgia,serif;font-weight:700;font-size:16px;margin:0 0 6px;color:var(--ink)}
.prop p{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:0}
.tier .kindtag{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);border:1px solid var(--hair);border-radius:20px;padding:3px 9px;align-self:flex-start}
.tier.value .kindtag{color:var(--btn-fg);background:var(--blue-deep);border-color:var(--blue-deep)}
.tier .line{font-size:14.5px;color:var(--slate);line-height:1.45;margin:0}
.tier ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
/* The tick is positioned, NOT a grid column.
   As a two-column grid this broke the moment a bullet contained inline markup: <strong>Label</strong>
   plus the trailing text node are TWO grid items, so the text dropped into row 2 of the 16px tick
   column and wrapped one word per line. Same failure the tranche list hit. Absolute positioning
   keeps the li a normal block, so any inline markup flows correctly. */
.tier li{font-size:14.5px;line-height:1.42;color:var(--ink-soft);
  position:relative;padding-left:24px}
.tier li:before{content:"\2713";color:var(--blue);font-weight:700;
  position:absolute;left:0;top:0;line-height:1.42}
.draftflag{background:var(--brick-wash);border:1px solid var(--brick);color:var(--brick);
  border-radius:6px;padding:13px 17px;font-size:14.5px;line-height:1.5;margin-top:8px}
.buy sup,.areatot sup{color:var(--money);font-weight:700;font-size:.7em;margin-left:1px}
.wouldlink{text-decoration:underline dotted;text-underline-offset:2px;color:inherit}
.astnote{font-size:13px;color:var(--slate);line-height:1.5;margin-top:14px;max-width:74ch}

/* eligibility */
.elig{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:780px){.elig{grid-template-columns:1fr 1fr}}
.elig h3{margin-bottom:10px}
ul.no{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:8px;font-size:16px}
ul.no li::marker{color:var(--brick,#C0261B)}
.cohort{background:var(--blue-wash);border:1px solid var(--blue);border-radius:6px;padding:22px 24px;margin-top:8px}
.cohort dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:16px}
.cohort dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);padding-top:4px}
.cohort dd{margin:0;font-weight:500}

/* legal row in the footer */
.legalrow{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;padding-top:16px;
  border-top:1px solid #2A2A2A;font-size:13.5px}
.legalrow a{color:#7FA8FF;text-decoration:none}
.legalrow a:hover{text-decoration:underline}

footer{background:var(--black);color:var(--on-black-soft);padding:30px 0 60px;font-size:14px}
footer .wrap{max-width:920px}
footer p{max-width:72ch}
footer a{color:#7FA8FF}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------------------
   Kinetic headline (hero h1).

   Each glyph is its own inline-block span so it can be transformed. The letters
   rise, un-stretch and un-lean into place on a stagger, which is the "kinetic
   type" idea from the reference piece, built here from scratch on our own type.

   THE HIDDEN STATE LIVES ONLY IN THE KEYFRAMES, never on .kinetic span itself.
   Both stylesheets already carry a global `prefers-reduced-motion` rule that
   forces `animation:none!important`. If the start state were on the span, that
   rule would leave the headline permanently invisible for anybody who has
   reduced motion switched on. Keeping it in the keyframes and relying on
   `both` fill means "no animation" degrades to "the headline is simply there".
--------------------------------------------------------------------------- */
.kinetic{display:block}
.kinetic span{display:inline-block;white-space:pre;transform-origin:50% 100%;
  animation:ktRise .62s cubic-bezier(.2,.9,.25,1.12) both}
.kinetic span:nth-child(1){animation-delay:.02s}
.kinetic span:nth-child(2){animation-delay:.065s}
.kinetic span:nth-child(3){animation-delay:.11s}
.kinetic span:nth-child(4){animation-delay:.155s}
.kinetic span:nth-child(5){animation-delay:.2s}
.kinetic span:nth-child(6){animation-delay:.245s}
.kinetic span:nth-child(7){animation-delay:.29s}
.kinetic span:nth-child(8){animation-delay:.335s}
.kinetic span:nth-child(9){animation-delay:.38s}
.kinetic span:nth-child(10){animation-delay:.425s}
.kinetic span:nth-child(11){animation-delay:.47s}
.kinetic span:nth-child(12){animation-delay:.515s}
.kinetic span:nth-child(13){animation-delay:.56s}
.kinetic span:nth-child(14){animation-delay:.605s}
.kinetic span:nth-child(15){animation-delay:.65s}
@keyframes ktRise{
  0%  {opacity:0;transform:translateY(.42em) scaleY(1.55) skewX(-9deg)}
  55% {opacity:1}
  72% {transform:translateY(-.035em) scaleY(.97) skewX(1.5deg)}
  100%{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   MOVE$ framework: the book's five steps. Big letter, name, one line.
   Not reusing ol.tranche because its ::before hard-codes "Payment N".
--------------------------------------------------------------------------- */
.moves{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.moves li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:4px 18px;
  padding:14px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.moves .ml{font-family:'Arvo','Rockwell',Georgia,serif;font-weight:700;font-size:26px;
  color:var(--blue);line-height:1}
.moves h4{margin:0 0 3px;font-family:'Roboto',Arial,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.moves p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
@media(max-width:560px){.moves li{grid-template-columns:1.9rem minmax(0,1fr);gap:2px 12px}}

/* the book's pull quote */
.pull{font-family:'Arvo','Rockwell',Georgia,serif;font-weight:700;
  font-size:clamp(20px,2.6vw,27px);line-height:1.25;color:var(--ink);
  border-left:3px solid var(--blue);padding:4px 0 4px 20px;margin:26px 0 0}
.pull span{color:var(--blue)}

/* A ghost button sitting on a black bleed band needs white, not the blue accent:
   the blue reads at 7:1 on black but sits right next to a solid white button and
   looks like a disabled state. */
.bleed .btn.ghost{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
.bleed .btn.ghost:hover{background:#FFFFFF;color:#000000;border-color:#FFFFFF}

/* Four packages read better as a 2x2 than as four narrow columns: the Platinum
   card carries eleven bullets and collapses to one word per line at 4-up. */
@media(min-width:700px){.tiers.four{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiers.four{grid-template-columns:1fr 1fr}}
.tier .prize{margin:0;padding:10px 12px;border-radius:5px;background:var(--blue-wash);
  border:1px solid var(--blue);font-size:14.5px;line-height:1.55}
.tier .prize strong{display:block;font-family:'Roboto',Arial,sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}

/* daily podcast rail */
.week{display:grid;gap:10px;grid-template-columns:1fr;margin-top:8px;padding:0;list-style:none}
@media(min-width:640px){.week{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.week{grid-template-columns:repeat(4,1fr)}}
.week li{border:1px solid var(--hair);border-radius:6px;background:var(--band);padding:14px 16px}
.week .d{display:block;font-family:'Roboto',Arial,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.week .t{font-family:'Arvo','Rockwell',Georgia,serif;font-weight:700;font-size:15px;color:var(--ink)}

/* The book section ran as one narrow measure down the left, leaving the right half of a wide
   window empty. Two columns on desktop (copy beside the framework), stacked on mobile. */
.bookgrid{display:grid;gap:26px;grid-template-columns:1fr;align-items:start;margin-top:6px}
@media(min-width:860px){.bookgrid{grid-template-columns:1fr 1fr;gap:46px}}
.bookgrid p{max-width:54ch}
.bookgrid .qh{margin-top:0}

/* The portrait has a white studio background, so on a white page it dissolves into it.
   A hairline and a soft ground give it an edge without looking like a boxed-in photo. */
.bio img{border:1px solid var(--hair);background:var(--band);box-shadow:var(--shadow)}

/* The membership banner. It is a single flat image with type baked into it, so it must scale as
   one piece and never be cropped: the prize figures live inside the artwork. width:100% + auto
   height does that at every breakpoint, and the alt text carries the same content for anyone who
   cannot see it. */
.banner{margin:0;padding:0}
.banner img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--hair)}
.banner + .notice{margin-top:18px}

/* Per-package buttons live at the bottom of each card, so every card is the same height and the
   buttons line up across the row rather than floating at the end of uneven bullet lists. */
.tier .pick{margin-top:auto;padding-top:14px}
.tier .pick .btn{display:block;text-align:center;padding:13px 18px;font-size:13px}

/* ---------------------------------------------------------------------------
   MOVES framework: each step animates in as it scrolls into view.

   Scroll-driven, with no JavaScript, using animation-timeline: view(). Wrapped in @supports so
   the ENTIRE effect is skipped where that is unsupported, and wrapped in a no-preference query so
   it never runs for someone who asked for reduced motion.

   The rows are VISIBLE by default and the hidden state exists only inside the keyframes. That is
   the same rule as the hero headline: the global `prefers-reduced-motion` block forces
   `animation:none!important`, and a start state on the element itself would leave the whole
   framework permanently blank for those users.
--------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .moves li{
      animation: moveStepIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .moves .ml{
      animation: moveLetterIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes moveStepIn{
  from{opacity:0;transform:translateX(-34px) translateY(10px)}
  60% {opacity:1}
  to  {opacity:1;transform:none}
}
@keyframes moveLetterIn{
  from{opacity:0;transform:translateY(14px) scale(.35) rotate(-12deg);color:var(--slate)}
  55% {opacity:1}
  78% {transform:translateY(0) scale(1.28) rotate(3deg)}
  to  {opacity:1;transform:none;color:var(--blue)}
}

/* Entry requirement notice. Brick, not blue: this is a condition somebody can fail to meet, and
   it needs to read differently from the promotional copy around it. */
.notice{display:block;margin:0 0 18px;padding:14px 18px;border-radius:6px;
  background:var(--brick-wash);border:1px solid var(--brick);border-left-width:4px;
  font-size:15.5px;line-height:1.55;color:var(--ink);max-width:none}
.notice strong{color:var(--brick)}

/* Metal-colored package cards.
   The tint carries the tier name, so it sits on the BORDER, the header tag and the price, never
   behind body text: a gold or silver wash under paragraph copy destroys contrast, and the bullet
   lists are the part people actually read. Each swatch is darkened enough to hold its own against
   a white card (real gold and silver are far too pale to read as text). */
.tier.t-bronze  {border-color:#8A5A2B}
.tier.t-silver  {border-color:#6E7683}
.tier.t-gold    {border-color:#A8801A}
.tier.t-platinum{border-color:#3E4A5B}

.tier.t-bronze   .kindtag{color:#FFFFFF;background:#8A5A2B;border-color:#8A5A2B}
.tier.t-silver   .kindtag{color:#FFFFFF;background:#6E7683;border-color:#6E7683}
.tier.t-gold     .kindtag{color:#241B00;background:#D4A017;border-color:#B8860B}
.tier.t-platinum .kindtag{color:#FFFFFF;background:#3E4A5B;border-color:#3E4A5B}

.tier.t-bronze   .price{color:#8A5A2B}
.tier.t-silver   .price{color:#5A616D}
.tier.t-gold     .price{color:#8A6A10}
.tier.t-platinum .price{color:#3E4A5B}

.tier.t-bronze   li:before{color:#8A5A2B}
.tier.t-silver   li:before{color:#6E7683}
.tier.t-gold     li:before{color:#A8801A}
.tier.t-platinum li:before{color:#3E4A5B}

.tier.t-gold     .prize{background:#FBF3DE;border-color:#C9A227}
.tier.t-gold     .prize strong{color:#8A6A10}
.tier.t-platinum .prize{background:#EDF1F6;border-color:#3E4A5B}
.tier.t-platinum .prize strong{color:#3E4A5B}

/* The button keeps the tier color too, so the card reads as one object. */
.tier.t-bronze   .pick .btn{background:#8A5A2B;border-color:#8A5A2B;color:#FFFFFF}
.tier.t-silver   .pick .btn{background:#5A616D;border-color:#5A616D;color:#FFFFFF}
.tier.t-gold     .pick .btn{background:#B8860B;border-color:#B8860B;color:#FFFFFF}
.tier.t-platinum .pick .btn{background:#3E4A5B;border-color:#3E4A5B;color:#FFFFFF}
.tier .pick .btn:hover{filter:brightness(1.12)}

/* Caption under the magazine cover.
   Arvo italic in brass picks up the cover's own gold without trying to match it exactly, which
   would look like a failed match. Centred on the image rather than the column so it reads as part
   of the picture. */
.biofig{margin:0}
.biofig figcaption{margin-top:14px;text-align:center;
  font-family:'Arvo','Rockwell',Georgia,serif;font-weight:700;font-style:italic;
  font-size:clamp(17px,1.9vw,21px);line-height:1.3;letter-spacing:-.01em;color:var(--brass)}