/* lm.css: the one stylesheet every lead-magnet page shares.
   Extracted from the 90-Day Map (map/index.html) on 2026-09-21. How to build a page on it: lm/README.md.

   Same look as the landing page (rate-card system): black and white, Helvetica Neue,
   tracked grey caps for labels, one yellow for the one action. These pages are long,
   so the reading column gets more air than the landing page does.

   Sections below: base, header, type, the content components (lists, stats, steps, boxes,
   the lifts table, phases, the screenshot card, YouTube rows), the gate, the hello note,
   the buttons, the sticky bar, the footer, print. */

:root{
  --ink:#14161a; --black:#000;
  --cta:#ffc400; --cta-deep:#e6ac00;
  --grey:#6b7280; --grey-2:#9aa0a6;
  --line:#e2e5e9; --soft:#f4f5f6; --bg:#fff;
  --wrap:660px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.caps{text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:11.5px}
.nw{white-space:nowrap}
/* .cta and friends set display, which would otherwise beat the hidden attribute */
[hidden]{display:none !important}

/* ---- header ---- */
.brand{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 16px}
.brand-l{display:flex; align-items:center; gap:14px}
.brand img{width:40px; height:auto; display:block}
.brand .t{text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:15px; line-height:1.3}
.brand a.book-sm{color:var(--ink); font-size:11.5px; text-decoration:none; border-bottom:2px solid var(--cta); padding-bottom:1px}
.rule{height:3px; background:var(--ink); border:0; margin:0 0 26px}

/* ---- type ---- */
.kicker{color:var(--grey); margin:0 0 10px}
h1{font-size:clamp(28px,7.4vw,42px); line-height:1.08; margin:0 0 12px; font-weight:800; letter-spacing:-.025em}
.sub{font-size:19px; color:var(--grey); margin:0 0 16px; line-height:1.45}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; color:var(--grey-2); margin:0 0 20px}
.meta button{font:inherit; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); border-bottom:2px solid var(--line)}

h2{font-size:clamp(23px,5.6vw,30px); line-height:1.15; margin:0 0 14px; font-weight:800; letter-spacing:-.02em}
h3{font-size:18px; margin:26px 0 8px; font-weight:800}
p{margin:0 0 14px}
section{padding:34px 0 8px; border-top:1px solid var(--line)}
section.first{border-top:0; padding-top:10px}
.num{display:block; color:var(--grey-2); margin:0 0 8px}

/* The table of contents. A gated chapter carries <span class="lk">(opens free)</span>,
   which disappears once the page is unlocked. */
.toc{background:var(--soft); padding:16px 18px; margin:6px 0 10px}
.toc ol{margin:8px 0 0; padding:0 0 0 20px; font-size:15.5px; line-height:1.9}
.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.toc .lk{color:var(--grey-2); font-size:12px; margin-left:6px}
.unlocked .toc .lk{display:none}

/* ---- content components ---- */
/* The brand's > list, borrowed from the post formats. ul.gt.no turns the > into an x. */
ul.gt{list-style:none; margin:0 0 16px; padding:0}
ul.gt li{position:relative; padding:0 0 0 22px; margin:0 0 8px}
ul.gt li::before{content:">"; position:absolute; left:0; top:0; font-weight:800}
ul.gt.no li::before{content:"x"; color:var(--grey-2)}
.two{display:grid; gap:4px 26px}
@media (min-width:640px){ .two{grid-template-columns:1fr 1fr} }

.stats{display:grid; gap:10px; margin:6px 0 16px}
@media (min-width:560px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stat{background:var(--ink); color:#fff; padding:16px 16px 14px}
.stat b{display:block; font-size:30px; line-height:1; letter-spacing:-.02em; margin:0 0 8px}
.stat span{font-size:14.5px; line-height:1.45; color:#d6d8dc; display:block}
.fine{font-size:14px; color:var(--grey)}

ol.steps{list-style:none; counter-reset:s; margin:0 0 18px; padding:0}
ol.steps > li{counter-increment:s; position:relative; padding:0 0 0 44px; margin:0 0 18px}
ol.steps > li::before{content:counter(s); position:absolute; left:0; top:1px; width:30px; height:30px; background:var(--ink); color:#fff; font-weight:800; display:grid; place-items:center; font-size:15px}
ol.steps b{display:block; margin:0 0 2px}

.box{border:2px solid var(--ink); padding:16px 18px 6px; margin:8px 0 18px}
.box .caps{display:block; margin:0 0 8px}
.callout{background:var(--soft); padding:14px 16px 4px; margin:0 0 12px}
.callout b{display:block; margin:0 0 4px}

/* A three-column table that folds into stacked rows on a phone. */
table.lifts{width:100%; border-collapse:collapse; margin:6px 0 10px; font-size:15.5px; line-height:1.45}
table.lifts th{text-align:left; background:var(--ink); color:#fff; padding:8px 10px; text-transform:uppercase; letter-spacing:.14em; font-size:11px}
table.lifts td{border-bottom:1px solid var(--line); padding:10px; vertical-align:top}
table.lifts td:first-child{font-weight:700; width:34%}
@media (max-width:520px){
  table.lifts thead{display:none}
  table.lifts, table.lifts tbody, table.lifts tr, table.lifts td{display:block; width:auto !important}
  table.lifts tr{border-bottom:1px solid var(--line); padding:10px 0}
  table.lifts td{border:0; padding:2px 0}
  table.lifts td:nth-child(2){font-weight:600}
  table.lifts td:nth-child(3){color:var(--grey)}
}

.phase{border-left:4px solid var(--ink); padding:2px 0 2px 16px; margin:0 0 20px}
.phase .caps{display:block; color:var(--grey); margin:0 0 4px}
.phase h3{margin:0 0 6px}

/* The scorecard is built to be screenshotted: fixed width block, high contrast, the URL on it */
.card{background:var(--ink); color:#fff; padding:20px 20px 14px; max-width:420px; margin:6px 0 14px}
.card .caps{display:block; color:var(--cta); margin:0 0 12px}
.card table{width:100%; border-collapse:collapse; font-size:15px}
.card td{padding:9px 0; border-bottom:1px solid #2c3036; vertical-align:top}
.card td + td{text-align:right; font-weight:700; padding-left:12px}
.card .foot{font-size:12px; color:#9aa0a6; margin:12px 0 0; letter-spacing:.04em}

.yt{display:grid; gap:12px; margin:8px 0 14px}
.yt a{display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:center; text-decoration:none; color:var(--ink)}
.yt img{width:132px; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--soft)}
.yt span{font-weight:700; font-size:15.5px; line-height:1.35}
.yt small{display:block; color:var(--grey); font-weight:400; font-size:13px; margin-top:3px}
.yt-one{margin:4px 0 18px}

/* ---- the gate ---- */
.gate{background:var(--soft); padding:22px 18px 18px; margin:10px -20px 0; border-top:3px solid var(--ink)}
@media (min-width:700px){ .gate{margin:10px 0 0; padding:26px} }
.gate h2{margin-bottom:10px}
.q{margin:16px 0 0}
fieldset.q{border:0; padding:0; margin:16px 0 0; min-width:0}
.q > .ql{display:block; font-weight:700; margin:0 0 8px; font-size:16px}
.q input[type=text], .q input[type=email]{
  width:100%; font:inherit; font-size:17px; padding:14px 14px; border:2px solid var(--ink); border-radius:2px; background:#fff; color:var(--ink);
}
.q input:focus{outline:3px solid var(--cta); outline-offset:1px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{display:inline-block; border:2px solid var(--ink); background:#fff; padding:10px 13px; font-size:15px; font-weight:600; cursor:pointer; border-radius:2px; line-height:1.2}
.chips input:checked + span{background:var(--ink); color:#fff}
.chips input:focus-visible + span{outline:3px solid var(--cta); outline-offset:2px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.err{color:#b42318; font-weight:600; font-size:15px; margin:12px 0 0; min-height:1px}
.gate .cta{margin-top:18px; width:100%; border:0; cursor:pointer; font-family:inherit}
.gate .cta[disabled]{opacity:.6; cursor:wait}
.gate .fine{margin:10px 0 0; text-align:center}

/* body.locked hides everything inside .gated; lm.js swaps it to body.unlocked */
.gated{display:block}
.locked .gated{display:none}
.unlocked .gate{display:none}

/* ---- the hello note, shown once, right after a form unlock ---- */
.hello{background:var(--ink); color:#fff; padding:18px 18px 8px; margin:24px 0 0}
.hello p{color:#e8e9eb}
.hello .hello-k{color:var(--cta); margin:0 0 8px}
.hello .cta{margin:4px 0 12px}
/* The line lm.js adds under the hello note: where the email went, or, when the server could not
   store him, "Saved on this phone..." with the keyword to DM. Outside a hello note it sits at the
   top of .gated. */
.lm-note{font-size:14.5px; line-height:1.5; margin:0 0 14px}
.hello .lm-note{color:#c9ccd1}
.lm-warn{border-left:3px solid var(--cta); padding:2px 0 2px 12px; color:var(--ink); font-weight:600}
.hello .lm-warn{color:#fff}

/* ---- the one action, same as the landing page ---- */
.cta{
  display:block; text-align:center; text-decoration:none;
  background:var(--cta); color:var(--ink); padding:20px;
  text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:17px;
  border-radius:2px; transition:background .15s ease, transform .06s ease;
}
.cta:hover{background:var(--cta-deep)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.cta-note{text-align:center; color:var(--grey); font-size:13.5px; margin:10px 0 0}
.cta-dm{
  display:block; text-align:center; text-decoration:none; margin-top:10px;
  background:#fff; color:var(--ink); border:2px solid var(--ink); padding:17px 20px;
  text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:15px; border-radius:2px;
}
.cta-dm:hover{background:var(--soft)}
.dm-note{text-align:center; color:var(--grey); font-size:13px; margin:8px 0 0; line-height:1.5}
.dm-note b, .dm-note a{color:var(--ink)}

/* Sticky ask on phones. Appears once [data-sticky-start] has scrolled past, hides over the
   form, the hello note and the offer, so it never sits on top of the thing it points to. */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:2px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .2s ease;
}
.sticky.on{transform:none}
.sticky span{font-size:14px; font-weight:700; line-height:1.3}
.sticky a{flex:none; background:var(--cta); color:var(--ink); text-decoration:none; padding:12px 14px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:12.5px; border-radius:2px}
@media (min-width:900px){ .sticky{display:none} }

/* ---- the booking spot (#book) ----
   The Cal.com calendar sits inline. .cal-loading shows a placeholder, .cal-ready the calendar,
   .cal-failed hides the frame and turns the fallback link into the big button. */
.book{background:var(--soft); margin:18px -20px 0; padding:30px 20px 22px; border-top:3px solid var(--ink)}
@media (min-width:700px){ .book{margin:18px 0 0; padding:30px 26px 24px} }
.book .book-what{margin:4px 0 6px}
.book .goals{margin:14px 0 16px}
#calInline{min-height:120px; margin:6px 0 0; background:#fff; overflow:hidden}
.cal-loading #calInline{min-height:420px; display:flex; align-items:center; justify-content:center; color:var(--grey); font-size:14px}
.cal-loading #calInline:empty::before{content:"Loading the calendar..."}
.cal-ready #calInline{min-height:0}
.book-fallback{display:block; text-align:center; color:var(--grey); font-size:14px; margin:12px 0 0}
.cal-failed #calInline{display:none}
.cal-failed .book-fallback{background:var(--cta); color:var(--ink); padding:20px; text-decoration:none; text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:17px; border-radius:2px}

/* ---- the tools (each page's own .js fills them) ---- */
.tool{border:2px solid var(--ink); padding:18px 16px 8px; margin:8px 0 18px; background:#fff}
.tool .caps{display:block; color:var(--grey); margin:0 0 10px}
.qa{margin:0 0 18px}
.qa .qt{font-weight:700; margin:0 0 8px; line-height:1.4}
.qa .qn{color:var(--grey-2); font-weight:700; margin-right:6px}
.progress{height:6px; background:var(--line); margin:0 0 16px}
.progress span{display:block; height:100%; width:0; background:var(--ink); transition:width .2s ease}
.bars{margin:6px 0 16px}
.bar{display:grid; grid-template-columns:118px 1fr 34px; gap:10px; align-items:center; margin:8px 0; font-size:14.5px}
.bar i{display:block; height:10px; background:#3a3f46}
.bar i b{display:block; height:100%; background:#fff}
.bar.weak i b{background:var(--cta)}
.bar em{font-style:normal; text-align:right; font-weight:700}
.result{background:var(--ink); color:#fff; padding:20px 18px 8px; margin:8px 0 18px}
.result .caps{display:block; color:var(--cta); margin:0 0 8px}
.result p, .result li{color:#e8e9eb}
.result h3{color:#fff; margin:6px 0 10px}
.result ul.gt li::before{color:var(--cta)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:12px 12px; margin:0 0 14px}
.fields .wide{grid-column:1 / -1}
.field label{display:block; font-weight:700; font-size:14px; margin:0 0 4px; line-height:1.3}
.field input, .field select{width:100%; font:inherit; font-size:17px; padding:10px 11px; border:2px solid var(--ink); border-radius:2px; background:#fff; color:var(--ink); min-width:0}
.field input:focus, .field select:focus{outline:3px solid var(--cta); outline-offset:1px}
.field small{display:block; color:var(--grey); font-size:12.5px; margin-top:3px}
.readout{margin:4px 0 16px}
.rrow{border-bottom:1px solid var(--line); padding:12px 0}
.rrow .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-weight:800}
.rrow p{margin:6px 0 0; font-size:15.5px}
.rrow .pills{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.rrow .ask{color:var(--grey); font-size:14.5px}
.pill{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; padding:3px 8px; border:2px solid var(--ink); border-radius:2px; white-space:nowrap; line-height:1.4}
.pill.ok{background:#fff}
.pill.watch{background:var(--cta); border-color:var(--cta)}
.pill.high{background:var(--ink); color:#fff}
.pill.none{border-color:var(--line); color:var(--grey-2)}
.btn2{display:inline-block; font:inherit; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; padding:12px 14px; border:2px solid var(--ink); background:#fff; color:var(--ink); border-radius:2px; cursor:pointer; text-decoration:none; margin:4px 8px 8px 0}
.btn2:hover{background:var(--soft)}
.btn2.dark{background:var(--ink); color:#fff}
/* the split's log: inputs inside the lifts table */
.log{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px}
.log input{width:62px; font:inherit; font-size:15px; padding:6px; border:1.5px solid var(--ink); border-radius:2px; background:#fff; color:var(--ink)}
.log .x{color:var(--grey-2); font-size:13px}
.next{display:block; font-size:13.5px; color:var(--grey); margin-top:6px}
.next b{color:var(--ink)}
.cue{display:block; font-size:13.5px; color:var(--grey); font-weight:400; margin-top:4px; line-height:1.4}
/* the marker tracker */
table.track{width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; margin:6px 0 12px}
table.track th{text-align:left; background:var(--ink); color:#fff; padding:8px 6px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
table.track td{border-bottom:1px solid var(--line); padding:6px 4px; vertical-align:middle}
table.track th:first-child{width:36%}
table.track td:first-child{font-weight:700; overflow-wrap:anywhere; font-size:13.5px; line-height:1.3}
table.track input{width:100%; font:inherit; font-size:14px; padding:6px 4px; border:1.5px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); min-width:0}
table.track input:focus{border-color:var(--ink); outline:none}
/* the week builder */
.week{display:grid; gap:6px; margin:6px 0 16px}
.day{display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:start; border:1.5px solid var(--line); padding:10px}
.day.on{border-color:var(--ink); background:var(--soft)}
.day b{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase}
.day span{font-size:15px; line-height:1.4}
.day small{display:block; color:var(--grey); font-size:13px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:18px 0 90px; color:var(--grey-2); margin-top:30px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px}
.foot a{color:var(--grey-2); text-decoration:none}
.disc{font-size:12.5px; color:var(--grey); margin:12px 0 0}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} html{scroll-behavior:auto} }

/* ---- save as PDF ---- */
@media print{
  .sticky, .gate, .meta button, .brand a.book-sm, .cta-dm, .dm-note, .hello .cta, #calInline, .goals, .btn2, .book-fallback{display:none !important}
  .tool, .result, .rrow{break-inside:avoid-page}
  .result, .pill, .bar i, .bar i b{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body{font-size:12pt}
  section{break-inside:avoid-page}
  .card, .stat, .hello{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  a.cta{background:none; border:2px solid #000; padding:10px}
  /* --print-apply is set by lm.js from the host the page is served on (join.missiontraining.co after the move). */
  a.cta::after{content:" " var(--print-apply, "join.missiontraining.co/apply"); text-transform:none; letter-spacing:0; font-weight:400}
}