.landing {
  --lp-ink:#102438;
  --lp-muted:#647184;
  --lp-bg:#fff;
  --lp-soft:#f5f8fc;
  --lp-line:#e3eaf2;
  --lp-blue:#176bd5;
  --lp-green:#178454;
  --background:var(--lp-bg);
  --foreground:var(--lp-ink);
  --card:var(--lp-bg);
  --card-foreground:var(--lp-ink);
  --muted:var(--lp-soft);
  --muted-foreground:var(--lp-muted);
  --border:var(--lp-line);
  --input:var(--lp-line);
  background:var(--lp-bg);
  color:var(--lp-ink);
  font-family:inherit;
  min-height:100vh;
}

.dark .landing {
  --lp-ink:#e9f1fc;
  --lp-muted:#9fadc2;
  --lp-bg:#0b1421;
  --lp-soft:#111f30;
  --lp-line:#26374b;
  --lp-blue:#6cb0ff;
  --lp-green:#55d6a0;
}

.landing-container {
  width:min(1120px,calc(100% - 48px));
  margin-inline:auto;
}

.landing-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:27px;
}

.landing-header nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:14px;
  font-weight:500;
}

.landing-header a:hover,.landing-footer a:hover {
  color:var(--lp-blue);
}

.landing-hero {
  text-align:center;
  padding-top:70px;
  padding-bottom:42px;
}

.landing-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--lp-line);
  background:var(--lp-soft);
  border-radius:24px;
  padding:7px 13px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}

.landing-eyebrow>span {
  height:6px;
  width:6px;
  background:#2586f5;
  border-radius:50%;
  box-shadow:0 0 0 4px #2586f51a;
}

.landing-hero h1 {
  font-size:clamp(38px,5.5vw,64px);
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.05em;
  margin:25px 0 22px;
}

.landing-hero h1 em {
  font-style:normal;
  color:var(--lp-blue);
}

.landing-intro {
  color:var(--lp-muted);
  font-size:18px;
  line-height:1.75;
  margin-inline:auto;
  max-width:690px;
}

.landing-signup {
  max-width:565px;
  margin:29px auto 0;
  scroll-margin-top:28px;
}

.landing-form-title {
  font-size:13px;
  color:var(--lp-ink);
  margin-bottom:12px;
}

.landing-email-row {
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid var(--lp-line);
  border-radius:12px;
  background:var(--lp-bg);
  box-shadow:0 5px 22px #163e7510;
}

.landing-form-note {
  font-size:11px;
  line-height:1.7;
  color:var(--lp-muted);
  margin-top:11px;
}

.landing-honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.landing-promises {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  margin:23px 0 0;
  padding:0;
  list-style:none;
  color:var(--lp-muted);
  font-size:12px;
}

.landing-promises li {
  display:flex;
  align-items:center;
  gap:7px;
}

.landing-promises svg {
  color:var(--lp-blue);
}

.landing-preview-wrap {
  position:relative;
  padding-top:22px;
}

.landing-preview-glow {
  position:absolute;
  inset:0 -40px 50px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,#318ffa20,transparent 68%);
}

.landing-preview {
  position:relative;
  overflow:hidden;
  border:1px solid var(--lp-line);
  border-radius:14px;
  background:var(--lp-bg);
  box-shadow:0 20px 65px #163b7114,0 2px 8px #163b7108;
}

.landing-preview-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 24px;
  border-bottom:1px solid var(--lp-line);
  font-size:12px;
  font-weight:550;
  background:var(--lp-soft);
}

.landing-preview-toolbar>div {
  display:flex;
  align-items:center;
  gap:10px;
}

.landing-preview-toolbar>span {
  font-size:11px;
  border:1px solid var(--lp-line);
  border-radius:5px;
  padding:6px 9px;
  background:var(--lp-bg);
  font-weight:400;
}

.landing-site-icon {
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  background:#176bd5;
  color:#fff;
  font-size:18px;
  border-radius:6px;
  font-weight:700;
}

.landing-preview-chevron {
  color:var(--lp-muted);
  margin-left:7px;
}

.landing-preview-heading {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 25px 0;
}

.landing-preview-heading h2 {
  font-size:14px;
  font-weight:600;
}

.landing-sample-label {
  font-size:10px;
  color:var(--lp-muted);
  border:1px solid var(--lp-line);
  padding:3px 7px;
  border-radius:4px;
}

.landing-preview-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin:20px 25px 24px;
}

.landing-preview-metrics>div {
  display:flex;
  flex-direction:column;
  gap:6px;
  border-right:1px solid var(--lp-line);
}

.landing-preview-metrics>div:last-child {
  border:0;
}

.landing-metric-label {
  color:var(--lp-muted);
  font-size:11px;
}

.landing-metric-value {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.04em;
  font-weight:600;
}

.landing-preview-metrics small {
  color:var(--lp-green);
  font-size:10px;
}

.landing-preview-metrics small span {
  color:var(--lp-muted);
  margin-left:3px;
}

.landing-preview-chart {
  padding:0;
  margin:0 25px 22px;
}

.landing-preview-bottom {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border-top:1px solid var(--lp-line);
}

.landing-preview-bottom>div {
  padding:20px 24px;
  border-right:1px solid var(--lp-line);
}

.landing-preview-bottom>div:last-child {
  border:0;
}

.landing-preview-bottom h3 {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  margin-bottom:12px;
}

.landing-preview-bottom h3>span {
  font-weight:400;
  color:var(--lp-muted);
  font-size:10px;
}

.landing-breakdown-list {
  gap:4px;
}

.landing-breakdown-row {
  gap:12px;
  padding:5px 7px;
  font-size:11px;
  border:0;
  border-radius:4px;
}

.landing-breakdown-title {
  font-size:11px;
  font-weight:400;
}

.landing-speed-peek p {
  display:block;
  background:transparent;
  padding:0;
  line-height:1.65;
  color:var(--lp-muted);
}

.landing-speed-peek>span {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  margin-top:18px;
}

.landing-speed-peek>span strong {
  margin-left:auto;
  font-size:14px;
  font-weight:600;
}

.landing-preview-caption {
  text-align:center;
  font-size:12px;
  color:var(--lp-muted);
  margin-top:21px;
}

.landing-features {
  padding-top:105px;
  padding-bottom:72px;
  scroll-margin-top:30px;
}

.landing-section-intro {
  text-align:center;
  max-width:670px;
  margin:auto;
}

.landing-kicker {
  font-size:10px;
  font-weight:650;
  letter-spacing:.13em;
  color:var(--lp-blue);
}

.landing-section-intro h2,.landing-simple h2 {
  font-size:38px;
  line-height:1.2;
  letter-spacing:-.04em;
  font-weight:600;
  margin:17px 0;
}

.landing-section-intro>p,.landing-simple>div>p {
  color:var(--lp-muted);
  font-size:15px;
  line-height:1.8;
}

.landing-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:46px;
}

.landing-feature-icon {
  display:grid;
  place-items:center;
  background:var(--lp-soft);
  color:var(--lp-blue);
  border:1px solid var(--lp-line);
  border-radius:11px;
  width:43px;
  height:43px;
  margin-bottom:19px;
}

.landing-feature-grid h3 {
  font-weight:600;
  font-size:18px;
  letter-spacing:-.02em;
  margin-bottom:11px;
}

.landing-feature-grid p {
  font-size:14px;
  line-height:1.8;
  color:var(--lp-muted);
}

.landing-simple {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  padding:52px;
  border:1px solid var(--lp-line);
  border-radius:16px;
  background:var(--lp-soft);
}

.landing-simple>div>a {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--lp-blue);
  font-size:13px;
  font-weight:600;
  margin-top:24px;
}

.landing-simple ol {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}

.landing-simple li {
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.landing-simple li>span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  background:var(--lp-bg);
  border:1px solid var(--lp-line);
  border-radius:50%;
  color:var(--lp-blue);
  font-size:11px;
  font-weight:600;
}

.landing-simple h3 {
  font-size:15px;
  font-weight:600;
  margin:2px 0 6px;
}

.landing-simple li p {
  font-size:13px;
  line-height:1.7;
  color:var(--lp-muted);
}

.landing-faq {
  max-width:740px;
  padding-block:95px;
}

.landing-faq h2 {
  font-size:28px;
  letter-spacing:-.03em;
  font-weight:600;
  line-height:1.3;
  margin-bottom:27px;
}

.landing-closing {
  text-align:center;
  background:#0f263f;
  color:#fff;
  border-radius:17px;
  padding:55px 24px;
  margin-bottom:72px;
  position:relative;
  overflow:hidden;
}

.landing-closing .landing-kicker {
  color:#86bcfb;
}

.landing-closing h2 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-.04em;
  font-weight:600;
  margin-top:15px;
}

.landing-closing p {
  font-size:14px;
  color:#a8bdd5;
  margin:15px 0 24px;
}

.landing-closing>a {
  display:inline-flex;
  align-items:center;
  gap:22px;
  background:#fff;
  color:#133455;
  padding:13px 21px;
  border-radius:7px;
  font-size:13px;
  font-weight:600;
}

.landing-closing>a:hover {
  background:#e3f0ff;
}

.landing-footer {
  border-top:1px solid var(--lp-line);
  padding-block:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.landing-footer .brand-logo {
  width:112px;
}

.landing-footer p {
  font-size:11px;
  color:var(--lp-muted);
  margin-top:12px;
}

.landing-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:12px;
  color:var(--lp-muted);
}

.landing-feedback {
  max-width:620px;
  padding-block:70px 100px;
  min-height:65vh;
}

.landing-feedback h1 {
  font-size:40px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.04em;
  margin:15px 0;
}

.landing-feedback>p {
  color:var(--lp-muted);
  font-size:15px;
  line-height:1.8;
}

.landing-feedback form {
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.landing-feedback > .landing-success {
  margin-block:24px;
}

.landing-feedback button {
  align-self:flex-start;
  margin-top:12px;
}

@media(min-width:1400px) {
  .landing-hero {
    padding-top:85px;
  }
}

@media(max-width:760px) {
  .landing-container {
    width:calc(100% - 36px);
  }
  .landing-header {
    padding-block:20px;
    gap:12px;
  }
  .landing-header .brand-logo {
    width:118px;
  }
  .landing-header nav {
    gap:10px;
  }
  .landing-nav-feature {
    display:none;
  }
  .landing-hero {
    padding-top:48px;
  }
  .landing-hero h1 {
    font-size:clamp(35px,7.6vw,50px);
    line-height:1.13;
  }
  .landing-intro {
    font-size:16px;
    max-width:520px;
  }
  .landing-desktop-break {
    display:none;
  }
  .landing-form-title {
    font-size:12px;
    line-height:1.7;
  }
  .landing-preview-glow {
    inset:0;
  }
  .landing-preview-toolbar {
    padding:13px 16px;
  }
  .landing-preview-heading {
    padding:18px 16px 0;
  }
  .landing-preview-heading h2 {
    font-size:12px;
  }
  .landing-sample-label {
    font-size:9px;
  }
  .landing-preview-metrics {
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:21px 16px;
  }
  .landing-preview-metrics>div:nth-child(2) {
    border:0;
  }
  .landing-metric-value {
    font-size:26px;
  }
  .landing-preview-chart {
    margin-inline:16px;
  }
  .landing-preview-bottom {
    grid-template-columns:1fr 1fr;
  }
  .landing-preview-bottom>div {
    padding:17px 14px;
  }
  .landing-preview-bottom>div:nth-child(2) {
    border-right:0;
  }
  .landing-preview-bottom .landing-speed-peek {
    grid-column:1/-1;
    border-top:1px solid var(--lp-line);
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
  }
  .landing-speed-peek h3 {
    margin-bottom:6px;
  }
  .landing-speed-peek>span {
    grid-column:2;
    grid-row:1/3;
    margin:0;
    flex-wrap:wrap;
    align-content:center;
  }
  .landing-speed-peek>span strong {
    margin-left:0;
  }
  .landing-feature-grid {
    gap:32px;
    grid-template-columns:1fr;
  }
  .landing-features {
    padding-top:70px;
    padding-bottom:42px;
  }
  .landing-section-intro h2,.landing-simple h2 {
    font-size:31px;
  }
  .landing-feature-grid .landing-feature-card {
    padding-bottom:25px;
    border-bottom:1px solid var(--lp-line);
  }
  .landing-feature-grid .landing-feature-card:last-child {
    border:0;
    padding:0;
  }
  .landing-feature-icon {
    margin-bottom:14px;
  }
  .landing-simple {
    padding:28px;
    grid-template-columns:1fr;
    gap:35px;
  }
  .landing-faq {
    padding-block:60px;
  }
  .landing-faq h2 {
    font-size:26px;
  }
  .landing-closing {
    padding:42px 24px;
    margin-bottom:45px;
  }
  .landing-closing h2 {
    font-size:30px;
  }
  .landing-footer {
    align-items:flex-start;
    flex-direction:column;
  }
  .landing-footer nav {
    gap:22px;
  }
  .landing-feedback {
    padding-top:40px;
  }
}

@media(max-width:420px) {
  .landing-email-row {
    flex-direction:column;
    gap:2px;
  }
  .landing-email-row input {
    padding:13px;
  }
  .landing-email-row button {
    padding:14px;
  }
  .landing-promises {
    gap:10px 16px;
    font-size:10px;
  }
  .landing-preview-toolbar {
    font-size:11px;
  }
  .landing-preview-toolbar>span {
    font-size:10px;
  }
  .landing-preview-heading {
    align-items:flex-start;
  }
  .landing-preview-heading h2 {
    max-width:160px;
  }
  .landing-hero h1 {
    font-size:35px;
  }
  .landing-form-note {
    max-width:270px;
    margin-inline:auto;
  }
  .landing-speed-peek>span {
    font-size:10px;
  }
  .landing-preview-caption {
    font-size:11px;
  }
}

/* Layout and brand typography around Blueprint's controls. Widget behavior,
   focus treatment, validation, and theme switching belong to the library. */
.landing h2 {
  border-bottom:0;
  padding-bottom:0;
}

.landing-email-row > input {
  flex:1;
  min-width:0;
}

.landing-email-input {
  height:44px;
  border:0;
  box-shadow:none;
}

.landing-form-error {
  margin-bottom:12px;
  text-align:left;
}

.landing-success {
  text-align:left;
}

.landing-feature-card {
  background:transparent;
  color:inherit;
  border:0;
  box-shadow:none;
}

.landing-feature-header,.landing-feature-content,.landing-feature-footer {
  padding:0;
  gap:0;
}

.landing-feature-footer {
  margin-top:18px;
}

.landing-simple p {
  margin-top:0;
}

.landing-faq .landing-faq-trigger {
  padding-block:5px;
  font-size:15px;
  text-align:left;
}

.landing-faq p {
  font-size:14px;
  line-height:1.8;
  color:var(--lp-muted);
  margin:0;
}

.landing-email-row > button {
  flex:none;
  white-space:nowrap;
  height:44px;
}

.landing-speed-peek > span {
  padding:8px;
  white-space:normal;
}