:root {
      --blue-d: #0a3760;
      --blue: #1a6fb5;
      --navy: #0d2c4a;
      --orange: #f6921e;
      --orange-d: #e07d00;
      --gray: #7a8794;
      --bg: #ffffff;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
      color: #22303f;
      background: var(--bg);
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .frame {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    /* ---- Top bar ---- */
    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      font-size: 11px;
      letter-spacing: .8px;
      border-bottom: 1px solid #eee;
      font-weight: 700;
      text-transform: uppercase;
    }

    .topbar .left a {
      color: #33475b;
      margin-right: 22px;
    }

    .topbar .right {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .signin-pill {
      border: 1.5px solid var(--blue);
      color: var(--blue);
      padding: 7px 18px;
      border-radius: 20px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    .btn-signup-sm {
      background: var(--orange);
      color: #fff !important;
      padding: 8px 18px;
      border-radius: 20px;
      font-weight: 800;
    }

    /* ---- Header / nav ---- */
    header {
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 50;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    }

    .navwrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 16px 20px;
      max-width: 1180px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      font-size: 24px;
      color: var(--navy);
      flex: 0 0 auto;
    }

    .logo span.dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: conic-gradient(var(--orange) 0 25%, var(--blue) 0 50%, var(--orange) 0 75%, var(--blue) 0);
      flex: 0 0 auto;
    }

    .logo b {
      color: #c0392b;
      font-weight: 900;
    }

    .logo small {
      display: block;
      font-size: 8.5px;
      font-weight: 700;
      color: var(--gray);
      letter-spacing: 1.4px;
      margin-top: 1px;
    }

    nav.mainmenu {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 13px;
      font-weight: 800;
      color: #33475b;
      letter-spacing: .3px;
      flex: 1;
      justify-content: center;
    }

    nav.mainmenu a:hover {
      color: var(--orange-d);
    }

    .btn-signup {
      background: var(--orange);
      color: #fff;
      padding: 12px 26px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;
    }

    .searchbox {
      display: flex;
      align-items: center;
      border: 1px solid #dde3e9;
      border-radius: 4px;
      overflow: hidden;
      background: #f7f9fb;
    }

    .searchbox input {
      border: 0;
      background: transparent;
      padding: 9px 12px;
      font-size: 13px;
      outline: none;
      width: 120px;
    }

    .searchbox button {
      background: var(--navy);
      color: #fff;
      border: 0;
      padding: 9px 14px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    .burger {
      display: none;
      font-size: 26px;
      background: none;
      border: 0;
    }

    /* ---- Hero ---- */
    .hero {
      position: relative;
      min-height: 600px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: linear-gradient(100deg, rgba(6, 30, 55, .95) 30%, rgba(20, 80, 140, .55) 62%, rgba(20, 80, 140, .15) 100%), var(--navy);
    }

    .hero-inner {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 40px 20px;
      color: #fff;
      position: relative;
      z-index: 2;
    }

    .hero-inner .box {
      max-width: 540px;
    }

    .hero h1 {
      font-size: 46px;
      line-height: 1.14;
      margin: 0 0 20px;
      font-weight: 900;
      letter-spacing: -.5px;
    }

    .hero h1 .orange {
      color: var(--orange);
    }

    .hero p {
      font-size: 16px;
      line-height: 1.55;
      color: #dbe7f2;
      margin-bottom: 30px;
      max-width: 460px;
    }

    .cta-btn {
      display: inline-block;
      background: var(--orange);
      color: #1a2733;
      padding: 17px 30px;
      border-radius: 6px;
      font-weight: 900;
      font-size: 15px;
      border: 0;
      transition: background .15s;
    }

    .cta-btn:hover {
      background: var(--orange-d);
    }

    /* ---- Global stats ---- */
    .stats {
      padding: 50px 0;
      text-align: center;
      background: #fff;
    }

    .stats h2 {
      color: var(--blue-d);
      font-size: 24px;
      max-width: 820px;
      margin: 0 auto 34px;
    }

    .stats h2 .o {
      color: var(--orange-d);
    }

    .stat-row {
      display: flex;
      justify-content: center;
      gap: 60px;
      flex-wrap: wrap;
    }

    .stat-num {
      font-size: 34px;
      font-weight: 800;
      color: var(--blue-d);
    }

    .stat-label {
      font-size: 13px;
      color: var(--blue-d);
    }

    /* ---- Brand logos ---- */
    .brands {
      padding: 50px 0;
      text-align: center;
      background: #f7f9fb;
    }

    .brands h2 {
      color: #222;
      font-size: 26px;
      margin-bottom: 4px;
    }

    .brands h3 {
      font-size: 18px;
      font-weight: 600;
      margin-top: 0;
    }

    .brands h3 .o {
      color: var(--orange-d);
      border-bottom: 3px solid var(--orange-d);
    }

    .logo-row {
      display: flex;
      gap: 26px;
      overflow: hidden;
      margin: 26px 0;
    }

    .logo-row .track {
      display: flex;
      gap: 26px;
      animation: scroll 22s linear infinite;
    }

    .logo-row.rev .track {
      animation-direction: reverse;
    }

    .chip {
      flex: 0 0 auto;
      background: #fff;
      border: 1px solid #e7e7e7;
      border-radius: 8px;
      padding: 14px 26px;
      font-weight: 700;
      color: #444;
      font-size: 14px;
      white-space: nowrap;
    }

    @keyframes scroll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .see-all {
      display: inline-block;
      margin-top: 10px;
      border: 2px solid var(--blue);
      color: var(--blue);
      padding: 10px 22px;
      border-radius: 6px;
      font-weight: 700;
    }

    /* ---- How it works ---- */
    .works {
      background: var(--blue-d);
      color: #fff;
      padding: 60px 0;
      text-align: center;
    }

    .works h2 {
      font-size: 26px;
      margin-bottom: 36px;
    }

    .steps {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      max-width: 900px;
      margin: 0 auto;
    }

    .step {
      flex: 1;
      min-width: 220px;
    }

    .step .num {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      font-weight: 800;
      color: #123;
    }

    .step p {
      font-size: 14px;
      color: #cfe0f0;
    }

    /* ---- Rates table ---- */
    .rates {
      padding: 60px 0;
      text-align: center;
    }

    .rates h2 {
      font-size: 26px;
      color: var(--blue-d);
      margin-bottom: 30px;
    }

    .rates h2 .o {
      color: var(--orange-d);
    }

    table.rates-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    table.rates-table th,
    table.rates-table td {
      padding: 12px;
      border: 1px solid #eee;
      text-align: center;
    }

    table.rates-table thead th {
      background: #f2f5f8;
      font-weight: 700;
    }

    table.rates-table th.highlight,
    table.rates-table td.highlight {
      background: #fff4e6;
      color: var(--orange-d);
      font-weight: 800;
    }

    .rates-scroll {
      overflow-x: auto;
    }

    .disclaimer {
      font-size: 11px;
      color: var(--gray);
      margin-top: 14px;
    }

    /* ---- Family ---- */
    .family {
      padding: 60px 0;
      background: #eef5fb;
      text-align: center;
    }

    .family h2 {
      color: var(--blue-d);
      font-size: 26px;
    }

    .family h2 .light {
      color: var(--blue);
    }

    .family h3 {
      margin-top: 4px;
    }

    .family p.sub {
      max-width: 560px;
      margin: 10px auto 24px;
      color: #444;
    }

    .checks {
      display: flex;
      justify-content: center;
      gap: 26px;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 30px;
    }

    .checks span::before {
      content: "✓ ";
      color: var(--orange-d);
      font-weight: 800;
    }

    table.savings {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      border-collapse: collapse;
      background: #fff;
      font-size: 13px;
    }

    table.savings th,
    table.savings td {
      padding: 10px;
      border: 1px solid #e4e9ee;
    }

    table.savings thead {
      background: var(--blue-d);
      color: #fff;
    }

    /* ---- Packages counter ---- */
    .packages {
      padding: 60px 0;
      text-align: center;
      background: #fff;
    }

    .packages .big {
      font-size: 40px;
      font-weight: 800;
      color: var(--orange-d);
    }

    .packages h2 {
      font-size: 20px;
      color: #333;
      margin: 6px 0 26px;
    }

    .carriers {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      opacity: .8;
      font-weight: 700;
      color: #888;
    }

    /* ---- Testimonials ---- */
    .trusted {
      padding: 60px 0;
      text-align: center;
      background: #f7f9fb;
    }

    .trusted h2 {
      color: var(--blue-d);
      font-size: 26px;
      margin-bottom: 30px;
    }

    .cards {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 10px;
      scroll-snap-type: x mandatory;
    }

    .card {
      flex: 0 0 280px;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
      text-align: left;
      scroll-snap-align: start;
    }

    .card p {
      font-size: 13px;
      color: #444;
      min-height: 90px;
    }

    .card .who {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
    }

    .who b {
      display: block;
      font-size: 13px;
    }

    .who small {
      color: var(--gray);
    }

    /* ---- Premium unlock ---- */
    .unlock {
      padding: 60px 0;
      background: #fff;
    }

    .unlock-flex {
      display: flex;
      gap: 50px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .unlock-left {
      flex: 1;
      min-width: 280px;
    }

    .unlock-left h2 {
      color: var(--blue-d);
      font-size: 26px;
    }

    .unlock-left h2 .o {
      color: var(--orange-d);
    }

    .unlock-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
      font-size: 14px;
      font-weight: 600;
    }

    .unlock-item::before {
      content: "✓";
      color: #fff;
      background: var(--orange-d);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex: 0 0 auto;
    }

    .unlock-right {
      flex: 0 0 300px;
    }

    .plan-card {
      border: 2px solid var(--orange);
      border-radius: 10px;
      padding: 26px;
      text-align: center;
    }

    .plan-card .badge {
      background: var(--orange);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 10px;
    }

    .plan-card h3 {
      margin: 0 0 6px;
      color: var(--blue-d);
    }

    .plan-card .price {
      font-size: 22px;
      font-weight: 800;
      color: var(--orange-d);
      margin: 14px 0 4px;
    }

    .plan-card small {
      color: var(--gray);
    }

    .plan-card .cta-btn {
      width: 100%;
      margin-top: 16px;
    }

    .plan-card .fine {
      font-size: 10px;
      color: var(--gray);
      margin-top: 12px;
    }

    footer {
      background: var(--blue-d);
      color: #cfe0f0;
      text-align: center;
      padding: 26px;
      font-size: 12px;
    }

    .a11y-fab {
      position: fixed;
      left: 18px;
      bottom: 18px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #3b9be0;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
      z-index: 60;
      font-size: 20px;
      border: 0;
    }

    .stats h2,
    .brands h2,
    .works h2,
    .rates h2,
    .family h2,
    .trusted h2,
    .unlock-left h2 {
      font-weight: 900;
    }

    .brands h3,
    .family h3 {
      font-weight: 800;
    }

    @media(max-width:820px) {
      nav.mainmenu {
        display: none;
      }

      .burger {
        display: block;
      }

      .hero h1 {
        font-size: 30px;
      }

      .unlock-flex {
        flex-direction: column;
      }
    }

    /* Professional edition — responsive, self-contained artwork */
    :root {
      --blue-d: #112e43;
      --navy: #112e43;
      --orange: #ffae52;
      --orange-d: #a84d0a;
      --gray: #607384;
      --blue: #245b7b
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px
    }

    body {
      background: #fff;
      color: #19374a;
      line-height: 1.6
    }

    a,
    button {
      transition: background .2s, transform .2s, color .2s
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    summary:focus-visible {
      outline: 3px solid #de7c2e;
      outline-offset: 5px
    }

    h1,
    h2,
    h3 {
      line-height: 1.16;
      letter-spacing: -1px
    }

    section {
      scroll-margin-top: 100px
    }

    .frame,
    .navwrap {
      max-width: 1220px;
      padding-left: 32px;
      padding-right: 32px
    }

    .topbar {
      background: #112e43;
      color: #d5e3eb;
      justify-content: center;
      min-height: 35px;
      font-size: 10px;
      letter-spacing: 1.5px;
      padding: 7px 20px
    }

    .topbar .left a {
      color: inherit
    }

    .topbar .right {
      display: none
    }

    .navwrap {
      padding-top: 20px;
      padding-bottom: 20px;
      gap: 25px
    }

    header {
      box-shadow: none;
      border-bottom: 1px solid #e5eaed
    }

    .logo {
      font-size: 29px;
      letter-spacing: -1.5px
    }

    .logo b {
      color: #d97931
    }

    .logo .dot {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(145deg, #ffbc6d, #e38335);
      transform: rotate(-12deg)
    }

    .logo small {
      font-size: 7px;
      letter-spacing: 1.8px
    }

    .mainmenu a {
      font-size: 10px;
      letter-spacing: .5px
    }

    nav.mainmenu {
      gap: 22px
    }

    .searchbox {
      display: none
    }

    .btn-signup {
      background: #14384e;
      border-radius: 8px;
      font-size: 12px;
      padding: 12px 19px
    }

    .btn-signup:hover {
      background: #245b7b
    }

    .hero {
      background: #f2f6f5;
      min-height: 650px
    }

    .hero-inner {
      max-width: 1220px;
      padding: 80px 32px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      align-items: center;
      gap: 34px;
      color: #112e43
    }

    .hero-inner .box {
      max-width: 610px
    }

    .hero h1 {
      font-size: clamp(40px, 4.5vw, 64px);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: -2.8px;
      margin: 22px 0
    }

    .hero h1 .orange {
      color: #b55e24
    }

    .hero p {
      color: #566d7b;
      font-size: 16px;
      line-height: 1.8;
      max-width: 435px;
      margin-bottom: 28px
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase
    }

    .eyebrow:before {
      content: '';
      height: 7px;
      width: 7px;
      border-radius: 50%;
      background: #dc8b44
    }

    .cta-btn {
      background: #ffae52;
      color: #112e43;
      border-radius: 8px;
      font-size: 13px;
      padding: 15px 23px;
      box-shadow: 0 5px 15px #dd8f3020
    }

    .cta-btn:hover {
      background: #ffc17b;
      transform: translateY(-2px)
    }

    .secondary-link {
      font-weight: 800;
      font-size: 12px;
      margin-left: 20px;
      border-bottom: 1px solid #9aabb4;
      padding-bottom: 5px
    }

    .hero-note {
      font-size: 10px !important;
      letter-spacing: .4px;
      margin-top: 20px !important
    }

    .hero-art {
      position: relative;
      width: 100%;
      max-width: 520px
    }

    .hero-art svg {
      width: 100%;
      height: auto
    }

    .route-label {
      position: absolute;
      background: #fff;
      border: 1px solid #e1e9ea;
      box-shadow: 0 12px 35px #12344b10;
      border-radius: 12px;
      padding: 13px 17px;
      line-height: 1.5;
      font-size: 11px
    }

    .route-label strong {
      display: block;
      font-size: 13px
    }

    .route-label.one {
      top: 16%;
      left: 0
    }

    .route-label.two {
      bottom: 13%;
      right: 0
    }

    .route-label small {
      color: #677e89
    }

    .stats {
      padding: 37px 0;
      border-bottom: 1px solid #e8edee
    }

    .stats h2 {
      display: none
    }

    .stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0
    }

    .stat-row>div+div {
      border-left: 1px solid #e3e9eb
    }

    .stat-num {
      font-size: 31px;
      letter-spacing: -1px
    }

    .stat-label {
      font-size: 11px;
      color: #647a88
    }

    .brands,
    .works,
    .rates,
    .family,
    .trusted,
    .unlock {
      padding: 85px 0
    }

    .brands {
      background: #fff
    }

    .brands h2,
    .works h2,
    .rates h2,
    .family h2,
    .trusted h2 {
      font-size: 35px;
      margin: 10px auto 22px;
      max-width: 760px
    }

    .brands h3 {
      font-size: 14px;
      letter-spacing: 0;
      color: #607384;
      font-weight: 600
    }

    .brands h3 .o {
      border: 0;
      color: #244f68
    }

    .logo-row {
      margin: 28px 0;
      mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)
    }

    .chip {
      padding: 18px 30px;
      border: 1px solid #e6ebed;
      font-size: 20px;
      letter-spacing: -.6px;
      border-radius: 10px;
      color: #345064;
      background: #fafcfb
    }

    .see-all {
      border: 0;
      border-bottom: 1px solid #bac9d1;
      border-radius: 0;
      padding: 5px 0;
      color: #244f68;
      font-size: 12px
    }

    .works {
      background: #112e43
    }

    .steps {
      max-width: none;
      gap: 22px;
      margin-top: 38px;
      text-align: left
    }

    .step {
      background: #1a3a50;
      padding: 30px;
      border: 1px solid #315065;
      border-radius: 12px
    }

    .step .num {
      margin: 0 0 34px;
      width: 38px;
      height: 38px;
      font-size: 14px;
      background: #ffae52;
      border-radius: 10px
    }

    .step p {
      font-size: 15px;
      line-height: 1.7;
      margin: 0
    }

    .step-title {
      display: block;
      color: white;
      font-size: 20px;
      margin-bottom: 10px;
      letter-spacing: -.5px
    }

    .rates h2 .o {
      color: inherit
    }

    .rates-scroll {
      border: 1px solid #e1e8eb;
      border-radius: 14px;
      margin-top: 36px
    }

    .rates-table {
      min-width: 700px
    }

    .rates-table th,
    .rates-table td {
      border: 0 !important;
      border-bottom: 1px solid #e8edf0 !important;
      padding: 20px !important
    }

    .rates-table td:first-child,
    .rates-table th:first-child {
      text-align: left
    }

    .rates-table .highlight {
      background: #fff3e4 !important;
      color: #814109 !important
    }

    .rates-table thead th {
      font-size: 12px;
      background: #f4f7f7 !important
    }

    .disclaimer {
      font-size: 11px
    }

    .family {
      background: #f1f6f5
    }

    .family h2 .light {
      display: block;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 15px;
      color: #617987
    }

    .family h3 {
      font-size: 21px
    }

    .family .sub {
      font-size: 14px;
      color: #617582
    }

    .savings-wrap {
      overflow: auto
    }

    .savings {
      min-width: 540px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 25px #122f4407
    }

    .savings td,
    .savings th {
      padding: 18px !important;
      border: 0 !important;
      border-bottom: 1px solid #e8edef !important
    }

    .savings tbody tr:last-child {
      background: #fff2e2;
      font-weight: 800
    }

    .packages {
      padding: 65px 0
    }

    .packages .big {
      font-size: 52px;
      color: #193b50;
      letter-spacing: -2px
    }

    .packages h2 {
      font-size: 15px;
      font-weight: 600;
      color: #667b88
    }

    .carriers {
      gap: 55px;
      font-size: 25px;
      letter-spacing: -1px;
      color: #345166;
      margin-top: 33px
    }

    .trusted {
      background: #f8f9f7
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: visible;
      gap: 17px
    }

    .card {
      padding: 25px;
      box-shadow: none;
      border: 1px solid #e5eae7;
      border-radius: 12px
    }

    .card:before {
      content: '“';
      font-size: 50px;
      color: #ce8749;
      line-height: 1
    }

    .card p {
      font-size: 12px;
      line-height: 1.9;
      min-height: 145px;
      margin-top: 0
    }

    .avatar {
      background: #edf2f0;
      color: #305468
    }

    .unlock-flex {
      align-items: center;
      gap: 95px
    }

    .unlock-left h2 {
      font-size: 37px;
      max-width: 580px
    }

    .unlock-left h2 .o {
      color: #b26729
    }

    .unlock-item {
      font-size: 13px;
      margin: 17px 0
    }

    .unlock-item:before {
      background: #edf3f0;
      color: #2b705a
    }

    .unlock-right {
      flex: 0 0 345px
    }

    .plan-card {
      border: 1px solid #d9e3e6;
      border-top: 4px solid #efa04a;
      border-radius: 14px;
      box-shadow: 0 20px 55px #173e5010;
      padding: 32px
    }

    .plan-card .badge {
      background: #fff0db;
      color: #804610;
      font-size: 9px;
      letter-spacing: 1px
    }

    .plan-card h3 {
      font-size: 25px
    }

    .plan-card .price {
      color: #173c51;
      font-size: 25px
    }

    .plan-card .fine {
      font-size: 10px;
      line-height: 1.7
    }

    .faq {
      padding: 0 32px 85px;
      max-width: 950px;
      margin: auto
    }

    .faq h2 {
      text-align: center;
      font-size: 33px;
      margin-bottom: 30px
    }

    .faq details {
      border-bottom: 1px solid #dde5e8;
      padding: 20px 0
    }

    .faq summary {
      cursor: pointer;
      font-weight: 700;
      font-size: 14px
    }

    .faq p {
      font-size: 13px;
      color: #657987
    }

    footer {
      text-align: left;
      padding: 38px 32px;
      font-size: 11px;
      background: #102b3e
    }

    .footer-inner {
      max-width: 1156px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      gap: 35px
    }

    .footer-inner strong {
      display: block;
      font-size: 23px;
      color: #fff
    }

    .a11y-fab {
      display: none
    }

    .skip-link {
      position: fixed;
      top: -100px;
      left: 20px;
      z-index: 100;
      background: white;
      padding: 10px
    }

    .skip-link:focus {
      top: 10px
    }

    @media(min-width:1001px) {
      .burger {
        display: none
      }
    }

    @media(max-width:1000px) {
      nav.mainmenu {
        display: none
      }

      .burger {
        display: block;
        color: #112e43
      }

      nav.mainmenu.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 26px;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 20px 30px #14334315
      }

      .mainmenu a {
        font-size: 13px;
        padding: 8px
      }

      .hero-inner {
        gap: 15px
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .card p {
        min-height: 80px
      }

      .unlock-flex {
        gap: 35px
      }

      .unlock-right {
        flex-basis: 310px
      }
    }

    @media(max-width:680px) {

      .frame,
      .navwrap {
        padding-left: 22px;
        padding-right: 22px
      }

      .navwrap {
        padding-top: 15px;
        padding-bottom: 15px
      }

      .logo {
        font-size: 24px
      }

      .logo small {
        font-size: 6px
      }

      .logo .dot {
        width: 26px;
        height: 26px
      }

      .navwrap>div:last-child {
        gap: 10px !important
      }

      .btn-signup {
        padding: 9px 13px;
        font-size: 11px
      }

      .topbar {
        font-size: 8px;
        letter-spacing: .7px
      }

      .topbar .left a {
        margin: 0 7px
      }

      .hero-inner {
        grid-template-columns: 1fr;
        padding: 48px 22px 25px
      }

      .hero h1 {
        font-size: 44px;
        letter-spacing: -2px
      }

      .hero p {
        font-size: 14px
      }

      .hero-art {
        max-width: 380px;
        margin: 0 auto
      }

      .hero-note {
        margin-bottom: 0
      }

      .route-label {
        font-size: 9px;
        padding: 10px 12px
      }

      .route-label strong {
        font-size: 11px
      }

      .stat-row {
        grid-template-columns: 1fr 1fr;
        gap: 25px 0
      }

      .stat-row>div:nth-child(3) {
        border: 0
      }

      .stat-num {
        font-size: 27px
      }

      .stat-label {
        font-size: 10px
      }

      .brands,
      .works,
      .rates,
      .family,
      .trusted,
      .unlock {
        padding: 56px 0
      }

      .brands h2,
      .works h2,
      .rates h2,
      .family h2,
      .trusted h2 {
        font-size: 28px
      }

      .steps {
        flex-direction: column;
        gap: 14px
      }

      .step {
        padding: 24px
      }

      .step .num {
        margin-bottom: 17px
      }

      .cards {
        grid-template-columns: 1fr
      }

      .card p {
        min-height: 0
      }

      .unlock-flex {
        flex-direction: column;
        align-items: stretch
      }

      .unlock-right {
        flex: auto;
        width: 100%
      }

      .unlock-left {
        min-width: 0
      }

      .unlock-left h2 {
        font-size: 31px
      }

      .secondary-link {
        font-size: 11px;
        margin-left: 12px
      }

      .checks {
        gap: 12px;
        font-size: 11px
      }

      .packages .big {
        font-size: 40px
      }

      .carriers {
        gap: 25px;
        font-size: 21px
      }

      .footer-inner {
        flex-direction: column;
        gap: 15px
      }

      .faq {
        padding: 0 22px 55px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        animation: none !important;
        transition: none !important
      }
    }

    /* Bilingual edition: softer typography, comfortable reading sizes. */
    body {
      font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
      font-size: 17px;
      line-height: 1.65
    }

    button,
    input,
    select {
      font: inherit
    }

    h1,
    h2,
    h3 {
      font-weight: 600 !important;
      letter-spacing: -.6px;
      line-height: 1.2
    }

    .hero h1 {
      font-size: clamp(40px, 4.2vw, 59px);
      font-weight: 600;
      letter-spacing: -1.5px;
      line-height: 1.1
    }

    .hero p {
      font-size: 18px;
      line-height: 1.7
    }

    .hero-note {
      font-size: 13px !important;
      line-height: 1.6
    }

    .eyebrow {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.2px
    }

    .topbar {
      font-size: 13px;
      letter-spacing: .2px;
      text-transform: none
    }

    .mainmenu a {
      font-size: 15px;
      letter-spacing: 0;
      font-weight: 600
    }

    nav.mainmenu {
      gap: 20px
    }

    .logo {
      font-family: 'Segoe UI', Arial, sans-serif
    }

    .logo small {
      font-size: 7px
    }

    .cta-btn,
    .btn-signup {
      font-size: 16px;
      font-weight: 600
    }

    .secondary-link,
    .see-all {
      font-size: 16px;
      font-weight: 600
    }

    .stat-num {
      font-weight: 600
    }

    .stat-label {
      font-size: 15px
    }

    .brands h3 {
      font-size: 18px
    }

    .step p {
      font-size: 17px;
      line-height: 1.65
    }

    .step-title {
      font-size: 23px;
      font-weight: 600;
      letter-spacing: -.2px
    }

    .rates-table thead th {
      font-size: 15px
    }

    .rates-table td,
    .savings td,
    .savings th {
      font-size: 16px
    }

    .disclaimer {
      font-size: 13px;
      line-height: 1.6;
      color: #586e7c
    }

    .family .sub {
      font-size: 18px
    }

    .checks {
      font-size: 15px
    }

    .card p {
      font-size: 16px;
      line-height: 1.7;
      min-height: 205px
    }

    .who b {
      font-size: 16px
    }

    .who small {
      font-size: 14px
    }

    .unlock-item {
      font-size: 17px;
      font-weight: 400
    }

    .plan-card p {
      font-size: 16px !important
    }

    .plan-card .fine {
      font-size: 13px !important
    }

    .plan-card .badge {
      font-size: 12px
    }

    .faq summary {
      font-size: 18px;
      font-weight: 600
    }

    .faq p {
      font-size: 17px;
      line-height: 1.7
    }

    .route-label {
      font-size: 13px
    }

    .route-label strong {
      font-size: 15px;
      font-weight: 600
    }

    .route-label small {
      font-size: 12px
    }

    .route-label.one {
      left: -10px;
      top: 12%
    }

    .route-label.two {
      right: -5px;
      bottom: 9%
    }

    .packages h2 {
      font-size: 18px
    }

    footer {
      font-size: 14px
    }

    .language-switch select {
      max-width: 105px;
      border: 1px solid #d5e0e4;
      border-radius: 7px;
      background: #fff;
      color: #19374a;
      padding: 9px 6px;
      cursor: pointer;
      font-size: 14px
    }

    .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
    }

    .chip {
      font-weight: 600
    }

    .logo-row .track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px
    }

    .logo-row {
      mask-image: none;
      justify-content: center
    }

    .chip {
      font-size: 20px;
      padding: 14px 24px
    }

    .language-switch select:focus-visible {
      outline: 3px solid #de7c2e;
      outline-offset: 3px
    }

    @media(max-width:1180px) {
      nav.mainmenu {
        display: none
      }

      .burger {
        display: block
      }

      nav.mainmenu.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 24px;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 20px 30px #14334315
      }

      .mainmenu a {
        padding: 8px;
        font-size: 17px
      }
    }

    @media(max-width:680px) {
      .navwrap {
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 18px
      }

      .navwrap>div:last-child {
        gap: 8px !important
      }

      .logo {
        font-size: 23px;
        gap: 7px
      }

      .logo .dot {
        width: 24px;
        height: 24px
      }

      .logo small {
        font-size: 5.5px
      }

      .btn-signup {
        font-size: 13px;
        padding: 9px 10px
      }

      .language-switch select {
        font-size: 13px;
        width: 83px;
        padding: 8px 3px
      }

      .burger {
        font-size: 23px;
        padding: 0 3px
      }

      .hero h1 {
        font-size: 42px;
        letter-spacing: -1px
      }

      .hero p {
        font-size: 17px
      }

      .hero-note {
        font-size: 13px !important
      }

      .hero .cta-btn {
        font-size: 15px;
        padding: 13px 17px
      }

      .secondary-link {
        font-size: 15px;
        margin-left: 12px
      }

      .stat-label {
        font-size: 13px
      }

      .hero-art {
        margin-top: 12px
      }

      .route-label {
        font-size: 11px
      }

      .route-label strong {
        font-size: 13px
      }

      .route-label small {
        font-size: 10px
      }

      .route-label.one {
        left: 0
      }

      .route-label.two {
        right: 0
      }

      .card p {
        min-height: 0
      }

      .chip {
        font-size: 17px;
        padding: 10px 16px
      }

      .brands h2,
      .works h2,
      .rates h2,
      .family h2,
      .trusted h2 {
        font-size: 30px
      }

      .checks {
        font-size: 14px
      }

      .step-title {
        font-size: 22px
      }
    }

    @media(max-width:380px) {
      .navwrap .logo small {
        display: none
      }

      .navwrap .logo .dot {
        display: none
      }

      .hero h1 {
        font-size: 38px
      }
    }

    /* Calculator and reference services: same visual system. */
    .cargo-section {
      padding: 75px 0;
      background: #fff
    }

    .cargo-section h2 {
      font-size: 36px;
      max-width: 760px;
      margin: 15px 0
    }

    .cargo-intro {
      max-width: 780px;
      color: #566d7b;
      margin: 0 0 30px;
      font-size: 18px
    }

    .cargo-calculator {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      border: 1px solid #dce5e7;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 15px 40px #16394a08
    }

    .cargo-form-panel {
      padding: 30px
    }

    .cargo-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px
    }

    .cargo-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #345064;
      min-width: 0
    }

    .cargo-field input,
    .cargo-field select {
      width: 100%;
      min-width: 0;
      border: 1px solid #cddade;
      border-radius: 8px;
      background: white;
      padding: 12px;
      color: #19374a;
      font-size: 17px
    }

    .cargo-form-panel fieldset {
      border: 0;
      padding: 0;
      margin: 24px 0 0;
      min-width: 0
    }

    .cargo-form-panel legend {
      margin-bottom: 12px;
      font-size: 16px
    }

    .cargo-submit {
      width: 100%;
      margin-top: 24px
    }

    .cargo-result {
      background: #f1f6f5;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .cargo-empty {
      color: #5f7480;
      text-align: center;
      font-size: 19px
    }

    .cargo-result h3 {
      margin: 12px 0 18px;
      font-size: 23px
    }

    .cargo-total {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -.7px;
      display: block;
      line-height: 1.3;
      margin: 8px 0
    }

    .cargo-result dl {
      margin: 20px 0
    }

    .cargo-result dl div {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      border-bottom: 1px solid #dae5e3;
      padding: 10px 0;
      font-size: 15px
    }

    .cargo-result dd {
      margin: 0;
      font-weight: 600;
      text-align: right
    }

    .cargo-result dt {
      color: #506874
    }

    .cargo-status {
      background: #e1ebe6;
      color: #2e6450;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 13px;
      align-self: flex-start
    }

    .cargo-status.special {
      background: #fff0df;
      color: #895321
    }

    .cargo-result p {
      font-size: 14px;
      color: #546b77
    }

    .cargo-price-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin: 30px 0 20px
    }

    .cargo-price-card {
      background: #fff;
      border: 1px solid #d9e4e6;
      border-radius: 12px;
      padding: 24px
    }

    .cargo-price-card>div {
      font-size: 14px;
      min-height: 45px;
      color: #526d7c
    }

    .cargo-price-card strong {
      display: block;
      font-size: 35px;
      font-weight: 600;
      margin: 15px 0
    }

    .cargo-price-card p {
      font-size: 16px;
      color: #647987;
      margin: 0
    }

    .cargo-price-card:nth-child(2) {
      background: #173c51;
      color: #fff;
      border-color: #173c51
    }

    .cargo-price-card:nth-child(2)>div,
    .cargo-price-card:nth-child(2) p {
      color: #dae5e9
    }

    .cargo-weight-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px
    }

    .cargo-weight-grid article {
      border: 1px solid #d9e4e6;
      background: #fff;
      border-radius: 12px;
      padding: 22px
    }

    .cargo-weight-grid h3 {
      font-size: 21px;
      margin: 0 0 12px
    }

    .cargo-weight-grid p {
      font-size: 16px;
      color: #5b7280;
      margin: 0
    }

    .cargo-volume {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 25px;
      margin-top: 20px;
      padding: 26px;
      background: #fff;
      border: 1px solid #d9e4e6;
      border-radius: 12px;
      align-items: center
    }

    .cargo-volume h3 {
      margin: 0 0 10px;
      font-size: 23px
    }

    .cargo-volume p {
      font-size: 16px;
      color: #5b7280;
      margin: 0
    }

    .cargo-formula {
      background: #f2f6f5;
      border-radius: 9px;
      padding: 22px;
      font-size: 15px;
      text-align: center
    }

    .cargo-formula strong {
      display: block;
      font-size: 17px;
      margin: 8px 0
    }

    .cargo-formula small {
      color: #657b88
    }

    #tarifas {
      background: #f2f6f5
    }

    .cargo-service-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px
    }

    .cargo-service-grid article,
    .cargo-delivery-grid article {
      border: 1px solid #dde5e7;
      border-radius: 12px;
      padding: 25px
    }

    .cargo-service-grid article:last-child {
      grid-column: 1/-1
    }

    .cargo-service-grid h3,
    .cargo-delivery-grid h3 {
      font-size: 22px;
      margin: 22px 0 12px
    }

    .cargo-service-grid p,
    .cargo-delivery-grid p {
      color: #5b7280;
      font-size: 17px;
      margin: 0
    }

    .cargo-number {
      background: #ffead1;
      color: #8a5020;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 9px;
      font-size: 14px
    }

    .cargo-delivery-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px
    }

    #entrega-mexico {
      background: #f7f9f7;
      margin-bottom: 70px
    }

    #cargo-error {
      color: #a43820;
      font-size: 14px
    }

    #cargo-error:empty {
      display: none
    }

    @media(max-width:900px) {
      .cargo-calculator {
        grid-template-columns: 1fr
      }

      .cargo-price-grid,
      .cargo-service-grid,
      .cargo-delivery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .cargo-volume {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:600px) {
      .cargo-section {
        padding: 50px 0
      }

      .cargo-section h2 {
        font-size: 30px
      }

      .cargo-intro {
        font-size: 17px
      }

      .cargo-form-panel,
      .cargo-result {
        padding: 22px
      }

      .cargo-fields {
        grid-template-columns: 1fr
      }

      .cargo-form-panel fieldset .cargo-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px
      }

      .cargo-field input {
        padding: 11px 8px
      }

      .cargo-price-grid,
      .cargo-weight-grid,
      .cargo-service-grid,
      .cargo-delivery-grid {
        grid-template-columns: 1fr
      }

      .cargo-price-card>div {
        min-height: 0
      }

      .cargo-total {
        font-size: 28px
      }

      .cargo-result dl div {
        font-size: 14px
      }

      .cargo-volume {
        padding: 22px
      }
    }

    /* Supplied logo and two seamless, leftward logo rows. */
    .brand-logo {
      display: block;
      flex: 0 0 245px;
      width: 245px;
      height: 70px;
      overflow: hidden;
      position: relative
    }

    .brand-logo img {
      position: absolute;
      width: 265px;
      max-width: none;
      height: auto;
      left: -10px;
      top: -9px
    }

    .navwrap {
      padding-top: 10px;
      padding-bottom: 10px
    }

    .brand-carousel {
      margin: 30px 0 12px
    }

    .brands .logo-row {
      display: block;
      overflow: hidden;
      margin: 12px 0;
      mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)
    }

    .brands .logo-row .track {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 0;
      width: max-content;
      animation: brand-slide-left 45s linear infinite;
      will-change: transform
    }

    .brands .logo-row.rev .track {
      animation: brand-slide-left 52s linear infinite
    }

    .logo-group {
      display: flex;
      flex-shrink: 0;
      gap: 20px;
      padding-right: 20px
    }

    .store-logo {
      width: 170px;
      height: 112px;
      flex: 0 0 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      background: #fff;
      border: 1px solid #e6ecee;
      border-radius: 10px
    }

    .store-logo img {
      width: 140px;
      height: 80px;
      object-fit: contain
    }

    .store-fallback {
      font-size: 19px;
      font-weight: 600;
      color: #345064;
      text-align: center
    }

    .store-fallback[hidden] {
      display: none
    }

    .brand-carousel:hover .track,
    .brand-carousel:focus-within .track,
    .brand-carousel.paused .track {
      animation-play-state: paused
    }

    .brand-motion {
      border: 1px solid #d7e1e5;
      background: #fff;
      color: #38586b;
      border-radius: 7px;
      padding: 8px 15px;
      font-size: 14px;
      cursor: pointer;
      margin-bottom: 13px
    }

    @keyframes brand-slide-left {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    @media(max-width:680px) {
      .brand-logo {
        flex-basis: 180px;
        width: 180px;
        height: 50px
      }

      .brand-logo img {
        width: 194px;
        left: -7px;
        top: -7px
      }

      .navwrap {
        justify-content: space-between
      }

      .navwrap>div:last-child {
        margin-left: auto
      }

      .store-logo {
        width: 140px;
        flex-basis: 140px;
        height: 94px;
        padding: 12px
      }

      .store-logo img {
        width: 116px;
        height: 68px
      }

      .logo-group {
        gap: 14px;
        padding-right: 14px
      }

      .brands .logo-row .track {
        animation-duration: 38s
      }

      .brands .logo-row.rev .track {
        animation-duration: 44s
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .brands .logo-row .track {
        animation: none !important
      }

      .brands .logo-row {
        overflow-x: auto;
        mask-image: none
      }

      .logo-group[aria-hidden="true"] {
        display: none
      }

      .brand-motion {
        display: none
      }
    }

    .store-logo img[hidden] {
      display: none
    }

    /* Full-width layout and scroll-driven process. */
    .frame,
    .navwrap,
    .hero-inner {
      max-width: none;
      width: 100%;
      padding-left: clamp(22px, 4vw, 88px);
      padding-right: clamp(22px, 4vw, 88px)
    }

    .hero-inner {
      grid-template-columns: 1fr 1fr;
      gap: 5vw
    }

    .hero-inner .box {
      max-width: 740px
    }

    .hero-art {
      max-width: 610px;
      justify-self: center
    }

    .hero h1 {
      font-size: clamp(42px, 4.2vw, 76px)
    }

    .hero p {
      max-width: 620px
    }

    .brands>.frame {
      padding-left: 0;
      padding-right: 0
    }

    .brands h2,
    .brands h3 {
      padding-left: 22px;
      padding-right: 22px;
      max-width: none
    }

    .brand-carousel {
      width: 100%
    }

    .brands .logo-row {
      mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent)
    }

    .footer-inner {
      max-width: none
    }

    .faq {
      max-width: none;
      width: 100%;
      padding-left: clamp(22px, 4vw, 88px);
      padding-right: clamp(22px, 4vw, 88px)
    }

    .faq p {
      max-width: 1000px
    }

    .scroll-works {
      background: radial-gradient(ellipse at 50% 40%, #245b7b 0, #173c51 52%, #112e43 100%);
      padding: 75px 0;
      text-align: center
    }

    .scroll-works h2 {
      max-width: none;
      font-size: 38px;
      margin: 14px 0 35px
    }

    .scroll-works .eyebrow {
      color: #d3e3e9
    }

    .process-timeline {
      position: relative;
      max-width: 1000px;
      margin: 0 auto 40px;
      text-align: left;
      --process-line-x: 28%
    }

    .process-list {
      list-style: none;
      padding: 0;
      margin: 0
    }

    .process-step {
      display: grid;
      grid-template-columns: 28% 72%;
      align-items: center;
      min-height: 220px;
      margin: 0
    }

    .process-symbol {
      height: 105px;
      position: relative;
      margin-right: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-end
    }

    .process-icon {
      position: absolute;
      width: 70px;
      height: 70px;
      object-fit: contain;
      transition: opacity .25s, transform .25s
    }

    .process-icon.orange {
      opacity: 0
    }

    .process-step.active .process-icon.orange {
      opacity: 1;
      transform: scale(1.15)
    }

    .process-step.active .process-icon.blue {
      opacity: 0
    }

    .process-copy {
      padding: 26px 0 26px 55px;
      color: #bcd5e5;
      transition: color .25s
    }

    .process-copy h3 {
      font-size: 25px;
      margin: 7px 0 12px;
      color: inherit
    }

    .process-copy p {
      max-width: 610px;
      font-size: 17px;
      line-height: 1.7;
      margin: 0;
      color: #c0d2de
    }

    .process-index {
      font-size: 12px;
      letter-spacing: 1.5px;
      color: #a4c6dd
    }

    .process-step.active .process-copy {
      color: #fff0ce
    }

    .process-step.active .process-index {
      color: #ffc780
    }

    .process-rail {
      position: absolute;
      left: var(--process-line-x);
      top: 35px;
      bottom: 35px;
      width: 4px;
      border-radius: 10px;
      background: #0c293e;
      overflow: visible
    }

    .process-progress {
      position: absolute;
      inset: 0;
      background: #ffae52;
      border-radius: 10px;
      transform: scaleY(0);
      transform-origin: top
    }

    .process-marker {
      position: absolute;
      left: -1px;
      top: 0;
      width: 6px;
      height: 46px;
      border-radius: 8px;
      background: #fff0c4;
      box-shadow: 0 0 22px #ffd99499;
      transform: translateY(-50%)
    }

    .process-fallback {
      display: none;
      color: #ffae52;
      font-size: 35px
    }

    .process-symbol.failed .process-fallback {
      display: block
    }

    .process-symbol.failed img {
      display: none
    }

    .scroll-works .cta-btn {
      margin-top: 10px
    }

    @media(min-width:1700px) {
      .process-timeline {
        max-width: 1200px
      }

      .process-copy h3 {
        font-size: 29px
      }

      .process-copy p {
        font-size: 19px
      }

      .cargo-calculator {
        grid-template-columns: 1.1fr 1fr
      }

      .cargo-form-panel,
      .cargo-result {
        padding: 40px
      }
    }

    @media(max-width:680px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 15px
      }

      .hero h1 {
        font-size: 42px
      }

      .hero-art {
        max-width: 380px
      }

      .scroll-works {
        padding: 55px 0
      }

      .scroll-works h2 {
        font-size: 30px
      }

      .process-timeline {
        --process-line-x: 62px
      }

      .process-step {
        grid-template-columns: 62px minmax(0, 1fr);
        min-height: 245px
      }

      .process-symbol {
        margin-right: 18px;
        height: 60px
      }

      .process-icon {
        width: 40px;
        height: 40px
      }

      .process-copy {
        padding: 22px 0 22px 25px
      }

      .process-copy h3 {
        font-size: 22px
      }

      .process-copy p {
        font-size: 16px
      }

      .process-rail {
        top: 30px;
        bottom: 30px
      }

      .process-fallback {
        font-size: 24px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .process-icon,
      .process-copy {
        transition: none
      }
    }

    /* Only the brand carousel spans the full viewport. */
    .frame,
    .navwrap,
    .hero-inner {
      max-width: 1220px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 32px;
      padding-right: 32px
    }

    .hero-inner {
      grid-template-columns: 1.1fr 1fr;
      gap: 34px
    }

    .hero-inner .box {
      max-width: 610px
    }

    .hero-art {
      max-width: 520px
    }

    .hero h1 {
      font-size: clamp(40px, 4.2vw, 59px)
    }

    .hero p {
      max-width: 435px
    }

    .footer-inner {
      max-width: 1156px;
      margin-left: auto;
      margin-right: auto
    }

    .faq {
      max-width: 950px;
      padding-left: 32px;
      padding-right: 32px
    }

    .brands>.frame {
      max-width: none;
      width: 100%;
      padding-left: 0;
      padding-right: 0
    }

    @media(min-width:1700px) {
      .process-timeline {
        max-width: 1000px
      }

      .process-copy h3 {
        font-size: 25px
      }

      .process-copy p {
        font-size: 17px
      }

      .cargo-form-panel,
      .cargo-result {
        padding: 30px
      }
    }

    @media(max-width:1000px) {
      .hero-inner {
        gap: 15px
      }
    }

    @media(max-width:680px) {

      .frame,
      .navwrap {
        padding-left: 22px;
        padding-right: 22px
      }

      .hero-inner {
        grid-template-columns: 1fr;
        padding-left: 22px;
        padding-right: 22px;
        gap: 15px
      }

      .hero h1 {
        font-size: 42px
      }

      .hero-art {
        max-width: 380px
      }

      .faq {
        padding-left: 22px;
        padding-right: 22px
      }

      .navwrap {
        padding-left: 18px;
        padding-right: 18px
      }

      .brands>.frame {
        padding-left: 0;
        padding-right: 0
      }
    }

    @media(max-width:380px) {
      .hero h1 {
        font-size: 38px
      }
    }

    /* Scroll reliability fix: sections must remain in normal document flow. */
    html, body {
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    main, .scroll-works, .trusted {
      position: relative;
      overflow: visible;
      height: auto;
      max-height: none;
    }
    .scroll-works {
      min-height: 0;
    }
    .trusted {
      display: block;
      clear: both;
    }
  
    /* ===== v6: sticky header + professional footer ===== */
    header{
      position: sticky !important;
      top: 0 !important;
      z-index: 9999 !important;
      background: rgba(255,255,255,.97) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(17,46,67,.09), 0 10px 28px rgba(17,46,67,.06) !important;
    }

    .footer-cta{
      background: linear-gradient(110deg,#1d70dc 0%,#194d97 52%,#102f59 100%);
      color:#fff;
      padding:58px 0;
    }
    .footer-cta-inner{
      width:min(1180px,calc(100% - 44px));
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:32px;
    }
    .footer-cta h2{
      margin:0 0 7px;
      color:#fff;
      font-size:clamp(28px,3vw,42px);
      letter-spacing:-1.2px;
    }
    .footer-cta p{
      margin:0;
      color:#dbeaff;
      font-size:16px;
    }
    .footer-cta-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:150px;
      padding:14px 22px;
      border-radius:10px;
      background:#fff;
      color:#102f59;
      font-size:15px;
      font-weight:700;
      white-space:nowrap;
      box-shadow:0 8px 24px rgba(0,0,0,.12);
    }
    .footer-cta-btn:hover{transform:translateY(-2px)}

    footer.site-footer{
      background:#07192d;
      color:#a9bfd2;
      padding:0;
      font-size:14px;
      text-align:left;
    }
    .site-footer .footer-shell{
      width:min(1180px,calc(100% - 44px));
      margin:0 auto;
      padding:52px 0 24px;
    }
    .site-footer .footer-grid{
      display:grid;
      grid-template-columns:1.35fr .78fr .78fr 1.15fr;
      gap:42px;
      align-items:start;
    }
    .site-footer .footer-logo{
      width:min(300px,100%);
      height:auto;
      display:block;
      margin:0 0 18px;
      padding:0;
      background:transparent;
      border-radius:0;
      object-fit:contain;
    }
    .site-footer .footer-copy{
      max-width:330px;
      margin:0 0 18px;
      line-height:1.7;
      color:#91a9bd;
      font-size:14px;
    }
    .site-footer .route-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(255,255,255,.16);
      color:#fff;
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      font-weight:700;
      letter-spacing:.4px;
    }
    .site-footer h3{
      margin:0 0 17px;
      color:#fff;
      font-size:15px;
      letter-spacing:0;
      font-weight:700 !important;
    }
    .site-footer .footer-links{
      display:flex;
      flex-direction:column;
      gap:9px;
    }
    .site-footer .footer-links a{
      color:#9fc0dc;
      font-size:14px;
    }
    .site-footer .footer-links a:hover{color:#fff}
    .newsletter-copy{
      margin:0 0 14px;
      color:#91a9bd;
      line-height:1.6;
      font-size:14px;
    }
    .newsletter-form{
      display:flex;
      gap:8px;
      align-items:stretch;
    }
    .newsletter-form input{
      min-width:0;
      flex:1;
      border:1px solid rgba(255,255,255,.17);
      background:#0c233d;
      color:#fff;
      border-radius:9px;
      padding:12px 13px;
      outline:none;
      font-size:14px;
    }
    .newsletter-form input::placeholder{color:#7893aa}
    .newsletter-form input:focus{border-color:#ffae52}
    .newsletter-form button{
      border:0;
      border-radius:9px;
      background:#ffae52;
      color:#102f59;
      padding:12px 15px;
      font-weight:700;
      font-size:14px;
    }
    .newsletter-note{
      margin-top:8px;
      color:#7893aa;
      font-size:11px;
      line-height:1.45;
    }
    .newsletter-status{
      min-height:20px;
      margin-top:8px;
      color:#cfe9d8;
      font-size:12px;
    }
    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
      margin-top:38px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.09);
      color:#6f8aa2;
      font-size:12px;
    }
    .footer-bottom a{color:#9bb5ca}

    @media(max-width:900px){
      .site-footer .footer-grid{grid-template-columns:1fr 1fr}
      .footer-cta-inner{align-items:flex-start}
    }
    @media(max-width:680px){
      .footer-cta{padding:42px 0}
      .footer-cta-inner{flex-direction:column;align-items:stretch}
      .footer-cta-btn{width:100%}
      .site-footer .footer-shell{padding-top:40px}
      .site-footer .footer-grid{grid-template-columns:1fr;gap:32px}
      .site-footer .footer-logo{width:min(280px,100%)}
      .newsletter-form{flex-direction:column}
      .footer-bottom{flex-direction:column;align-items:flex-start}
    }

  
    /* ===== v7: packages delivered counter ===== */
    .packages-counter-section{
      position:relative;
      min-height:390px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      color:#fff;
      background:
        linear-gradient(180deg,rgba(10,35,58,.58) 0%,rgba(6,27,47,.82) 100%),
        url('https://static.nc-myus.com/images/common/ux/hp/27_million_bg.jpg') center center/cover no-repeat;
    }
    .packages-counter-section::after{
      content:'';
      position:absolute;
      inset:auto 0 0;
      height:34%;
      background:linear-gradient(to bottom,rgba(5,26,45,0),rgba(5,26,45,.48));
      pointer-events:none;
    }
    .packages-counter-inner{
      position:relative;
      z-index:1;
      width:min(1180px,calc(100% - 44px));
      margin:0 auto;
      padding:64px 0 54px;
      text-align:center;
    }
    .packages-counter-number{
      margin:0;
      color:#fff;
      font-size:clamp(64px,8vw,112px);
      font-weight:700;
      line-height:.95;
      letter-spacing:-3px;
      font-variant-numeric:tabular-nums;
      text-shadow:0 3px 18px rgba(0,0,0,.14);
    }
    .packages-counter-heading{
      margin:22px 0 0;
      color:#ff8a18;
      font-size:clamp(22px,2.4vw,34px);
      font-weight:700 !important;
      letter-spacing:-.5px;
    }
    .packages-delivery-logos{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:38px;
      flex-wrap:wrap;
      margin:34px auto 22px;
    }
    .packages-delivery-logo{
      height:30px;
      width:auto;
      max-width:110px;
      object-fit:contain;
      filter:brightness(0) invert(1);
      opacity:.92;
    }
    .packages-counter-disclaimer{
      margin-top:20px;
      color:#eef5fa;
      font-size:13px;
      opacity:.95;
    }
    @media(max-width:680px){
      .packages-counter-section{min-height:330px}
      .packages-counter-inner{padding:52px 0 46px}
      .packages-counter-number{letter-spacing:-2px}
      .packages-delivery-logos{gap:24px;margin-top:28px}
      .packages-delivery-logo{height:24px;max-width:92px}
    }

  
    /* v8 — Hero con mapa de México */
    .hero-art-mexico{
      max-width: 680px;
      width: 100%;
      margin-left: auto;
    }
    .hero-art-mexico img{
      width:100%;
      height:auto;
      display:block;
      object-fit:contain;
      border-radius:18px;
      filter: drop-shadow(0 18px 34px rgba(17,46,67,.10));
    }
    @media(max-width:1000px){
      .hero-art-mexico{max-width:600px;margin:20px auto 0}
    }
    @media(max-width:680px){
      .hero-art-mexico{max-width:100%;margin-top:24px}
      .hero-art-mexico img{border-radius:12px}
    }

  
    /* v12 — mejoras sección servicios y entrega en México */
    .cargo-mini-benefits,
    .cargo-fulfillment-options{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      margin:28px 0 34px;
    }
    .cargo-fulfillment-options{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
    .cargo-mini-benefits .mini,
    .cargo-fulfillment-options .mini{
      background:#fff;
      border:1px solid #dde5e7;
      border-radius:14px;
      padding:18px 20px;
      box-shadow:0 8px 24px rgba(17,46,67,.04);
    }
    .cargo-mini-benefits .mini strong,
    .cargo-fulfillment-options .mini strong{
      display:block;
      font-size:18px;
      color:#163b50;
      margin-bottom:6px;
    }
    .cargo-mini-benefits .mini p,
    .cargo-fulfillment-options .mini p{
      margin:0;
      color:#5b7280;
      font-size:15px;
      line-height:1.6;
    }
    .cargo-mini-benefits .mini:before,
    .cargo-fulfillment-options .mini:before{
      content:'';
      display:inline-block;
      width:11px;
      height:11px;
      border-radius:50%;
      background:#ffae52;
      margin-bottom:14px;
      box-shadow:0 0 0 5px rgba(255,174,82,.14);
    }
    .cargo-service-grid article,
    .cargo-delivery-grid article{
      background:#fff;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .cargo-service-grid article:hover,
    .cargo-delivery-grid article:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 30px rgba(17,46,67,.07);
      border-color:#d0dde2;
    }
    .cargo-service-grid article.featured{
      background:linear-gradient(135deg,#fff8ef 0%,#fff 100%);
      border-color:#f3d7b4;
    }
    .cargo-service-grid article.featured h3{color:#8a5020}
    .cargo-note-band{
      margin-top:24px;
      background:#102b3e;
      color:#e6eff4;
      border-radius:16px;
      padding:20px 22px;
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:center;
      flex-wrap:wrap;
    }
    .cargo-note-band strong{
      display:block;
      color:#fff;
      font-size:20px;
      margin-bottom:4px;
    }
    .cargo-note-band p{margin:0;font-size:15px;color:#cddbe4}
    .cargo-note-band .badge-row{display:flex;gap:10px;flex-wrap:wrap}
    .cargo-note-band .badge{
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      border-radius:999px;
      padding:10px 14px;
      font-size:14px;
      font-weight:600;
      white-space:nowrap;
    }
    @media(max-width:900px){
      .cargo-mini-benefits{grid-template-columns:1fr 1fr}
      .cargo-fulfillment-options{grid-template-columns:1fr}
    }
    @media(max-width:600px){
      .cargo-mini-benefits,
      .cargo-fulfillment-options{grid-template-columns:1fr;gap:12px}
      .cargo-note-band{padding:18px}
      .cargo-note-band strong{font-size:18px}
    }


    /* v14 — sección única más gráfica */
    #servicios{background:linear-gradient(180deg,#f6faf9 0%,#fff 100%)}
    .cargo-visual-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      margin:30px 0 26px;
    }
    .cargo-visual-card{
      position:relative;
      overflow:hidden;
      background:#fff;
      border:1px solid #dde7ea;
      border-radius:18px;
      padding:22px 22px 20px;
      box-shadow:0 14px 34px rgba(17,46,67,.05);
    }
    .cargo-visual-card:after{
      content:'';
      position:absolute;
      right:-30px;
      top:-30px;
      width:110px;
      height:110px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,174,82,.18) 0%, rgba(255,174,82,0) 70%);
      pointer-events:none;
    }
    .cargo-icon{
      width:52px;height:52px;border-radius:16px;
      background:#fff1df;color:#a35a18;
      display:flex;align-items:center;justify-content:center;
      margin-bottom:14px;border:1px solid #f4dcc0;
    }
    .cargo-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .cargo-visual-card h3{font-size:24px;margin:0 0 8px;color:#163b50}
    .cargo-visual-card p{margin:0;color:#627986;font-size:16px;line-height:1.65}

    .cargo-process{
      position:relative;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      margin:12px 0 28px;
      padding:16px 0;
    }
    .cargo-process:before{
      content:'';
      position:absolute;
      left:9%;right:9%;top:54px;height:2px;
      background:linear-gradient(90deg,#ffcf96 0%,#ffdcae 100%);
      z-index:0;
    }
    .cargo-step-visual{
      position:relative;z-index:1;
      text-align:center;
      padding:0 8px;
    }
    .cargo-step-badge{
      width:78px;height:78px;border-radius:50%;
      margin:0 auto 14px;
      background:#fff;
      border:1px solid #dfe8eb;
      box-shadow:0 12px 24px rgba(17,46,67,.06);
      display:flex;align-items:center;justify-content:center;
      color:#245b7b;
    }
    .cargo-step-badge svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .cargo-step-kicker{display:inline-block;background:#ffead1;color:#8a5020;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700;margin-bottom:8px}
    .cargo-step-visual h4{margin:0 0 6px;font-size:20px;color:#163b50}
    .cargo-step-visual p{margin:0;color:#607687;font-size:15px;line-height:1.55}

    .cargo-service-grid.graphic{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:10px}
    .cargo-service-grid.graphic article{background:#fff;box-shadow:0 10px 24px rgba(17,46,67,.04)}
    .cargo-service-grid.graphic .card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
    .cargo-service-grid.graphic h3{margin:0;font-size:21px}
    .cargo-service-grid.graphic .cargo-number{margin-left:auto;flex:0 0 auto}
    .cargo-service-grid.graphic article.cta-wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:26px;background:linear-gradient(135deg,#102b3e 0%,#1b4560 100%);border-color:#16364e;color:#fff;padding:26px 28px}
    .cargo-service-grid.graphic article.cta-wide h3{color:#fff;font-size:28px;margin-bottom:6px}
    .cargo-service-grid.graphic article.cta-wide p{color:#d6e5ee;max-width:760px}
    .cargo-service-grid.graphic article.cta-wide .cargo-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#ffbf75;margin-bottom:0}
    .cargo-service-grid.graphic article.cta-wide .cta-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .cargo-service-grid.graphic article.cta-wide .pill{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);font-size:13px;color:#fff}

    .cargo-note-band{margin-top:26px}

    @media(max-width:1000px){
      .cargo-visual-grid,.cargo-service-grid.graphic{grid-template-columns:1fr 1fr}
      .cargo-process{grid-template-columns:1fr 1fr}
      .cargo-process:before{display:none}
      .cargo-service-grid.graphic article.cta-wide{grid-column:1/-1;flex-direction:column;align-items:flex-start}
    }
    @media(max-width:640px){
      .cargo-visual-grid,.cargo-service-grid.graphic,.cargo-process{grid-template-columns:1fr}
      .cargo-visual-card{padding:20px}
      .cargo-step-badge{width:68px;height:68px}
      .cargo-service-grid.graphic article.cta-wide h3{font-size:24px}
    }


    /* v15 — versión compacta de servicios */
    #servicios{padding:64px 0 !important}
    #servicios .cargo-visual-grid{margin:24px 0 18px}
    #servicios .cargo-process{margin:4px 0 18px;padding:10px 0}
    #servicios .cargo-visual-card{padding:18px 20px}
    #servicios .cargo-step-badge{width:68px;height:68px}
    #servicios .cargo-note-band{margin-top:18px}




    .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:260px}
    .footer-logo{width:min(320px,100%);height:auto;display:block;background:#fff;border-radius:10px;padding:6px 10px;object-fit:contain}
    @media(max-width:680px){.footer-logo{width:min(280px,100%)}.footer-brand{min-width:0;width:100%}}
  


    /* Header fijo durante todo el scroll. La barra superior sí se desplaza. */
    html {
      overflow-y: visible !important;
    }
    body {
      overflow-y: visible !important;
      overflow-x: clip !important;
    }
    header {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 99999 !important;
      background: rgba(255,255,255,.98) !important;
      box-shadow: 0 8px 24px rgba(17,46,67,.10) !important;
      isolation: isolate;
    }