/* en-us-hiw.css: US "How it works" page (/en/platforms/), English only. Loaded after /assets/cards.css and en-us-home.css.
   Module layout follows the original Solutions page (/solutions/style.css .sol-detail · .sol-uc). Mobile-first (min-width). */

/* "Example" label: anything that is not a real diagnosis value */
.hw-ex { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid #CBD5E1; border-radius: 9999px; background: #F8FAFC; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.5; color: #475569; vertical-align: middle; white-space: nowrap; }

/* Top */
.hw-hero { padding: calc(var(--nav-h) + 48px) 24px 48px; background: var(--surface); }
.hw-hero-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.hw-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); }
.hw-lead { max-width: 680px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: #475569; }
.hw-sellers { margin-top: 32px; display: grid; gap: 10px; text-align: left; }
.hw-sellers a { display: block; padding: 16px 18px; border: 1px solid var(--uh-line); border-radius: 16px; background: #fff; text-decoration: none; color: inherit; transition: border-color .2s; }
.hw-sellers a:hover { border-color: #A7D7B7; }
.hw-sellers a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.hw-sellers b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.hw-sellers span { display: block; margin-top: 4px; font-size: 14px; color: #64748B; }
.hw-sellers b::after { content: " ↓"; color: var(--uh-deep); }

/* Module groups (same values as the original .sol-detail) */
.hw-detail { background: #fff; padding: clamp(56px, 10vw, 96px) 24px; scroll-margin-top: var(--nav-h); }
.hw-detail--soft { background: var(--bg-soft, #F8FAFC); }
.hw-detail-inner { max-width: var(--maxw); margin: 0 auto; }
.hw-detail-head { text-align: center; margin-bottom: clamp(40px, 7vw, 64px); }
.hw-detail-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.hw-detail-sub { margin-top: 14px; font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: #475569; }
.hw-uc-list { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 80px); }
.hw-uc { display: flex; flex-direction: column; }
.hw-uc-text { text-align: center; margin-bottom: 24px; }
.hw-uc-title { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.hw-uc-sub { margin-top: 6px; font-size: 15px; color: #64748B; }
.hw-uc-points { list-style: none; margin: 18px auto 0; padding: 0; width: max-content; max-width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.hw-uc-points li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--text); }
.hw-uc-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--uh-deep); font-weight: 700; }
.hw-uc-card { display: flex; justify-content: center; min-width: 0; }

/* Cards: five market chips wrap on phones; source line can hold the Example label */
.hw-uc-card .sc-search { flex-wrap: wrap; row-gap: 8px; }
.hw-uc-card .sc-gauge__num span { font-size: 13px; }
.hw-uc-card .sc-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

@media (min-width: 768px) {
  .hw-sellers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 900px) {
  .hw-uc { flex-direction: row; align-items: center; gap: clamp(32px, 5vw, 64px); }
  .hw-uc-text { flex: 0 0 300px; text-align: left; margin-bottom: 0; }
  .hw-uc-points { margin-left: 0; }
  .hw-uc-card { flex: 1 1 auto; }
  .hw-uc:nth-child(even) { flex-direction: row-reverse; } /* zigzag like the original */
}
.hw-uc-card .who-head__ic { color: #475569; }
.hw-uc-card .calc-card { --calc-blue: #008533; } /* slider in the site green */
.hw-uc-card .calc-wf__pct.is-loss { color: #B91C1C; }
.hw-logos { padding: 8px 0 clamp(48px, 8vw, 80px); background: #fff; } /* ⑧ logo row before the closing CTA */

/* ── Listing copy before → after slider (2026-10-22 PO). Overrides shared /assets/cards.css for the English site only.
   Bar starts at 6%; both layers keep their content right of 6% so nothing is cut or mixed at the start, and the main
   line of both layers sits at the same height (the before layer reserves the after layer's small second line). ── */
.reg-wipe { padding-top: 40px; }
/* both layers share one grid cell: the row grows with the longer text, and the first lines start at the same height */
.reg-wipe .rw-row { display: grid; height: auto; min-height: 50px; }
.reg-wipe .rw-face { position: relative; inset: auto; grid-area: 1 / 1; align-items: start; padding: 10px 14px 10px calc(6% + 12px); }
.reg-wipe .rw-mark { margin-top: -2px; }
.reg-wipe .rw-badge { margin-top: -1px; }
.reg-wipe .rw-text small { line-height: 14px; margin-top: 1px; }
.reg-wipe .rw-before .rw-text::after { content: ""; display: block; height: 15px; }
.reg-wipe__bar { top: 0; }
.reg-wipe__bar:focus-visible { outline: none; }
.reg-wipe__bar:focus-visible .reg-wipe__grip { outline: 2px solid var(--text); outline-offset: 2px; }
.reg-wipe .reg-wipe__grip { top: 18px; }
.reg-wipe__tip { position: absolute; top: 18px; left: 22px; transform: translateY(-50%); padding: 4px 10px; border-radius: 9999px; background: var(--text); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.reg-wipe__tip[hidden] { display: none; }
.reg-wipe__btns { display: flex; gap: 8px; margin-top: 12px; }
.reg-wipe__btn { min-height: 36px; padding: 6px 16px; border: 1px solid var(--border-medium); border-radius: 9999px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.reg-wipe__btn:hover { background: #F7F8FA; }
.reg-wipe__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ── Generated product page preview (2026-10-22 PO): illustration left, listing right (stacked on phones). Example only ── */
.hw-uc-card .loc-panel { padding: 8px 0 4px; }
.lp { display: grid; gap: 18px; text-align: left; }
.lp-photo { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto; border-radius: 14px; background: #fff; } /* AI-made photo on a white background: sits on the white card without a frame */
.lp-info { min-width: 0; }
.lp-title { font-size: 16px; line-height: 1.4; color: var(--text); }
.lp-title--amz { font-weight: 500; }
.lp-title--ebay { font-weight: 700; }
.lp-price { margin-top: 8px; font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.lp-bin { margin-top: 8px; display: inline-block; padding: 4px 12px; border-radius: 9999px; background: #EEF2FF; color: #3730A3; font-size: 13px; font-weight: 700; }
.lp-h { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--text); }
.lp-bullets { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.lp-kw { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip { padding: 4px 10px; border-radius: 9999px; background: #F1F5F9; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: #334155; }
.lp-note { margin-top: 6px; font-size: 12px; color: #64748B; }
.lp-spec { margin-top: 8px; width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-spec th, .lp-spec td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.lp-spec th { width: 40%; background: #F8FAFC; font-weight: 600; color: #475569; }
.lp-spec td { color: var(--text); }
.lp-foot { margin-top: 18px; text-align: center; }
@media (min-width: 640px) {
  .lp { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
}
/* right-hand text of each module stays inside its 300px column (a long point line used to push it to the edge) */
@media (min-width: 1024px) {
  .hw-uc-text { min-width: 0; }
  .hw-uc-points { width: auto; }
}

/* ── Reviews bars (2026-10-22 PO): one-line names on the left, a light gray track under each bar, % right next to the bar.
   Purchase drivers / complaints (.rc-mini) and the top 3 review counts (.rc-row). Overrides shared /assets/cards.css ── */
html[lang="en"] .review-card .rc-mini { grid-template-columns: 158px minmax(0, 1fr) 2.6em; gap: 10px; }   /* 158px fits "Too small for large dogs"; beats the shared html[lang="en"] .rc-mini 100px rule */
.review-card .rc-mini__label { text-align: left; white-space: nowrap; font-size: 13px; }
.review-card .rc-mini__plot { height: 10px; border-radius: 9999px; background: #EEF1F4; overflow: hidden; }
.review-card .rc-mini__bar { height: 10px; border-radius: 9999px; }
.review-card .rc-mini__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.review-card .rc-row__label { text-align: left; white-space: nowrap; }
.review-card .rc-row__plot { border-radius: 6px; background: #EEF1F4; overflow: hidden; }
.review-card .rc-bar { border-radius: 6px; }
.review-card .rc-row__count { text-align: right; font-variant-numeric: tabular-nums; }
/* 1024 and below: name on its own line above the bar */
@media (max-width: 1024px) {
  html[lang="en"] .review-card .rc-mini { grid-template-columns: minmax(0, 1fr) 2.6em; grid-template-areas: "label label" "plot val"; row-gap: 4px; }
  .review-card .rc-mini__label { grid-area: label; }
  .review-card .rc-mini__plot { grid-area: plot; }
  .review-card .rc-mini__val { grid-area: val; }
  .review-card .rc-minis { gap: 12px; }
}
/* phones: drivers and complaints stack, review count names above their bars */
@media (max-width: 640px) {
  .review-card .rc-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .review-card .rc-row { grid-template-columns: minmax(0, 1fr) 4.2em; /* fixed count column: every track ends at the same place */ grid-template-areas: "label label" "plot count"; row-gap: 4px; }
  .review-card .rc-row__label { grid-area: label; }
  .review-card .rc-row__plot { grid-area: plot; height: 22px; }
  .review-card .rc-bar { height: 22px; }
  .review-card .rc-row__count { grid-area: count; }
}