/*
Theme Name: En.Parle
Theme URI: https://enparle.app
Author: En.Parle
Author URI: https://enparle.app
Description: Custom marketing theme for En.Parle, an AI-powered communication ecosystem combining secure messaging, voice and video calls, payments, collaboration, business tools, and an intelligent assistant into one platform. Includes an animated product mockup, module grid, persona tabs, and full desktop-download section.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enparle
*/

/* =========================================================
   RESET & ROOT TOKENS
   ========================================================= */
:root{
  /* Brand blue, taken from the logo/icon — every dark surface in the
     theme is derived from this one hue so the whole site reads as
     "blue," not "black with a blue logo." Dark is the default look;
     the light variant below is reached via the [data-theme="light"]
     toggle in the header (assets/js/main.js) and never changes which
     hue is "the brand," only how light or dark it's applied. */
  --brand-blue:#1a2fc4;

  --ink:#0a1442;
  --surface:#101d5c;
  --elevated:#16266e;
  --elevated-2:#1c2f82;
  --hair:rgba(255,255,255,0.10);
  --hair-strong:rgba(255,255,255,0.18);
  --header-bg:rgba(10,20,66,0.75);
  --banner-scrim-0:rgba(10,20,66,0.92);
  --banner-scrim-1:rgba(10,20,66,0.4);
  --banner-scrim-2:rgba(10,20,66,0.05);
  --shadow-color:rgba(0,0,0,0.6);
  --shadow-color-soft:rgba(0,0,0,0.45);

  --navy-chip:#1e2f8f;
  --blue-tint:#7d95ff;
  --blue-soft:rgba(125,149,255,0.16);
  --orange:#ff8c4f;
  --orange-text:#ff8c4f;
  --orange-soft:rgba(255,140,79,0.15);
  --success:#5fb88a;
  --success-soft:rgba(95,184,138,0.14);

  --text:#eef1f6;
  --text-dim:#bcc4e6;
  --text-mute:#8590c2;

  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

/* =========================================================
   LIGHT THEME — same brand blue and orange, applied to a light
   surface instead of a dark one. Toggled by the sun/moon control in
   the header; falls back to the visitor's OS preference on first
   visit (assets/js/main.js), then remembers their explicit choice.
   Every color below is a direct counterpart to its dark-mode value
   above — same variable names, so every component that already
   consumes these tokens re-themes automatically with no per-component
   overrides needed.
   ========================================================= */
:root[data-theme="light"]{
  --ink:#f5f7ff;
  --surface:#ffffff;
  --elevated:#eef1ff;
  --elevated-2:#e3e8ff;
  --hair:rgba(10,20,66,0.10);
  --hair-strong:rgba(10,20,66,0.18);
  --header-bg:rgba(255,255,255,0.82);
  --banner-scrim-0:rgba(10,20,66,0.88);
  --banner-scrim-1:rgba(10,20,66,0.35);
  --banner-scrim-2:rgba(10,20,66,0.05);
  --shadow-color:rgba(10,20,66,0.18);
  --shadow-color-soft:rgba(10,20,66,0.12);

  --navy-chip:#28399e;
  --blue-tint:#3450d6;
  --blue-soft:rgba(52,80,214,0.10);
  /* The vivid brand orange (--orange) fails WCAG AA as *text* on a
     white surface — it stays as-is for buttons, borders, and icons
     (which aren't held to text-contrast rules), but --orange-text is a
     darkened version used everywhere orange sits directly on the page
     as reading text (links inside paragraphs, etc.). */
  --orange-text:#b85a26;
  --orange-soft:rgba(255,140,79,0.14);
  --success-soft:rgba(95,184,138,0.14);

  --text:#101a3d;
  --text-dim:#4a5480;
  --text-mute:#7680ab;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,140,79,0.09), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(126,160,214,0.08), transparent 55%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;}
::selection{background:var(--orange);color:#0a1442;}

a:focus-visible, button:focus-visible, .tab:focus-visible, input:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

/* Accessibility: skip link + screen-reader text (WordPress convention) */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--orange);color:#1a0f08;
  padding:12px 20px;border-radius:0 0 8px 0;
  z-index:1000;font-weight:600;
}
.skip-link:focus{left:0;}
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* =========================================================
   NAV
   ========================================================= */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
nav.site-nav{display:flex;align-items:center;justify-content:space-between;height:72px;position:relative;}

.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.2rem;}
.logo img{width:32px;height:32px;border-radius:9px;flex-shrink:0;}
.logo .dot{color:var(--orange);}
.logo.has-custom-logo img{width:auto;height:32px;border-radius:0;}

.nav-links{display:flex;gap:32px;font-size:0.92rem;color:var(--text-dim);}
.nav-links a{transition:color .2s;display:inline-flex;align-items:center;gap:4px;}
.nav-links a:hover{color:var(--text);}
.nav-links .nav-ext svg{width:12px;height:12px;opacity:0.7;}
.nav-cta{display:flex;align-items:center;gap:14px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:0.92rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--orange), #e8703a);
  color:#1a0f08;
  box-shadow:0 6px 20px rgba(255,140,79,0.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,140,79,0.42);}
.btn-ghost{background:transparent;border-color:var(--hair-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--orange);background:var(--orange-soft);}
.btn-sm{padding:9px 16px;font-size:0.85rem;}
.btn .arrow{width:14px;height:14px;transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(2px);}

.menu-toggle{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--hair-strong);
  border-radius:9px;
  background:transparent;
  align-items:center;justify-content:center;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  display:block;width:18px;height:2px;background:var(--text);
  border-radius:2px;transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   SECTION SHELL
   ========================================================= */
section{position:relative;z-index:1;}
main{display:block;}
.section-pad{padding:120px 0;}
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.16em;
  font-size:0.72rem;color:var(--orange);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--orange-soft);}
h1,h2,h3,h4{font-family:var(--display);}
h2{
  font-weight:700;
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing:-0.01em;line-height:1.15;max-width:720px;
}
.section-sub{color:var(--text-dim);font-size:1.05rem;max-width:560px;margin-top:16px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap;}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:180px 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero-copy h1{
  font-weight:700;
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);line-height:1.08;letter-spacing:-0.015em;margin-bottom:22px;
}
.hero-copy h1 .grad{
  background:linear-gradient(100deg, var(--orange), #ffc38a 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy p{color:var(--text-dim);font-size:1.12rem;max-width:480px;margin-bottom:34px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.hero-note{font-family:var(--mono);font-size:0.78rem;color:var(--text-mute);display:flex;align-items:center;gap:8px;}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px;}
.chip{
  font-family:var(--mono);font-size:0.78rem;color:var(--text-dim);
  border:1px solid var(--hair);padding:7px 14px;border-radius:100px;background:var(--surface);
}

/* =========================================================
   OS MOCKUP (signature hero element)
   ========================================================= */
.mockup-wrap{position:relative;perspective:1400px;}
.mockup{
  background:var(--elevated);border:1px solid var(--hair-strong);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  transform:rotateY(-8deg) rotateX(2deg);transition:transform .6s ease;
}
.mockup-wrap:hover .mockup{transform:rotateY(-3deg) rotateX(1deg);}
.mockup-bar{height:38px;background:var(--surface);border-bottom:1px solid var(--hair);display:flex;align-items:center;padding:0 16px;gap:8px;}
.mockup-dot{width:10px;height:10px;border-radius:50%;}
.mockup-title{margin-left:8px;font-family:var(--mono);font-size:0.72rem;color:var(--text-mute);}

.mockup-body{display:flex;height:390px;}
.rail{width:64px;background:var(--surface);border-right:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:6px;}
.rail-item{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--text-mute);cursor:pointer;transition:all .3s ease;position:relative;border:none;background:none;}
.rail-item svg{width:19px;height:19px;}
.rail-item.active{background:var(--orange-soft);color:var(--orange);}
.rail-item.active::before{content:'';position:absolute;left:-18px;width:3px;height:22px;border-radius:2px;background:var(--orange);}

.stage{flex:1;position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%), var(--elevated);}
.pane{position:absolute;inset:0;padding:26px 28px;opacity:0;transform:translateY(8px);transition:opacity .45s ease, transform .45s ease;pointer-events:none;}
.pane.active{opacity:1;transform:translateY(0);pointer-events:auto;}
.pane-label{font-family:var(--mono);font-size:0.7rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px;}

.bubble{max-width:78%;padding:11px 15px;border-radius:14px;font-size:0.88rem;margin-bottom:10px;line-height:1.4;}
.bubble.in{background:var(--elevated-2);border:1px solid var(--hair);border-bottom-left-radius:4px;}
.bubble.out{background:var(--orange);color:#1a0f08;margin-left:auto;border-bottom-right-radius:4px;}

.call-visual{display:flex;align-items:center;justify-content:center;flex-direction:column;height:calc(100% - 40px);gap:16px;}
.avatar-ring{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg, var(--blue-tint), var(--navy-chip));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.6rem;color:#fff;
  box-shadow:0 0 0 6px rgba(126,160,214,0.14), 0 0 40px rgba(126,160,214,0.25);
  animation:pulse-ring 2.4s ease-in-out infinite;
}
@keyframes pulse-ring{
  0%,100%{box-shadow:0 0 0 6px rgba(126,160,214,0.14), 0 0 40px rgba(126,160,214,0.25);}
  50%{box-shadow:0 0 0 10px rgba(126,160,214,0.07), 0 0 55px rgba(126,160,214,0.35);}
}
.call-status{font-family:var(--mono);font-size:0.78rem;color:var(--success);}
.call-name{font-family:var(--display);font-weight:600;font-size:1rem;}

.pay-card{background:var(--elevated-2);border:1px solid var(--hair);border-radius:14px;padding:20px;max-width:280px;margin:20px auto 0;}
.pay-row{display:flex;justify-content:space-between;font-size:0.85rem;color:var(--text-dim);margin-bottom:10px;}
.pay-amount{font-family:var(--display);font-weight:700;font-size:1.8rem;margin:8px 0;}
.pay-check{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-family:var(--mono);font-size:0.75rem;background:var(--success-soft);padding:5px 10px;border-radius:100px;margin-top:6px;}

.task-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--hair);margin-bottom:8px;font-size:0.85rem;background:var(--elevated-2);}
.task-check{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--hair-strong);flex-shrink:0;}
.task-check.done{background:var(--success);border-color:var(--success);}
.task-row.done span{color:var(--text-mute);text-decoration:line-through;}

.assist-orb{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg, var(--orange), #e8703a);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.assist-orb svg{width:16px;height:16px;}
.assist-row{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.assist-text{font-size:0.87rem;color:var(--text-dim);line-height:1.5;}
.assist-text b{color:var(--text);font-weight:600;}

/* =========================================================
   FRAGMENTATION vs UNIFIED
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
.scatter{position:relative;height:340px;border:1px dashed var(--hair-strong);border-radius:18px;background:var(--surface);}
.scatter-tag{position:absolute;font-family:var(--mono);font-size:0.78rem;color:var(--text-dim);background:var(--elevated);border:1px solid var(--hair);padding:9px 14px;border-radius:10px;}
.unified-block{
  height:340px;border-radius:18px;background:linear-gradient(160deg, var(--elevated), var(--surface));
  border:1px solid var(--hair-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;position:relative;overflow:hidden;
}
.unified-block::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 20%, rgba(255,140,79,0.16), transparent 60%);}
.unified-block img{width:56px;height:56px;border-radius:16px;box-shadow:0 10px 30px rgba(255,140,79,0.3);position:relative;z-index:1;margin:0 auto;}
.unified-block h4{font-family:var(--display);font-size:1.2rem;position:relative;z-index:1;}
.unified-block p{color:var(--text-dim);font-size:0.9rem;max-width:260px;position:relative;z-index:1;}
.versus-label{text-align:center;font-family:var(--mono);font-size:0.75rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:14px;}

/* =========================================================
   MODULES GRID
   ========================================================= */
.modules-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.module-card{
  display:block;position:relative;
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:28px;padding-right:56px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.module-card:hover{transform:translateY(-4px);border-color:var(--hair-strong);background:var(--elevated);}
.module-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.module-icon svg{width:21px;height:21px;}
.module-card h3{font-weight:600;font-size:1.08rem;margin-bottom:10px;}
.module-card p{color:var(--text-dim);font-size:0.9rem;}
.module-card.is-static{padding-right:28px;}
.module-card.is-static:hover{transform:none;background:var(--surface);border-color:var(--hair);}
.module-card.is-static::after{content:none;}
.module-card::after{
  content:'→';
  position:absolute;bottom:26px;right:28px;
  color:var(--text-mute);font-family:var(--display);
  opacity:0;transform:translateX(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.module-card:hover::after{opacity:1;transform:translateX(0);color:var(--orange);}

.learn-more-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:24px;font-weight:600;font-size:0.92rem;color:var(--orange);
  transition:gap .2s ease;
}
.learn-more-link svg{width:15px;height:15px;transition:transform .2s ease;}
.learn-more-link:hover{gap:10px;}
.learn-more-link:hover svg{transform:translateX(2px);}

/* =========================================================
   PERSONAS
   ========================================================= */
.tabs{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:0;}
.tab{background:none;border:none;color:var(--text-mute);font-family:var(--body);font-weight:600;font-size:0.95rem;padding:12px 4px;margin-right:28px;cursor:pointer;position:relative;transition:color .2s;}
.tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .25s ease;}
.tab.active{color:var(--text);}
.tab.active::after{transform:scaleX(1);}

.persona-panel{display:none;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.persona-panel.active{display:grid;}
.persona-panel h3{font-size:1.7rem;margin-bottom:14px;}
.persona-panel p{color:var(--text-dim);margin-bottom:22px;max-width:460px;}
.persona-list{display:flex;flex-direction:column;gap:12px;}
.persona-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.92rem;color:var(--text-dim);}
.persona-list li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--success);}
.persona-visual{height:280px;border-radius:16px;background:var(--surface);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.persona-visual .glow{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:0.35;}
.persona-visual svg{width:74px;height:74px;position:relative;z-index:1;}

/* =========================================================
   ASSISTANT SPOTLIGHT
   ========================================================= */
.spotlight{
  background:linear-gradient(160deg, var(--elevated), var(--surface) 70%);
  border:1px solid var(--hair-strong);border-radius:24px;padding:64px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;overflow:hidden;
}
.spotlight::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle, rgba(255,140,79,0.16), transparent 70%);}
.spotlight-chat{background:var(--ink);border:1px solid var(--hair);border-radius:16px;padding:22px;position:relative;z-index:1;}

/* =========================================================
   SECURITY BAND
   ========================================================= */
.trust-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden;}
.trust-item{background:var(--ink);padding:36px 32px;}
.trust-item svg{width:22px;height:22px;color:var(--orange);margin-bottom:16px;}
.trust-item h4{font-size:1.02rem;margin-bottom:8px;}
.trust-item p{color:var(--text-dim);font-size:0.88rem;}
.trust-band-cta{text-align:center;margin-top:32px;}
.trust-band-cta .learn-more-link{margin-top:0;}

/* =========================================================
   DESKTOP AVAILABILITY
   ========================================================= */
.devices{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;}
.device-frame{background:var(--elevated);border:1px solid var(--hair-strong);border-radius:14px;padding:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);}
.device-frame .inner{background:var(--surface);border-radius:8px;height:260px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);}
.os-list{display:flex;flex-direction:column;gap:16px;}
.os-row{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;transition:border-color .2s, background .2s;}
.os-row:hover{border-color:var(--hair-strong);background:var(--elevated);}
.os-name{font-family:var(--display);font-weight:600;font-size:0.98rem;}
.os-sub{font-family:var(--mono);font-size:0.72rem;color:var(--text-mute);margin-top:2px;}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{text-align:center;background:linear-gradient(150deg, rgba(255,140,79,0.14), rgba(126,160,214,0.07));border:1px solid var(--hair-strong);border-radius:24px;padding:88px 40px;}
.final-cta h2{margin:0 auto 18px;max-width:640px;}
.final-cta p{color:var(--text-dim);max-width:480px;margin:0 auto 36px;}
.final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* =========================================================
   GENERIC PAGE / BLOG CONTENT (page.php, index.php, 404.php)
   ========================================================= */
.page-hero{padding:190px 0 60px;}
.page-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.8rem);}
.entry-content{
  padding:20px 0 120px;
  max-width:760px;
}
.entry-content p{color:var(--text-dim);margin-bottom:20px;font-size:1.05rem;}
.entry-content h2,.entry-content h3{margin:36px 0 16px;color:var(--text);}
.entry-content a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;}
.entry-content ul,.entry-content ol{color:var(--text-dim);margin:0 0 20px 22px;}
.entry-content img{border-radius:12px;margin:20px 0;}
.entry-content blockquote{border-left:3px solid var(--orange);padding-left:20px;color:var(--text-dim);font-style:italic;margin:24px 0;}

.post-list{display:flex;flex-direction:column;gap:24px;padding-bottom:120px;}
.post-card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:32px;transition:border-color .2s, background .2s;}
.post-card:hover{border-color:var(--hair-strong);background:var(--elevated);}
.post-card .post-meta{font-family:var(--mono);font-size:0.75rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.post-card h2{font-size:1.4rem;margin-bottom:10px;}
.post-card h2 a:hover{color:var(--orange);}
.post-card p{color:var(--text-dim);font-size:0.95rem;}
.post-card .read-more{display:inline-block;margin-top:14px;color:var(--orange-text);font-weight:600;font-size:0.9rem;}

.pagination-row{display:flex;gap:12px;justify-content:center;padding-bottom:100px;}

.no-results{padding:40px 0 140px;color:var(--text-dim);}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{border-top:1px solid var(--hair);padding:64px 0 32px;position:relative;z-index:1;}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3, 1fr);gap:40px;margin-bottom:56px;}
.foot-brand p{color:var(--text-mute);font-size:0.88rem;margin-top:14px;max-width:260px;}
.foot-col h5{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;font-size:0.72rem;color:var(--text-mute);margin-bottom:18px;}
.foot-col ul{display:flex;flex-direction:column;gap:11px;}
.foot-col a{color:var(--text-dim);font-size:0.9rem;transition:color .2s;}
.foot-col a:hover{color:var(--text);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--hair);color:var(--text-mute);font-size:0.82rem;flex-wrap:wrap;gap:12px;}
.foot-legal-links{display:flex;gap:18px;}
.foot-legal-links a{color:var(--text-mute);transition:color .2s;}
.foot-legal-links a:hover{color:var(--orange);}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:150px;}
  .mockup{transform:none;}
  .split{grid-template-columns:1fr;}
  .modules-grid{grid-template-columns:repeat(2,1fr);}
  .persona-panel{grid-template-columns:1fr;}
  .persona-panel.active{display:grid;}
  .spotlight{grid-template-columns:1fr;padding:40px;}
  .trust-band{grid-template-columns:1fr;}
  .devices{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .nav-links{
    display:none;
    position:absolute;top:72px;left:0;right:0;
    background:var(--surface);
    flex-direction:column;
    padding:22px 20px;
    border-bottom:1px solid var(--hair);
    gap:18px;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
  }
  .nav-links.is-open{display:flex;}
  .menu-toggle{display:flex;}
  .nav-cta .btn-ghost{display:none;}
  .modules-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .section-pad{padding:80px 0;}
  .spotlight{padding:28px;}
  .hero{padding-top:140px;}
}

/* =========================================================
   PRODUCT SHOWCASE — real screenshots tab panel (front-page.php)
   Reuses the same visual language as .tabs/.tab (persona tabs) but
   under its own class names so the two tab groups' click handlers
   in main.js never interfere with each other.
   ========================================================= */
.showcase{display:flex;flex-direction:column;align-items:center;gap:36px;}
.screen-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;border-bottom:1px solid var(--hair);padding-bottom:0;width:100%;}
.screen-tab{background:none;border:none;color:var(--text-mute);font-family:var(--body);font-weight:600;font-size:0.92rem;padding:12px 4px;margin:0 20px 0 0;cursor:pointer;position:relative;transition:color .2s;}
.screen-tab:last-child{margin-right:0;}
.screen-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .25s ease;}
.screen-tab.active{color:var(--text);}
.screen-tab.active::after{transform:scaleX(1);}

.screen-stage{position:relative;width:100%;max-width:320px;height:560px;}
.screen-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(0.98);transition:opacity .4s ease, transform .4s ease;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.screen-panel.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.screen-img{max-height:100%;max-width:100%;width:auto;border-radius:26px;box-shadow:0 40px 90px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--hair-strong);}

/* =========================================================
   FINAL CTA — marketing banner image
   ========================================================= */
.final-cta-banner{width:100%;max-width:920px;margin:0 auto 40px;display:block;border-radius:18px;box-shadow:0 40px 90px -25px rgba(0,0,0,0.6), 0 0 0 1px var(--hair-strong);}

/* =========================================================
   PERSONA VISUAL — real screenshot thumbnail over the glow accent
   ========================================================= */
.persona-visual img{max-height:92%;width:auto;position:relative;z-index:1;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--hair-strong);}

@media (max-width:680px){
  .screen-stage{height:440px;}
  .screen-tabs{gap:4px 14px;}
  .final-cta-banner{margin-bottom:28px;}
}

/* =========================================================
   LEGAL PAGES — Terms of Service, Privacy Policy, Child Safety
   (template-terms.php, template-privacy.php, template-child-safety.php)

   Everything below reuses the root tokens defined at the top of this
   file (--ink, --surface, --elevated, --orange, --blue-tint, --success,
   --hair, --text, --text-dim, --mono/--display/--body) so the legal
   pages always match whatever palette the rest of the site is using.
   The only additions are --danger / --danger-soft, used sparingly for
   enforcement/zero-tolerance callouts on the Child Safety page.
   ========================================================= */
:root{
  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,0.14);
}

.legal-hero{padding:190px 0 0;}
.legal-hero .eyebrow{margin-bottom:22px;}
.legal-hero h1{font-weight:700;font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;letter-spacing:-0.01em;max-width:20ch;}
.legal-hero .legal-lede{color:var(--text-dim);font-size:1.05rem;max-width:60ch;margin-top:18px;line-height:1.6;}
.legal-dates{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;}
.legal-dates div{font-size:0.82rem;color:var(--text-mute);}
.legal-dates b{display:block;font-family:var(--mono);color:var(--text);font-size:0.92rem;margin-top:3px;}

.legal-operator{
  margin:36px 0 0;background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:16px;padding:22px 26px;
}
.legal-operator .k{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px;}
.legal-operator p{color:var(--text-dim);font-size:0.92rem;line-height:1.6;max-width:76ch;margin:0;}
.legal-operator b{color:var(--orange);}

.legal-zt{
  margin:22px 0 0;background:var(--danger-soft);border:1px solid rgba(255,107,107,0.3);
  border-radius:16px;padding:20px 26px;display:flex;gap:16px;align-items:flex-start;
}
.legal-zt .flag{
  font-family:var(--mono);font-weight:700;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--danger);background:rgba(255,107,107,0.16);border-radius:8px;padding:6px 10px;white-space:nowrap;
}
.legal-zt p{margin:0;font-size:0.92rem;line-height:1.6;color:var(--text);}

.legal-banner{position:relative;border-radius:20px;overflow:hidden;margin-top:36px;border:1px solid var(--hair-strong);}
.legal-banner img{width:100%;display:block;}
.legal-banner .scrim{position:absolute;inset:0;background:linear-gradient(0deg, var(--banner-scrim-0) 0%, var(--banner-scrim-1) 45%, var(--banner-scrim-2) 70%);}
.legal-banner .content{position:absolute;left:0;right:0;bottom:0;padding:32px;}
.legal-banner h1{color:#fff;}
.legal-banner .legal-lede{color:#d6dbea;}
.legal-public-url{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);color:#fff;
  font-family:var(--mono);font-size:0.8rem;padding:9px 16px;border-radius:100px;
}
.legal-public-url:hover{background:rgba(255,255,255,0.16);}

.legal-layout{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start;padding:56px 0 140px;}
.legal-toc{position:sticky;top:100px;align-self:start;}
.legal-toc .t{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:14px;}
.legal-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 160px);overflow-y:auto;}
.legal-toc a{display:block;font-size:0.85rem;color:var(--text-dim);padding:6px 10px;border-radius:8px;border-left:2px solid transparent;}
.legal-toc a:hover{color:var(--text);border-left-color:var(--orange);background:var(--orange-soft);}

.legal-main section{margin-bottom:44px;scroll-margin-top:96px;}
.legal-main h2{font-size:1.4rem;display:flex;align-items:baseline;gap:12px;max-width:none;}
.legal-main h2 .num{font-family:var(--mono);color:var(--orange);font-size:0.9rem;font-weight:500;}
.legal-main h3{font-size:1.04rem;margin:24px 0 10px;color:var(--text);}
.legal-main p{color:var(--text-dim);line-height:1.7;font-size:0.96rem;margin-bottom:14px;}
.legal-main ul{color:var(--text-dim);line-height:1.7;font-size:0.96rem;margin:0 0 14px 1.2em;}
.legal-main ul li{margin-bottom:5px;}
.legal-main .lead-text{color:var(--text);font-size:1.02rem;}
.legal-main a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;}

.legal-callout{border-left:3px solid var(--orange);background:var(--orange-soft);border-radius:0 12px 12px 0;padding:16px 20px;margin:18px 0;}
.legal-callout p{margin:0;color:var(--text);}
.legal-callout .k{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--orange);margin-bottom:6px;}
.legal-callout.warn{border-left-color:var(--danger);background:var(--danger-soft);}
.legal-callout.warn .k{color:var(--danger);}

.legal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.legal-mini{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;}
.legal-mini .t{font-weight:600;font-size:0.9rem;color:var(--text);margin-bottom:4px;}
.legal-mini .d{font-size:0.85rem;color:var(--text-dim);line-height:1.5;}

.legal-prohibited{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:16px 0;list-style:none;margin-left:0;}
.legal-prohibited li{display:flex;gap:8px;font-size:0.9rem;color:var(--text-dim);align-items:flex-start;}
.legal-prohibited li::before{content:'✕';color:var(--danger);font-weight:700;line-height:1.5;}

.legal-figure{float:right;width:200px;margin:4px 0 20px 28px;border-radius:20px;border:1px solid var(--hair-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);}

.legal-steps{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.legal-steps li{display:flex;gap:14px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;align-items:flex-start;}
.legal-steps .n{font-family:var(--mono);font-weight:700;color:var(--orange);flex:none;width:1.6em;}
.legal-steps .body b{display:block;color:var(--text);font-size:0.92rem;margin-bottom:2px;}
.legal-steps .body span{font-size:0.87rem;color:var(--text-dim);line-height:1.5;}

.legal-enforce-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.legal-enforce-card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:18px 20px;}
.legal-enforce-card .tag{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--danger);display:block;margin-bottom:6px;}
.legal-enforce-card .t{font-weight:600;color:var(--text);margin-bottom:4px;font-size:0.94rem;}
.legal-enforce-card .d{font-size:0.87rem;color:var(--text-dim);line-height:1.5;}

.legal-hotline{
  background:var(--elevated);border:1px solid var(--hair-strong);border-radius:16px;
  padding:24px 26px;margin:18px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
}
.legal-hotline .t{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-mute);margin-bottom:6px;}
.legal-hotline .n{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--text);}

.legal-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.legal-contact-card{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:20px;}
.legal-contact-card .role{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-mute);}
.legal-contact-card a{display:block;margin-top:10px;font-weight:600;font-size:0.98rem;color:var(--text);text-decoration:none;}
.legal-contact-card a:hover{color:var(--orange);}

.legal-table{width:100%;border-collapse:collapse;font-size:0.9rem;margin:16px 0;}
.legal-table th,.legal-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);color:var(--text-dim);}
.legal-table th{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-mute);}
.legal-table td a{color:var(--orange-text);}

.legal-crosslinks{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:56px;padding-top:32px;border-top:1px solid var(--hair);
}
.legal-crosslinks a{
  font-size:0.88rem;font-weight:600;color:var(--text-dim);border:1px solid var(--hair-strong);
  border-radius:100px;padding:9px 16px;transition:color .2s, border-color .2s, background .2s;
}
.legal-crosslinks a:hover{color:var(--text);border-color:var(--orange);background:var(--orange-soft);}
.legal-crosslinks a.current{color:var(--ink);background:var(--orange);border-color:var(--orange);}

@media (max-width:820px){
  .legal-layout{grid-template-columns:1fr;padding-top:36px;}
  .legal-toc{position:static;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .legal-toc ol{flex-direction:row;gap:8px;max-height:none;padding-bottom:6px;}
  .legal-toc a{border-left:none;border-bottom:2px solid transparent;background:var(--surface);border:1px solid var(--hair);white-space:nowrap;}
  .legal-figure{float:none;width:170px;margin:0 auto 20px;display:block;}
}
@media (max-width:680px){
  .legal-hero{padding-top:150px;}
  .legal-grid-2,.legal-enforce-grid,.legal-contact-grid{grid-template-columns:1fr;}
  .legal-prohibited{grid-template-columns:1fr;}
  .legal-hotline{flex-direction:column;align-items:flex-start;}
}

/* =========================================================
   THEME TOGGLE (header) — dark/light, see [data-theme="light"] block
   near the top of this file for the actual palette swap.
   ========================================================= */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  background:transparent;border:1px solid var(--hair-strong);border-radius:100px;color:var(--text-dim);
  cursor:pointer;transition:border-color .2s, color .2s;
}
.theme-toggle:hover{border-color:var(--orange);color:var(--text);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block;}

/* =========================================================
   LANGUAGE SWITCHER (header)
   ========================================================= */
.lang-switcher{position:relative;}
.lang-current{
  display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--hair-strong);
  color:var(--text-dim);border-radius:100px;padding:8px 12px;cursor:pointer;font-family:var(--body);font-size:0.85rem;font-weight:600;
  transition:border-color .2s, color .2s;
}
.lang-current svg{width:15px;height:15px;}
.lang-current:hover{border-color:var(--orange);color:var(--text);}
.lang-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--elevated);border:1px solid var(--hair-strong);
  border-radius:12px;padding:6px;list-style:none;box-shadow:0 20px 50px -15px rgba(0,0,0,0.5);z-index:20;
}
.lang-menu[hidden]{display:none;}
.lang-menu li[data-lang]{padding:9px 12px;border-radius:8px;font-size:0.88rem;color:var(--text-dim);cursor:pointer;}
.lang-menu li[data-lang]:hover{background:var(--orange-soft);color:var(--text);}
.lang-menu li[data-lang][aria-selected="true"]{color:var(--orange);font-weight:600;}
.lang-menu-divider{height:1px;background:var(--hair);margin:6px 4px;}
.lang-menu-translate{padding:9px 12px;border-radius:8px;font-size:0.82rem;color:var(--text-mute);cursor:pointer;}
.lang-menu-translate:hover{background:var(--blue-soft);color:var(--text);}

/* =========================================================
   SIGN-IN NOTICE — shown when the "Sign in" deep link can't reach the
   app yet (see assets/js/main.js). A small overlay, not a full page,
   so the click never looks like it went nowhere.
   ========================================================= */
.signin-notice{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(5,9,30,0.6);padding:20px;
}
.signin-notice[hidden]{display:none;}
.signin-notice-card{
  position:relative;background:var(--elevated);border:1px solid var(--hair-strong);border-radius:20px;
  padding:36px 32px;max-width:380px;width:100%;box-shadow:0 40px 90px -20px var(--shadow-color);text-align:center;
}
.signin-notice-card h3{font-family:var(--display);font-size:1.25rem;margin-bottom:12px;}
.signin-notice-card p{color:var(--text-dim);font-size:0.92rem;line-height:1.6;margin-bottom:22px;}
.signin-notice-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;
  background:var(--surface);color:var(--text-dim);font-size:1.1rem;line-height:1;cursor:pointer;
}
.signin-notice-close:hover{color:var(--text);}

/* =========================================================
   MISSION & HIGHLIGHTS SLIDER
   ========================================================= */
.mission-slider{
  position:relative;border-radius:24px;border:1px solid var(--hair-strong);background:var(--surface);overflow:hidden;
}
.mission-slider:focus-within{outline:2px solid var(--orange);outline-offset:-2px;}
.slider-track{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
@media (prefers-reduced-motion: reduce){.slider-track{transition:none;}}
.slide{flex:0 0 100%;min-width:0;padding:56px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;}
.slide-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.slide-icon svg{width:28px;height:28px;}
.slide-copy h3{font-size:1.5rem;margin:10px 0 14px;max-width:34ch;}
.slide-copy p{color:var(--text-dim);font-size:1rem;max-width:60ch;line-height:1.6;}
.slide-copy p a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 24px 28px;}
.slider-arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-strong);background:var(--elevated);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s, color .2s;
}
.slider-arrow svg{width:17px;height:17px;}
.slider-arrow:hover{border-color:var(--orange);color:var(--orange);}
.slider-dots{display:flex;gap:8px;}
.slider-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--hair-strong);cursor:pointer;padding:0;}
.slider-dot.active{background:var(--orange);width:22px;border-radius:5px;transition:width .25s ease, background .25s ease;}

/* =========================================================
   FOOTER — layer 2 (brand/CTA bar, follow+search, popular, legal strip)
   ========================================================= */
.foot-layer2{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding:32px 0;margin-top:8px;border-top:1px solid var(--hair);
}
.foot-layer2 .logo{flex-shrink:0;}
.foot-layer2-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-layer2-links a{color:var(--text-dim);font-size:0.9rem;font-weight:600;transition:color .2s;}
.foot-layer2-links a:hover{color:var(--text);}
.foot-layer2-cta{display:flex;gap:10px;flex-wrap:wrap;}

.foot-follow{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding:24px 0;border-top:1px solid var(--hair);
}
.foot-follow-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;font-size:0.72rem;color:var(--text-mute);white-space:nowrap;}
.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-link{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--hair-strong);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s, color .2s, background .2s;
}
.social-link svg{width:16px;height:16px;}
.social-link:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-soft);}
.foot-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--hair-strong);border-radius:100px;padding:4px 4px 4px 16px;gap:8px;min-width:220px;}
.foot-search input[type="search"]{background:none;border:none;color:var(--text);font-family:var(--body);font-size:0.88rem;flex:1;min-width:0;outline:none;}
.foot-search input[type="search"]::placeholder{color:var(--text-mute);}
.foot-search button{width:32px;height:32px;border-radius:50%;border:none;background:var(--orange);color:#1a0f08;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.foot-search button svg{width:15px;height:15px;}

.foot-popular{
  display:flex;flex-wrap:wrap;gap:8px 22px;padding:20px 0;border-top:1px solid var(--hair);
}
.foot-popular ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;}
.foot-popular a{color:var(--text-mute);font-size:0.85rem;font-weight:600;transition:color .2s;}
.foot-popular a:hover{color:var(--orange);}

.foot-legal-strip{padding:18px 0 4px;border-top:1px solid var(--hair);}
.foot-legal-strip ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;}
.foot-legal-strip a{color:var(--text-mute);font-size:0.8rem;transition:color .2s;}
.foot-legal-strip a:hover{color:var(--text-dim);}

.foot-regions{font-family:var(--mono);font-size:0.78rem;}

/* =========================================================
   NEWSLETTER FORM (footer) + honeypot anti-spam field
   ========================================================= */
.newsletter-form{margin-top:20px;max-width:340px;}
.newsletter-label{display:block;font-size:0.82rem;color:var(--text-dim);margin-bottom:10px;}
.newsletter-row{display:flex;gap:8px;}
.newsletter-row input[type="email"]{
  flex:1;min-width:0;background:var(--surface);border:1px solid var(--hair-strong);border-radius:10px;
  padding:10px 14px;color:var(--text);font-family:var(--body);font-size:0.88rem;outline:none;
}
.newsletter-row input[type="email"]:focus{border-color:var(--orange);}
.newsletter-row input[type="email"]::placeholder{color:var(--text-mute);}
.form-status{margin-top:10px;font-size:0.82rem;}
.form-status-ok{color:var(--success);}
.form-status-err{color:var(--orange);}
/* Honeypot: present in the DOM and tabbable-avoidant for spam bots that
   fill in every field, but never visible to — or reachable by — a real
   visitor using a mouse, touchscreen, or keyboard. display:none is
   avoided because some bots skip hidden fields; this is off-screen
   instead, which most don't check for. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* =========================================================
   DELETE-ACCOUNT FORM (template-delete-account.php) — reuses the same
   .form-status / .hp-field rules as the newsletter form above, plus the
   .legal-* tokens, so it matches the rest of the legal pages.
   ========================================================= */
.delete-account-form{max-width:520px;margin:18px 0 0;display:flex;flex-direction:column;gap:18px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:0.85rem;font-weight:600;color:var(--text);}
.form-field input,.form-field textarea{
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:10px;
  padding:11px 14px;color:var(--text);font-family:var(--body);font-size:0.92rem;outline:none;resize:vertical;
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--orange);}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-mute);}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;line-height:1.5;}
.form-checkbox input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--orange);}
.delete-account-form .btn{align-self:flex-start;}

/* =========================================================
   RESPONSIVE — footer layer 2, slider, language switcher
   ========================================================= */
@media (max-width:980px){
  .slide{grid-template-columns:1fr;text-align:left;padding:40px 32px;}
}
@media (max-width:680px){
  .foot-layer2,.foot-follow{flex-direction:column;align-items:flex-start;}
  .foot-search{width:100%;}
  .slide{padding:32px 22px;}
  .slide-copy h3{font-size:1.25rem;}
  .lang-menu{left:auto;right:0;}
}