/* TGL Membership — matches Next.js demo design */

:root {
    --tgl-m-green-dark: #122806;
    --tgl-m-green-accent: #122806;
    --tgl-m-cream: #faf9f6;
    --tgl-m-green-light: #e8f5e9;
    --tgl-m-gradient-start: #CFD877;
    --tgl-m-gradient-mid: #e8f0e4;
}

/* ========================================
   PRICING TABLE
   ======================================== */

.tgl-pricing {
    max-width: 1040px;     /* unified with theme page-content + events */
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, -apple-system, sans-serif);
}

.tgl-pricing__header {
    text-align: center;
    margin-bottom: 3rem;
}

.tgl-pricing__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tgl-m-green-accent);
    margin-bottom: 0.75rem;
}

.tgl-pricing__heading {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.tgl-pricing__subheading {
    font-size: 0.95rem;
    color: var(--tgl-green-dark, #122806);
}

.tgl-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Card */
.tgl-pricing__card {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tgl-pricing__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.tgl-pricing__card--featured {
    border-color: var(--tgl-m-green-dark);
    border-width: 2px;
    box-shadow: 0 4px 20px rgba(13, 59, 30, 0.1);
}

.tgl-pricing__popular {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tgl-m-green-dark);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25rem 1rem;
    border-radius: 24px;
    white-space: nowrap;
}

/* Tier badge */
.tgl-pricing__tier-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 24px;
    margin-bottom: 1rem;
}

.tgl-pricing__tier-badge--kennedy {
    background: #f3f4f6;
    color: var(--tgl-green-dark, #122806);
}

.tgl-pricing__tier-badge--bloor {
    background: var(--tgl-m-green-light);
    color: var(--tgl-m-green-accent);
}

.tgl-pricing__tier-badge--kipling {
    background: var(--tgl-m-green-dark);
    color: white;
}

/* Price */
.tgl-pricing__price {
    margin-bottom: 0.5rem;
}

.tgl-pricing__amount {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    line-height: 1;
}

.tgl-pricing__period {
    font-size: 0.9rem;
    color: var(--tgl-green-dark, #122806);
    font-weight: 400;
}

.tgl-pricing__desc {
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 1.5rem;
}

/* Features */
.tgl-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.tgl-pricing__features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}

.tgl-pricing__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--tgl-m-green-light);
    border: 1.5px solid var(--tgl-m-green-accent);
}

/* CTA Buttons */
.tgl-pricing__cta {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s;
    border: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    text-decoration: none;
}

.tgl-pricing__cta:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-pricing__cta:active {
    transform: scale(0.98);
}

.tgl-pricing__cta--primary {
    background: var(--tgl-m-green-dark);
    color: white;
}

.tgl-pricing__cta--secondary {
    background: white;
    color: var(--tgl-m-green-dark);
    border: 1.5px solid #d1d5db;
}

.tgl-pricing__cta--secondary:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-pricing__current {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--tgl-green-dark, #122806);
    padding: 0.75rem;
}

.tgl-pricing__current--included {
    color: var(--tgl-m-green-accent);
}

/* ========================================
   ACCOUNT DASHBOARD
   ======================================== */

.tgl-account {
    max-width: 1040px;     /* unified with theme page-content + events + pricing */
    margin: 0 auto;
    /* No side padding here — the parent `.tgl-page__content` already
       supplies the sitewide 1.5rem gutter. Stacking both was inseting
       the account dashboard by ~48px each side on mobile. */
    padding: 2rem 0 4rem;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, -apple-system, sans-serif);
}

.tgl-account--login {
    text-align: center;
    padding: 4rem 0;
}

.tgl-account--login h2 {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 2rem;
    color: var(--tgl-m-green-dark);
    margin-bottom: 0.5rem;
}

.tgl-account--login p {
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 1.5rem;
}

.tgl-account__login-btn {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border-radius: 24px;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.15s;
}

.tgl-account__login-btn:hover,
.tgl-account__login-btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
    text-decoration: none;
}

/* Success banner */
.tgl-account__success {
    background: var(--tgl-m-green-light);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}
/* Info variant — same shape as success, brand Blue background so it reads
   as "important information" rather than "celebrate". Used for
   scheduled-cancel and similar neutral-but-prominent notices. */
.tgl-account__success--info {
    background: var(--tgl-brand-blue, #D3E5E4);
}
button.tgl-account__linklike,
.tgl-account__linklike {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    text-decoration-color: var(--tgl-green-dark, #122806);
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    display: inline;
    vertical-align: baseline;
}
button.tgl-account__linklike:hover,
.tgl-account__linklike:hover {
    background: none !important;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
}

.tgl-account__success-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--tgl-m-green-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
}

.tgl-account__success-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.tgl-account__success h3 {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
    color: var(--tgl-m-green-dark);
    margin-bottom: 0.25rem;
}

.tgl-account__success p {
    font-size: 0.875rem;
    color: var(--tgl-green-dark, #122806);
}

/* Header */
.tgl-account__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.tgl-account__avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--tgl-m-green-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tgl-account__name {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.tgl-account__tier-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 24px;
}

.tgl-account__tier-badge--kennedy {
    background: #f3f4f6;
    color: var(--tgl-green-dark, #122806);
}

.tgl-account__tier-badge--bloor {
    background: var(--tgl-m-green-light);
    color: var(--tgl-m-green-accent);
}

.tgl-account__tier-badge--kipling {
    background: var(--tgl-m-green-dark);
    color: white;
}

/* Onboarding */
.tgl-account__onboarding {
    margin-bottom: 1rem;
}

.tgl-account__onboarding-title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.25rem;
}

.tgl-account__name-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 24px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--tgl-green-dark, #122806);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tgl-account__name-input:focus {
    border-color: var(--tgl-m-green-accent);
    box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.1);
}

/* Tabs */
.tgl-account__tabs-wrap {
    position: relative;
}
/* Scroll-hint fade on the right edge of the tab strip — only shown when JS
   adds .tgl-account__tabs-wrap--scrollable (tabs actually overflow). Uses
   the page background var so it blends regardless of theme color. */
.tgl-account__tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right,
        rgba(255,255,255,0),
        var(--tgl-page-bg, #f3ecec) 90%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.tgl-account__tabs-wrap--scrollable::after { opacity: 1; }
.tgl-account__tabs-wrap--scrolled-end::after { opacity: 0; }

.tgl-account__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tgl-account__tabs::-webkit-scrollbar { display: none; }

/* Tabs — same treatment as the desktop primary nav (see
   `.tgl-header__nav-list a` in the theme): Franklin bold uppercase,
   full dark-green text, 3px dark-green bar on hover + active via
   inset box-shadow. Muted inactive text keeps the active tab
   distinguishable at a glance without changing footprint. */
.tgl-account__tab {
    padding: 0.75rem 0.25rem;
    margin-right: 1.5rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, box-shadow 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}
.tgl-account__tab:hover,
.tgl-account__tab:focus-visible {
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 -3px 0 var(--tgl-green-dark, #122806);
    outline: none;
}
.tgl-account__tab--active,
.tgl-account__tab--active:hover {
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 -3px 0 var(--tgl-green-dark, #122806);
}

/* Tier grid inside the account dashboard — the sitewide
   `.tgl-benefits--3col .tgl-benefits__grid` rule adds 1.5rem side
   padding for the marketing landing, but here the parent
   `.tgl-account` already owns the page gutter, so the extra padding
   just shifts cards off-center. Zero it out. */
/* Bumped specificity via .tgl-benefits--3col so this beats the
   sitewide `.tgl-benefits--3col .tgl-benefits__grid` rule (which
   ships 1.5rem side padding for the marketing landing). */
.tgl-account__tiers.tgl-benefits--3col .tgl-benefits__grid,
.tgl-account__tiers .tgl-benefits__grid {
    padding: 0;
    max-width: none;
    margin: 1rem 0 1.5rem;
}
.tgl-account__tiers-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
/* Force brand dark-green on eyebrow / title / lede in the account
   dashboard scope — the base `.tgl-upsell__*` classes were coloured
   for a Light-Green-on-dark hero band and read as low contrast on
   the light account background. */
.tgl-account__tiers-head .tgl-upsell__eyebrow {
    color: var(--tgl-green-dark, #122806);
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0;
    display: block;
    margin-bottom: 0.5rem;
}
.tgl-account__tiers-head .tgl-upsell__title {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.2;
    /* Clear the base rule's inner max-width so the title fills the
       tiers-head container width instead of pinching in another
       ~100px. */
    max-width: none;
    margin: 0 0 0.75rem;
}
.tgl-account__tiers-head .tgl-upsell__lede-text {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: none;
    margin: 0;
}
.tgl-account__tiers .tgl-upsell__note {
    color: var(--tgl-green-dark, #122806);
    text-align: center;
    font-size: 0.85rem;
    margin: 1rem 0 0;
}

/* Panels */
.tgl-account__panel {
    display: none;
}

.tgl-account__panel--active {
    display: block;
}

/* Sections */
.tgl-account__section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.tgl-account__section:last-child {
    border-bottom: none;
}

.tgl-account__section-title {
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.5rem;
}

.tgl-account__section-text {
    font-size: 0.875rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.tgl-account__warning {
    color: #dc2626;
    font-weight: 500;
}

/* Membership Card — brand dark-green so it reads as the primary
   "you're here" surface at the top of the membership tab. All three
   tiers use the same treatment; the tier cards below are where the
   tier tints live (Kennedy peach / Bloor pink / Kipling blue). */
.tgl-account__membership-card {
    border: 0;
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    margin-bottom: 1rem;
}
.tgl-account__membership-card .tgl-account__membership-plan,
.tgl-account__membership-card .tgl-account__membership-price,
.tgl-account__membership-card .tgl-account__membership-details,
.tgl-account__membership-card .tgl-account__membership-details span {
    color: #fff;
}

.tgl-account__membership-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.tgl-account__membership-plan {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
}

.tgl-account__membership-card--kipling .tgl-account__membership-plan {
    color: white;
}

.tgl-account__membership-card .tgl-account__membership-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.tgl-account__membership-details {
    font-size: 0.75rem;
    color: var(--tgl-green-dark, #122806);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* All tiers: meta line stays solid white on the dark-green card.
   The old Kipling-only rgba(...,0.65) override read as grey — brand
   rule is white or dark-green, never a translucent variant. */
.tgl-account__membership-card .tgl-account__membership-details,
.tgl-account__membership-card .tgl-account__membership-details span {
    color: #fff;
}

/* Action buttons */
.tgl-account__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Base account button — brand primary by default: dark-green pill,
   white text, Libre Franklin bold uppercase 24px radius. Text flips
   to Light Green on hover (background stays put per sitewide rule).
   Any variant class (--outline, --link, --small, --danger) can still
   override colour/border below without redefining typography. */
.tgl-account__btn {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    border-radius: 24px;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 0;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.tgl-account__btn:hover,
.tgl-account__btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
    outline: none;
}

.tgl-account__btn--primary {
    background: var(--tgl-m-green-dark);
    color: white;
}

.tgl-account__btn--secondary {
    background: white;
    color: var(--tgl-m-green-dark);
    border: 1.5px solid var(--tgl-m-green-dark);
}

/* "Outline" variant — kept its BEM name but the visual is now the
   standard brand button: dark-green fill, white text, Franklin bold
   uppercase 24px pill. Was previously a low-contrast white pill with
   a light-grey border that read as inactive. */
.tgl-account__btn--outline {
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 0;
    padding: 0.75rem 1.4rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    border-radius: 24px;
    transition: color 0.15s;
}
.tgl-account__btn--outline:hover,
.tgl-account__btn--outline:focus-visible {
    background: var(--tgl-m-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
    outline: none;
}
/* Link variant — plain text button used for secondary destructive
   actions like "Downgrade to Kennedy" that shouldn't compete with
   the primary CTA visually. */
.tgl-account__btn--link {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    border: 0;
    padding: 0.6rem 0.4rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}
.tgl-account__btn--link:hover,
.tgl-account__btn--link:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
}

/* Section save button — matches the sitewide primary button spec
   (Libre Franklin bold uppercase, dark-green pill, Light Green on
   hover). Historically was Open Sans + Title Case, which drifted
   from every other action button on the site. */
.tgl-account__btn--small {
    padding: 0.75rem 1.4rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    margin-top: 0.75rem;
    cursor: pointer;
    transition: color 0.15s;
}
.tgl-account__btn--small:hover,
.tgl-account__btn--small:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
}

/* Interest chips */
.tgl-account__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tgl-account__chip {
    cursor: pointer;
}

.tgl-account__chip input {
    display: none;
}

.tgl-account__chip span {
    display: block;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid #c5c9d0;
    border-radius: 24px;
    font-size: 0.8rem;
    color: #374151;
    background: #fff;
    transition: all 0.2s;
}

.tgl-account__chip input:checked + span {
    background: var(--tgl-m-green-dark);
    border-color: var(--tgl-m-green-dark);
    color: white;
}

.tgl-account__chip:hover span {
    border-color: var(--tgl-m-green-accent, #122806);
    color: var(--tgl-m-green-dark, #122806);
}

/* Auto-save indicator */
.tgl-account__saved {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tgl-m-green-accent);
    margin-top: 0.5rem;
    transition: opacity 0.3s;
}

/* Show more toggle — reuses .tgl-account__btn--small for the pill.
   Only the show-more-specific overrides (full-width + centered) live here. */
.tgl-account__show-more {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
}

/* Danger zone */
.tgl-account__section--danger {
    border-bottom: none;
}

.tgl-account__section--danger .tgl-account__section-title {
    color: #dc2626;
}

.tgl-account__btn--danger {
    background: white;
    color: #dc2626;
    border: 1.5px solid #fecaca;
    padding: 0.75rem 1.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Hover: fill the button red + white text so intent is unmistakable
   on a destructive action. Base .tgl-account__btn:hover flips text
   to Light Green — unreadable on a white background — so override
   both colour and background here. */
.tgl-account__btn--danger:hover,
.tgl-account__btn--danger:focus-visible {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    outline: none;
}

/* Reading History */
.tgl-account__history {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tgl-account__history-item {
    border-bottom: 1px solid #f3f4f6;
}

.tgl-account__history-item:last-child {
    border-bottom: none;
}

.tgl-account__history-item a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    transition: opacity 0.2s;
}

.tgl-account__history-item a:hover {
    opacity: 0.7;
}

.tgl-account__history-title {
    display: block;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tgl-m-green-dark);
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.tgl-account__history-meta {
    font-size: 0.7rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}

/* Connected Accounts (Social Login) */
.tgl-account__social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tgl-account__social-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    background: white;
}

.tgl-account__social-icon {
    flex-shrink: 0;
}

.tgl-account__social-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    flex: 1;
}

.tgl-account__social-btn {
    padding: 0.375rem 0.875rem;
    border-radius: 24px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: var(--tgl-green-dark, #122806);
    cursor: default;
    font-family: inherit;
}

/* Neighbourhood search box + empty state.
   Filters .tgl-account__chip--hood chips by name + admin aliases
   (see class-tgl-content-formats.php + tgl-hood-search.js). */
.tgl-hood-search {
    margin: 0.25rem 0 1rem;
}
.tgl-hood-search__input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.18);
    border-radius: 24px;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tgl-hood-search__input:focus {
    outline: none;
    border-color: var(--tgl-green-accent, #122806);
    box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.18);
}
.tgl-hood-search__input::placeholder {
    color: rgba(18, 40, 6, 0.45);
    font-style: italic;
}
.tgl-hood-search__empty {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.9rem;
    background: rgba(18, 40, 6, 0.03);
    border-radius: 24px;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: italic;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.95rem;
}

/* Neighbourhood Preferences */
.tgl-account__neighbourhoods {
    margin-bottom: 0.5rem;
}

.tgl-account__municipality {
    margin-bottom: 1rem;
}

.tgl-account__municipality-name {
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.4rem;
}

.tgl-account__chip--hood span {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
}

/* Article action chips (bookmark / gift / share) — brand-green pills with
   white text. State is signalled by the icon (filled vs outlined) and the
   label ("Save" vs "Saved"), not by swapping the whole background — so the
   row stays visually calm regardless of which buttons are toggled on. */
.tgl-bookmark,
.tgl-gift,
.tgl-share {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--tgl-m-green-dark, #122806);
    border-radius: 24px;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
}
.tgl-bookmark:hover,
.tgl-gift:hover,
.tgl-share:hover {
    background: var(--tgl-m-green-accent, #122806);
    border-color: var(--tgl-m-green-accent, #122806);
    color: #fff;
}
.tgl-bookmark svg,
.tgl-gift svg,
.tgl-share svg { width: 14px; height: 14px; }

/* "Already saved" state — CSS fills the bookmark icon so the visual
   updates both on server-render (init) AND after a JS click-toggle
   (which only flips the .tgl-bookmark--saved class, not SVG attrs). */
.tgl-bookmark--saved {
    background: var(--tgl-m-green-accent, #122806);
    border-color: var(--tgl-m-green-accent, #122806);
}
.tgl-bookmark--saved svg { fill: currentColor; }

.tgl-gift:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Post-share "Link copied" flash — subtle pale-green pill so it still
   reads as "success" without looking like a different button. */
.tgl-share.is-copied {
    background: var(--tgl-m-green-light, #CFD877);
    border-color: var(--tgl-m-green-light, #CFD877);
    color: var(--tgl-m-green-dark, #122806);
}

/* Gift modal overlay */
.tgl-gift-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

.tgl-gift-modal__card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2rem;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, sans-serif);
}

.tgl-gift-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.tgl-gift-modal__close:hover {
    color: #374151;
}

.tgl-gift-modal__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.5rem;
}

.tgl-gift-modal__desc {
    font-size: 0.875rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.tgl-gift-modal__url-wrap {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tgl-gift-modal__url {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    font-family: monospace;
    min-width: 0;
}

.tgl-gift-modal__copy {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 24px;
    background: var(--tgl-m-green-dark);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, sans-serif);
    text-transform: uppercase;
}

.tgl-gift-modal__copy:hover {
    background: var(--tgl-m-green-accent);
}

.tgl-gift-modal__remaining {
    font-size: 0.75rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-align: center;
}

/* ========================================
   CONTENT GATE
   ======================================== */

.tgl-gate--full {
    position: relative;
    margin: 0;
}

/* Fade removed — the gate no longer sits on a white surface. It's
   transparent so the page background (pink gradient, cream, whichever)
   shows through, and the border-top keeps the visual break above the
   membership pitch. */
.tgl-gate__fade { display: none; }

.tgl-gate__inner {
    background: transparent;
    border-top: 2px solid var(--tgl-m-green-dark);
    padding: 3rem 1.5rem 4rem;
    text-align: center;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, -apple-system, sans-serif);
}

.tgl-gate--inline .tgl-gate__inner {
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    padding: 2rem;
    margin: 1.5rem 0;
}

.tgl-gate__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.tgl-gate--inline .tgl-gate__title {
    font-size: 1.25rem;
}

.tgl-gate__text {
    font-size: 0.875rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.6;
    max-width: 24rem;
    margin: 0 auto 1.5rem;
}

.tgl-gate__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tgl-gate__btn {
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s;
    border: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    text-decoration: none;
    display: inline-block;
}

.tgl-gate__btn:hover {
    text-decoration: none;
}

.tgl-gate__btn--primary {
    background: var(--tgl-m-green-dark);
    color: white;
}
/* Dark-green-filled + white-text button → hover flips text to Light Green
   (brand hover rule), background stays. */
.tgl-gate__btn--primary:hover {
    color: var(--tgl-green-light, #CFD877);
}

.tgl-gate__btn--secondary {
    background: white;
    color: var(--tgl-green-dark, #122806);
    border: 1.5px solid var(--tgl-green-dark, #122806);
}
/* White-filled + dark-green-text button → hover stays on-brand (no light-
   green flip, that only reads on dark surfaces). */
.tgl-gate__btn--secondary:hover {
    color: var(--tgl-green-dark, #122806);
    background: white;
}

/* ========================================
   RAG BOT — FLOATING CHAT WIDGET
   ======================================== */

.tgl-ragbot__trigger {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9998;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--tgl-m-green-dark);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tgl-ragbot__trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}

.tgl-ragbot {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 3rem);
    background: white;
    border-radius: 24px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, -apple-system, sans-serif);
    animation: tgl-ragbot-open 0.3s ease;
}

@keyframes tgl-ragbot-open {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.tgl-ragbot__header {
    background: var(--tgl-m-green-dark);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.tgl-ragbot__title {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.tgl-ragbot__subtitle {
    color: rgba(134, 239, 172, 0.8);
    font-size: 0.7rem;
    margin: 0;
}

.tgl-ragbot__header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tgl-ragbot__badge {
    font-size: 0.65rem;
    color: rgba(134, 239, 172, 0.8);
    background: rgba(20, 83, 45, 0.5);
    padding: 0.15rem 0.5rem;
    border-radius: 24px;
}

.tgl-ragbot__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
    display: flex;
}

.tgl-ragbot__close:hover {
    color: white;
}

/* Upsell */
.tgl-ragbot__upsell {
    padding: 2rem 1.5rem;
    text-align: center;
}

.tgl-ragbot__upsell-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--tgl-m-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--tgl-m-green-accent);
}

.tgl-ragbot__upsell-title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.5rem;
}

.tgl-ragbot__upsell-text {
    font-size: 0.8rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.tgl-ragbot__upsell-btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--tgl-m-green-dark);
    color: white;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s;
}

.tgl-ragbot__upsell-btn:hover {
    opacity: 0.9;
    color: white;
}

.tgl-ragbot__upsell-note {
    font-size: 0.7rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0.75rem 0 0;
}

/* Messages */
.tgl-ragbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    height: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tgl-ragbot__message {
    display: flex;
}

.tgl-ragbot__message--user {
    justify-content: flex-end;
}

.tgl-ragbot__message--assistant {
    justify-content: flex-start;
}

.tgl-ragbot__bubble {
    max-width: 85%;
    border-radius: 24px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    line-height: 1.6;
    animation: tgl-ragbot-fade 0.3s ease;
}

@keyframes tgl-ragbot-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.tgl-ragbot__bubble--user {
    background: var(--tgl-m-green-light);
    color: #1f2937;
}

.tgl-ragbot__bubble--assistant {
    background: #f3f4f6;
    color: #374151;
}

/* Sources */
.tgl-ragbot__sources {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tgl-ragbot__sources-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}

.tgl-ragbot__source-link {
    display: block;
    font-size: 0.7rem;
    color: var(--tgl-m-green-accent);
    text-decoration: none;
    padding: 0.15rem 0;
}

.tgl-ragbot__source-link:hover {
    text-decoration: underline;
}

/* Typing indicator */
.tgl-ragbot__typing {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
}

.tgl-ragbot__typing span {
    width: 0.45rem;
    height: 0.45rem;
    background: #9ca3af;
    border-radius: 50%;
    animation: tgl-ragbot-bounce 0.6s infinite;
}

.tgl-ragbot__typing span:nth-child(2) { animation-delay: 0.15s; }
.tgl-ragbot__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes tgl-ragbot-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Suggestions */
.tgl-ragbot__suggestions {
    padding: 0 1rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tgl-ragbot__chip {
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    background: white;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.tgl-ragbot__chip:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* Input */
.tgl-ragbot__input-area {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.tgl-ragbot__input {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tgl-ragbot__input:focus {
    border-color: var(--tgl-m-green-accent);
    box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.1);
}

.tgl-ragbot__send {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tgl-m-green-dark);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.2s;
}

.tgl-ragbot__send:hover {
    transform: scale(1.05);
}

.tgl-ragbot__send:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .tgl-pricing__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .tgl-pricing__heading {
        font-size: 1.75rem;
    }

    .tgl-account__header {
        flex-direction: column;
        text-align: center;
    }

    .tgl-account__actions {
        flex-direction: column;
    }

    .tgl-gate__actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   GIFT MANAGEMENT
   ======================================== */

.tgl-account__gift-stats {
    display: flex;
    gap: 2rem;
    margin: 1.5rem 0;
}

.tgl-account__gift-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    /* Brand Light Green (#CFD877) — the plugin's `--tgl-m-green-light`
       token was an off-brand mint that isn't in the palette. */
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
    border-radius: 24px;
    min-width: 120px;
}

.tgl-account__gift-stat-value {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
}

.tgl-account__gift-stat-label {
    font-size: 0.75rem;
    color: var(--tgl-green-dark, #122806);
    margin-top: 0.25rem;
}

.tgl-account__gift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.tgl-account__gift-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.tgl-account__gift-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.tgl-account__gift-table tbody tr:hover {
    background: #fafafa;
}

.tgl-account__gift-title a {
    color: var(--tgl-m-green-dark);
    text-decoration: none;
    font-weight: 500;
}

.tgl-account__gift-title a:hover {
    text-decoration: underline;
}

.tgl-account__gift-views {
    font-variant-numeric: tabular-nums;
    color: var(--tgl-green-dark, #122806);
    text-align: center;
}

.tgl-account__gift-date {
    color: var(--tgl-green-dark, #122806);
    white-space: nowrap;
}

.tgl-account__gift-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 24px;
}

.tgl-account__gift-status--active {
    background: var(--tgl-m-green-light);
    color: var(--tgl-m-green-accent);
}

.tgl-account__gift-status--redeemed {
    background: #fef3c7;
    color: #92400e;
}

.tgl-account__gift-copy {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}

.tgl-account__gift-copy:hover {
    border-color: var(--tgl-m-green-accent);
    color: var(--tgl-m-green-accent);
}

@media (max-width: 640px) {
    .tgl-account__gift-stats {
        flex-direction: column;
        gap: 0.75rem;
    }

    .tgl-account__gift-table {
        font-size: 0.8rem;
    }

    .tgl-account__gift-table th:nth-child(4),
    .tgl-account__gift-table td:nth-child(4) {
        display: none;
    }
}

/* ========================================
   AUTH MODAL
   ======================================== */

.tgl-auth {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tgl-auth__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.tgl-auth__card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: tgl-auth-in 0.25s ease-out;
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, -apple-system, sans-serif);
}

@keyframes tgl-auth-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tgl-auth__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.tgl-auth__close:hover {
    color: #374151;
}

.tgl-auth__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark);
    margin: 0 0 0.35rem;
    line-height: 1.15;
}
.tgl-auth__title-soft {
    color: var(--tgl-green-dark, #122806);
    font-weight: inherit;
    font-style: normal;
}
.tgl-auth__title-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: tgl-auth-wave 2.5s ease-in-out 0.4s 2;
}
@keyframes tgl-auth-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tgl-auth__title-wave { animation: none; }
}

.tgl-auth__subtitle {
    font-size: 0.95rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.5rem;
    line-height: 1.45;
}

.tgl-auth__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.tgl-auth__tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.tgl-auth__tab:hover {
    color: #374151;
}

.tgl-auth__tab--active {
    color: var(--tgl-m-green-dark);
    border-bottom-color: var(--tgl-m-green-dark);
}

.tgl-auth__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tgl-auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tgl-auth__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
}

.tgl-auth__input {
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #d1d5db;
    border-radius: 24px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s;
    outline: none;
}

.tgl-auth__input:focus {
    border-color: var(--tgl-m-green-accent);
    box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.1);
}

.tgl-auth__error {
    font-size: 0.8rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.5rem 0.75rem;
    border-radius: 24px;
}

.tgl-auth__submit {
    padding: 0.75rem;
    background: var(--tgl-m-green-dark);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    margin-top: 0.25rem;
}

.tgl-auth__submit:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-auth__submit:active {
    transform: scale(0.98);
}

.tgl-auth__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.tgl-auth__footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--tgl-green-dark, #122806);
    margin: 1.25rem 0 0;
}

.tgl-auth__footer a {
    color: var(--tgl-m-green-accent);
    text-decoration: none;
    font-weight: 500;
}

.tgl-auth__footer a:hover {
    text-decoration: underline;
}

.tgl-auth__code-sent {
    font-size: 0.875rem;
    color: #374151;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.tgl-auth__code-sent strong {
    color: var(--tgl-m-green-dark);
}

.tgl-auth__input--code {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tgl-auth__resend {
    background: none;
    border: none;
    color: var(--tgl-m-green-accent);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-align: center;
}

.tgl-auth__resend:hover {
    text-decoration: underline;
}

.tgl-auth__resend:disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}

@media (max-width: 480px) {
    .tgl-auth__card {
        padding: 1.5rem;
        border-radius: 24px;
    }
}

/* === TGL Brand Guideline — display title override (July 2021 spec) ===
   H1 / display headlines must be Libre Franklin Bold, ALL CAPS.
   Selectors below are the major prominent titles that previously sat in
   Crimson Pro; this aligns them with the brand. Smaller sub-headings
   (.tgl-account__success h3, .tgl-account__history-title, etc.) keep
   the Crimson Pro Light treatment they already have. */
.tgl-pricing__heading,
.tgl-account__onboarding-title,
.tgl-gate__title,
.tgl-auth__title,
.tgl-gift-modal__title,
.tgl-account__section-title,
.tgl-ragbot__upsell-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Account header — logout button on the right of the profile row */
.tgl-account__header { display: flex; align-items: center; gap: 1rem; }
.tgl-account__header-info { flex: 1; min-width: 0; }
/* Matches `.tgl-upsell__cta.tgl-upsell__cta--primary` — dark-green
   fill, Open Sans body font, border, natural case. Text flips to
   Light Green on hover (background stays put per sitewide rule). */
.tgl-account__logout {
    /* inline-flex so the SVG icon + "Log out" label share the same
       vertical center — inline-block was leaving the icon riding at
       the text baseline instead of the middle of the button. */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Match the sitewide canonical button (.tgl-btn / .tgl-header__cta):
       0.55rem 1rem padding, 0.78rem uppercase display font. Previously
       0.8rem 1.5rem / 0.95rem which read as an outsized primary CTA. */
    padding: 0.55rem 1rem;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 1.5px solid var(--tgl-m-green-dark, #122806);
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
/* Downsize the icon in step with the smaller button so it doesn't
   dominate the label. */
.tgl-account__logout svg { width: 14px; height: 14px; }
.tgl-account__logout:hover,
.tgl-account__logout:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
    text-decoration: none;
}

/* === Saves controls (filter chips + sort dropdown) ===
   Renders above .tgl-saves; hidden when total saves <= 3. */
.tgl-saves-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem;
    background: rgba(18, 40, 6, 0.03);
    border-radius: 24px;
}
.tgl-saves-controls__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}
.tgl-saves-controls__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.14);
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-transform: uppercase;
}
.tgl-saves-controls__chip:hover { border-color: var(--tgl-green-dark, #122806); color: var(--tgl-green-dark, #122806); }
.tgl-saves-controls__chip.is-active {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border-color: var(--tgl-green-dark, #122806);
}
.tgl-saves-controls__sort select {
    padding: 0.4rem 2rem 0.4rem 0.8rem;
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.14);
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23122806' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    text-transform: uppercase;
}
.tgl-saves__empty-filter {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: rgba(18, 40, 6, 0.03);
    border-radius: 24px;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: italic;
    color: var(--tgl-green-dark, #122806);
}

/* === Saved-articles cards (Account → Library) === */
.tgl-saves {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .tgl-saves { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

.tgl-saves__item {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tgl-saves__item:hover {
    border-color: #d0d7de;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.tgl-saves__link {
    display: flex;
    align-items: stretch;
    gap: 0;
    color: inherit;
    text-decoration: none;
}
.tgl-saves__thumb {
    flex-shrink: 0;
    width: 110px;
    background: var(--tgl-m-green-light, #e8f5e9);
}
.tgl-saves__thumb img,
.tgl-saves__thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 100%;
}
.tgl-saves__thumb-placeholder {
    background: linear-gradient(135deg, #e8f5e9, #CFD877);
}
.tgl-saves__body {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1rem 0.9rem;
    padding-right: 2.5rem; /* room for the × button */
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
}
.tgl-saves__cat {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tgl-m-green-accent, #122806);
    text-transform: uppercase;
}
.tgl-saves__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: #122806;
    line-height: 1.25;
    margin: 0;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tgl-saves__meta {
    color: var(--tgl-green-dark, #122806);
    font-size: 0.78rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.tgl-saves__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: color 0.15s ease, background 0.15s ease;
}
.tgl-saves__remove:hover { color: #b32d2e; background: #fff; }

/* Recently-read "Clear all" — full-width dark-green pill at the bottom
   of the list. Inherits `.tgl-btn` sizing/hover so it matches every
   other primary CTA on the site. */
.tgl-account__clear-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}
.tgl-account__clear-all:disabled { opacity: 0.5; cursor: not-allowed; }

/* Post-checkout flash notice at the top of the Membership panel.
   Two variants — ok (successful upgrade/downgrade) + info (checkout
   cancelled). Sits on-brand, dark-green text, subtle rounded card. */
.tgl-account__flash {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.25rem;
    border-radius: 24px;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    color: var(--tgl-m-green-dark, #122806);
    line-height: 1.4;
}
.tgl-account__flash--ok   { background: var(--tgl-m-green-light, #CFD877); }
.tgl-account__flash--info { background: #EAE0DE; }

/* Brand-consistent confirm dialog (see `tglConfirmDialog()` in
   tgl-membership.js). Used for destructive-action confirms
   (downgrade, delete, unsubscribe) so we never fall back on the
   browser's native `confirm()` which is off-brand and ugly. */
.tgl-confirm[hidden] { display: none; }
.tgl-confirm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tgl-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 40, 6, 0.55);
    cursor: pointer;
}
.tgl-confirm__card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 1.75rem 1.75rem 1.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    color: var(--tgl-green-dark, #122806);
}
.tgl-confirm__title {
    margin: 0 0 0.5rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
}
.tgl-confirm__body {
    margin: 0 0 1.25rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
}
.tgl-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Lock the background scroll while the modal is open. */
body.tgl-confirm-open { overflow: hidden; }

/* Quiet Stripe portal link, rendered inline at the end of the
   "Member since … · Renews monthly" meta line. Inherits the meta
   font-size/family so it reads as one more meta item, with an
   underline for affordance. Hover → Light Green. */
.tgl-account__membership-billing-link {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: normal;   /* browsers style <button> bold by default; kill that */
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.tgl-account__membership-billing-link:hover,
.tgl-account__membership-billing-link:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
}

/* Invite-friends form — reuses the sitewide `.tgl-content-archive__search`
   pill (icon + input + flush dark-green submit) exactly as-is. Only
   scope-tweak here is a max-width so the pill doesn't stretch across
   the whole account panel. */
.tgl-invites__form {
    max-width: 420px;
    margin: 0 0 1rem;
}
.tgl-invites__form .tgl-content-archive__search { width: 100%; }

/* Count badge in account tabs — visually distinct from the tab label.
   Solid green pill with white number, smaller font, lifted slightly above
   baseline so it reads as a notification-style badge, not part of the word. */
.tgl-account__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.55rem;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 24px;
    background: var(--tgl-m-green-accent, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
    text-transform: uppercase;
}
.tgl-account__tab--active .tgl-account__tab-count {
    background: #fff;
    color: var(--tgl-m-green-dark, #122806);
    box-shadow: 0 0 0 1px var(--tgl-m-green-accent, #122806);
}

/* ========================================
   UPSELL on Membership tab — guides the user up the tier ladder
   ======================================== */
.tgl-upsell { margin-top: 1.5rem; }
.tgl-upsell__lede { margin-bottom: 1.5rem; }
.tgl-upsell__heading {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-m-green-dark, #122806);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.tgl-upsell__sub {
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Two-card upgrade grid (Kennedy view) */
.tgl-upsell__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .tgl-upsell__cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
/* Brand-aligned upsell cards — dark-green surface with white text,
   24px radius (sitewide), Libre Franklin display fonts and Open Sans
   body — matches the button + section patterns used across the site. */
.tgl-upsell__card {
    position: relative;
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.tgl-upsell__card--featured {
    /* Featured pulls the light-green accent border so it stands out
       against sibling cards without breaking the palette. */
    box-shadow: 0 0 0 2px var(--tgl-green-light, #CFD877) inset;
}
.tgl-upsell__card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-m-green-dark, #122806);
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 24px;
    white-space: nowrap;
}
.tgl-upsell__card-tier {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
}
.tgl-upsell__card-price {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin: 0.4rem 0 1rem;
}
.tgl-upsell__perks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
    color: #fff;
}
.tgl-upsell__perks li {
    position: relative;
    padding-left: 1.5rem;
}
.tgl-upsell__perks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tgl-green-light, #CFD877);
    font-weight: 800;
}

.tgl-upsell__cta {
    display: block;
    width: 100%;
    padding: 0.8rem;
    border: 1.5px solid var(--tgl-m-green-dark, #122806);
    background: #fff;
    color: var(--tgl-m-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.tgl-upsell__cta--primary {
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
}
.tgl-upsell__cta:hover { color: var(--tgl-green-light, #CFD877); text-decoration: none; }
.tgl-upsell__cta--primary:hover { color: var(--tgl-green-light, #CFD877); text-decoration: none; }
.tgl-upsell__cta:not(.tgl-upsell__cta--primary):hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-upsell__note {
    margin: 1.25rem 0 0;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.82rem;
    text-align: center;
}

/* Bloor → Kipling compare strip */
.tgl-upsell__compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fafafa;
    border-radius: 24px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.tgl-upsell__col {
    flex: 1;
    text-align: center;
}
.tgl-upsell__col-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 0.25rem;
}
.tgl-upsell__col-tier {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-m-green-dark, #122806);
}
.tgl-upsell__col-price {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.3rem;
    color: var(--tgl-m-green-dark, #122806);
}
.tgl-upsell__col--target {
    background: #fff;
    border: 2px solid var(--tgl-m-green-accent, #122806);
    border-radius: 24px;
    padding: 0.75rem;
}
.tgl-upsell__col-arrow {
    color: var(--tgl-m-green-accent, #122806);
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tgl-upsell__gain-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.95rem;
    color: #122806;
}
.tgl-upsell__gain-list li {
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.45;
}
.tgl-upsell__gain-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tgl-m-green-accent, #122806);
    font-weight: 800;
    font-size: 1.1rem;
}

/* Kipling "thank you" view */
.tgl-upsell--top .tgl-upsell__perks--top {
    background: var(--tgl-m-green-light, #e8f5e9);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
}

/* ========================================
   UPSELL — bigger / more prominent (v2)
   Replaces small two-card layout with a hero banner + large feature cards.
   ======================================== */
.tgl-upsell--hero { margin-top: 2rem; }

.tgl-upsell__hero-banner {
    /* Brand 3-colour gradient with a dark scrim so white type stays readable. */
    background:
        linear-gradient(rgba(13, 59, 30, 0.78), rgba(13, 59, 30, 0.78)),
        url("/wp-content/themes/tgl-theme/assets/img/gradients/3-colour.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    border-radius: 24px;
    padding: 2.5rem 1.75rem;
    text-align: center;
    margin-bottom: 1.75rem;
}
.tgl-upsell__eyebrow {
    display: inline-block;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #CFD877;
    margin-bottom: 0.85rem;
}
.tgl-upsell__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.85rem;
    font-weight: 300;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.2;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 720px) {
    .tgl-upsell__title { font-size: 2.25rem; }
}
.tgl-upsell__lede-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}

/* Big cards */
.tgl-upsell__cards--big {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 720px) {
    .tgl-upsell__cards--big { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.tgl-upsell--single .tgl-upsell__card--big {
    max-width: 520px;
    margin: 0 auto;
}

/* Combined card: dark-green intro on top, white offer block below.
   One unified rounded container, two-tone background — keeps the brand
   colour without the previous "stacked boxes" feel. */
.tgl-upsell__card--combined {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    box-shadow: 0 12px 32px rgba(13, 59, 30, 0.12);
}
.tgl-upsell__card-intro {
    background:
        linear-gradient(rgba(13, 59, 30, 0.78), rgba(13, 59, 30, 0.78)),
        url("/wp-content/themes/tgl-theme/assets/img/gradients/3-colour.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 2rem 1.75rem 1.75rem;
    position: relative;
}
.tgl-upsell__card-intro::after {
    /* Subtle V-shape at the bottom edge so the green melts into the white
       block below instead of meeting it as a hard line. */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #122806 0%, #122806 100%);
}
.tgl-upsell__card--combined .tgl-upsell__card-intro .tgl-upsell__eyebrow {
    color: #CFD877;
    margin: 0 0 0.6rem;
}
.tgl-upsell__card-title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.85rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 0.7rem;
}
@media (min-width: 720px) {
    .tgl-upsell__card-title { font-size: 2.1rem; }
    .tgl-upsell__card-intro { padding: 2.5rem 2rem 2rem; }
}
.tgl-upsell__card-lede {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}
/* Reset the white block's spacing now that the intro lives inside the card. */
.tgl-upsell__card--combined .tgl-upsell__card-head {
    padding: 1.75rem 1.75rem 0;
    margin-top: 0;
}
.tgl-upsell__card--combined .tgl-upsell__perks {
    padding: 1.25rem 1.75rem 0;
}
.tgl-upsell__card--combined .tgl-upsell__cta {
    margin: 1.25rem 1.75rem 1.75rem;
    width: calc(100% - 3.5rem);
}

.tgl-upsell__card--big {
    background: var(--tgl-m-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tgl-upsell__card--big.tgl-upsell__card--featured {
    /* Featured pulls the light-green accent ring instead of a
       different border-color, matching the small-card variant. */
    box-shadow: 0 0 0 2px var(--tgl-green-light, #CFD877) inset;
}
.tgl-upsell__card--big:hover {
    transform: translateY(-2px);
}

.tgl-upsell__card-head { margin-bottom: 1.5rem; }
.tgl-upsell__card-tier-line {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin-bottom: 1rem;
}
/* Tier name — reads as a headline on the dark card, not a tiny
   pill label. Sits inline as bold Franklin uppercase, no pill
   background. */
.tgl-upsell__tier-pill {
    align-self: flex-start;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.tgl-upsell__tier-pill--bloor,
.tgl-upsell__tier-pill--kipling {
    background: transparent;
    color: inherit;
}

.tgl-upsell__tagline {
    color: var(--tgl-green-dark, #122806);
    font-size: 0.92rem;
    line-height: 1.4;
}

.tgl-upsell__price-block {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.4rem 0 0.3rem;
}
.tgl-upsell__price-amount {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--tgl-m-green-dark, #122806);
    line-height: 1;
}
.tgl-upsell__price-period {
    color: var(--tgl-green-dark, #122806);
    font-size: 1.05rem;
    font-weight: 400;
}
.tgl-upsell__save-hint {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 24px;
    margin-top: 0.2rem;
}

/* Big perks list (icon + title + description) */
.tgl-upsell__perks--big {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}
.tgl-upsell__perks--big li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding-left: 0;
}
.tgl-upsell__perks--big li::before { display: none; }   /* override the small-perks check */
.tgl-upsell__perks--big li > div { flex: 1; }
.tgl-upsell__perks--big li strong {
    display: block;
    color: var(--tgl-green-dark, #122806);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
}
.tgl-upsell__perks--big li span {
    display: block;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 1px;
}
.tgl-upsell__perk-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 24px;
    background: var(--tgl-m-green-light, #e8f5e9);
    font-size: 1.15rem;
    line-height: 1;
}

/* Larger CTAs — dark card means the default primary would blend into
   the background, so flip to a white pill with dark-green text. */
.tgl-upsell__card--big .tgl-upsell__cta {
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 24px;
    background: #fff;
    color: var(--tgl-m-green-dark, #122806);
    border: 1.5px solid #fff;
}
.tgl-upsell__card--big .tgl-upsell__cta--primary {
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-m-green-dark, #122806);
    border-color: var(--tgl-green-light, #CFD877);
}
.tgl-upsell__card--big .tgl-upsell__cta:hover,
.tgl-upsell__card--big .tgl-upsell__cta--primary:hover {
    color: var(--tgl-m-green-dark, #122806);
    background: #fff;
    text-decoration: none;
}

/* Force every text child inside the big dark card to inherit the
   card's white text so nothing stays green-on-green. */
.tgl-upsell__card--big .tgl-upsell__tagline,
.tgl-upsell__card--big .tgl-upsell__price-amount,
.tgl-upsell__card--big .tgl-upsell__price-period,
.tgl-upsell__card--big .tgl-upsell__perks--big li strong,
.tgl-upsell__card--big .tgl-upsell__perks--big li span {
    color: #fff;
}
.tgl-upsell__card--big .tgl-upsell__perk-icon {
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-m-green-dark, #122806);
}

.tgl-account__actions--center { justify-content: center; }
/* Manage-billing button sits below the upsell card — give it room to breathe. */
.tgl-upsell--single + .tgl-account__actions--center,
.tgl-upsell--single .tgl-account__actions--center { margin-top: 2rem; }

/* === Membership: period toggle (Monthly / Quarterly / Yearly) === */
.tgl-pricing__period-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto 2.25rem;
    padding: 6px;
    background: rgba(13, 59, 30, 0.06);
    border: 1px solid rgba(13, 59, 30, 0.1);
    border-radius: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
}
.tgl-pricing__header + .tgl-pricing__period-toggle {
    display: flex;
    width: max-content;
}
.tgl-pricing__period-toggle {
    /* Center the toggle in its parent — header is centered already, but the
       inline-flex pill itself needs explicit margin auto. */
    display: flex;
    width: max-content;
}
.tgl-pricing__period-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 0;
    border-radius: 24px;
    padding: 0.55rem 1.1rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-pricing__period-btn:hover { color: var(--tgl-green-dark, #122806); opacity: 1; }
.tgl-pricing__period-btn.is-active {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 59, 30, 0.18);
}
.tgl-pricing__savings-badge {
    display: inline-flex;
    align-items: center;
    background: #f59e0b;
    color: #122806;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 24px;
    line-height: 1;
}
.tgl-pricing__period-btn.is-active .tgl-pricing__savings-badge { background: #fde68a; color: #5a3b00; }

/* Hide non-active price variants for the chosen billing period. */
.tgl-pricing__price-variant { display: none; }
.tgl-pricing__price-variant.is-active { display: inline-block; }

/* === Donate block — sits below the three tier cards === */
.tgl-donate {
    margin: 3rem auto 0;
    padding: 2.25rem 1.75rem;
    background: var(--tgl-green-dark, #122806);
    border-radius: 24px;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(13, 59, 30, 0.18);
    max-width: 720px;
    position: relative;
    overflow: hidden;
}
.tgl-donate::before {
    /* Subtle brand-gradient strip across the top so this block reads as
       part of the same family as the page-bar / footer. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: url("/wp-content/themes/tgl-theme/assets/img/gradients/3-colour.png") center / cover no-repeat;
}
.tgl-donate__inner { max-width: 560px; margin: 0 auto; }
.tgl-donate__eyebrow {
    display: inline-block;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-light, #cfd877);
    margin-bottom: 0.65rem;
}
.tgl-donate__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}
.tgl-donate__text {
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1.5rem;
}
.tgl-donate__amounts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.tgl-donate__amount {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 24px;
    padding: 0.55rem 1.15rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-transform: uppercase;
}
.tgl-donate__amount:hover  { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.tgl-donate__amount.is-active,
.tgl-donate__amount--featured.is-active,
.tgl-donate__amount.is-active:hover {
    background: var(--tgl-green-light, #cfd877);
    color: var(--tgl-green-dark, #122806);
    border-color: var(--tgl-green-light, #cfd877);
}
.tgl-donate__custom {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    padding: 0 0.85rem 0 0.95rem;
    color: #fff;
    transition: border-color 0.15s ease;
}
.tgl-donate__custom:focus-within { border-color: var(--tgl-green-light, #cfd877); }
.tgl-donate__custom-prefix { font-weight: 700; opacity: 0.75; margin-right: 0.2rem; }
.tgl-donate__custom-input {
    background: transparent;
    border: 0;
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    width: 90px;
    padding: 0.55rem 0;
    outline: none;
    text-transform: uppercase;
}
.tgl-donate__custom-input::placeholder { color: rgba(255, 255, 255, 0.6); }
/* Hide spinner buttons on the custom-amount field. */
.tgl-donate__custom-input::-webkit-outer-spin-button,
.tgl-donate__custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tgl-donate__custom-input { -moz-appearance: textfield; }

.tgl-donate__frequency {
    display: inline-flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 0 0 1.5rem;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
}
.tgl-donate__frequency label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.tgl-donate__frequency input { accent-color: var(--tgl-green-light, #cfd877); }

.tgl-donate__cta {
    background: var(--tgl-green-light, #cfd877);
    color: var(--tgl-green-dark, #122806);
    border: 0;
    border-radius: 24px;
    padding: 0.85rem 2rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.tgl-donate__cta:hover { text-decoration: none; }
/* Light-Green bg base — text→LGreen would be invisible; bg + shadow swap removed per brand hover rule. */
.tgl-donate__note {
    margin: 1.25rem 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}
.tgl-donate__note a { color: var(--tgl-green-light, #cfd877); text-decoration: underline; }

/* Per-newsletter opt-in rows in the Preferences tab */
.tgl-account__newsletters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.tgl-account__newsletter-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    background: #fff;
}
.tgl-account__newsletter-row:hover { border-color: #d0d7de; background: #fafbfa; }
.tgl-account__newsletter-row input[type="checkbox"] {
    margin-top: 0.25rem;
    flex: 0 0 auto;
    accent-color: var(--tgl-m-green-accent, #122806);
    width: 18px; height: 18px;
}
.tgl-account__newsletter-row:has(input:checked) {
    border-color: var(--tgl-m-green-accent, #122806);
    background: #f3f8ed;
}
.tgl-account__newsletter-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.tgl-account__newsletter-body strong {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    color: var(--tgl-m-green-dark, #122806);
    font-size: 0.95rem;
    text-transform: uppercase;
}
.tgl-account__newsletter-body span {
    color: var(--tgl-green-dark, #122806);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ── Invite Friends ── */
.tgl-invites {
    padding: 0;
}
/* Invite-form input styling now lives on the shared
   `.tgl-content-archive__search` pill (see section further up).
   The old bordered-standalone-input rules were removed because they
   redrew a grey border inside the pill wrapper. */
.tgl-invites__sent-title {
    font-family: var(--tgl-font-body, 'Open Sans', 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-m-green-dark, #122806);
    margin: 0 0 0.5rem;
}
.tgl-invites__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tgl-invites__list li {
    padding: 0.65rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}
.tgl-invites__list li:last-child {
    border-bottom: none;
}
.tgl-invites__list li strong {
    color: var(--tgl-m-green-dark, #122806);
    font-weight: 600;
}

/* =====================================================================
   Shared auth-form partial — used by:
     - the user-icon modal (.tgl-auth)
     - the inline registration wall (.tgl-wall--registration)
   ===================================================================== */
.tgl-auth-form { display: flex; flex-direction: column; gap: 1rem; }
.tgl-auth-form__social { display: flex; flex-direction: column; gap: 0.6rem; }
.tgl-auth-form__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba(18, 40, 6, 0.18);
    border-radius: 24px;
    background: #fff;
    color: var(--tgl-green-dark, #122806);
    /* OAuth convention: Open Sans (or vendor system font) in Title Case.
       Google/Apple/Facebook brand guidelines all use mixed-case sans
       — uppercasing "Continue with Google" reads as off-brand. */
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: 0.92rem;
    text-transform: none;
    /* !important — button-shaped controls should NEVER underline,
       regardless of state (hover, focus, visited). Explicit override
       for the global `a:hover { text-decoration: underline }` rule
       that would otherwise apply to `<a class="…social-btn">`. */
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tgl-auth-form__social-btn:hover:not([disabled]),
.tgl-auth-form__social-btn:focus-visible:not([disabled]) {
    background: var(--tgl-cream, #f5f1eb);
    border-color: var(--tgl-green-accent, #122806);
}
.tgl-auth-form__social-btn:disabled,
.tgl-auth-form__social-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tgl-auth-form__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}
.tgl-auth-form__divider::before,
.tgl-auth-form__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(18, 40, 6, 0.15);
}

.tgl-auth-form__email,
.tgl-auth-form__code { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; }
/* Native `hidden` must beat `display: flex` so the OTP step stays invisible
   until the email step succeeds, and the modal stays closed by default. */
.tgl-auth-form [hidden],
.tgl-auth[hidden],
[hidden].tgl-auth-form__email,
[hidden].tgl-auth-form__code { display: none !important; }
.tgl-auth-form__label {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-auth-form__input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1.5px solid rgba(18, 40, 6, 0.2);
    border-radius: 24px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tgl-green-dark, #122806);
    background: #fff;
    box-sizing: border-box;
}
.tgl-auth-form__input:focus {
    outline: none;
    border-color: var(--tgl-green-accent, #122806);
    box-shadow: 0 0 0 3px rgba(61, 122, 28, 0.15);
}
.tgl-auth-form__input--code {
    font-size: 1.3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tgl-auth-form__submit {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 0.85rem 1rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0.4rem;
    transition: background 0.15s;
}
.tgl-auth-form__submit:hover {
    color: var(--tgl-green-light, #CFD877);
}
.tgl-auth-form__submit:disabled { background: rgba(18, 40, 6, 0.45); cursor: not-allowed; }
.tgl-auth-form__link {
    background: transparent;
    border: 0;
    padding: 0.3rem 0;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.85rem;
    color: var(--tgl-green-accent, #122806);
    text-decoration: underline;
    cursor: pointer;
    align-self: center;
}
.tgl-auth-form__link:hover { color: var(--tgl-green-dark, #122806); }

.tgl-auth-form__error {
    background: rgba(179, 45, 46, 0.08);
    border-left: 3px solid #b32d2e;
    padding: 0.5rem 0.75rem;
    color: #b32d2e;
    font-size: 0.88rem;
    border-radius: 24px;
}
.tgl-auth-form__code-sent {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    color: var(--tgl-green-dark, #122806);
    font-size: 0.95rem;
    margin: 0;
}
/* Reassuring hint under the Continue button — clarifies the same flow handles
   returning members (login code) and new visitors (account creation). */
.tgl-auth-form__hint {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    margin: 0.4rem 0 0;
    text-align: center;
}

/* The wall and the modal use slightly different containers; ensure consistent
   form max-width so it never stretches edge-to-edge in either context. */
.tgl-wall--registration .tgl-auth-form,
.tgl-auth__card .tgl-auth-form { max-width: 360px; margin: 0 auto; width: 100%; }

/* ── My events tab on the account dashboard ── */
.tgl-account__events { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1rem; }

.tgl-account__event-card {
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.1);
    border-radius: 24px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.tgl-account__event-card:hover {
    border-color: var(--tgl-green-dark, #122806);
    box-shadow: 0 4px 16px rgba(18, 40, 6, 0.08);
}
.tgl-account__event-card--past { opacity: 0.75; }
.tgl-account__event-card--past:hover { opacity: 1; }

.tgl-account__event-link {
    display: grid;
    grid-template-columns: 120px 1fr;
    text-decoration: none;
    color: inherit;
    min-height: 140px;
}

.tgl-account__event-thumb {
    background-size: cover;
    background-position: center;
    min-height: 100%;
}
.tgl-account__event-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tgl-green-lightest, #f0f5ec);
    color: var(--tgl-green-accent, #122806);
}

.tgl-account__event-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tgl-account__event-top {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.tgl-account__event-cal {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    background: var(--tgl-green-lightest, #f0f5ec);
    border-radius: 24px;
    padding: 0.3rem 0.5rem;
    flex-shrink: 0;
}
.tgl-account__event-cal-month {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    line-height: 1;
}
.tgl-account__event-cal-day {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.2;
    text-transform: uppercase;
}

.tgl-account__event-header { flex: 1; min-width: 0; }

.tgl-account__event-title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.3;
}

.tgl-account__event-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tgl-account__badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 24px;
}
.tgl-account__badge--confirmed { background: #e6f4e6; color: #122806; }
.tgl-account__badge--pending   { background: #fef3cd; color: #856404; }
.tgl-account__badge--attended  { background: #e6f4e6; color: #122806; }
.tgl-account__badge--noshow    { background: #fde8e8; color: #b32d2e; }
.tgl-account__badge--format    { background: rgba(18, 40, 6, 0.06); color: var(--tgl-green-dark, #122806); }

.tgl-account__event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.tgl-account__event-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-account__event-detail svg { flex-shrink: 0; opacity: 0.55; }
.tgl-account__event-addr {
    display: block;
    font-size: 0.78rem;
    color: var(--tgl-green-dark, #122806);
    margin-top: 0.1rem;
}

.tgl-account__event-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(18, 40, 6, 0.06);
    margin-top: auto;
}
.tgl-account__event-ticket {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-account__event-ticket svg { opacity: 0.45; }
.tgl-account__event-price {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
    margin-left: auto;
    text-transform: uppercase;
}
.tgl-account__event-price--free {
    color: var(--tgl-green-accent, #122806);
}

/* Responsive: stack thumbnail above content on small screens */
@media (max-width: 540px) {
    .tgl-account__event-link {
        grid-template-columns: 1fr;
    }
    .tgl-account__event-thumb {
        height: 140px;
    }
}

/* ====================================================================
   Follow author button + account "Following" tab
   ==================================================================== */

.tgl-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 8px 22px;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 24px;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    line-height: 1;
}
.tgl-follow-btn:hover {
    color: var(--tgl-green-light, #CFD877);
}
.tgl-follow-btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: 2px solid var(--tgl-green-accent, #122806);
    outline-offset: 2px;
}
.tgl-follow-btn[disabled] { opacity: .65; cursor: progress; }

/* Outline state when already following — green text + border on transparent.
   On hover we flip to a solid muted-red so the destructive intent reads
   immediately. Layout stays stable (border keeps the same pill width) and
   the "Un" prefix appears via the ::before rule below. */
.tgl-follow-btn[data-tgl-follow-state="following"] {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
}
/* Following-state hover: brand Orange background — warm accent that
   reads as "action available" without shouting. Text stays Dark Green
   so contrast holds. Label text swaps to "Unfollow" below. */
.tgl-follow-btn[data-tgl-follow-state="following"]:hover,
.tgl-follow-btn[data-tgl-follow-state="following"]:focus-visible {
    background: #EDC196;
    border-color: #EDC196;
    /* Dark Green wins here — the generic `.tgl-follow-btn:hover` a few
       rules up flips text to Light Green (which reads as low-contrast
       on the pink hover surface). Explicit !important because the base
       rule + the ::before inheritance path both need to lose. */
    color: var(--tgl-green-dark, #122806) !important;
}
/* Text swap: hide the original "Following" text and overlay
   "Unfollow" via ::before. Absolute positioning keeps the button
   from resizing between hover and rest states. */
.tgl-follow-btn[data-tgl-follow-state="following"]:hover .tgl-follow-btn__label,
.tgl-follow-btn[data-tgl-follow-state="following"]:focus-visible .tgl-follow-btn__label {
    position: relative;
    visibility: hidden;
}
.tgl-follow-btn[data-tgl-follow-state="following"]:hover .tgl-follow-btn__label::before,
.tgl-follow-btn[data-tgl-follow-state="following"]:focus-visible .tgl-follow-btn__label::before {
    content: "Unfollow";
    visibility: visible;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
    color: var(--tgl-green-dark, #122806);
}

/* State icon — plus (not following) / checkmark (following). Both SVGs
   are always in the DOM; CSS shows the one that matches the current
   data-tgl-follow-state so JS just flips the attribute (no re-render). */
.tgl-follow-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}
.tgl-follow-btn[data-tgl-follow-state="not"] .tgl-follow-btn__icon--check,
.tgl-follow-btn[data-tgl-follow-state="following"] .tgl-follow-btn__icon--plus {
    display: none;
}

/* Account: Following tab list */
.tgl-account__following {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
/* No wrapper chrome — the byline `card` variant inside is already a pill. */
.tgl-account__following-card {
    list-style: none;
}
.tgl-account__following-recent {
    list-style: none;
    margin: .75rem 0 0;
    padding: .75rem 0 0;
    border-top: 1px solid var(--tgl-border, #e5e7eb);
    display: grid;
    gap: .4rem;
}
.tgl-account__following-recent li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
}
.tgl-account__following-recent a {
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    font-weight: 500;
}
.tgl-account__following-recent a:hover { color: var(--tgl-green-accent, #122806); }
.tgl-account__following-date {
    color: var(--tgl-meta, #57606a);
    font-size: .8rem;
    white-space: nowrap;
}

/* --- Promo code entry on pricing table --------------------------------- */
.tgl-pricing__discounted { margin-top: .35em; }
.tgl-pricing__discounted-amount {
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 1.35rem; font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-pricing__discounted-note {
    display: block; font-size: .8rem; color: var(--tgl-meta, #57606a);
}

/* ──────────────────────────────────────────────────────────────────────────
   Donate — Payment section (revealed after "Proceed to payment options")
   Lives inside the /support/ hero, below the amount card.
   ────────────────────────────────────────────────────────────────────────── */
/* Payment step lives inside the dark-green `.tgl-support__card`, so
   default text = white. Individual labels + inputs stay dark-green
   against their own light backgrounds. */
.tgl-donate-payment {
    color: #fff;
}
.tgl-donate-payment[hidden] { display: none; }

.tgl-donate-payment__back {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 12px;
    text-decoration: underline;
}
.tgl-donate-payment__back:hover { color: var(--tgl-green-light, #CFD877); }

.tgl-donate-payment__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 6px;
    color: #fff;
}
.tgl-donate-payment__summary {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 6px;
}
.tgl-donate-payment__help {
    font-size: 0.9rem;
    color: #fff;
    margin: 0 0 18px;
}

.tgl-donate-payment__fields {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}
.tgl-donate-payment__fields label {
    display: grid;
    gap: 4px;
    font-size: 0.9rem;
}
.tgl-donate-payment__fields label:not(.tgl-donate-payment__optin) > span {
    /* Matches `.tgl-donate-demo-label` above — Franklin bold uppercase,
       white, small caption size. */
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
}
.tgl-donate-payment__fields input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 24px;
    font-size: 1rem;
    font-family: inherit;
}
.tgl-donate-payment__fields input:focus {
    outline: none;
    border-color: var(--tgl-green-dark, #122806);
    box-shadow: 0 0 0 3px rgba(207, 216, 119, 0.4);
}

.tgl-donate-payment__element {
    margin-bottom: 18px;
    min-height: 60px;
}

.tgl-donate-payment__error {
    color: #b32d2e;
    font-size: 0.9rem;
    margin-bottom: 12px;
    min-height: 1.2em;
}

/* Outlined-pill style matching `.tgl-aj-archive__all-btn` — same
   geometry (1.5px border, 4px radius, 0.75rem/1.6rem padding,
   Libre Franklin 700 0.85rem uppercase) but inverted to white
   border + white label because this button sits on the dark-green
   payment card. Hover fills with white + flips label to dark-green
   (same "flip-to-fill" behaviour as the AJ button). */
.tgl-donate-payment__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.6rem;
    border: 1.5px solid #ffffff;
    border-radius: 24px;
    background: transparent;
    color: #ffffff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-donate-payment__submit:hover:not(:disabled),
.tgl-donate-payment__submit:focus-visible:not(:disabled) {
    background: #ffffff;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
}
.tgl-donate-payment__submit:disabled {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* ===================================================================
   Demo-mode mock of Stripe Payment Element. Visual approximation of
   Stripe's tabbed UI so the editor can preview the donation flow
   without configuring API keys.
   =================================================================== */
.tgl-donate-demo-banner {
    background: #fff7e6; color: #7c5800;
    border: 1px solid #f2cc7a; border-radius: 24px;
    padding: 10px 14px; margin: 0 0 16px;
    font-size: .85rem;
}

/* Method tabs — three buttons across the top */
.tgl-donate-demo-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin: 0 0 16px;
}
/* Matches the sitewide outlined-button pattern (see
   `.tgl-aj-archive__all-btn`): transparent bg + 1.5px dark-green
   border + 4px radius + uppercase Libre Franklin. Hover flips to
   filled dark-green with white label. Active tab is permanently
   filled (same visual as hover) to indicate selection. */
/* Payment-method tabs sit on the dark-green payment card — white
   border + white label so they read cleanly against the dark
   canvas. Hover/active flip to a filled Light Green wash with
   dark-green label so the selected tab pops. */
.tgl-donate-demo-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #fff;
    border-radius: 24px;
    background: transparent;
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-donate-demo-tabs button:hover,
.tgl-donate-demo-tabs button:focus-visible {
    background: #fff;
    color: var(--tgl-green-dark, #122806);
}
.tgl-donate-demo-tabs button.is-active {
    background: #fff;
    color: var(--tgl-green-dark, #122806);
}
.tgl-donate-demo-tabs button svg { flex: 0 0 auto; }

.tgl-donate-demo-fields {
    display: flex; flex-direction: column; gap: 14px;
}
/* `display: flex` above overrides the browser default for [hidden]
   (display: none) — re-apply it so tab switching actually hides panels. */
.tgl-donate-demo-fields[hidden] { display: none; }
/* Field labels sit on the dark-green payment card — white text so
   they're visible. */
.tgl-donate-demo-label {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
}
.tgl-donate-demo-label small {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    text-transform: none;
}
/* Demo inputs — white pill on the dark-green card, dark-green
   text. Border thick enough to read against the dark canvas even
   at rest. Matches the sitewide form-input radius (24px) and the
   real `.tgl-donate-payment__fields input` styling so editors
   can't tell the mock from the live Stripe fields. */
.tgl-donate-demo-input {
    padding: 10px 12px;
    border: 1.5px solid #fff;
    border-radius: 24px;
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
    background: #fff;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
    -webkit-text-fill-color: var(--tgl-green-dark, #122806);
    opacity: 1;
}
.tgl-donate-demo-input[disabled] {
    background: #fff;
    color: var(--tgl-green-dark, #122806);
    cursor: not-allowed;
    /* Kill Safari/iOS default disabled fade so the placeholder /
       value stays fully readable in the mock. */
    -webkit-text-fill-color: var(--tgl-green-dark, #122806);
    opacity: 1;
}
.tgl-donate-demo-input::placeholder {
    color: rgba(18, 40, 6, 0.55);
    -webkit-text-fill-color: rgba(18, 40, 6, 0.55);
    opacity: 1;
}
/* <select> variant — strip the native browser chrome so it matches
   the white pill of the surrounding text inputs, then add an inline
   SVG caret on the right. */
select.tgl-donate-demo-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23122806' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

/* CARD — card number on top, expiry+CVC stacked into one bordered block */
.tgl-donate-demo-cardstack {
    border: 1px solid #d0d7de; border-radius: 24px;
    overflow: hidden; background: #fff;
}
.tgl-donate-demo-cardstack .tgl-donate-demo-input {
    border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid #d0d7de;
}
.tgl-donate-demo-cardrow {
    display: grid; grid-template-columns: 1fr 1fr;
}
.tgl-donate-demo-cardrow .tgl-donate-demo-input:first-child {
    border-right: 1px solid #d0d7de;
}
.tgl-donate-demo-cardrow .tgl-donate-demo-input { border-bottom: 0; }

/* PAYPAL */
.tgl-donate-demo-paypal-box {
    background: #fff; border: 1px solid #d0d7de; border-radius: 24px;
    padding: 18px 20px; text-align: center;
}
.tgl-donate-demo-paypal-box p {
    margin: 0; color: #30313d; font-size: .92rem; line-height: 1.5;
}

/* BANK / ACSS */
.tgl-donate-demo-hint {
    margin: 0; padding: 10px 12px;
    background: #f0f6ff; border-radius: 24px;
    font-size: .85rem; color: #1a4d8c;
}
.tgl-donate-demo-bankrow {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tgl-donate-demo-mandate {
    background: #fafbfc; border: 1px solid #e1e4e8; border-radius: 24px;
    padding: 12px 14px;
    font-size: .78rem; color: #4b5563; line-height: 1.5;
}
.tgl-donate-demo-mandate a { color: #1a4d8c; }

/* Donate opt-in: "Create a free Kennedy account" checkbox below email field */
.tgl-donate-payment__optin {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 0;
    /* No background — sits directly on the dark-green payment card
       with white text. */
    background: transparent;
    border-radius: 0;
    border: 0;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.45;
    color: #fff;
}
.tgl-donate-payment__optin a {
    color: inherit;
    text-decoration: underline;
}
.tgl-donate-payment__optin input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--tgl-dark-green, #122806);
    width: 18px; height: 18px;
}
.tgl-donate-payment__optin strong { font-weight: 700; }
/* Opt-in body copy — Open Sans regular so the long explanatory
   sentence reads as body text, not headline weight. */
#tgl-donate-optin-body {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-weight: 400;
}

/* === Demo-mode UI (banner + mock Stripe Payment Element) ===
   Rendered by TGL_Stripe::render_demo_banner() and the demo-mock
   JS (see tgl-donate.js `renderDemoMockUI`) when Stripe keys aren't
   configured. All hidden by default so the mocks don't interfere
   with the real payment-card design while we're pre-launch — once
   real Stripe keys are wired, this UI never renders at all, so
   these rules become naturally moot. Delete the `display: none`
   overrides below if you want the mocks back on staging. */
/* Hide only the yellow "Demo mode" banners — leave the mock
   Stripe UI (payment-method tabs + fake card fields) visible so
   the payment card still has content while pre-Stripe. */
.tgl-demo-banner,
.tgl-donate-demo-banner {
    display: none !important;
}
.tgl-demo-banner {
    display: none;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: #fff7e6;
    border: 1px solid #f0c66c;
    border-radius: 24px;
    color: #7c5800;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
}
.tgl-demo-banner__dot {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: #dba617;
    box-shadow: 0 0 0 4px rgba(219, 166, 23, 0.18);
    animation: tgl-demo-pulse 1.6s ease-in-out infinite;
}
.tgl-demo-banner__body { display: flex; flex-direction: column; gap: 2px; }
.tgl-demo-banner__body strong { color: #5c4100; font-weight: 700; }
@keyframes tgl-demo-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(219, 166, 23, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(219, 166, 23, 0.06); }
}

/* ------------------ Following sub-tabs (Authors/Topics/Locations) ---
   Sits inside the .tgl-account__panel[data-panel="following"] section.
   Pill-style radio-like tabs. Reuses .tgl-follow-btn for the unfollow
   toggle on each topic/location row so tgl-follow-topic.js drives
   state without extra wiring. */
.tgl-account__subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 1.75rem;
    padding: 0;
    border-bottom: 1px solid rgba(18, 40, 6, 0.08);
}
.tgl-account__subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tgl-meta, #57606a);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-transform: uppercase;
}
.tgl-account__subtab:hover,
.tgl-account__subtab:focus-visible {
    color: var(--tgl-green-dark, #122806);
    outline: none;
}
.tgl-account__subtab--active {
    color: var(--tgl-green-dark, #122806);
    border-bottom-color: var(--tgl-green-dark, #122806);
}
.tgl-account__subtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    background: rgba(18, 40, 6, 0.08);
    border-radius: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
}
.tgl-account__subtab--active .tgl-account__subtab-count {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}

.tgl-account__subpanel { display: none; }
.tgl-account__subpanel--active { display: block; }

/* Topic / location list rows — reuse .tgl-account__following list
   container. Each card = term name + Following pill + recent posts */
.tgl-account__following--topics .tgl-account__following-card {
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid rgba(18, 40, 6, 0.08);
    border-radius: 24px;
    background: #fff;
}
.tgl-account__following-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}
.tgl-account__following-name {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    text-transform: uppercase;
}
.tgl-account__following-name:hover { color: var(--tgl-green-accent, #122806); }
.tgl-account__following-recent {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tgl-account__following-recent li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.tgl-account__following-recent a {
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    flex: 1;
    line-height: 1.35;
}
.tgl-account__following-recent a:hover { color: var(--tgl-green-accent, #122806); }
.tgl-account__following-date {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    color: var(--tgl-meta, #57606a);
    white-space: nowrap;
}