/* =========================================================
           SHARED DESIGN TOKENS
           ========================================================= */

      :root {
        --color-primary: #08a95b;
        --color-primary-hover: #07894c;

        --container-width: 1560px;
        --container-padding: clamp(20px, 4vw, 72px);

        --radius-small: 10px;
        --radius-medium: 18px;
        --radius-large: 28px;

        --transition: 180ms ease;
      }

      /* =========================================================
           LIGHT THEME
           ========================================================= */

      :root,
      :root[data-theme="light"] {
        color-scheme: light;

        --color-background: #ffffff;

        --color-surface: #f7f9f8;
        --color-surface-secondary: #eff4f1;

        --color-card: #ffffff;

        --color-text: #111827;
        --color-text-secondary: #697386;
        --color-text-light: #8a94a3;

        --color-border: #e3e8e5;

        --color-primary-soft: #e9f8f0;

        --color-header: rgba(255, 255, 255, 0.94);

        --color-input: #ffffff;

        --color-video: #070a0d;

        --hero-background: radial-gradient(
            circle at 78% 40%,
            rgba(8, 169, 91, 0.11),
            transparent 34%
          ),
          #ffffff;

        --media-background: linear-gradient(145deg, #ffffff, #f2f7f4);

        --shadow-small: 0 8px 30px rgba(17, 24, 39, 0.06);

        --shadow-large: 0 30px 80px rgba(17, 24, 39, 0.1);
      }

      /* =========================================================
           DARK THEME
           ========================================================= */

      :root[data-theme="dark"] {
        color-scheme: dark;

        --color-background: #0c1014;

        --color-surface: #11171c;
        --color-surface-secondary: #192027;

        --color-card: #131a20;

        --color-text: #f2f5f4;
        --color-text-secondary: #9ca8a3;
        --color-text-light: #707b77;

        --color-border: #27312d;

        --color-primary-soft: #132a20;

        --color-header: rgba(12, 16, 20, 0.94);

        --color-input: #10161b;

        --color-video: #050708;

        --hero-background: radial-gradient(
            circle at 78% 40%,
            rgba(8, 169, 91, 0.16),
            transparent 36%
          ),
          #0c1014;

        --media-background: linear-gradient(145deg, #161d22, #101519);

        --shadow-small: 0 8px 30px rgba(0, 0, 0, 0.18);

        --shadow-large: 0 30px 90px rgba(0, 0, 0, 0.34);
      }

      /* =========================================================
           RESET
           ========================================================= */

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;

        background: var(--color-background);
        color: var(--color-text);

        font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;

        line-height: 1.6;

        -webkit-font-smoothing: antialiased;

        transition: background-color 250ms ease, color 250ms ease;
      }

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

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

      button,
      input,
      textarea {
        font: inherit;
      }

      /* =========================================================
           GENERIC LAYOUT
           ========================================================= */

      .container {
        width: min(
          calc(100% - (var(--container-padding) * 2)),
          var(--container-width)
        );

        margin-inline: auto;
      }

      .section {
        padding-block: clamp(70px, 7vw, 125px);
      }

      .section--soft {
        background: var(--color-surface);
      }

      .section-header {
        max-width: 760px;

        margin-bottom: 50px;
      }

      .section-header--center {
        margin-inline: auto;

        text-align: center;
      }

      .section-title {
        margin: 0 0 15px;

        font-size: clamp(2rem, 4vw, 3.5rem);

        line-height: 1.08;

        letter-spacing: -0.045em;
      }

      .section-description {
        margin: 0;

        color: var(--color-text-secondary);

        font-size: clamp(1rem, 1.4vw, 1.15rem);
      }

      .grid {
        display: grid;

        gap: 24px;
      }

      .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .card {
        border: 1px solid var(--color-border);

        border-radius: var(--radius-medium);

        background: var(--color-card);
      }

      /* =========================================================
           GENERIC BUTTONS
           ========================================================= */

      .button {
        min-height: 52px;

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

        gap: 8px;

        padding: 0 24px;

        border: 0;

        border-radius: var(--radius-small);

        cursor: pointer;

        font-weight: 700;

        transition: background var(--transition), transform var(--transition);
      }

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

      .button--primary {
        background: var(--color-primary);

        color: #ffffff;
      }

      .button--primary:hover {
        background: var(--color-primary-hover);
      }

      .button--secondary {
        background: var(--color-surface-secondary);

        color: var(--color-text);
      }

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

      .site-header {
        position: relative;

        z-index: 20;

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

        background: var(--color-header);

        backdrop-filter: blur(18px);

        -webkit-backdrop-filter: blur(18px);
      }

      .site-header__inner {
        min-height: 78px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 30px;
      }

      .site-logo {
        display: flex;

        align-items: center;
      }

      .site-logo img {
        width: 220px;
     
      }
      .site-logo__image--light {
        display: block;
      }

      .site-logo__image--dark {
        display: none;
      }

      :root[data-theme="dark"] .site-logo__image--light {
        display: none;
      }

      :root[data-theme="dark"] .site-logo__image--dark {
        display: block;
      }

      .header-actions {
        display: flex;
        align-items: center;

        gap: 28px;
      }

      .nav {
        display: flex;
        align-items: center;

        gap: 28px;

        color: var(--color-text-secondary);

        font-size: 0.92rem;
        font-weight: 600;
      }

      .nav a {
        transition: color var(--transition);
      }

      .nav a:hover {
        color: var(--color-primary);
      }

      /* =========================================================
           THEME SWITCH
           ========================================================= */

      .theme-switch {
        display: flex;
        align-items: center;

        gap: 8px;

        padding: 5px;

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

        border-radius: 999px;

        background: var(--color-surface);
      }

      .theme-switch__button {
        min-width: 72px;
        height: 34px;

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

        gap: 6px;

        padding: 0 12px;

        border: 0;
        border-radius: 999px;

        background: transparent;

        color: var(--color-text-secondary);

        cursor: pointer;

        font-size: 0.78rem;
        font-weight: 700;

        transition: background var(--transition), color var(--transition);
      }

      .theme-switch__button:hover {
        color: var(--color-text);
      }

      .theme-switch__button.is-active {
        background: var(--color-primary);

        color: #ffffff;
      }

      .theme-switch__icon {
        font-size: 0.9rem;
      }

      /* =========================================================
           HERO
           ========================================================= */

      .hero {
        position: relative;

        overflow: hidden;

        padding-block: clamp(70px, 8vw, 145px);

        background: var(--hero-background);
      }

      .hero__layout {
        display: grid;

        grid-template-columns:
          minmax(0, 0.85fr)
          minmax(500px, 1.15fr);

        align-items: center;

        gap: clamp(50px, 7vw, 120px);
      }

      .hero__logo {
        width: clamp(180px, 20vw, 280px);

        margin-bottom: 34px;
      }

      .hero__title {
        margin: 0;

        font-family: Helvetica, Arial, sans-serif;

        font-size: clamp(4rem, 7vw, 7.8rem);

        line-height: 0.94;

        letter-spacing: -0.075em;
      }

      .hero__title-accent {
        color: #16a069;
      }

      .hero__tagline {
        margin: 26px 0 0;

        color: var(--color-text-secondary);

        font-size: clamp(1.15rem, 2vw, 1.65rem);

        font-weight: 600;
      }

      .hero__description {
        max-width: 650px;

        margin: 22px 0 0;

        color: var(--color-text-secondary);

        font-size: clamp(1rem, 1.3vw, 1.13rem);
      }

      .hero__actions {
        display: flex;
        flex-wrap: wrap;

        gap: 12px;

        margin-top: 34px;
      }

      /* =========================================================
           MEDIA BOX
           ========================================================= */

      .media-box {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .media-box__placeholder {
        padding: 40px;

        text-align: center;
      }

      .media-box__icon {
        width: 72px;
        height: 72px;

        margin: 0 auto 20px;

        display: grid;
        place-items: center;

        border-radius: 20px;

        background: var(--color-primary-soft);

        color: var(--color-primary);

        font-size: 2rem;
      }

      .media-box__title {
        margin: 0 0 8px;

        font-size: 1.1rem;
        font-weight: 800;
      }

      .media-box__text {
        margin: 0;

        color: var(--color-text-secondary);
      }

      .media-box__image {
        width: 100%;
        height: auto;
      }

      /* =========================================================
           FEATURES
           ========================================================= */

      .feature-card {
        padding: clamp(24px, 2.5vw, 36px);
      }

      .feature-card > img {
        margin-bottom: 24px;
      }

      .feature-card__number {
        margin-bottom: 24px;

        color: var(--color-primary);

        font-size: 0.8rem;
        font-weight: 800;

        letter-spacing: 0.12em;
      }

      .feature-card__title {
        margin: 0 0 12px;

        text-align: center;

        font-size: 1.15rem;
        font-weight: 800;

        letter-spacing: -0.025em;
      }

      .feature-card__text {
        margin: 0;

        color: var(--color-text-secondary);

        font-size: 0.95rem;
      }

      /* =========================================================
           VIDEO
           ========================================================= */

      .video-container {
        width: 100%;

        aspect-ratio: 16 / 9;

        overflow: hidden;

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

        border-radius: var(--radius-large);

        background: var(--color-video);

        box-shadow: var(--shadow-large);
      }

      .video-container iframe {
        width: 100%;
        height: 100%;

        border: 0;
      }

      .video-placeholder {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 40px;

        text-align: center;
      }

      .video-placeholder__play {
        width: 86px;
        height: 86px;

        display: grid;
        place-items: center;

        margin-bottom: 22px;

        border-radius: 50%;

        background: var(--color-primary);

        color: #ffffff;

        font-size: 1.7rem;
      }

      .video-placeholder__title {
        margin: 0 0 10px;

        color: #ffffff;

        font-size: clamp(1.5rem, 3vw, 2.6rem);
      }

      .video-placeholder__text {
        margin: 0;

        color: #9ba5af;
      }

      /* =========================================================
           FAQ
           ========================================================= */

      .faq {
        max-width: 1050px;

        margin-inline: auto;

        border-top: 1px solid var(--color-border);
      }

      .faq-item {
        border-bottom: 1px solid var(--color-border);
      }

      .faq-item__question {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 30px;

        padding: 27px 0;

        border: 0;

        background: transparent;

        color: var(--color-text);

        cursor: pointer;

        text-align: left;

        font-size: 1.05rem;
        font-weight: 700;
      }

      .faq-item__icon {
        flex: 0 0 auto;

        color: var(--color-primary);

        font-size: 1.5rem;

        transition: transform var(--transition);
      }

      .faq-item__answer {
        max-height: 0;

        overflow: hidden;

        transition: max-height 300ms ease, padding 300ms ease;
      }

      .faq-item__answer p {
        max-width: 850px;

        margin: 0;

        color: var(--color-text-secondary);
      }

      .faq-item.is-open .faq-item__answer {
        max-height: 400px;

        padding-bottom: 28px;
      }

      .faq-item.is-open .faq-item__icon {
        transform: rotate(45deg);
      }

      /* =========================================================
           GENERIC FORMS
           ========================================================= */

      .form {
        width: 100%;
      }

      .form-group {
        display: flex;
        flex-direction: column;

        gap: 9px;

        margin-bottom: 20px;
      }

      .form-label {
        font-size: 0.88rem;
        font-weight: 700;
      }

      .form-control {
        width: 100%;

        padding: 15px 16px;

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

        border-radius: var(--radius-small);

        outline: none;

        background: var(--color-input);

        color: var(--color-text);

        transition: border var(--transition), box-shadow var(--transition);
      }

      .form-control::placeholder {
        color: var(--color-text-light);
      }

      .form-control:focus {
        border-color: var(--color-primary);

        box-shadow: 0 0 0 4px rgba(8, 169, 91, 0.1);
      }

      textarea.form-control {
        min-height: 200px;

        resize: vertical;
      }

      /* =========================================================
           CONTACT
           ========================================================= */

      .contact-form {
        max-width: 1150px;

        margin-inline: auto;

        padding: clamp(26px, 5vw, 58px);

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

        border-radius: var(--radius-large);

        background: var(--color-card);

        box-shadow: var(--shadow-small);
      }

      .contact-form__actions {
        display: flex;
        justify-content: flex-end;

        margin-top: 8px;
      }

      .thank-you-card {
        text-align: center;
      }

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

      .site-footer {
        padding: 46px var(--container-padding);

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

        background: var(--color-background);
      }

      .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        gap: 12px 28px;

        color: var(--color-text-secondary);

        font-size: 0.9rem;
      }

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

      .footer-copyright {
        margin-top: 20px;

        text-align: center;

        color: var(--color-text-light);

        font-size: 0.82rem;
      }

      /* =========================================================
           SUPPORT & LEGAL PAGES
           ========================================================= */

      .content-page {
        --content-aside-width: 320px;
        --content-layout-gap: clamp(28px, 5vw, 70px);

        padding-block: clamp(42px, 5vw, 64px);
      }

      .content-page__intro {
        max-width: calc(
          100% - var(--content-aside-width) - var(--content-layout-gap)
        );

        margin-bottom: clamp(35px, 5vw, 60px);

        text-align: center;
      }

      .content-page__eyebrow {
        display: none;
      }

      .content-page__title {
        margin: 0 0 18px;

        font-size: clamp(2.5rem, 5vw, 4.5rem);
        line-height: 1;
        letter-spacing: -0.06em;
      }

      .content-page__summary {
        margin: 0;

        color: var(--color-text-secondary);

        font-size: clamp(1.05rem, 1.6vw, 1.2rem);
        line-height: 1.7;
      }

      .content-page__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--content-aside-width);
        align-items: start;
        gap: var(--content-layout-gap);
      }

      .content-page__body {
        padding: 0;
      }

      .content-page__body h2 {
        margin: 42px 0 14px;

        font-size: clamp(1.3rem, 2vw, 1.65rem);
        letter-spacing: -0.03em;
      }

      .content-page__body h2:first-child {
        margin-top: 0;
      }

      .content-page__body p,
      .content-page__body li {
        color: var(--color-text-secondary);
        line-height: 1.75;
      }

      .content-page__body ul {
        padding-left: 1.25rem;
      }

      .content-page__body strong {
        color: var(--color-text);
      }

      .content-page__aside {
        padding: 26px;

        background: var(--color-surface);
      }

      .content-page__aside h2 {
        margin: 0 0 12px;

        font-size: 1.05rem;
      }

      .content-page__aside p {
        margin: 0;

        color: var(--color-text-secondary);
        line-height: 1.65;
      }

      .content-page__aside a {
        color: var(--color-primary);

        font-weight: 700;
      }

      .help-topics {
        margin-top: 32px;
        padding: clamp(26px, 4vw, 50px);

        border: 0;
      }

      .help-overview,
      .help-topic-answer {
        padding: clamp(26px, 4vw, 50px);
      }

      .help-topics > h2 {
        margin-top: 0;
      }

      .help-topics__search {
        width: min(100%, 680px);
        min-height: 52px;

        padding: 0 18px;

        border: 1px solid #c9b8ff;
        border-radius: var(--radius-small);
        outline: none;

        background: #f1edff;
        color: var(--color-text);
      }

      .help-topics__search:focus {
        border-color: #7654d8;
        box-shadow: 0 0 0 3px rgba(118, 84, 216, 0.2);
      }

      .help-topics__list {
        margin: 20px 0 0;
        padding: 0;

        list-style: none;
      }

      .help-topics__list li + li {
        margin-top: 10px;
      }

      .help-topics__list a {
        color: var(--color-primary);
        font-weight: 700;
      }

      .help-topics__list a:hover {
        text-decoration: underline;
      }

      .help-topics__empty {
        margin: 20px 0 0;
      }

      .help-topics__answers {
        margin-top: 32px;
      }

      .help-topic-answer {
        scroll-margin-top: 100px;
      }

      .help-topic-answer__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
      }

      .help-topic-answer__header h3 {
        min-width: 0;
      }

      .help-topic-answer + .help-topic-answer {
        margin-top: 32px;
      }

      .help-topic-answer h3 {
        margin: 0 0 10px;

        font-size: 1.2rem;
        letter-spacing: -0.025em;
      }

      .help-topic-answer__print {
        width: 36px;
        height: 36px;
        padding: 0;

        display: grid;
        place-items: center;

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: var(--color-primary);

        cursor: pointer;
      }

      .help-topic-answer__print svg {
        width: 19px;
        height: 19px;

        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
      }

      .help-topic-answer__print:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary-hover);
      }

      .help-topic-answer__lead {
        color: var(--color-text) !important;
        font-size: 1.05rem;
        font-weight: 700;
      }

      .help-topic-definitions {
        margin: 16px 0 0;
      }

      .help-topic-definitions dt {
        margin-top: 18px;

        color: var(--color-text);
        font-weight: 800;
      }

      .help-topic-definitions dt:first-child {
        margin-top: 0;
      }

      .help-topic-definitions dd {
        margin: 4px 0 0;

        color: var(--color-text-secondary);
      }

      .help-topic-answer h4 {
        margin: 32px 0 10px;

        color: var(--color-text);
        font-size: 1.05rem;
      }

      .help-topic-answer ul {
        margin: 10px 0 16px;
      }

      .help-topic-answer__table-wrap {
        margin: 20px 0;
        overflow-x: auto;

        border: 1px solid var(--color-border);
        border-radius: var(--radius-small);
      }

      .help-topic-answer table {
        width: 100%;
        min-width: 420px;

        border-collapse: collapse;
      }

      .help-topic-answer th,
      .help-topic-answer td {
        padding: 12px 14px;

        border-bottom: 1px solid var(--color-border);
        text-align: left;
      }

      .help-topic-answer th {
        background: var(--color-surface);
        color: var(--color-text);
      }

      .help-topic-answer tbody tr:last-child td {
        border-bottom: 0;
      }

      /* =========================================================
           TABLET
           ========================================================= */

      @media (max-width: 1050px) {
        .content-page__layout {
          grid-template-columns: 1fr;
        }

        .content-page__intro {
          max-width: none;
        }

        .hero__layout {
          grid-template-columns: 1fr;
        }

        .hero__content {
          max-width: 760px;
        }

        .grid--4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* =========================================================
           MOBILE / IPHONE PORTRAIT
           ========================================================= */

      @media (max-width: 700px) {
        :root {
          --container-padding: 20px;
        }

        .site-header__inner {
          min-height: 70px;
        }

        .site-logo img {
          height: 38px;
        }

        .header-actions {
          gap: 12px;
        }

        .nav {
          display: none;
        }

        .theme-switch {
          gap: 3px;

          padding: 4px;
        }

        .theme-switch__button {
          min-width: 58px;
          height: 32px;

          padding: 0 9px;

          font-size: 0.72rem;
        }

        .hero {
          padding-block: 60px 75px;
        }

        .hero__layout {
          gap: 50px;
        }

        .hero__logo {
          width: 165px;
        }

        .hero__title {
          font-size: clamp(3.4rem, 17vw, 5rem);
        }

        .hero__actions {
          flex-direction: column;
        }

        .hero__actions .button {
          width: 100%;
        }

        .grid--2,
        .grid--4 {
          grid-template-columns: 1fr;
        }

        .section {
          padding-block: 70px;
        }

        .video-container {
          border-radius: var(--radius-medium);
        }

        .video-placeholder__play {
          width: 68px;
          height: 68px;
        }

        .contact-form {
          padding: 24px;

          border-radius: var(--radius-medium);
        }

        .contact-form__actions {
          display: block;
        }

        .contact-form__actions .button {
          width: 100%;
        }
      }

      /* =========================================================
           LARGE / 2K+ MONITORS
           ========================================================= */

      @media (min-width: 1800px) {
        :root {
          --container-width: 1680px;
        }

        .hero__layout {
          gap: 140px;
        }

      }