/* SpyHuman Design System (SXO) — reusable layout + UX components.
   Namespaced .sh- to avoid collisions with bootstrap / style.css.
   Goals: scannability (lower bounce), F-pattern hero, 12-col grid, skeleton loading,
   scroll-trigger banner, related-content block. Theme greens: #069845 / #0bb855. */

:root{
  --sh-green:#069845; --sh-green-bright:#0bb855; --sh-ink:#0d1222; --sh-text:#b8bfce;
  --sh-head:#e8ecf4; --sh-muted:#7a8299; --sh-line:rgba(255,255,255,.06);
  --sh-radius:14px; --sh-gap:24px; --sh-maxw:1200px;
}

/* ---------- 12-column responsive grid ---------- */
.sh-container{width:100%;max-width:var(--sh-maxw);margin-inline:auto;padding-inline:16px}
.sh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sh-gap)}
.sh-col-12{grid-column:span 12}.sh-col-8{grid-column:span 8}.sh-col-6{grid-column:span 6}
.sh-col-4{grid-column:span 4}.sh-col-3{grid-column:span 3}
@media(max-width:991px){.sh-col-8,.sh-col-6{grid-column:span 12}.sh-col-4{grid-column:span 6}}
@media(max-width:600px){.sh-grid{gap:16px}.sh-col-4,.sh-col-3{grid-column:span 12}}

/* ---------- F-pattern hero (value prop left, high-contrast CTA) ---------- */
.sh-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:56px 0}
.sh-hero__copy{max-width:620px}
.sh-hero__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sh-green-bright);margin-bottom:12px}
.sh-hero h1{font-size:clamp(28px,4vw,46px);line-height:1.12;margin:0 0 14px}
.sh-hero p{font-size:17px;line-height:1.65;margin:0 0 24px}
.sh-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--sh-green),var(--sh-green-bright));color:#fff;font-weight:700;font-size:16px;padding:14px 30px;border-radius:10px;text-decoration:none;box-shadow:0 6px 24px rgba(6,152,69,.30);transition:transform .2s,box-shadow .2s}
.sh-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(6,152,69,.40);color:#fff}
.sh-cta--ghost{background:transparent;border:1.5px solid var(--sh-green);color:var(--sh-green-bright);box-shadow:none}
.sh-cta-row{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:991px){.sh-hero{grid-template-columns:1fr;gap:28px;padding:36px 0;text-align:center}.sh-cta-row{justify-content:center}}

/* ---------- Card grid (3-4 cols desktop -> 1 col mobile) ---------- */
.sh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sh-gap)}
.sh-card{background:var(--sh-ink);border:1px solid var(--sh-line);border-radius:var(--sh-radius);padding:24px;transition:border-color .25s,transform .25s}
.sh-card:hover{border-color:rgba(6,152,69,.30);transform:translateY(-3px)}
.sh-card__icon{width:46px;height:46px;display:grid;place-items:center;background:rgba(6,152,69,.10);border-radius:11px;color:var(--sh-green-bright);font-size:20px;margin-bottom:14px}
.sh-card h3{font-size:18px;color:var(--sh-head);margin:0 0 8px}
.sh-card p{font-size:14.5px;color:var(--sh-text);line-height:1.6;margin:0}

/* ---------- Scroll-trigger asymmetrical banner (breaks monotony mid-page) ---------- */
.sh-trigger{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:center;background:linear-gradient(135deg,#0d1222 0%,#141a30 55%,#1a2540 100%);border:1px solid rgba(6,152,69,.20);border-radius:18px;padding:34px 38px;margin:48px 0;position:relative;overflow:hidden}
.sh-trigger::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--sh-green),var(--sh-green-bright),transparent)}
.sh-trigger h2{font-size:clamp(22px,3vw,30px);margin:0 0 8px;color:#fff}
.sh-trigger p{margin:0;color:var(--sh-text)}
.sh-trigger__cta{justify-self:end}
@media(max-width:768px){.sh-trigger{grid-template-columns:1fr;text-align:center;padding:26px 20px}.sh-trigger__cta{justify-self:center}}

/* ---------- Related / "You might also like" (kills dead-ends, drives internal clicks) ---------- */
.sh-related{margin:56px 0 8px}
.sh-related__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.sh-related__head h2{font-size:22px;margin:0}
.sh-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-gap)}
.sh-related__card{display:block;background:var(--sh-ink);border:1px solid var(--sh-line);border-radius:var(--sh-radius);padding:20px;text-decoration:none;transition:border-color .25s,transform .25s}
.sh-related__card:hover{border-color:rgba(6,152,69,.30);transform:translateY(-3px)}
.sh-related__card span{font-size:12px;color:var(--sh-green-bright);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.sh-related__card strong{display:block;color:var(--sh-head);font-size:16px;margin:6px 0 4px}
.sh-related__card p{color:var(--sh-muted);font-size:13.5px;margin:0}
@media(max-width:768px){.sh-related__grid{grid-template-columns:1fr}}

/* ---------- Skeleton / grid loading (shown before content paints) ---------- */
.sh-skeleton{position:fixed;inset:0;z-index:9998;background:#080b16;padding:0;overflow:hidden}
.sh-skeleton__bar{height:64px;background:#0d1222;border-bottom:1px solid var(--sh-line)}
.sh-skeleton__wrap{max-width:var(--sh-maxw);margin:40px auto;padding:0 16px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.sh-sk{background:linear-gradient(90deg,#0d1222 25%,#161d33 37%,#0d1222 63%);background-size:400% 100%;animation:sh-shimmer 1.4s ease infinite;border-radius:10px}
.sh-sk--hero{grid-column:span 7;height:260px}
.sh-sk--side{grid-column:span 5;height:260px}
.sh-sk--card{grid-column:span 4;height:150px}
@media(max-width:991px){.sh-sk--hero,.sh-sk--side{grid-column:span 12;height:160px}.sh-sk--card{grid-column:span 6}}
@media(max-width:600px){.sh-sk--card{grid-column:span 12}}
@keyframes sh-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
body.sh-loaded .sh-skeleton{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}

/* ---------- honest-limit / legality note callout ---------- */
.clm-note{background:rgba(230,162,60,.06);border:1px solid rgba(230,162,60,.15);border-left:3px solid #e6a23c;border-radius:0 8px 8px 0;padding:12px 16px;margin:14px 0;font-size:13.5px;color:var(--sh-text);line-height:1.6}
.clm-note strong{color:#e6a23c}

/* ---------- sidebar register CTA card ---------- */
.sh-side-cta{background:linear-gradient(135deg,rgba(6,152,69,.10),rgba(6,152,69,.03));border:1px solid rgba(6,152,69,.18);border-radius:12px;padding:22px;text-align:center}
.sh-side-cta__icon{font-size:28px;color:var(--sh-green-bright);margin-bottom:8px;display:block}
.sh-side-cta__title{color:#fff;font-size:16px;font-weight:700;margin-bottom:8px;font-family:'Kumbh Sans',sans-serif}
.sh-side-cta__sub{color:var(--sh-muted);font-size:13px;margin-bottom:12px}
.sh-side-cta__alt{margin-top:10px}
.sh-side-cta__alt a{color:var(--sh-muted);font-size:12px;text-decoration:underline}

/* ---------- related-block footnote ---------- */
.sh-related__note{margin-top:14px;color:var(--sh-muted);font-size:13.5px}

/* ---------- hero media image ---------- */
.sh-hero__media img{border-radius:var(--sh-radius)}

/* ---------- spacing helpers ---------- */
.sh-trust-strip{margin-bottom:8px}
.sh-trigger--inset{margin:40px 0}

/* ---------- utility ---------- */
.sh-section{padding:48px 0}
.sh-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sh-green-bright);margin-bottom:10px}
.sh-center{text-align:center}

/* ---------- Mobile sticky CTA bar (phones only) ---------- */
.sh-mobicta{display:none}
@media(max-width:767px){
  .sh-mobicta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9990;gap:8px;padding:8px 10px;background:rgba(8,11,22,.97);border-top:1px solid var(--sh-line);backdrop-filter:blur(6px)}
  .sh-mobicta a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:9px;font-weight:700;font-size:14.5px;text-decoration:none}
  .sh-mobicta__reg{background:linear-gradient(135deg,var(--sh-green),var(--sh-green-bright));color:#fff}
  .sh-mobicta__dl{background:rgba(255,255,255,.08);color:#e8ecf4;border:1px solid var(--sh-line)}
  body{padding-bottom:64px}
  .scroll-top{bottom:74px!important}
}

/* ---------- Language switcher (langnav) ---------- */
.sh-langnav{position:relative;display:inline-block;vertical-align:middle;margin:0 6px;font-family:'Kumbh Sans',sans-serif}
.sh-langnav__btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(0,0,0,.14);color:#0f172a;font-size:13.5px;font-weight:600;line-height:1;padding:9px 12px;border-radius:8px;cursor:pointer}
.sh-langnav__btn .fa-globe{color:var(--sh-green)}
.sh-langnav__caret{font-size:11px;transition:transform .2s}
.sh-langnav.open .sh-langnav__caret{transform:rotate(180deg)}
.sh-langnav__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;max-height:62vh;overflow:auto;background:#0d1222;border:1px solid var(--sh-line);border-radius:10px;padding:6px;margin:0;list-style:none;box-shadow:0 14px 34px rgba(0,0,0,.4);display:none;z-index:9996}
.sh-langnav.open .sh-langnav__menu{display:block}
.sh-langnav__menu li{margin:0}
.sh-langnav__menu a{display:block;padding:9px 12px;border-radius:7px;color:#b8bfce;text-decoration:none;font-size:14px;white-space:nowrap}
.sh-langnav__menu a:hover{background:rgba(6,152,69,.10);color:#fff}
.sh-langnav__menu a.is-active{color:var(--sh-green-bright);font-weight:700}
.sh-langnav-mob{list-style:none}
.sh-langnav-mob .sh-langnav{display:block;margin:6px 0}
.sh-langnav-mob .sh-langnav__btn{width:100%;justify-content:space-between;color:#fff;border-color:rgba(255,255,255,.18)}
.sh-langnav-mob .sh-langnav__menu{right:auto;left:0;width:100%}