:root {
  color-scheme: light;
  --paper: #f6f5f0;
  --surface: #ffffff;
  --ink: #18211f;
  --muted: #63706c;
  --navy: #132c35;
  --teal: #007c70;
  --teal-dark: #005e56;
  --teal-soft: #dff2e9;
  --sand: #eee9de;
  --rule: #d8ded9;
  --warning: #805400;
  --warning-soft: #fff3d5;
  --focus: rgba(0, 124, 112, .28);
  --display: Georgia, "Times New Roman", serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 20px 55px rgba(19, 44, 53, .09);
  --shadow-small: 0 4px 16px rgba(19, 44, 53, .06);
  --radius: 6px;
  --shell: 1180px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, select { font: inherit; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--teal); }
::selection { background: var(--teal-soft); color: var(--navy); }

.shell { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 12px;
  translate: 0 -160%;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy);
  padding: 10px 14px;
  box-shadow: var(--shadow-small);
  font-weight: 800;
}
.skip-link:focus { translate: 0; }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid rgba(216, 222, 217, .9);
  background: rgba(246, 245, 240, .95);
  backdrop-filter: blur(14px);
}
.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.primary-nav { display: flex; align-items: center; gap: 24px; }
.primary-nav a { color: #44514d; font-size: 12px; font-weight: 750; text-decoration: none; }
.primary-nav a:hover { color: var(--teal-dark); }
.header-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.language-control select {
  min-height: 36px;
  border: 1px solid #bfc8c3;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy);
  padding: 6px 28px 6px 9px;
  font-size: 11px;
  font-weight: 800;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  padding: 11px 19px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(0, 124, 112, .15);
  transition: background-color .16s ease, border-color .16s ease, translate .16s ease;
}
.button:hover { border-color: var(--teal-dark); background: var(--teal-dark); color: #fff; translate: 0 -1px; }
.button-small { min-height: 38px; padding: 8px 13px; font-size: 11px; }
.text-link { font-size: 13px; font-weight: 800; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { max-width: 740px; margin-bottom: 22px; font-size: clamp(50px, 6vw, 76px); letter-spacing: -.06em; line-height: .99; }
h2 { margin-bottom: 18px; font-size: clamp(36px, 4.5vw, 55px); letter-spacing: -.05em; line-height: 1.04; }
h3 { margin-bottom: 10px; color: var(--navy); font-size: 18px; letter-spacing: -.02em; line-height: 1.3; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .78fr);
  align-items: center;
  gap: 70px;
  min-height: 720px;
  padding-top: 76px;
  padding-bottom: 78px;
}
.hero-copy { padding-bottom: 20px; }
.lede { max-width: 660px; margin-bottom: 24px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero-fit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.hero-fit span {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: #44514d;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
}
.hero-fit span:nth-child(2) { border-color: #dec78e; background: var(--warning-soft); color: var(--warning); }
.hero-actions { display: flex; align-items: center; gap: 20px; }
.price-line { display: flex; align-items: baseline; gap: 9px; margin: 25px 0 2px; color: var(--muted); font-size: 12px; }
.price-line strong { color: var(--navy); font-family: var(--display); font-size: 24px; font-weight: 400; }
.microcopy { margin: 0; color: var(--muted); font-size: 11px; }

.document-stage { position: relative; margin: 0; }
.document-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.document-label span:last-child { border: 1px solid #b8c3bd; border-radius: 3px; padding: 2px 5px; }
.pdf-sheet {
  position: relative;
  aspect-ratio: 1 / 1.28;
  border: 1px solid #d7d8d2;
  background: #fffefb;
  padding: clamp(27px, 4.5vw, 48px);
  box-shadow: var(--shadow);
  color: #28322f;
  font-size: 9px;
}
.pdf-sheet::before {
  position: absolute;
  inset: 11px;
  border: 1px solid #ecebe4;
  content: "";
  pointer-events: none;
}
.pdf-topline { display: flex; justify-content: space-between; border-bottom: 2px solid var(--navy); padding-bottom: 9px; color: var(--navy); }
.pdf-topline span { font-family: var(--display); font-size: 20px; }
.pdf-topline b { align-self: end; font-size: 11px; }
.pdf-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0 17px; }
.pdf-heading div:first-child { display: grid; gap: 4px; }
.pdf-heading small, .pdf-summary small { color: #77817d; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pdf-heading strong { font-size: 13px; }
.pdf-code { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--navy); border-radius: 50%; color: var(--navy); font-size: 8px; font-weight: 900; }
.pdf-summary { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #cfd6d1; background: #f3f5f1; }
.pdf-summary > div { display: grid; gap: 6px; padding: 13px; }
.pdf-summary > div + div { border-left: 1px solid #cfd6d1; }
.pdf-summary strong { color: var(--navy); font-family: var(--display); font-size: 16px; font-weight: 400; }
.pdf-section-title { margin-top: 25px; border-bottom: 1px solid var(--navy); padding-bottom: 7px; color: var(--navy); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.pdf-table { display: grid; grid-template-columns: minmax(0, 1fr) 55px 73px; gap: 8px; border-bottom: 1px solid #e4e6e1; padding: 9px 3px; }
.pdf-table span:nth-child(n+2) { text-align: right; }
.pdf-table-head { color: #717b77; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.pdf-divider { height: 34px; margin-top: 25px; border-top: 1px solid #e4e6e1; border-bottom: 1px solid #e4e6e1; }
.pdf-footer { position: absolute; right: clamp(27px, 4.5vw, 48px); bottom: 27px; left: clamp(27px, 4.5vw, 48px); display: flex; justify-content: space-between; color: #8b938f; font-size: 7px; }
.document-stage figcaption { max-width: 360px; margin: 15px auto 0; color: var(--muted); font-size: 11px; text-align: center; }

.scope-strip { border-block: 1px solid var(--rule); background: var(--surface); }
.scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.scope-grid > div { display: grid; gap: 4px; min-height: 94px; align-content: center; padding: 18px 24px; }
.scope-grid > div + div { border-left: 1px solid var(--rule); }
.scope-grid strong { color: var(--teal-dark); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.scope-grid span { color: var(--navy); font-size: 12px; font-weight: 750; }

.section { padding-top: 110px; padding-bottom: 110px; }
.section-tinted { border-block: 1px solid var(--rule); background: #eef1ed; }
.section-intro { max-width: 770px; margin-bottom: 52px; }
.section-intro.narrow { max-width: 610px; }
.section-intro > p:last-child { max-width: 680px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fit-card { min-height: 270px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 28px; box-shadow: var(--shadow-small); }
.fit-card.supported { border-top: 3px solid var(--teal); }
.fit-card.beta { border-top: 3px solid #c99a36; }
.fit-card.boundary { border-top: 3px solid var(--navy); }
.card-status { margin-bottom: 36px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); padding: 4px 8px; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.beta .card-status { background: var(--warning-soft); color: var(--warning); }
.boundary .card-status { background: #e7ecec; color: var(--navy); }
.fit-card p { color: var(--muted); font-size: 13px; }
.fit-card a { margin-top: auto; font-size: 12px; font-weight: 800; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 18px; min-height: 190px; border-top: 1px solid #bfc9c3; padding: 24px 28px 20px 0; }
.steps li + li { border-left: 1px solid #bfc9c3; padding-left: 28px; }
.steps li > span { color: var(--teal-dark); font-family: var(--display); font-size: 27px; }
.steps h3 { margin-top: 4px; }
.steps p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

.price-section { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; }
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 50px; border-radius: var(--radius); background: var(--navy); color: #fff; padding: clamp(35px, 5vw, 58px); box-shadow: var(--shadow); }
.price-card .eyebrow { color: #82d6c2; }
.price-card h2 { margin-bottom: 14px; color: #fff; }
.price-card h2 small { margin-left: 8px; color: rgba(255,255,255,.55); font: 11px/1 var(--body); letter-spacing: 0; }
.price-card p { max-width: 550px; margin-bottom: 0; color: rgba(255,255,255,.67); }
.price-card .button { width: fit-content; align-self: end; background: #fff; color: var(--navy); box-shadow: none; }
.price-card .button:hover { border-color: var(--teal-soft); background: var(--teal-soft); color: var(--teal-dark); }
.check-list { display: grid; align-content: start; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; max-width: 260px; padding-left: 21px; color: rgba(255,255,255,.83); font-size: 12px; }
.check-list li::before { position: absolute; top: 2px; left: 0; color: #79d4bd; content: "✓"; font-weight: 900; }
.privacy-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 34px; }
.privacy-card h3 { font-family: var(--display); font-size: 29px; font-weight: 400; letter-spacing: -.035em; }
.privacy-card p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.privacy-card a { font-size: 12px; font-weight: 800; }

.faq-layout { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(0, 1fr); gap: 80px; }
.faq-list { border-top: 1px solid #bfc9c3; }
.faq-list details { border-bottom: 1px solid #bfc9c3; }
.faq-list summary { position: relative; padding: 22px 42px 22px 0; color: var(--navy); font-weight: 800; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 22px; right: 3px; color: var(--teal-dark); content: "+"; font-size: 20px; font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { max-width: 650px; margin: -3px 0 23px; color: var(--muted); font-size: 13px; }

.closing { padding-top: 120px; padding-bottom: 120px; text-align: center; }
.closing h2 { max-width: 850px; margin-right: auto; margin-left: auto; }
.closing .button { margin-top: 15px; }
.closing > p:last-child { margin: 20px 0 0; color: var(--muted); font-size: 10px; }

.site-footer { border-top: 1px solid var(--rule); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 28px 50px; padding-top: 42px; padding-bottom: 42px; }
.footer-grid strong { color: var(--navy); }
.footer-grid p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.footer-links a { font-size: 11px; font-weight: 750; }
.footer-legal { max-width: 760px; }
.footer-copy { text-align: right; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (max-width: 980px) {
  .primary-nav { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); gap: 40px; min-height: 650px; }
  h1 { font-size: clamp(47px, 6vw, 64px); }
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-grid > div:nth-child(3) { border-top: 1px solid var(--rule); border-left: 0; }
  .scope-grid > div:nth-child(4) { border-top: 1px solid var(--rule); }
  .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-card.boundary { grid-column: 1 / -1; min-height: 220px; }
  .price-section { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .site-header { position: static; }
  .header-inner { min-height: 64px; }
  .brand small { display: none; }
  .header-actions .button { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 60px; padding-top: 64px; }
  .hero-copy { padding-bottom: 0; }
  .document-stage { width: min(100%, 500px); margin-inline: auto; }
  .section { padding-top: 82px; padding-bottom: 82px; }
  .section-intro { margin-bottom: 38px; }
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .fit-card.boundary { grid-column: auto; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { min-height: 0; }
  .steps li + li { border-left: 0; padding-left: 0; }
  .price-card { grid-template-columns: minmax(0, 1fr); }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-links { justify-content: flex-start; }
  .footer-copy { text-align: left; }
}

@media (max-width: 520px) {
  :root { --gutter: 12px; }
  .brand-mark { width: 31px; height: 31px; }
  h1 { font-size: 46px; }
  h2 { font-size: 38px; }
  .lede { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { text-align: center; }
  .price-line { align-items: flex-start; flex-direction: column; gap: 0; }
  .pdf-sheet { padding: 27px; }
  .pdf-footer { right: 27px; left: 27px; }
  .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-grid > div + div, .scope-grid > div:nth-child(3), .scope-grid > div:nth-child(4) { border-top: 1px solid var(--rule); border-left: 0; }
  .fit-card, .privacy-card { padding: 24px; }
  .price-card { padding: 30px 24px; }
  .price-card .button { width: 100%; }
  .closing { padding-top: 90px; padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
