/* Compare page (2026-11 redesign): green hero with a verdict, three meters and a to-scale
   Venn; a strip of four small charts that enlarge on tap; then the text sections.
   Plain CSS on the shared ck- tokens (static/css/ck-frame-v20261103.css); every class is
   prefixed ck-c- so it cannot meet the Tailwind classes other templates still use. */

.ck-c { font-family: var(--ck-body); color: var(--ck-fg); background: var(--ck-bg); }
.ck-c a { color: var(--ck-sage-ink); }
.ck-c a.ck-btn-sage, .ck-c a.ck-btn-copper { color: #FFFFFF; }

/* ---- Hero ------------------------------------------------------------------ */
.ck-c-hero { background: var(--ck-sage); color: var(--ck-on-dark); }
.ck-c-hero a { color: var(--ck-on-dark); }
.ck-c-herorow { display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; padding-top: 28px; padding-bottom: 32px; }
.ck-c-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ck-c-crumbs { font-size: 13px; color: var(--ck-on-dark2); }
.ck-c-crumbs a { color: var(--ck-on-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.4); }
.ck-c-tag { font: 500 12px var(--ck-mono); letter-spacing: .08em; text-transform: uppercase; color: #F2C9A8; }
.ck-c-hero h1 { font: 400 clamp(36px, 5.4vw, 60px)/1.04 var(--ck-display); margin: 0; text-wrap: balance; color: var(--ck-on-dark); }
.ck-c-desc { font-size: 18px; line-height: 1.5; margin: 0; max-width: 34em; color: var(--ck-on-dark); }
.ck-c-meters { display: grid; gap: 8px; max-width: 460px; }
.ck-c-meters div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 140px; gap: 10px; align-items: center; font-size: 14px; }
.ck-c-meters small { color: var(--ck-on-dark2); font-size: 13px; }
.ck-c-meters i { display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(#9ED3BF, #9ED3BF) left / var(--w) 100% no-repeat, rgba(255,255,255,.18); }
.ck-c-meters i.ck-c-cop { background: linear-gradient(#E4A37A, #E4A37A) left / var(--w) 100% no-repeat, rgba(255,255,255,.18); }
.ck-c-meters i.ck-c-rk { background: linear-gradient(#FFFFFF, #FFFFFF) left / var(--w) 100% no-repeat, rgba(255,255,255,.18); }
.ck-c-meters b { font-weight: 600; font-size: 14px; }
.ck-c-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-c-line { background: transparent; color: var(--ck-on-dark); border-color: rgba(255,255,255,.45); }
.ck-c-line:hover { background: rgba(255,255,255,.08); }
.ck-c-hero .ck-btn-copper, .ck-c-hero .ck-c-line { color: #FFFFFF; }

.ck-c-venn { flex: 1 1 340px; min-width: 0; max-width: 500px; margin: 0; }
.ck-c-venn svg { display: block; width: 100%; height: auto; }
.ck-c-vA { fill: #9ED3BF; fill-opacity: .55; stroke: #FFFFFF; stroke-width: 2; }
.ck-c-vB { fill: #E4A37A; fill-opacity: .6; stroke: #FFFFFF; stroke-width: 2; }
.ck-c-vn { font: 500 26px var(--ck-mono); fill: #FFFFFF; }
.ck-c-vn.ck-c-big { font-size: 34px; }
.ck-c-vn.ck-c-sm { font-size: 22px; }
.ck-c-vs { font: 600 16px var(--ck-body); fill: rgba(255,255,255,.92); }
.ck-c-vt { font: 400 22px var(--ck-display); fill: #FFFFFF; }
.ck-c-vlead { stroke: rgba(255,255,255,.7); stroke-width: 1.5; }
.ck-c-venn figcaption { font-size: 12px; color: var(--ck-on-dark2); text-align: center; }

/* ---- Article ------------------------------------------------------------------ */
.ck-c-article { max-width: 760px; margin: 0 auto; padding: 28px 0 44px; display: flex; flex-direction: column; gap: 6px; }
.ck-c-sec { padding: 20px 0; border-bottom: 1px solid var(--ck-line); }
.ck-c-sec:last-of-type { border-bottom: 0; }
.ck-c-sec h2 { font: 400 30px/1.15 var(--ck-display); margin: 0 0 12px; text-wrap: balance; }
.ck-c-sec h3 { font: 700 14px var(--ck-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ck-copper-ink); margin: 0 0 8px; }
.ck-c-sec p { margin: 0 0 12px; line-height: 1.6; color: var(--ck-fg2); }
.ck-c-fine { display: block; font-size: 13px; color: var(--ck-fg3); line-height: 1.5; margin-top: 8px; }
.ck-c-warn { background: #FFF4E5; border: 1px solid #E8C79A; border-left: 4px solid var(--ck-copper); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; line-height: 1.55; color: #5C3A1E; }

/* ---- Chart strip ------------------------------------------------------------ */
.ck-c-strip { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.ck-c-card { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--ck-line); border-radius: 14px;
  background: var(--ck-card); padding: 10px; cursor: zoom-in; font: inherit; color: var(--ck-fg); min-width: 0; }
.ck-c-card:hover { border-color: var(--ck-sage-ink); }
.ck-c-ct { font-size: 13px; font-weight: 700; }
.ck-c-cb { height: 150px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; pointer-events: none; }
.ck-c-cx { font-size: 11px; color: var(--ck-fg3); }
.ck-c-mb { display: block; width: 100%; }
.ck-c-card .ck-c-fine { font-size: 11px; margin-top: 4px; }
.ck-c-card .ck-c-famnote { display: none; }

.ck-c-dvhead, .ck-c-dv { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px; align-items: center; }
.ck-c-dvhead { font-size: 12px; font-weight: 600; color: var(--ck-fg3); text-transform: uppercase; letter-spacing: .04em; padding: 0 0 6px; }
.ck-c-dvhead span:first-child { text-align: right; }
.ck-c-dvlist { display: flex; flex-direction: column; gap: 4px; }
.ck-c-dv { padding: 5px 0; border-bottom: 1px solid var(--ck-line); }
.ck-c-dv b { text-align: center; font-size: 13px; font-weight: 600; }
.ck-c-dvl { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.ck-c-dvr { display: flex; align-items: center; gap: 6px; }
.ck-c-dvl i { display: block; height: 12px; border-radius: 6px 0 0 6px; background: var(--ck-sage-ink); order: 2; min-width: 2px; }
.ck-c-dvl em { order: 1; }
.ck-c-dvr i { display: block; height: 12px; border-radius: 0 6px 6px 0; background: var(--ck-copper); min-width: 2px; }
.ck-c-dv em { font-style: normal; font-family: var(--ck-mono); font-size: 12px; color: var(--ck-fg3); }
.ck-c-card .ck-c-dvhead, .ck-c-card .ck-c-dv { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 4px; }
.ck-c-card .ck-c-dvhead { font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; }
.ck-c-card .ck-c-dv { padding: 1px 0; }
.ck-c-card .ck-c-dv b { font-size: 11px; }
.ck-c-card .ck-c-dv em { display: none; }
.ck-c-card .ck-c-dvl i, .ck-c-card .ck-c-dvr i { height: 7px; }

.ck-c-thirds { display: grid; gap: 6px; width: 100%; }
.ck-c-th { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; font-size: 12px; align-items: center; }
.ck-c-th span { grid-row: 1 / 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-c-th i { display: block; height: 6px; border-radius: 3px; margin: 1px 0; grid-column: 2; }
.ck-c-t1 { background: var(--ck-sage-ink); }
.ck-c-t2 { background: var(--ck-copper); }
.ck-c-tkey { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--ck-fg3); margin-top: 6px; }
.ck-c-tkey span { display: flex; align-items: center; gap: 4px; }
.ck-c-tkey i { width: 10px; height: 6px; border-radius: 3px; display: inline-block; }

.ck-c-crs { display: grid; gap: 6px; }
.ck-c-cr { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 13px; }
.ck-c-cr i { display: block; height: 12px; border-radius: 6px; background: var(--ck-copper); min-width: 3px; }
.ck-c-cr em { font-style: normal; font-family: var(--ck-mono); font-size: 12px; color: var(--ck-fg2); text-align: right; }

.ck-c-rkh { display: block; width: 100%; height: auto; max-height: 112px; }
.ck-c-off { fill: rgba(45,42,38,.14); }
.ck-c-on { fill: var(--ck-copper); }
.ck-c-med { stroke: var(--ck-fg3); stroke-dasharray: 3 3; stroke-width: 1; }
.ck-c-pin { stroke: var(--ck-fg); stroke-width: 1.5; }
.ck-c-dot { fill: var(--ck-fg); }
.ck-c-rt { font: 500 11px var(--ck-body); fill: var(--ck-fg3); }
.ck-c-rt.ck-c-b { fill: var(--ck-fg); font-weight: 700; }
.ck-c-ax { font: 400 10px var(--ck-body); fill: var(--ck-fg3); }

.ck-c-modal { position: fixed; inset: 0; z-index: 80; background: rgba(20,24,22,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ck-c-modal[hidden] { display: none !important; }
.ck-c-box { background: var(--ck-card); border-radius: 16px; max-width: 720px; width: 100%; max-height: calc(100vh - 40px); overflow: auto; padding: 18px; box-sizing: border-box; }
.ck-c-close { float: right; font: 600 14px var(--ck-body); background: var(--ck-fg); color: var(--ck-bg); border: 0; border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.ck-c-mt { margin: 0 0 14px; font: 400 24px var(--ck-display); color: var(--ck-fg); }
.ck-c-box .ck-c-mb { clear: both; }
.ck-c-box .ck-c-th { font-size: 15px; grid-template-columns: 120px minmax(0, 1fr); }
.ck-c-box .ck-c-th i { height: 10px; }
.ck-c-box .ck-c-cr { font-size: 15px; grid-template-columns: 110px minmax(0, 1fr) 56px; }
.ck-c-box .ck-c-rkh { max-height: none; max-width: 420px; margin: 0 auto; }
.ck-c-box .ck-c-tkey, .ck-c-box .ck-c-fine { font-size: 13px; }

/* ---- Text sections ---------------------------------------------------------- */
.ck-c-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ck-c-two > div { border: 1px solid var(--ck-line); border-radius: 14px; padding: 14px 16px; background: var(--ck-card); min-width: 0; }
.ck-c-two p { margin: 0; }
.ck-c-two b { color: var(--ck-fg); }
.ck-c-plist { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 8px; color: var(--ck-fg2); line-height: 1.55; }
.ck-c-plist a { text-decoration: none; }
.ck-c-plist b { color: var(--ck-fg); }
.ck-c-rlist { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-c-rlist a { padding: 9px 14px; border-radius: 12px; background: var(--ck-card); border: 1px solid var(--ck-line); color: var(--ck-fg);
  text-decoration: none; font-weight: 600; font-size: 15px; max-width: 100%; box-sizing: border-box; }
.ck-c-rlist a:hover { border-color: var(--ck-sage-ink); }
.ck-c-rlist small { font-weight: 400; color: var(--ck-fg3); }
.ck-c-pro { background: var(--ck-tint); border-radius: 16px; padding: 20px; border-bottom: 0; margin: 12px 0; }
.ck-c-star { color: var(--ck-copper); }
.ck-c-grp { border-top: 1px solid var(--ck-line); padding: 8px 0; }
.ck-c-grp summary { cursor: pointer; font-weight: 600; }
.ck-c-grp summary small { color: var(--ck-fg3); font-weight: 400; }
.ck-c-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ck-c-chips a, .ck-c-chips span { padding: 4px 10px; border-radius: 999px; background: var(--ck-card); border: 1px solid var(--ck-line);
  font-size: 13px; text-decoration: none; color: var(--ck-fg); }
.ck-c-only { margin-top: 16px; }
.ck-c-faq details { border-bottom: 1px solid var(--ck-line); padding: 10px 0; }
.ck-c-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.ck-c-faq p { margin: 8px 0 0; }
.ck-c-alike { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-c-alike a { padding: 7px 13px; border-radius: 999px; background: var(--ck-tint); color: var(--ck-fg); text-decoration: none; font-size: 15px; }
.ck-c-alike a:hover { color: var(--ck-sage-ink); }
.ck-c #compare-form { margin-bottom: 0; }

@media (max-width: 900px) {
  .ck-c-strip { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ck-c-meters div { grid-template-columns: 100px minmax(0, 1fr) 110px; gap: 8px; font-size: 13px; }
  .ck-c-meters b { font-size: 13px; }
  .ck-c-sec h2 { font-size: 26px; }
  .ck-c-strip { gap: 8px; }
  .ck-c-cb { height: 150px; }
  .ck-c-card .ck-c-th, .ck-c-card .ck-c-cr { grid-template-columns: 58px minmax(0, 1fr); }
  .ck-c-card .ck-c-cr em { display: none; }
  .ck-c-box .ck-c-dvhead, .ck-c-box .ck-c-dv { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
}