:root { color-scheme: light; --ink:#172c36; --muted:#53666c; --accent:#23665e; --line:#dbe3df; --paper:#fafbf8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.7; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.site-header,main,footer { width:min(100% - 48px,1000px); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:96px; border-bottom:1px solid var(--line); font-size:14px; }
.brand { text-decoration:none; font-weight:750; letter-spacing:.06em; color:var(--ink); }
.brand span { font-weight:400; letter-spacing:0; color:var(--muted); }
.hero { padding:82px 0 56px; max-width:780px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:750; letter-spacing:.16em; margin:0 0 18px; }
h1 { font-size:clamp(36px,6vw,66px); line-height:1.12; letter-spacing:-.045em; margin:0 0 28px; }
h1 span { color:var(--accent); }
.intro { font-size:clamp(19px,2.5vw,23px); color:var(--muted); max-width:780px; }
.notice { border-left:3px solid var(--accent); padding:12px 20px; background:#eef3ed; border-radius:0 10px 10px 0; font-size:16px; }
.section { padding:32px 0; border-top:1px solid var(--line); }
h2 { font-size:25px; line-height:1.3; letter-spacing:-.02em; margin:0 0 18px; }
h3 { font-size:18px; margin:0 0 9px; }
p { margin:0 0 18px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:30px; }
.features article { padding-top:18px; border-top:2px solid #bfd0c6; }
.features p { font-size:16px; color:var(--muted); }
.text-link { font-weight:650; }
.contact p { margin-bottom:8px; }
footer { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding:26px 0 40px; margin-top:30px; font-size:14px; color:var(--muted); }
.policy { max-width:780px; padding-top:62px; }
.policy h1 { font-size:clamp(36px,5vw,50px); }
.policy section { margin:36px 0; }
.updated { font-size:14px; color:var(--muted); }
code { font-size:.92em; background:#eaf0e9; padding:2px 5px; border-radius:4px; }
@media(max-width:620px) { .site-header,main,footer { width:calc(100% - 36px); } .site-header { min-height:80px; gap:14px; } .brand span { display:block; } .hero { padding-top:48px; } .features { grid-template-columns:1fr; gap:12px; } .policy { padding-top:44px; } h2 { font-size:23px; } }