/* ══════════════════════════════════════════════════════════════════════
   SME AI Office — the comparison pages (/compare/<name>.html, 2026-09-30).
   ──────────────────────────────────────────────────────────────────────
   Loaded after shell.css and page.css. One shape for every "SME AI Office vs
   <name>" page: the head (one line), the short answer (two or three sentences
   an AI answer engine can quote whole), the table, "which one fits", the
   price line, the questions, and where the other side's prices came from.
   ⚠ Every fact about the other product is dated and sourced in .c-src. A row
   we cannot check is left out, never guessed.
   ══════════════════════════════════════════════════════════════════════ */
.c-hero{padding:72px 0 28px}
.c-hero h1{max-width:none}
.c-lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2);margin:20px 0 0;max-width:52ch}

.c-short{margin:28px 0 0;padding:28px 32px;background:var(--grey,#F6F6F7);border-radius:24px;max-width:900px}
.c-short h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:0 0 10px;max-width:none}
.c-short p{font-size:17px;line-height:1.6;margin:0;color:var(--ink)}
.c-short p+p{margin-top:10px}

.c-sec{padding:56px 0 8px}
.c-sec>.p-w>h2{margin:0 0 24px}

.c-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.5}
.c-table th,.c-table td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--hair)}
.c-table thead th{font-size:15px;font-weight:700;border-bottom:2px solid var(--ink);background:#fff}
.c-table tbody th{font-weight:600;width:26%;color:var(--ink)}
.c-table td{width:37%;color:var(--ink-2)}
.c-table .c-us{background:var(--accent-wash,#E8F4F0);color:var(--ink)}
.c-table thead .c-us{background:var(--accent);color:#fff;border-bottom-color:var(--accent);border-radius:14px 14px 0 0}
.c-table tbody tr:last-child .c-us{border-radius:0 0 14px 14px}
.c-table b{color:var(--ink);font-weight:600}
.c-table small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}

.c-fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-fit>div{border:1px solid var(--hair);border-radius:20px;padding:24px 26px;min-width:0}
.c-fit>div.c-us{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.c-fit h3{font-size:18px;letter-spacing:-.01em;margin:0 0 12px}
.c-fit ul{margin:0;padding:0 0 0 18px}
.c-fit li{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 8px}

.c-src{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:80ch;margin:28px 0 0}
.c-src a{color:var(--accent)}
.c-more{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.c-more a{display:inline-block;padding:8px 14px;border:1px solid var(--hair);border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
.c-more a:hover{border-color:var(--accent);color:var(--accent)}

.c-hero .p-eyebrow a{color:inherit;text-decoration:none}
.c-hero .p-eyebrow a:hover{color:var(--accent)}
.c-date{font-size:13.5px;color:var(--ink-2);margin:10px 0 0}
/* the table's caption is for search engines and screen readers; the heading above says it */
.c-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-table{position:relative}
.c-more-h{font-size:18px!important;letter-spacing:-.01em!important;margin:36px 0 0!important;max-width:none!important}
/* the hub: every comparison, grouped by lane */
.c-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 48px;padding-bottom:40px}
.c-hub>div{min-width:0}
.c-hub h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:0 0 12px;max-width:none}
.c-hub ul{list-style:none;margin:0;padding:0}
.c-hub li{margin:0 0 8px}
.c-hub a{font-size:15.5px;color:var(--ink);text-decoration:none}
.c-hub a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:940px){.c-hub{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.c-hub{grid-template-columns:1fr}}

/* "What you get": two small browser windows, ours with its pages, theirs with what it gives */
.c-get{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.c-site{margin:0;min-width:0}
.c-site figcaption{font-size:15px;font-weight:700;margin:0 0 10px}
.c-site.c-us figcaption{color:var(--accent)}
.c-win{border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:#fff}
.c-site.c-us .c-win{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.c-bar{display:flex;gap:6px;padding:10px 14px;background:#EDEEEF}
.c-bar i{width:9px;height:9px;border-radius:50%;background:#C9CBCE}
.c-menu{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 18px;border-bottom:1px solid var(--hair);font-size:13.5px;font-weight:600}
.c-win ul{list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c-win li{background:var(--grey,#F6F6F7);border-radius:12px;padding:14px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.c-site.c-us .c-win li{background:var(--accent-wash,#E8F4F0)}
.c-site:not(.c-us) .c-win ul{grid-template-columns:1fr}
.c-site>p{font-size:15px;color:var(--ink-2);margin:10px 2px 0}

/* "Only on SME AI Office": a tick list from the rows where the other side says no */
.c-only{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c-only li{position:relative;padding:16px 18px 16px 50px;border:1px solid var(--hair);border-radius:16px;min-width:0}
.c-only li::before{content:'\2713';position:absolute;left:18px;top:15px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.c-only b{display:block;font-size:15.5px;margin-bottom:2px}
.c-only span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.c-only span b{display:inline;font-size:inherit;margin:0;color:var(--ink)}

@media(max-width:760px){
  .c-hero{padding:44px 0 20px}
  .c-short{padding:22px 20px}
  .c-fit,.c-get,.c-only{grid-template-columns:1fr}
  /* the table becomes one card per row: the row's name, then each side with its label */
  .c-table thead{display:none}
  .c-table,.c-table tbody,.c-table tr,.c-table th,.c-table td{display:block;width:auto}
  .c-table tr{border:1px solid var(--hair);border-radius:16px;margin:0 0 12px;overflow:hidden}
  .c-table tbody th{width:auto;border-bottom:1px solid var(--hair);background:#fff;padding:12px 16px}
  .c-table td{width:auto;border-bottom:0;padding:12px 16px}
  .c-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
  .c-table .c-us::before{color:var(--accent)}
  .c-table tbody tr:last-child .c-us{border-radius:0}
}