:root {
  --ink: #263a57;
  --muted: #637188;
  --coral: #f28b78;
  --coral-soft: #fbe4e0;
  --blue: #526f95;
  --blue-soft: #e6edf2;
  --paper: #fbf8f4;
  --card: #ffffff;
  --line: #ddd3c9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
}

a { color: inherit; }

.shell { margin: 0 auto; max-width: 1120px; padding: 0 24px; }

.site-header { padding: 22px 0; }

.nav {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.brand { align-items: center; display: inline-flex; font-size: 1rem; font-weight: 800; gap: 10px; letter-spacing: .08em; text-decoration: none; }
.brand img { border-radius: 12px; height: 36px; width: 36px; }
.nav-links { display: flex; gap: 18px; }
.nav-links a { color: var(--muted); font-size: .92rem; font-weight: 650; text-decoration: none; }
.nav-links a:hover { color: var(--blue); }

.hero { align-items: center; display: grid; gap: 52px; grid-template-columns: 1.08fr .92fr; min-height: 610px; padding: 54px 0 80px; }
.eyebrow { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: -.065em; line-height: .96; margin-bottom: 24px; max-width: 720px; }
.hero-copy { color: var(--muted); font-size: 1.16rem; line-height: 1.65; max-width: 560px; }
.button { background: var(--blue); border-radius: 999px; color: white; display: inline-block; font-weight: 750; margin-top: 14px; padding: 15px 23px; text-decoration: none; }
.button:hover { background: #405d81; }

.mark-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 34px; box-shadow: 0 20px 50px rgba(38, 58, 87, .09); padding: 26px; }
.mark-wrap img { border-radius: 21px; display: block; width: 100%; }

.section { padding: 72px 0; }
.section-blue { background: var(--blue); color: white; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.5rem); letter-spacing: -.045em; line-height: 1; margin-bottom: 16px; max-width: 680px; }
.section-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.65; max-width: 650px; }
.section-blue .section-intro { color: #dce7f2; }
.pillars { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 38px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 25px; }
.pillar h3 { font-size: 1.25rem; margin-bottom: 9px; }
.pillar p { color: var(--muted); line-height: 1.6; margin-bottom: 0; }
.number { color: var(--coral); font-size: .78rem; font-weight: 800; letter-spacing: .15em; }

.example { background: #eef3f7; border: 1px solid #ced9e2; border-radius: 26px; margin: 38px auto 0; max-width: 720px; padding: 30px; }
.example-label { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .13em; margin-bottom: 8px; }
.example-message { color: var(--ink); font-size: 1.25rem; font-weight: 750; line-height: 1.4; margin-bottom: 23px; }
.example-answer { border-left: 3px solid var(--coral); color: #43546a; line-height: 1.65; margin: 0; padding-left: 16px; }

.page-hero { border-bottom: 1px solid var(--line); padding: 76px 0 52px; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-bottom: 17px; }
.page-hero p { color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 650px; }
.article { color: #46566c; max-width: 760px; padding: 62px 24px 85px; }
.article h2 { color: var(--ink); font-size: 1.42rem; letter-spacing: -.025em; margin: 38px 0 12px; }
.article p, .article li { line-height: 1.72; }
.article ul { padding-left: 22px; }
.notice { background: #fff1dc; border: 1px solid #d78b42; border-radius: 14px; color: #805b2a; padding: 16px 18px; }
.support-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; margin-top: 28px; max-width: 620px; padding: 28px; }
.support-card h2 { margin: 0 0 10px; }
.support-card p { color: var(--muted); line-height: 1.6; }
.support-email { color: var(--blue); font-size: 1.1rem; font-weight: 750; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; padding: 28px 0 38px; }
.footer-content { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.footer-links { display: flex; gap: 16px; }

@media (max-width: 760px) {
  .shell { padding: 0 20px; }
  .nav { align-items: flex-start; }
  .brand { font-size: .8rem; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: .83rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 38px 0 64px; }
  h1 { font-size: clamp(3.2rem, 16vw, 4.5rem); }
  .mark-wrap { margin: 0 auto; max-width: 430px; }
  .pillars { grid-template-columns: 1fr; }
  .footer-content { align-items: flex-start; flex-direction: column; }
}