/* SMV Labs guides (/guides/) and affiliate disclosure (/disclosure/). Loads after ../site.css and reuses its header
   (.top), button (.btn), channel line (.via), start sheet (.start) and footer (.foot). Only SMV tokens (B · Dark).
   Long-form rules: one left-aligned text column of about 64 characters, light headings, 1px seams, no cards,
   no shadows, nothing moves. Mobile first; the desktop layout starts where site.css's phone layout ends (1021px). */

/* These pages have no fixed bottom button, so the header link stays on phones and the footer needs no extra room */
.g .top .toplink{display:inline-flex}
.g footer{padding-bottom:48px}
.g .foot{margin-top:0}

/* The Amazon line at the top of every guide */
.g-aff{font:var(--t-footnote);color:var(--c-text-3);padding:14px 0;border-bottom:1px solid var(--c-line)}
.g-aff a{color:var(--c-text-2);text-decoration:underline;text-decoration-color:var(--c-line);text-underline-offset:3px}

/* Head: label, title, standfirst, date */
.g-head{padding:44px 0 40px}
.g-crumb{display:flex;gap:10px;font:var(--t-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-text-3)}
.g-crumb a{color:var(--c-text-3);text-decoration:none}
.g-crumb a:hover{color:var(--c-text)}
.g-head h1{font:300 40px/1.04 var(--f-sans);letter-spacing:-.03em;color:var(--c-text);margin-top:20px;max-width:18ch}
.g-lead{font:300 19px/1.45 var(--f-sans);color:var(--c-text-2);margin-top:20px;max-width:38ch}
.g-meta{font:var(--t-data);color:var(--c-text-3);margin-top:24px}

/* Body: the article, then the short list of products (on a computer the list sits in a sticky left column) */
.g-body{border-top:1px solid var(--c-line);padding:40px 0 72px}
.prose{max-width:64ch;font:400 17px/1.65 var(--f-sans);color:var(--c-text-2)}
.prose>*+*{margin-top:18px}
.prose h2{font:300 27px/1.15 var(--f-sans);letter-spacing:-.02em;color:var(--c-text);margin-top:52px}
.prose h3{font:500 18px/1.3 var(--f-sans);color:var(--c-text);margin-top:32px}
.prose>:first-child{margin-top:0}
.prose h2+*,.prose h3+*{margin-top:12px}
.prose strong{font-weight:500;color:var(--c-text)}
.prose a,.g-list a{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-text-4);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.g-list a:hover{text-decoration-color:var(--c-text)}
.paid{color:var(--c-text-3);white-space:nowrap}
.prose ul{list-style:none}
.prose li{position:relative;padding-left:22px}
.prose li+li{margin-top:10px}
.prose li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--c-text-3)}
.g-amz{font:300 22px/1.35 var(--f-sans);letter-spacing:-.01em;color:var(--c-text);padding:20px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}

/* Hairline rows inside an article: the routine, the workout, what fitting looks like */
.g-rows{border-top:1px solid var(--c-line)}
.g-rows div{padding:14px 0;border-bottom:1px solid var(--c-line)}
.g-rows dt{font:400 17px/1.35 var(--f-sans);color:var(--c-text)}
.g-rows dd{margin-top:4px;font-size:16px;line-height:1.5}

/* The short list */
.g-list{margin-top:56px}
.g-list h2{font:var(--t-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-text-3);padding-bottom:14px}
.g-list ul{list-style:none;border-top:1px solid var(--c-line)}
.g-list li{padding:14px 0 15px;border-bottom:1px solid var(--c-line);font:400 17px/1.4 var(--f-sans)}
.g-list .use{display:block;font:var(--t-data);color:var(--c-text-3);margin-bottom:4px}
.g-list .paid{font-size:14px}

/* Guides index: hairline rows, the whole row is the link */
.g-guides{list-style:none;border-top:1px solid var(--c-line);margin-bottom:72px}
.g-guides a{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:24px 0 26px;border-bottom:1px solid var(--c-line);text-decoration:none}
.g-guides .area{grid-column:1/-1;font:var(--t-data);color:var(--c-text-3)}
.g-guides .txt{display:flex;flex-direction:column;gap:8px}
.g-guides .title{font:300 26px/1.15 var(--f-sans);letter-spacing:-.02em;color:var(--c-text)}
.g-guides .desc{font:400 16px/1.5 var(--f-sans);color:var(--c-text-2);max-width:52ch}
.g-guides .go{align-self:center;font:300 22px/1 var(--f-sans);color:var(--c-text-3);transition:transform var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.g-guides a:hover .go{transform:translateX(3px);color:var(--c-text)}

/* Closing call to action: the main page's final section, smaller */
.g-cta{border-top:1px solid var(--c-line);padding:72px 0 88px}
.g-cta h2{font:300 44px/1.02 var(--f-sans);letter-spacing:-.03em;color:var(--c-text)}
.g-cta-sub{font:300 19px/1.45 var(--f-sans);color:var(--c-text-2);margin-top:24px;max-width:36ch}
.g-cta .cta{margin-top:32px}

@media (min-width:1021px){
  .g-aff{padding:16px 0}
  .g-head{padding:88px 0 72px}
  .g-head h1{font-size:72px;line-height:1;letter-spacing:-.035em;margin-top:24px}
  .g-lead{font-size:22px;line-height:1.4;margin-top:28px}
  .g-meta{margin-top:32px}
  .g-body{padding:72px 0 128px}
  .g-body.has-list{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
  .has-list .prose{grid-column:2;grid-row:1}
  .has-list .g-list{grid-column:1;grid-row:1;margin-top:0;position:sticky;top:104px}
  .prose{font-size:18px;line-height:1.7}
  .prose h2{font-size:32px;margin-top:64px}
  .prose h2+*,.prose h3+*{margin-top:16px}
  .g-rows div{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:16px 0}
  .g-rows dd{margin-top:0;font-size:17px;line-height:1.55}
  .g-guides{margin-bottom:128px}
  .g-guides a{grid-template-columns:5fr 6fr 1fr;gap:80px;align-items:baseline;padding:32px 0 34px}
  .g-guides .area{grid-column:auto;font:var(--t-data-lg)}
  .g-guides .title{font-size:32px}
  .g-guides .go{justify-self:end;align-self:baseline}
  .g-cta{padding:128px 0 144px}
  .g-cta .wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:end}
  .g-cta h2{font-size:80px;line-height:.96;letter-spacing:-.035em}
  .g-cta-sub{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.g-guides .go{transition:none}}