/* ---------- Color Tokens ---------- */
      :root {
          --ach-green-base: #baeaa0;
          /* main background */
          --ach-green-light: #ecf9e5;
          /* card / panel */
          --ach-green-dark: #061d1b;
          /* primary text / button */
          --ach-text-main: #061d1b;
          --ach-text-muted: rgba(6, 29, 27, 0.7);
          --ach-radius-card: 24px;
          --ach-radius-pill: 999px;
          --ach-shadow-card: 0 18px 45px rgba(6, 29, 27, 0.16);
      }

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

      html,
      body {
          margin: 0;
          padding: 0;
      }

      body {
          font-family: "outfitregular", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", sans-serif;
          color: var(--ach-text-main);
          background: linear-gradient(135deg,
                  var(--ach-green-base) 0%,
                  var(--ach-green-light) 100%);
      }

      /* Headings use Reckless Neue */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .ach-title {
          font-family: "Reckless Neue", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", sans-serif;
      }

      /* Paragraph-style copy */
      p,
      .ach-subtitle,
      .ach-footer-text {
          font-family: "outfitregular", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", sans-serif;
      }

      /* Wrapper ensures full-height layout */
      .ach-page {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
      }

      /* ---------- Layout Utilities ---------- */
      .ach-container {
          max-width: 960px;
          margin: 0 auto;
          padding: 1.5rem 1.5rem;
          display: flex;
          justify-content: center;
      }

      /* ---------- Header ---------- */
      .ach-header {
          background-color: rgba(236, 249, 229, 0.92);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(6, 29, 27, 0.08);
      }

      .ach-logo-link {
          display: inline-flex;
          align-items: center;
      }

      .ach-logo {
          height: 100px;
          width: auto;
      }

      /* ---------- Main Card ---------- */
      .ach-main {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3rem 1.5rem 2.5rem;
      }

      .ach-card {
          margin: 0 auto;
          max-width: 640px;
          background-color: var(--ach-green-light);
          border-radius: var(--ach-radius-card);
          padding: 3rem 2.5rem;
          box-shadow: var(--ach-shadow-card);
          border: 1px solid rgba(6, 29, 27, 0.06);
          text-align: center;
          position: relative;
      }

      /* Headline & Subtitle */
      .ach-title {
          margin: 0 0 0.75rem;
          font-weight: 700;
          line-height: 1.1;
          font-size: clamp(2rem, 2.2vw + 1.6rem, 2.7rem);
      }

      .ach-subtitle {
          margin: 0 0 1.75rem;
          font-size: 1.05rem;
          color: var(--ach-text-muted);
      }

      .btn-effect-one {
          font-family: "Reckless Neue";
          /* layout */
          display: inline-flex;
          /* only one display value */
          align-items: center;
          justify-content: center;
          box-sizing: border-box;

          /* spacing: responsive-ish via rems */
          padding: 0.75rem 2.5rem;
          /* ~12px 40px at base 16px */
          width: auto;
          max-width: 100%;
          /* prevent overflow on small screens */

          /* typography */
          font-family: "Reckless Neue", system-ui, sans-serif;
          font-weight: 500;
          font-size: 1.05rem;
          /* ~16–17px */
          line-height: 1.4;
          text-transform: capitalize;
          text-align: center;
          text-decoration: none;

          /* visual style */
          color: #000000;
          background: #baeaa0;
          border-radius: 0;
          /* keep your square corners */
          border: 1px solid #baeaa0;

          /* misc */
          position: relative;
          vertical-align: middle;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          outline: 0 !important;
          transition: all 0.3s ease;
          /* a bit snappier than .5s */
          overflow: hidden;
          z-index: 1;
      }

      /* Hover / focus */
      .btn-effect-one:hover,
      .btn-effect-one:focus-visible {
          color: #fff;
          background: #061d1b;
          border-color: #061d1b;
      }

      /* Optional: make it full-width on small screens */
      @media (max-width: 480px) {
          .btn-effect-one {
              width: 100%;
              padding-inline: 1.5rem;
              font-size: 1rem;
          }
      }

      /* ---------- Footer ---------- */
      .ach-footer {
          padding-bottom: 1.5rem;
      }

      .ach-footer-text {
          margin: 0;
          font-size: 0.8rem;
          color: rgba(6, 29, 27, 0.6);
          text-align: left;
      }

      /* ---------- Responsive Tweaks ---------- */
      @media (max-width: 640px) {
          .ach-card {
              padding: 2.4rem 1.75rem;
              border-radius: 18px;
          }

          .ach-main {
              padding-top: 2rem;
              padding-bottom: 2rem;
          }

          .ach-logo {
              height: 34px;
          }
      }