/* ============================================================
   The AI Trading Engine, theme layer over the cloned skeleton.

   Load order: bundle.min.css (vendor, untouched)
               te-colors.css  (GENERATED, vendor palette remapped)
               te-theme.css   (this file, hand written, wins last)

   Everything in here is a deliberate brand decision. The mechanical
   hue-for-hue swap lives in te-colors.css, regenerate that with
   tools/gen-te-colors.py rather than adding colour rules here.
   ============================================================ */
:root{
  /* ink, the dark ground the page mostly sits on */
  --te-ink:#0f1412;   --te-ink-2:#161d1a;  --te-ink-3:#1e2724;
  /* paper, the light panels */
  --te-paper:#fbfaf7; --te-paper-2:#eef2f0;
  --te-paper-text:#1e2724; --te-paper-text-2:#4a5754;
  /* type on ink */
  --te-text:#e8edea;  --te-text-2:#b3c0bb; --te-text-3:#8a9793;
  /* brand: green carries identity, gold carries the money and the CTA */
  --te-green:#1ec072; --te-green-hi:#3ad588; --te-green-lo:#00a352;
  --te-gold:#f8c72a;  --te-gold-hi:#ffd75e; --te-gold-lo:#e0ad14;
  --te-red:#ff7d8a;
  --te-rule:rgba(244,241,232,.08);
}

/* ---- ground and type ---------------------------------------------------- */
/* the generated layer carries the vendor's own !important flags, so the
   deliberate ground colours have to be stated at that weight to land */
body{background:var(--te-ink) !important;color:var(--te-text)}
h1,h2,h3,h4{color:var(--te-text)}
a{color:var(--te-green-hi)}
.bg-dark,.bg-black{background:var(--te-ink) !important}

/* light panels: warm paper rather than clinical white, dark type inside */
.bg-white,.bg-light{background:var(--te-paper) !important;color:var(--te-paper-text) !important}
.bg-white h1,.bg-white h2,.bg-white h3,.bg-white h4,
.bg-light h1,.bg-light h2,.bg-light h3,.bg-light h4{color:var(--te-paper-text) !important}

/* ---- display type -------------------------------------------------------
   Sora carries the headlines, Poppins carries the body. Both are local, the
   page makes zero external requests and a blocked font host cannot shift or
   hide a headline. */
h1,h2,h3,h4,.te-pre,.te-clock b,.price-card h2,.priceCard h2{
  font-family:'Sora',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.015em}
h1,h2{font-weight:800}

/* ---- hero ---------------------------------------------------------------- */
.te-pre{font-size:1.3rem;line-height:1.4;font-weight:600;color:var(--te-text-2);
  margin:0 auto .6rem;max-width:52ch}
.te-pre b{color:var(--te-green-hi);font-weight:700}
/* +2px at the 14px root the vendor uses on desktop, so the subhead sits just
   under the width of the headline's second line */
.te-sub{font-size:1.45rem;line-height:1.5;color:var(--te-text-2);margin-bottom:0}
.te-sub b{color:var(--te-text);font-weight:700}
@media(max-width:767px){.te-pre{font-size:15px}.te-sub{font-size:15px}}

/* the number is the whole headline, so it gets a marker underline rather than
   a hairline. Drawn as a gradient background so it sits under the descenders
   instead of cutting through them. */
.te-uline{text-decoration:none;
  background-image:linear-gradient(var(--te-gold),var(--te-gold));
  background-repeat:no-repeat;background-size:100% .14em;background-position:0 96%;
  padding-bottom:.04em}

/* the two numbers the headline turns on. Gold, because on this page gold is the
   money colour, and a touch larger so they read as figures rather than words. */
.te-num{color:var(--te-gold);font-weight:800;font-size:1.14em;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- the wall of proof ---------------------------------------------------
   Four numbers, each one checkable, sitting above the fold. This is the ramp:
   the reader is not asked to believe a claim, they are handed four of them at
   once with the sample sizes attached. */
.te-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(30,192,114,.22);border:1px solid rgba(30,192,114,.22);
  border-radius:1rem;overflow:hidden}
.te-proof__i{background:var(--te-ink);padding:1.15rem 1rem;text-align:center}
.te-proof__i b{display:block;font-family:'Sora',ui-sans-serif,sans-serif;
  font-size:2.25rem;line-height:1;font-weight:800;color:var(--te-green-hi);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.te-proof__i:nth-child(1) b{color:var(--te-gold)}
.te-proof__i i{display:block;margin-top:.45rem;font-style:normal;font-size:.9rem;
  line-height:1.45;color:var(--te-text-3)}
@media(max-width:767px){
  .te-proof{grid-template-columns:repeat(2,1fr)}
  .te-proof__i{padding:1.1rem .6rem}
  .te-proof__i b{font-size:1.7rem}
  .te-proof__i i{font-size:.78rem}
}

/* ---- hero particle field ------------------------------------------------
   Sits behind the headline, never in front of it, and never takes a click. */
section[data-sec="01"]{position:relative}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:1}
#heroBus{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:visible}
#heroRails{position:absolute;top:-14px;left:50%;width:100vw;max-width:1500px;
  height:calc(100% + 28px);transform:translateX(-50%);z-index:0;
  pointer-events:none;overflow:visible}
.hero-aurora{position:absolute;inset:-14% 0 auto 0;height:74%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 60% at 32% 26%,rgba(30,192,114,.20),transparent 70%),
             radial-gradient(46% 56% at 68% 40%,rgba(0,163,82,.15),transparent 70%);
  filter:blur(44px);opacity:.7;animation:teAurora 16s ease-in-out infinite alternate}
@keyframes teAurora{
  0%{transform:translate3d(-3%,0,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.08)}
  100%{transform:translate3d(0,-2%,0) scale(1.03)}}
@media(prefers-reduced-motion:reduce){.hero-aurora{animation:none}}
section[data-sec="01"] > .container{position:relative;z-index:3}

/* ---- testimonials -------------------------------------------------------
   Real people, real names, and the class each one sat in printed underneath.
   The border runs a slow light around the card, which reads as "live" without
   animating anything the reader has to look at. */
.te-testi{position:relative;background:url(../images/bg/chart-wide.png?v=fbd1dbb9) center bottom no-repeat;
  background-size:cover;padding-top:4.5rem;padding-bottom:4.5rem}
/* one line on desktop, and big enough to actually read. The width cap is off
   because 60ch was what forced it to wrap. */
/* clamped in px, not rem. The vendor drops the html root to 10px below 1199,
   which was shrinking this line to 12px on a 1150 laptop. */
.te-testi__note{max-width:none;margin:1rem auto 0;line-height:1.5;
  font-size:clamp(15px,1.22rem,20px);color:var(--te-text-2);text-wrap:balance}
@media(max-width:767px){.te-testi__note{font-size:clamp(14px,1.05rem,16px)}}
.te-quote__head{font-family:'Sora',ui-sans-serif,sans-serif;font-weight:700;
  font-size:1.02rem;color:var(--te-green-hi);margin-bottom:.55rem;letter-spacing:-.01em}
.te-klass{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--te-gold)}
.te-testi .testi-img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(30,192,114,.45)}

@property --te-beamang{syntax:'<angle>';inherits:false;initial-value:0deg}
.te-beam{position:relative;isolation:isolate}
.te-beam::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  z-index:5;pointer-events:none;
  background:conic-gradient(from var(--te-beamang),
    transparent 0 62%, rgba(30,192,114,.85) 78%, #d9fff0 87%, rgba(30,192,114,.85) 94%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:teBeam 6s linear infinite}
.te-beam:nth-of-type(2)::after{animation-delay:-3s}
@keyframes teBeam{to{--te-beamang:360deg}}
@media(prefers-reduced-motion:reduce){.te-beam::after{animation:none;
  background:linear-gradient(120deg,rgba(30,192,114,.5),rgba(30,192,114,.15))}}

/* ---- top bar ------------------------------------------------------------
   No early bird and no price rise on this offer, so the only honest pressure
   is the hard close and the seat count. Both are true and both are fixed. */
.te-bar__label{font-size:1.15rem;line-height:1.35;margin:0;color:var(--te-text)}
.te-bar__label b{color:var(--te-gold-hi);font-weight:700}
.te-bar__sub{display:inline-block;margin-top:.25rem;font-size:.92rem;color:var(--te-text-3)}
.te-clock{display:flex;gap:.5rem;align-items:stretch}
.te-clock__u{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:4.2rem;padding:.45rem .3rem;border-radius:.6rem;
  background:rgba(30,192,114,.09);border:1px solid rgba(30,192,114,.26)}
.te-clock__u b{font-size:1.75rem;line-height:1;font-weight:800;color:var(--te-text);
  font-variant-numeric:tabular-nums}
.te-clock__u i{font-style:normal;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--te-text-3);margin-top:.22rem}
.te-clock__shut{font-weight:700;color:var(--te-red)}
@media(max-width:767px){
  .te-bar__label{font-size:1rem}
  .te-clock__u{min-width:3.4rem}
  .te-clock__u b{font-size:1.35rem}
}

/* ---- CTA ---------------------------------------------------------------- */
/* Gold, and gold only. Nothing else on the page is allowed to be gold, which is
   what makes a buy button findable in a 48,000px scroll. */
.te-cta,.btn-primary,.btn.btn-primary,.submit-btn,
.btn-style-1,.o1-button,.access-btn.green{
  background:linear-gradient(180deg,var(--te-gold-hi),var(--te-gold)) !important;
  border-color:var(--te-gold) !important;
  color:#1a1405 !important;font-weight:800 !important}
.te-cta{display:inline-block;padding:18px 44px;border-radius:99px;font-size:1.15rem;
  text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 14px 44px rgba(248,199,42,.34)}
.te-cta:hover,.btn-primary:hover,.submit-btn:hover,
.btn-style-1:hover,.o1-button:hover,.access-btn.green:hover{
  filter:brightness(1.06);color:#1a1405 !important;
  box-shadow:0 14px 44px rgba(248,199,42,.34) !important;background-position:0 0 !important}
/* outline variant of the same button: gold rule and gold type, no fill */
.access-btn{color:var(--te-gold) !important;border-color:var(--te-gold) !important}

/* ---- semantic type colours --------------------------------------------- */
.text-primary,.txt-primary,.text-success{color:var(--te-green-hi) !important}
.text-warning,.txt-yellow{color:var(--te-gold-hi) !important}
.text-danger{color:var(--te-red) !important}

/* ---- placeholders while the build is in progress ------------------------ */
.te-video-slot{display:flex;align-items:center;justify-content:center;min-height:320px;border-radius:16px;
  background:var(--te-ink-2);border:1px dashed rgba(255,255,255,.22);color:rgba(232,237,234,.5);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ---- AOS fade-left / fade-right translate elements sideways as they animate
   in, which briefly pushes the document wider and flashes a scrollbar.
   Clipping at the root is the standard fix and costs nothing. ------------- */
html,body{overflow-x:hidden;max-width:100%}

/* The hero headline is the h1 now. The vendor styled that slot as an h2, so the
   h1 has to walk the same size ladder or promoting the tag resizes the hero.
   Mirrors the bundle's h2 rules exactly, including its two px breakpoints. */
h1{font-size:3.4rem;line-height:1.14;font-weight:700}
/* balance evens the lines out instead of leaving two words stranded on the
   last one, which is what makes a long headline look broken rather than long */
h1,.te-pre,.te-sub{text-wrap:balance}
section[data-sec="01"] h1{margin-bottom:.6rem}
h1.large{font-size:4rem}
@media(max-width:991px){h1{font-size:28px}h1.large{font-size:32px}}
@media(max-width:767px){h1{font-size:23px}h1.large{font-size:22px}}

/* ---- placeholder artwork ---------------------------------------------------
   The 76 images are still the vendor's. They have been hue-rotated off purple
   in place by tools/tint-images.py so the page reads as one design while the
   real screenshots are produced. Originals are kept pristine at
   site/reference/contentclaw/images-original/. No CSS involved, nothing to
   undo here: replacing a file replaces the image. ------------------------- */


/* ============================================================
   Ported from v1: the Wayland stage section (#wayland-stage).
   v1 used its own token names, so they are aliased onto ours here rather than
   rewriting the section CSS. Any further v1 port now drops in unchanged.
   ============================================================ */
:root{
  --accent:var(--te-green); --accent-hi:var(--te-green-hi);
  --accent-glow:rgba(30,192,114,.4);
  --gold:var(--te-gold); --gold-hi:var(--te-gold-hi);
  --ink-2:var(--te-ink-2);
  --text-dark:var(--te-text); --text-dark-2:var(--te-text-2); --text-dark-3:var(--te-text-3);
}
.wlstage-sec{padding:66px 22px 74px;position:relative;overflow:hidden}
  .wlstage-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(900px 460px at 50% 8%,rgba(30,192,114,.12),transparent 70%)}
  .wlstage-head{position:relative;max-width:920px;margin:0 auto 40px;text-align:center}
  .wlstage-head .kick{font-family:'Sora',sans-serif;font-weight:800;text-transform:uppercase;
    letter-spacing:.15em;font-size:clamp(11px,1.2vw,13px);color:var(--gold);margin-bottom:14px}
  .wlstage-head h2{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
    font-size:clamp(27px,3.5vw,46px);line-height:1.06;margin:0 0 14px;color:var(--text-dark)}
  .wlstage-head h2 em{font-style:normal;color:var(--accent-hi)}
  .wlstage-head p{font-size:clamp(16px,1.55vw,19px);line-height:1.55;color:var(--text-dark-2);
    max-width:60ch;margin:0 auto}
  .wlstage-head p b{color:var(--text-dark)}

  .wstage{--gap:26px; --lw:calc((100% - var(--gap)) * 0.655);
    position:relative; max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1.9fr 1fr; grid-template-rows:auto auto; gap:var(--gap);
    align-items:stretch}

  .wpanel{position:relative; border-radius:15px; background:var(--ink-2);
    border:1px solid rgba(58,213,136,.72);
    box-shadow:0 34px 80px -44px #000, 0 0 0 1px rgba(248,199,42,.14) inset,
    0 0 0 1px rgba(58,213,136,.20), 0 0 46px -14px var(--accent-glow)}
  .wpanel__bar{display:flex; align-items:center; gap:7px; padding:8px 12px;
    border-radius:14px 14px 0 0;
    background:linear-gradient(180deg,#1b2320,#141a18); border-bottom:1px solid rgba(232,237,234,.07)}
  .wpanel__bar i{width:8px;height:8px;border-radius:50%;background:#2f3b37;display:block}
  .wpanel__bar i:first-child{background:#4a5754}
  .wpanel__bar span{margin-left:6px; font-family:'Sora',sans-serif; font-size:14px; font-weight:800;
    letter-spacing:.13em; text-transform:uppercase; color:#eef6f2}
  .wpanel__shot{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0}
  .wpanel__wrap{position:relative; overflow:hidden; border-radius:0 0 14px 14px}
  .wpanel--wl .wpanel__wrap, .wpanel--tv .wpanel__wrap{aspect-ratio:2.9/1}
  .wpanel--brief{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column}
  .wpanel--brief .wpanel__wrap{flex:1 1 0; min-height:0; position:relative}
  .wpanel--brief .wpanel__shot{position:absolute; inset:0}
  .wpanel--brief .wpanel__shot{object-position:50% 0}
  /* Numbered step badge, so the causal order reads without a caption. */
  .wpanel__n{position:absolute; z-index:3; top:-17px; left:-17px; width:52px; height:52px;
    border-radius:50%; display:grid; place-items:center; font-family:'Sora',sans-serif;
    font-weight:800; font-size:24px; color:#0a1410;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold));
    box-shadow:0 0 0 5px rgba(248,199,42,.13), 0 10px 24px -8px #000}
  .wpanel__cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 14px 11px;
    background:linear-gradient(180deg,transparent,rgba(10,15,13,.93));
    font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.03em;
    color:var(--text-dark-2)}
  .wpanel__cap b{color:var(--accent-hi)}

  /* ===== KEEPING IT ALIVE =================================================
     Every effect below is CSS on top of a still screenshot. A looping GIF would
     weigh megabytes, be locked to one size and fight the palette; these weigh
     nothing, stay sharp at any width and all stop dead under reduced motion. */

  /* Live status chip in each title bar, so the panels read as running processes
     rather than three pictures. */
  .wpanel__st{margin-left:auto; display:inline-flex; align-items:center; gap:6px;
    font-family:'Sora',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-hi);
    background:rgba(30,192,114,.12); border:1px solid rgba(30,192,114,.3);
    border-radius:99px; padding:3px 9px 3px 7px}
  .wpanel__st::before{content:""; width:6px; height:6px; border-radius:50%;
    background:var(--accent-hi); box-shadow:0 0 8px 1px var(--accent-glow);
    animation:wlBlip 1.5s ease-in-out infinite}
  .wpanel--tv .wpanel__st::before{animation-delay:.5s}
  .wpanel--brief .wpanel__st::before{animation-delay:1s}
  @keyframes wlBlip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

  /* 1. WAYLAND. A light travels the border clockwise, the way a process indicator
        does. Conic gradient clipped to a ring by an xor mask. */
  .wpanel__bar,.wpanel__wrap{position:relative; z-index:1}
  .wpanel--wl::before{content:none; position:absolute; inset:-1px; border-radius:16px; z-index:0;
    padding:2px; pointer-events:none;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(30,192,114,.15) 26deg,
      var(--accent-hi) 52deg,var(--gold-hi) 72deg,rgba(30,192,114,.15) 100deg,transparent 132deg,transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:wlSpin 3.6s linear infinite}
  @keyframes wlSpin{to{transform:rotate(1turn)}}

  /* 2. CHARTS. A read head sweeps the chart left to right on a loop, so the panel
        looks like it is being worked through bar by bar rather than sitting there. */
  .wpanel--tv .wpanel__wrap::after{content:""; position:absolute; top:0; bottom:0; width:130px;
    z-index:2; pointer-events:none; filter:blur(1.5px);
    background:linear-gradient(90deg,transparent,rgba(30,192,114,.26),
      rgba(58,213,136,.62),rgba(248,199,42,.34),transparent);
    animation:wlScan 3.9s cubic-bezier(.55,0,.45,1) infinite}
  @keyframes wlScan{0%{left:-150px;opacity:0}8%{opacity:1}64%{opacity:1}
    72%,100%{left:100%;opacity:0}}
  /* A thin progress rail under the chrome that fills in time with the sweep. */
  .wpanel--tv .wpanel__wrap::before{content:""; position:absolute; left:0; top:0; height:2px;
    z-index:3; background:linear-gradient(90deg,var(--accent),var(--gold-hi));
    animation:wlFill 3.9s cubic-bezier(.55,0,.45,1) infinite}
  @keyframes wlFill{0%{width:0;opacity:0}8%{opacity:1}64%{width:100%;opacity:1}
    72%,100%{width:100%;opacity:0}}

  /* 3. BRIEF. A band of light travels down the page on a loop, as though the report
        is being written line by line while you watch. */
  .wpanel--brief .wpanel__wrap::after{content:""; position:absolute; left:0; right:0; height:150px;
    z-index:2; pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(30,192,114,.20),rgba(248,199,42,.10),transparent);
    animation:wlWrite 4.6s ease-in-out infinite}
  @keyframes wlWrite{0%{top:-160px;opacity:0}9%{opacity:1}78%{opacity:1}
    88%,100%{top:100%;opacity:0}}
  /* And the whole panel breathes, so the end of the chain has a heartbeat. */
  .wpanel--brief{animation:wlBreathe 4.6s ease-in-out infinite}
  @keyframes wlBreathe{0%,100%{box-shadow:0 34px 80px -44px #000,0 0 0 1px rgba(248,199,42,.10) inset,0 0 46px -26px var(--accent-glow)}
    52%{box-shadow:0 34px 80px -44px #000,0 0 0 1px rgba(248,199,42,.18) inset,0 0 90px -14px var(--accent-glow)}}

  /* Arrival. The gaps are only 26px, so more packets in them would just read as
     noise. Instead the receiving edge lights up in time with the packet landing,
     which is what actually sells the connection. */
  .wpanel--tv::after{content:""; position:absolute; z-index:5; top:-2px; left:22%; right:22%;
    height:3px; border-radius:99px; background:var(--accent-hi); pointer-events:none;
    box-shadow:0 0 14px 2px var(--accent-glow); opacity:0;
    animation:wlLand 2.1s ease-out infinite}
  .wpanel--brief::after{content:""; position:absolute; z-index:5; left:-2px; top:26%; bottom:26%;
    width:3px; border-radius:99px; background:var(--gold-hi); pointer-events:none;
    box-shadow:0 0 14px 2px rgba(248,199,42,.55); opacity:0;
    animation:wlLand 1.7s ease-out infinite}
  @keyframes wlLand{0%,62%{opacity:0}72%{opacity:.95}100%{opacity:0}}

  @media (prefers-reduced-motion:reduce){
    .wpanel--tv::after,.wpanel--brief::after,
    .wpanel--wl::before,.wpanel--tv .wpanel__wrap::after,.wpanel--tv .wpanel__wrap::before,
    .wpanel--brief .wpanel__wrap::after,.wpanel--brief,.wpanel__st::before{animation:none}
    .wpanel--tv .wpanel__wrap::after,.wpanel--brief .wpanel__wrap::after{display:none}
  }

  /* Connectors. Both sit in the grid gaps, so they need no measurement. */
  .wconn{position:absolute; z-index:4; pointer-events:none}
  .wconn::before{content:""; position:absolute; inset:0; border-radius:99px;
    background:linear-gradient(var(--dir),transparent,var(--accent-hi),transparent); opacity:.9;
    box-shadow:0 0 12px 1px var(--accent-glow)}
  .wconn i{position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold-hi);
    box-shadow:0 0 10px 2px rgba(248,199,42,.75); left:50%; top:50%; margin:-3.5px 0 0 -3.5px}
  /* Wayland down into the charts it is reading. */
  .wconn--v{--dir:180deg; left:calc(var(--lw) / 2 - 2px); top:calc(50% - var(--gap) / 2 - 7px);
    width:4px; height:calc(var(--gap) + 14px)}
  .wconn--v i{animation:wcDown 2.1s linear infinite}
  .wconn--v i:nth-child(2){animation-delay:1.05s}
  @keyframes wcDown{0%{transform:translateY(calc(var(--gap) / -2 - 6px));opacity:0}
    18%,82%{opacity:1} 100%{transform:translateY(calc(var(--gap) / 2 + 6px));opacity:0}}
  /* Both of them out into the brief. */
  .wconn--h{--dir:90deg; left:calc(var(--lw) - 7px); top:calc(50% - 2px);
    width:calc(var(--gap) + 14px); height:4px}
  .wconn--h i{animation:wcRight 1.7s linear infinite}
  .wconn--h i:nth-child(2){animation-delay:.85s}
  @keyframes wcRight{0%{transform:translateX(calc(var(--gap) / -2 - 6px));opacity:0}
    18%,82%{opacity:1} 100%{transform:translateX(calc(var(--gap) / 2 + 6px));opacity:0}}
  @media (prefers-reduced-motion:reduce){.wconn i{animation:none;opacity:.9}}

  .wbul{position:relative; max-width:980px; margin:34px auto 0; padding:0; list-style:none;
    display:grid; grid-template-columns:1fr 1fr; gap:11px 30px}
  .wbul li{position:relative; padding-left:31px; font-size:clamp(15px,1.5vw,17.5px);
    line-height:1.45; color:var(--text-dark-2)}
  .wbul li b{color:var(--text-dark); font-weight:700}
  .wbul li::before{content:""; position:absolute; left:0; top:.28em; width:19px; height:19px;
    border-radius:50%; background:rgba(30,192,114,.16); border:1px solid rgba(30,192,114,.45)}
  .wbul li::after{content:""; position:absolute; left:6px; top:.56em; width:7px; height:4px;
    border-left:2px solid var(--accent-hi); border-bottom:2px solid var(--accent-hi);
    transform:rotate(-45deg)}
  @media(max-width:860px){.wbul{grid-template-columns:1fr; gap:10px; margin-top:26px}}
  .wstage-foot{position:relative; max-width:1180px; margin:26px auto 0; text-align:center;
    font-family:'Sora',sans-serif; font-size:clamp(15px,1.6vw,19px); font-weight:700; color:var(--text-dark-2)}
  .wstage-foot b{color:var(--text-dark)} .wstage-foot em{font-style:normal;color:var(--gold-hi)}

  @media(max-width:860px){
    .wlstage-sec{padding:46px 16px 52px}
    /* Stacked, so the gap connectors no longer describe anything true. */
    .wstage{grid-template-columns:1fr; grid-template-rows:auto auto auto; --gap:16px}
    .wpanel--brief{grid-column:auto; grid-row:auto}
    /* flex:1 1 0 from the desktop rule survives the breakpoint and zeroes the
       basis, so the brief collapsed to its title bar. It has to go back to auto
       before the aspect ratio means anything. */
    .wpanel--brief .wpanel__wrap{flex:0 0 auto; aspect-ratio:1/1.15}
    /* At 358px a 2.9:1 crop is 123px tall and the screenshots are unreadable.
       Taller crop, and the focus moves off the top edge into the content. */
    .wpanel--wl .wpanel__wrap, .wpanel--tv .wpanel__wrap{aspect-ratio:1.55/1}
    .wpanel--wl .wpanel__shot{object-position:62% 0}
    .wpanel--tv .wpanel__shot{object-position:78% 50%}
    .wpanel__cap{font-size:11.5px; padding:22px 11px 9px}
    .wconn,.wpanel--tv::after,.wpanel--brief::after{display:none}
    .wpanel__n{width:40px;height:40px;font-size:19px;top:-13px;left:-13px}
  }


/* ---- the four step section -------------------------------------------- */
.te-steps{padding:5rem 0 5.5rem}
.te-step{margin-top:3.5rem}
.te-step__n{font-family:'Sora',sans-serif;font-weight:800;font-size:.86rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-gold);margin-bottom:.7rem}
.te-step__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(24px,2.3vw,36px);line-height:1.14;color:var(--te-text);margin-bottom:1rem}
.te-step__p{font-size:clamp(15px,1.15rem,19px);line-height:1.6;color:var(--te-text-2);max-width:52ch}
.te-step__fig{display:block;margin:0 auto;width:auto;height:auto;
  max-width:100%;max-height:420px}
@media(max-width:991px){
  .te-step{margin-top:3rem}
  .te-step__p{max-width:none}
  /* image always under the words on a phone, whatever the desktop order says */
  .te-step [class*="order-lg-"]{order:0}
}

/* ---- the journey section (05) ----------------------------------------
   Ported wholesale from the masterclass build: the calculator markup, its
   CSS and its JS all came across unchanged, so the numbers on this page and
   the numbers on that one cannot drift apart. --accent-soft was the only
   token the old stylesheet used that v2 had not already aliased.          */
:root{ --accent-soft:rgba(30,192,114,.14) }

.te-journey{padding:5rem 0 5.5rem}
.te-journey__lede{max-width:60ch;margin:1.1rem auto 0;text-align:center;
  font-size:clamp(15px,1.22rem,20px);line-height:1.6;color:var(--te-text-2);text-wrap:balance}

/* you are here: the only rung written in the present tense */
.te-here{max-width:760px;margin:3.2rem auto 0;padding:1.6rem 1.8rem;border-radius:16px;
  background:linear-gradient(150deg,rgba(224,70,58,.10),rgba(0,0,0,.34));
  border:1px solid rgba(224,70,58,.30)}
.te-here__n{font-family:'Sora',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:#ff7d8a;margin-bottom:.6rem}
.te-here p{font-size:clamp(15px,1.15rem,19px);line-height:1.6;color:var(--te-text-2);margin:0 0 .7rem}
.te-here p:last-child{margin-bottom:0}

/* one dated rung of the ladder */
.te-beat{margin-top:4rem}
.te-beat__when{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .9rem;
  border-radius:999px;background:rgba(248,199,42,.12);border:1px solid rgba(248,199,42,.34);
  font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--te-gold);margin-bottom:.9rem}
.te-beat__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(24px,2.3vw,36px);line-height:1.14;color:var(--te-text);margin-bottom:1rem}
.te-beat__p{font-size:clamp(15px,1.15rem,19px);line-height:1.6;color:var(--te-text-2);max-width:52ch}
.te-beat__p+.te-beat__p{margin-top:.85rem}
/* the line that says what the beat MEANS, not what it is */
.te-beat__mean{margin-top:1.1rem;padding-left:1rem;border-left:3px solid var(--te-green);
  font-size:clamp(15px,1.18rem,19px);line-height:1.5;color:var(--te-text);font-weight:600;max-width:52ch}
.te-beat__fig{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:420px}

/* Sean's rung */
.te-myday{margin-top:5rem;border-radius:20px;overflow:hidden;
  border:1px solid rgba(248,199,42,.28);background:rgba(0,0,0,.34)}
.te-myday__img{display:block;width:100%;height:auto}
.te-myday__body{padding:clamp(20px,3vw,38px)}
.te-myday__cap{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(21px,2.5vw,34px);line-height:1.16;color:var(--te-text);margin-bottom:1rem}
.te-myday__body p{font-size:clamp(15px,1.15rem,19px);line-height:1.62;color:var(--te-text-2);margin:0 0 .9rem}
.te-myday__body p:last-child{margin-bottom:0}
.te-myday__body b{color:var(--te-text)}
.te-myday__ref{margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:13px;
  background:rgba(30,192,114,.09);border:1px solid rgba(30,192,114,.3)}

@media(max-width:991px){
  .te-beat{margin-top:3rem}
  .te-beat__p,.te-beat__mean{max-width:none}
  .te-beat [class*="order-lg-"]{order:0}
}

/* ---- tier 1 vs tier 2 reveal, sits after the calculator ----------------
   Real figures off the NVDA strategy tester, so these are typed as HTML
   rather than baked into a generated figure where the digits would garble. */
.te-tier{margin-top:4.5rem}
.te-tier__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:2.2rem}
.te-tier__c{border-radius:16px;padding:clamp(18px,2.2vw,26px);background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.11)}
.te-tier__c--hero{background:linear-gradient(155deg,rgba(30,192,114,.16),rgba(0,0,0,.44));
  border-color:var(--te-green);box-shadow:0 0 34px rgba(30,192,114,.22)}
.te-tier__n{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--te-text-3);margin-bottom:.3rem}
.te-tier__c--hero .te-tier__n{color:var(--te-gold)}
.te-tier__t{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(19px,2vw,26px);
  letter-spacing:-.02em;color:var(--te-text);margin-bottom:1.1rem}
.te-tier__big{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(38px,5.4vw,64px);color:var(--te-text-2)}
.te-tier__c--hero .te-tier__big{color:var(--te-green-hi)}
.te-tier__big span{display:block;margin-top:.45rem;font-family:inherit;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--te-text-3);font-weight:800}
.te-tier__rows{margin-top:1.3rem;border-top:1px solid rgba(255,255,255,.1)}
.te-tier__r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.93rem}
.te-tier__r em{font-style:normal;color:var(--te-text-3)}
.te-tier__r b{color:var(--te-text);font-weight:700;text-align:right}
.te-tier__punch{margin-top:2.2rem;padding:1.5rem 1.7rem;border-radius:15px;
  background:linear-gradient(120deg,rgba(248,199,42,.12),rgba(30,192,114,.06));
  border:1px solid rgba(248,199,42,.34)}
.te-tier__punch p{font-size:clamp(16px,1.32rem,21px);line-height:1.5;color:var(--te-text);margin:0}
.te-tier__punch p+p{margin-top:.8rem;font-size:clamp(15px,1.15rem,19px);color:var(--te-text-2)}
.te-tier__punch b{color:var(--te-gold)}
@media(max-width:767px){.te-tier__grid{grid-template-columns:minmax(0,1fr)}}

/* ---- the gap, and the five day rail that bridges it -------------------
   Replaces a text box that was doing a diagram's job. Built in HTML rather
   than as a generated figure: five dates and ten labels is precisely where
   the image generator starts inventing digits, and these have to stay
   editable and responsive. */
.te-gap{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;margin-top:3rem;align-items:stretch}
.te-gap__c{border-radius:16px;padding:clamp(18px,2.2vw,26px);position:relative}
.te-gap__c--now{background:linear-gradient(150deg,rgba(224,70,58,.10),rgba(0,0,0,.36));
  border:1px solid rgba(224,70,58,.32)}
.te-gap__c--then{background:linear-gradient(150deg,rgba(30,192,114,.13),rgba(0,0,0,.36));
  border:1px solid rgba(30,192,114,.4)}
.te-gap__n{font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:.8rem}
.te-gap__c--now .te-gap__n{color:#ff7d8a}
.te-gap__c--then .te-gap__n{color:var(--te-green-hi)}
.te-gap__c p{font-size:clamp(15px,1.13rem,18px);line-height:1.58;color:var(--te-text-2);margin:0}
.te-gap__c p+p{margin-top:.7rem}
.te-gap__c b{color:var(--te-text)}

.te-rail{margin-top:3.4rem}
.te-rail__hd{text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(19px,2.1vw,27px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:2.2rem}
.te-rail__hd span{color:var(--te-gold)}
.te-rail__days{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative}
/* the track itself, running behind the nodes and warming up as it goes */
.te-rail__days::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:3px;
  border-radius:3px;background:linear-gradient(90deg,rgba(224,70,58,.55),
    var(--te-gold) 45%,var(--te-green-hi) 100%)}
.te-rail__d{position:relative;padding-top:0}
.te-rail__dot{position:relative;z-index:1;width:47px;height:47px;margin:0 auto 1rem;
  display:grid;place-items:center;border-radius:50%;background:var(--te-ink-2);
  border:2px solid var(--te-green);box-shadow:0 0 0 6px rgba(10,15,13,1),0 0 22px rgba(30,192,114,.4);
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;color:var(--te-green-hi)}
.te-rail__when{display:block;text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--te-gold);margin-bottom:.45rem}
.te-rail__t{display:block;text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(15px,1.25vw,18px);line-height:1.22;letter-spacing:-.015em;
  color:var(--te-text);margin-bottom:.5rem}
.te-rail__x{display:block;text-align:center;font-size:.88rem;line-height:1.5;color:var(--te-text-3)}

.te-rail__dest{margin-top:2.4rem;border-radius:16px;padding:clamp(18px,2.4vw,28px);
  text-align:center;background:linear-gradient(150deg,rgba(248,199,42,.13),rgba(30,192,114,.07));
  border:1px solid rgba(248,199,42,.42)}
.te-rail__dest .te-rail__when{color:var(--te-gold);font-size:.8rem;margin-bottom:.6rem}
.te-rail__dest b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(20px,2.4vw,31px);letter-spacing:-.025em;line-height:1.16;
  color:var(--te-text);margin-bottom:.7rem}
.te-rail__dest p{max-width:62ch;margin:0 auto;font-size:clamp(15px,1.15rem,19px);
  line-height:1.55;color:var(--te-text-2)}

@media(max-width:991px){
  .te-gap{grid-template-columns:minmax(0,1fr)}
  .te-rail__days{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .te-rail__days::before{display:none}
}
@media(max-width:520px){ .te-rail__days{grid-template-columns:minmax(0,1fr)} }

/* ---- make it obvious the calculator is a thing you touch ---------------
   It read as a static results panel, so nobody would have tried it. */
.sim__try{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 1rem;margin-bottom:1.2rem;
  padding:1rem 1.2rem;border-radius:13px;
  background:linear-gradient(120deg,rgba(248,199,42,.16),rgba(30,192,114,.07));
  border:1px solid rgba(248,199,42,.44)}
.sim__try__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--te-ink);background:var(--te-gold);
  padding:.28rem .6rem;border-radius:999px}
.sim__try b{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(18px,1.9vw,25px);color:var(--te-gold);
  animation:te-nudge 1.8s ease-in-out infinite}
.sim__try em{font-style:normal;font-size:.95rem;line-height:1.45;color:var(--te-text-2);flex:1 1 260px}
@keyframes te-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.sim__try b{animation:none}}
.sim__pre button{font-size:14.5px;padding:11px 19px}

/* ---- the two tier curves on one axis ---------------------------------
   The teal series were lifted pixel by pixel out of Sean's own strategy
   tester screenshots and recalibrated against the stated totals, then
   replotted without buy-and-hold. On the originals the axis is scaled for
   a buy-and-hold line at 3.9M, which squashes both TIDE curves flat along
   the bottom and makes the comparison unreadable. */
.tc{margin-top:2.4rem;border-radius:16px;padding:clamp(16px,2.1vw,26px);
  background:rgba(0,0,0,.4);border:1px solid rgba(30,192,114,.3)}
.tc__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,24px);color:var(--te-text);margin-bottom:.35rem}
.tc__s{font-size:clamp(14px,1.05rem,17px);line-height:1.5;color:var(--te-text-3);margin-bottom:1.1rem}
.tc__wrap{overflow-x:auto}
.tc-svg{display:block;width:100%;min-width:660px;height:auto}
.tc-g{stroke:rgba(255,255,255,.07);stroke-width:1}
.tc-l1{fill:none;stroke:#8fa39b;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.tc-l2{fill:none;stroke:#3ad588;stroke-width:4.6;stroke-linejoin:round;stroke-linecap:round}
.tc-d1{fill:#8fa39b}.tc-d2{fill:#3ad588}
.tc-e2{fill:#3ad588;font:800 27px 'Sora',sans-serif;letter-spacing:-.02em}
.tc-e2s{fill:#f8c72a;font:800 13px 'Sora',sans-serif;letter-spacing:.12em}
.tc-e1{fill:#b3c0bb;font:800 21px 'Sora',sans-serif;letter-spacing:-.02em}
.tc-e1s{fill:#7f938a;font:800 12px 'Sora',sans-serif;letter-spacing:.12em}
.tc-yr{fill:#6d7a75;font:700 15px 'Sora',sans-serif;text-anchor:middle}
.tc-cap{fill:#7f938a;font:700 14px 'Sora',sans-serif}
.tc__fine{margin:1rem 0 0;font-size:12px;line-height:1.55;color:var(--te-text-3)}

/* dollar-led hero inside each tier card, plus its own chart */
.te-tier__big{font-size:clamp(34px,4.6vw,56px)}
.te-tier__chart{display:block;width:100%;height:auto;margin-top:1.1rem;border-radius:11px;
  border:1px solid rgba(255,255,255,.12)}
.te-tier__c--hero .te-tier__chart{border-color:rgba(30,192,114,.45)}

/* ---- the compounding moment ------------------------------------------
   Compounding is boring and then violent. A static number gets read; a
   climbing one gets watched, so the number, the year and the drawn line
   all animate together off one scroll trigger. Linear scale on purpose:
   log would flatten the whole point. */
.te-compound{padding:5rem 0 5.5rem}
.cm__eyebrow{text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--te-gold);margin-bottom:1rem}
.cm{margin-top:2.6rem;border-radius:18px;padding:clamp(18px,2.4vw,30px);
  background:rgba(0,0,0,.42);border:1px solid rgba(30,192,114,.32)}
.cm__readout{display:flex;align-items:baseline;justify-content:center;gap:1.1rem;
  flex-wrap:wrap;margin-bottom:1.4rem}
.cm__num{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:.95;
  font-size:clamp(44px,8vw,104px);color:var(--te-green-hi);
  font-variant-numeric:tabular-nums;text-shadow:0 0 44px rgba(30,192,114,.45)}
.cm__yr{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,34px);
  letter-spacing:.02em;color:var(--te-gold);font-variant-numeric:tabular-nums}
.cm__wrap{overflow:hidden;border-radius:12px}
.cm-svg{display:block;width:100%;height:clamp(220px,30vw,420px)}
.cm-g{stroke:rgba(255,255,255,.06);stroke-width:1}
.cm-l{fill:none;stroke:#3ad588;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 9px rgba(58,213,136,.6));vector-effect:non-scaling-stroke}
.cm-d{fill:#fff;filter:drop-shadow(0 0 10px rgba(58,213,136,.95))}
.cm-yr{fill:#6d7a75;font:700 15px 'Sora',sans-serif;text-anchor:middle}
.cm__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.6rem}
.cm__s{border-radius:13px;padding:1.1rem 1.2rem;text-align:center;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.1)}
.cm__s--hero{background:linear-gradient(155deg,rgba(248,199,42,.16),rgba(0,0,0,.44));
  border-color:rgba(248,199,42,.5)}
.cm__s b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(26px,3.4vw,44px);line-height:1;color:var(--te-text)}
.cm__s--hero b{color:var(--te-gold)}
.cm__s span{display:block;margin-top:.5rem;font-size:.86rem;line-height:1.4;color:var(--te-text-3)}
.cm__punch{margin-top:1.6rem;padding:1.5rem 1.7rem;border-radius:15px;
  background:linear-gradient(120deg,rgba(30,192,114,.13),rgba(0,0,0,.3));
  border:1px solid rgba(30,192,114,.4)}
.cm__punch p{font-size:clamp(16px,1.3rem,21px);line-height:1.5;color:var(--te-text);margin:0}
.cm__punch p+p{margin-top:.85rem;font-size:clamp(15px,1.15rem,19px);color:var(--te-text-2)}
.cm__punch b{color:var(--te-gold)}
@media(max-width:767px){.cm__stats{grid-template-columns:minmax(0,1fr)}}

/* the "there is more, and it comes on the training" aside */
.cm__aside{margin-top:1.3rem;padding:1.2rem 1.4rem;border-radius:13px;
  background:linear-gradient(120deg,rgba(248,199,42,.13),rgba(0,0,0,.3));
  border:1px solid rgba(248,199,42,.4)}
.cm__aside__k{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--te-gold);margin-bottom:.5rem}
.cm__aside p{margin:0;font-size:clamp(15px,1.15rem,19px);line-height:1.55;color:var(--te-text-2)}

/* ---- the four minute workday -----------------------------------------
   Replaces a portrait with small text beside it. The photo is now a band
   carrying its own line, and the argument is made by the three-step run
   underneath it, which is the bit people actually read. */
.te-day{padding:5rem 0 5.5rem}
.te-day__band{position:relative;margin-top:2.6rem;border-radius:18px;overflow:hidden;
  border:1px solid rgba(248,199,42,.3)}
.te-day__img{display:block;width:100%;height:auto}
.te-day__over{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,38px);
  background:linear-gradient(to top,rgba(7,10,9,.95) 12%,rgba(7,10,9,.72) 52%,transparent)}
.te-day__over b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(21px,3.2vw,44px);line-height:1.1;color:#fff;margin-bottom:.5rem}
.te-day__over span{display:block;max-width:58ch;font-size:clamp(14px,1.12rem,18px);
  line-height:1.5;color:var(--te-text-2)}

.te-day__run{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.te-day__step{border-radius:15px;padding:1.3rem 1.4rem;background:rgba(0,0,0,.42);
  border:1px solid rgba(30,192,114,.32);position:relative}
.te-day__step--shut{background:linear-gradient(155deg,rgba(248,199,42,.15),rgba(0,0,0,.44));
  border-color:rgba(248,199,42,.5)}
.te-day__t{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.55rem;
  letter-spacing:-.03em;color:var(--te-green-hi);margin-bottom:.45rem;font-variant-numeric:tabular-nums}
.te-day__step--shut .te-day__t{color:var(--te-gold)}
.te-day__step b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:.4rem}
.te-day__step em{font-style:normal;font-size:.94rem;line-height:1.5;color:var(--te-text-3)}

.te-day__after{margin-top:2.2rem;text-align:center}
.te-day__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--te-gold);margin-bottom:1rem}
.te-day__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.te-day__c{border-radius:14px;padding:1.2rem;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1)}
.te-day__c b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(17px,1.7vw,22px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:.35rem}
.te-day__c span{font-size:.92rem;line-height:1.45;color:var(--te-text-3)}

.te-day__punch{margin-top:2.2rem;padding:1.6rem 1.8rem;border-radius:15px;
  background:linear-gradient(120deg,rgba(30,192,114,.13),rgba(0,0,0,.3));
  border:1px solid rgba(30,192,114,.4)}
.te-day__punch p{font-size:clamp(16px,1.3rem,21px);line-height:1.5;color:var(--te-text);margin:0}
.te-day__punch p+p{margin-top:.85rem;font-size:clamp(15px,1.15rem,19px);color:var(--te-text-2)}
.te-day__punch b{color:var(--te-gold)}
@media(max-width:767px){
  .te-day__run,.te-day__cards{grid-template-columns:minmax(0,1fr)}
}

/* the three life cards carry photographs now, not just labels */
.te-day__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(21px,2.5vw,33px);line-height:1.15;color:var(--te-text);
  margin:0 auto 1.5rem;max-width:22ch;text-wrap:balance}
.te-day__c{padding:0;overflow:hidden;margin:0}
.te-day__c img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.te-day__c figcaption{display:block;padding:1.1rem 1.2rem 1.3rem;text-align:left}
.te-day__c--warm{border-color:rgba(248,199,42,.42)}

/* ---- "nobody trades real money in this class" -------------------------
   Sits immediately above the calculator on purpose. The two biggest walls
   for a beginner are "I have not got $10,000" and "I have not got a
   broker", and both fire the moment they see a capital field. This kills
   the thought before it forms rather than answering it in a FAQ nobody
   scrolls to. */
.te-free{margin-top:2.6rem;border-radius:18px;padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(150deg,rgba(30,192,114,.15),rgba(0,0,0,.4));
  border:1px solid rgba(30,192,114,.45)}
.te-free__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--te-gold);margin-bottom:.55rem}
.te-free__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(23px,3vw,40px);line-height:1.12;color:var(--te-text);margin-bottom:1.4rem}
.te-free__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.te-free__c{border-radius:13px;padding:1.1rem 1.2rem;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.11)}
.te-free__c b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--te-green-hi);margin-bottom:.5rem}
.te-free__c span{font-size:.92rem;line-height:1.45;color:var(--te-text-3)}
.te-free__p{margin:1.3rem 0 0;font-size:clamp(15px,1.15rem,19px);line-height:1.55;color:var(--te-text-2)}

/* ---- the scoreboard ---------------------------------------------------
   Three big numbers on three different bases read as confusion. Stated
   together with what each one actually is, they read as a crescendo. */
.te-board{margin-top:3rem;border-radius:18px;padding:clamp(20px,2.6vw,32px);
  background:rgba(0,0,0,.42);border:1px solid rgba(248,199,42,.34);text-align:center}
.te-board__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--te-gold);margin-bottom:.5rem}
.te-board__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(22px,2.8vw,36px);line-height:1.14;color:var(--te-text);margin-bottom:.7rem}
.te-board__lede{max-width:62ch;margin:0 auto 1.6rem;font-size:clamp(15px,1.13rem,18px);
  line-height:1.55;color:var(--te-text-2)}
.te-board__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.te-board__c{border-radius:14px;padding:1.3rem 1.2rem;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.11)}
.te-board__c--hero{background:linear-gradient(155deg,rgba(248,199,42,.16),rgba(30,192,114,.08));
  border-color:var(--te-gold);box-shadow:0 0 34px rgba(248,199,42,.16)}
.te-board__n{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--te-text-3);margin-bottom:.6rem}
.te-board__c b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,3.6vw,48px);line-height:1;color:var(--te-text-2);margin-bottom:.5rem}
.te-board__c--hero b{color:var(--te-gold)}
.te-board__c em{font-style:normal;font-size:.9rem;line-height:1.45;color:var(--te-text-3)}
@media(max-width:767px){
  .te-free__grid,.te-board__grid{grid-template-columns:minmax(0,1fr)}
}

/* the monthly add is the amplifier, so it gets its own row of presets */
.sim__pre--add{margin-top:-4px;margin-bottom:18px}
.sim__pre--add button{background:rgba(248,199,42,.1);color:var(--te-gold);
  border-color:rgba(248,199,42,.34)}
.sim__pre--add button:hover{background:rgba(248,199,42,.2)}
.sim__pre--add button.on{background:var(--te-gold);color:#1a1403;border-color:var(--te-gold)}
.gbar em #g_paidk{color:var(--te-text-3)}

/* ---- the 90 day shift ------------------------------------------------
   Was a centred heading and a paragraph with nothing around it, which
   read as an orphan between the beats and the calculator. Rebuilt as a
   before/after so it bookends the "you are here / five days later" pair
   at the top of the same section. */
.te-shift{margin-top:4rem;border-radius:18px;padding:clamp(20px,2.6vw,34px);
  background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.1);text-align:center}
.te-shift__when{display:inline-flex}
.te-shift__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(23px,3vw,40px);line-height:1.12;color:var(--te-text);margin:0 0 1.7rem}
.te-shift__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.te-shift__c{border-radius:14px;padding:1.3rem 1.4rem;text-align:left;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.11)}
.te-shift__c--now{background:linear-gradient(155deg,rgba(30,192,114,.15),rgba(0,0,0,.44));
  border-color:rgba(30,192,114,.5)}
.te-shift__k{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--te-text-3);margin-bottom:.55rem}
.te-shift__c--now .te-shift__k{color:var(--te-green-hi)}
.te-shift__c > b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,23px);line-height:1.16;color:var(--te-text);margin-bottom:.5rem}
.te-shift__c em{font-style:normal;font-size:.95rem;line-height:1.5;color:var(--te-text-3)}
.te-shift__arrow{font-size:2rem;color:var(--te-gold);line-height:1}
.te-shift__p{margin:1.5rem auto 0;max-width:64ch;font-size:clamp(15px,1.18rem,19px);
  line-height:1.55;color:var(--te-text-2)}
.te-shift__p b{color:var(--te-text)}
@media(max-width:767px){
  .te-shift__grid{grid-template-columns:minmax(0,1fr)}
  .te-shift__arrow{transform:rotate(90deg)}
}

/* the gap needed a headline in each half and something joining them, or it
   read as two paragraphs in boxes. The two figures are a matched pair: the
   flat line on the left is the same line that wakes up on the right. */
.te-gap__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.2vw,42px);line-height:1.08;margin:0 0 1.1rem;text-wrap:balance}
.te-gap__c--now .te-gap__h{color:#ff9aa2}
.te-gap__c--then .te-gap__h{color:var(--te-green-hi)}
.te-gap__fig{display:block;width:100%;height:auto;margin:0 0 1.2rem}
.te-gap__bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;min-width:96px}
.te-gap__days{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:linear-gradient(150deg,rgba(248,199,42,.22),rgba(0,0,0,.5));
  border:2px solid var(--te-gold);box-shadow:0 0 30px rgba(248,199,42,.35);
  font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--te-gold)}
.te-gap__days em{font-style:normal;display:block;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;margin-top:.15rem}
.te-gap__line{flex:1;width:3px;border-radius:3px;min-height:60px;
  background:linear-gradient(180deg,rgba(224,70,58,.5),var(--te-gold) 45%,var(--te-green-hi))}
.te-gap__tip{color:var(--te-green-hi);font-size:1.6rem;line-height:1;transform:rotate(90deg)}
@media(max-width:991px){
  .te-gap{grid-template-columns:minmax(0,1fr)}
  .te-gap__bridge{flex-direction:row;min-height:0;padding:.4rem 0}
  .te-gap__line{width:auto;height:3px;min-height:0;flex:1;
    background:linear-gradient(90deg,rgba(224,70,58,.5),var(--te-gold) 45%,var(--te-green-hi))}
  .te-gap__tip{transform:none}
}

/* ---- in versus out ---------------------------------------------------
   Four horizontal bars all started at the same left edge, so the reader had
   to compare lengths and do arithmetic. Two vertical columns make the same
   point with no cognitive load at all: one is short, one is tall. */
.simx{margin-top:1.4rem;border-radius:16px;padding:clamp(18px,2.4vw,28px);
  background:linear-gradient(150deg,rgba(30,192,114,.1),rgba(0,0,0,.45));
  border:1px solid rgba(30,192,114,.36)}
.simx__cols{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,3vw,40px);
  align-items:end}
.simx__col{display:flex;flex-direction:column;align-items:center;text-align:center}
.simx__col b{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:.7rem}
.simx__col--in b{font-size:clamp(26px,3.4vw,44px);color:var(--te-text-2)}
.simx__col--out b{font-size:clamp(38px,6.4vw,86px);color:var(--te-gold);
  text-shadow:0 0 44px rgba(248,199,42,.55)}
.simx__bar{display:block;width:100%;max-width:190px;height:clamp(120px,17vw,230px);
  border-radius:12px 12px 0 0;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);border-bottom:0;
  display:flex;align-items:flex-end;overflow:hidden}
.simx__bar u{display:block;width:100%;text-decoration:none;border-radius:10px 10px 0 0;
  transition:height .55s cubic-bezier(.3,.7,.2,1)}
.simx__col--in u{background:linear-gradient(180deg,#7f938a,#4a5651)}
.simx__col--out u{background:linear-gradient(180deg,#3ad588,#0a6b3c);
  box-shadow:0 0 34px rgba(58,213,136,.5)}
.simx__col span{display:block;margin-top:.8rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(13px,1.3vw,16px);color:var(--te-text)}
.simx__col em{display:block;margin-top:.28rem;font-style:normal;font-size:.82rem;
  line-height:1.4;color:var(--te-text-3)}
.simx__arrow{align-self:center;font-size:clamp(24px,3vw,40px);color:var(--te-gold);line-height:1}
.simx__x{margin-top:1.3rem;text-align:center;font-size:clamp(15px,1.2rem,19px);color:var(--te-text-2)}
.simx__x b{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5em;letter-spacing:-.03em;
  color:var(--te-gold)}
.sim__out{margin-top:16px}
.sim__kpi b{font-size:clamp(19px,2vw,26px)}
@media(max-width:680px){
  .simx__cols{gap:10px}
  .simx__arrow{transform:rotate(90deg)}
}

/* ---- Wayland, sitting between what went in and what came out ----------
   Sean's note: it is not the strategy doing this, it is the AI, so the thing
   in the middle is Wayland and the Lucide orbit mark lifted verbatim from the
   AI Income Engine build. The two particle rails run HORIZONTALLY into and out
   of it, thin and sparse on the way in, fat and bright on the way out, because
   the whole point is that it comes out bigger than it went in. */
@property --te-eng{syntax:'<angle>';inherits:false;initial-value:0deg}
.simx__engine{align-self:center;position:relative;display:flex;flex-direction:column;
  align-items:center;gap:.55rem;z-index:2}

/* the rails break out of the engine column into the grid gaps either side */
.simx__feed,.simx__out{position:absolute;top:calc(50% - 26px);height:14px;pointer-events:none}
.simx__feed{right:100%;width:clamp(40px,7vw,110px);margin-right:6px}
.simx__out{left:100%;width:clamp(40px,7vw,110px);margin-left:6px}
.simx__feed s,.simx__out s{position:absolute;top:50%;border-radius:50%;text-decoration:none}
/* going in: small, quiet, evenly spaced */
.simx__feed s{width:4px;height:4px;margin-top:-2px;background:#8a6f28;opacity:.9;
  animation:te-feed 2.2s linear infinite}
.simx__feed s:nth-child(2){animation-delay:.44s}
.simx__feed s:nth-child(3){animation-delay:.88s}
.simx__feed s:nth-child(4){animation-delay:1.32s}
.simx__feed s:nth-child(5){animation-delay:1.76s}
@keyframes te-feed{0%{left:0;opacity:0}14%{opacity:.85}86%{opacity:.85}100%{left:100%;opacity:0}}
/* coming out: starts small at the core and swells as it travels */
.simx__out s{width:9px;height:9px;margin-top:-4.5px;background:var(--te-gold);
  box-shadow:0 0 16px var(--te-gold),0 0 30px rgba(248,199,42,.55);animation:te-out 1.7s cubic-bezier(.2,.6,.4,1) infinite}
.simx__out s:nth-child(2){animation-delay:.283s}
.simx__out s:nth-child(3){animation-delay:.566s}
.simx__out s:nth-child(4){animation-delay:.849s}
.simx__out s:nth-child(5){animation-delay:1.132s}
.simx__out s:nth-child(6){animation-delay:1.415s}
@keyframes te-out{
  0%{left:0;transform:scale(.34);opacity:0}
  16%{opacity:1}
  100%{left:100%;transform:scale(1.25);opacity:0}}

/* the real Wayland app sits inside the disc, dimmed under a gold wash, with
   the orbit mark and the sweeping ring on top. A bare circle did not connect
   to anything the buyer will actually open, which is the same reason the
   overnight flow in section 13 carries the screenshot rather than an icon.
   Bigger than it was, because a screenshot at 142px reads as noise. */
/* no overflow:hidden here: the sweeping ring sits at inset -4px and would be
   clipped by it. The screenshot is a background on ::before, so its own
   border-radius does the clipping instead. */
.simx__core{position:relative;display:grid;place-items:center;
  width:clamp(122px,15vw,186px);aspect-ratio:1;border-radius:50%;color:var(--te-gold);
  background:#070a09 center/cover no-repeat;
  box-shadow:0 0 66px rgba(248,199,42,.5),inset 0 0 32px rgba(248,199,42,.3)}
/* framed on the app's left rail rather than centred: the middle of that
   screenshot is mostly empty chat, while the rail carries the Wayland mark and
   the chat list, which is what makes it recognisable at this size */
.simx__core::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:url('../images/wl/wayland-app.jpg?v=a4b36441') 14% 46%/210% no-repeat;
  opacity:.85;filter:saturate(.75) contrast(1.08) brightness(1.15)}
/* the wash has to leave the middle readable, so it is a rim rather than a fog */
.simx__core::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(248,199,42,.1) 30%,
    rgba(7,10,9,.55) 62%,rgba(7,10,9,.92) 100%)}
.simx__core>*{position:relative;z-index:2}
/* the ring is a conic gradient swept by an animated custom property, so the
   element itself never rotates and the mark inside stays upright */
.simx__ring{position:absolute;inset:-4px;border-radius:50%;padding:4px;
  background:conic-gradient(from var(--te-eng),transparent 0deg,var(--te-gold) 74deg,
    var(--te-gold-hi) 148deg,transparent 220deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:te-eng 3.4s linear infinite}
@keyframes te-eng{to{--te-eng:360deg}}
.simx__orbit{width:56%;height:56%;display:block;animation:te-orb 16s linear infinite;
  filter:drop-shadow(0 0 12px rgba(248,199,42,.8))}
@keyframes te-orb{to{transform:rotate(360deg)}}
.simx__name{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(15px,1.7vw,22px);color:#fff;
  text-shadow:0 0 24px rgba(248,199,42,.8)}
.simx__sub{font-size:.72rem;line-height:1.35;text-align:center;color:var(--te-text-3)}
@media(prefers-reduced-motion:reduce){
  .simx__ring,.simx__orbit,.simx__feed s,.simx__out s{animation:none}
  .simx__feed s,.simx__out s{left:50%}
}

/* ---- the call to action that closes the calculator -------------------- */
.te-seat{margin-top:2.6rem;border-radius:20px;padding:clamp(24px,3.4vw,46px);text-align:center;
  background:linear-gradient(150deg,rgba(248,199,42,.14),rgba(30,192,114,.07));
  border:1px solid rgba(248,199,42,.46);box-shadow:0 0 46px rgba(248,199,42,.12)}
.te-seat__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--te-gold);margin-bottom:.7rem}
.te-seat__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.6vw,48px);line-height:1.08;color:var(--te-text);margin:0 0 .9rem;
  text-wrap:balance}
.te-seat__p{max-width:56ch;margin:0 auto 1.8rem;font-size:clamp(15px,1.18rem,19px);
  line-height:1.55;color:var(--te-text-2)}
.te-seat__btn{font-size:clamp(17px,1.9vw,24px) !important;padding:1.05em 2.4em !important}
.te-seat__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem;margin-top:1.5rem}
.te-seat__facts span{font-size:.92rem;color:var(--te-text-3)}
.te-seat__facts b{font-family:'Sora',sans-serif;font-weight:800;color:var(--te-gold)}

/* ======================================================================
   MOBILE CORRECTIONS
   The vendor grid drops every header block to col-12 under 768px, so the
   bar became three stacked full-width rows eating 145px of an 844px screen,
   and it does not stick, so it was paying rent for nothing.
   ====================================================================== */
@media(max-width:767px){
  /* The vendor forces .site-header{position:static !important} under 768px and
     .sec-header-outer clips with overflow:hidden, so sticky here is a fight not
     worth having. The bar just gets compact, and the persistent CTA moves to a
     fixed bottom dock instead, which is the better mobile pattern anyway. */
  .site-header .container{padding-top:.55rem;padding-bottom:.55rem}
  .site-header .row-gap-4{row-gap:.55rem !important}
  .site-header .col-12.col-md-auto:first-child{flex:0 0 100% !important;max-width:100% !important}
  .site-header .col-12.col-md-auto:nth-child(2),
  .site-header .col-12.col-md-auto:nth-child(3){
    flex:1 1 auto !important;width:auto !important;max-width:none !important}
  .te-bar__label{font-size:12.5px !important;line-height:1.25;text-align:center;margin:0}
  .te-bar__sub{display:none}
  .te-clock{gap:5px}
  .te-clock__u{min-width:42px;padding:4px 5px}
  .te-clock__u b{font-size:17px}
  .te-clock__u i{font-size:8px}
  .site-header .o1-button{padding:.72em 1.05em;font-size:13.5px;white-space:nowrap}

  /* the in/out comparison is the whole point, so it stays side by side and
     shrinks rather than stacking, which would destroy the height contrast */
  .simx{padding:16px 12px}
  .simx__cols{grid-template-columns:1fr auto 1fr;gap:8px}
  .simx__col--in b{font-size:19px}
  .simx__col--out b{font-size:27px}
  .simx__bar{height:150px;max-width:none}
  .simx__col span{font-size:11.5px;margin-top:.55rem}
  .simx__col em{font-size:10.5px}
  .simx__engine{gap:.3rem}
  .simx__core{width:58px}
  .simx__name{font-size:11px}
  .simx__sub{font-size:.55rem}
  /* the rails have no room to run on a phone; the core carries it alone */
  .simx__feed,.simx__out{display:none}

  /* the preset label was sharing a row with the first chip and shunting the
     rest onto ragged lines; give it its own line and let the chips flow */
  .sim__pre{gap:8px}
  .sim__pre span{flex:0 0 100%;margin:0 0 2px}
  .sim__pre button{flex:1 1 auto;min-width:0;padding:10px 12px;font-size:13.5px}
  .sim__pre--add{margin-bottom:14px}
}

/* ---- mobile: a docked CTA that appears once the hero is behind you ----- */
.te-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;gap:10px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(7,10,9,.95);backdrop-filter:blur(14px);
  border-top:1px solid rgba(248,199,42,.34);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.te-dock.is-up{transform:translateY(0)}
.te-dock__l{flex:1;min-width:0}
.te-dock__t{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:15px;
  line-height:1.1;color:var(--te-gold);font-variant-numeric:tabular-nums}
.te-dock__s{display:block;font-size:10.5px;line-height:1.25;color:var(--te-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-dock__b{flex:0 0 auto;font-family:'Sora',sans-serif;font-weight:800;font-size:14.5px;
  padding:.82em 1.15em;border-radius:999px;white-space:nowrap;text-decoration:none;
  color:#1a1403;background:linear-gradient(180deg,var(--te-gold-hi),var(--te-gold));
  box-shadow:0 6px 20px rgba(248,199,42,.32)}
@media(max-width:767px){ .te-dock{display:flex} body{padding-bottom:0} }
@media(prefers-reduced-motion:reduce){.te-dock{transition:none}}

/* $0 at risk leads and is the loudest of the three, because it is the single
   thing standing between a beginner and the buy button. "virtual" is called
   out so nobody reads $100,000 as money we are handing them. */
.te-free__c--hero{background:linear-gradient(155deg,rgba(248,199,42,.18),rgba(0,0,0,.45));
  border-color:var(--te-gold);box-shadow:0 0 34px rgba(248,199,42,.2)}
.te-free__c--hero b{color:var(--te-gold)}
.te-free__c b em{font-style:normal;display:inline-block;font-size:.5em;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;
  padding:.28em .6em;margin-left:.35em;border-radius:999px;
  color:var(--te-gold);background:rgba(248,199,42,.16);
  border:1px solid rgba(248,199,42,.5)}

/* ---- what the calculator actually says ---------------------------------
   Was three chips, three bars and two dense paragraphs, which put the same
   three numbers on screen three times over and gave the eye nothing to rank.
   One presentation now, in plain words, with the caveats folded away where
   somebody who wants them can find them. */
.simo__head{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--te-text-3)}
.simo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.1rem}
.simo__c{border-radius:14px;padding:1.2rem 1.3rem;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.11)}
.simo__c--hero{background:linear-gradient(155deg,rgba(30,192,114,.16),rgba(0,0,0,.45));
  border-color:var(--te-green);box-shadow:0 0 30px rgba(30,192,114,.18)}
.simo__k{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--te-text-3);margin-bottom:.55rem}
.simo__c--hero .simo__k{color:var(--te-green-hi)}
.simo__c b{display:block;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(26px,3.2vw,42px);line-height:1;color:var(--te-text);
  font-variant-numeric:tabular-nums;margin-bottom:.55rem}
.simo__c--hero b{color:var(--te-green-hi)}
.simo__bar{display:block;height:9px;border-radius:999px;margin:0 0 .85rem;
  background:rgba(255,255,255,.06);overflow:hidden}
.simo__bar u{display:block;height:100%;width:0;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#4a5651,#8fa39b);
  transition:width .55s cubic-bezier(.3,.7,.2,1)}
.simo__c--hero .simo__bar u{background:linear-gradient(90deg,#0a6b3c,var(--te-green-hi));
  box-shadow:0 0 16px rgba(58,213,136,.55)}
.simo__c:last-child .simo__bar u{background:linear-gradient(90deg,#3b3524,rgba(248,199,42,.55))}
.simo__c em{font-style:normal;display:block;font-size:.94rem;line-height:1.45;color:var(--te-text-3)}
.simo__c em b{display:inline;font-family:inherit;font-size:1em;color:var(--te-text);margin:0}

.simo__say{margin:1.4rem 0 0;text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:clamp(18px,2.1vw,28px);line-height:1.22;color:var(--te-text)}
.simo__say b{color:var(--te-gold)}
.simo__you{margin:.8rem auto 0;max-width:64ch;text-align:center;
  font-size:clamp(15px,1.15rem,19px);line-height:1.55;color:var(--te-text-2)}
.simo__you b{color:var(--te-text)}

.simo__how{margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);padding-top:1rem}
.simo__how summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--te-text-3);
  list-style:none;display:inline-flex;align-items:center;gap:.45rem}
.simo__how summary::-webkit-details-marker{display:none}
.simo__how summary::before{content:"+";font-family:'Sora',sans-serif;font-weight:800;
  color:var(--te-gold)}
.simo__how[open] summary::before{content:"\2212"}
.simo__how summary:hover{color:var(--te-text-2)}
.simo__how p{margin:.9rem 0 0;font-size:12px;line-height:1.55;color:var(--te-text-3)}
.simo__how p b{color:var(--te-text-2)}
@media(max-width:767px){.simo{grid-template-columns:minmax(0,1fr)}}

/* 1 stock to 74, said as a picture rather than a sentence, so the jump in
   scale registers before the number underneath does */
.cm__jump{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);
  margin:2rem 0 .4rem}
.cm__jump__c{display:grid;place-items:center;min-width:clamp(88px,11vw,130px);
  padding:1rem 1.2rem;border-radius:16px;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.12)}
.cm__jump__c--hero{background:linear-gradient(155deg,rgba(248,199,42,.18),rgba(0,0,0,.45));
  border-color:var(--te-gold);box-shadow:0 0 40px rgba(248,199,42,.24)}
.cm__jump__c b{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(34px,5.4vw,68px);color:var(--te-text-3)}
.cm__jump__c--hero b{color:var(--te-gold)}
.cm__jump__c i{font-style:normal;margin-top:.35rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--te-text-3)}
.cm__jump__a{font-size:clamp(24px,3.4vw,44px);line-height:1;color:var(--te-gold)}

/* the numbers are the meat here, so they sit on the image as chips rather than
   being buried mid sentence where they get skimmed past */
.te-day__c{position:relative}
/* right aligned, not left: on two of the three photographs the left corner
   is where Sean's head is and the chip sat straight over it */
.te-day__chip{position:absolute;top:12px;right:12px;z-index:2;
  font-family:'Sora',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.42rem .8rem;border-radius:999px;
  color:#fff;background:rgba(7,10,9,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28)}
.te-day__chip--warm{color:var(--te-gold);border-color:rgba(248,199,42,.6);
  background:rgba(7,10,9,.88)}
.te-day__c figcaption b{margin-bottom:.5rem}
.te-day__c figcaption span{display:block}

/* ---- 11 + 12 · the wall ---------------------------------------------------
   The section right before this one ends on "4 minutes". This one is the same
   morning with nothing helping, so it deliberately reuses the clock idea and
   runs it the other way. Red is already the page's "this is the state you are
   stuck in" colour, set in the gap pair up in 05, so the drain is red and gold
   is kept out of here entirely. Gold only ever means money and the button. */
.te-hard{padding:5rem 0 4rem}
.te-hard__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.4vw,58px);line-height:1.06;color:var(--te-text);
  margin:.6rem auto 1.1rem;max-width:20ch;text-wrap:balance}
.te-hard__lede{max-width:60ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

.te-hard__clockwrap{margin-top:2.8rem;border-radius:20px;padding:clamp(18px,2.6vw,34px);
  background:linear-gradient(165deg,rgba(255,125,138,.09),rgba(0,0,0,.42));
  border:1px solid rgba(255,125,138,.28)}

/* the running head. The numerals are tabular so the clock does not jitter
   sideways one pixel per tick while it counts, which reads as cheap. */
.te-hard__clock{text-align:center;margin-bottom:1.9rem}
.te-hard__now{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(44px,7.6vw,96px);line-height:1;letter-spacing:-.04em;
  color:var(--te-red);font-variant-numeric:tabular-nums;
  text-shadow:0 0 48px rgba(255,125,138,.42)}
.te-hard__lab{display:block;margin-top:.5rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--te-text-3)}
.te-hard__track{display:block;height:7px;margin:1.2rem auto 0;max-width:620px;border-radius:99px;
  background:rgba(255,255,255,.07);overflow:hidden}
.te-hard__track u{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,rgba(255,125,138,.5),var(--te-red));
  box-shadow:0 0 20px rgba(255,125,138,.55)}

.te-hard__rail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.te-hard__stop{border-radius:15px;padding:1.25rem 1.35rem;background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.09);opacity:.34;
  transition:opacity .45s ease,border-color .45s ease,background .45s ease}
.te-hard__stop.is-on{opacity:1;border-color:rgba(255,125,138,.42);background:rgba(255,125,138,.06)}
.te-hard__stop--end.is-on{border-color:rgba(255,125,138,.7);
  background:linear-gradient(155deg,rgba(255,125,138,.15),rgba(0,0,0,.4))}
.te-hard__t{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.4rem;
  letter-spacing:-.03em;color:var(--te-red);margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.te-hard__stop b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:.4rem}
.te-hard__stop em{font-style:normal;font-size:.93rem;line-height:1.5;color:var(--te-text-3)}

.te-hard__total{margin-top:1.8rem;text-align:center;padding-top:1.6rem;
  border-top:1px solid rgba(255,125,138,.22)}
.te-hard__tk{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-text-3);margin-bottom:.5rem}
.te-hard__total b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.035em;color:var(--te-red);
  font-variant-numeric:tabular-nums}
.te-hard__ts{display:block;margin-top:.7rem;font-size:clamp(15px,1.12rem,18px);
  color:var(--te-text-2)}

/* second beat: the skill gate. Numerals carry it, the words are support. */
.te-hard2{padding:3.5rem 0 5rem}
.te-hard__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:2.4rem}
.te-hard__c{border-radius:16px;padding:1.6rem 1.5rem;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1)}
.te-hard__n{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(46px,5.6vw,76px);line-height:.95;letter-spacing:-.045em;
  color:var(--te-red);margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.te-hard__c b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(17px,1.7vw,22px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:.45rem}
.te-hard__c em{font-style:normal;font-size:.94rem;line-height:1.5;color:var(--te-text-3)}

.te-hard__punch{margin-top:2.2rem;padding:1.6rem 1.8rem;border-radius:15px;
  background:linear-gradient(120deg,rgba(255,125,138,.12),rgba(0,0,0,.3));
  border:1px solid rgba(255,125,138,.38)}
.te-hard__punch p{font-size:clamp(16px,1.3rem,21px);line-height:1.5;color:var(--te-text);margin:0}
.te-hard__punch p+p{margin-top:.85rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(19px,1.9rem,30px);letter-spacing:-.028em;color:var(--te-text)}
.te-hard__punch b{color:var(--te-red)}

@media(max-width:991px){
  .te-hard__rail,.te-hard__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .te-hard__rail,.te-hard__grid{grid-template-columns:minmax(0,1fr)}
  .te-hard__stop{opacity:1}
}

/* the figure carries the argument now, so the rail below it is a strip of
   times rather than six paragraphs. Sean's note: the rest of the page is
   figure led and this section was reading as one long block of type. */
.te-hard__fig{margin:2.2rem auto 0;max-width:1180px;width:100%}
.te-hard__fig img{display:block;width:100%;height:auto}
.te-hard__clockwrap{margin-top:2.2rem}
.te-hard__rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.te-hard__stop{padding:1rem .95rem;text-align:center}
.te-hard__stop b{font-size:clamp(14px,1.02vw,16px);line-height:1.25;margin-bottom:0}
.te-hard__t{font-size:clamp(15px,1.18vw,19px);margin-bottom:.35rem}
@media(max-width:991px){
  .te-hard__rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .te-hard__rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .te-hard__fig{margin-top:1.8rem}
}

/* the second beat's headline was setting three deep lines at 20ch, which is
   the same wall of type the figure was brought in to break up */
.te-hard2 .te-hard__h{max-width:30ch;font-size:clamp(26px,3.5vw,46px)}

/* ---- 13 · the turn ---------------------------------------------------------
   The answer to the wall, so it is the wall's own shapes flipped to green.
   Beat A reuses the timing idea as two bars because 7h45m against 4m is 116x
   and a length comparison says that instantly. The green bar being almost
   nothing is the joke, not a bug, so it carries its own label outside itself. */
.te-turn{padding:5rem 0 5.5rem}
.te-turn__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.4vw,58px);line-height:1.06;color:var(--te-text);
  margin:.6rem auto 1.1rem;max-width:20ch;text-wrap:balance}
.te-turn__lede{max-width:58ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

.te-turn__flip{margin:2.6rem auto 0;max-width:900px;border-radius:20px;
  padding:clamp(18px,2.6vw,32px);background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.1)}
.te-turn__row{display:grid;grid-template-columns:132px 1fr 92px;align-items:center;gap:14px}
.te-turn__row+.te-turn__row{margin-top:14px}
.te-turn__who{font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--te-text-3)}
.te-turn__row--new .te-turn__who{color:var(--te-green-hi)}
.te-turn__bar{position:relative;display:block;height:26px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:visible}
.te-turn__bar u{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;
  transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.te-turn__row--old u{background:linear-gradient(90deg,rgba(255,125,138,.45),var(--te-red))}
.te-turn__row--new u{background:linear-gradient(90deg,var(--te-green),var(--te-green-hi));
  box-shadow:0 0 26px rgba(58,213,136,.75);transition-delay:.5s}
/* the green bar is under 1% of the red one and that is the whole point, so the
   readout on the right carries the number and the sliver just has to glow */
.te-turn__row--new u{min-width:6px}
.te-turn__amt{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(17px,1.7vw,23px);
  letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums;color:var(--te-red)}
.te-turn__row--new .te-turn__amt{color:var(--te-green-hi)}
.te-turn__ratio{margin:1.5rem 0 0;text-align:center;font-size:clamp(15px,1.2rem,20px);
  color:var(--te-text-2)}
.te-turn__ratio b{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(24px,2.6vw,38px);letter-spacing:-.03em;color:var(--te-gold);
  vertical-align:-.06em;margin-right:.15em}

.te-turn__h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(23px,2.8vw,38px);line-height:1.12;color:var(--te-text);
  text-align:center;margin:4rem auto 0;max-width:24ch;text-wrap:balance}

/* beat B · the overnight flow.
   The middle step shows the REAL Wayland app with the orbit ring sweeping over
   it as a processing meter, because a bare circle does not connect to anything
   the buyer will actually open. --te-eng animates the conic angle so the ring
   sweeps while the mark inside stays upright. */
.te-flow{margin-top:2.4rem}
.te-wlapp{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(248,199,42,.32);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.te-wlapp__shot{display:block}
.te-wlapp__shot img{display:block;width:100%;height:auto}
/* the scrim is what lets the gold ring read against a busy screenshot */
.te-wlapp::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,rgba(7,10,9,.72),rgba(7,10,9,.28) 70%,transparent)}

.te-wlapp__meter{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:clamp(96px,17%,190px);aspect-ratio:1;display:grid;place-items:center;z-index:2;
  color:var(--te-gold)}
.te-wlapp__ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from var(--te-eng),rgba(248,199,42,0) 0deg,
    rgba(248,199,42,.12) 90deg,var(--te-gold) 250deg,rgba(248,199,42,0) 330deg);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 79%);
  mask:radial-gradient(closest-side,transparent 78%,#000 79%);
  animation:te-eng-spin 3.4s linear infinite;
  filter:drop-shadow(0 0 16px rgba(248,199,42,.6))}
.te-wlapp__orbit{position:relative;width:52%;height:52%;
  filter:drop-shadow(0 0 14px rgba(248,199,42,.65))}
@keyframes te-eng-spin{to{--te-eng:360deg}}

.te-wlapp__tag{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:.5rem .9rem;border-radius:99px;background:rgba(7,10,9,.86);
  border:1px solid rgba(248,199,42,.42);font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(11px,1.05vw,14px);letter-spacing:.1em;text-transform:uppercase;
  color:var(--te-text)}
.te-wlapp__tag i{width:8px;height:8px;border-radius:50%;background:var(--te-gold);
  animation:te-pulse 1.4s ease-in-out infinite}
.te-wlapp__tag u{text-decoration:none;color:var(--te-gold);font-variant-numeric:tabular-nums;
  margin:0 .1em 0 .35em}
@keyframes te-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

@media(prefers-reduced-motion:reduce){
  .te-wlapp__ring{animation:none}
  .te-wlapp__tag i{animation:none}
}

@media(max-width:640px){
  .te-turn__row{grid-template-columns:96px 1fr 72px;gap:9px}
  .te-turn__who{font-size:.66rem;letter-spacing:.1em}
}

/* beat C · the board. This is the product, so it gets the widest frame in the
   section and the copy around it stays out of its way. */
.te-turn__fig{margin:2.2rem auto 0;max-width:1180px;width:100%}
.te-turn__fig img{display:block;width:100%;height:auto}
.te-turn__h3+.te-turn__lede{margin-top:1rem}
.te-turn__punch{margin:2.2rem auto 0;max-width:820px;padding:1.5rem 1.8rem;border-radius:15px;
  text-align:center;background:linear-gradient(120deg,rgba(30,192,114,.13),rgba(0,0,0,.3));
  border:1px solid rgba(30,192,114,.4)}
.te-turn__punch p{margin:0;font-size:clamp(17px,1.5rem,24px);line-height:1.45;color:var(--te-text)}
.te-turn__punch b{color:var(--te-gold)}

/* ---- 14 · the reveal ------------------------------------------------------
   The one light section on the page. The generated colour layer carries the
   vendor's !important flags, so the ground and the type have to be stated at
   that weight or they get overwritten back to the dark palette. */
.te-kit{background:var(--te-paper) !important;color:var(--te-paper-text) !important;
  padding:5.5rem 0 5rem;text-align:center;position:relative;overflow:hidden}
/* a faint warm wash so the paper is not flat white under the boxes */
.te-kit::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 30%,rgba(30,192,114,.09),transparent 60%)}
.te-kit>*{position:relative}

.te-kit__pre{font-family:'Sora',sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-green-lo);margin:0 0 .9rem}
.te-kit__name{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(38px,7vw,96px);line-height:.97;color:var(--te-paper-text) !important;
  margin:0 auto;max-width:14ch;text-wrap:balance}
/* the name alone read as a software product, so the descriptor sits directly
   under it at headline weight rather than being buried in the body line */
.te-kit__sub{margin:.7rem auto 0;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(17px,2.1vw,30px);letter-spacing:-.02em;line-height:1.2;
  color:var(--te-paper-text-2)}
.te-kit__sub b{color:var(--te-green-lo);font-weight:800;
  box-shadow:inset 0 -.14em 0 rgba(30,192,114,.3)}

.te-kit__say{max-width:52ch;margin:1.1rem auto 0;font-size:clamp(15px,1.22rem,20px);
  line-height:1.5;color:var(--te-paper-text-2)}
.te-kit__say b{color:var(--te-paper-text);font-weight:700;
  /* gradient rather than an inset shadow so the highlight re-draws cleanly on
     every wrapped line instead of smearing one bar across the whole block */
  background:linear-gradient(transparent 58%,rgba(248,199,42,.5) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.te-kit__fig{margin:1.6rem auto 0;max-width:1180px;width:100%}
.te-kit__fig img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 60px rgba(30,39,36,.28))}

/* the hard facts. Five of them, the price carried differently so the eye
   finishes on it rather than reading a row of equals. */
.te-kit__facts{list-style:none;margin:1.4rem auto 0;padding:0;max-width:940px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.te-kit__facts li{border-radius:14px;padding:1.1rem .6rem;background:rgba(30,39,36,.05);
  border:1px solid rgba(30,39,36,.12)}
.te-kit__facts b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(19px,2.1vw,30px);line-height:1.05;letter-spacing:-.035em;
  color:var(--te-paper-text);font-variant-numeric:tabular-nums}
.te-kit__facts span{display:block;margin-top:.4rem;font-size:.82rem;line-height:1.35;
  color:var(--te-paper-text-2)}
/* qualified with li because `.te-kit__facts li` is class+element and would
   otherwise outrank a bare class and keep painting this tile grey */
.te-kit__facts li.te-kit__facts--hero{
  background:linear-gradient(160deg,var(--te-gold-hi),var(--te-gold));
  border-color:var(--te-gold-lo);box-shadow:0 10px 26px rgba(224,173,20,.35)}
.te-kit__facts li.te-kit__facts--hero b{color:#3a2c00}
.te-kit__facts li.te-kit__facts--hero span{color:#6b5410}

@media(max-width:767px){
  .te-kit{padding:3.6rem 0 3.4rem}
  .te-kit__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .te-kit__facts--hero{grid-column:1/-1}
}

/* ---- 15 · the process -----------------------------------------------------
   Same paper as the reveal, so 14 and 15 read as one white block. The steps
   alternate down a connector that fills as you scroll. Day 4 carries steps
   4, 5 and 6 in one wide block because that day is the amplifier and cutting
   it into three would make the biggest beat look like the smallest. */
.te-proc{background:var(--te-paper) !important;color:var(--te-paper-text) !important;
  padding:1rem 0 5.5rem}
.te-proc__pre{text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-green-lo);margin:0 0 .8rem}
.te-proc__h{text-align:center;font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(28px,4.4vw,56px);line-height:1.04;color:var(--te-paper-text) !important;
  margin:0 auto;max-width:18ch;text-wrap:balance}
.te-proc__lede{text-align:center;max-width:58ch;margin:1.1rem auto 0;
  font-size:clamp(15px,1.16rem,19px);line-height:1.6;color:var(--te-paper-text-2)}

.te-proc__rail{position:relative;margin-top:3.2rem}
/* the connector sits behind the blocks and fills top down on scroll */
.te-proc__line{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:rgba(30,39,36,.13);border-radius:99px;overflow:hidden}
.te-proc__line u{display:block;width:100%;height:0;text-decoration:none;border-radius:99px;
  background:linear-gradient(180deg,var(--te-green),var(--te-gold))}

.te-proc__step{position:relative;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(20px,3.4vw,54px);padding:2.2rem 0}
.te-proc__step--alt .te-proc__body{order:2}
.te-proc__step--alt .te-proc__fig{order:1}
/* the dot where each step meets the line */
.te-proc__step::before{content:'';position:absolute;left:50%;top:50%;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:var(--te-paper);border:3px solid var(--te-green);z-index:2}
.te-proc__step--last::before{border-color:var(--te-gold-lo);background:var(--te-gold)}

.te-proc__tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 .9rem}
/* qualified past `.te-proc__body p b` further down, which is class+element
   heavy enough to outrank a bare class and was painting these dark on dark */
.te-proc__tags b.te-proc__n{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;font-family:'Sora',sans-serif;font-weight:800;
  font-size:1.1rem;color:#fff;background:var(--te-paper-text)}
.te-proc__tags b.te-proc__n--ask{background:var(--te-gold);color:#3a2c00}
.te-proc__day{font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--te-paper-text-2);
  border:1px solid rgba(30,39,36,.2);border-radius:99px;padding:.4rem .7rem}
.te-proc__word{font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--te-green-lo);
  background:rgba(30,192,114,.12);border-radius:99px;padding:.4rem .7rem}

.te-proc__body h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.7vw,40px);line-height:1.08;color:var(--te-paper-text) !important;
  margin:0 0 .8rem;text-wrap:balance}
.te-proc__body p{font-size:clamp(15px,1.1rem,18px);line-height:1.6;
  color:var(--te-paper-text-2);margin:0 0 .8rem}
.te-proc__body p b{color:var(--te-paper-text)}

/* the payoff line. Same shape every step so the eye learns to hunt for it. */
.te-proc__get{margin:1.1rem 0 0 !important;padding:.95rem 1.1rem;border-radius:12px;
  background:linear-gradient(120deg,rgba(248,199,42,.26),rgba(248,199,42,.1));
  border-left:4px solid var(--te-gold);color:var(--te-paper-text) !important;
  font-size:clamp(15px,1.08rem,18px) !important;line-height:1.5}
.te-proc__get b{color:var(--te-paper-text)}

.te-proc__fig{margin:0}
.te-proc__fig img{display:block;width:100%;height:auto;border-radius:14px;
  filter:drop-shadow(0 22px 44px rgba(30,39,36,.22))}

/* Day 4 used to run full width with three sub cards inside it, which put the
   connector straight through the middle of the block and cut one continuous
   day into three pieces. It is a normal alternating block now. */

@media(max-width:900px){
  .te-proc__line{left:18px}
  .te-proc__step{grid-template-columns:1fr;gap:18px;padding:1.6rem 0 1.6rem 46px}
  .te-proc__step--alt .te-proc__body,.te-proc__step--alt .te-proc__fig{order:unset}
  .te-proc__step::before{left:18px;top:2.6rem}
}

/* ---- 17 · social proof ----------------------------------------------------
   Back to dark after the white masterclass block, so the paper reads as one
   deliberate island rather than the page changing its mind.

   Avatars are monograms, not photographs, and that is on purpose. While these
   quotes are placeholders no invented person has a face attached to them, and
   when the real students send pictures the monogram swaps for an <img> without
   the layout moving. */
.te-say{padding:5rem 0 5.5rem}
.te-say__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(27px,4.2vw,54px);line-height:1.06;color:var(--te-text);
  margin:.6rem auto 1rem;max-width:24ch;text-wrap:balance}
.te-say__lede{max-width:56ch;margin:0 auto;font-size:clamp(15px,1.14rem,19px);
  line-height:1.6;color:var(--te-text-2)}

/* two columns, not three. The students wrote in short punchy lines and that
   rhythm is the thing that makes them read as people rather than as copy, so
   the cards get the width to keep those lines on one line each. */
.te-say__grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;align-items:start}
.te-say__c{position:relative;margin:0;border-radius:18px;padding:1.8rem 1.9rem 1.5rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.te-say__c::before{content:'\201C';position:absolute;top:.2rem;right:1.3rem;
  font-family:Georgia,serif;font-size:5.5rem;line-height:1;color:rgba(248,199,42,.2)}
.te-say__c blockquote{margin:0 0 1.2rem;padding:0;border:0;position:relative;
  font-size:clamp(15px,1.08rem,18px);line-height:1.5;color:var(--te-text-2)}
/* one paragraph per beat, tight, so the staccato survives */
.te-say__c blockquote p{margin:0 0 .55rem}
.te-say__c blockquote p:last-child{margin-bottom:0}
.te-say__c blockquote b{color:var(--te-gold);font-weight:700}

.te-say__c figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}
.te-say__av{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.92rem;letter-spacing:.02em;color:var(--te-ink);
  background:linear-gradient(150deg,var(--te-green-hi),var(--te-green-lo))}
.te-say__who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.te-say__who b{font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:-.015em;color:var(--te-text)}
.te-say__who i{font-style:normal;font-size:.84rem;color:var(--te-text-3)}

/* the objection chip sits in the caption row and pushes to the right, so the
   eye gets name, place, then the thing this quote actually kills */
.te-say__was{margin-left:auto;font-family:'Sora',sans-serif;
  font-weight:800;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--te-gold);background:rgba(248,199,42,.12);
  border:1px solid rgba(248,199,42,.3);border-radius:99px;padding:.4rem .75rem}

/* real faces now, so the avatar earns a bit more size and a soft ring */
img.te-say__av{object-fit:cover;background:none;border:2px solid rgba(248,199,42,.45)}
.te-say__av{width:54px;height:54px}

@media(max-width:860px){
  .te-say__grid{grid-template-columns:minmax(0,1fr)}
  .te-say__was{margin-left:0}
}

/* three of the six wrote in shapes that are not paragraphs, and those shapes
   are doing the work: Chris kept a scoreboard, Natalie led with a start and
   finish pair, Paul wrote the argument as dialogue. Give each its own form
   rather than flattening them all into prose. */
.te-say__score{display:flex !important;align-items:center;gap:.55rem;
  margin:.2rem 0 .9rem !important;font-family:'Sora',sans-serif}
.te-say__score span{font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--te-text-3)}
.te-say__score b{font-weight:800;font-size:1.5rem;line-height:1;color:var(--te-gold);
  margin-right:.6rem;font-variant-numeric:tabular-nums}

.te-say__pair{display:flex !important;gap:10px;margin:0 0 .9rem !important}
.te-say__pair span{flex:1;border-radius:11px;padding:.7rem .85rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.te-say__pair i{display:block;font-style:normal;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--te-text-3);
  margin-bottom:.2rem}
.te-say__pair b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:1.25rem;letter-spacing:-.025em;color:var(--te-green-hi) !important;
  font-variant-numeric:tabular-nums}

.te-say__line{padding-left:4.4rem;text-indent:-4.4rem;color:var(--te-text) !important}
.te-say__line i{display:inline-block;width:4rem;font-style:normal;text-indent:0;
  font-family:'Sora',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--te-gold);vertical-align:baseline}

/* the honesty note under the grid. It is doing sales work, not disclaimer
   work, so it is styled to be read rather than to be skipped. */
.te-say__note{max-width:64ch;margin:2.4rem auto 0;text-align:center;
  font-size:clamp(14px,1.02rem,17px);line-height:1.6;color:var(--te-text-3);
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09)}

/* ---- 13 beat D · the tape -------------------------------------------------
   Two crops straight out of the real briefs, 15 days apart. The design job is
   to stay out of their way: they are only persuasive because they look like
   documents rather than like marketing, so the frame is a plain rule and a
   date, and the page does not restyle a single pixel inside them. */
.te-tape{max-width:1000px;margin:2.4rem auto 0;padding:clamp(18px,2.4vw,30px);
  border-radius:20px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.11)}
.te-tape--long{margin-top:18px;background:linear-gradient(160deg,rgba(248,199,42,.07),rgba(0,0,0,.34));
  border-color:rgba(248,199,42,.28)}

.te-tape__k{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 .9rem}
.te-tape__k b{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(17px,1.8vw,24px);
  letter-spacing:-.025em;color:var(--te-gold)}
.te-tape__k span{font-family:'Sora',sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--te-text-3)}

.te-tape__fig{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.te-tape__fig img{display:block;width:100%;height:auto}
.te-tape__cap{margin:1rem 0 0;font-size:clamp(14px,1.06rem,17px);line-height:1.55;
  color:var(--te-text-2)}
.te-tape__cap b{color:var(--te-gold)}
.te-tape__note{display:block;margin:.6rem 0 .5rem;color:var(--te-text) !important}

/* the 15 day gap, drawn rather than written, so the jump reads as elapsed time */
.te-tape__gap{display:flex;align-items:center;gap:14px;margin:1.6rem 0}
.te-tape__gap i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(248,199,42,.55),transparent)}
.te-tape__gap span{font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-gold);white-space:nowrap}

.te-tape__punch{margin:1.6rem 0 0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:clamp(15px,1.15rem,19px);line-height:1.5;color:var(--te-text-2)}
.te-tape__punch b{color:var(--te-text)}

/* ---- 18 · open the hood ---------------------------------------------------
   Four jobs, not a feature count. Then Sean leaning on the panel, then the
   un-scare. The order is deliberate: wow, then human, then permission to
   ignore all of it on day one. Never ship the grid without the calm block. */
.te-hood{padding:5rem 0 5.5rem}
.te-hood__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(28px,4.4vw,56px);line-height:1.05;color:var(--te-text);
  margin:.6rem auto 1rem;max-width:20ch;text-wrap:balance}
.te-hood__lede{max-width:58ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

/* four alternating beats, then Sean full width. The change of rhythm at the
   fifth is the pattern break, so do not "tidy" him back into the alternation. */
.te-hood__beats{margin-top:3rem;display:flex;flex-direction:column;gap:clamp(28px,4vw,64px)}
.te-hood__b{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  gap:clamp(22px,3.4vw,58px)}
.te-hood__b--alt .te-hood__fig{order:2}
.te-hood__b--alt .te-hood__t{order:1}
.te-hood__fig{margin:0}
.te-hood__fig img{display:block;width:100%;height:auto}

.te-hood__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--te-green-hi);margin:0 0 .7rem}
.te-hood__t h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.9vw,40px);line-height:1.08;color:var(--te-text);
  margin:0 0 1.1rem;text-wrap:balance}

/* Halbert bullets: a gold tick, tight leading, one idea each, no wrapper card.
   The bullet list IS the graphic on this side, so it must not be boxed in. */
.te-hood__ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.te-hood__ul li{position:relative;padding-left:1.9rem;font-size:clamp(15px,1.1rem,18px);
  line-height:1.55;color:var(--te-text-2)}
.te-hood__ul li::before{content:'';position:absolute;left:0;top:.44em;width:12px;height:7px;
  border-left:2.5px solid var(--te-gold);border-bottom:2.5px solid var(--te-gold);
  transform:rotate(-45deg)}
.te-hood__ul li b{color:var(--te-text)}

.te-hood__more{max-width:56ch;margin:1.8rem auto 0;text-align:center;
  font-size:clamp(15px,1.1rem,18px);line-height:1.6;color:var(--te-text-3)}

/* Sean leans on the LEFT border of this panel, so he is pinned flush to it and
   the panel keeps left padding to clear him. Change the padding and the lean
   stops reading as a lean. */
.te-hood__sean{position:relative;margin:clamp(30px,4vw,64px) 0 0;width:100%;border-radius:24px;
  min-height:clamp(420px,44vw,560px);display:flex;align-items:center;
  padding:clamp(26px,3.4vw,54px) clamp(24px,3.4vw,56px) clamp(26px,3.4vw,54px) clamp(24px,26vw,420px);
  background:linear-gradient(140deg,rgba(30,192,114,.16),rgba(248,199,42,.07) 55%,rgba(0,0,0,.46));
  border:1px solid rgba(30,192,114,.42);overflow:hidden}
/* 110% put his head above the panel's top edge and overflow:hidden lopped it
   off. He now sits inside the panel and the panel carries a min-height so he
   is never squeezed by short copy. */
.te-hood__me{position:absolute;left:clamp(-30px,-1vw,0px);bottom:0;height:94%;width:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.te-hood__seanbody{position:relative}
.te-hood__k--big{color:var(--te-gold)}
.te-hood__sean h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(26px,3.8vw,52px);line-height:1.05;color:var(--te-text);margin:0 0 1rem}
.te-hood__seanlede{font-size:clamp(15px,1.16rem,19px);line-height:1.6;
  color:var(--te-text-2);margin:0 0 1.3rem}
.te-hood__ul--sean li{font-size:clamp(15px,1.14rem,19px)}
.te-hood__seanp{margin:1.4rem 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.14);font-size:clamp(15px,1.16rem,19px);
  line-height:1.55;color:var(--te-text)}
.te-hood__seanp b{color:var(--te-gold)}

.te-hood__calm{margin:2.4rem auto 0;max-width:820px;border-radius:18px;
  padding:clamp(20px,2.6vw,34px);text-align:center;
  background:linear-gradient(140deg,rgba(248,199,42,.12),rgba(0,0,0,.34));
  border:1px solid rgba(248,199,42,.36)}
/* qualified with p because `.te-hood__calm p` below is class+element and was
   shrinking the one line in this block that has to be big. Third time this
   stylesheet has done this to me: never write a bare single class here. */
.te-hood__calm p.te-hood__calmbig{font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(22px,2.8vw,38px);line-height:1.12;
  color:var(--te-text);margin:0 0 1rem}
.te-hood__calm p{font-size:clamp(15px,1.12rem,18px);line-height:1.6;color:var(--te-text-2);margin:0 0 .7rem}
.te-hood__calm p:last-child{margin-bottom:0}
.te-hood__calm b{color:var(--te-gold)}

@media(max-width:860px){
  .te-hood__b{grid-template-columns:minmax(0,1fr);gap:18px}
  .te-hood__b--alt .te-hood__fig,.te-hood__b--alt .te-hood__t{order:unset}
}
@media(max-width:760px){
  /* he stops leaning and simply stands beside the copy, because a 330px inset
     eats the whole column on a phone */
  .te-hood__sean{padding:0 0 clamp(20px,5vw,28px);text-align:center}
  .te-hood__me{position:relative;left:auto;bottom:auto;height:auto;width:min(56%,230px);
    display:block;margin:0 auto}
  .te-hood__seanbody{padding:0 clamp(18px,5vw,26px);text-align:left}
}

/* ---- 19, 20, 21 · what you get, the bonuses, the prize --------------------
   19 reuses the beat primitives from 13 and 18. 20 runs the same idea tighter
   because six of them at full height would be a slog. 21 breaks the rhythm
   entirely, which is the point: it is the last thing before the price. */
.te-get{padding:5rem 0 4rem}
.te-get__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05;color:var(--te-text);
  margin:.6rem auto 1rem;max-width:20ch;text-wrap:balance}
.te-get__lede{max-width:56ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}
.te-get__beats{margin-top:2.8rem}
/* the tiles are square art with their own frame, so they get a cap or they
   tower over the copy beside them */
.te-get__fig{max-width:420px;margin-inline:auto}
.te-get__fig img{border-radius:16px}

.te-bon{padding:4rem 0 4.5rem}
/* 3 across by 2 down. The earlier full width alternating rows made six items
   feel like a slog and buried the values, which are the point of this block. */
.te-bon__grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.te-bon__c{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.te-bon__c figure{margin:0}
.te-bon__c figure img{display:block;width:100%;height:auto}
.te-bon__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-gold);
  margin:1.3rem 1.4rem .45rem}
.te-bon__c h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.026em;
  font-size:clamp(19px,1.9vw,25px);line-height:1.1;color:var(--te-text);margin:0 1.4rem .55rem}
.te-bon__c p{font-size:.96rem;line-height:1.55;color:var(--te-text-3);margin:0 1.4rem 1.2rem}
.te-bon__v{margin:auto 1.4rem 1.4rem;align-self:flex-start;
  font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--te-gold);background:rgba(248,199,42,.12);
  border:1px solid rgba(248,199,42,.34);border-radius:99px;padding:.42rem .85rem}

/* the stack. A ledger, so the eye can run down one column of numbers and land
   on the total. Anything that breaks that column breaks the block. */
.te-stack{max-width:760px;margin:3rem auto 0;border-radius:22px;
  padding:clamp(22px,3vw,42px);background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.13)}
.te-stack__k{text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--te-text-3);margin:0 0 1.4rem}
.te-stack__rows{list-style:none;margin:0;padding:0}
.te-stack__rows li{display:flex;align-items:baseline;gap:12px;padding:.72rem 0;
  border-bottom:1px dashed rgba(255,255,255,.13)}
.te-stack__rows b{flex:1;font-weight:500;font-size:clamp(14px,1.04rem,17px);
  line-height:1.4;color:var(--te-text-2)}
.te-stack__rows span{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(15px,1.1rem,18px);color:var(--te-text);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.te-stack__tot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:1.1rem 0 .5rem}
.te-stack__tot span{font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--te-text-3)}
.te-stack__tot b{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.035em;
  color:var(--te-text);font-variant-numeric:tabular-nums}
.te-stack__note{font-size:.9rem;line-height:1.5;color:var(--te-text-3);margin:0 0 1.6rem}

.te-stack__now{border-radius:16px;padding:1.4rem 1.6rem;text-align:center;
  background:linear-gradient(150deg,var(--te-gold-hi),var(--te-gold));
  box-shadow:0 16px 40px rgba(224,173,20,.3)}
.te-stack__now span{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#6b5410}
.te-stack__now b{display:block;margin:.25rem 0 .2rem;font-family:'Sora',sans-serif;
  font-weight:800;font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-.04em;
  color:#3a2c00;font-variant-numeric:tabular-nums}
.te-stack__now em{font-style:normal;font-size:.94rem;color:#6b5410;font-weight:600}

@media(max-width:900px){.te-bon__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.te-bon__grid{grid-template-columns:minmax(0,1fr)}}

.te-prize{padding:2rem 0 5.5rem}
.te-prize__box{max-width:1000px;margin:0 auto;border-radius:24px;text-align:center;
  padding:clamp(26px,3.6vw,56px);
  background:linear-gradient(155deg,rgba(248,199,42,.17),rgba(0,0,0,.5));
  border:1px solid rgba(248,199,42,.5)}
.te-prize__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-gold);margin:0 0 .9rem}
.te-prize__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(26px,3.6vw,50px);line-height:1.06;color:var(--te-text) !important;
  margin:0 auto 1.1rem;max-width:22ch;text-wrap:balance}
.te-prize__lede{max-width:54ch;margin:0 auto;font-size:clamp(15px,1.18rem,20px);
  line-height:1.6;color:var(--te-text-2)}
.te-prize__lede b{color:var(--te-gold);font-size:1.15em}

/* an actual podium: 2nd, 1st, 3rd, with first raised. Three winners rather
   than one because one set of odds is a set everybody talks themselves out of */
.te-prize__pod{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;
  gap:12px;max-width:620px;margin:2.2rem auto 0}
.te-prize__p{border-radius:16px 16px 0 0;padding:1.2rem .9rem 1.4rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-bottom:0}
.te-prize__p--1{padding-top:2rem;
  background:linear-gradient(170deg,var(--te-gold-hi),var(--te-gold));
  border-color:var(--te-gold-lo)}
.te-prize__pl{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-text-3);margin-bottom:.4rem}
.te-prize__p--1 .te-prize__pl{color:#6b5410}
.te-prize__p b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(24px,3.4vw,46px);line-height:1;letter-spacing:-.035em;
  color:var(--te-text);font-variant-numeric:tabular-nums}
.te-prize__p--1 b{color:#3a2c00}
.te-prize__p em{display:block;margin-top:.5rem;font-style:normal;font-size:.76rem;
  line-height:1.3;color:#6b5410;font-weight:600}

.te-prize__how{list-style:none;counter-reset:pz;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid rgba(255,255,255,.14);border-top:0;border-radius:0 0 16px 16px;
  max-width:620px;margin:0 auto}
.te-prize__how li{counter-increment:pz;padding:1.1rem .8rem;text-align:center}
.te-prize__how li+li{border-left:1px solid rgba(255,255,255,.14)}
.te-prize__how b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em;color:var(--te-text);margin-bottom:.25rem}
.te-prize__how b::before{content:counter(pz) '. ';color:var(--te-gold)}
.te-prize__how span{font-size:.86rem;line-height:1.4;color:var(--te-text-3)}

.te-prize__fine{margin:1.6rem auto 0;max-width:52ch;font-size:clamp(15px,1.12rem,18px);
  line-height:1.55;color:var(--te-text-2)}
.te-prize__fine b{color:var(--te-text)}

@media(max-width:860px){
  .te-bon__b,.te-bon__b--alt{grid-template-columns:minmax(0,1fr)}
  .te-bon__b--alt .te-bon__fig,.te-bon__b--alt .te-bon__t{order:unset}
  .te-bon__fig{max-width:220px}
  .te-prize__how{grid-template-columns:minmax(0,1fr)}
  .te-prize__how li+li{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}

/* ---- 25 · the close -------------------------------------------------------
   Hard CTA, then the two Mondays. The left column is deliberately not a
   punishment: it says nothing bad happened, nothing happened at all, which
   lands harder than a threat and does not break the rule about never selling
   from the downside. */
.te-close{padding:4.5rem 0 5.5rem}
.te-close__cta{max-width:900px;margin:0 auto;text-align:center;border-radius:24px;
  padding:clamp(28px,3.6vw,56px);
  background:linear-gradient(155deg,rgba(248,199,42,.16),rgba(0,0,0,.5));
  border:1px solid rgba(248,199,42,.48)}
.te-close__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-gold);margin:0 0 .9rem}
.te-close__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.034em;
  font-size:clamp(28px,4vw,54px);line-height:1.05;color:var(--te-text) !important;
  margin:0 auto 1rem;max-width:20ch;text-wrap:balance}
.te-close__p{max-width:52ch;margin:0 auto 1.8rem;font-size:clamp(15px,1.18rem,20px);
  line-height:1.6;color:var(--te-text-2)}
.te-close__p b{color:var(--te-gold)}
.te-close__facts{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(18px,4vw,54px);margin:1.8rem 0 0;padding:0}
.te-close__facts b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(22px,2.6vw,36px);line-height:1;letter-spacing:-.03em;
  color:var(--te-text);font-variant-numeric:tabular-nums}
.te-close__facts span{display:block;margin-top:.3rem;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--te-text-3)}

.te-close__pre{margin-top:4.5rem !important}
.te-close__h2{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(27px,4vw,52px);line-height:1.05;color:var(--te-text);
  margin:.6rem auto 1rem;max-width:20ch;text-wrap:balance}
.te-close__lede{max-width:54ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

.te-fork{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.te-fork__c{border-radius:20px;padding:clamp(22px,2.6vw,36px)}
.te-fork__c--a{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12)}
.te-fork__c--b{background:linear-gradient(150deg,rgba(30,192,114,.14),rgba(0,0,0,.4));
  border:1px solid rgba(30,192,114,.45)}
.te-fork__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-text-3);margin:0 0 .5rem}
.te-fork__c--b .te-fork__k{color:var(--te-green-hi)}
.te-fork__c h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,34px);line-height:1.08;color:var(--te-text);margin:0 0 1rem}
.te-fork__c p{font-size:clamp(15px,1.1rem,18px);line-height:1.6;
  color:var(--te-text-2);margin:0 0 .85rem}
.te-fork__c p b{color:var(--te-text)}
.te-fork__c--b p b{color:var(--te-green-hi)}
.te-fork__end{margin:1.1rem 0 0 !important;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.13);color:var(--te-text) !important}
.te-fork__c--a .te-fork__end b{color:var(--te-red)}

.te-close__last{max-width:760px;margin:2.6rem auto 0;text-align:center}
.te-close__last>p:first-child{font-size:clamp(17px,1.5rem,24px);line-height:1.45;
  color:var(--te-text);margin:0 0 1.5rem}
.te-close__last>p:first-child b{color:var(--te-gold)}
.te-close__fine{margin:1.4rem 0 0;font-size:.95rem;line-height:1.55;color:var(--te-text-3)}
.te-close__fine b{color:var(--te-text-2)}

@media(max-width:820px){
  .te-fork{grid-template-columns:minmax(0,1fr)}
}

/* ---- 24 · the guarantee ---------------------------------------------------
   Conditional, and the conditions are the selling point rather than small
   print, so they are set as a list at body size instead of being buried.
   The fixed date is deliberate: everybody gets the same deadline whenever
   they bought, which is simpler to state and impossible to argue with. */
.te-guar{padding:5rem 0 4.5rem}
.te-guar__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.034em;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05;color:var(--te-text);
  margin:.6rem auto 2.2rem;max-width:20ch;text-wrap:balance}
.te-guar__box{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,240px) 1fr;align-items:start;
  gap:clamp(22px,3.4vw,48px);border-radius:24px;padding:clamp(24px,3.2vw,48px);
  background:linear-gradient(150deg,rgba(30,192,114,.12),rgba(0,0,0,.44));
  border:1px solid rgba(30,192,114,.42)}
.te-guar__seal{margin:0}
.te-guar__seal img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 34px rgba(30,192,114,.42))}
.te-guar__body h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3vw,40px);line-height:1.06;color:var(--te-text);margin:0 0 1rem}
.te-guar__big{font-size:clamp(16px,1.24rem,21px);line-height:1.55;
  color:var(--te-text-2);margin:0 0 1.6rem}
.te-guar__big b{color:var(--te-green-hi)}
.te-guar__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-gold);margin:0 0 .8rem}
.te-guar__terms{list-style:none;margin:0 0 1.4rem;padding:0;
  display:flex;flex-direction:column;gap:.8rem}
.te-guar__terms li{position:relative;padding-left:1.9rem;
  font-size:clamp(15px,1.1rem,18px);line-height:1.55;color:var(--te-text-2)}
.te-guar__terms li::before{content:'';position:absolute;left:0;top:.44em;width:12px;height:7px;
  border-left:2.5px solid var(--te-green-hi);border-bottom:2.5px solid var(--te-green-hi);
  transform:rotate(-45deg)}
.te-guar__terms b{color:var(--te-text)}
.te-guar__when{font-size:.98rem;line-height:1.55;color:var(--te-text-3);margin:0;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.13)}
.te-guar__when b{color:var(--te-text-2)}
.te-guar__sig{max-width:62ch;margin:2rem auto 0;text-align:center;
  font-size:clamp(16px,1.24rem,21px);line-height:1.55;color:var(--te-text)}
.te-guar__sig b{color:var(--te-gold)}

@media(max-width:760px){
  .te-guar__box{grid-template-columns:minmax(0,1fr);text-align:center}
  .te-guar__seal{max-width:180px;margin:0 auto}
  .te-guar__terms li{text-align:left}
}

/* ---- 26 · pick your seat --------------------------------------------------
   Two doors, not two equals. The $47 card is the answer to the page and the
   bundle is the second door, so they are NOT the same weight: the bundle is
   raised and gold, but the left card keeps a full list and a real button so it
   never reads as the consolation prize. Front end volume is what feeds
   everything behind it, so do not let the left column shrink. */
/* the vendor paints nSec-15 with a diagonal line texture that runs straight
   through the card copy and makes it unreadable. Killed here, and the cards
   themselves go near-opaque so nothing shows through them either. */
.te-pick{padding:5rem 0 5rem;background:var(--te-ink) !important;background-image:none !important}
.te-pick__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.034em;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05;color:var(--te-text) !important;
  margin:.6rem auto 1rem;max-width:18ch;text-wrap:balance}
.te-pick__lede{max-width:56ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

.te-pick__grid{margin-top:2.8rem;display:grid;grid-template-columns:1fr 1.12fr;
  align-items:start;gap:20px;max-width:1120px;margin-inline:auto}
.te-pick__c{position:relative;border-radius:22px;padding:clamp(24px,3vw,40px);
  background:#141a17;border:1px solid rgba(255,255,255,.15)}
.te-pick__c--all{background:linear-gradient(160deg,#241f0e,#12100a 60%);
  border:1px solid rgba(248,199,42,.55);box-shadow:0 26px 70px rgba(0,0,0,.6)}
.te-pick__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:'Sora',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:#3a2c00;background:var(--te-gold);
  border-radius:99px;padding:.42rem .95rem;white-space:nowrap}

.te-pick__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--te-text-3);margin:0 0 .5rem}
.te-pick__k--gold{color:var(--te-gold)}
.te-pick__c h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.6vw,34px);line-height:1.06;color:var(--te-text) !important;margin:0 0 .6rem}
.te-pick__sub{font-size:clamp(15px,1.08rem,18px);line-height:1.5;color:var(--te-text-2);margin:0 0 1.4rem}
.te-pick__sub b{color:var(--te-gold)}

.te-pick__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:1rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:1.4rem}
.te-pick__price b{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(44px,6vw,74px);line-height:1;letter-spacing:-.04em;
  color:var(--te-text);font-variant-numeric:tabular-nums}
.te-pick__price--gold b{color:var(--te-gold)}
.te-pick__price span{font-size:.92rem;color:var(--te-text-3)}

.te-pick__ul{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.te-pick__ul li{position:relative;padding-left:1.8rem;font-size:clamp(14px,1.04rem,17px);
  line-height:1.5;color:var(--te-text-2)}
.te-pick__ul li::before{content:'';position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2.4px solid var(--te-green-hi);border-bottom:2.4px solid var(--te-green-hi);
  transform:rotate(-45deg)}
.te-pick__ul b{color:var(--te-text)}

/* the four parts, each carrying its own real price on the right */
.te-pick__parts{list-style:none;margin:0 0 1.4rem;padding:0}
.te-pick__parts li{display:grid;grid-template-columns:30px 1fr auto;gap:6px 12px;
  align-items:baseline;padding:.9rem 0;border-bottom:1px dashed rgba(255,255,255,.16)}
/* place all four explicitly. Auto placement put the price on its own row
   under the description instead of on the title line, because em spans two
   columns and pushed i down. */
.te-pick__pn{grid-column:1;grid-row:1/span 2;display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:8px;
  font-family:'Sora',sans-serif;font-weight:800;font-size:.82rem;
  color:#3a2c00;background:var(--te-gold)}
.te-pick__parts b{grid-column:2;grid-row:1;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;color:var(--te-text)}
.te-pick__parts i{grid-column:3;grid-row:1;font-style:normal;font-family:'Sora',sans-serif;
  font-weight:800;font-size:1.05rem;color:var(--te-text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* these carry the hooks now, so they are body copy rather than fine print */
.te-pick__parts em{grid-column:2/-1;grid-row:2;font-style:normal;font-size:.98rem;
  line-height:1.55;color:var(--te-text-2)}
.te-pick__parts em b{display:inline;font-size:inherit;color:var(--te-gold)}
.te-pick__parts li{padding:1.05rem 0}

.te-pick__sum{margin:0 0 .9rem}
.te-pick__sum p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0;padding:.42rem 0;font-size:.98rem;color:var(--te-text-3)}
.te-pick__sum b{font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;
  color:var(--te-text-2);font-variant-numeric:tabular-nums}
.te-pick__sum--now b{color:var(--te-gold);font-size:1.5rem}
.te-pick__sum--keep{border-top:1px solid rgba(255,255,255,.16);padding-top:.7rem !important}
.te-pick__sum--keep b{color:var(--te-green-hi);font-size:1.35rem}
.te-pick__real{font-size:.9rem;line-height:1.5;color:var(--te-text-3);margin:0 0 1.4rem}
.te-pick__real b{color:var(--te-text-2)}

/* the long labels wrapped onto two lines at card width, which reads as a
   broken button rather than a big one */
.te-pick__btn{display:block;width:100%;text-align:center;white-space:nowrap;
  padding-inline:1rem;font-size:clamp(15px,1.5vw,20px)}
.te-pick__note{margin:1rem 0 0;font-size:.94rem;line-height:1.5;color:var(--te-text-3);text-align:center}
.te-pick__note--gold{text-align:left;padding-top:1rem;margin-top:1.2rem;
  border-top:1px solid rgba(248,199,42,.28)}
.te-pick__note--gold b{color:var(--te-gold)}
/* the line that kills the which-one-am-I-buying question */
.te-pick__ptr{margin:.9rem 0 0;text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--te-green-hi)}

.te-pick__guar{max-width:70ch;margin:2.4rem auto 0;text-align:center;
  font-size:clamp(15px,1.1rem,18px);line-height:1.6;color:var(--te-text-2)}
.te-pick__guar b{color:var(--te-text)}

@media(max-width:900px){
  .te-pick__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .te-pick__badge{top:-12px}
}

/* ---- 27 · the FAQ ---------------------------------------------------------
   Collapsed by default with the first one open, because the person reading
   this far is hunting for their own objection rather than reading top to
   bottom. Ordered by what each objection costs, not by topic. */
.te-faq{padding:5rem 0 5rem;background:var(--te-ink) !important;background-image:none !important}
.te-faq__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05;color:var(--te-text) !important;
  margin:.6rem auto 1rem;max-width:18ch;text-wrap:balance}
.te-faq__lede{max-width:54ch;margin:0 auto;font-size:clamp(15px,1.12rem,18px);
  line-height:1.6;color:var(--te-text-3)}

/* a visible grid, not an accordion. Somebody at the bottom of a sales page is
   scanning for their own objection, and a collapsed answer cannot be scanned. */
.te-faq__grid{max-width:1060px;margin:2.6rem auto 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.te-faq__c{border-radius:16px;padding:1.6rem 1.7rem;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13)}
.te-faq__c h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,22px);line-height:1.25;color:var(--te-text) !important;
  margin:0 0 .7rem}
/* one card runs to 3 short paragraphs on purpose, so they need spacing */
.te-faq__c p{font-size:clamp(14px,1.04rem,17px);line-height:1.6;
  color:var(--te-text-2);margin:0 0 .7rem}
.te-faq__c p:last-child{margin-bottom:0}
.te-faq__c p b{color:var(--te-gold)}

@media(max-width:820px){.te-faq__grid{grid-template-columns:minmax(0,1fr)}}

/* ---- 28 · the takeaway close ---------------------------------------------
   Three reasons NOT to buy, then the turn. The three cards are deliberately
   plain and slightly cold: any styling that makes them look like features
   kills the effect, because the whole mechanism is that they read as Sean
   genuinely trying to put people off. Only the turn gets colour. */
.te-last{padding:5rem 0 5.5rem;background:var(--te-ink) !important;background-image:none !important}
.te-last__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.034em;
  font-size:clamp(30px,4.6vw,60px);line-height:1.03;color:var(--te-text) !important;
  margin:.6rem auto 1.1rem;max-width:16ch;text-wrap:balance}
.te-last__lede{max-width:56ch;margin:0 auto;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}

.te-last__grid{max-width:1060px;margin:2.6rem auto 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.te-last__c{border-radius:16px;padding:1.6rem 1.7rem;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.11)}
.te-last__c h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,21px);line-height:1.25;color:var(--te-text) !important;margin:0 0 .7rem}
.te-last__c p{font-size:clamp(14px,1.04rem,17px);line-height:1.6;color:var(--te-text-3);margin:0}
.te-last__c b{color:var(--te-text)}

/* the turn. This is the only warm thing in the section and that contrast is
   doing the work, so it stays the only warm thing in the section. */
.te-last__turn{max-width:820px;margin:2.2rem auto 0;text-align:center;border-radius:20px;
  padding:clamp(24px,3vw,42px);
  background:linear-gradient(150deg,rgba(30,192,114,.16),rgba(0,0,0,.42));
  border:1px solid rgba(30,192,114,.48)}
.te-last__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--te-green-hi);margin:0 0 .6rem}
.te-last__turn h3{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,46px);line-height:1.05;color:var(--te-text) !important;margin:0 0 1rem}
.te-last__turn p{max-width:54ch;margin:0 auto;font-size:clamp(16px,1.2rem,20px);
  line-height:1.6;color:var(--te-text-2)}
.te-last__turn b{color:var(--te-green-hi)}

.te-last__note{max-width:64ch;margin:2.4rem auto 0;padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.12)}
.te-last__note p{font-size:clamp(15px,1.14rem,19px);line-height:1.65;
  color:var(--te-text-2);margin:0 0 1rem}
.te-last__note b{color:var(--te-gold)}
.te-last__sig{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--te-text) !important;margin:1.4rem 0 0 !important}
.te-last__fine{margin:1.2rem 0 0;font-size:.95rem;color:var(--te-text-3)}
.te-last__fine b{color:var(--te-text-2)}

@media(max-width:860px){.te-last__grid{grid-template-columns:minmax(0,1fr)}}

/* ---- proof strip, two labelled bases -------------------------------------
   Session 4. The strip used to run 4 tiles with no labels: tile 1 was Sean's
   own account over 15 years, the other 3 were the 26 year test of the 74
   stocks. A "15 years" tile sat 2 tiles from a "26 years" tile with nothing
   explaining the gap, which is exactly the thread a skeptic pulls. Now the
   two bases are fenced and named, so the different periods read as rigour
   rather than as sloppy maths. Nothing was dropped.
   NOTE the existing `.te-proof__i:nth-child(1) b` rule is class+element and
   would paint the first tile of EACH row gold, so the colour is set
   explicitly below. Same trap as .te-kit__facts li. */
.te-proof--split{display:grid;grid-template-columns:minmax(190px,1fr) 3fr;
  gap:1px;background:rgba(30,192,114,.22);align-items:stretch}
.te-proof__g{display:flex;flex-direction:column;background:var(--te-ink)}
.te-proof__lab{display:block;padding:.62rem 1rem .5rem;text-align:center;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--te-text-3);background:rgba(30,192,114,.09);
  border-bottom:1px solid rgba(30,192,114,.18)}
.te-proof__row{display:grid;grid-template-columns:1fr;gap:1px;flex:1;
  background:rgba(30,192,114,.18)}
.te-proof__row--3{grid-template-columns:repeat(3,1fr)}
.te-proof--split .te-proof__i{display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.te-proof--split .te-proof__i b{color:var(--te-green-hi)}
.te-proof--split .te-proof__i--mine b{color:var(--te-gold);font-size:2.6rem}
@media(max-width:900px){
  .te-proof--split{grid-template-columns:1fr}
  .te-proof__row--3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .te-proof__row--3{grid-template-columns:1fr 1fr}
  .te-proof__row--3 .te-proof__i:last-child{grid-column:1/-1}
  .te-proof--split .te-proof__i--mine b{font-size:2rem}
  .te-proof__lab{font-size:.62rem;letter-spacing:.08em}
}

/* ---- the Sunday capstone -------------------------------------------------
   Session 4. The process rail is 5 alternating body/figure pairs. The
   celebration call has no figure and is not a teaching day, so it runs full
   width and centred: one wide block after 5 narrow ones reads as the finish
   line rather than as a 6th lesson. Gold, because .te-proc__step--last
   already paints the connector dot gold and this is where the line ends. */
.te-proc__sun{display:flex;justify-content:center;margin-top:2.6rem}
.te-proc__sun .te-proc__body{max-width:62ch;text-align:center;
  border-radius:18px;padding:clamp(22px,3vw,34px);
  background:linear-gradient(155deg,rgba(248,199,42,.16),rgba(30,192,114,.05));
  border:1px solid rgba(248,199,42,.5)}
.te-proc__sun .te-proc__tags{justify-content:center}

/* ---- 13b · the 3 lies ----------------------------------------------------
   Brought across from the AIE masterclass page. The struck-through belief
   sits in red, the replacement sits in green, so the eye reads kill-then-fix
   without having to parse a word of it. Red is used ONLY here and only on a
   belief, never on money, because the page never sells the downside. */
.te-lies{padding:4.4rem 0 5rem}
.te-lies__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.06;margin:0 auto;max-width:20ch;text-wrap:balance}
.te-lies__lede{max-width:56ch;margin:1.1rem auto 0;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-3)}
.te-lies__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.7vw,22px);margin-top:3rem}
.te-lies__c{position:relative;border-radius:16px;padding:clamp(20px,2.3vw,30px);
  background:linear-gradient(165deg,rgba(30,192,114,.07),rgba(0,0,0,.34));
  border:1px solid rgba(30,192,114,.26)}
.te-lies__n{position:absolute;top:-14px;left:clamp(20px,2.3vw,30px);
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;
  color:#0f1412;background:var(--te-gold)}
.te-lies__lie{margin:.9rem 0 .9rem;font-size:clamp(15px,1.18rem,19px);line-height:1.4}
.te-lies__lie s{color:var(--te-red);text-decoration-thickness:2px;
  text-decoration-color:rgba(255,125,138,.7)}
/* qualified with b because `.te-lies__c p b` further down is class+element and
   would otherwise outrank a bare class. Same trap as .te-kit__facts li. */
b.te-lies__t{display:block;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.025em;font-size:clamp(19px,1.9vw,27px);line-height:1.14;
  color:var(--te-green-hi);margin:0 0 .7rem}
.te-lies__c p{font-size:clamp(14px,1.02rem,17px);line-height:1.6;color:var(--te-text-2);margin:0}
.te-lies__c p b{color:var(--te-text)}
.te-lies__punch{margin-top:2.4rem;border-radius:16px;padding:clamp(18px,2.3vw,28px);
  text-align:center;background:linear-gradient(120deg,rgba(248,199,42,.12),rgba(0,0,0,.3));
  border:1px solid rgba(248,199,42,.4)}
.te-lies__punch p{margin:0;font-size:clamp(16px,1.3rem,21px);line-height:1.5;color:var(--te-text)}
.te-lies__punch p+p{margin-top:.7rem;font-size:clamp(15px,1.15rem,19px);color:var(--te-text-2)}
.te-lies__punch b{color:var(--te-gold)}
@media(max-width:900px){.te-lies__grid{grid-template-columns:1fr}}


/* ---- 18b · who am I -----------------------------------------------------
   The page had no founder block at all. Photo left, story right, then the
   credential grid, because the grid is what gets screenshotted and the story
   is what gets read. */
.te-who{padding:4.4rem 0 5rem}
.te-who__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.06;margin:0 auto;text-wrap:balance}
.te-who__top{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(22px,3.2vw,48px);align-items:start;margin-top:3rem}
.te-who__fig{margin:0}
.te-who__fig img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid rgba(30,192,114,.3);box-shadow:0 24px 60px rgba(0,0,0,.5)}
p.te-who__big{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.7vw,38px);line-height:1.1;color:var(--te-text);margin:0 0 1rem}
p.te-who__big b{color:var(--te-gold)}
.te-who__body p{font-size:clamp(15px,1.15rem,19px);line-height:1.62;color:var(--te-text-2);margin:0}
.te-who__body p+p{margin-top:.9rem}
.te-who__body p b{color:var(--te-text)}
p.te-who__kick{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:13px;
  background:rgba(248,199,42,.1);border-left:3px solid var(--te-gold);color:var(--te-text)}
p.te-who__kick b{color:var(--te-gold)}
.te-who__grid{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)}
.te-who__grid li{border-radius:14px;padding:1.1rem 1.2rem;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.1)}
.te-who__grid li b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.025em;font-size:clamp(17px,1.5vw,22px);line-height:1.1;
  color:var(--te-green-hi);margin-bottom:.45rem}
.te-who__grid li span{display:block;font-size:.9rem;line-height:1.5;color:var(--te-text-3)}
.te-who__grid li span b{display:inline;font-size:inherit;color:var(--te-text-2);margin:0}
@media(max-width:900px){
  .te-who__top{grid-template-columns:1fr}
  .te-who__fig{max-width:280px;margin:0 auto}
  .te-who__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.te-who__grid{grid-template-columns:1fr}}

/* ---- 01 · the block under the hero video --------------------------------
   Brought across from the AIE masterclass page. Its job is to be the first
   real stop after the video: hard date, one reassurance, a live clock, and a
   button wide enough to read from across the room that carries its own
   microcopy, so nobody clicks without knowing what it buys. */
.te-vcta{margin-top:3.2rem;text-align:center}
.te-vcta__k{font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--te-gold);margin:0 0 1rem}
.te-vcta__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(26px,3.6vw,46px);line-height:1.07;color:var(--te-text);
  margin:0 auto;max-width:22ch;text-wrap:balance}
.te-vcta__h span{color:var(--te-green-hi)}
.te-vcta__s{max-width:60ch;margin:1.1rem auto 0;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-2)}
.te-vcta__s b{color:var(--te-text)}
.te-vcta__lab{margin:2.2rem 0 .85rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--te-gold)}
/* the big twin of the header clock. Same markup, same script, bigger type. */
.te-clock--big{justify-content:center;gap:12px}
.te-clock--big .te-clock__u{min-width:88px;padding:.85rem .4rem}
.te-clock--big .te-clock__u b{font-size:clamp(26px,3vw,40px)}
.te-clock--big .te-clock__u i{font-size:.68rem;letter-spacing:.14em}
/* the wide button. Deliberately NOT .lg-btn, this one is bigger than every
   other CTA on the page because it is the one under the video. */
.te-vcta__btn{display:block;width:min(620px,100%);margin:1.7rem auto 0;
  padding:1.15rem 1.4rem;border-radius:16px;text-decoration:none;
  background:linear-gradient(100deg,var(--te-gold-hi),var(--te-gold) 42%,var(--te-gold-lo));
  box-shadow:0 0 44px rgba(248,199,42,.42),0 14px 34px rgba(0,0,0,.5);
  transition:transform .18s ease,box-shadow .18s ease}
.te-vcta__btn:hover{transform:translateY(-2px);
  box-shadow:0 0 62px rgba(248,199,42,.6),0 18px 40px rgba(0,0,0,.55)}
.te-vcta__btn b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:clamp(19px,2.1vw,29px);line-height:1.1;color:#231a00}
.te-vcta__btn span{display:block;margin-top:.4rem;font-family:'Sora',sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(35,26,0,.72)}
.te-vcta__fine{margin:1.1rem auto 0;max-width:52ch;font-size:.92rem;
  line-height:1.5;color:var(--te-text-3)}
@media(max-width:600px){
  .te-clock--big{gap:8px}
  .te-clock--big .te-clock__u{min-width:0;flex:1;padding:.7rem .2rem}
}

/* ---- 18c · everything you do not need -----------------------------------
   The cross-out grid from the AIE page. Requirements, not beliefs: 13b argues
   you out of 3 things, this one is scanned in 4 seconds on the way to the
   price. The cross is muted red and appears nowhere else on the page. */
.te-nope{padding:4.4rem 0 5rem}
.te-nope__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.06;margin:0 auto;text-wrap:balance}
.te-nope__lede{max-width:54ch;margin:1.1rem auto 0;font-size:clamp(15px,1.16rem,19px);
  line-height:1.6;color:var(--te-text-3)}
.te-nope__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);margin-top:2.8rem}
/* 3 children, 2 columns: without explicit placement the `span` wraps down
   into the 38px icon column and renders 1 word per line. The icon spans both
   rows, the text both sits in column 2. */
.te-nope__c{display:grid;grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:14px;row-gap:.35rem;
  align-items:start;border-radius:14px;padding:1.15rem 1.3rem;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.1)}
.te-nope__c b{grid-column:2;grid-row:1}
.te-nope__c span{grid-column:2;grid-row:2}
.te-nope__c i{grid-column:1;grid-row:1/3;align-self:start;
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  font-style:normal;font-size:1.05rem;color:var(--te-red);
  background:rgba(255,125,138,.1);border:1px solid rgba(255,125,138,.42)}
.te-nope__c b{font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:clamp(17px,1.5vw,22px);line-height:1.15;
  color:var(--te-text)}
.te-nope__c span{display:block;font-size:.95rem;line-height:1.55;color:var(--te-text-3)}
.te-nope__punch{margin-top:2.2rem;text-align:center}
.te-nope__punch p{margin:0;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.025em;font-size:clamp(20px,2.4vw,32px);line-height:1.16;color:var(--te-text)}
.te-nope__punch p b{color:var(--te-gold)}
@media(max-width:820px){.te-nope__grid{grid-template-columns:1fr}}

/* ============================================================
   THE MARKER ATTRIBUTIONS
   The page carries a dozen proof artifacts and every one of them proved a
   RESULT. None of them proved an AGENT. A reader could believe every number
   on the page and never once think "a machine did that", which is the single
   thought the whole $47 rests on.
   So: 6 marks, always on a picture and never on a block of copy, and the
   tense flips at the reveal. Past tense before it (Sean's proof), present
   tense after it (the buyer's kit). That flip is the moment the page stops
   being about him and starts being about them.
   Marker, gold, rotated: it is supposed to look like somebody drew on the
   screenshot, because that contrast against the clean machine-made artwork
   IS the message. Do not tidy it into the design system.
   ============================================================ */
/* self hosted. Zero external requests is a hard rule on this page, see the
   note at the top of te-fonts-sora.css. */
@font-face{
  font-family:'Permanent Marker';
  font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pm-marker.woff2?v=ceedb0aa) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
.te-sig{position:absolute;z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  opacity:0;transform:translateY(8px) rotate(-3.5deg);
  transition:opacity .45s ease,transform .45s ease}
.te-sig.is-in{opacity:1;transform:translateY(0) rotate(-3.5deg)}
.te-sig__t{font-family:'Permanent Marker',ui-rounded,'Comic Sans MS',cursive;
  font-size:clamp(15px,1.6vw,25px);line-height:1.18;letter-spacing:.005em;
  color:var(--te-gold);text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 26px rgba(248,199,42,.35)}
.te-sig__a{width:clamp(120px,13vw,210px);height:auto;overflow:visible;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.8))}
.te-sig__p,.te-sig__h{stroke:var(--te-gold);stroke-width:5.5;
  stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:420;stroke-dashoffset:420}
.te-sig.is-in .te-sig__p{animation:te-sigdraw .72s cubic-bezier(.6,.02,.3,1) .12s forwards}
.te-sig.is-in .te-sig__h{animation:te-sigdraw .3s ease .74s forwards}
@keyframes te-sigdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .te-sig{transition:none}
  .te-sig__p,.te-sig__h{stroke-dashoffset:0;animation:none !important}
}
/* where each one sits. The arrow always points down and right, so a mark on
   the right flips the whole block rather than redrawing the path. */
.te-sig--tl{top:2%;left:1%}
.te-sig--tr{top:2%;right:1%;align-items:flex-end;transform:translateY(8px) rotate(3.5deg)}
.te-sig--tr.is-in{transform:translateY(0) rotate(3.5deg)}
.te-sig--tr .te-sig__t{text-align:right}
.te-sig--tr .te-sig__a{transform:scaleX(-1)}

/* the containers have to establish a positioning context for the mark */
.tc__wrap,.cm__wrap,.te-tape__fig--big,.te-kit__fig,
.te-proc__fig,.te-hood__fig.te-get__fig{position:relative}

/* Below 820px an absolutely positioned scrawl lands on top of the artwork and
   makes both unreadable. Each mark is the FIRST child of its container, so
   going static drops it neatly above the picture instead. The arrow is no
   longer pointing at anything sideways, so it rotates to point down. */
@media(max-width:820px){
  .te-sig,.te-sig--tr{position:static;align-items:center;
    transform:none;margin:0 0 .5rem;text-align:center}
  .te-sig.is-in,.te-sig--tr.is-in{transform:none}
  .te-sig__t,.te-sig--tr .te-sig__t{text-align:center;font-size:clamp(16px,4.6vw,22px)}
  .te-sig__a,.te-sig--tr .te-sig__a{width:96px;transform:rotate(58deg)}
}

/* --- marker: per-container nudges and the paper variant -------------------
   The gold marker only works on ink. Sections 14 and 15 are the PAPER
   sections, where gold on off-white is close to invisible, so the mark
   switches to a deep green that reads like a green Sharpie on a printout.
   Check the ground colour of the section before adding a 7th one of these. */
.tc__wrap .te-sig--tl{top:13%}          /* clears "Both started with the same $10,000" */
.cm__wrap .te-sig--tl{top:5%}
.te-kit__fig .te-sig,
.te-proc__fig .te-sig{--sig:var(--te-green-lo)}
.te-kit__fig .te-sig__t,
.te-proc__fig .te-sig__t{color:var(--te-green-lo);
  text-shadow:0 1px 8px rgba(251,250,247,.9)}
.te-kit__fig .te-sig__p,.te-kit__fig .te-sig__h,
.te-proc__fig .te-sig__p,.te-proc__fig .te-sig__h{stroke:var(--te-green-lo)}
.te-kit__fig .te-sig__a,
.te-proc__fig .te-sig__a{filter:drop-shadow(0 1px 6px rgba(251,250,247,.85))}
/* The tape mark clipped the LIVE ENTRY pill baked into the brief screenshot.
   Lifting it out of the figure did not work either: .te-tape__fig is
   overflow:hidden to clip the image corners, so the top line got sliced off.
   Solution is horizontal, not vertical: slide the block left of the pill,
   into the empty strip above the target lines. */
.te-tape__fig--big .te-sig--tr{top:1.5%;right:11%}

/* ---- 13 · THE CONFESSION -------------------------------------------------
   The strongest fact on the page is that a machine wrote the thing that made
   the money while Sean was asleep. Version 1 said it in a centred grey box
   and it read like a footnote. This one says it the way Gary Halbert would:
   a short confession in display type, the evidence sitting beside it as a
   record card rather than a paragraph, and the last line handing the
   consequence to the reader instead of to Sean.
   Everything in the record card is proven elsewhere on the page. Do not add
   a figure here that is not already carried somewhere else. */
.te-conf{margin-top:2.6rem;border-radius:20px;padding:clamp(24px,3.4vw,46px);
  background:linear-gradient(158deg,rgba(30,192,114,.13),rgba(0,0,0,.42) 60%);
  border:1px solid rgba(30,192,114,.42)}
.te-conf__k{text-align:center;margin:0 0 1rem;font-family:'Sora',sans-serif;
  font-weight:800;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--te-green-lo)}
.te-conf__h{text-align:center;margin:0 auto;font-family:'Sora',sans-serif;
  font-weight:800;letter-spacing:-.035em;font-size:clamp(28px,4.4vw,56px);
  line-height:1.02;color:var(--te-text);text-wrap:balance}
.te-conf__h span{color:var(--te-gold)}
.te-conf__grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:start;margin-top:clamp(24px,3vw,42px)}

/* the record card. Deliberately built as an artifact, not a paragraph: a
   reader will read a 6 row table when they will not read a 6 line paragraph. */
.te-conf__rec{border-radius:15px;overflow:hidden;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.te-conf__rec__hd{display:flex;align-items:center;gap:9px;padding:.85rem 1.1rem;
  background:rgba(30,192,114,.12);border-bottom:1px solid rgba(30,192,114,.28)}
.te-conf__rec__hd i{width:9px;height:9px;border-radius:50%;background:var(--te-green-hi);
  box-shadow:0 0 12px var(--te-green-hi);flex:none}
.te-conf__rec__hd b{font-family:'Sora',sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--te-text)}
.te-conf__rec__hd span{margin-left:auto;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--te-text-3)}
.te-conf__rows{margin:0;padding:.5rem 1.1rem 1rem}
.te-conf__rows>div{display:flex;align-items:baseline;gap:12px;padding:.72rem 0;
  border-bottom:1px dashed rgba(255,255,255,.11)}
.te-conf__rows>div:last-child{border-bottom:0}
.te-conf__rows dt{flex:none;font-size:.86rem;color:var(--te-text-3)}
.te-conf__rows dd{margin:0 0 0 auto;text-align:right;font-family:'Sora',sans-serif;
  font-weight:800;font-size:1.02rem;letter-spacing:-.015em;color:var(--te-text);
  font-variant-numeric:tabular-nums}
.te-conf__rows dd.is-hi{color:var(--te-green-hi)}
.te-conf__rows dd.is-zero{color:var(--te-gold)}

.te-conf__say p{margin:0;font-size:clamp(16px,1.24rem,21px);line-height:1.55;
  color:var(--te-text-2)}
.te-conf__say p+p{margin-top:.9rem}
.te-conf__say p b{color:var(--te-text)}
p.te-conf__punch{margin-top:1.3rem;padding:1.1rem 1.25rem;border-radius:13px;
  background:rgba(248,199,42,.1);border-left:3px solid var(--te-gold);color:var(--te-text)}
p.te-conf__punch b{color:var(--te-gold)}
p.te-conf__last{margin:clamp(26px,3vw,40px) auto 0;text-align:center;max-width:24ch;
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3.2vw,42px);line-height:1.08;color:var(--te-gold);
  text-wrap:balance}
@media(max-width:900px){
  .te-conf__grid{grid-template-columns:1fr}
  .te-conf__rec{max-width:460px;margin:0 auto}
}

/* ---- the green highlight in headlines -----------------------------------
   The vendor sets .highlight-blue to color:#000 and te-colors.css paints it
   --te-green. Sean's call 2026-08-20: white pops harder than black.
   White on #1ec072 is only 2.2:1 though, which vibrates at display size, so
   the box also drops to the deeper --te-green-lo. White on that is 3.3:1,
   which clears AA for large text and actually reads as white rather than as
   a smudge. 6 instances on the page, all of them headline words. */
.highlight-blue{background:var(--te-green-lo);color:#fff}

/* ---- 05 · the week rail, particles on the track -------------------------
   The gradient track was a static line. It now carries a flow of light
   travelling Monday to Friday, which is the same idea the hero particle
   field runs on, scaled down to 7 motes on a 3px rail.
   They sit at z-index 0, BELOW .te-rail__dot, so each mote disappears behind
   a day and comes out the far side. That is the whole trick: it reads as the
   week moving through you rather than as a decorative line.
   Each `i` is a full-width strip carrying its dot on the left edge, so the
   animation is a plain translateX(0 to 100%) and stays on the compositor.
   Animating `left` here would relayout 7 elements 60 times a second. */
.te-rail__track{position:relative}
.te-rail__flow{position:absolute;left:10%;right:10%;top:23px;height:3px;
  z-index:0;pointer-events:none}
.te-rail__flow i{position:absolute;inset:0;
  animation:te-railflow var(--t,6s) linear var(--d,0s) infinite;
  will-change:transform}
.te-rail__flow i::before{content:'';position:absolute;top:50%;left:0;
  width:var(--s,5px);height:var(--s,5px);border-radius:50%;
  margin:calc(var(--s,5px) / -2) 0 0 calc(var(--s,5px) / -2);
  background:var(--te-gold-hi);
  box-shadow:0 0 9px 2px rgba(248,199,42,.9),0 0 22px 6px rgba(248,199,42,.3)}
/* 2 of the 7 run green, so the flow picks up the far end of the track */
.te-rail__flow i:nth-child(3)::before,
.te-rail__flow i:nth-child(6)::before{background:var(--te-green-hi);
  box-shadow:0 0 9px 2px rgba(58,213,136,.9),0 0 22px 6px rgba(58,213,136,.3)}
@keyframes te-railflow{
  0%{transform:translateX(0);opacity:0}
  7%{opacity:1}
  93%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}
@media(prefers-reduced-motion:reduce){.te-rail__flow{display:none}}

/* ---- 05b · the question before the calculator ---------------------------
   A pattern break in the gap between "nothing is at risk" and the live
   calculator. Up to here the page has been answering "is this safe". This is
   where the reader's question flips to "what would it do for ME", so the page
   says it out loud at display size and then hands him the controls.
   The chevron bounces because it is the only thing on the page asking for an
   interaction rather than a click through to checkout. */
.te-ask{margin-top:clamp(46px,6vw,84px);text-align:center}
.te-ask__k{margin:0 0 1rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--te-gold)}
.te-ask__h{margin:0 auto;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.035em;font-size:clamp(30px,5vw,62px);line-height:1.05;
  color:var(--te-text);text-wrap:balance}
.te-ask__s{max-width:58ch;margin:1.5rem auto 0;font-size:clamp(15px,1.2rem,20px);
  line-height:1.6;color:var(--te-text-2)}
.te-ask__s b{color:var(--te-gold)}
.te-ask__down{display:block;width:38px;height:38px;margin:1.6rem auto 0;
  color:var(--te-gold);animation:te-askdown 1.9s ease-in-out infinite}
.te-ask__down svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 12px rgba(248,199,42,.5))}
@keyframes te-askdown{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(9px);opacity:1}
}
@media(prefers-reduced-motion:reduce){.te-ask__down{animation:none}}

/* ---- 20 · the value stack, rebuilt --------------------------------------
   2026-08-20. It was a bare list of text rows running straight on off the
   back of the bonus grid, so it read as a 6th bonus rather than as the
   moment the whole offer gets totalled. It now gets its own title, a rule
   above it, a header bar, a tick on every row, alternating tint so 10 rows
   can be scanned rather than read, and the total struck through against the
   price. The strike is honest here and only here: $3,070 is the ledger
   directly above it, line by line, not a was-price. */
.te-stack__lead{margin-top:clamp(48px,6vw,86px);padding-top:clamp(38px,4.6vw,64px);
  border-top:1px solid var(--te-rule)}
.te-stack__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(28px,4.4vw,54px);line-height:1.05;color:var(--te-text);
  margin:0 auto;text-wrap:balance}
.te-stack{margin-top:2.4rem !important;padding:0 !important;overflow:hidden}
.te-stack__hd{display:flex;align-items:center;gap:10px;padding:1rem 1.4rem;
  background:rgba(30,192,114,.1);border-bottom:1px solid rgba(30,192,114,.26)}
.te-stack__hd i{width:9px;height:9px;border-radius:50%;background:var(--te-green-hi);
  box-shadow:0 0 12px var(--te-green-hi);flex:none}
.te-stack__hd b{font-family:'Sora',sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--te-text)}
.te-stack__hd span{margin-left:auto;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--te-text-3)}
.te-stack__rows{padding:0 !important}
/* qualified with li because `.te-stack__rows li` is class+element and would
   otherwise keep the old flex/padding. Same trap as .te-kit__facts li. */
.te-stack__rows li.x,.te-stack__rows li{display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:.85rem clamp(16px,2.2vw,28px);border-bottom:1px solid rgba(255,255,255,.07)}
.te-stack__rows li:nth-child(odd){background:rgba(255,255,255,.022)}
.te-stack__rows li i{position:relative;width:22px;height:22px;border-radius:50%;
  background:rgba(30,192,114,.14);border:1px solid rgba(30,192,114,.5)}
.te-stack__rows li i::before{content:'';position:absolute;left:7px;top:4.5px;
  width:5px;height:10px;border:solid var(--te-green-hi);border-width:0 2px 2px 0;
  transform:rotate(43deg)}
.te-stack__rows li b{flex:none}
.te-stack__tot{padding:1.3rem clamp(16px,2.2vw,28px) .6rem !important;
  border-top:1px solid rgba(248,199,42,.35)}
.te-stack__tot b{color:var(--te-gold) !important}
.te-stack__note{padding:0 clamp(16px,2.2vw,28px);margin-bottom:1.4rem !important}
.te-stack__now{margin:0 clamp(16px,2.2vw,28px) clamp(16px,2.2vw,28px)}
.te-stack__now__k{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#6b5410}
.te-stack__strike{display:flex;align-items:baseline;justify-content:center;
  gap:clamp(10px,1.6vw,22px);margin:.3rem 0 .25rem}
.te-stack__strike s{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(24px,3.2vw,40px);line-height:1;letter-spacing:-.03em;
  color:rgba(58,44,0,.5);text-decoration-thickness:3px;
  font-variant-numeric:tabular-nums}
.te-stack__strike b{font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(46px,6.4vw,82px);line-height:1;letter-spacing:-.04em;
  color:#3a2c00;font-variant-numeric:tabular-nums}
/* the desk photo is 3:2 landscape where the old headshot was square, so it
   is cropped to a portrait card to balance the 2 column layout. Position is
   biased left because Sean sits left of centre in the frame. */
.te-who__fig img{aspect-ratio:4/5;object-fit:cover;object-position:36% 42%}

/* ---- 25 · the Monday fork, given its visual layer -----------------------
   2026-08-20. The fork already had the hardest mechanic on the page: it
   compares 2 versions of the SAME date, so doing nothing becomes a decision
   rather than a delay. What it did not have was anything to look at.
   Same photograph twice: same man, same kitchen, same table, same mug. Only
   the light and what he is doing with his hands change. Every line of the
   original copy survives, the 2 body paragraphs just became a scannable list
   so the whole fork can be read in 4 seconds at the point of decision. */
.te-fork__fig{margin:0 0 1.3rem;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12)}
.te-fork__fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.te-fork__c--a .te-fork__fig img{filter:saturate(.72) brightness(.92)}
.te-fork__c--b .te-fork__fig{border-color:rgba(30,192,114,.42)}
.te-fork__list{list-style:none;margin:1.1rem 0 0;padding:0}
.te-fork__list li{position:relative;padding:.5rem 0 .5rem 30px;
  font-size:clamp(14px,1.04rem,17px);line-height:1.5;color:var(--te-text-2)}
.te-fork__list li b{color:var(--te-text)}
.te-fork__list li::before{position:absolute;left:0;top:.5rem;width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;
  line-height:1}
.te-fork__list--x li::before{content:'\2715';background:rgba(255,125,138,.1);
  border:1px solid rgba(255,125,138,.4);color:var(--te-red)}
.te-fork__list--v li::before{content:'\2713';background:rgba(30,192,114,.14);
  border:1px solid rgba(30,192,114,.5);color:var(--te-green-hi)}
.te-fork__c--b .te-fork__list li b{color:var(--te-green-hi)}

/* ---- 28b · the last one -------------------------------------------------
   Sean's own closer pattern. It runs AFTER the takeaway close: 28 talks the
   wrong people out of it, this one frames the decision for everybody who is
   still reading. The whole thing is one idea said 3 ways, so it is set
   centred and narrow like a letter rather than as another card grid, because
   by this point in the page a 4th grid would just look like more furniture. */
.te-still{padding:clamp(52px,6.5vw,96px) 0 clamp(56px,7vw,104px);
  background:linear-gradient(180deg,rgba(30,192,114,.05),transparent 45%)}
.te-still__k{text-align:center;margin:0 0 .9rem;font-family:'Sora',sans-serif;
  font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--te-green-lo)}
.te-still__h{text-align:center;margin:0 auto;font-family:'Sora',sans-serif;
  font-weight:800;letter-spacing:-.038em;font-size:clamp(34px,6vw,74px);
  line-height:1;color:var(--te-text);text-wrap:balance}
.te-still__body{max-width:60ch;margin:clamp(26px,3.4vw,44px) auto 0;text-align:center}
.te-still__body p{margin:0;font-size:clamp(16px,1.28rem,22px);line-height:1.55;
  color:var(--te-text-2)}
.te-still__body p+p{margin-top:1rem}
.te-still__body p b{color:var(--te-text)}
p.te-still__lead{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,34px);line-height:1.12;color:var(--te-gold);
  margin-bottom:1.4rem}
p.te-still__ask{margin-top:1.6rem;padding:1.2rem 1.4rem;border-radius:14px;
  background:rgba(248,199,42,.1);border:1px solid rgba(248,199,42,.42);
  color:var(--te-text);font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:clamp(17px,1.6rem,26px);line-height:1.25}
p.te-still__ask b{color:var(--te-gold)}

.te-still__split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:1.6rem 0;text-align:left}
.te-still__s{border-radius:15px;padding:1.15rem 1.3rem}
.te-still__s--a{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12)}
.te-still__s--b{background:linear-gradient(150deg,rgba(30,192,114,.13),rgba(0,0,0,.34));
  border:1px solid rgba(30,192,114,.45)}
.te-still__s span{display:block;margin-bottom:.5rem;font-family:'Sora',sans-serif;
  font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--te-text-3)}
.te-still__s--b span{color:var(--te-green-hi)}
.te-still__s p{font-size:clamp(14px,1.02rem,17px) !important;line-height:1.55}
.te-still__s--b p b{color:var(--te-green-hi) !important}

.te-still__cta{max-width:660px;margin:clamp(30px,3.6vw,48px) auto 0;text-align:center}
.te-still__price{margin-bottom:1.3rem}
.te-still__price__k{margin:0 0 .5rem;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--te-text-3)}
.te-still__price__k s{color:var(--te-text-3);text-decoration-thickness:2px}
.te-still__price__k b{color:var(--te-green-hi)}
.te-still__price__h{margin:0;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(19px,2.1vw,30px);line-height:1.2;
  color:var(--te-text)}
.te-still__price__h b{color:var(--te-text)}
.te-still__price__h span{color:var(--te-gold);font-size:1.22em}
.te-still__fine{margin:1.1rem auto 0;max-width:52ch;font-size:.92rem;
  line-height:1.5;color:var(--te-text-3)}
.te-still__fine b{color:var(--te-text-2)}
@media(max-width:700px){.te-still__split{grid-template-columns:1fr}}

/* ===== sec02b · Meet Wayland, the personal AI agent (added 2026-08-23) ===== */
.wayagent-sec{padding:66px 22px 74px;position:relative;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,rgba(30,192,114,.07),transparent 60%),#07130d}
.wayagent-head{max-width:900px;margin:0 auto 34px;text-align:center}
.wayagent-head .kick{font-size:1.02rem;color:var(--te-green-hi);margin-bottom:.55rem;font-weight:700;
  /* This rule overrode the base .kick and silently dropped its uppercase, so
     these two preheaders rendered sentence case while every other preheader
     on the page was caps. Sean, 2026-08-24: they all go caps. */
  text-transform:uppercase;letter-spacing:.13em;font-size:.92rem}
.wayagent-head h2{color:#fff;font-weight:800}
.wayagent-head h2 em{font-style:normal;color:var(--te-green-hi)}
.wayagent-head p{color:#c6d6cd;max-width:820px;margin:14px auto 0}
.wayagent-head p b{color:#fff}
.wayagent-stage{max-width:1000px;margin:0 auto;text-align:center}
.waya-core{display:flex;flex-direction:column;align-items:center;gap:10px}
.waya-app{position:relative;max-width:760px;margin:0 auto;padding-top:64px}
.waya-appshot{width:100%;display:block;border-radius:16px;border:1px solid rgba(30,192,114,.35);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 40px rgba(30,192,114,.12)}
.waya-node{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;width:112px;height:112px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle,#07130d 58%,rgba(7,19,13,0) 72%)}
.waya-node .wr{position:absolute;inset:0;border-radius:50%;border:2px dotted rgba(30,192,114,.4);animation:wayspin 30s linear infinite reverse}
.waya-node .wr2{inset:9%;border:2px dashed rgba(30,192,114,.55);animation:wayspin 13s linear infinite}
.waya-node .wr3{inset:20%;border:2px solid rgba(30,192,114,.85);animation:waypulse 2.6s ease-in-out infinite}
.waya-glyph{width:34%;color:#fff;filter:drop-shadow(0 0 16px rgba(30,192,114,.75));animation:wayspin 8s linear infinite;display:block}
.waya-glyph svg{width:100%;height:100%;display:block}
.waya-mark{width:190px;max-width:52vw;filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.waya-tag{font-size:.95rem;color:#a8c2b5}
.waya-fan{width:100%;height:200px;display:block;margin:-6px 0 -10px}
.waya-paths path{fill:none;stroke:rgba(30,192,114,.3);stroke-width:1.6}
.waya-fan .wayg{fill:#2ee38b;filter:drop-shadow(0 0 6px rgba(30,192,114,.95))}
.waya-fan .wayo{fill:#f5c515;filter:drop-shadow(0 0 6px rgba(245,197,21,.85))}
.waya-row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.waya-tile{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(9,26,18,.78);
  border:1px solid rgba(30,192,114,.3);border-radius:14px;padding:14px 6px;
  box-shadow:0 6px 22px rgba(0,0,0,.35)}
.waya-tile em{font-style:normal;font-weight:700;font-size:.78rem;color:#eef7f1;white-space:nowrap}
.waya-logo{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#eef7f1;fill:#eef7f1}
.waya-logo svg{width:100%;height:100%}
.waya-plus{width:34px;font-size:26px;line-height:34px;color:#2ee38b;font-weight:800}
.waya-close{margin:26px auto 0;color:#c6d6cd;max-width:720px}
.waya-close b{color:var(--te-green-hi)}
@keyframes wayspin{to{transform:rotate(360deg)}}
@keyframes waypulse{0%,100%{box-shadow:0 0 22px rgba(30,192,114,.3),inset 0 0 18px rgba(30,192,114,.14)}
  50%{box-shadow:0 0 48px rgba(30,192,114,.55),inset 0 0 32px rgba(30,192,114,.28)}}
@media(max-width:760px){
  .waya-row{grid-template-columns:repeat(4,1fr)}
  .waya-fan{display:none}
  .waya-node{width:84px;height:84px;top:16px}
  .waya-app{padding-top:56px}
  .wayagent-sec{padding:46px 16px 52px}
  .waya-row{margin-top:18px}
}


/* ── Wayland morning film ───────────────────────────────────────────────────
   The 26 second render of the whole overnight run, sat at the top of the
   Wayland stage section. It carries the same 3 beats the static panels below
   it spell out, so the panels became the annotated breakdown rather than the
   first telling. Source: video/wayland-anim (design-compiler project),
   rendered by build/render_wayland_anim.py + build/encode_wayland_anim.sh. */
.wlfilm{position:relative;max-width:1180px;margin:0 auto 46px}
.wlfilm__lead{text-align:center;max-width:840px;margin:0 auto 22px}
.wlfilm__kick{font-family:'Sora',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(10px,1.1vw,12px);color:var(--te-gold);margin:0 0 10px}
.wlfilm__h{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.028em;
  font-size:clamp(23px,3vw,38px);line-height:1.08;margin:0 0 12px;color:var(--te-text);
  text-wrap:balance}
.wlfilm__h em{font-style:normal;color:var(--te-green-hi)}
.wlfilm__sub{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--te-text-2);
  margin:0;text-wrap:balance}
.wlfilm__frame{position:relative;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);background:#141413;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 90px -40px rgba(30,192,114,.35)}
.wlfilm__frame img{display:block;width:100%;height:auto}
/* An iframe has no intrinsic size, so the 16:9 box has to be declared or the
   embed collapses to the default 150px. */
.wlfilm__frame iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
/* the browser chrome strip. Sells "this is a real screen" without a caption. */
.wlfilm__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--te-ink-2);border-bottom:1px solid rgba(255,255,255,.07)}
.wlfilm__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.wlfilm__bar span{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--te-text-3)}
.wlfilm__bar b{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--te-green-hi)}
.wlfilm__bar b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;
  border-radius:50%;background:var(--te-green-hi);vertical-align:middle;
  box-shadow:0 0 0 3px rgba(30,192,114,.22)}
.wlfilm__foot{margin:14px auto 0;max-width:900px;text-align:center;
  font-size:clamp(13px,1.4vw,15px);line-height:1.6;color:var(--te-text-3)}
.wlfilm__foot b{color:var(--te-text-2)}
/* Somebody who has asked their machine to stop animating things gets the
   poster and nothing that moves. */
/* Specificity matters here: `.wlfilm__frame img` above is (0,2,1), so a bare
   `.wlfilm__still{display:none}` loses to it and the fallback still renders
   UNDER the video, doubling the height of the frame. Both rules below are
   scoped to match or beat it. */
.wlfilm__frame img.wlfilm__still{display:none}
@media (prefers-reduced-motion:reduce){
  .wlfilm__frame iframe.wlfilm__vid{display:none}
  .wlfilm__frame img.wlfilm__still{display:block}
}
@media(max-width:700px){
  .wlfilm{margin-bottom:34px}
  .wlfilm__bar{padding:8px 11px}
  .wlfilm__bar span{display:none}
}


/* "One Agent, Running Every Agent" earns its own line. Buried at the tail of a
   six line paragraph it was the one sentence nobody finished reading. */
.wayagent-oneline{margin:18px auto 0; text-align:center}
.wayagent-oneline b{display:inline-block; font-family:'Sora',sans-serif;
  font-size:clamp(21px,2.5vw,32px); font-weight:800; letter-spacing:-.01em;
  line-height:1.2; color:#fff;
  border-top:1px solid rgba(58,213,136,.35);
  border-bottom:1px solid rgba(58,213,136,.35); padding:12px 4px}

/* ============================================================
   THE FIVE DAY RAIL, REBUILT · 2026-08-24
   It was a thin horizontal line with 5 small captions and it read as
   decoration, so people scrolled straight past the one block that says
   what they are actually buying. Now it is 5 real cards, each with the
   day's image, an oversized date, and a bordered surface so the run
   cannot be mistaken for a footnote. (Sean: "This is a five day
   sequence and we have to use screen real estate.")
   These rules are appended deliberately: same specificity as the
   originals above, later in the file, so they win without !important.
   ============================================================ */
.te-rail{margin-top:4.2rem}
.te-rail__hd{font-size:clamp(26px,3.2vw,44px);margin-bottom:2.6rem;line-height:1.12}

.te-rail__days{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
/* the connecting line ran through where the images now sit */
.te-rail__days::before{display:none}
.te-rail__flow{display:none}

.te-rail__d{background:linear-gradient(180deg,rgba(30,192,114,.07),rgba(0,0,0,0));
  border:1px solid rgba(58,213,136,.34);border-radius:16px;overflow:hidden;
  padding:0 0 18px;display:flex;flex-direction:column;
  box-shadow:0 26px 60px -38px #000}

.te-rail__shot{position:relative;aspect-ratio:900/502;overflow:hidden;
  border-bottom:1px solid rgba(58,213,136,.26);margin-bottom:14px}
.te-rail__shot img{width:100%;height:100%;object-fit:cover;display:block}
.te-rail__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(8,12,10,.72))}

/* the day number now sits ON the image, bottom left, so the eye lands on
   the sequence before it lands on the words */
.te-rail__dot{position:absolute;z-index:2;left:12px;bottom:10px;margin:0;
  width:44px;height:44px;font-size:20px}

.te-rail__when{font-size:clamp(15px,1.5vw,21px);letter-spacing:.06em;
  margin-bottom:.3rem;padding:0 14px}
.te-rail__t{font-size:clamp(19px,1.75vw,26px);margin-bottom:.55rem;padding:0 14px}
.te-rail__x{font-size:.95rem;line-height:1.55;padding:0 16px}

@media (max-width:1100px){
  .te-rail__days{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:620px){
  .te-rail__days{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------
   90 DAYS LATER · the two callouts carry a before / after image and
   are sized to matter. They were two small text boxes nobody read.
   ------------------------------------------------------------ */
.te-shift__grid{align-items:stretch}
.te-shift__c{padding:clamp(18px,2vw,26px);border-radius:16px;
  border:1px solid rgba(248,199,42,.34);
  background:linear-gradient(180deg,rgba(248,199,42,.07),rgba(0,0,0,0))}
.te-shift__c--now{border-color:rgba(58,213,136,.5);
  background:linear-gradient(180deg,rgba(30,192,114,.10),rgba(0,0,0,0))}
.te-shift__fig{display:block;width:100%;height:auto;border-radius:12px;
  margin:14px 0;border:1px solid rgba(255,255,255,.08)}
.te-shift__c > b{font-size:clamp(21px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em}
/* direct child only. A bare descendant selector also caught the <b> used for
   emphasis inside <em>, which blew the body copy up to headline size. */
.te-shift__c em b{font-size:inherit;line-height:inherit;color:var(--te-text)}
.te-shift__c em{font-size:clamp(15px,1.15vw,17px);line-height:1.55}
.te-shift__k{font-size:clamp(13px,1.2vw,15px);letter-spacing:.14em}
.te-shift__h{font-size:clamp(24px,3vw,42px);line-height:1.16}

/* ------------------------------------------------------------
   The TIDE lede under the section headline. It carries the four letters
   the whole product is named after and it was set at body size.
   ------------------------------------------------------------ */
.te-journey__lede{font-size:clamp(18px,1.9vw,27px);line-height:1.45;
  max-width:34ch;margin-left:auto;margin-right:auto;color:var(--te-text);
  font-weight:600}
.te-journey__lede b{color:var(--te-green-hi);font-weight:800}


/* The video CTA headline ran to 3 lines and broke mid date ("September /
   7th"). Wider measure plus the short month sets it as 2 balanced lines.
   (Sean, 2026-08-24.) */
.te-vcta__h{max-width:30ch}

/* ------------------------------------------------------------------
   THE STUCK TOP BAR, ON LIGHT SECTIONS · 2026-08-24
   It was rgba(0,0,0,.2) over a 10px blur. Over the dark sections that
   composites to something dark and the near-white text reads fine. Over
   the white "5 Mornings. Then You Own It." section it composites to light
   grey, and the label, the sub line and the whole countdown vanish.
   The bar carries the deadline and the price, so it has to be legible on
   every background the page has. Solid dark, blur kept for depth.
   ------------------------------------------------------------------ */
.site-header.fixed{
  background:rgba(9,14,12,.94) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid rgba(58,213,136,.30) !important;
  box-shadow:0 12px 34px -20px rgba(0,0,0,.9);
}

/* ==================================================================
   SALES PAGE REVIEW · 2026-08-24 (Sean + a graphic designer, live)
   Spec and screenshots: docs/review-2026-08-24/
   ================================================================== */

/* G5 · the standard fix for an over-narrow subhead. Most subheads on this
   page were set at ~46ch and ran to 4 and 5 lines. Wider measure plus
   balance gets the same words into two. */
.te-wide{max-width:min(74ch,92%) !important;margin-left:auto;margin-right:auto;
  text-wrap:balance}

/* 184 · the closing ask. It read like a suggestion. */
.te-seat__hit{color:var(--te-gold);display:inline-block}
.te-seat__h{font-size:clamp(30px,4.6vw,62px);line-height:1.06;letter-spacing:-.035em}

/* 185 · the middle number is the one that matters, so it gets the arrow and
   the sentence underneath points UP at it rather than sideways. */
.simo__say{font-size:clamp(18px,2vw,26px) !important;line-height:1.35;
  max-width:52ch;margin:26px auto 0;text-align:center;text-wrap:balance}
.simo__up{display:block;font-size:44px;line-height:1;color:var(--te-green-hi);
  margin-bottom:2px;animation:simoNudge 1.9s ease-in-out infinite}
@keyframes simoNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* and the middle card is the hero of the three */
.simo__c:nth-child(2){transform:scale(1.045);z-index:2}
.simo__c:nth-child(2) b{font-size:clamp(30px,4.4vw,56px)}

/* 187 · the two tier numbers are the whole argument, and the left card was
   so dim it read as disabled rather than as the "before". */
.te-fork__n,.te-fork b.big{font-size:clamp(38px,5.6vw,78px) !important;
  line-height:.95;letter-spacing:-.04em}
/* .te-tier__n was in that selector and should never have been. It is the small
   uppercase kicker above each card, and it carries .17em tracking, so at 78px
   "TIER 2 · LET IT RUN" cannot fit on one line at any sane card width. It keeps
   presence, at a size that fits, with the tracking pulled in because .17em is
   expensive per character once the type is this big. */
.te-tier__n{font-size:clamp(22px,2.6vw,36px) !important;line-height:1.05;
  letter-spacing:.02em;margin-bottom:.5rem}
.te-fork__c:first-child,.te-tier--a{border-color:rgba(200,214,208,.42) !important}

/* 193 · "My Entire Workday Is One Cup Of Coffee Long." */
.te-day__h{font-size:clamp(30px,4.8vw,66px);line-height:1.05;letter-spacing:-.035em;
  max-width:20ch;margin-left:auto;margin-right:auto;text-wrap:balance}

/* 199 · "Here Is What Happens While You Are Asleep" wants one line and size. */
.te-night__h,.te-sleep__h{font-size:clamp(28px,5vw,68px);line-height:1.05;
  letter-spacing:-.035em;max-width:26ch;margin-left:auto;margin-right:auto;
  text-wrap:balance}

/* G2 · no orphans. A single word alone on the last line of a heading is the
   most common thing Sean flagged in this review, four separate times. */
h1,h2,h3,.te-turn__lede,.te-journey__lede,.te-ask__s,.te-seat__p,
.te-beat__p,.te-beat__mean,.te-shift__p,.simo__say{text-wrap:balance}

/* .te-wide alone was losing to the element's own max-width rule, so the
   combined selectors are spelled out. 0,2,0 beats 0,1,0 with no !important. */
.te-journey__lede.te-wide,.te-ask__s.te-wide,.te-seat__p.te-wide,.te-hard__lede.te-wide{
  max-width:min(70ch,92%);margin-left:auto;margin-right:auto;text-wrap:balance}


/* ============================================================
   REVIEW PASS 2 · 2026-08-24
   ============================================================ */

/* 180 · the highlight inside a shift card is part of the sentence above it,
   not a line of its own. Belt and braces on top of the "> b" scoping. */
.te-shift__c em b{display:inline}

/* 191 · the "one I hand you" line used to sit in a small gold box and read
   as a footnote. Sean: make it a big bold statement, said clearly. */
.cm__hand{margin-top:clamp(22px,2.6vw,38px);text-align:center}
.cm__hand__h{margin:0;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(26px,3.6vw,48px);line-height:1.06;
  color:var(--te-gold);text-wrap:balance}
.cm__hand__b{margin:.7rem auto 0;max-width:min(58ch,92%);
  font-size:clamp(16px,1.35rem,22px);line-height:1.5;color:var(--te-text);
  text-wrap:balance}
.cm__hand__s{margin:1.1rem auto 0;max-width:min(62ch,92%);
  font-size:clamp(14px,1.02rem,17px);line-height:1.55;color:var(--te-text-3);
  text-wrap:balance}

/* 195 · the supporting line under the new workday headline */
.te-day__lede{margin:-.7rem auto 1.6rem;max-width:min(46ch,92%);
  font-size:clamp(16px,1.3rem,21px);line-height:1.45;color:var(--te-text-2);
  text-wrap:balance}

/* G2 · no widows. Sean flagged a single word hanging on its own last line
   four separate times in one review, in four different components, which
   means it was never a component problem. `text-wrap:pretty` is the browser
   doing it for the whole page at once. Bare element selectors on purpose:
   0,0,1 loses to every class rule above, so the headings that already say
   `balance` keep saying balance and nothing here overrides them. */
p,li,em,figcaption,dd,blockquote{text-wrap:pretty}

/* 201 · the trades-and-positions explainer that sits above the long one */
.te-tape__band{margin:clamp(28px,3vw,44px) auto clamp(16px,1.8vw,24px);
  max-width:min(66ch,92%);text-align:center;
  font-size:clamp(16px,1.28rem,21px);line-height:1.5;color:var(--te-text-2)}
.te-tape__band b{color:var(--te-text)}

/* 187 · the two big numbers are the reason this block exists, so they get to
   be big. And the left card was so dim against the hero that it read as
   switched off rather than as the other half of a pair. */
.te-tier__big{font-size:clamp(36px,5vw,62px)}
.te-tier__c{border-color:rgba(255,255,255,.28);
  box-shadow:0 0 26px rgba(255,255,255,.05)}
.te-tier__c--hero{border-color:var(--te-green);
  box-shadow:0 0 34px rgba(30,192,114,.22)}

/* 188 · the profit factors are the best numbers on the page and nobody knows
   what a profit factor is. Grade them in plain words, right next to the
   number, and enlarge the rows so the pair stops getting skimmed. */
.te-tier__r{font-size:clamp(15px,1.14rem,18px);padding-top:.72rem;padding-bottom:.72rem}
.te-tier__r b{font-size:clamp(16px,1.24rem,20px)}
.te-tier__r--pf b{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  justify-content:flex-end}
.te-grade{font-style:normal;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .58rem;border-radius:999px;white-space:nowrap;
  color:var(--te-gold);background:rgba(248,199,42,.14);
  border:1px solid rgba(248,199,42,.42)}
.te-grade--hi{color:var(--te-green-hi);background:rgba(30,192,114,.16);
  border-color:rgba(58,213,136,.5)}
.te-tier__pf{margin:clamp(18px,2vw,28px) auto 0;max-width:min(64ch,92%);
  text-align:center;font-size:clamp(15px,1.2rem,19px);line-height:1.5;
  color:var(--te-text-2)}
.te-tier__pf b{color:var(--te-text)}

/* 182 · Sean: "zero risk while you learn goes ABOVE the card images, inside
   that box", and every card needs a picture of what it is saying. The old
   version was three walls of grey text in a row with nothing to look at. */
.te-free__lead{margin:1.1rem 0 1.5rem;font-size:clamp(16px,1.34rem,22px);
  line-height:1.5;color:var(--te-text-2)}
.te-free__lead b{color:var(--te-gold)}
.te-free__c{padding:0;overflow:hidden}
.te-free__fig{display:block;width:100%;height:auto;aspect-ratio:760/330;
  object-fit:cover;border-bottom:1px solid rgba(255,255,255,.08)}
.te-free__c b,.te-free__c span{display:block;padding-left:1.2rem;padding-right:1.2rem}
.te-free__c b{padding-top:1.1rem}
.te-free__c span{padding-bottom:1.2rem}
.te-free__c--hero .te-free__fig{border-bottom-color:rgba(248,199,42,.28)}

/* 185 · Sean: explain why there are three numbers, at fifth grade, and put a
   big arrow on the middle one because the average is the number that matters.
   The old .simo__head was a 12px uppercase kicker, which is the wrong size for
   a sentence, so it is promoted to a real headline here. */
.simo__head{font-size:clamp(22px,2.9vw,38px);line-height:1.12;letter-spacing:-.03em;
  text-transform:none;color:var(--te-text);max-width:22ch;margin-left:auto;
  margin-right:auto;text-wrap:balance}
.simo__why{margin:.85rem auto 0;max-width:min(58ch,92%);text-align:center;
  font-size:clamp(15px,1.2rem,19px);line-height:1.5;color:var(--te-text-2)}
.simo__why b{color:var(--te-text)}

/* the middle card wears the flag and the arrow below points straight up at it */
.simo__c--hero{position:relative;overflow:visible}
.simo__flag{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);
  white-space:nowrap;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px;color:#08150f;
  background:linear-gradient(180deg,var(--te-green-hi),var(--te-green));
  box-shadow:0 10px 26px -8px rgba(30,192,114,.7)}
.simo{margin-top:1.9rem}
.simo__up{font-size:76px;margin-bottom:-4px;
  filter:drop-shadow(0 0 18px rgba(58,213,136,.55))}

/* 194 · the morning as a flow. Sean: "a cup of coffee, full, half, empty,
   done" as the timing device, with "a particle effect line animating between
   them. Simple. Boom, boom, boom, done."
   The cup is one SVG with a clipped rect for the liquid, so the fill level is
   a single y value and nothing has to be redrawn per card. */
.te-day__run--flow{position:relative;overflow:visible}
.te-day__run--flow .te-day__step{position:relative;overflow:visible;
  padding-top:2.6rem}
.te-cup{position:absolute;top:.9rem;right:1.1rem;width:66px;height:74px;display:block}
.te-cup svg{width:100%;height:100%;overflow:visible}
.te-cup__body,.te-cup__handle{fill:none;stroke:var(--te-gold);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.te-cup__fill{fill:var(--te-gold);opacity:.42}
.te-day__step--shut .te-cup{opacity:.85}

/* the particle line. Two dots per gap, travelling left to right on a loop,
   offset so they read as a stream rather than a metronome. */
.te-day__run--flow .te-day__step:not(:last-child)::after{
  content:"";position:absolute;z-index:3;top:50%;right:-32px;width:32px;height:7px;
  border-radius:4px;transform:translateY(-50%);
  background:
    radial-gradient(circle,var(--te-green-hi) 42%,transparent 52%) 0 0/14px 7px no-repeat,
    linear-gradient(90deg,rgba(58,213,136,.28),rgba(58,213,136,.28));
  filter:drop-shadow(0 0 7px rgba(58,213,136,.65));
  animation:teFlowDot 1.5s linear infinite}
.te-day__run--flow .te-day__step:nth-child(2)::after{animation-delay:.55s}
@keyframes teFlowDot{
  0%{background-position:-15px 0, 0 0}
  100%{background-position:34px 0, 0 0}
}
@media(prefers-reduced-motion:reduce){
  .te-day__run--flow .te-day__step::after{animation:none}
}
@media(max-width:900px){
  /* stacked, so the line runs downward instead of across */
  .te-day__run--flow .te-day__step:not(:last-child)::after{
    top:auto;bottom:-26px;right:auto;left:50%;width:4px;height:26px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,var(--te-green-hi),rgba(58,213,136,.15));
    animation:none}
}

/* 199 · one line, much bigger. It is the promise of the whole section. */
.te-turn__h3--big{font-size:clamp(28px,4.6vw,64px);line-height:1.04;
  letter-spacing:-.035em;max-width:20ch;margin-left:auto;margin-right:auto;
  text-wrap:balance}

/* 200 · the 4 minute line had one word hanging and nothing to look at.
   Sean: "bigger, bolder, more impactful, generate an image for that card." */
.te-turn__punch--big{max-width:1000px;padding:0;overflow:hidden}
.te-turn__punchfig{display:block;width:100%;height:auto;
  border-bottom:1px solid rgba(248,199,42,.28)}
.te-turn__punch--big p{padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);
  text-align:center;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(20px,2.5vw,34px)!important;line-height:1.2;
  letter-spacing:-.02em;text-wrap:balance}

/* 192 · the three answers as one climbing progression, joined up. The curve
   sits behind the number rather than beside it, so the card still reads as a
   number first and the shape is the thing your eye follows across. */
.te-board__grid--flow{position:relative;overflow:visible}
/* The card has to stay overflow:visible or it clips its own connector arrow,
   so the rounded bottom corners are clipped on the curve instead. */
.te-board__c{position:relative;overflow:visible;padding-bottom:5.4rem}
.te-board__fig{position:absolute;left:0;right:0;bottom:0;height:96px;
  display:block;pointer-events:none;opacity:.9;
  overflow:hidden;border-radius:0 0 15px 15px}
.te-board__fig svg{width:100%;height:100%;display:block}

/* the connectors that make it one thing instead of three */
.te-board__grid--flow .te-board__c:not(:last-child)::after{
  /* sits down at curve level, not beside the number, so it can overlap the
     gap without ever landing on top of a dollar figure */
  content:"";position:absolute;z-index:4;bottom:30px;right:-16px;width:16px;height:16px;
  transform:rotate(45deg);border-right:3px solid var(--te-green-hi);
  border-top:3px solid var(--te-green-hi);border-radius:3px;
  filter:drop-shadow(0 0 10px rgba(58,213,136,.6))}
@media(max-width:900px){
  .te-board__grid--flow .te-board__c:not(:last-child)::after{
    bottom:-20px;right:auto;left:50%;
    transform:translateX(-50%) rotate(135deg)}
}

/* 204 · Sean: "the red strikethrough text is hard to read and gets skimmed,
   the negatives need to be larger, and the strikethrough can animate to show
   you don't need to do that, but it must stay readable."
   text-decoration draws the line THROUGH the glyphs, which on a dark card with
   red text is the exact thing that made it unreadable. The line is now its own
   bar sitting on top, so the words underneath stay clean. */
/* qualified with p because `.te-lies__c p` is class+element (0,1,1) and would
   otherwise beat a bare `.te-lies__lie` (0,1,0) no matter how late it lands. */
p.te-lies__lie{font-size:clamp(17px,1.5rem,24px);line-height:1.32;margin:1.1rem 0}
/* The line is a background gradient on the <s> itself, not an absolutely
   positioned pseudo element. An inline box that wraps onto a second line gives
   a pseudo element a containing block it cannot measure against, so the bar
   came out 79px wide across 328px of text. box-decoration-break:clone gives
   every line fragment its own full width strike, which is what a struck out
   sentence actually looks like. */
.te-lies__lie s{text-decoration:none;color:#ff9aa4;font-weight:600;
  letter-spacing:-.01em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(var(--te-red),var(--te-red));
  background-repeat:no-repeat;background-position:0 56%;
  background-size:100% 3px}
.te-lies__c.aos-animate .te-lies__lie s{animation:teStrike .75s .3s ease-out both}
@keyframes teStrike{from{background-size:0 3px}to{background-size:100% 3px}}
@media(prefers-reduced-motion:reduce){
  .te-lies__c.aos-animate .te-lies__lie s{animation:none}
}

/* the photo that contrasts with the myth it kills */
.te-lies__c{overflow:hidden;padding-top:0;padding-left:0;padding-right:0}
.te-lies__photo{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-bottom:1px solid rgba(255,255,255,.09)}
.te-lies__c > :not(.te-lies__photo):not(.te-lies__n){
  padding-left:clamp(20px,2.3vw,30px);padding-right:clamp(20px,2.3vw,30px)}
.te-lies__c > p:last-child{padding-bottom:clamp(20px,2.3vw,30px)}
.te-lies__n{top:auto;bottom:auto;transform:none;z-index:3;
  top:clamp(12px,1.4vw,18px);left:clamp(12px,1.4vw,18px)}

/* G5 · two lines wide beats three lines narrow. Both of these were locked to
   22ch by their own base rules, which is the same trap the journey ledes were
   in. Widened to the point where each lands on 2 lines at desktop. */
.simo__head{max-width:min(38ch,94%)}
h3.te-day__h{max-width:min(30ch,94%)}

/* G5 · the board lede was running to 3 lines */
p.te-board__lede{max-width:min(60ch,94%)}

/* ============================================================
   REVIEW · 2026-08-25 · items 210 to 213
   ============================================================ */

/* 210 · headline and subhead both to 2 lines. The lede was locked at 56ch,
   which is the same max-width trap the journey ledes were in. */
.te-say__lede--wide{max-width:min(72ch,94%)}
.te-say__h{max-width:min(26ch,94%);margin-left:auto;margin-right:auto}

/* 211 · every card now leads with its own point, said large, so the grid can
   be skimmed by headline alone. Avatars up from 54px, because at 54 they read
   as decoration rather than as a person. */
.te-say__hd{margin:0 0 .9rem !important;font-family:'Sora',sans-serif;
  font-weight:800;letter-spacing:-.025em;line-height:1.14;
  font-size:clamp(19px,1.72rem,27px);color:var(--te-gold);text-wrap:balance}
.te-say__av{width:76px;height:76px}
img.te-say__av{border-width:3px}
.te-say__who b{font-size:1.08rem}
.te-say__who i{font-size:.9rem}

/* 212 · the disclaimer said what the reader had already worked out. This says
   the thing that actually moves them instead. */
.te-say__next{margin:2.6rem auto 0;max-width:min(40ch,94%);text-align:center}
.te-say__next h3{margin:0;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(26px,3.5vw,46px);color:var(--te-text);text-wrap:balance}
.te-say__next p{margin:.7rem auto 0;max-width:34ch;
  font-size:clamp(16px,1.3rem,21px);line-height:1.4;color:var(--te-gold);
  text-wrap:balance}

/* 213 · the capability strip. Sean: "be more direct about what it can do".
   Four flat statements up front, before the beats explain them, so a reader
   who skims still leaves knowing what the thing does. */
.te-hood__lede--wide{max-width:min(56ch,94%)}
.te-can{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:clamp(26px,3vw,42px) 0 0}
.te-can__c{position:relative;border-radius:15px;padding:1.3rem 1.35rem 1.4rem;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13)}
.te-can__c--hero{background:linear-gradient(155deg,rgba(248,199,42,.16),rgba(0,0,0,.45));
  border-color:rgba(248,199,42,.5)}
.te-can__n{display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.18em;color:var(--te-text-3);margin-bottom:.6rem}
.te-can__c--hero .te-can__n{color:var(--te-gold)}
/* "> b" on purpose. A bare `.te-can__c b` also matches a <b> nested in the
   body copy and turns it into a block heading. That exact trap has now bitten
   this page three times (te-shift, te-lies, and nearly here), so the base rule
   is scoped to the direct child and the nested one is left alone. */
.te-can__c > b{display:block;font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.022em;line-height:1.14;font-size:clamp(17px,1.42rem,22px);
  color:var(--te-text);margin-bottom:.55rem;text-wrap:balance}
.te-can__c--hero > b{color:var(--te-gold)}
.te-can__c > span:last-child{display:block;font-size:clamp(14px,1.02rem,16px);
  line-height:1.5;color:var(--te-text-3)}
.te-can__c > span:last-child b{color:var(--te-text)}
.te-can__seg{margin:clamp(30px,3.4vw,48px) auto 0;text-align:center;
  max-width:min(44ch,94%);font-family:'Sora',sans-serif;font-weight:800;
  letter-spacing:-.02em;font-size:clamp(17px,1.5rem,24px);color:var(--te-text-2);
  text-wrap:balance}
@media(max-width:1000px){.te-can{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.te-can{grid-template-columns:minmax(0,1fr)}}

/* 216 · Sean: "this needs to be the biggest call to action." So it is, by a
   clear margin: nothing else on the page runs to 76px. */
.te-pick__h--big{font-size:clamp(34px,5.6vw,76px) !important;line-height:1.0;
  letter-spacing:-.04em;max-width:min(16ch,94%)}
.te-pick__lede--big{max-width:min(46ch,94%);
  font-size:clamp(17px,1.5rem,24px) !important;line-height:1.4;
  color:var(--te-text) !important;text-wrap:balance}

/* and the buttons themselves, since this is the biggest CTA on the page */
.te-pick__btn{font-size:clamp(16px,1.75vw,23px) !important;
  padding-block:clamp(14px,1.5vw,20px) !important}

/* ---- PICK YOUR SEAT · the picture argument -------------------------------
   Sean 2026-08-25, on the ContentClaw pattern: "a picture of the bundle, or
   just the masterclass by itself. That way it feels like you're getting more."
   1 banner on the left, 4 on the right. The reader counts before they read.
   Scoped to > img on purpose: a bare descendant selector here would also grab
   the JVZoo 1x1 tracking pixel that sits inside the same card. That pixel is
   an <img> too, and styling it to width:100% would paint a stretched artifact
   across the card. This trap has bitten 4 times now on this build. */
.te-pick__shot{margin:0 0 20px;border-radius:14px;overflow:hidden;line-height:0}
.te-pick__shot--one > img{width:100%;height:auto;display:block;border-radius:14px}
.te-pick__shot--all{display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:none;border-radius:0;overflow:visible}
.te-pick__shot--all > img{width:100%;height:auto;display:block;border-radius:9px;
  border:1px solid rgba(255,255,255,.10)}
@media(max-width:560px){
  .te-pick__shot--all{gap:6px}
}
/* the real arithmetic, never an invented value: 47 + 97 + 197 + 497 = 838 */
.te-pick__was{margin:10px 0 0;font-size:15.5px;color:var(--gr-2);text-align:center}
.te-pick__was s{color:var(--gr-1);text-decoration-thickness:2px}
.te-pick__was b{color:#fff}