/* ============================================================
   ZAPP HOMEPAGE v2 - "Electric Minimal", Zapp brand language
   DIRECTION : light trust-first minimal, one electric accent
   PALETTE   : bg #f3f6fd - ink #0a1f3d - accent #1a6ef5
   WOW       : the hero bar (typewriter stories + voice + glow)
   ============================================================ */
.zh,.zh *,.zh *::before,.zh *::after{box-sizing:border-box;margin:0;padding:0}
.zh{
  --bg:transparent;
  --surface:#ffffff;
  --ink:#0a1f3d;
  --muted:rgba(10,31,61,.58);
  --faint:rgba(10,31,61,.38);
  --accent:#1a6ef5;
  --accent-deep:#0d5fe3;
  --accent-soft:#e7efff;
  --good:#0e8a4f;
  --good-soft:#e3f6ec;
  --line:rgba(10,31,61,.09);
  /* glass tokens: panels are tinted air, not white boxes */
  --glass:rgba(255,255,255,.5);
  --glass-hi:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.75);
  --glass-ring:0 0 0 1px rgba(10,31,61,.05);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(10,31,61,.045), 0 14px 34px rgba(10,31,61,.05);
  --blur:saturate(1.4) blur(16px);
  --font-display:'Bricolage Grotesque','Manrope',sans-serif;
  --font-body:'Manrope','Segoe UI',-apple-system,sans-serif;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --radius:18px;
}
html{scroll-behavior:smooth}
/* The Elementor widget this page sits in carries margin:0 -50px, left over from
   the old full-bleed HTML paste. Those margins push the document 100px wider
   than the viewport (40px of it visible on desktop, all of it on a phone), so
   neutralise them: this layout manages its own width and full-bleed sections. */
/* Break the widget out to the full viewport width. The dark compare band, the
   how-it-works band and the ticker are designed to run edge to edge; inside an
   Elementor column they stop at the column and leave a strip of page background
   down each side. The old widget had a hardcoded margin:0 -50px for this, which
   overflowed the page by a fixed 100px at every width. This does it in terms of
   the viewport instead, minus the scrollbar (--zh-sbw, measured in JS), so it
   lands exactly on the edges and never creates a horizontal scrollbar. Sections
   keep their own inner padding, so text never touches the glass. */
.elementor-widget-container:has(> .zh),
.elementor-widget-container:has(> .elementor-shortcode > .zh),
.elementor-shortcode:has(> .zh){
  margin-left:calc(50% - 50vw + (var(--zh-sbw, 0px) / 2)) !important;
  margin-right:calc(50% - 50vw + (var(--zh-sbw, 0px) / 2)) !important;
  width:calc(100vw - var(--zh-sbw, 0px));
  max-width:none;
}

/* the widget paints NOTHING behind itself - the page's own background shows
   through every section. Only the components carry a surface. */
.zh{
  background:transparent;color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  overflow-x:clip;
}
.zh ::selection{background:var(--accent);color:#fff}
.zh img{max-width:100%;display:block}
.zh a{color:inherit}
/* Astra colours headings explicitly, which made the h3s inside the dark compare
   section render near-black on navy (1.08:1 contrast). Every heading in here is
   meant to take the colour of the section it sits in. */
.zh h1,.zh h2,.zh h3,.zh h4,.zh h5,.zh h6{color:inherit}
.zh button{font-family:inherit}
/* Astra ships `a:focus{outline:dotted thin}` (0,1,1). It fires on MOUSE clicks,
   where :focus-visible does not match, so a dotted box appeared around whatever
   you last clicked - the navigator rail especially. Suppress the legacy ring and
   keep a proper one for keyboard users, who are the ones who actually need it. */
.zh a:focus,.zh button:focus,.zh summary:focus{outline:none}
.zh :focus-visible,
.zh a:focus-visible,.zh button:focus-visible,.zh summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:200;transition:width .1s linear}


/* hero entrance */
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js-anim .hero>.news-pill{animation:heroin .7s var(--ease-expo) .05s both}
.js-anim .hero>h1{animation:heroin .8s var(--ease-expo) .16s both}
.js-anim .hero>.hero-sub{animation:heroin .8s var(--ease-expo) .28s both}
.js-anim .hero>.bar-wrap{animation:heroin .85s var(--ease-expo) .4s both}
.js-anim .pen-start{animation:heroin .8s var(--ease-expo) .55s both}
.js-anim .hero>.price-pitch{animation:heroin .8s var(--ease-expo) .55s both}
.js-anim .hero>.proof{animation:heroin .8s var(--ease-expo) .68s both}
.js-anim .hero>.hero-visual{animation:heroin .9s var(--ease-expo) .8s both}
@media(prefers-reduced-motion:reduce){.js-anim .hero>*{animation:none !important}}

/* ---------- news kicker ---------- */
.news-pill{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  margin-bottom:16px;
  font-size:13.5px;font-weight:600;color:rgba(10,31,61,.72);line-height:1.5;
}
.news-pill .np-tag{
  background:linear-gradient(135deg,#2a7cf7,var(--accent-deep));color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;transform:rotate(-2deg);white-space:nowrap;
  box-shadow:0 3px 8px rgba(26,110,245,.3);
}
.news-pill b{color:var(--accent-deep);font-weight:800}
.news-pill .wink{
  width:16px;height:16px;color:var(--accent);vertical-align:-3px;margin-left:2px;
  display:inline-block;animation:winktilt 3.2s ease-in-out infinite;
}
.news-pill .wk-open{animation:winkopen 3.2s ease-in-out infinite}
.news-pill .wk-shut{opacity:0;animation:winkshut 3.2s ease-in-out infinite}
@keyframes winkopen{0%,74%,94%,100%{opacity:1}78%,90%{opacity:0}}
@keyframes winkshut{0%,74%,94%,100%{opacity:0}78%,90%{opacity:1}}
@keyframes winktilt{0%,74%,94%,100%{transform:rotate(0)}80%,88%{transform:rotate(-10deg)}}
@media(prefers-reduced-motion:reduce){
  .news-pill .wink{animation:none}
  .news-pill .wk-open{animation:none;opacity:0}
  .news-pill .wk-shut{animation:none;opacity:1}
}
@media(max-width:560px){.news-pill{font-size:11px;padding:5px 12px;gap:6px;max-width:94%}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(40px,7vh,84px) clamp(20px,4.5vw,40px) clamp(40px,6vw,70px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero>*{position:relative}
.zh h1{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,7.5vw,4.6rem);
  font-weight:800;line-height:1.02;letter-spacing:-.03em;
  max-width:17ch;text-wrap:balance;margin-bottom:14px;
}
h1 .hl{
  color:var(--accent);
  background:linear-gradient(transparent 68%,rgba(26,110,245,.13) 68% 94%,transparent 94%);
  border-radius:4px;
}
.hero-sub{
  font-size:clamp(14px,3.75vw,18px);color:var(--muted);
  max-width:60ch;margin-bottom:30px;font-weight:500;line-height:1.55;
}

/* ---------- THE BAR ---------- */
.bar-wrap{position:relative;width:100%;max-width:680px}
.bar{
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding:12px 14px;border-radius:20px;
  background-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 40px rgba(26,110,245,.13),0 2px 8px rgba(10,31,61,.05);
  transition:box-shadow .25s;
}
/* the live border: a 2px gradient ring, masked so the fill stays clear glass */
.bar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(110deg,#2563eb,#7c3aed 30%,#22d3ee 50%,#7c3aed 70%,#2563eb);
  background-size:220% 100%;background-position:0% 50%;
  animation:ringflow 5s ease-in-out infinite alternate;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@keyframes ringflow{from{background-position:0% 50%}to{background-position:100% 50%}}
.bar:focus-within{box-shadow:0 0 0 6px rgba(26,110,245,.10),0 16px 44px rgba(26,110,245,.20)}
.bar.drag{box-shadow:0 0 0 6px rgba(26,110,245,.18),0 16px 44px rgba(26,110,245,.24)}
.bar.drag::after{content:"drop your proof here";position:absolute;inset:0;border-radius:inherit;
  display:grid;place-items:center;background:rgba(231,239,255,.86);
  font-size:13.5px;font-weight:800;color:var(--accent-deep);pointer-events:none;z-index:3}
.bar-top{display:flex;align-items:center;gap:8px;padding:2px 4px 0}
.bar-actions{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:8px}
.bar-actions .send{margin-left:auto}
@keyframes borderflow{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
.bar .spark{flex:none;width:22px;height:22px;color:var(--accent)}
.bar input,.bar textarea{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--ink);
  padding:12px 2px;line-height:1.45;
}
.bar textarea{resize:none;overflow-y:auto;max-height:132px;display:block;scrollbar-width:none}
.bar textarea::-webkit-scrollbar{display:none}
.bar input::placeholder,.bar textarea::placeholder{color:#7c8aa6;font-weight:500}
.bar .mic,.bar .send{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;border-radius:14px;
}
.bar .mic{
  width:48px;height:48px;background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(26,110,245,.28);transition:background .15s;
}
.bar .mic:hover{background:#dbe8ff}
.bar .mic.on{background:#e11d48;color:#fff;border-color:#e11d48;animation:micpulse 1.2s ease infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}70%{box-shadow:0 0 0 10px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.bar .mic svg,.bar .send svg{width:20px;height:20px}
.bar .send{
  height:48px;padding:0 22px;gap:8px;color:#fff;font-size:15px;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(135deg,#2a7cf7,var(--accent) 55%,var(--accent-deep));
  box-shadow:0 6px 18px rgba(26,110,245,.35);
  transition:transform .25s var(--ease-back),box-shadow .2s;
}
.bar .send:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,110,245,.45)}
.bar .send span{white-space:nowrap}
.bar .send .st-short{display:none}
@media(max-width:560px){
  .bar .send .st-full{display:none}
  .bar .send .st-short{display:inline}
  .bar .send{padding:0 16px}
}

/* attach-proof button in the bar's action row */
.attach-pill{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;height:48px;
  font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--accent-deep);
  background:var(--surface);border:1.5px dashed rgba(26,110,245,.45);border-radius:14px;
  padding:0 14px;transition:background .15s,border-color .15s;
}
.attach-pill:hover{background:var(--accent-soft);border-color:var(--accent)}
.attach-pill svg{width:15px;height:15px;flex:none}
.attach-pill small{font-weight:600;color:var(--muted)}
.attach-pill span{white-space:nowrap}
.attach-pill .ap-short{display:none}
/* smallest phones: the row is only ~260px wide, so the label goes short */
@media(max-width:370px){
  .attach-pill{padding:0 12px;gap:6px}
  .attach-pill .ap-full{display:none}
  .attach-pill .ap-short{display:inline}
}
@media(max-width:700px){.attach-pill small{display:none}}
@media(max-width:560px){.attach-pill{height:42px;padding:0 11px;font-size:12.5px}}

.lang-note{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:11px;
  font-size:12.5px;color:var(--muted);font-weight:700}
.lang-note svg{width:14px;height:14px;color:var(--accent)}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.chip{
  font-size:13px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:8px 14px;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s,transform .25s var(--ease-back);
}
.chip{box-shadow:0 1px 2px rgba(10,31,61,.05)}
.chip:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,110,245,.12)}
.chip:active,.bar .send:active,.attach-pill:active{transform:scale(.97)}
@media(max-width:640px){
  .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 4px 8px;margin-left:-4px;margin-right:-4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
}

/* Rs299 line */
.price-pitch{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:6px}
.price-main{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,3.4vw,26px);
}
.price-main .rs{color:var(--accent);font-size:1.25em}
.price-sub{font-size:13.5px;color:var(--muted);font-weight:600}
.price-sub s{color:var(--faint)}
.price-sub b{color:var(--good)}

/* proof strip */
.proof{
  display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:26px;font-size:13px;font-weight:700;color:var(--muted);
}
.proof .p{display:inline-flex;align-items:center;gap:7px}
.proof svg{width:15px;height:15px;color:var(--accent)}
.proof .stars{color:#f5a623;letter-spacing:1px;font-size:12px}

/* ---------- image slots (replace with generated images) ---------- */
.img-slot{
  position:relative;width:100%;border-radius:var(--radius);
  border:2px dashed rgba(26,110,245,.35);background:rgba(26,110,245,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--accent-deep);text-align:center;padding:18px;overflow:hidden;
}
.img-slot .tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.img-slot .hint{font-size:12px;color:var(--muted);font-weight:500;max-width:34ch}
.img-slot svg{width:26px;height:26px;opacity:.7}

/* hero visual */
.hero-visual{width:100%;max-width:680px;margin-top:36px}
.hero-visual .img-slot{aspect-ratio:16/9}
@media(min-width:900px){.hero-visual .img-slot{aspect-ratio:21/9}}




/* ---------- influencer reels carousel ---------- */
.reels-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:10px 4px 20px;margin:clamp(24px,4vw,40px) -4px 0;scrollbar-width:none}
.reels-track::-webkit-scrollbar{display:none}
.reel{
  flex:0 0 auto;width:min(240px,62vw);aspect-ratio:9/16;position:relative;
  border-radius:20px;overflow:hidden;scroll-snap-align:center;text-decoration:none;
  background:linear-gradient(165deg,#182742 0%,#0a1f3d 100%);
  border:1px solid rgba(10,31,61,.18);
  box-shadow:0 16px 34px rgba(10,31,61,.16);
  transition:transform .35s var(--ease-expo),box-shadow .35s;
}
.reel:hover{transform:translateY(-5px);box-shadow:0 24px 46px rgba(10,31,61,.24)}
.reel .rl-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .rl-ph{
  position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.35);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:rgba(255,255,255,.75);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:12px;
}
.reel .rl-ph svg{width:30px;height:30px;opacity:.8}
.reel .rl-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;background:rgba(8,18,36,.5);
  border:1.5px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  display:grid;place-items:center;box-shadow:0 10px 28px rgba(4,12,26,.4);
  transition:transform .3s var(--ease-back);
}
.reel:hover .rl-play{transform:translate(-50%,-50%) scale(1.1)}
.reel .rl-play svg{width:21px;height:21px;fill:#fff;margin-left:3px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.reel .rl-tag{
  position:absolute;top:9px;left:9px;z-index:3;max-width:calc(100% - 18px);
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;color:#fff;letter-spacing:.01em;
  background:rgba(8,18,36,.4);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);
  padding:5px 11px 5px 8px;border-radius:99px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reel .rl-tag svg{width:13px;height:13px;flex:none;opacity:.95}
.reel .rl-here{
  position:absolute;left:9px;bottom:9px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(8,18,36,.38);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  padding:5px 10px;border-radius:99px;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease-back);
}
.reel .rl-here::before{content:"";width:6px;height:6px;border-radius:50%;background:#31d158;
  box-shadow:0 0 0 0 rgba(49,209,88,.6);animation:ipulse 2s ease-in-out infinite}
.reel:hover .rl-here,.reel:focus-visible .rl-here{opacity:1;transform:none}
@media(hover:none){.reel .rl-here{opacity:1;transform:none}}
.reels-hint{display:flex;justify-content:center;margin-top:2px;font-size:12.5px;color:var(--faint);font-weight:600}


/* ---------- fountain-pen annotations ---------- */
.pennote{font-family:'La Belle Aurore',cursive;color:#2b4494;font-weight:400;line-height:1.25}
.pen-start{display:none}
@media(min-width:1080px){
  /* sits just left of the bar and points INTO it. Anchored to .bar-wrap, not to a
     percentage of the hero, so it cannot drift when the headline rewraps. */
  .pen-start{display:block;position:absolute;right:calc(100% + 22px);top:0;
    text-align:center;transform:rotate(-7deg);z-index:4;white-space:nowrap}
  .pen-start .pennote{font-size:26px}
  .pen-start svg{width:54px;display:block;margin:4px auto 0}
}
.pen-circle{position:relative;display:inline-block}
.pen-circle svg{position:absolute;top:-9px;left:-16px;width:calc(100% + 32px);height:calc(100% + 18px);pointer-events:none;overflow:visible}
.pen-sign{margin-top:14px;font-size:22px;transform:rotate(-2deg);display:flex;align-items:center;gap:8px}
.pen-sign svg{width:17px;height:17px;flex:none}
.pen-ps{font-size:21px;margin-top:12px;text-align:center}
.zh s{text-decoration-line:line-through;text-decoration-style:wavy;text-decoration-color:#2b4494;text-decoration-thickness:1.4px}
/* court exhibit tags */
.exhibit{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--font-display);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#5c4715;
  background:linear-gradient(170deg,#faf1d9,#f2e3b8);border:1.5px solid #d9c586;
  padding:5px 10px;border-radius:3px;transform:rotate(-2.5deg);
  box-shadow:0 3px 8px rgba(10,31,61,.15);
}
.step-media .illus-wrap{position:relative}
.phone-shot .exhibit{top:-12px;left:-14px}
/* rubber-stamp impression */
.inkstamp{
  display:inline-block;font-family:var(--font-display);font-size:12.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:#2b4494;
  border:3px double #2b4494;border-radius:8px;padding:8px 16px;
  transform:rotate(-6deg);opacity:.7;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .96 .06'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .96 .06'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}


/* ---------- right navigator rail (comet) ---------- */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:120;display:none;flex-direction:column;gap:0}
/* The rail is fixed at right:20px and is ~181px wide including its label. The
   content column is 1080px centred, so below 1080+2*193 = 1466px the rail sits
   ON TOP of the content - which is exactly what it was doing to the evidence
   illustration. Show it only when the margin genuinely has room; narrower
   screens get the bottom-right dial instead, which never overlaps anything. */
/* Measured: the rail is 161px wide when the active label is pinned open, but only
   20px as bare dots. So it needs a 1465px viewport to show labels permanently,
   and just 1183px to show dots. Rather than hide the whole thing on a laptop,
   bring it back at 1180 and drop only the pinned label in the middle band -
   hovering still reveals it, and a hover overlaying content is fine because the
   reader asked for it. */
@media(min-width:1180px){.rail{display:flex}}
@media(min-width:1180px) and (max-width:1479px){
  /* Take the label out of the flow entirely. At opacity:0 it still occupied
     161px of layout, so the rail's anchors stayed 161px wide and silently sat
     over the content - invisible, but still swallowing clicks meant for the
     page. Absolute positioning collapses each anchor to just its dot. */
  .rail .lbl{position:absolute;right:calc(100% + 6px);top:50%;transform:translate(8px,-50%)}
  .rail a.on .lbl{opacity:0;transform:translate(8px,-50%)}
  .rail a:hover .lbl{opacity:1;transform:translate(0,-50%)}
}
.rail::before{content:"";position:absolute;top:6px;bottom:6px;right:14px;width:2px;background:var(--line);border-radius:2px}
.rail .fill{position:absolute;top:6px;right:14px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,#22d3ee,#2a7cf7 45%,#7c3aed);
  box-shadow:0 0 10px rgba(42,124,247,.55);transition:height .25s ease-out}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:7px 0;text-decoration:none}
.rail .lbl{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(10,31,61,.72);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  padding:5px 11px;border-radius:99px;white-space:nowrap;
  opacity:0;transform:translateX(8px);transition:opacity .25s,transform .3s var(--ease-back);pointer-events:none;
  box-shadow:0 6px 16px rgba(10,31,61,.25)}
.rail a:hover .lbl,.rail a.on .lbl{opacity:1;transform:translateX(0)}
.rail .dot{position:relative;width:9px;height:9px;border-radius:50%;background:#b9c6dd;flex:none;margin-right:10.5px;
  transition:transform .3s var(--ease-back),background .2s}
.rail a:hover .dot{transform:scale(1.5);background:var(--accent)}
.rail a.on .dot{background:linear-gradient(135deg,#2a7cf7,#7c3aed);transform:scale(1.7)}
.rail a.on .dot::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(42,124,247,.55);animation:railpulse 1.8s ease-out infinite}
@keyframes railpulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.rail a.on .dot::before{animation:none}}

/* ---------- sticky notes (the lawyer's-desk theme) ---------- */
.sticky{
  position:relative;display:inline-block;z-index:5;
  font-family:'Kalam',cursive;font-weight:700;font-size:17.5px;line-height:1.35;
  color:#4a3f15;text-align:center;
  background:linear-gradient(165deg,#fff4a3,#ffe66b 70%,#f7d94f);
  padding:18px 20px 16px;max-width:240px;
  transform:rotate(-3deg);
  border-radius:2px 2px 6px 2px;
  box-shadow:0 12px 24px rgba(10,31,61,.15),0 2px 5px rgba(10,31,61,.08);
  transition:transform .35s var(--ease-back);
}
.sticky:hover{transform:rotate(-.5deg) scale(1.03)}
.sticky::before{ /* tape */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(1.5deg);
  width:76px;height:24px;background:rgba(255,255,255,.5);
  border-left:1px dashed rgba(10,31,61,.14);border-right:1px dashed rgba(10,31,61,.14);
  box-shadow:0 2px 4px rgba(10,31,61,.08);
}
.sticky::after{ /* folded corner */
  content:"";position:absolute;bottom:0;right:0;
  border-style:solid;border-width:0 18px 18px 0;
  border-color:transparent #c9b23e transparent transparent;
  filter:drop-shadow(-2px -2px 2px rgba(10,31,61,.08));
}
.sticky b{color:var(--accent-deep)}
.sticky .bolt{display:inline-block;width:15px;height:15px;vertical-align:-2px;fill:var(--accent-deep)}
.sticky.blue{background:linear-gradient(165deg,#e2eeff,#bcd9ff 70%,#a8ccfa);color:#14346b}
.sticky.blue::after{border-color:transparent #8fb3e6 transparent transparent}
.sticky.tilt-r{transform:rotate(2.5deg)}
.sticky.tilt-r:hover{transform:rotate(.5deg) scale(1.03)}
.sticky.small{font-size:14.5px;padding:13px 15px 12px;max-width:200px}
.sticky.small::before{width:56px;height:18px;top:-8px}
.sticky-row{display:flex;justify-content:center;margin-top:26px}
/* hero slogan note: floats beside the bar on wide screens, sits in flow on mobile */
.st-hero{margin:22px auto 0}
@media(min-width:1080px){
  .hero{position:relative}
  .st-hero{position:absolute;right:6%;top:42%;margin:0;transform:rotate(4deg)}
  .st-hero:hover{transform:rotate(1deg) scale(1.03)}
}
/* compare-column pinned notes */
.vs-col{position:relative}
.vs-note{position:absolute;bottom:14px;right:18px;transform:rotate(3deg)}
.vs-note.left-pin{bottom:auto;top:-30px}
.vs-note.left-pin{right:auto;left:22px;transform:rotate(-4deg)}
@media(max-width:640px){.vs-note{bottom:10px;right:10px}.vs-note.left-pin{top:-26px;bottom:auto;left:12px}}

/* ---------- real app screenshot frame ---------- */
.phone-shot{
  position:relative;max-width:340px;margin:0 auto;border-radius:30px;
  border:3px solid var(--ink);overflow:hidden;background:#eef4ff;
  box-shadow:0 24px 50px rgba(10,31,61,.18);aspect-ratio:10/13.5;
}
.phone-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ps-badge{
  position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,31,61,.85);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ps-badge .dot{width:7px;height:7px;border-radius:50%;background:#31d158;animation:ipulse 2s ease-in-out infinite}
.ps-cap{
  position:absolute;bottom:0;left:0;right:0;z-index:2;text-align:center;
  background:linear-gradient(transparent,rgba(10,31,61,.8));color:#fff;
  font-size:12px;font-weight:700;padding:30px 14px 12px;
}




/* ---------- after-the-notice section ---------- */
.after-grid{display:grid;gap:18px;margin-top:clamp(28px,5vw,44px)}
@media(min-width:880px){.after-grid{grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,48px);align-items:center}}
.after-ring{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3.5vw,32px);text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 34px rgba(10,31,61,.07);
}
.ringwrap{position:relative;width:min(200px,60vw);margin:0 auto}
.ringwrap svg{width:100%;height:auto;display:block}
.ring-fg{stroke-dasharray:245.0;stroke-dashoffset:245.0;transition:stroke-dashoffset 1.9s var(--ease-expo) .3s}
.reveal.in .ring-fg{stroke-dashoffset:83.3}
.knobg{transform:rotate(-135deg);transform-origin:70px 70px;transform-box:view-box;transition:transform 2s var(--ease-back) .3s;filter:drop-shadow(0 4px 8px rgba(10,31,61,.18))}
.reveal.in .knobg{transform:rotate(43.2deg)}
.ring-lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media(prefers-reduced-motion:reduce){.knobg{transition:none;transform:rotate(43.2deg)}}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring-num .v{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,4vw,1.9rem);letter-spacing:-.03em;color:var(--accent-deep);font-variant-numeric:tabular-nums;line-height:1}
.ring-num .l{font-size:11px;font-weight:700;color:var(--muted);line-height:1.35;text-transform:uppercase;letter-spacing:.06em}
.ring-cap{font-size:14px;color:var(--muted);font-weight:600;margin:16px auto 0;max-width:34ch}
.ring-cap b{color:var(--ink)}
.ring-foot{font-size:10.5px;color:var(--faint);font-weight:600;margin-top:8px}
.after-steps{display:flex;flex-direction:column;gap:12px}
.aft{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  display:flex;gap:13px;align-items:flex-start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(10,31,61,.05)}
.aft .ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.aft .ic svg{width:19px;height:19px}
.aft b{display:block;font-size:15px;margin-bottom:3px}
.aft p{font-size:13.5px;color:var(--muted);font-weight:500;max-width:none;margin:0}


/* ---------- real case files ---------- */
.cf{margin-top:clamp(34px,6vw,56px)}
.cf-head{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:-.015em;margin-bottom:14px}
.cf-tabs{display:flex;gap:4px;flex-wrap:wrap}
.cf-tab{
  font-family:var(--font-body);font-size:12.5px;font-weight:800;color:#7a6a35;cursor:pointer;
  background:linear-gradient(180deg,#efe6c8,#e7d9ab);border:1px solid #d9c586;border-bottom:none;
  border-radius:10px 10px 0 0;padding:9px 14px;position:relative;top:1px;
  transition:background .2s,color .2s,transform .25s var(--ease-back);
}
.cf-tab:hover{transform:translateY(-2px)}
.cf-tab.on{background:linear-gradient(180deg,#faf1d9,#f2e3b8);color:#4a3b10;z-index:2}
.cf-body{
  position:relative;background:linear-gradient(170deg,#faf1d9,#f0e0b0);
  border:1px solid #d9c586;border-radius:0 14px 14px 14px;
  padding:clamp(20px,3.5vw,30px);box-shadow:0 14px 34px rgba(90,70,20,.14),inset 0 1px 0 rgba(255,255,255,.6);
}
.cf-panel{display:none}
.cf-panel.on{display:grid;gap:14px;animation:cfin .45s var(--ease-expo)}
@keyframes cfin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:820px){.cf-panel.on{grid-template-columns:auto 1fr;gap:clamp(20px,3.5vw,36px);align-items:center}}
.cf-amt .a{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5vw,2.9rem);letter-spacing:-.03em;color:#3b2f0a;line-height:1;white-space:nowrap}
.cf-amt .b{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a7534;margin-top:6px}
.cf-stamp{
  display:inline-block;margin-top:14px;font-family:var(--font-display);font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#0e8a4f;border:3px double #0e8a4f;
  border-radius:8px;padding:6px 12px;transform:rotate(-7deg);opacity:.85;white-space:nowrap;
}
.cf-story{font-size:14.5px;color:#4a3d14;font-weight:500;line-height:1.65;max-width:56ch}
.cf-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cf-meta span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.55);border:1px solid #d9c586;color:#7a6a35;border-radius:99px;padding:4px 10px}
.cf-note{font-size:11px;color:var(--faint);font-weight:600;margin-top:12px}


.cf-tabs{row-gap:5px}
.cf-tab{font-size:11.5px;padding:8px 11px}
@media(max-width:760px){
  .cf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;margin-right:-16px}
  .cf-tabs::-webkit-scrollbar{display:none}
  .cf-tab{white-space:nowrap;flex:0 0 auto}
}
.cf-amt .a.small{font-size:clamp(1.25rem,3vw,1.7rem);white-space:normal;line-height:1.2;max-width:11ch}


.cf-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2a7cf7,#0d5fe3);
  border:2px solid rgba(20,48,94,.45);border-radius:12px 16px 13px 17px / 16px 12px 17px 13px;
  padding:10px 16px;
  box-shadow:0 6px 16px rgba(26,110,245,.22),2.5px 3px 0 rgba(20,48,94,.14);
  transition:transform .25s var(--ease-back),box-shadow .2s;
}
.cf-cta:hover{transform:translate(-1px,-2px);box-shadow:0 10px 22px rgba(26,110,245,.3),4px 5px 0 rgba(20,48,94,.14)}
.cf-cta:active{transform:translate(2px,3px);box-shadow:0 2px 6px rgba(26,110,245,.18),1px 1px 0 rgba(20,48,94,.16)}
.cf-cta svg{width:14px;height:14px}


/* settlement-engine statement */
.engine-line{
  margin:clamp(36px,6vw,60px) auto 0;max-width:26ch;text-align:center;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.35rem,3.4vw,2.1rem);color:var(--ink);text-wrap:balance;
}
.engine-line .eng{position:relative;display:inline-block;color:var(--accent-deep);white-space:nowrap}
.engine-line .eng svg{position:absolute;left:0;right:0;bottom:-9px;width:100%;height:12px;overflow:visible}

  /* ---------- collapsible how-it-works ---------- */
.how-mini{display:grid;gap:10px;margin-top:clamp(22px,4vw,34px)}
@media(min-width:820px){.how-mini{grid-template-columns:repeat(4,1fr)}}
.hm-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  display:flex;gap:11px;align-items:flex-start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(10,31,61,.05)}
.hm-n{flex:none;width:27px;height:27px;border-radius:9px;background:var(--accent-soft);
  color:var(--accent-deep);font-weight:800;font-size:13.5px;display:grid;place-items:center}
.hm-item b{display:block;font-size:14px;line-height:1.3;margin-bottom:2px}
.hm-item span{font-size:12px;color:var(--muted);font-weight:600;line-height:1.4}
.how-toggle{margin:20px auto 0;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:99px;
  padding:12px 22px;font-family:var(--font-body);font-size:14.5px;font-weight:800;
  color:var(--accent-deep);cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .25s var(--ease-back)}
.how-toggle:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(26,110,245,.13);transform:translateY(-2px)}
.how-toggle svg{width:15px;height:15px;transition:transform .4s var(--ease-expo)}
.how-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.how-full{overflow:hidden;max-height:0;transition:max-height .7s var(--ease-expo)}
/* the process is open on arrival; closing it is the option, not the default */
.how-full.open{max-height:none}

/* ---------- HTML/CSS recreation of the real ZappLegal AI conversation ---------- */
.phone-shot{aspect-ratio:10/15}
.cm{position:absolute;inset:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#e9f0fc 0%,#dde8fa 55%,#e6edfb 100%);
  font-size:11.5px;font-family:var(--font-body)}
.cm-head{display:flex;align-items:center;gap:7px;padding:9px 10px;
  background:rgba(242,246,252,.95);border-bottom:1px solid rgba(10,31,61,.06)}
.cm-burger{width:25px;height:25px;border-radius:8px;background:#fff;flex:none;
  box-shadow:0 1px 3px rgba(10,31,61,.12);display:grid;place-items:center}
.cm-burger i{display:block;width:11px;height:1.8px;background:#0a1f3d;border-radius:1px;
  box-shadow:0 3.5px 0 #0a1f3d,0 -3.5px 0 #0a1f3d}
.cm-appicon{width:25px;height:25px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#2f80f8,#7c3aed);display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(26,110,245,.35)}
.cm-appicon svg{width:13px;height:13px;fill:#ffd34d}
.cm-word{font-weight:800;color:#1a3a8f;font-size:13.5px;letter-spacing:-.02em}
.cm-logo{height:27px;width:auto;display:block}
.cm-new{margin-left:auto;background:#fff;border-radius:99px;padding:4px 10px;
  font-weight:700;color:#0a1f3d;font-size:10px;box-shadow:0 1px 3px rgba(10,31,61,.1);white-space:nowrap}
.cm-body{flex:1;padding:11px 9px 4px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.cm-row{display:flex;gap:6px;align-items:flex-end}
.cm-row.user{justify-content:flex-end}
.cm-bub{border-radius:14px;padding:8px 11px;line-height:1.5;max-width:88%}
.cm-bub.u{background:linear-gradient(135deg,#2f80f8,#1a6ef5);color:#fff;
  border-bottom-right-radius:4px;font-weight:600;box-shadow:0 4px 12px rgba(26,110,245,.25)}
.cm-bub.a{background:#fff;color:#22314e;border-bottom-left-radius:4px;
  box-shadow:0 2px 10px rgba(10,31,61,.07);font-weight:500}
.cm-bub.a p{margin:0 0 7px;max-width:none}
.cm-bub.a p:last-child{margin:0}
.cm-bub.a ol{margin:0 0 7px;padding-left:17px}
.cm-bub.a ol li{margin:3px 0;max-width:none}
.cm-bub.a ol li::marker{color:#1a6ef5;font-weight:800}
.cm-ava{width:20px;height:20px;border-radius:7px;flex:none;margin-bottom:2px}
.cm-ava.bot{background:linear-gradient(135deg,#2f80f8,#7c3aed);display:grid;place-items:center}
.cm-ava.bot svg{width:10px;height:10px;fill:#ffd34d}
.cm-ava.hum{background:#ffe3b8;display:grid;place-items:center}
.cm-ava.hum svg{width:13px;height:13px;fill:none;stroke:#8a5a1f;stroke-width:2;stroke-linecap:round}
.cm-listen{background:rgba(255,255,255,.85);border-radius:99px;padding:6px 12px;
  color:#8a97ad;font-weight:700;font-size:10.5px;display:flex;align-items:center;gap:6px;align-self:stretch}
.cm-listen svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-composer{margin:4px 9px;background:#fff;border-radius:99px;display:flex;align-items:center;
  gap:5px;padding:7px 7px 7px 13px;box-shadow:0 5px 16px rgba(10,31,61,.09)}
.cm-composer .ph{color:#9aa7bd;font-weight:600;flex:1;display:flex;align-items:center;gap:3px;font-size:11px}
.cm-caret{display:inline-block;width:1.5px;height:12px;background:#1a6ef5;animation:cmblink 1.1s steps(2) infinite}
@keyframes cmblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cm-caret{animation:none}}
.cm-cbtn{width:25px;height:25px;border-radius:50%;background:#eef4ff;flex:none;
  display:grid;place-items:center;color:#5b6b85}
.cm-cbtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-cbtn.send{background:linear-gradient(135deg,#2f80f8,#0d5fe3);color:#fff}
.cm-foot{text-align:center;font-size:8.4px;color:#93a3bd;padding:0 10px 8px;font-weight:600}
.cm-foot b{color:#5b6b85}

/* ---------- hand-drawn SVG illustrations ---------- */
.illus-wrap{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(165deg,#f8fbff,#edf3fe);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 30px rgba(10,31,61,.07);
}
.illus-wrap svg{display:block;width:100%;height:auto}
.ifl,.ifl2{transform-box:fill-box;transform-origin:center}
.ifl{animation:ifloat 4.5s ease-in-out infinite alternate}
.ifl2{animation:ifloat 6s ease-in-out .9s infinite alternate}
@keyframes ifloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.idash{stroke-dasharray:3 9;animation:idash 2.4s linear infinite}
@keyframes idash{to{stroke-dashoffset:-48}}
.ipulse{animation:ipulse 3s ease-in-out infinite}
@keyframes ipulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ifl,.ifl2,.idash,.ipulse{animation:none}}

/* ---------- sections ---------- */
/* Vertical rhythm: two adjacent sections BOTH contribute padding, so the gap a
   reader sees is double this value. At 110 that meant 220px of air between
   every section and small blocks looked marooned. 68 gives ~136px between
   sections on desktop and ~88px on a phone. */
.zh section{padding:clamp(44px,5.5vw,68px) clamp(20px,4.5vw,40px)}
.container{max-width:1080px;margin:0 auto}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.eyebrow .sn{font-variant-numeric:tabular-nums;color:var(--faint);letter-spacing:.05em}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);min-width:40px}
#compare .eyebrow::after{background:rgba(255,255,255,.12)}
#finalcta .eyebrow{display:block}
#finalcta .eyebrow::after{display:none}
.sec-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(1.7rem,4.6vw,2.9rem);max-width:24ch;text-wrap:balance;margin-bottom:10px;
}
.sec-sub{color:var(--muted);font-size:clamp(14.5px,2vw,16.5px);max-width:58ch;font-weight:500}

/* ---------- how it works ---------- */
#how{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:flex;flex-direction:column;gap:clamp(36px,6vw,64px);margin-top:clamp(32px,5vw,56px)}
.step{display:grid;gap:20px;align-items:center}
@media(min-width:820px){
  .step{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
  .step:nth-child(even) .step-media{order:-1}
}
.step-n{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--accent);
  letter-spacing:.06em;text-transform:uppercase;
}
.step-n .dot{width:34px;height:34px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:15px}
.step h3{font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px;max-width:48ch;font-weight:500}
.step .note{
  margin-top:12px;display:inline-flex;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--good);font-weight:700;background:var(--good-soft);
  padding:8px 12px;border-radius:10px;
}
.step .note svg{width:15px;height:15px;flex:none;margin-top:2px}
.step-media .img-slot{aspect-ratio:4/3}

/* honesty strip */
.honesty{
  margin-top:clamp(36px,6vw,60px);
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,30px);display:grid;gap:14px;
}
@media(min-width:820px){.honesty{grid-template-columns:1fr 1fr 1fr}}
.honest-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);font-weight:500}
.honest-item svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}
.honest-item b{color:var(--ink)}

/* ---------- matters grid ---------- */
.matters{display:grid;gap:14px;margin-top:clamp(30px,5vw,48px)}
@media(min-width:640px){.matters{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.matters{grid-template-columns:1fr 1fr 1fr}}
.matter{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(10,31,61,.04),0 10px 28px rgba(10,31,61,.05);
  transition:transform .35s var(--ease-expo),border-color .2s,box-shadow .35s;
  text-align:left;
}
.matter::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:linear-gradient(110deg,#2563eb,#7c3aed 30%,#22d3ee 50%,#7c3aed 70%,#2563eb);
  background-size:220% 100%;background-position:0% 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .3s;
}
.matter:hover{
  transform:translateY(-5px);border-color:transparent;
  box-shadow:0 2px 4px rgba(10,31,61,.05),0 22px 44px rgba(26,110,245,.15);
}
.matter:hover::after{opacity:1;animation:ringflow 2.2s linear infinite alternate}
.matter:first-child{border-color:rgba(26,110,245,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(10,31,61,.04),0 14px 34px rgba(26,110,245,.12)}
.matter .m-tag{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.matter .m-tag.pop{color:var(--good)}
.matter h3{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.matter p{font-size:13.5px;color:var(--muted);font-weight:500;flex:1}
.matter .m-ex{display:flex;flex-wrap:wrap;gap:6px}
.matter .m-ex span{font-size:11.5px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.matter .m-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--accent);margin-top:6px}
.matter .m-cta svg{width:14px;height:14px;transition:transform .25s var(--ease-back)}
.matter:hover .m-cta svg{transform:translateX(4px)}
.m-299{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.m-299:hover{color:var(--accent-deep);text-decoration:underline}
.m-299 svg{width:12px;height:12px}
.matter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more-matters{margin-top:18px;font-size:13.5px;color:var(--muted);font-weight:600;text-align:center}
.more-matters a{color:var(--accent-deep);text-decoration:none;font-weight:700}
.more-matters a:hover{text-decoration:underline}

/* ---------- compare ---------- */
#compare{background:var(--ink);color:#eef3fb;border-radius:0}
#compare .eyebrow{color:#7fb0ff}
#compare .sec-title{color:#fff}
#compare .sec-sub{color:rgba(238,243,251,.65)}
.vs{display:grid;gap:14px;margin-top:clamp(30px,5vw,48px)}
@media(min-width:820px){.vs{grid-template-columns:1fr 1fr;gap:22px}}
.vs-col{border-radius:var(--radius);padding:clamp(20px,3.5vw,30px)}
.vs-col.old{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.vs-col.new{padding-bottom:64px}
.vs-col.old{padding-top:46px}
.vs-col.new{background:linear-gradient(160deg,rgba(42,124,247,.25),rgba(26,110,245,.1));border:1px solid rgba(90,150,255,.45);position:relative;overflow:hidden;transform:rotate(-.5deg);box-shadow:0 24px 60px rgba(26,110,245,.25)}
@media(max-width:820px){.vs-col.new{transform:none}}
.vs-col.new::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.vs-col h3{font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.45rem);font-weight:800;margin-bottom:16px;letter-spacing:-.015em;color:#fff}
.vs-col.new h3 .rs{color:#8ab4ff}
.vs-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.vs-col li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:500}
.vs-col.old li{color:rgba(238,243,251,.62)}
.vs-col li svg{width:17px;height:17px;flex:none;margin-top:2px}
.vs-col.old li svg{color:#ff8a80}
.vs-col.new li svg{color:#6ee7a0}
.vs-tag{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#1a6ef5;color:#fff;padding:4px 10px;border-radius:99px}
.vs-punch{margin-top:26px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,3vw,1.6rem);letter-spacing:-.02em}
.vs-punch .hl{color:#8ab4ff}


/* ---------- news ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.ticker-track{display:inline-flex;align-items:center;gap:28px;white-space:nowrap;width:max-content;animation:tickmove 26s linear infinite}
.ticker span{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ticker svg{width:11px;height:11px;color:var(--accent);flex:none}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(30px,5vw,48px)}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);padding:clamp(20px,3.5vw,32px) clamp(16px,2.5vw,28px)}
.stat .v{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.8rem,4.5vw,2.8rem);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:8px;line-height:1.4}

/* ---------- trust ---------- */
.trust-grid{display:grid;gap:14px;margin-top:clamp(30px,5vw,48px)}
@media(min-width:640px){.trust-grid{grid-template-columns:1fr 1fr}}
.trust-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;gap:14px;align-items:flex-start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(10,31,61,.04),0 10px 28px rgba(10,31,61,.05);
  transition:transform .35s var(--ease-expo),box-shadow .35s,border-color .2s;
}
.trust-card:hover{transform:translateY(-4px);border-color:rgba(26,110,245,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 36px rgba(10,31,61,.09)}
.trust-card.star{border-color:rgba(14,138,79,.35);background:linear-gradient(160deg,#f2fbf6,#fff)}
.trust-card .t-ic{flex:none;width:42px;height:42px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.trust-card.star .t-ic{background:var(--good-soft);color:var(--good)}
.trust-card .t-ic svg{width:21px;height:21px}
.trust-card h3{font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.trust-card p{font-size:13.5px;color:var(--muted);font-weight:500}
.trust-card b{color:var(--ink)}

/* advocates */
.advocates{display:grid;gap:14px;margin-top:clamp(28px,4vw,40px)}
@media(min-width:640px){.advocates{grid-template-columns:1fr 1fr 1fr}}
.adv{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,31,61,.04),0 12px 30px rgba(10,31,61,.06);
  transition:transform .35s var(--ease-expo),box-shadow .35s;
}
.adv:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(10,31,61,.12)}
.adv .a-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;
  font-size:11.5px;font-weight:800;color:var(--ink);box-shadow:0 4px 12px rgba(10,31,61,.12);
}
.adv .a-badge .st{color:#f5a623}
.adv .a-photo{width:100%;aspect-ratio:4/2.9;object-fit:cover;object-position:center 26%;display:block}
.adv .a-body{padding:16px 18px}
.adv h3{font-family:var(--font-display);font-size:16.5px;font-weight:800}
.adv .a-meta{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.adv .a-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.adv .a-chips span{font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border-radius:99px;padding:3px 9px}

/* reviews embed slot */
.embed-slot{margin-top:clamp(28px,4vw,40px);min-height:120px}

/* ---------- router ---------- */
.router{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3.5vw,30px);display:flex;flex-direction:column;gap:14px;
}
@media(min-width:820px){.router{flex-direction:row;align-items:center;justify-content:space-between}}
.router h3{font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:800;letter-spacing:-.015em}
.router p{font-size:13.5px;color:var(--muted);font-weight:500}
.router-links{display:flex;gap:8px;flex-wrap:wrap}
.router-links a{
  font-size:13px;font-weight:700;text-decoration:none;color:var(--accent-deep);
  background:var(--accent-soft);padding:9px 14px;border-radius:99px;white-space:nowrap;
  transition:transform .25s var(--ease-back);display:inline-flex;align-items:center;gap:6px;
}
.router-links a:hover{transform:translateY(-2px)}
.router-links svg{width:13px;height:13px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:clamp(30px,5vw,48px) auto 0;display:flex;flex-direction:column;gap:10px}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,31,61,.03);transition:border-color .2s,box-shadow .25s;
}
.faq details:hover{border-color:rgba(26,110,245,.3)}
.faq details[open]{border-color:rgba(26,110,245,.35);box-shadow:0 10px 26px rgba(26,110,245,.08)}
.faq details[open] .a{animation:faqin .4s var(--ease-expo)}
@keyframes faqin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;font-weight:700;font-size:15px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:22px;height:22px;color:var(--accent);transition:transform .3s var(--ease-expo)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px;font-size:14px;color:var(--muted);font-weight:500;max-width:65ch}
.faq .a b{color:var(--ink)}

/* ---------- final CTA ---------- */
#finalcta{text-align:center}
#finalcta .bar-wrap{margin:26px auto 0}

/* ============================================================
   GLASS PASS - the page tint shows through every panel.
   Deliberately NO backdrop-filter on in-flow cards: the page
   background is flat, so a blur would cost GPU on the 73% of
   traffic that is mobile and change nothing on screen. Blur is
   reserved for things that actually have content behind them.
   ============================================================ */
.hm-item,.aft,.after-ring,.matter,.stat,.trust-card,.adv,.router,.faq details,.chip,.how-toggle{
  background-color:var(--glass);   /* colour only: the matter cards keep their icon pattern */
  border-color:var(--glass-edge);
  box-shadow:var(--glass-lift);
}
.stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.faq details[open]{background-color:var(--glass-hi)}
.matter:hover,.trust-card:hover,.adv:hover,.router:hover,.chip:hover,.how-toggle:hover{background-color:var(--glass-hi)}
.trust-card.star{background:linear-gradient(160deg,rgba(227,246,236,.72),rgba(255,255,255,.5))}
.attach-pill{background-color:rgba(255,255,255,.42)}
.attach-pill:hover{background-color:rgba(231,239,255,.75)}
.matter .m-ex span{background-color:rgba(255,255,255,.5);border-color:var(--glass-edge)}
/* full-bleed bands become a breath of lighter air, not a white slab */
.stats{background-color:rgba(10,31,61,.06)}
/* fixed chrome keeps its blur: there IS page content sliding behind it */

/* ---------- evidence picked on the homepage, carried into the app ---------- */
.ev-chips{display:flex;flex-wrap:wrap;gap:7px;margin:9px 4px 0}
.ev-chips:empty{display:none}
.ev-chip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-size:12px;font-weight:700;color:var(--accent-deep);
  background:rgba(26,110,245,.08);border:1px solid rgba(26,110,245,.22);
  border-radius:10px;padding:6px 8px 6px 9px;
  animation:vpin .28s var(--ease-back) both;
}
.ev-chip .ev-ic{flex:none;width:15px;height:15px;opacity:.85}
.ev-chip .ev-nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-chip .ev-sz{font-weight:600;color:var(--muted);font-size:11px}
.ev-chip .ev-x{
  flex:none;width:17px;height:17px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(10,31,61,.09);color:var(--muted);
  display:grid;place-items:center;font-size:11px;line-height:1;padding:0;
}
.ev-chip .ev-x:hover{background:rgba(225,29,72,.14);color:#e11d48}
.ev-note{
  display:flex;align-items:flex-start;gap:7px;margin:8px 4px 0;
  font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.45;
}
.ev-note svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--accent)}
.attach-pill.has{background-color:rgba(26,110,245,.13);border-style:solid;border-color:var(--accent)}
.attach-pill .ap-n{
  min-width:17px;height:17px;border-radius:99px;padding:0 5px;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;
  background:var(--accent);color:#fff;
}

/* ---------- listening pill + toast: same voice model as ZappLegal AI ---------- */
.vpill{
  display:flex;align-items:center;gap:10px;margin:2px 4px 0;padding:9px 10px 9px 12px;
  border-radius:14px;background:rgba(26,110,245,.07);border:1px solid rgba(26,110,245,.22);
  animation:vpin .3s var(--ease-back) both;
}
@keyframes vpin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vpill[hidden]{display:none}
.vp-orb{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#7cb0ff,#1a6ef5 62%,#0d5fe3);
  box-shadow:0 0 0 0 rgba(26,110,245,.45);
  transform:scale(1);transition:transform .09s linear;
  animation:vorb 1.7s ease-in-out infinite;
}
@keyframes vorb{0%,100%{box-shadow:0 0 0 0 rgba(26,110,245,.4)}60%{box-shadow:0 0 0 9px rgba(26,110,245,0)}}
.vp-txt{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--accent-deep);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-time{flex:none;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.vp-time.warn{color:#b45309}
.vp-btn{
  flex:none;height:32px;padding:0 13px;border:none;border-radius:10px;cursor:pointer;
  font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2a7cf7,var(--accent-deep));
  box-shadow:0 4px 12px rgba(26,110,245,.3);
}
.vp-x{
  flex:none;width:32px;height:32px;border-radius:10px;cursor:pointer;
  background:rgba(10,31,61,.06);border:1px solid var(--line);color:var(--muted);
  display:grid;place-items:center;font-size:15px;line-height:1;
}
.vp-x:hover{background:rgba(10,31,61,.1)}
.vp-spin{flex:none;width:17px;height:17px;border:2.2px solid rgba(26,110,245,.25);
  border-top-color:var(--accent);border-radius:50%;animation:rlxspin .75s linear infinite}
.vp-note{
  display:flex;align-items:center;gap:7px;margin:9px auto 0;max-width:680px;
  font-size:12.5px;font-weight:600;color:var(--good);
  background:var(--good-soft);border:1px solid rgba(14,138,79,.2);
  border-radius:12px;padding:8px 12px;animation:vpin .35s var(--ease-back) both;
}
#ztoast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:420;
  max-width:min(360px,92vw);padding:11px 16px;border-radius:14px;
  font-size:13.5px;font-weight:700;color:#fff;text-align:center;
  background:rgba(10,31,61,.9);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(10,31,61,.3);
  opacity:0;pointer-events:none;transition:opacity .28s,transform .38s var(--ease-back);
}
#ztoast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- section navigator: a small dial, bottom right ---------- */
.navfab{
  position:fixed;right:14px;bottom:16px;z-index:151;display:none;
  width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.82);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 8px 24px rgba(10,31,61,.18);
  place-items:center;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease-expo),transform .45s var(--ease-back);
}
@media(max-width:1179px){.navfab{display:grid}}
.navfab.show{opacity:1;transform:none;pointer-events:auto}
.nf-ring{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg);pointer-events:none}
.nf-ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.nf-ring .trk{stroke:rgba(10,31,61,.1)}
.nf-ring .pgs{stroke:url(#nfg);stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset .25s ease-out}
.nf-ic{
  position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#2a7cf7,var(--accent) 60%,#7c3aed);
  box-shadow:0 3px 9px rgba(26,110,245,.4);transition:transform .45s var(--ease-back);
}
.nf-ic svg{width:13px;height:13px}
.navfab[aria-expanded="true"] .nf-ic{transform:rotate(180deg)}
.nf-n{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:99px;
  display:grid;place-items:center;padding:0 4px;
  font-size:9.5px;font-weight:800;color:var(--accent-deep);
  background:#fff;border:1px solid rgba(26,110,245,.25);box-shadow:0 2px 5px rgba(10,31,61,.14)}
.navsheet{
  position:fixed;right:14px;bottom:70px;z-index:152;width:min(232px,calc(100vw - 28px));
  padding:9px;border-radius:18px;
  background:rgba(255,255,255,.88);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 22px 54px rgba(10,31,61,.24);
  transform-origin:bottom right;
  animation:nsin .34s var(--ease-back) both;
}
.navsheet[hidden]{display:none}
@keyframes nsin{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.ns-head{display:flex;align-items:center;gap:7px;padding:2px 5px 8px;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ns-bar{flex:1;height:3px;border-radius:2px;background:rgba(10,31,61,.1);overflow:hidden}
.ns-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#22d3ee,#2a7cf7 45%,#7c3aed);transition:width .25s ease-out}
.ns-list{display:flex;flex-direction:column;gap:1px;max-height:52vh;overflow:auto}
.ns-list a{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:11px;
  font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;transition:background .18s;
}
.ns-list a .n{
  flex:none;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
  font-size:9px;font-weight:800;color:var(--accent-deep);background:rgba(26,110,245,.12);
}
.ns-list a.on{background:rgba(26,110,245,.11);color:var(--accent-deep)}
.ns-list a.on .n{background:linear-gradient(135deg,#2a7cf7,#7c3aed);color:#fff}
.ns-list a:active{background:rgba(26,110,245,.16)}
/* anything you jump to lands clear of the site header */
section[id],header[id],div[id="reels"]{scroll-margin-top:86px}

/* ---------- in-page reel player (official IG embed, no redirect) ---------- */
.rlx{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:14px}
.rlx[hidden]{display:none}
.rlx-bd{position:absolute;inset:0;background:rgba(6,14,28,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  animation:rlxfade .3s ease both}
@keyframes rlxfade{from{opacity:0}to{opacity:1}}
.rlx-box{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;
  --fw:min(384px, 90vw, calc((92vh - 132px) / 1.27));
  animation:rlxpop .42s var(--ease-back) both;
}
@keyframes rlxpop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.rlx-head{display:flex;align-items:center;gap:10px;width:var(--fw);color:#fff}
.rlx-who{font-weight:800;font-size:13.5px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx-x{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:background .18s,transform .25s var(--ease-back);
}
.rlx-x:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)}
.rlx-x svg{width:15px;height:15px}
.rlx-frame{
  width:var(--fw);height:calc(var(--fw) * 1.27 + 58px);
  border-radius:16px;overflow:hidden;position:relative;background:#000;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(2,8,20,.55);
}
.rlx-frame iframe{width:100%;height:100%;border:0;display:block}
.rlx-spin{
  position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  animation:rlxspin .8s linear infinite;
}
@keyframes rlxspin{to{transform:rotate(360deg)}}
.rlx-foot{display:flex;align-items:center;gap:10px;width:var(--fw)}
.rlx-arrow{
  flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:background .18s,transform .2s;
}
.rlx-arrow:hover{background:rgba(255,255,255,.26);transform:scale(1.08)}
.rlx-arrow svg{width:15px;height:15px}
.rlx-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:7px}
.rlx-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34);transition:all .25s}
.rlx-dots i.on{width:20px;border-radius:99px;background:#fff}
.rlx-hint{
  position:absolute;left:0;right:0;bottom:-24px;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
body.rlx-open{overflow:hidden}
@media(max-width:420px){
  .rlx-box{--fw:min(96vw, calc((90vh - 118px) / 1.27))}
  .rlx-frame{border-radius:14px}
}
/* landscape phones: stand the controls beside the player instead of above and
   below it, so the reel gets the whole height instead of a 160px sliver */
@media(max-height:560px){
  .rlx{padding:8px}
  .rlx-box{
    flex-direction:row;align-items:center;gap:12px;
    --fw:min(384px, calc((100vh - 74px) / 1.27));
  }
  .rlx-head,.rlx-foot{width:auto;flex-direction:column;gap:9px}
  .rlx-head{order:1}
  .rlx-frame{order:2}
  .rlx-foot{order:3}
  .rlx-who,.rlx-hint{display:none}
  .rlx-x{margin-left:0}
  .rlx-dots{flex:none;flex-direction:column;gap:6px}
  .rlx-dots i.on{width:6px;height:20px;border-radius:99px}
}

/* ---------- reveal on scroll (only hides content once JS confirms it will reveal it) ---------- */
.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.js-anim .reveal.in{opacity:1;transform:none}
.js-anim .matters .reveal:nth-child(2),.js-anim .trust-grid .reveal:nth-child(2),.js-anim .advocates .reveal:nth-child(2){transition-delay:.08s}
.js-anim .matters .reveal:nth-child(3),.js-anim .trust-grid .reveal:nth-child(3),.js-anim .advocates .reveal:nth-child(3){transition-delay:.16s}
.js-anim .matters .reveal:nth-child(4),.js-anim .trust-grid .reveal:nth-child(4){transition-delay:.24s}
.js-anim .matters .reveal:nth-child(5){transition-delay:.32s}
.js-anim .matters .reveal:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .bar,.vs-col.new::after{animation:none !important}
  html{scroll-behavior:auto}
}

/* ================= CARTOON SKIN - 2D hand-drawn caricature layer ================= */
.zh{--inkln:#14305e}
/* thick ink outlines + solid comic offset shadows */
.matter,.trust-card,.aft,.hm-item,.adv,.faq details,.after-ring,.router,
.illus-wrap,.reel,.honesty,.stats{
  border:1.5px solid rgba(20,48,94,.30) !important;
  background-color:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(10,31,61,.09),3px 4px 0 rgba(20,48,94,.10) !important;
}
.illus-wrap,.reel{background-color:transparent}
.phone-shot{border:2.5px solid rgba(20,48,94,.75);box-shadow:0 18px 44px rgba(10,31,61,.16),4px 5px 0 rgba(20,48,94,.12)}
.cf-body{border:1.5px solid rgba(168,137,74,.55);box-shadow:0 12px 30px rgba(122,96,38,.16),3px 4px 0 rgba(122,96,38,.18)}
.cf-tab{border:1.5px solid rgba(168,137,74,.5);border-bottom:none}
/* wobbly, hand-cut corners (subtle asymmetry, not blobs) */
.matter,.aft,.hm-item,.trust-card,.router,.after-ring,.honesty{
  border-radius:19px 23px 17px 24px / 23px 17px 24px 19px !important;
}
.faq details{border-radius:14px 18px 13px 19px / 18px 13px 19px 14px}
.illus-wrap,.reel{border-radius:20px 24px 18px 25px / 24px 18px 25px 20px !important}
/* sketchy tilts; hover straightens them like pressing paper flat */
.matters .matter:nth-child(odd),.trust-grid .trust-card:nth-child(even),.advocates .adv:nth-child(2){transform:rotate(-.45deg)}
.matters .matter:nth-child(even),.trust-grid .trust-card:nth-child(odd),.aft:nth-child(2){transform:rotate(.4deg)}
/* comic buttons: outline + hard shadow, press sinks into the page */
.bar .send,.how-toggle,.attach-pill,.bar .mic{
  border:2px solid rgba(20,48,94,.45) !important;
  box-shadow:0 6px 16px rgba(26,110,245,.18),2.5px 3px 0 rgba(20,48,94,.14) !important;
}
.bar .send:hover,.how-toggle:hover{transform:translate(-1px,-2px);box-shadow:0 10px 24px rgba(26,110,245,.26),4px 5px 0 rgba(20,48,94,.14) !important}
.bar .send:active,.how-toggle:active,.attach-pill:active,.chip:active{
  transform:translate(2px,3px) !important;box-shadow:0 2px 6px rgba(26,110,245,.18),1px 1px 0 rgba(20,48,94,.16) !important;
}
.chip,.m-ex span,.a-chips span,.router-links a{
  border:1.5px solid rgba(20,48,94,.35) !important;
  background-color:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(10,31,61,.07),2px 2.5px 0 rgba(20,48,94,.10) !important;
  border-radius:13px 17px 14px 18px / 17px 13px 18px 14px !important;
}
.chip:hover{transform:translate(-1px,-2px);box-shadow:0 8px 18px rgba(26,110,245,.16),3px 4px 0 rgba(20,48,94,.12) !important}
/* the two bars keep their gradient identity, gain the comic drop */
.bar{box-shadow:0 14px 42px rgba(26,110,245,.18),4px 5px 0 rgba(20,48,94,.10) !important}
/* dark compare section: chalk outlines */
.vs-col.old,.vs-col.new{border:1.5px solid rgba(219,230,248,.35) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 36px rgba(0,0,0,.28),3px 4px 0 rgba(0,0,0,.15) !important;
  border-radius:19px 23px 17px 24px / 23px 17px 24px 19px !important}
.ticker{border-top:1.5px solid rgba(20,48,94,.35);border-bottom:1.5px solid rgba(20,48,94,.35)}
/* handwritten FAQ questions + section head accents */
.faq summary{font-family:'Kalam',cursive;font-size:16.5px;font-weight:700}
.hm-n,.step-n .dot{border:1.5px solid rgba(20,48,94,.35)}
.rail .dot{border:1.5px solid rgba(20,48,94,.4)}
.a-badge,.ps-badge,.exhibit{border:1.5px solid rgba(20,48,94,.4) !important;box-shadow:0 4px 12px rgba(10,31,61,.14),2px 2.5px 0 rgba(20,48,94,.14) !important}
.exhibit{border-color:rgba(168,137,74,.6) !important;box-shadow:0 4px 12px rgba(122,96,38,.18),2px 2.5px 0 rgba(122,96,38,.22) !important}
/* keep the real-product chat UI clean inside its frame */
.cm,.cm *{box-shadow:none}
.cm-bub.u{box-shadow:0 4px 12px rgba(26,110,245,.25)}
.cm-bub.a{box-shadow:0 2px 10px rgba(10,31,61,.07)}


/* themed icon-pattern card backgrounds */
.matters .matter:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(10%2C12)%20rotate(-9)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'15'%20cy%3D'15'%20r%3D'13'%2F%3E%3Ctext%20x%3D'9'%20y%3D'21'%20font-size%3D'16'%20font-family%3D'Arial'%20fill%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke%3D'none'%3E%E2%82%B9%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(72%2C66)%20rotate(8)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'36'%20height%3D'20'%20rx%3D'3'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'14'%20r%3D'6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}
.matters .matter:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(9%2C14)%20rotate(-7)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'8'%20width%3D'30'%20height%3D'20'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M10%208v-4h10v4'%2F%3E%3Cpath%20d%3D'M0%2016h30'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(70%2C62)%20rotate(9)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'24'%20height%3D'30'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M5%208h14M5%2014h14M5%2020h9'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}
.matters .matter:nth-child(3){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(9%2C12)%20rotate(-8)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'30'%20height%3D'21'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M2%203l13%209%2013-9'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(72%2C64)%20rotate(7)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2024v-6a8%208%200%200%200-8-8H4'%2F%3E%3Cpath%20d%3D'M10%204L4%2010l6%206'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}
.matters .matter:nth-child(4){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(9%2C13)%20rotate(-8)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'30'%20height%3D'22'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M22%2013h8v6h-8a3%203%200%200%201%200-6z'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(74%2C64)%20rotate(10)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'13'%20cy%3D'13'%20r%3D'11'%2F%3E%3Ctext%20x%3D'8'%20y%3D'18'%20font-size%3D'13'%20font-family%3D'Arial'%20fill%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke%3D'none'%3E%E2%82%B9%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}
.matters .matter:nth-child(5){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(9%2C12)%20rotate(-7)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%208h24l-2%2022H5z'%2F%3E%3Cpath%20d%3D'M9%208a6%206%200%200%201%2012%200'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(70%2C62)%20rotate(8)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'4'%20width%3D'26'%20height%3D'22'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M0%2012h26M13%204v8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}
.matters .matter:nth-child(6){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'130'%20height%3D'130'%3E%3Cg%20transform%3D'translate(10%2C12)%20rotate(-8)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%200l12%205v8c0%208-5%2013-12%2016C7%2026%202%2021%202%2013V5z'%2F%3E%3Cpath%20d%3D'M9%2013l4%204%207-8'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(74%2C62)%20rotate(9)'%20fill%3D'none'%20stroke%3D'rgba(26%2C110%2C245%2C0.085)'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'18'%20height%3D'30'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M6%2025h6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:130px;background-repeat:repeat}

/* ============================================================
   Astra ships `.ast-button:focus,.button:hover,button:focus,button:hover{color:#fff}`
   in main.min.css. `button:hover` scores (0,1,1) and beats any plain class of
   ours (0,1,0), so EVERY button in here flipped to white text the moment it was
   touched - and on a phone a tap sets :focus, so the label just vanished against
   its light background. Restate each control's own colour at .zh specificity.
   ============================================================ */
.zh .how-toggle:hover,.zh .how-toggle:focus,.zh .how-toggle:active{color:var(--accent-deep)}
.zh .attach-pill:hover,.zh .attach-pill:focus,.zh .attach-pill:active{color:var(--accent-deep)}
.zh .chip:hover,.zh .chip:focus,.zh .chip:active{color:var(--ink)}
.zh .bar .mic:hover,.zh .bar .mic:focus,.zh .bar .mic:active{color:var(--accent)}
.zh .bar .mic.on,.zh .bar .mic.on:hover,.zh .bar .mic.on:focus{color:#fff}
.zh .cf-tab:hover,.zh .cf-tab:focus,.zh .cf-tab:active{color:#7a6a35}
.zh .cf-tab.on,.zh .cf-tab.on:hover,.zh .cf-tab.on:focus{color:#4a3b10}
.zh .vp-x:hover,.zh .vp-x:focus,.zh .vp-x:active{color:var(--muted)}
.zh .ev-chip .ev-x:hover,.zh .ev-chip .ev-x:focus{color:#e11d48}
/* these are white on a dark fill already, so pin them so they STAY white */
.zh .bar .send:hover,.zh .bar .send:focus,.zh .bar .send:active,
.zh .cf-cta:hover,.zh .cf-cta:focus,.zh .cf-cta:active,
.zh .vp-btn:hover,.zh .vp-btn:focus,
.zh .rlx-x:hover,.zh .rlx-x:focus,
.zh .rlx-arrow:hover,.zh .rlx-arrow:focus{color:#fff}

/* ============================================================
   DISPLAY TYPE, PINNED.
   Elementor's kit ships `.elementor-kit-8 h1/h2/h3{font-family:Helvetica}`
   at (0,1,1), which beats every one of our (0,1,0) class rules AND ties
   with `.zh h1` while loading later. Result on production: the whole page
   rendered in Helvetica while the local file looked correct. These
   two-class selectors score (0,2,0) and settle it.
   ============================================================ */
.zh .hero h1,
.zh .sec-title,
.zh .step h3,
.zh .matter h3,
.zh .vs-col h3,
.zh .trust-card h3,
.zh .adv h3,
.zh .router h3,
.zh .cf-head,
.zh .cf-amt .a,
.zh .cf-stamp,
.zh .stat .v,
.zh .ring-num .v,
.zh .price-main,
.zh .vs-punch,
.zh .engine-line,
.zh .mk-ttl,
.zh .mk-stamp,
.zh .step-n,
.zh .exhibit,
.zh .inkstamp,
.zh .ticker span{font-family:var(--font-display)}
/* the kit sets font-weight on h1-h3 too, which knocked section titles to 700
   and card headings to 500 - every display element in this design is 800 */
.zh .hero h1,
.zh .sec-title,
.zh .step h3,
.zh .matter h3,
.zh .vs-col h3,
.zh .trust-card h3,
.zh .adv h3,
.zh .router h3,
.zh .cf-head,
.zh .cf-amt .a,
.zh .stat .v,
.zh .ring-num .v,
.zh .price-main,
.zh .vs-punch,
.zh .engine-line,
.zh .mk-ttl{font-weight:800}
/* body copy is Manrope; the kit sets a font on p/li too */
.zh p,.zh li,.zh a,.zh span,.zh div,.zh button,.zh summary{font-family:var(--font-body)}
/* ...except the handwriting, which must keep its own faces */
.zh .pennote,.zh .pen-start .pennote{font-family:'La Belle Aurore',cursive}
.zh .sticky,.zh .faq summary,.zh .sticky *{font-family:'Kalam',cursive}

/* the fixed-price directory, framed for people who already know what they need
   so it does not pull undecided visitors off the AI flow */
.all299{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(18px,2.6vw,26px);padding:16px 18px;border-radius:16px;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-lift);
  transition:transform .25s var(--ease-back),box-shadow .2s,border-color .18s;
}
.all299:hover,.all299:focus{transform:translateY(-2px);border-color:rgba(26,110,245,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 32px rgba(10,31,61,.10)}
.all299-tag{
  flex:none;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em;
  background:linear-gradient(135deg,#2a7cf7,var(--accent-deep));color:#fff;
  border-radius:99px;padding:6px 13px;box-shadow:0 4px 12px rgba(26,110,245,.32);
}
.all299-txt{flex:1;min-width:200px;line-height:1.45}
.all299-txt b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.all299-txt small{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.all299 .arw{flex:none;width:16px;height:16px;color:var(--accent-deep)}
@media(max-width:560px){.all299{gap:10px}.all299 .arw{display:none}}

/* ---------- quiet recruitment line under the advocate cards ---------- */
.advcta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  margin-top:16px;padding:13px 16px;border-radius:14px;
  background:rgba(255,255,255,.4);border:1px dashed rgba(26,110,245,.3);
}
.advcta-txt{font-size:13px;font-weight:600;color:var(--muted);line-height:1.5;flex:1;min-width:220px}
.advcta-txt b{color:var(--ink);font-weight:800}
.advcta-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:13px;font-weight:800;color:var(--accent-deep);
  background:rgba(255,255,255,.7);border:1.5px solid rgba(26,110,245,.35);
  border-radius:99px;padding:9px 16px;
  transition:background .18s,border-color .18s,transform .25s var(--ease-back);
}
.advcta-btn:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateY(-2px)}
.advcta-btn svg{width:13px;height:13px}
@media(max-width:560px){.advcta{flex-direction:column;align-items:flex-start;gap:11px}.advcta-btn{width:100%;justify-content:center}}

/* ============================================================
   THE MAKER - the whole product in one looping panel: your words
   (in any Indian language) become a formal notice, an advocate
   stamps it, it goes out on WhatsApp and email. Pure CSS/JS, no
   image weight, sharp at every size. Runs only while on screen.
   ============================================================ */
.mk{
  position:relative;width:100%;border-radius:20px;padding:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.66),rgba(255,255,255,.42));
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,31,61,.04),0 20px 46px rgba(10,31,61,.08);
  overflow:hidden;
}
.mk::before{                      /* faint blueprint grid, keeps the glass from looking empty */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(26,110,245,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(26,110,245,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.mk-grid{position:relative;display:grid;gap:12px;align-items:stretch}
@media(min-width:760px){.mk-grid{grid-template-columns:1fr 30px 1.06fr;gap:0;align-items:start}}
.mk-cap{
  display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.mk-n{
  flex:none;width:17px;height:17px;border-radius:6px;display:grid;place-items:center;
  font-size:9.5px;background:rgba(26,110,245,.12);color:var(--accent-deep);letter-spacing:0;
}

/* ---- stage 1: the chat ---- */
.mk-chat{
  background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  box-shadow:0 6px 18px rgba(10,31,61,.07);
}
.mk-ch-head{
  display:flex;align-items:center;gap:7px;padding:8px 10px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f7faff,#eff5ff);
}
.mk-ch-head img{height:15px;width:auto;display:block}
.mk-lang{
  margin-left:auto;font-size:10px;font-weight:800;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:99px;padding:3px 8px;
  transition:opacity .3s,transform .3s var(--ease-back);
}
.mk-lang.swap{opacity:0;transform:translateY(-5px)}
.mk-body{padding:12px 11px 11px;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.mk-bub{
  align-self:flex-end;max-width:94%;
  background:linear-gradient(135deg,#2f80f8,#1a6ef5);color:#fff;
  border-radius:14px 14px 4px 14px;padding:9px 12px;
  font-size:13px;font-weight:600;line-height:1.45;
  box-shadow:0 4px 12px rgba(26,110,245,.25);
  transition:transform .45s var(--ease-expo),opacity .3s;
}
.mk.st-send .mk-bub{transform:translateY(-3px)}
.mk-caret{display:inline-block;width:1.6px;height:12px;background:#fff;margin-left:1px;
  vertical-align:-1px;animation:mkblink 1s steps(2) infinite}
@keyframes mkblink{50%{opacity:0}}
.mk.st-send .mk-caret,.mk.st-doc .mk-caret,.mk.st-stamp .mk-caret,.mk.st-out .mk-caret{display:none}
.mk-reply{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:12px 12px 12px 4px;padding:7px 10px;
  opacity:0;transform:translateY(5px);transition:opacity .3s,transform .35s var(--ease-back);
}
.mk.st-doc .mk-reply,.mk.st-stamp .mk-reply,.mk.st-out .mk-reply{opacity:1;transform:none}
.mk-dots{display:inline-flex;gap:3px}
.mk-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:mkdot 1.1s ease-in-out infinite}
.mk-dots i:nth-child(2){animation-delay:.16s}
.mk-dots i:nth-child(3){animation-delay:.32s}
@keyframes mkdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* ---- the flow between the two ---- */
.mk-flow{position:relative;height:26px;display:grid;place-items:center}
@media(min-width:760px){.mk-flow{height:150px;margin-top:64px}}
.mk-flow::before{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(26,110,245,.32) 0 4px,transparent 4px 9px);
}
.mk-spark{
  position:absolute;left:50%;top:4px;width:7px;height:7px;border-radius:50%;margin-left:-3.5px;
  background:radial-gradient(circle at 35% 32%,#8fc0ff,var(--accent));
  box-shadow:0 0 0 4px rgba(26,110,245,.16),0 0 12px rgba(26,110,245,.7);
  opacity:0;
}
.mk.st-send .mk-spark{animation:mkspark .75s var(--ease-expo) both}
@keyframes mkspark{0%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:1;transform:translateY(25%) scale(1)}100%{opacity:0;transform:translateY(calc(100% - 10px)) scale(.6)}}
@media(min-width:760px){
  .mk-flow::before{
    left:1px;right:1px;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%);
    background:repeating-linear-gradient(90deg,rgba(26,110,245,.32) 0 4px,transparent 4px 9px);
  }
  .mk-spark{top:50%;left:1px;margin:-3.5px 0 0 0}
  .mk.st-send .mk-spark{animation:mksparkx .75s var(--ease-expo) both}
}
@keyframes mksparkx{0%{opacity:0;transform:translateX(0) scale(.5)}25%{opacity:1;transform:translateX(8px) scale(1)}100%{opacity:0;transform:translateX(27px) scale(.6)}}

/* ---- stage 2: the notice ---- */
.mk-paper{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:14px 15px 15px;overflow:hidden;
  box-shadow:0 8px 24px rgba(10,31,61,.1);
}
.mk-paper::before{                 /* letterhead bar */
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#2563eb,#1a6ef5 45%,#7c3aed);
}
.mk-ttl{
  font-family:var(--font-display);font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-top:3px;
}
.mk-by{font-size:10px;font-weight:700;color:var(--faint);margin:2px 0 11px;letter-spacing:.02em}
.mk-line{
  display:block;height:6px;border-radius:3px;background:rgba(10,31,61,.09);margin-bottom:7px;
  width:0;transition:width .5s var(--ease-expo);
}
.mk.st-doc .mk-line,.mk.st-stamp .mk-line,.mk.st-out .mk-line{width:var(--w,100%)}
.mk-line:nth-of-type(1){transition-delay:.05s}
.mk-line:nth-of-type(2){transition-delay:.16s}
.mk-line:nth-of-type(3){transition-delay:.27s}
.mk-line:nth-of-type(4){transition-delay:.38s}
.mk-demand{
  margin:10px 0 4px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.5;
  opacity:0;transform:translateY(4px);transition:opacity .4s .5s,transform .45s .5s var(--ease-back);
}
.mk.st-doc .mk-demand,.mk.st-stamp .mk-demand,.mk.st-out .mk-demand{opacity:1;transform:none}
.mk-demand b{color:var(--accent-deep);font-weight:800}
.mk-foot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;min-height:44px}
.mk-sign svg{width:76px;height:26px;color:#2b4494;display:block}
.mk-sign svg path{
  stroke-dasharray:180;stroke-dashoffset:180;
  transition:stroke-dashoffset .9s .55s ease-out;
}
.mk.st-doc .mk-sign svg path,.mk.st-stamp .mk-sign svg path,.mk.st-out .mk-sign svg path{stroke-dashoffset:0}
.mk-sign small{display:block;font-size:9px;font-weight:700;color:var(--faint);margin-top:1px}
.mk-stamp{
  position:relative;flex:none;width:62px;height:62px;border-radius:50%;
  border:2.5px solid #1c4fd8;color:#1c4fd8;
  display:grid;place-items:center;text-align:center;
  font-family:var(--font-display);font-size:8px;font-weight:800;letter-spacing:.1em;line-height:1.25;
  margin-right:8px;opacity:0;transform:translateY(-15px) rotate(-27deg) scale(1.22);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .95 .05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .95 .05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}
.mk-stamp::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid currentColor;opacity:.75}
.mk.st-stamp .mk-stamp,.mk.st-out .mk-stamp{
  opacity:.88;transform:translateY(0) rotate(-11deg) scale(1);
  transition:opacity .1s linear,transform .34s cubic-bezier(.24,1.6,.4,1);
}
.mk-shock{
  position:absolute;right:8px;bottom:0;width:62px;height:62px;border-radius:50%;
  border:2px solid rgba(28,79,216,.5);opacity:0;pointer-events:none;
}
.mk.st-stamp .mk-shock{animation:mkshock .55s ease-out .06s both}
@keyframes mkshock{0%{opacity:.75;transform:scale(.85)}100%{opacity:0;transform:scale(1.9)}}

/* ---- stage 3: it lands ---- */
.mk-out{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;
}
.mk-pin{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;color:#0e8a4f;
  background:var(--good-soft);border:1px solid rgba(14,138,79,.22);
  border-radius:99px;padding:5px 10px;
  opacity:0;transform:translateY(6px) scale(.9);
  transition:opacity .3s,transform .4s var(--ease-back);
}
.mk-pin svg{width:13px;height:13px}
.mk.st-out .mk-pin{opacity:1;transform:none}
.mk.st-out .mk-pin:nth-child(2){transition-delay:.22s}
.mk-eta{
  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--faint);
  opacity:0;transition:opacity .35s .44s;
}
.mk.st-out .mk-eta{opacity:1}
@media(prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation:none !important;transition:none !important}
}