/* ===================================================================
   Ad-Free pricing page.

   Tokens come from a2z-tokens.css, shared with the home page and the
   tool directory - this is the same product, so the same palette.
   Mobile-first: base rules are the phone layout.
   =================================================================== */

.adfree section {
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
}

.af-shell {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.adfree a:focus-visible,
.adfree button:focus-visible {
    outline: 2px solid var(--h-accent);
    outline-offset: 2px;
    border-radius: var(--h-r-sm);
}

/* ---- hero ----------------------------------------------------------- */
.af-hero {
    background: var(--h-canvas);
    border-bottom: 1px solid var(--h-line-soft);
    padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
}

.af-title {
    margin: 0;
    font-size: clamp(1.875rem, 5.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--h-ink);
    text-wrap: balance;
}

.af-lede {
    margin: clamp(.8rem, 2vw, 1.1rem) auto 0;
    max-width: 56ch;
    font-size: clamp(.9375rem, 2.3vw, 1.0625rem);
    line-height: 1.6;
    color: var(--h-muted);
    text-wrap: pretty;
}

.af-body {
    background: var(--h-paper);
    padding-block: clamp(2rem, 6vw, 3.5rem);
}

.af-h2 {
    margin: 0;
    font-size: clamp(1.25rem, 3.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -.018em;
    font-weight: 700;
    color: var(--h-ink);
}

.af-h3 {
    margin: 0 0 .6rem;
    font-size: 1rem;
    font-weight: 650;
    color: var(--h-ink);
}

.af-block-sub {
    margin: .5rem 0 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--h-muted);
}

.af-muted {
    margin: .85rem 0 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--h-muted);
}

/* ---- notices --------------------------------------------------------- */
.af-notice {
    margin: 1.25rem 0;
    padding: .85rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    border-radius: var(--h-r-md);
    background: var(--h-accent-soft);
    color: var(--h-ink);
    border: 1px solid var(--h-line);
}

.af-notice-warn {
    background: #fff8e6;
    border-color: #f2d98c;
    color: #6b5310;
}

.af-notice-test {
    display: inline-block;
    margin-top: 1rem;
    background: #eef7ee;
    border-color: #bcdcbc;
    color: #2c5c2c;
}

.theme-dark .af-notice-warn { background: #2a2411; border-color: #5c4f1d; color: #f0dfa6; }
.theme-dark .af-notice-test { background: #16261a; border-color: #2f5334; color: #b9e0bd; }

/* ---- current subscription -------------------------------------------- */
.af-current {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--h-canvas);
    border: 1px solid var(--h-line);
    border-radius: var(--h-r-lg);
}

.af-current-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.15rem 0 0;
}

.af-current-grid dt {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--h-muted);
    margin-bottom: .2rem;
}

.af-current-grid dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--h-ink);
}

.af-badge {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: var(--h-r-pill);
    background: var(--h-line-soft);
    color: var(--h-ink-2);
}

.af-badge-active { background: #e6f4ea; color: #1e6b33; }
.af-badge-pending { background: #fff4e0; color: #7a5410; }
.af-badge-pastdue { background: #fff4e0; color: #7a5410; }
.af-badge-cancelled,
.af-badge-expired,
.af-badge-paymentfailed { background: #fdeaea; color: #8a2626; }

.theme-dark .af-badge-active { background: #14301c; color: #8fd9a4; }
.theme-dark .af-badge-pending,
.theme-dark .af-badge-pastdue { background: #2e2510; color: #f0cd82; }
.theme-dark .af-badge-cancelled,
.theme-dark .af-badge-expired,
.theme-dark .af-badge-paymentfailed { background: #331717; color: #f0a0a0; }

/* ---- billing toggle --------------------------------------------------- */
.af-toggle {
    display: inline-flex;
    gap: .25rem;
    margin: 1.25rem 0 1.5rem;
    padding: .25rem;
    background: var(--h-canvas);
    border: 1px solid var(--h-line);
    border-radius: var(--h-r-pill);
}

.af-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* 44px tall: a real touch target, not a decorative pill. */
    min-height: 44px;
    padding: .5rem 1.1rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--h-ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--h-r-pill);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.af-toggle-btn.is-on {
    background: var(--h-paper);
    color: var(--h-accent);
    box-shadow: var(--h-shadow-sm);
}

.af-toggle-save {
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: var(--h-r-pill);
    background: #e6f4ea;
    color: #1e6b33;
}

.theme-dark .af-toggle-save { background: #14301c; color: #8fd9a4; }

/* ---- plans ------------------------------------------------------------ */
.af-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.af-plan {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--h-paper);
    border: 1px solid var(--h-line);
    border-radius: var(--h-r-lg);
    box-shadow: var(--h-shadow-sm);
}

.af-plan-name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--h-ink);
}

.af-plan-price {
    margin: .6rem 0 .2rem;
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.af-plan-amount {
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 700;
    color: var(--h-ink);
    font-variant-numeric: tabular-nums;
}

.af-plan-period {
    font-size: .9375rem;
    color: var(--h-muted);
}

.af-plan-currency {
    margin: 0;
    font-size: .8125rem;
    color: var(--h-muted);
}

.af-plan-features {
    flex: 1 1 auto;
    margin: 1.15rem 0;
    padding: 0;
    list-style: none;
}

.af-plan-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--h-ink-2);
}

.af-plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .5rem;
    height: .28rem;
    border-left: 2px solid var(--h-accent);
    border-bottom: 2px solid var(--h-accent);
    transform: rotate(-45deg);
}

.af-plan-current {
    margin: 0;
    padding: .7rem 1rem;
    text-align: center;
    font-size: .9375rem;
    font-weight: 600;
    color: #1e6b33;
    background: #e6f4ea;
    border-radius: var(--h-r-md);
}

.theme-dark .af-plan-current { background: #14301c; color: #8fd9a4; }

/* ---- buttons ---------------------------------------------------------- */
.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    padding: .75rem 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--h-r-pill);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.af-btn-primary {
    color: #fff;
    background: var(--h-accent);
}

.af-btn-primary:hover:not(:disabled) {
    background: var(--h-accent-strong);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.theme-dark .af-btn-primary { color: #0f1218; }

.af-btn-disabled,
.af-btn:disabled {
    color: var(--h-muted);
    background: var(--h-canvas);
    border-color: var(--h-line);
    cursor: not-allowed;
    transform: none;
}

.af-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 45%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: af-spin .6s linear infinite;
}

@keyframes af-spin { to { transform: rotate(360deg); } }

/* ---- status line ------------------------------------------------------ */
.af-status {
    margin: 1.15rem 0 0;
    min-height: 1.4em;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--h-muted);
}

.af-status-success { color: #1e6b33; }
.af-status-error { color: #a12b2b; }
.af-status-pending { color: var(--h-accent); }
.af-status-cancelled { color: var(--h-muted); }

.theme-dark .af-status-success { color: #8fd9a4; }
.theme-dark .af-status-error { color: #f0a0a0; }

/* ---- includes / excludes ---------------------------------------------- */
.af-includes {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--h-line-soft);
}

.af-includes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.af-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.af-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .55rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--h-ink-2);
}

.af-list-yes li::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .45em;
    width: .5rem;
    height: .28rem;
    border-left: 2px solid #1e6b33;
    border-bottom: 2px solid #1e6b33;
    transform: rotate(-45deg);
}

.af-list-no li::before {
    content: "\00d7";
    position: absolute;
    left: .2rem;
    top: -.05em;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--h-muted);
}

/* ---- legal ------------------------------------------------------------ */
.af-legal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--h-line-soft);
}

.af-legal a {
    font-size: .875rem;
    color: var(--h-muted);
    text-decoration: none;
}

.af-legal a:hover {
    color: var(--h-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- breakpoints ------------------------------------------------------ */
@media (min-width: 640px) {
    .af-current-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .af-includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .af-btn { width: auto; min-width: 200px; }
}

@media (min-width: 900px) {
    /* Both plans side by side. The toggle keeps working, but at this width
       there is room to compare them without it. */
    .af-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .af-plan[hidden] { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .adfree *, .adfree *::before, .adfree *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .af-btn-primary:hover:not(:disabled) { transform: none; }
}

@media (forced-colors: active) {
    .af-plan, .af-btn, .af-toggle-btn { border: 1px solid ButtonBorder; }
}