:root{
  --ink:#162a27;
  --ink-soft:#31443f;
  --muted:#6f7e79;
  --forest:#17332f;
  --forest-2:#244b44;
  --sage:#6f8e87;
  --sage-light:#dfe9e6;
  --ivory:#f7f3ee;
  --paper:#fffdf9;
  --gold:#c69c6d;
  --line:#dce7e3;
  --shadow:0 24px 70px rgba(23,51,47,.12);
  --shadow-soft:0 12px 35px rgba(23,51,47,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);
  line-height:1.7;
}
h1,h2,h3,h4,h5,h6{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink);
}
a{text-decoration:none}
.navbar{
  background:rgba(255,255,255,.76)!important;
  border-bottom:1px solid rgba(220,231,227,.8);
  backdrop-filter:blur(18px) saturate(150%);
  transition:.25s ease;
}
.navbar-brand{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.45rem;color:var(--forest)!important}
.brand-dot{color:var(--gold)}
.nav-link{font-weight:700;color:var(--ink-soft)!important;margin:0 .32rem;font-size:.95rem}
.nav-link:hover,.nav-link.active{color:var(--forest)!important}
.btn-brand{
  background:linear-gradient(135deg,var(--forest),var(--forest-2));
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-weight:800;border-radius:14px;padding:.78rem 1.3rem;
  box-shadow:0 12px 25px rgba(23,51,47,.20), inset 0 1px 0 rgba(255,255,255,.22);
  transition:.2s ease;
}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px rgba(23,51,47,.24)}
.btn-outline-brand{
  border:1px solid rgba(23,51,47,.24);color:var(--forest);font-weight:800;
  border-radius:14px;padding:.74rem 1.2rem;background:rgba(255,255,255,.66);backdrop-filter:blur(10px)
}
.btn-outline-brand:hover{background:var(--forest);color:white}
.hero{
  padding:8rem 0 5.5rem;
  background:
    radial-gradient(circle at 14% 20%,rgba(198,156,109,.15),transparent 26%),
    radial-gradient(circle at 87% 15%,rgba(111,142,135,.16),transparent 25%),
    linear-gradient(180deg,#f8f4ee 0%,#f7fbf9 58%,#fff 100%);
  overflow:hidden;
}
.hero h1{font-size:clamp(3rem,6vw,5.6rem);line-height:.98;max-width:940px;margin:auto}
.hero p{font-size:1.14rem;color:var(--muted);max-width:760px;margin:1.5rem auto}
.eyebrow{
  display:inline-flex;gap:.5rem;align-items:center;padding:.48rem .88rem;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(23,51,47,.10);
  color:var(--forest);font-weight:800;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(10px)
}
.hero-shell{
  margin-top:3.5rem;border-radius:34px;padding:1rem;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(223,233,230,.68));
  border:1px solid rgba(255,255,255,.82);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.hero-shell:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.58),transparent 38%,rgba(255,255,255,.18));
}
.hero-card{background:rgba(255,255,255,.84);border:1px solid rgba(220,231,227,.9);border-radius:27px;padding:1rem;backdrop-filter:blur(16px)}
.hero-image{width:100%;border-radius:24px;display:block}
.mini-kpi{background:rgba(247,243,238,.86);border:1px solid rgba(198,156,109,.18);border-radius:18px;padding:1rem}
.section{padding:5.7rem 0}
.section-soft{background:linear-gradient(180deg,#f5f7f5,#eef4f1)}
.section-title{font-size:clamp(2.35rem,4.8vw,4rem);line-height:1.05}
.section-sub{color:var(--muted);max-width:700px}
.feature-card,.content-card,.software-card,.price-card{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,250,249,.88));
  border:1px solid rgba(220,231,227,.88);border-radius:var(--radius);padding:1.55rem;height:100%;
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.95);
  transition:.28s ease;position:relative;overflow:hidden;
}
.feature-card:before,.content-card:before,.software-card:before{
  content:"";position:absolute;left:-35%;top:-55%;width:90%;height:90%;
  background:linear-gradient(135deg,rgba(255,255,255,.7),transparent);transform:rotate(12deg);pointer-events:none
}
.feature-card:hover,.content-card:hover,.software-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.icon-wrap{
  width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#eef4f1,#fff);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--forest);font-size:1.3rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.badge-soft{background:#edf3f1;color:var(--forest);border-radius:999px;padding:.42rem .72rem;font-weight:800}
.rating{color:#b98950;letter-spacing:.05em}
.logo-chip{width:56px;height:56px;border-radius:17px;background:linear-gradient(145deg,var(--forest),#355f57);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 20px rgba(23,51,47,.16)}
.table-modern{overflow:hidden;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft)}
.table-modern thead{background:#edf3f1}.table-modern th,.table-modern td{padding:1rem 1.1rem;vertical-align:middle}
.check{color:#0f8766}.xmark{color:#c75353}
.stat{font-size:2rem;font-weight:800}
.quote-card{
  background:linear-gradient(145deg,#17332f,#2b514a);color:white;border-radius:30px;padding:2.3rem;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.16)
}
.quote-card h3{color:#fff}
.cta{
  background:linear-gradient(145deg,#17332f,#244b44);color:white;border-radius:32px;padding:3.2rem;
  position:relative;overflow:hidden;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.15)
}
.cta h2,.cta h3{color:white}
.cta:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(198,156,109,.18);right:-90px;top:-120px}
.footer{background:#102723;color:#d6e2de;padding:4.8rem 0 1.5rem}
.footer a{color:#b7cbc6}.footer a:hover{color:white}
.page-hero{
  padding:7.2rem 0 4rem;
  background:radial-gradient(circle at 12% 15%,rgba(198,156,109,.14),transparent 24%),linear-gradient(180deg,#f7f3ee,#f8fbfa)
}
.page-hero h1{font-size:clamp(2.8rem,5.3vw,4.7rem);line-height:1}
.sidebar-box{border:1px solid var(--line);border-radius:20px;padding:1.3rem;background:rgba(255,255,255,.86);position:sticky;top:100px;box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}
.article-body h2{margin-top:2.3rem}.article-body h3{margin-top:1.7rem}
.article-body p,.article-body li{color:#42534e}
.pros{border-left:4px solid #2a8c6d;background:#f2faf7}.cons{border-left:4px solid #bc625e;background:#fff7f5}
.review-summary{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.9);padding:1.5rem;box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}
.search-box{border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;background:rgba(255,255,255,.86);box-shadow:var(--shadow-soft)}
.form-control,.form-select{border-radius:14px;border-color:#d5e1dd;padding:.88rem 1rem;background:#fffdfb}
.form-control:focus,.form-select:focus{border-color:var(--sage);box-shadow:0 0 0 .2rem rgba(111,142,135,.15)}
.blog-card{overflow:hidden;padding:0}
.blog-card img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid var(--line)}
.blog-card .card-body{padding:1.4rem}
.gloss-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,242,239,.78));
  border:1px solid rgba(255,255,255,.92);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(16px)
}
.image-frame{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)}
@media(max-width:991px){
  .hero{padding-top:6.8rem}.navbar-collapse{padding:1rem 0}.hero-shell{border-radius:24px}
}

/* Premium photographic upgrade */
.hero-premium{min-height:760px;display:flex;align-items:center;position:relative;background:linear-gradient(90deg,rgba(247,243,238,.98) 0%,rgba(247,243,238,.92) 43%,rgba(247,243,238,.22) 72%,rgba(247,243,238,.04) 100%),url("../img/image.webp") center right/cover no-repeat}
.hero-premium:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(23,51,47,.10));pointer-events:none}.hero-premium .container{position:relative;z-index:2}.hero-premium .hero-copy{max-width:690px;text-align:left}.hero-premium h1{margin:0;font-size:clamp(3.2rem,6vw,5.9rem);line-height:.96}.hero-premium p{margin:1.5rem 0;max-width:650px}.hero-trust{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.7rem}.hero-trust span{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-radius:999px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(12px);font-size:.86rem;font-weight:800;color:var(--forest);box-shadow:0 10px 24px rgba(23,51,47,.08)}
.floating-panel{margin-top:2rem;max-width:620px;padding:1rem;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 24px 70px rgba(23,51,47,.16),inset 0 1px 0 rgba(255,255,255,.95)}
.photo-card{position:relative;border-radius:30px;overflow:hidden;min-height:430px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)}.photo-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.photo-overlay{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;padding:1.2rem;border-radius:18px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(15px);box-shadow:0 16px 35px rgba(23,51,47,.16)}
.visual-strip{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem}.small-stack{display:grid;gap:1.25rem}.small-photo{height:205px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-soft)}.small-photo img{width:100%;height:100%;object-fit:cover}.editorial-card{border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);height:100%;transition:.25s ease}.editorial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.editorial-card img{width:100%;height:250px;object-fit:cover}.editorial-body{padding:1.5rem}.page-visual{height:340px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)}.page-visual img{width:100%;height:100%;object-fit:cover}
@media(max-width:991px){.hero-premium{min-height:auto;padding:8rem 0 5rem;background:linear-gradient(180deg,rgba(247,243,238,.96),rgba(247,243,238,.84)),url("../img/image.webp") center/cover no-repeat}.hero-premium .hero-copy{text-align:center;margin:auto}.hero-premium p{margin-left:auto;margin-right:auto}.hero-trust{justify-content:center}.floating-panel{margin-left:auto;margin-right:auto}.visual-strip{grid-template-columns:1fr}}

/* ==========================================================================
   PRO-CARD — enterprise-grade ranking card system
   ========================================================================== */
:root{
  --rank-gold-1:#f0cd8e; --rank-gold-2:#b9863f;
  --rank-silver-1:#e4e9e7; --rank-silver-2:#8f9c97;
  --rank-bronze-1:#dcae86; --rank-bronze-2:#9c6a41;
  --ok:#0f8766;
}

.pro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pro-grid--3col{grid-template-columns:repeat(3,1fr)}
@media(max-width:1199px){.pro-grid--3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.pro-grid,.pro-grid--3col{grid-template-columns:1fr;gap:1.2rem}}

.pro-card{
  position:relative;height:100%;display:flex;flex-direction:column;gap:1.05rem;
  padding:1.7rem;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);
  box-shadow:0 10px 28px rgba(23,51,47,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition:.3s cubic-bezier(.2,.8,.2,1);
  isolation:isolate; overflow:hidden;
}
.pro-card:before{
  content:"";position:absolute;left:-40%;top:-70%;width:95%;height:95%;
  background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%);
  transform:rotate(10deg);pointer-events:none;z-index:-1;
}
.pro-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(23,51,47,.14), inset 0 1px 0 rgba(255,255,255,.95);
  border-color:rgba(198,156,109,.4);
}

.pro-card--featured{
  border:1px solid rgba(198,156,109,.45);
  background:linear-gradient(165deg,#fffcf6,#fdf7ee 45%,#fff 100%);
  box-shadow:0 14px 34px rgba(198,156,109,.14), inset 0 1px 0 rgba(255,255,255,.95);
}
.pro-card--featured:hover{box-shadow:0 26px 55px rgba(198,156,109,.2), inset 0 1px 0 rgba(255,255,255,.95)}

.pro-card__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.rank-medal{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:"DM Serif Display",serif;font-size:1.05rem;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px rgba(23,51,47,.18);
}
.rank-medal--1{background:linear-gradient(145deg,var(--rank-gold-1),var(--rank-gold-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px rgba(185,134,63,.4)}
.rank-medal--2{background:linear-gradient(145deg,var(--rank-silver-1),var(--rank-silver-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px rgba(120,130,125,.32)}
.rank-medal--3{background:linear-gradient(145deg,var(--rank-bronze-1),var(--rank-bronze-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px rgba(156,106,65,.32)}
.rank-medal--n{background:linear-gradient(145deg,var(--forest),var(--forest-2))}

.pick-tag{
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8a5c22;background:rgba(198,156,109,.16);padding:.38rem .7rem;border-radius:999px;
  border:1px solid rgba(198,156,109,.35);white-space:nowrap;
}
.pick-tag i{margin-right:.3rem}

.pro-card__head{display:flex;align-items:center;gap:.95rem}
.pro-card__head .logo-chip{flex:none}
.pro-card__id{flex:1;min-width:0}
.pro-card__id h3{margin:0;font-size:1.55rem;line-height:1.1}
.pro-card__tagline{margin:.2rem 0 0;color:var(--muted);font-size:.85rem;font-weight:700}

.score-ring{
  --pct:90; flex:none; width:60px;height:60px;border-radius:50%;padding:4px;
  background:conic-gradient(var(--gold) calc(var(--pct)*1%), rgba(23,51,47,.09) 0);
  box-shadow:0 8px 18px rgba(198,156,109,.28);
}
.score-ring__inner{
  width:100%;height:100%;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(23,51,47,.07);
}
.score-ring__inner strong{font-family:"DM Serif Display",serif;font-size:1.05rem;color:var(--forest)}
.score-ring__inner small{font-size:.56rem;color:var(--muted);letter-spacing:.03em}

.pro-card__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  padding:.85rem .5rem;border-radius:16px;background:rgba(23,51,47,.035);
  border:1px solid rgba(23,51,47,.06);
}
.pro-card__stats > div{text-align:center;padding:0 .2rem}
.pro-card__stats i{color:var(--sage);font-size:1.05rem;display:block;margin-bottom:.35rem}
.pro-card__stats b{display:block;font-size:.84rem;color:var(--ink);line-height:1.2}
.pro-card__stats small{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}

.pro-card__features{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pro-card__features li{display:flex;gap:.55rem;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.pro-card__features i{color:var(--ok);margin-top:.22rem;flex:none}

.pro-card__cta{display:flex;gap:.6rem;margin-top:auto;padding-top:.2rem}
.pro-card__cta .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:.86rem;padding:.68rem 1rem}

.pro-card__foot{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.7rem;color:var(--muted);text-align:center;
  border-top:1px dashed var(--line);padding-top:.85rem;
}
.pro-card__foot i{color:var(--ok)}

@media(max-width:420px){
  .pro-card__stats{grid-template-columns:1fr 1fr 1fr;gap:.25rem}
  .pro-card__stats b{font-size:.74rem}
}

/* ==========================================================================
   TAG / PILL / SCORE PRIMITIVES — shared across all card families below
   ========================================================================== */
.tag-pill{
  display:inline-flex;align-items:center;gap:.3rem;background:var(--sage-light);color:var(--forest);
  padding:.34rem .7rem;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap;
  letter-spacing:.01em;
}
.tag-pill--alt{background:rgba(198,156,109,.15);color:#8a5c22}
.score-pill{
  display:inline-flex;align-items:center;gap:.3rem;font-weight:800;padding:.32rem .62rem;
  border-radius:10px;background:rgba(23,51,47,.07);color:var(--forest);font-size:.82rem;flex:none;
}
.score-pill:before{content:"★";font-size:.72em}
.score-pill--top{background:linear-gradient(135deg,var(--rank-gold-1),var(--rank-gold-2));color:#fff;box-shadow:0 6px 14px rgba(185,134,63,.3)}
.mini-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--forest),var(--forest-2));
  color:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:800;
  border:2px solid #fff;margin-left:-9px;box-shadow:0 4px 10px rgba(23,51,47,.16);flex:none;
}
.mini-avatar:first-child{margin-left:0}
.mini-avatar--more{background:var(--sage-light);color:var(--forest)}

/* ==========================================================================
   MODERN TABLE — best-payroll-software.html ranking table
   ========================================================================== */
.table-pro-wrap{
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(23,51,47,.07);background:#fff;
}
.table-pro-scroll{overflow-x:auto}
.table-pro{width:100%;border-collapse:separate;border-spacing:0;margin:0;min-width:640px}
.table-pro thead th{
  background:linear-gradient(135deg,var(--forest),var(--forest-2));
  color:#fff;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  padding:1rem 1.1rem;border:none;text-align:left;white-space:nowrap;
}
.table-pro thead th:first-child{padding-left:1.4rem;border-top-left-radius:22px}
.table-pro thead th:last-child{border-top-right-radius:22px}
.table-pro tbody td{
  padding:.95rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:middle;
  font-size:.9rem;color:var(--ink-soft);
}
.table-pro tbody td:first-child{padding-left:1.4rem}
.table-pro tbody tr:last-child td{border-bottom:none}
.table-pro tbody tr{transition:.2s ease}
.table-pro tbody tr:hover{background:rgba(111,142,135,.07)}
.table-pro__brand{display:flex;align-items:center;gap:.7rem}
.table-pro__brand strong{color:var(--ink);font-size:.95rem;font-weight:800}
.logo-chip--sm{width:36px;height:36px;border-radius:10px;font-size:.9rem}
.rank-medal--sm{width:28px;height:28px;border-radius:8px;font-size:.8rem}
.btn-pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .95rem;border-radius:999px;
  background:rgba(23,51,47,.06);color:var(--forest);font-weight:800;font-size:.8rem;
  border:1px solid transparent;transition:.2s ease;white-space:nowrap;
}
.btn-pill:hover{background:var(--forest);color:#fff;transform:translateX(2px)}
.btn-pill i{transition:.2s ease}
.btn-pill:hover i{transform:translateX(2px)}
@media(max-width:767px){.table-pro-wrap{border-radius:18px}}

/* ==========================================================================
   REVIEW CARD — reviews.html browse grid
   ========================================================================== */
.review-card{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);border-radius:22px;padding:1.55rem;height:100%;
  box-shadow:0 10px 26px rgba(23,51,47,.06);transition:.3s ease;display:flex;flex-direction:column;gap:.95rem;overflow:hidden;
}
.review-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(23,51,47,.13);border-color:rgba(198,156,109,.35)}
.review-card__head{display:flex;align-items:center;gap:.8rem}
.review-card__id{flex:1;min-width:0}
.review-card__id h4{margin:0;font-size:1.2rem}
.stars-row{color:#b98950;font-size:.82rem;letter-spacing:.03em}
.stars-row span{color:var(--muted);font-weight:800;margin-left:.25rem}
.review-card__desc{color:var(--muted);font-size:.86rem;margin:0;flex:1;line-height:1.55}
.review-card__chips{display:flex;gap:.45rem;flex-wrap:wrap}
.review-card__proscons{display:grid;gap:.4rem;padding:.75rem .85rem;background:rgba(23,51,47,.03);border-radius:14px;border:1px solid rgba(23,51,47,.06)}
.pc{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-soft)}
.pc i{flex:none}
.pc--pro i{color:var(--ok)}
.pc--con i{color:#bc625e}

/* ==========================================================================
   VS COMPARISON CARD — comparisons.html
   ========================================================================== */
.vs-card{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);border-radius:22px;padding:1.65rem;height:100%;
  box-shadow:0 10px 26px rgba(23,51,47,.06);transition:.3s ease;text-align:center;
  display:flex;flex-direction:column;gap:.85rem;overflow:hidden;
}
.vs-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(23,51,47,.13);border-color:rgba(198,156,109,.35)}
.vs-card__match{display:flex;align-items:center;justify-content:center;gap:1rem}
.vs-card__side{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.76rem;font-weight:800;color:var(--ink-soft)}
.vs-badge{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:800;
  background:linear-gradient(135deg,var(--gold),#a97b45);color:#fff;box-shadow:0 8px 16px rgba(198,156,109,.32);flex:none;
}
.vs-card h4{margin:0;font-size:1.2rem}
.vs-card p{color:var(--muted);font-size:.85rem;margin:0;line-height:1.55}
.vs-card__meta{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   ALTERNATIVE CARD — alternatives.html
   ========================================================================== */
.alt-card{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);border-radius:22px;padding:1.6rem;height:100%;
  box-shadow:0 10px 26px rgba(23,51,47,.06);transition:.3s ease;display:flex;flex-direction:column;gap:.85rem;overflow:hidden;
}
.alt-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(23,51,47,.13);border-color:rgba(198,156,109,.35)}
.alt-card__top{display:flex;justify-content:space-between;align-items:center}
.alt-count{font-size:.72rem;font-weight:800;color:var(--muted)}
.alt-card__brand{display:flex;align-items:center;gap:.8rem}
.alt-card__brand h4{margin:0;font-size:1.15rem}
.alt-card p{color:var(--muted);font-size:.86rem;margin:0;flex:1;line-height:1.55}
.alt-card__avatars{display:flex}

/* ==========================================================================
   GUIDE CARD — guides.html
   ========================================================================== */
.guide-card{
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);border-radius:22px;padding:1.5rem;height:100%;
  box-shadow:0 10px 26px rgba(23,51,47,.06);transition:.3s ease;display:flex;flex-direction:column;gap:.65rem;overflow:hidden;
}
.guide-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(23,51,47,.13);border-color:rgba(198,156,109,.35)}
.guide-card:hover .guide-card__link i{transform:translateX(3px)}
.guide-card__top{display:flex;justify-content:space-between;align-items:flex-start}
.guide-card h4{margin:.15rem 0 0;font-size:1.12rem}
.guide-card p{color:var(--muted);font-size:.85rem;margin:0;flex:1;line-height:1.55}
.guide-card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--forest);font-size:.86rem}
.guide-card__link i{transition:.2s ease}

/* ==========================================================================
   WWD CARD — homepage "What We Do" section
   ========================================================================== */
.wwd-card{
  position:relative;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(249,251,250,.92));
  border:1px solid rgba(220,231,227,.85);border-radius:22px;padding:2rem 1.7rem;height:100%;
  box-shadow:0 10px 26px rgba(23,51,47,.06);transition:.3s ease;overflow:hidden;
}
.wwd-card:before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--sage));transform:scaleX(0);transform-origin:left;transition:.35s ease;
}
.wwd-card:hover{transform:translateY(-7px);box-shadow:0 22px 46px rgba(23,51,47,.13)}
.wwd-card:hover:before{transform:scaleX(1)}
.wwd-card__icon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.35rem;margin-bottom:1.15rem;
  background:linear-gradient(145deg,#eef4f1,#fff);color:var(--forest);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.wwd-card h4{margin:0 0 .5rem}
.wwd-card p{color:var(--muted);font-size:.89rem;margin-bottom:1.1rem;line-height:1.6}
.wwd-card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--ink);font-size:.9rem}
.wwd-card:hover .wwd-card__link{color:var(--forest)}
.wwd-card:hover .wwd-card__link i{transform:translateX(3px)}
.wwd-card__link i{transition:.2s ease}

@media(max-width:767px){
  .review-card,.vs-card,.alt-card,.guide-card,.wwd-card{padding:1.35rem;border-radius:18px}
  .wwd-card{padding:1.6rem 1.35rem}
}

/* ==========================================================================
   BRAND SIGNATURE SYSTEM — the thread every card family shares
   ========================================================================== */

/* 1. Kicker — small tracked caps label with a gold tick, above every card title */
.card-kicker{
  display:flex;align-items:center;gap:.55rem;
  font-family:"Manrope",sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--sage);
  margin:0;
}
.card-kicker:before{content:"";width:16px;height:1.5px;background:var(--gold);display:inline-block;flex:none}

/* 2. Brand watermark — a faint monogram anchored in every card, low enough to read as texture */
.pro-card,.review-card,.vs-card,.alt-card,.guide-card,.wwd-card{position:relative}
.brand-mark{
  position:absolute;right:1rem;bottom:.5rem;
  font-family:"DM Serif Display",serif;font-size:3rem;line-height:1;
  color:rgba(23,51,47,.045);pointer-events:none;user-select:none;z-index:0;
}

/* 3. Unified score marker — same ring token at two sizes, used everywhere a score appears */
.score-ring--sm{width:38px;height:38px;padding:3px;box-shadow:0 6px 14px rgba(198,156,109,.24)}
.score-ring--sm .score-ring__inner strong{font-size:.72rem}
.score-ring--sm .score-ring__inner small{font-size:.48rem}

/* Clean modifier pills — replaces one-off inline styles so every tag reads from the same two tones */
.tag-pill--muted{background:rgba(111,142,135,.16);color:var(--forest)}
.pick-tag{
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8a5c22;background:rgba(198,156,109,.16);padding:.38rem .7rem;border-radius:999px;
  border:1px solid rgba(198,156,109,.35);white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;
}
.pick-tag--muted{color:var(--forest);background:rgba(111,142,135,.16);border-color:rgba(111,142,135,.3)}

/* Ensure content stacks above the watermark layer */
.pro-card>*:not(.brand-mark),.review-card>*:not(.brand-mark),.vs-card>*:not(.brand-mark),.alt-card>*:not(.brand-mark),.guide-card>*:not(.brand-mark),.wwd-card>*:not(.brand-mark){position:relative;z-index:1}