/* Group "company": Compare (/compare), About (/about) and Contact (/contact).
   Refines the shared patterns in site.css and pages.css for the three pages a
   visitor reads before trusting Studio with a recording or a payment: how it
   differs, who is behind it, and how to reach a person. Tokens only; the one
   fixed colour is the always-dark video stage. */

/* ================================================================ shared */
.co-flush { margin-bottom: 0; }
.co-quiet { color: var(--text-subtle); }
.tc b.co-tc-dim { color: var(--ink-400); }
/* A text link that stands alone gets a real touch target. */
.co-tap { display: inline-flex; align-items: center; min-height: 2.75rem; align-self: flex-start; font-weight: var(--font-medium); }
.co-hero .ticks { margin-top: calc(-1 * var(--space-1)); }

/* ================================================================ compare */
/* The short answer: one row per product, the approach it takes, and who does
   the editing. Studio's row carries the page's one cut corner. */
.co-verdict { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 32rem; justify-self: end;
  padding: var(--space-5); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg); }
.co-verdict__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-inline: var(--space-1); }
.co-verdict__head h2 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 1.3; letter-spacing: var(--tracking-caps); color: var(--cut-text); }
.co-verdict__src { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.co-verdict__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.co-pick { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.co-pick--us { border: 2px solid var(--accent); padding: calc(var(--space-4) - 1px); background: var(--accent-subtle); clip-path: var(--cut-corner); }
.co-pick__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  background: var(--surface); border: var(--border-w) solid var(--border); color: var(--text-muted); }
.co-pick--us .co-pick__icon { background: var(--accent); border-color: transparent; color: var(--text-on-accent); }
.co-pick__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-pick__text b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.015em; color: var(--text-strong); }
.co-pick__text span { font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }
.co-pick__who { justify-self: end; white-space: nowrap; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); border: var(--border-w) solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface); }
.co-pick__who--us { margin-right: 0.75rem; border-color: transparent; background: var(--accent); color: var(--text-on-accent); }
@media (max-width: 479px) {
  .co-verdict { padding: var(--space-4); }
  .co-pick { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .co-pick--us { padding: calc(var(--space-3) - 1px); }
  .co-pick__icon { width: 2.5rem; height: 2.5rem; }
  .co-pick__who { grid-column: 2; justify-self: start; margin-right: 0; }
}
@media (max-width: 1023px) { .co-verdict { justify-self: stretch; max-width: none; } }
/* Small desktops: the who-edits tag moves under the words so they keep their width. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .co-pick { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .co-pick__who { grid-column: 2; justify-self: start; }
  .co-pick__who--us { margin-right: 0; }
}

/* The side-by-side. A real table on tablet and up, with Studio's column
   tinted; on phones each row becomes a card with the product named on every
   answer, so nothing scrolls sideways. */
.co-table { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-2) var(--space-4) var(--space-4); overflow: hidden; }
.co-cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.co-cmp th, .co-cmp td { padding: var(--space-4); vertical-align: top; text-align: left; line-height: 1.5; border-bottom: var(--border-w) solid var(--border-subtle); }
.co-cmp tbody tr:last-child > * { border-bottom: 0; }
.co-cmp thead th { padding-top: var(--space-5); border-bottom: var(--border-w) solid var(--border); }
.co-cmp__name { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-bold); letter-spacing: -0.015em; color: var(--text-strong); }
.co-cmp__kind { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.co-cmp tbody th { width: 19%; padding-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.co-cmp td { width: 27%; color: var(--text-muted); }
.co-cmp .is-us { background: var(--accent-subtle); color: var(--text); border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.co-cmp thead .is-us { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom-color: var(--accent-border); }
.co-cmp thead .is-us .co-cmp__kind { color: var(--accent-text); }
.co-cmp tbody tr:last-child .is-us { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.co-cmp td b { font-weight: var(--font-semibold); color: var(--text-strong); }
.co-yes { display: flex; align-items: flex-start; gap: var(--space-2); }
.co-yes svg { flex: none; margin-top: 0.15rem; color: var(--success); }
.co-cmp .is-us .co-yes svg { color: var(--accent-text); }
.co-source { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 52rem; }
.co-source svg { flex: none; margin-top: 0.2rem; color: var(--text-subtle); }
/* Inline links in the source line: a taller hit area without moving the text. */
.co-source .s-link { display: inline; padding-block: 0.8125rem; }

/* Below desktop the table turns into one card per question. Tablets keep
   the three answers side by side; phones stack them with the product named
   on the left. */
@media (max-width: 1023px) {
  .co-table { background: transparent; border: 0; border-radius: 0; padding: 0; overflow: visible; }
  .co-cmp, .co-cmp tbody, .co-cmp tr, .co-cmp th, .co-cmp td { display: block; width: auto; }
  .co-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .co-cmp tbody { display: flex; flex-direction: column; gap: var(--space-3); }
  .co-cmp tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-2); padding: 0 var(--space-3) var(--space-3);
    background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl); }
  .co-cmp tbody th { grid-column: 1 / -1; width: auto; padding: var(--space-4) var(--space-1) var(--space-3); margin-bottom: var(--space-3); border-bottom: var(--border-w) solid var(--border); }
  .co-cmp td, .co-cmp tbody tr:last-child .is-us { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 0; border-radius: var(--radius-md); }
  .co-cmp td::before { content: attr(data-label); font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-base); letter-spacing: -0.01em; color: var(--text-strong); }
  .co-cmp .is-us::before { color: var(--accent-text); }
}
@media (max-width: 599px) {
  .co-cmp tbody tr { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-4) var(--space-2); }
  .co-cmp tbody th { padding-inline: 0; margin-bottom: var(--space-2); }
  .co-cmp td, .co-cmp tbody tr:last-child .is-us { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-radius: 0; }
  .co-cmp td + td { border-top: var(--border-w) solid var(--border-subtle); }
  .co-cmp td::before { font-size: var(--text-sm); }
  .co-cmp .is-us, .co-cmp tbody tr:last-child .is-us { margin-inline: calc(-1 * var(--space-2)); padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); }
  .co-cmp .is-us + td { border-top: 0; }
}

/* What done looks like: the video page once an edit is ready, on a real
   frame, with a change asked for in the chat. */
.co-not { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg);
  border: var(--border-w) dashed var(--border-strong); max-width: 34rem; }
.co-not__icon { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cut-subtle); color: var(--cut-text); }
.co-not p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); }
.co-not b { color: var(--text-strong); font-weight: var(--font-semibold); }
.co-job { width: 100%; max-width: 34rem; justify-self: end; }
.co-job__body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: center; padding: var(--space-5); }
.co-job__frame { width: 100%; max-height: none; box-shadow: var(--shadow-md); }
.co-job__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.co-job__chat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.co-job__chat .bub { max-width: 92%; font-size: var(--text-xs); line-height: 1.4; }
@media (max-width: 1023px) { .co-job { justify-self: stretch; max-width: 34rem; margin-inline: auto; } }
@media (max-width: 479px) {
  .co-job__body { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-4); padding: var(--space-4); align-items: start; }
  .co-job .steplist { gap: var(--space-2); font-size: var(--text-xs); }
  .co-job .steplist li { align-items: flex-start; line-height: 1.35; }
  .co-job .steplist li::before { width: 1rem; height: 1rem; }
}

/* The fair test, and when a person suits you better. */
.co-test { gap: var(--space-5); }
.co-test h3 { font-size: var(--text-xl); }
.co-person { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.co-person > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.co-person h3 { font-size: var(--text-lg); }
.co-person p { font-size: var(--text-sm); }

/* ================================================================== about */
.co-blue { color: var(--accent-text); }
.co-self { align-self: flex-start; }
/* Three real frames, fanned. On phones the fan stays small so the words lead. */
.co-fan .fan { padding-top: var(--space-2); }
@media (max-width: 1023px) { .co-fan { margin-top: calc(-1 * var(--space-4)); } }
/* Small desktops: a narrower fan so the tilted frames stay inside the column. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .co-fan .fan .phone { width: 9rem; } .co-fan .fan .phone:nth-child(2) { width: 10.5rem; } .co-fan .fan .phone + .phone { margin-left: -2.5rem; }
}
@media (max-width: 479px) { .co-fan .fan .phone { width: 6.5rem; } .co-fan .fan .phone:nth-child(2) { width: 8rem; } .co-fan .fan .phone + .phone { margin-left: -1.75rem; } }

/* Who does which part: your four steps beside the four things Studio does.
   The pair gets the wider column so each line fits on one row. */
@media (min-width: 1024px) and (max-width: 1199px) { .co-why { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }
@media (min-width: 1200px) { .co-why { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); } }
.co-parts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.co-parts .vsplit__col { gap: var(--space-5); padding: var(--space-5); }
.co-parts__list { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: var(--space-3) !important; color: var(--text-muted); counter-reset: part; }
.co-parts__list li { display: flex; align-items: center; gap: var(--space-3); min-height: 1.75rem; }
.co-parts__list svg { flex: none; color: var(--text-subtle); }
.co-parts .checks { gap: var(--space-3); color: var(--text); }

/* Four promises: four across on desktop, two by two on tablets. */
.co-promises { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .co-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .co-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.co-promises .card2 h3 { margin-top: var(--space-2); }
/* Phones: icon beside the words, so four promises stay one short scroll. */
@media (max-width: 639px) {
  .co-promises .card2, .co-next .card2 { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-5); }
  .co-promises .card2__icon, .co-next .card2__icon { grid-row: span 2; }
  .co-promises .card2 h3, .co-next .card2 h3 { margin-top: 0; align-self: center; font-size: var(--text-lg); }
  .co-promises .card2 p, .co-next .card2 p { grid-column: 2; font-size: var(--text-sm); }
  .co-next .card2__go { display: none; }
  .co-next .card2 { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .co-next .card2::after { content: ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem;
    border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: rotate(45deg); }
}

/* The fact sheet: what a careful buyer checks before paying. */
.co-facts { display: flex; flex-direction: column; padding: var(--space-2) var(--space-6); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }
.co-facts__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: baseline;
  padding: var(--space-4) 0; border-top: var(--border-w) solid var(--border-subtle); }
.co-facts__row:first-child { border-top: 0; }
.co-facts dt { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.co-facts dt svg { flex: none; color: var(--accent-text); }
.co-facts dd { color: var(--text); line-height: 1.55; }
.co-facts dd .s-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }
@media (max-width: 479px) {
  .co-facts { padding: var(--space-1) var(--space-4); }
  .co-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* Where to go next: four across on desktop, two by two below. */
.co-next { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .co-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .co-next { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .co-band .s-btn { width: 100%; } }

/* ================================================================ contact */
.co-chero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.phero.co-chero + .sx.co-csec { padding-top: 0; }
.co-contact { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) { .co-contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-12); } }

/* The form card: a short head, the topic they came about, then the fields. */
.co-form { gap: var(--space-5); box-shadow: var(--shadow-md); }
.co-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4); border-bottom: var(--border-w) solid var(--border); }
.co-form__time { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.co-form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .co-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.co-form .s-textarea { min-height: 9.5rem; }
.co-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-1); }
.co-form__send .s-btn { margin: 0; }
.co-form__safe { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.co-form__safe svg { flex: none; }
/* The reference number lands here. Empty, it stays in the page for screen
   readers but takes no room. product.js turns the line into an alert after a
   failed send and then adds a new line for the next result, so every message
   line (.co-form > p[role]) gets the same box and only the newest one shows. */
.co-form__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form2.co-form > p[role]:has(~ p[role]:not(:empty)) { display: none; }
.form2.co-form > p[role]:not(:empty) { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-4); border-radius: var(--radius-lg);
  border: var(--border-w) solid color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-subtle); color: var(--text);
  font-weight: var(--font-medium); line-height: 1.5; }
.form2.co-form > p[role]:not(:empty)::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
[data-theme="dark"] .form2.co-form > p[role]:not(:empty)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0E11' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.form2.co-form > p[role="alert"]:not(:empty) { border-color: color-mix(in srgb, var(--error) 45%, transparent); background: var(--error-subtle); }
.form2.co-form > p[role="alert"]:not(:empty)::before,
[data-theme="dark"] .form2.co-form > p[role="alert"]:not(:empty)::before { content: "!"; display: grid; place-items: center; background: var(--error);
  color: var(--surface); font-weight: var(--font-bold); font-size: var(--text-xs); line-height: 1; }
@media (max-width: 479px) { .co-form__send .s-btn { width: 100%; } }

/* What they asked about, carried from the link they followed. */
.co-form .topicnote .s-link { padding-block: 0.8125rem; }
.co-topic { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--accent-subtle); border: var(--border-w) solid var(--accent-border); }
.co-topic__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent); }
.co-topic__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co-topic__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.co-topic__text b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.015em; color: var(--text-strong); }
.co-topic__text > span:last-child { font-size: var(--text-sm); color: var(--text-muted); }
.co-topic__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; }
@media (max-width: 479px) { .co-topic { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: 0; } .co-topic__link { grid-column: 2; justify-self: start; } }

/* Beside the form: what happens next, quick answers, and the try-first way in. */
.co-aside { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.co-aside .s-h3 { font-size: var(--text-xl); }
.co-next-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.co-steps { list-style: none; padding: 0; counter-reset: st; display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.co-steps::before { content: ""; position: absolute; left: 0.9375rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--border); }
.co-steps li { position: relative; counter-increment: st; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px var(--space-4); }
.co-steps li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.co-steps b { color: var(--text-strong); font-weight: var(--font-semibold); align-self: center; padding-top: 0.25rem; }
.co-steps span { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

.co-quick { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--border-w) solid var(--border); }
.co-qlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.co-qlist a { display: flex; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface); border: var(--border-w) solid var(--border); color: var(--text);
  transition: border-color var(--duration-instant) var(--ease-default), transform var(--duration-fast) var(--ease-default); }
.co-qlist a:hover { border-color: var(--accent); }
.co-qlist a > svg { flex: none; margin-left: auto; color: var(--accent-text); transition: transform var(--duration-fast) var(--ease-default); }
.co-qlist a:hover > svg { transform: translateX(3px); }
.co-qlist__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--accent-text); }
.co-qlist__text { display: flex; flex-direction: column; min-width: 0; }
.co-qlist__text b { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.co-qlist__text span { font-size: var(--text-xs); color: var(--text-subtle); }

/* Tablets: what happens next beside the quick answers, the try-first card under both. */
@media (min-width: 640px) and (max-width: 1023px) {
  .co-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
  .co-quick { padding-top: 0; border-top: 0; }
  .co-try { grid-column: 1 / -1; }
}
.co-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-xl); border: var(--border-w) dashed var(--border-strong); }
.co-try > div { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 14rem; }
.co-try p { font-size: var(--text-sm); color: var(--text-muted); }
.co-try .s-btn { min-height: 2.75rem; }
@media (max-width: 479px) { .co-try .s-btn { width: 100%; } }