/* Rikoooo account surface extracted from custom.css - Codex 2026-07-08. */

/* Native Joomla MFA views adapted to the Gravity template. */
#tm-content .riko-mfa-page,
#tm-content .riko-mfa-page * {
    box-sizing: border-box;
}

#tm-content .riko-mfa-page {
    width: min(100%, 820px);
    margin: 18px auto 42px;
    overflow: hidden;
    border: 1px solid var(--riko-line);
    border-radius: 16px;
    background: var(--riko-surface);
    color: var(--riko-ink);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--riko-brand-deep) 13%, transparent);
}

#tm-content .riko-mfa-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--riko-inverse) 18%, transparent);
    background: url("../images/home-navigation.svg") right center / auto 100% no-repeat,
        linear-gradient(120deg, var(--riko-brand-deep), var(--riko-brand));
}

#tm-content .riko-mfa-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent);
    color: var(--riko-on-brand);
    font-size: 26px;
}

#tm-content .riko-mfa-icon-mark {
    color: inherit;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

#tm-content .riko-mfa-status {
    margin: 0 0 7px;
    color: var(--riko-on-brand-muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    text-transform: uppercase;
}

#tm-content .riko-mfa-status strong {
    color: inherit;
    font-weight: inherit;
}

#tm-content .riko-mfa-heading h1 {
    margin: 0;
    color: var(--riko-on-brand) !important;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.16;
    letter-spacing: 0;
    text-shadow: none !important;
}

#tm-content .riko-mfa-heading p {
    margin: 7px 0 0;
    color: color-mix(in srgb, var(--riko-on-brand) 88%, transparent);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
}

#tm-content .riko-mfa-help {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 32%, transparent);
    border-radius: 50%;
    color: var(--riko-on-brand) !important;
    text-decoration: none !important;
}

#tm-content .riko-mfa-help:hover,
#tm-content .riko-mfa-help:focus {
    background: color-mix(in srgb, var(--riko-inverse) 14%, transparent);
}

#tm-content .riko-mfa-content {
    padding: 24px;
}

#tm-content .riko-mfa-message {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-left: 4px solid var(--riko-action);
    border-radius: 0 8px 8px 0;
    background: var(--riko-surface-soft);
    color: var(--riko-muted);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.55;
}

#tm-content .riko-mfa-message > :first-child {
    margin-top: 0;
}

#tm-content .riko-mfa-message > :last-child {
    margin-bottom: 0;
}

#tm-content .riko-mfa-form,
#tm-content .riko-mfa-field {
    display: grid;
    gap: 10px;
}

#tm-content .riko-mfa-field label {
    margin: 0;
    color: var(--riko-ink);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

#tm-content .riko-mfa-input,
#tm-content .riko-mfa-form input[type="text"],
#tm-content .riko-mfa-form input[type="tel"],
#tm-content .riko-mfa-form input[type="number"] {
    width: min(100%, 360px) !important;
    height: 52px !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid var(--riko-line) !important;
    border-radius: 8px !important;
    background: var(--riko-surface) !important;
    color: var(--riko-ink) !important;
    font-size: 20px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 52px !important;
    box-shadow: none !important;
}

#tm-content .riko-mfa-input:focus,
#tm-content .riko-mfa-form input:focus {
    border-color: var(--riko-focus) !important;
    background: var(--riko-surface) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 14%, transparent) !important;
}

#tm-content .riko-mfa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
}

#tm-content .riko-mfa-primary,
#tm-content .riko-mfa-logout {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

#tm-content .riko-mfa-primary {
    min-width: 150px;
    border-color: var(--riko-action) !important;
    background: var(--riko-action) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--riko-brand-deep) 20%, transparent);
}

#tm-content .riko-mfa-logout {
    border-color: color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface));
    background: var(--riko-surface);
    color: var(--riko-danger) !important;
}

#tm-content .riko-mfa-primary:hover,
#tm-content .riko-mfa-primary:focus,
#tm-content .riko-mfa-logout:hover,
#tm-content .riko-mfa-logout:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--riko-brand-deep) 14%, transparent);
}

#tm-content .riko-mfa-switch {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-mfa-switch a {
    color: var(--riko-link) !important;
    font-weight: 800;
    text-decoration: none !important;
}

#tm-content .riko-mfa-switch a:hover,
#tm-content .riko-mfa-switch a:focus {
    text-decoration: underline !important;
}

#tm-content .riko-mfa-post-message {
    margin-top: 22px;
    color: var(--riko-muted);
    line-height: 1.5;
}

#tm-content .riko-mfa-methods {
    display: grid;
    gap: 12px;
}

#tm-content .riko-mfa-method {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 24px;
    gap: 15px;
    align-items: center;
    min-height: 76px;
    padding: 11px 15px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-ink) !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#tm-content .riko-mfa-method:hover,
#tm-content .riko-mfa-method:focus {
    border-color: var(--riko-focus);
    background: var(--riko-surface);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent);
}

#tm-content .riko-mfa-method-image {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--riko-surface-soft);
}

#tm-content .riko-mfa-method-image img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

#tm-content .riko-mfa-method-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#tm-content .riko-mfa-method-copy strong {
    overflow-wrap: anywhere;
    color: var(--riko-ink);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.3;
}

#tm-content .riko-mfa-method-copy small {
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 650;
}

#tm-content .riko-mfa-method-arrow {
    color: var(--riko-action);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
}

#tm-content .riko-mfa-select-footer {
    display: flex;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-mfa-page a:focus-visible,
#tm-content .riko-mfa-page button:focus-visible,
#tm-content .riko-mfa-page input:focus-visible {
    outline: 3px solid var(--riko-focus) !important;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    #tm-content .riko-mfa-page {
        margin: 10px auto 28px;
    }

    #tm-content .riko-mfa-header {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 21px 18px;
    }

    #tm-content .riko-mfa-icon {
        width: 46px;
        height: 46px;
        font-size: 21px;
    }

    #tm-content .riko-mfa-heading h1 {
        font-size: 24px;
    }

    #tm-content .riko-mfa-help {
        grid-column: 2;
        grid-row: 2;
        width: 36px;
        height: 36px;
    }

    #tm-content .riko-mfa-content {
        padding: 20px 18px;
    }

    #tm-content .riko-mfa-input,
    #tm-content .riko-mfa-form input[type="text"],
    #tm-content .riko-mfa-form input[type="tel"],
    #tm-content .riko-mfa-form input[type="number"] {
        width: 100% !important;
    }

    #tm-content .riko-mfa-actions,
    #tm-content .riko-mfa-select-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-mfa-primary,
    #tm-content .riko-mfa-logout {
        width: 100%;
    }

    #tm-content .riko-mfa-method {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
        gap: 11px;
        padding: 10px 12px;
    }

    #tm-content .riko-mfa-method-image {
        width: 44px;
        height: 44px;
    }

    #tm-content .riko-mfa-method-image img {
        width: 30px;
        height: 30px;
    }
}

/* Rikoooo register page redesign v1 - Codex 2026-06-25 */
#tm-content .riko-register-page {
    width: 100%;
    max-width: none;
    margin: 0 auto 36px;
    color: var(--riko-ink);
}

#tm-content .riko-register-page,
#tm-content .riko-register-page * {
    box-sizing: border-box;
}

#tm-content .riko-register-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 22px;
    padding: clamp(24px, 3.2vw, 44px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--riko-brand) 96%, transparent) 0%, color-mix(in srgb, var(--riko-brand-end) 94%, transparent) 100%),
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--riko-inverse) 18%, transparent), transparent 26%);
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--riko-brand-deep) 14%, transparent);
}

#tm-content .riko-register-hero:before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--riko-brand-deep) 28%, transparent), transparent 62%),
        radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--riko-inverse) 18%, transparent), transparent 28%);
    content: "";
    pointer-events: none;
}

#tm-content .riko-register-hero-copy {
    position: relative;
    z-index: 1;
}

#tm-content .riko-register-eyebrow {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    width: fit-content;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--riko-action) 26%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-surface) 86%, transparent);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 900;
    line-height: 28px;
    text-transform: uppercase;
}

#tm-content .riko-register-hero h1 {
    max-width: 800px;
    margin: 16px 0 14px;
    color: var(--riko-on-brand) !important;
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-register-lead {
    max-width: 760px;
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 94%, transparent);
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 750;
    line-height: 1.46;
}

#tm-content .riko-register-google-card h2,
#tm-content .riko-register-trust-card h2,
#tm-content .riko-register-form-heading h2 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.18;
}

#tm-content .riko-register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
}

#tm-content .riko-register-form-card,
#tm-content .riko-register-google-card,
#tm-content .riko-register-trust-card {
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-register-form-card {
    padding: clamp(20px, 2.5vw, 34px);
}

#tm-content .riko-register-form-heading {
    display: grid;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--riko-line);
}

#tm-content .riko-register-form-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--riko-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.48;
}

#tm-content .riko-register-form-heading small {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 850;
    line-height: 28px;
}

#tm-content .riko-register-form {
    margin: 0;
}

#tm-content .riko-register-form fieldset {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

#tm-content .riko-register-fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#tm-content .riko-register-field {
    min-width: 0;
}

#tm-content .riko-register-field-jform_params_language,
#tm-content .riko-register-field-jform_captcha,
#tm-content .riko-register-field-spacer {
    grid-column: 1 / -1;
}

#tm-content .riko-register-label {
    margin-bottom: 7px;
    color: var(--riko-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
}

#tm-content .riko-register-label label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#tm-content .riko-register-label .star {
    color: var(--riko-rating);
}

#tm-content .riko-register-label .optional {
    margin-left: 8px;
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 750;
}

#tm-content .riko-register-control input[type="text"],
#tm-content .riko-register-control input[type="email"],
#tm-content .riko-register-control input[type="password"],
#tm-content .riko-register-control select,
#tm-content .riko-register-control textarea {
    width: 100% !important;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-link);
    font-size: 15px;
    font-weight: 750;
    line-height: 46px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-surface) 88%, transparent);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#tm-content .riko-register-control select {
    padding-right: 34px;
}

#tm-content .riko-register-control input:focus,
#tm-content .riko-register-control select:focus,
#tm-content .riko-register-control textarea:focus {
    border-color: var(--riko-focus);
    background: var(--riko-surface);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 16%, transparent);
}

#tm-content .riko-register-control .invalid,
#tm-content .riko-register-control input.invalid,
#tm-content .riko-register-control select.invalid {
    border-color: var(--riko-action) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 14%, transparent) !important;
}

#tm-content .riko-register-control .g-recaptcha,
#tm-content .riko-register-control iframe {
    max-width: 100%;
}

#tm-content .riko-register-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-register-submit,
#tm-content .riko-register-cancel,
#tm-content .riko-register-google {
    display: inline-flex !important;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 46px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#tm-content .riko-register-submit {
    min-width: 190px;
    padding: 0 22px !important;
    border: 1px solid var(--riko-action) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--riko-action) 22%, transparent);
}

#tm-content .riko-register-cancel {
    min-width: 112px;
    padding: 0 18px !important;
    border: 1px solid var(--riko-line) !important;
    background: var(--riko-surface) !important;
    color: var(--riko-muted) !important;
}

#tm-content .riko-register-submit:hover,
#tm-content .riko-register-submit:focus,
#tm-content .riko-register-cancel:hover,
#tm-content .riko-register-cancel:focus,
#tm-content .riko-register-google:hover,
#tm-content .riko-register-google:focus {
    transform: translateY(-1px);
}

#tm-content .riko-register-privacy {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}

#tm-content .riko-register-privacy a {
    color: var(--riko-link);
    font-weight: 850;
    text-decoration: none;
}

#tm-content .riko-register-side {
    display: grid;
    gap: 16px;
}

#tm-content .riko-register-google-card,
#tm-content .riko-register-trust-card {
    padding: 24px;
}

#tm-content .riko-register-google-card {
    background: linear-gradient(180deg, var(--riko-surface) 0%, var(--riko-surface) 100%);
}

#tm-content .riko-register-google-card h2,
#tm-content .riko-register-trust-card h2 {
    margin-top: 12px;
}

#tm-content .riko-register-google-card p,
#tm-content .riko-register-trust-card p {
    margin: 12px 0 0;
    color: var(--riko-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

#tm-content .riko-register-google {
    width: 100%;
    gap: 10px;
    margin-top: 18px;
    padding: 0 16px !important;
    border: 1px solid var(--riko-line) !important;
    color: var(--riko-ink) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-register-google .sprites_google {
    display: block;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px;
}

#tm-content .riko-register-trust-card {
    border-color: var(--riko-action);
    background: var(--riko-surface);
}

#tm-content .riko-register-login-line {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--riko-action);
}

#tm-content .riko-register-login-line span {
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 750;
}

#tm-content .riko-register-login-line a {
    display: inline-flex;
    width: fit-content;
    min-height: 40px;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--riko-action);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-action);
    font-size: 14px;
    font-weight: 900;
    line-height: 40px;
    text-decoration: none;
}

@media (max-width: 980px) {
    #tm-content .riko-register-hero,
    #tm-content .riko-register-layout {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-register-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #tm-content .riko-register-page {
        margin-bottom: 24px;
    }

    #tm-content .riko-register-hero {
        gap: 18px;
        margin-bottom: 14px;
    }

    #tm-content .riko-register-hero h1 {
        font-size: 32px;
    }

    #tm-content .riko-register-lead {
        font-size: 17px;
    }

    #tm-content .riko-register-side,
    #tm-content .riko-register-fieldset {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-register-form-card,
    #tm-content .riko-register-google-card,
    #tm-content .riko-register-trust-card {
        padding: 18px;
    }

    #tm-content .riko-register-actions {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-register-submit,
    #tm-content .riko-register-cancel {
        width: 100%;
    }
}

@media (max-width: 680px) {
    #tm-content .riko-register-hero {
        padding: 20px;
    }

    #tm-content .riko-register-hero h1 {
        margin-top: 14px;
        color: var(--riko-on-brand) !important;
    }

}

@media (max-width: 380px) {
    #tm-content .riko-register-hero {
        padding: 18px;
    }

    #tm-content .riko-register-hero h1 {
        font-size: 28px;
    }

    #tm-content .riko-register-google-card h2,
    #tm-content .riko-register-trust-card h2,
    #tm-content .riko-register-form-heading h2 {
        font-size: 22px;
    }
}

/* Rikoooo register page finishing pass v2 - Codex 2026-06-25 */
#tm-content .riko-register-hero {
    isolation: isolate;
}

#tm-content .riko-register-hero:after {
    position: absolute;
    right: clamp(22px, 5vw, 76px);
    bottom: clamp(18px, 3vw, 42px);
    width: clamp(120px, 18vw, 260px);
    height: 80px;
    border-top: 1px solid color-mix(in srgb, var(--riko-inverse) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--riko-inverse) 10%, transparent);
    background:
        linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--riko-inverse) 18%, transparent) 52%, transparent 100%),
        linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--riko-inverse) 12%, transparent) 60%, transparent 100%);
    background-size: 100% 1px, 76% 1px;
    background-position: 0 28px, 20px 50px;
    background-repeat: no-repeat;
    content: "";
    opacity: .72;
    pointer-events: none;
    transform: skewX(-18deg);
}

#tm-content .riko-register-form-card {
    position: relative;
    overflow: hidden;
}

#tm-content .riko-register-form-card:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--riko-brand) 0%, var(--riko-brand-end) 56%, var(--riko-action) 100%);
    content: "";
}

#tm-content .riko-register-assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

#tm-content .riko-register-assurance span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--riko-line);
    border-radius: 999px;
    background: var(--riko-surface);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 850;
    line-height: 30px;
}

#tm-content .riko-register-field {
    position: relative;
}

#tm-content .riko-register-field.is-required .riko-register-label label:after {
    color: var(--riko-action);
    content: "";
}

#tm-content .riko-register-control input::placeholder,
#tm-content .riko-register-control textarea::placeholder {
    color: var(--riko-muted);
    opacity: 1;
}

#tm-content .riko-register-helper {
    margin: 7px 0 0;
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

#tm-content .riko-register-field:hover .riko-register-control input[type="text"],
#tm-content .riko-register-field:hover .riko-register-control input[type="email"],
#tm-content .riko-register-field:hover .riko-register-control input[type="password"],
#tm-content .riko-register-field:hover .riko-register-control select {
    border-color: var(--riko-action-line);
    background: var(--riko-surface);
}

#tm-content .riko-register-actions {
    position: relative;
}

#tm-content .riko-register-submit {
    background: linear-gradient(180deg, var(--riko-action) 0%, var(--riko-action) 100%) !important;
}

#tm-content .riko-register-submit:hover,
#tm-content .riko-register-submit:focus {
    box-shadow: 0 14px 28px color-mix(in srgb, var(--riko-action) 28%, transparent);
}

#tm-content .riko-register-cancel:hover,
#tm-content .riko-register-cancel:focus {
    border-color: var(--riko-focus-on-brand) !important;
    background: var(--riko-action-soft-hover) !important;
    color: var(--riko-focus) !important;
}

#tm-content .riko-register-google-card {
    position: relative;
    overflow: hidden;
}

#tm-content .riko-register-google-card:before {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--riko-brand-end) 8%, transparent), transparent 58%);
    content: "";
    pointer-events: none;
}

#tm-content .riko-register-google-card > *,
#tm-content .riko-register-trust-card > * {
    position: relative;
    z-index: 1;
}

#tm-content .riko-register-google:hover,
#tm-content .riko-register-google:focus {
    border-color: var(--riko-focus-on-brand) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent);
}

#tm-content .riko-register-trust-card {
    position: relative;
    overflow: hidden;
}

#tm-content .riko-register-trust-card:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--riko-action);
    content: "";
}

@media (min-width: 981px) {
    #tm-content .riko-register-side {
        position: sticky;
        top: 18px;
    }

    #tm-content .riko-register-form-card {
        min-height: 720px;
    }
}

@media (max-width: 680px) {
    #tm-content .riko-register-hero:after {
        display: none;
    }

    #tm-content .riko-register-assurance {
        gap: 6px;
    }

    #tm-content .riko-register-assurance span {
        min-height: 28px;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 11px;
        line-height: 28px;
    }

    #tm-content .riko-register-form-heading {
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    #tm-content .riko-register-helper {
        font-size: 11px;
    }
}

/* Rikoooo register finishing pass v3 + Jumbo PayPlans redesign - Codex 2026-06-25 */
#tm-content .riko-register-eyebrow {
    letter-spacing: 0;
}

#tm-content .riko-register-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

#tm-content .riko-register-hero-primary,
#tm-content .riko-register-hero-secondary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    line-height: 46px;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#tm-content .riko-register-hero-primary {
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 28%, transparent);
    background: var(--riko-surface);
    color: var(--riko-link) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-content .riko-register-hero-secondary {
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 32%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 10%, transparent);
    color: var(--riko-on-brand) !important;
}

#tm-content .riko-register-hero-primary:hover,
#tm-content .riko-register-hero-primary:focus,
#tm-content .riko-register-hero-secondary:hover,
#tm-content .riko-register-hero-secondary:focus {
    transform: translateY(-1px);
}

#tm-content .riko-payplans-flow,
#tm-content .riko-payplans-flow *,
#tm-content .riko-jumbo-gallery,
#tm-content .riko-jumbo-gallery * {
    box-sizing: border-box;
}

#tm-content .riko-payplans-flow,
#tm-content .riko-jumbo-gallery {
    width: 100%;
    max-width: none;
    color: var(--riko-ink);
}

#tm-content .riko-jumbo-return {
    margin-bottom: 12px;
}

#tm-content .riko-jumbo-return a,
#tm-content .riko-payplans-flow a {
    color: var(--riko-link);
    font-weight: 850;
    text-decoration: none;
}

#tm-content .riko-jumbo-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 24px;
    align-items: stretch;
    min-height: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--riko-brand-deep) 96%, transparent) 0%, color-mix(in srgb, var(--riko-brand) 88%, transparent) 50%, color-mix(in srgb, var(--riko-brand-end) 70%, transparent) 100%),
        url('/images/jumbo/Jumbo_ilustration2.jpg') center / cover no-repeat;
    box-shadow: 0 20px 48px color-mix(in srgb, var(--riko-brand-deep) 15%, transparent);
}

#tm-content .riko-jumbo-hero:before {
    position: absolute;
    inset: auto 0 0 0;
    height: 7px;
    background: linear-gradient(90deg, var(--riko-brand-end) 0%, var(--riko-action) 54%, var(--riko-action) 100%);
    content: "";
}

#tm-content .riko-jumbo-hero-copy,
#tm-content .riko-jumbo-hero-card {
    position: relative;
    z-index: 1;
}

#tm-content .riko-jumbo-eyebrow {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    width: fit-content;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--riko-action) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-surface) 92%, transparent);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 28px;
    text-transform: uppercase;
}

#tm-content .riko-jumbo-hero h1 {
    max-width: 860px;
    margin: 18px 0 16px;
    color: var(--riko-on-brand) !important;
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 950;
    line-height: 1.15;
    text-shadow: 0 2px 20px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-content .riko-jumbo-hero p {
    max-width: 760px;
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 94%, transparent);
    font-size: clamp(18px, 1.55vw, 23px);
    font-weight: 400;
    line-height: 1.45;
}

#tm-content .riko-jumbo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

#tm-content .riko-jumbo-primary,
#tm-content .riko-jumbo-secondary,
#tm-content .riko-payplans-ghost,
#tm-content .riko-payplans-flow .btn-pp-primary,
#pp .riko-payplans-flow .btn-pp-primary,
#tm-content .riko-jumbo-renew .btn {
    display: inline-flex !important;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 19px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    text-align: center;
    white-space: normal;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#tm-content .riko-jumbo-renew .btn {
    max-width: 100%;
    height: auto !important;
    white-space: normal !important;
}

#tm-content .riko-jumbo-primary,
#tm-content .riko-payplans-flow .btn-pp-primary,
#pp .riko-payplans-flow .btn-pp-primary,
#tm-content .riko-jumbo-renew .btn {
    border: 1px solid var(--riko-action) !important;
    background: linear-gradient(180deg, var(--riko-action) 0%, var(--riko-action) 100%) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--riko-action) 24%, transparent);
}

#tm-content .riko-jumbo-renew .btn.is-active {
    border-color: var(--riko-action-hover) !important;
    background: linear-gradient(180deg, var(--riko-action-hover) 0%, var(--riko-action-hover) 100%) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--riko-action) 22%, transparent);
}

#tm-content .riko-jumbo-page .riko-jumbo-hero :is(a, button):focus-visible {
    outline-color: var(--riko-focus-on-brand) !important;
}

#tm-content .riko-jumbo-secondary,
#tm-content .riko-payplans-ghost {
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 36%, transparent) !important;
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent) !important;
    color: var(--riko-on-brand) !important;
}



#tm-content .riko-jumbo-primary:hover,
#tm-content .riko-jumbo-primary:focus,
#tm-content .riko-jumbo-secondary:hover,
#tm-content .riko-jumbo-secondary:focus,
#tm-content .riko-payplans-flow .btn-pp-primary:hover,
#tm-content .riko-payplans-flow .btn-pp-primary:focus,
#tm-content .riko-payplans-ghost:hover,
#tm-content .riko-payplans-ghost:focus,
#tm-content .riko-jumbo-renew .btn:hover,
#tm-content .riko-jumbo-renew .btn:focus {
    transform: translateY(-1px);
}

#tm-content .riko-jumbo-hero-card {
    align-self: center;
    display: grid;
    gap: 12px;
}

#tm-content .riko-jumbo-hero-card > div {
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--riko-surface) 92%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-content .riko-jumbo-hero-card strong {
    display: block;
    color: var(--riko-ink);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
}

#tm-content .riko-jumbo-hero-card span {
    display: block;
    margin-top: 8px;
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    hyphens: auto;
}

#tm-content .riko-jumbo-benefits,
#tm-content .riko-jumbo-plan-section,
#tm-content .riko-jumbo-support,
#tm-content .riko-jumbo-gallery {
    margin-top: 18px;
    padding: clamp(20px, 2.5vw, 34px);
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-jumbo-section-heading,
#tm-content .riko-jumbo-plan-head {
    display: grid;
    gap: 14px;
    align-items: end;
}

#tm-content .riko-jumbo-section-heading h2,
#tm-content .riko-jumbo-plan-head h2 {
    max-width: 780px;
    margin: 0;
    color: var(--riko-ink);
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 950;
    line-height: 1.12;
}

#tm-content .riko-jumbo-plan-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    margin-bottom: 22px;
}

#tm-content .riko-jumbo-plan-head p,
#tm-content .riko-jumbo-support p {
    margin: 10px 0 0;
    color: var(--riko-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

#tm-content .riko-jumbo-renew {
    padding: 18px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
}

#tm-content .riko-jumbo-renew strong,
#tm-content .riko-jumbo-renew span {
    display: block;
}

#tm-content .riko-jumbo-renew strong {
    color: var(--riko-ink);
    font-size: 16px;
    font-weight: 950;
}

#tm-content .riko-jumbo-renew span {
    margin-top: 6px;
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

#tm-content .riko-jumbo-renew div {
    margin-top: 14px;
}

#tm-content .riko-jumbo-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

#tm-content .riko-jumbo-benefit {
    min-height: 168px;
    padding: 20px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--riko-surface) 0%, var(--riko-surface) 100%);
}

#tm-content .riko-jumbo-benefit > span {
    display: block;
    width: 34px;
    height: 5px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--riko-brand-end) 0%, var(--riko-action) 100%);
}

#tm-content .riko-jumbo-benefit h3 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.18;
}

#tm-content .riko-jumbo-benefit p {
    margin: 10px 0 0;
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

#tm-content .riko-jumbo-hub-access {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-jumbo-hub-access h3 {
    margin: 0 0 12px;
    color: var(--riko-ink);
    font-size: 20px;
    line-height: 1.3;
}

#tm-content .riko-jumbo-hub-access table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    line-height: 1.45;
}

#tm-content .riko-jumbo-hub-access :is(th, td) {
    padding: 12px 8px;
    border-bottom: 1px solid var(--riko-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

#tm-content .riko-jumbo-hub-access thead th {
    color: var(--riko-ink);
    background: var(--riko-surface-soft);
}

@media (max-width: 600px) {
    #tm-content .riko-jumbo-hub-access table {
        table-layout: auto;
        font-size: 13px;
    }
    #tm-content .riko-jumbo-hub-access :is(th, td) {
        padding: 10px 6px;
        overflow-wrap: normal;
    }
}

#tm-content .riko-jumbo-hub-note {
    color: var(--riko-muted);
    font-size: 14px;
}

#tm-content .riko-jumbo-page .pp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

#tm-content .riko-jumbo-page .pp-plans__item,
#tm-content .riko-jumbo-page .pp-plan-card {
    min-width: 0;
    height: 100%;
}

#tm-content .riko-jumbo-page .pp-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-jumbo-page .pp-plan-card.is-highlight {
    border-color: color-mix(in srgb, var(--riko-action) 56%, transparent);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--riko-action) 16%, transparent);
}

#tm-content .riko-jumbo-page .pp-plan-card.is-highlight:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--riko-action) 0%, var(--riko-action) 50%, var(--riko-action) 100%);
    content: "";
}

#tm-content .riko-jumbo-page .pp-plan-card__hd,
#tm-content .riko-jumbo-page .pp-plan-card__bd,
#tm-content .riko-jumbo-page .pp-plan-card__ft {
    padding: 22px;
}

#tm-content .riko-jumbo-page .pp-plan-card__hd {
    padding-bottom: 16px;
}

#tm-content .riko-jumbo-page .pp-plan-card__title {
    color: var(--riko-ink);
    font-size: 26px;
    font-weight: 950;
    line-height: 1.12;
}

#tm-content .riko-jumbo-page .pp-plan-card__desc {
    min-height: 38px;
    margin-top: 8px;
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

#tm-content .riko-jumbo-page .pp-plan-card__price {
    margin-top: 18px;
    color: var(--riko-ink);
    font-weight: 950;
}

#tm-content .riko-jumbo-page .pp-plan-card__price .pp-amount {
    font-size: 46px;
    line-height: 1;
}

#tm-content .riko-jumbo-page .pp-plan-card__price .pp-currency {
    font-size: 24px;
}

#tm-content .riko-jumbo-page .pp-plan-card__period {
    margin-top: 8px;
    color: var(--riko-action);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

#tm-content .riko-jumbo-page .pp-plan-card__bd {
    flex: 1;
    padding-top: 0;
}

#tm-content .riko-jumbo-page .pp-plan-card__features {
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

#tm-content .riko-jumbo-page .pp-plan-card__features span[style] {
    color: var(--riko-action);
    font-weight: 900;
    text-decoration: none !important;
}

#tm-content .riko-jumbo-page .pp-plan-card__ft {
    padding-top: 0;
}

#tm-content .riko-jumbo-page .pp-plan-card__forms .btn {
    width: 100%;
}

#tm-content .riko-jumbo-page .pp-plan-pop-label__txt {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 950;
    line-height: 28px;
    text-transform: uppercase;
}

#tm-content .riko-jumbo-page .pp-plan-card__label {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 3;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

#tm-content .riko-jumbo-page .pp-plan-pop-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
}

#tm-content .riko-jumbo-page .pp-plan-pop-label:before,
#tm-content .riko-jumbo-page .pp-plan-pop-label:after {
    display: none !important;
}

#tm-content .riko-jumbo-page .pp-plan-pop-label__txt {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    transform: none !important;
    white-space: nowrap;
}

#tm-content .riko-jumbo-page .pp-plan-card.has-badges .pp-plan-card__title {
    padding-right: 110px;
}

#tm-content .riko-jumbo-support {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#tm-content .riko-jumbo-support > div {
    padding: 18px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
}

#tm-content .riko-jumbo-support a {
    display: inline-flex;
    margin-top: 12px;
    color: var(--riko-link);
    font-weight: 950;
}

#tm-content .riko-jumbo-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#tm-content .riko-jumbo-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
}

#tm-content .riko-checkout-page,
#tm-content .riko-payment-page,
#tm-content .riko-thanks-page,
#tm-content .riko-payment-cancel-page,
#tm-content .riko-payment-error-page {
    max-width: 1180px;
    margin: 0 auto 34px;
    text-align: left;
}

#tm-content .riko-checkout-hero {
    margin-bottom: 18px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--riko-brand) 96%, transparent) 0%, color-mix(in srgb, var(--riko-brand-end) 88%, transparent) 100%),
        url('/images/jumbo/Jumbo_ilustration1.jpg') center / cover no-repeat;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent);
}

#tm-content .riko-checkout-hero h1 {
    margin: 14px 0 10px;
    color: var(--riko-on-brand) !important;
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 950;
    line-height: 1.15;
}

#tm-content .riko-checkout-hero p {
    max-width: 780px;
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 92%, transparent);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.5;
}









#tm-content .riko-checkout-security {
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--riko-action);
    border-radius: 8px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
}

#tm-content .riko-checkout-security strong {
    font-size: 16px;
    font-weight: 950;
}

#tm-content .riko-checkout-security span,
#tm-content .riko-checkout-security small {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

#tm-content .riko-checkout-security small span[style],
#tm-content .riko-checkout-security small b {
    color: inherit !important;
}























#tm-content #pp-payment-cancellation {
    width: 160px;
    max-width: 100%;
    margin: 0 auto 18px;
}

@media (max-width: 980px) {
    #tm-content .riko-jumbo-hero,
    #tm-content .riko-jumbo-plan-head,
    #tm-content .riko-jumbo-support {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-jumbo-benefit-grid,
    #tm-content .riko-jumbo-page .pp-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #tm-content .riko-register-hero-primary,
    #tm-content .riko-register-hero-secondary {
        width: 100%;
    }

    #tm-content .riko-jumbo-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 22px;
    }

    #tm-content .riko-jumbo-hero h1 {
        font-size: 34px;
    }

    #tm-content .riko-jumbo-hero p,
    #tm-content .riko-checkout-hero p {
        font-size: 16px;
    }

    #tm-content .riko-jumbo-actions,
    #tm-content .riko-payplans-result-card .pp-result__action {
        display: grid;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-jumbo-primary,
    #tm-content .riko-jumbo-secondary,
    #tm-content .riko-payplans-ghost,
    #tm-content .riko-payplans-flow .btn-pp-primary,
    #pp .riko-payplans-flow .btn-pp-primary,
    #tm-content .riko-jumbo-renew .btn {
        width: 100%;
    }

    #tm-content .riko-jumbo-renew .btn {
        min-height: 0;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        line-height: 1.25 !important;
    }

    #tm-content .riko-jumbo-benefits,
    #tm-content .riko-jumbo-plan-section,
    #tm-content .riko-jumbo-support,
    #tm-content .riko-jumbo-gallery {
        padding: 18px;
    }

    #tm-content .riko-jumbo-benefit-grid,
    #tm-content .riko-jumbo-page .pp-plans,
    #tm-content .riko-jumbo-gallery {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-jumbo-benefit {
        min-height: 0;
    }

    #tm-content .riko-jumbo-page .pp-plan-card__hd,
    #tm-content .riko-jumbo-page .pp-plan-card__bd,
    #tm-content .riko-jumbo-page .pp-plan-card__ft {
        padding-right: 18px;
        padding-left: 18px;
    }

    #tm-content .riko-jumbo-page .pp-plan-card__label {
        top: 12px !important;
        right: 12px !important;
    }

    #tm-content .riko-jumbo-page .pp-plan-pop-label__txt {
        min-height: 24px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 11px;
        line-height: 24px;
    }

    #tm-content .riko-jumbo-page .pp-plan-card.has-badges .pp-plan-card__title {
        padding-right: 86px;
    }

    #tm-content .riko-checkout-page,
    #tm-content .riko-payment-page,
    #tm-content .riko-thanks-page,
    #tm-content .riko-payment-cancel-page,
    #tm-content .riko-payment-error-page {
        margin-bottom: 24px;
    }

    

    

    

    

    
}

@media (max-width: 380px) {
    #tm-content .riko-jumbo-hero h1,
    #tm-content .riko-checkout-hero h1 {
        font-size: 29px;
    }

    #tm-content .riko-jumbo-page .pp-plan-card__price .pp-amount {
        font-size: 38px;
    }
}

/* Rikoooo profile edit redesign - Codex 2026-06-25 */
#tm-content .riko-profile-page,
#tm-content .riko-profile-page * {
    box-sizing: border-box;
}

#tm-content .riko-profile-page {
    width: 100%;
    margin: 0 auto 36px;
    color: var(--riko-ink);
}

#tm-content .riko-profile-legacy-heading {
    display: none;
}

#tm-content .riko-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    background:
        linear-gradient(130deg, color-mix(in srgb, var(--riko-brand-deep) 97%, transparent) 0%, color-mix(in srgb, var(--riko-brand-end) 92%, transparent) 100%),
        radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--riko-inverse) 16%, transparent), transparent 30%);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--riko-brand-deep) 14%, transparent);
}

#tm-content .riko-profile-hero:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--riko-brand-end) 0%, var(--riko-action) 55%, var(--riko-action) 100%);
    content: "";
}

#tm-content .riko-profile-eyebrow {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    width: fit-content;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--riko-action) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-surface) 92%, transparent);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 28px;
    text-transform: uppercase;
}

#tm-content .riko-profile-hero h1 {
    color: var(--riko-on-brand) !important;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 950;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-profile-hero p {
    max-width: 760px;
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 92%, transparent);
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 750;
    line-height: 1.48;
}

#tm-content .riko-profile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

#tm-content .riko-profile-hero-actions a,
#tm-content .riko-profile-submit,
#tm-content .riko-profile-cancel,
#tm-content .riko-profile-danger a,
#tm-content .riko-profile-delete {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#tm-content .riko-profile-hero-actions a:first-child,
#tm-content .riko-profile-submit {
    border: 1px solid var(--riko-action) !important;
    background: linear-gradient(180deg, var(--riko-action) 0%, var(--riko-action) 100%) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--riko-action) 24%, transparent);
}

#tm-content .riko-profile-hero-actions a:last-child {
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 34%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent);
    color: var(--riko-on-brand) !important;
}

#tm-content .riko-profile-cancel {
    border: 1px solid var(--riko-line) !important;
    background: var(--riko-surface) !important;
    color: var(--riko-muted) !important;
}

#tm-content .riko-profile-submit:hover,
#tm-content .riko-profile-submit:focus,
#tm-content .riko-profile-cancel:hover,
#tm-content .riko-profile-cancel:focus,
#tm-content .riko-profile-hero-actions a:hover,
#tm-content .riko-profile-hero-actions a:focus,
#tm-content .riko-profile-danger a:hover,
#tm-content .riko-profile-danger a:focus,
#tm-content .riko-profile-delete:hover,
#tm-content .riko-profile-delete:focus {
    transform: translateY(-1px);
}

#tm-content .riko-profile-summary-card {
    position: relative;
    z-index: 1;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 22%, transparent);
    background: color-mix(in srgb, var(--riko-surface) 94%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-profile-summary-card h2,
#tm-content .riko-profile-form-head h2,
#tm-content .riko-profile-side-card h2 {
    margin: 0;
    color: var(--riko-link);
    font-size: 25px;
    font-weight: 950;
    line-height: 1.18;
}

#tm-content .riko-profile-summary-card p,
#tm-content .riko-profile-form-head p,
#tm-content .riko-profile-side-card p {
    margin: 10px 0 0;
    color: var(--riko-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

#tm-content .riko-profile-summary-card dl {
    display: grid;
    margin: 18px 0 0;
}

#tm-content .riko-profile-summary-card dl > div {
    border: 1px solid var(--riko-line);
    border-radius: 8px;
}

#tm-content .riko-profile-summary-card dt {
    color: var(--riko-link);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

#tm-content .riko-profile-summary-card dd {
    margin: 5px 0 0;
    color: var(--riko-link);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#tm-content .riko-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: 20px;
    align-items: start;
}

#tm-content .riko-profile-form,
#tm-content .riko-profile-side-card {
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-profile-form {
    position: relative;
    overflow: hidden;
    margin: 0;
}

#tm-content .riko-profile-form:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--riko-brand) 0%, var(--riko-brand-end) 56%, var(--riko-action) 100%);
    content: "";
}

#tm-content .riko-profile-form-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--riko-line);
}

#tm-content .riko-profile-delete {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface)) !important;
    background: color-mix(in srgb, var(--riko-danger) 9%, var(--riko-surface)) !important;
    color: var(--riko-danger) !important;
}

#tm-content .riko-profile-fieldset {
    min-width: 0;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

#tm-content .riko-profile-fieldset legend {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--riko-ink);
    font-size: 20px;
    font-weight: 950;
    line-height: 1.2;
}

#tm-content .riko-profile-fieldset-desc {
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

#tm-content .riko-profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#tm-content .riko-profile-field {
    min-width: 0;
}

#tm-content .riko-profile-field.is-wide,
#tm-content .riko-profile-field-jform_params_language,
#tm-content .riko-profile-field-jform_params_admin_language,
#tm-content .riko-profile-field-spacer {
    grid-column: 1 / -1;
}

#tm-content .riko-profile-label {
    margin-bottom: 7px;
    color: var(--riko-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
}

#tm-content .riko-profile-label label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#tm-content .riko-profile-label .star {
    color: var(--riko-rating);
}

#tm-content .riko-profile-label .optional {
    margin-left: 8px;
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 750;
}

#tm-content .riko-profile-control input[type="text"],
#tm-content .riko-profile-control input[type="email"],
#tm-content .riko-profile-control input[type="password"],
#tm-content .riko-profile-control select,
#tm-content .riko-profile-control textarea {
    width: 100% !important;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-link);
    font-size: 15px;
    font-weight: 750;
    line-height: 46px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-surface) 88%, transparent);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#tm-content .riko-profile-control textarea {
    min-height: 110px;
    padding-top: 12px;
    line-height: 1.45;
}

#tm-content .riko-profile-control input:focus,
#tm-content .riko-profile-control select:focus,
#tm-content .riko-profile-control textarea:focus {
    border-color: var(--riko-focus);
    background: var(--riko-surface);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 16%, transparent);
}

#tm-content .riko-profile-control input::placeholder,
#tm-content .riko-profile-control textarea::placeholder {
    color: var(--riko-muted);
    opacity: 1;
}

#tm-content .riko-profile-control input[type="checkbox"],
#tm-content .riko-profile-control input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

#tm-content .riko-profile-control label {
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}

#tm-content .riko-profile-helper {
    margin: 7px 0 0;
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

#tm-content .riko-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-profile-side {
    display: grid;
    gap: 16px;
}

#tm-content .riko-profile-side-card {
    padding: 22px;
}

#tm-content .riko-profile-danger {
    border-color: color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface));
    background: color-mix(in srgb, var(--riko-danger) 9%, var(--riko-surface));
}

#tm-content .riko-profile-danger a {
    margin-top: 16px;
    border: 1px solid color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface)) !important;
    background: var(--riko-surface) !important;
    color: var(--riko-danger) !important;
}

#tm-content .riko-profile-field:hover .riko-profile-control input[type="text"],
#tm-content .riko-profile-field:hover .riko-profile-control input[type="email"],
#tm-content .riko-profile-field:hover .riko-profile-control input[type="password"],
#tm-content .riko-profile-field:hover .riko-profile-control select {
    border-color: var(--riko-action-line);
    background: var(--riko-surface);
}

@media (min-width: 981px) {
    #tm-content .riko-profile-side {
        position: sticky;
        top: 18px;
    }
}

@media (max-width: 980px) {
    #tm-content .riko-profile-hero,
    #tm-content .riko-profile-layout {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #tm-content .riko-profile-page {
        margin-bottom: 24px;
    }

    #tm-content .riko-profile-hero {
        gap: 18px;
        padding: 22px;
    }

    #tm-content .riko-profile-hero h1 {
        font-size: 32px;
    }

    #tm-content .riko-profile-hero p {
        font-size: 16px;
    }

    #tm-content .riko-profile-hero-actions,
    #tm-content .riko-profile-form-head,
    #tm-content .riko-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-hero-actions a,
    #tm-content .riko-profile-submit,
    #tm-content .riko-profile-cancel,
    #tm-content .riko-profile-delete {
        width: 100%;
    }

    #tm-content .riko-profile-field-grid,
    #tm-content .riko-profile-side {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-form,
    #tm-content .riko-profile-summary-card,
    #tm-content .riko-profile-side-card {
        padding: 18px;
    }

    #tm-content .riko-profile-fieldset legend {
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    #tm-content .riko-profile-hero h1 {
        font-size: 28px;
    }

    #tm-content .riko-profile-summary-card h2,
    #tm-content .riko-profile-form-head h2,
    #tm-content .riko-profile-side-card h2 {
        font-size: 22px;
    }
}

/* Rikoooo PayPlans account redesign - Codex 2026-06-25 */
#tm-content .riko-subscription-page,
#tm-content .riko-subscription-page * {
    box-sizing: border-box;
}

#tm-content .riko-subscription-page {
    width: 100%;
    max-width: none;
    color: var(--riko-ink);
    font-size: 15px;
}

#tm-content .riko-subscription-page a {
    color: var(--riko-link);
    text-decoration: none;
}

#tm-content .riko-subscription-page a:hover {
    color: var(--riko-action-hover);
}

#tm-content .riko-subscription-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 24px;
    align-items: stretch;
    margin: 0 0 18px;
    border: 1px solid color-mix(in srgb, var(--riko-line) 18%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--riko-brand) 96%, transparent), color-mix(in srgb, var(--riko-brand-end) 88%, transparent)),
        var(--riko-brand);
    color: var(--riko-on-brand);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-subscription-hero-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

#tm-content .riko-subscription-eyebrow,
#tm-content .riko-subscription-section-head span,
#tm-content .riko-subscription-form-head span {
    display: inline-flex;
    margin: 0 0 8px;
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#tm-content .riko-subscription-hero .riko-subscription-eyebrow {
    color: var(--riko-on-brand-muted);
}

#tm-content .riko-subscription-hero h1 {
    margin: 0;
    color: var(--riko-on-brand);
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1.15;
    font-weight: 900;
}

#tm-content .riko-subscription-hero p {
    max-width: 780px;
    margin: 14px 0 0;
    color: color-mix(in srgb, var(--riko-on-brand) 88%, transparent);
    font-size: 17px;
    line-height: 1.65;
}

#tm-content .riko-subscription-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

#tm-content .riko-subscription-primary,
#tm-content .riko-subscription-secondary,
#tm-content .riko-subscription-page .btn-pp-primary,
#tm-content .riko-subscription-page .btn-pp-default-o {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

#tm-content .riko-subscription-primary,
#tm-content .riko-subscription-page .btn-pp-primary {
    background: linear-gradient(180deg, var(--riko-action), var(--riko-action));
    color: var(--riko-action-contrast);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--riko-brand-deep) 22%, transparent);
}

#tm-content .riko-subscription-secondary,
#tm-content .riko-subscription-page .btn-pp-default-o {
    border-color: color-mix(in srgb, var(--riko-inverse) 38%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent);
    color: var(--riko-on-brand);
}

#tm-content .riko-subscription-page .btn-pp-default-o {
    border-color: color-mix(in srgb, var(--riko-action) 22%, transparent);
    background: var(--riko-surface);
    color: var(--riko-link);
}

#tm-content .riko-subscription-primary:hover,
#tm-content .riko-subscription-secondary:hover,
#tm-content .riko-subscription-page .btn-pp-primary:hover,
#tm-content .riko-subscription-page .btn-pp-default-o:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-content .riko-subscription-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#tm-content .riko-subscription-stat {
    min-height: 104px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 20%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 12%, transparent);
    backdrop-filter: blur(8px);
}

#tm-content .riko-subscription-stat strong {
    display: block;
    color: var(--riko-on-brand);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

#tm-content .riko-subscription-stat span {
    display: block;
    margin-top: 8px;
    color: color-mix(in srgb, var(--riko-on-brand) 82%, transparent);
    font-weight: 800;
}

#tm-content .riko-subscription-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

#tm-content .riko-subscription-shortcuts a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 16px 18px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-link);
    font-weight: 850;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--riko-brand-deep) 7%, transparent);
}

#tm-content .riko-subscription-shortcuts i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
}

#tm-content .riko-subscription-section,
#tm-content .riko-subscription-form-card,
#tm-content .riko-subscription-table-card {
    margin: 0 0 18px;
    padding: 22px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 7%, transparent);
}

#tm-content .riko-subscription-section-head,
#tm-content .riko-subscription-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#tm-content .riko-subscription-section-head h2,
#tm-content .riko-subscription-form-head h2,
#tm-content .riko-subscription-custom-details h3 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 900;
}

#tm-content .riko-subscription-section-head p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--riko-muted);
    line-height: 1.65;
}

#tm-content .riko-subscription-list {
    display: grid;
    gap: 16px;
}

#tm-content .riko-subscription-card {
    overflow: hidden;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-subscription-card-main {
    padding: 22px;
}

#tm-content .riko-subscription-alert {
    margin-bottom: 16px;
    border-radius: 8px;
}

#tm-content .riko-subscription-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

#tm-content .riko-subscription-card h3 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

#tm-content .riko-subscription-card h3 a {
    color: inherit;
}

#tm-content .riko-subscription-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
    color: var(--riko-muted);
    font-size: 14px;
    font-weight: 750;
}

#tm-content .riko-subscription-meta a,
#tm-content .riko-subscription-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#tm-content .riko-subscription-status {
    display: flex;
    justify-content: flex-end;
}

#tm-content .riko-subscription-status-large {
    align-self: center;
}

#tm-content .riko-subscription-page .o-label,
#tm-content .riko-subscription-page [class*="o-label"] {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

#tm-content .riko-subscription-note {
    margin: 14px 0 0;
    color: var(--riko-action);
    font-weight: 750;
}

#tm-content .riko-subscription-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--riko-line);
    border-bottom: 1px solid var(--riko-line);
    background: var(--riko-surface);
}

#tm-content .riko-subscription-detail-row {
    display: grid;
    gap: 6px;
    padding: 18px 22px;
    border-right: 1px solid var(--riko-line);
}

#tm-content .riko-subscription-detail-row:last-child {
    border-right: 0;
}

#tm-content .riko-subscription-detail-row > span {
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}

#tm-content .riko-subscription-detail-row strong {
    color: var(--riko-ink);
    font-size: 15px;
    line-height: 1.55;
}

#tm-content .riko-subscription-detail-row small {
    display: block;
    margin-top: 4px;
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 700;
}

#tm-content .riko-subscription-danger {
    color: var(--riko-danger);
}

#tm-content .riko-subscription-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 16px 22px;
    background: var(--riko-surface);
}

#tm-content .riko-subscription-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#tm-content .riko-subscription-link-danger,
#tm-content .riko-subscription-page .t-text--danger {
    color: var(--riko-danger) !important;
    font-weight: 800;
}

#tm-content .riko-subscription-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
}

#tm-content .riko-subscription-empty-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-size: 24px;
}

#tm-content .riko-subscription-empty h3 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 24px;
    font-weight: 900;
}

#tm-content .riko-subscription-empty p {
    margin: 8px 0 16px;
    color: var(--riko-muted);
    line-height: 1.6;
}

#tm-content .riko-subscription-table-card {
    overflow: hidden;
}

#tm-content .riko-subscription-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#tm-content .riko-subscription-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--riko-line);
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#tm-content .riko-subscription-table td {
    padding: 14px;
    border-bottom: 1px solid var(--riko-line);
    color: var(--riko-link);
    vertical-align: middle;
}

#tm-content .riko-subscription-table tbody tr:last-child td {
    border-bottom: 0;
}

#tm-content .riko-subscription-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#tm-content .riko-subscription-icon-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-ink);
    font-weight: 800;
}

#tm-content .riko-subscription-form {
    display: grid;
    gap: 16px;
}

#tm-content .riko-subscription-form-card p,
#tm-content .riko-subscription-data-card p {
    margin: 0 0 18px;
    color: var(--riko-muted);
    line-height: 1.65;
}

#tm-content .riko-subscription-field-stack {
    display: grid;
    gap: 14px;
}

#tm-content .riko-subscription-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#tm-content .riko-subscription-page input[type="text"],
#tm-content .riko-subscription-page input[type="password"],
#tm-content .riko-subscription-page input[type="email"],
#tm-content .riko-subscription-page input[type="tel"],
#tm-content .riko-subscription-page select,
#tm-content .riko-subscription-page textarea,
#tm-content .riko-subscription-page .o-form-control {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-link);
    box-shadow: none;
}

#tm-content .riko-subscription-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

#tm-content .riko-subscription-input-group .o-input-group__append {
    display: flex;
}

#tm-content .riko-subscription-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

#tm-content .riko-subscription-inline-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-ink);
    font-weight: 850;
}

#tm-content .riko-subscription-inline-state i {
    color: var(--riko-action);
}

#tm-content .riko-subscription-inline-state-ready i {
    color: var(--riko-action);
}

#tm-content .riko-subscription-hero-status {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

#tm-content .riko-jumbo-status-panel {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 22%, transparent);
    background: color-mix(in srgb, var(--riko-inverse) 13%, transparent);
    color: var(--riko-on-brand);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--riko-inverse) 15%, transparent);
}

#tm-content .riko-jumbo-status-panel > span {
    color: var(--riko-on-brand-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#tm-content .riko-jumbo-status-panel strong {
    display: block;
    color: var(--riko-on-brand);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 950;
}

#tm-content .riko-jumbo-status-panel p {
    margin: 0;
    color: color-mix(in srgb, var(--riko-on-brand) 86%, transparent);
    font-size: 15px;
    line-height: 1.6;
}

#tm-content .riko-jumbo-status-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--riko-inverse) 13%, transparent);
    color: var(--riko-on-brand);
    font-weight: 850;
}

#tm-content .riko-jumbo-status-panel--active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--riko-brand-end) 32%, transparent), color-mix(in srgb, var(--riko-inverse) 12%, transparent));
}

#tm-content .riko-jumbo-status-panel--pending {
    background: linear-gradient(135deg, color-mix(in srgb, var(--riko-warning) 34%, transparent), color-mix(in srgb, var(--riko-inverse) 12%, transparent));
}

#tm-content .riko-jumbo-status-panel--expired,
#tm-content .riko-jumbo-status-panel--none {
    background: linear-gradient(135deg, color-mix(in srgb, var(--riko-action) 32%, transparent), color-mix(in srgb, var(--riko-inverse) 12%, transparent));
}

#tm-content .riko-subscription-current-card {
    border-left: 4px solid var(--riko-line);
}

#tm-content .riko-jumbo-current-empty {
    border-left: 4px solid var(--riko-action);
}

#tm-content .riko-jumbo-history-section {
    background: var(--riko-surface);
}

#tm-content .riko-jumbo-history-list {
    display: grid;
    gap: 10px;
}

#tm-content .riko-jumbo-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
}

#tm-content .riko-jumbo-history-item h3 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

#tm-content .riko-jumbo-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    color: var(--riko-muted);
    font-size: 13px;
    font-weight: 750;
}

#tm-content .riko-jumbo-history-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#tm-content .riko-jumbo-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

#tm-content .riko-jumbo-history-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--riko-surface-soft);
    color: var(--riko-muted);
    font-size: 12px;
    font-weight: 900;
}

#tm-content .riko-jumbo-no-history {
    margin: 0;
    color: var(--riko-muted);
    font-weight: 750;
}

@media (max-width: 980px) {
    #tm-content .riko-subscription-hero,
    #tm-content .riko-subscription-hero-compact,
    #tm-content .riko-subscription-hero-status {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-subscription-status,
    #tm-content .riko-subscription-status-large {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    #tm-content .riko-subscription-page {
        font-size: 14px;
    }

    #tm-content .riko-subscription-hero,
    #tm-content .riko-subscription-section,
    #tm-content .riko-subscription-form-card,
    #tm-content .riko-subscription-table-card {
        padding: 18px;
        border-radius: 8px;
    }

    #tm-content .riko-subscription-hero h1 {
        font-size: 31px;
    }

    #tm-content .riko-subscription-hero p {
        font-size: 15px;
    }

    #tm-content .riko-subscription-stats,
    #tm-content .riko-subscription-shortcuts,
    #tm-content .riko-subscription-details,
    #tm-content .riko-subscription-two-col {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-subscription-detail-row {
        border-right: 0;
        border-bottom: 1px solid var(--riko-line);
    }

    #tm-content .riko-subscription-detail-row:last-child {
        border-bottom: 0;
    }

    #tm-content .riko-subscription-card-head,
    #tm-content .riko-subscription-card-footer,
    #tm-content .riko-subscription-section-head,
    #tm-content .riko-subscription-form-head,
    #tm-content .riko-subscription-empty,
    #tm-content .riko-subscription-input-group,
    #tm-content .riko-jumbo-history-item {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-subscription-card-footer,
    #tm-content .riko-subscription-section-head,
    #tm-content .riko-subscription-form-head {
        display: grid;
    }

    #tm-content .riko-subscription-button-row,
    #tm-content .riko-subscription-form-actions {
        justify-content: stretch;
    }

    #tm-content .riko-subscription-button-row > *,
    #tm-content .riko-subscription-form-actions > *,
    #tm-content .riko-subscription-hero-actions > *,
    #tm-content .riko-subscription-primary,
    #tm-content .riko-subscription-secondary {
        width: 100%;
    }

    #tm-content .riko-subscription-table,
    #tm-content .riko-subscription-table thead,
    #tm-content .riko-subscription-table tbody,
    #tm-content .riko-subscription-table tr,
    #tm-content .riko-subscription-table th,
    #tm-content .riko-subscription-table td {
        display: block;
        width: 100% !important;
    }

    #tm-content .riko-subscription-table thead {
        position: absolute;
        width: 1px !important;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    #tm-content .riko-subscription-table tr {
        margin: 0 0 12px;
        padding: 12px;
        border: 1px solid var(--riko-line);
        border-radius: 8px;
        background: var(--riko-surface);
    }

    #tm-content .riko-subscription-table td {
        display: grid;
        grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--riko-line);
        text-align: left !important;
    }

    #tm-content .riko-subscription-table td::before {
        content: attr(data-label);
        color: var(--riko-muted);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    #tm-content .riko-subscription-table td:last-child {
        border-bottom: 0;
    }

    #tm-content .riko-subscription-table-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    #tm-content .riko-jumbo-history-actions {
        justify-content: stretch;
    }

    #tm-content .riko-jumbo-history-actions > * {
        width: 100%;
    }
}

@media (max-width: 420px) {
    #tm-content .riko-subscription-hero h1 {
        font-size: 27px;
    }

    #tm-content .riko-subscription-section-head h2,
    #tm-content .riko-subscription-form-head h2,
    #tm-content .riko-subscription-card h3 {
        font-size: 22px;
    }
}

/* Account surfaces: homepage palette and 24px / 16px rhythm.
   Keep selectors on account wrappers: this sheet is also loaded by Creator. */
#tm-content .riko-register-page,
#tm-content .riko-jumbo-page,
#tm-content .riko-payplans-flow,
#tm-content .riko-profile-page,
#tm-content .riko-subscription-page {
    --riko-soft: var(--riko-surface-soft);
    --riko-blue: var(--riko-action);
    --riko-blue-dark: var(--riko-action-hover);
    --riko-green: var(--riko-success);
    --riko-orange: var(--riko-danger);
    --riko-shadow: 0 12px 30px color-mix(in srgb, var(--riko-ink) 8%, transparent);
    width: 100%;
    max-width: none;
    color: var(--riko-ink);
}

#tm-content .riko-register-page *,
#tm-content .riko-jumbo-page *,
#tm-content .riko-payplans-flow *,
#tm-content .riko-profile-page *,
#tm-content .riko-subscription-page * {
    box-sizing: border-box;
}

#tm-content .riko-register-page h1,
#tm-content .riko-jumbo-page h1,
#tm-content .riko-payplans-flow h1,
#tm-content .riko-profile-page h1,
#tm-content .riko-subscription-page h1 {
    letter-spacing: 0;
}

#tm-content .riko-register-hero,
#tm-content .riko-jumbo-hero,
#tm-content .riko-checkout-hero,
#tm-content .riko-profile-hero,
#tm-content .riko-subscription-hero {
    position: relative;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--riko-line) 20%, transparent);
    background: url("../images/home-airframe.svg") right center / auto 100% no-repeat,
        linear-gradient(120deg, var(--riko-brand-deep), var(--riko-brand));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent);
}

#tm-content .riko-register-hero:after,
#tm-content .riko-jumbo-hero:after,
#tm-content .riko-checkout-hero:after,
#tm-content .riko-profile-hero:after,
#tm-content .riko-subscription-hero:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--riko-brand), var(--riko-brand-end));
    content: "";
    pointer-events: none;
}

#tm-content .riko-register-eyebrow,
#tm-content .riko-jumbo-eyebrow,
#tm-content .riko-profile-eyebrow,
#tm-content .riko-subscription-eyebrow,
#tm-content .riko-subscription-section-head span,
#tm-content .riko-subscription-form-head span {
    letter-spacing: .06em;
    line-height: 1.2;
}

#tm-content .riko-register-form-card,
#tm-content .riko-register-google-card,
#tm-content .riko-register-trust-card,
#tm-content .riko-jumbo-benefit,
#tm-content .riko-jumbo-plan-section,
#tm-content .riko-jumbo-support > *,
#tm-content .riko-profile-form,
#tm-content .riko-profile-side-card,
#tm-content .riko-subscription-section,
#tm-content .riko-subscription-form-card,
#tm-content .riko-subscription-table-card,
#tm-content .riko-subscription-card,
#tm-content .riko-payplans-result-card,
#tm-content .riko-checkout-page .pp-checkout-item,
#tm-content .riko-payment-page .pp-checkout-item {
    border: 1px solid var(--riko-line);
    border-radius: 16px;
    background: var(--riko-surface);
    box-shadow: var(--riko-shadow);
}

#tm-content .riko-register-google-card,
#tm-content .riko-register-trust-card,
#tm-content .riko-jumbo-benefit,
#tm-content .riko-subscription-shortcuts a,
#tm-content .riko-jumbo-history-item {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#tm-content .riko-register-google-card:hover,
#tm-content .riko-register-trust-card:hover,
#tm-content .riko-jumbo-benefit:hover,
#tm-content .riko-subscription-shortcuts a:hover,
#tm-content .riko-jumbo-history-item:hover {
    border-color: color-mix(in srgb, var(--riko-action-hover) 34%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent);
    transform: translateY(-1px);
}

#tm-content .riko-register-hero-primary,
#tm-content .riko-register-submit,
#tm-content .riko-jumbo-primary,
#tm-content .riko-jumbo-page .btn-pp-primary,
#tm-content .riko-payplans-flow .btn-pp-primary,
#tm-content .riko-profile-submit,
#tm-content .riko-profile-hero-actions a:first-child,
#tm-content .riko-subscription-primary,
#tm-content .riko-subscription-page .btn-pp-primary {
    min-height: 44px;
    border: 1px solid var(--riko-action) !important;
    border-radius: 8px !important;
    background: var(--riko-action) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
    font-weight: 900 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#tm-content .riko-register-hero-secondary,
#tm-content .riko-register-cancel,
#tm-content .riko-jumbo-secondary,
#tm-content .riko-payplans-ghost,
#tm-content .riko-profile-cancel,
#tm-content .riko-subscription-secondary,
#tm-content .riko-subscription-page .btn-pp-default-o {
    min-height: 44px;
    border: 1px solid var(--riko-line) !important;
    border-radius: 8px !important;
    background: var(--riko-surface) !important;
    color: var(--riko-link) !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#tm-content .riko-register-hero-secondary,
#tm-content .riko-jumbo-secondary,
#tm-content .riko-subscription-hero .riko-subscription-secondary,
#tm-content .riko-profile-hero-actions a:last-child {
    border-color: color-mix(in srgb, var(--riko-inverse) 38%, transparent) !important;
    background: color-mix(in srgb, var(--riko-inverse) 14%, transparent) !important;
    color: var(--riko-on-brand) !important;
}

#tm-content .riko-register-hero-primary:hover,
#tm-content .riko-register-submit:hover,
#tm-content .riko-jumbo-primary:hover,
#tm-content .riko-jumbo-page .btn-pp-primary:hover,
#tm-content .riko-payplans-flow .btn-pp-primary:hover,
#tm-content .riko-profile-submit:hover,
#tm-content .riko-profile-hero-actions a:hover,
#tm-content .riko-subscription-primary:hover,
#tm-content .riko-subscription-page .btn-pp-primary:hover,
#tm-content .riko-register-hero-secondary:hover,
#tm-content .riko-register-cancel:hover,
#tm-content .riko-jumbo-secondary:hover,
#tm-content .riko-payplans-ghost:hover,
#tm-content .riko-profile-cancel:hover,
#tm-content .riko-subscription-secondary:hover,
#tm-content .riko-subscription-page .btn-pp-default-o:hover {
    transform: translateY(-1px);
}

#tm-content .riko-register-page input,
#tm-content .riko-register-page select,
#tm-content .riko-register-page textarea,
#tm-content .riko-profile-page input,
#tm-content .riko-profile-page select,
#tm-content .riko-profile-page textarea,
#tm-content .riko-subscription-page input,
#tm-content .riko-subscription-page select,
#tm-content .riko-subscription-page textarea,
#tm-content .riko-payplans-flow input,
#tm-content .riko-payplans-flow select,
#tm-content .riko-payplans-flow textarea {
    max-width: 100%;
    min-height: 44px;
    border-color: var(--riko-line);
    border-radius: 8px;
}

#tm-content .riko-register-page input:focus,
#tm-content .riko-register-page select:focus,
#tm-content .riko-register-page textarea:focus,
#tm-content .riko-profile-page input:focus,
#tm-content .riko-profile-page select:focus,
#tm-content .riko-profile-page textarea:focus,
#tm-content .riko-subscription-page input:focus,
#tm-content .riko-subscription-page select:focus,
#tm-content .riko-subscription-page textarea:focus,
#tm-content .riko-payplans-flow input:focus,
#tm-content .riko-payplans-flow select:focus,
#tm-content .riko-payplans-flow textarea:focus {
    border-color: var(--riko-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 14%, transparent) !important;
    outline: none;
}

#tm-content .riko-register-page a:focus-visible,
#tm-content .riko-jumbo-page a:focus-visible,
#tm-content .riko-payplans-flow a:focus-visible,
#tm-content .riko-profile-page a:focus-visible,
#tm-content .riko-subscription-page a:focus-visible,
#tm-content .riko-register-page button:focus-visible,
#tm-content .riko-jumbo-page button:focus-visible,
#tm-content .riko-payplans-flow button:focus-visible,
#tm-content .riko-profile-page button:focus-visible,
#tm-content .riko-subscription-page button:focus-visible {
    outline: 3px solid var(--riko-focus) !important;
    outline-offset: 3px;
}









#tm-content .riko-subscription-table-card,
#tm-content .riko-checkout-page .pp-checkout-item__content {
    overflow-x: auto;
}

#tm-content .riko-jumbo-status-panel strong,
#tm-content .riko-profile-summary-card dd,
#tm-content .riko-subscription-stat strong {
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    #tm-content .riko-register-page,
    #tm-content .riko-jumbo-page,
    #tm-content .riko-payplans-flow,
    #tm-content .riko-profile-page,
    #tm-content .riko-subscription-page {
            overflow-x: hidden;
        }

    #tm-content .riko-register-hero,
    #tm-content .riko-jumbo-hero,
    #tm-content .riko-checkout-hero,
    #tm-content .riko-profile-hero,
    #tm-content .riko-subscription-hero {
            margin-right: 0;
            margin-left: 0;
            padding: 20px;
        }

    #tm-content .riko-register-hero h1,
    #tm-content .riko-jumbo-hero h1,
    #tm-content .riko-checkout-hero h1,
    #tm-content .riko-profile-hero h1,
    #tm-content .riko-subscription-hero h1 {
            font-size: 30px;
            line-height: 1.12;
        }

    #tm-content .riko-register-form-card,
    #tm-content .riko-register-google-card,
    #tm-content .riko-register-trust-card,
    #tm-content .riko-jumbo-benefit,
    #tm-content .riko-jumbo-plan-section,
    #tm-content .riko-profile-form,
    #tm-content .riko-profile-side-card,
    #tm-content .riko-subscription-section,
    #tm-content .riko-subscription-form-card,
    #tm-content .riko-subscription-table-card,
    #tm-content .riko-payplans-result-card {
            padding: 18px;
        }

    

    #tm-content .riko-payplans-flow .pp-checkout-container__ft .o-grid-sm__cell,
    #tm-content .riko-payplans-flow .pp-checkout-container__ft a,
    #tm-content .riko-payplans-flow .pp-checkout-container__ft button,
    #tm-content .riko-payplans-flow .pp-result__action a,
    #tm-content .riko-register-actions > *,
    #tm-content .riko-profile-actions > *,
    #tm-content .riko-subscription-form-actions > * {
            width: 100%;
            text-align: center;
        }
}

@media (max-width: 430px) {
    #tm-content .riko-register-hero,
    #tm-content .riko-jumbo-hero,
    #tm-content .riko-checkout-hero,
    #tm-content .riko-profile-hero,
    #tm-content .riko-subscription-hero {
            padding: 18px;
        }

    #tm-content .riko-register-hero h1,
    #tm-content .riko-jumbo-hero h1,
    #tm-content .riko-checkout-hero h1,
    #tm-content .riko-profile-hero h1,
    #tm-content .riko-subscription-hero h1 {
            font-size: 27px;
        }
}

#tm-content .riko-register-page,
#tm-content .riko-jumbo-page,
#tm-content .riko-payplans-flow,
#tm-content .riko-profile-page,
#tm-content .riko-subscription-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#tm-content .riko-register-hero h1,
#tm-content .riko-jumbo-hero h1,
#tm-content .riko-checkout-hero h1,
#tm-content .riko-profile-hero h1,
#tm-content .riko-subscription-hero h1 {
    color: var(--riko-on-brand) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

#tm-content .riko-register-lead,
#tm-content .riko-jumbo-hero p,
#tm-content .riko-checkout-hero p,
#tm-content .riko-profile-hero p,
#tm-content .riko-subscription-hero p {
    color: color-mix(in srgb, var(--riko-on-brand) 93%, transparent) !important;
    text-shadow: none !important;
}

#tm-content .riko-subscription-hero .riko-subscription-eyebrow,
#tm-content .riko-register-hero .riko-register-eyebrow,
#tm-content .riko-jumbo-hero .riko-jumbo-eyebrow,
#tm-content .riko-checkout-hero .riko-jumbo-eyebrow,
#tm-content .riko-profile-hero .riko-profile-eyebrow {
    color: var(--riko-on-brand-muted) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--riko-inverse) 26%, transparent) !important;
    text-shadow: none !important;
}

#tm-content .riko-jumbo-status-panel strong,
#tm-content .riko-subscription-card h3,
#tm-content .riko-subscription-section-head h2,
#tm-content .riko-profile-summary-card h2,
#tm-content .riko-profile-form-head h2,
#tm-content .riko-register-form-heading h2,
#tm-content .riko-jumbo-section-heading h2,
#tm-content .riko-jumbo-plan-head h2 {
    font-weight: 800 !important;
    text-shadow: none !important;
}

#tm-content .riko-profile-hero .riko-profile-summary-card,
#tm-content .riko-jumbo-hero .riko-jumbo-hero-card {
    color: var(--riko-link) !important;
}

#tm-content .riko-profile-hero .riko-profile-summary-card h2,
#tm-content .riko-jumbo-hero .riko-jumbo-hero-card h2,
#tm-content .riko-jumbo-hero .riko-jumbo-hero-card strong {
    color: var(--riko-link) !important;
    text-shadow: none !important;
}

#tm-content .riko-profile-hero .riko-profile-summary-card p,
#tm-content .riko-profile-hero .riko-profile-summary-card span,
#tm-content .riko-jumbo-hero .riko-jumbo-hero-card p,
#tm-content .riko-jumbo-hero .riko-jumbo-hero-card span {
    color: var(--riko-muted) !important;
    text-shadow: none !important;
}

#tm-content .riko-profile-hero .riko-profile-summary-card dt {
    color: var(--riko-link) !important;
}

#tm-content .riko-profile-hero .riko-profile-summary-card dd {
    color: var(--riko-link) !important;
}

/* Rikoooo login and registration complete rebuild v109 - Codex 2026-06-25 */
#tm-content .riko-register-complete-page {
    max-width: none;
    color: var(--riko-ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#tm-content .riko-register-complete-page * {
    box-sizing: border-box;
}

#tm-content .riko-register-complete-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--riko-brand) 18%, transparent);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--riko-brand) 0%, var(--riko-brand-end) 100%);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-register-complete-hero:after {
    content: "";
    position: absolute;
    inset: auto -80px -140px auto;
    width: 340px;
    height: 340px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-inverse) 8%, transparent);
}

#tm-content .riko-register-complete-hero > * {
    position: relative;
    z-index: 1;
}

#tm-content .riko-register-complete-page .riko-register-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 28%, transparent);
    border-radius: 999px;
    color: var(--riko-on-brand-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#tm-content .riko-register-complete-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--riko-on-brand) !important;
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 850 !important;
    line-height: 1.15;
    letter-spacing: 0;
    text-shadow: none !important;
}

#tm-content .riko-register-complete-hero p {
    max-width: 780px;
    margin: 16px 0 0;
    color: color-mix(in srgb, var(--riko-on-brand) 92%, transparent) !important;
    font-size: 18px;
    font-weight: 650;
    text-shadow: none !important;
}

#tm-content .riko-register-complete-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

#tm-content .riko-register-complete-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--riko-inverse) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--riko-inverse) 10%, transparent);
    color: var(--riko-on-brand);
    font-size: 13px;
    font-weight: 800;
}

#tm-content .riko-register-complete-messages {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

#tm-content .riko-register-complete-message {
    display: grid;
    gap: 4px;
    padding: 15px 18px;
    border: 1px solid var(--riko-line);
    border-left: 5px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
}

#tm-content .riko-register-complete-message strong {
    color: var(--riko-ink);
    font-size: 15px;
    font-weight: 850;
}

#tm-content .riko-register-complete-message span {
    color: var(--riko-muted);
}

#tm-content .riko-register-complete-message-message,
#tm-content .riko-register-complete-message-success {
    border-color: color-mix(in srgb, var(--riko-success) 28%, var(--riko-surface));
    border-left-color: var(--riko-success);
    background: var(--riko-surface);
}

#tm-content .riko-register-complete-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
    gap: 18px;
    align-items: start;
}

#tm-content .riko-register-complete-card {
    border: 1px solid var(--riko-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--riko-surface) 96%, transparent);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent);
}

#tm-content .riko-register-complete-card {
    padding: 24px;
}

#tm-content .riko-register-complete-card h2 {
    margin: 0 0 10px;
    color: var(--riko-ink);
    font-size: 25px;
    font-weight: 850;
    line-height: 1.14;
    letter-spacing: 0;
}

#tm-content .riko-register-complete-card p {
    margin: 0;
    color: var(--riko-muted);
    font-weight: 650;
}

#tm-content .riko-register-complete-primary,
#tm-content .riko-register-complete-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-weight: 850;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#tm-content .riko-register-complete-primary {
    background: var(--riko-action) !important;
    color: var(--riko-action-contrast) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
}

#tm-content .riko-register-complete-secondary {
    border-color: var(--riko-line);
    background: var(--riko-surface-soft);
    color: var(--riko-ink) !important;
}

#tm-content .riko-register-complete-primary:hover,
#tm-content .riko-register-complete-primary:focus,
#tm-content .riko-register-complete-secondary:hover,
#tm-content .riko-register-complete-secondary:focus {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--riko-brand-deep) 18%, transparent);
}

#tm-content .riko-register-complete-tip {
    padding: 22px;
}

#tm-content .riko-register-complete-tip a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-link) !important;
    font-weight: 800;
    text-decoration: none !important;
}

#tm-content .riko-register-complete-steps {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    counter-reset: riko-complete-step;
}

#tm-content .riko-register-complete-steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0;
    color: var(--riko-ink);
    font-weight: 750;
    list-style: none;
}

#tm-content .riko-register-complete-steps li:before {
    counter-increment: riko-complete-step;
    content: counter(riko-complete-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-weight: 900;
}

#tm-content .riko-register-complete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

#tm-content .riko-register-complete-tip {
    border-top: 4px solid var(--riko-action);
}

@media (max-width: 900px) {
    #tm-content .riko-register-complete-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #tm-content .riko-register-complete-page {
        overflow-x: hidden;
    }

    #tm-content .riko-register-complete-hero {
        padding: 22px 18px;
    }

    #tm-content .riko-register-complete-hero h1 {
        font-size: 31px;
    }

    #tm-content .riko-register-complete-hero p {
        font-size: 16px;
    }

    #tm-content .riko-register-complete-card {
        padding: 18px;
    }

    #tm-content .riko-register-complete-actions > * {
        width: 100%;
        text-align: center;
    }
}

/* Rikoooo registration flow optimization - Codex 2026-07-08 */
#tm-content #riko-register-options {
    scroll-margin-top: 92px;
}

#tm-content .riko-register-layout {
    grid-template-columns: minmax(0, .98fr) minmax(320px, 420px);
    gap: 24px;
}

#tm-content .riko-register-form-card {
    min-height: 0;
}

#tm-content .riko-register-google-card {
    border-color: color-mix(in srgb, var(--riko-brand) 28%, transparent);
    border-top: 4px solid var(--riko-brand);
    background:
        linear-gradient(180deg, var(--riko-surface) 0%, var(--riko-surface-soft) 100%),
        linear-gradient(135deg, color-mix(in srgb, var(--riko-action) 8%, transparent), transparent 56%);
}

#tm-content .riko-register-google-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

#tm-content .riko-register-choice-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--riko-action);
    border-radius: 999px;
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-size: 12px;
    font-weight: 900;
    line-height: 28px;
}

#tm-content .riko-register-google-card h2 {
    margin-top: 16px;
}

#tm-content .riko-register-google {
    min-height: 52px;
    border-color: var(--riko-line) !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent);
}

#tm-content .riko-register-google strong {
    overflow-wrap: anywhere;
}

#tm-content .riko-register-form-heading {
    gap: 9px;
}

#tm-content .riko-register-antiabuse {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#tm-content .riko-register-submit.is-loading {
    opacity: .72;
    pointer-events: none;
}

@media (max-width: 980px) {
    #tm-content .riko-register-layout {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-register-side {
        order: -1;
    }

    #tm-content .riko-register-google-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    #tm-content #riko-register-options {
        scroll-margin-top: 72px;
    }

    #tm-content .riko-register-google-head {
        display: grid;
        justify-content: stretch;
    }

    #tm-content .riko-register-choice-badge {
        width: fit-content;
    }
}

/* Account recovery shares the sign-in page's reading width and native fields. */
#tm-content .riko-recovery-page,
#tm-content .riko-recovery-page * { box-sizing: border-box; }

body.riko-component-page #tm-content .riko-recovery-page {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    color: var(--riko-ink);
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#tm-content .riko-recovery-heading { margin-bottom: 24px; }
#tm-content .riko-recovery-heading h1 {
    margin: 0 0 8px;
    color: var(--riko-ink);
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    font-weight: 750;
    line-height: 1.2;
}
#tm-content .riko-recovery-heading p {
    max-width: 66ch;
    margin: 0;
    color: var(--riko-muted);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

#tm-content .riko-recovery-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 550px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
#tm-content .riko-recovery-progress li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--riko-line);
    color: var(--riko-muted);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
}
#tm-content .riko-recovery-step-number {
    display: inline-flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--riko-line);
    border-radius: 50%;
    color: inherit;
    background: var(--riko-surface);
}
#tm-content .riko-recovery-progress .is-current {
    border-color: var(--riko-action);
    color: var(--riko-ink);
    font-weight: 650;
}
#tm-content .riko-recovery-progress .is-current .riko-recovery-step-number {
    border-color: var(--riko-action);
    background: var(--riko-action);
    color: var(--riko-action-contrast);
}
#tm-content .riko-recovery-progress .is-complete .riko-recovery-step-number {
    background: var(--riko-action-soft);
    color: var(--riko-link);
}

#tm-content .riko-recovery-messages { display: grid; gap: 10px; margin: 0 0 20px; }
#tm-content .riko-recovery-message {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--riko-line);
    border-left: 4px solid var(--riko-action);
    border-radius: 7px;
    background: var(--riko-surface-soft);
    color: var(--riko-ink);
    font-size: .9375rem;
    font-weight: 400;
}
#tm-content .riko-recovery-message strong { color: inherit; font-weight: 650; }
#tm-content .riko-recovery-message :is(p, span) { margin: 0; color: inherit; }
#tm-content :is(.riko-recovery-message-warning, .riko-recovery-message-error, .riko-recovery-message-danger) {
    border-left-color: var(--riko-warning);
}

#tm-content .riko-recovery-layout {
    display: grid;
    grid-template-columns: minmax(0, 550px) minmax(260px, 1fr);
    align-items: start;
    gap: 28px;
}
#tm-content .riko-recovery-page .riko-recovery-card {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    background: var(--riko-surface);
    box-shadow: none;
}
#tm-content .riko-recovery-page .riko-recovery-card::after { content: none; }
#tm-content .riko-recovery-form-card { padding: 24px; }
#tm-content .riko-recovery-card-head { margin-bottom: 20px; }
#tm-content .riko-recovery-card-head h2 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}
#tm-content .riko-recovery-form { display: grid; gap: 16px; margin: 0; }
#tm-content .riko-recovery-fieldset { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
#tm-content .riko-recovery-field { display: grid; gap: 6px; min-width: 0; }
#tm-content .riko-recovery-label,
#tm-content .riko-recovery-label label {
    margin: 0;
    color: var(--riko-ink);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
}
#tm-content .riko-recovery-label .star { color: var(--riko-rating); }
#tm-content .riko-recovery-control { min-width: 0; }
#tm-content .riko-recovery-control :is(input[type="text"], input[type="email"], input[type="password"], select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--riko-line);
    border-radius: 7px;
    background: var(--riko-surface);
    color: var(--riko-ink);
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
#tm-content .riko-recovery-control :is(input, select, textarea):focus-visible {
    border-color: var(--riko-focus);
    outline: 2px solid var(--riko-focus);
    outline-offset: 2px;
}
#tm-content .riko-recovery-control :is(.password-group, .input-group) { position: relative; width: 100%; min-width: 0; }
#tm-content .riko-recovery-control .input-group { display: flex; padding: 0; border: 0; background: transparent; }
#tm-content .riko-recovery-control .input-group > input { padding-right: 54px; }
#tm-content .riko-recovery-page .riko-recovery-control .input-password-toggle {
    position: absolute;
    inset: 2px 2px auto auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: var(--riko-ink);
    background: transparent;
    box-shadow: none;
    transform: none;
}
#tm-content .riko-recovery-control .input-password-toggle::before { content: none; }
#tm-content .riko-recovery-page .riko-recovery-control .input-password-toggle:is(:hover, :focus) { background: var(--riko-surface-soft); color: var(--riko-ink); box-shadow: none; transform: none; }
#tm-content .riko-recovery-control :is(.password-rules, .small) { color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; }
#tm-content .riko-recovery-control meter { display: block; width: 100%; height: 6px; margin-top: 8px; }
#tm-content .riko-recovery-control output { display: block; color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; }
#tm-content .riko-recovery-control output:not(:empty) { margin-top: 6px; }

#tm-content .riko-recovery-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--riko-line);
}
#tm-content .riko-recovery-page .riko-recovery-actions :is(.riko-recovery-submit, .riko-recovery-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--riko-line);
    border-radius: 7px;
    background: var(--riko-surface);
    color: var(--riko-link);
    box-shadow: none;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: normal;
    transform: none;
}
#tm-content .riko-recovery-page .riko-recovery-actions .riko-recovery-submit { border-color: var(--riko-action); background: var(--riko-action); color: var(--riko-action-contrast); }
#tm-content .riko-recovery-page .riko-recovery-actions .riko-recovery-submit:is(:hover, :focus) { border-color: var(--riko-action-hover); background: var(--riko-action-hover); }
#tm-content .riko-recovery-page .riko-recovery-actions .riko-recovery-secondary:is(:hover, :focus) { border-color: var(--riko-action-hover); background: var(--riko-action-soft-hover); color: var(--riko-action-hover); }
#tm-content .riko-recovery-page .riko-recovery-actions :is(.riko-recovery-submit, .riko-recovery-secondary):is(:hover, :focus) { box-shadow: none; transform: none; }
#tm-content .riko-recovery-page :is(a, button):focus-visible { outline: 2px solid var(--riko-focus); outline-offset: 3px; }

#tm-content .riko-recovery-side { min-width: 0; padding: 24px 0; }
#tm-content .riko-recovery-side .riko-recovery-help-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
#tm-content .riko-recovery-help-card h2 { margin: 0 0 10px; color: var(--riko-ink); font-size: 1.125rem; font-weight: 650; line-height: 1.4; }
#tm-content .riko-recovery-help-card p { max-width: 44ch; margin: 0 0 16px; color: var(--riko-muted); font-size: 1rem; font-weight: 400; line-height: 1.6; }
#tm-content .riko-recovery-help-card nav { display: grid; gap: 4px; justify-items: start; }
#tm-content .riko-recovery-help-card a { display: inline-flex; align-items: center; min-height: 44px; color: var(--riko-link); font-size: .9375rem; font-weight: 400; text-underline-offset: 3px; }

@media (max-width: 800px) {
    body.riko-component-page #tm-content .riko-recovery-page { max-width: 550px; }
    #tm-content .riko-recovery-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    #tm-content .riko-recovery-side { padding: 20px 0 0; border-top: 1px solid var(--riko-line); }
}
@media (max-width: 600px) {
    #tm-content .riko-recovery-form-card { padding: 0; }
    #tm-content .riko-recovery-page .riko-recovery-card { border: 0; border-radius: 0; background: transparent; }
    #tm-content .riko-recovery-progress { gap: 8px; }
    #tm-content .riko-recovery-progress li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: .75rem; }
    #tm-content .riko-recovery-actions { grid-template-columns: minmax(0, 1fr); }
    #tm-content .riko-recovery-page :is(.riko-recovery-submit, .riko-recovery-secondary) { width: 100%; }
}

/* Account airline-livery motif - replace large decorative circles with micro-points. */
#tm-content .riko-register-complete-hero,
#tm-content .riko-recovery-hero {
    background: url("../images/home-airframe.svg") right center / auto 100% no-repeat,
        linear-gradient(120deg, var(--riko-brand-deep), var(--riko-brand));
}

#tm-content .riko-register-complete-hero::after,
#tm-content .riko-recovery-hero::after {
    position: absolute;
    z-index: 0;
    inset: -28% -6% -32% auto;
    width: 48%;
    height: auto;
    border: 0;
    border-radius: 0;
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--riko-inverse) 30%, transparent) 0 1.05px, transparent 1.45px),
        radial-gradient(circle, color-mix(in srgb, var(--riko-brand-end) 22%, transparent) 0 0.8px, transparent 1.2px);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px, 32px 32px;
    box-shadow: none;
    content: "";
    opacity: 0.62;
    pointer-events: none;
    transform: rotate(-7deg);
    -webkit-mask-image: radial-gradient(ellipse at 72% 48%, #000 0, rgba(0, 0, 0, 0.82) 43%, transparent 78%);
    mask-image: radial-gradient(ellipse at 72% 48%, #000 0, rgba(0, 0, 0, 0.82) 43%, transparent 78%);
}

#tm-content .riko-register-complete-hero > *,
#tm-content .riko-recovery-hero > * {
    position: relative;
    z-index: 1;
}

#tm-content .riko-recovery-card,
#tm-content .riko-register-form-card,
#tm-content .riko-profile-side-card,
#tm-content .riko-subscription-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#tm-content .riko-recovery-card::after,
#tm-content .riko-register-form-card::after,
#tm-content .riko-profile-side-card::after,
#tm-content .riko-subscription-card::after {
    position: absolute;
    z-index: 0;
    inset: -26px -24px auto auto;
    width: 180px;
    height: 145px;
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--riko-brand-end) 12%, transparent) 0 1px, transparent 1.4px),
        radial-gradient(circle, color-mix(in srgb, var(--riko-brand-end) 7%, transparent) 0 0.8px, transparent 1.15px);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px, 32px 32px;
    content: "";
    opacity: 0.58;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 0, transparent 76%);
    mask-image: radial-gradient(ellipse at 100% 0, #000 0, transparent 76%);
}

#tm-content .riko-recovery-card > *,
#tm-content .riko-register-form-card > *,
#tm-content .riko-profile-side-card > *,
#tm-content .riko-subscription-card > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    #tm-content .riko-register-complete-hero::after,
    #tm-content .riko-recovery-hero::after {
        inset: -15% -26% -20% auto;
        width: 82%;
        background-size: 15px 15px, 30px 30px;
        opacity: 0.42;
    }

    #tm-content .riko-recovery-card::after,
    #tm-content .riko-register-form-card::after,
    #tm-content .riko-profile-side-card::after,
    #tm-content .riko-subscription-card::after {
        width: 140px;
        height: 112px;
        opacity: 0.42;
    }
}

/* Member navigation single source of truth - 2026-08-02.
   Component styles must not alter this control's geometry or active order. */
#tm-content .riko-member-page .riko-member-nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    font-family: "Varela Round", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

#tm-content .riko-member-nav__rail {
    display: flex;
    width: 100%;
    min-height: 62px;
    box-sizing: border-box;
    gap: 8px;
    align-items: center;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--riko-action) 22%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--riko-surface) 92%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

#tm-content .riko-member-nav__link {
    position: relative;
    display: inline-flex;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--riko-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

#tm-content .riko-member-nav__link > i {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
}

#tm-content .riko-member-nav__link:hover,
#tm-content .riko-member-nav__link:focus-visible {
    border-color: color-mix(in srgb, var(--riko-focus) 32%, transparent);
    color: var(--riko-focus);
    background: var(--riko-action-soft-hover);
}

#tm-content .riko-member-nav__link:focus-visible {
    outline: 3px solid var(--riko-focus) !important;
    outline-offset: 2px;
}

#tm-content .riko-member-nav__link.is-active {
    border-color: transparent;
    color: var(--riko-action-contrast);
    background: var(--riko-action-hover);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--riko-brand-deep) 20%, transparent);
}

/* Keep question status explicit beside its navigation label. */
#tm-content .riko-member-nav__link > strong {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    box-sizing: border-box;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--riko-ink);
    background: var(--riko-surface-soft);
    font-size: 0.75rem;
    line-height: 1;
}

#tm-content .riko-member-nav__link.is-active > strong {
    color: var(--riko-action-hover);
    background: var(--riko-surface);
}

/* Event sticker: warm, asymmetric and outside the desktop link flow so its
   presence never moves or resizes the six navigation tabs. */
#tm-content .riko-member-nav__badge {
    display: inline-grid;
    width: auto;
    min-width: 35px;
    height: 20px;
    min-height: 20px;
    box-sizing: border-box;
    flex: 0 0 auto;
    place-items: center;
    padding: 0 7px;
    border: 1px solid var(--riko-action);
    border-radius: 5px 8px 4px 7px;
    clip-path: polygon(5px 0, 100% 2px, calc(100% - 3px) 100%, 0 calc(100% - 3px));
    color: var(--riko-action-contrast);
    background: linear-gradient(135deg, var(--riko-action) 0%, var(--riko-action) 62%, var(--riko-action) 100%);
    box-shadow: 0 4px 9px color-mix(in srgb, var(--riko-brand-deep) 24%, transparent);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-6deg);
    transform-origin: 50% 50%;
    animation: riko-member-nav-badge-enter 180ms cubic-bezier(0.2, 0.85, 0.32, 1.2) both;
}

#tm-content .riko-member-nav__rail .riko-member-nav__link > .riko-member-nav__badge {
    position: absolute;
    z-index: 2;
    top: -7px;
    inset-inline-end: -5px;
}

#tm-content .riko-member-nav__link.is-active .riko-member-nav__badge {
    color: var(--riko-action-contrast);
    background: linear-gradient(135deg, var(--riko-action-hover) 0%, var(--riko-action-hover) 58%, var(--riko-action-hover) 100%);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--riko-brand-deep) 34%, transparent);
}

@keyframes riko-member-nav-badge-enter {
    from {
        opacity: 0;
        transform: translateY(-3px) rotate(-10deg) scale(0.84);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(-6deg) scale(1);
    }
}

#tm-content .riko-member-dashboard {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    color: var(--riko-ink);
}

/* Authentication pages are utility screens: keep the primary task near the fold. */
#tm-content .riko-register-page .riko-register-hero {
    min-height: 0 !important;
    padding-block: 24px !important;
}

#tm-content .riko-register-page .riko-register-hero {
    display: block !important;
}

#tm-content .riko-register-video-bg,
#tm-content .riko-register-assurance {
    display: none !important;
}

#tm-content .riko-register-layout {
    align-items: start !important;
    margin-top: 24px !important;
}

#tm-content .riko-register-form-card,
#tm-content .riko-register-google-card,
#tm-content .riko-register-trust-card {
    padding: 24px !important;
}

#tm-content .riko-register-privacy {
    margin: 18px 0 0 !important;
    padding: 14px !important;
    border-radius: 12px;
    color: var(--riko-muted);
    background: var(--riko-surface-soft);
}

#tm-content .riko-register-actions {
    margin-top: 14px !important;
}

.riko-native-account .riko-sclogin-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
}

.riko-native-account .riko-account-welcome {
    color: color-mix(in srgb, var(--riko-on-brand) 78%, transparent);
}

.riko-native-account .riko-account-welcome strong {
    color: var(--riko-on-brand-muted);
}

.riko-native-account .riko-account-launcher {
    display: inline-flex !important;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 14px !important;
    border: 1px solid color-mix(in srgb, var(--riko-line) 32%, transparent) !important;
    border-radius: 13px !important;
    color: var(--riko-on-brand) !important;
    background: color-mix(in srgb, var(--riko-brand) 72%, transparent) !important;
}

.riko-native-account .riko-account-launcher__count {
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--riko-ink);
    background: var(--riko-surface-soft);
    font-size: 0.72rem;
}

.riko-native-account .riko-account-navigation-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.riko-profile-page .riko-profile-summary-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 680px) {
    #tm-content .riko-member-dashboard {
        width: calc(100% - 18px);
    }

    #tm-content .riko-register-page .riko-register-hero {
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }

    #tm-content .riko-register-google-card {
        padding: 18px !important;
    }

    #tm-content .riko-register-google-card p {
        margin-block: 8px 12px !important;
    }

    #tm-content .riko-register-form-card {
        padding: 19px !important;
    }

    #tm-content .riko-register-form-heading p {
        margin-bottom: 12px !important;
    }

    #tm-content .riko-register-actions {
        bottom: 8px;
        border: 1px solid color-mix(in srgb, var(--riko-action) 20%, transparent);
        background: color-mix(in srgb, var(--riko-surface) 96%, transparent);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
    }

    #tm-content .riko-profile-page .riko-profile-actions {
        bottom: 8px;
        border: 1px solid color-mix(in srgb, var(--riko-action) 20%, transparent);
        background: color-mix(in srgb, var(--riko-surface) 96%, transparent);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--riko-brand-deep) 16%, transparent);
    }

    .riko-profile-page .riko-profile-summary-card dl {
        grid-template-columns: 1fr;
    }

    .riko-native-account .riko-account-welcome {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tm-content .riko-member-card,
    #tm-content .riko-member-nav__link,
    #tm-content .riko-register-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    #tm-content .riko-member-nav__badge {
        animation: none;
    }
}

/* Member navigation: one complete, predictable control on phones. */
#tm-content .riko-member-nav__mobile {
    display: none;
}

@media (max-width: 700px) {
    #tm-content .riko-member-page .riko-member-nav {
        margin-bottom: 12px;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #tm-content .riko-member-page .riko-member-nav__rail {
        display: none;
    }

    #tm-content .riko-member-nav__mobile {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        border: 1px solid color-mix(in srgb, var(--riko-action) 62%, transparent);
        border-radius: 15px;
        background: color-mix(in srgb, var(--riko-surface) 96%, transparent);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--riko-brand-deep) 8%, transparent);
    }

    #tm-content .riko-member-nav__mobile > summary {
        position: relative;
        display: grid;
        min-height: 68px;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: center;
        gap: 3px 12px;
        padding: 10px 44px 10px 14px;
        color: var(--riko-link);
        cursor: pointer;
        list-style: none;
    }

    #tm-content .riko-member-nav__mobile > summary::-webkit-details-marker {
        display: none;
    }

    #tm-content .riko-member-nav__mobile > summary::after {
        position: absolute;
        top: 50%;
        right: 15px;
        content: "\2304";
        transform: translateY(-58%);
        color: var(--riko-link);
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
    }

    #tm-content .riko-member-nav__mobile[open] > summary::after {
        transform: translateY(-38%) rotate(180deg);
    }

    #tm-content .riko-member-nav__mobile-caption {
        grid-column: 1 / -1;
        color: var(--riko-muted);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.07em;
        line-height: 1.15;
        text-transform: uppercase;
    }

    #tm-content .riko-member-nav__mobile > summary > strong {
        display: inline-flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        line-height: 1.25;
    }

    #tm-content .riko-member-nav__mobile > summary > strong > .riko-member-nav__badge {
        position: absolute;
        z-index: 2;
        top: -6px;
        inset-inline-end: 38px;
    }

    #tm-content .riko-member-nav__mobile > summary > strong > span,
    #tm-content .riko-member-nav__mobile-menu a > strong {
        display: inline-flex;
        min-width: 24px;
        min-height: 24px;
        padding: 0 7px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: var(--riko-link);
        background: var(--riko-action-soft);
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
    }

    #tm-content .riko-member-nav__mobile > summary > small {
        align-self: center;
        color: var(--riko-link);
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
    }

    #tm-content .riko-member-nav__mobile-menu {
        display: grid;
        gap: 6px;
        padding: 7px;
        border-top: 1px solid color-mix(in srgb, var(--riko-action) 42%, transparent);
    }

    #tm-content .riko-member-nav__mobile-menu a {
        position: relative;
        display: grid;
        min-height: 46px;
        box-sizing: border-box;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px 11px;
        border: 1px solid transparent;
        border-radius: 11px;
        color: var(--riko-link);
        background: var(--riko-action-soft);
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }

    #tm-content .riko-member-nav__mobile-menu a > .riko-member-nav__badge {
        position: absolute;
        z-index: 2;
        top: -4px;
        inset-inline-end: 7px;
    }

    #tm-content .riko-member-nav__mobile-menu a.is-active {
        color: var(--riko-action-contrast);
        background: linear-gradient(135deg, var(--riko-action-hover), var(--riko-action-hover));
    }

    #tm-content .riko-member-nav__mobile-menu a.is-active > strong {
        color: var(--riko-action-hover);
        background: var(--riko-surface);
    }

    #tm-content .riko-member-nav__mobile-menu a:focus-visible,
    #tm-content .riko-member-nav__mobile > summary:focus-visible {
        outline: 3px solid var(--riko-focus) !important;
        outline-offset: 3px;
    }
}

@media (max-width: 680px) {
    #tm-content .riko-register-page .riko-register-hero {
        padding: 20px !important;
    }

    #tm-content .riko-register-page .riko-register-hero-primary {
        display: none !important;
    }

    #tm-content .riko-register-page .riko-register-google-card {
        min-height: 0 !important;
    }

    #tm-content .riko-register-page .riko-register-google-head {
        min-height: 0 !important;
    }

    #tm-content .riko-register-page .riko-register-google-head .riko-register-eyebrow,
    #tm-content .riko-register-page .riko-register-form-heading > .riko-register-eyebrow {
        display: none !important;
    }

    #tm-content .riko-register-page .riko-register-google-card h2 {
        margin-top: 8px !important;
        font-size: 1.3rem !important;
    }

    #tm-content .riko-register-page .riko-register-google-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    #tm-content .riko-register-page .riko-register-google {
        margin-top: 10px !important;
    }

    #tm-content .riko-register-page .riko-register-form-heading {
        gap: 6px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    #tm-content .riko-register-page .riko-register-form-heading h2 {
        font-size: 1.38rem !important;
        line-height: 1.15 !important;
    }

    #tm-content .riko-register-page .riko-register-form-heading p {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }
}

/* Mobile member area finishing contract - 2026-07-23 */
@media (max-width: 680px) {
    #tm-content :where(
        .riko-member-dashboard,
        .riko-register-page,
        .riko-profile-page,
        .riko-subscription-page,
        .riko-jumbo-page,
        .riko-payplans-flow
    ) {
        width: 100%;
        max-width: none;
        margin-inline: auto;
        overflow-wrap: anywhere;
    }

    #tm-content .riko-subscription-shortcuts::-webkit-scrollbar {
        display: none;
    }

    /* Authentication: show the task before decorative or secondary content. */
    #tm-content .riko-register-hero {
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 18px !important;
        border-radius: 16px !important;
    }

    #tm-content .riko-register-hero h1 {
        margin-top: 8px !important;
        font-size: clamp(1.62rem, 8vw, 1.9rem) !important;
        line-height: 1.08 !important;
    }

    #tm-content .riko-register-lead {
        margin-top: 9px !important;
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    #tm-content .riko-register-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    #tm-content .riko-register-hero-secondary {
        width: 100%;
        min-height: 44px;
    }

    #tm-content .riko-register-layout {
        gap: 10px !important;
        margin-top: 10px !important;
    }

    #tm-content .riko-register-form-card,
    #tm-content .riko-register-google-card {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    #tm-content .riko-register-side {
        gap: 10px !important;
    }

    #tm-content .riko-register-form-heading {
        margin-bottom: 10px !important;
        padding-bottom: 9px !important;
    }

    #tm-content .riko-register-form-heading > .riko-register-eyebrow {
        display: none !important;
    }

    #tm-content .riko-register-form-heading h2,
    #tm-content .riko-register-google-card h2 {
        margin-block: 0 6px !important;
        font-size: 1.28rem !important;
        line-height: 1.15 !important;
    }

    #tm-content .riko-register-form-heading p {
        margin-block: 0 9px !important;
        font-size: 0.86rem !important;
        line-height: 1.42 !important;
    }

    #tm-content .riko-register-form {
        gap: 10px !important;
    }

    #tm-content .riko-register-field {
        gap: 4px !important;
    }

    #tm-content .riko-register-control input[type="text"],
    #tm-content .riko-register-control input[type="email"],
    #tm-content .riko-register-control input[type="password"],
    #tm-content .riko-register-control select {
        min-height: 48px !important;
        font-size: 16px !important;
        line-height: 48px !important;
    }

    #tm-content .riko-register-control .password-group,
    #tm-content .riko-profile-control .password-group {
        position: relative;
        min-height: 48px;
    }

    #tm-content .riko-register-control .password-group input,
    #tm-content .riko-profile-control .password-group input {
        padding-right: 54px !important;
    }

    #tm-content .riko-register-control .password-group > button,
    #tm-content .riko-profile-control .password-group > button {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        background: transparent !important;
        font-size: 0 !important;
        line-height: 44px !important;
    }

    #tm-content .riko-register-control .password-group > button::before,
    #tm-content .riko-profile-control .password-group > button::before {
        content: "\f06e";
        font-family: FontAwesome;
        font-size: 16px;
    }

    #tm-content .riko-register-google,
    #tm-content .riko-register-submit,
    #tm-content .riko-register-cancel {
        min-height: 48px !important;
    }

    #tm-content .riko-register-side {
        order: -1;
    }

    #tm-content .riko-register-trust-card {
        display: none !important;
    }

    #tm-content .riko-register-google-head {
        display: flex !important;
        gap: 7px;
        align-items: center;
        justify-content: space-between;
    }

    #tm-content .riko-register-google-head .riko-register-eyebrow {
        display: none !important;
    }

    #tm-content .riko-register-choice-badge {
        min-height: 24px;
        padding-inline: 8px;
        font-size: 0.7rem;
        line-height: 24px;
    }

    #tm-content .riko-register-google-card h2 {
        margin-top: 7px !important;
    }

    #tm-content .riko-register-google-card > p {
        display: none !important;
    }

    #tm-content .riko-register-google {
        margin-top: 7px !important;
    }

    #tm-content .riko-register-form-heading small {
        font-size: 0.75rem;
    }

    #tm-content .riko-register-form fieldset,
    #tm-content .riko-register-fieldset {
        gap: 11px;
        margin-bottom: 11px;
    }

    #tm-content .riko-register-field-jform_spacer {
        display: none;
    }

    #tm-content .riko-register-label,
    #tm-content .riko-profile-label {
        margin-bottom: 5px;
    }

    #tm-content .riko-register-helper,
    #tm-content .riko-profile-helper {
        margin-top: 5px;
        font-size: 0.72rem;
        line-height: 1.35;
    }

    #tm-content .riko-register-privacy {
        margin-top: 10px !important;
        padding: 10px 11px !important;
        font-size: 0.73rem;
        line-height: 1.4;
    }

    #tm-content .riko-register-actions {
        position: sticky;
        z-index: 4;
        bottom: 6px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        margin-top: 10px !important;
        padding: 6px;
        border-radius: 12px;
    }

    #tm-content .riko-register-submit {
        width: 100%;
    }

    #tm-content .riko-register-cancel {
        width: auto;
        min-width: 76px;
        padding-inline: 12px !important;
    }

    /* Profile: keep the account summary, but remove duplicated explanatory
       space and keep save/cancel reachable during long forms. */
    #tm-content .riko-profile-hero h1 {
        font-size: clamp(1.62rem, 8vw, 1.9rem) !important;
        line-height: 1.08;
    }

    #tm-content .riko-profile-hero p {
        margin-top: 8px;
        font-size: 0.9rem !important;
        line-height: 1.42;
    }

    #tm-content .riko-profile-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    #tm-content .riko-profile-hero-actions a {
        width: 100%;
        min-height: 44px;
        padding-inline: 10px !important;
        font-size: 0.8rem !important;
    }

    #tm-content .riko-profile-layout {
        gap: 10px;
    }

    #tm-content .riko-profile-form-head {
        display: block;
        padding-bottom: 12px;
    }

    #tm-content .riko-profile-form-head h2 {
        font-size: 1.3rem;
    }

    #tm-content .riko-profile-form-head p {
        margin: 7px 0 0;
        font-size: 0.82rem;
        line-height: 1.4;
    }

    #tm-content .riko-profile-fieldset {
        margin-bottom: 15px;
    }

    #tm-content .riko-profile-fieldset legend {
        margin-bottom: 10px;
        font-size: 1.05rem;
    }

    #tm-content .riko-profile-field-grid {
        gap: 11px;
    }

    #tm-content .riko-profile-control input[type="text"],
    #tm-content .riko-profile-control input[type="email"],
    #tm-content .riko-profile-control input[type="password"],
    #tm-content .riko-profile-control select {
        min-height: 48px;
        font-size: 16px;
        line-height: 48px;
    }

    #tm-content .riko-profile-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    #tm-content .riko-profile-side-card {
        padding: 14px !important;
        border-radius: 13px;
    }

    #tm-content .riko-profile-side-card h2 {
        font-size: 1rem;
    }

    #tm-content .riko-profile-side-card p {
        margin-top: 7px;
        font-size: 0.76rem;
        line-height: 1.4;
    }

    #tm-content .riko-profile-page .riko-profile-actions {
        position: sticky;
        z-index: 4;
        bottom: 6px;
        display: flex;
        flex-wrap: nowrap;
        border-radius: 12px;
    }

    #tm-content .riko-profile-submit {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 48px;
        padding-inline: 12px !important;
    }

    #tm-content .riko-profile-cancel {
        width: auto;
        flex: 0 0 auto;
        min-height: 48px;
        padding-inline: 12px !important;
    }

    /* Subscription and Jumbo: preserve real status and checkout information,
       while preventing each metric or action from becoming a full screen. */
    #tm-content .riko-subscription-hero,
    #tm-content .riko-jumbo-hero,
    #tm-content .riko-checkout-hero {
        gap: 12px;
        min-height: 0;
        padding: 18px !important;
        border-radius: 16px;
    }

    #tm-content .riko-subscription-hero h1,
    #tm-content .riko-jumbo-hero h1,
    #tm-content .riko-checkout-hero h1 {
        font-size: clamp(1.68rem, 8vw, 2rem) !important;
        line-height: 1.08;
    }

    #tm-content .riko-subscription-hero p,
    #tm-content .riko-jumbo-hero p,
    #tm-content .riko-checkout-hero p {
        margin-top: 8px;
        font-size: 0.9rem !important;
        line-height: 1.45;
    }

    #tm-content .riko-subscription-hero-actions,
    #tm-content .riko-jumbo-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 12px;
    }

    #tm-content .riko-subscription-primary,
    #tm-content .riko-subscription-secondary,
    #tm-content .riko-subscription-page .btn-pp-primary,
    #tm-content .riko-subscription-page .btn-pp-default-o,
    #tm-content .riko-jumbo-primary,
    #tm-content .riko-jumbo-secondary,
    #tm-content .riko-payplans-ghost,
    #tm-content .riko-payplans-flow .btn-pp-primary,
    #pp .riko-payplans-flow .btn-pp-primary {
        min-height: 44px;
    }

    #tm-content .riko-subscription-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #tm-content .riko-subscription-stat {
        min-height: 76px;
        padding: 11px;
        border-radius: 11px;
    }

    #tm-content .riko-subscription-stat strong {
        font-size: 1.45rem;
    }

    #tm-content .riko-subscription-stat span {
        margin-top: 5px;
        font-size: 0.76rem;
        line-height: 1.3;
    }

    #tm-content .riko-jumbo-status-panel {
        min-height: 0;
        gap: 7px;
        padding: 14px;
        border-radius: 12px;
    }

    #tm-content .riko-jumbo-status-panel strong {
        font-size: 1.35rem;
    }

    #tm-content .riko-jumbo-status-panel p {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    #tm-content .riko-subscription-shortcuts {
        display: flex;
        gap: 8px;
        margin-bottom: 11px;
        padding-bottom: 3px;
        overflow-x: auto;
        scroll-padding-inline: 1px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #tm-content .riko-subscription-shortcuts a {
        min-width: min(76vw, 230px);
        min-height: 54px;
        flex: 0 0 min(76vw, 230px);
        gap: 9px;
        padding: 10px 12px;
        scroll-snap-align: start;
        border-radius: 12px;
        font-size: 0.84rem;
    }

    #tm-content .riko-subscription-shortcuts i {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    #tm-content .riko-subscription-section,
    #tm-content .riko-subscription-form-card,
    #tm-content .riko-subscription-table-card,
    #tm-content .riko-jumbo-benefits,
    #tm-content .riko-jumbo-plan-section,
    #tm-content .riko-jumbo-support,
    #tm-content .riko-jumbo-gallery,
    #tm-content .riko-payplans-flow .pp-checkout-wrapper {
        margin-bottom: 11px;
        padding: 15px !important;
        border-radius: 14px;
    }

    #tm-content .riko-subscription-section-head,
    #tm-content .riko-subscription-form-head,
    #tm-content .riko-jumbo-section-heading,
    #tm-content .riko-jumbo-plan-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    #tm-content .riko-subscription-section-head h2,
    #tm-content .riko-subscription-form-head h2,
    #tm-content .riko-subscription-custom-details h3,
    #tm-content .riko-jumbo-section-heading h2,
    #tm-content .riko-jumbo-plan-head h2 {
        font-size: 1.3rem !important;
        line-height: 1.15;
    }

    #tm-content .riko-subscription-section-head p,
    #tm-content .riko-jumbo-plan-head p,
    #tm-content .riko-jumbo-support p {
        margin-top: 6px;
        font-size: 0.82rem;
        line-height: 1.42;
    }

    #tm-content .riko-subscription-list,
    #tm-content .riko-jumbo-benefit-grid {
        gap: 9px;
    }

    #tm-content .riko-subscription-card,
    #tm-content .riko-jumbo-benefit,
    #tm-content .riko-jumbo-page .pp-plan-card {
        border-radius: 13px;
    }

    #tm-content .riko-subscription-card-main,
    #tm-content .riko-jumbo-benefit {
        padding: 14px;
    }

    #tm-content .riko-subscription-card-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #tm-content .riko-subscription-card h3 {
        font-size: 1.15rem;
    }

    #tm-content .riko-subscription-status,
    #tm-content .riko-subscription-status-large {
        justify-content: flex-start;
    }

    #tm-content .riko-subscription-meta {
        gap: 7px 11px;
        margin-top: 7px;
        font-size: 0.78rem;
    }

    #tm-content .riko-subscription-detail-row {
        gap: 4px;
        padding: 12px 14px;
    }

    #tm-content .riko-subscription-card-footer {
        gap: 9px;
        padding: 13px 14px;
    }

    #tm-content .riko-subscription-button-row,
    #tm-content .riko-subscription-form-actions,
    #tm-content .riko-jumbo-history-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    #tm-content .riko-subscription-button-row > *,
    #tm-content .riko-subscription-form-actions > *,
    #tm-content .riko-jumbo-history-actions > *,
    #tm-content .riko-subscription-icon-link {
        width: 100%;
        min-height: 44px;
    }

    #tm-content .riko-subscription-table tr {
        margin-bottom: 9px;
        padding: 10px;
        border-radius: 11px;
    }

    #tm-content .riko-subscription-table td {
        grid-template-columns: minmax(88px, 38%) minmax(0, 1fr);
        gap: 8px;
        padding-block: 8px;
    }

    #tm-content .riko-jumbo-history-item {
        gap: 9px;
        padding: 13px;
        border-radius: 11px;
    }

    #tm-content .riko-jumbo-history-item h3 {
        font-size: 1rem;
    }

    #tm-content .riko-jumbo-hero-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border-radius: 12px;
    }

    #tm-content .riko-jumbo-hero-card > div {
        min-height: 0;
        padding: 10px;
    }

    #tm-content .riko-jumbo-page .pp-plan-card__hd,
    #tm-content .riko-jumbo-page .pp-plan-card__bd,
    #tm-content .riko-jumbo-page .pp-plan-card__ft {
        padding: 14px !important;
    }

    #tm-content .riko-jumbo-page .pp-plan-card__price .pp-amount {
        font-size: 2.35rem;
    }

    
}

@media (max-width: 430px) {
    #tm-content .riko-member-dashboard__hero,
    #tm-content .riko-register-hero,
    #tm-content .riko-profile-hero,
    #tm-content .riko-subscription-hero,
    #tm-content .riko-jumbo-hero,
    #tm-content .riko-checkout-hero {
        padding: 16px !important;
    }

    #tm-content .riko-register-form-card,
    #tm-content .riko-register-google-card,
    #tm-content .riko-profile-form {
        padding: 14px !important;
    }

    #tm-content .riko-profile-summary-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tm-content .riko-jumbo-gallery {
        display: none;
    }
}

@media (max-width: 359px) {
    #tm-content .riko-member-dashboard__grid,
    #tm-content .riko-profile-hero-actions,
    #tm-content .riko-profile-summary-card dl,
    #tm-content .riko-profile-side,
    #tm-content .riko-subscription-stats,
    #tm-content .riko-jumbo-hero-card {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-page .riko-profile-actions {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-submit,
    #tm-content .riko-profile-cancel {
        width: 100%;
    }

    #tm-content .riko-register-actions {
        position: static;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-register-cancel {
        width: 100%;
    }
}

/* Profile and security finishing pass - 2026-07-23 */
#tm-content .riko-profile-page {
    max-width: 1180px;
    margin-inline: auto;
}

#tm-content .riko-profile-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 16px;
}

#tm-content .riko-profile-hero h1 {
    max-width: 680px;
    margin: 14px 0 10px;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1.15;
}

#tm-content .riko-profile-hero > div > p {
    max-width: 650px;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.5;
}

#tm-content .riko-profile-summary-card {
    padding: 18px;
    border-radius: 12px;
}

#tm-content .riko-profile-summary-card h2 {
    font-size: 1.4rem;
}

#tm-content .riko-profile-summary-card dl {
    gap: 8px;
    margin-top: 11px;
}

#tm-content .riko-profile-summary-card dl > div {
    min-width: 0;
    padding: 11px 12px;
    border-left: 3px solid var(--riko-action);
    background: var(--riko-surface);
}

#tm-content .riko-profile-summary-card .is-active {
    border-left-color: var(--riko-action-hover);
    background: var(--riko-action-soft-hover);
}

#tm-content .riko-profile-summary-card .is-pending {
    border-left-color: var(--riko-warning);
    background: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface));
}

#tm-content .riko-profile-summary-card .is-inactive {
    border-left-color: var(--riko-action);
    background: var(--riko-action-soft);
}

#tm-content .riko-profile-summary-card .is-unknown {
    border-left-color: var(--riko-line);
    background: var(--riko-surface);
}

#tm-content .riko-profile-layout {
    display: block;
    margin-top: 24px;
}

#tm-content .riko-profile-form {
    overflow: visible;
    padding: 24px;
    border-radius: 16px;
}

#tm-content .riko-profile-form::before {
    border-radius: 16px 16px 0 0;
}

#tm-content .riko-profile-form-head {
    margin-bottom: 24px;
}

#tm-content .riko-profile-form-head p {
    max-width: 760px;
}

#tm-content .riko-profile-fieldset {
    margin-bottom: 24px;
}

#tm-content .riko-profile-fieldset + .riko-profile-fieldset {
    padding-top: 24px;
    border-top: 1px solid var(--riko-line);
}

#tm-content .riko-profile-fieldset legend {
    margin-bottom: 7px;
}

#tm-content .riko-profile-fieldset-desc {
    max-width: 780px;
    margin: 0 0 17px;
}

#tm-content .riko-profile-fieldset-webauthn,
#tm-content .riko-profile-multifactor {
    padding: 22px;
    border: 1px solid var(--riko-line);
    border-radius: 16px;
    background: var(--riko-surface);
}

#tm-content .riko-profile-fieldset-webauthn + .riko-profile-multifactor {
    margin-top: 2px;
}

#tm-content .riko-profile-fieldset-webauthn .riko-profile-field-grid {
    display: block;
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn {
    width: 100%;
}

#tm-content .riko-profile-fieldset-webauthn .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#tm-content .riko-profile-fieldset-webauthn table {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--riko-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    background: var(--riko-surface);
}

#tm-content .riko-profile-fieldset-webauthn thead th {
    padding: 10px 13px;
    border: 0;
    border-bottom: 1px solid var(--riko-line);
    background: var(--riko-surface-soft);
    color: var(--riko-action);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

#tm-content .riko-profile-fieldset-webauthn tbody th,
#tm-content .riko-profile-fieldset-webauthn tbody td {
    padding: 13px;
    border: 0;
    color: var(--riko-ink);
    font-size: 0.9rem;
    line-height: 1.4;
    vertical-align: middle;
}

#tm-content .riko-profile-fieldset-webauthn tbody td {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

#tm-content .riko-profile-fieldset-webauthn button,
#tm-content .riko-profile-multifactor a.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn-manage-edit {
    border: 1px solid var(--riko-line);
    background: var(--riko-surface);
    color: var(--riko-action);
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn-manage-delete {
    border: 1px solid color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface));
    background: color-mix(in srgb, var(--riko-danger) 9%, var(--riko-surface));
    color: var(--riko-danger);
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn-manage-add-container {
    margin: 12px 0 0;
}

#tm-content .riko-profile-fieldset-webauthn #plg_system_webauthn-manage-add,
#tm-content .riko-profile-multifactor .com-users-methods-list-method-addnew {
    border: 1px solid var(--riko-brand);
    background: var(--riko-brand-end);
    color: var(--riko-on-brand);
    box-shadow: none;
}

#tm-content .riko-profile-multifactor #com-users-methods-reset-container {
    padding: 12px 14px !important;
    border: 1px solid var(--riko-line) !important;
    border-radius: 12px !important;
    background: var(--riko-surface) !important;
    color: var(--riko-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method {
    overflow: hidden;
    margin: 12px 0 0 !important;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    background: var(--riko-surface);
    box-shadow: none;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-header {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--riko-line);
    background: var(--riko-surface);
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-image {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
    border: 1px solid var(--riko-line);
    border-radius: 10px !important;
    background: var(--riko-surface-soft) !important;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-image img {
    display: block;
    width: 100%;
    max-width: 60px;
    height: auto;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-title h2 {
    margin: 0 !important;
    color: var(--riko-ink);
    font-size: 1.08rem !important;
    font-weight: 850;
    line-height: 1.3;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-records-container {
    padding: 14px;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-info {
    margin: 0 0 11px !important;
    padding: 0 !important;
    color: var(--riko-muted) !important;
    font-size: 0.85rem;
    line-height: 1.45;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-addnew-container {
    padding-top: 11px !important;
    border-top: 1px solid var(--riko-line) !important;
}

#tm-content .riko-profile-control input.invalid,
#tm-content .riko-profile-control select.invalid,
#tm-content .riko-profile-control textarea.invalid,
#tm-content .riko-profile-control [aria-invalid="true"] {
    border-color: var(--riko-action) !important;
    background: var(--riko-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--riko-action) 12%, transparent) !important;
}

#tm-content .riko-profile-page .form-control-feedback,
#tm-content .riko-profile-page .invalid-feedback {
    display: block;
    margin-top: 6px;
    color: var(--riko-action);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.4;
}

#tm-content .riko-profile-page .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#tm-content .riko-profile-control .password-group .input-group {
    position: relative;
    display: block;
}

#tm-content .riko-profile-control .password-group .input-group input {
    padding-right: 54px !important;
}

#tm-content .riko-profile-control .password-group .input-group > .input-password-toggle {
    position: absolute !important;
    z-index: 2;
    top: 3px !important;
    right: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--riko-link) !important;
    font-size: 0 !important;
    box-shadow: none !important;
}

#tm-content .riko-profile-control .password-group .input-group > .input-password-toggle::before {
    content: none !important;
}

#tm-content .riko-profile-control .password-group .input-password-toggle [class*="icon-"] {
    font-size: 1rem;
    line-height: 1;
}

#tm-content .riko-profile-control .password-group meter {
    display: none;
}

/* Keep Joomla's validation rules below the aligned password inputs. */
#tm-content .riko-profile-fieldset-password .riko-profile-control {
    display: flex;
    flex-direction: column;
}

#tm-content .riko-profile-fieldset-password .riko-profile-control > .password-group {
    order: -1;
    width: 100%;
}

#tm-content .riko-profile-fieldset-password .riko-profile-control > [id$="-rules"] {
    margin-top: 6px;
}

#tm-content .riko-profile-submit,
#tm-content .riko-profile-cancel {
    min-height: 46px;
    padding-block: 11px !important;
    line-height: 1.2 !important;
}

@media (max-width: 980px) {
    #tm-content .riko-profile-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    #tm-content .riko-profile-page {
        width: 100%;
        margin-bottom: 22px;
    }

    #tm-content .riko-profile-hero {
        gap: 12px;
        padding: 16px !important;
        border-radius: 16px;
    }

    #tm-content .riko-profile-hero h1 {
        margin: 12px 0 8px;
        font-size: clamp(1.65rem, 8vw, 1.95rem) !important;
    }

    #tm-content .riko-profile-hero > div > p {
        margin-top: 0;
        font-size: 0.9rem !important;
    }

    #tm-content .riko-profile-summary-card {
        padding: 14px !important;
        border-radius: 14px;
    }

    #tm-content .riko-profile-summary-card > p {
        display: none;
    }

    #tm-content .riko-profile-summary-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 9px;
    }

    #tm-content .riko-profile-summary-card dl > div {
        padding: 9px 10px;
    }

    #tm-content .riko-profile-summary-card dt {
        font-size: 0.66rem;
        line-height: 1.25;
    }

    #tm-content .riko-profile-summary-card dd {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    #tm-content .riko-profile-layout {
        margin-top: 10px;
    }

    #tm-content .riko-profile-form {
        overflow: visible;
        padding: 16px !important;
        border-radius: 16px;
    }

    #tm-content .riko-profile-form-head {
        margin-bottom: 18px;
    }

    #tm-content .riko-profile-form-head p,
    #tm-content .riko-profile-fieldset-desc {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    #tm-content .riko-profile-fieldset + .riko-profile-fieldset {
        padding-top: 20px;
    }

    #tm-content .riko-profile-fieldset-webauthn,
    #tm-content .riko-profile-multifactor {
        padding: 14px;
        border-radius: 14px;
    }

    #tm-content .riko-profile-helper {
        font-size: 0.76rem;
    }

    #tm-content .riko-profile-control .password-group .input-group > .input-password-toggle {
        top: 2px !important;
        right: 2px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        line-height: 44px !important;
    }

    #tm-content .riko-profile-fieldset-webauthn thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    #tm-content .riko-profile-fieldset-webauthn table,
    #tm-content .riko-profile-fieldset-webauthn tbody,
    #tm-content .riko-profile-fieldset-webauthn tr,
    #tm-content .riko-profile-fieldset-webauthn tbody th,
    #tm-content .riko-profile-fieldset-webauthn tbody td {
        display: block;
        width: 100%;
    }

    #tm-content .riko-profile-fieldset-webauthn tbody th {
        padding: 12px 12px 8px;
    }

    #tm-content .riko-profile-fieldset-webauthn tbody td {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 4px 12px 12px;
    }

    #tm-content .riko-profile-fieldset-webauthn tbody td button {
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    #tm-content .riko-profile-multifactor .com-users-methods-list-method-header {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    #tm-content .riko-profile-multifactor .com-users-methods-list-method-image {
        min-height: 48px;
        padding: 6px !important;
    }

    #tm-content .riko-profile-multifactor .com-users-methods-list-method-title h2 {
        font-size: 1rem !important;
    }

    #tm-content .riko-profile-multifactor .com-users-methods-list-method-records-container {
        padding: 12px;
    }

    #tm-content .riko-profile-page .riko-profile-actions {
        bottom: max(6px, env(safe-area-inset-bottom));
        gap: 7px;
        padding: 6px;
    }

    #tm-content .riko-profile-submit,
    #tm-content .riko-profile-cancel {
        min-height: 48px;
        padding: 10px 12px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 359px) {
    #tm-content .riko-profile-summary-card dl {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-profile-summary-card dl > div {
        display: block;
    }

    #tm-content .riko-profile-summary-card dd {
        margin-top: 4px;
        text-align: left;
    }

    #tm-content .riko-profile-fieldset-webauthn tbody td {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 360px) and (max-width: 430px) {
    #tm-content .riko-profile-fieldset-webauthn tbody td {
        grid-template-columns: 1fr;
    }
}

/* Unified member page shell - canonical site-container width (2026-08-03). */
#tm-content .riko-member-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
}

#tm-content .rhc.riko-member-page {
    padding-inline: 0;
}

#tm-content .riko-subscription-hero {
    padding: 24px;
    border-radius: 16px;
}

#tm-content .riko-jumbo-status-panel {
    border-radius: 12px;
}

#tm-content .riko-subscription-section {
    border-radius: 16px;
}

@media (max-width: 430px) {
    #tm-content .riko-subscription-hero {
        border-radius: 16px;
    }
}

/* Profile and subscription final interaction contract - 2026-07-24 */

#tm-content .riko-profile-control .password-group .input-group > .input-password-toggle {
    top: 1px !important;
    right: 1px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
}

#tm-content .riko-profile-fieldset-webauthn button,
#tm-content .riko-profile-multifactor a.btn,
#tm-content .riko-subscription-action-button,
#tm-content .riko-subscription-table-actions .btn,
#tm-content .riko-subscription-icon-link {
    min-height: 44px;
}

#tm-content .riko-profile-multifactor .com-users-methods-list-method-record-info a.text-decoration-underline {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

#tm-content .riko-subscription-detail-page .riko-subscription-table tbody td > a:not(.btn):not(.riko-subscription-icon-link) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

#tm-content .riko-subscription-invoice-key > a {
    max-width: 100%;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    #tm-content .riko-subscription-detail-page .riko-subscription-invoice-key {
        grid-template-columns: 70px minmax(0, 1fr);
    }
}

#tm-content .riko-subscription-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn,
#tm-content .riko-subscription-table-card,
#tm-content .riko-subscription-table-card .table-responsive-lg {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

#tm-content .riko-profile-fieldset-webauthn .plg_system_webauthn,
#tm-content .riko-subscription-table-card .table-responsive-lg {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

#tm-content .riko-subscription-table th,
#tm-content .riko-subscription-table td,
#tm-content .riko-profile-fieldset-webauthn th,
#tm-content .riko-profile-fieldset-webauthn td {
    overflow-wrap: anywhere;
}

@media (min-width: 681px) {
    #tm-content .riko-subscription-detail-page .riko-subscription-table {
        min-width: 700px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tm-content .riko-profile-page *,
    #tm-content .riko-subscription-page * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Member security flow: keep Joomla MFA screens inside the shared member shell. */
#tm-content .riko-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#tm-content .riko-mfa-member {
    width: 100%;
    min-width: 0;
}









#tm-content .riko-mfa-member > .riko-member-nav {
    margin-bottom: 24px;
}

#tm-content .riko-mfa-member .riko-mfa-page {
    width: min(100%, 920px);
    margin-top: 0;
    border-radius: 16px;
}

#tm-content .riko-mfa-privacy-note {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    background: var(--riko-surface-soft);
    color: var(--riko-ink);
}

#tm-content .riko-mfa-privacy-note > span {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: var(--riko-surface-soft);
}

#tm-content .riko-mfa-privacy-note p,
#tm-content .riko-mfa-method-status p {
    margin: 0;
    line-height: 1.5;
}

#tm-content .riko-mfa-field-help {
    margin: 0;
    color: var(--riko-muted);
    font-size: 13px;
    line-height: 1.5;
}

#tm-content .riko-mfa-check {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--riko-ink);
    font-weight: 700;
    cursor: pointer;
}

#tm-content .riko-mfa-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--riko-focus);
}

#tm-content .riko-mfa-setup-data {
    display: grid;
    gap: 12px;
}

#tm-content .riko-mfa-setup-data h2,
#tm-content .riko-mfa-message h2 {
    margin: 0;
    color: var(--riko-ink);
    font-size: 20px;
    line-height: 1.3;
}

#tm-content .riko-mfa-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    overscroll-behavior-inline: contain;
}

#tm-content .riko-mfa-table-scroll table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

#tm-content .riko-mfa-table-scroll th,
#tm-content .riko-mfa-table-scroll td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--riko-line);
    text-align: start;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

#tm-content .riko-mfa-table-scroll tr:last-child th,
#tm-content .riko-mfa-table-scroll tr:last-child td {
    border-bottom: 0;
}

#tm-content .riko-mfa-table-scroll th {
    width: 34%;
    color: var(--riko-link);
    background: var(--riko-action-soft);
    font-weight: 800;
}

#tm-content .riko-mfa-table-scroll img {
    display: block;
    max-width: min(100%, 260px);
    height: auto;
    margin-inline: auto;
}

#tm-content .riko-mfa-custom-fields {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#tm-content .riko-mfa-secondary,
#tm-content .riko-mfa-danger {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--riko-line);
    border-radius: 8px;
    background: var(--riko-surface);
    color: var(--riko-ink) !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

#tm-content .riko-mfa-danger {
    border-color: color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface));
    background: var(--riko-surface);
    color: var(--riko-danger) !important;
}

#tm-content .riko-mfa-danger--compact {
    min-height: 40px;
    padding-inline: 14px;
}

#tm-content .riko-mfa-secondary:hover,
#tm-content .riko-mfa-secondary:focus,
#tm-content .riko-mfa-danger:hover,
#tm-content .riko-mfa-danger:focus {
    border-color: var(--riko-focus);
    background: var(--riko-action-soft-hover);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--riko-brand-deep) 10%, transparent);
}

#tm-content .riko-mfa-primary.is-hidden {
    display: none !important;
}

#tm-content .riko-mfa-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0;
}

#tm-content .riko-mfa-codes code {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--riko-line);
    border-radius: 9px;
    background: var(--riko-surface);
    color: var(--riko-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
}

#tm-content .riko-mfa-method-list {
    display: grid;
    gap: 16px;
    min-width: 0;
}

#tm-content .riko-mfa-method-status {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    background: var(--riko-surface-soft);
    color: var(--riko-ink);
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method {
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--riko-line) !important;
    border-radius: 12px;
    background: var(--riko-surface);
    box-shadow: none;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--riko-line) !important;
    background: var(--riko-surface-soft) !important;
    color: var(--riko-ink) !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-image {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 8px !important;
    border-radius: 10px !important;
    background: var(--riko-surface) !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-image img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-title h2 {
    margin: 0 !important;
    color: var(--riko-ink);
    font-size: 18px !important;
    line-height: 1.35;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-records-container {
    padding: 16px !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-record {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding-block: 12px !important;
    border-color: var(--riko-line) !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-record-lastused {
    gap: 8px 22px !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-record-actions {
    display: flex !important;
    gap: 8px;
    margin: 0 !important;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-record-actions .btn,
#tm-content .riko-mfa-method-list .com-users-methods-list-method-addnew {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: 8px;
}

#tm-content .riko-mfa-method-list .com-users-methods-list-method-addnew-container {
    padding-top: 14px !important;
    border-color: var(--riko-line) !important;
}

#tm-content .riko-mfa-defer {
    padding-top: 4px;
}

#tm-content .riko-mfa-page a:focus-visible,
#tm-content .riko-mfa-page button:focus-visible,
#tm-content .riko-mfa-page input:focus-visible,
#tm-content .riko-mfa-table-scroll:focus-visible {
    outline: 3px solid var(--riko-focus) !important;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    #tm-content .riko-mfa-member > .riko-member-nav {
        margin-bottom: 16px;
    }

    #tm-content .riko-mfa-member .riko-mfa-page {
        border-radius: 16px;
    }

    #tm-content .riko-mfa-table-scroll table,
    #tm-content .riko-mfa-table-scroll tbody,
    #tm-content .riko-mfa-table-scroll tr,
    #tm-content .riko-mfa-table-scroll th,
    #tm-content .riko-mfa-table-scroll td {
        display: block;
        width: 100%;
    }

    #tm-content .riko-mfa-table-scroll th {
        padding-bottom: 8px;
        border-bottom: 0;
    }

    #tm-content .riko-mfa-table-scroll td {
        padding-top: 8px;
    }

    #tm-content .riko-mfa-codes {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-mfa-method-status {
        display: grid;
        grid-template-columns: 1fr;
    }

    #tm-content .riko-mfa-method-list .com-users-methods-list-method-record {
        grid-template-columns: 1fr;
    }

    #tm-content .riko-mfa-method-list .com-users-methods-list-method-record-actions {
        justify-content: flex-start !important;
    }

    #tm-content .riko-mfa-secondary,
    #tm-content .riko-mfa-danger,
    #tm-content .riko-mfa-actions > * {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tm-content .riko-mfa-page *,
    #tm-content .riko-member-nav * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Login: one password form, native alternatives, and account help. */
#tm-content .login.riko-login-page {
    /* The page shell already supplies the gutter; remove the legacy login frame. */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--riko-ink);
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: break-word;
}

body.riko-component-page #tm-content .login.riko-login-page {
    max-width: 1040px;
    margin-inline: auto;
}

#tm-content .riko-login-page * { box-sizing: border-box; }

#tm-content .riko-login-page .riko-login-heading { margin-bottom: 26px; }

#tm-content .riko-login-page .riko-login-heading h1 {
    margin: 0 0 8px;
    color: var(--riko-ink);
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    font-weight: 750;
    line-height: 1.2;
}

#tm-content .riko-login-page .riko-login-heading p {
    margin: 0;
    color: var(--riko-muted);
    font-size: 1rem;
    font-weight: 400;
}

#tm-content .riko-login-page .riko-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr);
    align-items: start;
    gap: 28px;
}

#tm-content .login.riko-login-page .riko-login-layout {
    grid-template-columns: minmax(0, 550px) minmax(260px, 1fr);
}

#tm-content .riko-login-page .riko-login-form-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    background: var(--riko-surface);
}

#tm-content .riko-login-page h2 {
    margin: 0 0 18px;
    color: var(--riko-ink);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
}

#tm-content .riko-login-page .riko-login-form { display: grid; gap: 16px; margin: 0; }
#tm-content .riko-login-page .riko-login-field { display: grid; gap: 6px; min-width: 0; }
#tm-content .riko-login-page .riko-login-field-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
#tm-content .riko-login-page .riko-login-field-heading a { font-size: .875rem; }

#tm-content .riko-login-page .riko-login-field label,
#tm-content .riko-login-page .riko-login-remember {
    margin: 0;
    color: var(--riko-ink);
    font-size: .9375rem;
    font-weight: 600;
}

#tm-content .riko-login-page .riko-login-form input.riko-login-input,
#tm-content .riko-login-page .riko-login-password-control input {
    width: 100%;
    max-width: none;
    min-height: 48px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--riko-line);
    border-radius: 7px;
    background: var(--riko-surface);
    color: var(--riko-link);
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

#tm-content .riko-login-page .riko-login-form input:focus-visible {
    border-color: var(--riko-focus);
    outline: 2px solid var(--riko-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* Joomla inserts and clears feedback inside each label. */
#tm-content .riko-login-page .riko-login-field label .form-control-feedback,
#tm-content .riko-register-page label .form-control-feedback,
#tm-content .riko-recovery-page label .form-control-feedback {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 5px 0 0;
    padding: 0;
    color: var(--riko-action);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}
#tm-content .riko-login-page .riko-login-field input[aria-invalid="true"],
#tm-content .riko-register-page input[aria-invalid="true"],
#tm-content .riko-recovery-page input[aria-invalid="true"] {
    border-color: var(--riko-action) !important;
    background-color: var(--riko-surface) !important;
}
#tm-content .riko-login-page .riko-login-field input[aria-invalid="true"]:focus-visible,
#tm-content .riko-register-page input[aria-invalid="true"]:focus-visible,
#tm-content .riko-recovery-page input[aria-invalid="true"]:focus-visible {
    outline-color: var(--riko-focus) !important;
}
#tm-content .riko-login-page .riko-login-password-control,
#tm-content .riko-login-page .riko-login-password-control .password-group,
#tm-content .riko-login-page .riko-login-password-control .input-group { position: relative; width: 100%; padding: 0; border: 0; background: transparent; }
#tm-content .riko-login-page .riko-login-password-control input { padding-right: 54px; }
#tm-content .riko-login-page .riko-login-password-control .input-group > .input-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 2px 2px auto auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: var(--riko-ink);
    background: transparent;
    box-shadow: none;
    transform: none;
    font-size: 16px;
}
#tm-content .riko-login-page .riko-login-password-control .input-group > .input-password-toggle::before { content: none; }
#tm-content .riko-login-page .riko-login-password-control .input-password-toggle [class*="icon-"] { width: auto; margin: 0; font-size: 16px; line-height: 1; }
#tm-content .riko-login-page .riko-login-password-control .input-password-toggle .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#tm-content .riko-login-page .riko-login-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
#tm-content .riko-login-page .riko-login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--riko-focus); }

#tm-content .riko-login-page .riko-login-form .riko-login-submit,
#tm-content .riko-login-page .riko-login-methods :is(.riko-login-google, .riko-login-secondary-action),
#tm-content .riko-login-page .riko-login-register-card .riko-login-secondary-action {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--riko-line);
    border-radius: 7px;
    background: var(--riko-surface);
    color: var(--riko-link);
    box-shadow: none;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    text-align: center;
    text-shadow: none;
    transform: none;
    white-space: normal;
}
#tm-content .riko-login-page .riko-login-form .riko-login-submit { border-color: var(--riko-action); background: var(--riko-action); color: var(--riko-action-contrast); }
#tm-content .riko-login-page .riko-login-form .riko-login-submit:hover { border-color: var(--riko-action-hover); background: var(--riko-action-hover); }
#tm-content .riko-login-page .riko-login-methods :is(.riko-login-google, .riko-login-secondary-action):hover,
#tm-content .riko-login-page .riko-login-register-card .riko-login-secondary-action:hover { border-color: var(--riko-action-hover); background: var(--riko-action-soft-hover); color: var(--riko-action-hover); }
#tm-content .riko-login-page :is(a, button, input):focus-visible { outline: 2px solid var(--riko-focus); outline-offset: 3px; }
#tm-content .riko-login-page a:not(.riko-login-google):not(.riko-login-secondary-action) { color: var(--riko-link); text-underline-offset: 3px; }
#tm-content .riko-login-page .riko-login-alternatives { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--riko-line); }
#tm-content .riko-login-page .riko-login-alternatives h3 { margin: 0 0 5px; color: var(--riko-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
#tm-content .riko-login-page .riko-login-alternatives p { margin: 0 0 14px; color: var(--riko-muted); font-size: .875rem; font-weight: 400; line-height: 1.5; }
#tm-content .riko-login-page .riko-login-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
#tm-content .riko-login-page .riko-login-extra-method { min-width: 0; }
#tm-content .riko-login-page .riko-login-google .sprites_google { flex: 0 0 22px; width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--riko-surface); border-radius: 3px; }
#tm-content .riko-login-page .riko-login-extra-method :is(svg, img) { width: 20px; height: 20px; flex: 0 0 20px; }
#tm-content .riko-login-page .riko-login-side { min-width: 0; padding: 24px 0; }
#tm-content .riko-login-page .riko-login-side h2 { margin-bottom: 10px; }
#tm-content .riko-login-page .riko-login-side p { max-width: 44ch; margin: 0 0 18px; font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--riko-muted); }
#tm-content .riko-login-page .riko-login-register-card .riko-login-secondary-action { width: auto; }
#tm-content .riko-login-page .riko-login-help-card { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--riko-line); }
#tm-content .riko-login-page .riko-login-help-card:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#tm-content .riko-login-page .riko-login-help-card nav { display: grid; gap: 2px; justify-items: start; }
#tm-content .riko-login-page .riko-login-help-card a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
#tm-content .riko-login-page .riko-login-messages { display: grid; gap: 10px; margin-bottom: 20px; }
#tm-content .riko-login-page .riko-login-message { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--riko-line); border-left: 4px solid var(--riko-brand); border-radius: 6px; background: var(--riko-surface-soft); }
#tm-content .riko-login-page .riko-login-message strong { color: var(--riko-ink); font-size: 1rem; font-weight: 700; }
#tm-content .riko-login-page .riko-login-message span { color: var(--riko-ink); }
#tm-content .riko-login-page :is(.riko-login-message-warning, .riko-login-message-error, .riko-login-message-danger) { border-color: color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface)); border-left-color: var(--riko-warning); background: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface)); }

@media (max-width: 800px) {
    body.riko-component-page #tm-content .login.riko-login-page { max-width: 550px; }
    #tm-content .login.riko-login-page .riko-login-layout { grid-template-columns: minmax(0, 1fr); }
    #tm-content .riko-login-page .riko-login-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    #tm-content .riko-login-page .riko-login-side { padding-top: 20px; padding-bottom: 0; border-top: 1px solid var(--riko-line); }
    #tm-content .riko-login-page .riko-login-help-card { margin-top: 22px; padding-top: 20px; }
}

@media (max-width: 600px) {
    #tm-content .riko-login-page .riko-login-heading { margin-bottom: 22px; }
    #tm-content .riko-login-page .riko-login-form-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
    #tm-content .riko-login-page .riko-login-methods { grid-template-columns: minmax(0, 1fr); }
    #tm-content .riko-login-page .riko-login-register-card .riko-login-secondary-action { width: 100%; }
}

/* Jumbo offer page: distinct website and Hub access, native amounts and explicit renewal.
   This scope deliberately excludes checkout, payments and member account panels. */
#tm-content .riko-jumbo-page--refined { margin: 0; padding: 0; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 24px; scroll-margin-top: 24px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 24px; min-width: 0; min-height: 0; margin: 0; padding: 24px !important; border: 1px solid var(--riko-line); border-left: 3px solid var(--riko-brand); border-radius: 10px; background: var(--riko-surface-soft); box-shadow: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero-copy { min-width: 0; max-width: 820px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero::before,
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero::after { display: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero h1 { margin: 0 0 10px; color: var(--riko-ink) !important; font-size: 34px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.015em; overflow-wrap: anywhere; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero p { margin: 0; color: var(--riko-ink) !important; font-size: 16px !important; line-height: 1.5; font-weight: 400; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero .riko-jumbo-lead { color: var(--riko-ink) !important; font-size: 18px !important; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero .riko-jumbo-account-note { margin-top: 8px; font-size: 14px !important; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero .riko-jumbo-freeware { font-size: 13px !important; color: var(--riko-muted) !important; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-actions { display: grid; gap: 10px; margin: 0; min-width: 0; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-primary { display: inline-flex; width: auto; min-height: 44px; padding: 10px 15px; justify-content: center; align-items: center; border: 1px solid var(--riko-action); border-radius: 6px; color: var(--riko-action-contrast) !important; background: var(--riko-action) !important; font-size: 14px; line-height: 1.4; font-weight: 650; text-transform: none; box-shadow: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-primary:hover { background: var(--riko-action-hover) !important; border-color: var(--riko-action-hover); transform: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-account-link { display: inline-flex; flex: 0 0 auto; min-height: 44px; align-items: center; padding: 10px 0; color: var(--riko-ink); font-size: 14px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits { min-width: 0; margin: 0; padding: 24px !important; border: 1px solid var(--riko-line); border-radius: 10px; background: var(--riko-surface); box-shadow: none; scroll-margin-top: 24px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits h2 { margin: 6px 0 0; color: var(--riko-ink); font-size: 20px; line-height: 1.35; font-weight: 700; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits p { margin: 8px 0 0; color: var(--riko-muted); font-size: 14px; line-height: 1.55; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits .riko-jumbo-hub-channel { margin: 0; color: var(--riko-ink); font-size: 13px; font-weight: 650; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hub-access { margin: 0; padding: 0; border: 0; }
#tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) table { width: 100%; margin: 16px 0; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.45; }
#tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) :is(th, td) { padding: 12px 9px; border-bottom: 1px solid var(--riko-line); color: var(--riko-ink); overflow-wrap: normal; word-break: normal; hyphens: none; }
#tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) thead th { color: var(--riko-muted); background: var(--riko-surface-soft); font-size: 12px; font-weight: 600; }
#tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) tbody th { font-weight: 600; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hub-current :is(th, td) { color: var(--riko-ink); background: var(--riko-surface-soft); font-weight: 650; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits .riko-jumbo-hub-included { color: var(--riko-ink); font-size: 14px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-benefits .riko-jumbo-hub-note { margin-top: 10px; font-size: 12px; line-height: 1.5; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic { min-width: 0; margin: 0; padding: 24px !important; border: 1px solid var(--riko-line); border-radius: 10px; background: var(--riko-surface); }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic > div { min-width: 0; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic h2 { margin: 6px 0 0; color: var(--riko-ink); font-size: 20px; line-height: 1.35; font-weight: 700; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic p { margin: 0; color: var(--riko-muted); font-size: 14px; line-height: 1.55; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic .riko-jumbo-classic-channel { color: var(--riko-ink); font-size: 13px; font-weight: 650; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-classic .riko-jumbo-classic-note { margin-top: 10px; font-size: 12px; line-height: 1.5; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-section { margin: 28px 0 0; padding: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-margin-top: 24px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 16px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-head h2 { margin: 0; font-size: 25px !important; line-height: 1.3; font-weight: 700 !important; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-head p { margin: 6px 0 0; color: var(--riko-muted); font-size: 15px; line-height: 1.55; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--riko-line); border-radius: 8px; background: var(--riko-surface-soft); }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew > strong { font-size: 14px; line-height: 1.5; font-weight: 600; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options { display: flex; flex-wrap: wrap; gap: 6px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--riko-line); border-radius: 5px; background: var(--riko-surface); color: var(--riko-ink); font-size: 13px; line-height: 1.4; font-weight: 500; text-align: center; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options a[aria-current="page"] { color: var(--riko-action-contrast); background: var(--riko-action-hover); border-color: var(--riko-action-hover); font-weight: 650; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-renew p { flex-basis: 100%; margin: 0; color: var(--riko-muted); font-size: 13px; line-height: 1.5; }
#tm-content .riko-jumbo-page--refined .pp-plans { gap: 18px; }
#tm-content .riko-jumbo-page--refined .pp-plan-card { border: 1px solid var(--riko-line); border-radius: 8px; box-shadow: none; }
#tm-content .riko-jumbo-page--refined .pp-plan-card.is-highlight { border-color: var(--riko-brand); box-shadow: none; }
#tm-content .riko-jumbo-page--refined .pp-plan-card.is-highlight::before { display: none; }
#tm-content .riko-jumbo-page--refined :is(.pp-plan-card__hd, .pp-plan-card__bd, .pp-plan-card__ft) { padding: 22px !important; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__hd { padding-bottom: 12px !important; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__title { margin: 0; color: var(--riko-ink); font-size: 22px; line-height: 1.3; font-weight: 650; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__price { margin-top: 14px; color: var(--riko-ink); font-weight: 700; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__price .pp-amount { font-size: 38px; line-height: 1.1; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__price .pp-currency { font-size: 20px; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__period { margin-top: 8px; color: var(--riko-muted); font-size: 14px; line-height: 1.5; font-weight: 400; text-transform: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-renewal { margin: 8px 0 0; color: var(--riko-ink); font-size: 13px; line-height: 1.5; font-weight: 500; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__bd { flex: 1; padding-top: 0 !important; padding-bottom: 0 !important; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-details > summary { min-height: 44px; padding: 11px 0; color: var(--riko-muted); font-size: 13px; line-height: 22px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-plan-details :is(.pp-plan-card__desc, .pp-plan-card__features) { min-height: 0; margin: 0 0 12px; color: var(--riko-muted); font-size: 14px; font-weight: 400; line-height: 1.55; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__ft { margin-top: auto; padding-top: 16px !important; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__forms .btn { display: flex; min-height: 44px; height: auto; justify-content: center; align-items: center; padding: 11px 14px; border-radius: 6px; font-size: 14px; line-height: 1.4; font-weight: 650; white-space: normal; box-shadow: none; }
#tm-content .riko-jumbo-page--refined .pp-plan-card__forms [data-subscribe-disabled] { opacity: 1; color: var(--riko-muted) !important; background: var(--riko-surface-soft) !important; border-color: var(--riko-line) !important; cursor: not-allowed; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-activation { margin: 14px 0 0; color: var(--riko-muted); font-size: 13px; line-height: 1.5; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 22px 0 0 !important; border: 0; border-top: 1px solid var(--riko-line); border-radius: 0; background: transparent; box-shadow: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-support > div { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-support h2 { margin: 0; color: var(--riko-ink); font-size: 17px; line-height: 1.4; font-weight: 650; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-support p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-support a { display: inline-flex; min-height: 44px; align-items: center; margin: 4px 0 0; color: var(--riko-link); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#tm-content .riko-jumbo-page--refined :is(a, button, summary):focus-visible { outline: 3px solid var(--riko-focus) !important; outline-offset: 3px; }
#tm-content .riko-jumbo-page--refined .riko-jumbo-hero :is(a, button):focus-visible { outline-color: var(--riko-focus) !important; }
#tm-content .riko-jumbo-gallery--refined { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#tm-content .riko-jumbo-gallery--refined img { width: 100%; border-radius: 6px; }
@media (max-width: 900px) {
    #tm-content .riko-jumbo-page--refined .riko-jumbo-overview { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-actions { justify-items: start; }
}
@media (max-width: 600px) {
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hero { padding: 20px !important; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hero h1 { font-size: 30px !important; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-actions { justify-items: stretch; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-overview { margin-top: 18px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-benefits { padding: 16px !important; }
    #tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) :is(th, td) { padding: 10px 6px; font-size: 13px; }
    #tm-content .riko-jumbo-page--refined :is(.riko-jumbo-hub-access, .riko-jumbo-classic-access) thead th { font-size: 12px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-classic { padding: 16px !important; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-plan-section { margin-top: 22px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-plan-head h2 { font-size: 23px !important; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-renew { gap: 8px; padding: 12px; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options { width: 100%; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options a { flex: 1 1 100%; }
    #tm-content .riko-jumbo-page--refined :is(.pp-plan-card__hd, .pp-plan-card__bd, .pp-plan-card__ft) { padding-inline: 18px !important; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-support { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; padding-top: 20px !important; }
    #tm-content .riko-jumbo-gallery--refined { gap: 8px; margin-top: 18px; }
}
@media (forced-colors: active) {
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hero { background: Canvas; border-color: CanvasText; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hero :is(h1, p, .riko-jumbo-lead, .riko-jumbo-account-note, .riko-jumbo-freeware) { color: CanvasText !important; }
    #tm-content .riko-jumbo-page--refined :is(.riko-jumbo-primary, .riko-jumbo-primary:hover) { color: ButtonText !important; background: ButtonFace !important; border-color: ButtonText; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-renew-options a[aria-current="page"] { color: HighlightText; background: Highlight; border-color: Highlight; }
    #tm-content .riko-jumbo-page--refined .riko-jumbo-hub-current :is(th, td) { color: CanvasText; background: Canvas; border-block: 2px solid Highlight; }
}