/* ==========================================================================
   competitors.css — /competitor-analysis (wave 2, 2026-09-04; fixed same day).

   Loads after feature-v2.css, feature-v3.css, show.css and home.css.

   Four things worth knowing before editing:
   1. The review race chart is one inline SVG on viewBox="0 0 100 100" with
      preserveAspectRatio="none", so the plot fills any box and every stroke
      carries vector-effect="non-scaling-stroke" to stay the width set here.
      Because the box is scaled unevenly, nothing round can be drawn inside
      it: the month cursor and the three dots are HTML elements positioned in
      percentages over the same box, by /js/competitors.js.
   2. The x scale runs 0 to 100, and .race-range is pulled 11px (half a thumb)
      past each end of its track, so the thumb's centre travels exactly the
      plot's width. Cursor, ticks and data points therefore share one scale;
      do not re-inset the x scale without undoing that negative margin.
   3. Only one surface deep. The card is white, the plot band is the one tint,
      and the position cells underneath sit on the card itself. No card in a
      card, per the site skill.
   4. Nothing in a mock on this page is under 13px, and .shot-h uses a font:
      shorthand in feature-v2.css, so it has to be re-declared here in full.
   ========================================================================== */

.cp-page .sec-tight { padding-top: 0; }
/* the quote arrives right after the hand-off line: the shared 116px would leave the page's biggest void before its proof */
.cp-page .tq-section { padding-top: clamp(40px, 4vw, 56px); }

/* ---------- hero: the tracked state, most reviews first, with you second of three ---------- */
.cp-add { padding: 18px 20px 16px; }
.cp-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 2px 10px; border-bottom: 1px solid var(--v2-line); }
.cp-hit:first-of-type { margin-top: 2px; }
.cp-hit > span { min-width: 0; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }
.cp-hit b { display: block; font: 600 14px/1.4 var(--font-display); color: var(--ink); }
.cp-hit.is-you b { color: var(--blue); }
.cp-tag { margin-left: 7px; padding: 1px 7px; border-radius: 6px; background: var(--ghost); color: var(--blue); font: 600 13px/1.35 var(--font-display); }
.cp-hit-n { flex: none; font: 600 15px/1.3 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-hit.is-you .cp-hit-n { color: var(--blue); }
/* the shared .m-from runs at 12.5px; on this page it clears the 13px floor */
.cp-page .m-from { font-size: 13px; }
.cp-cap { margin-top: 12px; font: 500 13px/1.4 var(--font-display); color: #6b7088; }

/* ---------- the review race: copy left, the chart card right ---------- */
.calc--race { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

.race { padding: 0; overflow: hidden; }
.race-head { display: flex; align-items: flex-start; gap: 16px; padding: 17px 22px 16px; border-bottom: 1px solid var(--v2-line); }
.race-head > div:first-child { flex: 1; min-width: 0; }
.race-head span { display: block; font: 400 13px/1.5 var(--font-body); color: #5b6076; }
.race-head b { display: block; font: 800 16px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
/* .legend + .swl (index.module.scss:1138-1160): a 14px x 3px rule, 12px/600 label, lifted to 13px here */
.race-legend { display: flex; flex: none; gap: 14px; align-items: center; flex-wrap: wrap; font: 600 13px/1.4 var(--font-display); color: #4a5065; }
.race-legend span { display: inline-flex; align-items: center; gap: 7px; }
.race-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.race-sw--you { background: var(--blue); }
.race-sw--c { background: #c6cbda; }

.race-body { padding: 18px 22px 16px; background: #f7f9fd; border-bottom: 1px solid var(--v2-line); }
.race-plot { display: grid; grid-template-columns: 40px minmax(0, 1fr) 92px; }
.race-y { position: relative; grid-column: 1; grid-row: 1; }
.race-y span { position: absolute; right: 10px; transform: translateY(-50%); font: 500 13px/1 var(--font-display); color: #6b7088; font-variant-numeric: tabular-nums; }
.race-canvas { position: relative; grid-column: 2; grid-row: 1; height: 240px; }
.race-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.race-grid { stroke: rgba(15, 13, 25, .1); stroke-width: 1; }
.race-area { fill: url(#race-fill); }
.race-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.race-line--you { stroke: var(--blue); stroke-width: 2.75; }
.race-line--a { stroke: #7866cc; stroke-dasharray: 7 4; }
.race-line--b { stroke: #6b7088; stroke-dasharray: 1.5 4; }
/* the whole year, always drawn, so the shape is legible before anything is dragged and with JS off */
.race-ghost { opacity: .26; }

/* the line keys sit at the right end of each line, so no swatch has to be matched to a colour */
.race-keys { position: relative; grid-column: 3; grid-row: 1; }
.race-keys span { position: absolute; left: 17px; transform: translateY(-50%); white-space: nowrap; font: 600 13px/1.3 var(--font-display); }
.race-keys .is-you { color: var(--blue); }
.race-keys .is-a { color: #6350bb; }
.race-keys .is-b { color: #6b7088; }

.race-cursor { position: absolute; top: -6px; bottom: -6px; width: 1px; margin-left: -.5px; background: rgba(15, 13, 25, .28); transition: left .14s var(--ease-out); }
.race-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; transition: left .14s var(--ease-out), top .14s var(--ease-out); }
.race-dot--you { box-shadow: 0 0 0 3px var(--blue); }
.race-dot--a { box-shadow: 0 0 0 3px #7866cc; }
.race-dot--b { box-shadow: 0 0 0 3px #6b7088; }

/* ---------- the scrubber: a control that reads as one, with the month beside the hand ---------- */
.race-scrub { grid-column: 2; grid-row: 2; margin-top: 12px; }
.race-scrub-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.race-scrub-l { font: 500 13px/1.4 var(--font-display); color: #6b7088; }
/* the affordance belongs on the control, not in a 44-word paragraph above the card */
.race-scrub-l em { font-style: normal; }
.race-scrub-l em::before { content: " · "; }
.race-month { font: 600 15px/1.4 var(--font-display); color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.race-track { position: relative; height: 44px; margin-top: 2px; }
.race-ticks { position: absolute; left: 0; right: 0; top: 34px; height: 6px; }
.race-ticks i { position: absolute; top: 0; width: 1px; height: 6px; margin-left: -.5px; background: #c2cadf; }
.race-range { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: -11px; right: -11px; width: auto; height: 44px; background: transparent; cursor: ew-resize; }
.race-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--blue) 0 calc(11px + var(--f, 0) * (100% - 22px)), #dde2ef calc(11px + var(--f, 0) * (100% - 22px)) 100%); }
.race-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #f7f9fd, 0 3px 8px -2px rgba(15, 13, 25, .45); }
.race-range::-moz-range-track { height: 4px; border-radius: 2px; background: #dde2ef; }
.race-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--blue); }
.race-range::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #f7f9fd; border-radius: 50%; background: var(--blue); }
.race-range:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 22px; }
.race-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font: 500 13px/1.4 var(--font-display); color: #6b7088; }

.race-pos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.race-cell { position: relative; padding: 16px 22px 18px; }
.race-cell + .race-cell { border-left: 1px solid var(--v2-line); }
.race-label { display: block; max-width: calc(100% - 26px); min-height: 37px; font: 500 13px/1.4 var(--font-display); color: #6b7088; text-wrap: balance; }   /* two lines, so the three ranks sit on one baseline when a label wraps */
/* .posTrophy (index.module.scss:2114-2119): absolute, 14px from the top and right of the cell, #b07a00.
   styles.css sets `img, svg { display: block }`, which beats the hidden attribute, so it is restored below. */
.race-trophy { position: absolute; top: 14px; right: 16px; width: 16px; height: 16px; color: #b07a00; fill: currentColor; }
.race-trophy[hidden] { display: none; }
.race-rank { display: block; margin-top: 5px; font: 800 clamp(21px, 2.2vw, 27px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the product mutes the denominator inside the big number (index.module.scss:1520-1531) */
.race-rank em { font-style: normal; font-size: 14px; font-weight: 700; color: #5b6076; }
/* .s, the note the product writes under the rank (competitorsData.js:99-124) */
.race-note { display: block; margin-top: 5px; max-width: 34ch; font: 400 13px/1.5 var(--font-body); color: #4a5065; }

/* ==========================================================================
   who is tracked, and who the assistants name instead.
   Two ported screens from the Competitors tab, each under a header bar rather than a paragraph. The cards below are
   the product's own: `.card` + `.blk` + `.blkHead` (index.module.scss:85-91, 435-444, 1107-1125), `table.lg`
   (:1269-1290), `.removeBtn` (:1559-1574), `.addcomp` (:1547-1557), `.aiRivalRow` / `.aiRivalTrack` (:2127-2165).
   Two site rules override the product inside them and nothing else does: nothing under 13px (the product runs 11 to
   12.5 here), and muted text is #5b6076. The product's uppercase tracked table headers are set in sentence case, to
   match the Locations table on /review-insights and to keep the page clear of tracked-caps furniture.
   ========================================================================== */
.cp-head { max-width: 660px; margin-bottom: 36px; }

.cp-screen + .cp-screen { margin-top: 44px; }
/* the header bar: benefit left, mechanism right, on one rule above the screen it describes */
.cp-lead { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px 40px; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--v2-line); }
.cp-lead h3 { font: 700 21px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cp-lead p { max-width: 56ch; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); }
.cp-lead a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cp-lead a:hover { color: var(--ink); }

.cp-card { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #e7e9f2; box-shadow: 0 1px 2px rgba(16, 18, 26, .05), 0 12px 32px -20px rgba(16, 18, 26, .22); }
.cp-card-h { margin-bottom: 10px; }
.cp-card h4 { font: 800 16px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cp-card-sub { display: block; margin-top: 3px; max-width: 76ch; font: 400 13px/1.5 var(--font-body); color: #5b6076; }

.cp-scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
.cptab { width: 100%; border-collapse: collapse; }
.cptab th { padding: 12px 12px 12px 0; text-align: left; border-bottom: 1px solid #e7e9f2; font: 600 13px/1.4 var(--font-display); color: #5b6076; white-space: nowrap; }
.cptab td { padding: 12px 12px 12px 0; border-bottom: 1px solid #eef0f6; font: 400 13.5px/1.4 var(--font-body); color: #4a5065; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cptab tr:last-child td { border-bottom: 0; }
.cptab .cp-locname { font-weight: 700; color: var(--ink); white-space: normal; }
.cptab tr.is-you .cp-locname { color: var(--blue); }
.cptab .cp-act { padding-right: 0; text-align: right; }
/* .removeBtn: a text button, 12px/700 muted in the product, 13 here */
.cp-remove { font: 700 13px/1.3 var(--font-display); color: #5b6076; text-decoration: underline; text-underline-offset: 2px; }
/* .addcomp: the Places search that disappears at the cap. The product's placeholder joins with an em dash. */
.cp-addrow { margin-top: 16px; }
.cp-search { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 9px; border: 1px solid #e7e9f2; background: #fff; font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.cp-search svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* .aiRivalRow: a tinted, hairlined row on a 4% / 12% blue mix, the name in ink, the queries and the evidence muted,
   and the two real actions on the right */
.cp-ai { display: grid; gap: 8px; }
.cp-ai-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; border-radius: 11px; background: #f5f8ff; border: 1px solid #e0e8ff; }
.cp-ai-main { min-width: 0; font: 400 13.5px/1.5 var(--font-body); color: #4a5065; }
.cp-ai-main b { font: 700 13.5px/1.5 var(--font-display); color: var(--ink); }
.cp-ai-q { color: #5b6076; }
.cp-ai-m { margin-top: 3px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }
.cp-ai-act { display: flex; flex: none; gap: 12px; align-items: center; }
.cp-track { padding: 8px 12px; border-radius: 9px; border: 1px solid #b3c6ff; background: #e6ecff; font: 600 13px/1 var(--font-display); color: var(--ink); white-space: nowrap; }

.cp-next { margin-top: 38px; max-width: 74ch; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); }
.cp-next a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cp-next a:hover { color: var(--ink); }

/* ---------- breakpoints ---------- */
/* .calc--race has to be restated here, because competitors.css loads after feature-v2/v3 and would otherwise keep the
   copy-left / chart-right split in two columns below 992. */
@media (max-width: 991px) {
  .calc--race { grid-template-columns: minmax(0, 1fr); }
  .race-canvas { height: 280px; }
  /* the head's title block is flex:1 with min-width:0, so beside the legend it shrinks to a three-word column
     rather than wrapping: below 992 the legend drops under the title instead */
  .race-head { display: block; }
  .race-legend { margin-top: 10px; }
  .cp-lead { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 767px) {
  .race-canvas { height: 210px; }
  .race-plot { grid-template-columns: 34px minmax(0, 1fr) 78px; }
  .race-y span { right: 8px; }
  .race-keys span { left: 13px; }
  .race-cell { padding: 14px 14px 16px; }
  .race-head, .race-body { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  .race-rank { font-size: 20px; }
  .race-label, .race-ends, .race-y span, .race-keys span { font-size: 13px; }
  /* three notes in three columns is four words a line: the cells stack and the divider moves to the top */
  .race-pos { grid-template-columns: minmax(0, 1fr); }
  .race-cell + .race-cell { border-left: 0; border-top: 1px solid var(--v2-line); }
  .race-label { min-height: 0; }
  .race-note { max-width: none; }
  .cp-card { padding: 18px 16px; }
  .cp-lead h3 { font-size: 19px; }
  /* the five-column table becomes a stacked record: the name, then each figure against its own label */
  .cptab thead { display: none; }
  .cptab tr { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 18px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid #eef0f6; }
  .cptab tr:last-child { border-bottom: 0; }
  .cptab td { padding: 0; border: 0; }
  .cptab .cp-locname { grid-column: 1 / -1; }
  .cptab td[data-l]::before { content: attr(data-l) ": "; color: #5b6076; }
  .cptab .cp-act { grid-column: 1 / -1; text-align: left; }
  .cptab .cp-act:empty { display: none; }
  .cp-ai-row { flex-direction: column; }
  .cp-ai-act { justify-content: flex-start; }
  .cp-next { font-size: 16.5px; }
}

/* ---------- still state for captures and reduced motion ---------- */
/* the one-time reveal: with JS on, the faint full-year lines fade in when the card arrives, so the year announces
   itself once without moving the control off October. Content is visible by default; .race-anim is added by JS. */
.race-anim .race-ghost { opacity: 0; }
.race-anim.is-in .race-ghost { opacity: .26; transition: opacity .75s var(--ease-out); }
.race-anim.is-in .race-line--a.race-ghost { transition-delay: .1s; }
.race-anim.is-in .race-line--b.race-ghost { transition-delay: .2s; }
.no-motion .race-cursor, .no-motion .race-dot { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .race-cursor, .race-dot { transition: none; }
}