/* =====================================================================
   HView Digital Solutions — page redesign layer  (v2)
   Follows the H View theme: same container (1320px), hero panel as the
   Free Tools pages, Newsreader headings, Mukta body, H View gradient.
   Scope: everything lives under .hds-page (added to <main> by the JS).
   ===================================================================== */

.hds-page{
  --hds-w: var(--header-w, 1320px);
  --hds-gap: 16px;
  --hds-navy: var(--hv-navy, #0c1a3d);
  --hds-ink: var(--hv-ink, #18213d);
  --hds-muted: var(--hv-muted, #56607c);
  --hds-subtle: var(--hv-subtle, #7e87a1);
  --hds-line: var(--hv-line, #e3e7f0);
  --hds-blue: var(--hv-blue, #2343d4);
  --hds-violet: #6a31c0;
  --hds-mag: var(--hv-magenta, #c81b84);
  --hds-grad: var(--hv-blend, linear-gradient(100deg,#2343d4,#6a31c0 52%,#c81b84));
  --hds-hero-bg: linear-gradient(120deg,#fff0f7 0%,#f6f1fd 48%,#edf1ff 100%);
  --hds-paper: var(--hv-paper, #f6f7fb);
  --hds-serif: var(--hv-serif, 'Newsreader', Georgia, 'Times New Roman', serif);
  --hds-sans: var(--hv-sans, 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  --hds-ease: var(--hv-ease, cubic-bezier(.2,.7,.2,1));
  --hds-shadow: var(--hv-shadow, 0 1px 2px rgba(12,26,61,.05), 0 14px 36px rgba(12,26,61,.08));
  --hds-shadow-sm: var(--hv-shadow-sm, 0 1px 2px rgba(12,26,61,.05), 0 6px 18px rgba(12,26,61,.05));
  font-family: var(--hds-sans);
  color: var(--hds-ink);
}
.hds-page svg{ max-width:none; }

/* ---------- one container for every section (same as Free Tools) */
.hds-page{ --hds-cw: min(var(--hds-vw, 100vw) - 32px, var(--hds-w)); }
.hds-page > section{
  width: var(--hds-cw) !important;
  max-width: none !important;
  margin: 0 0 0 calc(var(--hds-off, 50%) - var(--hds-cw) / 2) !important;
  padding: 64px 0 0 !important;
  box-sizing: border-box;
}
.hds-page > section.hv-brief{ width:auto !important; padding:0 !important; margin:72px 0 0 !important; }

/* ---------- H2: Newsreader + animated gradient bar (home page pattern) */
.hds-page > section > h2,
.hds-page .hds-service-head h2{
  position: relative;
  font-family: var(--hds-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em;
  color: var(--hds-navy) !important;
  margin: 0 0 10px !important;
  padding-top: 20px !important;
}
.hds-page > section > h2::before,
.hds-page .hds-service-head h2::before{
  content:""; position:absolute; left:0; top:0;
  width:0; height:4px; border-radius:4px;
  background: linear-gradient(90deg,#2343d4,#6a31c0,#c81b84,#6a31c0,#2343d4);
  background-size: 300% 100%;
  transition: width .9s var(--hds-ease) .15s;
  animation: hdsBar 6s linear infinite;
}
.hds-page section.hds-in > h2::before,
.hds-page section.hds-in .hds-service-head h2::before{ width:48px; }
.hds-page > section > h2:hover::before,
.hds-page .hds-service-head h2:hover::before{ width:72px; }
@keyframes hdsBar{ to{ background-position: 300% 0; } }

.hds-page .lead{ color: var(--hds-muted); font-size:17.5px; line-height:1.65; max-width:70ch; margin:0 0 24px; }
.hds-page .hds-section-kicker{
  display:inline-block; font: 700 12px/1 var(--hds-sans); letter-spacing:.14em; text-transform:uppercase; color: var(--hds-mag); margin-bottom:12px;
}

/* =====================================================================
   HERO — identical frame to the Free Tools hero (.hvt-hero)
   ===================================================================== */
.hds-page > section.hds-hero{
  margin-top: 28px !important;
  padding: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: 56px;
  align-items: center;
  background: var(--hds-hero-bg) !important;
  border: 1px solid #efe4f3 !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 0 !important;
}
.hds-page .hds-hero::before, .hds-page .hds-hero::after{ content:none !important; }
.hds-page .hds-hero > div:first-child{ min-width:0; }
.hds-page .hds-hero-icon{
  width:56px; height:56px; border-radius:17px; display:grid; place-items:center; margin:0 0 16px;
  background: var(--hds-grad); color:#fff; box-shadow: 0 10px 24px -8px rgba(106,49,192,.85);
}
.hds-page .hds-hero-icon svg{ width:28px; height:28px; }
.hds-page .hds-hero .hds-tag{ display:none !important; }
.hds-page .hds-hero h1{
  font-family: var(--hds-serif) !important; font-weight:600 !important;
  font-size: clamp(34px, 3.4vw, 48px) !important; line-height:1.07 !important; letter-spacing:-.015em !important;
  color: var(--hds-navy) !important; margin: 0 0 14px !important; max-width: 17ch;
}
.hds-page .hds-hero .hds-title-accent{
  background: var(--hds-grad); -webkit-background-clip:text; background-clip:text; color:transparent !important;
  font: inherit !important;
}
.hds-page .hds-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font: 500 14px/1.5 var(--hds-sans); color:#52627a; margin: 0 0 14px; }
.hds-page .hds-meta span{ display:inline-flex; align-items:center; gap:6px; }
.hds-page .hds-meta i{ width:6px; height:6px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px #16a34a22; animation: hdsPulse 2s infinite; }
.hds-page .hds-hero .lead{ font-size:18.5px !important; line-height:1.55 !important; color: var(--hds-muted) !important; margin: 0 0 18px !important; max-width: 52ch; }
.hds-page .hds-hero .hds-actions{ display:none !important; }
.hds-page .hds-hero .hds-trust{
  display:flex !important; flex-wrap:wrap; gap:8px 22px; margin:0 0 22px !important; padding:0 0 22px !important;
  border-bottom:1px solid #e6dff0; font: 600 15px/1.3 var(--hds-sans) !important; color: var(--hds-navy) !important;
}
.hds-page .hds-hero .hds-trust span{ display:inline-flex; align-items:center; gap:7px; }
.hds-page .hds-hero .hds-trust b{ color: var(--hds-violet) !important; font-weight:800; }
.hds-page .hds-jump{ display:flex; flex-wrap:wrap; gap:8px; }
.hds-page .hds-jump a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  background:#fff; border:1px solid #ebe5f3; color: var(--hds-ink); text-decoration:none;
  font: 600 14px/1.2 var(--hds-sans); transition: transform .2s var(--hds-ease), box-shadow .2s, background .2s, color .2s;
}
.hds-page .hds-jump a svg{ width:15px; height:15px; color: var(--hds-violet); }
.hds-page .hds-jump a:hover{ transform: translateY(-2px); box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-jump a.on{ background: var(--hds-navy); color:#fff; border-color: var(--hds-navy); }
.hds-page .hds-jump a.on svg{ color:#fff; }

/* right column = white card like .hvt-start */
.hds-page .hds-illus{ position:relative !important; display:block !important; min-height:0 !important; height:auto !important; width:100% !important; max-width:none !important; justify-self:stretch !important; align-self:center; margin:0 !important; padding:0 !important; transform:none !important; }
.hds-page .hds-start{ width:100%; box-sizing:border-box; }
.hds-page .hds-illus > svg{ display:none !important; }
.hds-page .hds-start{
  background:#fff; border-radius:24px; padding:20px; box-shadow: 0 24px 60px -20px rgba(35,30,90,.22), 0 1px 2px rgba(12,26,61,.05);
  text-align:center;
}
.hds-page .hds-start .hds-cta{
  display:inline-flex; align-items:center; gap:10px; margin: 18px auto 0; padding:14px 26px; border-radius:999px;
  background: var(--hds-grad); color:#fff !important; text-decoration:none; font: 700 16px/1 var(--hds-sans);
  box-shadow: 0 12px 26px -10px rgba(106,49,192,.8); transition: transform .25s var(--hds-ease), box-shadow .25s;
}
.hds-page .hds-start .hds-cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(106,49,192,.9); }
.hds-page .hds-start .hds-cta svg{ width:18px; height:18px; }
.hds-page .hds-start small{ display:block; margin-top:10px; color: var(--hds-subtle); font: 500 14px/1.5 var(--hds-sans); }
.hds-page .hds-start small a{ color: var(--hds-blue); font-weight:700; }

/* animated stage */
.hds-page .hdsv{ position:relative; background: var(--hds-paper); border-radius:16px; padding:22px 22px 58px; overflow:hidden; }
.hds-page .hdsv-win{
  position:relative; width:100%; max-width:440px; margin:0 auto; aspect-ratio: 16/10.4;
  background:#fff; border-radius:14px; border:1px solid #e9ecf5; overflow:hidden;
  box-shadow: 0 18px 40px -16px rgba(12,26,61,.25);
}
.hds-page .hdsv-bar{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#f5f6fb; border-bottom:1px solid #eceff6; }
.hds-page .hdsv-bar i{ width:8px; height:8px; border-radius:50%; background:#e2e5ef; }
.hds-page .hdsv-bar i:nth-child(1){ background:#ff6b8b; } .hds-page .hdsv-bar i:nth-child(2){ background:#ffc857; } .hds-page .hdsv-bar i:nth-child(3){ background:#4ade80; }
.hds-page .hdsv-url{ margin-left:8px; flex:1; height:17px; border-radius:999px; background:#fff; border:1px solid #e6e9f2;
  font: 600 10.5px/17px var(--hds-sans); color:#8a93ad; padding-left:10px; display:flex; gap:6px; align-items:center; text-align:left; }
.hds-page .hdsv-lock{ width:8px; height:8px; border-radius:2px; background:#c4cad9; transition: background .4s; }
.hds-page .hdsv-body{ position:absolute; inset:30px 0 0 0; }
.hds-page .hdsv-broken, .hds-page .hdsv-scan, .hds-page .hdsv-fixed{ position:absolute; inset:0; padding:16px; transition: opacity .55s, transform .6s var(--hds-ease); }
.hds-page .hdsv-broken .blk{ position:absolute; background:#eef0f6; border-radius:7px; }
.hds-page .hdsv-broken .b1{ left:16px; top:16px; width:58%; height:14px; transform: rotate(-3deg); }
.hds-page .hdsv-broken .b2{ left:44%; top:44px; width:46%; height:62px; transform: rotate(5deg); background:#f6e9ef; }
.hds-page .hdsv-broken .b3{ left:10px; top:80px; width:40%; height:48px; transform: rotate(-6deg); }
.hds-page .hdsv-broken .b4{ left:22px; bottom:18px; width:70%; height:10px; transform: rotate(2deg); }
.hds-page .hdsv-err{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  background:#fff; border:1px solid #ffd0dc; color:#c81b4b; border-radius:12px; padding:10px 14px;
  font: 700 14px/1.3 var(--hds-sans); box-shadow: 0 12px 30px rgba(200,27,75,.15); white-space:nowrap; animation: hdsShake 2.4s infinite; }
.hds-page .hdsv-err small{ display:block; font-weight:500; color:#8a93ad; font-size:12px; }
.hds-page .hdsv-scan{ opacity:0; }
.hds-page .hdsv-scan .line{ height:10px; border-radius:5px; background:#eef1f8; margin:0 0 10px; }
.hds-page .hdsv-scan .line:nth-child(2){ width:80% } .hds-page .hdsv-scan .line:nth-child(3){ width:64% }
.hds-page .hdsv-beam{ position:absolute; left:0; right:0; top:0; height:56px; background: linear-gradient(180deg, transparent, rgba(35,67,212,.10), rgba(200,27,132,.16)); border-bottom:2px solid #6a31c0; }
.hds-page .hdsv-log{ position:absolute; left:16px; right:16px; bottom:14px; font: 600 11.5px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color:#3b4566; text-align:left; }
.hds-page .hdsv-log span{ display:block; opacity:0; transform: translateY(4px); transition:.35s; }
.hds-page .hdsv-log span.on{ opacity:1; transform:none; }
.hds-page .hdsv-log b{ color:#16a34a; }
.hds-page .hdsv-fixed{ opacity:0; display:grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; gap:10px; }
.hds-page .hdsv-hero{ grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; }
.hds-page .hdsv-hero .t{ width:55%; } .hds-page .hdsv-hero .t i{ display:block; height:10px; border-radius:5px; background: var(--hds-grad); margin-bottom:7px; }
.hds-page .hdsv-hero .t i + i{ background:#e8ebf4; width:75%; height:8px; }
.hds-page .hdsv-hero .cta{ padding:6px 11px; border-radius:999px; background: var(--hds-grad); color:#fff; font: 700 10.5px/1 var(--hds-sans); }
.hds-page .hdsv-chart, .hds-page .hdsv-gauge{ background:#f7f8fd; border:1px solid #eef0f7; border-radius:12px; }
.hds-page .hdsv-chart{ padding:8px; }
.hds-page .hdsv-chart svg{ width:100%; height:100%; display:block; }
.hds-page .hdsv-chart path.ln{ stroke-dasharray:300; stroke-dashoffset:300; }
.hds-page .hdsv-gauge{ display:grid; place-items:center; padding:6px; }
.hds-page .hdsv-gauge svg{ width:78px; height:78px; }
.hds-page .hdsv-gauge .val{ font: 800 22px/1 var(--hds-sans); fill: var(--hds-navy); }
.hds-page .hdsv-gauge small{ font: 600 10.5px/1.2 var(--hds-sans); color:#7e87a1; }
.hds-page .hdsv-gauge circle.arc{ stroke-dasharray:220; stroke-dashoffset:220; transform: rotate(-90deg); transform-origin:50% 50%; }
.hds-page .hdsv[data-stage="1"] .hdsv-broken{ opacity:0; transform: scale(.96); }
.hds-page .hdsv[data-stage="1"] .hdsv-scan{ opacity:1; }
.hds-page .hdsv[data-stage="1"] .hdsv-beam{ animation: hdsBeam 1.5s ease-in-out infinite alternate; }
.hds-page .hdsv[data-stage="2"] .hdsv-broken{ opacity:0; }
.hds-page .hdsv[data-stage="2"] .hdsv-fixed{ opacity:1; }
.hds-page .hdsv[data-stage="2"] .hdsv-chart path.ln{ animation: hdsDraw 1.6s .2s var(--hds-ease) forwards; }
.hds-page .hdsv[data-stage="2"] .hdsv-gauge circle.arc{ animation: hdsArc 1.6s .2s var(--hds-ease) forwards; }
.hds-page .hdsv[data-stage="2"] .hdsv-lock{ background:#16a34a; }
.hds-page .hdsv-status{ position:absolute; left:50%; bottom:12px; transform: translateX(-50%); display:flex; gap:4px; background:#fff; border:1px solid #ebe5f3; border-radius:999px; padding:4px; box-shadow: var(--hds-shadow-sm); }
.hds-page .hdsv-status span{ font: 700 12px/1 var(--hds-sans); color:#7e87a1; padding:7px 12px; border-radius:999px; transition:.35s; white-space:nowrap; }
.hds-page .hdsv-status span.on{ background: var(--hds-grad); color:#fff; }
.hds-page .hdsv-chip{ position:absolute; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ebe7f5; border-radius:12px; padding:7px 10px;
  font: 700 12px/1.15 var(--hds-sans); color: var(--hds-navy); box-shadow: var(--hds-shadow); animation: hdsFloat 6s ease-in-out infinite; text-align:left; z-index:2; }
.hds-page .hdsv-chip em{ font-style:normal; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:12px; }
.hds-page .hdsv-chip small{ display:block; font-weight:500; color:#7e87a1; font-size:10.5px; }
.hds-page .hdsv-chip.c1{ left:10px; top:26%; } .hds-page .hdsv-chip.c1 em{ background:#16a34a; }
.hds-page .hdsv-chip.c2{ right:10px; top:12px; animation-delay:-2s; } .hds-page .hdsv-chip.c2 em{ background: var(--hds-blue); }
.hds-page .hdsv-chip.c3{ right:10px; bottom:64px; animation-delay:-4s; } .hds-page .hdsv-chip.c3 em{ background: var(--hds-mag); }

/* =====================================================================
   "WHAT IS HAPPENING" — interactive issue finder
   ===================================================================== */
.hds-page .hds-finder{ display:grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap:28px; align-items:start; }
.hds-page .hds-symptom-search{
  display:flex !important; align-items:center; gap:10px; max-width:none !important; width:100%; box-sizing:border-box;
  background:#fff !important; border:1px solid var(--hds-line) !important; border-radius:999px !important;
  padding:4px 8px 4px 18px !important; box-shadow: var(--hds-shadow-sm); margin:0 0 14px !important;
}
.hds-page .hds-symptom-search:focus-within{ border-color:#b9b0ec !important; box-shadow: 0 0 0 4px #6a31c018; }
.hds-page .hds-symptom-search span{ color: var(--hds-violet); font-size:18px; }
.hds-page .hds-symptom-search input{ border:0 !important; outline:0; flex:1; font: 500 16px var(--hds-sans) !important; padding:11px 0 !important; background:transparent !important; box-shadow:none !important; }
.hds-page .hds-cats{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.hds-page .hds-cats button{
  border:0; background:transparent; cursor:pointer; padding:7px 12px; border-radius:10px;
  font: 600 14px/1.2 var(--hds-sans); color: var(--hds-muted); display:inline-flex; align-items:center; gap:7px; transition: background .2s, color .2s;
}
.hds-page .hds-cats button i{ width:8px; height:8px; border-radius:50%; background: var(--c, #6a31c0); }
.hds-page .hds-cats button:hover{ background:#f3f1fb; color: var(--hds-navy); }
.hds-page .hds-cats button[aria-pressed="true"]{ background: var(--hds-navy); color:#fff; }
.hds-page ul.hds-chips{ list-style:none !important; padding:0 !important; margin:0 !important; display:flex !important; flex-wrap:wrap; gap:8px; }
.hds-page ul.hds-chips li{ margin:0 !important; padding:0 !important; }
.hds-page ul.hds-chips li::before, .hds-page ul.hds-chips li::marker{ content:none !important; }
.hds-page ul.hds-chips li.hds-off{ display:none !important; }
.hds-page ul.hds-chips li.hds-pop{ animation: hdsCardIn .35s var(--hds-ease) both; animation-delay: calc(var(--i,0) * 15ms); }
.hds-page .hds-chip{
  font: 600 14.5px/1.2 var(--hds-sans) !important; color: var(--hds-ink) !important;
  background:#fff !important; border:1px solid var(--hds-line) !important; border-radius:999px !important; padding:9px 15px !important; cursor:pointer;
  box-shadow:none; transition: transform .2s var(--hds-ease), box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.hds-page ul.hds-chips .hds-chip{ position:relative; padding:9px 14px 9px 30px !important; }
.hds-page ul.hds-chips .hds-chip::before{
  content:""; position:absolute; left:13px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background: var(--c, #6a31c0); transition: transform .2s;
}
.hds-page ul.hds-chips .hds-chip:hover::before{ transform: scale(1.4); }
.hds-page ul.hds-chips .hds-chip[aria-pressed="true"]::before{ background:#fff; }
.hds-page .hds-chip:hover{ transform: translateY(-2px); border-color:#cfc6f2 !important; box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-chip[aria-pressed="true"]{ background: var(--hds-grad) !important; color:#fff !important; border-color:transparent !important; box-shadow: 0 8px 18px rgba(106,49,192,.25); }
.hds-page .hds-finder-note{ margin:14px 0 0; font-size:14.5px; color: var(--hds-subtle); }

/* match card */
.hds-page .hds-match{
  position: sticky; top: calc(var(--hds-sticky, 0px) + 16px);
  background: var(--hds-hero-bg); border:1px solid #efe4f3; border-radius:22px; padding:22px; min-height: 300px;
}
.hds-page .hds-match-k{ font: 700 12px/1 var(--hds-sans); letter-spacing:.12em; text-transform:uppercase; color: var(--hds-mag); }
.hds-page .hds-match h3{ font: 600 24px/1.2 var(--hds-serif) !important; color: var(--hds-navy) !important; margin: 10px 0 6px !important; }
.hds-page .hds-match p{ margin:0 0 14px; color: var(--hds-muted); font-size:15.5px; line-height:1.55; }
.hds-page .hds-match ul{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap:8px; }
.hds-page .hds-match li{ margin:0; }
.hds-page .hds-match li::before{ content:none !important; }
.hds-page .hds-match li button{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  background:#fff; border:1px solid #ece6f4; border-radius:14px; padding:8px 10px; font-family: var(--hds-sans);
  transition: transform .2s var(--hds-ease), box-shadow .2s;
}
.hds-page .hds-match li button:hover{ transform: translateX(3px); box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-match li .th{ flex:none; width:52px; height:38px; border-radius:9px; overflow:hidden; }
.hds-page .hds-match li .th svg{ width:100%; height:100%; display:block; }
.hds-page .hds-match li b{ display:block; font: 700 14.5px/1.25 var(--hds-sans); color: var(--hds-navy); }
.hds-page .hds-match li em{ font-style:normal; font: 600 12.5px/1.3 var(--hds-sans); color: var(--hds-blue); }
.hds-page .hds-match .hds-match-go{ display:flex; gap:10px; flex-wrap:wrap; }
.hds-page .hds-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; cursor:pointer; text-decoration:none !important;
  font: 700 15px/1 var(--hds-sans); border:1px solid transparent; transition: transform .2s var(--hds-ease), box-shadow .2s;
}
.hds-page .hds-btn:hover{ transform: translateY(-2px); }
.hds-page .hds-btn-p{ background: var(--hds-grad); color:#fff !important; box-shadow: 0 10px 22px -10px rgba(106,49,192,.8); }
.hds-page .hds-btn-g{ background:#fff; color: var(--hds-navy) !important; border-color:#e5def0; }
.hds-page .hds-match .hds-empty{ text-align:center; padding:18px 6px 6px; }
.hds-page .hds-match .hds-empty svg{ width:150px; height:auto; margin: 0 auto 12px; display:block; }
.hds-page .hds-match.hds-flash{ animation: hdsFlash .5s var(--hds-ease); }
@keyframes hdsFlash{ from{ transform: scale(.985); opacity:.6 } to{ transform:none; opacity:1 } }

/* =====================================================================
   SERVICES — compact 6-up grid with image placeholders
   ===================================================================== */
.hds-page .hds-service-head{ display:flex !important; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.hds-page .hds-service-count{ margin:0 !important; color: var(--hds-muted); font-size:15px; background:#fff; border:1px solid var(--hds-line); padding:7px 14px; border-radius:999px; }
.hds-page .hds-service-count strong{ color: var(--hds-navy); }
.hds-page .hds-service-filter{
  display:flex !important; flex-wrap:nowrap !important; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:10px 4px 12px !important; margin: 0 -4px 6px !important;
  position: sticky; top: var(--hds-sticky, 0px); z-index:6;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hds-page .hds-service-filter::-webkit-scrollbar{ display:none; }
.hds-page .hds-service-filter .hds-chip{ white-space:nowrap; display:inline-flex; align-items:center; gap:7px; padding:8px 12px !important; font-size:14px !important; flex:none; }
.hds-page .hds-service-filter .hds-chip .n{ font-size:12px; font-weight:700; min-width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; background:#f1f3f9; color: var(--hds-muted); padding:0 6px; }
.hds-page .hds-service-filter .hds-chip[aria-pressed="true"] .n{ background: rgba(255,255,255,.25); color:#fff; }

.hds-page .hds-grid{
  display:grid !important; grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: var(--hds-gap) !important; margin: 6px 0 0 !important; padding:0 !important;
}
@media (max-width:1240px){ .hds-page .hds-grid{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; } }
@media (max-width:1040px){ .hds-page .hds-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width:800px) { .hds-page .hds-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:580px) { .hds-page .hds-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; --hds-gap:12px; } }
.hds-page .hds-card{
  display:flex !important; flex-direction:column; min-width:0; min-height:0 !important;
  background:#fff !important; border:1px solid var(--hds-line) !important; border-radius:18px !important; overflow:hidden;
  padding:0 !important; box-shadow:none !important; cursor:pointer; position:relative;
  transition: transform .3s var(--hds-ease), box-shadow .3s, border-color .3s;
}
.hds-page .hds-card[hidden]{ display:none !important; }
.hds-page .hds-card::before, .hds-page .hds-card::after, .hds-page .hds-card-top, .hds-page .hds-icon{ display:none !important; }
.hds-page .hds-card.hds-enter{ animation: hdsCardIn .45s var(--hds-ease) both; animation-delay: calc(var(--i, 0) * 26ms); }
.hds-page .hds-card:hover, .hds-page .hds-card:focus-within{ transform: translateY(-5px); border-color:#d9d2f3 !important; box-shadow: var(--hds-shadow) !important; }
.hds-page .hds-card.hds-hl{ border-color:#b9a9ec !important; box-shadow: 0 0 0 3px #6a31c022, var(--hds-shadow) !important; }
.hds-page .hds-card-art{ position:relative; aspect-ratio: 16/11; margin:0 !important; padding:0 !important; height:auto !important; background: var(--art-bg, #eef1ff); overflow:hidden; border-radius:0 !important; }
.hds-page .hds-card-art > svg, .hds-page .hds-card-art > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--hds-ease); }
.hds-page .hds-card:hover .hds-card-art > svg, .hds-page .hds-card:hover .hds-card-art > img{ transform: scale(1.06); }
.hds-page .hds-card-art .hds-card-label{ position:absolute; left:8px; top:8px; z-index:2; font: 700 10px/1 var(--hds-sans) !important; letter-spacing:.08em; text-transform:uppercase; color: var(--hds-navy) !important;
  background: rgba(255,255,255,.92); padding:5px 8px; border-radius:999px; margin:0 !important; }
.hds-page .hds-card h3{ font: 700 15px/1.25 var(--hds-sans) !important; color: var(--hds-navy) !important; margin: 12px 12px 4px !important; letter-spacing:0; }
.hds-page .hds-card > p{ font-size:13px !important; line-height:1.4 !important; color: var(--hds-muted) !important; margin: 0 12px 10px !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hds-page .hds-card-bottom{ margin-top:auto !important; display:flex !important; align-items:center; justify-content:space-between; gap:6px; padding:10px 12px 12px !important; border-top:1px dashed #edf0f6; }
.hds-page .hds-card .price{ font: 700 12.5px/1.2 var(--hds-sans) !important; color: var(--hds-blue) !important; background:none !important; padding:0 !important; }
.hds-page .hds-card .service-link{ flex:none; width:30px; height:30px; border-radius:50%; display:grid !important; place-items:center; background:#f3f1fb !important;
  color:transparent !important; font-size:0 !important; padding:0 !important; transition: background .25s, transform .25s; }
.hds-page .hds-card .service-link::after{ content:"→"; font: 700 15px/1 var(--hds-sans); color: var(--hds-violet); }
.hds-page .hds-card:hover .service-link{ background: var(--hds-grad) !important; transform: rotate(-30deg); }
.hds-page .hds-card:hover .service-link::after{ color:#fff; }

/* =====================================================================
   HOW WE HELP — same step rail as the Free Tools "How to use"
   ===================================================================== */
.hds-page ol.hds-steps{ list-style:none !important; padding:0 !important; margin: 26px 0 0 !important; counter-reset: hdsstep;
  display:grid !important; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0 22px; position:relative; }
.hds-page ol.hds-steps::before, .hds-page ol.hds-steps::after{ content:none !important; }
.hds-page ol.hds-steps li{ counter-increment: hdsstep; position:relative; background:none !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important;
  opacity:0; transform: translateY(14px); transition: opacity .5s, transform .5s var(--hds-ease); transition-delay: calc(var(--i, 0) * 160ms); }
.hds-page ol.hds-steps.hds-in li{ opacity:1; transform:none; }
.hds-page ol.hds-steps li::before{
  content: counter(hdsstep) !important; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; margin:0 0 16px;
  background: var(--hds-grad); color:#fff; font: 700 15px/1 var(--hds-sans); position:relative; z-index:1; transform:none; left:auto; top:auto;
  box-shadow: 0 0 0 5px #fff;
}
.hds-page ol.hds-steps li::after{
  content:""; position:absolute; left:46px; right:-12px; top:17px; height:2px; border-radius:2px;
  background: linear-gradient(90deg,#c9c1ee,#f2c7de); transform-origin:left; transform: scaleX(0); transition: transform .8s var(--hds-ease); transition-delay: calc(var(--i, 0) * 160ms + .2s);
}
.hds-page ol.hds-steps.hds-in li::after{ transform: scaleX(1); }
.hds-page ol.hds-steps h3{ font: 600 19px/1.25 var(--hds-serif) !important; margin:0 0 6px !important; color: var(--hds-navy) !important; }
.hds-page ol.hds-steps p{ font-size:15px !important; line-height:1.55 !important; color: var(--hds-muted) !important; margin:0 !important; }
@media (max-width:900px){
  .hds-page ol.hds-steps{ grid-template-columns: 1fr; gap:20px; }
  .hds-page ol.hds-steps li{ display:grid; grid-template-columns:36px 1fr; column-gap:16px; }
  .hds-page ol.hds-steps li::before{ grid-row: span 2; margin:0; }
  .hds-page ol.hds-steps li::after{ left:17px; right:auto; top:44px; bottom:-18px; width:2px; height:auto; transform-origin:top; transform:scaleY(0); }
  .hds-page ol.hds-steps.hds-in li::after{ transform: scaleY(1); }
  .hds-page ol.hds-steps li:last-child::after{ display:none; }
}

/* =====================================================================
   ARTICLES — cards with real cover images
   ===================================================================== */
.hds-page .hds-filter{ display:flex !important; flex-wrap:wrap; gap:8px; margin: 0 0 16px !important; }
.hds-page ul.hds-articles{ list-style:none !important; padding:0 !important; margin:0 !important;
  display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: var(--hds-gap) !important; }
@media (max-width:1040px){ .hds-page ul.hds-articles{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:740px){ .hds-page ul.hds-articles{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:440px){ .hds-page ul.hds-articles{ grid-template-columns: 1fr !important; } }
.hds-page ul.hds-articles li{ margin:0 !important; animation: hdsCardIn .45s var(--hds-ease) both; }
.hds-page ul.hds-articles li::before{ content:none !important; }
.hds-page ul.hds-articles a{
  display:flex !important; flex-direction:column; height:100%; padding:0 !important; overflow:hidden;
  background:#fff !important; border:1px solid var(--hds-line) !important; border-radius:18px !important; text-decoration:none !important;
  font: 600 17px/1.3 var(--hds-serif) !important; color: var(--hds-navy) !important; transition: transform .3s var(--hds-ease), box-shadow .3s;
}
.hds-page ul.hds-articles a:hover{ transform: translateY(-4px); box-shadow: var(--hds-shadow); }
.hds-page ul.hds-articles .hds-cover-wrap{ overflow:hidden; display:block; }
.hds-page ul.hds-articles .hds-cover{ aspect-ratio: 16/9; background: var(--hds-hero-bg) center/cover no-repeat; display:block; transition: transform .6s var(--hds-ease); }
.hds-page ul.hds-articles a:hover .hds-cover{ transform: scale(1.04); }
.hds-page ul.hds-articles small{ display:block !important; margin: 12px 14px 4px !important; font: 700 11px/1 var(--hds-sans) !important; letter-spacing:.1em; text-transform:uppercase; color: var(--hds-mag) !important; }
.hds-page ul.hds-articles .hds-at{ display:block; margin: 0 14px 16px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.hds-page section details{ background:#fff !important; border:1px solid var(--hds-line) !important; border-radius:14px !important; margin:0 0 10px !important; padding:0 !important; overflow:hidden;
  transition: box-shadow .25s, border-color .25s; }
.hds-page section details[open]{ box-shadow: var(--hds-shadow-sm); border-color:#dcd5f2 !important; }
.hds-page section details summary{ list-style:none; cursor:pointer; padding:17px 56px 17px 20px !important; position:relative; font: 700 17px/1.35 var(--hds-sans) !important; color: var(--hds-navy) !important; }
.hds-page section details summary::-webkit-details-marker{ display:none; }
.hds-page section details summary::before{ content:none !important; }
.hds-page section details summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform: translateY(-50%); width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:#f3f1fb; color: var(--hds-violet); font-weight:800; transition: transform .3s var(--hds-ease), background .3s, color .3s; }
.hds-page section details[open] summary::after{ transform: translateY(-50%) rotate(45deg); background: var(--hds-grad); color:#fff; }
.hds-page section details > p{ margin:0 !important; padding: 0 20px 18px !important; color: var(--hds-muted) !important; line-height:1.65 !important; animation: hdsCardIn .35s var(--hds-ease); }
.hds-page .hds-faq-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 16px; align-items:start; }
@media (max-width:860px){ .hds-page .hds-faq-grid{ grid-template-columns: 1fr; } }

/* =====================================================================
   CONTACT / ENQUIRY
   ===================================================================== */
.hds-page #enquiry{ scroll-margin-top: calc(var(--hds-sticky, 0px) + 16px); }
.hds-page .hds-contact{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:0; margin-top:6px;
  background:#fff; border:1px solid #efe4f3; border-radius:28px; overflow:hidden; box-shadow: var(--hds-shadow); }
.hds-page .hds-contact-info{ background: var(--hds-hero-bg); padding:36px; position:relative; }
.hds-page .hds-contact-info h3{ font: 600 26px/1.2 var(--hds-serif) !important; color: var(--hds-navy) !important; margin: 0 0 8px !important; }
.hds-page .hds-contact-info > p{ color: var(--hds-muted); margin:0 0 22px; line-height:1.6; }
.hds-page .hds-next{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:14px; }
.hds-page .hds-next li{ display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; margin:0; }
.hds-page .hds-next li::before{ content:none !important; }
.hds-page .hds-next li span{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#fff; color: var(--hds-violet); box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-next li span svg{ width:16px; height:16px; }
.hds-page .hds-next b{ display:block; color: var(--hds-navy); font-size:15.5px; }
.hds-page .hds-next small{ color: var(--hds-muted); font-size:14px; line-height:1.45; }
.hds-page .hds-mail{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ebe5f3; border-radius:14px; padding:12px 14px; }
.hds-page .hds-mail svg{ width:20px; height:20px; color: var(--hds-violet); flex:none; }
.hds-page .hds-mail a{ font: 700 16px var(--hds-sans); color: var(--hds-navy); text-decoration:none; flex:1; min-width:0; overflow-wrap:anywhere; }
.hds-page .hds-mail button{ border:0; background:#f3f1fb; color: var(--hds-violet); font: 700 13px var(--hds-sans); padding:7px 11px; border-radius:999px; cursor:pointer; }
.hds-page .hds-safe{ display:flex; gap:10px; margin-top:14px; font-size:13.5px; color: var(--hds-muted); line-height:1.45; }
.hds-page .hds-safe svg{ width:18px; height:18px; color:#16a34a; flex:none; margin-top:1px; }
.hds-page .hds-contact-main{ padding:28px 32px 32px; min-width:0; }
.hds-page .hds-tabs{ display:inline-flex; gap:4px; padding:4px; background: var(--hds-paper); border-radius:999px; margin:0 0 20px; }
.hds-page .hds-tabs button{ border:0; background:transparent; cursor:pointer; padding:9px 16px; border-radius:999px; font: 700 14.5px/1 var(--hds-sans); color: var(--hds-muted); transition: background .2s, color .2s, box-shadow .2s; }
.hds-page .hds-tabs button[aria-selected="true"]{ background:#fff; color: var(--hds-navy); box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-pane[hidden]{ display:none !important; }
.hds-page #enquiry .hds-wizard{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; max-width:none !important; }

/* quick message form */
.hds-page .hds-form{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.hds-page .hds-form .full{ grid-column: 1 / -1; }
.hds-page .hds-form label{ display:block; font: 700 13.5px/1.2 var(--hds-sans); color: var(--hds-navy); margin:0 0 6px; }
.hds-page .hds-form label small{ font-weight:500; color: var(--hds-subtle); }
.hds-page .hds-form input, .hds-page .hds-form select, .hds-page .hds-form textarea{
  width:100%; box-sizing:border-box; font: 500 15.5px/1.4 var(--hds-sans); color: var(--hds-ink);
  background: #fbfbfe; border:1px solid var(--hds-line); border-radius:12px; padding:12px 14px; outline:0; transition: border-color .2s, box-shadow .2s, background .2s;
}
.hds-page .hds-form textarea{ min-height:120px; resize:vertical; }
.hds-page .hds-form input:focus, .hds-page .hds-form select:focus, .hds-page .hds-form textarea:focus{ background:#fff; border-color:#b9b0ec; box-shadow: 0 0 0 4px #6a31c018; }
.hds-page .hds-form .hds-err{ border-color:#e11d48 !important; box-shadow: 0 0 0 4px #e11d4815 !important; }
.hds-page .hds-form .row-end{ grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.hds-page .hds-form .row-end p{ margin:0; font-size:13px; color: var(--hds-subtle); max-width:42ch; }
.hds-page .hds-form button[type="submit"]{ border:0; }
.hds-page .hds-form button[disabled]{ opacity:.6; cursor:progress; }
.hds-page .hds-form .hds-msg{ grid-column:1/-1; margin:0; font-size:14px; color:#c81b4b; }
.hds-page .hds-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.hds-page .hds-done{ text-align:center; padding:36px 12px; }
.hds-page .hds-done .ok{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; background: var(--hds-grad); color:#fff; animation: hdsPop .5s var(--hds-ease); }
.hds-page .hds-done .ok svg{ width:30px; height:30px; }
.hds-page .hds-done h4{ font: 600 24px/1.2 var(--hds-serif); color: var(--hds-navy); margin:0 0 6px; }
.hds-page .hds-done p{ color: var(--hds-muted); margin:0; }
@keyframes hdsPop{ from{ transform: scale(.4); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------- scroll reveal */
.hds-page .hds-reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s var(--hds-ease), transform .7s var(--hds-ease); }
.hds-page .hds-reveal.hds-in{ opacity:1; transform:none; }

/* ---------- keyframes */
@keyframes hdsFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@keyframes hdsShake{ 0%,86%,100%{ transform: translate(-50%,-50%) } 88%{ transform: translate(-53%,-50%) } 90%{ transform: translate(-47%,-50%) } 92%{ transform: translate(-52%,-50%) } 94%{ transform: translate(-48%,-50%) } }
@keyframes hdsBeam{ from{ transform: translateY(-10px) } to{ transform: translateY(130px) } }
@keyframes hdsDraw{ to{ stroke-dashoffset: 0 } }
@keyframes hdsArc{ to{ stroke-dashoffset: 18 } }
@keyframes hdsPulse{ 0%,100%{ box-shadow:0 0 0 3px #16a34a22 } 50%{ box-shadow:0 0 0 6px #16a34a10 } }
@keyframes hdsCardIn{ from{ opacity:0; transform: translateY(12px) scale(.97) } to{ opacity:1; transform:none } }

/* ---------- responsive */
@media (max-width:1040px){
  .hds-page > section.hds-hero{ grid-template-columns: 1fr; gap:32px; }
  .hds-page .hds-hero h1{ max-width:none; }
  .hds-page .hds-finder{ grid-template-columns: 1fr; }
  .hds-page .hds-match{ position:static; min-height:0; }
  .hds-page .hds-contact{ grid-template-columns: 1fr; }
}
@media (max-width:640px){
  .hds-page > section.hds-hero{ padding:24px !important; border-radius:22px !important; margin-top:16px !important; }
  .hds-page > section{ padding-top:48px !important; }
  .hds-page .hds-start{ padding:12px; }
  .hds-page .hdsv{ padding:14px 14px 56px; }
  .hds-page .hdsv-chip{ display:none; }
  .hds-page .hds-contact-info, .hds-page .hds-contact-main{ padding:22px; }
  .hds-page .hds-form{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .hds-page *, .hds-page *::before, .hds-page *::after{ animation: none !important; transition: none !important; }
  .hds-page .hds-reveal, .hds-page ol.hds-steps li{ opacity:1; transform:none; }
  .hds-page ol.hds-steps li::after{ transform:none; }
  .hds-page section > h2::before, .hds-page .hds-service-head h2::before{ width:48px; }
  .hds-page .hdsv-chart path.ln, .hds-page .hdsv-gauge circle.arc{ stroke-dashoffset: 0 !important; }
}

/* =====================================================================
   PRICING
   ===================================================================== */
.hds-page #pricing .hds-service-head .hds-tabs{ margin:0; }
.hds-page .hds-plans{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--hds-gap); align-items:stretch; }
.hds-page .hds-plans[hidden], .hds-page .hds-care[hidden]{ display:none !important; }
@media (max-width:1240px){ .hds-page .hds-plans{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:760px){ .hds-page .hds-plans{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .hds-page .hds-plans{ grid-template-columns: 1fr; } }
.hds-page .hds-plan{
  position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--hds-line); border-radius:22px; padding:22px 20px 20px;
  transition: transform .3s var(--hds-ease), box-shadow .3s, border-color .3s;
  animation: hdsCardIn .5s var(--hds-ease) both; animation-delay: calc(var(--i,0) * 70ms);
}
.hds-page .hds-plan:hover{ transform: translateY(-6px); box-shadow: var(--hds-shadow); border-color:#d9d2f3; }
.hds-page .hds-plan.hot{ background: var(--hds-hero-bg); border-color:#e4d6f3; box-shadow: 0 0 0 2px #6a31c022; }
.hds-page .hds-plan-tag{ position:absolute; top:-11px; left:20px; background: var(--hds-grad); color:#fff; font: 700 11.5px/1 var(--hds-sans); letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; }
.hds-page .hds-plan h3{ font: 600 21px/1.2 var(--hds-serif) !important; color: var(--hds-navy) !important; margin:0 0 4px !important; }
.hds-page .hds-plan > p{ margin:0 0 14px; color: var(--hds-muted); font-size:14.5px; line-height:1.45; min-height:2.9em; }
.hds-page .hds-plan-price{ display:flex; align-items:baseline; gap:6px; margin: 0 0 14px; }
.hds-page .hds-plan-price small{ font: 600 13px var(--hds-sans); color: var(--hds-subtle); }
.hds-page .hds-plan-price b{ font: 800 30px/1 var(--hds-sans); letter-spacing:-.02em; background: var(--hds-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric: tabular-nums; }
.hds-page .hds-plan ul, .hds-page .hds-care-r{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:9px; }
.hds-page .hds-plan li, .hds-page .hds-care-r li{ display:flex; gap:8px; align-items:flex-start; margin:0; font-size:14px; line-height:1.4; color: var(--hds-ink); }
.hds-page .hds-plan li::before, .hds-page .hds-care-r li::before{ content:none !important; }
.hds-page .hds-plan li svg, .hds-page .hds-care-r li svg{ flex:none; width:16px; height:16px; margin-top:2px; color:#16a34a; }
.hds-page .hds-plan .hds-btn{ margin-top:auto; justify-content:center; }
.hds-page .hds-care{ display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center; background: var(--hds-hero-bg); border:1px solid #efe4f3; border-radius:24px; padding:32px; animation: hdsCardIn .45s var(--hds-ease) both; }
.hds-page .hds-care h3{ font: 600 28px/1.15 var(--hds-serif) !important; color: var(--hds-navy) !important; margin: 0 0 8px !important; }
.hds-page .hds-care p{ color: var(--hds-muted); margin:0 0 14px; }
.hds-page .hds-care-r{ background:#fff; border-radius:18px; padding:22px; margin:0; box-shadow: var(--hds-shadow-sm); }
.hds-page .hds-price-note{ display:flex; gap:8px; align-items:center; margin:16px 0 0; font-size:14px; color: var(--hds-subtle); }
.hds-page .hds-price-note svg{ width:16px; height:16px; flex:none; }
@media (max-width:760px){ .hds-page .hds-care{ grid-template-columns:1fr; padding:22px; } }

/* =====================================================================
   BEFORE / AFTER SLIDER
   ===================================================================== */
.hds-page #difference .hds-service-head .hds-tabs{ margin:0; }
.hds-page .hds-ba{
  --x:50%; position:relative; aspect-ratio: 16/7; min-height:300px; border-radius:24px; overflow:hidden; user-select:none; touch-action: pan-y;
  border:1px solid #efe4f3; box-shadow: var(--hds-shadow); cursor: ew-resize; background:#fff;
}
.hds-page .hds-ba-pane{ position:absolute; inset:0; }
.hds-page .hds-ba-pane.after{ background: var(--hds-hero-bg); }
.hds-page .hds-ba-pane.before{ background: repeating-linear-gradient(135deg,#f7f3f3 0 14px,#f2eded 14px 28px); clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.hds-page .hds-ba-site{ position:absolute; left:6%; right:6%; top:9%; bottom:22%; background:#fff; border-radius:16px; overflow:hidden; box-shadow: 0 20px 40px -18px rgba(12,26,61,.3); }
.hds-page .hds-ba-site .nav{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #eef0f6; }
.hds-page .hds-ba-site .nav i{ width:24px; height:24px; border-radius:7px; background: var(--hds-grad); }
.hds-page .hds-ba-site .nav span{ width:44px; height:8px; border-radius:4px; background:#e6e9f2; }
.hds-page .hds-ba-site .nav b{ margin-left:auto; font: 700 11px/1 var(--hds-sans); color:#fff; background: var(--hds-grad); padding:7px 12px; border-radius:999px; }
.hds-page .hds-ba-site .hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; padding:18px 16px; }
.hds-page .hds-ba-site .hero i{ display:block; height:12px; border-radius:6px; background:#1c2747; opacity:.85; margin-bottom:8px; width:90%; }
.hds-page .hds-ba-site .hero i + i{ width:70%; background:#dfe3ee; opacity:1; height:9px; }
.hds-page .hds-ba-site .hero i + i + i{ width:55%; }
.hds-page .hds-ba-site .hero b{ display:inline-block; margin-top:6px; font: 700 11px/1 var(--hds-sans); color:#fff; background: var(--hds-grad); padding:8px 14px; border-radius:999px; }
.hds-page .hds-ba-site .img{ border-radius:12px; background: linear-gradient(135deg,#dfe6ff,#f9d9ec); min-height:70px; }
.hds-page .hds-ba-site .cols{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; padding:0 16px; }
.hds-page .hds-ba-site .cols span{ height:36px; border-radius:10px; background:#f3f4f9; }
.hds-page .hds-ba-site.bad{ filter: saturate(.55); }
.hds-page .hds-ba-site.bad .nav span:nth-child(4){ transform: translateY(6px) rotate(4deg); }
.hds-page .hds-ba-site.bad .hero{ grid-template-columns: .6fr 1.4fr; }
.hds-page .hds-ba-site.bad .hero i{ transform: rotate(-2deg); background:#9aa3b8; }
.hds-page .hds-ba-site.bad .img{ background: repeating-linear-gradient(45deg,#e9e9ee 0 8px,#f3f3f6 8px 16px); }
.hds-page .hds-ba-site.bad .cols span:nth-child(2){ transform: translateY(14px); }
.hds-page .hds-ba-site.bad .pop{ position:absolute; right:12%; top:34%; background:#fff; border:1px solid #ffd0dc; color:#c81b4b; font: 700 12px/1 var(--hds-sans); padding:10px 14px; border-radius:10px; box-shadow: 0 10px 24px rgba(200,27,75,.15); animation: hdsFloat 3s ease-in-out infinite; }
.hds-page .hds-ba[data-s="mobile"] .hds-ba-site{ left:calc(50% - 110px); right:calc(50% - 110px); top:6%; bottom:20%; border-radius:26px; border:8px solid #1c2340; }
.hds-page .hds-ba[data-s="mobile"] .hds-ba-site .hero{ grid-template-columns: 1fr; }
.hds-page .hds-ba[data-s="mobile"] .hds-ba-site .cols{ grid-template-columns: 1fr; }
.hds-page .hds-ba[data-s="mobile"] .hds-ba-site.bad{ left:calc(50% - 110px); right:calc(50% - 300px); }
.hds-page .hds-ba[data-s="search"] .hds-ba-site .img{ background: linear-gradient(135deg,#e8f6ee,#e6edff); }
.hds-page .hds-ba-tag{ position:absolute; bottom:16px; display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:10px 14px; box-shadow: var(--hds-shadow); }
.hds-page .hds-ba-tag.bad{ left:16px; } .hds-page .hds-ba-tag.good{ right:16px; }
.hds-page .hds-ba-tag em{ font-style:normal; font: 700 11px/1 var(--hds-sans); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:999px; color:#fff; }
.hds-page .hds-ba-tag.bad em{ background:#c81b4b; } .hds-page .hds-ba-tag.good em{ background:#16a34a; }
.hds-page .hds-ba-tag b{ font: 700 15px/1.2 var(--hds-sans); color: var(--hds-navy); }
.hds-page .hds-ba-tag .m{ display:flex; flex-direction:column; align-items:center; padding-left:12px; border-left:1px solid #eef0f6; }
.hds-page .hds-ba-tag strong{ font: 800 20px/1 var(--hds-sans); }
.hds-page .hds-ba-tag.bad strong{ color:#c81b4b; } .hds-page .hds-ba-tag.good strong{ color:#16a34a; }
.hds-page .hds-ba-tag small{ font-size:11px; color: var(--hds-subtle); }
.hds-page .hds-ba-handle{ position:absolute; top:0; bottom:0; left: var(--x); width:0; z-index:3; pointer-events:none; }
.hds-page .hds-ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:#fff; box-shadow: 0 0 0 1px rgba(106,49,192,.25), 0 0 18px rgba(106,49,192,.35); }
.hds-page .hds-ba-handle span{ position:absolute; top:50%; left:0; transform: translate(-50%,-50%); width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: var(--hds-grad); color:#fff; box-shadow: 0 10px 24px -6px rgba(106,49,192,.7), 0 0 0 5px #fff; }
.hds-page .hds-ba-handle span svg{ width:22px; height:22px; }
.hds-page .hds-ba input[type="range"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor: ew-resize; margin:0; z-index:4; }
.hds-page .hds-ba input[type="range"]:focus-visible + *{ outline: none; }
.hds-page .hds-ba:focus-within .hds-ba-handle span{ box-shadow: 0 0 0 5px #fff, 0 0 0 9px #6a31c055; }
@media (max-width:760px){
  .hds-page .hds-ba{ aspect-ratio: 4/5; }
  .hds-page .hds-ba-site{ bottom:30%; }
  .hds-page .hds-ba-tag{ left:12px !important; right:12px !important; }
  .hds-page .hds-ba-tag.bad{ bottom:84px; }
}

/* ---------- polish */
.hds-page .hds-btn{ white-space:nowrap; }
.hds-page .hds-btn svg{ width:18px; height:18px; flex:none; }
.hds-page ol.hds-steps li:last-child::after{ display:none; }
.hds-page .hds-ba{ aspect-ratio: auto; height: clamp(320px, 34vw, 440px); }
.hds-page .hds-ba-site{ top:8%; bottom:24%; }
.hds-page .hds-ba-site.bad .pop{ right:auto; left:24%; top:40%; }
@media (max-width:760px){ .hds-page .hds-ba{ height: 520px; } }
.hds-page ul.hds-chips.hds-collapsed li:nth-child(n+15){ display:none !important; }
.hds-page .hds-more{ margin-top:12px; background:none; border:0; padding:6px 0; cursor:pointer; color: var(--hds-blue); font: 700 15px var(--hds-sans); }
.hds-page .hds-more:hover{ text-decoration: underline; }
.hds-page .hds-more[hidden]{ display:none; }
.hds-page .hds-chip{ min-height:0 !important; height:auto !important; line-height:1.2 !important; }
.hds-page ul.hds-chips{ gap:8px !important; align-content:flex-start; }
.hds-page ul.hds-chips li{ height:auto !important; min-height:0 !important; display:block; }
/* cancel the older full-bleed offsets on this page */
.hds-page > section{ left:auto !important; right:auto !important; }
.hds-page > section.hds-hero{ transform:none !important; translate:none !important; }