/* ============================================================
   DEMSEN - SERVICE PAGES
   Shared primitives for lead-rescue, reputation-management and
   speed-to-lead. Each page then layers its own section layouts
   in a page-level <style> block, so the three read as three
   distinct pages inside one brand system: same face, same
   greys, same single orange accent, same header and footer.

   Loads after site.css and depends on its tokens.
   ============================================================ */

/* ============================================================
   PAGE RHYTHM
   Sections carry their own separation. A hairline is drawn only
   between two light sections; a dark band separates itself.
   ============================================================ */
.svc main > section:not(.svc-hero){ padding-block:var(--sec-pad); }
.svc .line-top{ border-top:1px solid var(--line); }

/* dark full-bleed band: the same token swap .sec--dark performs */
.band{
  --fg: var(--on-dark); --fg-body: var(--on-dark-body); --fg-muted: var(--on-dark-muted);
  --hair: var(--line-dark); --hair-strong: var(--line-dark-2);
  background:var(--ink-950); color:var(--on-dark-body);
}
.band h1,.band h2,.band h3,.band .stat-n,.band .h2,.band .display{ color:var(--on-dark); }
.band .src{ color:var(--on-dark-muted); }
.band p,.band .lede{ color:var(--on-dark-body); }
.band .tlink{ color:var(--on-dark); }
.band + .band{ border-top:1px solid var(--line-dark); }

/* ============================================================
   SERVICE HERO
   The shared shell: dark, one column, oversized headline. Each
   page supplies its own signature motion through .sig, which is
   decorative and always aria-hidden.
   ============================================================ */
.svc-hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(84px,14vh,164px));
  padding-bottom:clamp(72px,12vh,136px);
}
.svc-hero > .wrap{ position:relative; z-index:2; }
.sig{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* film grain, shared with the homepage hero: kills gradient banding */
.sig::after{
  content:""; position:absolute; inset:0; opacity:.05;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.svc-hero h1{
  color:var(--on-dark); font-weight:600;
  font-size:clamp(3rem, 1.7rem + 5.4vw, 6rem); line-height:1; letter-spacing:-.042em;
  margin:0 0 var(--s-4); max-width:15ch; text-wrap:balance;
}
.svc-hero .deck{
  color:var(--on-dark-body);
  font-size:clamp(1.0625rem, .98rem + .42vw, 1.3125rem); line-height:1.62;
  max-width:52ch; margin:0;
}
.svc-hero .hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:clamp(34px,4.6vh,50px); }
.svc-hero .tlink{ color:var(--on-dark-body); }
.svc-hero .tlink:hover{ color:var(--accent); }

/* the closing rail of the hero: what the system does, never a result */
.hero-rail{
  list-style:none; margin:clamp(48px,7vh,76px) 0 0; padding:clamp(20px,2.8vh,28px) 0 0;
  border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px);
}
.hero-rail li{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-dark-muted); line-height:1.6;
}

/* ============================================================
   STATS
   One numeral treatment across all three pages. Tabular figures
   everywhere so a counting number never shifts the layout.
   ============================================================ */
.stat-n{
  display:block; font-family:var(--sans); font-weight:600;
  letter-spacing:-.045em; line-height:.92; color:var(--fg);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.stat-n--xl{ font-size:clamp(4rem, 2.2rem + 7.6vw, 8.5rem); }
.stat-n--lg{ font-size:clamp(2.9rem, 1.9rem + 3.6vw, 4.75rem); }
.stat-n--md{ font-size:clamp(2.3rem, 1.7rem + 2.2vw, 3.25rem); }

.stat-t{ font-size:var(--fs-body); line-height:1.68; color:var(--fg-body); margin:var(--s-3) 0 0; max-width:38ch; }
.band .stat-t{ color:var(--on-dark-body); }

/* source attribution: small, mono, always present under a figure */
.src{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-muted); margin-top:var(--s-2);
}

/* the standing note that keeps every figure honest */
.research-note{
  font-size:var(--fs-sm); line-height:1.8; color:var(--fg-muted);
  max-width:78ch; margin:clamp(44px,6vw,72px) 0 0;
  padding-top:var(--s-4); border-top:1px solid var(--hair);
}
.band .research-note{ color:var(--on-dark-muted); border-top-color:var(--line-dark); }

/* ============================================================
   METERS
   A hairline track with a filled bar, scaled on the X axis from
   a --p (0 to 1), so the fill is a compositor transform rather
   than a width animation.
   ============================================================ */
.meter{ display:block; height:6px; border-radius:3px; background:var(--hair); overflow:hidden; }
.meter > i{
  display:block; height:100%; border-radius:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.1s var(--ease-out); transition-delay:var(--md,0s);
}
.meter.in > i{ transform:scaleX(var(--p,0)); }
.band .meter{ background:rgba(244,244,242,.12); }
/* the quiet variant is the comparison bar, so it stays monochrome and the
   orange one is the figure being argued */
.meter--quiet > i{ background:var(--fg-muted); }
.band .meter--quiet > i{ background:rgba(244,244,242,.34); }

/* ============================================================
   WHO IT IS FOR
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,3.4vw,40px); }
.chip{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-body); line-height:1;
  border:1px solid var(--hair-strong); border-radius:var(--r-pill); padding:.9em 1.2em;
  transition:border-color var(--hover) var(--ease), color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
.chip:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.band .chip{ color:var(--on-dark-body); border-color:var(--line-dark-2); }
.band .chip:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   ACCORDION (FAQ)
   A button plus a region rather than <details>, so the open and
   close are a smooth grid-template-rows transition and the state
   is announced through aria-expanded.
   ============================================================ */
.acc{ border-top:1px solid var(--hair-strong); }
.acc-item{ border-bottom:1px solid var(--hair); }
.acc-item h3{ margin:0; }
.acc-q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(20px,4vw,56px);
  width:100%; text-align:left; cursor:pointer;
  padding:clamp(22px,2.6vw,30px) 0;
  font-weight:600; font-size:var(--fs-h3); letter-spacing:-.02em; line-height:1.24;
  color:var(--fg); transition:color var(--hover) var(--ease);
}
.acc-q:hover{ color:var(--accent); }
.acc-ic{ position:relative; flex:none; width:20px; height:20px; margin-top:.28em; color:var(--accent); }
.acc-ic::before,.acc-ic::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.acc-ic::before{ width:14px; height:1.5px; }
.acc-ic::after{ width:1.5px; height:14px; }
.acc-item.open .acc-ic::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }
.acc-item.open .acc-a{ grid-template-rows:1fr; }
.acc-a > div{ overflow:hidden; }
.acc-a p{ margin:0 0 clamp(20px,2.4vw,28px); color:var(--fg-body); font-size:var(--fs-sm); line-height:1.75; max-width:64ch; }

/* ============================================================
   [FILL IN] PLACEHOLDERS
   Deliberately loud. These are founder-only specifics that must
   not be invented, so they stay hatched and dashed until they
   are replaced with real copy.
   ============================================================ */
.fill{
  display:block; margin-top:var(--s-3); max-width:62ch;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.04em; line-height:1.75; color:var(--fg);
  border:1px dashed var(--hair-strong); border-radius:var(--r-sm);
  padding:.9em 1.1em;
  background-image:repeating-linear-gradient(135deg, rgba(255,90,31,.07) 0 6px, transparent 6px 13px);
}
.fill::before{
  content:"To replace"; display:block; font-size:.5625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.5em;
}
.fill--inline{ display:inline-block; margin-top:0; vertical-align:middle; }
.band .fill{ color:var(--on-dark); border-color:var(--line-dark-2); }

/* ============================================================
   CLOSING CTA BAND
   ============================================================ */
.cta-band{
  --fg: var(--on-dark); --fg-body: var(--on-dark-body); --fg-muted: var(--on-dark-muted);
  --hair: var(--line-dark); --hair-strong: var(--line-dark-2);
  background:var(--ink-950); color:var(--on-dark-body); text-align:center;
  padding-block:var(--sec-pad);
}
.cta-band .wrap{ max-width:900px; }
.cta-band h2{
  color:var(--on-dark); font-weight:600;
  font-size:var(--fs-display); line-height:1.02; letter-spacing:-.038em;
  margin:0; text-wrap:balance;
}
.cta-band p{ color:var(--on-dark-body); font-size:var(--fs-lede); line-height:1.62; max-width:52ch; margin:var(--s-3) auto 0; }
.cta-band .btn{ margin-top:clamp(32px,4.4vh,46px); }
.cta-band .fine{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-muted); margin-top:20px;
}

/* ============================================================
   SHARED SMALL PIECES
   ============================================================ */
.detail-list{ list-style:none; margin:var(--s-4) 0 0; padding:0; border-top:1px solid var(--hair); }
.detail-list li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding:var(--s-3) 0; border-bottom:1px solid var(--hair);
  color:var(--fg-body); font-size:var(--fs-sm); line-height:1.7;
}
.detail-list li .k{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); min-width:11ch;
}
.band .detail-list li{ color:var(--on-dark-body); }

/* ============================================================
   SMS DEMO (Lead Rescue page)
   A dark device panel that sits on a light section.
   ============================================================ */
.demo-outer{ width:100%; }
.demo{
  width:100%; max-width:392px; margin-inline:auto;
  background:linear-gradient(180deg,#1A1A1A 0%,#131313 100%);
  border:1px solid var(--line-dark-2); border-radius:var(--r-phone); padding:14px; position:relative;
}
.demo::before{
  content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:78px; height:5px; border-radius:5px; background:var(--line-dark-2);
}
.demo-inner{
  background:var(--ink-950); border:1px solid var(--line-dark); border-radius:20px;
  padding:34px 16px 18px; min-height:454px; display:flex; flex-direction:column;
}
.demo-head{ display:flex; align-items:center; gap:12px; padding:0 6px 16px; border-bottom:1px solid var(--line-dark); margin-bottom:18px; }
.demo-avatar{
  width:40px; height:40px; border-radius:var(--r-sm); flex:none; background:var(--ink-900);
  border:1px solid var(--line-dark-2); display:grid; place-items:center; color:var(--on-dark);
}
.demo-avatar svg{ width:19px; height:19px; }
.demo-head .who{ min-width:0; }
.demo-head .who b{ font-weight:600; font-size:.95rem; display:block; letter-spacing:-.02em; color:var(--on-dark); }
.demo-head .who .missed{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--on-dark-body); margin-top:2px; }
.demo-head .who .missed svg{ width:12px; height:12px; }
.demo-tag{
  margin-left:auto; align-self:flex-start; flex:none; font-family:var(--mono);
  font-size:.56rem; letter-spacing:.18em; color:var(--accent);
  border:1px solid rgba(255,90,31,.4); border-radius:5px; padding:4px 7px; text-transform:uppercase;
}
.thread{ display:flex; flex-direction:column; gap:12px; flex:1; }
.d-sys{ align-self:center; text-align:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; color:var(--on-dark-muted); line-height:1.5; max-width:88%; }
.d-sys .count{ color:var(--accent); }
.bubble{ max-width:80%; padding:11px 14px; border-radius:16px; font-size:.9rem; line-height:1.45; position:relative; }
.bubble.out{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px; font-weight:450; }
.bubble.in{ align-self:flex-start; background:transparent; color:var(--on-dark); border:1px solid var(--line-dark-2); border-bottom-left-radius:5px; }
.d-stamp{ align-self:flex-end; font-family:var(--mono); font-size:.62rem; color:var(--on-dark-muted); letter-spacing:.02em; margin-top:-4px; }
.typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:13px 15px; border:1px solid var(--line-dark-2); border-radius:16px; border-bottom-left-radius:5px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--on-dark-body); display:block; animation:typing 1.3s var(--ease) infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }
.d-final{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-dark); display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--on-dark-body); line-height:1.45; }
.d-final .chk{ width:20px; height:20px; border-radius:50%; flex:none; border:1px solid rgba(255,90,31,.5); color:var(--accent); display:grid; place-items:center; }
.d-final .chk svg{ width:11px; height:11px; }
.demo-cap{
  margin:20px auto 0; max-width:392px; text-align:center; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-muted); line-height:1.7;
}
html.js .demo [data-step]{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js .demo [data-step].show{ opacity:1; transform:none; }
html.js .demo .typing{ display:none; }
html.js .demo .typing.show{ display:inline-flex; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-rail{ grid-template-columns:1fr; gap:12px; }
  .svc-hero h1{ max-width:14ch; }
}
@media (max-width:640px){
  .svc-hero{ padding-top:calc(var(--header-h) + clamp(60px,10vh,92px)); }
  .acc-q{ font-size:1.15rem; }
  .chips{ gap:8px; }
  .chip{ padding:.85em 1.05em; }
}

/* ============================================================
   REDUCED MOTION
   Every animated element is shown in its final state.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .svc-hero [data-seq]{ opacity:1; transform:none; }
  html.js .demo [data-step]{ opacity:1; transform:none; }
  .meter > i{ transform:scaleX(var(--p,1)) !important; transition:none !important; }
  .sig [class*="pulse"],.sig [class*="sweep"],.sig [class*="drift"]{ animation:none !important; }
}