@font-face { font-family: "Source Serif 4"; src: url(/fonts/sourceserif.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
:root { --display: "Source Serif 4", Georgia, serif; --us: #eaf2fd; --us-head: #dceaff; }
@media (prefers-color-scheme: dark) { :root { --us: var(--band); --us-head: var(--soft); } }
h1 { font-weight: 600; letter-spacing: -.022em; line-height: 1.08; font-optical-sizing: auto; }
h2 { font-weight: 600; letter-spacing: -.018em; line-height: 1.15; font-size: clamp(28px, 3.4vw, 38px); font-optical-sizing: auto; }
h3 { font-family: var(--sys); font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.note { margin-top: 16px; }
.mid { margin-top: 36px; }

.hero { padding: 76px 0 72px; border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; gap: 44px 72px; grid-template-columns: 1fr; align-items: start; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); max-width: 15ch; }
.hero .lede { margin-top: 22px; max-width: 36ch; }
.hero .cta-row { margin-top: 30px; }
.facts { border: 1px solid var(--line); border-radius: 8px; padding: 22px 28px 6px; background: var(--bg); }
.facts h2 { font-family: var(--sys); font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.facts dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
@media (min-width: 1000px) { .hero .wrap { grid-template-columns: 7fr 5fr; } }

.terms-band { background: var(--band); border-bottom: 1px solid var(--line); padding: 64px 0 56px; }
.terms-band ul { display: grid; grid-template-columns: 1fr; margin-top: 32px; border-top: 1px solid var(--line); }
.terms-band li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.terms-band p { color: var(--muted); margin-top: 6px; max-width: 38ch; }
@media (min-width: 900px) {
  .terms-band ul { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .terms-band li { padding: 4px 32px 4px 28px; border-bottom: 0; border-left: 1px solid var(--line); }
  .terms-band li:first-child { padding-left: 0; border-left: 0; }
}

.build, .next { padding: 84px 0 8px; }
.def { margin-top: 30px; border-top: 1px solid var(--line); }
.def > div { display: grid; gap: 4px 48px; grid-template-columns: 1fr; padding: 24px 0; border-bottom: 1px solid var(--line); }
.def dt { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.012em; }
.def dd { margin: 0; color: var(--muted); max-width: 56ch; }
@media (min-width: 860px) { .def > div { grid-template-columns: 4fr 8fr; } }

.next { padding-bottom: 84px; }
.links { margin-top: 30px; border-top: 1px solid var(--line); }
.links a { display: grid; gap: 4px 32px; grid-template-columns: 1fr auto; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.l-name { font-family: var(--display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.015em; grid-column: 1; transition: color 150ms ease-out; }
.l-line { color: var(--muted); grid-column: 1; }
.links .i { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--muted); transition: transform 220ms var(--ease), color 150ms ease-out; }
.links a:hover .l-name, .links a:hover .i { color: var(--accent); }
.links a:hover .i { transform: translateX(5px); }
@media (min-width: 860px) { .links a { grid-template-columns: 4fr 6fr auto; } .l-line { grid-column: 2; } .links .i { grid-column: 3; grid-row: 1; } }

.closer { padding: 88px 0; border-top: 1px solid var(--line); background: var(--band); }
.closer h2 { max-width: 20ch; margin-bottom: 28px; font-size: clamp(30px, 4vw, 44px); }

.page-head { padding: 76px 0 44px; }
.page-head h1 { font-size: clamp(38px, 5.4vw, 64px); max-width: 16ch; }
.page-head .lede { margin-top: 18px; }
.block { padding: 64px 0; }
.block.tint { background: var(--band); border-block: 1px solid var(--line); }
.block h2 + .tablewrap { margin-top: 28px; }
.split { display: grid; gap: 28px 72px; grid-template-columns: 1fr; align-items: start; }
.split .sub { margin-top: 12px; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; } }

.tablewrap { border: 1px solid var(--line); border-radius: 8px; overflow: clip; background: var(--bg); }
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { text-align: left; vertical-align: top; padding: 18px 22px; border-top: 1px solid var(--line); line-height: 1.55; }
.matrix thead th { border-top: 0; background: var(--band); font-size: 14px; font-weight: 650; color: var(--muted); padding-block: 14px; }
.matrix tbody th { width: 25%; font-weight: 650; }
.matrix td { color: var(--muted); }
.compare .us { background: var(--us); color: var(--ink); }
.compare thead .us { color: var(--ink); background: var(--us-head); }
.compare tbody .us { font-weight: 550; }

.phases > div { display: grid; gap: 4px 40px; grid-template-columns: 1fr; padding: 24px 0; border-top: 1px solid var(--line); }
.phases > div:last-child { border-bottom: 1px solid var(--line); }
.phases dt { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.012em; }
.phases dd { margin: 0; }
.phases dd:not(.out) { color: var(--muted); }
.phases .out { font-weight: 650; }
@media (min-width: 900px) { .phases > div { grid-template-columns: 5fr 4fr 3fr; align-items: baseline; } }
.check.big { gap: 14px; font-size: 19px; }
.check.big li::before { top: .5em; }

.sheet { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.sheet > div { display: grid; gap: 4px 28px; grid-template-columns: 1fr; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.sheet > div:last-child { border-bottom: 0; }
.sheet dt { color: var(--muted); font-weight: 600; font-size: 15px; }
.sheet dd { margin: 0; line-height: 1.6; }
@media (min-width: 760px) { .sheet > div { grid-template-columns: 200px 1fr; } }

.contact .two { display: grid; gap: 48px 72px; grid-template-columns: 1fr; align-items: start; }
.contact h1 { max-width: 14ch; }
.bring { font-family: var(--sys); font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 44px 0 14px; }
.person img { width: 100%; max-width: 340px; border-radius: 8px; }
.person figcaption { margin-top: 14px; display: grid; gap: 2px; }
.person figcaption span { color: var(--muted); font-size: 15px; }
@media (min-width: 900px) { .contact .two { grid-template-columns: 7fr 5fr; } }

@media (max-width: 759px) {
  .hero { padding: 44px 0 48px; }
  .hero .cta-row .btn, .closer .cta-row .btn, .contact .cta-row .btn { width: 100%; }
  .facts { padding: 20px 20px 4px; }
  .facts dl > div { grid-template-columns: 1fr; gap: 2px; }
  .terms-band { padding: 48px 0 40px; }
  .build { padding-top: 60px; }
  .next { padding-bottom: 60px; }
  .page-head { padding: 48px 0 32px; }
  .block { padding: 48px 0; }
  .closer { padding: 60px 0; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tr { padding: 14px 0; border-top: 1px solid var(--line); }
  .matrix tr:first-child { border-top: 0; }
  .matrix th, .matrix td { border: 0; padding: 4px 18px; }
  .matrix tbody th { width: 100%; padding-top: 8px; }
  .matrix td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 650; color: var(--accent); margin-bottom: 2px; }
  .compare .us { margin: 8px 12px 0; width: auto; border-radius: 8px; padding: 10px 14px; }
  .sheet > div { padding: 16px 20px; }
}

@media print {
  body { font-size: 11pt; color: CanvasText; background: Canvas; }
  .btn, .link-arrow, .cta-row { display: none; }
  .hero, .block, .page-head, .terms-band, .closer { padding: 18pt 0; background: none; }
  .tablewrap, .sheet, .facts { break-inside: avoid; }
}

.btn { border-radius: 6px; box-shadow: none; }
.btn:hover { transform: none; }
.top { background: var(--bg); border-bottom: 2px solid var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo small { border-left-color: var(--ink); }
.nav a { border-radius: 0; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.nav a:hover { background: transparent; color: var(--accent); }
.foot { border-top: 2px solid var(--ink); }
.foot-main p { font-family: var(--display); font-size: 17px; line-height: 1.6; color: var(--ink); }