/* =========================================
   True Wags — Services UI (mobile-first)
   Clean, accessible, desktop second
========================================= */

/* -------- Design tokens -------- */
:root{
  --bg-soft: #FFF8EA;
  --card-bg: #ffffff;
  --ring: rgba(0,0,0,.08);
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --primary-color: #6c5ce7;
  --primary: #2c3e50;
  --accent: #6c5ce7;
  --highlight: #F7B733;
  --light: #ecf0f1;
  --dark: #34495e;
  --border: #E5E7EB;
  --muted: #F8FAFC;
  --muted-2: #F1F5F9;
  --text-base: #1f2937;
  --text-secondary: #6b7280;

  --maxw: 1200px;
  --gap: clamp(12px, 2.5vw, 28px);
  --radius-lg: 20px;
}

/* -------- Base layout -------- */
.service-page .container{
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 1rem; box-sizing:border-box;
}
.container--narrow{ max-width:920px; margin-inline:auto; }
.container--fluid{ max-width:none; width:100%; }

.section{
  padding:2rem 0;
  color:var(--text-base);
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}

.prose > * + *{ margin-top:1rem; }
.lead{ max-width:72ch; line-height:1.75; font-size:1.05rem; color:var(--text-base); }

.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:var(--primary-color); }
.hd-2{ font-size:1.75rem; margin:0 0 .6rem; line-height:1.2; }
.hd-3{ font-size:1.1rem; margin:1.25rem 0 .5rem; }
.hd-4{ font-size:1rem; letter-spacing:.01em; color:var(--primary-color); margin:0 0 .5rem; }

/* -------- Motion safety -------- */
@media (prefers-reduced-motion:no-preference){
  *{ transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
}

/* ===================== */
/* Buttons               */
/* ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 1.25rem; border-radius:999px; text-decoration:none;
  font-weight:600; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space:nowrap; justify-content:center;
  width:100%; max-width:480px; margin-inline:auto;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary-color) 35%, white); outline-offset:2px; }
.btn-primary{ background:var(--primary-color); color:#fff; }
.btn-secondary{ background:#fff; color:var(--primary-color); border:2px solid var(--primary-color); }

/* ===================== */
/* Breadcrumbs           */
/* ===================== */
.breadcrumbs{
  background: var(--muted);
  border-block: 1px solid var(--border);
  font-size: .95rem;
}
.breadcrumbs ol{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:0; padding:10px 16px; list-style:none;
}
.breadcrumbs a{ color:var(--dark); text-decoration:none; border-bottom:1px solid transparent; }
.breadcrumbs a:hover{ border-bottom-color: currentColor; }
.breadcrumbs li[aria-current="page"]{ font-weight:700; color:var(--primary); }

/* ===================== */
/* Hero                  */
/* ===================== */
.hero.small-hero{
  padding:2.5rem 0;
  background:var(--highlight);
  text-align:center;
}
.hero.small-hero .container{
  display:grid; grid-template-columns:1fr; gap:1.5rem;
  align-items:center; justify-items:center;
}
.hero-content{ text-align:center; }
.hero-media img{
  width:100%; max-width:680px; border-radius:16px; box-shadow:var(--shadow);
}
.hero.small-hero .hero-cta{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
}

@media (min-width:900px){
  .hero.small-hero{ text-align:left; }
  .hero.small-hero .container{ grid-template-columns:1.1fr .9fr; justify-items:stretch; gap:2rem; }
  .hero-content{ text-align:left; }
  .hero.small-hero .hero-cta{ justify-content:flex-start; gap:1rem; }
  .hero.small-hero .btn{ width:auto; max-width:none; margin-inline:0; }
}

/* ===================== */
/* Overview & Benefits   */
/* ===================== */
.service-overview{ padding: clamp(32px, 6vw, 64px) 0; }
.service-overview h2{
  margin:0 0 12px; text-align:center; color:var(--primary);
  font-size:clamp(1.25rem, 2.2vw, 1.6rem);
}
.service-overview p{
  max-width:62ch; margin:0 auto 18px; text-align:center; color:#334155;
}

.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:clamp(14px, 2.2vw, 24px); margin-top:14px; align-items:stretch;
}
.card{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:20px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.card h3{ margin:0 0 8px; color:var(--accent); font-size:1.08rem; }
.card p{ margin:0; color:#475569; }
.card ul{ list-style:none; padding:0; margin:.5rem 0 0; }
.card ul li{ position:relative; padding-left:1.1rem; margin:.4rem 0; }
.card ul li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

/* ---- Overview: sharper, consistent cards ---- */
.issue-overview{ padding: clamp(32px, 6vw, 64px) 0; }
.issue-overview h2{
  margin: 0 0 12px; text-align: center; color: var(--primary);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}
.issue-overview h2::after{
  content:""; display:block; width:56px; height:3px; margin:10px auto 0;
  background: var(--accent); border-radius:999px; opacity:.9;
}
.issue-overview > .container > p{
  max-width:62ch; margin:0 auto 18px; text-align:center; color:#334155;
}

.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: clamp(14px, 2.2vw, 24px); align-items:stretch; margin-top: 14px;
}
.card{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:20px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--border) 50%, var(--accent)); }
.card h3{ margin:0 0 8px; color: var(--accent); font-size:1.08rem }
.card p{ margin:0; color:#475569; }

.card ul{ list-style:none; margin:.25rem 0 0; padding:0; }
.card ul li{
  position:relative; padding-left:1.1rem; margin:.4rem 0; line-height:1.6; color:#475569;
}
.card ul li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px;
  background:var(--accent); border-radius:50%; box-shadow:0 0 0 2px #fff;
}

.how-we-help{
  padding: clamp(36px, 6vw, 64px) 0;
  background: var(--muted);
  border-block: 1px solid var(--border);
}
.how-we-help h2{
  margin:0 0 12px; text-align:center; color:var(--primary);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}
.grid.two{ display:grid; grid-template-columns:1fr; gap: clamp(16px, 3vw, 28px); }

.tick-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tick-list li{ position:relative; padding-left:30px; color:#334155; }
.tick-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:18px; height:18px; border-radius:50%;
  background: var(--highlight); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--highlight);
}

/* Process card */
.process{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px;
  box-shadow: var(--shadow-sm);
}
.process h3{ margin:0 0 10px; color:var(--primary) }
.process ol{ margin:0 0 14px; padding:0; list-style:none; display:grid; gap:10px; counter-reset:step; color:#334155; }
.process ol li{
  position:relative; padding-left:2.25rem; line-height:1.6;
}
.process ol li::before{
  counter-increment:step; content: counter(step); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background: var(--accent); color:#fff; font-weight:700; box-shadow: var(--shadow-sm);
}
.process .btn{ width:100%; justify-content:center; padding:.85rem 1.1rem; }

@media (min-width:900px){
  .grid.two{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .process{ position:sticky; top:28px; }
  .process .btn{ width:auto; }
}

/* ================================
   1) Overview cards — centered text
   ================================ */
.cards .card{
  text-align: center;                      /* center headings & paragraphs */
}
.cards .card h3,
.cards .card p{
  margin-left: auto;
  margin-right: auto;
}

/* Keep lists tidy: center the UL block, but retain left text alignment
   so bullets and line breaks stay readable. */
.cards .card ul{
  display: inline-block;                   /* centers the whole list block */
  text-align: left;                        /* readable bullets */
  margin: .5rem auto 0;
  padding: 0;                              /* we'll handle padding on li */
}
.cards .card ul li{
  padding-left: 1.15rem;                   /* room for the dot */
  margin: .4rem 0;
  line-height: 1.6;
}

/* ==========================================
   2) How we help — more intuitive on desktop
   (mobile stays exactly as-is)
   ========================================== */

/* Make both columns feel like purposeful “cards” on desktop.
   Left = Benefits; Right = Process (sticky). */
@media (min-width: 900px){
  .how-we-help .grid.two{
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
    gap: clamp(20px, 2.5vw, 36px);
  }

  /* Style the LEFT column wrapper (the <div> that contains .tick-list) as a card */
  .how-we-help .grid.two > :first-child{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;                   /* center the list vertically if short */
    align-items: center;
  }

  /* Benefits list = two columns for quicker scan */
  .how-we-help .tick-list{
    max-width: 900px;                /* keeps it from running too wide */
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* two columns on desktop */
    gap: 12px 24px;                  /* rows x columns gap */
  }
  .how-we-help .tick-list li{
    margin: .1rem 0;
    padding-left: 30px;              /* preserve dot spacing */
  }

  /* Process card already looks great — just ensure equal visual weight */
  .how-we-help .process{
    position: sticky;
    top: 28px;                       /* remains visible while scanning */
    border-radius: 18px;
    padding: 18px;
  }

  /* Optional: full-width CTA inside the process card improves clarity */
  .how-we-help .process .btn{
    width: 100%;
    justify-content: center;
    padding: .9rem 1.1rem;
  }
}

/* Small polish for the section heading */
.how-we-help h2::after{
  content:"";
  display:block;
  width:56px; height:3px;
  margin:10px auto 0;
  background: var(--accent);
  border-radius: 999px;
  opacity:.9;
}

/* Center the copy in the middle overview card */
.symptoms .card:nth-child(2){
  text-align: center;              /* center heading + paragraph */
}

/* Cancel any auto-push-to-bottom rules and center the text block */
.symptoms .card:nth-child(2) p{
  text-align: center;
  margin: .5rem auto 0 !important; /* override any margin-top:auto */
  max-width: 46ch;                  /* comfy line length */
}

/* Optional: also center it vertically on wider screens */
@media (min-width: 900px){
  .symptoms .card:nth-child(2){
    display: flex;                  /* your cards already are, but harmless */
    flex-direction: column;
    justify-content: center;        /* vertical centering */
  }
}

/* Keep the middle card's heading at the top, centre copy horizontally */
.symptoms .card:nth-child(2){
  text-align: center;              /* centre heading + paragraph text */
  display: flex;
  flex-direction: column;          /* normal top-to-bottom flow */
  justify-content: flex-start;     /* <-- keep content at the top */
}

/* Heading stays at top (normal margin) */
.symptoms .card:nth-child(2) h3{
  margin: 0 0 8px;
}

/* Centre paragraph and cancel any equal-height push-down rules */
.symptoms .card:nth-child(2) p,
.symptoms .card:nth-child(2) p:last-child{
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: .5rem !important;    /* override any margin-top:auto */
  margin-bottom: 0;
  max-width: 46ch;                  /* comfy line length */
  text-align: center;
}

/* (Optional) Only if you previously added vertical-centre rules */
@media (min-width: 900px){
  .symptoms .card:nth-child(2){
    /* ensure no vertical centring sneaks back in */
    justify-content: flex-start;
  }
}

/* ===================== */
/* Packages & Pricing    */
/* ===================== */
.packages {
  padding: 2.5rem 1rem;
}
.packages h2 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}
.packages .subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

/* Service grid (1 column on mobile) */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* Card layout */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

/* Card header */
.service-card .card-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, #fff) 0%, #fff 75%);
  padding: 1.1rem 1.25rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.service-card h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.05rem;
}
.service-card .duration {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Price block */
.service-card .price-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem 0;
}
.service-card .price {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
}
.service-card .period {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* Included features */
.service-card .price-includes,
.service-card .features {
  list-style: none;
  padding: 0;
  margin: 0.75rem 1.25rem 0;
  display: grid;
  gap: 0.5rem;
}
.service-card li {
  position: relative;
  padding-left: 26px;
  color: #334155;
  line-height: 1.55;
}
.service-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%236c5ce7'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  border-radius: 50%;
}

/* CTA buttons */
.service-card .cta-wrap {
  margin: 1rem 1.25rem 1.25rem;
  margin-top: auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
.service-cta:hover {
  text-decoration: underline;
}
.service-cta--outline {
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  padding: 0.6rem 1rem;
}

/* Badge */
.service-card .badge {
  position: absolute;
  top: 12px;
  right: -28px;
  transform: rotate(45deg);
  background: var(--highlight);
  color: #0b1220;
  padding: 6px 44px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

/* Popular variant */
.service-card.popular {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.service-card.popular .price {
  font-size: 1.8rem;
}
.service-card.popular .card-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, #fff) 0%, #fff 75%);
}

/* Hover effect */
.service-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* Optional note box */
.package-notes {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--muted-2);
  color: #334155;
  font-size: 0.95rem;
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .packages {
    padding: 3.5rem 2rem;
  }
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }
  .packages h2 {
    font-size: 1.6rem;
  }
}

/* ===================== */
/* Packages              */
/* ===================== */
.features li{ display:flex; gap:.6rem; align-items:flex-start; }
.features .icon{ width:1.25rem; line-height:1.25rem; margin-top:.15rem; }

.packages{
  display:grid; gap:1rem; grid-template-columns:1fr; margin:1.25rem 0;
}
.package{
  background:#fff; border:1px solid #eee; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.package .price{ font-size:1.25rem; font-weight:700; margin:.25rem 0 .5rem; }
.package .ticks{ margin:.6rem 0 1rem; padding-left:1.1rem; list-style:disc; }
.package.popular{ border-color:var(--brand); box-shadow:0 10px 30px rgba(106,74,207,.18); position:relative; }
.package .badge{ position:absolute; top:-10px; left:16px; background:var(--brand); color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; }

/* ===================== */
/* CTA Strip             */
/* ===================== */
.cta-strip{
  position:sticky; bottom:0; z-index:50;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--highlight); text-align:center;
}
.cta-strip p{ margin:0; font-weight:700; color:#1f2937; }
.cta-strip .btn{ background:#4f46e5; }
.cta-strip .btn:hover{ background:#4338ca; }
@media(min-width:760px){ .cta-strip{ position:static; } }

/* ===================== */
/* Local Areas           */
/* ===================== */
.local-areas{ padding:36px 0; background:#fff; }
.local-areas h2{ color:var(--primary); text-align:center; margin:0 0 6px; }
.local-areas p{ color:#475569; text-align:center; max-width:68ch; margin:0 auto 12px; }
.chip-list{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:10px 0 0; justify-content:center;
}
.chip-list li{
  border:1px solid var(--border); border-radius:999px;
  padding:8px 12px; background:var(--muted-2); color:#334155;
}

/* ===================== */
/* Related Services      */
/* ===================== */
.related-services{ padding:36px 0; background:var(--muted); border-top:1px solid var(--border); }
.related-services h2{ color:var(--primary); text-align:center; margin:0 0 10px; }
.related-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
  list-style:none; padding:0; margin:12px auto 0; max-width:900px;
}
.related-grid a{
  display:block; padding:14px 16px; border-radius:12px;
  background:#fff; border:1px solid var(--border); text-decoration:none; color:var(--primary);
  box-shadow:var(--shadow-sm); text-align:center;
}
.related-grid a:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }

@media(min-width:640px){ .related-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===================== */
/* Contact CTA           */
/* ===================== */
.contact-cta{
  padding:44px 0; background:var(--highlight); color:#0b1220; text-align:center;
  border-top:1px solid rgba(0,0,0,.05);
}
.contact-cta h2{ margin:0 0 6px; font-size:clamp(1.2rem,3.5vw,1.5rem); }
.contact-cta p{ opacity:.9; margin:0 0 12px; }
.contact-cta .btn{ background:var(--primary-color); color:#fff; }
.contact-cta .btn:hover{ filter:brightness(.92); }

/* ===================== */
/* Responsive polish     */
/* ===================== */
@media (min-width:1200px){
  .service-page .container{ padding:0 28px; }
}
@media print{
  .cta-strip{ display:none; }
  .btn{ border:1px solid #000; background:#fff; color:#000; box-shadow:none; }
}

/* Sticky CTA strip (works mobile + desktop) */
.cta-strip{
  position: sticky;          /* only the wrapper is sticky */
  bottom: 0;
  z-index: 50;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--highlight);
  text-align: center;
}

/* children must be normal flow */
.cta-strip .container,
.cta-strip p{ position: static !important; }

.cta-strip .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cta-strip p{
  margin: 0;
  font-weight: 700;
  color: #1f2937;
}

.cta-strip .btn{ background:#4f46e5; }
.cta-strip .btn:hover{ background:#4338ca; }

/* If you want it NOT sticky on desktop, uncomment this: */
/*
@media (min-width: 1200px){
  .cta-strip{ position: static; padding:16px 0; }
}
*/
/* True Wags — brand-adapted mobile comparison
   Uses your light theme tokens, purple accent, clean icons. */
.compare-tw--twbrand{
  --c-bg: var(--muted);
  --c-panel: #fff;
  --c-divider: var(--border);
  --c-text: var(--text-base);
  --c-muted: var(--text-secondary);
  --c-on: var(--primary-color);     /* your purple */
  --c-off-fill: #e5e7eb;            /* muted grey circle */
  --c-off-stroke: #cbd5e1;
}

.compare-tw.compare-tw--twbrand{
  background: var(--c-bg);
  color: var(--c-text);
  padding: clamp(28px, 6vw, 56px) 0;
  border-block: 1px solid var(--border);
}

/* Mobile header */
.compare-tw__mhead{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items:center;
  margin: 6px 0 8px;
}
.compare-tw__mhead .logo-card{
  background: var(--c-panel);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  min-height: 120px; display:grid; place-items:center;
}
.compare-tw__mhead .logo-card img{ width: 82%; height:auto; display:block; }
.compare-tw__mhead .mhead-title{
  text-align:center; font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  line-height:1.3; color: var(--primary);
}

/* Feature list */
.compare-tw__list{ margin-top: 6px; border-top: 1px solid var(--c-divider); }
.feature{ border-bottom: 1px solid var(--c-divider); padding-bottom: 10px; }
.feature__summary{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding: 16px 4px 12px; cursor:pointer; font-weight:700; color: var(--primary);
  font-size: clamp(1.02rem, 4.2vw, 1.2rem);
}
.feature__summary::-webkit-details-marker{ display:none; }
.feature__summary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--primary-color) 35%, white);
  outline-offset: 2px; border-radius: 12px;
}
.icon{ width:24px; height:24px; color: var(--primary); opacity:.9; }
.feature[open] .icon--chev{ transform: rotate(180deg); transition:.2s; }

/* Ticks row (brand vs traditional) */
.ticks-row{
  display:grid; grid-template-columns: 1fr auto; gap: 16px; align-items:center;
  padding: 8px 0 10px;
}
.ticks-row__col{ display:flex; align-items:center; min-height:44px; }
.ticks-row__col--brand{
  background: var(--c-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
}
.ticks-row__col--trad{ justify-content:flex-end; }

/* Purple "on" tick, muted "off" tick */
.tick{ width:28px; height:28px; display:inline-block; }
.tick--on{
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='14' fill='%236c5ce7'/%3E%3Cpath d='M8.5 14.8l3.3 3.3 7.7-7.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
              no-repeat center/contain;
}
.tick--off{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' fill='white' stroke='%23e5e7eb' stroke-width='2'/%3E%3Cpath d='M8.5 14.8l3.3 3.3 7.7-7.7' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
}

.feature__content{
  color: var(--c-muted);
  padding: 0 2px 10px;
  font-size: .98rem; line-height:1.55;
}

/* Desktop: if you want to switch to your 3-column layout at ≥900px,
   you can hide the mobile header and keep the list, or replace with your grid. */
@media (min-width:900px){
  .compare-tw__mhead{ display:none; }
}

/* consistent grid and predictable card height */
.services-grid {
  display:grid;
  gap:1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width:640px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .services-grid{ grid-template-columns: repeat(4,1fr); } }

/* reserve enough space so minor line-height changes don't push neighbors */
.service-card { min-block-size: 16rem; } /* adjust if your copy is longer */

/* prevent CTA from wrapping to 2 lines on some widths */
.service-cta { white-space: nowrap; }

/* icons: never affect line-height, reserve exact space at parse time */
.service-icon { inline-size:72px; block-size:72px; flex:0 0 auto; }
.service-icon .icon {
  display:block;          /* remove baseline gap */
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
}

#services {
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* rough height placeholder; tune to your content */
}