/*
 * "How to become a streamer" guide on CCT One. Reuses the homepage system (home.css) and the
 * use-cases helpers (use-cases.css: .uc-head, .uc-jump, .uc-actions, .uc-checks). Tokens only.
 */

/* ---------- Hero ---------- */
.sg-hero { padding: 64px 0 56px; }
@media (max-width: 979px) { .sg-hero { padding: 32px 0 40px; } }
.sg-hero .hm-wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 1079px) { .sg-hero .hm-wrap { grid-template-columns: 1fr; gap: 40px; } }
.sg-hero h1 { margin-top: 18px; font-size: clamp(2.5rem, 4.8vw, 4rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.sg-hero h1 span { display: block; margin-top: 6px; color: var(--cct-violet-400); }
.sg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 400 0.8125rem var(--cct-font-mono); color: var(--cct-text-3); }

/* The route: seven stops, with a real clip coming out the side */
.sg-hero .hm-machine { padding-top: 0; padding-right: 232px; }
.sg-hero .hm-phone { top: 50%; margin-top: -196px; }
@media (max-width: 600px) {
    .sg-hero .hm-machine { padding: 0 0 262px; }
    .sg-hero .hm-phone { top: auto; margin-top: 0; }
}
.sg-route { list-style: none; margin: 0; padding: 6px 0; }
.sg-route li + li { border-top: 1px solid var(--cct-line); }
.sg-route a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; }
.sg-route a:hover { background: var(--cct-violet-wash); }
.sg-route b { font: 500 0.8125rem var(--cct-font-mono); color: var(--cct-violet-400); }
.sg-route strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.sg-route small { display: block; font-size: 0.8125rem; color: var(--cct-text-3); }
.sg-route time { font: 400 0.75rem var(--cct-font-mono); color: var(--cct-text-3); white-space: nowrap; }
.sg-route .is-key strong { color: var(--cct-signal); }
@media (max-width: 600px) { .sg-route time { display: none; } .sg-route a { grid-template-columns: 34px minmax(0, 1fr); } }

/* ---------- Step sections ---------- */
.sg-step { scroll-margin-top: 56px; }
.sg-step .hm-eyebrow b { font-weight: 500; color: var(--cct-text-3); }
.sg-note { margin-top: 20px; padding: 16px 18px; border-radius: var(--cct-radius-card); border: 1px solid var(--cct-line-strong); background: var(--cct-raised); font-size: 0.9375rem; color: var(--cct-text-2); }
.sg-note strong { color: var(--cct-text); font-weight: 600; }
.sg-note--signal { border-color: rgba(94, 234, 212, 0.35); }
.sg-note--signal strong:first-child { color: var(--cct-signal); }

/* Platforms */
.sg-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1079px) { .sg-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sg-platforms { grid-template-columns: 1fr; } }
.sg-platform { display: flex; flex-direction: column; padding: 22px; }
.sg-platform h3 { font-size: 1.25rem; font-weight: 700; }
.sg-platform dl { margin: 14px 0 0; display: grid; gap: 12px; }
.sg-platform dt { font: 500 0.6875rem var(--cct-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cct-text-3); }
.sg-platform dd { margin: 3px 0 0; font-size: 0.9375rem; color: var(--cct-text-2); }
.sg-platform dd strong { color: var(--cct-text); font-weight: 600; }

/* Niche: the directory test */
.sg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 979px) { .sg-split { grid-template-columns: 1fr; gap: 32px; } }
.sg-split .hm-lede { max-width: none; }
.sg-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sg-dir { padding: 16px; }
.sg-dir h3 { font-size: 0.9375rem; font-weight: 600; }
.sg-dir > small { display: block; margin-top: 2px; font: 400 0.75rem var(--cct-font-mono); color: var(--cct-text-3); }
.sg-dir ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.sg-dir li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--cct-bg); border: 1px solid var(--cct-line); font: 400 0.75rem var(--cct-font-mono); color: var(--cct-text-3); }
.sg-dir li i { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--cct-danger); }
.sg-dir li span { margin-left: auto; }
.sg-dir li.is-gap { height: auto; padding: 2px 0; border: 0; background: none; justify-content: center; letter-spacing: 0.3em; }
.sg-dir li.is-you { border-color: var(--cct-violet-400); background: var(--cct-violet-wash); color: var(--cct-text); }
.sg-dir p { margin-top: 12px; font-size: 0.8125rem; color: var(--cct-text-2); }

/* Lanes: you don't have to stream games */
.sg-lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1079px) { .sg-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .sg-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-lane { padding: 18px; }
.sg-lane .hm-eyebrow { margin-bottom: 8px; }
.sg-lane h3 { font-size: 1.0625rem; font-weight: 600; }
.sg-lane p:not(.hm-eyebrow) { margin-top: 6px; font-size: 0.875rem; color: var(--cct-text-2); }
.sg-lane:last-child .hm-eyebrow { color: var(--cct-text-3); }

/* Gear */
.sg-gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899px) { .sg-gear { grid-template-columns: 1fr; } }
.sg-tier { padding: 24px; }
.sg-tier .cct-badge { margin-bottom: 14px; }
.sg-tier h3 { font-size: 1.25rem; font-weight: 700; }
.sg-tier > p { margin-top: 8px; font-size: 0.9375rem; color: var(--cct-text-2); }

/* Software: steps on the left, settings sheet on the right */
.sg-sheet { padding: 6px 0; }
.sg-sheet-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--cct-line); font: 500 0.75rem var(--cct-font-mono); }
.sg-sheet-head small { color: var(--cct-signal); }
.sg-sheet dl { margin: 0; }
.sg-sheet dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 18px; font-size: 0.9375rem; }
.sg-sheet dl > div + div { border-top: 1px solid var(--cct-line); }
.sg-sheet dt { color: var(--cct-text-2); }
.sg-sheet dd { margin: 0; font: 500 0.875rem var(--cct-font-mono); text-align: right; }
.sg-sheet p { padding: 12px 18px 10px; border-top: 1px solid var(--cct-line); font-size: 0.8125rem; color: var(--cct-text-3); }

/* First-stream checklist */
.sg-check { padding: 8px 0; }
.sg-check-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--cct-line); }
.sg-check-head strong { font-size: 0.9375rem; font-weight: 600; }
.sg-check-head span { font: 500 0.8125rem var(--cct-font-mono); color: var(--cct-signal); }
.sg-check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 18px; cursor: pointer; font-size: 0.9375rem; }
.sg-check label + label { border-top: 1px solid var(--cct-line); }
.sg-check label:hover { background: var(--cct-violet-wash); }
.sg-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1px solid var(--cct-line-strong); background: var(--cct-bg); cursor: pointer; display: grid; place-items: center; }
.sg-check input:checked { background: var(--cct-violet-600); border-color: var(--cct-violet-600); }
.sg-check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.sg-check small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--cct-text-3); }
.sg-check input:checked + span { color: var(--cct-text-3); }

/* Get found */
.sg-found .hm-h2 { max-width: 16ch; }
.sg-found-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px 48px; align-items: end; margin-bottom: 36px; }
@media (max-width: 899px) { .sg-found-head { grid-template-columns: 1fr; } }
.sg-found-head .hm-lede { margin-top: 0; }
.sg-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
@media (max-width: 767px) { .sg-versus { grid-template-columns: 1fr; } }
.sg-versus article { padding: 24px; }
.sg-versus h3 { font-size: 1.125rem; font-weight: 600; }
.sg-versus p:not(.hm-eyebrow) { margin-top: 8px; font-size: 0.9375rem; color: var(--cct-text-2); }
.sg-versus .is-win { border-color: var(--cct-violet-400); }
.sg-show-note { margin: 0 0 16px; font: 400 0.8125rem var(--cct-font-mono); color: var(--cct-text-3); }
.sg-loop { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 979px) { .sg-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sg-loop { grid-template-columns: 1fr; } }
.sg-loop li { padding: 22px; }
.sg-loop h3 { margin-top: 10px; font-size: 1.0625rem; font-weight: 600; }
.sg-loop p { margin-top: 6px; font-size: 0.9375rem; color: var(--cct-text-2); }
.sg-loop .is-cct { border-color: var(--cct-violet-400); background: var(--cct-violet-tint); }
.sg-inline-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sg-inline-cta .hm-form { flex: 1 1 420px; }
.sg-inline-cta .hm-trial { margin-top: 0; }

/* Get paid */
.sg-paid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899px) { .sg-paid { grid-template-columns: 1fr; } }
.sg-pay { padding: 24px; }
.sg-pay h3 { font-size: 1.25rem; font-weight: 700; }
.sg-pay > small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--cct-text-3); }
.sg-pay ul { list-style: none; margin: 16px 0 0; padding: 0; }
.sg-pay li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--cct-line); font-size: 0.9375rem; color: var(--cct-text-2); }
.sg-pay li b { font: 500 0.9375rem var(--cct-font-mono); color: var(--cct-text); white-space: nowrap; }
.sg-checked { margin-top: 16px; font: 400 0.8125rem var(--cct-font-mono); color: var(--cct-text-3); }
.sg-pay p { margin-top: 12px; font-size: 0.8125rem; color: var(--cct-text-3); }

/* First 30 days */
.sg-weeks { list-style: none; margin: 32px 0 0; padding: 0; }
.sg-weeks li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--cct-line); }
.sg-weeks li:last-child { border-bottom: 1px solid var(--cct-line); }
.sg-weeks h3 { font-size: 1.125rem; font-weight: 600; }
.sg-weeks p { margin-top: 4px; font-size: 0.9375rem; color: var(--cct-text-2); max-width: 720px; }
@media (max-width: 599px) { .sg-weeks li { grid-template-columns: 1fr; gap: 4px; } }

/* FAQ */
.sg-faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px 56px; }
@media (max-width: 899px) { .sg-faq { grid-template-columns: 1fr; } }
.sg-faq details { border-top: 1px solid var(--cct-line); }
.sg-faq details:last-child { border-bottom: 1px solid var(--cct-line); }
.sg-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; font: 400 1.25rem/1 var(--cct-font-mono); color: var(--cct-violet-400); }
.sg-faq details[open] summary::after { content: "\2212"; }
.sg-faq details p { padding: 0 0 18px; font-size: 0.9375rem; color: var(--cct-text-2); max-width: 640px; }
.sg-faq a { color: var(--cct-violet-400); }
.sg-faq-more { padding: 18px 0 0; font-size: 0.875rem; color: var(--cct-text-3); }
.sg-loop a { color: var(--cct-violet-400); }

/* ---------- Clipping competitions page ---------- */
.cc-hero-form { margin-top: 28px; }
.cc-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1079px) { .cc-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cc-rules { grid-template-columns: 1fr; } }
.cc-rules article { padding: 22px; }
.cc-rules h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.cc-rules p:not(.hm-eyebrow) { margin-top: 8px; font-size: 0.9375rem; color: var(--cct-text-2); }
.cc-calc { padding: 8px 0 0; overflow: hidden; }
.cc-calc label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; font-size: 0.9375rem; color: var(--cct-text-2); }
.cc-calc label + label { border-top: 1px solid var(--cct-line); }
.cc-calc input { width: 120px; height: 40px; padding: 0 12px; border-radius: var(--cct-radius-control); border: 1px solid var(--cct-line-strong); background: var(--cct-bg); color: var(--cct-text); font: 500 0.9375rem var(--cct-font-mono); text-align: right; }
.cc-calc input:focus { border-color: var(--cct-violet-400); }
.cc-calc dl { margin: 8px 0 0; background: var(--cct-violet-tint); border-top: 1px solid var(--cct-line); }
.cc-calc dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.cc-calc dl > div + div { border-top: 1px solid var(--cct-line-soft); }
.cc-calc dt { font-size: 0.9375rem; color: var(--cct-text-2); }
.cc-calc dd { margin: 0; font: 500 1.5rem var(--cct-font-mono); color: var(--cct-text); }