/* Shared desktop and registro_mobile layouts, based on the Figma frames. */
body { font-family: "Inter", Arial, sans-serif; background: #fbfaf8; }
button, input { font-family: inherit; }
.mobile-break { display: none; }
.mobile-title { display: none; }
.benefits, .faq { background: #fbfaf8; color: #142b4d; }
.benefits { padding: calc(72 * var(--hero-unit)) 24px; }
.benefits-wrap, .feature-wrap, .how-wrap, .cta-wrap, .footer-inner { max-width: calc(1120 * var(--hero-unit)); margin: 0 auto; }
.eyebrow { display: block; width: fit-content; margin: 0 auto calc(9 * var(--hero-unit)); padding: 0; border: 0; background: none; color: #f2aa17; font-size: calc(13 * var(--hero-unit)); line-height: calc(16 * var(--hero-unit)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-grid .eyebrow { margin-left: 0; }
h2 { margin: 0; font-size: calc(36 * var(--hero-unit)); line-height: calc(44 * var(--hero-unit)); font-weight: 700; }
.benefits-header { text-align: center; }
.benefits-header p { max-width: calc(720 * var(--hero-unit)); margin: calc(9 * var(--hero-unit)) auto 0; font-size: calc(15.1 * var(--hero-unit)); line-height: calc(26.4 * var(--hero-unit)); }
.cards-grid { display: grid; gap: calc(16 * var(--hero-unit)); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: calc(42 * var(--hero-unit)); align-items: start; }
.overview .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview { padding-top: calc(49.4 * var(--hero-unit)); padding-bottom: calc(49.4 * var(--hero-unit)); min-height: calc(465 * var(--hero-unit)); }
.mini-card { padding: calc(18 * var(--hero-unit)); border: 1px solid #dfe5ec; border-radius: calc(9 * var(--hero-unit)); background: #fff; text-align: center; min-height: calc(175 * var(--hero-unit)); }
.mini-card .icon { margin-bottom: calc(10 * var(--hero-unit)); font-size: calc(21 * var(--hero-unit)); line-height: calc(22 * var(--hero-unit)); }
.mini-card h4 { margin: 0 0 calc(6 * var(--hero-unit)); font-size: calc(16.7 * var(--hero-unit)); line-height: calc(20 * var(--hero-unit)); font-weight: 700; }
.mini-card p { margin: 0; color: #64748b; font-size: calc(13.2 * var(--hero-unit)); line-height: calc(21.7 * var(--hero-unit)); }
.overview .mini-card { border-color: #f2aa17; border-top-width: 3px; padding: calc(22 * var(--hero-unit)); min-height: calc(155 * var(--hero-unit)); }
.overview .mini-card .icon { font-size: calc(24 * var(--hero-unit)); line-height: calc(25 * var(--hero-unit)); }
.overview .mini-card:last-child .icon { font-size: calc(32 * var(--hero-unit)); line-height: calc(33 * var(--hero-unit)); }
.overview .mini-card p { color: #142b4d; }
.services .mini-card:nth-child(2), .services .mini-card:nth-child(11) { min-height: calc(192 * var(--hero-unit)); }
.services .mini-card:first-child h4 { font-size: calc(16.3 * var(--hero-unit)); letter-spacing: -.01em; }
.services .mini-card:nth-child(4) h4, .services .mini-card:nth-child(9) h4, .services .mini-card:nth-child(10) h4, .services .mini-card:nth-child(11) h4 { max-width: calc(153 * var(--hero-unit)); margin-left: auto; margin-right: auto; }
.feature-band { padding: calc(41 * var(--hero-unit)) 24px calc(39 * var(--hero-unit)); background: #263f65; color: #fff; }
.feature-layout { display: grid; grid-template-columns: minmax(0, 453fr) minmax(0, 560fr); gap: calc(107 * var(--hero-unit)); align-items: center; }
.feature-copy .eyebrow { margin: 0 0 calc(13.2 * var(--hero-unit)); padding: calc(8 * var(--hero-unit)) calc(14 * var(--hero-unit)); background: #6b5525; color: #ffd26d; border-radius: 999px; }
.feature-copy h2 { font-size: calc(36.5 * var(--hero-unit)); line-height: calc(39.14 * var(--hero-unit)); }
.feature-copy p { margin: calc(13.2 * var(--hero-unit)) 0 0; font-size: calc(15.9 * var(--hero-unit)); line-height: calc(27.2 * var(--hero-unit)); font-weight: 500; }
.highlight { color: #f2aa17; }
.mockup-shell { display: flex; gap: calc(96 * var(--hero-unit)); align-items: center; justify-content: space-between; }
.phone-wrap { position: relative; flex: 0 0 calc(200 * var(--hero-unit)); width: calc(200 * var(--hero-unit)); }
.phone-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 200 / 399; }
.phone-wrap .membership-card { position: absolute; left: 7%; top: 15.54%; width: 85.5%; height: auto; aspect-ratio: 171 / 110; }
.covered { text-align: center; flex: 1; }
.stat-number { color: #f2aa17; font-size: calc(82 * var(--hero-unit)); line-height: 1; font-weight: 700; }
.stat-text { margin: 1px auto 0; max-width: calc(145 * var(--hero-unit)); font-size: calc(15.1 * var(--hero-unit)); line-height: calc(18 * var(--hero-unit)); color: #dce4ef; }
.how { padding: calc(72 * var(--hero-unit)) 24px; min-height: calc(421 * var(--hero-unit)); color: #fff; background: #172d4e; text-align: center; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(50 * var(--hero-unit)); margin-top: calc(45 * var(--hero-unit)); }
.step-number { width: calc(50 * var(--hero-unit)); height: calc(50 * var(--hero-unit)); border-radius: 50%; display: grid; place-items: center; margin: 0 auto calc(17 * var(--hero-unit)); background: #f2aa17; color: #172d4e; font-size: calc(18 * var(--hero-unit)); font-weight: 800; }
.step h4 { margin: 0 0 calc(17 * var(--hero-unit)); font-size: calc(17 * var(--hero-unit)); line-height: calc(21 * var(--hero-unit)); }
.step p { margin: 0 auto; font-size: calc(13.2 * var(--hero-unit)); line-height: calc(21 * var(--hero-unit)); font-weight: 500; }
.step:first-child p { max-width: calc(220 * var(--hero-unit)); }
.faq { padding: calc(72 * var(--hero-unit)) 24px calc(48 * var(--hero-unit)); }
.faq-wrap { max-width: calc(720 * var(--hero-unit)); margin: 0 auto; }
.faq-header { margin-bottom: calc(39 * var(--hero-unit)); text-align: center; }
.faq-header h2 { font-size: calc(35 * var(--hero-unit)); }
.faq-item { margin-bottom: calc(9 * var(--hero-unit)); border: 1px solid #dfe5ec; border-radius: calc(6 * var(--hero-unit)); background: #fff; overflow: hidden; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: calc(51 * var(--hero-unit)); padding: calc(13.5 * var(--hero-unit)) calc(16 * var(--hero-unit)); border: 0; background: transparent; text-align: left; font-size: calc(15.8 * var(--hero-unit)); line-height: calc(19 * var(--hero-unit)); font-weight: 700; color: #142b4d; cursor: pointer; }
.faq-question .icon { display: block; width: calc(24 * var(--hero-unit)); height: calc(24 * var(--hero-unit)); flex-shrink: 0; }
.faq-question .icon img { display: block; width: 14.0055px; height: 7.00749px; margin: 8px auto; transform: rotate(180deg); transition: transform .2s; }
.faq-item.open .icon img { transform: rotate(0); }
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-answer-inner { padding: 0 calc(16 * var(--hero-unit)) calc(16 * var(--hero-unit)); font-size: calc(12 * var(--hero-unit)); line-height: calc(18 * var(--hero-unit)); color: #142b4d; }
.faq-item:first-child .faq-answer-inner { min-height: calc(61 * var(--hero-unit)); }
.cta-band { padding: calc(68 * var(--hero-unit)) 24px; background: #263f65; color: #fff; text-align: center; }
.cta-wrap h2 { font-size: calc(35.2 * var(--hero-unit)); }
.cta-wrap p { margin: calc(16 * var(--hero-unit)) auto calc(32 * var(--hero-unit)); font-size: calc(15.1 * var(--hero-unit)); line-height: calc(20 * var(--hero-unit)); font-weight: 600; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: min(100%, calc(559 * var(--hero-unit))); min-height: calc(89 * var(--hero-unit)); padding: calc(16 * var(--hero-unit)) calc(24 * var(--hero-unit)); border: 0; border-radius: calc(8 * var(--hero-unit)); background: #f2aa17; color: #172d4e; font-size: calc(18 * var(--hero-unit)); font-weight: 800; cursor: pointer; }
.footer { padding: calc(25 * var(--hero-unit)) 24px; background: #172d4e; color: #b9c4d3; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; font-size: calc(11.4 * var(--hero-unit)); line-height: calc(14 * var(--hero-unit)); }
:focus-visible { outline: 2px solid #f2aa17; outline-offset: 3px; }
.field { position: relative; }
.field-placeholder { display: none; }
.registration-feedback { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
@media (min-width: 810px) and (max-width: 1100px) {
  .feature-layout { gap: 30px; }
  .mockup-shell { gap: 25px; }
}
@media (max-width: 809px) {
  :root { --hero-unit: 1px; }
  .mobile-break { display: initial; }
  .hero { background: #142b4d; }
  .topbar { padding: 29px 27px 22px; gap: 12px; background: #142b4d; }
  .brand { flex-basis: 140px; border-radius: 15px; }
  .brand-right img { width: calc(100% - 20px); }
  .separator { display: none; }
  .hero-inner { display: flex; flex-direction: column; max-width: 466px; padding: 20px 27px 63.4px; }
  .family-photo { order: -1; margin: 0 0 20px; width: 100%; }
  .family-photo img { aspect-ratio: 358 / 176; border-radius: 20px; }
  .hero-grid { display: block; width: 100%; }
  .hero-intro { margin: 0 10px; }
  .hero-grid .eyebrow { font-family: "Inter", Arial, sans-serif; font-size: 11px; line-height: 13px; letter-spacing: .08em; margin: 0 auto 23px; padding: 8px 14px; }
  h1 { font-size: 30px; line-height: 36px; }
  .desktop-title { display: none; }
  .mobile-title { display: initial; }
  .hero-grid .highlight { display: block; }
  .hero-copy { font-size: 15.9px; line-height: 24px; margin-top: 13px; }
  .stats { justify-content: space-between; margin-top: 33px; gap: 16px; padding-right: 23px; }
  .stat:last-child { display: none; }
  .stat strong { font-size: 25.1px; line-height: 31px; }
  .stat span { font-size: 12.3px; line-height: 15px; }
  .signup-card { margin: 33px auto 0; width: 100%; max-width: 400px; padding: 28px; }
  .signup-card h3 { font-size: 13px; line-height: 16px; }
  .signup-card .subtitle { font-size: 20.5px; line-height: 25px; }
  .primary-btn { min-height: 52px; padding: 16px 10px; font-size: 14.6px; line-height: 18px; }
  .secure-note { font-size: 11.1px; line-height: 16px; white-space: nowrap; }
  .field-placeholder { display: block; position: absolute; top: 9px; left: 15px; right: 15px; font-size: 13.9px; line-height: 17px; color: #757575; pointer-events: none; }
  .field input:focus ~ .field-placeholder, .field input:not(:placeholder-shown) ~ .field-placeholder { display: none; }
  .field:has(.field-placeholder) input::placeholder { color: transparent; }
  .benefits { padding: 34px 25px 25px; }
  .overview { padding: 34px 25px 30px; }
  .benefits-wrap { max-width: 412px; }
  h2, .faq-header h2, .cta-wrap h2 { font-size: 30px; line-height: 36px; }
  .overview .benefits-header p { max-width: 342px; margin-top: 33px; font-size: 15.1px; line-height: 26.4px; }
  .overview .benefits-header p .mobile-break { display: block; height: 0; }
  .cards-grid, .overview .cards-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 33px; }
  .overview .mini-card { min-height: 155px; }
  .overview .mini-card:last-child { min-height: 162px; }
  .feature-band { padding: 44px 33px 42.4px; background: #142b4d; }
  .feature-wrap { max-width: 346px; }
  .feature-layout { display: block; }
  .feature-copy .eyebrow { margin-bottom: 18px; }
  .feature-copy h2 { font-size: 30px; line-height: 36px; }
  .feature-copy p { margin-top: 19px; font-size: 15.9px; line-height: 27.2px; }
  .mockup-shell { flex-direction: column; gap: 28px; margin-top: 25px; }
  .phone-wrap { flex-basis: auto; width: 200px; }
  .stat-number { font-size: 82px; }
  .stat-text { font-size: 15.1px; line-height: 18px; }
  .services { padding: 34px 34px 50px; }
  .services h2 { max-width: 250px; margin: 16px auto 0; }
  .services .cards-grid { margin-top: 28px; gap: 16px; }
  .services .mini-card { min-height: 0; padding: 18px; }
  .services .mini-card:nth-child(2), .services .mini-card:nth-child(11) { min-height: 0; }
  .services .mini-card:nth-child(4) h4 { max-width: 100px; }
  .services .mini-card:nth-child(9) h4, .services .mini-card:nth-child(10) h4 { max-width: 120px; }
  .services .mini-card:nth-child(11) h4 { max-width: 153px; }
  .services .mini-card:nth-child(7) p { max-width: 180px; margin: 0 auto; }
  .services .mini-card:nth-child(8) p { max-width: 170px; margin: 0 auto; }
  .services .mini-card:nth-child(9) p, .services .mini-card:nth-child(10) p { max-width: 180px; margin: 0 auto; }
  .how { padding: 24px 32px 55px; }
  .steps { grid-template-columns: 1fr; gap: 28px; margin-top: 49px; }
  .step { min-height: 133px; }
  .faq { padding: 43px 31px 37px; }
  .faq-header { margin-bottom: 14px; }
  .faq-header .eyebrow { margin-bottom: 14px; }
  .faq-question { font-size: 14px; line-height: 17px; padding: 16px; }
  .faq-question .icon { width: 17px; height: 17px; }
  .faq-answer-inner { font-size: 9px; line-height: 18px; }
  .faq-item:first-child .faq-answer-inner { padding-bottom: 7px; }
  .cta-band { padding: 29px 25px 0; background: #142b4d; }
  .cta-wrap .eyebrow { margin-bottom: 14px; }
  .cta-wrap h2 { max-width: 340px; margin: 0 auto; }
  .cta-wrap p { margin: 25px auto 31px; font-size: 15.1px; line-height: 18px; }
  .cta-btn { width: 283px; min-height: 50px; font-size: 14.6px; }
  .footer { background: #142b4d; padding: 31px 20px 28px; }
  .footer-inner { display: block; text-align: center; font-size: 11.4px; }
  .footer-inner span:first-child { display: none; }
}
@media (max-width: 374px) {
  .hero-inner { padding-left: 20px; padding-right: 20px; }
  .hero-intro { margin: 0; }
  .hero-grid .eyebrow { font-size: 9.5px; padding-left: 10px; padding-right: 10px; }
  .signup-card { padding: 22px; }
  .secure-note { font-size: 9px; }
  .benefits-header h2, .faq-header h2 { font-size: 25px; }
  .services { padding-left: 24px; padding-right: 24px; }
  .feature-band { padding-left: 25px; padding-right: 25px; }
  .faq { padding-left: 20px; padding-right: 20px; }
  .faq-question { font-size: 12px; }
}