/* ==========================================================================
   Sign-in and account security pages.
   sa-*  The studio (staff): a dark brand panel with a picture beside the form. Uses the app.css tokens.
   rl-*  The reader (families): bunting, a bubbly title and a cartoon scene. Bright and playful, in Malay.
   acct-*, pw-*, setup-*  Account settings: side menu, cards, change password and authenticator setup.
   ao-*  The result of a link opened from an email, such as confirm email change.
   ========================================================================== */

/* Full-bleed sign-in pages drop the centred auth column from MainLayout. */
.auth-shell:has(.sa-split, .rl-page) { padding: 0; background: none; align-items: stretch; }
.auth-shell:has(.sa-split, .rl-page) > .auth-brand,
.auth-shell:has(.sa-split, .rl-page) > .auth-footer { display: none; }
.auth-main:has(.sa-split, .rl-page) { max-width: none; }

/* ---------- Studio ---------- */
.sa-split { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sa-aside {
    flex: 1 1 32rem; min-width: 0;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
    padding: 3rem 3.5rem; background: var(--brand-900); color: #ece9ff;
}
/* On wide screens the panel grows well past its content, so keep the brand, pitch and picture in a centred column. */
.sa-aside > * { width: 100%; max-width: 32.5rem; margin-inline: auto; }
.sa-brand { display: flex; align-items: center; gap: .75rem; color: #fff; font-size: 1.15rem; font-weight: 750; text-decoration: none; }
.sa-brand:hover { color: #fff; }
.sa-eyebrow { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffb39f; }
.sa-headline { margin: 0 0 1rem; max-width: 32rem; color: #fff; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.12; font-weight: 750; letter-spacing: -.02em; }
.sa-lead { margin: 0; max-width: 32rem; color: #c9c4f2; font-size: 1.05rem; line-height: 1.6; }
.sa-picture { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.sa-legal { margin-block: 0; color: #a7a1d9; font-size: .8rem; }

.sa-form-side { flex: 1 1 28rem; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--surface-muted); }
.sa-form { width: 100%; max-width: 25rem; }
.sa-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.sa-title { margin: 0 0 .35rem; font-size: 1.85rem; font-weight: 700; letter-spacing: -.015em; }
.sa-subtitle { margin: 0; color: var(--ink-500); }
.sa-input { height: 3rem; }
.sa-mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.sa-btn { min-height: 3.1rem; }
.sa-divider { display: flex; align-items: center; gap: .75rem; color: var(--ink-500); font-size: .85rem; }
.sa-divider::before, .sa-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sa-note { display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: .65rem; background: var(--brand-100); color: var(--brand-700); font-size: .82rem; line-height: 1.5; }
.sa-note .icon { margin-top: .15rem; }
.sa-links { color: var(--ink-500); font-size: .9rem; text-align: center; }
.sa-links p { margin: 0 0 .4rem; }
.sa-links a { font-weight: 600; }
.sa-links-left { padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
.sa-icon-tile { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--brand-100); color: var(--brand-600); }
.sa-otp {
    height: 3.5rem; padding-left: .5em; text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 650; letter-spacing: .5em;
}

/* On a phone the brand panel becomes a slim header so the form is on screen straight away. */
@media (max-width: 767.98px) {
    .sa-split { flex-direction: column; flex-wrap: nowrap; }
    .sa-aside { flex: none; gap: .75rem; padding: 1.25rem 1.25rem 1.5rem; }
    .sa-eyebrow, .sa-lead, .sa-picture, .sa-legal { display: none; }
    .sa-headline { margin: 0; font-size: 1.35rem; }
    .sa-form-side { flex: 1 0 auto; align-items: flex-start; padding: 1.75rem 1.25rem 2.5rem; }
}

/* ---------- Reader ---------- */
.rl-page { min-height: 100vh; background: #fff6e5; color: #1f2430; font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif; font-size: 1.05rem; }
.rl-page a { color: #6d28d9; font-weight: 800; text-decoration: none; }
.rl-page a:hover { color: #4c1d95; text-decoration: underline; }
.rl-bunting { display: block; width: 100%; height: 4.5rem; }
.rl-body { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem 2rem; }
.rl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; }

.rl-scene { position: relative; flex: 1 1 34rem; min-width: 0; min-height: 40rem; }
.rl-hero { position: relative; z-index: 1; width: min(19rem, 100%); padding: .5rem 0 0 .5rem; }
.rl-title { margin: 0; }
.rl-title svg { display: block; width: 100%; overflow: visible; }
.rl-title-shadow, .rl-title-face { font-family: "Nunito", "Trebuchet MS", sans-serif; font-size: 88px; font-weight: 900; stroke: #4c1d95; stroke-width: 12px; stroke-linejoin: round; }
.rl-title-shadow { fill: #4c1d95; }
.rl-title-face { paint-order: stroke; }
.rl-tagline { max-width: 17rem; margin: .75rem 0 0; color: #4c1d95; font-size: 1.15rem; font-weight: 800; line-height: 1.45; }
.rl-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.rl-card { flex: 0 1 27rem; min-width: 0; padding: 2.5rem 2.25rem; border: 3px solid #f3e8ff; border-radius: 2rem; background: #fff; box-shadow: 0 24px 60px -24px rgba(124, 58, 237, .35); }
.rl-form { display: flex; flex-direction: column; gap: 1.1rem; }
.rl-form-title { margin: 0; color: #4c1d95; font-family: "Nunito", "Trebuchet MS", sans-serif; font-size: 2.1rem; font-weight: 900; letter-spacing: -.01em; }
.rl-form-lead { margin: .2rem 0 0; color: #545b6b; }
.rl-field { display: flex; flex-direction: column; gap: .4rem; }
.rl-field label { font-weight: 800; }
.rl-input { height: 3.5rem; padding: 0 1.1rem; border: 2px solid #e9d5ff; border-radius: 1.1rem; background: #faf5ff; color: #1f2430; font: inherit; }
.rl-input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 5px rgba(168, 85, 247, .22); }
.rl-page .rl-forgot { align-self: flex-end; font-size: .95rem; }
.rl-check { display: flex; align-items: center; gap: .7rem; font-weight: 600; cursor: pointer; }
.rl-check input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: #7c3aed; }
.rl-btn-primary, .rl-btn-secondary { border-radius: 999px; font: inherit; cursor: pointer; }
.rl-btn-primary {
    min-height: 3.75rem; border: 0; background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%); color: #fff;
    font-size: 1.3rem; font-weight: 900; letter-spacing: .02em;
    box-shadow: 0 6px 0 #5b21b6, 0 14px 24px -10px rgba(124, 58, 237, .6);
    transition: transform .08s ease, box-shadow .08s ease;
}
.rl-btn-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 #5b21b6; }
.rl-btn-secondary { min-height: 3.4rem; margin-top: .25rem; border: 2px solid #e9d5ff; background: #fff; color: #4c1d95; font-weight: 800; }
.rl-btn-secondary:hover { background: #faf5ff; }
.rl-btn-primary:focus-visible, .rl-btn-secondary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.rl-btn-link { display: grid; place-items: center; text-decoration: none; }
.rl-page a.rl-btn-link, .rl-page a.rl-btn-link:hover { color: #fff; text-decoration: none; }
.rl-foot { margin: 0; color: #545b6b; font-size: .95rem; text-align: center; }

@media (max-width: 767.98px) {
    .rl-bunting { height: 3rem; }
    .rl-body { padding: 0 1rem 1.5rem; }
    .rl-row { gap: .5rem; }
    .rl-scene { flex-basis: 100%; min-height: 0; }
    .rl-hero { width: 15rem; }
    .rl-tagline { display: none; }
    .rl-art { position: static; display: block; height: 15rem; }
    .rl-card { flex-basis: 100%; padding: 1.75rem 1.25rem; border-radius: 1.5rem; }
    .rl-form-title { font-size: 1.7rem; }
}

/* ---------- Account settings ---------- */
.acct-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.acct-nav { flex: 1 1 13.5rem; max-width: 16.5rem; display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.acct-nav ul { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.acct-nav-label { display: block; padding: 0 .75rem .35rem; color: var(--ink-500); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.acct-nav-link { display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: .6rem; color: var(--ink-700); font-size: .9rem; font-weight: 600; text-decoration: none; }
.acct-nav-link:hover { background: var(--brand-50); color: var(--ink-900); }
.acct-nav-link.active { background: var(--brand-100); color: var(--brand-700); }
.acct-nav-link > span:not(.badge-pill) { flex: 1; }
.acct-main { flex: 999 1 34rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 720px) { .acct-nav { max-width: none; } }

.acct-card { padding: 1.75rem; }
.acct-card > .panel-subtitle { margin-bottom: 1.25rem; }
.acct-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.25rem; }
.acct-row > .acct-card { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; }
.acct-push { margin-top: auto; }
.acct-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.acct-form .acct-actions { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.acct-grow { flex: 1 1 16rem; min-width: 0; }
.acct-hint { margin: .35rem 0 0; color: var(--ink-500); font-size: .78rem; }
.acct-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem; }

.acct-ico { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; background: var(--brand-100); color: var(--brand-600); }
.acct-ico.lg { width: 3rem; height: 3rem; border-radius: .9rem; }
.acct-ico.ok { background: var(--ok-100); color: var(--ok-600); }
.acct-ico.warn { background: var(--warn-100); color: var(--warn-600); }
.acct-ico.info { background: var(--info-100); color: var(--info-600); }
.acct-ico.danger { background: var(--danger-100); color: var(--danger-600); }

.acct-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--brand-900); color: #ece9ff; }
.acct-avatar { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: 1.4rem; font-weight: 700; }
.acct-hero-who { flex: 1 1 14rem; min-width: 0; }
.acct-hero-name { color: #fff; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.acct-hero-meta { margin-top: .15rem; color: #b9b2f0; font-size: .875rem; overflow-wrap: anywhere; }
.acct-hero dl { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0; }
.acct-hero dt { color: #b9b2f0; font-size: .75rem; font-weight: 500; }
.acct-hero dd { margin: .1rem 0 0; color: #fff; font-weight: 600; }

.acct-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acct-list li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.acct-list li:last-child { border-bottom: 0; }
.acct-list-text { flex: 1; min-width: 0; }
.acct-list-title { font-size: .9rem; font-weight: 600; }
.acct-list-sub { color: var(--ink-500); font-size: .78rem; }
.acct-list a { font-size: .82rem; font-weight: 600; }

.acct-status { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.5rem 1.75rem; }
.acct-status-text { flex: 1 1 18rem; min-width: 0; }
.acct-status-text h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.acct-status-text p { margin: .25rem 0 0; color: var(--ink-500); font-size: .9rem; }
.badge-pill.lg { padding: .3rem .8rem; font-size: .8rem; }

.acct-method { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-muted); }
.acct-method + .acct-method { margin-top: .75rem; }
.acct-method-text { flex: 1 1 14rem; min-width: 0; }
.acct-method-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 700; }
.acct-method-sub { margin-top: .15rem; color: var(--ink-500); font-size: .82rem; }

.acct-count { display: flex; align-items: baseline; gap: .4rem; }
.acct-count strong { font-size: 2rem; line-height: 1.1; }
.acct-count span { color: var(--ink-500); font-size: .9rem; }
.acct-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem; margin: .6rem 0 1.25rem; }
.acct-meter span { height: .4rem; border-radius: 1rem; background: var(--line); }
.acct-meter span.on { background: var(--ok-600); }
.acct-meter.low span.on { background: var(--danger-600); }
.acct-meter.mid span.on { background: #d98a00; }
.acct-tile { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding: .85rem; border-radius: .75rem; background: var(--surface-muted); }

.acct-danger { border-color: #f3c2bf; }
.acct-danger .panel-title { color: var(--danger-600); }
.acct-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; }
.acct-banner > div { flex: 1 1 18rem; min-width: 0; }
.acct-banner p { margin: .25rem 0 0; color: var(--ink-500); font-size: .9rem; }
.btn-outline-danger { --bs-btn-color: var(--danger-600); --bs-btn-border-color: var(--danger-600); --bs-btn-hover-bg: var(--danger-600); --bs-btn-hover-border-color: var(--danger-600); }

.acct-split { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.acct-split > div { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; }
.acct-checks { padding: 1rem 1.25rem; border-radius: .75rem; background: var(--surface-muted); }
.acct-checks h3 { margin: 0 0 .25rem; color: var(--ink-500); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.acct-checks ul { margin: 0; padding: 0; list-style: none; }
.acct-checks li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-700); font-size: .875rem; }
.acct-checks li:last-child { border-bottom: 0; }
.acct-checks .icon { flex: none; color: var(--ok-600); }
.acct-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.acct-confirm > div { flex: 1 1 15rem; max-width: 22rem; }
.acct-note { display: flex; gap: .6rem; margin: 1rem 0 0; padding: .75rem .9rem; border-radius: .65rem; background: var(--warn-100); color: #7a4300; font-size: .85rem; line-height: 1.5; }
.acct-note .icon { flex: none; margin-top: .15rem; }
.acct-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.acct-codes code { display: block; padding: .6rem .75rem; border-radius: .6rem; background: var(--brand-50); color: var(--brand-700); font-size: .95rem; letter-spacing: .06em; text-align: center; }

.acct-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.acct-panel { flex: 999 1 26rem; min-width: 0; padding: 1.75rem; }
.acct-summary { flex: 1 1 16rem; min-width: 0; }
.acct-summary dl { margin: 0 0 1rem; }
.acct-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.acct-summary dt { font-weight: 500; color: var(--ink-700); }
.acct-summary dd { margin: 0; color: var(--ink-500); }
.acct-summary a { font-size: .9rem; font-weight: 600; }
.acct-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 30rem; }
.badge-pill { padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-pill.ok { background: var(--ok-100); color: #0f6e4b; }
.badge-pill.warn { background: var(--warn-100); color: var(--warn-600); }

.pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-top: .6rem; }
.pw-meter span { height: .35rem; border-radius: 1rem; background: var(--line); transition: background-color .15s; }
.pw-meter[data-strength="1"] span:nth-child(-n+1) { background: var(--danger-600); }
.pw-meter[data-strength="2"] span:nth-child(-n+2) { background: #d98a00; }
.pw-meter[data-strength="3"] span:nth-child(-n+3) { background: var(--ok-600); }
.pw-meter[data-strength="4"] span { background: var(--ok-600); }
.pw-label { min-height: 1.2em; margin: .35rem 0 0; font-size: .82rem; font-weight: 600; }
.pw-label[data-strength="1"] { color: var(--danger-600); }
.pw-label[data-strength="2"] { color: var(--warn-600); }
.pw-label[data-strength="3"], .pw-label[data-strength="4"] { color: var(--ok-600); }
.pw-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .4rem 1rem; margin: 0; padding: .85rem 1rem; border-radius: .75rem; background: var(--surface-muted); color: var(--ink-500); font-size: .85rem; list-style: none; }
.pw-rules li::before { content: ""; display: inline-block; width: .85rem; height: .85rem; margin-right: .5rem; border: 2px solid var(--ink-300); border-radius: 50%; vertical-align: -.1em; }
.pw-rules li.met { color: var(--ink-700); }
.pw-rules li.met::before { border-color: var(--ok-600); background: var(--ok-600); box-shadow: inset 0 0 0 2px #fff; }

.setup-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.setup-steps li { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: .75rem; background: var(--surface-muted); color: var(--ink-500); font-size: .9rem; font-weight: 600; }
.setup-steps li.done { background: var(--ok-100); color: #0f6e4b; }
.setup-steps li[aria-current] { background: var(--brand-100); color: var(--brand-700); }
.setup-num { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--ink-300); border-radius: 50%; background: #fff; font-size: .8rem; font-weight: 700; }
.setup-steps li.done .setup-num { border-color: var(--ok-600); background: var(--ok-600); color: #fff; }
.setup-steps li[aria-current] .setup-num { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.setup-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; }
.setup-qr { flex: none; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.setup-qr img { display: block; }
.setup-detail { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.setup-heading { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; }
.setup-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.setup-key kbd { flex: 1 1 14rem; padding: .7rem .9rem; border-radius: .6rem; background: var(--brand-50); color: var(--brand-700); font-size: 1rem; letter-spacing: .06em; box-shadow: none; }
.setup-verify { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.setup-verify-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.setup-verify-row .form-control { flex: 1 1 12rem; width: auto; }

/* ---------- Email link results (confirm account, confirm email change) ---------- */
.ao-wrap { width: 100%; max-width: 30rem; margin: 0 auto; }
.app-content .ao-wrap { padding-top: clamp(0rem, 6vh, 3rem); }
.ao-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: var(--shadow); text-align: center; }
.ao-hero {
    display: flex; justify-content: center; padding: 1.75rem 1rem .75rem;
    background: radial-gradient(90% 120% at 50% 0%, #3a2c8f 0%, var(--brand-900) 70%);
}
.ao-hero svg { display: block; max-width: 100%; height: auto; }
.ao-body { padding: 1.75rem 1.5rem 2rem; }
.ao-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ao-ok .ao-eyebrow { color: var(--ok-600); }
.ao-error .ao-eyebrow { color: var(--danger-600); }
.ao-title { margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 750; letter-spacing: -.015em; }
.ao-message { margin: 0 auto; max-width: 24rem; color: var(--ink-500); line-height: 1.6; }
.ao-chip {
    display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; margin-top: 1.1rem; padding: .45rem .9rem;
    border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); font-weight: 600; font-size: .9rem;
}
.ao-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.6rem; }
.ao-actions .btn { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 650; }
.ao-footnote { margin: 1rem 0 0; color: var(--ink-500); font-size: .85rem; text-align: center; }
@media (min-width: 576px) { .ao-body { padding: 2rem 2.5rem 2.5rem; } }