/* ═══════════════════════════════════════════════════════════════
   LEGALYZE.PRO — SECURITY & PRIVACY STYLES (Part B)
   Scope: the .sec-* class family ONLY.
   Loads AFTER /assets/legalyze.css and /assets/legalyze-home.css
   and reuses their design tokens + conventions verbatim
   (container-lz, sec-pad, eyebrow-lz, btn-lz, hairline, reveal).
   No !important. Mobile-first. No neon, no glow, no imagery.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 1. HERO SECURITY BADGE (homepage hero) ───────── */
.sec-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .95rem .5rem .7rem;border:1px solid var(--hairline-strong);border-left:3px solid var(--tertiary);border-radius:var(--r-full);background:var(--sc-lowest);color:var(--primary);font-family:var(--font-label);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;text-decoration:none;transition:border-color .2s ease,background .2s ease;}
.sec-badge:hover{border-color:var(--primary);background:var(--sc-low);}
.sec-badge:active{transform:translateY(1px);}
.sec-badge-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--tertiary);flex-shrink:0;}
.sec-badge-ico svg{width:20px;height:20px;display:block;}
.sec-badge-txt{white-space:nowrap;}
@media(max-width:420px){.sec-badge-txt{white-space:normal;text-align:left;}}

/* ───────── 2. HERO SUPPORTING NOTE ───────── */
.sec-hero-note{font-family:var(--font-body);font-size:.88rem;line-height:1.6;color:var(--on-surface-variant);max-width:40rem;margin:1.3rem auto 0;}

/* ───────── 3. HOMEPAGE SECURITY SECTION ───────── */
.sec-privacy{position:relative;border-top:1px solid var(--hairline);}
.sec-privacy-lede{max-width:46rem;margin:0 auto 2.4rem;text-align:center;color:var(--on-surface-variant);font-size:1rem;line-height:1.7;}
.sec-privacy-list{list-style:none;display:grid;grid-template-columns:1fr;gap:.75rem;max-width:54rem;margin:0 auto;}
.sec-privacy-list li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.9rem 1.1rem;border:1px solid rgba(189,201,197,.45);border-radius:var(--r-sm);background:var(--sc-low);}
.sec-privacy-list li strong{display:block;color:var(--primary);font-weight:600;font-size:.92rem;line-height:1.5;}
.sec-privacy-list li span:not(.sec-tick){color:var(--on-surface-variant);font-size:.9rem;line-height:1.6;}
.sec-privacy-label{max-width:46rem;margin:0 auto 1.4rem;text-align:center;color:var(--on-surface-variant);font-size:1rem;line-height:1.6;}
@media(min-width:760px){.sec-privacy-list{grid-template-columns:repeat(2,1fr);gap:.85rem 1rem;}}

/* ───────── 4. SHARED TICK MARK ───────── */
.sec-tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:.1rem;border-radius:50%;border:1px solid rgba(0,104,90,.35);background:rgba(0,104,90,.08);color:var(--primary);font-size:12px;line-height:1;flex-shrink:0;font-family:var(--font-label);}
/* higher-specificity guard so the generic list-item span rules never repaint the tick */
.sec-privacy-list li .sec-tick,
.sec-panel-list li .sec-tick{color:var(--primary);font-size:12px;}

/* ───────── 5. OPTIONAL STAT STRIP ───────── */
.sec-stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;max-width:54rem;margin:2.4rem auto 0;}
.sec-stat{background:var(--sc-lowest);padding:1.3rem 1rem;text-align:center;}
.sec-stat-k{display:block;font-family:var(--font-label);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:.35rem;}
.sec-stat-v{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--primary);line-height:1.2;}

/* ───────── 6. /security/ PAGE HERO ───────── */
.sec-page-hero{position:relative;padding:clamp(3.4rem,7.5vw,5.6rem) 0 clamp(2.4rem,5vw,3.4rem);background:var(--sc-lowest);border-bottom:1px solid var(--hairline);overflow:hidden;}
.sec-page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(74,74,78,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(74,74,78,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 50% 0%,black 35%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,black 35%,transparent 80%);pointer-events:none;}
.sec-page-hero .container-lz{position:relative;max-width:52rem;}
.sec-page-badge{margin-bottom:1.5rem;}
.sec-page-eyebrow{display:block;margin-bottom:.5rem;}
.sec-page-title{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,2.9rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--primary);margin:.4rem 0 1.2rem;}
.sec-page-intro{font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.72;color:var(--on-surface-variant);max-width:44rem;}
.sec-page-intro + .sec-page-intro{margin-top:1rem;}

/* ───────── 7. TWO-PANEL SECURITY BLOCKS ───────── */
.sec-panels{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:60rem;margin:0 auto;}
@media(min-width:900px){.sec-panels{grid-template-columns:1.05fr .95fr;gap:1.8rem;align-items:start;}}
.sec-panel{background:var(--sc-lowest);border:1px solid rgba(189,201,197,.45);border-radius:var(--r);padding:clamp(1.4rem,3vw,1.9rem);}
.sec-panel--verified{border-left:3px solid var(--primary);background:linear-gradient(180deg,rgba(194,232,221,.16),var(--sc-lowest) 58%);}
.sec-panel--ongoing{border-left:3px solid var(--tertiary);background:linear-gradient(180deg,rgba(255,173,130,.12),var(--sc-lowest) 58%);}
.sec-panel-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.55rem;}
.sec-panel-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:.5rem;background:rgba(0,104,90,.10);color:var(--primary);flex-shrink:0;}
.sec-panel-ico svg{width:16px;height:16px;display:block;}
.sec-panel--ongoing .sec-panel-ico{background:rgba(138,76,41,.10);color:var(--tertiary);}
.sec-panel-title{font-family:var(--font-label);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);}
.sec-panel--ongoing .sec-panel-title{color:var(--tertiary);}
.sec-panel-flag{font-family:var(--font-label);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary);border:1px solid rgba(138,76,41,.35);border-radius:var(--r-full);padding:.22rem .6rem;background:rgba(138,76,41,.06);}
.sec-panel-sub{font-size:.9rem;color:var(--on-surface-variant);line-height:1.65;margin:.15rem 0 1.15rem;}
.sec-panel-list{list-style:none;display:grid;grid-template-columns:1fr;gap:.7rem;}
.sec-panel-list li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.85rem 1rem;border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--sc-low);font-size:.9rem;line-height:1.55;color:var(--on-surface);}
.sec-panel--ongoing .sec-panel-list li{background:var(--sc-lowest);border-color:var(--hairline-strong);}
.sec-panel-txt{color:var(--on-surface-variant);}
.sec-panel-list strong{color:var(--on-surface);font-weight:600;}
.sec-tick-ongoing{border-color:rgba(138,76,41,.4);background:rgba(138,76,41,.08);color:var(--tertiary);}
.sec-panel--ongoing .sec-panel-list li .sec-tick{border-color:rgba(138,76,41,.4);background:rgba(138,76,41,.08);color:var(--tertiary);}

/* ───────── 8. APPROACH (SHIFT-LEFT / BY DESIGN) ───────── */
.sec-approach-title{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--primary);margin:.7rem 0 1rem;}
.sec-approach-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:60rem;margin:0 auto;}
@media(min-width:820px){.sec-approach-grid{grid-template-columns:repeat(3,1fr);}}
.sec-approach-card{border:1px solid var(--hairline);border-radius:var(--r);background:var(--sc-lowest);padding:1.4rem 1.5rem;}
.sec-approach-card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--primary);margin-bottom:.5rem;}
.sec-approach-card p{font-size:.88rem;color:var(--on-surface-variant);line-height:1.65;}

/* ───────── 9. NOTES / LIMITS ───────── */
.sec-notes{max-width:52rem;margin:0 auto;}
.sec-note{border:1px solid var(--hairline);border-left:3px solid var(--outline-variant);border-radius:.5rem;background:var(--sc-low);padding:1.05rem 1.3rem;font-size:.88rem;line-height:1.72;color:var(--on-surface-variant);}
.sec-note + .sec-note{margin-top:.9rem;}
.sec-note strong{color:var(--on-surface);font-weight:600;}

/* ───────── 10. PAGE CTA ROW ───────── */
.sec-cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;}

/* ───────── 11. POSITIONING STRIP ───────── */
.sec-positioning{max-width:46rem;margin:0 auto;text-align:center;}
.sec-positioning-p{font-size:1rem;line-height:1.7;color:var(--on-surface-variant);margin-top:.9rem;}