/* Study guides (/guides/<slug>): a reference page in the site's own look. An asphalt head with the signal and
   the hazard stripe, figures set like road signs, hard edges. Only these pages load this file, so the selling
   pages carry none of it. Built for a phone first: one column, big figures, nothing wider than the screen. */
.sg-hero{padding-block:clamp(30px,5vw,68px) clamp(28px,4.4vw,56px);background:linear-gradient(180deg,#1c2329 0%,#0c0f12 100%);color:#fff;border-bottom:6px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--orange) 0 14px,#14181c 14px 28px) 6}
.sg-kicker{display:flex;align-items:center;margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--orange)}
.sg-hero h1{max-width:22ch;font-size:clamp(34px,5.4vw,68px);line-height:1;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.sg-lead{max-width:64ch;margin-top:16px;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:rgb(255 255 255/.86)}
.sg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(22px,3vw,38px) 0 0;border-top:1px solid rgb(255 255 255/.2)}
.sg-facts>div{padding:14px 20px 0 0}
.sg-facts>div+div{padding-left:20px;border-left:1px solid rgb(255 255 255/.2)}
.sg-facts dt{font-size:11px;font-weight:600;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:var(--go)}
.sg-facts dd{margin:5px 0 0;font-size:15px;line-height:1.45;color:rgb(255 255 255/.92)}
.sg-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start;padding-block:clamp(30px,5vw,68px)}
.sg-contents{position:sticky;top:96px}
.sg-contents h2{font-family:DM,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:var(--muted)}
.sg-contents ol{list-style:none;margin:10px 0 22px;padding:0;border-left:2px solid var(--line)}
.sg-contents ol a{display:block;padding:7px 0 7px 14px;font-size:14px;line-height:1.35;text-decoration:none}
.sg-contents ol a:hover{color:var(--go-deep)}
.sg-contents .button{width:100%;min-height:48px;justify-content:center;gap:10px;padding-inline:12px;font-size:13px}
/* On a phone the list of headings is one bar above the guide: a tap opens it, a link jumps to its section. */
.sg-jump{display:none}
.sg-jump summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;cursor:pointer;list-style:none}
.sg-jump summary::-webkit-details-marker{display:none}
.sg-jump ol{list-style:none;margin:0;padding:0 16px 6px;border-top:1px solid var(--line)}
.sg-jump ol a{display:flex;align-items:center;min-height:46px;padding-block:6px;font-size:15px;line-height:1.3;text-decoration:none;border-bottom:1px solid var(--line)}
.sg-jump li:last-child a{border-bottom:0}
.sg-body{min-width:0;max-width:780px}
.sg-section+.sg-section{margin-top:clamp(40px,5vw,64px)}
.sg-section h2{font-size:clamp(28px,3.2vw,40px);text-wrap:balance;scroll-margin-top:96px}
.sg-intro{max-width:64ch;margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted)}
.sg-text{max-width:66ch;margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink)}
.sg-ref{display:inline-block;margin-left:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
/* The figures: the number first, as large as a sign, then what it stands for. */
.sg-numbers{margin:20px 0 0;border-top:2px solid var(--ink)}
.sg-numbers>div{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:6px 24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.sg-numbers dt{font-family:var(--cdl-display);font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:.005em;line-height:1;text-transform:uppercase}
.sg-numbers dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.sg-steps{list-style:none;counter-reset:sg;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.sg-steps>li{counter-increment:sg;display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.sg-steps>li::before{content:counter(sg);grid-row:1/span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:4px;background:#14181c;color:var(--orange);font-family:var(--cdl-display);font-size:20px;font-weight:700}
.sg-steps h3{align-self:center;margin:0;font-family:DM,Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;text-transform:none}
.sg-steps p{grid-column:2;font-size:16px;line-height:1.55;color:var(--ink)}
.sg-cases,.sg-mistakes{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.sg-cases li{padding:16px 18px;border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:6px;background:var(--white)}
.sg-cases p{font-size:16px;line-height:1.55;color:var(--ink)}
.sg-cases .sg-given{margin-bottom:6px;font-weight:600;line-height:1.45}
.sg-mistakes li{overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.sg-mistakes p{padding:12px 16px;font-size:16px;line-height:1.55;color:var(--ink)}
.sg-mistakes p span{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.sg-wrong{background:#fcece4}
.sg-wrong span{color:#9a3412}
.sg-right span{color:#135f31}
/* Practice questions: the choices of the course's own practice, one tap, the reason under it. */
.sg-question{margin-top:20px;padding:clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:6px;background:var(--white);box-shadow:0 24px 44px -36px rgb(0 0 0/.45)}
.sg-question h3{margin:0 0 14px;font-family:DM,Arial,sans-serif;font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.4;text-transform:none}
.sg-question .quiz-option{width:100%;font:inherit;font-size:15px;cursor:pointer}
.sg-question .quiz-option:disabled{cursor:default;color:var(--ink)}
.sg-verdict{margin-top:14px;font-size:16px;font-weight:700;color:#9a3412}
.sg-verdict.is-right{color:#135f31}
.sg-why{margin-top:14px;padding:0;border:0;border-top:1px solid var(--line)}
.sg-why summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.sg-why summary::-webkit-details-marker{display:none}
.sg-why p{font-size:16px;line-height:1.6;color:var(--ink)}
.sg-why p+p{margin-top:10px}
.sg-why .source-quote{margin-bottom:4px}
/* After the next step: the sources and who answers for the page, in the column of the body. */
.sg-foot{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4.5vw,72px);padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,80px)}
.sg-foot>.sg-sources{grid-column:2;max-width:780px}
.sg-sources h2{font-size:clamp(22px,2.4vw,28px)}
.sg-sources ul{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.sg-sources li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.sg-sources li a{font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.sg-sources li span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.sg-reviewed{max-width:66ch;margin-top:16px;font-size:15px;line-height:1.6;color:var(--ink)}
.sg-reviewed a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.sg-next{padding-block:clamp(40px,6vw,80px);background:var(--x-tint);border-top:1px solid var(--line)}
.sg-next-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 48px}
.sg-next h2{font-size:clamp(32px,4.4vw,56px)}
.sg-next p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted)}
.sg-next-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.sg-course{display:block;max-width:40ch;font-size:15px;line-height:1.5;color:var(--muted);text-decoration:none}
.sg-course strong{display:block;margin-bottom:2px;font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
  .sg-layout,.sg-foot{display:block}
  .sg-contents{display:none}
  .sg-jump{display:block;margin-bottom:26px;border:1px solid var(--line);border-radius:6px;background:var(--white)}
  .sg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-facts>div,.sg-facts>div+div{padding:14px 14px 14px 0;border-left:0;border-bottom:1px solid rgb(255 255 255/.2)}
  .sg-facts>div:nth-child(even){padding-left:14px;border-left:1px solid rgb(255 255 255/.2)}
  .sg-facts>div:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:640px){
  .sg-hero{padding-block:18px 14px}
  .sg-kicker{margin-bottom:10px}
  .sg-hero h1{font-size:clamp(27px,7.8vw,36px)}
  .sg-lead{margin-top:10px;font-size:15px;line-height:1.5}
  .sg-facts{margin-top:14px}
  .sg-facts>div,.sg-facts>div+div{padding-block:10px}
  .sg-facts dt{font-size:10px}
  .sg-facts dd{margin-top:3px;font-size:13.5px;line-height:1.4}
  .sg-layout{padding-block:14px 40px}
  .sg-jump{margin-bottom:20px}
  .sg-numbers>div{grid-template-columns:minmax(0,1fr)}
  .sg-next-actions,.sg-next-actions .button{width:100%}
  .sg-next-actions .button{justify-content:center}
}