:root {
            --navy: #14192B;
            --navy-2: #0C1020;
            --gold: #B08D57;
            --gold-soft: #E2D0AA;
            --ink: #1C2233;
            --muted: #6C7280;
            --line: #EAE6DD;
            --cream: #F8F5EF;
            --white: #FFFFFF;
            --green: #B08D57;
            --serif: 'Fraunces', Georgia, serif;
            --sans: 'Inter', system-ui, sans-serif;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--sans);
            color: var(--navy);
            background: var(--cream);
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }

        /* Visible focus for keyboard users */
        a:focus-visible, button:focus-visible, summary:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
            border-radius: 8px;
        }

        .shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

        /* Nav */
        .nav {
            position: sticky; top: 0; z-index: 50;
            backdrop-filter: blur(14px);
            background: rgba(26, 26, 46, 0.82);
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .nav-inner {
            display: flex; align-items: center; justify-content: space-between;
            height: 68px; gap: 16px;
        }
        .brand {
            display: flex; align-items: center; gap: 10px;
            font-family: var(--serif); font-size: 1.35rem; color: #fff; letter-spacing: 0.01em;
        }
        .brand-mark {
            width: 34px; height: 34px; border-radius: 10px;
            background: var(--gold); display: grid; place-items: center;
            color: #fff; font-size: 15px;
            box-shadow: 0 4px 14px rgba(201,169,110,0.4);
        }
        .brand-logo {
            width: 34px; height: 34px; border-radius: 10px; object-fit: contain;
            background: #fff; box-shadow: 0 4px 14px rgba(201,169,110,0.25);
        }
        .nav-links { display: flex; align-items: center; gap: 28px; }
        .nav-links a {
            color: rgba(255,255,255,0.72); font-size: 0.9rem; font-weight: 500;
            transition: color .2s; position: relative;
        }
        .nav-links a::after {
            content: ''; position: absolute; left: 0; right: 100%; bottom: -6px;
            height: 2px; background: var(--gold); transition: right .25s ease;
        }
        .nav-links a:hover { color: #fff; }
        .nav-links a:hover::after { right: 0; }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .lang { position: relative; }
        .lang summary {
            list-style: none; cursor: pointer;
            color: rgba(255,255,255,0.75); font-size: 0.82rem; font-weight: 500;
            padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
            display: flex; align-items: center; gap: 6px; transition: background .2s;
        }
        .lang summary::-webkit-details-marker { display: none; }
        .lang summary:hover { background: rgba(255,255,255,0.08); }
        .lang[open] summary { background: rgba(255,255,255,0.08); }
        .lang-menu {
            position: absolute; right: 0; top: calc(100% + 6px);
            min-width: 150px; background: #fff; border-radius: 12px;
            box-shadow: 0 16px 40px rgba(26,26,46,0.18);
            padding: 6px; border: 1px solid var(--line); z-index: 60;
        }
        .lang-menu a {
            display: flex; align-items: center; gap: 8px;
            padding: 9px 10px; border-radius: 8px; font-size: 0.85rem; color: var(--navy);
        }
        .lang-menu a:hover, .lang-menu a.active { background: var(--cream); }
        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px; border-radius: 10px; font-weight: 600; font-size: 0.92rem;
            padding: 11px 18px; border: none; cursor: pointer;
            transition: transform .2s, background .2s, color .2s, box-shadow .2s;
        }
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .btn-gold { background: var(--gold); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 35%, transparent); }
        .btn-gold:hover { background: color-mix(in srgb, var(--gold) 85%, #000); box-shadow: 0 12px 30px color-mix(in srgb, var(--gold) 45%, transparent); }
        .btn-ghost {
            background: transparent; color: rgba(255,255,255,0.9);
            border: 1px solid rgba(255,255,255,0.22);
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
        .btn-navy { background: var(--navy); color: #fff; }
        .btn-navy:hover { background: color-mix(in srgb, var(--navy) 82%, #fff); }
        .btn-outline {
            background: transparent; color: var(--navy);
            border: 1px solid rgba(26,26,46,0.18);
        }
        .btn-outline:hover { border-color: var(--gold); background: rgba(201,169,110,0.06); }
        .btn-lg { padding: 14px 22px; font-size: 0.98rem; }
        .btn-mobile-login { color: #fff; border-color: rgba(255,255,255,0.25); }
        .footer-lang-link { margin-left: 10px; }
        .footer-lang-active { color: var(--gold); }

        /* Hamburger */
        .nav-toggle {
            display: none; background: none; border: 1px solid rgba(255,255,255,0.16);
            border-radius: 9px; width: 42px; height: 42px; cursor: pointer;
            color: #fff; align-items: center; justify-content: center; padding: 0;
        }
        .nav-toggle svg { width: 22px; height: 22px; }
        .mobile-menu {
            display: none; flex-direction: column; gap: 4px;
            background: rgba(26,26,46,0.98); backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding: 12px 0 20px;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            color: rgba(255,255,255,0.82); font-size: 1rem; font-weight: 500;
            padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .mobile-menu .btn { width: 100%; margin-top: 8px; }
        .mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

        /* Hero — full-bleed */
        .hero {
            position: relative; min-height: min(100vh, 800px);
            display: flex; flex-direction: column; justify-content: center;
            color: #fff; overflow: hidden;
            background:
                linear-gradient(160deg, rgba(26,26,46,0.62) 0%, rgba(26,26,46,0.82) 45%, rgba(26,26,46,0.94) 100%),
                radial-gradient(ellipse 80% 60% at 70% 20%, rgba(201,169,110,0.28), transparent 55%),
                linear-gradient(135deg, var(--navy) 0%, #4A342A 48%, var(--navy) 100%);
            padding: 96px 0 84px;
            margin-top: -68px; padding-top: 152px;
        }
        .hero::after {
            content: '';
            position: absolute; inset: 0;
            background:
                linear-gradient(to top, rgba(26,26,46,0.6), transparent 42%),
                var(--landing-hero-image) center/cover no-repeat;
            opacity: 0.4; mix-blend-mode: luminosity; pointer-events: none;
            animation: heroReveal 1.4s ease-out both;
        }
        @keyframes heroReveal {
            from { opacity: 0; transform: scale(1.06); }
            to { opacity: 0.4; transform: scale(1); }
        }
        .hero-inner { position: relative; z-index: 1; max-width: 720px; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
            background: rgba(201,169,110,0.14); border: 1px solid rgba(201,169,110,0.4);
            color: var(--gold-soft); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
            animation: rise 0.9s ease-out both;
        }
        .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,110,0.25); }
        .hero h1 {
            font-family: var(--serif); font-weight: 400;
            font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em;
            max-width: 14ch; margin-bottom: 20px;
            animation: rise 0.9s 0.1s ease-out both;
        }
        .hero p.hero-sub {
            max-width: 44ch; color: rgba(255,255,255,0.76); font-size: 1.14rem;
            margin-bottom: 32px; animation: rise 0.9s 0.2s ease-out both;
        }
        .hero-ctas {
            display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
            animation: rise 0.9s 0.3s ease-out both;
        }
        .hero-trust {
            margin-top: 26px; color: rgba(255,255,255,0.55); font-size: 0.86rem;
            display: flex; align-items: center; gap: 8px;
            animation: rise 0.9s 0.4s ease-out both;
        }
        .hero-trust svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
        @keyframes rise {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Sections */
        section { padding: 96px 0; }
        .eyebrow {
            display: inline-block; font-size: 0.78rem; font-weight: 600;
            letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
            margin-bottom: 12px;
        }
        .section-title {
            font-family: var(--serif); font-weight: 400;
            font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15;
            margin-bottom: 14px; max-width: 18ch;
        }
        .section-sub {
            color: var(--muted); font-size: 1.05rem; max-width: 48ch; margin-bottom: 52px;
        }
        .section-head { margin-bottom: 8px; }

        /* Scroll reveal — scoped to .js so the page is never hidden by an
           animation that may not run (see firm-website.css for the rationale). */
        .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
        .js .reveal.in { opacity: 1; transform: none; }

        .features-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
        }
        .feature {
            background: #fff; border: 1px solid var(--line); border-radius: 16px;
            padding: 26px 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        .feature:hover {
            transform: translateY(-4px); border-color: rgba(201,169,110,0.5);
            box-shadow: 0 18px 40px rgba(26,26,46,0.08);
        }
        .feature-icon {
            width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
            display: grid; place-items: center;
            background: rgba(201,169,110,0.14); color: var(--gold);
        }
        .feature-icon svg { width: 23px; height: 23px; }
        .feature h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 8px; }
        .feature p { color: var(--muted); font-size: 0.95rem; }

        .ai-band {
            background: var(--navy); color: #fff;
            position: relative; overflow: hidden;
        }
        .ai-band::before {
            content: ''; position: absolute; width: 480px; height: 480px;
            right: -100px; top: -140px; border-radius: 50%;
            background: radial-gradient(circle, rgba(201,169,110,0.22), transparent 70%);
            pointer-events: none;
        }
        .ai-band .eyebrow { color: var(--gold-soft); }
        .ai-band .section-sub { color: rgba(255,255,255,0.55); }
        .ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .ai-item {
            border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 26px 24px;
            background: rgba(255,255,255,0.02); transition: border-color .25s, background .25s;
        }
        .ai-item:hover { border-color: rgba(201,169,110,0.45); background: rgba(255,255,255,0.04); }
        .ai-icon {
            width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
            display: grid; place-items: center;
            background: rgba(201,169,110,0.16); color: var(--gold-soft);
        }
        .ai-icon svg { width: 23px; height: 23px; }
        .ai-item h3 { font-size: 1.08rem; margin-bottom: 8px; font-weight: 600; }
        .ai-item p { color: rgba(255,255,255,0.55); font-size: 0.95rem; }

        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; position: relative; }
        .step { counter-increment: step; position: relative; }
        .step::before {
            content: counter(step, decimal-leading-zero);
            font-family: var(--serif); font-size: 2rem; color: var(--gold);
            display: grid; place-items: center; margin-bottom: 16px; line-height: 1;
            width: 58px; height: 58px; border-radius: 14px;
            background: rgba(201,169,110,0.1); border: 1px solid rgba(201,169,110,0.25);
        }
        .step h3 { font-size: 1.15rem; margin-bottom: 8px; font-weight: 600; }
        .step p { color: var(--muted); font-size: 0.95rem; }

        /* Pricing */
        .billing-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
        .billing-toggle {
            display: inline-flex; background: #fff; border: 1px solid var(--line);
            border-radius: 999px; padding: 4px; gap: 2px;
        }
        .billing-toggle button {
            border: 0; background: transparent; padding: 8px 20px; border-radius: 999px;
            font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer;
            transition: background .2s, color .2s;
        }
        .billing-toggle button.active { background: var(--navy); color: #fff; }
        .billing-hint {
            display: none; align-items: center; gap: 6px;
            font-size: 0.82rem; font-weight: 600; color: var(--green);
            background: rgba(196, 98, 59,0.1); border-radius: 999px; padding: 6px 12px;
        }
        .billing-hint.show { display: inline-flex; }
        .plans {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
        }
        .plan {
            background: #fff; border: 1px solid var(--line); border-radius: 18px;
            padding: 30px 26px; display: flex; flex-direction: column; gap: 14px;
            transition: border-color .2s, transform .2s, box-shadow .2s; position: relative;
        }
        .plan:hover { border-color: rgba(201,169,110,0.55); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26,26,46,0.07); }
        .plan.featured {
            border-color: var(--gold); border-width: 1.5px;
            box-shadow: 0 22px 50px rgba(26,26,46,0.12);
        }
        .plan-badge {
            position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
            background: var(--gold); color: #fff; font-size: 0.72rem; font-weight: 700;
            letter-spacing: 0.06em; text-transform: uppercase;
            padding: 6px 14px; border-radius: 999px; white-space: nowrap;
            box-shadow: 0 6px 16px rgba(201,169,110,0.4);
        }
        .plan-name { font-family: var(--serif); font-size: 1.5rem; }
        .plan-desc { color: var(--muted); font-size: 0.9rem; min-height: 2.6em; }
        .plan-price { display: flex; align-items: baseline; gap: 1px; letter-spacing: -0.02em; }
        .plan-price .currency { font-size: 1.3rem; font-weight: 600; align-self: flex-start; margin-top: 6px; color: var(--ink); }
        .plan-price .amount { font-size: 2.6rem; font-weight: 700; }
        .plan-price .period { font-size: 0.95rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
        .plan-limits { list-style: none; display: grid; gap: 11px; font-size: 0.92rem; color: var(--ink); flex: 1; margin: 6px 0; }
        .plan-limits li { display: flex; align-items: center; gap: 9px; }
        .plan-limits li svg { width: 17px; height: 17px; color: var(--green); flex: none; }
        .plan .btn { width: 100%; margin-top: 8px; }
        .pricing-note { margin-top: 30px; color: var(--muted); font-size: 0.9rem; text-align: center; }

        /* Two columns: the heading holds the left rail while the questions
           fill the right. A single 760px list inside the 1120px shell left a
           wide empty gutter and stranded everything against the left edge. */
        #faq .shell {
            display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
            gap: 72px; align-items: start;
        }
        #faq .section-head { margin-bottom: 0; position: sticky; top: 104px; }
        #faq .section-title { max-width: 12ch; margin-bottom: 0; }

        .faq-list { display: grid; gap: 0; max-width: none; }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item:first-child { border-top: 1px solid var(--line); }
        .faq-item summary {
            list-style: none; cursor: pointer; font-weight: 600; font-size: 1.05rem;
            display: flex; justify-content: space-between; gap: 24px; align-items: center;
            padding: 24px 4px; transition: color .18s ease;
        }
        .faq-item summary:hover { color: var(--gold); }
        .faq-item summary:focus-visible {
            outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        /* Round token so the control reads as a button rather than a stray glyph
           sitting far from its question. */
        .faq-item summary::after {
            content: '+'; font-family: var(--serif); font-size: 1.25rem; color: var(--gold);
            line-height: 1; flex: none; width: 32px; height: 32px; border-radius: 50%;
            display: grid; place-items: center; background: rgba(201,169,110,.10);
            transition: background .18s ease, color .18s ease;
        }
        .faq-item summary:hover::after { background: rgba(201,169,110,.22); }
        .faq-item[open] summary { color: var(--gold); }
        .faq-item[open] summary::after { content: '−'; background: rgba(201,169,110,.22); }
        .faq-item p {
            margin: -6px 4px 24px; color: var(--muted); font-size: 0.97rem;
            line-height: 1.65; max-width: 62ch;
        }

        @media (max-width: 900px) {
            #faq .shell { grid-template-columns: 1fr; gap: 28px; }
            #faq .section-head { position: static; }
            #faq .section-title { max-width: 18ch; }
        }

        .final-cta {
            background: linear-gradient(135deg, var(--navy) 0%, #123328 100%);
            color: #fff; text-align: center; position: relative; overflow: hidden;
        }
        .final-cta::before {
            content: ''; position: absolute; inset: auto -20% -40% auto; width: 50%; height: 80%;
            background: radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%);
            pointer-events: none;
        }
        .final-cta .section-title { max-width: none; margin-inline: auto; }
        .final-cta .section-sub { margin-inline: auto; color: rgba(255,255,255,0.6); }
        .final-cta .btn { margin-top: 8px; position: relative; }

        footer {
            background: #0A1E17; color: rgba(255,255,255,0.65); padding: 60px 0 32px;
            font-size: 0.9rem;
        }
        .footer-grid {
            display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 40px; margin-bottom: 40px;
        }
        .footer-brand {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--serif); color: #fff; font-size: 1.35rem; margin-bottom: 12px;
            text-decoration: none; transition: color .2s;
        }
        .footer-brand:hover { color: var(--gold); }
        .footer-contact { margin-top: 10px; font-size: 0.88rem; color: rgba(255,255,255,0.55); }
        .footer-contact a { color: rgba(255,255,255,0.7); }
        .footer-contact a:hover { color: var(--gold); }
        .footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
        .footer-social a { color: rgba(255,255,255,0.55); font-size: 0.85rem; font-weight: 500; }
        .footer-social a:hover { color: var(--gold); }
        .footer-brand .brand-logo { width: 28px; height: 28px; }
        .footer-col h4 {
            color: #fff; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
            margin-bottom: 14px; font-weight: 600;
        }
        .footer-col a { display: block; padding: 5px 0; color: rgba(255,255,255,0.55); transition: color .2s; }
        .footer-col a:hover { color: var(--gold); }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px;
            display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
            font-size: 0.82rem; color: rgba(255,255,255,0.4);
        }
        .footer-bottom a { transition: color .2s; }
        .footer-bottom a:hover { color: var(--gold); }

        @media (max-width: 900px) {
            .features-grid, .ai-grid, .steps, .plans, .footer-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .nav-actions .lang, .nav-actions .btn { display: none; }
            .nav-toggle { display: inline-flex; }
            .plans { grid-template-columns: 1fr; max-width: 420px; }
            .plan.featured { order: -1; }
            .hero { min-height: auto; padding-top: 128px; padding-bottom: 72px; }
        }
        @media (max-width: 640px) {
            .shell { width: calc(100% - 32px); }
            section { padding: 68px 0; }
            .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; }
            .js .reveal { opacity: 1; transform: none; }
        }

/* ── Stats band (under hero) ─────────────────────────── */
.stats-band { padding-top: 0; padding-bottom: 0; }
.stats-row {
    margin-top: -42px; position: relative; z-index: 5;
    background: var(--white); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 26px 60px -34px rgba(12,24,18,.35);
    display: grid; grid-template-columns: repeat(5, 1fr);
}
.stat { text-align: center; padding: 24px 14px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-value { font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--gold); display: block; }
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 8px; display: block; line-height: 1.35; }
@media (max-width: 820px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .stat { border-bottom: 1px solid var(--line); }
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-last-child(-n+1) { border-bottom: 0; }
}

/* ── Product showcase (screenshots) ──────────────────── */
.showcase { background: var(--cream); }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shot { margin: 0; }
.shot-frame {
    border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
    background: var(--navy); box-shadow: 0 30px 60px -34px rgba(12,24,18,.45);
    transition: transform .3s ease, box-shadow .3s ease;
}
.shot:hover .shot-frame { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(12,24,18,.5); }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 16px; }
.shot figcaption strong { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--navy); margin-bottom: 4px; }
.shot figcaption span { font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) { .showcase-grid { grid-template-columns: 1fr; } }

/* ── Everything included (full toolkit) ──────────────── */
.included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.included-col { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; }
.included-col h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); margin-bottom: 15px; }
.included-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.included-col li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.included-col li svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }
@media (max-width: 980px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .included-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   LX — redesigned landing (editorial). New classes; supersedes the
   older section styles above. Uses the theme tokens (--navy=ink,
   --gold=terracotta, --cream=sand, --serif=Playfair, --sans=Jakarta).
   ═══════════════════════════════════════════════════════════════ */
.lx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 13px; border-radius: 100px;
    color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.lx-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lx-eyebrow-light { color: var(--gold-soft); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

.lx-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.98rem;
    padding: 14px 26px; border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.lx-btn-primary { background: var(--gold); color: #fff; box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--gold) 75%, transparent); }
.lx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--gold) 80%, transparent); }
.lx-btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.lx-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Browser-frame mockup */
.lx-window { border-radius: 14px; overflow: hidden; background: var(--navy);
    box-shadow: 0 44px 90px -34px rgba(30,20,12,.55), 0 8px 24px -12px rgba(30,20,12,.3); }
.lx-window-bar { display: flex; gap: 7px; padding: 11px 15px; background: color-mix(in srgb, var(--navy) 82%, #000); }
.lx-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.lx-window-bar span:first-child { background: #E0735A; }
.lx-window-bar span:nth-child(2) { background: #D8A24A; }
.lx-window img { display: block; width: 100%; height: auto; }

/* Hero */
.lx-hero { position: relative; overflow: hidden; background: var(--cream); padding: clamp(64px,8vw,110px) 0 clamp(56px,7vw,88px); }
.lx-hero-glow { position: absolute; top: -30%; right: -12%; width: 65%; height: 150%; pointer-events: none;
    background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%); }
.lx-hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(28px,5vw,64px); align-items: center; position: relative; }
.lx-hero-copy { max-width: 560px; }
.lx-hero-title { font-family: var(--serif); font-size: clamp(2.5rem,5vw,4.2rem); line-height: 1.04; letter-spacing: -0.015em; color: var(--navy); margin: 22px 0 18px; }
.lx-hero-sub { font-size: clamp(1.05rem,1.35vw,1.2rem); line-height: 1.6; color: var(--muted); max-width: 500px; }
.lx-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.lx-hero-trust { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.lx-hero-trust svg { width: 16px; height: 16px; color: var(--green); }
.lx-hero-media .lx-window { transform: perspective(1500px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; }

/* Stats strip */
.lx-strip { background: var(--navy); }
.lx-strip-row { display: grid; grid-template-columns: repeat(5,1fr); padding: 30px 0; }
.lx-stat { text-align: center; padding: 6px 14px; border-right: 1px solid rgba(255,255,255,.1); }
.lx-stat:last-child { border-right: 0; }
.lx-stat-v { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--gold-soft); }
.lx-stat-l { display: block; font-size: 0.78rem; color: rgba(255,255,255,.6); margin-top: 8px; }

/* Feature rows (alternating) */
.lx-rows { background: var(--cream); padding: clamp(20px,3vw,40px) 0 clamp(50px,6vw,80px); }
.lx-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; padding: clamp(38px,5vw,60px) 0; }
.lx-row + .lx-row { border-top: 1px solid var(--line); }
.lx-row-rev .lx-row-media { order: 2; }
.lx-row-copy { max-width: 480px; }
.lx-row-title { font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.12; color: var(--navy); margin: 14px 0 14px; }
.lx-row-desc { font-size: 1.05rem; line-height: 1.62; color: var(--muted); margin-bottom: 22px; }
.lx-row-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lx-row-points li { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; font-weight: 500; color: var(--navy); }
.lx-row-points li svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* AI band (dark) */
.lx-ai { background: var(--navy); color: #fff; padding: clamp(60px,8vw,100px) 0; }
.lx-ai-head { max-width: 640px; margin-bottom: clamp(30px,4vw,48px); }
.lx-ai-title { font-family: var(--serif); font-size: clamp(2rem,3.4vw,3rem); line-height: 1.08; color: #fff; margin: 16px 0 12px; }
.lx-ai-sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.65); }
.lx-ai-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 32px; }
.lx-ai-item { display: flex; gap: 14px; padding: 16px 18px; border-radius: 13px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.lx-ai-item:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: rgba(255,255,255,.045); transform: translateY(-2px); }
.lx-ai-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 20%, transparent); }
.lx-ai-ic svg { width: 20px; height: 20px; }
.lx-ai-item h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 3px; }
.lx-ai-item p { font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,.6); }

/* Everything included */
.lx-inc { background: var(--cream); padding: clamp(60px,8vw,100px) 0; }
.lx-inc-head { max-width: 640px; margin-bottom: clamp(28px,4vw,44px); }
.lx-inc-title { font-family: var(--serif); font-size: clamp(2rem,3.4vw,2.8rem); line-height: 1.1; color: var(--navy); margin: 14px 0 12px; }
.lx-inc-sub { font-size: 1.05rem; color: var(--muted); line-height: 1.6; }
.lx-inc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.lx-inc-col { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.lx-inc-col h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); margin-bottom: 16px; }
.lx-inc-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lx-inc-col li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; color: var(--ink); line-height: 1.4; }
.lx-inc-col li svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }

@media (max-width: 980px) {
    .lx-ai-grid { grid-template-columns: 1fr; }
    .lx-inc-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
    .lx-hero-grid { grid-template-columns: 1fr; }
    .lx-hero-media .lx-window { transform: none; }
    .lx-row, .lx-row-rev { grid-template-columns: 1fr; gap: 22px; }
    .lx-row-rev .lx-row-media { order: 0; }
    .lx-strip-row { grid-template-columns: repeat(2,1fr); gap: 22px 0; }
    .lx-stat { border-right: 0; }
}
@media (max-width: 520px) { .lx-inc-grid { grid-template-columns: 1fr; } }

/* AI band — add depth (more attractive) */
.lx-ai { position: relative; overflow: hidden; }
.lx-ai::before { content: ''; position: absolute; top: -30%; left: -8%; width: 55%; height: 150%; pointer-events: none;
    background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 62%); }
.lx-ai::after { content: ''; position: absolute; bottom: -40%; right: -10%; width: 45%; height: 130%; pointer-events: none;
    background: radial-gradient(circle at 60% 50%, color-mix(in srgb, var(--gold-soft) 12%, transparent), transparent 60%); }
.lx-ai-inner { position: relative; z-index: 1; }

/* FAQ — two-column, sticky heading + branded accordion */
.lx-faq { background: var(--white); padding: clamp(60px,8vw,100px) 0; }
.lx-faq-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px,5vw,72px); align-items: start; }
.lx-faq-aside { position: sticky; top: 100px; }
.lx-faq-title { font-family: var(--serif); font-size: clamp(1.9rem,3.2vw,2.7rem); line-height: 1.1; color: var(--navy); margin: 14px 0 12px; }
.lx-faq-sub { font-size: 1.02rem; color: var(--muted); line-height: 1.6; margin-bottom: 18px; max-width: 340px; }
.lx-faq-contact { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--gold); }
.lx-faq-contact svg { width: 17px; height: 17px; }
.lx-faq-contact:hover { text-decoration: underline; }
.lx-faq-list { display: flex; flex-direction: column; gap: 12px; }
.lx-faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--cream); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.lx-faq-item[open] { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); box-shadow: 0 16px 34px -22px rgba(30,20,12,.28); }
.lx-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
    padding: 20px 22px; font-family: var(--serif); font-size: 1.12rem; color: var(--navy); }
.lx-faq-item summary::-webkit-details-marker { display: none; }
.lx-faq-ic { position: relative; flex: none; width: 22px; height: 22px; }
.lx-faq-ic::before, .lx-faq-ic::after { content: ''; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.lx-faq-ic::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.lx-faq-ic::after { top: 3px; left: 10px; width: 2px; height: 16px; }
.lx-faq-item[open] .lx-faq-ic::after { transform: rotate(90deg); opacity: 0; }
.lx-faq-a { padding: 0 22px 22px; }
.lx-faq-a p { font-size: 0.98rem; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 820px) { .lx-faq-grid { grid-template-columns: 1fr; } .lx-faq-aside { position: static; } }

/* Final CTA — bold terracotta-lit band */
.lx-cta { background: var(--navy); padding: clamp(64px,9vw,110px) 0; position: relative; overflow: hidden; }
.lx-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 120% at 80% 15%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 60%); }
.lx-cta-inner { position: relative; z-index: 1; max-width: 720px; text-align: center; margin: 0 auto; }
.lx-cta-title { font-family: var(--serif); font-size: clamp(2.1rem,4vw,3.4rem); line-height: 1.08; color: #fff; margin-bottom: 16px; }
.lx-cta-sub { font-size: clamp(1.02rem,1.4vw,1.18rem); line-height: 1.6; color: rgba(255,255,255,.72); margin-bottom: 30px; }
.lx-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lx-cta-primary { background: var(--gold); color: #fff; box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--gold) 80%, transparent); }
.lx-cta-primary:hover { transform: translateY(-2px); }
.lx-cta-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.lx-cta-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* ── New brand mark (concierge bell) + wordmark ───────── */
.lx-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.3rem; color: var(--navy); }
.lx-brand-name { font-weight: 500; letter-spacing: .01em; }
.lx-brand-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
    background: linear-gradient(140deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #6f2f12));
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
.lx-brand-mark svg { width: 21px; height: 21px; }
.lx-brand-mark--soft { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--gold-soft); box-shadow: none; }
.lx-brand-img { border-radius: 10px; }

/* ── Floating, blurred header ─────────────────────────── */
.lx-nav { position: sticky; top: 0; z-index: 50; padding-top: 14px; }
.lx-nav-inner { display: flex; align-items: center; gap: 24px;
    background: color-mix(in srgb, var(--cream) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--navy) 9%, transparent); border-radius: 16px; padding: 9px 12px 9px 18px;
    box-shadow: 0 14px 34px -22px rgba(30,20,12,.35); }
.lx-nav-links { display: flex; gap: 4px; margin: 0 auto; }
.lx-nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--navy); padding: 8px 14px; border-radius: 9px; transition: background .15s ease, color .15s ease; }
.lx-nav-links a:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); color: var(--gold); }
.lx-nav-actions { display: flex; align-items: center; gap: 14px; }
.lx-nav-signin { font-size: 0.92rem; font-weight: 600; color: var(--navy); }
.lx-nav-signin:hover { color: var(--gold); }
.lx-nav-cta { padding: 10px 20px; border-radius: 11px; font-size: 0.9rem; }
.lx-nav .lx-lang > summary { color: var(--navy); }
.lx-nav-toggle { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--navy); align-items: center; justify-content: center; cursor: pointer; }
.lx-nav-toggle svg { width: 20px; height: 20px; }
.lx-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lx-mobile-actions .lx-btn { width: 100%; }
@media (max-width: 880px) {
    .lx-nav-links, .lx-nav-signin { display: none; }
    .lx-nav-toggle { display: inline-flex; }
    .lx-nav-actions { margin-left: auto; }
}
/* The mobile menu repeats the CTA, so small phones keep just brand, language and menu. */
@media (max-width: 480px) {
    .lx-nav-inner { gap: 12px; }
    .lx-nav-actions { gap: 10px; }
    .lx-nav-actions .lx-nav-cta { display: none; }
}

/* ── Footer (premium editorial) ───────────────────────── */
.lx-footer { position: relative; overflow: hidden; color: rgba(255,255,255,.72); padding: clamp(64px,8vw,104px) 0 30px;
    background:
        radial-gradient(130% 100% at 12% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--navy) 97%, #000), color-mix(in srgb, var(--navy) 85%, #000)); }
.lx-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), color-mix(in srgb, var(--gold) 45%, var(--gold-soft)), transparent); }
.lx-footer .shell { position: relative; }
.lx-footer-top { display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: 48px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,.09); }
.lx-footer-brand-col { max-width: 380px; }
.lx-footer .lx-brand { font-size: 1.5rem; color: #fff; }
.lx-footer .lx-brand-name { color: #fff; }
.lx-footer .lx-brand-mark { width: 44px; height: 44px; }
.lx-footer .lx-brand-mark svg { width: 25px; height: 25px; }
.lx-footer-tag { margin: 20px 0 18px; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 330px; }
.lx-footer-contact { display: flex; flex-direction: column; gap: 4px; }
.lx-footer-contact a { color: var(--gold-soft); font-size: 0.92rem; width: fit-content; }
.lx-footer-contact a:hover { text-decoration: underline; }
.lx-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7); transition: all .18s ease; }
.lx-footer-social a:hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); transform: translateY(-2px); }
.lx-footer-col h4 { font-family: var(--serif); font-size: 1.12rem; color: #fff; margin-bottom: 18px; }
.lx-footer-col a { display: block; font-size: 0.94rem; color: rgba(255,255,255,.56); padding: 7px 0; width: fit-content; transition: color .16s ease, transform .16s ease; }
.lx-footer-col a:hover { color: var(--gold-soft); transform: translateX(3px); }
.lx-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding-top: 26px; font-size: 0.85rem; color: rgba(255,255,255,.45); }
@media (max-width: 820px) { .lx-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .lx-footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 520px) { .lx-footer-top { grid-template-columns: 1fr; } }

/* ── Colourful accent palette (toggle from Appearance) ── */
:root { --c1: #C4623B; --c2: #6E8B6A; --c3: #4E7A99; --c4: #8E5572; --c5: #C4822A; }

/* Everything-included: each column gets its own hue + colour-topped card */
.lx-colorful .lx-inc-col { border-top-width: 3px; }
.lx-colorful .lx-inc-col:nth-child(1) { border-top-color: var(--c1); }
.lx-colorful .lx-inc-col:nth-child(2) { border-top-color: var(--c2); }
.lx-colorful .lx-inc-col:nth-child(3) { border-top-color: var(--c3); }
.lx-colorful .lx-inc-col:nth-child(4) { border-top-color: var(--c4); }
.lx-colorful .lx-inc-col:nth-child(1) h3, .lx-colorful .lx-inc-col:nth-child(1) li svg { color: var(--c1); }
.lx-colorful .lx-inc-col:nth-child(2) h3, .lx-colorful .lx-inc-col:nth-child(2) li svg { color: var(--c2); }
.lx-colorful .lx-inc-col:nth-child(3) h3, .lx-colorful .lx-inc-col:nth-child(3) li svg { color: var(--c3); }
.lx-colorful .lx-inc-col:nth-child(4) h3, .lx-colorful .lx-inc-col:nth-child(4) li svg { color: var(--c4); }

/* Stats strip (dark): lift each figure to a lighter hue */
.lx-colorful .lx-strip .lx-stat:nth-child(1) .lx-stat-v { color: color-mix(in srgb, var(--c1) 60%, white); }
.lx-colorful .lx-strip .lx-stat:nth-child(2) .lx-stat-v { color: color-mix(in srgb, var(--c2) 62%, white); }
.lx-colorful .lx-strip .lx-stat:nth-child(3) .lx-stat-v { color: color-mix(in srgb, var(--c3) 62%, white); }
.lx-colorful .lx-strip .lx-stat:nth-child(4) .lx-stat-v { color: color-mix(in srgb, var(--c4) 62%, white); }
.lx-colorful .lx-strip .lx-stat:nth-child(5) .lx-stat-v { color: color-mix(in srgb, var(--c5) 62%, white); }

/* Feature rows: alternate eyebrow hues + matching bullet ticks */
.lx-colorful .lx-rows .lx-row:nth-child(1) .lx-eyebrow { color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, transparent); border-color: color-mix(in srgb, var(--c1) 26%, transparent); }
.lx-colorful .lx-rows .lx-row:nth-child(2) .lx-eyebrow { color: var(--c3); background: color-mix(in srgb, var(--c3) 10%, transparent); border-color: color-mix(in srgb, var(--c3) 26%, transparent); }
.lx-colorful .lx-rows .lx-row:nth-child(3) .lx-eyebrow { color: var(--c4); background: color-mix(in srgb, var(--c4) 10%, transparent); border-color: color-mix(in srgb, var(--c4) 26%, transparent); }
.lx-colorful .lx-rows .lx-row:nth-child(1) .lx-row-points li svg { color: var(--c1); }
.lx-colorful .lx-rows .lx-row:nth-child(2) .lx-row-points li svg { color: var(--c3); }
.lx-colorful .lx-rows .lx-row:nth-child(3) .lx-row-points li svg { color: var(--c4); }

/* AI band (dark): cycle icon tiles through the palette */
.lx-colorful .lx-ai-item:nth-child(5n+1) .lx-ai-ic { color: color-mix(in srgb, var(--c1) 62%, white); background: color-mix(in srgb, var(--c1) 22%, transparent); }
.lx-colorful .lx-ai-item:nth-child(5n+2) .lx-ai-ic { color: color-mix(in srgb, var(--c2) 62%, white); background: color-mix(in srgb, var(--c2) 22%, transparent); }
.lx-colorful .lx-ai-item:nth-child(5n+3) .lx-ai-ic { color: color-mix(in srgb, var(--c3) 62%, white); background: color-mix(in srgb, var(--c3) 22%, transparent); }
.lx-colorful .lx-ai-item:nth-child(5n+4) .lx-ai-ic { color: color-mix(in srgb, var(--c4) 62%, white); background: color-mix(in srgb, var(--c4) 22%, transparent); }
.lx-colorful .lx-ai-item:nth-child(5n+5) .lx-ai-ic { color: color-mix(in srgb, var(--c5) 62%, white); background: color-mix(in srgb, var(--c5) 22%, transparent); }

/* ── Quick palette switcher (front) ───────────────────── */
.lx-switch { position: fixed; top: 104px; right: 0; z-index: 90; }
.lx-switch-btn { width: 50px; height: 50px; border-radius: 15px 0 0 15px; border: 1px solid var(--line); border-right: 0;
    background: linear-gradient(180deg, var(--white), var(--cream)); color: var(--gold); display: grid; place-items: center; cursor: pointer;
    box-shadow: -12px 8px 30px -16px rgba(30,20,12,.45); transition: transform .2s ease, box-shadow .2s ease; }
.lx-switch-btn:hover { transform: translateX(-3px); box-shadow: -16px 10px 36px -16px rgba(30,20,12,.5); }
.lx-switch-btn svg { width: 23px; height: 23px; }
.lx-switch.open .lx-switch-btn { color: var(--white); background: var(--gold); border-color: var(--gold); }
.lx-switch-panel { position: absolute; right: 62px; top: -6px; transform-origin: top right; transform: scale(.96) translateX(6px); opacity: 0; pointer-events: none;
    width: 236px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
    box-shadow: 0 30px 60px -24px rgba(30,20,12,.45), 0 6px 16px -10px rgba(30,20,12,.25); transition: opacity .2s ease, transform .2s ease; }
.lx-switch-panel::after { content: ''; position: absolute; right: -7px; top: 26px; width: 13px; height: 13px; background: var(--white);
    border-right: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.lx-switch.open .lx-switch-panel { opacity: 1; pointer-events: auto; transform: scale(1) translateX(0); }
.lx-switch-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
    padding-bottom: 11px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.lx-switch-grid { display: flex; flex-direction: column; gap: 3px; }
.lx-switch-sw { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; position: relative; }
.lx-switch-sw:hover { background: var(--cream); }
.lx-switch-sw.is-on { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.lx-switch-sw.is-on::after { content: ''; position: absolute; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.lx-switch-dots { display: flex; }
.lx-switch-dots span { width: 17px; height: 17px; border-radius: 50%; margin-left: -6px; box-shadow: 0 0 0 2.5px var(--white); }
.lx-switch-dots span:first-child { margin-left: 0; }
.lx-switch-name { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
@media (max-width: 600px) {
    .lx-switch { top: auto; bottom: 18px; }
    .lx-switch-btn { border-radius: 14px; border-right: 1px solid var(--line); }
    .lx-switch-panel { right: 0; bottom: 60px; top: auto; transform: scale(.96) translateY(6px); }
    .lx-switch-panel::after { display: none; }
    .lx-switch.open .lx-switch-panel { transform: scale(1) translateY(0); }
}

/* ── Global finesse (front) ─────────────────────────────── */
::selection { background: color-mix(in srgb, var(--gold) 26%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 62%, transparent); background-clip: padding-box; }

/* ============================================================
   Premium polish — LawyerPara "Ink & Champagne" legal identity
   ============================================================ */
body { letter-spacing: -0.005em; }
::selection { background: color-mix(in srgb, var(--gold) 26%, transparent); }

/* Nav — refined glass */
.lx-nav { background: rgba(12,16,32,0.72); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border-bottom: 1px solid rgba(255,255,255,0.07); }
.lx-brand-name { font-weight: 500; letter-spacing: 0.01em; }
.lx-brand-mark { box-shadow: 0 6px 18px rgba(176,141,87,0.35); }
.lx-nav-signin { color: rgba(255,255,255,0.82); font-weight: 500; }
.lx-nav-signin:hover { color: #fff; }
.lx-nav-links a { color: rgba(255,255,255,0.72); font-weight: 500; }
.lx-nav-links a:hover { color: #fff; }

/* Eyebrows — refined small caps */
.lx-eyebrow { background: rgba(176,141,87,0.10); border: 1px solid rgba(176,141,87,0.30); color: color-mix(in srgb, var(--gold) 78%, #5a4623); letter-spacing: 0.14em; font-weight: 600; }
.lx-eyebrow-light { color: var(--gold-soft); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 600; color: var(--gold); }

/* Buttons — premium depth + lift */
.lx-btn, .btn { border-radius: 100px; letter-spacing: -0.005em; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background .28s ease; }
.lx-btn-primary, .btn-gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 90%, #fff) 0%, var(--gold) 55%, color-mix(in srgb, var(--gold) 88%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 26px -10px color-mix(in srgb, var(--gold) 62%, transparent);
}
.lx-btn-primary:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 20px 40px -14px color-mix(in srgb, var(--gold) 68%, transparent); }
.lx-btn-ghost { border: 1.5px solid var(--line); color: var(--navy); }
.lx-btn-ghost:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: rgba(176,141,87,0.06); color: var(--navy); }
.btn-outline:hover { background: rgba(176,141,87,0.06); }

/* Hero — grander, more editorial */
.lx-hero { background: linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%); border-bottom: 1px solid var(--line); }
.lx-hero-title { font-size: clamp(2.7rem, 5.3vw, 4.7rem); line-height: 1.015; letter-spacing: -0.028em; font-weight: 400; margin: 22px 0 20px; }
.lx-hero-sub { font-size: clamp(1.08rem, 1.3vw, 1.24rem); line-height: 1.62; color: var(--muted); }
.lx-hero-glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%); }
.lx-hero-media .lx-window { border-radius: 16px; border: 1px solid rgba(20,25,43,0.06); box-shadow: 0 44px 100px -34px rgba(20,25,43,0.55), 0 10px 28px -14px rgba(20,25,43,0.22); }
.lx-window-bar { background: #f4f2ee; }

/* Trust strip — refined dark band */
.lx-strip { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.lx-stat-v { font-weight: 500; letter-spacing: -0.02em; }
.lx-stat-l { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: rgba(255,255,255,0.55); }

/* Section titles — tighter, editorial */
.lx-row-title, .lx-ai-title, .section-title, .lx-inc-title, .lx-faq-title, .lx-cta-title { letter-spacing: -0.022em; font-weight: 400; }

/* Feature rows — refined media frame */
.lx-row-media .lx-window { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 66px -34px rgba(20,25,43,0.30); }

/* AI band — deeper, richer */
.lx-ai { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.lx-ai-item { border-radius: 16px; transition: transform .25s ease, border-color .25s, background .25s; }
.lx-ai-item:hover { transform: translateY(-3px); }

/* Pricing cards — hairline + soft depth */
.plan { border-radius: 20px; box-shadow: 0 1px 2px rgba(20,25,43,0.04), 0 20px 44px -30px rgba(20,25,43,0.22); transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -32px rgba(20,25,43,0.28); }
.plan.featured { box-shadow: 0 34px 74px -34px color-mix(in srgb, var(--gold) 42%, rgba(20,25,43,0.32)); }
.plan-name { font-weight: 400; }
.plan-badge { letter-spacing: 0.06em; }

/* Included / FAQ / CTA */
.lx-inc-col { border-radius: 18px; }
.lx-faq-item { border-radius: 14px; }
.lx-cta { background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 78%, var(--gold)) 100%); }

/* A touch more air on bare sections */
section { padding: clamp(76px, 9vw, 118px) 0; }

/* ============================================================
   Premium polish v2 — full-width header, compact stats, hovers
   ============================================================ */

/* 1) Full-width header (retire the floating pill) */
.lx-nav {
    padding-top: 0;
    background: color-mix(in srgb, var(--cream) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, transparent);
    box-shadow: 0 10px 30px -24px rgba(20,25,43,0.35);
}
.lx-nav-inner {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 14px 0;
}
.lx-brand-name { color: var(--navy); }
.lx-nav-links a { color: var(--navy); }
.lx-nav-links a:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lx-nav-signin { color: var(--navy); }
.lx-nav-signin:hover { color: var(--gold); }
.lx-nav .lx-lang > summary { color: var(--navy); border-color: color-mix(in srgb, var(--navy) 14%, transparent); }

/* 2) Compact stats strip */
.lx-strip-row { padding: 20px 0; }
.lx-stat { padding: 4px 14px; }
.lx-stat-v { font-size: 1.95rem; }
.lx-stat-l { margin-top: 5px; }
.lx-stat { transition: transform .25s ease; }
.lx-stat:hover { transform: translateY(-2px); }
.lx-stat:hover .lx-stat-v { color: color-mix(in srgb, var(--gold-soft) 70%, #fff); }

/* 3) Hover effects */
/* Product screenshots — lift, straighten, deepen shadow */
.lx-window { transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease; will-change: transform; }
.lx-hero-media .lx-window:hover {
    transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-8px) scale(1.012);
    box-shadow: 0 64px 130px -40px rgba(20,25,43,0.62), 0 12px 30px -14px rgba(20,25,43,0.28);
}
.lx-row-media .lx-window { transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease; }
.lx-row-media .lx-window:hover {
    transform: translateY(-8px) scale(1.012);
    box-shadow: 0 50px 100px -40px rgba(20,25,43,0.42);
}

/* Cards — cohesive lift */
.lx-ai-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.lx-inc-col { transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease; }
.lx-inc-col:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -32px rgba(20,25,43,0.22); }
.lx-faq-item { transition: background .2s ease, border-color .2s ease; }
.lx-faq-item:hover { border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); }

/* Feature-row bullet ticks — subtle pop on row hover */
.lx-row-points li { transition: transform .2s ease; }
.lx-row:hover .lx-row-points li { transform: translateX(2px); }

/* CTA buttons keep their lift; add a gentle press */
.lx-btn:active, .btn:active { transform: translateY(0) scale(0.99); }

/* Stats strip is a <section> — cancel the generic section padding so it's compact */
.lx-strip { padding: 0; }

/* Screenshot hover — a gentle tilt (instead of straightening) */
.lx-hero-media .lx-window:hover {
    transform: perspective(1500px) rotateY(-9deg) rotateX(3.5deg) rotateZ(-0.6deg) translateY(-10px) scale(1.02);
    box-shadow: 0 70px 140px -40px rgba(20,25,43,0.64), 0 14px 34px -14px rgba(20,25,43,0.30);
}
.lx-row-media .lx-window { transform-origin: center; }
.lx-row-media .lx-window:hover {
    transform: perspective(1400px) rotateY(-5deg) rotateX(2.5deg) translateY(-8px) scale(1.015);
    box-shadow: 0 56px 112px -40px rgba(20,25,43,0.46);
}

/* ───────────────────────────────────────────────────────────
   Signature features — the five that lead the pitch
   ─────────────────────────────────────────────────────────── */
.lx-spot {
    background:
        radial-gradient(900px 420px at 88% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%),
        linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
    padding: clamp(58px, 8vw, 104px) 0 clamp(50px, 7vw, 92px);
    border-bottom: 1px solid var(--line);
}
.lx-spot-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); }
.lx-spot-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.022em;
    font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08;
    color: var(--navy); margin: 16px 0 14px;
}
.lx-spot-sub { font-size: 1.06rem; line-height: 1.62; color: var(--muted); }

/* Shared bits */
.lx-spot-tag {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 82%, #4a3a1e);
    margin-bottom: 10px;
}
.lx-spot-num {
    font-family: var(--serif); font-size: 1.5rem; line-height: 1;
    color: color-mix(in srgb, var(--gold) 70%, transparent);
    font-feature-settings: "tnum" 1;
}
.lx-spot-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.lx-spot-points li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.95rem; line-height: 1.45; font-weight: 500; color: var(--ink);
}
.lx-spot-points li svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; }

/* ── Flagship card ── */
.lx-spot-lead {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(26px, 4vw, 56px); align-items: center;
    background: var(--white); border: 1px solid var(--line);
    border-radius: 24px; padding: clamp(26px, 3.4vw, 48px);
    box-shadow: 0 40px 90px -52px rgba(20, 25, 43, 0.38);
    margin-bottom: clamp(20px, 2.6vw, 30px);
    position: relative; overflow: hidden;
}
.lx-spot-lead::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 25%, transparent));
}
.lx-spot-lead-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lx-spot-flag {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 80%, #4a3a1e);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    padding: 5px 11px; border-radius: 999px;
}
.lx-spot-lead-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.12;
    color: var(--navy); margin-bottom: 14px;
}
.lx-spot-lead-desc { font-size: 1.02rem; line-height: 1.62; color: var(--muted); margin-bottom: 22px; }


/* ── The other four ── */
.lx-spot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
.lx-spot-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 18px;
    padding: clamp(22px, 2.4vw, 30px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lx-spot-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
    box-shadow: 0 32px 60px -38px rgba(20, 25, 43, 0.40);
}
.lx-spot-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lx-spot-ic {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent);
    transition: background .25s ease;
}
.lx-spot-ic svg { width: 21px; height: 21px; }
.lx-spot-card:hover .lx-spot-ic { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.lx-spot-num-sm { font-size: 1.7rem; color: color-mix(in srgb, var(--navy) 14%, transparent); }
.lx-spot-card-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.018em;
    font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.18;
    color: var(--navy); margin-bottom: 11px;
}
.lx-spot-card-desc { font-size: 0.95rem; line-height: 1.58; color: var(--muted); margin-bottom: 18px; }

@media (max-width: 900px) {
    .lx-spot-lead { grid-template-columns: 1fr; }
    .lx-spot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .lx-spot-lead, .lx-spot-card { border-radius: 16px; }
}

/* Colourful palettes tint the five in sequence */
.lx-colorful .lx-spot-lead::before { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 20%, transparent)); }
.lx-colorful .lx-spot-lead .lx-spot-tag { color: var(--c1); }
.lx-colorful .lx-spot-lead .lx-spot-points li svg { color: var(--c1); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(1) .lx-spot-ic { color: var(--c2); background: color-mix(in srgb, var(--c2) 13%, transparent); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(2) .lx-spot-ic { color: var(--c3); background: color-mix(in srgb, var(--c3) 13%, transparent); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(3) .lx-spot-ic { color: var(--c4); background: color-mix(in srgb, var(--c4) 13%, transparent); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(4) .lx-spot-ic { color: var(--c5); background: color-mix(in srgb, var(--c5) 13%, transparent); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(1) .lx-spot-tag, .lx-colorful .lx-spot-grid .lx-spot-card:nth-child(1) .lx-spot-points li svg { color: var(--c2); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(2) .lx-spot-tag, .lx-colorful .lx-spot-grid .lx-spot-card:nth-child(2) .lx-spot-points li svg { color: var(--c3); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(3) .lx-spot-tag, .lx-colorful .lx-spot-grid .lx-spot-card:nth-child(3) .lx-spot-points li svg { color: var(--c4); }
.lx-colorful .lx-spot-grid .lx-spot-card:nth-child(4) .lx-spot-tag, .lx-colorful .lx-spot-grid .lx-spot-card:nth-child(4) .lx-spot-points li svg { color: var(--c5); }

/* ============================================================
   Platform menus (Super Admin → Menus) + CMS pages (/page/{slug})
   ============================================================ */
.lx-nav-links { align-items: center; }
.lx-nav-links a.is-active { color: var(--gold); }
.lx-nav-drop { position: relative; }
.lx-nav-drop-btn { display: inline-flex; align-items: center; gap: 4px; }
.lx-nav-drop-btn svg { width: 14px; height: 14px; transition: transform .15s ease; }
.lx-nav-drop-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; z-index: 60;
    display: grid; gap: 2px; padding: 6px; border-radius: 12px; background: #fff;
    border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(20,25,43,.35);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* Bridges the gap so the pointer can travel from the button to the menu. */
.lx-nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.lx-nav-drop:hover .lx-nav-drop-menu, .lx-nav-drop:focus-within .lx-nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.lx-nav-drop:hover .lx-nav-drop-btn svg, .lx-nav-drop:focus-within .lx-nav-drop-btn svg { transform: rotate(180deg); }
.lx-nav-links .lx-nav-drop-menu a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.lx-mobile-group { display: block; padding-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lx-mobile .lx-mobile-sub { padding-left: 16px; }

/* Mobile menu, restyled for the light full-width header: it used to keep the old dark
   panel, inset inside the cream bar with its top-level links flush against the edge. It
   scrolls on its own because the header is sticky: a menu taller than the screen would
   otherwise hide its last links and the sign-in buttons. */
.lx-nav .lx-mobile.mobile-menu {
    gap: 0; padding: 4px 0 18px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: 1px solid color-mix(in srgb, var(--navy) 8%, transparent); border-bottom: 0;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
}
.lx-nav .lx-mobile.mobile-menu > a {
    display: block; color: var(--navy); font-size: 1rem; font-weight: 500;
    padding: 13px 4px; border-bottom: 1px solid var(--line); transition: color .15s ease;
}
.lx-nav .lx-mobile.mobile-menu > a:hover, .lx-nav .lx-mobile.mobile-menu > a.is-active { color: var(--gold); }
.lx-nav .lx-mobile.mobile-menu > a.lx-mobile-sub { padding-left: 20px; font-size: .95rem; }
.lx-nav .lx-mobile .lx-mobile-group { padding: 18px 4px 6px; border-bottom: 1px solid var(--line); }
.lx-nav .lx-mobile .lx-mobile-actions { margin-top: 16px; }
.lx-nav .lx-mobile .lx-mobile-actions .lx-btn { margin-top: 0; justify-content: center; }
@media (min-width: 881px) { .lx-nav .lx-mobile.mobile-menu { display: none; } }
/* The floating palette button would sit over the menu's buttons. */
body:has(.lx-mobile.mobile-menu.open) .lx-switch { display: none; }

.lx-page-hero { background: linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%); border-bottom: 1px solid var(--line); padding: clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px); }
.lx-page-hero-inner { max-width: 780px; }
.lx-page-title { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.lx-page-lead { margin-top: 16px; color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 62ch; }
.lx-page-main { background: #fff; padding: clamp(40px,6vw,80px) 0 clamp(64px,8vw,112px); }

.lx-prose { max-width: 780px; color: var(--ink); font-size: 1.02rem; line-height: 1.75; overflow-wrap: break-word; }
.lx-prose > * + * { margin-top: 1.1em; }
.lx-prose h2 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: 1.7rem; line-height: 1.25; margin-top: 1.9em; }
.lx-prose h3 { font-weight: 650; color: var(--navy); font-size: 1.2rem; line-height: 1.35; margin-top: 1.6em; }
.lx-prose h2:first-child, .lx-prose h3:first-child { margin-top: 0; }
.lx-prose ul, .lx-prose ol { padding-left: 1.4em; }
.lx-prose ul { list-style: disc; }
.lx-prose ol { list-style: decimal; }
.lx-prose li + li { margin-top: .4em; }
.lx-prose li::marker { color: var(--gold); }
.lx-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.lx-prose a:hover { color: var(--navy); }
.lx-prose strong { font-weight: 650; color: var(--navy); }
.lx-prose blockquote { border-left: 3px solid var(--gold); padding: .2em 0 .2em 1.1em; color: var(--muted); font-style: italic; }
.lx-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.lx-prose img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.lx-prose code { font-size: .9em; background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
.lx-prose pre { background: var(--navy); color: #fff; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.lx-prose pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Footer fits any number of menu columns (the grid above assumed two). */
.lx-footer-top { display: flex; flex-wrap: wrap; gap: 40px 36px; }
.lx-footer-brand-col { flex: 1.9 1 240px; }
.lx-footer-col { flex: 1 1 110px; max-width: 220px; }
@media (max-width: 820px) { .lx-footer-brand-col { flex-basis: 100%; max-width: none; } .lx-footer-top { gap: 32px; } }

/* ───────────────────────────────────────────────────────────
   Smart Forms hero: prompt → drafted document → signature → filed
   ─────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 901px) { .lx-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.lx-hero-copy { max-width: 640px; }
.lx-hero-title { font-size: clamp(2.5rem, 4.7vw, 4.1rem); }
.lx-hero-beat { display: block; }
.lx-btn-try { gap: 8px; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); color: color-mix(in srgb, var(--gold) 72%, var(--navy)); }
.lx-btn-ext { width: 16px; height: 16px; flex: none; }

.lx-hdoc { position: relative; padding: 18px 8px 34px 28px; min-height: 520px; }
.lx-hdoc-prompt {
    position: relative; z-index: 3; display: flex; gap: 12px; align-items: flex-start;
    max-width: 380px; margin-left: 12%;
    font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.45; color: var(--navy);
    background: rgba(255,255,255,0.92); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
    border-radius: 16px 16px 16px 4px; padding: 14px 18px;
    box-shadow: 0 18px 40px -26px rgba(20,25,43,0.35);
    animation: lx-hdoc-in .6s cubic-bezier(.2,.7,.3,1) .1s both;
}
.lx-hdoc-prompt svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 2px; }

.lx-hdoc-stack { position: relative; margin: -14px 0 0 12%; max-width: 470px; animation: lx-hdoc-rise .8s cubic-bezier(.2,.7,.3,1) .25s both; }
.lx-hdoc-back { position: absolute; inset: 0; border-radius: 10px; }
.lx-hdoc-back-1 { background: #FBF9F4; border: 1px solid var(--line); transform: rotate(4deg) translate(22px, 6px); }
.lx-hdoc-back-2 { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); transform: rotate(-5deg) translate(-26px, 18px); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--gold) 28%, transparent); }
.lx-hdoc-page {
    position: relative; z-index: 1; background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    padding: 30px 30px 24px; transform: rotate(-1.2deg);
    box-shadow: 0 40px 80px -40px rgba(20,25,43,0.45), 0 8px 20px -12px rgba(20,25,43,0.18);
}
.lx-hdoc-title { font-family: var(--serif); font-size: 1.28rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); line-height: 1.2; }
.lx-hdoc-firm { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 18px; }
.lx-hdoc-line { display: block; height: 6px; border-radius: 4px; margin-bottom: 9px; background: color-mix(in srgb, var(--navy) 11%, transparent); }
.lx-hdoc-line-short { width: 62%; }
.lx-hdoc-line-mid { width: 80%; }
.lx-hdoc-fields { margin: 16px 0 18px; display: grid; gap: 8px; }
.lx-hdoc-field { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 12px; align-items: center; }
.lx-hdoc-field dt { font-size: 0.76rem; color: var(--muted); }
.lx-hdoc-field dd {
    margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--navy);
    background: color-mix(in srgb, var(--gold) 16%, #fff); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 5px; padding: 4px 10px;
    animation: lx-hdoc-fill .5s ease both;
}
.lx-hdoc-field:nth-child(1) dd { animation-delay: .75s; }
.lx-hdoc-field:nth-child(2) dd { animation-delay: .9s; }
.lx-hdoc-field:nth-child(3) dd { animation-delay: 1.05s; }
.lx-hdoc-sign { margin-top: 16px; }
.lx-hdoc-ink { display: block; width: 150px; height: 44px; color: var(--navy); margin-bottom: 2px; }
.lx-hdoc-ink path { stroke-dasharray: 1; animation: lx-hdoc-draw .9s ease-in-out 1.2s both; }
.lx-hdoc-rule { display: block; height: 1px; width: 58%; background: color-mix(in srgb, var(--navy) 28%, transparent); }
.lx-hdoc-sign-label { display: block; margin-top: 7px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lx-hdoc-stamp {
    position: absolute; z-index: 2; right: -34px; bottom: -26px; display: flex; align-items: center; gap: 12px;
    background: #FFFDF8; border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 12px;
    padding: 12px 18px; transform: rotate(-4deg); max-width: 250px;
    font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--navy);
    box-shadow: 0 22px 44px -24px rgba(20,25,43,0.4);
    animation: lx-hdoc-stamp .45s cubic-bezier(.3,1.5,.5,1) 1.9s both;
}
.lx-hdoc-stamp strong { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 500; letter-spacing: 0.01em; }
.lx-hdoc-stamp-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--navy); }
.lx-hdoc-stamp-ic svg { width: 16px; height: 16px; }

@keyframes lx-hdoc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lx-hdoc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lx-hdoc-fill { from { background: transparent; color: transparent; } to { background: color-mix(in srgb, var(--gold) 16%, #fff); color: var(--navy); } }
@keyframes lx-hdoc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lx-hdoc-stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.25); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }

@media (max-width: 1100px) {
    .lx-hdoc-stamp { right: -8px; }
}
@media (max-width: 900px) {
    .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-hdoc { min-height: 0; padding: 8px 18px 40px; max-width: 460px; margin: 8px auto 0; }
    .lx-hdoc-stack { margin: 0 auto; }
    .lx-hdoc-stamp { right: -6px; bottom: -28px; }
}
@media (max-width: 767px) {
    .lx-hero-title { font-size: clamp(2.25rem, 9.5vw, 3rem); }
    .lx-hero-ctas { flex-direction: column; align-items: stretch; }
    .lx-hero-ctas .lx-btn { min-height: 48px; width: 100%; }
    .lx-hdoc-prompt, .lx-hdoc-back { display: none; }
    .lx-hdoc-page { transform: none; padding: 22px 20px 20px; max-height: 420px; overflow: hidden; }
    .lx-hdoc-title { font-size: 1.08rem; }
    .lx-hdoc-field { grid-template-columns: 1fr; gap: 4px; }
    .lx-hdoc-stamp { right: 8px; bottom: -22px; }
}

/* Flagship card as the Smart Forms workflow */
.lx-spot-flow-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; scroll-margin-top: 96px; }
.lx-spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.lx-spot-actions .lx-btn { gap: 8px; }
.lx-spot-docs { font-weight: 600; font-size: 0.95rem; color: var(--navy); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent); text-underline-offset: 4px; }
.lx-spot-docs:hover { color: var(--gold); }
.lx-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.lx-flow-step { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.lx-flow-shot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--white); }
.lx-flow-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lx-flow-copy { display: flex; gap: 12px; padding: 14px 16px 16px; }
.lx-flow-no {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--gold);
}
.lx-flow-copy h4 { font-size: 0.98rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; line-height: 1.3; }
.lx-flow-copy p { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.lx-colorful .lx-flow-no { background: var(--c1); }
@media (max-width: 900px) {
    .lx-spot-flow-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .lx-flow { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────
   /smart-forms: How Smart Forms work
   ─────────────────────────────────────────────────────────── */
.sfh-hero { background: linear-gradient(180deg, #FCFAF6 0%, var(--cream) 100%); border-bottom: 1px solid var(--line); padding: clamp(110px, 12vw, 150px) 0 clamp(40px, 5vw, 60px); }
.sfh-hero-inner { max-width: 880px; }
.sfh-title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.05; color: var(--navy); margin: 20px 0 16px; max-width: 18ch; }
.sfh-sub { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.62; color: var(--muted); max-width: 62ch; }
.sfh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 34px; }
.sfh-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sfh-nav a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 6px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--white);
    font-size: 0.9rem; font-weight: 600; color: var(--navy); transition: border-color .2s ease, transform .2s ease;
}
.sfh-nav a:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-1px); }
.sfh-nav-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; font-size: 0.8rem; }

.sfh-step { padding: clamp(56px, 7vw, 96px) 0; scroll-margin-top: 72px; }
.sfh-step + .sfh-step { border-top: 1px solid var(--line); }
.sfh-step:nth-of-type(even) { background: var(--white); }
.sfh-step-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sfh-step-rev .sfh-copy { order: 2; }
.sfh-step-no { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 80%, #4a3a1e); }
.sfh-step-title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; color: var(--navy); margin: 10px 0 14px; }
.sfh-step-body { font-size: 1.05rem; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.sfh-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.sfh-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.sfh-points li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--gold); }
.sfh-notify { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sfh-notify-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--white); }
.sfh-step:nth-of-type(even) .sfh-notify-card { background: var(--cream); }
.sfh-notify-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--navy); margin-bottom: 6px; }
.sfh-notify-card p { font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

/* Mock-up kit */
.sfh-mock { position: relative; }
.sfh-mock svg { width: 15px; height: 15px; flex: none; }
.sfh-win { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(20,25,43,0.42); }
.sfh-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f4f2ee; border-bottom: 1px solid var(--line); }
.sfh-win-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9d4ca; }
.sfh-win-bar span:first-child { background: #E0735A; } .sfh-win-bar span:nth-child(2) { background: #D8A24A; }
.sfh-win-bar b { margin-left: 8px; font-size: 0.78rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfh-win-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sfh-mini-h { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.sfh-mini { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.sfh-line { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--navy) 10%, transparent); margin: 6px 0; }
.sfh-line-short { width: 60%; }
.sfh-input { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; background: #fff; }
.sfh-textarea { font-size: 0.86rem; line-height: 1.5; color: var(--navy); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 10px; padding: 11px 12px; background: #fff; min-height: 84px; }
.sfh-caret { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: -2px; margin-left: 2px; animation: sfh-blink 1s steps(2) infinite; }
@keyframes sfh-blink { 50% { opacity: 0; } }
.sfh-row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.sfh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--gold); border-radius: 999px; padding: 8px 14px; }
.sfh-btn-ghost { background: #fff; color: #92400e; border: 1px solid #f5c26b; }
.sfh-btn-green { background: #2D7A4F; }
.sfh-btn-block { width: 100%; margin-top: 4px; }
.sfh-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sfh-path { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 0.84rem; color: var(--navy); }
.sfh-path-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, #fff); box-shadow: 0 0 0 1px var(--gold); }
.sfh-ic { color: var(--gold); font-style: normal; }
.sfh-tick { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; }
.sfh-tick svg { width: 11px; height: 11px; }

.sfh-builder { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; min-height: 300px; }
.sfh-palette, .sfh-props { padding: 14px 10px; background: #FAF8F4; display: flex; flex-direction: column; gap: 7px; }
.sfh-palette { border-right: 1px solid var(--line); }
.sfh-props { border-left: 1px solid var(--line); }
.sfh-chip { display: block; font-size: 0.74rem; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.sfh-chip-ghost { opacity: 0.35; border-style: dashed; }
.sfh-chip-drag { position: absolute; right: 18%; margin-top: -30px; transform: rotate(-4deg); border-color: var(--gold); box-shadow: 0 14px 28px -12px rgba(20,25,43,0.45); animation: sfh-drag 3.2s ease-in-out infinite; }
@keyframes sfh-drag { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(-26px, 8px) rotate(-2deg); } }
.sfh-doc { position: relative; padding: 16px 18px; }
.sfh-doc-title { font-family: var(--serif); font-size: 0.98rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.sfh-doc-firm { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sfh-doc-text { font-size: 0.8rem; line-height: 1.6; color: var(--ink); margin: 6px 0; }
.sfh-doc-text mark { background: color-mix(in srgb, var(--gold) 18%, #fff); color: var(--navy); font-weight: 600; border-radius: 4px; padding: 0 4px; }
.sfh-ph { display: inline-block; font-size: 0.72rem; font-weight: 600; color: color-mix(in srgb, var(--gold) 80%, #4a3a1e); background: color-mix(in srgb, var(--gold) 12%, #fff); border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 6px; padding: 1px 7px; }
.sfh-drop { position: relative; height: 2px; background: #3b82f6; margin: 14px 0; border-radius: 2px; }
.sfh-drop span { position: absolute; left: 0; top: -9px; font-size: 0.62rem; font-weight: 700; color: #fff; background: #3b82f6; border-radius: 4px; padding: 1px 6px; }
.sfh-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.sfh-toggle-row em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: #2D7A4F; background: #e8f3ec; border-radius: 999px; padding: 2px 8px; }
.sfh-switch { display: inline-block; width: 30px; height: 17px; border-radius: 999px; background: #E4DED4; position: relative; flex: none; }
.sfh-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.sfh-switch-on { background: #2D7A4F; } .sfh-switch-on::after { left: 15px; }
.sfh-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.sfh-tabs span { padding-bottom: 8px; }
.sfh-tab-on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); }
.sfh-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 0.74rem; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: #FAF8F4; }
.sfh-link b { color: var(--gold); letter-spacing: -1px; }
.sfh-link i { color: var(--navy); font-style: normal; display: inline-flex; }
.sfh-list { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.sfh-list .sfh-toggle-row { justify-content: flex-start; } .sfh-list .sfh-toggle-row > :last-child { margin-left: auto; }
.sfh-dot-live { width: 8px; height: 8px; border-radius: 50%; background: #2D7A4F; }
.sfh-share-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.sfh-share-icons span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }

.sfh-win-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
.sfh-fill { padding: 16px; display: flex; flex-direction: column; gap: 9px; border-right: 1px solid var(--line); }
.sfh-progress { height: 5px; border-radius: 4px; background: #efeae2; overflow: hidden; } .sfh-progress i { display: block; width: 60%; height: 100%; background: var(--gold); }
.sfh-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.sfh-sigpad { border: 1px dashed color-mix(in srgb, var(--navy) 25%, transparent); border-radius: 8px; padding: 8px; color: var(--navy); background: #FAF8F4; }
.sfh-sigpad svg { width: 110px; height: 34px; }
.sfh-sigpad path { stroke-dasharray: 1; animation: lx-hdoc-draw 1.6s ease-in-out .4s both; }
.sfh-paper { padding: 18px; background: #FCFBF8; }

.sfh-stack { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin-inline: auto; }
.sfh-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 26px 54px -34px rgba(20,25,43,0.4); }
.sfh-card-offset { margin-left: 12%; }
.sfh-card-title { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: var(--navy); margin: 4px 0 6px; }
.sfh-attach { display: inline-flex; margin-top: 8px; font-size: 0.74rem; font-weight: 700; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 7px; padding: 4px 9px; }
.sfh-badge { display: inline-flex; margin-top: 6px; font-size: 0.7rem; font-weight: 700; color: #fff; background: #C43A3A; border-radius: 999px; padding: 2px 9px; }

.sfh-check { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--navy); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.sfh-check i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #cfc8bb; display: grid; place-items: center; font-style: normal; }
.sfh-check-on { border-color: #f59e0b; background: #fffbeb; }
.sfh-check-on i { background: #d97706; border-color: #d97706; color: #fff; } .sfh-check-on i svg { width: 11px; height: 11px; }
.sfh-flagged { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; padding: 10px; border-radius: 10px; background: #fffbeb; box-shadow: 0 0 0 2px #f59e0b; font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.sfh-flagged em { font-style: normal; margin-left: 6px; font-size: 0.64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #92400e; background: #fde68a; border-radius: 999px; padding: 1px 7px; }
.sfh-final { margin-top: 0; }

@media (max-width: 900px) {
    .sfh-step-grid { grid-template-columns: minmax(0, 1fr); }
    .sfh-step-rev .sfh-copy { order: 0; }
    .sfh-notify { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sfh-builder { grid-template-columns: 100px minmax(0, 1fr); }
    .sfh-chip { overflow-wrap: anywhere; }
    .sfh-props { display: none; }
    .sfh-win-split { grid-template-columns: 1fr; }
    .sfh-fill { border-right: 0; border-bottom: 1px solid var(--line); }
    .sfh-paths { grid-template-columns: 1fr; }
    .sfh-card-offset { margin-left: 0; }
    .sfh-ctas .lx-btn { width: 100%; min-height: 48px; }
}

/* ── LawyerPara mark + wordmark (brand handbook ch. 2) ── */
.lx-brand-mark, .lx-footer .lx-brand-mark { background: none; border: 0; box-shadow: none; border-radius: 50%; }
.lx-brand-mark svg { width: 100%; height: 100%; display: block; }
.lx-footer .lx-brand-mark svg { width: 100%; height: 100%; }
.lx-brand-name b { font-weight: inherit; color: #C4623B; }
.lx-footer .lx-brand-name b { color: #E2D0AA; }
.lx-brand-zh { font-family: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif; font-weight: 600; letter-spacing: .04em; }
.lx-brand-sep { display: inline-block; width: 1px; height: .95em; margin: 0 .55em; vertical-align: -.1em; background: #B08D57; }
@media (max-width: 480px) { .lx-nav .lx-brand-sep, .lx-nav .lx-brand-en { display: none; } }