/* TC Coaching: sections shared by the rebuilt pages. Loaded only by the pages that
   use them. The rule for all of it: the page is complete in the HTML, and movement
   only ever adds to it. */

/* The kicker's counter, so a long page always says where you are. */
.kicker__n{color:var(--muted-2);margin-right:10px;letter-spacing:2px}

/* ---------- The three pillars, stacking ---------- */
.stack{display:grid;gap:18px;margin-top:36px}
.pcard{--pc:var(--blue);background:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-areas:'art' 'body' 'out';box-shadow:0 -22px 50px -30px rgba(0,0,0,.95)}
.pcard--o{--pc:var(--orange)} .pcard--p{--pc:var(--pink)}
/* The banners carry their own lettering, so they are never cropped. */
.pcard__art{grid-area:art}
.pcard__art img{width:100%;height:auto}
.pcard__body{grid-area:body;padding:24px 24px 0}
.pcard__tag{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;
  background:var(--pc);color:#001018;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:1.3rem;margin-bottom:12px}
.pcard h3{font-size:clamp(1.7rem,3vw,2.4rem);text-transform:uppercase}
.pcard__lede{color:var(--white);margin:8px 0 12px;line-height:1.45}
.pcard ul{list-style:none;display:grid;gap:7px}
.pcard li{padding-left:18px;position:relative;color:var(--muted);font-size:.95rem;line-height:1.45}
.pcard li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--blue);transform:rotate(45deg)}
.pcard__out{grid-area:out;margin:14px 24px 24px;padding-top:12px;border-top:1px solid var(--line);color:var(--white);font-size:.95rem;line-height:1.45}
.pcard-credit{margin-top:14px;text-align:center;font-size:.72rem;line-height:1.5;color:var(--muted-2)}
.pcard-credit a{color:inherit;text-decoration:underline}
.pcard__out b{display:block;font:600 .85rem/1.4 'Saira Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}

/* The stack only stacks where a whole card fits on the screen. */
@media (min-width:860px) and (min-height:680px){
  .stack{gap:30px}
  .pcard{position:sticky;top:calc(86px + var(--n)*16px);grid-template-columns:44% 1fr;grid-template-rows:auto 1fr;
    grid-template-areas:'art body' 'out body'}
  .pcard__body{padding:28px 34px}
  .pcard__out{margin:0;padding:16px 22px 20px;border-top:0}
  .pcard__out b{margin-bottom:2px}
}

/* ---------- Page opener with a person in it ---------- */
.opener{display:grid;gap:30px;align-items:center;position:relative;z-index:2;text-align:left}
.opener .crumbs{justify-content:flex-start}
.opener .lead{text-align:left;margin:16px 0 0;max-width:640px}
.opener .hand{margin-top:12px;font-size:clamp(1.7rem,3vw,2.5rem)}
.opener .polaroid{max-width:300px;margin:0 auto;--tilt:3deg}
.opener .eyebrow{margin-bottom:16px}

/* ---------- What happens when: the plan against the system ---------- */
.moments{margin-top:30px}
.moments__picks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.moments__pick{font:700 1rem/1.15 'Saira Condensed',sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--white);
  background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 15px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.moments__pick:hover{transform:translateY(-2px);border-color:rgba(0,164,255,.45)}
.moments__pick[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#001018}
.moments__pick:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.moments__picks{display:none}
.has-moments .moments__picks{display:flex}
.moment{display:grid;gap:12px;margin-bottom:12px}
.moment__head{font:700 1.3rem/1.15 'Saira Condensed',sans-serif;text-transform:uppercase}
.has-moments .moment__head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.has-moments .moment[hidden]{display:none}
.moment__side{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.moment__side small{display:block;font:600 .85rem/1.3 'Saira Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.moment__side p{color:var(--muted);line-height:1.45}
.moment__side--sys{border-color:rgba(0,164,255,.45);background:linear-gradient(135deg,rgba(0,164,255,.12),var(--ink))}
.moment__side--sys small{color:var(--blue)}
.moment__side--sys p{color:var(--white);font-weight:500}
.has-moments .moment:not([hidden]) .moment__side--sys{animation:tc-momentin .4s cubic-bezier(.22,.61,.36,1)}
@keyframes tc-momentin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- The course: a journey you can see yourself moving along ---------- */
.course{--line-x:15px;position:relative;margin-top:44px;display:grid;gap:22px}
.course::before,.course__done{content:"";position:absolute;left:var(--line-x);top:8px;bottom:8px;width:4px;border-radius:4px;margin-left:-2px}
.course::before{background:rgba(255,255,255,.1)}
.course__done{background:var(--blue);box-shadow:0 0 14px var(--blue-glow);transform:scaleY(var(--p,1));transform-origin:top}
.leg{position:relative;padding-left:46px}
.leg__dot{position:absolute;left:var(--line-x);top:26px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--black);
  border:4px solid var(--blue);box-shadow:0 0 0 5px var(--black);transition:background .3s,transform .3s}
.leg.is-passed .leg__dot,.course:not(.is-live) .leg__dot{background:var(--blue)}
.leg.is-passed .leg__dot{transform:scale(1.12)}
.leg .tl{border-left:1px solid var(--line);transition:border-color .3s}
.leg.is-passed .tl{border-color:rgba(0,164,255,.45)}
.leg--future .leg__dot{border-color:var(--green)}
.leg--future.is-passed .leg__dot,.course:not(.is-live) .leg--future .leg__dot{background:var(--green)}
.leg--future.is-passed .tl{border-color:rgba(54,211,153,.45)}
.course__end{padding-left:46px;margin-top:-4px}

@media (min-width:860px){
  .opener{grid-template-columns:minmax(0,1fr) 300px;gap:56px}
  .opener .polaroid{margin:0}
  .moment{grid-template-columns:1fr 1fr}
  .moment__head{grid-column:1/-1}
  .moment__side{padding:26px 28px}
  .course{--line-x:50%;gap:34px 0}
  .leg{width:50%;padding:0 44px 0 0}
  .leg .tl{margin:0}
  .leg__dot{left:auto;right:-11px;margin-left:0}
  .leg:nth-of-type(even){margin-left:50%;padding:0 0 0 44px}
  .leg:nth-of-type(even) .leg__dot{left:-11px;right:auto}
  .course__end{padding-left:0;text-align:center}
}

/* ---------- The film grows into place as you reach it ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .video--lg{animation:tc-grow linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes tc-grow{from{transform:scale(.84);opacity:.45}to{transform:none;opacity:1}}
  }
}

/* ---------- A leg of the course with a picture on it ---------- */
.tl--photo{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center}
.tl--photo .polaroid figcaption{font-size:1.02rem;padding:6px 1px 8px}
.tl--photo .polaroid{padding:6px 6px 0}
.tl--photo ul{gap:8px}
@media (max-width:859px){
  .tl--photo{grid-template-columns:1fr}
  .tl--photo .polaroid{max-width:190px}
  .tl--photo .polaroid figcaption{font-size:1.15rem}
}
@media (min-width:860px){
  .tl--photo{grid-template-columns:150px 1fr;gap:24px}
  .tl--photo .polaroid figcaption{font-size:1.2rem}
}

/* ---------- The team's own lines, in the hand ---------- */
.member blockquote{font-family:'Caveat','Segoe Script',cursive;font-weight:700;font-style:normal;color:var(--blue);
  font-size:1.42rem;line-height:1.14;border:0;padding:0;background:none;transform:rotate(-.8deg);margin-top:14px}

/* ---------- The honest check: tick what sounds like you ---------- */
.checknote{display:none}
.has-check .checknote{display:block;margin-top:24px;text-align:center}
.checknote .hand{margin-left:auto;margin-right:auto;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08}
.checknote svg{display:block;width:50px;height:54px;margin:4px auto 0;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.has-check .forwho{margin-top:10px}
.has-check .forwho__col ul{gap:6px}
.has-check .forwho__col li{cursor:pointer;border-radius:8px;padding:10px 10px 10px 50px;transition:background .2s,color .2s}
.has-check .forwho__col li::before{content:none}
.has-check .forwho__col li:hover{background:rgba(255,255,255,.05)}
/* The boxes are drawn by hand and empty until the reader ticks one. */
.tick{position:absolute;left:10px;top:9px;width:28px;height:28px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tick__box{stroke:rgba(255,255,255,.7);stroke-width:2.2;transition:stroke .2s}
.tick__mark{stroke:var(--blue);stroke-width:3.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .26s ease-out,opacity .05s}
.forwho__col--no .tick__mark{stroke:var(--red)}
.forwho__col li:hover .tick__box{stroke:var(--white)}
.forwho__col li[aria-checked="true"] .tick__mark{stroke-dashoffset:0;opacity:1}
.forwho__col--yes li[aria-checked="true"] .tick__box{stroke:var(--blue)}
.forwho__col--no li[aria-checked="true"] .tick__box{stroke:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .has-check:not(.has-ticked) .tick{animation:tc-nudge 3.6s ease-in-out infinite}
  .has-check:not(.has-ticked) li:nth-child(2) .tick{animation-delay:.18s}
  .has-check:not(.has-ticked) li:nth-child(3) .tick{animation-delay:.36s}
  .has-check:not(.has-ticked) li:nth-child(4) .tick{animation-delay:.54s}
  .has-check:not(.has-ticked) li:nth-child(5) .tick{animation-delay:.72s}
  @keyframes tc-nudge{0%,78%,100%{transform:none}84%{transform:rotate(-7deg) scale(1.12)}92%{transform:rotate(5deg) scale(1.06)}}
}
.has-check .forwho__col li:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.has-check .forwho__col--yes li[aria-checked="true"]{background:rgba(0,164,255,.12);color:var(--white)}
.has-check .forwho__col--no li[aria-checked="true"]{background:rgba(255,90,90,.12);color:var(--white)}
.checkresult{display:none;margin:24px auto 0;max-width:640px;text-align:center}
.has-check .checkresult{display:block}
.checkresult__meter{display:flex;gap:6px;max-width:260px;margin:0 auto 14px}
.checkresult__meter i{flex:1;height:9px;border-radius:3px;background:rgba(255,255,255,.1);transition:background .25s}
.checkresult__meter i.on{background:var(--blue);box-shadow:0 0 12px -2px var(--blue-glow)}
.checkresult.is-no .checkresult__meter i.on{background:var(--muted-2);box-shadow:none}
.checkresult .hand{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:12px}
/* It appears on a tap, not on the scroll, so it must not wait for the scroll to write it. */
html:not(.m) .checkresult .hand{-webkit-mask:none;mask:none;animation:none}
.checkresult .hand--block{margin-left:auto;margin-right:auto}
.checkresult .btn{margin-top:4px}
.has-check .forwho__close{display:none}

/* ---------- People like you ---------- */
.likeyou{display:grid;gap:16px;margin-top:30px}
.likeyou blockquote{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;
  color:var(--white);font-size:1rem;line-height:1.5;transition:transform .25s,border-color .25s}
.likeyou blockquote:hover{transform:translateY(-4px);border-color:rgba(0,164,255,.45)}
.likeyou cite{display:flex;align-items:center;gap:12px;font-style:normal;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:auto}
.likeyou cite b{display:block;color:var(--white);font:700 1.1rem/1.2 'Saira Condensed',sans-serif;text-transform:uppercase}
.likeyou img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
@media (min-width:720px){.likeyou{grid-template-columns:repeat(3,1fr)}}

/* ---------- The Delivery: nine steps on one line ---------- */
.easy{max-width:820px;margin:0 auto;padding:22px 26px;border-radius:16px;border:1px solid rgba(0,164,255,.3);background:rgba(0,164,255,.07);text-align:center}
.easy b{display:block;font:700 1.7rem/1.1 'Caveat','Segoe Script',cursive;color:var(--blue);margin-bottom:8px}
.easy p{color:var(--muted);line-height:1.65}
.easy p+p{margin-top:10px}
.easy strong{color:var(--white)}
.delivery-easy{padding-bottom:0}
.delivery-pillars{padding-bottom:0}

/* Where you are, held under the nav while you are in the steps. */
.stepstrip{display:flex;gap:4px;list-style:none;margin:30px -24px 0;padding:10px 24px;position:sticky;top:var(--flow-top,72px);z-index:20;
  overflow-x:auto;scrollbar-width:none;background:rgba(5,6,8,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stepstrip::-webkit-scrollbar{display:none}
.stepstrip li{flex:0 0 auto}
.stepstrip a{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--ink);text-decoration:none;
  transition:background .2s,border-color .2s}
.stepstrip b{font:800 .85rem/1 'Saira Condensed',sans-serif;letter-spacing:.06em;color:var(--blue)}
.stepstrip span{font-size:.76rem;line-height:1.2;color:var(--muted);white-space:nowrap}
.stepstrip a:hover{border-color:rgba(0,164,255,.55)}
.stepstrip a.is-on{background:var(--blue);border-color:var(--blue)}
.stepstrip a.is-on b,.stepstrip a.is-on span{color:#001018}
.stepstrip a.is-on span{font-weight:600}

.course--left{margin-top:26px;gap:clamp(44px,6vw,72px)}
.step{scroll-margin-top:150px}
.step__copy>p{color:var(--muted);line-height:1.65;margin-bottom:12px}
.step__copy p strong{color:var(--white)}
.step__copy a{color:var(--blue)}
.step__n{display:block;font:700 .85rem/1 'Saira Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.step h3{font-size:clamp(1.55rem,3.2vw,2.3rem);line-height:1.12;text-transform:uppercase;margin-bottom:12px}
.step__more p{color:var(--muted);line-height:1.65;margin-bottom:12px}
.has-steps .step__more{display:none}
.has-steps .step__more.is-open{display:block}
.step__toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 0;margin-bottom:12px;cursor:pointer;
  font:700 .95rem/1 'Saira Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.step__toggle::before{content:"+";font-size:1.25rem;line-height:.8}
.step__toggle[aria-expanded="true"]::before{content:"\2212"}
.step__toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* The closing line of each step, in the hand. */
.step__quote{margin-top:6px;color:var(--muted);line-height:1.55;font-size:.95rem}
.step__quote b{display:block;font:700 1.55rem/1.1 'Caveat','Segoe Script',cursive;color:var(--blue);transform:rotate(-1deg);transform-origin:left center;margin-bottom:5px}

.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.shot figcaption{margin-top:10px;font-size:.84rem;color:var(--muted-2);line-height:1.45}
.shot__zoom{display:block;position:relative;width:100%;padding:0;background:none;border:0;border-radius:14px;cursor:zoom-in}
.shot__zoom::after{content:"+";position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(5,6,8,.82);border:1px solid rgba(255,255,255,.28);
  color:var(--white);font:700 1.15rem/25px 'Inter',sans-serif;text-align:center}
.shot__zoom:hover img{border-color:rgba(0,164,255,.55)}
.shot__zoom:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* Tall screens stay small enough to scroll past; the full size is a tap away. */
.shot--phone .shot__zoom,.shot--phone>img{max-width:230px;margin:0 auto}
.shot--tall .shot__zoom,.shot--tall>img{max-width:340px;margin:0 auto}
.shot--phone figcaption,.shot--tall figcaption{text-align:center}
.msgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.msgs img{border-radius:12px}

.zoom{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(5,6,8,.96);overflow:auto}
.zoom::backdrop{background:rgba(5,6,8,.96)}
.zoom img{display:block;width:auto;max-width:min(100%,1400px);height:auto;margin:auto;padding:58px 12px 20px;box-sizing:border-box}
.zoom.is-wide img{max-width:none;width:1000px}
.zoom__close{position:fixed;top:12px;right:12px;font:700 .95rem/1 'Saira Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--white);
  background:var(--ink);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:10px 14px;cursor:pointer}

.delivery-data{padding-top:0}
.datablock{border:1px solid rgba(0,164,255,.28);background:rgba(0,164,255,.05);border-radius:18px;padding:clamp(24px,4vw,42px)}
.datablock .shot{margin-top:26px}
.datablock .hand{margin-top:10px}
.datagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:26px}
.datagrid b{display:block;font:700 1.1rem/1.2 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.datagrid p{font-size:.92rem;color:var(--muted);line-height:1.6}

.ongoing{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin-top:34px}
.og{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.og b{display:block;font:700 1.1rem/1.2 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.og p{font-size:.92rem;color:var(--muted);line-height:1.6}
.delivery-end{margin-top:46px}
.delivery-end .hand{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:30px;margin-bottom:24px}
.delivery-end__small{margin-top:16px;font-size:.86rem;color:var(--muted-2)}

@media (min-width:860px){
  .course--left{--line-x:13px}
  .course--left .leg,.course--left .leg:nth-of-type(even){width:auto;margin-left:0;padding:0 0 0 46px}
  .course--left .leg__dot,.course--left .leg:nth-of-type(even) .leg__dot{left:var(--line-x);right:auto;margin-left:-11px}
  .step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:start}
  .stepstrip{margin-left:0;margin-right:0;padding-left:0;padding-right:0;justify-content:center}
}
@media (max-width:859px){
  .step .shot{margin-top:18px}
}

/* ---------- Results ---------- */
.handarrow{margin-top:44px;text-align:center}
.handarrow .hand{margin-left:auto;margin-right:auto;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08}
.handarrow svg{display:block;width:44px;height:48px;margin:2px auto 0;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.results-reel{position:relative;z-index:2}
.results-reel .videos{margin-top:10px;margin-bottom:0}
.picker{margin-top:26px;text-align:center}
.picker__chips{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.picker__say{display:none}
.picker.is-live .picker__chips{display:flex}
.picker.is-live .picker__say{display:block;margin:0 auto;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1}
.picker__chip{font:700 1rem/1.15 'Saira Condensed',sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--white);
  background:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 16px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.picker__chip:hover{transform:translateY(-2px);border-color:rgba(0,164,255,.45)}
.picker__chip.is-on{background:var(--blue);border-color:var(--blue);color:#001018}
.picker__chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.picker__swipe{display:block;margin:12px auto 0;font-size:1.5rem;line-height:1.1}
@media (min-width:700px){.picker__swipe{display:none}}
.robstory{display:grid;gap:40px;align-items:center;position:relative;z-index:2}
.robstory__shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:0 auto;width:100%}
.robstory .hand{margin-top:12px;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1}
.robstory__q{margin:22px 0 22px;padding-left:18px;border-left:3px solid var(--blue)}
.robstory__q p{margin:0;color:var(--white);font-size:1.08rem;line-height:1.55}
.bigq{display:grid;gap:clamp(34px,6vw,64px);max-width:900px;margin:clamp(40px,6vw,72px) auto clamp(44px,6vw,72px)}
.bigq__item p{margin:0;font-family:'Saira Condensed',sans-serif;font-weight:800;color:var(--white);font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.18}
.bigq__item cite{display:block;margin-top:8px;font-style:normal;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.1}
.bigq__item:nth-child(even){text-align:right}
#thankyou:not([hidden])~#resultsEnd{display:none}
@media (min-width:860px){
  .robstory{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px)}
}

/* Adam's handle will not fit on one line on a phone, and held on one line it stretched every card past the screen. */
@media (max-width:480px){.member__role{white-space:normal}}

/* About: the Army years, earliest first. */
.armywall{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;align-items:center;max-width:980px;margin:34px auto 40px}
.armywall__wide{grid-column:span 2}
.armywall .polaroid figcaption{font-size:1.2rem}
@media (min-width:860px){
  .armywall{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
  .armywall .polaroid{width:calc(25% - 17px)}
}