/* ============================================================
   Pace App — pace-extra.css
   Hot-fixes + new sections. Loaded after main.css so it always
   wins on specificity. Keep this file additive — never reset
   anything from main.css globally.
   ============================================================ */

/* ------------------------------------------------------------
   1. Contact Form 7 — robust scoping
   ------------------------------------------------------------
   main.css scopes the CF7 form styles to `.pace-page`, which
   lives on the <div class="page-wrapper pace-page"> opened in
   header.php. In some environments (cache plugins, prior wrap-
   pers, page builders that move the form out of that ancestor)
   the selector chain breaks and the form falls back to its
   default browser styling. Here we re-scope to the actual form
   wrappers we render ourselves: `.pace-hero__form` for the hero
   and `.pace-final__form` / `.contact__form` for the final CTA
   in footer.php. Both are explicitly added by our PHP, so the
   form is always styled regardless of any parent class.
   ------------------------------------------------------------ */

.pace-hero__form .wpcf7,
.pace-final__form .wpcf7,
.contact__form .wpcf7 { margin: 0; padding: 0; }

/* Hide the hidden-inputs fieldset wrapper and the line-break
   that CF7 puts between input and submit. */
.pace-hero__form .wpcf7 .hidden-fields-container,
.pace-final__form .wpcf7 .hidden-fields-container,
.contact__form .wpcf7 .hidden-fields-container,
.pace-hero__form .wpcf7-form fieldset.hidden-fields-container,
.pace-final__form .wpcf7-form fieldset.hidden-fields-container,
.contact__form .wpcf7-form fieldset.hidden-fields-container {
    border: 0;
    margin: 0;
    padding: 0;
    display: contents;
}
.pace-hero__form .wpcf7-form > br,
.pace-final__form .wpcf7-form > br,
.contact__form .wpcf7-form > br,
.pace-hero__form .wpcf7-form p > br,
.pace-final__form .wpcf7-form p > br,
.contact__form .wpcf7-form p > br { display: none; }

/* The form itself: dark pill containing input + submit. */
.pace-hero__form .wpcf7-form,
.pace-final__form .wpcf7-form,
.contact__form .wpcf7-form {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(14, 26, 34, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px;
    max-width: 480px;
    transition: border-color .25s ease, box-shadow .25s ease;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.pace-hero__form .wpcf7-form:focus-within,
.pace-final__form .wpcf7-form:focus-within,
.contact__form .wpcf7-form:focus-within {
    border-color: rgba(49, 217, 145, 0.4);
    box-shadow: 0 0 0 4px rgba(49, 217, 145, 0.12),
                0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

/* The <p> CF7 wraps the controls in becomes the inner row. */
.pace-hero__form .wpcf7-form > p,
.pace-final__form .wpcf7-form > p,
.contact__form .wpcf7-form > p {
    margin: 0;
    flex: 1 1 100%;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.pace-hero__form .wpcf7-form .wpcf7-form-control-wrap,
.pace-final__form .wpcf7-form .wpcf7-form-control-wrap,
.contact__form .wpcf7-form .wpcf7-form-control-wrap {
    flex: 1;
    display: flex;
    min-width: 0;
}
.pace-hero__form .wpcf7-form .wpcf7-form-control-wrap > *,
.pace-final__form .wpcf7-form .wpcf7-form-control-wrap > *,
.contact__form .wpcf7-form .wpcf7-form-control-wrap > * { flex: 1; }

/* Email input */
.pace-hero__form .wpcf7-form input[type="email"],
.pace-hero__form .wpcf7-form input[type="text"],
.pace-final__form .wpcf7-form input[type="email"],
.pace-final__form .wpcf7-form input[type="text"],
.contact__form .wpcf7-form input[type="email"],
.contact__form .wpcf7-form input[type="text"] {
    flex: 1;
    background: transparent !important;
    border: 0 !important;
    outline: none;
    color: #F4F7F6 !important;
    font-size: 15px;
    padding: 14px 18px;
    min-width: 0;
    width: 100%;
    font-family: inherit;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
}
.pace-hero__form .wpcf7-form input[type="email"]::placeholder,
.pace-hero__form .wpcf7-form input[type="text"]::placeholder,
.pace-final__form .wpcf7-form input[type="email"]::placeholder,
.pace-final__form .wpcf7-form input[type="text"]::placeholder,
.contact__form .wpcf7-form input[type="email"]::placeholder,
.contact__form .wpcf7-form input[type="text"]::placeholder {
    color: #5F6B72;
    opacity: 1;
}

/* Submit button — pill, green */
.pace-hero__form .wpcf7-form input[type="submit"],
.pace-hero__form .wpcf7-form .wpcf7-submit,
.pace-final__form .wpcf7-form input[type="submit"],
.pace-final__form .wpcf7-form .wpcf7-submit,
.contact__form .wpcf7-form input[type="submit"],
.contact__form .wpcf7-form .wpcf7-submit {
    flex: 0 0 auto !important;
    background: #31D991 !important;
    color: #06141B !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .25s ease;
    box-shadow: 0 8px 22px -10px rgba(49, 217, 145, 0.35) !important;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    text-shadow: none;
}
.pace-hero__form .wpcf7-form input[type="submit"]:hover,
.pace-hero__form .wpcf7-form .wpcf7-submit:hover,
.pace-final__form .wpcf7-form input[type="submit"]:hover,
.pace-final__form .wpcf7-form .wpcf7-submit:hover,
.contact__form .wpcf7-form input[type="submit"]:hover,
.contact__form .wpcf7-form .wpcf7-submit:hover {
    background: #2EE3A0 !important;
    transform: translateY(-1px);
}

/* CF7 spinner: invisible by default, mini-loader when submitting. */
.pace-hero__form .wpcf7-spinner,
.pace-final__form .wpcf7-spinner,
.contact__form .wpcf7-spinner {
    width: 0;
    height: 24px;
    margin: 0;
    background: none;
    align-self: center;
    border-radius: 50%;
    transition: width .15s ease, margin-left .15s ease;
}
.pace-hero__form .wpcf7-form.submitting .wpcf7-spinner,
.pace-final__form .wpcf7-form.submitting .wpcf7-spinner,
.contact__form .wpcf7-form.submitting .wpcf7-spinner {
    width: 24px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: #31D991;
    animation: paceExtraSpin .8s linear infinite;
}
.pace-hero__form .wpcf7-form.submitting .wpcf7-spinner::before,
.pace-final__form .wpcf7-form.submitting .wpcf7-spinner::before,
.contact__form .wpcf7-form.submitting .wpcf7-spinner::before { content: none; }
@keyframes paceExtraSpin { to { transform: rotate(360deg); } }

/* Response output / validation tip */
.pace-hero__form .wpcf7-response-output,
.pace-final__form .wpcf7-response-output,
.contact__form .wpcf7-response-output {
    flex: 1 1 100%;
    margin: 10px 6px 4px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #8B969C !important;
    font-size: 13px !important;
}
.pace-hero__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="sent"] .wpcf7-response-output {
    color: #31D991 !important;
    border-color: rgba(49, 217, 145, 0.35) !important;
    background: rgba(49, 217, 145, 0.16) !important;
}
.pace-hero__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output {
    color: #FF7A45 !important;
    border-color: rgba(255, 122, 69, 0.35) !important;
    background: rgba(255, 122, 69, 0.16) !important;
}
.pace-hero__form .wpcf7-not-valid-tip,
.pace-final__form .wpcf7-not-valid-tip,
.contact__form .wpcf7-not-valid-tip {
    color: #FF7A45 !important;
    font-size: 12px;
    margin-top: 6px;
    padding: 0 10px;
}
.pace-hero__form .screen-reader-response,
.pace-final__form .screen-reader-response,
.contact__form .screen-reader-response {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mobile: stack input and submit. */
@media (max-width: 560px) {
    .pace-hero__form .wpcf7-form,
    .pace-final__form .wpcf7-form,
    .contact__form .wpcf7-form {
        border-radius: 18px;
        padding: 10px;
    }
    .pace-hero__form .wpcf7-form > p,
    .pace-final__form .wpcf7-form > p,
    .contact__form .wpcf7-form > p { flex-direction: column; }
    .pace-hero__form .wpcf7-form input[type="submit"],
    .pace-hero__form .wpcf7-form .wpcf7-submit,
    .pace-final__form .wpcf7-form input[type="submit"],
    .pace-final__form .wpcf7-form .wpcf7-submit,
    .contact__form .wpcf7-form input[type="submit"],
    .contact__form .wpcf7-form .wpcf7-submit { width: 100%; padding: 14px 26px !important; }
}

/* ------------------------------------------------------------
   2. Disclaimer body — make it fill the container width
   ------------------------------------------------------------ */
.pace-disclaimer__body {
    max-width: none !important;
    margin: 0;
    columns: 3;
    column-gap: 56px;
}
@media (max-width: 1100px) {
    .pace-disclaimer__body { columns: 2; column-gap: 40px; }
}
@media (max-width: 768px) {
    .pace-disclaimer__body { columns: 1; column-gap: 0; }
}

/* ------------------------------------------------------------
   3. FAQ section
   ------------------------------------------------------------ */
.pace-faq {
    padding: var(--space-section, 120px) 0;
    background: var(--bg-section, #0B151C);
    position: relative;
    overflow: hidden;
}
.pace-faq::before {
    content: "";
    position: absolute;
    top: -10%; right: -10%;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(49, 217, 145, 0.10) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.pace-faq.is-revealed::before { opacity: 1; }

.pace-faq__grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.pace-faq__head {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pace-faq__title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-main, #F4F7F6);
}
.pace-faq__subtitle {
    color: var(--text-muted, #8B969C);
    font-size: 16px;
    line-height: 1.6;
    max-width: 320px;
}
.pace-faq__contact {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green, #31D991);
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
    padding: 10px 18px;
    border: 1px solid rgba(49, 217, 145, 0.28);
    border-radius: 999px;
    background: rgba(49, 217, 145, 0.16);
    transition: background .2s ease, transform .2s ease;
}
.pace-faq__contact:hover { background: rgba(49, 217, 145, 0.22); transform: translateY(-1px); color: var(--green, #31D991); }

.pace-faq__list { display: flex; flex-direction: column; gap: 12px; }

.pace-faq__item {
    background: var(--card-bg, rgba(14, 26, 34, 0.78));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    opacity: 0;
    transform: translateY(14px);
}
.pace-faq.is-revealed .pace-faq__item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s ease, border-color .25s ease;
    transition-delay: calc(var(--pace-step, 0) * 0.07s);
}
.pace-faq__item.is-open {
    border-color: rgba(49, 217, 145, 0.35);
    background: linear-gradient(180deg, rgba(49, 217, 145, 0.08) 0%, rgba(14, 26, 34, 0.78) 100%);
    box-shadow: 0 30px 60px -30px rgba(49, 217, 145, 0.2);
}

.pace-faq__question {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-main, #F4F7F6);
    text-align: left;
    cursor: pointer;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.pace-faq__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #8B969C);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s ease, color .25s ease, border-color .25s ease;
}
.pace-faq__item.is-open .pace-faq__icon {
    background: var(--green, #31D991);
    color: #06141B;
    border-color: var(--green, #31D991);
    transform: rotate(180deg);
}
.pace-faq__icon svg { width: 12px; height: 12px; }

.pace-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
}
.pace-faq__answer-inner {
    padding: 0 24px 24px;
    color: var(--text-muted, #8B969C);
    font-size: 15px;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.pace-faq__answer-inner p { margin: 0 0 12px; }
.pace-faq__answer-inner p:last-child { margin-bottom: 0; }
.pace-faq__answer-inner a {
    color: var(--text-main, #F4F7F6);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(49, 217, 145, 0.4);
}
.pace-faq__answer-inner a:hover { color: var(--green, #31D991); text-decoration-color: var(--green, #31D991); }

.pace-faq__item.is-open .pace-faq__answer-inner {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .pace-faq__grid { grid-template-columns: 1fr; gap: 32px; }
    .pace-faq__head { position: static; }
    .pace-faq__subtitle { max-width: none; }
    .pace-faq__question { padding: 18px 20px; font-size: 16px; }
    .pace-faq__answer-inner { padding: 0 20px 20px; }
}

/* ============================================================
   FAQ — fixes (left column title + contact-button arrow size)
   ============================================================ */

/* The arrow icon was rendering at its intrinsic SVG size (huge).
   Constrain it to a small inline icon. */
.pace-faq__contact svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* faq_title is now rendered with wp_kses (allows <br> + bold/italic),
   so users can type multi-line titles. Set sensible line-height and
   make any inline tags inherit the heading style. */
.pace-faq__title {
    line-height: 1.1;
}
.pace-faq__title br { display: block; content: ""; margin-top: 4px; }
.pace-faq__title strong,
.pace-faq__title em,
.pace-faq__title span { color: inherit; font-weight: inherit; font-style: inherit; }
.pace-faq__title em { color: var(--green, #31D991); font-style: normal; }

/* Tidy up the head column container so nothing overflows */
.pace-faq__head {
    min-width: 0; /* allow shrink */
    overflow-wrap: break-word;
}
.pace-faq__contact {
    align-self: flex-start;
    max-width: 100%;
}

/* ============================================================
   Disclaimer — REDESIGNED as a Pace-style trust card.
   The .pace-disclaimer--card modifier overrides the legacy
   flat-section styling from main.css with a centered card.
   ============================================================ */

.pace-disclaimer--card {
    padding: var(--space-section, 120px) 0 !important;
    background: var(--bg-main, #071015) !important;
    overflow: hidden;
    position: relative;
}
/* Neutralise the old gradient line + ambient blob; we render new ones. */
.pace-disclaimer--card .pace-disclaimer__line { display: none; }
.pace-disclaimer--card::before { content: none !important; }

/* Soft ambient glow inside the section, behind the card. */
.pace-disclaimer__ambient {
    position: absolute;
    top: 50%; left: 50%;
    width: 70%; height: 90%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(49, 217, 145, 0.14) 0%, transparent 65%),
        radial-gradient(35% 45% at 85% 70%, rgba(108, 168, 255, 0.08) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.pace-disclaimer--card.is-revealed .pace-disclaimer__ambient,
.pace-disclaimer--card .pace-disclaimer__card.is-visible ~ .pace-disclaimer__ambient,
.pace-disclaimer--card .pace-disclaimer__card.is-visible { opacity: 1; }
.pace-disclaimer--card.is-revealed .pace-disclaimer__ambient { opacity: 1; }

/* Subtle dotted grid behind the card. */
.pace-disclaimer__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
    pointer-events: none;
    opacity: 0.5;
}

/* The card itself */
.pace-disclaimer__card {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(14, 26, 34, 0.92) 0%, rgba(11, 21, 28, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 48px 56px 52px;
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 56px;
    overflow: hidden;
}
/* Soft green hairline glow on top of the card */
.pace-disclaimer__card::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(49, 217, 145, 0.55) 50%, transparent 100%);
    pointer-events: none;
}
/* Inner radial glow behind the icon */
.pace-disclaimer__card::after {
    content: "";
    position: absolute;
    top: -10%; left: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(49, 217, 145, 0.10) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}

/* Decorative oversized shield sitting top-right of the card. */
.pace-disclaimer__deco {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 280px;
    height: 280px;
    opacity: 0.35;
    pointer-events: none;
    color: var(--green, #31D991);
    animation: paceShieldDrift 11s ease-in-out infinite;
}
@keyframes paceShieldDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.32; }
    50%      { transform: translate(-6px, 4px) rotate(-2deg); opacity: 0.42; }
}

/* Head column ---------------------------------------------- */
.pace-disclaimer__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.pace-disclaimer__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(49, 217, 145, 0.22) 0%, rgba(49, 217, 145, 0.06) 100%);
    border: 1px solid rgba(49, 217, 145, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green, #31D991);
    box-shadow: 0 12px 30px -12px rgba(49, 217, 145, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
    animation: paceIconBreath 3.4s ease-in-out infinite;
}
.pace-disclaimer__icon svg { width: 30px; height: 30px; }
@keyframes paceIconBreath {
    0%, 100% { transform: scale(1);    box-shadow: 0 12px 30px -12px rgba(49, 217, 145, 0.4),  inset 0 1px 0 rgba(255, 255, 255, 0.06); }
    50%      { transform: scale(1.05); box-shadow: 0 16px 40px -10px rgba(49, 217, 145, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

.pace-disclaimer__title {
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-main, #F4F7F6);
}
.pace-disclaimer__lead {
    color: var(--text-muted, #8B969C);
    font-size: 15px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}
.pace-disclaimer__pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.pace-disclaimer__pills li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: var(--text-muted, #8B969C);
    align-self: flex-start;
}
.pace-disclaimer__pills svg {
    width: 14px;
    height: 14px;
    color: var(--green, #31D991);
}

/* Body column ---------------------------------------------- */
.pace-disclaimer--card .pace-disclaimer__body {
    position: relative;
    z-index: 1;
    /* Override main.css defaults */
    margin: 0;
    max-width: none !important;
    columns: 2;
    column-gap: 40px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-muted, #8B969C);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 32px;
}
.pace-disclaimer--card .pace-disclaimer__paragraph {
    break-inside: avoid;
    margin: 0 0 14px;
    transition-delay: calc(var(--pace-step, 0) * 0.06s);
}
.pace-disclaimer--card .pace-disclaimer__paragraph:last-child { margin-bottom: 0; }
.pace-disclaimer--card .pace-disclaimer__paragraph a {
    color: var(--text-main, #F4F7F6);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(49, 217, 145, 0.4);
}
.pace-disclaimer--card .pace-disclaimer__paragraph a:hover {
    color: var(--green, #31D991);
    text-decoration-color: var(--green, #31D991);
}

/* Responsive ---------------------------------------------- */
@media (max-width: 992px) {
    .pace-disclaimer__card {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 32px 44px;
        border-radius: 24px;
    }
    .pace-disclaimer__deco {
        width: 200px; height: 200px;
        top: -18px; right: -40px;
        opacity: 0.25;
    }
    .pace-disclaimer--card .pace-disclaimer__body {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 28px;
        columns: 2;
    }
}
@media (max-width: 768px) {
    .pace-disclaimer--card { padding: 64px 0 80px !important; }
    .pace-disclaimer__card { padding: 32px 24px 36px; }
    .pace-disclaimer__icon { width: 56px; height: 56px; }
    .pace-disclaimer__icon svg { width: 26px; height: 26px; }
    .pace-disclaimer__title { font-size: 24px; }
    .pace-disclaimer--card .pace-disclaimer__body { columns: 1; }
    .pace-disclaimer__pills li { font-size: 11.5px; padding: 6px 12px; }
}

/* ============================================================
   Disclaimer card — layout v2
   Replace the 2-column (head|body) grid with a stacked layout:
   a full-width header on top (icon + eyebrow + title + lead +
   trust pills), then the disclosure body in 3 columns below.
   This kills the empty middle-zone and makes the card breathe.
   ============================================================ */
.pace-disclaimer--card .pace-disclaimer__card {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

/* Inner head row becomes its own mini grid:
   icon (col 1, spans 2 rows) + eyebrow (col 2, row 1) + title (col 2, row 2)
   then lead and pills span full width below the head row. */
.pace-disclaimer--card .pace-disclaimer__head {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 6px;
    align-items: start;
    width: 100%;
}
.pace-disclaimer--card .pace-disclaimer__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
}
.pace-disclaimer--card .pace-disclaimer__head > .pace-eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}
.pace-disclaimer--card .pace-disclaimer__title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
}
.pace-disclaimer--card .pace-disclaimer__lead {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 720px;
    margin: 6px 0 0;
}
.pace-disclaimer--card .pace-disclaimer__pills {
    grid-column: 1 / -1;
    grid-row: 4;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
}
.pace-disclaimer--card .pace-disclaimer__pills li { align-self: auto; }

/* Disclosure body now sits below the head, full width of the card,
   spread across 3 columns. The body is bordered with a soft hairline
   at the top to act as a visual separator from the head. */
.pace-disclaimer--card .pace-disclaimer__body {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 32px !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    columns: 3 !important;
    column-gap: 56px;
    column-rule: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: none !important;
}
@media (max-width: 1100px) {
    .pace-disclaimer--card .pace-disclaimer__body { columns: 2 !important; column-gap: 44px; }
}
@media (max-width: 768px) {
    .pace-disclaimer--card .pace-disclaimer__card { padding: 36px 24px 40px !important; }
    .pace-disclaimer--card .pace-disclaimer__head { grid-template-columns: auto 1fr; column-gap: 16px; }
    .pace-disclaimer--card .pace-disclaimer__icon { width: 52px; height: 52px; }
    .pace-disclaimer--card .pace-disclaimer__icon svg { width: 24px; height: 24px; }
    .pace-disclaimer--card .pace-disclaimer__title { font-size: 22px; }
    .pace-disclaimer--card .pace-disclaimer__body { columns: 1 !important; padding-top: 24px !important; }
    .pace-disclaimer__deco { width: 180px; height: 180px; top: -10px; right: -30px; opacity: 0.22; }
}

/* ============================================================
   Header — mobile layout fixes
   - Force sticky on every viewport (some hosts ship body { overflow: hidden }
     which kills position:sticky — switch to fixed on mobile to be safe).
   - Burger sits on the far right (flex order + margin-left:auto).
   - Hide desktop CTA on mobile; place a wide CTA inside the menu.
   - Mobile menu becomes an overlay (position:absolute below the header)
     so it never pushes the page content down.
   - wp_nav_menu output is rendered as a vertical stack regardless of
     whatever wrapper classes WordPress decides to emit.
   ============================================================ */
.pace-header,
.site-header.pace-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
}
/* In case a parent has overflow that breaks sticky, also give the
   header a dedicated stacking context. */
.page-wrapper.pace-page { overflow: visible; }

/* Burger has higher z-index than the menu it controls. */
.pace-nav-toggle { z-index: 51; }

/* When the toggle is active, transform the lines into an X. */
.pace-nav-toggle.is-active .nav-toggle__line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.pace-nav-toggle.is-active .nav-toggle__line:nth-child(2) { opacity: 0; }
.pace-nav-toggle.is-active .nav-toggle__line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.pace-nav-toggle .nav-toggle__line { transition: transform .25s ease, opacity .25s ease; transform-origin: center; }

@media (max-width: 992px) {
    /* Make sure header on mobile stays at the very top while scrolling. */
    .pace-header {
        position: sticky !important;
        top: 0 !important;
        background: rgba(7, 16, 21, 0.92);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    /* Add stacking context so the absolute-positioned dropdown anchors here. */
    .pace-header .container,
    .pace-header__inner { position: relative; }

    /* Hide the desktop-position CTA on mobile entirely — the menu has its own. */
    .pace-header__inner > .pace-header__cta,
    .pace-header .site-header__cta:not(.pace-header__cta--mobile) {
        display: none !important;
    }

    /* Layout: logo on the left, burger on the right. */
    .pace-header__inner {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .pace-header__logo { order: 1; }
    .pace-header__nav.nav-primary--desktop { display: none !important; }
    .pace-nav-toggle {
        order: 99;
        margin-left: auto;
        display: flex !important;
    }

    /* Mobile menu as an overlay anchored to the header bottom. */
    .pace-header__mobile {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 49;
        display: none;
        padding: 22px 28px 26px;
        background: rgba(7, 16, 21, 0.97);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .pace-header__mobile.is-open { display: block; }

    /* Make every list inside the mobile menu render as a vertical stack
       regardless of which wp_nav_menu wrapper class WP outputs. */
    .pace-header__mobile ul,
    .pace-header__mobile .pace-header__menu,
    .pace-header__mobile .site-header__menu,
    .pace-header__mobile .menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        list-style: none !important;
        margin: 0 0 18px;
        padding: 0;
    }
    .pace-header__mobile li {
        list-style: none !important;
        margin: 0;
    }
    .pace-header__mobile a {
        display: block;
        color: var(--text-main, #F4F7F6) !important;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-decoration: none;
    }
    .pace-header__mobile a:hover,
    .pace-header__mobile a:focus { color: var(--green, #31D991) !important; }
    .pace-header__mobile a::after { display: none; } /* kill desktop underline pseudo */
    .pace-header__mobile li:last-child a { border-bottom: 0; }

    /* CTA inside the mobile menu — full width pill */
    .pace-header__cta--mobile {
        display: inline-flex !important;
        justify-content: center;
        width: 100%;
        margin-top: 14px;
        padding: 14px 22px !important;
        background: var(--green, #31D991) !important;
        color: #06141B !important;
        border-radius: 999px !important;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
    }
}

/* iOS Safari sometimes ignores position:sticky inside transformed parents.
   Provide a non-sticky fallback for very small screens that uses position:fixed
   with a body padding so the header still doesn't overlap initial content. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 560px) {
        .pace-header { position: sticky !important; top: 0 !important; }
    }
}

/* When the mobile nav is open, fade the toggle background a bit for visual feedback. */
.pace-nav-toggle.is-active {
    background: rgba(49, 217, 145, 0.16);
    border-color: rgba(49, 217, 145, 0.35);
}

/* ============================================================
   Width fixes — disclaimer card + FAQ grid stretch to the full
   container width (1360px) instead of being capped narrower.
   ============================================================ */
.pace-disclaimer--card .pace-disclaimer__card {
    max-width: none !important;
    width: 100%;
}
.pace-faq__grid {
    max-width: none !important;
    width: 100%;
}

/* ============================================================
   Simple Page template — Terms of Use, Privacy Policy, etc.
   Markup (from template/template-simple.php):
     <div class="page-content page-content--simple">
       <section class="simple-hero">
         <div class="simple-hero__inner">
           <p class="simple-hero__info">EYEBROW</p>
           <h1 class="simple-hero__title">TITLE</h1>
           <p class="simple-hero__date">DATE</p>
         </div>
       </section>
       <div class="container">
         <div class="simple-content">
           <div class="simple-content__body entry-content">CONTENT</div>
         </div>
       </div>
     </div>
   ============================================================ */

.page-content--simple {
    background: var(--bg-main, #071015);
    padding-bottom: 100px;
}

/* -- Hero ----------------------------------------------------- */
.simple-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
    background:
        radial-gradient(60% 70% at 20% 30%, rgba(49, 217, 145, 0.10) 0%, transparent 70%),
        radial-gradient(60% 60% at 100% 0%, rgba(108, 168, 255, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, var(--bg-main, #071015) 0%, var(--bg-section, #0B151C) 100%);
    border-bottom: 1px solid var(--line-softer, rgba(255, 255, 255, 0.06));
}
/* Subtle decorative grid behind the hero */
.simple-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
    pointer-events: none;
    opacity: 0.6;
}
/* Animated green hairline at the bottom edge of the hero */
.simple-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(80%, 1100px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(49, 217, 145, 0.5) 50%,
        transparent 100%);
    opacity: 0;
    animation: simpleHeroLine 1.6s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}
@keyframes simpleHeroLine {
    0%   { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* Re-use container max-width/padding logic for the hero inner */
.simple-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container, 1360px);
    margin: 0 auto;
    padding: 0 32px;
}
.simple-hero__info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green, #31D991);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 22px;
    padding: 8px 14px 8px 8px;
    background: rgba(49, 217, 145, 0.08);
    border: 1px solid rgba(49, 217, 145, 0.22);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(10px);
    animation: simpleHeroFade .7s ease-out .15s forwards;
}
.simple-hero__info::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 10px var(--green, #31D991);
    animation: pacePulse 2.4s ease-in-out infinite;
}
.simple-hero__title {
    font-size: clamp(38px, 5.4vw, 72px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--text-main, #F4F7F6);
    margin: 0 0 22px;
    max-width: 18ch;
    opacity: 0;
    transform: translateY(14px);
    animation: simpleHeroFade .9s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
.simple-hero__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 22px;
    background: linear-gradient(90deg, var(--green, #31D991) 0%, rgba(49, 217, 145, 0.2) 100%);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: simpleHeroBar 1.1s cubic-bezier(.22, 1, .36, 1) .55s forwards;
}
.simple-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted, #8B969C);
    font-size: 14px;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: simpleHeroFade .8s ease-out .45s forwards;
}
.simple-hero__date::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--text-dim, #5F6B72);
    border-radius: 50%;
}

@keyframes simpleHeroFade { to { opacity: 1; transform: translateY(0); } }
@keyframes simpleHeroBar  { to { transform: scaleX(1); } }

/* -- Content -------------------------------------------------- */
.simple-content {
    padding: 80px 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
@media (min-width: 1100px) {
    .simple-content { grid-template-columns: 280px minmax(0, 1fr); column-gap: 64px; }
    .simple-content::before {
        content: "";
        grid-column: 1;
        align-self: start;
        position: sticky;
        top: 110px;
        width: 100%;
        height: 1px;
        background: linear-gradient(180deg, var(--green, #31D991) 0%, transparent 100%);
        opacity: 0.4;
    }
}

.simple-content__body {
    max-width: 820px;
    color: var(--text-main, #F4F7F6);
    font-size: 16px;
    line-height: 1.85;
}
@media (min-width: 1100px) {
    .simple-content__body { grid-column: 2; }
}

/* Spacing between paragraphs and other blocks */
.simple-content__body > * + * { margin-top: 18px; }
.simple-content__body p {
    color: var(--text-main, #F4F7F6);
    margin: 0;
}
.simple-content__body p + p { margin-top: 18px; }

/* Headings */
.simple-content__body h1,
.simple-content__body h2,
.simple-content__body h3,
.simple-content__body h4 {
    color: var(--text-main, #F4F7F6);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.simple-content__body h2 {
    font-size: clamp(24px, 2.6vw, 32px);
    margin-top: 56px;
    margin-bottom: 6px;
    padding-left: 18px;
    position: relative;
}
.simple-content__body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--green, #31D991) 0%, rgba(49, 217, 145, 0.2) 100%);
}
.simple-content__body h3 {
    font-size: clamp(19px, 2vw, 22px);
    margin-top: 40px;
    margin-bottom: 4px;
    color: var(--text-main, #F4F7F6);
}
.simple-content__body h4 {
    font-size: 17px;
    margin-top: 32px;
    margin-bottom: 4px;
    color: var(--green, #31D991);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Links */
.simple-content__body a {
    color: var(--green, #31D991);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(49, 217, 145, 0.45);
    transition: color .2s ease, text-decoration-color .2s ease;
}
.simple-content__body a:hover {
    color: var(--green-bright, #2EE3A0);
    text-decoration-color: var(--green-bright, #2EE3A0);
}

/* Lists — both bulleted and numbered get a nice Pace look */
.simple-content__body ul,
.simple-content__body ol {
    margin: 18px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.simple-content__body ul li,
.simple-content__body ol li {
    position: relative;
    padding-left: 30px;
    color: var(--text-main, #F4F7F6);
    line-height: 1.7;
}
.simple-content__body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 12px rgba(49, 217, 145, 0.4);
}
.simple-content__body ol { counter-reset: simple-list; }
.simple-content__body ol li { counter-increment: simple-list; }
.simple-content__body ol li::before {
    content: counter(simple-list, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green, #31D991);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 6px;
}
.simple-content__body ul ul,
.simple-content__body ol ol,
.simple-content__body ul ol,
.simple-content__body ol ul {
    margin: 8px 0 8px 0;
    padding-left: 12px;
}
.simple-content__body ul ul li::before {
    background: transparent;
    border: 1.5px solid var(--green, #31D991);
    box-shadow: none;
    width: 7px; height: 7px;
}

/* Blockquote */
.simple-content__body blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    background: rgba(49, 217, 145, 0.06);
    border-left: 3px solid var(--green, #31D991);
    border-radius: 0 14px 14px 0;
    color: var(--text-main, #F4F7F6);
    font-style: italic;
    font-size: 17px;
    line-height: 1.65;
}
.simple-content__body blockquote p { margin: 0; }
.simple-content__body blockquote p + p { margin-top: 10px; }

/* Inline + block code */
.simple-content__body code {
    font-family: var(--font-mono, "SF Mono", Menlo, monospace);
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--green, #31D991);
}
.simple-content__body pre {
    margin: 24px 0;
    background: var(--bg-section, #0B151C);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 18px 22px;
    overflow-x: auto;
    color: var(--text-main, #F4F7F6);
    font-family: var(--font-mono, "SF Mono", Menlo, monospace);
    font-size: 14px;
    line-height: 1.65;
}
.simple-content__body pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Tables */
.simple-content__body table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    overflow: hidden;
}
.simple-content__body thead { background: rgba(255, 255, 255, 0.03); }
.simple-content__body th,
.simple-content__body td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line-softer, rgba(255, 255, 255, 0.06));
    font-size: 14px;
}
.simple-content__body th { color: var(--text-muted, #8B969C); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.simple-content__body tr:last-child td { border-bottom: 0; }

/* Horizontal rule */
.simple-content__body hr {
    border: 0;
    height: 1px;
    margin: 40px 0;
    background: linear-gradient(90deg, transparent 0%, var(--line-soft, rgba(255, 255, 255, 0.12)) 50%, transparent 100%);
}

/* Images and figures */
.simple-content__body img,
.simple-content__body figure {
    margin: 28px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    max-width: 100%;
}
.simple-content__body figcaption {
    margin-top: 12px;
    color: var(--text-muted, #8B969C);
    font-size: 13px;
    text-align: center;
}

/* Strong / em */
.simple-content__body strong { color: var(--text-main, #F4F7F6); font-weight: 700; }
.simple-content__body em { color: var(--green, #31D991); font-style: normal; }

/* Reveal — each direct paragraph & heading inside the body fades in
   sequentially when its scroll-row enters the viewport. Pure CSS via
   animation-delay; no JS required. */
.simple-content__body > * {
    animation: simpleContentFade .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--pace-step, 0) * 0.04s + 0.5s);
}
@keyframes simpleContentFade {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .simple-hero__info,
    .simple-hero__title,
    .simple-hero__date,
    .simple-hero__title::after,
    .simple-hero::after,
    .simple-content__body > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .simple-hero { padding: 72px 0 56px; }
    .simple-hero__title { font-size: clamp(32px, 9vw, 44px); margin-bottom: 18px; }
    .simple-hero__title::after { margin-top: 16px; width: 48px; height: 3px; }
    .simple-hero__info { font-size: 11px; margin-bottom: 18px; }
    .simple-content { padding: 48px 0 24px; }
    .simple-content__body { font-size: 15px; line-height: 1.8; }
    .simple-content__body h2 { margin-top: 40px; padding-left: 14px; }
    .simple-content__body h2::before { width: 2px; }
    .page-content--simple { padding-bottom: 60px; }
}

/* ============================================================
   Simple Page — kill the empty sidebar column.
   The previous 2-col layout left a stray green hairline in an
   empty 280px column. Switch to a single-column layout that
   centers the prose at a comfortable reading width.
   ============================================================ */
.simple-content {
    display: block !important;
    padding: 80px 0 40px;
    column-gap: 0;
}
.simple-content::before { content: none !important; }
.simple-content__body {
    grid-column: auto !important;
    margin: 0 auto;
    max-width: 820px;
}
@media (min-width: 1100px) {
    .simple-content { grid-template-columns: none !important; }
    .simple-content__body { grid-column: auto !important; margin: 0 auto; }
}

/* ============================================================
   Simple-page TOC — auto-built sidebar.
   Markup (injected by pace-extra.js):
     <div class="simple-content simple-content--has-toc">
       <aside class="simple-toc">
         <h2 class="simple-toc__title">On this page</h2>
         <ul class="simple-toc__list">
           <li class="simple-toc__item">
             <a class="simple-toc__link" href="#...">
               <span class="simple-toc__num">01</span>
               <span class="simple-toc__text">...</span>
             </a>
           </li>
         </ul>
         <div class="simple-toc__progress"><span class="simple-toc__progress-bar"></span></div>
       </aside>
       <div class="simple-content__body">...</div>
     </div>
   ============================================================ */

/* Re-enable the two-column layout (sidebar + body) when the JS adds
   --has-toc; otherwise stays single-column from the previous override. */
@media (min-width: 1100px) {
    .simple-content.simple-content--has-toc {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 72px;
        align-items: start;
    }
    .simple-content.simple-content--has-toc .simple-content__body {
        grid-column: 2;
        margin: 0;
        max-width: 860px;
    }
}

/* Sidebar container — sticky on desktop, inline on mobile */
.simple-toc {
    display: none;
}
@media (min-width: 1100px) {
    .simple-toc {
        display: block;
        position: sticky;
        top: 110px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        padding-right: 12px;
        grid-column: 1;
    }
    /* Native-feeling thin scrollbar inside the sidebar */
    .simple-toc::-webkit-scrollbar { width: 6px; }
    .simple-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
    .simple-toc::-webkit-scrollbar-track { background: transparent; }
}

.simple-toc__title {
    margin: 0 0 18px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--green, #31D991);
    font-weight: 600;
    padding-left: 16px;
    position: relative;
}
.simple-toc__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 12px rgba(49, 217, 145, 0.6);
}

/* Vertical track that the active marker glides along */
.simple-toc__list {
    position: relative;
    list-style: none;
    margin: 0 0 24px;
    padding: 0 0 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.simple-toc__item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.simple-toc__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 10px 9px 0;
    color: var(--text-muted, #8B969C);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
    position: relative;
}
.simple-toc__link::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 18px;
    border-radius: 999px;
    background: var(--green, #31D991);
    box-shadow: 0 0 10px rgba(49, 217, 145, 0.6);
    transform-origin: center;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
    opacity: 0;
}
.simple-toc__link:hover {
    color: var(--text-main, #F4F7F6);
    transform: translateX(2px);
}
.simple-toc__link.is-active {
    color: var(--text-main, #F4F7F6);
}
.simple-toc__link.is-active::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}
.simple-toc__num {
    flex: 0 0 24px;
    font-family: var(--font-mono, "SF Mono", Menlo, monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim, #5F6B72);
    letter-spacing: 0.06em;
    padding-top: 2px;
    transition: color .2s ease;
}
.simple-toc__link.is-active .simple-toc__num,
.simple-toc__link:hover .simple-toc__num {
    color: var(--green, #31D991);
}
.simple-toc__text {
    flex: 1;
    overflow-wrap: anywhere;
}

/* Reading-progress thin bar at the bottom of the sidebar */
.simple-toc__progress {
    position: relative;
    width: 2px;
    height: 80px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin: 16px 0 0 16px;
    overflow: hidden;
}
.simple-toc__progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--green, #31D991) 0%, rgba(49, 217, 145, 0.3) 100%);
    box-shadow: 0 0 12px rgba(49, 217, 145, 0.5);
    border-radius: 999px;
    transition: height .15s linear;
}

/* Make sure the h2 anchors land below the sticky header on jump */
.simple-content__body h2 {
    scroll-margin-top: 100px;
}

/* On smaller screens we surface the TOC as a "collapsed" inline
   summary at the top of the article so it's still useful. */
@media (max-width: 1099px) {
    .simple-content.simple-content--has-toc { display: block !important; }
    .simple-toc {
        display: block;
        position: static;
        max-height: none;
        margin: 0 0 32px;
        padding: 18px 18px 20px;
        background: var(--card-bg, rgba(14, 26, 34, 0.78));
        border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
        border-radius: 16px;
    }
    .simple-toc__progress { display: none; }
    .simple-toc__list { border-left: 0; padding-left: 0; }
    .simple-toc__item { border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
    .simple-toc__item:last-child { border-bottom: 0; }
    .simple-toc__link::before { display: none; }
    .simple-toc__link.is-active { color: var(--green, #31D991); }
}

/* ============================================================
   Simple-page TOC — specificity fix
   The earlier "remove empty sidebar" override forced
   .simple-content { display: block !important } and
   .simple-content { grid-template-columns: none !important },
   which kept overriding the new TOC grid layout.  We re-apply
   the grid only when the JS marks the wrapper as --has-toc,
   and we use !important so we always win.
   ============================================================ */

/* No-TOC case: explicit block layout for centred prose. */
.simple-content:not(.simple-content--has-toc) {
    display: block !important;
}
.simple-content:not(.simple-content--has-toc) .simple-content__body {
    grid-column: auto !important;
    margin: 0 auto !important;
    max-width: 820px !important;
}

/* TOC case: 2-column grid (sidebar + content) on wide screens. */
@media (min-width: 1100px) {
    .simple-content.simple-content--has-toc {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) !important;
        column-gap: 72px !important;
        align-items: start;
    }
    .simple-content.simple-content--has-toc .simple-toc {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .simple-content.simple-content--has-toc .simple-content__body {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        max-width: 860px !important;
    }
}

/* TOC case on smaller screens: inline summary card above the body. */
@media (max-width: 1099px) {
    .simple-content.simple-content--has-toc {
        display: block !important;
    }
    .simple-content.simple-content--has-toc .simple-content__body {
        grid-column: auto !important;
        margin: 0 auto !important;
        max-width: 820px !important;
    }
}

/* ============================================================
   Simple-page TOC — mobile collapsible behaviour.
   Title becomes a tappable header with a chevron; the list
   collapses by default and animates open when `.is-open` is
   added to the .simple-toc container by pace-extra.js.
   On desktop (>= 1100px) we explicitly reset everything so the
   sidebar always stays expanded.
   ============================================================ */

@media (max-width: 1099px) {
    .simple-toc {
        padding: 4px 4px 4px 4px !important; /* override desktop padding */
    }
    .simple-toc__title {
        cursor: pointer;
        user-select: none;
        margin: 0 !important;
        padding: 16px 44px 16px 38px !important;
        position: relative;
        font-size: 11px;
        letter-spacing: 0.22em;
        border-radius: 16px;
        transition: background .2s ease;
    }
    .simple-toc__title::before {
        /* Move the existing green dot inside the tappable header */
        left: 18px !important;
    }
    .simple-toc__title::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 1.6px solid var(--text-muted, #8B969C);
        border-bottom: 1.6px solid var(--text-muted, #8B969C);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .2s ease;
    }
    .simple-toc__title:hover { background: rgba(255, 255, 255, 0.03); }
    .simple-toc__title:hover::after { border-color: var(--green, #31D991); }

    /* Open state — flip the chevron */
    .simple-toc.is-open .simple-toc__title::after {
        transform: translateY(-30%) rotate(-135deg);
        border-color: var(--green, #31D991);
    }

    /* Collapsed list by default */
    .simple-toc__list {
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: max-height .45s cubic-bezier(.22, 1, .36, 1), margin .3s ease, padding .3s ease;
    }
    .simple-toc.is-open .simple-toc__list {
        max-height: var(--simple-toc-max, 2000px) !important;
        margin: 0 0 6px !important;
        padding: 6px 12px 6px 12px !important;
    }
}

/* On desktop ensure list is always visible — defeat any leftover collapse styles. */
@media (min-width: 1100px) {
    .simple-toc__list {
        max-height: none !important;
        overflow: visible !important;
    }
    .simple-toc__title {
        cursor: default;
        pointer-events: none;
    }
    .simple-toc__title::after { display: none; }
}

/* ============================================================
   Mobile spacing — tighter sections on the home page,
   smaller padding on simple (Terms/Privacy) pages.
   ============================================================ */

/* Home page sections at <=992px */
@media (max-width: 992px) {
    :root { --space-section: 64px; }
    .pace-hero          { padding: 32px 0 56px !important; }
    .pace-split         { padding: var(--space-section) 0 !important; }
    .pace-receipt       { padding: var(--space-section) 0 !important; }
    .pace-features      { padding: var(--space-section) 0 !important; }
    .pace-journal       { padding: var(--space-section) 0 !important; }
    .pace-faq           { padding: var(--space-section) 0 !important; }
    .pace-disclaimer--card { padding: var(--space-section) 0 !important; }
    .pace-final         { padding: var(--space-section) 0 56px !important; }

    .pace-section-head  { margin-bottom: 36px !important; }
    .pace-receipt__grid,
    .pace-split__grid   { gap: 16px !important; }
}

/* Further tightening at <=768px */
@media (max-width: 768px) {
    :root { --space-section: 48px; }
    .pace-hero          { padding: 24px 0 40px !important; }
    .pace-final         { padding: var(--space-section) 0 40px !important; }
    .pace-section-head  { margin-bottom: 28px !important; gap: 12px; }

    /* Less internal padding on card-style sections */
    .pace-split__panel  { padding: 22px 18px 20px !important; min-height: 280px !important; }
    .pace-receipt__card { padding: 20px 18px 18px !important; }
    .pace-weekly        { padding: 20px 18px 16px !important; }
    .pace-feature       { padding: 22px 18px 20px !important; min-height: 180px !important; }
    .pace-faq__question { padding: 16px 18px !important; font-size: 15px !important; }
    .pace-faq__answer-inner { padding: 0 18px 18px !important; }
    .pace-summary       { padding: 22px 18px 18px !important; }

    /* Disclaimer card breathes less on small screens */
    .pace-disclaimer__card { padding: 28px 20px 32px !important; gap: 24px !important; }
    .pace-disclaimer__head { column-gap: 14px !important; }
    .pace-disclaimer__body { padding-top: 22px !important; }

    /* Final CTA stacks tighter */
    .pace-final__container { gap: 24px !important; }
    .pace-final__title     { margin: 10px 0 14px !important; }
    .pace-final__text      { font-size: 15px !important; }
    .pace-final__trust     { gap: 12px !important; margin-top: 16px !important; }

    /* Footer compresses */
    .pace-footer          { padding: 40px 0 24px !important; }
    .pace-footer__top     { padding-bottom: 24px !important; gap: 24px !important; }
    .pace-footer__bottom  { padding-top: 18px !important; }
}

@media (max-width: 560px) {
    :root { --space-section: 40px; }
    .container            { padding: 0 16px !important; }
    .pace-hero            { padding: 16px 0 32px !important; }
    .pace-section-title   { font-size: clamp(24px, 7vw, 30px) !important; }
}

/* ============================================================
   Simple page (Terms / Privacy / ...) — tighter padding
   everywhere so legal pages don't feel like deserts.
   ============================================================ */

/* Desktop — reduce default huge hero+content padding */
.simple-hero       { padding: 72px 0 56px !important; }
.simple-content    { padding: 48px 0 32px !important; }
.page-content--simple { padding-bottom: 64px !important; }

@media (max-width: 992px) {
    .simple-hero       { padding: 56px 0 40px !important; }
    .simple-content    { padding: 32px 0 24px !important; }
    .simple-hero__inner { padding: 0 24px !important; }
    .simple-hero__title { font-size: clamp(30px, 8vw, 44px) !important; margin-bottom: 16px !important; }
    .simple-hero__title::after { margin-top: 14px !important; width: 44px !important; height: 3px !important; }
    .simple-hero__info  { font-size: 11px !important; margin-bottom: 16px !important; padding: 7px 12px 7px 8px !important; }
    .page-content--simple { padding-bottom: 40px !important; }
}

@media (max-width: 768px) {
    .simple-hero       { padding: 44px 0 32px !important; }
    .simple-content    { padding: 24px 0 16px !important; }
    .simple-hero__inner { padding: 0 16px !important; }
    .simple-hero__title { font-size: clamp(26px, 8vw, 36px) !important; margin-bottom: 14px !important; }
    .simple-hero__title::after { margin-top: 12px !important; width: 36px !important; height: 3px !important; }
    .simple-content__body { font-size: 15px !important; line-height: 1.75 !important; }
    .simple-content__body h2 { margin-top: 32px !important; font-size: 22px !important; padding-left: 12px !important; }
    .simple-content__body h3 { margin-top: 24px !important; font-size: 18px !important; }
    .simple-content__body p + p { margin-top: 14px !important; }
    .simple-content__body ul,
    .simple-content__body ol { margin: 14px 0 !important; gap: 8px !important; }
    .page-content--simple { padding-bottom: 32px !important; }
}

@media (max-width: 560px) {
    .simple-hero       { padding: 36px 0 28px !important; }
    .simple-content__body { font-size: 14.5px !important; }
    .simple-content__body h2 { font-size: 20px !important; margin-top: 26px !important; }
    .simple-content__body h2::before { width: 2px !important; }
}

/* ============================================================
   Simple-page TOC — horizontal progress bar.
   The original implementation drew a vertical bar; flip it so
   the reading-progress runs along a thin horizontal track at
   the bottom of the sidebar. Width is driven by JS; height is
   forced to 100% !important so that the previous JS writing
   inline `style.height = "...%"` becomes a no-op.
   ============================================================ */
.simple-toc__progress {
    position: relative !important;
    width: 100% !important;
    height: 3px !important;
    margin: 22px 0 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.simple-toc__progress-bar {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 0%;
    height: 100% !important;
    background: linear-gradient(90deg, var(--green, #31D991) 0%, rgba(49, 217, 145, 0.3) 100%) !important;
    box-shadow: 0 0 12px rgba(49, 217, 145, 0.5) !important;
    border-radius: 999px !important;
    transition: width .2s linear !important;
}

/* ============================================================
   Body fills the rest of the container when the TOC is present.
   The previous max-width:860px capped it at 860px; remove the cap.
   ============================================================ */
@media (min-width: 1100px) {
    .simple-content.simple-content--has-toc .simple-content__body {
        max-width: none !important;
        width: 100% !important;
    }
}

/* ============================================================
   Single post — tables.
   Gutenberg block-tables and TinyMCE tables ship with default
   colours that look like black text on a light header — broken
   against our dark theme. Force white text and Pace styling.
   ============================================================ */
.single-post__content table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 14px;
    overflow: hidden;
    color: var(--text-main, #F4F7F6) !important;
    font-size: 15px;
}
.single-post__content table,
.single-post__content thead,
.single-post__content tbody,
.single-post__content tfoot,
.single-post__content tr,
.single-post__content th,
.single-post__content td {
    color: var(--text-main, #F4F7F6) !important;
    border-color: var(--line-softer, rgba(255, 255, 255, 0.06)) !important;
}
.single-post__content thead,
.single-post__content thead tr,
.single-post__content thead th {
    background: rgba(255, 255, 255, 0.05) !important;
}
.single-post__content th {
    font-weight: 600;
    padding: 14px 18px;
    text-align: left;
    letter-spacing: 0.01em;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--text-muted, #8B969C) !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
}
.single-post__content thead th {
    color: var(--text-main, #F4F7F6) !important;
    font-size: 14px;
    text-transform: none;
}
.single-post__content td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-softer, rgba(255, 255, 255, 0.06)) !important;
    vertical-align: top;
}
.single-post__content tbody tr:last-child td { border-bottom: 0 !important; }
.single-post__content tbody tr:hover {
    background: rgba(49, 217, 145, 0.04);
}
.single-post__content td strong,
.single-post__content th strong {
    color: var(--text-main, #F4F7F6) !important;
    font-weight: 700;
}
/* Gutenberg's wp-block-table wrapper */
.single-post__content .wp-block-table,
.single-post__content .wp-block-table table,
.single-post__content figure.wp-block-table {
    background: transparent !important;
    border: 0 !important;
    margin: 28px 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}
.single-post__content .wp-block-table table {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 14px;
    overflow: hidden;
}
.single-post__content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025) !important;
}
.single-post__content .wp-block-table figcaption {
    color: var(--text-muted, #8B969C) !important;
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
}

/* Same fix for the simple-page body, since users can also drop a
   Gutenberg table into a Terms / Privacy page. */
.simple-content__body table,
.simple-content__body thead,
.simple-content__body tbody,
.simple-content__body tfoot,
.simple-content__body tr,
.simple-content__body th,
.simple-content__body td {
    color: var(--text-main, #F4F7F6) !important;
}
.simple-content__body thead,
.simple-content__body thead tr,
.simple-content__body thead th {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   Single-post tables — aggressive white-text override.
   Defeats Gutenberg "has-text-color", inline `style="color:..."`,
   and any other source that paints table cell text dark on our
   dark theme. Specificity bumped via `html body` chain so we
   beat any selector except inline `!important`.
   ============================================================ */
html body .single-post__content table,
html body .single-post__content table *,
html body .single-post__content .wp-block-table,
html body .single-post__content .wp-block-table *,
html body .single-post__content figure.wp-block-table table,
html body .single-post__content figure.wp-block-table table * {
    color: var(--text-main, #F4F7F6) !important;
}

/* Neutralise Gutenberg colour classes inside post tables */
html body .single-post__content table .has-text-color,
html body .single-post__content table [class*="has-"][class*="-color"],
html body .single-post__content .wp-block-table .has-text-color,
html body .single-post__content .wp-block-table [class*="has-"][class*="-color"] {
    color: var(--text-main, #F4F7F6) !important;
}

/* Header row — green band with dark text (matches the site's
   on-green button colour). Wins over the white-text-everywhere
   rule above via greater specificity (chain includes thead). */
html body .single-post__content table thead,
html body .single-post__content table thead tr,
html body .single-post__content table thead th,
html body .single-post__content .wp-block-table thead,
html body .single-post__content .wp-block-table thead tr,
html body .single-post__content .wp-block-table thead th,
html body .simple-content__body table thead,
html body .simple-content__body table thead tr,
html body .simple-content__body table thead th {
    background: var(--green, #31D991) !important;
    color: #06141B !important;
    border-color: rgba(7, 16, 21, 0.18) !important;
    text-shadow: none !important;
}

/* Anything nested inside the green header (strong / em / a /
   has-text-color classes from Gutenberg) also needs the dark
   colour so it doesn't inherit the white-everywhere override. */
html body .single-post__content table thead th *,
html body .single-post__content .wp-block-table thead th *,
html body .simple-content__body table thead th * {
    color: #06141B !important;
}
html body .single-post__content table thead th a,
html body .single-post__content .wp-block-table thead th a,
html body .simple-content__body table thead th a {
    color: #06141B !important;
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Tables WITHOUT a <thead>.
   The classic editor / Gutenberg often emit the markup as
   <table><tbody><tr><td>Header</td>…</tr><tr>…</tr></tbody></table>
   with the first row carrying inline `background-color:#e6e6e6;
   font-weight:bold` to fake a header. Two fixes:
     1. Wipe out any user-set inline bg on cells (white-on-grey
        becomes white-on-dark, which we don't want).
     2. Treat the first row of <tbody> as the header when there's
        no real <thead> in the table.
   ------------------------------------------------------------ */

/* 1. Force-clear inline cell background colours from the editor */
html body .single-post__content table td,
html body .single-post__content table th,
html body .single-post__content .wp-block-table td,
html body .single-post__content .wp-block-table th,
html body .simple-content__body table td,
html body .simple-content__body table th {
    background-color: transparent !important;
}

/* 2. Treat first tbody row as header when no <thead> is present */
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > th,
html body .single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td,
html body .single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > th {
    background-color: var(--green, #31D991) !important;
    color: #06141B !important;
    font-weight: 700 !important;
    border-color: rgba(7, 16, 21, 0.18) !important;
    text-shadow: none !important;
}

/* Any nested element inside the header row must also go dark */
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td *,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > th *,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td *,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > th * {
    color: #06141B !important;
}

/* Strong / em inside body cells should still be white */
html body .single-post__content table tbody strong,
html body .single-post__content table tbody b,
html body .single-post__content table tbody em,
html body .single-post__content table tbody i,
html body .single-post__content table tbody a {
    color: var(--text-main, #F4F7F6) !important;
}
html body .single-post__content table tbody a {
    text-decoration: underline;
}

/* In thead-less tables the rule above would also paint the green
   header row's <strong> elements white — bring them back to dark. */
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td strong,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td b,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td em,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td i,
html body .single-post__content table:not(:has(thead)) > tbody > tr:first-child > td a,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td strong,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td b,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td em,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td i,
html body .simple-content__body table:not(:has(thead)) > tbody > tr:first-child > td a {
    color: #06141B !important;
}

/* ============================================================
   Contact Form 7 — error / sent state polish.
   The default state (clean dark pill) is untouched. Only when
   CF7 marks the form as `[data-status="invalid"|"failed"|"mail_failed"|"sent"]`
   do we:
     * hide the inline "Please fill out this field" tip
       (the response-output already explains the error),
     * soften the pill from a 999px oval into a 28px rounded card
       so the response-output sits cleanly at the bottom,
     * render the response-output flush with the form's background
       (no extra card-in-card), with a coloured top divider and a
       small icon for clarity,
     * accent the form border with the matching colour.
   ============================================================ */

/* 1. Hide CF7's inline tip — the response-output below already says
      "One or more fields have an error". Keeping both is noisy and
      breaks the inline input/submit row. */
.pace-hero__form .wpcf7-not-valid-tip,
.pace-final__form .wpcf7-not-valid-tip,
.contact__form .wpcf7-not-valid-tip {
    display: none !important;
}

/* 2. Pill → rounded card when the form has a status (error or sent).
      Keeps the default 999px pill while idle. */
.pace-hero__form .wpcf7-form[data-status="invalid"],
.pace-hero__form .wpcf7-form[data-status="failed"],
.pace-hero__form .wpcf7-form[data-status="mail_failed"],
.pace-hero__form .wpcf7-form[data-status="sent"],
.pace-final__form .wpcf7-form[data-status="invalid"],
.pace-final__form .wpcf7-form[data-status="failed"],
.pace-final__form .wpcf7-form[data-status="mail_failed"],
.pace-final__form .wpcf7-form[data-status="sent"],
.contact__form .wpcf7-form[data-status="invalid"],
.contact__form .wpcf7-form[data-status="failed"],
.contact__form .wpcf7-form[data-status="mail_failed"],
.contact__form .wpcf7-form[data-status="sent"] {
    border-radius: 28px !important;
}

/* 3. Error accent on the pill border + soft red halo */
.pace-hero__form .wpcf7-form[data-status="invalid"],
.pace-hero__form .wpcf7-form[data-status="failed"],
.pace-hero__form .wpcf7-form[data-status="mail_failed"],
.pace-final__form .wpcf7-form[data-status="invalid"],
.pace-final__form .wpcf7-form[data-status="failed"],
.pace-final__form .wpcf7-form[data-status="mail_failed"],
.contact__form .wpcf7-form[data-status="invalid"],
.contact__form .wpcf7-form[data-status="failed"],
.contact__form .wpcf7-form[data-status="mail_failed"] {
    border-color: rgba(255, 122, 69, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.10),
                0 30px 60px -30px rgba(0, 0, 0, 0.6) !important;
}

/* 4. Sent accent on the pill border + green halo */
.pace-hero__form .wpcf7-form[data-status="sent"],
.pace-final__form .wpcf7-form[data-status="sent"],
.contact__form .wpcf7-form[data-status="sent"] {
    border-color: rgba(49, 217, 145, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(49, 217, 145, 0.10),
                0 30px 60px -30px rgba(0, 0, 0, 0.6) !important;
}

/* 5. Response output — clean inline alert (no card-in-card). */
.pace-hero__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="sent"] .wpcf7-response-output {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 10px 2px !important;
    padding: 10px 14px 6px !important;
    font-size: 13px !important;
    line-height: 1.4;
    animation: paceFormStatusIn .25s ease both;
}

/* 6. Red top divider for error states */
.pace-hero__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-hero__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output {
    border-top: 1px solid rgba(255, 122, 69, 0.20) !important;
    color: #FF7A45 !important;
}

/* 7. Green top divider for sent state */
.pace-hero__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.pace-final__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
.contact__form .wpcf7-form[data-status="sent"] .wpcf7-response-output {
    border-top: 1px solid rgba(49, 217, 145, 0.22) !important;
    color: #31D991 !important;
}

/* 8. Small circular icon before the response message */
.pace-hero__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output::before,
.pace-hero__form .wpcf7-form[data-status="failed"] .wpcf7-response-output::before,
.pace-hero__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output::before,
.pace-final__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output::before,
.pace-final__form .wpcf7-form[data-status="failed"] .wpcf7-response-output::before,
.pace-final__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output::before,
.contact__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output::before,
.contact__form .wpcf7-form[data-status="failed"] .wpcf7-response-output::before,
.contact__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 122, 69, 0.18);
    color: #FF7A45;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pace-hero__form .wpcf7-form[data-status="sent"] .wpcf7-response-output::before,
.pace-final__form .wpcf7-form[data-status="sent"] .wpcf7-response-output::before,
.contact__form .wpcf7-form[data-status="sent"] .wpcf7-response-output::before {
    content: "\2713"; /* check mark */
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(49, 217, 145, 0.18);
    color: #31D991;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 9. Subtle red tint on the offending input itself */
.pace-hero__form .wpcf7-form input.wpcf7-not-valid,
.pace-final__form .wpcf7-form input.wpcf7-not-valid,
.contact__form .wpcf7-form input.wpcf7-not-valid {
    color: #FFB395 !important;
}
.pace-hero__form .wpcf7-form input.wpcf7-not-valid::placeholder,
.pace-final__form .wpcf7-form input.wpcf7-not-valid::placeholder,
.contact__form .wpcf7-form input.wpcf7-not-valid::placeholder {
    color: rgba(255, 122, 69, 0.75) !important;
}

@keyframes paceFormStatusIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 10. Mobile — slightly tighter spacing inside the alert row */
@media (max-width: 560px) {
    .pace-hero__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
    .pace-hero__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
    .pace-hero__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
    .pace-hero__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
    .pace-final__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
    .pace-final__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
    .pace-final__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
    .pace-final__form .wpcf7-form[data-status="sent"] .wpcf7-response-output,
    .contact__form .wpcf7-form[data-status="invalid"] .wpcf7-response-output,
    .contact__form .wpcf7-form[data-status="failed"] .wpcf7-response-output,
    .contact__form .wpcf7-form[data-status="mail_failed"] .wpcf7-response-output,
    .contact__form .wpcf7-form[data-status="sent"] .wpcf7-response-output {
        margin: 6px 4px 2px !important;
        padding: 10px 8px 6px !important;
        font-size: 12.5px !important;
    }
}

/* ============================================================
   Chrome / Safari autofill — kill the white-yellow background.
   The browser injects `background-color: rgb(232,240,254)` and
   `color: black` via `-webkit-autofill`, which can't be unset
   with normal `background`/`color` rules. Two-pronged fix:
     1. Repaint the autofill background with a 1000-pixel inset
        box-shadow that matches our pill (transparent-on-card)
     2. Override the text color via `-webkit-text-fill-color`
        (the only property that beats the autofill text colour).
   ============================================================ */
.pace-hero__form .wpcf7-form input:-webkit-autofill,
.pace-hero__form .wpcf7-form input:-webkit-autofill:hover,
.pace-hero__form .wpcf7-form input:-webkit-autofill:focus,
.pace-hero__form .wpcf7-form input:-webkit-autofill:active,
.pace-final__form .wpcf7-form input:-webkit-autofill,
.pace-final__form .wpcf7-form input:-webkit-autofill:hover,
.pace-final__form .wpcf7-form input:-webkit-autofill:focus,
.pace-final__form .wpcf7-form input:-webkit-autofill:active,
.contact__form .wpcf7-form input:-webkit-autofill,
.contact__form .wpcf7-form input:-webkit-autofill:hover,
.contact__form .wpcf7-form input:-webkit-autofill:focus,
.contact__form .wpcf7-form input:-webkit-autofill:active {
    /* Repaint the field — the inner shadow covers the yellow bg */
    -webkit-box-shadow: 0 0 0 1000px rgba(14, 26, 34, 0.001) inset !important;
            box-shadow: 0 0 0 1000px rgba(14, 26, 34, 0.001) inset !important;
    -webkit-text-fill-color: #F4F7F6 !important;
    caret-color: #F4F7F6 !important;
    background-color: transparent !important;
    background-clip: content-box !important;
    /* Chrome re-applies the autofill bg after a tiny delay;
       this very-long transition prevents the snap-back. */
    transition: background-color 9999s ease-in-out 0s !important;
    -webkit-transition: background-color 9999s ease-in-out 0s !important;
}

/* If somehow the field shows as invalid AND was autofilled,
   keep the orange text colour rather than the autofill white. */
.pace-hero__form .wpcf7-form input.wpcf7-not-valid:-webkit-autofill,
.pace-final__form .wpcf7-form input.wpcf7-not-valid:-webkit-autofill,
.contact__form .wpcf7-form input.wpcf7-not-valid:-webkit-autofill {
    -webkit-text-fill-color: #FFB395 !important;
}

/* Firefox uses a different mechanism — it just inverts colors
   via a -moz prefix selector. */
.pace-hero__form .wpcf7-form input:-moz-autofill,
.pace-final__form .wpcf7-form input:-moz-autofill,
.contact__form .wpcf7-form input:-moz-autofill {
    background-color: transparent !important;
    color: #F4F7F6 !important;
    filter: none !important;
}

/* ============================================================
   Thank-You page — editorial confirmation screen.
   Sits between header/footer; same dark palette + green accent
   as the rest of the site.
   ============================================================ */
.thank-you-page {
    background: var(--bg-main, #071015);
}
.thank-you {
    position: relative;
    padding: clamp(72px, 12vw, 140px) 0 clamp(64px, 10vw, 120px);
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(49, 217, 145, 0.10) 0%, transparent 70%),
        var(--bg-main, #071015);
    overflow: hidden;
}
.thank-you::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 100%
    );
}
.thank-you__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

/* Eyebrow chip with pulsing dot — same vocabulary as blog hero */
.thank-you__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    background: rgba(49, 217, 145, 0.06);
    border: 1px solid rgba(49, 217, 145, 0.22);
    border-radius: var(--radius-pill, 999px);
    color: var(--green, #31D991);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.thank-you__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 0 0 rgba(49, 217, 145, 0.55);
    animation: heroBlogDotPulse 2.2s ease-out infinite;
    flex: 0 0 7px;
}

/* Big animated check */
.thank-you__check {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(49, 217, 145, 0.18) 0%, rgba(49, 217, 145, 0) 75%);
    color: var(--green, #31D991);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 4px;
    position: relative;
}
.thank-you__check::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 60px -8px rgba(49, 217, 145, 0.45);
    pointer-events: none;
}
.thank-you__check svg {
    width: 70px;
    height: 70px;
    display: block;
}
.thank-you__check-ring {
    transform-origin: 50% 50%;
    stroke-dasharray: 164;
    stroke-dashoffset: 164;
    animation: thankYouRing 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
.thank-you__check-mark {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: thankYouMark 0.55s cubic-bezier(.22,1,.36,1) 0.55s forwards;
}
@keyframes thankYouRing {
    to { stroke-dashoffset: 0; }
}
@keyframes thankYouMark {
    to { stroke-dashoffset: 0; }
}

.thank-you__title {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-main, #F4F7F6);
    margin: 0;
    font-weight: 700;
}
.thank-you__subtitle {
    color: var(--text-main, #F4F7F6);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    max-width: 480px;
}
.thank-you__note {
    color: var(--text-muted, #8B969C);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 460px;
}

/* Trust meta row — same triple-checkmark vibe as the hero form */
.thank-you__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 6px;
    color: var(--text-muted, #8B969C);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.thank-you__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.thank-you__meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 10px rgba(49, 217, 145, 0.55);
}
.thank-you__meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

/* Actions */
.thank-you__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}
.thank-you__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: var(--radius-pill, 999px);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: gap .25s ease, color .2s ease,
                background .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .2s ease;
    border: 1px solid transparent;
    font-family: inherit;
}
.thank-you__cta--primary {
    background: var(--green, #31D991);
    color: #06141B;
    box-shadow: 0 12px 28px -14px rgba(49, 217, 145, 0.5);
}
.thank-you__cta--primary:hover {
    background: var(--green-bright, #5FE2A8);
    transform: translateY(-1px);
    gap: 14px;
    box-shadow: 0 16px 36px -14px rgba(49, 217, 145, 0.55);
    color: #000000;
}
.thank-you__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.thank-you__cta--primary:hover .thank-you__cta-arrow {
    transform: translateX(4px);
}
.thank-you__cta--ghost {
    background: transparent;
    color: var(--text-muted, #8B969C);
    border-color: var(--card-border, rgba(255, 255, 255, 0.08));
    padding: 13px 20px;
}
.thank-you__cta--ghost:hover {
    color: var(--text-main, #F4F7F6);
    border-color: rgba(49, 217, 145, 0.40);
    background: rgba(49, 217, 145, 0.04);
}

/* Mobile */
@media (max-width: 768px) {
    .thank-you { padding: 56px 0 64px; }
    .thank-you__inner { gap: 14px; }
    .thank-you__check { width: 80px; height: 80px; }
    .thank-you__check svg { width: 56px; height: 56px; }
    .thank-you__title { font-size: clamp(28px, 8vw, 40px); }
    .thank-you__subtitle { font-size: 15px; }
    .thank-you__note { font-size: 14px; }
    .thank-you__meta { font-size: 11px; gap: 10px; }
    .thank-you__cta { padding: 12px 18px; font-size: 13px; }
}
@media (max-width: 480px) {
    .thank-you__meta-sep { display: none; }
    .thank-you__actions { flex-direction: column; align-items: stretch; }
    .thank-you__cta { justify-content: center; }
}

/* ============================================================
   Thank-You — waitlist POSITION display.
   Big mono number with the brand-green hash; sits between the
   confirmation check and the subtitle. Number animates 0→target
   on first paint (handled inline in the template).
   ============================================================ */
.thank-you__position {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 28px 22px;
    margin: 6px 0 0;
    background:
        radial-gradient(closest-side, rgba(49, 217, 145, 0.10) 0%, rgba(49, 217, 145, 0) 70%),
        rgba(14, 26, 34, 0.55);
    border: 1px solid rgba(49, 217, 145, 0.22);
    border-radius: 22px;
    text-align: center;
    box-shadow:
        0 24px 60px -30px rgba(49, 217, 145, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.thank-you__position-label {
    color: var(--text-muted, #8B969C);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.thank-you__position-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-mono, "SF Mono", Menlo, Consolas, monospace);
    color: var(--text-main, #F4F7F6);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
}
.thank-you__position-hash {
    color: var(--green, #31D991);
    font-size: clamp(40px, 7vw, 64px);
    line-height: 1;
    text-shadow: 0 0 24px rgba(49, 217, 145, 0.4);
}
.thank-you__position-num {
    font-size: clamp(56px, 11vw, 96px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #F4F7F6 0%, #B6C2C7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.thank-you__position-hint {
    color: var(--text-dim, #5F6B72);
    font-size: 12px;
    letter-spacing: 0.04em;
    max-width: 360px;
    margin-top: 2px;
}

/* ============================================================
   Thank-You — SHARE block.
   Eyebrow with pulsing dot, then 4 outlined chips: X / LinkedIn /
   Email / Copy. Brand-coloured hover, "Copied!" swap inline.
   ============================================================ */
.thank-you__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 6px 0 4px;
}
.thank-you__share-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green, #31D991);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.thank-you__share-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green, #31D991);
    box-shadow: 0 0 0 0 rgba(49, 217, 145, 0.55);
    animation: heroBlogDotPulse 2.2s ease-out infinite;
}
.thank-you__share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.thank-you__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(14, 26, 34, 0.7);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-pill, 999px);
    color: var(--text-main, #F4F7F6);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease, border-color .2s ease,
                background .2s ease, transform .2s ease,
                box-shadow .25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.thank-you__share-btn svg {
    width: 14px;
    height: 14px;
    color: currentColor;
    flex: 0 0 14px;
}
.thank-you__share-btn:hover {
    border-color: rgba(49, 217, 145, 0.45);
    background: rgba(49, 217, 145, 0.08);
    color: var(--green, #31D991);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -16px rgba(49, 217, 145, 0.4);
}
.thank-you__share-btn:focus-visible {
    outline: 2px solid var(--green, #31D991);
    outline-offset: 3px;
}
.thank-you__share-btn.is-copied {
    border-color: var(--green, #31D991);
    background: rgba(49, 217, 145, 0.16);
    color: var(--green, #31D991);
}
.thank-you__share-btn-label {
    display: inline-flex;
    align-items: center;
}
.thank-you__share-btn-text--copied {
    color: var(--green, #31D991);
}

/* Mobile compaction for the position + share blocks */
@media (max-width: 768px) {
    .thank-you__position { padding: 16px 22px 18px; border-radius: 18px; }
    .thank-you__position-label { font-size: 10px; letter-spacing: 0.18em; }
    .thank-you__position-hash { font-size: clamp(34px, 9vw, 48px); }
    .thank-you__position-num { font-size: clamp(46px, 14vw, 72px); }
    .thank-you__position-hint { font-size: 11.5px; }

    .thank-you__share-btn { padding: 9px 14px; font-size: 12.5px; }
    .thank-you__share-btn span:not(.thank-you__share-btn-label):not(.thank-you__share-btn-text):not(.thank-you__share-btn-text--copied) {
        /* keep label visible on tablet */
    }
}
@media (max-width: 480px) {
    /* Compact share: hide button labels except for the Copy button —
       it stays so the "Copied!" state still has somewhere to land. */
    .thank-you__share-btn--twitter > span:last-child,
    .thank-you__share-btn--linkedin > span:last-child,
    .thank-you__share-btn--email > span:last-child {
        display: none;
    }
    .thank-you__share-btn--twitter,
    .thank-you__share-btn--linkedin,
    .thank-you__share-btn--email {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .thank-you__share-btn--twitter svg,
    .thank-you__share-btn--linkedin svg,
    .thank-you__share-btn--email svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
    .thank-you__share-buttons { gap: 8px; }
}