/* ==========================================================================
   FIN V2 — re-skin for the carried-over service-page content.

   The 14 service pages keep their v1 markup (/v2/_inc/content_*.php) because
   the knowledge on them is the product and their class names are load-bearing
   for their own scripts. This file dresses that exact vocabulary in the V2
   language: hero-title/hero-sub/hero-cta, trustbar/trustpill, kpis/kpi,
   steps/step, panel/panel-soft, iconlist/iconli, grid2, bcard, cov, faq.

   Scoped under .v2-legacy so it can never reach the V2-native pages.
   ========================================================================== */

.v2-legacy{ display:block; }

/* v1 token names used inline throughout that markup -> V2 palette */
.v2-legacy{
  --ink:#f2f4f7;
  --mut:var(--muted);
  --line:var(--line-strong);
  --p1:var(--green-light);
  --p2:var(--green);
  --svc-ink:#f2f4f7;
  --svc-muted:var(--muted);
  --svc-line:rgba(255,255,255,.12);
  --svc-panel:var(--panel);
  --svc-panel2:var(--panel-2);
  --svc-gold:var(--green);
  --svc-gold-light:var(--green-light);
  --card:var(--panel);
  --text:#f2f4f7;
  --bg:transparent;
}

.v2-legacy .container{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:24px; }
@media (max-width:600px){ .v2-legacy .container{ padding-inline:18px; } }
.v2-legacy .section{ padding-block:clamp(52px,7vw,96px); background:transparent; }

/* --------------------------------------------------------------- hero --- */
.v2-legacy .hero-home,
.v2-legacy .hero-health,
.v2-legacy [class*="hero-"]:not(.hero-title):not(.hero-sub):not(.hero-cta):not(.hero-badges):not(.hero-left):not(.hero-top){
  background:transparent !important;
  border-bottom:1px solid var(--line-strong);
  padding:clamp(48px,7vw,84px) 0 clamp(32px,4vw,52px);
  position:relative; overflow:visible;
}
.v2-legacy [class*="hero-"]::before{ display:none !important; }


.v2-legacy .hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.v2-legacy .badge-soft{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(34,197,94,.09) !important;
  border:1px solid rgba(74,222,128,.24) !important;
  color:var(--green-light) !important;
  font-family:var(--num); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:8px 12px; border-radius:var(--r-pill);
}
.v2-legacy .badge-soft i{ color:var(--green-light) !important; }

.v2-legacy .hero-title{
  font-size:clamp(34px,5.4vw,62px); font-weight:800; line-height:1.04;
  letter-spacing:-.04em; margin:0 0 18px; max-width:20ch; text-wrap:balance;
  color:var(--ink);
}
.v2-legacy .hero-sub{
  font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--muted);
  max-width:62ch; margin:0;
}
.v2-legacy .hero-sub b{ color:var(--ink); font-weight:600; }
.v2-legacy .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ------------------------------------------------------------ buttons --- */
.v2-legacy .btn,
.v2-legacy .btn-hero{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 22px; border-radius:var(--r-pill);
  font-size:15px; font-weight:700; line-height:1; white-space:nowrap;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04); color:var(--ink);
  cursor:pointer; text-decoration:none;
  transition:background var(--motion-normal) var(--ease), border-color var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease);
}
.v2-legacy .btn:hover,.v2-legacy .btn-hero:hover{ background:rgba(255,255,255,.09); }
.v2-legacy .btn.primary,
.v2-legacy .btn-hero.primary{
  background:var(--green) !important; border-color:transparent !important; color:#04140b !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(34,197,94,.22);
}
.v2-legacy .btn.primary:hover,.v2-legacy .btn-hero.primary:hover{ background:var(--green-light) !important; transform:translateY(-1px); }
.v2-legacy .btn.ghost,.v2-legacy .btn-hero.ghost{ background:transparent; }

/* ------------------------------------------------------------ trustbar - */
.v2-legacy .trustbar{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;
  padding:0; background:transparent !important; border:0 !important;
}
.v2-legacy .trustpill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong) !important; background:rgba(255,255,255,.03) !important;
  color:var(--muted) !important; font-size:13.5px; font-weight:500;
}
.v2-legacy .trustpill i{ color:var(--green-light) !important; }

/* ----------------------------------------------------------------- kpi -- */
.v2-legacy .kpis{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  background:rgba(19,19,22,.55);
}
.v2-legacy .kpi{
  padding:24px 22px; border-left:1px solid var(--line-strong);
  background:transparent !important; border-radius:0 !important;
  transition:background var(--motion-normal) var(--ease);
}
.v2-legacy .kpi:first-child{ border-left:0; }
.v2-legacy .kpi:hover{ background:rgba(34,197,94,.05) !important; }
.v2-legacy .kpi .n{
  font-family:var(--num); font-size:27px; font-weight:700; letter-spacing:-.02em;
  color:var(--green) !important; text-shadow:0 0 20px var(--green-glow);
  font-variant-numeric:tabular-nums; display:block;
}
.v2-legacy .kpi .t,
.v2-legacy .kpi .d{ font-size:13px; color:var(--muted) !important; margin-top:5px; display:block; line-height:1.5; }
@media (max-width:700px){ .v2-legacy .kpis{ grid-template-columns:1fr; } .v2-legacy .kpi{ border-left:0; border-top:1px solid var(--line-strong); } .v2-legacy .kpi:first-child{ border-top:0; } }

/* --------------------------------------------------------------- steps -- */
.v2-legacy .steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px); margin-top:clamp(28px,4vw,44px);
}
.v2-legacy .step{
  position:relative; padding:0; padding-top:22px;
  border:0 !important; border-top:2px solid var(--green) !important;
  background:transparent !important; border-radius:0 !important;
}
.v2-legacy .step .n{
  position:absolute; top:-2px; left:0; transform:translateY(-100%); padding-bottom:8px;
  font-family:var(--num); font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--green) !important; background:transparent !important;
  width:auto !important; height:auto !important; border-radius:0 !important;
  display:block !important; line-height:1;
}
.v2-legacy .step .t{ font-size:18px; font-weight:700; letter-spacing:-.022em; color:var(--ink); display:block; margin-bottom:7px; }
.v2-legacy .step .d{ font-size:14px; line-height:1.6; color:var(--muted); display:block; }
@media (max-width:840px){ .v2-legacy .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px; } }
@media (max-width:520px){ .v2-legacy .steps{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------- panels -- */
.v2-legacy .panel,
.v2-legacy .panel-soft{
  background:var(--panel) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-m) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px -30px rgba(0,0,0,.8) !important;
  color:var(--ink);
}
.v2-legacy .panel::before,.v2-legacy .panel-soft::before{ display:none !important; }
.v2-legacy .pad{ padding:clamp(20px,2.6vw,30px) !important; }
.v2-legacy .grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); }
@media (max-width:820px){ .v2-legacy .grid2{ grid-template-columns:1fr; } }

.v2-legacy .h,
.v2-legacy h2,
.v2-legacy h3{ color:var(--ink); font-weight:700; letter-spacing:-.03em; line-height:1.12; }
.v2-legacy .h{ font-size:clamp(22px,2.8vw,32px); display:block; margin-bottom:12px; }
.v2-legacy .p,
.v2-legacy p{ color:var(--muted); line-height:1.7; font-size:15.5px; }
.v2-legacy .p b,.v2-legacy p b,.v2-legacy strong{ color:var(--ink); font-weight:600; }

/* ------------------------------------------------------------ icon list - */
.v2-legacy .iconlist{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; }
.v2-legacy .iconli{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:15px; line-height:1.6;
}
.v2-legacy .iconli:last-child{ border-bottom:0; }
.v2-legacy .iconli i,
.v2-legacy .iconli .ico{
  color:var(--green-light) !important; flex:0 0 auto; margin-top:3px;
  background:transparent !important; width:auto !important; height:auto !important;
}
.v2-legacy .iconli b{ color:var(--ink); }

/* ------------------------------------------------------------- b-cards -- */
.v2-legacy .bcard{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--panel) !important; border:1px solid var(--line-strong) !important;
  border-radius:var(--r-m) !important; padding:20px !important;
}
.v2-legacy .bicon{ color:var(--green-light) !important; background:rgba(34,197,94,.1) !important;
  width:40px; height:40px; border-radius:var(--r-s); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.v2-legacy .btxt{ color:var(--muted); font-size:15px; line-height:1.6; }
.v2-legacy .btxt b{ color:var(--ink); display:block; margin-bottom:4px; font-weight:600; }

/* ------------------------------------------------------------- coverage - */
.v2-legacy .coverageGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.v2-legacy .cov{
  background:rgba(255,255,255,.02) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-m) !important; padding:16px !important; color:var(--muted); font-size:14.5px;
}
.v2-legacy .cov b{ color:var(--ink); }

/* ---------------------------------------------------------- mini notes -- */
.v2-legacy .mini-note{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--green-wash) !important; border:1px solid rgba(74,222,128,.22) !important;
  padding:14px !important; border-radius:var(--r-m) !important;
  color:var(--muted) !important; line-height:1.6; font-size:14px; margin-top:14px;
}
.v2-legacy .mini-note i{ color:var(--green-light) !important; margin-top:3px; }

/* ----------------------------------------------------------------- faq -- */
.v2-legacy .faq{ border-top:1px solid var(--line); }
.v2-legacy .faq details{ border-top:0 !important; border-bottom:1px solid var(--line); padding:0 !important; }
.v2-legacy .faq summary{
  cursor:pointer; list-style:none; padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:clamp(16px,1.8vw,20px); font-weight:700; letter-spacing:-.024em; color:var(--ink);
}
.v2-legacy .faq summary::-webkit-details-marker{ display:none; }
.v2-legacy .faq summary:hover{ color:var(--green-light); }
.v2-legacy .faq summary::after{
  content:""; width:11px; height:11px; flex:0 0 auto;
  border-right:1.6px solid var(--green); border-bottom:1.6px solid var(--green);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--motion-normal) var(--ease);
}
.v2-legacy .faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.v2-legacy .faq details > div{ color:var(--muted) !important; margin-top:0 !important; padding-bottom:22px; line-height:1.7; }

/* ------------------------------------------------------------- tidy-up -- */
.v2-legacy .testimonialWrap{ background:var(--panel) !important; border:1px solid var(--line-strong) !important; border-radius:var(--r-m) !important; }
.v2-legacy .starline{ color:#fbbf24 !important; }
.v2-legacy .muted{ color:var(--muted) !important; }
.v2-legacy img{ border-radius:var(--r-m); }
.v2-legacy table{ width:100%; border-collapse:collapse; }
.v2-legacy th,.v2-legacy td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:14.5px; color:var(--muted); }
.v2-legacy th{ font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }

/* ---- the "S" and the scrim, for the carried-over hero blocks ------------ */
.v2-legacy .hero-home, .v2-legacy .hero-agendar, .v2-legacy .hero-health, .v2-legacy .hero-p3,
.v2-legacy .hero-car, .v2-legacy .hero-trip, .v2-legacy .hero-pets, .v2-legacy .hero-kaution,
.v2-legacy .hero-law, .v2-legacy .hero-rc, .v2-legacy .hero-credit, .v2-legacy .hero-rene,
.v2-legacy .hero-afin, .v2-legacy .hero-ref{
  display:flex !important; align-items:center; min-height:min(64vh,560px);
}
.v2-legacy .hero-home > .container, .v2-legacy .hero-agendar > .container, .v2-legacy .hero-health > .container,
.v2-legacy .hero-p3 > .container, .v2-legacy .hero-car > .container, .v2-legacy .hero-trip > .container,
.v2-legacy .hero-pets > .container, .v2-legacy .hero-kaution > .container, .v2-legacy .hero-law > .container,
.v2-legacy .hero-rc > .container, .v2-legacy .hero-credit > .container, .v2-legacy .hero-rene > .container,
.v2-legacy .hero-afin > .container, .v2-legacy .hero-ref > .container{ width:100%; position:relative; z-index:1; }
.v2-legacy .hero-home::after, .v2-legacy .hero-agendar::after, .v2-legacy .hero-health::after, .v2-legacy .hero-p3::after,
.v2-legacy .hero-car::after, .v2-legacy .hero-trip::after, .v2-legacy .hero-pets::after, .v2-legacy .hero-kaution::after,
.v2-legacy .hero-law::after, .v2-legacy .hero-rc::after, .v2-legacy .hero-credit::after, .v2-legacy .hero-rene::after,
.v2-legacy .hero-afin::after, .v2-legacy .hero-ref::after{
  content:"" !important; display:block !important; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.5) 46%, rgba(10,10,12,0) 78%);
}
@media (max-width:860px){
  .v2-legacy .hero-home, .v2-legacy .hero-agendar, .v2-legacy .hero-health, .v2-legacy .hero-p3,
  .v2-legacy .hero-car, .v2-legacy .hero-trip, .v2-legacy .hero-pets, .v2-legacy .hero-kaution,
  .v2-legacy .hero-law, .v2-legacy .hero-rc, .v2-legacy .hero-credit, .v2-legacy .hero-rene,
  .v2-legacy .hero-afin, .v2-legacy .hero-ref{ min-height:0; }
  .v2-legacy .hero-home::after, .v2-legacy .hero-agendar::after, .v2-legacy .hero-health::after, .v2-legacy .hero-p3::after,
  .v2-legacy .hero-car::after, .v2-legacy .hero-trip::after, .v2-legacy .hero-pets::after, .v2-legacy .hero-kaution::after,
  .v2-legacy .hero-law::after, .v2-legacy .hero-rc::after, .v2-legacy .hero-credit::after, .v2-legacy .hero-rene::after,
  .v2-legacy .hero-afin::after, .v2-legacy .hero-ref::after{
    background:linear-gradient(180deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.82) 38%, rgba(10,10,12,.72) 70%, rgba(10,10,12,.35) 100%);
  }
}

/* icons carried over from v1 markup: give them the /services ring */
.v2-legacy .ico, .v2-legacy .bicon{
  display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px !important; height:44px !important; border-radius:50% !important;
  background:rgba(34,197,94,.1) !important; border:1px solid rgba(120,225,173,.3) !important;
  color:var(--green) !important;
}


/* ---- second pass: the carried-over pages on a phone ---------------------- */
@media (max-width:640px){
  .v2-legacy .section{ padding-block:clamp(36px,10vw,56px); }
  .v2-legacy .hero-title{ font-size:clamp(30px,8.6vw,40px); line-height:1.06; }
  .v2-legacy .hero-sub{ font-size:16px; }
  .v2-legacy .panel.pad,.v2-legacy .panel-soft.pad,.v2-legacy .pad{ padding:20px !important; }
  .v2-legacy .h{ font-size:clamp(21px,6vw,26px); }
  .v2-legacy .grid2{ gap:16px; }
  .v2-legacy .iconli{ padding:11px 0; }
  .v2-legacy .badge-soft{ font-size:10px; padding:7px 10px; }
}
.v2-legacy .hero-badges{ row-gap:8px; }
.v2-legacy .faq summary:focus-visible{ outline-offset:-2px; }
.v2-legacy a:not(.btn):not(.btn-hero){ transition:color .16s ease; }
.v2-legacy .p a,.v2-legacy p a{ color:var(--green-light); text-decoration:underline; text-decoration-color:rgba(74,222,128,.4); text-underline-offset:.2em; text-decoration-thickness:1px; }
.v2-legacy img{ max-width:100%; height:auto; }