:root {
  --ink: #202124;
  --muted: #61666a;
  --blue: #42b4c8;
  --blue-dark: #0098ad;
  --blue-soft: #eaf7f9;
  --line: #dce2e4;
  --shadow: 0 18px 55px rgba(20, 33, 36, .09);
  --radius: 20px;
}

body { font-family: arboria, "Avenir Next", Avenir, "Segoe UI", sans-serif; background: #fff; }
h1, h2, .price strong { font-family: inherit; font-weight: 900; letter-spacing: -.055em; }

.site-header {
  max-width: none;
  min-height: 92px;
  padding: 1rem max(2rem, calc((100vw - 1280px) / 2));
  border: 0;
  color: #fff;
  background: #202124;
}
.brand-family { gap: .85rem; }
.brand-family img { width: auto; height: 42px; display: block; }
.brand-divider { width: 1px; height: 34px; background: rgba(255,255,255,.35); }
.wemail-word { color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em; }
.brand > .wemail-word { color: #fff; }
.site-header nav a { color: rgba(255,255,255,.78); }
.site-header nav a:hover { color: #fff; }
.site-header .button-outline { color: #202124; border-color: #fff; background: #fff; }

.button { min-height: 54px; padding-inline: 1.6rem; border-color: var(--blue-dark); border-radius: 999px; background: var(--blue-dark); }
.button:hover { box-shadow: 0 12px 28px rgba(0,152,173,.24); }

.hero {
  max-width: none;
  min-height: 650px;
  margin: 0;
  padding: 6.5rem max(2rem, calc((100vw - 1280px) / 2)) 5.5rem;
  display: block;
  color: #fff;
  background:
    radial-gradient(circle at 86% 30%, rgba(66,180,200,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 86% 30%, transparent 0 165px, rgba(66,180,200,.12) 166px 167px, transparent 168px),
    radial-gradient(circle at 86% 30%, transparent 0 260px, rgba(66,180,200,.08) 261px 262px, transparent 263px),
    #202124;
}
.hero-copy { max-width: 1100px; }
.hero .eyebrow { color: #66c7d8; }
.hero h1 { max-width: 1050px; font-size: clamp(3.8rem, 7.4vw, 7.4rem); line-height: .94; }
.hero h1 span { display: block; color: #4bb8cb; }
.hero .lead { max-width: 760px; color: rgba(255,255,255,.75); }
.hero .lead strong { color: #fff; }
.mail-preview { display: none; }
.availability { max-width: 900px; margin-top: 2.35rem; }
.availability label { color: #fff; }
.address-control { max-width: 900px; border: 0; border-radius: 999px; box-shadow: none; }
.address-control input { padding-left: 1.5rem; }
.address-control .button { margin: .42rem; }
.field-help, .hero-actions { color: rgba(255,255,255,.62); }
.hero-actions a:hover { color: #fff; }

.customer-strip {
  max-width: none;
  margin: 0;
  padding: 5rem max(2rem, calc((100vw - 1280px) / 2));
  grid-template-columns: .78fr 1.22fr;
  border-radius: 0;
  color: #202124;
  background: #4bb8cb;
}
.customer-strip .eyebrow { color: #16434a; }
.customer-strip h2 { max-width: 520px; font-size: clamp(2.7rem, 4.8vw, 5rem); }
.customer-actions { gap: 1rem; }
.quick-action { min-height: 145px; padding: 1.3rem; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; box-shadow: 0 10px 35px rgba(20,60,67,.1); }
.quick-action .icon { background: #e6f7fa; }

.section { max-width: 1280px; padding-top: 7.5rem; padding-bottom: 7.5rem; }
.section-heading { align-items: center; }
.section-heading > p { max-width: 480px; font-size: 1.05rem; }
.packages-section h2, .guides-section h2 { font-size: clamp(3rem, 5vw, 5.3rem); }
.package-card { padding: 2.6rem; border-radius: 18px; }
.package-card-featured { border-color: var(--blue-dark); box-shadow: none; }
.price strong { font-size: 4.4rem; }
.package-card .button { width: 100%; }
.recommended { color: #fff; background: var(--blue-dark); }

.apply-section {
  max-width: none;
  padding-left: max(2rem, calc((100vw - 1280px) / 2));
  padding-right: max(2rem, calc((100vw - 1280px) / 2));
  border-radius: 0;
  background: #f1f3f3;
}
.apply-intro h2 { font-size: clamp(3rem, 5vw, 5.2rem); }
.steps b { color: #fff; background: var(--blue-dark); }
.request-form { border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.guide-list summary { font-size: 1.35rem; }
.guide-list summary::after { color: #fff; background: var(--blue-dark); }

.support-section {
  max-width: none;
  margin: 0;
  padding: 5rem max(2rem, calc((100vw - 1280px) / 2));
  border-radius: 0;
  color: #fff;
  background: #202124;
}
.support-section .eyebrow { color: #66c7d8; }
.support-section h2 { font-size: clamp(2.8rem, 5vw, 5rem); }
.support-section p:not(.eyebrow) { color: rgba(255,255,255,.68); }
.support-links a { color: #61c5d7; }

footer {
  max-width: none;
  padding: 2.5rem max(2rem, calc((100vw - 1280px) / 2));
  border: 0;
  color: rgba(255,255,255,.65);
  background: #202124;
}
footer a { color: #fff; }
.brand-small img { height: 32px; }
.brand-small .brand-divider { height: 26px; }
.brand-small .wemail-word { font-size: 1rem; }
body > main.section { min-height: calc(100vh - 190px); max-width: 1000px; }
body > main.section h1 { font-size: clamp(3rem, 7vw, 6rem); }
body > main.section h2 { margin-top: 2.5rem; font-size: clamp(1.8rem, 4vw, 3rem); }

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .customer-strip { grid-template-columns: 1fr; }
  .customer-strip h2 { max-width: 700px; }
}

@media (max-width: 720px) {
  .site-header { min-height: 76px; padding: .85rem 1rem; }
  .brand-family img { height: 32px; }
  .brand-divider { height: 26px; }
  .wemail-word { font-size: 1.05rem; }
  .site-header .button { min-height: 42px; padding: .55rem .9rem; }
  .hero { padding: 4.25rem 1rem 3.5rem; background: #202124; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .availability { margin-top: 1.8rem; }
  .address-control { border-radius: 20px; }
  .address-control .button { border-radius: 14px; }
  .customer-strip { padding: 4rem 1rem; }
  .customer-strip h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .section { padding-top: 5rem; padding-bottom: 5rem; }
  .apply-section { padding-left: 1rem; padding-right: 1rem; }
  .support-section { margin: 0; padding: 4rem 1rem; }
  footer { padding: 2rem 1rem; }
}