/* ── Material Symbols, subsetted to the eight icons this site uses ───────────
   The full Rounded family is 1.1MB. The pages that load it use exactly eight
   glyphs — call, call_end, chevron_left, chevron_right, dialpad, person_search,
   verified, auto_awesome — so this is Google's own subset of those, 5KB, served
   from our origin.

   font-display: block rather than swap: an icon font has no sensible fallback.
   Swapping would paint the glyph names as words ("chevron_left") for a moment,
   which is worse than a blank box for the same moment.

   If an icon is added to a page, the subset must be regenerated or it will show
   as a blank box. See design/website-v2/assets/fonts/README.md. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/material-symbols-subset.woff2') format('woff2');
}

/* ── Outfit, self-hosted and variable ────────────────────────────────────────
   Was seven static weights from fonts.googleapis.com: 220KB of font files, from
   a third origin, over connections where a DNS lookup and a TLS handshake cost
   more than the bytes. This is the same family as one variable file — 31KB,
   every weight from 100 to 900 — served from our own origin on the connection
   the page already has.

   Outfit is licensed OFL-1.1, which permits hosting it ourselves; the file is
   the latin subset Google itself serves (v15). font-display: swap keeps the
   fallback visible while it loads, so text is readable from the first paint. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit-variable.woff2') format('woff2');
}

/* ==========================================================================
   WAZI — WEBSITE DESIGN SYSTEM
   Single source of truth for every page. No page should carry its own
   component CSS; add it here so all 9 pages stay visually identical.

   1.  Tokens              9.  Hero               17. Tables
   2.  Reset & base        10. Phone mockup       18. Legal pages
   3.  Motion library      11. Hero carousel      19. Footer
   4.  Ambient background  12. Cards/stats/lists  20. Fixed chrome
   5.  Layout primitives   13. Section components 21. Reveal animations
   6.  Typography          14. Pricing            22. Reduced motion
   7.  Buttons             15. Privacy / trust
   8.  Navigation          16. FAQ
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Ground & surfaces — all carry a slight teal bias so nothing reads as
     flat "computer grey" sitting next to the brand colour. */
  --bg:        #060D0C;
  --bg-soft:   #08120F;
  --surface:   #0C1A18;
  --elevated:  #122522;
  --card:      #0F211E;
  --card-top:  #132A26;

  /* Brand */
  --brand:      #29B6AE;
  --brandLight: #3DDCD2;
  --brandDeep:  #1B8F89;
  --brandDim:   rgba(41,182,174,0.12);
  --brandMid:   rgba(41,182,174,0.30);
  --brandGlow:  rgba(41,182,174,0.45);

  /* Semantic */
  --red:    #F05252;
  /* Unused hues removed: the live caution token is --w-orange below. */
  --green:  #22C55E;
  --blue:   #4B8FF7;
  --gold:   #F5B60B;

  /* Text */
  --text:   #F5FAF9;
  --muted:  #93AAA6;
  --faint:  rgba(233,247,245,0.45);

  /* Lines */
  --hair:   rgba(255,255,255,0.07);
  --line:   rgba(255,255,255,0.09);
  --border: rgba(41,182,174,0.16);

  /* Device surfaces (mirror the app's own palette) */
  --void:   #091818;
  --surf:   #102424;
  --elev:   #183636;
  --navbg:  #081614;

  /* Type */
  --font:   'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Motion */
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* Elevation */
  --shadow-sm: 0 4px 16px rgba(0,0,0,.28);
  --shadow-md: 0 18px 44px rgba(0,0,0,.34);
  --shadow-lg: 0 34px 80px rgba(0,0,0,.46);

  /* Chrome */
  --nav-h: 66px;
}

/* ----------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky nav instead of hiding beneath it. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

::selection { background: var(--brandGlow); color: #04201d; }

/* Keyboard-only focus ring: visible when tabbing, absent on mouse click. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brandLight);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: rgba(41,182,174,.26); border-radius: 99px; border: 3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(41,182,174,.44); }
}

/* -------------------------------------------------------- 3. MOTION LIBRARY */
@keyframes ambientDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-2%, 2%) scale(1.05); }
}
@keyframes float     { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes breathe   { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
@keyframes blinkdot  { 0%,40% { opacity:1 } 48%,55% { opacity:.12 } 62%,100% { opacity:1 } }
@keyframes beamflow  { to { stroke-dashoffset: -22; } }
@keyframes pulsering { 0% { transform:scale(1); opacity:.42 } 100% { transform:scale(1.75); opacity:0 } }
@keyframes sweep     { to { transform: rotate(360deg); } }
@keyframes dotbounce { 0%,100% { transform:translateY(0); opacity:.4 } 50% { transform:translateY(-4px); opacity:1 } }
@keyframes shimmer   { 0% { background-position: 200% center } 100% { background-position: -200% center } }
@keyframes ringShake {
  0%,55%,100% { transform: rotate(0) }
  4%  { transform: rotate(-10deg) } 8%  { transform: rotate(9deg) }
  12% { transform: rotate(-8deg) }  16% { transform: rotate(7deg) }
  20% { transform: rotate(-5deg) }  24% { transform: rotate(4deg) }
  28% { transform: rotate(-2deg) }  32% { transform: rotate(0) }
}
@keyframes chevronL  { 0%,100% { transform:translateX(4px) }  50% { transform:translateX(-5px) } }
@keyframes chevronR  { 0%,100% { transform:translateX(-4px) } 50% { transform:translateX(5px) } }
@keyframes slideUpIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

.float-slow { animation: float 7s ease-in-out infinite; }
.spin-slow  { transform-box: fill-box; transform-origin: center; animation: sweep 4s linear infinite; }
.blink      { animation: blinkdot 1.4s ease-in-out infinite; }
.ring-shake { animation: ringShake 2.2s ease-in-out infinite; }
.chevron-l  { display:inline-block; animation: chevronL 1.3s ease-in-out infinite; }
.chevron-r  { display:inline-block; animation: chevronR 1.3s ease-in-out infinite; }

/* ---------------------------------------------------- 4. AMBIENT BACKGROUND */
/* Two slowly drifting teal orbs plus fine grain, so the large dark areas read
   as depth rather than flat black. Both layers are pointer-transparent. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(920px 620px at 82% -6%,  rgba(41,182,174,0.13), transparent 60%),
    radial-gradient(760px 520px at 8% 12%,   rgba(41,182,174,0.07), transparent 58%),
    radial-gradient(600px 500px at 50% 108%, rgba(41,182,174,0.06), transparent 62%);
  animation: ambientDrift 28s ease-in-out infinite;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------ 5. LAYOUT PRIMITIVES */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
/* Auto margins so these also centre when nested inside a .container,
   not only when applied to the container itself. */
.narrow    { max-width: 820px; margin-left: auto; margin-right: auto; }
.narrower  { max-width: 700px; margin-left: auto; margin-right: auto; }
section    { padding: 104px 0; position: relative; z-index: 1; }
@media (max-width: 900px) { section { padding: 76px 0; } }
@media (max-width: 620px) { section { padding: 58px 0; } }

.grid   { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 940px) { .cols-3, .cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* minmax(0, 1fr), not 1fr. A 1fr track is minmax(auto, 1fr), and that auto
   minimum refuses to shrink below the column's min-content — which on a 360px
   phone left this grid 397px wide inside a 312px container. body has
   overflow-x: hidden, so it never showed as a scrollbar; it showed as content
   running off the edge, which is the harder version to notice. */
@media (max-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split > * { min-width: 0; }
}



.center { text-align: center; }
.center .ic { margin-left: auto; margin-right: auto; }
.muted2 { color: var(--muted); }
.stack  { display: flex; flex-direction: column; }

/* Alternating section tint, so the page has rhythm rather than one flat field */
.band {
  background: linear-gradient(180deg, transparent, rgba(41,182,174,0.045) 40%, transparent);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* ----------------------------------------------------------- 6. TYPOGRAPHY */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brandDim); border: 1px solid var(--brandMid);
  color: var(--brandLight); font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 100px; margin-bottom: 20px;
  backdrop-filter: blur(6px);
}

/* Capped at 64px so the hero headline lands on its intended two lines
   ("Know who's calling." / "Before you answer.") in the hero's left column
   rather than fragmenting into four. */
h1 { font-size: clamp(37px, 5vw, 64px); font-weight: 800; letter-spacing: -.034em; line-height: 1.05; text-wrap: balance; }
h2.title { font-size: clamp(29px, 3.9vw, 49px); font-weight: 800; letter-spacing: -.024em; line-height: 1.12; margin-bottom: 16px; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -.012em; }

.sub  { font-size: clamp(16px, 1.55vw, 19px); color: var(--muted); max-width: 620px; line-height: 1.72; text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.7vw, 20.5px); color: var(--muted); line-height: 1.7; }

/* Gradient display text with a slow sheen travelling across it */
.grad {
  background: linear-gradient(100deg, var(--brand) 10%, var(--brandLight) 35%, #A5F3EE 50%, var(--brandLight) 65%, var(--brand) 90%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}

.head { max-width: 740px; margin-bottom: 48px; }
.head.center { margin: 0 auto 52px; text-align: center; }
.head.center .sub { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------- 7. BUTTONS */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  padding: 14px 27px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary { background: linear-gradient(120deg, var(--brand), var(--brandLight)); color: #04201d; box-shadow: 0 12px 36px rgba(41,182,174,.3); }
.btn-primary:hover  { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(41,182,174,.44); }
.btn-primary:active { transform: translateY(-1px) scale(.98); }
.btn-ghost { background: rgba(255,255,255,.045); border-color: var(--line); color: var(--text); backdrop-filter: blur(6px); }
.btn-ghost:hover  { border-color: var(--brandMid); background: var(--brandDim); transform: translateY(-3px); }
.btn-ghost:active { transform: translateY(-1px) scale(.98); }
.btn-lg    { padding: 17px 34px; font-size: 16.5px; border-radius: 16px; }
.btn-block { width: 100%; }

/* Click ripple, injected by site.js */
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.42); transform: scale(0);
  animation: ripple .62s var(--ease-out) forwards;
}
.btn-primary .ripple { background: rgba(4,32,29,.3); }

/* The single most important CTA breathes gently so the eye finds it */
.btn-pulse { animation: glowPulse 3.4s ease-in-out infinite; }

/* ----------------------------------------------------------- 8. NAVIGATION */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6,13,12,.72); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled { background: rgba(6,13,12,.93); border-bottom-color: var(--hair); box-shadow: 0 10px 34px rgba(0,0,0,.34); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo .mark { width: 30px; height: 30px; transition: transform .4s var(--ease); }
.logo:hover .mark { transform: rotate(-8deg) scale(1.06); }
.logo .wm { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.logo .dot { color: var(--brand); }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.cta) { position: relative; font-size: 14.5px; color: var(--muted); font-weight: 500; transition: color .2s ease; white-space: nowrap; }
.nav-links a:not(.cta)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brandLight));
  border-radius: 2px; transition: right .3s var(--ease);
}
.nav-links a:not(.cta):hover::after, .nav-links a.active::after { right: 0; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.cta {
  color: #04201d; background: linear-gradient(120deg, var(--brand), var(--brandLight));
  padding: 10px 19px; border-radius: 12px; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 24px rgba(41,182,174,.26);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-links a.cta:hover { color: #04201d; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(41,182,174,.4); }

.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; margin: 0 auto; transition: transform .28s var(--ease), opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 59;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,22,20,.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hair);
    padding: 0 24px; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .34s var(--ease), opacity .24s ease, padding .34s var(--ease);
  }
  .nav-links.open { max-height: 460px; opacity: 1; padding: 8px 24px 24px; }
  .nav-links a:not(.cta) { display: block; padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
  .nav-links a:not(.cta)::after { display: none; }
  .nav-links a.cta { display: inline-flex; margin-top: 18px; justify-content: center; }
}

/* ----------------------------------------------------------------- 9. HERO */
.hero { padding-top: 76px; padding-bottom: 68px; }
@media (max-width: 900px) { .hero { padding-top: 46px; padding-bottom: 40px; } }
@media (max-width: 620px) { .hero { padding-top: 32px; padding-bottom: 28px; } }

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 46px; } }

.hero p.sub { margin-top: 22px; }
.hero-cta   { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { margin-top: 30px; display: flex; gap: 12px 22px; flex-wrap: wrap; color: var(--faint); font-size: 13.5px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 980px) {
  .hero-copy { text-align: center; }
  .hero-copy .sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
}
@media (max-width: 520px) { .hero-cta .btn { width: 100%; } }

/* --------------------------------------------------------- 10. PHONE MOCKUP */
.phone {
  width: min(320px, calc(100vw - 56px)); aspect-ratio: 320 / 660; height: auto;
  background: var(--void); border-radius: 46px; border: 2px solid rgba(255,255,255,.13);
  position: relative; overflow: hidden; margin: 0 auto;
  box-shadow: 0 44px 110px rgba(0,0,0,.82), 0 0 70px rgba(41,182,174,.07), inset 0 0 0 1px rgba(255,255,255,.03);
}
.phone.sm { width: min(280px, calc(100vw - 56px)); aspect-ratio: 280/578; border-radius: 40px; }
.phone.sm .scr { border-radius: 38px; }

.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 100px; height: 30px; background: #000; border-radius: 18px; z-index: 20; }
.sbar {
  position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 19;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 24px 8px; font-size: 13px; font-weight: 600; color: #fff; pointer-events: none;
}
.sbar .ico { letter-spacing: 2px; opacity: .85; font-size: 12px; }
.scr { position: absolute; inset: 0; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; }
.scr-body { flex: 1; overflow: hidden; padding-top: 50px; }
.scr-body img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Device presentation wrapper: gentle float plus optional pointer tilt */
.hero-device { position: relative; display: grid; place-items: center; perspective: 1400px; }
.hero-device .phone { box-shadow: 0 40px 96px rgba(0,0,0,.6), 0 0 90px rgba(41,182,174,.1); }
.tilt { transition: transform .35s var(--ease); transform-style: preserve-3d; will-change: transform; }

.hero-note {
  position: absolute; right: -10px; bottom: 22px; max-width: 226px;
  padding: 15px 17px; border-radius: 17px;
  background: rgba(12,26,24,.96); border: 1px solid var(--brandMid);
  box-shadow: 0 22px 48px rgba(0,0,0,.44); backdrop-filter: blur(8px);
}
.hero-note strong { display: block; font-size: 14px; margin-bottom: 4px; }
.hero-note span { color: var(--muted); font-size: 12.2px; line-height: 1.45; display: block; }
@media (max-width: 980px) { .hero-note { right: 0; } }
@media (max-width: 620px) { .hero-note { position: relative; right: auto; bottom: auto; margin: 18px auto 0; max-width: 320px; } }

/* -------------------------------------------------------- 11. HERO CAROUSEL */
.hero-stage { position: relative; width: 100%; height: 100%; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 44px 22px 26px; text-align: center;
  opacity: 0; visibility: hidden; transform: scale(.985);
  transition: opacity .75s var(--ease), transform .75s var(--ease), visibility .75s;
}
.hero-slide.on { opacity: 1; visibility: visible; transform: none; }

/* wrap, because the row grows with the number of slides: nine dots plus the
   wider active one came to 397px, past the edge of a 360px phone. */
.carousel-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; max-width: 100%; }
.carousel-dots button {
  position: relative; width: 30px; height: 5px; border-radius: 99px; border: none;
  background: rgba(255,255,255,.14); cursor: pointer; padding: 0; overflow: hidden;
  transition: background .3s ease, width .35s var(--ease);
}
.carousel-dots button:hover { background: rgba(255,255,255,.28); }
.carousel-dots button.on { width: 46px; background: rgba(41,182,174,.26); }
.carousel-dots button.on::after {
  content: ''; position: absolute; inset: 0; transform-origin: left;
  background: linear-gradient(90deg, var(--brand), var(--brandLight));
  animation: dotFill var(--dot-dur, 4200ms) linear forwards;
}
@keyframes dotFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.carousel-label { text-align: center; margin-top: 14px; color: var(--faint); font-size: 13px; min-height: 20px; }
.carousel-label b { color: var(--brandLight); font-weight: 600; }

.beam { stroke: var(--brand); stroke-width: 1.4; fill: none; stroke-dasharray: 6 5; animation: beamflow 1.1s linear infinite; }
.beam.ghost { stroke-width: 1; opacity: .32; stroke-dasharray: 4 8; }

.ms {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  display: inline-block; vertical-align: middle;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24;
}

/* ------------------------------------------------- 12. CARDS, STATS, LISTS */
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 20px; padding: 27px;
  transition: transform .38s var(--ease), border-color .3s ease, box-shadow .38s var(--ease);
}
/* Cursor-following spotlight; coordinates are set by site.js */
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(41,182,174,.13), transparent 42%);
  transition: opacity .35s ease;
}
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-6px); border-color: var(--brandMid); box-shadow: 0 28px 56px rgba(0,0,0,.34), 0 0 0 1px rgba(41,182,174,.1); }
.card .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brandDim); border: 1px solid var(--brandMid);
  margin-bottom: 17px; font-size: 22px;
  transition: transform .38s var(--ease), background .3s ease;
}
.card:hover .ic { transform: scale(1.08) rotate(-5deg); background: rgba(41,182,174,.2); }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p  { color: var(--muted); font-size: 14.6px; line-height: 1.66; }

.card.accent-red   .ic { background: rgba(240,82,82,.12);  border-color: rgba(240,82,82,.34); }
.card.accent-amber .ic { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.34); }
.card.accent-blue  .ic { background: rgba(75,143,247,.12); border-color: rgba(75,143,247,.34); }
.card.accent-red:hover   { border-color: rgba(240,82,82,.34); }
.card.accent-amber:hover { border-color: rgba(245,158,11,.34); }
.card.accent-blue:hover  { border-color: rgba(75,143,247,.34); }

.stat {
  text-align: center; padding: 30px 18px;
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 18px;
  transition: transform .38s var(--ease), border-color .3s ease;
}
.stat:hover { transform: translateY(-4px); border-color: var(--brandMid); }
.stat .num {
  font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--brand), var(--brandLight));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { color: var(--muted); font-size: 13.4px; margin-top: 7px; line-height: 1.5; }

/* Marker is absolutely positioned rather than a flex sibling. With
   `display:flex` an inline <strong> becomes its own flex item and the text
   after it becomes a second anonymous item, so "<strong>No ads</strong>: no
   banners" renders as two side-by-side columns instead of one sentence. */
.checks { list-style: none; display: grid; gap: 13px; }
.checks li {
  position: relative; padding-left: 25px;
  color: var(--text); font-size: 15.2px; line-height: 1.6;
}
.checks li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}

/* --------------------------------------------------- 13. SECTION COMPONENTS */
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
@media (max-width: 940px) { .steps-grid { grid-template-columns: 1fr; gap: 16px; } }
.step {
  position: relative; padding: 30px 28px; border: 1px solid var(--hair); border-radius: 20px;
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  transition: transform .38s var(--ease), border-color .3s ease;
}
.step:hover { transform: translateY(-5px); border-color: var(--brandMid); }
.step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 18px;
  background: var(--brandDim); border: 1px solid var(--brandMid);
  color: var(--brandLight); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 19px; margin-bottom: 9px; }
.step p  { color: var(--muted); font-size: 14.6px; line-height: 1.66; }

/* Scam-type ticker: conveys relentlessness without a wall of text */

/* Feature showcase: each screenshot paired with the feature it actually shows */
.feature-showcase { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.feature-shot {
  display: grid; grid-template-columns: minmax(140px,40%) 1fr; gap: 24px; align-items: center;
  padding: 26px; background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 22px;
  transition: transform .38s var(--ease), border-color .3s ease, box-shadow .38s var(--ease);
}
.feature-shot:hover { transform: translateY(-5px); border-color: var(--brandMid); box-shadow: 0 26px 54px rgba(0,0,0,.32); }
.feature-shot .phone { width: min(184px,100%); justify-self: center; border-radius: 30px; }
.feature-shot .phone .scr { border-radius: 27px; }
.feature-shot .phone .island { width: 60px; height: 18px; top: 7px; border-radius: 11px; }
.feature-shot .phone .sbar { height: 30px; padding: 0 13px 4px; font-size: 8.5px; }
.feature-shot .phone .sbar .ico { font-size: 8px; letter-spacing: 1px; }
.feature-shot .phone .scr-body { padding-top: 30px; }
.feature-copy .ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brandDim); border: 1px solid var(--brandMid); font-size: 21px; margin-bottom: 15px;
}
.feature-copy h3 { font-size: 20px; margin-bottom: 9px; }
.feature-copy p  { color: var(--muted); line-height: 1.66; font-size: 14.6px; }
@media (max-width: 900px) { .feature-showcase { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .feature-shot { grid-template-columns: 1fr; padding: 24px; text-align: center; }
  .feature-copy .ic { margin-left: auto; margin-right: auto; }
}

/* Screen tour grid (screens.html).
   Two columns rather than three: the screens are drawn in HTML and scale with
   the frame, so a wider card keeps the in-app type readable instead of
   shrinking it to the point where the tour stops showing anything. */
.screen-tour { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.screen-tour-card {
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .38s var(--ease), border-color .3s ease, box-shadow .38s var(--ease);
}
.screen-tour-card:hover { transform: translateY(-6px); border-color: var(--brandMid); box-shadow: 0 26px 54px rgba(0,0,0,.32); }
.screen-tour-card .phone { width: min(300px,100%); border-radius: 40px; margin-bottom: 20px; }
.screen-tour-card .phone .scr { border-radius: 38px; }
.screen-tour-card .phone .island { width: 94px; height: 28px; top: 10px; }
.screen-tour-card .phone .sbar { height: 46px; padding: 0 22px 7px; font-size: 12px; }
.screen-tour-card .phone .scr-body { padding-top: 46px; }
.screen-tour-copy { text-align: center; }
.screen-tour-copy h3 { font-size: 18px; margin-bottom: 7px; }
.screen-tour-copy p  { color: var(--muted); font-size: 14px; line-height: 1.62; }
@media (max-width: 900px) { .screen-tour { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } }
@media (max-width: 560px) { .screen-tour { grid-template-columns: 1fr; } .screen-tour-card { padding: 16px; } }

/* Moment cards: screenshot plus a one-line outcome */
.moment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
@media (max-width: 980px) { .moment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .moment-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }
.moment-card { text-align: center; }
.moment-card .phone { margin-bottom: 18px; transition: transform .4s var(--ease); }
.moment-card:hover .phone { transform: translateY(-7px); }
.moment-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 100px; margin-bottom: 11px;
}
.moment-tag.ok   { background: rgba(13,148,136,.16); color: #5eead4; border: 1px solid rgba(13,148,136,.42); }
.moment-tag.bad  { background: rgba(240,82,82,.14);  color: #fca5a5; border: 1px solid rgba(240,82,82,.42); }
.moment-tag.biz  { background: rgba(75,143,247,.14); color: #a3c6fd; border: 1px solid rgba(75,143,247,.42); }
.moment-tag.note { background: var(--brandDim);      color: var(--brandLight); border: 1px solid var(--brandMid); }
.moment-card h3 { font-size: 16.5px; margin-bottom: 5px; }
.moment-card p  { color: var(--muted); font-size: 13.6px; line-height: 1.6; }

.trust-card {
  padding: 44px 36px; border-radius: 24px;
  background: linear-gradient(145deg, var(--card-top), var(--surface));
  border: 1px solid var(--brandMid); box-shadow: 0 30px 70px rgba(0,0,0,.34);
}
.trust-icon { font-size: 38px; margin-bottom: 18px; }
.trust-card h3 { font-size: 25px; margin-bottom: 12px; }
.trust-card p  { color: var(--muted); font-size: 16px; line-height: 1.68; }
.trust-card small { display: block; margin-top: 24px; color: var(--faint); font-size: 12.4px; line-height: 1.6; }

.quote { background: linear-gradient(180deg, var(--card-top), var(--surface)); border: 1px solid var(--hair); border-radius: 20px; padding: 26px; }
.quote p { font-size: 15.2px; line-height: 1.68; color: var(--text); }

/* ------------------------------------------------------------- 14. PRICING */
.price-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 800px; margin: 0 auto; }
@media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  position: relative; padding: 32px;
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 22px;
  transition: transform .38s var(--ease), border-color .3s ease, box-shadow .38s var(--ease);
}
.price-card:hover { transform: translateY(-5px); border-color: var(--brandMid); }
.price-card.pro { border-color: var(--brandMid); box-shadow: 0 28px 66px rgba(41,182,174,.14); }
.price-card .tag {
  position: absolute; top: -13px; right: 26px;
  background: linear-gradient(120deg, var(--brand), var(--brandLight));
  color: #04201d; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 6px 13px; border-radius: 20px;
}
.price-card h3 { font-size: 20px; }
.price-card .amt { font-size: 46px; font-weight: 800; letter-spacing: -.025em; margin: 12px 0 3px; font-variant-numeric: tabular-nums; }
.price-card .amt small { font-size: 16px; color: var(--muted); font-weight: 500; }
.price-card .note { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.kpi { display: flex; gap: 14px; align-items: baseline; }
.kpi b {
  font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--brand), var(--brandLight));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------------------------------------------------------- 15. PRIVACY/TRUST */
.pcard { border-radius: 20px; padding: 26px; border: 1px solid var(--hair); background: var(--surface); }
.pcard.collect { border-color: rgba(41,182,174,.32); }
.pcard.never   { border-color: rgba(240,82,82,.3); }
.pcard h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 15px; }
.pcard ul { list-style: none; display: grid; gap: 12px; }
.pcard li { position: relative; padding-left: 24px; font-size: 14.3px; color: var(--muted); line-height: 1.58; }
.pcard li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pcard.collect li::before { content: '✓'; color: var(--brand); }
.pcard.never   li::before { content: '✕'; color: var(--red); }

.pflow { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin: 46px auto 0; max-width: 940px; }
.pflow-step { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 0 22px; flex: 1 1 180px; min-width: 155px; }
.pflow-ic {
  width: 66px; height: 66px; border-radius: 21px; display: grid; place-items: center; font-size: 27px;
  background: var(--surface); border: 1px solid var(--brandMid);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pflow-step:hover .pflow-ic { transform: translateY(-5px) scale(1.05); box-shadow: 0 14px 34px rgba(41,182,174,.22); }
.pflow-step h4 { font-size: 14.8px; font-weight: 700; }
.pflow-step p  { color: var(--muted); font-size: 12.6px; text-align: center; max-width: 168px; line-height: 1.55; }
.pflow-arrow { color: var(--brandMid); font-size: 22px; flex: 0 0 auto; opacity: .75; margin-top: 22px; }
@media (max-width: 800px) {
  .pflow { flex-direction: column; align-items: center; }
  .pflow-arrow { transform: rotate(90deg); margin: 2px 0; }
  .pflow-step { padding: 10px 0; }
}

.verified-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, rgba(75,143,247,.16), rgba(41,182,174,.14));
  border: 1px solid rgba(75,143,247,.42); color: #a3c6fd;
  font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 100px;
}
.verified-card {
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid rgba(75,143,247,.3); border-radius: 22px; padding: 32px;
}
.verified-card .row2 { display: flex; align-items: center; gap: 14px; }
.verified-card .biz-av {
  width: 54px; height: 54px; border-radius: 16px; flex: 0 0 auto;
  background: rgba(75,143,247,.16); border: 1px solid rgba(75,143,247,.42);
  display: grid; place-items: center; font-size: 22px;
}
.verified-card .sub2 { color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------------------- 16. FAQ */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-list details {
  background: linear-gradient(180deg, var(--card-top), var(--surface));
  border: 1px solid var(--hair); border-radius: 16px; padding: 0 22px;
  transition: border-color .3s ease;
}
.faq-list details:hover, .faq-list details[open] { border-color: var(--brandMid); }
.faq-list summary {
  cursor: pointer; padding: 21px 0; font-weight: 700; font-size: 16px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ''; }
.faq-list summary::after {
  content: '+'; color: var(--brand); font-size: 24px; font-weight: 400;
  flex: 0 0 auto; line-height: 1; transition: transform .3s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { color: var(--muted); padding: 0 0 21px; font-size: 14.8px; line-height: 1.7; max-width: 68ch; }
.faq-list details[open] .faq-body { animation: slideUpIn .34s var(--ease); }

/* -------------------------------------------------------------- 17. TABLES */
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--hair); }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: 15px 17px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--hair); }
.tbl th { background: var(--surface); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; white-space: nowrap; }
.tbl td { color: var(--text); }
.tbl tbody tr { transition: background .2s ease; }
.tbl tbody tr:hover { background: rgba(41,182,174,.04); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .good { color: var(--brand); font-weight: 700; }
.tbl .bad  { color: var(--faint); }
.tbl .wazi-col { background: rgba(41,182,174,.05); }

/* --------------------------------------------------------- 18. LEGAL PAGES */
/* Shared by privacy.html, terms.html and delete-account.html so none of them
   needs to carry its own copy of this block. */
.legal { max-width: 790px; margin: 0 auto; }
.legal h2 { font-size: 22px; font-weight: 800; letter-spacing: -.012em; margin: 0 0 15px; color: var(--brandLight); }
.legal h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.legal .sec { padding: 36px 0; border-top: 1px solid var(--hair); }
.legal .sec:first-child { border-top: none; padding-top: 0; }
.legal p { color: var(--muted); font-size: 15.2px; line-height: 1.78; margin-bottom: 13px; }
.legal p:last-child { margin-bottom: 0; }
.legal ul { list-style: none; display: grid; gap: 11px; margin: 14px 0; }
.legal ul li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.68; }
.legal ul li::before { content: '›'; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; }
.legal ol { margin: 0; padding-left: 21px; color: var(--muted); font-size: 15px; line-height: 1.78; }
.legal ol li { margin-bottom: 7px; }
.legal ol li:last-child { margin-bottom: 0; }
.legal strong { color: var(--text); }
.legal a { color: var(--brandLight); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal .contact-block, .legal .step-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 16px; padding: 22px 24px; margin-top: 8px;
}
.legal .step-card { margin: 8px 0; }
.legal .contact-block p { margin-bottom: 8px; }

.legal-toc { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 20px 22px; margin-bottom: 8px; }
.legal-toc h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); margin-bottom: 13px; }
/* The grid gap handles the rhythm here; the inherited .legal ol li margin
   would otherwise double it and leave the list looking unmoored. */
.legal-toc ol { list-style: none; padding: 0; display: grid; gap: 4px; line-height: 1.5; }
.legal-toc ol li { margin-bottom: 0; }
.legal-toc a { color: var(--muted); font-size: 14.4px; font-weight: 500; transition: color .2s ease; }
.legal-toc a:hover { color: var(--brandLight); text-decoration: none; }

/* ------------------------------------------------------------- 19. FOOTER */
.download-band {
  background: linear-gradient(180deg, rgba(41,182,174,.09), rgba(41,182,174,.03));
  border-top: 1px solid var(--brandMid); border-bottom: 1px solid var(--brandMid);
}
.download-band .sub { margin-left: auto; margin-right: auto; }
.download-note { margin-top: 20px; color: var(--faint); font-size: 13px; }

footer { border-top: 1px solid var(--hair); padding: 60px 0 42px; background: var(--bg-soft); position: relative; z-index: 1; }
.foot-grid { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
footer .muted { color: var(--muted); font-size: 14px; max-width: 320px; line-height: 1.72; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
@media (max-width: 620px) { .foot-cols { gap: 30px; } }
.foot-cols h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); margin-bottom: 15px; }
.foot-cols a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 10px; transition: color .2s ease, transform .2s ease; }
.foot-cols a:hover { color: var(--brandLight); transform: translateX(3px); }
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--hair); font-size: 16px;
  transition: transform .28s var(--ease), border-color .25s ease, background .25s ease;
}
.foot-social a:hover { transform: translateY(-3px); border-color: var(--brandMid); background: var(--brandDim); }
.foot-bottom {
  margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--hair);
  color: var(--faint); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* -------------------------------------------------------- 20. FIXED CHROME */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 70; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--brand), var(--brandLight), #A5F3EE);
  will-change: transform;
}

/* Sticky mobile download bar, revealed once the hero CTA scrolls away */
.mobile-cta-bar { display: none; }
@media (max-width: 760px) {
  body.has-mobile-cta { padding-bottom: 80px; }
  .mobile-cta-bar {
    display: flex; gap: 12px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(6,13,12,.95); backdrop-filter: blur(16px);
    border-top: 1px solid var(--hair);
    transform: translateY(115%); transition: transform .42s var(--ease);
  }
  .mobile-cta-bar.show { transform: translateY(0); }
  .mobile-cta-bar .btn { flex: 1; }
  .mobile-cta-bar .mcta-note { color: var(--faint); font-size: 11.5px; line-height: 1.3; flex: 0 0 auto; max-width: 96px; }
}

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 64;
  width: 46px; height: 46px; border-radius: 14px; cursor: pointer;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(12,26,24,.92); color: var(--brandLight);
  border: 1px solid var(--brandMid); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .32s ease, transform .32s var(--ease), visibility .32s, background .25s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brandDim); transform: translateY(-3px); }
@media (max-width: 760px) { .to-top { bottom: 88px; right: 16px; width: 42px; height: 42px; } }

/* ------------------------------------------------------------- 21. REVEAL */
.reveal {
  opacity: 0; transform: translateY(24px) scale(.986); filter: blur(5px);
  transition: opacity .82s var(--ease), transform .82s var(--ease), filter .82s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.d1 { transition-delay: .07s } .d2 { transition-delay: .14s }
.d3 { transition-delay: .21s } .d4 { transition-delay: .28s }
.d5 { transition-delay: .35s } .d6 { transition-delay: .42s }

/* 20px, not 30px: .container's gutter is 24px, so an offset smaller than the
   gutter can never push a section past the viewport edge at any width. At 30px it
   did — by exactly 6px, and only at the widths where the two-column layout left
   no slack, which is why it looked like a phone-only problem. */
.reveal-left  { transform: translateX(-20px); filter: blur(4px); }
.reveal-right { transform: translateX(20px);  filter: blur(4px); }
.reveal-left.in, .reveal-right.in { transform: none; }
.reveal-scale { transform: scale(.94); filter: blur(4px); }
.reveal-scale.in { transform: none; }

/* ---------------------------------------------------- 22. REDUCED MOTION */
/* Decorative motion stops. Anything that *hides* content must still resolve to
   its visible state, or reduced-motion visitors would land on a blank page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .hero-slide { transition: none; }
  .hero-slide.on { opacity: 1; visibility: visible; }
  .mobile-cta-bar { transition: none; }
}


/* ==========================================================================
   23. IN-APP SCREENS — transcribed from the Compose source

   These are not impressions of the app, they are the app's own layout values.
   Every number below is the dp/sp figure read out of the corresponding
   composable, so the markup can be checked against the Kotlin line for line.

   The --dp unit is the whole trick. The app lays out against a ~411dp-wide
   window, so defining 1dp as (container width / 411) lets a Compose value be
   written here verbatim: 96.dp becomes calc(var(--dp)*96). Change the frame
   width and the entire screen rescales exactly, with no re-tuning.

   Sources: IncomingCallScreen.kt, IncomingCallComponents.kt,
   FocusShieldHubScreen.kt, WhitelistRulesScreen.kt, SettingsHub.kt,
   WaziTheme.kt (WaziColors).
   ========================================================================== */
.scr-body { container-type: inline-size; }

.app-screen {
  /* Fallback for engines without container-query units, then the real value. */
  --dp: 0.78px;
  --dp: calc(100cqi / 411);

  /* WaziColors, verbatim */
  --w-brand:   #29B6AE;   /* WaziBrand              */
  --w-teal:    #29B6AE;   /* Teal500 (unified)      */
  --w-red:     #EF4444;   /* Red500                 */
  --w-orange:   #F97316;   /* Orange500 (caution only) */
  --w-green:   #22C55E;   /* CallIncoming           */
  --w-slate:   #64748B;   /* Slate500               */
  --w-void:    #091818;   /* VoidBg                 */
  --w-surf:    #102424;   /* SurfaceDark            */
  --w-elev:    #183636;   /* SurfaceElevatedDark    */
  --w-outline: #214040;   /* OutlineDark            */
  --w-on:      #F8FAFC;   /* OnSurfaceDark          */
  --w-sub:     #94A3B8;   /* OnSurfaceSubtleDark    */

  font-size: calc(var(--dp) * 16);
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  background: var(--w-void);
  color: var(--w-on);
  font-family: var(--font);
  line-height: 1.35;
  overflow: hidden;
  text-align: left;
  position: relative;
}
/* .scr-body pads for the status bar; screens that draw their own chrome opt out. */
.scr-body.flush { padding-top: 0; }
.app-screen .pad-status { height: calc(var(--dp) * 44); flex: 0 0 auto; }

/* ── Incoming call ──────────────────────────────────────────────────────────
   IncomingCallScreen.kt: Box(background = verticalGradient(bgTop, bgBottom,
   VoidBg)) then Column(padding horizontal 28.dp, centred).                    */
.call { position: relative; height: 100%; width: 100%; overflow: hidden; }
.call.verified { background: linear-gradient(180deg,#022C22 0%,#000D06 50%,#091818 100%); }
.call.spam     { background: linear-gradient(180deg,#5A0000 0%,#1A0000 50%,#091818 100%); }
.call.reported { background: linear-gradient(180deg,#450A0A 0%,#0D0000 50%,#091818 100%); }
.call.lender   { background: linear-gradient(180deg,#2D1200 0%,#0D0500 50%,#091818 100%); }
.call.plain    { background: #091818; }

/* Ambient top glow: 200.dp tall radial, glowColor at 18% */
.call-glow { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--dp) * 200); pointer-events: none; }
.call-glow.teal { background: radial-gradient(circle at 50% 0%, rgba(41,182,174,.18), transparent 70%); }
.call-glow.red  { background: radial-gradient(circle at 50% 0%, rgba(239,68,68,.18),  transparent 70%); }

/* Spam alert bar: 4.dp for confirmed, horizontalGradient(transparent,c,c,transparent) */
.call-bar { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--dp) * 4);
  background: linear-gradient(90deg, transparent, #EF4444 25%, #EF4444 75%, transparent); }

.call-col {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--dp) * 44) calc(var(--dp) * 28) 0;   /* statusBars + 28.dp sides */
}
.call-col .sp24 { height: calc(var(--dp) * 24); flex: 0 0 auto; }
.call-col .sp12 { height: calc(var(--dp) * 12); flex: 0 0 auto; }
.call-col .sp10 { height: calc(var(--dp) * 10); flex: 0 0 auto; }
.call-col .sp14 { height: calc(var(--dp) * 14); flex: 0 0 auto; }

/* "INCOMING CALL" — 12.sp, white 45%, letterSpacing 2.sp */
.call-kicker { font-size: calc(var(--dp) * 12); color: rgba(255,255,255,.45); letter-spacing: calc(var(--dp) * 2); }

/* StatusChip — radius 20.dp, bg color 13%, border 1.dp color 40%, pad 12/6, 12.sp */
.call-chip {
  display: inline-flex; align-items: center; gap: calc(var(--dp) * 6);
  border-radius: calc(var(--dp) * 20);
  padding: calc(var(--dp) * 6) calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 12);
}
.call-chip.teal { background: rgba(41,182,174,.13); border: 1px solid rgba(41,182,174,.40); color: var(--w-brand); }
.call-chip.red  { background: rgba(239,68,68,.13);  border: 1px solid rgba(239,68,68,.40);  color: var(--w-red); }
.call-chip .dot { width: calc(var(--dp) * 8); height: calc(var(--dp) * 8); border-radius: 50%; background: currentColor; }

/* The middle region carries weight(1f) in Compose — it absorbs all slack. */
.call-mid { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }

/* PulsingAvatar — 96.dp circle, initials 40.sp bold white */
.call-av2 { width: calc(var(--dp) * 96); height: calc(var(--dp) * 96); border-radius: 50%;
  display: grid; place-items: center; position: relative; }
.call-av2 > span { font-size: calc(var(--dp) * 40); font-weight: 700; color: #fff; line-height: 1; }
.call-av2.verified { background: #064E3B; }
.call-av2.spam     { background: #7F1D1D; }
.call-av2.lender   { background: #7C2D12; }
.call-av2.unknown  { background: #1E293B; }
.call-av2::before, .call-av2::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: -1;
}
.call-av2::before { animation: avRing 2s linear infinite; }
.call-av2::after  { animation: avRing 2s linear infinite .5s; }
.call-av2.fast::before { animation-duration: 1.1s; }
.call-av2.fast::after  { animation-duration: 1.1s; }
@keyframes avRing { from { transform: scale(1); opacity: .38 } to { transform: scale(1.7); opacity: 0 } }

/* Identity block. Compose offsets this column by +16.dp once resolved. */
.call-id { width: 100%; display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc(var(--dp) * 16)); }
.call-id.identifying { transform: translateY(calc(var(--dp) * -36)); }

/* Resolved name — 30.sp bold (ResolvedIdentityBlock nameFontSp) */
.call-nm { font-size: calc(var(--dp) * 30); font-weight: 700; color: #fff; text-align: center;
  line-height: calc(var(--dp) * 36); }
/* Secondary number line — 15.sp, white 55% */
.call-no { font-size: calc(var(--dp) * 15); color: rgba(255,255,255,.55); margin-top: calc(var(--dp) * 4); }
/* Large number (identifying, or no name) — 28.sp bold, letterSpacing 1.5.sp */
.call-no-lg { font-size: calc(var(--dp) * 28); font-weight: 700; letter-spacing: calc(var(--dp) * 1.5);
  color: rgba(255,255,255,.60); }
.call-no-lg.solid { color: #fff; }
/* BlurredMiddleText — the app masks the middle digits in captures */
.call-no .msk, .call-no-lg .msk {
  display: inline-block; background: rgba(41,182,174,.10); border: 1px solid rgba(41,182,174,.22);
  border-radius: calc(var(--dp) * 4); padding: 0 calc(var(--dp) * 10); margin: 0 calc(var(--dp) * 2);
  color: transparent;
}

/* CategoryBadge — Surface(shapes.small = 8.dp), pad 14/6, 11.sp ExtraBold */
.call-cat {
  display: inline-flex; align-items: center; gap: calc(var(--dp) * 6);
  border-radius: calc(var(--dp) * 8);
  padding: calc(var(--dp) * 6) calc(var(--dp) * 14);
  font-size: calc(var(--dp) * 11); font-weight: 800; color: #fff;
}
.call-cat.verified { background: #065F46; letter-spacing: calc(var(--dp) * .3); }
.call-cat.business { background: #065F46; letter-spacing: calc(var(--dp) * 1.2); }
.call-cat.spam     { background: #7F1D1D; letter-spacing: calc(var(--dp) * 1.2); }
.call-cat .ms { font-size: calc(var(--dp) * 13); }

/* "Identified by wazi" pill — Teal500 12% bg, 30% border, pad 14/5, 10.sp */
.call-by {
  display: inline-flex; align-items: center; gap: calc(var(--dp) * 6);
  border-radius: calc(var(--dp) * 20);
  background: rgba(41,182,174,.12); border: 1px solid rgba(41,182,174,.30);
  padding: calc(var(--dp) * 5) calc(var(--dp) * 14);
  font-size: calc(var(--dp) * 10); font-weight: 600; color: rgba(255,255,255,.55);
  letter-spacing: calc(var(--dp) * .3);
}
.call-by svg { width: calc(var(--dp) * 16); height: calc(var(--dp) * 10); }

/* Attribution row (identifying only) — 11.sp, brand at 35% */
.call-attrib { display: inline-flex; align-items: center; gap: calc(var(--dp) * 6);
  font-size: calc(var(--dp) * 11); color: rgba(41,182,174,.35); }
.call-attrib svg { width: calc(var(--dp) * 18); height: calc(var(--dp) * 11); }
/* "Wazi AI resolving identity" — IdentifyingPulse */
.call-pulse { display: inline-flex; align-items: center; gap: calc(var(--dp) * 6); font-size: calc(var(--dp) * 15); }
.call-pulse b { color: var(--w-brand); font-weight: 700; }
.call-pulse i { font-style: normal; color: rgba(255,255,255,.55); }
.call-pulse .dots { display: inline-flex; gap: calc(var(--dp) * 3); }
.call-pulse .dots span { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6); border-radius: 50%;
  background: var(--w-brand); animation: blinkdot 1.4s ease-in-out infinite; }
.call-pulse .dots span:nth-child(2) { animation-delay: .2s }
.call-pulse .dots span:nth-child(3) { animation-delay: .4s }

/* SpamInfoCard — red bordered card below the identity block */
.call-spamcard {
  width: 100%; border-radius: calc(var(--dp) * 16);
  border: 1px solid rgba(239,68,68,.35); background: rgba(127,29,29,.18);
  padding: calc(var(--dp) * 14); text-align: left; margin-top: calc(var(--dp) * 14);
}
.call-spamcard h4 { font-size: calc(var(--dp) * 15); font-weight: 700; color: var(--w-red);
  display: flex; align-items: center; gap: calc(var(--dp) * 6); }
.call-spamcard p { font-size: calc(var(--dp) * 13); color: rgba(255,255,255,.80);
  line-height: calc(var(--dp) * 19); margin-top: calc(var(--dp) * 8); }
.call-spamcard .tags { display: flex; gap: calc(var(--dp) * 8); margin-top: calc(var(--dp) * 10); }
.call-spamcard .tags span { border: 1px solid rgba(239,68,68,.45); color: var(--w-red);
  border-radius: calc(var(--dp) * 20); padding: calc(var(--dp) * 5) calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 11); font-weight: 700; letter-spacing: calc(var(--dp) * .4); }
.call-spamcard .rep { display: block; margin-top: calc(var(--dp) * 12); font-size: calc(var(--dp) * 12);
  color: var(--w-red); text-decoration: underline; }

/* Swipe hints — 22.dp icons, spacedBy(-4.dp), row padding 16/16/8 */
.call-hint2 { width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 0 calc(var(--dp) * 16) calc(var(--dp) * 8); }
.call-hint2 .grp { display: flex; }
.call-hint2 .ms { font-size: calc(var(--dp) * 22); margin: 0 calc(var(--dp) * -2); }
.call-hint2 .l .ms { color: rgba(239,68,68,.55); animation: chevronL 1.8s ease-in-out infinite; }
.call-hint2 .r .ms { color: rgba(16,185,129,.55); animation: chevronR 1.8s ease-in-out infinite; }
.call-hint2 .ms:nth-child(2) { animation-delay: .12s; }

/* Decline / Answer — CallActionButton size 76.dp, icon 34.dp, label 13.sp white 70% */
.call-row { width: 100%; display: flex; justify-content: space-evenly; align-items: center;
  padding-bottom: calc(var(--dp) * 12); }
.call-act { display: flex; flex-direction: column; align-items: center; gap: calc(var(--dp) * 10); }
.call-act .circ { width: calc(var(--dp) * 76); height: calc(var(--dp) * 76); border-radius: 50%;
  display: grid; place-items: center; }
.call-act .circ .ms { font-size: calc(var(--dp) * 34); color: #fff; }
.call-act .lb { font-size: calc(var(--dp) * 13); font-weight: 500; color: rgba(255,255,255,.70); }
.call-act.decline .circ { background: radial-gradient(circle, rgba(239,68,68,.9), #EF4444); }
.call-act.answer  .circ { background: radial-gradient(circle, rgba(6,95,70,.9),  #065F46); }

/* "Reply with a message" — 13.sp, white 50%, underlined, bottom 20.dp */
.call-reply2 { width: 100%; text-align: center; font-size: calc(var(--dp) * 13); font-weight: 500;
  color: rgba(255,255,255,.50); text-decoration: underline; padding-bottom: calc(var(--dp) * 20); }

/* Confirmed-spam actions replace the two circles entirely */
.call-block { width: 100%; border-radius: calc(var(--dp) * 16);
  background: rgba(127,29,29,.5); border: 1.5px solid rgba(239,68,68,.6);
  padding: calc(var(--dp) * 18) 0; text-align: center;
  font-size: calc(var(--dp) * 17); font-weight: 700; color: var(--w-red); }
.call-risky { font-size: calc(var(--dp) * 14); color: rgba(255,255,255,.35);
  text-decoration: underline; margin-top: calc(var(--dp) * 16); padding-bottom: calc(var(--dp) * 20); }

/* ── Standard app chrome (settings, Focus Shield, lists) ─────────────────── */
.app-top { display: flex; align-items: center; gap: calc(var(--dp) * 12);
  padding: calc(var(--dp) * 8) calc(var(--dp) * 20) calc(var(--dp) * 14); flex: 0 0 auto; }
.app-top .bk { color: rgba(255,255,255,.75); font-size: calc(var(--dp) * 24); line-height: 1; }
.app-top .gw { flex: 1; min-width: 0; }
/* The title bar inside a device mock-up. It was an <h1>, which gave pages with
   several screens on them five or nine competing top-level headings and left
   search engines guessing what the page was about. The text is unchanged — it
   still quotes the app's own screen verbatim — only the tag is not a heading
   any more. .app-top h1 is kept so any mock-up written the old way still
   renders identically. */
.app-top h1, .app-top .app-title { font-size: calc(var(--dp) * 26); font-weight: 700; color: #fff; letter-spacing: calc(var(--dp) * -.4);
  /* line-height came free while this was an <h1>, from the global heading rule.
     A div inherits the body's instead, which moved every mock-up a few pixels.
     Stated here so the tag it uses stops mattering. */
  line-height: 1.05; margin: 0; }
.app-top .sb { font-size: calc(var(--dp) * 14); color: var(--w-brand); margin-top: calc(var(--dp) * 2); }
.app-top .sb.grey { color: var(--w-sub); }

/* Large toggle used in the Focus Shield header */
.w-sw { width: calc(var(--dp) * 52); height: calc(var(--dp) * 32); border-radius: calc(var(--dp) * 16);
  background: var(--w-elev); position: relative; flex: 0 0 auto; }
.w-sw::after { content: ''; position: absolute; top: calc(var(--dp) * 4); left: calc(var(--dp) * 4);
  width: calc(var(--dp) * 24); height: calc(var(--dp) * 24); border-radius: 50%; background: #7d9491; }
.w-sw.on { background: var(--w-brand); }
.w-sw.on::after { left: auto; right: calc(var(--dp) * 4); background: #fff; }
/* Row-level toggle */
.w-sw.sm { width: calc(var(--dp) * 46); height: calc(var(--dp) * 28); }
.w-sw.sm::after { width: calc(var(--dp) * 20); height: calc(var(--dp) * 20); }

/* Full-width row (not a card) — the "When someone not on your list calls" row */
.w-row { display: flex; align-items: center; gap: calc(var(--dp) * 12);
  padding: calc(var(--dp) * 6) calc(var(--dp) * 20) calc(var(--dp) * 12); }
.w-row .t { font-size: calc(var(--dp) * 15); font-weight: 600; color: #fff; }
.w-row .d { font-size: calc(var(--dp) * 14); color: var(--w-brand); margin-top: calc(var(--dp) * 3); }
.w-row .tri { color: var(--w-brand); font-size: calc(var(--dp) * 14); }

/* Segmented tabs — three equal pills */
.w-tabs { display: flex; gap: calc(var(--dp) * 10); padding: 0 calc(var(--dp) * 20) calc(var(--dp) * 14); flex: 0 0 auto; }
.w-tab { flex: 1; text-align: center; padding: calc(var(--dp) * 12) 0; border-radius: calc(var(--dp) * 12);
  background: rgba(255,255,255,.03); border: 1px solid var(--w-outline);
  font-size: calc(var(--dp) * 15); color: var(--w-sub); }
.w-tab.on { background: rgba(41,182,174,.10); border-color: rgba(41,182,174,.45); color: var(--w-brand); font-weight: 600; }

.w-scroll { flex: 1; overflow: hidden; }
.w-sec { font-size: calc(var(--dp) * 12); font-weight: 700; letter-spacing: calc(var(--dp) * 1.2);
  text-transform: uppercase; color: var(--w-sub); padding: calc(var(--dp) * 18) calc(var(--dp) * 20) calc(var(--dp) * 10); }

/* Rule / settings card — 1.dp OutlineDark border, 16.dp radius */
.w-card { margin: 0 calc(var(--dp) * 18) calc(var(--dp) * 12); border-radius: calc(var(--dp) * 16);
  border: 1px solid var(--w-outline); background: var(--w-surf); padding: calc(var(--dp) * 16); }
.w-card.teal { border-color: rgba(41,182,174,.35); background: rgba(41,182,174,.06); }
.w-card.amber{ border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.06); }
.w-card.red  { border-color: rgba(239,68,68,.35);  background: rgba(239,68,68,.06); }
.w-card .hd { display: flex; align-items: flex-start; gap: calc(var(--dp) * 14); }
.w-card .gw { flex: 1; min-width: 0; }
.w-card .t { font-size: calc(var(--dp) * 17); font-weight: 700; color: #fff; }
.w-card .d { font-size: calc(var(--dp) * 14); color: var(--w-sub); margin-top: calc(var(--dp) * 4);
  line-height: calc(var(--dp) * 19); }
.w-card .foot { display: flex; align-items: center; gap: calc(var(--dp) * 14); margin-top: calc(var(--dp) * 14); }
.w-card .foot .mut { font-size: calc(var(--dp) * 14); color: var(--w-sub); }
.w-card .foot .lnk { font-size: calc(var(--dp) * 14); color: var(--w-brand); font-weight: 600; }
.w-pill { display: inline-block; border: 1px solid rgba(41,182,174,.45); color: var(--w-brand);
  border-radius: calc(var(--dp) * 20); padding: calc(var(--dp) * 7) calc(var(--dp) * 14);
  font-size: calc(var(--dp) * 14); }

/* Banner (the teal "Active — 5 contacts can reach you" card) */
.w-banner { margin: calc(var(--dp) * 14) calc(var(--dp) * 18); border-radius: calc(var(--dp) * 14);
  border: 1px solid rgba(41,182,174,.35); background: rgba(41,182,174,.05);
  padding: calc(var(--dp) * 14) calc(var(--dp) * 16); display: flex; gap: calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 14.5); color: var(--w-brand); line-height: calc(var(--dp) * 21); }

/* Allowed-contacts rows: divider-separated, not carded */
.w-lrow { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 14) calc(var(--dp) * 20); border-bottom: 1px solid rgba(33,64,64,.6); }
.w-lrow .av { width: calc(var(--dp) * 44); height: calc(var(--dp) * 44); border-radius: 50%;
  background: rgba(41,182,174,.12); color: var(--w-brand); display: grid; place-items: center;
  font-size: calc(var(--dp) * 18); font-weight: 600; flex: 0 0 auto; }
.w-lrow .gw { flex: 1; min-width: 0; }
.w-lrow .nm { font-size: calc(var(--dp) * 16); font-weight: 700; color: #fff; }
.w-lrow .nu { font-size: calc(var(--dp) * 14); color: var(--w-sub); margin-top: calc(var(--dp) * 3); }
.w-lrow .star { color: var(--w-sub); font-size: calc(var(--dp) * 18); }
.w-lrow .scope { border: 1px solid var(--w-outline); border-radius: calc(var(--dp) * 8);
  padding: calc(var(--dp) * 7) calc(var(--dp) * 10); font-size: calc(var(--dp) * 13); background: var(--w-surf); }
.w-lrow .rm { width: calc(var(--dp) * 34); height: calc(var(--dp) * 34); border-radius: 50%;
  background: rgba(239,68,68,.10); color: var(--w-red); display: grid; place-items: center;
  font-size: calc(var(--dp) * 16); flex: 0 0 auto; }

/* Settings hub cards */
.s-card { margin: 0 calc(var(--dp) * 18) calc(var(--dp) * 12); border-radius: calc(var(--dp) * 16);
  border: 1px solid var(--w-outline); background: var(--w-surf);
  padding: calc(var(--dp) * 16); display: flex; align-items: center; gap: calc(var(--dp) * 16); }
.s-card .ico { width: calc(var(--dp) * 48); height: calc(var(--dp) * 48); border-radius: calc(var(--dp) * 14);
  display: grid; place-items: center; font-size: calc(var(--dp) * 24); flex: 0 0 auto; }
.s-card .ico.teal  { background: rgba(41,182,174,.12); }
.s-card .ico.red   { background: rgba(239,68,68,.10); }
.s-card .ico.amber { background: rgba(249,115,22,.10); }
.s-card .ico.dark  { background: var(--w-elev); }
.s-card .gw { flex: 1; min-width: 0; }
.s-card .t { font-size: calc(var(--dp) * 17); font-weight: 700; color: #fff; }
.s-card .d { font-size: calc(var(--dp) * 14); color: var(--w-sub); margin-top: calc(var(--dp) * 3); }
.s-card .chev { color: var(--w-brand); font-size: calc(var(--dp) * 18); }
.s-card .up { background: var(--w-brand); color: #07201D; font-weight: 700; font-size: calc(var(--dp) * 13);
  border-radius: calc(var(--dp) * 8); padding: calc(var(--dp) * 10) calc(var(--dp) * 14); letter-spacing: calc(var(--dp) * .5); }
.s-num { font-size: calc(var(--dp) * 20); font-weight: 700; color: #fff; }
.s-chip { display: inline-flex; align-items: center; gap: calc(var(--dp) * 5); margin-top: calc(var(--dp) * 8);
  border: 1px solid rgba(41,182,174,.45); border-radius: calc(var(--dp) * 8);
  padding: calc(var(--dp) * 6) calc(var(--dp) * 12); font-size: calc(var(--dp) * 12);
  font-weight: 700; letter-spacing: calc(var(--dp) * .8); color: var(--w-brand); }
/* Grouped "MORE" list */
.s-group { margin: 0 calc(var(--dp) * 18) calc(var(--dp) * 12); border-radius: calc(var(--dp) * 16);
  border: 1px solid var(--w-outline); background: var(--w-surf); overflow: hidden; }
.s-group .r { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 15) calc(var(--dp) * 16); font-size: calc(var(--dp) * 16); color: #fff; }
.s-group .r + .r { border-top: 1px solid rgba(33,64,64,.7); }
.s-group .r .gw { flex: 1; }
.s-group .r .val { color: var(--w-sub); font-size: calc(var(--dp) * 14); }
.s-group .r .chev { color: var(--w-brand); font-size: calc(var(--dp) * 18); }

/* Bottom navigation. WaziBottomNav.kt: 72dp tall, each item a 52x32 pill at
   WaziBrand 18% when active, a 22dp icon, and a 10sp label. Inactive tint is
   OnSurfaceSubtleDark at 40%, which is why the idle tabs read so quietly. */
.w-nav { display: flex; align-items: center; height: calc(var(--dp) * 72);
  background: var(--w-void); border-top: 1px solid rgba(33,64,64,.6); flex: 0 0 auto; }
.w-nav .it { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: calc(var(--dp) * 10); color: rgba(148,163,184,.4); }
.w-nav .it .gi { width: calc(var(--dp) * 52); height: calc(var(--dp) * 32);
  border-radius: calc(var(--dp) * 16); display: grid; place-items: center; }
.w-nav .it .gi svg { width: calc(var(--dp) * 22); height: calc(var(--dp) * 22); }
.w-nav .it.on { color: var(--w-brand); font-weight: 600; }
.w-nav .it.on .gi { background: rgba(41,182,174,.18); }

/* Home header + call history */
.h-top { display: flex; align-items: center; gap: calc(var(--dp) * 10);
  padding: calc(var(--dp) * 10) calc(var(--dp) * 18); flex: 0 0 auto; }
.h-top .wm { font-size: calc(var(--dp) * 22); font-weight: 700; color: var(--w-brand); letter-spacing: calc(var(--dp) * -.3); }
.h-top .rd { width: calc(var(--dp) * 8); height: calc(var(--dp) * 8); border-radius: 50%; background: var(--w-red); }
.h-top .gw { flex: 1; }
.h-top .ic { color: var(--w-sub); font-size: calc(var(--dp) * 20); }
.h-shield { display: flex; align-items: center; gap: calc(var(--dp) * 10);
  background: rgba(41,182,174,.07); border-top: 1px solid rgba(41,182,174,.16);
  border-bottom: 1px solid rgba(41,182,174,.16);
  padding: calc(var(--dp) * 12) calc(var(--dp) * 18); }
.h-shield .tx { flex: 1; font-size: calc(var(--dp) * 15); font-weight: 600; color: var(--w-brand); }
.h-shield .mg { border: 1px solid rgba(41,182,174,.4); border-radius: calc(var(--dp) * 10);
  padding: calc(var(--dp) * 9) calc(var(--dp) * 14); font-size: calc(var(--dp) * 14); color: var(--w-brand); }
.h-day { font-size: calc(var(--dp) * 13); color: var(--w-sub); padding: calc(var(--dp) * 14) calc(var(--dp) * 18) calc(var(--dp) * 6); }
.h-row { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 12) calc(var(--dp) * 18); border-bottom: 1px solid rgba(33,64,64,.45); }
.h-row .av { width: calc(var(--dp) * 46); height: calc(var(--dp) * 46); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 16); font-weight: 700; flex: 0 0 auto; position: relative; }
.h-row .av .dir { position: absolute; right: calc(var(--dp) * -2); bottom: calc(var(--dp) * -2);
  width: calc(var(--dp) * 18); height: calc(var(--dp) * 18); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 10); color: #fff; border: 2px solid var(--w-void); }
.h-row .gw { flex: 1; min-width: 0; }
.h-row .nm { font-size: calc(var(--dp) * 17); font-weight: 700; color: #fff; }
.h-row .nm.red { color: var(--w-red); }
.h-row .nu { font-size: calc(var(--dp) * 14); color: var(--w-sub); margin-top: calc(var(--dp) * 3); }
.h-row .rt { text-align: right; flex: 0 0 auto; }
.h-row .rt .tm { font-size: calc(var(--dp) * 13); color: var(--w-sub); }
.h-row .rt .tm.red { color: var(--w-red); }
.h-row .rt .du { font-size: calc(var(--dp) * 13); color: var(--w-sub); margin-top: calc(var(--dp) * 6); }
.h-row .x2 { background: var(--w-elev); color: var(--w-sub); border-radius: calc(var(--dp) * 6);
  padding: calc(var(--dp) * 3) calc(var(--dp) * 7); font-size: calc(var(--dp) * 12); }

/* Messages list */
.m-row { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 13) calc(var(--dp) * 18); border-bottom: 1px solid rgba(33,64,64,.45); }
.m-row .av { width: calc(var(--dp) * 46); height: calc(var(--dp) * 46); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 15); font-weight: 700; color: #fff; flex: 0 0 auto; }
.m-row .gw { flex: 1; min-width: 0; }
.m-row .nm { font-size: calc(var(--dp) * 16); font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: calc(var(--dp) * 8); }
.m-row .pv { font-size: calc(var(--dp) * 14); color: var(--w-sub); margin-top: calc(var(--dp) * 3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row .tm { font-size: calc(var(--dp) * 13); color: var(--w-sub); flex: 0 0 auto; }
.m-row .ur { background: var(--w-brand); color: #04201d; border-radius: calc(var(--dp) * 10);
  min-width: calc(var(--dp) * 20); height: calc(var(--dp) * 20); display: grid; place-items: center;
  font-size: calc(var(--dp) * 12); font-weight: 700; padding: 0 calc(var(--dp) * 6); flex: 0 0 auto; }
.m-tag { border-radius: calc(var(--dp) * 6); padding: calc(var(--dp) * 3) calc(var(--dp) * 8);
  font-size: calc(var(--dp) * 11); font-weight: 700; letter-spacing: calc(var(--dp) * .3); }
.m-tag.teal  { background: rgba(41,182,174,.15); color: var(--w-brand); }
.m-tag.red   { background: rgba(239,68,68,.15);  color: #fca5a5; }
.m-tag.amber { background: rgba(249,115,22,.15); color: #fdba74; }
.m-tag.grey  { background: var(--w-elev);        color: var(--w-sub); }
.m-tag.blue  { background: rgba(59,130,246,.15); color: #93c5fd; }

/* Chip row (Messages filters) */
.m-chips { display: flex; gap: calc(var(--dp) * 8); padding: 0 calc(var(--dp) * 18) calc(var(--dp) * 12); }
.m-chips span { border: 1px solid var(--w-outline); border-radius: calc(var(--dp) * 20);
  padding: calc(var(--dp) * 7) calc(var(--dp) * 14); font-size: calc(var(--dp) * 14); color: var(--w-sub); }
.m-chips span.on { border-color: rgba(41,182,174,.45); color: var(--w-brand); background: rgba(41,182,174,.08); }

/* Labelled device caption */
.device-label { text-align: center; margin-top: 1.1rem; }
.device-label b { display: block; font-size: 14.5px; font-weight: 700; }
.device-label span { display: block; color: var(--muted); font-size: 12.8px; margin-top: 3px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .call-av2::before, .call-av2::after, .call-hint2 .ms, .call-pulse .dots span { animation: none; }
}

/* Inline 'Recommended' badge used in page copy (outside a phone frame) */
.badge-rec { display:inline-flex; align-items:center; background: var(--brandDim);
  border: 1px solid var(--brandMid); color: var(--brandLight); font-size: 11.5px;
  font-weight: 700; padding: 3px 9px; border-radius: 100px; letter-spacing: .02em; }

/* ==========================================================================
   24. ONBOARDING, SHEETS, MENUS AND THE REST OF THE APP CHROME
   Same --dp discipline as section 23. Sources: OnboardingScreen.kt,
   WhitelistEducationSheet.kt, HomeTopBar.kt, SparkFab.kt,
   SmsFilterComponents.kt, NumberSearchBar.kt.
   ========================================================================== */

/* ── Onboarding ─────────────────────────────────────────────────────────────
   Illustration on top, then page dots, headline, body, full-width action.   */
.ob { height: 100%; display: flex; flex-direction: column; background: var(--w-void);
  padding: calc(var(--dp) * 44) calc(var(--dp) * 24) calc(var(--dp) * 20); }
.ob-art { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.ob-dots { display: flex; justify-content: center; align-items: center; gap: calc(var(--dp) * 7);
  padding: calc(var(--dp) * 10) 0 calc(var(--dp) * 22); }
.ob-dots i { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6); border-radius: 50%;
  background: rgba(255,255,255,.18); }
.ob-dots i.on { width: calc(var(--dp) * 26); border-radius: calc(var(--dp) * 4); background: var(--w-brand); }
.ob-h { font-size: calc(var(--dp) * 32); font-weight: 700; color: #fff; text-align: center;
  line-height: calc(var(--dp) * 38); letter-spacing: calc(var(--dp) * -.4); }
.ob-b { font-size: calc(var(--dp) * 15.5); color: var(--w-sub); text-align: center;
  line-height: calc(var(--dp) * 23); margin-top: calc(var(--dp) * 14); }
.ob-cta { margin-top: auto; background: var(--w-brand); color: #04201d; text-align: center;
  border-radius: calc(var(--dp) * 16); padding: calc(var(--dp) * 18) 0;
  font-size: calc(var(--dp) * 17); font-weight: 700; }
.ob-skip { text-align: center; color: var(--w-sub); font-size: calc(var(--dp) * 14);
  padding-top: calc(var(--dp) * 14); }

/* Page 1 illustration: the stock dialer card with Wazi's card underneath */

/* Concentric signal rings (page 2) */
@keyframes obPulse { 0% { opacity:.7; transform:scale(.85) } 100% { opacity:0; transform:scale(1.1) } }

/* Big glyph illustrations (pages 3 to 7) */

/* Mini phone used inside onboarding art (pages 4 and 5) */
.ob-mini { width: calc(var(--dp) * 132); aspect-ratio: 132/250; border-radius: calc(var(--dp) * 18);
  border: 1px solid rgba(255,255,255,.14); background: #061412; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: calc(var(--dp) * 14) calc(var(--dp) * 8); gap: calc(var(--dp) * 6); }
.ob-mini .k { font-size: calc(var(--dp) * 8); letter-spacing: calc(var(--dp) * 1); color: rgba(255,255,255,.4); }
.ob-mini .a { width: calc(var(--dp) * 38); height: calc(var(--dp) * 38); border-radius: 50%; background: #064E3B;
  display: grid; place-items: center; color: #fff; font-size: calc(var(--dp) * 13); font-weight: 700; }
.ob-mini .n { font-size: calc(var(--dp) * 11); font-weight: 700; color: #fff; }
.ob-mini .bg { display: inline-flex; align-items: center; gap: calc(var(--dp) * 3); background: #065F46;
  color: #fff; font-size: calc(var(--dp) * 7.5); font-weight: 800; border-radius: calc(var(--dp) * 5);
  padding: calc(var(--dp) * 3) calc(var(--dp) * 7); }
.ob-float { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--dp) * 26);
  width: 118%; border-radius: calc(var(--dp) * 10); border: 1px solid rgba(41,182,174,.55);
  background: #0c1f1c; padding: calc(var(--dp) * 8) calc(var(--dp) * 10); display: flex;
  align-items: center; gap: calc(var(--dp) * 8); box-shadow: 0 calc(var(--dp)*10) calc(var(--dp)*22) rgba(0,0,0,.6);
  animation: obFloat 3s ease-in-out infinite; }
@keyframes obFloat { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(calc(var(--dp) * -6)) } }
.ob-float .a { width: calc(var(--dp) * 24); height: calc(var(--dp) * 24); border-radius: 50%;
  background: rgba(41,182,174,.15); color: var(--w-brand); display: grid; place-items: center;
  font-size: calc(var(--dp) * 9); font-weight: 700; flex: 0 0 auto; }
.ob-float .t { font-size: calc(var(--dp) * 9.5); font-weight: 700; color: #fff; }
.ob-float .s { font-size: calc(var(--dp) * 8); color: var(--w-brand); }

/* ── Bottom sheet (Focus Shield education, action sheets) ────────────────── */
.sheet-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; background: rgba(0,0,0,.55); }
.sheet2 { background: var(--w-elev); border-radius: calc(var(--dp) * 26) calc(var(--dp) * 26) 0 0;
  padding: calc(var(--dp) * 12) calc(var(--dp) * 20) calc(var(--dp) * 22); }
.sheet2 .grab { width: calc(var(--dp) * 38); height: calc(var(--dp) * 4); border-radius: calc(var(--dp) * 3);
  background: rgba(255,255,255,.18); margin: 0 auto calc(var(--dp) * 16); }
.sheet2 .em { text-align: center; font-size: calc(var(--dp) * 30); }
.sheet2 h3 { text-align: center; font-size: calc(var(--dp) * 20); font-weight: 700; color: #fff;
  margin-top: calc(var(--dp) * 10); }
.sheet2 .lead { text-align: center; font-size: calc(var(--dp) * 14); color: var(--w-sub);
  line-height: calc(var(--dp) * 21); margin-top: calc(var(--dp) * 10); }
.sheet2 .ben { display: flex; gap: calc(var(--dp) * 14); margin-top: calc(var(--dp) * 16); }
.sheet2 .ben .ic { font-size: calc(var(--dp) * 20); flex: 0 0 auto; }
.sheet2 .ben .t { font-size: calc(var(--dp) * 15); font-weight: 700; color: #fff; }
.sheet2 .ben .d { font-size: calc(var(--dp) * 13.5); color: var(--w-sub); margin-top: calc(var(--dp) * 3);
  line-height: calc(var(--dp) * 19); }
.sheet2 .warn { display: flex; gap: calc(var(--dp) * 10); align-items: flex-start;
  margin-top: calc(var(--dp) * 18); border-radius: calc(var(--dp) * 12);
  border: 1px solid rgba(249,115,22,.35); background: rgba(249,115,22,.07);
  padding: calc(var(--dp) * 12) calc(var(--dp) * 14); font-size: calc(var(--dp) * 13.5);
  color: #fdba74; line-height: calc(var(--dp) * 19); }
.sheet2 .go { margin-top: calc(var(--dp) * 18); background: var(--w-brand); color: #04201d;
  text-align: center; border-radius: calc(var(--dp) * 14); padding: calc(var(--dp) * 16) 0;
  font-size: calc(var(--dp) * 16); font-weight: 700; }
.sheet2 .cancel { text-align: center; color: var(--w-sub); font-size: calc(var(--dp) * 14);
  padding-top: calc(var(--dp) * 14); }

/* ── Overflow menu (the three-dot menu) ─────────────────────────────────── */
.menu2 { position: absolute; right: calc(var(--dp) * 12); top: calc(var(--dp) * 66);
  width: calc(var(--dp) * 232); border-radius: calc(var(--dp) * 14); background: #17302c;
  border: 1px solid rgba(255,255,255,.07); padding: calc(var(--dp) * 8) 0;
  box-shadow: 0 calc(var(--dp)*18) calc(var(--dp)*40) rgba(0,0,0,.6); z-index: 5; }
.menu2 .mi { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 13) calc(var(--dp) * 16); font-size: calc(var(--dp) * 16); color: #fff; }
.menu2 .mi .ic { font-size: calc(var(--dp) * 18); width: calc(var(--dp) * 22); text-align: center; }
.menu2 .mi.danger { color: var(--w-red); }
.menu2 .sep { height: 1px; background: rgba(255,255,255,.07); margin: calc(var(--dp) * 6) calc(var(--dp) * 14); }

/* ── Number lookup bar ─────────────────────────────────────────────────── */
.lk-head { display: flex; align-items: center; padding: calc(var(--dp) * 6) calc(var(--dp) * 20) calc(var(--dp) * 10); }
.lk-head .t { flex: 1; font-size: calc(var(--dp) * 14.5); color: var(--w-sub); }
.lk-head .x { width: calc(var(--dp) * 34); height: calc(var(--dp) * 34); border-radius: 50%;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); display: grid; place-items: center;
  font-size: calc(var(--dp) * 14); }
.lk-bar { margin: 0 calc(var(--dp) * 18) calc(var(--dp) * 12); border-radius: calc(var(--dp) * 20);
  background: rgba(255,255,255,.04); border: 1px solid var(--w-outline);
  display: flex; align-items: center; gap: calc(var(--dp) * 10); padding: calc(var(--dp) * 10); }
.lk-cc { display: flex; align-items: center; gap: calc(var(--dp) * 7); border-radius: calc(var(--dp) * 14);
  background: rgba(255,255,255,.05); padding: calc(var(--dp) * 9) calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 16); font-weight: 700; color: #fff; flex: 0 0 auto; }
.lk-cc .ar { color: var(--w-sub); font-size: calc(var(--dp) * 11); }
.lk-ph { flex: 1; font-size: calc(var(--dp) * 16); color: rgba(255,255,255,.35); }
.lk-go { width: calc(var(--dp) * 44); height: calc(var(--dp) * 44); border-radius: calc(var(--dp) * 14);
  background: rgba(255,255,255,.05); color: var(--w-sub); display: grid; place-items: center;
  font-size: calc(var(--dp) * 18); flex: 0 0 auto; }
.lk-go.on { background: var(--w-brand); color: #04201d; }

/* ── SparkFab stack ────────────────────────────────────────────────────── */
.fab-stack { position: absolute; right: calc(var(--dp) * 16); bottom: calc(var(--dp) * 90);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--dp) * 14); z-index: 4; }
.fab { display: inline-flex; align-items: center; gap: calc(var(--dp) * 10);
  border-radius: calc(var(--dp) * 30); background: rgba(41,182,174,.16);
  border: 1px solid rgba(41,182,174,.30); color: var(--w-brand);
  padding: calc(var(--dp) * 14) calc(var(--dp) * 20); font-size: calc(var(--dp) * 16); font-weight: 700;
  transition: all .3s var(--ease); }
.fab .ms { font-size: calc(var(--dp) * 22); }
.fab.primary { background: var(--w-brand); color: #04201d; border-color: transparent;
  box-shadow: 0 calc(var(--dp)*8) calc(var(--dp)*20) rgba(41,182,174,.3); }
/* Collapsed: icon only, once the list has been scrolled */
.fab.mini { width: calc(var(--dp) * 58); height: calc(var(--dp) * 58); border-radius: 50%;
  padding: 0; justify-content: center; }
.fab.mini span:not(.ms) { display: none; }
.fab.mini.primary { width: calc(var(--dp) * 64); height: calc(var(--dp) * 64); }

/* ── SMS: filter chips with counts, thread rows ───────────────────────── */
.sm-chips { display: flex; gap: calc(var(--dp) * 10); padding: calc(var(--dp) * 4) calc(var(--dp) * 18) calc(var(--dp) * 12);
  overflow: hidden; }
.sm-chips span { display: inline-flex; align-items: center; gap: calc(var(--dp) * 7); flex: 0 0 auto;
  border: 1px solid var(--w-outline); border-radius: calc(var(--dp) * 22);
  padding: calc(var(--dp) * 11) calc(var(--dp) * 17); font-size: calc(var(--dp) * 15); color: var(--w-sub);
  background: rgba(255,255,255,.03); white-space: nowrap; }
.sm-chips span.on { border-color: rgba(41,182,174,.55); color: var(--w-brand); background: rgba(41,182,174,.08); }
.sm-chips span.on::before { content: ''; width: calc(var(--dp) * 7); height: calc(var(--dp) * 7);
  border-radius: 50%; background: var(--w-brand); }
.sm-unread { background: var(--w-brand); color: #04201d; border-radius: calc(var(--dp) * 10);
  min-width: calc(var(--dp) * 34); height: calc(var(--dp) * 34); display: grid; place-items: center;
  font-size: calc(var(--dp) * 15); font-weight: 700; }
.sm-banner { margin: 0 calc(var(--dp) * 18) calc(var(--dp) * 14); border-radius: calc(var(--dp) * 16);
  border: 1px solid rgba(41,182,174,.35); padding: calc(var(--dp) * 16);
  display: flex; align-items: center; gap: calc(var(--dp) * 14); }
.sm-banner .gw { flex: 1; }
.sm-banner .t { font-size: calc(var(--dp) * 16); font-weight: 700; color: var(--w-brand); }
.sm-banner .d { font-size: calc(var(--dp) * 13.5); color: var(--w-sub); margin-top: calc(var(--dp) * 4); }
.sm-banner .en { background: var(--w-brand); color: #04201d; font-weight: 700;
  border-radius: calc(var(--dp) * 12); padding: calc(var(--dp) * 13) calc(var(--dp) * 20);
  font-size: calc(var(--dp) * 15); flex: 0 0 auto; }
/* Message list row. Verbatim from SmsThreadItem.kt: heightIn(min 76dp),
   padding 16/13, 12dp gap, a 3x44dp unread accent bar ahead of a 50dp avatar,
   then a 3dp-gap info column. Name 15sp, snippet 12sp/17sp, time 11sp. The
   divider is inset 79dp so it starts under the text, not the avatar. */
.sm-row { display: flex; align-items: center; gap: calc(var(--dp) * 12);
  padding: calc(var(--dp) * 13) calc(var(--dp) * 16); min-height: calc(var(--dp) * 76);
  background: var(--w-void); position: relative; }
.sm-row + .sm-row::before { content: ''; position: absolute; left: calc(var(--dp) * 79);
  right: 0; top: 0; height: 1px; background: rgba(33,64,64,.5); }
.sm-row.unread { background: rgba(41,182,174,.04); }
.sm-row .bar { width: calc(var(--dp) * 3); height: calc(var(--dp) * 44);
  border-radius: calc(var(--dp) * 2); background: transparent; flex: 0 0 auto; }
.sm-row.unread .bar { background: var(--w-brand); }
.sm-row .av { width: calc(var(--dp) * 50); height: calc(var(--dp) * 50); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 16); font-weight: 700;
  flex: 0 0 auto; }
.sm-row .av.one { font-size: calc(var(--dp) * 21); }
.sm-row .gw { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: calc(var(--dp) * 3); }
.sm-row .top { display: flex; align-items: flex-start; gap: calc(var(--dp) * 4); }
.sm-row .nm { flex: 1; min-width: 0; font-size: calc(var(--dp) * 15); font-weight: 500;
  color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sm-row.unread .nm { color: #fff; font-weight: 700; }
.sm-row .rt { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.sm-row .tm { font-size: calc(var(--dp) * 11); color: var(--w-sub); }
.sm-row.unread .tm { color: var(--w-brand); font-weight: 600; }
.sm-row .idf { display: inline-flex; align-items: center; gap: calc(var(--dp) * 3);
  font-size: calc(var(--dp) * 8.5); font-weight: 600; color: var(--w-brand); }
.sm-row .idf svg { width: calc(var(--dp) * 11); height: calc(var(--dp) * 6); }
.sm-row .pill { margin-top: calc(var(--dp) * 2); min-width: calc(var(--dp) * 18);
  height: calc(var(--dp) * 18); border-radius: calc(var(--dp) * 9); background: var(--w-brand);
  color: var(--w-void); font-size: calc(var(--dp) * 11); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--dp) * 4); }
.sm-row .pv { font-size: calc(var(--dp) * 12); line-height: calc(var(--dp) * 17);
  color: var(--w-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.sm-row.unread .pv { color: rgba(255,255,255,.75); }
.sm-row .pv.red { color: rgba(239,68,68,.8); }
/* Long-press strip. Real labels and colours from SmsThreadItem.kt. */
.sm-actions { display: flex; gap: calc(var(--dp) * 8); background: var(--w-elev);
  padding: calc(var(--dp) * 8) calc(var(--dp) * 16); }
.sm-actions span { border-radius: calc(var(--dp) * 20); padding: calc(var(--dp) * 6) calc(var(--dp) * 14);
  font-size: calc(var(--dp) * 13); font-weight: 600; border: 1px solid currentColor; }
.sm-actions span.pin { color: var(--w-brand); }
.sm-actions span.arch { color: #94A3B8; }   /* archiving is a benign action, not a caution */
.sm-actions span.del { color: var(--w-red); }

/* Dialer */
/* Dialler. DialerScreen.kt at a 411dp width: keySize resolves to 80dp and
   callSize to 72dp, so the call glyph is 72 * 0.44 = 31.7dp. The number sits in
   a 16dp-radius DialerCard (#102828) in WaziBrand at 28sp with 1sp tracking,
   and the call button is a WaziBrand circle with a VoidBg-tinted handset, not
   a green one. */
.dl-numcard { display: flex; align-items: center; gap: calc(var(--dp) * 10);
  margin: 0 calc(var(--dp) * 16); border-radius: calc(var(--dp) * 16);
  background: #102828; padding: calc(var(--dp) * 14); }
.dl-numcard .n { flex: 1; min-width: 0; font-size: calc(var(--dp) * 28); font-weight: 700;
  letter-spacing: calc(var(--dp) * 1); color: var(--w-brand); }
.dl-numcard .n.ph { color: rgba(41,182,174,.35); font-weight: 500; }
.dl-numcard .add { width: calc(var(--dp) * 36); height: calc(var(--dp) * 36);
  border-radius: 50%; background: rgba(41,182,174,.15); display: grid; place-items: center;
  color: var(--w-brand); flex: 0 0 auto; }
.dl-numcard .add svg { width: calc(var(--dp) * 16); height: calc(var(--dp) * 16); }

/* DialerLookupCard: 14dp radius, 1dp accent-50% border on DialerCard, a 2dp
   accent stripe, a 44dp initials avatar, then name / number / dotted badge and
   the save + call circles. */
.dl-res { position: relative; margin: 0 calc(var(--dp) * 16); border-radius: calc(var(--dp) * 14);
  background: #102828; overflow: hidden; }
.dl-res.teal  { border: 1px solid rgba(41,182,174,.5); }
.dl-res.red   { border: 1px solid rgba(239,68,68,.5); }
.dl-res.amber { border: 1px solid rgba(249,115,22,.5); }
.dl-res.slate { border: 1px solid rgba(148,163,184,.5); }
.dl-res .bar { height: calc(var(--dp) * 2); }
.dl-res.teal  .bar { background: linear-gradient(90deg, transparent, rgba(41,182,174,.9), rgba(41,182,174,.9), transparent); }
.dl-res.red   .bar { background: linear-gradient(90deg, transparent, rgba(239,68,68,.9), rgba(239,68,68,.9), transparent); }
.dl-res.amber .bar { background: linear-gradient(90deg, transparent, rgba(249,115,22,.9), rgba(249,115,22,.9), transparent); }
.dl-res.slate .bar { background: linear-gradient(90deg, transparent, rgba(148,163,184,.9), rgba(148,163,184,.9), transparent); }
.dl-res .row { display: flex; align-items: center; gap: calc(var(--dp) * 12);
  padding: calc(var(--dp) * 12) calc(var(--dp) * 14); }
.dl-res .av { width: calc(var(--dp) * 44); height: calc(var(--dp) * 44); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 13); font-weight: 700;
  flex: 0 0 auto; }
.dl-res.teal  .av { background: rgba(41,182,174,.2);  border: 1px solid rgba(41,182,174,.55);  color: var(--w-brand); }
.dl-res.red   .av { background: rgba(239,68,68,.2);   border: 1px solid rgba(239,68,68,.55);   color: var(--w-red); }
.dl-res.amber .av { background: rgba(249,115,22,.2);  border: 1px solid rgba(249,115,22,.55);  color: var(--w-orange); }
.dl-res.slate .av { background: rgba(148,163,184,.2); border: 1px solid rgba(148,163,184,.55); color: #94A3B8; }
.dl-res .gw { flex: 1; min-width: 0; }
.dl-res .nmrow { display: flex; align-items: center; gap: calc(var(--dp) * 6); }
.dl-res .nm { font-size: calc(var(--dp) * 15); font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-res .rv { font-size: calc(var(--dp) * 10); font-weight: 700; color: var(--w-brand);
  flex: 0 0 auto; }
.dl-res .nu { font-size: calc(var(--dp) * 12); color: rgba(255,255,255,.52); }
.dl-res .bd { display: flex; align-items: center; gap: calc(var(--dp) * 4);
  font-size: calc(var(--dp) * 10); font-weight: 500; letter-spacing: calc(var(--dp) * .4);
  white-space: nowrap; }
.dl-res .bd i { flex: 0 0 auto; }
.dl-res .bd i { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6);
  border-radius: 50%; background: currentColor; }
.dl-res.teal  .bd { color: var(--w-brand); }
.dl-res.red   .bd { color: var(--w-red); }
.dl-res.amber .bd { color: var(--w-orange); }
.dl-res.slate .bd { color: #94A3B8; }
.dl-res .act { width: calc(var(--dp) * 36); height: calc(var(--dp) * 36); border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto; }
.dl-res .act svg { width: calc(var(--dp) * 16); height: calc(var(--dp) * 16); }
.dl-res .act.save { background: rgba(41,182,174,.15); color: var(--w-brand); }
.dl-res .act.call { background: rgba(41,182,174,.15); color: var(--w-brand); }

/* Empty / failed lookup, same three sentences the app uses. */
.dl-none { margin: 0 calc(var(--dp) * 16); display: flex; align-items: center;
  gap: calc(var(--dp) * 10); border-radius: calc(var(--dp) * 12);
  background: var(--w-outline); padding: calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 14); color: var(--w-sub); }
.dl-none svg { width: calc(var(--dp) * 20); height: calc(var(--dp) * 20); flex: 0 0 auto; }

/* Keypad: four rows of 80dp keys, then the call row. */
.dl-pad { display: grid; grid-template-columns: repeat(3,1fr);
  justify-items: center; padding: 0 calc(var(--dp) * 8); }
.dl-k { width: calc(var(--dp) * 80); height: calc(var(--dp) * 80); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dl-k b { font-size: calc(var(--dp) * 30); font-weight: 400; color: #fff; line-height: 1.1; }
.dl-k i { font-style: normal; font-size: calc(var(--dp) * 10); font-weight: 600;
  color: rgba(148,163,184,.9); letter-spacing: calc(var(--dp) * 1.5); }
.dl-callrow { display: grid; grid-template-columns: repeat(3,1fr); justify-items: center;
  align-items: center; padding: calc(var(--dp) * 4) calc(var(--dp) * 8) 0; }
.dl-callrow .c { width: calc(var(--dp) * 72); height: calc(var(--dp) * 72); border-radius: 50%;
  background: var(--w-brand); display: grid; place-items: center; }
.dl-callrow .c svg { width: calc(var(--dp) * 31.7); height: calc(var(--dp) * 31.7);
  fill: #091818; }
.dl-callrow .bs { font-size: calc(var(--dp) * 22); color: #94A3B8; }
.dl-foot { text-align: center; font-size: calc(var(--dp) * 10); font-weight: 500;
  letter-spacing: calc(var(--dp) * 1.8); color: rgba(41,182,174,.35);
  padding: calc(var(--dp) * 10) 0 calc(var(--dp) * 12); }

@media (prefers-reduced-motion: reduce) {
}

/* ==========================================================================
   25. THE OVERLAY CARD
   What Wazi draws on top of your existing dialler when it is NOT your default
   phone app. Transcribed from CallerOverlayCard.kt: a 1dp gradient hairline
   around an 18dp card, a 3dp accent bar, an optional severity banner, then the
   identity row with end-call and dismiss controls.
   Accent per category (WaziTheme.kt): verified Teal500, spam Red500,
   lender Orange500, phonebook OnSurfaceSubtleDark.
   ========================================================================== */
.ov-stage { position: relative; height: 100%; }
/* The stock dialler carrying on underneath, dimmed. Wazi does not replace this
   screen when it is not your default phone app; it only draws over it. */
.ov-under { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; opacity: .3; }
.ov-under .k { font-size: calc(var(--dp) * 12); letter-spacing: calc(var(--dp) * 2.4);
  color: rgba(255,255,255,.55); margin-top: calc(var(--dp) * 112); }
.ov-under .n { font-size: calc(var(--dp) * 26); font-weight: 700; color: #fff;
  margin-top: calc(var(--dp) * 12); }
.ov-under .btns { display: flex; gap: calc(var(--dp) * 64); margin-top: auto;
  margin-bottom: calc(var(--dp) * 72); }
.ov-under .btns i { width: calc(var(--dp) * 64); height: calc(var(--dp) * 64);
  border-radius: 50%; display: grid; place-items: center; }
.ov-under .btns i::after { content: ''; width: calc(var(--dp) * 26);
  height: calc(var(--dp) * 26); background: #fff; display: block;
  -webkit-mask: var(--g) center/contain no-repeat; mask: var(--g) center/contain no-repeat; }
.ov-under .btns i.d { background: #E53935;
  --g: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 11h10v2H7z"/></svg>'); }
.ov-under .btns i.a { background: #43A047;
  --g: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.39 21 3 13.61 3 5c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.02z"/></svg>'); }
/* Wazi's card sits over the middle of the screen, directly under the number
   the dialler is showing, rather than up in the notification area. */
.ov-slot { position: absolute; left: 0; right: 0; top: calc(var(--dp) * 200); }

.ov-card { position: relative; margin: 0 calc(var(--dp) * 12); border-radius: calc(var(--dp) * 18);
  padding: 1px; }
.ov-card.teal  { background: linear-gradient(135deg, rgba(41,182,174,.6), rgba(41,182,174,.15), transparent); }
.ov-card.red   { background: linear-gradient(135deg, rgba(239,68,68,.6),  rgba(239,68,68,.15),  transparent); }
.ov-card.amber { background: linear-gradient(135deg, rgba(249,115,22,.6), rgba(249,115,22,.15), transparent); }
.ov-card.grey  { background: linear-gradient(135deg, rgba(148,163,184,.5), rgba(148,163,184,.12), transparent); }
.ov-in { border-radius: calc(var(--dp) * 17); background: rgba(16,36,36,.95); overflow: hidden; }
.ov-bar { height: calc(var(--dp) * 3); }
.ov-card.teal  .ov-bar { background: linear-gradient(90deg, transparent, #29B6AE, #29B6AE, transparent); }
.ov-card.red   .ov-bar { background: linear-gradient(90deg, transparent, #EF4444, #EF4444, transparent); }
.ov-card.amber .ov-bar { background: linear-gradient(90deg, transparent, #F97316, #F97316, transparent); }
.ov-card.grey  .ov-bar { background: linear-gradient(90deg, transparent, #94A3B8, #94A3B8, transparent); }

.ov-warn { display: flex; align-items: center; gap: calc(var(--dp) * 8);
  margin: calc(var(--dp) * 10) calc(var(--dp) * 14) 0; border-radius: calc(var(--dp) * 10);
  padding: calc(var(--dp) * 8) calc(var(--dp) * 12);
  font-size: calc(var(--dp) * 11); font-weight: 700; }
.ov-warn.red   { background: rgba(239,68,68,.12);  color: #EF4444; }
.ov-warn.amber { background: rgba(249,115,22,.12); color: #F97316; }

.ov-row { display: flex; align-items: center; padding: calc(var(--dp) * 12) calc(var(--dp) * 14); }
.ov-av { width: calc(var(--dp) * 48); height: calc(var(--dp) * 48); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 16); font-weight: 800; flex: 0 0 auto; }
.ov-card.teal  .ov-av { background: rgba(41,182,174,.15); color: #29B6AE; }
.ov-card.red   .ov-av { background: rgba(239,68,68,.15);  color: #EF4444; }
.ov-card.amber .ov-av { background: rgba(249,115,22,.15); color: #F97316; }
.ov-card.grey  .ov-av { background: rgba(148,163,184,.15); color: #94A3B8; }
.ov-av .ms { font-size: calc(var(--dp) * 22); }
.ov-mid { flex: 1; min-width: 0; margin-left: calc(var(--dp) * 12); }
.ov-nm { font-size: calc(var(--dp) * 16); font-weight: 700; color: #fff; }
.ov-no { font-size: calc(var(--dp) * 12); color: var(--w-sub); }
.ov-st { display: flex; align-items: center; gap: calc(var(--dp) * 6); margin-top: calc(var(--dp) * 3);
  font-size: calc(var(--dp) * 11); font-weight: 600; }
.ov-st i { width: calc(var(--dp) * 5); height: calc(var(--dp) * 5); border-radius: 50%; background: currentColor; }
.ov-card.teal  .ov-st { color: #29B6AE; }
.ov-card.red   .ov-st { color: #EF4444; }
.ov-card.amber .ov-st { color: #F97316; }
.ov-card.grey  .ov-st { color: #94A3B8; }
.ov-end { width: calc(var(--dp) * 36); height: calc(var(--dp) * 36); border-radius: 50%;
  background: #EF4444; display: grid; place-items: center; flex: 0 0 auto; }
.ov-end .ms { font-size: calc(var(--dp) * 18); color: #fff; }
.ov-x { width: calc(var(--dp) * 28); height: calc(var(--dp) * 28); border-radius: 50%;
  background: var(--w-outline); display: grid; place-items: center; flex: 0 0 auto;
  margin-left: calc(var(--dp) * 8); color: rgba(255,255,255,.7); font-size: calc(var(--dp) * 13); }
.ov-wm { text-align: right; font-size: calc(var(--dp) * 9); letter-spacing: calc(var(--dp) * 1.5);
  color: rgba(41,182,174,.45); padding: 0 calc(var(--dp) * 14) calc(var(--dp) * 8); }
.ov-note { font-size: calc(var(--dp) * 10); color: rgba(249,115,22,.8);
  padding: 0 calc(var(--dp) * 14) calc(var(--dp) * 8); }

/* ==========================================================================
   26. ICONOGRAPHY
   Inline SVG, stroked to a single weight, so the marketing side of the page
   stops relying on emoji (which render differently on every platform and read
   as placeholder). Emoji remains inside the phone frames only, because the app
   itself genuinely draws emoji there.
   ========================================================================== */
.i { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.i-lg { width: 26px; height: 26px; }
.card .ic .i { width: 24px; height: 24px; color: var(--brandLight); }
.card.accent-red   .ic .i { color: #fca5a5; }
.card.accent-amber .ic .i { color: #fcd34d; }
.card.accent-blue  .ic .i { color: #a3c6fd; }
.feature-copy .ic .i { color: var(--brandLight); }
.pflow-ic .i { width: 28px; height: 28px; color: var(--brandLight); }
.trust-icon .i { width: 38px; height: 38px; color: var(--brandLight); }
.step b .i { width: 20px; height: 20px; }

/* Brand marks are solid, not stroked */
.i-brand { width: 18px; height: 18px; fill: currentColor; stroke: none; display: block; }
.foot-social a { color: var(--muted); }
.foot-social a:hover { color: var(--brandLight); }

/* Section eyebrow icon */
.eyebrow .i { width: 15px; height: 15px; }

/* The step number on a section eyebrow.
   These sections used to be introduced as "First:", "Second:", "Fourth:" — words
   that read as prose, are easy to get out of order when a section moves, and give
   the eye nothing to count. A numeral is scanned, not read. */
.eyebrow .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: -4px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), var(--brandLight));
  color: #04201d;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ==========================================================================
   27. SATELLITE SCANNER
   A verbatim transcription of SatelliteScannerIllustration.kt. The Compose
   canvas is 320dp wide by 280dp tall, so the SVG viewBox is 320x280 and every
   number below is the dp value the app itself draws at.

   Geometry the app derives rather than hard-codes, resolved here:
     satellite scale  sx = x/300*320,  sy = y/210*280
     W watermark      canvas 320x192 pinned to the bottom, sizeRatio 0.9
                      -> scale 2.88, centre (160, 184)
     top nodes        TL 47.68,129.28   TM 160,129.28   TR 272.32,129.28
     bottom nodes     BL 102.4,232.96   BR 214.72,232.96
   The W has three bands only (TL->BL, BL->TM, TM->BR). TR floats unconnected.
   Beams converge on the dish stem at (160, 40) and land on the three top nodes.
   ========================================================================== */
/* Three layers, anchored the way the app's two Canvases are: the satellite
   rides the top of the slot (just under the IDENTIFYING chip), the W watermark
   is pinned to the bottom, and only the beams stretch between them. Widths are
   locked to the app's 320dp so every transcribed dp still reads 1:1. */
.sat { position: relative; width: 100%; height: 100%; }
.sat > svg { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100%, calc(var(--dp) * 320)); display: block; }
.sat-body { top: 0; height: calc(var(--dp) * 44); overflow: visible; }
.sat-beam { top: calc(var(--dp) * 40);
  height: calc(100% - var(--dp) * 190.72); }
.sat-w    { bottom: 0; height: calc(var(--dp) * 192); }
@keyframes sat-beam       { to { stroke-dashoffset: -11; } }
@keyframes sat-beam-ghost { to { stroke-dashoffset: -8.8; } }
@keyframes sat-impact     { from { opacity: .4; } to { opacity: 1; } }
@keyframes sat-blink {
  0%, 40.8% { opacity: 1; }
  45.8%, 55% { opacity: .1; }
  60%, 100% { opacity: 1; }
}
/* Offline: the beams break rather than travel, so nothing animates but the
   status light, which struggles on a 2.5s cycle instead of blinking cleanly. */
.sat.offline .blink { animation: sat-blink-slow 2.5s linear infinite; }
@keyframes sat-blink-slow {
  0%, 44% { opacity: .5; }
  52%, 60% { opacity: .15; }
  68%, 100% { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .sat .beam, .sat .beam-ghost, .sat .glow, .sat .blink { animation: none; }
}

/* Additions for the overlay variants overlay.py emits. */
.ov-card.plain { padding: 0; background: none; }
.ov-card.plain .ov-in { background: rgba(16,36,36,.95); border-radius: calc(var(--dp) * 18); }
.ov-av.plain { background: var(--w-outline); color: #fff; font-size: calc(var(--dp) * 20);
  width: calc(var(--dp) * 46); height: calc(var(--dp) * 46); }
.ov-nm.big { font-size: calc(var(--dp) * 19); }
.ov-foot { font-size: calc(var(--dp) * 11); font-style: italic;
  color: rgba(148,163,184,.7); margin-top: calc(var(--dp) * 2); }
.ov-line { display: flex; align-items: center; gap: calc(var(--dp) * 4);
  margin-top: calc(var(--dp) * 3); font-size: calc(var(--dp) * 10); }
.ov-line.teal { color: var(--w-brand); }
.ov-line.amber { color: var(--w-orange); }
.ov-line.slate { color: #64748B; }
/* Offline and other non-hazard states — mirrors WaziColors.StatusNeutral. Deliberately
   not amber: losing signal is not a risk, and colouring it like one teaches users to
   discount the colour that marks a suspected scam. */
.ov-line.neutral { color: #94A3B8; }
.ov-warn span { letter-spacing: calc(var(--dp) * .3); }
.ov-note { font-size: calc(var(--dp) * 10); line-height: calc(var(--dp) * 13);
  color: rgba(249,115,22,.8); margin-top: calc(var(--dp) * 2); padding: 0; }

/* A brand mark used as a card icon rather than a footer link. */
.card .ic .i-brand { width: 24px; height: 24px; color: var(--brandLight); }
.kpi .i { width: 22px; height: 22px; margin-right: 2px; }

/* ==========================================================================
   28. ONBOARDING ILLUSTRATIONS
   The seven onboarding pages do not use icon fonts; each draws a real
   composable. Transcribed from presentation/onboarding/:
     1 SUNRISE           CallScreenIllustration      (stock call card + Wazi card)
     2 SIGNAL_RINGS      PhoneRingIllustration       (two LiveDetectionCards)
     3 SHIELD_CHECK      CallerListIllustration      (three CallerResultCards)
     4 PHONE_FULLSCREEN  BeforeAfterIllustration     (two 118dp phones)
     5 OVERLAY_FLOAT     OverlayChatIllustration     (chat + floating card)
     6 BATTERY_ALWAYS_ON LockScreenShieldIllustration(110x170 lock screen)
     7 WAZI_MARK         WaziMarkIllustration        (glowing W + wordmark)
   Every page's accent is Teal500, so the values below are hard-coded to it.
   ========================================================================== */
.ob-art > * { width: 100%; }

/* The Twitter-style 12-peak verified seal (VerifiedSealBadge.kt), scalloped
   with quadratic segments rather than a plain circle. */
.seal { flex: 0 0 auto; }

/* 1 ── CallScreenIllustration ------------------------------------------- */
.ill1 { padding: 0 calc(var(--dp) * 20); }
.ill1 .stock { border-radius: calc(var(--dp) * 18); background: #0D1F1F;
  padding: calc(var(--dp) * 18) calc(var(--dp) * 16); text-align: center; }
.ill1 .stock .k { font-size: calc(var(--dp) * 12); letter-spacing: calc(var(--dp) * .4);
  color: rgba(41,182,174,.65); }
.ill1 .stock .n { font-size: calc(var(--dp) * 22); font-weight: 700; color: #fff;
  letter-spacing: calc(var(--dp) * -.5); margin-top: calc(var(--dp) * 6); }
.ill1 .stock .btns { display: flex; justify-content: space-evenly;
  margin-top: calc(var(--dp) * 20); }
.ill1 .stock .b { display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--dp) * 6); }
.ill1 .stock .b .c { width: calc(var(--dp) * 62); height: calc(var(--dp) * 62);
  border-radius: 50%; display: grid; place-items: center; }
.ill1 .stock .b .c svg { width: calc(var(--dp) * 28); height: calc(var(--dp) * 28); fill: #fff; }
.ill1 .stock .b.d .c { background: #E53935; }
.ill1 .stock .b.a .c { background: #43A047; }
.ill1 .stock .b .l { font-size: calc(var(--dp) * 11); color: rgba(255,255,255,.58); }

/* WaziCallCardPreview.kt, shared by pages 1 and 5 */
.wcard { position: relative; margin-top: calc(var(--dp) * 10);
  border-radius: calc(var(--dp) * 18); border: 1.5px solid rgba(41,182,174,.5);
  background: #102424; overflow: hidden; }
.wcard .bar { height: calc(var(--dp) * 2.5);
  background: linear-gradient(90deg, transparent, rgba(41,182,174,.9), rgba(41,182,174,.9), transparent); }
.wcard .row { display: flex; align-items: center;
  padding: calc(var(--dp) * 14); }
.wcard .av { width: calc(var(--dp) * 48); height: calc(var(--dp) * 48); border-radius: 50%;
  background: rgba(41,182,174,.22); border: 1px solid rgba(41,182,174,.55);
  display: grid; place-items: center; font-size: calc(var(--dp) * 14);
  font-weight: 700; color: var(--w-brand); flex: 0 0 auto; }
.wcard .gw { flex: 1; min-width: 0; margin-left: calc(var(--dp) * 12); }
.wcard .nm { font-size: calc(var(--dp) * 15); font-weight: 600; color: #fff; }
.wcard .nu { font-size: calc(var(--dp) * 12); color: rgba(255,255,255,.52);
  margin-top: calc(var(--dp) * 2); }
.wcard .vb { display: flex; align-items: center; gap: calc(var(--dp) * 5);
  margin-top: calc(var(--dp) * 5); font-size: calc(var(--dp) * 10); font-weight: 500;
  letter-spacing: calc(var(--dp) * .4); color: var(--w-brand); }
.wcard .cl { width: calc(var(--dp) * 30); height: calc(var(--dp) * 30); border-radius: 50%;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  font-size: calc(var(--dp) * 18); color: rgba(255,255,255,.5); flex: 0 0 auto; }
.wcard .wmk { position: absolute; right: calc(var(--dp) * 12); bottom: calc(var(--dp) * 7);
  font-size: calc(var(--dp) * 9); letter-spacing: calc(var(--dp) * 1);
  color: rgba(41,182,174,.38); }

/* 2 ── PhoneRingIllustration / LiveDetectionCard ------------------------ */
.ill2 { padding: 0 calc(var(--dp) * 20); display: flex; flex-direction: column;
  gap: calc(var(--dp) * 10); position: relative; }
.ill2::before, .ill2::after { content: ''; position: absolute; width: 120%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; }
.ill2::before { left: -32%; top: -30%;
  background: radial-gradient(circle, rgba(41,182,174,.13), transparent 70%); }
.ill2::after { right: -32%; bottom: -30%;
  background: radial-gradient(circle, rgba(249,115,22,.10), transparent 70%); }
.lcard { position: relative; border-radius: calc(var(--dp) * 18); background: #0C1E1C;
  overflow: hidden; }
.lcard.teal  { border: 1px solid rgba(41,182,174,.32); }
.lcard.amber { border: 1px solid rgba(249,115,22,.32); }
.lcard .bar { height: calc(var(--dp) * 2); }
.lcard.teal  .bar { background: linear-gradient(90deg, transparent, rgba(41,182,174,.85), rgba(41,182,174,.85), transparent); }
.lcard.amber .bar { background: linear-gradient(90deg, transparent, rgba(249,115,22,.85), rgba(249,115,22,.85), transparent); }
.lcard .row { display: flex; align-items: flex-start;
  padding: calc(var(--dp) * 18) calc(var(--dp) * 14) calc(var(--dp) * 16); }
.lcard .ic { width: calc(var(--dp) * 46); height: calc(var(--dp) * 46); border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto; }
.lcard .ic svg { width: calc(var(--dp) * 20); height: calc(var(--dp) * 20); }
.lcard.teal  .ic { background: rgba(41,182,174,.14); border: 1px solid rgba(41,182,174,.38); fill: #29B6AE; }
.lcard.amber .ic { background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.38); fill: #F97316; }
.lcard .gw { flex: 1; min-width: 0; margin-left: calc(var(--dp) * 13); }
.lcard .ch { font-size: calc(var(--dp) * 9); font-weight: 600;
  letter-spacing: calc(var(--dp) * .9); }
.lcard.teal  .ch { color: rgba(41,182,174,.55); }
.lcard.amber .ch { color: rgba(249,115,22,.55); }
.lcard .nm { font-size: calc(var(--dp) * 15); font-weight: 600; color: #fff;
  margin-top: calc(var(--dp) * 4); }
.lcard .nu { font-size: calc(var(--dp) * 11); color: rgba(255,255,255,.4);
  margin-top: calc(var(--dp) * 2); }
.lcard .pv { font-size: calc(var(--dp) * 11); line-height: calc(var(--dp) * 15);
  color: rgba(255,255,255,.36); margin-top: calc(var(--dp) * 5); }
.lcard .bd { display: flex; align-items: center; gap: calc(var(--dp) * 4);
  margin-top: calc(var(--dp) * 9); font-size: calc(var(--dp) * 9); font-weight: 700;
  letter-spacing: calc(var(--dp) * .7); }
.lcard .bd .dot { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6);
  border-radius: 50%; background: currentColor; }
.lcard.teal  .bd { color: var(--w-brand); }
.lcard.amber .bd { color: var(--w-orange); }
.lcard .wmk { font-size: calc(var(--dp) * 8); letter-spacing: calc(var(--dp) * .8);
  flex: 0 0 auto; }
.lcard.teal  .wmk { color: rgba(41,182,174,.22); }
.lcard.amber .wmk { color: rgba(249,115,22,.22); }

/* 3 ── CallerListIllustration / CallerResultCard ------------------------ */
.ill3 { padding: 0 calc(var(--dp) * 18); display: flex; flex-direction: column;
  gap: calc(var(--dp) * 9); }
.rcard { position: relative; border-radius: calc(var(--dp) * 14); background: #0F2020;
  overflow: hidden; }
.rcard.teal  { border: 1px solid rgba(41,182,174,.32); }
.rcard.red   { border: 1px solid rgba(239,68,68,.32); }
.rcard.amber { border: 1px solid rgba(249,115,22,.32); }
.rcard .bar { height: calc(var(--dp) * 2); }
.rcard.teal  .bar { background: linear-gradient(90deg, transparent, rgba(41,182,174,.7), rgba(41,182,174,.7), transparent); }
.rcard.red   .bar { background: linear-gradient(90deg, transparent, rgba(239,68,68,.7), rgba(239,68,68,.7), transparent); }
.rcard.amber .bar { background: linear-gradient(90deg, transparent, rgba(249,115,22,.7), rgba(249,115,22,.7), transparent); }
.rcard .row { display: flex; align-items: center;
  padding: calc(var(--dp) * 11) calc(var(--dp) * 12); }
.rcard .av { width: calc(var(--dp) * 42); height: calc(var(--dp) * 42); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 13); font-weight: 700;
  flex: 0 0 auto; }
.rcard.teal  .av { background: rgba(41,182,174,.18); border: 1px solid rgba(41,182,174,.45); color: var(--w-brand); }
.rcard.red   .av { background: rgba(239,68,68,.18);  border: 1px solid rgba(239,68,68,.45);  color: var(--w-red); }
.rcard.amber .av { background: rgba(249,115,22,.18); border: 1px solid rgba(249,115,22,.45); color: var(--w-orange); }
.rcard .gw { flex: 1; min-width: 0; margin-left: calc(var(--dp) * 12); }
.rcard .nm { font-size: calc(var(--dp) * 13); font-weight: 600; color: #fff; }
.rcard .nu { font-size: calc(var(--dp) * 10); color: rgba(255,255,255,.42);
  margin-top: calc(var(--dp) * 2); }
.rcard .msg { font-size: calc(var(--dp) * 10); line-height: calc(var(--dp) * 14);
  color: rgba(255,255,255,.35); margin-top: calc(var(--dp) * 4); }
.rcard .bd { display: flex; align-items: center; gap: calc(var(--dp) * 4);
  margin-top: calc(var(--dp) * 5); font-size: calc(var(--dp) * 9); font-weight: 600;
  letter-spacing: calc(var(--dp) * .5); }
.rcard .bd .dot { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6);
  border-radius: 50%; background: currentColor; }
.rcard.teal  .bd { color: var(--w-brand); }
.rcard.red   .bd { color: var(--w-red); }
.rcard.amber .bd { color: var(--w-orange); }
.rcard .wmk { font-size: calc(var(--dp) * 9); letter-spacing: calc(var(--dp) * .8);
  flex: 0 0 auto; }
.rcard.teal  .wmk { color: rgba(41,182,174,.32); }
.rcard.red   .wmk { color: rgba(239,68,68,.32); }
.rcard.amber .wmk { color: rgba(249,115,22,.32); }

/* 4 ── BeforeAfterIllustration ----------------------------------------- */
.ill4 { display: flex; align-items: center; justify-content: center;
  gap: calc(var(--dp) * 14); }
.ill4 .arrow { color: rgba(41,182,174,.55); font-size: calc(var(--dp) * 18); font-weight: 700; }
.ill4 .col { display: flex; flex-direction: column; align-items: center; }
.ill4 .cap { margin-top: calc(var(--dp) * 7); font-size: calc(var(--dp) * 9); }
.ill4 .col.old .cap { color: rgba(255,255,255,.26); }
.ill4 .col.new .cap { color: rgba(41,182,174,.75); font-weight: 600; }
.mini { width: calc(var(--dp) * 118); height: calc(var(--dp) * 210);
  border-radius: calc(var(--dp) * 22); overflow: hidden; display: flex;
  flex-direction: column; align-items: center; position: relative; }
.mini.old { border: 1px solid rgba(255,255,255,.1); background: #1A1A1A; }
.mini.new { border: 1.5px solid rgba(41,182,174,.62); background: #0C1E1E; }
.mini.new .bar { position: absolute; inset: 0 0 auto; height: calc(var(--dp) * 2);
  background: linear-gradient(90deg, transparent, rgba(41,182,174,.9), rgba(41,182,174,.9), transparent); }
.mini .sb { width: 100%; height: calc(var(--dp) * 20); display: grid; place-items: center; }
.mini.old .sb { background: #141414; }
.mini.new .sb { background: #091414; }
.mini .sb i { width: calc(var(--dp) * 22); height: calc(var(--dp) * 3);
  border-radius: calc(var(--dp) * 2); display: block; }
.mini.old .sb i { background: #2A2A2A; }
.mini.new .sb i { background: rgba(41,182,174,.22); }
.mini .k { margin-top: calc(var(--dp) * 14); font-size: calc(var(--dp) * 9);
  letter-spacing: calc(var(--dp) * .3); }
.mini.old .k { color: rgba(255,255,255,.35); }
.mini.new .k { color: rgba(41,182,174,.52); }
.mini .av { margin-top: calc(var(--dp) * 12); width: calc(var(--dp) * 44);
  height: calc(var(--dp) * 44); border-radius: 50%; display: grid; place-items: center; }
.mini.old .av { background: #2D2D2D; border: 1px solid rgba(255,255,255,.08); }
.mini.old .av svg { width: calc(var(--dp) * 22); height: calc(var(--dp) * 22); }
.mini.new .av { background: rgba(41,182,174,.2); border: 1.5px solid rgba(41,182,174,.58);
  font-size: calc(var(--dp) * 14); font-weight: 700; color: var(--w-brand); }
.mini .nm { margin-top: calc(var(--dp) * 9); font-size: calc(var(--dp) * 10);
  font-weight: 600; color: #fff; }
.mini .nu { font-size: calc(var(--dp) * 8); color: rgba(255,255,255,.42);
  margin-top: calc(var(--dp) * 2); }
.mini.old .nu { font-size: calc(var(--dp) * 9); color: rgba(255,255,255,.6);
  font-weight: 500; margin-top: calc(var(--dp) * 9); }
.mini .blank { margin-top: calc(var(--dp) * 6); width: calc(var(--dp) * 62);
  height: calc(var(--dp) * 3); border-radius: calc(var(--dp) * 2);
  background: rgba(255,255,255,.06); }
.mini .vb { margin-top: calc(var(--dp) * 7); display: inline-flex; align-items: center;
  gap: calc(var(--dp) * 3); border-radius: calc(var(--dp) * 6);
  background: rgba(41,182,174,.16); border: .5px solid rgba(41,182,174,.42);
  padding: calc(var(--dp) * 3) calc(var(--dp) * 6); font-size: calc(var(--dp) * 7);
  font-weight: 600; letter-spacing: calc(var(--dp) * .4); color: var(--w-brand); }
.mini .btns { margin-top: auto; width: 100%; display: flex;
  justify-content: space-between; padding: 0 calc(var(--dp) * 20) calc(var(--dp) * 15); }
.mini .btns i { width: calc(var(--dp) * 38); height: calc(var(--dp) * 38);
  border-radius: 50%; display: grid; place-items: center; }
.mini .btns i svg { width: calc(var(--dp) * 18); height: calc(var(--dp) * 18); }
.mini.old .btns i.d { background: #3D1414; } .mini.old .btns i.a { background: #1A3520; }
.mini.old .btns i svg { fill: rgba(255,255,255,.55); }
.mini.new .btns i.d { background: rgba(239,68,68,.88); }
.mini.new .btns i.a { background: rgba(67,160,71,.88); }
.mini.new .btns i svg { fill: #fff; }

/* 5 ── OverlayChatIllustration ----------------------------------------- */
.ill5 { position: relative; height: 100%; }
.ill5 .chat { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; gap: calc(var(--dp) * 6);
  padding: calc(var(--dp) * 56) calc(var(--dp) * 22) calc(var(--dp) * 32); }
.ill5 .bub { max-width: calc(var(--dp) * 180); padding: calc(var(--dp) * 7) calc(var(--dp) * 11);
  font-size: calc(var(--dp) * 11); line-height: calc(var(--dp) * 16);
  color: rgba(255,255,255,.65); }
.ill5 .bub.in  { align-self: flex-start; background: #1C2D2D;
  border-radius: calc(var(--dp)*12) calc(var(--dp)*12) calc(var(--dp)*12) calc(var(--dp)*2); }
.ill5 .bub.out { align-self: flex-end; background: rgba(41,182,174,.22);
  border-radius: calc(var(--dp)*12) calc(var(--dp)*12) calc(var(--dp)*2) calc(var(--dp)*12); }
.ill5 .scrim { position: absolute; inset: 0 0 auto; height: calc(var(--dp) * 130);
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.ill5 .float { position: absolute; inset: calc(var(--dp) * 26) calc(var(--dp) * 16) auto; }
.ill5 .float .wcard { margin-top: 0; }

/* 6 ── LockScreenShieldIllustration ------------------------------------ */
.ill6 { display: grid; place-items: center; }
.lock { width: calc(var(--dp) * 110); height: calc(var(--dp) * 170);
  border-radius: calc(var(--dp) * 20); border: 1.5px solid rgba(41,182,174,.28);
  background: #0A1A1A; display: flex; flex-direction: column; align-items: center;
  justify-content: center; }
.lock .notch { width: calc(var(--dp) * 24); height: calc(var(--dp) * 3);
  border-radius: calc(var(--dp) * 2); background: rgba(41,182,174,.25); }
.lock .padlock { margin-top: calc(var(--dp) * 14); width: calc(var(--dp) * 18);
  height: calc(var(--dp) * 18); }
.lock .tm { margin-top: calc(var(--dp) * 8); font-size: calc(var(--dp) * 28);
  font-weight: 300; letter-spacing: calc(var(--dp) * 1); color: #fff; }
.lock .am { font-size: calc(var(--dp) * 9); letter-spacing: calc(var(--dp) * 1);
  color: rgba(255,255,255,.35); }
.lock .pill { margin-top: calc(var(--dp) * 18); display: inline-flex; align-items: center;
  gap: calc(var(--dp) * 5); border-radius: calc(var(--dp) * 20);
  background: rgba(41,182,174,.14); border: 1px solid rgba(41,182,174,.32);
  padding: calc(var(--dp) * 5) calc(var(--dp) * 10); font-size: calc(var(--dp) * 8);
  font-weight: 600; letter-spacing: calc(var(--dp) * .3); color: var(--w-brand); }
.lock .pill i { width: calc(var(--dp) * 6); height: calc(var(--dp) * 6);
  border-radius: 50%; background: currentColor; }

/* 7 ── WaziMarkIllustration -------------------------------------------- */
.ill7 { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ill7 .mk { width: 55%; aspect-ratio: 160 / 96; position: relative;
  display: grid; place-items: center; }
.ill7 .mk::before { content: ''; position: absolute; width: 150%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,182,174,.3), transparent 70%); }
.ill7 .mk svg { width: 82%; position: relative; }
.ill7 .wm { margin-top: calc(var(--dp) * 8); font-size: calc(var(--dp) * 11);
  font-weight: 900; letter-spacing: calc(var(--dp) * 4); color: rgba(41,182,174,.8); }

/* ==========================================================================
   29. NUMBER LOOKUP RESULT
   NumberSearchBar.kt. The result stack under the search field: an identity row
   tinted by the caller's category, an optional "look up on network" prompt for
   saved contacts, an optional reputation card with a confidence bar, and the
   quick-action strip. Empty states are one plain sentence, never a guess.
   ========================================================================== */
.lk-body { padding: 0 calc(var(--dp) * 18); display: flex; flex-direction: column;
  gap: calc(var(--dp) * 8); }
.lk-q { flex: 1; font-size: calc(var(--dp) * 15); color: #fff; }
.lk-clr { color: var(--w-sub); font-size: calc(var(--dp) * 13); }

.lk-res { display: flex; align-items: center; gap: calc(var(--dp) * 10);
  border-radius: calc(var(--dp) * 12); padding: calc(var(--dp) * 12); }
.lk-res .av { width: calc(var(--dp) * 40); height: calc(var(--dp) * 40); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--dp) * 18); font-weight: 700;
  flex: 0 0 auto; }
.lk-res .gw { flex: 1; min-width: 0; }
.lk-res .nm { font-size: calc(var(--dp) * 16); font-weight: 700; color: #fff; }
.lk-res .sub { display: flex; align-items: center; gap: calc(var(--dp) * 8);
  font-size: calc(var(--dp) * 12); color: var(--w-sub); }
.lk-res .rv { font-size: calc(var(--dp) * 11); font-weight: 700; color: var(--w-brand); }
.lk-res .lb { font-size: calc(var(--dp) * 12); font-weight: 600;
  margin-top: calc(var(--dp) * 2); }
.lk-res.teal  { background: rgba(41,182,174,.1); border: 1px solid rgba(41,182,174,.3); }
.lk-res.teal  .av { background: rgba(41,182,174,.2); color: var(--w-brand); }
.lk-res.teal  .lb { color: var(--w-brand); }
.lk-res.red   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3); }
.lk-res.red   .av { background: rgba(239,68,68,.2); color: var(--w-red); }
.lk-res.red   .lb { color: var(--w-red); }
.lk-res.amber { background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.3); }
.lk-res.amber .av { background: rgba(249,115,22,.2); color: var(--w-orange); }
.lk-res.amber .lb { color: var(--w-orange); }

.lk-net { display: flex; align-items: center; gap: calc(var(--dp) * 8);
  border-radius: calc(var(--dp) * 12); background: var(--w-elev);
  border: 1px solid rgba(41,182,174,.3);
  padding: calc(var(--dp) * 11) calc(var(--dp) * 14); color: var(--w-brand); }
.lk-net .gw { flex: 1; }
.lk-net .t { font-size: calc(var(--dp) * 13); font-weight: 600; color: var(--w-brand); }
.lk-net .d { font-size: calc(var(--dp) * 11); color: var(--w-sub); }

.lk-rep { border-radius: calc(var(--dp) * 12); padding: calc(var(--dp) * 12);
  display: flex; flex-direction: column; gap: calc(var(--dp) * 8); }
.lk-rep.red   { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.28); }
.lk-rep.amber { background: rgba(249,115,22,.07); border: 1px solid rgba(249,115,22,.28); }
.lk-rep .top { display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--dp) * 10); }
.lk-rep .t { font-size: calc(var(--dp) * 13); font-weight: 700; }
.lk-rep.red   .t { color: var(--w-red); }
.lk-rep.amber .t { color: var(--w-orange); }
.lk-rep .d { font-size: calc(var(--dp) * 11); color: var(--w-sub); }
.lk-rep .chip { font-size: calc(var(--dp) * 10); font-weight: 700; flex: 0 0 auto;
  border-radius: calc(var(--dp) * 6); padding: calc(var(--dp) * 3) calc(var(--dp) * 8); }
.lk-rep.red   .chip { color: var(--w-red);   background: rgba(239,68,68,.15);  border: 1px solid rgba(239,68,68,.35); }
.lk-rep.amber .chip { color: var(--w-orange); background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.35); }
.lk-rep .track { height: calc(var(--dp) * 5); border-radius: calc(var(--dp) * 3);
  background: var(--w-elev); overflow: hidden; }
.lk-rep .track i { display: block; height: 100%; border-radius: calc(var(--dp) * 3); }
.lk-rep.red   .track i { background: linear-gradient(90deg, #F97316, #EF4444); }
.lk-rep.amber .track i { background: linear-gradient(90deg, #F97316, #F97316); }
.lk-rep .rep { font-size: calc(var(--dp) * 11); font-weight: 500;
  text-decoration: underline; }
.lk-rep.red   .rep { color: rgba(239,68,68,.8); }
.lk-rep.amber .rep { color: rgba(249,115,22,.8); }

.lk-acts { border-radius: calc(var(--dp) * 12); background: var(--w-elev);
  border: 1px solid var(--w-outline); overflow: hidden; }
.lk-acts .row { display: flex; align-items: center; gap: calc(var(--dp) * 14);
  padding: calc(var(--dp) * 13) calc(var(--dp) * 16); font-size: calc(var(--dp) * 14);
  font-weight: 500; }
.lk-acts .row + .row { border-top: .5px solid var(--w-outline); }
.lk-acts .row.teal  { color: var(--w-brand); }
.lk-acts .row.white { color: #fff; }
.lk-acts .row.red   { color: var(--w-red); }
.lk-acts .row.amber { color: var(--w-orange); }
.lk-acts .row.brand { color: var(--w-brand); }

.lk-none { display: flex; align-items: center; gap: calc(var(--dp) * 10);
  border-radius: calc(var(--dp) * 12); background: var(--w-outline);
  padding: calc(var(--dp) * 12); font-size: calc(var(--dp) * 14); color: var(--w-sub); }

/* The keypad is bottom-pinned; this soaks up whatever is left above it. */
.dl-fill { flex: 1; min-height: 0; }
.sp10 { height: calc(var(--dp) * 10); }

/* ── Small screens: nothing may sit outside the viewport ──────────────────────
   A horizontal reveal offset pushes a section past the right edge for the whole
   of its animation. On a desktop there is slack either side; on a 360px phone
   there is none, and body's overflow-x: hidden turns it into content clipped at
   the edge rather than a scrollbar — which is the version nobody reports because
   it does not look like a bug. Vertical motion reads the same and cannot
   overflow. Placed last so it wins on source order, not by shouting. */
/* 940px, matching .split's own breakpoint: the horizontal offsets are only
   safe while the layout still has two columns to slide between. */
@media (max-width: 940px) {
  .reveal-left, .reveal-right { transform: translateY(18px); }
  .carousel-dots button { width: 22px; }
  .carousel-dots button.on { width: 34px; }
}

/* ── Mid-range phones: stop paying for effects they cannot afford ────────────
   Reported on a Galaxy A34: the home page was slow to open and its carousels
   stuttered. The page carries ~2,500 nodes and 31 device mock-ups, and three
   things were making a mid-range GPU redraw far more than it needed to.

   1. The reveal animation transitions `filter: blur()`. Animating a blur means
      re-rasterising the element every frame, for 58 elements on this page. The
      fade and the 18px lift read the same and cost almost nothing.

   2. backdrop-filter blurs everything behind an element, continuously, and is
      one of the most expensive properties on Android GPUs. Seven of them sit on
      surfaces that are already near-opaque, so the difference is invisible while
      the cost is not.

   A third change — content-visibility: auto on the sections below the fold —
   was tried twice and is deliberately absent. It is the largest saving on offer
   (load fell from 2.1s to 1.2s in the same harness) but it breaks in-page
   anchors: the browser scrolls using contain-intrinsic-size placeholders, then
   the real heights arrive and the target has moved. Measured, landing on
   #features from a fresh load:

       deployed build ................ 4622px off  (already wrong)
       these changes ...................  52px off  (correct)
       these changes + content-visibility  7917px off

   The nav is entirely anchor links, so that is not a trade worth 900ms. It
   could return if every section carried an accurate per-breakpoint intrinsic
   size, or if the anchors were re-resolved after layout settles.
*/
@media (max-width: 940px) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { filter: none; }
  .reveal.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in { filter: none; }

  .nav, .btn-ghost, .eyebrow, .mobile-cta, .drawer, .w-banner { backdrop-filter: none; }
}

/* ── Stop paying for motion nobody is looking at ─────────────────────────────
   There are 17 infinite CSS animations on this site — ringing handsets, sweeping
   scanners, blinking dots, drifting glows — and they run whether or not their
   slide is the one on screen. `visibility: hidden` stops an inactive slide being
   painted, but its animations keep ticking, and with 31 mock-ups across four
   carousels that is a great deal of timeline for a phone to keep warm.

   Pausing them inside inactive slides is safe: a slide that becomes active has
   its animations resume from where they paused, which nobody can tell from a
   fresh start, and the fade between slides is on the slide itself rather than
   its children, so the transition is untouched. */
.hero-slide:not(.on) *,
.hero-slide:not(.on)::before,
.hero-slide:not(.on)::after { animation-play-state: paused; }

/* Phone-frame shadows are 96-110px of blur across a large box, which is one of
   the more expensive things a mobile GPU can be asked to rasterise, and at that
   size the difference between the two is barely perceptible on a small screen. */
@media (max-width: 940px) {
  .phone, .hero-device .phone { box-shadow: 0 12px 32px rgba(0,0,0,.55); }
}