/* ADAPT minimum effective dose builder. Rides on the main styles.css tokens. */

.lm .nav-inner{gap:16px}
.lm .nav-cta{margin-left:auto}

/* ---------- intro (cold traffic landing) ---------- */
.lm-hero{padding:calc(var(--nav-h) + 64px) 0 0; position:relative; overflow:hidden}
.lm-hero::after{
  content:''; position:absolute; top:-14%; right:-8%; width:70vw; height:76vh;
  background:radial-gradient(ellipse, rgba(199,168,100,.13), transparent 62%);
  pointer-events:none; z-index:0;
}
.lm-hero > *{position:relative; z-index:1}

.lmh-top{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,72px);
  align-items:center; padding-bottom:clamp(56px,7vw,88px)}
/* text-wrap:balance is load-bearing. "You're probably doing" is wider than the
   column, so it wraps, and left to itself the browser strands "doing" alone on
   line 2 and leaves a hole most of the column wide. Balancing evens the lines
   out at every width, which a hard <br> cannot do. */
.lm-hero h1{font-size:clamp(32px,4.7vw,52px); line-height:1.04; letter-spacing:-.02em; margin-bottom:24px;
  text-wrap:balance}
.lm-hero .lede{color:var(--fg-2); font-size:17px; line-height:1.7; max-width:540px; margin:0 0 16px}
.lm-hero .lede-2{margin-bottom:30px}
.trust{margin-top:16px; font-family:var(--font-display); font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.15em; color:var(--fg-3)}
.cite{margin-top:22px; font-size:12px; color:var(--fg-3)}

/* output preview: show the deliverable rather than describing it */
.lmh-preview{position:relative}
.prev-tag{display:block; font-family:var(--font-display); font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--bronze-400); margin-bottom:12px}
.prev-card{background:var(--bg-2); border:1px solid var(--line-2); border-radius:4px;
  padding:26px 24px 0; position:relative; overflow:hidden; max-height:430px;
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.prev-head{display:flex; align-items:baseline; gap:11px; padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.prev-head span{font-family:var(--font-display); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--bronze-400)}
.prev-head b{font-family:var(--font-display); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.02em}
.prev-ex{padding:14px 0; border-top:1px solid rgba(255,255,255,.05)}
.prev-ex:first-of-type{border-top:0}
.prev-ex b{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
.prev-ex p{display:flex; flex-wrap:wrap; gap:5px}
.prev-ex p span{font-size:10.5px; color:var(--fg-3); background:var(--bg-3);
  border:1px solid var(--line); border-radius:3px; padding:3px 7px}
.prev-ex .pt{color:var(--bronze-300); border-color:var(--bronze-800)}
/* The teaser has to look like a real row. The demo pill and the effort chip are two
   of the reasons the week is worth having, and leaving them out undersold it. Static
   markup, not buttons: the whole card is aria-hidden and decorative. */
.prev-ex .pr{color:var(--fg-2)}
.prev-ex .pw{
  display:inline-flex; align-items:center; gap:5px; vertical-align:baseline;
  margin-left:8px; padding:2px 8px 2px 7px;
  background:rgba(199,168,100,.12); border:1px solid var(--bronze-700); border-radius:100px;
  color:var(--bronze-300); font-family:var(--font-body); font-weight:700;
  font-size:9px; letter-spacing:.05em; text-transform:uppercase;
}
.prev-ex .pw i{
  width:0; height:0; border-style:solid; border-width:3px 0 3px 5px;
  border-color:transparent transparent transparent currentColor;
}
.prev-ex.dim{opacity:.5}
.prev-fade{position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, transparent, var(--bg-2) 82%)}

/* the dose, in numbers */
.lmh-dose{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(48px,6vw,72px) 0}
.lmh-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.lmh-stats > div{background:var(--bg-2); padding:28px 26px 30px}
.lmh-stats b{display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(42px,5vw,62px); line-height:.9; letter-spacing:-.045em;
  color:var(--bronze-400); margin-bottom:12px}
/* The second half of a range ("-45", "-4") is one number, not a footnote. It
   matches the number it follows in size, weight, color and tracking; the <i>
   is only here because the HTML marks the range up that way. */
.lmh-stats b i{font-style:normal}
.lmh-stats span{font-family:var(--font-display); font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--fg-2)}
.lmh-cite{margin-top:26px; color:var(--fg-3); font-size:14.5px; line-height:1.7; max-width:720px}
.lmh-cite span{display:inline-block; margin-left:8px; font-family:var(--font-display); font-weight:700;
  font-size:9.5px; letter-spacing:.16em; color:var(--bronze-600)}

/* philosophy + what you get */
.lmh-why{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px);
  padding:clamp(64px,8vw,96px) var(--pad); align-items:start}
.lmh-floor h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3vw,36px); line-height:1.06; letter-spacing:-.018em; margin-bottom:20px}
.lmh-floor h2 br{display:inline !important}
.lmh-floor p{color:var(--fg-2); font-size:16px; line-height:1.7; margin-bottom:16px}
.lmh-kicker{color:var(--fg) !important; font-weight:600;
  border-left:2px solid var(--bronze-500); padding-left:18px; margin-top:22px !important}
.lmh-get h3{font-size:15px; letter-spacing:.1em; margin-bottom:20px; color:var(--bronze-400)}
.lmh-get ul{list-style:none; padding:0; margin:0}
.lmh-get li{padding:16px 0 16px 30px; border-top:1px solid var(--line);
  color:var(--fg-2); font-size:14.5px; line-height:1.6; position:relative}
.lmh-get li:first-child{border-top:0}
.lmh-get li::before{content:'\2713'; position:absolute; left:0; top:16px;
  color:var(--bronze-400); font-size:13px; font-weight:700}
.lmh-get b{display:block; font-family:var(--font-display); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--fg); margin-bottom:5px}

/* who built it */
.lmh-peter{display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(32px,5vw,60px);
  align-items:center; padding:clamp(64px,8vw,96px) var(--pad); border-top:1px solid var(--line)}
.lmh-peter-img{position:relative; margin:0}
.lmh-peter-img img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:58% 50%;
  border-radius:4px; border:1px solid var(--line-2);
}
.lmh-peter-copy h3{font-size:clamp(21px,2.7vw,32px); letter-spacing:-.012em; margin-bottom:16px}
.lmh-peter-copy p{color:var(--fg-2); font-size:16px; line-height:1.7; margin-bottom:28px; max-width:560px}
/* Two body paragraphs now, and 28px between them reads as a gap rather than a
   beat. The 28px is still wanted under the last one, before the button. */
.lmh-peter-copy .peter-lede{margin-bottom:15px}
/* The name left the opening line so the story could start cold, so it comes back
   as a signature. It also turns the section into something closer to a note. */
.lmh-peter-copy .sig{display:block; width:186px; height:auto; opacity:.9; margin:-4px 0 22px}

/* ---------- quiz ---------- */
.lm-quiz{padding:calc(var(--nav-h) + 56px) 0 100px; min-height:78vh}
.prog{margin-bottom:44px}
.prog-bar{height:2px; background:var(--line-2); border-radius:2px; overflow:hidden}
.prog-bar span{display:block; height:100%; width:0; background:var(--bronze-400); transition:width .35s ease}
.prog-label{margin-top:12px; font-family:var(--font-display); font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--fg-3)}
.prog-label b{color:var(--bronze-400)}

.q{font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px); line-height:1.08; letter-spacing:-.015em; margin-bottom:12px}
.q-sub{color:var(--fg-2); font-size:16px; margin-bottom:32px}

.opts{display:flex; flex-direction:column; gap:12px}
.opt{
  display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:4px;
  padding:20px 22px; color:var(--fg); font-family:var(--font-body);
  transition:border-color .18s, background .18s, transform .12s;
}
.opt:hover{border-color:var(--bronze-600); background:var(--bg-3); transform:translateY(-1px)}
.opt.sel{border-color:var(--bronze-400); background:var(--bg-3)}
.opt b{font-family:var(--font-display); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.03em}
.opt span{color:var(--fg-3); font-size:14px}

.back{
  margin-top:34px; background:none; border:0; cursor:pointer; padding:8px 0;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); transition:color .2s;
}
.back:hover{color:var(--bronze-400)}

/* ---------- result ---------- */
.lm-result{padding:calc(var(--nav-h) + 56px) 0 0}
.res-head{max-width:760px; margin-bottom:44px}
.res-head .h2{font-size:clamp(26px,3.6vw,44px)}
.res-meta{list-style:none; padding:0; margin:30px 0 0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.res-meta li{background:var(--bg); padding:16px 18px; display:flex; flex-direction:column; gap:5px}
.res-meta span{font-family:var(--font-display); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.17em; color:var(--fg-3)}
.res-meta b{font-size:15px; font-weight:600}

.sessions{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:64px}

/* ---------- day tabs ---------- */
/* Wide screens show the whole week at once, so the tabs only exist on a phone,
   where scrolling past three sessions to reach today's is the actual problem. */
.day-tabs{display:none}
@media (max-width:860px){
  /* Sticky, so you can jump days from anywhere in a session without scrolling back. */
  .day-tabs{
    display:flex; gap:7px; margin-bottom:18px;
    position:sticky; top:var(--nav-h); z-index:20;
    padding:10px var(--pad); margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    background:linear-gradient(var(--bg) 78%, transparent);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .day-tabs::-webkit-scrollbar{display:none}
  .day-tab{
    flex:1 1 0; min-width:86px; cursor:pointer; text-align:left;
    padding:10px 12px; border-radius:4px;
    background:var(--bg-2); border:1px solid var(--line);
    font-family:var(--font-body); color:var(--fg-3);
    transition:background .18s, border-color .18s, color .18s;
  }
  .day-tab span{
    display:block; font-family:var(--font-display); font-weight:700;
    font-size:9px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px;
  }
  .day-tab b{
    display:block; font-family:var(--font-display); font-weight:800;
    font-size:12.5px; text-transform:uppercase; letter-spacing:.02em;
    color:var(--fg-2); white-space:nowrap;
  }
  .day-tab.on{background:var(--bronze-400); border-color:var(--bronze-400); color:rgba(16,16,16,.7)}
  .day-tab.on b{color:#101010}
  .sessions{margin-bottom:48px}
  .sessions .session{display:none}
  .sessions .session.on{display:block}
  /* The active tab already names the day, so the card header would just repeat it. */
  .sessions .session-head{display:none}
  .sessions .session{padding-top:20px}
}
.session{background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:26px 24px 22px}
.session-head{display:flex; align-items:baseline; gap:12px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--line)}
.session-num{font-family:var(--font-display); font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--bronze-400)}
.session h3{font-size:18px; letter-spacing:.02em}

.ex-list{list-style:none; padding:0; margin:0}
.ex{display:flex; gap:14px; padding:13px 0; border-top:1px solid rgba(255,255,255,.05)}
.ex:first-child{border-top:0; padding-top:0}
.ex-i{font-family:var(--font-display); font-weight:800; font-size:11px; color:var(--fg-3);
  width:18px; flex:none; padding-top:3px}
.ex-pair .ex-i{color:var(--bronze-500)}
.ex-body b{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px; line-height:1.35}
.ex-body p{display:flex; flex-wrap:wrap; gap:6px}
/* This is the prescription, read at arm's length in a gym, so it has to survive
   that. The old grey was 4.41:1 against the chip, under the 4.5:1 AA floor at 11px. */
.ex-body p span{font-size:11.5px; color:var(--fg-2); background:var(--bg-3);
  border:1px solid var(--line-2); border-radius:3px; padding:4px 9px; line-height:1.4}
/* Reps is the number you act on, so it gets the most weight. */
.ex-reps{color:var(--fg) !important; font-weight:600}
.ex-tempo{color:var(--bronze-300) !important; border-color:var(--bronze-800) !important}
.ex-rir{color:var(--fg-2) !important}
.session-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--fg-3); line-height:1.6}

/* ---------- notes ---------- */
.notes{margin-bottom:64px}
.notes h3{font-size:clamp(20px,2.4vw,28px); margin-bottom:24px; letter-spacing:-.01em}
/* Six notes, so three columns fill two rows exactly. Four left an empty cell. */
.note-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.note{background:var(--bg); padding:26px 24px; display:flex; flex-direction:column}
/* Direct child only. This used to catch the inline <b class="gold"> mid-sentence and
   turn it into a gold uppercase heading, orphaning the rest of the sentence. */
.note > b{display:block; font-family:var(--font-display); font-weight:800; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.13em; color:var(--bronze-400); margin-bottom:10px}
.note p b{font-weight:700; color:var(--fg)}
.note p b.gold{color:var(--bronze-400)}

/* The effort table, as an actual table. */
.e-table{width:100%; border-collapse:collapse; margin:0 0 12px}
.e-table td{padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:14px; color:var(--fg-2); vertical-align:baseline}
.e-table tr:last-child td{border-bottom:0}
.e-table td:first-child{color:var(--fg); font-weight:600}
.e-table td:last-child{text-align:right; color:var(--bronze-400); font-weight:600; white-space:nowrap}
.note p{color:var(--fg-2); font-size:14.5px; line-height:1.65}
.aerobic{margin-top:24px; padding:20px 22px; background:var(--bg-2);
  border:1px solid var(--line); border-left:2px solid var(--bronze-600); border-radius:3px;
  color:var(--fg-2); font-size:14.5px; line-height:1.7}
.aerobic b{color:var(--fg)}

/* The RPE line sits under the RIR table as a conversion, so it reads as a footnote
   to the table rather than a competing scale. */
.note .e-rpe{margin-top:9px; font-size:13.5px; color:var(--fg-3)}

/* The floor protocol links out to the same week rebuilt for no equipment. */
.g-list a,.ex-note a{color:var(--bronze-400); border-bottom:1px solid var(--bronze-800)}

/* The warm-up is 5 bullets to read or 92 seconds to watch, so the video leads. Reuses
   the movement Watch pill, minus the inline margin it needs when it follows a name. */
.g-watch{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 4px}
.g-watch .watch{margin-left:0; text-decoration:none}
.g-watch .g-sub{font-size:12.5px; color:var(--fg-3)}
.ex-note a:hover{color:var(--bronze-300); border-bottom-color:var(--bronze-400)}
.g-list a:hover{color:var(--bronze-300); border-bottom-color:var(--bronze-400)}

/* ---------- capture ---------- */
.capture{background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
  padding:clamp(34px,5vw,58px) clamp(24px,4vw,48px); text-align:center; position:relative; overflow:hidden}
.capture::before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(199,168,100,.10), transparent 62%); pointer-events:none}
.capture > *{position:relative; z-index:1}
.capture h3{font-size:clamp(22px,2.8vw,32px); margin-bottom:14px; letter-spacing:-.01em}
.capture > div > p{color:var(--fg-2); font-size:16px; max-width:520px; margin:0 auto 28px; line-height:1.65}
#capForm{display:flex; gap:10px; justify-content:center; max-width:520px; margin:0 auto; flex-wrap:wrap}
#capEmail{
  flex:1; min-width:240px; background:var(--bg); border:1px solid var(--line-2);
  border-radius:3px; padding:15px 18px; color:var(--fg); font-family:var(--font-body); font-size:15px;
}
#capEmail::placeholder{color:var(--fg-3)}
#capEmail:focus{outline:none; border-color:var(--bronze-500)}
.cap-err{margin-top:12px; color:#e0a09a; font-size:13.5px}
.cap-small{margin-top:16px !important; font-size:12.5px; color:var(--fg-3)}
.cap-done{text-align:center}
.tick-big{font-size:38px; color:var(--bronze-400); line-height:1; margin-bottom:14px}

/* ---------- closing cta ---------- */
.res-cta{text-align:center; padding:clamp(64px,8vw,104px) 0 clamp(56px,7vw,88px)}
.res-cta .eyebrow{justify-content:center}
.res-cta h3{font-size:clamp(24px,3.2vw,38px); margin-bottom:16px; letter-spacing:-.015em}
.res-cta p{color:var(--fg-2); font-size:16px; max-width:560px; margin:0 auto 30px; line-height:1.65}
/* Sits under the button, so it reads as a footnote to the offer rather than a
   competing call to action. */
.res-cta .yt-plug{font-size:13.5px; color:var(--fg-3); margin:26px auto 0}
.res-cta .yt-plug a{color:var(--bronze-400); border-bottom:1px solid var(--bronze-800)}
.res-cta .yt-plug a:hover{color:var(--bronze-300); border-bottom-color:var(--bronze-400)}

.restart{
  display:block; margin:0 auto 72px; background:none; border:0; cursor:pointer; padding:10px;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); transition:color .2s;
}
.restart:hover{color:var(--bronze-400)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .res-meta{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .lmh-top{grid-template-columns:1fr; gap:40px}
  .lmh-why{grid-template-columns:1fr; gap:44px}
  .lmh-peter{grid-template-columns:1fr; gap:28px}
  .lmh-peter-img{max-width:360px}
  .prev-card{max-height:320px}
}
@media (max-width:720px){
  .lm-hero{padding:calc(var(--nav-h) + 28px) 0 0}
  .lm-hero .lede{font-size:16px; line-height:1.6; margin-bottom:14px}
  .lm-hero .lede-2{margin-bottom:24px}
  .lmh-top{padding-bottom:48px}
  .lmh-stats{grid-template-columns:1fr; gap:1px}
  .lmh-stats > div{padding:22px 22px 24px}
  .lmh-stats b{font-size:44px; margin-bottom:8px}
  .lm-quiz{padding:calc(var(--nav-h) + 36px) 0 72px}
  .opt{padding:17px 18px}
  #capForm{flex-direction:column}
  #capEmail{min-width:0}
  #capForm .btn{width:100%}
}

/* ---------- key info guide ---------- */
.guide{margin-bottom:64px}
.guide-head{margin-bottom:34px}
.guide-head h3{font-size:clamp(22px,3vw,34px); letter-spacing:-.015em}
/* The guide is read once and referred back to, so each card collapses to its title. */
.g-card{display:block; padding:0; border-top:1px solid var(--line)}
.g-head{
  display:flex; align-items:center; gap:16px; width:100%; cursor:pointer;
  padding:22px 0; background:none; border:0; text-align:left; color:inherit;
}
.g-head h4{flex:1; margin:0 !important; color:var(--fg); transition:color .18s}
.g-head:hover h4{color:var(--bronze-300)}
.g-chev{
  flex:none; width:9px; height:9px; margin-right:2px;
  border-right:2px solid var(--bronze-500); border-bottom:2px solid var(--bronze-500);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s;
}
.g-head[aria-expanded="true"] .g-chev{transform:rotate(-135deg) translate(-2px,-2px)}
.g-card > div{padding:0 0 30px 0}
.g-card > div > *:first-child{margin-top:0}
@media (min-width:721px){ .g-head, .g-card > div{padding-left:52px} }
.g-card{position:relative}
.g-card:last-child{border-bottom:1px solid var(--line)}
.g-num{position:absolute; left:0; top:24px; font-family:var(--font-display); font-weight:800;
  font-size:13px; letter-spacing:.14em; color:var(--bronze-500)}
@media (max-width:720px){ .g-num{display:none} }
.g-card h4{font-size:clamp(17px,2vw,21px); margin-bottom:12px; letter-spacing:.01em}
.g-card > div > p{color:var(--fg-2); font-size:15.5px; line-height:1.7; margin-bottom:14px; max-width:660px}
.g-list{list-style:none; padding:0; margin:0 0 14px}
.g-list li{position:relative; padding:8px 0 8px 20px; color:var(--fg-2); font-size:15px;
  line-height:1.6; border-bottom:1px solid rgba(255,255,255,.05); max-width:660px}
.g-list li::before{content:''; position:absolute; left:2px; top:16px; width:5px; height:5px;
  border-radius:50%; background:var(--bronze-600)}
.g-list b{color:var(--fg); font-weight:600}
.g-note{background:var(--bg-2); border-left:2px solid var(--bronze-600); border-radius:3px;
  padding:14px 18px; font-size:14.5px !important; margin-bottom:0 !important}
.g-note b{color:var(--fg)}

.g-table-wrap{overflow-x:auto; margin-bottom:16px; max-width:660px}
.g-table{width:100%; border-collapse:collapse; font-size:14px; min-width:420px}
.g-table th{font-family:var(--font-display); font-weight:700; font-size:10px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--bronze-400); text-align:left; padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line-2); white-space:nowrap}
.g-table td{padding:11px 14px 11px 0; color:var(--fg-2); border-bottom:1px solid rgba(255,255,255,.05)}
.g-table td:first-child{color:var(--fg); font-weight:600}
.g-row-on td{color:var(--bronze-300)}
.g-row-on td:first-child{color:var(--bronze-300)}

/* ---------- print row ---------- */
.print-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:56px}
.print-row span{color:var(--fg-3); font-size:13.5px}
.btn-ghost{background:transparent; border:1px solid var(--line-2); color:var(--fg); cursor:pointer;
  padding:13px 22px; font-size:12px}
.btn-ghost:hover{border-color:var(--bronze-500); color:var(--bronze-300)}

.print-brand{display:none}

/* ---------- print / save as PDF ---------- */
@media print{
  @page{margin:14mm 12mm}
  :root{--bg:#fff; --bg-2:#fff; --bg-3:#fff; --fg:#111; --fg-2:#333; --fg-3:#666;
        --line:#ddd; --line-2:#bbb}
  body{background:#fff !important; color:#111 !important}
  .nav,.foot,.print-row,.capture,.res-cta,.restart,#intro,#quiz{display:none !important}
  .lm-result{padding:0 !important}
  .reveal{opacity:1 !important; transform:none !important}
  .wrap{max-width:none; padding:0}
  h1,h2,h3,h4{color:#111 !important}
  .gold,.eyebrow,.g-num,.session-num,.note b,.g-table th{color:#8a6d28 !important}
  .rule{background:#8a6d28 !important}
  .h2{font-size:26px !important}
  .res-head{margin-bottom:20px}
  .res-meta{grid-template-columns:repeat(4,1fr); background:#ddd; border-color:#ccc}
  .res-meta li{background:#fff}
  .sessions{display:block; margin-bottom:24px}
  .session{background:#fff !important; border:1px solid #ccc; margin-bottom:14px;
    break-inside:avoid; page-break-inside:avoid; padding:18px 20px}
  .ex-body p span{background:#f4f4f4 !important; border-color:#ddd !important; color:#444 !important}
  .ex-tempo{color:#8a6d28 !important; border-color:#d9c79b !important}
  .note-grid,.feat-grid{background:#ddd}
  .note{background:#fff !important; break-inside:avoid}
  .aerobic,.g-note{background:#faf7f0 !important; border-left-color:#8a6d28 !important; color:#333 !important}
  .g-card{break-inside:avoid; page-break-inside:avoid; padding:20px 0}
  .g-list li{color:#333 !important}
  .g-table td{color:#333 !important}
  
  a[href]::after{content:''}
  .print-brand{display:flex !important; align-items:baseline; justify-content:space-between;
    gap:16px; padding-bottom:10px; margin-bottom:26px; border-bottom:2px solid #8a6d28}
  .pb-logo{display:inline-block; width:150px; height:auto}
  .pb-logo img{width:100%; height:auto; display:block}
  .pb-tag{font-family:var(--font-display); font-weight:700; font-size:8.5px;
    text-transform:uppercase; letter-spacing:.14em; color:#8a6d28 !important; text-align:right}
}

/* ---------- gate ---------- */
.lm-gate{padding:calc(var(--nav-h) + 64px) 0 96px; text-align:center; position:relative; overflow:hidden; min-height:76vh}
.lm-gate::after{
  content:''; position:absolute; top:-15%; left:50%; transform:translateX(-50%);
  width:110vw; height:70vh; background:radial-gradient(ellipse, rgba(199,168,100,.13), transparent 60%);
  pointer-events:none;
}
.lm-gate .wrap{position:relative; z-index:1}
.gate-stat{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,4.2vw,48px); line-height:1.05; letter-spacing:-.02em; margin-bottom:16px;
}
.gate-sub{color:var(--fg-2); font-size:17px; line-height:1.65; max-width:520px; margin:0 auto 40px}
.gate-box{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:4px;
  padding:clamp(28px,4vw,44px) clamp(22px,4vw,40px); max-width:520px; margin:0 auto;
}
.gate-lead{color:var(--fg-2); font-size:15.5px; line-height:1.65; margin-bottom:24px}
#gateForm{display:flex; flex-direction:column; gap:10px}
#gateForm input{
  background:var(--bg); border:1px solid var(--line-2); border-radius:3px;
  padding:15px 18px; color:var(--fg); font-family:var(--font-body); font-size:15px; width:100%;
}
#gateForm input::placeholder{color:var(--fg-3)}
#gateForm input:focus{outline:none; border-color:var(--bronze-500)}
#gateForm .btn{width:100%; margin-top:4px}
.lm-gate .cap-err{margin-top:14px}
.lm-gate .cap-small{margin-top:18px !important}

@media print{ .lm-gate{display:none !important} }

/* demo links + spec additions */
.ex-body a.demo{color:inherit; border-bottom:1px solid var(--line-2); transition:color .2s, border-color .2s}
.ex-body a.demo:hover{color:var(--bronze-300); border-color:var(--bronze-500)}

/* ---------- movement demos ---------- */
/* Watch sits inline after the name, small enough to stay out of the way of the
   prescription, big enough to be a real tap target on a phone. */
/* It was a grey ghost at 4.41:1. Bronze on a bronze tint reads as something you
   can press, and clears AA comfortably. */
.watch{
  display:inline-flex; align-items:center; gap:6px; vertical-align:baseline;
  margin-left:9px; padding:4px 11px 4px 9px; cursor:pointer;
  background:rgba(199,168,100,.12); border:1px solid var(--bronze-700); border-radius:100px;
  color:var(--bronze-300); font-family:var(--font-body); font-weight:700;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  transition:background .18s, border-color .18s, color .18s;
}
.watch:hover{background:rgba(199,168,100,.22); border-color:var(--bronze-500); color:var(--fg)}
.watch.on{background:var(--bronze-400); border-color:var(--bronze-400); color:#101010}
.watch-tri{
  width:0; height:0; border-style:solid; border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent currentColor;
}
.watch.on .watch-tri{
  border-width:0 4px 6px 4px;
  border-color:transparent transparent currentColor transparent;
}

.demo-player{margin:11px 0 3px; max-width:480px}
.demo-player iframe,
.demo-facade{
  display:block; width:100%; aspect-ratio:16/9; border:0;
  border-radius:5px; background:var(--bg-3);
}
.demo-facade{position:relative; padding:0; cursor:pointer; overflow:hidden}
/* hqdefault is 4:3 with letterbox bars, so crop to the 16:9 frame inside it */
.demo-facade img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.35); display:block;
}
.demo-facade::after{
  content:''; position:absolute; inset:0; background:rgba(16,16,16,.18); transition:background .2s;
}
.demo-facade:hover::after{background:rgba(16,16,16,.05)}
.demo-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  width:54px; height:54px; border-radius:50%; background:rgba(16,16,16,.72);
  border:1px solid rgba(255,255,255,.28); transition:background .2s, transform .2s;
}
.demo-play::after{
  content:''; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--bronze-400);
}
.demo-facade:hover .demo-play{background:rgba(16,16,16,.88); transform:translate(-50%,-50%) scale(1.06)}

/* Paper cannot play a video, so print the address instead. */
@media print{
  .watch, .demo-player{display:none !important}
  .ex-body a.demo::after{content:' (' attr(href) ')'; font-size:10px; color:#666}
}
.g-sub{display:block; margin-top:8px; color:var(--fg-3); font-size:13.5px; line-height:1.6}
.demo-note{margin:-40px 0 56px; padding:16px 18px; background:var(--bg-2);
  border:1px solid var(--line); border-left:2px solid var(--bronze-600); border-radius:3px;
  color:var(--fg-2); font-size:14px; line-height:1.65}
.demo-note a{color:var(--bronze-400); border-bottom:1px solid var(--bronze-800)}
@media print{ .ex-body a.demo{border:0; color:#111 !important} .demo-note{background:#faf7f0 !important; color:#333 !important} }
.ex-note{margin-top:7px !important; font-size:12px; color:var(--fg-3); line-height:1.5}
@media print{ .ex-note{color:#555 !important} }


/* Paper has no tabs and no toggles: print the whole week and the whole guide. */
@media print{
  .day-tabs{display:none !important}
  .sessions .session{display:block !important}
  .g-chev{display:none !important}
  .g-head{padding:24px 0 8px !important; cursor:auto}
  .g-card > div{display:block !important}
}