:root {
  --bg: #05111d;
  --bg2: #071a2c;
  --bg3: #0b2238;
  --card: rgba(10, 29, 48, 0.82);
  --card-border: rgba(75, 168, 255, 0.28);
  --surface: #f5f8fc;
  --surface-2: #eef4fb;
  --text: #eef6ff;
  --text-dark: #10263d;
  --muted: #9bb0c5;
  --muted-dark: #59728c;
  --blue: #2d96ff;
  --blue-2: #79c0ff;
  --green: #37e0b8;
  --accent: #4db2ff;
  --shadow: 0 30px 70px rgba(1, 12, 23, 0.45);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #04101c 0%, #061728 100%);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
.section { padding: 84px 0; position: relative; }
.section-light {
  background: linear-gradient(180deg, #fbfdff 0%, #f2f6fb 100%);
  color: var(--text-dark);
}
.section-dark {
  background:
    radial-gradient(circle at top right, rgba(45,150,255,0.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(55,224,184,0.08), transparent 22%),
    linear-gradient(180deg, #04111d 0%, #071728 100%);
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-2);
  font-weight: 800;
}
.kicker::before {
  content: "";
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), transparent);
}
.section h2,
.hero h1,
.final-cta h2 {
  margin: 18px 0 18px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  max-width: 9.2ch;
}
.hero h1 .highlight,
.section h2 .highlight,
.final-cta h2 .highlight { color: var(--blue); }
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  color: #d2e4f6;
  max-width: 64ch;
}
.section-light .lead,
.section-light p,
.section-light li,
.section-light .muted { color: var(--muted-dark); }
.section-light h2,
.section-light h3,
.section-light h4,
.section-light strong,
.section-light .kicker { color: var(--text-dark); }
.section-light .kicker::before { background: linear-gradient(90deg, var(--blue), rgba(45,150,255,0.15)); }
.min-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(5, 16, 27, 0.84);
  border-bottom: 1px solid rgba(115, 165, 214, 0.16);
}
.min-header .inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand img { height: 46px; width: auto; }
.header-link {
  font-weight: 700;
  color: #d9ebff;
  font-size: 0.95rem;
  opacity: 0.92;
}
.header-link:hover { color: white; }
.hero {
  padding: 88px 0 56px;
  background:
    linear-gradient(rgba(17, 46, 77, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 46, 77, 0.18) 1px, transparent 1px),
    radial-gradient(circle at top right, rgba(45,150,255,0.18), transparent 28%),
    radial-gradient(circle at 20% 0%, rgba(55,224,184,0.06), transparent 24%),
    linear-gradient(180deg, #04111d 0%, #06192b 100%);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 42px;
  align-items: center;
}
.hero-copy .offer-chip,
.hero-copy .slot-chip,
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid rgba(92, 182, 255, 0.32);
  background: rgba(8, 28, 46, 0.8);
  padding: 16px 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.hero-copy .offer-chip {
  margin-bottom: 18px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cfe7ff;
}
.hero-copy .slot-chip {
  margin: 12px 0 12px;
  font-weight: 900;
  font-size: 1.12rem;
  color: white;
}
.hero-copy .slot-chip .big { font-size: 2rem; line-height: 1; color: white; }
.exp-line {
  font-size: 1.15rem;
  color: #d2e4f6;
  margin: 0 0 28px;
}
.exp-line strong { color: white; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  padding: 18px 30px;
  font-size: 1.03rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
  border: 0;
}
.btn-primary {
  color: white;
  background: linear-gradient(135deg, #43b3ff, #237fff);
  box-shadow: 0 18px 40px rgba(23, 110, 212, 0.42);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary {
  color: white;
  border: 1px solid rgba(116, 183, 255, 0.34);
  background: rgba(11, 33, 54, 0.72);
}
.btn-secondary:hover { background: rgba(15, 40, 64, 0.92); }
.micro-note {
  margin-top: 16px;
  font-size: 1rem;
  color: #a9c2da;
}
.micro-note .dot { padding: 0 10px; color: #38a6ff; }
.hero-visual { position: relative; }
.hero-frame {
  position: relative;
  border-radius: 34px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(9, 32, 54, 0.88) 0%, rgba(6, 21, 36, 0.96) 100%);
  border: 1px solid rgba(89, 176, 255, 0.22);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(69, 166, 255, 0.14), transparent 28%);
  pointer-events: none;
}
.hero-frame .showcase {
  width: 100%;
  border-radius: 24px;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.float-pill {
  position: absolute;
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  min-width: 220px;
  border-radius: 22px;
  background: rgba(9, 27, 44, 0.92);
  border: 1px solid rgba(93, 182, 255, 0.26);
  box-shadow: 0 18px 38px rgba(0, 8, 16, 0.34);
}
.float-pill strong { font-size: 1.35rem; color: white; }
.float-pill span { color: #a6bdd5; }
.pill-one { left: -24px; top: 8%; }
.pill-two { right: -24px; top: 22%; }
.pill-three { left: 40px; bottom: -26px; }
.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(81, 165, 242, 0.14);
}
.mini-card {
  padding: 34px 28px;
  background: rgba(4, 17, 29, 0.28);
  border-right: 1px solid rgba(81, 165, 242, 0.14);
}
.mini-card:last-child { border-right: 0; }
.mini-card .num {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--blue);
  margin-bottom: 10px;
}
.mini-card h3 { font-size: 1.15rem; margin: 0 0 6px; color: white; }
.mini-card p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.section-head { max-width: 760px; margin-bottom: 34px; }
.showcase-card {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(9, 27, 44, 0.88) 0%, rgba(5, 17, 29, 0.96) 100%);
  border: 1px solid rgba(91, 177, 255, 0.18);
  box-shadow: var(--shadow);
}
.showcase-card img { border-radius: 22px; width: 100%; object-fit: contain; }
.industry-line {
  margin-top: 26px;
  text-align: center;
  color: #9fb7d0;
  font-size: 1.08rem;
}
.industry-line span { color: #37a4ff; padding: 0 10px; }
.included-grid,
.faq-grid,
.scope-grid,
.callout-grid,
.steps-grid,
.form-grid {
  display: grid;
  gap: 24px;
}
.included-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.feature-pill {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 100px;
  padding: 22px 26px;
  border-radius: 24px;
  background: white;
  border: 1px solid rgba(177, 198, 221, 0.7);
  box-shadow: 0 12px 28px rgba(15, 36, 57, 0.08);
}
.feature-pill .check {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 900;
  color: var(--blue);
  background: rgba(45, 150, 255, 0.1);
  font-size: 1.2rem;
}
.feature-pill span { font-size: 1.12rem; font-weight: 800; color: var(--text-dark); }
.scope-grid,
.callout-grid,
.steps-grid,
.form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.scope-card,
.callout-card,
.step-card,
.info-card,
.trust-card,
.form-shell {
  border-radius: 28px;
  padding: 32px;
  border: 1px solid rgba(84, 170, 245, 0.18);
}
.scope-card,
.callout-card,
.step-card,
.info-card,
.trust-card,
.form-shell.dark {
  background: linear-gradient(180deg, rgba(8, 28, 46, 0.88) 0%, rgba(5, 19, 31, 0.98) 100%);
  box-shadow: var(--shadow);
}
.scope-card.light,
.form-shell.light,
.info-card.light { background: white; border-color: rgba(176, 197, 219, 0.85); box-shadow: 0 14px 30px rgba(18,39,60,0.08); }
.scope-card h3,
.callout-card h3,
.step-card h3,
.info-card h3,
.trust-card h3 { margin: 12px 0 10px; font-size: 2rem; line-height: 1.02; letter-spacing: -0.04em; }
.scope-card p,
.callout-card p,
.step-card p,
.info-card p,
.trust-card p,
.section-dark p,
.section-dark li { color: #b4c6d8; font-size: 1.08rem; }
.scope-card .kicker,
.callout-card .kicker,
.step-card .kicker,
.info-card .kicker,
.trust-card .kicker { font-size: 12px; }
.process-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
}
.flow-box {
  padding: 28px 24px;
  min-height: 170px;
  border-radius: 28px;
  border: 1px solid rgba(86,170,244,0.24);
  background: rgba(5, 21, 35, 0.8);
  display: grid;
  align-content: center;
  gap: 10px;
}
.flow-box strong { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-2); }
.flow-box span { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.flow-arrow { font-size: 2.2rem; color: #38a6ff; font-weight: 900; }
.qual-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; }
.qual-list {
  padding: 24px 28px;
  background: white;
  border-radius: 30px;
  border: 1px solid rgba(179, 198, 221, 0.8);
  box-shadow: 0 16px 32px rgba(16, 38, 60, 0.08);
}
.qual-item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(173, 194, 216, 0.48);
}
.qual-item:last-child { border-bottom: 0; }
.qual-item .check { color: var(--blue); font-weight: 900; font-size: 1.2rem; }
.qual-item span { font-size: 1.08rem; color: var(--muted-dark); }
.alert-box {
  margin-top: 24px;
  padding: 22px 24px;
  background: #e9f4ff;
  border-radius: 20px;
  color: var(--text-dark);
  border: 1px solid rgba(141, 186, 228, 0.58);
}
.alert-box strong { display: block; margin-bottom: 6px; font-size: 1.08rem; }
.contact-strip {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(45,150,255,0.12);
  border: 1px solid rgba(45,150,255,0.28);
  color: #e6f2ff;
  font-weight: 700;
}
.section-light .contact-chip {
  background: white;
  color: var(--text-dark);
  border-color: rgba(172,192,214,0.8);
}
.steps-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.step-card .step-num {
  color: var(--blue);
  font-size: 1.7rem;
  font-weight: 900;
  margin-bottom: 18px;
}
.no-obligation {
  margin-top: 24px;
  text-align: center;
  color: #b9cadb;
  font-size: 1.12rem;
}
.form-grid { align-items: start; }
.form-shell.light { padding: 36px; }
.form-panel h2 { margin-top: 16px; }
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.field,
.upload-card,
.opt-card {
  display: grid;
  gap: 8px;
}
.field label,
.upload-card h4,
.opt-card h4 {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-dark);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(173, 194, 216, 0.84);
  background: white;
  color: var(--text-dark);
  font-size: 1rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.field.full,
.form .full { grid-column: 1 / -1; }
.upload-card,
.opt-card {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed rgba(104, 165, 228, 0.58);
  border-radius: 20px;
  background: #f8fbff;
}
.optional-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.submit-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}
.consent {
  font-size: 0.98rem;
  color: var(--muted-dark);
}
.privacy-line {
  color: var(--muted-dark);
  font-size: 0.95rem;
}
.trust-card {
  display: grid;
  gap: 18px;
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.logo-row img { max-width: 360px; width: 100%; }
.logo-row .subline { color: #8da7bf; font-size: 0.96rem; }
.faq-shell {
  padding: 26px 30px;
  border-radius: 30px;
  background: white;
  border: 1px solid rgba(177, 198, 221, 0.82);
  box-shadow: 0 16px 34px rgba(17, 40, 61, 0.08);
}
.faq-item {
  border-bottom: 1px solid rgba(189, 205, 221, 0.7);
}
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 900;
  color: var(--text-dark);
  cursor: pointer;
}
.faq-q span:last-child {
  font-size: 2rem;
  color: var(--blue);
  line-height: 1;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a-inner {
  padding: 0 0 28px;
  color: #57708a;
  font-size: 1.14rem;
  max-width: 92ch;
}
.faq-item.open .faq-a { max-height: 420px; }
.final-cta {
  text-align: center;
}
.final-cta h2 { font-size: clamp(2.9rem, 5vw, 4.7rem); max-width: 13ch; margin-inline: auto; }
.final-cta p { max-width: 60ch; margin: 0 auto 24px; color: #c7d9eb; font-size: 1.15rem; }
.final-cta .support-lines { margin-top: 16px; color: #9eb7d1; font-size: 1.05rem; }
.final-cta .support-lines strong { color: white; }
.mobile-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999;
  display: none;
}
.mobile-sticky .btn { width: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1100px) {
  .hero-grid,
  .qual-grid,
  .scope-grid,
  .callout-grid,
  .process-flow,
  .form-grid { grid-template-columns: 1fr; }
  .process-flow { gap: 14px; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; }
  .float-pill { position: static; margin-top: 16px; }
  .pill-three { margin-top: 16px; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-card:nth-child(2) { border-right: 0; }
  .mini-card:nth-child(1), .mini-card:nth-child(2) { border-bottom: 1px solid rgba(81, 165, 242, 0.14); }
}
@media (max-width: 900px) {
  .included-grid,
  .steps-grid,
  .form,
  .mini-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 66px; }
  .hero-copy .slot-chip { font-size: 1rem; }
  .hero-copy .slot-chip .big { font-size: 1.7rem; }
  .section { padding: 68px 0; }
  .brand img { height: 40px; }
  .feature-pill { min-height: 88px; }
  .steps-grid { gap: 18px; }
}
@media (max-width: 640px) {
  .container { width: min(calc(100% - 22px), var(--max)); }
  .min-header .inner { min-height: 70px; }
  .header-link { display: none; }
  .hero h1 { font-size: 2.7rem; max-width: 10ch; }
  .lead { font-size: 1rem; }
  .btn { width: 100%; padding: 18px 22px; }
  .button-row { display: grid; }
  .float-pill { min-width: 0; }
  .mini-card,
  .scope-card,
  .callout-card,
  .step-card,
  .info-card,
  .trust-card,
  .form-shell.light,
  .faq-shell,
  .qual-list { padding: 24px; }
  .feature-pill { padding: 18px; border-radius: 20px; }
  .feature-pill span { font-size: 1rem; }
  .contact-strip { flex-direction: column; }
  .contact-chip { width: 100%; justify-content: center; }
  .faq-q { font-size: 1.18rem; padding: 22px 0; }
  .faq-a-inner { font-size: 1rem; }
  .mobile-sticky { display: block; }
  body.has-sticky { padding-bottom: 88px; }
}

/* --- Premium hero second pass --- */
.hero {
  overflow: hidden;
  padding-top: 76px;
  padding-bottom: 64px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(77, 178, 255, 0.17), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(55, 224, 184, 0.08), transparent 20%),
    radial-gradient(circle at 72% 58%, rgba(45,150,255,0.12), transparent 22%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-top-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-top-pills .stat-pill {
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #d8ebff;
  background: rgba(7, 24, 40, 0.78);
}
.premium-hero-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 54px;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 {
  max-width: 10.5ch;
  margin-bottom: 20px;
  text-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
.hero-copy .lead {
  max-width: 60ch;
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
}
.hero-benefits {
  display: grid;
  gap: 14px;
  margin: 26px 0 28px;
}
.hero-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(7, 24, 40, 0.54);
  border: 1px solid rgba(93, 182, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.benefit-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(67,179,255,0.28), rgba(35,127,255,0.22));
  color: white;
  font-weight: 900;
}
.hero-benefit strong {
  display: block;
  color: #ffffff;
  font-size: 1.02rem;
  margin-bottom: 3px;
}
.hero-benefit span:last-child {
  color: #9db6cf;
  font-size: 0.97rem;
}
.hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 0 0 28px;
}
.hero-meta-card {
  min-height: 128px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(9, 29, 48, 0.86), rgba(7, 22, 37, 0.96));
  border: 1px solid rgba(88, 173, 246, 0.2);
  box-shadow: 0 16px 34px rgba(0, 10, 18, 0.24);
  display: grid;
  align-content: start;
  gap: 8px;
}
.hero-meta-card.emphasis {
  background: linear-gradient(180deg, rgba(16, 53, 82, 0.92), rgba(8, 28, 46, 0.98));
  border-color: rgba(115, 194, 255, 0.32);
}
.hero-meta-card .eyebrow {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8bc9ff;
}
.hero-meta-card strong {
  font-size: 1.44rem;
  line-height: 1.04;
  color: #ffffff;
}
.hero-meta-card span:last-child {
  color: #a3b9cf;
  font-size: 0.95rem;
}
.hero-actions { gap: 14px; }
.hero-actions .btn-secondary { padding-inline: 24px; }
.premium-hero-visual { min-height: 100%; }
.hero-spotlight {
  position: absolute;
  width: 440px;
  height: 440px;
  right: -90px;
  top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69,166,255,0.22) 0%, rgba(69,166,255,0.08) 36%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.premium-hero-frame {
  padding: 24px 24px 86px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgba(8, 29, 48, 0.94) 0%, rgba(5, 16, 29, 0.98) 100%);
  border-color: rgba(104, 187, 255, 0.22);
}
.hero-visual-badge {
  display: inline-grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(9, 28, 45, 0.88);
  border: 1px solid rgba(95, 184, 255, 0.2);
}
.hero-visual-badge .visual-mini {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8bc9ff;
}
.hero-visual-badge strong { font-size: 1.05rem; }
.hero-bottom-band {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.hero-bottom-band > div {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(7, 24, 40, 0.88);
  border: 1px solid rgba(91, 176, 255, 0.18);
}
.hero-bottom-band strong {
  display: block;
  font-size: 1rem;
  color: white;
  margin-bottom: 3px;
}
.hero-bottom-band span {
  color: #9fb5cc;
  font-size: 0.92rem;
}
.premium-mini-grid {
  margin-top: 36px;
  background: linear-gradient(180deg, rgba(6, 21, 36, 0.8), rgba(4, 16, 28, 0.92));
  border: 1px solid rgba(80, 167, 243, 0.16);
  box-shadow: 0 16px 34px rgba(0, 10, 18, 0.22);
}
.premium-mini-grid .mini-card {
  padding: 30px 28px;
  background: transparent;
}
.premium-mini-grid .mini-card h3 { font-size: 1.18rem; }
.premium-mini-grid .mini-card p { font-size: 1rem; }
@media (max-width: 1100px) {
  .hero-meta-grid { grid-template-columns: 1fr; }
  .premium-hero-grid { gap: 34px; }
  .hero-copy h1 { max-width: 11ch; }
}
@media (max-width: 900px) {
  .hero-top-pills { margin-bottom: 18px; }
  .hero-top-pills .stat-pill { padding: 10px 14px; font-size: 0.88rem; }
  .hero-benefits { margin: 20px 0 22px; }
  .hero-benefit { padding: 13px 14px; }
  .hero-meta-card { min-height: 0; }
  .hero-bottom-band { position: static; margin-top: 16px; }
  .premium-hero-frame { padding-bottom: 24px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 54px; padding-bottom: 46px; }
  .hero-top-pills { display: none; }
  .hero-copy h1 { max-width: 9.2ch; }
  .hero-benefit strong { font-size: 0.98rem; }
  .hero-benefit span:last-child { font-size: 0.93rem; }
  .hero-meta-card { padding: 16px; border-radius: 18px; }
  .hero-meta-card strong { font-size: 1.2rem; }
  .hero-actions { display: grid; }
  .hero-bottom-band { grid-template-columns: 1fr; }
}

/* =========================================================
   Free Website Campaign — Final Approved Hero/FAQ Fix Pass
   Transparent logos, larger hero mockup, reorganized lower hero conversion zone.
   ========================================================= */

.hero .container {
  width: min(calc(100% - 34px), 1400px);
}

.premium-hero-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 34px;
  align-items: start;
}

.premium-hero-visual {
  min-height: 100%;
  padding-top: 18px;
}

.premium-hero-frame {
  width: 100%;
  padding: 22px 22px 104px;
  border-radius: 40px;
  box-shadow: 0 34px 76px rgba(0, 9, 17, 0.5), inset 0 1px 0 rgba(255,255,255,0.035);
}

.premium-hero-frame .showcase {
  width: 100%;
  transform: scale(1.055);
  transform-origin: center center;
}

.hero-visual-badge {
  position: relative;
  z-index: 4;
  margin-left: 10px;
  padding: 15px 18px;
}

.hero .float-pill {
  z-index: 5;
  min-width: 245px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(7, 24, 40, 0.94);
  border-color: rgba(90, 182, 255, 0.34);
  box-shadow: 0 22px 46px rgba(0, 8, 16, 0.42), inset 0 1px 0 rgba(255,255,255,0.03);
}
.hero .float-pill strong { font-size: 1.22rem; }
.hero .float-pill span { font-size: .98rem; line-height: 1.35; }
.hero .pill-one { left: -18px; top: 18%; }
.hero .pill-two { right: -14px; top: 44%; }

.hero-bottom-band {
  left: 22px;
  right: 22px;
  bottom: 20px;
  gap: 16px;
}
.hero-bottom-band > div {
  padding: 18px 20px;
  min-height: 72px;
  border-radius: 20px;
}
.hero-bottom-band strong { font-size: 1.08rem; }
.hero-bottom-band span { font-size: .96rem; }

.hero-conversion-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 34px;
}

.hero-meta-grid-lower {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.hero-meta-grid-lower .hero-meta-card {
  min-height: 164px;
  padding: 22px 22px 20px;
  border-radius: 24px;
}
.hero-meta-grid-lower .hero-meta-card strong { font-size: 1.62rem; }
.hero-meta-grid-lower .hero-meta-card span:last-child { font-size: 1rem; line-height: 1.45; }

.hero-cta-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: stretch;
}
.hero-cta-stack .btn {
  width: 100%;
  min-height: 62px;
  padding: 17px 22px;
}

.hero-proof-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 35, 57, 0.96), rgba(5, 21, 35, 0.98));
  border: 1px solid rgba(89, 177, 255, 0.26);
  box-shadow: 0 18px 40px rgba(0, 8, 15, 0.3);
}
.proof-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: white;
  font-size: 1.35rem;
  background: linear-gradient(135deg, rgba(55, 162, 255, .92), rgba(35, 101, 218, .88));
  box-shadow: 0 0 30px rgba(45,150,255,.22);
}
.hero-proof-card strong {
  display: block;
  color: white;
  font-size: 1.2rem;
  margin-bottom: 3px;
}
.hero-proof-card span { color: #a7bdd3; font-size: .96rem; }

.hero-conversion-note {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: -2px;
  padding: 5px 0 0;
  font-size: 1rem;
}

.premium-mini-grid { margin-top: 24px; }

.faq-a-inner a {
  color: #167ef5;
  font-weight: 850;
  text-decoration: none;
}
.faq-a-inner a:hover { text-decoration: underline; }

.brand img,
.logo-row img {
  background: transparent !important;
}

@media (max-width: 1180px) {
  .hero .container { width: min(calc(100% - 30px), 1240px); }
  .premium-hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero .float-pill { min-width: 210px; }
  .hero-conversion-row { grid-template-columns: 1fr; }
  .hero-meta-grid-lower { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero-cta-stack { grid-template-columns: 1fr 1fr; }
  .hero-proof-card { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .premium-hero-grid { grid-template-columns: 1fr; }
  .premium-hero-visual { padding-top: 0; }
  .premium-hero-frame { padding: 20px; }
  .premium-hero-frame .showcase { transform: none; }
  .hero .float-pill {
    position: static;
    min-width: 0;
    margin-top: 12px;
  }
  .hero-bottom-band {
    position: static;
    margin-top: 14px;
  }
  .hero-meta-grid-lower { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  .hero-meta-grid-lower { grid-template-columns: 1fr; }
  .hero-meta-grid-lower .hero-meta-card { min-height: 0; }
  .hero-cta-stack { grid-template-columns: 1fr; }
  .hero-proof-card { grid-column: auto; }
  .hero-conversion-note { text-align: left; }
}

/* =========================================================
   HERO PIECE RESTORE — use approved prebuilt hero components exactly
   2026-08-25
   ========================================================= */
.hero-piece {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.hero-piece-wrap {
  margin: 22px 0 0;
  width: 100%;
}

.hero-benefits-piece {
  max-width: 100%;
  filter: drop-shadow(0 18px 36px rgba(0, 10, 25, .26));
}

.premium-hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 34px !important;
  align-items: center !important;
}

.hero-piece-visual {
  padding: 0 !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-device-piece {
  width: 112%;
  max-width: none;
  margin-left: -6%;
  filter: drop-shadow(0 24px 44px rgba(0, 12, 32, .34));
}

.hero-piece-conversion {
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr) !important;
  gap: 26px !important;
  align-items: center !important;
  margin-top: 18px !important;
}

.hero-offer-piece-wrap {
  min-width: 0;
}

.hero-offer-piece {
  width: 100%;
  filter: drop-shadow(0 18px 34px rgba(0, 12, 32, .28));
}

.hero-piece-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  align-items: center;
}

.hero-piece-cta .btn {
  width: 100%;
  min-height: 60px;
  padding: 16px 20px;
}

.hero-piece-cta .hero-conversion-note {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2px;
  padding-top: 0;
  font-size: .98rem;
  line-height: 1.45;
}

.early-faq-cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.early-faq-cta .btn {
  min-width: 310px;
  border-color: rgba(76, 174, 255, .38);
  background: linear-gradient(180deg, rgba(13, 42, 67, .94), rgba(6, 24, 40, .98));
  box-shadow: 0 16px 34px rgba(0, 10, 24, .22), inset 0 1px 0 rgba(255,255,255,.03);
}

#faq {
  scroll-margin-top: 90px;
}

@media (max-width: 1180px) {
  .premium-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-device-piece {
    width: 100%;
    margin-left: 0;
  }
  .hero-piece-conversion {
    grid-template-columns: 1fr !important;
  }
  .hero-piece-cta {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  .hero-piece-wrap {
    margin-top: 18px;
  }
  .hero-device-piece {
    width: 108%;
    margin-left: -4%;
  }
  .hero-piece-cta {
    grid-template-columns: 1fr !important;
  }
  .hero-piece-cta .hero-conversion-note {
    text-align: left;
  }
  .early-faq-cta .btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   HERO LAYOUT REFINEMENT — align approved hero pieces to approved mockup
   2026-08-25
   ========================================================= */
.hero {
  padding-top: 58px;
  padding-bottom: 54px;
}

.hero .container {
  width: min(calc(100% - 42px), 1620px);
}

.hero-top-pills {
  gap: 16px;
  margin-bottom: 16px;
}

.hero-top-pills .stat-pill {
  padding: 13px 22px;
}

.hero-copy .offer-chip {
  margin-bottom: 18px;
}

.hero-copy h1 {
  max-width: 9.8ch;
  margin-bottom: 14px;
}

.hero-copy .lead {
  max-width: 21ch;
  margin-bottom: 0;
}

.hero-piece-wrap {
  margin: 18px 0 0;
}

.hero-benefits-piece {
  width: 104%;
  max-width: none;
}

.premium-hero-grid {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.hero-piece-visual {
  align-self: start;
  padding-top: 2px !important;
}

.hero-device-piece {
  width: 125%;
  max-width: none;
  margin-left: -15%;
  margin-top: -2px;
  margin-bottom: -74px;
  filter: drop-shadow(0 28px 50px rgba(0, 12, 32, .34));
}

.hero-piece-conversion {
  display: grid !important;
  grid-template-columns: minmax(0, 1.34fr) minmax(360px, 0.66fr) !important;
  gap: 28px !important;
  align-items: end !important;
  margin-top: -14px !important;
}

.hero-offer-piece-wrap {
  align-self: end;
}

.hero-offer-piece {
  width: 100%;
}

.hero-piece-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "eligibility call"
    ". faq"
    "note note" !important;
  gap: 12px 16px !important;
  align-items: start;
  align-self: end;
  padding-bottom: 6px;
}

.hero-piece-cta .btn {
  width: 100%;
}

.btn-eligibility { grid-area: eligibility; }
.btn-call { grid-area: call; }
.btn-faq {
  grid-area: faq;
  min-height: 46px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  font-size: 0.95rem;
  letter-spacing: 0;
  justify-self: stretch;
}

.hero-piece-cta .hero-conversion-note {
  grid-area: note;
  margin-top: 4px;
  text-align: center;
}

@media (max-width: 1360px) {
  .hero-copy .lead { max-width: 26ch; }
  .hero-device-piece {
    width: 120%;
    margin-left: -10%;
    margin-bottom: -58px;
  }
}

@media (max-width: 1180px) {
  .hero .container {
    width: min(calc(100% - 30px), 1360px);
  }

  .premium-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 22px !important;
  }

  .hero-copy .lead {
    max-width: 30ch;
  }

  .hero-device-piece {
    width: 116%;
    margin-left: -8%;
    margin-bottom: -40px;
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr) !important;
    gap: 18px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 980px) {
  .premium-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .hero-copy .lead,
  .hero-copy h1 {
    max-width: none;
  }

  .hero-benefits-piece {
    width: 100%;
  }

  .hero-device-piece {
    width: 108%;
    margin-left: -4%;
    margin-bottom: -20px;
  }

  .hero-piece-conversion {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 10px !important;
  }

  .hero-piece-cta {
    grid-template-areas:
      "eligibility call"
      "faq faq"
      "note note" !important;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 44px;
    padding-bottom: 42px;
  }

  .hero .container {
    width: min(calc(100% - 20px), 100%);
  }

  .hero-piece-wrap {
    margin-top: 14px;
  }

  .hero-device-piece {
    width: 104%;
    margin-left: -2%;
    margin-bottom: -8px;
  }

  .hero-piece-cta {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eligibility"
      "call"
      "faq"
      "note" !important;
  }

  .hero-piece-cta .hero-conversion-note {
    text-align: left;
  }
}

/* =========================================================
   HERO LAYOUT HOTFIX — restore mockup-style balance and containment
   2026-08-26
   ========================================================= */
.min-header .inner {
  width: min(calc(100% - 48px), 1680px);
  margin: 0 auto;
  min-height: 84px;
}

.brand img {
  height: 52px;
}

.header-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.hero {
  padding-top: 52px;
  padding-bottom: 64px;
}

.hero .container {
  width: min(calc(100% - 48px), 1680px);
}

.hero-top-pills {
  gap: 18px;
  margin-bottom: 18px;
}

.hero-copy {
  padding-top: 6px;
}

.hero-copy .offer-chip {
  margin-bottom: 20px;
}

.hero-copy h1 {
  max-width: 9.2ch;
  margin-bottom: 16px;
}

.hero-copy .lead {
  max-width: 32ch;
  margin-bottom: 0;
}

.hero-piece-wrap {
  width: min(100%, 610px);
  margin-top: 22px;
}

.hero-benefits-piece {
  width: 100%;
  max-width: 100%;
}

.premium-hero-grid {
  grid-template-columns: minmax(420px, 0.92fr) minmax(620px, 1.08fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

.hero-piece-visual {
  align-self: start;
  justify-content: flex-start;
  overflow: visible;
  min-width: 0;
}

.hero-device-piece {
  width: 100%;
  max-width: 100%;
  margin: 0;
  filter: drop-shadow(0 28px 50px rgba(0, 12, 32, .34));
}

.hero-piece-conversion {
  grid-template-columns: minmax(620px, 1.12fr) minmax(420px, 0.88fr) !important;
  gap: 26px !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.hero-offer-piece-wrap {
  min-width: 0;
  align-self: center;
}

.hero-piece-cta {
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "eligibility call"
    ". faq"
    "note note" !important;
  gap: 14px 16px !important;
  align-items: center;
  width: min(100%, 660px);
  margin-left: auto;
  padding-bottom: 0;
}

.hero-piece-cta .btn {
  width: 100%;
  min-height: 64px;
}

.btn-faq {
  min-height: 48px !important;
}

.hero-piece-cta .hero-conversion-note {
  margin-top: 4px;
  text-align: center;
}

@media (max-width: 1460px) {
  .hero .container,
  .min-header .inner {
    width: min(calc(100% - 40px), 1500px);
  }

  .premium-hero-grid {
    grid-template-columns: minmax(390px, 0.96fr) minmax(520px, 1.04fr) !important;
    gap: 22px !important;
  }

  .hero-copy .lead {
    max-width: 30ch;
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(540px, 1.08fr) minmax(380px, 0.92fr) !important;
  }
}

@media (max-width: 1240px) {
  .premium-hero-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr) !important;
    gap: 20px !important;
  }

  .hero-copy .lead {
    max-width: 28ch;
  }

  .hero-piece-wrap {
    width: min(100%, 560px);
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr) !important;
    gap: 18px !important;
  }

  .hero-piece-cta {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .min-header .inner,
  .hero .container {
    width: min(calc(100% - 28px), 100%);
  }

  .premium-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hero-copy h1,
  .hero-copy .lead {
    max-width: none;
  }

  .hero-piece-wrap {
    width: min(100%, 720px);
  }

  .hero-piece-visual {
    justify-content: center;
  }

  .hero-device-piece {
    width: min(100%, 900px);
  }

  .hero-piece-conversion {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 14px !important;
  }

  .hero-piece-cta {
    grid-template-areas:
      "eligibility call"
      "faq faq"
      "note note" !important;
    width: min(100%, 760px);
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .min-header .inner,
  .hero .container {
    width: min(calc(100% - 20px), 100%);
  }

  .min-header .inner {
    min-height: 72px;
  }

  .brand img {
    height: 40px;
  }

  .header-link {
    font-size: 0.9rem;
  }

  .hero {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .hero-top-pills {
    gap: 12px;
  }

  .hero-top-pills .stat-pill {
    padding: 12px 16px;
  }

  .hero-piece-wrap {
    width: 100%;
    margin-top: 18px;
  }

  .hero-device-piece {
    width: 100%;
  }

  .hero-piece-cta {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eligibility"
      "call"
      "faq"
      "note" !important;
    width: 100%;
  }

  .hero-piece-cta .hero-conversion-note {
    text-align: left;
  }
}


/* =========================================================
   FINAL HERO BALANCE + HEADER ALIGNMENT FIX
   2026-08-26
   ========================================================= */
.min-header .inner {
  width: min(calc(100% - 24px), 1760px) !important;
  padding-inline: 0 !important;
}

.brand {
  margin-right: auto;
}

.brand img {
  height: 52px;
}

.header-link {
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}

.hero {
  padding-top: 48px !important;
  padding-bottom: 60px !important;
}

.hero .container {
  width: min(calc(100% - 32px), 1740px) !important;
}

.hero-top-pills {
  margin-bottom: 18px !important;
}

.hero-copy {
  padding-top: 4px !important;
}

.hero-copy h1 {
  max-width: 10.2ch !important;
  margin-bottom: 14px !important;
}

.hero-copy .lead {
  max-width: 40ch !important;
  width: 100%;
  line-height: 1.42 !important;
  margin-bottom: 0 !important;
}

.hero-piece-wrap {
  width: min(100%, 700px) !important;
  margin-top: 18px !important;
}

.premium-hero-grid {
  grid-template-columns: minmax(520px, 0.98fr) minmax(760px, 1.02fr) !important;
  gap: clamp(20px, 2vw, 40px) !important;
  align-items: start !important;
}

.hero-piece-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.hero-device-piece {
  width: min(100%, 940px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  filter: drop-shadow(0 28px 50px rgba(0, 12, 32, .34));
}

.hero-piece-conversion {
  grid-template-columns: minmax(640px, 1.15fr) minmax(420px, 0.85fr) !important;
  gap: clamp(18px, 2vw, 34px) !important;
  align-items: start !important;
  margin-top: 12px !important;
}

.hero-offer-piece-wrap {
  align-self: start !important;
}

.hero-piece-cta {
  width: min(100%, 720px) !important;
  align-self: start;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "eligibility call"
    "note note"
    "faq faq" !important;
  gap: 14px 18px !important;
}

.btn-eligibility { grid-area: eligibility; }
.btn-call { grid-area: call; }

.hero-piece-cta .btn {
  width: 100%;
}

.hero-piece-cta .hero-conversion-note {
  grid-area: note;
  margin-top: 2px !important;
  text-align: center !important;
}

.btn-faq {
  grid-area: faq;
  justify-self: center;
  width: min(100%, 360px) !important;
  min-height: 54px !important;
  padding-inline: 30px !important;
}

@media (max-width: 1460px) {
  .min-header .inner,
  .hero .container {
    width: min(calc(100% - 28px), 1500px) !important;
  }

  .premium-hero-grid {
    grid-template-columns: minmax(460px, 0.98fr) minmax(620px, 1.02fr) !important;
  }

  .hero-copy .lead {
    max-width: 37ch !important;
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(560px, 1.08fr) minmax(380px, 0.92fr) !important;
  }
}

@media (max-width: 1240px) {
  .premium-hero-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(500px, 1fr) !important;
    gap: 18px !important;
  }

  .hero-copy .lead {
    max-width: 34ch !important;
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr) !important;
    gap: 18px !important;
  }

  .hero-piece-cta {
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .min-header .inner,
  .hero .container {
    width: min(calc(100% - 24px), 100%) !important;
  }

  .premium-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hero-copy h1,
  .hero-copy .lead,
  .hero-piece-wrap {
    max-width: none !important;
    width: 100% !important;
  }

  .hero-piece-visual {
    justify-content: center !important;
  }

  .hero-device-piece {
    width: min(100%, 920px) !important;
  }

  .hero-piece-conversion {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 14px !important;
  }

  .hero-piece-cta {
    width: min(100%, 760px) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 767px) {
  .min-header .inner,
  .hero .container {
    width: min(calc(100% - 16px), 100%) !important;
  }

  .min-header .inner {
    min-height: 72px !important;
  }

  .brand img {
    height: 38px !important;
  }

  .header-link {
    font-size: 0.84rem !important;
  }

  .hero {
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }

  .hero-copy .lead {
    max-width: none !important;
  }

  .hero-piece-cta {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eligibility"
      "call"
      "note"
      "faq" !important;
  }

  .hero-piece-cta .hero-conversion-note {
    text-align: left !important;
  }

  .btn-faq {
    width: 100% !important;
  }
}

/* =========================================================
   SECTION-BY-SECTION HERO FINAL ALIGNMENT
   2026-08-26
   ========================================================= */

/* Header: push approved logo to far left and Main Website to far right */
.min-header .inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: clamp(18px, 2vw, 36px) !important;
}
.min-header .brand { margin-right: auto !important; }
.min-header .header-link {
  margin-left: auto !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

/* Hero overall proportions */
.hero .container {
  width: min(calc(100% - 48px), 1900px) !important;
  max-width: none !important;
}
.premium-hero-grid {
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
  gap: clamp(22px, 2vw, 38px) !important;
  align-items: start !important;
}
.hero-copy {
  min-width: 0;
  padding-top: 2px !important;
}
.hero-copy h1 {
  max-width: 100% !important;
  margin-bottom: 16px !important;
}
.hero-copy .lead {
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.42 !important;
  margin-bottom: 0 !important;
}

/* Benefits asset: cropped approved artwork now visibly aligns with text left edge */
.hero-piece-wrap {
  width: min(100%, 720px) !important;
  max-width: 100% !important;
  margin: 20px auto 0 0 !important;
}
.hero-benefits-piece {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Device hero: fill the visual column, but never exceed it or clip right */
.hero-piece-visual {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
}
.hero-device-piece {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Offer strip and the two primary CTA buttons return to the SAME top line */
.hero-piece-conversion {
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  gap: clamp(20px, 2vw, 34px) !important;
  align-items: start !important;
  margin-top: 16px !important;
}
.hero-offer-piece-wrap {
  min-width: 0 !important;
  align-self: start !important;
  margin: 0 !important;
}
.hero-offer-piece {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
}
.hero-piece-cta {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "eligibility call"
    "note note" !important;
  gap: 12px 18px !important;
  align-content: start !important;
  align-items: start !important;
}
.btn-eligibility { grid-area: eligibility !important; }
.btn-call { grid-area: call !important; }
.hero-piece-cta .btn {
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
}
.hero-piece-cta .hero-conversion-note {
  grid-area: note !important;
  margin: 0 !important;
  padding-top: 2px !important;
  text-align: center !important;
}

/* FAQ button is centered against the FULL PAGE, not the right CTA column */
.hero-faq-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 20px !important;
}
.hero-faq-wide {
  width: min(420px, 100%) !important;
  min-height: 58px !important;
  padding: 14px 30px !important;
  margin: 0 auto !important;
  font-size: 1.02rem !important;
}

@media (max-width: 1500px) {
  .hero .container {
    width: min(calc(100% - 36px), 1520px) !important;
  }
  .premium-hero-grid {
    grid-template-columns: minmax(0, .44fr) minmax(0, .56fr) !important;
  }
  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1.10fr) minmax(0, .90fr) !important;
  }
}

@media (max-width: 1180px) {
  .hero .container {
    width: min(calc(100% - 28px), 100%) !important;
  }
  .premium-hero-grid {
    grid-template-columns: minmax(0, .46fr) minmax(0, .54fr) !important;
    gap: 18px !important;
  }
  .hero-piece-wrap {
    width: 100% !important;
  }
  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    gap: 18px !important;
  }
  .hero-piece-cta .btn {
    padding-inline: 18px !important;
  }
}

@media (max-width: 980px) {
  .premium-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hero-copy h1,
  .hero-copy .lead,
  .hero-piece-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-device-piece {
    width: min(100%, 900px) !important;
    max-width: 100% !important;
  }
  .hero-piece-conversion {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
  }
  .hero-piece-cta {
    width: min(100%, 760px) !important;
    margin-inline: auto !important;
  }
  .hero-faq-row {
    margin-top: 18px !important;
  }
}

@media (max-width: 720px) {
  .min-header .inner {
    padding-inline: 14px !important;
  }
  .hero .container {
    width: min(calc(100% - 18px), 100%) !important;
  }
  .hero-piece-cta {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eligibility"
      "call"
      "note" !important;
  }
  .hero-piece-cta .hero-conversion-note {
    text-align: left !important;
  }
  .hero-faq-wide {
    width: 100% !important;
  }
}

/* =========================================================
   DESKTOP HERO ALIGNMENT TWEAKS
   2026-08-26 FINAL PASS
   ========================================================= */

/* Desktop and large tablet: enlarge hero visual, keep full image visible,
   bring offer strip + CTA buttons into stronger alignment, and prevent
   CTA support copy from breaking to a second line on desktop. */
@media (min-width: 981px) {
  .premium-hero-grid {
    grid-template-columns: minmax(0, .40fr) minmax(0, .60fr) !important;
    gap: clamp(24px, 2vw, 40px) !important;
  }

  .hero-piece-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .hero-device-piece {
    width: 108% !important;
    max-width: 108% !important;
    transform: translateX(-2%) !important;
  }

  .hero-piece-conversion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(20px, 1.8vw, 30px) !important;
    margin-top: 8px !important;
  }

  .hero-offer-piece-wrap {
    align-self: start !important;
    transform: translateY(-8px) !important;
  }

  .hero-piece-cta {
    align-self: start !important;
    gap: 12px 18px !important;
  }

  .hero-piece-cta .btn {
    align-self: start !important;
  }

  .hero-piece-cta .hero-conversion-note {
    white-space: nowrap !important;
    font-size: 0.94rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  .hero-faq-row {
    margin-top: 28px !important;
  }
}

/* Medium desktop tuning */
@media (min-width: 981px) and (max-width: 1280px) {
  .premium-hero-grid {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
  }

  .hero-device-piece {
    width: 106% !important;
    max-width: 106% !important;
    transform: translateX(-1%) !important;
  }

  .hero-piece-cta .hero-conversion-note {
    font-size: 0.9rem !important;
  }
}

/* =========================================================
   FINAL DESKTOP SYMMETRY + EDGE ALIGNMENT PASS
   2026-08-26
   ========================================================= */
@media (min-width: 981px) {
  /* Make the left and right hero columns share the same bottom edge. */
  .premium-hero-grid {
    align-items: stretch !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  /* Keep text exactly where it is; pull the approved benefits artwork
     to the same visible left edge and let its bottom align with the
     device artwork's bottom feature pills. */
  .hero-piece-wrap {
    margin-top: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-top: 20px !important;
    width: min(104%, 740px) !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .hero-benefits-piece {
    width: 104% !important;
    max-width: none !important;
    transform: translateX(-4%) !important;
    transform-origin: left bottom !important;
  }

  .hero-piece-visual {
    align-self: stretch !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Keep the approved hero size, but shift it left enough that the
     108%-wide artwork never clips on the right edge. */
  .hero-device-piece {
    width: 108% !important;
    max-width: 108% !important;
    margin: 0 !important;
    transform: translateX(-7.4%) !important;
    transform-origin: center bottom !important;
  }

  /* Offer strip and primary CTA buttons share one clean top line. */
  .hero-piece-conversion {
    align-items: start !important;
    margin-top: 10px !important;
  }

  .hero-offer-piece-wrap {
    align-self: start !important;
    transform: translateY(-14px) !important;
  }

  .hero-piece-cta {
    align-self: start !important;
    padding-top: 0 !important;
  }

  .hero-piece-cta .hero-conversion-note {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
  }

  /* Keep FAQ centered to the full page and give it a little more air. */
  .hero-faq-row {
    margin-top: 34px !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .hero-benefits-piece {
    width: 102% !important;
    transform: translateX(-2%) !important;
  }

  .hero-device-piece {
    width: 106% !important;
    max-width: 106% !important;
    transform: translateX(-5.7%) !important;
  }

  .hero-piece-cta .hero-conversion-note {
    font-size: 0.88rem !important;
  }
}

/* =========================================================
   FINAL DESKTOP ALIGNMENT — 2026-08-26 5PM PASS
   Requested: exact left alignment, hero up/right without clipping,
   offer strip aligned to CTAs, tighter FAQ spacing.
   ========================================================= */
@media (min-width: 981px) {
  /* Keep all left-side hero assets on the exact text edge. */
  .hero-piece-wrap {
    margin-left: -18px !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .hero-benefits-piece {
    transform: none !important;
    transform-origin: left bottom !important;
  }

  /* Give the right visual column slightly more room. This lets the
     approved hero move right while keeping the same apparent size and
     still guarantees that its right edge remains inside the viewport. */
  .premium-hero-grid {
    grid-template-columns: minmax(0, .39fr) minmax(0, .61fr) !important;
    align-items: stretch !important;
  }

  .hero-piece-visual {
    align-self: stretch !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .hero-device-piece {
    width: 106.25% !important;
    max-width: 106.25% !important;
    margin: 0 0 -72px 0 !important;
    transform: translate(-5.9%, -72px) !important;
    transform-origin: center bottom !important;
  }

  /* Pull the offer strip up to the same visual top line as the two CTAs.
     Negative bottom margin prevents the transformed artwork from leaving
     a large empty layout box below it. */
  .hero-piece-conversion {
    align-items: start !important;
    margin-top: 4px !important;
  }

  .hero-offer-piece-wrap {
    align-self: start !important;
    margin-left: -18px !important;
    margin-bottom: -48px !important;
    transform: translateY(-48px) !important;
  }

  .hero-piece-cta {
    align-self: start !important;
    padding-top: 0 !important;
  }

  .hero-piece-cta .hero-conversion-note {
    white-space: nowrap !important;
    overflow: visible !important;
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }

  /* Tighten the blank space around the centered FAQ shortcut. */
  .hero-faq-row {
    margin-top: 12px !important;
    margin-bottom: 4px !important;
  }

  .hero {
    padding-bottom: 28px !important;
  }
}

/* Keep the same relationships throughout smaller desktop widths. */
@media (min-width: 981px) and (max-width: 1280px) {
  .premium-hero-grid {
    grid-template-columns: minmax(0, .41fr) minmax(0, .59fr) !important;
  }

  .hero-piece-wrap,
  .hero-offer-piece-wrap {
    margin-left: -12px !important;
  }

  .hero-device-piece {
    width: 104.2% !important;
    max-width: 104.2% !important;
    margin-bottom: -60px !important;
    transform: translate(-4.05%, -60px) !important;
  }

  .hero-offer-piece-wrap {
    margin-bottom: -40px !important;
    transform: translateY(-40px) !important;
  }

  .hero-faq-row {
    margin-top: 10px !important;
  }
}

/* =========================================================
   DESKTOP MICRO-ALIGNMENT PASS — 2026-08-26
   Final requested nudges: hero slightly up/right, stronger left-edge
   alignment, and offer/CTA top-line alignment across desktop widths.
   ========================================================= */
@media (min-width: 981px) {
  /* Bring the approved benefits artwork to the same visible left edge
     as the text above it. */
  .hero-piece-wrap {
    margin-left: -30px !important;
  }

  /* Keep current hero size; move it a little farther UP and RIGHT.
     The right-side column remains wide enough to keep the full artwork visible. */
  .hero-device-piece {
    width: 106.25% !important;
    max-width: 106.25% !important;
    margin: 0 0 -90px 0 !important;
    transform: translate(-4.35%, -90px) !important;
    transform-origin: center bottom !important;
  }

  /* Raise the offer strip so its top edge visually matches the CTA row. */
  .hero-piece-conversion {
    align-items: start !important;
    margin-top: 0 !important;
  }

  .hero-offer-piece-wrap {
    margin-left: -4px !important;
    margin-bottom: -72px !important;
    transform: translateY(-72px) !important;
  }

  .hero-piece-cta {
    padding-top: 0 !important;
    align-self: start !important;
  }

  .hero-piece-cta .hero-conversion-note {
    white-space: nowrap !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }

  /* Keep FAQ tight to the hero conversion row. */
  .hero-faq-row {
    margin-top: 8px !important;
    margin-bottom: 2px !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .hero-piece-wrap {
    margin-left: -24px !important;
  }

  .hero-device-piece {
    width: 104.2% !important;
    max-width: 104.2% !important;
    margin-bottom: -72px !important;
    transform: translate(-2.75%, -72px) !important;
  }

  .hero-offer-piece-wrap {
    margin-left: -2px !important;
    margin-bottom: -58px !important;
    transform: translateY(-58px) !important;
  }

  .hero-piece-cta .hero-conversion-note {
    font-size: 0.88rem !important;
  }
}

/* =========================================================
   DESKTOP ROW GAP TUNING — 2026-08-26
   Increase the vertical space between the benefits row and the
   offer/CTA row while keeping the offer strip and CTA buttons
   aligned with each other across desktop widths.
   ========================================================= */
@media (min-width: 981px) {
  .hero-piece-conversion {
    margin-top: 36px !important;
  }
}

/* =========================================================
   DESKTOP HALF-INCH HERO ROW GAP — 2026-08-27
   Increase the vertical separation between the upper hero row
   and the lower offer/CTA row to approximately 1/2 inch at
   standard desktop CSS pixel density, while preserving the
   current horizontal alignment of the offer strip and CTAs.
   ========================================================= */
@media (min-width: 981px) {
  .hero-piece-conversion {
    margin-top: 48px !important;
  }
}