/* ==========================================================================
   SOV-O homepage layout, 2026 redesign
   Loaded AFTER style.css and responsive.css. Override layer only.
   Every new class is prefixed sv- so nothing collides with the theme.
   Only index.html loads this file. Inner pages are untouched.
   ========================================================================== */

:root {
    --sv-purple: #6a49f2;
    --sv-purple-600: #5636d9;
    --sv-purple-50: #f1edfe;
    --sv-deep: #32236f;
    --sv-ink: #32236f;
    --sv-body: #3e3f66;
    --sv-tint: #f6f4fe;
    --sv-line: #e1dbfc;
    --sv-green: #16a34a;
    --sv-radius: 16px;
    --sv-shadow: 0 2px 14px rgba(50, 35, 111, .07);
    --sv-shadow-lg: 0 10px 40px rgba(50, 35, 111, .12);
}

/* --- base -------------------------------------------------------------- */

body.sv-home {
    background: #fff;
    color: var(--sv-body);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.sv-home h1,
.sv-home h2,
.sv-home h3,
.sv-home h4,
.sv-home h5,
.sv-home h6 {
    color: var(--sv-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

.sv-wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.sv-section {
    padding: 88px 0;
}

/* Grid tracks default to min-width:auto, so a wide image inside one refuses
   to shrink and pushes the whole page sideways on narrow screens. */
.sv-hero__grid > *,
.sv-action > *,
.sv-confidence > *,
.sv-cta > *,
.sv-steps > *,
.sv-cards > *,
.sv-tiles > *,
.sv-action__panel > * {
    min-width: 0;
}

.sv-home img {
    max-width: 100%;
    height: auto;
}

.sv-section--tint {
    background: var(--sv-tint);
}

.sv-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 44px;
}

.sv-badge {
    display: inline-block;
    background: var(--sv-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    padding: 5px 18px;
    margin-bottom: 14px;
}

.sv-badge--soft {
    background: var(--sv-purple-50);
    color: var(--sv-purple);
}

.sv-head h2 {
    font-size: 38px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.sv-head p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    color: var(--sv-body);
}

/* --- buttons ----------------------------------------------------------- */

.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sv-btn:hover,
.sv-btn:focus {
    text-decoration: none;
    transform: translateY(-2px);
}

.sv-btn--primary {
    background: var(--sv-purple);
    color: #fff;
}

.sv-btn--primary:hover,
.sv-btn--primary:focus {
    background: var(--sv-purple-600);
    color: #fff;
}

.sv-btn--ghost {
    background: #fff;
    color: var(--sv-purple);
    border-color: var(--sv-purple);
}

.sv-btn--ghost:hover,
.sv-btn--ghost:focus {
    background: var(--sv-purple-50);
    color: var(--sv-purple-600);
}

.sv-btn--white {
    background: #fff;
    color: var(--sv-purple);
}

.sv-btn--white:hover,
.sv-btn--white:focus {
    background: var(--sv-purple-50);
    color: var(--sv-purple-600);
}

/* store badges */

.sv-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-stores img {
    height: 48px;
    width: auto;
    display: block;
}

/* The mockup shows black pill store badges. The only badge art on the server
   is transparent-background lockups, so the pill is drawn in CSS around the
   white variant. Swap in official black badge PNGs later if the client
   supplies them and drop the .sv-stores--pill class. */
.sv-stores--pill a {
    display: block;
    background: #000;
    border-radius: 9px;
    padding: 9px 18px;
    transition: transform .2s ease, background .2s ease;
}

.sv-stores--pill a:hover {
    background: #1c1c1c;
    transform: translateY(-2px);
}

.sv-stores--pill img {
    height: 28px;
}

/* --- header ------------------------------------------------------------ */
/* main.js still adds .fix_style / .fixed on scroll, so the element and the
   theme classes are kept. Only the look changes. */

/* The theme absolutely positions the header over the hero. The mockup has a
   solid bar in normal flow, and the overlay was clipping the first line of the
   h1 on mobile. :not(.fix_style) keeps the scroll-triggered sticky intact. */
.sv-home header:not(.fix_style) {
    position: relative;
}

.sv-home header {
    background: #fff;
    border-bottom: 1px solid var(--sv-line);
    padding: 6px 0;
}

.sv-home header.fixed {
    box-shadow: var(--sv-shadow);
    border-bottom-color: transparent;
}

.sv-home .navbar-brand img {
    max-height: 38px;
    width: auto;
}

.sv-home .navbar-nav {
    align-items: center;
}

.sv-home .navbar-nav .nav-link {
    color: var(--sv-ink);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 16px;
    position: relative;
}

.sv-home .navbar-nav .nav-link:hover,
.sv-home .navbar-nav .nav-link:focus {
    color: var(--sv-purple);
}

.sv-home .navbar-nav .nav-link.sv-active {
    color: var(--sv-purple);
    font-weight: 600;
}

.sv-home .navbar-nav .nav-link.sv-active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--sv-purple);
}

.sv-home .navbar-nav .sv-nav-cta {
    margin-left: 12px;
}

/* At the navbar-expand-lg boundary the theme gives .navbar-nav its own white
   rounded panel, which reads as a stray pill behind the links. */
@media (min-width: 992px) {
    .sv-home .navbar-collapse,
    .sv-home .navbar-nav {
        background: transparent;
        box-shadow: none;
        border: 0;
        padding: 0;
        border-radius: 0;
    }
}

/* --- hero -------------------------------------------------------------- */

.sv-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
    background:
        radial-gradient(120% 80% at 88% 12%, #e9e3ff 0%, rgba(233, 227, 255, 0) 60%),
        linear-gradient(180deg, #fff 0%, #f6f4fe 100%);
}

.sv-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.sv-hero h1 {
    font-size: 52px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.sv-hero__sub {
    font-size: 17px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 0 28px;
}

.sv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.sv-pills li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sv-ink);
    box-shadow: var(--sv-shadow);
}

.sv-pills i {
    font-size: 13px;
}

.sv-pills .sv-i-paid {
    color: var(--sv-purple);
}

.sv-pills .sv-i-volunteer {
    color: var(--sv-green);
}

.sv-pills .sv-i-secure {
    color: var(--sv-deep);
}

.sv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sv-hero__art {
    text-align: center;
}

.sv-hero__art img {
    max-width: 100%;
    max-height: 540px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 24px 48px rgba(50, 35, 111, .18));
}

/* --- video / in action ------------------------------------------------- */

.sv-action {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sv-shadow);
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
}

.sv-action > div:first-child {
    max-width: 480px;
}

.sv-action h2 {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 14px;
}

.sv-action p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
}

.sv-action__points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.sv-action__points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sv-ink);
    margin-bottom: 14px;
}

.sv-action__points i {
    color: #16a34a;
    font-size: 16px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* The promo video is portrait 9:16, so the panel is a narrow column with the
   video centred on it rather than the wide letterbox the mockup showed. */
.sv-action__panel {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(115deg, #ded4fd 0%, #f2eeff 55%, #e5dcff 100%);
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-action__panel video {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 520px;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 14px 34px rgba(50, 35, 111, .22);
}



/* --- how it works, tabs ------------------------------------------------ */

.sv-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 40px;
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 12px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.sv-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sv-body);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.sv-tab:hover {
    color: var(--sv-purple);
}

.sv-tab[aria-selected="true"] {
    background: var(--sv-purple);
    color: #fff;
}

.sv-panel[hidden] {
    display: none;
}

.sv-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    background: var(--sv-tint);
    border-radius: 24px;
    padding: 30px;
}

.sv-panel--seeker .sv-steps {
    background: #edf9f1;
}

.sv-step {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px;
    text-align: left;
    box-shadow: 0 3px 14px rgba(50, 35, 111, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.sv-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(50, 35, 111, .13);
}

.sv-step__icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #e6dcff 0%, #f4f0ff 72%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--sv-purple);
    margin-bottom: 22px;
}

.sv-panel--seeker .sv-step__icon {
    background: radial-gradient(circle at 50% 45%, #cdeedd 0%, #edf9f2 72%);
    color: #0f8a4a;
}

.sv-step__no {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--sv-purple);
    background: var(--sv-purple-50);
    border-radius: 20px;
    padding: 5px 12px;
    margin-bottom: 12px;
}

.sv-panel--seeker .sv-step__no {
    color: #0f8a4a;
    background: #e4f6ec;
}

.sv-step h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.sv-step p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* --- why choose -------------------------------------------------------- */

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

.sv-card {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 22px;
    padding: 42px 34px;
    box-shadow: 0 4px 22px rgba(50, 35, 111, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}

.sv-card:hover {
    box-shadow: 0 16px 44px rgba(50, 35, 111, .14);
    transform: translateY(-4px);
}

.sv-card__icon {
    width: 88px;
    height: 88px;
    margin-bottom: 26px;
}

.sv-card__icon img {
    width: 100%;
    height: auto;
    display: block;
}

.sv-card:hover .sv-card__icon img {
    transform: rotate(360deg);
    transition: transform 2s;
}

.sv-card h3 {
    font-size: 21px;
    margin: 0 0 12px;
}

.sv-card p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* --- category tiles ---------------------------------------------------- */

.sv-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.sv-tile {
    flex: 0 1 calc(25% - 18px);
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 20px;
    padding: 34px 18px;
    text-align: center;
    box-shadow: 0 3px 16px rgba(50, 35, 111, .05);
    transition: box-shadow .25s ease, transform .25s ease;
}

.sv-tile:hover {
    box-shadow: 0 14px 38px rgba(50, 35, 111, .13);
    transform: translateY(-4px);
}

.sv-tile i {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin: 0 auto 18px;
}

.sv-tile span {
    font-size: 15px;
    font-weight: 600;
    color: var(--sv-ink);
    line-height: 1.4;
    display: block;
}

.sv-tile--home i {
    color: #6a49f2;
    background: #ede8ff;
}

.sv-tile--events i {
    color: #e11d48;
    background: #ffe6ec;
}

.sv-tile--creative i {
    color: #e08a09;
    background: #fff2d9;
}

.sv-tile--driving i {
    color: #0d9488;
    background: #d9f5f1;
}

.sv-tile--lessons i {
    color: #5636d9;
    background: #e8e3ff;
}

.sv-tile--pro i {
    color: #7c4a12;
    background: #f6e9d8;
}

.sv-tile--volunteer i {
    color: #e11d48;
    background: #ffe6ec;
}

/* --- work with confidence ---------------------------------------------- */

.sv-confidence {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 18px;
    padding: 44px 44px;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 40px;
    align-items: center;
}

.sv-confidence h2 {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.sv-confidence__lead {
    font-size: 17px;
    font-weight: 600;
    color: var(--sv-ink);
    margin: 0 0 14px;
}

.sv-confidence__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sv-body);
    margin: 0;
}

.sv-flow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}

.sv-flow__step {
    text-align: center;
    flex: 1 1 0;
    min-width: 128px;
    background: var(--sv-tint);
    border-radius: 18px;
    padding: 24px 14px;
}

.sv-flow__step img {
    width: 62px;
    height: auto;
    display: block;
    margin: 0 auto 12px;
}

.sv-flow__step span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--sv-ink);
}

.sv-flow__arrow {
    flex: 0 0 auto;
    align-self: center;
    color: #b3a9d9;
    font-size: 16px;
}

/* --- blue CTA banner --------------------------------------------------- */

.sv-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105deg, var(--sv-purple) 0%, #7d5cff 55%, #4b2fd0 100%);
    border-radius: 18px;
    padding: 34px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}

/* Coming Soon ribbon. Same wrapper-with-overflow geometry and red as the
   theme's existing ribbon, mirrored to the right corner so it does not sit on
   top of the phone art. No sparkle graphics, the client asked for the ribbon
   on its own. Delete .sv-ribbon-wrap from index.html once the app is live. */
.sv-ribbon-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.sv-ribbon {
    position: absolute;
    top: 30px;
    right: -40px;
    width: 200px;
    transform: rotate(45deg);
    background: #ff4d4d;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 5px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}

.sv-cta__art {
    max-width: 130px;
}

.sv-cta__art img {
    width: 100%;
    height: auto;
    display: block;
}

.sv-cta h2 {
    color: #fff;
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.sv-cta p {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 420px;
}

/* --- support strip ----------------------------------------------------- */

.sv-support {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sv-support__text {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sv-support__text img {
    width: 58px;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

.sv-support h3 {
    font-size: 18px;
    margin: 0 0 4px;
}

.sv-support p {
    font-size: 14px;
    margin: 0;
}

/* --- footer ------------------------------------------------------------ */

.sv-footer {
    background: var(--sv-deep);
    color: rgba(255, 255, 255, .72);
    padding: 56px 0 0;
    margin-top: 88px;
}

.sv-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
}

.sv-footer__logo {
    max-height: 34px;
    width: auto;
    margin-bottom: 16px;
}

.sv-footer__brand p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
    max-width: 300px;
    color: rgba(255, 255, 255, .72);
}

.sv-social {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s ease;
}

.sv-social a:hover {
    background: var(--sv-purple);
    color: #fff;
}

.sv-footer h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 18px;
    /* theme adds a bar and left padding on every footer h6, cancel both */
    padding-left: 0;
    line-height: 1.3;
}

.sv-footer h6::before {
    content: none;
}

.sv-footer ul.sv-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-footer ul.sv-links li {
    margin-bottom: 11px;
}

.sv-footer ul.sv-links a {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}

.sv-footer ul.sv-links a:hover {
    color: #fff;
}

.sv-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 44px;
    padding: 20px 0;
}

.sv-footer__bottom .sv-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sv-footer__bottom p {
    font-size: 13px;
    margin: 0;
    color: rgba(255, 255, 255, .6);
}

.sv-footer__bottom a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.sv-footer__bottom a:hover {
    color: #fff;
}

/* --- feature showcase -------------------------------------------------- */

.sv-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 76px;
}

.sv-feature:last-child {
    margin-bottom: 0;
}

.sv-feature > * {
    min-width: 0;
}

.sv-feature--flip .sv-feature__art {
    order: -1;
}

.sv-feature__art img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(50, 35, 111, .18);
}

.sv-feature h3 {
    font-size: 29px;
    line-height: 1.25;
    margin: 0 0 14px;
}

.sv-feature p {
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 20px;
}

.sv-feature__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-feature__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--sv-ink);
    margin-bottom: 13px;
}

.sv-feature__list i {
    color: var(--sv-purple);
    font-size: 15px;
    margin-top: 4px;
    flex: 0 0 auto;
}

/* --- feature band ------------------------------------------------- */

.sv-band {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 22px;
    padding: 44px 48px;
    display: grid;
    grid-template-columns: 300px 1fr auto;
    gap: 44px;
    align-items: center;
    box-shadow: 0 4px 22px rgba(50, 35, 111, .06);
}

.sv-band > * {
    min-width: 0;
}

.sv-band__art img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.sv-band h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.sv-band p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* --- faq accordion ----------------------------------------------------- */

.sv-faq {
    max-width: 880px;
    margin: 0 auto;
}

.sv-faq__item {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(50, 35, 111, .05);
}

.sv-faq__item.is-open {
    border-color: #cbbcff;
    box-shadow: 0 10px 30px rgba(50, 35, 111, .11);
}

.sv-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
    background: none;
    border: 0;
    padding: 22px 26px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--sv-ink);
    cursor: pointer;
}

.sv-faq__q i {
    color: var(--sv-purple);
    font-size: 15px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.sv-faq__item.is-open .sv-faq__q i {
    transform: rotate(45deg);
}

.sv-faq__a {
    padding: 0 26px 24px;
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0;
}

.sv-faq__item:not(.is-open) .sv-faq__a {
    display: none;
}

.sv-faq__more {
    text-align: center;
    margin-top: 30px;
}

/* --- accessibility ----------------------------------------------------- */

.sv-home a:focus-visible,
.sv-home button:focus-visible {
    outline: 3px solid var(--sv-purple);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {

    .sv-home *,
    .sv-home *::before,
    .sv-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .sv-btn:hover,
    .sv-card:hover,
    .sv-tile:hover {
        transform: none;
    }
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1199px) {
    .sv-hero h1 {
        font-size: 44px;
    }

    .sv-tile {
        flex: 0 1 calc(33.333% - 16px);
    }
}

@media (max-width: 991px) {

    .sv-section {
        padding: 60px 0;
    }

    .sv-hero {
        padding: 48px 0 40px;
    }

    .sv-hero__grid,
    .sv-action,
    .sv-confidence {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .sv-hero h1 {
        font-size: 38px;
    }

    .sv-hero__sub {
        max-width: none;
    }

    .sv-hero__art img {
        max-width: 340px;
        max-height: 460px;
    }

    .sv-action {
        padding: 28px;
    }

    .sv-head h2 {
        font-size: 30px;
    }

    .sv-cards {
        grid-template-columns: 1fr;
    }

    .sv-feature {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 54px;
    }

    .sv-feature--flip .sv-feature__art {
        order: 0;
    }

    .sv-feature h3 {
        font-size: 25px;
    }

    .sv-band {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 32px 28px;
        text-align: center;
    }

    .sv-band__art {
        max-width: 280px;
        margin: 0 auto;
    }

    .sv-cta {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 24px;
    }

    .sv-cta p {
        max-width: none;
    }

    .sv-cta__art {
        margin: 0 auto;
    }

    .sv-cta .sv-stores {
        justify-content: center;
    }

    .sv-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sv-footer__brand {
        grid-column: 1 / -1;
    }

    /* collapsed mobile menu */
    .sv-home .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--sv-line);
        padding: 12px 0;
    }

    .sv-home .navbar-nav {
        align-items: flex-start;
    }

    .sv-home .navbar-nav .sv-nav-cta {
        margin: 10px 16px 4px;
    }
}

@media (max-width: 767px) {
    .sv-steps {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .sv-step {
        padding: 26px 22px;
    }

    .sv-card {
        padding: 32px 26px;
    }

    .sv-tile {
        flex: 0 1 calc(50% - 12px);
        padding: 26px 14px;
    }

    .sv-hero h1 {
        font-size: 32px;
    }

    .sv-faq__q {
        font-size: 15.5px;
        padding: 18px 20px;
    }

    .sv-faq__a {
        padding: 0 20px 20px;
        font-size: 15px;
    }

    .sv-hero__actions .sv-btn,
    .sv-tab {
        flex: 1 1 auto;
    }

    .sv-tabs {
        width: 100%;
    }

    .sv-tab {
        padding: 12px 16px;
        justify-content: center;
    }

    .sv-action__panel {
        padding: 16px;
    }

    .sv-action__panel video {
        max-height: 400px;
    }

    .sv-flow {
        flex-direction: column;
        gap: 18px;
    }

    .sv-flow__arrow {
        transform: rotate(90deg);
        padding: 0;
    }

    .sv-confidence,
    .sv-support {
        padding: 26px 22px;
    }

    .sv-support {
        flex-direction: column;
        align-items: flex-start;
    }

    .sv-footer {
        margin-top: 60px;
    }

    .sv-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sv-footer__bottom .sv-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .sv-stores img {
        height: 42px;
    }
}