:root { --ink:#1e2822; --muted:#526057; --primary:#34503e; --paper:#f7f8f3; --line:#d8dfd6; --surface:#edf1e8; --accent:#edc8c6; --radius:22px; color-scheme:light; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; font-size:17px; line-height:1.65; }
a { color:var(--primary); text-underline-offset:4px; }
a:hover { color:#0b2914; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--primary); outline-offset:5px; border-radius:4px; }
img { max-width:100%; height:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { line-height:1.15; letter-spacing:-.035em; text-wrap:balance; overflow-wrap:anywhere; hyphens:auto; }
h1 { font-size:clamp(2.4rem,4.6vw,4.5rem); margin-bottom:24px; }
h2 { font-size:clamp(1.4rem,2.3vw,2rem); }
p { margin-bottom:1.2em; }
.wrap { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:16px; padding:12px 18px; background:var(--paper); z-index:2; }
.skip:focus { top:12px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:100px; }
.site-header nav { display:flex; flex-wrap:wrap; gap:6px; }
.site-header nav a { padding:9px 12px; text-decoration:none; border-radius:9px; min-height:44px; display:inline-flex; align-items:center; font-size:15px; }
.site-header nav a[aria-current] { background:var(--surface); color:var(--ink); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-size:19px; font-weight:700; white-space:nowrap; min-height:44px; }
.brand img { border-radius:10px; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding:40px 0 64px; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; margin-bottom:20px; }
.lead { font-size:clamp(1.1rem,1.8vw,1.3rem); color:var(--muted); max-width:720px; }
.hero-art { display:block; width:100%; aspect-ratio:1; border-radius:var(--radius); }
.button { display:inline-flex; align-items:center; justify-content:center; padding:13px 23px; border-radius:12px; background:var(--primary); color:#fff; text-decoration:none; min-height:48px; font-size:16px; font-weight:600; }
.button:hover { color:#fff; background:#203a29; }
.release { display:flex; align-items:flex-start; gap:18px; padding:28px 30px; border-radius:var(--radius); background:var(--surface); }
.release h2 { font-size:21px; letter-spacing:-.02em; margin-bottom:8px; }
.release p { margin:0; color:var(--muted); }
.status-dot { width:11px; height:11px; flex-shrink:0; background:var(--primary); border-radius:50%; margin-top:9px; }
.section { padding-top:72px; }
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin:28px 0 0; }
.features div { border-top:1px solid var(--line); padding:24px 0; }
dt { font-size:20px; font-weight:650; }
dd { margin:8px 0 0; color:var(--muted); max-width:440px; }
.connection { padding-bottom:48px; max-width:820px; }
.connection ol { padding-left:26px; }
.connection li { padding:4px 0 8px 6px; }
.connection p { color:var(--muted); }
.page-heading { padding:48px 0 44px; }
.page-heading h1 { font-size:clamp(2.4rem,4vw,3.5rem); }
.support-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:64px; padding-bottom:60px; }
.faq details { border-top:1px solid var(--line); padding:16px 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:650; padding:10px 0; min-height:44px; }
.faq p { color:var(--muted); padding-top:12px; }
.contact { background:var(--surface); border-radius:var(--radius); padding:30px; align-self:start; }
.contact h2 { font-size:21px; margin-bottom:18px; }
.contact h2:not(:first-child) { margin-top:32px; }
.small { font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.text-link { display:inline-block; margin:6px 0 12px; min-height:44px; }
.policy-grid { display:grid; grid-template-columns:240px minmax(0,750px); gap:64px; padding-bottom:64px; }
.contents { align-self:start; position:sticky; top:30px; }
.contents a { display:block; padding:9px 0; font-size:15px; text-decoration:none; min-height:44px; }
.policy section { scroll-margin-top:36px; margin-bottom:40px; }
.policy h2 { font-size:25px; letter-spacing:-.02em; margin-bottom:18px; }
.policy p { color:#39483e; }
.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:30px; padding:28px 0 calc(28px + env(safe-area-inset-bottom)); font-size:14px; color:var(--muted); }
.site-footer p { margin:0; }
.site-footer a { padding:10px 0; min-height:44px; }
@media (max-width:900px) { .site-header { flex-wrap:wrap; gap:10px; padding:20px 0; } .site-header>nav:first-of-type { order:3; width:100%; } .hero { gap:30px; } .support-grid { gap:30px; } .policy-grid { grid-template-columns:180px minmax(0,1fr); gap:30px; } }
@media (max-width:640px) { .wrap { width:calc(100% - 36px); } .brand { font-size:17px; } .site-header { min-height:0; } .site-header nav a { padding:9px 10px; } .hero { grid-template-columns:1fr; padding-top:20px; gap:30px; } .hero-art { max-width:480px; } h1 { font-size:2.65rem; } .features,.support-grid,.policy-grid { grid-template-columns:1fr; } .features { gap:0; } .section { padding-top:48px; } .release { padding:22px; } .support-grid { gap:36px; } .contact { padding:24px; } .contents { position:static; border-bottom:1px solid var(--line); padding-bottom:20px; } .contents a { padding:8px 0; } .page-heading { padding:28px 0; } .site-footer { align-items:flex-start; flex-direction:column; gap:8px; } }