:root {
  color-scheme: light;
  --ink: #11243e;
  --muted: #405671;
  --brand: #1453b8;
  --line: #d3dfed;
  --light: #f1f6fd;
  --navy: #091a31;
  font: 16px/1.6 system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; }
a { color: inherit; }
:focus-visible { outline: 3px solid #a7440f; outline-offset: 5px; }
.wrap { width: min(72rem, calc(100% - 3rem)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.topbar, footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1rem; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.38rem; font-weight: 800; line-height: 1.15; text-decoration: none; }
.wordmark img { display: block; object-fit: contain; }
.wordmark strong { display: block; margin-top: .12rem; font-size: .75rem; color: var(--muted); font-weight: 650; }
nav { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; font-size: .9rem; font-weight: 650; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { background: linear-gradient(125deg, var(--navy), #15365c); color: white; }
.hero-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); align-items: center; gap: clamp(1.8rem, 4vw, 3.4rem); padding-block: clamp(2.6rem, 6vw, 5.25rem); }
.hero .eyebrow { color: #9edbff; }
.hero .lead { color: #deebfa; }
.hero a:focus-visible { outline-color: #9edbff; }
.eyebrow { margin: 0 0 .65rem; color: var(--brand); font-size: .8rem; font-weight: 780; letter-spacing: .06em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(2.25rem, 4.8vw, 4.1rem); margin-bottom: 1.2rem; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-bottom: 1.2rem; }
h3 { line-height: 1.3; margin-bottom: .55rem; }
.lead, .intro { max-width: 43rem; color: var(--muted); font-size: 1.08rem; }
.button { display: inline-flex; align-items: center; gap: .7rem; margin-top: .45rem; padding: .75rem 1.1rem; border-radius: .45rem; background: var(--brand); color: #fff; font-weight: 700; text-decoration: none; }
.button:hover { background: #104596; }
.hero-figure, .gallery figure { margin: 0; min-width: 0; }
.hero-figure a, .gallery a { display: block; }
.hero-figure img, .gallery img { display: block; width: 100%; height: auto; border-radius: .65rem; }
.hero-figure figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .15rem .6rem; padding-top: .5rem; color: #deebfa; font-size: .8rem; }
.workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 2rem; margin: 1.5rem 0 0; padding: .95rem 1rem .95rem 2.15rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--light); }
.workflow li { padding: .2rem 0 .2rem .25rem; }
.workflow li::marker { color: var(--brand); font-weight: 800; }
.workflow strong, .workflow span { display: block; }
.workflow span, article p, .pricing-note, details p { color: var(--muted); }
.section { padding-block: clamp(2.6rem, 6vw, 5.25rem); }
.features, .plans { display: grid; gap: 1.15rem; margin-top: 1.65rem; }
.features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features article { padding: 1.15rem .25rem .4rem; border-top: 2px solid var(--line); }
.showcase { border-top: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; margin-top: 1.65rem; }
.gallery h3 { margin: .75rem 0 .3rem; }
.gallery p { color: var(--muted); margin-bottom: 0; }
.pricing { background: var(--light); }
.plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan { padding: 1.15rem; background: white; border: 1px solid var(--line); border-radius: .65rem; }
.plan .price { color: var(--ink); font-weight: 800; font-size: 1.5rem; margin-bottom: .15rem; }
.price span { font-size: .8rem; font-weight: 500; }
.annual { margin-bottom: .9rem; }
.plan ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.plan li + li { margin-top: .4rem; }
.pricing-note { margin: 1.05rem 0 0; }
.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.1rem 3rem; }
details { border-top: 1px solid var(--line); padding: .8rem .15rem; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { font-weight: 700; cursor: pointer; }
details p { margin: .5rem 0 .1rem; }
footer { border-top: 1px solid var(--line); font-size: .9rem; }

@media (max-width: 62rem) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 43rem) {
  .wrap { width: calc(100% - 2rem); }
  .hero-layout, .faq, .gallery { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .features, .plans { grid-template-columns: 1fr; }
}