/*
 * Simple Voicemail design system.
 * Loaded after styles.css, which is the vendored/compiled Bootstrap 5.2.3 base (do not edit that file).
 * All custom styling lives here. Add new components under the matching section comment.
 */

/* design tokens */
:root {
    /* palette */
    --sv-navy: #002838;
    --sv-navy-deep: #001b26;
    --sv-teal: #0ecad4;
    --sv-teal-dark: #0ab3bc;
    --sv-teal-ink: #077f86;    /* darker teal that passes contrast on white; use for links and text accents */
    --sv-off-white: #f4fafb;
    --sv-ink: #1c333d;

    /* shape and depth */
    --sv-radius: 1rem;
    --sv-shadow: 0 1rem 3rem rgba(0, 40, 56, 0.12);
    --sv-shadow-sm: 0 0.25rem 1rem rgba(0, 40, 56, 0.08);

    /* remap bootstrap globals onto the palette (component-level colors are overridden further down) */
    --bs-primary: var(--sv-teal);
    --bs-primary-rgb: 7, 127, 134;    /* teal-ink so .text-primary stays readable on white */
    --bs-secondary: var(--sv-navy);
    --bs-secondary-rgb: 0, 40, 56;
    --bs-dark: var(--sv-navy);
    --bs-dark-rgb: 0, 40, 56;
    --bs-link-color: var(--sv-teal-ink);
    --bs-link-hover-color: var(--sv-navy);
    --bs-body-color: var(--sv-ink);
    --bs-body-bg: var(--sv-off-white);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Sora', var(--bs-body-font-family);
    font-weight: 700;
    color: var(--sv-navy);
    letter-spacing: -0.02em;
}

/* buttons; btn-primary text is navy because white on teal fails contrast */
.btn-primary {
    --bs-btn-color: var(--sv-navy);
    --bs-btn-bg: var(--sv-teal);
    --bs-btn-border-color: var(--sv-teal);
    --bs-btn-hover-color: var(--sv-navy);
    --bs-btn-hover-bg: var(--sv-teal-dark);
    --bs-btn-hover-border-color: var(--sv-teal-dark);
    --bs-btn-active-color: var(--sv-navy);
    --bs-btn-active-bg: var(--sv-teal-dark);
    --bs-btn-active-border-color: var(--sv-teal-dark);
    --bs-btn-disabled-color: var(--sv-navy);
    --bs-btn-disabled-bg: var(--sv-teal);
    --bs-btn-disabled-border-color: var(--sv-teal);
    --bs-btn-focus-shadow-rgb: 14, 202, 212;
    font-weight: 700;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sv-navy);
    --bs-btn-border-color: var(--sv-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sv-navy-deep);
    --bs-btn-hover-border-color: var(--sv-navy-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sv-navy-deep);
    --bs-btn-active-border-color: var(--sv-navy-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sv-navy);
    --bs-btn-disabled-border-color: var(--sv-navy);
    --bs-btn-focus-shadow-rgb: 0, 40, 56;
}

.btn-outline-primary {
    --bs-btn-color: var(--sv-teal-ink);
    --bs-btn-border-color: var(--sv-teal-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sv-teal-ink);
    --bs-btn-hover-border-color: var(--sv-teal-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sv-teal-ink);
    --bs-btn-active-border-color: var(--sv-teal-ink);
    --bs-btn-focus-shadow-rgb: 14, 202, 212;
}

/* form focus rings; bootstrap's blue is baked into the compiled css */
.form-control:focus {
    border-color: var(--sv-teal);
    box-shadow: 0 0 0 0.25rem rgba(14, 202, 212, 0.25);
}

/* cards */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--sv-radius);
    --bs-card-inner-border-radius: calc(var(--sv-radius) - 1px);
    box-shadow: var(--sv-shadow-sm);
}

/* nav tabs (settings page, setup guide) */
.nav-tabs .nav-link.active {
    color: var(--sv-navy);
    font-weight: 600;
}

/* accordion (about page faq) */
.accordion-button {
    font-weight: 600;
    color: var(--sv-navy);
}

.accordion-button:not(.collapsed) {
    color: var(--sv-navy);
    background-color: rgba(14, 202, 212, 0.12);
    box-shadow: inset 0 -1px 0 rgba(0, 40, 56, 0.12);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23002838'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    border-color: var(--sv-teal);
    box-shadow: 0 0 0 0.25rem rgba(14, 202, 212, 0.25);
}

/* bg-light sections blend with the off-white body */
.bg-light {
    background-color: var(--sv-off-white) !important;
}

/* header */
.sv-header {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.sv-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Sora', var(--bs-body-font-family);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--sv-navy);
}

.sv-brand-glyph {
    width: 2.1rem;
    height: 2.1rem;
}

.sv-header .nav-link {
    color: var(--sv-navy);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.sv-header .nav-link:hover,
.sv-header .nav-link:focus {
    color: var(--sv-teal-ink);
    border-bottom-color: var(--sv-teal);
}

.sv-header .nav-link .bi {
    color: var(--sv-teal-ink);
}

.sv-nav-divider {
    align-self: center;
    width: 1px;
    height: 1.5rem;
    margin: 0 1.25rem 0 0.25rem;
    background-color: rgba(0, 40, 56, 0.25);
}

@media (max-width: 991.98px) {
    .sv-nav-divider {
        align-self: stretch;
        width: auto;
        height: 1px;
        margin: 0.5rem 0;
    }
}

/* the collapsed mobile menu becomes a floating white card; the toggler rule is scoped here
   because an unscoped display override would beat bootstrap's desktop display:none */
@media (max-width: 991.98px) {
    .sv-header .navbar-toggler {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border: 0;
        color: var(--sv-navy);
        font-weight: 600;
    }

    .sv-header .navbar-collapse {
        margin-top: 0.75rem;
        padding: 1rem 1.25rem;
        background-color: #fff;
        border-radius: var(--sv-radius);
        box-shadow: var(--sv-shadow-sm);
    }
}

/* footer */
.sv-footer {
    background-color: var(--sv-navy-deep);
    color: rgba(255, 255, 255, 0.65);
}

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

.sv-footer a:hover {
    color: var(--sv-teal);
}

.sv-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Sora', var(--bs-body-font-family);
    font-weight: 700;
    color: #fff;
}

/* landing page sections */
.sv-section {
    padding: 5rem 0;
}

@media (max-width: 767.98px) {
    .sv-section {
        padding: 3.25rem 0;
    }
}

.sv-section-white {
    background-color: #fff;
}

/* dark sections */
.sv-section-dark {
    background-color: var(--sv-navy);
    background-image: radial-gradient(60rem 30rem at 85% -10%, rgba(14, 202, 212, 0.18), transparent 60%);
    color: rgba(255, 255, 255, 0.8);
}

.sv-section-dark h1, .sv-section-dark h2, .sv-section-dark h3,
.sv-section-dark h4, .sv-section-dark h5, .sv-section-dark h6 {
    color: #fff;
}

.sv-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: 'Sora', var(--bs-body-font-family);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sv-teal-ink);
}

.sv-section-dark .sv-eyebrow {
    color: var(--sv-teal);
}

/* teal marker underline for the key phrase in a heading */
.sv-highlight {
    background-image: linear-gradient(transparent 70%, rgba(14, 202, 212, 0.5) 70%);
}

/* hero */
.sv-hero {
    padding: 3.5rem 0 5rem;
}

.sv-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
}

.sv-hero .lead {
    font-size: 1.15rem;
    color: var(--sv-ink);
}

.sv-hero-visual svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 40, 56, 0.2));
}

/* how-it-works stepper */
.sv-step {
    display: flex;
    gap: 1.5rem;
}

.sv-step + .sv-step {
    margin-top: 2.25rem;
}

.sv-step-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    font-family: 'Sora', var(--bs-body-font-family);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sv-teal-ink);
    background-color: rgba(14, 202, 212, 0.15);
    border-radius: 1rem;
}

/* dial pad svg sizing */
.sv-dialpad {
    max-width: 280px;
    margin: 0 auto;
}

.sv-dialpad svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1rem 2rem rgba(0, 40, 56, 0.15));
}

/* feature grid */
.sv-feature {
    height: 100%;
    padding: 2rem;
    background-color: #fff;
    border: 1px solid rgba(0, 40, 56, 0.08);
    border-radius: var(--sv-radius);
}

.sv-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--sv-teal-ink);
    background-color: rgba(14, 202, 212, 0.15);
    border-radius: 0.75rem;
}

/* landing comparison cards */
.sv-compare-card {
    height: 100%;
    padding: 2rem;
    border-radius: var(--sv-radius);
}

.sv-compare-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-compare-card li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.sv-compare-card li:last-child {
    margin-bottom: 0;
}

.sv-compare-them {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.sv-compare-them h3 {
    color: rgba(255, 255, 255, 0.8);
}

.sv-compare-them .bi {
    color: rgba(255, 255, 255, 0.4);
}

.sv-compare-us {
    background-color: #fff;
    color: var(--sv-ink);
    box-shadow: var(--sv-shadow);
}

/* the dark-section heading override would make this white on white */
.sv-section-dark .sv-compare-us h3 {
    color: var(--sv-navy);
}

.sv-compare-us .bi {
    color: var(--sv-teal-ink);
}

/* pull quote (dark sections) */
.sv-quote {
    padding-left: 1.25rem;
    border-left: 3px solid var(--sv-teal);
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}

.sv-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* fake browser chrome around real product screenshots */
.browser-frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(0, 40, 56, 0.08);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
}

.browser-frame-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background-color: #e8f3f5;
    border-bottom: 1px solid rgba(0, 40, 56, 0.08);
}

.browser-frame-bar span {
    width: 0.7rem;
    height: 0.7rem;
    background-color: rgba(0, 40, 56, 0.15);
    border-radius: 50%;
}

.browser-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* offset teal glow behind a framed screenshot */
.sv-screenshot-glow {
    position: relative;
}

.sv-screenshot-glow::before {
    content: "";
    position: absolute;
    inset: 2rem -1.5rem -1.5rem 2rem;
    background: linear-gradient(135deg, rgba(14, 202, 212, 0.4), rgba(14, 202, 212, 0.05));
    border-radius: var(--sv-radius);
}

/* on small screens drop the offset glow (it would overflow the viewport) and go near full-bleed */
@media (max-width: 767.98px) {
    .sv-screenshot-glow::before {
        display: none;
    }

    .sv-screenshot-glow {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

/* pricing */
.sv-pricing-card {
    padding: 3rem;
    background-color: #fff;
    border-top: 5px solid var(--sv-teal);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
}

.sv-price {
    font-family: 'Sora', var(--bs-body-font-family);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sv-navy);
}

.sv-pricing-card ul {
    padding: 0;
    list-style: none;
}

.sv-pricing-card li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sv-pricing-card .bi-check-lg {
    color: var(--sv-teal-ink);
}

/* app page headers */
.page-header {
    padding: 2.5rem 0 1.5rem;
}