/* Brand fonts, served from this site (2 Oct 2026): faster than Google Fonts, and no visitor
   details go to Google. Oswald, Work Sans and IBM Plex Mono are free under the SIL Open Font
   Licence (fonts/OFL.txt). Latin set only; any other character falls back to the system font. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oswald-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/oswald-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oswald-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/work-sans-latin-300-normal.woff2) format('woff2');}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/work-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/work-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/work-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');}

/* ==========================================================================
   Two More Mission — site styles
   Same six brand colours as the apps and the sales deck. No green.
   Oswald for display, Work Sans for reading, IBM Plex Mono for the
   stat-sheet details (weeks, rounds, units).
   ========================================================================== */

:root{
  --mat:#000000;
  --ink:#0a0a0a;
  --raised:#161616;
  --raised2:#1c1c1c;
  --line:#333333;
  --line2:#222222;
  --line-strong:#5c5c5c;
  --tape:#e9ecef; /* Whiteout, the apps' soft off-white (23 Oct 2026); background stays pure black */
  --chalk:#a6a6a6;
  --dim:#828282;
  --corner:#9f2121;
  --corner-hi:#b52626;
  --corner-text:#dc5555;

  --display:'Oswald','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --body:'Work Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(18px,4.5vw,56px);
  --maxw:1320px;
  --headh:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Smooth cross-fade between pages on browsers that support it. No JS, no
   layout risk — browsers without it just do a normal navigation. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--headh) + 16px);}
body{
  margin:0;
  background:var(--mat);
  color:var(--tape);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;}
p{margin:0;}
h1,h2,h3,h4{margin:0;font-weight:inherit;}
::selection{background:var(--corner);color:var(--tape);}
:focus-visible{outline:2px solid var(--corner-text);outline-offset:3px;}
[hidden]{display:none!important;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{left:var(--gutter);top:10px;z-index:100;background:var(--tape);color:var(--mat);padding:0 16px;min-height:44px;display:flex;align-items:center;}

/* ---------- type ---------- */
.label{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--chalk);
}
.label .no{color:var(--corner-text);margin-right:10px;}
.display{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.88;
  text-wrap:balance;
}
.h1{font-size:clamp(52px,10.4vw,164px);}
.h1-page{font-size:clamp(50px,8.6vw,132px);}
.h2{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(36px,5.4vw,78px);
  line-height:.92;
  letter-spacing:0;
  text-wrap:balance;
}
.h3{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:clamp(19px,1.7vw,24px);
  line-height:1.1;
}
.lead{
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.5;
  font-weight:300;
  color:var(--tape);
  max-width:46ch;
  text-wrap:pretty;
}
.muted{color:var(--chalk);}
.prose{max-width:62ch;}
.prose p{color:var(--chalk);font-weight:300;font-size:clamp(17px,1.3vw,19px);line-height:1.65;text-wrap:pretty;}
.prose p + p{margin-top:1.1em;}
.prose strong{color:var(--tape);font-weight:500;}
.red{color:var(--corner-text);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:15px;line-height:1;
  text-decoration:none;border:1px solid transparent;border-radius:0;
  cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn .arr{display:inline-block;transition:transform .2s var(--ease);font-family:var(--body);font-weight:400;}
.btn:hover .arr{transform:translateX(4px);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--corner);color:var(--tape);}
.btn-primary:hover{background:var(--corner-hi);}
.btn-ghost{background:transparent;color:var(--tape);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--tape);}
.btn-white{background:var(--tape);color:var(--mat);}
.btn-white:hover{background:#d5d9dd;}
.btn[disabled]{opacity:.5;cursor:default;}
.btns{display:flex;flex-wrap:wrap;gap:12px;}
.btnnote{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:16px;}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--mat);
  border-bottom:1px solid var(--line2);
  padding-top:env(safe-area-inset-top,0px);
}
header.site .wrap{height:var(--headh);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:20px;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px; /* a full 44px tap area; looks the same */
}
.logo b{color:var(--corner-text);font-weight:700;}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;font-size:14px;text-decoration:none;color:var(--chalk);
  transition:color .15s;
  position:relative;padding-block:6px;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--tape);}
.navlinks a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--corner);
}
.navlinks .navcta{
  color:var(--tape);background:var(--corner);padding:12px 18px;letter-spacing:.1em;
}
.navlinks .navcta:hover{background:var(--corner-hi);}
.navlinks .navcta::after{display:none;}
.burger{
  display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;
  width:46px;height:46px;position:relative;
}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--tape);transition:transform .25s var(--ease),opacity .2s;}
.burger span:nth-child(1){top:15px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:29px;}
.menuopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menuopen .burger span:nth-child(2){opacity:0;}
.menuopen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:980px){
  .burger{display:block;}
  .navlinks{
    position:fixed;left:0;right:0;
    top:calc(var(--headh) + env(safe-area-inset-top,0px));
    bottom:0;
    background:var(--mat);
    flex-direction:column;align-items:stretch;gap:0;
    padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line2);
    overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
  }
  .menuopen .navlinks{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease);}
  .navlinks a{
    font-size:clamp(28px,8vw,40px);font-weight:600;color:var(--tape);
    padding:14px 0;border-bottom:1px solid var(--line2);letter-spacing:.02em;
  }
  .navlinks a[aria-current="page"]{color:var(--corner-hi);}
  .navlinks a[aria-current="page"]::after{display:none;}
  .navlinks .navcta{margin-top:24px;text-align:center;font-size:18px;padding:18px;border:0;letter-spacing:.1em;}
  .menuopen{overflow:hidden;}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(76px,10vw,148px);border-top:1px solid var(--line2);}
.sec.tight{padding-block:clamp(56px,7vw,100px);}
.sec.alt{background:var(--ink);}
.sechead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,80px);}
.sechead .label{margin-bottom:22px;}
.sechead .lead{color:var(--chalk);}
@media (max-width:860px){.sechead{grid-template-columns:1fr;align-items:start;}}

/* ---------- home hero ---------- */
.hero{
  position:relative;
  min-height:min(92svh,980px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;
  z-index:-2;filter:grayscale(.15) contrast(1.06);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.35) 100%),
    linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 45%);
}
.hero .wrap{padding-block:clamp(100px,14vh,160px) clamp(48px,8vh,88px);}
.hero .label{margin-bottom:26px;color:var(--tape);}
.hero .label .no{color:var(--corner-text);}
.hero h1{max-width:10.5ch;}
.hero h1 em{font-style:normal;color:var(--corner-hi);}
.hero .lead{margin-top:30px;color:#d6d6d6;}
.hero .btns{margin-top:38px;}
.herometa{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);max-width:620px;
}
.herometa span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk);}
.herometa b{color:var(--tape);font-weight:500;}
@media (max-width:700px){
  .hero{min-height:88svh;}
  .hero img.bg{object-position:70% 30%;}
  .hero::before{background:linear-gradient(0deg,rgba(0,0,0,1) 8%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.35) 100%);}
}

/* page-load sequence: visible at rest, only animates in when motion is allowed */
@media (prefers-reduced-motion:no-preference){
  .js .intro > *{animation:intro .8s var(--ease) both;}
  .js .intro > *:nth-child(2){animation-delay:.08s;}
  .js .intro > *:nth-child(3){animation-delay:.16s;}
  .js .intro > *:nth-child(4){animation-delay:.24s;}
  .js .intro > *:nth-child(5){animation-delay:.32s;}
  .js .hero img.bg{animation:settle 1.6s var(--ease) both;}
}
@keyframes intro{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes settle{from{transform:scale(1.06);}to{transform:scale(1);}}

/* below-the-fold reveal: content already visible at rest for no-JS and
   reduced-motion; JS only arms elements once they're off-screen, so nothing
   below the fold ever pops in on load, and each element reveals once. */
.reveal{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.reveal.pending{opacity:0;transform:translateY(22px);}
.reveal.inview{opacity:1;transform:none;}

/* ---------- page hero (typographic) ---------- */
.phero{padding-block:clamp(72px,12vw,168px) clamp(56px,8vw,112px);position:relative;overflow:hidden;}
.phero .label{margin-bottom:28px;}
.phero h1 em{font-style:normal;color:var(--corner-hi);}
.phero .lead{margin-top:30px;color:var(--chalk);}
.phero .btns{margin-top:36px;}
.phero .ghostword{
  position:absolute;right:calc(var(--gutter) * -0.4);bottom:-.14em;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(120px,24vw,380px);line-height:.8;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1px #1f1f1f;
  pointer-events:none;user-select:none;z-index:-1;white-space:nowrap;
}
.phero{isolation:isolate;}
@media (max-width:700px){.phero .ghostword{display:none;}}

/* photo page hero */
.pphoto{position:relative;isolation:isolate;overflow:hidden;min-height:min(78svh,820px);display:flex;align-items:flex-end;}
.pphoto img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.1) contrast(1.05);}
.pphoto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#000 4%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.2) 100%);}
@media (max-width:900px){.pphoto::before{background:linear-gradient(0deg,#000 22%,rgba(0,0,0,.78) 55%,rgba(0,0,0,.25) 100%);}}
.pphoto .wrap{padding-block:120px clamp(52px,8vw,96px);}
.pphoto .label{margin-bottom:24px;color:var(--tape);}
.pphoto h1 em{font-style:normal;color:var(--corner-hi);}
.pphoto .lead{margin-top:26px;color:#d0d0d0;}
.pphoto .btns{margin-top:34px;}


/* portrait photos: give the photo its own column on wide screens instead of
   stretching a phone-shaped picture across a laptop */
@media (min-width:901px){
  .pphoto.side{min-height:min(84svh,860px);}
  .pphoto.side img.bg{left:auto;width:50%;}
  .pphoto.side::before{background:
    linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.55) 58%,rgba(0,0,0,0) 72%),
    linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 30%);}
  .pphoto.side .wrap > *{max-width:48%;}
  .pphoto.side .wrap .display{max-width:9ch;}
}

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line2);overflow:hidden;background:var(--mat);
  padding-block:22px;
}
.marquee .track{display:flex;width:max-content;animation:slide 38s linear infinite;}
.marquee span{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4vw,52px);line-height:1;letter-spacing:.01em;
  padding-right:.9em;white-space:nowrap;color:var(--tape);
}
.marquee span.o{color:transparent;-webkit-text-stroke:1px #4a4a4a;}
.marquee span.r{color:var(--corner-hi);}  /* display-size red text: --corner-hi, not the fill red */
@keyframes slide{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none;}}

/* ---------- ruled grid (problems, principles) ---------- */
.ruled{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.ruled > div{
  padding:clamp(22px,2.6vw,36px) clamp(0px,2vw,32px) clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line);
}
.ruled > div:not(:nth-child(3n+1)){padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--line2);}
.ruled .h3{margin-bottom:12px;}
.ruled p{color:var(--chalk);font-weight:300;font-size:16.5px;line-height:1.6;max-width:38ch;}
@media (max-width:900px){
  .ruled{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ruled > div:not(:nth-child(3n+1)){padding-left:0;border-left:0;}
  .ruled > div:nth-child(2n){padding-left:clamp(18px,3vw,28px);border-left:1px solid var(--line2);}
}
@media (max-width:600px){
  .ruled{grid-template-columns:1fr;}
  .ruled > div:nth-child(2n){padding-left:0;border-left:0;}
}

/* ---------- split: photo / copy ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line2);}
.split .media{position:relative;min-height:560px;overflow:hidden;background:var(--ink);}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.1);}
.split .body{
  --edge:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-block:clamp(56px,8vw,128px);
  padding-inline:clamp(32px,5vw,88px) var(--edge);
  display:flex;flex-direction:column;justify-content:center;
}
.split.flip .body{padding-inline:var(--edge) clamp(32px,5vw,88px);}
.split .body .label{margin-bottom:22px;}
.split .body .h2{margin-bottom:28px;}
.split .body .btns{margin-top:34px;}
.split.flip .media{order:2;}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split .media{min-height:min(110vw,560px);}
  .split .body,.split.flip .body{padding-inline:var(--gutter);}
  .split.flip .media{order:0;}
}

/* ---------- mantra block ---------- */
.mantra{display:flex;flex-direction:column;gap:.04em;margin-top:34px;}
.mantra span{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,50px);line-height:1;letter-spacing:.005em;
}
.mantra span:last-child{color:var(--corner-hi);}

/* ---------- sequence track (assess → progress, 90-day shape) ---------- */
.track6{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;counter-reset:st;position:relative;
}
.track6 > li{list-style:none;padding:0 clamp(12px,1.6vw,24px) 0 0;position:relative;}
.track6 > li::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--corner-text);
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.track6 > li:first-child::before{border-bottom-color:var(--corner);}
.track6 .h3{margin-bottom:10px;}
.track6 p{color:var(--chalk);font-weight:300;font-size:15.5px;line-height:1.55;}
ol.track6{margin:0;padding:0;}
@media (max-width:1000px){.track6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px;}}
@media (max-width:620px){
  .track6{grid-template-columns:1fr;row-gap:0;}
  .track6 > li{display:grid;grid-template-columns:52px 1fr;padding:22px 0;border-bottom:1px solid var(--line2);}
  .track6 > li::before{border:0;padding:0;margin:4px 0 0;}
  .track6 > li > *{grid-column:2;}
}

/* ---------- tale of the tape ---------- */
.tape{border-top:2px solid var(--tape);}
.tape .row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;border-bottom:1px solid var(--line);
  min-height:74px;
}
.tape .row > div{padding:16px 0;}
.tape .row .mid{
  text-align:center;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(15px,1.5vw,20px);
  border-inline:1px solid var(--line2);padding-inline:12px;
}
.tape .row .mid small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--dim);margin-top:4px;}
.tape .row .l{text-align:left;padding-right:16px;}
.tape .row .r{text-align:right;padding-left:16px;}
.tape .row .v{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--chalk);}
.tape .head{min-height:0;border-bottom:1px solid var(--tape);}
.tape .head > div{padding:14px 0 16px;}
.tape .head .l,.tape .head .r{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);letter-spacing:.02em;line-height:1;}
.tape .head .r{color:var(--corner-text);}
.tape .head .mid{border:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--dim);}
.tape .foot{min-height:0;border-bottom:0;}
.tape .foot > div{padding:18px 0 0;}
.tape .score{font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;}
.tape .score small{font-size:.4em;color:var(--dim);font-weight:500;margin-left:4px;}
.tape .foot .r .score{color:var(--corner-text);}
@media (max-width:640px){
  .tape .row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);min-height:64px;}
  .tape .row .v{font-size:12px;letter-spacing:0;color:var(--tape);}
  .tape .row .mid{font-size:13px;padding-inline:6px;}
  .tape .row .mid small{font-size:12px;letter-spacing:.04em;}
  .tape .score{font-size:20px;}
  .tape .score small{font-size:12px;}
}
.tapenote{margin-top:26px;max-width:62ch;color:var(--dim);font-size:14.5px;line-height:1.6;}

/* ---------- phone frame ---------- */
/* An iPhone 16 Pro drawn in CSS (24 Oct 2026): a brushed-titanium rim, a black bezel, buttons
   fixed to the rim. Everything but the rim is a percentage of the phone's own width, so one rule
   fits the 220px cards and the 680px tour. The screen is placed absolutely, because padding in
   percent would follow the parent's width, not the phone's. The frame is 780 x 1630 so the screen
   is exactly the screenshots' 780 x 1688 shape: a 3.2% bezel is 1.53% of the height, and a
   15.8% corner is 7.56% of the height. */
.phone{
  --rim:clamp(2px,.42vw,4px);
  position:relative;width:min(100%,330px);aspect-ratio:780/1630;max-width:100%;margin-inline:auto;
  border-radius:15.8% / 7.56%;border:var(--rim) solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,#8a8a90 0%,#3b3b3f 18%,#1d1d20 40%,#2c2c30 62%,#7a7a80 82%,#2f2f33 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 40px 80px -30px rgba(159,33,33,.35), 0 30px 60px -20px rgba(0,0,0,.9);
}
/* the screen: 93.6% of the width, its corners 13.5% of its width and 6.22% of its height */
.phone img{position:absolute;top:1.53%;left:3.2%;width:93.6%;height:96.94%;object-fit:cover;border-radius:13.5% / 6.22%;}
/* buttons on the rim: action and volume on the left, power on the right */
.phone::before,.phone::after{content:"";position:absolute;width:.9%;pointer-events:none;}
.phone::before{left:calc(-1 * var(--rim) - .9%);top:17%;height:23%;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#55555a,#2c2c30) 0 0/100% 14% no-repeat,
             linear-gradient(90deg,#55555a,#2c2c30) 0 46%/100% 30% no-repeat,
             linear-gradient(90deg,#55555a,#2c2c30) 0 100%/100% 30% no-repeat;}
.phone::after{right:calc(-1 * var(--rim) - .9%);top:27%;height:11%;border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,#55555a,#2c2c30);}
.phonestage{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,7vw,96px) var(--gutter);min-height:100%;
  background:radial-gradient(60% 50% at 50% 55%,#1a0a0a 0%,#000 70%);
}

/* ---------- CTA band ---------- */
.band{padding-block:clamp(88px,12vw,176px);border-top:1px solid var(--line2);text-align:left;position:relative;overflow:hidden;isolation:isolate;}
.band .h1-page{max-width:12ch;}
.band .lead{margin-top:28px;color:var(--chalk);}
.band .btns{margin-top:38px;}
.band::after{
  content:"";position:absolute;right:-10%;top:-30%;width:70%;height:160%;z-index:-1;
  background:radial-gradient(closest-side,rgba(159,33,33,.22),rgba(159,33,33,0));
  pointer-events:none;
}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.tier{
  border:1px solid var(--line-strong);background:var(--mat);
  padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;
}
.tier.elite{background:var(--ink);border-color:var(--corner);}
.tier .label{margin-bottom:16px;}
.tier.elite .label{color:var(--corner-text);}
.tier .h2{font-size:clamp(34px,3.8vw,56px);}
.tier .desc{color:var(--chalk);font-weight:300;margin-top:16px;max-width:44ch;}
.tier ul{list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;}
.tier li{position:relative;padding-left:26px;font-size:16px;line-height:1.45;color:#dcdcdc;}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--corner);}
.tier li.plus{padding-left:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--corner-text);margin-top:6px;}
.tier li.plus::before{display:none;}
.tier .btns{margin-top:auto;padding-top:34px;}
@media (max-width:820px){.tiers{grid-template-columns:1fr;}}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;border-top:2px solid var(--tape);-webkit-overflow-scrolling:touch;}
table.compare{width:100%;border-collapse:collapse;}
.compare th,.compare td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:15.5px;}
.compare thead th{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px;}
.compare thead th:not(:first-child),.compare td:not(:first-child){text-align:center;width:22%;}
@media (max-width:560px){.compare thead th:not(:first-child),.compare td:not(:first-child){width:74px;}.compare th,.compare td{font-size:14.5px;padding:14px 6px;}.compare thead th{font-size:13px;letter-spacing:.04em;}}
.compare thead th.el{color:var(--corner-text);}
.compare td:first-child{color:#dcdcdc;padding-left:0;}
.compare th:first-child{padding-left:0;}
.compare .y{color:var(--tape);font-family:var(--mono);}
.compare .n{color:var(--chalk);font-family:var(--mono);} /* "not included" is information: readable, 4.5:1+ */
.compare td.el .y{color:var(--corner-text);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:960px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(18px,1.7vw,23px);line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--mono);font-weight:400;font-size:24px;color:var(--corner-text);
  flex:none;transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--chalk);}
.faq details p{color:var(--chalk);font-weight:300;padding:0 0 28px;max-width:70ch;line-height:1.65;}

/* ---------- method: six parts ---------- */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);}
.parts > div{background:var(--mat);padding:clamp(26px,3vw,42px);}
.parts .verb{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,4.6vw,64px);line-height:.9;}
.parts .h3{margin-top:14px;color:var(--chalk);font-weight:500;font-size:clamp(14px,1.2vw,16px);letter-spacing:.1em;}
.parts p{margin-top:18px;color:var(--chalk);font-weight:300;font-size:16px;line-height:1.6;}
@media (max-width:900px){.parts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.parts{grid-template-columns:1fr;}}

/* three ideas */
.ideas{display:grid;gap:0;border-top:1px solid var(--line);}
.idea{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,80px);padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--line);}
.idea .h2{font-size:clamp(30px,3.6vw,52px);}
.idea p{color:var(--chalk);font-weight:300;font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:56ch;}
@media (max-width:820px){.idea{grid-template-columns:1fr;}}

/* 90-day shape */
.shape{display:grid;grid-template-columns:1fr 4fr 4fr 3fr 1fr;gap:4px;margin-bottom:34px;}
.shape div{height:14px;background:#2a2a2a;}
.shape div:first-child,.shape div:last-child{background:var(--corner);}
.shape div:nth-child(3){background:#444;}
.shape div:nth-child(4){background:#5e5e5e;}
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px);}
.phases > div{border-top:1px solid var(--line);padding-top:20px;}
.phases .when{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--corner-text);}
.phases .h3{margin:10px 0 12px;}
.phases p{color:var(--chalk);font-weight:300;font-size:15.5px;line-height:1.55;}
@media (max-width:960px){
  .shape{display:none;}
  .phases{grid-template-columns:1fr;gap:0;}
  .phases > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;padding:24px 0;}
  .phases .when{grid-row:1 / span 2;padding-top:5px;}
  .phases .h3{margin:0;}
}

/* ---------- app page feature rows ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line2);}
.feat:first-of-type{border-top:0;}
.feat.flip .shot{order:2;}
.feat .label{margin-bottom:18px;}
.feat .h2{font-size:clamp(34px,4.2vw,62px);margin-bottom:22px;}
.feat .copy{color:var(--chalk);font-weight:300;font-size:clamp(17px,1.3vw,19px);line-height:1.65;max-width:52ch;}
.feat ul{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);}
.feat li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line2);position:relative;font-size:16px;color:#dcdcdc;}
.feat li::before{content:"";position:absolute;left:0;top:1.3em;width:12px;height:1px;background:var(--corner);}
@media (max-width:860px){
  .feat{grid-template-columns:1fr;}
  .feat.flip .shot{order:0;}
  .feat .shot .phone{width:min(76vw,300px);}
}

/* app gallery strip */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:end;}
.strip figure{margin:0;}
.strip .phone{width:100%;}
.strip figcaption{margin-top:16px;text-align:center;}
.strip figure:nth-child(even){transform:translateY(-28px);}
@media (max-width:760px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px;}
  .strip figure:nth-child(even){transform:none;}
}

/* ---------- retreats ---------- */
.tags{display:flex;flex-wrap:wrap;gap:10px;}
.tags span{
  border:1px solid var(--line);padding:12px 18px;font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;font-size:15px;
}
.week{border-top:2px solid var(--tape);}
.week > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.week .d{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2vw,26px);letter-spacing:.02em;}
.week .hard .d{color:var(--corner-text);}
.week p{color:var(--chalk);font-weight:300;font-size:16.5px;}
.week .hard p{color:var(--tape);}
.week .sess{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:block;margin-top:6px;}
@media (max-width:560px){.week > div{grid-template-columns:78px minmax(0,1fr);gap:14px;}}

/* ---------- about ---------- */
.manifesto p{font-size:clamp(19px,1.6vw,23px);line-height:1.55;font-weight:300;color:#d4d4d4;max-width:40ch;text-wrap:pretty;}
.manifesto p + p{margin-top:1em;}
.manifesto p strong{color:var(--tape);font-weight:500;}
.pull{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,54px);line-height:1;max-width:18ch;text-wrap:balance;
  border-left:3px solid var(--corner);padding-left:clamp(18px,2vw,28px);
}

/* ---------- apply form ---------- */
.formcard{
  max-width:760px;border:1px solid var(--line);background:var(--ink);
  padding:clamp(24px,4vw,56px);
}
.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.stepbar{height:3px;background:#262626;transition:background .3s var(--ease);}
.stepbar.on{background:var(--corner);}
.stepcount{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);}
.formcard form{margin-top:30px;}
.formcard fieldset{border:0;margin:0;padding:0;min-width:0;}
@media (prefers-reduced-motion:no-preference){
  .formcard fieldset{animation:stepin .4s var(--ease-out) both;}
}
@keyframes stepin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.formcard legend{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4vw,52px);line-height:.95;padding:0;margin-bottom:10px;
}
.legendsub{color:var(--chalk);font-weight:300;margin-bottom:26px;}
.formcard label{
  display:block;margin:22px 0 9px;font-weight:500;font-size:15px;line-height:1.4;color:#e8e8e8;
}
.formcard input,.formcard select,.formcard textarea{
  width:100%;background:var(--mat);color:var(--tape);
  border:1px solid var(--line-strong);border-radius:0;
  padding:15px 14px;font:inherit;font-size:16px;line-height:1.4;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s;
}
.formcard select{
  background-image:linear-gradient(45deg,transparent 50%,var(--chalk) 50%),linear-gradient(135deg,var(--chalk) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;
}
.formcard textarea{min-height:120px;resize:vertical;}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:none;border-color:var(--tape);}
.formcard input:user-invalid,.formcard select:user-invalid,.formcard textarea:user-invalid{border-color:var(--corner-hi);}
.formcard ::placeholder{color:#575757;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media (max-width:560px){.pair{grid-template-columns:1fr;}}
.hint{font-size:14px;line-height:1.55;color:var(--dim);margin-top:10px;}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden;}
.err{color:#e05252;font-size:15px;min-height:1.4em;margin-top:22px;}
.formnav{display:flex;gap:12px;justify-content:space-between;margin-top:12px;flex-wrap:wrap;}
.formnav [data-next],.formnav [data-submit]{margin-left:auto;}
.sent{border-left:3px solid var(--corner);background:var(--ink);padding:clamp(24px,4vw,44px);max-width:760px;}
.sent h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(32px,4vw,52px);line-height:.95;margin-bottom:18px;}
.sent p{color:var(--chalk);font-weight:300;}
.sent p + p{margin-top:12px;}
.sent a{color:var(--tape);}
.applygrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,72px);align-items:start;}
.applyside{position:sticky;top:calc(var(--headh) + 32px);}
.applyside ol{list-style:none;margin:0;padding:0;counter-reset:a;border-top:1px solid var(--line);}
.applyside li{counter-increment:a;padding:18px 0 18px 44px;border-bottom:1px solid var(--line2);position:relative;color:var(--chalk);font-weight:300;font-size:15.5px;}
.applyside li::before{content:counter(a,decimal-leading-zero);position:absolute;left:0;top:19px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--corner-text);}
.applyside li b{display:block;color:var(--tape);font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:17px;margin-bottom:4px;}
@media (max-width:980px){.applygrid{grid-template-columns:1fr;}.applyside{position:static;}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line2);padding-block:clamp(64px,8vw,112px) calc(40px + env(safe-area-inset-bottom,0px));background:var(--mat);}
.footbig{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,9vw,140px);line-height:.86;letter-spacing:-.005em;
  padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--line2);
}
.footbig b{color:var(--corner-hi);font-weight:700;}
.footgrid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-top:clamp(36px,4vw,56px);}
.footgrid h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;}
.footgrid a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--chalk);font-size:15.5px;transition:color .15s;}
.footgrid a:hover{color:var(--tape);}
.footgrid .tagline{color:var(--chalk);font-weight:300;max-width:34ch;font-size:15.5px;}
.footnote{margin-top:48px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);line-height:1.7;max-width:80ch;}
@media (max-width:760px){.footgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.footgrid > div:first-child,.footgrid > div:last-child{grid-column:1 / -1;}}
.footgrid a{overflow-wrap:anywhere;}

/* ---------- sticky apply (phones) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  /* Solid black, with the fade drawn above it: Safari on iOS 26 tints its own toolbar from the
     colour of a fixed bar at the bottom of the screen, and with no colour of its own here it took
     the red button's and turned the whole toolbar red (Charlie's iPhone, 23 Oct 2026). */
  background:#000;
  transform:translateY(110%);transition:transform .3s var(--ease);
  pointer-events:none;
}
.sticky.show{transform:none;pointer-events:auto;}
.sticky::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:linear-gradient(0deg,#000,rgba(0,0,0,0));pointer-events:none;}
.sticky a{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  background:var(--corner);color:var(--tape);text-decoration:none;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:16px;
}
@media (min-width:981px){.sticky{display:none;}}
@media (max-width:980px){body.hasSticky footer.site{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));}}

/* the smallest phones (320px): keep the condensed headlines from forcing a sideways scroll */
@media (max-width:380px){
  .h1{font-size:46px;}
  .h1-page{font-size:42px;}
  .h2{font-size:30px;}
  .feat .h2,.tier .h2{font-size:30px;}
  .footbig{font-size:40px;}
  .sechead,.feat,.split,.applygrid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- app tour (home page) ----------
   Default: a plain stack, each feature with its own phone. That is what visitors
   get with no JavaScript, with reduced motion, or on short screens.
   assets/appscroll.js adds .is-pinned when the screen qualifies: then the stage
   is pinned below the header, the phone holds still and the features change as
   you scroll. */
.appscroll{border-top:1px solid var(--line2);padding-block:clamp(72px,9vw,128px);}
.as-stage{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.as-copy > .label{margin-bottom:18px;}
.as-tabs{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,30px);margin:0 0 clamp(28px,4vw,44px);padding:0;list-style:none;border-bottom:1px solid var(--line);}
.as-tab{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;color:var(--chalk);text-decoration:none;transition:color .2s var(--ease);
}
.as-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--corner);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);}
.as-tab:hover,.as-tab[aria-current="true"]{color:var(--tape);}
.as-tab[aria-current="true"]::after{transform:scaleX(1);}
/* in the plain stack the tabs are just jump links: nothing is "current" */
.appscroll:not(.is-pinned) .as-tab[aria-current="true"]{color:var(--chalk);}
.appscroll:not(.is-pinned) .as-tab[aria-current="true"]:hover{color:var(--tape);}
.appscroll:not(.is-pinned) .as-tab::after{display:none;}
.as-title{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(32px,4.2vw,60px);line-height:.95;margin-bottom:18px;text-wrap:balance;}
.as-p{color:var(--chalk);max-width:44ch;font-size:clamp(16px,1.35vw,19px);line-height:1.55;}
.as-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,4vw,44px);}
.as-more{
  display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--tape);text-decoration:none;
  background:linear-gradient(var(--corner),var(--corner)) left calc(100% - 9px)/100% 2px no-repeat;transition:color .2s var(--ease);
}
.as-more:hover{color:var(--chalk);}
.as-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim);display:none;}
.as-count b{color:var(--tape);font-weight:500;}

/* the plain stack */
.as-steps{display:grid;gap:clamp(56px,8vw,104px);}
.as-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px);}
.as-shot .phone{width:min(70vw,300px);}
.as-media{display:none;}
@media (max-width:820px){
  .as-step{grid-template-columns:minmax(0,1fr);}
}

/* pinned: the phone holds still, the features change as you scroll */
.appscroll.is-pinned{padding-block:0;}
.is-pinned .as-stage{
  height:calc(100vh - var(--headh));height:calc(100svh - var(--headh));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);
  padding-block:clamp(24px,4vh,48px);
}
.is-pinned .as-steps{display:grid;gap:0;position:relative;z-index:1;}
.is-pinned .as-foot{position:relative;z-index:1;}
body.touring .sticky.show{transform:translateY(110%);pointer-events:none;}
.is-pinned .as-step{grid-area:1/1;display:block;will-change:transform,opacity;}
.is-pinned .as-shot{display:none;}
.is-pinned .as-count{display:block;}
.is-pinned .as-media{
  display:flex;position:relative;height:100%;min-height:0;align-items:center;justify-content:center;
  background:radial-gradient(55% 45% at 50% 55%,#1a0a0a 0%,rgba(0,0,0,0) 72%);
}
/* the big faded feature number: a background decoration (CSS content, not page text) */
.is-pinned .as-media::before{
  content:attr(data-no);position:absolute;top:2%;right:0;font-family:var(--display);font-weight:700;line-height:.8;
  font-size:clamp(110px,15vw,230px);color:#141414;letter-spacing:-.02em;font-variant-numeric:tabular-nums;pointer-events:none;
}
.is-pinned .as-phone{
  position:relative;width:auto;height:min(100%,680px);max-width:100%;margin:0;
}
.as-screen + .as-screen{opacity:0;}

@media (max-width:820px){
  /* phone in the middle, the words underneath, all inside one screen */
  .is-pinned .as-stage{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:14px;padding-block:14px 18px;
  }
  .is-pinned .as-copy{display:contents;}
  .is-pinned .as-copy > .label{display:none;}
  .is-pinned .as-tabs{grid-row:1;margin:0;justify-content:space-between;gap:0 8px;}
  .is-pinned .as-tab{font-size:14px;}
  .is-pinned .as-media{grid-row:2;}
  .is-pinned .as-steps{grid-row:3;}
  .is-pinned .as-foot{grid-row:4;margin-top:0;}
  .is-pinned .as-title{font-size:clamp(26px,7.4vw,34px);margin-bottom:8px;}
  .is-pinned .as-p{font-size:15px;line-height:1.5;}
  .is-pinned .as-media::before{font-size:clamp(90px,26vw,150px);}
}

/* ---------- App page: Apple-style scroll sections ----------
   Each reads as a finished page with no JavaScript or with reduced motion.
   assets/appfx.js adds the movement (GSAP ScrollTrigger). */

/* 1. screen settles into the phone */
.ap-reveal{border-top:1px solid var(--line2);overflow:hidden;}
.ap-reveal-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  padding-block:clamp(56px,8vw,112px);
  background:radial-gradient(55% 45% at 50% 50%,#1a0a0a 0%,rgba(0,0,0,0) 72%);
}
.ap-reveal-phone{width:min(64vw,330px);transform-origin:50% 50%;will-change:transform;}
.ap-reveal.is-live .ap-reveal-stage{height:calc(100vh - var(--headh));height:calc(100svh - var(--headh));padding-block:24px;}
.ap-reveal.is-live .ap-reveal-phone{width:auto;height:min(78%,700px);}

/* 2. the sentence that lights up as you read */
.ap-statement{padding-block:clamp(72px,10vw,150px);border-top:1px solid var(--line2);}
.ap-words{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,80px);line-height:1;max-width:20ch;text-wrap:balance;
}
.ap-words .w{display:inline-block;}

/* 3. get the highlights: a rail you swipe, with paddles */
.ap-high .sechead{margin-bottom:clamp(28px,4vw,48px);}
.ap-rail{
  --edge:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ap-rail::-webkit-scrollbar{display:none;}
.ap-rail:focus-visible{outline-offset:-4px;}
.ap-track{display:flex;gap:20px;list-style:none;margin:0;padding:4px var(--edge) 8px;width:max-content;}
.ap-card{
  scroll-snap-align:start;flex:0 0 auto;width:min(78vw,340px);
  background:var(--raised);border:1px solid var(--line2);padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,28px) 28px;
  display:flex;flex-direction:column;
}
.ap-card .phone{width:min(100%,220px);margin:0 auto 26px;}
.ap-card .h3{margin-bottom:8px;}
.ap-card p{color:var(--chalk);font-size:15.5px;line-height:1.5;}
.ap-paddles{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;}
.ap-pad{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);
  color:var(--tape);font-size:20px;cursor:pointer;transition:border-color .15s var(--ease),opacity .15s var(--ease);
}
.ap-pad:hover:not([disabled]){border-color:var(--tape);}
.ap-pad[disabled]{opacity:.35;cursor:default;}
.ap-pad:active:not([disabled]){opacity:.7;}

/* 4. the numbers */
.ap-numgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--tape);}
.ap-numgrid > div{padding:clamp(22px,3vw,36px) clamp(12px,2vw,28px) 0 0;}
.ap-numgrid > div + div{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line2);}
.ap-num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,140px);line-height:.9;font-variant-numeric:tabular-nums;}
.ap-numgrid > div:first-child .ap-num{color:var(--corner-hi);}
.ap-numgrid span{display:block;margin-top:14px;color:var(--chalk);font-size:15.5px;line-height:1.5;max-width:26ch;}
@media (max-width:700px){
  .ap-numgrid{grid-template-columns:minmax(0,1fr);}
  .ap-numgrid > div{padding:22px 0;border-bottom:1px solid var(--line2);}
  .ap-numgrid > div + div{padding-left:0;border-left:0;}
}

/* 5. the fight photo */
.ap-photo{position:relative;isolation:isolate;overflow:hidden;min-height:min(92svh,900px);display:flex;align-items:flex-end;border-top:1px solid var(--line2);}
.ap-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;will-change:transform;}
.ap-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,#000 6%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.15) 78%),linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 60%);}
.ap-photo-copy{padding-block:clamp(120px,18vh,200px) clamp(56px,8vw,104px);}
.ap-photo-copy .label{margin-bottom:22px;color:var(--tape);}
.ap-photo-copy .h1-page{max-width:12ch;}
.ap-photo-copy .lead{margin-top:26px;color:#d6d6d6;}

/* ---------- shared scroll effects (assets/fx.js) ----------
   Without the script, or with reduced motion, nothing below applies: every
   photo sits still and everything is lit. Dimmed text uses --dim, which still
   passes contrast, so nothing is unreadable mid-scroll either. */
[data-settle]{will-change:transform;}
.pull.seq-live .sq{color:var(--dim);transition:color .3s var(--ease);}
.pull.seq-live .sq.on{color:var(--tape);}
.mantra.seq-live > span{color:var(--dim);transition:color .35s var(--ease);}
.mantra.seq-live > span.on{color:var(--tape);}
.mantra.seq-live > span.on:last-child{color:var(--corner-hi);}
.track6.seq-live > li .h3{color:var(--dim);transition:color .35s var(--ease);}
.track6.seq-live > li.on .h3{color:var(--tape);}
.track6.seq-live > li::before{border-bottom-color:var(--line);transition:border-color .35s var(--ease);}
.track6.seq-live > li.on::before{border-bottom-color:var(--corner);}
.phases.seq-live > div{transition:border-color .35s var(--ease);}
.phases.seq-live > div .h3{color:var(--dim);transition:color .35s var(--ease);}
.phases.seq-live > div.on{border-top-color:var(--corner);}
.phases.seq-live > div.on .h3{color:var(--tape);}
.shape.seq-live div{transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease-out);}
.shape.seq-live div.on{transform:none;}

/* ---------- phones: photos as their own band, the words underneath ----------
   On a tall, narrow screen a wide photo behind the words can only show a thin
   slice of itself, and the words cover most of that (the home hero cropped
   Charlie out entirely; the kick photo pushed him into the corner under the
   headline). So on phones the photo sits on top, cropped on the person
   (--mpos per photo), fades into black, and the words follow below it. */
@media (max-width:700px){
  .hero{display:block;min-height:0;}
  .hero img.bg{position:relative;inset:auto;display:block;width:100%;height:min(58svh,520px);object-position:49% 26%;}
  .hero::before{top:0;bottom:auto;height:min(58svh,520px);
    background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,0) 62%);}
  .hero .wrap{position:relative;margin-top:-72px;padding-block:0 52px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 72px);}

  .ap-photo{display:block;min-height:0;}
  .ap-photo-img{position:relative;inset:auto;display:block;width:100%;height:min(62svh,560px);object-position:var(--mpos,50% 35%);}
  .ap-photo::before{top:0;bottom:auto;height:min(62svh,560px);
    background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 58%);}
  .ap-photo-copy{position:relative;margin-top:-64px;padding-block:0 clamp(56px,14vw,88px);
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 64px);}
}
@media (max-width:700px){
  /* the same for a page's opening photo (About, Retreats) */
  .pphoto{display:block;min-height:0;}
  .pphoto img.bg{position:relative;inset:auto;display:block;width:100%;height:min(58svh,520px);object-position:var(--mpos,50% 30%);}
  .pphoto::before{top:0;bottom:auto;height:min(58svh,520px);
    background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 32%,rgba(0,0,0,0) 60%);}
  .pphoto .wrap{position:relative;margin-top:-72px;padding-block:0 clamp(48px,12vw,72px);
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 72px);}
}

/* ---------- privacy page and the form's consent box (2 Oct 2026) ---------- */
.legal{display:flex;flex-direction:column;}
.legal-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,4vw,64px);
  padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--line2);}
.legal-row:last-child{border-bottom:1px solid var(--line2);}
.legal-row .h3{margin:4px 0 0;}
@media (max-width:760px){.legal-row{grid-template-columns:1fr;}}
.consent{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;margin-top:26px;}
.consent input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--corner);position:relative;}
.consent label{margin:0;font-size:15px;line-height:1.5;color:var(--chalk);text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;}
.consent a{color:var(--tape);text-underline-offset:3px;}
.resumed{margin-top:10px;font-size:14px;color:var(--chalk);}
.linkbtn{background:none;border:0;padding:0 4px;min-height:44px;color:var(--tape);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.formcard [aria-invalid="true"]{border-color:var(--corner-hi);}
.sent .btn{margin-top:6px;}
mark.gap{background:var(--corner);color:var(--tape);padding:0 6px;border-radius:2px;font-weight:500;}

/* ---------- app design layer — Oct 2026 ----------
   The apps' look, brought to the site where it fits: pill buttons, 22px cards
   and 14px inputs (the rounded layer), frosted panels with a lit top edge (the
   craft + glass layer), and the score card's red glow on the one card a page
   leads with. Same values as the apps. Still black + one red, no green. The
   editorial parts (ruled grids, tale of the tape, FAQ, photo bands) stay square
   on purpose: they're type on black, not cards. */
:root{
  --r-card:22px;--r-in:14px;
  --glass-top:rgba(52,43,47,.55);--glass-bot:rgba(22,19,21,.38);--glass-edge:rgba(255,255,255,.12);
}
.btn,.navlinks .navcta,.sticky a{border-radius:999px;}
.stepbar{border-radius:999px;}
.formcard input,.formcard select,.formcard textarea{border-radius:var(--r-in);}
.tier,.formcard,.sent,.ap-card{
  border-radius:var(--r-card);
  background-color:#0d0b0c;
  background-image:linear-gradient(168deg,var(--glass-top),var(--glass-bot));
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 14px 32px -20px #000;
}
/* the side bar would bend at a rounded corner: the red goes round the whole card instead */
.sent{border-color:var(--corner);}
/* the card a page leads with: red-lit and glowing into the black, like the apps' score card */
.tier.elite{
  background-color:#140809;
  background-image:linear-gradient(168deg,rgba(120,30,30,.42) 0%,rgba(60,16,16,.30) 55%,rgba(20,8,8,.2) 100%);
  border-color:rgba(181,38,38,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 26px 120px -18px rgba(159,33,33,.42), 0 10px 40px -12px rgba(159,33,33,.32);
}
/* the method's six parts: one rounded card, hairlines between */
.parts{border-radius:var(--r-card);overflow:hidden;}
/* typographic page heroes are top-lit in red and fade to black, as the apps' screens are */
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 80% at 50% 0%,rgba(120,26,26,.26) 0%,rgba(40,12,12,.08) 40%,rgba(0,0,0,0) 72%);
}

/* ---------- application: one question at a time — Oct 2026 ----------
   After Perspective's mobile funnels (Charlie, 28 Oct): one question per screen,
   multiple choice as big tap cards that move on by themselves, a progress bar that
   fills question by question. Same answers, same order of parts, same brand. */
.stepbar{background:linear-gradient(90deg,var(--corner) var(--fill,0%),#262626 0);}
.stepbar.on{background:linear-gradient(90deg,var(--corner) var(--fill,0%),#262626 0);}
.formcard form{margin-top:26px;}
@media (prefers-reduced-motion:no-preference){
  .formcard fieldset{animation:stepin .28s var(--ease-out) backwards;}
}
.partsub{font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.6;color:var(--chalk);margin:0 0 14px;}
.formcard .q{
  display:block;margin:0 0 20px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px);line-height:1.02;letter-spacing:.01em;color:var(--tape);text-wrap:balance;
}
.formcard .q + input,.formcard .q + textarea{margin-top:0;}
.formcard .q + .pair label:first-child,.formcard .q + label{margin-top:0;}
.choices{display:grid;gap:10px;}
.formcard .choice{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:58px;margin:0;padding:14px 16px 14px 18px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-in,14px);background:var(--mat);
  font-size:16px;font-weight:500;line-height:1.35;color:var(--tape);
  -webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s;
}
/* The radio covers the whole card, so the tap lands on it and it stays reachable by keyboard. */
.formcard .choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;border:0;}
.choice::after{
  content:"";flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);
  box-sizing:border-box;
}
.choice:active{opacity:.7;}
@media (hover:hover){.choice:hover{border-color:var(--chalk);}}
/* Chosen: red fill, white text and a ticked mark, so it never rests on colour alone. */
.formcard .choice:has(input:checked){background:var(--corner);border-color:var(--corner-hi);color:#fff;}
.choice:has(input:checked)::after{
  border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%239f2121' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.choice:has(input:focus-visible){outline:2px solid var(--corner-text);outline-offset:3px;}
.choices:has(input[aria-invalid="true"]) .choice{border-color:var(--corner-hi);}
.formnav.wait [data-next]{display:none !important;}
/* Tick boxes (28 Oct 2026). `.formcard input` above strips the browser's own look, which
   took the tick with it: a ticked box looked exactly like an empty one. Drawn here instead. */
.formcard .consent input[type=checkbox]{
  width:26px;height:26px;margin:1px 0 0;padding:0;border:1.5px solid var(--chalk);border-radius:8px;
  background:var(--mat);cursor:pointer;
}
.formcard .consent input[type=checkbox]:checked{
  border-color:var(--corner-hi);
  background:var(--corner) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4L19.5 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.formcard .consent input[type=checkbox]:focus-visible{outline:2px solid var(--corner-text);outline-offset:3px;}
.formcard .consent input[type=checkbox][aria-invalid="true"]{border-color:var(--corner-hi);}
.consent label{cursor:pointer;}