/* "AskMed vs <app>" comparison pages (Loop 2026-11-03: variation 4 "Cards first" is the template for every one).
   Loaded after web.css, which gives the colors, fonts, header, footer, the 3 store buttons and the closing block.
   No inline styles: the site's content security policy blocks them. */
.cmp-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-left: 18px; padding-right: 18px; }
@media (min-width: 960px) { .cmp-wrap { padding-left: 40px; padding-right: 40px; } }

/* Hero: shares the header's light-blue block, like the home page */
.cmp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 24px; padding-bottom: 44px; }
.cmp-eyebrow { margin: 0; font-size: 13px; font-weight: 600; color: var(--primary); background: #FFFFFF; border-radius: 999px; padding: 5px 12px; }
.cmp-hero h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.5px; text-wrap: balance; }
.cmp-lead { margin: 0 0 6px; max-width: 700px; font-size: 18px; line-height: 1.55; color: var(--muted); }

/* Sections */
.cmp-main { padding-bottom: 48px; }
.cmp-section { display: flex; flex-direction: column; gap: 12px; padding-top: 44px; }
.cmp-page .cmp-section h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.3px; text-align: left; }
.cmp-intro { margin: 0; color: var(--muted); line-height: 1.55; max-width: 760px; }
.cmp-text p { margin: 0; max-width: 760px; color: #2A3346; line-height: 1.6; }

/* One card per win */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; margin-top: 4px; }
.cmp-card { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp-card h3 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.25; }
.cmp-sub { margin: 0; font-size: 14px; color: var(--secondary); }
.cmp-vs { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--stroke); font-size: 14px; }
.cmp-vs dt { font-weight: 700; color: var(--primary); }
.cmp-vs dt.m { color: var(--secondary); }
.cmp-vs dd { margin: 0; }
.cmp-y { color: var(--teal); font-weight: 700; font-size: 17px; line-height: 1; }
.cmp-n { color: #B4BCC9; font-size: 17px; line-height: 1; }

/* Pricing */
.cmp-pricing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .cmp-pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cmp-plan { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; padding: 22px; }
.cmp-plan.pa { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cmp-plan-name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); }
.cmp-plan.pa .cmp-plan-name { color: var(--primary); }
.cmp-plan-price { margin: 4px 0 10px; font-family: var(--serif); font-weight: 700; font-size: 24px; }
.cmp-plan ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* How to choose */
.cmp-guide { margin: 0; padding-left: 22px; max-width: 760px; display: flex; flex-direction: column; gap: 12px; color: #2A3346; line-height: 1.6; }
.cmp-guide strong { color: var(--text); }

/* FAQ: 2 columns on wide screens */
.cmp-faq { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 760px) { .cmp-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cmp-faq details { border-bottom: 1px solid var(--stroke); padding: 16px 4px; }
.cmp-faq summary { cursor: pointer; font-weight: 600; }
.cmp-faq p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }

/* Full comparison table */
.cmp-tbl { overflow-x: auto; background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; min-width: 0; }
.cmp-tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cmp-tbl th, .cmp-tbl td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); }
.cmp-tbl thead th { background: var(--subtle); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); }
.cmp-tbl thead th.a { color: var(--primary); }
.cmp-tbl tbody th { font-weight: 700; color: var(--text); }
.cmp-tbl tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--secondary); }
.cmp-tbl td.a { background: #F7FAFF; width: 28%; }
.cmp-tbl td { width: 28%; }
.cmp-tbl tr:last-child th, .cmp-tbl tr:last-child td { border-bottom: 0; }

/* References */
.cmp-refs ol { margin: 0; padding-left: 20px; color: var(--secondary); font-size: 14px; line-height: 1.6; }
.cmp-page .cmp-section.cmp-refs h2 { font-size: 20px; }

@media (min-width: 640px) {
  .cmp-hero { padding-top: 40px; padding-bottom: 60px; }
  .cmp-hero h1 { font-size: 54px; }
  .cmp-page .cmp-section h2 { font-size: 32px; }
}
/* Phones: the 2 badges stay side by side down to 320 px (Loop 2026-11-03), the web button below */
@media (max-width: 639px) { .cmp-hero .stores { --bh: min(48px, (100vw - 46px) / 6.349); } }