/* ==========================================================================
   WanuSoft — app microsites stylesheet  (v3.0.0)
   Loaded AFTER /styles.css. Powers the two app microsites:
     • /eyesaverpro/*   Eye Saver Pro — purple accent
     • /privacypro/*    Privacy Pro   — green accent
   Every legacy class name is preserved so the per-page i18n dictionaries
   (which target these selectors) keep working unchanged.
   ========================================================================== */

/* ---------- 1. Legacy token bridge ---------- */
:root {
  --purple: #8038b5;
  --purple-light: #a96bd6;
  --purple-glow: rgba(128, 56, 181, 0.35);
  --accent: #c9a5ec;
  --accent-soft: rgba(128, 56, 181, 0.24);
  --bg: #030d0a;
  --card: rgba(255, 255, 255, 0.04);
  --card-border: var(--ws-line);
  --text: var(--ws-fg);
  --text-dim: var(--ws-fg-2);
  --good: #12b76a;
  --warn: #f59e0b;
  --ink-52: rgba(255, 255, 255, 0.52);
  --ink-58: rgba(255, 255, 255, 0.58);
  --ink-88: rgba(255, 255, 255, 0.88);

  /* Privacy Pro in-app accent palette (kept for /privacypro inline accents) */
  --green-14: rgba(73, 255, 136, 0.14);
  --green-28: rgba(73, 255, 136, 0.28);
  --green-92: rgba(73, 255, 136, 0.92);
  --cyan-14: rgba(140, 193, 255, 0.14);
  --cyan-28: rgba(140, 193, 255, 0.28);
  --cyan-92: rgba(140, 193, 255, 0.92);
  --amber-14: rgba(255, 184, 77, 0.14);
  --amber-28: rgba(255, 184, 77, 0.28);
  --amber-92: rgba(255, 184, 77, 0.92);
  --accent-mid: rgba(73, 255, 136, 0.45);

  /* purple tints (dark surfaces) */
  --purple-14: rgba(128, 56, 181, 0.24);
  --purple-28: rgba(128, 56, 181, 0.42);
  --purple-92: #d9b6f5;

  /* danger / destructive accent (light surfaces) */
  --rose: #e11d48;
  --rose-14: rgba(225, 29, 72, 0.16);
  --rose-28: rgba(225, 29, 72, 0.24);
  --rose-92: #ff8a9c;
}

body { background: var(--ws-paper); }

/* ---------- 2. Page shell ---------- */
.page { max-width: var(--ws-max); margin: 0 auto; padding: 0 24px 72px; }
.page > .section { padding: 56px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 830;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--ws-fg);
  margin-bottom: 14px;
  text-wrap: balance;
}
.section-head p { font-size: 17px; color: var(--ws-fg-2); line-height: 1.72; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
  margin-bottom: 12px;
}
.center { text-align: center; }
.muted { color: var(--ws-fg-3); }

/* ---------- 3. Microsite navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(6, 20, 16, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-inner {
  max-width: var(--ws-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { border-radius: 9px; flex-shrink: 0; }
.nav .nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav .nav-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 10px;
  transition: background 0.2s var(--ws-ease), color 0.2s var(--ws-ease);
}
.nav .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.nav .nav-links a.active { color: #fff; background: rgba(255, 255, 255, 0.13); }
.nav .nav-links .nav-cta {
  color: var(--ws-brand-ink);
  background: var(--ws-brand);
  font-weight: 750;
  margin-inline-start: 8px;
}
.nav .nav-links .nav-cta:hover { background: #6bffa2; color: var(--ws-brand-ink); }
.nav .ws-lang-select { margin-inline-start: 10px; }

/* ---------- 4. Microsite hero (dark glass panel) ---------- */
.page > .hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin-top: 24px;
  padding: 56px 46px 60px;
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(880px 420px at 8% -30%, rgba(128, 56, 181, 0.55), transparent 62%),
    radial-gradient(760px 420px at 108% 4%, rgba(73, 255, 136, 0.16), transparent 58%),
    linear-gradient(158deg, #150d20 0%, #0a0713 100%);
  box-shadow: var(--ws-shadow-3);
}
.page > .hero > div { position: relative; z-index: 1; }
.page > .hero .eyebrow { color: #c9a5ec; }
.page > .hero h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  color: #fff;
  text-wrap: balance;
}
.page > .hero h1 span { color: #c9a5ec; }
.page > .hero .sub {
  color: rgba(255, 255, 255, 0.74);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.page > .hero .btn-ghost {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.page > .hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.trust-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-media { display: grid; place-items: center; }

/* in-hero placeholder panel keeps the dark shell edges tidy */
.page > .hero .ws-frame { width: 100%; }
.page > .hero .ws-frame.is-dark { --ws-line-2: rgba(255, 255, 255, 0.22); }

/* CSS phone mockup used by the Eye Saver Pro hero */
.phone-wrap { display: grid; place-items: center; }
.page > .hero .phone {
  width: 262px;
  padding: 12px;
  border-radius: 42px;
  background: linear-gradient(160deg, #1d1430, #0c0716);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.notch { width: 96px; height: 18px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); margin: 2px auto 10px; }
.screen {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  background: linear-gradient(170deg, #0d211a, #06110d);
}
.app-title { font-size: 13px; font-weight: 800; color: #eefaf3; }
.mini-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8fa79c; }
.score-row { display: flex; align-items: center; gap: 12px; }
.score-num { font-size: 30px; font-weight: 850; letter-spacing: -0.03em; line-height: 1; color: #eefaf3; }
.score-status { font-size: 12px; font-weight: 800; color: #12b76a; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-name { font-size: 12.5px; font-weight: 700; color: #eefaf3; }
.toggle { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px; background: linear-gradient(140deg, #7c3fb0, #b07be0); }
.toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.intensity { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.intensity i { display: block; height: 100%; width: 62%; border-radius: 999px; background: linear-gradient(90deg, #ffb84d, #7c3fb0); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
.bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #b07be0, #7c3fb0); }
.heat-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 168, 76, 0.14), transparent 62%); }

/* ---------- 5. Cards / grids ---------- */
.glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow-1);
  padding: 26px;
}
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.feature {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow-1);
  padding: 28px;
  transition: transform 0.32s var(--ws-ease), box-shadow 0.32s var(--ws-ease), border-color 0.32s var(--ws-ease);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--ws-shadow-3); border-color: var(--ws-line-2); }
.feature .icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 25px;
  line-height: 1;
  margin-bottom: 18px;
  background: var(--accent-soft);
  border: 1px solid rgba(128, 56, 181, 0.14);
}
.feature h3 { font-size: 18px; font-weight: 760; letter-spacing: -0.018em; margin-bottom: 9px; color: var(--ws-fg); }
.feature p { color: var(--ws-fg-2); font-size: 15px; line-height: 1.7; }

.step { text-align: center; padding: 30px 24px; }
.step .num {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  box-shadow: 0 8px 20px -8px rgba(128, 56, 181, 0.7);
}
.step h3 { font-size: 16.5px; font-weight: 760; margin-bottom: 7px; color: var(--ws-fg); }
.step p { color: var(--ws-fg-2); font-size: 14.5px; line-height: 1.68; }

/* ---------- 6. Pricing ---------- */
.price-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  position: relative;
  transition: transform 0.3s var(--ws-ease), box-shadow 0.3s var(--ws-ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--ws-shadow-2); }
.plan {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 6px;
}
.per { font-size: 14px; color: var(--ws-fg-3); font-weight: 600; margin-bottom: 18px; }
.price-card ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.price-card ul li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--ws-fg-2); }
.price-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2.2px solid var(--ws-brand-strong);
  border-bottom: 2.2px solid var(--ws-brand-strong);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.price-card .btn { margin-top: auto; justify-content: center; }
.price-card.highlight {
  background:
    radial-gradient(520px 260px at 50% -30%, rgba(128, 56, 181, 0.3), transparent 70%),
    linear-gradient(160deg, #150d20, #0b0714);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: var(--ws-shadow-3);
}
.price-card.highlight .plan { color: #c9a5ec; }
.price-card.highlight .amount { color: #fff; }
.price-card.highlight .per { color: rgba(255, 255, 255, 0.6); }
.price-card.highlight ul li { color: rgba(255, 255, 255, 0.78); }
.price-card.highlight ul li::before { border-color: var(--ws-brand); }
.price-card.highlight .badge {
  position: absolute;
  top: 22px;
  right: 22px;
  background: var(--ws-brand);
  color: var(--ws-brand-ink);
  border-color: transparent;
}

/* ---------- 7. Store buttons ---------- */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s var(--ws-ease), border-color 0.2s var(--ws-ease);
}
.store-btn:hover { transform: translateY(-2px); border-color: rgba(73, 255, 136, 0.5); }
.store-btn .s-icon { font-size: 22px; line-height: 1; }
.store-btn .s-small { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.66; }
.store-btn .s-big { display: block; font-size: 15px; font-weight: 750; }
.download-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 8. FAQ (native details) ---------- */
.page details {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow-1);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.page details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ws-fg);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page details summary::-webkit-details-marker { display: none; }
.page details summary::before {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
}
.page details[open] summary::before { content: "−"; }
.page details p { color: var(--ws-fg-2); font-size: 14.5px; line-height: 1.72; margin-top: 12px; }

/* ---------- 9. Microsite footer ---------- */
body > footer {
  background: var(--ws-ink);
  color: rgba(255, 255, 255, 0.66);
  padding: 46px 24px 30px;
  text-align: center;
  margin-top: 40px;
}
body > footer .links { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
body > footer .links a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: color 0.2s var(--ws-ease);
}
body > footer .links a:hover { color: var(--ws-brand); }
body > footer > div:last-child { font-size: 13.5px; color: rgba(255, 255, 255, 0.46); }
body > footer > div:last-child a { color: rgba(255, 255, 255, 0.7); }
footer .links { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
footer .links a { color: rgba(255, 255, 255, 0.66); text-decoration: none; font-size: 14.5px; font-weight: 600; }
footer .links a:hover { color: var(--ws-brand); }
footer > div:last-child { font-size: 13.5px; color: rgba(255, 255, 255, 0.46); }

/* ---------- 10. Dashboard demo ---------- */
.demo-note {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #c9a5ec;
  background: var(--accent-soft);
  border: 1px solid rgba(128, 56, 181, 0.2);
}
.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { padding: 26px; border-radius: var(--ws-radius); }
.panel h3 { font-size: 16.5px; font-weight: 770; letter-spacing: -0.015em; margin-bottom: 5px; color: var(--ws-fg); }
.panel .hint { font-size: 13px; color: var(--ws-fg-3); margin-bottom: 16px; }
.panel + .panel { margin-top: 20px; }
.panel + .center { margin-top: 36px; }

.screen-demo { position: relative; border-radius: 14px; overflow: hidden; padding: 20px; min-height: 176px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ws-line); }
.screen-demo h4 { font-size: 15px; font-weight: 750; margin-bottom: 8px; color: var(--ws-fg); }
.screen-demo p { font-size: 13px; color: var(--ws-fg-2); }
.screen-demo .rows { margin-top: 14px; display: grid; gap: 9px; }
.screen-demo .row { height: 10px; border-radius: 6px; background: var(--ws-paper-3); }
.screen-demo .row:nth-child(2) { width: 86%; }
.screen-demo .row:nth-child(3) { width: 64%; }
#tint { position: absolute; inset: 0; pointer-events: none; background: rgb(255, 150, 60); opacity: 0; mix-blend-mode: multiply; transition: opacity 0.25s var(--ws-ease); }
input[type="range"] { width: 100%; accent-color: var(--purple); margin: 14px 0 6px; cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ws-fg-3); }

.ring-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ring { transform: rotate(-90deg); }
.ring .track { stroke: var(--ws-line); }
.ring .bar { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ws-ease); }
.score-big { font-size: 36px; font-weight: 850; letter-spacing: -0.03em; color: var(--ws-fg); line-height: 1.1; }
.score-verdict { font-size: 13.5px; color: var(--good); font-weight: 650; }
.stat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pill { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--ws-paper-2); border: 1px solid var(--ws-line); color: var(--ws-fg-2); }
.pill b { color: var(--ws-fg); font-weight: 750; }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 10px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart .col i { width: 100%; border-radius: 8px 8px 4px 4px; display: block; background: linear-gradient(180deg, var(--purple-light), var(--purple)); transition: height 0.6s var(--ws-ease); }
.chart .col.peak i { background: linear-gradient(180deg, #fbbf24, #d97706); }
.chart .col span { font-size: 11.5px; color: var(--ws-fg-3); }

.timer { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.timer .digits { font-size: 46px; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: 2px; color: var(--ws-fg); }
.timer .digits.done { color: var(--good); }
.rule { font-size: 13px; color: var(--ws-fg-2); text-align: center; }
.timer-btns { display: flex; gap: 10px; }

.ex { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ws-line); }
.ex:last-child { border-bottom: 0; }
.ex .ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 19px; background: var(--accent-soft); border: 1px solid rgba(128, 56, 181, 0.16); }
.ex .name { font-size: 14.5px; font-weight: 650; color: var(--ws-fg); }
.ex .dur { margin-left: auto; font-size: 12.5px; color: var(--ws-fg-3); white-space: nowrap; }

/* ---------- 11. Long-form documents ---------- */
.doc { max-width: 860px; margin: 0 auto; }
.doc h1 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 840; letter-spacing: -0.03em; color: var(--ws-fg); }
.doc section { padding: 0; margin-bottom: 30px; }
.doc section h2 { font-size: 20px; font-weight: 790; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ws-fg); }
.doc section h3 { font-size: 16.5px; font-weight: 760; margin: 20px 0 8px; color: var(--ws-fg); }
.doc section p { color: var(--ws-fg-2); font-size: 15px; line-height: 1.78; margin-bottom: 10px; }
.doc section a, .doc p a { color: var(--ws-brand-deep); font-weight: 650; }
.doc section ul { list-style: disc; padding-left: 22px; margin: 10px 0; display: flex; flex-direction: column; gap: 7px; }
.doc section ul li { color: var(--ws-fg-2); font-size: 15px; line-height: 1.7; }
.effective {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  color: #c9a5ec;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(128, 56, 181, 0.18);
  margin: 30px auto 10px;
}

/* privacy-policy pages: header + cards layout */
.page > header { max-width: 880px; margin: 0 auto; text-align: center; padding: 46px 24px 6px; }
.page > header h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 840; letter-spacing: -0.03em; color: var(--ws-fg); }
.page > header .subtitle { color: var(--ws-fg-2); margin-top: 8px; font-size: 15.5px; }
.page > header .meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; }
.page > header .meta span {
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ws-fg-2);
  background: var(--ws-paper-2);
  border: 1px solid var(--ws-line);
}
.page > header .logo {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 33px;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  box-shadow: 0 10px 30px -12px rgba(128, 56, 181, 0.75);
}
.page > header ~ section {
  max-width: 880px;
  margin: 22px auto 0;
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow-1);
}
.page > header ~ section h2 { font-size: 20px; font-weight: 790; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--ws-fg); display: flex; align-items: center; gap: 10px; }
.page > header ~ section h3 { font-size: 16.5px; font-weight: 760; margin: 20px 0 8px; color: var(--ws-fg); }
.page > header ~ section p, .page > header ~ section li { color: var(--ws-fg-2); font-size: 15px; line-height: 1.78; }
.page > header ~ section strong { color: var(--ws-fg); font-weight: 700; }
.page > header ~ section ul { list-style: disc; padding-left: 22px; margin: 10px 0; display: flex; flex-direction: column; gap: 7px; }
.page > header ~ section a { color: var(--ws-brand-deep); font-weight: 650; text-decoration: none; }
.page > header ~ section a:hover { text-decoration: underline; }
.page > header ~ section table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.page > header ~ section th,
.page > header ~ section td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--ws-line); vertical-align: top; }
.page > header ~ section th { color: var(--ws-fg); font-weight: 750; white-space: nowrap; background: var(--ws-paper-2); }
.page > header ~ section td { color: var(--ws-fg-2); }
.page > header ~ section .highlight {
  padding: 16px 18px;
  border-radius: 0 var(--ws-radius-sm) var(--ws-radius-sm) 0;
  border-left: 3px solid var(--purple-light);
  background: var(--accent-soft);
  margin: 16px 0;
}
.page > header ~ section .highlight p { color: var(--ws-fg); margin: 0; }
.page > .doc + .doc { margin-top: 0; }

/* ---------- 12. Privacy Pro — landing + dashboard ---------- */
.site-wrap { max-width: var(--ws-max); margin: 0 auto; padding: 0 24px; }

/* dark glass nav — same shell language as the main site */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(6, 20, 16, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav-inner { max-width: var(--ws-max); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-nav .brand { color: #fff; }
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, #5bff95, #12b76a);
  color: var(--ws-brand-ink);
  flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(73, 255, 136, 0.9);
}
.brand-mark svg { width: 18px; height: 18px; }
.site-nav .nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav .nav-links a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 8px 13px; border-radius: 10px; transition: background 0.2s var(--ws-ease), color 0.2s var(--ws-ease); }
.site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: #fff; background: rgba(255, 255, 255, 0.09); }
.site-nav .nav-links .btn-green { color: var(--ws-brand-ink); background: var(--ws-brand); font-weight: 750; margin-inline-start: 8px; }
.site-nav .nav-links .btn-green:hover { color: var(--ws-brand-ink); background: #6bffa2; }
.site-nav .nav-links .btn { padding: 8px 15px; font-size: 14px; }
.site-nav .ws-lang-select { margin-inline-start: 10px; }

/* dark hero band (full-bleed) */
.hero-dark {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 84px 0 80px;
  background:
    radial-gradient(900px 520px at 50% -34%, rgba(73, 255, 136, 0.24), transparent 62%),
    linear-gradient(168deg, #071a14, #04100c);
}
.hero-dark .site-wrap { text-align: center; }
.hero-dark h1 { font-size: clamp(34px, 5.6vw, 62px); font-weight: 860; line-height: 1.06; letter-spacing: -0.038em; color: #fff; margin-bottom: 20px; text-wrap: balance; }
.hero-dark .lead { color: rgba(255, 255, 255, 0.72); font-size: clamp(16px, 1.7vw, 19px); max-width: 700px; margin: 0 auto 30px; line-height: 1.72; }
.hero-dark .lead strong { color: #fff; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 13px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-bottom: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ws-brand); box-shadow: 0 0 0 4px rgba(73, 255, 136, 0.18); }
.hero .grad { background: linear-gradient(120deg, #49ff88, #7ef0ff 60%, #49ff88); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 32px 0 22px; }
.hero-cta .btn { padding: 12px 22px; font-size: 15px; }
.hero-note { font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }

/* CSS phone mockup (hero preview) */
.mockup-wrap { display: grid; place-items: center; margin-top: 46px; }
.hero-dark .phone { width: 268px; padding: 11px; border-radius: 40px; background: linear-gradient(160deg, #14251f, #081512); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.phone-notch { width: 104px; height: 20px; border-radius: 12px; background: #050d0b; margin: 2px auto 10px; }
.phone-screen { border-radius: 30px; overflow: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 420px; background: linear-gradient(170deg, #0d211a, #06110d); border: 1px solid rgba(255, 255, 255, 0.08); }
.phone-title { font-size: 14px; font-weight: 800; color: #fff; }
.phone-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }
.mock-card { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 11px; }
.mock-card.featured { background: rgba(73, 255, 136, 0.1); border-color: rgba(73, 255, 136, 0.28); }
.mock-ico { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.mock-ico svg { width: 16px; height: 16px; }
.mock-ico[data-accent="green"] { background: var(--green-14); color: var(--green-92); }
.mock-ico[data-accent="purple"] { background: rgba(128, 56, 181, 0.24); color: #d9b6f5; }
.mock-ico[data-accent="cyan"] { background: var(--cyan-14); color: var(--cyan-92); }
.mock-ico[data-accent="amber"] { background: var(--amber-14); color: var(--amber-92); }
.mock-txt { flex: 1; min-width: 0; }
.mock-txt b { display: block; font-size: 12.5px; font-weight: 750; color: #fff; }
.mock-txt span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
.mock-chip { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; background: var(--green-14); border: 1px solid var(--green-28); color: var(--green-92); }
.mock-chip[data-accent="purple"] { background: var(--purple-14); border-color: var(--purple-28); color: var(--purple-92); }
.mock-chip[data-accent="cyan"] { background: var(--cyan-14); border-color: var(--cyan-28); color: var(--cyan-92); }
.mock-chip[data-accent="amber"] { background: var(--amber-14); border-color: var(--amber-28); color: var(--amber-92); }

/* accent-tinted feature icons */
.feature-ico[data-accent="green"] { background: var(--ws-brand-soft); color: var(--ws-brand-deep); }
.feature-ico[data-accent="purple"] { background: var(--accent-soft); color: var(--accent); }
.feature-ico[data-accent="cyan"] { background: rgba(2, 132, 199, 0.18); color: #7dd3fc; }
.feature-ico[data-accent="amber"] { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.feature-ico svg { width: 24px; height: 24px; }

/* FAQ (native details) on the light body */
.faq-list details { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--ws-line); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow-1); padding: 20px 24px; }
.faq-list details + details { margin-top: 12px; }
.faq-list summary { cursor: pointer; font-weight: 700; font-size: 15.5px; color: var(--ws-fg); list-style: none; display: flex; align-items: center; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "+"; flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 800; color: var(--ws-brand-deep); background: var(--ws-brand-soft); }
.faq-list details[open] summary::before { content: "−"; }

/* dark CTA band */
.cta-band {
  padding: 64px 40px;
  text-align: center;
  border-radius: var(--ws-radius-lg);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(700px 340px at 50% -30%, rgba(73, 255, 136, 0.28), transparent 66%),
    linear-gradient(160deg, #071a14, #04100c);
  box-shadow: var(--ws-shadow-3);
}
.cta-band h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 850; letter-spacing: -0.032em; color: #fff; margin-bottom: 14px; }
.cta-band .desc { color: rgba(255, 255, 255, 0.72); font-size: 16.5px; margin: 14px auto 26px; max-width: 560px; line-height: 1.7; }

.site-footer { background: var(--ws-ink); color: rgba(255, 255, 255, 0.66); padding: 52px 0 28px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand { font-size: 17px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-col h4, .footer-col .footer-heading { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 14px; }
.footer-col a { display: block; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 14.5px; padding: 5px 0; }
.footer-col a:hover { color: var(--ws-brand); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 26px; margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; color: rgba(255, 255, 255, 0.5); }
.footer-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* section rhythm on the light body (landing pages use .section + .site-wrap) */
.section.site-wrap { padding: 64px 24px; }
#how .steps-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* dark "In short" fact card on the light body */
.inshort-card {
  background: linear-gradient(165deg, #0b1f18, #061410);
  border-color: rgba(255, 255, 255, 0.12);
}
.inshort-card .section-kicker { color: var(--ws-brand); }
.inshort-card p { color: rgba(255, 255, 255, 0.72); }
.inshort-card p strong { color: #fff; }

/* rose accent (feature icon) */
.feature-ico[data-accent="rose"] { background: var(--rose-14); color: var(--rose-92); }

/* featured (premium) pricing card */
.price-card.featured {
  background:
    radial-gradient(520px 260px at 50% -30%, rgba(73, 255, 136, 0.22), transparent 70%),
    linear-gradient(160deg, #071a14, #04100c);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: var(--ws-shadow-3);
}
.price-card.featured h3 { color: #fff; }
.price-card.featured .tier { color: var(--ws-brand); }
.price-card.featured .desc { color: rgba(255, 255, 255, 0.72); }
.price-card.featured ul li { color: rgba(255, 255, 255, 0.78); }
.price-card.featured ul li::before { border-color: var(--ws-brand); }

/* CTA band copy on dark */
.cta-band p { color: rgba(255, 255, 255, 0.72); font-size: 16.5px; margin: 14px auto 26px; max-width: 560px; line-height: 1.7; }

.dash-wrap { max-width: 1040px; margin: 0 auto; padding: 34px 24px 76px; }
.dash-head h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 830; letter-spacing: -0.03em; color: var(--ws-fg); }

/* ---------- 13. Privacy Pro — docs ---------- */
/* centred long-form column; the topbar is a contained dark glass bar */
.doc-page { max-width: var(--ws-max); margin: 0 auto; padding: 40px 24px 64px; }
.doc-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin-bottom: 28px;
  border-radius: var(--ws-radius);
  color: #fff;
}
.doc-topbar .back-pill { flex-shrink: 0; color: var(--ws-fg-2); background: rgba(255, 255, 255, 0.09); border-color: transparent; }
.doc-topbar .back-pill:hover { color: var(--ws-brand-deep); background: rgba(255, 255, 255, 0.16); }
.doc-topbar .back-pill svg { width: 16px; height: 16px; }
.doc-topbar-title { flex: 1; min-width: 0; }
.doc-topbar-title h1 { font-size: clamp(17px, 2.1vw, 21px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.doc-topbar-title p { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.doc-topbar .ws-lang-select { flex-shrink: 0; }
.hero-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius-lg);
  box-shadow: var(--ws-shadow-2);
  padding: 30px 32px;
  margin-bottom: 34px;
}
.hero-row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.hero-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--ws-brand-soft);
  border: 1px solid rgba(73, 255, 136, 0.16);
}
.hero-icon img { width: 32px; height: 32px; }
.hero-text { flex: 1; min-width: 240px; }
.hero-app { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ws-brand-deep); margin-bottom: 6px; }
.hero-effective, .hero-updated, .hero-sub { font-size: 14.5px; color: var(--ws-fg-2); line-height: 1.7; }
.eff-label, .upd-label { color: var(--ws-fg-3); font-weight: 650; }
.card-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ws-fg-3); margin-bottom: 8px; }
.card-icon[data-accent="green"] { background: var(--ws-brand-soft); border-color: rgba(73, 255, 136, 0.16); }
.card-icon[data-accent="purple"] { background: var(--accent-soft); border-color: rgba(128, 56, 181, 0.16); }
.card-icon[data-accent="cyan"] { background: rgba(2, 132, 199, 0.18); border-color: rgba(56, 189, 248, 0.28); }
.card-icon[data-accent="amber"] { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.3); }
.contact-icon.general { background: var(--ws-brand-soft); border-color: rgba(73, 255, 136, 0.16); }
.contact-icon.security { background: var(--accent-soft); border-color: rgba(128, 56, 181, 0.16); }
.contact-icon.address { background: rgba(2, 132, 199, 0.18); border-color: rgba(56, 189, 248, 0.28); }
.privacy-card .card-body ul, .doc-block ul { list-style: disc; padding-left: 22px; margin: 10px 0; display: flex; flex-direction: column; gap: 7px; }
.privacy-card .card-body li, .doc-block li { color: var(--ws-fg-2); font-size: 15px; line-height: 1.74; }
.privacy-card .card-body p { margin-bottom: 10px; }
.privacy-card .card-body p:last-child { margin-bottom: 0; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1040px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .page > .hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 28px 48px; }
  .hero-media { max-width: 520px; margin: 0 auto; width: 100%; }
  .layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page { padding: 0 18px 56px; }
  .page > .hero { padding: 36px 22px 40px; border-radius: var(--ws-radius); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 34px; }
  .nav-inner, .site-nav-inner { padding: 10px 18px; }
  .nav .nav-links a, .site-nav .nav-links a { padding: 7px 10px; font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .price-card.highlight .badge { position: static; margin-bottom: 12px; align-self: flex-start; }
  .cta-band { padding: 44px 24px; border-radius: var(--ws-radius); }
  .page details { padding: 16px 18px; }
  .faq-list details { padding: 16px 18px; }
  .hero-dark { padding: 62px 0 60px; }
  .phone { width: 100%; max-width: 268px; }
  .doc-page { padding: 22px 16px 48px; }
  .doc-topbar { flex-wrap: wrap; padding: 10px 14px; margin-bottom: 20px; }
}

/* ---------- 15. RTL ---------- */
[dir="rtl"] body > footer .links,
[dir="rtl"] footer .links { direction: rtl; }
[dir="rtl"] .price-card ul li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .price-card ul li::before { left: auto; right: 0; }
[dir="rtl"] .ex .dur { margin-left: 0; margin-right: auto; }

/* ---------- 16. Print ---------- */
@media print {
  .nav, .site-nav, .doc-topbar, body > footer, .site-footer { display: none !important; }
  body { background: #fff; color: #111; }
  .page > header ~ section, .doc-block, .privacy-card, .hero-card { box-shadow: none; border-color: #ddd; }
}