/* ==========================================================================
   Lyvra brand layer — Logo V3
   --------------------------------------------------------------------------
   Loaded AFTER app.css, and doing two separate jobs:

   1. Re-point the legacy token set at the V3 palette, so every page that has
      not been rebuilt yet inherits the new brand instead of the violet one.
   2. Supply the components the rebuilt pages use. Those are namespaced `lv-`
      so they never collide with the 69KB of legacy CSS still styling the
      other pages.

   Palette source of truth: Lyvra-logo-Icon/Logo V3/README.md
   ========================================================================== */

:root {
    /* --- Brand, verbatim from the logo set ------------------------------- */
    --mint:            #6FE3B0;  /* primary, flat */
    --mint-fade-start: #80F4B8;  /* gradient top-left */
    --mint-fade-end:   #5ED2A6;  /* gradient bottom-right */
    --mint-deep:       #2FBF8C;  /* logotype accent on white ONLY — 2.35:1 */
    --ink:             #0B1220;  /* brand ground, and text on mint */

    /* --- Added for interface use ----------------------------------------- */
    /* The brand greens are all too light to carry white text. This is the
       green for links, labels and outlined controls on a light ground:
       5.3:1 on white, so it clears AA where mint-deep does not. */
    --mint-ui:         #0E7A57;
    --ink-2:           #111C2B;  /* raised surface on ink */
    --ink-3:           #16202F;  /* card on ink */
    --hairline:        #2C3A4C;
    --paper:           #FFFFFF;
    --paper-2:         #F5F7F9;
    --text-on-ink:     #F8FAFC;
    --muted-on-ink:    #94A3B8;
    /* #64748B measures 4.43:1 on the paper ground — just under AA at body
       size. Slate-600 clears it at 6.85:1 and also repairs every legacy page,
       which used #8b93a8 at 3.0:1. */
    --muted-on-paper:  #475569;

    /* --- Legacy tokens, re-pointed --------------------------------------- */
    /* app.css still references these by name across ~60 declarations. */
    --primary:       var(--mint);
    --primary-mid:   var(--mint-fade-end);
    --primary-light: var(--mint-fade-start);
    --dark:          var(--ink);
    --navy:          var(--ink-2);
    --light-navy:    var(--ink-3);
    --gray:          var(--muted-on-paper);
    --gradient: linear-gradient(135deg, var(--mint-fade-start) 0%, var(--mint-fade-end) 100%);

    /* The beta banner is gone and the header is sticky rather than fixed, so
       nothing needs reserved space at the top any more. app.css still offsets
       by these two values in three places; zeroing them here is cheaper and
       safer than editing 69KB of legacy CSS. */
    --banner-height: 0px;

    --lv-radius:   14px;
    --lv-radius-s: 10px;
    --lv-wrap:     1160px;
}

/* --------------------------------------------------------------------------
   Legacy contrast repairs
   The old palette was dark enough to carry white text on the brand gradient.
   Mint is not: white on #5ED2A6 is 1.5:1. These are the five places app.css
   pairs the gradient (or --primary) with white text; the fill stays, the text
   flips to Ink, which is the brand's own app-icon-mint convention.
   -------------------------------------------------------------------------- */
.social-link:hover,
.social-link:focus-visible,
.pricing-v2 .billing-save-badge,
.pricing-v2 .pricing-badge,
.pricing-v2 .pricing-button,
.pricing-v2 .pricing-button-outline:hover {
    color: var(--ink);
}

/* Legacy pages used a fixed nav under a fixed banner, and reserved 80px for
   it. The header is sticky now, so it occupies real flow space and the
   reservation becomes a gap. */
.hero,
.page-hero,
.legal-hero {
    margin-top: 0 !important;
}

/* The hero's stock photograph is a third-party hotlink in the LCP path.
   Replaced with the brand ground plus two soft mint fields. */
.hero {
    background:
        radial-gradient(1100px 520px at 18% 8%, rgba(111, 227, 176, 0.16), transparent 62%),
        radial-gradient(900px 480px at 88% 40%, rgba(94, 210, 166, 0.12), transparent 60%),
        var(--ink) !important;
}

/* ==========================================================================
   Rebuilt components
   ========================================================================== */

.lv-wrap {
    width: min(var(--lv-wrap), calc(100% - 2.5rem));
    margin-inline: auto;
}

/* --- Site header ---------------------------------------------------------- */

.lv-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Fully opaque, not 92%. On the light variant the body behind it is
       white, and a translucent dark bar makes the contrast of the nav links
       depend on whatever happens to be scrolling underneath. */
    background: var(--ink);
    border-bottom: 1px solid rgba(44, 58, 76, 0.7);
}

.lv-header__inner {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    height: 68px;
}

.lv-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.lv-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.lv-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lv-nav a {
    color: var(--muted-on-ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.15s;
}

.lv-nav a:hover,
.lv-nav a.is-active {
    color: var(--text-on-ink);
}

.lv-header__spacer { flex-grow: 1; }

.lv-header__right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-shrink: 0;
}

/* --- Buttons -------------------------------------------------------------- */

.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem;
    border-radius: var(--lv-radius-s);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, background 0.15s, color 0.15s;
}

.lv-btn:hover { transform: translateY(-1px); }

.lv-btn--primary {
    background: var(--gradient);
    color: var(--ink);
}

.lv-btn--primary:hover { filter: brightness(1.06); }

.lv-btn--ghost {
    background: transparent;
    color: var(--text-on-ink);
    border-color: var(--hairline);
}

.lv-btn--ghost:hover { border-color: var(--mint); color: var(--mint); }

/* --- Store badges --------------------------------------------------------- */

.lv-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lv-store {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.25rem 0.7rem 1rem;
    border-radius: 12px;
    background: var(--text-on-ink);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.lv-store:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.lv-store svg { flex-shrink: 0; }

.lv-store__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.lv-store__label {
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.62;
}

.lv-store__name {
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 600;
}

/* --- Sticky mobile install bar -------------------------------------------- */

.lv-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid rgba(44, 58, 76, 0.9);
    transform: translateY(110%);
    transition: transform 0.25s ease;
}

.lv-sticky-cta.is-visible { transform: translateY(0); }

.lv-sticky-cta__copy { flex-grow: 1; min-width: 0; }

.lv-sticky-cta__title {
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-on-ink);
}

.lv-sticky-cta__sub {
    font-size: 0.74rem;
    color: var(--muted-on-ink);
}

@media (max-width: 900px) {
    .lv-sticky-cta { display: flex; }

    /* The legacy JS toggles .nav-links.active to open the drawer; keep that
       contract and only change how the closed state looks. */
    .lv-nav:not(.active) { display: none; }

    .lv-header__inner { gap: 0.75rem; height: 60px; }
    .lv-logo img { height: 26px; }
    .lv-header__right { gap: 0.5rem; }
    .lv-header__right .lv-btn { padding: 0.55rem 0.8rem; font-size: 0.82rem; }

    /* Flag plus chevron is enough at this width; the code is redundant. */
    .lv-header__right .lang-code { display: none; }
}

@media (max-width: 420px) {
    .lv-header__right .lang-chevron { display: none; }
    .lv-logo img { height: 24px; }
}

/* --- Cookie bar (bottom bar, not a viewport wall) -------------------------- */

.lv-cookie {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--lv-radius);
    background: rgba(17, 28, 43, 0.98);
    border: 1px solid var(--hairline);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
}

.lv-cookie p {
    flex-grow: 1;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #A9BACD;
}

.lv-cookie__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lv-cookie__btn {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--hairline);
    background: transparent;
    color: #CBD5E1;
    cursor: pointer;
}

.lv-cookie__btn--accept {
    background: var(--gradient);
    border-color: transparent;
    color: var(--ink);
}

@media (max-width: 720px) {
    .lv-cookie {
        flex-direction: column;
        align-items: stretch;
        bottom: 5.5rem;
    }
    .lv-cookie__actions { justify-content: flex-end; }
}

/* --- Sections ------------------------------------------------------------- */

.lv-section { padding: 5rem 0; background: var(--ink); }
.lv-section--alt,
.lv-section--dark { background: #080E1C; }

.lv-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
}

.lv-h2 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    line-height: 1.15;
    color: var(--text-on-ink);
    margin: 0.75rem 0 0;
    letter-spacing: -0.01em;
}

.lv-lede {
    font-size: 1.02rem;
    line-height: 1.62;
    color: #B6C4D4;
    margin: 0.85rem 0 0;
    max-width: 58ch;
}

.lv-card {
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    border-radius: var(--lv-radius);
}

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

.lv-hero {
    padding: 4.5rem 0 4rem;
    background:
        radial-gradient(1100px 520px at 18% 8%, rgba(111, 227, 176, 0.16), transparent 62%),
        radial-gradient(900px 480px at 88% 40%, rgba(94, 210, 166, 0.12), transparent 60%),
        #080E1C;
}

.lv-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.5rem;
    align-items: center;
}

.lv-hero h1 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--text-on-ink);
    margin: 1.4rem 0 0;
    text-wrap: pretty;
}

.lv-hero h1 .lv-accent {
    background: linear-gradient(100deg, var(--mint-fade-start), var(--mint-fade-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lv-hero__sub {
    font-size: 1.08rem;
    line-height: 1.58;
    color: #CBD5E1;
    margin: 1.15rem 0 1.75rem;
    max-width: 34rem;
}

.lv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(111, 227, 176, 0.35);
    background: rgba(111, 227, 176, 0.1);
    font-size: 0.78rem;
    font-weight: 600;
    color: #A7EFCD;
}

.lv-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
}

.lv-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-top: 1.25rem;
    font-size: 0.86rem;
    color: var(--muted-on-ink);
}

.lv-hero__proof span { display: inline-flex; align-items: center; gap: 0.4rem; }

.lv-phone {
    justify-self: center;
    padding: 14px;
    border-radius: 38px;
    background: linear-gradient(160deg, var(--ink-3), #0B1220);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.16);
    max-width: 260px;
}

.lv-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 25px;
}

@media (max-width: 900px) {
    .lv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .lv-hero { padding: 2rem 0 3rem; }
    .lv-stores { flex-direction: column; align-items: stretch; }
    .lv-store { justify-content: center; }
}

/* --- Proof strip ---------------------------------------------------------- */

.lv-proof {
    border-block: 1px solid rgba(44, 58, 76, 0.7);
    background: var(--ink);
}

.lv-proof__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    padding: 1.6rem 0;
}

.lv-stat__value {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--text-on-ink);
    font-variant-numeric: tabular-nums;
}

.lv-stat__label {
    font-size: 0.78rem;
    color: var(--muted-on-ink);
    margin-top: 0.15rem;
}

/* --- Compatibility checker ------------------------------------------------ */

.lv-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.lv-chip {
    padding: 0.6rem 1.05rem;
    border-radius: var(--lv-radius-s);
    border: 1px solid var(--hairline);
    background: transparent;
    color: #CBD5E1;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.lv-chip:hover { border-color: var(--mint); color: var(--mint); }

.lv-chip[aria-pressed='true'] {
    background: var(--gradient);
    border-color: transparent;
    color: var(--ink);
    font-weight: 700;
}

.lv-chip--other { border-style: dashed; color: var(--muted-on-ink); }

.lv-result {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.4rem;
    padding: 1.25rem 1.35rem;
    border-radius: var(--lv-radius);
    border: 1px dashed var(--hairline);
    background: #111C2B;
}

.lv-result[data-state='supported'] {
    border-style: solid;
    border-color: rgba(111, 227, 176, 0.35);
    background: rgba(111, 227, 176, 0.09);
}

.lv-result[data-state='unknown'] {
    border-style: solid;
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(234, 179, 8, 0.08);
}

.lv-result__body { flex-grow: 1; min-width: 0; }

.lv-result__title {
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-on-ink);
}

.lv-result__text {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #A9BACD;
}

.lv-result__actions { display: flex; gap: 0.55rem; flex-shrink: 0; }

@media (max-width: 760px) {
    .lv-result { flex-direction: column; align-items: flex-start; }
    .lv-result__actions { width: 100%; }
    .lv-result__actions .lv-btn { flex-grow: 1; }
}

/* --- Value blocks --------------------------------------------------------- */

.lv-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3.5rem;
    align-items: center;
}

.lv-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

.lv-checks li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.95rem;
    color: #CBD5E1;
}

.lv-checks svg { flex-shrink: 0; margin-top: 0.2rem; }

/* --- Pricing strip -------------------------------------------------------- */

.lv-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.lv-plan { padding: 1.75rem; }

.lv-plan--featured {
    border-color: rgba(111, 227, 176, 0.45);
    background: linear-gradient(160deg, rgba(111, 227, 176, 0.09), var(--ink-3) 55%);
}

.lv-plan__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.lv-plan__name {
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-on-ink);
}

.lv-plan__price {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--text-on-ink);
    font-variant-numeric: tabular-nums;
}

.lv-plan__per { font-size: 0.85rem; color: var(--muted-on-ink); font-weight: 400; }

/* --- Install band --------------------------------------------------------- */

.lv-band {
    padding: 4rem 0;
    background: linear-gradient(120deg, var(--mint-fade-end), var(--mint-fade-start));
    color: var(--ink);
}

.lv-band__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
}

.lv-band h2 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    margin: 0 0 0.6rem;
    max-width: 20ch;
    color: var(--ink);
}

.lv-band p { margin: 0; font-size: 1rem; font-weight: 500; color: rgba(11, 18, 32, 0.82); }

.lv-band .lv-store {
    background: var(--ink);
    color: var(--text-on-ink);
}

/* --- FAQ ------------------------------------------------------------------ */

.lv-faq { border-top: 1px solid rgba(44, 58, 76, 0.7); }

.lv-faq details {
    border-bottom: 1px solid rgba(44, 58, 76, 0.7);
    padding: 1.1rem 0;
}

.lv-faq summary {
    cursor: pointer;
    list-style: none;
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text-on-ink);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.lv-faq summary::-webkit-details-marker { display: none; }
.lv-faq summary::after { content: '+'; color: var(--mint); font-size: 1.25rem; line-height: 1; }
.lv-faq details[open] summary::after { content: '\2212'; }

.lv-faq p {
    margin: 0.75rem 0 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: #A9BACD;
    max-width: 70ch;
}

/* --- Utilities ------------------------------------------------------------ */

.lv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lv-btn:hover,
    .lv-store:hover { transform: none; }
    .lv-sticky-cta { transition: none; }
}

/* --------------------------------------------------------------------------
   Cookie consent — compaction, not restructuring
   The markup and its IDs are wired to app.js, so this only changes how much
   room the banner takes. On a 390px viewport the old padding and stacked
   buttons filled the screen, which is why the hero had no reachable CTA.
   -------------------------------------------------------------------------- */

.cookie-consent {
    background: var(--ink-2) !important;
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45) !important;
}

.cookie-consent .cookie-content {
    max-width: var(--lv-wrap);
    padding: 0.9rem 1.25rem !important;
    gap: 1.25rem;
    align-items: center;
}

.cookie-consent .cookie-text h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.2rem !important;
    color: var(--text-on-ink) !important;
}

.cookie-consent .cookie-text p {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    color: #A9BACD !important;
    margin: 0 !important;
}

.cookie-consent .cookie-text a { color: var(--mint) !important; }

.cookie-consent .cookie-buttons { gap: 0.45rem !important; flex-shrink: 0; }

.cookie-consent .cookie-btn {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--hairline) !important;
    background: transparent !important;
    color: #CBD5E1 !important;
}

.cookie-consent .cookie-accept {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: var(--ink) !important;
}

@media (max-width: 900px) {
    /* Sit above the install bar rather than on top of it. */
    .cookie-consent { bottom: 72px; }

    .cookie-consent .cookie-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.85rem 1rem !important;
    }

    .cookie-consent .cookie-text h4 { display: none !important; }
    .cookie-consent .cookie-buttons { justify-content: flex-end; }
}

/* The Android-only note under the store buttons, shown until the App Store
   URL is confirmed. */
.lv-stores__note {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--muted-on-ink);
}

/* app.css stacks the consent buttons below 768px, which is what made the
   banner fill a phone viewport. Three short labels fit on one row. */
@media (max-width: 900px) {
    .cookie-consent .cookie-buttons {
        flex-direction: row !important;
        flex-wrap: wrap;
        width: auto !important;
    }

    .cookie-consent .cookie-btn {
        flex: 1 1 auto;
        width: auto !important;
        padding: 0.5rem 0.6rem !important;
        font-size: 0.74rem !important;
        white-space: nowrap;
    }

    .cookie-consent .cookie-text p { font-size: 0.75rem !important; }
}

/* --------------------------------------------------------------------------
   Footer
   app.css hardcodes the old violet #0E0433 here rather than using a token,
   so it survived the token remap. Bring it onto Ink with the rest of the site.
   -------------------------------------------------------------------------- */

footer {
    background: #080E1C !important;
    border-top: 1px solid rgba(44, 58, 76, 0.7);
}

footer a { color: var(--muted-on-ink); }
footer a:hover { color: var(--mint); }

footer .footer-section h4 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 500;
}

/* The note under the store buttons sits on mint inside the install band,
   where the default muted grey is unreadable. */
.lv-band .lv-stores__note { color: rgba(11, 18, 32, 0.75); }

/* ==========================================================================
   Light sections
   --------------------------------------------------------------------------
   The first pass made every section Ink, which is how the page ended up
   reading as one long slab. "The brand lives on Ink" is a rule about the
   MARK — mint on white is 1.6:1 — not about a marketing page.

   The rhythm now alternates by purpose:
     hero, proof, price curve, footer .... dark  (product, data, anchor)
     compatibility, pricing, dongle, FAQ . light (reading and deciding)
   ========================================================================== */

.lv-section--paper {
    background: var(--paper-2);
    color: #334155;
}

.lv-section--paper .lv-h2,
.lv-section--paper .lv-result__title,
.lv-section--paper .lv-plan__name,
.lv-section--paper .lv-plan__price,
.lv-section--paper .lv-stat__value,
.lv-section--paper .lv-faq summary {
    color: var(--ink);
}

.lv-section--paper .lv-eyebrow { color: var(--mint-ui); }

.lv-section--paper .lv-lede,
.lv-section--paper .lv-checks li { color: #334155; }

.lv-section--paper .lv-result__text,
.lv-section--paper .lv-faq p,
.lv-section--paper .lv-stat__label,
.lv-section--paper .lv-plan__per { color: var(--muted-on-paper); }

.lv-section--paper .lv-card {
    background: var(--paper);
    border-color: #E2E8F0;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}

/* Chips: same shape, light-ground values. The selected state keeps the mint
   fill with Ink text, which is the one thing that works on both grounds. */
.lv-section--paper .lv-chip {
    border-color: #CBD5E1;
    color: #334155;
}

.lv-section--paper .lv-chip:hover {
    border-color: var(--mint-ui);
    color: var(--mint-ui);
}

.lv-section--paper .lv-chip--other { color: var(--muted-on-paper); }

.lv-section--paper .lv-result {
    background: var(--paper-2);
    border-color: #E2E8F0;
}

.lv-section--paper .lv-result[data-state='supported'] {
    background: rgba(111, 227, 176, 0.16);
    border-color: rgba(47, 191, 140, 0.45);
}

.lv-section--paper .lv-result[data-state='unknown'] {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.45);
}

.lv-section--paper .lv-btn--ghost {
    color: var(--ink);
    border-color: #CBD5E1;
}

.lv-section--paper .lv-btn--ghost:hover {
    border-color: var(--mint-ui);
    color: var(--mint-ui);
}

.lv-section--paper .lv-plan--featured {
    border-color: rgba(47, 191, 140, 0.5);
    background: linear-gradient(160deg, rgba(111, 227, 176, 0.16), var(--paper) 55%);
}

.lv-section--paper .lv-faq,
.lv-section--paper .lv-faq details { border-color: #E2E8F0; }

.lv-section--paper .lv-faq summary::after { color: var(--mint-ui); }

/* Links inside light sections need the interface green, not brand mint:
   #6FE3B0 on white is 1.6:1, #0E7A57 is 5.3:1. */
.lv-section--paper a:not(.lv-btn):not(.lv-store) { color: var(--mint-ui); }

/* Check marks in bullet lists are drawn with stroke="var(--mint)", which is
   invisible on paper. Rebind the token inside light sections. */
.lv-section--paper { --mint: var(--mint-ui); }

/* The mint pill loses its glow on a light ground. */
.lv-section--paper .lv-pill {
    border-color: rgba(47, 191, 140, 0.4);
    background: rgba(111, 227, 176, 0.18);
    color: #0B6B4B;
}

/* …but a paper section can still contain a dark card — the price chart is
   one. Anything inside it goes back to the on-ink values, or the light
   overrides land dark-on-dark. */
.lv-section--paper .lv-card[style*='--ink'],
.lv-on-ink { --mint: #6FE3B0; }

.lv-on-ink .lv-pill {
    border-color: rgba(111, 227, 176, 0.35);
    background: rgba(111, 227, 176, 0.1);
    color: #A7EFCD;
}

.lv-on-ink,
.lv-on-ink p { color: #B6C4D4; }

/* ==========================================================================
   Light-first variant
   --------------------------------------------------------------------------
   After the four BeTheme demos picked as references. All four are
   predominantly light (0–3 dark sections out of 8–12) with generous vertical
   air, so this composition keeps exactly one dark anchor — the hero — plus
   the footer, and puts everything else on paper.

   Borrowed deliberately:
     gsmservice2 .. the question-led device chooser, as a tile grid
     finance4 ..... the stats row and alternating media/text blocks
     lottie ....... the spacing, and motion that carries meaning
   ========================================================================== */

.lv-page--light { background: var(--paper); }

/* lottie's air: roughly 1.6x the vertical rhythm of the dark composition. */
.lv-section--airy { padding: 7.5rem 0; }

@media (max-width: 760px) {
    .lv-section--airy { padding: 4rem 0; }
}

.lv-center { text-align: center; max-width: 46rem; margin-inline: auto; }
.lv-center .lv-lede { margin-inline: auto; }

/* --- Question-led section heading (gsmservice2) ---------------------------- */

.lv-question {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0.85rem 0 0;
    text-wrap: balance;
}

/* --- Brand tile grid ------------------------------------------------------- */
/* Replaces the row of text chips. No charger-brand logos ship with the
   SupportedDevice data and we have no licence to reproduce them, so each tile
   carries the brand name set large plus the connection method. If licensed
   logo assets arrive later they drop into .lv-tile__mark without layout
   changes. */

.lv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.9rem;
    margin-top: 2.5rem;
}

.lv-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 116px;
    padding: 1.1rem 0.75rem;
    border-radius: var(--lv-radius);
    border: 1px solid #E2E8F0;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.lv-tile:hover {
    border-color: var(--mint-ui);
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.07);
    transform: translateY(-2px);
}

.lv-tile[aria-pressed='true'] {
    border-color: transparent;
    background: var(--gradient);
    box-shadow: 0 8px 22px rgba(47, 191, 140, 0.28);
}

.lv-tile__mark {
    font-family: 'Kanit', system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.lv-tile__meta {
    font-size: 0.72rem;
    color: var(--muted-on-paper);
    letter-spacing: 0.02em;
}

.lv-tile[aria-pressed='true'] .lv-tile__meta { color: rgba(11, 18, 32, 0.72); }

.lv-tile--other {
    border-style: dashed;
    background: transparent;
    color: var(--muted-on-paper);
}

/* --- Alternating media / text blocks (finance4) ---------------------------- */

.lv-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    align-items: center;
}

.lv-media--flip > .lv-media__figure { order: -1; }

@media (max-width: 760px) {
    .lv-media { gap: 2.5rem; }
    .lv-media--flip > .lv-media__figure { order: 0; }
}

.lv-media__figure {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Phone frame on a light ground: the app UI is dark, so it needs a mint
   field behind it or it reads as a hole punched in the page. */
.lv-media__figure .lv-phone {
    width: 260px;
    flex: 0 0 auto;
    background: linear-gradient(160deg, #1B2A3D, #0B1220);
    box-shadow: 0 30px 60px rgba(11, 18, 32, 0.22), 0 0 0 1px rgba(11, 18, 32, 0.08);
}

.lv-media__figure--halo { position: relative; }

.lv-media__figure--halo::before {
    content: '';
    position: absolute;
    inset: -8% -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111, 227, 176, 0.32), transparent 68%);
    z-index: 0;
}

.lv-media__figure--halo > * { position: relative; z-index: 1; }

.lv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--ink);
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.9rem;
}

/* --- Stats row (finance4) -------------------------------------------------- */

.lv-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    text-align: center;
}

.lv-figure__value {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lv-figure__label {
    margin-top: 0.5rem;
    font-size: 0.88rem;
    color: var(--muted-on-paper);
}

.lv-figure__rule {
    width: 2.5rem;
    height: 3px;
    border-radius: 2px;
    background: var(--gradient);
    margin: 0.9rem auto 0;
}

/* --- Motion (lottie) -------------------------------------------------------- */
/* The price bars grow into place on first view. This is the product's actual
   behaviour, not decoration — the chart is the thing Lyvra acts on. */

/* Gated on `js`, added to <html> by an inline script in the layout. Without
   JavaScript the hidden state never applies and everything renders normally —
   the initial version hid this content in plain CSS, which meant no-JS
   visitors saw blank sections. */
.js .lv-rise {
    transform-origin: bottom;
    transform: scaleY(0.04);
    opacity: 0;
}

.js .lv-chart.is-live .lv-rise {
    animation: lv-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lv-rise {
    from { transform: scaleY(0.04); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Transform only — never opacity. A scroll observer that fails to fire is a
   real possibility (fast scrolling, throttled callbacks, an old browser), and
   the cost of that must never be invisible copy. If this animation never runs,
   the block simply sits 14px lower than it would have, which nobody notices.
   Opacity reveals are reserved for the chart, whose meaning is carried by the
   surrounding text anyway. */
.js .lv-fade {
    transform: translateY(14px);
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .lv-fade.is-live { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .lv-rise,
    .js .lv-chart.is-live .lv-rise { animation: none; transform: none; opacity: 1; }
    .js .lv-fade { transform: none; transition: none; }
}

/* --- Dark hero on a light page --------------------------------------------- */
/* Rounded off at the bottom so the single dark block reads as a deliberate
   anchor rather than the top of another all-dark page. */

.lv-hero--anchor {
    border-radius: 0 0 34px 34px;
}

@media (max-width: 760px) {
    .lv-hero--anchor { border-radius: 0 0 22px 22px; }
}

/* ==========================================================================
   Onboarding walkthrough
   --------------------------------------------------------------------------
   Steps through real app screens beside a step list, and swaps to a screen
   recording the moment one is configured. Built to degrade in this order:

     video configured ....... <video>, autoplaying muted with controls
     stills + JS ............ auto-advancing, clickable, pauses on interaction
     stills, no JS .......... first screen plus the full numbered step list
   ========================================================================== */

.lv-walk {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3.5rem;
    align-items: center;
    margin-top: 3rem;
}

@media (max-width: 860px) {
    .lv-walk { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}

.lv-walk__stage { display: flex; justify-content: center; }

.lv-walk__stage .lv-phone {
    width: 260px;
    flex: 0 0 auto;
    position: relative;
    background: linear-gradient(160deg, #1B2A3D, #0B1220);
    box-shadow: 0 30px 60px rgba(11, 18, 32, 0.22), 0 0 0 1px rgba(11, 18, 32, 0.08);
}

/* Screens are stacked and cross-faded. The first keeps its place in flow so
   the frame has a height; the rest are positioned over it. */
.lv-walk__shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 25px;
}

.js .lv-walk__shot { opacity: 0; transition: opacity 320ms ease; }
.js .lv-walk__shot.is-current { opacity: 1; }

.js .lv-walk__shot:not(:first-child) {
    position: absolute;
    inset: 14px 14px auto 14px;
}

/* Without JS nothing can swap them, so show the first screen only. The step
   list beside it still carries all four in full, which is the part that
   actually explains the setup. */
html:not(.js) .lv-walk__shot:not(:first-child) { display: none; }

.lv-walk__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 25px;
    background: #0B1220;
}

/* --- Step list ------------------------------------------------------------- */

.lv-walk__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.lv-walk__step { position: relative; }

.lv-walk__button {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
    padding: 1rem 1.1rem;
    border-radius: var(--lv-radius);
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.lv-walk__button:hover { background: rgba(11, 18, 32, 0.035); }

.lv-walk__step.is-current .lv-walk__button {
    background: var(--paper);
    border-color: #E2E8F0;
    box-shadow: 0 2px 10px rgba(11, 18, 32, 0.05);
}

.lv-walk__n {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    background: #E2E8F0;
    color: var(--muted-on-paper);
    transition: background 0.18s, color 0.18s;
}

.lv-walk__step.is-current .lv-walk__n {
    background: var(--gradient);
    color: var(--ink);
}

.lv-walk__copy { display: grid; gap: 0.2rem; }

.lv-walk__title {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--ink);
}

.lv-walk__text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted-on-paper);
}

/* Auto-advance timer, drawn under the active step only. */
.lv-walk__progress {
    display: block;
    height: 2px;
    margin: 0 1.1rem;
    background: #E2E8F0;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
}

.lv-walk__progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gradient);
}

.js .lv-walk[data-walk-autoplay]:not(.is-paused) .lv-walk__step.is-current .lv-walk__progress { opacity: 1; }

.js .lv-walk[data-walk-autoplay]:not(.is-paused) .lv-walk__step.is-current .lv-walk__progress i {
    animation: lv-walk-fill var(--lv-walk-dwell, 4200ms) linear forwards;
}

@keyframes lv-walk-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .js .lv-walk__shot { transition: none; }
    .js .lv-walk .lv-walk__progress { display: none; }
}

/* ==========================================================================
   Inner pages
   --------------------------------------------------------------------------
   Every inner page shares one vocabulary — page-hero, section-container,
   section-header, section-tag, feature-card, form-group — so restyling those
   converts all twenty-two at once. That is deliberate: rewriting the Blade
   would churn markup on pages the URL contract depends on (legal, support
   guides, blog permalinks) for no visual gain the CSS cannot deliver.
   ========================================================================== */

/* --- Page shell ----------------------------------------------------------- */

body { background: var(--paper); color: #334155; }

main { background: var(--paper); }

.section-container {
    width: min(var(--lv-wrap), calc(100% - 2.5rem));
    margin-inline: auto;
    max-width: none;
}

/* The page header: one dark band under the header, matching the homepage
   hero so inner pages feel like the same site rather than a different one. */
.page-hero {
    background:
        radial-gradient(900px 420px at 20% 0%, rgba(111, 227, 176, 0.14), transparent 62%),
        var(--ink) !important;
    padding: 4rem 0 3.25rem !important;
    margin-top: 0 !important;
    border-radius: 0 0 30px 30px;
    text-align: left;
}

.page-hero .section-header { text-align: left; margin: 0; max-width: 46rem; }

.page-hero h1 {
    font-family: 'Kanit', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em;
    color: var(--text-on-ink) !important;
    margin: 0.7rem 0 0 !important;
    text-wrap: pretty;
}

.page-hero p {
    color: #B6C4D4 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0.9rem 0 0 !important;
    max-width: 56ch;
}

.page-hero .section-tag,
.page-hero .breadcrumbs,
.page-hero .breadcrumbs a { color: var(--mint) !important; }

.page-hero .breadcrumbs { margin-bottom: 0.5rem; font-size: 0.85rem; }

@media (max-width: 760px) {
    .page-hero { padding: 2.5rem 0 2.25rem !important; border-radius: 0 0 20px 20px; }
}

/* --- Section headings on paper -------------------------------------------- */

.section-header { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }

.section-header h2 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0.6rem 0 0;
}

.section-header p { color: var(--muted-on-paper); font-size: 1rem; line-height: 1.6; margin: 0.75rem 0 0; }

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint-ui);
    background: none;
    padding: 0;
}

/* --- Cards ---------------------------------------------------------------- */

.feature-card,
.docs-card,
.contact-item,
.device-card {
    background: var(--paper) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--lv-radius) !important;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}

.feature-card h3,
.docs-card h3 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 500;
    color: var(--ink);
}

.feature-card p,
.docs-card p,
.contact-item p { color: var(--muted-on-paper); }

.feature-icon,
.docs-icon {
    background: rgba(111, 227, 176, 0.18) !important;
    color: var(--mint-ui) !important;
    border-radius: 12px;
}

.feature-icon .material-symbols-rounded,
.docs-icon .material-symbols-rounded { color: var(--mint-ui); }

/* --- Timeline (how it works) ---------------------------------------------- */

.hiw-timeline-dot { background: var(--gradient) !important; color: var(--ink) !important; }
.hiw-timeline-time { color: var(--mint-ui) !important; font-weight: 600; }
.hiw-timeline-content h3 { font-family: 'Kanit', system-ui, sans-serif; font-weight: 500; color: var(--ink); }
.hiw-timeline-content p { color: var(--muted-on-paper); }

/* --- Forms ---------------------------------------------------------------- */

.form-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.form-group input,
.form-group textarea,
.form-group select {
    background: var(--paper) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: var(--lv-radius-s) !important;
    color: var(--ink) !important;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: 2px solid var(--mint-ui);
    outline-offset: 1px;
    border-color: var(--mint-ui) !important;
}

.form-group .error,
.error { color: #B42318; font-size: 0.85rem; }

.alert { border-radius: var(--lv-radius); border: 1px solid #E2E8F0; }

/* --- Prose (legal, guides, blog) ------------------------------------------ */

.legal-content,
.guide-content,
.post-content,
.prose {
    color: #334155;
    font-size: 1rem;
    line-height: 1.75;
    max-width: 72ch;
}

.legal-content h2,
.guide-content h2,
.post-content h2,
.legal-content h3,
.guide-content h3,
.post-content h3 {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    margin-top: 2.25rem;
}

.legal-content a,
.guide-content a,
.post-content a { color: var(--mint-ui); }

.legal-content table,
.post-content table { border-collapse: collapse; width: 100%; }

.legal-content th,
.legal-content td,
.post-content th,
.post-content td {
    border: 1px solid #E2E8F0;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.92rem;
}

.legal-content th, .post-content th { background: var(--paper-2); color: var(--ink); font-weight: 600; }

/* --- Status chips (supported devices) ------------------------------------- */

.device-status,
.legend-item { border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.legend-desc { color: var(--muted-on-paper); }

/* --- Buttons that were styled by the legacy sheet ------------------------- */

.pricing-button,
.btn-primary,
.submit-button {
    background: var(--gradient) !important;
    color: var(--ink) !important;
    border: none !important;
    border-radius: var(--lv-radius-s) !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Inner pages — text colour on light grounds
   The legacy sheet uses --primary for links, icons and labels, which sat on a
   dark page. Those same rules now sit on paper, where brand mint is 1.58:1
   and effectively invisible. --primary therefore becomes the INTERFACE green;
   the two rules that use it as a fill keep the mint, since a fill carries ink
   text rather than being read directly.
   -------------------------------------------------------------------------- */

:root { --primary: var(--mint-ui); }

.social-link:hover,
.social-link:focus-visible,
.pricing-v2 .pricing-button-outline:hover {
    background: var(--mint) !important;
    border-color: var(--mint) !important;
    color: var(--ink) !important;
}

/* Anything still painting brand mint as text on paper. */
.section-container a:not(.lv-btn):not(.lv-store):not(.pricing-button):not(.page-hero *),
.legal-content a,
.guide-content a,
.post-content a,
.contact-item a,
.contact-item .material-symbols-rounded,
.app-box-icon,
.benefit-icon,
.docs-icon .material-symbols-rounded,
.pricing-v2 .pricing-features .material-symbols-rounded,
.pricing-v2 .dongle-bundle { color: var(--mint-ui) !important; }

/* Filter and status chips: a mint fill needs ink on it, never white. */
.device-filter.active,
.device-filter[aria-pressed='true'],
.filter-btn.active,
.device-status,
.legend-item .legend-dot { color: var(--ink) !important; }

.device-filter.active,
.filter-btn.active { background: var(--gradient) !important; border-color: transparent !important; }

/* Leftovers from the violet palette. */
[style*="#f0e6ff"],
.pricing-v2 .dongle-cta { background: rgba(111, 227, 176, 0.14) !important; }

/* --------------------------------------------------------------------------
   Sections that were white-on-dark and are now white-on-white
   how-it-works and a few others painted their own dark backgrounds through
   inline styles or one-off classes. Rather than chase each, any section that
   still declares white text gets an ink ground back — they were designed as
   dark bands and they read correctly that way inside a light page.
   -------------------------------------------------------------------------- */

.hiw-hero,
.hiw-cta,
.hiw-dark,
.cta-section,
.cta-band {
    background: var(--ink) !important;
    border-radius: var(--lv-radius);
    color: var(--text-on-ink) !important;
}

.hiw-hero h2, .hiw-cta h2, .cta-section h2,
.hiw-hero h3, .hiw-cta h3, .cta-section h3 { color: var(--text-on-ink) !important; }

.hiw-hero p, .hiw-cta p, .cta-section p { color: #B6C4D4 !important; }


/* --------------------------------------------------------------------------
   Page-level <style> blocks
   Twenty-two pages push their own stylesheet, which lands after brand.css and
   therefore wins. Rather than edit each, the handful of values that carried
   the old violet identity are overridden here. Every rule below exists solely
   to beat a page-level declaration.
   -------------------------------------------------------------------------- */

/* Deliberate dark bands: keep them dark, just not violet. */
.hiw-intelligence,
.hiw-cta-section,
.devices-cta,
.support-cta { background: var(--ink) !important; }

.hiw-intel-card {
    background: var(--ink-3) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--lv-radius) !important;
}

.hiw-intel-card h3 { color: var(--text-on-ink) !important; }
.hiw-intel-card p { color: #B6C4D4 !important; }
.hiw-intel-icon { background: rgba(111, 227, 176, 0.16) !important; }
.hiw-intel-icon .material-symbols-rounded { color: var(--mint) !important; }

/* The eyebrow pill: violet tint on violet text, on every page that pushes it. */
.section-tag {
    background: rgba(111, 227, 176, 0.16) !important;
    color: var(--mint-ui) !important;
}

.page-hero .section-tag {
    background: rgba(111, 227, 176, 0.12) !important;
    color: var(--mint) !important;
}

/* Anything inside the dark page header reads on Ink, links included. */
.page-hero a,
.page-hero .breadcrumbs,
.page-hero .breadcrumbs a { color: var(--mint) !important; }

/* Category pills on the supported-devices page. */
.pill {
    border-radius: 999px !important;
    border: 1px solid #CBD5E1 !important;
    background: var(--paper) !important;
    color: #334155 !important;
    font-weight: 600;
}

.pill.active {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: var(--ink) !important;
}

/* Required-field markers were pure red on white at 3.76:1. */
.required,
.form-group .required,
label .required { color: #B42318 !important; }

/* The last two violet remnants. */

/* An eyebrow inside a deliberate dark band needs the brand mint, not the
   interface green the light-ground rule gives it. */
.hiw-intelligence .section-tag,
.hiw-cta-section .section-tag,
.devices-cta .section-tag,
.support-cta .section-tag,
.lv-section--dark .section-tag {
    background: rgba(111, 227, 176, 0.12) !important;
    color: var(--mint) !important;
}

/* The Lyvra+ bundle note on the pricing page still had a lilac fill. */
.pricing-v2 .dongle-bundle {
    background: rgba(111, 227, 176, 0.16) !important;
    color: #0B6B4B !important;
}

/* Three elements still painted the old violet ground directly. They passed
   contrast but were visibly a different brand to everything around them. */
.breadcrumbs,
.dongle-top { background: var(--ink) !important; }

/* --------------------------------------------------------------------------
   Header logo sizing
   The lockup carries a mark plus two lines of type, so it reads smaller than
   a single-line wordmark at the same height. Given a bit more room.
   -------------------------------------------------------------------------- */

.lv-header__inner { height: 76px; }

.lv-logo img { height: 40px; }

@media (max-width: 900px) {
    .lv-header__inner { height: 64px; }
    .lv-logo img { height: 32px; }
}

@media (max-width: 420px) {
    .lv-logo img { height: 28px; }
}

/* --------------------------------------------------------------------------
   Language switcher
   The dropdown kept the old identity's violet (#1A0D4E) and the active nav
   link its aqua (#00D1D1) — both were hardcoded rather than tokenised, so
   they survived the palette remap.
   -------------------------------------------------------------------------- */

.lang-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--hairline) !important;
    color: var(--text-on-ink) !important;
}

.lang-toggle:hover {
    background: rgba(111, 227, 176, 0.12) !important;
    border-color: rgba(111, 227, 176, 0.4) !important;
}

.language-switcher.open .lang-toggle {
    border-color: rgba(111, 227, 176, 0.5) !important;
}

.lang-dropdown {
    background: var(--ink-3) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.lang-option { color: #CBD5E1 !important; }

.lang-option:hover {
    background: rgba(111, 227, 176, 0.14) !important;
    color: var(--mint) !important;
}

/* Active nav link was the old aqua. */
.nav-links a.active,
.lv-nav a.is-active { color: var(--mint) !important; }

/* --------------------------------------------------------------------------
   Savings estimator
   -------------------------------------------------------------------------- */

.lv-estimator {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    padding: 2rem;
    margin-top: 2.5rem;
    align-items: center;
}

@media (max-width: 860px) {
    .lv-estimator { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.5rem; }
}

.lv-estimator__inputs { display: grid; gap: 1.5rem; }

.lv-field__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.6rem;
}

.lv-estimator__result {
    padding: 1.5rem;
    border-radius: var(--lv-radius);
    background: var(--paper-2);
    border: 1px solid #E2E8F0;
}

.lv-estimator__amount {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.35rem 0 0.9rem;
}

.lv-estimator__amount > span:first-child {
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lv-estimator__per { font-size: 1rem; color: var(--muted-on-paper); }

.lv-estimator__method,
.lv-estimator__note {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted-on-paper);
}

.lv-estimator__note {
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    background: rgba(111, 227, 176, 0.14);
    color: #0B6B4B;
}

.lv-estimator__cta { width: 100%; margin-top: 0.35rem; }

/* The method disclosure. The old site printed "35%" with nothing behind it;
   this is the part that makes the number answerable. */
.lv-method {
    max-width: 46rem;
    margin: 1.75rem auto 0;
    border-top: 1px solid #E2E8F0;
    padding-top: 1rem;
}

.lv-method summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mint-ui);
}

.lv-method summary::-webkit-details-marker { display: none; }
.lv-method summary::after { content: ' +'; }
.lv-method[open] summary::after { content: ' \2212'; }

.lv-method__body { font-size: 0.88rem; line-height: 1.7; color: var(--muted-on-paper); }
.lv-method__body ul { margin: 0.75rem 0; padding-left: 1.1rem; }
.lv-method__body li { margin-bottom: 0.3rem; }

/* Legal pages -------------------------------------------------------------- */

.footer-trader {
    font-size: 0.8rem !important;
    line-height: 1.65 !important;
    color: var(--muted-on-ink) !important;
    margin: 0.75rem 0 1rem !important;
}

.footer-trader a { color: var(--mint) !important; }

.lv-legal-notice {
    max-width: 72ch;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--lv-radius-s);
    background: rgba(111, 227, 176, 0.14);
    color: #0B6B4B;
    font-size: 0.88rem;
}

.legal-content .legal-body h2:first-child { margin-top: 0; }