/*
 * Trunk Organizers -- tokens and layout for the article blocks.
 *
 * Every block root carries "cto-app cto-root" and every rule is scoped under .cto-app. The
 * theme styles .tg-content h2/h3/ul/ol/li/a/img/figure/figcaption/table/th/td for prose; those
 * rules would otherwise leak in (list bullets, red underlined links, 24px image margins, striped
 * table rows, 20px cell padding). `.cto-app .x` (two classes) beats `.tg-content x` on
 * specificity, which is what keeps the two apart, and container-query rules need the prefix too.
 * Theme link colours need !important on the buttons (a:hover is red-dark on a red button).
 * Do not "simplify" the prefixes away.
 *
 * Mobile first: one column at 320px, no horizontal page overflow (the comparison table scrolls
 * inside its own wrapper), tap targets at least 44px. No url(), no webfont (Oswald and Spectral
 * come from the theme and are inherited by name).
 */

.cto-app {
  --cto-red: #e11d2a;
  --cto-red-dark: #b91320;
  --cto-ink: #16161a;
  --cto-body: #26262c;
  --cto-muted: #55555c;
  --cto-paper: #f4f1ec;
  --cto-border: #e4dfd6;
  --cto-hair: #efeae1;
  --cto-green: #1d7a3a;
  --cto-amber: #8a5a00;
  --cto-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --cto-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --cto-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --cto-radius: 2px;
}

/* ============================================================== block roots */
.cto-app.cto-root {
  display: block;
  margin: 28px 0;
  color: var(--cto-body);
  font-family: var(--cto-font-ui);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.cto-app *, .cto-app *::before, .cto-app *::after { box-sizing: border-box; }
.cto-app p { margin: 0; }
.cto-app ul, .cto-app ol { list-style: none; margin: 0; padding: 0; }
.cto-app li { margin: 0; }
.cto-app img { display: block; margin: 0; border-radius: 0; max-width: 100%; height: auto; }
.cto-app a { text-decoration: none; }
.cto-app a:focus-visible, .cto-app .cto-scroll:focus-visible, .cto-app summary:focus-visible, .cto-app .cto-input:focus-visible { outline: 2px solid var(--cto-red); outline-offset: 2px; }
.cto-app .cto-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cto-app .cto-disclosure { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--cto-muted); }
.cto-app .cto-disclosure a { color: var(--cto-red); text-decoration: underline; text-underline-offset: 2px; }
.cto-app.cto-disclosure-wrap { margin: 24px 0 -8px; }
.cto-app .cto-caption { margin: 0 0 8px; font-family: var(--cto-font-display); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--cto-ink); }

/* ====================================================================== buy */
.cto-app a.cto-buy {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; min-width: 44px; padding: 10px 18px; margin: 0;
  font-family: var(--cto-font-ui); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  color: #fff !important; background: var(--cto-red); border: 1px solid var(--cto-red); border-radius: var(--cto-radius);
  text-decoration: none !important; cursor: pointer;
}
.cto-app a.cto-buy:hover, .cto-app a.cto-buy:focus { color: #fff !important; background: var(--cto-red-dark); border-color: var(--cto-red-dark); }
.cto-app a.cto-buy--alt { color: var(--cto-ink) !important; background: #fff; border-color: var(--cto-ink); }
.cto-app a.cto-buy--alt:hover, .cto-app a.cto-buy--alt:focus { color: #fff !important; background: var(--cto-ink); border-color: var(--cto-ink); }

/* =================================================================== picks */
.cto-app .cto-picklist { border-top: 3px solid var(--cto-red); background: #fff; border-left: 1px solid var(--cto-border); border-right: 1px solid var(--cto-border); }
.cto-app .cto-pickrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--cto-border); }
.cto-app .cto-pick-award { font-family: var(--cto-font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cto-red-dark); }
.cto-app a.cto-pick-title { display: flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--cto-ink); text-decoration: underline; text-decoration-color: var(--cto-red); text-underline-offset: 3px; }
.cto-app .cto-pick-best { font-size: 14px; color: var(--cto-body); }
.cto-app .cto-pick-act { display: block; margin-top: 8px; }

/* ==================================================================== cards */
.cto-app.cto-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; margin: 22px 0;
  background: #fff; border: 1px solid var(--cto-border); border-top: 3px solid var(--cto-red); border-radius: var(--cto-radius);
  scroll-margin-top: 96px;
}
.cto-app .cto-fig { width: 200px; max-width: 100%; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--cto-hair); border-radius: var(--cto-radius); }
.cto-app .cto-fig img.cto-img { width: 100%; height: 100%; object-fit: contain; }
.cto-app .cto-card-main { min-width: 0; }
.cto-app .cto-award { margin: 0 0 6px; font-family: var(--cto-font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cto-red-dark); }
.cto-app .cto-title { margin: 0 0 8px; font-family: var(--cto-font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--cto-ink); }
.cto-app .cto-bestfor { margin: 0 0 10px; font-size: 15px; color: var(--cto-ink); }
.cto-app .cto-blurb { margin: 0 0 12px; font-family: var(--cto-font-body); font-size: 17px; line-height: 1.6; color: var(--cto-body); }
.cto-app .cto-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; margin: 0 0 12px; padding: 0; }
.cto-app .cto-spec { margin: 0; min-width: 0; }
.cto-app .cto-spec dt { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--cto-muted); }
.cto-app .cto-spec dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--cto-ink); overflow-wrap: anywhere; }
.cto-app .cto-spec-wide { grid-column: 1 / -1; }
.cto-app .cto-cm { display: block; font-size: 12px; font-weight: 400; color: var(--cto-muted); }
.cto-app .cto-specs-note { margin: 0 0 12px; padding: 8px 12px; font-size: 14px; color: var(--cto-ink); background: var(--cto-paper); border-left: 3px solid var(--cto-red); }
.cto-app .cto-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
.cto-app .cto-pc-title { margin: 0 0 4px; font-family: var(--cto-font-display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.cto-app .cto-pros .cto-pc-title { color: var(--cto-green); }
.cto-app .cto-cons .cto-pc-title { color: var(--cto-red-dark); }
.cto-app .cto-proscons li { position: relative; margin: 0 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.cto-app .cto-pros li::before { content: "+"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--cto-green); }
.cto-app .cto-cons li::before { content: "\2013"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--cto-red-dark); }
.cto-app .cto-price { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--cto-ink); }
.cto-app .cto-card-actions { margin: 0; }
.cto-app .cto-card-actions .cto-buy { width: 100%; }

/* ================================================================== compare */
.cto-app .cto-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cto-border); background: #fff; }
.cto-app .cto-table { width: 100%; min-width: 900px; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; font-family: var(--cto-font-ui); font-size: 14px; background: #fff; }
.cto-app .cto-table caption { caption-side: top; padding: 10px 12px 8px; text-align: left; font-family: var(--cto-font-display); font-weight: 600; font-size: 18px; color: var(--cto-ink); }
.cto-app .cto-table thead th { padding: 10px 12px; text-align: left; white-space: nowrap; font-family: var(--cto-font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--cto-ink); border-bottom: 0; }
.cto-app .cto-table tbody th, .cto-app .cto-table tbody td { padding: 10px 12px; text-align: left; vertical-align: middle; white-space: nowrap; font-family: var(--cto-font-ui); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--cto-body); background: #fff; border-bottom: 1px solid var(--cto-hair); }
.cto-app .cto-table tbody th { font-weight: 600; color: var(--cto-ink); }
.cto-app .cto-table tbody tr:nth-child(even) th, .cto-app .cto-table tbody tr:nth-child(even) td { background: #faf8f4; }
.cto-app .cto-table tbody td.cto-wrap { min-width: 130px; white-space: normal; }
.cto-app .cto-sticky { position: sticky; left: 0; z-index: 1; min-width: 150px; box-shadow: 1px 0 0 var(--cto-border); }
.cto-app .cto-table thead .cto-sticky { z-index: 2; }
.cto-app .cto-table tbody th.cto-sticky { white-space: normal; }
.cto-app a.cto-name-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cto-ink); text-decoration: underline; text-decoration-color: var(--cto-red); text-underline-offset: 3px; }
.cto-app .cto-table a.cto-buy { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* ====================================================================== fit */
.cto-app .cto-fit-intro { margin: 0 0 12px; font-size: 15px; }
.cto-app .cto-fit-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; padding: 14px; background: var(--cto-paper); border: 1px solid var(--cto-border); border-top: 3px solid var(--cto-red); }
.cto-app .cto-field label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--cto-ink); }
.cto-app .cto-input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; font-family: var(--cto-font-ui); font-size: 16px; line-height: 1.2; color: var(--cto-ink); background: #fff; border: 1px solid #b8b2a6; border-radius: var(--cto-radius); }
.cto-app .cto-units { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cto-app .cto-unit { position: relative; display: inline-flex; margin: 0; }
.cto-app .cto-unit input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cto-app .cto-unit span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--cto-ink); background: #fff; border: 1px solid #b8b2a6; border-radius: var(--cto-radius); }
.cto-app .cto-unit input:checked + span { color: #fff; background: var(--cto-ink); border-color: var(--cto-ink); }
.cto-app .cto-unit input:focus-visible + span { outline: 2px solid var(--cto-red); outline-offset: 2px; }
/* The box reserves the height of the tallest outcome (summary, three group headings, one 60px row per product) before any script runs. */
.cto-app .cto-fit-result { min-height: calc(var(--cto-n, 6) * 60px + 200px); }
.cto-app .cto-fit-prompt { margin: 0 0 8px; font-size: 14px; color: var(--cto-muted); }
.cto-app .cto-fit-err { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--cto-red-dark); }
.cto-app .cto-fit-table { width: 100%; margin: 0; border: 1px solid var(--cto-border); border-collapse: collapse; border-radius: 0; table-layout: fixed; font-size: 13px; background: #fff; }
.cto-app .cto-fit-table thead th { height: 36px; padding: 0 8px; text-align: left; font-family: var(--cto-font-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--cto-ink); border: 0; }
.cto-app .cto-fit-table thead th:first-child { width: 44%; }
.cto-app .cto-fit-table tbody th, .cto-app .cto-fit-table tbody td { height: 60px; padding: 0 8px; vertical-align: middle; text-align: left; font-family: var(--cto-font-ui); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 18px; color: var(--cto-body); background: #fff; border: 0; border-bottom: 1px solid var(--cto-hair); overflow: hidden; white-space: nowrap; }
.cto-app .cto-fit-table tbody td .cto-cm { font-size: 12px; line-height: 16px; }
.cto-app a.cto-fit-link, .cto-app a.cto-fit-row { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 60px; color: var(--cto-ink); text-decoration: none; overflow: hidden; }
.cto-app .cto-fit-table a.cto-fit-link { margin: 0 -8px; padding: 0 8px; }
.cto-app .cto-fit-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 22px; text-decoration: underline; text-decoration-color: var(--cto-red); text-underline-offset: 3px; }
.cto-app .cto-fit-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--cto-muted); }
.cto-app .cto-fit-sum { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--cto-ink); }
.cto-app .cto-fit-gh { margin: 8px 0 0; padding: 6px 10px; font-family: var(--cto-font-display); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 20px; color: #fff; background: var(--cto-ink); }
.cto-app .cto-fit-gh--fit { background: var(--cto-green); }
.cto-app .cto-fit-gh--part { background: var(--cto-amber); }
.cto-app .cto-fit-gh--no { background: var(--cto-red-dark); }
.cto-app .cto-fit-list { background: #fff; border: 1px solid var(--cto-border); border-top: 0; }
.cto-app .cto-fit-list li { margin: 0; border-bottom: 1px solid var(--cto-hair); }
.cto-app .cto-fit-row { padding: 0 10px; }

/* =================================================================== reddit */
.cto-app .cto-reddit-sub { margin: 0 0 12px; font-size: 14px; color: var(--cto-muted); }
.cto-app .cto-rlist { margin: 0 0 12px; padding: 0; border-top: 3px solid var(--cto-red); background: #fff; border-left: 1px solid var(--cto-border); border-right: 1px solid var(--cto-border); }
.cto-app .cto-ritem { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--cto-border); }
.cto-app .cto-rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.cto-app .cto-rrank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 13px; font-weight: 700; color: #fff; background: var(--cto-ink); border-radius: 50%; }
.cto-app a.cto-rname, .cto-app .cto-rname-plain { flex: 1 1 150px; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--cto-ink); }
.cto-app a.cto-rname { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--cto-red); text-underline-offset: 3px; }
.cto-app .cto-rtag, .cto-app .cto-rscope { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--cto-muted); background: #fff; border: 1px solid var(--cto-border); border-radius: 999px; }
.cto-app .cto-rcount { font-size: 13px; color: var(--cto-muted); }
.cto-app .cto-bar { height: 6px; margin: 0 0 8px; background: var(--cto-hair); }
.cto-app .cto-bar-fill { display: block; height: 100%; background: var(--cto-red); }
.cto-app .cto-rtext, .cto-app .cto-rnote { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.cto-app .cto-rnote { font-size: 13px; color: var(--cto-muted); }
.cto-app .cto-ractions { margin: 0; }
.cto-app a.cto-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cto-ink); text-decoration: underline; text-decoration-color: var(--cto-red); text-underline-offset: 3px; }
.cto-app details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--cto-ink); background: #fff; border: 1px solid var(--cto-border); }
.cto-app details > summary::-webkit-details-marker { display: none; }
.cto-app details > summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--cto-red); }
.cto-app details[open] > summary::after { content: "\2013"; }
.cto-app .cto-rmore { margin: 0 0 12px; }
.cto-app .cto-rmore .cto-rlist { margin: 0; border-top: 0; }
.cto-app .cto-rtips-title { margin: 18px 0 8px; font-family: var(--cto-font-display); font-weight: 600; font-size: 18px; color: var(--cto-ink); }
.cto-app .cto-rtips li { margin: 0 0 6px; padding-left: 14px; position: relative; font-size: 15px; }
.cto-app .cto-rtips li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--cto-red); }

/* =================================================================== how-to */
.cto-app .cto-howto-desc { margin: 0 0 12px; font-family: var(--cto-font-body); font-size: 17px; line-height: 1.6; }
.cto-app .cto-howto-steps { counter-reset: cto-step; }
.cto-app .cto-howto-step { position: relative; margin: 0 0 12px; padding: 12px 14px 12px 52px; background: #fff; border: 1px solid var(--cto-border); counter-increment: cto-step; scroll-margin-top: 96px; }
.cto-app .cto-howto-step::before { content: counter(cto-step); position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-weight: 700; color: #fff; background: var(--cto-red); border-radius: 50%; }
.cto-app .cto-howto-sname { margin: 0 0 2px; font-family: var(--cto-font-display); font-weight: 600; font-size: 17px; color: var(--cto-ink); }
.cto-app .cto-howto-stext { font-family: var(--cto-font-body); font-size: 16px; line-height: 1.55; }

/* ====================================================================== faq */
.cto-app .cto-faq-item { margin: 0 0 8px; background: #fff; border: 1px solid var(--cto-border); }
.cto-app .cto-faq-item > summary { border: 0; font-family: var(--cto-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.cto-app .cto-faq-a { padding: 0 14px 12px; font-family: var(--cto-font-body); font-size: 17px; line-height: 1.65; color: var(--cto-body); }
.cto-app .cto-faq-a p { margin: 0 0 8px; }

/* ===================================================== article figures */
.cto-app.cto-figure { margin: 24px 0; }
.cto-app.cto-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--cto-radius); }
.cto-app.cto-figure figcaption { margin: 8px 0 0; font-family: var(--cto-font-display); font-size: 13px; letter-spacing: .04em; color: var(--cto-muted); }

/* ================================================================== wider */
@media (min-width: 640px) {
  .cto-app .cto-pickrow { grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 4px 16px; }
  .cto-app .cto-pick-act { margin-top: 0; }
  .cto-app.cto-card { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .cto-app .cto-fig { width: 220px; }
  .cto-app .cto-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cto-app .cto-card-actions .cto-buy { width: auto; }
  .cto-app .cto-fit-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .cto-app .cto-units { grid-column: 1 / -1; }
}