/* ==========================================================================
   W3 SMS - privacy policy (v3)

   Loaded after home-v3.css, whose .hv3 scope, hero background and buttons the
   page reuses. Everything new is yv3-*, so nothing leaks onto other pages.
   The header and the footer are not touched.
   ========================================================================== */

html { scroll-behavior: smooth; }

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

.hv3 .yv3-hero { padding: clamp(26px, 3.4vw, 40px) 0 clamp(54px, 6vw, 72px); }

.yv3-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center; }

.yv3-crumbs {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}
.yv3-crumbs a { color: #fff; }
.yv3-crumbs a:hover { text-decoration: underline; }
.yv3-crumbs i { font-size: .62rem; opacity: .7; }

.yv3-hero__title {
    margin-top: 16px !important;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
}
.yv3-hero__title em { font-style: normal; color: #2fb4ff; }
.yv3-hero__sub { margin-top: 12px !important; font-size: 1.05rem; color: #eaf2ff; }

.yv3-highlights { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-top: 30px !important; }
.yv3-highlights li { display: flex; align-items: center; gap: 12px; }
.yv3-highlights__icon {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #3da2ff, #1262e8);
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 18px rgba(0, 20, 90, .35);
    font-size: 1.1rem;
    color: #fff;
}
.yv3-highlights strong { display: block; font-size: .86rem; font-weight: 700; color: #fff; }
.yv3-highlights small { display: block; font-size: .74rem; color: #c9dcff; }

/* ---- the drawn wallet ---- */
.yv3-art { display: flex; justify-content: center; }
.yv3-art svg { width: min(100%, 420px); height: auto; filter: drop-shadow(0 22px 28px rgba(0, 20, 90, .35)); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.hv3 .yv3-main { padding: 26px 0 clamp(44px, 6vw, 72px); background: linear-gradient(180deg, #fff 0, #f4f8ff 100%); }

.yv3-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---- contents ---- */
.yv3-side { position: sticky; top: 96px; display: grid; gap: 18px; }

.yv3-toc { padding: 18px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid #e3ecfa; box-shadow: 0 12px 30px rgba(18, 63, 160, .08); }
.yv3-toc h2 { margin: 0 8px 12px !important; font-size: 1.1rem; font-weight: 800; color: #0b1f4d; }
.yv3-toc li + li { margin-top: 2px; }
.yv3-toc a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 500;
    color: #1d3361;
    transition: background .14s ease, color .14s ease;
}
.yv3-toc a i { flex: 0 0 16px; text-align: center; font-size: .85rem; color: #3b5280; }
.yv3-toc a:hover { background: #f1f6ff; }
.yv3-toc a.is-active { background: linear-gradient(135deg, #2a78ff, #0b4bd0); color: #fff; font-weight: 700; box-shadow: 0 8px 18px rgba(26, 98, 240, .3); }
.yv3-toc a.is-active i { color: #fff; }

.yv3-help { padding: 22px 18px 20px; border-radius: 16px; background: #eaf3ff; border: 1px solid #d6e6fc; text-align: center; }
.yv3-help__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 8px; font-size: 1.8rem; color: #1a62f0; }
.yv3-help h3 { font-size: 1.05rem; font-weight: 800; color: #0b1f4d; }
.yv3-help p { margin: 4px 0 14px !important; font-size: .8rem; color: var(--c-mute); }
.yv3-help .hv3-btn { width: 100%; padding-inline: 14px; font-size: .84rem; }

/* ---- sections ---- */
.yv3-body { display: grid; gap: 16px; }

.yv3-sec {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: center;
    padding: 22px 26px 22px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e3ecfa;
    box-shadow: 0 10px 26px rgba(18, 63, 160, .06);
    scroll-margin-top: 96px;
}
.yv3-sec__no {
    align-self: start;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #dbe9ff;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a62f0;
}
.yv3-sec__text h2 { margin-bottom: 8px !important; font-size: 1.2rem; font-weight: 800; color: #0b1f4d; }
.yv3-sec__text p { font-size: .86rem; line-height: 1.7; color: #4a5d82; }
.yv3-sec__text p + p { margin-top: 6px !important; }

.yv3-list { margin-top: 8px !important; }
.yv3-list li { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; font-size: .85rem; line-height: 1.55; color: #1d3361; }
.yv3-list li i {
    flex: 0 0 18px; width: 18px; height: 18px;
    margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #1a62f0;
    font-size: .56rem;
    color: #fff;
}
.yv3-list--stop { margin-top: 8px !important; }
.yv3-list--stop li { padding: 3px 0; }
.yv3-list--stop li i { background: #e5322d; }

.yv3-inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; font-weight: 700; color: #1a62f0; }
.yv3-inline i { font-size: .72rem; transition: margin .16s ease; }
.yv3-inline:hover i { margin-left: 4px; }

.yv3-contact { margin-top: 10px !important; }
.yv3-contact li { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: .88rem; color: #1d3361; }
.yv3-contact li i { width: 18px; text-align: center; color: #1a62f0; }
.yv3-contact a { font-weight: 700; color: #0b1f4d; }
.yv3-contact a:hover { color: #1a62f0; }

.yv3-sec__art { display: inline-flex; align-items: center; justify-content: center; width: 108px; height: 100px; justify-self: center; }
.yv3-sec__art svg { width: 100%; height: 100%; }

/* numbered steps (refund process) */
.yv3-steps { counter-reset: yv3step; margin-top: 8px !important; }
.yv3-steps li { counter-increment: yv3step; display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; font-size: .85rem; line-height: 1.55; color: #1d3361; }
.yv3-steps li::before {
    content: counter(yv3step);
    flex: 0 0 18px; width: 18px; height: 18px;
    margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #1a62f0;
    font-size: .64rem; font-weight: 700;
    color: #fff;
}

/* ---- the banner under the sections ---- */
.yv3-more {
    display: flex; align-items: center; gap: 18px;
    padding: 20px 24px;
    border-radius: 14px;
    background: #e8f2ff;
    border: 1px solid #d3e4fc;
}
.yv3-more__icon {
    flex: 0 0 52px;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a8bff, #0b4bd0);
    font-size: 1.2rem;
    color: #fff;
}
.yv3-more h2 { font-size: 1.1rem; font-weight: 800; color: #0b1f4d; }
.yv3-more p { margin-top: 3px !important; font-size: .86rem; color: var(--c-mute); }
.yv3-more > div { flex: 1 1 auto; min-width: 0; }
.yv3-more .hv3-btn { flex: 0 0 auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .yv3-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .yv3-art { min-height: 230px; }
    .yv3-layout { grid-template-columns: minmax(0, 1fr); }
    .yv3-side { position: static; }
    .yv3-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
    .yv3-toc li + li { margin-top: 0; }
}

@media (max-width: 767.98px) {
    .yv3-sec { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; }
    .yv3-sec__art { display: none; }
    .yv3-more { flex-wrap: wrap; }
    .yv3-more .hv3-btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .yv3-art { display: none; }
    .yv3-toc ol { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Phones and tablets
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* In one column the drawn picture has no column of its own: it sat on top of
       the highlights (and, on a phone, across the headline). */
    .yv3-art { display: none; }
    .hv3 .yv3-hero { padding-bottom: clamp(96px, 16vw, 130px); }

    /* The contents list is a row of chips that slides sideways instead of a
       500px column standing between the heading and the first section. */
    .yv3-side { gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .yv3-toc { padding: 10px; min-width: 0; }
    .yv3-toc h2 { margin: 0 4px 8px !important; font-size: .95rem; }
    .yv3-toc ol { display: flex !important; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; }
    .yv3-toc ol::-webkit-scrollbar { display: none; }
    .yv3-toc li { flex: 0 0 auto; }
    .yv3-toc li + li { margin-top: 0; }
    .yv3-toc a { white-space: nowrap; padding: 10px 14px; background: #f3f7ff; }
    .yv3-toc a i { display: none; }
    .yv3-toc a.is-active { background: linear-gradient(135deg, #2a78ff, #0b4bd0); }
    .yv3-help { display: none; }
}

/* touch targets: links inside the sections */
.yv3-inline, .yv3-contact a { min-height: 32px; display: inline-flex; align-items: center; }
.yv3-contact a { overflow-wrap: anywhere; }
@media (pointer: coarse) {
    .yv3-inline, .yv3-contact a { min-height: 40px; }
}