/* Webfonts are loaded from the document head by zz-assets.php, not imported here. */

.ds{
  --paper:#FFFFFF;--mist:#F5F8FD;--mist2:#EEF3FA;--line:#DCDFE4;
  --ink:#0C183C;--navy:#243156;--body:#585E72;
  --accent:#3060F0;--accent-dk:#2149C9;--accent-soft:#EAF0FE;
  --ok:#0F7048;--ok-soft:#DEF6E9;--warn:#9A3B30;--warn-soft:#FBEAE8;
  --font:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --shadow:0 1px 2px rgba(12,24,60,.04),0 16px 40px -18px rgba(12,24,60,.18);
  --r:16px;
  font-family:var(--font);color:var(--body);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px;
}
.ds *{box-sizing:border-box;margin:0;padding:0}
.ds .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.ds .wrap-sm{max-width:900px;margin:0 auto;padding:0 24px}
.ds section{padding:78px 0}
.ds section.tight{padding:54px 0}
.ds a{color:inherit;text-decoration:none}
.ds h1,.ds h2,.ds h3,.ds h4{color:var(--ink);font-weight:800;line-height:1.14;letter-spacing:-.02em}
.ds h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.ds h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.ds h3{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.ds p{color:var(--body)}
.ds .kicker{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ds .lead{font-size:1.14rem;max-width:64ch}
.ds .center{text-align:center;margin-left:auto;margin-right:auto}
.ds .head-block{max-width:66ch;margin-bottom:42px}
.ds .muted{color:var(--body);font-size:.9rem}

/* buttons */
.ds .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:700;font-size:1rem;padding:.82em 1.6em;border-radius:10px;border:1.5px solid transparent;transition:transform .16s,background .16s,border-color .16s,color .16s;cursor:pointer}
.ds .btn-primary{background:var(--ink);color:#fff}
.ds .btn-primary:hover{transform:translateY(-2px);background:#16224e}
.ds .btn-blue{background:var(--accent);color:#fff}
.ds .btn-blue:hover{transform:translateY(-2px);background:var(--accent-dk)}
.ds .btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.ds .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ds .btn-white{background:#fff;color:var(--ink);border-color:#fff}
.ds .btn-white:hover{transform:translateY(-2px)}
.ds .btn-outline-w{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.ds .btn-outline-w:hover{background:rgba(255,255,255,.12);border-color:#fff}
.ds .btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ds .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.ds .cta-row.center{justify-content:center}

/* hero */
.ds .hero{padding-top:56px;padding-bottom:56px}
.ds .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.ds .hero h1{margin-bottom:18px}
.ds .hero h1 em{font-style:normal;color:var(--accent)}
.ds .hero .lead{margin-bottom:24px}
.ds .checks{display:grid;gap:9px;margin-top:20px}
.ds .checks span{display:flex;align-items:center;gap:9px;font-size:.95rem;color:var(--ink);font-weight:500}
.ds .checks .c{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex:none}
.ds .mini{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.ds .mini div{display:flex;flex-direction:column}
.ds .mini b{font-weight:800;font-size:1.4rem;color:var(--ink);line-height:1}
.ds .mini small{font-size:.78rem;margin-top:4px}
.ds .heroart{border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#ECF1FF,#E2EBF9);padding:22px;box-shadow:var(--shadow)}
.ds .heroart .inner{background:#fff;border-radius:12px;padding:18px}
.ds .heroart .hrow{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--ink)}
.ds .heroart .up{color:var(--ok)}

/* answer band */
.ds .answer{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:24px 28px}
.ds .answer .lbl{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:block}
.ds .answer p{font-size:1.06rem;line-height:1.72;color:var(--ink)}

/* cards */
.ds .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ds .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ds .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ds .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .16s,box-shadow .16s,border-color .16s}
.ds .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#C6D6FB}
.ds .card h3{margin-bottom:8px}
.ds .card p{font-size:.96rem}
.ds .card .k{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.ds .icn{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;margin-bottom:16px}

/* numbered steps */
.ds .steps{list-style:none;display:grid;gap:16px;counter-reset:s}
.ds .steps li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.ds .steps .num{flex:none;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center}
.ds .steps h3{font-size:1.05rem;margin-bottom:5px}
.ds .steps p{font-size:.96rem;line-height:1.65}

/* switch / before-after */
.ds .switch-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.ds .sw-card{border-radius:18px;padding:30px}
.ds .sw-before{background:var(--mist);border:1px solid var(--line)}
.ds .sw-after{background:var(--ink)}
.ds .sw-tag{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.ds .sw-before .sw-tag{color:var(--body)}
.ds .sw-after .sw-tag{color:#6E8FF6}
.ds .sw-list{list-style:none;display:grid;gap:13px}
.ds .sw-list li{position:relative;padding-left:30px;font-size:.99rem;line-height:1.45}
.ds .sw-before .sw-list li{color:var(--body)}
.ds .sw-after .sw-list li{color:#fff;font-weight:500}
.ds .sw-before .sw-list li::before{content:"\2715";position:absolute;left:0;top:0;color:#C25B4E;font-weight:800}
.ds .sw-after .sw-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#6E8FF6;font-weight:800}
.ds .sw-arrow{display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--accent);font-weight:800}

/* ticks list */
.ds .ticks{display:grid;gap:11px}
.ds .ticks li,.ds .ticks div{list-style:none;position:relative;padding-left:28px;font-size:1rem;line-height:1.6;color:var(--ink)}
.ds .ticks li::before,.ds .ticks div::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}

/* warn cards */
.ds .warn-card{background:var(--warn-soft);border-left:3px solid #D98C80;border-radius:0 12px 12px 0;padding:18px 22px}
.ds .warn-card h3{font-size:1.03rem;color:#7A392F;margin-bottom:6px}
.ds .warn-card p{font-size:.95rem;line-height:1.65;color:#7A392F}

/* table */
.ds .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.ds table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:440px}
.ds thead th{background:var(--ink);color:#fff;font-weight:700;text-align:left;padding:14px 20px}
.ds thead th:last-child{background:var(--accent)}
.ds tbody td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--body)}
.ds tbody tr:last-child td{border-bottom:none}
.ds tbody td:last-child{color:var(--ink);font-weight:600;background:#F7F9FE}

/* tool cards + previews */
.ds .toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ds .tool{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:transform .14s,box-shadow .14s,border-color .14s}
.ds .tool:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#C6D6FB}
.ds .tool-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ds .tool-name{font-weight:700;font-size:1.03rem;color:var(--ink)}
.ds .tool p{font-size:.89rem;line-height:1.45}
.ds .badge{font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.2em .5em;border-radius:5px;flex:none}
.ds .badge.pop{background:var(--accent);color:#fff}
.ds .badge.new{background:var(--accent-soft);color:var(--accent-dk)}
.ds .badge.ai{background:var(--ink);color:#fff}
.ds .tprev{position:relative;height:128px;border-radius:12px;background:linear-gradient(135deg,#ECF1FF,#E2EBF9);padding:13px;overflow:hidden;margin-bottom:14px}
.ds .tprev.lg{height:210px;padding:20px}
.ds .pv-panel{position:relative;background:#fff;border-radius:9px;height:100%;box-shadow:0 4px 14px -6px rgba(12,24,60,.16);padding:12px;overflow:hidden}
.ds .pv-float{position:absolute;background:#fff;border-radius:8px;box-shadow:0 9px 20px -6px rgba(12,24,60,.3);padding:5px 9px;font-size:.62rem;font-weight:700;color:var(--ink);z-index:3;white-space:nowrap}
.ds .tprev.lg .pv-float{font-size:.78rem;padding:7px 12px}
.ds .pp-center{display:flex;align-items:center;justify-content:center;height:100%}
.ds .pp-chart{display:flex;align-items:flex-end;gap:6px;justify-content:center;height:100%}
.ds .pp-chart .b{width:9px;border-radius:3px 3px 0 0;background:var(--accent)}
.ds .pp-chart .b.lp{background:#BCC8F6}.ds .pp-chart .b.gr{background:#54CC89}.ds .pp-chart .b.vp{background:#8C7BF0}
.ds .pp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-content:center;height:100%}
.ds .pp-grid i{aspect-ratio:1;border-radius:4px;background:#EEF1F7;color:#A6AEBF;display:flex;align-items:center;justify-content:center;font-size:.56rem;font-weight:800;font-style:normal}
.ds .tprev.lg .pp-grid i{font-size:.8rem;border-radius:6px}
.ds .pp-grid i.a{background:var(--accent);color:#fff}.ds .pp-grid i.b{background:#89A4F7;color:#fff}.ds .pp-grid i.c{background:var(--ink);color:#fff}
.ds .pp-rows{display:flex;flex-direction:column;gap:9px;justify-content:center;height:100%}
.ds .pp-rows .kw{display:flex;align-items:center;gap:7px}
.ds .pp-rows .kw .t{height:7px;border-radius:4px;background:var(--accent)}
.ds .pp-rows .kw .t.lt{background:#C2CEF6}
.ds .pp-rows .kw .v{margin-left:auto;font-size:.55rem;font-weight:800;color:var(--ok);background:var(--ok-soft);border-radius:4px;padding:.12em .4em;font-style:normal}
.ds .pp-vs{display:flex;flex-direction:column;gap:13px;justify-content:center;height:100%}
.ds .pp-vs .r{display:flex;align-items:center;gap:7px}
.ds .pp-vs .r em{font-size:.6rem;font-style:normal;font-weight:800;width:30px}
.ds .pp-vs .r .bar{height:10px;border-radius:5px;background:var(--accent)}
.ds .pp-vs .r .bar.alt{background:#C6D0DE}
.ds .pp-vs .r b{font-size:.6rem;font-weight:800;color:var(--ink);margin-left:auto}
.ds .pp-ai{display:flex;flex-wrap:wrap;gap:5px;align-content:center;height:100%}
.ds .pp-ai b{font-size:.56rem;font-weight:700;padding:.32em .5em;border-radius:6px;background:#EEF2FA;color:var(--ink)}
.ds .tprev.lg .pp-ai b{font-size:.76rem;padding:.45em .75em}
.ds .pp-ai b.on{background:var(--accent);color:#fff}
.ds .pp-chat{display:flex;flex-direction:column;gap:7px;justify-content:center;height:100%}
.ds .pp-chat span{height:14px;border-radius:8px}
.ds .pp-chat .l{background:#EDF0F5;width:66%}.ds .pp-chat .r{background:var(--accent);width:52%;align-self:flex-end}
.ds .pv-panel.pp-map{padding:0;background-color:#F1F5FD;background-image:linear-gradient(#E2EAF6 1px,transparent 1px),linear-gradient(90deg,#E2EAF6 1px,transparent 1px);background-size:20px 20px}
.ds .pp-map i{position:absolute;width:13px;height:13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent)}
.ds .tprev.lg .pp-map i{width:20px;height:20px}
.ds .pp-map i.d{background:var(--ink)}
.ds .pp-map i::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%}
.ds .pp-map .area{position:absolute;left:50%;top:50%;width:78px;height:78px;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #7E9BF5;background:rgba(48,96,240,.08)}
.ds .tprev.lg .pp-map .area{width:130px;height:130px}
.ds .ring{width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--accent) var(--p,90%),#E4EAF4 0);display:flex;align-items:center;justify-content:center}
.ds .tprev.lg .ring{width:104px;height:104px}
.ds .ring b{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;color:var(--ink)}
.ds .tprev.lg .ring b{width:78px;height:78px;font-size:1.5rem}
.ds .pp-rings{display:flex;align-items:center;justify-content:center;gap:10px;height:100%}
.ds .pp-rings .ring{width:44px;height:44px}.ds .pp-rings .ring b{width:32px;height:32px;font-size:.68rem}
.ds .tprev.lg .pp-rings .ring{width:74px;height:74px}.ds .tprev.lg .pp-rings .ring b{width:54px;height:54px;font-size:1rem}
.ds .pp-list{display:flex;flex-direction:column;gap:7px;justify-content:center;height:100%}
.ds .pp-list .li{display:flex;align-items:center;gap:7px;font-size:.62rem;font-weight:700;color:var(--ink)}
.ds .tprev.lg .pp-list .li{font-size:.86rem;gap:10px}
.ds .pp-list .li .dot{width:15px;height:15px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:800;flex:none}
.ds .tprev.lg .pp-list .li .dot{width:20px;height:20px;font-size:.66rem}
.ds .pp-list .li.off{color:#A6AEBF}.ds .pp-list .li.off .dot{background:#EEF1F7;color:#B6BDCC}
.ds .pp-cal{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:5px;height:100%}
.ds .pp-cal i{border-radius:3px;background:#EDF0F5}.ds .pp-cal i.on{background:var(--accent)}
.ds .pp-review{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%}
.ds .pp-review .stars{color:#F5A623;font-size:1.05rem;letter-spacing:1px;line-height:1}
.ds .tprev.lg .pp-review .stars{font-size:1.7rem}
.ds .pp-review .ln{height:6px;border-radius:4px;background:#E4EAF4}.ds .pp-review .ln.s{width:72%}
.ds .pp-review .rep{height:12px;width:56%;border-radius:7px;background:var(--accent);align-self:flex-start}
.ds .pv-panel.pp-browser{padding:0;display:flex;flex-direction:column}
.ds .pp-browser .bb{height:16px;background:#EDF0F5;display:flex;align-items:center;gap:3px;padding:0 7px;flex:none}
.ds .pp-browser .bb i{width:5px;height:5px;border-radius:50%;background:#C2CCDA}
.ds .pp-browser .bc{padding:11px;display:flex;flex-direction:column;gap:6px}
.ds .pp-browser .bc .hd{height:9px;width:55%;border-radius:4px;background:var(--ink)}
.ds .pp-browser .bc .l{height:6px;border-radius:4px;background:#DCE4F2}.ds .pp-browser .bc .l.s{width:78%}
.ds .pp-browser .bc .bt{height:13px;width:40%;border-radius:5px;background:var(--accent);margin-top:2px}
.ds .pp-flow{display:flex;align-items:center;justify-content:center;height:100%}
.ds .pp-flow .nd{width:28px;height:28px;border-radius:8px;background:#E7EEFA;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.8rem}
.ds .tprev.lg .pp-flow .nd{width:44px;height:44px;font-size:1.15rem;border-radius:12px}
.ds .pp-flow .nd.on{background:var(--accent);color:#fff}
.ds .pp-flow .cn{width:15px;height:2px;background:#C2CCDA}
.ds .tprev.lg .pp-flow .cn{width:26px}
.ds .shield,.ds .qr{width:44px;height:44px}
.ds .tprev.lg .shield,.ds .tprev.lg .qr{width:76px;height:76px}

/* dark band */
.ds .dark{background:var(--ink);color:#fff}
.ds .dark h2,.ds .dark h3{color:#fff}
.ds .dark p{color:rgba(255,255,255,.8)}
.ds .dark .kicker{color:#6E8FF6}
.ds .engines{display:flex;flex-wrap:wrap;gap:10px}
.ds .chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:13px 16px;font-weight:600;font-size:.93rem;display:flex;align-items:center;gap:8px;color:#fff}
.ds .chip .d{width:7px;height:7px;border-radius:50%;background:#6E8FF6}

/* pricing */
.ds .pricing-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.ds .price-card{background:var(--ink);color:#fff;border-radius:20px;padding:36px;text-align:center;box-shadow:var(--shadow)}
.ds .price-card .tag{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#6E8FF6;font-weight:700}
.ds .price-card .amt{font-weight:800;font-size:3.5rem;line-height:1;margin:.12em 0;color:#fff}
.ds .price-card .per{color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:22px}
.ds .price-card .btn{width:100%;justify-content:center}
.ds .price-card .fine{margin-top:13px;font-size:.82rem;color:rgba(255,255,255,.6)}

/* free tools */
.ds .free-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ds .free{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:transform .14s,border-color .14s}
.ds .free:hover{transform:translateY(-3px);border-color:var(--accent)}
.ds .free span{font-weight:600;font-size:.93rem;color:var(--ink)}
.ds .free .fa{color:var(--accent);font-weight:800;flex:none}

/* pills */
.ds .pills{display:flex;flex-wrap:wrap;gap:9px}
.ds .pill{display:inline-block;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:600;color:var(--ink);transition:border-color .14s,color .14s}
.ds .pill:hover{border-color:var(--accent);color:var(--accent)}

/* faq */
.ds .faq-list{max-width:840px;margin:0 auto}
.ds details{border:1px solid var(--line);border-radius:12px;padding:2px 20px;margin-bottom:11px;background:#fff}
.ds summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;font-weight:700;color:var(--ink);font-size:1.02rem}
.ds summary::-webkit-details-marker{display:none}
.ds summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:1.35rem;color:var(--accent)}
.ds details[open] summary::after{content:"\2013"}
.ds details p{padding:0 0 17px;font-size:.97rem;line-height:1.7}

/* toc */
.ds .toc{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:#fff}
.ds .toc .lbl{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--body);margin-bottom:11px;display:block}
.ds .toc .links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.93rem}
.ds .toc a{color:var(--accent);font-weight:600}
.ds [id]{scroll-margin-top:90px}

/* responsive */
@media(max-width:980px){
  .ds .toolgrid,.ds .grid3{grid-template-columns:repeat(2,1fr)}
  .ds .grid4,.ds .free-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .ds section{padding:56px 0}
  .ds .hero-grid,.ds .pricing-inner{grid-template-columns:1fr;gap:30px}
  .ds .switch-grid{grid-template-columns:1fr;gap:14px}
  .ds .sw-arrow{transform:rotate(90deg)}
  .ds .grid2{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ds{font-size:16px}
  .ds .toolgrid,.ds .grid3,.ds .grid4,.ds .free-grid{grid-template-columns:1fr}
  .ds .mini{gap:18px}
}
@media(prefers-reduced-motion:reduce){.ds *{transition:none!important}}

/* ── Others vs Us comparison ── */
.ds .cmp{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ds .crow{display:grid;grid-template-columns:1.7fr 1fr 1fr;align-items:stretch}
.ds .crow>div{padding:15px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.ds .crow:last-child>div{border-bottom:none}
.ds .chead>div{border-bottom:none;padding-top:16px;padding-bottom:16px}
.ds .chead .feat{background:var(--ink);color:#fff;font-weight:700}
.ds .chead .them{background:var(--navy);color:#fff;justify-content:center;font-weight:700}
.ds .chead .us{background:var(--accent);color:#fff;justify-content:center;font-weight:700}
.ds .crow .feat{font-weight:600;color:var(--ink)}
.ds .crow .cell{justify-content:center;text-align:center;font-weight:700;font-size:.95rem}
.ds .crow .yes{color:var(--accent);font-size:1.1rem}
.ds .crow .no{color:var(--warn);font-size:1.1rem}
.ds .crow .usc{background:#F4F7FE;color:var(--ink)}
@media(max-width:700px){
  .ds .crow{grid-template-columns:1.4fr .8fr .8fr}
  .ds .crow>div{padding:12px 13px;font-size:.88rem}
  .ds .crow .cell{font-size:.85rem}
}

/* ══════════════════════════════════════════════════════════════
   THEME CHROME — Local SEO Tool
   Fonts unified with the design system, plus a mega-panel dropdown
   and a dark footer matching the page body.
   ══════════════════════════════════════════════════════════════ */

:root{
  --global-body-font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --global-heading-font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --global-primary-nav-font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ds-ink:#0C183C;--ds-accent:#3060F0;--ds-line:#DCDFE4;--ds-body:#585E72;--ds-mist:#F5F8FD;
}
body,input,select,optgroup,textarea,button{font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1,h2,h3,h4,h5,h6,.site-title{font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:-.02em}

/* ── header ── */
#masthead{border-bottom:1px solid var(--ds-line);background:#fff}
.site-branding .site-title{font-weight:800;font-size:1.28rem;color:var(--ds-ink);letter-spacing:-.03em}
.site-branding .site-title:hover{color:var(--ds-accent)}

/* ── primary nav: pill hover, thick active underline ── */
.header-navigation .menu>li>a,
.main-navigation .primary-menu-container>ul>li>a{
  font-weight:600;font-size:.95rem;color:var(--ds-ink);
  padding:.5em .9em;border-radius:8px;position:relative;transition:background .16s,color .16s;
}
.header-navigation .menu>li>a:hover,
.main-navigation .primary-menu-container>ul>li>a:hover{background:#EAF0FE;color:var(--ds-accent)}
.header-navigation .menu>li.current-menu-item>a::after,
.header-navigation .menu>li.current-menu-ancestor>a::after{
  content:"";position:absolute;left:.9em;right:.9em;bottom:-2px;height:3px;border-radius:3px;background:var(--ds-accent);
}

/* ── dropdown: floating mega panel with accent rail ── */
.header-navigation ul ul.sub-menu{
  background:#fff;border:1px solid var(--ds-line);border-radius:14px;
  box-shadow:0 24px 48px -20px rgba(12,24,60,.28),0 2px 6px rgba(12,24,60,.05);
  padding:12px;min-width:280px;overflow:hidden;
}
.header-navigation ul ul.sub-menu::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--ds-accent),#8FB0FF);
}
.header-navigation ul ul.sub-menu li a{
  font-size:.9rem;font-weight:500;color:var(--ds-body);padding:.55em .8em;border-radius:8px;transition:background .14s,color .14s;
}
.header-navigation ul ul.sub-menu li a:hover{background:var(--ds-mist);color:var(--ds-accent)}
/* category headings inside the panel */
.header-navigation ul ul.sub-menu>li.menu-item-has-children>a{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-accent);
  pointer-events:none;padding-bottom:.2em;
}
.header-navigation ul ul.sub-menu ul.sub-menu{
  position:static!important;box-shadow:none;border:0;padding:0 0 8px;min-width:0;background:transparent;border-radius:0;
}
.header-navigation ul ul.sub-menu ul.sub-menu::before{display:none}
.header-navigation ul ul.sub-menu ul.sub-menu li a{padding-left:.8em}
@media(min-width:1025px){
  .header-navigation li.menu-item-has-children>ul.sub-menu{columns:2;column-gap:14px}
  .header-navigation li.menu-item-has-children>ul.sub-menu>li{break-inside:avoid}
}

/* ── header CTA button ── */
.header-button{background:var(--ds-ink)!important;border-radius:10px!important;font-weight:700!important;padding:.72em 1.4em!important;border:0!important}
.header-button:hover{background:#16224e!important;transform:translateY(-1px)}

/* ── footer: dark, matching the page body bands ── */
#colophon,.site-footer{background:var(--ds-ink);color:rgba(255,255,255,.72);border-top:0}
.site-footer h4,.site-footer h3,.site-footer strong{color:#fff!important}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:#fff}
.site-footer .footer-widget-area{padding-top:44px;padding-bottom:12px}
.site-footer p{color:rgba(255,255,255,.62)}
.site-footer [style*="color:#252525"]{color:#fff!important}
.site-footer [style*="color:#5c6b68"],.site-footer [style*="color:#14201f"]{color:rgba(255,255,255,.72)!important}
.site-footer [style*="border-top"]{border-color:rgba(255,255,255,.16)!important}
.site-bottom-footer-wrap{background:#08122E;border-top:1px solid rgba(255,255,255,.1)}

@media(max-width:1024px){
  .header-navigation ul ul.sub-menu{border-radius:10px;box-shadow:none;border-color:var(--ds-line)}
}

/* ── Custom header & mega menu — Local SEO Tool ───────────────── */
.dsx{position:sticky;top:0;z-index:9999;background:#fff;border-bottom:1px solid var(--ds-line,#DCDFE4);
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.dsx *{box-sizing:border-box}
.dsx-bar{max-width:1180px;margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;gap:22px}
.dsx-brand{font-weight:800;font-size:1.16rem;color:#0C183C;text-decoration:none;letter-spacing:-.03em;white-space:nowrap}
.dsx-brand:hover{color:#3060F0}
.dsx-nav{margin-left:auto}
.dsx-l1{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.dsx-item{position:relative}
.dsx-item>a{display:flex;align-items:center;gap:5px;padding:.55em .8em;border-radius:8px;
  font-size:.93rem;font-weight:600;color:#0C183C;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.dsx-item>a:hover{background:#EAF0FE;color:#3060F0}
.dsx-item.is-current>a{color:#3060F0}
.dsx-caret{width:9px;height:6px;flex:none;transition:transform .16s}
.dsx-item.has-mega:hover>a .dsx-caret{transform:rotate(180deg)}
.dsx-cta{background:#0C183C;color:#fff;font-weight:700;font-size:.9rem;padding:.7em 1.3em;border-radius:10px;
  text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
.dsx-cta:hover{background:#16224e;transform:translateY(-1px);color:#fff}
.dsx-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.dsx-burger span{display:block;width:22px;height:2px;background:#0C183C;border-radius:2px;margin:4px 0}

/* mega panel — full width, columns, never truncates */
.dsx-mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(940px,calc(100vw - 40px));background:#fff;border:1px solid var(--ds-line,#DCDFE4);border-radius:16px;
  box-shadow:0 28px 60px -24px rgba(12,24,60,.3);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s,transform .16s,visibility .16s}
.dsx-item.has-mega:hover>.dsx-mega,.dsx-item.has-mega:focus-within>.dsx-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dsx-mega::after{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dsx-mega-in{padding:24px 26px}
.dsx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px}
.dsx-col-h{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#3060F0;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #EAF0FE}
.dsx-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dsx-col a{display:block;padding:.36em .5em;margin-left:-.5em;border-radius:7px;font-size:.875rem;
  font-weight:500;color:#585E72;text-decoration:none;line-height:1.35;transition:background .13s,color .13s}
.dsx-col a:hover{background:#F5F8FD;color:#3060F0}
.dsx-mega-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--ds-line,#DCDFE4);display:flex;flex-wrap:wrap;gap:20px}
.dsx-mega-foot a{font-size:.875rem;font-weight:700;color:#3060F0;text-decoration:none}

@media(max-width:1024px){
  .dsx-bar{height:62px;gap:12px}
  .dsx-burger{display:block;order:3}
  .dsx-cta{order:2;margin-left:auto;font-size:.82rem;padding:.6em 1em}
  .dsx-nav{order:4;flex:0 0 100%;margin:0;display:none}
  .dsx.is-open .dsx-nav{display:block;border-top:1px solid var(--ds-line,#DCDFE4);
    max-height:calc(100vh - 62px);overflow-y:auto;overscroll-behavior:contain;padding:10px 0 18px}
  /* Burger becomes a cross, so open and closed are not identical. */
  .dsx-burger span{transition:transform .18s ease,opacity .18s ease}
  .dsx.is-open .dsx-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .dsx.is-open .dsx-burger span:nth-child(2){opacity:0}
  .dsx.is-open .dsx-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .dsx.is-open{position:static}
  .dsx-l1{flex-direction:column;align-items:stretch;gap:0}
  .dsx-item>a{padding:.8em .2em;border-radius:0;justify-content:space-between;border-bottom:1px solid #F0F2F6}
  .dsx-mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    display:none;border:0;border-radius:0;box-shadow:none;background:#F5F8FD}
  .dsx-item.has-mega.open>.dsx-mega{display:block}
  .dsx-item.has-mega:hover>.dsx-mega{display:none}
  .dsx-item.has-mega.open:hover>.dsx-mega{display:block}
  .dsx-mega-in{padding:14px 16px}
  .dsx-cols{grid-template-columns:1fr;gap:16px}
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Local SEO Tool
   A spec-sheet layout: asymmetric hero with a data plate, a dense
   index table instead of card grids, a ruled criteria list and a
   two-column ledger. Prefixed hx- so nothing else is affected.
   ══════════════════════════════════════════════════════════════ */

/* ── hero: type left, spec plate right ── */
.ds .hx-hero{padding:64px 0 56px;border-bottom:1px solid var(--line);background:
  linear-gradient(180deg,var(--mist) 0%,var(--paper) 78%)}
.ds .hx-hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:52px;align-items:start}
.ds .hx-hero h1{font-size:clamp(2.2rem,4.6vw,3.35rem);letter-spacing:-.032em}
.ds .hx-hero h1 em{font-style:normal;color:var(--accent)}
.ds .hx-sub{font-size:1.13rem;margin-top:20px;max-width:52ch}
.ds .hx-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ds .hx-hero-note{margin-top:16px;font-size:.88rem;color:var(--body)}

/* the plate: a metadata block, not a screenshot */
.ds .hx-plate{border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;overflow:hidden;
  box-shadow:var(--shadow)}
.ds .hx-plate-h{background:var(--ink);color:#fff;padding:13px 18px;font-size:.72rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase}
.ds .hx-plate dl{margin:0}
.ds .hx-plate-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 18px;border-bottom:1px solid var(--line)}
.ds .hx-plate-row:last-of-type{border-bottom:0}
.ds .hx-plate-row dt{font-size:.85rem;color:var(--body);font-weight:500}
.ds .hx-plate-row dd{font-size:.95rem;color:var(--ink);font-weight:700;text-align:right}
.ds .hx-plate-row dd .big{font-size:1.45rem;letter-spacing:-.02em}
.ds .hx-plate-foot{padding:14px 18px;background:var(--mist);border-top:1px solid var(--line);
  font-size:.82rem;color:var(--body)}

/* ── definition band: two ruled columns ── */
.ds .hx-def{border-bottom:1px solid var(--line)}
.ds .hx-def-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ds .hx-def-col{padding:38px 40px 38px 0}
.ds .hx-def-col+.hx-def-col{padding:38px 0 38px 40px;border-left:1px solid var(--line)}
.ds .hx-def-col h2{font-size:1.28rem;margin-bottom:12px}
.ds .hx-def-col p{font-size:1.02rem;line-height:1.75}
.ds .hx-def-col p+p{margin-top:12px}

/* ── jump strip ── */
.ds .hx-jump{position:sticky;top:70px;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);padding:11px 0}
.ds .hx-jump-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.ds .hx-jump-in::-webkit-scrollbar{display:none}
.ds .hx-jump a{flex:none;font-size:.82rem;font-weight:600;color:var(--body);border:1px solid var(--line);
  border-radius:999px;padding:.4em .95em;white-space:nowrap;transition:all .14s}
.ds .hx-jump a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ── the index table ── */
.ds .hx-tbl-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:#fff}
.ds table.hx-tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.ds .hx-tbl th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);background:var(--mist);padding:11px 18px;border-bottom:1px solid var(--line)}
.ds .hx-tbl td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.ds .hx-tbl tr:last-child td{border-bottom:0}
.ds .hx-tbl tbody tr:hover td{background:var(--mist)}
.ds .hx-tbl td.n{width:34%}
.ds .hx-tbl td.n a{font-weight:700;color:var(--ink)}
.ds .hx-tbl td.n a:hover{color:var(--accent)}
.ds .hx-grp td{background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;padding:11px 18px}
.ds .hx-grp td span{float:right;font-weight:600;letter-spacing:.06em;opacity:.72}
.ds .hx-tbl tbody tr.hx-grp:hover td{background:var(--ink)}

/* ── criteria: ruled numbered list ── */
.ds .hx-crit{list-style:none;border-left:2px solid var(--line);padding-left:0}
.ds .hx-crit li{display:grid;grid-template-columns:74px 1fr;gap:20px;padding:22px 0 22px 26px;
  border-bottom:1px solid var(--line)}
.ds .hx-crit li:last-child{border-bottom:0}
.ds .hx-crit .no{font-size:2.1rem;font-weight:800;color:var(--line);line-height:1;letter-spacing:-.04em}
.ds .hx-crit h3{margin-bottom:6px}
.ds .hx-crit p{font-size:.98rem}

/* ── ledger comparison ── */
.ds .hx-ledger{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff}
.ds .hx-led-h{padding:15px 22px;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.ds .hx-led-h.a{background:var(--mist);color:var(--body)}
.ds .hx-led-h.b{background:var(--accent);color:#fff}
.ds .hx-led-c{border-right:1px solid var(--line)}
.ds .hx-led-c:last-child{border-right:0}
.ds .hx-led-c p{padding:15px 22px;border-bottom:1px solid var(--line);font-size:.95rem;min-height:76px;
  display:flex;align-items:center}
.ds .hx-led-c p:last-child{border-bottom:0}
.ds .hx-led-c.b p{color:var(--ink);font-weight:600}

/* ── flow: horizontal steps ── */
.ds .hx-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--line)}
.ds .hx-flow div{padding:26px 22px 0 0;position:relative}
.ds .hx-flow div::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--accent)}
.ds .hx-flow span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.ds .hx-flow h3{font-size:1.02rem;margin-bottom:6px}
.ds .hx-flow p{font-size:.9rem}

@media(max-width:980px){
  .ds .hx-hero-grid{grid-template-columns:1fr;gap:34px}
  .ds .hx-def-grid{grid-template-columns:1fr}
  .ds .hx-def-col{padding:30px 0}
  .ds .hx-def-col+.hx-def-col{padding:30px 0;border-left:0;border-top:1px solid var(--line)}
  .ds .hx-flow{grid-template-columns:1fr;border-top:0}
  .ds .hx-flow div{padding:20px 0 20px 24px;border-left:2px solid var(--line)}
  .ds .hx-flow div::before{top:22px;left:-6px}
  .ds .hx-ledger{grid-template-columns:1fr}
  .ds .hx-led-c{border-right:0;border-bottom:1px solid var(--line)}
  .ds .hx-tbl td.n{width:44%}
  .ds .hx-jump{top:62px}
}
@media(max-width:640px){
  .ds .hx-crit li{grid-template-columns:1fr;gap:4px;padding-left:20px}
  .ds .hx-crit .no{font-size:1.5rem}
  .ds table.hx-tbl{font-size:.88rem}
  .ds .hx-tbl td,.ds .hx-tbl th{padding:11px 13px}
}

/* ── free-tool page wrapper ─────────────────────────────────── */
.ftx{padding:44px 0 8px}
.ftx-in{max-width:820px;margin:0 auto;padding:0 24px}
.ftx-in h2{font-size:1.35rem;margin:0 0 14px}
.ftx-in p{line-height:1.8;margin:0 0 14px}
.ftx-in ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid rgba(0,0,0,.09)}
.ftx-in li{padding:11px 0 11px 22px;border-bottom:1px solid rgba(0,0,0,.09);position:relative;line-height:1.65}
.ftx-in li::before{content:"→";position:absolute;left:0;top:11px;opacity:.55}

/* ══════════════════════════════════════════════════════════════
   MOBILE & USABILITY REFINEMENTS
   Applies to both sites. Nothing here changes the visual design;
   it fixes clipping, tap targets, anchor offsets and focus states.
   ══════════════════════════════════════════════════════════════ */

/* Wide content scrolls inside its own box instead of being clipped or
   pushing the page sideways. The index table is 42 rows of two columns
   and needs this on narrow screens. */
.ds .hx-tbl-wrap,
.ds .tbl-wrap,
.ds .ix-figs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ds table{ max-width:100%; }
.ds img,.ds svg,.ds video{ max-width:100%; height:auto; }

/* Nothing should be able to push the document wider than the screen. */
.ds *{ min-width:0; }
.ds pre,.ds code{ overflow-x:auto; }

/* Anchor links land under the sticky header without this. */
.ds [id]{ scroll-margin-top:88px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ds *,.dsx *{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; }
}

/* Visible keyboard focus. The default outline is removed by several theme rules. */
.ds a:focus-visible,.ds button:focus-visible,.ds summary:focus-visible,
.dsx a:focus-visible,.dsx button:focus-visible{
  outline:2px solid var(--accent,#3060F0); outline-offset:3px; border-radius:3px;
}

/* FAQ rows are the most-tapped element on the tool pages. */
.ds .faq-list summary{ cursor:pointer; padding-top:.9em; padding-bottom:.9em; }
.ds .faq-list summary::-webkit-details-marker{ display:none; }

@media (max-width:1024px){
  /* Mega-menu entries become a plain list on mobile; give them a real touch target. */
  .dsx-col a{ padding:.72em .5em; min-height:44px; display:flex; align-items:center; }
  .dsx-mega-foot a{ padding:.6em 0; min-height:44px; display:flex; align-items:center; }
  .dsx-item>a{ min-height:48px; }
  .dsx-cta{ min-height:44px; display:inline-flex; align-items:center; }
  /* Uppercase micro-labels are hard to read at 10px on a phone. */
  .ds .kicker,.ds .ix-count,.ds .hx-col-h,.ds .dsx-col-h{ font-size:.72rem; }
  .ds .hx-jump a{ padding:.5em 1em; min-height:40px; display:inline-flex; align-items:center; }
}

@media (max-width:640px){
  /* Buttons stack rather than crowding a narrow row. */
  .ds .cta-row{ flex-direction:column; align-items:stretch; }
  .ds .cta-row .btn{ justify-content:center; width:100%; }
  .ds .hx-hero-cta{ flex-direction:column; }
  .ds .hx-hero-cta .btn{ justify-content:center; }
  .ds .btn{ min-height:48px; }
  /* Long headings should break rather than overflow. */
  .ds h1,.ds h2,.ds h3{ overflow-wrap:break-word; hyphens:auto; }
  .ds .ix-figs{ grid-template-columns:1fr; }
  .ds .ix-figs div{ border-right:0; }
}

/* ── contrast corrections for the free-tool suite ───────────────
   The plugin's teal (#2f8a87) and grey (#8a9895) sit at 3.0–4.1:1
   against their backgrounds, below the 4.5:1 needed for body text. */
.kick{ color:#14524f!important; }
.tst-lim{ color:#5a6663!important; }
.tst-copy,.tst-seg button.on,.tsl-hero .btn{ background:#1d6360!important; color:#fff!important; }
.tst-copy:hover{ background:#164e4b!important; }
.tst a,.tsl-hero a,.tsl-more a{ color:#14524f; }
/* Footer and body links carrying the old teal as an inline style. */
.site-footer a[style*="2f8a87"],a[style*="#2f8a87"]{ color:#14524f!important; }
.site-footer a[style*="5c637b"],a[style*="#5c637b"]{ color:#4a5163!important; }

/* Footer sits on the dark ink colour, so its links need to be light. */
.site-footer a,.site-footer p a{ color:rgba(255,255,255,.86)!important; }
.site-footer a:hover{ color:#fff!important; }
.site-footer p,.site-footer li{ color:rgba(255,255,255,.78); }
/* Segmented control in the free tools: white on #2f8a87 is only 4.1:1. */
button.on[data-m],.tst-seg button.on,.tst-seg .on{ background:#1d6360!important; color:#fff!important; }

/* ── audience cards (shared component, used on the multi-location page) ── */
.ds .rc-who{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ds .rc-who-c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 22px}
.ds .rc-who-c h3{font-size:1.02rem;margin-bottom:12px}
.ds .rc-who-c ul{list-style:none;margin:0;padding:0}
.ds .rc-who-c li{font-size:.92rem;line-height:1.5;padding:7px 0 7px 16px;position:relative;border-bottom:1px solid var(--line)}
.ds .rc-who-c li:last-child{border-bottom:0}
.ds .rc-who-c li::before{content:"—";position:absolute;left:0;color:var(--accent)}
@media(max-width:980px){.ds .rc-who{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ds .rc-who{grid-template-columns:1fr}}


/* ══════════════════════════════════════════════════════════════
   CASE STUDY LAYOUT
   Sticky detail sidebar beside a narrative column, a metric grid
   and an indexed before/after chart. Inherits each site's tokens,
   so the same markup reads correctly on both. cs- prefix.
   ══════════════════════════════════════════════════════════════ */

.ds .cs-head{padding:52px 0 44px;background:var(--ink);color:#fff}
.ds .cs-head h1{color:#fff;max-width:20ch;font-size:clamp(1.9rem,4vw,2.7rem)}
.ds .cs-head .kicker{color:#fff;opacity:.72}
.ds .cs-head-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;font-size:.92rem;opacity:.82}
.ds .cs-head-meta span{display:flex;align-items:center;gap:7px}

.ds .cs-layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:44px;align-items:start}
.ds .cs-side{position:sticky;top:92px;display:grid;gap:18px}
.ds .cs-card{border:1px solid var(--line);background:#fff}
.ds .cs-card-h{padding:11px 16px;border-bottom:1px solid var(--line);background:var(--mist);
  font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--body)}
.ds .cs-meta-row{padding:11px 16px;border-bottom:1px solid var(--line)}
.ds .cs-meta-row:last-child{border-bottom:0}
.ds .cs-meta-row dt{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);margin-bottom:4px}
.ds .cs-meta-row dd{font-size:.95rem;color:var(--ink);font-weight:600;margin:0}
.ds .cs-tools{list-style:none;margin:0;padding:0}
.ds .cs-tools li{border-bottom:1px solid var(--line)}
.ds .cs-tools li:last-child{border-bottom:0}
.ds .cs-tools a{display:block;padding:10px 16px;font-size:.9rem;color:var(--ink);font-weight:500}
.ds .cs-tools a:hover{background:var(--mist);color:var(--accent)}
.ds .cs-cta{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:20px 18px}
.ds .cs-cta .cs-cta-h{color:#fff;font-size:1.02rem;font-weight:700;line-height:1.3;margin-bottom:7px}
.ds .cs-cta p{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.6;margin-bottom:14px}
.ds .cs-cta .btn{width:100%;justify-content:center}

.ds .cs-body > section{padding:0 0 34px}
.ds .cs-eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.ds .cs-body h2{font-size:clamp(1.4rem,2.5vw,1.85rem);margin-bottom:14px}
.ds .cs-body p{font-size:1.03rem;line-height:1.8;margin-bottom:13px}

/* numbered action cards */
.ds .cs-actions{display:grid;gap:12px;margin-top:18px}
.ds .cs-action{border:1px solid var(--line);padding:18px 20px;display:grid;grid-template-columns:40px 1fr;gap:16px}
.ds .cs-action .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:1.15rem;font-weight:700;color:var(--accent);line-height:1.2}
.ds .cs-action h3{font-size:1.02rem;margin-bottom:6px}
.ds .cs-action p{font-size:.96rem;line-height:1.65;margin:0}

/* headline figures */
.ds .cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:18px}
.ds .cs-metric{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 18px}
.ds .cs-metric .v{font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.ds .cs-metric .l{font-size:.86rem;margin-top:7px;line-height:1.45}

/* indexed before/after chart */
.ds .cs-chart{border:1px solid var(--line);padding:20px 20px 16px;margin-top:18px;background:#fff}
.ds .cs-chart-h{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.ds .cs-chart-s{font-size:.86rem;margin-bottom:18px}
.ds .cs-bars{display:grid;gap:14px}
.ds .cs-bar{display:grid;grid-template-columns:120px minmax(0,1fr) 66px;gap:12px;align-items:center}
.ds .cs-bar .lab{font-size:.88rem;color:var(--body)}
.ds .cs-bar .track{height:22px;background:var(--mist);position:relative}
.ds .cs-bar .fill{height:100%;background:var(--accent)}
.ds .cs-bar .fill.base{background:#9AA8A5}
.ds .cs-bar .val{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.86rem;font-weight:700;color:var(--ink);text-align:right}
.ds .cs-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;line-height:1.6}

/* takeaways */
.ds .cs-take{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.ds .cs-take li{padding:13px 0 13px 24px;border-bottom:1px solid var(--line);position:relative;font-size:.99rem;line-height:1.65}
.ds .cs-take li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.ds .cs-take strong{color:var(--ink)}

/* archive cards */
.ds .cs-index{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ds .cs-index-c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px;display:block;transition:background .15s}
.ds .cs-index-c:hover{background:var(--mist)}
.ds .cs-index-c .s{display:block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ds .cs-index-c h3{font-size:1.1rem;margin-bottom:9px;color:var(--ink)}
.ds .cs-index-c p{font-size:.95rem;line-height:1.65}
.ds .cs-index-c .go{display:inline-block;margin-top:12px;font-size:.9rem;font-weight:700;color:var(--accent)}

@media(max-width:1024px){
  .ds .cs-layout{grid-template-columns:1fr;gap:30px}
  .ds .cs-side{position:static;grid-template-columns:1fr 1fr;display:grid}
  .ds .cs-index{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ds .cs-side{grid-template-columns:1fr}
  .ds .cs-metrics{grid-template-columns:1fr}
  .ds .cs-index{grid-template-columns:1fr}
  .ds .cs-bar{grid-template-columns:92px minmax(0,1fr) 58px;gap:8px}
  .ds .cs-action{grid-template-columns:1fr;gap:6px}
}

/* Muted rows in the preview mock-ups sat at 2.2:1. Still clearly secondary, now legible. */
.ds .pp-list .li.off,.ds .pp-list .off{ color:#5D6579!important; }
.ds .pp-grid i{ color:#3F4657; }

/* ==== HZ-HOME-START : localseotool.co homepage sections ==== */
.ds .hz-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.ds .hz-trust span{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink)}
.ds .hz-trust i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;font-style:normal}

.ds .hz-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist)}
.ds .hz-stats div{padding:28px 20px;text-align:center;border-left:1px solid var(--line)}
.ds .hz-stats div:first-child{border-left:0}
.ds .hz-stats b{display:block;font-size:1.8rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.ds .hz-stats span{display:block;font-size:.9rem;margin-top:7px;line-height:1.45}

.ds .hz-who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ds .hz-who a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .16s,border-color .16s,box-shadow .16s}
.ds .hz-who a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.ds .hz-who .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:15px}
.ds .hz-who h3{font-size:1.12rem;margin-bottom:9px;color:var(--ink)}
.ds .hz-who p{font-size:.96rem;line-height:1.65}
.ds .hz-who em{display:inline-block;margin-top:13px;font-style:normal;font-weight:700;font-size:.92rem;color:var(--accent)}

.ds .hz-cap{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.ds .hz-cap span{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink);font-weight:500;line-height:1.5}
.ds .hz-cap i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;font-style:normal;margin-top:1px}

.ds .hz-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:54px 0;border-top:1px solid var(--line)}
.ds .hz-row.first{border-top:0;padding-top:0}
.ds .hz-row.rev .hz-art{order:-1}
.ds .hz-row .kicker{margin-bottom:10px}
.ds .hz-row h3{font-size:1.62rem;letter-spacing:-.025em;margin-bottom:12px;color:var(--ink);line-height:1.25}
.ds .hz-row p{font-size:1.02rem;line-height:1.72;margin-bottom:18px}
.ds .hz-row ul{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.ds .hz-row li{display:flex;gap:10px;font-size:.97rem;color:var(--ink);line-height:1.55}
.ds .hz-row li::before{content:"\2713";color:var(--accent);font-weight:800;font-size:.86rem;line-height:1.7;flex:none}
.ds .hz-row .go{font-weight:700;color:var(--accent);font-size:.97rem}
.ds .hz-row .go:hover{text-decoration:underline}
.ds .hz-art .tprev{height:290px;margin:0;padding:26px}

.ds .hz-free{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ds .hz-free a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:.96rem;color:var(--ink);transition:transform .14s,border-color .14s}
.ds .hz-free a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ds .hz-free a::after{content:"\2192";color:var(--accent);font-weight:700;flex:none}

.ds .hz-res{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.ds .hz-fig{font-size:4.4rem;font-weight:800;letter-spacing:-.045em;color:var(--accent);line-height:1.05;margin-top:4px}
.ds .hz-fig sup{font-size:.4em;font-weight:700;vertical-align:baseline;letter-spacing:0;top:0;margin-left:1px}
.ds .hz-figl{font-size:1.02rem;margin-top:12px;line-height:1.6}
.ds .hz-cs{display:grid;gap:10px}
.ds .hz-cs a{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 19px;font-weight:600;color:var(--ink);transition:border-color .14s,transform .14s}
.ds .hz-cs a:hover{border-color:var(--accent);transform:translateY(-2px)}
.ds .hz-cs a small{font-weight:500;font-size:.9rem;color:var(--body);display:block;margin-top:3px}
.ds .hz-cs a b{flex:none;color:var(--accent);font-weight:800}

@media(max-width:1000px){
  .ds .hz-row{grid-template-columns:1fr;gap:30px;padding:40px 0}
  .ds .hz-row.rev .hz-art{order:0}
  .ds .hz-art .tprev{height:220px}
  .ds .hz-res{grid-template-columns:1fr;gap:28px}
  .ds .hz-who,.ds .hz-free{grid-template-columns:repeat(2,1fr)}
  .ds .hz-stats{grid-template-columns:repeat(2,1fr)}
  .ds .hz-stats div:nth-child(3){border-left:0}
  .ds .hz-stats div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:720px){
  .ds .hz-cap{grid-template-columns:1fr;gap:0}
  .ds .hz-who,.ds .hz-free{grid-template-columns:1fr}
  .ds .hz-fig{font-size:3.4rem}
  .ds .hz-row h3{font-size:1.34rem}
}
/* ==== HZ-HOME-END ==== */

/* ==== NAP-START ==== */
.ds .nap-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:stretch}
.ds .nap-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.ds .nap-card h2{font-size:1.5rem;letter-spacing:-.02em}
.ds .nap-line{font-size:1rem;line-height:1.7;margin-bottom:16px}
.ds .nap-line strong{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-weight:700}
.ds .nap-line a{color:var(--ink);font-weight:600}
.ds .nap-line a:hover{color:var(--accent)}
.ds .nap-map{min-height:380px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.nap-foot{color:inherit}
.nap-foot a{color:inherit}
@media(max-width:900px){.ds .nap-grid{grid-template-columns:1fr}.ds .nap-map{min-height:300px}}
/* ==== NAP-END ==== */

/* ==== NAPMAP-START ==== */
.nap-foot-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:stretch}
.nap-foot-col{min-width:0}
.nap-map-foot{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);line-height:0;min-height:250px}
.nap-map-foot iframe{width:100%;height:100%;min-height:250px;border:0;display:block}
@media(max-width:900px){
  .nap-foot-grid{grid-template-columns:1fr;gap:22px}
  .nap-map-foot{min-height:200px}
  .nap-map-foot iframe{min-height:200px}
}
/* ==== NAPMAP-END ==== */

/* ==== LEGAL-START ==== */
.ds .lg-hero{background:var(--mist);border-bottom:1px solid var(--line);padding:44px 0 40px}
.ds .lg-hero h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.03em;margin-bottom:14px}
.ds .lg-meta{font-size:.88rem;color:var(--body);margin-top:16px}
.ds .lg-body h2{font-size:1.28rem;letter-spacing:-.02em;margin:34px 0 12px;color:var(--ink)}
.ds .lg-body h2:first-child{margin-top:0}
.ds .lg-body p{font-size:1.02rem;line-height:1.78;margin-bottom:14px}
.ds .lg-body strong{color:var(--ink)}
.ds .lg-who{margin-top:40px;padding:22px 24px;background:var(--mist);border:1px solid var(--line);border-radius:var(--r)}
.ds .lg-who h3{font-size:1.02rem;margin-bottom:8px;color:var(--ink)}
.ds .lg-who p{font-size:.96rem;line-height:1.7;margin:0}
.ds .lg-who a{color:var(--accent);font-weight:600}
/* ==== LEGAL-END ==== */

/* ==== ART-START : comparison articles, built for the ~760px blog column ==== */
.ds.art{font-size:1.02rem}
.ds.art h2{font-size:1.42rem;letter-spacing:-.02em;color:var(--ink);margin:38px 0 12px;line-height:1.3}
.ds.art h3{font-size:1.06rem;color:var(--ink);margin-bottom:6px}
.ds.art p{line-height:1.75;margin-bottom:14px}
.ds.art .art-lead{font-size:1.12rem;line-height:1.7;color:var(--ink);font-weight:500}
.ds.art .art-note{font-size:.88rem;color:var(--body);margin-bottom:22px}

.ds.art .art-answer{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:18px 20px;margin:22px 0 8px}
.ds.art .art-answer .art-lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.ds.art .art-answer p{margin:0;font-size:1rem}

.ds.art ol.art-num{list-style:none;counter-reset:n;padding:0;margin:18px 0 0}
.ds.art ol.art-num li{counter-increment:n;position:relative;padding:0 0 18px 44px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ds.art ol.art-num li:last-child{border-bottom:0}
.ds.art ol.art-num li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;font-weight:800;font-size:.92rem;color:var(--accent)}
.ds.art ol.art-num p{margin:0;font-size:.98rem}

.ds.art ul.art-ticks{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.ds.art ul.art-ticks li{display:flex;gap:10px;font-size:.98rem;line-height:1.6}
.ds.art ul.art-ticks li::before{content:"\2713";color:var(--ok);font-weight:800;flex:none}

.ds.art .art-tblwrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto;margin:16px 0 6px}
.ds.art table.art-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem}
.ds.art .art-tbl th{text-align:left;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--body);background:var(--mist);padding:10px 14px;border-bottom:1px solid var(--line)}
.ds.art .art-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.ds.art .art-tbl tr:last-child td{border-bottom:0}
.ds.art .art-tbl td.n{font-weight:700;color:var(--ink);white-space:nowrap}
.ds.art .art-tbl tr.mine td{background:var(--accent-soft)}
.ds.art .art-tbl tr.mine td.n a{color:var(--accent)}

.ds.art .art-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:14px;background:#fff}
.ds.art .art-card.mine{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ds.art .art-cardhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ds.art .art-card h3{font-size:1.12rem;margin:0}
.ds.art .art-rank{flex:none;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.ds.art .art-card.mine .art-rank{background:var(--accent)}
.ds.art .art-tag{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:6px}
.ds.art .art-best{font-size:.97rem;margin-bottom:12px}
.ds.art .art-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ds.art .art-spec dt{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--body);margin-bottom:3px}
.ds.art .art-spec dd{font-size:.88rem;line-height:1.45;color:var(--ink);margin:0}
.ds.art .art-pro,.ds.art .art-con{margin-bottom:10px}
.ds.art .art-h{display:block;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:6px}
.ds.art .art-pro .art-h{color:var(--ok)}
.ds.art .art-con .art-h{color:var(--warn)}
.ds.art .art-pro ul,.ds.art .art-con ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ds.art .art-pro li,.ds.art .art-con li{display:flex;gap:8px;font-size:.94rem;line-height:1.55}
.ds.art .art-pro li::before{content:"\2713";color:var(--ok);font-weight:800;flex:none}
.ds.art .art-con li::before{content:"\2717";color:var(--warn);font-weight:800;flex:none}
.ds.art .art-standalone{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--mist);margin-bottom:16px}

.ds.art .art-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.ds.art .art-links a{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:600;font-size:.94rem;color:var(--ink);background:#fff}
.ds.art .art-links a:hover{border-color:var(--accent);color:var(--accent)}

.ds.art .art-cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.ds.art .art-cta .btn{font-size:.94rem;padding:.7em 1.3em}
.ds.art .art-faq{margin-top:14px}
.ds.art .art-end{margin-top:38px;background:var(--ink);border-radius:16px;padding:26px 24px;text-align:center}
.ds.art .art-end h3{color:#fff;font-size:1.24rem;margin-bottom:8px}
.ds.art .art-end p{color:rgba(255,255,255,.82);font-size:.98rem}
.ds.art .art-end .art-cta{justify-content:center}

@media(max-width:620px){
  .ds.art .art-spec{grid-template-columns:1fr;gap:8px}
  .ds.art .art-links{grid-template-columns:1fr}
  .ds.art h2{font-size:1.26rem}
}
/* ==== ART-END ==== */

/* ==== ARTBRAND-START : bring gbp-post-layout onto the site palette ==== */
.gbppl-article,.gbppl-list{
  --gbppl-teal:#3060F0;--gbppl-teal-dk:#2149C9;
  --gbppl-amber:#3060F0;--gbppl-amber-dk:#2149C9;--gbppl-gold:#2149C9;
  --gbppl-paper:#EAF0FE;--gbppl-ink:#0C183C;--gbppl-body:#585E72;--gbppl-line:#DCDFE4;
  --gbppl-serif:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
/* the sidebar CTA reads as the site, not as a leftover from another brand */
.gbppl-cta{background:#0C183C!important;border:0!important}
.gbppl-cta *{color:#fff!important}
.gbppl-cta a,.gbppl-cta .gbppl-cta-btn{background:#3060F0!important;color:#fff!important;border:0!important}
.gbppl-cta a:hover,.gbppl-cta .gbppl-cta-btn:hover{background:#2149C9!important}
/* ==== ARTBRAND-END ==== */

/* ==== ARTSHEET-START : give the article column an edge and some rhythm ==== */
/* The column was pure white on a #F7FAFC page, so it read as one flat slab.
   This makes it a defined sheet and gives the long middle section rhythm. */
.gbppl-content-col{
  background:#fff;
  border:1px solid var(--line,#DCDFE4);
  border-radius:18px;
  padding:34px 36px 40px;
  box-shadow:0 1px 2px rgba(12,24,60,.04),0 20px 48px -30px rgba(12,24,60,.20);
}
@media(max-width:900px){.gbppl-content-col{padding:24px 20px 30px;border-radius:14px}}

/* Vendor cards sit tinted so fifteen of them create rhythm instead of a wall. */
.ds.art .art-card{background:#F7F9FE;border-color:#E4E9F5}
.ds.art .art-card.mine{background:#fff}

/* Two blocks get a tint so the eye has anchors down a long page. */
.ds.art .art-band{background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:16px 0}
.ds.art .art-band > :first-child{margin-top:0}
.ds.art .art-band > :last-child{margin-bottom:0}
.ds.art .art-band h2{margin-top:0}
/* ==== ARTSHEET-END ==== */

/* ==== ABE-START : author box spacing and palette ==== */
.abe-namerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.abe-name{font-weight:800;color:#0C183C;text-decoration:none}
.abe-name:hover{color:#3060F0}
.abe-credentials{font-size:.8rem;font-weight:700;color:#3060F0;background:#EAF0FE;padding:3px 9px;border-radius:999px;white-space:nowrap}
.abe-jobtitle{font-size:.88rem;color:#585E72;margin:4px 0 10px}
.abe-bio p{font-size:.96rem;line-height:1.7;color:#585E72;margin:0}
.abe-avatar-img{border-radius:14px;object-fit:cover}
/* ==== ABE-END ==== */

/* ==== LOGO-START ==== */
.ds .dsx-brand-img,.dsx-brand-img{display:flex;align-items:center;padding:0}
.dsx-brand-img img{height:30px;width:auto;max-width:220px;display:block}
@media(max-width:900px){.dsx-brand-img img{height:26px;max-width:180px}}
/* ==== LOGO-END ==== */

/* ==== LISTMORE-START ==== */
.ds.art .art-more{font-size:.9rem;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.ds.art .art-more a{font-weight:600;color:var(--accent)}
/* ==== LISTMORE-END ==== */

/* ==== FOOTLOGO-START ==== */
.nap-foot-logo{display:inline-block;margin-bottom:12px}
.nap-foot-logo img{height:26px;width:auto;max-width:230px;display:block}
/* ==== FOOTLOGO-END ==== */

/* LEGALNAV-START */
.ds .lg-nav{margin-top:40px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r)}
.ds .lg-nav h3{font-size:1.02rem;margin-bottom:12px;color:var(--ink)}
.ds .lg-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.ds .lg-nav li{margin:0}
.ds .lg-nav li a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;line-height:1.4;color:var(--ink);text-decoration:none}
.ds .lg-nav li a:hover{border-color:var(--accent);color:var(--accent)}
.ds .lg-nav-back{margin:14px 0 0;font-size:.92rem;line-height:1.7;color:var(--mut)}
/* LEGALNAV-END */

body.dsx-locked{overflow:hidden}

/* TLDEMO-START */
/* Steps beside a demo panel, matching the reference layout. The panel is sticky so it
   stays with the reader as they work down a six step list. */
.ds .tl-how{display:grid;grid-template-columns:1fr .82fr;gap:40px;align-items:start;margin-top:26px}
.ds .tl-how .steps{margin-top:0}
.ds .tl-demo{position:sticky;top:88px}
.ds .tl-demo-in{border:1px solid var(--line);border-radius:var(--r);background:var(--mist);padding:16px;overflow:hidden}
.ds .tl-demo-cap{display:block;margin-top:8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--body,var(--mut))}
.ds .tl-demo-wide{position:static;grid-column:1/-1;margin-bottom:8px}
.ds .tl-demo .pv-panel{width:100%}
@media(max-width:900px){
  .ds .tl-how{grid-template-columns:1fr;gap:24px}
  /* Panel first on a phone, so the reader sees what the steps produce before reading them. */
  .ds .tl-demo{position:static;order:-1}
}
/* TLDEMO-END */

/* REVFIG-START */
/* Figures inside review articles. Sized to the narrow article column, never wider. */
.ds .rev-fig,article .rev-fig{margin:22px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--mist)}
.ds .rev-fig img,article .rev-fig img{display:block;width:100%;height:auto}
.ds .rev-fig figcaption,article .rev-fig figcaption{padding:10px 14px;font-size:.86rem;line-height:1.6;color:var(--mut,var(--body));border-top:1px solid var(--line);background:#fff}
/* REVFIG-END */


/* NAVFIX-START */
@media(max-width:1024px){
  /* The panel is flex:0 0 100% and order:4, so it must be allowed to wrap onto its own
     row. Without this it is squeezed into the 62px bar and never appears, which reads
     as the burger not working. */
  .dsx-bar{flex-wrap:wrap}
  .dsx.is-open .dsx-bar{height:auto;min-height:62px}
}
/* A dropdown with no column groups sizes to its content instead of spanning the header. */
.dsx-item.has-mega > .dsx-mega.dsx-simple{left:0;transform:none;width:auto;min-width:230px}
.dsx-mega.dsx-simple .dsx-mega-in{padding:10px}
.dsx-mega.dsx-simple .dsx-mega-foot{display:flex;flex-direction:column;gap:2px;border-top:0;padding:0;margin:0;background:none}
.dsx-mega.dsx-simple .dsx-mega-foot a{display:block;padding:9px 12px;border-radius:8px;font-weight:600;white-space:nowrap}
.dsx-mega.dsx-simple .dsx-mega-foot a:hover{background:var(--ds-mist,#F5F8FD)}
@media(max-width:1024px){
  .dsx-item.has-mega > .dsx-mega.dsx-simple{min-width:0;width:auto}
  .dsx-mega.dsx-simple .dsx-mega-foot a{white-space:normal}
}
/* NAVFIX-END */

/* EDRATING-START */
.editorial-rating{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:16px 18px;margin:22px 0;background:var(--mist)}
.editorial-rating .art-rating-score{margin:0;font-size:1.08rem}
.editorial-rating .art-rating-stars{color:#E8A33D;letter-spacing:1px;margin-left:6px}
.editorial-rating .art-rating-why{margin:8px 0 0;font-size:.98rem;line-height:1.7}
.editorial-rating .art-rating-meth{margin:10px 0 0;font-size:.86rem;line-height:1.65;color:var(--mut,var(--body))}
/* EDRATING-END */