/* THE ALTERNATIVES KIND, lifted from the approved example on the board, rebrand/pages/src/alt-trainerize.html (a4fdc4d),
   where it sat inside the page. One template for all six pages. */
/* ALTERNATIVES, one template for all six pages. Calm long reading, bold once: the ranked board under the opening. */
.pg-alt [id]{scroll-margin-top:calc(var(--head,76px) + 18px)}

/* the opening: the title on the left, the short answer on the right */
.pg-alt .al-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,80px);align-items:start}
.pg-alt .al-hero-grid h1{max-width:13ch}
.pg-alt .al-answer{background:#fff;border-radius:24px;padding:clamp(22px,2.4vw,34px);box-shadow:0 40px 80px -48px rgba(90,70,0,.5),0 0 0 1px rgba(14,14,16,.05);font-size:16.5px;line-height:1.62;color:var(--ink)}
.pg-alt .al-answer h2{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:10px;background:var(--sun);font-family:var(--display);font-weight:800;font-size:15px;line-height:1.2}
.pg-alt .al-answer p{margin:0}
.pg-alt .al-answer p + p{margin-top:12px}
.pg-alt .al-answer a{color:var(--ink);font-weight:600;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:3px}
@media (max-width:980px){.pg-alt .al-hero-grid{grid-template-columns:minmax(0,1fr)}}

/* the ranked board: the one bold moment of the page */
.pg-alt .al-board{padding:clamp(56px,7vw,112px) 0 clamp(8px,1.5vw,20px)}
.pg-alt .al-board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 48px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,40px)}
.pg-alt .al-board-head h2{font-size:clamp(40px,5.2vw,100px);max-width:10ch}
.pg-alt .al-board-head p{margin:0;max-width:31em;font-size:16px;line-height:1.55;color:var(--ink-2)}
.pg-alt .al-list{list-style:none;margin:0;padding:0}
.pg-alt .al-row{display:grid;grid-template-columns:clamp(84px,8vw,128px) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.55fr);gap:12px clamp(16px,2vw,32px);align-items:center;padding:20px clamp(16px,1.6vw,26px);border-top:1px solid var(--line)}
.pg-alt .al-row.al-us{background:var(--sun);border-top:0;border-radius:24px;padding-block:30px;margin-bottom:4px}
.pg-alt .al-row.al-us + .al-row{border-top:0}
.pg-alt .al-row.al-ref{border-top:1.5px dashed rgba(14,14,16,.28);margin-top:10px;background:#FAFAF6;border-radius:0 0 20px 20px}
.pg-alt .al-head{display:contents}
.pg-alt .al-num{font-family:var(--display);font-weight:900;font-size:clamp(48px,5.4vw,92px);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(14,14,16,.42)}
.pg-alt .al-us .al-num{color:var(--ink);-webkit-text-stroke:0}
.pg-alt .al-who a,.pg-alt .al-who b{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:clamp(20px,1.7vw,27px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.pg-alt .al-who a svg{flex:none;transition:transform .25s var(--ease)}
.pg-alt .al-who a:hover svg{transform:translateX(4px)}
.pg-alt .al-who span{display:block;margin-top:6px;font-family:var(--display);font-weight:600;font-size:14px;color:rgba(14,14,16,.62)}
.pg-alt .al-us .al-who span{color:rgba(14,14,16,.74)}
.pg-alt .al-cell small{display:block;margin-bottom:3px;font-family:var(--display);font-weight:700;font-size:12.5px;color:rgba(14,14,16,.58)}
.pg-alt .al-us .al-cell small{color:rgba(14,14,16,.66)}
.pg-alt .al-cell b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(18px,1.5vw,22px);line-height:1.15}
.pg-alt .al-cell.al-price b{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.pg-alt .al-cell span{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:rgba(14,14,16,.66)}
.pg-alt .al-us .al-cell span{color:rgba(14,14,16,.76)}
.pg-alt .al-cell.al-for span{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:860px){
  .pg-alt .al-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "free fifty" "for for";align-items:start;gap:14px 16px;padding:20px 16px}
  .pg-alt .al-row.al-us{padding-block:22px}
  .pg-alt .al-head{display:flex;align-items:center;gap:14px;grid-area:head}
  .pg-alt .al-cell.al-free{grid-area:free}
  .pg-alt .al-cell.al-price{grid-area:fifty}
  .pg-alt .al-cell.al-for{grid-area:for}
  .pg-alt .al-num{font-size:46px}
  .pg-alt .al-ref .al-num{display:none}
}

/* long reading */
.pg-alt .art > h2:first-child{margin-top:0}
.pg-alt .art blockquote{margin-left:0;margin-right:0;padding:2px 0 2px 22px;border-left:4px solid var(--sun)}
.pg-alt .art blockquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.4vw,21px);line-height:1.42;letter-spacing:-.005em}
.pg-alt .art blockquote p + p{margin-top:10px;font-family:var(--text);font-weight:400;font-size:14.5px;color:var(--muted)}
.pg-alt .al-cap{font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.pg-alt .tbl.al-fifty{min-width:640px}}
.pg-alt .art > .al-cap{margin-top:10px}

/* one card per platform, in rank order */
.pg-alt .art > .al-card{margin-top:clamp(18px,2.2vw,28px)}
.pg-alt .al-card{padding:clamp(22px,3vw,40px);border-radius:26px;background:#fff;box-shadow:0 0 0 1px #E6E6DF}
.pg-alt .al-card > * + *{margin-top:1em}
.pg-alt .al-card.al-us{background:#FFF8DC;box-shadow:none}
.pg-alt .al-card-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pg-alt .al-card-num{font-family:var(--display);font-weight:900;font-size:clamp(40px,3.6vw,56px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(14,14,16,.42)}
.pg-alt .al-card.al-us .al-card-num{color:var(--ink);-webkit-text-stroke:0}
.pg-alt .al-tag{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:10px;background:var(--panel);font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25}
.pg-alt .al-card.al-us .al-tag{background:var(--sun)}
.pg-alt .al-card h3{margin-top:.55em;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.02em;line-height:1.05}
.pg-alt .al-card .al-intro{font-size:clamp(18px,1.35vw,21px);line-height:1.5;color:var(--ink-2)}
.pg-alt .al-card > blockquote{margin-top:1.4em}

/* what the platform card ends on: best for, price, the catch, read more */
.pg-alt .al-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:1.5em 0 0;border-radius:18px;overflow:hidden;background:#E6E6DF;box-shadow:0 0 0 1px #E6E6DF}
.pg-alt .al-spec > div{padding:16px 18px;background:#F7F7F2}
.pg-alt .al-card.al-us .al-spec{background:#EADFB4;box-shadow:0 0 0 1px #EADFB4}
.pg-alt .al-card.al-us .al-spec > div{background:#FFFDF3}
.pg-alt .al-spec dt{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:14px}
.pg-alt .al-spec dd{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:640px){.pg-alt .al-spec{grid-template-columns:minmax(0,1fr)}}

/* Evobody's card: Evo SI on film, the five ranks, the check-in that pauses */
.pg-alt .al-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px;margin-top:1.5em}
.pg-alt .al-fig{display:flex;flex-direction:column;margin:0}
.pg-alt .al-fig.al-wide{grid-column:1/-1}
.pg-alt .al-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:rgba(14,14,16,.66)}
.pg-alt .al-clip{aspect-ratio:12/5;border-radius:18px;background:#E8E4D6}
.pg-alt .al-clip video{object-position:45% 50%}
.pg-alt .al-shot{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(14,14,16,.08)}
.pg-alt .al-ladder ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:4px;margin:0;padding:0 0 14px;list-style:none;border-bottom:1.5px solid var(--line)}
.pg-alt .al-ladder li{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.pg-alt .al-ladder img{height:auto}
.pg-alt .al-ladder li:nth-child(1) img{width:min(38px,70%)}
.pg-alt .al-ladder li:nth-child(2) img{width:min(44px,78%)}
.pg-alt .al-ladder li:nth-child(3) img{width:min(50px,86%)}
.pg-alt .al-ladder li:nth-child(4) img{width:min(56px,94%)}
.pg-alt .al-ladder li:nth-child(5) img{width:min(62px,100%)}
.pg-alt .al-ladder b{font-family:var(--display);font-weight:800;font-size:14px;line-height:1}
.pg-alt .al-ladder p{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.pg-alt .al-ck{gap:0;font-size:14px;line-height:1.4}
.pg-alt .al-ck b{font-family:var(--display);font-weight:800;font-size:17px}
.pg-alt .al-ck-bar{height:5px;margin-top:12px;border-radius:5px;background:#ECECE6;overflow:hidden}
.pg-alt .al-ck-bar i{display:block;width:8.4%;height:100%;border-radius:5px;background:var(--ink)}
.pg-alt .al-ck small{display:block;margin-top:7px;font-size:12px;color:var(--muted)}
.pg-alt .al-ck-q{margin:10px 0 0;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.3}
.pg-alt .al-ck-box{height:52px;margin-top:10px;border-radius:12px;background:#F5F5F2;box-shadow:inset 0 0 0 1px #E7E7E2}
.pg-alt .al-ck-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pg-alt .al-ck-btn{display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:14px;font-family:var(--display);font-weight:700;font-size:13.5px}
.pg-alt .al-ck-btn.al-go{background:var(--sun);color:var(--on-sun)}
.pg-alt .al-ck-btn.al-quiet{background:#F2F2EE;color:rgba(14,14,16,.5)}
.pg-alt .al-ck-btn.al-pause{margin-top:8px;background:transparent;box-shadow:inset 0 0 0 1.5px #E2E2DC;color:var(--ink)}
@media (max-width:640px){.pg-alt .al-figs{grid-template-columns:minmax(0,1fr)}.pg-alt .al-clip{aspect-ratio:16/10}}

/* the page list on the side, with the six in rank order */
.pg-alt .toc .al-sub{display:flex;align-items:baseline;gap:10px;padding:3px 0 3px 12px}
.pg-alt .toc .al-sub i{font-style:normal;font-family:var(--display);font-weight:800;font-size:12.5px;min-width:1ch;color:rgba(14,14,16,.45)}

/* the closing ask: two ways in (the draft's .btn.line is hidden by its chat .line rule, so the outline button has its own class) */
.pg-alt .al-cta{display:flex;flex-wrap:wrap;gap:10px}
.pg-alt .btn.al-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* on a phone the article column may not grow past the screen: a wide table scrolls inside .tbl-scroll instead */
@media (max-width:980px){.pg-alt .art-side{grid-template-columns:minmax(0,1fr)}.pg-alt .al-hero-grid h1{max-width:none}}