/* Approved embossed public surfaces. No header/footer, checkout, receipt,
   dashboard or global brand-variable overrides. All assets stay original. */
html[data-ak-embossed] body[data-page] {
    --emb-surface: #f3f3f3;
    --emb-card: #fdfdfd;
    --emb-ink: #102b50;
    --emb-muted: #50637d;
    --emb-raised: 5px 6px 16px rgba(100,100,100,.13), -4px -4px 12px rgba(255,255,255,.8);
    --emb-inset: inset 3px 3px 7px #e0e0e0, inset -3px -3px 7px #ffffff;
    --emb-field-inset: inset 2px 2px 5px #e3e3e3, inset -2px -2px 5px #ffffff;
    --emb-button-shadow: 0 2px 0 rgba(80,80,80,.14), 3px 4px 9px rgba(100,100,100,.18), -2px -2px 7px rgba(255,255,255,.8), inset 0 1px 0 rgba(255,255,255,.5);
    background: var(--emb-surface) !important;
}
html[data-ak-embossed] body[data-page]::before,
html[data-ak-embossed] body[data-page]::after {
    content: none !important;
}
html[data-ak-embossed] body[data-page="auth"] main.auth-page::before,
html[data-ak-embossed] body[data-page="auth"] main.auth-page::after { content: none !important; }
html[data-ak-embossed] body[data-page] > .ak-water-bg { display: none !important; }
html[data-ak-embossed] body[data-page] > main {
    background: var(--emb-surface) !important;
    color: var(--emb-ink);
}

/* Hero illustrations and service icons are intentionally not replaced. */
html[data-ak-embossed] body[data-page] :is(.ak-public-home-hero, main > .service-hero) {
    background: linear-gradient(130deg, #fdfdfd, #f3f3f3) !important;
    border-color: rgba(255,255,255,.7) !important;
    box-shadow: 0 8px 20px rgba(100,100,100,.1), inset 0 1px 0 #fff !important;
}
html[data-ak-embossed] body[data-page] :is(.ak-public-home-hero, main > .service-hero)::before,
html[data-ak-embossed] body[data-page] :is(.ak-public-home-hero, main > .service-hero)::after {
    content: none !important;
}
html[data-ak-embossed] body[data-page] main :is(.form-card, .info-card, .plan-panel, .auth-card),
html[data-ak-embossed] body[data-page="home"] :is(.service-card, .rating-card, .trust-grid > article),
html[data-ak-embossed] body[data-page="auth"] main :is(.auth-stat-grid > article, .auth-benefits article) {
    background: var(--emb-card) !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 24px !important;
    box-shadow: var(--emb-raised) !important;
    backdrop-filter: none !important;
}
html[data-ak-embossed] body[data-page] main :is(.form-card, .info-card, .auth-card)::before,
html[data-ak-embossed] body[data-page="home"] .service-card::before {
    content: none !important;
}
html[data-ak-embossed] body[data-page] main :is(.form-card, .info-card) {
    padding: clamp(20px, 2.1vw, 30px) !important;
}
html[data-ak-embossed] body[data-page] main .service-form {
    gap: 26px;
    padding-top: 30px;
    padding-bottom: 40px;
}
html[data-ak-embossed] body[data-page] main .support-column { min-width: 0; }
html[data-ak-embossed] body[data-page] main :is(.form-card, .info-card, .auth-card) :is(h2, h3) {
    color: var(--emb-ink);
}
html[data-ak-embossed] body[data-page] main :is(.form-note, .input-note, .mobile-secure-note) {
    color: var(--emb-muted);
    line-height: 1.5;
}
html[data-ak-embossed] body[data-page] main :is(.support-highlights > article, .mobile-recharge-summary, .mobile-console-type, .auth-switch) {
    background: var(--emb-surface) !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    box-shadow: var(--emb-inset) !important;
    border-radius: 15px;
}

/* Home: the same eight services, with quiet, raised tactile tiles. */
html[data-ak-embossed] body[data-page="home"] :is(.services-overview, .rating-section, .trust) {
    background: transparent !important;
}
html[data-ak-embossed] body[data-page="home"] .service-grid { gap: 24px; }
html[data-ak-embossed] body[data-page="home"] .service-card {
    padding: 26px 20px;
    transition: transform .18s ease, box-shadow .18s ease;
}
html[data-ak-embossed] body[data-page="home"] .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 7px 7px 20px #e0e0e0, -6px -6px 18px #fff !important;
}
html[data-ak-embossed] body[data-page="home"] .service-card .icon {
    background: var(--emb-surface) !important;
    box-shadow: var(--emb-inset) !important;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
}
html[data-ak-embossed] body[data-page="home"] .service-card h3 { color: var(--emb-ink); }
html[data-ak-embossed] body[data-page="home"] .service-card p { color: var(--emb-muted); }
html[data-ak-embossed] body[data-page="home"] .ak-home-hero-cta {
    border-radius: 14px !important;
    background: linear-gradient(145deg, #1674c2, #0d5faa) !important;
    color: #fff !important;
    box-shadow: var(--emb-button-shadow) !important;
}

/* Only form actions, not payment dialogs or receipt actions. */
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) .btn:not(.payment-handshake .btn),
html[data-ak-embossed] body[data-page="mobile"] main .plan-action-block .btn {
    min-height: 46px;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600;
    box-shadow: var(--emb-button-shadow) !important;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) .btn.primary:not(.payment-handshake .btn),
html[data-ak-embossed] body[data-page="mobile"] main .plan-action-block .btn.primary {
    background: linear-gradient(145deg, #1674c2, #0d5faa) !important;
    border: 1px solid #387cba !important;
    color: #fff !important;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) .btn.ghost:not(.payment-handshake .btn) {
    background: linear-gradient(145deg, #ffffff, #eeeeee) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    color: #174c83 !important;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) .btn:disabled {
    opacity: .55 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) .btn:focus-visible,
html[data-ak-embossed] body[data-page="home"] :is(.service-card, .ak-home-hero-cta):focus-visible {
    outline: 3px solid #087ace !important;
    outline-offset: 4px;
}

/* Border-floating captions: empty fields start inside; on focus/value the
   caption cuts a small notch in the upper border, leaving a slim 48px field.
   Native :placeholder-shown responds even when
   plan selection / bill fetch / autofill updates .value without an event.
   Old browsers without :has keep the caption safely raised all the time. */
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float {
    position: relative;
    display: block;
    min-width: 0;
    margin-top: 8px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
    overflow: visible;
}
html[data-ak-embossed] body[data-page] main label.ak-float::before,
html[data-ak-embossed] body[data-page] main label.ak-float::after { content: none !important; }
html[data-ak-embossed] body[data-page] main label.ak-float .ak-float-label {
    position: absolute;
    z-index: 2;
    top: -8px;
    left: 12px;
    right: auto;
    width: max-content;
    max-width: calc(100% - 52px);
    box-sizing: border-box;
    margin: 0;
    padding: 0 4px;
    background: var(--emb-surface);
    border-radius: 4px;
    color: #325575;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float .ak-float-control {
    box-sizing: border-box;
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 12px !important;
    background: var(--emb-surface) !important;
    color: var(--emb-ink) !important;
    box-shadow: var(--emb-field-inset) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 500;
    text-indent: 0 !important;
    opacity: 1;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float select.ak-float-control {
    padding-right: 38px !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23165083' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float textarea.ak-float-control {
    height: auto !important;
    min-height: 92px !important;
    resize: vertical;
}
html[data-ak-embossed] body[data-page] main label.ak-float .password-input-wrap { display: block; }
html[data-ak-embossed] body[data-page] main label.ak-float .password-input-wrap .ak-float-control {
    padding-right: 52px !important;
}
html[data-ak-embossed] body[data-page] main label.ak-float .password-toggle { top: 24px; }
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float .ak-float-control::placeholder {
    color: #566b83;
    opacity: 1;
    font-size: 13px;
}
@supports selector(label:has(input)) {
    html[data-ak-embossed] body[data-page] main label.ak-float:not(.ak-float--raised):not(:focus-within):has(.ak-float-control:placeholder-shown) .ak-float-label {
        top: 16px;
        background: transparent;
        font-size: 14px;
        color: var(--emb-muted);
    }
    html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float:not(:focus-within) .ak-float-control::placeholder {
        opacity: 0;
    }
}
html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float .ak-float-control:focus {
    border-color: #098bd3 !important;
    box-shadow: var(--emb-field-inset), 0 0 0 2px rgba(4,171,231,.14), 0 0 10px rgba(4,153,230,.09) !important;
}
html[data-ak-embossed] body[data-page] main label.ak-float:focus-within .ak-float-label { color: #0762a6; }
html[data-ak-embossed] body[data-page] main label.ak-float .ak-float-control:disabled {
    color: #66788e !important;
    cursor: not-allowed;
}
html[data-ak-embossed] body[data-page] main label.ak-float .input-note { display: block; margin-top: 6px; }
html[data-ak-embossed] body[data-page] main .amount-row { align-items: start; }
html[data-ak-embossed] body[data-page] main .amount-row > .btn { min-height: 48px !important; margin-top: 8px; }

/* Mobile recharge keeps the narrow form / wide plans split and scrollable
   original categories. No overrides of hidden/active component states. */
html[data-ak-embossed] body[data-page="mobile"] main .plan-result-row {
    background: var(--emb-card) !important;
    border: 1px solid rgba(255,255,255,.95) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 10px #e0e0e0, -4px -4px 10px #fff !important;
    margin-bottom: 14px;
}
html[data-ak-embossed] body[data-page="mobile"] main .plan-tab:not(.active) {
    background: var(--emb-surface) !important;
    color: #244b73 !important;
    box-shadow: 3px 3px 7px #dedede, -3px -3px 7px #fff;
}
html[data-ak-embossed] body[data-page="mobile"] main .plan-tab.active {
    background: #0c64bf !important;
    color: #fff !important;
    box-shadow: inset 2px 2px 5px rgba(1,41,94,.25);
}
html[data-ak-embossed] body[data-page="mobile"] main .plan-tabs-shell::before,
html[data-ak-embossed] body[data-page="mobile"] main .plan-tabs-shell::after { background: none; }
html[data-ak-embossed] body[data-page="mobile"] main .mobile-console-type input:not(:checked) + span {
    background: transparent !important;
}
html[data-ak-embossed] body[data-page="mobile"] main .mobile-console-type input:checked + span {
    background: linear-gradient(135deg, #157cda, #0956ad) !important;
    color: #fff !important;
}
html[data-ak-embossed] body[data-page="mobile"] main .plan-panel-body { padding: 12px; }

/* Account panel retains login/signup/OTP states, links and security controls. */
html[data-ak-embossed] body[data-page="auth"] main.auth-page {
    padding-top: 40px;
    padding-bottom: 48px;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-main {
    width: min(1120px, 100%);
    margin-inline: auto;
    gap: clamp(28px, 5vw, 72px);
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-card { padding: clamp(24px, 3vw, 36px); }
html[data-ak-embossed] body[data-page="auth"] main .auth-card:focus-within {
    border-color: #59b9eb !important;
    box-shadow: var(--emb-raised), 0 0 0 1px rgba(25,163,231,.14) !important;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-form { gap: 18px; }
html[data-ak-embossed] body[data-page="auth"] main.auth-page .auth-forms .auth-card .auth-form .btn.primary {
    background: linear-gradient(145deg, #1674c2, #0d5faa) !important;
    border: 1px solid #387cba !important;
    box-shadow: var(--emb-button-shadow) !important;
}
html[data-ak-embossed] body[data-page="auth"] main.auth-page .auth-forms .auth-switch {
    background: var(--emb-surface) !important;
    box-shadow: var(--emb-inset) !important;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-form .phone-composite :is(input, select) {
    background-color: var(--emb-surface) !important;
    box-shadow: var(--emb-inset) !important;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-hero-copy h1 {
    color: var(--emb-ink);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}
html[data-ak-embossed] body[data-page="auth"] main .auth-hero-copy > p:not(.badge) {
    color: var(--emb-muted);
    line-height: 1.65;
}

@media (min-width: 1061px) {
    html[data-ak-embossed] body[data-page="mobile"] main .service-form {
        grid-template-columns: minmax(330px, 380px) minmax(0, 1fr) !important;
        gap: 26px;
    }
}
@media (max-width: 820px) {
    html[data-ak-embossed] body[data-page] main .service-form { gap: 24px; }
    html[data-ak-embossed] body[data-page] main :is(.form-card, .info-card, .auth-card) {
        border-radius: 20px !important;
        box-shadow: 4px 4px 13px #e0e0e0, -4px -4px 13px #fff !important;
        padding: 20px !important;
    }
    html[data-ak-embossed] body[data-page="home"] .service-grid { gap: 16px; }
    html[data-ak-embossed] body[data-page="home"] .service-card { padding: 20px 14px; }
    html[data-ak-embossed] body[data-page="auth"] main.auth-page { padding-top: 24px; }
}
@media (max-width: 480px) {
    html[data-ak-embossed] body[data-page] main :is(.form-card, .auth-card) { padding: 18px !important; }
    html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float .ak-float-control { font-size: 16px !important; }
    html[data-ak-embossed] body[data-page] main :is(.recharge-form, .auth-form) label.ak-float select.ak-float-control { font-size: 14px !important; }
    html[data-ak-embossed] body[data-page] main .amount-row { gap: 10px; }
    html[data-ak-embossed] body[data-page] main .amount-row > .btn { padding-inline: 12px !important; font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ak-embossed] body[data-page] main label.ak-float *,
    html[data-ak-embossed] body[data-page="home"] .service-card { transition: none !important; }
}
 
/* AK EMBOSSED BUTTON EFFECTS START
   Approved expansion: selectable cards, checkout actions and OTP/PIN shadows.
   Effects only; colour, borders, dimensions, QR geometry and JS stay unchanged.
   Scrims, disabled/busy controls and original focus outlines are preserved. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button, .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:focus-visible) {
    box-shadow: 5px 5px 11px rgba(95,95,95,.24),
        -4px -4px 10px rgba(255,255,255,.9),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.09) !important;
    transition: box-shadow .18s ease, translate .18s ease, scale .12s ease;
}
@media (hover: hover) and (pointer: fine) {
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button, .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:focus-visible):hover {
    box-shadow: 6px 7px 15px rgba(95,95,95,.26),
        -5px -5px 12px rgba(255,255,255,.95),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(0,0,0,.1) !important;
    translate: 0 -1px;
}
}
/* Selected cards remain recessed; their existing colour/tick/outline remains. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button, .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):is(.utility-card, .plan-tab, .auth-switch-btn, .plan-result-row):is(.selected, .active, .is-active, [aria-pressed="true"], [aria-selected="true"]):not(:focus-visible) {
    box-shadow: inset 3px 3px 7px rgba(60,60,60,.24),
        inset -2px -2px 6px rgba(255,255,255,.35),
        1px 1px 3px rgba(95,95,95,.1) !important;
    translate: 0 0;
}
/* Also works when a keyboard-focused button is pressed; outline is untouched. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button, .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):active {
    box-shadow: inset 3px 3px 7px rgba(60,60,60,.24),
        inset -2px -2px 6px rgba(255,255,255,.35),
        1px 1px 3px rgba(95,95,95,.1) !important;
    translate: 0 1px;
    scale: .98;
}
/* Static checkout information gets depth, not a false clickable/press state.
   Never scale/translate a QR, PIN grid, dialog or payment-status container. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(#checkout-channel-modal, .checkout-modal, .checkout-shell, #rdTopupOverlay, .wallet-load-modal) :is(
    .checkout-channel-summary, .checkout-channel-wallet, .checkout-refined-wallet-balance,
    .checkout-premium-qr-surface, .rd-topup-panel, .rd-topup-preview
) {
    box-shadow: 4px 4px 11px rgba(95,95,95,.14),
        -3px -3px 9px rgba(255,255,255,.8),
        inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* Shadows only: retain every digit's width, masking, inputmode and focus flow. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(
    input[data-otp-box], input[data-pin-box], input[data-wallet-pin-digit],
    .checkout-wallet-pin-boxes input, .go-pin-boxes input, .rd-pin-boxes input,
    input[data-mobile-otp], input#profileWalletPinCurrent, input#profileWalletPinOtp,
    input#profileWalletPinNew, input#profileWalletPinConfirm
):not([type="hidden"]):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(:where(.is-processing *, [aria-busy="true"] *)):not(:focus) {
    box-shadow: inset 2px 2px 5px rgba(60,60,60,.17),
        inset -2px -2px 5px rgba(255,255,255,.75),
        0 1px 0 rgba(255,255,255,.8) !important;
}
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(
    input[data-otp-box], input[data-pin-box], input[data-wallet-pin-digit],
    .checkout-wallet-pin-boxes input, .go-pin-boxes input, .rd-pin-boxes input,
    input[data-mobile-otp], input#profileWalletPinCurrent, input#profileWalletPinOtp,
    input#profileWalletPinNew, input#profileWalletPinConfirm
):not([type="hidden"]):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(:where(.is-processing *, [aria-busy="true"] *)):focus {
    box-shadow: inset 3px 3px 6px rgba(60,60,60,.2),
        inset -2px -2px 5px rgba(255,255,255,.75),
        0 0 0 2px rgba(95,95,95,.15) !important;
}
@media (prefers-reduced-motion: reduce) {
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button, .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing) {
    transition: none !important;
    translate: none !important;
    scale: none !important;
}
}
/* AK EMBOSSED BUTTON EFFECTS END */

/* AK READABLE TYPOGRAPHY START
   A lighter hierarchy, not smaller type. No layout, visibility or colour changes
   to actions/statuses/dark branded surfaces. Icon fonts and previews excluded. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(p, small, li, td, dt, dd, span):not(:where(
    h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, strong *, b *, button *, .btn *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *
)) { font-weight: 400 !important; }
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    label, legend, summary, button, .btn, .btn span,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea
):not(:where(.edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) { font-weight: 500 !important; }
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    h1, h2, h3, h4, h5, h6, strong, b, th,
    h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
    .admin-card-title, .bank-kpi-copy strong
):not(:where(.edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) { font-weight: 600 !important; }
/* Navigation/header weights only: all original colours remain intact. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(
    .admin-sidebar .admin-nav-label, .admin-sidebar .admin-nav-section,
    .user-dashboard-sidebar__nav a, .ak-shell-page-heading strong, .user-name
) { font-weight: 500 !important; }
/* Dark charcoal only on ordinary text over the light workspace/cards. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    h1, h2, h3, h4, h5, h6, p, label, legend, .admin-card-title
):not(:where(button, button *, .btn, .btn *, a, a *, thead *, tfoot *,
    header.site-header *, .site-footer *, .footer, .footer *,
    .bank-hero, .bank-hero *, .wallet-hero, .wallet-hero *,
    .wallet-banner, .wallet-banner *, .wallet-primary-card, .wallet-primary-card *,
    .hero-highlight-card, .hero-highlight-card *, .collection-primary-card, .collection-primary-card *,
    .checkout-modal *, .checkout-shell *, .payment-handshake *, .ak-wallet-pay-card *,
    .walletTableFooter *, .walletSummary *, .table-summary *, .pagination-bar *,
    .table-pagination *, .walletPagination *, .walletFooter *, .servicesHistoryFooter *,
    .coupon-table-footer *, .tableFooter *, .pager *,
    [data-tone], [data-tone] *, [role="status"], [role="status"] *, [role="alert"], [role="alert"] *,
    [class*="status"], [class*="status"] *, [class*="Status"], [class*="Status"] *,
    .badge, .badge *, .pill, .pill *, [class*="success"], [class*="success"] *,
    [class*="error"], [class*="error"] *, [class*="danger"], [class*="danger"] *,
    [class*="warning"], [class*="warning"] *, [class*="pending"], [class*="pending"] *,
    .selected, .selected *, .active, .active *, .is-active, .is-active *,
    [aria-selected="true"], [aria-selected="true"] *, [aria-pressed="true"], [aria-pressed="true"] *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) {
    color: #202a35 !important;
    -webkit-text-fill-color: currentColor !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    small, dt, .muted, .help-text, .form-note, .input-note, .workspace-subtext
):not(:where(button, button *, .btn, .btn *, a, a *, thead *, tfoot *,
    header.site-header *, .site-footer *, .footer, .footer *,
    .bank-hero, .bank-hero *, .wallet-hero, .wallet-hero *,
    .wallet-banner, .wallet-banner *, .wallet-primary-card, .wallet-primary-card *,
    .hero-highlight-card, .hero-highlight-card *, .collection-primary-card, .collection-primary-card *,
    .checkout-modal *, .checkout-shell *, .payment-handshake *, .ak-wallet-pay-card *,
    .walletTableFooter *, .walletSummary *, .table-summary *, .pagination-bar *,
    .table-pagination *, .walletPagination *, .walletFooter *, .servicesHistoryFooter *,
    .coupon-table-footer *, .tableFooter *, .pager *,
    [data-tone], [data-tone] *, [role="status"], [role="status"] *, [role="alert"], [role="alert"] *,
    [class*="status"], [class*="status"] *, [class*="Status"], [class*="Status"] *,
    .badge, .badge *, .pill, .pill *, [class*="success"], [class*="success"] *,
    [class*="error"], [class*="error"] *, [class*="danger"], [class*="danger"] *,
    [class*="warning"], [class*="warning"] *, [class*="pending"], [class*="pending"] *,
    .selected, .selected *, .active, .active *, .is-active, .is-active *,
    [aria-selected="true"], [aria-selected="true"] *, [aria-pressed="true"], [aria-pressed="true"] *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) {
    color: #46515f !important;
    -webkit-text-fill-color: currentColor !important;
}
/* AK READABLE TYPOGRAPHY END */

/* AK CHROME EFFECTS START
   Effects only. Keep brand colours, geometry, fixed-header stacking and menu behaviour.
   Do not transform header/footer controls or replace existing keyboard focus rings. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) header#site-header {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16), inset 0 -1px 0 rgba(255, 255, 255, .12) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) header#site-header .header-secondary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 4px rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .10) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) footer.site-footer .ak-footer {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 -7px 24px rgba(0, 0, 0, .12) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) footer.site-footer :is(.ak-footer-bank__support, .ak-footer-bank__trust) {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px -1px 0 rgba(0, 0, 0, .12), 0 5px 14px rgba(0, 0, 0, .16) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 2px 5px rgba(0, 0, 0, .16) !important;
    transition: box-shadow 150ms ease !important;
}
@media (hover: hover) and (pointer: fine) {
    html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 4px 9px rgba(0, 0, 0, .22) !important;
    }
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible):is(:active, .active, .is-active, [aria-current="page"], [aria-pressed="true"], [aria-expanded="true"]) {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .24), inset -1px -1px 2px rgba(255, 255, 255, .16) !important;
}
@media (prefers-reduced-motion: reduce) {
    html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible) {
        transition: none !important;
    }
}
/* AK CHROME EFFECTS END */