/* =========================================================
   DATAFLAX — Building the Data Layer for the AI Economy
   Design system v2
   - Type: Plus Jakarta Sans throughout (matches the reference images)
   - Headings: #1e3a5f
   - Soft teal primary, light mint surfaces, round pastel icons
   ========================================================= */
:root{
  --heading:#1e3a5f;
  --text:#4a5b63;
  --muted:#6b7b82;
  --bg:#f7fbfb;
  --bg-2:#f1f8f7;
  --surface:#ffffff;

  --teal:#2e9a94;          /* buttons, active */
  --teal-600:#257f7a;      /* hover */
  --teal-ink:#23857f;      /* eyebrow, links */
  --teal-50:#f2faf9;
  --teal-100:#e4f4f2;
  --teal-200:#cdeae6;
  --teal-300:#a9dbd5;

  /* soft icon tones: background / border / stroke */
  --t-teal-bg:#e2f3f1;     --t-teal-bd:#c4e6e1;     --t-teal:#2b8f8a;
  --t-sky-bg:#e7f0fb;      --t-sky-bd:#cfdff5;      --t-sky:#4677bd;
  --t-lavender-bg:#efebfb; --t-lavender-bd:#dcd4f5; --t-lavender:#7660c2;
  --t-peach-bg:#fdf1e4;    --t-peach-bd:#f6dcbd;    --t-peach:#c47d30;
  --t-rose-bg:#fcebef;     --t-rose-bd:#f5d0d9;     --t-rose:#c25577;
  --t-sage-bg:#e8f5eb;     --t-sage-bd:#cbe8d2;     --t-sage:#3f9459;

  --line:#e2eeec;
  --line-2:#edf4f3;

  --radius-s:12px;
  --radius-m:18px;
  --radius-l:26px;
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(30,58,95,.04), 0 6px 18px -10px rgba(30,58,95,.14);
  --shadow-md:0 1px 2px rgba(30,58,95,.04), 0 18px 40px -22px rgba(30,58,95,.22);
  --shadow-teal:0 14px 30px -14px rgba(46,154,148,.55);

  --font:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --container:1200px;
  --header-h:84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font); margin:0; color:var(--heading); letter-spacing:-.02em; font-weight:700; line-height:1.2; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; color:var(--heading); }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
section{ position:relative; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:16px; top:-60px; background:var(--teal); color:#fff; padding:10px 16px; border-radius:var(--pill); z-index:500; font-weight:600; }
.skip-link:focus{ top:12px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* =========================================================
   Eyebrow, chips, accents
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-ink); font-weight:700;
}
.eyebrow::before{ content:""; width:22px; height:4px; border-radius:4px; background:var(--teal-300); }
.accent{ color:var(--teal); }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:600; letter-spacing:.01em;
  padding:4px 11px; border-radius:var(--pill);
  background:var(--teal-100); color:var(--teal-ink); border:1px solid var(--teal-200);
}
.chip.muted{ background:var(--surface); color:var(--muted); border-color:var(--line); }

/* Round, soft icon badges */
.ib{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal);
}
.ib-sm{ width:36px; height:36px; }
.ib-lg{ width:56px; height:56px; }
.ib-teal{ background:var(--t-teal-bg); border-color:var(--t-teal-bd); color:var(--t-teal); }
.ib-sky{ background:var(--t-sky-bg); border-color:var(--t-sky-bd); color:var(--t-sky); }
.ib-lavender{ background:var(--t-lavender-bg); border-color:var(--t-lavender-bd); color:var(--t-lavender); }
.ib-peach{ background:var(--t-peach-bg); border-color:var(--t-peach-bd); color:var(--t-peach); }
.ib-rose{ background:var(--t-rose-bg); border-color:var(--t-rose-bd); color:var(--t-rose); }
.ib-sage{ background:var(--t-sage-bg); border-color:var(--t-sage-bd); color:var(--t-sage); }

/* =========================================================
   Header — pill navigation with dropdown (header.png)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,251,251,.82);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.12rem; color:var(--heading); letter-spacing:-.01em; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-name em{ font-style:normal; color:var(--teal); }

.nav-pill{
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  border-radius:var(--pill); padding:6px;
  box-shadow:0 8px 24px -16px rgba(30,58,95,.25);
}
.nav-list{ display:flex; align-items:center; gap:2px; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:var(--pill);
  font-size:.95rem; font-weight:500; color:#4f5f66;
  background:transparent; border:0; transition:background .2s ease, color .2s ease;
}
.nav-link:hover{ background:var(--teal-50); color:var(--heading); }
.nav-link.is-active{ background:var(--teal-100); color:var(--heading); }
.nav-link .chev{ transition:transform .2s ease; }
.has-dropdown{ position:relative; }
.has-dropdown.open .nav-link{ background:var(--teal-100); color:var(--heading); }
.has-dropdown.open .chev{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translate(-50%, 6px);
  min-width:270px; padding:10px;
  background:rgba(250,253,253,.98); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 22px 48px -20px rgba(30,58,95,.28);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown::before{ /* little notch like the reference */
  content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px;
  background:rgba(250,253,253,.98); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg); border-radius:2px;
}
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dropdown a{ display:block; padding:11px 16px; border-radius:14px; color:#4f5f66; font-size:.95rem; font-weight:500; }
.dropdown a:hover{ background:var(--teal-50); color:var(--heading); }
.dropdown .dropdown-all{ display:flex; align-items:center; justify-content:space-between; color:var(--teal-ink); font-weight:600; border-bottom:1px solid var(--line-2); border-radius:14px 14px 6px 6px; margin-bottom:4px; }
.nav-cta{
  display:inline-flex; align-items:center; padding:10px 24px; margin-left:4px;
  border-radius:var(--pill); background:var(--teal); color:#fff; font-weight:600; font-size:.95rem;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover, .nav-cta.is-active{ background:var(--teal-600); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:var(--surface); border:1px solid var(--line); padding:12px 11px; border-radius:50%; }
.nav-toggle span{ width:18px; height:2px; background:var(--heading); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-panel{ display:none; flex-direction:column; padding:8px 24px 24px; border-top:1px solid var(--line); background:var(--bg); max-height:calc(100vh - var(--header-h)); overflow:auto; }
.mobile-panel > a{ padding:13px 6px; font-weight:600; color:var(--heading); border-bottom:1px solid var(--line-2); }
.mobile-panel > a.is-active{ color:var(--teal-ink); }
.mobile-sub{ display:flex; flex-direction:column; padding:4px 0 8px 14px; border-bottom:1px solid var(--line-2); }
.mobile-sub a{ padding:8px 6px; font-size:.92rem; color:var(--muted); }
.mobile-panel .nav-cta{ margin:16px 0 0; align-self:flex-start; }

@media (max-width: 920px){
  .nav-pill{ display:none; }
  .nav-toggle{ display:flex; }
  body.nav-open .mobile-panel{ display:flex; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:var(--pill); font-size:.96rem; font-weight:600;
  border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap; line-height:1.2;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-600); transform:translateY(-2px); box-shadow:var(--shadow-teal); }
.btn-ghost{ background:var(--surface); color:var(--heading); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--teal-300); background:var(--teal-50); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:.88rem; }
.btn-arrow{ display:inline-flex; transition:transform .2s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-actions.center{ justify-content:center; }
.read-link{ display:inline-flex; align-items:center; gap:6px; color:var(--teal-ink); font-weight:600; font-size:.9rem; }
.read-link svg{ transition:transform .2s ease; }
.read-link:hover svg{ transform:translateX(3px); }

/* =========================================================
   Hero (home) & page hero — light SyncNest-style glows
   ========================================================= */
.hero, .page-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(205,234,230,.75), transparent 62%),
    radial-gradient(760px 420px at 92% 0%, rgba(226,236,250,.85), transparent 60%),
    radial-gradient(620px 360px at 55% 110%, rgba(239,235,251,.7), transparent 65%),
    linear-gradient(180deg, #fbfefe 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line-2);
}
.hero-glow{ position:absolute; inset:0; pointer-events:none; }
.hero-glow span{ position:absolute; border-radius:50%; border:1px solid rgba(46,154,148,.13); }
.hero-glow .g1{ width:420px; height:420px; left:-140px; top:-180px; }
.hero-glow .g2{ width:300px; height:300px; right:-90px; top:30px; border-color:rgba(118,96,194,.12); }
.hero-glow .g3{ width:160px; height:160px; right:16%; bottom:-80px; }
.hero{ padding:96px 0 84px; }
.hero-single{ position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center; }
.hero h1{ font-size:clamp(2.6rem, 5.4vw, 4.2rem); line-height:1.08; font-weight:800; margin-top:18px; letter-spacing:-.03em; }
.hero .lead{ font-size:1.14rem; color:var(--text); max-width:640px; margin:22px auto 0; }
.hero-badge{
  display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  background:var(--surface); border:1px solid var(--line); padding:8px 20px 8px 8px; border-radius:var(--pill);
  box-shadow:var(--shadow-sm); text-align:left;
}
.hero-badge strong{ display:block; font-size:.88rem; color:var(--heading); font-weight:700; line-height:1.3; }
.hero-badge span.sub{ font-size:.8rem; color:var(--muted); }

.page-hero{ padding:76px 0 64px; }
.page-hero .container{ position:relative; z-index:2; max-width:780px; text-align:center; }
.page-hero h1{ font-size:clamp(2.1rem,4vw,3.1rem); margin-top:16px; font-weight:800; letter-spacing:-.03em; }
.page-hero p{ margin:16px auto 0; color:var(--text); font-size:1.06rem; max-width:620px; }
.page-hero-sm{ padding:52px 0 44px; }
.page-hero-sm h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); }

/* =========================================================
   Sections
   ========================================================= */
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-alt{ background:var(--bg-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.section-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin-top:14px; font-weight:700; }
.section-head p{ margin:14px auto 0; color:var(--text); font-size:1.04rem; }
.section-head.left p{ margin-left:0; }

/* =========================================================
   Cards
   ========================================================= */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-200); }
.card .ib{ margin-bottom:20px; }
.card h3{ font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.card p{ color:var(--text); font-size:.94rem; }

/* Numbered soft cards inside a white container (graphics.png) */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:32px;
  padding:52px; box-shadow:0 30px 60px -40px rgba(30,58,95,.25);
}
.panel-head{ margin-bottom:34px; }
.panel-head h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); margin-top:14px; }
.panel-head p{ margin-top:10px; font-size:1.04rem; }
.soft-grid{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
.soft-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.soft-card{
  background:#effaf8; border:1px solid #d9f0ec; border-radius:24px; padding:28px 28px 30px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.soft-card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(46,154,148,.45); }
.soft-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.soft-card .num{ font-size:.85rem; letter-spacing:.16em; color:var(--heading); font-weight:600; }
.soft-card h3{ font-size:1.18rem; margin-bottom:8px; }
.soft-card p{ font-size:.95rem; }
.soft-card.sky{ background:#f1f6fd; border-color:#dde8f7; }
.soft-card.lavender{ background:#f5f2fd; border-color:#e5def8; }
.soft-card.peach{ background:#fdf6ee; border-color:#f5e3cd; }

/* Bullet lists with teal dots (blogsingle.png) */
.dot-list li{ position:relative; padding-left:22px; margin-top:10px; font-size:.97rem; }
.dot-list li::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--teal); }

/* Pill tab bar (graphics.png) */
.pill-tabs{
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  width:max-content; max-width:100%; margin:0 auto 40px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:6px;
  box-shadow:0 16px 40px -28px rgba(30,58,95,.3);
}
.pill-tabs a{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--pill); font-weight:500; color:#4f5f66; font-size:.95rem; transition:background .2s ease, color .2s ease; }
.pill-tabs a:hover{ background:var(--teal-50); color:var(--heading); }
.pill-tabs a.is-active{ background:var(--teal); color:#fff; }
.pill-tabs a.is-active svg{ color:#fff; }
.pill-tabs svg{ color:var(--teal-ink); }
.sticky-tabs{ position:sticky; top:calc(var(--header-h) + 12px); z-index:20; }

/* Service rows */
.service-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.service-row{
  display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:22px 24px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-200); }
.service-row .num{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; color:var(--t-teal); background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); }
.service-row h3{ font-size:1.04rem; font-weight:700; }
.service-row p{ color:var(--text); font-size:.9rem; margin-top:4px; }

/* Feature block for DPDPA (service-feature) */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:28px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; transition:transform .25s ease, box-shadow .25s ease; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-card .top{ display:flex; justify-content:space-between; align-items:center; }
.feature-card .num{ font-size:.82rem; letter-spacing:.16em; color:var(--muted); font-weight:600; }
.feature-card h3{ font-size:1.06rem; }
.feature-card p{ font-size:.9rem; }
.feature-card .dot-list li{ font-size:.86rem; margin-top:6px; }
.feature-card.is-new{ border-color:var(--teal-200); background:linear-gradient(180deg,#fbfefe,#f2faf9); }
.new-pill{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:var(--pill); background:var(--teal); color:#fff; }

.service-category{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:32px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.service-category-head{ display:flex; gap:18px; align-items:flex-start; margin-bottom:22px; }
.service-category-head h3{ font-size:1.22rem; }
.service-category-head p{ font-size:.94rem; margin-top:6px; }
.subservice-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.subservice-list li{ display:flex; gap:10px; align-items:center; font-size:.92rem; color:var(--heading); background:var(--teal-50); border:1px solid var(--line-2); padding:12px 16px; border-radius:var(--pill); }
.subservice-list li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0; }

.group-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 26px; flex-wrap:wrap; }
.group-head h2{ font-size:clamp(1.5rem,2.4vw,1.95rem); margin-top:10px; }
.group-head p{ max-width:520px; font-size:.98rem; }
.service-group{ scroll-margin-top:calc(var(--header-h) + 90px); }
.service-group + .service-group{ margin-top:80px; }

/* Datasets teaser band on services page */
.teaser{
  display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;
  background:linear-gradient(135deg,#f2faf9 0%, #f4f2fd 100%); border:1px solid var(--line); border-radius:28px; padding:40px 44px; margin-top:56px;
}
.teaser h3{ font-size:1.5rem; margin-top:12px; }
.teaser p{ margin-top:10px; }
.teaser-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.teaser-stats div{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; text-align:center; }
.teaser-stats strong{ display:block; font-size:1.35rem; color:var(--heading); }
.teaser-stats span{ font-size:.78rem; color:var(--muted); }

/* =========================================================
   Stats band, process, trust strip
   ========================================================= */
.stats-band{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:44px; box-shadow:var(--shadow-sm);
}
.stat{ text-align:center; }
.stat .ib{ margin:0 auto 14px; }
.stat h3{ font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; color:var(--heading); }
.stat p{ font-size:.88rem; margin-top:4px; color:var(--muted); }
.trust-strip{ padding:24px 0; background:var(--surface); border-bottom:1px solid var(--line-2); }
.trust-strip .container{ display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.trust-label{ font-size:.74rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; font-weight:700; }
.trust-track{ display:flex; gap:12px; flex-wrap:wrap; }
.trust-track span{ font-weight:600; color:var(--heading); font-size:.9rem; padding:7px 16px; border-radius:var(--pill); background:var(--teal-50); border:1px solid var(--line-2); }

.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.process::before{ content:""; position:absolute; top:38px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg, var(--teal-200) 0 8px, transparent 8px 16px); }
.process-step{ text-align:center; position:relative; }
.step-circle{ width:76px; height:76px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; position:relative; z-index:1; }
.step-circle.teal{ background:var(--t-teal-bg); color:var(--t-teal); border:1px solid var(--t-teal-bd); }
.step-circle.lavender{ background:var(--t-lavender-bg); color:var(--t-lavender); border:1px solid var(--t-lavender-bd); }
.step-circle.sky{ background:var(--t-sky-bg); color:var(--t-sky); border:1px solid var(--t-sky-bd); }
.step-circle.peach{ background:var(--t-peach-bg); color:var(--t-peach); border:1px solid var(--t-peach-bd); }
.process-step .idx{ font-size:.74rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:8px; font-weight:600; }
.process-step h3{ font-size:1.12rem; margin-bottom:6px; }
.process-step p{ font-size:.92rem; }

/* =========================================================
   Testimonials & ratings
   ========================================================= */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testimonial-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.testimonial-card{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:28px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.testimonial-card .q{ color:var(--teal-300); margin-bottom:12px; }
.testimonial-card .stars{ color:#e9b949; letter-spacing:2px; font-size:.95rem; margin-bottom:12px; }
.testimonial-card p{ font-size:.95rem; color:var(--text); flex:1; }
.testimonial-author{ display:flex; gap:12px; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2); }
.avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.testimonial-author strong{ display:block; font-size:.9rem; color:var(--heading); line-height:1.3; }
.testimonial-author span{ font-size:.8rem; color:var(--muted); }
.rating-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.rating-card{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-sm); }
.rating-card .score{ font-size:1.7rem; font-weight:800; color:var(--heading); line-height:1; }
.rating-card .source{ font-size:.85rem; color:var(--muted); }

/* =========================================================
   Comparison table (compare.png)
   ========================================================= */
.compare-shell{ background:#f6fbfa; border:2px solid #e3f3ef; border-radius:28px; padding:48px; }
.compare-scroll{ overflow-x:auto; border-radius:16px; }
.compare-table{
  width:100%; min-width:680px; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid #e5eded; border-radius:16px; overflow:hidden;
}
.compare-table th, .compare-table td{ padding:18px 26px; text-align:left; font-size:.92rem; border-bottom:1px solid #edf2f2; border-right:1px solid #edf2f2; vertical-align:middle; color:#2c3f55; }
.compare-table tr > *:last-child{ border-right:0; }
.compare-table tbody tr:last-child > *{ border-bottom:0; }
.compare-table thead th{ font-size:1.02rem; font-weight:600; color:var(--heading); padding:24px 26px; background:var(--surface); }
.compare-table tbody th{ font-weight:500; color:#2c3f55; width:28%; padding-left:34px; }
.compare-table .cell{ display:inline-flex; align-items:center; gap:12px; }
.compare-table .is-hl{ background:#fbfefe; }
.compare-table thead th.is-hl{ background:var(--teal-50); }
.hl-pill{ display:inline-block; margin-left:10px; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--pill); background:var(--teal); color:#fff; vertical-align:middle; }
.ci{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci svg{ stroke-width:2.2; }
.ci-yes{ background:#e2f5f1; border:1px solid #c6ebe3; color:#2e9a94; }
.ci-no{ background:#fde9e9; border:1px solid #f7cfcf; color:#e0676b; }
.ci-add{ background:#fdf3e1; border:1px solid #f4dfb8; color:#c58a2d; }

/* =========================================================
   FAQ (details/summary)
   ========================================================= */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0; box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-item summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:22px 24px; cursor:pointer; font-weight:600; color:var(--heading); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ width:30px; height:30px; border-radius:50%; background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] .faq-icon{ transform:rotate(45deg); }
.faq-item p{ padding:0 24px 22px; font-size:.94rem; }

/* =========================================================
   CTA band — light, airy
   ========================================================= */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  border-radius:32px; padding:72px 56px;
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(205,234,230,.9), transparent 70%),
    radial-gradient(520px 260px at 100% 100%, rgba(226,236,250,.95), transparent 70%),
    linear-gradient(135deg, #f4fbfa, #f7f7fd);
  border:1px solid var(--line);
}
.cta-orb{ position:absolute; border-radius:50%; border:1px solid rgba(46,154,148,.15); pointer-events:none; }
.cta-orb.o1{ width:260px; height:260px; left:-80px; bottom:-120px; }
.cta-orb.o2{ width:180px; height:180px; right:-40px; top:-70px; border-color:rgba(118,96,194,.14); }
.cta-band h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin:14px auto 0; max-width:700px; position:relative; }
.cta-band p{ max-width:560px; margin:14px auto 0; position:relative; }
.cta-band .hero-actions{ position:relative; }

/* =========================================================
   Forms (contact.png)
   ========================================================= */
.contact-layout{ display:grid; grid-template-columns:1.25fr 1fr; gap:36px; align-items:start; }
.form-card, .info-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:30px; padding:44px; box-shadow:0 30px 60px -44px rgba(30,58,95,.28); }
.form-card h2{ font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; margin-bottom:28px; letter-spacing:-.03em; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:.95rem; font-weight:500; color:var(--heading); }
.field .opt{ color:var(--muted); font-weight:400; font-size:.85rem; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 20px; border-radius:var(--pill); border:1px solid #d8ecea;
  background:#f6fbfb; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7b82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 20px center; padding-right:46px; color:var(--heading); }
.field textarea{ border-radius:22px; min-height:170px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal-300); background:#fff; box-shadow:0 0 0 4px var(--teal-100); }
.field .err{ color:#c4464b; font-size:.82rem; }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:14px; }
.alert{ display:flex; gap:10px; align-items:flex-start; padding:14px 18px; border-radius:16px; font-size:.92rem; font-weight:500; margin-bottom:22px; }
.alert-success{ background:#e8f6f1; color:#1f7a63; border:1px solid #c6ebdc; }
.alert-error{ background:#fdeeee; color:#a8383d; border:1px solid #f6d0d0; }

.info-block{ display:grid; grid-template-columns:60px 1fr; gap:6px 18px; }
.info-block + .info-block{ margin-top:28px; padding-top:28px; border-top:1px solid var(--line-2); }
.info-block .ib{ width:60px; height:60px; grid-row:span 2; }
.info-block h3{ font-size:1.35rem; font-weight:600; align-self:end; }
.info-block p{ font-size:1rem; color:var(--muted); }
.info-chips{ grid-column:1 / -1; display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.info-chip{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:var(--pill); border:1px solid #d8ecea; background:#f6fbfb; color:var(--teal-ink); font-weight:500; font-size:.96rem; transition:background .2s ease, border-color .2s ease; word-break:break-word; }
a.info-chip:hover{ background:var(--teal-100); border-color:var(--teal-200); }
.info-chip svg{ flex-shrink:0; }

/* =========================================================
   Data panel (about)
   ========================================================= */
.data-panel{ background:var(--surface); border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:var(--shadow-md); }
.data-panel-head{ display:flex; align-items:center; gap:8px; padding:16px 22px; background:var(--teal-50); border-bottom:1px solid var(--line); }
.data-panel-head .dot{ width:10px; height:10px; border-radius:50%; }
.dot.d1{ background:#7fd1c7; } .dot.d2{ background:#bdb0ee; } .dot.d3{ background:#f1d184; }
.data-panel-head span.fn{ margin-left:8px; font-size:.78rem; color:var(--muted); font-weight:500; }
.data-panel-body{ padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.data-panel-row{ display:grid; grid-template-columns:1.2fr 1.2fr .8fr; gap:12px; align-items:center; padding:12px 16px; border-radius:14px; background:var(--bg); font-size:.86rem; }
.data-panel-row .cell-main{ font-weight:600; color:var(--heading); }
.data-panel-row .cell-sub{ color:var(--muted); }
.status-pill{ font-size:.72rem; padding:4px 10px; border-radius:var(--pill); justify-self:start; font-weight:600; }
.status-pill.ok{ background:var(--t-sage-bg); color:var(--t-sage); }
.status-pill.new{ background:var(--t-lavender-bg); color:var(--t-lavender); }
.status-pill.sync{ background:var(--t-peach-bg); color:var(--t-peach); }
.data-panel-foot{ display:flex; justify-content:space-between; padding:14px 22px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.data-panel-foot strong{ color:var(--teal-ink); }

/* About */
.about-intro{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.about-intro h2{ font-size:clamp(1.7rem,2.8vw,2.2rem); margin-top:14px; }
.about-intro p{ margin-top:16px; }
.metric-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.metric{ border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:16px 18px; }
.metric strong{ display:block; font-size:1.45rem; color:var(--heading); line-height:1.2; }
.metric span{ font-size:.8rem; color:var(--muted); }
.audience-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.audience{ display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:10px 22px 10px 10px; box-shadow:var(--shadow-sm); }
.audience h3{ font-size:.95rem; line-height:1.25; }
.audience p{ font-size:.8rem; color:var(--muted); line-height:1.35; }

/* =========================================================
   Datasets directory
   ========================================================= */
.dataset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dataset-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dataset-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-200); }
.dataset-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.dataset-card h3{ font-size:1.06rem; margin-bottom:6px; }
.dataset-card p{ font-size:.9rem; flex:1; }
.dataset-card .stat-tag{ font-size:.74rem; font-weight:700; color:var(--teal-ink); background:var(--teal-50); border:1px solid var(--teal-200); padding:4px 11px; border-radius:var(--pill); white-space:nowrap; }
.dataset-card .ds-actions{ display:flex; gap:16px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.dataset-card .ds-live{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--t-sage); font-weight:600; }
.dataset-card .ds-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#58b874; box-shadow:0 0 0 3px #def3e3; }
.ds-filter{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:-20px 0 36px; }
.ds-filter button{ border:1px solid var(--line); background:var(--surface); padding:8px 16px; border-radius:var(--pill); font-size:.86rem; font-weight:500; color:var(--text); }
.ds-filter button.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* Disclaimer list (General.png) */
.disc-list{ max-width:960px; margin:0 auto; background:var(--surface); border:1px solid var(--line-2); border-radius:28px; overflow:hidden; box-shadow:0 30px 60px -46px rgba(30,58,95,.3); }
.disc-item + .disc-item{ border-top:1px solid #eef3f3; }
.disc-item summary{ list-style:none; display:flex; align-items:center; gap:22px; padding:24px 36px; cursor:pointer; }
.disc-item summary::-webkit-details-marker{ display:none; }
.disc-item .ib{ width:54px; height:54px; }
.disc-item .disc-title{ flex:1; font-size:1.12rem; font-weight:500; color:#24333b; }
.disc-item .disc-num{ font-size:.86rem; letter-spacing:.2em; color:var(--muted); font-weight:500; }
.disc-item .disc-chev{ color:var(--muted); transition:transform .2s ease; }
.disc-item[open] .disc-chev{ transform:rotate(180deg); }
.disc-item[open] summary{ background:linear-gradient(90deg, var(--teal-50), transparent); }
.disc-body{ padding:4px 36px 28px 112px; }
.disc-body .dot-list li{ font-size:.96rem; }
.disc-foot{ padding:20px 36px; background:#fbfdfd; border-top:1px solid #eef3f3; font-size:.86rem; color:var(--muted); display:flex; gap:12px; align-items:center; }

/* =========================================================
   Blog listing
   ========================================================= */
.blog-hero{ padding:84px 0 72px; }
.blog-hero .container{ max-width:var(--container); text-align:left; display:grid; grid-template-columns:1.25fr .9fr; gap:56px; align-items:center; }
.blog-hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); line-height:1.1; }
.blog-hero p{ margin:18px 0 0; max-width:560px; }
.blog-search{ display:flex; align-items:center; gap:10px; margin-top:28px; max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:6px 6px 6px 20px; box-shadow:var(--shadow-sm); }
.blog-search svg{ color:var(--muted); flex-shrink:0; }
.blog-search input{ flex:1; border:0; outline:none; background:transparent; padding:10px 0; min-width:0; }
.blog-search button{ border:0; background:var(--teal); color:#fff; font-weight:600; padding:11px 22px; border-radius:var(--pill); }
.hero-topics{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.hero-topics a{ font-size:.84rem; padding:7px 15px; border-radius:var(--pill); background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--text); font-weight:500; }
.hero-topics a:hover{ border-color:var(--teal-300); color:var(--teal-ink); }
.pick-card{ background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow-md); }
.pick-card img{ aspect-ratio:16/9; object-fit:cover; width:100%; }
.pick-card .pick-body{ padding:24px 26px 26px; }
.pick-card .pick-label{ display:flex; align-items:center; gap:8px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); font-weight:700; }
.pick-card h2{ font-size:1.28rem; margin:10px 0 8px; }
.pick-card p{ font-size:.92rem; margin:0; }

.pillar-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.pillar-card{ border-radius:var(--radius-l); padding:30px 26px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pillar-card.c1{ background:linear-gradient(135deg, #eaf7f5, #f6fcfb); }
.pillar-card.c2{ background:linear-gradient(135deg, #f1edfc, #f9f7fe); }
.pillar-card.c3{ background:linear-gradient(135deg, #e9f6ec, #f6fbf7); }
.pillar-card .ib{ margin-bottom:18px; }
.pillar-card h3{ font-size:1.1rem; margin-bottom:8px; }
.pillar-card p{ font-size:.92rem; }
.pillar-squiggle{ position:absolute; top:44px; width:40px; height:24px; pointer-events:none; z-index:2; }
.pillar-squiggle.s1{ left:calc(33.333% - 20px); }
.pillar-squiggle.s2{ left:calc(66.666% - 20px); }

.blog-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:34px; }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-chips a{ padding:8px 16px; border-radius:var(--pill); font-size:.88rem; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.cat-chips a:hover{ border-color:var(--teal-300); }
.cat-chips a.is-active{ background:var(--teal); color:#fff; border-color:var(--teal); }
.results-note{ font-size:.9rem; color:var(--muted); }

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; }
.post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.post-card-media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--teal-50); }
.post-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .post-card-media img{ transform:scale(1.04); }
.post-card-ph{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:var(--teal-300); }
.post-card-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.post-card-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); margin-bottom:12px; }
.post-card h3{ font-size:1.12rem; line-height:1.35; margin-bottom:10px; }
.post-card h3 a:hover{ color:var(--teal-ink); }
.post-card p{ font-size:.92rem; flex:1; margin-bottom:18px; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:48px; }
.pagination a, .pagination span{ min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:var(--pill); border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:.9rem; color:var(--heading); }
.pagination .is-current{ background:var(--teal); color:#fff; border-color:var(--teal); }
.empty-state{ text-align:center; padding:60px 20px; background:var(--surface); border:1px dashed var(--teal-200); border-radius:24px; }
.empty-state .ib{ margin:0 auto 14px; }

/* =========================================================
   Article / CMS page with numbered sidebar (blogsingle.png)
   ========================================================= */
.article-wrap{ background:linear-gradient(180deg,#f5fbfb 0%, var(--bg) 70%); border-bottom:1px solid var(--line-2); }
.article-layout{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:72px; padding-top:56px; padding-bottom:96px; align-items:start; }
.article-layout.no-toc{ grid-template-columns:minmax(0,820px); justify-content:center; }
.toc{ position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - var(--header-h) - 48px); overflow:auto; padding-right:6px; }
.toc-label{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:0 0 14px 22px; }
.toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.toc-list a{
  display:flex; align-items:center; gap:16px; padding:12px 18px 12px 20px;
  border-radius:0 22px 22px 0; border-left:2px solid transparent;
  color:#24333b; font-size:.98rem; line-height:1.4; font-weight:500; transition:background .2s ease, border-color .2s ease;
}
.toc-list a:hover{ background:rgba(228,244,242,.55); }
.toc-list a.is-active{ background:#eaf6f5; border-left-color:var(--teal); }
.toc-num{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#e3f2f1; border:1px solid #c9e6e3; color:var(--t-teal); font-weight:700; font-size:.98rem;
  transition:background .2s ease, color .2s ease;
}
.toc-list a.is-active .toc-num{ background:var(--teal); border-color:var(--teal); color:#fff; }

.article-head .eyebrow::before{ display:none; }
.article-head .eyebrow{ letter-spacing:.2em; }
.article-head h1{ font-size:clamp(2rem,3.6vw,2.75rem); margin-top:14px; font-weight:700; letter-spacing:-.03em; }
.article-meta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:18px; font-size:.88rem; color:var(--muted); }
.article-meta span{ display:inline-flex; align-items:center; gap:6px; }
.article-cover{ margin-top:30px; border-radius:24px; overflow:hidden; border:1px solid var(--line); }
.article-cover img{ width:100%; aspect-ratio:16/7; object-fit:cover; }
.article-lead{ font-size:1.24rem; line-height:1.65; color:#2c3c45; margin-top:28px; }

.prose{ font-size:1.06rem; line-height:1.8; color:var(--text); margin-top:24px; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:1.65rem; margin-top:2.1em; padding-top:.2em; scroll-margin-top:calc(var(--header-h) + 24px); }
.prose h3{ font-size:1.22rem; margin-top:1.8em; }
.prose h4{ font-size:1.05rem; margin-top:1.5em; }
.prose p strong, .prose li strong{ color:#24333b; }
.prose a{ color:var(--teal-ink); text-decoration:underline; text-decoration-color:var(--teal-300); text-underline-offset:3px; }
.prose ul{ list-style:none; padding:0; }
.prose ul li{ position:relative; padding-left:24px; margin-top:.55em; }
.prose ul li::before{ content:""; position:absolute; left:3px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.prose ol{ padding-left:0; list-style:none; counter-reset:ol; }
.prose ol li{ counter-increment:ol; position:relative; padding-left:40px; margin-top:.7em; }
.prose ol li::before{ content:counter(ol); position:absolute; left:0; top:.1em; width:26px; height:26px; border-radius:50%; background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal); font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.prose blockquote{ margin:1.6em 0; padding:22px 26px; border-left:3px solid var(--teal); background:var(--teal-50); border-radius:0 18px 18px 0; color:#2c3c45; }
.prose .callout, .prose aside{ margin:1.8em 0; padding:26px 28px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm); }
.prose .callout > p:first-child strong:first-child{ display:block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); margin-bottom:6px; }
.prose table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e5eded; border-radius:16px; overflow:hidden; font-size:.94rem; background:var(--surface); display:block; overflow-x:auto; }
.prose table th, .prose table td{ padding:14px 18px; border-bottom:1px solid #edf2f2; border-right:1px solid #edf2f2; text-align:left; vertical-align:top; }
.prose table tr > *:last-child{ border-right:0; }
.prose table tr:last-child > *{ border-bottom:0; }
.prose table th{ color:var(--heading); font-weight:600; background:#fbfefe; }
.prose code{ background:var(--teal-50); border:1px solid var(--line-2); border-radius:6px; padding:1px 6px; font-size:.9em; }
.prose pre{ background:#16283d; color:#e6f1f0; padding:20px 22px; border-radius:18px; overflow:auto; font-size:.88rem; line-height:1.6; }
.prose pre code{ background:none; border:0; padding:0; color:inherit; }
.prose img{ border-radius:18px; }
.prose hr{ border:0; height:1px; background:var(--line); margin:2.4em 0; }

.article-foot{ margin-top:56px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center; }
.tag-list{ display:flex; gap:8px; flex-wrap:wrap; }
.tag-list a{ font-size:.82rem; padding:6px 13px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--line); color:var(--text); }
.tag-list a:hover{ border-color:var(--teal-300); color:var(--teal-ink); }
.share{ display:flex; gap:8px; align-items:center; font-size:.86rem; color:var(--muted); }
.share a{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal); }
.disclaimer-note{ margin-top:36px; display:flex; gap:14px; padding:18px 22px; border-radius:18px; background:#fbfdfd; border:1px solid var(--line); font-size:.88rem; color:var(--muted); }

/* Mobile TOC: horizontal numbered chips */
@media (max-width: 1020px){
  .article-layout, .article-layout.no-toc{ grid-template-columns:minmax(0,1fr); gap:24px; padding-top:28px; }
  .toc{ position:sticky; top:var(--header-h); z-index:20; max-height:none; overflow:visible; margin:0 -32px; padding:10px 32px; background:rgba(247,251,251,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .toc-label{ display:none; }
  .toc-list{ flex-direction:row; overflow-x:auto; gap:8px; scrollbar-width:none; }
  .toc-list::-webkit-scrollbar{ display:none; }
  .toc-list a{ padding:0; border:0; border-radius:50%; background:none!important; }
  .toc-text{ display:none; }
  .toc-num{ width:40px; height:40px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:linear-gradient(180deg, #f2f9f8, #edf6f5); border-top:1px solid var(--line); padding:72px 0 26px; }
.footer-top{ display:grid; grid-template-columns:1.35fr .75fr .9fr 1.3fr; gap:44px; padding-bottom:44px; }
.footer-brand-block p{ font-size:.92rem; max-width:300px; margin:18px 0 22px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); color:var(--t-teal); transition:background .2s ease, color .2s ease, border-color .2s ease; }
.footer-social a:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.site-footer h4{ font-size:.98rem; font-weight:700; margin-bottom:18px; }
.footer-col a{ display:block; font-size:.92rem; margin-bottom:11px; color:var(--text); transition:color .2s ease; }
.footer-col a:hover, .footer-contact a:hover{ color:var(--teal-ink); }
.footer-contact li{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; margin-bottom:13px; line-height:1.5; }
.footer-contact small{ color:var(--muted); }
.fc-ic{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal); margin-top:-3px; }
.footer-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.86rem; color:var(--muted); }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a:hover{ color:var(--teal-ink); }

.back-to-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%;
  background:var(--surface); color:var(--teal); border:1px solid var(--teal-200); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; z-index:200;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.back-to-top svg{ transform:rotate(-90deg); }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--teal); color:#fff; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in{ opacity:1; transform:none; }

/* Utilities */
.mt-48{ margin-top:48px; } .mt-64{ margin-top:64px; }
.text-center{ text-align:center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .feature-grid, .soft-grid{ grid-template-columns:repeat(2,1fr); }
  .audience-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px){
  .grid-3, .post-grid, .dataset-grid, .pillar-row, .testimonial-grid, .soft-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4, .stats-band, .rating-grid, .testimonial-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .process::before{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .service-list, .faq-grid, .subservice-list{ grid-template-columns:1fr; }
  .contact-layout, .about-intro, .teaser, .blog-hero .container{ grid-template-columns:1fr; }
  .pillar-squiggle{ display:none; }
  .panel{ padding:36px 28px; }
  .compare-shell{ padding:24px; }
}
@media (max-width: 640px){
  :root{ --header-h:72px; }
  .container{ padding:0 20px; }
  .section{ padding:68px 0; }
  .grid-2, .grid-3, .grid-4, .post-grid, .dataset-grid, .pillar-row, .testimonial-grid, .testimonial-grid.cols-4, .feature-grid, .soft-grid, .soft-grid.cols-3, .rating-grid, .audience-grid{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:1fr 1fr; padding:28px 20px; }
  .form-row, .metric-row, .teaser-stats{ grid-template-columns:1fr; }
  .form-card, .info-card{ padding:28px 22px; border-radius:24px; }
  .cta-band{ padding:48px 22px; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .disc-item summary{ padding:18px 20px; gap:14px; }
  .disc-body{ padding:4px 20px 22px; }
  .disc-item .ib{ width:44px; height:44px; }
  .compare-shell{ padding:14px; border-radius:20px; }
  .teaser{ padding:28px 22px; }
  .hero{ padding:64px 0 56px; }
  .toc{ margin:0 -20px; padding:10px 20px; }
}

a.card{ display:block; }

/* =========================================================
   Dataset dashboards (4 templates)
   ========================================================= */
.ds-hero{ position:relative; overflow:hidden; padding:40px 0 48px; border-bottom:1px solid var(--line-2);
  background:radial-gradient(800px 380px at 10% -20%, rgba(205,234,230,.8), transparent 60%), radial-gradient(700px 360px at 100% 0%, rgba(226,236,250,.85), transparent 60%), linear-gradient(180deg,#fbfefe,var(--bg)); }
.ds-hero .container{ position:relative; z-index:2; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted); margin-bottom:22px; }
.crumbs a{ color:var(--teal-ink); font-weight:600; }
.ds-hero-grid{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.ds-title-row{ display:flex; align-items:center; gap:14px; }
.ds-hero h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:16px; letter-spacing:-.03em; }
.ds-hero p{ margin-top:12px; max-width:720px; }
.ds-hero-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.ds-hero-actions{ display:flex; flex-direction:column; gap:10px; }
.ds-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--text); }
.ds-badge.sample{ background:#fff7ea; border-color:#f4dfb8; color:#9a6620; }
.ds-badge.full{ background:#e8f6f1; border-color:#c6ebdc; color:#1f7a63; }

.ds-card{ background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.ds-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.ds-card h2{ font-size:1.16rem; }
.ds-sub{ font-size:.86rem; color:var(--muted); margin-top:2px; }
.ds-two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ds-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ds-search{ display:flex; align-items:center; gap:8px; padding:0 16px; border-radius:var(--pill); border:1px solid #d8ecea; background:#f6fbfb; color:var(--muted); }
.ds-search input{ border:0; background:transparent; outline:none; padding:10px 0; width:200px; font-size:.9rem; }
.ds-search:focus-within{ border-color:var(--teal-300); box-shadow:0 0 0 4px var(--teal-100); background:#fff; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.kpi{ display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:18px 20px; box-shadow:var(--shadow-sm); }
.kpi strong{ display:block; font-size:1.45rem; color:var(--heading); line-height:1.15; }
.kpi span{ font-size:.82rem; color:var(--muted); }

.hbars li{ margin-bottom:14px; }
.hbar-top{ display:flex; justify-content:space-between; font-size:.88rem; color:var(--heading); margin-bottom:6px; }
.hbar-top strong{ font-weight:700; }
.hbar-track{ height:10px; border-radius:var(--pill); background:#eef4f4; overflow:hidden; }
.hbar-track span{ display:block; height:100%; border-radius:var(--pill); }

.donut-wrap{ display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:center; }
.donut{ width:100%; max-width:200px; }
.donut-num{ font-size:26px; font-weight:800; fill:var(--heading); font-family:var(--font); }
.donut-lbl{ font-size:12px; fill:var(--muted); font-family:var(--font); }
.legend li{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--heading); padding:6px 0; border-bottom:1px dashed var(--line-2); }
.legend li span:nth-child(2){ flex:1; }
.legend .sw{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }

.columns{ width:100%; height:auto; }
.col-val{ font-size:12px; font-weight:700; fill:var(--heading); font-family:var(--font); }
.col-lbl{ font-size:11px; fill:var(--muted); font-family:var(--font); }

.tiles{ display:flex; gap:6px; height:118px; margin-bottom:18px; }
.tile{ border-radius:16px; padding:12px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; overflow:hidden; }
.tile strong{ font-size:1.1rem; line-height:1.1; }
.tile span{ font-size:.72rem; opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ds-scroll{ overflow-x:auto; border:1px solid #e5eded; border-radius:16px; }
.ds-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:720px; }
.ds-table th{ text-align:left; background:#f8fcfc; border-bottom:1px solid #e5eded; padding:0; white-space:nowrap; }
.th-btn{ width:100%; display:flex; align-items:center; gap:6px; padding:14px 16px; background:none; border:0; font-weight:600; color:var(--heading); font-size:.86rem; text-align:left; }
.th-btn:hover{ background:var(--teal-50); }
.sort-ind{ color:var(--teal); }
.ds-table td{ padding:13px 16px; border-bottom:1px solid #edf2f2; color:#33434c; white-space:nowrap; }
.ds-table tbody tr:hover td{ background:#fbfefe; }
.ds-table tr:last-child td{ border-bottom:0; }
.td-main{ font-weight:600; color:var(--heading)!important; }
.cell-chip{ display:inline-block; padding:3px 10px; border-radius:var(--pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-ink); font-size:.76rem; font-weight:600; white-space:nowrap; }
.ds-empty{ text-align:center; color:var(--muted); padding:30px!important; }
.ds-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; font-size:.86rem; color:var(--muted); }
.ds-pager{ display:flex; gap:6px; }
.ds-pager button{ min-width:36px; height:36px; border-radius:var(--pill); border:1px solid var(--line); background:var(--surface); color:var(--heading); font-weight:600; font-size:.86rem; }
.ds-pager button.is-current{ background:var(--teal); border-color:var(--teal); color:#fff; }
.ds-pager button:disabled{ opacity:.4; cursor:default; }
.ds-lock{ display:flex; align-items:center; gap:18px; margin-top:20px; padding:20px 22px; border-radius:20px; border:1px dashed var(--teal-300); background:linear-gradient(90deg,#f2faf9,#f6f4fd); flex-wrap:wrap; }
.ds-lock div{ flex:1; min-width:220px; }
.ds-lock strong{ color:var(--heading); display:block; }
.ds-lock p{ font-size:.88rem; }
.field-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.field-chips span{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--pill); background:var(--teal-50); border:1px solid var(--line-2); font-size:.84rem; color:var(--heading); }
.field-chips svg{ color:var(--teal); }

/* Directory template */
.dir-top{ display:grid; grid-template-columns:1fr 1.2fr; gap:22px; margin-bottom:22px; align-items:stretch; }
.kpi-inline{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.kpi-inline div{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 18px; box-shadow:var(--shadow-sm); }
.kpi-inline strong{ display:block; font-size:1.35rem; color:var(--heading); }
.kpi-inline span{ font-size:.8rem; color:var(--muted); }
.dir-mix{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:var(--shadow-sm); }
.dir-mix .tiles{ margin:12px 0 0; height:120px; }
.dir-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.dir-chips button{ display:inline-flex; gap:8px; align-items:center; padding:8px 14px; border-radius:var(--pill); border:1px solid var(--line); background:var(--surface); font-size:.85rem; font-weight:500; color:var(--text); }
.dir-chips button span{ font-size:.74rem; padding:1px 7px; border-radius:var(--pill); background:var(--teal-50); color:var(--teal-ink); }
.dir-chips button.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }
.dir-chips button.is-active span{ background:rgba(255,255,255,.25); color:#fff; }
.dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dir-card{ border:1px solid var(--line); border-radius:20px; padding:20px; background:#fcfefe; transition:transform .2s ease, box-shadow .2s ease; }
.dir-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dir-card-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.dir-card-head .ib{ font-weight:800; font-size:1rem; }
.dir-card h3{ font-size:1rem; margin-bottom:4px; }
.dir-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0; padding-top:14px; border-top:1px solid var(--line-2); }
.dir-fields div{ min-width:0; }
.dir-fields dt{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.dir-fields dd{ margin:2px 0 0; font-size:.88rem; color:var(--heading); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Report template */
.report-layout{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; align-items:start; }
.report-side{ position:sticky; top:calc(var(--header-h) + 20px); }
.report-side .ds-card{ padding:22px; }
.side-h{ font-size:1rem!important; margin-bottom:14px; }
.glance{ margin:0; display:grid; gap:10px; }
.glance div{ display:flex; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px dashed var(--line-2); }
.glance dt{ font-size:.86rem; color:var(--muted); }
.glance dd{ margin:0; font-weight:700; color:var(--heading); }
.meters li{ margin-bottom:12px; }
.meter-top{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--heading); margin-bottom:5px; }
.meter{ height:8px; border-radius:var(--pill); background:#eef4f4; overflow:hidden; }
.meter span{ display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,#5cc4b8,#2e9a94); }

/* Spotlight template */
.spot-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:22px; border-radius:28px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(135deg,#e2f3f1 0%,#eef3fb 55%,#f3effc 100%); }
.spot-stat{ padding:30px 28px; border-right:1px solid rgba(255,255,255,.7); }
.spot-stat:last-child{ border-right:0; }
.spot-stat strong{ display:block; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; color:var(--heading); letter-spacing:-.03em; line-height:1.05; }
.spot-stat span{ font-size:.86rem; color:var(--text); }
.rank{ list-style:none; margin:0; padding:0; }
.rank li{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.rank-n{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; background:var(--t-teal-bg); border:1px solid var(--t-teal-bd); color:var(--t-teal); }
.rank-body{ flex:1; min-width:0; }
.rank-top{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--heading); margin-bottom:6px; }

@media (max-width: 980px){
  .ds-hero-grid, .ds-two, .dir-top, .report-layout{ grid-template-columns:1fr; }
  .ds-hero-actions{ flex-direction:row; flex-wrap:wrap; }
  .report-side{ position:static; }
  .kpi-grid, .spot-band{ grid-template-columns:repeat(2,1fr); }
  .dir-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .kpi-grid, .dir-grid{ grid-template-columns:1fr; }
  .donut-wrap{ grid-template-columns:1fr; justify-items:center; }
  .legend{ width:100%; }
  .ds-card{ padding:20px; }
  .ds-search input{ width:140px; }
  .spot-stat{ padding:20px; }
}

.ds-two > *, .dir-top > *, .report-main{ min-width:0; }
.tiles .tile{ min-width:46px; }
@media (max-width: 640px){ .tiles, .dir-mix .tiles{ flex-wrap:wrap; height:auto; } .tiles .tile{ min-height:68px; flex:1 1 28%!important; } }
.mobile-panel > a.nav-cta{ color:#fff; border-bottom:0; padding:12px 28px; }

/* =========================================================
   v3 REVISIONS
   ========================================================= */
:root{ --font-heading: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* 1. Inter for all headings (H1–H3 and hero headings) */
h1, h2, h3, .hero h1, .page-hero h1, .ds-hero h1, .article-head h1, .cta-band h2, .section-head h2,
.panel-head h2, .group-head h2, .stat h3, .kpi strong, .spot-stat strong{
  font-family: var(--font-heading); letter-spacing:-.025em;
}

/* 10. Centred main nav, Contact at the far right */
.nav-bar{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; }
.nav-bar .brand{ justify-self:start; }
.nav-bar .nav-pill{ justify-self:center; }
.nav-contact{ justify-self:end; margin-left:0; padding:11px 26px; box-shadow:0 10px 22px -14px rgba(46,154,148,.7); }
.nav-bar .nav-toggle{ justify-self:end; }
@media (max-width: 920px){
  .nav-bar{ grid-template-columns:1fr auto; }
  .nav-contact{ display:none; }
}
@media (min-width: 921px) and (max-width: 1120px){
  .nav-link{ padding:10px 14px; font-size:.92rem; }
  .nav-bar{ gap:12px; }
}

/* 3. Homepage hero ~70% height; centred trust strip */
.hero{ padding:58px 0 50px; }
.hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.55rem); margin-top:14px; line-height:1.07; }
.hero .lead{ font-size:1.08rem; margin-top:16px; max-width:660px; }
.hero .hero-actions{ margin-top:24px; }
.hero .hero-badge{ margin-top:22px; padding:6px 18px 6px 6px; }
@media (max-width: 640px){ .hero{ padding:40px 0 38px; } .hero h1{ font-size:2.1rem; } .hero .lead{ font-size:1rem; } }

.trust-strip .container{ flex-direction:column; justify-content:center; align-items:center; gap:14px; text-align:center; }
.trust-track{ justify-content:center; }

/* Homepage DPDP services strip */
.dpdp-home{ display:grid; grid-template-columns:.9fr 1.6fr; gap:40px; align-items:center;
  background:linear-gradient(135deg,#f2faf9 0%,#f6f4fd 100%); border:1px solid var(--line); border-radius:32px; padding:44px; }
.dpdp-home h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:12px; }
.dpdp-home > div > p{ margin-top:12px; }
.dpdp-home .facts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.dpdp-home .facts span{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--heading); background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:var(--pill); }
.dpdp-home .facts svg{ color:var(--teal); }
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mini-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; transition:transform .2s ease, box-shadow .2s ease; display:block; }
.mini-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.mini-card .ib{ margin-bottom:12px; }
.mini-card h3{ font-size:.98rem; margin-bottom:4px; }
.mini-card p{ font-size:.84rem; line-height:1.5; }
@media (max-width: 980px){ .dpdp-home{ grid-template-columns:1fr; padding:30px; } }
@media (max-width: 640px){ .mini-grid{ grid-template-columns:1fr 1fr; } .dpdp-home{ padding:24px 18px; border-radius:24px; } }
@media (max-width: 420px){ .mini-grid{ grid-template-columns:1fr; } }

/* 4. Services tabs: solid sticky band that never covers headings; hidden on mobile */
.tabs-band{ position:sticky; top:var(--header-h); z-index:30; margin:0 -32px 36px; padding:12px 32px 14px;
  background:linear-gradient(180deg, var(--bg) 78%, rgba(247,251,251,0)); }
.tabs-band .pill-tabs{ margin:0 auto; }
.service-group{ scroll-margin-top:calc(var(--header-h) + 100px); }
@media (max-width: 920px){ .tabs-band{ display:none; } .service-group{ scroll-margin-top:calc(var(--header-h) + 16px); } }

/* 5. Mobile article TOC — let vertical swipes pass through, no scroll snapping fights */
@media (max-width: 1020px){
  .toc{ touch-action:pan-x pan-y; }
  .toc-list{ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .toc-list a{ flex-shrink:0; }
}
.prose h2{ scroll-margin-top:calc(var(--header-h) + 24px); }
@media (max-width: 1020px){ .prose h2{ scroll-margin-top:calc(var(--header-h) + 80px); } }

/* ---------- DPDPA page ---------- */
.tl-title{ font-size:1.12rem; margin:40px 0 18px; }
.timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; }
.timeline::before{ content:""; position:absolute; left:20px; right:20px; top:19px; height:2px; background:repeating-linear-gradient(90deg,var(--teal-200) 0 8px,transparent 8px 16px); }
.timeline li{ position:relative; display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
.timeline .tl-dot{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); color:var(--muted); position:relative; z-index:1; margin-bottom:10px; }
.timeline li.done .tl-dot{ background:var(--t-teal-bg); border-color:var(--t-teal-bd); color:var(--t-teal); }
.timeline li.next .tl-dot{ background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 0 0 6px var(--teal-100); }
.timeline strong{ font-family:var(--font-heading); color:var(--heading); font-size:1.05rem; }
.feature-grid.fg-3{ grid-template-columns:repeat(3,1fr); }
.feature-card{ scroll-margin-top:calc(var(--header-h) + 100px); }
.dd-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:36px; align-items:start; }
.dd-h{ font-size:clamp(1.5rem,2.4vw,1.95rem); margin:12px 0 12px; }
.dd-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.dd-card{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow-sm); }
.dd-card h3{ font-size:.98rem; margin-bottom:4px; }
.dd-card p{ font-size:.86rem; line-height:1.55; }
.check-card{ background:linear-gradient(180deg,#fbfefe,#f2faf9); border:1px solid var(--teal-200); border-radius:26px; padding:26px; position:sticky; top:calc(var(--header-h) + 90px); }
.check-head{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.check-head h3{ font-size:1.06rem; }
.check-head p{ font-size:.84rem; color:var(--muted); }
.check-list li{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line); font-size:.92rem; color:var(--heading); }
.check-list li:last-child{ border-bottom:0; }
.guide-strip{ margin-top:28px; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:26px 28px; box-shadow:var(--shadow-sm); }
.guide-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; }
.guide-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
.guide-list a{ display:flex; align-items:center; gap:14px; padding:10px 8px; border-radius:16px; color:var(--heading); transition:background .2s ease; }
.guide-list a:hover{ background:var(--teal-50); }
.guide-list .toc-num{ width:38px; height:38px; font-size:.88rem; }
.guide-list .g-text{ flex:1; min-width:0; }
.guide-list strong{ display:block; font-weight:600; font-size:.94rem; line-height:1.35; }
.guide-list small{ color:var(--muted); font-size:.78rem; }
.guide-list a > svg{ color:var(--teal); flex-shrink:0; }
.process.process-5{ grid-template-columns:repeat(5,1fr); }
.process.process-5::before{ left:10%; right:10%; }
.sop-card{ display:grid; grid-template-columns:.8fr 1.5fr; gap:30px; align-items:center; margin-top:44px; background:linear-gradient(135deg,#f2faf9,#f4f2fd); border:1px solid var(--line); border-radius:28px; padding:32px 36px; }
.sop-card h3{ font-size:1.3rem; margin:10px 0 6px; }
.sop-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sop-list li{ display:flex; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:10px 16px; font-size:.88rem; color:var(--heading); }
.sop-list svg{ color:var(--teal); flex-shrink:0; }
.tool-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tool-card{ display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tool-card h3{ font-size:1rem; margin-bottom:4px; }
.tool-card p{ font-size:.86rem; line-height:1.55; }
@media (max-width: 1080px){ .tool-grid{ grid-template-columns:repeat(2,1fr); } .process.process-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 980px){
  .feature-grid.fg-3{ grid-template-columns:repeat(2,1fr); }
  .dd-layout, .sop-card{ grid-template-columns:1fr; }
  .check-card{ position:static; }
  .timeline{ grid-template-columns:1fr 1fr; }
  .timeline::before{ display:none; }
  .guide-list{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .feature-grid.fg-3, .dd-cards, .tool-grid, .sop-list, .timeline{ grid-template-columns:1fr; }
  .process.process-5{ grid-template-columns:1fr 1fr; }
  .sop-card{ padding:24px 20px; }
  .guide-strip{ padding:20px 16px; }
}

/* ---------- All Blogs page ---------- */
.ab-stats{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.ab-stats > div{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:6px 18px 6px 6px; box-shadow:var(--shadow-sm); }
.ab-stats strong{ font-family:var(--font-heading); color:var(--heading); font-size:1.15rem; }
.ab-stats span{ font-size:.86rem; color:var(--muted); }
.topic-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:30px; }
.topic-card{ display:flex; align-items:center; gap:14px; padding:20px; border-radius:24px; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.topic-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.topic-card h2{ font-size:1.05rem; }
.topic-card span{ font-size:.82rem; color:var(--muted); }
.topic-card div{ flex:1; }
.topic-card .tc-arrow{ color:var(--teal); }
.tc-teal{ background:linear-gradient(135deg,#eaf7f5,#f6fcfb); }
.tc-lavender{ background:linear-gradient(135deg,#f1edfc,#f9f7fe); }
.tc-sage{ background:linear-gradient(135deg,#e9f6ec,#f6fbf7); }
.tc-rose{ background:linear-gradient(135deg,#fcedf1,#fdf8f9); }
.tc-sky{ background:linear-gradient(135deg,#eaf1fc,#f7f9fe); }
.ab-toolbar{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:28px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-sm); }
.ab-search{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; max-width:420px; padding:0 18px; border-radius:var(--pill); border:1px solid #d8ecea; background:#f6fbfb; color:var(--muted); }
.ab-search input{ flex:1; border:0; outline:none; background:transparent; padding:11px 0; min-width:0; }
.ab-search:focus-within{ border-color:var(--teal-300); box-shadow:0 0 0 4px var(--teal-100); background:#fff; }
.cat-chips button{ padding:8px 16px; border-radius:var(--pill); font-size:.88rem; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--text); display:inline-flex; gap:7px; align-items:center; }
.cat-chips button span{ font-size:.74rem; padding:0 7px; border-radius:var(--pill); background:var(--teal-50); color:var(--teal-ink); }
.cat-chips button.is-active{ background:var(--teal); color:#fff; border-color:var(--teal); }
.cat-chips button.is-active span{ background:rgba(255,255,255,.25); color:#fff; }
.ab-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; }
.ab-group{ background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:10px 10px 12px; margin-bottom:20px; box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--header-h) + 20px); }
.ab-group-head{ display:flex; align-items:center; gap:12px; padding:12px 14px 14px; border-bottom:1px solid var(--line-2); margin-bottom:6px; }
.ab-group-head h2{ font-size:1.15rem; flex:1; }
.ab-list li a{ display:flex; align-items:center; gap:16px; padding:14px; border-radius:18px; transition:background .2s ease; }
.ab-list li a:hover{ background:var(--teal-50); }
.ab-list li + li{ border-top:1px dashed var(--line-2); }
.ab-text{ flex:1; min-width:0; }
.ab-text strong{ display:block; font-family:var(--font-heading); font-weight:600; color:var(--heading); font-size:1rem; line-height:1.4; letter-spacing:-.01em; }
.ab-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; font-size:.8rem; color:var(--muted); }
.ab-meta .chip{ font-size:.7rem; padding:2px 9px; }
.ab-go{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--teal); transition:background .2s ease, color .2s ease, transform .2s ease; }
.ab-list li a:hover .ab-go{ background:var(--teal); color:#fff; transform:translateX(2px); }
.ab-side{ position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:18px; }
.ab-path{ background:linear-gradient(180deg,#f2faf9,#fbfefe); border:1px solid var(--teal-200); border-radius:26px; padding:24px; }
.ab-path h2{ font-size:1.2rem; margin-top:10px; }
.ab-path > p{ font-size:.88rem; margin:4px 0 12px; }
.ab-path ol{ list-style:none; margin:0; padding:0; }
.ab-path li a{ display:flex; gap:12px; align-items:center; padding:8px 4px; font-size:.88rem; color:var(--heading); font-weight:500; line-height:1.35; border-radius:12px; }
.ab-path li a:hover{ color:var(--teal-ink); }
.ab-path .toc-num{ width:34px; height:34px; font-size:.84rem; }
.ab-promo{ background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:24px; box-shadow:var(--shadow-sm); }
.ab-promo h3{ font-size:1.05rem; margin:14px 0 6px; }
.ab-promo p{ font-size:.88rem; margin-bottom:16px; }
@media (max-width: 980px){ .ab-layout{ grid-template-columns:1fr; } .ab-side{ position:static; } }
@media (max-width: 640px){ .ab-list li a{ gap:12px; padding:12px 8px; } .ab-go{ display:none; } .ab-toolbar{ padding:12px; } .ab-search{ max-width:none; } }
.hero-topics a.ht-all{ background:var(--teal); border-color:var(--teal); color:#fff; display:inline-flex; align-items:center; gap:6px; }
.hero-topics a.ht-all:hover{ color:#fff; background:var(--teal-600); }
/* hero — final sizing (~70% of the original height) */
.hero{ padding:44px 0 40px; }
.hero h1{ font-size:clamp(2.2rem, 4.2vw, 3.25rem); }
.hero .lead{ max-width:740px; margin-top:14px; }
.hero .hero-actions{ margin-top:22px; }
.hero .hero-badge{ margin-top:18px; }
@media (max-width: 640px){
  .hero{ padding:30px 0 30px; }
  .hero h1{ font-size:1.95rem; }
  .hero .lead{ font-size:.98rem; line-height:1.6; }
  .hero .hero-actions{ margin-top:18px; }
  .hero .hero-badge{ margin-top:14px; }
}
@media (min-width: 641px){ .hero{ padding:36px 0 34px; } .hero .hero-badge{ margin-top:16px; } }
.post-card-media picture, .pick-card picture, .article-cover picture{ display:block; width:100%; height:100%; }
.pill-tabs-compact a{ padding:9px 14px; font-size:.9rem; gap:6px; }
@media (max-width: 1180px){ .pill-tabs-compact a svg{ display:none; } }