:root {
        --navy-900: #0f2447;
        --navy-800: #112e50;
        --navy-700: #173a61;
        --gold: #f4b73d;
        --gold-soft: #f7d377;
        --light-bg: #f4f5f6;
        --card-border: rgba(18, 51, 86, 0.3);
        --text: #0a1f3d;
        --muted: #58728f;
        --white: #ffffff;
        /* Preserve Figma proportions as the available desktop width changes. */
        --hero-unit: clamp(0.73px, 0.0543vw, 1.3px);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: var(--light-bg);
        color: var(--text);
      }

      .page-shell {
        width: 100%;
        overflow-x: hidden;
      }

      .hero {
        background: #1d3458;
        padding: 0;
        color: var(--white);
        font-family: "Inter", Arial, sans-serif;
      }

      .topbar {
        max-width: none;
        margin: 0 auto;
        padding: calc(24 * var(--hero-unit)) 20px calc(28 * var(--hero-unit));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(15 * var(--hero-unit));
        background: #172d4e;
      }

      .brand {
        flex: 0 1 calc(187 * var(--hero-unit));
        min-width: 0;
        aspect-ratio: 187 / 81;
        background: #fff;
        border-radius: calc(20 * var(--hero-unit));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .brand img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .brand-right img {
        /* The source includes transparent space above and below the logo. */
        width: calc(100% - calc(26 * var(--hero-unit)));
        height: auto;
        flex-shrink: 0;
      }

      .separator {
        border-top: calc(2 * var(--hero-unit)) solid #f2aa17;
        margin-top: 0;
      }

      .hero-inner {
        max-width: calc(1136 * var(--hero-unit));
        margin: 0 auto;
        padding: calc(74 * var(--hero-unit)) calc(28 * var(--hero-unit)) calc(38 * var(--hero-unit));
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 480fr) minmax(0, 549.38fr);
        gap: calc(28 * var(--hero-unit));
        align-items: start;
        max-width: calc(1057.38 * var(--hero-unit));
        margin: 0 auto;
      }

      .eyebrow {
        display: inline-block;
        background: rgba(244, 183, 61, 0.12);
        color: var(--gold);
        border: 1px solid rgba(244, 183, 61, 0.7);
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 18px;
      }

      .hero-grid .eyebrow {
        background: #6b5525;
        border: 0;
        color: #ffd26d;
        padding: calc(8 * var(--hero-unit)) calc(14 * var(--hero-unit));
        font-size: calc(13 * var(--hero-unit));
        line-height: calc(16 * var(--hero-unit));
        letter-spacing: 0.08em;
        margin-bottom: calc(20 * var(--hero-unit));
        display: block;
        width: fit-content;
        font-family: "Montserrat", "Inter", Arial, sans-serif;
      }

      h1 {
        margin: 0;
        font-size: calc(47.6 * var(--hero-unit));
        line-height: calc(48.96 * var(--hero-unit));
        letter-spacing: normal;
        color: #fff;
        font-weight: 700;
      }

      .highlight {
        color: var(--gold);
      }

      .hero-grid .highlight,
      .stat strong {
        color: #f2aa17;
      }

      .hero-grid .highlight {
        font-size: inherit;
      }

      .hero-copy {
        margin: calc(20 * var(--hero-unit)) 0 0;
        color: #fff;
        font-size: calc(15.9 * var(--hero-unit));
        line-height: calc(27.2 * var(--hero-unit));
        max-width: 100%;
        font-weight: 500;
      }

      .stats {
        display: flex;
        justify-content: flex-start;
        gap: calc(48 * var(--hero-unit));
        margin-top: calc(29.57 * var(--hero-unit));
      }

      .stat strong {
        display: block;
        font-size: calc(25.1 * var(--hero-unit));
        line-height: calc(31 * var(--hero-unit));
      }

      .stat span {
        display: block;
        margin-top: calc(3 * var(--hero-unit));
        font-size: calc(12.3 * var(--hero-unit));
        line-height: calc(15 * var(--hero-unit));
        color: #fff;
        font-weight: 500;
        white-space: nowrap;
      }

      .signup-card {
        width: 100%;
        background: #fff;
        border: 0;
        border-radius: calc(14 * var(--hero-unit));
        padding: calc(28 * var(--hero-unit));
        margin: calc(52 * var(--hero-unit)) auto 0;
        color: #182e50;
        max-width: calc(549.38 * var(--hero-unit));
        box-shadow: 0 calc(16 * var(--hero-unit)) calc(36 * var(--hero-unit)) rgba(0, 0, 0, 0.15);
      }

      .signup-card h3 {
        margin: 0 0 calc(10 * var(--hero-unit));
        font-size: calc(13 * var(--hero-unit));
        line-height: calc(16 * var(--hero-unit));
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #f2aa17;
        text-align: left;
        font-weight: 800;
      }

      .signup-card .subtitle {
        text-align: left;
        font-size: calc(20.5 * var(--hero-unit));
        line-height: calc(25 * var(--hero-unit));
        font-weight: 700;
        margin: 0 0 calc(19 * var(--hero-unit));
        color: #142b4d;
      }

      .field {
        display: block;
        margin-bottom: calc(10 * var(--hero-unit));
      }

      .field input {
        width: 100%;
        height: calc(52 * var(--hero-unit));
        border: 1px solid #d8e0e8;
        border-radius: calc(7 * var(--hero-unit));
        padding: 0 calc(14 * var(--hero-unit));
        font-size: calc(13.9 * var(--hero-unit));
        background: #fff;
        color: var(--text);
        font-family: inherit;
      }

      .field + .field input {
        height: calc(54 * var(--hero-unit));
      }

      .field input::placeholder {
        color: #757575;
      }

      .field input:focus {
        outline: 2px solid rgba(244, 183, 61, 0.5);
        border-color: rgba(244, 183, 61, 0.8);
      }

      .primary-btn {
        width: 100%;
        min-height: calc(56 * var(--hero-unit));
        padding: calc(16 * var(--hero-unit)) calc(24 * var(--hero-unit));
        border: none;
        border-radius: calc(8 * var(--hero-unit));
        background: #172d4e;
        color: #fff;
        font-weight: 800;
        font-size: calc(18 * var(--hero-unit));
        line-height: calc(22 * var(--hero-unit));
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(4 * var(--hero-unit));
        transition: transform 0.2s ease;
        font-family: inherit;
      }

      .primary-btn:hover {
        transform: translateY(-1px);
      }

      .secure-note {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: calc(3 * var(--hero-unit));
        color: #7c8797;
        font-size: calc(11.1 * var(--hero-unit));
        line-height: calc(16 * var(--hero-unit));
        margin-top: calc(10 * var(--hero-unit));
        font-weight: 400;
      }

      .secure-note::before {
        content: "\1F512";
        font-size: calc(11 * var(--hero-unit));
      }

      .family-photo {
        margin-top: calc(69.5 * var(--hero-unit));
        max-width: calc(1080 * var(--hero-unit));
        margin-inline: auto;
        padding-bottom: 0;
      }

      .family-photo img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: calc(20 * var(--hero-unit));
        object-fit: cover;
        box-shadow: none;
        aspect-ratio: 1080 / 318;
      }