/* Comparison pages (/compare/) and the long-form guide. Loads after site.css and the silver skin.
   Reading pages: one narrow column, plain headings, few boxes, nothing animated. */

.c-page { --c-blue: #8ab4f8; --c-blue-soft: rgba(138, 180, 248, .08); }
.c-shell { position: relative; }
.c-shell--narrow { max-width: 780px; }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top of the page */
.c-hero { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(36px, 5vw, 64px) 0 8px; }
.c-title { margin: 18px 0 0; font: 500 clamp(36px, 5vw, 60px)/1.06 var(--sans); letter-spacing: -.035em; color: transparent; background: var(--metal, linear-gradient(180deg, #fff, #a3adbb)); -webkit-background-clip: text; background-clip: text; padding-bottom: .06em; }
.c-title--guide { font-size: clamp(32px, 4.4vw, 52px); }
.c-vs { color: var(--muted); -webkit-text-fill-color: var(--muted); font-weight: 400; }
.c-sub { margin: 18px 0 0; color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; text-wrap: pretty; }
.c-sub + .c-sub { margin-top: 12px; }
.c-byline { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0 0; color: var(--faint); font-size: 14px; line-height: 1.55; }

/* Sections */
.c-section { padding: clamp(28px, 4vw, 44px) 0; }
.c-section--first { padding-top: clamp(24px, 3vw, 32px); }
.c-h2 { margin: 0 0 14px; font: 500 clamp(23px, 2.3vw, 28px)/1.2 var(--sans) !important; letter-spacing: -.025em; color: var(--text); }
.c-h3 { margin: 28px 0 10px; font: 600 16px/1.35 var(--sans); color: var(--text); }
.c-section > .s-shell > .c-h3:first-child { margin-top: 0; }
.c-note { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.c-note--after { margin: 16px 0 0; }

/* Prose */
.c-prose p { margin: 0 0 16px; color: var(--text-2); font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.c-prose p:last-child { margin-bottom: 0; }

/* Who should pick which */
.c-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-pick { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.c-pick.is-finkut { border-color: rgba(138, 180, 248, .32); background: linear-gradient(180deg, var(--c-blue-soft), transparent 60%), var(--bg-2); }
.c-pick h3 { margin: 0 0 12px; font: 600 17px/1.3 var(--sans); color: var(--text); }
.c-pick ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.c-pick li { position: relative; padding-left: 16px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.c-pick li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.c-pick.is-finkut li::before { background: var(--c-blue); }
@media (max-width: 700px) { .c-picks { grid-template-columns: 1fr; } }

/* Tables */
.c-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.c-table:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.c-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.c-table thead th { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--text); font-weight: 600; text-align: left; }
.c-table tbody th[scope="row"] { width: 30%; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 500; text-align: left; vertical-align: top; line-height: 1.45; }
.c-table tbody th small { display: block; margin-top: 3px; color: var(--faint); font-size: 13px; font-weight: 400; line-height: 1.45; }
.c-table td { width: 35%; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); line-height: 1.5; vertical-align: top; }
.c-table td.is-win { color: var(--text); }
.c-win { margin-right: 6px; color: var(--c-blue); font-weight: 700; }
.c-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.c-table__group th { padding: 22px 16px 8px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 600; text-align: left; }
.c-table tbody:first-of-type .c-table__group th { padding-top: 14px; }
.c-table--list td, .c-table--list th { vertical-align: top; }
.c-table--list tbody th[scope="row"] { width: 22%; }
.c-table--list td { width: auto; color: var(--text-2); }
.c-table--list tbody th a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-3); }
.c-table--list tr.is-finkut > * { background: var(--c-blue-soft); }
.c-rank { width: 40px !important; color: var(--faint) !important; font-variant-numeric: tabular-nums; }

/* Phones: each row becomes a small card; the column name sits above its value */
@media (max-width: 640px) {
    .c-table--stack { overflow: visible; border: 0; background: none; }
    .c-table--stack thead { display: none; }
    .c-table--stack table, .c-table--stack tbody, .c-table--stack tr, .c-table--stack th, .c-table--stack td { display: block; width: auto !important; }
    .c-table--stack tbody tr:not(.c-table__group) { margin: 0 0 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
    .c-table--stack tbody th[scope="row"], .c-table--stack td { padding: 0; border: 0 !important; }
    .c-table--stack tbody th[scope="row"] { margin-bottom: 8px; font-size: 15.5px; }
    .c-table--stack td + td { margin-top: 8px; }
    .c-table--stack td[data-col]::before { content: attr(data-col); display: block; color: var(--faint); font-size: 13px; font-weight: 500; }
    .c-table--stack .c-table__group th { padding: 16px 2px 8px !important; }
    .c-table--list tbody tr { position: relative; padding-left: 44px !important; }
    .c-table--list .c-rank { position: absolute; left: 16px; top: 14px; }
    .c-table--list tr.is-finkut { border-color: rgba(138, 180, 248, .32) !important; background: var(--c-blue-soft) !important; }
    .c-table--list tr.is-finkut > * { background: none; }
}

/* Prices */
.c-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-price { padding: 18px 22px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.c-price h3 { margin: 0 0 6px; font: 600 17px/1.3 var(--sans); color: var(--text); }
.c-price dl { margin: 0; }
.c-price dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.c-price dt { color: var(--muted); font-size: 14.5px; }
.c-price dd { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.45; }
.c-price dd b { font-weight: 600; }
.c-price dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 700px) { .c-prices { grid-template-columns: 1fr; } }

/* FAQ */
.c-faq { border-top: 1px solid var(--line); }
.c-faq details { border-bottom: 1px solid var(--line); }
.c-faq summary { position: relative; padding: 16px 36px 16px 0; color: var(--text); font-size: 16.5px; font-weight: 500; line-height: 1.45; cursor: pointer; list-style: none; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--muted); font-size: 22px; font-weight: 300; }
.c-faq details[open] summary::after { content: "−"; }
.c-faq summary:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; }
.c-faq details p { margin: 0 0 18px; color: var(--text-2); font-size: 16px; line-height: 1.7; }

/* Guide: one tool per section */
.c-tool { padding-block: clamp(24px, 3.4vw, 36px); }
.c-tool__rank { color: var(--faint); font-weight: 400; }
.c-tool__best { margin: -6px 0 14px !important; color: var(--muted) !important; font-size: 15.5px !important; }
.c-tool.is-finkut > .s-shell { box-sizing: border-box; max-width: 828px; padding: 24px; border: 1px solid rgba(138, 180, 248, .28); border-radius: 18px; background: linear-gradient(180deg, var(--c-blue-soft), transparent 50%); }
.c-facts { margin: 18px 0 0; border-top: 1px solid var(--line); }
.c-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.c-facts dt { color: var(--muted); font-size: 14.5px; }
.c-facts dd { margin: 0; color: var(--text); font-size: 15px; line-height: 1.55; }
.c-tool__link { margin: 16px 0 0 !important; font-size: 15px !important; }
.c-steps { margin: 0; padding-left: 22px; color: var(--text-2); font-size: 17px; line-height: 1.7; }
.c-steps li + li { margin-top: 8px; }
@media (max-width: 640px) {
    .c-facts > div { grid-template-columns: 1fr; gap: 2px; }
    .c-tool.is-finkut > .s-shell { padding: 18px 16px; }
}

/* Footnote under the FAQ */
.c-trademark { margin: 24px 0 0; color: var(--faint); font-size: 13px; line-height: 1.6; }

/* Links to the other comparisons */
.c-more { display: grid; border-top: 1px solid var(--line); }
.c-more a { display: grid; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.c-more a:hover span, .c-more a:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.c-more span { font: 500 17px/1.3 var(--sans); }
.c-more small { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.c-more em { color: var(--faint); font: normal 400 13px/1.4 var(--sans); }

/* Article cover and the card grids of the blog index and the compare hub */
.c-cover { margin: 28px 0 0; }
.c-cover img, .c-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.c-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.c-card { display: grid; align-content: start; gap: 6px; color: var(--text); text-decoration: none; }
.c-card picture, .c-card > img { margin-bottom: 8px; }
.c-card em { color: var(--faint); font: normal 400 13px/1.4 var(--sans); }
.c-card span { font: 500 19px/1.3 var(--sans); letter-spacing: -.015em; }
.c-card small { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.c-card:hover span, .c-card:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.c-card:hover img, .c-card:focus-visible img { border-color: var(--line-3); }
@media (max-width: 640px) { .c-cards { grid-template-columns: 1fr; } }

/* Other FinKut tools, each linking to its feature page */
.c-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-tools li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.c-tools a { color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; }
.c-tools a:hover, .c-tools a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.c-tools p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.c-tools small { display: block; margin-top: 6px; color: var(--faint); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) { .c-tools { grid-template-columns: 1fr; } }