/* File : 0 */
			
                         /* Started App Theme CSS : App:Legal - Branch:Space */ 
                         /*
 * ════════════════════════════════════════════════════════════════════
 * [ALIENSSTYLE][CODE-HEADER]
 * ════════════════════════════════════════════════════════════════════
 * Name        : Legal 7 — Root CSS Variables + Resets (v26.06.01)
 * Type        : Stylesheet (CSS)
 * Version     : 26.06.01
 * Author      : A'nil Cyborg
 * Source      : Copied VERBATIM from
 *               WebApp/Legal/26.04.13/html/head.php lines 80-160.
 *               Light theme + Poppins. ZERO design changes per user
 *               directive 2026-05-16 ("jsi hai wsi hi chahiye …
 *               koi ui changes kiye bina").
 * Copyright   : (c) A|iens. All rights reserved.
 * ════════════════════════════════════════════════════════════════════
 */

:root {
  /* Brand primary accent (Legal7 royal blue family) — production
     PHP-injects these from per-tenant config. Defaults preserve the
     visible legal7.in palette. */
  --a:  #0026c5;
  --a1: #001fa3;
  --a2: #001886;
  --a3: #00136b;
  --a4: #000f55;
  --a5: #000b40;
  --a6: #00082d;
  --a7: #00051c;
  --a8: #00030d;

  --b:    rgb(255 255 255);
  --b-t:  #f0f4f7;
  --c:    rgb(18 52 86 / 99%);
  --c0:   #65676b;
  --c1:   #008;
  --cl:   #008000;
  --bc:   #d6d6d6;

  --b-t22: rgb(222 244 244 / 22%);
  --b-t44: rgb(222 244 244 / 44%);
  --b-t77: rgb(222 244 244 / 77%);
  --b-t88: rgb(222 244 244 / 88%);
  --b-t95: rgb(222 244 244 / 95%);

  --bg: url();
  --bs:       0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%);
  --bs-bs:    inset 0 -15px 22px 0px rgb(0 0 0 / 7%), inset 0 1px 4px 0px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 11%);
  --bs-b:     inset 0px 0px 4px 0px rgb(0 0 0 / 11%), 0px 2px 3px rgb(0 0 0 / 11%);
  --bs-bt:    inset 0 0px 4px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%);
  --bs-bl:    inset 0 -4px 7px 0px rgb(0 0 0 / 11%), inset 0 1px 7px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%);
  --bs-play:  0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  --bs-ajio:  0px 1px 2px 0px rgb(32 32 32 / 16%);

  --lg:    linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  --lg1:   linear-gradient(90deg, rgba(0,255,255,0.05), rgba(0,255,255,0.10), rgba(0,255,255,0.05));
  --lg-bl: linear-gradient(123deg, rgb(103 58 183 / 22%), rgb(3 169 244 / 22%), rgb(0 222 111 / 22%), rgb(3 169 244 / 22%));
  --lg-b:  linear-gradient(90deg, #002bdc88, #32ded488);
}

::placeholder           { font-size: 0.88em; }
:-ms-input-placeholder  { font-size: 0.88em; }
::-ms-input-placeholder { font-size: 0.88em; }

html, body, aliens, dapp, app, console, .console { display: block; height: 100%; width: 100%; }
aliens { display: block; }

html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html { position: fixed; height: 100%; width: 100%; overflow: hidden; color: var(--c); font-family: system-ui; z-index: 999999999; }
body { margin: 0; overflow: hidden; background: var(--b); }

html, select, input, button { font-family: 'Poppins', sans-serif; color: var(--c); }
p, li { color: #000; }
li { list-style: disc; line-height: 1.25; }

.account content { margin-top: calc(100vh - 22px); }
.account menubar { bottom: -55px; }

screen#policy aerea { min-height: unset; }
screen#legal aerea { min-height: unset; }
/*
 * [ALIENSSTYLE][CODE-HEADER] Legal 7 — App-level utility classes
 * Loads after 0.css (root vars + Poppins). Defines screen wrapper,
 * common helpers, responsive containers. Per-screen styling lives
 * inline in screen/Legal7.X.php (verbatim from 26.04.13 pattern).
 */

/* WebOS custom-tag baselines */
content, layout, screens, screen, app, Aliens, apps,
dashboard, db, aerea, header, footer, sidebar, main,
slr, ec, bl, bd, hd, ft, fc, mm, pp, cell, picture, bg, photo, glow,
console, iam, i, t, jtc, pull, dapp,
section, flyout, splash, lead, ofr, wrap, cs, ccs, cc,
csrvss, csvs, plans, plan, square, box, products, aaa, banner,
Packages, info, buynow, lh, ssection,
wallet, ethwallet, btcwallet, trxwallet, royalwallet, coin,
transactions, booster, invested, sum, new,
grid, ceo, market, prices,
nev, logo, carousel, card, gbl, gg,
start, startmenu, exit, rightbar, portfolio, ai, modal, ee, vv, bbb, alert,
csvs, g3, ofr, ec, slr, scoll {
  display: block;
}

flex { display: flex; }

/* Common screen wrapper */
.legal7-screen { max-width: 1400px; margin: 0 auto; padding: 22px; position: relative; z-index: 2; }
@media only screen and (min-width: 999px) {
  .legal7-screen { padding: 33px; }
}
/* Ultra-wide / 4K — scale up content area so pages don't float in whitespace */
@media (min-width: 1920px) {
  .legal7-screen { max-width: 1720px; padding: 44px; }
}
@media (min-width: 2560px) {
  .legal7-screen { max-width: 1920px; padding: 55px; }
}
@media (min-width: 3200px) {
  .legal7-screen { max-width: 2080px; padding: 66px; }
}

/* Skip link */
.legal7-skip-link:focus { outline: 2px solid var(--a); }

/* Typography baseline */
h1, h2, h3, h4 { color: var(--c); margin-top: 0; line-height: 1.3; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.05em; }

p { color: #000; line-height: 1.6; }
a { color: var(--a); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Helpers */
.dn { display: none !important; }
.sl { display: block; margin: 11px 0; }
.dn.fl { display: flex !important; }

/* Inputs (verbatim style from 26.04.13) */
input, select, textarea {
  border: 1px solid var(--bc); border-radius: 11px;
  padding: 11px 16px; font-family: inherit; font-size: 1em;
  color: var(--c); background: var(--b);
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--a);
  box-shadow: 0 0 0 3px rgb(0 38 197 / 22%);
}
input::placeholder { color: var(--c0); }

/* Buttons (atoms) */
.legal7-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 11px; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; transition: 99ms; }
.legal7-btn--primary { background: var(--a); color: var(--b); }
.legal7-btn--primary:hover { background: var(--a1); transform: scale(1.02); text-decoration: none; }
.legal7-btn--whatsapp { background: transparent; color: #25D366; border: solid 2px #25D366; }
.legal7-btn--whatsapp:hover { background: #25D366; color: var(--b); text-decoration: none; }
.legal7-btn--ghost { background: var(--b-t); color: var(--c); }
.legal7-btn--ghost:hover { background: var(--bc); }

/* Print */
@media print {
  .legal7-fixed-bottom-cta, .legal7-floating-whatsapp,
  .legal7-nav-hamburger, .legal7-header, .legal7-footer { display: none !important; }
}
/*
 * ════════════════════════════════════════════════════════════════════
 * [ALIENSSTYLE][CODE-HEADER]
 * Name        : Legal 7 — Premium Design Tokens (v26.06.01)
 * Type        : Stylesheet (CSS)
 * Author      : A'nil Cyborg
 * Loads after : 0.css, 00.css (alphabetical glob order)
 * Description : Premium design token scale — additive layer over 0.css.
 *               NEVER overrides existing --a, --b-t, --c, --cl, --bc.
 *               Adds: brand-50..900, status colors, neutrals, font/space/
 *               radius/shadow/z-index scales, transitions, gradients.
 *               Foundation for components in 03.components.css.
 *
 * Contrast cheat sheet (WCAG 2.1 AA verified):
 *   --a (#0026c5) on white            = 15.4:1 (AAA)
 *   --c (rgb(18 52 86 / 99%)) on white = 10.5:1 (AAA)
 *   --c0 (#65676b) on white           = 5.0:1  (AA)
 *   --cl (#008000) on white           = 4.5:1  (AA borderline — prefer --accent-green-600 for text)
 *   White on --a                      = 15.4:1 (AAA)
 *   White on --accent-green-600       = 7.1:1  (AAA)
 *   --brand-700 (#001fa3) on white    = 13.2:1 (AAA)
 *
 * Copyright   : (c) A|iens. All rights reserved.
 * ════════════════════════════════════════════════════════════════════
 */

:root {
  /* ─── Brand Blue Scale (derived from --a #0026c5) ─────────────────── */
  --brand-50:  #eef1ff;
  --brand-100: #d9def9;
  --brand-200: #b4befa;
  --brand-300: #8090f5;
  --brand-400: #4d62ed;
  --brand-500: #2640db;
  --brand-600: #0026c5;     /* aliases --a */
  --brand-700: #001fa3;     /* aliases --a1 */
  --brand-800: #001886;     /* aliases --a2 */
  --brand-900: #00136b;     /* aliases --a3 */

  /* Semantic primary aliases (for new components) */
  --color-primary:        var(--a);
  --color-primary-hover:  var(--a1);
  --color-primary-active: var(--a2);
  --color-primary-tint:   var(--brand-50);
  --color-primary-soft:   var(--brand-100);

  /* ─── Accent Green (Bar Council, success, WhatsApp accents) ─────── */
  --accent-green-50:  #ecf7ec;
  --accent-green-500: #008000;   /* aliases --cl */
  --accent-green-600: #006400;   /* for body text on green (7.1:1) */
  --whatsapp-green:   #25d366;

  /* ─── Status Colors ────────────────────────────────────────────── */
  --status-success:    #10b981;
  --status-success-bg: #ecfdf5;
  --status-warning:    #f59e0b;
  --status-warning-bg: #fffbeb;
  --status-danger:     #ef4444;
  --status-danger-bg:  #fef2f2;
  --status-info:       #3b82f6;
  --status-info-bg:    #eff6ff;

  /* ─── Neutrals (extending --c, --c0, --b, --b-t, --bc) ───────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f6f8;
  --neutral-150: #eceef2;
  --neutral-200: #e7e9ee;
  --neutral-300: #d6d6d6;    /* aliases --bc */
  --neutral-400: #9ba2ad;
  --neutral-500: #65676b;    /* aliases --c0 */
  --neutral-600: #4a5057;
  --neutral-700: #2c3037;
  --neutral-800: #1c1f25;
  --neutral-900: #123456;

  /* Premium accent gold (only for ratings/stars, "Most Popular" badge) */
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-50:  #fef3c7;

  /* ─── Typography Scale (Major Third 1.250 @ base 16px) ────────── */
  --font-size-xs:   0.75rem;   /* 12  — micro labels, captions */
  --font-size-sm:   0.875rem;  /* 14  — body small, eyebrow */
  --font-size-base: 1rem;      /* 16  — body */
  --font-size-lg:   1.125rem;  /* 18  — lead paragraph */
  --font-size-xl:   1.25rem;   /* 20  — h4 */
  --font-size-2xl:  1.5rem;    /* 24  — h3 */
  --font-size-3xl:  1.875rem;  /* 30  — h2 */
  --font-size-4xl:  2.25rem;   /* 36  — h1 page */
  --font-size-5xl:  3rem;      /* 48  — hero h1 desktop */
  --font-size-6xl:  3.75rem;   /* 60  — display (counters) */

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;

  /* ─── Spacing Scale (4px base unit) ──────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 — section padding desktop */
  --space-24: 6rem;      /* 96 — hero padding */

  /* ─── Border Radius Scale ─────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;       /* matches existing card radius */
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── Shadow Scale (premium depth — NOT overriding legacy --bs-*) ─ */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 25px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-2xl: 0 30px 60px rgba(15, 23, 42, 0.15), 0 14px 28px rgba(15, 23, 42, 0.08);

  /* Brand-blue glow shadows for primary CTAs + "Most Popular" tier */
  --shadow-accent:    0 8px 24px rgba(0, 38, 197, 0.22), 0 2px 6px rgba(0, 38, 197, 0.12);
  --shadow-accent-lg: 0 14px 36px rgba(0, 38, 197, 0.28), 0 4px 12px rgba(0, 38, 197, 0.15);

  /* Inner highlight — for glass/premium cards */
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-ring:      0 0 0 3px rgba(0, 38, 197, 0.15);

  /* ─── Transitions ─────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ─── Z-index Scale (replaces magic numbers 100/8888/88888/999999999) */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   20;
  --z-sticky:     30;
  --z-header:     40;
  --z-promo-bar:  45;
  --z-overlay:    50;
  --z-modal:      60;
  --z-floating:   70;
  --z-bottom-cta: 75;
  --z-toast:      90;
  --z-splash:     100;

  /* ─── Premium Gradients ──────────────────────────────────────── */
  --gradient-hero:        linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  --gradient-section-alt: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
  --gradient-cta-blue:    linear-gradient(135deg, var(--a) 0%, var(--a2) 100%);
  --gradient-cta-glow:    linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  --gradient-spotlight:   radial-gradient(ellipse at top, rgba(0, 38, 197, 0.04), transparent 60%);
  --gradient-shimmer:     linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  --gradient-trust:       linear-gradient(180deg, var(--neutral-50) 0%, #ffffff 100%);
  --gradient-gold-soft:   linear-gradient(135deg, var(--gold-50) 0%, #ffffff 100%);

  /* ─── Layout constraints ─────────────────────────────────────── */
  --container-narrow: 800px;
  --container-base:   1200px;
  --container-wide:   1400px;

  /* Runtime-computed (set by JS) — initial fallback values */
  --header-height:    72px;
  --promo-bar-height: 0px;
  --secnav-height:    0px;
}
/*
 * ════════════════════════════════════════════════════════════════════
 * [ALIENSSTYLE][CODE-HEADER]
 * Name        : Legal 7 — Utility Layer + Keyframes (v26.06.01)
 * Type        : Stylesheet (CSS)
 * Author      : A'nil Cyborg
 * Loads after : 01.tokens.css
 * Description : Animation keyframes + utility classes that any screen
 *               or component can use. Includes scroll-reveal, hover-
 *               lift, glass morphism, skeleton shimmer, focus rings,
 *               and prefers-reduced-motion safety net.
 * Copyright   : (c) A|iens. All rights reserved.
 * ════════════════════════════════════════════════════════════════════
 */

/* ═══ Keyframes ═══════════════════════════════════════════════════ */
@keyframes l7-fade-in    { from { opacity: 0 } to { opacity: 1 } }
@keyframes l7-slide-up   { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes l7-slide-down { from { opacity: 0; transform: translateY(-20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes l7-pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%     { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}
@keyframes l7-pulse-accent {
  0%,100% { box-shadow: 0 0 0 0 rgba(0, 38, 197, 0.4); }
  50%     { box-shadow: 0 0 0 8px rgba(0, 38, 197, 0); }
}
@keyframes l7-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes l7-bounce-in {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes l7-spin {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}
@keyframes l7-live-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.85); }
}

/* ═══ Scroll-triggered reveal (paired with js/4.premium.js reveal()) ═══ */
[data-l7-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slower) var(--ease-out-quart),
    transform var(--duration-slower) var(--ease-out-quart);
  will-change: opacity, transform;
}
[data-l7-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-l7-reveal-delay="1"] { transition-delay:  80ms; }
[data-l7-reveal-delay="2"] { transition-delay: 160ms; }
[data-l7-reveal-delay="3"] { transition-delay: 240ms; }
[data-l7-reveal-delay="4"] { transition-delay: 320ms; }
[data-l7-reveal-delay="5"] { transition-delay: 400ms; }

[data-l7-reveal="fade"] { transform: none; }
[data-l7-reveal="slide-left"]  { transform: translateX(-30px); }
[data-l7-reveal="slide-right"] { transform: translateX(30px); }
[data-l7-reveal="slide-left"].is-revealed,
[data-l7-reveal="slide-right"].is-revealed { transform: translateX(0); }
[data-l7-reveal="zoom"]  { transform: scale(0.96); }
[data-l7-reveal="zoom"].is-revealed { transform: scale(1); }

/* ═══ Hover Lift Utilities ════════════════════════════════════════ */
.l7-lift {
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.l7-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.l7-lift-sm {
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.l7-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.l7-lift-accent {
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.l7-lift-accent:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

/* ═══ Focus-visible accessibility ring (WCAG 2.4.7) ═══════════════ */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--brand-200);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ═══ Glass Morphism (floating CTAs, sticky bars) ════════════════ */
.l7-glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-lg), var(--shadow-inset-top);
}
.l7-glass-accent {
  background: rgba(0, 38, 197, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 38, 197, 0.18);
}
/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .l7-glass { background: rgba(255, 255, 255, 0.95); }
  .l7-glass-accent { background: rgba(0, 38, 197, 0.12); }
}

/* ═══ Premium Background Helpers ═══════════════════════════════════ */
.l7-bg-hero        { background: var(--gradient-hero); }
.l7-bg-section-alt { background: var(--gradient-section-alt); }
.l7-bg-spotlight   { background: var(--gradient-spotlight); }
.l7-bg-trust       { background: var(--gradient-trust); }
.l7-bg-tint        { background: var(--brand-50); }
.l7-bg-soft        { background: var(--neutral-50); }

/* ═══ Skeleton Loader ═════════════════════════════════════════════ */
.l7-skeleton {
  background: linear-gradient(
    90deg,
    var(--neutral-100) 0%,
    var(--neutral-200) 50%,
    var(--neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: l7-shimmer 1.4s linear infinite;
  border-radius: var(--radius-md);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.l7-skeleton--text   { height: 0.875rem; margin-bottom: 0.5rem; border-radius: var(--radius-xs); }
.l7-skeleton--title  { height: 1.5rem; margin-bottom: 0.75rem; width: 60%; border-radius: var(--radius-xs); }
.l7-skeleton--avatar { width: 56px; height: 56px; border-radius: 50%; }
.l7-skeleton--card   { height: 200px; border-radius: var(--radius-xl); }
.l7-skeleton--btn    { height: 44px; width: 140px; border-radius: var(--radius-pill); }

/* ═══ Container Helpers ═══════════════════════════════════════════ */
.l7-container        { max-width: var(--container-base);   margin: 0 auto; padding: 0 var(--space-6); }
.l7-container-wide   { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--space-6); }
.l7-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 600px) {
  .l7-container, .l7-container-wide, .l7-container-narrow { padding: 0 var(--space-4); }
}
/* Ultra-wide / 4K — content was getting lost in viewport whitespace */
@media (min-width: 1920px) {
  .l7-container        { max-width: 1500px; }
  .l7-container-wide   { max-width: 1720px; }
  .l7-container-narrow { max-width: 1000px; }
}
@media (min-width: 2560px) {
  .l7-container        { max-width: 1680px; }
  .l7-container-wide   { max-width: 1920px; }
  .l7-container-narrow { max-width: 1120px; }
}
@media (min-width: 3200px) {
  .l7-container        { max-width: 1800px; }
  .l7-container-wide   { max-width: 2080px; }
  .l7-container-narrow { max-width: 1200px; }
}

/* ═══ Section Spacing Helpers ════════════════════════════════════ */
.l7-section    { padding: var(--space-16) 0; }
.l7-section-lg { padding: var(--space-20) 0; }
.l7-section-sm { padding: var(--space-12) 0; }
@media (max-width: 600px) {
  .l7-section, .l7-section-lg { padding: var(--space-12) 0; }
  .l7-section-sm { padding: var(--space-8) 0; }
}

/* ═══ Stack / Cluster Helpers ═══════════════════════════════════ */
.l7-stack > * + * { margin-top: var(--space-4); }
.l7-stack-sm > * + * { margin-top: var(--space-2); }
.l7-stack-lg > * + * { margin-top: var(--space-6); }
.l7-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ═══ Live Indicator Dot (for "online", "available now" etc.) ═══ */
.l7-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success);
  animation: l7-live-dot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.l7-live-dot--pulse {
  position: relative;
}
.l7-live-dot--pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--status-success);
  opacity: 0.4;
  animation: l7-pulse-ring 2s ease-out infinite;
}

/* ═══ Skip Link Polish ═════════════════════════════════════════ */
.legal7-skip-link,
.l7-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--a);
  color: var(--b);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  z-index: var(--z-toast);
  box-shadow: var(--shadow-md);
  transition: top var(--duration-base) var(--ease-out-quart);
}
.legal7-skip-link:focus,
.l7-skip-link:focus { top: 8px; }

/* ═══ Toast Container (paired with js/4.premium.js toast) ═══════ */
#L7Toasts {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: 400px;
}
#L7Toasts > * { pointer-events: auto; }
.l7-toast {
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  color: var(--c);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: l7-slide-down var(--duration-base) var(--ease-out-quart);
}
.l7-toast--success { border-left-color: var(--status-success); }
.l7-toast--warning { border-left-color: var(--status-warning); }
.l7-toast--danger  { border-left-color: var(--status-danger); }
.l7-toast--info    { border-left-color: var(--status-info); }
@media (max-width: 600px) {
  #L7Toasts {
    top: auto;
    bottom: calc(var(--space-20) + env(safe-area-inset-bottom));
    right: var(--space-3);
    left: var(--space-3);
    max-width: unset;
  }
}

/* ═══ Visually Hidden (accessibility) ═══════════════════════════ */
.l7-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;
}

/* ═══ Reduced motion safety net ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-l7-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .l7-live-dot,
  .l7-live-dot--pulse::before {
    animation: none !important;
  }
  .l7-skeleton {
    animation: none !important;
    background: var(--neutral-100);
  }
}
/*
 * ════════════════════════════════════════════════════════════════════
 * [ALIENSSTYLE][CODE-HEADER]
 * Name        : Legal 7 — Component Library Styles (v26.06.01)
 * Type        : Stylesheet (CSS)
 * Author      : A'nil Cyborg
 * Loads after : 02.utils.css
 * Description : All styles for reusable .legal7-c-* components.
 *               Paired PHP partials live in component/Legal7.*.php
 *               and inject this markup. Namespace .legal7-c-* avoids
 *               collision with existing .legal7-home-*, .legal7-tt-*
 *               page-scoped classes.
 *
 * Components covered:
 *   - .legal7-c-btn (Button: primary/secondary/ghost/whatsapp/danger × sm/md/lg)
 *   - .legal7-c-badge (Status pill)
 *   - .legal7-c-section-header (Eyebrow + h2 + subtitle)
 *   - .legal7-c-lawyer-card
 *   - .legal7-c-testimonial-card
 *   - .legal7-c-service-card
 *   - .legal7-c-product-card
 *   - .legal7-c-tt-tier (Talktime tier card)
 *   - .legal7-c-stat-tile (Animated counter tile)
 *   - .legal7-c-skeleton-card
 *   - .legal7-c-trust-row (Trust badges row)
 *   - .legal7-c-activity-feed (Live activity widget)
 *   - .legal7-c-how-step (How-it-works step)
 *
 * Copyright   : (c) A|iens. All rights reserved.
 * ════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════
 * Button — .legal7-c-btn
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
  white-space: nowrap;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.legal7-c-btn:active { transform: translateY(1px); }
.legal7-c-btn:disabled,
.legal7-c-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.legal7-c-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); min-height: 36px; }
.legal7-c-btn--md { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); min-height: 44px; }
.legal7-c-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); min-height: 56px; }
.legal7-c-btn--block { display: flex; width: 100%; }

/* Variants */
.legal7-c-btn--primary {
  background: var(--a);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.legal7-c-btn--primary:hover {
  background: var(--a1);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.legal7-c-btn--secondary {
  background: var(--b);
  color: var(--a);
  border-color: var(--a);
}
.legal7-c-btn--secondary:hover {
  background: var(--brand-50);
  box-shadow: var(--shadow-sm);
}
.legal7-c-btn--ghost {
  background: transparent;
  color: var(--a);
}
.legal7-c-btn--ghost:hover { background: var(--brand-50); }
.legal7-c-btn--whatsapp {
  background: var(--whatsapp-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.legal7-c-btn--whatsapp:hover {
  background: #1ebe5d;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.32);
  transform: translateY(-1px);
}
.legal7-c-btn--danger {
  background: var(--status-danger);
  color: #fff;
}
.legal7-c-btn--danger:hover { background: #dc2626; }

/* Loading state */
.legal7-c-btn--loading {
  color: transparent !important;
  pointer-events: none;
}
.legal7-c-btn--loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: l7-spin 0.7s linear infinite;
  color: #fff;
  opacity: 1 !important;
}
.legal7-c-btn--loading.legal7-c-btn--secondary::after,
.legal7-c-btn--loading.legal7-c-btn--ghost::after { color: var(--a); }

.legal7-c-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.legal7-c-btn--sm svg { width: 16px; height: 16px; }
.legal7-c-btn--lg svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════
 * Badge — .legal7-c-badge
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.legal7-c-badge--success { background: var(--status-success-bg); color: #047857; }
.legal7-c-badge--warning { background: var(--status-warning-bg); color: #92400e; }
.legal7-c-badge--danger  { background: var(--status-danger-bg);  color: #b91c1c; }
.legal7-c-badge--info    { background: var(--status-info-bg);    color: #1e40af; }
.legal7-c-badge--brand   { background: var(--brand-50);          color: var(--a); }
.legal7-c-badge--neutral { background: var(--neutral-100);       color: var(--neutral-700); }
.legal7-c-badge--gold    { background: var(--gold-50);           color: #92400e; }
.legal7-c-badge svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════════
 * Section Header — .legal7-c-section-header
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-section-header {
  margin: 0 auto var(--space-10);
  max-width: 720px;
  text-align: center;
}
.legal7-c-section-header--left { text-align: left; margin-left: 0; margin-right: auto; }
.legal7-c-section-header__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: var(--space-3);
  padding: 4px 12px;
  background: var(--brand-50);
  border-radius: var(--radius-pill);
}
.legal7-c-section-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--c);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--letter-spacing-tight);
}
.legal7-c-section-header__subtitle {
  font-size: var(--font-size-lg);
  color: var(--c0);
  line-height: var(--line-height-relaxed);
  margin: 0;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.legal7-c-section-header--left .legal7-c-section-header__subtitle { margin-left: 0; }
@media (max-width: 600px) {
  .legal7-c-section-header__title { font-size: var(--font-size-2xl); }
  .legal7-c-section-header__subtitle { font-size: var(--font-size-base); }
}

/* ═══════════════════════════════════════════════════════════════════
 * Lawyer Card — .legal7-c-lawyer-card
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-lawyer-card {
  position: relative;
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.legal7-c-lawyer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-spotlight);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-quart);
  pointer-events: none;
}
.legal7-c-lawyer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--brand-200);
}
.legal7-c-lawyer-card:hover::before { opacity: 1; }
.legal7-c-lawyer-card__photo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--brand-200), var(--brand-500));
  position: relative;
  z-index: 1;
}
.legal7-c-lawyer-card__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--neutral-100);
}
.legal7-c-lawyer-card__live {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--status-success);
  border: 2px solid var(--b);
}
.legal7-c-lawyer-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--c);
  margin: 0;
  z-index: 1;
}
.legal7-c-lawyer-card__city {
  font-size: var(--font-size-sm);
  color: var(--c0);
  margin: 0;
  z-index: 1;
}
.legal7-c-lawyer-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gold-500);
  z-index: 1;
}
.legal7-c-lawyer-card__rating-count { color: var(--c0); font-weight: var(--font-weight-regular); }
.legal7-c-lawyer-card__specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  z-index: 1;
}
.legal7-c-lawyer-card__specialty {
  display: inline-block;
  font-size: 10.5px;
  padding: 2px 8px;
  background: var(--brand-50);
  color: var(--a);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
}
.legal7-c-lawyer-card__bar-id {
  font-size: var(--font-size-xs);
  color: var(--c0);
  font-family: monospace;
  margin: 0;
  z-index: 1;
}
.legal7-c-lawyer-card__cta {
  z-index: 1;
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════
 * Testimonial Card — .legal7-c-testimonial-card
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-testimonial-card {
  position: relative;
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.legal7-c-testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.legal7-c-testimonial-card::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 80px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: var(--brand-200);
  font-family: Georgia, serif;
  z-index: 0;
}
.legal7-c-testimonial-card__rating {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-3);
  color: var(--gold-400);
  font-size: var(--font-size-base);
  position: relative;
  z-index: 1;
}
.legal7-c-testimonial-card__quote {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--c);
  margin: 0 0 var(--space-5);
  position: relative;
  z-index: 1;
}
.legal7-c-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--neutral-150);
  padding-top: var(--space-4);
}
.legal7-c-testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--neutral-100);
  object-fit: cover;
  flex-shrink: 0;
}
.legal7-c-testimonial-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--c);
  margin: 0;
  line-height: 1.3;
}
.legal7-c-testimonial-card__meta {
  font-size: var(--font-size-xs);
  color: var(--c0);
  margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * Service Card — .legal7-c-service-card
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-service-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart);
  overflow: hidden;
}
.legal7-c-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
  text-decoration: none;
}
.legal7-c-service-card__icon-wrap {
  width: 72px;
  height: 72px;
  background: var(--brand-50);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-base) var(--ease-out-quart);
}
.legal7-c-service-card:hover .legal7-c-service-card__icon-wrap { background: var(--brand-100); }
.legal7-c-service-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.legal7-c-service-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.legal7-c-service-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--c);
  margin: 0;
  line-height: 1.3;
}
.legal7-c-service-card__tagline {
  font-size: var(--font-size-xs);
  color: var(--c0);
  line-height: 1.5;
  margin: 0;
}
.legal7-c-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--a);
  margin-top: var(--space-2);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.legal7-c-service-card__cta::after {
  content: '→';
  transition: transform var(--duration-base) var(--ease-out-quart);
  display: inline-block;
}
.legal7-c-service-card:hover .legal7-c-service-card__cta::after { transform: translateX(4px); }
.legal7-c-service-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
 * Product Card — .legal7-c-product-card
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out-quart);
}
.legal7-c-product-card:hover { transform: translateY(-4px); text-decoration: none; }
.legal7-c-product-card__img-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out-quart);
}
.legal7-c-product-card:hover .legal7-c-product-card__img-wrap { box-shadow: var(--shadow-lg); }
.legal7-c-product-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.legal7-c-product-card__price-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.legal7-c-product-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--c);
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════════════════════════════════
 * Talktime Tier — .legal7-c-tt-tier
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-tt-tier {
  position: relative;
  background: var(--b);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-out-quart);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.legal7-c-tt-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}
.legal7-c-tt-tier--recommended {
  border-color: var(--a);
  box-shadow: var(--shadow-accent);
  background: linear-gradient(180deg, var(--brand-50) 0%, #fff 30%);
}
.legal7-c-tt-tier--recommended:hover {
  box-shadow: var(--shadow-accent-lg);
}
.legal7-c-tt-tier__ribbon {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--a);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.legal7-c-tt-tier__mins {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--c);
  margin: 0;
}
.legal7-c-tt-tier__rate {
  font-size: var(--font-size-sm);
  color: var(--c0);
  margin: 0;
}
.legal7-c-tt-tier__discount {
  display: inline-block;
  background: var(--accent-green-50);
  color: var(--accent-green-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin: var(--space-1) auto;
}
.legal7-c-tt-tier__price {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra);
  color: var(--a);
  margin: var(--space-2) 0;
  line-height: 1;
}
.legal7-c-tt-tier__price-sub {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--c0);
}
.legal7-c-tt-tier__cta { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════
 * Stat Tile — .legal7-c-stat-tile
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out-quart),
              box-shadow var(--duration-base) var(--ease-out-quart);
}
.legal7-c-stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.legal7-c-stat-tile__icon {
  width: 48px; height: 48px;
  background: var(--brand-50);
  color: var(--a);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal7-c-stat-tile__icon svg { width: 24px; height: 24px; }
.legal7-c-stat-tile__value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra);
  color: var(--a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.legal7-c-stat-tile__suffix { color: var(--a); }
.legal7-c-stat-tile__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--c0);
  margin: 0;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
 * Trust Row — .legal7-c-trust-row
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-4);
  background: var(--gradient-trust);
  border-radius: var(--radius-xl);
}
.legal7-c-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--duration-base) var(--ease-out-quart),
              opacity var(--duration-base) var(--ease-out-quart);
}
.legal7-c-trust-row__item:hover {
  filter: grayscale(0);
  opacity: 1;
}
.legal7-c-trust-row__icon { width: 28px; height: 28px; flex-shrink: 0; }
.legal7-c-trust-row__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--c);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .legal7-c-trust-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--space-6);
    justify-content: flex-start;
    padding: var(--space-4);
    scrollbar-width: none;
  }
  .legal7-c-trust-row::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Activity Feed — .legal7-c-activity-feed
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-activity-feed {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: var(--z-floating);
  max-width: 320px;
  font-size: var(--font-size-sm);
  color: var(--c);
  transition: transform var(--duration-base) var(--ease-out-quart),
              opacity var(--duration-base) var(--ease-out-quart);
}
.legal7-c-activity-feed--hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.legal7-c-activity-feed__dot {
  flex-shrink: 0;
}
.legal7-c-activity-feed__text {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  margin: 0;
}
.legal7-c-activity-feed__text strong { color: var(--c); }
.legal7-c-activity-feed__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c0);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .legal7-c-activity-feed {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-20) + env(safe-area-inset-bottom));
    max-width: unset;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * How-It-Works Step — .legal7-c-how-step
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-4);
  position: relative;
}
.legal7-c-how-step__number {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--b);
  border: 3px solid var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extra);
  color: var(--a);
  position: relative;
  z-index: 1;
  transition: border-color var(--duration-base) var(--ease-out-quart),
              transform var(--duration-base) var(--ease-out-quart);
}
.legal7-c-how-step__number svg { width: 36px; height: 36px; color: var(--a); }
.legal7-c-how-step:hover .legal7-c-how-step__number {
  border-color: var(--a);
  transform: scale(1.05);
}
.legal7-c-how-step__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--c);
  margin: 0;
}
.legal7-c-how-step__description {
  font-size: var(--font-size-sm);
  color: var(--c0);
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}
.legal7-c-how-step__time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--a);
  font-weight: var(--font-weight-semibold);
  background: var(--brand-50);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* ═══════════════════════════════════════════════════════════════════
 * Form Field — premium inline validation (.legal7-c-field)
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.legal7-c-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--c);
}
.legal7-c-field__input,
.legal7-c-field__select,
.legal7-c-field__textarea {
  font-family: inherit;
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--b);
  color: var(--c);
  transition: border-color var(--duration-base) var(--ease-out-quart),
              box-shadow var(--duration-base) var(--ease-out-quart);
  min-height: 48px;
}
.legal7-c-field__input:focus,
.legal7-c-field__select:focus,
.legal7-c-field__textarea:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.legal7-c-field__hint {
  font-size: var(--font-size-xs);
  color: var(--c0);
  line-height: 1.5;
  margin: 0;
}
.legal7-c-field__error {
  font-size: var(--font-size-xs);
  color: var(--status-danger);
  font-weight: var(--font-weight-medium);
  margin: 0;
  display: none;
}
.legal7-c-field.is-invalid .legal7-c-field__input,
.legal7-c-field.is-invalid .legal7-c-field__select,
.legal7-c-field.is-invalid .legal7-c-field__textarea {
  border-color: var(--status-danger);
}
.legal7-c-field.is-invalid .legal7-c-field__error { display: block; }

/* ═══════════════════════════════════════════════════════════════════
 * Star Rating — used inside cards
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-stars {
  display: inline-flex;
  gap: 1px;
  align-items: center;
}
.legal7-c-stars__star {
  width: 14px;
  height: 14px;
  fill: var(--gold-400);
}
.legal7-c-stars__star--empty { fill: var(--neutral-300); }

/* ═══════════════════════════════════════════════════════════════════
 * Skeleton Card variants
 * ═══════════════════════════════════════════════════════════════════ */
.legal7-c-skeleton-card {
  background: var(--b);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.legal7-c-skeleton-card--lawyer {
  align-items: center;
}
.legal7-c-skeleton-card--lawyer .l7-skeleton--avatar { margin: 0 auto var(--space-3); }
.legal7-c-skeleton-card--service {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
}
/*
 * Legal 7 — Mobile-First Polish (04.mobile.css)
 * Loaded after 03.components.css — overrides for phones (<768px)
 * 97% of users are on mobile — this is the priority stylesheet.
 *
 * Breakpoints:
 *   768px  — phones + small tablets
 *   480px  — phones (most common: 360–430px wide)
 *   360px  — small phones (Samsung A-series, etc.)
 */

/* ══════════════════════════════════════════════
   RESET: ensure box-sizing everywhere
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }

  /* Prevent horizontal overflow */
  body, .legal7-screen, [data-screen] {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Global section padding reduction */
  .legal7-screen--home { padding-bottom: 100px; }

  /* ═══ PROMO BAR ═══ */
  .legal7-promo-bar { font-size: 0.72rem; padding: 0 10px; }
  .legal7-promo-bar-close { flex-shrink: 0; }

  /* ═══ NAVBAR ═══ */
  .l7-nav { height: 58px; padding: 0 16px; justify-content: space-between; }
  .l7-nav-logo-img { height: 36px; }
  .l7-nav-wordmark { font-size: 1.05rem; }
  .l7-nav-burger { width: 44px; height: 44px; padding: 8px; }
  .l7-nav-login { display: none; } /* hidden on mobile — panel has sign-in */
  .l7-secnav ul { padding: 6px 16px; }

  /* ═══ ACTIVITY FEED — sits just above fixed bottom CTA ═══ */
  .legal7-c-activity-feed { max-width: 77%; bottom: 80px !important; }

  /* ═══ HERO SECTION ═══ */
  .l7-hero { min-height: auto; }
  .l7-hero-live {
    margin: 20px auto 0;
    font-size: 0.72rem;
    padding: 5px 12px;
  }
  .l7-hero-slide-inner {
    grid-template-columns: 1fr;
    padding: 16px 16px 48px;
    gap: 20px;
    text-align: center;
    min-height: auto;
  }
  .l7-hero-text { order: 2; }
  .l7-hero-visual { order: 1; }

  .l7-hero-badge { margin: 0 auto; }
  .l7-hero-h1 {
    font-size: clamp(1.65rem, 7vw, 2.2rem) !important;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  .l7-hero-h3 { font-size: 0.95rem; }
  .l7-hero-body { font-size: 0.82rem; display: none; } /* Hide body copy on mobile — too much text */

  /* Stats row: 2x2 grid on mobile (each card now has own border+bg already) */
  .l7-hero-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    width: 100%; max-width: 100%;
  }
  .l7-hero-stat { padding: 10px 12px; }
  .l7-hero-stat strong { font-size: 1.15rem; }
  .l7-hero-stat span { font-size: 0.7rem; }

  /* CTAs: full-width stacked */
  .l7-hero-ctas {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .l7-hero-cta-primary, .l7-hero-cta-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .l7-hero-cta-primary { min-height: 52px; }

  /* Illustration card */
  .l7-hero-img-card {
    max-width: 94%;
    transform: none !important;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,38,197,0.1), 0 4px 12px rgba(0,0,0,0.06);
  }
  .l7-hero-illus { border-radius: 10px; }
  .l7-hero-float { display: none !important; } /* Too crowded on mobile */
  .l7-hero-mini-card { display: none !important; }
  .l7-hero-halo { display: none; }
  .l7-hero-arc-svg { display: none; }
  .l7-hero-counter { top: 8px; right: 12px; font-size: 0.6rem; }
  .l7-hero-counter-cur { font-size: 0.9rem; }

  /* ═══ HOME: LEAD/OFFER STRIP ═══ */
  .legal7-home-lead { padding: 20px 16px; }
  .legal7-home-lead-inner { padding: 16px; }

  /* ═══ HOME: PROBLEM CARDS ═══ */
  .legal7-home-problems { padding: 32px 16px; }
  .legal7-home-problems-grid { grid-template-columns: 1fr; gap: 12px; }
  .legal7-home-problem-card { padding: var(--space-4); }

  /* ═══ HOME: SERVICES ═══ */
  .legal7-home-services { padding: 32px 0; }
  .legal7-home-services-inner { padding: 0; }
  .legal7-home-services h2 { padding: 0 16px; font-size: 1.4rem; }
  /* Horizontal scroll on mobile */
  .legal7-home-services-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 8px 16px 16px;
  }
  .legal7-home-services-grid::-webkit-scrollbar { display: none; }
  .legal7-home-svc-card {
    flex-shrink: 0;
    width: 260px;
    border-radius: 16px;
  }

  /* ═══ HOME: HOW IT WORKS ═══ */
  .legal7-home-hiw { padding: 32px 16px; }
  .legal7-home-hiw-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* ═══ PAY PER MINUTE TIERS ═══ */
  .l7-tiers-section { padding: 32px 16px; }
  .l7-tiers-header { margin-bottom: 24px; }
  .l7-tiers-header h2 { font-size: 1.7rem; }
  .l7-tiers-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .l7-tier-card--featured { order: -1; } /* Featured first on mobile */
  .l7-tier-card { padding: 24px 20px; gap: 10px; }
  .l7-tier-price { font-size: 2.8rem; }
  .l7-tier-btn { padding: 14px; font-size: 0.95rem; min-height: 52px; border-radius: 12px; }

  /* ═══ PACKAGES ═══ */
  .l7-pkg-section { padding: 32px 16px; }
  .l7-pkg-header { margin-bottom: 24px; }
  .l7-pkg-header h2 { font-size: 1.7rem; }
  .l7-pkg-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .l7-pkg-card--featured { order: -1; } /* Featured first on mobile */
  .l7-pkg-card { padding: 20px 18px; }
  .l7-pkg-img { height: 90px; }
  .l7-pkg-img img { max-height: 75px; }
  .l7-pkg-btn { padding: 14px; font-size: 0.95rem; min-height: 52px; }

  /* ═══ DISCUSS STRIP ═══ */
  .legal7-home-discuss { padding: 24px 16px; }
  .legal7-home-discuss p { padding: 16px; border-radius: 14px; }

  /* ═══ PRODUCTS ═══ */
  .l7-prd-section { padding: 32px 16px; }
  .l7-prd-header { margin-bottom: 24px; }
  .l7-prd-header h2 { font-size: 1.7rem; }
  .l7-prd-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .l7-prd-card-img { padding: 12px; }
  .l7-prd-card-body { padding: 10px 12px; }
  .l7-prd-card-body h3 { font-size: 0.78rem; }
  .l7-prd-card-cta { font-size: 0.7rem; }
  .l7-prd-card--cta { min-height: 110px; grid-column: span 2; }
  .l7-prd-card-cta-inner { padding: 16px; gap: 6px; }
  .l7-prd-card-cta-inner span { font-size: 0.9rem; }
  .l7-prd-card-cta-inner > svg:first-child { display: none; }

  /* ═══ LAWYERS ═══ */
  .legal7-home-lawyers { padding: 32px 0; }
  .legal7-home-lawyers header { padding: 0 16px; }
  .legal7-home-lawyers-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 8px 16px 16px;
  }
  .legal7-home-lawyers-grid::-webkit-scrollbar { display: none; }
  .legal7-home-lawyer {
    flex-shrink: 0;
    width: 220px;
    border-radius: 16px;
    padding: 16px;
  }
  .legal7-home-lawyer-photo { width: 80px; height: 80px; }
  .legal7-home-lawyer-name { font-size: 0.9rem; }
  .legal7-home-lawyer-info { font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .legal7-home-lawyer-cta { padding: 8px 14px; font-size: 0.8rem; min-height: 40px; }

  /* ═══ TRUST METRICS / STAT TILES ═══ */
  .legal7-home-achieve { padding: 24px 16px; }

  /* ═══ TESTIMONIALS ═══ */
  .legal7-home-testimonials { padding: 32px 16px; }
  .legal7-home-testimonials-grid { grid-template-columns: 1fr !important; }

  /* ═══ BENEFITS ═══ */
  .legal7-home-benefits { padding: 32px 16px; }
  .legal7-home-benefits-grid { grid-template-columns: 1fr !important; }

  /* ═══ HOW IT WORKS (hero section reuse) ═══ */
  .legal7-talk-hiw-flow {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .legal7-talk-hiw-arrow { transform: rotate(90deg) !important; }

  /* ═══ CREDENTIALS ═══ */
  .legal7-home-credentials { padding: 24px 16px; }
  .legal7-home-credentials-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .legal7-home-credential { flex-shrink: 0; min-width: 110px; }

  /* ═══ HOME FINAL CTA ═══ */
  .legal7-home-final-cta { padding: 40px 16px; border-radius: 0; }
  .legal7-home-final-cta h2 { font-size: 1.7rem !important; }
  .legal7-home-final-cta p { font-size: 0.9rem; }
  .legal7-home-final-cta-actions {
    flex-direction: column;
    gap: 10px;
  }
  .legal7-home-final-cta-actions a { width: 100%; justify-content: center; min-height: 52px; }

  /* ═══ TRUST BADGE ROW ═══ */
  .legal7-footer-trust { padding: 20px 16px; }
  .legal7-c-trust-row {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 4px;
    justify-content: flex-start;
  }
  .legal7-c-trust-row::-webkit-scrollbar { display: none; }
  .legal7-c-trust-badge { flex-shrink: 0; }

  /* ═══ FOOTER — 3-col on tablet/phone with brand on top ═══ */
  .legal7-footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-4) var(--space-3) !important;
    padding: 32px 16px;
  }
  .legal7-footer-col--brand {
    grid-column: 1 / -1; /* Brand full-width on top */
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-100, #f3f4f6);
  }
  .legal7-footer-logo-text { font-size: 1.2rem; }
  .legal7-footer-tagline { font-size: 0.875rem; }
  .legal7-footer-address { font-size: 0.825rem; line-height: 1.6; }
  .legal7-footer-gstin small { font-size: 0.78rem; }
  .legal7-footer-col h4,
  .legal7-footer-heading {
    font-size: 0.92rem !important; margin-bottom: 12px !important;
    color: var(--c, #0f172a);
  }
  .legal7-footer-col ul { gap: 8px; }
  .legal7-footer-col a,
  .legal7-footer-links a {
    font-size: 0.825rem !important;
    min-height: 28px;
  }
  .legal7-footer-link--all { font-size: 0.85rem !important; }
  .legal7-footer-contact a,
  .legal7-footer-contact-row { font-size: 0.84rem !important; }
  .legal7-footer-hours span { font-size: 0.78rem; }
  .legal7-footer-social { gap: 10px; }
  .legal7-footer-social a { width: 40px; height: 40px; }
  .legal7-footer-bottom { padding: 16px; }
  .legal7-footer-bottom__inner {
    flex-direction: column; gap: 12px; align-items: flex-start;
  }
  .legal7-footer-legal-links {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
  }
  .legal7-footer-legal-links a { font-size: 0.78rem !important; min-height: 24px; }
  .legal7-footer-copyright { font-size: 0.78rem; line-height: 1.5; }
}

/* ═══ FOOTER — small phones: revert to 1-col for legibility ═══ */
@media (max-width: 420px) {
  .legal7-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) var(--space-3) !important;
  }
  .legal7-footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {

  /* (Fixed Bottom CTA styles live inside its own component file now.) */

  /* ═══ FLOATING WHATSAPP — positioned above new 56px CTA ═══ */
  .legal7-floating-whatsapp {
    bottom: 88px !important; /* above 56px CTA + 12px gap + 12px from edge */
    right: 12px !important;
    height: 52px !important; width: 52px !important;
  }

  /* ═══ LIVE ACTIVITY FEED (positioning handled inside component CSS) ═══ */

  /* ═══ TALK PAGE ═══ */
  .legal7-screen--talk { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-talk-dash { grid-template-columns: 1fr 1fr !important; gap: var(--space-3); }
  .legal7-talk-dash-value { font-size: var(--font-size-2xl); }
  .legal7-talk-tiles--cat { grid-template-columns: repeat(2, 1fr) !important; }
  .legal7-talk-tile { min-height: 72px; padding: var(--space-2) var(--space-2); }
  .legal7-talk-tile-label { font-size: 0.72rem; }
  .legal7-talk-tiles--lang { grid-template-columns: repeat(3, 1fr) !important; }
  .legal7-talk-pref { grid-template-columns: 1fr; }
  .legal7-talk-cta { min-height: 56px; font-size: 1rem; }
  .legal7-talk-promise-grid { grid-template-columns: 1fr 1fr !important; }
  .legal7-talk-wa-card {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .legal7-talk-wa-left { min-width: unset; }
  .legal7-talk-wa-btn { width: 100%; justify-content: center; }

  /* ═══ SERVICES PAGE ═══ */
  .legal7-screen--services { padding: var(--space-6) var(--space-3) var(--space-16); }
  .legal7-svc-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-svc-chips { gap: var(--space-1); }
  .legal7-svc-chip { font-size: 0.72rem; padding: 6px 10px; }
  .legal7-svc-grid { grid-template-columns: 1fr !important; }
  .legal7-svc-compare-wrap { overflow-x: auto; }
  .legal7-svc-compare-table { min-width: 480px; }
  .legal7-svc-cases-grid { grid-template-columns: 1fr !important; }
  .legal7-svc-cta-block { border-radius: 16px; padding: var(--space-8) var(--space-4); }
  .legal7-svc-cta-block h2 { font-size: 1.5rem; }

  /* ═══ ABOUT PAGE ═══ */
  .legal7-screen--about { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-about-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-about-founder-card { grid-template-columns: 1fr !important; padding: var(--space-4); text-align: center; }
  .legal7-about-founder-photo { margin: 0 auto; }
  .legal7-about-mvv-grid { grid-template-columns: 1fr !important; }
  .legal7-about-team-grid { grid-template-columns: 1fr 1fr !important; }
  .legal7-about-impact-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: var(--space-4); }
  .legal7-about-impact-value { font-size: var(--font-size-3xl); }
  .legal7-about-seven { grid-template-columns: 1fr !important; text-align: center; padding: var(--space-6) var(--space-4); }
  .legal7-about-seven-glyph { font-size: 120px; }
  .legal7-about-cta h2 { font-size: 1.6rem; }
  .legal7-about-cta-row { flex-direction: column; }
  .legal7-about-cta-primary, .legal7-about-cta-secondary { width: 100%; justify-content: center; }

  /* ═══ CONTACT PAGE ═══ */
  .legal7-screen--contact { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-contact-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-contact-channels { grid-template-columns: 1fr 1fr !important; gap: var(--space-3); }
  .legal7-contact-channel { padding: var(--space-3); }
  .legal7-contact-channel-icon { width: 44px; height: 44px; }
  .legal7-contact-channel h3 { font-size: var(--font-size-sm); }
  .legal7-contact-channel-detail { font-size: var(--font-size-sm); }
  .legal7-contact-office { grid-template-columns: 1fr !important; }
  .legal7-contact-form-row { grid-template-columns: 1fr !important; }
  .legal7-contact-submit { min-height: 56px; width: 100%; }
  .legal7-contact-grievance-card dl { grid-template-columns: 100px 1fr; }
  .legal7-contact-cta-btns { flex-direction: column; }
  .legal7-contact-cta-primary, .legal7-contact-cta-ghost { width: 100%; justify-content: center; }

  /* ═══ TALKTIME PAGE ═══ */
  .legal7-screen--talktime { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-tt-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-tt-compare-wrap { overflow-x: auto; }
  .legal7-tt-compare-table { min-width: 600px; }
  .legal7-tt-grid { grid-template-columns: 1fr !important; }
  .legal7-tt-tier--rec { transform: scale(1); } /* No scale on mobile */
  .legal7-tt-tier-btn { min-height: 52px; }
  .legal7-tt-guarantee-card { grid-template-columns: 1fr !important; text-align: center; }
  .legal7-tt-guarantee-badge { margin: 0 auto; }
  .legal7-tt-guarantee-text ul { text-align: left; }
  .legal7-tt-gift-card { grid-template-columns: 1fr !important; text-align: center; }
  .legal7-tt-gift-icon { margin: 0 auto; }
  .legal7-tt-gift-btn { width: 100%; }
  .legal7-tt-trust { grid-template-columns: 1fr !important; }

  /* ═══ FAQs PAGE ═══ */
  .legal7-screen--faqs { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-faqs-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-faqs-controls { position: static; }
  .legal7-faqs-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .legal7-faqs-tabs::-webkit-scrollbar { display: none; }
  .legal7-faqs-tab { flex-shrink: 0; font-size: 0.75rem; padding: 6px 12px; }
  .legal7-faqs-item summary { padding: var(--space-3) var(--space-4); font-size: 0.9rem; }
  .legal7-faqs-a { font-size: 0.82rem; padding: 0 var(--space-4) var(--space-3); }
  .legal7-faqs-cta { border-radius: 16px; padding: var(--space-8) var(--space-4); }
  .legal7-faqs-cta h2 { font-size: 1.4rem; }
  .legal7-faqs-cta-row { flex-direction: column; gap: var(--space-2); }
  .legal7-faqs-cta-primary, .legal7-faqs-cta-secondary { width: 100%; justify-content: center; }

  /* ═══ PRODUCTS PAGE ═══ */
  .legal7-screen--products { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-prod-hero h1 { font-size: var(--font-size-3xl); }
  .legal7-prod-grid { grid-template-columns: 1fr 1fr !important; }
  .legal7-prod-process-list { grid-template-columns: 1fr !important; }
  .legal7-prod-process-list::before { display: none; }
  .legal7-prod-bundles-grid { grid-template-columns: 1fr !important; }
  .legal7-prod-promise { grid-template-columns: 1fr 1fr !important; }

  /* ═══ LOGIN PAGE ═══ */
  .legal7-screen--auth { padding: var(--space-5) var(--space-3) var(--space-10); min-height: auto; }
  .legal7-auth-shell { grid-template-columns: 1fr !important; gap: var(--space-4); }
  .legal7-auth-side h1 { font-size: var(--font-size-2xl); }
  .legal7-auth-side { display: none; } /* Hide value strip on mobile — keep card clean */
  .legal7-auth-card { padding: var(--space-5) var(--space-4); }
  .legal7-auth-cta { min-height: 52px; }

  /* ═══ DEPOSIT PAGE ═══ */
  .legal7-screen--deposit { padding: var(--space-5) var(--space-3) var(--space-10); }
  .legal7-deposit-wrap { max-width: 100%; }
  .legal7-deposit-pay { min-height: 56px; font-size: 1rem; }
  .legal7-deposit-trust { grid-template-columns: 1fr !important; gap: 6px; }
  .legal7-deposit-trust-item { justify-content: flex-start; }
  .legal7-deposit-presets { gap: 4px; }
  .legal7-deposit-preset { padding: 8px 10px; font-size: 0.78rem; }

  /* ═══ CALLS PAGE ═══ */
  .legal7-screen--calls { padding: var(--space-5) var(--space-3) var(--space-16); }
  .legal7-calls-hero h1 { font-size: var(--font-size-2xl); }
  .legal7-call-body { grid-template-columns: 1fr !important; }
  .legal7-call-summary { grid-template-columns: 40px 1fr auto; gap: var(--space-2); padding: var(--space-3); }
  .legal7-call-aside { gap: 6px; }
  .legal7-call-dur { display: none; }

  /* ═══ LEGAL PAGES (Terms/Policy/Refund) ═══ */
  .l7-legal-screen { padding: 0 0 var(--space-16); }
  .l7-legal-hero { padding: 24px 16px; }
  .l7-legal-hero h1 { font-size: 1.6rem; }
  .l7-legal-hero p { font-size: 0.85rem; }
  .l7-legal-layout { grid-template-columns: 1fr !important; padding: 20px 16px; }
  .l7-legal-toc {
    position: static !important;
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid var(--neutral-100);
  }
  .l7-legal-toc nav ul {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .l7-toc-link { border-left: none; border-bottom: 2px solid transparent; padding: 5px 10px; font-size: 0.72rem; }
  .l7-toc-link.is-active { border-left: none; border-bottom-color: var(--a); }
  .l7-legal-body { padding-left: 0; }
  .l7-legal-section h2 { font-size: 1.1rem; }
  .l7-legal-section p { font-size: 0.85rem; }
  .l7-legal-cta-bar { padding: 20px 16px; }
  .l7-legal-cta-inner { flex-direction: column; gap: 14px; text-align: center; align-items: center; }
  .l7-legal-cta-btns { flex-direction: column; width: 100%; gap: 8px; }
  .l7-legal-cta-primary, .l7-legal-cta-ghost { width: 100%; justify-content: center; }

  /* ═══ SECTION HEADER (global) ═══ */
  .legal7-c-section-header h2 { font-size: var(--font-size-2xl); }
  .legal7-c-section-header .legal7-c-subtitle { font-size: var(--font-size-sm); }

  /* ═══ GLOBAL BUTTON TOUCH TARGET ═══ */
  .legal7-c-btn, .l7-hero-cta-primary, .l7-hero-cta-ghost,
  .l7-tier-btn, .l7-pkg-btn, .l7-mobile-cta,
  .legal7-auth-cta, .legal7-contact-submit,
  .legal7-talk-cta, .l7-legal-cta-primary {
    min-height: 48px;
  }
}

/* ══════════════════════════════════════════════
   EXTRA SMALL PHONES (< 480px)
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero */
  .l7-hero-h1 { font-size: clamp(1.5rem, 8vw, 1.9rem) !important; }
  .l7-hero-cta-primary { font-size: 0.9rem; }

  /* Stats row 1-col */
  .l7-hero-stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .l7-hero-stat strong { font-size: 1.1rem; }

  /* Tiers */
  .l7-tier-price { font-size: 2.4rem; }

  /* Packages */
  .l7-pkg-price { font-size: 1.5rem; }

  /* Products: still 2-col but tighter */
  .l7-prd-grid { gap: 8px; }
  .l7-prd-card-img { padding: 8px; }
  .l7-prd-card-body h3 { font-size: 0.72rem; }

  /* Contact channels: single column */
  .legal7-contact-channels { grid-template-columns: 1fr !important; }

  /* Footer: single column */
  .legal7-footer-grid { grid-template-columns: 1fr !important; }
  .legal7-footer-col--brand { grid-column: auto; }

  /* Talk page tiles */
  .legal7-talk-tiles--cat { grid-template-columns: 1fr 1fr !important; }
  .legal7-talk-tiles--lang { grid-template-columns: 1fr 1fr 1fr !important; }
  .legal7-talk-tile { min-height: 66px; }

  /* Legal pages TOC: very compact */
  .l7-legal-toc nav ul { gap: 4px; }
  .l7-toc-link { font-size: 0.68rem; padding: 4px 8px; }

  /* About team: single column on very small */
  .legal7-about-team-grid { grid-template-columns: 1fr 1fr !important; }
  .legal7-about-impact-grid { grid-template-columns: 1fr 1fr !important; }

  /* Dashboard / Calls */
  .legal7-call-summary { padding: var(--space-2) var(--space-3); }
}

/* ══════════════════════════════════════════════
   TOUCH FEEDBACK (all phones)
   ══════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Better tap states */
  .l7-tier-btn:active,
  .l7-pkg-btn:active,
  .l7-hero-cta-primary:active,
  .l7-hero-cta-ghost:active,
  .legal7-fixed-bottom-cta__btn:active,
  .legal7-auth-cta:active,
  .legal7-talk-cta:active,
  .legal7-contact-submit:active,
  .l7-legal-cta-primary:active { opacity: 0.82; transform: scale(0.98); }

  /* Remove hover transforms on touch */
  .l7-tier-card:hover,
  .l7-pkg-card:hover,
  .l7-prd-card:hover,
  .legal7-svc-card:hover,
  .legal7-home-prd-card:hover,
  .l7-nav-cta:hover { transform: none !important; }

  /* Tile tap state */
  .legal7-talk-tile:active { background: var(--brand-100) !important; }
  .legal7-svc-chip:active { background: var(--brand-100) !important; }
}

/* ══════════════════════════════════════════════
   SCROLLABLE HORIZONTAL SECTIONS (ALL SIZES)
   Prevent jarring user experience
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Horizontal scroll: hide scrollbar but enable touch scroll */
  .l7-horizontal-scroll {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 8px;
    gap: 12px;
  }
  .l7-horizontal-scroll::-webkit-scrollbar { display: none; }
  .l7-horizontal-scroll > * { flex-shrink: 0; }

  /* Scroll indicators: subtle dots */
  .legal7-home-services-grid::after,
  .legal7-home-lawyers-grid::after {
    content: '';
    padding-right: 16px;
    display: block;
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════
   MOBILE PANEL ITEMS — ensure 44px touch targets
   ══════════════════════════════════════════════ */
.l7-mobile-link {
  min-height: 52px;
}
.l7-mobile-close {
  min-width: 44px; min-height: 44px;
}

/* ══════════════════════════════════════════════
   PREVENT CLS (layout shift) on load
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .l7-hero-carousel { min-height: 360px; }
  .legal7-home-packages-grid { min-height: 200px; }
}

/* ══════════════════════════════════════════════
   DARK MODE SAFE (light theme only, no dark mode)
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Force light theme */
  :root {
    color-scheme: light;
  }
}
/*
 * Legal 7 — Mobile Design System (05.mobile-system.css)
 * Loaded after 04.mobile.css via WebOS RequireAll
 *
 * 97% of users on phones. This file defines mobile-native:
 *   - Typography scale (never <0.825rem for readable text)
 *   - Spacing rhythm (8px grid; consistent section/card padding)
 *   - Color tokens per section type
 *   - Reusable .l7-m-* classes
 *
 * All variables prefixed --m-* (mobile) to avoid conflicts.
 */

/* ══════════════════════════════════════════════
   MOBILE TOKENS — apply globally
   ══════════════════════════════════════════════ */
:root {
  /* Typography — mobile (never smaller than 13.6px) */
  --m-h1: clamp(1.75rem, 8vw, 2.25rem);     /* 28-36 */
  --m-h2: clamp(1.45rem, 6vw, 1.8rem);      /* 23-29 */
  --m-h3: 1.15rem;                          /* 18.4 */
  --m-h4: 1.05rem;                          /* 16.8 */
  --m-body: 0.95rem;                        /* 15.2 — never smaller */
  --m-caption: 0.825rem;                    /* 13.2 — minimum */
  --m-eyebrow: 0.72rem;
  --m-tiny: 0.7rem;                         /* only for badges */

  /* Spacing — 8px grid */
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 20px;
  --m-space-6: 24px;
  --m-space-8: 32px;
  --m-space-10: 40px;
  --m-space-12: 48px;

  /* Section padding (top + bottom) */
  --m-section-y: 40px;
  --m-section-y-tight: 28px;
  --m-section-x: 16px;

  /* Card padding */
  --m-card-pad: 20px;
  --m-card-pad-tight: 16px;
  --m-card-pad-roomy: 24px;
  --m-card-radius: 16px;

  /* Shadows — sharper for retina, less blur */
  --m-shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
  --m-shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.05);
  --m-shadow-lg: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --m-shadow-accent: 0 4px 16px rgba(0,38,197,0.28), 0 1px 4px rgba(0,38,197,0.18);
  --m-shadow-glow: 0 0 0 4px rgba(0,38,197,0.08);

  /* Tap targets */
  --m-tap: 48px;
  --m-tap-lg: 56px;

  /* Section accent colors */
  --m-accent-hero: #0026c5;
  --m-accent-trust: #f59e0b;     /* gold for trust metrics */
  --m-accent-pricing: #0026c5;   /* brand blue for pricing */
  --m-accent-problem-1: #ef4444; /* red — cheque bounce */
  --m-accent-problem-2: #f59e0b; /* amber — divorce */
  --m-accent-problem-3: #10b981; /* green — property */
  --m-accent-step-1: #0026c5;    /* blue — sign up */
  --m-accent-step-2: #10b981;    /* green — buy */
  --m-accent-step-3: #f59e0b;    /* amber — pick */
  --m-accent-step-4: #6366f1;    /* indigo — call */
  --m-accent-products: #6366f1;  /* indigo for products */
  --m-accent-lawyers: #06b6d4;   /* cyan for lawyers */
  --m-accent-benefits: #10b981;  /* green for benefits */
  --m-accent-success: #10b981;
}

/* ══════════════════════════════════════════════
   MOBILE-ONLY UTILITIES (apply <=768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Force readable font sizes globally */
  body { font-size: var(--m-body); }

  /* SECTION wrapper — consistent padding + rhythm */
  .l7-m-section {
    padding: var(--m-section-y) var(--m-section-x);
    background: #fff;
  }
  .l7-m-section--alt    { background: #f8faff; }
  .l7-m-section--brand  { background: linear-gradient(180deg, #f4f7ff 0%, #eef2ff 100%); }
  .l7-m-section--dark   { background: linear-gradient(135deg, #0026c5 0%, #1a3fd9 100%); color: #fff; }
  .l7-m-section--neutral{ background: #f9fafb; }
  .l7-m-section--tight  { padding: var(--m-section-y-tight) var(--m-section-x); }

  /* Section header (eyebrow + h2 + subtitle) */
  .l7-m-section-head {
    text-align: center; margin-bottom: var(--m-space-6);
    max-width: 480px; margin-left: auto; margin-right: auto;
  }
  .l7-m-eyebrow {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0,38,197,0.08); color: var(--a, #0026c5);
    font-size: var(--m-eyebrow); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 9999px; margin-bottom: var(--m-space-3);
  }
  .l7-m-section--dark .l7-m-eyebrow {
    background: rgba(255,255,255,0.18); color: #fff;
  }
  .l7-m-section-title {
    margin: 0 0 var(--m-space-2);
    font-size: var(--m-h2); line-height: 1.2;
    font-weight: 800; color: var(--c, #0f172a);
    letter-spacing: -0.02em;
  }
  .l7-m-section--dark .l7-m-section-title { color: #fff; }
  .l7-m-section-sub {
    margin: 0; font-size: var(--m-body);
    color: var(--c0, #64748b); line-height: 1.55;
  }
  .l7-m-section--dark .l7-m-section-sub { color: rgba(255,255,255,0.82); }

  /* Premium card */
  .l7-m-card {
    background: #fff;
    border-radius: var(--m-card-radius);
    padding: var(--m-card-pad);
    box-shadow: var(--m-shadow-md);
    border: 1px solid rgba(15,23,42,0.05);
  }
  .l7-m-card--elevated { box-shadow: var(--m-shadow-lg); }
  .l7-m-card--featured {
    background: linear-gradient(160deg, #0026c5 0%, #1a3fd9 100%);
    color: #fff;
    box-shadow: var(--m-shadow-accent), var(--m-shadow-lg);
    border: none;
  }

  /* Touch-optimised buttons */
  .l7-m-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 22px;
    background: var(--a, #0026c5); color: #fff !important;
    border: none; border-radius: 12px;
    font-size: var(--m-body); font-weight: 700;
    text-decoration: none !important;
    box-shadow: var(--m-shadow-accent);
    min-height: var(--m-tap-lg);
    font-family: inherit; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
  }
  .l7-m-btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,38,197,0.3);
  }
  .l7-m-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px 22px;
    background: #fff; color: var(--a, #0026c5) !important;
    border: 1.5px solid rgba(0,38,197,0.2);
    border-radius: 12px;
    font-size: var(--m-body); font-weight: 600;
    text-decoration: none !important;
    min-height: var(--m-tap-lg);
    width: 100%;
  }
  .l7-m-btn-ghost:active { background: #eef2ff; transform: scale(0.98); }

  /* Carousel scroll-dots indicator */
  .l7-m-scroll-hints {
    display: flex; justify-content: center; gap: 6px;
    margin-top: var(--m-space-4);
  }
  .l7-m-scroll-hint {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(0,38,197,0.2);
    transition: width 0.25s ease, background 0.25s ease;
  }
  .l7-m-scroll-hint.is-active {
    width: 24px; background: var(--a, #0026c5);
    border-radius: 3px;
  }

  /* Color tint card — left border accent */
  .l7-m-card-accent {
    background: #fff; border-radius: var(--m-card-radius);
    padding: var(--m-card-pad);
    border-left: 3px solid var(--accent, var(--a));
    box-shadow: var(--m-shadow-sm);
  }
  .l7-m-card-accent[data-accent="red"]    { --accent: var(--m-accent-problem-1); }
  .l7-m-card-accent[data-accent="amber"]  { --accent: var(--m-accent-problem-2); }
  .l7-m-card-accent[data-accent="green"]  { --accent: var(--m-accent-problem-3); }
  .l7-m-card-accent[data-accent="blue"]   { --accent: var(--m-accent-hero); }
  .l7-m-card-accent[data-accent="indigo"] { --accent: var(--m-accent-step-4); }
  .l7-m-card-accent[data-accent="gold"]   { --accent: var(--m-accent-trust); }
  .l7-m-card-accent[data-accent="cyan"]   { --accent: var(--m-accent-lawyers); }

  /* Icon containers (replacement for emoji) */
  .l7-m-icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(0,38,197,0.08); color: var(--a, #0026c5);
    flex-shrink: 0;
  }
  .l7-m-icon-box--lg { width: 56px; height: 56px; border-radius: 14px; }
  .l7-m-icon-box--sm { width: 36px; height: 36px; border-radius: 10px; }
  .l7-m-icon-box[data-tint="red"]    { background: rgba(239,68,68,0.1);  color: #dc2626; }
  .l7-m-icon-box[data-tint="amber"]  { background: rgba(245,158,11,0.1); color: #d97706; }
  .l7-m-icon-box[data-tint="green"]  { background: rgba(16,185,129,0.1); color: #059669; }
  .l7-m-icon-box[data-tint="indigo"] { background: rgba(99,102,241,0.1); color: #4f46e5; }
  .l7-m-icon-box[data-tint="gold"]   { background: rgba(245,158,11,0.1); color: #d97706; }
  .l7-m-icon-box[data-tint="cyan"]   { background: rgba(6,182,212,0.1);  color: #0891b2; }
  .l7-m-icon-box[data-tint="blue"]   { background: rgba(0,38,197,0.08);  color: #0026c5; }

  /* Pills (specialty tags etc.) */
  .l7-m-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 9999px;
    background: rgba(0,38,197,0.08); color: var(--a, #0026c5);
    font-size: var(--m-tiny); font-weight: 600;
    white-space: nowrap;
  }
  .l7-m-pill[data-tint="green"] { background: rgba(16,185,129,0.1); color: #059669; }
  .l7-m-pill[data-tint="gold"]  { background: rgba(245,158,11,0.1); color: #d97706; }
  .l7-m-pill[data-tint="red"]   { background: rgba(239,68,68,0.1);  color: #dc2626; }
  .l7-m-pill[data-tint="solid"] { background: var(--a, #0026c5); color: #fff; }

  /* Mini divider between sections (gradient) */
  .l7-m-divider {
    height: 1px; background: linear-gradient(90deg, transparent, rgba(0,38,197,0.12), transparent);
    margin: 0;
  }

  /* Soft glow ring around interactive elements on focus */
  .l7-m-focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,38,197,0.25);
  }

  /* GLOBAL: enforce minimum readable font for body content */
  p, li, dd, dt, address, label, span, small {
    font-size: max(var(--m-caption), 0.825rem);
  }
  small { font-size: var(--m-tiny); }

  /* Sticky CTA / Nav hide-on-scroll states (used by JS) */
  .l7-scroll-hidden {
    transform: translateY(120%) !important;
    transition: transform 0.3s ease !important;
  }
  .l7-header.l7-scroll-hidden {
    transform: translateY(-100%) !important;
  }

  /* Section background transitions (no hard borders between sections) */
  .l7-m-fade-top {
    background-image: linear-gradient(180deg, transparent 0%, rgba(0,38,197,0.02) 100%);
  }
  .l7-m-fade-bot {
    background-image: linear-gradient(180deg, rgba(0,38,197,0.02) 0%, transparent 100%);
  }
}

/* ══════════════════════════════════════════════
   SECTION ALTERNATING BACKGROUNDS (all viewports)
   Applies to standard section wrappers across pages
   to break the "all-white-rectangles" feel.

   CRITICAL: each rule includes `max-width: none !important`
   because per-screen inline CSS hardcodes caps like
   `max-width: 1100px` that would otherwise collapse the
   bg back to 1100px wide and break full-bleed. Inner
   content is centered via additional .l7-content-cap rule
   below (or the screen's existing inner wrappers).
   ══════════════════════════════════════════════ */

/* Talk page section alternation */
.legal7-screen--talk > .legal7-talk-dash { background: linear-gradient(180deg, #fff 0%, #f8faff 100%); padding-top: 32px; padding-bottom: 32px; }
.legal7-screen--talk > .legal7-talk-hiw { background: linear-gradient(180deg, #f4f7ff 0%, #eef2ff 100%); padding-top: 56px; padding-bottom: 56px; max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 700px)); padding-right: max(16px, calc(50vw - 700px)); }
.legal7-screen--talk > .legal7-talk-wizard { background: #fff; padding-top: 56px; padding-bottom: 56px; }
.legal7-screen--talk > .legal7-talk-promise { background: #f9fafb; padding-top: 56px; padding-bottom: 56px; max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 700px)); padding-right: max(16px, calc(50vw - 700px)); }
.legal7-screen--talk > .legal7-talk-wa { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); padding: 48px var(--space-6); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 700px)); padding-right: max(16px, calc(50vw - 700px)); }

/* Services page alternation */
.legal7-screen--services > .legal7-svc-filter { background: linear-gradient(180deg, #fff 0%, #f8faff 100%); padding-top: 16px; padding-bottom: 24px; }
.legal7-screen--services > .legal7-svc-grid-section { background: #fff; padding-top: 32px; padding-bottom: 56px; }
.legal7-screen--services > .legal7-svc-compare { background: #f9fafb; padding: 56px var(--space-6); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 600px)); padding-right: max(16px, calc(50vw - 600px)); }
.legal7-screen--services > .legal7-svc-cases { background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 650px)); padding-right: max(16px, calc(50vw - 650px)); }

/* Products page alternation */
.legal7-screen--products > .legal7-prod-grid-section { background: #fff; padding-top: 32px; padding-bottom: 56px; }
.legal7-screen--products > .legal7-prod-process { background: #f9fafb; padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 550px)); padding-right: max(16px, calc(50vw - 550px)); }
.legal7-screen--products > .legal7-prod-bundles { background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 600px)); padding-right: max(16px, calc(50vw - 600px)); }
.legal7-screen--products > .legal7-prod-promise { background: #f8faff; padding: 32px var(--space-4); margin-top: 32px; }

/* About page alternation */
.legal7-screen--about > .legal7-about-founder { background: #fff; padding-top: 32px; padding-bottom: 56px; }
.legal7-screen--about > .legal7-about-mvv { background: #f9fafb; padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 600px)); padding-right: max(16px, calc(50vw - 600px)); }
.legal7-screen--about > .legal7-about-team { background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 650px)); padding-right: max(16px, calc(50vw - 650px)); }
.legal7-screen--about > .legal7-about-seven { background: #f8faff; }

/* Contact page alternation */
.legal7-screen--contact > .legal7-contact-channels { background: #fff; padding-top: 32px; padding-bottom: 32px; }
.legal7-screen--contact > .legal7-contact-office { background: #f9fafb; padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 600px)); padding-right: max(16px, calc(50vw - 600px)); }
.legal7-screen--contact > .legal7-contact-form-section { background: #fff; padding-top: 56px; padding-bottom: 56px; }
.legal7-screen--contact > .legal7-contact-grievance { background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%); padding: 48px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 450px)); padding-right: max(16px, calc(50vw - 450px)); }

/* Talktime page alternation */
.legal7-screen--talktime > .legal7-tt-inperson-banner { margin-bottom: 32px; }
.legal7-screen--talktime > .legal7-tt-compare { background: #fff; padding-top: 32px; padding-bottom: 56px; }
.legal7-screen--talktime > .legal7-tt-tiers { background: #f9fafb; padding: 56px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 650px)); padding-right: max(16px, calc(50vw - 650px)); }
.legal7-screen--talktime > .legal7-tt-guarantee { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); padding: 48px var(--space-4); max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 550px)); padding-right: max(16px, calc(50vw - 550px)); }
.legal7-screen--talktime > .legal7-tt-packages { background: #fff; padding: 56px var(--space-4); }
.legal7-screen--talktime > .legal7-tt-payments { background: #f8faff; padding: 32px var(--space-4); }

/* Non-bleed sections — at 4K viewports the inline `max-width: 1100/1200`
   makes them look stranded in the middle. Bump them up so they fill
   the wider screen wrapper introduced by iter 57. */
@media (min-width: 1920px) {
  .legal7-talk-dash,
  .legal7-talk-wizard,
  .legal7-screen--services > .legal7-svc-filter,
  .legal7-screen--services > .legal7-svc-grid-section,
  .legal7-screen--products > .legal7-prod-grid-section,
  .legal7-screen--products > .legal7-prod-promise,
  .legal7-screen--about > .legal7-about-founder,
  .legal7-screen--contact > .legal7-contact-channels,
  .legal7-screen--contact > .legal7-contact-form-section,
  .legal7-screen--talktime > .legal7-tt-compare,
  .legal7-screen--talktime > .legal7-tt-packages,
  .legal7-screen--talktime > .legal7-tt-payments {
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 2560px) {
  .legal7-talk-dash,
  .legal7-talk-wizard,
  .legal7-screen--services > .legal7-svc-filter,
  .legal7-screen--services > .legal7-svc-grid-section,
  .legal7-screen--products > .legal7-prod-grid-section,
  .legal7-screen--products > .legal7-prod-promise,
  .legal7-screen--about > .legal7-about-founder,
  .legal7-screen--contact > .legal7-contact-channels,
  .legal7-screen--contact > .legal7-contact-form-section,
  .legal7-screen--talktime > .legal7-tt-compare,
  .legal7-screen--talktime > .legal7-tt-packages,
  .legal7-screen--talktime > .legal7-tt-payments {
    max-width: 1720px !important;
  }
}

/* ══════════════════════════════════════════════
   ULTRA-WIDE / 4K — bleed sections widen comfortably
   so content doesn't get stranded in middle of giant
   viewport while bg goes edge-to-edge.
   ══════════════════════════════════════════════ */
@media (min-width: 1920px) {
  /* talk */
  .legal7-screen--talk > .legal7-talk-hiw,
  .legal7-screen--talk > .legal7-talk-promise,
  .legal7-screen--talk > .legal7-talk-wa {
    padding-left:  max(16px, calc(50vw - 860px));
    padding-right: max(16px, calc(50vw - 860px));
  }
  /* services */
  .legal7-screen--services > .legal7-svc-compare {
    padding-left:  max(16px, calc(50vw - 760px));
    padding-right: max(16px, calc(50vw - 760px));
  }
  .legal7-screen--services > .legal7-svc-cases {
    padding-left:  max(16px, calc(50vw - 810px));
    padding-right: max(16px, calc(50vw - 810px));
  }
  /* products */
  .legal7-screen--products > .legal7-prod-process {
    padding-left:  max(16px, calc(50vw - 700px));
    padding-right: max(16px, calc(50vw - 700px));
  }
  .legal7-screen--products > .legal7-prod-bundles {
    padding-left:  max(16px, calc(50vw - 760px));
    padding-right: max(16px, calc(50vw - 760px));
  }
  /* about */
  .legal7-screen--about > .legal7-about-mvv {
    padding-left:  max(16px, calc(50vw - 760px));
    padding-right: max(16px, calc(50vw - 760px));
  }
  .legal7-screen--about > .legal7-about-team {
    padding-left:  max(16px, calc(50vw - 810px));
    padding-right: max(16px, calc(50vw - 810px));
  }
  /* contact */
  .legal7-screen--contact > .legal7-contact-office {
    padding-left:  max(16px, calc(50vw - 760px));
    padding-right: max(16px, calc(50vw - 760px));
  }
  .legal7-screen--contact > .legal7-contact-grievance {
    padding-left:  max(16px, calc(50vw - 610px));
    padding-right: max(16px, calc(50vw - 610px));
  }
  /* talktime */
  .legal7-screen--talktime > .legal7-tt-tiers {
    padding-left:  max(16px, calc(50vw - 810px));
    padding-right: max(16px, calc(50vw - 810px));
  }
  .legal7-screen--talktime > .legal7-tt-guarantee {
    padding-left:  max(16px, calc(50vw - 710px));
    padding-right: max(16px, calc(50vw - 710px));
  }
}
@media (min-width: 2560px) {
  .legal7-screen--talk > .legal7-talk-hiw,
  .legal7-screen--talk > .legal7-talk-promise,
  .legal7-screen--talk > .legal7-talk-wa {
    padding-left:  max(16px, calc(50vw - 960px));
    padding-right: max(16px, calc(50vw - 960px));
  }
  .legal7-screen--services > .legal7-svc-compare,
  .legal7-screen--services > .legal7-svc-cases,
  .legal7-screen--products > .legal7-prod-process,
  .legal7-screen--products > .legal7-prod-bundles,
  .legal7-screen--about > .legal7-about-mvv,
  .legal7-screen--about > .legal7-about-team,
  .legal7-screen--contact > .legal7-contact-office,
  .legal7-screen--contact > .legal7-contact-grievance,
  .legal7-screen--talktime > .legal7-tt-tiers,
  .legal7-screen--talktime > .legal7-tt-guarantee {
    padding-left:  max(16px, calc(50vw - 900px));
    padding-right: max(16px, calc(50vw - 900px));
  }
}

/* ══════════════════════════════════════════════
   SMALL PHONES (<= 480px) — extra adjustments
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --m-section-y: 32px;
    --m-card-pad: 16px;
  }
  .l7-m-btn-primary, .l7-m-btn-ghost { font-size: 0.95rem; min-height: 52px; }
}

                         /* Ended App Theme CSS : App:Legal - Branch:Space */ 
                         
            /* File : 0 Ended*/