:root {
    --primary: #095f70;
    --primary-dark: #074b57;
    --secondary: #66664d;

    --bg: #eef5f6;
    --panel: #ffffff;
    --panel-soft: #f7fbfb;

    --border: #d7dadd;

    --text: #2f2f2f;
    --muted: #6a6866;

    --accent-soft: #dcecee;
    --accent-line: #b8d9dd;

    --shadow:
      0 12px 32px rgba(0, 0, 0, 0.08);
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  body {
    background:
      linear-gradient(
        180deg,
        #eef5f6 0%,
        #ffffff 42%,
        #ffffff 100%
      );
    color: var(--text);
    font-family:
      "Open Sans",
      Arial,
      sans-serif;
    line-height: 1.65;
  }

  /* =========================================================
     MAIN CARD
     ========================================================= */

  .page {
    width:
      min(
        960px,
        calc(100% - 32px)
      );

    margin:
      24px
      auto
      0;

    background:
      var(--panel);

    border:
      1px solid
      var(--border);

    border-radius:
      10px;

    box-shadow:
      var(--shadow);

    overflow:
      hidden;
  }

  /* =========================================================
     LOGO HEADER
     ========================================================= */

  .logo-header {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    min-height:
      90px;

    padding:
      22px;

    background:
      var(--primary);
  }

  .logo-header img {
    display:
      block;

    width:
      auto;

    max-width:
      165px;

    height:
      32px;

    object-fit:
      contain;
  }

  /* =========================================================
     TITLE BAR
     ========================================================= */

  .title-bar {
    padding:
      22px
      24px;

    background:
      var(--secondary);

    text-align:
      center;

    border-bottom:
      4px solid
      var(--primary);
  }

  .title-bar h1 {
    margin:
      0;

    color:
      #ffffff;

    font-family:
      "Montserrat",
      "Open Sans",
      Arial,
      sans-serif;

    font-size:
      29px;

    font-weight:
      500;

    letter-spacing:
      5px;

    line-height:
      1.3;
  }

  /* =========================================================
     CONTENT
     ========================================================= */

  .content {
    padding:
      44px
      62px
      28px;

    text-align:
      center;

    background:
      var(--panel);
  }

  .hero-image {
    display:
      block;

    width:
      min(
        420px,
        100%
      );

    height:
      auto;

    margin:
      0
      auto
      34px;

    border-radius:
      8px;

    box-shadow:
      0 8px 24px
      rgba(
        0,
        0,
        0,
        0.08
      );
  }

  /* =========================================================
     SECTIONS
     ========================================================= */

  .section {
    max-width:
      780px;

    margin:
      0
      auto
      38px;
  }

  .section:last-child {
    margin-bottom:
      6px;
  }

  .section h2 {
    position:
      relative;

    margin:
      0
      0
      18px;

    padding-bottom:
      10px;

    color:
      var(--secondary);

    font-family:
      "Montserrat",
      "Open Sans",
      Arial,
      sans-serif;

    font-size:
      26px;

    font-weight:
      600;

    letter-spacing:
      0.8px;

    line-height:
      1.25;
  }

  .section h2::after {
    content:
      "";

    display:
      block;

    width:
      62px;

    height:
      3px;

    margin:
      10px
      auto
      0;

    border-radius:
      999px;

    background:
      var(--primary);
  }

  .section p {
    margin:
      0
      auto
      18px;

    color:
      var(--text);

    font-size:
      14px;

    font-weight:
      500;

    line-height:
      1.75;
  }

  .intro {
    max-width:
      700px;
  }

  /* =========================================================
     WARRANTY DETAILS CARD
     ========================================================= */

  .warranty-details {
    max-width:
      800px;

    padding:
      28px
      30px;

    border:
      1px solid
      var(--accent-line);

    border-radius:
      10px;

    background:
      var(--panel-soft);

    box-shadow:
      0 6px 18px
      rgba(
        9,
        95,
        112,
        0.06
      );
  }

  .warranty-details h2 {
    color:
      var(--primary);
  }

  /* =========================================================
     HOW TO REGISTER
     ========================================================= */

  .register-wrap {
    margin-top:
      30px;
  }

  .register-btn {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      200px;

    min-height:
      48px;

    padding:
      13px
      28px;

    border:
      2px solid
      var(--primary);

    border-radius:
      8px;

    background:
      var(--primary);

    color:
      #ffffff;

    font-family:
      "Montserrat",
      "Open Sans",
      Arial,
      sans-serif;

    font-size:
      14px;

    font-weight:
      700;

    letter-spacing:
      1px;

    text-decoration:
      none;

    text-transform:
      uppercase;

    cursor:
      pointer;

    box-shadow:
      0 6px 14px
      rgba(
        9,
        95,
        112,
        0.18
      );

    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .register-btn:hover,
  .register-btn:focus {
    background:
      var(--primary-dark);

    border-color:
      var(--primary-dark);

    color:
      #ffffff;

    text-decoration:
      none;

    transform:
      translateY(-1px);

    box-shadow:
      0 8px 18px
      rgba(
        9,
        95,
        112,
        0.24
      );
  }

  .register-btn:focus-visible {
    outline:
      3px solid
      var(--accent-line);

    outline-offset:
      3px;
  }

  /* =========================================================
     FOOTER
     ========================================================= */

  .footer-wrap {
    width:
      min(
        960px,
        calc(100% - 32px)
      );

    margin:
      18px
      auto
      32px;
  }

  .footer-line {
    height:
      3px;

    margin-bottom:
      14px;

    border-radius:
      999px;

    background:
      var(--primary);
  }

  .footer {
    color:
      var(--secondary);

    font-size:
      12px;

    font-weight:
      600;

    letter-spacing:
      0.25px;

    text-align:
      center;
  }

  .footer-separator {
    margin:
      0
      8px;

    color:
      var(--primary);
  }

  .footer a {
    color:
      var(--primary);

    font-weight:
      700;

    text-decoration:
      none;
  }

  .footer a:hover {
    text-decoration:
      underline;
  }

  /* =========================================================
     MOBILE
     ========================================================= */

  @media (max-width: 700px) {

    body {
      background:
        var(--panel);
    }

    .page {
      width:
        100%;

      margin:
        0;

      border:
        0;

      border-radius:
        0;

      box-shadow:
        none;
    }

    .logo-header {
      min-height:
        76px;

      padding:
        18px;
    }

    .logo-header img {
      height:
        27px;
    }

    .title-bar {
      padding:
        18px
        16px;
    }

    .title-bar h1 {
      font-size:
        20px;

      letter-spacing:
        3px;
    }

    .content {
      padding:
        32px
        22px
        18px;
    }

    .hero-image {
      margin-bottom:
        28px;
    }

    .section {
      margin-bottom:
        34px;
    }

    .section h2 {
      font-size:
        22px;
    }

    .section p {
      font-size:
        14px;

      line-height:
        1.7;
    }

    .warranty-details {
      padding:
        22px
        18px;
    }

    .footer-wrap {
      width:
        calc(100% - 32px);

      margin-top:
        14px;
    }
  }

  @media (max-width: 420px) {

    .title-bar h1 {
      font-size:
        17px;

      letter-spacing:
        2px;
    }

    .content {
      padding-left:
        17px;

      padding-right:
        17px;
    }

    .section h2 {
      font-size:
        21px;
    }

    .register-btn {
      width:
        100%;
    }

    .footer {
      line-height:
        1.9;
    }

    .footer-separator {
      display:
        none;
    }

    .footer-item {
      display:
        block;
    }
  }

.public-header-inner {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  width: 100%;
  min-height: 64px;

  padding: 0 18px;

  box-sizing: border-box;
}

.public-header-spacer {
  grid-column: 1;
}

.public-header-logo-link {
  grid-column: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 0;
}

.public-header-language {
  grid-column: 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.public-language-picker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0;

  color: #ffffff;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 700;
}

.public-language-icon {
  font-size: 17px;
  line-height: 1;
}

.public-language-select {
  appearance: none;
  -webkit-appearance: none;

  min-width: 118px;

  padding:
    7px
    30px
    7px
    10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  border-radius: 6px;

  background-color:
    rgba(255, 255, 255, 0.10);

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #ffffff 50%
    ),
    linear-gradient(
      135deg,
      #ffffff 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  color: #ffffff;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  outline: none;
}

.public-language-select option {
  color: #2f2f2f;
  background: #ffffff;
}

.public-language-select:hover,
.public-language-select:focus {
  border-color: #ffffff;

  background-color:
    rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {

  .public-header-inner {
    grid-template-columns:
      1fr
      auto;

    min-height: 64px;

    padding:
      10px
      12px;
  }

  .public-header-spacer {
    display: none;
  }

  .public-header-logo-link {
    grid-column: 1;

    justify-self: start;
  }

  .public-header-language {
    grid-column: 2;
  }

  .public-language-select {
    min-width: 105px;

    font-size: 11px;
  }
}