/* The subpage template: /download/, /methodology/ and their /ko/ pairs.
   Loaded after /landing.css, which supplies the tokens, type, nav pill,
   buttons, account cards and footer. This file adds only what a reading page
   needs and the landing does not: a quiet header, prose, checklists and
   numbered figures. Light only, like the rest of the site. */

.sub-hero{padding:clamp(124px,15vw,176px) 0 clamp(48px,6vw,72px);background:var(--wash);
  border-bottom:1px solid var(--line)}
.sub-hero h1{margin:0 0 20px;font-size:clamp(36px,5.4vw,66px);max-width:17ch;text-align:left}
.sub-hero h1 .ser{display:inline;font-size:1em}
html[lang=ko] .sub-hero h1{max-width:16ch}
.sub-hero .lead{margin:0 0 30px;max-width:640px;text-align:left}
.sub-hero .actions{justify-content:flex-start}
.sub-hero .meta{text-align:left;text-wrap:wrap}
@media (max-width:480px){.sub-hero .meta span{margin:0 18px 0 0}}

.sub .sec{padding:clamp(64px,8vw,104px) 0}
.sub .sec h2{font-size:clamp(28px,3.4vw,42px);max-width:22ch}
.sub .sec-head{margin-bottom:clamp(28px,4vw,44px)}

/* Download options: one card per way in. */
.opts{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:760px){.opts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.opt{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.opt p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.opt .go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:650;color:var(--accent);text-underline-offset:3px}

/* A checklist: what works, stated plainly. */
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);max-width:820px}
.checks li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line-2);
  font-size:16.5px;line-height:1.45}
.checks li::before{content:"";position:absolute;left:4px;top:1.45em;width:12px;height:7px;
  border-left:2px solid var(--accent-fill);border-bottom:2px solid var(--accent-fill);transform:translateY(-60%) rotate(-45deg)}
.checks li span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:2px}

.not{margin:28px 0 0;max-width:820px;padding:18px 20px;border-radius:14px;background:var(--card);
  border:1px solid var(--line-2);font-size:15.5px;color:var(--ink-2);line-height:1.55}
.not b{color:var(--ink)}

/* Prose and numbered steps. */
.prose{max-width:720px}
.prose p,.prose li{font-size:16.5px;color:var(--ink-2);line-height:1.65}
.prose p{margin:0 0 16px}
.prose a,.not a,.figs a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.prose code,.figs code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.steps{margin:0 0 20px;padding-left:22px}
.steps li{margin:0 0 10px;padding-left:4px}
.prose h3{margin:28px 0 8px}

/* Figures: a number, what it is, and where it comes from. */
.figs{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:860px){.figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fig{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.fig .sv{font-size:clamp(40px,4.4vw,56px);font-weight:700;letter-spacing:-.05em;line-height:1}
.fig .sl{font-size:15px;font-weight:650;letter-spacing:-.01em;margin-top:6px}
.fig p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.fig .src{margin-top:auto;padding-top:10px;font-size:13px;color:var(--ink-3)}
.caveat{margin:24px 0 0;max-width:820px;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.caveat b{color:var(--ink)}
.checked{margin:clamp(40px,5vw,56px) 0 0;font-size:13.5px;color:var(--ink-3)}
.checked a{color:inherit;text-underline-offset:3px}