/* =======================================================================
   Konia — Comparison Page Styles  (Konia vs WhatsApp, reusable per competitor)
   Hero · pain points · comparison table (desktop grid / mobile cards) ·
   keep-WhatsApp callout · trust strip · CTA.
   Reuses shared tokens + .band-dark + .eyebrow + .section-head + .btn + .store.
   ======================================================================= */

/* ============================ HERO ============================ */
.cmp-hero{position:relative;overflow:hidden;background:var(--bg);padding:clamp(72px,11vw,132px) 0 clamp(56px,7vw,92px)}
.cmp-hero__bg{position:absolute;inset:0;z-index:0}
.cmp-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:var(--photo-filter)}
.cmp-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.74),rgba(11,14,20,.82) 55%,var(--bg) 96%),radial-gradient(100% 60% at 50% 0%,var(--green-soft),transparent 60%)}
.cmp-hero .wrap{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.cmp-hero h1{font-size:clamp(40px,6.2vw,80px);font-weight:800;margin:24px 0 0;text-wrap:balance;max-width:16ch;color:var(--text)}
.cmp-hero h1 .accent{color:var(--green-bright)}
.cmp-hero p{margin-top:22px;font-size:clamp(17px,1.5vw,21px);color:#C7CDD8;max-width:580px;text-wrap:pretty}
.cmp-hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* ============================ WHY OUTGROW (pain points) ============================ */
.cmp-why{padding:var(--section-py) 0;background:var(--bg)}
.cmp-pain{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.cmp-pain__card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;transition:transform .22s,border-color .22s,background .22s}
.cmp-pain__card:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--card-2)}
.cmp-pain__ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright);margin-bottom:18px}
.cmp-pain__ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmp-pain__card h3{font-size:18px;font-weight:700;color:var(--text)}
.cmp-pain__card p{margin-top:10px;color:var(--text-dim);font-size:14.5px}
@media(max-width:880px){.cmp-pain{grid-template-columns:1fr}}

/* ============================ COMPARISON TABLE ============================ */
.cmp-table{padding:var(--section-py) 0;background:var(--bg-band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cmp-grid{max-width:920px;margin:46px auto 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}

/* column header row (Capability | Konia | WhatsApp) */
.cmp-head{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;background:var(--card-2);border-bottom:1px solid var(--border)}
.cmp-head__cap{padding:16px 22px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp-head__col{padding:14px 12px;text-align:center;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.cmp-head__col svg{width:18px;height:18px}
.cmp-head__col--konia{color:var(--green-bright);background:var(--green-soft);border-left:1px solid var(--border)}
.cmp-head__col--wa{color:var(--text-dim);border-left:1px solid var(--border)}

/* section sub-header inside the table */
.cmp-section{padding:14px 22px 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-bright);background:var(--bg-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cmp-grid .cmp-section:first-of-type{border-top:0}

/* data rows */
.cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:stretch;border-top:1px solid var(--border)}
.cmp-row:first-of-type{border-top:0}
.cmp-row__cap{padding:16px 22px;display:flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--text)}
.cmp-cell{padding:14px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border-left:1px solid var(--border)}
.cmp-cell--konia{background:var(--green-soft)}
.cmp-cell__note{font-size:12.5px;line-height:1.35;color:var(--text-dim)}
.cmp-cell--konia .cmp-cell__note{color:var(--text)}

/* marks: ✓ yes · ~ partial · ✗ no (CSS-drawn, no translation) */
.mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.mark svg{width:15px;height:15px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mark--yes{background:var(--green);color:var(--on-green)}
.mark--partial{background:rgba(255,193,7,.16);color:#E0A106}
[data-theme="dark"] .mark--partial{background:rgba(255,193,7,.16);color:#FFC93C}
.mark--no{background:var(--card-2);color:var(--muted);border:1px solid var(--border)}

/* mobile labels (hidden on desktop) */
.cmp-cell__lbl{display:none}

/* legend under the table */
.cmp-legend{max-width:920px;margin:18px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:13px;color:var(--text-dim)}
.cmp-legend span{display:inline-flex;align-items:center;gap:8px}
.cmp-legend .mark{width:20px;height:20px;display:grid;place-items:center}
.cmp-legend .mark svg{width:11px;height:11px}

/* ============================ KEEP WHATSAPP CALLOUT ============================ */
.cmp-keep{padding:var(--section-py) 0;background:var(--bg)}
.cmp-keep__inner{max-width:760px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(32px,5vw,52px)}
.cmp-keep__ic{width:52px;height:52px;border-radius:14px;margin:0 auto 18px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright)}
.cmp-keep__ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmp-keep__inner h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--text);text-wrap:balance}
.cmp-keep__inner p{margin-top:14px;color:var(--text-dim);font-size:clamp(15px,1.4vw,18px);max-width:52ch;margin-left:auto;margin-right:auto;text-wrap:pretty}

/* ============================ TRUST STRIP ============================ */
.cmp-trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-band)}
.cmp-trust__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:26px 28px;max-width:var(--maxw);margin:0 auto}
.cmp-trust__item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim)}
.cmp-trust__item svg{width:18px;height:18px;color:var(--green-bright);flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============================ CTA ============================ */
.cta{position:relative;overflow:hidden;padding:clamp(86px,11vw,150px) 0;text-align:center;background:var(--bg)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:var(--photo-filter)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.82),rgba(11,14,20,.9)),radial-gradient(120% 80% at 50% 120%,var(--green-soft),transparent 60%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;text-wrap:balance;color:var(--text)}
.cta p{margin:18px auto 0;color:#C3CAD6;font-size:clamp(16px,1.5vw,20px);max-width:520px}
.store-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* ============================ RESPONSIVE: table -> stacked cards ============================ */
@media(max-width:720px){
  .cmp-head{display:none}
  .cmp-grid{background:transparent;border:0;overflow:visible;display:flex;flex-direction:column;gap:14px}
  .cmp-section{border-radius:10px;border:1px solid var(--green-line);background:var(--green-soft);margin-top:6px}
  .cmp-grid .cmp-section:first-of-type{margin-top:0}
  .cmp-row{display:block;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
  .cmp-row__cap{padding:15px 18px;font-size:15px;font-weight:700;border-bottom:1px solid var(--border)}
  .cmp-cell{flex-direction:row;justify-content:flex-start;text-align:left;gap:11px;border-left:0;border-top:1px solid var(--border);padding:13px 18px}
  .cmp-row .cmp-cell:first-of-type{border-top:0}
  .cmp-cell__lbl{display:inline;font-size:12px;font-weight:700;color:var(--muted);min-width:74px}
  .cmp-cell--konia .cmp-cell__lbl{color:var(--green-bright)}
  .cmp-cell__note{font-size:13px;text-align:left}
}

/* ============================ MORE COMPARISONS (sibling cross-links) ============================ */
.cmp-more{padding:clamp(48px,6vw,80px) 0;background:var(--bg-band);border-top:1px solid var(--border)}
.cmp-more__title{text-align:center;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp-more__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.cmp-more__links a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:10px 18px;transition:var(--transition)}
.cmp-more__links a:hover{border-color:var(--green-line);color:var(--green-bright);background:var(--green-soft);text-decoration:none;transform:translateY(-2px)}
.cmp-more__links a.cmp-more__all{background:var(--green-soft);border-color:var(--green-line);color:var(--green-bright)}
.cmp-more__links a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================ COMPARISONS HUB ============================ */
.hub-hero{position:relative;overflow:hidden;background:var(--bg);padding:clamp(72px,11vw,128px) 0 clamp(48px,6vw,72px)}
.hub-hero__bg{position:absolute;inset:0;z-index:0}
.hub-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:var(--photo-filter)}
.hub-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.74),rgba(11,14,20,.82) 55%,var(--bg) 96%),radial-gradient(100% 60% at 50% 0%,var(--green-soft),transparent 60%)}
.hub-hero .wrap{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hub-hero h1{font-size:clamp(40px,6vw,76px);font-weight:800;margin:24px 0 0;text-wrap:balance;color:var(--text)}
.hub-hero p{margin-top:20px;font-size:clamp(17px,1.5vw,21px);color:#C7CDD8;max-width:560px;text-wrap:pretty}

.hub{padding:var(--section-py) 0;background:var(--bg)}
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto}
.hub-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 28px 26px;transition:transform .22s,border-color .22s,background .22s}
.hub-card:hover{transform:translateY(-5px);border-color:var(--border-strong);background:var(--card-2);box-shadow:var(--shadow-card);text-decoration:none}
.hub-card__top{display:flex;align-items:center;gap:13px}
.hub-card__ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright)}
.hub-card__ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hub-card__vs{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hub-card__name{font-size:21px;font-weight:800;color:var(--text);line-height:1.1;margin-top:2px}
.hub-card__gist{margin-top:16px;color:var(--text-dim);font-size:15px;flex:1}
.hub-card__link{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--green-bright);font-weight:700;font-size:14.5px}
.hub-card__link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.hub-grid{grid-template-columns:1fr}}