:root {
  --ink: #123442;
  --muted: #5d7680;
  --teal: #087f89;
  --teal-dark: #075762;
  --aqua: #e8f8f6;
  --cream: #fffaf1;
  --coral: #f17f68;
  --line: #d5e6e5;
  --shadow: 0 22px 55px rgba(18, 52, 66, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.topbar { padding: 20px 0; border-bottom: 1px solid rgba(18,52,66,.1); background: rgba(255,250,241,.92); }
.nav { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:white; background:linear-gradient(135deg,#17b7bd,#087f89); font-size:18px; }
.nav-links { display:flex; gap:22px; color:var(--muted); font-size:14px; }
.nav-links a { text-decoration:none; }
.hero { padding: 76px 0 66px; background: radial-gradient(circle at 80% 15%, #bdece6 0, transparent 34%), linear-gradient(135deg, #e8f8f6, #fffaf1 72%); }
.eyebrow { color:var(--teal); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.14em; }
h1,h2,h3 { line-height:1.08; letter-spacing:-.045em; margin:0 0 18px; }
h1 { max-width:740px; font-size:clamp(42px, 7vw, 76px); }
h2 { font-size:clamp(30px, 4vw, 46px); }
h3 { font-size:24px; }
.lede { max-width:650px; color:var(--muted); font-size:20px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:999px; background:var(--teal); color:white; text-decoration:none; font-weight:750; box-shadow:0 8px 18px rgba(8,127,137,.2); }
.button.secondary { background:white; color:var(--teal-dark); border:1px solid var(--line); box-shadow:none; }
.section { padding:74px 0; }
.section.aqua { background:var(--aqua); }
.section-head { max-width:650px; margin-bottom:32px; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.card { padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.7); box-shadow:var(--shadow); }
.card p { color:var(--muted); }
.card-link { display:inline-flex; margin-top:10px; color:var(--teal-dark); font-weight:800; text-decoration:none; }
.number { width:38px; height:38px; display:grid; place-items:center; margin-bottom:22px; border-radius:12px; background:#d0f0eb; color:var(--teal-dark); font-weight:850; }
.note { padding:20px 22px; border-left:4px solid var(--coral); border-radius:12px; background:#fff1e9; color:#5a4138; }
.footer { padding:36px 0 56px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.footer a { color:var(--teal-dark); }
.guide-hero { padding:60px 0 42px; background:linear-gradient(135deg,#e8f8f6,#fffaf1); }
.guide { max-width:790px; }
.guide h2 { margin-top:46px; font-size:32px; }
.checklist { display:grid; gap:12px; margin:22px 0; padding:0; list-style:none; }
.checklist li { padding:16px 18px 16px 46px; position:relative; border:1px solid var(--line); border-radius:14px; background:white; }
.checklist li:before { content:"□"; position:absolute; left:17px; color:var(--teal); font-size:22px; line-height:1; }
.printbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; background:var(--teal-dark); color:white; }
.printbar .button { background:white; color:var(--teal-dark); box-shadow:none; }
table { width:100%; border-collapse:collapse; margin:22px 0; background:white; }
th,td { padding:13px; border:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#e8f8f6; }
.tiny { font-size:13px; }
@media (max-width:700px) { .wrap{width:min(100% - 28px,1120px)} .nav-links{display:none} .hero{padding:56px 0 50px} .grid{grid-template-columns:1fr} .card{padding:23px} .printbar{align-items:flex-start; flex-direction:column} }
@media print { .topbar,.actions,.printbar .button,.footer,.no-print { display:none!important } body{background:white}.guide-hero{padding:0;background:white}.section{padding:18px 0}.card{box-shadow:none} }