/* Non-critical styles: everything below the fold.
   Loaded async (media="print" -> all) so it never blocks the first paint.
   Tokens are declared in the inlined critical CSS in index.html. */

/* 7. This same system allowed me to.. */
.system{padding:34px 0 6px;border-top:1px solid var(--gold-rule)}
.system-grid{display:grid;gap:22px;align-items:center}
.system h2{font-family:var(--font-display);text-wrap:balance;font-weight:600;line-height:1.15;
  font-size:clamp(1.4rem,5vw,2.2rem);margin:0 0 16px;letter-spacing:-.01em}
.system-list{list-style:none;margin:0;padding:0}
.system-list li{position:relative;padding-left:22px;margin-bottom:12px;
  font-size:1rem;color:var(--text-secondary);line-height:1.45}
.system-list li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border-radius:50%;background:var(--gold-foil)}
.system-shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:1px solid var(--border-card);background:var(--bg-elevated)}

/* 8 + 9. Who this is for / who this isn't for */
.fit{padding:30px 0 6px}
.fit-grid{display:grid;gap:20px}
.fit-col h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,4.4vw,1.7rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--text-primary);margin:0 0 12px;
  padding-top:14px;border-top:1px solid var(--gold-rule)}
.fit-col ul{list-style:none;margin:0;padding:0}
.fit-col li{position:relative;padding-left:20px;margin-bottom:8px;
  font-size:.95rem;color:var(--text-secondary);line-height:1.45}
.fit-col li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;
  border-radius:50%;background:var(--gold-core)}
.fit-col.no li::before{background:var(--text-muted);opacity:.55}

/* 10. Urgency */
.urgency{padding:32px 0 34px}
.urgency h2{text-wrap:balance;margin:0 0 10px;text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.3rem,4.6vw,1.9rem);line-height:1.25;color:var(--text-primary);
  max-width:26ch;margin-inline:auto}
.urgency p{margin:0;text-align:center;color:var(--text-secondary);font-size:1rem;
  max-width:34ch;margin-inline:auto}
.urgency-cta{margin-top:18px!important;max-width:360px!important}
.btn-link{display:block;text-decoration:none;text-align:center;line-height:20px}

.foot{border-top:1px solid var(--gold-rule);padding:20px 0 30px;text-align:center}
.foot p{margin:0 0 6px;font-size:.8rem;color:var(--text-muted)}
.foot a{display:inline-block;min-height:44px;line-height:28px;padding:8px 10px;color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--gold-rule);transition:color .18s cubic-bezier(.22,1,.36,1),
  border-color .18s cubic-bezier(.22,1,.36,1)}
.foot a:hover{color:var(--gold-core);border-bottom-color:var(--gold-core)}
.foot .dot{opacity:.5;padding:0 4px}
.foot-mark{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}

@media(min-width:900px){
  .system{padding:56px 0 10px}
  .system-grid{grid-template-columns:1.1fr .9fr;gap:44px}
  .system-list li{font-size:1.08rem}
  .fit{padding:44px 0 10px}
  .fit-grid{grid-template-columns:1fr 1fr;gap:44px}
  .urgency{padding:48px 0 52px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}