/* ==========================================================
       Thank-you page — built on the shared design system
       ========================================================== */
    .thanks { min-height: 62svh; display: grid; place-items: center; padding: 92px 0 104px; }
    .thanks-inner { max-width: 660px; margin-inline: auto; text-align: center; }

    .tick {
      display: grid;
      place-items: center;
      width: 92px;
      height: 92px;
      margin: 0 auto 30px;
      color: var(--navy);
      background: var(--gold);
      border: 3px solid var(--navy);
      border-radius: 28px;
      box-shadow: 7px 7px var(--hard);
      transform: rotate(-4deg);
    }
    .tick svg { width: 46px; height: 46px; }

    .thanks h1 { max-width: none; margin-bottom: 18px; }
    .thanks .lead { margin-inline: auto; margin-bottom: 34px; }

    .inbox-card {
      display: flex;
      align-items: center;
      gap: 18px;
      max-width: 520px;
      margin: 0 auto;
      padding: 24px 26px;
      text-align: left;
      background: var(--white);
      border: 3px solid var(--navy);
      border-radius: 22px;
      box-shadow: 8px 8px var(--hard);
    }
    /* white envelope on the brand blue.
       NOTE: these selectors are scoped with :not() on purpose. A plain
       `.inbox-card span` rule also matches the icon's own <span> and beats
       `.inbox-card__icon` on specificity, which knocks out the centring. */
    .inbox-card > .inbox-card__icon {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      flex: 0 0 54px;
      margin: 0;
      color: var(--white);
      background: var(--pop);
      border: 2.5px solid var(--navy);
      border-radius: 16px;
    }
    .inbox-card > .inbox-card__icon > svg { display: block; width: 26px; height: 26px; }
    .inbox-card > span:not(.inbox-card__icon) { display: block; margin: 0; }
    .inbox-card strong { display: block; margin: 0; color: var(--navy); font-size: 15px; line-height: 1.3; }
    .inbox-card > span:not(.inbox-card__icon) > span { display: block; margin-top: 5px; color: var(--muted); font-size: 13.2px; line-height: 1.45; }
    .inbox-card .sent-to { display: inline; margin: 0; color: var(--navy); font-size: inherit; font-weight: 800; overflow-wrap: anywhere; }

    .spam-note {
      max-width: 520px;
      margin: 22px auto 0;
      padding: 15px 18px;
      color: var(--blue);
      background: var(--sky-2);
      border: 2px solid rgba(31, 79, 224, .22);
      border-radius: 15px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .thanks-back { margin-top: 38px; }
    .thanks-back a { color: var(--blue-2); font-size: 14px; font-weight: 800; text-decoration: none; }
    .thanks-back a:hover { text-decoration: underline; }

    @media (max-width: 640px) {
      .thanks { padding: 62px 0 74px; }
      .tick { width: 76px; height: 76px; border-radius: 24px; box-shadow: 5px 5px var(--hard); }
      .tick svg { width: 38px; height: 38px; }
      .inbox-card { padding: 20px; gap: 14px; box-shadow: 5px 5px var(--hard); }
      .inbox-card > .inbox-card__icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
      .inbox-card > .inbox-card__icon > svg { width: 23px; height: 23px; }
    }