:root {
            /* ===== BRAND — the only lines to edit at rebrand ===== */
            --brand-dark:      #0b1c46;
            --brand-dark-2:    #10245a;
            --brand-deep:      #071230;
            --brand-accent:    #2563eb;
            --brand-accent-br: #3b82f6;
            --brand-accent-so: #60a5fa;
            --brand-tint:      #eff6ff;
            --brand-wash:      #f6f9ff;
            --cta:             #d64000;   /* v1.1 brightest orange passing AA (4.57:1) */
            --cta-dark:        #9a3412;   /* hover 7.31:1 */
            --cta-tint:        #fff3ec;
            --wa:              #25d366;   /* icon-only fill */
            --wa-solid:        #25d366;   /* = --wa. Label goes DARK, not white. */
            --wa-solid-dark:   #1daa61;

            /* ===== NEUTRALS ===== */
            --ink:    #0b1220;
            --text:   #41495a;
            --muted:  #5f6b80;   /* v1.1 darkened: passes on tinted surfaces */
            --border: #e7ecf6;
            --border-strong: #dce7f7;
            --surface: #f7faff;
            --white:  #ffffff;

            /* ===== TYPE SCALE ===== */
            --fs-xs:   12px;
            --fs-sm:   13px;
            --fs-base: 15px;
            --fs-md:   16px;
            --fs-lg:   18px;
            --fs-xl:   21px;
            --fs-h3:   24px;
            --fs-h2:   clamp(28px, 3.4vw, 42px);
            --fs-h1:   clamp(30px, 3.6vw, 44px);

            /* ===== RADIUS SCALE ===== */
            --r-xs:   6px;
            --r-sm:   12px;
            --r-md:   18px;
            --r-lg:   26px;
            --r-pill: 999px;
            --radius: 26px;

            /* ===== SPACING SCALE ===== */
            --s-1: 8px;  --s-2: 16px; --s-3: 24px;
            --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;

            /* ===== ELEVATION ===== */
            --shadow:       0 30px 80px rgba(11, 28, 70, 0.12);
            --shadow-soft:  0 18px 50px rgba(11, 28, 70, 0.08);
            --shadow-card:  0 24px 70px rgba(11, 28, 70, 0.13);

            /* ===== Z-INDEX SCALE ===== */
            --z-bg: 0; --z-base: 1; --z-raised: 2;
            --z-nav: 60; --z-float: 90; --z-sticky-cta: 100; --z-skip: 200;


            /* ===== DERIVED SHADES (auto-derive at rebrand) ===== */
            --accent-900: #1b3fa0;
            --accent-800: #1d4ed8;
            --accent-700: #2258d6;
            --accent-400: #4f8bff;
            --accent-300: #7aa9ff;
            --accent-250: #a8c7ff;
            --accent-200: #93c5fd;
            --accent-150: #bfd4ff;
            --accent-100: #bfdbfe;
            --accent-75:  #dbe7ff;
            --accent-50:  #dbeafe;
            --accent-25:  #eaf3ff;
            --violet-500: #6366f1;
            --violet-100: #e0e7ff;
            --violet-50:  #eef2ff;
            --tint-1: #eef6ff;
            --tint-2: #f1f6ff;
            --tint-3: #f2f7ff;
            --tint-4: #f4f7ff;
            --line-soft: #dfe7f3;
            --muted-soft: #93a3bd;
            /* CTA tints */
            --cta-900: #7c2d12;
            --cta-100: #fed7aa;
            --cta-50:  #ffedd5;
            --cta-25:  #fff7ed;
            --cta-10:  #fffaf5;
            /* state */
            --danger:    #b91c1c;
            --danger-bg: #fef2f2;
            --success: #137a45;

            /* ===== EXTRA TYPE STEPS ===== */
            --fs-2xl:     28px;
            --fs-display: 54px;
            --fs-mega:    138px;

            /* ===== LEGACY ALIASES (do not use in new CSS) ===== */
            --navy: var(--brand-dark);
            --navy-2: var(--brand-dark-2);
            --navy-deep: var(--brand-deep);
            --blue: var(--brand-accent);
            --blue-bright: var(--brand-accent-br);
            --blue-soft: var(--brand-accent-so);
            --blue-tint: var(--brand-tint);
            --blue-wash: var(--brand-wash);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; scroll-padding-top: 93px; overflow-x: clip; }

        body {
            font-family: Inter, Poppins, Arial, sans-serif;
            color: var(--text);
            background: var(--white);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        h1, h2, h3, .display { font-family: Inter, Poppins, Arial, sans-serif; }

        a { text-decoration: none; color: inherit; }

        :focus-visible {
            outline: 3px solid var(--brand-accent);   /* v1.1: rgba(.55) was 2.33:1, WCAG 2.4.11 needs 3:1 */
            outline-offset: 3px;
            border-radius:var(--r-xs);
        }

        .container { width: min(1280px, 92%); margin: auto; }
        .container-narrow { width: min(900px, 90%); margin: auto; }

        /* ---------------- Ambient moving background ---------------- */
        .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index:var(--z-bg); }

        /* Professional stroke icons */
        .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
        .auth-icon .ic { width: 24px; height: 24px; }
        .step-ico .ic { width: 23px; height: 23px; }
        .doc-mark .ic { width: 24px; height: 24px; }
        .eyebrow .ic { width: 15px; height: 15px; }
        .freshness .ic { width: 14px; height: 14px; }

        /* Very light drifting glow for calm sections */
        .soft-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index:var(--z-bg); }
        .soft-aurora .glow { position: absolute; border-radius:50%; filter: blur(90px); opacity: 0.42; will-change: transform; }
        .soft-aurora .g1 { width: 440px; height: 440px; background: var(--accent-50); top: -160px; left: -140px; animation: drift1 24s ease-in-out infinite; }
        .soft-aurora .g2 { width: 380px; height: 380px; background: var(--violet-100); bottom: -180px; right: -120px; animation: drift2 28s ease-in-out infinite; }
        .soft-aurora .g3 { width: 300px; height: 300px; background: var(--violet-50); top: 30%; left: 55%; opacity: 0.3; animation: drift3 32s ease-in-out infinite; }
        /* keep all section content above ambient layers */
        main section > .container { position: relative; z-index:var(--z-base); }
        .blob {
            position: absolute;
            border-radius:50%;
            filter: blur(80px);
            opacity: 0.5;
            will-change: transform;
        }
        .blob.b1 { width: 520px; height: 520px; background: var(--accent-100); opacity: 0.55; top: -220px; left: -180px; animation: drift1 22s ease-in-out infinite; }
        .blob.b2 { width: 440px; height: 440px; background: var(--accent-50); opacity: 0.6; top: -160px; right: -160px; animation: drift2 26s ease-in-out infinite; }
        .blob.b3 { width: 360px; height: 360px; background: var(--violet-100); opacity: 0.5; bottom: -220px; left: 40%; animation: drift3 30s ease-in-out infinite; }
        /* lighter blobs for dark sections */
        .aurora.on-dark .blob.b1 { background: var(--brand-accent-br); opacity: 0.42; }
        .aurora.on-dark .blob.b2 { background: var(--brand-accent-so); opacity: 0.30; }
        .aurora.on-dark .blob.b3 { background: var(--accent-800); opacity: 0.38; }

        @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } }
        @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, 30px) scale(1.08); } }
        @keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -50px) scale(1.15); } }

        /* ---------------- Top bar + nav ---------------- */
        .top-bar {
            background: var(--navy-deep);
            color: rgba(255,255,255,0.85);
            font-size:var(--fs-sm);
            padding: 9px 0;
        }
        .top-bar .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

        .nav {
            position: sticky; top: 0; z-index: var(--z-nav);
            background: var(--white);
            border-bottom: 1px solid transparent;
            transition: box-shadow .25s ease, border-color .25s ease;
        }
        .nav.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 20px rgba(11,28,70,.07); }
        .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
        .logo { font-family: Inter, Poppins, Arial, sans-serif; font-size:var(--fs-h3); font-weight: 700; color: var(--navy); letter-spacing: -0.5px; }
        .logo span { color: var(--blue); }
        .nav-links { display: flex; gap: 28px; align-items: center; font-size:var(--fs-base); color: var(--muted); font-weight: 500; }
        .nav-links a:hover { color: var(--blue); }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 13px 24px; border-radius:var(--r-pill); font-weight: 700;
            border: 0; cursor: pointer; transition: 0.25s ease; font-size:var(--fs-base);
            font-family: Inter; letter-spacing: 0.1px;
        }
        .btn-primary { position: relative; overflow: hidden; background: var(--cta); color: var(--white); box-shadow: 0 6px 16px rgba(234, 88, 12, 0.18); }
        .btn-primary::after {
            content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
            transform: skewX(-18deg); transition: left 0.6s ease;
        }
        .btn-primary:hover::after { left: 140%; }
        .btn-primary:hover { background: var(--cta-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(234, 88, 12, 0.24); }
        .btn-blue { background: var(--blue); color: var(--white); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.16); }
        .btn-blue:hover { background: var(--accent-800); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20); }
        .btn-outline { border: 1px solid var(--border); color: var(--navy); background: var(--white); }
        .btn-outline:hover { border-color: var(--blue); color: var(--blue); }
        .btn-ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--white); background: transparent; }
        .btn-ghost:hover { background: rgba(255,255,255,0.1); }

        /* ---------------- Shared section rhythm ---------------- */
        section { padding: 96px 0; position: relative; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 7px 15px; border-radius:var(--r-pill);
            background: var(--blue-tint); color: var(--blue);
            font-weight: 700; font-size:var(--fs-sm); letter-spacing: 0.2px;
            margin-bottom: 20px;
        }
        .eyebrow.on-dark { background: rgba(96,165,250,0.16); color: var(--blue-soft); }
        .kicker {
            font-family: Inter, Poppins, Arial, sans-serif; font-weight: 600; font-size:var(--fs-sm);
            letter-spacing: 2px; text-transform: uppercase; color: var(--blue);
            display: block; margin-bottom: 14px;
        }
        .section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
        .section-head h2 { color: var(--ink); font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -1.2px; margin-bottom: 16px; font-weight: 700; }
        .section-head p { color: var(--muted); font-size:var(--fs-lg); }
        .grad-text { background: linear-gradient(120deg, var(--blue), var(--blue-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }

        /* ---------------- HERO ---------------- */
        .hero { padding: 40px 0 84px; background: linear-gradient(180deg, var(--white) 0%, var(--blue-wash) 100%); }
        .hero .container { position: relative; z-index:var(--z-raised); }
        .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

        .breadcrumb { font-size:var(--fs-sm); color: var(--muted); margin-bottom: 18px; font-weight: 500; }
        .breadcrumb a { color: var(--blue); font-weight: 600; }
        .breadcrumb span[aria-hidden] { margin: 0 6px; opacity: 0.6; }

        .hero h1 {
            font-size: var(--fs-h2);
            line-height: 1.14; letter-spacing: -1.1px;
            color: var(--ink); margin-bottom: 20px; font-weight: 700;
            max-width: 20ch;
        }
        .hero h1 span {
            background: linear-gradient(100deg, var(--blue) 0%, var(--violet-500) 30%, var(--blue-bright) 55%, var(--blue) 90%);
            background-size: 220% auto;
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: var(--blue);
            animation: heroGradient 6s ease-in-out infinite;
        }
        @keyframes heroGradient { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
        @media (forced-colors: active) {
            .hero h1 span { -webkit-text-fill-color: currentColor; background: none; animation: none; }
        }
        .hero-lead { font-size:var(--fs-lg); color: var(--text); max-width: 560px; margin-bottom: 30px; }
        .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

        .trust-row { display: flex; gap: 34px; flex-wrap: wrap; }
        .trust-item { display: flex; flex-direction: column; }
        .trust-item strong { font-family: Inter, Poppins, Arial, sans-serif; color: var(--navy); font-size:var(--fs-xl); font-weight: 700; letter-spacing: -0.5px; }
        .trust-item span { color: var(--muted); font-size:var(--fs-sm); }
        .trust-divider { width: 1px; background: var(--border); align-self: stretch; }

        /* ---------------- Lead form (compact, label-free) ---------------- */
        .lead-wrap { position: relative; z-index:var(--z-raised); }
        .lead-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius:var(--r-lg);
            padding: 26px 24px;
            box-shadow: var(--shadow);
        }
        .lead-card h2 { color: var(--navy); font-size:var(--fs-xl); margin-bottom: 4px; font-weight: 700; letter-spacing: -0.5px; text-align: center; }
        .lead-card .lead-sub { font-size:var(--fs-sm); margin-bottom: 18px; color: var(--muted); text-align: center; }
        .form-group { margin-bottom: 11px; }
        input, select, textarea {
            width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
            padding: 13px 14px; font: inherit;
            font-size: var(--fs-md);   /* >=16px prevents iOS Safari focus-zoom */
            min-height: 48px;          /* tap target */
            outline: none;
            background: var(--white); color: var(--ink);
        }
        .field-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
        .form-group.has-error input, .form-group.has-error select { border-color: var(--danger); background: var(--danger-bg); }
        .field-error { display: none; font-size: var(--fs-sm); color: var(--danger); margin-top: 6px; font-weight: 500; }
        .form-group.has-error .field-error { display: block; }
        .form-status { display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; }
        .form-status.is-ok { display: block; background: var(--brand-tint); color: var(--brand-dark); }
        .form-status.is-bad { display: block; background: var(--danger-bg); color: var(--danger); }
        input::placeholder, textarea::placeholder { color: var(--muted); }
        select { color: var(--ink); }
        input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }
        textarea { min-height: 84px; resize: vertical; }
        .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
        .form-submit { width: 100%; margin-top: 4px; }
        .form-disclaimer { text-align: center; font-size:var(--fs-sm); color: var(--muted); margin-top: 14px; }

        .alert { padding: 13px 15px; border-radius:var(--r-sm); margin-bottom: 16px; font-weight: 600; font-size:var(--fs-sm); }
        .alert-success { background: var(--blue-tint); color: var(--blue); }
        .alert-error { background: var(--danger-bg); color: var(--danger); }

        /* ---------------- WHAT IS GST — editorial flow, no boxes ---------------- */
        .basics { background: var(--white); }
        .basics-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
        .basics-intro { position: sticky; top: 110px; }
        .basics-intro h2 { color: var(--ink); font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -1.3px; margin-bottom: 16px; font-weight: 700; }
        .basics-intro p { color: var(--muted); font-size:var(--fs-md); margin-bottom: 24px; }
        .freshness {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 13px; border-radius:var(--r-pill);
            background: var(--blue-tint); color: var(--blue);
            font-weight: 700; font-size:var(--fs-sm); margin-bottom: 20px;
        }
        .qa-flow { display: flex; flex-direction: column; }
        .qa {
            padding: 26px 0; border-top: 1px solid var(--border);
            display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: start;
        }
        .qa:first-child { border-top: 0; padding-top: 0; }
        .qa-num { font-family: Inter, Poppins, Arial, sans-serif; font-weight: 700; font-size:var(--fs-base); color: var(--blue); padding-top: 3px; }
        .qa h3 { color: var(--ink); font-size:var(--fs-xl); margin-bottom: 8px; font-weight: 600; letter-spacing: -0.4px; }
        .qa p { color: var(--text); font-size:var(--fs-base); }
        .qa ul { margin: 8px 0 0; padding-left: 18px; color: var(--text); font-size:var(--fs-base); }
        .qa ul li { margin-bottom: 5px; }
        .qa ul li::marker { color: var(--blue); }

        /* ---------------- PRICING — separate lifted cards ---------------- */
        .pricing { background: linear-gradient(180deg, var(--blue-wash), var(--white)); }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .price-card {
            position: relative;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 30px;
            background: var(--white);
            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
            transition: 0.25s ease;
        }

        .price-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow);
        }

        .price-card.highlight {
            border: 2px solid var(--blue);
            background: linear-gradient(180deg, var(--white) 0%, var(--blue-tint) 100%);
        }

        .badge {
            position: absolute;
            right: 24px;
            top: 22px;
            background: var(--blue);
            color: white;
            font-size:var(--fs-xs);
            font-weight: 900;
            padding: 7px 11px;
            border-radius:var(--r-pill);
        }

        .price-card h3 {
            color: var(--navy);
            font-size:var(--fs-xl);
            margin-bottom: 8px;
            font-weight: 700;
            padding-right: 80px;
        }

        .tag {
            color: var(--muted);
            font-size:var(--fs-sm);
            min-height: 44px;
            margin-bottom: 20px;
        }

        .price {
            font-family: Inter, Poppins, Arial, sans-serif;
            font-size:var(--fs-display);
            color: var(--navy);
            font-weight: 800;
            letter-spacing: -1.5px;
            margin-bottom: 5px;
        }

        .price small {
            font-family: Inter, Poppins, Arial, sans-serif;
            font-size:var(--fs-base);
            color: var(--muted);
            font-weight: 600;
            letter-spacing: 0;
        }

        .features {
            list-style: none;
            margin: 24px 0;
        }

        .features li {
            padding: 10px 0 10px 30px;
            position: relative;
            border-bottom: 1px dashed var(--border);
            font-size:var(--fs-base);
        }

        .features li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--blue);
            font-weight: 900;
        }

        .note {
            font-size:var(--fs-sm);
            color: var(--muted);
            margin-top: 12px;
        }

        /* ---------------- AUTHORITY — cobalt band with moving parallax bg ---------------- */
        .authority { background: linear-gradient(155deg, var(--accent-900) 0%, var(--accent-700) 48%, var(--brand-accent) 100%); color: var(--white); overflow: hidden; position: relative; }
        .authority .container { position: relative; z-index:var(--z-raised); }
        .authority .kicker { color: var(--accent-150); }
        .authority .section-head h2 { color: var(--white); }
        .authority .section-head p { color: rgba(255,255,255,0.80); }
        /* moving parallax background */
        .auth-bg { position: absolute; inset: -12% 0; overflow: hidden; z-index:var(--z-bg); pointer-events: none; transform: translateY(var(--py, 0px)); will-change: transform; }
        .ab-blob { position: absolute; border-radius:50%; filter: blur(70px); will-change: transform; }
        .ab1 { width: 460px; height: 460px; background: var(--accent-400); opacity: 0.55; top: -120px; left: -80px; animation: drift1 22s ease-in-out infinite; }
        .ab2 { width: 400px; height: 400px; background: var(--accent-300); opacity: 0.45; bottom: -150px; right: -70px; animation: drift2 26s ease-in-out infinite; }
        .ab3 { width: 320px; height: 320px; background: var(--accent-250); opacity: 0.32; top: 28%; left: 56%; animation: drift3 30s ease-in-out infinite; }
        .ab-grid { position: absolute; inset: 0; opacity: 0.10;
            background-image: linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
            background-size: 46px 46px; mask-image: radial-gradient(1000px 400px at 50% 40%, #000, transparent 75%);
                    -webkit-mask-image: radial-gradient(1000px 400px at 50% 40%, #000, transparent 75%); }
        .auth-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .auth-item {
            position: relative; overflow: hidden;
            background: rgba(255,255,255,0.09);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius:var(--r-lg);
            padding: 32px 26px 28px;
            backdrop-filter: blur(10px);
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
        }
        /* luminous top edge */
        .auth-item::before {
            content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
            opacity: 0.5; transition: opacity .3s ease;
        }
        /* soft glow that blooms on hover */
        .auth-item::after {
            content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
            width: 180px; height: 180px; border-radius:50%;
            background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 70%);
            opacity: 0; transition: opacity .35s ease; pointer-events: none;
        }
        .auth-item:hover {
            transform: translateY(-6px);
            background: rgba(255,255,255,0.14);
            border-color: rgba(255,255,255,0.45);
            box-shadow: 0 26px 60px rgba(9,24,66,0.40);
        }
        .auth-item:hover::before { opacity: 1; }
        .auth-item:hover::after { opacity: 1; }
        .auth-icon {
            width: 56px; height: 56px; border-radius:var(--r-md);
            background: linear-gradient(140deg, var(--white), var(--accent-75));
            color: var(--blue);
            display: grid; place-items: center; font-size:var(--fs-h3); margin-bottom: 18px;
            box-shadow: 0 10px 30px rgba(9,24,66,0.35);
            position: relative; z-index:var(--z-base);
        }
        .auth-item h3 { font-size:var(--fs-lg); margin-bottom: 8px; color: var(--white); font-weight: 600; position: relative; z-index:var(--z-base); }
        .auth-item p { color: rgba(255,255,255,0.78); font-size:var(--fs-base); position: relative; z-index:var(--z-base); }

        /* ---------------- PROCESS — compact horizontal stepper ---------------- */
        .process { background: var(--white); overflow: hidden; }
        .process .container { position: relative; z-index:var(--z-raised); }
        .timeline { position: relative; max-width: 1080px; margin: 0 auto; }
        .t-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
        /* animated horizontal rail threading the nodes */
        .timeline::before {
            content: ""; position: absolute; top: 27px; left: 9%; right: 9%; height: 3px; border-radius:var(--r-xs);
            background: linear-gradient(90deg, var(--blue-bright), var(--blue), var(--blue-bright));
            background-size: 220% 100%; animation: railFlowH 5s linear infinite;
        }
        @keyframes railFlowH { to { background-position: 220% 0; } }
        @keyframes railFlow { to { background-position: 0 -220%; } }
        .t-step { position: relative; text-align: center; padding: 0 8px; }
        .t-node {
            position: relative; z-index:var(--z-raised); margin: 0 auto 16px;
            width: 54px; height: 54px; border-radius:50%;
            background: linear-gradient(140deg, var(--blue), var(--blue-bright)); color: var(--white);
            display: grid; place-items: center; font-family: Inter, Poppins, Arial, sans-serif;
            font-weight: 800; font-size:var(--fs-lg);
            box-shadow: 0 0 0 6px var(--white), 0 10px 22px rgba(37,99,235,0.38);
        }
        .t-ico {
            width: 40px; height: 40px; border-radius:var(--r-sm); margin: 0 auto 10px;
            background: var(--blue-tint); color: var(--blue);
            display: grid; place-items: center;
        }
        .t-ico .ic { width: 20px; height: 20px; }
        .t-step h3 { color: var(--ink); font-size:var(--fs-md); margin-bottom: 5px; font-weight: 600; }
        .t-step p { color: var(--muted); font-size:var(--fs-sm); line-height: 1.5; }

        /* ---------------- DOCUMENTS — modern card grid → mobile auto-scroll ---------------- */
        .docs { background: linear-gradient(180deg, var(--blue-wash) 0%, var(--white) 100%); overflow: hidden; }
        .docs-viewport { position: relative; }
        .docs-track {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(150px, auto);
            gap: 16px;
            grid-template-areas:
                "a a b b"
                "a a c d"
                "e e f f";
        }
        .doc-card {
            position: relative; overflow: hidden;
            background: linear-gradient(160deg, var(--white) 0%, var(--blue-wash) 130%);
            border: 1px solid var(--border);
            border-radius:var(--r-md);
            padding: 26px 24px 24px;
            transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
        }
        .doc-card.dup { display: none; }
        .doc-card.dc-a { grid-area: a; }
        .doc-card.dc-b { grid-area: b; }
        .doc-card.dc-c { grid-area: c; }
        .doc-card.dc-d { grid-area: d; }
        .doc-card.dc-e { grid-area: e; }
        .doc-card.dc-f { grid-area: f; }
        /* feature tile — gradient-filled hero of the bento */
        .doc-card.dc-a {
            background: linear-gradient(150deg, var(--blue), var(--blue-bright));
            border: none; color: var(--white);
            display: flex; flex-direction: column; justify-content: center;
        }
        .doc-card.dc-a h3 { color: var(--white); font-size:var(--fs-xl); }
        .doc-card.dc-a p { color: rgba(255,255,255,0.88); font-size:var(--fs-base); }
        .doc-card.dc-a .doc-mark { width: 60px; height: 60px; background: rgba(255,255,255,0.16); box-shadow: none; }
        .doc-card.dc-a:hover { box-shadow: 0 26px 60px rgba(37,99,235,0.40); }
        .doc-card .doc-mark {
            width: 52px; height: 52px; border-radius:var(--r-md);
            background: linear-gradient(140deg, var(--blue), var(--blue-bright));
            color: var(--white); display: grid; place-items: center;
            margin-bottom: 16px; box-shadow: 0 10px 22px rgba(37,99,235,0.28);
            position: relative; z-index:var(--z-base);
        }
        .doc-card h3 { color: var(--ink); font-size:var(--fs-lg); margin-bottom: 6px; font-weight: 600; position: relative; z-index:var(--z-base); }
        .doc-card p { color: var(--muted); font-size:var(--fs-base); position: relative; z-index:var(--z-base); }
        .doc-card::after {
            content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
            background: linear-gradient(90deg, var(--blue), var(--blue-bright));
            transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
        }
        .doc-card.dc-a::after { display: none; }
        .doc-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(37,99,235,0.16); border-color: rgba(37,99,235,0.28); }
        .doc-card:hover::after { transform: scaleX(1); }
        /* marquee removed — docs are a native scroll-snap carousel on mobile */

        /* ---------------- WHY — dark panel + flowing list ---------------- */
        .why-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
        .why-panel {
            position: relative; overflow: hidden;
            background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
            color: var(--white); padding: 48px 42px; border-radius:var(--r-lg);
        }
        .why-panel .why-inner { position: relative; z-index:var(--z-raised); }
        .why-panel h2 { font-size: var(--fs-h2); line-height: 1.12; margin-bottom: 16px; color: var(--white); font-weight: 700; letter-spacing: -1px; }
        .why-panel p { color: rgba(255,255,255,0.8); margin-bottom: 26px; }
        .why-list { display: flex; flex-direction: column; }
        .why-item { padding: 20px 0; border-top: 1px solid var(--border); }
        .why-item:first-child { border-top: 0; padding-top: 0; }
        .why-item strong { display: block; color: var(--ink); font-size:var(--fs-lg); margin-bottom: 4px; font-weight: 600; }
        .why-item span { color: var(--muted); font-size:var(--fs-base); }

        /* ---------------- FAQ — two-column, fills the width ---------------- */
        .faq-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 56px; align-items: start; }
        .faq-intro { position: sticky; top: 110px; }
        .faq-intro h2 { color: var(--ink); font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -1.3px; margin-bottom: 14px; font-weight: 700; }
        .faq-intro p { color: var(--muted); font-size:var(--fs-md); margin-bottom: 22px; }
        .faq-wrap { max-width: 100%; margin: 0; }
        .faq { border-bottom: 1px solid var(--border); }
        .faq:first-child { border-top: 1px solid var(--border); }
        .faq button {
            width: 100%; text-align: left; background: transparent; border: 0;
            padding: 22px 0; font: inherit; font-weight: 600; font-size:var(--fs-lg);
            color: var(--ink); cursor: pointer;
            display: flex; justify-content: space-between; align-items: center; gap: 20px;
        }
        .faq button .faq-icon { flex: none; font-size:var(--fs-h3); line-height: 1; color: var(--blue); transition: transform 0.2s ease; }
        .faq.active button .faq-icon { transform: rotate(45deg); }
        .faq-content { display: none; padding: 0 0 22px; color: var(--muted); font-size:var(--fs-base); max-width: 90%; }
        .faq.active .faq-content { display: block; }

        /* ---------------- CLOSING CTA ---------------- */
        .closing { padding: 96px 0; }
        .closing-panel {
            position: relative; overflow: hidden; text-align: center;
            background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--blue) 140%);
            color: var(--white); border-radius:var(--r-lg); padding: 68px 28px;
        }
        .closing-panel .closing-inner { position: relative; z-index:var(--z-raised); }
        .closing-panel h2 { font-size: var(--fs-h2); margin-bottom: 14px; color: var(--white); font-weight: 700; letter-spacing: -1.2px; }
        .closing-panel p { color: rgba(255,255,255,0.82); max-width: 640px; margin: 0 auto 30px; font-size:var(--fs-lg); }
        .closing-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

        /* ---------------- Footer ---------------- */
        .footer { padding: 40px 0; background: var(--navy-deep); color: rgba(255,255,255,0.75); font-size:var(--fs-sm); }
        .footer .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
        .footer strong { color: var(--white); font-family: Inter, Poppins, Arial, sans-serif; }

        /* ---------------- Floating WhatsApp (the only green) ---------------- */
        .floating-whatsapp {
            position: fixed; right: 22px; bottom: 22px; z-index:var(--z-float);
            background: var(--wa); color: var(--white); width: 56px; height: 56px;
            display: grid; place-items: center; border-radius:50%;
            box-shadow: 0 14px 32px rgba(37, 211, 102, 0.35);
        }
        .floating-whatsapp svg { width: 29px; height: 29px; fill: var(--white); }
        .sticky-mobile-cta { display: none; }

        /* ---------------- Reveal on scroll ---------------- */
        .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
        .reveal.in { opacity: 1; transform: none; }
        /* staggered cascade for grouped children (delay set inline by JS) */
        .reveal { transition-delay: var(--reveal-delay, 0s); }

        /* ---------------- Hover micro-interactions ---------------- */
        .doc-mark, .auth-icon, .t-ico, .t-node { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
        .t-step:hover .t-ico { transform: translateY(-2px) scale(1.08) rotate(-3deg); }
        .t-step:hover .t-node { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 6px var(--white), 0 14px 28px rgba(37,99,235,0.5); }
        .auth-item:hover .auth-icon { transform: translateY(-2px) scale(1.06) rotate(-3deg); box-shadow: 0 14px 26px rgba(37,99,235,0.34); }
        .price-card:hover .price { transform: scale(1.03); transition: transform .25s ease; }

        /* pulsing badge on the featured plan */
        .price-card.highlight .badge { animation: badgePulse 2.4s ease-in-out infinite; }
        @keyframes badgePulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); }
            50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
        }

        /* fluid price for small screens */
        .price { font-size: var(--fs-h1); }

        /* ---------------- Responsive ---------------- */
        @media (max-width: 980px) {
            .hero-grid, .basics-grid, .why-split, .faq-layout { grid-template-columns: 1fr; gap: 40px; }
            .basics-intro, .faq-intro { position: static; }
            .t-track { grid-template-columns: 1fr; gap: 4px; }
            .timeline::before {
                top: 8px; bottom: 8px; left: 27px; right: auto; width: 3px; height: auto;
                background: linear-gradient(180deg, var(--blue-bright), var(--blue), var(--blue-bright));
                background-size: 100% 220%; animation: railFlow 5s linear infinite;
            }
            .t-step { text-align: left; padding: 14px 0 14px 78px; }
            .t-node { position: absolute; left: 0; top: 12px; margin: 0; }
            .t-ico { margin: 0 0 8px 0; }
            .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
            .auth-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .docs-track { grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-auto-rows: auto; }
            .docs-track .doc-card { grid-area: auto; }
            .nav-links { display: none; }
            .trust-row { gap: 22px; }
        }
        @media (max-width: 640px) {
            section { padding: 68px 0; }
            .hero { padding: 28px 0 60px; }
            .auth-grid { grid-template-columns: 1fr; }
            .price-card { padding: 26px 22px; }
            /* Documents become an auto-scrolling carousel on phones */
            /* was: overflow:hidden + 32s infinite marquee = unreadable and un-swipeable */
            .docs-viewport {
                overflow-x: auto; padding: 8px 0 18px;
                scroll-snap-type: x mandatory; scrollbar-width: none;
                -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
                width: 100vw; margin-inline: calc(50% - 50vw);
                padding-inline: calc(50vw - 50%);
            }
            .docs-viewport::-webkit-scrollbar { display: none; }
            .docs-track {
                display: flex; grid-template-columns: none;
                width: max-content; gap: 14px; animation: none;
            }
            .doc-card { min-width: min(78vw, 300px); scroll-snap-align: center; }
            .doc-card.dup { display: none; }   /* duplicated marquee cards no longer needed */
            .hero-actions .btn, .closing-actions .btn { width: 100%; }
            .lead-card { padding: 22px 18px; }
            .why-panel, .closing-panel { padding: 40px 24px; }
            .sticky-mobile-cta {
                display: grid; grid-template-columns: 1fr 1fr;
                position: fixed; bottom: 0; left: 0; right: 0; z-index:var(--z-sticky-cta);
                background: var(--white); border-top: 1px solid var(--border);
                box-shadow: 0 -12px 30px rgba(11, 28, 70, 0.12);
            }
            .sticky-mobile-cta a { padding: 14px; text-align: center; font-weight: 800; color: var(--white); }
            .sticky-mobile-cta a:first-child { background: var(--cta); }
            .sticky-mobile-cta a:last-child { background: var(--wa); }
            .floating-whatsapp { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .blob, .soft-aurora .glow, .ab-blob { animation: none; }
            .timeline::before { animation: none; }
            .hero h1 span, .price-card.highlight .badge { animation: none; }
            .hero h1 span { -webkit-text-fill-color: var(--blue); }
            .reveal { opacity: 1; transform: none; transition: none; }
            .docs-track { animation: none; }
            .docs-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
            .doc-card.dup { display: none; }
            * { transition: none; }
        }
    

/* ===== Final light-flow content/layout overrides ===== */

body{background:var(--white)}.hero{padding:48px 0 76px;background:linear-gradient(180deg,var(--white) 0%,var(--surface) 100%)}
.hero-grid{grid-template-columns:1.04fr .96fr;gap:64px}.hero-lead p{margin-bottom:12px}.hero-lead p:last-child{margin-bottom:0}.trust-strip{font-size:var(--fs-sm);font-weight:700;color:var(--navy);padding:15px 18px;border:1px solid var(--border);background:rgba(255,255,255,.85);border-radius:var(--r-md);line-height:1.8}.trust-strip span{color:var(--blue);margin:0 4px}.disclosure-line{font-size:var(--fs-sm);color:var(--muted);margin-top:14px;max-width:680px}.lead-card{padding:28px;border-radius:var(--r-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-strong)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.form-row .form-group{margin-bottom:11px}.light-section,.services-section,.faq-section{background:var(--white)}.pricing,.docs,.why-us-light,.update-section{background:linear-gradient(180deg,var(--surface) 0%,var(--white) 100%)}
.section-head{margin-bottom:46px}.section-head h2{max-width:900px;margin-left:auto;margin-right:auto}.basics-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.info-card{position:relative;padding:28px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft);overflow:hidden}.info-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--blue),var(--accent-200))}.card-no{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);font-weight:800;margin-bottom:18px}.info-card h3{color:var(--ink);font-size:var(--fs-xl);margin-bottom:8px}.inline-cta{margin:30px auto 0;max-width:900px;padding:19px 24px;text-align:center;border:1px solid var(--accent-100);background:var(--brand-tint);border-radius:var(--r-md);color:var(--navy);font-weight:700}.pricing-note{max-width:900px;text-align:center;margin:28px auto 0;color:var(--muted);font-size:var(--fs-sm)}.center-cta{text-align:center;margin-top:24px}.price small{display:block;margin-top:5px}.split-feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch}.feature-intro{padding:34px;border-radius:var(--r-lg);background:linear-gradient(145deg,var(--brand-tint),var(--white));border:1px solid var(--accent-50)}.feature-intro h3{font-size:var(--fs-h3);line-height:1.25;color:var(--ink);margin-bottom:18px}.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit{padding:25px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white)}.benefit strong{display:block;color:var(--ink);font-size:var(--fs-lg);margin-bottom:7px}.benefit span{color:var(--muted)}.document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.document-card{padding:25px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-soft)}.document-card>span{color:var(--blue);font-weight:900;font-size:var(--fs-sm)}.document-card h3{color:var(--ink);font-size:var(--fs-lg);margin:10px 0 7px}.process-showcase{background:linear-gradient(180deg,var(--white) 0%,var(--surface) 52%,var(--white) 100%)}.process-path{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}.process-step{position:relative;display:flex;gap:16px;padding:28px 24px;border:1px solid var(--accent-50);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft);min-height:190px;overflow:hidden}.process-step:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-42px;bottom:-52px;background:var(--brand-tint)}.step-number{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--blue),var(--brand-accent-so));color:var(--white);font-weight:900;box-shadow:0 10px 22px rgba(37,99,235,.25)}.process-step h3{color:var(--ink);font-size:var(--fs-xl);margin:2px 0 8px}.process-step p{font-size:var(--fs-base);color:var(--muted)}.compliance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mini-card{padding:23px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--border);text-align:center}.mini-card h3{color:var(--blue);font-size:var(--fs-lg);margin-bottom:6px}.warning-card{max-width:900px;margin:18px auto;padding:22px 26px;border-radius:var(--r-md);background:var(--cta-25);border:1px solid var(--cta-100)}.warning-card strong{color:var(--cta)}.body-center{max-width:880px;margin:20px auto;text-align:center}.service-list{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;max-width:1000px;margin:auto}.service-pill{padding:16px 20px;border:1px solid var(--accent-50);border-radius:var(--r-pill);background:var(--white);color:var(--navy);font-weight:650;box-shadow:0 8px 22px rgba(30,64,175,.06)}.trust-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.trust-card{padding:25px 20px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-soft)}.trust-card h3{font-size:var(--fs-lg);color:var(--ink);margin-bottom:8px}.trust-card p{font-size:var(--fs-sm);color:var(--muted)}.update-list{max-width:980px;margin:auto;display:grid;gap:12px}.update-item{display:grid;grid-template-columns:270px 1fr;gap:20px;padding:22px 24px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--border)}.update-item strong{color:var(--blue)}.faq-section{background:var(--white)}.closing-panel{background:linear-gradient(135deg,var(--brand-tint),var(--white) 60%,var(--violet-50));border:1px solid var(--accent-50);color:var(--ink);box-shadow:var(--shadow)}.closing-panel h2{color:var(--ink)}.closing-panel p{color:var(--muted)}.footer{background:var(--ink);padding:48px 0}.footer .container.footer-grid{display:grid;grid-template-columns:1fr 250px}.footer p{margin-top:12px;line-height:1.65;font-size:var(--fs-sm)}.footer-links{display:flex;flex-direction:column;gap:10px}.footer-links a{color:var(--white)}.footer-links a:hover{text-decoration:underline}
@media(max-width:980px){.hero-grid,.split-feature{grid-template-columns:1fr}.basics-cards,.document-grid,.process-path{grid-template-columns:repeat(2,1fr)}.compliance-grid{grid-template-columns:repeat(2,1fr)}.trust-cards{grid-template-columns:repeat(2,1fr)}.update-item{grid-template-columns:1fr;gap:6px}.footer .container.footer-grid{grid-template-columns:1fr}.hero-copy{order:1}.lead-wrap{order:2}}
@media(max-width:640px){.form-row,.basics-cards,.benefit-grid,.document-grid,.process-path,.compliance-grid,.trust-cards{grid-template-columns:1fr}.hero-grid{gap:36px}.trust-strip{font-size:var(--fs-sm)}.process-step{min-height:0}.service-pill{border-radius:var(--r-md);width:100%;text-align:center}.update-item{padding:20px}.footer{padding-bottom:90px}}


/* Targeted visual refinements */
.hero-grid{align-items:center}.lead-wrap{align-self:center;display:flex;flex-direction:column;justify-content:center}.lead-card{width:100%}
.proof-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px;max-width:650px}.proof-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--accent-50);border-radius:var(--r-md);background:rgba(255,255,255,.8);box-shadow:0 8px 20px rgba(37,99,235,.05)}.proof-icon{flex:0 0 42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-tint),var(--accent-50));color:var(--blue);font-weight:850;font-size:var(--fs-sm)}.proof-item strong{display:block;color:var(--ink);font-size:var(--fs-sm);line-height:1.25}.proof-item small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:3px}
.docs-motion{background:linear-gradient(180deg,var(--surface) 0%,var(--white) 100%);overflow:hidden;isolation:isolate}.document-motion-bg{position:absolute;inset:0;z-index:var(--z-bg);pointer-events:none}.document-motion-bg span{position:absolute;color:var(--blue);font-weight:900;opacity:.045;font-size:clamp(70px,12vw,170px);line-height:1;animation:docFloat 16s ease-in-out infinite}.document-motion-bg span:nth-child(1){left:-2%;top:8%}.document-motion-bg span:nth-child(2){right:3%;top:4%;animation-delay:-4s}.document-motion-bg span:nth-child(3){left:30%;bottom:-3%;animation-delay:-8s}.document-motion-bg span:nth-child(4){right:18%;bottom:15%;animation-delay:-12s}@keyframes docFloat{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(0,-35px,0) rotate(4deg)}}.docs-motion .container{position:relative;z-index:var(--z-base)}.docs-showcase{display:grid;grid-template-columns:.72fr 1.28fr;gap:42px;align-items:center}.docs-centerpiece{display:grid;place-items:center;min-height:430px}.paper-stack{position:relative;width:min(310px,80vw);height:360px}.paper-stack>span,.paper-front{position:absolute;inset:0;border-radius:var(--r-lg);border:1px solid var(--accent-50);background:var(--white);box-shadow:0 24px 55px rgba(30,64,175,.12)}.paper-stack>span:nth-child(1){transform:rotate(-8deg) translate(-16px,8px);background:var(--brand-tint)}.paper-stack>span:nth-child(2){transform:rotate(7deg) translate(14px,10px);background:var(--brand-wash)}.paper-stack>span:nth-child(3){transform:rotate(-2deg) translate(-2px,4px)}.paper-front{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:38px;background:linear-gradient(160deg,var(--white),var(--surface))}.paper-front .ic{width:58px;height:58px;color:var(--blue);margin-bottom:22px}.paper-front strong{font-size:var(--fs-h3);color:var(--ink)}.paper-front small{max-width:190px;color:var(--muted);margin-top:8px}.doc-orbit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.doc-orbit-card{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:20px;border:1px solid var(--border);border-radius:var(--r-md);background:rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(30,64,175,.06);transition:.3s ease}.doc-orbit-card:hover{transform:translateY(-5px);border-color:var(--accent-100);box-shadow:0 20px 40px rgba(37,99,235,.12)}.doc-orbit-icon{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--blue-tint);color:var(--blue)}.doc-orbit-card h3{font-size:var(--fs-lg);color:var(--ink);margin-bottom:5px}.doc-orbit-card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
.compliance-section{background:var(--white)}.compliance-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:58px;align-items:center}.compliance-intro h2{font-size:var(--fs-h2);line-height:1.14;color:var(--ink);margin-bottom:16px}.compliance-intro>p{color:var(--muted);font-size:var(--fs-lg)}.compliance-note{margin-top:24px;padding:18px 20px;border-left:4px solid var(--blue);border-radius:0 16px 16px 0;background:var(--brand-tint);color:var(--navy)}.return-path{position:relative}.return-path:before{content:"";position:absolute;left:24px;top:25px;bottom:25px;width:2px;background:linear-gradient(var(--blue),var(--accent-100))}.return-row{position:relative;display:grid;grid-template-columns:50px 1fr auto;gap:16px;align-items:center;padding:17px 18px;margin:10px 0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);box-shadow:0 10px 25px rgba(30,64,175,.05)}.return-row>span{position:relative;z-index:var(--z-base);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--brand-accent-so));color:var(--white);font-weight:850;box-shadow:0 0 0 6px var(--white)}.return-row h3{color:var(--ink);font-size:var(--fs-lg)}.return-row p{color:var(--muted);font-size:var(--fs-sm)}.return-row b{padding:7px 10px;border-radius:var(--r-pill);background:var(--blue-tint);color:var(--blue);font-size:var(--fs-xs)}.nil-alert{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;margin-top:28px;padding:19px 22px;border:1px solid var(--cta-100);border-radius:var(--r-md);background:var(--cta-10)}.nil-alert>span{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--cta-50);color:var(--cta);font-size:var(--fs-xl);font-weight:900}.nil-alert strong{color:var(--ink)}.nil-alert p{color:var(--muted);font-size:var(--fs-sm)}.nil-alert a{color:var(--cta);font-weight:750;white-space:nowrap}
.update-compact{padding:82px 0;background:linear-gradient(180deg,var(--surface),var(--white))}.update-shell{display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:stretch}.update-heading{padding:34px;border:1px solid var(--accent-50);border-radius:var(--r-lg);background:linear-gradient(145deg,var(--brand-tint),var(--white));display:flex;flex-direction:column;justify-content:center}.update-heading h2{font-size:var(--fs-h2);line-height:1.12;color:var(--ink);margin-bottom:14px}.update-heading p{color:var(--muted);margin-bottom:24px}.update-heading .btn{align-self:flex-start}.update-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:14px}.update-tile{position:relative;padding:22px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);min-height:160px;overflow:hidden}.update-tile>span{position:absolute;right:12px;top:4px;font-size:var(--fs-display);font-weight:900;color:var(--blue);opacity:.08}.update-tile h3{color:var(--ink);font-size:var(--fs-lg);margin-bottom:8px;padding-right:38px}.update-tile p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55}.update-tile.feature{background:linear-gradient(145deg,var(--blue),var(--brand-accent-so));border:0}.update-tile.feature h3,.update-tile.feature p{color:var(--white)}.update-tile.feature>span{color:var(--white);opacity:.18}.update-tile.wide{grid-column:1/-1;min-height:auto}.update-compact .inline-cta{margin-top:24px}
.closing-panel-classic{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 58%,var(--blue) 150%);border:0;color:var(--white);box-shadow:0 30px 70px rgba(7,18,48,.22)}.closing-panel-classic h2{color:var(--white)}.closing-panel-classic p{color:rgba(255,255,255,.82)}
@media(max-width:980px){.docs-showcase,.compliance-layout,.update-shell{grid-template-columns:1fr}.docs-centerpiece{min-height:350px}.proof-rail{max-width:none}.update-heading{padding:28px}.lead-wrap{align-self:auto}.return-row{grid-template-columns:50px 1fr}.return-row b{display:none}}
@media(max-width:640px){.proof-rail,.doc-orbit-grid,.update-mosaic{grid-template-columns:1fr}.proof-item{padding:12px}.docs-centerpiece{min-height:310px}.paper-stack{height:300px;width:240px}.paper-front{padding:28px}.paper-front strong{font-size:var(--fs-xl)}.compliance-layout{gap:32px}.return-row{padding:14px 12px;gap:12px}.return-path:before{left:21px}.return-row>span{width:42px;height:42px}.nil-alert{grid-template-columns:42px 1fr}.nil-alert a{grid-column:2}.update-tile.wide{grid-column:auto}.closing-panel-classic{padding:44px 22px}}
@media(prefers-reduced-motion:reduce){.document-motion-bg span{animation:none}}


/* ===== Responsive polish: controlled glow, icon-led trust, mobile swipe ===== */
.btn-primary{box-shadow:0 7px 18px rgba(249,115,22,.24),0 0 0 1px rgba(249,115,22,.08);}
.btn-primary:hover{box-shadow:0 10px 24px rgba(234,88,12,.28),0 0 0 3px rgba(249,115,22,.08);}
.btn-blue{box-shadow:0 7px 18px rgba(37,99,235,.22),0 0 0 1px rgba(37,99,235,.07);}
.btn-blue:hover{box-shadow:0 10px 24px rgba(37,99,235,.26),0 0 0 3px rgba(37,99,235,.07);}
.trust-card{position:relative;overflow:hidden;padding-top:72px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.trust-card:hover{transform:translateY(-5px);border-color:var(--accent-100);box-shadow:0 18px 38px rgba(37,99,235,.11);}
.trust-icon{position:absolute;top:20px;left:20px;width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-tint),var(--accent-50));color:var(--blue);box-shadow:0 8px 18px rgba(37,99,235,.12);}
.trust-icon .ic{width:21px;height:21px;}
.trust-card:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-34px;top:-38px;background:rgba(96,165,250,.10);}
@media (min-width:981px) and (max-width:1240px){.container{width:min(1240px, 94%)}.hero-grid{gap:44px}.trust-cards{grid-template-columns:repeat(3,1fr)}.trust-card:last-child{grid-column:2}.update-shell{gap:34px}}
@media (min-width:641px) and (max-width:980px){
  section{padding:78px 0}
  .hero-grid{gap:42px}
  .trust-cards{grid-template-columns:repeat(2,1fr)}
  .trust-card:last-child{grid-column:1/-1;max-width:520px;width:100%;margin:auto}
  .service-list{display:grid;grid-template-columns:1fr 1fr}
  .service-pill{border-radius:var(--r-md);text-align:center}
  .faq-layout{gap:34px}
  /* added: 641-980 was previously unhandled for these grids */
  .pricing-grid{grid-template-columns:repeat(2,1fr);max-width:640px;margin-inline:auto}
  .price-card.highlight{grid-column:1/-1;max-width:420px;margin-inline:auto}
  .document-grid,.compliance-grid,.basics-cards{grid-template-columns:repeat(2,1fr)}
  .process-path{grid-template-columns:repeat(2,1fr)}
  .update-mosaic{grid-template-columns:repeat(2,1fr)}
  .why-orbit{display:none}          /* overflowed the viewport to 844px at 768 */
  .docs-centerpiece{min-height:320px}
}
@media(max-width:640px){
  section{padding:58px 0}.section-head{margin-bottom:32px}.section-head h2{font-size:var(--fs-h2)}
  .hero{padding:28px 0 54px}.hero-grid{gap:30px}.lead-card{padding:22px 18px}.hero-actions{margin-bottom:24px}
  .trust-cards,.document-grid,.process-path,.compliance-grid,.service-list,.update-mosaic,.pricing-grid{
    display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
    /* full-bleed without exceeding the viewport (was -6vw margins -> 22px h-overflow) */
    width:100vw; margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50%); padding-block:4px 18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .trust-cards::-webkit-scrollbar,.document-grid::-webkit-scrollbar,.process-path::-webkit-scrollbar,.compliance-grid::-webkit-scrollbar,.service-list::-webkit-scrollbar,.update-mosaic::-webkit-scrollbar,.pricing-grid::-webkit-scrollbar{display:none}
  .trust-card,.document-card,.process-step,.mini-card,.service-pill,.update-tile,.price-card{flex:0 0 84vw;scroll-snap-align:center}
  /* fixed min-heights removed on mobile: they created 200-400px dead runs */
  .trust-card,.document-card,.process-step,.mini-card,.update-tile,.price-card{min-height:0}
  .service-pill{width:auto;text-align:left;border-radius:var(--r-md);display:flex;align-items:center;min-height:56px}
  .update-tile,.update-tile.wide,.update-tile.feature{min-width:84vw}.price-card{max-width:none}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:var(--fs-xs);margin-top:2px;margin-bottom:8px}
  .swipe-hint:after{content:"→";font-size:var(--fs-md);color:var(--blue)}
  .faq button{padding:18px 0;font-size:var(--fs-md)}.faq-content{max-width:100%}
}
@media(min-width:641px){.swipe-hint{display:none}}


/* ===== Requested GST registration 8 matching + section revamps ===== */


/* Controlled reference-colour button glow */
.btn-primary{background:var(--cta);box-shadow:0 8px 20px rgba(234,88,12,.23),0 0 0 1px rgba(234,88,12,.07)}
.btn-primary:hover{background:var(--cta-dark);box-shadow:0 12px 28px rgba(194,65,12,.27),0 0 0 3px rgba(234,88,12,.07)}
.btn-blue{background:var(--blue);box-shadow:0 8px 20px rgba(37,99,235,.21),0 0 0 1px rgba(37,99,235,.06)}
.btn-blue:hover{background:var(--accent-800);box-shadow:0 12px 28px rgba(37,99,235,.25),0 0 0 3px rgba(37,99,235,.06)}

/* Hero trust presentation restored to the clean GST registration 8 format */
.hero-trust-row{display:flex;align-items:stretch;gap:22px;flex-wrap:nowrap;margin-top:3px;max-width:720px}
.hero-trust-row .trust-item{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-trust-row .trust-item strong{font-family:Inter,Poppins,Arial,sans-serif;color:var(--navy);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.45px;white-space:nowrap}
.hero-trust-row .trust-item span{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.hero-trust-row .trust-divider{width:1px;background:var(--border);align-self:stretch;min-height:44px}

/* Pricing typography and desktop disclosure line */
.price small{display:inline;margin:0;font-size:var(--fs-base);color:var(--muted);font-weight:600;letter-spacing:0;white-space:nowrap}
.pricing-note{max-width:none}

/* Reference-style hover behaviour across white interaction surfaces */
.price-card,.benefit,.document-card,.process-step,.return-row,.service-pill,.update-card,.why-reason,.nil-alert{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;
}
@media(hover:hover){
  .price-card:hover,.benefit:hover,.document-card:hover,.process-step:hover,.return-row:hover,.update-card:hover,.why-reason:hover{
    transform:translateY(-6px);border-color:rgba(37,99,235,.28);box-shadow:0 22px 50px rgba(37,99,235,.13);
  }
  .service-pill:hover{transform:translateY(-4px);border-color:rgba(37,99,235,.28);box-shadow:0 16px 34px rgba(37,99,235,.12);color:var(--blue)}
  .process-step:hover .step-number{transform:translateY(-2px) scale(1.06) rotate(-3deg);box-shadow:0 14px 28px rgba(37,99,235,.36)}
  .return-row:hover{transform:translateX(7px);background:linear-gradient(90deg,var(--white),var(--brand-wash))}
  .return-row:hover>span{transform:scale(1.07);box-shadow:0 12px 24px rgba(37,99,235,.25)}
  .nil-alert:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(234,88,12,.10)}
}
.step-number,.return-row>span{transition:transform .28s ease,box-shadow .28s ease}
.compliance-intro .kicker{line-height:1.55}
.compliance-intro .kicker span{color:var(--blue)}

/* Why one-startup — deliberately different from the process card grid */
.why-us-revamp{background:linear-gradient(180deg,var(--white) 0%,var(--blue-wash) 100%);overflow:hidden}
.why-stage{display:grid;grid-template-columns:.88fr 1.12fr;gap:34px;align-items:stretch}
.why-feature{position:relative;overflow:hidden;border:1px solid var(--accent-50);border-radius:var(--r-lg);padding:44px 40px;background:linear-gradient(145deg,var(--tint-1) 0%,var(--white) 58%,var(--violet-50) 100%);box-shadow:var(--shadow);min-height:100%}
.why-feature>*{position:relative;z-index:var(--z-raised)}
.why-feature .kicker{margin-bottom:20px}
.why-feature-icon{width:76px;height:76px;border-radius:var(--r-lg);display:grid;place-items:center;background:linear-gradient(140deg,var(--blue),var(--blue-bright));color:var(--white);box-shadow:0 18px 35px rgba(37,99,235,.28);margin-bottom:26px}
.why-feature-icon .ic{width:34px;height:34px}
.why-feature h2{color:var(--ink);font-size:var(--fs-h2);line-height:1.12;letter-spacing:-1.2px;margin-bottom:17px}
.why-feature>p{color:var(--muted);font-size:var(--fs-md);max-width:560px}
.why-feature-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.why-feature-tags span{padding:8px 12px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--accent-50);color:var(--navy);font-size:var(--fs-sm);font-weight:700;box-shadow:0 7px 18px rgba(37,99,235,.06)}
.why-orbit{position:absolute;border:1px solid rgba(37,99,235,.16);border-radius:50%;z-index:var(--z-bg);animation:whyFloat 9s ease-in-out infinite}
.why-orbit-one{width:260px;height:260px;right:-100px;top:-80px}
.why-orbit-two{width:150px;height:150px;right:40px;bottom:-70px;animation-delay:-3s}
@keyframes whyFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}
.why-reasons{display:flex;flex-direction:column;gap:12px}
.why-reason{position:relative;display:grid;grid-template-columns:54px 1fr 26px;gap:16px;align-items:center;padding:20px 20px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);box-shadow:0 10px 28px rgba(11,28,70,.05)}
.why-reason-icon{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--blue-tint);color:var(--blue)}
.why-reason-icon .ic{width:23px;height:23px}
.why-reason h3{color:var(--ink);font-size:var(--fs-lg);margin-bottom:4px}
.why-reason p{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.why-arrow{color:var(--muted-soft);font-size:var(--fs-xl);transition:transform .25s ease,color .25s ease}
@media(hover:hover){.why-reason:hover .why-arrow{transform:translate(3px,-3px);color:var(--blue)}.why-reason:hover .why-reason-icon{background:linear-gradient(140deg,var(--blue),var(--blue-bright));color:var(--white)}}
.why-reason-icon{transition:background .28s ease,color .28s ease}

/* GST 2026 — highlighted intro only; all update points are normal white cards */
.update-redesign{background:linear-gradient(180deg,var(--blue-wash) 0%,var(--white) 100%);overflow:hidden}
.update-stage{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;align-items:stretch}
.update-spotlight{position:relative;overflow:hidden;padding:42px 38px;border-radius:var(--r-lg);border:1px solid var(--accent-100);background:linear-gradient(145deg,var(--accent-25) 0%,var(--white) 68%,var(--violet-50) 100%);box-shadow:var(--shadow)}
.update-spotlight>*{position:relative;z-index:var(--z-raised)}
.update-year{position:absolute;right:-10px;bottom:-42px;z-index:var(--z-bg);font-size:var(--fs-mega);line-height:1;font-weight:900;color:rgba(37,99,235,.075);letter-spacing:-9px}
.update-spotlight h2{color:var(--ink);font-size:var(--fs-h2);line-height:1.12;letter-spacing:-1.2px;margin-bottom:16px}
.update-spotlight>p{color:var(--muted);font-size:var(--fs-md);margin-bottom:26px}
.update-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.update-card{display:grid;grid-template-columns:48px 1fr;gap:15px;align-items:start;padding:22px 20px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--white);box-shadow:0 10px 28px rgba(11,28,70,.05)}
.update-card:last-child{grid-column:1/-1}
.update-card-icon{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);transition:background .28s ease,color .28s ease,transform .28s ease}
.update-card-icon .ic{width:21px;height:21px}
.update-card h3{color:var(--ink);font-size:var(--fs-lg);margin-bottom:6px}
.update-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
@media(hover:hover){.update-card:hover .update-card-icon{background:linear-gradient(140deg,var(--blue),var(--blue-bright));color:var(--white);transform:scale(1.05) rotate(-3deg)}}
.update-action{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:24px;padding:22px 24px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--accent-100);box-shadow:0 16px 38px rgba(37,99,235,.09)}
.update-action p{color:var(--navy);font-weight:650;line-height:1.6}
.update-action a{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:var(--r-pill);background:var(--cta);color:var(--white);font-weight:750;white-space:nowrap;box-shadow:0 8px 20px rgba(234,88,12,.22);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.update-action a:hover{background:var(--cta-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(194,65,12,.27)}

/* FAQ helper button restored */
.faq-intro .btn{margin-top:2px}

/* Closing CTA exactly returns to the GST registration 8 colour treatment */
.closing-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--blue) 140%);border:0;color:var(--white);box-shadow:0 30px 70px rgba(7,18,48,.22)}
.closing-panel h2{color:var(--white)}
.closing-panel p{color:rgba(255,255,255,.82)}

@media(min-width:981px){
  .pricing-note{white-space:nowrap;font-size:var(--fs-sm);letter-spacing:-.12px}
}
@media(min-width:981px) and (max-width:1240px){
  .hero-trust-row{gap:15px}.hero-trust-row .trust-item strong{font-size:var(--fs-md)}.hero-trust-row .trust-item span{font-size:var(--fs-xs)}
  .why-stage,.update-stage{gap:24px}.why-feature,.update-spotlight{padding:34px 30px}
}
@media(max-width:980px){
  .hero-trust-row{max-width:none;justify-content:flex-start;gap:18px;flex-wrap:wrap}.hero-trust-row .trust-divider{display:none}.hero-trust-row .trust-item{min-width:calc(50% - 12px)}
  .why-stage,.update-stage{grid-template-columns:1fr}.why-feature{min-height:auto}.update-cards{grid-template-columns:1fr 1fr}
  .update-action{grid-template-columns:1fr}.update-action a{justify-self:start}
}
@media(max-width:640px){
  .hero-trust-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-trust-row .trust-item{min-width:0;padding:0}.hero-trust-row .trust-item strong{font-size:var(--fs-lg)}.hero-trust-row .trust-item span{font-size:var(--fs-xs)}
  .price small{font-size:var(--fs-sm)}
  .why-feature,.update-spotlight{padding:30px 24px;border-radius:var(--r-lg)}.why-feature-icon{width:64px;height:64px;border-radius:var(--r-md)}.why-feature-icon .ic{width:29px;height:29px}
  .why-reasons,.update-cards{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;width:100vw;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:4px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .why-reasons::-webkit-scrollbar,.update-cards::-webkit-scrollbar{display:none}
  .why-reason,.update-card,.update-card:last-child{flex:0 0 84vw;grid-column:auto;scroll-snap-align:center;min-height:0}
  .why-reason{grid-template-columns:52px 1fr}.why-arrow{display:none}
  .update-card{grid-template-columns:46px 1fr}
  .update-action{padding:20px}.update-action a{white-space:normal;text-align:center;width:100%}
  .compliance-intro .kicker{font-size:var(--fs-sm)}
}
@media(prefers-reduced-motion:reduce){.why-orbit{animation:none}}


/* =====================================================================
   FINAL CLIENT-REQUESTED REVISIONS (loads last — wins the cascade)
   ===================================================================== */

/* 1 — Header CTA must NOT turn its text blue on hover
   (.nav-links a:hover was bleeding blue onto the button text) */
.nav-links a.btn:hover,
.nav-links a.btn-primary:hover{ color:var(--white); }

/* 2 — Uniform button size everywhere EXCEPT the header nav.
   Header keeps its own compact size; all body buttons share one size. */
main .btn{
  padding:14px 30px;
  font-size:var(--fs-base);
  line-height:1;
  border-radius:var(--r-pill);
}
.nav .btn{ padding:11px 22px; font-size:var(--fs-base); }          /* header stays distinct */
.update-action a.btn{ padding:14px 30px; font-size:var(--fs-base); white-space:nowrap; }

/* 3 — Hero form vertically centred against the copy on the left */
.hero-grid{ align-items:center; }
.lead-wrap{ align-self:center; }

/* 4 — Section intro lines stay on ONE line when there is room */
.section-head{ max-width:1000px; }
.section-head p{ max-width:none; margin-left:auto; margin-right:auto; text-wrap:balance; }

/* ---------------------------------------------------------------------
   AIRIER, CALMER BACK-HALF  (desktop breathing room + softer surfaces)
   --------------------------------------------------------------------- */
@media(min-width:981px){
  section{ padding:112px 0; }
  .split-feature{ gap:38px; }
  .benefit-grid{ gap:18px; }
  .docs-showcase{ gap:56px; }
  .doc-orbit-grid{ gap:18px; }
  .compliance-layout{ gap:66px; }
  .service-list{ gap:15px; }
}
/* one soft, consistent shadow instead of many competing heavy ones */
.benefit,.doc-orbit-card,.return-row,.service-pill,.update-card,.why-reason,.price-card{
  box-shadow:0 10px 30px rgba(11,28,70,.05);
}
.feature-intro,.why-feature{ box-shadow:0 16px 46px rgba(11,28,70,.06); }
.doc-orbit-card,.benefit,.return-row{ background:var(--white); }

/* softer, quieter animated document watermark so the docs area reads calmer */
.document-motion-bg span{ opacity:.03; }

/* make the after-registration alert CTA read clearly as an action */
.nil-alert a{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 18px; border-radius:var(--r-pill);
  background:var(--cta); color:var(--white); font-weight:700;
  box-shadow:0 8px 20px rgba(234,88,12,.22);
}
.nil-alert a:hover{ background:var(--cta-dark); }

/* ---------------------------------------------------------------------
   PROCESS — compact horizontal step flow (fills width, no dead space)
   3 steps across x 2 rows, borderless, with subtle connectors
   --------------------------------------------------------------------- */
.process-showcase{ background:linear-gradient(180deg,var(--white) 0%,var(--blue-wash) 60%,var(--white) 100%); }
.process-path{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px 40px;
  max-width:1060px;
  margin:6px auto 0;
  padding:0;
  position:relative;
}
.process-path::before{ display:none; }
.process-step{
  position:relative;
  display:block;
  padding:0;
  margin:0;
  min-height:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  flex:none;
}
/* number chip */
.process-step .step-number{
  position:relative; z-index:var(--z-raised);
  width:52px; height:52px; flex:none;
  border-radius:var(--r-md);
  font-size:var(--fs-lg);
  box-shadow:0 10px 22px rgba(37,99,235,.24);
  margin:0 0 18px 0;
}
/* subtle connector to the next step in the same row */
.process-step::after{
  content:"";
  display:block;
  position:absolute;
  top:26px; left:64px; right:-40px; height:2px;
  background:linear-gradient(90deg,rgba(37,99,235,.5),rgba(59,130,246,.10));
  z-index:var(--z-base);
}
.process-step:nth-child(3n)::after,
.process-step:last-child::after{ display:none; }
.process-step h3{ font-size:var(--fs-lg); margin:0 0 6px; color:var(--ink); }
.process-step p{ font-size:var(--fs-base); color:var(--muted); max-width:none; line-height:1.6; }
.process-showcase .center-cta{ margin-top:46px; }
@media(hover:hover){
  .process-step:hover{ transform:none; box-shadow:none; border-color:transparent; }
  .process-step:hover .step-number{ transform:translateY(-3px) scale(1.05); }
}
@media(min-width:641px) and (max-width:980px){
  .process-path{ grid-template-columns:repeat(2,1fr); gap:30px 34px; max-width:640px; }
  .process-step:nth-child(3n)::after{ display:block; }
  .process-step:nth-child(2n)::after,
  .process-step:last-child::after{ display:none; }
}
@media(max-width:640px){
  .process-path{ display:grid; grid-template-columns:1fr;
                 gap:20px; max-width:none; margin:6px 0 0; overflow:visible;
                 scroll-snap-type:none; }
  .process-step{ display:grid; grid-template-columns:52px 1fr; gap:16px;
                 align-items:start; flex:none; min-width:0; scroll-snap-align:none; }
  .process-step .step-number{ margin:0; width:50px; height:50px; }
  .process-step::after{ display:none; }
  .process-step h3{ margin-top:4px; }
}

/* ---------------------------------------------------------------------
   GST 2026 — restructured into a distinct, classy centred editorial band
   (clearly different from the "Why one-startup" panel + list section)
   --------------------------------------------------------------------- */
.update-redesign{ background:linear-gradient(180deg,var(--blue-wash) 0%,var(--white) 100%); }
.update-stage{ display:block; }

/* centred headline block with a large ghost-year watermark */
.update-spotlight{
  position:relative;
  max-width:820px; margin:0 auto 50px;
  padding:0 16px;
  text-align:center;
  background:transparent;
  border:0;
  box-shadow:none;
}
.update-spotlight .kicker{ display:block; }
.update-spotlight h2{ margin:0 auto 16px; max-width:760px; }
.update-spotlight>p{ margin:0 auto 26px; max-width:640px; }
.update-year{
  left:50%; right:auto;
  top:-34px; bottom:auto;
  transform:translateX(-50%);
  font-size:clamp(120px,20vw,168px);
  letter-spacing:-8px;
  color:rgba(37,99,235,.06);
}

/* the five changes as calm, centred, top-icon tiles */
.update-card{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:14px;
  padding:32px 26px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--white);
}
.update-card:last-child{ grid-column:auto; }
.update-card-icon{ width:56px; height:56px; border-radius:var(--r-md); }
.update-card-icon .ic{ width:24px; height:24px; }
.update-card h3{ font-size:var(--fs-lg); margin-bottom:6px; }
.update-card p{ font-size:var(--fs-base); }

@media(min-width:981px){
  .update-cards{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:20px; max-width:1060px; margin:0 auto;
  }
  .update-cards .update-card{ flex:0 1 300px; }
}
@media(min-width:641px) and (max-width:980px){
  .update-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
  .update-cards .update-card{ flex:0 1 260px; }
}

/* closing "review before filing" line becomes a clean centred CTA panel */
.update-action{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:18px;
  grid-template-columns:none;
  max-width:760px; margin:48px auto 0;
  padding:32px 30px;
  border-radius:var(--r-lg);
  background:linear-gradient(145deg,var(--brand-tint),var(--white));
  border:1px solid var(--accent-50);
  box-shadow:0 16px 42px rgba(37,99,235,.07);
}
.update-action p{ color:var(--navy); font-size:var(--fs-md); line-height:1.6; }

/* ---------------------------------------------------------------------
   WHY one-startup — right side is now a clean DIVIDED LIST (no tiles)
   left feature panel kept as the single hero element
   --------------------------------------------------------------------- */
@media(min-width:981px){ .why-stage{ gap:40px; } }
.why-feature{ background:linear-gradient(145deg,var(--tint-1) 0%,var(--white) 60%,var(--tint-4) 100%); }

.why-reasons{ gap:0; }
.why-reason{
  background:transparent;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
  padding:22px 6px;
}
.why-reason:first-child{ border-top:0; padding-top:4px; }
.why-reason-icon{ background:var(--blue-tint); box-shadow:none; }
@media(hover:hover){
  .why-reason:hover{
    transform:none; box-shadow:none;
    background:transparent; border-color:var(--border);
  }
  .why-reason:hover .why-reason-icon{ background:linear-gradient(140deg,var(--blue),var(--blue-bright)); color:var(--white); }
}

/* ---------------------------------------------------------------------
   GST 2026 — the five changes are now a NUMBERED EDITORIAL LIST (no tiles)
   two airy columns, gradient index numbers, borderless — distinct from
   the icon list in "Why one-startup"
   --------------------------------------------------------------------- */
.update-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 60px;
  max-width:940px;
  margin:4px auto 0;
  overflow:visible;
  counter-reset:upd;
}
.update-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  justify-items:start;
  text-align:left;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
  min-width:0;
  flex:none;
  counter-increment:upd;
  scroll-snap-align:none;
}
.update-card:last-child{ grid-column:auto; }
.update-card-icon{ display:none; }
.update-card::before{
  content:counter(upd,decimal-leading-zero);
  font-family:Inter,Poppins,Arial,sans-serif;
  font-size:var(--fs-2xl); font-weight:800; line-height:1; padding-top:2px;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.update-card h3{ text-align:left; margin-bottom:6px; font-size:var(--fs-lg); }
.update-card p{ text-align:left; font-size:var(--fs-base); }
@media(hover:hover){
  .update-card:hover{ transform:none; box-shadow:none; border:0; }
  .update-card:hover .update-card-icon{ background:var(--blue-tint); color:var(--blue); transform:none; }
}
@media(max-width:640px){
  .update-cards{ grid-template-columns:1fr; gap:26px;
                 margin:4px 0 0; scroll-snap-type:none; }
  .update-card{ grid-template-columns:auto 1fr; }
}


/* =====================================================================
   FLOW PASS — one continuous page + point fixes
   ===================================================================== */

/* (5) Make the whole page read as ONE continuous surface.
   Remove the per-section background "bands" that created visible seams. */
html{ background:var(--white); }
body{
  background:linear-gradient(180deg,
      var(--white) 0%,
      var(--surface) 22%,
      var(--tint-2) 50%,
      var(--surface) 78%,
      var(--white) 100%);
  background-attachment:fixed;
}
/* every full-width content section becomes transparent → no seams/lines */
section,
.hero,.basics,.pricing,.light-section,.docs,.docs-motion,
.process,.process-showcase,.compliance-section,.services-section,
.why-us-light,.why-us-revamp,.update-section,.update-redesign,
.faq-section,.closing{
  background:transparent;
}

/* (3) "Why GST registration is worth doing properly?" — one line on desktop */
@media(min-width:981px){
  #why-it-matters .section-head{ max-width:none; }
  #why-it-matters .section-head h2{
    white-space:normal;
    max-width:1160px;
    font-size:var(--fs-h2);
  }
}

/* (2) PROCESS — a consistent accent line on EVERY step (incl. 3rd & 6th) */
.process-step::after{
  content:""; display:block;
  position:absolute;
  left:64px; right:auto; width:46px;
  top:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),rgba(59,130,246,.15));
}
.process-step:nth-child(3n)::after,
.process-step:last-child::after{ display:block; }
@media(max-width:640px){ .process-step::after{ display:none; } }

/* Keep the 4th update beside the 3rd update in the two-column grid */
.update-cards .update-card:last-child{
  grid-column:auto;
  justify-self:stretch;
  max-width:none;
  width:auto;
  margin:0;
}
@media(max-width:640px){
  .update-cards .update-card:last-child{ grid-column:auto; max-width:none; width:auto; margin:0; }
}



/* =====================================================================
   USER REQUEST — continuous page flow + targeted visual corrections
   ===================================================================== */

/* One uninterrupted visual surface: no alternating section bands or divider seams. */
html, body { background:var(--white); }
body {
  background:linear-gradient(180deg,var(--white) 0%,var(--brand-wash) 34%,var(--surface) 66%,var(--white) 100%);
  background-attachment:fixed;
}
main, main section,
.hero,.basics,.pricing,.light-section,.docs,.docs-motion,
.process,.process-showcase,.compliance-section,.services-section,
.why-us-light,.why-us-revamp,.update-section,.update-redesign,
.faq-section,.closing {
  background:transparent;
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}
@media(min-width:981px){
  section{ padding:92px 0; }
}

/* Why it matters: keep the "Done right" statement aligned with the actual benefits. */
#why-it-matters .why-matters-layout{ align-items:stretch; }
#why-it-matters .feature-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
}
#why-it-matters .feature-intro h3{ margin-bottom:0; }

/* Process heading/subheading stay on one line on desktop where there is room. */
@media(min-width:981px){
  #process .section-head{ max-width:1160px; }
  #process .section-head h2{
    max-width:1160px;
    white-space:normal;
    font-size:var(--fs-h2);
  }
  #process .section-head p{
    max-width:1160px;
    white-space:normal;
    font-size:var(--fs-md);
  }
}

/* Process: every step is a distinct card again; no connector lines between cards. */
#process .process-path{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1160px;
  margin:6px auto 0;
  padding:0;
}
#process .process-path::before{ display:none; }
#process .process-step{
  position:relative;
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-height:0;
  padding:26px 22px;
  border:1px solid var(--accent-50);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 32px rgba(11,28,70,.06);
  overflow:hidden;
}
#process .process-step::after{ display:none; }
#process .process-step .step-number{
  flex:0 0 48px;
  width:48px;
  height:48px;
  margin:0;
  border-radius:var(--r-sm);
}
#process .process-step h3{ margin:2px 0 7px; }
#process .process-step p{ line-height:1.58; }
@media(hover:hover){
  #process .process-step:hover{
    transform:translateY(-6px);
    border-color:rgba(37,99,235,.32);
    box-shadow:0 20px 44px rgba(37,99,235,.12);
  }
}
@media(min-width:641px) and (max-width:980px){
  #process .process-path{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px){
  #process .process-path{ grid-template-columns:1fr; gap:14px; }
  #process .process-step{ min-height:0; padding:22px 18px; }
}

/* Why one-startup: restore the right-side points as hoverable cards. */
#why-us .why-reasons{ gap:14px; }
#why-us .why-reason{
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr 26px;
  gap:16px;
  align-items:center;
  padding:20px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 10px 28px rgba(11,28,70,.05);
}
#why-us .why-reason:first-child{
  padding:20px;
  border:1px solid var(--border);
}
@media(hover:hover){
  #why-us .why-reason:hover{
    transform:translateY(-5px);
    background:var(--white);
    border-color:rgba(37,99,235,.32);
    box-shadow:0 20px 44px rgba(37,99,235,.12);
  }
  #why-us .why-reason:hover .why-arrow{
    transform:translate(3px,-3px);
    color:var(--blue);
  }
}
@media(max-width:640px){
  #why-us .why-reason{ grid-template-columns:52px 1fr; }
}


/* =====================================================================
   FINAL FLOW FIX — remove remaining visible line/band between sections
   ===================================================================== */
html,body{
  background:var(--white);
}
body{
  background:var(--white);
  background-image:none;
  background-attachment:scroll;
}
main, section,
.hero,.basics,.pricing,.light-section,.docs,.docs-motion,
.process,.process-showcase,.compliance-section,.services-section,
.why-us-light,.why-us-revamp,.update-section,.update-redesign,
.faq-section,.closing{
  background:transparent;
  border-top:none;
  border-bottom:none;
  box-shadow:none;
}
/* remove the soft background glow that was creating the visible band */
#basics .soft-aurora,
#basics::before,
#basics::after{
  display:none;
  background:none;
}
/* keep the page visually continuous with no seam at the hero/basics join */
.hero{ padding-bottom:72px; margin-bottom:0; }
#basics{ padding-top:72px; margin-top:0; }
/* keep WhatsApp button green */
.floating-whatsapp svg{color:#053d24}
.floating-whatsapp{
  background:var(--wa);
  box-shadow:0 14px 32px rgba(37,211,102,.35);
}



/* =====================================================================
   ONE-FLOW PAGE FIX — single continuous background, zero section seams
   ===================================================================== */
/* Use ONE background for the whole page content. Individual sections are
   transparent so a section ending can never create a visible horizontal band. */
main{
  position:relative;
  background:linear-gradient(180deg,var(--white) 0%,var(--surface) 42%,var(--surface) 72%,var(--white) 100%);
}
main > section{
  background:transparent;
  background-image:none;
  border:0;
  border-top:0;
  border-bottom:0;
  outline:0;
  box-shadow:none;
  margin-top:0;
  margin-bottom:0;
}

/* These decorative layers were clipped to individual sections and therefore
   created the visible horizontal change shown in the screenshot. */
main > section > .aurora,
main > section > .soft-aurora,
#documents > .document-motion-bg{
  display:none;
}

/* Remove any leftover section-edge paint without touching card borders. */
#basics,#pricing,#why-it-matters,#documents,#process,#after-registration,
#other-services,#why-us,#updates,#faq{
  background:transparent;
  background-image:none;
  border-top:none;
  border-bottom:none;
}

/* Keep spacing natural but continuous at the hero → IEC basics transition. */
.hero{
  padding-bottom:76px;
}
#basics{
  padding-top:76px;
}

/* Hero keeps its gradient, but blends into the same continuous page surface.
   The hero ends on exactly the same var(--surface) tone that continues behind the
   next section, so there is no horizontal seam or section-break line. */
main{
  background:linear-gradient(180deg,
    var(--surface) 0%,
    var(--surface) 18%,
    var(--brand-wash) 52%,
    var(--white) 100%);
}
.hero{
  background:linear-gradient(180deg,
    var(--white) 0%,
    var(--brand-wash) 34%,
    var(--tint-3) 72%,
    var(--surface) 100%);
  background-image:linear-gradient(180deg,
    var(--white) 0%,
    var(--brand-wash) 34%,
    var(--tint-3) 72%,
    var(--surface) 100%);
  border:0;
  border-bottom:0;
  box-shadow:none;
}
#basics{
  background:transparent;
  background-image:none;
  border-top:0;
}

/* WhatsApp remains green. */
.floating-whatsapp{
  background:var(--wa);
  color:var(--white);
  box-shadow:0 14px 32px rgba(37,211,102,.35);
}
.sticky-mobile-cta a:last-child{
  background:var(--wa-solid);
  color:var(--white);
}


/* =====================================================================
   HEADER NAVIGATION — Services dropdown + Contact Us + About Us
   Keeps the existing header styling and hero/page design untouched.
   ===================================================================== */
.nav-inner{position:relative}
.nav-links{overflow:visible}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:500;
  cursor:pointer;
  padding:10px 0;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:color .22s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle{color:var(--blue)}
.nav-chevron{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:3px;transition:transform .22s ease}
.nav-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron,
.nav-dropdown.open .nav-chevron{transform:rotate(180deg)}
.services-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translate(-50%,10px);
  width:330px;
  padding:10px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.98);
  box-shadow:0 22px 55px rgba(17,24,39,.14);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  z-index:120;
}
.services-dropdown::before{
  content:"";
  position:absolute;
  top:-13px;
  left:0;
  right:0;
  height:13px;
}
.services-dropdown a{
  display:block;
  padding:11px 13px;
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.35;
  font-weight:550;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.services-dropdown a:hover,
.services-dropdown a:focus-visible{
  background:var(--blue-tint);
  color:var(--blue);
  transform:translateX(2px);
}
.nav-dropdown:hover .services-dropdown,
.nav-dropdown:focus-within .services-dropdown,
.nav-dropdown.open .services-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.mobile-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--white);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  box-shadow:0 8px 18px rgba(30,64,175,.06);
}
.mobile-menu-toggle span{display:block;width:19px;height:2px;border-radius:2px;background:var(--navy);transition:transform .22s ease,opacity .22s ease}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Green WhatsApp CTA used in the header */
.nav-links a.btn-whatsapp{
  background:var(--wa-solid);
  color:var(--white);
  border:1px solid var(--wa-solid);
  box-shadow:0 8px 20px rgba(37,211,102,.22);
}
.nav-links a.btn-whatsapp:hover,
.nav-links a.btn-whatsapp:focus-visible{
  background:var(--success);
  border-color:var(--success);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,211,102,.30);
}

@media(max-width:980px){
  .mobile-menu-toggle{display:inline-flex}
  .nav-links{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 55px rgba(17,24,39,.14);
    backdrop-filter:blur(18px);
    z-index:130;
  }
  .nav-links.mobile-open{display:flex}
  .nav-links>a,
  .nav-dropdown-toggle{width:100%;padding:12px 13px;border-radius:var(--r-sm);text-align:left;justify-content:space-between;color:var(--ink)}
  .nav-links>a:not(.btn):hover,
  .nav-dropdown-toggle:hover{background:var(--blue-tint);color:var(--blue)}
  .nav-dropdown{display:block;width:100%}
  .services-dropdown{
    position:static;
    width:100%;
    transform:none;
    margin:2px 0 8px;
    padding:6px 0 6px 12px;
    border:0;
    border-left:2px solid var(--accent-50);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;
    transition:none;
  }
  .nav-dropdown.open .services-dropdown{display:block}
  .services-dropdown a{padding:10px 12px;font-size:var(--fs-sm)}
  .nav-links .btn{margin-top:5px;width:100%;justify-content:center;text-align:center}
}


/* ============================================================
   UX / A11Y FIXES  — added in this pass
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--brand-dark);color:var(--white);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:var(--fs-sm)}
.skip-link:focus{left:0}
#main-content:focus{outline:none}

.top-bar .container{position:relative;padding-right:34px}
.top-bar-close{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:var(--fs-xl);line-height:1;cursor:pointer;opacity:.7;width:32px;height:32px;border-radius:var(--r-xs)}
.top-bar-close:hover{opacity:1}
.top-bar.is-hidden{display:none}

.field-label .opt{font-weight:500;color:var(--muted)}
.consent-group{margin-top:6px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text);line-height:1.5;cursor:pointer}
.consent input{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--brand-accent)}
.consent a{color:var(--brand-accent);font-weight:600;text-decoration:underline}

/* nav links: current page state */
.services-dropdown a[aria-current="page"]{color:var(--brand-accent);font-weight:700}

@media (max-width:640px){
  /* top bar was eating ~190px of the mobile viewport before the H1 */
  .top-bar .container{flex-wrap:nowrap;gap:0}
  .top-bar-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-bar-contact{display:none}
  /* get a CTA above the fold: tighten hero, split the lead copy */
  .hero{padding:18px 0 44px}
  .breadcrumb{margin-bottom:12px}
  .hero-lead{font-size:var(--fs-md);margin-bottom:20px}
  /* reorder only — nothing is hidden: CTA moves above the second paragraph */
  .hero-copy{display:flex;flex-direction:column}
  .breadcrumb{order:1}
  .hero-copy h1{order:2}
  .hero-lead{order:3}
  .hero-actions{order:4;margin-bottom:22px}
  .hero-lead-more{order:5;margin-bottom:22px}
  .contact-direct{order:6} /* default order:0 was pulling cards above breadcrumb */
  .hero-trust-row{order:7}
  .disclosure-line{order:8;margin-top:18px}
}
@media (min-width:641px){ .hero-lead-more{margin-top:-14px} }


/* --- grid/flex children must be allowed to shrink (min-width:auto is the default
       and was pushing .nil-alert 22px past the viewport on mobile) --- */
.nil-alert>*,.why-reason>*,.update-card>*,.qa>*,.doc-card>*,.trust-card>*,
.process-step>*,.mini-card>*,.price-card>*,.why-feature>*,.auth-item>*{min-width:0}
.nil-alert,.why-reason,.update-card,.why-feature{overflow-wrap:anywhere}

@media (max-width:640px){
  /* leftover fixed min-heights from the appended revamp blocks */
  .why-reason,.update-card,.why-feature,.update-tile,.trust-card,
  .document-card,.process-step,.mini-card,.price-card{min-height:0}
  .docs-centerpiece{min-height:260px}
  .paper-stack{width:min(240px,72vw)}
}



/* --- fixed overflow sources found by measuring at 390px --- */
.why-feature>p{max-width:min(560px,100%)}
@media (max-width:640px){
  .nil-alert a{white-space:normal}          /* nowrap CTA was 24px wider than its column */
  .why-feature{overflow:hidden}
  .top-bar-msg{font-size:var(--fs-xs)}
}


@media (max-width:640px){
  /* these were set to display:flex + overflow-x:auto but kept flex-direction:column
     from an earlier rule, so they stacked (why-reasons alone was 1716px tall) */
  .why-reasons,.update-cards,.trust-cards,.document-grid,.process-path,
  .compliance-grid,.service-list,.update-mosaic,.pricing-grid{flex-direction:row;flex-wrap:nowrap}
  .why-reasons>*,.update-cards>*{flex:0 0 84vw;scroll-snap-align:center}
  /* trim vertical rhythm on phones */
  section{padding:46px 0}
  .section-head{margin-bottom:26px}
}




/* ===== Lead form visual match — reference screenshot ===== */
.reference-lead-card{
  border:1px solid var(--border-strong);
  border-radius:28px;
  padding:34px 28px 30px;
  background:var(--white);
  box-shadow:0 22px 52px rgba(11,28,70,.10);
}
.reference-lead-card h2{
  margin-bottom:6px;
  color:var(--navy);
  font-size:clamp(20px,2vw,23px);
  line-height:1.25;
  letter-spacing:-.45px;
  text-align:center;
}
.reference-lead-card .lead-sub{
  margin-bottom:20px;
  color:var(--muted);
  font-size:var(--fs-base);
  text-align:center;
}
.reference-lead-card .form-row{gap:12px;}
.reference-lead-card .form-group{margin-bottom:11px;position:relative;}
.reference-lead-card .reference-field-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.reference-lead-card input:not([type="checkbox"]),
.reference-lead-card select,
.reference-lead-card textarea{
  min-height:56px;
  padding:15px 15px;
  border:1px solid var(--border-strong);
  border-radius:13px;
  background:var(--white);
  color:var(--ink);
  font-size:var(--fs-md);
  box-shadow:none;
}
.reference-lead-card input::placeholder,
.reference-lead-card textarea::placeholder{color:var(--muted);opacity:1;}
.reference-lead-card select{cursor:pointer;}
.reference-lead-card input:not([type="checkbox"]):hover,
.reference-lead-card select:hover,
.reference-lead-card textarea:hover{
  border-color:var(--accent-150);
}
.reference-lead-card textarea{min-height:86px;resize:vertical;}
.reference-lead-card input:not([type="checkbox"]):focus,
.reference-lead-card select:focus,
.reference-lead-card textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.reference-lead-card .reference-consent-group{margin:4px 0 14px;}
.reference-lead-card .consent{font-size:12px;line-height:1.45;color:var(--muted);}
.reference-lead-card .consent input{margin-top:1px;}
.reference-lead-card .form-submit{
  min-height:44px;
  margin-top:0;
  padding:12px 22px;
  border-radius:999px;
  font-size:var(--fs-base);
}
.reference-lead-card + .form-disclaimer{margin-top:10px;font-size:12px;}
@media(max-width:640px){
  .reference-lead-card{padding:26px 18px 22px;border-radius:22px;}
  .reference-lead-card .form-row{grid-template-columns:1fr;gap:0;}
  .reference-lead-card input:not([type="checkbox"]),
  .reference-lead-card select,
  .reference-lead-card textarea{min-height:54px;}
  .reference-lead-card textarea{min-height:84px;}
}



/* ===== FINAL form interaction restore — keep reference layout ===== */
.reference-lead-card input:not([type="checkbox"]),
.reference-lead-card select,
.reference-lead-card textarea{
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
@media (hover:hover){
  .reference-lead-card input:not([type="checkbox"]):hover,
  .reference-lead-card select:hover,
  .reference-lead-card textarea:hover{
    border-color:var(--blue);
    background:var(--white);
    box-shadow:0 0 0 3px rgba(37,99,235,.07), 0 8px 20px rgba(11,28,70,.05);
    transform:translateY(-1px);
  }
}
.reference-lead-card input:not([type="checkbox"]):focus,
.reference-lead-card select:focus,
.reference-lead-card textarea:focus{
  border-color:var(--blue);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  transform:none;
}
.reference-lead-card .form-submit{
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.reference-lead-card .form-submit:hover{
  background:var(--cta-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(194,65,12,.27),0 0 0 3px rgba(234,88,12,.07);
}


/* ===== Pricing structure matched to approved tall-card reference ===== */
#pricing .pricing-grid{
  align-items:stretch;
  gap:20px;
}
#pricing .price-card{
  display:flex;
  flex-direction:column;
  min-height:505px;
  padding:32px 28px 30px;
  border:1px solid var(--border-strong);
  border-radius:24px;
  background:var(--white);
  box-shadow:0 14px 34px rgba(11,28,70,.07);
}
#pricing .price-card.highlight{
  border:1.5px solid var(--blue);
  background:linear-gradient(180deg,var(--white) 0%,var(--brand-wash) 100%);
}
#pricing .price-card h3{
  padding-right:0;
  margin:0 0 8px;
  color:var(--navy);
  font-size:20px;
  line-height:1.3;
  font-weight:800;
  text-transform:none;
}
#pricing .price-card .tag{
  min-height:42px;
  margin:0 0 28px;
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.55;
}
#pricing .price-card .price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px;
  margin:0 0 28px;
  color:var(--navy);
  font-size:clamp(38px,3.15vw,48px);
  line-height:1;
  font-weight:850;
  letter-spacing:-1.8px;
}
#pricing .price-card .price small{
  display:inline;
  margin:0;
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.3;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
}
#pricing .price-card .features{
  width:100%;
  margin:auto 0 0;
  padding:0;
}
#pricing .price-card .features li{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 0 10px 28px;
  border-bottom:1px dashed var(--border-strong);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.45;
}
#pricing .price-card .features li:last-child{
  border-bottom:0;
}
#pricing .price-card .features li::before{
  left:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--blue);
  font-size:17px;
  font-weight:900;
}
@media(hover:hover){
  #pricing .price-card:hover{
    transform:translateY(-6px);
    border-color:rgba(37,99,235,.42);
    box-shadow:0 22px 50px rgba(37,99,235,.13);
  }
  #pricing .price-card.highlight:hover{
    border-color:var(--blue);
  }
}
@media(min-width:981px){
  #pricing .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:641px) and (max-width:980px){
  #pricing .price-card{min-height:480px;}
  #pricing .price-card.highlight{grid-column:auto;max-width:none;margin-inline:0;}
}
@media(max-width:640px){
  #pricing .price-card{
    flex:0 0 84vw;
    min-height:455px;
    padding:28px 24px 26px;
  }
  #pricing .price-card .tag{min-height:0;margin-bottom:24px;}
  #pricing .price-card .price{font-size:40px;margin-bottom:24px;}
}

/* ===== Requested IEC refinements — preserve existing sizing/borders ===== */

/* Primary button colour from the previously approved IEC file. */
.btn-primary,
.update-action a.btn-primary,
.update-action a:not(.btn-blue){ background:var(--cta); }
.btn-primary:hover,
.update-action a.btn-primary:hover,
.update-action a:not(.btn-blue):hover{ background:#c2410c; }
.sticky-mobile-cta a:first-child{ background:var(--cta); }

/* Keep every WhatsApp CTA green. */
.nav-links a.btn-whatsapp,
.floating-whatsapp,
.sticky-mobile-cta a:last-child{ background:var(--wa-solid); }

/* GST-style soft blue page gradient, applied as one continuous canvas so
   there are no horizontal section seams or separator lines. */
main{
  background:linear-gradient(180deg,
    #ffffff 0%,
    #f5f9ff 16%,
    #f7faff 34%,
    #ffffff 50%,
    #f7faff 68%,
    #f5f9ff 84%,
    #ffffff 100%);
}
main > section{
  background:transparent;
  background-image:none;
  border-top:0;
  border-bottom:0;
}
.hero{
  background:transparent;
  background-image:none;
  border-bottom:0;
}

/* Restore the faint moving IEC / DGFT background typography used in the GST reference,
   without restoring any section background or line. */
#documents > .document-motion-bg{ display:block; }

/* The 2026 closing box should span the full content width. */
.update-action{
  width:100%;
  max-width:none;
}

/* Layout only for the two newly requested sections; typography/borders come
   from existing section-head and benefit styles. */
.reviews-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.blog-card{ display:block; }

@media(max-width:980px){
  .reviews-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .reviews-grid{ grid-template-columns:1fr; }
}

/* ===== Final content refinements — no font-size/border/section-size changes ===== */

/* Stack the supporting copy inside the Done Right box so it no longer feels empty. */
#why-it-matters .feature-intro{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
#why-it-matters .feature-intro h3{ margin-bottom:18px; }
#why-it-matters .feature-intro p{ color:var(--muted); }

/* Testimonials use the existing benefit-card system; only the grid count changes. */
#testimonials .testimonials-grid{ grid-template-columns:repeat(3,1fr); }

/* Let headings use one line only when they naturally fit. Never force them past the page edge.
   Font sizes remain untouched; text wraps to a second line when needed. */
@media(min-width:981px){
  .section-head{ max-width:1160px; }
  .section-head h2,
  .section-head > p,
  #why-it-matters .section-head h2,
  #process .section-head h2,
  #process .section-head p,
  #updates .update-spotlight h2,
  #updates .update-spotlight > p{
    white-space:normal !important;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
  }
}

@media(max-width:980px){
  #testimonials .testimonials-grid{ grid-template-columns:1fr; }
}

/* Overflow safety: earlier desktop-only nowrap rules are intentionally neutralised. */
@media(min-width:981px){
  #why-it-matters .section-head h2,
  #process .section-head h2,
  #process .section-head p{ white-space:normal !important; max-width:1160px; }
}

/* ===== Auto-scrolling testimonials & website blogs =====
   Existing type scale, button sizes, borders and section spacing are untouched. */
.auto-scroll-viewport{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.auto-scroll-track{ display:flex; width:max-content; will-change:transform; }
.auto-scroll-group{ display:flex; gap:14px; padding-right:14px; }
.testimonial-track{ animation:testimonialAutoScroll 42s linear infinite; }
.blog-track{ animation:blogAutoScroll 48s linear infinite; }
.auto-scroll-viewport:hover .auto-scroll-track,
.auto-scroll-viewport:focus-within .auto-scroll-track{ animation-play-state:paused; }
@keyframes testimonialAutoScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes blogAutoScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

#testimonials .testimonial-card{
  width:min(360px,82vw);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
#testimonials .testimonial-card span{ display:block; }

#blog .blog-card{
  width:min(370px,84vw);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
#blog .blog-card-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
}
#blog .blog-card span{ display:block; }
#blog .blog-card .btn{ margin-top:auto; }

@media(max-width:640px){
  .auto-scroll-viewport{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .auto-scroll-track{ animation:none !important; }
  .auto-scroll-viewport{
    overflow-x:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .auto-scroll-track .auto-scroll-group[aria-hidden="true"]{ display:none; }
}

/* ===== Final requested refinements — preserve existing type/border/section sizing ===== */

/* Slightly more breathing room in the lead form, without changing field or type sizes. */
.lead-card{padding-top:32px;padding-bottom:32px;}
@media(max-width:640px){.lead-card{padding-top:26px;padding-bottom:26px;}}

/* Keep the After Registration kicker on one line. */
#after-registration .compliance-intro .kicker{white-space:nowrap;}

/* Match the after-registration CTA to the site's primary CTA colour. */
#after-registration .nil-alert a{background:var(--cta);color:var(--white);}
#after-registration .nil-alert a:hover{background:#c2410c;}

/* 2026 section: clean, independent editorial block — no clipped watermark or divider line. */
#updates,#updates::before,#updates::after{border:0;background:transparent;box-shadow:none;}
#updates::before,#updates::after{display:none!important;content:none!important;}
#updates .update-year{display:none!important;}
#updates .update-spotlight{overflow:visible;max-width:1160px;margin-left:auto;margin-right:auto;background:transparent;border:0;box-shadow:none;}
#updates .update-spotlight h2{max-width:1160px;}
#updates .update-spotlight>p{max-width:1000px;}
@media(min-width:981px){
  #updates .update-spotlight h2{white-space:normal!important;text-wrap:balance;}
  #updates .update-spotlight>p{white-space:nowrap!important;}
}
@media(max-width:980px){
  #updates .update-spotlight>p{white-space:normal!important;}
}

/* Static blog grid: no marquee/auto-scroll. */
#blog .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;overflow:visible;}
#blog .blog-grid .blog-card{width:100%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
#blog .blog-card-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;}
#blog .blog-read-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;color:var(--blue);font-weight:700;background:transparent;padding:0;border:0;box-shadow:none;}
#blog .blog-read-link:hover{text-decoration:underline;color:var(--accent-800);}
@media(max-width:980px){#blog .blog-grid{grid-template-columns:1fr;}}

/* Preserve auto-scroll only for testimonials. */
#testimonials .testimonial-track{animation:testimonialAutoScroll 42s linear infinite;}

/* Allow headings to stay on one line only when they naturally fit; never overflow. */
.section-head h2,.section-head>p,#updates .update-spotlight h2,#updates .update-spotlight>p{
  max-width:100%;overflow-wrap:normal;word-break:normal;
}
@media(min-width:981px){
  #why-us .why-stage{grid-template-columns:1.08fr .92fr;}
}
/* ============================================================
   v1.1 PATCHES — applied on top of the page's own stylesheet
   ============================================================ */
/* Form labels, validation, consent */
.field-label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:6px}
.field-label .opt{font-weight:500;color:var(--muted)}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:var(--danger);background:var(--danger-bg)}
.field-error{display:none;font-size:var(--fs-sm);color:var(--danger);margin-top:6px;font-weight:500}
.form-group.has-error .field-error{display:block}
.consent-group{margin-top:6px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text);line-height:1.5;cursor:pointer}
.consent input{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--brand-accent)}
.consent a{color:var(--brand-accent);font-weight:600;text-decoration:underline}

/* Tap targets: buttons were 43px, blog link ~25px */
.btn{line-height:1.2;min-height:48px}
/* WhatsApp keeps its official #25D366. White text on it is 1.98:1, so the
   LABEL goes dark ink (9.44:1) rather than changing the brand green. */
.btn-whatsapp,.btn-whatsapp:hover,.sticky-mobile-cta a.wa,.sticky-mobile-cta a:last-child{color:var(--ink)!important}
.btn-whatsapp{background:var(--wa)!important;border-color:var(--wa)!important}
.btn-whatsapp:hover{background:var(--wa-solid-dark)!important;border-color:var(--wa-solid-dark)!important}
.sticky-mobile-cta a.wa,.sticky-mobile-cta a:last-child{background:var(--wa)!important}
.floating-whatsapp svg{color:var(--ink)}
.blog-read-link{padding:10px 0;min-height:44px;align-items:center}
.top-bar-close{width:36px;height:36px}
.logo{padding:8px 0;display:inline-flex}

/* Testimonials: auto-scroll only where pause-on-hover can exist.
   On touch there is no hover and overflow:hidden blocked manual scroll
   (WCAG 2.2.2). Touch gets a real swipeable carousel. */
@media (hover:none),(pointer:coarse){
  .auto-scroll-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .auto-scroll-viewport::-webkit-scrollbar{display:none}
  .testimonial-track,.auto-scroll-track{animation:none!important}
  .testimonial-card{scroll-snap-align:center}
  .auto-scroll-group[aria-hidden="true"]{display:none}
}

/* Aurora: 3 animated 90px-blur layers is sustained GPU cost on mid-range
   Android. Animate only on hover-capable devices; 1 static blob on phones. */
@media (hover:none),(pointer:coarse){
  .soft-aurora .glow,.aurora .blob{animation:none!important;will-change:auto}
}
@media (max-width:640px){
  .soft-aurora .g2,.soft-aurora .g3,.aurora .b2,.aurora .b3{display:none}
}

/* 768 band: v1.0 jumped 3-col straight to 1-col */
@media (min-width:641px) and (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}



/* Reviewer byline + freshness (E-E-A-T / AEO) */
.page-byline{display:flex;gap:14px;align-items:flex-start;margin:22px 0;padding:16px 18px;background:var(--brand-tint);border:1px solid var(--accent-50);border-radius:var(--r-md)}
.byline-avatar{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--brand-accent);color:var(--white);font-weight:800;font-size:var(--fs-sm)}
.byline-name{font-size:var(--fs-base);color:var(--ink);margin:0 0 2px}
.byline-name a{color:var(--brand-accent);font-weight:700}
.byline-meta{font-size:var(--fs-sm);color:var(--muted);margin:0;line-height:1.5}
.byline-meta a{color:var(--brand-accent);text-decoration:underline}
@media(max-width:640px){.page-byline{padding:14px}.byline-avatar{flex:0 0 38px;height:38px}}

/* Comparison table (AEO — extractable format) */
.compare-wrap{width:100vw;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;font-size:var(--fs-base);border-bottom:1px solid var(--border);vertical-align:top}
.compare-table thead th{background:var(--brand-tint);color:var(--ink);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.6px}
.compare-table tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}
.compare-table td{color:var(--text)}
.compare-note{margin-top:16px;font-size:var(--fs-base);color:var(--text);text-align:center;max-width:820px;margin-inline:auto}
.compare-note a{color:var(--brand-accent);font-weight:600;text-decoration:underline}
a.service-pill{display:block;min-height:48px;color:inherit}
a.service-pill:hover{border-color:var(--brand-accent);color:var(--brand-accent)}
.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}

/* ============================================================
   FINAL — BASED ON THE USER'S WORKING REFERENCE FILE
   ============================================================ */

/* ---------- ONE CONTINUOUS PAGE FLOW ----------
   Mostly white. Very light blur + flowing curved lines span the WHOLE main
   canvas, so nothing starts/stops at the hero boundary. */
html,
body{
  background:#ffffff !important;
}
main{
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  background:
    radial-gradient(ellipse 720px 620px at 6% 5%, rgba(219,234,254,.24) 0%, rgba(239,246,255,.11) 42%, transparent 72%),
    radial-gradient(ellipse 700px 640px at 94% 19%, rgba(224,231,255,.18) 0%, rgba(248,250,252,.08) 44%, transparent 74%),
    radial-gradient(ellipse 760px 700px at 5% 46%, rgba(226,232,240,.14) 0%, rgba(239,246,255,.08) 45%, transparent 74%),
    radial-gradient(ellipse 760px 720px at 95% 70%, rgba(219,234,254,.14) 0%, rgba(248,250,252,.07) 46%, transparent 76%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 24%,#ffffff 49%,#fafcff 74%,#ffffff 100%) !important;
}

/* Soft blurred colour field — intentionally faint, not a blue page. */
main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 8%, rgba(96,165,250,.10), transparent 13%),
    radial-gradient(circle at 84% 23%, rgba(129,140,248,.07), transparent 15%),
    radial-gradient(circle at 18% 48%, rgba(147,197,253,.07), transparent 14%),
    radial-gradient(circle at 82% 72%, rgba(196,181,253,.055), transparent 15%),
    radial-gradient(circle at 28% 91%, rgba(125,211,252,.05), transparent 14%);
  filter:blur(72px);
  opacity:.72;
}

/* Curved lines run through the full page, not just the hero.
   This avoids the visible "line ends here" problem at section boundaries. */
main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 7200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-120 260 C260 80 520 420 880 250 S1370 80 1720 280' stroke='%2393c5fd' stroke-opacity='.34' stroke-width='1.3'/%3E%3Cpath d='M-140 430 C250 250 540 560 930 420 S1390 250 1740 460' stroke='%23c7d2fe' stroke-opacity='.26' stroke-width='1.1'/%3E%3Cpath d='M-150 1220 C220 1000 520 1380 900 1210 S1380 1020 1740 1250' stroke='%23bfdbfe' stroke-opacity='.28' stroke-width='1.15'/%3E%3Cpath d='M-130 1520 C260 1330 570 1680 980 1510 S1420 1370 1760 1560' stroke='%23dbeafe' stroke-opacity='.32' stroke-width='1.2'/%3E%3Cpath d='M-160 2380 C220 2180 560 2540 960 2350 S1440 2200 1760 2420' stroke='%23c7d2fe' stroke-opacity='.24' stroke-width='1.05'/%3E%3Cpath d='M-120 3180 C280 2970 600 3370 1010 3160 S1440 3050 1760 3230' stroke='%2393c5fd' stroke-opacity='.22' stroke-width='1.1'/%3E%3Cpath d='M-150 4050 C250 3820 600 4230 1020 4020 S1460 3900 1760 4100' stroke='%23dbeafe' stroke-opacity='.34' stroke-width='1.2'/%3E%3Cpath d='M-130 4920 C250 4710 620 5100 1040 4900 S1460 4780 1760 4980' stroke='%23c7d2fe' stroke-opacity='.24' stroke-width='1.1'/%3E%3Cpath d='M-150 5800 C260 5580 610 6000 1060 5780 S1480 5670 1760 5860' stroke='%23bfdbfe' stroke-opacity='.24' stroke-width='1.05'/%3E%3Cpath d='M-150 6650 C260 6450 610 6820 1040 6640 S1480 6500 1760 6720' stroke='%23dbeafe' stroke-opacity='.28' stroke-width='1.15'/%3E%3C/g%3E%3C/svg%3E");
}

main > section{
  position:relative;
  z-index:1;
  background:transparent !important;
  background-image:none !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Do NOT clip decorative layers to individual sections — they create seams. */
main > section > .aurora,
main > section > .soft-aurora{
  display:none !important;
}
#documents > .document-motion-bg{
  display:block !important;
}

/* ---------- THE TWO SECTIONS — EXACT WORKING REFERENCE BEHAVIOUR ---------- */
.basics-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:64px;
  align-items:start;
}
.basics-intro{
  position:sticky;
  top:110px;
}

.faq-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:56px;
  align-items:start;
}
.faq-intro{
  position:sticky;
  top:110px;
}

/* Make sure no ancestor accidentally becomes a sticky scroll container. */
#basics,
#faq,
#basics > .container,
#faq > .container,
#basics .basics-grid,
#faq .faq-layout{
  overflow:visible !important;
}

@media(max-width:980px){
  .basics-grid,
  .faq-layout{
    grid-template-columns:1fr;
    gap:40px;
  }
  .basics-intro,
  .faq-intro{
    position:static;
  }
}

/* ---------- RESTORE THE APPROVED FOOTER — NO NEW FOOTER DESIGN ---------- */
.site-footer,
.site-footer.footer{
  padding:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.18), transparent 30%),
    linear-gradient(135deg,#071230 0%,#0b1c46 58%,#10245a 100%) !important;
  color:rgba(255,255,255,.82);
  border-top:0;
}
.site-footer .footer-main-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:42px;
  padding-top:54px;
  padding-bottom:54px;
  align-items:start;
}
.site-footer h3,
.site-footer h4{
  color:#ffffff;
}
.site-footer h3{
  font-size:20px;
  font-weight:600;
}
.site-footer h4{
  font-size:13px;
  font-weight:700;
}
.site-footer p,
.site-footer .footer-column a,
.site-footer .footer-contact a,
.site-footer .footer-contact-row{
  color:rgba(255,255,255,.80);
}
.site-footer .footer-contact{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.site-footer .footer-contact a{
  display:block;
  overflow-wrap:anywhere;
}
.site-footer .footer-column a{
  display:block;
  margin:7px 0;
}
.site-footer .footer-column a::before{
  color:#60a5fa;
}
.site-footer a:hover{
  color:#ffffff;
}
.site-footer .footer-social{
  border:1px solid rgba(255,255,255,.24);
  color:#ffffff;
  background:rgba(255,255,255,.05);
}
.site-footer .footer-social:hover{
  background:rgba(255,255,255,.10);
}
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.10);
}
.site-footer .footer-copyright,
.site-footer .footer-legal,
.site-footer .footer-credit{
  color:rgba(255,255,255,.72);
}
@media(max-width:1100px){
  .site-footer .footer-main-grid{
    grid-template-columns:1.25fr 1fr 1fr;
  }
  .site-footer .footer-connect{
    grid-column:span 2;
  }
}
@media(max-width:760px){
  .site-footer .footer-main-grid{
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
  }
  .site-footer .footer-about,
  .site-footer .footer-connect{
    grid-column:1/-1;
  }
}
@media(max-width:520px){
  .site-footer .footer-main-grid{
    grid-template-columns:1fr;
  }
  .site-footer .footer-about,
  .site-footer .footer-connect{
    grid-column:auto;
  }
}

/* Quick Links: one item per row, preserving existing footer colours. */
.site-footer .footer-quick-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.site-footer .footer-quick-links h4{
  width:100%;
}
.site-footer .footer-quick-links a{
  display:block;
  width:100%;
  white-space:normal;
}

/* Keep header WhatsApp green. */
.nav-links a.btn-whatsapp,
.nav-links a.btn-whatsapp:hover,
.nav-links a.btn-whatsapp:focus-visible{
  background:#25D366 !important;
  border-color:#25D366 !important;
  color:#ffffff !important;
}
.nav-links a.btn-whatsapp:hover{
  background:#1fb85a !important;
  border-color:#1fb85a !important;
}

/* Sticky behaviour copied from the working testimonial/reference file.
   Desktop: left column stays pinned while the right column continues with page scroll.
   Tablet/mobile: returns to the original stacked/static layout. */
@media (min-width: 981px) {
  /* overflow-x:hidden can create an ancestor scrolling box and break position:sticky.
     clip prevents horizontal spill without becoming a sticky scroll container. */
  html, body {
    overflow-x: clip !important;
  }

  #basics,
  #faq,
  #basics > .container,
  #faq > .container,
  #basics .basics-grid,
  #faq .faq-layout {
    overflow: visible !important;
    contain: none !important;
  }

  #basics .basics-grid,
  #faq .faq-layout {
    align-items: start !important;
  }

  #basics .basics-intro,
  #faq .faq-intro {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 110px !important;
    align-self: start !important;
    height: fit-content;
    z-index: 2;
  }
}

@media (max-width: 980px) {
  #basics .basics-intro,
  #faq .faq-intro {
    position: static !important;
    top: auto !important;
  }
}

/* User-requested: slightly more visible, still very light continuous page gradient. */
main{
  background:
    radial-gradient(ellipse 760px 640px at 7% 7%, rgba(219,234,254,.30) 0%, rgba(239,246,255,.14) 43%, transparent 73%),
    radial-gradient(ellipse 720px 650px at 93% 22%, rgba(224,231,255,.23) 0%, rgba(248,250,252,.10) 45%, transparent 75%),
    radial-gradient(ellipse 780px 720px at 8% 50%, rgba(219,234,254,.18) 0%, rgba(239,246,255,.09) 46%, transparent 75%),
    radial-gradient(ellipse 780px 720px at 93% 73%, rgba(224,231,255,.16) 0%, rgba(248,250,252,.08) 47%, transparent 76%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 22%,#f3f8ff 48%,#f8fbff 74%,#ffffff 100%) !important;
}
main::before{
  opacity:.82;
}

/* Header WhatsApp: keep colour/hover, remove glow from button/text. */
.nav-links a.btn-whatsapp,
.nav-links a.btn-whatsapp:hover,
.nav-links a.btn-whatsapp:focus-visible{
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Typography intentionally inherits the IEC master at every breakpoint. */
/* ============================================================
   RESPONSIVE DENSITY PASS — phone / tablet / desktop
   Desktop keeps the IEC master proportions. Tablet tightens spacing.
   Phone turns long card stacks into swipe rails and removes decorative height.
   ============================================================ */

/* STATE FIELD: pairs with Business Type on larger screens */
.reference-lead-card .form-row-selects{grid-template-columns:1fr 1fr;gap:12px;}

/* TABLET — preserve full content, reduce dead space and keep readable widths */
@media (min-width:641px) and (max-width:980px){
  section{padding:60px 0!important;}
  .hero{padding:30px 0 52px!important;}
  .hero-grid{gap:30px!important;}
  .container{width:min(920px,92%)!important;}
  .section-head{margin-bottom:30px!important;}
  .lead-wrap{max-width:720px;width:100%;margin-inline:auto;}
  .reference-lead-card{padding:28px 24px 24px!important;}
  .basics-grid,.faq-layout{gap:30px!important;}
  .split-feature,.docs-showcase,.compliance-layout{gap:28px!important;}
  .why-feature,.update-spotlight{padding:30px 28px!important;}
  #blog .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .site-footer .footer-main-grid{padding-top:42px!important;padding-bottom:42px!important;gap:30px!important;}
}

/* PHONE — shorter page, same information available through horizontal swipe */
@media (max-width:640px){
  .container{width:92%!important;}
  section{padding:34px 0!important;}
  .hero{padding:14px 0 32px!important;}
  .hero-grid{gap:20px!important;}
  .breadcrumb{margin-bottom:8px!important;}
  .hero-copy h1{margin-bottom:12px!important;}
  .hero-lead{margin-bottom:14px!important;}
  .hero-lead p{margin-bottom:7px!important;}
  .hero-lead p:nth-child(n+2){display:none;}
  .hero-lead-more{display:none!important;} /* duplicates the main hero explanation */
  .hero-actions{gap:10px!important;margin-bottom:16px!important;}
  .hero-actions .btn{min-height:44px!important;padding:11px 16px!important;}
  .hero-trust-row{gap:10px!important;margin-top:0!important;}
  .hero-trust-row .trust-item strong{}
  .hero-trust-row .trust-item span{}
  .disclosure-line{margin-top:12px!important;}

  .reference-lead-card{padding:20px 15px 17px!important;border-radius:20px!important;}
  .reference-lead-card h2{margin-bottom:4px!important;}
  .reference-lead-card .lead-sub{margin-bottom:14px!important;}
  .reference-lead-card .form-group{margin-bottom:8px!important;}
  .reference-lead-card input:not([type="checkbox"]),
  .reference-lead-card select{min-height:48px!important;padding:11px 12px!important;border-radius:11px!important;}
  .reference-lead-card textarea{min-height:68px!important;padding:11px 12px!important;border-radius:11px!important;}
  .reference-lead-card .reference-consent-group{margin:2px 0 10px!important;}
  .reference-lead-card .consent{gap:8px!important;}
  .reference-lead-card .form-submit{min-height:44px!important;}
  .reference-lead-card + .form-disclaimer{margin-top:7px!important;}
  .optional-message-group{display:none!important;}

  /* 420px+ phones can hold the two selects side-by-side, reducing form height. */
  .reference-lead-card .form-row-selects{grid-template-columns:1fr!important;gap:0!important;}

  .section-head{margin-bottom:18px!important;}
  .section-head h2,.basics-intro h2,.faq-intro h2,.compliance-intro h2,.why-feature h2,.update-spotlight h2{}
  .section-head p,.basics-intro p,.faq-intro p,.compliance-intro>p{}
  .kicker,.freshness{margin-bottom:10px!important;}

  /* Basics: 4 editorial answers become one short swipe row. */
  .basics-grid{display:block!important;}
  .basics-intro{margin-bottom:18px!important;}
  .basics-intro .btn{display:none!important;}
  .qa-flow{display:flex!important;flex-direction:row!important;overflow-x:auto!important;gap:12px!important;scroll-snap-type:x mandatory!important;width:100vw!important;margin-inline:calc(50% - 50vw)!important;padding-inline:calc(50vw - 50%)!important;padding-bottom:12px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;}
  .qa-flow::-webkit-scrollbar{display:none!important;}
  .qa{flex:0 0 86vw!important;scroll-snap-align:center!important;display:grid!important;grid-template-columns:30px 1fr!important;gap:10px!important;padding:17px!important;border:1px solid var(--border)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 8px 22px rgba(11,28,70,.05)!important;}
  .qa:first-child{padding-top:17px!important;}
  .qa h3{margin-bottom:6px!important;}
  .qa p,.qa ul{}

  /* Generic swipe rails: show one card, not 3-6 cards stacked vertically. */
  .benefit-grid,.doc-orbit-grid,.return-path,#blog .blog-grid{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:12px!important;scroll-snap-type:x mandatory!important;
    width:100vw!important;margin-inline:calc(50% - 50vw)!important;padding-inline:calc(50vw - 50%)!important;padding-block:3px 12px!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;
  }
  .benefit-grid::-webkit-scrollbar,.doc-orbit-grid::-webkit-scrollbar,.return-path::-webkit-scrollbar,#blog .blog-grid::-webkit-scrollbar{display:none!important;}
  .benefit-grid>*,.doc-orbit-grid>*,.return-path>*,#blog .blog-grid>*{flex:0 0 86vw!important;scroll-snap-align:center!important;min-width:0!important;}

  .split-feature,.docs-showcase,.compliance-layout{display:block!important;}
  .feature-intro{padding:20px!important;margin-bottom:14px!important;border-radius:18px!important;}
  .feature-intro h3{margin-bottom:9px!important;}
  .feature-intro p{}
  .benefit{padding:18px!important;}
  .benefit strong{}
  .benefit span{}

  /* decorative paper mock-up adds height but no new information on phone */
  .docs-centerpiece{display:none!important;}
  .doc-orbit-card{padding:16px!important;grid-template-columns:42px 1fr!important;gap:11px!important;}
  .doc-orbit-icon{width:42px!important;height:42px!important;}
  .doc-orbit-card h3{}
  .doc-orbit-card p{}

  .process-step,.price-card,.why-reason,.update-card{padding:18px!important;}
  .process-step h3,.update-card h3,.why-reason h3{}
  .process-step p,.update-card p,.why-reason p{}
  .pricing-note{margin-top:14px!important;}
  .center-cta{margin-top:15px!important;}

  .compliance-intro{margin-bottom:14px!important;}
  .compliance-note{margin-top:12px!important;padding:12px 14px!important;}
  .return-path:before{display:none!important;}
  .return-row{margin:0!important;padding:15px!important;grid-template-columns:40px 1fr!important;gap:10px!important;align-items:start!important;}
  .return-row>span{width:38px!important;height:38px!important;}
  .return-row b{grid-column:2!important;justify-self:start!important;}
  .nil-alert{margin-top:12px!important;padding:14px!important;gap:10px!important;}

  .why-feature,.update-spotlight{padding:21px 18px!important;border-radius:18px!important;}
  .why-feature-icon{width:52px!important;height:52px!important;margin-bottom:14px!important;}
  .why-feature-tags{margin-top:15px!important;gap:6px!important;}
  .why-feature-tags span{padding:6px 9px!important;}
  .update-action{margin-top:12px!important;padding:15px!important;}
  .update-action p{}
  .swipe-hint{margin-top:0!important;margin-bottom:4px!important;}

  /* Blog cards swipe horizontally instead of adding three full screens. */
  #blog .blog-card{width:auto!important;padding:16px!important;}
  #blog .blog-card-image{aspect-ratio:1.9/1!important;}

  /* FAQ: show six on phone first; the rest are one tap away. */
  #faq:not(.faq-mobile-expanded) .faq-wrap .faq:nth-child(n+7){display:none!important;}
  .mobile-faq-more{display:flex!important;width:100%;justify-content:center;align-items:center;margin-top:14px;min-height:44px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;color:var(--brand-accent);font:inherit;font-weight:700;cursor:pointer;}
  .faq button{padding:14px 0!important;gap:12px!important;}
  .faq-content{padding-bottom:14px!important;}

  .closing{padding:34px 0!important;}
  .closing-panel{padding:30px 18px!important;border-radius:20px!important;}
  .closing-panel h2{}
  .closing-panel p{}

  /* Footer stays complete, but uses two columns instead of one long vertical list. */
  .site-footer .footer-main-grid{grid-template-columns:1fr 1fr!important;gap:22px 18px!important;padding-top:30px!important;padding-bottom:30px!important;}
  .site-footer .footer-about,.site-footer .footer-connect{grid-column:1/-1!important;}
  .site-footer h3{}
  .site-footer h4{margin-bottom:8px!important;}
  .site-footer p,.site-footer .footer-column a,.site-footer .footer-contact-row{}
  .site-footer .footer-bottom{padding-block:14px!important;}
}

@media (min-width:420px) and (max-width:640px){
  .reference-lead-card .form-row-selects{grid-template-columns:1fr 1fr!important;gap:9px!important;}
}

@media (min-width:981px){
  .mobile-faq-more{display:none!important;}
}
@media (min-width:641px) and (max-width:980px){
  .mobile-faq-more{display:none!important;}
}

/* ===== V4 phone fix: process cards stay fully inside viewport ===== */
@media (max-width:640px){
  .process-showcase .process-path{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    gap:12px !important;
    scroll-snap-type:none !important;
  }
  .process-showcase .process-step{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:none !important;
    scroll-snap-align:none !important;
    box-sizing:border-box !important;
    padding:20px 16px !important;
    gap:12px !important;
    align-items:flex-start !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .process-showcase .process-step > div{
    min-width:0 !important;
    width:100% !important;
  }
  .process-showcase .step-number{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
  }
  .process-showcase .process-step h3,
  .process-showcase .process-step p{
    max-width:100% !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .process-showcase .process-step:after{
    width:82px;
    height:82px;
    right:-36px;
    bottom:-42px;
  }
  .process-showcase .center-cta{margin-top:22px;}
  .process-showcase .center-cta .btn{width:100%;}
}

/* Contact page only: layout built from IEC tokens/components. */
.contact-hero{padding:40px 0 72px;background:linear-gradient(180deg,var(--white) 0%,var(--blue-wash) 100%);overflow:hidden;}
.contact-hero .aurora{display:block!important;}
.contact-hero .hero-grid{grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.contact-hero h1{max-width:18ch;}
.contact-hero .hero-lead{max-width:600px;margin-bottom:26px;}
.contact-hero .disclosure-line{margin-top:16px;}
.contact-direct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;max-width:660px;}
.contact-direct-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-md);background:rgba(255,255,255,.88);box-shadow:var(--shadow-soft);}
.contact-direct-icon{flex:0 0 42px;width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);}
.contact-direct-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.contact-direct-card strong{display:block;color:var(--ink);font-size:var(--fs-lg);margin-bottom:3px;}
.contact-direct-card span,.contact-direct-card a{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.55;overflow-wrap:anywhere;}
.contact-direct-card a:hover{color:var(--blue);}
.contact-form .lead-card{padding-top:32px;padding-bottom:32px;}
.contact-form .optional-message-group textarea{min-height:104px;}
.contact-form .form-submit{width:100%;}
.contact-form .form-disclaimer{text-align:center;margin-top:10px;color:var(--muted);font-size:var(--fs-sm);}
.contact-form .contact-topic{margin-bottom:11px;}
.contact-locations{padding:76px 0 82px;background:var(--white);}
.contact-locations .section-head{margin-bottom:38px;}
.location-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:stretch;}
.location-panel,.map-card-contact{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);overflow:hidden;}
.location-panel{padding:30px;display:flex;flex-direction:column;justify-content:center;}
.location-panel .kicker{margin-bottom:10px;}
.location-panel h2{color:var(--ink);font-size:var(--fs-h3);line-height:1.25;margin-bottom:12px;}
.location-panel p{font-size:var(--fs-base);color:var(--muted);margin-bottom:18px;}
.location-detail{display:flex;gap:12px;align-items:flex-start;margin-top:12px;}
.location-detail b{display:block;color:var(--ink);font-size:var(--fs-base);margin-bottom:2px;}
.location-detail span,.location-detail a{color:var(--muted);font-size:var(--fs-sm);line-height:1.55;}
.location-detail a:hover{color:var(--blue);}
.map-card-contact iframe{width:100%;height:420px;border:0;display:block;}
.contact-help{padding:74px 0;background:linear-gradient(180deg,var(--surface) 0%,var(--white) 100%);}
.contact-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.contact-help .benefit{height:100%;}
.contact-help .benefit strong{font-size:var(--fs-lg);}
.contact-help .benefit span{font-size:var(--fs-base);}
.contact-help .center-cta{margin-top:28px;}

@media(max-width:980px){
  .contact-hero .hero-grid,.location-grid{grid-template-columns:1fr;}
  .contact-hero .hero-grid{gap:34px;}
  .contact-direct{max-width:none;}
  .contact-help-grid{grid-template-columns:repeat(2,1fr);}
  .map-card-contact iframe{height:360px;}
}
@media(max-width:640px){
  .contact-hero{padding:28px 0 48px;}
  .contact-hero .hero-grid{gap:28px;}
  .contact-hero h1{max-width:none;}
  .contact-hero .hero-lead{margin-bottom:22px;}
  .contact-direct{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:22px 0 0;
    padding:0;
    overflow:visible;
    max-width:none;
  }
  .contact-direct-card{
    flex:none;
    width:100%;
    padding:16px;
  }
  .contact-form .lead-card{padding:26px 18px;}
  .contact-form .form-row{grid-template-columns:1fr;}
  .contact-form .optional-message-group{display:block!important;}
  .contact-locations{padding:54px 0 58px;}
  .location-panel{padding:24px 20px;}
  .map-card-contact iframe{height:240px;}
  .contact-help{padding:54px 0 60px;}
  .contact-help-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .contact-help .benefit{
    flex:none;
    width:100%;
  }
}
@media(max-width:380px){
  .map-card-contact iframe{height:220px;}
}

/* =========================================================
   CONTACT V3 — GUARANTEED VISIBILITY + PHONE OPTIMISATION
   Keeps IEC typography, colours, buttons and component scale.
   ========================================================= */

/* Never let scroll-reveal JS make core contact content disappear. */
.reveal,
.reveal.in,
.reveal.visible{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  transition-delay:0s !important;
}

/* Safe shrinking for all contact grid/flex children. */
.contact-hero .hero-grid > *,
.contact-direct-card > *,
.contact-help-grid > *,
.location-grid > *,
.location-panel > *,
.reference-lead-card > *{
  min-width:0;
}
.contact-hero,
.contact-help,
.contact-locations,
.site-footer{max-width:100%;overflow-x:clip;}
.contact-direct-card,
.contact-help .benefit,
.location-panel,
.reference-lead-card{overflow-wrap:anywhere;}

/* Tablet: cleaner single-column hero, form kept prominent. */
@media (max-width:980px){
  .contact-hero .hero-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .contact-form{width:min(620px,100%);margin-inline:auto;}
  .contact-direct{max-width:100%;}
  .location-grid{grid-template-columns:1fr !important;}
}

/* Phone: compact, readable, no horizontal overflow. */
@media (max-width:640px){
  html,body{width:100%;max-width:100%;overflow-x:clip !important;}
  .container{width:92% !important;max-width:100%;}

  /* Header/top bar: preserve IEC sizes but use less vertical space. */
  .top-bar{padding:7px 0 !important;}
  .top-bar .container{justify-content:center !important;text-align:center;}
  .nav-inner{padding:12px 0 !important;}

  /* Hero */
  .contact-hero{
    padding:22px 0 40px !important;
    min-height:0 !important;
  }
  .contact-hero .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    align-items:stretch !important;
  }
  .contact-hero .hero-copy,
  .contact-hero .lead-wrap{
    width:100% !important;
    max-width:100% !important;
  }
  .contact-hero .breadcrumb{margin-bottom:10px !important;}
  .contact-hero h1{
    max-width:none !important;
    margin-bottom:14px !important;
  }
  .contact-hero .hero-lead{
    max-width:none !important;
    margin-bottom:18px !important;
  }
  .contact-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-bottom:18px !important;
  }
  .contact-hero .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
    padding-inline:14px !important;
  }
  .contact-hero .disclosure-line{
    margin-top:14px !important;
    max-width:100% !important;
  }

  /* Phone/email cards: after CTAs, never above breadcrumb (flex order). */
  .contact-direct{
    order:6 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .contact-direct-card{
    flex:none !important;
    width:100% !important;
    max-width:100% !important;
    padding:15px !important;
  }

  /* Form — same IEC font/field sizes, just tighter spacing. */
  .contact-form{width:100% !important;margin:0 !important;}
  .contact-form .reference-lead-card,
  .contact-form .lead-card{
    width:100% !important;
    max-width:100% !important;
    padding:24px 18px !important;
    border-radius:var(--r-lg) !important;
  }
  .contact-form .form-row,
  .contact-form .form-row-selects{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    width:100% !important;
    max-width:100% !important;
    font-size:var(--fs-md) !important;
  }
  .contact-form .optional-message-group textarea{
    min-height:92px !important;
  }
  .contact-form .consent{align-items:flex-start !important;}
  .contact-form .form-submit{width:100% !important;}

  /* Ways to connect: stacked cards on mobile. */
  .contact-help{padding:44px 0 48px !important;}
  .contact-help .section-head{margin-bottom:24px !important;}
  .contact-help-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .contact-help .benefit{
    flex:none !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:22px 20px !important;
  }
  .contact-help .center-cta{margin-top:20px !important;}
  .contact-help .center-cta .btn{width:100% !important;}

  /* Office/map: compact vertical flow. */
  .contact-locations{padding:46px 0 50px !important;}
  .contact-locations .section-head{margin-bottom:24px !important;}
  .location-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .location-panel{
    padding:22px 18px !important;
    border-radius:var(--r-lg) !important;
  }
  .location-panel .hero-actions{
    display:block !important;
    margin-top:18px !important;
  }
  .location-panel .hero-actions .btn{width:100% !important;}
  .map-card-contact{
    border-radius:var(--r-lg) !important;
    margin:0 !important;
    line-height:0;
    box-shadow:var(--shadow-soft);
  }
  .map-card-contact iframe{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }

  /* Shared footer: stack columns + contact links on phone. */
  .site-footer{
    padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important;
  }
  .site-footer .footer-main-grid{
    grid-template-columns:1fr !important;
    gap:26px !important;
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
  .site-footer .footer-about,
  .site-footer .footer-connect,
  .site-footer .footer-column{
    grid-column:auto !important;
  }
}

@media (max-width:380px){
  .container{width:94% !important;}
  .contact-hero .hero-actions{grid-template-columns:1fr !important;}
  .map-card-contact iframe{
    height:200px !important;
    min-height:200px !important;
    max-height:200px !important;
  }
}

.btn-primary:disabled,
.btn-primary[disabled],
.form-submit:disabled,
.form-submit[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
  pointer-events:none;
}