:root { color-scheme: light; --ink: #18382d; --muted: #556c63; --green: #195640; --line: #d9e3db; --paper: #f7f9f5; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--green); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #207953; outline-offset: 5px; border-radius: 4px; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.header { display: flex; justify-content: space-between; align-items: center; padding-block: 26px; border-bottom: 1px solid var(--line); gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 21px; font-weight: 750; text-decoration: none; letter-spacing: -.6px; }
.brand > span:last-child { font-weight: 400; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--green); color: white; font-size: 27px; line-height: 1; padding-bottom: 4px; }
.back { font-size: 14px; font-weight: 650; text-decoration: none; }
.hero { padding: 68px 0 36px; max-width: 800px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 750; letter-spacing: .16em; margin: 0 0 17px; }
h1 { font-size: clamp(34px, 4.5vw, 55px); letter-spacing: -.045em; line-height: 1.1; font-weight: 650; margin: 0 0 24px; }
.intro { max-width: 620px; color: var(--muted); font-size: 18px; line-height: 1.65; margin: 0 0 22px; }
.ready { display: inline-flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 14px; margin: 0; }
.ready span { color: var(--green); font-weight: bold; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 65px; }
.option { display: flex; flex-direction: column; padding: 27px 25px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: white; transition: border-color .15s, transform .15s; color: var(--ink); }
.option:hover { border-color: var(--green); transform: translateY(-3px); }
.device { font-size: 10px; letter-spacing: .14em; font-weight: 750; color: var(--muted); margin-bottom: 24px; }
.option h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.03em; line-height: 1.2; }
.option p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 25px; }
.option-link { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 750; color: var(--green); margin-top: auto; }
.setup-section { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; padding: 54px 0; border-top: 1px solid var(--line); }
.section-heading h2, .help h2 { margin: 0 0 15px; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
.section-heading p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin: 0; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 48px; padding: 12px 20px; background: var(--green); color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 650; }
.primary:hover { background: #123f30; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0; }
.steps li { position: relative; padding-left: 41px; margin: 0 0 19px; color: var(--muted); font-size: 14px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #bfcfc4; border-radius: 50%; color: var(--green); font-size: 12px; font-weight: 700; }
strong { color: var(--ink); font-weight: 650; }
.note { background: #eaf0e7; border-left: 3px solid #7b9d70; padding: 16px 20px; border-radius: 0 8px 8px 0; font-size: 13px; color: var(--muted); }
.note p { margin: 5px 0 0; }
.small { font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px; }
caption { text-align: left; padding: 16px 19px; font-weight: 700; border-bottom: 1px solid var(--line); }
th, td { padding: 13px 17px; border-bottom: 1px solid #e5ebe6; vertical-align: top; }
thead th { background: #edf2eb; font-weight: 650; color: var(--green); }
tbody th { font-weight: 550; }
tbody td { color: var(--muted); }
tbody tr:last-child > * { border: 0; }
code { font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); white-space: nowrap; user-select: all; }
.help { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; padding: 34px; border-radius: 16px; background: #eaf0e7; margin-block: 25px 65px; }
details { border-bottom: 1px solid #cbd7cc; }
details:last-child { border: 0; }
summary { cursor: pointer; font-size: 14px; font-weight: 650; padding: 16px 0; }
details p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); padding-block: 26px; font-size: 12px; color: var(--muted); }
.skip { position: absolute; top: -80px; left: 16px; background: white; padding: 12px; z-index: 10; }
.skip:focus { top: 10px; }
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .header { padding-block: 20px; }
  .brand { font-size: 18px; gap: 7px; }
  .back { font-size: 12px; }
  .hero { padding-top: 42px; }
  .intro { font-size: 16px; }
  .options { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
  .option { padding: 22px; }
  .device { margin-bottom: 12px; }
  .option p { margin-bottom: 16px; }
  .setup-section, .help { grid-template-columns: 1fr; gap: 26px; }
  .setup-section { padding-block: 36px; }
  .help { padding: 24px; margin-bottom: 40px; }
  th, td { padding: 11px; }
  .primary { width: 100%; gap: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .option { transition: none; } .option:hover { transform: none; } }
@media print { .header, .options, .footer, .skip { display: none; } .wrap { width: 100%; } .setup-section { break-inside: avoid; } body { background: white; } }