/* ==========================================================================
   RemitZap marketing site
   Source: design_handoff_remitzap_portal/Marketing Landing.dc.html

   Depends on remitzap-theme.css for the palette and shared scale. The
   marketing frames invert the portal's surfaces — page is white and the
   "alt" grey is used for banded sections — so `.rz-site` re-points a few
   tokens rather than redefining the palette.

   Scoped under `.rz-site` so none of this leaks into the portal.
   ========================================================================== */

.rz-site {
    --rz-alt: #F4F6F9;
    --rz-t2: #5B6472;
    background: var(--rz-panel);
    color: var(--rz-text);
    font-family: var(--rz-font-body);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .rz-site,
.rz-site[data-theme="dark"] {
    --rz-alt: #0F131A;
    --rz-t2: #98A2B3;
}

.rz-site *,
.rz-site *::before,
.rz-site *::after {
    box-sizing: border-box;
}

/* Scope lives in :where() and the tag stays bare, giving (0,0,1): a tie with
   the vendor's `a { color }` which we win on load order, but a clean loss to
   ANY single-class rule — including .rz-btn--primary over in
   remitzap-theme.css, which loads earlier and would otherwise be overridden,
   rendering every anchor-styled button's label black on the accent fill. */
:where(.rz-site) a {
    color: inherit;
}

.rz-site a {
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

/* The vendor style.css sets explicit colours on h1–h4 and p, so we must
   restate colour here (not just font) or headings render dark-on-dark in
   Nocturne. Same (0,0,1) shape as the anchor reset above: only the scope
   sits in :where(), so these tie the vendor's bare `h2 { color }` (won on
   load order) while losing to every `.rz-*` component rule. Do not raise the
   specificity here. */
:where(.rz-site) h1,
:where(.rz-site) h2,
:where(.rz-site) h3,
:where(.rz-site) h4 {
    font-family: var(--rz-font-display);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--rz-text);
}

:where(.rz-site) p {
    color: var(--rz-t2);
}

.rz-site :focus-visible {
    outline: 2px solid var(--rz-acc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Shared horizontal rhythm: the design frame is 1240px with 40px gutters. */
.rz-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.rz-site-nav {
    border-bottom: 1px solid var(--rz-hair);
    background: var(--rz-panel);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.rz-site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.rz-site-nav__logo img {
    height: 72px;
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.rz-site-nav__menu {
    display: flex;
    gap: 30px;
    font-size: 15px;
    font-weight: 500;
    color: var(--rz-t2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rz-site-nav__menu a:hover,
.rz-site-nav__menu a.is-active {
    color: var(--rz-acc);
}

.rz-site-nav__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.rz-site-nav__toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--rz-border);
    background: var(--rz-panel);
    color: var(--rz-t2);
    font-size: 20px;
    cursor: pointer;
}

/* The mobile-only menu row is hidden until the nav collapses. */
.rz-site-nav__mobile-only {
    display: none;
}

@media (max-width: 991px) {
    .rz-site-nav__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--rz-panel);
        border-bottom: 1px solid var(--rz-hair);
        box-shadow: var(--rz-shadow);
        padding: 8px 20px 16px;
        max-height: calc(100vh - var(--rz-header-h, 74px));
        overflow-y: auto;
    }

    .rz-site-nav__menu.is-open {
        display: flex;
    }

    /* Full-width rows with a 48px tap target and hairline separators, rather
       than the desktop row of inline links crammed into a column. */
    .rz-site-nav__menu > li + li {
        border-top: 1px solid var(--rz-hair);
    }

    /* :not(.rz-btn) matters — this selector scores (0,1,2) and would otherwise
       out-rank .rz-btn--primary, painting the Get started label dark on the
       accent fill. */
    .rz-site-nav__menu > li > a:not(.rz-btn) {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 4px 2px;
        font-size: 16px;
        color: var(--rz-text);
    }

    .rz-site-nav__menu > li > a:not(.rz-btn).is-active {
        color: var(--rz-acc);
        font-weight: 600;
    }

    .rz-site-nav__mobile-only {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-top: 14px;
        margin-top: 6px;
    }

    .rz-site-nav__mobile-only .rz-btn {
        flex: 1;
        justify-content: center;
    }

    .rz-site-nav__desktop-only {
        display: none !important;
    }

    .rz-site-nav__toggle {
        display: inline-grid;
        place-items: center;
    }

    .rz-site-nav__logo img {
        height: 52px;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Full-bleed band; `.rz-hero__inner` holds the 1240px grid so the gradient
   reaches the viewport edges on wide screens. */
.rz-hero {
    background: linear-gradient(180deg, var(--rz-panel), var(--rz-alt));
    padding-top: 64px;
    padding-bottom: 64px;
}

.rz-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 44px;
    align-items: center;
}

.rz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-acc);
    background: var(--rz-tint);
    padding: 7px 14px;
    border-radius: var(--rz-r-pill);
}

.rz-hero__title {
    font-weight: 800;
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 20px 0 0;
}

.rz-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--rz-t2);
    margin: 20px 0 30px;
    max-width: 480px;
}

.rz-hero__cta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.rz-hero__stats {
    display: flex;
    gap: 28px;
    margin-top: 36px;
}

.rz-hero__stat-num {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 24px;
}

.rz-hero__stat-label {
    font-size: 13px;
    color: var(--rz-muted);
}

/* Larger button variants used on the marketing pages only. */
.rz-btn--lg {
    font-size: 16px;
    padding: 15px 28px;
}

.rz-btn--block {
    width: 100%;
}

.rz-btn--onacc {
    background: #fff;
    color: var(--rz-acc);
    font-weight: 700;
}

@media (max-width: 991px) {
    .rz-hero__inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .rz-hero {
        padding-top: 44px;
    }

    .rz-hero__title {
        font-size: 38px;
    }
}

/* --------------------------------------------------------------------------
   Hero converter
   -------------------------------------------------------------------------- */

.rz-conv {
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-radius: 20px;
    padding: 26px;
    box-shadow: var(--rz-shadow);
}

.rz-conv__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.rz-conv__title {
    font-family: var(--rz-font-display);
    font-weight: 700;
    font-size: 17px;
}

/* Amount field: label + large numeric input on the left, currency on the right */
.rz-conv__field {
    border: 1px solid var(--rz-border);
    background: var(--rz-fill);
    border-radius: 14px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rz-conv__field--out {
    border-color: var(--rz-acc);
    background: var(--rz-tint);
}

.rz-conv__field-label {
    font-size: 12px;
    color: var(--rz-t2);
    display: block;
}

.rz-conv__amount {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 26px;
    border: 0;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
    color: var(--rz-text);
    letter-spacing: -0.02em;
}

.rz-conv__field--out .rz-conv__amount {
    color: var(--rz-acc);
}

/* Exchange divider with the centred swap badge */
.rz-conv__swap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.rz-conv__swap-line {
    flex: 1;
    height: 1px;
    background: var(--rz-hair);
}

.rz-conv__rate {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rz-acc);
    white-space: nowrap;
}

.rz-conv__swap-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rz-acc);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
}

.rz-conv__swap-badge i {
    transform: rotate(90deg);
}

/* Delivery speed cards */
.rz-speed {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.rz-speed__opt {
    border: 1px solid var(--rz-border);
    border-radius: 12px;
    padding: 11px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.rz-speed__opt:hover {
    border-color: var(--rz-acc);
}

.rz-speed__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rz-speed__top i {
    color: var(--rz-muted);
    font-size: 16px;
}

.rz-speed__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--rz-border);
}

.rz-speed__name {
    font-weight: 700;
    font-size: 13px;
    margin-top: 6px;
}

.rz-speed__meta {
    font-size: 11px;
    color: var(--rz-t2);
}

/* Visually hidden but still focusable/checkable. Needs an explicit 1px box:
   a bare `position:absolute` input resolves to the containing block's width
   and pushed the document wider than the viewport. */
.rz-speed__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.rz-speed__radio:checked + .rz-speed__opt {
    border: 1.5px solid var(--rz-acc);
    background: var(--rz-tint);
}

.rz-speed__radio:checked + .rz-speed__opt .rz-speed__top i {
    color: var(--rz-acc);
}

.rz-speed__radio:checked + .rz-speed__opt .rz-speed__dot {
    border: 4px solid var(--rz-acc);
    background: var(--rz-panel);
}

.rz-speed__radio:focus-visible + .rz-speed__opt {
    outline: 2px solid var(--rz-acc);
    outline-offset: 2px;
}

/* Rate / fee summary rows */
.rz-conv__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--rz-t2);
}

.rz-conv__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rz-conv__row b {
    font-weight: 600;
    color: var(--rz-text);
}

/* Currency picker button — wraps the legacy .ad-select dropdown */
.rz-cur {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r-pill);
    padding: 7px 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.rz-cur img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.rz-cur i {
    font-size: 12px;
    color: var(--rz-muted);
}

/* --------------------------------------------------------------------------
   Auth (login / register) — split screen
   -------------------------------------------------------------------------- */

/* Sized by content, not the viewport: min-height:100vh made the short login
   form float in the middle of a very tall panel. The artboards are 760px
   (login) and 900px (register) tall. */
.rz-auth {
    display: flex;
    align-items: stretch;
    min-height: 620px;
}

/* Brand panel: gradient, logo top, value props pinned to the bottom. */
.rz-auth__brand {
    width: 46%;
    flex-shrink: 0;
    background: linear-gradient(150deg, var(--rz-acc), #0A3EA8);
    color: #fff;
    padding: 44px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: 22px 0 0 22px;
}

/* Decorative bloom shapes from the design. */
.rz-auth__brand::before,
.rz-auth__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.rz-auth__brand::before {
    right: -80px;
    top: -60px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, .08);
}

.rz-auth__brand::after {
    right: 40px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .06);
}

.rz-auth__logo {
    height: 82px;
    align-self: flex-start;
    position: relative;
    /* The wordmark's "Zap" is accent blue and disappears on this gradient. */
    filter: brightness(0) invert(1);
}

.rz-auth__pitch {
    margin-top: auto;
    position: relative;
}

.rz-auth__pitch-title {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.rz-site .rz-auth__pitch-lead {
    font-size: 15px;
    line-height: 1.6;
    opacity: .88;
    margin: 16px 0 28px;
    max-width: 380px;
    color: #fff;
}

.rz-auth__props {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rz-auth__prop {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
}

.rz-auth__prop span {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* Form panel */
.rz-auth__panel {
    flex: 1;
    min-width: 0;
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-left: 0;
    border-radius: 0 22px 22px 0;
}

/* Auth inputs use the tighter 12px radius from the artboard; the select2
   control (still in place — only its dropdown is appended to body) has to
   follow, and style.css marks the radius !important. */
.rz-auth .select2-container--default .select2-selection--single {
    border-radius: var(--rz-r-ctrl) !important;
}

/* Register is a tall form: top-align it and let the panel scroll rather than
   vertically centring a column that overflows. */
.rz-auth__panel--top {
    justify-content: flex-start;
    overflow-y: auto;
}

/* Sign in / Create account switch — real links between the two pages
   rather than JS tabs, so each keeps its own URL and server-side errors. */
.rz-auth__tabs {
    display: flex;
    background: var(--rz-fill);
    border-radius: var(--rz-r-pill);
    padding: 5px;
    margin-bottom: 28px;
    width: fit-content;
}

.rz-site .rz-auth__tabs a {
    padding: 9px 24px;
    border-radius: var(--rz-r-pill);
    color: var(--rz-t2);
    font-weight: 500;
    font-size: 14px;
}

.rz-site .rz-auth__tabs a.is-active {
    background: var(--rz-acc);
    color: #fff;
    font-weight: 600;
}

.rz-auth__title {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -0.02em;
}

.rz-site .rz-auth__sub {
    font-size: 14.5px;
    color: var(--rz-t2);
    margin: 6px 0 26px;
}

.rz-auth__field {
    margin-bottom: 18px;
}

/* Paired field rows from the register artboard. Without these the eleven
   fields stack and the panel runs roughly twice the design's height. */
.rz-auth__row {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.rz-auth__row--2 {
    grid-template-columns: 1fr 1fr;
}

.rz-auth__row--3 {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 575px) {
    .rz-auth__row--2,
    .rz-auth__row--3 {
        grid-template-columns: 1fr;
    }
}

.rz-auth__field .rz-input,
.rz-auth__field .rz-select {
    border-radius: var(--rz-r-ctrl);
}

/* Password field with the show/hide affordance. .rz-auth__pw wraps the input
   ONLY — when it also contained the label, top:50% centred against both and
   the icon sat low. */
.rz-auth__pw {
    position: relative;
    display: block;
}

.rz-auth__pw .rz-input {
    padding-right: 48px;
}

.rz-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--rz-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}

.rz-pw-toggle:hover {
    color: var(--rz-text);
}

.rz-auth__forgot {
    text-align: right;
    margin-bottom: 20px;
}

.rz-site .rz-auth__forgot a {
    font-size: 13px;
    font-weight: 600;
    color: var(--rz-acc);
}

.rz-site .rz-auth__alt {
    text-align: center;
    font-size: 13.5px;
    color: var(--rz-t2);
    margin-top: 24px;
}

.rz-site .rz-auth__alt a {
    color: var(--rz-acc);
    font-weight: 600;
}


@media (max-width: 991px) {
    .rz-auth {
        flex-direction: column;
        min-height: 0;
    }

    /* The gradient panel is decorative on a phone; the form is the task. */
    .rz-auth__brand {
        width: 100%;
        border-radius: 22px 22px 0 0;
        padding: 32px;
    }

    .rz-auth__logo {
        height: 60px;
    }

    .rz-auth__pitch-title {
        font-size: 27px;
        margin-top: 26px;
    }

    .rz-auth__props {
        display: none;
    }

    .rz-auth__panel {
        padding: 32px 24px;
        border-radius: 0 0 22px 22px;
        border-left: 1px solid var(--rz-border);
        border-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Coverage pills
   -------------------------------------------------------------------------- */

.rz-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.rz-pills__item {
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r-pill);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
}

.rz-pills__item--acc {
    background: var(--rz-acc);
    border-color: var(--rz-acc);
    color: #fff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.rz-quote {
    max-width: 720px;
    margin: 0 auto;
}

.rz-quote__stars {
    color: var(--rz-acc);
    font-size: 22px;
    margin-bottom: 14px;
}

.rz-quote__text {
    font-family: var(--rz-font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
    color: var(--rz-text);
}

.rz-quote__by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rz-quote__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D6EFD, #6D4AFF);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.rz-quote__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rz-quote__name {
    font-weight: 600;
    font-size: 14.5px;
}

.rz-quote__meta {
    font-size: 13px;
    color: var(--rz-muted);
}

/* --------------------------------------------------------------------------
   App download
   -------------------------------------------------------------------------- */

.rz-app {
    background: var(--rz-alt);
    border: 1px solid var(--rz-border);
    border-radius: 22px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    overflow: hidden;
}

.rz-app__title {
    font-weight: 800;
    font-size: 34px;
    margin: 18px 0 12px;
}

.rz-app__lead {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--rz-t2);
    margin: 0 0 26px;
    max-width: 420px;
}

.rz-store {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.rz-store__btn {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #0B0D12;
    color: #fff;
    padding: 12px 20px;
    border-radius: 14px;
}

.rz-store__btn:hover {
    color: #fff;
    opacity: .9;
}

.rz-store__btn i {
    font-size: 28px;
}

.rz-store__small {
    font-size: 10.5px;
    opacity: .8;
}

.rz-store__name {
    font-family: var(--rz-font-display);
    font-weight: 700;
    font-size: 17px;
}

.rz-app__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--rz-t2);
    flex-wrap: wrap;
}

.rz-app__meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rz-app__shot {
    display: flex;
    justify-content: center;
}

.rz-app__shot img {
    max-width: 340px;
    width: 100%;
    border-radius: 40px;
    display: block;
}

/* --- Phone mockup -------------------------------------------------------
   The handoff ships no screenshot for this slot — the prototype builds the
   device in markup, so it is rebuilt here rather than uploaded as an asset.
   It scales down with a transform on small screens so the 340x724 device
   never dictates the layout width. */

/* Fluid rather than scaled: a transform leaves the layout box at its
   original size, so the device overflowed its container on narrow screens
   and had to be dragged back with negative margins. Width now shrinks with
   the column and height follows the content. */
.rz-phone {
    width: min(340px, 100%);
    background: #0B0D12;
    border-radius: 50px;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(11, 13, 18, .28);
    position: relative;
}

.rz-phone__screen {
    width: 100%;
    min-height: 640px;
    background: var(--rz-panel);
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.rz-phone__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--rz-text);
}

.rz-phone__notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 20px;
    background: #0B0D12;
    border-radius: var(--rz-r-pill);
}

.rz-phone__status i {
    color: var(--rz-t2);
}

.rz-phone__body {
    flex: 1;
    overflow: hidden;
    padding: 8px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.rz-phone__user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rz-phone__avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--rz-tint);
    color: var(--rz-acc);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
}

.rz-phone__hello {
    font-size: 10px;
    color: var(--rz-muted);
    font-weight: 600;
}

.rz-phone__name {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 15px;
}

.rz-phone__bell {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--rz-border);
    display: grid;
    place-items: center;
    color: var(--rz-muted);
}

.rz-phone__card {
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r);
    padding: 14px;
    box-shadow: var(--rz-shadow);
}

.rz-phone__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rz-phone__cap {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--rz-muted);
    letter-spacing: .05em;
}

.rz-phone__cur {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--rz-fill);
    border-radius: var(--rz-r-pill);
    padding: 5px 9px;
    font-weight: 700;
    font-size: 12px;
}

.rz-phone__amt {
    font-family: var(--rz-font-display);
    font-weight: 800;
    font-size: 30px;
    margin-top: 4px;
}

.rz-phone__amt--out {
    font-size: 26px;
    color: var(--rz-acc);
}

.rz-phone__sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.rz-phone__sep span.line {
    flex: 1;
    height: 1px;
    background: var(--rz-hair);
}

.rz-phone__rate {
    font-size: 11px;
    font-weight: 700;
    color: var(--rz-acc);
    white-space: nowrap;
}

.rz-phone__swap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rz-acc);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.rz-phone__swap i {
    transform: rotate(90deg);
}

.rz-phone__speeds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.rz-phone__speed {
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r-ctrl);
    padding: 11px;
}

.rz-phone__speed--on {
    border: 1.5px solid var(--rz-acc);
}

.rz-phone__speed-name {
    font-weight: 700;
    font-size: 12.5px;
    margin-top: 8px;
}

.rz-phone__speed-meta {
    font-size: 9px;
    color: var(--rz-muted);
}

.rz-phone__speed-rate {
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

.rz-phone__dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--rz-border);
}

.rz-phone__dot--on {
    border: 4px solid var(--rz-acc);
    background: var(--rz-panel);
}

.rz-phone__coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rz-success-bg);
    border: 1px solid var(--rz-success);
    border-radius: var(--rz-r-ctrl);
    padding: 10px;
}

.rz-phone__coupon-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--rz-success);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
}

.rz-phone__fees {
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r-ctrl);
    padding: 12px;
    font-size: 11px;
}

.rz-phone__send {
    width: 100%;
    background: var(--rz-acc);
    color: #fff;
    border: none;
    font-family: var(--rz-font-display);
    font-weight: 700;
    font-size: 14px;
    padding: 12px;
    border-radius: var(--rz-r-pill);
}

.rz-phone__tabs {
    border-top: 1px solid var(--rz-hair);
    background: var(--rz-card);
    padding: 11px 44px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: var(--rz-muted);
}

.rz-phone__tabs i:first-child {
    color: var(--rz-acc);
}

/* The device frame is decorative; below the tablet breakpoint its inner
   padding tightens so the screen content keeps breathing room. */
@media (max-width: 575px) {
    .rz-phone {
        border-radius: 38px;
        padding: 8px;
    }

    .rz-phone__screen {
        border-radius: 30px;
        min-height: 560px;
    }

    .rz-phone__body {
        padding: 8px 10px 0;
        gap: 9px;
    }

    .rz-phone__tabs {
        padding: 10px 30px 12px;
    }

    /* At ~244px of screen the default sizes wrapped mid-figure ("1 CAD =
       62.00 / INR"), which reads as broken rather than compact. */
    .rz-phone__card,
    .rz-phone__speed,
    .rz-phone__fees {
        padding: 10px;
    }

    .rz-phone__amt {
        font-size: 25px;
    }

    .rz-phone__amt--out {
        font-size: 22px;
    }

    .rz-phone__rate {
        font-size: 10px;
    }

    .rz-phone__speed-rate {
        font-size: 8.5px;
        white-space: nowrap;
    }

    .rz-phone__speed-meta {
        font-size: 8.5px;
    }

    .rz-phone__fees {
        font-size: 10px;
    }

    .rz-phone__fees span {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .rz-app {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .rz-app__title {
        font-size: 27px;
    }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.rz-cta {
    background: linear-gradient(140deg, var(--rz-acc), #0A3EA8);
    border-radius: 22px;
    padding: 52px;
    text-align: center;
    color: #fff;
}

.rz-cta__title {
    font-weight: 800;
    font-size: 34px;
    margin: 0 0 12px;
    color: #fff;
}

.rz-cta__lead {
    font-size: 16px;
    opacity: .9;
    margin: 0 0 26px;
    color: #fff;
}

@media (max-width: 575px) {
    .rz-cta {
        padding: 34px 22px;
    }

    .rz-cta__title {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.rz-site-footer {
    border-top: 1px solid var(--rz-hair);
    padding-top: 44px;
    padding-bottom: 44px;
}

.rz-site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.rz-site-footer__logo img {
    height: 46px;
    display: block;
}

.rz-site-footer__mid {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    color: var(--rz-t2);
    flex-wrap: wrap;
}

.rz-site-footer__mid a:hover {
    color: var(--rz-acc);
}

.rz-social {
    display: flex;
    gap: 12px;
}

.rz-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--rz-border);
    display: grid;
    place-items: center;
    color: var(--rz-t2);
    font-size: 16px;
}

.rz-social a:hover {
    border-color: var(--rz-acc);
    color: var(--rz-acc);
}

.rz-site-footer__legal {
    font-size: 13px;
    color: var(--rz-muted);
}

/* Newsletter — kept from the previous site (live `subscribe` route and
   admin-managed copy); the redesign has no slot for it, so it sits as a
   compact row above the footer bar. */
.rz-subscribe {
    display: flex;
    gap: 10px;
    max-width: 380px;
    width: 100%;
}

.rz-subscribe input {
    flex: 1;
    min-width: 0;
    background: var(--rz-fill);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r-pill);
    padding: 11px 18px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rz-text);
}

.rz-subscribe input::placeholder {
    color: var(--rz-muted);
}

/* --------------------------------------------------------------------------
   Contact + long-form CMS pages
   --------------------------------------------------------------------------
   No handoff artboard for these; they reuse the system's page hero, cards
   and form controls so they sit consistently beside the designed pages. */

.rz-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.rz-contact-card {
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-radius: 18px;
    padding: 26px;
    display: flex;
    gap: 14px;
}

.rz-contact-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--rz-tint);
    color: var(--rz-acc);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rz-contact-card__title {
    font-family: var(--rz-font-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}

.rz-site .rz-contact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rz-t2);
    margin: 0;
}

.rz-form-card {
    background: var(--rz-panel);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-r);
    padding: 28px;
    box-shadow: var(--rz-shadow);
}

.rz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rz-form-grid--full {
    grid-template-columns: 1fr;
}

/* Long-form CMS content (privacy policy, terms, and similar). The body is
   admin-authored HTML, so style by element rather than by class. */
.rz-prose {
    max-width: 780px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--rz-t2);
}

.rz-prose :where(h1, h2, h3, h4) {
    color: var(--rz-text);
    margin: 32px 0 12px;
    line-height: 1.3;
}

.rz-prose :where(h1) { font-size: 30px; }
.rz-prose :where(h2) { font-size: 24px; }
.rz-prose :where(h3) { font-size: 19px; }

.rz-prose :where(p, ul, ol) {
    margin: 0 0 16px;
}

.rz-prose :where(ul, ol) {
    padding-left: 22px;
}

.rz-prose :where(li) {
    margin-bottom: 8px;
}

.rz-prose :where(a) {
    color: var(--rz-acc);
    font-weight: 500;
}

.rz-prose :where(strong, b) {
    color: var(--rz-text);
}

.rz-prose :where(img) {
    max-width: 100%;
    height: auto;
    border-radius: var(--rz-r);
}

.rz-prose :where(table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.rz-prose :where(th, td) {
    border: 1px solid var(--rz-border);
    padding: 10px 12px;
    text-align: left;
}

@media (max-width: 991px) {
    .rz-contact-cards {
        grid-template-columns: 1fr;
    }

    .rz-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Slim legal line used in place of the marketing footer on auth screens. */
.rz-bare-footer {
    padding-top: 20px;
    padding-bottom: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--rz-muted);
}