/* ==========================================================================
   Comparison pages ("Managello vs X") — one reusable layout.
   Honest buying-guide styling: calm, neutral, no red-vs-green scoring.
   Reuses the site tokens/components in site.css; only adds what's new.
   ========================================================================== */

/* ---- breadcrumb (reset the global site `nav` chrome: white/sticky/bordered) ---- */
.cmp-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.82rem; color:#8A97A0; margin-bottom:22px; background:transparent; position:static; border:none; height:auto; z-index:auto; }
.cmp-crumbs a{ color:#5A6870; }
.cmp-crumbs a:hover{ color:var(--brand-navy); }
.cmp-crumbs .sep{ color:var(--brand-line); }
.cmp-crumbs .current{ color:var(--brand-navy); font-weight:600; }

/* ---- 1 · hero ---- */
.cmp-hero{ padding:64px 0 40px; }
.cmp-hero h1{ font-size:clamp(2.2rem,4.2vw,3.2rem); font-weight:800; line-height:1.06; max-width:16ch; }
.cmp-hero h1 .amber{ color:var(--brand-amber); }
.cmp-hero-sub{ font-size:1.12rem; line-height:1.6; color:#4B5A64; max-width:640px; margin:20px 0 30px; }
.cmp-hero .cta-row{ margin-bottom:18px; }
.cmp-reviewed{ display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; color:#8A97A0; }
.cmp-reviewed::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2E8B57; flex-shrink:0; }

/* section scaffolding shared across comparison sections */
.cmp{ padding:60px 0; }
.cmp.alt{ background:var(--brand-surface); border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line); }
.cmp-head{ max-width:720px; margin:0 auto 40px; text-align:center; }
.cmp-head.left{ margin-left:0; text-align:left; }
.cmp-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-amber); font-weight:600; margin-bottom:14px; }
.cmp-head h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.12; }
.cmp-head p{ font-size:1.02rem; line-height:1.6; color:#5A6870; margin-top:12px; }

/* ---- 2 · quick verdict ---- */
.verdict-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:0 auto; }
.verdict-card{ border:1px solid var(--brand-line); border-radius:16px; padding:30px 30px; background:var(--brand-white); }
.verdict-card.own{ border-color:var(--brand-amber); border-left:3px solid var(--brand-amber); box-shadow:0 26px 52px -34px rgba(201,132,62,.5); }
.verdict-label{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.12rem; color:var(--brand-navy); margin-bottom:18px; display:flex; align-items:center; gap:9px; }
.verdict-label .own-mark{ width:20px; height:20px; border-radius:5px; display:grid; place-items:center; overflow:hidden; }
.verdict-label .own-mark img{ width:100%; height:100%; object-fit:contain; }
.verdict-list{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.verdict-list li{ display:flex; align-items:flex-start; gap:11px; font-size:0.96rem; line-height:1.45; color:#3B4A54; }
.verdict-list li::before{ content:''; flex-shrink:0; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--brand-surface); border:1.5px solid var(--brand-line); }
.verdict-card.own .verdict-list li::before{ border-color:var(--brand-amber); background:rgba(201,132,62,.14); }

/* ---- 3 · company snapshot (reuses .vs-table look, no scoring) ---- */
.cmp-snapshot-wrap{ max-width:940px; margin:0 auto; }

/* shared: elegant comparison table, Managello column subtly highlighted */
.cmp-table-wrap{ overflow-x:auto; border:1px solid var(--brand-line); border-radius:16px; background:var(--brand-white); box-shadow:0 30px 60px -44px rgba(37,50,61,.32); }
.cmp-table{ width:100%; border-collapse:collapse; min-width:560px; }
.cmp-table th, .cmp-table td{ text-align:left; padding:15px 22px; font-size:0.94rem; border-bottom:1px solid var(--brand-line); vertical-align:top; }
.cmp-table thead th{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:#8A97A0; background:var(--brand-surface); text-transform:uppercase; letter-spacing:.04em; }
.cmp-table tbody th{ font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--brand-navy); width:170px; }
.cmp-table td{ color:#5A6870; }
.cmp-table .col-own{ color:var(--brand-navy); font-weight:600; background:rgba(201,132,62,.06); }
.cmp-table thead th.col-own{ color:var(--brand-navy); background:rgba(201,132,62,.12); white-space:nowrap; }
.cmp-table thead th.col-own .own-mark{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; overflow:hidden; vertical-align:-4px; margin-right:5px; }
.cmp-table thead th.col-own .own-mark img{ width:100%; height:100%; object-fit:contain; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td{ border-bottom:none; }
/* Category divider inside the 23-row agency table — a quiet section label that
   breaks the long list into scannable groups without competing with the data. */
.cmp-table .cmp-group-row th{ background:var(--brand-surface); color:var(--brand-navy);
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:.08em; padding:11px 22px;
  border-top:2px solid var(--brand-line); border-bottom:1px solid var(--brand-line); width:auto; }
.cmp-table .cmp-group-row:first-child th{ border-top:none; }

/* "Show all 23 criteria" disclosure — mobile only. Desktop shows the whole
   table, so the button is hidden and the extra rows are never collapsed. */
.cmp-showall{ display:none; }
.cmp-agency{ display:flex; flex-direction:column; align-items:center; }
.cmp-agency .cmp-table-wrap{ width:100%; }
@media (max-width:640px){
  .cmp-table .cmp-row-extra:not(.is-open){ display:none; }
  .cmp-showall{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
    margin:16px auto 0; padding:11px 22px; font-family:'Inter Tight',sans-serif; font-weight:700;
    font-size:0.9rem; color:var(--brand-navy); background:var(--brand-white);
    border:1px solid var(--brand-line); border-radius:11px; cursor:pointer;
    box-shadow:0 1px 2px rgba(28,38,48,.04); transition:border-color .18s ease, background .18s ease; }
  .cmp-showall:hover{ border-color:rgba(201,132,62,.45); }
}

/* ---- 4 · pricing comparison ---- */
.cmp-price-wrap{ max-width:940px; margin:0 auto; }
.cmp-price .flat{ color:#15803D; font-weight:800; }
.cmp-assume{ max-width:940px; margin:20px auto 0; font-size:0.84rem; line-height:1.55; color:#8A97A0; border-left:2px solid var(--brand-line); padding-left:14px; }
.cmp-price-note{ max-width:940px; margin:22px auto 0; }

/* one-time / flat models render a plain honest statement instead of a ladder */
.cmp-price-statement{ max-width:940px; margin:0 auto; border:1px solid var(--brand-line); border-left:3px solid var(--brand-amber); border-radius:14px; background:var(--brand-white); padding:26px 30px; box-shadow:0 18px 44px -34px rgba(28,38,48,.22); }
.cmp-price-statement p{ font-size:1rem; line-height:1.65; color:#3B4A54; }
.cmp-price-statement strong{ color:var(--brand-navy); }

/* ---- 5 · workflow comparison (neutral labels, no ✓/✕) ---- */
.wf-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 16px; margin:0 auto 30px; max-width:720px; }
.wf-legend-item{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; color:#5A6870; }
.wf-grid{ max-width:980px; margin:0 auto; border:1px solid var(--brand-line); border-radius:16px; overflow:hidden; background:var(--brand-white); box-shadow:0 30px 60px -44px rgba(37,50,61,.28); }
.wf-cols{ display:grid; grid-template-columns:150px 1fr 1fr; background:var(--brand-surface); border-bottom:1px solid var(--brand-line); }
.wf-cols div{ padding:13px 18px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:.04em; color:#8A97A0; }
.wf-cols .col-own{ color:var(--brand-navy); background:rgba(201,132,62,.1); display:flex; align-items:center; gap:6px; }
.wf-cols .col-own .own-mark{ width:16px; height:16px; border-radius:4px; overflow:hidden; display:grid; place-items:center; }
.wf-cols .col-own .own-mark img{ width:100%; height:100%; object-fit:contain; }
.wf-row{ display:grid; grid-template-columns:150px 1fr 1fr; border-bottom:1px solid var(--brand-line); }
.wf-row:last-child{ border-bottom:none; }
.wf-stage{ padding:16px 18px; display:flex; align-items:center; gap:10px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.9rem; color:var(--brand-navy); background:var(--brand-surface); }
.wf-stage-num{ width:22px; height:22px; flex-shrink:0; border-radius:50%; background:var(--brand-white); border:1px solid var(--brand-line); display:grid; place-items:center; font-size:0.72rem; color:#8A97A0; }
.wf-cell{ padding:16px 18px; }
.wf-cell.col-own{ background:rgba(201,132,62,.05); }
.wf-cell-note{ font-size:0.85rem; line-height:1.45; color:#5A6870; margin-top:7px; }

/* capability chips — neutral, differentiated by weight not by red/green */
.cap{ display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:700; letter-spacing:.01em; padding:4px 11px; border-radius:20px; white-space:nowrap; }
.cap::before{ content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cap.native{ background:var(--brand-navy); color:#fff; }
.cap.native::before{ background:var(--brand-amber); }
.cap.possible{ background:var(--brand-surface); color:var(--brand-navy); border:1px solid var(--brand-line); }
.cap.possible::before{ background:#8A97A0; }
.cap.integration{ background:transparent; color:#5A6870; border:1px dashed #C3CAD0; }
.cap.integration::before{ background:#C3CAD0; }
.cap.none{ background:transparent; color:#9AA5AD; border:1px solid var(--brand-line); }
.cap.none::before{ background:#DDE1E5; }
.wf-cell.col-own .cap.native{ background:var(--brand-amber); }
.wf-cell.col-own .cap.native::before{ background:#fff; }

/* ---- 6 · agency comparison (reuses .cmp-table) ---- */

/* ---- 7 · where competitor is better ---- */
.strength-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
.strength-card{ border:1px solid var(--brand-line); border-radius:14px; padding:26px 26px; background:var(--brand-white); transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.strength-card:hover{ border-color:rgba(201,132,62,.32); box-shadow:0 22px 44px -30px rgba(28,38,48,.28); transform:translateY(-2px); }
.strength-card h3{ font-family:'Inter Tight',sans-serif; font-size:1.08rem; color:var(--brand-navy); margin-bottom:9px; }
.strength-card p{ font-size:0.93rem; line-height:1.55; color:#5A6870; }
.strength-lead{ text-align:center; max-width:640px; margin:0 auto 34px; font-size:1.02rem; line-height:1.6; color:#5A6870; }

/* ---- 8 · where Managello is different ---- */
.diff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.diff-card{ border:1px solid var(--brand-line); border-radius:16px; padding:28px 26px; background:var(--brand-white); transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.diff-card:hover{ border-color:rgba(201,132,62,.35); box-shadow:0 24px 48px -32px rgba(28,38,48,.28); transform:translateY(-3px); }
.diff-card h3{ font-family:'Inter Tight',sans-serif; font-size:1.1rem; color:var(--brand-navy); margin-bottom:10px; }
.diff-card h3::before{ content:''; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--brand-amber); margin-right:9px; vertical-align:2px; }
.diff-card p{ font-size:0.93rem; line-height:1.6; color:#5A6870; }

/* ---- 9 · migration (reuses .install-flow / .install-step) ---- */
.cmp-migrate-note{ max-width:760px; margin:30px auto 0; border:1px solid var(--brand-line); border-radius:12px; background:var(--brand-white); padding:20px 24px; font-size:0.94rem; line-height:1.6; color:#4B5A64; }
.cmp-migrate-note strong{ color:var(--brand-navy); }

/* ---- 11 · compare with others strip ---- */
.cmp-others{ padding:56px 0; background:var(--brand-surface); border-top:1px solid var(--brand-line); }
.cmp-others-head{ text-align:center; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem; color:var(--brand-navy); margin-bottom:22px; }
.cmp-others-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.cmp-others-row a{ display:inline-flex; align-items:center; background:var(--brand-white); border:1px solid var(--brand-line); border-radius:24px; padding:9px 18px; font-size:0.88rem; font-weight:600; color:var(--brand-navy); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cmp-others-row a:hover{ border-color:var(--brand-amber); box-shadow:0 12px 26px -18px rgba(201,132,62,.5); transform:translateY(-2px); }

/* ---- compare index page ---- */
.cmp-index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cmp-index-card{ display:flex; flex-direction:column; border:1px solid var(--brand-line); border-radius:16px; padding:26px 26px; background:var(--brand-white); transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
.cmp-index-card:hover{ border-color:rgba(201,132,62,.4); box-shadow:0 24px 48px -30px rgba(28,38,48,.3); transform:translateY(-3px); }
.cmp-index-vs{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:#8A97A0; margin-bottom:8px; }
.cmp-index-card h3{ font-family:'Inter Tight',sans-serif; font-size:1.25rem; color:var(--brand-navy); margin-bottom:8px; }
.cmp-index-card p{ font-size:0.9rem; line-height:1.5; color:#5A6870; margin-bottom:18px; }
.cmp-index-link{ margin-top:auto; font-size:0.88rem; font-weight:600; color:var(--brand-navy); border-bottom:2px solid rgba(201,132,62,.35); padding-bottom:2px; align-self:flex-start; }
.cmp-index-card:hover .cmp-index-link{ border-color:var(--brand-amber); }

/* ---- mid-page repeated CTA (sits between two .cmp sections) ---- */
.cmp-midcta{ padding:8px 0; }
.cmp-midcta-inner{ max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:22px; background:var(--brand-white); border:1px solid var(--brand-line); border-left:3px solid var(--brand-amber); border-radius:14px; padding:22px 26px; box-shadow:0 18px 44px -34px rgba(28,38,48,.22); flex-wrap:wrap; }
.cmp-midcta-text{ font-size:0.98rem; line-height:1.5; color:#4B5A64; max-width:54ch; }
.cmp-midcta-text strong{ display:block; color:var(--brand-navy); font-family:'Inter Tight',sans-serif; font-size:1.12rem; margin-bottom:4px; }
.cmp-midcta .btn{ white-space:nowrap; flex-shrink:0; }

/* ---- responsive ---- */
@media(max-width:900px){
  .verdict-grid{ grid-template-columns:1fr; }
  .strength-grid{ grid-template-columns:1fr; }
  .diff-grid{ grid-template-columns:repeat(2,1fr); }
  .cmp-index-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  /* mobile density: match the compressed section rhythm from site.css */
  .cmp{ padding:44px 0; }
  .cmp-hero{ padding:40px 0 26px; }
  .cmp-head{ margin-bottom:26px; }
  .cmp-others{ padding:40px 0; }
  .strength-lead{ margin-bottom:24px; }
  .cmp-midcta-inner{ padding:20px 20px; }
  .cmp-midcta .btn{ width:100%; }
}
@media(max-width:680px){
  .diff-grid{ grid-template-columns:1fr; }
  .cmp-index-grid{ grid-template-columns:1fr; }
  /* stack the workflow table into readable rows */
  .wf-cols{ display:none; }
  .wf-row{ grid-template-columns:1fr; gap:0; padding:6px 0 14px; }
  .wf-stage{ background:transparent; padding:14px 18px 8px; }
  .wf-cell{ padding:6px 18px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .wf-cell.col-own{ background:transparent; }
  .wf-cell::before{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:#8A97A0; min-width:78px; }
  .wf-cell.col-comp::before{ content:'Them'; }
  .wf-cell.col-own::before{ content:'Managello'; color:var(--brand-amber); }
  /* Verdict pills carry meaning, not decoration — nudge them up on phones. */
  .cap{ font-size:0.8rem; }
}